Category Archives: WDS

WDS 10: Tips and Tricks Part 1- 11/13/15

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 instal a favicon
– Further customize your WordPress based on articles

READING:
– Some helpful SEO resources
More on SEO
– More on Google Analytics
NEW:
JS Redirect:
– Sub-domain. How does it look?
How to redirect? My Page. Code. Screen Shot on iPhone
Practical application.

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

B. Homework Assignments.

01:
– Create first splash page

02:
– Who is the audience? Determine the target demographic and create preliminary user scenarios (Either written as user scenarios or a User experience map) .
– Create a Site Map for the site. Start with content inventory.
– Based on the Site Map, create your first iteration of wireframes
Upload to your server. We will review next class.

03:
– Mount an image in a table. Put text in certain table cells.
– Create HTML prototype from your wireframes. Be as detailed as possible.
We will review in class

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

05:
CSS: Try opacity + hover
Interface Design for your Final Project (in JPG)

06:
– Try :first child selector
– Try implementing a drop down menu

07:
Create a 3 column layout using any CSS method we covered
Install WordPress on your server.

08:
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 instal a favicon
– Further customize your WordPress based on articles

09:
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 10: Final Details
Sources to Review:
– Intro to frameworks
Fluid Template
Another One
– One more
Responsive Designs

HTML/CSS
Chapter 19
Practice JS redirect

Process and Design:
Start working on your final (Due December 11)

WDS 09: WorPress + CSS, advanced Code 11/06/15

INTRO:
Complete Code review for 9, and 12 (Show in class)
CODE: Create a 3 column layout using any CSS method we covered (Show in class)
Install WordPress on your server. (Show in class)

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:
WP customize
– More WP custom
– WP theme mods
– WP theme customization
– More WP tips

Studio 09: Media Rules, Advanced CSS, WP
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)
– import fonts using media import rules
– Try Javascript image rollovers and CSS sprites
– Create and install a favicon

Start working on your final

WDS 08: CSS Layout + WordPress Intro 10/30/15

INTRO:
MID TERM: Process documentation due!
– Try :first child selector
– Try implementing a drop down menu

READING:
Ch. 15
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
Ch. 17
HTML5
The old
The new
What about those older browsers?. Use a shiv

WordPress: Introduction

Studio 08: More CSS, HTML5, and WordPress
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
Install WordPress on your server.

Process and Design:
MID TERM: Make sure your documentation is COMPLETE!
Do not forget to email or share your file.

WDS 07: Advanced CSS 10/23/15

INTRO:
Complete Code review for 3, 14 and 15
CSS: Try opacity + hover. The source code.
DESIGN: Revise your interface (design) based on feedback. Present Prototype if you did not last 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

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

Studio 07: Advanced CSS and Mid Term
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

WDS 06: Continue with CSS 10/16/15

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

Process and Design:
Modify Wireframes and Prototype according to feedback.
DESIGN: Create site interface in PSD or AI. Output as a .JPEG. We will review in class next week.

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:
DESIGN: Revise your interface (design) based on feedback. Start pulling together all your documentation.
MID TERM: Process documentation due on Friday, Oct 30th.
Example: 1, 2, 3, 4

WDS 05: Intro to CSS 10/09/15

INTRO:
Mount an image in a table. Put text in certain table cells.
Process and Design:
Create HTML prototype from your wireframes. Be as detailed as possible.

PROCESS:
PLANNING:
Deliverable: Requirements Doc

FUNCTIONAL SPECIFICATIONS:
– Anticipating end-user scenarios:
– Modeling the user experience: Deliverable: Design Document: Audience Scenarios, and Competitive Analysis.
-Generating schematic wireframes for key interfaces and interactions:
Deliverables: Site Inventory/Site Map, Wireframes – Make sure you are thinking through all ways to display.

PROTOTYPING:
HTML Prototype – Incorporate feedback

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

DEVELOPMENT:
-Invite feedback/user testing: Deliverable: Feedback
-Technical Production: Deliverables: Alpha Site
-QA: Testing. Deliverables: Bug List, Beta Site
-Launch: Deliverables: Final Site

REVIEW:
Chapter 8
Differences in HTML – see comment #6
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

Studio 05: Prototype revisions – CSS
Sources to Review:
AWD – What is it?
AWD vs RWD
Modern Web Design

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

Process and Design:
Modify Wireframes and Prototype according to feedback.
DESIGN: Create site interface in PSD or AI. Output as a .JPEG. We will review in class next week.

WDS 04: Process 2 + Tables 10/02/15

INTRO:
– Draft requirements.
– Who is the audience? Determine the target demographic and create preliminary user scenarios (Either written as user scenarios or a User experience map) .
– Create a Site Map for the site. Start with content inventory.
– Based on the Site Map, create your first iteration of wireframes
Upload to your server. We will review next class.

REVIEW:
Tables – A simple table.
Demo tables in Photoshop
How to manipulate cells
Forms – Practice formatting. We will add the PHP mechanics later in the semester.

PROCESS:
PLANNING:
DELIVERABLE: Requirements Doc

FUNCTIONAL SPECIFICATIONS:
– Anticipating end-user scenarios:

– Modeling the user experience: Deliverable: Design Document: Audience Scenarios, and Competitive Analysis.

-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 Browser

PROTOTYPING:
HTML Prototype
Examples
Another example
Why so big?
Prototyping tools

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

DEVELOPMENT:
-Invite feedback/user testing: Deliverable: Feedback
-Technical Production: Deliverables: Alpha Site
-QA: Testing. Deliverables: Bug List, Beta Site
-Launch: Deliverables: Final Site

Studio 04: Web Development Process – Prototype
Sources to Review:
Start understanding 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:
Create HTML prototype from your wireframes. Be as detailed as possible.
We will review in class

wds 03: Process 09/18/15

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 is depends on file structure
HTML is depends on file paths
Path demo. Should end up at this LINK
Link Examples,
Ch4 – Summary
Ch5 – Questions on images?

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

FUNCTIONAL SPECIFICATIONS:
– Anticipating end-user scenarios: Example, Example2

– Modeling the user experience: Deliverable: Design Document: Audience Scenarios, and Competitive Analysis. Experience mapping comes in many different flavors

-Generating schematic wireframes for key interfaces and interactions: Deliverables: Site Inventory/Site Map,. Layout grids (Wire frames and HTML Prototype.
Site maps
User experience/wireframes
UX diagram examples
Sketches
Sketches 2
Digital
With annotations
With Annotations 2
PROTOTYPING:
Examples
Another example
The Mobile proto
Why so big?
Prototyping tools

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

DEVELOPMENT:
-Invite feedback/user testing: Deliverable: Feedback
-Technical Production: Deliverables: Alpha Site
-QA: Testing. Deliverables: Bug List, Beta Site
-Launch: Deliverables: Final Site

Studio 03: Web Development Process and UIX
Sources to Review:
Read This
UPA
Experience Maps
Wireframes Mag
UX for gamers
Dummy text with a twist
Example?

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

Process and Design
Practice 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