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

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

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

Plus en détail

Responsive 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

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

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

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

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

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

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

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

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

Optimiser pour les appareils mobiles

Optimiser pour les appareils mobiles chapitre 6 Optimiser pour les appareils mobiles 6.1 Créer un site adapté aux terminaux mobiles avec jquery Mobile... 217 6.2 Transformer son site mobile en application native grâce à PhoneGap:Build...

Plus en détail

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

Introduction à HTML5, CSS3 et au responsive web design

Introduction à HTML5, CSS3 et au responsive web design 1 Introduction à HTML5, CSS3 et au responsive web design Jusqu à une période récente, les sites web étaient conçus avec une largeur fixe de l ordre de 960 pixels, en espérant que les visiteurs en tirent

Plus en détail

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

Design adaptatif. Guide de l utilisateur VIENNA LONDON MUNICH BERLIN PARIS HONG KONG MOSCOW ISTANBUL BEIJING ZURICH

Design adaptatif. Guide de l utilisateur VIENNA LONDON MUNICH BERLIN PARIS HONG KONG MOSCOW ISTANBUL BEIJING ZURICH Design adaptatif Guide de l utilisateur VIENNA LONDON MUNICH BERLIN PARIS HONG KONG MOSCOW ISTANBUL BEIJING ZURICH Contenu Définition... 3 Avantages... 3 Fonctionnalités... 5 Modèle de Design mobile...

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

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

Les tablettes. Présentation tablettes Descriptif Fournisseurs Caractéristiques Comparatifs Conseils Perspectives Démonstration

Les tablettes. Présentation tablettes Descriptif Fournisseurs Caractéristiques Comparatifs Conseils Perspectives Démonstration Les Tablettes Les tablettes Présentation tablettes Descriptif Fournisseurs Caractéristiques Comparatifs Conseils Perspectives Démonstration Les tablettes Description: Appareil mobile positionné entre smartphone

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

Media queries : gérer différentes zones de visualisation

Media queries : gérer différentes zones de visualisation 2 Media queries : gérer différentes zones de visualisation Comme nous l avons vu au chapitre précédent, les CSS3 sont constituées de modules. Media queries est simplement l un d eux. Ce module permet d

Plus en détail

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

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

Kofax Livre blanc. Technologie mobile d automatisation avancée pour la Comptabilité Fournisseurs. Résumé

Kofax Livre blanc. Technologie mobile d automatisation avancée pour la Comptabilité Fournisseurs. Résumé Kofax Livre blanc Livre blanc Kofax Technologie mobile d automatisation avancée pour la Comptabilité Fournisseurs Résumé De nos jours, l interaction en entreprise avec les applications métier disponibles

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

Les nouveaux comportements... 9

Les nouveaux comportements... 9 Sommaire Du téléphone portable au smartphone... 4 L apparition du smartphone... 4 Le marché français des smartphones... 6 Le smartphone vs. l ordinateur... 7 Les familles des périphériques... 8 Les nouveaux

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

La mobilité avec ArcGIS

La mobilité avec ArcGIS SIG 2012 - Conférence francophone Esri Versailles, France Atelier Technique - 4 Oct. 2012 La mobilité avec ArcGIS Ana de Latour Mehdi Huguet Agenda Le Système ArcGIS Qu est-ce qu un SIG mobile? A qui s

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

CONCEPTION D E-MAILS ADAPTATIFS

CONCEPTION D E-MAILS ADAPTATIFS CONCEPTION D E-MAILS ADAPTATIFS SELLIGENT Le contenu de ce manuel porte sur du matériel protégé par les droits d auteurs appartenant à Selligent. Ce manuel ne peut être ni reproduit, en tout ou en partie,

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

WINDOWS 10 Windows 10 fichiers dossiers OneDrive Cortana Photos Lecteur Windows Media Contacts Messagerie Calendrier Skype WINDOWS 10 Microsoft Edge

WINDOWS 10 Windows 10 fichiers dossiers OneDrive Cortana Photos Lecteur Windows Media Contacts Messagerie Calendrier Skype WINDOWS 10 Microsoft Edge WINDOWS 10 Table des matières L environnement Windows 10 i Généralités Windows 10 : les nouveautés................................ 9 Intérêts d utiliser un compte Microsoft........................ 18 Démarrer

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

12 novembre 2012 Montauban MOBILITÉ, APPLICATIONS ET SITES MOBILES

12 novembre 2012 Montauban MOBILITÉ, APPLICATIONS ET SITES MOBILES 12 novembre 2012 Montauban MOBILITÉ, APPLICATIONS ET SITES MOBILES POURQUOI LA MOBILITÉ? ÉVOLUTIONS SOCIÉTALES DES MIGRATIONS QUOTIDIENNES RESTER RELIÉ À SES COMMUNAUTÉS L INSTANTANÉITÉ ÉVOLUTIONS TECHNOLOGIQUES

Plus en détail

Guide de démarrage rapide de SystemTweaker

Guide de démarrage rapide de SystemTweaker Guide de démarrage rapide de SystemTweaker SystemTweaker est un outil fiable et convivial qui vous permet de personnaliser Windows selon vos préférences. Ce guide de démarrage rapide vous aide à installer

Plus en détail

Le courriel responsive Optimiser vos campagnes pour l affichage mobile

Le courriel responsive Optimiser vos campagnes pour l affichage mobile 1 Le courriel responsive Optimiser vos campagnes pour l affichage mobile SOMMAIRE Du téléphone portable au téléphone intelligent... 2 L apparition du téléphone intelligent... 2 Le téléphone intelligent

Plus en détail

Windows 8 Module 3 Cours windows8 Dominique Bulté Sal e Informatique de Cappel e la Grande novembre 2013

Windows 8 Module 3 Cours windows8 Dominique Bulté Sal e Informatique de Cappel e la Grande novembre 2013 Windows 8 Module 3 7. L'indispensable fonction «Paramètres du PC» (3/3) Nous voilà arrivé à la dernière étape de notre tour d horizon des nombreuses options du module Paramètres du PC. Cet outil permet

Plus en détail

Android 2.3 Gingerbread

Android 2.3 Gingerbread Android 2.3 Gingerbread Laurent Villain Le but de cette documentation est de permettre d utiliser à des fins professionnelles un smartphone avec l OS Android. Les appareils qui ont servi à cette expérimentation

Plus en détail

Contenu audio et vidéo

Contenu audio et vidéo 8 Contenu audio et vidéo Au sommaire de ce chapitre cc cc cc cc cc cc cc Incorporer du contenu vidéo Incorporer du contenu audio Rester raisonnable Prendre le contrôle sur le contenu Ajouter des sous-titres

Plus en détail

+33 (0)4 92 21 33 79 contact@social-box.fr www.social-box.fr. Sarl ISB Altipolis2 av. Du Général Barbot 05100 Briancon - France

+33 (0)4 92 21 33 79 contact@social-box.fr www.social-box.fr. Sarl ISB Altipolis2 av. Du Général Barbot 05100 Briancon - France Sarl ISB Altipolis2 av. Du Général Barbot 05100 Briancon - France SCHÉMA FONCTIONNEL * Projection vers smartphones et tablettes de votre interface en Appli par Wifi (10 à 100 mètres autour de la borne)

Plus en détail

Tutorial des barres d'outils dans Mozilla Firefox

Tutorial des barres d'outils dans Mozilla Firefox Version 2.1 24. septembre 2007 Tutorial des barres d'outils dans Mozilla Firefox Responsable du projet : Auteur : Collaborateurs : Marc Johannot Cide Cyrille Verdon, Pouly Romain TUTORIIAL Les barres d'outils

Plus en détail

Principales failles de sécurité des applications Web Principes, parades et bonnes pratiques de développement

Principales failles de sécurité des applications Web Principes, parades et bonnes pratiques de développement Guillaume HARRY l Contenu sous licence Creative Commons CC-BY-NC-ND Principales failles de sécurité des applications Web Principes, parades et bonnes pratiques de développement P. 2 1. Introduction 2.

Plus en détail

Responsive Design. Technologies du web. Stéphane Bouvry, 2014

Responsive Design. Technologies du web. Stéphane Bouvry, 2014 Responsive Design Technologies du web Stéphane Bouvry, 2014 1. Objectif Utilisation de CSS pour la mise en page 2. Diapos Le responsive design : http://goo.gl/dmh8is 3. Grille fluide Dans cette partie,

Plus en détail

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

Procédure d enregistrement

Procédure d enregistrement Procédure d enregistrement Quelques clics suffisent pour configurer l accès aux prestations offertes au Grand Conseil Prérequis > Une connexion Internet et un navigateur web récent > Votre téléphone mobile

Plus en détail

. Généralités 1. 1.2 La gestion des applications 13

