Category Archives: WDS

WDS 14: Final Presentation 04/30/18

FINAL DELIVERABLES:
A. The Development Process Documents (This was your midterm. Make sure you include a link to your Prototype + interface): Did you turn it in?? Make sure.

B. Homework Assignments.

Studio 11
CREATE: 1 HTML/CSS page. Include:
– multiple columns (2 or 3)
– Use @import for CSS and Fonts
– try a simple media rule
– try a CSS drop-down menu
– UPLOAD TO YOUR SERVER

Studio 07
HOMEWORK:
– Make sure you understand the “Z-index”. Try either example.
– Try the Float and Clear Examples
– Try CSS Dropdown

Studio 06
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
– Place background image and practice positioning and margins.
– Use external CSS
– Try CSS opacity hover
– Boxes of all types
– Display: Inline/Block
– Example

Studio 05
Catch up on Assignments
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image with CSS.
— 2. Use the “box model”
— 3. Use pseudo-classes

Studio 04:
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image with CSS.
— 2. Use the “box model”
— 3. Use pseudo-classes

Studio 02:
– 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.

Studio 01:
Create a splash page for your website (use anything you want) with an image and a link.

PROVIDE A LINK TO HOMEWORK

C. WordPress site. Installed and customized (Include a link if this is not your final site)

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

Please do not forget to fill out a course survey. Have a great summer!

WDS 13: Final Projects 04/23/18

Work on your Final Projects. Alpha due today at 3 PM. What is “Alpha”?
Typically, software goes through two stages of testing before it is considered finished. The first stage, called alpha testing, is often performed only by users within the organization developing the software. The second stage, called beta testing, generally involves a limited number of external users. Think of your final as a “Beta” release.

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

B. Homework Assignments.

Studio 11
CREATE: 1 HTML/CSS page. Include:
– multiple columns (2 or 3)
– Use @import for CSS and Fonts
– try a simple media rule
– try a CSS drop-down menu
– UPLOAD TO YOUR SERVER

Studio 07
HOMEWORK:
– Make sure you understand the “Z-index”. Try either example.
– Try the Float and Clear Examples
– Try CSS Dropdown

Studio 06
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
– Place background image and practice positioning and margins.
– Use external CSS
– Try CSS opacity hover
– Boxes of all types
– Display: Inline/Block
– Example

Studio 05
Catch up on Assignments
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image with CSS.
— 2. Use the “box model”
— 3. Use pseudo-classes

Studio 04:
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image with CSS.
— 2. Use the “box model”
— 3. Use pseudo-classes

Studio 02:
– 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.

Studio 01:
Create a splash page for your website (use anything you want) with an image and a link.

C. WordPress site. Installed and customized (Include a link if this is not your final site)

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

WDS 12: Final Projects 04/16/18


CREATE: 1 HTML/CSS page. Include:
– multiple columns (2 or 3)
– Use @import for CSS and/or Fonts
– try a simple media rule
– try a CSS drop-down menu
EXAMPLE

REVIEW:
All about favicons.

STUDIO 12:
FINAL DELIVERABLES:
A. The Development Process Documents (This was your midterm. Make sure you include a link to your Prototype + interface):

B. Homework Assignments.

Studio 11
CREATE: 1 HTML/CSS page. Include:
– multiple columns (2 or 3)
– Use @import for CSS and Fonts
– try a simple media rule
– try a CSS drop-down menu
– UPLOAD TO YOUR SERVER

Studio 07
HOMEWORK:
– Make sure you understand the “Z-index”. Try either example.
– Try the Float and Clear Examples
– Try CSS Dropdown

Studio 06
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
– Place background image and practice positioning and margins.
– Use external CSS
– Try CSS opacity hover
– Boxes of all types
– Display: Inline/Block
– Example

Studio 05
Catch up on Assignments
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image with CSS.
— 2. Use the “box model”
— 3. Use pseudo-classes

Studio 04:
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image with CSS.
— 2. Use the “box model”
— 3. Use pseudo-classes

Studio 02:
– 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.

Studio 01:
Create a splash page for your website (use anything you want) with an image and a link.

C. WordPress site. Installed and customized (Include a link if this is not your final site)

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

WORK on your final

WDS 11: WordPress + Final Details 04/09/18

REVIEW:
Make sure you understand previous chapters.

Domain + Hosting:
Practice using FTP – Start migrating Homework to your server.
Install WP. Play!

READING:
Ch. 9.
Example

Ch. 16
Images

Ch 14
More Lists.
Leads to Drop-down menu

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

Work on your Final
Fluid Template
Responsive Designs

