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

Like this? Share it with your network

Share

iPhone Apps with HTML5

on

  • 17,501 views

 

Statistics

Views

Total Views
17,501
Views on SlideShare
17,470
Embed Views
31

Actions

Likes
8
Downloads
173
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 Presentation Transcript

  • 1. iPhone Apps with HTML5 Thorsten Rinne I June 12th 2010 Dutch PHP Unconference 2010 © 2010 Mayflower GmbH
  • 2. 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
  • 3. Blackberry? Android? iPhone! Palm Pre? iPhone? Maemo? Windows Mobile? iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • 4. Why iPhone? iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • 5. 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
  • 6. 400x more sales in App Store than in Android Market. Daten: Gamneloft iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • 7. WebKit Rendering Engine iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • 8. Web App vs. Native App iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • 9. What‘s a Web App? iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • 10. What‘s a native app? iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • 11. $$$$ Advantages of native apps Foto: James Jordon iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • 12. Disadvantages of native apps $$$$ http://www.flickr.com/photos/acaben/ iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • 13. http://www.flickr.com/photos/30046478@N08/ Advantages of web apps iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • 14. Disadvantages of web apps iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • 15. Which solution is best for you? (c) Chris Owens iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • 16. HTML 5 iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • 17. <!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
  • 18. CSS 3 iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • 19. <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
  • 20. JavaScript DOM 5 iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • 21. 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
  • 22. Look & Feel with CSS and JavaScript iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • 23. Demo jQTouch: Animationen and localStorage iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • 24. iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • 25. iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • 26. Examples Beep, Vibrate und Alert iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • 27. 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
  • 28. Demo Geolocation iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • 29. 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
  • 30. Demo Play & Record iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • 31. 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
  • 32. 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
  • 33. Questions? iPhone Apps with HTML5 I Mayflower GmbH I June 12th 2010 I
  • 34. 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