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.

Dimension: px
Commencer à balayer dès la page:

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

Transcription

1 Questions de cours LPSIL 2012/ 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/ Apple WebKit/ Windows NT Mozilla Version/ KHTML, like Gecko 7 Opera/ BlackBerry9700/ Chrome/ 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) iphone 3 (paysage) iphone 4 (portrait) iphone4 (paysage) ipad (portrait) ipad (paysage) 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 2 Règle screen and (max-device-width: 480px) screen and (max-device-width: 1024px) screen and (min-device-width: 481px) and (max-device-width: 1024px) 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

3 Compréhension de code (4 points) LPSIL 2012/ 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 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 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).

6 Ecriture de code (5 points) LPSIL 2012/ 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 7 Figure 6. Page HTML après modification

8 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 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.

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15 .. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles

Plus en détail

Formation HTML / CSS. ar dionoea

Formation HTML / CSS. ar dionoea Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations

Plus en détail

HTML, CSS, JS et CGI. Elanore Elessar Dimar

HTML, CSS, JS et CGI. Elanore Elessar Dimar HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML

Plus en détail

Media queries : gérer différentes zones de visualisation

Media queries : gérer différentes zones de visualisation 2 Media queries : gérer différentes zones de visualisation Comme nous l avons vu au chapitre précédent, les CSS3 sont constituées de modules. Media queries est simplement l un d eux. Ce module permet d

Plus en détail

RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite?

RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite? RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite? Medialibs, votre partenaire digital Quoi? Un partenaire pour une gestion globale du digital (un laboratoire R&D, éditeur de logiciels

Plus en détail

UN SITE WEB RESPONSIVE EN UNE HEURE?

UN SITE WEB RESPONSIVE EN UNE HEURE? UN SITE WEB RESPONSIVE EN UNE HEURE?! O N O R H C P TO Raphaël Goetter Raphaël Goetter alsacreations.fr alsacreations.com goetter.fr knacss.com mobitest.me @goetter EN UNE HEURE, VOUS AVEZ DIT?!? R E N

Plus en détail

JOOMLA 1.5 avancé SUPPORT DE COURS + annexe

JOOMLA 1.5 avancé SUPPORT DE COURS + annexe JOOMLA 1.5 avancé SUPPORT DE COURS + annexe SOMMAIRE 1. LA GESTION DES MODULES... Page 2 2. MODIFICATION DE SON TEMPLATE... Page 6 3. LA CREATION DE DIAPORAMA... Page 9 4. LA CREATION DE SONDAGE... Page

Plus en détail

{less} Guide de démarrage

{less} Guide de démarrage {less Guide de démarrage Pré requis L'utilisation d'un pré processeur css nécessite son installation préalable. Vous pouvez choisir de tout installer du coté du serveur ou du coté du client. Votre site

Plus en détail

Tutoriel : Feuille de style externe

Tutoriel : Feuille de style externe Tutoriel : Feuille de style externe Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU. Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche?

Plus en détail

Travaux dirigés n 10

Travaux dirigés n 10 Travaux dirigés n 10 IMAC 1 Responsive Web Design Dans ce TD, vous verrez comment concevoir un design web qui s adaptera au terminal sur lequel il sera visualisé. Avant-propos Avec l avènement des smartphones

Plus en détail

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations

Plus en détail

Celui qui vous parle. Yann Vigara

Celui qui vous parle. Yann Vigara Celui qui vous parle Yann Vigara Celui qui vous parle Yann Vigara Celui qui vous parle [Spa m] Yann Vigara Fondateur et directeur technique d'atomes Dans l'administration système depuis 1999 Tombé dans

Plus en détail

Zen, SASS, responsive design

Zen, SASS, responsive design , SASS, responsive design Felip Manyer i Ballester Res Telæ 21 mai 2013 Felip Manyer i Ballester, SASS, responsive design 1/36 Plan 1 Créer un thème sous Drupal Généralités Concepts à mettre en œuvre Typologie

Plus en détail

CONCEPTION D E-MAILS ADAPTATIFS

CONCEPTION D E-MAILS ADAPTATIFS CONCEPTION D E-MAILS ADAPTATIFS SELLIGENT Le contenu de ce manuel porte sur du matériel protégé par les droits d auteurs appartenant à Selligent. Ce manuel ne peut être ni reproduit, en tout ou en partie,

Plus en détail

1. La notion de cascade

1. La notion de cascade HTML 5 et CSS 3 (partie 2) Objectifs Connaître quelques notions avancées de CSS 3, Appréhender l affichage, Introduction au Responsive Web Design. 1. La notion de cascade On constate que l on peut avoir

Plus en détail

RESPONSIVE WEB DESIGN

RESPONSIVE WEB DESIGN RESPONSIVE WEB DESIGN Une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives Ivan MADJAROV Arnaud FÉVRIER Comment consulte-t-on le

Plus en détail

Responsive Web Design. Responsive Design avec HTML 5.0 et CSS3

Responsive Web Design. Responsive Design avec HTML 5.0 et CSS3 Ivan MADJAROV Responsive Design avec HTML 5.0 et CSS3 HTML5 CSS3 IvMad - 2013 2 La spécification CSS3 Media Queries (requêtes de media) définit les techniques pour adapter de feuilles de styles en fonction

Plus en détail

Pour en expliquer le principe, on se limitera à deux exemples :

Pour en expliquer le principe, on se limitera à deux exemples : Les Media Queries permettent donc de cibler : Le type de média La taille de l'écran La taille de la fenêtre La résolution Le nombre de couleurs L'orientation Pour en expliquer le principe, on se limitera

Plus en détail

Optimiser les performances d un site web. Nicolas Chevallier Camille Roux

Optimiser les performances d un site web. Nicolas Chevallier Camille Roux Optimiser les performances d un site web Nicolas Chevallier Camille Roux Intellicore Tech Talks Des conférences pour partager son savoir Le mardi au CICA Sophia Antipolis http://techtalks.intellicore.net

Plus en détail

Responsive Web Design. La Rochelle, Avril 2014

Responsive Web Design. La Rochelle, Avril 2014 Responsive Web Design La Rochelle, Avril 2014 Mohamed Belmokhtar Université de La Rochelle Germain Souquet Université de La Rochelle Sommaire Qu est-ce que le responsive web design? Les différentes approches

Plus en détail

E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE

E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE mcbenveniste@gmail.com 09/2013 E-MAILING & NEWSLETTER L e-mailing consiste à envoyer des emails simultanément à un nombre important de destinataires dont le

Plus en détail

Initiation à html et à la création d'un site web

Initiation à html et à la création d'un site web Initiation à html et à la création d'un site web Introduction : Concevoir un site web consiste à définir : - l'emplacement où ce site sera hébergé - à qui ce site s'adresse - le design des pages qui le

Plus en détail

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos. KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html

Plus en détail

Grille fluide. Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design

Grille fluide. Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design Grilles Fluides CSS CREATION D UNE GRILLE FLUIDE Grille fluide Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design WWW.SUTTERLITY.FR

Plus en détail

Responsive Design. Technologies du web. Stéphane Bouvry, 2014

Responsive Design. Technologies du web. Stéphane Bouvry, 2014 Responsive Design Technologies du web Stéphane Bouvry, 2014 1. Objectif Utilisation de CSS pour la mise en page 2. Diapos Le responsive design : http://goo.gl/dmh8is 3. Grille fluide Dans cette partie,

Plus en détail

101 Réaliser et publier un site WEB

101 Réaliser et publier un site WEB 101 Réaliser et publier un site WEB Rapport personnel de module EMF - Section informatique John Baudin Module du.2008 au.2008 Table des matières 1 Introduction... 1 2 Le XHTML... 1 2.1 Les balises... 1

Plus en détail

Responsive Web design, périphériques mobiles et accessibilité

Responsive Web design, périphériques mobiles et accessibilité Responsive Web design, périphériques mobiles et accessibilité Qui suis-je? Victor Brito Situé près de Paris, dans la France non voisine Intégrateur HTML / CSS freelance Expert Accessiweb en évaluation

Plus en détail

Le piratage informatique. Rapport de projet. Spécialité Informatique 1 re année. DEJOUR Kévin SOUVILLE Jean-François. Suivi : Mokhtari-Brun Myriam

Le piratage informatique. Rapport de projet. Spécialité Informatique 1 re année. DEJOUR Kévin SOUVILLE Jean-François. Suivi : Mokhtari-Brun Myriam 6, bd maréchal Juin F-14050 Caen cedex 4 Spécialité Informatique 1 re année Rapport de projet Le piratage informatique DEJOUR Kévin SOUVILLE Jean-François Suivi : Mokhtari-Brun Myriam 2 e semestre 2005-2006

Plus en détail

Guide de réalisation d une campagne e-mail marketing

Guide de réalisation d une campagne e-mail marketing Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent. La

Plus en détail

HTML5 et CSS3 pour des sites Responsive Web Design

HTML5 et CSS3 pour des sites Responsive Web Design Chapitre 1 : Introduction A. Le design Web aujourd'hui 11 B. Le Responsive Web Design 11 C. Les approches dans la conception 12 D. Le lâcher-prise 12 E. Les objectifs du livre 13 F. Les outils de l intégrateur

Plus en détail

Géolocalisation. Remy Sharp

Géolocalisation. Remy Sharp Chapitre 9 Géolocalisation Remy Sharp L API de géolocalisation fait partie de ces API qui n ont rien à voir avec la spécification HTML5 ; elle a d ailleurs été créée par le W3C et non par le WHATWG. En

Plus en détail

ENVOI EN NOMBRE DE Mails PERSONNALISES

ENVOI EN NOMBRE DE Mails PERSONNALISES MAILING ENVOI EN NOMBRE DE Mails PERSONNALISES 2 Téléchargement 3 Installation 6 Ecran d accueil 15 L envoi de mails 22 Envoi d un document HTML crée avec Word (envoi en base 64) 25 Le compte courriel

Plus en détail

HTML. Notions générales

HTML. Notions générales 1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS

Plus en détail

Préambule. Sommaire. Ouverture de votre Service Client. Configuration de La Solution Crypto. Activation. Paramètres PagesIMMO

Préambule. Sommaire. Ouverture de votre Service Client. Configuration de La Solution Crypto. Activation. Paramètres PagesIMMO Préambule La Solution Crypto offre en standard la possibilité de publier vos annonces et de les diffuser sur Internet, sur votre site Web ou sur différents serveurs d annonces, comme le décrit en détail

Plus en détail

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE

Plus en détail

Spétechs Mobile. D e r n i è r e m i s e à j o u r : a o û t 2014

Spétechs Mobile. D e r n i è r e m i s e à j o u r : a o û t 2014 Spétechs Mobile D e r n i è r e m i s e à j o u r : a o û t 2014 Généralités Envoi des créas à Amandine Canu, responsable traffic mobile : acanu@hi-media.com Mettre en copie de votre e-mail votre contact

Plus en détail

Approche Design Méthodologie de conduite de sites web

Approche Design Méthodologie de conduite de sites web Approche Design Méthodologie de conduite de sites web Phase 02 Concevoir le site (C) Conception visuelle N. Vanassche www.nathalievanassche.be Phase 2 (C) : Conception visuelle Facilité d utilisation:

Plus en détail

3. RÉALISATION ET QUALIFICATION D UN PROTOTYPE 3.1 Réalisation d un prototype CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML

3. RÉALISATION ET QUALIFICATION D UN PROTOTYPE 3.1 Réalisation d un prototype CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML Page:1/20 CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML Objectifs de l activité pratique : Notions sur le HTML, le WEB et le W3C Créer une page web statique au format HTML : - les marqueurs ou balises

Plus en détail

Demain, encore plus de tifinaghes sur Internet

Demain, encore plus de tifinaghes sur Internet Demain, encore plus de tifinaghes sur Internet Patrick Andries Conseils Hapax, Québec, Canada Membre du consortium Unicode patrick@hapax.qc.ca Résumé. Lors de cette communication, nous nous pencherons

Plus en détail

Optimiser pour les appareils mobiles

Optimiser pour les appareils mobiles chapitre 6 Optimiser pour les appareils mobiles 6.1 Créer un site adapté aux terminaux mobiles avec jquery Mobile... 217 6.2 Transformer son site mobile en application native grâce à PhoneGap:Build...

Plus en détail

Spétechs Mobile. Octobre 2013

Spétechs Mobile. Octobre 2013 Spétechs Mobile Octobre 2013 Appli ios Appli Android Site Mobile Les clicks URL Appli ios Créa en dur HTML5 Créa en dur Banner Interstitiel Interstitiel Vidéo Bouncing / traveling Image Bouncing / traveling

Plus en détail

Guide de connexion pour les sites sécurisés youroffice & yourassets

Guide de connexion pour les sites sécurisés youroffice & yourassets Guide de connexion pour les sites sécurisés youroffice & yourassets Table des matières 1. Sécurité... 3 2. Configuration minimale requise... 3 a. Système Windows... 3 b. Système Macintosh... 3 3. Demander

Plus en détail

Spétechs Mobile. D e r n i è r e m i s e à j o u r : s e p t e m b r e 2 0 1 4

Spétechs Mobile. D e r n i è r e m i s e à j o u r : s e p t e m b r e 2 0 1 4 Spétechs Mobile D e r n i è r e m i s e à j o u r : s e p t e m b r e 2 0 1 4 Généralités Envoi des créas à Amandine Canu, responsable traffic mobile : acanu@hi-media.com Mettre en copie de votre e-mail

Plus en détail

Luc Brun. Création de pages Web Dynamiques p.1/75

Luc Brun. Création de pages Web Dynamiques p.1/75 Création de pages Web Dynamiques Luc Brun Création de pages Web Dynamiques p.1/75 Place du HTML GET http://www. monssite.com HTTP 1.0 Content type: text/html ... Création de pages Web Dynamiques

Plus en détail

SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE

SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE SITE INTERNET DE L ASSOCIATION Diapositive 1 RAPPORT DE PROJET Site internet de l association INTRODUCTION 1) Je m appelle Léonard STRONG. 2) Oral de présentation

