Cours Bootstrap

Twitter bootstrap tutorial for beginners pdf [Eng]


Télécharger Twitter bootstrap tutorial for beginners pdf [Eng]

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


twitter bootstrap tutorial for beginners pdf [Eng]

...

1. INTRODUCTION

Twitter Bootstrap est une infrastructure frontale populaire offrant une assistance pour développer plus rapidement et plus facilement des applications Web. Il fournit des modèles de conception basés sur HTML et CSS avec des composants d'interface tels que des tableaux, des formulaires, des boutons, une typographie, des menus déroulants, des navigations et de nombreuses autres fonctionnalités. Twitter Bootstrap contient également des outils JavaScript ainsi qu'un support jQuery intégré. Il peut être utilisé par les développeurs ou concepteurs Web débutants et avancés. L'avantage principal de l'utilisation de Twitter Bootstrap est qu'il s'accompagne d'un ensemble gratuit d'outils permettant de créer des mises en page Web flexibles et réactives (Tutorialrepublic.com, 2015a). Pour illustrer la mise en œuvre de Bootstrap pour la création de comportement réactif, NeidoFatty, un site Web dynamique a été conçu et développé. Ici, un site Web dynamique fait référence aux pages Web créées à l'aide de scripts côté serveur tels que PHP et MySQL, contrôlés par un serveur d'applications, un serveur WAMP, fournissant un serveur Apache, un serveur de base de données MySQL et un langage de script PHP. Ce site Web a été conçu pour fournir des images amusantes et humoristiques et a été développé pour afficher un site Web réactif et convivial, utilisant un ensemble d’outils différents, décrits brièvement plus loin dans cette thèse. La thèse porte principalement sur la manière dont Twitter Bootstrap peut être introduit et mis en œuvre afin de construire un site Web réactif, qui agit simultanément dans ses présentations et son apparence en fonction des périphériques sur lesquels il est affiché. Plus loin dans la thèse, une recherche plus détaillée a été menée sur diverses plates-formes informatiques, leurs tailles d’écran et différents navigateurs Web. En dehors de cela, cette thèse compare également différents frameworks CSS réactifs avec leurs fonctionnalités sur plusieurs périphériques et leurs compatibilités sur différents navigateurs Web.

2 OUTILS DE DÉVELOPPEMENT

Il existe une vaste sélection d'outils de développement open source disponibles pour la création d'un site Web dynamique. Cependant, aux fins de cette thèse, les outils ont été réduits à ceux nécessaires au développement de ce projet. Par conséquent, cette section de la thèse présente et décrit plus en détail tous les outils et technologies mis en œuvre dans le projet en cours.

2.1 HTML5

HTML5 est la cinquième révision de la norme HTML (Hyper Text Markup Language) publiée en 2011 par le World Wide Web Consortium (W3C). Il est également pris en charge par la plupart des principaux navigateurs Web (Chrome, IE, Firefox, Opera, Safari) de nos jours. Il offre plusieurs nouvelles fonctionnalités qui non seulement prennent en charge les contenus multimédias enrichis, mais améliorent également la prise en charge des applications Web pouvant interagir avec les utilisateurs, leurs données locales et leurs serveurs, plus facilement et efficacement que par le passé (Mozilla Developer Network, 2015a). Le nouveau langage de balisage a été développé sur la base des normes prédéfinies suivantes:

  • Les nouvelles fonctionnalités devraient être basées sur HTML, CSS, DOM et JavaScript.
  • Le besoin de plugins externes (comme Flash) doit être réduit.
  • La gestion des erreurs devrait être plus facile que dans les versions précédentes.
  • Les scripts doivent être remplacés par plus de balisage.
  • HTML5 doit être indépendant de l'appareil.
  • Le processus de développement doit être visible pour le public. (1stWebDesigner, 2013)

La plupart des infrastructures frontales utilisent HTML et le langage de balisage HTML5. En règle générale, les sites Web statiques ne peuvent être créés qu’en utilisant HTML5.

2.2 CSS3

CSS ou feuille de style en cascade est le fichier clé qui style ou conçoit tous les modules HTML d'un site Web. Il permet à l’utilisateur de séparer le contenu HTML du site Web de son style (Cssbasics.com, 2015). CSS2 a été conçu par le W3C en 1998, puis amélioré en 2011. CSS3 est la dernière version publiée par le W3C, qui fait actuellement l’objet d’un développement supplémentaire. Il est séparé en «modules» pour une modification plus facile et plus rapide des spécifications individuelles. Certains nouveaux modules ajoutés à CSS3 sont les suivants:

  • sélecteurs
  • Couleurs et arrière-plans
  • effets de texte
  • modèle de boîte
  • animations
  • contenu remplacé
  • Transformations 2D / 3D
  • Interface utilisateur
  • Mise en page à plusieurs colonnes
  • Média paginé

