SlideShare uma empresa Scribd logo
1 de 31
Applications  mobiles HTML5: boite à outils ,[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object]
www.agiletour.com Coding Dojos Barcamp JavaCamp ParisJS Agile Confs @PhilippeAntoine http://philippe.im
How to tell HTML from HTML5 ,[object Object],[object Object],[object Object],[object Object]
1/5   <doctype html>   ?
http://www.quirksmode.org/css/quirksmode.html
Zombie Browsers navigator.cssCompat navigator.userAgent
*{ box-sizing: border-box }  http://paulirish.com/2012/box-sizing-border-box-ftw/ CSS Solution
2/5 (responsive) Layouts
7 tables 37 niveaux
1 grid layout to rule them all
Viewport <meta name=&quot;viewport&quot;  content=&quot;width=device-width; initial-scale=1;&quot;> http://www.quirksmode.org/mobile/viewports2.html
http://www.flickr.com/photos/jorgecorrea/4359779134/
Resources http://piira.se/projects/ingrid/ http://bradfrostweb.com/blog/web/responsive-nav-patterns/ http://mediaqueri.es/
3/5 Interactions
Touch ,[object Object],[object Object],[object Object],[object Object]
Drag and drop Demo Drag and drop with: Mouse / Keyboard / Touch
4/5 Forms and Data
Forms ,[object Object],[object Object],[object Object],[object Object]
Data ,[object Object],[object Object],[object Object],[object Object]
Vanilla Javascript
5/5 Vendor Prefixes
http://christianheilmann.com/2012/02/16/stumbling-on-the-escalator/
http://goo.gl/6wkMf
http://leaverou.github.com/prefixfree/
Merci

Mais conteúdo relacionado

Mais procurados

WappZapp Pitch Node JS Meetup
WappZapp Pitch Node JS MeetupWappZapp Pitch Node JS Meetup
WappZapp Pitch Node JS Meetup
Wienke Giezeman
 
Android development War Stories
Android development War StoriesAndroid development War Stories
Android development War Stories
Lope Emano
 

Mais procurados (20)

Android workshop | LoopTalks
Android workshop | LoopTalksAndroid workshop | LoopTalks
Android workshop | LoopTalks
 
WordCamp Barcelona 2015 : From Design to a Theme
WordCamp Barcelona 2015 : From Design to a ThemeWordCamp Barcelona 2015 : From Design to a Theme
WordCamp Barcelona 2015 : From Design to a Theme
 
Contribute to Eclipse projects
Contribute to Eclipse projectsContribute to Eclipse projects
Contribute to Eclipse projects
 
Build and Deploy a Python Web App to Amazon in 30 Mins
Build and Deploy a Python Web App to Amazon in 30 MinsBuild and Deploy a Python Web App to Amazon in 30 Mins
Build and Deploy a Python Web App to Amazon in 30 Mins
 
WappZapp Pitch Node JS Meetup
WappZapp Pitch Node JS MeetupWappZapp Pitch Node JS Meetup
WappZapp Pitch Node JS Meetup
 
"The working architecture of NodeJs applications" Viktor Turskyi
"The working architecture of NodeJs applications" Viktor Turskyi"The working architecture of NodeJs applications" Viktor Turskyi
"The working architecture of NodeJs applications" Viktor Turskyi
 
Introduction to bootstrap
Introduction to bootstrapIntroduction to bootstrap
Introduction to bootstrap
 
Android development War Stories
Android development War StoriesAndroid development War Stories
Android development War Stories
 
EECS 497 Intro
EECS 497 IntroEECS 497 Intro
EECS 497 Intro
 
Lightning Talk: Git VCS
Lightning Talk: Git VCSLightning Talk: Git VCS
Lightning Talk: Git VCS
 
Project portal for SharePoint, talk at Norwegian SharePoint Community
Project portal for SharePoint, talk at Norwegian SharePoint CommunityProject portal for SharePoint, talk at Norwegian SharePoint Community
Project portal for SharePoint, talk at Norwegian SharePoint Community
 
