Santiago Echeverry

secheverry at ut.edu || CAS Annex 112 || BOX 106F || 813.257.3769






ART 311 | Online Production | FALL 2017

Section F | Tu - Tr | 12:00 - 1:50 PM | CAS 134 | PRE-REQ: ART210

TOPICS 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/
HTML naming conventions

• 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
Doug C. Engelbart demo of all demos 12/9/1968 - LINK
2 - HTML5
Basic HTML5, definitions, syntax, examples, text coding, browser particularities. CSS3: 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

tutorialspoint.com/html5

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
Taming lists

• Video Poem: Using at least 10 personal videos, create a visual layout combining static images, text and cros-platform media with the sole purpose of showcase those clips. CSS3 is essential.
3 - HTML5
Advanced HTML5: wireframing, display of information, CSS, font control, Divisions, tables, images, absolute and relative positioning
Flexbox

Visual resume: Using HTML5 and CSS3, transform your resume into an interactive site, using trasnformations, animation, video, images, etc. Be creative and take risks! Taylor Lane / Rebecca Crose / Emily Gowan

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

Fan Page ( 5 pages minimum, one CSS sheet)

Sandboxing iframes
HTML 5 IFrames - Seamless attribute

@media specifications - Mozilla
5 - JS / 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
6 - JS / 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

 
7 - JS / JQUERY
JQUERY applications fancybox,.slimbox2, animated menu, slide show, prettyPhoto, slide menus ,,vertical and horizontal navigation trends = parallax / Parallax for iPad/iPhone/Mobile )
Do users prefer parallax? EVENTS
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
8 - JS / JQUERY
advanced notions, variables, function, altering the visual content of the page.
Mobile Jquery events

Redesign entirely your site including JQuery UI functions

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. Madlib: 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. Must be coded in PHP
11 - SERVER SIDE
PHP Syntax and more examples
isset - random -



Explore: www.phpclasses.org
12 - 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.
13 - 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.
14 - PORTFOLIO
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
IP Geolocation
Touch events script TOCCA.JS
16 - FINALS
FINAL PROJECTS - EVERYONE MUST BE PRESENT
SPRING FINAL EXAMS SCHEDULE