Art 39540 3EF Design for the Web 1

Weekly Topics Outline

Week 1 What is the Web? Looking at content, design, writing (X)HTML.

Types of web sites: blogs, wiki, e-commerce, portals, rich media, informational. Internet vs. Web, servers and browsers, What is hypertext? What is a markup language? Front-end vs. back end. URL and web protocols. Browser issues, browser stats. Accessibility guidelines. Quick intro to HTML. Copyright issues.

Week 2 CSS review continued. The Color Box Method.

Writing a basic HTML page.
Document structure in HTML, basic (X)HTML tags and semantic markup. Doctypes, blocklevel elements, creating containers/boxes for the structured elements. Naming conventions for files & folders. Separating content and presentation. DIV and SPAN, paragraphs and line breaks. Named colors.

Week 3 Adding images and links. Links. Document structure, basic CSS formatting.

File formats (JPEG vs. GIF), image compression, and file size. Images on the HTML page, using images as links, as background in a DIV. Linking pages, images as links. The Box Model, doc types and encoding. Simple text formatting using CSS. Examples of two and three-column layouts.

Week 4 Basic styling in CSS. Fonts and layout with styles. More on linking.

Benefits of CSS. Selectors and declarations. Formatting text with styles: styling fonts, controlling spacing, aligning text. Layout/positioning with styles: fixed layouts. Review of the workflow for building CSS pages. Internal and external style sheets.

Week 5 Intro to CSS Layout, the Box Model and Lists, continued text formatting.

The Colored Box technique, the box model. Padding, Margin, borders, overflow. Lists. Inheritance in CSS, the cascade. Styling links [pseudoclasses].

Week 6 More Layout and Positioning with CSS.

Layout/positioning with styles; using margins, fluid and em-based layout. Absolute and relative positioning, floats, Z-position, alignments, color, clipping, list properties. Resets

Week 7 More Layout and Positioning with CSS, Rollovers.

Fixed, liquid and elastic layouts. Two and three-column templates.

Week 8 Validation and FTP: Uploading your pages to a server.

Uploading HTML files to the server using Fetch, see your site live online. VALIDATING HTML/CSS Troubleshooting, testing/debugging. Inheritance in CSS, the cascade. External Style sheets. More styling: contextual selectors, pseudo elements, drop-cap styling, proportional font sizing/em-sizing, shaped backgrounds.

Week 9 Site Development: research flowchart, wire-framing, and production workflow.

Using a flow chart to make a shell site. Using layers and prototyping between HTML/CSS/ Photoshop. Grids: review of grids and their use in CSS and (X)HTML. Argument for coding directly, rather than using a PSD prototype. http://designinformer.com/grid-based-web-design-simplified/

Week 10 Prototyping, creating navigation interfaces, more on linking.

Developing navigation menus using lists, using image replacement. Writing and formatting tables in HTML and CSS: table and cell alignment, cells spanning multiple columns. Linking to a specific point on a page [named anchors], opening a new window, mail links.

Week 11 Rollovers, Galleries, Javascript.

Rollovers in CSS for images and links Creating navigation elements using rollovers in CSS. Hide/display, rollovers, popups, drop-down menus, replacing headers with images. Creating an image gallery, adding javascript actions for scrolling, window size.

Week 12 Adding Media: video, sound, animation

Using embed and object for media; flash/qt/other formats. Using ‘Video for Everybody’ for mp4 and ogg video for HTML5 and Flash as fallback. Webmonkey, video in HTML 5. Miro Video Converter.

Week 13 Forms.

Elements of a form: text input, selection menus, form layout. Forms for feedback, database, interactivity. Webmonkey add forms to your site

Week 14 Week 14 Final testing.

Cross-platform testing

Designing for a content-based process

[review the process for creating CSS using the Color Box model at http://www.maxdesign.com.au/presentation/process/]

1. Gather the content. Analyze your project idea based on the client goals consider audience, media and content requirements.

2. Analyze the semantics of your content. Use structural elements to break up your content into regions.
3. Flowchart and wire frame your project

FLOWCHART shows the pages and organization of your entire site. Use wire frame and the Grey Box method. [http://www.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php]
WIREFRAME shows your page division or template based on functional areas.

4. Create static designs to prototype your ideas.
Prototype your layouts in Photoshop or Illustrator: your prototype should show the look and style of your page
Make a screen size document [for 1024x768 use 955x600]
Measure out boxes for each container/column
Make each container a different color so you can visualize the structure [delete colors later]
Add graphics or images
dummy in type

5. Create CSS markup that structures the content.
CONTAINER: box that holds the whole document HEADER or BANNER[logo or branding]
NAVIGATION [you could have a main nav and a secondary nav]
LINKS MENU to other pages
CONTENT [can be more than one box] text and images with subheads or captions as needed
FOOTER [optional]
6. Add mark-up guides: make a copy of your prototype and label it with the structure names. This part of the process results in a static prototype.

7. Write the HTML (with CSS) document(s)

8. To check the div structure, use the Color Box method
Position the elements
• divs can be fixed-width, liquid, em-driven
• will the layout be centered?
• positioning using normal flow (inline), absolute, relative, floats
• give each box a unique color so they are visible

9. copy your text content into each box

10. format your content with styles

11. make the CSS styles external
• Optimize the content order without styles
• Chose a development browser that is current and standards-compliant.
• Organize your CSS and comment your mark-up
• Your page should linearize without styles; arrange content into a meaningful order
• When prototyping, use internal styles, then switch to external.
• Divide your CSS into multiple files: layout styles, color styles, typographical styles

Assignment Outline

Assignment sheets are given out each week. For previous weeks, go to the website.

week 1 PURCHASE BOOK. Download tools, files; view sites on the list and analyze, view source. Find a short text. Chapter 2 and 3[plus Chapter 1, What do I need to Learn?]

Web Developer addon for Firefox: http://addons.mozilla.org
Firebug addon for Firefox: http://addons.mozilla.org
TextWrangler http://www.barebones.com/products/textwrangler/
GRID: http://sprymedia.co.uk/article/Grid
Pick/analyze colors & palettes without Photoshop: http://www.colorzilla.com/firefox/
ZenGarden text: http://www.csszengarden.com/zengarden-sample.html
Browser size: http://browsersize.googlelabs.com/

week 2 EXERCISE 1, The Big Type Page.
Chapter 4: Creating a Simple Page, Chapter 5: Marking up Text, Chapter 13: Color .

week 3 EXERCISE 2: Big Image & Type Page.
Adding an image and a link. Chapter 6 and 7 [Ch6=links, Ch7=images]. See: Doctype in CH10 & character encoding, Chapter 18: Preparing Images, Chapter 19: Optimizing Images.

week 4 PROJECT 1: CSS redo Exercise 1 & 2
Redo Exercises 1 & 2, use CSS to style fonts. You can also change the images & colors. Chapter 11: CSS Orientation, Chapter 12: Formatting Text, Chapter 13: Background Images.

week 5 PROJECT 2: How-to Instruction
How-to instruction [minimum 3 pages]: recipe, travel direction, DIY project. Chapter 5: Lists, Chapter 12: Formatting Text, continued, Chapter 13: Formatting Links, Chapter 14: Box Model

week 6 CONTINUE PROJECT 2, How-to
Chapter 15: Floats & Positioning

week 7 CONTINUE PROJECT 2, How-to
Chapter 16 Page Layouts with CSS

week 8 COMPLETE PROJECT 2, How-to
Chapter 10 Validating HTML and CSS, also Chapter 11: Inheritance and Cascade. Chapter 13, External Style Sheets Chapter 21: Getting Your Pages on the Web.

week 9 MIDTERM PORTFOLIO Due
Wire-frame and flowchart for site development, visual and css/html prototype. Chapter 5: More on Links; List-based Menus, Chapter 20: Site Development.

week 10 PROJECT 3: Site Development
Navigation menus using lists, image replacement. Chapter 8: Tables, Chapter 17: Formatting Tables.

week 11 PROJECT 3: Site Development
create an image gallery using rollovers. Chapter 17: Rollovers.

week 12 PROJECT 3: Site Development + ADD MEDIA
How to add video, sound or animation. video and audio formats, media issues

week 13 EXERCISE 3: Create a form
Chapter 9: Forms.

week 14 TESTING: Cross-browser testing
Final testing on multiple platforms, revisions and fixes to all projects.

FINAL PRESENTATION Final presentation is scheduled for Art 39540 exam date