Zen, SASS, responsive design

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

Download "Zen, SASS, responsive design"

Transcription

1 , SASS, responsive design Felip Manyer i Ballester Res Telæ 21 mai 2013 Felip Manyer i Ballester, SASS, responsive design 1/36

2 Plan 1 Créer un thème sous Drupal Généralités Concepts à mettre en œuvre Typologie des thèmes Drupal 2 Responsive design SASS 3 Installation et création d un sous-thème Structure des fichiers, grilles Felip Manyer i Ballester, SASS, responsive design 2/36

3

4 Généralités Concepts à mettre en œuvre Typologie des thèmes Drupal 1 Créer un thème sous Drupal Généralités Concepts à mettre en œuvre Typologie des thèmes Drupal 2 Responsive design SASS 3 Installation et création d un sous-thème Structure des fichiers, grilles Felip Manyer i Ballester, SASS, responsive design 4/36

5 Généralités Concepts à mettre en œuvre Typologie des thèmes Drupal Généralités Drupal sépare clairement le rendu (présentation des pages web) de la logique. En toute fin de course, il charge un moteur de rendu (theme engine) (PHP template, Smarty, PHPTAL, etc.) de transformer le contenu sous une forme exploitable pour le client. Drupal peut présenter le contenu autrement qu en utilisant HTML : texte brut (courriers électroniques), XML, JSON... La mission principale de Drupal est la gestion de contenus, mais un en sens désormais plus générique (services web, etc.) Felip Manyer i Ballester, SASS, responsive design 5/36

6 Généralités Concepts à mettre en œuvre Typologie des thèmes Drupal Concepts à mettre en œuvre Structuration Balisage HTML : fichiers gabarits (templates) fonctions de rendu (theme functions) Présentation Définition du style avec un langage tel que ou un sur-ensemble (SASS, LESS) Surcharges Surcharge des fonctions de rendu et de preprocess dans template.php (ou de dans le.info) Felip Manyer i Ballester, SASS, responsive design 6/36

7 Généralités Concepts à mettre en œuvre Typologie des thèmes Drupal Structuration : gabarits system/page.tpl.php <?php if ($breadcrumb):?> <div id="breadcrumb"><?php print $breadcrumb;?></div> <?php endif;?> <?php print $messages;?> zen/templates/page.tpl.php <div id="content" class="column" role="main"> <?php print render($page[ highlighted ]);?> <?php print $breadcrumb;?> [...] </div><!-- /#content --> Felip Manyer i Ballester, SASS, responsive design 7/36

