iPhone Apps with HTML5

© 2010 Mayflower GmbH

iPhone Apps with HTML5

Thorsten Rinne I June 12th 2010

Dutch PHP Unconference 2010

iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I

Thorsten RinneSenior Developer - Team Lead - Head of Open Source Labs

‣Diplom-Informatiker (FH)‣Zend Certified Developer‣Certified Scrum Master‣PHP since PHP 3.0.16‣phpMyFAQ since 2001

iPhone!iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I

iPhone?

Android?Blackberry?

Palm Pre? Maemo?

Windows Mobile?


Why iPhone?


Why iPhone?

App Store99%

Android Market & Co.1%

Daten: Gartner

Sales volume mobile apps in 2009


400x more sales in App Store than in Android Market.

Daten: Gamneloft


WebKit Rendering Engine


Web App vs. Native App


What‘s a Web App?


What‘s a native app?

iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I Foto: James Jordon

$$$$Advantages of native apps


http://www.flickr.com/photos/acaben/

$$$$Disadvantages of native apps




http://www.flickr.com/photos/30046478@N08/Advantages of web apps




Disadvantages of web apps


Which solution is best for you?

(c) Chris Owens




HTML 5


<!DOCTYPE html><html lang="de"><head>

<meta charset=utf-8 /><meta name="viewport" content="user-scalable=no,width=device-width" /><title>HTML 5</title>

</head><body><section id="wrapper">

<header><h1><abbr>HTML</abbr> 5</h1>

</header><article>

<p>iPhone Apps with HTML5</p></article><footer>

<a href="http://www.mayflower.de">(c) 2010 Mayflower GmbH</a></footer>

</section></body></html>

http://twitter.com/rem

http://twitter.com/rem


CSS 3


<div id="preview-multi_text_shadows"><p>Multiple shadows are Hot</p>

</div>

#preview-multi_text_shadows p {background:none repeat scroll 0 0 black;color:white;font-size:30px;margin:10px;padding:40px 0 10px;text-align:center;text-shadow:0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;

}


JavaScriptDOM 5


function saveSettings(){

localStorage.location = $('#setting').val();return false;

}! ! function loadSettings(){

$('#setting').val(localStorage.location);}

localStorage with jQuery<section>

<div> <label for="setting">localStorage:</label> <input type="text" name="setting" value="" id="setting" />

</div></section>


Look & Feel with CSS and JavaScript


Demo jQTouch: Animationen and localStorage




Examples

Beep, Vibrate und Alert


Beep, Vibrate and Alert

function onAlertButton(){! navigator.notification.alert("Message","Title", "Label");}

function onVibrateButton(){! navigator.notification.vibrate(100); // not supported by iPhone} function onBeepButton(){! navigator.notification.beep();}


Demo

Geolocation


Geolocation

function getCurrentLocation(){! $('#location').append = "Get current position ...";

! var funk = function(position)! {

! $('#location').append = "Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude;

! };

! var fail = function(error)! {! ! alert("Error " + error);! }

navigator.geolocation.getCurrentPosition(funk,fail);}


Demo

Play & Record


Play ...

function playRecord(){ if (navigator.audio) {

$('#play-button').attr('src','stop.png'); navigator.audio.play();

} else {

alert("No audio file found."); }}


Record ...

function startRecord(){ navigator.audio = new Media(null, recordingSuccess, recordingFailure); $('#cd-button').attr('src','cd.png'); navigator.audio.startAudioRecord(); navigator.notification.activityStart(); $('#record-button').attr('src','stop.png'); navigator.audio.startAudioRecord();}

function stopRecord(){ $('#record-button').attr('src','record.png'); navigator.notification.activityStop(); $('#cd-button').attr('src','cd_remove.png'); navigator.audio.stopAudioRecord();}function recordingSuccess(url){ navigator.notification.activityStop(); // Tu etwas} function recordingFailure(error){ navigator.notification.activityStop(); alert("Aufnahme fehlgeschlagen: " + error);}


Questions?

Thank you very much!

© 2010 Mayflower GmbH

Thorsten [email protected]+49 89 242054 31

Mayflower GmbHMannhardtstraße 680538 München

Contact

mailto:[email protected]

mailto:[email protected]

iPhone Apps with HTML5

Technology