All posts by admin

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

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

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

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
Simple examples (wireframes + sitemap)
Wireframes + HTML
Software Development Prototypes

Read the following articles
Visual Narrative
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

IDES 322 04: 02/18/14: UX and Wireframes

Process – User Experience Maps/Site Maps.

User experience/wireframes
UX diagram examples
Sketches 2
With annotations
With Annotations 2

Sources to Review:
From smashingmagazine
Free wireframing tools

Read the following articles
Beyond Wireframes
UX case study
The Importance of the Wireframe
Wireframe your site

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.

IDES 322 03: 02/11/14 Web Dev Process

What is virtual Space?

“The Virtual Space Theory is a body of principles proposing a consistent and systematic understanding of the idea of virtual space, particularly with respect to its uses and occurrences in visual media, art, and architecture.”

Read This:
Virtual Space is as old as art.
960 Grid
t960 upgrade
the new 1024×768?
Above the fold
And Adaptive, too

What process? Why do we need it?
the bad, worse, just plain ugly

The Development Process:
– Research/sketches : – DELIVERABLE: Requirements Doc
– Anticipating end-user scenarios: Example, Example2
– Modeling the user experience: Deliverable: Design Document: Audience Scenarios, and Competitive Analysis. Many examples to consider and all are different.
– Functional Specifications: Deliverable: Functional Specifications.
-Generating schematic wireframes for key interfaces and interactions: Deliverables: Site Inventory/Site Map,. Layout grids (Wire frames)
-Designing the visual interface: Deliverables: Template mock-ups in PSD or IA., Web based prototype
-Invite feedback/user testing: Deliverable: Feedback
-Technical Production: Deliverables: Alpha Site
-QA: Testing. Deliverables: Bug List, Beta Site
-Launch: Deliverables: Final Site

Sources to Review:
Read This
Experience Maps
Wireframes Mag
UX for gamers
Dummy text with a twist

Studio 03: Web Development Process and UIX
Read Articles above. We are focusing on Usability and Usability Mapping today.
Practice UIX and documentation:
– 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.

IDES 322 02: 02/04/14: HTML

Read This:
Review Assignment
Review tutorial
Review basic (pre CSS) HTML. – tables/tags etc. Why? Cutting design
Design. Photoshop, illustrator. Cutting and mounting images – Review

Free FTP
CSS Schools

Hand Coding:
4 more pages. Play with text and color (try backgrounds, etc)
Create a table.
Mount a large picture in your table (cut up)
Upload to your site and send me the URL.