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

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

Conception Adaptative "Responsive Web Design"

Conception Adaptative Responsive Web Design Conception Adaptative "Responsive Web Design" Construire des interfaces web qui s'adaptent aux spécificités des terminaux sur lesquelles elles sont vues RWD in the wild quelques exemples : http://incredibletypes.com/

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

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

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

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

Créer son site web. Avec la distribution e-change http://www.plateforme-echange.org/ Benoît Mamet Cédric Morin

Créer son site web. Avec la distribution e-change http://www.plateforme-echange.org/ Benoît Mamet Cédric Morin Créer son site web Avec la distribution e-change http://www.plateforme-echange.org/ Benoît Mamet Cédric Morin 1 Personnaliser l'apparence du site Avec la distribution e-change 2 La version rapide 3 Choisir

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

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

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

Responsive Web Design (RWD)

Responsive Web Design (RWD) Responsive Web Design (RWD) CSS 3 et présentation avancée 1 Qu est ce que le responsive? Démo : Chrome + guardian.com 2 Qu est ce que le responsive? 3 Pourquoi? Explosion de la variété des supports source

Plus en détail

BIEN DÉCLINER SA PRÉSENCE DIGITALE MOBILE, TABLETTE, ORDINATEUR, NETBOOK

BIEN DÉCLINER SA PRÉSENCE DIGITALE MOBILE, TABLETTE, ORDINATEUR, NETBOOK BIEN DÉCLINER SA PRÉSENCE DIGITALE MOBILE, TABLETTE, ORDINATEUR, NETBOOK Pourquoi vouloir décliner? POURQUOI VOULOIR DÉCLINER? LES SUPPORTS DE VISUALISATION SE DIVERSIFIENT DES DEVICES VARIÉS DES RÉSOLUTIONS

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

Les feuilles de styles

Les feuilles de styles Qu'est-ce que les feuilles de style? Les feuilles de style CSS pour Cascading Style Sheets en anglais est un langage informatique qui sert à décrire la présentation des documents HTML. L'un des objectifs

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

Un site internet adapté au mobile pourquoi et comment? Pôle Dream - Kiwik 01/04/2014

Un site internet adapté au mobile pourquoi et comment? Pôle Dream - Kiwik 01/04/2014 Un site internet adapté au mobile pourquoi et comment? Pôle Dream - Kiwik SOMMAIRE #Quelques chiffres sur le mobile #Les différentes solutions : - Le responsive Design - Les versions séparées (thème mobile

Plus en détail

PhotoFiltre 7 : Taille des images (10-2014)

PhotoFiltre 7 : Taille des images (10-2014) PhotoFiltre 7 : Taille des images (10-2014) 1 Taille de l'image Utilisation La commande «Taille de l'image» permet de modifier les dimensions en pixels, la résolution et la taille d'impression de l image.

Plus en détail

Dreamweaver - Créer son site internet avec Dreamweaver

Dreamweaver - Créer son site internet avec Dreamweaver 2 Jours Dreamweaver - Créer son site internet avec Dreamweaver dans CREATION WEB - SITE INTERNET Objectifs de la formation Création de site web avec Dreamweaver Concevoir un site Web en HTML avec les fonctions

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

CSS. papa alsacréations autodidacte sport formation écriture webmobile accessibilité photographie

CSS. papa alsacréations autodidacte sport formation écriture webmobile accessibilité photographie Web Mobile et CSS Comment adapter un design sur mobile Webdesign standards web intégration HTML papa alsacréations autodidacte sport formation écriture webmobile accessibilité photographie CSS www. www.goetter.fr

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

Configuration de Windows (II)

Configuration de Windows (II) Configuration de Windows (II) Affichage des icônes sur le Bureau : 1 disposer les icônes librement sur le Bureau 2 créer des raccourcis des lecteurs sur le Bureau 3 ranger les icônes sur le Bureau Affichage

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

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

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

Créer un menu adaptable à toutes les résolutions

