Présentation du Framework BootstrapTwitter

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

Download "Présentation du Framework BootstrapTwitter"

Transcription

1 COUARD Kévin HELVIG-LARBRET Blandine Présentation du Framework BootstrapTwitter IUT Nice-Sophia LP-SIL IDSE Octobre 2012

2 Sommaire I. INTRODUCTION... 3 Définition d'un framework... 3 A propos de BootstrapTwitter... 3 II. NOTION DE GRILLE... 4 III. ELEMENTS DE BASE... 4 Listes... 4 Tableaux... 5 Formulaires... 5 Boutons... 5 IV. COMPOSANTS INTEGRES... 5 Barre de navigation... 5 Effets typographiques... 5 Thumbnails... 6 V. RESPONSIVE-DESIGN... 6 VI. PLUGINS JQUERY... 6 VII. PLUGINS ET EXTENSIONS... 6 Références

3 Présentation du Framework BootstrapTwitter I. INTRODUCTION Définition d'un framework Un framework est un outil de programmation informatique constitué de composants structurés permettant de créer les fondations d'un code et d'organiser celui-ci. Il permet ainsi d'améliorer la productivité ou de faciliter la maintenance du logiciel. Beaucoup de frameworks sont employés pour les applications web basées sur les langages Java, Python, Ruby, PHP... Les frameworks CSS sont spécialisés, comme leur nom l'indique, dans les feuilles de style CSS. C'est-à-dire qu'ils permettent de mettre en forme des pages web : organisation, aspect visuel, animation... Ils présentent l'avantage d'harmoniser l'affichage des pages web quel que soit le navigateur. De plus, ils facilitent le développement grâce aux éléments prédéfinis qu'ils proposent, notamment la prise en compte des contraintes d'affichage liées aux différentes technologies (smartphone, tablettes, ipod...). Devenus à la mode, de nombreux frameworks CSS ont ainsi vu le jour, dont BootstrapTwitter. A propos de BootstrapTwitter Publié en Août 2011 pour répondre à des besoins internes de développement de l'entreprise Twitter, BootstrapTwitter est donc un framework CSS mis à disposition du public sous licence Apache2. En version 2 depuis 2012, il est testé et supporté sur les principaux navigateurs modernes tels que Chrome, Safari, Internet Explorer et Firefox. Il propose un ensemble de grille, de styles, de typographies, de messages... permettant de démarrer le design d'un site web rapidement. BootstrapTwitter est livré avec CSS compilés, non compilés et des exemples de modèle. Il contient : du code fondé sur HTML 5 et CSS 3 ; des éléments "responsive-design" qui prennent en compte les différents formats d'affichage des principaux outils de navigation (smartphones, tablettes...) ; des éléments permettant la compatibilité avec la majorité des navigateurs ; une mise en page basée sur un principe de grille ; un reset CSS basé sur Normalize.css* ; une architecture basée sur LESS*; une bibliothèque totalement open source, sous licence Apache ; des plugins jquery pour l'utilisation de JavaScript ; et la documentation présente sur le site de Twitter. A l'installation, un répertoire principal "bootstrap" se répartit en 3 sous-répertoires contenant divers fichiers : - le répertoire "css" contenant les classes de bases, - le répertoire "img" contenant une collection d icônes fournies par Glyphicons* en version noires ou blanches, - et le répertoire "js" contenant des fonctions JavaScript des composants de Bootstrap. *Normalize.css = framework permettant d'utiliser les styles par défaut du navigateur *LESS = outil permettant d'étendre les possibilités de CSS *Glyphicons = librairie d'icones 3

