Module M Frameworks web

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

Download "Module M1105 5. Frameworks web"

Transcription

1 Module M Frameworks web Sébastien THON DUT Informatique 1ère année IUT d'aix-marseille Université, site d Arles Département Informatique Version 1.0 du 15/09/2015

2 2 INTRODUCTION On a vu comment créer un site web à partir de rien, en utilisant du code HTML pour sa structure et son fond, et des CSS pour sa forme. C'est cependant une tâche assez fastidieuse quand il s'agit de créer des sites web un tant soit peu conséquents, et par la suite d'en maintenir à jour le contenu. Pour faciliter l'élaboration d'un site web, il existe toutes sortes d'outils qui permettent d'éviter de tout créer à partir de zéro. Les CMS Les frameworks

3 3 CMS (Content Management System) Un outil de CMS ou «système de gestion de contenu» est un site web disposant de fonctionnalités de publication et offrant une interface d'administration (back-office) permettant à un administrateur de site de créer ou organiser les différentes rubriques de son site. Les articles et le contenu du site sont stockés dans une base de données, et des templates (modèles de pages) permettent de définir la présentation du contenu.

4 4 Ces CMS ont leurs spécificités, certains sont originalement pensés pour gérer des blogs (Dotclear, Wordpress), pour créer des sites marchands (Magento, Prestashop), pour créer des wikis (MediaWiki), etc. Beaucoup de ces CMS sont basés sur la notion d'extensions ou modules («add-ons») : on peut étendre les possibilités du site en ajoutant simplement un module, gratuit ou payant.

5 5 Exemples de CMS : Drupal https://drupal.org/ Dotclear Joomla! Magento Prestashop Spip Wordpress

6 6 Frameworks web Les CMS permettent de créer très facilement et rapidement un site web complet, même pour des personnes n'ayant aucune connaissances en HTML/CSS. Cependant, ces solutions masquent très souvent le code qui se cache derrière et peuvent manquer de souplesse pour créer exactement le site web que vous souhaitez. Une solution intermédiaire entre l'utilisation d'un CMS ou la création complète en HTML/CSS consiste à utiliser un framework.

7 7 Un framework web est une collection d'outils utiles à la création de sites et d'applications web. Il peuvent offrir un ensemble de codes HTML, CSS, Javascript, PHP, des formulaires, etc. Il existe des frameworks CSS, spécialisés dans le CSS, qui offrent des feuilles de style permettant de standardiser l'apparence de sites. Il existe de très nombreux frameworks, qui peuvent se différencier par leurs possibilités, leur simplicité, mais aussi par la compacité de leur code.

8 8 Une liste assez complète des frameworks disponibles : Dans ce cours, nous allons découvrir Bootstrap, qui est l'un des frameworks les plus utilisés.

9 9 Avantages des frameworks : Une présentation similaire quel que soit le navigateur utilisé. Economie de temps de développement en fournissant les fondations de la présentation. Normalisation de la présentation en proposant un ensemble homogène de styles. Une grille pour faciliter le positionnement des éléments. Formulaires, boutons esthétiques, barres de navigation, etc. Prise en compte de tailles d'écran très variées : ordinateurs, smartphones, tablettes, etc. («responsive design»).

10 10 1. Bootstrap Framework open source crée en 2011 par des développeurs de twitter, initialement pour répondre à des besoins internes de développement pour uniformiser l'aspect des pages web. Il s'agissait juste de stylisation CSS, mais le framework s'est ensuite enrichi de composants Javascript. Outre les fonctions Javascript, Bootstrap est essentiellement un fichier CSS comportant de nombreuses classes que l'on peut utiliser directement dans les balises HTML. Il comporte un système de grille pour structurer l'aspect visuel d'une page web. Il apporte du style pour les menus, les boutons, les formulaires,

11 Installation Télécharger Bootstrap sur le site officiel : Essentiellement deux possibilités : Download Bootstrap : permet de récupérer juste les fichiers nécessaires au fonctionnement de Bootstrap. Download source : permet de récupérer en plus tous les fichiers sources.

12 12 Les fichiers de Bootstrap utiles à votre site web sont répartis dans l'arborescence suivante :

13 13 Les fichiers qui comportent «.min» dans leur nom sont des fichiers minifiés («minified»), ils contiennent le même code que le fichier de base (ex : bootstrap.css et bootstrap.min.css) mais sans les commentaires, les espaces, les retours chariots, ce qui les allège et donc accélère leur chargement.

14 14 Vous verrez l'année prochaine lors du cours sur Javascript comment utiliser les fonctions Javascript offertes par Bootstrap. On ne s'y attardera pas dans ce cours où nous n'utiliserons que la partie CSS. Sera vu l'année prochaine

15 15 Il y a deux fichiers CSS, bootstrap.css et bootstrap-theme.css Ce dernier est optionnel, il permet d'utiliser un thème plus élaboré graphiquement. Vous pouvez le voir en action ici :

16 16 Installation Copiez les 3 répertoires css, fonts et js dans un répertoire bootstrap que vous placez à la racine de votre site. racine du site/ bootstrap/ css/ fonts/ js/

