RESPONSIVE DESIGN. Gobelins Isabelle Biamonti

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

Download "RESPONSIVE DESIGN. Gobelins 2014.2015. Isabelle Biamonti"

Transcription

1 RESPONSIVE DESIGN Gobelins Isabelle Biamonti

2 Plan Principe général Exemples Sans responsive Avec responsive Versions séparées Responsive design ou versions séparées? Comment rendre un design flexible? Containers, positionnements Textes Images Comment implémenter cette flexibilité? (Media Queries)

3 LE PRINCIPE GENERAL DU RESPONSIVE DESIGN

4 Le principe général du responsive design Qu'est-ce que le responsive design? à Un ensemble de méthodes et techniques permettant d universaliser un site web.

5 Le principe général du responsive design Tailles d'écrans et résolutions

6 Le principe général du responsive design Tailles d'écrans et résolutions

7 Le principe général du responsive design Pourquoi le responsive design? à Les contraintes que l on se fixait avant ne fonctionnent plus : avant : une largeur de 800px à 1024px 300dpi pour l'impression, 72dpi pour le web aujourd hui : des écrans offrant des tailles entre 320px et 2560px 300dpi pour l'impression, différents dpi pour le web/mobile à Tableau de référence des différentes tailles d'écran / résolutions à "S'adapter à tout type d'appareil de manière transparente pour l'utilisateur" (Alsacréations)

8 EXEMPLES DE SITES SANS RESPONSIVE, AVEC RESPONSIVE, ET VERSIONS SEPAREES

9 Exemples de sites Sans responsive design à Les boutons / champs sont trop gros sur grand écran, trop petits sur mobiles

10 Exemples de sites Sans responsive design à Ascenseurs : le design n est pas adapté, il faut naviguer gauche/droite haut/bas

11 Exemples de sites Avec responsive design à Adaptation : les éléments non essentiels (images par ex) n'apparaissent pas sur la version mobile

12 Exemples de sites Avec responsive design à Adaptation : le menu est transformé sur la version mobile

13 Exemples de sites Avec responsive design à Adaptation : le positionnement des blocs évolue selon la structure de la page.

14 Exemples de sites Avec responsive design

15 Exemples de sites Versions séparées à Versions : on voit ici une version spécifique pour le support mobile

16 Exemples de sites Versions séparées à 2 Versions : la version mobile utilise la géolocalisation

17 RESPONSIVE DESIGN OU VERSION SEPAREES?

18 Responsive design ou versions séparées? Définitions à Design "Static" (ou "fixe") Dimensions figées (par exemple 960px) quelle que soit la surface de l'écran. La grande majorité des sites web était construite sur cette base avant l'arrivée du Responsive Web Design dans les années à Design "Liquid" (ou "fluide") Site web dont toutes les largeurs de colonnes sont exprimées en unités variables (pourcentages, em, vw, etc.) et qui s'adapte généralement automatiquement à la taille de fenêtre, jusqu'à une certaine mesure.

19 Responsive design ou versions séparées? Définitions à Design "Adaptive" Amélioration du design statique : unités de largeur fixes, mais différentes selon la taille de l'écran, qui est détectée via CSS3 Media Queries. Un tel design tient uniquement compte des principaux points de rupture (320px, 480px, 768px, 1024px, etc.) et adapte le gabarit en conséquence. Au final, on se retrouve avec autant de gabarits fixes que de points de ruptures. à Design "Responsive" Un site web Responsive est une amélioration du design liquide associé à des méthodes CSS3 Media Queries permettant de modifier les styles (réorganisation de la page par exemple) selon certains critères, pour s'adapter complètement à la taille d'écran, quel que soit le point de rupture.

20 Responsive design ou versions séparées? Faire son choix RESPONSIVE WEB DESIGN VERSIONS SEPAREES Adaptation du contenu Coût de réalisation / Délais Simplicité de mise à jour Utilisation des possibilités du support (tactile, photo, gps, ) à Expérience utilisateur adaptée Formulaires, calendriers Pls. pages pour les contenus trop longs

21 Responsive design ou versions séparées? Faire son choix "Tout dépend : Du nombre de terminaux visés, Du type de contenu et d interaction que le site propose (effort de maintenance) De la compétence HTML/CSS des équipes. " Un site responsive représente environ 25% de temps (budget) supplémentaire. Il demande des connaissances techniques, et la possibilité de tester sur différents supports tout au long du projet. Une analyse précise doit être faite avant de démarrer le projet.

