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

Le 'sub-theming' avec LESS, SASS et COMPASS

Le 'sub-theming' avec LESS, SASS et COMPASS Le 'sub-theming' avec LESS, SASS et COMPASS Par Sylvain Aubé Intégrateur Web, Whisky Echo Bravo Track : Design/Usability Niveau : débutant www.drupalcampmontreal.com À propos du présentateur twitter.com/sylvainaube

Plus en détail

Conception de sites web. Feuille de styles CSS

Conception de sites web. Feuille de styles CSS Conception de sites web Feuille de styles CSS M i s e e n p a g e : s o l u t i o n «v i e i l l e é c o l e» Mise en page par et par Long Vite illisible Peu souple Difficile à modifier

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

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

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

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

Conception Adaptative "Responsive Web Design"

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

Plus en détail

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

5. Donnez et expliquez 2 arguments justifiant la détection de capacités côté client plutôt que côté serveur, en utilisant l User Agent.

5. Donnez et expliquez 2 arguments justifiant la détection de capacités côté client plutôt que côté serveur, en utilisant l User Agent. Questions de cours LPSIL 2012/2013 1 1. Pour chaque type de site listé ci-dessous, indiquez la ou les approches d adaptation à utiliser parmi les 3 approches vues en cours (1 point) : - Site ayant 2 parties

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

CSS. M. Sassolas. L3Pro. Cours 2. Introduction. Le style. Conclusion TD/TP 2 / 16 CSS. M. Sassolas. L3Pro. Cours 2. Introduction. Le style.

CSS. M. Sassolas. L3Pro. Cours 2. Introduction. Le style. Conclusion TD/TP 2 / 16 CSS. M. Sassolas. L3Pro. Cours 2. Introduction. Le style. Cascading style sheets () pour XML Plan de la séance BDISE XML Mathieu Sassolas 1 IUT de Sénart Fontainebleau Département Informatique 2 La sélection des éléments où s applique le style Année 2015-2016

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

GUIDE DU DESIGN GRAPHIQUE DU SITE ABCD

GUIDE DU DESIGN GRAPHIQUE DU SITE ABCD GUIDE DU DESIGN GRAPHIQUE DU SITE ABCD Version 4.0.2 Table des matières Introduction...2 Architecture du site ABCD...2 Les standards du web...3 Accessibilité...4 Type I ou portail du site ABCD...4 Type

Plus en détail

Moodle 2, votre premier thème graphique

Moodle 2, votre premier thème graphique UTC Moodle 2, votre premier thème graphique Un tutorial pour créer un thème graphique pour moodle v2 Dominique Chambelant 03/03/2011 Moodle v2.0.x Développement: Thèmes 2,0 créer votre premier thème Ce

Plus en détail

Système de publication pour l Internet. Patrick VINCENT pvincent@erasme.org

Système de publication pour l Internet. Patrick VINCENT pvincent@erasme.org SPIP Système de publication pour l Internet Patrick VINCENT pvincent@erasme.org PLAN 1- Modification de la mise en forme (appliquer un squelette existant) 2- Fonctionnement des squelettes 3- Boucles, filtres

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

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

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

Introduction à la conception de sites web

Introduction à la conception de sites web Introduction à la conception de sites web Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 9-16 janvier 2006 1- Les grands principes du web (1) Client / serveur réseau programmes communicants

Plus en détail

Bootstrap 3 pour l'intégrateur web CSS et Responsive Web Design

Bootstrap 3 pour l'intégrateur web CSS et Responsive Web Design Chapitre 1 : Introduction A. Le développement des sites Web 14 B. Les fonctionnalités de Bootstrap 14 C. La compatibilité avec les navigateurs 15 D. Télécharger les exemples 15 Chapitre 2 : Installer Bootstrap

Plus en détail

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

Introduction à la conception de sites web. Yannick Prié UFR Informatique Université Claude Bernard Lyon 1

Introduction à la conception de sites web. Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 Introduction à la conception de sites web Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 Objectifs Introduction aux langages à balises Introduction à (X)HTML / CSS Introduction à la gestion

Plus en détail

INTEGRATEUR DEVELOPPEUR