. Généralités 1. 1.2 La gestion des applications 13 WINDOWS 8.1. Généralités 1 A- Introduction 1 B- Utiliser les fonctionnalités tactiles 2 C- Utiliser le clavier virtuel 4 D- Démarrer Windows 8 6 E- Description de la page Accueil de Windows 8 7 F- Afficher

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

Auteur LARDOUX Guillaume Contact guillaume.lardoux@epitech.eu Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA

Auteur LARDOUX Guillaume Contact guillaume.lardoux@epitech.eu Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA Auteur LARDOUX Guillaume Contact guillaume.lardoux@epitech.eu Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA Sommaire 1. Introduction 2. Installation 3. Fonctionnement 4. Développement 5. Démonstration 2

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

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

Présentation de Muse

Présentation de Muse Présentation de Muse J. ROMAGNY 1. CONSEILS... 4 2. INTERFACE... 5 A. CREATION DE SITE... 5 960 Grid System avec Muse... 6 B. PLAN DU SITE... 7 C. CONCEPTION (EDITION DES «MASTER PAGES» ET PAGES)... 8

Plus en détail

Du livre enrichi et de l EPUB 3

Du livre enrichi et de l EPUB 3 Assises Professionnelles du Livre A l heure du numérique 8 novembre 2011-14h00-18h00 Institut océanographique de Paris Du livre enrichi et de l EPUB 3 Les termes suivis d un astérisque sont définis dans

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

M2A Outil numérique d aide à la conception Formation 3DSmax. Partie 2 Formation à l outil. Enseignant: Simone walter

M2A Outil numérique d aide à la conception Formation 3DSmax. Partie 2 Formation à l outil. Enseignant: Simone walter Partie 2 Formation à l outil M2A Outil numérique d aide à la conception 6h -Présentation de l interface de 3DSmax: paramétrage de 3DS, organisation de l interface, fonction de navigation, fonction de création,

Plus en détail

A. L audit de l ergonomie 11. B. Quand réaliser un audit de l ergonomie? 11. C. Notions élémentaires 12. 1. Utilisabilité 12 2.

A. L audit de l ergonomie 11. B. Quand réaliser un audit de l ergonomie? 11. C. Notions élémentaires 12. 1. Utilisabilité 12 2. Chapitre 1 : Auditer l ergonomie du site web A. L audit de l ergonomie 11 B. Quand réaliser un audit de l ergonomie? 11 C. Notions élémentaires 12 1. Utilisabilité 12 2. Jakob Nielsen 12 D. Réaliser l

Plus en détail

http5000 Mag #1 Sites internet & applications mobiles Site internet pour la Croix-Rouge p. 8 Référencement On site / Off site

http5000 Mag #1 Sites internet & applications mobiles Site internet pour la Croix-Rouge p. 8 Référencement On site / Off site http5000 Mag #1 Sites internet & applications mobiles Site internet pour la Croix-Rouge p. 8 Référencement p.11 On site / Off site MyAppli pour les restaurants p.14 http5000 u création de site internet

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

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

Cours SPIP 2.0 pour rédacteur. 1. Présentation de SPIP. 2. Architecture d un site SPIP

Cours SPIP 2.0 pour rédacteur. 1. Présentation de SPIP. 2. Architecture d un site SPIP Cours SPIP 2.0 pour rédacteur L objectif de ce document est d apprendre à utiliser le logiciel SPIP en tant que rédacteur. Ce cours ne requiert aucune connaissance informatique préalable à part savoir

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

Comment choisir son smartphone?

Comment choisir son smartphone? + Comment choisir son smartphone? Sommaire Ø Critère n 1 : l ergonomie Ø Critère n 2 : le système d exploitation Ø Critère n 3 : les capacités techniques Ø Critère n 4 : la connectivité Ø Critère n 5 :

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

Norme d accessibilité pour l information et les communications. Comment rendre votre site Web plus accessible

Norme d accessibilité pour l information et les communications. Comment rendre votre site Web plus accessible Norme d accessibilité pour l information et les communications Comment rendre votre site Web plus accessible L accessibilité du Web bénéficie non seulement à des millions de personnes handicapées, mais

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

GUIDE D UTILISATION LA DEPECHE PREMIUM

GUIDE D UTILISATION LA DEPECHE PREMIUM www.ladepeche.fr/premium GUIDE D UTILISATION LA DEPECHE PREMIUM La version 100% numérique de La Dépêche du Midi 1 Madame, Monsieur, Ce guide a pour objectif de vous accompagner dans la prise en main de

Plus en détail

LES TABLETTES : GÉNÉRALITÉS