17 Utilisation Dans le code de votre page HTML, indiquez dans la zone <head></head> (comme on l'a déjà vu dans le chapitre 2 sur les CSS) que vous voulez utiliser le fichier CSS de Bootstrap : <head> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" > </head> (on utilise le fichier minifié bootstrap.min.css pour que le chargement soit plus rapide) Vous verrez l'année prochaine que pour utiliser le module Javascript de Bootstrap il faut aussi ajouter : <script src="bootstrap/js/bootstrap.min.js"></script>

18 18 Exemple Pour les smartphones, pour que l'affichage occupe tout l'espace disponible avec une taille de 1, c'est à dire sans zoom <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>première page avec Bootstrap</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" > <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>hello, world!</h1> </body> </html> Permet aux navigateurs ne prenant pas en charge HTML5 et les Media Queries CSS3 de le faire.

19 Conteneur Le contenu du site doit être placé dans un conteneur. Bootstrap propose deux classes :.container contient et centre la page sur une largeur fixe, qui s'adapte en fonction de la largeur du navigateur..container-fluid permet à la page d'occuper toute la largeur du navigateur.

20 20 Si on va voir dans le fichier CSS de Bootstrap, on trouve :.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; (min-width: 768px) {.container { width: 750px; } (min-width: 992px) {.container { width: 970px; } (min-width: 1200px) {.container { width: 1170px; } } Vous noterez l'ordre, du plus petit au plus grand, pour avoir la bonne valeur pour width!

21 21 Exemple avec.container : <!DOCTYPE html> <html> <head> <title>bootstrap avec container</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" > </head> <body> <div class="container"> <h1>une page Bootstrap</h1> <p>un peu de texte.</p> </div> </body> </html>

22 22 Exemple avec.container-fluid : <!DOCTYPE html> <html> <head> <title>bootstrap avec container</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" > </head> <body> <div class="container-fluid"> <h1>une page Bootstrap</h1> <p>un peu de texte.</p> </div> </body> </html>

23 Grille Pour faciliter la mise en page des différents éléments d'une page web, Bootstrap propose une grille de 12 colonnes pour les aligner facilement. La grille est découpée en rangées (row) et en colonnes (col).

24 24 Les colonnes ont une taille identique. En revanche la hauteur des rangées est conditionnée par la hauteur de leur contenu. Une rangée prend la hauteur du plus gros élément qu'elle contient. La class.row représente une rangée de la grille.

25 25 Pour définir les colonnes, au maximum de 12, Bootstrap offre 4 x 12 classes : col-xs-1 ou col-sm-1 ou col-md-1 ou col-lg-1 col-xs-2 ou col-sm-2 ou col-md-2 ou col-lg-2 col-xs-3 ou col-sm-3 ou col-md-3 ou col-lg-3... col-xs-12 ou col-sm-12 ou col-md-12 ou col-lg-12 Il y a 4 sortes de classes par colonne pour gérer l'aspect «responsive», car Bootstrap peut s'adapter aux dimensions de l'écran : xs : très petit écran d'un smartphone (extra small) < 768px sm : petit écran d'une tablette (small) < 992px md : écran moyen d'un ordinateur (medium) < 1200px lg : très grand écran d'un ordinateur (large) > 1200px

26 26 Lorsqu'on réduit la taille de l'écran, il y a deux stratégies : réduire la taille des éléments ou disposer autrement les blocs d'informations, par exemple en les empilant. Grand écran Écran plus petit

27 27 Exemple version smartphone : Pour avoir un élément qui occupe 4 colonnes de large suivit d'un élément de 8 colonnes de large sur un smartphone, on a : <div class="row"> <div class="col-xs-4">largeur 4</div> <div class="col-xs-8">largeur 8</div> </div> Quand on passe sur un écran plus grand, les éléments sont aggrandis : Smartphone Tablette, ordinateur

28 28 Exemple version tablette: <div class="row"> <div class="col-sm-4">largeur 4</div> <div class="col-sm-8">largeur 8</div> </div> Quand on passe sur un écran plus grand, les éléments sont aggrandis : Ordinateur Tablette Smartphone Quand on passe sur un écran plus petit, les éléments sont empilés.

29 29 Exemple version grand écran : <div class="row"> <div class="col-lg-4">largeur 4</div> <div class="col-lg-8">largeur 8</div> </div> Quand on passe sur un écran plus petit, les éléments sont réduits et empilés : Grand écran Ecran moyen Petit écran Quand on passe sur un écran encore plus petit, les éléments sont encore plus réduits.

30 30 Exemple : <!DOCTYPE html> <html> <head> <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> <style> div { border: 1px solid black; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4">4 colonnes</div> <div class="col-md-8">8 colonnes</div> </div> </div> </body> </html>

31 31 Pour avoir plusieurs rangées, on utilise plusieurs fois la classe.row : <div class="container"> <div class="row"> <div class="col-lg-1">1 colonne</div> <div class="col-lg-2">2 colonnes</div> <div class="col-lg-3">3 colonnes</div> <div class="col-lg-6">6 colonnes</div> </div> <div class="row"> <div class="col-lg-12">12 colonnes</div> </div> <div class="row"> <div class="col-lg-4">4 colonnes</div> <div class="col-lg-8">8 colonnes</div> </div> </div>

32 32 Offset On peut sauter des colonnes pour ne pas les afficher, avec des classes d'offset : col-xs-offset-1 col-xs-offset-2... col-xs-offset-11 (et aussi -sm-, -md-, -lg-)

33 33 <div class="container"> <div class="row"> <div class="col-lg-3">3 colonnes</div> <div class="col-lg-6">6 colonnes</div> <div class="col-lg-3">3 colonnes</div> </div> <div class="row"> <div class="col-lg-3">3 colonnes</div> <div class="col-lg-offset-6 col-lg-3">3 colonnes</div> </div> </div>

34 34 Mise en page avec Bootstrap au moyen d'une grille <!DOCTYPE html> <html> <head> <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> </head> <body> <div class="container"> <section class="col-sm-10"> <header class="row"> <div class="col-sm-12"> Entete </div> </header> <div class="row"> <nav class="col-sm-2"> Menu </nav> Section </section> </div> <footer class="row"> Pied de page </footer> </div> </body> </html>

35 35 Sur un écran plus petit, les colonnes s'empilent :

36 Style Bootstrap modifie le style de la plupart des éléments HTML : titres, paragraphes, tableaux, etc.

37 37 Titres <h1> à <h6> <h1>h1 Bootstrap heading (36px)</h1> <h2>h2 Bootstrap heading (30px)</h2> <h3>h3 Bootstrap heading (24px)</h3> <h4>h4 Bootstrap heading (18px)</h4> <h5>h5 Bootstrap heading (14px)</h5> <h6>h6 Bootstrap heading (12px)</h6>

38 38 <small> La balise <small> utilisée dans un titre permet de définir un titre secondaire. <h1>h1 heading <small>secondary text</small></h1> <h2>h2 heading <small>secondary text</small></h2> <h3>h3 heading <small>secondary text</small></h3> <h4>h4 heading <small>secondary text</small></h4> <h5>h5 heading <small>secondary text</small></h5> <h6>h6 heading <small>secondary text</small></h6>

39 39 <kbd> <p>utilisez <kbd>ctrl + c</kbd> pour copier l'élément sélectionné.</p>

40 40 Classes typographiques Bootstrap offre de nombreuses classes permettant de modifier l'apparence de paragraphes de texte :.small Texte plus petit, à 85% de la taille du parent. Exemples : <p class="small">ce texte est écrit en petit.</p> <p class="text-right small">ce texte aligné à droite est écrit en petit.</p>

41 41.text-left Texte aligné à gauche..text-center Texte centré..text-right Texte aligné à droite..text-justify Texte justifié. Exemple : <p class="text-center">ce texte est centré.</p>

42 42.text-lowercase Le texte est affiché tout en minuscules..text-uppercase Le texte est affiché tout en majuscules..text-capitalize La première lettre de chaque mot est affichée en majuscule. Il y a bien d'autres classes encore. Vous en trouverez une liste à cette adresse :

43 Tableaux Bootstrap offre de nombreuses classes permettant de modifier l'apparence de tables. Vous en trouverez une liste ici : Voici quelques exemples :

44 44 1) La classe.table <table class="table"> <thead> <tr> <th>firstname</th> <th>lastname</th> <th> </th> </tr> </thead> <tbody> <tr> <td>john</td> <td>doe</td> </tr> <tr> <td>mary</td> <td>moe</td> </tr> <tr> <td>july</td> <td>dooley</td> </tr> </tbody> </table>

45 45 2) La classe.table-striped <table class="table table-striped"> <thead> <tr> <th>firstname</th> <th>lastname</th> <th> </th> </tr> </thead> <tbody> <tr> <td>john</td> <td>doe</td> </tr> <tr> <td>mary</td> <td>moe</td> </tr> <tr> <td>july</td> <td>dooley</td> </tr> </tbody> </table>

46 46 3) La classe.table-bordered <table class="table table-bordered"> <thead> <tr> <th>firstname</th> <th>lastname</th> <th> </th> </tr> </thead> <tbody> <tr> <td>john</td> <td>doe</td> </tr> <tr> <td>mary</td> <td>moe</td> </tr> <tr> <td>july</td> <td>dooley</td> </tr> </tbody> </table>

47 47 4) La classe.table-responsive rend la table responsive et permet de la faire scroller sur petits écrans <div class="table-responsive"> <table class="table"> <thead> <tr> <th>firstname</th> <th>lastname</th> <th> </th> </tr> </thead> <tbody> <tr> <td>john</td> <td>doe</td> </tr> <tr> <td>mary</td> <td>moe</td> </tr> </tbody> </table> </div>

