IDES 322 10: HTML5 03/24/15

INTRO
CSS/HTML
– Try all code samples for Ch 15, 16, 17
– Try :first child selector
– Try implementing a drop down menu
Create a 3 column web page using CSS
Create multiple web pages linked to an external CSS file. Use IDs and classes.

READING:
HTML5
The old
The new
What about those older browsers?. Use a shiv

Extras:
FAViSize
Flavor FAVicon
Favicon generator
Responsive Designs
JQuery Slideshow
– Adding Social Media
– Example form to get you started

Assignment:
Read Chapter 9
Try Ch 9 code
Try implementing a Favicon
Try Implementing a working email form

CE 2411 08: HTML5 – 03/30/15

Intro:
I DO NOT NEED TO SEE THIS IN CLASS – UNLESS YOU HAD PROBLEMS
CSS/HTML
– Try all code samples for Ch 15, 16, 17
– Try :first child selector
– Try implementing a drop down menu
Start working on your final

HW Deliverables for final:
BASIC HTML
– Create a Basic splash page with images, links, and headings.
– Add more structural and semantic HTML to your pages.

PLANNING:
– 1-2 pragraph proposal For Final Website. Discuss limitations and example sites.
– Create Site Maps
– Create wireframes
– Build out your Site prototype using your final wire frames.
– Create Interface Design – 3 levels minimum, (JPG, PDF, ETC.).

CSS/HTML:
01
– Create a Basic splash page with images, links, and headings.

02
– Use structural and semantic HTML
– Create Site Maps, wireframes
– 1-2 paragraph proposal For Final Website. Discuss limitations and example sites

04
– Use Metatags (refresh and redirect)

05
– Tables: Try using Photoshop/slices to create a table mounted image. Text over image?
Practice creating forms
– Create your own mini web site (at least 3 pages), using css to complete the following on each page:
1. place background image,
2. Use the “box model”
3. Use pseudo classes

06
– Practice using external CSS
– Practice CSS priorities
– Practice opacity
– practice z-index
– drop shadow
– try a 3 column layout

07
– Try all code samples for Ch 15, 16, 17
– Try :first child selector
– Try implementing a drop down menu

READING:
HTML5
The old
The new
What about those older browsers?

Extras:
FAViSize
Flavor FAVicon
Favicon generator
Responsive Designs
– More responsive
JQuery Slideshow
Media Rules
– Sub-domain
To Swipe?
jquery picks
ready to slide?
– Adding Social Media
– Example form to get you started

Assignment:
Read Chapter 9
Try Ch 9 code
Work on Final: Beta site for next week. Present in class.

IDES 322 09: Advanced CSS 03/24/15

Intro:
HTML/CSS:
Tables: Try using Photoshop/slices to create a table mounted image. Text over image?
Practice creating forms

Create your own mini web site (at least 3 pages), using css to complete the following on each page:
1. place background image,
2. Use the “box model”
3. Use pseudo classes

READING:
Review Page 238, 292 in book
The :first-child selector allows you to target the first element immediately inside another element. It is defined as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.
– First Child in action
– First and last child
Ch. 14
List styles
List images
List positioning and shorthand
Table Properties
Even the Cursor can change
Lists are important for drop down menus:
Drop, example
Pick your poison

In Class:
External CSS, how to and why we do it this way
ID and Class
Introduction to 3 columns

Read the following articles
External CSS
Float it
Flaunt it
3 columns
more 3s

Assignment:
Read: Chapter 15, 16, 17
Review: 15, 16, 17
CSS/HTML
– Try all code samples for Ch 15, 16, 17
– Try :first child selector
– Try implementing a drop down menu
Create a 3 column web page using CSS
Create multiple web pages linked to an external CSS file. Use IDs and classes.

CE 2411: 07 Advanced CSS 03/23/15

Intro:
HTML/CSS:
– Practice using external CSS
– Practice CSS priorities
– Practice opacity
– practice z-index
– drop shadow
– Try a 3 column layout

Design:
– Revise your design based on feedback and present next week.

READING:
Review Page 238, 292 in book
The :first-child selector allows you to target the first element immediately inside another element. It is defined as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.
– First Child in action
– First and last child
Ch. 14
List styles
List images
List positioning and shorthand
Table Properties
Even the Cursor can change
Lists are important for drop down menus:
Drop, example
Pick your poison

Assignment:
Read: Chapter 15, 16, 17
Review: 15, 16, 17
CSS/HTML
– Try all code samples for Ch 15, 16, 17
– Try :first child selector
– Try implementing a drop down menu
Start working on your final

Resources:
JQuery Slideshow

IDES 322 08: Continue with CSS 03/17/15

