Menu toggle

Agenda

The Schedule

Week 1 - Mar 31

  • Introductions
    • Full name…
    • I grew up in…
    • My major is…
    • Why am I here, in this class…
    • 10 years from now I will be doing…
    • Online sample of my work is…
  • Class Photo
  • Course overview
    • Syllabus
    • Web site overview
    • HTML5 based animations..
  • Student server prep
    • domainname.com/wbdv242/
    • domainname.com/wbdv242/final/
    • domainname.com/wbdv242/hwk01/
    • domainname.com/wbdv242/hwk02/
    • domainname.com/wbdv242/hwk03/
    • domainname.com/wbdv242/hwk04/
    • domainname.com/wbdv242/hwk05/
    • domainname.com/wbdv242/midterm/
  1. Purchase/Setup Domain/Hosting: Due BEFORE Midnight the night before next class

    A requirement for this class is to have your own domain and hosting plan. Prior to week 2, you must have your domain and hosting established.

  2. Prepare web space just for this course: Due BEFORE Midnight the night before next class

    Create a folder just for this course on root directory of your web site. Name the folder "wbdv242". All homework assignments and final project MUST be upload to this folder, each within it's own unique subfolder i.e. "domainname.com/wbdv242/hwk01/"

  3. Confirm access to all course books: Due BEFORE Midnight the night before next class

    Purchase and/or confirm access to all required course books.

Reading Assignment: Due: Prior to next class

HTML & CSS - design and build websites by Jon Duckett

  • Chapter 1 - Structure
  • Chapter 2 - Text
  • Chapter 3 - Lists
  • Chapter 4 - Links
  • Chapter 5 - Images
  • Chapter 8 - Extra Markup
  • Chapter 10 - Introducing CSS
  • Chapter 11 - Color
  • Chapter 12 - Text
  • Chapter 13 - Boxes
  • Chapter 16 - Images
  • Chapter 17 - HTML5 Layout
  • Chapter 18 - Process & Design
  • Chapter 19 - Practical Information

Regarding your reading assignment, bring with you to class a single sheet of paper (8.5" by 11"). This single piece of paper will have on it three MEANINGFUL questions from the reading assignment, the answer to each question and the page number the information came from. At the top of the page you will put your full name, Drexel email prefix, and homework due date. These questions will be used next class for an extra credit game. If you do not meet the listed requirements, you will NOT be eligible to participate and will NOT receive credit for this assignment.

Lab Time

Time period will consist of demos and troubleshooting group and/or individual issues.

Week 2 - Apr 07

Homework Review - Extra Credit

HTML5 CSS3 .. Part 1

Why animate event posters - flyers?

Build a web page that detects common mobile, tablet, and desktop browser widths and adjusts page content accordingly.

Mobile First

  • Start with mobile screen, and build-design up
  • Basic structure folders-files
  • Media Queries
  • HTML5
  • CSS3
  1. Research: Due BEFORE Midnight the night before next class

    Do research and select ONE artist, event, or band you care about:

    • Name
    • Location
    • Date and Time
    • Web site url
    • At least three existing banners, posters, and/or flyers
  2. Build: Due BEFORE Midnight the night before next class

    Build a mobile first web page:

    • Insert your research information into one web page
    • Use media queries to create four different layouts
    • 320w, 768w, 1024w, 1280w
    • Color scheme
    • Font, style, size, format
    • Images, etc

How to turn in homework

