Category Archives: IDES 322 Techniques II

Slider test

IDES 322 13: Final Development 04/19/16

INTRO:
HTML/CSS
Practice JS redirect
Start Working on your final

READING:
To Swipe?
– WordPress does it for you
– More mobile me
jquery picks
ready to slide?
– How about forms? Examples

WORDPRESS:
WP customize
– More WP custom
– WP theme mods
– WP theme customization
– More WP tips

FINAL DELIVERABLES:
A. The Development Process Documents (This was your mid term. Make sure process reflects the finished final project):

B. Homework Assignments.

01:
Create a splash page for your web site (use anything you want) with an image and a link.
Upload HTML files to your server. Verify.

02:
Code review: 4, and 5 and upload to your server. Review in class

03:
Complete Code review for 6 and 7

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

05:
Complete Code review for 11 and 13
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

06:
Complete Code review for 3, 14 and 15
CSS: Try opacity + hover

07:
Complete Code review for chapter 16, and 17
– Try :first child selector
– Try implementing a drop down menu

08:
CODE: Create a 3 column layout using any CSS method we covered

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

10:
Practice JS redirect

C. Customized WordPress site (URL*)

D. Mobile Site – JS redirect (URL*)

E. Final Site (URL*)

URL* – These deliverables can be one single URL IF your final is on the WP platform.

Studio 11: Work on your final deliverables

IDES 322 10: Tips and Tricks Part 1 03/29/16

INTRO:
HTML/CSS:
Media Rules:
– import CSS using media rules
– Change background based on media rules (see demo)
– import fonts using media import rules
– Try Javascript image rollovers and CSS sprites
– Create and install a favicon
– Further customize your WordPress based on articles

READING:
– Some helpful SEO resources
– More on Google Analytics

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

FINAL DELIVERABLES:
A. The Development Process Documents (This was your mid term. Make sure process reflects the finished final project):

B. Homework Assignments.
Complete List next week*

C. Customized WordPress site (URL*)

D. Mobile Site – JS redirect (URL*)

E. Final Site (URL*)

URL* – These deliverables can be one single URL IF your final is on the WP platform.

ASSIGNMENT:
Sources to Review:
– Intro to frameworks
Fluid Template
– One more
Responsive Designs

HTML/CSS
Practice JS redirect

IDES 322 09: WORPRESS + ADVANCED CSS 03/22/16

INTRO:
Complete Code review for 9, and 12
Float Tutorial
Inline block tutorial
Horizontal Align
CODE: Create a 3 column layout using any CSS method we covered

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

Chapter 12
– Can also import fonts
Can also use Google Fonts

From Chapter 16, rollovers.
JS tried and true. Demo 2004 site:
Better but tricky

FAVICON:
FAViSize
Flavor FAVicon
Favicon generator

WORDPRESS:
– Install! If you are using a free host, need to get it
– A “how to”
WP customize
– More WP custom
– WP theme mods
– WP theme customization
– More WP tips

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

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

Install WordPress on your server. Start playing with and customizing the platform
Start working on your final

IDES 322 08: CSS Layout + WordPress Intro 03/15/16

INTRO:
MID TERM: Process documentation Due: Present.
Complete Code review for 16, and 17
– Try :first child selector
– Try implementing a drop down menu

READING:
Ch. 15
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

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

Ch. 17
HTML5
The old
The new
What about those older browsers?. Use a shiv

WordPress: Introduction

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

HTML/CSS:
Read: Chapter 9, and 12.
Complete Code review for 9, and 12
Float Tutorial
Inline block tutorial
Horizontal Align
CODE: Create a 3 column layout using any CSS method we covered

IDES 322 07: Advanced CSS 03/01/16

INTRO
HTML/CSS:
Complete Code review for 3, 14 and 15
CSS: Try opacity + hover

Process and Design:
Process: Revise wire frames/prototype based on class feedback
DESIGN: Create site interface in PSD or AI. Output as a .JPEG. We will review in class next week.

MID TERM: Process documentation due on Tuesday, March 15th.
Example: 1, 2, 3, 4

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

Ch. 15
Best review
The power of “Z” and test code
Floaters
Float and Clear
Next Week: 2 column, and 3 column layout. Media queries – using multiple CSS

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

HTML/CSS:
Read: Chapter 16, and 17.
Complete Code review for 16, and 17
– Try :first child selector
– Try implementing a drop down menu

Process and Design:
MID TERM: Process documentation due next class – Friday, Oct 30th.
Examples: 1, 2, 3, 4

IDES 322 06: CONTINUE WITH CSS 02/23/16

INTRO:
Revise Usability maps, Site Map, Wireframes and Prototypes based on feedback (completed by next class)
Complete Code review for 11 and 13
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

READING:
Best examples
CSS Rules
External CSS. Here is how
Class, ID and Grouping Book, pg. 238.
Cascading – Book, pg. 239.
CSS priorities
Color names
Opacity
Opacity – roll over using JavaScript:
Try it using the CSS – hover property

Studio 06: More CSS
Sources to Review:
CSS Layout

HTML/CSS:
Read: Chapter 3, 14 and 15.
Complete Code review for 3, 14 and 15
CSS: Try opacity + hover

Process and Design:
Process: Revise wire frames/prototype based on class feedback
DESIGN: Create site interface in PSD or AI. Output as a .JPEG. We will review in class next week.
MID TERM: Process documentation due on Tuesday, March 15th.
Example: 1, 2, 3, 4

IDES 322 05: Intro to CSS 02/16/16

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 (these are for you)
– 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 Intro
CSS parts
CSS Propertes
CSS Selector
The box
Pseudo class

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

ASSIGNMENT:
HTML/CSS:
Read: Chapter 11 and 13.
Complete Code review for 11 and 13
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)

IDES 322 04: PROCESS 2 + Tables 02/09/16

INTRO:
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 (show in class)
– Create a Site Map for the site. Start with content inventory. Think through Mobile options for your final development (show in class)

REVIEW:
Tables – A simple table.
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

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.

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

1 2 3 5