STUDIO 11: WordPress + Final
Sources to Review:
More on the Hover
Advanced Hover effects
Zen Garden

CREATE: 1 HTML/CSS page. Include:
– multiple columns (2 or 3)
– Use @import for CSS and Fonts
– try a simple media rule
– try a CSS drop-down menu
– UPLOAD TO YOUR SERVER

Start working on your final
– How to start?

WDS 10: JUST CSS3 04/02/18

REVIEW:
Read: Chapter 3, 14, and 15.
Complete Code review for 3, 14, and 15
HOMEWORK:
Watch Video
– Make sure you understand the “Z-index”
– Try the Float and Clear Examples
– Try CSS Drop down

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

DOMAIN + HOSTING
So many options.
– Hosting: Linux (not Windows), Basic (don’t spend more $ than you have to)
– Time Period: 3 months – a year
– WRITE everything down. User name and passwprds in particular.
– Make sure you have an FTP client (software)

STUDIO 10:
– Get Domain + Hosting
– FTP Demo.
– Practice
Read: Chapter 15, 12, and 17.
Complete Code review for 15, 12, and 17

WDS 09: Documentation Due – Process Document. 03/26/18

Process:
Modify wire frame
Create an HTML Prototype
– Revise Wireframes and Prototype
– Create site interface design.
– Mid-term due next TODAY @ 4PM

Document should consist of your process work, including:
1. Requirements: what is it? why? who is the site for?
2. Usability: user scenarios and/or experience maps
3. Competitive Analysis: Similar sites
4. Sitemap
5. Wire Frames + Prototype
6. Interface Design:
7. Outstanding issues

Mid
Mid
Mid

WDS 08: Advanced CSS2 03/19/18

REVIEW:
Read: Chapter 3, 14, and 15.
Complete Code review for 3, 14, and 15
HOMEWORK:
Watch Video
– Make sure you understand the “Z-index”
– Try the Float and Clear Examples
– Try CSS Drop down

Process:
Modify wire frame
Create an HTML Prototype
Present 0n 03/19/18
Documentation due 03/26

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

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

Mid-term:
Mid
Mid
Mid

STUDIO 08: PROCESS
– Revise Wireframes and Prototype
– Create site interface design.
– Mid-term due next week @ 4PM

WDS 07: Advanced CSS + Process 03/12/18

REVIEW:
HTML/CSS:
Read: Chapter 11 and 13.
Complete Code review for 11 and 13
In Class:
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
– Place background image and practice positioning and margins.
– Use external CSS
– Try CSS opacity hover
– Boxes of all types
Display: Inline/Block

Process:
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
Create a preliminary wire frame
Present 0n 03/12/18
Documentation due 03/26

READING:
Read: Chapter 3, 14, and 15.
Complete Code review for 3, 14, and 15

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

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 07: CSS Review
Read: Chapter 3, 14, and 15.
Complete Code review for 3, 14, and 15
HOMEWORK:
– Make sure you understand the “Z-index”. Try either example.
– Try the Float and Clear Examples
– Try CSS Drop down

Process:
Modify wire frame
Create an HTML Prototype
Present 0n 03/19/18
Documentation due 03/26

WDS 06: MORE CSS 02/26/18

REVIEW:
PROCESS: Requirements.
What are you building? Why? What for? For who?
Read Chapter 18: Use the Questions on page 455 as a starting point.
Catch up on Assignments
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image with CSS.
— 2. Use the “box model”
— 3. Use pseudo classes

READING:
Ch. 10
External CSS. Here is how
Class, ID and Grouping Book, pg. 238.
Cascading – Book, pg. 239.
Review CSS priorities
Demo – Google > Developer Tools
Old Web Emulator

Looking Ahead:
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

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: Examples
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 06: CSS Review
HTML/CSS:
Read: Chapter 11 and 13.
Complete Code review for 11 and 13
In Class:
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
– Place background image and practice positioning and margins.
– Use external CSS
– Try CSS opacity hover
– Boxes of all types
Display: Inline/Block
Example

Process:
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
Create a preliminary wire frame
Present 0n 03/05/18
Documentation due 03/26

WDS 05: CSS 02/19/18

INTRO:
Previous Class
Read: 10.
Complete Code review for 10

REVIEW:
Ch. 10.
CSS in Action!
CSS parts
CSS Propertes
CSS Selector
The box
Pseudo class

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

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 05: HTML/CSS:
PROCESS: Requirements.
What are you building? Why? What for? For who?
Read Chapter 18: Use the Questions on page 455 as a starting point.
Catch up on Assignments
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image with CSS.
— 2. Use the “box model”
— 3. Use pseudo classes

1 2 3 9