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

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

Zeendo est la nouvelle manière de créer unseul site Web pour n importe quel dispositif

Zeendo est la nouvelle manière de créer unseul site Web pour n importe quel dispositif Zeendo est la nouvelle manière de créer unseul site Web pour n importe quel dispositif Zeendo permet aux utilisateurs d Internet n ayant pas de connaissances en programmation de concevoir leur site Web

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

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

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

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

Ergonomie. Accessibilité et référencement. Master Caweb - Ergonomie - Chloé Temesvari

Ergonomie. Accessibilité et référencement. Master Caweb - Ergonomie - Chloé Temesvari + Ergonomie Accessibilité et référencement + Plan Chapitre 5 : Accessibilité et référencement Qu est-ce l accessibilité? Critères à prendre en compte La taille et a résolution d écran La police Les navigateurs

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

Un site EFFICACE passe par un BON GRAPHISME

Un site EFFICACE passe par un BON GRAPHISME Un site EFFICACE passe par un BON GRAPHISME Rassurer, apprécier, interloquer,... autant de verbes importants aux yeux de l'internaute qui découvre pour la première fois votre site Internet. Ne dit- on

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

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

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

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

MODELE DE BRIEF AGENCE

MODELE DE BRIEF AGENCE MODELE DE BRIEF AGENCE MODELE DE BRIEF AGENCE Laurie GIACOBI www.my-marketing-manager.com Document à usage professionnel offert par My Marketing Manager. Reproduction et diffusion interdites. Ne peut être

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

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

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

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

refonte du site internet de la ville SÉLESTAT EN 1 CLIC! anne-sophie.hugel@ville-selestat.fr

refonte du site internet de la ville SÉLESTAT EN 1 CLIC! anne-sophie.hugel@ville-selestat.fr refonte du site internet de la ville SÉLESTAT EN 1 CLIC! Contact Contact presse presse : : Anne-Sophie Anne-Sophie Hugel Hugel : 03 88 : 0358885 5816 85 16 SOMMAIRE Avec la refonte du site internet, toute

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

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

Com mencer. Quelques étapes rapides sont nécessaires avant de pouvoir commencer à créer un site mobile U.me.

Com mencer. Quelques étapes rapides sont nécessaires avant de pouvoir commencer à créer un site mobile U.me. Commencer 1 - Se créer un compte 3 - Accès à l éditeur L interface U.me Éditer un U.me Prévisualiser votre site web mobile Publier votre site web mobile Contenu général 1- Les boutons a - Intégrer un bouton

Plus en détail

Un nouveau visage pour le fil d actualité

Un nouveau visage pour le fil d actualité Un nouveau visage pour le fil d actualité Nous annonçons aujourd hui une nouvelle version de Facebook, plus aérée et plus orientée que jamais sur les actualités des personnes qui vous sont chères. Le contenu

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

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

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

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

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

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

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

LIGHTROOM 4 pour les photographes

LIGHTROOM 4 pour les photographes LIGHTROOM 4 pour les photographes Groupe Eyrolles, 2012, pour la présente édition, ISBN : 978-2-212-13506-0 Chapitre 8 Imprimer 8 Aux débuts de Photoshop, peu de photographes auraient pu imaginer que l

Plus en détail

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE Atelier «pour débuter» La gestion des photos avec Windows 10 1 Généralités sur le jargon de l image numérique Les différents formats d image : une image enregistrée

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

MANUEL DE PROCÉDURE POUR LA MISE À JOUR DU SITE DE FIDAFRIQUE. Documentation utilisateur Octobre 2005

MANUEL DE PROCÉDURE POUR LA MISE À JOUR DU SITE DE FIDAFRIQUE. Documentation utilisateur Octobre 2005 MANUEL DE PROCÉDURE POUR LA MISE À JOUR DU SITE DE FIDAFRIQUE Documentation utilisateur Octobre 2005 I. Principes 1.1 - Généralités Les personnes autorisées à intervenir sur le site sont enregistrées par

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

Lycée Saint Vincent BTS 2 - Stage. Axure. Veille. REGNIER Corentin

Lycée Saint Vincent BTS 2 - Stage. Axure. Veille. REGNIER Corentin Lycée Saint Vincent BTS 2 - Stage Veille REGNIER Corentin 15 1 Sommaire Présentation.Page 2 Définitions.Page 2-4 Fonctions.Page 5-10 Exemple : Maquette Infitech.Page11-14 «*» Correspond à une définition

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

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

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

Félicitation, votre site est créé!

