Découvrir Java pour le web

Utiliser un framework HTML/CSS/JavaScript

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Transposez votre maquette sur un framework HTML/CSS adaptable pour mobile. Il s'agit ici de Twitter Bootstrap.
06:29

Transcription

Nous avons maintenant une maquette relativement complète. Si on la reprend, on retrouve notre contenu fait en HTML, sa mise en forme en CSS, et son aspect dynamique en JavaScript avec le temps qui s'écoule. Si notre projet évolue, cette maquette il va falloir la maintenir et permettre de faire rentrer toutes les informations supplémentaires dans des écrans, qui parfois, si on y accède en mobile, sont relativement petits. Ici par exemple, je peux voir disparaître le temps si mon écran est étroit. Il va falloir faire défiler pour voir le temps correspondant au projet. Pour m'adapter à la résolution de l'écran, faire un design adaptable, qu'on appelle aussi « responsive », je vais pouvoir utiliser des frameworks JavaScript, HTML et CSS qui utilisent notamment les Media Queries en CSS3 qui permettent d'adapter un style et des règles de style à la résolution de l'écran. Au lieu de le faire moi-même, je vais utiliser des frameworks, et le plus connu est le framework Twitter Bootstrap. Voilà ce que peut donner notre maquette avec des éléments supplémentaires dans Twitter Bootstrap. Si on reprend notre « index.html » et qu'on lance, on a quelque chose avec des graphiques faits avec Chart.js qui est une librairie JavaScript de graphiques. On a quelque chose qui est beaucoup plus complet. On a notamment notre liste de projets, une liste de tâches, qu'on a ajoutée, des graphiques, une connexion de l'utilisateur, avec la possibilité de se déconnecter, et surtout, quand on va réduire la résolution de notre écran, une adaptation. Ici sur les graphiques on pourrait rajouter quelques caractéristiques, Une adaptation : ici la disparition de la liste des projets. Cette liste des projets apparaît ici. Avec toujours la possibilité d'avoir ce menu. Un menu mobile, dans lequel les projets sont passés, et une adaptation à différents formats d'écran. Pour voir comment tout cela a été fait, on peut se plonger dans la partie HTML. C'est toujours plus pratique aussi d'utiliser l'inspecteur pour voir en parallèle comment ça se traduit dans le design. On a toujours une partie d'en-tête avec les « meta » que l'on avait mises mais on trouve en plus une référence au CSS « bootstrap.min.css » de Bootstrap qui a été mis dans un répertoire « vendor » du site. On a aussi l'inclusion de JavaScript qui permet de s'adapter à des versions inférieures à IE9. Dans la partie « body » on retrouve trois grandes parties. Le header qui est passé en « nav » car maintenant c'est plus une navigation avec un menu. Le « main » qui est la partie principale de notre écran, qui est en conteneur fluide. C'est un style fourni par Bootstrap. Et un pied de page, qui est collé en bas, « fixed-bottom », pour s'assurer qu'il est collé en bas. Des JavaScripts puisque Bootstrap utilise « jquery » on a une allusion à « jquery » ici. L'inclusion du JavaScript de Bootstrap et l'inclusion des graphiques. Le script qui est là est un script qui permet de construire les graphiques en fonction de données utilisées ici pour la maquette. On verra comment les construire dynamiquement en fonction de données dans une base de données. Mais ça se fait côté serveur. Avant ça, on va voir la logique de colonnes de Bootstrap. Pour ça, on va voir ces deux grandes parties de notre écran. Elles ne sont pas divisées de façon absolue, mais divisées avec une logique de découpage en colonnes. Bootstrap conçoit l'écran sous la forme de 12 colonnes et après on peut répartir selon la résolution dans ce nombre de 12 colonnes. Ici par exemple, pour des résolutions petites, j'ai choisi de prendre 5 colonnes. « col », « sm » pour small, « 5 ». « col », « md » pour des résolutions moyennes, de 4 colonnes sur les 12. Et pour des écrans larges : de 3 colonnes sur les 12. Pour la deuxième partie de mon écran je vais faire le total ici. Ici « col-sm-7 » pour les small. « col-md-8 », qui est le complément de 4 à 12, pour les moyens. Pour les larges : de 9, qui est le complément, 9 + 3 = 12, donc je prends 9 colonnes pour faire la partie large pour donner un maximum à mon écran principal. Ce que je n'ai pas détaillé c'est en « xs ». « xs » c'est extrêmes petit. Donc la partie mobile : je fais disparaître complètement ma navigation avec « hidden-xs ». Et je donne l'intégralité des 12 colonnes à ma partie principale. Justement, pour faire apparaître dans la navigation, dans la barre de navigation ici. Comme j'ai utilisé « hidden-xs », je vais utiliser un « visible-xs » sur ma partie navigation. Un « visible-xs » qui me permet de faire apparaître. Ici je n'ai pas de menu de projets, mais si je diminue assez mon écran je fais apparaître cette partie de menu de projets grâce à mon « visible-xs ». Ce que je n'ai pas fait ici, c'est surcharger certaines fonctionnalités de Bootstrap. On peut bien-sûr personnaliser une partie du CSS proposé par Bootstrap en rajoutant ses propres styles, non pas dans le « bootstrap.min.css », mais en rajoutant et en incluant d'autres fichiers CSS. C'est tout à fait possible, pour avoir des éléments qui ne sont gérés par Bootstrap.

Découvrir Java pour le web

Développez une application web avec Java. Apprenez à écrire des servlets, des entités ​J​PA (Java Persistence API) d'accès aux données et des pages JSP (Java Server Pages).

2h06 (23 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :25 janv. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !