1 / 39

LAST WEEK ON IO LAB

Learn the fundamentals of HTML, CSS, and JavaScript in this crash course. Install Firebug or Chrome, complete the online skills assessment, and join the i290-iolab@ischool mailing list.

claudiarichardson
Download Presentation

LAST WEEK ON IO LAB

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. LAST WEEK ON IO LAB If you haven’t done these things already, please do them before we begin today’s lecture Install Mozilla Firebug OR Chrome Complete the online skills assessment. Join the i290-iolab@ischool mailing list. Check out http://tinyurl.com/3rojd6y

  2. Berkeley School of Information, Fall 2011 Information Organization Lab

  3. HTML <p>This is a paragraph.</p> <imgsrc="http://site.com/a.png"> <ol><li>Item One</li><li>Item Two</li></ol>

  4. HTML element <p>This is a paragraph.</p> <imgsrc="http://site.com/a.png"> <ol><li>Item One</li><li>Item Two</li></ol> nested elements

  5. HTML Structure tag <p>This is a paragraph.</p> <imgsrc="http://site.com/a.png"> <ol><li>Item One</li><li>Item Two</li></ol> closing tag

  6. HTML Attributes <p>This is a paragraph.</p> attribute <imgsrc="http://site.com/a.png"> <ol id="alphaList"><li class="subtle">Item One</li><li class="heavy">Item Two</li></ol>

  7. Common HTML elements

  8. (Bad/Old) HTML <body><p>This is <fontface="Papyrus"size="+3">hideous!</font><formonsubmit="validateForm();"><inputtype="submit"></form></body>

  9. (Bad/Old) HTML <body><p>This is <fontface="Papyrus"size="+3">hideous!</font><formonsubmit="validateForm();"><inputtype="submit"></form></body>

  10. HTML5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> Simplify:<!DOCTYPE html><html lang="en">

  11. HTML5 <imgsrc="http://berkeley.edu/logo.png"> <imgsrc="http://berkeley.edu/logo.png"/> <imgsrc="http://berkeley.edu/logo.png">

  12. body div header div content h1 p p p ul li li li Document Object Model <html><body><divid="header"><h1>Document Object Model</h1></div><divid="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>

  13. Cascading style sheets

  14. Rule Structure From CSS: The Definitive Guide

  15. Selectors

  16. Common Properties See http://htmldog.com/reference/cssproperties/ for a good list of CSS2 properties, NOT w3school. Even better: edit in Chrome!

  17. CSS Resources Available free for students at http://proquest.safaribooksonline.com.

  18. Javascript crash course

  19. First Things First JavaScript is a high-level, object-oriented language used most often in web browsers. A semi-colon goes at the end of every statement. You can write comments in your code with // or /* */

  20. Variables 29 'Bob' true Numbers Strings Boolean ['Bob', 'John', 'Coye', 'Deirdre'] Arrays {'name': 'Arnold', 'weight': 240} Objects

  21. Variables var stateName = 'California';

  22. Strings A sequence of characters. (Secretly an object) Use single- or double-quotes to indicate a string. Examples var myName ="Larry";myName → "Larry"myName.length → 5myName.toUpperCase() → "LARRY"myName.indexOf('a') → 1

  23. Arrays An ordered collection of elements. Use square brackets to indicate an array. Examples var myArray = ['dog', 'fish', 'cat'];myArray.length → 3myArray[0] → ['dog']myArray.push('horse') → myArray == ['dog', 'fish', 'cat', 'horse'] myArray.indexOf('fish') → 1myArray.sort() → ['cat', 'dog', 'fish'];

  24. General Objects A collection of key-value pairs or named properties. Use braces to indicate an object. (Everything is an object) var person = {'name': 'Arnold', 'weight': 240, 'height': 6.2 }person.name → "Arnold"person.height → 6.2person.wife ='Maria';person.wife → 'Maria'person['wife'] → 'Maria'

  25. Functions functionadd(x, y) {return x + y;} add(2,4) → 6 // Same result, but more "what actually happens" varadd=function(x, y) {return x + y;}

  26. Browser functions alert('…') // Hey you confirm('…') // you sure? prompt('…') // Can I ask you something console.log('…') // Very useful!!

  27. Control structures if (3>2) {alert('3 is greater than 2');} for (var i=0; i < myArray.length; i++) { console.log( myArray[i]);}; // 90%: if, for, while, switch, break, continue

  28. jQuery CSS meets JavaScript +

  29. New hotness vs.Old and Busted (But with JavaScript instead of computers)

  30. jQuery • Selects objects from the DOM using CSS selectors. • Do something with the selected elements. Using jQuery involves two steps:

  31. Main jQuery operations • Attributes: Changing existing elements. • Traversing: Moving from selected elements in the DOM to others. • Manipulating: Inserting or removing elements. • Events: Attaching functions to events in the browser.

  32. jQuery Hands-On

  33. Web Browser Extensions • Greasemonkey and Chrome and bears, oh my!

  34. Extend What? • Browser chrome • Page content • Page style • Page behavior

  35. Greasemonkey Mozilla Jetpack Firefox Extensions Chrome Extensions

  36. Good for the Browsers GOOD FOR US

  37. Let’s Try ithttp://code.google.com/chrome/extensions/getstarted.html

  38. For Next Week Write your first Chrome Extension that does anything. Come with questions next class. Decide on an idea for Project 1.

  39. HTML5 in 1 Slide Get started: http://www.alistapart.com/articles/previewofhtml5http://diveintohtml5.org DOCTYPE: <!doctype html> NEW TAGS <header> <footer> <nav> <article> <section> <aside> (But IE 6,7--even IE 8!—doesn't support styling these tags.) AUDIO/VIDEO <audio> <video> (But then the codecs need to work, sometimes ogg, sometimes mp3…) FEATURES localStorage New input types (great for mobile, see http://diveintohtml5.org/forms.html ) Modernizr http://www.modernizr.com

More Related