Responsive Web design, périphériques mobiles et accessibilité

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

Download "Responsive Web design, périphériques mobiles et accessibilité"

Transcription

1 Responsive Web design, périphériques mobiles et accessibilité

2 Qui suis-je? Victor Brito Situé près de Paris, dans la France non voisine Intégrateur HTML / CSS freelance Expert Accessiweb en évaluation Intervient sur la relecture des référentiels Accessiweb Se cache derrière Un seul Web un-seul-web.fr et Tuyaux de l accessibilité tuyauxa11y.info Portfolio : victor-brito.fr Twitter

3 Ce dont il va être question Périphériques mobiles et responsive Web design : un regard opportun sur l accessibilité du Web Périphériques mobiles et responsive Web design comme révélateurs de problèmes d accessibilité Des critères d accessibilité négligés sur desktop qui sont révélés sur périphériques mobiles

4 L information ne doit pas être véhiculée uniquement par la couleur

5 L information ne doit pas être véhiculée uniquement par la couleur Le noir et blanc n est pas tout à fait mort!

6 Les formats pour le multimédia

7 Les formats pour le multimédia Flash boudé par la plupart des OS mobiles (ios en tête) Utiliser les éléments HTML 5 audio et video pour le multimédia Animations CSS 3 pour des animations

8 Le contrôle des limites de temps

9 Le contrôle des limites de temps En situation de mobilité, les connexions Wifi et 4G sont du luxe Plus la connexion est mauvaise, plus il faut de temps pour toute tâche Permettre aux utilisateurs de contrôler chaque limite de temps Laisser aux utilisateurs le soin de rafraîchir eux-mêmes une page Web

10 Le JavaScript

11 Le JavaScript En situation de mobilité, les connexions Wifi et 4G sont (toujours) du luxe Le JavaScript, même activé, peut ne pas se charger complètement S assurer que l essentiel des fonctionnalités du site Web est disponible comme si JavaScript était désactivé En cas d alternative à JavaScript, s assurer de sa pertinence

12 Les Captchas

13 Les Captchas Impact sur les écrans à haute densité de pixels (iphone 4, ipad 3 et bien d autres périphériques mobiles ) Fournir des versions d images Captcha adaptées à ces écrans ou privilégier d autres alternatives (opération arithmétique, question ou rien du tout)

14 Les liens d évitement

15 Les liens d évitement Facilite la navigation sur des écrans plus petits, même quand on est un utilisateur valide Et surtout

16 Les liens d évitement évite la tendinite du pouce!

17 Le zoom

18 Le zoom Zoom graphique prédominant sur les périphériques mobiles Zoom paramétrable via la méta viewport (HTML, pas standard) ou la (CSS, standard en devenir)

19 Le zoom Méta viewport width : définition de la largeur du viewport initial-scale : niveau de zoom initial minimum-scale : niveau de zoom minimal maximum-scale : niveau de zoom maximal user-scalable : zoom par interaction de l utilisateur (ne jamais utiliser la valeur no!) <meta name="viewport" content="width=device-width" />