4 Tous les fichiers sont également présents en une version ".min" qui définit le même code que celui du fichier de base correspondant, mais épuré des commentaires et ainsi allégé pour accélérer le chargement. Pour utiliser BootstrapTwitter, il est impératif de coder en HTML5. Il faut alors déclarer les différentes ressources utilisées : - au moins un fichier bootstrap(.min).css - et éventuellement un fichier bootstrap-responsive(.min).css si l'application est destinée à être utilisée sur des supports technologiques variés. <!DOCTYPE html> <head> <link href= "bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <linkhref="bootstrap/css/bootstrapresponsive.min.css"rel="stylesheet"type="text/css"> </head> II. NOTION DE GRILLE La première fonctionnalité de BootstrapTwitter est de pouvoir organiser les différents éléments d'une page web sur une grille prédéfinie. Par défaut cette grille comporte 12 colonnes, mais il possible de changer ce chiffre en modifiant la configuration. Du point de vue code, l utilisation de cette grille est très simple : il suffit d ajouter à une balise <div>, pour une ligne définie par la classe "row", une classe "span" suivie du nombre de colonnes. Dans l'exemple suivant, 2 éléments ont été créés sur une ligne : l'un a une largeur de 4 colonnes, l'autre de 8 colonnes. <div class="row"> <div class="span4">element de largeur 4</div> <div class="span8">element de largeur 8</div> </div> Cette grille s avère très utile pour le squelette de la page web (header, menu, contenu) et remplace parfaitement la balise <table> pour la mise en forme en tableau. III. ELEMENTS DE BASE Listes BootstrapTwitter permet également de mettre en forme des listes en utilisant simplement les balises HTML <ol>, <ul>, <li>. Elles sont alors modifiées automatiquement par le CSS qui permet un meilleur rendu graphique que les composants de bases du navigateur. Un icône est inséré à chaque début de ligne pour servir de puce aux balises <ul>, mais il est aussi possible de ne pas en utiliser en ajoutant simplement une classe "unstyled". 4

5 Tableaux Les tableaux aussi ont été remodelés, et leur utilisation simplifiée par la même occasion. Le framework gère plusieurs types de tableaux avec diverses caractéristiques comme la présence ou non de bordure, la couleur du fond... Pour choisir le type de tableau, il suffit d ajouter à la balise <table> une classe correspond au tableau voulu et de réaliser son tableau comme sous HTML puisque que les balises <tbody>, <tr>, <th>, <td>... sont traitées. Formulaires Ici, l outil nous permet de réaliser des formulaires en utilisant les balises HTML classiques. Elles sont toutes gérées, du champ de saisies à la liste déroulante. Encore une fois, l utilisation ce fait par l utilisation de classe CSS et de balise HTML. La mise en forme du formulaire peut, elle aussi, être modifié par un simple ajout de classe. On peut ainsi obtenir des formulaires verticaux ou horizontaux, des éléments plus ou moins grands... A cela s ajoute la couleur de l élément qui peut varier selon la validation de la saisie. Boutons Pour finir, parmi les éléments de base, il y a les boutons dont il est possible de choisir la taille et la couleur. Ce qui est intéressant avec ce composant, c est qu il est possible, en ajoutant une classe, de transformer un lien (balise <a>) en bouton. IV. COMPOSANTS INTEGRES Barre de navigation La barre de navigation est un des composants ajoutés par Twitter dans son framework. Totalement inventé, il utilise les balises <div> associées à des classes CSS. Il existe plusieurs composants pour personnaliser la barre comme les champs de recherche, les sous-menus dynamiques (dropdown) et même les classes permettant de donner un rendu différent suivant le menu sélectionné. On peut même obtenir un rendu sous forme d onglet ou encore, comme sur les forums, sous forme hiérarchique. Effets typographiques De nombreux effets typographiques sont gérés par BootstrapTwitter, mais certains sont aussi ajoutés à ceux existants. Ainsi les balises comme <h1>, <p>... voient leur rendu amélioré. La couleur, la taille (par default : 14px) et l'alignement y sont configurables. 5

