SIG42 13 nov. 2012 Olivier BESSALEM
Les mobiles et les tablettes sont incontournables Le développement d’applications est compliqué ◦ Plusieurs plateformes ◦ Plusieurs tailles
Sig42
HTML5 pourrait-il être la solution?
Une révolution? Quoi de neuf? DEMO Compatibilité
Juste une évolution ◦ CSS pour la mise en page, dans sa version 3 ◦ Javascript reste incontournable
Toujours pas de compatibilité absolue ◦ La spécification HTML5 finale pour 2014 ◦ W3C et WHATWG divergent
Sig42
Meilleure sémantique
◦ Nouvelles balises: article, nav, section, figure etc… ◦ Programmation plus facile ◦ Meilleur référencement (microdata schema.org)
Multimédia Traitement d’image - Canvas Meilleure accessibilité (ARIA, W3C) Forte orientation mobile (et tablette) ◦ ◦ ◦ ◦
Sig42
Media-queries Géolocalisation Hors-connexion Stockage local ...
Sig42
http://localhost/html5/ http://slides.html5rocks.com/#landing-slide
Sig42
Sig42
IDE Frameworks DEMO
Notepad
Eclipse
◦ Eclipse IDE for Javascript Web developers ◦ Aptana studio 3 (ruby, rails, php, python)
Dreamweaver CS6 (payant) ◦ ◦ ◦ ◦
Sig42
Editeur graphique wysiwyg Responsive design Jquery mobile + phonegap Publication
Sencha Touch 2 HTML5 boilerplate Frameworks cités sur google
Sig42
Total
Sencha touch
8
HTML5 Boiler Plate
5
jQuery mobile
5
lungoJS (jeux)
4
52 framework
3
limeJS (jeux)
3
G5 Framework
2
+ 35 autres frameworks
Orienté mobiles MVC 50 composants ◦ ◦ ◦ ◦ ◦
Sig42
Boutons Listes Caroussel Animations Multimedia…
GPL ou Commercial http://localhost/sencha/
Sig42
Orienté sites web Responsive design jQuery, modernizr http://localhost/boilerplate/
Stratégies Phonegap DEMO
Sig42
Application native (ex: spécifique iPhone) ◦ ◦ ◦ ◦
(+) (+) (+) (+)
visible sur les stores mode déconnecté fonctions natives - agenda, contacts, périph… expérience utilisateur (ergonomie)
◦ ◦ ◦ ◦
((((-
installation nécessaire évolution via mise à jour, lenteur de publication gestion des différentes plateformes coût de développement élevé si multiplateforme
) ) ) )
Site web mobile ◦ (+) accès direct par une adresse web ◦ (+) mise à disposition immédiate ◦ (+) économique ◦ ◦ ◦ ◦
Sig42
((((-
) ) ) )
pas d’accès aux fonctions natives (périph…) connexion obligatoire (sauf html5) navigateurs adaptés (si html5) expérience utilisateur
Hybride Multiplateforme : Application HTML5 ◦ ◦ ◦ ◦ ◦
(+) (+) (+) (+) (+)
visible sur les stores mode déconnecté fonctions natives - agenda, contacts, périph… économique expérience utilisateur (ergonomie)
◦ (- ) installation nécessaire ◦ (- ) évolution via mise à jour, lenteur de publication
Sig42
Conteneur d’applications ◦ HTML, CSS, JS
Navigateur internet plein écran Accès restreint aux périphériques via JS ◦ ◦ ◦ ◦
Accéléromètre, Gyroscope, Compas Camera, Capture Contacts, Notifications Multimédia …
Fabrique d’application mobiles ◦ iOS, Android, Blackberry, Windows Phone…
Sig42
Avec HTML5 / CSS3 / Javascript ◦ Sites web adaptatifs pour PC et mobiles ◦ Applications mobiles via Phonegap
Accès restreint aux périphériques Mode déconnecté Stockage de données Graphismes
Multi-plateformes ◦ iOS, Android, Blackberry, Windows Phone… ◦ Développements à coûts réduits
Sig42
◦ ◦ ◦ ◦ ◦
http://www.html5rocks.com/ http://www.sencha.com/products/touch/ http://html5boilerplate.com/ http://www.initializr.com/ http://www.phonegap.com/
◦ http://martinfowler.com/articles/multiMobile ◦ http://www.smile.fr/Livres-blancs/eBusiness/Mobile
Sig42
21 décembre 2012 Fabien CREPIN
