Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Enib cours c.a.i. web - séance #1 - html5 css3-js - td

882 views

Published on

  • Be the first to comment

Enib cours c.a.i. web - séance #1 - html5 css3-js - td

  1. 1. Conception dApplications Interactives : Applications Web et JEE Séance #1 Le web en 2012 - HTML5/CSS3/JS
  2. 2. Le web en 2012 : HTML5/CCS3/JS● Les bases du web ○ HTTP, URL, HTML, CSS, JS, AJAX...● HTML5 ○ HTML5, CSS3, le casse-tête des navigateurs... ○ Le web en 2012, le responsive design● Twitter Bootstrap ○ Outils, échafaudage, LessCSS, JQuery● Le développeur web en 2012 ○ Rôles, technologies, langages, veille technologique
  3. 3. TD HTML5 : Le cube
  4. 4. TD HTML5 : Le cube1. Produire un document HTML5 avec un élement div appelé cube ○ Ouvrir le fichier avec le navigateur et vérifier quil est cohérent ○ Valider le fichier avec HTML5 Validator ■ Noubliez pas ajouter la balise title, obligatoire2. Un cube a 6 faces : créer 6 éléments div à lintérieur de lélément cube, tous appartenant à une classe face, chacun avec une id selon sa position : front, back, top, bottom, left, right ○ Les faces doivent avoir des dimensions 200x200 px, un fond gris (background: #888) et une bordure noire dun pixel de large ■ Créer un élément style dans le head du document ■ Avec la définition de la classe face
  5. 5. TD HTML5 : Le cube3. Mettons les 6 faces les unes sur les autres : ● Position: absolute, top: 0, left: 04. Le cube va être centré ● Position: absolute, top: 200px, left: 400px5. Passons sur une vue isométrique sur lobjet cube ○ translateX, translateY, translateZ ○ rotateX, rotateY, rotateZ Exemple rotation sur Firefox : -moz-transform : rotateZ(65deg);
  6. 6. TD HTML5 : Le cube6. Maintenant on a 6 faces à plat. Pour chacunes des face, créer lélément de style correspondant à son id et appliquer les transformations 3D pour le mettre à sa place ○ Il ne faut pas oublier de positionner -moz-transform-style: preserve-3d; sur cube ○ Commencez par les faces front et back
  7. 7. TD HTML5 : Le cube7. Ajoutez des images à chaque face ○ Les images sont ici ○ Bien vérifier lorientation des faces ■ Les logos doivent être à lendroit
  8. 8. TD HTML5 : Le cube8. Maintenant on le fait tourner ! ○ Des rotations sur le cube ○ Utilisations danimation et @keyframe ○ Propriété utile : -moz-transform-origin: 100px 100px;
  9. 9. TD API publique : Twitter
  10. 10. TD API publique : Twitter1. Produire un document HTML5 avec un élement div appelé twitlist ○ Ouvrir le fichier avec le navigateur et vérifier quil est cohérent ○ Valider le fichier avec HTML5 Validator ■ Noubliez pas ajouter la balise title, obligatoire2. Donner un style à twitlist ○ centré, 500px large, avec bordure et fond
  11. 11. TD API publique : Twitter3. Dans twitlist afficher le tag #html5 en mode embedded ○ https://dev.twitter.com/docs/embedded-timelines● Il faudra : ○ Avoir un compte twitter ○ Se connecter sur son compte ○ Créer un widget ○ Prendre le code du widget et le mettre sur le HTML ○ Démarrer un serveur web servant le HTML ■ Le mode embedded demande localhost, non file ○ Pointer le navigateur vers ce serveur $ ./nodejs/bin/node ./nodejs/bin/http-server REPERTOIRE_TRAVAIL Starting up http-server, serving REPERTOIRE_TRAVAIL on port: 8080 Hit CTRL-C to stop the server
  12. 12. TD API publique : TwitterPour linstant on na mis que du code embedded. Cestlheure dutiliser une vraie API.4. Dans twitlist afficher le tag #html5 via lAPI JSON ○ https://dev.twitter.com/docs/api/1.1● On veut récupérer un hashtag : fonction search : ○ https://dev.twitter.com/docs/api/1.1/get/search/tweets ○ https://dev.twitter.com/docs/using-search● La réponse sera une liste JSON composé dobjets Tweet ○ https://dev.twitter.com/docs/platform-objects/tweets
  13. 13. TD API publique : Twitter● Problème de requête cross-domaine ○ On doit appeler lAPI Twitter depuis localhost ○ On doit utiliser JSONP● Générer un élément div par message à montrer ○ A la volée dans le callback● Pour cette première iteration, il suffit dafficher le auteur du message et le titre : ○ tweet.from_user + " : <b><i>" + tweet.text + "</b></i>"
  14. 14. TD API publique : TwitterPour linstant on a quelque chose de semblable à :
  15. 15. TD API publique : TwitterMaintenant il va falloir le rendre plus beau● Des classes CSS pour chaque élément de lobjet Tweet● Quelques règles pour mise en forme
  16. 16. TD API publique : Twitter5. Faire que la twitlist se mette à jour tous les 10 sécondes● Pour éviter la fuite de mémoire, réutiliser les containers ○ Nen créez pas à chaque fois
  17. 17. TD API Google Maps et Géolocalisation
  18. 18. TD API Google Maps etGéolocalisation1. Produire un document HTML5 avec un élement div appelé geoloc ○ Ouvrir le fichier avec le navigateur et vérifier quil est cohérent ○ Valider le fichier avec HTML5 Validator ■ Noubliez pas ajouter la balise title, obligatoire2. Donner un style à geoloc ○ centré, 500px large, avec bordure et fond
  19. 19. TD API Google Maps etGéolocalisation3. Utiliser la géolocalisation de HTML5 pour afficher dans geoloc les coordonées du navigateur (longitude, lattitude, altitude) ○ Utiliser navigator.geolocation.getCurrentPosition4. Utiliser lAPI Google Maps pour montrer dans geoloc la carte correspondant à la position du navigateur

×