Approche Design Méthodologie de conduite de sites web

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

Download "Approche Design Méthodologie de conduite de sites web"

Transcription

1 Approche Design Méthodologie de conduite de sites web Phase 02 Concevoir le site (C) Conception visuelle N. Vanassche

2 Phase 2 (C) : Conception visuelle Facilité d utilisation: 66%; Une charte graphique adaptée Des images optimisées Organiser sa navigation, soigner sa page d accueil Bien organiser ses pages web, des textes lisibles et clairs

3 Tous les internautes ne naviguent pas avec la dernière version de leur navigateur préféré Tous les utilisateurs n'utilisent pas Windows comme système d'exploitation Une grande majorité des internautes ont un moniteur 17" mais il y a aussi des 15, 11, les 19 et les 21 (voire +) sans compter les tablettes et les smartphones!

4 Conception visuelle 1/Dimensions de pages Quelles sont Les résolutions d'écran les plus courantes aujourd hui? Les différentes versions de navigateurs utilisées et dans quelles proportions? Les systèmes d'exploitation les plus usités? Trouvez des sites proposant des statistiques à jour Elaborez une idée de base de résolution pour un site, à adapter en fonction des publics cibles, et soyez prêt à présenter vos arguments devant la classe

5 Conception visuelle 1/Dimensions de pages > Notre analyse L espace disponible à l écran ne dépend pas uniquement de la résolution d écran de l utilisateur interviennent également : Le navigateur utilisé, Les barres d outils affichées, La taille de la fenêtre du navigateur (pas toujours maximisée) Il faut donc s assurer que dans les contextes les plus fréquents, les internautes pourront voir les éléments principaux Ce qui compte, c est le volume de visiteurs qu elle recouvre!! Navigateurs à prendre en compte : Un site pour quelle résolution?

6 Conception visuelle 1/Dimensions de pages > Comment décider? Dans l idéal vos créations devraient TOUJOURS pouvoir s adapter à la résolution dans laquelle elles sont consultées : En travaillant en dimensions relatives (% ou em) En faisant flotter les blocs de mise en page En ajoutant des Media Queries (Responsive design) Si vous optez pour un design fixe, décidez de n occuper qu une partie de l écran si la résolution de celui-ci est plus grande que celle que vous avez retenue pour votre design, éventuellement en centrant horizontalement votre site Placez les éléments les moins importants à droite (zone éventuellement masquée en cas de résolution trop faible et uniquement accessible par un scroll horizontal)

7 Conception visuelle 1/Dimensions de pages > Navigateurs mobiles De nos jours, les dimensions d'écran ne veulent plus dire grand-chose surtout sur les navigateurs mobiles

