TP 6.

1. Corrections du quiz : 

Quelle écriture est correcte en HTML * :

• <p class="home">texte</p>
• <p class="width:100px">texte</p>
• <p>texte</p>
• <paragraphe>texte</paragraphe>

Quel attribut est-il convenu d'employer pour désigner un élément qui ne sera employé qu'une seule fois dans le document * :

• id
• name
• class
• alt
• title

Quel attribut correspond à une infobulle affichée au survol * :

• alt
• title
• src
• desc
• longdesc

Quelle écriture est valide en HTML * :

• <img alt="texte alternatif" />
• <image alt="texte alternatif" src="image.png" />
• <img alt="texte alternatif" src="image.png" />
• <img/>

Quelle proposition possède une syntaxe HTML correcte pour un titre de niveau 1 et une liste à puces * :

• <h1>Ceci est un titre <ul><li>Ceci est un élément d'une sites à puce</li></ul></h1>
• <h1>Ceci est un titre</h1><ul><li>Ceci est un élément d'une sites à puce</li></ul>
• <h1>Ceci est un titre</h1> <li><ul>Ceci est un élément d'une sites à puce</li></ul>

Que signifie l'acronyme HTML * :

• HyperText Markup Language
• HyperText Model Language
• HyperTiers Markup Language
• Hyperlink Markup Language

Quelle est la bonne sémantique pour rédiger la balise META "title" présente dans le "head" de la page * :

• <h1>Ceci est un titre</h1>
• <titre>Ceci est un titre</titre>
• <title>Ceci est un titre</title>
• <title>Ceci est un titre<title>

Quelle balise est utilisée pour débuter une liste non ordonnée * :

• <ul>
• <ol>
• <li>
• </ol>
• aucune

Quel élément dans cette liste est de type "block" ? * :

• <span>
• <strong>
• <p>
• <li>
• <section>
• <a>

Les résultats du quiz 

2. Préparation des TP et 8 et TP 9

• Avant le TP 8 du 10/12 9h/11h : 
  • Revoir le cours sur les formulaires HTML CSS (cours n°5)
  • Consulter le support de cours initiation PHP : http://mmi.reaccess.fr/php/
    • Et plus particulièrement le chapitre concernant les formulaires : http://mmi.reaccess.fr/php/#c7
• Avant le TP 9 du 06/01 9h/11h : 
  • Réaliser le tutoriel sur le PHP : https://openclassrooms.com/courses/concevez-votre-site-web-avec-php-et-mysql/introduction-a-php
    • au moins chapitres 1 à 4
  • Réaliser le tutoriel sur les formulaires : http://www.w3schools.com/php/php_forms.asp

3. Détail des travaux à réaliser au cours du TP 6 : 

3.1. Livraison d'un nouveau dossier zippé "javascript.zip"  

• Télécharger le fichier (javascript.zip 1,40 Mo 2015-11-23 11:49:38)
• fichier index.html dont la mise en place du code est finalisée
• répertoire css contenant 1 fichier style.css
• répertoire image

3.2. Décompression du répertoire par les étudiants

3.3. Les étudiants renomment le répertoire www en www-NOMBINOME1-NOMBINOME2

3.4. Ouverture des fichiers

• index.html dans le navigateur web
  • la page web est intégrée et gère en responsive design différents types de mise en forme
• styles.css dans un éditeur de code

3.5. Rappels : Principes d'intégration de modules javascript

• Il existe de nombreux "plugins" javascript tout prêts disponibles sur le web pour réaliser des slideshows, des galeries d'images,...
• Parmi tous les framework javascript disponible le plus connu et riche en ressource est jquery
• Lors de l'intégration d'un plugin jquery à une page web les principes sont toujours les mêmes
  • cela nécessite d'intégrer des fichiers externes :
    • le "moteur" du framework jquery (sur lequel sont basés tous les plugins existants)
    • le ou les javascripts spécifiques au "widget" choisi
    • des fichiers CSS
    • éventuellement des fichiers images
  • puis de modifier le code source HTML pour mettre en place le code HTML récupéré du widget choisi
  • une fois le widget en place et fonctionnel il faudra toujours
    • optimiser l'affichage en intervenant sur les fichiers CSS, JS, images
    • vérifier l'affichage en versions mobiles et tablettes
    • vérifier l'affichage en version print

3.6. Exemple 1 : Intégrer la page un slideshow responsive

