SANTIAGO ECHEVERRY

ART311 | On-Line Production | FALL 2012 | PRE-REQ: ART210

Section P | T - Tr | 5:00PM - 7:50 PM | CAS 134

secheverry at ut.edu | CAS Annex 112 | 813 - 813 257 3769 | Office hours by appointment only
Week Description   Assignments
1 - INTRO
TEXT as the base for all Internet creation. SSH, SFTP, FUGU, Fetch, FTP. Basic HTML5, structure, theory, open source. CSS. How to set up your server space.

Explore:
http://www.asciimation.co.nz/
http://www.chris.com/ascii
http://webmonkey.wired.com/webmonkey/
Readings:
History of the Internet, Internet for Historians
Personal computer milestones

• Purchase your own domain name and server space. Send me an email before our next class with the link to your site. This is ESSENTIAL for this class.
• Digital ASCII art: each student has to present 3 pieces of digital ASCII art, both printed and on their website.
glassgiant.com /

2 - HTML5
More Basic HTML5, definitions, syntax, examples, text coding, browser particularities. CSS: Fonts, sizes, colors. Images. Opacity
jimwestergren.com/worst-web-design-ever
webpagesthatsuck.com

Using strict HTML5+CSS3, transform your original digital ascii creations into interactive css creations, or if you prefer, you can create at least 3 new ascii projects
whatwg

Styling web content with CSS3
caniuse.com = compatibility tables for support of HTML5, CSS3, SVG and more
csszengarden.com
3 - HTML5
Advanced HTML5: display of information, CSS, font control
Divisions, tables, images, transparent gifs, absolute and relative positioning
GOOGLE FONTS // fontsquirrel //

Visual Poem Project: transform your favorite poem/text ( at least 20 lines ) into a visual html project, using basic CSS3, images, fonts, colors. You will create three versions 1) using only words 2) using images and text 3) using only images, all of them with divisions and CSS3 positioning
Cheat sheet for web design
4 - HTML5
Advanced HTML: Iframes/frames. Advantages and disadvantages. HTML5 Canvas: video and audio DIS MAGAZINE
HTML in Dreamweaver / HTML 5 Video / Transitions
Explore: Canvas + HTML5 Animation

•Create the Fan Page ( 3 pages minimum, one CSS sheet)
n
5 - JQUERY
Javascript / JQuery, geometric properties, user interaction, feed-back
$("#div1").load("yay.txt")
<script src="http://code.jquery.com/jquery-latest.js"></script>
• Family tree project using the load() function in JQuery. At least 10 "family" members with photos and video for each one of them.

6 - JQUERY
Client side programming for the web. JQuery + JQueryUI / LATEST LINKS.
Form verification, notions of variables, functions, usage, examples: random images, time and date jquery.com
Form verification
Explore:
http://devguru.com/home.asp

• create an interactive story where the user will be able to change the parameters of the narration in the form of a MadLib. The story must have at least 5 versions, and minimum 10 parameters. Use form verifications and dynamically placed images.
7 - JQUERY
JQUERY applications. animated menu, slide show, slimbox2, prettyPhoto, slide menus , EVENTS,

Redesign entirely your site so it uses the fluid grid layouts and the load() JQuery function, so it works on any platform, any browser Boilerplate / Fluid grid layouts
handling events in mobile Safari

Explore:

webmonkey.com/2010/02/get_started_with_jquery/

no-margin-for-errors.com
JS CSS DOM Practice 1
GREAT: http://learn.appendto.com/
comptechdoc.org
javatag.com
8 - JQUERY



9 - SERVER SIDE
Server side programming. PHP Syntax and examples
Create your PHP email form ( with form verifications and security questions) Explore: www.php.net
www.dynamicdrive.com

10 - SERVER SIDE
Server side programming. PHP Syntax and examples. Functions, reserved variables, user information, Includes. design the first draft of your website using PHP includes. Due in 2 weeks
11 - SERVER SIDE
PHP Syntax and more examples
isset - random -



Explore: www.phpclasses.org
12 - WORDPRESS
Understanding WORDPRESS
codex.wordpress.org/WordPress_Lessons
Create a subdomain exclusively for your WORDPRESS site. Set up your admin account and explore the possibilities.
13 - WORDPRESS
Being an Admin in Wordpress
Widgets

Customize your Wordpress site, change the templates, add widgets and apps.
14 - WORDPRESS
PORTFOLIO SITE




Create your own portfolio site using Wordpress. Use all the bells and whistles, but make sure it is 1) NOT CHEESY, 2) NOT BLOGGY, 3) TOTALLY PERSONAL (colors, fonts, images, logos) and extremely well designed.
15 - MOBILITY
Final project workshop
phonegap.com
JQUERY Mobile
Dreamweaver Mobile Applications
40 Ipad Design tips
NB Stanford iOS: http://itunes.apple.com/itunes-u/iphone-application-development/id384233225
16 - FINALS
FINAL PROJECTS - EVERYONE MUST BE PRESENT
OJO: Tuesday Dec 11th | 3.45 - 5.45pm / CAS 134 exams