Présentation et prise en main

Slides:



Advertisements
Présentations similaires
« Les Mercredis du développement » Ajax / Client CallBack / Atlas
Advertisements

Open Days 2006 Le Web 2.0 demain: produits, technologies, outils.
Conception de Site Webs dynamiques Cours 6
Copyright France Télécom, tous droits réservés Paris Web Ateliers Les bibliothèques JS jQuery Orange Labs Julien Wajsberg, Recherche & Développement.
Réunion dinterlocuteurs documentation Mardi 31 janvier 2006 SDTICE - DUI Programme « Qualité, veille et diffusion » Jean-François PILLOU Chef de programme.
SVG: Scalable Vector Graphics Exemple: Vienne Christine Potier, INF347, 20 juin 2008.
V 1.5 Site Web de Formation. Intérêts Cette fonctionnalité de Spiral vous permet de créer et gérer des sites web entièrement personnalisable venant s'appuyer.
Développement dun simulateur dinterface graphique à distance Présenté par Michaël Delhaye Promoteur : Jean Vanderdonckt.
Introduction aux CMS.
IHM Responsive Design François BONNEVILLE aricia - Laboratoire d'Informatique de lUniversité de Franche-Comté
Nouveau blog. WordPress connexion Nommez votre blog.
JAVASERVER FACES Un framework Java pour le développement Web.
Documentation Numérique
Comprendre l’environnement Web
Documentation pour webmestre site sud-aerien.org
SITES E-COMMERCE RESPONSIVE
Atelier « Créations de sites » : Les techniques de réalisation de sites EPN :...
Développement d’application web
Clients riches RIA (Rich Internet Application) / RDA
PhP-MySQL Pagora 2012/2013 CTD 1 - Presentation de moi ^^
Adaptée du cours de Richard Grin
-Présentation de l’équipe -Cadre du projet -Enjeux -Choix du sujet.
LES CLIENTS WEB RICHES Tuteur : Olivier CARON LEFEBVRE Benoit
Jquery.
PROGRAMMATION WEB FRONT-END.
Soutenance Développement web Lebrun Laura Licence PER
0 Objectifs de la session n°1  Revenir sur toutes les bases théoriques nécessaires pour devenir un développeur Web,  Découvrir l’ensemble des langages.
AngularJS.
Soutenance ProJet Individuel
3. Personnaliser une page web Visualiser les liens entre feuille de style et html grâce à l’inspecteur d’éléments Savoir si les modifications doivent être.
GESTION DE COMPOSANTS ELECTRONIQUES
Web designer.
S'initier au HTML et aux feuilles de style CSS Cours 5.
420-B63 Programmation Web Avancée Auteur : Frédéric Thériault 1.
AJAX.
G.KEMBELLEC - UP81 Master 2 THYP Cas pratique d’utilisation De simpleXML Un lecteur de RSS Novembre 2009.
S'initier au HTML et aux feuilles de style CSS Cours 5.
PHP SpeedBerg Templates EPFL PHP IIème Conférence des WebMasters EPFL 5/12/2001 Tuan Lam E-PFL
d’une plateforme web géo-décisionnelle
Centralisation des sites web d’ELTA & Mise en place d’un serveur NAS
EPREUVE E6 : PARCOURS DE PROFESSIONNALISATION
Développement et design Web Awaves academy Stockholm 2006.
Séance /10/ Projet de site dynamique avec Dreamweaver : MyCMS
Présentation du projet
Vieille technologique Bts sio 2015 – xavina martin
Apports des clients riches dans le monde du WEB 2.0
Contribution CMS.Eolas
EFREI – – Mathieu Nebra Le développement Web.
M2202 – Algorithmique – T.BAUSER. Objectifs Utiliser Jquery pour : - modifier/ajouter/supprimer un élément/un attribut/une classe, - créer des animations,
Projet SwitcHome Cahier des charges techniques Adeline COUPE, Hélène DRAUX, Ismaïla GIROUX, Loïc TACHET.
Projet SwitcHome Cahier des charges techniques Adeline COUPE, Hélène DRAUX, Ismaïla GIROUX, Loïc TACHET.
1 Présentation de DREAMWEAVER (1) Gaël TREMEAU GI05 Printemps 2006.
Présentation de Dreamveawer
Dreamweaver (2) ● les calques (layers) ● les comportements
FORMULAIRES FOMULAIRE Permet à l’utilisateur d’entrer des renseignements le concernant. Utilisation –Inscription sur un site –Mise à jour d’une base.
SI28 – Ecriture interactive et multimédia Sylvain Slaton – Pierre Laporte.
1 Web App Pourquoi une Web App au lieu d’une application native? 26 janvier 2012  Créer une application universelle  Durée de vie « infinie »  Plus.
Dreamweaver 2éme séance Murat Keles. Présentation I.CSS et Dreamweaver II.Les calques III.Les scénarios IV.Les comportements V.Les cadres VI.Mise en ligne.
Introduction au HTML Qu’est ce que le HTML ?
Dreamweaver 2 Feuilles de Style CSS Formulaires Calques Comportements
DREAMWEAVER SÉANCE 2 SI28 Jonathan Barone – Thomas Lulé.
SI28 : D REAMWEAVER 2 Audrey BUISSON – GSU05 Romain LASSALLE – GI05 1 SI28 – Ecriture interactive et multimedia.
1 er séance SI28 A2004 YIN Lei Emmanuel Eugene. Plan de l’exposé  Introduction au HTML  Le HTML dans le bloc-notes (notepad)  Présentation de Dreamweaver.
Conception de site web. Place du Web dans le monde  Entreprises  Commerce électronique  Réseaux sociaux  Les municipalités  Les partis politiques.
Chaine de production professionnelle pour Joomla! Cyril Thibout.
Conception des Sites Web Enseignant : Pr Boubker Sbihi Année
Création d’un site WEB 1 – Un site WEB c’est quoi ? 2 – Questions à se poser avant la construction d’un site WEB 3 – Principes de fonctionnement d’un site.
APP-TSWD Apprentissage Par Problèmes Techniques des Sites Web Dynamiques Licence Professionnelle FNEPI Valérie Bellynck, Benjamin Brichet-Billet, Mazen.
TP ISN-Terminale S Notion de code HTML. I) Visualisation du code source d’une page web Se mettre sur une page web quelconque : clic droit, Afficher la.
Jquery Veille technologie – Nathan Chéron
Transcription de la présentation:

