intro, version control, html5 - stanford university · intro, version control, html5 cs147l lecture...
TRANSCRIPT
![Page 1: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/1.jpg)
Intro, Version Control, HTML5
CS147L Lecture 1Mike Krieger
Thursday, September 24, 2009
![Page 2: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/2.jpg)
Hello!
- A little about me.
Thursday, September 24, 2009
![Page 3: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/3.jpg)
Hello!
- And a little bit about you?
Thursday, September 24, 2009
![Page 4: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/4.jpg)
By the end of today
- Know what this lab will & won’t teach you
- Have checked out week 1’s materials from SVN
- Make a basic, iPhone-friendly HTML5 document with a list and a video tag
Thursday, September 24, 2009
![Page 5: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/5.jpg)
Administrivia
- 1 unit, pass/fail
- Course credit = at least 8 of 9 lectures
- Honor code statement
Thursday, September 24, 2009
![Page 6: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/6.jpg)
What this class is about
- Practical skills, applied to weekly assignments
- HTML5, Javascript, CSS, and Python
- Emphasis on mobile
- Version control & Google Analytics
Thursday, September 24, 2009
![Page 7: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/7.jpg)
What this class isn’t about
- Objective-C and Cocoa (take CS193p instead)
- Cross-platform Javascript development (IE issues, etc)
Thursday, September 24, 2009
![Page 8: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/8.jpg)
What can’t you do with a webapp?
- Real-time accelerometer (but can detect rotation changes)
- Device APIs like e-mail, CoreData...
Thursday, September 24, 2009
![Page 9: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/9.jpg)
Some iPhone Webapps
Thursday, September 24, 2009
(demo in iPhone simulator)
![Page 10: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/10.jpg)
Should I take this class?
- “I’ve programmed a bit before, but haven’t ever written a web application” (take whole class)
- “I’ve done web development, but not worked with rich web applications or mobile” (take whole class)
- “I’m experienced in Web and mobile development” (don’t take for credit, come to lectures you’re interested in)
Thursday, September 24, 2009
![Page 11: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/11.jpg)
Quarter Project
- No hand-in assignments
- Weekly, incremental project: a cs147 portfolio (you can show this off later)
- Weekly checkouts from Subversion
Thursday, September 24, 2009
![Page 12: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/12.jpg)
Quarter at a glance2. CSS
3. CSS & Javascript
4. Javascript & jQuery, touch events
5. Video Prototyping
6. iPhone-specific features (location, etc)
7. Server-side
8. Server-side, part 2
9. Google Analytics & Experimentation
10. Dead week — no class, but I'll be here if you have Q's
Thursday, September 24, 2009
![Page 13: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/13.jpg)
Google Group
- http://groups.google.com/group/cs147-tech-2009
- TAs will be on hand to answer questions
- Help each other out as well
- I'll address recurring Q's in lab
Thursday, September 24, 2009
![Page 14: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/14.jpg)
Version control
- Why version control?
- Free hosting options
Thursday, September 24, 2009
useful real-world; you’re guaranteed to need it in a job, and it’ll get you up and running faster. Also, it’ll help you collaborate with your team-mates and avoid losing / overwriting work
![Page 15: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/15.jpg)
Get Subversion (SVN)
- Mac: you’re done!
- Windows: http://subversion.tigris.org/getting.html
- Explorer integration: http://tortoisesvn.tigris.org/
- Linux: you’re (probably) already done
Thursday, September 24, 2009
Linux
![Page 16: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/16.jpg)
How traditional version control works
Main repository Checkout
Commit
Thursday, September 24, 2009
In
![Page 17: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/17.jpg)
How version control worksTrunk
Revision 1:“Hello world!”
Revision 2:“Hello CS147!”
Checkout:“Hello CS147!”
Revision 3:“'Sup CS147!”
Thursday, September 24, 2009
![Page 18: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/18.jpg)
Checkout our code
svn checkout http://cs147lab.googlecode.com/svn/trunk/
Thursday, September 24, 2009
![Page 19: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/19.jpg)
Your own code
- Will help set up a group repository later in the quarter.
Thursday, September 24, 2009
![Page 20: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/20.jpg)
Questions?
Thursday, September 24, 2009
![Page 21: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/21.jpg)
Web Development Intro
Thursday, September 24, 2009
![Page 22: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/22.jpg)
What makes WebDev hard?
- Cross-platform issues make browser-specific hacks common
- Javascript is weakly-typed, so bugs can sometimes be hard to track down
- No single language to keep things together; Javascript talking to a variety of back-end systems
Thursday, September 24, 2009
![Page 23: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/23.jpg)
- Instant gratification!
- Huge reach for web apps
- and we're lucky...iPhone web apps can make a lot of assumptions
What makes Web Dev fun?
Thursday, September 24, 2009
![Page 24: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/24.jpg)
The 4 componentsHTML
<div>hello world</div>
CSS
div { font-weight: bold}
Javascript$('div').click(function...
Server-sideonRequest: return {"hello":"world"}
content
style
action
communication
Thursday, September 24, 2009
![Page 25: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/25.jpg)
Today: HTML5
- I’ll assume...
- you’ve had at least a little bit of experience with basic HTML & tags
Thursday, September 24, 2009
![Page 26: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/26.jpg)
A (brief) history of HTML
- Hypertext is an old idea
- Gopher v HTML, ca 1991
- Today: 3 main rendering engines
(Vannevar Bush)
Thursday, September 24, 2009
Presto, WebKit, Gecko
![Page 27: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/27.jpg)
HTML Structure
- An enclosing <html> tag
- A <head>er section
- External Javascript & CSS, metadata
- A <body>
- your content goes here
Thursday, September 24, 2009
![Page 28: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/28.jpg)
In the background...
- Browser parses your written HTML tags
- Builds a Document Object Model (DOM) representation
- Displays the rendered DOM to the user
- Waits for user interaction
Thursday, September 24, 2009
![Page 29: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/29.jpg)
The DOM
- Cross-browser standard
- How HTML ends up as a bunch of nodes
Thursday, September 24, 2009
![Page 30: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/30.jpg)
A sample DOM treeHTML
head body
divtitle
'hi there'
id='intro'
document.getElementById('intro')
document.body.firstChild;
<html>
� <head>
� � <title>My first page</title>
� </head>
� <body>
� � <div id=‘intro’>hi there</div>
� � </body>
� </html>
Thursday, September 24, 2009
![Page 31: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/31.jpg)
What goes in the head?
- <script>: in-line or external Javascript
- <link> and <style>: CSS
- <title>: page title, shown by browser
- <meta>: metadata, not shown to user
Thursday, September 24, 2009
![Page 32: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/32.jpg)
What goes in the body?
- <div>: a section of your page
- <span>: a piece of styled text
- <table>, <tr>, <td>: tables
- <form>, <input>: form elements
- <ul>, <ol>, <li>: list elements
- <a>: clickable links
Thursday, September 24, 2009
![Page 33: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/33.jpg)
Tables or <div>s?
- Some would argue: http://giveupandusetables.com
- Tables faster to get off the ground
- <div>s more accessible
- iPhone, probably easier to <div> it
Thursday, September 24, 2009
http://giveupandusetables.com
![Page 34: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/34.jpg)
(X)HTML
- Most websites today are HTML 4.01 or XHTML
- XHTML = strict(er) HTML
- every tag needs to be closed
- attributes need to be quoted
- self-closing tags (<br />)
Thursday, September 24, 2009
![Page 35: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/35.jpg)
HTML5
- Proposed standard
- New APIs: drag & drop, inter-document communication, localStorage (SQL on device)
- New elements: <canvas>, <audio>, <video>, <nav>, <footer>, etc.
- iPhone supports many of these
Thursday, September 24, 2009
![Page 36: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/36.jpg)
Deconstruction
Thursday, September 24, 2009
![Page 37: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/37.jpg)
center
a
form
font
div
body
Thursday, September 24, 2009
![Page 38: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/38.jpg)
center
a
form
font
div
body
Thursday, September 24, 2009
![Page 39: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/39.jpg)
divs, everywhere
Thursday, September 24, 2009
![Page 40: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/40.jpg)
divs, everywhere
Thursday, September 24, 2009
![Page 41: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/41.jpg)
form
form
div
input divs
Gmail for iPhone
Thursday, September 24, 2009
![Page 42: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/42.jpg)
form
form
div
input divs
Gmail for iPhone
Thursday, September 24, 2009
![Page 43: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/43.jpg)
SnowStack
Click here to open the Snow Stack live demo.
Thursday, September 24, 2009
demo in browser: Click here to open the Snow Stack live demo.
![Page 44: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/44.jpg)
div
div
div
SnowStack
Click here to open the Snow Stack live demo.
Thursday, September 24, 2009
demo in browser: Click here to open the Snow Stack live demo.
![Page 45: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/45.jpg)
Canvas &Audio
Experiment
http://9elements.com/io/projects/html5/canvas/
Thursday, September 24, 2009
![Page 46: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/46.jpg)
Canvas &Audio
Experiment
http://9elements.com/io/projects/html5/canvas/audio
<canvas>
Thursday, September 24, 2009
![Page 47: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/47.jpg)
iPhone-specific HTMLresource:
http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/
index.html
Thursday, September 24, 2009
![Page 48: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/48.jpg)
Setting device width
- In your header:
<meta name="viewport" content="width=device-width" />
Thursday, September 24, 2009
![Page 49: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/49.jpg)
Disabling zooming
- In your header:
<meta name="viewport" content="width=device-width, user-scalable=no" />
Thursday, September 24, 2009
![Page 50: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/50.jpg)
Detect rotation
- In your body tag:
<body onorientationchange='doSomething()'>
Thursday, September 24, 2009
![Page 51: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/51.jpg)
Change status bar
- In your body tag:
<meta name="apple-mobile-web-app-status-bar-style" content="grey|black|black translucent" />
Thursday, September 24, 2009
![Page 52: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/52.jpg)
Thursday, September 24, 2009
![Page 53: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/53.jpg)
Making your app full-screen
- In your header:
<meta name="apple-mobile-web-app-capable" content="yes" />
Thursday, September 24, 2009
![Page 54: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/54.jpg)
Home screen icon
- In your header:
<link rel="apple-touch-icon" href="my-icon-name.png"/>
Thursday, September 24, 2009
![Page 55: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/55.jpg)
Video and Audio
- In your body element:
<video width="640" height="360" src="video.mp4" autobuffer>
<audio src="song.m4a">
Thursday, September 24, 2009
![Page 56: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/56.jpg)
Form field with pre-filled values
<input type='text' placeholder='Your username' />
Thursday, September 24, 2009
![Page 57: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/57.jpg)
Search boxes
<input type='search' />
attributes:
results: number of results
autosave: id for autosaving searches
incremental: search as you type?
onsearch: search event handler
Thursday, September 24, 2009
![Page 58: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/58.jpg)
Detecting touch events
<div ontouchstart='doSomething()' />
(we'll do more of this in the Javascript events)
Thursday, September 24, 2009
![Page 59: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/59.jpg)
Portfolio: Part 1
Thursday, September 24, 2009
![Page 60: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/60.jpg)
<!DOCTYPE html>
<html>
� <head>
� � <title>CS147 Portfolio</title>
� </head>
� <body>
� � <div id='fullname'>Philip <span id='last-name'>Marlowe</span></div>
� � <div id='bio'>Crime-solver. Noir detective extraordinaire.</div>
� � <ul id='assignments'>
� � � <li>Name Passport</li>
� � � ...
� � </ul>
� </body>
</html>
Thursday, September 24, 2009
![Page 61: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/61.jpg)
Thursday, September 24, 2009
![Page 62: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/62.jpg)
<!DOCTYPE html>
<html>
� <head>
� � <title>CS147 Portfolio, Day 1</title>
� � <meta name=”viewport” content=”width=device-width, user-scalable=no” />
� </head>
� <body>
� � <div id='fullname'>Philip <span id='last-name'>Marlowe</span></div>
� � <div id='bio'>Crime-solver. Noir detective extraordinaire.</div>
� � <ul id='assignments'>
� � � <li>Name Passport</li>
� � � ...
� � </ul>
� </body>
</html>
Thursday, September 24, 2009
![Page 63: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/63.jpg)
Thursday, September 24, 2009
![Page 64: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/64.jpg)
<!DOCTYPE html>
<html>
� <head>
� � <title>CS147 Portfolio, Day 1</title>
� � <meta name="viewport" content="width=device-width, user-scalable=no" />
� </head>
� <body>
� � <div id='fullname'>Philip <span id='last-name'>Marlowe</span></div>
� � <div id='bio'>Crime-solver. Noir detective extraordinaire.</div>
� � <ul id='assignments'>
� � � <li><a href="name-passport.html">Name Passport</a></li>
� � � <li><a href="inspirational-designs.html">Inspirational Designs</a></li>
� � .....
Thursday, September 24, 2009
![Page 65: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/65.jpg)
Thursday, September 24, 2009
![Page 66: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/66.jpg)
<!DOCTYPE html>
<html>
� <head>
� � <title>CS147 Portfolio, Day 1</title>
� � <meta name="viewport" content="width=device-width, user-scalable=no" />
� </head>
� <body>
� � <div id='fullname'>Philip <span id='last-name'>Marlowe</span></div>
� � <div id='bio'>Crime-solver. Noir detective extraordinaire.</div>
� � <video src='marlowe.mp4'></video>
� � <ul id='assignments'>
� � .....
Thursday, September 24, 2009
![Page 67: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/67.jpg)
Thursday, September 24, 2009
![Page 68: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/68.jpg)
By the end of today
✓Know what this lab will & won’t teach you
✓Have checked out week 1’s materials from SVN
✓Make a basic, iPhone-friendly HTML5 document with a list and a video tag
Thursday, September 24, 2009
![Page 69: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/69.jpg)
Next week
- CSS: how to quickly go from basic, boring text and <div>s to a rich-looking layout
Thursday, September 24, 2009
![Page 70: Intro, Version Control, HTML5 - Stanford University · Intro, Version Control, HTML5 CS147L Lecture 1 Mike Krieger Thursday, September 24, 2009. Hello!-A little about me. Thursday,](https://reader030.vdocument.in/reader030/viewer/2022041121/5f34b6b6d5688339e100afbf/html5/thumbnails/70.jpg)
Questions?
Thursday, September 24, 2009