iPhone Apps with HTML5



Thorsten Rinne I June 12th 2010
Dutch PHP Unconference 2010




                                ...
Thorsten Rinne
      Senior Developer - Team Lead - Head of Open Source Labs




‣Diplom-Informatiker (FH)
‣Zend Certified ...
Blackberry?                      Android?


   iPhone!
 Palm Pre?
              iPhone?
                                  ...
Why iPhone?




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



                 Sales volume mobile apps in 2009
                                                    Andro...
400x more sales in App Store
                     than in Android Market.



Daten: Gamneloft

                           ...
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 ...
Disadvantages of native apps




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

                                          ...
http://www.flickr.com/photos/30046478@N08/
                                            Advantages of web apps
             ...
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   Mayfl...
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,wid...
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 {
   backgr...
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"...
Look & Feel with CSS and JavaScript




                                      iPhone Apps with HTML5 I   Mayflower GmbH I J...
Demo jQTouch: Animationen and localStorage




                                    iPhone Apps with HTML5 I   Mayflower Gmb...
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");
}

funct...
Demo




       Geolocation


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

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

!   var funk = functio...
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'); ...
Record ...

function startRecord()
{
        navigator.audio = new Media(null, recordingSuccess, recordingFailure);
      ...
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
        ...
Upcoming SlideShare
Loading in …5
×

iPhone Apps with HTML5

15,720 views
15,604 views

Published on

Published in: Technology, News & Politics

iPhone Apps with HTML5

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

×