2.3 PHP

PHP est un acronyme récursif pour PHP: Hypertext Preprocessor, largement utilisé comme langage de script côté serveur open source. Il a été créé par Rasmus Lerdorf en 1994 et est maintenant produit par The PHP Group (Php.net, 2015a). PHP est exécuté sur le serveur et intégré au HTML. Il est utilisé pour gérer le contenu dynamique, les bases de données, le suivi de session, voire même pour créer des sites de commerce électronique complets (Tutorialspoint.com, 2015a). Une fois que le code PHP a été interprété et exécuté sur le serveur, il revient au navigateur au format HTML simple, ce qui ne donne aucune information au client sur le code PHP utilisé. Il est compatible avec presque tous les serveurs disponibles sur le marché et fonctionne sur diverses plates-formes informatiques.



2.4 JavaScript

JavaScript est un langage de script dynamique orienté objet populaire et couramment utilisé pour l'interactivité dynamique sur les sites Web, qui a été développé par Netscape Communication Corporation en 1996 (Mozilla Developer Network, 2015b). JavaScript a également une application étendue dans la création de sites Web interactifs puisqu'il est supporté par tous les navigateurs et fonctionne collectivement avec HTML. Ses principales caractéristiques sont les types et les opérateurs, les objets principaux et les méthodes. Sa syntaxe provient des langages Java et C, par conséquent, de nombreuses structures de ces langages s'appliquent également à JavaScript. L'une des principales différences est que JavaScript ne contient pas de classes. au lieu de cela, la fonctionnalité de classe est réalisée à travers des prototypes d'objet. L’autre principale différence est que les fonctions sont des objets, elles ont donc la possibilité de contenir du code exécutable et peuvent être transmises comme tout autre objet. (Réseau de développeurs Mozilla, 2015c.)

2.5 jQuery

jQuery est une bibliothèque JavaScript multi-plateforme. Il est conçu pour faciliter l’utilisation de JavaScript dans les scripts HTML côté client. Il s’agit d’un langage de programmation gratuit et à code source ouvert sous licence MIT. La syntaxe de jQuery facilite la navigation dans un document, la sélection d’éléments DOM, la création d’animations, la gestion des événements et le développement d’applications Ajax (jquery.org, 2015). Dans ce projet, jQuery est utilisé avec JavaScript dans le cadre de l'interface utilisateur flexible.

2.6 MySQLi

MySQL est un système de gestion de base de données relationnelle (SGBDR) SQL (code de requête structuré) open source développé, distribué et pris en charge par Oracle Corporation. De même, le serveur MySQL est le serveur utilisé pour gérer les données stockées dans la base de données d’un ordinateur. Dans ce projet, un serveur WAMP est utilisé dans lequel MySQL gère les composants de la base de données. Il existe trois options d'interface de programmation d'applications (API) principales avec MySQL qui fournissent des connecteurs à divers langages de programmation, y compris PHP:

  • L’extension MySQL de PHP
  • L’extension MySQLi de PHP
  • Objets de données PHP (PDO) (Php.net, 2015b)

Chacune de ces extensions a ses propres avantages et inconvénients. Premièrement, l'extension MySQL sert à développer des applications PHP qui interagissent avec une interface. Ensuite, l'extension MySQLi, également appelée extension améliorée MySQL, a été développée afin de tirer parti des nouvelles fonctionnalités des systèmes MySQL versions 4.1.3 et ultérieures (Php.net, 2015c) et est incluse dans PHP version 5. et ensuite. L'extension MySQLi est objectivée. prend en charge les relevés préparés, les relevés multiples et les transactions; offre des capacités de débogage améliorées; et possède un support serveur intégré. En tant qu'interface orientée objet, l'extension MySQLi fournit également une interface procédurale. Enfin, PDO est une couche d'abstraction de base de données spécialement créée pour les applications PHP. Son principal inconvénient est qu'il ne permet pas toutes les fonctionnalités avancées disponibles dans les dernières versions du serveur MySQL (Php.net, 2015d). Ainsi, l'extension MySQLi est utilisée dans ce projet en tant qu'API pour le serveur MySQL.

2.7 éditeur de texte

