Thursday, October 4, 2012

link link

deep-linking-javascript-ajax

https://github.com/balupton/History.js

Wednesday, September 19, 2012

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

download this!

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.

Saturday, September 15, 2012

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.

Wednesday, September 12, 2012

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.

Login to your Online Profile at http://online.academyart.edu/login.
In the Software Tab of your Profile, click Request Key (Mac or Windows). A serial number should then appear.
Visit http://www.adobe.com/cfusion/tdrc/index.cfm?product=master_collection and click on "Download Now."
Once you have downloaded the Adobe Download Assistant installer file, double-click to begin your software download.
Log on with your Adobe ID or click "Create an Adobe ID" with the email address of your choice.
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

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.

Monday, August 27, 2012

class!

WNM 608 02: MS: WEB TECHNOLOGY 1 - CROSS-LISTED AS WNM 800 114, begins In sept 12, in rm 520, 180NM.

Sunday, August 19, 2012

Back to the Grind... Classes starting soon...

Some Basic Resources for JavaScript

New to javascript? Have a look at the Javascript Guide from the Mozilla Developer Network
Interested in browser support? Read this post and checkout Quirksmode, Modernizr, HTML5 Polyfills
Looking for coding standards and best practices? Checkout Isobar
Not a fan of the javascript syntax? Checkout CoffeeScript
Want to write a html5 mobile app that can run natively? Checkout Phonegap
Wondering where the core libraries are hiding? Checkout the CommonJS project
Want to write code in the cloud? Checkout the Cloud9 IDE from Ajax.org
Already an expert? Maybe you’ll find CouchDB, Nodejs, and jslibs interesting

Those links lead you to some really cool javascript projects and communities and I highly recommend exploring the ones that interest you.

Too much? Won't be by the end of the semester! ;)

Monday, July 30, 2012

The GreenSock Animation Platform (GSAP)

http://www.greensock.com/get-started-js/

Animating with code may seem intimidating at first, but don’t worry – the GreenSock Animation Platform (GSAP) was engineered to make it simple and intuitive. The platform is also highly optimized for performance and unprecedented flexibility. Hang in there through the learning curve and you’ll be glad you did. For now, we’ll focus on getting you up and running with the core engine, TweenLite. Then we’ll discuss if and when you might want to put the other tools to work (like TweenMax, TimelineLite, TimelineMax, etc.). If you’ve used the Flash version of the platform, you should notice that the syntax is identical (although you’ll definitely want to read up on the CSSPlugin and check out the FAQ section).

http://www.greensock.com/as/docs/tween/com/greensock/plugins/package-detail.html

Saturday, June 30, 2012

mortgaging the future

The deal Congress approved today to freeze the interest rates on "Stafford" subsidized federal student loans is getting a lot of ink today. But there are other changes coming this fall to the student loan game that could be a similar big deal.

Starting July 1, there are a handful of other updates to federal loan programs that borrowers should be aware of. These changes will not affect loans that were originated before July 1, only loans originated for 2012-2013.

No more subsidized loans for grad students. Just like undergraduates, graduate students were previously able to receive both subsidized and unsubsidized loans. Starting this year, only unsubsidized loans will be available for grad. students at a 6.8% interest rate.

Elimination of interest subsidy for grace periods. Subsidized Stafford Loans were less expensive than their unsubsidized counterparts because 1) the interest rate was lower and 2) interest was subsidized while enrolled in school and duri ng the 6 month grace period after leaving school. Starting this year, there will be no interest subsidy during grace periods, however, the subsidy will still exist while enrolled in school at least half-time.

Decreased eligibility. Last December, President Obama signed the Consolidated Appropriations Act 2012, which brought with it a change to the Pell Grant Program for the 2012-2013 year. Starting in Fall 2012, the Pell Grant is limited to 12 full-time semesters per student. The way this is calculated is by percent, where 600% is the maximum a student is eligible for. For example, if you receive a maximum Pell Grant for both semesters, your percentage used would be 100%.

Lowered income limit for automatic zero . When families file the FAFSA (Free Application for Federal Student Aid), they receive their Expected Family Contribution (EFC) - a number detailing how much of the school costs a family should be able to provide out of pocket. In previous years, anyone with an income of $32,000 or less received an automatic zero for the EFC. This allowed lower income families to be eligible for more need-based aid. This year, the income limit has been reduced to $23,000, which will cut funding for many students.

Termination of repayment incentives. The Department of Education can no longer offer repayment incentives to Direct Loan borrowers, except an interest rate reduction for auto payment. Again, this is only for loans originated after July 1, 2012 -- Repayment incentives may still be available for older loans.

The decreased eligibility seems worrisome given the economy and the financial troubles of many families. What good is a better interest rate if you can't get the loans you need?