48 Images

49 Formes d'images Bootstrap permet d'arrondir la forme des images avec les classes.imgrounded,.img-circle et.img-thumbnail : <img src="cinqueterre.jpg" class="img-rounded" alt="cinque Terre"> <img src="cinqueterre.jpg" class="img-circle" alt="cinque Terre"> <img src="cinqueterre.jpg" class="img-thumbnail" alt="cinque Terre">

50 Images responsives On peut faire en sorte qu'une image s'adapte à la largeur du navigateur en ajoutant la classe.img-responsive à la balise <img> : <img class="img-responsive" src="paysage.jpg" alt="un paysage"> En pratique, cette classe applique les proprietés display: block; et max-width: 100%; et height: auto; à l'image.

51 Jumbotron Un «jumbotron» est une grande boîte destinée à attirer l'attention. La taille des éléments qu'elle contient est augmentée. Pour le créer, on applique la classe.jumbotron à un élément <div> : <div class="jumbotron"> <h1>bootstrap Tutorial</h1> <p>bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p> </div> <p>text outside the jumbotron.</p>

52 Page header C'est une division de section, le titre apparaît souligné d'un trait : <div class="page-header"> <h1>example Page Header</h1> </div> <p>this is some text.</p> <p>this is another text.</p>

53 Menu On peut obtenir un menu horizontal ou vertical avec la classe nav appliquée à une liste non ordonnée <ul></ul>, selon deux manières : les tabs et les pills.

