INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills...

of 46 /46
INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool mailing list. LAST WEEK ON IO LAB If you haven’t done these things already, please do them before we begin today’s lecture

Transcript of INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills...

Page 1: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Install Chrome or Firebug.

Complete the online skills assessment and lab Doodle.

Join the iolab@ischool mailing list.

LAST WEEK ON IO LABIf you haven’t done these things already, please do them before we

begin today’s lecture

Page 2: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Information Organization Lab

Page 3: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Delicious TrailmakerTake Two

Page 4: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Lab LabScheduling.

Page 5: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

HTML

<p>This is a paragraph.</p>

<img src="http://site.com/a.png">

<ol> <li>Item One</li> <li>Item Two</li></ol>

Page 6: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

HTML

<p>This is a paragraph.</p>element

<img src="http://site.com/a.png">

<ol> <li>Item One</li> <li>Item Two</li></ol>

nested elements

Page 7: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

HTML

<p>This is a paragraph.</p>

<img src="http://site.com/a.png">

<ol> <li>Item One</li> <li>Item Two</li></ol>

tagclosing

tag

Page 8: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

HTML

<p>This is a paragraph.</p>

<img src="http://site.com/a.png">

attribute

<ol> <li>Item One</li> <li>Item Two</li></ol>

Page 9: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Common elementshead body

p a

ul ol

img li

form input

script link

div span

Page 10: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

HTML

<body> <p>This is <font face="Papyrus" size="+3">hideous!</font> <form onsubmit="validateForm();"> <input type="submit"> </form></body>

Page 11: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

HTML

<body> <p>This is <font face="Papyrus" size="+3">hideous!</font> <form onsubmit="validateForm();"> <input type="submit"> </form></body>

Page 12: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

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"><!DOCTYPE html>

<html lang="en">

Page 13: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

HTML5

<img src="http://berkeley.edu/logo.png">

<img src="http://berkeley.edu/logo.png"/>

<img src="http://berkeley.edu/logo.png">

Page 14: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

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

divheader

divcontent

p p p

ul

li li li

h1

Page 15: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Cascading style sheets

Page 16: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Rule Structure

From CSS: The Definitive Guide

Page 17: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

SelectorsCSS HTML

Tag p <p>

Id #header id="header"

Class .author class="author"

Descendant div p <div><p>

Page 18: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

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.

Page 19: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

CSS Resources

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

Page 20: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Javascript crash course

Page 21: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

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 /* */

Page 22: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Variables

'Bob'29 true

['Bob', 'John', 'Coye', 'Deirdre']

{'name': 'Arnold', 'weight': 240}

Numbers Strings Boolean

Arrays

Objects

Page 23: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Variables

var stateName = 'California';

Page 24: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

StringsA sequence of characters.

Use single- or double-quotes to indicate a string.

Examplesvar myName = "Larry";

myName → "Larry"myName.length → 5

myName.toUpperCase() → "LARRY"myName.indexOf('a') → 1

Page 25: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

ArraysAn ordered collection of elements.

Use square brackets to indicate an array.

Examplesvar myArray = ['dog', 'fish', 'cat'];

myArray.length → 3myArray[0] → ['dog']

myArray.push('horse') → myArray == ['dog', 'fish', 'cat', 'horse']myArray.indexOf('fish') → 1

myArray.sort() → ['cat', 'dog', 'fish'];

Page 26: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

ObjectsA collection of key-value pairs or named properties.

Use braces to indicate an object.

Examplesvar person = {'name': 'Arnold', 'weight': 240, 'height': 6.2 }

person.name → "Arnold"person.height → 6.2

person.wife = 'Maria';person.wife → 'Maria'

person['wife'] → 'Maria'

Page 27: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Functionsfunction add(x, y) { return x + y;}add(2,4) → 6

var add = function(x, y) { return x + y;}

Page 28: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Browser functions

alert('…')confirm('…')prompt('…')

console.log('…')

Page 29: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Control structures

if (3 > 2) { alert('3 is greater than 2');}

for (var i=0; i < myArray.length; i++) { myArray[i];};

Page 30: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

jQueryCSS meets JavaScript

+

Page 31: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

jQuery

• Selects objects from the DOM using CSS selectors.

• Do something with the selected elements.

Using jQuery involves two steps:

Page 32: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Main jQuery operations

• Events: Attaching functions to events in the browser.

• Attributes: Changing existing elements: CSS styles, HTML attributes.

• Manipulating: Inserting or removing elements.

• Traversing: Moving from selected elements in the DOM to others.

Page 33: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

jQuery Hands-On

Page 34: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Web Browser ExtensionsGreasemonkey and Chrome and bears, oh my!

Page 35: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Extend What?

Browser chrome

Page content

Page style

Page behavior

Page 36: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Mozilla Jetpack

Firefox Extensions

Chrome Extensions

Greasemonkey

Page 37: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Good for the Browsers

GOOD FOR US

Page 38: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Let’s Try itTo the browser / text editor!

Page 39: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

?

Page 40: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Project 1Due September 21

Page 41: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Project 1

Page 42: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Project 1

Page 43: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Project 1

Page 44: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Project 1

Page 45: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

Project 1Due September 21

?

Page 46: INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010 Install Chrome or Firebug. Complete the online skills assessment and lab Doodle. Join the iolab@ischool.

INFORMATION ORGANIZATION LAB SEPTEMBER 7, 2010

For Next Week

Write your first Chrome Extension that does anything. Come with questions next class.

Decide on an idea for Project 1.

You can find links to help with all of these on the course website athttp://courses.ischool.berkeley.edu/i290-iol/f10/