6 D autres effets ont été ajoutés, comme les classes "hero-unit" ou "page header". L'utilisation de la première modifie le fond et la taille de la police. La seconde apporte un titre à la page. Thumbnails Les images aussi voient leur rendu amélioré grâce à l utilisation de la classe "thumbnails". Il est ainsi possible de produire des effets au passage de la souris sur une image : changement de la bordure, apparition d'une légende ou encore modification de la forme de l image (ovale, rond...). V. RESPONSIVE-DESIGN Un des majeurs avantages de ce framework est le responsive-design. La page web l utilisant s adapte dynamiquement à la taille de la fenêtre, ce qui la rend compatible avec les smartphones et les tablettes. Certaines classes CSS permettent d aller plus loin en rendant visible certains composants HTML uniquement à certains appareils. VI. PLUGINS JQUERY BootstrapTwitter apporte aussi son lot de plugins jquery modifiés pour obtenir un rendu en adéquation avec le reste de la page. Ainsi, il est proposé pas moins de 12 plugins modifiés allant de la "PopUp Modal", pour afficher un message à l écran, jusqu'au "carousel" qui permet de faire défiler des images horizontalement, en passant par les "alert" pour notifier l utilisateur. En plus d être en accord avec le design du framework, ces plugins sont bien plus simples à l emploi que les plugins basiques. VII. PLUGINS ET EXTENSIONS BootstrapTwitter ayant été conçu pour être générique, il également possible d'ajouter des plugins et des extensions extérieurs. Ainsi des développeurs indépendants proposent d autres plugins jquery comme le "DatePicker", qui affiche un calendrier, ou "ColorPicker", qui permet de choisir une couleur à partir d une palette. De même, certains sites proposent des extensions pour améliorer l aspect des composants déjà existants, voire même les adapter exclusivement aux mobiles. BootstrapTwitter est donc un framework de développement web facile d'utilisation et riche de composés qui permet de créer rapidement des pages internet esthétiques et dynamiques. 6

7 Références Références site de BootstrapTwitter : site Wikipedia : site de présentation de Normalize.css : site de présentation de LESS : site de la librairie Glyphicons : site du zero : 7

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

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 jquery Mobile La bibliothèque JavaScript pour le Web mobile É r i c S a r r i o n Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 1 Installation de jquery Mobile

Plus en détail

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

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

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

Plus en détail

Le 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

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

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

À 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

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

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

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

Pages et sites Web. Table des matières 1. Microsoft Expression Web S'orienter vers l'accessibilité...12

Pages et sites Web. Table des matières 1. Microsoft Expression Web S'orienter vers l'accessibilité...12 Pages et sites Web Table des matières 1 Microsoft Expression Web S'orienter vers l'accessibilité...12 Espace de travail Installer le logiciel...13 Lancer/quitter Microsoft Expression Web 2...13 Découvrir

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

Version 4.0. Multinet Ressources Inc. Page 1 sur 13

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

Plus en détail

Création du site dans Dreamweaver :

Création du site dans Dreamweaver : CHARGER, CREER et ENREGISTRER 1. Se connecter au RESEAU du COLLEGE avec tes 2 mots de passe 2. Charge le logiciel Au lancement du logiciel, l écran suivant s affiche : Palette des objets Lanceur Zone de

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

Prototyper un site web avec Awestruct et Boostrap

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

Plus en détail

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

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

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

Introduction à la programmation web

Introduction à la programmation web Introduction à la programmation web Nouvelles Technologies Dr. Thé Van LUONG The-Van.Luong@heig-vd.ch HEIG-VD Switzerland 8 octobre 2015 1/34 8 octobre 2015 1 / 34 Plan 1 État de l art des langages orientés

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

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

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

Remerciements. Je tiens à remercier tous ceux qui m'ont aidé et soutenu dans ce projet. Merci à tous! Cédric KEIFLIN

Remerciements. Je tiens à remercier tous ceux qui m'ont aidé et soutenu dans ce projet. Merci à tous! Cédric KEIFLIN KEIFLIN Cédric 1 Janvier KEIFLIN Cédric 2 Janvier Remerciements Je tiens à remercier tous ceux qui m'ont aidé et soutenu dans ce projet. Merci à tous! Cédric KEIFLIN KEIFLIN Cédric 3 Janvier Mes sites

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

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

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

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

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

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

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

Plus en détail

Aide à l utilisation du logiciel IziSpot.Mobi

Aide à l utilisation du logiciel IziSpot.Mobi 1 Sommaire 1. Description logiciel (explication des menus)... 3 1.1. Description de la barre de menu... 3 2. Onglet configuration... 4 2.1. Gestion du logo... 4 2.1.1. Affichage du zoom... 4 2.1.2. Disposition

Plus en détail

Recueil des Fiches Utilisateurs de «SharePoint»