**MIDTERM: DUE TODAY – Tuesday March 17
Documentation package – Pull together all of the documentation into a PDF document similar to this example. Must include:
1. Requirements
2. User scenarios
3. Competitive analysis
4. Site map
5. Wireframes
6. Prototype (link to)
7. Interface Design
8. Outstanding issues (development questions or concerns)

INTRO:
Make sure your Interface design has been modified to include feedback. You will present designs again next week

READING:
Tables – Review
CSS: Best examples
CSS Intro
CSS Rules
CSS Properties
CSS Selector reference
Pseudo class
The box. What’s a DIV?
External CSS. Here is how
Class, ID and Grouping
CSS priorities

Assignment:
Read: Chapter 10, 13, and 14
Review: 10, 13, and 14

HTML/CSS:
Tables: Try using Photoshop/slices to create a table mounted image. Text over image?
Practice creating forms

Create your own mini web site (at least 3 pages), using css to complete the following on each page:
1. place background image,
2. Use the “box model”
3. Use pseudo classes

CE 2411: 06 Continue with CSS 03/16/15

Intro:
HTML/CSS:
Tables: Try using Photoshop/slices to create a table mounted image. Text over image?
Practice creating forms
CSS:
Create your own mini web site (at least 3 pages), using css to complete the following on each page:
1. place background image,
2. Use the “box model”
3. Use pseudo classes

Reading:

CSS Propertes
CSS Selector
The box
Pseudo class
External CSS. Here is how
Class, ID and Grouping
CSS priorities

z-index, and some examples of opacity, z-index and lists in drop down menus
More drop-down
3 columns
Review Zen Garden

Assignment:
Read Ch 14
Review Ch 14

HTML/CSS:
Practice using external CSS
Practice CSS priorities
Practice opacity
practice z-index
drop shadow
try a 3 column layout

Design:
Revise your design based on feedback and present next week.

IDES 322 07: Intro to CSS

INTRO:
HTML:
1. Use Metatags (refresh and redirect)
2. Try all the code samples (Ch. 4, 5, 8) and upload to your server
DOCUMENTATION:
– Revise website prototype based on class feedback.
– Create Interface Design, Present in class

READING:
Tables – Review
CSS: Best examples
CSS Rules
External CSS. Here is how
Class, ID and Grouping
CSS priorities

Assignment:
**MIDTERM: DUE Tuesday March 17
Documentation package – Pull together all of the documentation into a PDF document similar to this example. Must include:
1. Requirements
2. User scenarios
3. Competitive analysis
4. Site map
5. Wireframes
6. Prototype (link to)
7. Interface Design
8. Outstanding issues (development questions or concerns)

CE 2411: 05 Intro to CSS 03/02/15

INTRO:
HTML:
1. Use Metatags (refresh and redirect)
2. Try a table
– Revise website prototype based on class feedback.
– Create Interface Design, Present next week as a JPG.

READING:
Tables – Review
CSS: Best examples
CSS Rules
External CSS. Here is how
Class, ID and Grouping
CSS priorities

Assignment:
Read 11, 12, and 13
Review: 11, 12, and 13

HTML/CSS:
Tables: Try using Photoshop/slices to create a table mounted image. Text over image?
Practice creating forms

CSS:
Create your own mini web site (at least 3 pages), using css to complete the following on each page:
1. place background image,
2. Use the “box model”
3. Use pseudo classes

IDES 322 06: Interface Design 02/24/15

Review HW:
– Revise site map and Wireframes based on feedback
– Build out your Site prototype using your final wire frames.
– We will review in class next week.

READING:
HTML is depends on file structure
HTML is depends on file paths
Examples,
Ch4 – Summary
Chapter 8
Meta basics – Here are EXAMPLES
Meta from Google
Meta today
Special Characters, Escape
Example
Ch8, Summary

INTERFACE ON THE WEB:
The interface
Virtual Space is as old as art.
Stats for size
960 Grid
t960 upgrade
Stats for Browser

Assignment:
Review 4, 5, and 8
Read: Chapter 6, 7, and 10
HTML:
1. Use Metatags (refresh and redirect)
2. Try all the code samples (Ch. 4, 5, 8) and upload to your server
Revise website prototype based on class feedback.
Create Interface Design, Present next week as a JPG.
We will review in class next week.

**MIDTERM: DUE Tuesday March 17
Documentation package – Pull together all of the documentation into a PDF document similar to this example. Must include:
1. Requirements
2. User scenarios
3. Competitive analysis
4. Site map
5. Wireframes
6. Prototype (link to)
7. Interface Design
8. Outstanding issues (development questions or concerns)