8 Généralités Concepts à mettre en œuvre Typologie des thèmes Drupal Structuration : fonctions de rendu Dans theme.inc function theme_breadcrumb($variables) { $breadcrumb = $variables[ breadcrumb ]; $output = <div class="breadcrumb">. implode(», $breadcrumb). </div> ; return $output; Dans template.php function mon_joli_theme_breadcrumb($variables) { $breadcrumb = $variables[ breadcrumb ]; $output = <div class="breadcrumb">. implode(, $breadcrumb). </div> ; return $output; Felip Manyer i Ballester, SASS, responsive design 8/36

9 Généralités Concepts à mettre en œuvre Typologie des thèmes Drupal Surcharges Dans theme.inc function template_process_page(&$variables) { if (!isset($variables[ breadcrumb ])) { $variables[ breadcrumb ] = theme( breadcrumb, array( breadcrumb => drupal_get_breadcrumb())); Dans template.php function mon_joli_theme_preprocess_page(&$variables) { $variables[ ville ] = Montpellier ; Felip Manyer i Ballester, SASS, responsive design 9/36

10 Généralités Concepts à mettre en œuvre Typologie des thèmes Drupal Types de thèmes Trois possibilités au moment de choisir un thème : utiliser un thème déjà fait (Bartik, Marinelli, CTI Flex, Corporate Clean, Pixture Reloaded, etc.), éventuellement acquis à titre onéreux repartir de zéro à la Linux From Scratch (get a life) utiliser un thème de base (Omega, Adaptive Theme, Fusion,, etc.) : thème «blanc» comprenant les fondamentaux (gabarits, régions, de mise en page, divers paramètres) et des outils permettant d intégrer un design. On crée généralement un sous-thème permettant de conserver la plupart des fonctionnalités dans le thème parent, et de surcharger à la demande. Felip Manyer i Ballester, SASS, responsive design 10/36

11

12 Responsive design SASS 1 Créer un thème sous Drupal Généralités Concepts à mettre en œuvre Typologie des thèmes Drupal 2 Responsive design SASS 3 Installation et création d un sous-thème Structure des fichiers, grilles Felip Manyer i Ballester, SASS, responsive design 12/36

13 Responsive design SASS Cascading stylesheets : genèse (cascading stylesheets) est un langage de présentation (première séparation entre la structuration (HTML) et la présentation), largement connu de l audience 6 août 1991 projet WorldWideWeb rendu public sur UseNet par Tim Berners-Lee premiers essais «côté client» (simple personnalisation) : Viola, Harmony les cascading HTML stylesheets d Håkon Wium Lie s imposent Felip Manyer i Ballester, SASS, responsive design 13/36

14 Responsive design SASS Cascading stylesheets : les temps héroïques 1 la guerre des navigateurs entre Internet Explorer et Netscape. Spécification relativement pauvre, implémentations concurrentes. La mise en page avec des tableaux perdure. 2 ère IE5/6. Ambitions précipitées : gestion des fontes, adaptabilité aux différents supports de lecture : qui se limitera longtemps à screen et print 2.1 se concentre sur ce qui est implémentable, repousse le reste à 3 3 beaucoup de changements, dont les media queries Felip Manyer i Ballester, SASS, responsive design 14/36

15 Responsive design SASS et plasticité du web : Types de media ( 2) braille embossed handheld print projection screen speech tty tv Caractéristiques du media (2007) color nb bits/couleur color-index index des couleurs device-aspect-ratio ratio dispositif device-height hauteur dispositif device-width largeur dispositif grid largeur fixe height hauteur fenêtre monochrome monochrome orientation portrait/paysage resolution résolution scan pour les TV width largeur fenêtre Felip Manyer i Ballester, SASS, responsive design 15/36

16 Responsive design SASS Pléthore de clients sur le Web : de 7 à 77 usages mobiles en pleine explosion : le trafic des appareils mobiles devrait dépasser celui des machines de bureau en 2015 (IDC) le «responsive design» (conception de sites web adaptatifs) est une solution élégante permettant d échapper à l enfer de la duplication de code Felip Manyer i Ballester, SASS, responsive design 16/36

17 Responsive design SASS Responsive design : mise en œuvre on utilise une extension de l instruction permettant de définir des points de all and all and (min-width:480px) and all and (min-width:960px) nécessite un navigateur supportant 3, ou une couche intermédiaire de compatiblité en JavaScript (shim, shiv, modernizr) pour notre ami IE 8 (oubliez IE 7) préférez des unités relatives (pourcentages, em, ex), utilisez une grille, donnez une largeur de 100 % aux images utilisation des tableaux problématique Felip Manyer i Ballester, SASS, responsive design 17/36

18 Responsive design SASS Responsive design : mobile first le mobile n est pas un état dégradé de la version bureau : UX correcte (même si minimaliste) et ergonomique de base étudier d abord la version mobile. Ce sera le style par défaut dans la pour tous les dispositifs : pas encore de point de coupure mobile : empilement sur une colonne (pas de défilement horizontal) ensuite rajouter des spécificités pour chaque dispositif identifié C est la doctrine mobile first (le mobile d abord). Felip Manyer i Ballester, SASS, responsive design 18/36

19 Responsive design SASS Responsive design : modules utiles Views Responsive Grid Format de grille adaptatif pour Views. Voir aussi Views Fluid grid. Better Jump Menus afficher un menu sous forme de liste déroulante Responsive Images [and Styles] charger des images adaptées au dispositif. 7.x-2.x utilise uniquement des media queries. modules similaires Breakpoints gestion avancée des points de coupure Picture autre approche de la gestion des images Felip Manyer i Ballester, SASS, responsive design 19/36

20 Responsive design SASS Syntactically awesome stylesheets (SASS) un langage de présentation se présentant comme un sur-ensemble de 3 (au même titre que LESS) fichiers doivent être transformés en avant utilisation syntaxe S compatible avec (transition en douceur) principales caractéristiques : variables, règles imbriquées, «mixins», héritage Felip Manyer i Ballester, SASS, responsive design 20/36

21 Responsive design SASS SASS : variables S $blue: #3bbfce; $margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; content-navigation { border-color: #3bbfce; color: #2b9eab;.border { padding: 8px; margin: 8px; border-color: #3bbfce; Felip Manyer i Ballester, SASS, responsive design 21/36

22 Responsive design SASS SASS : Imbrication (nesting) S table.hl { margin: 2em 0; td.ln { text-align: right; li { font: { family: serif; weight: bold; size: 1.2em; table.hl { margin: 2em 0; table.hl td.ln { text-align: right; li { font-family: serif; font-weight: bold; font-size: 1.2em; Felip Manyer i Ballester, SASS, responsive design 22/36

23 Responsive design SASS SASS : mixins table-base { th { text-align: center; font-weight: bold; td, th {padding: left($dist) { float: left; margin-left: $dist; #data table-base; #data { float: left; margin-left: 10px; #data th { text-align: center; font-weight: bold; #data td, #data th { padding: 2px; Felip Manyer i Ballester, SASS, responsive design 23/36

24 Responsive design SASS SASS : héritage S.error { border: 1px #f00; background: #fdd;.error.intrusion { font-size: 1.3em; font-weight: bold;.baderror border-width: 3px;.error,.badError { border: 1px #f00; background: #fdd;.error.intrusion,.baderror.intrusion { font-size: 1.3em; font-weight: bold;.baderror { border-width: 3px; Felip Manyer i Ballester, SASS, responsive design 24/36

25 Responsive design SASS Compass une bibliothèque pour SASS, comprenant de nombreux mixins, un gestionnaire de packages pour obtenir des librairies additionnelles, un exécutable pour générer des les meilleurs motifs réutilisables du Web facilite l utilisation de 3 : gère les vendor prefixes gestion automatisée des sprites «rythmes typographiques» Felip Manyer i Ballester, SASS, responsive design 25/36

26

27 Installation et création d un sous-thème Structure des fichiers, grilles 1 Créer un thème sous Drupal Généralités Concepts à mettre en œuvre Typologie des thèmes Drupal 2 Responsive design SASS 3 Installation et création d un sous-thème Structure des fichiers, grilles Felip Manyer i Ballester, SASS, responsive design 27/36

28 Installation et création d un sous-thème Structure des fichiers, grilles Présentation de : le thème is a powerful, yet simple, HTML5 starting theme with a responsive, mobile-first grid design. thème de base créé en 2006 par John Albin Wilkins 2 branches stables actuellement : 7.x-3.x et 7.x-5.x ( 5). documentation en ligne fournie, et code commenté avec soin Felip Manyer i Ballester, SASS, responsive design 28/36

29 Installation et création d un sous-thème Structure des fichiers, grilles Présentation de : le créateur co-maintenu par John Albin Wilkins, de palantir.net (organisations publiques et non gouvernementales) développeur (front-end) clef dans la communauté : nombreux modules (Menu Block, Menu Position, Fences, sans compter le cœur), chef de la Drupal 8 Mobile Initiative co-auteur de Drupal 7 Module Development, gagnant du TPOTM (trivial patch of the month) - // Check only if it s a template and not registered by the theme or engine + // Check only if it s a template and not registered by the theme or engine. Felip Manyer i Ballester, SASS, responsive design 29/36

30 Installation et création d un sous-thème Structure des fichiers, grilles Préparatifs Installations des dépendances optionnelles sous Debian : Installer SASS sudo apt-get install rubygems sudo gem update sudo gem install sass Installer Compass sudo gem install compass Felip Manyer i Ballester, SASS, responsive design 30/36

31 Installation et création d un sous-thème Structure des fichiers, grilles Installation de et création d un sous-thème télécharger 5 (http://drupal.org/project/zen) le placer par exemple dans sites/all/themes dans le répertoire du site, taper drush zen "Mon joli thème" --without-rtl (ou bien suivre le README : copier STARTERKIT et renommer les fichiers et les fonctions) dans mon_joli_theme.info, choisir entre css/layouts/ fixed-width.css (pas de responsive) et css/layouts/ responsive-sidebars.scss Felip Manyer i Ballester, SASS, responsive design 31/36

32 Installation et création d un sous-thème Structure des fichiers, grilles Structure des fichiers config.rb divers paramètres, dont bascule entre dev et prod, et activation de FireSass.info notamment choix du layout (fixe ou adaptatif) css/ fichiers, pouvant être utilisés directement sass/ répertoire contenant les fichiers SASS, les sont alors générées et écrasées et ne doivent pas être sous gestion de version templates/ fichiers contenant les gabarits (balisage). Ce sont des êtres sensibles. Les respecter. template.php surcharges fonctions de preprocess et de theme Felip Manyer i Ballester, SASS, responsive design 32/36

33 Installation et création d un sous-thème Structure des fichiers, grilles Outils FireSass extension de Firebug permettant d afficher les numéros de ligne du fichier SASS et non Ctrl-Maj-M mode de visualisation en responsive design de Firefox compass compass compile pour générer les, compass clean pour les supprimer, compass watch pour regénérer les fichiers concernés à chaque sauvegarde Compass.app interface graphique pour Compass ($10) Felip Manyer i Ballester, SASS, responsive design 33/36

34 Installation et création d un sous-thème Structure des fichiers, grilles Grids Grids est une collection de mixins Compass permettant de gérer aisément les grilles à haut niveau ( «charge cognitive»), pouvant être utilisée en dehors de (http://zengrids.com/) avantage de SASS : pas de classes «de présentation» : la est calculée lors de sa génération démonstration : Felip Manyer i Ballester, SASS, responsive design 34/36

35

36 Installation et création d un sous-thème Structure des fichiers, grilles Conclusion 3, responsive design : de nouvelles perspectives pour un Web ouvert, universel, à défendre face aux risques de fragmentation qui persistent : la puissance du moteur de thème de Drupal mise en toute simplicité à disposition du themer, avec des outils désormais incontournables (SASS, Compass, grilles) sites non adaptatifs obsolescents. Intégration croissante du responsive dans nos outils (Drupal 8) propagez la bonne parole Felip Manyer i Ballester, SASS, responsive design 36/36

Celui qui vous parle. Yann Vigara

Celui qui vous parle. Yann Vigara Celui qui vous parle Yann Vigara Celui qui vous parle Yann Vigara Celui qui vous parle [Spa m] Yann Vigara Fondateur et directeur technique d'atomes Dans l'administration système depuis 1999 Tombé dans

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

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

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

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

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

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

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

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

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

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

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

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

Mais pourquoi le dev' saccage mon intégration? Atelier technique CSS Paris Web 2011 par Romy Duhem-Verdière http://romy.tetue.

Mais pourquoi le dev' saccage mon intégration? Atelier technique CSS Paris Web 2011 par Romy Duhem-Verdière http://romy.tetue. Mais pourquoi le dev' saccage mon intégration? Atelier technique CSS Paris Web 2011 par Romy Duhem-Verdière http://romy.tetue.net/857 Intégrateur de STPo - Robot de Gordon Bennett 2 L'intégrateur XHML,

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

HTML, CSS, JS et CGI. Elanore Elessar Dimar

HTML, CSS, JS et CGI. Elanore Elessar Dimar HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML

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

Intégrateur Web HTML5 CSS3

Intégrateur Web HTML5 CSS3 Intégrateur Web HTML5 CSS3 L objectif de la 3W Academy est de former des petits groupes d élèves à l intégration de sites internet ainsi qu à la création d applications web simples telles qu un blog ou

Plus en détail

Découvrir Drupal. Les meilleurs thèmes et modules Drupal (présenta5on démo)

Découvrir Drupal. Les meilleurs thèmes et modules Drupal (présenta5on démo) Découvrir Drupal Les meilleurs thèmes et modules Drupal (présenta5on démo) Tour d horizon des principales fonc5onnalités de Drupal au travers de la présenta5on de quelques- uns de ses principaux modules

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

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

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

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

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

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

Point sur les solutions de développement d apps pour les périphériques mobiles

Point sur les solutions de développement d apps pour les périphériques mobiles Point sur les solutions de développement d apps pour les périphériques mobiles Par Hugues MEUNIER 1. INTRODUCTION a. Une notion importante : le responsive web design Nous sommes en train de vivre une nouvelle

Plus en détail

Commençons. (Bonjour, mon nom est Stéphane)

Commençons. (Bonjour, mon nom est Stéphane) Commençons (Bonjour, mon nom est Stéphane) Objectif - Vue claire de la dynamique d'une page web - Compréhension de la logique des CMS - Quelques réflexes de «bonne pratique» - La réponse à un maximum de

Plus en détail

Petite histoire d Internet

Petite histoire d Internet À la base, Internet est défini par des ordinateurs qui sont reliés entre eux grâce à des câbles, du WiFi ou encore des satellites, créant ainsi un réseau à échelle mondiale. Les ordinateurs communiquent

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

PHP 5.4 Développez un site web dynamique et interactif

PHP 5.4 Développez un site web dynamique et interactif Editions ENI PHP 5.4 Développez un site web dynamique et interactif Collection Ressources Informatiques Table des matières Table des matières 1 Chapitre 1 Introduction 1. Objectif de l'ouvrage.............................................

Plus en détail

Nouveautés joomla 3 1/14

Nouveautés joomla 3 1/14 Nouveautés joomla 3 1/14 Table des matières 1 Responsive... 1 2 Bootstrap... 1 3 LESS CSS intégré... 1 4. JUI (pour les développeurs d'extensions)... 1 5. Le Mambo days vs le Génial UX... 2 6. 7 étapes

Plus en détail

WEB & DÉVELOPPEMENT LES BASES DU WEB LE LANGAGE HTML FEUILLES DE STYLES CSS HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES

WEB & DÉVELOPPEMENT LES BASES DU WEB LE LANGAGE HTML FEUILLES DE STYLES CSS HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES WEB & DÉVELOPPEMENT LES BASES DU WEB HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES LE LANGAGE HTML STRUCTURE D UNE PAGE En-tête et corps Syntaxe INSÉRER DES CONTENUS Texte : formatage (titre,

Plus en détail

Soon_AdvancedCache. Module Magento SOON. Rédacteur. Relecture & validation technique. Historique des révisions

Soon_AdvancedCache. Module Magento SOON. Rédacteur. Relecture & validation technique. Historique des révisions Module Magento SOON Soon_AdvancedCache Rédacteur Hervé G. Lead développeur Magento herve@agence-soon.fr AGENCE SOON 81 avenue du Bac 94210 LA VARENNE ST HILAIRE Tel : +33 (0)1 48 83 95 96 Fax : +33 (0)1

Plus en détail

Guide de réalisation d une campagne e-mail marketing

Guide de réalisation d une campagne e-mail marketing Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent. La

Plus en détail

S7 Le top 10 des raisons d utiliser PHP pour moderniser votre existant IBM i

S7 Le top 10 des raisons d utiliser PHP pour moderniser votre existant IBM i Modernisation IBM i Nouveautés 2014-2015 IBM Power Systems - IBM i 19 et 20 mai 2015 IBM Client Center, Bois-Colombes S7 Le top 10 des raisons d utiliser PHP pour moderniser votre existant IBM i Mardi

Plus en détail

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

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

Plus en détail

Joomla! Création et administration d'un site web - Version numérique

Joomla! Création et administration d'un site web - Version numérique Avant-propos 1. Objectifs du livre 15 1.1 Orientation 15 1.2 À qui s adresse ce livre? 16 2. Contenu de l ouvrage 17 3. Conclusion 18 Introduction 1. Un peu d histoire pour commencer... 19 1.1 Du web statique

Plus en détail

les techniques d'extraction, les formulaires et intégration dans un site WEB

les techniques d'extraction, les formulaires et intégration dans un site WEB les techniques d'extraction, les formulaires et intégration dans un site WEB Edyta Bellouni MSHS-T, UMS838 Plan L extraction des données pour un site en ligne Architecture et techniques Les différents

Plus en détail

{less} Guide de démarrage

{less} Guide de démarrage {less Guide de démarrage Pré requis L'utilisation d'un pré processeur css nécessite son installation préalable. Vous pouvez choisir de tout installer du coté du serveur ou du coté du client. Votre site

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

Devenez un véritable développeur web en 3 mois!

Devenez un véritable développeur web en 3 mois! Devenez un véritable développeur web en 3 mois! L objectif de la 3W Academy est de former des petits groupes d élèves au développement de sites web dynamiques ainsi qu à la création d applications web

Plus en détail

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE

Plus en détail

Évaluation des compétences. Identification du contenu des évaluations. Septembre 2014

Évaluation des compétences. Identification du contenu des évaluations. Septembre 2014 Identification du contenu des évaluations Septembre 2014 Tous droits réservés : Université de Montréal Direction des ressources humaines Table des matières Excel Base version 2010... 1 Excel intermédiaire

Plus en détail

Prototyper un site web avec Awestruct et Boostrap

Prototyper un site web avec Awestruct et Boostrap Prototyper un site web avec Awestruct et Boostrap On va parler de... Prototype Awestruct Bootstrap Bonus (GitHub, JSF) Prototyper : pourquoi? Mettre tout le monde d'accord Avoir un support concret Aide

Plus en détail

TD1. Installation de Symfony 2 et Netbeans

TD1. Installation de Symfony 2 et Netbeans I - Introduction : TD1 Installation de Symfony 2 et Netbeans L objet de ce TP est d installer l environnement de travail. Nous commençons par définir des notions de base nécessaires pour comprendre la

Plus en détail

TD séance n 2c Mise à jour des Systèmes

TD séance n 2c Mise à jour des Systèmes 1 Gestion des Logiciels 1.1 Introduction sur les logiciels Un logiciel est un programme nécessaire au fonctionnement d'un ordinateur (logiciel système) ou au traitement de données (logiciel applicatif).

Plus en détail

Projet en nouvelles technologies de l information et de la communication

Projet en nouvelles technologies de l information et de la communication Projet en nouvelles technologies de l information et de la communication Site Web universitaire du Prof. Jacques Moeschler. Nono Steeve Semestre de printemps 2013 Sous la direction du Prof Luka Nerima

Plus en détail

Technologies Web. Technologies Web DHTML TCM-TWEB-01-001-13. Julien BEAUCOURT 2006 pour ETNA

Technologies Web. Technologies Web DHTML TCM-TWEB-01-001-13. Julien BEAUCOURT 2006 pour ETNA DHTML Sommaire Introduction Compatibilité du DHTML Les layers Les balises dynamiques Balise Balise et La balise Animer de éléments Le Document Object Model (DOM) Modifier une

Plus en détail

Développement d'applications Web HTML5 L'art et la manière avec Visual Studio 2015 et TFS

Développement d'applications Web HTML5 L'art et la manière avec Visual Studio 2015 et TFS Avant de commencer 1. Introduction 15 2. HTML5 oui, mais pas que... 15 2.1 HTML5 16 2.2 JavaScript 17 2.3 CSS 18 3. Les outils 18 Préparation des outils et création du projet 1. Introduction 21 2. Team

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

Drupal Développeur. Theming et développement pour Drupal. Une formation T@hitiClic. Formateur : Fabien Crépin. Drupal Développeur.

Drupal Développeur. Theming et développement pour Drupal. Une formation T@hitiClic. Formateur : Fabien Crépin. Drupal Développeur. Theming et développement pour Drupal Une formation Formateur : Fabien Crépin Introduction Objectif : savoir développer un module et un thème 4 demi-journées Ce qu'on verra en théorie et en pratique : Environnement

Plus en détail

Tutoriel code::blocks

Tutoriel code::blocks Tutoriel code::blocks E. Lunéville 2006 Le logiciel code::blocks fait partie des logiciels de type EDI (Environnement de Développement Intégré, IDE en anglais) pour le langage C++. Il est multiplateforme

Plus en détail

DRUPAL Réalisez des développements professionnels avec PHP (2ième édition)

DRUPAL Réalisez des développements professionnels avec PHP (2ième édition) Introduction 1. Les systèmes de gestion de contenu 11 2. Les avantages de Drupal 15 3. Le fonctionnement de Drupal 17 4. L'environnement de développement 20 5. L'installation de Drupal 25 6. Le passage

Plus en détail

Mise à jour du site web de l auto-école et de son interface d administration

Mise à jour du site web de l auto-école et de son interface d administration Auto-école 2000 94 bld de Fourmies 59100 ROUBAIX Rapport de stage : Stage du 20 Avril au 29 mai Année universitaire 2008-2009 Mise à jour du site web de l auto-école et de son interface d administration

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

Optimiser les performances d un site web. Nicolas Chevallier Camille Roux

Optimiser les performances d un site web. Nicolas Chevallier Camille Roux Optimiser les performances d un site web Nicolas Chevallier Camille Roux Intellicore Tech Talks Des conférences pour partager son savoir Le mardi au CICA Sophia Antipolis http://techtalks.intellicore.net

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

Magento. Magento. Réussir son site e-commerce. Réussir son site e-commerce BLANCHARD. Préface de Sébastien L e p e r s

Magento. Magento. Réussir son site e-commerce. Réussir son site e-commerce BLANCHARD. Préface de Sébastien L e p e r s Mickaël Mickaël BLANCHARD BLANCHARD Préface de Sébastien L e p e r s Magento Préface de Sébastien L e p e r s Magento Réussir son site e-commerce Réussir son site e-commerce Groupe Eyrolles, 2010, ISBN

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

COMMENT METTRE A JOUR SON SITE WEB?

COMMENT METTRE A JOUR SON SITE WEB? Un site web est d autant plus intéressant pour l internaute qu il est actualisé. A contrario, une information obsolète peut ternir l image de l entreprise (manque de dynamisme, manque de rigueur ). Différentes

Plus en détail

Panels : construire autrement. Pascal Morin bellesmanieres @ d.o. Senior Dev @ Code Enigma

Panels : construire autrement. Pascal Morin bellesmanieres @ d.o. Senior Dev @ Code Enigma Panels : construire autrement Pascal Morin bellesmanieres @ d.o. Senior Dev @ Code Enigma 1. Définition, utilisation, concepts de base >site builders 2. Panels et le theme >themers & frontend devs 3. Developpement

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

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

GWT Développement d'applications clientes en Java. Introduction prise en main

GWT Développement d'applications clientes en Java. Introduction prise en main GWT Développement d'applications clientes en Java Introduction prise en main 1 Pourquoi GWT? GWT est un framework, conçu par Google, pour programmer des applications web en Java ; Il permet de programmer

Plus en détail

Introduction JOOMLA. Fonctionnalités. Avantages. Hainaut P. 2013 - www.coursonline.be 1. Joomla est un système de gestion de contenu CMS open source

Introduction JOOMLA. Fonctionnalités. Avantages. Hainaut P. 2013 - www.coursonline.be 1. Joomla est un système de gestion de contenu CMS open source JOOMLA Introduction Joomla est un système de gestion de contenu CMS open source Il permet la conception rapide de sites Web avec une présentation soignée et une navigation très simple C est l outil idéal

Plus en détail

Profils d installation sous Drupal 7

Profils d installation sous Drupal 7 Profils d installation sous Drupal 7 Felip Manyer i Ballester 18 décembre 2013 Felip Manyer i Ballester Profils d installation sous Drupal 7 1/23 Plan 1 Profils d installation Introduction Distributions

Plus en détail

Fabrication de site web Damien Nouvel

Fabrication de site web Damien Nouvel Fabrication de site web Plan Gestion de projets informatiques Acteurs de la fabrication de sites web Travail du designer Travail du développeur 2 / 30 Plan Gestion de projets informatiques Acteurs de la

Plus en détail

NVU, Notepad++ (ou le bloc-note), MySQL, PhpMyAdmin. HTML, PHP, cas d utilisation, maquettage, programmation connaissances en HTML, PHP et SQL

NVU, Notepad++ (ou le bloc-note), MySQL, PhpMyAdmin. HTML, PHP, cas d utilisation, maquettage, programmation connaissances en HTML, PHP et SQL Prise en main de NVU et Notepad++ (conception d application web avec PHP et MySql) Propriétés Intitulé long Formation concernée Matière Présentation Description Conception de pages web dynamiques à l aide

Plus en détail

Gestion d identités PSL Exploitation IdP Authentic

Gestion d identités PSL Exploitation IdP Authentic Gestion d identités PSL Exploitation IdP Authentic Entr ouvert SCOP http ://www.entrouvert.com Table des matières 1 Arrêt et démarrage 2 2 Configuration 2 2.1 Intégration à la fédération............................

Plus en détail

Programmation Web. Madalina Croitoru IUT Montpellier

Programmation Web. Madalina Croitoru IUT Montpellier Programmation Web Madalina Croitoru IUT Montpellier Organisation du cours 4 semaines 4 ½ h / semaine: 2heures cours 3 ½ heures TP Notation: continue interrogation cours + rendu à la fin de chaque séance

Plus en détail

Développer de nouvelles fonctionnalités

Développer de nouvelles fonctionnalités 19 Développer de nouvelles fonctionnalités Chaque site e-commerce est unique. Bien que Magento soit une application riche, des besoins spécifiques apparaîtront et l ajout de modules deviendra nécessaire.

Plus en détail

Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation.

Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. 1 Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. Voici un mode opératoire qui vous guidera dans l utilisation de

Plus en détail

1 Utilisation du logiciel Quanta+ 2

1 Utilisation du logiciel Quanta+ 2 COURS HTML-CSS Cours HTML Page 1 Table des matières 1 Utilisation du logiciel Quanta+ 2 2 Les feuilles de style CSS 4 2.1 Définition et principe................................. 4 2.2 Mais pourquoi donc

Plus en détail

Introduction à Drupal

Introduction à Drupal Introduction à Drupal Vincent Garcies, Felip Manyer i Ballester Apéro web Perpignan du 26 février 2015 Vincent Garcies, Felip Manyer i Ballester Introduction à Drupal 1/16 Drupal : caractéristiques techniques

Plus en détail

Version 4.0. Multinet Ressources Inc. Page 1 sur 13

Version 4.0. Multinet Ressources Inc. Page 1 sur 13 Version 4.0 Page 1 sur 13 Introduction Lorsque vous obtenez l accès à Méganet, votre site est déjà construit. C est-à-dire qu il a fait l objet d une étude de style selon les couleurs de votre entreprise

Plus en détail

Survol des nouveautés

Survol des nouveautés Maîtrisez la conception de sites Web en toute simplicité WebExpert est un puissant logiciel d'édition Web qui vous permet de concevoir et de gérer des sites Web, de façon professionnelle en toute simplicité.

Plus en détail

Projet 2. Gestion des services enseignants CENTRE D ENSEIGNEMENT ET DE RECHERCHE EN INFORMATIQUE. G r o u p e :

Projet 2. Gestion des services enseignants CENTRE D ENSEIGNEMENT ET DE RECHERCHE EN INFORMATIQUE. G r o u p e : CENTRE D ENSEIGNEMENT ET DE RECHERCHE EN INFORMATIQUE Projet 2 Gestion des services enseignants G r o u p e : B E L G H I T Y a s m i n e S A N C H E Z - D U B R O N T Y u r i f e r M O N T A Z E R S i

Plus en détail

L utilisation d outils intelligents pour écrire du code valide

L utilisation d outils intelligents pour écrire du code valide B L utilisation d outils intelligents pour écrire du code valide Toutes les méthodes de développement, sans exception, incluent au moins une étape de test du code. C est parce que le code écrit par la

Plus en détail

Aide Utilisateur. Cellpass.fr

Aide Utilisateur. Cellpass.fr Aide Utilisateur Mise en place simple :... 2 Création d une ressource... 2 Installation du module... 5 Test fonction file OK... 7 temps de connexion < 1 seconde(s)... 7 Exemple d'installation PassUp pour

Plus en détail

WEBISO Internet & Intranet workflow

WEBISO Internet & Intranet workflow WEBISO Internet & Intranet workflow Pour qualité, sécurité, environnement & santé Copyright 2012 Ockham B.V.B.A. All rights reserved WEBISO is a registered trademark of Ockham B.V.B.A. in Europe, the USA

Plus en détail

Cytoscape pour la visualisation et le traitement de grands graphes

Cytoscape pour la visualisation et le traitement de grands graphes Cytoscape pour la visualisation et le traitement de grands graphes Laurent Risser CNRS, Institut de Mathématiques de Toulouse 01/16 1) Principaux logiciels Outils libres pour la visualisation et traitement

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

Formation : WEbMaster

Formation : WEbMaster Formation : WEbMaster Objectif et Description : Centre Eclipse vous propose une formation complète WebMaster, vous permettant de : Utiliser dès maintenant les nouveautés du web2, ainsi alléger les besoins

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

Documentation SPIP. Modifier l'habillage graphique

Documentation SPIP. Modifier l'habillage graphique Documentation SPIP Modifier l'habillage graphique Modifier l'habillage graphique 1. Introduction aux feuilles de style...4 Pourquoi les feuilles de style?...4 Concrètement...5 Notes...5 2. Les feuilles

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

Mode d emploi du site Internet «Mediawiki»

Mode d emploi du site Internet «Mediawiki» Mode d emploi du site Internet «Mediawiki» École Libre du Soleil Levant La technologie MediaWiki a été choisie pour sa flexibilité et une simplicité d utilisation ne demandant que de connaître quelques

Plus en détail

TP 5 Les CMS, la forme et le fond Internet et Outils (IO2)

TP 5 Les CMS, la forme et le fond Internet et Outils (IO2) TP 5 Les CMS, la forme et le fond Internet et Outils (IO2) Un site, tel que vous avez appris à en programmer jusqu à maintenant, contenant un ensemble de pages HTML embellies de quelques feuilles de styles,

Plus en détail

Les grandes facettes du développement Web Nicolas Thouvenin - Stéphane Gully

Les grandes facettes du développement Web Nicolas Thouvenin - Stéphane Gully Les grandes facettes du développement Web Qui sommes nous? Nicolas Thouvenin Stéphane Gully Projets Web depuis 2000 LAMP, NodeJS HTML, CSS, jquery

Plus en détail

Modèle de cahier des charges pour un site Internet

Modèle de cahier des charges pour un site Internet Modèle de cahier des charges pour un site Internet Modèle de cahier des charges Site Internet 1 Ce document a pour objectif de préciser quels éléments doivent être détaillés dans votre cahier des charges

Plus en détail

Documents web dynamiques. 20 novembre 2007 Architecture Multi-Niveaux 54

Documents web dynamiques. 20 novembre 2007 Architecture Multi-Niveaux 54 Documents web dynamiques 20 novembre 2007 Architecture Multi-Niveaux 54 Documents web dynamiques Contenu Statique Le client envoie une requête avec un nom de fichier Le serveur répond en lui retournant

Plus en détail

À la découverte de jquery Mobile

À la découverte de jquery Mobile 1 À la découverte de jquery Mobile jquery Mobile est un ensemble de plug-ins et de widgets de jquery visant à déployer une API multiplates-formes capable de développer des applications Web mobiles. Au

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

Portfolio Sites internet :

Portfolio Sites internet : Portfolio Sites internet : 2010 ARA architecture www.ara-architecture.com Type : Portfolio d architecte Fonctionnalités principales : Galerie de projet d architecture, Actualités, Textes sur l agence,

Plus en détail

Manuel d utilisation du module Liste de cadeaux PRO par Alize Web

Manuel d utilisation du module Liste de cadeaux PRO par Alize Web Manuel d utilisation du module Liste de cadeaux PRO par Alize Web INSTALLER ET CONFIGURER LE MODULE (BACK OFFICE) 2 Réglages des performances 2 Télécharger le module 3 Installer le module 4 Configurer

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

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