http://www.feliciachamberlain.com/artsmart2012/_wnm608/m2.zip

download this!

course agenda

Course Outline

WNM 608: MS: Web Technology 1

Module 1 - Welcome to the Web

Notes

About this course and GRADING: Demo files & Projects explained

Lecture/Demo:

Demos: First template page | Mini site: two pages | Concepts: Doctype, Tags, Validation

Activity:

Review Domaine name, ISP and FTP, Tag based languages, Code styles, Tool set up

Assignment

1.Template Page & 2page Site 2.Upload to Server 3. Screenshots of Fire FTP, Firebug, Text Editor, Validation Badge

Module 2 - Structure & Directories

Lecture/Demo:

Color Site; Traversing Directories, Relative URLs vs Absolute URLs, Basic HTML tags

Activity:

Project 1: Recipes from My Friends sit; Project 2: Library, four page site with images and nested directories

Assignment

Mini site: Resources page, images & color

Module 3 - The Cascade & Web Typography

Lecture/Demo:

HTML 5: The Outline Algorithm, Structure and structural tags, Browsers, Intro to Web Standards

Activity:

Recipe Site outline, Outline of high level navigation page vs outline simple content page (recipe)

Assignment

Project 1: Gather Recipes for Recipes from My Friends site

Module 4 - CSS: Cascading Style Sheets

Progress Grading

Notes

Covers mechanics of CSS, selectors, classes, IDs, Styling Tags, psuedo selectors, font control

Lecture/Demo:

CSS Introduction

Activity:

Treatment of recipe with CSS

Assignment

Project 1: Recipes from My Friends, Design site

Module 5 - Page Layout and Float Theory

Course Evaluations for Week 5 (Fall/Spring Only)

Lecture/Demo:

Two Column Layouts, overflow, Size of Page, Resolution

Activity:

Recipe in a 2 column layout

Assignment

Project 1: Recipes from My Friends, redesign and begin production; Project 2: Demonstration Library

Module 6 - Data Tables

Lecture/Demo:

Tables, CSS & Tables (Border Collapse, Zebra Striping with CSS)

Activity:

Table of Measurements or Herbs

Assignment

Project 1: Recipes from my Friends, add Table of Measurements; Project 2: Demonstration Library

Module 7 - Site Structure, Page Types & Navigation

Midterm Grading

Lecture/Demo:

Site Structure, Page Types & Navigation

Assignment

Recipe Site DUE, Library DUE

Module 8 - Advanced Topics in CSS

Notes

Positioning, Multiple Background Images, CSS3 Effects, Liquid Layouts

Lecture/Demo:

Absolute positioning vs relative, Gradients, Parallax Backgrounds, CSS Transitions

Activity:

3 Col Layout with Animated Pill Buttons

Assignment

Personal Portfolio

Module 9 - Forms

Notes

Design Considerations, Differences between Forms for desktop and mobile, scripts, Get/Post, Adv. CSS, touch

Lecture/Demo:

Form, Action, Input, Password, Text Area, Check Boxes, Radio, Submit, Options List

Activity:

Fancy form page with lots of style!

Assignment

Portfolio: Gather Portfolio Pieces and Wire frame Site

Module 10 - JS: Review Basics

Notes

DOM, Variables, Function, Conditionals, Events, Event Handlers, Javascript Objects, get Element Byld(),set interval

Lecture/Demo:

Javascript

Activity:

Resize, Exquisite Corps, Timer, Toggle Buttons

Assignment

Portfolio: re-wireframe, begin design

Module 11 - Walking the DOM

Progress Grading (Spring/Fall Only)

Notes

Going Deeper into JS

Lecture/Demo:

DOM

Activity:

Style Changer, Text Scroller, Pop over mini modal

Assignment

Portfolio: Refine Design

Module 12 - Introduction to jQuery

Notes

Selectors & Wrappers, Toggling, Show/Hide transitions, Working with CSS, Adding and Subtracting Classes

Lecture/Demo:

jQuery

Activity:

Image Sorter, Content Expanders

Assignment

Portfolio: Code & Production

Module 13 - jQuery Unleashed

Notes

DOM Manipulation, att(), fadeInFadeOut, StringParsing,Trace Statements, AppendTo(), adding nodes, wildcard selectors, wrapped sets as arrays: Length

Lecture/Demo:

jQuery

Activity:

Image Gallery

Assignment

Portfolio: Code and Production, Update Library

Module 14 - jQuery UI

End of Semester Course Evaluations

Notes

The Library

Lecture/Demo:

Scrollers & Carousels, Accordians, Slider

Activity:

True Color Mixer Scrolling Page

Assignment

Portfolio: Code and Production, Update Library

Module 15 - Next Steps: Future Proof!

Final Grading

Lecture/Demo:

Learn to Learn Self Assessment of Mastery

Activity:

Presentations of Final Class Assignments

2nd class objectives

Client side web languages observe a strict separation of duties. The three main languages that browsers use to display web pages are:

• HTML, Hypertext Markup Language: the structural language of the web
• CSS, Cascading Style Sheets: the formatting language of the web
• Javascript: the logic layer of the web.

Outcomes for todays class

