LAST WEEK ON IO LAB

1
LAST WEEK ON IO LAB
If you havent done these things already, please
do them before we begin todays lecture
Install Mozilla Firebug OR Chrome Complete the
online skills assessment. Join the
i290-iolab_at_ischool mailing list. Check out
http//tinyurl.com/3rojd6y
2
Information Organization Lab

• Berkeley School of Information, Fall 2011

3
HTML
ltpgtThis is a paragraph.lt/pgt
ltimg src"http//site.com/a.png"gt
ltolgt ltligtItem Onelt/ligt ltligtItem
Twolt/ligtlt/olgt
4
HTML
element
ltpgtThis is a paragraph.lt/pgt
ltimg src"http//site.com/a.png"gt
ltolgt ltligtItem Onelt/ligt ltligtItem
Twolt/ligtlt/olgt
nested elements
5
HTML Structure
tag
ltpgtThis is a paragraph.lt/pgt
ltimg src"http//site.com/a.png"gt
ltolgt ltligtItem Onelt/ligt ltligtItem
Twolt/ligtlt/olgt
closing tag
6
HTML Attributes
ltpgtThis is a paragraph.lt/pgt
attribute
ltimg src"http//site.com/a.png"gt
ltol id"alphaList"gt ltli class"subtle"gtItem
Onelt/ligt ltli class"heavy"gtItem Twolt/ligtlt/olgt
7
Common HTML elements
head body
p a
ul ol
img li
form input
script link
div span
8
(Bad/Old) HTML
ltbodygt ltpgtThis is ltfont face"Papyrus"
size"3"gthideous!lt/fontgt ltform
onsubmit"validateForm()"gt ltinput
type"submit"gt lt/formgtlt/bodygt
9
(Bad/Old) HTML
ltbodygt ltpgtThis is ltfont face"Papyrus"
size"3"gthideous!lt/fontgt ltform
onsubmit"validateForm()"gt ltinput
type"submit"gt lt/formgtlt/bodygt
10
HTML5

• lt!DOCTYPE html PUBLIC
• "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
  "gtlthtml xmlns"http//www.w3.org/1999/xhtml"
  xmllang"en" lang"en"gt
• Simplifylt!DOCTYPE htmlgtlthtml lang"en"gt

11
HTML5
ltimg src"http//berkeley.edu/logo.png"gt
ltimg src"http//berkeley.edu/logo.png"/gt
ltimg src"http//berkeley.edu/logo.png"gt
12
Document Object Model
lthtmlgtltbodygtltdiv id"header"gt lth1gtDocument
Object Modellt/h1gtlt/divgtltdiv id"content"gt
ltpgtThis is my first paragraphlt/pgt ltpgtMy
second paragraph has a list ltulgt
ltligtItem Onelt/ligt ltligtItem
Twolt/ligt ltligtItem Threelt/ligt
lt/ulgt lt/pgt ltpgtThis is the third
paragraphlt/pgtlt/divgtlt/bodygtlt/htmlgt
13
Cascading style sheets
14
Rule Structure
From CSS The Definitive Guide
15
Selectors
CSS HTML
Tag p ltpgt
Id header id"header"
Class .author class"author"
Descendant(s) div p ltdivgt ltpgtHilt/pgt ltpgtTherelt/pgt lt/divgt
16
Common Properties
font-family color border display
margin font-size width padding
background position text-align float
See http//htmldog.com/reference/cssproperties/
for a good list of CSS2 properties, NOT
w3school. Even better edit in Chrome!
17
The Box model
Margin
Border
Padding
Height
18
CSS Resources
Available free for students at http//proquest.saf
aribooksonline.com.
19
Javascript crash course
20
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 /
  /

21
Variables
'Bob'
29
true
Numbers
Strings
Boolean
'Bob', 'John', 'Coye', 'Deirdre'
Arrays
'name' 'Arnold', 'weight' 240
Objects
22
Variables
var stateName 'California'
23
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
24
Arrays
An ordered collection of elements. Use square
brackets to indicate an array. Examples var
myArray 'dog', 'fish', 'cat'myArray.length
? 3myArray0 ? 'dog'myArray.push('horse') ?
myArray 'dog', 'fish', 'cat',
'horse' myArray.indexOf('fish') ?
1myArray.sort() ? 'cat', 'dog', 'fish'
25
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'
26
Functions
function add(x, y) return x y add(2,4)
? 6 // Same result, but more "what actually
happens" var add function(x, y) return x
y
27
Browser functions

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

28
Control structures

• if (3 gt 2) alert('3 is greater than 2')
• for (var i0 i lt myArray.length i)
  console.log( myArrayi)
• // 90 if, for, while, switch, break, continue

29
jQuery

• CSS meets JavaScript

30
New hotness vs.Old and Busted
(But with JavaScript instead of computers)
31
jQuery

• Selects objects from the DOM using CSS selectors.
• Do something with the selected elements.

Using jQuery involves two steps
32
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.

33
jQuery Hands-On
34
Web Browser Extensions

• Greasemonkey and Chrome and bears, oh my!

35
Extend What?

• Browser chrome
• Page content
• Page style
• Page behavior

36

• Greasemonkey

Mozilla Jetpack
Firefox Extensions
Chrome Extensions
37
Good for the Browsers
GOOD FOR US
38
Lets Try ithttp//code.google.com/chrome/extensi
ons/getstarted.html
39
For Next Week

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

40
HTML5 in 1 Slide

• Get started
• http//www.alistapart.com/articles/previewofhtml5
  http//diveintohtml5.org
• DOCTYPE lt!doctype htmlgt
• NEW TAGS
• ltheadergt ltfootergt ltnavgt ltarticlegt ltsectiongt
  ltasidegt
• (But IE 6,7--even IE 8!doesn't support styling
  these tags.)
• AUDIO/VIDEO
• ltaudiogt ltvideogt
• (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