Category Archives: CE

CE 2411 07: MORE CSS 08/01/16

INTRO:
Float Tutorial
Inline block tutorial
Horizontal Align
Try the Z-index
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
3 columns
more 3s

HTML/CSS:
Read: Chapter 9, and 12.
Complete Code review for 9, and 12

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
– Try Mobile redirect

Start working on your final

CE 2411 06: MORE CSS 07/19/16

REVIEW:
HTML/CSS:
Complete Code review for 14, 15, and 16
– Try :first child selector
– Try External CSS
– Try CSS opacity hover

READING:
Ch. 14
List styles
List images
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
Floaters
Float and Clear
They have semantic difference – a “div” element is designed to describe a container of data whereas a “p” element is designed to describe a paragraph of content. (Nesting: you can not nest anything in a “p” tag)
Review Float with examples
Putting it together
3 vs 2
Floaters
Float and Clear
Examples
Another explanation of the FLOAT
Fixed
Liquid
Layout without Tables
Another Example
What to do with the “Z”
Next Week: Media Rules, 2 column, and 3 column layout. Media queries – using multiple CSS

Ch. 16
Image Size
Alignment (Note: using Float)
Centering options
The float is key
Next Week: Image Rollovers and Sprites

Sources to Review:
– More about the “Z”
Flaunt it
3 columns
more 3s

Assignment:
Float Tutorial
Inline block tutorial
Horizontal Align
Try the Z-index
Try implementing a drop down menu

CE 2411 06: More CSS 07/18/16

INTRO:
HTML/CSS:
Complete Code review for 11 and 13
– Try Meta tag, refresh and redirect
– 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

Revise Usability maps, Site Map, Wireframes and Prototypes based on feedback (completed by next class)
Create an interface (Web Design) for your site. Focus on Home and significant sub page.

READING:
Chapter 10
Best examples
CSS Rules
External CSS. Here is how

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

Class, ID and Grouping Book, pg. 238.
Cascading – Book, pg. 239.
CSS priorities

Ch. 11
Color names
Opacity
Opacity – roll over using JavaScript:
Try it using the CSS – hover property

Assignment:
HTML/CSS:
Read: Chapter 14, 15, and 16.
Complete Code review for 14, 15, and 16
– Try :first child selector
– Try External CSS
– Try CSS opacity hover

CE 2411 05: Intro to CSS 07/11/16

Sources to Review:
Start reviewing Grid Systems

INTRO:
Complete Code review for 8 and 10
– Mount an image in a table. Put text in certain table cells.
Process and Design:
– Modify Usability and site maps based on feedback.
– Create Detailed Wire frames and annotated versions
– Create HTML prototype from your wireframes. Be as detailed as possible.
We will review in class

REVIEW:
Chapter 8
Meta basics – Here are EXAMPLES
Meta from Google
Meta today
Special Characters, Escape
Example
Ch8, Summary
Chapter 10
INTRO TO CSS:
CSS in Action!
CSS Intro
CSS parts
CSS Propertes
CSS Selector
The box
Pseudo class

PROCESS AND DESIGN:
Sources to Review:
You need a strategy
AWD – What is it?
AWD vs RWD
Modern Web Design

Assignment:
HTML/CSS:
Read: Chapter 11 and 13.
Complete Code review for 11 and 13
– Try Meta tag, refresh and redirect
– 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

Revise Usability maps, Site Map, Wireframes and Prototypes based on feedback (completed by next class)
Create an interface (Web Design) for your site. Focus on Home and significant sub page.

CE 2411 04: PROCESS 2 + TABLES 06/20/16

INTRO:
Complete Code review for 6 and 7
Process and Design
Start UIX and Documentation:
– Start thinking about the site you want to build. Draft requirements.
– Who is the audience? Determine the target demographic and create preliminary user scenarios and usability maps
– Create a Site Map for the site. Start with content inventory. Think through Mobile options for your final development

REVIEW:
Tables – A simple table.
Colspan
Rowspan
Demo tables in Photoshop
How to manipulate cells
Forms – Practice formatting.
Adding PHP and functionality.
Example

PROCESS + PROTOTYPING
REQUIREMENTS:
– Who is the site for, Why would people Visit this site, What are your visitors trying to achieve? What information do your visitors need?
DELIVERABLE: Requirements, Target Audience, Research/sketches

USABILITY (UIX):
– Anticipating end-user scenarios: Example, Example2 and a quick Usability Map
– Modeling the user experience: Design Document: Audience Scenarios, and Competitive Analysis.
Experience mapping
Example
Example
DELIVERABLE: User Scenarios, Usability maps, Competitive Analysis

Resources:
UX diagram examples
Read This
UPA
Experience Maps