Recueil des Fiches Utilisateurs de «SharePoint» Recueil des s s de «SharePoint» Ce document regroupe les fiches utilisateurs décrivant la navigation et l utilisation de l application SharePoint. (Référence DSI-DT-Sharepoint-1 Avril 2014) ERGONOMIE GENERALE

Plus en détail

INTRODUCTION AU LOGICIEL SPHINX

INTRODUCTION AU LOGICIEL SPHINX INTRODUCTION AU LOGICIEL SPHINX Sphinx est un logiciel d'enquête et d'analyse des données. Il permet de vous assister dans chacune des quatre grandes étapes de réalisation d'une enquête : 1. L élaboration

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

Ce code peut s insérer à plusieurs endroits entre les balises head (le plus souvent) ou directement à l intérieur des balises body.

Ce code peut s insérer à plusieurs endroits entre les balises head (le plus souvent) ou directement à l intérieur des balises body. A/ Utilisation de Javascript UE Libre : Internet et composition de pages Web TP n 3 Le Javascript est un langage de script incorporé dans un document HTML. Historiquement il s'agit même du premier langage

Plus en détail

Fonctionnalités avancées de Word

Fonctionnalités avancées de Word BIBLIOTHÈQUE UNIVERSITAIRE DE LILLE 1 Thèses et littérature grise Fonctionnalités avancées de Word Bibliothèque de l université des sciences et technologies de Lille 1 Diffusion électronique des thèses

Plus en détail

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

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

Plus en détail

APlayerFP! pour les nuls

APlayerFP! pour les nuls APlayerFP! pour les nuls Module audio de playlist pour Joomla! APlayerFP pour Joomla! 3 Ce document et l'illustration en couverture sont publiés sous la licence libre Creative Commons-BY-SA http://creativecommons.org/licenses/by-sa/2.0/fr/deed.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

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

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

Projet Web. Tim Burton. Refonte complète du site de Tim Burton en utilisant les dernières technologies du web : HTML 5 / CSS 3 / JavaScript...

Projet Web. Tim Burton. Refonte complète du site de Tim Burton en utilisant les dernières technologies du web : HTML 5 / CSS 3 / JavaScript... Projet Web Tim Burton Refonte complète du site de Tim Burton en utilisant les dernières technologies du web : HTML 5 / CSS 3 / JavaScript... Par Omar EDDASSER L3 ISC parcours MIAGE Sous l enseignement

Plus en détail

WordPress : Guide à l édition

WordPress : Guide à l édition WordPress : Guide à l édition WordPress : Guide à l édition... 1 Présentation... 2 1. Accès au site... 2 2. Le tableau de bord... 2 3. Editez les contenus... 4 Quelle est la différence entre les pages

Plus en détail

NOTICE INTERFACE WIFI

NOTICE INTERFACE WIFI NOTICE INTERFACE WIFI Notre interface d administration WIFI vous permet de : Personnaliser votre portail WIFI Gérer & paramétrer votre installation WIFI Tél : 02 40 71 71 21 Email : contact@va-solutions.fr

Plus en détail

2 LES BASES DU HTML 19 Qu est-ce que le HTML? 20 De quand date le HTML? 20 Écrire son propre code HTML 22

2 LES BASES DU HTML 19 Qu est-ce que le HTML? 20 De quand date le HTML? 20 Écrire son propre code HTML 22 SOMMAIRE INTRODUCTION La collection Classroom in a Book TinyUrL Conditions requises Installation du programme Copie des fichiers Classroom in a Book ordre recommandé pour les leçons Démarrage instantané

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

Le cas «BOURSE» annexe

