Category Archives: WDS

WDS 01: Introduction 09/04/15

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

Software:
Editors – BBEdit, TextWrangler
A new one, Brackets
FTP

Introduction:
Review Syllabus
HW assignments – Examples
1- Sample Student Website
2 – Sample
3 – Sample
4 – Sample
5 – Sample

Read This:
The world has changed
We all need a process – but none are set in stone

Structure:
DNS – What is it?
IP Address

Practice:
Real-time editor
W3
HTML Elements
HTML Attributes
– Setting up a development environment
– Uploading files to a server
– Testing uploads
– Server basics/HTML

Links:
Hosting and then there is always FREE
CSS Schools
Stacks

Studio 01: Set up and Intro to HTML
Buy a domain name and server space (hosting)
Set up your server and upload a file.
– Test file upload
Read Chapter 1,2
Code Work: Review 1, 2 – Practice (create several HTML files)
Upload HTML files to your server. Verify.

MMDI 202 14: Preparation for Finals 12/01/14

INTRO:
– Play around with customizing your blog using the editing function.
– Show results next class
– Make a flavicon, install it
– customize your WP blog. Put all assignments here (Next week, I will produce the HW list)
– Work on Final. Design and development

Read the following articles/resources
– Some Basics
Mobile Site Bible
To Swipe?
– Sub-domain
How to redirect?. More than 1 way
– WordPress does it for you
– More mobile me
jquery picks
ready to slide?

Assignment 14: Mobile Workshop
Crate a redirect from a mobile device
Work on Final. Documentation + Design + Development
Course Faculty Evaluation Form 1415 Instructions
Course Number MMDI 202: Web Design Studio

MMDI 202 13: WordPress Customization 11/24/14

INTRO:
Make a favicon, install it
WP: Play around with the themes
Play around with customizing your blog using the editing function.
Show results next class

Class:
– Some helpful SEO resources
WP customize
– More WP custom
– WP theme mods
– WP theme customization
– More WP tips

Assignment:
Final WP customization
All HW on WP (List provided in Afternoon session)
Work on your final

Final Deliverables:
1. Final Web Site (+ Documentation/Process) – Please provide all of your Final Site files (HTML + CSS +Images) as a .zip file.
2. WordPress Site

HOMEWORK
10: Mobile redirect

09:Final WP customization
Put all HW on WP

08: Make a favicon, install it

07: Practice – Image alignment
Practice – Roll-overs and sprites

06: Practice- create tables and try all the attributes in Ch. 6
Practice modifying Cursors
Practice opacity, Z-index, drop down menu using lists, and drop shadows.

05: Create your own HTML/CSS site with multiple pages, using external CSS
Practice all list elements
Create a 3 column web page using CSS

04: Use external CSS
Practice tables (create an image mounted in a table, create other table structures including ‘colspan’ and ‘rowspan’).
Put text on top of your image/images in your table using the background image capability in HTML tables)

03: CSS: Create your own mini web site (at least 3 pages), using css to complete the following on each page:
1. place background image,
2. Use the “box model”
3. Use pseudo classes

02: DOCUMENTATION and PROCESS
– Start thinking about the site you want to build. Draft requirements.
– Who is the audience? Determine the target demographic and create preliminary user scenarios.
– Create User experience maps for your site
– Create a Site Map for the site. Start with content inventory.
– Create wireframes for several pages of your website (home+ top level + second level). Start with sketches. Post to your server.
– Create an HTML prototype with your wireframes
– Create template interface design, 3 levels (HOME + 2 sub pages)

01: HTML: Create a splash page for your web site (use anything you want) Example?
– Use HTML and images.
– Create links to multiple pages both internal and external (what does this mean?)
– Create a link to your email address for contact
– Add more structural and semantic HTML to your pages. Try all new HTML introduced in Chapters 1 and 2

MMDI 202 12: HTML5 + WordPRess 11/17/14

INTRO:
Practice – Image alignment
Practice – Roll-overs and sprites

READING:
HTML5
The old
The new
What about those older browsers?

Introduction to WordPress
Uses a database and PHP
WordPress the platform, not to be confused with wordpress.com
WordPress magic
WP customize
– More WP custom
– WP theme mods
– WP theme customization
– More WP tips

Extras:
FAViSize
Flavor FAVicon
Favicon generator

