Category Archives: CE

CE 2411 08: HTML5 – 11/23/15

INTRO:
– CODE: Create a 3 column layout using any CSS method we covered above.
– Try implementing a drop down menu

READING:
Ch. 9
Who needs FLASH?
Adding Video
SWFObject
JavaScript
Ch. 17
The old
The new
How it works
What about those older browsers?

EXTRA:
From Chapter 15, Media Rules.
Start with @import
But, when presented as a media rule: @media – used for different purposes:
Media Rules
– More Media info
From Chapter 16, rollovers.
JS tried and true.
Better but tricky
FAVICON
FAViSize
Flavor FAVicon
Favicon generator

NEW:
JS Redirect:
– Sub-domain. How does it look?
How to redirect? My Page. Code. Screen Shot on iPhone
Practical application.

ASSIGNMENT:
Sources to Review:
CSS Rollover
CSS Rollover 2
More on the Hover
Advanced Hover effects
Zen Garden

HTML/CSS
Chapter 19
Media Rules:
– import CSS using media rules
– Change background based on media rules (see demo)
– Try Javascript image rollovers and CSS sprites
– Create and install a favicon

Start working on your final

CE 2411 07: Advanced CSS 11/16/15

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

READING:
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
Ch. 15
Best review
The power of “Z” and test code
Float
Float and Clear
Review Float with examples
Putting it together
3 vs 2
Fixed
Liquid
Layout without Tables
Another Example
Next Week: Media Rules
Ch. 16
Image Size
Alignment (Note: using Float)
Centering options
The float is key
Next Week: Image Rollovers and Sprites

ASSIGNMENT:
Sources to Review:
3 columns
more 3s
– Another explanation of the FLOAT

HTML/CSS:
Read: Chapter 17 and 9.
Complete Code review for 17, and 9
– CODE: Create a 3 column layout using any CSS method we covered above.
– Try implementing a drop down menu

CE 2411 06: STILL MORE CSS 11/09/15

INTRO:
– Practice using external CSS
– Practice CSS priorities
– Try :first child selector
– Practice: Opacity hover roll over
DESIGN:
Revise your design based on feedback and present next week.
Make sure your Wireframes/prototype are finalized

READING:
Chapter 11
Color: Specify color in 3 different ways
RGB, HEX CODES, COLOR NAMES
Color names
Opacity
Color as HSL and HSLA: hue, saturation. lightness, and alpha *NOTE: beware of older browsers
Chapter 12
Fonts. Web Safe?
Google can also help and here is how
Chapter
Chapter 13
Centering
Centering explained
Power of margins

ASSIGNMENT:
Read: Ch. 14, 15, and 16
HTML/CSS:
Review: 14, 15, 16
Create your own mini web site (at least 5 pages), using css to complete the following on each page:
1. place background image,
2. Use the “box model”
3. Use pseudo classes
4. Embed fonts
Review in class next week

CE 2411: 05 Design and More CSS – 11/02/15

INTRO:
HTML/CSS
Create at least 3 HTML pages, using CSS to complete the following on each page:
1. place background image,
2. Use the “box model”
3. Use pseudo classes

PROCESS:
Revise Prototype based on feedback in class. Same with Wireframes.
Create first iteration of Template mock-ups in PSD or IA. Show your .JPG next class.

READING:
Review: 7 and 10
Best examples
External CSS. Here is how
Class, ID and Grouping
The box
Opacity
CSS: Try opacity + hover. The source code.
CSS priorities. Also see page, 239.
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

PROCESS:
You should have:
1. Requirements
2. Competitive Analysis
3. Usability: Scenarios or maps
4. Content Inventory/ Site Map
5. Wire Frames
6. Prototype
7. Interface Design

ASSIGNMENT:
HTML/CSS:
Read 11, 12, and 13
Review: 11, 12, and 13
– Practice using external CSS
– Practice CSS priorities
– Try :first child selector
– Practice: Opacity hover roll over

DESIGN:
Revise your design based on feedback and present next week.
Make sure your Wireframes/prototype are finalized

CE 2411: 04 INTERFACE DESIGN – CSS INTRO 10/26/15

INTRO:
Review: How to manipulate cells
HTML: Try out all the code samples for Chapter 3, and 6.
Try META tag examples (Refresh, Redirect)
Revise IA and Wireframes based on feedback
Build out your Site prototype using your final wire frames.(Review in Class)

PROCESS:
You should have:
1. Requirements
2. Competitive Analysis
3. Usability: Scenarios or maps
4. Content Inventory/ Site Map
5. Wire Frames
6. Prototype
7. Interface Design – Screen Size?, Make sure you are thinking through all ways to display.
Sources to Review: AWD – What is it?
AWD vs RWD
Modern Web Design

REVIEW:
Lists
Tables
Looking ahead –
INTRO TO CSS:
CSS Intro
CSS parts
CSS Propertes
CSS Selector
The box
Pseudo class

ASSIGNMENT:
Read: Chapter 7, and 10
Review: 7 and 10
HTML/CSS
Create at least 3 HTML pages, using CSS to complete the following on each page:
1. place background image,
2. Use the “box model”
3. Use pseudo classes
PROCESS:
Revise Prototype based on feedback in class. Same with Wireframes.
Create first iteration of Template mock-ups in PSD or IA. Show your .JPG next class.

