INFORMATION ORGANIZATION LAB INFORMATION ORGANIZATION LAB SEPTEMBER - - PowerPoint PPT Presentation

▶
information organization lab
SMART_READER_LITE
LIVE PREVIEW

INFORMATION ORGANIZATION LAB INFORMATION ORGANIZATION LAB SEPTEMBER - - PowerPoint PPT Presentation

Sep 22, 2022 281 likes •554 views

INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012 INFORMATION ORGANIZATION LAB INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012 LAST TIME ON IOLAB INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012 GIT GUI CLIENTS MAC GitX GitT ower

slide-1
SLIDE 1 INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012

INFORMATION ORGANIZATION LAB

slide-2
SLIDE 2 INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012

LAST TIME ON IOLAB

slide-3
SLIDE 3 INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012

GIT GUI CLIENTS

  • MAC
  • GitX
  • GitT
  • wer
  • PC
  • SmartGit
  • T
  • rtoiseGit
slide-4
SLIDE 4 INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012

TODAY

  • Project 1 Tips & More
  • jQuery
  • Callbacks
  • AJAX
  • Web Standards/Practices & HTML5
  • Semantic HTML & Accessibility
  • HTML5
  • Open Lab: Group Time / Proj 1 Q&A
slide-5
SLIDE 5 INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012

SOME TIPS FOR PROJECT 1

  • Make a drawing or sketch of what you want to do.
  • Write the HTML first, then the JavaScript.
  • When you are writing the JavaScript code, first write comments

in plain English describing what you want to do.

  • If it doesn’t work, ask questions!
slide-6
SLIDE 6 INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012

JQUERY: GET AND SET

Complete list at http://api.jquery.com/category/attributes/

$(‘a’).text(); //get $(‘a’).text(‘Hello world’); //set

<a id="linkToCal" href="http:// berkeley.edu">UC Berkeley</a>

$(‘a’).attr(‘href’); $(‘a’).attr(‘href’, ‘http://google.com’);

slide-7
SLIDE 7 INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012

JQUERY: FORMS

Complete list at http://api.jquery.com/category/forms/ See the documentation for .val() in particular: http://api.jquery.com/val/

$(‘#name’).val(); $(‘#name’).val(‘Mary’); <input id="name" type="text" value="John"> $(‘#name’).attr(‘value’); $(‘#name’).attr(‘value’, ‘Mary’);

slide-8
SLIDE 8 INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012

CALLBACKS AND TIMING

function mySandwich(param1, param2, callback) { alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2); $('#sandwich').animate({
  • pacity: 0
}, 5000, function() { // Animation complete. }); if (callback && typeof(callback) === "function") { callback(); } } mySandwich('ham', 'cheese', function() { alert('Finished eating my sandwich.'); }); From: http://www.impressivewebs.com/callback-functions-javascript/ Example: http://jsbin.com/abimob/141/edit
slide-9
SLIDE 9 INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012

AJAX AND CROSS-SITE SCRIPTING

Web 2.0 FTW

slide-10
SLIDE 10 INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012

AJAX WHAT?

Asynchronous Javascript and XmlHttpRequest (XHR)

slide-11
SLIDE 11 INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012

AJAX WHAT?

Asynchronous Javascript and Javascript

slide-12
SLIDE 12 INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012

AJAX WHAT?

¡ ¡ ¡$.get('http://gmail.com', ¡function(xml){ ¡ ¡ ¡ ¡ ¡ ¡console.log(xml); ¡ ¡ ¡});

Further reading: http://en.wikipedia.org/wiki/Ajax_(programming)
slide-13
SLIDE 13 INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012

XSS

(Cross-site scripting)

slide-14
SLIDE 14 INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012

XSS

(Cross-site scripting)

Further reading: http://en.wikipedia.org/wiki/Cross-site_scripting
slide-15
SLIDE 15 INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012

SAME-ORIGIN POLICY

(Alas, no cross-site scripting!)

Further reading: http://en.wikipedia.org/wiki/Same_origin_policy
slide-16
SLIDE 16 INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012

WORKAROUNDS

(Cross-site scripting, yay!)

  • Proxy server
  • JSONP
slide-17
SLIDE 17 INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012

WEB STANDARDS

Semantic HTML & Web Accessibility

slide-18
SLIDE 18 INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012

SEMANTIC HTML

<div id='sidebar'> <div id='left'> <p class='caution'> <p class='yellow'> <h1>, <h2>, <h3>, etc. <span class='bigFont'>

Meaning, not Presentation

slide-19
SLIDE 19 INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012

SEMANTIC HTML

<div id='sidebar'> <div id='left'> <p class='caution'> <p class='yellow'> <h1>, <h2>, <h3>, etc. <span class='bigFont'>

Meaning, not Presentation

slide-20
SLIDE 20 INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012
slide-21
SLIDE 21 INFORMATION ORGANIZATION LAB SEPTEMBER 17, 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-22
SLIDE 22 INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012

BROWSER SUPPORT

  • http://caniuse.com/
  • http://html5readiness.com/

So when can we use all this cool stuff? Now! (mostly.) Good places to check:

slide-23
SLIDE 23 INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012

OPEN LAB

Project 1 Group Time / Open Q&A

slide-24
SLIDE 24 INFORMATION ORGANIZATION LAB SEPTEMBER 17, 2012

FOR NEXT TIME

HTML5 & CSS3 feature demos & exercises Homework 1 feedback out today via email Course Feedback Survey

You can find links to help with all of these on the course website at http://courses.ischool.berkeley.edu/290ta-iol/f12