Le cas «BOURSE» annexe Le cas «BOURSE» Le cas BOURSE sera réalisé en liaison avec les fiches ressources n 1 à n 5. Objectifs pédagogiques : - se familiariser en douceur avec les manipulations de base (utilisation des icônes,

Plus en détail

Créer sa première présentation :

Créer sa première présentation : PowerPoint est une application dédiée à la conception de présentations de toutes sortes, utilisées en projection ou en affichage sur écran. Ces présentations peuvent intégrer aussi bien du texte, des diagrammes,

Plus en détail

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

Dreamweaver CC 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 Le Creative Cloud d Adobe 9 Interface de conception

Plus en détail

jquery Mobile (HTML5, CSS3, JavaScript) Développez vos applications Web mobiles

jquery Mobile (HTML5, CSS3, JavaScript) Développez vos applications Web mobiles Caractéristiques du Web mobile 1. Définition du Web mobile 13 2. Un marché en expansion 15 2.1 Multiples fabricants de smartphones et tablettes 15 2.2 Multiples OS 15 2.3 Multiples navigateurs 17 2.4 Évolutions

Plus en détail

4. Créer des compteurs, des curseurs ou des bandes déroulantes : a) Création des objets. b) Affectation à une cellule et réglage du pas.

4. Créer des compteurs, des curseurs ou des bandes déroulantes : a) Création des objets. b) Affectation à une cellule et réglage du pas. Logiciel Excel version Office 2007. Voici une liste non exhaustive de fonctions de ce logiciel en relation avec le stage. Au sommaire : 1. Créer des boutons de raccourci dans une barre d outils: a) Sélection

Plus en détail

Episciences Documentation Webmestre

Episciences Documentation Webmestre 1 Episciences Documentation Webmestre Prérequis: Pour pouvoir effectuer les actions décrites ci-dessous, vous devez posséder un compte dans Episciences avec les droits webmaster. Pour que votre compte

Plus en détail

1. Introduction. 2. Objectifs de la réalisation. 3. Analyse de besoins

1. Introduction. 2. Objectifs de la réalisation. 3. Analyse de besoins 1. Introduction Le travail consiste à concevoir et à élaborer un dispositif de formation à distance, qui va au-delà de simples pages web statiques. On a choisi de faire appel à tout un module d apprentissage

Plus en détail

I N F O S T A N C E. Cahier de textes Rentrée 2009

I N F O S T A N C E. Cahier de textes Rentrée 2009 I N F O S T A N C E Cahier de textes Rentrée 2009 I N D E X INTRODUCTION... 4 PRESENTATION... 5 LES DROITS... 6 SAISIR UN CAHIER DE TEXTES... 7 SAISIE DU CAHIER DE TEXTES DEPUIS LE PLANNING... 7 Contenu

Plus en détail

Sommaire. [page 4] Lancement Identification Multi Comptes. [page 5] Créer un nouveau projet. [page6] Editer un projet

