Fundamentals of Web Scripting (CL DSN2043 - Web Scripting)

Intro

Announcement

This course is listed as GWDA133 - Fundamentals of Web Design and is cross-listed as the following:

  • WDM1003 - Introduction to Client-Side Languages
  • DSN2043 - Web Scripting
  • GWDA133 - Fundamentals of Web Design

Week 1

In-Class

Lesson

 Introduction to HTML5 (Part 1)
 Resource: FTP in Microsoft Windows
 Resource: FTP in Fetch on Mac

In-Class Assignment

  • Create a Basic Page That Utilizes All of the Tags (Elements) Presented
  • Upload to FTP - in-class/week_01/

Homework Assigned

Article Formatting

  • Open article in link below
  • Utilizing a text editor of your choice, create an HTML5 document that renders a page formatted like the downloaded PDF file
  • Submit the file to FTP - homework/week_01/

 Article for Formatting

Reading

  • Read Chapter 2 (eBook)
  • Complete Reading Assessment Week 1 - Reading Assessment in eCompanion

Week 2

Homework Due

  • Article Formatting
  • Chapter 2 Reading & Assessment

In-Class

Lesson

 Introduction to HTML5 (Part 2)

In-Class Assignment

  • Create a Basic Page That Utilizes All of the Tags (Elements) Presented
  • Upload to FTP - in-class/week_02/

 Resource: FTP in Microsoft Windows
 Resource: FTP in Fetch on Mac

Homework Assigned

Frank Lloyd Wright Mini-Site

  • Download Needed Files From Link Below
  • Using the Content from the Archive, Create a 3-Page Mini-Site About Architect Frank Lloyd Wright. Each page must contain content, a single image, headings, and a page title.
  • All pages must be cross-linked to each other through a single common/consistent text-based link navigation.
  • Submit the site to FTP - Week-02/homework/

 Archive: FLW Materials

Reading

  • Read Chapters 5 & 6 (eBook)
  • Complete Reading Assessment Week 2 - Reading Assessment in eCompanion

Week 3

Homework Due

  • FLW Single-Column Multi-Page Website
  • Chapters 5 & 6 Reading and Assessment

In-Class

Lesson

 Introduction to CSS3

In-Class Assignment

  • Create a Basic 3-Page Website That Utilizes All of the HTML5-Specific Elements and Custom Classes. Must contain:
    • 3 Pages Cross-Linked to Each Other
    • CSS Declaration for ALL HTML5-Specific Elements
    • CSS Declaration for a Minimum of 2 Custom Classes
  • Upload to FTP - Week-03/in-class/

Homework Assigned

Frank Lloyd Wright Mini-Site

  • Using the website that you created for homework last week over architect Frank Lloyd Wright, create and apply a stylesheet that performs the following:
    • Headings in a serif font
    • Body text in a sans-serif font
    • Page background color other than white
    • Font color other that black (must compliment the page background color)
    • Articles to have a 50px margin on all sides.
    • Articles are to have a background color separate from Body. Be consistent through site.
    • Footer text is 9pt, wide letter spacing, with the body background / body text colors inverted.
  • Submit the ZIP/Compressed Folder to eCompanion Week 3 Dropbox

 FLW Sample

Reading

  • Read Chapters 7 & 8 (eBook)
  • Complete Reading Assessment Week 3 - Reading Assessment in eCompanion

Week 4

Homework Due

  • FLW CSS Formatted Multi-Page Website
  • Chapters 7 & 8 Reading and Assessment

In-Class

Lesson

 Fixed-Width Grid Design
 960px 12-Column Stylesheet

In-Class Assignment

  • Create a personalized 960px 12-column stylesheet based on the topics covered in the presentation.

Homework Assigned

Personal Grid & Layout

  • Based on the grid created in class today, create a basic page layout for your project site.
  • Use the Illustrator template file below

 960px 12-Column Sketchsheet
 960px 12-Column Template

