Conception d'Applications Interactives :

Applications Web et JEESé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 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

TD HTML5 : Le cube

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 à uneclasse 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

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étriquesur l'objet cube○ translateX, translateY,

translateZ○ rotateX, rotateY, rotateZ

Exemple rotation sur Firefox :-moz-transform : rotateZ(65deg);

TD HTML5 : Le cube

6. Maintenant on a 6 faces à plat. Pour chacunes des face, créer l'élément de style correspondant à son idet appliquer les transformations 3D pour le mettre à saplace○ Il ne faut pas oublier de positionner

-moz-transform-style: preserve-3d; sur cube

○ Commencez par les faces front et back

7. Ajoutez des images à chaque face○ Les images sont ici○ Bien vérifier l'orientation des faces

■ Les logos doivent être à l'endroit

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;

TD HTML5 : Le cube

TD API publique : Twitter

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

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_TRAVAILStarting up http-server, serving REPERTOIRE_TRAVAIL on port: 8080Hit CTRL-C to stop the server

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

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>"

TD API publique : Twitter

Pour l'instant on a quelque chose de semblable à :

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

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

TD API Google Maps et Géolocalisation

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

TD API Google Maps et Géolocalisation

3. Utiliser la géolocalisation de HTML5 pour afficher dansgeoloc les coordonées du navigateur (longitude,lattitude, altitude)○ Utiliser navigator.geolocation.getCurrentPosition

4. Utiliser l'API Google Maps pour montrer dans geoloc lacarte correspondant à la position du navigateur