Félicitation, votre site est créé! Guide de démarrage e-monsite.com Félicitation, votre site est créé! Vous avez fait le plus difficile. A présent, découvrez comment administrer votre site web. 1 Comprendre l interface du manager de votre

Plus en détail

Pour ouvrir la fenêtre Structure territoriale: 1. A partir du menu Saisie de données, sélectionner Zones de structure

Pour ouvrir la fenêtre Structure territoriale: 1. A partir du menu Saisie de données, sélectionner Zones de structure Les noms de structure territoriale qui s affichent dans la fenêtre Structure territoriale de la fenêtre Navigation IMSMA sont créés via la fenêtre Structure territoriale. Pour ouvrir la fenêtre Structure

Plus en détail

AIDE EN LIGNE KREAMAN (FR)

AIDE EN LIGNE KREAMAN (FR) AIDE EN LIGNE KREAMAN (FR) Qu est ce que KREAMAN? KREAMAN est un outil permettant de personnaliser les articles de classement, d organisation et de présentation d EXACOMPTA. Grâce à KREAMAN, vous pouvez

Plus en détail

Internet ne se résume plus àunseulsiteweb

Internet ne se résume plus àunseulsiteweb Internet ne se résume plus àunseulsiteweb et cela devient de plus en plus difficile pour chaque Société d assurer tout seul sa visibilité. Vous devez être visible, référencer votre activité dans les premières

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

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

Mode d emploi d artishoc mobile

Mode d emploi d artishoc mobile Mode d emploi d artishoc mobile Version gratuite Version 4 Mise à jour le 05/01/2011 Ce mode d emploi est à l usage exclusif des utilisateurs de l offre mobile gratuite d artishoc mobile. Il n a pas de

Plus en détail

SITE INTERNET CAHIER DES CHARGES SIMPLIFIÉ

SITE INTERNET CAHIER DES CHARGES SIMPLIFIÉ SITE INTERNET CAHIER DES CHARGES SIMPLIFIÉ Désignation des responsables du projet Chef de projet ALPI : Denis Brevet Tél : 05 58 05 50 02 Email : denis.brevet@alpi40.org Correspondant : Nom : Tél : Email

Plus en détail

INFORMATIONS ET INSTALLATION DU THEME CENATA RESPONSIVE

INFORMATIONS ET INSTALLATION DU THEME CENATA RESPONSIVE INFORMATIONS ET INSTALLATION DU THEME CENATA RESPONSIVE Cenata Responsive à été réalisé par Presta-Theme Contact : webmaster@presta-theme.com Compatibilité PrestaShop : 1.5.x Documentation Prestashop 1.5

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

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

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

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

IUT Nice-Côte d Azur Informatique appliquée 2005 2006. TP N o 4. Tableur : affichage et impression

IUT Nice-Côte d Azur Informatique appliquée 2005 2006. TP N o 4. Tableur : affichage et impression 1 IUT Nice-Côte d Azur TC-Nice 1 re année Informatique appliquée 2005 2006 TP N o 4 Tableur : affichage et impression I Options d affichage Les options concernant l affichage dans les feuilles de calcul

Plus en détail

Astuce N 1 : Consulter mon catalogue articles en mode liste puis en mode fiche : recherche du prix d'une référence, consultation du stock

Astuce N 1 : Consulter mon catalogue articles en mode liste puis en mode fiche : recherche du prix d'une référence, consultation du stock Produit concerné : Sage 100 Etendue (déclinaison mobile) Sujet mis en avant : Les fonctionnalités clés du profil commercial sur Smartphone Sage Etendue bénéficie désormais d une déclinaison sur terminaux

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

GUIDE UTILISATEUR - LOGICIEL

GUIDE UTILISATEUR - LOGICIEL GUIDE UTILISATEUR - LOGICIEL Série RJ Le contenu de ce guide et les spécifications de ce produit peuvent être modifiés sans préavis. Brother se réserve le droit d apporter à tout moment et sans préavis

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

Redimensionner 1. Photoshop, les raccourcis clavier, taille de l'image, zone de travail, recadrage 3. Les raccourcis clavier

Redimensionner 1. Photoshop, les raccourcis clavier, taille de l'image, zone de travail, recadrage 3. Les raccourcis clavier N 5-13 Redimensionner 1. Photoshop, les raccourcis clavier, taille de l'image, zone de travail, recadrage 1.1. Objectifs : 1.1.1. Recadrer une image pour la rendre plus dynamique 1.1.2. Respecter les dimensions

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