SITE STRUCTURE
-Generating schematic wireframes for key interfaces and interactions:
Site map
Site map
User experience/wireframes
Wireframes
Deliverables: Site Inventory/Site Map,. Layout grids (Wire frames and HTML Prototype

Resources:
Sketches
Sketches 2
Digital
With annotations
With Annotations 2

PROTOTYPING:
Examples
Another example
Deliverable: HTML Prototype

Resources:
Prototyping tools

DESIGN:
-Designing the visual interface:
Template mock-ups in PSD or IA.
Deliverables: Interface in JPG

OUTSTANDING ISSUES:
– Think ahead. What do you think will be challenges to development? Keep a list trhough project life cycle

DEVELOPMENT:
-Technical Production: Deliverables: Alpha Site
-QA: Testing. Deliverables: Bug List, Beta Site
-Launch: Deliverables: Final Site

EXAMPLE:

TODAY:
-Generating schematic wireframes for key interfaces and interactions:
Deliverables: Site Inventory/Site Map,
Layout grids – Wire Frames.
Wire frames should be worked up to scale.
Virtual Space is as old as art.
Stats for size
Think of a grid
Stats for Browsers
Don’t forget the “Mobile” Experience
Mobile sizes are helpful.
You need a strategy

Assignment:
Sources to Review:
Start reviewing Grid Systems

Read: Chapter 8 and 10.
Complete Code review for 8 and 10
Mount an image in a table. Put text in certain table cells.

Process and Design:
– Modify Usability and site maps based on feedback.
– Create Detailed Wire frames and annotated versions
– Create HTML prototype from your wireframes. Be as detailed as possible.
We will review in class

CE 2411 03: Process + HTML 06/13/16

INTRO:
HTML: Try out all the code samples: from Chapter 4, and 5 and upload to your server.
Based on Ch 18, start thinking about the kind of site you want to develop (Requirements). Answer questions on page 455.

REVIEW
HTML link attributes
E-mail link magic
HTML IDs and anchors
HTML Structure
HTML is depends on file paths
Path demo. Should end up at this LINK
Ch4 – Summary
Ch5 – Questions on images?

PROCESS + PROTOTYPING
REQUIREMENTS:
– Who is the site for, Why would people Visit this site, What are your visitors trying to achieve? What information do your visitors need?
DELIVERABLE: Requirements, Target Audience, Research/sketches

USABILITY (UIX):
– Anticipating end-user scenarios: Example, Example2 and a quick Usability Map
– Modeling the user experience: Design Document: Audience Scenarios, and Competitive Analysis.
Experience mapping
Example
Example
DELIVERABLE: User Scenarios, Usability maps, Competitive Analysis

Resources:
UX diagram examples
Read This
UPA
Experience Maps

SITE STRUCTURE
-Generating schematic wireframes for key interfaces and interactions:
Site map
Site map
User experience/wireframes
Wireframes
Deliverables: Site Inventory/Site Map,. Layout grids (Wire frames and HTML Prototype

Resources:
Sketches
Sketches 2
Digital
With annotations
With Annotations 2

PROTOTYPING:
Examples
Another example
Deliverable: HTML Prototype

Resources:
Prototyping tools

DESIGN:
-Designing the visual interface:
Template mock-ups in PSD or IA.
Deliverables: Interface in JPG

OUTSTANDING ISSUES:
– Think ahead. What do you think will be challenges to development? Keep a list trhough project life cycle

DEVELOPMENT:
-Technical Production: Deliverables: Alpha Site
-QA: Testing. Deliverables: Bug List, Beta Site
-Launch: Deliverables: Final Site

EXAMPLE:

Assignment
Read: Chapter 6 and 7.
Complete Code review for 6 and 7

Process and Design
Start UIX and Documentation:
– Start thinking about the site you want to build. Draft requirements.
– Who is the audience? Determine the target demographic and create preliminary user scenarios and usability maps
– Create a Site Map for the site. Start with content inventory. Think through Mobile options for your final development

ce 2411 02: HTML + Intro to Process 06/06/16

INTRO:
Review Studio Assignment –
1. Read Chapter 1,2
2. Code Work: Review 1, 2
3. Create a splash page for your web site (use anything you want) with an image and a link. Example?
Upload HTML files to your server. Verify.

TECHNICAL REVIEW:
1. Set up your server and upload a file.
– Test file upload
2. Make sure you understand “path” and the server environment (DEMO)

READING REVIEW:
HTML is a hierarchy.
Attributes
HTML Summary
All the tags
HTML Summary 2
Good resource
Looking Ahead:
Links
Images

INTRO TO PROCESS:
What process? Why do we need it?
The bad. What?, just plain ugly
Ouch!, Oh, my
wow, just wow
Oh,Boy.
Oh my.
Are you kidding??
All kinds of “bad”

Studio 02: HTML and Process
Read: Chapter 18 – Process and Design, 4, and 5
HTML: Try out all the code samples: 4, and 5 and upload to your server.
Based on Ch 18, start thinking about the kind of site you want to develop (Requirements). Answer questions on page 455.

CE 2411: 01 – Web I Introduction 05/23/16

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

Book: HTML and CSS: Design and Build Websites. John Wiley & Sons. 2011.

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

Wireless Access:
Login ID: csstudent
password: umberY13

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
Try the W3 HTML Tutorial
Create a splash page for your web site (use anything you want) with an image and a link. Example?
Upload HTML files to your server. Verify.
Select topic/project and begin research

CE 2411 09: Last Class before Final 04/04/16

READING:
– Some helpful SEO resources
– More on Google Analytics
To Swipe?
jquery picks
ready to slide?
– How about forms? Examples

DELIVERABLES:
HW
01:
Create a Basic splash page with images, links, color, and headings. (use HTMl). We will review next week.
Select topic/project and begin research

02:
1-2 paragraph proposal For Final Website. Discuss limitations and example sites (present next week)
Create Site Maps, wireframes

03:
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.

04:
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

05:
– 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.

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. Embed fonts

07:
– CODE: Create a 3 column layout using any CSS method we covered above.
– Implement a drop down menu

08:
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

Final Web Site:
URL for final project

ASSIGNMENT:
Final Project due next week

1 2 3 7