Category Archives: WDS

WDS 14: FINAL

FINAL DELIVERABLES:
A. The Development Process Documents (This was your mid term. Make sure you include a link to your Prototype):

B. Homework Assignments.

Studio 12: Final
– Try PHP includes
– Try JavaScript redirect

Studio 09: CSS/HTML
– Import and display fonts
– Try an image (Sprite) Roll-over (CSS)
– Try Inline Block, Instead of Float
– HTML5 Code (make sure you have tried it)

Studio 08: More CSS + Drop downs
– Make sure you understand the “Z-index”. Try either example.
– Create a 2 Column layout using HTML/CSS
– Create a 3 Column layout using HTML/CSS
– Try a JS Drop down menu
– Try CSS Drop down
– Try Media query (color change)

Studio 06: CSS Review
HTML/CSS:
Complete Code review for Chapter 3, 15, and 16
– Create a single page with the following:
– Try CSS opacity hover
– Try JavaScript opacity hover (copy the code)
– A list of any kind
– Any variation of the “display” property (none, inline, inline-block, etc.)
– Create a navigation menu from a list and the “display” property.

Studio 05: HTML/CSS:
Complete Code review for Chapter 11 and 13
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image and practice positioning and margins.
— 2. Use the “box model”
— 3. Use pseudo classes

Studio 04: HTML + Intro to CSS
Read: 10.
Complete Code review for Chapter 10
HTML/CSS: Use the META tag to refresh and redirect

Studio 03: HTML Tables
Complete Code review for Chapter 7 and 8
Following the Table Demo: Create a table with mounted image and put text on top of the images in HTML

Studio 01: Set up and Intro to HTML
Code Work: Review Chapter 1, 2
Create a splash page for your web site (use anything you want) with an image and a link.

C. WordPress site. Installed and customized

D. Final Site (URL) AND a screen shot of your site

Studio 14: Adios!
Have a god break

WDS 13: WORK ON FINAL DELIVERABLES 12/05/17

FINAL DELIVERABLES:
A. The Development Process Documents (This was your mid term. Make sure you include a link to your Prototype):

B. Homework Assignments.

Studio 12: Final
– Try PHP includes
– Try JavaScript redirect

Studio 09: CSS/HTML
– Import and display fonts
– Try an image (Sprite) Roll-over (CSS)
– Try Inline Block, Instead of Float
– HTML5 Code (make sure you have tried it)

Studio 08: More CSS + Drop downs
– Make sure you understand the “Z-index”. Try either example.
– Create a 2 Column layout using HTML/CSS
– Create a 3 Column layout using HTML/CSS
– Try a JS Drop down menu
– Try CSS Drop down
– Try Media query (color change)

Studio 06: CSS Review
HTML/CSS:
Complete Code review for Chapter 3, 15, and 16
– Create a single page with the following:
– Try CSS opacity hover
– Try JavaScript opacity hover (copy the code)
– A list of any kind
– Any variation of the “display” property (none, inline, inline-block, etc.)
– Create a navigation menu from a list and the “display” property.

Studio 05: HTML/CSS:
Complete Code review for Chapter 11 and 13
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image and practice positioning and margins.
— 2. Use the “box model”
— 3. Use pseudo classes

Studio 04: HTML + Intro to CSS
Read: 10.
Complete Code review for Chapter 10
HTML/CSS: Use the META tag to refresh and redirect

Studio 03: HTML Tables
Complete Code review for Chapter 7 and 8
Following the Table Demo: Create a table with mounted image and put text on top of the images in HTML

Studio 01: Set up and Intro to HTML
Code Work: Review Chapter 1, 2
Create a splash page for your web site (use anything you want) with an image and a link.

C. WordPress site. Installed and customized

D. Final Site (URL) AND a screen shot of your site

Studio 13: Final
Work on your final Deliverables

WDS 12: Work on Final Deliverables 11/28/17

INTRO:
Work on your Final
Fluid Template
Responsive Designs

JS Redirect:
– Start with a subdomain
– How do I create a subdomain? DEMO
How to redirect?
Put it all together…

PHP INCLUDES:
Saves work
Makes coding easier
Best Practices

JAVASRIPT
Tutorial

FINAL DELIVERABLES:
A. The Development Process Documents (This was your mid term. Make sure you include a link to your Prototype):

B. Homework Assignments.

Studio 12: Final
– Try PHP includes
– Try JavaScript redirect

Studio 09: CSS/HTML
– Import and display fonts
– Try an image (Sprite) Roll-over (CSS)
– Try Inline Block, Instead of Float
– HTML5 Code (make sure you have tried it)

Studio 08: More CSS + Drop downs
– Make sure you understand the “Z-index”. Try either example.
– Create a 2 Column layout using HTML/CSS
– Create a 3 Column layout using HTML/CSS
– Try a JS Drop down menu
– Try CSS Drop down
– Try Media query (color change)

