Agenda

• Introductions
  • Name?
  • Born?
  • Rasied?
  • I'm really good at?
  • I'm terrible at?
  • Undergrad Degree?
  • Work Experience?
  • Reason for choosing M.S. Digital Media?
  • What do you want to do when you graduate?
  • Current Experience with Design & Interactivity?
• Course overview
  • Syllabus
• Class picture
• Student server prep
  • domainname.com/digm505/
  • domainname.com/digm505/hwk01/
  • domainname.com/digm505/hwk02/
  • domainname.com/digm505/hwk03/
  • domainname.com/digm505/midterm/
  • domainname.com/digm505/hwk04/
  • domainname.com/digm505/hwk05/
  • domainname.com/digm505/final/
• Filenaming conventions
  • Upper-lower case letters
  • Numbers
  • "dash" abc-123
  • "underscore" abc_123

1. Purchase/Setup Domain/Hosting:

   A requirement for this course is to have your own domain and hosting plan. Prior to week 2, you must have your domain and hosting established. Bring ALL hosting information (usually a few emails) to class so we can review accessing and uploading to your server.

   Review "Domain Names & Hosting" (textbook "HTML & CSS design and build websites" pages 487-488 "Chap 19: Practical Information - Domain Names & Hosting") prior to purchasing your domain and hosting plans.

2. Research:
   • Given final project requirements, start thinking about what type of website you want to design and build. Start gathering-organizing all your CONTENT (text, images, sounds, color scheme, videos, etc)
   • Find two personal online portfolio sites for individuals whose area of focus matches yours.
   • Find two websites that you feel relate visually to your personal design aesthetic.

How to turn in homework

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

In the body of your email message put the following:

• Valid URL direct links to personal online portfolio sites for individuals whose area of focus matches yours.
• Valid URL direct links to websites that you feel relate visually to your personal design aesthetic.

Today - DID YOU REGISTER TO VOTE?

• Class picture
• Homework reading assignment review
• Domain Hosting
• Client Side / Server Side
• Setup
  • Browser Selection
  • Software
  • Directory Structure
  • File Naming Conventions
• FTP Setup
  • ftp access
  • upload/download

