Casa Basa ˜ blending art with technology

Week 1:

Please complete my student survey.

Lecture: Review web standards and creating for accessibility and usability. What are the prerequisites for good usability and functionality? What is included in creating a good project? Final project is discussed and roles assigned.

Review of presentation of css and html. What constitutes a well-crafted page?

http://techpassion.wordpress.com/2009/06/02/css-best-practices/

http://portlandinternetdesign.com/tutorials/css-for-beginners/01/3-tips-for-mean-clean-css-code/

http://meyerweb.com/eric/css/

Lab: html, css, and javascript are reviewed. Teams are selected to create group sites. Group web project is reviewed. Students will be contacting Annie Yu for information on the club website. Research competition and target audience. Establish forum to share documents. As a group, answer these questions and post to group homework site. Project manager meets with instructor to check timeline.

Process
What is the name of your team?
What kind of web site will you create: e-Commerce, Portal, Community?
Who is the primary target audience? Any secondary users?

Production

• Who will your be your site production team (2)?
  • Early in the design stage the site production lead is responsible for converting initial web site page mockups, designs, and wireframes into html pages. Once the site has been planned and the design and information architecture plans have been completed, the site production lead manages the work of building the site’s pages.
• Who will manage the process (Project Manager)?
  • Reports directly to instructor. Coordinates and communicates the day-to-day tactical implementation of the web site project, budget, development schedule, and quality objectives laid out in the planning stages, ultimately responsible for keeping the overall team activities focused on the site strategic objectives and agreed deliverables. Will assist all aspects to ensure project is completed on time and as promised.
• Who will be your primary content experts (2)?
  • Website structure and content, site architecture overviews, page wireframes, and user interaction explanations. Testing, personas, usability, Standards 508 and css testing and validation. Design documentation, contract, and use documentation.
• Who will be the art director?
  • Overall look and feel for the web site, establishing the site typography, visual interface design, color palette standards, page layout details, and the particulars of how the graphics, photography, illustration, and audiovisual media elements of the site come together.
• Who will be the technical director?
  • Acts as the bridge, translator, and plain-English communicator between the technologists and the creative and project management elements of the team. Responsible (with production team) for creating the master page templates in xhtml (Extensible HyperText Markup Language) and Cascading Style Sheets (css), validating page code, and assembling the work of the information architects and site graphic designers into finished page templates ready to be filled with content.

Technology

• What operating systems and browsers should your site support?
  • Windows, Macintosh, unix, Linux
  • Firefox, Internet Explorer, Safari, Opera; minimum version supported
• What is the network bandwidth of the average site visitor?
  • Internal audience or largely external audience
  • Ethernet or high-speed connections typical of corporate offices
  • isdn, or dsl medium-speed connections typical of suburban homes
  • Modem connections for rural audiences
• Will the site have dynamic html and advanced features?
  • JavaScript required
  • Java applets required
  • Third-party browser plug-ins required
  • Special features of the Linux, unix, or Microsoft iis server environments required
  • Special security or confidentiality features required
• How will users reach support personnel?
  • Email messages from users
  • Chat rooms, forums, help desks, or phone support
• Does the site require database support?
  • User logins required to enter any site areas

 

Homework:

• Read chapters 1 & 2 Of the Yale Style Guide. Create a personal blog to document your class participation. Blog what role you will do, and what problems you anticipate. Also include what your group website's mission statement and its primary objective.

As additional information, here's an education site that shows the process of web site production: http://enhancinged.wgbh.org/formats/web/project.html. Also refer to this template you can use for website specification.

For timeline information, check at the bottom of this page: http://web.unlv.edu/devProcess.html

Week 2:

Lecture: Adding analytics. Group project and process reviewed and timeline created.

What is HTML5? A review of the tags and some of the associated API's.

Lab: Wireframes are created (content). Logos and navigation system discussed and agreed upon (art director). Semantics and naming conventions (technical director). Deliverables and assets of proposed site loaded to group site (production). Presentation next week (project manager). Project manager meets with instructor to check timeline.

http://www.onextrapixel.com/2009/07/15/the-importance-of-wireframes-in-web-design-and-9-tools-to-create-wireframes/

http://mockupbuilder.com/

Homework:

• Read chapters 1 and 2 of book. Upload today's html5 exercise to a separate section of your homework site. You will be adding pages to this each week. Send me a link.
• Visual team: color scheme and typography
• Information team: wire frames and research for similar sites
• Production team: naming conventions, information flow and navigation bar layout and content
• Technical Director: establishment of cloud and coordination of assets
• Production Manager: project timeline due from last week; personas (3) and 508 research

Week 3:

Lecture: Review of contracts. Best Practices for Speeding Up Your Website: http://developer.yahoo.com/performance/rules.html. Creating templates and assets in Dreamweaver. Introduction to Contribute in managing websites. Continuing html5 class exercises.

2:00 Annie Yu, client, will be here to answer questions and review your process.

Lab: Discussion of homework. At this stage you need to detail the content and organization of the web site. The team should inventory all existing content, describe what new content is required, and define the organizational structure of the site. Once a content architecture has been sketched out, you should build two (2) small prototypes of parts of the site to test what it feels like to move around within the design. Project manager meets with instructor to check timeline.

Research two similar sites. What are their strong/weak parts? What does your site offer that differentiates you?

Decide fonts, colors, look and feel of site. Upload to group site, lab work and email me.

Homework:

• Read chapter 3 of book. Post to blog what you added to group project this week. Tell me one way you would test to ensure you're reaching your target audience.
• Upload today's html5 exercise to your site. Email me once you have uploaded.

Useful Links: Clckr's Conditions of Use page is an example that is clear and effective. It is also a useful resource for clipart sharing.

Week 4:

Lecture: Search Engine Optimization. Presentation by project manager, with group assistance, of project to date. Developing an "information scent": http://www.vanseodesign.com/web-design/information-scent/. HTML5 forms.

Lab: Writing a research paper: to be completed in MLA style, research minimum 3 sources each on optimizing your site for search engines, for accessibility, and for maintenance. Discussion as a group on the elements of a research paper and what should be included. Project manager meets with instructor to check timeline.

Site of interest: http://beta.theexpressiveweb.com/

How will Google+ affect your seo ranking?: http://www.entrepreneur.com/blog/220101 An interesting article.

Homework:

• Complete research paper, due next week. Show the current page layout of your group site to a representative of your target audience and blog about it. .pdf MLA specification
• Read Chapter 4 of book.
• Upload today's html5 exercise to your site. Email me once you have uploaded.

Week 5:

Lecture: The design of a web page: a discussion of last week's readings. The principles of visual design.

Progressive Enhancement. Remember this? As new ways of creating a web page are introduced, we adapt and learn and design the visual, code and interactions. HTML5 Audio and Video tags.

Lab: Presentations of research. Checklist: css stylesheets for print? other media? Is the site accessible and meets Standards 508? Is a style guide in place and adhered to? Is the group cooperating? Project manager meets with instructor to check timeline.

In-class assignment: Create a stylish stylesheet that is 1kb or less in size when minified. http://css1k.com/

25 JQuery Plugins for Navigation

Homework:

• Complete your css challenge an upload link to your blog and comment. Extra credit if you submit to: http://css1k.com/
• Read chapter 5 of book.
• Upload today's html5 exercise to your site. Email me once you have uploaded.

Week 6:

Lecture: In class review of project to date. What is your signal-to-noise ratio? Open discussion, with points awarded for meaningful debate. Using .php includes to lighten the load. Creating a more flexible navigation. http://www.digital-web.com/articles/easypeasy_php/. Review of CSS3 embedded fonts and multicolumn layouts.

Lab: Evaluation of schedule and re-organization of team if necessary. Self evaluations are posted to personal blogs.

As a group, I expect you to answer these questions next week:

- What is the mission or general philosophy of this site?

- Describe its primary goals, services or products.

- Is there a tag line or slogan that was incorporated within the general theme?

- How does this site differ from its competitors? What do you offer that will make you stand apart from the competition?

Homework:

• Post to your blog what you did for your group project this week, how you think this adds to the overall success of the project, and give examples of the site's strongest and weakest elements. All questions must be answered for full points. Read chapters 10 and 11 of book. Contract and technical plan are due week 7, Process Book is due week 8, finished site for user-testing due week 9.
• Read en passim chapters 6-9 of book. This should be a review of the CSS3 you did in MM2203.
• Upload today's html5/Css3 exercise to your site. Email me once you have uploaded.

 