NOUVELLE INTERFACE POWERPOINT 2013

NOUVELLE INTERFACE POWERPOINT 2013 NOUVELLE INTERFACE POWERPOINT 2013 Barre de lancement rapide Onglets Groupe Fonctions Commande Lanceur boîte de dialogue(options) Ruban PROCEDURE D UTILISATION D UN MASQUE DE DIAPOSITIVE Nouveau document

Plus en détail

Module Article. Plate-forme de gestion de contenu. PubliShare utilise la librairie javascript (AJAX - Web 2.0)

Module Article. Plate-forme de gestion de contenu. PubliShare utilise la librairie javascript (AJAX - Web 2.0) G U I D E D U T I L I S AT I O N Publishare Plate-forme de gestion de contenu Module Article PubliShare utilise la librairie javascript (AJAX - Web.0) Sommaire Généralités Schéma de navigation Identification

Plus en détail

Guide Ultra-book / 2012

Guide Ultra-book / 2012 Guide Ultra-book / 2012 Avant de commencer Le logiciel Ultra-book est optimisé pour les derniers navigateurs web standards : Firefox 10 ou 11 Chrome 18 Safari 5 Vous trouverez ces navigateurs en téléchargement

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

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE Atelier «pour débuter» La Gestion des photos avec Windows 7 1 Généralités sur le jargon de l image numérique Les différents formats d image : o BMP : il s'agit

Plus en détail

Comment accéder à d Internet Explorer

Comment accéder à d Internet Explorer Comment accéder à d Pour ouvrir l application, vous n avez qu à doublecliquer sur l icône de celle-ci : ou vous pouvez encore allez le chercher par le raccourci dans la barre des tâches : Lorsque l application

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

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

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

Groupe Eyrolles, 2003, ISBN : 2-212-11317-X

Groupe Eyrolles, 2003, ISBN : 2-212-11317-X Groupe Eyrolles, 2003, ISBN : 2-212-11317-X 3 Création de pages dynamiques courantes Dans le chapitre précédent, nous avons installé et configuré tous les éléments indispensables à la mise en œuvre d une

Plus en détail

VOLUME 1 CRÉATION D UN SITE WEB

VOLUME 1 CRÉATION D UN SITE WEB VOLUME 1 CRÉATION D UN SITE WEB Comprendre les principales étapes TABLE DES MATIÈRES PARTIE 1 - RENCONTRE DE DÉMARRAGE 03 PARTIE 2 - ANALYSE FONCTIONNELLE 03 PARTIE 3 - ARBORESCENCE 04 PARTIE 4 - MAQUETTES

Plus en détail

COMMENT RÉDIGER UN CAHIER DES CHARGES POUR UN SITE INTERNET?

