Objectif général
Prendre en main le framework CSS le plus utilisé
Objectifs opérationnels
Positionner du contenu avec le système de grille
Créer des barres de navigation
Créer un fil d’Ariane
Mettre en forme des listes
Mettre en forme des tableaux
Créer des formulaires
Créer des boutons
Mettre en forme des images
Créer une page d’atterrissage
Présentation réalisée dans le cadre du cours de "HTML / CSS "donné à l'École Supérieure de Commerce et d'Économie Numérique de Paris.
PLAN :
0.Introduction
1. Les bases du developpement web
- Qu'est-ce que le HTML ?
- Son fonctionnement
- Les navigateurs
- Les dossiers
2. HTML5
- Comment créer un fichier HTML
- Doctype
- Les balises
- La structure
3. CSS
- Link CSS
- Les propriétés
4. Les ressources du web
5. Sand Box
6. Q&A
Support du cours - Programmation Web 2
Niveau : Licence informatique - L1
Auteur : Faycel CHAOUA
Bibliothèque ISET Kélibia [SCI8 : 02-01-2018]
Licence : CC BY-NC-SA [https://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr]
Objectif général :
Prendre en main l’une des bibliothèques JavaScript les plus utilisés pour créer des interfaces utilisateurs
Objectifs spécifiques :
Découper l’interface utilisateur avec les composants
Passer des informations (données ou instructions) d’un composant à son composant fils avec « props »
Gérer l’état local d’un composant avec « state »
Afficher une listes de composants avec map()
Afficher un composant en fonction de l’état de l’application
Interagir avec un utilisateur grâce à la gestion des événements
Interagir avec un utilisateur par le biais des formulaires
Communiquer avec un serveur HTTP avec AJAX
Afficher des vues en fonction de l’URL avec le routage
Mettre en forme un composant
Présentation réalisée dans le cadre du cours de "HTML / CSS "donné à l'École Supérieure de Commerce et d'Économie Numérique de Paris.
PLAN :
0.Introduction
1. Les bases du developpement web
- Qu'est-ce que le HTML ?
- Son fonctionnement
- Les navigateurs
- Les dossiers
2. HTML5
- Comment créer un fichier HTML
- Doctype
- Les balises
- La structure
3. CSS
- Link CSS
- Les propriétés
4. Les ressources du web
5. Sand Box
6. Q&A
Support du cours - Programmation Web 2
Niveau : Licence informatique - L1
Auteur : Faycel CHAOUA
Bibliothèque ISET Kélibia [SCI8 : 02-01-2018]
Licence : CC BY-NC-SA [https://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr]
Objectif général :
Prendre en main l’une des bibliothèques JavaScript les plus utilisés pour créer des interfaces utilisateurs
Objectifs spécifiques :
Découper l’interface utilisateur avec les composants
Passer des informations (données ou instructions) d’un composant à son composant fils avec « props »
Gérer l’état local d’un composant avec « state »
Afficher une listes de composants avec map()
Afficher un composant en fonction de l’état de l’application
Interagir avec un utilisateur grâce à la gestion des événements
Interagir avec un utilisateur par le biais des formulaires
Communiquer avec un serveur HTTP avec AJAX
Afficher des vues en fonction de l’URL avec le routage
Mettre en forme un composant
Objectif général : Prendre en main l’un des frameworks PHP les plus utilisés
Objectifs spécifiques
Faire correspondre une URL donnée à un traitement précis grâce au routage
Regrouper des traitements connexes grâce aux contrôleurs
Récupérer les données d’une requête http grâce à Request
Retourner des contenus aux formats texte, HTML, JSON, etc. grâce à Response
Intégrer des données dans des templates grâce à Blade
Interagir avec l’utilisateur grâce aux formulaires
Créer, mettre à jour et suivre les évolutions d’un schéma de base de données grâce aux migrations
Faciliter la communication avec une base de données grâce à Eloquent
Ce Support explique quelques concepts de base de NodeJS et montre comment mettre en oeuvre la technologie NodeJS pour développer la partie Backend d'une application.
Les vidéos des démonstrations sont publiées sur les adresse suivantes :
- https://www.youtube.com/watch?v=-X_C1tS5-9Y
- https://www.youtube.com/watch?v=rE-xRH28m0s
- https://www.youtube.com/watch?v=tnxjkTvWoKA
Cette série explique les éléments suivants :
- Architecture Web
- Modèles Multi-Threads avec les entrées sorties bloquantes
- Modèles Single Thread avec les entrées sortie non bloquantes
-Technologie Node JS
- Comment créer une simple application Node JS avec java Script
- Architecture du Framwork Express
- Comment créer une application NodeJS avec Type Script
- Comment écrire des tests unitaires avec Jest
- Quelques concepts sur MongoDb
- Comment Créer une API Rest avec NodeJS, Express et MongoDb
- Comment tester l'API Rest
- Comment Créer la partie FrontEnd avec Angular.
Même si la qualité audio n'est pas bonne, ses vidéos peuvent aider ceux qui débutent dans NodeJS en attendant d'autres vidéos avec plus qualité audio et de contenu.
Bonne lecture
Objectif général : Savoir créer des pages Web interactives sans trop solliciter le serveur et le réseau pour offrir une meilleure expérience utilisateur
Objectifs opérationnels :
Stocker des données à l’aide des variables
Traiter des données à l’aide des opérateurs.
Communiquer avec l’internaute à l’aide des E/S de base
Contrôler le flux d’exécution des instructions.
Réutiliser et organiser le code en créant des fonctions
Créer l’interactivité grâce à la gestion des évènements
Traiter plus facilement plusieurs données connexes grâce aux tableaux et aux objets
Traiter des chaînes de caractères avec l’objet String
Gérer les propriétés de la fenêtre avec l’objet Window
Manipuler le contenu de la page Web grâce à l’objet Document
Contrôler la saisie d’un formulaire avec l’objet Form
Objectif général : Prendre en main l’une des bibliothèques JavaScript les plus utilisés pour créer des interfaces utilisateurs
Objectifs spécifiques :
Découper l’interface utilisateur avec les composants;
Configurer les composants avec « props »;
Gérer l’état local d’un composant avec « state »;
Afficher une listes de composants avec map();
Afficher un composant en fonction de l’état de l’application;
Interagir avec un utilisateur grâce à la gestion des événements;
Interagir avec un utilisateur par le biais des formulaires;
Communiquer avec un serveur HTTP avec AJAX;
Afficher des vues en fonction de l’URL avec le routage;
Mettre en forme un composant;
This document introduces Flask, a Python framework for building web applications. It explains that Flask uses Python decorators to define routes for the web server. Before writing a Flask application, the reader is instructed to install Python, pip, virtualenv, and Flask within a new project directory. The basics of writing a Flask application are then covered, including running the application and defining routes to return responses. The document ends with quiz questions and resources for learning more about Flask.
Manuel des TP - Atelier de développement web (PHP)
Niveau : Licence informatique - L2
Auteur : Houda TOUKABRI
Bibliothèque ISET Kélibia [TPI11 : 02-01-2018]
Objectif général : Prendre en main le framework CSS le plus utilisé
Objectifs opérationnels
Positionner du contenu avec le système de grille
Créer des barres de navigation
Mettre en forme des tableaux
Créer des formulaires
Créer des boutons
Mettre en forme des images
Objectif général : Prendre en main l’un des frameworks PHP les plus utilisés
Objectifs spécifiques
Faire correspondre une URL donnée à un traitement précis grâce au routage
Regrouper des traitements connexes grâce aux contrôleurs
Récupérer les données d’une requête http grâce à Request
Retourner des contenus aux formats texte, HTML, JSON, etc. grâce à Response
Intégrer des données dans des templates grâce à Blade
Interagir avec l’utilisateur grâce aux formulaires
Créer, mettre à jour et suivre les évolutions d’un schéma de base de données grâce aux migrations
Faciliter la communication avec une base de données grâce à Eloquent
Ce Support explique quelques concepts de base de NodeJS et montre comment mettre en oeuvre la technologie NodeJS pour développer la partie Backend d'une application.
Les vidéos des démonstrations sont publiées sur les adresse suivantes :
- https://www.youtube.com/watch?v=-X_C1tS5-9Y
- https://www.youtube.com/watch?v=rE-xRH28m0s
- https://www.youtube.com/watch?v=tnxjkTvWoKA
Cette série explique les éléments suivants :
- Architecture Web
- Modèles Multi-Threads avec les entrées sorties bloquantes
- Modèles Single Thread avec les entrées sortie non bloquantes
-Technologie Node JS
- Comment créer une simple application Node JS avec java Script
- Architecture du Framwork Express
- Comment créer une application NodeJS avec Type Script
- Comment écrire des tests unitaires avec Jest
- Quelques concepts sur MongoDb
- Comment Créer une API Rest avec NodeJS, Express et MongoDb
- Comment tester l'API Rest
- Comment Créer la partie FrontEnd avec Angular.
Même si la qualité audio n'est pas bonne, ses vidéos peuvent aider ceux qui débutent dans NodeJS en attendant d'autres vidéos avec plus qualité audio et de contenu.
Bonne lecture
Objectif général : Savoir créer des pages Web interactives sans trop solliciter le serveur et le réseau pour offrir une meilleure expérience utilisateur
Objectifs opérationnels :
Stocker des données à l’aide des variables
Traiter des données à l’aide des opérateurs.
Communiquer avec l’internaute à l’aide des E/S de base
Contrôler le flux d’exécution des instructions.
Réutiliser et organiser le code en créant des fonctions
Créer l’interactivité grâce à la gestion des évènements
Traiter plus facilement plusieurs données connexes grâce aux tableaux et aux objets
Traiter des chaînes de caractères avec l’objet String
Gérer les propriétés de la fenêtre avec l’objet Window
Manipuler le contenu de la page Web grâce à l’objet Document
Contrôler la saisie d’un formulaire avec l’objet Form
Objectif général : Prendre en main l’une des bibliothèques JavaScript les plus utilisés pour créer des interfaces utilisateurs
Objectifs spécifiques :
Découper l’interface utilisateur avec les composants;
Configurer les composants avec « props »;
Gérer l’état local d’un composant avec « state »;
Afficher une listes de composants avec map();
Afficher un composant en fonction de l’état de l’application;
Interagir avec un utilisateur grâce à la gestion des événements;
Interagir avec un utilisateur par le biais des formulaires;
Communiquer avec un serveur HTTP avec AJAX;
Afficher des vues en fonction de l’URL avec le routage;
Mettre en forme un composant;
This document introduces Flask, a Python framework for building web applications. It explains that Flask uses Python decorators to define routes for the web server. Before writing a Flask application, the reader is instructed to install Python, pip, virtualenv, and Flask within a new project directory. The basics of writing a Flask application are then covered, including running the application and defining routes to return responses. The document ends with quiz questions and resources for learning more about Flask.
Manuel des TP - Atelier de développement web (PHP)
Niveau : Licence informatique - L2
Auteur : Houda TOUKABRI
Bibliothèque ISET Kélibia [TPI11 : 02-01-2018]
Objectif général : Prendre en main le framework CSS le plus utilisé
Objectifs opérationnels
Positionner du contenu avec le système de grille
Créer des barres de navigation
Mettre en forme des tableaux
Créer des formulaires
Créer des boutons
Mettre en forme des images
Slides présentés à l'occasion du premier meetup Paris R Addicts.
La présentation est destiné à ceux qui ne connaissent pas ou très peu. Elle montre les intérêts et les inconvénients du logiciel ainsi que des éléments de syntaxe et des liens qui aideront l'apprentissage.
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30Sébastien Lejeune
Nous pensons toujours que l’intégration d’un e-mail n’est pas chose facile, mais… ce n’est pas spécialement le cas…
Je vais essayer de vous redonner gout à l’intégration d’e-mail en vous montrant quelques cas pratiques qui montrent le contraire.
Nous allons voir que beaucoup d’éléments graphiques peuvent être issu de ‘snippet’ de code qu’il suffit de styliser en fonction de la charte graphique de vos clients mais également qu’en respectant certaines règles de bonnes pratiques, votre code sera fonctionnel sur la majorité des clients/browsers e-mails.
L’intégration d’e-mail est un art, un art ou rigueur et précision sont de la partie…
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Renoir Boulanger
La façon de concevoir des sites Web a beaucoup évolué au cours des deux dernières années. Concevez-vous encore vos sites comme en 2009? Trouvez-vous vos sites lents? Êtes-vous web-responsable? Imaginez si vous étiez capable de gagner du temps. Comment pouvez-vous être certain que votre pigiste, employé ou fournisseur fait un travail de qualité?
Nous allons couvrir des techniques clé qui permettent d'optimiser le travail, comment être plus efficace avec votre équipe technique et savoir jauger le niveau d'expérience.
L’objectif de la séance est de donner des outils pour évaluer le niveau de qualité d’un site; des pistes pour en améliorer la performance et s’assurer de pouvoir en entretenir le code après plusieurs révisions.
objectif général : Mettre en forme le contenu d’un site web
objectifs opérationnel :
Insérer du style dans une page HTML
• Donner du style aux caractères et au texte
• Choisir une image ou une couleur de fond
• Gérer l’espacement externe et interne des différents composants d’une page Web
• Dimensionner les éléments d’une page HTML
• Positionner les éléments d’une page Web
Objectif général :
Améliorer le positionnement des pages d’un site Web dans les SERP (Search Engine Result Pages)
Objectifs opérationnels :
Sélectionner, dans un site Web, les pages à optimiser
Trouver des mots clés pour une page à optimiser
Optimiser le référencement naturel du contenu d’une page
Faciliter l’exploration, l’indexation et la consultation de l’ensemble des pages
Obtenir du trafic à partir de backlinks
Objectif général
Prendre en main l’un des frameworks PHP les plus utilisés
Objectifs opérationnels :
Faire correspondre une URL donnée à un traitement précis grâce au routage
Traiter les requêtes grâce aux contrôleurs
Intégrer des données dans des templates grâce à TWIG
Faciliter la communication avec une base de données grâce à Doctrine
Permettre à un utilisateur d’initialiser ou de modifier les attributs d'un objet métier grâce aux formulaires
Objectifs
Connaître les principales technologies utilisées pour développer des applications mobiles
Savoir quelle technologie est la mieux adaptée pour un projet
Objectif général : Connaître les fondamentaux d’une API REST
Objectifs spécifiques :
Savoir définir une API
Connaître l’architecture REST
Connaître les contraintes du REST
Connaître la structure d’une requêtes HTTP
Connaître les caractéristiques d’une ressources
Se servir des méthodes HTTP
Connaître la structure d’une réponses HTTP
Connaître les codes HTTP
Objectif général : Prendre en main l’un des Frameworks JavaScript les plus utilisés pour développer efficacement des applications Web
Objectifs spécifiques
Structurer l’application avec les composants
Gérer les données dynamiques avec le Data binding
Enrichir le HTML avec des directives prédéfinies
Interagir avec un utilisateur par le biais des formulaires
Organiser et partager le code métier avec les services
Communiquer avec un serveur via le service HttpClient
Afficher des vues en fonction de l’URL avec le routage
Objectif général : Savoir créer des pages Web interactives sans trop solliciter le serveur et le réseau pour offrir une meilleure expérience utilisateur
Objectifs opérationnels
- Stocker des données à l’aide des variables
- Traiter des données à l’aide des opérateurs.
- Communiquer avec l’internaute à l’aide des E/S de base
- Contrôler le flux d’exécution des instructions.
- Réutiliser et organiser le code en créant des fonctions
- Créer l’interactivité grâce à la gestion des évènements
- Traiter plus facilement plusieurs données connexes grâce aux tableaux et aux objets
- Gérer les propriétés de la fenêtre avec l’objet window
- Manipuler le contenu de la page Web grâce à l’objet document
- Contrôler la saisie d’un formulaire avec l’objet form
Objectif général : Développer en orienté objet avec Python
Objectifs opérationnels :
- Organiser le code grâce aux classes
- Sécuriser une classe avec l’encapsulation
- Réutiliser et factoriser du code avec l’héritage
- Invoquer des méthodes de même nom, quel que soit le type d'objet sur lequel elles opèrent, sans avoir à effectuer au préalable une vérification de type grâce au polymorphisme
Objectif général : Acquérir les connaissances nécessaires à la programmation avec le langage Python
Objectifs opérationnels :
- Mémoriser des données primitives
- Traiter des données
- Communiquer avec l’extérieur
- Contrôler le flux d’exécution des instructions
- Mémoriser des données composites
- Découper et réutiliser du code
Objectif général : Acquérir les bases méthodologiques de la résolution d'un problème conduisant à la réalisation d'un programme informatique
Objectifs opérationnels :
- Connaître les étapes de résolution d’un problème
- Stocker et traiter des données simples
- Permettre à un programme de communiquer avec l’extérieur
- Contrôler le flux d’exécution des instructions
- Traiter des données composites
- Définir et utiliser des procédures et des fonctions
Objectif général
Prendre en main l’un des framework PHP les plus utilisés
Objectifs opérationnels
Structurer les fonctionnalités grâce aux bundles
Faire correspondre une URL donnée à un traitement précis grâce au routage
Traiter les requêtes grâce aux contrôleurs
Intégrer des données dans des templates grâce à TWIG
Faciliter la communication avec une base de données grâce à Doctrine
Permettre à un utilisateur d’initialiser ou de modifier les attributs d'un objet métier grâce aux formulaires
Objectifs généraux :
Savoir effectuer une requête HTTP synchrone ou asynchrone
Savoir effectuer des requêtes RESTful avec les méthodes GET, POST, PUT, PATCH et DELETE
Objectifs opérationnels :
Comprendre une requête synchrone
Effectuer une requête synchrone
Lire, d’une manière synchrone, le contenu d’un fichier local
Comprendre une requête asynchrone
Effectuer une requête asynchrone
Récupérer des données à partir d’un serveur avec une requête asynchrone
Comprendre les méthodes de requête RESTful
Effectuer des requêtes RESTful avec les méthodes GET, POST, PUT, PATCH et DELETE
Objectif général : Prendre en main la bibliothèque JavaScript la plus utilisée
Objectifs spécifiques :
Inclure la bibliothèque
Sélectionner du contenu
Manipuler des éléments
Mettre en forme du contenu
Gérer des évènements
Utiliser des effets
Effectuer des requêtes AJAX
Objectif général : Acquérir les bases méthodologiques de la résolution d'un problème conduisant à la réalisation d'un programme informatique
Objectifs spécifiques :
Connaître les étapes de résolution d’un problème
Stocker et traiter des données simples
Permettre à un programme de communiquer avec l’extérieur
Contrôler le flux d’exécution des instructions
Traiter des données composites
Définir et utiliser des procédures et des fonctions
Objectif général : Découvrir quelques nouveautés du HTML5
Objectifs opérationnels :
Connaître les avantages du HTML5
Utiliser les nouveaux éléments de structuration
Utiliser les nouveaux éléments conteneurs
Utiliser les nouveaux éléments de contenu incorporé
Utiliser les nouveaux éléments et attributs de formulaire
Objectif général : Prendre en main Express js, le mini-framework de Node js le plus utilisé
objectifs spécifiques :
Installer Node js et Express js
Créer une application Express js
Router les requêtes
Recevoir des données à partir de l’URL d’une requête
Recevoir des données à partir du corps d’une requête
Traiter des fichiers uploadés
Utiliser un moteur de template
Utiliser une base de données
Utiliser des middlewares
Objectif général : Découvrir l'un des SGBDs noSQL les plus utilisés
Objectifs spécifiques :
Installer et démarrer un serveur et un client mongo
Créer une base de données dans un serveur mongo
Créer une collection dans une base de données mongo
Connaître les principaux types de données
Insérer des données
Consulter des données
Modifier des données
Supprimer des données
Cours référencement naturel supdeco techonologie avril-15Abdoulaye Dieng
Objectif général : Savoir positionner un site Web sur les premiers résultats des moteurs de recherche
Objectifs opérationnels :
• Connaître le fonctionnement basique d’un moteur de recherche
• Trouver des mots clés pertinents
• Savoir rédiger les parties qui optimisent le positionnement d’une page Web
• Choisir un hébergement et un nom de domaine qui optimisent le positionnement du site
• Partager judicieusement le « link juice » ou popularité des pages du site
Bien écrire l’URL (ou adresses) d’une page Web et de toute ressource (image, video, …)
• Editer les fichiers robots.txt et sitemap.xml utiles aux robots des moteurs
• Inscrire un site Web au niveau des moteurs et annuaires
• Trouver des backlinks (liens vers une page Web provenant d’un site extérieur)
• Enregistrer l’entreprise propriétaire du site Web sur Google Map
• Optimiser la visibilité d’un site Web sur les réseaux sociaux (Facebook, Twitter, Google+, …)
Cours CSS feuilles de style en cascade- mars 2015Abdoulaye Dieng
Objectif général : Mettre en forme le contenu d’un site web
Objectifs spécifiques :
Insérer du style dans une page HTML
Sélectionner du contenu dans une page Web
Donner du style aux caractères et au texte
Choisir une image ou une couleur de fond
Gérer l’espacement externe et interne des différents composants d’une page Web
Dimensionner les éléments d’une page HTML
Positionner les éléments d’une page Web
3. Objectifs opérationnels
• Positionner du contenu avec le système de grille
• Créer des barres de navigation
• Créer un fil d’Ariane
• Mettre en forme des listes
• Mettre en forme des tableaux
• Créer des formulaires
• Créer des boutons
• Mettre en forme des images
• Créer une page d’atterrissage
5. Présentation de Bootstrap
• Pb : comment standardiser la boîte à outils
de mise en forme des pages Web ?
• Framework HTML, CSS et JavaScript
contenant de nombreux composants prêts à
l’emploi : menus, boutons, tableaux, images,
formulaires, icônes, etc.
• Bootstrap est dévelopé par des ex-employés
de Twitter : Mark Otto et Jacob Thornton
• Bootstrap est publié en 2011 sur Github et en
devient le projet open source le plus
populaire en 2012
• Bootstrap est « mobile first » et permet le
responsive design
6. Installation de Bootstrap
• En local
1) Téléchargez la dernière version stable actuelle (11/05/18)
https://github.com/twbs/bootstrap/releases/download/v4.
1.0/bootstrap-4.1.0-dist.zip
2) Désarchivez dans votre répertoire racine
3) Fichiers de base à lier avec les pages HTML
• css/bootstrap.min.css
• js/ bootstrap.min.js (dépend de jQuery)
• En ligne
CDN (Content Network Delivery)
https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstr
ap.min.css
https://code.jquery.com/jquery-3.3.1.slim.min.js
https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstra
p.min.js
7. Grille
présentation
• Grille = découpage en lignes et en colonnes de la page
• Objectif : créer une mise en page en attribuant une ou
+sieurs colonne(s) aux contenus
• Nombre maximal de colonnes dans une ligne = 12
• Au delà de 12, les colonnes d’une ligne s’empilent grâce au
responsive
1 2 3 4 5 6 7 8 9 10 11 12
Largeur totale
1/2 1/2
2/3 1/3
8. Grille
devices
Très petit écran
(Smartphone)
Petit écran
(Tablette)
Écran moyen
(Ordinateur)
Écran large
(Ordinateur)
Valeur de
référence
< 768 px >= 768 px >= 992 px >= 1200 px
Prefixe de
classe
.col-xs- .col-sm- .col-md- .col-lg-
Conteneur
maximum
Automatique 750 px 970 px 1170 px
9. Grille
quelques règles
• Toute ligne (classe row dans une <div>) doit être incluse dans un
conteneur (classe container ou container-fluid dans une <div>)
• Seules les colonnes (<div> munie de la classe col-device-n avec
device = xs, sm, md ou lg et n = nombre de colonnes) doivent
être des enfants d’une ligne
• Tout contenu doit être inclus dans une colonne
• Une ligne contenant des colonnes peut être incluse dans une autre
colonne
• Décaler (.col-device-offset-n) un contenu de n colonnes vers la
droite
11. Grille
TP
• Ajoutez la classe well de Bootstrap à toute ligne
• Créez une classe box-col (fond blanc et bordure noire) à
ajouter à toute colonne
12. Barres de navigation
par défaut
• Syntaxe
les classes navbar et navbar-default dans une <nav>
Inclure, entre les balises de nav, une <ul> avec la classe nav
accompagnée de la classe navbar-nav
li pour les items de navigation dont l’actif est repéré par la
classe active
• Exemple
13. Barres de navigation
à fond noir
• Syntaxe
Dans la <nav>, remplacez la classe navbar-default par la
classe navbar-inverse
• Exemple
14. Barres de navigation
fixées
• Syntaxe
Dans la <nav>, ajoutez la classe navbar-fixed-top ou la
classe navbar-fixed-bottom
15. Fil d’Ariane
• Fil d’Ariane : aide à la navigation permettant à l’internaute de se
localiser dans le site
• Syntaxe
Classe breadcrumb dans <ul>
Classe active pour définir l'élément actif de la liste
Inclure une ancre dans chaque élément non-actif de la liste
• Exemple
24. Formulaires
horizontales
• Classe form-horizontal dans form
• Classe control-label dans label
• Utiliser les classes de grille pour aligner les labels et les
champs dans une disposition horizontale
• Exemple (à faire)
25. Boutons
types
• À la balise <button>, ajouter la classe btn accompagnée de
l’une des classes btn-default, btn-primary, btn-success,
btn-info, btn-warning, btn-danger ou btn-link
• Exemples
26. Boutons
dimensions
• Aux classes de base précédentes (exple : btn btn-default),
ajoutez l’une des classes btn-lg, btn-sm ou btn-xs
• La classe btn-block permet au bouton de s’étendre sur
toute la largeur de son conteneur
• Exemples
28. Images
responsive - centrage
• Classe img-responsive à img pour que l’image
s’adapte à son conteneur
• Classe center-block à img pour centrer l’image dans
son conteneur
29. Page d’atterrissage
présentation
• Page d’atterrissage (landing page) : page Web visant à accomplir
un objectif de conversion
• Qlq objectifs de conversion : vendre un produit ou un service,
inscrire à un newsletter, faire remplir un formulaire, abonner à un
blog, …
• Principaux contenus
Contenus pertinents p/r à la page référente ou de provenance
Titre qui incite l’internaute à poursuivre
Bénéfices que retirera l’internaute
Image illustrative du produit ou du service
Bouton d’appel à l’action bien visible