Questions de cours LPSIL 2012/2013 1 1. Pour chaque type de site listé ci-dessous, indiquez la ou les approches d adaptation à utiliser parmi les 3 approches vues en cours (1 point) : - Site ayant 2 parties «mobile» et «bureau» gérées indépendamment - Site composé de pages HTML simples - Site dont les pages emploient des feuilles de style CSS et des scripts JavaScript - Site ayant des pages HTML dont la mise en page utilise exclusivement des colonnes verticales 2. Qu est-ce que le viewport? (1 point) 3. Qu est-ce que le Responsive Web Design et quelles sont les règles sous-jacentes? (1 point) 4. Qu est-ce qu un fichier HAR (1 point) 5. Donnez et expliquez 2 arguments justifiant la détection de capacités côté client plutôt que côté serveur, en utilisant l User Agent. (1 point) 6. Nous avons vu plusieurs exemples d User Agent. Parmi les éléments suivants, spécifiez lesquels concernent : (2 points) - L OS (type, version, etc.) - La compatibilité (navigateurs/moteurs compatibles) - Le navigateur (nom, version, etc.) - Le moteur d affichage Index Elément de l User Agent 1 Presto/2.1.1 2 Apple WebKit/534.1+ 3 Windows NT 5.1 4 Mozilla 5.0 5 Version/6.0.0.246 6 KHTML, like Gecko 7 Opera/9.64 8 BlackBerry9700/5.0.0.442 9 Chrome/14.0.792.0 10 Trident/3.1 Concerne 7. Le tableau ci-dessous présente les différents paramètres de largeurs à prendre en compte pour les terminaux Apple. Modèle Viewport (en px) Résolution physique (en px) device-width (en px) iphone 3 (portrait) 980 320 320 iphone 3 (paysage) 980 480 320 iphone 4 (portrait) 980 640 320 iphone4 (paysage) 980 960 320 ipad (portrait) 980 768 768 ipad (paysage) 980 1024 1024 A partir de ces données, déterminez quel sous-ensemble de terminaux Apple identifient les requêtes CSS média suivantes (2 points):
2 Règle Description @media screen and (max-device-width: 480px) { @media screen and (max-device-width: 1024px) { @media screen and (min-device-width: 481px) and (max-device-width: 1024px) { @media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) { 8. Complétez le code illustré à la Figure 1, en plaçant correctement les éléments suivants (attention certains éléments peuvent apparaître plusieurs fois) (2 points): - navigator.geolocation - position - longitude - message - ongeosuccess - coords - «Le navigateur ne prend pas en compte le géopositionnement» - getcurrentposition() - getcurrentposition - ongeoerror - getlocation - latitude - coordonnees Figure 1. Code à compléter
Compréhension de code (4 points) LPSIL 2012/2013 3 9. Soient les 2 images suivantes (voir Figure 2), illustrant comment une page Web est affichée sur un terminal mobile utilisant le navigateur Opera Mobile 4.2. Ces affichages correspondent au code HTML identifié par la Figure 3 et au code CSS présenté dans la Figure 4. Identifiez 3 éléments dont l affichage ne correspond pas au code HTML/CSS associé et/ou à une présentation adaptée aux terminaux mobiles. Précisez pourquoi. Figure 2. Visualisation de la page HTML sur un navigateur Opera Mobile 4.2. (à gauche le haut de la page, à droite le bas de la page).
4 <!DOCTYPE html> <html> <head> <title>creature Comforts Agent Portal</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div class="header"> <h1>creature Comforts</h1> <h2>agent Portal</h2> <div class="greeting"> <h3>welcome back, Dr. Jessica Evans</h3> <div id="tools"> <ul> <li><a href="#dashboard">your Dashboard</a></li> <li><a href="#">messages (2)</a></li> </ul> <div id="status_message"> <p>february 4: Loading supplies and contacting personnel to assist with flood event in Bangladesh. Contact HQ if you are currently unscheduled and available to assist in the effort.</p> <div id="dashboard"> <div class="event odd"> <div class="event_meta"> <div class="event_type">message <div class="event_time">feb 3 8:54PM EST <div class="event_details"> <div class="event_subject"><a href="#">supply Request #493-C4 Approved</a> <div class="event_summary">hi, Jess, Good news! I wanted to let you know that we were successful in tracking down those bottles <div class="event even"> <div class="event_meta"> <div class="event_type">message <div class="event_time">feb 3 1:47PM EST <div class="event_details"> <div class="event_subject"><a href="#">supply Request #493-C4 Received</a> <div class="event_summary">this is an automated message to confirm that your recent Supply Request has been received and is in process <div class="morelink"><a href="#"><p>more >></a></p> <!-- /#dashboard --> <div class="footer"> <p>thanks for being a Creature Comforts Agent!</p> </body> </html> Figure 3. Code HTML de la page.
5 * { padding: 0; margin: 0; body { font-family: "Helvetica", "Arial", sanserif; font-size: 100%; background-color: #f3ffc2; background-image: url('cows.jpg'); background-repeat: no-repeat; background-position: 50% 0px; p { font-size:.95em; margin: 0.25em 0; h1, h2, h3, h4, h5 { font-family: "Times New Roman", serif; margin: 0; color: #10508c; text-align: center; h3 { font-style: italic; font-weight: 100; font-size: 1.15em; ul { list-style-type: circle; a { text-decoration: none; color: #096c9f;.header { height: 150px; #tools ul { list-style-type: none; #tools ul li a { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: block; height: 1.1em; width: 94%; margin: 3%; text-align: center; padding:.6em 0;.greeting { border: 1px dashed #10508c; border-width: 1px 0; #dashboard { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: 1em 3%; padding:.5em 0; width: 94%; #dashboard div { vertical-align: top; border: none; #dashboard.event { border: 1px dashed #ddd; border-width: 1px 0 0 0; margin:.5em 0; padding: 0.5em 0; clear: both; overflow: hidden; #dashboard.odd { #dashboard.even { background-color: #eee; #dashboard.event_meta { width: 25%; margin: 0 2%; float: left; #dashboard.event_time { font-size:.9em; color: #666; #dashboard.event_details { width: 64%; margin: 0 2%; float: right; #dashboard.event_subject { font-weight: bold; #dashboard.event_summary { font-size: 0.85em; color: #666; #status_message { background-color: #f8f1b2; padding: 0.25em; line-height: 1.3em; border-width: 1px 0; height: 70px; overflow: scroll; Figure 4. Contenu de la feuille de style CSS associée (fichier styles.css).
Ecriture de code (5 points) LPSIL 2012/2013 6 10. Nous souhaitons adapter la page affichée dans la Figure 5, de manière à correspondre à l affichage ci-dessous (voir Figure 6). Précisez les modifications à apporter dans le fichier HTML (Figure 7) et dans le fichier CSS (Figure 8). Figure 5. Page HTML avant modification
7 Figure 6. Page HTML après modification
8 <!DOCTYPE html> <html> <head> <title>creature Comforts Agent Portal</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div class="header"> <h1>creature Comforts</h1> <h2>agent Portal</h2> <div class="greeting"> <h3>welcome back, Dr. Jessica Evans</h3> <div id="tools"> <ul> <li><a href="#dashboard">your Dashboard</a></li> <li><a href="#">messages (2)</a></li> </ul> <div id="status_message"> <p>february 4: Loading supplies and contacting personnel to assist with flood event in Bangladesh. Contact HQ if you are currently unscheduled and available to assist in the effort.</p> <div id="dashboard"> <div class="event odd"> <div class="event_meta"> <div class="event_type">message <div class="event_time">feb 3 8:54PM EST <div class="event_details"> <div class="event_subject"><a href="#">supply Request #493-C4 Approved</a> <div class="event_summary">hi, Jess, Good news! I wanted to let you know that we were successful in tracking down those bottles <div class="event even"> <div class="event_meta"> <div class="event_type">message <div class="event_time">feb 3 1:47PM EST <div class="event_details"> <div class="event_subject"><a href="#">supply Request #493-C4 Received</a> <div class="event_summary">this is an automated message to confirm that your recent Supply Request has been received and is in process <div class="morelink"><a href="#"><p>more >></a></p> <!-- /#dashboard --> <div class="footer"> <p>thanks for being a Creature Comforts Agent!</p> </body> </html> Figure 7. Code HTML correspondant à la page affichée à la Figure 5
9 * { padding: 0; margin: 0; body { font-family: "Helvetica", "Arial", sanserif; font-size: 100%; background-color: #f3ffc2; background-image: url('cows.jpg'); background-repeat: no-repeat; background-position: 50% 0px; p { font-size:.95em; margin: 0.25em 0; h1, h2, h3, h4, h5 { font-family: "Times New Roman", serif; margin: 0; color: #10508c; text-align: center; h3 { font-style: italic; font-weight: 100; font-size: 1.15em; ul { list-style-type: circle; a { text-decoration: none; color: #096c9f;.header { height: 150px; #tools ul { list-style-type: none; #tools ul li a { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: block; height: 1.1em; width: 94%; margin: 3%; text-align: center; padding:.6em 0;.greeting { border: 1px dashed #10508c; border-width: 1px 0; #dashboard { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: 1em 3%; padding:.5em 0; width: 94%; #dashboard div { vertical-align: top; border: none; #dashboard.event { border: 1px dashed #ddd; border-width: 1px 0 0 0; margin:.5em 0; padding: 0.5em 0; clear: both; overflow: hidden; #dashboard.odd { #dashboard.even { background-color: #eee; #dashboard.event_meta { width: 25%; margin: 0 2%; float: left; #dashboard.event_time { font-size:.9em; color: #666; #dashboard.event_details { width: 64%; margin: 0 2%; float: right; #dashboard.event_subject { font-weight: bold; #dashboard.event_summary { font-size: 0.85em; color: #666; #status_message { background-color: #f8f1b2; padding: 0.25em; line-height: 1.3em; border-width: 1px 0; height: 70px; overflow: scroll;.morelink { padding:.75em; text-align: right;.footer { clear: both; font-size: 0.9em; font-style: italic; text-align:center; color: #777; Figure 8. Code CSS correspondant à la page affichée à la Figure 5.