Building End to-End Web Apps Using TypeScript
Building End to-End Web Apps Using TypeScriptBuilding End to-End Web Apps Using TypeScript
Building End to-End Web Apps Using TypeScript
 
Google web toolkit ( Gwt )
 Google web toolkit ( Gwt ) Google web toolkit ( Gwt )
Google web toolkit ( Gwt )
 
MongoDB World 2018: PWAs & Polymer: Let's Prototype a Modern Web App!
MongoDB World 2018: PWAs & Polymer: Let's Prototype a Modern Web App!MongoDB World 2018: PWAs & Polymer: Let's Prototype a Modern Web App!
MongoDB World 2018: PWAs & Polymer: Let's Prototype a Modern Web App!
 
Handle the error
Handle the errorHandle the error
Handle the error
 
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
 
A Year of Pyxley: My First Open Source Adventure
A Year of Pyxley: My First Open Source AdventureA Year of Pyxley: My First Open Source Adventure
A Year of Pyxley: My First Open Source Adventure
 
Blogging for hackers (english)
Blogging for hackers (english)Blogging for hackers (english)
Blogging for hackers (english)
 
GWT Architectures and Lessons Learned (WJAX 2013)
GWT Architectures and Lessons Learned (WJAX 2013)GWT Architectures and Lessons Learned (WJAX 2013)
GWT Architectures and Lessons Learned (WJAX 2013)
 
Javascript Apps at Build Artifacts
Javascript Apps at Build ArtifactsJavascript Apps at Build Artifacts
Javascript Apps at Build Artifacts
 

Semelhante a Webapps mobiles html5

European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
Christian Heindel
 
Mobile Web Applications using HTML5 [IndicThreads Mobile Application Develop...
Mobile Web Applications using HTML5  [IndicThreads Mobile Application Develop...Mobile Web Applications using HTML5  [IndicThreads Mobile Application Develop...
Mobile Web Applications using HTML5 [IndicThreads Mobile Application Develop...
IndicThreads
 

Semelhante a Webapps mobiles html5 (20)

Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
 
Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…
 
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
 
Developing apps on Maemo with Nokia Web Runtime
Developing apps on Maemo with Nokia Web RuntimeDeveloping apps on Maemo with Nokia Web Runtime
Developing apps on Maemo with Nokia Web Runtime
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
 
HTML5 Webinar - Mind Storm Software
HTML5 Webinar - Mind Storm SoftwareHTML5 Webinar - Mind Storm Software
HTML5 Webinar - Mind Storm Software
 
Whats New in Android
Whats New in AndroidWhats New in Android
Whats New in Android
 
HTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 TemplateHTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 Template
 
Mobile Web Applications using HTML5 [IndicThreads Mobile Application Develop...
Mobile Web Applications using HTML5  [IndicThreads Mobile Application Develop...Mobile Web Applications using HTML5  [IndicThreads Mobile Application Develop...
Mobile Web Applications using HTML5 [IndicThreads Mobile Application Develop...
 
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
 
Flex vs. HTML5 for RIAS
Flex vs. HTML5 for RIASFlex vs. HTML5 for RIAS
Flex vs. HTML5 for RIAS
 
Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5
 
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptHTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
 
Full stack-web-design
Full stack-web-designFull stack-web-design
Full stack-web-design
 
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolutio...
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolutio...WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolutio...
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolutio...
 
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 RevolutionWebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
 
HTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game TechHTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game Tech
 
Stronger than Chuck Norris: SharePoint in clouds, on earth, in subway and in ...
Stronger than Chuck Norris: SharePoint in clouds, on earth, in subway and in ...Stronger than Chuck Norris: SharePoint in clouds, on earth, in subway and in ...
Stronger than Chuck Norris: SharePoint in clouds, on earth, in subway and in ...
 
HTML5 Introduction
HTML5 IntroductionHTML5 Introduction
HTML5 Introduction
 
Building Cross-Platform Mobile Apps
Building Cross-Platform Mobile AppsBuilding Cross-Platform Mobile Apps
Building Cross-Platform Mobile Apps
 

Último

Último (20)

Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
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)
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
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
 
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
 
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
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
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...
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 

Webapps mobiles html5