Category Archives: WDS

WDS 04: Into to CSS 02/12/18

INTRO:
Read: 4, 5, and 6.
Code Review?
Create the following:
– At least 3 HTML pages set up in Parent, Child, and Grandchild directories.
– Use the “id” attribute, to link to “top”
– Use the “id” attribute to link to a specific section on another page.
– Use the link attribute, to generate a new page (link to a new page or tab)
– Mount a large image in an HTML table using Photoshop. Next, put text over the image as demonstrated in class.*

AT THIS POINT, YOU SHOULD BE ABLE TO BUILD HTML PAGES WITH TABLES.

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

REVIEW:
7. Forms – Practice formatting.
Code review for 7

8. Extra Markup
Code review for 8.
Review types of HTML
ID and Class, Declaration or “Doctypes”
Comments are useful.
Be very clear on Block and Inline elements
iframes are everywhere.
Meta basics – Here are EXAMPLES
Meta from Google
Meta today
Special Characters, Escape
Ch8, Summary

Studio 04: HTML + Intro to CSS
Class Project:
HTML/CSS:
– Create HTML pages with iframes, examples of block and inline elements, specifically “div” and “span” and a sample form (no PHP)
– Use the META tag to refresh and redirect
Read: 10.
Complete Code review for 10

WDS 02: HTML – Semantics to Tables 01/29/18

INTRO:
Read Chapter 1,2
Code Work: Review 1, 2 – Practice (create several HTML files)
Try the W3 HTML Tutorial
Create a splash page for your web site (use anything you want) with an image and a link. Example?

How to organize your HW

READING REVIEW:
Talk about Version Control
HTML is a hierarchy.
Attributes
HTML Summary
All the tags
HTML Summary 2
Good resource
Looking Ahead:
Read: 4, 5, and 6.
HTML: Try out all the code samples: 4, and 5 and 6. I want to see tables in particular.

Links
– HTML link attributes
– Ch4 – Examples,
HTML is depends on file paths pg. 11
Path demo. Should end up at this LINK. You can also download the files
E-mail link magic
Images
Tables
– Tables: Basic
– Tables: Colspan, Rowspan
Table: Photoshop Demo
HTML and the background image
Tables: background attribute

Studio 02: HTML Tables
Read: 4, 5, and 6.
HTML: Try out all the code samples: 4, and 5 and 6.

Class Project:
1. Read the chapters above
2. Create the following:
– At least 3 HTML pages set up in Parent, Child, and Grandchild directories.
– Use the “id” attribute, to link to “top”
– Use the “id” attribute to link to a specific section on another page
– Use the link attribute, to generate a new page (link to a new page or tab)
– Mount a large image in an HTML table using Photoshop. Next, put text over the image as demonstrated in class.

WDS 01: Introduction 01/22/18

Introduction:
Review Syllabus:

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

HW assignments – Example 1

Mid-term:
Mid
Mid
Mid
A bit much

Prototype: Example

Sample Work:
1- Sample Student Website
2 – Sample
3 – Sample
4 – Sample

WordPress
WP as a Final

Storage:
– USB Drive/ external Drive
– Pad or notebook + pen/pencil

Software:
Editors – BBEdit, TextWrangler
Brackets
My new favorite
FTP

Practice:
Real-time editor
W3
HTML Elements
HTML Attributes
– Setting up a development environment
– Testing code
– Version control
– Introduction to HTML

Studio 01: Set up and Intro to HTML
Read Chapter 1,2
Code Work: Review 1, 2 – Practice (create several HTML files)
Try the W3 HTML Tutorial
Create a splash page for your web site (use anything you want) with an image and a link. Example?
We will review at the end of class.

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