WEEK 1: Intro to the Web (Jan 7)

Course Overview

  • Syllabus Overview
  • Q & A
  • Attendance
  • Lectures/Group Activities/Workshop
  • Web Basics

Module Notes

Superpower Survey: If you are a DTC major, please fill this out by next week. This will help guide your DTC focus and mentor assignment.

Slack

You should have received an invitation to our class Slack channel. Let me know if you need to be added.

  1. Download Slack and sign up with your WSU email.
  2. Set up your profile with your full name and a profile picture.
  3. Introduce yourself in the class Slack channel:
    • Your major
    • Your background in web design and development (HTML, CSS, Adobe software, etc.)

Codecademy Tutorials

Complete the following tutorials (each worth 5%). Use a free account only; do not pay for extras like quizzes and projects:

  1. Learn HTML (5%)
  2. Learn CSS (5%)
  3. Learn Intermediate CSS (5%)

Submit screenshots of the My Learning or Dashboard page (with browser address bar visible) on Canvas.

Like this:

Key Terms

  • HTML: Hypertext Markup Language
  • CSS: Cascading Style Sheets
  • Web Design: Color, layout, imagery, media, typography, navigation, interaction, narrative, accessibility

Free Text Editors

FTP Client (File Transfer Protocol)

Web Design Resources

Web Dev Tools

  • Use Chrome as your default browser (set in Chrome > Preferences).
  • View source code: Mac: Command+Option+U / Windows: Control+U
  • Inspect Element: Right/Control-click a page element > Inspect
  • Check HTML/CSS errors: https://validator.w3.org/

AI Tools

Generative AI tools like ChatGPT and Claude 3.0 are powerful but must be used properly. In the first part of this course, do not use AI to generate code for assignments; doing so will result in point deductions. Later, I will teach you how to use these tools effectively.

Web Basics

  • internet: network of networks
  • world wide web: linked documents on the internet
  • ip address: internet protocol address (unique for each device)
  • dns: domain name system
  • domain name: purchase name to link to ip address
  • isp: internet service provider
  • server: hosts websites (remote site)
  • client: browser access to websites (local computer)
  • websites/webpages: linked html/css pages and media files( images, audio, video, pdf, docs, etc)
  • http: hypertext transfer protocol
  • https: hypertext transfer protocol secure
  • ftp: file transfer protocol
  • url: uniform resource locator – the web address
  • directory/folder: structured list of document files/ desktop metaphor for container of documents (interchangeable)
  • files: desktop metaphor for a “web page”, media object, an object that stores data, information, commands, etc.
  • absolute url: https://dtc-wsuv.org/wp/dtc355/index.html
  • relative url:  index.html, img/image.jpg

Web Files: Best Practices

File Naming

Use lowercase letters, no spaces, and avoid special characters. Replace spaces with dashes or underscores.

Organizing Files

Go to the info-card-example. The info card about the Basal Ganglia is a simple HTML page called “index.html” inside a folder called “info-card-example.”

Notice how the path expresses that structure…except there is no “index.html” in the url. This is because the file name “index.html” tells the server to deliver this as the default home page if a file is not named in the url, after the folder name.

The info-card-example also has an image. This image file must be located in the same folder as the HTML page(s). All files – HTML files, CSS files, audio and video files and JavaScript files – everything related to a web project is gathered in the same project folder.  This is very important. It is common to put web images inside a folder called “img.” Notice that it ends with “img/basal_ganglia.png.”  This is the path inside the img folder to the image file.

All project-related files (HTML, CSS, images, etc.) should be in a single folder. Use a default file name like “index.html.”

Download an example project folder and open it in Sublime Text.

Key Points:

  1. organize web files
  2. index.html
  3. absolute and relative urls
  4. chrome is our class browser – go into chromes preferences and set it as your default browser
  5. clear browser cache: restart browser, incognito mode or Chrome>Preferences>Clear Browsing Data
  6. browser source code:  Mac/Chrome: Command+Option+U
    Windows/Chrome: Control+U
  7. chrome > “inspect element” (right/control click any element on a page to see the menu item “inspect element”)
  8. chrome > add the extension web developer
  9. 3D browser page: x, y, z coordinate system
  10. HTML reference: w3schools

 

FTP Instructions

  • Open your FTP client and connect to the server:
  • Server: dtc-wsuv.org
  • Username: [initial][lastname][year]@dtc-wsuv.org
  • Password: Sent to your WSU email
  • Upload files into your directory and test with the live URL.

Designing for the Web

  • Responsive Design
  • Composition (grid, layout)
  • Typography (fonts)
  • Color Theory
  • Accessibility

 

FTP Instructions:

  • Open your FTP client and connect to the server:
  • Server: dtc-wsuv.org
  • Username: [initial][lastname][year]@dtc-wsuv.org
  • Password: Sent to your WSU email
  • Upload files into your directory and test with the live URL.
  • Uploading web files to the server using  FTP (file transfer protocol)
  • We will use a free Mac ftp client called Cyberduck Mac, Cyberduck PC is also available.
  • Filezilla is also good, free and cross-platform

detailed Steps:

    1. Open ftp software
    2. “Open Connection”
    3. Enter the following info:
      servername: dtc-wsuv.org
      username: first initial + last name + the year started(’24”)  + @dtc-wsuv.org (so, “Sam Jones” would be “sjones24@dtc-wsuv.org”)  – all in lowercase, no spaces or symbols!!
      password: sent to your wsu email, can’t be changed!
    4. If successful, you should be in your personal server directory that has the same name as your username (without the @dtc-wsuv.org). Now you can either drag the folder and files into that directory or use the “action” menu to “upload.”
    5. Upload the folders of your projects, making sure it is named in all lowercase: “blackbird” for the blackbird project, “recipe” for the recipe project, etc. You can always change the folder and file names on the remote server, as you would on your desktop.
    6. Make sure that your default page for the project is “index.html”
    7. Check how everything looks on the live absolute URL. It should look something like this:  https://dtc-wsuv.org/sjones24/blackbird/
    8. If you cannot see images, make sure that your file names and calls to access those files are all lowercase. Servers are case-sensitive!

Multimedia Authoring Talk

In-class Small Group Activity:

  1. What is good web design? 
    What is bad web design? 

Designing for the Web

  1. Responsive Design (mobile)
  2. Composition (grid, layout)
  3. Typography (fonts)
  4. Color Theory (harmony, integrity, schemes)
  5. Communication (hierarchy, rhythm, narrative)
  6. Accessibility (legibility)
  7. Originality (novelty and familiarity)