Créer un menu adaptable à toutes les résolutions Créé par : feektif Ce guide est reproductible en : 30 à 40 min et est d'un niveau : Intermédiaire Pour de tutoriel, nous allons réaliser un menu composé de cinq liens, chacun divisé en 3 éléments. Un curseur

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

Dreamweaver CS6 pour PC/Mac Pour des sites full CSS conformes aux standards du W3C

Dreamweaver CS6 pour PC/Mac Pour des sites full CSS conformes aux standards du W3C Introduction L'Internet aujourd'hui 7 Le World Wide Web Consortium et les standards 7 Les logiciels de conception de sites web 7 L'objectif du livre 8 Interface de conception L'environnement système 9

Plus en détail

Bootstrap 3 INTRODUCTION. À l origine, projet interne lancé au sein de l entreprise Twitter

Bootstrap 3 INTRODUCTION. À l origine, projet interne lancé au sein de l entreprise Twitter INTRODUCTION À l origine, projet interne lancé au sein de l entreprise Twitter Août 2011 Bootstrap V1, Janvier 2012 Bootstrap V2, Août 2013 Bootstrap V3 Bootstrap est un frameworks HTML/CSS Bibliothèque

Plus en détail

LES TABLES. Exemple de table :
cellule 1 cellule 2
cellule 3 cellule 4

LES TABLES. Exemple de table : <table> <tr> <td>cellule 1</td> <td>cellule 2</td> </tr> <tr> <td>cellule 3</td> <td>cellule 4</td> </tr> </table> LES TABLES Les tables servent pour l'affichage de «données tabulaires», c'est-à-dire des informations présentées logiquement en rangées et en colonnes. Son intégration peut paraitre fastidieuse mais c'est

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

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

Un Site Internet à votre mesure. www.votrecommune.fr. Un site internet gratuit sur mesure en toute indépendance

Un Site Internet à votre mesure. www.votrecommune.fr. Un site internet gratuit sur mesure en toute indépendance www.votrecommune.fr Un site internet gratuit sur mesure en toute indépendance Quelques exemples www.jouesurerdre.fr Quelques exemples www.mouzeil.fr Quelques exemples www.riaille.fr Quelques exemples www.saintherblon.fr

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

Guide Rédacteur Typo3

Guide Rédacteur Typo3 Guide Rédacteur Typo3 Table des matières 1. Introduction 1 2. Login 1 3. Vue d'ensemble 2 1.1 Le mode Page...5 1.2 Le mode Voir...7 4. Créer une nouvelle page 8 5. Déplacer une page 9 6. Copier une page

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

Modifier la taille des images avec photofiltre

Modifier la taille des images avec photofiltre Modifier la taille des images avec photofiltre Une photo prise avec un appareil numérique 6 méga-pixels a une taille d'environ 3 Mo ou 3000 Ko. Pour voir quelle taille ont vos images, ouvrir l'explorateur

Plus en détail

sur pc, tablette ou smartphone... mon site ...GRÂCE AU responsive design!

sur pc, tablette ou smartphone... mon site ...GRÂCE AU responsive design! mon site sur pc, tablette ou smartphone......grâce AU responsive design! LE RESPONSIVE DESIGN COMMUNICATION HÉBERGEMENT le RESPONSIVE DESIGN, c est quoi? WEBMARKETING DÉVELOPPEMENT c'est quoi? Le responsive

Plus en détail

Dreamweaver CC pour PC/Mac Pour des sites full CSS conformes aux standards du W3C

Dreamweaver CC pour PC/Mac Pour des sites full CSS conformes aux standards du W3C Introduction L'Internet aujourd'hui 7 Le World Wide Web Consortium et les standards 7 Les logiciels de conception de sites web 7 L'objectif du livre 8 Le Creative Cloud d Adobe 9 Interface de conception

Plus en détail

Traitement et téléchargement de fichier de grande taille dans STAT-TAB

Traitement et téléchargement de fichier de grande taille dans STAT-TAB Département fédéral de l'intérieur DFI Office fédéral de la statistique OFS Publication et communication 18 février 2014 Traitement et téléchargement de fichier de grande taille dans STAT-TAB Ce document

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

