iPhone Dev Camp Keynote

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


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


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


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


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!


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)


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!


27

Non-functional events

window.oncontextmenuwindow.onresize * (partial, buggy)window.onscrollwindow.onerrorformfield.ondblclickformfield.onselectformfield.onkeydownformfield.onkeypressformfield.onkeyupform.onsubmitformfield.onmouseenterformfield.onmouseleaveformfield.onmousemovedocument.onkeydowndocument.onkeypressdocument.onkeyup


28

Be aware, also no...

window.showModalDialog()hover stylestool tipsmousedown, instead happens

right before mouseup


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


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


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


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


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?


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?


41

Open Questions<http://barcamp.org/iPhoneDevCampOpenQuestions>


42

iPhoneDevCampHack-a-Thon

43

MacHack(b:1985 d:2003)


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


46

Diverse TeamsClient coders (javascript)Server coders (PHP, Perl, Ruby, etc.)CSS/DHTMLArtistsUser Interface/ExperienceTestingDocumentationHardware


47

Signup by 1pm Sunday<http://barcamp.pbwiki.com/

iPhoneDevCampHackAThon>


48

5 minutes!


49

Hack-a-Thon Demo & Contest, Sunday 2pm-5pm

iPhoneDevCampHack-a-Thon x2 x3

50

<mailto:[email protected]>

51

iPhone Dev Camp Keynote

Technology

Transcript of iPhone Dev Camp Keynote