Understanding your ONID Web Server

Your university provides each student, staff, and faculty with an email address, web server, and web database. If you have logged into that account, then you already have this information.

For the OSU Web Design course, you’ll need your ONID email address and information about your web server.

Login to your ONID account to see what your web address is. It should look something like this:

The folder associated with this directory is the /public_html/ folder. All files for this course go in that folder. As the course progresses, you’ll add folders to this root folder. The /public_html/ folder is live to everyone with an internet connection. Only store public web files here.

The ONID servers are organized by the first initial of last names; some of these directories are on the /u1/ server and others are on the /u2/ server. When you mapped your hard drive to the public_html folder on your ONID web server, it was to one of those servers.

Web files typically are created on a local computer until they are copied to a web werver. The host company (OSU in your case) provides a user ID and password to allow access to your public space. When you login and transfer files you are using File Transfer Protocol (FTP). Some connections are secure and use Secure File Transfer Protocol (SFTP). When a hard drive is mapped mapped to the web server, it is using Secure Socket Shell (SSH).

Set up the Screens and preferences.

Code Editor Preferences

For BBEdit, update these Preferences:

1. From the BBEdit → Preferences menu, choose Text Colors.
   
2. If you prefer typing with ligher text on a dark background, change the Color Scheme to BBEdit Dark.
   
3. From the Editor Defaults tab, click the Select button to change the default font to Verdana and the font size to 12pt or whatever is comfortable for your eyes.
   

For Notepad++, update these settings:

1. From the Settings menu, choose Style Configurator.
   
2. Update the font to Verdana and the font size to 12pt or whatever is comfortable for your eyes.
   
3. If you prefer typing with ligher text on a dark background, change the Color Scheme to BBEdit Dark.
   

Add a folder and file for the first project.

Now that you have set up all the tools you’ll need to make a web page, you can start making a web site project! You’ll make a folder to hold your new project, begin writing a web page, transfer that file to the /public_html/ folder of your web server, and view it in the browser. Follow these instructions:

1. Make a project folder.

On your hard drive, make a folder for this course and for the first project.

1. From the Finder/File Explorer of your hard drive, right-click and choose New folder.
2. Name the folder CS 195 or Web Design.
3. Inside that folder, create a new folder called about. Use only lowercase letters for this folder name.

2. Make a new text document.

This will be the first of many files you create.

1. Open either BBEdit or NotePad++.
2. File → New Text Document.
3. Save the file as index.php into that about folder you made earlier. The .php file extension will allow us to use the PHP server-side scripting language along with Hypertext Markup Language (HTML).

Memorize these file-naming conventions:

• Leave out spaces, to avoid seeing ‘%20’ in the address bar of the browser.
• Use only lowercase letters, to avoid having to memorize which words are capitalized.
• Only use hyphens for filenames with two or more long words, to avoid complication.
• Don’t over-abbreviate, to help search engines name your files with plain English.

3. Write some code.

