Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Sauf mention contraire, le contenu de cet ouvrage est publié sous la licence :

Sauf mention contraire, le contenu de cet ouvrage est publié sous la licence : Creative Commons BY-NC-SA 2.0 La copie de cet ouvrage est autorisée sous réserve du respect des conditions de la licence Texte complet de la licence disponible sur : http: //creativecommons.org/licenses/by-nc-sa/2.0/fr/ Mentions légales Conception couverture et illustrations chapitres : amalgam impression OpenClassrooms 2014 - ISBN : 979-10-90085-62-6 Avant-propos Q uand on crée des sites web, on passe beaucoup de temps à composer des pages isolées ou des templates. Combiner le HTML et le CSS n’est pas toujours des plus faciles. D’autre part, la multiplication des supports de visualisation (allant des petits écrans de smartphones à des écrans géants) complique le problème. On ﬁnit par se créer peu à peu une librairie personnelle qui évolue au gré des progrès technologiques. C’est ce qui s’est passé chez Twitter, où chaque développeur avait créé sa librairie et où il devenait vraiment diﬃcile de maintenir une cohérence et surtout de faire évoluer les applications. C’est alors que Mark Otto et Jaconb Thornton se sont attelés à la tâche de créer une librairie commune. Le succès fut rapide, tant au sein de cette entreprise qu’à l’extérieur, où elle a répondu à une attente évidente. Le fait d’adopter cette librairie m’a fait gagner un temps considérable, découvrir des aspects qui m’avaient échappés, et en comprendre d’autres qui demeuraient un peu abscons jusque là. Les critiques concernant l’homogénéisation visuelle des sites utilisant cette librairie ne résistent pas à la pratique, parce qu’il est facile d’organiser son propre visuel une fois qu’on maîtrise un peu ses arcanes, ce qui est l’un des propos de cet ouvrage d’initiation. Bootstrap Vous créez des pages web et vous passez beaucoup (trop) de temps avec le CSS ? Alors Bootstrap est fait pour vous et ce cours va vous guider dans la découverte de cette puissante boîte à outils. Bootstrap est un framework qui peut rendre votre vie plus facile pour créer l’architecture d’une page web. Mais Bootstrap va bien plus loin qu’oﬀrir du code CSS déjà bien organisé et structuré. Il oﬀre aussi des plugins jQuery de qualité pour enrichir vos pages. Qu’allez-vous apprendre en lisant ce livre ? Ce livre est destiné à vous guider dans l’apprentissage de Bootstrap en abordant les notions de façon progressive et abondamment illustrée d’exemples pratiques. Je l’ai conçu comme le guide que j’aurais aimé posséder quand j’ai découvert cette librairie. Au ﬁl de son écriture, j’ai rencontré des notions qui m’avaient échappées ou sur lesquelles j’étais passé trop rapidement. À la ﬁn de cette lecture, et si vous étudiez les exemples i CHAPITRE 0. AVANT-PROPOS proposés, vous serez capables d’utiliser eﬃcacement cette librairie et de l’adapter à vos besoins particuliers. Voici les chapitres du cours et une présentation succincte de ce qu’ils proposent. 1. Mise en route : pour utiliser eﬃcacement Bootstrap, vous devez déjà être convaincu de son utilité et vous devez aussi savoir l’installer. Ce chapitre est destiné à vous faire découvrir en quoi Bootstrap peut vous aider, et comment vous devez le mettre en œuvre pour l’utiliser eﬃcacement. Nous aborderons éga- lement les Medias Queries que Bootstrap utilise pour que nos pages s’adaptent automatiquement au support utilisé pour les visualiser. 2. Une grille ? L’organisation spatiale des pages web est l’une des premières pré- occupations lorsque l’on crée un site web. Est-ce qu’on prévoit une bannière ? Faut-il un espace pour un menu à gauche ou en haut ? Y aura-t-il des blocs sur un des côtés pour recevoir certaines fonctionnalités comme la connexion ou des informations ? Faut-il prévoir un bas de page ? Bootstrap ne répond évidemment pas à ces questions, mais en revanche il peut grandement vous faciliter la tâche, avec son système de grille, pour obtenir le résultat que vous souhaitez. Je vous propose une petite visite guidée. . . 3. Un peu de pratique : Nous avons vu en détail les possibilités de la grille de Bootstrap. Nous avons vu également comment faire des mises en pages adaptées à diﬀérents types de supports. Il est temps maintenant de mettre en application toutes ces connaissances avec des applications pratiques. 4. Éléments de base : Une page web contient du texte et des images mais aussi un certain nombre d’éléments très fréquents, comme des listes, des tableaux, des for- mulaires, des icônes, des boutons... Créer une harmonie dans la présentation des tous ces éléments n’est pas une tâche aisée. Nous allons voir comment Bootstrap permet de créer un rendu visuel cohérent pour que tous ces éléments cohabitent de façon esthétique. 5. Les composants intégrés : Bootstrap propose des composants bien pratiques à mettre en œuvre : barre de navigation, eﬀets typographiques, panneaux, thumb- nails. . . et tout ça, sans écrire une seule ligne de code Javascript. Nous verrons aussi alertes et barres de progression qui demandent un peu de Javascript pour être mises en œuvre. . . 6. Les plugins jQuery : jQuery est un framework Javascript devenu incontour- nable au ﬁl des années. Les créateurs de Bootstrap l’ont choisi pour oﬀrir des plugins esthétiques et faciles à mettre en œuvre, dans la plupart des cas sans même mettre les doigts dans du code ! Toutefois, si vous voulez obtenir le meilleur de ces plugins, il vous faudra un peu manipuler jQuery. 7. Conﬁgurer Bootstrap : Utiliser directement ce que nous oﬀre Bootstrap c’est bien, mais le modiﬁer pour le rendre exactement adapté à nos besoins c’est encore mieux. Alors, si vous voulez bidouiller Bootstrap, ce chapitre est fait pour vous ! ii COMMENT LIRE CE LIVRE ? Comment lire ce livre ? Suivez l’ordre des chapitres Lisez ce livre comme on lit un roman : il a été conçu comme tel. Contrairement à beaucoup de livres techniques où il est courant de lire en diagonale et de sauter certains chapitres, ici il est très fortement recommandé de suivre l’ordre du cours, à moins que vous ne soyez déjà un peu expérimentés (et très sûr de vous). Pratiquez en même temps Pratiquez régulièrement. N’attendez pas d’avoir ﬁni la lecture de ce livre pour faire vos propres essais ; n’hésitez pas à modiﬁer les codes donnés en exemples, aﬁn de bien cerner le comportement de chaque instruction. Plus vous vous exercerez, et plus l’apprentissage sera rapide et eﬃcace. Remerciements Rédiger un livre est toujours une aventure à la fois personnelle et partagée. Je suis déjà l’auteur de 3 ouvrages dans des domaines très éloignés de l’informatique, mais qui m’ont donné l’occasion de découvrir le monde de l’édition. Je dois dire que le dialogue avec l’équipe d’OpenClassrooms, simple et rafraîchissant, change de celui que j’ai pu expérimenter par ailleurs. J’ai aussi envie de remercier les lecteurs de mon cours sur le site qui m’ont beaucoup encouragé. Je me suis ainsi rendu compte de son utilité. iii CHAPITRE 0. AVANT-PROPOS iv Table des matières Avant-propos i Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . i Qu’allez-vous apprendre en lisant ce livre ? . . . . . . . . . . . . . . . . . . . . i Comment lire ce livre ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii Suivez l’ordre des chapitres . . . . . . . . . . . . . . . . . . . . . . . . . iii Pratiquez en même temps . . . . . . . . . . . . . . . . . . . . . . . . . . iii Remerciements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii I Premiers pas 1 1 Mise en route 3 Un framework ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Les intérêts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Les inconvénients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Découverte de Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Origine de Bootstrap . . . . . uploads/Ingenierie_Lourd/ prenez-en-main-bootstrap.pdf