| HOME | UT | UTArts | SW | BB | NMP | Atomic | |||||
| SANTIAGO ECHEVERRY secheverry at ut.edu || CAS Annex 112 || 813.257.3769 || Office hours by appointment only |
|||||
ART311 | On-Line Production | Fall 2013 | PRE-REQ: ART210 Section LN | T - Tr | 6:00PM - 8:50 PM | CAS 134 |
|||||
| 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: www.asciimation.co.nz/ www.chris.com/ascii webmonkey.wired.com/webmonkey/ glassgiant.com |
Readings: History of the Internet, Internet for Historians Personal computer milestones / Dial up sound http://gs.statcounter.com/ • 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. • Special HTML characters |
|||
| 2 - WORDPRESS | CMS notions, setup, customization, design elements, templates, security, hacks. codex.wordpress.org/WordPress_Lessons |
• Create your own Wordpress site on your servers. Create a subdomain exclusively for your WP site. Set up your admin account. Explore the customization tools and transform a basic template with your own artwork and images. | |||
| 3 - WORDPRESS | WYSIWYG tools, pros/cons, plug ins, widgets, code editing Widgets |
• Modify your WP site so it includes at least three widgets, 5 different PAGES, and a post for each page. Make sure you deactivate the comments on all of them. | |||
| 4 - HTML5 |
Basic HTML5, definitions, syntax, examples, text coding, browser particularities. CSS: Fonts, sizes, colors. Images. Opacity jimwestergren.com/worst-web-design-ever webpagesthatsuck.com horrible web design GOOGLE FONTS // fontsquirrel // text-wrap: balance; Search Engine Optimization - meta tags |
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 whatwg Styling web content with CSS3 caniuse.com = compatibility tables for support of HTML5, CSS3, SVG and more Opera now webkit • Video Poem |
|||
| 5 - HTML5 |
Advanced HTML5: wireframing, display of information, CSS, font control, Divisions, tables, images, absolute and relative positioning Flexbox |
•Create the first index page of your site, and the general linked layout of your portfolio Taming lists |
|||
| 6 - 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 ( 5 pages minimum, one CSS sheet) • Sandboxing iframes • HTML 5 IFrames - Seamless attribute |
|||
| 7 - JQUERY |
Javascript / JQuery, geometric properties, user interaction, feed-back SECURITY = http://gizmodo.com/why-are-javascript-attacks-so-dangerous-1453269240 http://jqueryui.com/demos/ http://helpx.adobe.com/dreamweaver/using/jquery-widget-dreamweaver.html |
• Family tree project using the load() function in JQuery. At least 10 "family" members with photos and video for each one of them. $("#div1").load("yay.txt") <script src="http://code.jquery.com/jquery-latest.js"></script> jquery.com |
|||
| 8 - JQUERY |
Client side programming for the web. JQuery + JQueryUI / LATEST LINKS. Form verification, notions of variables, functions, usage, examples: random images, time and date 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, fonts and colors. | |||
| 9 - JQUERY |
JQUERY applications. animated menu, slide show, slimbox2, prettyPhoto, slide menus , EVENTS, fancybox, vertical and horizontal navigation trends = parallax / Parallax for iPad/iPhone/Mobile ) Boilerplate / Fluid grid layouts handling events in mobile Safari |
Explore: webmonkey.com/2010/02/get_started_with_jquery/ no-margin-for-errors.com GREAT: http://learn.appendto.com/ comptechdoc.org javatag.com |
|||
| 10 - JQUERY |
advanced notions, variables, function, altering the visual content of the page. Mobile Jquery events |
• Redesign entirely your site including JQuery UI functions |
|||
| 11 - 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 |
|||
| 12 - 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 |
|||
| 13 - SERVER SIDE |
PHP Syntax and more examples isset - random - |
Explore: www.phpclasses.org |
|||
| 14 - PHP |
PORTFOLIO SITE |
Create your own portfolio site A - using PHP. 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. B - Update your wordpress site with links to your projects and anything else you would consider adding. |
|||
| 15 - MOBILITY |
Final project workshop XCODE (download for Mobile Safari emulation) HTML5 canvas touch events JQuery Mobile examples CSS Font-Size: em vs. px vs. pt vs. percent iUI: User Interface Framework for Mobile Web Devices Using the viewport meta tag to control layout on mobile browsers Web Design for Mobiles and Tablets – Viewport Sizes Developing apps with Wordpress phonegap.com JQUERY Mobile Dreamweaver Mobile Applications 40 Ipad Design tips NB Stanford iOS: http://itunes.apple.com/itunes-u/iphone-application-development/id384233225 |
Scrollable divs Scrollable iFrames on iPad OpenLayers UIZE Javascript Touch Examples JQuery smooth scroll SmoothScroll Scroll page horizontally with mouse wheel |
|||
| 16 - FINALS |
FINAL PROJECTS - EVERYONE MUST BE PRESENT TUESDAY DEC 10TH| 6-9PM / CAS 134 exams |
||||