Web Design/New Structure

Web Design → New Structure This page is part of the Web Design project.

This is a temporary page for brainstorming the idea for an improved course structure. If people think it's a worthwhile restructure, then we can eventually make each level a separate page.

The idea is to restructure the course into Levels rather than topics, where each level is achievable within a 2-3 week timeframe, builds on the previous level and includes a variety of technical, communication and multimedia skills. Hopefully this will provide more definite timeframes for progressing through the course, while at the same time allowing flexible learners to negotiate their own pace.

Please feel free to add/delete/restructure ideas here or on the blog post so we can build a better course!

Summary: Creating your first HTML and CSS web page and get some help uploading it!

Timeframe: 5-7 working days.

Overview of Learning: Basic HTML tags (<h1>, <p>, Headings, paragraphs,) as well as start using divs. Interviewing the client, cropping photos, reviewing a design.

Technical Activities:

• Together in class, work through What is a markup language anyway?
• Work through Sarah's Notecards step-by-step project.
• Re-cap new HTML and CSS skills by working through HTMLDog's beginner HTML and CSS tutorials.
• Complete CSS Challenge 1.
• 2 or 3 HTML Challenges (code the HTML to look like this page etc., helping learners to structure code correctly)
• Complete CSS Challenge 2.

Communication Activities:

• Create your own blog and introduce yourself!
• Research and explain what you think are the 3 most important questions to ask a client when designing a site (rephrase).
• Interviewing Sarah for Sarah's notecards site.
• Activity on creating specific goals for Sarah's Notecards website
• Creating your first TODO list! (Get used to them!)

Design Activities:

• Review a recent redesign (such as http://www.webdesignfromscratch.com/50-redesigns-sunhome.cfm), highlighting your own thoughts of the changes (need to reword)
• Cropping, resizing and optimizing images for websites (fits in with Sarah's notecards).

Summary: Build on HTML skills with DOCTYPES and validation, tables, forms.

Timeframe: 10-12 working days

Technical Activities:

• Adding DOCTYPEs to your web pages! Read the w3schools XHTML HowTo and then apply this to Sarah's notecards)
• Validating Sarah's Notecards.
• Installing Firefox toolbar and using validation tools
• HTML/CSS Challenges 3, 4 and 5 - Basic Tables, forms and Image maps.
• Integrate a Listomatic menu list into a page of yours
• CSS Challenge 3 - A 2 column layout
• Create a blog post explaining the difference between a block-level and inline element, using examples.
• FTP permission and transmission modes
• Sarahs Notecards Redesign This project will pull together lots of the learning to date and provide an opportunity to demonstrate what we've learned so far.

Communication Activities:

• Write 2 user scenarios for your small website project.
• Create very simple style guide for your small website project.
• Write review on your blog of one HTML/CSS intro tutorial that you have really liked so far explaining why. Remember that your target audience who will read your review might not even know what CSS stands for!
• Analyse a variety of client surveys and start collating your own.
• Using your small website project in retrospect, setup a project and work schedule using Basecamp or MS Project that reflects the work that you did for the site.

Design Activities:

• Read Principles of Design and summarise/review on your own blog (you might alternatively use the article How crap is your site design.) Make sure you discuss how some of the prinicples have been applied to your own site or blog's design.

Summary: Build on CSS skills working towards layout with CSS. Begin learning more specifically about Accessibility and Usability. Introduce Javascript events.

Timeframe: 10-12 working days.

Technical activities:

• HTML Challenge 7 - Some advanced table features.
• Redo CSS Challenge 2 but using a table for layout (just for understanding, in case you ever need to modify someone elses design!)
• HTML Challenge 8 - Creating accessible forms (labels, fieldsets etc) with style.
• Integrate Suckerfish Dropdown menus into a page, such as one of your CSS challenges.
• Getting to know your window - Start learning about Javascript Events .

Communication Activities:

• Create competitive analysis as part of Design Proposal 2.
• Create a bloglines account and start reading each day!
• Start setting milestones in Basecamp/Ms Project
• Start learning about website accessibility. Create a checklist of Accessibility issues using the WC3 guidelines.

Design activities:

• Start learning multimedia techniques for making web sites accessible- list software appropriate in creating an accessible web site.

Summary: Continue learning more javascript events, introduction to XML, more CSS challenges, time management plans, working toward client interviews, testing for accessibility.

Timeframe: 10-12 working days

Design Activities:

Technical activities:

• Continue learning javascript events [getting to know your window]
• CSS Challenge 3
• Introduction to XML with SVG activities (XML Challenges 1, 2 and 3)

Communication Activities:

• Develop a client survey
• Learn and practice client interview 1: Obtaining client specifications
• Conduct accessibility testing for 3 popular websites and document the results
• Make a time management plan [using Basecamp/MS Project]
• Begin documentation for client interviews/client projects

Summary: Creating RSS feeds, more javascript events, ethics and copyright, documentation

Timeframe: 10-12 working days

Design Activities:

Technical activities:

• Roll your own RSS feed: Building on your previous XML challenges to create your own RSS feed by hand!
• More on Javascript: Getting to know your document

Communication Activities:

• Research copyright issues to participate in Copyright trivia
• Ethics of web development- Develop a code of ethics for yourself as a web developer
• Make a checklist of documents needed for the client project report
• Conduct a client interview2- Presenting a prototype: learning and practicing interviewing techniques

Summary: Getting sign-off for your prototype, a first look at useability and continuing development of some technical skills in the background.

Timeframe: 10 working days

Design Activities:

Technical activities:

• Javascript Challenges 1 and 2
• Basic PHP templating

Communication Activities:

• Setting up a project plan using Application Software (such as MS Project)
• Successfully present a prototype design to a client (can be role-play)
• Document prototype meeting in client project report (including sign-off sheets)
• Develop a useability test (based on a template) and test against an existing web site

Summary: Creating your own tutorial site: a web-programming intro, running your own usability test for your site and continuing to develop some technical skills in the background.

Timeframe: 10 working days

Design Activities:

Technical activities:

• Web Design/JavaScript:JavaScript Challenges 3 and 4.
• Responding to HTML Forms - Start using PHP to respond to HTML forms starting with a simple "Thankyou Jerry for your details." through a complete receipt and automatic email.
• Calculating Totals and Discounts - using a few maths operators to calculate a receipt for your users.
• Web Programming Website - Flex your HTML/CSS skills as you create a site demonstrating your Web Programming research/learning.

Communication Activities:

• Prepare, execute and document your own sites useability test.

Summary: Compiling your final client report

Timeframe: 8 working days

Design Activities:

Technical activities:

• Working through parts 1,2 and 3 of the Zend PHP for Beginners tutorial.
• PHP Challenge 1 - Idiot box survey.
• PHP Challenge 2 - Processing the information.
• PHP Challenge 3 - Combining your form and response.
• PHP Challenge 3.5 - Looping the loop.

Communication Activities:

• Compile your final client project report (this should include: ? Site overview, Goals, Target user Scenarios, Competitive Analysis,... )

Summary: More on Dynamic sites

Timeframe: 10 working days

Design Activities:

Technical activities:

• Working through parts 4,6 and 8 of the Zend PHP for Beginners tutorial.
• PHP Challenge 5 - Putting stuff into a database.
• PHP Challenge 6 - Getting stuff out of a database.
• Emerging Technologies Research Activities: Activity 1, Gary's email.
• XML Schemas/DOCTYPEs
• XML Challenge 5 - Adding some maths to your page
• XML Challenge 6 - Creating a google sitemap for your site
• Basic security for MySQL database

Communication Activities:

• Working through Adobe's excellent series stepping you through the information design process, and applying to a client site:

1. Information Design - From Interview to Content
2. Site Design - Site structure, navigation and usability.
3. Page Design - Layout grids through to prototype.

Note: You may find that you have already done many of the tasks outlined in these tutorials in your client documentation. Use the tutorials to pull together your knowledge of IA and identify the gaps where your documentation needs to be updated.

Summary: More on Dynamic sites

Timeframe: 10 working days

Design Activities:

Technical activities:

• PHP Challenge 7 - Displaying info 1 record at a time.
• PHP Challenge 8 - Deleting from our database.
• Emerging Technologies Research Activity 2 - Protocols and RFCs.

Technical activities:

• Working through parts 9,10 of the Zend PHP for Beginners tutorial.
• An XML File for Music Albums - Creating your own XML file.
• A PHP Challenge using SQLLite