INTEGRATEUR DEVELOPPEUR www.emweb.fr INTEGRATEUR DEVELOPPEUR FORMATION ELIGIBLE AU DIF/CIF DURÉE : 700 h de formation PRE REQUIS Avoir un esprit logique Etre motivé(e)! OBJECTIF A l issue de cette formation, vous serez capable

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

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

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015)

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015) Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015) Conception de Sites Web Dynamiques : TD 2 HTML5 statique, feuille de style CSS, Mise en page, Framework Bootstrap http://www.labri.fr/perso/preuter/cswd2015

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

ADAPTATION DES INTERFACES. ROUYER Florian et BENNOUR Salah

ADAPTATION DES INTERFACES. ROUYER Florian et BENNOUR Salah ADAPTATION DES INTERFACES ROUYER Florian et BENNOUR Salah SOMMAIRE Sujet Android Ionic Comparaison Conclusion Sujet Plateforme de partage de livres Fonctionnalités : Géolocalisation Visualisation Map Visualisation

Plus en détail

Programme de Formation

Programme de Formation Windows / PC - initiation Etre à l aise avec Windows, savoir se situer, organiser son environnement et classer ses documents Tout utilisateur désireux d être rapidement autonome dans l utilisation de l

Plus en détail

Création de sites web. INF0326 Outils bureautiques, logiciels et Internet

Création de sites web. INF0326 Outils bureautiques, logiciels et Internet Création de sites web INF0326 Outils bureautiques, logiciels et Internet Plan Création de pages web HTML et CSS Création de sites web avec WordPress Créer des pages web Partie 1 Système hypertexte Un système

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

Premières applications. Web 2.0. avec Ajax et PHP. J e a n - M a r i e D e f r a n c e. Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5

Premières applications. Web 2.0. avec Ajax et PHP. J e a n - M a r i e D e f r a n c e. Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5 Premières applications Web 2.0 avec Ajax et PHP J e a n - M a r i e D e f r a n c e Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5 8 Applications Ajax-PHP synchrones Pour commencer simplement, je vous

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

Systèmes de Gestion de Contenu

Systèmes de Gestion de Contenu Introduction à SPIP Master 1 CAWEB Page 1/1 SPIP http://demo.spip.org/ SPIP (acronyme récursif de «Système de Publication pour l Internet Spip») est l'un des logiciels libres de gestion de contenu parmi

Plus en détail

INTRODUCTION CHAPITRE 1

INTRODUCTION CHAPITRE 1 CHAPITRE 1 INTRODUCTION Query, qu est-ce que c est?... 11 HTML, CSS, JavaScript, PHP : qui fait quoi?... 16 Un environnement de développement simple et gratuit... 19 Ce que vous allez apprendre... 20 9

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

Rapport de Conception

Rapport de Conception Rapport de Conception Métier : Développement Membres du groupe Granier Maxime Imbert Jérémy Lansac Ludovic Tionohoue Yann Axone Métiers consultés IHM Contenu cispmptut_rapportdeconception_developpement_20110111

Plus en détail

228 Index DTD 22. feuilles de styles voir Propriétés CSS et styles

228 Index DTD 22. feuilles de styles voir Propriétés CSS et styles Index A affichage, CSS 180 album photos, créer 83 arrière-plan, CSS 152 images 152 Attributs de balises HTML action 90 align 71 attributs communs 131 background 39 border 39, 70 cellpadding 70 cellspacing

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

Gestion du design (DesignManager)

Gestion du design (DesignManager) 1 sur 7 15/10/2014 14:06 Administration de CMS Made Simple - evolution biologique - Gestionnaire de Modules Bienvenu(e) : archeo Vous avez 1 notification en cours Gestionnaire de Modules Déposer les fichiers

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

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

Symfony 2. 1.Définition de symfony 2. 2.Installation. 3.Structure. 4.Symfony et les commandes

Symfony 2. 1.Définition de symfony 2. 2.Installation. 3.Structure. 4.Symfony et les commandes Symfony 2 Sommaire : 1.Définition de symfony 2 2.Installation 3.Structure 4.Symfony et les commandes 5.Le fonctionnement : le routeur (les url), les bundles, twig(templates) 6.L architecture de symfony2

Plus en détail

Joomla! 2.5 Créez et administrez vos sites Web

Joomla! 2.5 Créez et administrez vos sites Web Chapitre 1 : Installer Joomla! 1. Introduction 11 2. Qu'est-ce qu'un CMS? 11 3. HTML et XHTML 11 4. Différencier le contenu de la présentation 12 5. PHP et Apache 12 6. MySQL 13 7. Site statique ou site

Plus en détail