• Nous souhaitons remplacer dans le haut de page "src bordeaux la formation" par un slideshow adaptable aux tablettes et mobiles
• Nous allons utiliser le "widget" http://www.woothemes.com/flexslider/
  • cliquer sur "download flexslider"
  • récupérer le dossier et décompressez le
  • aller dans "demo" et exécuter dan votre navigateur et dans un éditeur de code le fichier index.html
  • dans votre dossier tp10 remettez en place les fichiers venant de flexslider :
    • flexslider.css va dans votre dossier CSS
    • jquery.flexslider.js va dans un nouveau répertoire js que vous devez créer
    • les images présentes dans "demo/images" sont à recopier dans votre répertoire images
  • puis suivre les étapes décrites dans la page http://www.woothemes.com/flexslider/ pour la mise en place des différents éléments : "Get started with FlexSlider in 3 easy steps!"
    • intégrer dans votre page web les appels aux fichiers js et css (en faisant attention aux liens par rapport à vos propres répertoires)
    • ajouter le code html à votre page web à la place de <div class="flexslider"><h1>SRC Bordeaux <span>La formation</span></h1></div> (en faisant attention aux liens par rapport à vos propres répertoires et nom des images appelées)
    • ajouter dans le code html de votre page web avant la balise fermante </head> l'initalisation du slideshow
• Une fois ces modifications faites vous exécuter la page web dans le navigateur et le slideshow doit fonctionner, sinon reprendre les étapes précédentes et débugger
• Vous devez ensuite améliorer le rendu du slideshow
  • en ajustant les éléments de défilement
  • en recalant sa position
  • en améliorant son graphisme
  • en vérifiant / améliorant les versions mobiles et tablettes
  • en règlant la vistesse de défilement,...
• Une fois ce travail effectué vous pouvez essayer d'aller plus loin en utilisant et en mettant en place des versions customisées du slideshow comme http://flexslider.woothemes.com/thumbnail-slider.html

3.7. Exemple 2 : mise en place d'un compte à rebours

• Nous souhaitons mettre en place sur notre page web un compte à rebours
• Comme tous ces plugins on peut commencer notre recherche sur google en saisissant : "jquery countdown responsive"
• Le premier choix est à priori http://jquery-plugins.net/tag/countdown qui nous renvoie vers une liste de plugin
• Dans notre cas nous allons utiliser : http://jquery-plugins.net/flipcountdown-jquery-clock-timer-plugin-in-retro-flip-countdown-style
• Sur cette page cliquez ensuite sur "démo" cf http://xdsoft.net/jqplugins/flipcountdown/ :
  • cliquez sur "download" pour télécharger les sources
  • ... pour connaitre les instructions de mise en place du plugin dans votre page web
    • ATTENTION :  pour ces instructions le plugin du framework jquery est déjà appelé dans votre page web pour faire fonctionner le précédent slideshow, donc il ne sera à priori pas nécessaire de l'appeler de nouveau dans votre code. La ligne <script type="text/javascript" src="jquery.min.js"></script> n'est donc pas à intégrer
    • ATTENTION : les 2 javascripts mis en place (le slider et le compteur n'utilisent pas la même version du plugin de base jquery), vous devrez donc faire différents essais pour remplacer l'appel au plugin de base jquery mis en place en étape précédente par une version plus récente (celle proposée dans les sources de countdown)
  • réaliser toutes les instructions de mise en place de manière à ce que le compteur apparaisse dans votre page web à l'endroit de votre choix dans la page
    • pensez à la mise en place des répertoires img et screen et vérifier les liens vers les éléments quis sont appelés dans ces répertoires
  • une fois en place et fonctionnel vous pouvez paramètrer ce plugin :
    • en vérifiant modifiant les aspects et le rendu dans les versions mobiles et tablettes
    • en vérifiant modifiant les aspects et le rendu de la version print
    • en améliorant sa présentation et son intégration graphique dans la page
    • en règlant la date cible du compteur

3.8. Exemple 3 : mise en place d'un popin image

Selon les mêmes principes que vue précédemment vous devez mettre en place sur votre page web le plugin jquery prettyphoto : http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

3.9. Exemple 4 : mise en place d'un plugin plus complexe

Les plugins jquery disponibles sont de plus en plus évolués, certains permettent des mises en place d'éléments d'ergonomie efficaces pour les sites de certains clients, parmi eux Mixitup https://mixitup.kunkalabs.com/.

Vous pouvez comme dans les cas précédents tenter de mettre en place un tel module sur vos pages web !

3.10. Ressources et trucs et astuces

Il existe un grand nombre de ressources et plugins jquery prêts à l'emploi, vous pouvez utiliser google pour les trouver, sont répertoriés ci après d'autres ressources :

• http://tympanus.net/codrops/category/tutorials/
• https://plugins.jquery.com/
• http://www.unheap.com/

Un exemple de tutoriel : http://www.grafikart.fr/tutoriels/jquery

3.11. trucs et astuces

Lors de la mise en place de plugin jquery vous pouvez utiliser la console de développement pour vous aider à débugger :

• pour retrouver des styles exécutés en javascript ou en css
• pour vérifier qu'il n'y a pas d'erreurs javascript
• pour vérifier si vos chemins d'appels aux fichiers externes sont conformes

Il est souvent intéressant de comparer :

• le code html apparaissant dans la console de développement ou apparait le javascript exécuté côté client
• le code html ou code source simple de la page ou n'apparait que le code html dans javascript exécuté