Plus en détail

Manuel d utilisation du module Liste de cadeaux PRO par Alize Web

Manuel d utilisation du module Liste de cadeaux PRO par Alize Web Manuel d utilisation du module Liste de cadeaux PRO par Alize Web INSTALLER ET CONFIGURER LE MODULE (BACK OFFICE) 2 Réglages des performances 2 Télécharger le module 3 Installer le module 4 Configurer

Plus en détail

Intégrateur Web HTML5 CSS3

Intégrateur Web HTML5 CSS3 Intégrateur Web HTML5 CSS3 L objectif de la 3W Academy est de former des petits groupes d élèves à l intégration de sites internet ainsi qu à la création d applications web simples telles qu un blog ou

Plus en détail

Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées?

Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées? Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites Quelles solutions peuvent être employées? Présentation d une des solutions Conclusion Aujourd hui le web est

Plus en détail

Introduction... 3. 1 Pourquoi Slax?... 4. 2 Formatage... 5. 3 Rendre la clé bootable sous linux... 6. 4 Slax... 7. 5 Installshield...

Introduction... 3. 1 Pourquoi Slax?... 4. 2 Formatage... 5. 3 Rendre la clé bootable sous linux... 6. 4 Slax... 7. 5 Installshield... 6, bd maréchal Juin F-14050 Caen cedex 4 Spécialité Informatique 1 re année Rapport de mini-projet Slax sur clé USB PAITEL Arnaud Montouchet Yohann Responsable : François Lecellier 2 e semestre 2006-2007