8 Conception visuelle 1/Dimensions de pages > Navigateurs mobiles La largeur d'écran constructeur (screenwidth) correspond au nombre physique de pixels qui composent la matrice de l'écran (telle que le constructeur le décrit dans les caractéristiques) Les largeurs physiques (devicewidth) correspond au nombre de pixels virtuels que le terminal pense avoir et sur lequel il fonde son affichage La largeur du viewport est une largeur virtuelle fixée quelle que soit la largeur de l écran (de manière à pouvoir y caler n'importe quelle page web en lui affectant un niveau de (dé)zoom).

9 Conception visuelle 1/Dimensions de pages > Conclusions Adoptez le plus possible, quand votre design le permet, la technique du «liquidlayout» ou «mise en page élastique» Détectez la résolution d'écran de l internaute ou le type de browser et redirigez vers une page CSS adaptée Mettez en place un responsive design efficace

10 Qu est-ce qu une grille? Quels sont les avantages à travailler avec une grille?

11 Fireworks (Adobe) Prise en main Pourquoi Fireworks? avantages/ Interface et prise en main de Fireworks Espace de travail de Fireworks (outils, inspecteur de propriétés, menus, autres panneaux, enregistrement d un espace de travail personnalisé)

12 Fireworks (Adobe) Penser la mise en page d un site Nouveau document, gestion des documents, modes d affichage Utilisation des règles, des repères Créer une mise en page basée sur une grille, importer une grille dans Fireworks Importer dans Fireworks des outils de mockup, créer ses propres modèles Créer un Workflow avec Fireworks Gestion de projet avec Fireworks

13 Exercice évalué Déterminez la dimension de base du site de la ville de «Bled-lespins» et la disposition des éléments principaux (pages de contenus): Choisissez une grille sur laquelle baser votre design Schématisez sous forme d un wireframe les éléments placés et leurs dimensions Présentez le rendu visuel de ces éléments sous les résolutions les plus courantes Prévoyez-vous une alternative pour les tablettes et les mobiles? Si oui, laquelle? Argumentez votre réponse Solution mise en place ou non, schématisez le rendu de votre site sur les principaux supports mobiles Ajoutez cette analyse et les schémas à votre cahier des charges (début de la charte graphique)

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

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

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

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

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

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

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

Présentation. 2010 Pearson Education France Adobe Flash Catalyst CS5 Adobe Press

Présentation. 2010 Pearson Education France Adobe Flash Catalyst CS5 Adobe Press Présentation 1 Adobe Flash Catalyst CS5 vous permet de produire du contenu totalement interactif d une grande qualité graphique pour le web ou le bureau sans écrire une seule ligne de code. Cette leçon

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

Formation WEB DESIGN. Catalogue. Immeuble Normandie II 55, rue Amiral Cécille

Formation WEB DESIGN. Catalogue. Immeuble Normandie II 55, rue Amiral Cécille Immeuble Normandie II 55, rue Amiral Cécille 7 6 1 0 0 R O U E N Tél. : 02 35 03 87 09 Fax : 02 35 03 49 29 Email : formation@art-communication.fr Site web : www.art-communication.fr Catalogue WEB DESIGN

Plus en détail

RESPONSIVE DESIGN. Gobelins 2014.2015. Isabelle Biamonti

RESPONSIVE DESIGN. Gobelins 2014.2015. Isabelle Biamonti RESPONSIVE DESIGN Gobelins 2014.2015 Isabelle Biamonti 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

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

ADOBE DREAMWEAVER. contact@mandyben.com www.mandyben-formation.com

ADOBE DREAMWEAVER. contact@mandyben.com www.mandyben-formation.com ADOBE DREAMWEAVER Public : Webmasters, créateur de sites Internet, maquettistes, infographistes, responsables communication, chefs de projet. Pré-requis : Bonne connaissance de l environnement Mac ou Windows).

Plus en détail

2 LES BASES DU HTML 19 Qu est-ce que le HTML? 20 De quand date le HTML? 20 Écrire son propre code HTML 22

2 LES BASES DU HTML 19 Qu est-ce que le HTML? 20 De quand date le HTML? 20 Écrire son propre code HTML 22 SOMMAIRE INTRODUCTION La collection Classroom in a Book TinyUrL Conditions requises Installation du programme Copie des fichiers Classroom in a Book ordre recommandé pour les leçons Démarrage instantané

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

BONNES PRATIQUES AUDIENCE MOBILE

BONNES PRATIQUES AUDIENCE MOBILE BONNES PRATIQUES AUDIENCE MOBILE IDENTIFIEZ VOS MOBINAUTES Identifiez les mobinautes de votre base de contacts et leur équipement mobile. Combien de contacts consultent vos emails sur mobile? Quel(s) équipement(s)

Plus en détail

Débuter avec App Inventor (document ressource).pdf

Débuter avec App Inventor (document ressource).pdf Débuter avec Objectifs Documents Matériel Découvrir l'environnement graphique de conception d'applications Android "". Concevoir des applications simples mettant en œuvre des composants et des techniques

Plus en détail

EMAIL MOBILE GUIDE PRATIQUE

EMAIL MOBILE GUIDE PRATIQUE EMAIL MOBILE GUIDE PRATIQUE 1UN CONSTAT Le mobile est partout, y compris dans l email marketing. La révolution du mobile est en marche. Mais en tant que marketer, quelle importance accordez-vous à l engagement

Plus en détail

Wethere JUSTINE GAUDIN & anis CHOUK DANS LE CADRE DU cours DE Webdesign de jonathan munn - 2014

