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

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

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

Transcription

1 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 pratiques Avant de rentrer dans le vif du sujet en commençant le site HTML5, il est très important de bien comprendre l'environnement mobile, la manière d'afficher vos pages ainsi que les habitudes des utilisateurs. Comme déjà évoqués dans le chapitre Particularités des sites mobiles, nous allons aller plus loin pour non seulement afficher une page HTML sur votre mobile mais également la faire correspondre à l'utilisateur final. 2.1 Adapter le site à la taille de l'écran Dans le cadre du développement d'un site mobile, la spécificité la plus forte d'un appareil mobile est la taille de son écran ainsi que sa résolution. En effet, alors que les écrans pour ordinateur peuvent être au-dessus de la définition des télévisions (1920 pixels par 1080), la résolution des écrans pour mobiles est beaucoup plus faible, certains anciens modèles font même 320 pixels par 240. De la même manière, alors que les écrans d'ordinateur font maintenant plus de 43 cm, ceux des mobiles sont beaucoup plus petits, très souvent 8,9 cm (3,5 pouces). Bien sûr, les appareils mobiles peuvent afficher une page Internet, mais l'affichage d'une page web classique sera minuscule et il sera nécessaire d'agrandir la page pour lire correctement les caractères. Lors de l'affichage d'une page sous un appareil mobile, le navigateur va prendre en compte la largeur de cette page et utiliser celle-ci pour en afficher le maximum sur son navigateur. Editions ENI - All rights reserved

2 Créer un site mobile : HTML5 Chapitre 4 47 La deuxième problématique de ces pages est qu'elles sont prévues pour être affichées sur un écran suffisamment grand pour voir correctement la largeur de la page. Lors d'un agrandissement, il nous sera malheureusement impossible d'afficher correctement cette largeur et nous serons obligés de nous déplacer pour voir la page dans son intégralité. Il est donc primordial d'avoir à l'esprit ces inconvénients afin de créer un site permettant un affichage correct même sur un petit écran : Via une largeur adéquate. Via une taille de caractères lisible. Via des images peu larges. Affichage du site classique de Wikipédia sur un appareil mobile :

3 48 HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles Affichage du site mobile de Wikipédia : 2.2 Améliorer la visibilité Il est nécessaire d'avoir un site reposant à l œil, ainsi : des images de fond, des couleurs de texte non adaptées avec le fond d'écran, une taille de texte trop petite, un bloc de texte trop compact, Editions ENI - All rights reserved

4 Créer un site mobile : HTML5 Chapitre 4 49 sont autant d'éléments qui feront que votre site ne sera pas visité dans des conditions optimales. N'hésitez pas à jouer sur les tailles et couleurs pour afficher les menus, sousmenus ou liens, n'hésitez pas non plus à ajouter des effets d'ombres aux boutons pour les faire ressortir. Si votre page peut descendre, assurez-vous de le faire comprendre à l'utilisateur en ne mettant pas une image couvrant toute la hauteur de la page (mais en coupant un peu avant pour montrer le texte qui suit) ou encore en ne collant pas les éléments de menu exactement à la hauteur de la page si d'autres sont plus bas. Une page contenant du texte non visible après la photo :

5 50 HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles 2.3 Écrire des pages légères Actuellement, une des mauvaises pratiques du web classique, gommée grâce aux grandes connexions, est l'ajout de grandes images. Même si celles-ci sont ensuite réduites via la taille de la page sur l'écran, elles sont tout de même téléchargées sur le navigateur afin qu'il puisse les afficher correctement. Editions ENI - All rights reserved

