Bootcamp d'Initiation à Android - 2013/11/30 - Live coding : Hello world!
Enib cours c.a.i. web - séance #1 - html5 css3-js - td
1. Conception d'Applications
Interactives :
Applications Web et JEE
Séance #1
Le web en 2012 - HTML5/CSS3/JS
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
4. TD HTML5 : Le cube
1. Produire un document HTML5 avec un
élement div appelé cube
○ Ouvrir le fichier avec le navigateur et vérifier qu'il est cohérent
○ Valider le fichier avec HTML5 Validator
■ N'oubliez pas ajouter la balise title, obligatoire
2. Un cube a 6 faces : créer 6 éléments div à
l'inté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 d'un pixel de large
■ Créer un élément style dans le head du document
■ Avec la définition de la classe face
5. TD HTML5 : Le cube
3. Mettons les 6 faces les unes sur les autres :
● Position: absolute, top: 0, left: 0
4. Le cube va être centré
● Position: absolute, top: 200px, left: 400px
5. Passons sur une vue isométrique
sur l'objet cube
○ translateX, translateY,
translateZ
○ rotateX, rotateY, rotateZ
Exemple rotation sur Firefox :
-moz-transform : rotateZ(65deg);
6. TD HTML5 : Le cube
6. 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. TD HTML5 : Le cube
7. Ajoutez des images à chaque face
○ Les images sont ici
○ Bien vérifier l'orientation des faces
■ Les logos doivent être à l'endroit
8. TD HTML5 : Le cube
8. Maintenant on le fait tourner !
○ Des rotations sur le cube
○ Utilisations d'animation et @keyframe
○ Propriété utile : -moz-transform-origin: 100px 100px;
10. TD API publique : Twitter
1. Produire un document HTML5 avec un
élement div appelé twitlist
○ Ouvrir le fichier avec le navigateur et vérifier qu'il est cohérent
○ Valider le fichier avec HTML5 Validator
■ N'oubliez pas ajouter la balise title, obligatoire
2. Donner un style à twitlist
○ centré, 500px large, avec bordure et fond
11. TD API publique : Twitter
3. 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. TD API publique : Twitter
Pour l'instant on n'a mis que du code embedded. C'est
l'heure d'utiliser une vraie API.
4. Dans twitlist afficher le tag #html5 via l'API 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é d'objets
Tweet
○ https://dev.twitter.com/docs/platform-objects/tweets
13. TD API publique : Twitter
● Problème de requête cross-domaine
○ On doit appeler l'API 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 d'afficher le auteur
du message et le titre :
○ tweet.from_user + " : <b><i>" + tweet.text + "</b></i>"
14. TD API publique : Twitter
Pour l'instant on a quelque chose de semblable à :
15. TD API publique : Twitter
Maintenant il va falloir le rendre plus beau
● Des classes CSS pour chaque
élément de l'objet Tweet
● Quelques règles pour mise en forme
16. TD API publique : Twitter
5. Faire que la twitlist se mette à jour tous les 10 sécondes
● Pour éviter la fuite de mémoire, réutiliser les containers
○ N'en créez pas à chaque fois
18. TD API Google Maps et
Géolocalisation
1. Produire un document HTML5 avec un
élement div appelé geoloc
○ Ouvrir le fichier avec le navigateur et vérifier qu'il est cohérent
○ Valider le fichier avec HTML5 Validator
■ N'oubliez pas ajouter la balise title, obligatoire
2. Donner un style à geoloc
○ centré, 500px large, avec bordure et fond
19. TD API Google Maps et
Géolocalisation
3. Utiliser la géolocalisation de HTML5 pour afficher dans
geoloc les coordonées du navigateur (longitude,
lattitude, altitude)
○ Utiliser navigator.geolocation.getCurrentPosition
4. Utiliser l'API Google Maps pour montrer dans geoloc la
carte correspondant à la position du navigateur
