Embed Size (px)
DESCRIPTION
Citation preview
© 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?
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
Why iPhone?
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
Why iPhone?
App Store99%
Android Market & Co.1%
Daten: Gartner
Sales volume mobile apps in 2009
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
400x more sales in App Store than in Android Market.
Daten: Gamneloft
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
WebKit Rendering Engine
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
Web App vs. Native App
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
What‘s a Web App?
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
What‘s a native app?
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I Foto: James Jordon
$$$$Advantages of native apps
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
http://www.flickr.com/photos/acaben/
$$$$Disadvantages of native apps
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
http://www.flickr.com/photos/30046478@N08/Advantages of web apps
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
Disadvantages of web apps
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
Which solution is best for you?
(c) Chris Owens
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
HTML 5
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
<!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>
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
CSS 3
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
<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;
}
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
JavaScriptDOM 5
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
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>
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
Look & Feel with CSS and JavaScript
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
Demo jQTouch: Animationen and localStorage
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
Examples
Beep, Vibrate und Alert
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
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();}
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
Demo
Geolocation
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
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);}
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
Demo
Play & Record
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
Play ...
function playRecord(){ if (navigator.audio) {
$('#play-button').attr('src','stop.png'); navigator.audio.play();
} else {
alert("No audio file found."); }}
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
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);}
iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
Questions?
Thank you very much!
© 2010 Mayflower GmbH
Thorsten [email protected]+49 89 242054 31
Mayflower GmbHMannhardtstraße 680538 München
Contact
