SlideShare uma empresa Scribd logo
1 de 34
Baixar para ler offline
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

Mais conteúdo relacionado

Semelhante a iPhone Apps with HTML5

HTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPCHTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPC
Mayflower GmbH
 
local_and_mobile_search-gregory_markel.ppt
local_and_mobile_search-gregory_markel.pptlocal_and_mobile_search-gregory_markel.ppt
local_and_mobile_search-gregory_markel.ppt
zachbrowne
 
Developing cross platform mobile applications with phone gap for windows phone
Developing cross platform mobile applications with phone gap for windows phoneDeveloping cross platform mobile applications with phone gap for windows phone
Developing cross platform mobile applications with phone gap for windows phone
Colin Eberhardt
 
Appcelerator Corporate Overview
Appcelerator Corporate OverviewAppcelerator Corporate Overview
Appcelerator Corporate Overview
sschwarzhoff
 

Semelhante a iPhone Apps with HTML5 (20)

The Mobile Advantage - use the unique capabilities of mobile devices to diffe...
The Mobile Advantage - use the unique capabilities of mobile devices to diffe...The Mobile Advantage - use the unique capabilities of mobile devices to diffe...
The Mobile Advantage - use the unique capabilities of mobile devices to diffe...
 
HTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPCHTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPC
 
How to build PhoneGap App for Windows Phone?
How to build PhoneGap App for Windows Phone?How to build PhoneGap App for Windows Phone?
How to build PhoneGap App for Windows Phone?
 
Fowa2010 progressive-enhancement
Fowa2010 progressive-enhancementFowa2010 progressive-enhancement
Fowa2010 progressive-enhancement
 
Mobile Solutions: Challenging opportunities
Mobile Solutions: Challenging opportunitiesMobile Solutions: Challenging opportunities
Mobile Solutions: Challenging opportunities
 
110621 Brown Bag Lunch - iPhone & Android Apps for Business
110621 Brown Bag Lunch - iPhone & Android Apps for Business110621 Brown Bag Lunch - iPhone & Android Apps for Business
110621 Brown Bag Lunch - iPhone & Android Apps for Business
 
Jochen Wunder - 10 Mobile Startups using Xamarin
Jochen Wunder - 10 Mobile Startups using XamarinJochen Wunder - 10 Mobile Startups using Xamarin
Jochen Wunder - 10 Mobile Startups using Xamarin
 
Windows Phone 7.5 Mango - What's New
Windows Phone 7.5 Mango - What's NewWindows Phone 7.5 Mango - What's New
Windows Phone 7.5 Mango - What's New
 
local_and_mobile_search-gregory_markel.ppt
local_and_mobile_search-gregory_markel.pptlocal_and_mobile_search-gregory_markel.ppt
local_and_mobile_search-gregory_markel.ppt
 
The Fine Print of iOS Development
The Fine Print of iOS DevelopmentThe Fine Print of iOS Development
The Fine Print of iOS Development
 
iPhone transfer software
iPhone transfer softwareiPhone transfer software
iPhone transfer software
 
Wrangling Apps in the Smartphone Wild West
Wrangling Apps in the Smartphone Wild WestWrangling Apps in the Smartphone Wild West
Wrangling Apps in the Smartphone Wild West
 
Developing cross platform mobile applications with phone gap for windows phone
Developing cross platform mobile applications with phone gap for windows phoneDeveloping cross platform mobile applications with phone gap for windows phone
Developing cross platform mobile applications with phone gap for windows phone
 
Movable Type 5 Smartphone Option
Movable Type 5 Smartphone OptionMovable Type 5 Smartphone Option
Movable Type 5 Smartphone Option
 
Mobile app developer
Mobile app developerMobile app developer
Mobile app developer
 
Appcelerator Corporate Overview
Appcelerator Corporate OverviewAppcelerator Corporate Overview
Appcelerator Corporate Overview
 
How will iPhone app development change in future.pdf
How will iPhone app development change in future.pdfHow will iPhone app development change in future.pdf
How will iPhone app development change in future.pdf
 
I phone
I phoneI phone
I phone
 
NRWConf - Workshop Mobile Apps
NRWConf - Workshop Mobile AppsNRWConf - Workshop Mobile Apps
NRWConf - Workshop Mobile Apps
 
Mobile Apps Business
Mobile Apps BusinessMobile Apps Business
Mobile Apps Business
 

Mais de Mayflower GmbH

Plugging holes — javascript memory leak debugging
Plugging holes — javascript memory leak debuggingPlugging holes — javascript memory leak debugging
Plugging holes — javascript memory leak debugging
Mayflower GmbH
 

Mais de Mayflower GmbH (20)

Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
 
Why and what is go
Why and what is goWhy and what is go
Why and what is go
 
Agile Anti-Patterns
Agile Anti-PatternsAgile Anti-Patterns
Agile Anti-Patterns
 
JavaScript Days 2015: Security
JavaScript Days 2015: SecurityJavaScript Days 2015: Security
JavaScript Days 2015: Security
 
Vom Entwickler zur Führungskraft
Vom Entwickler zur FührungskraftVom Entwickler zur Führungskraft
Vom Entwickler zur Führungskraft
 
Produktive teams
Produktive teamsProduktive teams
Produktive teams
 
Salt and pepper — native code in the browser Browser using Google native Client
Salt and pepper — native code in the browser Browser using Google native ClientSalt and pepper — native code in the browser Browser using Google native Client
Salt and pepper — native code in the browser Browser using Google native Client
 
Plugging holes — javascript memory leak debugging
Plugging holes — javascript memory leak debuggingPlugging holes — javascript memory leak debugging
Plugging holes — javascript memory leak debugging
 
Usability im web
Usability im webUsability im web
Usability im web
 
Rewrites überleben
Rewrites überlebenRewrites überleben
Rewrites überleben
 
JavaScript Security
JavaScript SecurityJavaScript Security
JavaScript Security
 
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
 
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und AlloyNative Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
 
Pair Programming Mythbusters
Pair Programming MythbustersPair Programming Mythbusters
Pair Programming Mythbusters
 
Shoeism - Frau im Glück
Shoeism - Frau im GlückShoeism - Frau im Glück
Shoeism - Frau im Glück
 
Bessere Software schneller liefern
Bessere Software schneller liefernBessere Software schneller liefern
Bessere Software schneller liefern
 
Von 0 auf 100 in 2 Sprints
Von 0 auf 100 in 2 SprintsVon 0 auf 100 in 2 Sprints
Von 0 auf 100 in 2 Sprints
 
Piwik anpassen und skalieren
Piwik anpassen und skalierenPiwik anpassen und skalieren
Piwik anpassen und skalieren
 
Agilitaet im E-Commerce - E-Commerce Breakfast
Agilitaet im E-Commerce - E-Commerce BreakfastAgilitaet im E-Commerce - E-Commerce Breakfast
Agilitaet im E-Commerce - E-Commerce Breakfast
 

Último

Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Último (20)

Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 

iPhone Apps with HTML5

  • 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