DES 157 // STUDIO 2

Jen Wu, 2015

Explore input/process/output and user interaction by using html form elements
Design an "ugly sweater" interface that uses an interactive form to collect language data,
such as adjectives, adverbs, nouns and verbs while freeing yourself from the constraints
of good (whatever that is!) design... go crazy...have fun!
Try to make the media you use (such as animated gifs and audio files. If you use any media
that you don't have copyright to, cite the sources either in the footer of the document or
as a comment at the start of the html)
Keep your html/css/js as lean and mean as you can

Sketch the interface on paper first and label the sketch with semantic html elements
Note: Always use a reset at the start of your css documents for this class
Make sure to add an appropriate <title> tag
Using <input type=”text”> for the form fields request at least five textual inputs from your user
Option: Experiment with different types of form inputs, with a minimum of five inputs
When the user submits the form, use js to display a playful
and creative message/narrative integrating the user input
Optional: Learn more about forms here: http://www.w3schools.com/html/html_forms.asp
Add form validation to make sure all fields have data upon submission,
or conditions that register specifc inputs to create specific outputs. Read more about form validation here: http://www.w3schools.com/js/js_validation.asp
Consider coding visual user feedback such as on focus
of the form fields, or background color and image changes
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 studio2 folder (keep the html, css and js on the main level of the studio2 folder)
Update the portal to link to studio 2

Add a second blog entry (blog entries are usually posted with the most recent first)
with a 100-300 word critical evaluation of a web-based form you use often
Base your assesment on the principles of the
Bill Derouchey's article/slideshow on interface design
Include a screen capture (shift-command-4 on the mac)
of the interface as part of your blog entry (optimize all images!)
Make sure to always size and optimize images before adding to the html
Include a link to the original article/slideshow

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 (studio2 folder, updated portal and updated blog)
Submit the URL for this studio to the Canvas Assignment

DES 157 / STUDIO 2: MAD LIBS 2.0 / 5 POINTS