Submit via your Drexel email account to your instructor email account, subject: "wbdv242hwk01s###jwt23" [replace ### with your class section number, replace jwt23 with your Drexel email account prefix]

  • In the body of your email message put:
    • A link to your mobile first web page
    • i.e. http://jervo.org/wbdv242/hwk01/

Reading Assignment: Due: Prior to next class

Mobile First by Luke Wroblewski - The whole book.

Regarding your reading assignment, bring with you to class a single sheet of paper (8.5" by 11"). This single piece of paper will have on it three MEANINGFUL questions from the reading assignment, the answer to each question and the page number the information came from. At the top of the page you will put your full name, Drexel email prefix, and homework due date. These questions will be used next class for an extra credit game. If you do not meet the listed requirements, you will NOT be eligible to participate and will NOT receive credit for this assignment.

Lab Time

Time period will consist of demos and troubleshooting group and/or individual issues.

Week 3 - Apr 14

Homework Review - Extra Credit

HTML5 CSS3 .. Part 2

Hone your HTML5, CSS3, and Media Query skill sets

  • Based on a existing non-responsive web page .. WWDC14
  • Extract current media
    • Images
    • Font
    • Color Schema
    • Text
  • Review current design
    • Layout
    • Spacing
    • Order of importance
  • Rebuild web page so that it is responsive AND meets client (professor) approval
  • Sample Download

Reading Assignment: Due: Prior to next class

Responsive Web Design by Ethan Marcotte - The whole book.

Regarding your reading assignment, bring with you to class a single sheet of paper (8.5" by 11"). This single piece of paper will have on it three MEANINGFUL questions from the reading assignment, the answer to each question and the page number the information came from. At the top of the page you will put your full name, Drexel email prefix, and homework due date. These questions will be used next class for an extra credit game. If you do not meet the listed requirements, you will NOT be eligible to participate and will NOT receive credit for this assignment.

Lab Time

Time period will consist of demos and troubleshooting group and/or individual issues.

Week 4 - Apr 21

Homework Review - Extra Credit

Real World Case Study: IBA - Interactive Battlefield Animations

Site of the week:

SVG CSS3 .. Part 1

SVG:

  • Why?
    • Scalable Vector Graphics
    • NO loss of image quality when zoomed or resized
    • Multi-Resolution support
    • Mobile Viewports
    • Mobile DPI
    • SVG images can be searched, indexed, and compressed
    • Every element/object and every attribute can be modified and/or animated dynamically
    • Main competitor to SVG is Flash .. 8-)
  • Building SVG images
    • Text Editor
    • Graphic Editor(s)
  • Modifying browser embedded SVG images
    • Text Editor
    • CSS3
  • Embedding SVG images into HTML pages
    • img tag
    • background-image tag
    • inline svg
    • object tag
  • Hands on with SVG images
  1. Research: Due BEFORE Midnight the night before next class

    Create and/or find at least four meaningful SVG images for your final project.

    • 300w by 300h default viewbox
    • More than one element/object within each SVG image..
  2. Build: Due BEFORE Midnight the night before next class

    "Embed" your SVG images into one web page.

    • Images should be in one single column at 320w
    • Images should be in two columns at 480w
    • Images should be in three columns at 768w
    • Images should be in four columns at 1280w and higher
    • Images should NOT touch each other or the edge of the browser window

How to turn in homework