Présentation et prise en main Bootstrap Présentation et prise en main

Sommaire Présentation du Framework Connaissances préalables jQuery Ajax LESS Intérêts/Inconvénients Contenu du kit Normalize.css Arborescence Mise en place Template de base Grille Liens utiles

Présentation du Framework Framework CSS (HTML/Javascript) Aide à mettre en forme les pages web : organisation, aspect, animation… « ensemble de composants structurés qui sert à créer les bases et à organiser le code informatique pour faciliter le travail des programmeurs, que ce soit en terme de productivité ou de simplification de la maintenance »

Connaissances préalables HTML5/CSS3 jQuery (mise en œuvre des plugins) LESS (pour aller plus loin)

jQuery Bibliothèque JavaScript libre et multiplateforme Facilite l’écriture de script côté client dans le code HTML des pages Web Utilise Ajax

Ajax Asynchronous JavaScript and XML Architecture informatique pour site web dynamiques

Ajax

LESS

Intérêts de Bootstrap Cross-browser Gain de temps de développement Ensemble homogène de styles Utilisation d’une grille pour positionner les éléments Eléments complémentaires : boutons esthétiques, barres de navigation, etc... (Web-responsive)

Inconvénients de Bootstrap Nécessité de connaitre le framework pour l’utiliser (perte de temps initiale) Normalisation de la présentation qui peut être redondante

Contenu du kit Bootstrap Une mise en page basée sur grille Normalize.css Du code fondé sur HTML5 et CSS3 Bibliothèque open source Plugins jQuery Résultat cross-browser Documentation

Normalize.css

Arborescence Bootstrap

Mise en place de Bootstrap Déclaration HTML5, prévoir le bon DOCTYPE Déclarer bootstrap.css Si utilisation de JavaScript, déclaration de bootstrap.js et jquery.js

Template de base

Grille Bootstrap

Grille Bootstrap

Grille Bootstrap

Grille Bootstrap

Grille Bootstrap

Grille Bootstrap

Grille Bootstrap

Liens utiles Cours en ligne sur Boostrap : http://openclassrooms.com/courses/prenez-en-main-bootstrap Site Officiel de Bootstrap : http://getbootstrap.com/ Site Officiel de jQuery : http://jquery.com/ Page projet de normalize.css : http://necolas.github.io/normalize.css/ Templates Bootstrap : https://wrapbootstrap.com/ http://bootstrapzero.com/