Studio 06: CSS Review
HTML/CSS:
Complete Code review for Chapter 3, 15, and 16
– Create a single page with the following:
– Try CSS opacity hover
– Try JavaScript opacity hover (copy the code)
– A list of any kind
– Any variation of the “display” property (none, inline, inline-block, etc.)
– Create a navigation menu from a list and the “display” property.

Studio 05: HTML/CSS:
Complete Code review for Chapter 11 and 13
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image and practice positioning and margins.
— 2. Use the “box model”
— 3. Use pseudo classes

Studio 04: HTML + Intro to CSS
Read: 10.
Complete Code review for Chapter 10
HTML/CSS: Use the META tag to refresh and redirect

Studio 03: HTML Tables
Complete Code review for Chapter 7 and 8
Following the Table Demo: Create a table with mounted image and put text on top of the images in HTML

Studio 01: Set up and Intro to HTML
Code Work: Review Chapter 1, 2
Create a splash page for your web site (use anything you want) with an image and a link.

C. WordPress site. Installed and customized

D. Final Site (URL) AND a screen shot of your site

Studio 12: Final
Work on your final Deliverables
Try PHP includes
Try JavaScript redirect
Try the JavaScript tutorial

WDS 11: WP & PROCESS 11/14/17

INTRO:
Documentation due 11/14/17
Present in class (prototype and interface)!

Domain + Hosting:
Start migrating Homework to your server.
Install WP. Play!

REVIEW:
Chapter 9
– Review posting files to your server using FTP
– Make sure WordPress is installed and working on your server
– Explore WP. Change the theme, customize, post, play

To Swipe?
– WordPress does it for you
– More mobile me
jquery picks
ready to slide?
– How about forms? Examples
– Forms – Adding PHP and functionality.
Example
Download the code

NEW:
JS Redirect:
How to redirect?

STUDIO 11: WP and Final
Sources to Review:
– Intro to frameworks
Fluid Template
Responsive Designs
Start organizing tasks for you final development.

WDS 10: CSS Tricks + Process 11/07/17

REVIEW:
Make sure you have completed the following:
– Import and display fonts
– Try an image (Sprite) Roll-over (CSS)
– Try Inline Block, Instead of Float
– HTML5 Code (make sure you have tried it)
Process: Due Today
– User Experience
– Site map
– Wire Frames
– Prototype

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):
DELIVERABLE: User Scenarios, Usability maps, Competitive Analysis

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

Resources:
Sketches
Sketches 2
Digital
With annotations
With Annotations 2

PROTOTYPING:
Examples

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

HOSTING:
Buy a domain name AND hosting.
Look for Basic hosting, Linux (NOT WINDOWS)
Demo FTP and file upload

WORDPRESS:
– Install! First, need to get it
– A “how to”
WP customize
– More WP custom
– WP theme mods
– WP theme customization
– More WP tips

Studio 10:
Sources to Review:
More on the Hover
Advanced Hover effects
Zen Garden

PROCESS:
Work on your final Interface.
Documentation due 11/14/17
Present in class next week

HTML/CSS
Read Chapter 9
Start migrating Homework to your server.
Install WP. Play!

WDS 09: Advanced CSS + Process 10/31/17

REVIEW:
HOMEWORK (Show):
– Make sure you understand the “Z-index”. Try either example.
– Create a 2 Column layout using HTML/CSS
– Create a 3 Column layout using HTML/CSS
– Try CSS Drop down
– Try Media query (color change)

READING:
From Chapter 16, rollovers.
Why? Pseudo-classes work just fine…
JS tried and true, but sooooo 1999
Better but tricky (book, pg 418)
Something easier… Demo.
More Info

LAYOUT:
Inline vs float
Remember This? Try using the above instead

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

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):
DELIVERABLE: User Scenarios, Usability maps, Competitive Analysis

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

Resources:
Sketches
Sketches 2
Digital
With annotations
With Annotations 2

PROTOTYPING:
Examples

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

Studio 09: CSS/HTML
In Class:
– Import and display fonts
– Try an image (Sprite) Roll-over (CSS)
– Try Inline Block, Instead of Float
– HTML5 Code (make sure you have tried it)

Process: Due Next week.
Come in with completed:
– User Experience
– Site map
– Wire Frames
– Prototype

WDS 08: Lists, Menus, more CSS + Process 10/24/17

REVIEW:
Read: Chapter 12, 14, 17, and 18
Complete Code review for 12, 14, and 17.
Make sure you understand “Float” and “Clear”.
Review this EXAMPLE. Copy and customize!
Start Process Documentation:
– Start thinking about the site you want to build. Draft requirements.
– Who is the audience? Determine the target demographic.
– Based on Ch 18, start thinking about the kind of site you want to develop (Requirements). Answer questions on page 455.
What are you planning on developing??

