All posts by admin

CE 2411 03: Links, Extra Markup/Into to CSS – 06/16/14

INTRO:
Review HW: Talk about your Final (proposal emailed to me)
Review Site maps and wireframes.
Add more structural and semantic HTML to your pages (I will review. Email to me)

PROTOTYPING:
Examples
Software development prototypes (built in HTML)
The interface

INTERFACE ON THE WEB:
Virtual Space is as old as art.
Stats for size
960 Grid
t960 upgrade
Stats for Browser

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 10, 13
Revise IA and Wireframes based on feedback
Build out your Site prototype using your final wire frames.
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
4. Include Declaration and metatags (refresh and redirect)

IDES 322 Final Deliverables

FINAL PROJECT DUE: April 29, 2014. We will review final sites in class (1PM)

What will you be delivering?

A. The Development Process Documents (posted on your blog):

B. Homework Assignments.

Assignment 11: Meta tags:
Play with meta tags.
Add meta tags to your site.
Try refresh and redirect

Assignment 10: WordPress Workshop 2
Make a favicon, install it
customize your WP blog. Put all assignments here
Work on Final. Design and development

Assignment 09: WordPress
Install WordPress on your server.
Play around with the themes
Play around with customizing your blog using the editing function
Show results next class

Assignment 08
This is a great resource for you to review AFTER completing the assignment below:
1. Make roll-overs without images
2. Make roll-overs WITH images
3. Make an image with a drop shadow
4. Create a rollover using the “opacity” index
5. Try setting up a drop down menu

Assignment 07:
Create your own Buzz Aldrin page, using css to place background image, box model, and pseudo classes (lnks, etc)
Create a 3 column web page using CSS
Create multiple web pages linked to an external CSS file. Use IDs and classes.

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

Assignment 05: Web Design:
Start designing your templates based on the wireframes (create at least a home page and Second level)
We will critique as a group next week

Assignment 04:
You should have: Requirements, User Scenarios, Usability maps, Site map (Site inventory).
Now, Create wireframes your web site (home+ top level + second level). Start with sketches.
Work on your HTML Prototype
Post to your server.

Assignment 03: Web Development Process and UIX
– Start thinking about your portfolio site. 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.
Upload to your site and send me the URL.

Assignment 02: HTML
4 more pages. Play with text and color (try backgrounds, etc)
Create a table.
Mount a large picture in your table (cut up)

Assignment 01: HTML
Create a splash page for your web site (use anything you want).

C. Customized WordPress site (URL*)

D. Mobile Site (URL*)

E. Final Site (URL*)

URL* – These deliverables can be one single URL IF your final is on the WP platform.

IDES 322 11: 04/15/14 – WordPress + Mobile

Last Week:
– 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? My code Example. Screen Shot on iPhone
– WordPress does it for you
– More mobile me
jquery picks
ready to slide?

Assignment 11: Mobile Workshop
Create a sub domain optimized for Mobile devices. Test it on iPhone and Android
Create mobile specific site
Try a WP mobile plugin for your blog
Work on Final. Documentation + Design + Development

IDES 322 10: 04/08/14 – WordPress Customization + tricks

In Class:
WP customization:
Review Favicon creation and installation
Review WP customization

Read the following articles
FAViSize
Flavor FAVicon
Favicon generator
WordPress magic
WP customize
– More WP custom
– WP theme mods
– WP theme customization
– More WP tips

Assignment 10: WordPress Workshop 2
Make a flavicon, install it
customize your WP blog. Put all assignments here
Work on Final. Design and development

IDES 322 09: 04/01/14 CMS- Intro to WordPress

CSS Assignment from last week should be up on your server. Review in class
You should have a basic grasp of CSS by this point
Keep practicing. Try Lynda

Introduction to WordPress
Uses a database and PHP
WordPress the platform, not to be confused with wordpress.com
Install?
Salt?

Assignment 08: WordPress
Install wordpress on your server.
Play around with the themes
Play around with customizing your blog using the editing function
Show results next class

IDES 322 08: 03/25/14 CSS Tricks

CSS: Roll-Overs
Read the following articles
CSS moves
Rollovers of all types
About the “z”

In Class:
RGB color – background: rgba(x,x,x,x)
Review roll-overs without images. Opacity and “z” index plus other goodies

Assignment 08
This is a great resource for you to review AFTER completing the assignment below:
1. Make roll-overs without images
2. Make roll-overs WITH images
3. Make an image with a drop shadow
4. Create a rollover using the “opacity” index
5. Try setting up a drop down menu

IDES 322 07: 03/18/14: Continue CSS

In Class:
External CSS, how to and why we do it this way
ID and Class
Introduction to 3 columns

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

Assignment:
Create your own Buzz Aldrin page, using css to place background image, box model, and pseudo classes (lnks, etc)
Create a 3 column web page using CSS
Create multiple web pages linked to an external CSS file. Use IDs and classes.

IDES 322 06: 03/04/14: Intro to CSS

Review HW: UX Map, Prototype, Web page Design.
Ok, before we start…
Structure and style.
CSS, – go over basics
CSS Intro
CSS parts
CSS Properties
CSS Selector reference
The box. What’s a DIV?
Pseudo class

Sources to Review:
Need HTML first
Validate your site
Good Intro
CSS tutorial

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

IDES 322 05: 02/25/14: Interface Design

Review Homework:
– Review Prototypes

Inventory: you have UX maps, site map, Wireframes, and
PROTOTYPE:
Simple examples (wireframes + sitemap)
Wireframes + HTML
Software Development Prototypes

Read the following articles
Visual Narrative
Layout
Design Method
960 grid

Web Design:
Start designing your templates based on the wireframes (create at least a home page and Second level)
We will critique as a group next week