Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Dreamweaver CS6 : Les nouveautés

Aperçu du mode Grille fluide

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Nous devons de plus en plus développer des sites qui soit portables vers diverses plateformes allant des téléphones portables jusqu'à des écrans aux résolutions indécentes. Une des solutions pour nous accompagner dans cette démarche va être de s'appuyer sur l'utilisation de grilles liquides.
03:54

Transcription

Aujourd'hui le développement de contenu à destination du web doit être pluri-distribuable, c'est-à-dire qu'on doit pouvoir le consulter à la fois depuis un écran, depuis un écran 4/3 ou des proportions plus réduites, depuis une tablette et également depuis un smartphone en position portait. Ici ces types de développement ne sont plus appuyés sur quatre sites différents mais vont utiliser diverses technologies, que cela soit des médias queries ou des technologies responsive, comme on va pouvoir le voir. Alors ici sur ces types de développement, on s'appuie également de plus en plus sur des modes grilles. Des modes grilles qui peuvent être statiques, donc en fait on va définir des grilles qui auront une largeur définie ou au contraire des grilles qui vont pouvoir être liquides et responsive et vont pouvoir respirer en fonction de nos navigateurs, de nos applications lectrices. Alors ici si je regarde par exemple la solution qui est proposée par Golden Grid System, je vais pouvoir comprendre comment on va relier ces grilles à des fragments de code pour mieux les comprendre, avec des gouttières élastiques par exemple comme ici. Alors pour mieux le percevoir on va activer les grilles. Et donc là les grilles activées, on comprend mieux que sur une grille qui va s'appuyer sur 2, 3, 4, 5, 6, 7, 8 colonnes, on va pouvoir partager et redistribuer l'information en fonction de cette lecture. Et que va-t-il se passer dès l'instant où je vais passer en mode plus petit ? Vous voyez les colonnes vont se resserrer. Là je suis sur des colonnes liquides. Et là hop, je viens de passer dans un mode où il devient plus lisible de réduire les informations. Je reste toujours sur un certain nombre de colonnes mais cette fois-ci j'ai pu redistribuer l'information en fonction. Et si je continue ma démarche de réduire, voyez que tout se réajuste et là on passe dans un mode qui va devenir beaucoup plus facile à lire, encore une fois, sur plusieurs colonnes. Alors Golden Grid System, il a son système. 960 GS, qui a été pendant des années un mode grille qui a été utilisé par énormément de créateurs. Et vous voyez ici à chaque fois vous pouvez voir le site et sur quel type de mode de grille, combien de colonnes ont été utilisées dans ces grilles. Et vous pouvez voir donc directement ces travaux. Less Framework 4 qui est également un mode de grille liquide et responsive. Pour clore et à la fois ouvrir sur le mode grille, je vous inviterai à lire ce très vieil article de Mark Boulton qui explique comment on va pouvoir partir sur un mode grille et pourquoi. Alors il part sur le papier, sur les nombres de règle d'or, etc., sur les définitions de proportionnalité, de contenu et il va pouvoir, au travers de ces 5 articles, vous amener jusqu'à la partie « Grid System for web design: Part 3 fluid ». Alors c'est vrai que souvent on a la remarque ou le retour qui dit: mais le mode grille, ça reste très cartésien, très vertical, très carré. Et justement, un article très récent, vous voyez ici 19 décembre 2005, de Molly Holzschlag dit : voyez quand j'ai décollé des États-Unis, c'est vrai que vu d'avion les villes américaines se prennent tout à fait au mode grille puisqu'on est vraiment dans cet aspect-là et quand j'ai atterri à Londres, je me suis aperçue que ce n'était pas tout à fait la même chose et c'était un peu compliqué d'utiliser un mode grille là-dessus. Comment on va pouvoir faire un mode grille liquide sur quelque chose qui n'est pas « engrillable » ? Je ne connais pas le terme Eh bien lisez son article et vous allez voir qu'elle décortique le système et montre qu'on peut arriver, en mode grille, à travailler sur des sites qui seraient peut-être pas forcément prédisposés à être en mode grille et si on analyse bien quelque part on va pouvoir les canaliser, les cloisonner dans des modes grilles et donc les rendre responsive également. Voilà donc, de plus en plus je vous invite à venir voir les travaux sur mediaqueri.es, les travaux faits par les agences qui travaillent, qui exploitent ce mode de développement d'une part pluri-distribuable et en même temps basé principalement sur des modes grilles liquides.

Dreamweaver CS6 : Les nouveautés

Allez à la découverte des nouveautés de Dreamweaver CS6, qui gravitent autour du développement d’applications mobiles, de la pluri-distribution et de sites Internet réactifs.

3h16 (40 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :23 avr. 2012
Mis à jour le:5 avr. 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 !