Plus en détail

Canvas 3D et WebGL. Louis Giraud et Laetitia Montagny. 9 Avril 2013. Université Lyon 1

Canvas 3D et WebGL. Louis Giraud et Laetitia Montagny. 9 Avril 2013. Université Lyon 1 Canvas 3D et WebGL Louis Giraud et Laetitia Montagny Université Lyon 1 9 Avril 2013 1 Présentation du sujet Introduction Présentation du sujet Problématique : Représenter de la 3D dans le navigateur sans

Plus en détail

ANGULAR JS AVEC GDE GOOGLE

ANGULAR JS AVEC GDE GOOGLE ANGULAR JS AVEC GDE GOOGLE JUIN 2015 BRINGING THE HUMAN TOUCH TO TECHNOLOGY 2015 SERIAL QUI SUIS-JE? ESTELLE USER EXPERIENCE DESIGNER BUSINESS ANALYST BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 2

Plus en détail

Présentation du Framework BootstrapTwitter

Présentation du Framework BootstrapTwitter COUARD Kévin HELVIG-LARBRET Blandine Présentation du Framework BootstrapTwitter IUT Nice-Sophia LP-SIL IDSE Octobre 2012 Sommaire I. INTRODUCTION... 3 Définition d'un framework... 3 A propos de BootstrapTwitter...

Plus en détail

Introduction à Expression Web 2