READING:
Ch. 14
List styles
List images
Table Properties
Even the Cursor can change
Lists are important for drop down menus:
Drop, example. JS Basics.
Can do it in CSS as well
Pick your poison

Ch. 15
The power of “Z”. Download code – DEMO
What “Z” can do for you
2 column, and 3 column layout.
@import. + Layout example
But, when presented as a media rule: @media – used for different purposes:
Media Rules
– More Media info
Which leads to….
Ch. 12
– Can also import fonts
Can also use Google Fonts
Some Examples

Ch. 17
The old
The new
How it works
Older Browser?

Next Week: Favicons, AWD, RWD, M-sites, image roll-overs, Grids.

PROCESS:

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, Example 2 and a quick Usability Map
– Modeling the user experience: Design Document: Audience Scenarios, and Competitive Analysis.
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
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:
HTML prototype

DESIGN:
Deliverables: Interface in JPG

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

DEVELOPMENT (Actually building your site):
-Technical Production: Deliverables: Alpha Site
-QA: Testing. Deliverables: Bug List, Beta Site
-Launch: Deliverables: Final Site

Studio 08: More CSS + Drop downs
HOMEWORK (Show next week):
– Make sure you understand the “Z-index”. Try either example.
– Create a 2 Column layout using HTML/CSS
– Create a 3 Column layout using HTML/CSS
– Try a JS Drop down menu
– Try CSS Drop down
– Try Media query (color change)

IN CLASS: COMPLETE THE FOLLOWING
UX – Think about how users will interact with your site.
Create a preliminary user scenario AND/OR an Experience Map.
Create a Content Inventory and Preliminary Site Map (NO WIREFRAMES, YET)
Documentation due 11/14/17
Review at the END OF CLASS

WDS 07: Advanced CSS + Process 10/17/17

REVIEW:
Read: Chapter 3, 15, and 16.
Complete Code review for 3, 15, and 16
– Create a single page with the following:
– Try CSS opacity hover:
Opacity – roll over using JavaScript:
Try it using the CSS – hover property
– Try JavaScript opacity hover (copy the code)
– A list of any kind
– Any variation of the “display” property (none, inline, inline-block, etc.)
– Create a navigation menu from a list and the “display” property.

READING:
Ch. 15
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)
Best review
The power of “Z” and test code
Floaters
Float and Clear
Another explanation of the FLOAT
Example
Next Week: 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

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

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):
DELIVERABLE: User Scenarios, Usability maps, Competitive Analysis

SITE STRUCTURE
Deliverables: Site Inventory/Site Map,. Layout grids (Wire frames and HTML Prototype

PROTOTYPING:
HTML prototype

DESIGN:
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 Mid
A bit much

Studio 07: CSS and Process
Read: Chapter 12, 14, 17, and 18
Complete Code review for 12, 14, and 17.
Start Process Documentation:
– Start thinking about the site you want to build. Draft requirements.
– Who is the audience? Determine the target demographic.
– Based on Ch 18, start thinking about the kind of site you want to develop (Requirements). Answer questions on page 455.

WDS 06: MORE CSS 10/03/17

REVIEW:
Read: Chapter 11 and 13.
Complete Code review for 11 and 13
Create 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image and practice positioning and margins.
— 2. Use the “box model”
— 3. Use pseudo classes
— Did you implement “External CSS”? If not, Convert your pages to External CSS.
Show us!!

READING:
Review CSS priorities
Demo – Google > Developer Tools
Old Web Emulator

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

Ch. 13
Make sure you are familiar with this.
And, you did all of these…
display /BlockInline

Studio 06: CSS Review
HTML/CSS:
Read: Chapter 3, 15, and 16.
Complete Code review for 3, 15, and 16
– Create a single page with the following:
– Try CSS opacity hover
– Try JavaScript opacity hover (copy the code)
– A list of any kind
– Any variation of the “display” property (none, inline, inline-block, etc.)
– Create a navigation menu from a list and the “display” property.

WDS 05: CSS 09/26/17

INTRO:
Read: 10.
Complete Code review for 10
HTML/CSS: Use the META tag to refresh and redirect

REVIEW:
Ch. 10.
CSS in Action!
CSS parts
CSS Propertes
CSS Selector
The box
Pseudo class
External CSS. Here is how
Class, ID and Grouping Book, pg. 238.
Cascading – Book, pg. 239.
CSS priorities

Studio 05: HTML/CSS:
Read: Chapter 11 and 13.
Complete Code review for 11 and 13
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image and practice positioning and margins.
— 2. Use the “box model”
— 3. Use pseudo classes

1 2 3 8