CE 2411: 03 – HTML + PROTOTYPE 10/19/15

INTRO:
Create Site Maps, wireframes (first version. Present today)
1-2 paragraph proposal For Final Website. Discuss limitations and example sites (present today)
Code homework.

READING:
HTML is depends on file structure
HTML is depends on file paths
Path demo. Should end up at this LINK
Link Examples,
Ch 4 – Summary
Ch 5 – Source
Chapter 8
Differences in HTML – see comment #6
Meta basics – Here are EXAMPLES
Meta from Google
Meta today
Special Characters, Escape
Example
Ch8, Summary

PROCESS/PROTOTYPING:
– Draft requirements.
– Who is the audience? Determine the target demographic and create preliminary user scenarios .

Prototype
Prototype 2

Same for site maps
User experience/wireframes
UX diagram examples
Sketches
Sketches 2
Digital
With annotations
With Annotations 2
Prototyping tools
Next Week: Interface Design.

RESOURCES:
From smashingmagazine
Free wireframing tools
Wireframes Mag
Dummy text with a twist
UX case study
Wireframe your site

ASSIGNMENT:
Read: Chapter 3, and 6
Review 3, and 6
Review: How to manipulate cells
HTML: Try out all the code samples above.
Try META tag examples (Refresh, Redirect)
Revise IA and Wireframes based on feedback
Build out your Site prototype using your final wire frames.
We will review in class next week.

CE 2411: 02 – HTML + Process 10/12/15


Alternate Site: https://uarts.digication.com/web1/Home/

INTRO:
Questions? Email me: jparada@uarts.edu
Review HW:
– Buy a domain name and Hosting account
– Review FTP/server basics
– Create a Basic splash page with images, links, and headings.
More examples

REVIEW:
HTML is a hierarchy.
HTML Summary
Attributes
HTML Summary 2
Code practice: Include in final deliverables

PROCESS
What process? Why do we need it?
the bad, worse, just plain ugly
All kinds of “bad”

– Functional Specifications: Deliverable: 1-2 page proposal.
-Generating schematic wireframes for key interfaces and interactions: Deliverables: Site Inventory/Site Map,. Layout grids (Wire frames)
-Designing the visual interface: Deliverables: Template mock-ups in PSD or IA., Web based prototype

Assignment:
Read: Chapter 18 – Process and Design, 4, 5, and 8
HTML: Try out all the code samples: 4, 5, and 8
1-2 paragraph proposal For Final Website. Discuss limitations and example sites (present next week)
Create Site Maps, wireframes (first version. Present next week)

CE 2411: 01 – Web I Introduction 10/05/15

Software:
Editors – BBEdit, TextWrangler
A new one, Brackets
Real-time editor
FTP

Wireless Access:
Login ID: csstudent
password: umberY13

Introduction:
Review Syllabus
HW assignments – Examples
1- Sample Student Website
2 – Sample
3 – Sample
4 – Sample
5 – Sample
6 – Sample

Structure:
DNS – What is it?
IP Address

Intro to HTML:
W3
HTML Elements
HTML Attributes

Assignment:
Read Chapter 1,2
Buy a domain name and Hosting account
Review 1, 2
Create a Basic splash page with images, links, color, and headings. (use HTMl). We will review next week.
Select topic/project and begin research

CE 2411: Final Deliverables

01:
Create a Basic splash page with images, links, color, and headings.

02:
Ch 4, 5, and 8 code samples
Create Site Maps, wireframes
1-2 paragraph proposal For Final Website. Discuss limitations and example sites

03:
Ch 3, 6 code review
Try META tag examples (redirect, refresh). Combine into multiple pages.
Revise IA and Wireframes based on feedback
Build out your Site prototype using your final wire frames.

04:
1. Try using photoshop to mount an image in a table. Write over a table cell as demonstrated in class
2. Revise website prototype based on class feedback. Present next week
Interface:
Create Interface Design (JPG)

05:
Ch. 11, 12, and 13 code review
Practice using external CSS
Practice Pseudo classes and the box
Practice CSS priorities
Try :first child selector

06:
Create your own mini web site (at least 5 pages), using css to complete the following on each page:
1. place background image,
2. Use the “box model”
3. Use pseudo classes
4. Use hover and opacity
5. Embed fonts
6. Practice limiting width

07:
Try out all the code samples above. Emphasis on Media Rules, sprites and positioning.
ch 9, 17 code review

08:
Create a FAVICON
Try a re-direct based on screen size

CE 2411 08: HTML5 – 08/03/15

INTRO:
Ch 9, 17, 19
Try out all the code samples above. Emphasis on Media Rules, sprites and positioning.
Start working on your final Project,

READING:
Ch. 9
Who needs FLASH?
Adding Video
SWFObject
JavaScript
Ch. 17
The old
The new
How it works
What about those older browsers?
Ch. 19
Some helpful SEO resources
More on SEO

EXTRA:
FAViSize
Flavor FAVicon
Favicon generator

Responsive Designs
– More responsive
JQuery Slideshow

– Sub-domain. How does it look?
How to redirect? My Page. Code. Screen Shot on iPhone

To Swipe?
jquery picks
ready to slide?

– Adding Social Media
– Example form to get you started

ASSIGNMENT:
Create a FAVICON
Try a re-direct based on screen size
Work on your final