http://blogs.edweek.org/edweek/college_bound/2012/06/congress_nears_agreement_to_freezing_subsidized_student_loan_interest_rates.html

Tuesday, June 19, 2012

JavaScript: Style Guides

JavaScript Style Guides And Beautifiers

Consistently styled code can:

Reduce the lead time required to understand an implementation
Make it easier to establish what code can be reused
Clarify how updates to an implementation should be styled or structured (remember that consistent code, even when written by a team, should look like one person wrote it).

JavaScript: Style Guides

JavaScript Style Guides And Beautifiers

Consistently styled code can:

Reduce the lead time required to understand an implementation
Make it easier to establish what code can be reused
Clarify how updates to an implementation should be styled or structured (remember that consistent code, even when written by a team, should look like one person wrote it).

Monday, May 14, 2012

FINAL FINAL due date

At the very very latest you may hand in your work on May 19th by 8pm.

You will be sending a ZIPPed file of your portfolio and a ZIPPED file of your demo library (class work)...

This is the very latest you may hand in your work. You must also provide links to the sites in your email.

If you don't... nothing good may come!

fullscreen background slideshow

Supersized is a fullscreen background slideshow built using the jQuery library.

http://buildinternet.com/project/supersized/slideshow/3.2/demo.html

and slide deck
http://www.slidedeck.com/blog/looking-ahead-upcoming-features-in-slidedeck-2-1/

http://www.sublimetext.com/2

portfolio projects

Portfolio
http://amanda-morgan.com

Site Library

http://amanda-morgan.com/AmandaMorgan/Document_Library_Home/index.html

Portfolio
http://www.songkhunhirunro.com/

Site Library
http://www.songkhunhirunro.com/wnm608/shwnm608.html

Portfolio
http://www.songkhunhirunro.com/shc_proto/shcindex.html

Site Library
http://www.jamie-wang.com/wmn608/m13/library/index.html

Portfolio
http://www.jamie-wang.com/portfolio/

Portfolio
http://bananshalabi.com/myportfolio5/

Site Library
http://bananshalabi.com/library/

Site Library
http://www.guangyuyang.com/Midterm_Guangyu_02717669/main.html

Portfolio

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

Site Library

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

Site Library

http://www.robblackmagazine.com/sitelibrary/sitelibrary.html

Portfolio

http://www.robblackmagazine.com/dropdown8/dropdown2.html

last class: jQuery UI makes it easy to include complex interactions & advanced effects

http://feliciachamberlain.com/syllabi/larrySample.html

jQuery UI is built on top of the jQuery library. You need to link to a copy of jQuery first, before evoking any of the effects, widgets or interactions in jQuery UI.
jQuery UI makes it easy to include complex interactions, advanced effects and some of the more common UI components in the form of widgets. All widgets come with a nice selection of skins called "themes." the themes are written in CSS with images and are highly customizable. You can find a complete description of the library and complete documentation at:
http://jqueryui.com/home

Downloading jQuery UI

You can customize your download of the jQUery UI library. The download page lets you pick and choose which parts of the library you need so that you can trim the size of your sites and optimize the experience for your users. You can down the library at:
http://jqueryui.com/download
You will see that the download page is organized to let you pick and choose what you need.
UI Core: These are the core classes that make up the jQUery UI library. They are the foundation and are required as they contain the basic functions and initializers. These include

Core -- base class for jQuery UI. This class is required for all interactions, widgets and effects.
Widget: this is the factory class for the creation of all widgets. It is required for all widgets.
Mouse: the Mouse class is required for all widgets and interactions that make extensive use of the mouse.
Position: the Position class is used to help position elements of the library relative to each other.

Interactions: The Interactions are the basic behaviors. Be aware that many of the widgets depend on these basic interactions. We're going to look at two of the interactions in depth, the draggable and the droppable interactions. Here are some of the more popular interactions:

Draggable
Droppable
Resizeable
Selectable
Sortable

Widgets: The widgets are components. They are easy to initialize and come with with a variety of basic themes. The themes are easy to customize to suit the needs of your designs. The widgets full featured with a range of options. We are going to look at both the accordion and slider widgets in depth.

Accodion
Autocomplete
Button
Datepicker
Dialog
Progress Bar
Sliders
Tabs

Effects: There is also a rich library of handsome effects. These are fun to use and easy to initialize. There are lots of different effects available here a few to give you an idea, there are more and you can explore them in the documentation:

Bounce
Explode
Fold
Pusate
Scale
Shake
Slide

Wednesday, May 9, 2012

Last Class... Last Call...

What's due for next class:

your demonstration library

and

your portfolio

List of items for demo library (course work --in class and homework)

we'll also be covering next class:
accordians
dragging
dropping
sliders

see... but not like this, so much... this is flash. i drew this for a flash drag and drop class sample.