Resources for 333

Software

Pencil

GIMP

Inkscape

Google Web Designer

JustInMind

Assets

Color swatch creator

https://kuler.adobe.com

Web fonts

http://www.fontsquirrel.com

http://www.google.com/fonts

Icons

https://icomoon.io

http://www.premiumpixels.com

Spec Sheets and Tutorials

HTML5

http://www.w3.org/TR/wai-aria/

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list (for elements list)

CSS

W3Schools: http://www.w3schools.com/css/css_intro.asp

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS

http://html.net/tutorials/css/lesson1.php

http://designshack.net/articles/css/what-is-css-back-to-basics/

http://www.w3schools.com/cssref/css_selectors.asp (for info on selectors & click on "Selector Tester")

Box model

https://developer.mozilla.org/en-US/docs/Web/CSS/box_model

http://www.w3schools.com/css/css_boxmodel.asp

http://inserthtml.com/codex/css-guide-box-model/

Centering elements with CSS

http://designshack.net/articles/css/how-to-center-anything-with-css/

Text shadow effect

http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Link selectors

http://www.w3schools.com/cssref/sel_link.asp

Image sprites, slideshows, animations

http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav

http://css-tricks.com/infinite-all-css-scrolling-slideshow/

http://www.w3schools.com/css/css3_animations.asp

http://www.w3schools.com/jquery/eff_animate.asp

Media formats

http://www.w3schools.com/html/html5_audio.asp (for audio compatibility)

http://www.w3schools.com/html/html5_video.asp (for video compatibility)

http://www.online-convert.com (online conversion tool)

http://www.ffmpeg.org (command line conversion)

http://html5doctor.com/video-subtitling-and-webvtt/

JavaScript

http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf (for latest ECMA standard)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators

http://www.tutorialspoint.com/javascript/javascript_builtin_functions.htm (for a list of objects and their methods)

http://www.comptechdoc.org/independent/web/cgi/javamanual/javaprefunct.html (for pre-defined functions)

http://www.w3schools.com/jsref/dom_obj_document.asp (for info on the DOM)

http://www.w3schools.com/jsref/dom_obj_event.asp (for info on events)

JQuery

http://www.w3schools.com/jquery/jquery_ref_selectors.asp (for a list of selectors)

http://www.w3schools.com/jquery/jquery_ref_events.asp (for a list of event handlers)

HTML5 Canvas

http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial

http://www.w3schools.com/tags/ref_canvas.asp

http://www.quackit.com/css/css_color_codes.cfm (for specifying colors)

http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/ (for tips on preloading images)

http://html5doctor.com/video-canvas-magic/ (for copying video to the canvas)

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations (for tips on animating the canvas)

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations (for info on transformations)

http://www.tutorialspoint.com/jquery/jquery-events.htm (for event types)

HTML5 Forms

http://www.w3schools.com/html/html_forms.asp

http://www.w3schools.com/html/html5_form_input_types.asp

http://html5doctor.com/html5-forms-introduction-and-new-attributes/

Responsive Web

http://www.techrepublic.com/blog/web-designer/what-is-the-difference-between-responsive-vs-adaptive-web-design/

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Students should use their free SBU account at the video training site Lynda.com by going to:
www.stonybrook.edu/lynda

and sign in using your NetID and password.

Important URL's:

iOS UI Design Guidelines:
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html