Il existe de nombreux éditeurs de texte disponibles en ligne qui prennent en charge plusieurs langages de programmation, tels que PHP, C ++, HTML, CSS et autres. Pour le développement Web, des éditeurs de texte tels que Adobe Dreamweaver, Notepad, Notepad ++, Sublime Text, Bluefish et bien d’autres peuvent être utilisés. Certains de ces éditeurs de texte sont libres d'utilisation, tandis que d'autres peuvent être achetés sur leurs sites officiels. Dans ce projet, l’éditeur Sublime text 2 est utilisé.

2.8 serveur WAMP

Le serveur WAMP, acronyme de Windows, Apache, MySQL et PHP, est une application open source conçue pour installer les packages Apache, PHP et MySQL dans des systèmes d'exploitation Windows, couramment utilisés dans les environnements de serveur Web. L'installation du serveur WAMP est facile et une fois installé, il peut commencer à fonctionner immédiatement sans ajustement supplémentaire. Un serveur WAMP est utilisé dans ce projet afin de créer et de tester le site Web responsive localement. En d’autres termes, le serveur WAMP utilise phpMyAdmin, un logiciel gratuit écrit en PHP permettant de gérer l’administration de MySQL sur le World Wide Web; un serveur Apache est utilisé comme serveur Web; MySQL est utilisé pour gérer les composants de la base de données. et PHP, Python ou PERL (Webopedia.com, 2015) sont utilisés comme langages de script dynamiques.

3 CONCEPTION DE LA BASE DE DONNEES

Une base de données bien conçue est l'élément clé d'un développement Web dynamique bien structuré. Une collection de données organisée et partagée est appelée base de données (Merriam-webster.com, 2015), tandis que la conception de base de données est le processus de production d'un modèle de données détaillé d'une base de données (Wikipedia, 2015a). De même, la conception d'une base de données nécessite une compréhension claire des exigences de la fonction du projet afin de garantir que les informations puissent être fournies de manière cohérente, en éliminant la redondance des données et en préservant les données existantes tout en supprimant les données non souhaitées.

Le système de gestion de base de données (SGBD) est un logiciel qui interagit avec l'utilisateur, d'autres applications et la base de données pour capturer et analyser des données (Gehani, 2006). Il est classé en fonction du modèle de base de données qui détermine la structure logique de la base de données et la manière dont les données peuvent être stockées, organisées et manipulées. Le modèle relationnel est le modèle de base de données le plus populaire qui utilise un format basé sur des tables et peut organiser les données en une ou plusieurs tables (relations) de lignes et de colonnes (Ntu.edu.sg, 2015), comme illustré dans la photo 1 ci-dessus, fournissant une clé unique pour chaque ligne. Une base de données basée sur ce modèle est appelée base de données relationnelle.



La base de données relationnelle ci-dessus, illustrée à la figure 1, est utilisée dans le projet Neidofatty, les clés primaires représentant chaque table. Chaque clé primaire de la table individuelle est la clé étrangère de l'autre table, ce qui donne un modèle relationnel pour la base de données. Par exemple, la table Post a postId en tant que clé primaire, alors que postId dans les vues de table sert de clé étrangère pour les vues de table. Ces tables peuvent être modifiées à l'aide d'instructions SQL standard ou directement à partir du phpMyAdmin fourni par le serveur WAMP. Le processus de modification est appelé opération CRUD (création, lecture, mise à jour, suppression) dans une application de base de données relationnelle.

La base de données relationnelle est conçue, créée ou modifiée à partir de phpMyAdmin fourni par le serveur WAMP (voir figure 2). Après avoir créé toutes les tables requises pour le site Web, la deuxième étape consiste à créer le cadre frontal pour les pages Web. Comme indiqué précédemment, dans ce projet, Twitter Bootstrap est utilisé pour créer le site Web du site Web offrant un comportement réactif.

4 TWITTER BOOTSTRAP

Twitter Bootstrap est le framework frontal open source le plus populaire pour le développement de sites Web et d'applications Web réactifs, conçu par Mark Otto et Jacob Thornton sur Twitter et publié sur GitHub en 2011 (W3schools.com, 2015). Il contient des modèles de conception HTML et CSS pour un développement Web rapide et facile, ainsi que des extensions JavaScript facultatives (Otto, 2015a). Bootstrap fournit non seulement tous les modules de base tels que Typographie, Tableaux, Formulaires, Boutons et Réactivité, mais offre également plusieurs composants frontaux comme les menus déroulants, Navigation, Modals, Typehead, etc., nécessaires à la conception du projet Web présenté dans cette thèse. De plus, Bootstrap est compatible avec toutes les dernières versions des principaux navigateurs.