COMMENT RÉDIGER UN CAHIER DES CHARGES POUR UN SITE INTERNET? COMMENT RÉDIGER UN CAHIER DES CHARGES POUR UN SITE INTERNET? 1. Présentation 1.1 Les coordonnées Mentionnez ici les coordonnées exactes de l entreprise ou de la collectivité (adresse postale, numéro de

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

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

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

LES ENJEUX DE LA COMMUNICATION WEB POUR LES RESTAURATEURS

LES ENJEUX DE LA COMMUNICATION WEB POUR LES RESTAURATEURS LES ENJEUX DE LA COMMUNICATION WEB POUR LES RESTAURATEURS LE NUMÉRIQUE PREND LE POUVOIR DÉVELOPPER VOTRE ÉTABLISSEMENT Votre Objectif POURQUOI COMMUNIQUER SUR LE WEB? 83 % d internautes en France Ordinateurs

Plus en détail

Personnaliser le menu démarrer

Personnaliser le menu démarrer Personnaliser le menu démarrer Le menu démarrer est le menu qui s ouvre quand on clique sur le bouton démarrer situé à gauche de la barre des tâches. Ce menu peut se présenter sous deux aspects différents

Plus en détail

Aide à l utilisation du logiciel IziSpot.Mobi

Aide à l utilisation du logiciel IziSpot.Mobi 1 Sommaire 1. Description logiciel (explication des menus)... 3 1.1. Description de la barre de menu... 3 2. Onglet configuration... 4 2.1. Gestion du logo... 4 2.1.1. Affichage du zoom... 4 2.1.2. Disposition

Plus en détail

CHAPITRE 15. Utilisation d ADOBE PHOTOSHOP ELEMENTS 8 EDITOR IMPRESSION ET PARTAGE DE PHOTOS

CHAPITRE 15. Utilisation d ADOBE PHOTOSHOP ELEMENTS 8 EDITOR IMPRESSION ET PARTAGE DE PHOTOS Utilisation d ADOBE PHOTOSHOP ELEMENTS 8 EDITOR CHAPITRE 15 IMPRESSION ET PARTAGE DE PHOTOS Impression de photos Options d impression Envoi de photos à des services de partage en ligne Partage de photos

Plus en détail

Conception Création Site. Web CAHIER DES CHARGES CREATION DE SITE WEB

Conception Création Site. Web CAHIER DES CHARGES CREATION DE SITE WEB Conception Création Site Web CAHIER DES CHARGES CREATION DE SITE WEB Nom de l entreprise : Adresse : Tel : Email : Personne(s) à contacter dans l entreprise : 1 CCS S.A.R.L. au capital de 45 000 RCS 434

Plus en détail

Rendre accessible à tous la réalité augmentée

Rendre accessible à tous la réalité augmentée Rendre accessible à tous la réalité augmentée D où vient l idée de Mini Mobile Story? La réalité augmentée est souvent perçue comme un système très complexe, animé et capable de mettre en scène informations

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

Dans l idéal, ceci devrait être fait en amont pour chaque image envoyée sur l espace de stockage de votre site internet.

Dans l idéal, ceci devrait être fait en amont pour chaque image envoyée sur l espace de stockage de votre site internet. 1- Optimiser le poids de votre image : Dans l idéal, ceci devrait être fait en amont pour chaque image envoyée sur l espace de stockage de votre site internet. Tous les types d utilisateurs (auteur, publicateur,

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

Félicitations! Vous disposez désormais de votre armoire numérique en ligne.

Félicitations! Vous disposez désormais de votre armoire numérique en ligne. Félicitations! Vous disposez désormais de votre armoire numérique en ligne. Cette armoire va vous permettre : De mieux classer vos documents De mieux les retrouver De mieux les partager Ce petit guide

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

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

Créer un site internet (ou des pages)

Créer un site internet (ou des pages) Ce qu il faut savoir avant de commencer Driss SABRI Une page Web est un outil de communication pour lequel on a des contraintes spécifiques 1. avant d en créer il faut se poser les questions habituelles

Plus en détail

Développement tablette Android. SophiaConf2011 Par Arnaud FARINE

Développement tablette Android. SophiaConf2011 Par Arnaud FARINE Développement tablette Android SophiaConf2011 Par Arnaud FARINE Parts de marché Android en 2011 1er OS vendu aux EU fin 2010 24% des smartphones en France (35% ios, 11% Blackberry) 3,6 millions de smartphones

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

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

Outils numériques personnels

Outils numériques personnels Outils numériques personnels Netbooks, APN, Smartphones, Tablettes Sylvain DENIS Pedago-TIC 03 février 2014 Sylvain DENIS (Pedago-TIC) Outils numériques personnels 03 février 2014 1 / 19 Plan 1 Outils

Plus en détail

Création d un site Internet

Création d un site Internet Création d un site Internet Weebly.com Johanne Raymond Collège Lionel Groulx, mai 2010 Service du soutien à l enseignement et Plan de réussite Ouvrir un compte sur Weebly... 1 Modifier le modèle... 2 Ajouter

Plus en détail

GESTION DES MENUS. Un menu est un ensemble de liens permettant la navigation dans le site.

GESTION DES MENUS. Un menu est un ensemble de liens permettant la navigation dans le site. GESTION DES MENUS I. Préambule Un menu est un ensemble de liens permettant la navigation dans le site. En général, la position du menu va déterminer son nom, afin de le retrouver rapidement. Ex : Menu

Plus en détail

Sites Internet : les. tendances. Jeudi 30 janvier 2014 Bordeaux L AGENCE CONNECTÉE À L ENTREPRISE

Sites Internet : les. tendances. Jeudi 30 janvier 2014 Bordeaux L AGENCE CONNECTÉE À L ENTREPRISE Sites Internet : les tendances pour 2014 Jeudi 30 janvier 2014 Bordeaux L AGENCE CONNECTÉE À L ENTREPRISE Inaa$v, une agence de communica$on avec des spécificités CONSEiL EN COMMUNICATION FoRmatiOns WEBMARKETING

Plus en détail

Conseils d utilisation

Conseils d utilisation Lien commercial Offre MAIRIES La page d accueil et ses fonctionnalités...p Créer son lien commercial...p à6 Sélection des supports de diffusion..p Sélection du format et dates de diffusion...p Création

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