iPhone Apps with HTML5
Upcoming SlideShare
Loading in...5
×
 

iPhone Apps with HTML5

on

  • 17,322 views

 

Statistics

Views

Total Views
17,322
Views on SlideShare
17,291
Embed Views
31

Actions

Likes
8
Downloads
171
Comments
1

3 Embeds 31

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

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

iPhone Apps with HTML5 iPhone Apps with HTML5 Presentation Transcript

  • iPhone Apps with HTML5 Thorsten Rinne I June 12th 2010 Dutch PHP Unconference 2010 © 2010 Mayflower GmbH
  • 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 Mayflower GmbH I June 12th 2010 I
  • Why iPhone? iPhone Apps with HTML5 I Mayflower 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 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
  • $$$$ Advantages of native apps Foto: James Jordon iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • Disadvantages of native apps $$$$ http://www.flickr.com/photos/acaben/ 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
  • JavaScript DOM 5 iPhone Apps with HTML5 I Mayflower 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 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? iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • Thank you very much! Contact Thorsten Rinne thorsten.rinne@mayflower.de +49 89 242054 31 Mayflower GmbH Mannhardtstraße 6 80538 München © 2010 Mayflower GmbH