IxD(interaction design)

In class discussion: Privacy on the web

• App privacy agreements read aloud

Responsive Resume: Review

• Lihua Jin :: Print resume | Mobile resume | Coding
• Alyssa Tornese :: Print resume | Mobile resume |
• Donghee An :: Print resume | Coding
• Ifah Pantitanonta :: Print resume | Mobile resume | Coding
• Grace Oh :: Print resume | Mobile resume | Coding
• Yunfei Xie :: Print resume | Mobile resume

Review: Web Servers, FTP, External Editors

• Working locally
• Connecting to the server
• Uploading
• Project folder structure
• Relative and absolute paths (with Terminal)
• Including external libraries like jQuery and Bootstrap

Responsive Design: Introducing Bootstrap

• Bootstrap is a responsive web design framework developed by Twitter
• It works on a grid system
• It also automatically includes lots of basic templates, typographical styles, Buttons, Glyphs, and Navs
• This is a full-fledged frontend framework that is widely used: Newsweek.com, Codeacademy.com, Vogue.com, and Lyft.com
• Let's look at this simple example. Notice how the columns stack when scaled for mobile.
• Here's a good guide to Bootstrap (start with where it says "The Basic Bootstrap Styles Everyone Should Know")

Bootstrap Assignment

• Finish reading and, using Sublime, experiment with the examples in this article (start with where it says "The Basic Bootstrap Styles Everyone Should Know")

Coding Assignment: FTP, Web Server, Local Development

Deliverable: SVA Server URL

• Take the final Liveweave sketches you did for the Genspace homepage and about page from last semester and recreate them locally
• In Finder, wherever you want, create a new folder "genspace"
• Inside Genspace create three new folders: "css", "img", and "js" for your CSS, images, and javascript respectively
• Put the CSS code in a new file "app.css" and the javascript code in a new file called "app.js" and save them to their respective folders
• Download all the images used on the site and put them in the img folder.
• Just like you downloaded the images and put them in a local folder, you'll need to do the same with any javascript that we included using the Liveweave's > Add Library functionality. This includes jQuery (see this post for help)
• Fonts are not download-able, so keep the same font embed code as you have in your Liveweave sketch
• In your HTML, using relative paths (here's a YouTube video that explains it), relink all the files so all the CSS, Javascript, and images are being accessed from your local machine (so for example, all <img src="img/<imageName>") should start with the name of the img folder, "img")
• Take the final design you did for Genspace last semester and upload it to the server in a new folder inside public_html called Genspace
• Submit the link to the page on the server
• Note: You cannot submit a local url (a local url is one that starts with the file protocol: file://). The Google form will not accept this as it is not a valid URL. You must submit the URL for the page on the server, which will start with http://webdesign.sva.edu/~<yourUserName>/<fileYouWantToSubmit>.html
• The folder structure should be something like this:
  • /genspace
    • index.html <-- Homepage
      • /about
        • index.html
      • /css
        • app.css (your css here)
        • bootstrap.min.css
      • /js
        • app.js (your js here)
        • bootstrap.bundle.min.js
      • /img
• Make sure the homepage links to the about page (in the navigation) and vice versa
• Make sure your about/index.html pages links to the app.css that's in your genspace/css folder. Do not create a new css file for this page. Combine the CSS into one file.
• Zip the genspace folder and upload it. Also make sure to bring it to class.

Coding Assignment: Your resume + Bootstrap

Deliverable: Liveweave URL

• Recode your responsive resume using Bootstrap
• The first step is to download the (compiled) Bootstrap CSS and Javascript files and link to them in your html file
• Start by copying the Starter Template here. In this case "path-to-css-folder" and "path-to-js-folder" are blank (because the folders are in the same directory as index.html
• The folder structure should be something like this:
  • /resume
    • index.html
      • /css
        • app.css (your css here)
        • bootstrap.min.css
      • /js
        • app.js (your js here)
        • bootstrap.bundle.min.js
• Refactor your HTML using <div class='row'><div class='col-md-xx'></div></div>
• Zip the resume folder and upload it. Also make sure to bring it to class

Further Reading

• CSS Pseudo Elements

Cool links

• http://www.tysonernste.com/
• http://radio.garden/live/rambouillet/radiorve/
• Pixel
• Theo Jansen compilation (and TED Talk)
• This Radar Can Recognize Objects... And Has Huge Implications

Submitting Your Work

Due Monday, 2/18 @ 10AM

Make sure all links are publicly accessible (your grade will be lower if I cannot access your work). To make sure, open up a new private/incognito browser window and test all links before submitting. After the links have been tested, submit them to this Google Form.