Présentation du Framework BootstrapTwitter
|
|
|
- Marthe Laberge
- il y a 8 ans
- Total affichages :
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
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
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
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
Freeway 7. Nouvelles fonctionnalités
! Freeway 7 Nouvelles fonctionnalités À propos de ce guide... 3 Nouvelles fonctionnalités en un coup d'oeil... 3 À propos de la conception d'un site web réactif... 3 Travailler avec les pages pour créer
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
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
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
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
Optimiser pour les appareils mobiles
chapitre 6 Optimiser pour les appareils mobiles 6.1 Créer un site adapté aux terminaux mobiles avec jquery Mobile... 217 6.2 Transformer son site mobile en application native grâce à PhoneGap:Build...
CRÉER UNE BASE DE DONNÉES AVEC OPEN OFFICE BASE
CRÉER UNE BASE DE DONNÉES AVEC OPEN OFFICE BASE 3. ème partie : RAPPORTS MENU D'ACCUEIL - MIGRATION Table des matières 1. Les RAPPORTS...2 1.1 Création d'un rapport basé sur une Requête...3 1.2 Imprimer,
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
Utilisation de l éditeur.
Utilisation de l éditeur. Préambule...2 Configuration du navigateur...3 Débloquez les pop-up...5 Mise en évidence du texte...6 Mise en évidence du texte...6 Mise en page du texte...7 Utilisation de tableaux....7
Intégrateur Web HTML5 CSS3
Intégrateur Web HTML5 CSS3 L objectif de la 3W Academy est de former des petits groupes d élèves à l intégration de sites internet ainsi qu à la création d applications web simples telles qu un blog ou
Introduction à HTML5, CSS3 et au responsive web design
1 Introduction à HTML5, CSS3 et au responsive web design Jusqu à une période récente, les sites web étaient conçus avec une largeur fixe de l ordre de 960 pixels, en espérant que les visiteurs en tirent
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é
Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées?
Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites Quelles solutions peuvent être employées? Présentation d une des solutions Conclusion Aujourd hui le web est
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,
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
Mozilla Firefox 3.5. Google Chrome 3.0 LES NAVIGATEURS WEB. (pour Windows) Opéra 10. Internet Explorer 8. Safari 4.0
Mozilla Firefox 3.5 Google Chrome 3.0 LES NAVIGATEURS WEB (pour Windows) Opéra 10 Internet Explorer 8 Safari 4.0 1 1 Sommaire Qu est ce qu un navigateur Web? Fonctionnement Caractéristiques communes Caractéristiques
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
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
Point sur les solutions de développement d apps pour les périphériques mobiles
Point sur les solutions de développement d apps pour les périphériques mobiles Par Hugues MEUNIER 1. INTRODUCTION a. Une notion importante : le responsive web design Nous sommes en train de vivre une nouvelle
CMS Made Simple Version 1.4 Jamaica. Tutoriel utilisateur Récapitulatif Administration
CMS Made Simple Version 1.4 Jamaica Système de gestion de contenu CMS Made Simple est entièrement gratuit sous licence GPL. Tutoriel utilisateur Récapitulatif Administration Le système de gestion de contenu
Silfid : Agence de création de site internet, formations et Conseils Retour sommaire
Sommaire ILFID vous accueille dans sa salle de formation équipée d ordinateurs en réseau et connectés internet, d'un vidéo- Sprojecteur et tableau blanc. Nos solutions sont éligibles aux critères de financement
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
Notes pour l utilisation d Expression Web
EICW Formation Webmaster Notes pour l utilisation d Expression Web G. Barmarin 2008-2009 1 /21 Table des matières 1 Introduction... 3 2 Installer Expression Web... 4 3 Explorer et personnaliser l interface
Manuel du composant CKForms Version 1.3.2
Manuel du composant CKForms Version 1.3.2 Ce manuel vous présente les principales fonctionnalités du composant CKForms y compris le module et le plug-in CKForms 1.3 est la nouvelle version du composant
Réalisez votre propre carte de vœux Éléctronique
Les différentes possibilités d animer une carte de vœux Il existe plusieurs possibilités d animer une carte de vœux : - Une Vidéo : Vous pouvez créer une vidéo, un film simplement avec Windows Media Player.
Bernard Lecomte. Débuter avec HTML
Bernard Lecomte Débuter avec HTML Débuter avec HTML Ces quelques pages ont pour unique but de vous donner les premiers rudiments de HTML. Quand vous les aurez lues, vous saurez réaliser un site simple.
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
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,
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
Interface PC Vivago Ultra. Pro. Guide d'utilisation
Interface PC Vivago Ultra Pro Guide d'utilisation Version 1.03 Configuration de l'interface PC Vivago Ultra Configuration requise Avant d'installer Vivago Ultra sur votre ordinateur assurez-vous que celui-ci
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.
ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A.
ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A. - 1 - PREAMBULE Les conditions générales d utilisation détaillant l ensemble des dispositions applicables
Pour en expliquer le principe, on se limitera à deux exemples :
Les Media Queries permettent donc de cibler : Le type de média La taille de l'écran La taille de la fenêtre La résolution Le nombre de couleurs L'orientation Pour en expliquer le principe, on se limitera
Les grandes facettes du développement Web Nicolas Thouvenin - Stéphane Gully
Les grandes facettes du développement Web Qui sommes nous? Nicolas Thouvenin Stéphane Gully Projets Web depuis 2000 LAMP, NodeJS HTML, CSS, jquery
Formation : WEbMaster
Formation : WEbMaster Objectif et Description : Centre Eclipse vous propose une formation complète WebMaster, vous permettant de : Utiliser dès maintenant les nouveautés du web2, ainsi alléger les besoins
Magento. Magento. Réussir son site e-commerce. Réussir son site e-commerce BLANCHARD. Préface de Sébastien L e p e r s
Mickaël Mickaël BLANCHARD BLANCHARD Préface de Sébastien L e p e r s Magento Préface de Sébastien L e p e r s Magento Réussir son site e-commerce Réussir son site e-commerce Groupe Eyrolles, 2010, ISBN
A la découverte d'internet Explorer 8
A la découverte d'internet Explorer 8 A la découverte d'internet Explorer 8 Le respect des standards La compatibilité avec Internet Explorer 7 Les accélérateurs Les Web Slices La restauration de sessions
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?
Préconisations Portail clients SIGMA
Préconisations Portail clients SIGMA Client Web Version Minimum : Pentium 4 et 512 Mo de Ram Version Préconisée : Core 2 Duo 2 GHz et 1 Go de Ram Internet Explorer (7, 8 ou 9), Firefox Résolution minimum
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...
Rapport de stage. Création d un site web. Stage du 20/01/2013 au 21/02/2013
Rapport de stage Création d un site web Stage du 20/01/2013 au 21/02/2013 Auteur : Antoine Luczak Tuteur professionnel : M. Tison Tuteur scolaire : Mme Girondon Année scolaire : 2013/2014 1 Table des matières
Technologies Web. Ludovic Denoyer Sylvain Lamprier Mohamed Amine Baazizi Gabriella Contardo Narcisse Nya. Université Pierre et Marie Curie
1 / 22 Technologies Web Ludovic Denoyer Sylvain Lamprier Mohamed Amine Baazizi Gabriella Contardo Narcisse Nya Université Pierre et Marie Curie Rappel 2 / 22 Problématique Quelles technologies utiliser
Évaluation des compétences. Identification du contenu des évaluations. Septembre 2014
Identification du contenu des évaluations Septembre 2014 Tous droits réservés : Université de Montréal Direction des ressources humaines Table des matières Excel Base version 2010... 1 Excel intermédiaire
Wildix Web API. Guide Rapide
Wildix Web API Guide Rapide Version: 11.12.2013 API Web Wildix s'intègre avec les logiciels CRM, ERP, les solutions et web applications Fias / Fidelio. L'API de téléphonie Javascript vous permet de contrôler
Votre site Internet avec FrontPage Express en 1 heure chrono
1.1. Précautions préliminaires Votre site Internet avec FrontPage Express en 1 heure chrono Le contenu de ce site n'est pas très élaboré mais il est conçu uniquement dans un but pédagogique. Pour débuter,
Avant-propos FICHES PRATIQUES EXERCICES DE PRISE EN MAIN CAS PRATIQUES
Avant-propos Conçu par des pédagogues expérimentés, son originalité est d être à la fois un manuel de formation et un manuel de référence complet présentant les bonnes pratiques d utilisation. FICHES PRATIQUES
HTTP Commander. Table des matières. 1-Présentation de HTTP Commander
HTTP Commander Table des matières 1-Présentation de HTTP Commander... 1 2-Accéder à vos fichiers... 2 3-Téléversement... 6 4-Glisser-déposer... 7 5- Le mode Webdav, un outil puissant... 8 6-Accéder aux
Echosgraphik. Ce document sert uniquement à vous donner une vision sur ma manière de travailler et d appréhender un projet
Echosgraphik Ce document sert uniquement à vous donner une vision sur ma manière de travailler et d appréhender un projet Présentation I. Echosgraphik Protocoles de travail I. Développement du site II.
25 mars. Tutoriel sur Laravel. Préparé par : Lydiane Beaulne-Bélisle. Ceci est un tutorial qui montre comment débuter avec le Framework PHP Laravel.
25 mars Tutoriel sur Laravel Préparé par : Lydiane Beaulne-Bélisle Ceci est un tutorial qui montre comment débuter avec le Framework PHP Laravel. Créé pour le cours de Projet de fin d étude Collège de
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
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
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é
Guide pour la réalisation d'un document avec Open Office Writer 2.2
Guide pour la réalisation d'un document avec Open Office Writer 2.2 1- Lancement de l'application : Le Traitement de textes de la Suite OpenOffice peut être lancé : soit depuis le menu «Démarrer / Programmes/OpenOffice2.2/Writer
4D Web 2.0 Pack DATA LIVES HERE. TM. Internet Riche et Solutions Mobiles en toute simplicité. 4D Ajax Framework 4D Ajax for Dreamweaver 4D for Flex
DATA LIVES HERE. TM 4D Web 2.0 Pack Internet Riche et Solutions Mobiles en toute simplicité 4D Ajax Framework 4D Ajax for Dreamweaver 4D for Flex *Faites vivre vos données 4D Web 2.0 Pack fournit aux développeurs
Manuel d utilisation de l outil collaboratif
Manuel d utilisation de l outil collaboratif Réf OCPD-V2 Page 1 / 24 a mis en œuvre un outil collaboratif qui permet de partager des informations entre collaborateurs. Il permet à des utilisateurs travaillant
SYSTÈMES DE PUBLICATION POUR L INTERNET. Beatep 2006. Marie-France Landréa - Observatoire de Paris
SYSTÈMES DE PUBLICATION POUR L INTERNET Beatep 2006 SPIP UN système de publication sur Internet Marie-France Landréa - Observatoire de Paris Caractéristiques des CMS Des auteurs (de contenu) Créent, d
Qlik Sense Desktop. Qlik Sense 2.0.2 Copyright 1993-2015 QlikTech International AB. Tous droits réservés.
Qlik Sense Desktop Qlik Sense 2.0.2 Copyright 1993-2015 QlikTech International AB. Tous droits réservés. Copyright 1993-2015 QlikTech International AB. Tous droits réservés. Qlik, QlikTech, Qlik Sense,
L ORDINATEUR FACILE D ACCÈS!
L ORDINATEUR FACILE D ACCÈS! Préparé par Éric Roussel, enseignant spécialisé en informatique / École Jacques-Ouellette / 2009 Préambule Il est important de noter qu il n y a pas d adaptation parfaite des
les techniques d'extraction, les formulaires et intégration dans un site WEB
les techniques d'extraction, les formulaires et intégration dans un site WEB Edyta Bellouni MSHS-T, UMS838 Plan L extraction des données pour un site en ligne Architecture et techniques Les différents
MERLIN. Guide de démarrage rapide Gestion de projet professionnelle. 2010 ProjectWizards GmbH, Melle, Allemagne. Tous droits réservés.
MERLIN Guide de démarrage rapide Gestion de projet professionnelle 2010 ProjectWizards GmbH, Melle, Allemagne. Tous droits réservés. INTRODUCTION Bienvenue dans le guide de démarrage rapide de Merlin!
Formation. Module WEB 4.1. Support de cours
Formation Module WEB 4.1 Support de cours Rédacteur Date de rédaction F.CHEA 08/02/2012 Les informations contenues dans ce document pourront faire l'objet de modifications sans préavis Sauf mention contraire,
Syfadis. > Configuration du poste client. Nous vous aidons à réussir. REFERENCE : Syfadis LMS - 20/06/2007. AUTEUR : Equipe technique Syfadis
Syfadis Nous vous aidons à réussir > Configuration du poste client REFERENCE : Syfadis LMS - 20/06/2007 AUTEUR : Equipe technique Syfadis Ce document est la propriété de Syfadis. Il ne peut être communiqué
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
Plateforme takouine: Guide de l apprenant
Plateforme takouine: Guide de l apprenant - - Juillet 2012 - Sommaire Introduction :...3 Objectif :...3 Moodle :...3 Prérequis :...4 Matériel :...4 Logiciel :...4 Réglages préalables :...4 JavaScript :...4
Dans nos locaux au 98 Route de Sauve 30900 NÎMES. Un ordinateur PC par stagiaire, scanner, imprimante/copieur laser couleur
FORMATION FORFAIT WEB DEVELOPPEUR Qualification ISQ OPQF Formacode 46 125 Certification de titre professionnel Web Designer + modules optionnels : Développement PHP/MySQL avancé, Web App, CMS e-boutique
CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING
CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING Durée : 3J / 21H Formateur : Consultant expert en PAO et Web-marketing. Groupe de : 4 max Formation au web marketing Objectifs : Mettre en oeuvre des
RESUME DE CARRIERE. Alice JULIENNE. 23 ans Nationalité Française Développeur Web Front-End. Compétences
RESUME DE CARRIERE Alice JULIENNE 23 ans Nationalité Française Développeur Web Front-End Compétences Systèmes Langages Windows (XP, 98) Macintosh OS X HTML, XHTML, CSS, XML, PHP, SQL, Javascript, J-Querry
Avanquest Software présente la nouvelle gamme WebEasy 8
La Garenne Colombes, le 22 Juin 2009 Avanquest Software présente la nouvelle gamme WebEasy 8 Des logiciels pour créer simplement des sites internet de qualité professionnelle sans aucune connaissance en
S7 Le top 10 des raisons d utiliser PHP pour moderniser votre existant IBM i
Modernisation IBM i Nouveautés 2014-2015 IBM Power Systems - IBM i 19 et 20 mai 2015 IBM Client Center, Bois-Colombes S7 Le top 10 des raisons d utiliser PHP pour moderniser votre existant IBM i Mardi
Guide d'utilisation. OpenOffice Calc. AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons
Guide d'utilisation OpenOffice Calc AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons 1 Table des matières Fiche 1 : Présentation de l'interface...3 Fiche 2 : Créer un nouveau classeur...4
GUIDE Excel (version débutante) Version 2013
Table des matières GUIDE Excel (version débutante) Version 2013 1. Créer un nouveau document Excel... 3 2. Modifier un document Excel... 3 3. La fenêtre Excel... 4 4. Les rubans... 4 5. Saisir du texte
FLEX 3. Applications Internet riches avec Flash ActionScript 3, MXML et Flex Builder. Aurélien Vannieuwenhuyze
Programmation FLEX 3 Applications Internet riches avec Flash ActionScript 3, MXML et Flex Builder Aurélien Vannieuwenhuyze Avec la contribution de Romain Pouclet Groupe Eyrolles, 2009, ISBN : 978-2-212-12387-6
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
Formation Tutorée A Distance (FTAD) en BUREAUTIQUE
Durée : 20 heures (Sur 2 mois maximum) Positionnement et parcours individuel de formation. Plate-forme de formation incluant cours, exercices et évaluation en ligne, disponibles 24 H/24, 7 j/7. 4 cours
Guide de réalisation d une campagne e-mail marketing
Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent. La
CA CA T T AL AL O O GUE GUE CATALO FORMATIONS 2 0 1 4-2 0 1 5 t n s c o p. f r / / / / / / c o n t a c t @ t n s c o p. f r / / / / / # t r o c n u m
CATALOGUE CATALOGUE FORMATIONS 2014-2015 t n s c o p. f r / / / / / / c o n t a c t @ t n s c o p. f r / / / / / # t r o c n u m Sommaire Nous proposons des formations à la carte, n hésitez pas à nous
mon site web via WordPress
mon site web via WordPress Vocabulaire CMS : Content Management System WordPress fait partie de cette famille de logiciels destinés à la conception et à la mise à jour dynamique de sites Web ou d applications
Alfresco Guide Utilisateur
Alfresco Guide Utilisateur ATELIER TECHNIQUE DES ESPACES NATURELS - 1 Table des matières Alfresco Guide Utilisateur...1 Accéder à la GED de l'aten...3 Via un client FTP...3 Onglet Général...3 Onglet Avancé...3
Créer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles
Mission TICE - académie de Versailles 7 nov. 2008 Créer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles Anne-Cécile Franc Mission TICE académie de Versailles
Nouveautés de la version moodle 2.7
Nouveautés de la version moodle 2.7 Atto Éditeur de texte facile Le nouveau éditeur de texte dans Moodle à été développé spécialement pour convivialité et accessibilité. Au-dessus de la zone d'écriture
PARAMETRER INTERNET EXPLORER 9
PARAMETRER INTERNET EXPLORER 9 Résumé Ce document vous donne la marche à suivre pour paramétrer Microsoft Internet Explorer 9, notamment en vous indiquant comment lancer Internet Explorer 9, réinitialiser
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
AGASC / BUREAU INFORMATION JEUNESSE 06700 Saint Laurent du Var Tel : 04.93.07.00.66 bij@agasc.fr www.agasc.fr. Word: Les tableaux.
Word: Les tableaux Introduction 6 ième partie Il est préférable par moments de présenter de l'information sous forme de tableau. Les instructions qui suivent démontrent comment créer un tableau et comment
cbox VOS FICHIERS DEVIENNENT MOBILES! INTERFACE WEB MANUEL D UTILISATION
cbox VOS FICHIERS DEVIENNENT MOBILES! INTERFACE WEB MANUEL D UTILISATION BV Introduction L application cbox peut-être installée facilement sur votre ordinateur. Une fois l installation terminée, le disque
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
Code Produit Nom Produit Dernière mise à jour. AM003 Alias Mobile On Demand Licence 1 mois 27/04/2015
www.alias-ad.com ALIAS MOBILE DESIGNER Des solutions innovantes pour la création d applications de gestion accessibles aux appareils mobiles (tablettes et smartphones) en client léger. Code Produit Nom
AVEC LIVE TRADER, VISEZ PLUS HAUT POUR VOS INVESTISSEMENTS
AVEC LIVE TRADER, VISEZ PLUS HAUT POUR VOS INVESTISSEMENTS Prêt à maîtriser LIVE TRADER? Découvrez les principales fonctionnalités de cet outil. Découvrir l espace de travail Organiser les modules Rechercher
ECLIPSE ET PDT (Php development tools)
ECLIPSE ET PDT (Php development tools) Eclipse Eclipse est un IDE (Integrated Development Environment)).C estun projet de la Fondation Eclipse visant à développer tout un environnement de développement
Note de cours. Introduction à Excel 2007
Note de cours Introduction à Excel 2007 par Armande Pinette Cégep du Vieux Montréal Excel 2007 Page: 2 de 47 Table des matières Comment aller chercher un document sur CVMVirtuel?... 8 Souris... 8 Clavier
Utilisation de l'outil «Open Office TEXTE»
PRESENTATION / FORMATION Utilisation de l'outil «Open Office TEXTE» Présentation générale : OpenOffice Texte est un traitement de texte assez similaire à celui proposé par Microsoft ; il est d'ailleurs
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
Mettre en place un formulaire dans le site avec le module webform
Mettre en place un formulaire dans le site avec le module webform Dans la suite des documents de cette documentation Avertissement au lecteur Objectif de cette fiche Le module webform Ce petit symbole
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
Java 7 Les fondamentaux du langage Java
184 Java 7 Les fondamentaux du langage Java 1.1 Les bibliothèques graphiques Le langage Java propose deux bibliothèques dédiées à la conception d'interfaces graphiques. La bibliothèque AWT et la bibliothèque