Logiciel XnView. I. L'Utilitaire de la photo

Logiciel XnView. I. L'Utilitaire de la photo I. L'Utilitaire de la photo Logiciel XnView Présentation ci-contre de ce logiciel-utilitaire de photos numériques qui fait presque tout; on s'intéressera surtout à ses possibilités de traiter un certain

Plus en détail

Fiche n 4 Utilisation de Kompozer Table des matières

Fiche n 4 Utilisation de Kompozer Table des matières Fiche n 4 Utilisation de Kompozer Table des matières 1-Travail préparatoire...1 1.1-Contraintes sur les noms de fichier...1 1.2-Préparation du dossier de stockage...1 1.3-Barre d'outils...1 1.4-Création

Plus en détail

Support de cours Dreamweaver CS5 les images. MC Benveniste

Support de cours Dreamweaver CS5 les images. MC Benveniste Support de cours Dreamweaver CS5 les images MC Benveniste 2013 Insertion de contenu > insertion d images image hors du dossier racine Si l image ne se trouve pas dans le site dans lequel vous travaillez

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

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

TP Initiation au langage HTML

TP Initiation au langage HTML TP Initiation au langage HTML (1) Rappels de quelques généralités Un fichier HTML n'est pas compilé (ce n'est pas un programme) Un fichier HTML est un fichier texte simple, parfaitement lisible, respectant

Plus en détail

Guide d'utilisation de l'application "formulaire"

Guide d'utilisation de l'application formulaire Guide d'utilisation de l'application "formulaire" Alkante Page 1/11 Table des matières Présentation... 3 Administration... 3 Création ou modification d'un formulaire...4 Ajouter du contenu à un formulaire...6

Plus en détail

Par défaut, les éléments de type bloc seront affichés dans une succession verticale.

Par défaut, les éléments de type bloc seront affichés dans une succession verticale. Le positionnement Par défaut, les éléments de type bloc seront affichés dans une succession verticale. Une boîte jaune Une boîte verte Les principaux éléments de type bloc sont : l'élément div ; les titres

Plus en détail

HTML5 et CSS3 - La création de page web de A à Z

HTML5 et CSS3 - La création de page web de A à Z 2 Jours HTML5 et CSS3 - La création de page web de A à Z dans CREATION WEB - SITE INTERNET Objectifs de la formation HTML et CSS3 Créer ou modifier des pages HTML Découvrir les nouveautés du HTML 5 Intégrer

Plus en détail

12. LES MISES EN PAGE FLUIDES (LIQUIDES ET ELASTIQUES)

12. LES MISES EN PAGE FLUIDES (LIQUIDES ET ELASTIQUES) 119 12. LES MISES EN PAGE FLUIDES (LIQUIDES ET ELASTIQUES) Pour rappel, il existe trois grands principes de mise en page 1 : Fixe le design possède une largeur fixe exprimée le plus souvent en pixels.

Plus en détail

AdOps Spécifications techniques publicitaires

AdOps Spécifications techniques publicitaires AdOps Spécifications techniques publicitaires Matériel publicitaire HTML5 (Desktop) Les spécifications suivantes doivent être respectées pour la fourniture de matériel publicitaire HTML. Si vous utilisez

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

Pour citer ce document

Pour citer ce document Pour citer ce document Sloïm, É., Denis, L., & Palaci, F. (2005). Accessibilité des CMS : be cool to be strict. Communication présentée aux 6 e Rencontres Mondiales du Logiciel Libre. Dijon, 5-9 juillet.

Plus en détail

A.F.L.I.M. Formation HTML5 et CSS3 - Pour des sites Responsive Web Design

A.F.L.I.M. Formation HTML5 et CSS3 - Pour des sites Responsive Web Design A.F.L.I.M. Ateliers de Formations Linguistique Informatique Multimédia Formation HTML5 et CSS3 - Pour des sites Responsive Web Design Formation : Présentation du HTML5 Bref historique du HTML5 Lignes de

Plus en détail

Formation Responsive Web Design