Bootstrap a publié trois versions principales avec plusieurs séries et depuis la version 2.0, il prend également en charge la réactivité. Une conception Web adaptative consiste à créer des sites Web qui s'adaptent automatiquement à tous les appareils (voir Illustration 3), des petits téléphones aux grands ordinateurs de bureau (W3schools.com, 2015). En outre, depuis la version 3, Bootstrap a lancé la conception de Mobile First, en insistant sur le comportement réactif par défaut. La conception de Mobile First indique que la conception d'un site Web commence par le mobile. Outre son design réactif et sa compatibilité, Twitter Bootstrap possède les fonctionnalités intégrées suivantes:

  • dispositions de la grille
  • Éléments de formulaire personnalisés
  • typographie
  • plugins JavaScript
  • Composants et beaucoup d'autres.

4.1 Installation

Twitter Bootstrap fournit un modèle HTML facile à utiliser pour commencer à concevoir un site Web. Avant de commencer la conception d'un site Web, il existe deux façons de commencer à utiliser Bootstrap. Bootstrap peut être téléchargé à partir de sa page d’accueil, getbootstrap.com, ou peut-être inclus à partir d’un CDN. Il existe trois codes sources téléchargeables qui peuvent être acquis à partir de Github ou getbootstrap.com. Ces codes sources téléchargeables sont classés en fonction du niveau de compétence des programmeurs et de leur connaissance du langage de feuille de style Sass ou Less et de JavaScript. Selon leurs besoins, les programmeurs peuvent développer des sites Web à l'aide des codes minifiés de Less et Sass ou les modifier. Dans ce projet, les CSS, JavaScript et les polices compilées et minifiées sont utilisés pour montrer la simplicité du Bootstrap nécessaire à la réactivité du site Web. La source de téléchargement contient un dossier compressé. Une fois la décompression terminée, la structure suivante de Bootstrap est fournie et peut être implémentée dans la conception du site Web.

Image 4. CSS, JavaScript et les polices compilées et minisées dans Bootstrap (Otto, 2015b) De même, Bootstrap utilise également le réseau mondial de diffusion de contenu de MaxCDN, public et gratuit, permettant de charger à distance CSS et JavaScript afin de réduire le trafic Web. Il peut également être installé dans l'application Web à l'aide de Bower ou de NPM (un gestionnaire de paquets pour JavaScript).

4.2 Mise en œuvre

Bootstrap offre la possibilité d'utiliser librement des cadres de modèles, qui peuvent être modifiés en fonction des besoins de chaque projet Web (voir la figure 5). Ces modèles sont disponibles sur le site Web officiel de Bootstrap, tandis que d’autres développeurs Web ont également fourni différents modèles gratuits en tant que source ouverte, après avoir introduit leur propre modification dans les codes.

Le thème présenté ci-dessus n’est qu’un exemple des nombreux modèles disponibles sur le site Web de Bootstrap. D'autres modèles peuvent être présentés plus en détail afin d'illustrer les nombreuses utilisations différentes des composants et de la feuille de style de Bootstrap. Ces modèles sont librement disponibles pour les concepteurs et les développeurs qui souhaitent lancer leurs propres projets Web.

4.2.1 Modèle HTML de base

Le modèle HTML fourni par Twitter Bootstrap a été utilisé lors de la phase initiale du projet (voir la photo 6 ci-dessous). Ce modèle montre comment Bootstrap peut être implémenté sur le Web après son installation. Il peut être enregistré au format HTML, PHP ou toute autre extension en fonction de la nature du Web, qu’il soit dynamique ou statique. Étant donné que Bootstrap précompilé a été utilisé dans ce projet, les modèles sont enregistrés dans l’extension PHP du dossier Bootstrap afin de créer un site Web dynamique. Les sites Web dynamiques sont fonctionnels, faciles à mettre à jour et sont générés en temps réel. Ils peuvent également être testés à l'aide d'un serveur WAMP.



Comme le montre la photo 6 ci-dessus, Bootstrap utilise le type de document HTML5. Cela doit être déclaré au début du document Web afin que les composants Bootstrap et les propriétés CSS puissent être utilisés. De même, la propriété responsive est assurée en ajoutant la balise à l'intérieur de l'élément. La largeur de l'écran de la page à l'intérieur des différents appareils est définie par la largeur de l'appareil, tandis que le niveau de zoom initial est défini par défaut sur 1. Le zoom peut être désactivé sur les appareils mobiles en ajoutant "userscalable = no" dans la même méta étiquette (Otto, 2015d). Ensuite, jquery.js est inclus à partir de la bibliothèque jQuery dans le modèle susmentionné. Enfin, les feuilles de style JavaScripts et CSS pour les utilitaires Bootstrap, à savoir bootstrap.min.js et bootstrap.min.css, sont incluses à partir de la source téléchargée. Lors de l'utilisation de ce modèle, une présentation de site Web réactif simple peut être obtenue en ajoutant du contenu et des composants Bootstrap supplémentaires. Les composants en question sont discutés plus loin dans cette thèse.

4.2.2 Système de disposition de la grille

Une grille est une structure à deux dimensions (lignes et colonnes) utilisée pour organiser et systématiser le contenu d'un site Web. Ses fonctions sont de faciliter l'analyse du site Web et de réduire la charge cognitive pesant sur les utilisateurs. Bootstrap utilise le premier système de mise en réseau fluide du réseau mobile pour gérer son contenu. Le système de grille Bootstrap peut évoluer jusqu'à 12 colonnes lorsque le périphérique ou la taille de la fenêtre augmente (2015). Il inclut des classes prédéfinies pour des options de mise en page faciles, ainsi que de puissants mixins pour générer des mises en page plus sémantiques (Tutorialspoint.com, 2015b).

Dans l’illustration 7 ci-dessus, un total de 12 zones de contenu sont affichées sur différents périphériques, le remplacement de la grille variant en fonction de la taille de l’écran du périphérique. Une présentation en grille à une colonne est rendue dans les dispositions pour appareils mobiles qui contiennent 1 colonne et 12 lignes superposées, tandis qu'une présentation en deux colonnes est rendue sur des tablettes contenant 2 colonnes et 6 lignes. De la même manière, dans les périphériques de taille moyenne, tels que les ordinateurs portables et les ordinateurs de bureau, le rendu est présenté sous la forme d'une disposition à trois colonnes, composée de 3 colonnes et de 4 lignes. Enfin, une disposition de grille à quatre colonnes est rendue dans les grands périphériques et comprend respectivement 4 colonnes et 3 lignes (Tutorialrepublic.com, 2015b). Afin de mettre en œuvre un système de grille, Bootstrap utilise un élément contenant pour envelopper le contenu du site Web. Pour un conteneur à largeur fixe réactif, la classe de grille prédéfinie ".container" peut être utilisée dans le modèle, tandis que ".container-fluid" peut être utilisée pour un conteneur à largeur totale.

Comme il a été mentionné précédemment, les mises en page sont créées en organisant le contenu en lignes et en colonnes dans un système de grille. Pour un alignement et un remplissage corrects, les lignes sont placées à l'intérieur du conteneur et sont utilisées pour créer des groupes horizontaux de colonnes. Seules les colonnes sont les enfants immédiats des lignes et le contenu est placé dans ces 12 colonnes disponibles. Comme le montre le tableau 1 ci-dessous, Bootstrap utilise des classes de grille prédéfinies pour les lignes sous la forme '.row' et les colonnes sous la forme '.col-xs- *', '.col-md- *', '.col-lg- *' en fonction des appareils pour lesquels le site a été conçu. En outre, les colonnes créent des gouttières (espaces entre les contenus de colonne) via un remplissage (2015). Ce remplissage est décalé en lignes pour les première et dernière colonnes via une marge négative sur les classes «.row» (Otto, 2015e).

En outre, le tableau 1 ci-dessous illustre brièvement le système de disposition de la grille, en comparant différents périphériques, tels que les mobiles, les tablettes et les ordinateurs de bureau de moyenne et grande taille, dotés de classes prédéfinies et d'autres fonctionnalités. Ces fonctionnalités peuvent être utilisées dans un projet Web tout en le rendant responsable du comportement.

……

4.2.3 Utilitaires réactifs

Bootstrap étant appliqué pour un développement plus rapide compatible avec les appareils mobiles, le contenu conçu pour les ordinateurs de bureau de moyenne et grande taille peut être affiché ou masqué par l'appareil. Ceci peut être réalisé via une requête multimédia en utilisant les classes d’utilitaires supplémentaires fournies. Ces classes ne doivent être utilisées que de manière limitée afin d'éviter de créer des versions totalement différentes du même site. Ils peuvent plutôt être utilisés pour compléter la présentation de chaque appareil (Otto, 2015h). Les classes disponibles pour basculer du contenu entre les points d'arrêt de la fenêtre d'affichage sont présentées dans le tableau 2 suivant:



19