LES TABLETTES : GÉNÉRALITÉS LES TABLETTES : GÉNÉRALITÉS Fonctionnement Qu est-ce qu une tablette tactile? Une tablette tactile est un appareil doté d'un écran qui permet d'interagir simplement en touchant l'écran ou à l'aide d'un

Plus en détail

SYSTÈME DE SURVEILLANCE VIDÉO À DISTANCE

SYSTÈME DE SURVEILLANCE VIDÉO À DISTANCE SYSTÈME DE SURVEILLANCE VIDÉO À DISTANCE 1 CATALOGUE 2015 SOMMAIRE en bref... 3 Les services gratuits de la version standard Family... 4 Les différentes versions : les services supplémentaires par version...

Plus en détail

C-218-100-21 (1) SNC toolbox mobile. Manuel d application Version du logiciel 1.00. 2015 Sony Corporation

C-218-100-21 (1) SNC toolbox mobile. Manuel d application Version du logiciel 1.00. 2015 Sony Corporation C-218-100-21 (1) SNC toolbox mobile Manuel d application Version du logiciel 1.00 2015 Sony Corporation Présentation SNC toolbox mobile est une visionneuse qui permet d afficher les images d une caméra

Plus en détail

Le livre numérique. Découverte des nouveaux supports de lecture. Image Elliot Lepers - CC-BY-SA-NC

Le livre numérique. Découverte des nouveaux supports de lecture. Image Elliot Lepers - CC-BY-SA-NC Le livre numérique Découverte des nouveaux supports de lecture Image Elliot Lepers - CC-BY-SA-NC Livre numérique : petite histoire des usages L'édition d'avril 1935 du magazine anglais 'Everyday science

Plus en détail

Fiche d identité produit

Fiche d identité produit Fiche d identité produit Référence DCS-5220 Désignation Caméra réseau sans fil panoramique et inclinable Clientèle cible Garantie 2 ans Particuliers Petites et moyennes entreprises Accroche marketing La

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

Routeur Gigabit WiFi AC 1200 Dual Band

Routeur Gigabit WiFi AC 1200 Dual Band Performance et usage AC1200 Vitesse WiFi AC1200-300 + 867 Mbps Couverture Wi-Fi dans toute la maison 1200 DUAL BAND 300+900 RANGE Idéal pour connecter de nombreux périphériques WiFi au réseau Application

Plus en détail

Spétechs Mobile. Octobre 2013

Spétechs Mobile. Octobre 2013 Spétechs Mobile Octobre 2013 Appli ios Appli Android Site Mobile Les clicks URL Appli ios Créa en dur HTML5 Créa en dur Banner Interstitiel Interstitiel Vidéo Bouncing / traveling Image Bouncing / traveling

Plus en détail

DEL 60 PO PLEINE HD. Écran 15,6 po 500 Go mémoire Caméra web Windows 8

DEL 60 PO PLEINE HD. Écran 15,6 po 500 Go mémoire Caméra web Windows 8 Écran 10.5 résolution de 2560 x 1600p Processeur Quad Core SnapDragon 801 et une RAM de 2 Go Contraste de 100 000 : 1 Partage d écran en simultané Lecteur d empreintes digitales Connectez votre PC à votre

Plus en détail

DÉVELOPPEMENT ANDROID

DÉVELOPPEMENT ANDROID DÉVELOPPEMENT ANDROID ESIEE / Key Consulting Partie 2 v2.2-2012 INTENT Key Consulting INTENT Intent : intention Une Intent est une agrégation d informations, décrivant de manière abstraite une action devant

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

BIBLIOTHEQUE NOMADE. PressReader dans les Bibliothèques de la Ville de Lausanne

BIBLIOTHEQUE NOMADE. PressReader dans les Bibliothèques de la Ville de Lausanne BIBLIOTHEQUE NOMADE PressReader dans les Bibliothèques de la Ville de Lausanne Table des matières 1. Connectez-vous à Internet 2. Découvrez PressReader 3. Connectez-vous au Hotspot 4. Trouvez votre revue

Plus en détail

À qui s adresse ce livre? Suppléments web. Remerciements

À qui s adresse ce livre? Suppléments web. Remerciements Avant propos Le marché de la géolocalisation est en pleine effervescence, comme le prouve l annonce de lancement par Facebook, en août 2010, de son service Places, qui permet de partager sa position géographique

Plus en détail

Foire aux questions sur Christie Brio