54 Tabs On peut obtenir un menu horizontal sous la forme d'onglets avec la classe nav nav-tabs. La pae courante peut être marqué avec <li class="active"> <ul class="nav nav-tabs"> <li class="active"><a href="#">home</a></li> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a></li> <li><a href="#">menu 3</a></li> </ul>

55 Pills On peut obtenir un menu horizontal sous la forme de pastilles avec la classe nav nav-pills. La page courante peut être marquée avec <li class="active"> <ul class="nav nav-pills"> <li class="active"><a href="#">home</a></li> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a></li> <li><a href="#">menu 3</a></li> </ul>

56 56 On peut obtenir un menu vertical sous la forme de pastilles avec la classe nav nav-pills nav-stacked. La page courante peut être marquée avec <li class="active"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">home</a></li> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a></li> <li><a href="#">menu 3</a></li> </ul>

57 Boutons Bootstrap propose 7 types de boutons grace aux classes.btn-default,.btn-primary,.btn-success,.btn-info,.btn-warning,.btn-danger,.btnlink : <button type="button" class="btn btn-default">default</button> <button type="button" class="btn btn-primary">primary</button> <button type="button" class="btn btn-success">success</button> <button type="button" class="btn btn-info">info</button> <button type="button" class="btn btn-warning">warning</button> <button type="button" class="btn btn-danger">danger</button> <button type="button" class="btn btn-link">link</button>

58 58 Ces 7 classes peuvent être appliquées sur des boutons, des éléments de types <a>, <button>, ou <input> : <a href="#" class="btn btn-info" role="button">link Button</a> <button type="button" class="btn btn-info">button</button> <input type="button" class="btn btn-info" value="input Button"> <input type="submit" class="btn btn-info" value="submit Button">

59 59 Taille de bouton Bootstrap propose 4 tailles de boutons : <button type="button" class="btn btn-primary btn-lg">large</button> <button type="button" class="btn btn-primary btn-md">medium</button> <button type="button" class="btn btn-primary btn-sm">small</button> <button type="button" class="btn btn-primary btn-xs">xsmall</button>

60 60 Groupe de boutons Des boutons peuvent être regroupés sur une seule ligne si on les encadre d'un <div> auquel on donne la classe.btn-group : <div class="btn-group"> <button type="button" class="btn btn-primary">apple</button> <button type="button" class="btn btn-primary">samsung</button> <button type="button" class="btn btn-primary">sony</button> </div>

61 61 Groupe de boutons verticaux On peut aussi définir des groupes ou les boutons sont alignés à la verticale : <div class="btn-group-vertical"> <button type="button" class="btn btn-primary">apple</button> <button type="button" class="btn btn-primary">samsung</button> <button type="button" class="btn btn-primary">sony</button> </div>

62 62 Groupe de boutons justifiés Le groupe de boutons peut être étendu sur toute la largeur de l'écran : <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-primary">apple</a> <a href="#" class="btn btn-primary">samsung</a> <a href="#" class="btn btn-primary">sony</a> </div>

63 63 Bouton avec menu déroulant <div class="btn-group"> <button type="button" class="btn btn-primary">apple</button> <button type="button" class="btn btn-primary">samsung</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Sony <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">tablet</a></li> <li><a href="#">smartphone</a></li> </ul> </div> </div>

64 Glyphicon Bootstrap propose 260 glyphicons pouvant être utilisés dans du texte, des boutons, des barres d'icônes, des formulaires, etc. La syntaxe est la suivante : <span class="glyphicon glyphicon-name"></span> Où name correspond au nom d'un glyphicon, par exemple : envelope, euro, pencil, music, heart, star, user, film, ok, etc. Vous en trouverez une liste ici : Exemple : <p>ok icon: <span class="glyphicon glyphicon-ok"></span></p>

65 65 <p>envelope icon: <span class="glyphicon glyphicon-envelope"></span></p> <p>envelope icon as a link: <a href="#"><span class="glyphicon glyphicon-envelope"></span></a> </p>

66 66 <p>search icon: <span class="glyphicon glyphicon-search"></span></p> <p>search icon on a button: <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-search"></span> Search </button> </p> <p>search icon on a styled button: <button type="button" class="btn btn-info"> <span class="glyphicon glyphicon-search"></span> Search </button> </p>

67 67 <p>print icon: <span class="glyphicon glyphicon-print"></span></p> <p>print icon on a styled link button: <a href="#" class="btn btn-success btn-lg"> <span class="glyphicon glyphicon-print"></span> Print </a> </p>

68 Badges <a href="#">news <span class="badge">5</span></a><br> <a href="#">comments <span class="badge">10</span></a><br> <a href="#">updates <span class="badge">2</span></a> <button type="button" class="btn btn-primary">primary <span class="badge">7</span></button>

69 Labels <h1>example <span class="label label-default">new</span></h1> <h2>example <span class="label label-default">new</span></h2> <h3>example <span class="label label-default">new</span></h3> <h4>example <span class="label label-default">new</span></h4> <h5>example <span class="label label-default">new</span></h5> <h6>example <span class="label label-default">new</span></h6>

70 70 Pour aller plus loin Le site officiel de Bootstrap Le cours du W3C :

Bootstrap Jean-Claude Charr

Bootstrap Jean-Claude Charr Bootstrap Jean-Claude Charr Maître de conférences IUT de Belfort Montbéliard Université de Franche Comté Introduction C est une collection d outils pour créer des applications web Développé en interne