Assignment:
Review Ch 17
Make a favicon, install it
WP: Play around with the themes
Play around with customizing your blog using the editing function. Put all assignments here.
Show results next class
Review Ch. 19
Work on Final. Design and development

MMDI 202 11: IMAGES/CSS 11/10/14

INTRO
Practice- create tables and try all the attributes in Ch. 6
Practice styling Forms
Practice modifying Cursors
Practice opacity, Z-index, drop down menu using lists.

READING
Examples of Drop down menu
Adding images is easy
Review “figure” and title=””
Sizes in CSS
Alignment
Centering
All the different background image insertions
The lowly roll over
Rollovers and all their parts
Put it all together
Great Examples

ASSIGNMENT
Review 5, 16
Practice – Image alignment
Practice – Roll-overs and sprites
Final Design: Work on the final changes to your interface. Start working on your final Project.
Read Ch 17, 19

MMDI 202 10: CSS/Tables 11/03/14

INTRO:
CSS:
Create your own HTML/CSS site with multiple pages, using external CSS
Practice all list elements
Create a 3 column web page using CSS

READING:
Basic structure
Headings
Spanning columns and rows
Long Tables
Oldies but goodies
Ch. 14
List styles
List images
List positioning and shorthand
Table Properties
Even the Cursor can change
Ch 15
960.gs
z-index, and some examples of opacity, z-index and lists in drop down menus
3 columns

ASSIGNMENT:
Review 6, 12, 14
Practice- create tables and try all the attributes in Ch. 6
Practice modifying Cursors
Practice opacity, Z-index, drop down menu using lists, and drop shadows.
Read Chapter: 5, 16

MMDI 202 09: Continue CSS 10/27/14

INTRO:
Convert your mini site – to an external CSS
Practice tables (create an image mounted in a table, create other table structures including ‘colspan’ and ‘rowspan’). Put text on top of your image/images in your table using the background image capability in HTML tables)
Review

Read the following articles
Float it
Flaunt it
3 columns
more 3s

Assignment:
Review 3, 13
Read Chapter 6, 12, 14
CSS:
Create your own HTML/CSS site with multiple pages, using external CSS
Practice all list elements
Create a 3 column web page using CSS

MMDI 202 08: CSS and Box Models 10/20/14

INTRO:
Create your own mini web site (at least 3 pages), using css to complete the following on each page: Example
1. place background image,
2. Use the “box model”
3. Use pseudo classes

READING:
Best examples
CSS Rules
External CSS. Here is how
Class, ID and Grouping
CSS priorities
Tables – Review

Assignment:
Review 10, 13
Read: Chapter 3, review 13
CSS:
Convert your mini site – to an external CSS
Practice tables (create an image mounted in a table, create other table structures including ‘colspan’ and ‘rowspan’). Put text on top of your image/images in your table using the background image capability in HTML tables)

MMDI 202 07: Links, Extra Markup

INTRO:
Review HW: Interface/Proto, etc
Add more structural and semantic HTML to your pages (I will review. Email to me)

READING:
HTML is depends on file structure
HTML is depends on file paths
Examples,
Ch4 – Summary
Chapter 8
Meta basics – Here are EXAMPLES
Meta from Google
Meta today
Special Characters, Escape
Example
Ch8, Summary

INTRO TO CSS:
CSS Intro
CSS parts
CSS Propertes
CSS Selector
The box
Pseudo class

Assignment:
Review 4, 8
Create HTML pages using all the new tags above. Pay close attention to anchors using the “id” attribute, iframes and the Meta tag functionality I introduced in class.
Read: Chapter 10, 13
CSS:
Create your own mini web site (at least 3 pages), using css to complete the following on each page: Example
1. place background image,
2. Use the “box model”
3. Use pseudo classes

MMDI 202 06: Links, Extra Markup/Into to CSS

INTRO:
Review HW: Interface/Proto, etc
Add more structural and semantic HTML to your pages (I will review. Email to me)

READING:
HTML is depends on file structure
HTML is depends on file paths
Examples,
Ch4 – Summary
Chapter 8
Meta basics – Here are EXAMPLES
Meta from Google
Meta today
Special Characters, Escape
Example
Ch8, Summary

INTRO TO CSS:
CSS Intro
CSS parts
CSS Propertes
CSS Selector
The box
Pseudo class

Assignment:
Review 4, 8
Read: Chapter 4, 8
Revise Wireframes prototype and Interface based on feedback
CSS: