Le document traite de la conception d'applications interactives en utilisant HTML5, CSS3 et JavaScript, en se concentrant sur des exemples pratiques comme la création d'un cube 3D et d'une liste Twitter dynamique. Il inclut des étapes pour mettre en place des éléments interactifs et utiliser des API publiques telles que celles de Twitter et Google Maps. Les détails techniques portent sur la validation HTML5, le style CSS et les manipulations DOM pour des animations et des mises à jour régulières.

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

3. TD HTML5 : Le cube

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;

9. TD API publique : Twitter

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

17. TD API Google Maps et
Géolocalisation

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