Graphics Sizing

  • Based on your design, it is time to start creating/sizing images for deployment on your project site.
  • Resize the image (with artboards trimmed/cropped as tight as possible) to the following:
    • 1 Column Span - 60px
    • 2 Column Span - 140px
    • 3 Column Span - 220px
    • 4 Column Span - 300px
    • 5 Column Span - 380px
    • 6 Column Span - 460px
    • 7 Column Span - 540px
    • 8 Column Span - 620px
    • 9 Column Span - 700px
    • 10 Column Span - 780px
    • 11 Column Span - 860px
    • 12 Column Span - 940px
  • Export into a web-friendly format
    • PNG-24, PNG-8, GIF, or JPEG

Reading

  • Read Chapters 10 (eBook)
  • Complete Reading Assessment Week 4 - Reading Assessment in eCompanion

Week 5

Homework Due

  • 960p 12-Column Site Plans
  • Graphical Asset Resizing
  • Chapters 10 Reading and Assessment

In-Class

Lesson

 Fixed-Width Grid Design (Application)
 Fixed-Width Image Placeholders

In-Class Assignment

  • Create a text page similar to the trial utilizing your personalized 960px 12-column stylesheet.

Homework Assigned

Site Build

  • Start Site Build
    • Suggestion: Create major custom artistic CSS classes

Reading

  • Read Chapters 14 (eBook)
  • Complete Reading Assessment Week 5 - Reading Assessment in eCompanion

Week 6

Homework Due

  • Progress Toward Site-Build
  • Chapters 14 Reading and Assessment

In-Class

Lesson

 CSS Typography

In-Class Assignment

  • Hands-On Work with CSS Typography
  • Project Workshop

Homework Assigned

Continue Site Build

  • Continue Site Build
    • Suggestion: Get One Page Fully Built and Populated with Content

Reading

  • Read Chapters 13 (eBook)
  • Complete Reading Assessment Week 6 - Reading Assessment in eCompanion

Week 7

Homework Due

  • Progress Toward Site-Build
  • Chapters 13 Reading and Assessment

In-Class

Lesson

 HTML5 Forms

In-Class Assignment

  • Hands-On Work with HTML5 Forms
  • Project Workshop

Homework Assigned

Continue Site Build

  • Continue Site Build
    • Suggestion: Copy Completed Page and Replace Content for Subsequent Page(s)

Reading

  • Read Chapters 16 (eBook)
  • Complete Reading Assessment Week 7 - Reading Assessment in eCompanion

Week 8

Homework Due

  • Progress Toward Site-Build
  • Chapter 16 Reading and Assessment

In-Class

Lesson

 HTML5 Multimedia
 Video - MP4 Format
 Video - OGG Theora Format
 Video - WebM Format
 Audio - MP3 Format
 Audio - OGG Vorbis Format
 Audio - WAV Format

In-Class Assignment

  • Hands-On Work with HTML5 Multimedia
  • Project Workshop

Homework Assigned

Continue Site Build

  • Continue Site Build
  • Snap-Shot Presentations Next Week

Week 9

Homework Due

  • Progress Toward Site-Build
  • Ready for Project Snapshot Presentations

In-Class

In-Class Assignment

  • Project Snapshot Presentations

 Project Rubric

Homework Assigned

Continue Site Build

  • Continue Site Build

Final Presentation Prep (Graduates)

  • Upload to FTP
  • Prepare Answers to Following Questions:
    • Who is Your Target Audience?
    • What is the Purpose of the Site?
    • How Would You Gauge if the Site is Successful?

Reading

  • Read Chapters 20 (eBook)
  • Complete Reading Assessment Week 9 - Reading Assessment in eCompanion

Week 10

Homework Due

  • Progress Toward Site-Build
  • Chapter 20 Reading and Assessment

In-Class

In-Class Assignment

  • Project Workshop
  • Graduate Final Project Presentations

 Final Presentations

Homework Assigned

Finalize Site Build

  • Finalize Site Build

Final Presentation Prep

  • Upload to FTP
  • Prepare Answers to Following Questions:
    • Who is Your Target Audience?
    • What is the Purpose of the Site?
    • How Would You Gauge if the Site is Successful?

Reading

  • Read Chapters 21 (eBook)
  • Complete Reading Assessment Week 10 - Reading Assessment in eCompanion

Week 11

Homework Due

  • Progress Toward Site-Build
  • Chapter 21 Reading and Assessment

In-Class

In-Class Assignment

  • Final Project Presentations