Category Archives: WDS

WDS 11: WordPress, Tips & Tricks 2 – 11/11/16

INTRO:
Try the JS redirect. Show next week. Example (try in mobile)
Read Chapter 19

READING:
– Some helpful SEO resources
– More on Google Analytics

To Swipe?
– WordPress does it for you
– More mobile me
jquery picks
ready to slide?
– How about forms? Examples

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 11: WordPress
Sources to Review:
– Intro to frameworks
Fluid Template
Responsive Designs

Assignment:
– Make sure WordPress is installed and working on your server (Follow instructions above)
– Explore WP. Change the theme, customize, post, play
– Have you started organizing your Final Project?

WDS 10: TIPS & TRICKS 11/04/16

INTRO:
– Import and display fonts (Show)
– Try an image Roll-over (javascript or CSS) (Show)
– HTML5 Code (make sure you have tried it) (Show)
– Try a Favicon (Show)
– RWD tutorial
Start Working on your Final – Planning

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.

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

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

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

Studio 04:
Mount an image in a table. Put text in certain table cells.

Studio 05:
– 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

Studio 06:
– Try :first child selector
– Try External CSS
– Try CSS opacity hover

Studio 07:
Make sure you understand “Float” and “Clear”.
Review this EXAMPLE. Copy and customize! (Show next Week)

Studio 08:
– 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 09:
– Import and display fonts
– Try an image Roll-over (javascript or CSS)
– HTML5 Code (make sure you have tried it)
– Try a Favicon
– RWD tutorial

Studio 10:
Try the JS redirect

C. Final Site (URL)

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

HTML/CSS
Try the JS redirect. Show next week.
Read Chapter 19

WDS 09: CSS Advanced – 10/28/16

INTRO:
Present your Midterm. Turn them in.

READING:
Chapter 12
– Can also import fonts
Can also use Google Fonts
Some Examples

From Chapter 16, rollovers.
JS tried and true.
Better but tricky
Something easier…
What’sdisplay block”?

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

FAVICON:
FAViSize
Flavor FAVicon
Favicon generator

RWD:
More Media Rules

Studio 09: CSS/HTML
Read: Chapter 9
Complete Code review for 9
In Class:
– Import and display fonts
– Try an image Roll-over (javascript or CSS)
– HTML5 Code (make sure you have tried it)
– Try a Favicon
– RWD tutorial
Start Working on your Final – Planning

WDS 08: Lists – Interactive Menus 10/21/16

REVIEW:
Complete Code review for 3, and 14
CSS/HTML
Make sure you understand “Float” and “Clear”.
Review this EXAMPLE. Copy and customize! (Show)
Make up work from last week (Show)

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

Studio 08: More CSS + Drop downs
IN CLASS: COMPLETE THE FOLLOWING
– 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)

READ: Ch 12, and 17
Complete Code review for 12, and 17

Process and Design:
MID TERM: Process documentation due next class – Friday, October 28th.
Examples:
Mid-term:
Mid
Mid

WDS 07: Advanced CSS 10/14/16

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

Make sure all PROCESS deliverables are accounted for.
MID TERM: Process documentation due on Friday, October 28th.

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

Studio 07: Advanced CSS
Sources to Review:
– More about the “Z”
Flaunt it
3 columns
more 3s

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

CSS/HTML
Make sure you understand “Float” and “Clear”.
Review this EXAMPLE. Copy and customize! (Show next Week)

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