Category Archives: WDS

WDS 06: More CSS 10/07/16

REVIEW:
HTML/CSS:
Complete Code review for 11 and 13
– Try Meta tag, refresh and redirect
– 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)

READING:
Chapter 10
External CSS. Here is how

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

Class, ID and Grouping Book, pg. 238.
Cascading – Book, pg. 239.
CSS priorities

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.

PROCESS:
By this point, you should have:
1. Requirements
2. Usability (user scenarios, usability maps)
3. Competitive Analysis
4. Site Map
5. Wire Frames
6. Prototype

Next step: Interface Design. Create your design for Home page and a second level page.
This is the end point after a complete cycle (UI-wireframes-design).

Studio 06: CSS Review
HTML/CSS:
Read: Chapter 15, and 16.
Complete Code review for 15, and 16
– Try :first child selector
– Try External CSS
– Try CSS opacity hover
PROCESS: Interface design. Home page + second level (key pages)

WDS 05: CSS Intro 09/30/16

REVIEW:
Start reviewing Grid Systems
Complete Code review for 10
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

Chapter 10
INTRO TO CSS:
CSS in Action!
CSS Intro
CSS parts
CSS Propertes
CSS Selector
The box
Pseudo class

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

Studio 05: Prototype revisions – CSS:
HTML/CSS:
Read: Chapter 11 and 13.
Complete Code review for 11 and 13
– Try Meta tag, refresh and redirect
– 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)

WDS 04: Process 2 + Tables 09/23/16

INTRO:
Web Development Process and UIX
Complete Code review for 7 and 8
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
– Create a Site Map for the site. Start with content inventory. Think through Mobile options for your final development
– Try creating a table in Photoshop like the Demo in class

REVIEW:
7. Forms – Practice formatting.
Adding PHP and functionality.
Example
Download the code

8. Extra Markup
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

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:
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.
You need a strategy

Studio 04: Web Development Process- Wire Framing and Prototype
Sources to Review:
Start reviewing Grid Systems

Read: 10.
Complete Code review for 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

WDS 02: HTML + Intro Process 09/09/16

INTRO:
Review Studio Assignment –
1. Read Chapter 1,2
2. Code Work: Review 1, 2
3. Create a splash page for your web site (use anything you want) with an image and a link. Example?
Show HTML in class

READING REVIEW:
HTML is a hierarchy.
Attributes
HTML Summary
All the tags
HTML Summary 2
Good resource
Looking Ahead:
Links
Images
Tables

Hosting:
Mike Carroll
info@customnetdesign.com

FTP: TEST Demo
H: csshtml.comoj.com
U: a5842899
P: cucuta70

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

Studio 02: HTML and Process
Read: Chapter 18 – Process and Design, 4, 5, and 6.
HTML: Try out all the code samples: 4, and 5 and 6.
Based on Ch 18, start thinking about the kind of site you want to develop (Requirements). Answer questions on page 455.

WDS 13: Final

Present final projects in class.

Deliverables – Please send the following:
1. Link to your final project
2. Link to your WordPress*
3. Link to your homework
4. Take a screen shot of your Final. Send it along

Course Evaluations:
DAAT 222 01 Web Design Studio
Juan M. Parada

WDS 12: Work on Final – 04/22/16

Welcome to the last chance saloon.
To get help, put your code on your server, send me the link…

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

ASSIGNMENT: FINAL DELIVERABLES!!

WDS 11: TIPS AND TRICKS PART 2- 04/08/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

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

WDS 10: Tips and Tricks Part 1 04/01/16

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

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

WDS 09: WorPress + CSS, advanced Code 03/25/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
Install WordPrass on your server. Start playing around with the platform and customize.

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

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 03/18/16

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

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)
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:
We use this. Install?
WP customize
– More WP custom
– WP theme mods
– WP theme customization
– More WP tips

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 WordPrass on your server. Start playing around with the platform and customize.