Submit via your Drexel email account to your instructor email account, subject: "wbdv242hwk02s###jwt23" [replace ### with your class section number, replace jwt23 with your Drexel email account prefix]

  • A link to your web page that contains your SVG images
  • i.e. http://jervo.org/wbdv242/hwk02/

Reading Assignment: Due: Prior to next class

Regarding your reading assignment, bring with you to class a single sheet of paper (8.5" by 11"). This single piece of paper will have on it three MEANINGFUL questions from the reading assignment, the answer to each question and the chapter title the information came from. At the top of the page you will put your full name, Drexel email prefix, and homework due date. These questions will be used next class for an extra credit game. If you do not meet the listed requirements, you will NOT be eligible to participate and will NOT receive credit for this assignment.

Lab Time

Time period will consist of demos and troubleshooting group and/or individual issues.

Week 5 - Apr 28

Homework Review - Extra Credit

Sites of the Week

SVG CSS3 .. Part 2

SVG .. CSS3:

  • SVG CSS Shape Properties:
    • fill
    • fill-opacity
    • stroke
    • stroke-opacity
    • stroke-width
    • stroke-linecap
  • SVG CSS Gradient Properties
    • stop-color
    • stop-opacity
  • Transition:
    • Best used for simple, interactive, movement
    • Similar to a flash tween
    • Used on one CSS property at a time
    • Activated on change of CSS property value
    • transition-property: width;
    • transition-duration: 3s;
    • transition-timing-function: ease-out;
    • transition-delay: 1s;
  • Easing
    • ease-in Start slowly - finish at full speed.
    • ease-out Start full speed, - finish slowly.
    • ease-in-out Start slowly, fastest at the middle - finish slowly.
    • ease Like ease-in-out, except it starts slightly faster than it finishes.
  • Hands on with CSS SVG transitions
  1. Research: Due BEFORE Midnight the night before next class

    Add meaningful hover and/or active effects to your SVG images.

    • More than one element/object within each SVG image.
    • Cursor should change into a finger when over SVG images.
  2. Build: Due BEFORE Midnight the night before next class

    "Embed" your interactive SVG images into one web page.

    • Images should be in one single column at 320w
    • Images should be in two columns at 480w
    • Images should be in three columns at 768w
    • Images should be in four columns at 1280w and higher
    • Images should NOT touch each other or the edge of the browser window

How to turn in homework

Submit via your Drexel email account to your instructor email account, subject: "wbdv242hwk03s###jwt23" [replace ### with your class section number, replace jwt23 with your Drexel email account prefix]

  • A link to your web page that contains your interactive SVG images
  • i.e. http://jervo.org/wbdv242/hwk03/

Reading Assignment: Due: Prior to next class

  • Animation in HTML, CSS, and Javascript by Kirupa Chinnathambi:
    • Chapter 00: Introduction
    • Chapter 01: What is an Animation
    • Chapter 02: All About CSS Animations
    • Chapter 03: All About CSS Transitions
    • Chapter 04: Animations vs Transitions

Regarding your reading assignment, bring with you to class a single sheet of paper (8.5" by 11"). This single piece of paper will have on it three MEANINGFUL questions from the reading assignment, the answer to each question and the chapter title the information came from. At the top of the page you will put your full name, Drexel email prefix, and homework due date. These questions will be used next class for an extra credit game. If you do not meet the listed requirements, you will NOT be eligible to participate and will NOT receive credit for this assignment.

Lab Time

Time period will consist of demos and troubleshooting group and/or individual issues.

Week 6 - May 05

Sites of the Week

CSS3 Animation .. Part 1

  • Transform 2D or 3D:
    • Change the 2D or 3D state of an element. BAMM! like Nightcrawler
    • Rotate
    • Scale
    • Move a.k.a. Translate along X or Y axis
    • Faster, uses GPU - translate3d(x,y,z)
    • Skew
    • Matrix
  • Transition:
    • Best used for simple, interactive, movement
    • Similar to a flash tween
    • Used on one CSS property at a time
    • Activated on change of CSS property value
    • transition-property: width;
    • transition-duration: 3s;
    • transition-timing-function: ease-out;
    • transition-delay: 1s;
  • Animations:
    • Best used for predefined, complex, looping animations
    • animation-name: wiggle
    • animation-duration: 5s;
    • animation-timing-function: linear;
    • animation-delay: 2s;
    • animation-iteration-count: infinite;
    • animation-direction: alternate;
    • animation-play-state: running;
    • @Keyframes wiggle
    • %0 { property:value }
    • %25 { property:value }
    • %50 { property:value }
    • %75 { property:value }
    • %100 { property:value }
  • Hands on with CSS Animations
  • MIDTERM: Due BEFORE Midnight the night before next class

    Description: Create full polished static web design graphics (*.png, 72dpi, RGB mode) that look like final screen grabs (320w x 480h+), (768w x 1024h), (1280w x 1024h). Each comp will have detailed explanations of what will be hover-able, click-able, what will animate and how (i.e. interactive animations, looping animations).

    File names for your midterm images should be in this filename format: wbdv242s###_midterm_jwt123_01.png [replace ### with your class section number, replace jwt23 with your Drexel email account prefix. Update file number 01 as needed].

    Put all midterm images into one folder. Folder name should be in this format: wbdv242s###_midterm_jwt123 [replace ### with your class section number, replace jwt23 with your Drexel email account prefix.

    Zip midterm folder and upload to your web site.

How to turn in Midterm

Submit via your Drexel email account to your instructor email account, subject: "wbdv242s###_midterm_jwt123" [replace ### with your class section number, replace jwt23 with your Drexel email account prefix]

  • Valid URL direct link to your full comp midterm zip file.

Reading Assignment: Due: Prior to next class

Regarding your reading assignment, bring with you to class a single sheet of paper (8.5" by 11"). This single piece of paper will have on it three MEANINGFUL questions from the reading assignment, the answer to each question and the chapter title the information came from. At the top of the page you will put your full name, Drexel email prefix, and homework due date. These questions will be used next class for an extra credit game. If you do not meet the listed requirements, you will NOT be eligible to participate and will NOT receive credit for this assignment.

Week 7 - May 12

Extra Credit

Detailed Midterm Review

CSS3 Animation .. Part 2

Reading Assignment: Due: Prior to next class

  • Animation in HTML, CSS, and Javascript by Kirupa Chinnathambi:
    • Chapter 07: Hello to the Events
    • Part II CSS Examples
    • Chapter 08: Animations Created in Code
    • Chapter 09: Meet requestAnimationFrame
    • Chapter 10: Vendor Prefixes in JavaScript
    • Chapter 11: Animating What You Draw
    • Chapter 12: DOM vs. Canvas

Regarding your reading assignment, bring with you to class a single sheet of paper (8.5" by 11"). This single piece of paper will have on it three MEANINGFUL questions from the reading assignment, the answer to each question and the chapter title the information came from. At the top of the page you will put your full name, Drexel email prefix, and homework due date. These questions will be used next class for an extra credit game. If you do not meet the listed requirements, you will NOT be eligible to participate and will NOT receive credit for this assignment.

Lab Time

Time period will consist of demos and troubleshooting group and/or individual issues.

Week 8 - May 19

Homework Review - Extra Credit

Sample Final Project Beta by Jacob Blank

CSS3 Javascript .. Part 1

  • CSS - JS animations
    • transitionend
    • querySelector
    • addEventListener
  • Toggling HTML5 Sounds
    • Controlling HTML5 audio
    • getElementById
    • play()
    • pause()
    • classList.add
    • classList.remove
  • Hands on with CSS - JS
  1. Implment: Due BEFORE Midnight the night before next class

    Convert your midterm final comps into an actual digital poster HTML5/CSS3/JS - SVG/PNG.

    • ALL media queries and layouts should be finalized and functional.
    • Zero errors.
  2. Build: Due BEFORE Midnight the night before next class

    Add sound/audio to your digital poster.

    • Toggle sound on-off button(s)
    • Let the user know when the sound is playing visually
    • Let the user know when the sound is NOT playing visually

How to turn in homework

Submit via your Drexel email account to your instructor email account, subject: "wbdv242hwk04s###jwt23" [replace ### with your class section number, replace jwt23 with your Drexel email account prefix]

  • A link to your digital poster web page with audio
  • i.e. http://jervo.org/wbdv242/hwk04/

Reading Assignment: Due: Prior to next class

Regarding your reading assignment, bring with you to class a single sheet of paper (8.5" by 11"). This single piece of paper will have on it three MEANINGFUL questions from the reading assignment, the answer to each question and the chapter title the information came from. At the top of the page you will put your full name, Drexel email prefix, and homework due date. These questions will be used next class for an extra credit game. If you do not meet the listed requirements, you will NOT be eligible to participate and will NOT receive credit for this assignment.

Lab Time

Time period will consist of demos and troubleshooting group and/or individual issues.

Week 9 - May 26

Homework Review - Extra Credit

CSS3 Javascript .. Part 2

Cross format communication:

  • CSS -> JS
  • JS -> CSS
  • CSS -> SVG
  • SVG -> JS

DOM -vs- CANVAS

  • Browser Graphic API Requests
  • Relatively EASY TO USE
  • Auto Redraws
  • CSS/SVG
  • Relatively more MEMORY INTENSIVE
  • Relatively gives you LESS CONTROL
  1. Implment: Due BEFORE Midnight the night before next class

    Beta version of your digital poster.

    • ALL media queries and layouts should be finalized and functional.
    • As many buttons, animations, etc completed as possible.

    Copy all of your beta digital poster files into a folder and zip it.

    Folder name for your beta digital poster should be in the following format: wbdv242hwk05s###jwt23 [replace ### with your class section number, replace jwt23 with your Drexel email account prefix.]

How to turn in homework

Submit via your Drexel email account to your instructor email account, subject: "wbdv242hwk05s###jwt23" [replace ### with your class section number, replace jwt23 with your Drexel email account prefix]

  • Valid URL direct link to your beta digital poster web "index.html" page.
  • Valid URL direct link to download your beta digital poster zipped file.

Lab Time

Time period will consist of demos and troubleshooting group and/or individual issues.

Week 10 - Jun 02

Final Project Review/Critique:

In class critique of final project digital poster.

  1. Final Project: Due before midnight June 10th!

    Using course syllabus guidelines and topics covered in class, complete your final project digital poster.

    Copy all of your final project digital poster files into one folder and zip it.

    Folder name for your final project digital poster folder should be in the following format: wbdv242s###_jwt123_final [replace ### with your class section number, replace jwt23 with your Drexel email account prefix.]

How to turn in Final Project

Submit via your Drexel email account to your instructor email account, subject: "wbdv242s###_jwt123_final" [replace ### with your class section number, replace jwt23 with your Drexel email account prefix]

  • Valid URL direct link to your final project digital poster "index.html" page.
  • Valid URL direct link to download your final project digital poster zipped file.

Lab Time

Time period will consist of demos and troubleshooting group and/or individual issues.

This site is built with <3 using Pure v0.1.0

All code on this site is licensed under the BSD License unless stated otherwise.

© 2013 Drexel University All rights reserved.