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 ORGANIZATION LAB NOVEMBER 26, 2012 I SCHOOL TOOLBOX
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 DOCUMENT OBJECT MODEL <html> body <body> <div id="header"> <h1>Document Object Model</h1> div div </div> header content <div id="content"> <p>This is my first paragraph</p> <p>My second paragraph has a list: <ul> h1 p p p <li>Item One</li> <li>Item Two</li> <li>Item Three</li> </ul> ul </p> <p>This is the third paragraph</p> </div> </body> li li li </html>
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 CASCADING STYLE SHEETS
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 AJAX AND CROSS-SITE SCRIPTING Web 2.0 FTW
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 GIT IN REVIEW • git add • git checkout • git commit -m • git diff • git commit -a • git log • git rm • git status • git reset • git pull • git reset --hard • git push
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 MEMEX (PROJ 1)
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 NEW TAGS & FEATURES • header, footer • localStorage • menu, nav • GeoLocation API • section, article • web video • figure • web audio • new input types • 3D, graphics, effects • placeholder text • web sockets
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 NEW FEATURES • RGBA & opacity • text shadows • rounded corners • word-wrapping • image borders • @font-face • box shadows • pseudo-classes • multi-column layouts • new selectors • multiple backgrounds • combinators
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 WHAT IS GOOD CODE?
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 METACRAP (PROJ 2) Cory Doctorow • 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
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 OAUTH ROLES https://developers.google.com/accounts/docs/OAuth2
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
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 PROGRESSIVE ENHANCEMENT VS. GRACEFUL DEGRADATION
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.
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.
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 MOBILE FIRST • Mobile is Exploding • Mobile forces you to focus • Mobile extends your capabilities
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 RESPONSIVE WEB DESIGN • Fluid Grids • Flexible Images & Media • Media Queries
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 VISUALIZATION GOALS Exploration Communication
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 VISUAL VARIABLES position length area value color shape orientation texture
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 SEMIOLOGY OF DATA Jacques Bertin, 1967
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 PRE-ATTENTIVE PROCESSING “unconscious accumulation of information from the environment”
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 gRaphaël
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 D3 Choropleth Map of U.S. Unemployment
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 GOOGLE FUSION TABLES Elliot Nahman https://docs.google.com/presentation/d/1htRKjDzkd6iHlPSxzonlqs_BNn2Yrsd-XixrfP_qLro/edit
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 delicious PROJECT 3 Social & Distributed Classification
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 tagging authority folksonomy VS. vocabulary control tagsonomy
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 TEST DRIVEN DEVELOPMENT
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 Object-oriented programming ( OOP ) a programming paradigm using “objects” consisting of “properties” and “methods” together with their interactions - to design computer programs. • Modularity (eliminate task duplication & reuse code) • Abstraction (trust the implementation) • Encapsulation (isolate variables/functions from other code)
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 FLASK A Python Micro-framework • Routing (WSGI) • T emplating (jinja2) • Database access (sqlite3)
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 NODE.JS
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 FINAL LAB: DOT VOTING
INFORMATION ORGANIZATION LAB NOVEMBER 26, 2012 CLASS SURVEY
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
Recommend
More recommend