Back to the top

Week 7:

Lecture: Contract and technical plan are received for approval. Some HTML5 API's are discussed and implemented: Geolocation, offline web apps and web storage. We will also take a look at jQuery.

Lab:

Creating a jQuery Document. Please download the jQuery library from the official website if you haven't already. http://jquery.com/. As a group, implement a jQuery element to an html5 document. To be uploaded.

Please meet in your groups and assess your project to date. Has a timeline been followed (set by project manager)? Are assigned roles followed? Is work shared equally? Now is the time to decide if this group is working or if changes need to be made. Learning to address problems, deal with them, and move on is part of the group process. Each person will be graded separately. Here is the grading rubric I will use for the final project.

Homework:

• Read chapters 10 & 11 of the book.
• Upload today's html5 exercise to your site. Email me once you have uploaded.
• Propose one multimedia element that would enhance your group project.
• Find a link to a tutorial about that element and post to your group's blog.
• Complete today's tutorial: http://blog.netisme.com/tutorials/xhtml-css/scroll-gototop-apparition-jquery-css.html

http://www.notcot.com/archives/2009/09/inside-the-inca.php possible guest lecture soon (Neil Tan)

 

Week 8:

Lecture: Touching base. Group processes are discussed. Multimedia elements are discussed and possibly implemented. Discussion of HTML 5 and the <canvas> tag. Lynda.com HTML5/Canvas tutorial (chapter 6). Modernizr and frameworks are reviewed.

Lab: Design documentation posted to group site. Lab time. http://www.ecsspert.com/atari.php

 

Homework:

Make adjustments to group site. On your personal blog, I want you to post a user-testing of your group's project. You may use a personal acquaintances. Please just observe what they do, where they go, what they click without giving any verbal cues. Post observations to personal blog.

 

Week 9:

Lecture: Style guides. Business Plans. http://www.d.umn.edu/~jvileta/businessplans.html. Getting your clients to pay: http://www.emilycohen.com/articles.html

Lab: Group critique. Any problems are noted on project list and updated for next week. All pages are tested for validity and usability. Ability to function well on a smartphone is checked. Revisions due week 11. We will look at Adobe's Dreamweaver CS5.5 ability to use jQuery mobile.

Homework:

• Post to blog your class critique using this rubric.
• Upload today's html5 exercise to your site. Email me once you have uploaded.
• Continue with group project.

Interesting website to review: http://html5doctor.com/avoiding-common-html5-mistakes/

Week 10:

Lecture: Final exam

Lab: Lab time to complete project. Test your design on different browsers: http://browsershots.org/ from our own John Johnson.

Production team presents finished project for user testing.

The 1kb css exercise is introduced.

Homework:

• Complete final project.
• Complete 1 kb css: Create a stylish stylesheet that is 1kb or less in size when minified. http://css1k.com/

 

Useful links:

http://heygrady.com/blog/2011/02/17/using-sass-with-the-1kb-grid-system/

http://www.minifycss.com/

http://www.csscompressor.com/

 

Week 11:

Presentation and Critiques

Lecture: Formal presentation and critique of Student Projects.

Lab:

Post final thoughts on class to blog.

Homework:

none

Winter 2012 AICASF-clubs website:

Jack Bowen | Homework | Instructional Designer

Student Name | Homework | Final Project

Student Name | Homework | Final Project

Student Name | Homework | Final Project

Student Name | Homework | Final Project

Student Name | Homework | Final Project

Student Name | Homework | Final Project

Student Name | Homework | Final Project

 

PAST STUDENT WORK

Summer 2011: S.W.A.P. website: swp371.aisites.com

Kelley Zerga | Production Development

Anna Guerrero | Content Editor

Ross Patton | Project Manager

Cesar Gomez | Art Director

Zachary Urias | Technical Director

 

 

Past student work

Spring 2011

Group project: Igarlikeit:

http://jdingerson.com/igarlikeit/ | Documentation

Technical Director: Jenna Gerberding
Art Director: Nathan Tran
Instructional Designer: Melissa Picardo (research)
Content Editor: Steve Chen (research)
Production Developer: Oscar Barajas
Production Developer: Ian Sayre

Project: Kaba Gem (e-commerce)

http://bobbielai.com/gemproject/index.html

Project Manager: Bobby Lai (includes documentation)