Plus en détail

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

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

Plus en détail

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

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

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

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

Créer son site web. Avec la distribution e-change http://www.plateforme-echange.org/ Benoît Mamet Cédric Morin

Créer son site web. Avec la distribution e-change http://www.plateforme-echange.org/ Benoît Mamet Cédric Morin Créer son site web Avec la distribution e-change http://www.plateforme-echange.org/ Benoît Mamet Cédric Morin 1 Personnaliser l'apparence du site Avec la distribution e-change 2 La version rapide 3 Choisir

Plus en détail

Systèmes de Gestion de Contenu

Systèmes de Gestion de Contenu Introduction aux de site Web Master 1 CAWEB Page 1/7 Introduction Définition CMS Content Management Systems : logiciels de conception et de mise à jour dynamique de site web ou d'application multimédia

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

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

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

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

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

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez Mohammed REZGUI m.rezgui06@gmail.com Basé sur le cours de Guillaume Perez Contenu, Organisation Objectif principal: Base pour la création d un site Notions de client-serveur Notions de programmations Option

Plus en détail

2011-2012. Intro Web. PICARD GRAVEL Marie-Eve

2011-2012. Intro Web. PICARD GRAVEL Marie-Eve Intro Web 2011-2012 «nous donnerons tout d'abord les définitions de l'internet, du Web et du langage XHTML. Nous expliquerons ensuite ce qu'est une url et les différentes actions induites lorsque je demande

Plus en détail

Anatomie de Twenty Twelve

Anatomie de Twenty Twelve 25 Anatomie de Twenty Twelve Architecture de base d un thème WordPress Avant de faire connaissance avec les fichiers qui composent Twenty Twelve, il est important de comprendre comment est conçu un thème

Plus en détail

Worldsoft CMS Méga Menu. Avec le Méga Menu du Worldsoft CMS, vous pouvez créer des menus de navigation.

Worldsoft CMS Méga Menu. Avec le Méga Menu du Worldsoft CMS, vous pouvez créer des menus de navigation. 1 Mega Menu Avec le du Worldsoft CMS, vous pouvez créer des menus de navigation. Vous pouvez mettre en place autant de menus que vous le désirez et les adapter graphiquement. Avec votre propre contenu

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

Compte rendu de PHP MySQL : création d un formulaire de base de données

Compte rendu de PHP MySQL : création d un formulaire de base de données REVILLION Joris Décembre 2009 3EI Compte rendu de PHP MySQL : création d un formulaire de base de données Objectifs : Le principal objectif de ce cours est de découvrir et de nous familiariser avec le

Plus en détail

Bootstrap Prise en main

Bootstrap Prise en main Bootstrap Prise en main 1 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14 I) Modifier un thème existant Theme : Site startbootstrap.com Télécharger Agency Code HTML index : page de contenu Style

Plus en détail

IAE - Web Marketing. Créer un site internet «simple» Publier un site internet Référencer un site internet. Olivier Toscano Gérant WebCMS Sàrl

IAE - Web Marketing. Créer un site internet «simple» Publier un site internet Référencer un site internet. Olivier Toscano Gérant WebCMS Sàrl IAE - Web Marketing Créer un site internet «simple» Publier un site internet Référencer un site internet Olivier Toscano Gérant WebCMS Sàrl HTML HTML est un langage à balisage Les balises permettent de

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

Il faudra absolument séparer le contenu de la page web (le fichier HTML) de son apparence (le fichier CSS).

Il faudra absolument séparer le contenu de la page web (le fichier HTML) de son apparence (le fichier CSS). ISN- semaine 10 HTML 1. Introduction HTML et CSS : deux langages pour créer un site web Pour créer un site web, on doit donner des instructions à l'ordinateur. Il ne suffit pas simplement de taper le texte

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

TP 8 : Créer son site web de D à Z...

TP 8 : Créer son site web de D à Z... TP 8 : Créer son site web de D à Z... Présentation Nous allons tenter de créer en 2 ou trois séances un site WEB de toute pièce. Vous devrez choisir un thème (ce que vous voulez, ou presque...). Vous établirez

Plus en détail

TP Initiation au langage HTML

TP Initiation au langage HTML TP Initiation au langage HTML (1) Rappels de quelques généralités Un fichier HTML n'est pas compilé (ce n'est pas un programme) Un fichier HTML est un fichier texte simple, parfaitement lisible, respectant

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

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

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

Plus en détail

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

Formation Joomla 3 Réalisez votre Template

Formation Joomla 3 Réalisez votre Template Formation Joomla 3 Réalisez votre Template Flash-comet.com Cours version 2015 1 Sommaire Contenu du cours... 3 Création d'un template avec "Template Créator CK"... 3 Principe de fonctionnement... 3 Ce

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

Les feuilles de styles

Les feuilles de styles Qu'est-ce que les feuilles de style? Les feuilles de style CSS pour Cascading Style Sheets en anglais est un langage informatique qui sert à décrire la présentation des documents HTML. L'un des objectifs

Plus en détail

Documentation Template Creator CK

Documentation Template Creator CK 1 2 Remerciements Je tiens à remercier tous ceux qui m'ont soutenu et encouragé dans ce projet, ceux qui m'ont aidé, qui ont répondu à mes questions et qui m'ont permis au fil du temps de rassembler toutes

Plus en détail

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web NFA016 : Introduction O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Pour naviguer sur le Web, il faut : 1. Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des

Plus en détail

