ISBN 9782322093182 452 pages FORMAT 17x22 cm Prix Public TTC 36.90 €

En librairie

Grid Layout CSS 3 par la pratique

Ce livre a pour objectif de proposer une approche pédagogique pour l'apprentissage du modèle de positionnement qu'est Grid Layout. Il est destiné principalement aux programmeurs et aux développeurs débutants. Entièrement dédié à un seul module de CSS, ce livre a pour mission de vous faire découvrir le phénomène incontournable qu'est devenu Grid Layout.

Le nouveau modèle de positionnement Grid Layout remplit à la perfection sa mission permettant la composition de pages web plus ou moins complexes de manière simple, intuitive et sans code parasite ou inutile. De plus, les spécifications du module Grid Layout sont aujourd'hui considérées comme stables et l'ensemble des navigateurs récents les prennent en charge depuis déjà un petit moment.

Ce livre s'adresse à des personnes connaissant de façon générale l'usage et l'utilisation des CSS, qui souhaitent apprendre en pratique ce nouveau modèle de positionnement qu'est Grid Layout. Cet ouvrage est conçu avant tout pour répondre à des cas réels de la vie d'intégrateur web de tous les jours. Il est essentiellement constitué des notions à connaitre, des exemples concrets décortiqués et des travaux pratiques.

Au chapitre 1, nous allons mettre en place un environnement de travail très complet avec l'utilisation du logiciel gratuit Visual Studio Code de façon à optimiser la compréhension et la réalisation des grilles flexibles avec Grid Layout, avec l'utilisation de la librairie jQuery 3 pour faciliter les accès au DOM, avec l'utilisation d'un serveur local WampServer pour l'émulation des pages à distance, et avec l'utilisation des navigateurs Internet Explorer, Firefox, Chrome et Edge.

Au chapitre 2, après une brève introduction sur ce que représente le module Grid Layout, nous verrons les concepts d'une grille au travers de ses éléments physiques et de ses éléments logiques.

Au chapitre 3, nous verrons l'ensemble des propriétés de grille au travers de ses deux ensembles: le premier ensemble se compose des propriétés susceptibles de s'afficher sur le parent (grid container) et le second ensemble se compose des propriétés spécifiques aux enfants directs (grid item).

Au chapitre 4, nous réaliserons un premier projet qui consiste à composer un gabarit en utilisant un conteneur parent doté d'un contexte de grille.

Au chapitre 5, nous verrons l'utilisation du double algorithme de Grid Layout, capable de générer des grilles selon un modèle explicite et selon un modèle implicite. Grâce à ce double modèle, la grille est capable de prédire et de s'adapter elle-même.

Au chapitre 6, nous composerons un gabarit de mise en page selon le modèle du placement explicite de façon à mieux comprendre les rouages de Grid Layout.

Au chapitre 7, nous aborderons le placement automatique des éléments. Au sein du modèle de positionnement Grid Layout, les éléments ont la liberté de se placer automatiquement selon un flux pouvant être horizontal ou vertical.

Au chapitre 8, nous verrons comment Grid Layout permet d'attribuer un nom à certains repères pour une plus grande souplesse dans le placement.

Au chapitre 9, nous composerons un projet applicatif dans lequel nous verrons comment positionner un calque superposé sur un conteneur parent hébergeant une grille.

Au chapitre 10, nous verrons ce que la spécification Grid Layout apporte comme nouveautés dans le domaine des unités et de certaines valeurs.

Au chapitre 11, nous verrons comment la spécification Grid Layout répond de manière simple et unique à la création des gouttières entre les éléments d'une grille.

Au chapitre 12, nous aborderons l'ordre d'affichage quand des éléments ont un affichage explicite et une propriété order spécifique.

Au chapitre 13, nous réaliserons un projet applicatif tout simple qui est un exercice de style pour la mise en œuvre de la technique des grilles selon Grid Layout associée aux styles CSS.

Au chapitre 14, nous aborderons l'ensemble des alignements en fonction des différents types d'éléments au travers des ajustements pour l'ensemble de la grille, pour l'ensemble des éléments au sein de la grille et pour chaque élément individuel au sein de sa cellule.

Au chapitre 15, nous verrons comment fusionner des cellules avec le mot-clé span lors du placement automatique.

Au chapitre 16, nous composerons un projet applicatif qui aborde le pouvoir de disposer des éléments de dimensions variables dans une grille organisée "à la Pinterest", c'est-à-dire au sein d'une construction fluide dans laquelle chaque objet trouve sa place quelle que soit sa largeur ou sa hauteur.

Au chapitre 17, nous composerons un projet applicatif pour construire le tableau périodique des 118 éléments chimiques.

Au chapitre 18, nous composerons un projet applicatif pour construire un plateau du jeu du Monopoly (exercice simple qui demande une certaine rigueur).

Au chapitre 19, nous composerons un projet applicatif pour construire une carte postale à partir d'un ensemble de dix photos en vrac. C'est un exercice simple qui met en application le mélange du placement automatique et du placement défini.

Au chapitre 20, nous composerons un projet applicatif pour construire une carte de Bingo (exercice classique qui demande un peu de réflexion concernant la structure à adopter).

Au chapitre 21, nous composerons un projet applicatif pour construire un badge à imprimer à partir d'un formulaire que l'on remplit en ligne.

Au chapitre 22, nous composerons un projet applicatif pour construire un visualisateur de pages pour regarder les pages d'un magazine, fournies sous forme de ressources graphiques (exercice plus difficile qui demande une certaine rigueur dans la composition du code JavaScript pour définir les fonctionnalités).

Au chapitre 23, nous composerons un projet applicatif pour générer un contenu graphique 2D en utilisant l'élément HTML <canvas> avec son API dédiée.

Au chapitre 24, nous composerons un projet applicatif pour visualiser un contenu graphique 2D au format SVG.

Au chapitre 25, nous composerons un projet applicatif pour visualiser un rendu 2D d'une scène 3D composée avec l'API WebGL (exercice difficile pour tout ce qui concerne la modélisation 3D avec WebGL).

Ressources complémentaires

Consulter le sommaire détaillé du livre => en cliquant ici

Télécharger gratuitement le code source de programmation => en cliquant ici

Disponible dans les librairies en ligne

Chez Amazon France => commander ici

Fiche auteur chez Books on Demand => par ici

Chez Books On Demand => commander ici