• understand the relationship of structure, format and behaviors
• division level and inline tags
• learn the basic tags of HTML
• absolute vs relative URLs
• color on the web
• use of ftp
• domains

Homework: make a color site with roygbiv...

http://artsmartnewmedia.blogspot.com/2012/09/color-site-hw.html

FYC:

• http://www.printmag.com/Article/50-Best-Color-Sites-for-Designers
• http://www.printmag.com/Article/The-End-of-the-Rainbow
• http://colorblender.com/
• http://pourpre.com/colordb/?i=c300949&l=eng
• http://www.etre.com/tools/colourblindsimulator/  <-- use this tool for accessibility related to color.... like the red on red = no readability for 1 in 20 peeps.

hw 2 assignment: color site

Description 

Now it's your turn. create a color site.  ROYGBIV! pages with red content, orange, yellow, green, blue, indigo, violet.

Be sure your index page shows the correct usage of the following tags: div, h tags, p, hr, em, strong, i, u, blockquote, address, ul, ol, li, dl, dt and dd.

Remember you can use what we did in class in case you get lost and need some extra help. Go slow and check your pages as you go. Use your template page to get started. 

Store all you images in an assets folder. Add a pages folder and a subpages folder to the pages folder.  Make sure all your links work and all your images display correctly.

SAVE! Validate your page. Are there any errors? Correct your errors. Upload your sampler page to the share server and post the URL to the appropriate Discussion topic. 

Purpose

• Make functioning web pages that demonstrate basic HTML tags
• Understand division level and inline tags and how they behave.
• Learn more about URLs and linking pages to pages and images to pages
• using absolute and relative paths.
• 
  

HTML tags are your friends, get to know them! Explore their default behaviors. It is these behaviors that you will be controlling through CSS. 


Due Date 
class  3 
Submission Directions 

Put your folders and files in a folder named "m2_color_YOURLASTNAME". Upload your folder to the share server. ZIP the local copy of your folder. 

send the URL to felicia.artsmart@gmail.com and the ZIP of the folder goes on titan.

hw assignment 1

Description of hw due wednes.

Make two pages. Make the pages different colors, give them each a unique title and link the two pages. Upload your pages to the share server as described earlier in this module. 

Purpose 

* Make very basic, functioning web pages 
* Understand links 
* Gain practical experience using FTP 
* Making sure that your tools are all in place 

Submission Directions 

Put your files in a folder. Name your folder "m1_YOURLASTNAME". Upload your folder to the share server. ZIP the local copy of your folder. Post the URL to the appropriate Discussion topic and attach the ZIP of the folder.

Adobe Download Instructions

yes, the ENTIRE Adobe Master collection comes with Tuition! here's how...

Adobe Download Instructions

The Academy of Art University provides the following software to you free of charge. In order to use this software, you must download and install the Adobe Master Collection CS6 using the Adobe Download Manager.

1. Login to your Online Profile at http://online.academyart.edu/login.
2. In the Software Tab of your Profile, click Request Key (Mac or Windows). A serial number should then appear.
3. Visit http://www.adobe.com/cfusion/tdrc/index.cfm?product=master_collection and click on "Download Now."
4. Once you have downloaded the Adobe Download Assistant installer file, double-click to begin your software download.
5. Log on with your Adobe ID or click "Create an Adobe ID" with the email address of your choice.
6. Once the download is complete, the installer should start automatically. Click "Install," and enter the serial number from your Online Profile.

Contact the Online Help Desk by phone (888.431.ARTS) or email (online@academyart.edu) if you have any further questions.

Windows Users:

Adobe does not provide support for 32-bit Windows users for the use of the following software:

• Adobe After Effects
• Adobe Premiere

Windows (32-bit) users will need to generate an Adobe Premiere & After Effects 32-bit support package key, download, and install this software separately from Adobe CS6. 32-bit support package installation instructions can be found at https://live4.academyart.edu/adobe32bit_install/.

Adobe's software requirements can be found at http://www.adobe.com/products/creativesuite/mastercollection/tech-specs.html.yes, 

9/12/12 m1 First Class....

the class files were placed in Titan. please review the code as needed.

your assignments for the first class:

a 2 page website with linking to a page, a link, and loading some images.

it's your design!

and...

your webhost. your domain name. your ftp client...

we can work on ftp access if you're unfamiliar, but you must come prepared to class with a domain registered and a user name and password for your web host.

Here's a student's work from last semester. this is an example of one of the final assignments (all course work portfolio)

http://www.kominchun.com/aau/wnm608/demonstration_library/

first class: WNM 608

• http://validator.w3.org/
• http://www.caniuse.com
• http://www.jquery.com

• http://html5doctor.com/
• http://www.alistapart.com/
• http://www.sitepoint.com/
• http://www.smashingmagazine.com/

Dive Into HTML5 by Mark Pilgrim: http://diveintohtml5.org/

To complete this class successfully you will need to have your own IP address and space on a server that is under your control.

There are many places where you can register a domain name. Three of the most popular are http://www.godaddy.com/, http://www.dreamhost.com/ and http://www.register.com/. 

The registrar is going to try to sell you all kinds of services that you may or may not need. Learn to say "no."

Next class, come with your domain and ftp access ready!

you'll be using it for the entire class. and beyond, most likely, so choose the name wisely.