Responsive Web Design. Responsive Design avec HTML 5.0 et CSS3

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

Download "Responsive Web Design. Responsive Design avec HTML 5.0 et CSS3"

Transcription

1 Ivan MADJAROV Responsive Design avec HTML 5.0 et CSS3 HTML5 CSS3 IvMad La spécification CSS3 Media Queries (requêtes de media) définit les techniques pour adapter de feuilles de styles en fonction du périphérique Web utilisé. Cette pratique est nommé "Responsive Web Design", pour dénoter qu'il s'agit d'adapter dynamiquement le Web design à l'aide de CSS. La méthode permet d'exploiter les avantages de la séparation du contenu et de la forme (présentation): On peut satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité d'un site Web par des navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc.

2 HTML5 CSS3 IvMad 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 Fonctionne avec les navigateurs: Chrome Safari Firefox MSIE 9 Opéra HTML5 CSS3 IvMad Les directives peuvent être intégrées au sein même d'une feuille de style grâce à une suivie directement du type. L'exemple suivant évite l'impression des menus, entête et des informations non propres au contenu de la page print { #menu, #footer, aside { display:none; font-size:120%; color:black;

3 HTML5 CSS3 IvMad L'attribut media peut prendre les valeurs suivantes : screen - Écrans handheld - Périphériques mobiles ou de petite taille print - Impression aural (CSS 2.0) / speech (CSS 2.1) - Synthèses vocales braille - Plages braille embossed - Imprimantes braille projection - Projecteurs (ou présentations avec slides) tty - Terminal/police à pas fixe tv - Téléviseur HTML5 CSS3 IvMad Une media query est une expression dont la valeur est toujours vraie ou fausse. Il suffit d'associer les différentes déclarations possibles avec un opérateur logique pour définir l'ensemble des conditions à réunir pour l'application des styles compris dans le bloc adjacent. Les opérateurs logiques peuvent être: and, only et not. Pour obtenir l'équivalent du "ou", il suffit d'énumérer différentes media queries à la suite, séparées par des virgules. L'exemple suivant cible les écrans de largeur inférieure à 640 pixels et supérieure à 200 pixels grâce à la règle max-width associée à la valeur screen and (min-width: 200px) and (max-width: 640px) {.bloc { display:block; clear:both;