Foire aux questions sur Christie Brio Foire aux questions sur Christie Brio Qu est-ce que Christie Brio? Christie Brio est une solution de collaboration et de présentation compatible réseau qui permet à plusieurs utilisateurs de partager,

Plus en détail

Firefox pour Android. Guide de l utilisateur. press-fr@mozilla.com

Firefox pour Android. Guide de l utilisateur. press-fr@mozilla.com Firefox pour Guide de l utilisateur press-fr@mozilla.com Table des matières À propos de Mozilla Firefox pour... 3 Prise en main... 4 Mise à niveau de la navigation mobile... 5 Déplacez-vous à la Vitesse

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

Manuel d utilisation

Manuel d utilisation Manuel d utilisation Avant d utiliser votre produit, veuillez lire attentivement les instructions d utilisation présentées dans ce manuel. L objectif de ce manuel est de vous familiariser avec les caractéristiques

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

Les pages suivantes présenteront : I. Le téléchargement et l installation du navigateur. II. L utilisation de Pep s à l aide de ce navigateur.

Les pages suivantes présenteront : I. Le téléchargement et l installation du navigateur. II. L utilisation de Pep s à l aide de ce navigateur. Les espaces professeurs et élèves de Pep s ont été développés à l aide de l outil «Flash / Flex», qui permet de fournir des moteurs d exercices aux fonctionnalités riches, mais ne peut pas être lu nativement

Plus en détail

Comment télécharger et

Comment télécharger et Dispositifs de lecture numérique Comment télécharger et lire un livre numérique sur tablette et liseuse? Par souci de synthèse nous retiendrons ici les modèles de tablettes et liseuses les plus utilisés

Plus en détail

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

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

Plus en détail

Les règles du contrôleur de domaine

Les règles du contrôleur de domaine Les règles du contrôleur de domaine Menu démarrer et barre des taches Supprimer le dossier des utilisateurs du menu Démarrer Désactiver et supprimer les liens vers Windows Update Supprimer le groupe de

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

Echosgraphik. Ce document sert uniquement à vous donner une vision sur ma manière de travailler et d appréhender un projet

Echosgraphik. Ce document sert uniquement à vous donner une vision sur ma manière de travailler et d appréhender un projet Echosgraphik Ce document sert uniquement à vous donner une vision sur ma manière de travailler et d appréhender un projet Présentation I. Echosgraphik Protocoles de travail I. Développement du site II.

Plus en détail

PC, Tablette, Smartphone, comment choisir ce qui me convient le mieux?

PC, Tablette, Smartphone, comment choisir ce qui me convient le mieux? PC, Tablette, Smartphone, comment choisir ce qui me convient le mieux? WEB Recherche d information E commerce E banking Mail Chat / Vidéo conférence Apprendre, se former Partager > réseaux sociaux Jouer

Plus en détail

Dans la série. présentés par le site FRAMASOFT

Dans la série. présentés par le site FRAMASOFT Dans la série Les tutoriels libres présentés par le site FRAMASOFT CRÉER DES EXERCICES AVEC JCLIC-AUTHOR Logiciel: JClic-author Plate-forme(s): Linux, Windows, Mac OS X Version: 0.1.1.9 Licence: GNU General

Plus en détail

Le touristonaute en mobilité

Le touristonaute en mobilité COMPÉTENCES TOURISME 2011-2012 Les Rencontres Le touristonaute en mobilité Pierre Croizet Objet de l intervention Contexte de la mobilité en tourisme Benchmark des bonnes pratiques Recommandations stratégiques

Plus en détail

a CONserVer a CONserVer COde d activation pack FNaC pc sécurité & ClOud COde d activation protection android

a CONserVer a CONserVer COde d activation pack FNaC pc sécurité & ClOud COde d activation protection android a CONserVer COde d activation pack FNaC pc sécurité & ClOud a CONserVer COde d activation protection android merci d avoir choisi le pack fnac sécurité pc & Cloud edition premium 2013! La Fnac a sélectionné

Plus en détail

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

Applications smartphones : enjeux et perspectives pour les communautés de l'eglise Catholique. Application Smartphone 1 Applications Smartphone Applications smartphones : enjeux et perspectives pour les communautés de l'eglise Catholique Application Smartphone 1 Patrice de Saint Stéban Ingénieur en Informatique École EPITA

Plus en détail

Manuel d utilisation

Manuel d utilisation Photo non contractuelle Manuel d utilisation Avant d utiliser votre produit, veuillez lire attentivement les instructions d utilisation présentées dans ce manuel. L objectif de ce manuel est de vous familiariser

Plus en détail