Introduction à Expression Web 2 Introduction à Expression Web 2 Définitions Expression Web 2 est l éditeur HTML de Microsoft qui répond aux standard dew3c. Lorsque vous démarrez le logiciel Expression Web 2, vous avez le choix de créer

Plus en détail

StruxureWare Power Monitoring Expert v7.2

StruxureWare Power Monitoring Expert v7.2 StruxureWare Power Monitoring Expert v7.2 Disponible maintenant Sept 2013 Mise à jour vers PME 7.2 ION-E 6 6.0 6.0.1 Service Pack Gratuit Paid Upgrade SPM 7 7.0 7.0.1 Service Pack Gratuit Paid Upgrade

Plus en détail

ARCHOS Activity Tracker

ARCHOS Activity Tracker ARCHOS Activity Tracker «Archos Connected Self» Application Connecté pour votre confort L'ARCHOS Activity Tracker synchronise automatiquement votre activité quotidienne à votre smartphone ou votre tablette

Plus en détail

Spécifications techniques

Spécifications techniques Infos pratiques Bon de commande: indication de réservation publicité Tablette + confirmation de livraison du matériel: envoyer à booking@trustmedia.be Matériel Papier: artwork@mediafin.be 2 jours ouvrables

Plus en détail

IPHONE BANNIÈRE CLASSIQUE DIMENSIONS. Standard : 320 x 53 (portrait) 20Ko Jpeg/Gif/Png. HD : 640 x 106 (portrait) 20Ko Jpeg/Gif/Png DESCRIPTION

IPHONE BANNIÈRE CLASSIQUE DIMENSIONS. Standard : 320 x 53 (portrait) 20Ko Jpeg/Gif/Png. HD : 640 x 106 (portrait) 20Ko Jpeg/Gif/Png DESCRIPTION IPHONE BANNIÈRE CLASSIQUE DIMENSIONS Standard : 320 x 53 (portrait) 20Ko Jpeg/Gif/Png HD : 640 x 106 (portrait) 20Ko Jpeg/Gif/Png DESCRIPTION Format publicitaire très répandu et simple Permet une présence

Plus en détail

Comparaison entre les applications natives et les web apps dans le domaine des Smartphones

Comparaison entre les applications natives et les web apps dans le domaine des Smartphones Comparaison entre les applications natives et les web apps dans le domaine des Smartphones Chris De Roeck Janvier 2012 Introduction Le smartphone a la cote ces dernières années et les chires concernant

Plus en détail

CSS : on reprend tout à zéro! Par Joe Gillespie

CSS : on reprend tout à zéro! Par Joe Gillespie 1 sur 31 CSS : on reprend tout à zéro! Par Joe Gillespie Document original : http://www.pompage.net/pompe/cssdezero-1/ Pompage de Copyright 1996-2007 WPDFD, LTD : http://www.wpdfd.com/issues/70/css_from_the_ground_up/

Plus en détail

Les nouveaux comportements... 9

Les nouveaux comportements... 9 Sommaire Du téléphone portable au smartphone... 4 L apparition du smartphone... 4 Le marché français des smartphones... 6 Le smartphone vs. l ordinateur... 7 Les familles des périphériques... 8 Les nouveaux

Plus en détail

Paris Airports - Web API Airports Path finding

Paris Airports - Web API Airports Path finding Paris Airports - Web API Airports Path finding Hackathon A660 Version Version Date writer Comment 1.0 19/05/2015 Olivier MONGIN Document creation Rédacteur : Olivier.MONGIN@adp.fr Date : 19/05/2015 Approbateur

Plus en détail

WEB DESIGNER CMS CONTENT MANAGEMENT SYSTEM NIVEAU 2

WEB DESIGNER CMS CONTENT MANAGEMENT SYSTEM NIVEAU 2 BES WEBDESIGNER Content Management System niveau 2 5YCM2 1 WEB DESIGNER CMS CONTENT MANAGEMENT SYSTEM NIVEAU 2 L'étudiant sera capable : face à une structure informatique opérationnelle connectée à Internet,

Plus en détail

WiFi Security Camera Quick Start Guide. Guide de départ rapide Caméra de surveillance Wi-Fi (P5)

WiFi Security Camera Quick Start Guide. Guide de départ rapide Caméra de surveillance Wi-Fi (P5) #45 #46 WiFi Security Camera Quick Start Guide Guide de départ rapide Caméra de surveillance Wi-Fi (P5) #47 Start Here 1 Is this you? TECH SUPPORT CTRL ALT DEL 2 If yes, turn to page three 1 3 If not,