Formation Responsive Web Design L institut de formation continue des professionnels du Web Formation Responsive Web Design Référence formation : Durée : Prix conseillé : RESPWD 3 jours (21 heures) 1 500 HT (hors promotion ou remise particulière)

Plus en détail

Comment créer un concours photo avec Qualifio Manager?

Comment créer un concours photo avec Qualifio Manager? Démarrage rapide Comment créer un concours photo avec Qualifio Manager? Kit de démarrage rapide pour les utilisateurs expérimentés de Qualifio Manager QUALIFIO JUIN 2012 helpdesk@qualifio.com 1 Sommaire

Plus en détail

Personnalisation des templates pour LogiVert 6

Personnalisation des templates pour LogiVert 6 Manuel Personnalisation des templates pour LogiVert 6 Copyrights (c)2013 + LogiVert BV Site web : www.logivert.com PRESENTATION... 3 INTRODUCTION... 3 LES 4 NIVEAUX... 3 NIVEAU1 CONFIGURATION DE TEMPLATE...

Plus en détail

Création d un Site Web

Création d un Site Web Session2 Etapes Faciles Pour Réussir Sur Internet Création d un Site Web Mounir_ahlyege@hotmail.com 1 CSS :Cascading Style Sheets en français feuilles de style en cascade C'est un autre langage qui vient

Plus en détail

Légende. Conception de Sites Web dynamiques 2015. Résumé. Programme. Fonctionnement, p.ex. Règles du jeu 11/03/2015. Cours 5+6

Légende. Conception de Sites Web dynamiques 2015. Résumé. Programme. Fonctionnement, p.ex. Règles du jeu 11/03/2015. Cours 5+6 Légende Conception de Sites Web dynamiques 2015 Cours 5+6 Patrick Reuter http://www.labri.fr/perso/preuter/cswd2015 Titre de la page h1, h2, h3 color: red; $a = 3; SELECT * FROM commentaires; HTML CSS

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

Chapitre 3. XWindow : l'environnement Graphique d'unix. Olivier Dalle. Utilisation du Système Unix

