Vous n'êtes pas connecté. Connexion
|
|
Partie 1: Application PictionnaryDe $1Table des matières
ObjectifsNous allons survoler les bases du développement d'une application HTML5, et développer une application similaire à l'application Draw Something, compatible avec le web mobile. Cette partie va durer 3 séances de 3h. L'application complète sera rendue et vaudra 20% de la note finale du cours. Concepts abordés:
Technologies utilisées: PHP, MySQL, HTML5, CSS3, javascript Prenez l'habitude d'utiliser les outils de développement de votre navigateur pour étudier le DOM, les échanges réseau, le javascript, le CSS, ... Mise en routeDiscussion: Qu'est-ce que le HTML 5 ? On va aborder un ensemble de concepts nouveau dans le HTML5. A faire: Survoler la liste sur le site http://html5test.com/. Dans la partie 1 du cours on va se concentrer sur:
Discussion: Quels autres points de la liste connaissez vous ? vous intriguent ?
Soyez curieux, demandez, ou cherchez sur le net. Parsing Rules, headers, balises metaA faire: Validez chacun de ces documents html dans le validateur du w3c: http://validator.w3.org/#validate_by_input Corrigez les erreurs. Prenez l'habitude de valider vos documents HTML. HTML 4.01 <!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>My first HTML document</title> <meta name="description" content="Exemple de description"> <link rel="stylesheet" type="text/css" href="monStyle.css"> <script type="text/javascript" src="monSript.js"></script> </head> <body> <div>...</div> </body> </html> HTML5
<!doctype html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>My first HTML document</title> <meta name="description" content="Exemple de description"> <link rel="stylesheet" href="monStyle.css"/> <script src="monSript.js"></script> </head> <body> <div>...</div> </body> </html> Discussion: Commentaires ? Des différences importantes ?
Cours: Dans le document à l'url http://www.slow-lab.com/guide-balises-meta.php, lisez les sections suivantes:
Ne vous attardez pas trop dans les détails, en particulier pour les balises meta de partage Facebook: on y reviendra en détail plus tard...
Discussion: Commentaires ? Une idée de ce que peut bien être le web sémantique ?
ElementsA faire: Téléchargez le projet demoHTML5 ci-joint. Exécutez et étudier les sources de chaque fichier HTML. 1_customNonVisibleData: Etudiez le document à l'url http://www.alsacreations.com/article/lire/1397-html5-attribut-data-dataset.html 2_SectionElements: Etudiez le document à l'url http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html 3_textLevelElements: Comprenez l'utilité:
4_InteractiveElements: Etudiez le document à l'url http://www.alsacreations.com/article...s-summary.html TP FormulairesOn va créer un projet PHP avec base de données MySQL pour faire une page d'inscription, et une de connexion pour notre site. Cours: Pour les formulaires HTML5, une introduction peut être lue à la page suivante: http://standardista.com/forms/. Vous vous inspirerez ensuite des documents suivants
Etudiez l'exemple exemple_inscription.html page inscription.htmlLe formulaire d'inscription doit comporter les champs suivants:
Prenez comme base le code html ci-dessous: <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Pictionnary - Inscription</title> </head> <body> <form class="inscription" action="req_inscription.php" method="post" name="inscription"> <ul> <li> <h2>Inscrivez-vous</h2> <span class="required_notification">Les champs obligatoires sont indiqués par *</span> </li> <li> <label for="email">E-mail :</label> <input type="email" name="email" id="email" autofocus required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"/> <span class="form_hint">Format attendu "name@something.com"</span> </li> <li> <label for="prenom">Prénom :</label> <input type="text" name="prenom" id="prenom" required placeholder="votre prénom..."/> </li> <li> <label for="mdp1">Mot de passe :</label> <input type="password" name="mdp1" id="mdp1" required pattern="\w{3}\w+" onkeyup="validateMdp2()" title = "Le mot de passe doit contenir plus de 4 caractères."> <span class="form_hint">Au moins 4 caractères.</span> </li> <li> <label for="mdp1">Confirmez mot de passe :</label> <input type="password" name="mdp2" id="mdp2" required onkeyup="validateMdp2()"> <script> validateMdp2 = function(e) { if (document.getElementById('mdp1').checkValidity() && document.getElementById('mdp2').value == document.getElementById('mdp1').value) { document.getElementById('mdp2').setCustomValidity(''); } else { document.getElementById('mdp2').setCustomValidity('Les mots de passes doivent être égaux.'); } } </script> </li> <li> <input type="submit" value="Soumettre Formulaire"> </li> </ul> </form> </body> </html> Comme vous pouvez le voir,
Lorsqu'on clique sur "confirmez mot de passe", c'est le premier champs mot de passe qui reçoit le focus. corrigez celà. Puis, complétez le formulaire. Pour l'âge: on veut parser la valeur du champs birthdate en date, comparer avec la date d'aujourd'hui, et récupérer l'année. vous pouvez utiliser l'attribut valueAsDate ainsi: <li> <label for="birthdate">Date de naissance:</label> <input type="date" name="birthdate" id="birthdate" placeholder="JJ/MM/AAAA" required onchange="try{computeAge()}catch(e){document.getElementById('age').value = ''}"/> <script> computeAge = function(e) { var elapsed = Date.now()-Date.parse(document.getElementById("birthdate").valueAsDate); document.getElementById("age").value = new Date(elapsed).getYear()-70; } </script> <span class="form_hint">Format attendu "JJ/MM/AAAA"</span> </li> <li> <label for="age">Age:</label> <input type="number" name="age" id="age" disabled/> </li> Style CSS3(inspiré de http://webdesign.tutsplus.com/tutorials/site-elements/bring-your-forms-up-to-date-with-css3-and-html5-validation/) On va modifier le fichier styles.css qui contient le style pour les ordinateurs seulement (media="screen"). Ajoutez la ligne suivante dans le header: <link rel="stylesheet" media="screen" href="styles.css" > Etudiez la feuille de style en CSS3, renseignez-vous sur les sélecteurs :focus, :valid, :invalid, les transitions,
Côté ServeurOn va créer une base de données MySQL pictionnary et une table USERS à l'aide du code suivant:
ATTENTION: on utilise soit mySQLi, soit JDO. surtout pas mySQL, c.f., http://www.php.net/manual/fr/mysqlinfo.api.choosing.php pour le champs de formulaire inscription:
Formulaire de connexionLe formulaire de connexion devra comporter les champs suivants:
Créez une base de données MySQL et configurez votre projet dans PHPStorm pour l'utiliser. Créez une table USERS, avec le code SQL suivant: DROP
http://www.phpeasystep.com/phptu/6.html http://dmouronval.developpez.com/tut...ulaires-html5/ Si vous n'êtes pas au point sur les cookies / sessions en PHP, étudiez le document à l'URL http://www.julp.fr/articles/17-php-cookies-et-sessions.html#utilisation (sections 1 à 2.2.9) Web MobileOn va réfléchir aux différentes solutions possibles pour adapter note site web aux mobiles c.f., choix du site lemonde.fr, ou feuille de style avec sélecteur user-agent. Avantages/Inconvénients ? Activité: faire en sorte que notre formulaire s'affiche bien sur mobile. tester.
Canvasquand on est loggué, on redirige vers une page paint.html, on va créer un paint interactif très simple, avec un peu de javascript. Juste des cercles de différentes tailles, et un sélecteur de couleurs avec summary/details.
http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/Web_2.0%2F%2FHTML5_Rabat_2012-2013
On veut enregistrer dans le navigateur chaque évènement souris, pour pouvoir l'envoyer au serveur plus tard, et le rejouer ensuite sur un autre appareil. On étudie les solutions de stockage interne dans le navigateur, leur adaptation par les navigateurs existants,
|
||||||||||||||||||||||||||||||||
Powered by MindTouch Deki Open Source Edition v.8.08 |