Personnaliser un thème WordPress pour un Blog de l'ara. Méthode pas à pas.

Personnaliser un thème WordPress pour un Blog de l'ara. Méthode pas à pas. Personnaliser un thème WordPress pour un Blog de l'ara. Méthode pas à pas. Table des matières I. Les outils nécessaires... 3 II. Utilisation de l'outil Artisteer.... 3 1. Pourquoi utiliser Artisteer?...

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

Utiliser un CMS: Wordpress

Utiliser un CMS: Wordpress Utiliser un CMS: Wordpress Annie Danzart Annie.Danzart@telecom-paristech.fr Wordpress Concevoir un site web statique Concevoir un site web dynamique Choisir un hébergement Choix du CMS Wordpress: installation

Plus en détail

Initiation à OpenOffice

Initiation à OpenOffice Initiation à OpenOffice Le module de traitement de texte (Writer) Introduction: Le logiciel OpenOffice est un intégré bureautique (du type Works) contenant plusieurs applications: traitement de texte (Writer),

Plus en détail

Dans ce mémento, vous trouverez les informations détaillées pour configurer les fonctionnalités du Responsive Design dans le Worldsoft CMS:

Dans ce mémento, vous trouverez les informations détaillées pour configurer les fonctionnalités du Responsive Design dans le Worldsoft CMS: 1 La taille et la résolution de l'écran des ordinateurs portables, des ordinateurs de bureau, des tablettes et des smartphones peuvent considérablement varier. C'est pour cette raison, que les sites Web

Plus en détail

Introduction à HTML et CSS

Introduction à HTML et CSS ENS de Cachan Introduction à HTML et CSS Françoise Tort Chargement d'une page Web h"p://site.chemin./page.html navigateur requête.html.css.jpg.mp3 serveur web fichiers Le navigateur web traduit les pages,

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

Initiation à html et à la création d'un site web

Initiation à html et à la création d'un site web Initiation à html et à la création d'un site web Introduction : Concevoir un site web consiste à définir : - l'emplacement où ce site sera hébergé - à qui ce site s'adresse - le design des pages qui le

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

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

Initiation à html et à la création d'un site web

Initiation à html et à la création d'un site web Initiation à html et à la création d'un site web Lors de la première séance de TP, vous avez mis en place la structure d'accueil pour votre site personnel et vous avez appris comment accéder librement

Plus en détail

CARTES DE VISITE, CARTE DE VŒUX, ETIQUETTES AVEC OPENOFFICE

CARTES DE VISITE, CARTE DE VŒUX, ETIQUETTES AVEC OPENOFFICE CARTES DE VISITE, CARTE DE VŒUX, ETIQUETTES AVEC OPENOFFICE 1- Créer une planche 2- Indiquer les mesures 3- Indiquer le format de la page 4- Ajouter une bordure 5- Ajouter du texte 6- Ajouter une image

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

Utilisation du site Regio 21.ch

Utilisation du site Regio 21.ch Utilisation du site Regio 21.ch Introduction Ce document est un petit aide-mémoire qui vous permettra de réaliser des tâches simples avec l'outil TYPO3. La meilleure attitude en cas de doute est d'essayer

Plus en détail

LES TABLES. Exemple de table :
cellule 1 cellule 2
cellule 3 cellule 4

LES TABLES. Exemple de table : <table> <tr> <td>cellule 1</td> <td>cellule 2</td> </tr> <tr> <td>cellule 3</td> <td>cellule 4</td> </tr> </table> LES TABLES Les tables servent pour l'affichage de «données tabulaires», c'est-à-dire des informations présentées logiquement en rangées et en colonnes. Son intégration peut paraitre fastidieuse mais c'est

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

Dreamweaver CS6 pour PC/Mac Pour des sites full CSS conformes aux standards du W3C

Dreamweaver CS6 pour PC/Mac Pour des sites full CSS conformes aux standards du W3C Introduction L'Internet aujourd'hui 7 Le World Wide Web Consortium et les standards 7 Les logiciels de conception de sites web 7 L'objectif du livre 8 Interface de conception L'environnement système 9

Plus en détail

Responsive Web Design (RWD)

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

Plus en détail

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

Plan du travail. 2014/2015 Cours TIC - 1ère année MI 86

Plan du travail. 2014/2015 Cours TIC - 1ère année MI 86 Plan du travail Chapitre 1: Internet et le Web Chapitre 2: Principes d Internet Chapitre 3 : Principaux services d Internet Chapitre 4 : Introduction au langage HTML 2014/2015 Cours TIC - 1ère année MI

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

SARL DDLX Multimédia Place du général de Gaule 34160 Boisseron Tèl :09 7219 85 01 Email : support@ddlx.org. Agence Web. Design Prestashop personnalisé

SARL DDLX Multimédia Place du général de Gaule 34160 Boisseron Tèl :09 7219 85 01 Email : support@ddlx.org. Agence Web. Design Prestashop personnalisé SARL DDLX Multimédia Place du général de Gaule 34160 Boisseron Tèl :09 7219 85 01 Email : support@ddlx.org Agence Web Design Prestashop personnalisé création de boutique en ligne site de présentation site

Plus en détail

Initiation à Dreamweaver

Initiation à Dreamweaver Benjamin Godefroy Redouane Zarghoune Initiation à Dreamweaver SI28 Ecriture interactive et multimédia Automne 2004 Organisation du TD Préambule : Introduction au HTML Présentation de Dreamweaver Exercices

