iPhone Apps with HTML5

Thorsten Rinne Senior 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 Apps with HTML5 I Mayflower GmbH I June 12th 2010 I

Blackberry? Android? iPhone! Palm Pre? iPhone? Maemo? Windows Mobile? iPhone Apps with HTML5 I Mayﬂower GmbH I June 12th 2010 I

Why iPhone? iPhone Apps with HTML5 I Mayﬂower GmbH I June 12th 2010 I

Why iPhone? Sales volume mobile apps in 2009 Android Market & Co. 1% App Store 99% Daten: Gartner iPhone Apps with HTML5 I Mayﬂower GmbH I June 12th 2010 I

400x more sales in App Store than in Android Market. Daten: Gamneloft iPhone Apps with HTML5 I Mayﬂower GmbH I June 12th 2010 I

WebKit Rendering Engine iPhone Apps with HTML5 I Mayﬂower GmbH I June 12th 2010 I

Web App vs. Native App iPhone Apps with HTML5 I Mayﬂower GmbH I June 12th 2010 I

What‘s a Web App? iPhone Apps with HTML5 I Mayﬂower GmbH I June 12th 2010 I

What‘s a native app? iPhone Apps with HTML5 I Mayﬂower GmbH I June 12th 2010 I

$$$$ Advantages of native apps Foto: James Jordon iPhone Apps with HTML5 I Mayﬂower GmbH I June 12th 2010 I

Disadvantages of native apps $$$$ http://www.ﬂickr.com/photos/acaben/ iPhone Apps with HTML5 I Mayﬂower GmbH I June 12th 2010 I

http://www.ﬂickr.com/photos/30046478@N08/ Advantages of web apps iPhone Apps with HTML5 I Mayﬂower GmbH I June 12th 2010 I

Disadvantages of web apps iPhone Apps with HTML5 I Mayﬂower GmbH I June 12th 2010 I

Which solution is best for you? (c) Chris Owens iPhone Apps with HTML5 I Mayﬂower GmbH I June 12th 2010 I

HTML 5 iPhone Apps with HTML5 I Mayﬂower 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 Mayﬂower GmbH I June 12th 2010 I

CSS 3 iPhone Apps with HTML5 I Mayﬂower 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 Mayﬂower GmbH I June 12th 2010 I

JavaScript DOM 5 iPhone Apps with HTML5 I Mayﬂower GmbH I June 12th 2010 I

localStorage with jQuery <section> <div> <label for="setting">localStorage:</label> <input type="text" name="setting" value="" id="setting" /> </div> </section> function saveSettings() { localStorage.location = $('#setting').val(); return false; } ! ! function loadSettings() { $('#setting').val(localStorage.location); } iPhone Apps with HTML5 I Mayﬂower GmbH I June 12th 2010 I

Look & Feel with CSS and JavaScript iPhone Apps with HTML5 I Mayﬂower GmbH I June 12th 2010 I

Demo jQTouch: Animationen and localStorage iPhone Apps with HTML5 I Mayﬂower GmbH I June 12th 2010 I

iPhone Apps with HTML5 I Mayﬂower GmbH I June 12th 2010 I

Examples Beep, Vibrate und Alert iPhone Apps with HTML5 I Mayﬂower 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 Mayﬂower GmbH I June 12th 2010 I

Demo Geolocation iPhone Apps with HTML5 I Mayﬂower 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 Mayﬂower GmbH I June 12th 2010 I

Demo Play & Record iPhone Apps with HTML5 I Mayﬂower 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 Mayﬂower 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 Mayﬂower GmbH I June 12th 2010 I

Questions? iPhone Apps with HTML5 I Mayﬂower GmbH I June 12th 2010 I

iPhone Apps with HTML5

by Mayflower GmbH

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 26

Statistics

iPhone Apps with HTML5 Presentation Transcript

http://www.slideshare.net	24
http://html5vn.blogspot.com	2