Wethere JUSTINE GAUDIN & anis CHOUK DANS LE CADRE DU cours DE Webdesign de jonathan munn - 2014 Wethere JUSTINE GAUDIN & anis CHOUK DANS LE CADRE DU cours DE Webdesign de jonathan munn - 2014 Introduction Wethere est une application météorologique basé sur un support smartphone (mobile first). Elle

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

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

REFONTE GRAPHIQUE DU SITE INTERNET DE LA FFSc

REFONTE GRAPHIQUE DU SITE INTERNET DE LA FFSc REFONTE GRAPHIQUE DU SITE INTERNET DE LA FFSc Un site veillissant Objectifs de la refonte Démonstration Avantages du nouveau site Procédure Un nouvel habillage pour la newsletter Conclusion Un site veillissant

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

Modules Multimédia PAO (Adobe)

Modules Multimédia PAO (Adobe) Modules Multimédia PAO (Adobe) Pré-requis : Bonne maîtrise de la manipulation d'un PC (environnement Windows ou Mac) et de la navigation Internet. Disposition pour le graphisme recommandée. Mémoire visuelle,

Plus en détail

FABRIK4WEB. création web - communication interactive - solutions digitales

FABRIK4WEB. création web - communication interactive - solutions digitales FABRIK4WEB création web - communication interactive - solutions digitales SITE INTERNET WEB DESIGN ET ERGONOMIE Performance et plaisir! INTEGRATION ET DEVELOPPEMENT Innover pour évoluer, Evoluer pour convaincre!

Plus en détail

Espace de travail. Les éléments... 12 Modifications de l affichage... 17

Espace de travail. Les éléments... 12 Modifications de l affichage... 17 Espace de travail Les éléments... 12 Modifications de l affichage... 17 Chapitre 1 Espace de travail L espace de travail d InDesign CS4 s inscrit dans la lignée de tous les produits de la gamme Creative

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

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

Interfaces et Scénarisation (COM2571) 5 novembre 2013 Grégory Petit http://lrcm.com.umontreal.ca/greg/com2571/

Interfaces et Scénarisation (COM2571) 5 novembre 2013 Grégory Petit http://lrcm.com.umontreal.ca/greg/com2571/ Interfaces et Scénarisation (COM2571) 5 novembre 2013 Grégory Petit http://lrcm.com.umontreal.ca/greg/com2571/ La semaine dernière Introduction à Omnigraffle Environnement de travail Diagrammes Wireframes

Plus en détail

Création du site dans Dreamweaver :

Création du site dans Dreamweaver : CHARGER, CREER et ENREGISTRER 1. Se connecter au RESEAU du COLLEGE avec tes 2 mots de passe 2. Charge le logiciel Au lancement du logiciel, l écran suivant s affiche : Palette des objets Lanceur Zone de

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

CA CA T T AL AL O O GUE GUE CATALO FORMATIONS 2 0 1 4-2 0 1 5 t n s c o p. f r / / / / / / c o n t a c t @ t n s c o p. f r / / / / / # t r o c n u m

CA CA T T AL AL O O GUE GUE CATALO FORMATIONS 2 0 1 4-2 0 1 5 t n s c o p. f r / / / / / / c o n t a c t @ t n s c o p. f r / / / / / # t r o c n u m CATALOGUE CATALOGUE FORMATIONS 2014-2015 t n s c o p. f r / / / / / / c o n t a c t @ t n s c o p. f r / / / / / # t r o c n u m Sommaire Nous proposons des formations à la carte, n hésitez pas à nous

Plus en détail

Travaux pratiques 1.3.3 Détermination de la résolution d écran d un ordinateur

Travaux pratiques 1.3.3 Détermination de la résolution d écran d un ordinateur Travaux pratiques 1.3.3 Détermination de la résolution d écran d un ordinateur Objectifs Déterminer la résolution d écran actuelle d un moniteur d ordinateur Déterminer la résolution maximale pour une

Plus en détail

Le pack Office est le logiciel la suite logicielle la plus vendue et pourtant : Pack Office :... 2. Impression :... 12