Création d un Site Web

Création d un Site Web Session2 Etapes Faciles Pour Réussir Sur Internet Création d un Site Web Mounir_ahlyege@hotmail.com 1 CSS :Cascading Style Sheets en français feuilles de style en cascade C'est un autre langage qui vient

Plus en détail

Introduction à Dreamweaver CS4

Introduction à Dreamweaver CS4 Introduction à Dreamweaver CS4 Adobe Dreamweaver (anciennement Macromedia Dreamweaver) est un éditeur de site web de type «tel écrit tel écran» (cette formule remplaçant désormais dans la terminologie

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

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

Réalisation d'un site web. Première partie : Création des pages HTML. thierry.vaira@orange.fr

Réalisation d'un site web. Première partie : Création des pages HTML. <tv>thierry.vaira@orange.fr</tv> Réalisation d'un site web Première partie : Création des pages HTML 1 Objectifs Se familiariser avec le codage HTML Acquérir une pratique minimale Être capable de mener à bien la construction d'un site

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

Tutoriel Ionic framework

Tutoriel Ionic framework INGÉNIEURS EN SCIENCES INFORMATIQUES ADAPTATION DES INTERFACES A L ENVIRONNEMENT Tutoriel Ionic framework Tutoriel et présentation du framework IONIC : technologie permettant la réalisation d applications

Plus en détail

BOOTSTRAP VS FOUNDATION

BOOTSTRAP VS FOUNDATION BOOTSTRAP VS FOUNDATION Plasticité des Interfaces Flavien BOSSIAUX (SI5/IHM) Ces deux frameworks évoluant très rapidement, il est important de prendre en compte que ce document fait état des versions en

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

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

Tutoriel Chat AJAX Partie 2 : Prototype, Scriptaculous, Application HTML

Tutoriel Chat AJAX Partie 2 : Prototype, Scriptaculous, Application HTML Tutoriel Chat AJAX Partie 2 : Prototype, Scriptaculous, Application HTML Prototype et Scriptaculous Pour cette application de "chat" nous utiliserons deux librairies populaires de Javascript : Prototype

Plus en détail

Comment personnaliser la page d'inscription Wordpress!

Comment personnaliser la page d'inscription Wordpress! Comment personnaliser la page d'inscription Wordpress! Author : soufiane Bonjour, Voulez-vous améliorer la page d inscription de votre site Wordpress et la rendre plus adaptée au thème par défaut de votre

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

Formation Site Web : CSS et PHP

Formation Site Web : CSS et PHP Formation Site Web : CSS et PHP Valentin Roussellet Joachim Jablon Chahine Benchorha VIA Centrale Réseaux 1 er décembre 2008 Qu'est-ce que CSS Les sélecteurs La mise en page et le box-model Une CSS (Cascading

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

Sous Linux, il existe plusieurs programmes

Sous Linux, il existe plusieurs programmes Dix extensions pour Firefox à ne pas manquer Emanuele Prestifilippo Sous Linux, il existe plusieurs programmes pour surfer sur Internet dont un grand nombre est aussi multi-plateforme. Si vous avez choisi

Plus en détail

Créez et administrez vos sites Web

Créez et administrez vos sites Web Joomla! 3.3 Créez et administrez vos sites Web Didier MAZIER Table des matières.. 1 Chapitre 1 : Découvrir Joomla! A. Les raisons de créer un site sous Joomla!.. 9 B. Se documenter sur Joomla! 9 C. La

Plus en détail

Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web

Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web Le Web 1. Qu est-ce que le Web? 7 1.1 Côté serveur : HTTP, FTP, langages, SQL 7 1.2 Côté client : HTML, CSS, JavaScript 10 2. Les langages et leur utilité 10 2.1 HTML 10 2.2 CSS 13 2.3 JavaScript 16 2.4

Plus en détail

CATALOGUE DES FORMATIONS

CATALOGUE DES FORMATIONS CATALOGUE DES FORMATIONS WEB / GRAPHISME ADOBE ACROBAT PRO... 1 ADOBE PHOTOSHOP... 2 ADOBE INDESIGN... 3 ADOBE DREAMWEAVER... 4 ARTISTEER... 5 PREZI... 6 LE LANGAGE HTML... 7 LES FEUILLES DE STYLE CSS...

Plus en détail

Ajouter les miniatures dans le re sultat de recherche pour SharePoint Foundation 2013

Ajouter les miniatures dans le re sultat de recherche pour SharePoint Foundation 2013 Ajouter les miniatures dans le re sultat de recherche pour SharePoint Foundation 2013 Après avoir installé SharePoint Foundation 2013, puis configuré le moteur de recherche, voyons comment personnaliser

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

Les templates. Chapitre 7. 1. Principes et généralités

Les templates. Chapitre 7. 1. Principes et généralités 351 Chapitre 7 Les templates 1. Principes et généralités Les templates Nous utilisons le mot anglais de template, car il est communément utilisé, répandu, et compris dans ce contexte par les professionnels.

Plus en détail

//////////////////////////////////////////////////////////////////// Développement Web

//////////////////////////////////////////////////////////////////// Développement Web ////////////////////// Développement Web / INTRODUCTION Développement Web Le développement, également appelé programmation, désigne l'action de composer des programmes sous forme d'algorithme (codage).

Plus en détail

Créez votre premier site web De la conception à la réalisation

Créez votre premier site web De la conception à la réalisation Chapitre 1 : Introduction A. Introduction 17 Chapitre 2 : Les langages A. L objectif 21 B. L HTML 21 1. L état des lieux 21 2. Les éléments HTML 21 3. Les attributs 22 4. Les caractères 23 5. Les espaces

Plus en détail

Tp1 Ema EMACS Développement Web

Tp1 Ema EMACS Développement Web Tp1 Ema EMACS Développement Web 1/ Description de l application : Notre première application Web a pour objectif de gérer une liste de todo (truc à faire) : Diagramme de classe simplifié : Application

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

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

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

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

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

Les moteurs de templates

Les moteurs de templates Les moteurs de templates Les principaux moteurs de templates php raintpl smarty twig mustache savant3 talus'tpl... 2/15 Avantages : Utilité des moteurs de templates Séparer le traitement de l'affichage

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

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

POUR COMMENCER AJOUTEZ LES RÉSERVATIONS À VOTRE SITE WEB MODULE DE RECHERCHE DE GROUPE D OPENTABLE

POUR COMMENCER AJOUTEZ LES RÉSERVATIONS À VOTRE SITE WEB MODULE DE RECHERCHE DE GROUPE D OPENTABLE AJOUTEZ LES RÉSERVATIONS À VOTRE SITE WEB MODULE DE RECHERCHE DE GROUPE D OPENTABLE Le module de recherche de groupe permet aux utilisateurs de sélectionner un emplacement spécifique de restaurant à partir

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

Catalogue de formation

Catalogue de formation 4 rue Jules Raimu 31 200 Toulouse http://www.creabilis.com contact@creabilis.com Tél. : 05 34 251 641 Fax : 05 34 257 956 Catalogue de formation CREABILIS S.A.R.L au capital de 7500 - R.C.S. Toulouse 441

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

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

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

Introduction à la Simulation

Introduction à la Simulation ou comment créer votre premier jeu vidéo Jacques Duma http://math.et.info.free.fr/ http://ateliermathematique.free.fr/ Aspect visuel souhaité Aspect visuel souhaité Code source de la page HTML Feuille

Plus en détail

Habillage du site et thèmes Drupal

Habillage du site et thèmes Drupal 9 Habillage du site et thèmes Drupal Travailler sur l interface d un site pour lui donner un caractère à la fois distinctif et attractif requiert non seulement un savoir-faire technique mais aussi, comme

Plus en détail

Une (petite) initiation au langage HTML

Une (petite) initiation au langage HTML Une (petite) initiation au langage HTML Julien Coulié Partie 1 : Les bases Le langage HTML (HyperText Markup Language) est un langage de description de documents qui est le standard utilisé pour les pages

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

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

Création d un site Internet (partie 2 )

Création d un site Internet (partie 2 ) Création d un site Internet (partie 2 ) Objectif : Apprendre les bases des langages XHTML et CSS pour réaliser un site CV Site ressource : http://jleu10.free.fr Adresse mail : jleu10@free.fr Jean-Louis

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

SAS Studio SAS pour tous, SAS sur n importe quel périphérique.

SAS Studio SAS pour tous, SAS sur n importe quel périphérique. SAS Studio SAS pour tous, SAS sur n importe quel périphérique. SAS Studio est le dernier né des produits SAS, avec son utilisation, écrire et exécuter du code SAS n aura jamais été aussi simple. Il a pour

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