6 Créer un site mobile : HTML5 Chapitre 4 51 Il est donc nécessaire de travailler sur deux axes pour les images : Réduire leur taille pour un chargement plus rapide. Changer leur résolution pour coller au mieux à la taille voulue sur notre site mobile (une image de grande résolution, réduite via le navigateur, rendra très souvent moins bien qu'une image déjà réduite via un logiciel spécialisé). Pour permettre une meilleure lisibilité générale due à la taille de l'écran, il est également recommandé de limiter les images qui se révéleraient inutiles pour une bonne visibilité. Une autre pratique des sites Internet classiques est l usage d un grand nombre de fichiers optionnels dont le téléchargement alourdit la page. Pensons à une page classique de 500 Ko, via un accès ADSL le chargement sera quasi instantané, il n'en sera pas de même pour un accès 3G et donc la page ne pourra pas donner satisfaction à l'utilisateur. Il faut par conséquent privilégier : Les pages faibles en poids. Le bon usage du cache pour navigateurs. L'utilisation de fichiers JavaScript ou CSS sous forme d'import (et non directement dans les pages) ; ceci permettra de les réutiliser sur tout votre site. Même si les appareils mobiles tendent à être de plus en plus puissants, ils ne sont toujours pas à la hauteur des ordinateurs de bureau : le temps de traitement d'un JavaScript sera plus long sur appareil mobile, l'affichage de la page sera plus lent. Privilégiez donc des JavaScript n'utilisant que le nécessaire dans la mesure du possible.

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

L acquisition d images numériques

L acquisition d images numériques L acquisition d images numériques Il existe diverses méthodes pour acquérir des images numériques. 1. Avec un scanner : Placer l image sur le scanner (face vers la vitre) et ouvrir un logiciel d acquisition

Plus en détail

LES IMAGES NUMERIQUES

LES IMAGES NUMERIQUES LES IMAGES NUMERIQUES Ce qui génère ces images, ce sont : les appareils photo numériques, les scanners, les caméscopes numériques, des logiciels de dessin, On les trouve : sur Internet : auquel cas, il

Plus en détail

PHPWEBSITE -Tutoriel image

PHPWEBSITE -Tutoriel image PHPWEBSITE -Tutoriel image La capture des images depuis le web pour mon site. L optimisation d images pour le web, 1 Préparer des images pour le Web A. Généralités 1. Les trois formats d'images sur le

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

Pas-à-pas. Créer une newsletter avec Outlook

Pas-à-pas. Créer une newsletter avec Outlook Pas-à-pas Créer une newsletter avec Outlook Objectif : mettre en forme des messages électroniques afin de pouvoir avoir des images dans le corps du message et une mise en page agréable à l œil et efficace.

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

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

DE LA CONCEPTION À LA PUBLICATION

DE LA CONCEPTION À LA PUBLICATION CHAPITRE 1 DE LA CONCEPTION À LA PUBLICATION Réussir l ergonomie générale d un site... 17 Créer la charte graphique... 19 Les clés d un bon site web... 21 15 Avant de vous lancer sur votre souris et votre

Plus en détail

Livre Blanc WebSphere Transcoding Publisher

Livre Blanc WebSphere Transcoding Publisher Livre Blanc WebSphere Transcoding Publisher Introduction WebSphere Transcoding Publisher vous permet d'offrir aux utilisateurs des informations Web adaptées à leurs besoins. Il vous permet, par exemple,

Plus en détail

Les différents outils du backoffice

Les différents outils du backoffice Les différents outils du backoffice Aide pour backoffice Avant d expliquer le fonctionnement de votre outil d administration point par point, il est important de préciser que suivant le type de contrat

Plus en détail

Mémento mise à jour d un site all-in-web

Mémento mise à jour d un site all-in-web Mémento mise à jour d un site all-in-web Ce document a pour but de rappeler les principales manipulations pour mettre à jour un site web sous all-in-web. Sommaire 1 La CSS : la mise en forme du site...

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

GLPI (Gestion Libre. 2 ième édition. Nouvelle édition. de Parc Informatique)

GLPI (Gestion Libre. 2 ième édition. Nouvelle édition. de Parc Informatique) GLPI (Gestion Libre de Parc Informatique) Installation et configuration d une solution de gestion de parc et de helpdesk 2 ième édition Marc PICQUENOT Patrice THÉBAULT Nouvelle édition Table des matières

Plus en détail

A. Les objectifs. v Puis cliquez sur le lien Types de contenu. B. Définir les paramètres des articles

A. Les objectifs. v Puis cliquez sur le lien Types de contenu. B. Définir les paramètres des articles Chapitre.. 5.. :. Les types.. de contenu. 89 Chapitre 5 : types de contenu Drupal 8 - Découverte des fondamentaux A. Les objectifs Nous allons maintenant nous atteler à configurer les types de contenu

Plus en détail

Palettes d'outils et barres d'outils

Palettes d'outils et barres d'outils Montrer Palettes d'outils et barres d'outils Accueil > Référence > Palettes d'outils et barres d'outils > Palettes d'outils et barres d'outils Cette section présente les outils et les fonctions disponibles

Plus en détail

3. Qu'est-ce qu'une image numérique? 3.1 Pixels et niveaux de gris

3. Qu'est-ce qu'une image numérique? 3.1 Pixels et niveaux de gris 3. Qu'est-ce qu'une image numérique? 3.1 Pixels et niveaux de gris PLAN 3.1.1 Image numérique et image analogique 3.1.2 Résolution 3.1.3 Niveaux de gris 3.1.4 L'image numérique : un tableau d'entiers 3.1.1

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

ADMINISTRATION DU PORTAIL AFI OPAC 2.0 V3 AFI OPAC 2.0

ADMINISTRATION DU PORTAIL AFI OPAC 2.0 V3 AFI OPAC 2.0 ADMINISTRATION DU PORTAIL AFI OPAC 2.0 V3 AFI OPAC 2.0 V3 Sommaire Sommaire... 2 Note :... 2 Quelques Notions... 3 Profil :... 3 Pages :... 5 Créer du contenu... 6 Identification de l administrateur :...

Plus en détail

Manuel de modifications des modèles

Manuel de modifications des modèles Manuel de modifications des modèles Contenu Avant propos...2 Introduction...2 Les 4 niveaux...2 Préparation...2 Quoi et pourquoi...2 Comment...2 Nommer les modèles modifiés...4 Niveau 1 Images...4 Quoi...4

Plus en détail

A. Vue d'ensemble. Interroger : la gestion des requêtes sous InfoView

A. Vue d'ensemble. Interroger : la gestion des requêtes sous InfoView A. Vue d'ensemble Interroger : la gestion des requêtes sous InfoView Comme nous l'avons évoqué dans un chapitre précédent, la requête sur un univers est le fournisseur de données le plus souvent utilisé

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

Gérer des sites avec Dreamweaver

Gérer des sites avec Dreamweaver Gérer des sites avec Dreamweaver La boîte de dialogue Gérer les sites a pour fonction de vous permettre de créer un nouveau site, de modifier, de dupliquer, de supprimer un site, d'importer ou d'exporter

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

Découvrir les calques de PhotoFiltre 7 et PhotoFiltre Studio par l'exemple

Découvrir les calques de PhotoFiltre 7 et PhotoFiltre Studio par l'exemple PF7. Fiche 9 Découvrir les calques de PhotoFiltre 7 et PhotoFiltre Studio par l'exemple Avant-propos Une image numérique peut être le résultat de la combinaison des contenus de différents calques fusionnés.

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

Création d un formulaire de contact Procédure

Création d un formulaire de contact Procédure Création d un formulaire de contact Procédure Description : Cette procédure explique en détail la création d un formulaire de contact sur TYPO3. Outil Procédure CMS: TYPO3 Auteur : hemmer.ch SA Extension:

Plus en détail

1. Une image de 12 cm de long exactement

1. Une image de 12 cm de long exactement 1. Une image de 12 cm de long exactement Votre image est particulièrement grande et vous souhaitez qu elle ne mesure pas plus de 12 cm de long, pas un millimètre de plus, mais en conservant ses proportions.

Plus en détail

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

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

Plus en détail

Utilisation de GIMP. : : INTRASITE-DEVELOPPEMENT : : Développement de sites internet : : Hébergement : : Référencement : :

Utilisation de GIMP. : : INTRASITE-DEVELOPPEMENT : : Développement de sites internet : : Hébergement : : Référencement : : Utilisation de GIMP 1. GIMP (The GNU Image manipulation Program) Préambule 1.1 Téléchargement et installation 1.2 Téléchargement 1.3 Installation 1.4 Modification des attributs tailles d une image 1.5

Plus en détail

Ajuster la dimension d une image et l imprimer

Ajuster la dimension d une image et l imprimer Ajuster la dimension d une image et l imprimer Proposé par Tabila117 Membre du Forum Nikon Numérique Document Nikon traduit par Tabila117 Version 1.1 12/07/2007 Ajuster la dimension d une image et l imprimer

Plus en détail

A. Allumer et éteindre l équipement, ouvrir et fermer une session

A. Allumer et éteindre l équipement, ouvrir et fermer une session Page 1 / 12 A. Allumer et éteindre l équipement, ouvrir et fermer une session ALLUMER Pour allumer l ordinateur, regardez en face de l unité centrale et localisez un gros bouton marque du symbole Enfoncez-le

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

Manuel du rédacteur. Dernière mise à jour : le 14/04/2010

Manuel du rédacteur. Dernière mise à jour : le 14/04/2010 Manuel du rédacteur Dernière mise à jour : le 14/04/2010 Table des matières 1 PRÉSENTATION GÉNÉRALE... 3 2 L INTERFACE DE GESTION... 3 2.1 ACCÈS À L INTERFACE DE GESTION... 3 2.2 PRÉSENTATION GÉNÉRALE...

Plus en détail

Ref : Résolution problème d'accès aux supports de cours

Ref : Résolution problème d'accès aux supports de cours PLATE FORME e-learning LLMS Pôle national de compétences FOAD (Formation Ouverte et A Distance) Ref : Résolution problème d'accès Pôle compétences FOAD SIGAT http://foad.ac-toulouse.fr/ Page 2 SOMMAIRE

Plus en détail

UTILISATION DE XnView

UTILISATION DE XnView UTILISATION DE XnView 1.1. Installer XnView Nous allons copier sur votre clef USB le logiciel portable aucune installation ne sera nécessaire sur l ordinateur. 1.2. Lancer XnView Un clic sur l icône Xnview.exe

Plus en détail

AGASC / BUREAU INFORMATION JEUNESSE 06700 Saint Laurent du Var Tel : 04.93.07.00.66 E mail : bij@agasc.fr www.agasc.fr. Word: La présentation

AGASC / BUREAU INFORMATION JEUNESSE 06700 Saint Laurent du Var Tel : 04.93.07.00.66 E mail : bij@agasc.fr www.agasc.fr. Word: La présentation Word: La présentation Introduction 2 ième partie Bien que le contenu du document soit le plus important, Word vous offre plusieurs options pour améliorer la présentation du texte. Cette page va vous montrer

Plus en détail

Utilisation du logiciel Epson Easy Interactive Tools

Utilisation du logiciel Epson Easy Interactive Tools Utilisation du logiciel Epson Easy Interactive Tools Ce logiciel permet d'utiliser le stylo electronique comme souris pour contrôler l'ordinateur depuis l'écran et comme feutre électronique pour écrire

Plus en détail

faqphilatelie.lautre.net Comment publier un article

faqphilatelie.lautre.net Comment publier un article faqphilatelie.lautre.net Comment publier un article Ce document va vous permettre de vous familiariser avec la création d article. Préparez votre article à l avance, utilisez la macro Word pour la mise

Plus en détail

Créer un collage avec The Gimp 2.2.10

Créer un collage avec The Gimp 2.2.10 Créer un collage avec The Gimp 2.2.10 Sommaire A. Ouvrir The Gimp -----> Le choix des formats ou extensions B.Le projet : Isoler/ sélectionner C.Intégrer -----> calques -----> Echelle -----> Teintes Le

Plus en détail

Impression sans marge

Impression sans marge Impression sans marge Proposé par Malmoth Membre du Forum Nikon Numérique Document Nikon traduit par Lechove Version 1.1 17/08/2007 Impression sans marge Demande Comment imprimer une image sans marge (impression

Plus en détail

Club informatique Mont-Bruno Séances du 10 et 29 avril 2009 Présentateurs : Michel Gagné et Réjean Côté

Club informatique Mont-Bruno Séances du 10 et 29 avril 2009 Présentateurs : Michel Gagné et Réjean Côté Club informatique Mont-Bruno Séances du 10 et 29 avril 2009 Présentateurs : Michel Gagné et Réjean Côté Contenu de la séance Internet Explorer : les fichiers Internet temporaires Windows : la capture d'écran

Plus en détail

rendre les réunions simples

rendre les réunions simples rendre les réunions simples Vous trouverez tout ce dont vous avez besoin pour commencer à utiliser votre compte de conférence VaaS-t dans les pages suivantes. Guide de démarrage rapide Mise en route Votre

Plus en détail

TUTORIEL : Redimensionner et compresser une image avec Photofiltre.

TUTORIEL : Redimensionner et compresser une image avec Photofiltre. 1. Introduction : Le développement du travail en ligne pose de nouvelles problématiques pour la sauvegarde des fichiers, en particulier quand il s'agit des images. En effet, les périphériques d'acquisition

Plus en détail

Personnaliser un thème WordPress pour un Blog de l'ara. Méthode pas à pas.

Personnaliser un thème WordPress pour un Blog de l'ara. Méthode pas à pas. Personnaliser un thème WordPress pour un Blog de l'ara. Méthode pas à pas. Table des matières I. Les outils nécessaires... 3 II. Utilisation de l'outil Artisteer.... 3 1. Pourquoi utiliser Artisteer?...

Plus en détail

Cliquez sur suivant (image 1.4)

Cliquez sur suivant (image 1.4) Alain Lamaison 1 10 utilisations de Irfanview 3.33 Utilisation de Irfanview 3.3 Irfanview est un logiciel gratuit d'affichage et de traitement d'image simple, extrêmement rapide et efficace. Très léger

Plus en détail

GetSimple 3. Le guide complet pour créer des sites web. GetSimple 3 - Le guide complet pour créer des sites web. GetSimple 3 26,50.

GetSimple 3. Le guide complet pour créer des sites web. GetSimple 3 - Le guide complet pour créer des sites web. GetSimple 3 26,50. Le guide complet pour créer sites web Vous verrez ensuite comment gérer les pages qui constituent la structure du site : créer les pages, les paramétrer pour la publication, les modifier, les supprimer

Plus en détail

AD SPECIFICATIONS. Bannière standard. Livraison par des sites et applis tiers. Créations. Animation. Fichiers à fournir. Disponibilité.

AD SPECIFICATIONS. Bannière standard. Livraison par des sites et applis tiers. Créations. Animation. Fichiers à fournir. Disponibilité. Bannière standard Une bannière publicitaire standard est une publicité pouvant être statique ou animée. Cette publicité peut permettre un large éventail d'actions, notamment l'accès à un site mobile, une

Plus en détail

Date de diffusion : Rédigé par : Version : Mars 2008 APEM 1.4. Sig-Artisanat : Guide de l'utilisateur 2 / 24

Date de diffusion : Rédigé par : Version : Mars 2008 APEM 1.4. Sig-Artisanat : Guide de l'utilisateur 2 / 24 Guide Utilisateur Titre du projet : Sig-Artisanat Type de document : Guide utilisateur Cadre : Constat : Les Chambres de Métiers doivent avoir une vision prospective de l'artisanat sur leur territoire.

Plus en détail

SPIP est un logiciel libre et gratuit. Pour plus d informations ou consulter la documentation complète, aller sur le site http://ww.spip.

SPIP est un logiciel libre et gratuit. Pour plus d informations ou consulter la documentation complète, aller sur le site http://ww.spip. Cours SPIP pour rédacteur 1. Introduction L objectif de ce cours est d apprendre à utiliser le logiciel SPIP en tant que rédacteur. Ce cours ne requiert aucune connaissance informatique préalable à part

Plus en détail

GUIDE D ACCÈS AU SITE WEB (Version apprenant)

GUIDE D ACCÈS AU SITE WEB (Version apprenant) 103 GUIDE D ACCÈS AU SITE WEB (Version apprenant) Premier accès au site Web du Programme d éducation à la sécurité routière S inscrire au site Remplir le formulaire Choisir son nom d utilisateur et son

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

A. Les objectifs. B. La gestion des champs personnalisés. v Toujours en tant qu'administrateur, téléchargez, installez et activez ce plugin.

A. Les objectifs. B. La gestion des champs personnalisés. v Toujours en tant qu'administrateur, téléchargez, installez et activez ce plugin. Chapitre........ 5.. :. Les... champs....... personnalisés..................................................... 169 A. Les objectifs Chapitre 5 : Les champs personnalisés WordPress - Site multi-utilisateur

Plus en détail

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

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

Plus en détail

Ajout d un contenu texte-images

Ajout d un contenu texte-images Ajout d un contenu texte-images Procédure Description : Cette procédure explique en détail comment insérer un contenu texte-images sur TYPO. Il est conseillé d appliquer cette procédure après les procédures

Plus en détail

Animation numérique. de territoire. Créer son site Internet avec un outil gratuit. Mardi 4 novembre 2014. Cédric ARNAULT OT Lourdes

Animation numérique. de territoire. Créer son site Internet avec un outil gratuit. Mardi 4 novembre 2014. Cédric ARNAULT OT Lourdes Créer son site Internet avec un outil gratuit Mardi 4 novembre 2014 Cédric ARNAULT OT Lourdes Présentation de la journée - Créer un site Internet : Pourquoi? Pour qui? Comment? - - Aller plus loin avec

Plus en détail

Prise en main du logiciel Smart BOARD

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

Plus en détail

LAB-Multimedia CMS. Guide d'auto-formation. Copyright by LAB-Multimedia 1/13

LAB-Multimedia CMS. Guide d'auto-formation. Copyright by LAB-Multimedia 1/13 Guide d'auto-formation Copyright by LAB-Multimedia 1/13 Auteurs Ont participé à la réalisation de cet ouvrage: Luc A. Bardet Editeur LAB-Multimedia Rue du Casino CH-1063 Chapelle-sur-Moudon (Switzerland)

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

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

Cette section passe en revue les techniques qui permettent d améliorer le confort et/ou les performances de l affi chage.

Cette section passe en revue les techniques qui permettent d améliorer le confort et/ou les performances de l affi chage. 25 Améliorer l affichage Cette section passe en revue les techniques qui permettent d améliorer le confort et/ou les performances de l affi chage. REMPLACER L ÉCRAN Le changement d écran n est pas aussi

Plus en détail

Collège Pie10. www.danielpie10.be/site.php

Collège Pie10. www.danielpie10.be/site.php Collège Pie10 www.danielpie10.be/site.php Daniel Massart Février 2007 Sommaire 1 OBJECTIFS 1 2 TYPES DE SITES 1 2.1 Les blogs 1 2.2 Les sites «bibliothèques» 2 2.3 Les sites statiques classiques 2 2.4

Plus en détail

Espace Numérique Régional de Santé Présentation de DRUPAL

Espace Numérique Régional de Santé Présentation de DRUPAL Espace Numérique Régional de Santé Présentation de DRUPAL Sommaire 1. Introduction 2. Conception d un site 3. Thème 4. Blocs 5. Types de contenu 6. Page 7. Menu 8. Accès 2 1. Introduction Drupal est un

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

Prise en main du logiciel. Smart BOARD Notebook 10

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

Plus en détail

Formation SAP BI Webi R4

Formation SAP BI Webi R4 Formation SAP BI Webi R4 08/10/2014 Integrated Business intelligence 1 Programme Introduction au Web Intelligence Démarrage de Web Intelligence (webi) Requêtes Exercice Rapport Exercice Barre d'outils

Plus en détail

I - Créer un Nouveau Projet

I - Créer un Nouveau Projet Manuel d'utilisation Limite de responsabilités : En aucun cas, l'auteur ne pourra être tenu pour responsable des dommages indirects, particuliers, accidentels ou financiers résultant de l'utilisation et/ou

Plus en détail

Comment écrire un article pour le site HCE?

Comment écrire un article pour le site HCE? Comment écrire un article pour le site HCE? Explication courte Les explications courtes sont les meilleures. Naviguez sur http://www.hce.asso.fr/ecrire/ et laissez-vous guider par les écrans. Explication

Plus en détail

Si vous souhaitez optimiser votre référencement, n'hésitez pas à donner à vos images des noms à rallonge.

Si vous souhaitez optimiser votre référencement, n'hésitez pas à donner à vos images des noms à rallonge. LE POIDS DES PHOTOS Il est important de donner un nom correct à toutes les images que vous utilisé pour constituer des galeries d'images. Si vous laissez le nom de fichier tel que vous le propose votre

Plus en détail

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

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

Plus en détail

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

Tutoriel Technique. Plateforme de suivi des usages des ressources. Version 2 Date de conception : 03/2014 Auteur : Équipe UVED

Tutoriel Technique. Plateforme de suivi des usages des ressources. Version 2 Date de conception : 03/2014 Auteur : Équipe UVED Tutoriel Technique Plateforme de suivi des usages des ressources Version 2 Date de conception : 03/2014 Auteur : Équipe UVED 1. Connexion à la plateforme de suivi des usages Pour accéder à la plateforme

Plus en détail

+ Points importants. n Marché des mobiles très porteur. n Grande diversité des appareils. + Chiffres 2014. n 1,9 milliards de mobiles vendus

+ Points importants. n Marché des mobiles très porteur. n Grande diversité des appareils. + Chiffres 2014. n 1,9 milliards de mobiles vendus + + Points importants n Marché des mobiles très porteur n Grande diversité des appareils IHM Mobiles, web, multimédia Caroline Essert Université de Strasbourg - 2013 Enquête Doodle avril 2011 + Marché

Plus en détail

Comment retrouver le fichier "bingo" sauvegardé dans l'ordinateur? Socle commun

Comment retrouver le fichier bingo sauvegardé dans l'ordinateur? Socle commun Objectifs Auto- Evaluation Socle commun Technologie Expliquer comment sont stockées les informations dans un ordinateur. o IV-2 Recenser des données, les classer, les identifier, les stocker, les retrouver

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

Introduction à Moodle

Introduction à Moodle Introduction à Moodle Lors de cette formation d introduction à la plateforme Moodle, nous expérimentons les outils de base pour ajouter du contenu en ligne, les paramètres, les fonctions de mise en page,

Plus en détail

Le Registre sous Windows 8 architecture, administration, script, réparation...

Le Registre sous Windows 8 architecture, administration, script, réparation... 234 Le Registre sous Windows 8 architecture, administration, script, réparation... dcliquez sur Affichage - Personnaliser afin d activer ou de désactiver certains éléments de votre Console. Voyons maintenant

Plus en détail

Table des matières. F. Saint-Germain / S. Carasco Document réalisé avec OpenOffice.org Page 1/13

Table des matières. F. Saint-Germain / S. Carasco Document réalisé avec OpenOffice.org Page 1/13 Voici un petit tutoriel d'utilisation du tableau numérique de la marque promethean. Ce tutoriel est loin d'être complet, il permet juste une première approche simple des outils de base du logiciel ACTIVstudio.

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

Réaliser une mosaique de photos

Réaliser une mosaique de photos Avec XnView Le logiciel XnView est un visualiseur et gestionnaire d'images très complet. Outre une retouche basique de vos images, XnView permet la création rapide de mosaïque photo ou de planche contact.

Plus en détail

Prise en main rapide

Prise en main rapide Prise en main rapide 4 Dans cette leçon, vous découvrirez les fonctionnalités de création de page web de Dreamweaver et apprendrez à les utiliser dans l espace de travail. Vous apprendrez à : définir un

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

ATELIERS MULTIMEDIAS. Photos 2. Redimensionner ses photos. Médiathèques www.mediatheque-coral.fr

ATELIERS MULTIMEDIAS. Photos 2. Redimensionner ses photos. Médiathèques www.mediatheque-coral.fr ATELIERS MULTIMEDIAS Médiathèques LE DÔME Médiathèque 135 Place de l Europe BP 173 73204 ALBERTVILLE Cedex Tél. 04 79 10 44 70 Fax. 04 79 10 44 79 dome-mediatheque-albertville @coral.fr Photos 2 Redimensionner

Plus en détail

Gérer vos photos numériques

Gérer vos photos numériques Gérer vos photos numériques 26 mars 2013 p 1 Gérer vos photos numériques Avec ce tutoriel, vous apprendrez à : différencier la photothèque de la visionneuse, redresser une photo, ajouter des balises pour

Plus en détail

Manuel d utilisation email NETexcom

Manuel d utilisation email NETexcom Manuel d utilisation email NETexcom Table des matières Vos emails avec NETexcom... 3 Présentation... 3 GroupWare... 3 WebMail emails sur internet... 4 Se connecter au Webmail... 4 Menu principal... 5 La

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

Comment convertir des documents PDF au format mviewer pour TI-Nspire

Comment convertir des documents PDF au format mviewer pour TI-Nspire Tutoriel TI-Planet Comment convertir des documents PDF au format mviewer pour TI-Nspire A l'usage de tous Xavier Andréani 12 février 2011 Table des matières Introduction...2 A)Ouverture d'une page du fichier

Plus en détail

Institut Méditerranéen de Biodiversité et d Ecologie marine et continentale

Institut Méditerranéen de Biodiversité et d Ecologie marine et continentale Documentation pour l administration de Pages personnelles sur www.imbe.fr Update : 05/12/2013 Les pages personnelles Ouverture d une page personnelle La demande de création d une page personnelle doit

Plus en détail

Créer et faire vivre un site web pédagogique

Créer et faire vivre un site web pédagogique Créer et faire vivre un site web pédagogique 1. Créer un site web... 2 2. Utilisation d un CMS... 2 3. SPIP : Système de Publication Internet Partagé... 2 4. Le site de la Cité Scolaire Jean Moulin...

Plus en détail

Programmation Web TP1 - HTML

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

Plus en détail

Wifi Display Dongle. Guide d utilisateur. Ver 1.1. Tous les noms de marque et marques de commerce sont la propriété de leurs propriétaires respectifs.

Wifi Display Dongle. Guide d utilisateur. Ver 1.1. Tous les noms de marque et marques de commerce sont la propriété de leurs propriétaires respectifs. Wifi Display Dongle Guide d utilisateur Ver 1.1 Tous les noms de marque et marques de commerce sont la propriété de leurs propriétaires respectifs. Introduction Le Dongle MD01X envoie le contenu du Smartphone

Plus en détail

FORMATION DES RÉDACTEURS.

FORMATION DES RÉDACTEURS. Idemu, refonte de site web. le 06 novembre 2008 FORMATION DES RÉDACTEURS. 1. Introduction L objectif de ce cours est d apprendre à utiliser le logiciel SPIP en tant que rédacteur. Ce cours ne requiert

Plus en détail

PC Check & Tuning 2010 Optimisez et accélérez rapidement et simplement les performances de votre PC!

PC Check & Tuning 2010 Optimisez et accélérez rapidement et simplement les performances de votre PC! PC Check & Tuning 2010 Optimisez et accélérez rapidement et simplement les performances de votre PC! MAGIX PC Check & Tuning 2010 est la solution logicielle complète pour l'analyse, la maintenance et l'accélération

Plus en détail

Le poids et la taille des fichiers

Le poids et la taille des fichiers Le poids et la taille des fichiers Au tout départ des 0 et des 1 En français et en anglais on appelle cela un bit 8 bit donne un octet (ou byte en anglais) Exemple d octet : 11111111 10111010 00001000

Plus en détail

Recadrer une image dans un format non-standard et l'imprimer

Recadrer une image dans un format non-standard et l'imprimer Recadrer une image dans un format non-standard et l'imprimer Vous possédez un pêle-mele photos dont les cadres ne sont pas aux formats standards. Pour utiliser ces cadres, vous devez donc recadrer vos

Plus en détail

Manuel d'utilisation

Manuel d'utilisation Manuel d'utilisation Présentation Linutop TV est une solution clé en main pour réaliser en ligne un affichage dynamique personnalisé diffusable dans plusieurs lieux simultanément. Stockez vos documents,

Plus en détail

Java 7 Les fondamentaux du langage Java

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

Plus en détail

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

CRÉATION D UNE ADRESSE DE MESSAGERIE

CRÉATION D UNE ADRESSE DE MESSAGERIE CRÉATION D UNE ADRESSE DE MESSAGERIE AVEC OUTLOOK.COM Outlook.com, la messagerie de Microsoft le successeur de Hotmail et de Live.fr dispose de nombreux outils (courriel, stockage de documents, suite allégée

Plus en détail