Le pack Office est le logiciel la suite logicielle la plus vendue et pourtant : Pack Office :... 2. Impression :... 12 Le pack Office est le logiciel la suite logicielle la plus vendue et pourtant : Pack Office :... 2 Impression :... 2 Champ de saisie :... 2 Largeur et Hauteur des objets... 2 Bugs dans le module de dessin

Plus en détail

Web Design Métier N 17. 42 ème Olympiades des Métiers Sujet Régional

Web Design Métier N 17. 42 ème Olympiades des Métiers Sujet Régional Web Design Métier N 17 42 ème Olympiades des Métiers Sujet Régional 1 01 Introduction La Société Minnesota Mining and Manufacturing Company, plus connue sous le nom 3M est l inventeur de la marque Scotch,

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

STANDARDS PUBLICITAIRES POUR LA PUBLICITE SUR TELEPHONE MOBILE

STANDARDS PUBLICITAIRES POUR LA PUBLICITE SUR TELEPHONE MOBILE STANDARDS PUBLICITAIRES POUR LA PUBLICITE SUR TELEPHONE MOBILE Edités par la Mobile Marketing Association France, juin 2010 http://www.mmafrance.org La Mobile Marketing Association France, association

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

Démarrer avec Windows 8.1

Démarrer avec Windows 8.1 Généralités Windows 8 : une petite révolution? 5 Démarrer Windows 8 7 Ouvrir ou activer une nouvelle session 11 Utiliser les fonctionnalités tactiles 12 Utiliser l interface Windows 8 sur un écran tactile

Plus en détail

Le Web pour les informaticiens Les métiers. Programmation web PHP et bases de données. Les métiers rédactionnels. Les métiers des concepteurs

Le Web pour les informaticiens Les métiers. Programmation web PHP et bases de données. Les métiers rédactionnels. Les métiers des concepteurs Le Web pour les informaticiens Le Web pour les informaticiens Programmation web PHP et bases de données Les métiers La conception du site web Jean-Christophe Dubacq IUT de Villetaneuse S3 2013 PHP et bases

Plus en détail

TECHNOLOGIE DE LA COMMUNICATION, MÉDIAS ET ORGANISATIONS

TECHNOLOGIE DE LA COMMUNICATION, MÉDIAS ET ORGANISATIONS TECHNOLOGIE DE LA COMMUNICATION, MÉDIAS ET ORGANISATIONS CIM404A Septembre 2013 ELISABETH DE PABLO 1 WEB PUBLISHING - créer, éditer, publier, diffuser, animer sur le web un produit [de communication] -

Plus en détail

Modèle de cahier des charges pour un site Internet

Modèle de cahier des charges pour un site Internet Modèle de cahier des charges pour un site Internet Modèle de cahier des charges Site Internet 1 Ce document a pour objectif de préciser quels éléments doivent être détaillés dans votre cahier des charges

Plus en détail

SITE WEB Service Client. Charte graphique et technique

SITE WEB Service Client. Charte graphique et technique Service Client Charte graphique et technique 1 Sommaire a / MISE EN FORME Introduction... 3 Les logos Veolia... 4 Police & taille - généralité... 6 Police & taille gabarits principaux... 7 Palette de couleur...

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

Guide Utilisateur WiSiO

Guide Utilisateur WiSiO Guide Utilisateur WiSiO Introduction Wisio est un service de Visioconférence ( SaaS ) qui utilise les solutions Serveur LifeSize ClearSea - Qu est-ce que ClearSea? ClearSea est une solution complète client/server

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

ACCESSIBILITE. Dans le domaine de l informatique pour le handicap, "l Accessibilité" consiste à adapter et optimiser l ergonomie :

ACCESSIBILITE. Dans le domaine de l informatique pour le handicap, l Accessibilité consiste à adapter et optimiser l ergonomie : ACCESSIBILITE Définition de l Accessibilité en Informatique Dans le domaine de l informatique pour le handicap, "l Accessibilité" consiste à adapter et optimiser l ergonomie : - des matériels et dispositifs

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

Initiation à l informatique. Module 4 : Gestion de l affichage Windows

Initiation à l informatique. Module 4 : Gestion de l affichage Windows Initiation à l informatique. Module 4 : Gestion de l affichage Windows Créé par Xavier CABANAT Version 1.2 Document créé par Xavier CABANAT Page 1 sur 13 Sommaire Introduction :... 3 Qu est ce que l interface

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

OFFRE DE SERVICE. www.votreentreprise.com

OFFRE DE SERVICE. www.votreentreprise.com 2011 NOM ENTREPRISE OFFRE DE SERVICE CONCEPTION, REALISATION ET HEBERGEMENT SITE WEB www.votreentreprise.com AFConsulting Web Services Page 1 sur 19 SOMMAIRE Lettre, offre de services --------------------------------------------

Plus en détail

L ORDINATEUR FACILE D ACCÈS!

L ORDINATEUR FACILE D ACCÈS! L ORDINATEUR FACILE D ACCÈS! Préparé par Éric Roussel, enseignant spécialisé en informatique / École Jacques-Ouellette / 2009 Préambule Il est important de noter qu il n y a pas d adaptation parfaite des

Plus en détail

Optimiser les e-mails marketing Les points essentiels

Optimiser les e-mails marketing Les points essentiels Optimiser les e-mails marketing Les points essentiels Sommaire Une des clés de succès d un email marketing est la façon dont il est créé puis intégré en HTML, de telle sorte qu il puisse être routé correctement

Plus en détail

Préparer son site 2/2. Laurent BIZOT Oxatis

Préparer son site 2/2. Laurent BIZOT Oxatis Préparer son site 2/2 Laurent BIZOT Oxatis 13 et 14 mai 2011 Pourquoi optimiser son site? Votre prospect est à 1 clic du concurrent Un site bien organisé, c est plus de ventes 13 et 14 mai 2011 Journées

Plus en détail

Créez votre premier site web De la conception à la réalisation

Créez votre premier site web De la conception à la réalisation Chapitre 1 : Introduction A. Introduction 17 Chapitre 2 : Les langages A. L objectif 21 B. L HTML 21 1. L état des lieux 21 2. Les éléments HTML 21 3. Les attributs 22 4. Les caractères 23 5. Les espaces

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

ERGONOMIE ET OPTIMISATION DU TAUX DE CONVERSION D UN SITE INTERNET Partie 1/2

ERGONOMIE ET OPTIMISATION DU TAUX DE CONVERSION D UN SITE INTERNET Partie 1/2 Lorraine ERGONOMIE ET OPTIMISATION DU TAUX DE CONVERSION D UN SITE INTERNET Partie 1/2 Attirer des visiteurs sur un site internet, c est bien ; les transformer en clients, c est mieux! Cette phrase semble

Plus en détail

Worldsoft CMS Méga Menu. Avec le Méga Menu du Worldsoft CMS, vous pouvez créer des menus de navigation.

Worldsoft CMS Méga Menu. Avec le Méga Menu du Worldsoft CMS, vous pouvez créer des menus de navigation. 1 Mega Menu Avec le du Worldsoft CMS, vous pouvez créer des menus de navigation. Vous pouvez mettre en place autant de menus que vous le désirez et les adapter graphiquement. Avec votre propre contenu

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

Programme de formation InDesign : Initiation 24 heures de formation (3 jours) 1/2

Programme de formation InDesign : Initiation 24 heures de formation (3 jours) 1/2 Programme de formation InDesign : Initiation 24 heures de formation (3 jours) 1/2 Graphistes, maquettistes ou toute autre personne en charge de la mise en page de documents pour l impression ou la publication

Plus en détail

Anglais professionnel automobile Guide technique : les utilisations informatiques des modules

Anglais professionnel automobile Guide technique : les utilisations informatiques des modules ( Anglais professionnel automobile ) Guide technique : les utilisations informatiques des modules Préambule Ce document vous présente les différentes utilisations informatiques possibles des modules d

Plus en détail

Analyse comparative de trois sites d e commerce

Analyse comparative de trois sites d e commerce Analyse comparative de trois sites d e commerce M1105 Par Benjamin ANDRE Romain LUTIC - Jérémy MONIER (A/B) I/ Analyse des sites Amazon.com 1 ère 1 ère impression bonne, site épuré, bien organisé, on reconnait

