jQuery Mobile & Applications Web
Upcoming SlideShare
Loading in...5
×
 

jQuery Mobile & Applications Web

on

  • 10,698 views

Voici les slides de ma présentation à la Kiwi Party édition 2012 sur jQuery Mobile.

Voici les slides de ma présentation à la Kiwi Party édition 2012 sur jQuery Mobile.
KiwiParty, jQueryMobile,
L'exemple montré est ici : http://kiwiparty.nicolas-hoffmann.net/

Statistics

Views

Total Views
10,698
Views on SlideShare
10,569
Embed Views
129

Actions

Likes
2
Downloads
158
Comments
0

6 Embeds 129

http://lanyrd.com 78
http://delphine-viel.com 20
http://intranet.kryzalid.net 16
http://172.16.54.121 12
http://us-w1.rockmelt.com 2
https://si0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery Mobile & Applications Web jQuery Mobile & Applications Web Presentation Transcript

  • JQUERY MOBILE &LES APPLICATIONSWEB Kiwi Par tÿ 2012 Par Nicolas HOFFMANN Twitter : @Nico3333fr http://www.nicolas-hof fmann.net/
  • WEB MOBILE &APPLICATIONS ? Applications natives Applications web Deux mondes différents
  • APPLICATIONS WEB,AVANTAGES Consultable depuis un navigateur… … pas uniquement en mobilité Pas fermé à un unique écosystème Un développement pour tous ! Des technos ouvertes (HTML5, CSS3, JS)
  • JQUERY MOBILE Annoncé le 13 Août 2010 Version 1.0 le 16 Novembre 2011 Actuellement en version 1.10 (13 Avril 2012) http://jquerymobile.com/blog/
  • JQUERY MOBILE Un Framework basé sur jQuery Basé sur HTML5 et CSS Créer des sites/web apps adaptés aux smartphones, aux tablettes, etc.
  • POURQUOI JQUERYMOBILE ? Unrendu optimal sur de multiples plateformes (cross-platform)
  • POURQUOI JQUERYMOBILE ? Simple,facile à apprendre Pas besoin de beaucoup de connaissances de base pour démarrer avec Documentation mise à jour De bons résultats pour des efforts assez modiques
  • POURQUOI JQUERYMOBILE ? S’adapteaux périphériques : responsive sans effort
  • POURQUOI JQUERYMOBILE ? Assez facilement customisable Utilise ARIA Totalement dans l’esprit de jQuery « Write less, do more »
  • EN PRATIQUE http://kiwiparty.nicolas-hoffmann.net/ Le site de la Kiwi Partÿ En version jQuery Mobile !
  • EN PRATIQUE, POURDÉMARRER (1/3)Quelques fichiers à inclure dans le <head><link rel="stylesheet" href="jquery.mobile.min.css" /><script src="jquery.js"></script>…<script src="jquery.mobile.min.js"></script>Attention : jQuery 1.6.4 -> 1.7.1 !
  • EN PRATIQUE, POURDÉMARRER (2/3)Quelques fichiers à inclure dans le <head><link rel="stylesheet" href="jquery.mobile.min.css" /><script src="jquery.js"></script><script src="js_custom_kiwi.js"></script><script src="jquery.mobile.min.js"></script>Pour customiser les réglages par défaut, doit êtreentre jQuery et jQuery Mobile
  • EN PRATIQUE, POURDÉMARRER (3/3) Un loader Ajax charge les pages durant la navigation Il effectue les transitions demandées Peu importe si la page contient des redirections ou s’appelle elle-même (formulaire) Le tout est transparent pour l’internaute… … et aussi pour le développeur !
  • EN PRATIQUE, LE CODE (1/2)Principe : attributs data-* que jQuery Mobile va transformer en code : data-role="page"   data-transition="slide" data-icon="arrow-r" data-mini="true"  data-theme="b" Etc.
  • EN PRATIQUE, LE CODE (2/2)Le code de base d’une page<div data-role="page"> <div data-role="header" data-theme="f"> <h1>Kiwi Partÿ, by Alsacréations</h1> </div> <div data-role="content"> </div></div>
  • EN PRATIQUE, LES LISTES(1/2)La liste de l’accueil<ul data-role="listview" data-inset="true"><li> <a href="programme.php" data-transition="slide"> Le programme </a></li>…</ul>
  • EN PRATIQUE, LES LISTES(2/2)L’exemple utilise deux genres de listes, il y en a bien d’autres : Avec des séparateurs Numérotées Avec des bulles d’info, des images, etc. Avec des possibilités de recherche Etc.
  • EN PRATIQUE, LES BOUTONS(1/2)Exemple Bouton Accueil<a href="index.php" data-role="button" data-mini="true" data-inline="true" data-icon="arrow-l" data- iconpos="left" data-transition="slide" data- direction="reverse">Accueil</a>
  • EN PRATIQUE, LES BOUTONS(2/2)Exemple Boutons Orateurs<div data-role="controlgroup" data-type="horizontal" data-mini="true"> <a href="orateurs.php" data-role="button" data- mini="true" …>Orateurs</a> <a href="programme.php" data-role="button" data- mini="true" ..>Programme</a></div>
  • EN PRATIQUE, DISPOSITION(1/3)Accordéon du programme<div data-role="collapsible-set"> <div data-role="collapsible" data-content-theme="d"> <h3>9H - Accueil</h3> … </div> …</div>
  • EN PRATIQUE, DISPOSITION(2/3)Grid Layout du programme<div class="ui-grid-a"> <div class="ui-block-a">blabla</div> <div class="ui-block-b">blabla bis</div></div> Peut aller jusqu’à 5 colonnes
  • EN PRATIQUE, DISPOSITION(3/3) ATTENTION avec le Grid Layout ! Problème si beaucoup de contenus/colonnes sur un petit écran ! MAIS Assez facile à adapter via media-queries ! D’autres initiatives comme 960 Grid on jQuery Mobile : http://jeromeetienne.github.com/jquery-mobile-960/index.
  • EN PRATIQUE,FORMULAIRES (1/4)Les éléments habituels sont là : Radios, checkboxes, select (amélioré), text, textarea, etc.D’autres sont possibles : Switch (select à deux choix) Slider (type range)
  • EN PRATIQUE,FORMULAIRES (2/4)Exemple, appel du formulaire :<form action="contact.php" method="post" id="form" data-transition="flow" data-rel="dialog">La page de réception après traitement sera donc :<body><div data-role="dialog"> <div data-role="header" data-theme="e">… <div data-role="content">…
  • EN PRATIQUE,FORMULAIRES (3/4)Exemple, un champ texte avec label :<div data-role="fieldcontain"> <label for="id_name">Votre nom&nbsp;:</label> <input type="text" name="name" id="id_name" value="" required="required" data-mini="true" /></div>
  • EN PRATIQUE,FORMULAIRES (4/4)Considérations personnelles : Style responsive, à voir sur petits écrans (450px) avec beaucoup de contenu Aisément adaptable Attributs HTML5 required ? Autres types (email, tel, etc.) tolérés sans souci
  • EN PRATIQUE, POURTWEAKER (1/2)Le texte du loader Ajax est facilement paramétrable :$(document).bind("mobileinit", function(){ $.mobile.loadingMessageTextVisible = true; $.mobile.loadingMessage = "Loading kiwÿ modules...";} );
  • EN PRATIQUE, POURTWEAKER (2/2)Tous les éléments par défaut sont paramétrables : Transition par défaut (vers une page, vers dialog) Le loader et son message Les messages d’erreur Etc.
  • RETOUR D’EXPÉRIENCE (1/2) Très peu de styles CSS à ajouter Apprentissage assez facile Des résultats très rapides Performances correctes, exemple home (1st View : ~ 135 Ko ~ 2,5s ~ - de 20 requêtes) (Repeat View: 1 Ko ~ 0.5s) Tweakage assez simple pour « responsiver »
  • RETOUR D’EXPÉRIENCE (2/2) Simple de produire du code valide Structure Hx facile à conserver Ajout de thèmes faciles via Theme Roller : http://jquerymobile.com/themeroller/ Possible de créer ses transitions via CSS-animation Touch-events (tap, etc.), API Des possibilités d’utiliser jQuery Mobile pour faire une appli native via Phone Gap
  • CONCLUSION jQuery Mobile, c’est BIEN !
  • BONUS DE L’EXEMPLE Cache Manifest Quelques attributs HTML5 pour la forme Un peu de responsive design (programme) Géolocalisation/Itinéraire via Google Maps
  • SUPER-BONUS DE L’EXEMPLE
  • THAT’S FINI ! Merci pour « l’ immenserie de votre attenture » Merci à Alsacréations pour m’avoir permis de présenter tout cela Merci à tous les gens à qui j’ai oublié de dire merci Des questions ?