Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Conception dApplications       Interactives : Applications Web et JEE            Séance #1 Le web en 2012 - HTML5/CSS3/JS
Le web en 2012 : HTML5/CCS3/JS● Les bases du web  ○ HTTP, URL, HTML, CSS, JS, AJAX...● HTML5  ○ HTML5, CSS3, le casse-tête...
TD HTML5 : Le cube
TD HTML5 : Le cube1. Produire un document HTML5 avec un    élement div appelé cube    ○   Ouvrir le fichier avec le naviga...
TD HTML5 : Le cube3. Mettons les 6 faces les unes sur les autres :   ●    Position: absolute, top: 0, left: 04. Le cube va...
TD HTML5 : Le cube6. Maintenant on a 6 faces à plat. Pour chacunes des   face, créer lélément de style correspondant à son...
TD HTML5 : Le cube7. Ajoutez des images à chaque face  ○ Les images sont ici  ○ Bien vérifier lorientation des faces    ■ ...
TD HTML5 : Le cube8. Maintenant on le fait tourner !   ○ Des rotations sur le cube   ○ Utilisations danimation et @keyfram...
TD API publique : Twitter
TD API publique : Twitter1. Produire un document HTML5 avec un    élement div appelé twitlist   ○   Ouvrir le fichier avec...
TD API publique : Twitter3. Dans twitlist afficher le tag #html5 en mode embedded    ○ https://dev.twitter.com/docs/embedd...
TD API publique : TwitterPour linstant on na mis que du code embedded. Cestlheure dutiliser une vraie API.4. Dans twitlist...
TD API publique : Twitter● Problème de requête cross-domaine    ○   On doit appeler lAPI Twitter depuis localhost    ○   O...
TD API publique : TwitterPour linstant on a quelque chose de semblable à :
TD API publique : TwitterMaintenant il va falloir le rendre plus beau●   Des classes CSS pour chaque    élément de lobjet ...
TD API publique : Twitter5. Faire que la twitlist se mette à jour tous les 10 sécondes●   Pour éviter la fuite de mémoire,...
TD API Google Maps et   Géolocalisation
TD API Google Maps etGéolocalisation1. Produire un document HTML5 avec un    élement div appelé geoloc   ○   Ouvrir le fic...
TD API Google Maps etGéolocalisation3. Utiliser la géolocalisation de HTML5 pour afficher dans    geoloc les coordonées du...
Prochain SlideShare
Chargement dans…5
×

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

906 vues

Publié le

  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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

×