Resources for 333

Suggested Materials

Adobe Creative Cloud (1 year license $75.00)
https://it.stonybrook.edu/services/adobe-creative-cloud

Adobe Creative Cloud is also available for student use without purchasing a license at select SINC sites
https://it.stonybrook.edu/services/sinc-sites

* For certain assignments, instruction in the multimedia lab is exclusively conducted with Adobe Creative Cloud applications, such as Photoshop and Illustrator. As an alternative to Adobe CC students can use the following free applications:

Photopea (Online Photoshop free alternative -recommended)

Vectorpea (Online Illustrator free alternative - recommended)

GIMP (Photoshop alternative)

Inkscape (Illustrator alternative)

Required Materials

Figma (Web prototyping)

Mobirise (Web development)

Google Web Designer (Web development)

LinkedIn Learning account (instructions for obtaining a free subscription)


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