DES 157 // STUDIO 5

Darin Reyes, 2016

Explore the world of js libraries (or other api's, or html/css methods)
There are many libraries/methods to choose from, so you can
research on your own or choose one from the following list:
- animation/movement:
  - drag/drop
  - paperjs
  - snapsvg
  - sprites | sprite animation
- audio:
  - soundjs
  - web audio api
- charts/data vis:
  - chartjs
  - d3
- frameworks:
  - angular
  - react
- graphics/interface:
- mapping:
  - jVectorMap
  - leaflet | mapbox
- mobile:
- processing:
  - p5.js
The sky’s the limit!
Consider libraries that support making more immersive interaction, more
interesting animation, more touch screen control, gis, svg’s, omg (!) ...
Create your own exercise that is an explorative, creative
interface using a library that will support your final project
You still must write your own code and understand what you are doing with the library
If the library is too complex for you to understand, choose a different library

Note: Use the template files found here
Create a folder called "studio5" inside your main web folder
Important: Make sure to link to the js library before linking
to your script.js file in the <head> of your html document

Sketch at least two interface concepts:
Consider user interface based on type, color,
image, shape, position, among other strategies
Choose your favorite sketch and add labels for semantic html elements
The target viewport size for this studio is a 1440 x 900 monitor (960 wide);
consider designing responsively and make sure you have optimized for this size
Recommended: After your paper sketch, create a digital sketch in PS, AI or Sketch
Add a <footer> that includes an html validation link and a css validation link:
<a href="https://validator.w3.org/check?uri=referer">Valid HTML 5</a>
<a href="https://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a>
Example: valid html | valid css
Note: The validation links will not work until the page is uploaded
Use external css and external js. Save files as index.html, style.css, script.js,
in the studio4 folder (keep the html, css and js on the main level of the studio4 folder)
Update the portal to link to studio 4

Add a blog entry (including header, subheader, and date) to your blog.
Summarize your approach and outcomes, and summarize what you learned.
Include a brief evalution of the library in your own words (i.e. tell other students what
this library is good for and rate its ease of use and effectiveness). Include a link to
the library and a screen shot (sized and optimized) of your Studio 5 interface

Make sure your code is well formatted (beautified) before uploading
Submit the URL for this studio to the Canvas Assignment
Commit all changes to your github repository (studio5 folder, updated portal and updated blog)

DES 157 / STUDIO 5: MEET ME AT THE LIBRARY / 5 POINTS