une page web unique. Le but est d"éviter le chargement d"une nouvelle page à chaque action demandée,
et de fluidifier ainsi l"expérience utilisateur. Deux méthodes existent pour ce faire : l"ensemble des éléments de
l"application est chargé (contenu, images, CSS et JavaScript) dans un unique fichier HTML, soit les ressources
nécessaires sont récupérées et affichées dynamiquement en fonction des actions de l"utilisateur. Le terme a été
introduit par Steve Yen en 2005. ) dans le document. On exploite ensuite les attributs (http://demos.jquerymobile.com/1.2.0/docs/api/data-attributes.html) fournis par
JQuery Mobile :
•data-role: précise la nature du bloc (page|header|content|footer)
•data-position: spécifie où l"élément doit être positionné (top|bottom|right|left)
•data-inset
: spécifie si l"élément doit être contenu dans les marges ou à l"extérieur de celles-ci
(true|false) •data-transition : spécifie quelle transition utiliser lors du chargement de nouvelles pages (slide|slideup|slidedown|pop|flip|fade)
•data-theme: spécifie le thème graphique à utiliser pour les éléments d"un conteneur (a|b|c|d|e)
Une page jQuery Mobile " type » devra nécessairement : •déclarer undoctypeHTML5 imposer la taille de la surface duviewportà la valeur dedevice-widthdu terminal, sans zoom initial •intégrer les ressources jQuery Mobile (CSS et JavaScript) Le squelette d"une page jQuery Mobile sera le suivant :
Mapremière application web mobile !</ title><metacharset ="utf-8"><metaname ="viewport"content="width=device-width,initial -scale=1"><!--La feuille de styledejQuery Mobile -- ><linkrel ="stylesheet"href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/></p> <p></head><body><!--Le corps de l ?applicationweb mobile -- ><!--les bibliothèques pour jQuery Mobile -- ></p> <p><scriptsrc ="http://code.jquery.com/jquery-1.11.1.min.js"></script>BTS SN-IR LT La Salle Avignon3 /24 ?2019 <tvaira@free.fr> v.1.0</p> jQuery Mobile Séquence 1 : première application web mobile TP Web <p><scriptsrc ="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></body></html>Dans jQuery Mobile, chaque page est associée à une vue de l"application définie dans la balise<body>.</p> Une page est identifiée par l"attributdata-role="page". Le corps de la page web mobile aura la structure suivante : •un en-tête (data-role="header") •un contenu et un logo (data-role="content") •un pied de page (data-role="footer") Une simple page jQuery Mobile aura le contenu ci-dessous : <p><!DOCTYPEhtml ><htmllang ="fr"><head><title>Mapremière application web mobile !</ title><metacharset ="utf-8"><metaname ="viewport"content="width=device-width,initial -scale=1"><!--La feuille de styledejQuery Mobile -- ><linkrel ="stylesheet"href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/></p> <styletype ="text/css">.center{ text -align:center ; } <p></style></head><body><!--Le corps de l ?applicationweb mobile -- ><!--début d ?unepage -- ><sectionid="page1"data-role="page"><headerdata-role="header"><h1>Titredu site </h1></header><divdata -role="content"><!--un contenu -- ></p> <p>Uncontenu ...</ p></div><pclass="center"><!--un logo -- > <p><imgsrc ="logo.png"alt="Unlogo ! "width="50%"height="50%"/> </p><footerdata-role="footer"data-position="fixed">© 2019 </footer></section></p> fin de la page les bibliothèques pour jQuery <h3>Mobile</h3> <p><scriptsrc ="http://code.jquery.com/jquery-1.11.1.min.js"></script><scriptsrc ="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></body></html></p> <p>Dans cet exemple, la balise<div>peut être utilisée à la place des balises HTML5<section>,<header></p> et<footer>. Question 1.Créer une simple page jQuery Mobilemono-page.html. <p>Pour tester cette page, on utilisera de préfèrence un émulateur, ceux inclus dans les navigateurs</p> <h3>Chrome et Firefox avec la toucheF12.</h3> BTS SN-IR LT La Salle Avignon4 /24 ?2019 <tvaira@free.fr> v.1.0 jQuery Mobile Séquence 1 : première application web mobile TP Web <p>Il est aussi possible de l"exécuter directement dans le navigateur d"un terminal mobile (smartphone) si on</p> dispose d"un accès Wifi et d"un serveur Intranet ou Internet pour héberger le document web. <p>Question 2.Tester avec un émulateur le rendu de la page jQuery Mobilemono-page.html.Il est possible de définir plusieurs pages au sein d"un même document. Elles sont toutes définies à</p> <p>l"aide de l"attributdata-role="page"et identifiées à l"aide d"un uniqueid. On va utiliser des balisesa</p> pour naviguer entre les pages : <p><!DOCTYPEhtml ><htmllang ="fr"><head><title>Mapremière application web mobile !</ title><metacharset ="utf-8"><metaname ="viewport"content="width=device-width,initial -scale=1">BTS SN-IR LT La Salle Avignon5 /24 ?2019 <tvaira@free.fr> v.1.0</p> jQuery Mobile Séquence 1 : première application web mobile TP Web La feuille <p>de styledejQuery Mobile -- ><linkrel ="stylesheet"href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/></p> <styletype ="text/css">.center{ text -align:center ; } <p></style></head><body><!--Le corps de l ?applicationweb mobile -- ><!--début d ?unepage -- ><sectionid="page1"data-role="page"><headerdata-role="header"><h1>Site- Page 1 </h1></header><divdata -role="content"><!--un contenu -- ></p> <p>Uncontenu ...</ p><p><ahref ="#page2">Lapage 2 </a></p></div><pclass="center"><!--un logo -- > <p><imgsrc ="logo.png"alt="Unlogo ! "width="50%"height="50%"/> </p><footerdata-role="footer"data-position="fixed">© 2019 </footer></section></p> fin de la page début <p>d ?unedeuxième page -- ><sectionid="page2"data-role="page"><headerdata-role="header"><h1>Site- Page 2 </h1></header><divdata -role="content"><!--un contenu -- ></p> <p><p>Unautre contenu ...</ p><p><ahref ="#page1">Lapage 1 </a></p></div><footerdata-role="footer"data-position="fixed">© 2019 </footer></section></p> fin de la deuxième page les bibliothèques
<h3>TP Web : jQuery Mobile</h3> ?2019 tv <tvaira@free.fr> - v.1.0 <h3>Application Web Mobile</h3> 2 jQuery Mobile2 <h3>Travaux pratiques3</h3> Séquence 1 : première application web mobile 3 <h3>Séquence 2 : navigation</h3> 7 <h3>Séquence 3 : navigation et contenu</h3> 12 <h3>Annexe 1 : Le langage JavaScript</h3> 18 <h3>Présentation</h3> 18 <h3>Le typage</h3> 19 <h3>La syntaxe</h3> 20 <h3>Annexe 2 : LeframeworkjQuery21</h3> <h3>Présentation</h3> 21<br/> <h3>Autres : jQuery UI, DataTables et jQuery Mobile</h3> 22<br/> <h3>Annexe 3 : Viewport etResponsive Web Design24</h3> jQuery MobileTP WebTP Web : jQuery Mobile L"objectif de cetpest d"écrire une application web pour mobile. <p>Application Web MobileUne application web pour mobile est une application web " customisée » pour ce type de terminal</p> (taille, tactile, performances, ...) qui : <p>utilise une feuille de style CSS spécifique aux périphériques mobiles (media="handheld"cf.http:</p> //www.alsacreations.com/article/lire/930-css3-media-queries.html) fournit une interactivité imitant les applications natives (cf.http://www.hongkiat.com/blog/ mobile-frameworks/) jQuery Mobile <p>JQuery Mobile est unframeworkd"interface optimisé pour les appareils mobiles tactiles. Son objectif</p> <p>est de permettre de rapidement développer des applications mobiles ou des applications web monopage</p> <p>en réponse à la grande diversité des Smartphones et tablettes sur le marché. Il est développé par l"équipe</p> <p>du projet JQuery. Il s"appuie sur l"utilisation des technologies du web : HTML5, CSS3, DOM, Javascript,</p> Ajax. <p>De manière générale, on développe des documents HTML5 et jQuery Mobile ajoute des éléments et</p> des attributs de style adaptées aux terminaux mobiles. Les bibliothèques de jQuery Mobile sont requises et on peut : •soit les télécharger et les stocker en local sur votre serveur •soit les utiliser directement à partir du serveur publicjQuery.com(jQuery CDN) soit parmi les CDN (Content Delivery Networks) proposés, par exemple : Google CDN et Microsoft CDN <h3>On effectue l"importation dans le document HTML :</h3> •de la feuille de style spécifique mobile (.css) <linkrel ="stylesheet"href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/> •de la bibliothèque JavaScript jQuery (.js) <scriptsrc ="http://code.jquery.com/jquery-1.11.1.min.js"></script> •de la bibliothèque JavaScript jQuery Mobile (.js) <scriptsrc ="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <h3>Quelques liens utiles :</h3> •http://jquerymobile.com/ •https://www.w3schools.com/jquery/ •https://www.mobiletuto.com/developper-avec-jquery-mobile/ •http://demos.jquerymobile.com/BTS SN-IR LT La Salle Avignon2 /24 ?2019 <tvaira@free.fr> v.1.0 jQuery MobileTP WebTravaux pratiques Séquence 1 : première application web mobile Il est possible structurer l"application web suivant deux approches : •un document par page et on utilise des liens et l"idde la page (href="page2.html#page2") •un document contenantnpages et on utilise les ancres de la baliseaà partir de l"iddes pages (href="#page2") Une application web monopage (single-page applicationou SPA) est une application web accessible via <p>une page web unique. Le but est d"éviter le chargement d"une nouvelle page à chaque action demandée,</p> <p>et de fluidifier ainsi l"expérience utilisateur. Deux méthodes existent pour ce faire : l"ensemble des éléments de</p> <p>l"application est chargé (contenu, images, CSS et JavaScript) dans un unique fichier HTML, soit les ressources</p> <p>nécessaires sont récupérées et affichées dynamiquement en fonction des actions de l"utilisateur. Le terme a été</p> introduit par Steve Yen en 2005. <p>Lespagessont créés à partir de la balisesection(ou<div>) dans le document. On exploite ensuite</p> les attributs (http://demos.jquerymobile.com/1.2.0/docs/api/data-attributes.html) fournis par <h3>JQuery Mobile :</h3> •data-role: précise la nature du bloc (page|header|content|footer) <p>•data-position: spécifie où l"élément doit être positionné (top|bottom|right|left)</p> •data-inset <p>: spécifie si l"élément doit être contenu dans les marges ou à l"extérieur de celles-ci</p> (true|false) •data-transition : spécifie quelle transition utiliser lors du chargement de nouvelles pages (slide|slideup|slidedown|pop|flip|fade) <p>•data-theme: spécifie le thème graphique à utiliser pour les éléments d"un conteneur (a|b|c|d|e)</p> Une page jQuery Mobile " type » devra nécessairement : •déclarer undoctypeHTML5 imposer la taille de la surface duviewportà la valeur dedevice-widthdu terminal, sans zoom initial •intégrer les ressources jQuery Mobile (CSS et JavaScript) Le squelette d"une page jQuery Mobile sera le suivant : <p><!DOCTYPEhtml ><htmllang ="fr"><head><title>Mapremière application web mobile !</ title><metacharset ="utf-8"><metaname ="viewport"content="width=device-width,initial -scale=1"><!--La feuille de styledejQuery Mobile -- ><linkrel ="stylesheet"href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/></p> <p></head><body><!--Le corps de l ?applicationweb mobile -- ><!--les bibliothèques pour jQuery Mobile -- ></p> <p><scriptsrc ="http://code.jquery.com/jquery-1.11.1.min.js"></script>BTS SN-IR LT La Salle Avignon3 /24 ?2019 <tvaira@free.fr> v.1.0</p> jQuery Mobile Séquence 1 : première application web mobile TP Web <p><scriptsrc ="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></body></html>Dans jQuery Mobile, chaque page est associée à une vue de l"application définie dans la balise<body>.</p> Une page est identifiée par l"attributdata-role="page". Le corps de la page web mobile aura la structure suivante : •un en-tête (data-role="header") •un contenu et un logo (data-role="content") •un pied de page (data-role="footer") Une simple page jQuery Mobile aura le contenu ci-dessous : <p><!DOCTYPEhtml ><htmllang ="fr"><head><title>Mapremière application web mobile !</ title><metacharset ="utf-8"><metaname ="viewport"content="width=device-width,initial -scale=1"><!--La feuille de styledejQuery Mobile -- ><linkrel ="stylesheet"href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/></p> <styletype ="text/css">.center{ text -align:center ; } <p></style></head><body><!--Le corps de l ?applicationweb mobile -- ><!--début d ?unepage -- ><sectionid="page1"data-role="page"><headerdata-role="header"><h1>Titredu site </h1></header><divdata -role="content"><!--un contenu -- ></p> <p>Uncontenu ...</ p></div><pclass="center"><!--un logo -- > <p><imgsrc ="logo.png"alt="Unlogo ! "width="50%"height="50%"/> </p><footerdata-role="footer"data-position="fixed">© 2019 </footer></section></p> fin de la page les bibliothèques pour jQuery <h3>Mobile</h3> <p><scriptsrc ="http://code.jquery.com/jquery-1.11.1.min.js"></script><scriptsrc ="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></body></html></p> <p>Dans cet exemple, la balise<div>peut être utilisée à la place des balises HTML5<section>,<header></p> et<footer>. Question 1.Créer une simple page jQuery Mobilemono-page.html. <p>Pour tester cette page, on utilisera de préfèrence un émulateur, ceux inclus dans les navigateurs</p> <h3>Chrome et Firefox avec la toucheF12.</h3> BTS SN-IR LT La Salle Avignon4 /24 ?2019 <tvaira@free.fr> v.1.0 jQuery Mobile Séquence 1 : première application web mobile TP Web <p>Il est aussi possible de l"exécuter directement dans le navigateur d"un terminal mobile (smartphone) si on</p> dispose d"un accès Wifi et d"un serveur Intranet ou Internet pour héberger le document web. <p>Question 2.Tester avec un émulateur le rendu de la page jQuery Mobilemono-page.html.Il est possible de définir plusieurs pages au sein d"un même document. Elles sont toutes définies à</p> <p>l"aide de l"attributdata-role="page"et identifiées à l"aide d"un uniqueid. On va utiliser des balisesa</p> pour naviguer entre les pages : <p><!DOCTYPEhtml ><htmllang ="fr"><head><title>Mapremière application web mobile !</ title><metacharset ="utf-8"><metaname ="viewport"content="width=device-width,initial -scale=1">BTS SN-IR LT La Salle Avignon5 /24 ?2019 <tvaira@free.fr> v.1.0</p> jQuery Mobile Séquence 1 : première application web mobile TP Web La feuille <p>de styledejQuery Mobile -- ><linkrel ="stylesheet"href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/></p> <styletype ="text/css">.center{ text -align:center ; } <p></style></head><body><!--Le corps de l ?applicationweb mobile -- ><!--début d ?unepage -- ><sectionid="page1"data-role="page"><headerdata-role="header"><h1>Site- Page 1 </h1></header><divdata -role="content"><!--un contenu -- ></p> <p>Uncontenu ...</ p><p><ahref ="#page2">Lapage 2 </a></p></div><pclass="center"><!--un logo -- > <p><imgsrc ="logo.png"alt="Unlogo ! "width="50%"height="50%"/> </p><footerdata-role="footer"data-position="fixed">© 2019 </footer></section></p> fin de la page début <p>d ?unedeuxième page -- ><sectionid="page2"data-role="page"><headerdata-role="header"><h1>Site- Page 2 </h1></header><divdata -role="content"><!--un contenu -- ></p> <p><p>Unautre contenu ...</ p><p><ahref ="#page1">Lapage 1 </a></p></div><footerdata-role="footer"data-position="fixed">© 2019 </footer></section></p> fin de la deuxième page les bibliothèques<br/>
<style>
.lienss a{background:#efefef;color:blue;padding:10px;margin:5px;font-size:20px;}
</style>
<div style="display:block;margin-top:50px;" class="lienss">
<strong>1</strong><a href="https://pdfprof.com/PDF_DocsV2/PDF_GoAu_PDF_Gratuits.php?page=2&PDF=2" >2</a><a href="https://pdfprof.com/PDF_DocsV2/PDF_GoAu_PDF_Gratuits.php?page=3&PDF=2" >3</a><a href="https://pdfprof.com/PDF_DocsV2/PDF_GoAu_PDF_Gratuits.php?page=4&PDF=2" >4</a><a href="https://pdfprof.com/PDF_DocsV2/PDF_GoAu_PDF_Gratuits.php?page=5&PDF=2" >5</a> <a href="https://pdfprof.com/PDF_DocsV2/PDF_GoAu_PDF_Gratuits.php?page=2&PDF=2" >Next</a></div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div style="background:#000;color:white;padding:5px;">
<a href="https://pdfprof.com/privacy.html" style="color:white;">Politique de confidentialité -Privacy policy</a>
</div>
<br/>
<br/>
<br/>
</div>
</div>
</div>
</div>
<br/>
<div class="left">
<div style="width:100%;background:#fff;min-height:200px !important;">
<br/>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1570187411384203"
crossorigin="anonymous"></script>
<!-- Responsive1 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1570187411384203"
data-ad-slot="2836242943"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<br/>
</div>
</div>
<br/>
<br/>
<br/>
</div>
<div id="ddo"></div>
</body>
</html>