Plus en détail

Gestion Électronique de Documents et XML. Master 2 TSM

Gestion Électronique de Documents et XML. Master 2 TSM Gestion Électronique de Documents et XML Master 2 TSM I n t r o d u c t i o n Les formats de données F o r m a t s d e d o n n é e Format de donnée : manière de représenter des informations dans un document

Plus en détail

Une interface moderne et multi devices avec Drupal Focus sur Omega

Une interface moderne et multi devices avec Drupal Focus sur Omega Une interface moderne et multi devices avec Drupal Focus sur Omega Romain Jarraud Formateur / consultant Drupal Anne- Sophie Picot Chef de projets Publier du contenu aujourd hui > Plateformes de consultation

Plus en détail

DOCUMENTATION - FRANCAIS... 2

DOCUMENTATION - FRANCAIS... 2 DOCUMENTATION MODULE PRETTYSLIDER MODULE PRESTASHOP CREE PAR PRESTACREA INDEX : DOCUMENTATION - FRANCAIS... 2 INSTALLATION... 2 Installation automatique... 2 Installation manuelle... 2 Résolution des problèmes...

Plus en détail

Comment consolider des données

Comment consolider des données Comment consolider des données Version 0.02 du 18.11.2004 Réalisé avec : OOo 1.1.3 Plate-forme / Os : Toutes Distribué par le projet fr.openoffice.org Sommaire 1 Introduction...3 2 Création des données...4

Plus en détail

Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013

Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013 Exemple d utilisation du gestionnaire de conception Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013 6, rue de l Etang, L-5326

Plus en détail

SPECIFICITES TECHNIQUES DES FORMATS PUBLICITAIRES

SPECIFICITES TECHNIQUES DES FORMATS PUBLICITAIRES SPECIFICITES TECHNIQUES DES FORMATS PUBLICITAIRES Contact Traffic : Audrey Pluot-Etourneau apluot@staff.aufeminin.com LES FORMATS CLASSIQUES Nom du Format Dimension du Format Poids Max Fichiers Acceptés

Plus en détail

SÉMINAIRES RÉGIONAUX 2012

SÉMINAIRES RÉGIONAUX 2012 SÉMINAIRES RÉGIONAUX 2012 SÉMINAIRES RÉGIONAUX 2012 1 Le PI System à l heure de la mobilité et de l infonuagique. Présenté par : Laurent Garrigues Directeur de produits [mɔbilite] nom féminin 1. Capacité

Plus en détail

Design adaptatif. Guide de l utilisateur VIENNA LONDON MUNICH BERLIN PARIS HONG KONG MOSCOW ISTANBUL BEIJING ZURICH

Design adaptatif. Guide de l utilisateur VIENNA LONDON MUNICH BERLIN PARIS HONG KONG MOSCOW ISTANBUL BEIJING ZURICH Design adaptatif Guide de l utilisateur VIENNA LONDON MUNICH BERLIN PARIS HONG KONG MOSCOW ISTANBUL BEIJING ZURICH Contenu Définition... 3 Avantages... 3 Fonctionnalités... 5 Modèle de Design mobile...

Plus en détail

Cycle de Découverte n 1 VISUALISER Créer la prochaine application innovante

Cycle de Découverte n 1 VISUALISER Créer la prochaine application innovante Cycle de Découverte n 1 VISUALISER Créer la prochaine application innovante 1 Data Driven Summit 2014 Paris Mardi 18 novembre Visualisation efficace du Big Data Bonne pratique de l expérience utilisateur

Plus en détail

DOCUMENTATION - FRANCAIS... 2

DOCUMENTATION - FRANCAIS... 2 DOCUMENTATION MODULE SHOPDECORATION MODULE PRESTASHOP CREE PAR PRESTACREA INDEX : DOCUMENTATION - FRANCAIS... 2 INSTALLATION... 2 Installation automatique... 2 Installation manuelle... 2 Résolution des

Plus en détail

INTRODUCTION A JAVA. Fichier en langage machine Exécutable