Plus en détail

Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation.

Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. 1 Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. Voici un mode opératoire qui vous guidera dans l utilisation de

Plus en détail

Calculatrice virtuelle HP Prime

Calculatrice virtuelle HP Prime Calculatrice virtuelle HP Prime Microsoft est une marque commerciale du groupe de sociétés Microsoft. Les informations contenues dans ce document peuvent être modifiées sans préavis. Les garanties relatives

Plus en détail

Correction des Travaux Pratiques Organiser son espace de travail

Correction des Travaux Pratiques Organiser son espace de travail Module 01 Correction des Travaux Pratiques Organiser son espace de travail Correction de l exercice N 1 Organiser son espace de travail Objectif de l exercice : 1. Comprendre le dock 2. Afficher les règles

Plus en détail

Modifier les paramètres

Modifier les paramètres Ça y est vous avez craqué pour une tablette! Et vous ne pourrez bientôt plus vous en passer Mais avant ça, vous avez besoin d'un peu d'aide pour débuter avec votre ipad ou votre tablette Android? Lors

Plus en détail

Guide d installation en 10 étapes...

Guide d installation en 10 étapes... Bienvenue sur PrestaBox! Guide d installation en 10 étapes... Suivez le guide! Pour ne rien oublier, suivez la liste des étapes incontournables pour la configuration de votre boutique PrestaBox : 1 - Choisissez

Plus en détail

Windows XP. Souris et clavier

Windows XP. Souris et clavier Windows XP Souris et clavier 1 La souris est un périphérique indispensable de l'ordinateur : on la déplace sur un tapis. Si elle est 'optique' (plutôt qu'à boule), son confort d'utilisation est encore

Plus en détail

numérique Votre rendez-vous mensuel Ergonomie et optimisation du taux de conversion du site internet (partie 1/2) Le gabarit > Les blocs

numérique Votre rendez-vous mensuel Ergonomie et optimisation du taux de conversion du site internet (partie 1/2) Le gabarit > Les blocs Performance numérique Votre rendez-vous mensuel Ergonomie et optimisation du taux de conversion du site internet (partie 1/2) Attirer des visiteurs sur un site internet, c est bien ; les transformer en

Plus en détail

Artisans et conjoints d artisans, salariés et tout autre public

Artisans et conjoints d artisans, salariés et tout autre public Public : Pré-requis : Artisans et conjoints d artisans, salariés et tout autre public Aucun Objectif(s) : Améliorer l utilisation de l outil informatique en acquérant progressivement les compétences clés.

Plus en détail

WinARC Installation et utilisation D un écran déporté (Windows 7)

WinARC Installation et utilisation D un écran déporté (Windows 7) Ligue 10 - Mini Bolid Club Pertuisien WinARC Installation et utilisation D un écran déporté (Windows 7) http://www.ligue10.com/comptage Page 1 sur 6 Partie 1 : Matériel nécessaire 1 PC équipé de Windows

Plus en détail

Identité visuelle de l Etat de Fribourg. Manuel Internet, Intranet et applications Web Janvier 2012

Identité visuelle de l Etat de Fribourg. Manuel Internet, Intranet et applications Web Janvier 2012 Identité visuelle de l Manuel Internet, Intranet et applications Web Janvier 202 Charte graphique Internet, Intranet et applications Web 6.0 Internet, Intranet et applications Web Sommaire 6. Généralités:

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

Mode d'emploi. À l'usage des chefs, cheffes de courses et membres des comités autorisés à gérer les pages 'Récits de courses'.

Mode d'emploi. À l'usage des chefs, cheffes de courses et membres des comités autorisés à gérer les pages 'Récits de courses'. Mode d'emploi À l'usage des chefs, cheffes de courses et membres des comités autorisés à gérer les pages 'Récits de courses'. Les récits de courses sont gérés avec le module 'Articles' Table des matières

Plus en détail

WinARC Installation et utilisation D un écran déporté (Windows XP)