Sommaire. [page 4] Lancement Identification Multi Comptes. [page 5] Créer un nouveau projet. [page6] Editer un projet Sommaire [page 4] Lancement Identification Multi Comptes [page 5] Créer un nouveau projet [page6] Editer un projet [page 7] Supprimer un projet Prévisualiser un projet Mettre un projet par défaut [page

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

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

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

Plus en détail

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

dmp.gouv.fr Pour en savoir plus DMP Info Service : 24h/24 7j/7

dmp.gouv.fr Pour en savoir plus DMP Info Service : 24h/24 7j/7 dmp.gouv.fr Pour en savoir plus DMP Info Service : 24h/24 7j/7 Sommaire 1 Configuration requise pour accéder au DMP... 3 2 Procédure de vérification sous Internet Explorer... 4 2.1 Vérification de la compatibilité

Plus en détail

Se prote ger des proble mes de se curite de Java

Se prote ger des proble mes de se curite de Java Se prote ger des proble mes de se curite de Java Par Clément JOATHON Dernière mise à jour : 18/01/2016 Java est un langage de programmation utilisé par de nombreux programmes et applications sur Internet.

Plus en détail

Découvrir l environnement de Microsoft Office WORD 2010

Découvrir l environnement de Microsoft Office WORD 2010 1 Fiche ressource Découvrir l environnement de Microsoft Office WORD 2010 1. Lancer Word 2. Découvrir l interface 3. Utiliser les aides et les info-bulles 4. Modifier les principales options de Word et

Plus en détail

Module M1105 5. Frameworks web

Module M1105 5. Frameworks web Module M1105 5. 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 INTRODUCTION On a vu comment

Plus en détail

Tutoriel Technique. Plateforme de suivi des usages des ressources. Version 2 Date de conception : 03/2014 Auteur : Équipe UVED

Tutoriel Technique. Plateforme de suivi des usages des ressources. Version 2 Date de conception : 03/2014 Auteur : Équipe UVED Tutoriel Technique Plateforme de suivi des usages des ressources Version 2 Date de conception : 03/2014 Auteur : Équipe UVED 1. Connexion à la plateforme de suivi des usages Pour accéder à la plateforme

Plus en détail

TUTORIAL. www.benevolat.org TUTORIAL. Créez en quelques minutes votre site Internet!

TUTORIAL. www.benevolat.org TUTORIAL. Créez en quelques minutes votre site Internet! Créez en quelques minutes votre site Internet! SOMMAIRE : Choisir une interface graphique - Nommez votre site... page 03 5 étapes de création... page 04 Les outils de création graphique... page 05 Mise

Plus en détail

Zotero, un outil de gestion de bibliographies. Yvonne BERTRAND Documentaliste EHESP-MSSH 236 bis rue de Tolbiac 75013 Paris

Zotero, un outil de gestion de bibliographies. Yvonne BERTRAND Documentaliste EHESP-MSSH 236 bis rue de Tolbiac 75013 Paris Zotero, un outil de gestion de bibliographies Yvonne BERTRAND Documentaliste EHESP-MSSH 236 bis rue de Tolbiac 75013 Paris 1 Sommaire Introduction Collecte Organisation Citation Synchronisation Sauvegarde

Plus en détail

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 MAILING Table des matières KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 INSERER UNE IMAGE (OU UNE PHOTO) PAS DE COPIER / COLLER... 5 INSERER UN TABLEAU...

Plus en détail

TECHNOLOGIE DE L INFORMATION

TECHNOLOGIE DE L INFORMATION Les FICHES-GUIDE du tableur-grapheur WORKS 4.5 pour WINDOWS TECHNOLOGIE DE L INFORMATION PRÉSENTATION de L ÉCRAN du TABLEUR de WORKS 4.5 pour WINDOWS Barre de titre Cellule sélectionnée ou cellule active

Plus en détail

IFT1148 Développement

IFT1148 Développement IFT1148 Développement Michael Blondin Direction de l enseignement de service en informatique Université de Montréal Hiver 2011 1 / 33 ASP.NET ASP.NET est un ensemble de technologies développé par Microsoft

Plus en détail

Activités HTML avec Ace HTML

Activités HTML avec Ace HTML Activités HTML avec Ace HTML act-html-ace Activités HTML avec Ace HTML Code: act-html-ace Originaux url: http://tecfa.unige.ch/guides/tie/html/act-html-ace/act-html-ace.html url: http://tecfa.unige.ch/guides/tie/pdf/files/act-html-ace.pdf

Plus en détail

CMS MWC. Outil pour la gestion du site Internet DOCUMENTATION UTILISATEUR [version du 23/03/2009]

CMS MWC. Outil pour la gestion du site Internet DOCUMENTATION UTILISATEUR [version du 23/03/2009] CMS MWC Outil pour la gestion du site Internet DOCUMENTATION UTILISATEUR [version du 23/03/2009] 1. Authentification 2. Interface d édition MWC 3. Mise en page 4. Gestion des fichiers 5. Gestion des événements

Plus en détail

Recueil des Fiches Utilisateurs de «SharePoint»

Recueil des Fiches Utilisateurs de «SharePoint» Recueil des s s de «SharePoint» Ce document regroupe les fiches utilisateurs décrivant la navigation et l utilisation de l application SharePoint. (Référence DSI-DT-Sharepoint-1-4 Mai 2015) SOMMAIRE Accéder

Plus en détail

Webmaster / Webdesigner / Wordpress

Webmaster / Webdesigner / Wordpress Webmaster / Webdesigner / Wordpress Pré-requis : Projet professionnel. Bonne maîtrise de l'ordinateur. Bases en infographie et / ou traitement de texte fortement recommandées. Objectifs : Concevoir un

Plus en détail

Fiche Mémo : Options d accessibilité sous Windows et Internet Explorer 5

Fiche Mémo : Options d accessibilité sous Windows et Internet Explorer 5 Fiche Mémo : Options d accessibilité sous Windows et Internet Explorer 5 I. Général II. Affichage : taille icônes et écran III. Le menu «Options d accessibilité» : contraste, curseur IV. Le clavier V.

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

HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP

HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP IFT1147 Programmation Serveur Web avec PHP Un bref survol du langage HTML HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,

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

Développement d'une application Android avec PhoneGap

Développement d'une application Android avec PhoneGap Développement d'une application Android avec PhoneGap Olivier Dommange Avant-propos PhoneGap permet le développement d'applications pour plusieurs systèmes d'exploitations de smartphones et tablettes (ios,

Plus en détail

Guide de démarrage Débuter avec e-monsite Les termes spécifiques à e-monsite

Guide de démarrage Débuter avec e-monsite Les termes spécifiques à e-monsite Guide de démarrage Débuter avec e-monsite... page 2 Les termes spécifiques à e-monsite... page 2 Le manager... page 2 Les modules... page 3 Les widgets... page 3 Les plugins... page 4 Ajouter du contenu...

Plus en détail

Firefox : un navigateur web libre

Firefox : un navigateur web libre Firefox : un navigateur web libre Niveau débutant Niveau intermédiaire Niveau confirmé Firefox est un navigateur Web libre et gratuit qui a connu un succès croissant. Créé par la fondation Mozilla Firefox,

Plus en détail

Le cas «BOURSE» annexe

Le cas «BOURSE» annexe Le cas «BOURSE» Le cas BOURSE sera réalisé en liaison avec les fiches ressources n 1 à n 5. Objectifs pédagogiques : - se familiariser en douceur avec les manipulations de base (utilisation des icônes,

Plus en détail

Séminaire d information MIGRATION WINDOWS 7 ET OFFICE 2010

Séminaire d information MIGRATION WINDOWS 7 ET OFFICE 2010 Séminaire d information MIGRATION WINDOWS 7 ET OFFICE 2010 Pourquoi migrer vers Office 2010? Pour bénéficier d une meilleure ergonomie Pour faciliter les échanges avec l extérieur Pour profiter de la puissance

Plus en détail

Date Version Auteur Notes 14/09/2014 1.1 Direction Informatique Création. Accueil Zimbra. Aide utilisateur

Date Version Auteur Notes 14/09/2014 1.1 Direction Informatique Création. Accueil Zimbra. Aide utilisateur Date Version Auteur Notes 14/09/2014 1.1 Direction Informatique Création Accueil Zimbra Aide utilisateur Ce document explique le fonctionnement de l accueil Zimbra, comment l utiliser et le personnaliser.

Plus en détail

Manuel Utilisateur. Création de site web

Manuel Utilisateur. Création de site web Manuel Utilisateur Création de site web Auteur : Logica Version : 1.3 Droit d auteur Ce texte est disponible sous contrat Creative Commons Paternité - Pas d'utilisation Commerciale - Partage des Conditions

Plus en détail

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

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

Plus en détail

FORMATION A LA RECHERCHE DOCUMENTAIRE BU SANTE. ZOTERO v.2.0 SOMMAIRE

FORMATION A LA RECHERCHE DOCUMENTAIRE BU SANTE. ZOTERO v.2.0 SOMMAIRE SOMMAIRE ZOTERO v.2.0 Introduction...2 1 Gérer ses références...2 1.1 Installation de l extension...2 1.2 Importer des notices à partir d un site web compatible...3 1.4 Nouvelle note indépendante...5 1.5

Plus en détail

HTML. Notions générales

HTML. Notions générales 1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS

Plus en détail

Plateforme Systempay v1.24 Personnalisation avancée de la page paiement. Version 1.2a

Plateforme Systempay v1.24 Personnalisation avancée de la page paiement. Version 1.2a Plateforme Systempay v1.24 Personnalisation avancée de la page paiement Version 1.2a Rédaction, Vérification, Approbation Rédaction Vérification Approbation Nom Date/Visa Nom Date/Visa Nom Date/Visa Lyra-Network

Plus en détail

DOSSIER D'ACTIVITES SUR LE PHP N 03 Créer une base de données MySQL avec PHPMyAdmin

DOSSIER D'ACTIVITES SUR LE PHP N 03 Créer une base de données MySQL avec PHPMyAdmin DOSSIER D'ACTIVITES SUR LE PHP N 03 Créer une base de données MySQL avec PHPMyAdmin Objectifs : Apprendre à l apprenant à lancer un serveur local «Apache» Apprendre à l'apprenant à lancer un serveur MySQL

Plus en détail

Présentation. Sommaire. février 2015

Présentation. Sommaire. février 2015 février 2015 Présentation Zotero est un outil de gestion de références bibliographiques. Zotero est libre et gratuit. Il se présente sous la forme d une extension du navigateur Firefox ou dans une version

Plus en détail

Suivre le prix d'un produit sur Amazon

Suivre le prix d'un produit sur Amazon Suivre le prix d'un produit sur Amazon Par Clément JOATHON Dernière mise à jour : 05/11/2015 Vous avez sans doute remarqué que le prix d'un produit sur Amazon pouvait régulièrement changer. Le marchand

Plus en détail

Formation Développement d'applications mobiles multiplateformes

Formation Développement d'applications mobiles multiplateformes L institut de formation continue des professionnels du Web Formation Développement d'applications mobiles multiplateformes Référence formation : Durée : Prix conseillé : MO00015 5 jours (35 heures) 2 320

Plus en détail

InfoStance SCOLASTANCE V6. Espace collaboratif privé

InfoStance SCOLASTANCE V6. Espace collaboratif privé InfoStance SCOLASTANCE V6 Espace collaboratif privé Table des matières Se connecter à l espace collaboratif privé... 4 Création et modification de contenu... 4 La Barre d édition... 4 La page d accueil...

Plus en détail

1! I. 3! II. 3! III. 3! IV.

1! I. 3! II. 3! III. 3! IV. 1 sur 14 Sommaire Sommaire! 1! I. Introduction! 3! II. Guide de lecture! 3! III. Concept de base! 3! IV. Organisation! 4! 1. Décomposition en tâches 4 2. Structure des équipes 6 V. Planification! 7! VI.

Plus en détail

GalleryFP! pour les nuls

GalleryFP! pour les nuls GalleryFP! pour les nuls Module de Galeries Photos pour Joomla! GalleryFP pour Joomla! 2.5 et pour Joomla! 3 Ce document et l'illustration en couverture sont publiés sous la licence libre Creative Commons-BY-SA

Plus en détail

INTRODUCTION au TABLEUR

INTRODUCTION au TABLEUR INTRODUCTION au TABLEUR La principale utilisation d un tableur est le calcul automatique de formules. Il est utilisé dans différents domaines de la gestion... Il est destiné à de multiples applications,

Plus en détail

Outil de liaison dématérialisé

Outil de liaison dématérialisé 1 / 12 Outil de liaison dématérialisé Portail Entreprise (V 2012.4.2) Guide d utilisation Sommaire 2 / 12 Sommaire 1 INTRODUCTION 3 2 - ENTREPRISE 3 2.1 DESCRIPTIF 3 2.2 MOT DE PASSE 3 3 FORMATION INITIALE

Plus en détail

Éric Sarrion. JQuery 1. 7. & JQuery UI. 2 e édition. Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13504-6

Éric Sarrion. JQuery 1. 7. & JQuery UI. 2 e édition. Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13504-6 Éric Sarrion JQuery 1. 7 & JQuery UI 2 e édition Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13504-6 Avant-propos Dernier né des frameworks JavaScript, jquery a immédiatement séduit les développeurs

Plus en détail

MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS

MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS En renommant, déplaçant ou supprimant des images déjà insérées dans des pages, ou en renommant, déplaçant ou supprimant des sous-dossiers, les images

Plus en détail

Formation JavaScript : Perfectionnement. Programme. L approche AJAX. L objet XMLHttpRequest. Objectif(s):

Formation JavaScript : Perfectionnement. Programme. L approche AJAX. L objet XMLHttpRequest. Objectif(s): Formation JavaScript : Perfectionnement Objectif(s): Comprendre l'approche AJAX Comprendre l'objet XMLHttpRequest Durée : 2 jour(s) Pré-requis : Bonnes connaissances en (X)HTML, CSS et JavaScript Public

Plus en détail