1. Open the new file and erase any code that might be there. (If you made a PHP or HTML page instead of a TEXT file, then the file may have some code in it. Remove it. We’ll add our own.
2. Copy and Paste this list of markup elements into your new page. We’ll turn these elements into HTML and PHP as we progress throughout the course.

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89

   doctype html language head     php variables         var author             var sitename             var slogan             var sitepath     title     meta         charset         viewport         description         author         keywords         robots     links         css         fonts         favicon     scripts         modernizer /head body     header         image logo         headline 1 author         slogan     /header     nav         unordered list     /nav     main     article about me          headline 1 about          aside             paragraph about author             figure                 image                 figcaption             /figure             audio about author or music selection          /aside          headline 2 contact          address             name with anchor             address             city,state,zip             phone             contact anchor jumps to form below          /address      /article     article education         headline 2         dl list     /article     article work        headline 2        dl list     /article     article service        headline 2        dl list        iframe, video     /article     article skills         headline 2         table of skills and proficencies     /article     article fun        headline 2        figure gallery           img           figcaption        /figure     /article     /main     footer        contact form        social media icons a img        copyright        last date modified     /footer scripts     jquery     prefix-free /body /html

3. Save the file.
4. Update the title element:
   1. Add < and > around the word ‘title’ in the list of elements you just added to the index.php file. These marks turn that word into a tag (or element), which is a command for the browser to display text in the tab of the browser. The search engines also read this title tag.
   2. Just after the tag, write your name in upper and lowercase letters.
   3. After your name, close the tag with </title>.
      

Transfer the file to the hard drive

With VPN active and your public_html web server mapped, can transfer the folder and file from your hard drive to the web server.

When you make updates to the files inside this folder, you can drag the folder again…just don’t drag the folder inside of itself! Avoid making /about/ folders inside the /about/ folder.

Now you have two copies of everything you did so far.

How often should you back up?

Every day! At the end of each editing session, back up the folder and its contents to a cloud drive and/or USB stick drive. Bad things happen even to the most careful people, so back up every day!

Test the file by viewing it in the browser

1. Open the browser (Chrome) and navigate to your public folder on your ONID server. That address should look like this:

   1	http://people.oregonstate.edu/~**/about/index.php

   Replace ** with YOUR ONID user name.

2. If you can see your file, hurrah!
   • Do you also see your name in the browser tab? If not, go back up to the Add Content tab of these instructions and revise the <title> tag.
3. If you don’t see the file but instead see one of these messages:
   • Internal Server Error: follow the Fix Permission Problems Tutorial.
   • File Not Found error: you probably put the file in a different location than /about/. Check to see if it is in the /public_html/ folder of your ONID server. Check other folders if you have them. Save and/or Upload/Transfer the file again.
   • Nothing: transfer the file again. Ensure you are uploading to the correct directory and are looking in the correct directory.

Scoring

Review these criteria.

This project will be scored using these criteria:

1. The new folder and file reside on the ONID or ENGR server.
2. About folder is named /about/.
3. About page is named index.php.
4. About page includes required markup element names.
5. Student's name displays in the title tag (browser tab).
6. The absolute address of the index.php file was submitted in Canvas.
7. This assignment was submitted before the deadline.

Submit the page for scoring.

Copy the absolute address of your page and submit it in Canvas. It will look something like this:

or this

• Add a note about the number of hours you spent in design and production.

OSU Students: Review the scoring feedback in Canvas.

In your Canvas Grades area, click on the Comment icon on the right side of each assignment in the list. This will reveal the comments in a wider format for easy reading.

So that you progress and learn from mistakes, please read the scoring comments each week (usually by Wednesday).

If you are confused about the score comments, please reply in the Canvas Assignment Commenting area and I will review it. Click the Assignment name to reveal the Commenting box.

Browsers

Web developers must use a variety of browsers for testing sites they build, since the world is free to choose their favorite surfing app. The platform and device will determine what is needed for viewing web sites.

For this class, Chrome is required because it is compliant with industry standards and renders this textbook website as intended. It also has helpful tools built in, such as color-coded source viewing:

• View → Developer → View Source
• Right-click → Inspect Element

Download the latest free versions as needed.

Download and use Chrome for the course; it is required!

Viewing on other browsers will be required later in the course to check the compatibility of design elements.

Download Google Chome

Download Apple Safari

Windows Edge browser

Download Mozilla Firefox

Explore Chrome

Once you install Chrome, explore to see how it works.

Address Bar

The search and address bar are the same! Type a keyword or phrase or URL in the box to reveal a list of options.

Refresh

Use the button often while working; it will get the newest version of your page rather than use the cached version on your hard drive. In some cases, a ‘hard refresh’ (Shift  ) is needed to get the supporting files (.CSS and .JS) from the server.

Viewing Source

So that you can see the course code/markup of other web pages, such as your peers in this class, or the instructor’s demo, click View → Developer → View Source. Note the keystroke and use it to save time!

This view will show the code with line numbers and colored tags. When asking a question about a problem in your page, provide the line number to speed up receiving a solution.

Using Inspect Element

To get more detail about a line of markup, inspect the markup and styles using Right-click → Inspect Element.

Chrome Window Layout Manager

Web designers need lots of windows open while they’re working, and to reduce the set-up time every day, use the Chrome ‘Layout Manager’ extension to allow Chrome to ‘remember’ where you placed the browser windows and tabs with your favorite pages open.

1. Click on the Settings menu in Chrome and select → More Tools → Extensions.
2. Scroll to the bottom of the list of extensions and click on Get More Extensions.
3. Search for ‘Layout Manager’ and install it.
4. In one browser window, set up all the tabs you want open for viewing: this textbook, your web page, the HTML validator, the CSS validator, and the Spell checker. Position the window so it takes up one-third of the window.
5. In another window, open the Editor and Canvas so it takes up two-thirds of the screen width.
6. Click on the blue Layout Manager button on the browser toolbar to Save Window Layout.
7. Next time you are ready to work on the web design project, just click on the Load Window Layout button.

Browser Resources

Learn more about marketshare, security, and compatibility:

Code Editing Applications

To keep code we write free from proprietary markup added by applications like Microsoft Word, web designers type in plain text editors. These editing applications typically include numbered lines, search and replace, color-coded code/markup, error checking, and sometimes file management.

If you already have a favorite code editor, feel free to continue using it. If you’ve never written web page code before, then continue to the installation lesson below.

Install one Editor application:

• Mac:
  
  Download BBEdit (formerly TextWrangler)

  TextWrangler (for older Macs)
• Windows and Linux:
  
  Download Notepad++ logo
• Adobe Creative Cloud: may be free for students at OSU. Inquire.

File Transfer Applications

There are a variety of ways to create folders and files and move those files from hard drives to web servers. Web servers need excellent security, however, to ensure they are not hacked by malicious actors during or after file transfers. Hackers attempt to hack all websites frequently, so using multiple layers of security is crucial.

These are some of the technologies that web developers use to secure the connection between the hard drive and web server:

• Secure Shell (SSH)
• Secure File Transfer Protocol (sFTP)
• Secure Socket Layer (SSL)
• Transport Layer Security (TLS)
• 2-factor authentication (2FA)

OSU Web Servers

OSU students use Duo to manage 2-factor authentication on ONID and ENGR web servers, which will make using file transfer functions more difficult for beginners. To simplify the web server connection set up, we will map the web server to the hard drive. We’ll do that rather than install file transfer software (which would also require using a terminal, several unix commands, text editing, and additional login tasks).

Jump down to see the Macintosh instructions. Jump down to see options for non-OSU students.

Windows mapped drives

If your computer is running Windows, use these instructions to map your OSU ONID web server to the hard drive:

1. If you are off campus, you must connect to the OSU Virtual Private Network (VPN) first, to improve security of the transfer.
2. Launch a new Explorer window.
3. Click on the This PC icon which is in the list on the left side of the screen. Choose the Computer Tab, near the top. Choose Map Network Drive from the Map Network Drive menu.
   
   
4. From the Drive menu, choose the Y drive (or any letter that is free).
5. Type this in the folder field:
   \\onid-fs.onid.oregonstate.edu\USERNAME
   
   Change USERNAME to YOUR ONID username.

   

6. Click Finish.
7. When prompted for your credentials, type your ONID email address:
   
   username@oregonstate.edu and password.
8. Now, to view that drive (and eventually transfer files to it), look at the Explorer window again and scroll to This PC to see it listed. Click on it to view the public_html folder. This public folder is where we’ll place files that we want the world to see.
   
   
   
   
   
   

Macintosh mapped drive

If your computer is running MacOS, use these instructions to map your OSU ONID web server to the hard drive:

1. If you are off campus, you must connect to the OSU Virtual Private Network (VPN) first, to improve security of the transfer.
   
   
2. From the Desktop, click the Go menu and choose Connect to Server.
   
   
3. Type smb://onid-fs.onid.oregonstate.edu/public_html into the empty field.
   
   OR, instead of public_html, you may need to type your ONID username.
   
   OR, instead, you may need to type
   
   sftp://shell.onid.oregonstate.edu/username.
   
   
   
   
4. Click Connect to view that drive.
5. When prompted for your credentials, type your ONID email address:
   username@oregonstate.edu and password.
6. If you got connected, then be sure to click the + button on the
   Go

   screen to add the connection address for later use.

7. Now, to view that drive (and eventually transfer files to it), locate the public_html server/drive in the list of drives on the left of the Finder window:
   
   
   
   Click on it to view the drive. If you’ve never placed files there, it will be empty. This public folder is where we’ll place files that we want the world to see.

Optional file management applications for non-OSU students

Other web hosts, such as GoDaddy and Bluehost, provide File Management software when logged into your account, such as Plesk and cPanel.

For web authors wanting more control over file structures, changing permissions, and viewing information about files, a plethora of other options exist. I have tested and trust these options, many of which are free and/or available on OSU lab computers. These will work with public keys (not for beginners):

An online search will produce a long list of other options.

Image Editing Applications

Professionals use Adobe Photoshop, FireWorks, and/or Illustrator to edit images for the web. They may also use Adobe’s Creative Cloud Apps:

Professionals on a low budget might use Gimp.

For this course, we’ll use free and less complicated applications.

Photo editing

One of these may already be installed on your computer; but if not, install the one for your platform:

Pixelstyle for Mac

Paint3D for Windows

Vector Drawing

Use one the following for creating logos:

Google Drawings online vector drawing tool

Adobe Illustrator logo

There are other fun options online for making background and foreground graphics, which you are not allowed to use for this course. You must create your own images to learn and practice new skills.

Check English Spelling and Grammar

Because we can’t easily check the spelling of text that is not code from inside a code editing application, additional browser tools are needed to streamline the process of spelling and grammar checking the content of web sites.

Install one of these Chrome browser extensions:

Language Tool Chrome browser extensions

SiteSpell Chrome browser extension

After installation, practice using it…select this text to test it:

Did your new tool find all seven spelling errors?

Misspellings in your assignments will reduce your score. Install a website spelling and/or grammar checker and use it every time you edit.

Objectives

As noted in the course syllabus, the learning outcomes for the Web Design course are to:

1. Understand and discuss the language of the Internet and web page authoring.
2. Demonstrate the development process.
3. Demonstrate best practices.
4. Envision, design, prototype, produce, test, and promote a web site with consistent and meaningful navigation, quick-loading images, and compliant HTML and CSS.
5. Recognize good navigation and compliant code.

This rigorous course, if you choose to fully engage in the lessons, will prepare you for professional-level web authoring.

View the Evolution of Web Design 1990-2019 by Red Stapler.

Or scroll thorugh Designmodo’s The Short History of Website Building infographic.

What does it mean to design a web site?

The answer is at the same time simple and complex. These jobs can be done by one author or many specialists:

1. Marking up text with a current version of HTML.
2. Designing with cascading style sheets (CSS).
3. Designing with images.
4. Programming efficiencies with scripts and databases.
5. Writing for an online audience.
6. Hosting on secure and unsecure web servers.
7. Testing in various browsers on various platforms and devices.
8. Promoting the site to various audiences.

Web sites can come together in many ways; from marking up text in a word processing document to building your own hosted online applications. Review the order of complexity below. CS 195 will work with level 3 to 7 and CS 295 will work with level 3 to 10.

1. Write in a freely hosted web service site such as FaceBook, WordPress.com, LinkedIn, Twitter, etc.
2. Write in a word processing document and transfer it to a web server (.txt, .doc, .gdoc)
3. Write in a text-editing application, save/export the file as .html, and transfer it to a web server.
4. Write in a site management application, save the file as .html, xml, or php, and transfer it to a web server.
5. Level 4 plus styling with a Cascading Style Sheet (.CSS).
6. Level 4 and 5 plus graphic design and optimization of images.
7. Leve 5 plus client-side scripts (JavaScript and Ajax, for example).
8. Level 6 plus service-side scripts (.PHP for example).
9. Level 7 plus activating and interacting with a database (MySQL, for example).
10. Configure an installable Content Management Systems (Drupal and WordPress, for example) and design a theme.
11. Design and produce plugin modules for  installable Content Management Systems.
12. Design Content Management Systems and plugins (Ruby on Rails, for example).
13. Convert HTML5 websites to mobile applications.

Necessary Traits

This course will open up the possibilities available to you inside the Web. To be successful in this class and find the passion many of us have to use the Web to its potential, ascertain if you have most or all of these traits:

• Creative thinker,
• Troubleshooter,
• Investigator,
• Interested,
• Entrepreneurial,
• Available,
• Collaborator,
• Organized.

Challenge yourself to attain more of these traits than you have already. Think and work outside your comfort zone. Your brain will thank you!

Required Basic Skills

Learn these keystrokes

Use the common left-hand keystrokes to save your right arm from fatigue.

• Open Ctl+o.
• Quit Ctl+q.
• Save Ctl+s.
• Find Ctl+f.
• Copy Ctl+c.
• Cut Ctl+x.
• Paste Ctl+v.
• Undo Ctl+z.
• Select All Ctl+a.

Overuse of right-clicking will slow your progress and wear-out your right arm. NOTE: For Mac use ⌘ instead of Ctl.

Know each of these skills before you begin

• Turn your computer on and off.
• Turn the volume up and down.
• Adjust the screen brightness and contrast.
• Open an application/program.
• Make a new file in an application.
• Save Ctl+s and close a file.
• Reopen Ctl+othe file.
• Rename a file.
• Find/search Ctl+f a file.
• Copy a file from one folder/directory to another.
• Copy a file or folder/directory from the hard drive to another device.
• Back up files to a USB or cloud drive.
• Connect to the internet.
• Setup an email account.
• Update the name that will show when someone receives the email.
• Add an email signature.
• Set new messages to retain the original message when replying.
• Send and receive email.
• Attach a document to an email.
• Download email attachments and file them on your hard drive.
• Search for a file online.
• Download a program, Acrobat (.pdf) file or picture file.
• Decompress an archive file (.ZIP)

Listen instead of read

Too tired to read carefully? Use these instructions to set up your computer so it can read for you!

Skills you will learn in the course

Web Design course

How to…

• Connect to a web server using secure File Transfer Protocol (sFTP).
• Write, upload, view, and test HTML5 files.
• Write, upload, view, and test CSS files.
• Write, upload, view, and test PHP files.
• Design page layout, text, and shapes using code.
• Open, enhance, optimize, and save image files in various formats for online use.
• Organize folders/directories and files.
• Backup files.

Understanding your obligations

Learning new skills can be frustrating for some. Sometimes this frustration is a direct result of poor teaching, poor listening/watching skills, lack of experience with pre-skills, or other distractions. And sometimes, the frustration is normal! Learning is not something that is easily acquired the first time it is heard or seen. A learner must experience the task first hand and practice it, again and again, to fully understand and make it part of rote memory.

Learning in a classroom or online can be particularly trying when the purpose of the task to learn is not clear, the computer you use is unfamiliar, or other students progress at a different pace. Experienced educators who teach in a computer lab situation know that not all students will listen and watch carefully, stay together, or tell the instructor when he/she is going too fast. Some educators create and print extensive tutorials for students to use in their learning only to find out they are not used. Many students want instructors to do the work for them because they do not want to struggle. Learning computer skills is like playing a game…you must explore like a detective to persevere. If you are not willing to fully engage in the material, stay on track, and ask questions then these courses are not for you!

If you are learning a new skill and don’t feel you have a complete handle on it, try showing someone else. Sharing and teaching is one of the best ways to learn something well (fully understand and retain the new knowledge). Dr. Gary Phillips of the National School Improvement Project (based on Piaget’s theories about learning) makes this claim: People retain learned material at the following levels:

• 10% of what we hear
• 15% of what we see
• 30% of what we see and hear
• 80% of what we experience actively
• 90% of what we teach others