1. Reading Assignment:

   Don't make me think: a common sense approach to Web usability

   • Chapter 1. Don't make me think!: Krug's first law of usability
   • Chapter 2. How we really use the Web: Scanning, satisfying, and muddling through
   • Chapter 3. Billboard Design 101: Designing pages for scanning, not reading
   • Chapter 4. Animal, vegetable, or mineral?: Why users like mindless choices

   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 (or sub-section 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 quiz. If you do not meet the listed requirements, you will NOT be eligible to participate in said quiz.

2. Research:

   Become familiar with Adobe PhotoShop

   • Photoshop CS6 for Web Design with Justin Seeley lynda.com 2012
     • Canvas
     • Image - Modes
     • Resolution a.k.a DPI
     • Layers
     • Crop
     • Background Transparent
     • Mask
     • Blend a.k.a Fade
     • etc..

Design.. What is it?

• Homework reading assignment review
• Design is not just for the web
  • Green Room Pictures
  • Download Design Presentation

1. Reading Assignment:

   Don't make me think: a common sense approach to Web usability

   • Chapter 5. Omit needless words:
   • Chapter 6. Street signs and Breadcrumbs:
   • Chapter 7. The first step in recovery is admitting that the Home page is beyond your control:
   • Chapter 8. The Farmer and the Cowman Should Be Friends:
   • Chapter 9. Usability testing on 10 cents a day:
   • Chapter 10. Usability as common courtesy:
   • Chapter 11. Accessibility, Cascading Style Sheets, and you:
   • Chapter 12. Help! My boss wants me to _____________:

   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 (or sub-section 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 quiz. If you do not meet the listed requirements, you will NOT be eligible to participate in said quiz.

2. Research:

   Become familiar with Adobe Illustrator

   • Illustrator CS6 Essential Training with Justin Seeley lynda.com 2012
     • Artboard
     • RGB - CMYK
     • Resolution a.k.a DPI
     • Fills - Strokes
     • Layers
     • Background Transparent
     • Symbols
     • etc..
3. Create:

   Using the theories we covered in class, techniques you picked up from tutorials, reading, etc, and your imagination.. Create your first custom bio image and web site logo.

   • Bio Image: Photoshop
     • Remove the green screen background from your self-image and composite in a different "meaningful" background image
     • Export to a jpg or png file format under 2 mb
     • 800 width by 400 height in pixels
     • RGB mode
     • 72 dpi
   • Web Site Logo: Illustrator
     • Create a "meaningful" logo for your web site
     • Export too gif or png file format under 1 mb
     • 320 width by 320 height in pixels
     • RGB mode
     • 72 dpi

How to turn in homework

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

In the body of your email message put the following:

• Valid URL direct link to your bio image
• Valid URL direct link to your site logo
• Reference Week 01 Agenda for URL naming conventions.

Designing Web Pages - Sites.

• Homework reading assignment review
• Think - Brain Storm - Organize your media BEFORE you code!
  • What is the purpose of your web site?
  • What is the color scheme of your web site?
  • How many pages will be on your web site?
  • What is the name of those pages? [Home, Bio, Resume, Contact, Portfolio]
  • Home many images will be on your site?
  • Audio? Videos?
  • Download Interface Presentation

1. Reading Assignment:

   Read article:

   • "Color Template - How do you choose the right colors for your designs?"
     • Adobe Color CC

   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 (or sub-section 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 quiz. If you do not meet the listed requirements, you will NOT be eligible to participate in said quiz.

2. Create:

   Based on the assigned reading assignment.. Create a site map and wireframe of your web site.

   • Site Map:
     • Include page titles & sections
     • Export too jpg or png file format under 2 mb
     • 960 width by 800 height in pixels
     • RGB mode
     • 72 dpi
   • Wire Frames:
     • One wire frame for each unique page layout (i.e. contact page has a different layout than the home page.)
     • Export too jpg or png file format under 2 mb
     • 960 width by 800 height in pixels
     • RGB mode
     • 72 dpi

How to turn in homework

Submit via your Drexel email account to your instructor email account, subject: "digm505-hwk03-s###-jwt23" [replace ### with your class section number, replace jwt23 with your Drexel email account prefix]. Due BEFORE Midnight the night before next class

In the body of your email message put the following:

• Valid URL direct link to your site map image
• Valid URL direct links to your wireframe images
• Reference Week 01 Agenda for URL & file naming conventions.

Designing Web Pages - Know what you want to build BEFORE you start building it. Part I

1. Reading Assignment:

   HTML & CSS design and build websites by Jon Duckett 2011

   • Introduction
   • 1: Structure
   • 18: Process & Design
   • 19: Practical Information - FTP & Third Party Tools

   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 (or sub-section 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 quiz. If you do not meet the listed requirements, you will NOT be eligible to participate in said quiz.

2. Create:

   START working on your midterm project. Detailed static interface mockups of your final web site pages.

   • To include:
     • One interface mockup for each unique page layout (i.e. contact page has a different layout than the home page.)
     • Color Scheme, Text Fonts, Buttons, logo, etc
     • Export too jpg or png file format under 1 mb
     • 960 width in pixels
     • RGB mode
     • 72 dpi

Designing Web Pages - Know what you want to build BEFORE you start building it. Part II

• Homework reading assignment review
• Midterm Overview

Building Web Pages - Sites.

• Midterm assignment review
• Web Page Structure Programing HTML
  • New Document
  • HTML Definition
  • Structure
  • tags
  • attributes
  • rules
  • requirements
  • doctype
  • head
  • title
  • external documents
  • meta tags
  • body
  • comments
  • common tags
  • validation
• Links - ‹a› tag/element
  • Link to other pages
  • Link to other sites
  • Link to specific part of a page
  • Target windows
  • Email
  • Navigation
  • Principles
  • Goals
  • Types

1. Reading Assignment:

   HTML & CSS design and build websites by Jon Duckett 2011

   • 02: Text
   • 03: List
   • 04: Links
   • 05: Images

   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 (or sub-section 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 quiz. If you do not meet the listed requirements, you will NOT be eligible to participate in said quiz.

2. Midterm:

   Create detailed static interface mockups of your final web site pages.

   • To include:
     • One interface mockup for each unique page layout (i.e. contact page has a different layout than the home page.)
     • Color Scheme, Text Fonts, Buttons, logo, etc
     • Export too jpg or png file format under 1 mb
     • 960 width in pixels
     • RGB mode
     • 72 dpi

How to turn in Midterm

Submit via your Drexel email account to your instructor email account, subject: "digm505-midterm-s###-jwt23" [replace ### with your class section number, replace jwt23 with your Drexel email account prefix].

In the body of your email message put the following:

• Valid URL direct links to your midterm images.
• Reference Week 01 Agenda for URL & file naming conventions.

VOTE

Sites of the Week

• How to create a great ABOUT page
• Great RESUME HTML/CSS samples

Building Web Pages - Sites.

• CSS3 Grids:
  • 2 Column Layouts
  • 3 Column Layouts
• Images - ‹img› tag/element
  • Visual echo
  • Avoid cliche
  • What type of image should I use?
  • Resolution
  • Color mode
  • Compression
  • img tag
  • stock photos

1. Reading Assignment:

   HTML & CSS design and build websites by Jon Duckett 2011

   • 08: Extra Markup
   • 10: Introducing CSS
   • 11: Color
   • 12: Text
   • 13: Boxes
   • 15: LAYOUT

   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 (or sub-section 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 quiz. If you do not meet the listed requirements, you will NOT be eligible to participate in said quiz.

2. Create:

   Using the theories we covered in class last week, techniques you picked up from tutorials, reading, etc.. Create your "bio", and "resume" web pages.

   • Format content with HTML, CSS and Image(s)
   • Consistent unordered list page navigation (CSS optional)

How to turn in homework

Submit via your Drexel email account to your instructor email account, subject: "digm505-hwk04-s###-jwt23" [replace ### with your class section number, replace jwt23 with your Drexel email account prefix].

In the body of your email message put the following:

• Valid URL direct link to your "bio" page
• Reference Week 01 Agenda for URL & file naming conventions.

Site of the Week

• Box Sizing: The Secret to Simple Layouts

Today

• Elements/Tags
  • meta
  • block
  • inline
  • attributes
  • iframes
  • div tag
  • span tag
  • HTML 5
  • header
  • nav
  • section
  • article
  • footer
• CSS
  • CSS definition
  • Structure
  • Internal CSS
  • External CSS
  • Cascade
  • Inheritance
  • Reset
• Font
  • font-family
  • font-size
  • font-style
  • font-weight
  • :link/visited/hover/active
  • first letter and line
  • line-height
  • letter and word spacing
  • text-align
  • text-decoration
  • text-indent
  • text-shadow
  • text-transform
  • vertical-align
  • font-face
  • images as text
• Display
  • block
  • inline
  • inline-block
  • none
  • fixed vs liquid
  • width
  • height
  • margin
  • center content
  • padding
  • box model
  • overflow
• Border
  • border-color
  • border-image
  • border-style
  • border-width
  • border-shorthand
  • border-radius
• View HTML/CSS sample page
• Download HTML/CSS sample files
• LAB

Detailed Homework 4 Review

Class LAB:

• Navigation
  • Home
  • Bio
  • Resume

1. Update:

   Using the theories we covered in class, techniques you picked up from tutorials, reading, etc.. Customize your HTML page to match your midterm layouts with CSS. Including "home", "bio", and "resume".

   • Consistent navigation buttons/links with rollover, and down states
   • Styled text content
   • Format content with HTML and CSS
   • Position and border embedded image(s) with CSS
2. Reading Assignment:

   HTML & CSS design and build websites by Jon Duckett 2011

   • 06: Tables
   • 07: Forms
   • 09: Flash, Video & Audio [exclude Flash]
   • 16: Images

   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 (or sub-section 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 quiz. If you do not meet the listed requirements, you will NOT be eligible to participate in said quiz.

How to turn in homework

Submit via your Drexel email account to your instructor email account, subject: "digm505-hwk05-s###-jwt23" [replace ### with your class section number, replace jwt23 with your Drexel email account prefix].

In the body of your email message put the following:

• Valid URL direct link to your home page
• Reference Week 01 Agenda for URL & file naming conventions.

Interactive Multi-Media

• Homework reading assignment review
• Tables - ‹table› tags/elements
  • Structure
  • Border & Background
  • Span columns
  • Span rows
  • Table heading
  • Width/spacing
  • Long tables
• Audio ‹audio› tags/elements - Video ‹video› tags/elements
  • Embedding Audio files within HTML pages. DOWNLOAD working SAMPLE
  • Embedding Vimeo videos within HTML pages. DOWNLOAD working SAMPLE
• Advance Images
  • Responsive Slides. DOWNLOAD working SAMPLE
  • Fancy Box Slide Shows. DOWNLOAD working SAMPLE

Sites of the Week

• FREE CSS3 Form samples
• HTML5 CSS Forms with validation tutorial

Today

• Project status review and debugging
• Lecture - Lab
• Forms - ‹form› tags/elements
  • form structure
  • input
  • buttons
  • hidden controls
  • drop down
  • checkbox
  • radio
  • multiple select box
  • file input/upload
  • submit button
  • reset button
  • image button
  • textarea
• Bluehost - cPanel - eMail
• Bluehost - cPanel - programming - Script Center - BlueMail
• Sample form page

Due: BEFORE Saturday December 15th

Submit via email to your instructor, subject: "digm505-final-s###-jwt23" [replace ### with your class section number, replace jwt23 with your drexel email account prefix]

• Valid URL direct link to your home page
• Valid URL direct link to download zipped folder "digm505-final-s###-jwt23" [replace ### with your class section number, replace jwt23 with your Drexel email account prefix]:
• Bullet list of any extra credit functional features.
• Reference Week 01 Agenda for URL & file naming conventions.