Plus en détail

MODULE HTML CSS. Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr

MODULE HTML CSS. Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr MODULE HTML CSS Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr ORGANISATION DU MODULE 13 séances de 2 heures une partie cours une partie exercices sur machine. Modalités de contrôle : partiel en fin

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

PRISE EN MAIN D UN TABLEUR. Version OPEN OFFICE

PRISE EN MAIN D UN TABLEUR. Version OPEN OFFICE PRISE EN MAIN D UN TABLEUR Version OPEN OFFICE Prise en main d un tableur page 2 1. L utilisation de la souris Pour faire fonctionner un tableur, on utilise le clavier mais aussi la souris. Rappelons,

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

Créer un menu adaptable à toutes les résolutions

Créer un menu adaptable à toutes les résolutions Créé par : feektif Ce guide est reproductible en : 30 à 40 min et est d'un niveau : Intermédiaire Pour de tutoriel, nous allons réaliser un menu composé de cinq liens, chacun divisé en 3 éléments. Un curseur

Plus en détail

Utilisation du CMS Joomla

Utilisation du CMS Joomla Utilisation du CMS Joomla Index Définition d un CMS Concept de base Joomla : l utilisation Terminologie Joomla Administration Le menu de l administration Arborescence Gestion des catégories Création d

Plus en détail

> Table des matières. Gestion des pages courantes

> Table des matières. Gestion des pages courantes I N T E R F A C E A D M I N I S T R A T I O N M A N U E L D ' U T I L I S A T I O N D E T Y P O 3 V 4. 2 R É D A C T E U R V. DARDENNE DÉCEMBRE 2009 > Table des matières Gestion des pages courantes > Accès

Plus en détail

Personnalisation des templates pour LogiVert 6

Personnalisation des templates pour LogiVert 6 Manuel Personnalisation des templates pour LogiVert 6 Copyrights (c)2013 + LogiVert BV Site web : www.logivert.com PRESENTATION... 3 INTRODUCTION... 3 LES 4 NIVEAUX... 3 NIVEAU1 CONFIGURATION DE TEMPLATE...

Plus en détail

Date de création : 03/06/2013 Date de modification : Fiches techniques PMB - Cellule PMB - cellulepmb@ac-rennes.fr

Date de création : 03/06/2013 Date de modification : Fiches techniques PMB - Cellule PMB - cellulepmb@ac-rennes.fr Titre Paramétrer et personnaliser le style GENBIB Rubrique 6. Opac 6.1.2 Auteur Edith Boulo Version PMB : 3.4.16 Date de création : 03/06/2013 Date de modification : 1. Paramétrage par défaut Voici un

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

Questions à choix multiples Page 1 de 10

Questions à choix multiples Page 1 de 10 INF2005 Programmation web Examen intra hiver 2015 Question #1 Qui a gagné la guerre des fureteurs dans les années 1990? a) Netscape b) Internet Explorer c) Firefox d) Chrome e) Opera f) Mosaic g) Aucune

Plus en détail

Personnaliser et adapter SPIP Développeur SPIP

Personnaliser et adapter SPIP Développeur SPIP Personnaliser et adapter SPIP Développeur SPIP En Théorie Le fonctionnement de SPIP Qu est ce que SPIP? SPIP (Système de Publication pour l Internet Partagé) est un logiciel libre destiné à la production

Plus en détail

PREMIÈRE PRISE EN MAIN DE DJANGO CMS

PREMIÈRE PRISE EN MAIN DE DJANGO CMS PREMIÈRE PRISE EN MAIN DE DJANGO CMS 1. PRÉSENTATION DE DJANGO CMS Django CMS est un système de gestion de contenu basé sur le serveur Django / Python. Simple d'utilisation, il dispose d'une interface

Plus en détail

Les feuilles de Style HTML : CSS

Les feuilles de Style HTML : CSS Les feuilles de Style HTML : CSS Tarek Melliti Laboratoire IBISC (Informatique Biologie Intégrative et Systèmes Complexes) tarek.melliti@ibisc.univ-evry.fr Plan du cours Séances 1 : Introduction à l informatique

Plus en détail

INITIATION AU LANGAGE HTML

INITIATION AU LANGAGE HTML INITIATION AU LANGAGE HTML I INTRODUCTION Seules les bases du langage HTML sont abordées ici. Cette initiation a pour but de "démarrer", les nombreuses ressources concernant ce langage vous permettront

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

GetSimple 3. Le guide complet pour créer des sites web. GetSimple 3 - Le guide complet pour créer des sites web. GetSimple 3 26,50.

GetSimple 3. Le guide complet pour créer des sites web. GetSimple 3 - Le guide complet pour créer des sites web. GetSimple 3 26,50. Le guide complet pour créer sites web Vous verrez ensuite comment gérer les pages qui constituent la structure du site : créer les pages, les paramétrer pour la publication, les modifier, les supprimer

Plus en détail

Mémento des balises HTML 5

Mémento des balises HTML 5 Mémento des balises HTML 5 s de premier niveau Les balises de premier niveau sont les principales balises qui structurent une page HTML. Elles sont indispensables pour réaliser le «code minimal» d'une

Plus en détail

Les API JavaScript du HTML5 Intégrez la puissance du HTML5 dans vos applications Web

Les API JavaScript du HTML5 Intégrez la puissance du HTML5 dans vos applications Web 52 Les API JavaScript du HTML5 Intégrez la puissance du HTML5 dans vos applications Web D'où proviennent ces données qui permettent de vous localiser? Pour les smartphones, deux procédés peuvent être utilisés

