SlideShare une entreprise Scribd logo
1  sur  34
Télécharger pour lire hors ligne
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

Contenu connexe

Similaire à 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
 

Similaire à 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
 

Plus 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
 

Plus 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
 

Dernier

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Dernier (20)

Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
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
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 

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