20 Le zoom width : définition des largeurs minimales et maximales du viewport (raccourci pour min-width et max-width) zoom : niveau de zoom initial min-zoom : niveau de zoom minimal max-zoom : niveau de zoom maximal user-zoom : zoom par interaction de l utilisateur (ne jamais utiliser la valeur { width: device-width; }

21 Le zoom Attention! initial-scale=1.0, maximum-scale=1.0 vaut user-scalable=no Pour résoudre des bugs de zoom en cas de changement d orientation, privilégier : <meta name="viewport" content="width=device-width, initial-scale=1.0" { width: device-width; zoom: 1; }

22 L agrandissement du texte

23 L agrandissement du texte Unité em dans les media queries + design élastique Permet d appliquer les points de rupture en cas de fort zoom Bénéfices Aucune perte d information garantie en cas de fort zoom Voire pas de scroll horizontal, même en cas de fort zoom

24 L ouverture d une nouvelle fenêtre

25 L ouverture d une nouvelle fenêtre Certains navigateurs mobiles limitent le nombre d onglets pouvant être ouverts simultanément Limiter autant que possible l ouverture de liens dans une nouvelle fenêtre (ou un nouvel onglet) Limiter autant que possible les scripts provoquant l ouverture d une nouvelle fenêtre Soigner l avertissement des utilisateurs en cas d ouverture pareille (l attribut title risque de ne pas suffire )

26 Conclusion

27 Conclusion 71,8 % des utilisateurs de lecteur d écran en utilisent sur un périphérique mobile (source : Entre avril et septembre 2013, 54,2 % des Suisses ont utilisé un smartphone, 29,7 % une tablette (source : Les périphériques mobiles ont souvent un lecteur d écran fourni nativement Possibilité de connexion Bluetooth aux plages braille

28 Conclusion Le responsive Web design, c est bon, mangez-en! Les périphériques mobiles peuvent mettre aussi dans des situations de handicap Les critères d accessibilité sont toujours pertinents, quels que soient les supports de consultation Les périphériques mobiles et le responsive Web design apportent un éclairage renouvelé sur certains critères d accessibilité Le responsive Web design : opportunité de servir les mêmes contenus et les mêmes fonctionnalités, indépendamment du périphérique, illustrant l unicité et l universalité du Web L accessibilité du Web concerne des périphériques de plus en plus variés

29 Conclusion et ce n est pas fini!

30 Merci! Lien vers le support de présentation Crédits (Morgane Hervé, CC BY-NC-SA) (Morgane Hervé, CC BY-NC-SA) (ShakataNaGai, CC BY-SA) https://www.flickr.com/photos/chippee/ / (chippee, CC BY) (Evan-Amos, domaine public) https://www.flickr.com/photos/taedc/ / (Ted Eytan, CC BY-SA) Licence de ce support de présentation Creative Commons BY-SA

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

UN SITE WEB RESPONSIVE EN UNE HEURE?

UN SITE WEB RESPONSIVE EN UNE HEURE? UN SITE WEB RESPONSIVE EN UNE HEURE?! O N O R H C P TO Raphaël Goetter Raphaël Goetter alsacreations.fr alsacreations.com goetter.fr knacss.com mobitest.me @goetter EN UNE HEURE, VOUS AVEZ DIT?!? R E N

Plus en détail

Responsive Web Design. 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

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

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

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

Conformité RGAA du site internet du Plan PME Rhône-Alpes Rapport d évaluation

Conformité RGAA du site internet du Plan PME Rhône-Alpes Rapport d évaluation Conformité RGAA du site internet du Plan PME Rhône-Alpes Rapport d évaluation Site web évalué : http://planpme.rhonealpes.fr/ Date de l évaluation : 28 novembre 2014 Version du RGAA : RGAA 2.2 Equivalence

Plus en détail

Travaux dirigés n 10

Travaux dirigés n 10 Travaux dirigés n 10 IMAC 1 Responsive Web Design Dans ce TD, vous verrez comment concevoir un design web qui s adaptera au terminal sur lequel il sera visualisé. Avant-propos Avec l avènement des smartphones

Plus en détail

Conformité RGAA du site internet Bièvre Isère Communauté Rapport d évaluation

Conformité RGAA du site internet Bièvre Isère Communauté Rapport d évaluation Conformité RGAA du site internet Bièvre Isère Communauté Rapport d évaluation Site web évalué : http://bievre-isere.com Date de l évaluation : 30 mars 2015 Version du RGAA : RGAA 2.2 Equivalence de niveau

Plus en détail

Approche Design Méthodologie de conduite de sites web

Approche Design Méthodologie de conduite de sites web Approche Design Méthodologie de conduite de sites web Phase 02 Concevoir le site (C) Conception visuelle N. Vanassche www.nathalievanassche.be Phase 2 (C) : Conception visuelle Facilité d utilisation:

Plus en détail

Conformité RGAA du site internet de Massif-Central.eu Rapport d évaluation

Conformité RGAA du site internet de Massif-Central.eu Rapport d évaluation Conformité RGAA du site internet de Massif-Central.eu Rapport d évaluation Site web évalué : http://www.massif-central.eu/ Date de l évaluation : 13 octobre 2015 Version du RGAA : RGAA 2.2 Equivalence

Plus en détail

Prise en compte des handicaps

Prise en compte des handicaps Prise en compte des handicaps Stéphanie Jean-Daubias INFO Stephanie.Jean-Daubias - at - liris.univ-lyon1.fr http://liris.cnrs.fr/stephanie.jean-daubias/ L3 Plan du cours Prise en compte des handicaps Introduction

Plus en détail

Pour en expliquer le principe, on se limitera à deux exemples :

Pour en expliquer le principe, on se limitera à deux exemples : Les Media Queries permettent donc de cibler : Le type de média La taille de l'écran La taille de la fenêtre La résolution Le nombre de couleurs L'orientation Pour en expliquer le principe, on se limitera

Plus en détail

Conformité RGAA du site internet de la Ville de Pontcharra Rapport d évaluation

Conformité RGAA du site internet de la Ville de Pontcharra Rapport d évaluation Conformité RGAA du site internet de la Ville de Pontcharra Rapport d évaluation Site web évalué : http://villepontcharra.fr Date de l évaluation : 27 juillet 2012 Version du RGAA : RGAA 2.2 (dernière version

Plus en détail

HTML5 Quels enjeux pour la mobilité et le RIA?

HTML5 Quels enjeux pour la mobilité et le RIA? HTML5 Quels enjeux pour la mobilité et le RIA? Julien Roche Philippe Guédez Ludovic Garnier 2 Sommaire Evolution des usages du Web Applications mobiles multiplateformes Contributions d HTML5 au RIA Conclusion

Plus en détail

Conception Adaptative "Responsive Web Design"

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

Plus en détail

Responsive Web Design. Responsive Design avec HTML 5.0 et CSS3

Responsive Web Design. Responsive Design avec HTML 5.0 et CSS3 Ivan MADJAROV Responsive Design avec HTML 5.0 et CSS3 HTML5 CSS3 IvMad - 2013 2 La spécification CSS3 Media Queries (requêtes de media) définit les techniques pour adapter de feuilles de styles en fonction

Plus en détail

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

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

web Accessibilité Normes et bonnes pratiques pour des sites plus accessibles Armony Altinier Préface de Dominique Burger (BrailleNet)

web Accessibilité Normes et bonnes pratiques pour des sites plus accessibles Armony Altinier Préface de Dominique Burger (BrailleNet) Armony Altinier Préface de Dominique Burger (BrailleNet) web Accessibilité Normes et bonnes pratiques pour des sites plus accessibles Groupe Eyrolles, 2012, ISBN : 978-2-212-12889-5 Table des matières

Plus en détail

Applications iphone & Android Phone Technologie AppDeck - Offre Présence Digital news. agence moonseven www.moonseven.fr 1

Applications iphone & Android Phone Technologie AppDeck - Offre Présence Digital news. agence moonseven www.moonseven.fr 1 + Applications iphone & Android Phone Technologie AppDeck - Offre Présence Digital news agence moonseven www.moonseven.fr 1 + Un marché en pleine croissance 2 FOCUS Entre mars 2013 et mars 2014, le trafic

Plus en détail

Classilio Via 8 est l outil le plus simple et le plus facile à utiliser grâce à ses nouvelles fonctionnalités!

Classilio Via 8 est l outil le plus simple et le plus facile à utiliser grâce à ses nouvelles fonctionnalités! L équipe CLASSILIO est très fière de vous présenter sa toute nouvelle génération d outil de classe virtuelle/webconférence/webinar. En effet, Classilio Via 8 est la plus grosse évolution de notre outil

Plus en détail

Accessibilité et bonnes pratiques qualité dans les CMS

Accessibilité et bonnes pratiques qualité dans les CMS Accessibilité et bonnes pratiques qualité dans les CMS Rencontres Mondiales du Logiciel Libre 2 juillet 2008 Elie Sloïm Aurélien Levy 1 Elie Sloïm : Directeur de la société Formateur et consultant. Expert

Plus en détail

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

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

Plus en détail

Solution de publication digitale sur smartphones et tablettes pour tous vos documents

Solution de publication digitale sur smartphones et tablettes pour tous vos documents 2013 Solution de publication digitale sur smartphones et tablettes pour tous vos documents Document édité par Forecomm - Août2013 SOMMAIRE Découvrir la solution Qu est-ce que mymozzo? Processus de création

Plus en détail

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

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

Plus en détail

Pré-requis : Déroulé de cours : Moyens pédagogiques : Validation des aquis : Lieu : Horaires : Suivi post-formation :

Pré-requis : Déroulé de cours : Moyens pédagogiques : Validation des aquis : Lieu : Horaires : Suivi post-formation : Public : Toute personne chargée de concevoir ou de mettre à jour des contenus sur des sites Internet ou Intranet. Pré-requis : Maîtrise de l environement Mac ou Pc. Objectifs de la formation : Maîtriser

Plus en détail

Spécifications techniques

Spécifications techniques Infos pratiques Bon de commande: indication de réservation publicité Tablette + confirmation de livraison du matériel: envoyer à booking@trustmedia.be Matériel Papier: artwork@mediafin.be 2 jours ouvrables

Plus en détail

jquery Mobile (HTML5, CSS3, JavaScript) Développez vos applications Web mobiles

jquery Mobile (HTML5, CSS3, JavaScript) Développez vos applications Web mobiles Caractéristiques du Web mobile 1. Définition du Web mobile 13 2. Un marché en expansion 15 2.1 Multiples fabricants de smartphones et tablettes 15 2.2 Multiples OS 15 2.3 Multiples navigateurs 17 2.4 Évolutions

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

Rendu multi-support DOCUMENTATION

Rendu multi-support DOCUMENTATION DOCUMENTATION Rendu multi-support Jahia, le CMS open source de nouvelle génération apportant à vos projets la convergence applicative (web, document, social, recherche et portail) unifiée par la simplicité

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

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos. KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html

Plus en détail

LES BALISES AUDIO ET VIDÉO EN HTML5

LES BALISES AUDIO ET VIDÉO EN HTML5 LES BALISES AUDIO ET VIDÉO EN HTML5 Eskimon 29 octobre 2015 Table des matières 1 Introduction 5 2 Les balises audio et vidéo 7 2.1 Les balises audio et vidéo.............................. 7 2.2 Les éléments

Plus en détail

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 jquery Mobile La bibliothèque JavaScript pour le Web mobile É r i c S a r r i o n Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 1 Installation de jquery Mobile

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

Guide organisateur. Mettre en place Wisembly le jour J

Guide organisateur. Mettre en place Wisembly le jour J Guide organisateur Mettre en place Wisembly le jour J Sommaire 1. Comment réussir son installation? Bien préparer votre Wiz le Jour J Organiser votre plateforme Le matériel conseillé Réussir son installation

Plus en détail

Applications Smartphones : enjeux et perspectives pour les communautés de l'eglise Catholique. Application 1 Smartphone

Applications Smartphones : enjeux et perspectives pour les communautés de l'eglise Catholique. Application 1 Smartphone Applications Smartphone Applications Smartphones : enjeux et perspectives pour les communautés de l'eglise Catholique Application 1 Smartphone 23/01/2011 Patrice de Saint Steban École EPITA Ingénieur en

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

Qu est-ce qu un livre numérique?

Qu est-ce qu un livre numérique? Le livre numérique Ce tutoriel peut être utilisé comme une introduction au concours «Bookin avec nous». Il présente en quelques slides les différents concepts associés au livre numérique et permet de mieux

Plus en détail

CATALOGUE DES FORMATIONS

CATALOGUE DES FORMATIONS INSTALLATION Une équipe d experts informatiques dédiée à votre bien-être numérique. FORMATION MAINTENANCE CATALOGUE DES FORMATIONS Retrouvez tous les avis clients sur bdom.fr B dom est une entreprise de

Plus en détail

Responsive Web Design (RWD)

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

Plus en détail

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

IPHONE BANNIÈRE CLASSIQUE DIMENSIONS. Standard : 320 x 53 (portrait) 20Ko Jpeg/Gif/Png. HD : 640 x 106 (portrait) 20Ko Jpeg/Gif/Png DESCRIPTION

IPHONE BANNIÈRE CLASSIQUE DIMENSIONS. Standard : 320 x 53 (portrait) 20Ko Jpeg/Gif/Png. HD : 640 x 106 (portrait) 20Ko Jpeg/Gif/Png DESCRIPTION IPHONE BANNIÈRE CLASSIQUE DIMENSIONS Standard : 320 x 53 (portrait) 20Ko Jpeg/Gif/Png HD : 640 x 106 (portrait) 20Ko Jpeg/Gif/Png DESCRIPTION Format publicitaire très répandu et simple Permet une présence

Plus en détail

Richmedia Suite. Richmedia Suite. Créez vos présentations vidéo enrichies. empreinte.com. Téléchargez et testez nos logiciels sur empreinte.

Richmedia Suite. Richmedia Suite. Créez vos présentations vidéo enrichies. empreinte.com. Téléchargez et testez nos logiciels sur empreinte. Richmedia Suite Edition vidéo et médias Richmedia Suite, est une solution complète pour vos présentations : vidéo, médias, chapitres, mot clé, design, fichier joint, paramètres streaming. En quelques minutes

Plus en détail

Grille sommaire d'évaluation de l'accessibilité du Web (Développée par AccessibilitéWeb sous licence Creative Commons BY- NC- SA)

Grille sommaire d'évaluation de l'accessibilité du Web (Développée par AccessibilitéWeb sous licence Creative Commons BY- NC- SA) Grille sommaire d'évaluation de l'accessibilité du Web (Développée par AccessibilitéWeb sous licence Creative Commons BY- NC- SA) No. Validation Tests avec les outils Commentaires A Contenu non- textuels

Plus en détail

Atelier du 25 juin 2012. «Les bonnes pratiques dans l e-mailing» Club

Atelier du 25 juin 2012. «Les bonnes pratiques dans l e-mailing» Club Atelier du 25 juin 2012 «Les bonnes pratiques dans l e-mailing» Agenda de l atelier Introduction et rappel des bonnes pratiques Exemple et retour d expérience Maison Tasset Partage d expérience entre les

Plus en détail

CMS. O p e n - S. c o m 1/19

CMS. O p e n - S. c o m 1/19 CMS Accessibilité et CMS 1/19 Présentation Présentations Matthieu Faure, consultant accessibilité numérique www.open-s.com www.blog-accessibilite.com Et vous? Support de cours sous licence Creative Commons

Plus en détail

WordPress, thèmes et plugins : mode d'emploi

WordPress, thèmes et plugins : mode d'emploi WordPress, thèmes et plugins : mode d'emploi Sommaire 01 Faisons connaissance 1.1 Qui suis-je? 1.2 WordPress en 2 mots 1.3 Thème et plugin 02 Si je veux 03 Quelques extensions utiles 04 Comment chercher

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

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

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

Plus en détail

Conferencing Services. Web Meeting. Guide de démarrage rapide V5_FR

Conferencing Services. Web Meeting. Guide de démarrage rapide V5_FR Web Meeting Guide de démarrage rapide V5_FR Table des matières 1 INFORMATION PRODUIT... 3 1.1 GENERALITES... 3 1.2 SYSTEMES D EXPLOITATION ET LANGUES PRIS EN CHARGE... 3 1.3 FONCTIONS... 3 2 RESERVER UNE

Plus en détail

Interfaces Homme/Machine et ergonomie d un site web

Interfaces Homme/Machine et ergonomie d un site web Interfaces Homme/Machine et ergonomie d un site web Apprendre à réaliser une interface Homme/Machine web en HTML 5 et CSS 3.0, à la structurer et à optimiser son ergonomie Retrouvez ce cours sur http://iut.e-concept-applications.fr

Plus en détail

Nouveautés de la version 8. Les améliorations de la version 8 comprennent les suivantes:

Nouveautés de la version 8. Les améliorations de la version 8 comprennent les suivantes: Diapositive 1 Nouveautés de la version 8 Bienvenue aux Nouveautés de la version 8. Les diapositives suivantes décrivent les différences entre la version 7.7 et la version 8, ainsi que les nouvelles caractéristiques.

Plus en détail

Médiathèque Numérique, mode d emploi

Médiathèque Numérique, mode d emploi Médiathèque Numérique, mode d emploi 1) Inscription Sur la page d accueil du site, cliquez sur «Inscrivez-vous» Sélectionnez votre médiathèque sur le menu déroulant 1 Remplissez le formulaire d inscription,

Plus en détail

Guide d utilisation Version 1. Par Guide d utilisation de ViaMobile 1.0. www.sviesolutions.com

Guide d utilisation Version 1. Par Guide d utilisation de ViaMobile 1.0. www.sviesolutions.com Guide d utilisation Version 1 1 Par www.sviesolutions.com Table des matières Installation & accès... 3 Installation de l application Via Mobile... 4 Accéder à Via... 5 Application synchrone... 5 Les zones

Plus en détail

Interactive Print Content Module Quickstart Le lien entre vos imprimés et le monde numérique DOCUMENTATION UTILISATEUR

Interactive Print Content Module Quickstart Le lien entre vos imprimés et le monde numérique DOCUMENTATION UTILISATEUR Interactive Print Content Module Quickstart Le lien entre vos imprimés et le monde numérique DOCUMENTATION UTILISATEUR V 1.0 mai 2013 Table des matières Introduction 3 Prérequis 3 Connexion au système

Plus en détail

Comparaison entre la v6 et la v7 de BackupAssist

Comparaison entre la v6 et la v7 de BackupAssist Comparaison entre la v6 et la v7 de BackupAssist Table des matières 1. Les nouveautés de BackupAssist v7... 2 2. Tableau comparatif... 3 3. Systèmes d exploitation et environnements pris en charge Nouveau!...

Plus en détail

App vs. WebApp Best Of Mobile 5 avril 2012

App vs. WebApp Best Of Mobile 5 avril 2012 App vs. WebApp Best Of Mobile 5 avril 2012 La question! App ou Web App? APP versus WEBAPP Constats du marché 2. Modifiez le style du titre Marketing 3. Modifiez le style du titre Compatibilité Experience

Plus en détail

Utilisation Des Widgets ITEA

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

Plus en détail

Fiche technique Apple Configurator

Fiche technique Apple Configurator Fiche technique Apple Configurator SIDE Santé But du document : Expliciter l'utilisation d'apple Configurator dans le cadre du projet SIDE Santé à l'ujf Grenoble. Note : Version d'apple Configurator utilisée

Plus en détail

Guide sur l accessibilité numérique des ressources pédagogiques

Guide sur l accessibilité numérique des ressources pédagogiques Pistes et conseils, pour vous aider à mettre rapidement en œuvre sur votre cours AMeTICE un contenu accessible à un maximum d étudiants. Guide sur l accessibilité numérique des ressources pédagogiques

Plus en détail

Atelier pratique Accessibilité des documents PDF

Atelier pratique Accessibilité des documents PDF Atelier pratique Accessibilité des documents PDF WCAG 2.0 Introduction 4 principes : perceptible, utilisable, compréhensible, robuste 12 règles 61 critères de succès 3 niveaux : A, AA, AAA Abstraction

Plus en détail

Atelier numérique. Développement économique de Courbevoie. Internet / Extranet / Mobilité : Prospection et Support d'aide à la vente

Atelier numérique. Développement économique de Courbevoie. Internet / Extranet / Mobilité : Prospection et Support d'aide à la vente Atelier numérique Développement économique de Courbevoie Jeudi 21 mars 2013 Internet / Extranet / Mobilité : Prospection et Support d'aide à la vente Actualités et Informations juridiques Atelier numérique

Plus en détail

Démonstration de la mise en cache via HTML 5 sur iphone

Démonstration de la mise en cache via HTML 5 sur iphone Last update: 2011/08/18 21:46 wiki:devmobile:webapp:html5:presentation Démonstration de la mise en cache via HTML 5 sur iphone Overview Parmi les nouveautés du HTML 5, l une d elles est très intéressent

Plus en détail

Référentiel Général d Accessibilité pour les Administrations RGAA. Annexe 2 : Tests de conformité au RGAA

Référentiel Général d Accessibilité pour les Administrations RGAA. Annexe 2 : Tests de conformité au RGAA Référentiel Général d ccessibilité pour les dministrations RG nnexe 2 : Tests de conformité au RG Page 1/203 Cadres 1. Thématique Cadres 1.1. [Cadres] 1 : bsence de cadres non titrés Tout élément : frame

Plus en détail

Présentation de la nouvelle gamme professionnelle BRAVIA FY14

Présentation de la nouvelle gamme professionnelle BRAVIA FY14 Présentation de la nouvelle gamme professionnelle BRAVIA FY14 Sony FY14 Bravia B2B Ecrans discrets à cadre fin et à basse consommation d'énergie pour des applications économiques d'affichage dynamique,

Plus en détail

Positionnement produit Dernière mise à jour : avril 2011

Positionnement produit Dernière mise à jour : avril 2011 DCS-930L Caméra réseau domestique Wireless N avec mydlink Cas de figure d'utilisation Sécurité à domicile/dans les petits bureaux Garantie 2 ans Accroche marketing La caméra réseau domestique Wireless

Plus en détail

Tutorial Terminal Server sous

Tutorial Terminal Server sous Tutorial Terminal Server sous réalisé par Olivier BOHER Adresse @mail : xenon33@free.fr Site Internet : http://xenon33.free.fr/ Tutorial version 1a Page 1 sur 1 Index 1. Installation des services Terminal

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

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

Les licences lors de la création, le partage, et la publication d un document sur lyclic.fr

Les licences lors de la création, le partage, et la publication d un document sur lyclic.fr Les licences lors de la création, le partage, et la publication d un document sur lyclic.fr UNE PRESENTATION DE LYCLIC mai 2012 Le concept de lyclic.fr est de proposer une expérience documentaire communautaire,

Plus en détail

Le WEB: présentation

Le WEB: présentation Le WEB: présentation Introduction: définition(s), historique... Principes d'utilisation:. le système Hypertexte. le fonctionnement pratique Naviguer sur le Web, les bases. les principales fonctions d'un

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

Médiathèque Numérique, mode d emploi

Médiathèque Numérique, mode d emploi Médiathèque Numérique, mode d emploi 1) Se connecter au service Il vous suffit de vous rendre sur le site Internet de votre médiathèque, de vous connecter avec votre identifiant (numéro de carte abonné)

Plus en détail

Développement mobile «cross-platform»

Développement mobile «cross-platform» Développement mobile «cross-platform» Polytech Nice vendredi 17 octobre 2014 20.10.14 1 Au programme 1. A chaque projet sa techno 2. 1 code Plusieurs plateformes 3. La puissance de jquery sur mobile 4.

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

Les pré-requis pour créer un AVE Web

Les pré-requis pour créer un AVE Web Les pré-requis pour créer un AVE Web 1 Sommaire Spécificités de l export Web: conseils pour la création d un AVE Web!... 3 Autorisation Flash WebReader!... 3 Conseils génériques (également valable pour

Plus en détail

Solution de publication digitale sur smartphones et tablettes pour tous vos documents. Document édité par Forecomm - Avril 2013

Solution de publication digitale sur smartphones et tablettes pour tous vos documents. Document édité par Forecomm - Avril 2013 2013 Solution de publication digitale sur smartphones et tablettes pour tous vos documents Document édité par Forecomm - Avril 2013 sommaire Découvrir la solution Qu est-ce que mymozzo? Processus de création

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

DOKEOS Channel Manuel du formateur

DOKEOS Channel Manuel du formateur Retrouvez-nous en ligne sur notre site dokeos.com/fr DOKEOS Channel Manuel du formateur 01 Dokeos CHANNEL, l outil de partage de vos vidéos en ligne Retrouvez-nous en ligne sur dokeos.com/fr Dokeos CHANNEL

Plus en détail

Développement mobile «cross-platform»

Développement mobile «cross-platform» Développement mobile «cross-platform» Polytech Nice Vendredi 9 novembre 2012 11.11.13 1 / 24 Au programme 1. A chaque projet sa techno 2. 1 code Plusieurs plateformes 3. La puissance de jquery sur mobile

Plus en détail

L email responsive. Optimisez vos campagnes pour les smartphones Guillaume Fleureau»

L email responsive. Optimisez vos campagnes pour les smartphones Guillaume Fleureau» L email responsive Optimisez vos campagnes pour les smartphones Guillaume Fleureau» Sarbacane Software Editeur de solutions e-marketing Implantée à Lille et à Barcelone Société créée en 2001 40 collaborateurs

Plus en détail

Diffuser le contenu d'une tablette en classe

Diffuser le contenu d'une tablette en classe Diffuser le contenu d'une tablette en classe Sommaire Contexte...3. Architecture...3 2 Présentation des solutions retenues...4 2. Apple TV...4 2.2 Chromecast...4 3 Intégration dans un réseau d'établissement...5

Plus en détail

Les Ateliers Info Tonic

Les Ateliers Info Tonic Les Ateliers Info Tonic L accessibilité des sites web : mettre le web à disposition de tous Mardi 12 mars 2013 1 L'accessibilité des sites : mettre le web à disposition de tous Sébastien Huillet Expert

Plus en détail

Plan. Problématique développement mobile. Présentation web mobile. jquerymobile - présentation. Principes. Fonctionnement.

Plan. Problématique développement mobile. Présentation web mobile. jquerymobile - présentation. Principes. Fonctionnement. Plan Problématique développement mobile Présentation web mobile jquerymobile - présentation Principes Fonctionnement Illustration Avantages / Inconvénients Futures versions 1 Problématique développement

Plus en détail

CAHIER DES CHARGES. Refonte du Site : ToufikOulmi.com. 28/03/2012 - Cahier des charge «TOUFIKOULMI.COM» - S.LARVET

CAHIER DES CHARGES. Refonte du Site : ToufikOulmi.com. 28/03/2012 - Cahier des charge «TOUFIKOULMI.COM» - S.LARVET CAHIER DES CHARGES Refonte du Site : ToufikOulmi.com 1/20 SOMMAIRE 1- Contexte 2- Objectifs 3- Pérennité du site 4- Résultats attendus et publics visés 5- Contraintes 6- Délais 7- Benchmark 8- Les Contenus

Plus en détail

Attestation de conformité de «vie-publique.fr»

Attestation de conformité de «vie-publique.fr» Attestation de conformité de «vie-publique.fr» Identité du déclarant Direction de l'information légale et administrative 26 rue Desaix 75727 Paris Cedex 15 Date de la déclaration Cette déclaration a été

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 Introduction 1. Avant-propos 9 2. Ressources 10 3. Historique 12 3.1 HTML/CSS/JavaScript 12 3.2 Sur les appareils mobiles 16 Particularité des sites mobiles 1. Introduction 19 2. Comportement des utilisateurs

Plus en détail

Expériences professionnelles

Expériences professionnelles Expériences professionnelles Société : idnew-ilive (application SaaS à destination des restaurants pour smartphones et tablettes) PROJET PERSO Architecture et modélisation de données pour Web Front Architecture

Plus en détail

Médiathèque Numérique, mode d emploi

Médiathèque Numérique, mode d emploi Médiathèque Numérique, mode d emploi 1) Inscription Sur la page d accueil du site, cliquez sur «Inscrivez-vous» Remplissez le formulaire d inscription, et validez-le. 1 Votre inscription est alors bien

Plus en détail

Spétechs Mobile. D e r n i è r e m i s e à j o u r : a o û t 2014

Spétechs Mobile. D e r n i è r e m i s e à j o u r : a o û t 2014 Spétechs Mobile D e r n i è r e m i s e à j o u r : a o û t 2014 Généralités Envoi des créas à Amandine Canu, responsable traffic mobile : acanu@hi-media.com Mettre en copie de votre e-mail votre contact

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

WordPress : Guide à l édition

WordPress : Guide à l édition WordPress : Guide à l édition WordPress : Guide à l édition... 1 Présentation... 2 1. Accès au site... 2 2. Le tableau de bord... 2 3. Editez les contenus... 4 Quelle est la différence entre les pages

Plus en détail

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

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

Plus en détail

vous permet d agrandir la fenêtre Lync à la taille de votre écran.

vous permet d agrandir la fenêtre Lync à la taille de votre écran. Lync 2013 Lync 2013 est doté d un nouvel aspect qui vous aide à communiquer facilement et rapidement. Vous découvrirez également de nouvelles fonctionnalités, telles que les salles de conversation permanente,

Plus en détail

Vision. Descriptif général

Vision. Descriptif général Vision La vidéo est un support particulièrement apprécié par les entreprises et les universités pour faciliter le transfert du savoir. Par ailleurs, 95% des présentations dans le monde sont réalisées avec

Plus en détail

Créer des visites virtuelles avec Google Earth

Créer des visites virtuelles avec Google Earth Créer des visites virtuelles avec Google Earth Parmi les outils géomatiques, Google Earth se distingue par la possibilité de créer des parcours, des visites virtuelles et de les enregistrer sous forme

Plus en détail

Concevoir des interfaces pour les seniors: enjeu essentiel pour les informaticiens de demain

Concevoir des interfaces pour les seniors: enjeu essentiel pour les informaticiens de demain Concevoir des interfaces pour les seniors: enjeu essentiel pour les informaticiens de demain Isabelle MOTTE FUNDP Juin 2010 Licence Creative Commons by-nc-sa Accessibilité Votre définition? «L'accessibilité

Plus en détail

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

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

Plus en détail