SLIDE 1
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
LAST TIME ON IOLAB
- Node.JS
INFORMATION ORGANIZATION LAB INFORMATION ORGANIZATION LAB NOVEMBER - - PowerPoint PPT Presentation
INFORMATION ORGANIZATION LAB INFORMATION ORGANIZATION LAB NOVEMBER - - PowerPoint PPT Presentation
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 INFORMATION ORGANIZATION LAB INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 LAST TIME ON IOLAB Node.JS INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 TODAY COURSE REVIEW INFORMATION
SLIDE 2
SLIDE 3
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
TODAY COURSE REVIEW
SLIDE 4
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
I SCHOOL TOOLBOX
SLIDE 5
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
DOCUMENT OBJECT MODEL
<html> <body> <div id="header"> <h1>Document Object Model</h1> </div> <div id="content"> <p>This is my first paragraph</p> <p>My second paragraph has a list: <ul> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> </ul> </p> <p>This is the third paragraph</p> </div> </body> </html>
body div
header
div
content
p p p ul li li li h1
SLIDE 6
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
CASCADING STYLE SHEETS
SLIDE 7
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
SLIDE 8
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
AJAX AND CROSS-SITE SCRIPTING
Web 2.0 FTW
SLIDE 9
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
GIT IN REVIEW
- git add
- git commit -m
- git commit -a
- git rm
- git reset
- git reset --hard
- git checkout
- git diff
- git log
- git status
- git pull
- git push
SLIDE 10
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
MEMEX (PROJ 1)
SLIDE 11
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
SLIDE 12
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
NEW TAGS & FEATURES
- header, footer
- menu, nav
- section, article
- figure
- new input types
- placeholder text
- localStorage
- GeoLocation API
- web video
- web audio
- 3D, graphics, effects
- web sockets
SLIDE 13
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
SLIDE 14
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
NEW FEATURES
- RGBA & opacity
- rounded corners
- image borders
- box shadows
- multi-column layouts
- multiple backgrounds
- text shadows
- word-wrapping
- @font-face
- pseudo-classes
- new selectors
- combinators
SLIDE 15
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
WHAT IS GOOD CODE?
SLIDE 16
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
METACRAP (PROJ 2)
- People lie
- People are lazy
- People are stupid
- Mission: Impossible -- know thyself
- Schemas aren’t neutral
- Metrics influence results
- There’s more than one way to describe something
Cory Doctorow
SLIDE 17
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
OAUTH ROLES
https://developers.google.com/accounts/docs/OAuth2
SLIDE 18
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
MOBILE VS. NATIVE
Mobile Web Native App
less overhead to get started Access native functionality accessible to more devices Faster performance HTML, CSS, Javascript Objective C, Java
SLIDE 19
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
PROGRESSIVE ENHANCEMENT VS. GRACEFUL DEGRADATION
SLIDE 20
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
GRACEFUL DEGRADATION
Providing an alternative version of your functionality or making the user aware of shortcomings of a product as a safety measure to ensure that the product is usable.
SLIDE 21
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
PROGRESSIVE ENHANCEMENT
Starting with a baseline of usable functionality, then increasing the richness of the user experience step by step by testing for support for enhancements before applying them.
SLIDE 22
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
MOBILE FIRST
- Mobile is Exploding
- Mobile forces you to focus
- Mobile extends your capabilities
SLIDE 23
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
RESPONSIVE WEB DESIGN
- Fluid Grids
- Flexible Images & Media
- Media Queries
SLIDE 24
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
VISUALIZATION GOALS
Exploration Communication
SLIDE 25
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
VISUAL VARIABLES
position length area value color shape
- rientation
texture
SLIDE 26
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
SEMIOLOGY OF DATA
Jacques Bertin, 1967
SLIDE 27
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
PRE-ATTENTIVE PROCESSING
“unconscious accumulation of information from the environment”
SLIDE 28
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
gRaphaël
SLIDE 29
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
D3
Choropleth Map of U.S. Unemployment
SLIDE 30
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
Elliot Nahman
GOOGLE FUSION TABLES
https://docs.google.com/presentation/d/1htRKjDzkd6iHlPSxzonlqs_BNn2Yrsd-XixrfP_qLro/edit
SLIDE 31
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
PROJECT 3
Social & Distributed Classification
delicious
SLIDE 32
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
tagging folksonomy tagsonomy authority vocabulary control
VS.
SLIDE 33
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
TEST DRIVEN DEVELOPMENT
SLIDE 34
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
- Modularity (eliminate task duplication & reuse code)
- Abstraction (trust the implementation)
- Encapsulation (isolate variables/functions from other code)
Object-oriented programming (OOP) a programming paradigm using “objects” consisting of “properties” and “methods” together with their interactions - to design computer programs.
SLIDE 35
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
FLASK
A Python Micro-framework
- Routing (WSGI)
- T
emplating (jinja2)
- Database access (sqlite3)
SLIDE 36
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
NODE.JS
SLIDE 37
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
FINAL LAB: DOT VOTING
SLIDE 38
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
CLASS SURVEY
SLIDE 39
INFORMATION ORGANIZATION LAB
NOVEMBER 26, 2012
FOR NEXT TIME
Last Lab Final Project
You can find links to help with all of these on the course website at http://courses.ischool.berkeley.edu/290ta-iol/f12