22 COMMENT RENDRE UN DESIGN FLEXIBLE?

23 Comment rendre un design flexible? Blocs et positionnements

24 Comment rendre un design flexible? Textes

25 Comment rendre un design flexible? Images Une formule qui fonctionne (presque!) à tous les coups : img{ } max-width : 100%; à L'image prendra au maximum la même largeur que son conteneur. à Autres solutions : - overflow : hidden (l image est tronquée, ce qui dépasse du bloc masqué) - width : 100% (l'image prendra toujours toute la largeur du bloc)

26 Comment rendre un design flexible? La formule magique d'ethan Marcotte VALEUR VOULUE / CONTEXTE = RESULTAT TYPO : 1em = 16px, donc si on souhaite obtenir une taille de 24 : 24/16 = 1.5 à Font-size:1.5em; TAILLE ou POSITION : Une colonne de 900px dans un site de 960px : 900/960 = 0,9375 à width:93.75%;

27 COMMENT METTRE EN PLACE CETTE FLEXIBILITE?

28 Comment mettre en place cette flexibilité? Les media queries Dans le fichier HTML, contraindre l'appel à une CSS : <link rel="stylesheet" media="screen and (max-width: 640px)" href="smallscreen.css" type="text/css" /> <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="paysage.css"> Dans le fichier CSS, contraindre l'application d'une screen and (max-width: 640px) {.bloc { display:block; clear:both; } screen and (min-width: 200px) and (max-width: 640px) {.bloc { display:block; clear:both; } }

29 Comment mettre en place cette flexibilité? La meta viewport Elle permet de contrôler l'affichage et outrepasser le comportement par défaut. <meta name="viewport" content="width=320" /> à impose une largeur de 320px. <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width" /> à initial-scale = le niveau de zoom de la page (1 = 100%). à width = la largeur de l écran (et non la largeur du navigateur). à maximum-scale = empêcher de redimensionner le site web.

30

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

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

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

11/02/14 SITE WEB RÉACTIFS CONTEXTE ENVIRONNEMENT NAVIGATEURS PRINCIPES GÉNÉRAUX LES POINTS DE RUPTURE

11/02/14 SITE WEB RÉACTIFS CONTEXTE ENVIRONNEMENT NAVIGATEURS PRINCIPES GÉNÉRAUX LES POINTS DE RUPTURE 11/02/14 CONTEXTE SITE WEB RÉACTIFS S. LANQUETIN ENVIRONNEMENT Clavier (standard, mini, virtuel) Souris / doigt / stylet Rotation de l écran Performances CPU et GPU Capacité de stockage GPS Mobile/fixe

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

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

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

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

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

Activation et personnalisation de votre site mobile

Activation et personnalisation de votre site mobile Activation et personnalisation de votre site mobile Page 1 / 1 Table des matières 1. Activation de la version mobile 3 2. Personnalisation de la version mobile : premiers pas 2.1. Apparence générale et

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

Cas client : Mise en place d une créa d Email Responsive RESPONSIVE EMAIL DESIGN

Cas client : Mise en place d une créa d Email Responsive RESPONSIVE EMAIL DESIGN Cas client : Mise en place d une créa d Email Responsive RESPONSIVE EMAIL DESIGN La demande : Un de nos clients nous interroge pour faire évoluer ses emails de recrutement prestataires, vers du responsive.

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

LE POSITIONNEMENT CSS. Quelques notions essentielles