WinARC Installation et utilisation D un écran déporté (Windows XP) Ligue 10 - Mini Bolid Club Pertuisien WinARC Installation et utilisation D un écran déporté (Windows XP) http://www.ligue10.com/comptage Page 1 sur 6 Partie 1 : Matériel nécessaire 1 PC équipé de Windows

Plus en détail

ACCESS 2013 UTILISATEUR TABLE DES MATIERES

ACCESS 2013 UTILISATEUR TABLE DES MATIERES ENVIRONNEMENT...8 Lancer Access...9 Personnaliser l interface...9 L'écran...10 La barre d outils Accès rapide...12 Déplacer...13 Ajouter une commande à la barre...13 Supprimer un outil de la barre...13

Plus en détail

Suite Entreprise Mobile Manuel d installation

Suite Entreprise Mobile Manuel d installation Suite Entreprise Mobile Manuel d installation Table des matières Depuis Suite Entreprise v2 2 Depuis le terminal du client 5 Installation sur Apple IOs 5 Installation sur Android 7 Installation sur Windows

Plus en détail

Introduction à Dreamweaver CS4

Introduction à Dreamweaver CS4 Introduction à Dreamweaver CS4 Adobe Dreamweaver (anciennement Macromedia Dreamweaver) est un éditeur de site web de type «tel écrit tel écran» (cette formule remplaçant désormais dans la terminologie

Plus en détail

OFFRE DE FORMATIONS 1ER SEMESTRE 2016

OFFRE DE FORMATIONS 1ER SEMESTRE 2016 OFFRE DE FORMATIONS 1ER SEMESTRE 2016 Sommaire Web/Graphisme Initiation à Wordpress / p4 Formation HTML & CSS / p5 Initiation à Indesign / p6 Perfectionnement à Photoshop / p7 Contact Damien Piron Renseignements

Plus en détail

Bien travailler sur plusieurs écrans

Bien travailler sur plusieurs écrans Bien travailler sur plusieurs écrans Pour améliorer votre confort sur votre ordinateur et travailler plus efficacement, vous pouvez lui ajouter un second voire un troisième écran. En étendant la surface

Plus en détail

offre de formations Année 2015

offre de formations Année 2015 offre de formations Année 2015 Sommaire 3 Web/Graphisme Initiation à Wordpress / p4 Formation HTML & CSS / p5 Initiation à Indesign / p6 Perfectionnement à Photoshop / p7 - Contact Richard De Logu, Damien

Plus en détail

la-cagouille.fr // Offre de refonte de site multilingue (en-fr)

la-cagouille.fr // Offre de refonte de site multilingue (en-fr) hello@marknightingale.net marknightingale.net 22 rue de la Nuée Bleue 67000 STRASBOURG France 06 76 16 38 51 la-cagouille.fr // Offre de refonte de site multilingue (en-fr) 14 octobre 2014 1. Parties ENTRE

Plus en détail

VOUS PRÉSENTE. 69, rue Gorge de Loup - 69009 LYON // Tél. : +33 426 994 401 // contact@o2sources.com

VOUS PRÉSENTE. 69, rue Gorge de Loup - 69009 LYON // Tél. : +33 426 994 401 // contact@o2sources.com VOUS PRÉSENTE arce que la réussite d un projet réside dans le dialogue et l échange permanent entre le client et son prestataire, nous mettons à votre disposition cette plaquette qui vous permettra de

Plus en détail

ADAPTATION DES INTERFACES. ROUYER Florian et BENNOUR Salah

ADAPTATION DES INTERFACES. ROUYER Florian et BENNOUR Salah ADAPTATION DES INTERFACES ROUYER Florian et BENNOUR Salah SOMMAIRE Sujet Android Ionic Comparaison Conclusion Sujet Plateforme de partage de livres Fonctionnalités : Géolocalisation Visualisation Map Visualisation

Plus en détail

CONDUITE DE PROJET WEB

CONDUITE DE PROJET WEB 1) La conception fonctionnelle A. Déterminer la structure du site et des pages Web Livrables pour cette phase : Plan du site Trames de pages Spécifications fonctionnelles Tâche réalisée par le Web designer.

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

