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

802 vues

Publié le

0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
802
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
32
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×