WEEK 1: Intro to the Web (August 19-23)

In-Class Activities

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

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.

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: Unique identifier for each device
  • DNS: Domain Name System
  • Server: Hosts websites
  • Client: Browser accessing websites

Web Files: Best Practices

File Naming

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

Organizing Files

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.

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

 

 

 

 

 

 

 

In Class:

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

Notes:

Superpower Survey: If you are a DTC major please fill this out by next week. This will give you some guidance on your DTC focus and the mentor assigned to you.

Slack

You should have all been invited to our class Slack channel. Let me know if you need to be added.

First download Slack and sign-up with your WSU email. Once open and logged in, look at the sidebar to find your class channels.

For your profile, please use your whole name so we (I) know who you are. It would also be helpful if you attach a profile picture. Slack will be our place for general discussion and sharing of information. I will be setting up small-groups which will also appear in the sidebar.

In the class Slack channel please introduce yourself.

  1. your major
  2. your background (if any) in web design and development (HTML, CSS, Adobe software)

Codecademy:

There are three consecutive tutorials in this course. Each is worth 5%. You only need to login with a username and password.

DO NOT pay for extras such as quizzes and projects. It should be free. 

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

Submit your results on Canvas by taking a screen grab of the tutorial and browser address bar on the My Learning or Dashboard page (found in the left menu). It looks like this:

Terms:

  • HTML – hypertext mark-up language
  • CSS – cascading style sheets
  • Web Design – color, layout, imagery, media, typography, navigation, interaction, narrative, accessibility

Free Text Editors:

  • Sublime Text for Mac and PC (required) 
  • Open in class for basics…

FTP Client (file transfer protocol software): 

Web Design Resources:

  • W3Schools
  • Lynda.com– free with Portland/Vancouver Public Library card
  • Adobe Creative Cloud – for Photoshop and Illustrator, but Gimp.org is a free alternative. Adobe CC is now free for students. Check with Greg Philbrook to enroll – either in person or Slack message him.

Web Dev Tools 

  • Use the Chrome browser for this class – please set this as your default browser by going to Chrome>Preferences
  • Getting to the browser source code:  Mac/Chrome: Command+Option+U
    Windows/Chrome: Control+U
  • Control/Right Click + Click a portion of a web page to open the Inspect Element panel
  • Or Command/Option+ C to open the Inspect Element panel
  • Windows>CTRL + U/Mac>Option+Command+U to open the “source code” (HTML) of a web page 
  • Crome>Clear Browsing Data 
  • Check HTML/CSS for errors https://validator.w3.org/

AI Tools

ChatGPT and Claude 3.0 and other Generative AI tools are powerful for web and software development and media production. However, they are only effective if you know what you are doing. In the first part of the course, I ask you NOT to generate code for assignments and projects. If you do, you will get deducted points. I can usually tell what is generated and what is not. In the second part of the course I will teach how best to use AI tools to help speed up development and test your projects for errors. AI with Web Development means there is an exciting future for all of you, but you need to know how to use these tools properly.

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 Names

File and folder names should not have upper case letters, empty spaces or characters such as *, ! and #. These sometimes have meanings at the server end.  On the server, empty spaces in file names get replaced by the code “%20.” Use dashes or underscores to separate words. Servers are also sensitive to cases of the letters of file and folder names. You have to be consistent with upper and lower cases. For example, a link to a file called “my-image.PNG” that uses “my-image.png” in the HTML link, will only work on your own computer. When it is on the server and live online, this link will be broken. Best to always use lower case in file and folder names.

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.” Look at the url, 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. Try adding “index.html” to the end of the live url to see what happens. Nothing. This is because the index.html in the url path is not necessary, you don’t need it when gong to a site. That is why you can visit a link such as vancouver.wsu.edu without naming any HTML file at end. It is “index.html” as the default. We will start all projects in this class by starting with naming the file “index.html”, as this will be the home page or the only page. Of course, you can name HTML files whatever you want (just make it lower case and with no spaces). A multi-page website with have other HTML file names beside index.html, such as “page2.html” or “about.html.”

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.” The url for the location of the basal ganglia image is info-card-example – look at the url. Notice that it ends with “img/basal_ganglia.png.”  This is the path inside the img folder to the image file.

Now, follow a link that will download a zip of this info-card folder: info-card-example.ZIP

Open the zip file and then open Sublime Text. Open the “info-card-example” folder FROM Sublime Text.  You should see the img folder and the index.html in the side panel of the text editor. Remember to open project folder from Sublime Text in order to see all your files.

Overview of the Info-card assignments > First part is due next week

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:

  • 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

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)