4 HTML5 CSS3 IvMad color - support de la couleur (bits/pixel) color-index - périphérique utilisant une table de couleurs indexées aspect-ratio - ratio du périphérique de sortie (par exemple 16/9) device-aspect-ratio - ratio de la zone d'affichage device-height - dimension en hauteur du périphérique device-width - dimension en largeur du périphérique grid - périphérique bitmap ou grille (ex : lcd) height - dimension en hauteur de la zone d'affichage monochrome - périphérique monochrome ou niveaux de gris (bits/pixel) orientation - orientation du périphérique (portait ou landscape) resolution - résolution du périphérique (en dpi, dppx, ou dpcm) scan - type de balayage des téléviseurs (progressive ou interlace) width - dimension en largeur de la zone d'affichage HTML5 CSS3 IvMad Un exemple qui suit la largeur de l'écran. On déclare la couleur de fond (background-color) du body blanche, On déclare une couleur noire pour tout écran (screen) ayant une taille maximum (max-width) de 800px: background-color:white; only screen and (max-width:800px) { background-color:black; color:white [Test] Avec max-device-width, on peut cibler l'écran. Concerne les Smartphones.

5 HTML5 CSS3 IvMad HTML5: le cours en ligne

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

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

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

Travaux dirigés n 10

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

Plus en détail

RESPONSIVE WEB DESIGN

RESPONSIVE WEB DESIGN RESPONSIVE WEB DESIGN Une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives Ivan MADJAROV Arnaud FÉVRIER Comment consulte-t-on le

Plus en détail

RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite?

RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite? RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite? Medialibs, votre partenaire digital Quoi? Un partenaire pour une gestion globale du digital (un laboratoire R&D, éditeur de logiciels

Plus en détail

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

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

Zen, SASS, responsive design

Zen, SASS, responsive design , SASS, responsive design Felip Manyer i Ballester Res Telæ 21 mai 2013 Felip Manyer i Ballester, SASS, responsive design 1/36 Plan 1 Créer un thème sous Drupal Généralités Concepts à mettre en œuvre Typologie

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 Web design, périphériques mobiles et accessibilité

Responsive Web design, périphériques mobiles et accessibilité Responsive Web design, périphériques mobiles et accessibilité Qui suis-je? Victor Brito Situé près de Paris, dans la France non voisine Intégrateur HTML / CSS freelance Expert Accessiweb en évaluation

Plus en détail

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

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15 .. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles

Plus en détail

HTML5 et CSS3 pour des sites Responsive Web Design

HTML5 et CSS3 pour des sites Responsive Web Design Chapitre 1 : Introduction A. Le design Web aujourd'hui 11 B. Le Responsive Web Design 11 C. Les approches dans la conception 12 D. Le lâcher-prise 12 E. Les objectifs du livre 13 F. Les outils de l intégrateur

Plus en détail

JPEG, PNG, PDF, CMJN, HTML, Préparez-vous à communiquer!

JPEG, PNG, PDF, CMJN, HTML, Préparez-vous à communiquer! JPEG, PNG, PDF, CMJN, HTML, Préparez-vous à communiquer! 1 / Contexte L ordinateur La loi du nombre La numérisation = codage d une information en chiffres binaire : 0 1 («bit») 8 bits = 1 octet 1ko = 1024

Plus en détail

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations

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

Les unités de taille des polices de caractères

Les unités de taille des polices de caractères Les unités de taille des polices de caractères Deux systèmes permettent d'indiquer les dimensions des éléments en CSS : les unités de taille fixe et les unités de taille relative. C'est la propriété font-size

Plus en détail

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

Présentation du Framework BootstrapTwitter

Présentation du Framework BootstrapTwitter COUARD Kévin HELVIG-LARBRET Blandine Présentation du Framework BootstrapTwitter IUT Nice-Sophia LP-SIL IDSE Octobre 2012 Sommaire I. INTRODUCTION... 3 Définition d'un framework... 3 A propos de BootstrapTwitter...

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

E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE

E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE mcbenveniste@gmail.com 09/2013 E-MAILING & NEWSLETTER L e-mailing consiste à envoyer des emails simultanément à un nombre important de destinataires dont le

Plus en détail

1 Module 1 : feuille de style, position des blocs, nombre d éléments

1 Module 1 : feuille de style, position des blocs, nombre d éléments Plugin d'habillage d'eva-web 4 Le plugin d'habillage d'eva-web permet de : adapter la position, la taille des divers éléments la composant choisir les couleurs de fonds des divers secteurs choisir la taille,

Plus en détail

LE POSITIONNEMENT CSS. Quelques notions essentielles

LE POSITIONNEMENT CSS. Quelques notions essentielles LE POSITIONNEMENT CSS Quelques notions essentielles Pour éviter ça....element{ padding: 15px; width: 98.32%; /* pas compris, mais ça déborde à 98.33% */ position: relative; /* faut pas enlever */ overflow:

Plus en détail

Introduction à Expression Web 2

Introduction à Expression Web 2 Introduction à Expression Web 2 Définitions Expression Web 2 est l éditeur HTML de Microsoft qui répond aux standard dew3c. Lorsque vous démarrez le logiciel Expression Web 2, vous avez le choix de créer

Plus en détail

La mise en page web, feuille de style, cadre.

La mise en page web, feuille de style, cadre. La mise en page web, feuille de style, cadre. L importance du navigateur, son rôle est de lire le code HTML et CSS afin d afficher un résultat visuel à l écran, le problème est que les navigateurs n affichent

Plus en détail

Programme de Formation Open Office Base Fonctions avancées

Programme de Formation Open Office Base Fonctions avancées ENVIRONNEMENT GÉNÉRALITÉS Lancer Microsoft Excel 2010 Quitter Microsoft Excel 2010 Découvrir la fenêtre de l'application Excel 2010 Découvrir la fenêtre du classeur Utiliser le ruban Découvrir l'onglet

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

Bac Professionnel Systèmes Electroniques Numériques

Bac Professionnel Systèmes Electroniques Numériques DR - Création d un site WEB TP Le HTML Pour créer un site web, on doit indiquer des informations à l'ordinateur. Il ne suffit pas de taper simplement le texte qu'il y aura dans son site, il faut aussi

Plus en détail

Grille fluide. Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design

Grille fluide. Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design Grilles Fluides CSS CREATION D UNE GRILLE FLUIDE Grille fluide Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design WWW.SUTTERLITY.FR

Plus en détail

WEB. Travailler la résolution de vos pages

WEB. Travailler la résolution de vos pages GÉRER LES PAGES WEB Vous avez appris dans les sections 2 et 3 à créer le contenu textuel et graphique de vos pages Web. Cette section explique comment utiliser FrontPage pour placer des objets sur une

Plus en détail

Définitions. CSS Cascading Style Sheets Feuilles de style en cascade. FTP File Transfer Protocol Protocole de transfert de fichiers

Définitions. CSS Cascading Style Sheets Feuilles de style en cascade. FTP File Transfer Protocol Protocole de transfert de fichiers Introduction Ma première page Web (2/2) Ce document est l'étape 2 d'un didacticiel qui a pour but de donner un aperçu de la création d'une page Web. Une ou deux pages seront créées et présenteront leur

Plus en détail

Guide d'utilisation. OpenOffice Calc. AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons

Guide d'utilisation. OpenOffice Calc. AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons Guide d'utilisation OpenOffice Calc AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons 1 Table des matières Fiche 1 : Présentation de l'interface...3 Fiche 2 : Créer un nouveau classeur...4

Plus en détail

Contenu de l atelier. Internet Androïd

Contenu de l atelier. Internet Androïd Contenu de l atelier Internet...1 Adresse Web...1 Les navigateurs web...2 Ouvrir le navigateur Chrome...2 Fermer le navigateur Chrome...2 Fonctionnement du navigateur Chrome...2 Description des icônes...2

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

Traitement numérique de l'image. Raphaël Isdant - 2009

Traitement numérique de l'image. Raphaël Isdant - 2009 Traitement numérique de l'image 1/ L'IMAGE NUMÉRIQUE : COMPOSITION ET CARACTÉRISTIQUES 1.1 - Le pixel: Une image numérique est constituée d'un ensemble de points appelés pixels (abréviation de PICture

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

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

Introduction aux feuilles de styles

Introduction aux feuilles de styles Introduction aux feuilles de styles 1. Introduction Cette technologie a été introduite par Microsoft avec la version 3.0 (1996) avec pour but de modifier le contenu d'une page par une grande variété d'effets

Plus en détail

1 OpenOffice.org 3.0... 15

1 OpenOffice.org 3.0... 15 1 OpenOffice.org 3.0... 15 1.1. Lancer l application générale... 16 1.2. Démarrer une application spécifique d OpenOffice.org... 19 Créer un raccourci sur le Bureau... 20 1.3. Les barres principales...

Plus en détail

OneDrive, le cloud de Microsoft

OneDrive, le cloud de Microsoft OneDrive est le cloud mis à disposition par Microsoft. Pour en profiter, il suffit de disposer d'un compte Microsoft (Tutoriel), Microsoft offre 10 Go de stockage (Dont 3 Go pour sauvegarder des photos).

Plus en détail

Création de maquette web

Création de maquette web Création de maquette web avec Fireworks Il faut travailler en 72dpi et en pixels, en RVB Fireworks étant un logiciel dédié à la création de maquettes pour le web il ne propose que les pixels pour le texte

Plus en détail

Formation Drupal pour développeur

Formation Drupal pour développeur Formation Drupal pour développeur 3 jours pour maîtriser Drupal Makemeweb Avenvue G Poels, 8 10 1160 Auderghem Page 1/5 1 Introduction Le but de cette formation est que ses participants soient capables

Plus en détail

Parcours FOAD Formation EXCEL 2010

Parcours FOAD Formation EXCEL 2010 Parcours FOAD Formation EXCEL 2010 PLATE-FORME E-LEARNING DELTA ANNEE SCOLAIRE 2013/2014 Pôle national de compétences FOAD Formation Ouverte et A Distance https://foad.orion.education.fr Livret de formation

Plus en détail

Développement Web pour mobiles

Développement Web pour mobiles Développement Web pour mobiles Les bases du HTML par Eric Sarrion Date de publication : 11/08/2010 Dernière mise à jour : Le langage HTML est le langage de base permettant de construire des pages web,

Plus en détail

Activation et personnalisation de votre site mobile

Activation et personnalisation de votre site mobile Activation et personnalisation de votre site mobile Page 1 / 1 Table des matières 1. Activation de la version mobile 3 2. Personnalisation de la version mobile : premiers pas 2.1. Apparence générale et

Plus en détail

Normes techniques 2011

Normes techniques 2011 Normes techniques 2011 Display classique Formats Livrables Footer p 2 p 3 p 4 Opérations spéciales Publi-rédactionnel Jeu concours Quiz Lien partenaire Habillage Accueil panoramique Sponsoring de rubrique

Plus en détail

Marie-eve TREMBLAY GROUPE B. Rapport de synthèse : Le responsive web design, CSS3 et HTML5. Apprentissage autonome 582-FXA-06

Marie-eve TREMBLAY GROUPE B. Rapport de synthèse : Le responsive web design, CSS3 et HTML5. Apprentissage autonome 582-FXA-06 Marie-eve TREMBLAY GROUPE B Rapport de synthèse : Le responsive web design, CSS3 et HTML5 Apprentissage autonome 582-FXA-06 Département des Techniques de communication Programme des Techniques d'intégration

Plus en détail

Scolasite.net, le créateur de site web au service des enseignants. Guide d'administration du site Internet. Page 1

Scolasite.net, le créateur de site web au service des enseignants. Guide d'administration du site Internet. Page 1 Guide d'administration du site Internet Page 1 Scolasite permet de créer rapidement un site Internet, sans connaissances techniques particulières. Spécialement destiné aux établissements scolaires, son

Plus en détail

1. La notion de cascade

1. La notion de cascade HTML 5 et CSS 3 (partie 2) Objectifs Connaître quelques notions avancées de CSS 3, Appréhender l affichage, Introduction au Responsive Web Design. 1. La notion de cascade On constate que l on peut avoir

Plus en détail

EXCEL 2003 NIVEAU 1 Page 1

EXCEL 2003 NIVEAU 1 Page 1 EXCEL 2003 NIVEAU 1 Page 1 EXCEL 2003 NIVEAU 1 Page 2 TABLE DES MATIERES I. DEMARRER EXCEL 2003...4 1. EXCEL: qu est-ce?...4 2. Démarrer EXCEL...4 3. Afficher/masquer des barres d'outils...4 II. Page CREER

Plus en détail

Une interface moderne et multi devices avec Drupal Focus sur Omega

Une interface moderne et multi devices avec Drupal Focus sur Omega Une interface moderne et multi devices avec Drupal Focus sur Omega Romain Jarraud Formateur / consultant Drupal Anne- Sophie Picot Chef de projets Publier du contenu aujourd hui > Plateformes de consultation

Plus en détail

Canon Mobile Printing Premiers pas

Canon Mobile Printing Premiers pas Canon Mobile Printing Premiers pas Vérifiez l'environnement de connexion réseau. Le terminal Android doit être connecté à un point d'accès réseau sans fil. Le point d'accès et l'imprimante que vous utilisez

Plus en détail

Tutoriel : Feuille de style externe

Tutoriel : Feuille de style externe Tutoriel : Feuille de style externe Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU. Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche?

Plus en détail

Télécommande. Manuel français. Version 03.05.04

Télécommande. Manuel français. Version 03.05.04 Télécommande Manuel français Version 03.05.04 Sommaire La télécommande....3 Le Remote Control Editor... 3 Installation.... 3 Le menu... 4 Les Command sets (jeux d'instructions)... 5 1. Sélectionner l'application...

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

Développement Web INITITIATION AU DEVELOPPEMENT WEB ET PRESENTATION DES DIFFERENTES SOLUTIONS POSSIBLES POUR LA MISE EN PLACE D'UN SITE WEB

Développement Web INITITIATION AU DEVELOPPEMENT WEB ET PRESENTATION DES DIFFERENTES SOLUTIONS POSSIBLES POUR LA MISE EN PLACE D'UN SITE WEB Développement Web INITITIATION AU DEVELOPPEMENT WEB ET PRESENTATION DES DIFFERENTES SOLUTIONS POSSIBLES POUR LA MISE EN PLACE D'UN SITE WEB Olivier Allaert 1 Développement Web Développement Web Principe

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

LANGAGUE JAVA. Public Développeurs souhaitant étendre leur panel de langages de programmation

LANGAGUE JAVA. Public Développeurs souhaitant étendre leur panel de langages de programmation ING 01 LANGAGUE JAVA Durée : 21 heures 1090 HT / jour Dates : à définir en 2012 Concevoir et développer des programmes en langage Java Comprendre le fonctionnement de la machine virtuelle S approprier

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

Mathématiques/Sciences Physiques Séance N 8 Codage d une image numérique

Mathématiques/Sciences Physiques Séance N 8 Codage d une image numérique Mathématiques/Sciences Physiques Séance N 8 Codage d une image numérique INTRODUCTION Une image numérique est un ensemble discret de points appelés PIXELS (contraction de PICTure ELements). Elle a pour

Plus en détail

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE Session découverte La Gestion des photos avec Windows Vista / Windows 7 et le traitements d images numériques 1 Généralités sur le jargon de l image numérique

Plus en détail

Services internet gratuits. La PICASA Google avec son espace client. Cliquez ici

Services internet gratuits. La PICASA Google avec son espace client. Cliquez ici avec son espace client. Cliquez ici Il convient de régler vos paramètres. Cliquez Ici Par défaut c est votre identifiant qui est repris.. Vous pouvez ajoutez une photo en la sélectionnant parmi celles

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

HTML 5. Page de base Meta Outils pour Firefox. Les commentaires Paragraphe et saut de ligne Listes simples et ordonnées Listes imbriquées

HTML 5. Page de base Meta Outils pour Firefox. Les commentaires Paragraphe et saut de ligne Listes simples et ordonnées Listes imbriquées HTML 5 Page de base Meta Outils pour Firefox Les commentaires Paragraphe et saut de ligne Listes simples et ordonnées Listes imbriquées Les 6 niveaux de titre Indices et exposants Les liens L arborescence

Plus en détail

Concepteur réalisateur graphique

Concepteur réalisateur graphique FORMATIONS PRINT Concepteur réalisateur graphique Durée 142 jours (994h) Objectifs A la fin de cette formation, les participants auront acquis les connaissances leur permettant d être capable de : - avoir

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

ANNEXE 2a : plus loin avec CSS, notion de boite

ANNEXE 2a : plus loin avec CSS, notion de boite ANNEXE 2a : plus loin avec CSS, notion de boite Tout contenu d'une balise HTML se représente à l'écran sous forme d'une boite. Cette boite est composée de 3 éléments : un conteneur, une marge intérieure

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

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

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

Bureautique Initiation Excel-Powerpoint

Bureautique Initiation Excel-Powerpoint Module de Formation Personnalisée : Bureautique Initiation Excel-Powerpoint Durée : jours ouvrables Prix : Formation personnalisée en vue d obtenir les notions de base indispensables pour : Excel Office

Plus en détail

Syntaxe CSS 4 Jeu de règles... 4 Propriétés et valeurs... 4 Les sélecteurs... 4 Exemples sur les sélecteurs... 8

Syntaxe CSS 4 Jeu de règles... 4 Propriétés et valeurs... 4 Les sélecteurs... 4 Exemples sur les sélecteurs... 8 Cours CSS 2013 tv - v.1.1 Sommaire Introduction aux feuilles de style 2 Constituants des pages web..................................... 2 Définition...............................................

Plus en détail

Exporter (2) Ouvrir/Enregistrer Importer/Exporter (3)

Exporter (2) Ouvrir/Enregistrer Importer/Exporter (3) Formats de fichier Une des choses la plus difficile est de passer d'un logiciel à l'autre. Ils sont parfois plus ou moins compatibles. Certains logiciels «préfèrent» certains formats de fichier. Le tableau

Plus en détail

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

HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles 46 HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles enfin deux points importants pour les sites mobiles, les nouveautés sur les formulaires ainsi que le mode hors-ligne. 2. Bonnes

Plus en détail

Formation HTML / CSS. ar dionoea

Formation HTML / CSS. ar dionoea Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations

Plus en détail

Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées?

Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées? Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites Quelles solutions peuvent être employées? Présentation d une des solutions Conclusion Aujourd hui le web est

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

Utilisation de XnView

Utilisation de XnView http://www.rakforgeron.fr 27/02/2015 Utilisation de XnView Les photos d'actes généalogiques, les scans de documents réalisés par vous, ou vos saisies d'écran de documents téléchargés sur Internet, au-delà

Plus en détail

Formation Tutorée A Distance (FTAD) en BUREAUTIQUE

Formation Tutorée A Distance (FTAD) en BUREAUTIQUE Durée : 20 heures (Sur 2 mois maximum) Positionnement et parcours individuel de formation. Plate-forme de formation incluant cours, exercices et évaluation en ligne, disponibles 24 H/24, 7 j/7. 4 cours

Plus en détail

Nouveautés SAP NetWeaver 2004S BI Business Warehouse 7.0

Nouveautés SAP NetWeaver 2004S BI Business Warehouse 7.0 Nouveautés SAP NetWeaver 2004S BI Business Warehouse 7.0 Artens SAP AG and / or America Inc. 2000 / 1 Les nouveautés SAP BW 7.0 (SAP NW 2004S) La nouvelle version de Business Warehouse apporte des améliorations

Plus en détail

Réfléchir à l objectif de la base de données 26 Créer une nouvelle base de données 28 Créer une base de données à partir d un fichier existant 30

Réfléchir à l objectif de la base de données 26 Créer une nouvelle base de données 28 Créer une base de données à partir d un fichier existant 30 ENVIRONNEMENT Partie 1 GÉNÉRALITÉS Lancer OpenOffice.org Base 10 Quitter OpenOffice.org Base 10 La fenêtre de l'application OpenOffice.org Base 12 Utiliser les menus 14 Gérer l affichage des barres d'outils

Plus en détail

DOSSIER D'ACTIVITES SUR TUXPAINT Dessiner avec Tuxpaint. Objectifs :

DOSSIER D'ACTIVITES SUR TUXPAINT Dessiner avec Tuxpaint. Objectifs : DOSSIER D'ACTIVITES SUR TUXPAINT Dessiner avec Tuxpaint Objectifs : Apprendre à l apprenant à connaître l'ordinateur Apprendre à l'apprenant à allumer l'ordinateur Faire découvrir à l'apprenant Linux Faire

Plus en détail

Guide Google Cloud Print

Guide Google Cloud Print Guide Google Cloud Print Version 0 CAN-FRE Conventions typographiques Ce guide de l'utilisateur utilise l'icône suivante : Les remarques indiquent la marche à suivre dans une situation donnée et donnent

Plus en détail

Avanquest Software présente la nouvelle gamme WebEasy 8

Avanquest Software présente la nouvelle gamme WebEasy 8 La Garenne Colombes, le 22 Juin 2009 Avanquest Software présente la nouvelle gamme WebEasy 8 Des logiciels pour créer simplement des sites internet de qualité professionnelle sans aucune connaissance en

Plus en détail

Guide d impression/numérisation mobile pour Brother iprint&scan

Guide d impression/numérisation mobile pour Brother iprint&scan Guide d impression/numérisation mobile pour Brother iprint&scan Version I FRE Définitions des remarques Nous utilisons le style de remarque suivant tout au long du présent Guide de l'utilisateur : Les

Plus en détail

Tutoriel Adobe Acrobat Pro (version 9.0.0) Créer les fichiers PDF de la thèse. Service Commun de la Documentation Service des thèses

Tutoriel Adobe Acrobat Pro (version 9.0.0) Créer les fichiers PDF de la thèse. Service Commun de la Documentation Service des thèses Tutoriel Adobe Acrobat Pro (version 9.0.0) Créer les fichiers PDF de la thèse Service Commun de la Documentation Service des thèses 2011 SOMMAIRE A. Préparer les fichiers sources à convertir B. Créer le

Plus en détail

JOOMLA 1.5 avancé SUPPORT DE COURS + annexe

JOOMLA 1.5 avancé SUPPORT DE COURS + annexe JOOMLA 1.5 avancé SUPPORT DE COURS + annexe SOMMAIRE 1. LA GESTION DES MODULES... Page 2 2. MODIFICATION DE SON TEMPLATE... Page 6 3. LA CREATION DE DIAPORAMA... Page 9 4. LA CREATION DE SONDAGE... Page

Plus en détail

Guide Google Cloud Print

Guide Google Cloud Print Guide Google Cloud Print Version A CAN-FRE Conventions typographiques Ce guide de l'utilisateur met en exergue les remarques comme suit : Les remarques indiquent la marche à suivre dans une situation donnée

Plus en détail

F0RMAT I0N BUREAUTIQUE

F0RMAT I0N BUREAUTIQUE F0RMAT I0N BUREAUTIQUE Initiation & Perfectionnement wwwmegarunfr - info@megarunfr INIT IAT I0N INF0RMAT IQUE Pré requis : Aucun Objectif : Découvrir l'outil informatique Durée : 4 jours Présentation de

Plus en détail

Suivi de la formation

Suivi de la formation Suivi de la formation Excel 2013 Nom : xxxxxxxx Prénom : xxxxxxxxx Suivi de la formation : Excel 2013 Contenu Niveau 1 : durée 4h15... 3 Etape 1. Découvrez Excel, complétez un tableau:... 3 Etape 2. Réalisez

Plus en détail

Le publipostage Word 2007

Le publipostage Word 2007 Le publipostage Word 2007 Définition Qu'est-ce que le publipostage? A quoi ça sert? S'il vous arrive de devoir envoyer un même courrier à un grand nombre de destinataires, le publipostage est fait pour

Plus en détail

Que faire si une vidéo ne s'affiche pas?

Que faire si une vidéo ne s'affiche pas? Que faire si une vidéo ne s'affiche pas? Si une vidéo ne s'affiche pas, plusieurs options s'offrent à vous : Utiliser un autre navigateur...1 Utiliser Google Chrome...1 Mettre à jour ou installer Adobe

Plus en détail

Retail-1 Siège Social. Étape 1.1. Pour débuter avec Retail-1 siège social

Retail-1 Siège Social. Étape 1.1. Pour débuter avec Retail-1 siège social Retail-1 Siège Social Étape 1.1 Pour débuter avec Retail-1 siège social 11450, boul. Côte de Liesse, Dorval, QC H9P 1A9 Canada téléphone 514.631.3336 télécopieur 514.631.7722 www.gemmar.com Confidentiel

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

OSIRIS/ Valorisation des données PORTAIL BO MANUEL UTILISATEUR

OSIRIS/ Valorisation des données PORTAIL BO MANUEL UTILISATEUR OSIRIS/ Valorisation des données PORTAIL BO MANUEL UTILISATEUR HISTORIQUE DES VERSIONS Vers. Date Rédacteur Objet de la modification 1.00 Juillet 2007 GTBO_AGRI Création du document 1.01 Février 2009 SAMOA

Plus en détail

Guide Google Cloud Print

Guide Google Cloud Print Guide Google Cloud Print Version 0 CAN-FRE Conventions typographiques Ce guide de l'utilisateur utilise l'icône suivante : Les remarques indiquent la marche à suivre dans une situation donnée et donnent

Plus en détail

CSS. Techniques professionnelles pour une mise en page moderne. Eric A. Meyer. 2011 Pearson Education France CSS Eric A. Meyer

CSS. Techniques professionnelles pour une mise en page moderne. Eric A. Meyer. 2011 Pearson Education France CSS Eric A. Meyer CSS Techniques professionnelles pour une mise en page moderne Eric A. Meyer Pearson Education France a apporté le plus grand soin à la réalisation de ce livre afin de vous fournir une information complète

Plus en détail

Utilisation de l'outil «Open Office TEXTE»

Utilisation de l'outil «Open Office TEXTE» PRESENTATION / FORMATION Utilisation de l'outil «Open Office TEXTE» Présentation générale : OpenOffice Texte est un traitement de texte assez similaire à celui proposé par Microsoft ; il est d'ailleurs

Plus en détail