Date post: | 05-Dec-2014 |
Category: |
Technology |
Upload: | phil-wolff |
View: | 6,299 times |
Download: | 0 times |
The iPhone:What We Know,
What We Don’t KnowChristopher Allen
July 7th, 2007
1
Christopher Allen
2
The iPhone:What we Know
3
Essential Reading<http://developer.apple.com/iphone/>
The iPhone:What We
Know
4
Essential Reading<http://www.iPhoneWebDev.com/>
The iPhone:What We
Know
5
Use Web Standards
The iPhone:What We
Know
6
Use Web Standards
HTML 4.01
XHTML 1.0
CSS 2.1 and partial CSS 3.xx
JavaScript 1.4, including DOM support
AJAX technologies, including XMLHTTPRequest
PDFQuicktime
The iPhone:What We Know
7
Things to Avoid
FlashSVGJava appletsPlug-in installationEmbedded VideoCustom x.509 certificates
The iPhone:What We Know
8
Follow Web Best Practices
Separate HTML, CSS and JavascriptUse well-structured and valid HTMLUse columns and blocks
no wide columns or text across page
Avoid framesetsUse CSS or iframes
Size graphic elements appropriatelydon’t rely on browser scaling!
Use small background imagestile the pieces
Don’t send unneeded datano 50K javascript where 10% is used
The iPhone:What We Know
9
The Finger is Not a Mouse
Fingers are bigger and blunterLinks and buttons need to be largerSelect 80px by 80px, with 20px of free space between
The iPhone:What We Know
10
The Finger is Not a Mouse
Fingers are bigger and blunterLinks and buttons need to be largerSelect 80px by 80px, with 20px of free space between
Fingers can do more...Double tapZoom in and center a blockTouch and holdDisplay an information bubbleOne or Two-finder DragMove the viewport or panFlickScroll up or downPinch Zoom in or out
The iPhone:What We Know
11
Design for Size
The iPhone:What We
Know
12
Be careful during user input
The iPhone:What We
Know
13
Use Columns
The iPhone:What We
Know
14
Use Small Blocks
The iPhone:What We
Know
15
Orientation a Problem
The iPhone:What We
Know
16
NY Times Portrait
The iPhone:What We
Know
17
NY Times Landscape
The iPhone:What We
Know
18
Viewports, not Windows
The iPhone:What We
Know
19
Viewports not Windows
Use <meta name="viewport"/> Meta Tagdefaults to width="480"
may look good on NY Times, but probably not on your site
simple (twice portrait)width="640"
native portraitwidth="320"; initial-scale=”1.0”;
maximum-scale=”1.0”; minimum-
scale=”1.0”; user-scalable=”false”
usefulwidth="480"; maximum-scale=”0.6667”;
your mileage may vary—try, try again!
The iPhone:What We Know
20
<body style="-webkit-text-size-adjust:none">
<body style="-webkit-text-size-adjust:auto">
<div style="-webkit-text-size-adjust:200%">
The iPhone:What We
Know
21
Use tel:, mailto: &maps.google.com/maps?
The iPhone:What We
Know
22
PDF works
The iPhone:What We
Know
23
H.264 with AAC
The iPhone:What We
Know
24
Use Reference Movies
The iPhone:What We
Know
25
Identifying the iPhone
Use CSS if possibleiPhone <link media="only screen and (max-device-width: 480px)"
href="iPhone.css"
type="text/css" rel="stylesheet" />
not-iPhone <link media="screen" href="fancy.css" type="text/css"
rel="stylesheet" />
bug: apple suggested doesn’t work on IE - workaround in progress
Use user-agent only as needif(navigator.userAgent.indexOf
('iPhone') != -1)
The iPhone:What We Know
26
Working eventswindow.onload formfield.onfocusformfield.onclickformfield.onblurformfield.onchangeformfield.onmouseoutformfield.onmouseoverformfield.onmousedown *formfield.onmouseupform.onreset
* triggered but not as expected
Others of these may work oddly!
The iPhone:What We Know
27
Non-functional events
window.oncontextmenuwindow.onresize * (partial, buggy)window.onscrollwindow.onerrorformfield.ondblclickformfield.onselectformfield.onkeydownformfield.onkeypressformfield.onkeyupform.onsubmitformfield.onmouseenterformfield.onmouseleaveformfield.onmousemovedocument.onkeydowndocument.onkeypressdocument.onkeyup
The iPhone:What We Know
28
Be aware, also no...
window.showModalDialog()hover stylestool tipsmousedown, instead happens
right before mouseup
The iPhone:What We Know
29
Limit sizes
HTML, CSS, Javascript <10MBdon’t send unneeded Javascript
Javascript execution <5 secGIF, PNG, and TIFF up to 8 MBi.e width * height * 4 < 8 MB
Animated GIF <2MBor only first frame shown
JPG up to 128MBwill be subsampled internally
Non-streamed media <10MB
The iPhone:What We Know
30
The iPhone:What we’ve Learned
31
Examples<http://www.iPhoneWebDev.com/examples/>
The iPhone:
What We’ve Learned
32
Examples
viewport samples
view source bookmarklet
selecting di!erent keypads
changing CSS on orientation change
hiding the URL bar onload
mailto: with arguments
iPhone user-agent detection
event testing
The iPhone:What We’ve Learned
33
Exemplars
gasapp.comJoe Hewitt’s navigation demo
movie.app (in 5 hours o! of nav)telemoosetada lists
Soon to be Exemplars
iPhone dragging
The iPhone:What We’ve Learned
34
Bugs & Workarounds
viewportwindow.pageYO!set always 0no workaround
window.resize event irregularbut there is hack around based on width
second text entry fails to invoke keyboardhack using javascript
tel: tags do not conform to RFC for p and w charactersuse non-conforming comma ,
bare images in safari render on 980pxuse new page
The iPhone:What We’ve Learned
35
Discussions
Four kinds of iPhone web pagescompatible, friendly, optimized, and web app
Standard for an iPhone friendly icon for directory apps
What qualities does an exemplar iPhone web app have?
Two finger scrollingDevelopment librariesSound in iPhone web gamesImplementing the back buttonType faces, type sizesDebugging javascript, FireBugAlpha/Beta testing new web apps
The iPhone:What We’ve Learned
36
Examples<http://www.iPhoneWebDev/examples.com/>
The iPhone:
What We’ve Learned
37
The iPhone:What we Don’t Know
38
Open Questions<http://barcamp.org/iPhoneDevCampOpenQuestions>
The iPhone:What We Don’t Know
39
Open QuestionsWhat is the list CSS3 and how should we use it?What Canvas support is available and how much can we do?How do we get the URL input panel?Are background pages executing?Do we know when the browser is interrupted by phone call?How do we get/set scaling ratio?A CSS3 media query that doesn’t
break IE?Persistent storage - can we rely on
cookies? Any Google Gears?
The iPhone:What We Don’t Know
40
Open Questions (continued)
Without many events, how do we make ui widgetsHow do we make two-finger
scrolling widgetsHow to do animations faster
size, direction, tricks?
What does iSafari do when...opening .lnk, .web archives
What does mail do when...receiving .vcf (vCard), .m3u, .url .lnk or .web archives
How best to use PDF and .docOpenID for iPhone?
The iPhone:What We Don’t Know
41
Open Questions<http://barcamp.org/iPhoneDevCampOpenQuestions>
The iPhone:What We Don’t Know
42
iPhoneDevCampHack-a-Thon
43
MacHack(b:1985 d:2003)
iPhoneDevCampHack-a-Thon
44
ValuesContribution
assisting the commonso!ering valueusefuless
Sharinghelping otherssource code available
Opennessgood questionsopen to people and ideasfree or open source
Fun & Cool!but we value simplicity & elegance
iPhoneDevCampHack-a-thon
45
We may give out tickets or smaller prizes for...
best question on Open Questionsbest answer on Open Questionstravelled furthestmost useless hackbest lookingworst lookingbest docsmost fun
iPhoneDevCampHack-a-thon
46
Diverse TeamsClient coders (javascript)Server coders (PHP, Perl, Ruby, etc.)CSS/DHTMLArtistsUser Interface/ExperienceTestingDocumentationHardware
iPhoneDevCampHack-a-thon
47
Signup by 1pm Sunday<http://barcamp.pbwiki.com/
iPhoneDevCampHackAThon>
iPhoneDevCampHack-a-Thon
48
5 minutes!
iPhoneDevCampHack-a-Thon
49
Hack-a-Thon Demo & Contest, Sunday 2pm-5pm
iPhoneDevCampHack-a-Thon x2 x3
50