Conception des interfaces. 1. Le maquettage 2. La loi de Fitts 3. La méthode RITE 4. La conception des icones 5. La norme ISO 16982

Conception des interfaces. 1. Le maquettage 2. La loi de Fitts 3. La méthode RITE 4. La conception des icones 5. La norme ISO 16982 Conception des interfaces 1. Le maquettage 2. La loi de Fitts 3. La méthode RITE 4. La conception des icones 5. La norme ISO 16982 Conception des interfaces 1. Le maquettage Comprendre comment et pourquoi

Plus en détail

FORMATION WEBDESIGN (2x3 jours)

FORMATION WEBDESIGN (2x3 jours) FORMATION WEBDESIGN (2x3 jours) Présentation : Initiez-vous au plus puissant logiciel de traitement d image ainsi qu à la production assistée par ordinateur (PAO)! Découvrez avec cette formation les bases

Plus en détail

Introduction à Dreamweaver

Introduction à Dreamweaver Introduction à Dreamweaver Dreamweaver est un logiciel d édition de page web. Un site est un ensemble de pages [souvent en format html, ce qui signifie HyperText Markup Language, reliées entre elles par

Plus en détail

CONCEPTION D IHM ADAPTÉS À LA PLATEFORME MIAGE 2 PLASTICWEB SYBILLE CAFFIAU ANNÉE 2014-2015

CONCEPTION D IHM ADAPTÉS À LA PLATEFORME MIAGE 2 PLASTICWEB SYBILLE CAFFIAU ANNÉE 2014-2015 CONCEPTION D IHM ADAPTÉS À LA PLATEFORME MIAGE 2 PLASTICWEB SYBILLE CAFFIAU ANNÉE 2014-2015 OBJECTIFS DE LA SÉANCE Vous avez : Un sujet avec des règles de jeu Une équipe de conception Des utilisateurs

Plus en détail

1 AU DEMARRAGE...2 2 LE MENU DEMARRER...3

1 AU DEMARRAGE...2 2 LE MENU DEMARRER...3 Sommaire 1 AU DEMARRAGE...2 2 LE MENU DEMARRER...3 3 POUR DEMARRER UN PROGRAMME...4 4 POSITION ET DIMENSION DES FENETRES...5 POSITION...5 DIMENSION...5 UTILISER LES BARRES DE DEFILEMENT...7 POUR AFFICHER

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

Jeudi 14 février. 17h30 19h30 à Embrun. «Responsive Design ou rendre son site accessible sur tous supports!» Pascal SERRES PIMENT ROUGE

Jeudi 14 février. 17h30 19h30 à Embrun. «Responsive Design ou rendre son site accessible sur tous supports!» Pascal SERRES PIMENT ROUGE Jeudi 14 février 17h30 19h30 à Embrun «Responsive Design ou rendre son site accessible sur tous supports!» Pascal SERRES PIMENT ROUGE Jeudi 14 février 2013 1 Qu est-ce que le Responsive Design? C est l

Plus en détail

Petit lexique de l'ergonomie des interfaces

Petit lexique de l'ergonomie des interfaces Petit lexique de l'ergonomie des interfaces Cet article a pour objectif de dessiner ce qu'est l'ergonomie des interfaces à travers les termes clés employés dans ce domaine. Il s'agit à la fois de donner

Plus en détail

Une fois l installation d OE faite, lancez-le. Vous tomberez sur ce premier visuel qui vous permettra de choisir de créer votre premier site web.

Une fois l installation d OE faite, lancez-le. Vous tomberez sur ce premier visuel qui vous permettra de choisir de créer votre premier site web. Le logiciel openelement est un éditeur de nouvelle génération qui vous aidera à créer un site internet quels que soient vos besoins (sites particuliers, sites vitrines, sites associatifs, sites d entreprise,

Plus en détail

JPC Jeunesse Pour Christ

JPC Jeunesse Pour Christ Sommaire Présentation Projet : Conception Graphisme & Musique Dossier Technique : Charte Graphique : Devis et Annexe : Conception Juin 2009 Présentation Projet Refonte du Site Web Officiel. Association

Plus en détail