Plus en détail

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56)

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Guide d'utilisation De Kompozer AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Table des matières Fiche1 : Créer, nommer et sauvegarder une page...2 Fiche2 : Modifier les couleurs et le fond

Plus en détail

Tutoriel d utilisation

Tutoriel d utilisation Tutoriel d utilisation JCE est l éditeur le plus complet pour Joomla! JCE est capable de gérer les mise en page comme un éditeur de type Word ou Open Office. Il permet d insérer des images et médias de

Plus en détail

PROGRAMMER UNE PAGE WEB EN HTML ET CSS

PROGRAMMER UNE PAGE WEB EN HTML ET CSS Lycée Felix Le Dantec - Lannion PROGRAMMER UNE PAGE WEB EN HTML ET CSS 1STI2D TP8-3H NOM : PRÉNOM : CLASSE : Condition de réalisation : Travail seul Durée : 3 heures Matériel : un ordinateur sous Ubuntu

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

SPECIFICATIONS TECHNIQUES POUR LE DEVELOPPEMENT DES PLUGINS TOURISM SYSTEM CLIENT. V 1.0 27 janvier 2011

SPECIFICATIONS TECHNIQUES POUR LE DEVELOPPEMENT DES PLUGINS TOURISM SYSTEM CLIENT. V 1.0 27 janvier 2011 SPECIFICATIONS TECHNIQUES POUR LE DEVELOPPEMENT DES PLUGINS TOURISM SYSTEM CLIENT V 1.0 27 janvier 2011 Ce document présente l'utilisation des plugins dans Tourism System Client. Dans le Client, un plugin

Plus en détail

Activation et personnalisation de votre site mobile

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

Plus en détail

Documentation de CMS-gen

Documentation de CMS-gen Table des matières GÉNÉRALITÉ... 1 LA ZONE D'ADMINISTRATION... 2 LOGIN SUR LA ZONE D ADMINISTRATION... 2 EDITION DU CONTENU EN LIGNE... 3 LE MODE EDITION... 3 PUBLICATION... 3 SUPPRIMER DES MODIFICATIONS...

Plus en détail

Writer. Le logiciel se présente directement avec une page vierge, prête à l emploi pour créer votre nouveau document.

Writer. Le logiciel se présente directement avec une page vierge, prête à l emploi pour créer votre nouveau document. Writer Attention : Les documents faits avec Writer ne pourront être lu qu avec Writer, sauf manipulation permettant l échange avec d autres logiciels. Le logiciel se présente directement avec une page

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

Traitement de texte LIBRE - OFFICE WRITER

Traitement de texte LIBRE - OFFICE WRITER Traitement de texte LIBRE - OFFICE WRITER POUR : PAGE - Outil de base 2 - Encadrer un titre,un paragraphe. 3 - Créer un tableau. 4 - Modifier la largeur des colonnes dans un tableau. 5 - Modifier la hauteur

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

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

Gérer un site avec Kompozer. Josiane Ducournau CRDP Aquitaine

Gérer un site avec Kompozer. Josiane Ducournau CRDP Aquitaine Gérer un site avec Kompozer Organisation, plan de travail Création de pages Tout les fichiers, dossiers, images auront des noms (ex. nouveautes.htm ; ces noms ne devront comporter ni espaces, ni caractères

Plus en détail

Programmation Web TP1 - HTML

Programmation Web TP1 - HTML Programmation Web TP1 - HTML Vous allez réaliser votre premier site Web dans lequel vous présenterez la société SC, agence spécialisée dans la conception des sites internet. 1 - Une première page en HTML

Plus en détail

Portail des communes Guide Référent ville

Portail des communes Guide Référent ville Portail des communes Guide Référent ville Services aux communes Introduction Vous êtes Référent pour votre commune et venez de recevoir vos identifiants de connexion à l ENT école. Ce document va vous

Plus en détail

METTRE EN FORME. Colonnes et lignes. Largeur des colonnes

METTRE EN FORME. Colonnes et lignes. Largeur des colonnes METTRE EN FORME Vous apprendrez dans cette partie à utiliser plusieurs outils pour mettre en forme les cellules, mais aussi le contenu des cellules, afin de faciliter la lecture de vos tableaux. Colonnes

Plus en détail

W3b-D4shB0ard documentation v0.1b.

W3b-D4shB0ard documentation v0.1b. W3b-D4shB0ard documentation v0.1b. Sommaire W3b-D4shB0ard documentation v0.1b...1 Informations relatives au projet...2 Description...2 License...2 Disclaimer...2 Requirements...2 Installation...3 Installation

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

Formation à l administration de votre site Internet

Formation à l administration de votre site Internet Rédacteur : B2F Concept Date : 01/08/2012 Destinataire : Mairie de Drumettaz Formation à l administration de votre site Internet Introduction...2 Connexion à l administration...2 Gestion de contenu...3

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

CREATION D UN QUESTIONNAIRE AVEC QUESTION-REPONSE

CREATION D UN QUESTIONNAIRE AVEC QUESTION-REPONSE CREATION D UN QUESTIONNAIRE AVEC QUESTION-REPONSE ETAPE 1 : CREATION DU QUESTIONNAIRE SIMPLE Nous allons concevoir un questionnaire sur les moyens de communications. Pour créer un formulaire, cliquez sur

Plus en détail

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

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

Plus en détail

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

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

Plus en détail