Chapitre 3. XWindow : l'environnement Graphique d'unix. Olivier Dalle. Utilisation du Système Unix 1 Chapitre 3 XWindow : l'environnement Graphique d'unix 2 Window résumé Système de fenêtrage (windowing( windowing) Pour périphérique d'affichage bitmap Utilisé sur Unix, Unix-like et OpenVMS Disponible

Plus en détail

CLARISWORKS 5. ÉTAPE 1 Créer un document. Lancer l application. (Windows 95 ou 98) Créer un document en utilisant le traitement de texte

CLARISWORKS 5. ÉTAPE 1 Créer un document. Lancer l application. (Windows 95 ou 98) Créer un document en utilisant le traitement de texte ÉTAPE 1 Créer un document Lancer l application Mettre l ordinateur en route. Double cliquer sur l icône ClarisWorks 5 qui se trouve sur le bureau ou cliquer sur Démarrer Programmes ClarisWorks5 Vous arrivez

Plus en détail

MON GUIDE AU COLLEGE VOSGES

MON GUIDE AU COLLEGE VOSGES MON GUIDE AU COLLEGE VOSGES Contacter le support technique : monguide88@crdp lorraine.fr Compléments en ligne : www.crdp lorraine.fr/typo3/crdp/edition/histoire geographie/mon guide au college 88.html

Plus en détail

Cours BOXI R3 Infoview

Cours BOXI R3 Infoview DIRECTION DE LA FORMATION ORGANISATION ET GESTION INFORMATIQUE DE LA FORMATION EPFL-VPAA-DAF-OGIF Bâtiment BP Station 16 CH 1015 Lausanne Tél. : E-mail : Site web: +4121 693.48.08 statistiques.formation@epfl.ch

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

Manuel utilisateur - Site BLF Impression

Manuel utilisateur - Site BLF Impression Manuel utilisateur - Site BLF Impression Version Date 1 22/08/09 Christophe Deleury : création du document Identification Afin de pouvoir accéder à l'interface d'administration, vous devez vous identifier

Plus en détail

Formation de base à RoboHelp

Formation de base à RoboHelp Créer une aide en ligne avec Robohelp Formation de base à RoboHelp Auteur Sherpa Référence Référence - Date d impression 28 janvier 2011 Sherpa Formation RoboHelp 28/01/2011 Sommaire Créer une aide en

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

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

Commande d'annonces pour Windows : localisateur

Commande d'annonces pour Windows : localisateur Commande d'annonces pour Windows : localisateur Dernière mise à jour - March 03, 2015 Politique d'acceptation des créations publicitaires Toute création doit répondre aux exigences de Microsoft Advertising

Plus en détail

POUR COMMENCER AJOUTEZ LES RÉSERVATIONS À VOTRE SITE WEB MODULE DE RECHERCHE DE GROUPE D OPENTABLE

POUR COMMENCER AJOUTEZ LES RÉSERVATIONS À VOTRE SITE WEB MODULE DE RECHERCHE DE GROUPE D OPENTABLE AJOUTEZ LES RÉSERVATIONS À VOTRE SITE WEB MODULE DE RECHERCHE DE GROUPE D OPENTABLE Le module de recherche de groupe permet aux utilisateurs de sélectionner un emplacement spécifique de restaurant à partir

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

Réalisez votre propre carte de vœux Éléctronique

Réalisez votre propre carte de vœux Éléctronique Les différentes possibilités d animer une carte de vœux Il existe plusieurs possibilités d animer une carte de vœux : - Une Vidéo : Vous pouvez créer une vidéo, un film simplement avec Windows Media Player.

Plus en détail

Bootstrap 3 pour l'intégrateur web CSS et Responsive Web Design

Bootstrap 3 pour l'intégrateur web CSS et Responsive Web Design Chapitre 1 : Introduction A. Le développement des sites Web 14 B. Les fonctionnalités de Bootstrap 14 C. La compatibilité avec les navigateurs 15 D. Télécharger les exemples 15 Chapitre 2 : Installer Bootstrap

Plus en détail

MANUEL M O D U L E D I M E N S I O N S

MANUEL M O D U L E D I M E N S I O N S MANUEL M O D U L E D I M E N S I O N S 1 Généralités sur le fonctionnement Le présent module a été réalisé pour permettre d utiliser des dimensions lors de l entrée d opérations. L utilisateur indique

Plus en détail

Créer sa première présentation :

Créer sa première présentation : PowerPoint est une application dédiée à la conception de présentations de toutes sortes, utilisées en projection ou en affichage sur écran. Ces présentations peuvent intégrer aussi bien du texte, des diagrammes,

Plus en détail

Cinquième projet Scribus

Cinquième projet Scribus Sommaire 1. Présentation du projet... 2 1.1. Organiser son travail... 2 2. Réalisation... 2 2.1. Préparation des textes... 2 2.2. Création du document Scribus... 3 2.3. Importer des gabarits... 3 2.4.

Plus en détail

Qu'est-ce qu'une image numérique?

Qu'est-ce qu'une image numérique? Qu'est-ce qu'une image numérique? Une image numérique est une mosaïque de points unicolores. Plus elle comporte de points, mieux elle est définie. Quand on agrandit une image à l'écran ou en l'imprimant,

Plus en détail

Personnaliser son bureau

Personnaliser son bureau Changer la résolution d'écran Définition : la résolution (exprimée en pixels de largeur x hauteur) indique la finesse d'affichage de votre écran. Plus cette résolution est grande, plus l'affichage est

Plus en détail

1.1.1 Systèmes d exploitation et navigateurs pris en charge

1.1.1 Systèmes d exploitation et navigateurs pris en charge CBC- LOCAL Paiements européens provenant d Excel Convertir des fichiers Excel contenant des paiements européens en fichiers de paiement au format XML Manuel d utilisation Sommaire 1. Installation... 3

Plus en détail

Créer un dessin avec Word

Créer un dessin avec Word Créer un dessin avec Word Introduction Introduction Deux écoles, pour la création du dessin La réalisation du dessin Dessin à partir d une image Afficher les dessins Dans le menu, choisir : Outils Option

Plus en détail

Formation > Développement > Internet > Réseaux > Matériel > Maintenance

Formation > Développement > Internet > Réseaux > Matériel > Maintenance Formation > Développement > Internet > Réseaux > Matériel > Maintenance SOMMAIRE 1. ACCEDER A L'INTERFACE D'ADMINISTRATION...5 1.1. Le navigateur... 5 1.2. L'interface d'administration... 5 2. METTRE

Plus en détail

Utilisation Des Widgets ITEA

Utilisation Des Widgets ITEA Utilisation Des Widgets ITEA Sommaire 1 Introduction... 3 2 Intégration sur votre site web... 5 2.1 Intégration du widget en JavaScript... 5 2.2 Exemples... 6 2.3 Paramètres iframe et aveccss... 6 2.4

Plus en détail

L interface utilisateur de Windows

L interface utilisateur de Windows Windows, développé par l éditeur américain Microsoft Corporation, est de loin le système d exploitation pour ordinateurs personnels le plus utilisé dans le monde. Il dépasse à lui seul 90 % du marché mondial

Plus en détail

Comment bien imprimer avec Firefox

Comment bien imprimer avec Firefox Comment bien imprimer avec Firefox Si vous imprimez régulièrement des pages web, vous savez que le résultat est parfois surprenant: marges rongées, police illisible ou formatage incomplet. Le navigateur

Plus en détail

COMMENT METTRE A JOUR SON SITE WEB?

COMMENT METTRE A JOUR SON SITE WEB? Un site web est d autant plus intéressant pour l internaute qu il est actualisé. A contrario, une information obsolète peut ternir l image de l entreprise (manque de dynamisme, manque de rigueur ). Différentes

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

Le GéoPortail du Jura http://geo.jura.ch. Présentation des fonctionnalités de la version mobile

Le GéoPortail du Jura http://geo.jura.ch. Présentation des fonctionnalités de la version mobile Le GéoPortail du Jura http://geo.jura.ch Présentation des fonctionnalités de la version mobile Le GéoPortail se décline en deux versions : Une version normale (ordinateur de bureau) Une version mobile

Plus en détail

Utilisation de Sarbacane 3 Sarbacane Software

Utilisation de Sarbacane 3 Sarbacane Software Tutorial par Anthony Da Cruz Utilisation de Sarbacane 3 Sarbacane Software Ambiance Soleil 17 Rue Royale 74000, Annecy Sommaire 1. Présentation générale 2. Guide étape par étape 3. Astuces de l éditeur

Plus en détail

Paint.NET Fiche n 3. Table des matières

Paint.NET Fiche n 3. Table des matières Paint.NET Fiche n 3 Table des matières Paint.NET Fiche n 3...1 1- Redimensionner...1 2- Recadrer...2 3- Enlever un élément gênant...2 4- Éclaircir une partie de l'image...3 5- Éclaircir une sélection complexe...3

Plus en détail

Créer une trace, obtenir son fichier gpx et sa carte Ou Afficher un fichier trace GPX

Créer une trace, obtenir son fichier gpx et sa carte Ou Afficher un fichier trace GPX Créer une trace, obtenir son fichier gpx et sa carte Ou Afficher un fichier trace GPX Logiciels nécessaires : - - - Google Chrome comme navigateur internet FireShot qui est un add-on qui se greffe sur

Plus en détail

HemoMap v1.0. 1. Utilisation de l'application sur smartphone Android

HemoMap v1.0. 1. Utilisation de l'application sur smartphone Android HemoMap v1.0 Tristan Colombo HemoMap est une application Web accessible depuis n'importe quel navigateur à l'adresse http://services.info2dev.com/hemomap. Elle est également

Plus en détail

Notes de version du firmware pour les scanners Kodak série i1800

Notes de version du firmware pour les scanners Kodak série i1800 Notes de version du firmware pour les scanners Kodak série i1800 Résumé de la version 2.4.0 (08/04/2010) Nouvelles fonctionnalités de FW 2.1.3 : Possibilité supplémentaire de numériser dans différentes

Plus en détail