INTRODUCTION A JAVA. Fichier en langage machine Exécutable INTRODUCTION A JAVA JAVA est un langage orienté-objet pur. Il ressemble beaucoup à C++ au niveau de la syntaxe. En revanche, ces deux langages sont très différents dans leur structure (organisation du

Plus en détail

Dans l Unité 3, nous avons parlé de la

Dans l Unité 3, nous avons parlé de la 11.0 Pour commencer Dans l Unité 3, nous avons parlé de la manière dont les designs sont créés dans des programmes graphiques tels que Photoshop sont plus semblables à des aperçus de ce qui va venir, n

Plus en détail

Comment créer un diagramme de Gantt avec OpenOffice.org

Comment créer un diagramme de Gantt avec OpenOffice.org Comment créer un diagramme de Gantt avec OpenOffice.org Version 1.9 du 05.05.2005 Réalisé avec : OOo 2.0 Plate-forme / Os : Toutes Distribué par le projet Sommaire 1 Une rapide introduction : Diagramme

Plus en détail

RAPPORT AUDIT SEO. Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado

RAPPORT AUDIT SEO. Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado - RAPPORT AUDIT SEO Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado 17 septembre 2013 Table des matières Optimisation structurelle 2 Optimisation des standards, performances et

Plus en détail

StruxureWare Power Monitoring v7.0. La nouvelle génération en matière de logiciel de gestion complète d énergie

StruxureWare Power Monitoring v7.0. La nouvelle génération en matière de logiciel de gestion complète d énergie StruxureWare Power Monitoring v7.0 La nouvelle génération en matière de logiciel de gestion complète d énergie Évolution des deux plate-formes originales Power Monitoring v7.0 SMS ION Enterprise 2012 Struxureware

Plus en détail

Advanced e-commerce. Guide d intégration technique pour e-commerce v.5.3.6. Copyright PostFinance 2014, All rights reserved.

Advanced e-commerce. Guide d intégration technique pour e-commerce v.5.3.6. Copyright PostFinance 2014, All rights reserved. Guide d intégration technique pour e-commerce v.5.3.6 Table des matières 1 Introduction... 5 2 Best Practices... 6 3 Environnement... de test 7 3.1 Configuration... de votre compte test. 7 4 Processus...

Plus en détail

Normalisation et état des lieux de la prise en charge de l amazighe et des tifinaghes

Normalisation et état des lieux de la prise en charge de l amazighe et des tifinaghes Normalisation et état des lieux de la prise en charge de l amazighe et des tifinaghes Patrick Andries Conseils Hapax, Québec, Canada Membre du consortium Unicode patrick@hapax.qc.ca Résumé. Lors de cette

Plus en détail

Quick Start Guide This guide is intended to get you started with Rational ClearCase or Rational ClearCase MultiSite.

Quick Start Guide This guide is intended to get you started with Rational ClearCase or Rational ClearCase MultiSite. Rational ClearCase or ClearCase MultiSite Version 7.0.1 Quick Start Guide This guide is intended to get you started with Rational ClearCase or Rational ClearCase MultiSite. Product Overview IBM Rational

Plus en détail

Autour du web. Une introduction technique Première partie : HTML. Georges-André SILBER Centre de recherche en informatique MINES ParisTech

Autour du web. Une introduction technique Première partie : HTML. Georges-André SILBER Centre de recherche en informatique MINES ParisTech Autour du web Une introduction technique Première partie : HTML Georges-André SILBER Centre de recherche en informatique MINES ParisTech silber@cri.ensmp.fr http://www.cri.ensmp.fr/people/silber/cours/2010/web

Plus en détail

Utilisation de l éditeur.

Utilisation de l éditeur. Utilisation de l éditeur. Préambule...2 Configuration du navigateur...3 Débloquez les pop-up...5 Mise en évidence du texte...6 Mise en évidence du texte...6 Mise en page du texte...7 Utilisation de tableaux....7

Plus en détail

Flex. Lire les données de manière contrôlée. Programmation Flex 4 Aurélien VANNIEUWENHUYZE

Flex. Lire les données de manière contrôlée. Programmation Flex 4 Aurélien VANNIEUWENHUYZE Flex Lire les données de manière contrôlée 1 Plan Lier les données Stocker les données Valider les données 2 Gérer des données Lier des données La notion de DataBinding est l une des plus importantes du

Plus en détail

Instructions Mozilla Thunderbird Page 1

Instructions Mozilla Thunderbird Page 1 Instructions Mozilla Thunderbird Page 1 Instructions Mozilla Thunderbird Ce manuel est écrit pour les utilisateurs qui font déjà configurer un compte de courrier électronique dans Mozilla Thunderbird et

Plus en détail

Single User. Guide d Installation

Single User. Guide d Installation Single User Guide d Installation Copyright 2012, Canto GmbH. Tous droits réservés. Canto, le logo Canto, le logo Cumulus et l'appellation Cumulus sont des marques de Canto, déposées aux États-Unis et dans

Plus en détail

WEB page builder and server for SCADA applications usable from a WEB navigator

WEB page builder and server for SCADA applications usable from a WEB navigator Générateur de pages WEB et serveur pour supervision accessible à partir d un navigateur WEB WEB page builder and server for SCADA applications usable from a WEB navigator opyright 2007 IRAI Manual Manuel

Plus en détail

MANUEL D UTILISATION ORBITVU EDITOR V.3

MANUEL D UTILISATION ORBITVU EDITOR V.3 MANUEL D UTILISATION ORBITVU EDITOR V.3 1 INFORMATIONS GENERALES : Logiciel Orbitvu Editor V 3 Le logiciel accepte les systèmes d exploitation suivants : - Microsoft Vista avec service pack 2 et les dernières

Plus en détail

TD HTML AVEC CORRECTION

TD HTML AVEC CORRECTION TD HTML AVEC CORRECTION On utilisera Notepad++ comme éditeur sur Windows Vous créez un répertoire www sous vos répertoires personnels et vous mettrez vos pages dedans. Créez vos fichiers HTML et n oubliez

Plus en détail

Diffuser un contenu sur Internet : notions de base... 13

Diffuser un contenu sur Internet : notions de base... 13 Diffuser un contenu sur Internet : notions de base... 13 1.1 Coup d œil sur l organisation de cet ouvrage.............. 15 Préambule : qu est-ce qu une page web?................ 16 À propos du HTML...........................

Plus en détail

Normes techniques 2011

Normes techniques 2011 Normes techniques 2011 Display classique Formats Livrables Footer p 2 p 3 p 4 Opérations spéciales Publi-rédactionnel Jeu concours Quiz Lien partenaire Habillage Accueil panoramique Sponsoring de rubrique

Plus en détail

TP création et publication d'un site web statique

TP création et publication d'un site web statique TP création et publication d'un site web statique Ce TP va se décomposer en trois parties. Dans un premier temps nous créerons un site web statique. Le site sera créé avec l'éditeur Amaya pour respecter

Plus en détail

Mozilla Firefox 3.5. Google Chrome 3.0 LES NAVIGATEURS WEB. (pour Windows) Opéra 10. Internet Explorer 8. Safari 4.0

Mozilla Firefox 3.5. Google Chrome 3.0 LES NAVIGATEURS WEB. (pour Windows) Opéra 10. Internet Explorer 8. Safari 4.0 Mozilla Firefox 3.5 Google Chrome 3.0 LES NAVIGATEURS WEB (pour Windows) Opéra 10 Internet Explorer 8 Safari 4.0 1 1 Sommaire Qu est ce qu un navigateur Web? Fonctionnement Caractéristiques communes Caractéristiques

Plus en détail

Analyses. qlikview.com. facile à utiliser. Les utilisateurs aiment QlikView pour : la recherche associative ;

Analyses. qlikview.com. facile à utiliser. Les utilisateurs aiment QlikView pour : la recherche associative ; Analyses associatives Les attentes en matière de Business Intelligence ont radicalement changé. Les sociétés en constante évolution n acceptent plus les logiciels trop complexes, conçus pour une poignée

Plus en détail

Le Cloud Computing est-il l ennemi de la Sécurité?

Le Cloud Computing est-il l ennemi de la Sécurité? Le Cloud Computing est-il l ennemi de la Sécurité? Eric DOMAGE Program manager IDC WE Security products & Solutions Copyright IDC. Reproduction is forbidden unless authorized. All rights reserved. Quelques

Plus en détail

Guide d'installation rapide TFM-560X YO.13

Guide d'installation rapide TFM-560X YO.13 Guide d'installation rapide TFM-560X YO.13 Table of Contents Français 1 1. Avant de commencer 1 2. Procéder à l'installation 2 Troubleshooting 6 Version 06.08.2011 16. Select Install the software automatically

Plus en détail