LE POSITIONNEMENT CSS. Quelques notions essentielles LE POSITIONNEMENT CSS Quelques notions essentielles Pour éviter ça....element{ padding: 15px; width: 98.32%; /* pas compris, mais ça déborde à 98.33% */ position: relative; /* faut pas enlever */ overflow:

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

Dans ce mémento, vous trouverez les informations détaillées pour configurer les fonctionnalités du Responsive Design dans le Worldsoft CMS:

Dans ce mémento, vous trouverez les informations détaillées pour configurer les fonctionnalités du Responsive Design dans le Worldsoft CMS: 1 La taille et la résolution de l'écran des ordinateurs portables, des ordinateurs de bureau, des tablettes et des smartphones peuvent considérablement varier. C'est pour cette raison, que les sites Web

Plus en détail

Introduction à HTML5, CSS3 et au responsive web design

Introduction à HTML5, CSS3 et au responsive web design 1 Introduction à HTML5, CSS3 et au responsive web design Jusqu à une période récente, les sites web étaient conçus avec une largeur fixe de l ordre de 960 pixels, en espérant que les visiteurs en tirent

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

Freeway 7. Nouvelles fonctionnalités

Freeway 7. Nouvelles fonctionnalités ! Freeway 7 Nouvelles fonctionnalités À propos de ce guide... 3 Nouvelles fonctionnalités en un coup d'oeil... 3 À propos de la conception d'un site web réactif... 3 Travailler avec les pages pour créer

Plus en détail

HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles

HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles 46 HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles enfin deux points importants pour les sites mobiles, les nouveautés sur les formulaires ainsi que le mode hors-ligne. 2. Bonnes

Plus en détail

Créer une application de livre interactif pour tablette avec Indesign CS6 et Adobe Digital Publishing Suite

Créer une application de livre interactif pour tablette avec Indesign CS6 et Adobe Digital Publishing Suite Applications de type livre Introduction 9 Qu est-ce qu une application de type livre? 9 Découvrir DPS 11 La publication 12 Comprendre le flux de publication 12 Édition simple ou multifolio 13 Choisir l

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

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

Windows 8 : Éléments de l'écran Bureau

Windows 8 : Éléments de l'écran Bureau Windows 8 : Éléments de l'écran Bureau Le Bureau est la partie «classique» de Windows 8 càd utilisée sur un pc ou un ordinateur de bureau. On peut l'utiliser avec une tablette tactile, mais il n'est vraiment

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

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

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

Le courriel responsive Optimiser vos campagnes pour l affichage mobile

Le courriel responsive Optimiser vos campagnes pour l affichage mobile 1 Le courriel responsive Optimiser vos campagnes pour l affichage mobile SOMMAIRE Du téléphone portable au téléphone intelligent... 2 L apparition du téléphone intelligent... 2 Le téléphone intelligent

Plus en détail

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

CONCEPTEUR REALISATEUR MULTIMEDIA GOBELINS CAHIER DES CHARGES WORKSHOP HTML/JAVASCRIPT. CRM13 2 ème ANNEE

CONCEPTEUR REALISATEUR MULTIMEDIA GOBELINS CAHIER DES CHARGES WORKSHOP HTML/JAVASCRIPT. CRM13 2 ème ANNEE CONCEPTEUR REALISATEUR MULTIMEDIA GOBELINS CAHIER DES CHARGES WORKSHOP HTML/JAVASCRIPT CRM13 2 ème ANNEE OCTOBRE 2014 Objectifs : Approfondir votre pratique de l intégration HTML/CSS Apprendre à intégrer

Plus en détail

Syntaxe CSS 4 Jeu de règles... 4 Propriétés et valeurs... 4 Les sélecteurs... 4 Exemples sur les sélecteurs... 8

Syntaxe CSS 4 Jeu de règles... 4 Propriétés et valeurs... 4 Les sélecteurs... 4 Exemples sur les sélecteurs... 8 Cours CSS 2013 tv - v.1.1 Sommaire Introduction aux feuilles de style 2 Constituants des pages web..................................... 2 Définition...............................................

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

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

Cours IHM-1 Conception des interfaces 5 - Agencement de l'interface Disposition des éléments Jacques BAPST

Cours IHM-1 Conception des interfaces 5 - Agencement de l'interface Disposition des éléments Jacques BAPST Cours IHM-1 Conception des interfaces 5 - Agencement de l'interface Disposition des éléments Jacques BAPST jacques.bapst@hefr.ch Gestion de l'espace à disposition IHM-1 ID05 Jacques BAPST 2 Organisation

Plus en détail

Auteur LARDOUX Guillaume Contact guillaume.lardoux@epitech.eu Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA

Auteur LARDOUX Guillaume Contact guillaume.lardoux@epitech.eu Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA Auteur LARDOUX Guillaume Contact guillaume.lardoux@epitech.eu Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA Sommaire 1. Introduction 2. Installation 3. Fonctionnement 4. Développement 5. Démonstration 2

Plus en détail

DETERMINER LA LARGEUR DE PAGE D'UN SITE et LES RESOLUTIONS d'ecran

DETERMINER LA LARGEUR DE PAGE D'UN SITE et LES RESOLUTIONS d'ecran DETERMINER LA LARGEUR DE PAGE D'UN SITE et LES RESOLUTIONS d'ecran dossier par Clochar SOMMAIRE 1. LES RESOLUTIONS d'ecran... 1 2. RESOLUTION de l écran et choix de la TAILLE DE LA PAGE... 2 3. AGRANDISSEMENT

Plus en détail

Technologies Web. Technologies Web DHTML TCM-TWEB-01-001-13. Julien BEAUCOURT 2006 pour ETNA

Technologies Web. Technologies Web DHTML TCM-TWEB-01-001-13. Julien BEAUCOURT 2006 pour ETNA DHTML Sommaire Introduction Compatibilité du DHTML Les layers Les balises dynamiques Balise Balise et La balise Animer de éléments Le Document Object Model (DOM) Modifier une

Plus en détail

Développement Web pour mobiles

Développement Web pour mobiles Développement Web pour mobiles Les bases du HTML par Eric Sarrion Date de publication : 11/08/2010 Dernière mise à jour : Le langage HTML est le langage de base permettant de construire des pages web,

Plus en détail

Manuel du composant CKForms Version 1.3.2

Manuel du composant CKForms Version 1.3.2 Manuel du composant CKForms Version 1.3.2 Ce manuel vous présente les principales fonctionnalités du composant CKForms y compris le module et le plug-in CKForms 1.3 est la nouvelle version du composant

Plus en détail

Guide 2015 site web classique L édition de site

Guide 2015 site web classique L édition de site Guide 2015 site web classique L édition de site L interface d édition Navigation... 03 Langue... 04 Thèmes... 05 Options... 06 Aperçu... 07 Paramètres de page... 08 Partage sur les médias sociaux... 09

Plus en détail

Préface 3. Conventions typographiques... 3 Feedback... 4. Introduction 5. Se familiariser avec l'interface de SiteBuilder 6. Créer un site Web 8

Préface 3. Conventions typographiques... 3 Feedback... 4. Introduction 5. Se familiariser avec l'interface de SiteBuilder 6. Créer un site Web 8 Parallels Panel Table des matières Préface 3 Conventions typographiques... 3 Feedback... 4 Introduction 5 Se familiariser avec l'interface de SiteBuilder 6 Créer un site Web 8 Editer un site Web 9 Utiliser

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

Java 7 Les fondamentaux du langage Java

Java 7 Les fondamentaux du langage Java 184 Java 7 Les fondamentaux du langage Java 1.1 Les bibliothèques graphiques Le langage Java propose deux bibliothèques dédiées à la conception d'interfaces graphiques. La bibliothèque AWT et la bibliothèque

Plus en détail

Guide App Studio 9.2

Guide App Studio 9.2 Guide App Studio 9.2 TABLE DES MATIÈRES Table des matières App Studio...4 Remarque destinée aux utilisateurs d'app Studio 9.1...5 Présentation d'app Studio...6 Présentation des formats AVE-Mag et AVE-Doc...7

Plus en détail

Chapitre 22 Optimisation pour diffusion à l'écran, pour le web

Chapitre 22 Optimisation pour diffusion à l'écran, pour le web 1 1 9 9 7 7 Optimisation pour diffusion à l'écran, pour le web Diffusion pour le web........................ 31 Les paramètres avant l exportation................. 31 Optimisation pour le web......................

Plus en détail

Prise en main du logiciel. Smart BOARD Notebook 10

Prise en main du logiciel. Smart BOARD Notebook 10 Prise en main du logiciel Smart BOARD Notebook 10 1. Introduction : Le logiciel Smart BOARD est utilisable avec les tableaux blancs interactifs de la gamme SMART. Toutefois, il n'est pas nécessaire d'avoir

Plus en détail

Marie-eve TREMBLAY GROUPE B. Rapport de synthèse : Le responsive web design, CSS3 et HTML5. Apprentissage autonome 582-FXA-06

Marie-eve TREMBLAY GROUPE B. Rapport de synthèse : Le responsive web design, CSS3 et HTML5. Apprentissage autonome 582-FXA-06 Marie-eve TREMBLAY GROUPE B Rapport de synthèse : Le responsive web design, CSS3 et HTML5 Apprentissage autonome 582-FXA-06 Département des Techniques de communication Programme des Techniques d'intégration

Plus en détail

Windows 7 : les bases

Windows 7 : les bases Fiche Logiciel Ordinateur Niveau FL01011 09/12 Windows 7 : les bases L'utilisation d'un ordinateur suppose la découverte d'un environnement nouveau, qui a son propre vocabulaire et ses propres concepts

Plus en détail

Les unités de taille des polices de caractères

Les unités de taille des polices de caractères Les unités de taille des polices de caractères Deux systèmes permettent d'indiquer les dimensions des éléments en CSS : les unités de taille fixe et les unités de taille relative. C'est la propriété font-size

Plus en détail

Création de maquette web

Création de maquette web Création de maquette web avec Fireworks Il faut travailler en 72dpi et en pixels, en RVB Fireworks étant un logiciel dédié à la création de maquettes pour le web il ne propose que les pixels pour le texte

Plus en détail

MEMENTO D'UTILISATION Du T.N.I. SmartBoard (Version 10.0.130)

MEMENTO D'UTILISATION Du T.N.I. SmartBoard (Version 10.0.130) CRDP de l académie de Versailles Mission TICE Médiapôles mediapoles @crdp.ac-versailles.fr MEMENTO D'UTILISATION Du T.N.I. SmartBoard (Version 10.0.130) Mars 2009 584, rue Fourny 78530 Buc Tél. 01 39 45

Plus en détail

Introduction aux feuilles de styles

Introduction aux feuilles de styles Introduction aux feuilles de styles 1. Introduction Cette technologie a été introduite par Microsoft avec la version 3.0 (1996) avec pour but de modifier le contenu d'une page par une grande variété d'effets

Plus en détail

Les pré-requis pour créer un.ave pour Android

Les pré-requis pour créer un.ave pour Android Les pré-requis pour créer un.ave pour Android 1 Sommaire Spécificités d Android : conseils pour la création d un.ave... 3 Conseils génériques (également valable pour ios et le Web)... 4 Compatibilité détaillée

Plus en détail

Support Gestionnaire pour les nouvelles versions CPM (outil Drupal) Télésanté Aquitaine

Support Gestionnaire pour les nouvelles versions CPM (outil Drupal) Télésanté Aquitaine Support Gestionnaire pour les nouvelles versions CPM (outil Drupal) Objet du document Ce document a pour but d'apporter des éléments de support au gestionnaire des nouvelles communautés de pratiques médicales.

Plus en détail

WEB. Travailler la résolution de vos pages

WEB. Travailler la résolution de vos pages GÉRER LES PAGES WEB Vous avez appris dans les sections 2 et 3 à créer le contenu textuel et graphique de vos pages Web. Cette section explique comment utiliser FrontPage pour placer des objets sur une

Plus en détail

145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com

145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com Guide de l utilisateur CMS 1 Navigation dans le CMS... 2 1.1 Menu principal... 2 1.2 Modules tableau... 3 1.3 Modules formulaire... 5 1.4 Navigation dans le site Web en mode édition... 6 2 Utilisation

Plus en détail

1 Module 1 : feuille de style, position des blocs, nombre d éléments

1 Module 1 : feuille de style, position des blocs, nombre d éléments Plugin d'habillage d'eva-web 4 Le plugin d'habillage d'eva-web permet de : adapter la position, la taille des divers éléments la composant choisir les couleurs de fonds des divers secteurs choisir la taille,

Plus en détail

Présentation de Muse

Présentation de Muse Présentation de Muse J. ROMAGNY 1. CONSEILS... 4 2. INTERFACE... 5 A. CREATION DE SITE... 5 960 Grid System avec Muse... 6 B. PLAN DU SITE... 7 C. CONCEPTION (EDITION DES «MASTER PAGES» ET PAGES)... 8

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

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

Découvrir Drupal. Les meilleurs thèmes et modules Drupal (présenta5on démo)

Découvrir Drupal. Les meilleurs thèmes et modules Drupal (présenta5on démo) Découvrir Drupal Les meilleurs thèmes et modules Drupal (présenta5on démo) Tour d horizon des principales fonc5onnalités de Drupal au travers de la présenta5on de quelques- uns de ses principaux modules

Plus en détail

Programmation Web TP1 - HTML

Programmation Web TP1 - HTML Programmation Web TP1 - HTML Vous allez réaliser votre premier site Web dans lequel vous présenterez la société SC, agence spécialisée dans la conception des sites internet. 1 - Une première page en HTML

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

Sommaire. Introduction. p. 03

Sommaire. Introduction. p. 03 Sommaire Introduction 1. Usages du mobile : Ce qu il faut savoir A. Les bonnes questions du mobile B. Les spécificités du mobile C. Un projet global 2. Technique : Let s go Responsive! A. Le Design évolue...

Plus en détail

DÉVELOPPEMENT ANDROID

DÉVELOPPEMENT ANDROID DÉVELOPPEMENT ANDROID ESIEE / Key Consulting Partie 2 v2.2-2012 INTENT Key Consulting INTENT Intent : intention Une Intent est une agrégation d informations, décrivant de manière abstraite une action devant

Plus en détail

Alerte email de stock

Alerte email de stock Alerte email de stock Liste des fichiers emajine_menu_alerte_stock.xml menualerte_stock.class.php emajine_menu_addonalertstock.xml menuaddonalertstock.class.php AlerteStock_CRUD.class.php exportcsv_small.png

Plus en détail

Petit guide d'installation de l'option de connexion réseau

Petit guide d'installation de l'option de connexion réseau Xerox WorkCentre M118/M118i Petit guide d'installation de l'option de connexion réseau 701P42687 Ce guide contient des instructions concernant : Navigation dans les écrans à la page 2 Configuration réseau

Plus en détail

Guide de l utilisateur. Faites connaissance avec la nouvelle plateforme interactive de

Guide de l utilisateur. Faites connaissance avec la nouvelle plateforme interactive de Guide de l utilisateur Faites connaissance avec la nouvelle plateforme interactive de Chenelière Éducation est fière de vous présenter sa nouvelle plateforme i+ Interactif. Conçue selon vos besoins, notre

Plus en détail

ENT ONE Note de version. Version 1.10

ENT ONE Note de version. Version 1.10 Version 1.10 Ce document présente les nouveautés et les changements apportés par cette nouvelle version de ONE installée le 5 novembre 2014. Quoi de neuf dans cette version? 1. Les nouveautés... 2 1.1

Plus en détail

Tutorial des barres d'outils dans Mozilla Firefox

Tutorial des barres d'outils dans Mozilla Firefox Version 2.1 24. septembre 2007 Tutorial des barres d'outils dans Mozilla Firefox Responsable du projet : Auteur : Collaborateurs : Marc Johannot Cide Cyrille Verdon, Pouly Romain TUTORIIAL Les barres d'outils

Plus en détail

OPENMEETINGS. Application de Web Conférence Documentation Version N 2 DSI - GFA C. Larmusiau

OPENMEETINGS. Application de Web Conférence Documentation Version N 2 DSI - GFA C. Larmusiau OPENMEETINGS Application de Web Conférence Documentation Version N 2 DSI - GFA C. Larmusiau OpenMeetings Comment se connecter Création d'une réunion privée avec invitation Connexion des différents intervenants

Plus en détail

Relever le défi du Web mobile

Relever le défi du Web mobile Relever le défi du Web mobile Bonnes pratiques de conception et développement François Daoust Dominique Hazaël-Massieux Groupe Eyrolles, 2011, ISBN : 978-2-212-12828-4 4 Les bases d un bon site web mobile

Plus en détail

Procédure Newsletter. 1. Gestion des listes de diffusion. Se rendre à Activité > Inscrits aux envois par email

Procédure Newsletter. 1. Gestion des listes de diffusion. Se rendre à Activité > Inscrits aux envois par email Procédure Newsletter 1. Gestion des listes de diffusion Se rendre à Activité > Inscrits aux envois par email Ici l on peut créer des listes de diffusion et ajouter, modifier, supprimer les abonnés à la

Plus en détail

UTILISATION CMS LINKEO

UTILISATION CMS LINKEO UTILISATION CMS LINKEO Table des matières 1 Synopsis... 3 2 Connexion à l'interface d'administration...4 3 Edition d'une page...5 3.1 Edition d'une page...5 3.2 Ajout d'une image...5 3.2.1 Transfert d'une

Plus en détail

Optimisation des e-mails pour les supports mobiles. Améliorez vos taux de clics sans augmenter votre charge de travail.

Optimisation des e-mails pour les supports mobiles. Améliorez vos taux de clics sans augmenter votre charge de travail. Enterprise Email Marketing Solutions & Services 27% DES E-MAILS SONT OUVERTS SUR SUPPORTS MOBILES Optimisation des e-mails pour les supports mobiles Améliorez vos taux de clics sans augmenter votre charge

Plus en détail

Ranger et classer ses documents (Windows Sept)

Ranger et classer ses documents (Windows Sept) Les dossiers / les fichiers : D'apparence, Windows 7 est très proche de Vista (Win7 est une évolution majeure de Vista). Ainsi on y retrouve la même présentation avec le thème Aero (transparence autour

Plus en détail

MODE D EMPLOI (v1.1) DE PARUMOBILE, ÉDITEUR EN LIGNE DE SITE MOBILE

MODE D EMPLOI (v1.1) DE PARUMOBILE, ÉDITEUR EN LIGNE DE SITE MOBILE MODE D EMPLOI (v1.1) DE PARUMOBILE, ÉDITEUR EN LIGNE DE SITE MOBILE TABLE DES MATIÈRES 1. Inscription (p.3) 2. Connexion / Votre compte (p.4) 3. Édition (p.5) 3.1. Manager 3.1.1. La barre horizontale des

Plus en détail

Création d'un site neutre et présentation des éléments de la page d'accueil

Création d'un site neutre et présentation des éléments de la page d'accueil Création d'un site neutre et présentation des éléments de la page d'accueil Alkante Page 1/8 Table des matières Préambule... 3 Création d'un site neutre... 3 Rubriques de pages éditoriales...5 Contenu

Plus en détail

Formation Webmaster : Création de site Web Initiation + Approfondissement

Formation Webmaster : Création de site Web Initiation + Approfondissement Contactez notre équipe commerciale au 09.72.37.73.73 Aix en Provence - Bordeaux - Bruxelles - Geneve - Lille - Luxembourg - Lyon - Montpellier - Nantes - Nice - Paris - Rennes - Strasbourg - Toulouse Formation

Plus en détail

Mise en lumière de votre excellence

Mise en lumière de votre excellence isycard Sommelier Cartes & Menus numériques : tablettes, smartphones, bornes tactiles 39 90 H.T. / mois Mise en lumière de votre excellence hôtels restaurants bars boutiques spas vins isycard Sommelier

Plus en détail

Proposer plusieurs CSS en fonction du

Proposer plusieurs CSS en fonction du Accueil A propos Nuage de Tags Contribuer Who s who Récoltez l actu UNIX et cultivez vos connaissances de l Open Source 15 sept 2008 Proposer plusieurs CSS en fonction du navigateur Catégorie : Web Tags

Plus en détail

Référentiel Général d Accessibilité pour les Administrations RGAA

Référentiel Général d Accessibilité pour les Administrations RGAA Référentiel Général d Accessibilité pour les Administrations RGAA Annexe 3 : Grilles de correspondance entre les critères de succès et les tests de conformité Page 1/21 1. Grille de correspondance des

Plus en détail

Manuel d utilisation du site web de l ONRN

Manuel d utilisation du site web de l ONRN Manuel d utilisation du site web de l ONRN Introduction Le but premier de ce document est d expliquer comment contribuer sur le site ONRN. Le site ONRN est un site dont le contenu est géré par un outil

Plus en détail

Mode d emploi SPIP 2.0 pour rédacteur

Mode d emploi SPIP 2.0 pour rédacteur Mode d emploi SPIP 2.0 pour rédacteur L objectif de ce document est d apprendre à utiliser le logiciel SPIP en tant que rédacteur. Ce cours ne requiert aucune connaissance informatique préalable à part

Plus en détail

WINDOWS 7 INITIATION CYCLE 2 ==> COURS 01-2013

WINDOWS 7 INITIATION CYCLE 2 ==> COURS 01-2013 PARAMÉTRAGE DE L'AFFICHAGE DU BUREAU 1) Cliquez droit sur une partie vide du " Bureau " ==> Cliquez sur " Personnaliser " 2) Dans la fenêtre " Modifier les effets visuels...ordinateur " ==> Dans la rubrique

Plus en détail

Gestion d identités PSL Exploitation IdP Authentic

Gestion d identités PSL Exploitation IdP Authentic Gestion d identités PSL Exploitation IdP Authentic Entr ouvert SCOP http ://www.entrouvert.com Table des matières 1 Arrêt et démarrage 2 2 Configuration 2 2.1 Intégration à la fédération............................

Plus en détail

THEME RESPONSIVE DESIGN

THEME RESPONSIVE DESIGN THEME RESPONSIVE DESIGN Tablettes, smartphones, netbooks, ordinateurs les résolutions d écrans sont nombreuses. Adaptez vous aux nouvelles habitudes des utilisateurs en étant visible de façon optimale.

Plus en détail

CRÉER UNE BASE DE DONNÉES AVEC OPEN OFFICE BASE

CRÉER UNE BASE DE DONNÉES AVEC OPEN OFFICE BASE CRÉER UNE BASE DE DONNÉES AVEC OPEN OFFICE BASE 3. ème partie : RAPPORTS MENU D'ACCUEIL - MIGRATION Table des matières 1. Les RAPPORTS...2 1.1 Création d'un rapport basé sur une Requête...3 1.2 Imprimer,

Plus en détail

Programme de Formation Open Office Base Fonctions avancées

Programme de Formation Open Office Base Fonctions avancées ENVIRONNEMENT GÉNÉRALITÉS Lancer Microsoft Excel 2010 Quitter Microsoft Excel 2010 Découvrir la fenêtre de l'application Excel 2010 Découvrir la fenêtre du classeur Utiliser le ruban Découvrir l'onglet

Plus en détail

TRAVAILLER SUR LES ORDINATEURS DU LYCEE

TRAVAILLER SUR LES ORDINATEURS DU LYCEE TRAVAILLER SUR LES ORDINATEURS DU LYCEE TRAVAILLER SUR LES ORDINATEURS DU LYCEE Ouvrir et fermer une session, éteindre le poste...3 Ouvrir une session...3 Fermer une session...4 Eteindre le poste...5 L'environnement

Plus en détail

Le Windows que vous connaissez, simplement amélioré. Petit guide rapide pour Windows 8.1 en Entreprise

Le Windows que vous connaissez, simplement amélioré. Petit guide rapide pour Windows 8.1 en Entreprise Le Windows que vous connaissez, simplement amélioré. Petit guide rapide pour Windows 8.1 en Entreprise Découvrez l écran d accueil. Votre écran d accueil concentre les informations les plus importantes

Plus en détail

1. PRESENTATION. La Messagerie, Elle permet d envoyer des messages, d en recevoir, de les lire et d y répondre.

1. PRESENTATION. La Messagerie, Elle permet d envoyer des messages, d en recevoir, de les lire et d y répondre. 1. PRESENTATION 1.1. LE LOGICIEL MICROSOFT OUTLOOK Le gestionnaire d informations Bureautique Microsoft OUTLOOK 2000 permet de communiquer sur le réseau interne d une entreprise ou via Internet, de gérer

Plus en détail

Raccourcis clavier de Windows

Raccourcis clavier de Windows Raccourcis clavier de Windows Juin 2014 Raccourcis spécifiques à Windows Pour la gestion de fichiers mais aussi pour tous les logiciels Pour les logiciels de traitement de texte Pour Word Pour Excel Pour

Plus en détail

Présentation Skype 14 janvier 2015

Présentation Skype 14 janvier 2015 Windows et ipad Skype est un logiciel de communication Grâce à l'évolution de la technologie, la distance n'est plus un obstacle à la communication. Quiconque connaît le logiciel Skype sait que cela est

Plus en détail

Espace Client Aide au démarrage

Espace Client Aide au démarrage Espace Client Aide au démarrage 1. A propos de l Espace Client... 2 a. Nouvelles fonctionnalités... 2 b. Reprise de vos documents... 2 c. Migration vers l Espace Client... 2 2. Accès à l Espace Client...

Plus en détail

Intégrer des médias. Plateforme e-tourisme. demo.minisites.encharentemaritime.com

Intégrer des médias. Plateforme e-tourisme. demo.minisites.encharentemaritime.com demo.minisites.encharentemaritime.com Insérer des photos Illustrez vos contenus en intégrant Depuis la barre d administration Vous pouvez télécharger des fichiers depuis votre ordinateur ou choisir des

Plus en détail

Présentation du tableau blanc interactif Interwrite

Présentation du tableau blanc interactif Interwrite Présentation du tableau blanc interactif Interwrite Joël Leporcq CDDP des Ardennes Le logiciel Interwrite propose 3 modes de fonctionnement : Interactif (ou «mode leçon») En mode souris, permet de travailler

Plus en détail

Présentation générale 11. Lancer Visio 11. Quitter Visio 13. Découvrir l écran de travail 14. Utiliser le Ruban 16. Utiliser le menu contextuel 17

Présentation générale 11. Lancer Visio 11. Quitter Visio 13. Découvrir l écran de travail 14. Utiliser le Ruban 16. Utiliser le menu contextuel 17 Généralités Présentation générale 11 Lancer Visio 11 Quitter Visio 13 Découvrir l écran de travail 14 Utiliser le Ruban 16 Utiliser le menu contextuel 17 Déplacer la barre d outils Accès rapide 19 Ajouter/supprimer

Plus en détail

Support de formation pour l'installation d'un logiciel gratuit de retouche d'images et gestion de la qualité, taille et format des images :

Support de formation pour l'installation d'un logiciel gratuit de retouche d'images et gestion de la qualité, taille et format des images : Support de formation pour l'installation d'un logiciel gratuit de retouche d'images et gestion de la qualité, taille et format des images : l architecte de votre image 01 - O uvrir votre navigateur, nous

Plus en détail