Avertissement

title	WIP

Documentation en cours de rédaction...

Sommaire

maxLevel	3

Concepts généraux sur le développement de sites

...

responsives

Qu'est ce que le responsive web design ? C'est une technique qui permet de concevoir des sites qui s'adaptent automatiquement à l'espace disponible sur l'écran. Ainsi, d’un support à l’autre, et simplement via des règles CSS, certains éléments du site peuvent être masqués, ajoutés et changés de place pour optimiser l’expérience utilisateur. Voici un exemple qui met en évidence la différence entre : statique, liquide, adaptatif et responsive.

...

Dans le cas d'un développement de site responsive, il n'est pas possible d'utiliser des unités figées tel que le pixel : il faut donc se tourner vers d'autres unités dites relatives, comme comme %, vh, em, ...

Bloc de code

theme	Eclipse
language	css
title	CSS (version responsive)
linenumbers	true

.wrapper {
    max-width: 1200px; /* le site peut prendre n'importe quelle taille entre 0 et 1200px */
}

.content {
    width : 75%; /* 900/1200 = 75% */
}

.menu {
    width: 25%; /* 300/1200 = 25% */
}

Grâce aux quelques modifications apportées dans le code CSS ci-dessus, nous avons maintenant un site dit "fluide" quand on le redimensionne en largeur.

Les

...

media-queries

Il s'agit d'une spécification CSS3 éditée par le W3C qui permet d'exécuter des règles CSS conditionnelles en fonction de la largeur de la fenêtre du terminal client, de son orientation et/ou de ses capacités.

...

Dans ce cas, la valeur auto permet de dire que la div doit la div doit reprendre son comportement initial par rapport à la propriété width, et comme cette cette div est un élément HTML de type "bloc", elle prendra alors 100% de la largeur de la page. Pour plus d'informations sur le "pourquoi/comment" cet élément HTML prend toute la largeur de la page, consultez cet article portant sur le contexte de formatage block.

...

Depuis quelques temps on découvre de nouveaux outils basés sur NodeJS qui permettent d'apporter un niveau d'automatisation très intéressant pour le développement front-end. Cela permet de gérer beaucoup de tâches fastidieuses et/ou répétitives de façon automatique et de s'assurer par la même occasion d'avoir un haut niveau de qualité. On pense notamment à GruntJS ou Gulp, qui permettent par exemple de concatener tous concaténer tous les fichiers CSS insérés dans une page et "minifier" cette nouvelle feuille de style, et plus encoreetc...

Des outils d'analyses de performances de site existent et permettent d'identifier les axes d'amélioration : Chrome developper tools Chrome developper tools , Google page insight, WebPageTest, ...

...

Depuis juin 2010, avec l'arrivée de l'iPhone 4 d'Apple, on retrouve de plus en plus de terminaux à écran haute-densité sur le marché.

Cette haute densité rend ne permet pas à l'oeil humain de distinguer les pixels les uns des autres. Or il a été constaté que dans ces cas là, les images ont tendance à être floues sur le terminal. Pour pallier à ce soucis, il existe plusieurs techniques permettant de prendre en compte ces nouveaux écrans. Cela passe par un travail au niveau des visuels du site.

...

Une autre approche relativement intéressante pour régler ces problèmes est la prise en charge côté serveur de la partie gestion des ressources à transmettre au client. Cette technique est appelée Responsive Server-Side ou plus communément RESS : voir ce slideshare qui présente ce qu'il est possible de faire.

Les solutions techniques

Twitter Bootstrap

Twitter Bootstrap est un framework CSS mobile-first créer créé par deux développeurs de Twitter , : c'est une librairie comprenant une grille et un ensemble de composants CSS réutilisables. L'avantage de l'utilisation de ce système est qu'il est testé sur un grand nombre de navigateurs, cela évite évitant ainsi les problèmes de compatibilité.

L'inconvénient de Bootstrap est son poids car il nécessite de charger la librairie jQuery. Il n'est peut-être donc pas forcément pertinent dans des projets de petite envergure.

Jasig a ayant choisi Bootstrap pour le développer le thème respondr dans Respondr de uPortal 4.1, c'est pour quoi il peut être pertinent de l'utiliser au sein de portlets du portail. Cependant Toutefois, l'utilisation de ce framework pour les portlets connait au niveau des portlets connaît quelques limitations qui ont été comblée comblées -en partie- par la création d'une version modifiée. Voir customizée de Bootstrap. Pour plus d'information, consultez la partie Adaptation de Twitter Bootstrap pour fonctionner dans un contexte portlet

...

Bootstrap définit quatre catégories d'écrans à savoir :

Extra-Small (=> xs) : Largeur inférieure à 768px
Small (=> sm) : Largeur comprise entre 768px et 1200px
Medium (=> md) : Largeur comprise entre 990px et 1200px
Large (=> lg) : Largeur supérieure à 1200px

Dans chacune de ces catégories, les composants et la grille fournis par Bootstrap auront un fonctionnement comportement différent.

Voir l'explication du fonctionnement de la grille

On considère que notre site va être Considérons un site découpé en 12 colonnes sur sa largeur. Si l'on veut afficher 4 blocs côtes à côtes côte-à-côte, on devra leur donner une largeur de 3 colonnes chacun.

Bloc de code

theme	Eclipse
language	html/xml
title	Exemple Bootstrap #1 (colonnes)
linenumbers	true

<div class="<div class="row">
    <div class="col-xs-12 col-md-3"></div>
    <div class="col-xs-12 col-md-3"></div> 
    <div class="col-xs-12 col-md-3"></div>
    <div class="col-xs-12 col-md-3"></div>
</div>

Dans l'exemple ci-dessousdessus, lorsque la fenêtre du navgateur navigateur sera inférieure à 768px (xs), chaque div prendra toute la largeur de la page (12/12 => 100%).
Et lorsqu'elle sera comprise entre 990px et 1200px, chaque chaque div occupera 3/12 soit 1/4 25% de la largeur de la page.

Styles de base

Il existe beaucoup de class classes CSS qui aident au développement de l'interface , : on retrouve toutes ces class ces classdans l'onglet CSS de la documentation, cela . La réutilisation de ces classes permet de rapidement mettre rapidement en forme des boutons, tableaux, formulaires en y ajoutant des class CSS.

Bloc de code

theme	Eclipse
language	html/xml
title	Exemple Bootstrap #2 (classes CSS)
linenumbers	true

<div class="table<div class="table-responsive">
    <table class="table">
        ...
    </table>
</div>

...

Une des grandes forces de Twitter Bootstrap réside dans la richesse des composants qu'il propose. Un composant peut être considéré comme un module dans une page, comme par exemple un menu déroulant , ou un carrousel.

Dans ce cas, Bootstrap propose un ensemble de composant composants prêts à l'emploi en se basant sur ses styles de base. L'avantage de les utiliser est que tous les composants sont réside dans leur nature à être -de base- responsives.

Ancre

	custom-bootstrap
	custom-bootstrap

Adaptation de Twitter Bootstrap pour fonctionner dans un contexte portlet

Dans le cadre de développement de portlet responsive, Mohamed Belmokhtar a pu repérer nos tests de développement avec Bootstrap, nous avons identifié certaines limitations du framework quand on l'utilise lors d'un usage au sein d'une portlet.

Effectivement, les medias media-queries détectent la largeur de la fenêtre dans son intégralité, tandis qu'une portlet ne représente qu'un fragment de la page. Dans ce cadre la, Germain Souquet et Mohamed Belmokhtar ont là, nous avons mis en place une version modifiée du framework pour s'adapter à ces contraintes. Les sources sont disponibles sur Github.

Cette solution se veut iso-fonctionnelle par rapport à la version non modifiée. Cependant, il reste aujourd'hui quelques conflits de classes de lors d'une utilisation "simultanée" de la version modifiée /non modifiée quand on utilise cette librairie avec (importée par les portlets) avec celle d'origine (utilisée par le thème Respondr d'uPortal 4.1 et le thème respondr).

Il est possible d'accéder à l'historique des discussions à propos de cette version modifiée de Bootstrap avec Jasig via l'historique Des échanges sur cette problématique sont en cours avec la communauté Jasig => Historique de la mailing list

Nécessité d'implémentation de modification au sein du framework

Comme évoqué précédemment les medias media-queries ne se basent que sur la largeur de la fenêtre, or les portlets peuvent prendre différentes tailles au sein d'une page . Une portlet va pouvoir occuper (25%, 33%, 40%, 50%, 60% ou même 100% de la largeur. Et une même portlet pourra avoir deux largeurs différentes sur une même page.

La version modifiée permet de passer outre les limitations imposées par les medias queries. Il devient alors possible d'avoir des "css conditionnelles" en fonction de la largeur de la portlet elle même.

...

). Il était donc nécessaire de trouver une solution "similaire" (règles CSS "conditionnelles") mais ne se basant pas sur les media-queries (inexploitables dans ce contexte).

Pour ce faire, nous sommes donc partis du constat suivant :

Objectif : permettre d'appliquer différentes règles CSS en fonction de la largeur d'une portlet
Contraintes :
un page peut contenir plusieurs portlets
une même portlet peut se trouver à plusieurs endroits différents sur la même page...
.... et ne pas avoir la même largeur à chaque fois
la largeur d'une portlet peut varier lors d'un drag-n-drop (déplacement de portlet d'une colonne A à une colonne B), d'un changement de mode (normal => maximisé, maximisé => normal), d'un redimensionnement de la fenêtre du navigateur

=> Il nous fallait donc trouver une solution permettant de recalculer dynamiquement la largeur de chaque portlet présente sur la page.

Notre solution se base sur :

un div (dit "conteneur") englobant l'intégralité du contenu de la portlet
un script JS permettant de :
calculer à la volée les largeurs de chacune des portlets...
... et, en fonction de la valeur obtenue pour chacune d'elles, attribuer la classe CSS correspondant au mode d'affichage (xs , sm, md, lg) à appliquer.

Fonctionnement de la version modifiée

Il faut insérer un petit snippet JavaScript dans la page

Bloc de code

theme	Eclipse
language	javascript
title	Snippet JS
linenumbers	true

(function($) {
	var $portletContainers;
	$(document).ready(function() {
    	// all portlets must have the CSS class .pc
    	$portletContainers = $(".pc");
    	// Resize event isn't fired on DOM Content Loaded, we launch the function manually
   		onWindowResize();
  		$(window).resize(onWindowResize);
	});
	function onWindowResize() {
    	$portletContainers.each(function(index) {
        var $that = $(this);
        var portletWidth = $that.width()
        $that.removeClass("xs sm md lg");
        if(portletWidth < 768)
            $that.addClass("xs");
        if(portletWidth >= 768 && portletWidth < 992)
            $that.addClass("sm");
        if(portletWidth >= 992 && portletWidth < 1200)
            $that.addClass("md");
        if(portletWidth >= 1200)
            $that.addClass("lg");
    });
}
})(jQuery);

A chaque redimensionnement de la fenêtre, ce script va parcourir tous les éléments de la page pour recalculer la taille des conteneur conteneurs de porlet et leur appliquer la classe CSS en fonction de leur nouvelle largeur.

La limitation actuelle de ce système est qu'il ne gère pas le déplacement de portlet en drag & drop. -n-drop => Cela fait partie des évolutions futures du développement.

Exemples de projets tirant parti du framework

Portlet Jasig modifiée : email-preview
Portlet Portlet Jasig modifiée : news-reader-portlet
Esup-Dematec (Bootstrap en version 2.3)

Intégration d'une portlet en pure CSS

Dans quels cas envisager cette solution ?

L'utilisation de framework CSS n'est pas toujours utile. Dans certains cas, lorsque l'existant est trop lourd , ou que l'interface se révèle très sommaire il est notamment, il peut s'avérer fastidieux et/ou inutile de se baser sur des librairies aussi conséquentes.

>> Dans le cadre de l'intégration utilisation d'une portlet en se basant sur un système déjà existant l'utilisation d'un framework obligera le développeur à reprendre quasiment entièrement la structure HTML un framework CSS dans un projet existant d'ampleur non négligeable, le développeur sera amené à revoir :

la structure HTML générale de son site pour se conformer à la philosophie du framework

...

=> Il lui faudra reprendre chaque bloc, un par un, pour y appliquer les

...

classes CSS nécessaires à l'affichage des styles correspondants.

...

la feuille de style CSS afin d'en retirer les éléments

...

entrants en conflit avec les classes fournies par

...

le framework => Il faudra en effet vérifier que les règles CSS de la portlet ne surchargent pas certaines règles du framework au risque sinon de perdre l'aspect responsive de certains éléments
le choix des librairies JS (ou de leurs versions) utilisées => il faut s'assurer que les plugins

...

JS (ou jQuery) utilisés dans la portlet soient eux aussi responsives...

...

ou, dans le cas contraire, trouver une librairie iso-fonctionnelle pour remplacer l'

...

actuel (avec tous les problèmes que cela peut occasionner...)

=> On comprend donc que cela peut vite devenir lourd et compliqué à mettre en place pour obtenir le résultat désiré.désiré. Des adaptations de la feuille de style CSS pourraient alors être suffisantes...

Dans On retrouve aussi l'effet inverse dans le cadre d'un développement proposant une vue minimaliste dans une portlet, est-il nécessaire de charger autant de styles pour au final ne profiter que d'une infime partie de la librairie ? Il semble que non. , le développeur devra évaluer -en fonction du résultat attendu- l'intérêt de charger (ou non) toute une librairie... Peut-être que quelques lignes de CSS et JS peuvent suffire pour répondre à ses besoins ! => Dans ces cas là, il parait paraît plus pertinent de partir sur une solution sans librairie de réaliser soit même l'intégration.

...

"homemade"...

Les classes CSS conditionnelles

Comme vu expliqué précédemment, il est malheureusement impossible avec des médias media-queries de cibler la largeur de la portlet. Nous d'une portlet => nous sommes obligés de nous baser sur la largeur de la fenêtre (pour mieux comprendre cette problématique, un article explique bien les problèmes d'implémentation de cette fonctionnalité nommée Element Query).

Il faudra donc s'abstraire des medias media-queries et passer par une technique alternative. La technique est Nous proposons donc de détecter en JavaScript le redimensionnement de la fenêtre et d'appliquer une classe CSS à un élément HTML en fonction de sa taille (calculée à la volée).

Bloc de code

theme	Confluence
language	html/xml
title	Code HTML (Container)
linenumbers	true	language	html/xml

<div class="container">	
	<!-- prendra la classe "small" si la taille de ce bloc est inférieur à 600px -->
	<!-- prendra la classe "medium" si la taille de ce bloc est supérieur à 600px et inférieur à 1100px -->
	<!-- prendra la classe "large" si la taille de ce bloc est supérieur à 1100px -->
</div>

Avec un une CSS classique tirant partie parti des médias media-queries nous aurions écrit ceci :

Bloc de code

theme	Eclipse
language	css
title	CSS (avec media-queries)
linenumbers	true

@media screen and (max-width: 600px) {
  /* règles pour les écrans "small" */
}
 
@media screen and (min-width: 601px) and (max-width: 1100px) {
  /* règles pour les écrans "medium" */
}
 
[...]

Nous ne pourrons plus tirer partie des medias queries donc nous allons Dans la mesure où nous ne pouvons pas nous appuyer sur les media-queries, il nous faut écrire quelque chose comme cela :

Bloc de code

theme	Eclipse
language	css
title	CSS (sans media-queries)
linenumbers	true

.container.small .mon-selecteur-css {
   /* mes propriétés ... */
}
 
.container.medium .mon-selecteur-css {
 	/* ... */
}
 
.container.large .mon-selecteur-css {
   /* ... */
}

...

Pour mettre en oeuvre ce qui est présenté dans la partie précédente, nous n'avons d'autres choix que de nous reposer sur JavaScript. Il existe actuellement deux solutions :

...

C'est une toute petite librairie JavaScript qui permettra d'écrire les "simili media-medias queries" dans le code HTML afin d'appliquer une classe CSS si les conditions sont validées. Voir les sources sur Github

Bloc de code

theme	Eclipse
language	html/xml
title	Selector Queries (exemple)
linenumbers	true

<div data-squery="min-width:1100px=large max-width:600px=small">
    <!-- ... -->
</div>

Cela tire partie des Cette solution s'appuie sur les attributs data-* (compatible compatibles à partir de IE8+) , : ces attributs attributs data-* ne sont pas prévus pour cela à la base, mais il aucune solution CSS n'existe aucune solution en CSS actuellement pour le réaliser. L'avantage de cette librairie est qu'elle est relativement légère et qu'elle permet de mettre en place rapidement des points de bascules personnalisés.

Solution

...

"homemade"

Il est également possible de reprendre le snippet JavaScript proposé pour la version Bootstrap et en faire une version adaptée , en l'adaptant à vos besoins :

Bloc de code

language	javascript

(function($) {
	var $portletContainers;
	$(document).ready(function() {
    	// all portlets must have the CSS class .container
    	$portletContainers = $(".container");
    	// Resize event isn't fired on DOM Content Loaded, we launch the function manually
   		onWindowResize();
  		$(window).resize(onWindowResize);
	});
	function onWindowResize() {
    	$portletContainers.each(function(index) {
	        var $that = $(this);
	        var portletWidth = $that.width()
	        $that.removeClass("small medium large");
	        if(portletWidth < 600)
	            $that.addClass("small");
	        if(portletWidth >= 600 && portletWidth < 1100)
	            $that.addClass("medium");
	        if(portletWidth >= 1100)
	            $that.addClass("large");
    	});
	}
})(jQuery);

...

Une grille fonctionne toujours de la même manière, c'est tout d'abord un nombre de colonne colonnes défini avec un espacement entre chaque (que l'on appellera "gouttière") qui va former une ligne. Le système de grille le plus répandu se base sur 12 colonnes mais il est autant possible d'en avoir 16 ou 8..

Il Dans le cadre d'un développement de ce site il est hautement recommandé de se baser sur une grille existante. Il est possible de se baser sur , comme celle de Bootstrap ou même Foundation, ces de Foundation par exemple. Ces deux frameworks offrent la possibilité de choisir quelles partie module de la librairie télécharger. Il devient alors possible de n'avoir que les grillescustomizer ces librairies en sélectionnant les parties/modules du framework que l'on souhaite utiliser => Il est alors possible de ne "charger" que le système de grille...

Intégration de portlet au sein d'une iframe

Comme évoqué précédemment, le concept d'Element Query (appliqué appliquer des CSS conditionnelle conditionnelles par rapport à un élément de la page et non par rapport à la fenêtre globale) n'existe pas en CSS. Cependant l'élément HTML iframe applique les medias media-queries de la page incluse par rapport à la taille de l'iframe.

Cela permet donc d'utiliser les frameworks CSS sans les modifications présentés présentées dans la partie précédente. Cependant Toutefois, les iframes apportent plusieurs problématiques . Leur : leur largeur et leur hauteur sont fixes par exemple.

Pascal Rigaux de l'université Paris 1 a développé Pour contourner le problème de hauteur fixe, il existe une solution reposant sur "postMessage" en HTML5 afin de communiquer entre la page HTML et la page incluse dans l'iframe. Le fonctionnement basique de cette solution est que simple :

la page incluse va transmettre à la page parente la hauteur de son contenu...
... ce qui va permettre de positionner la bonne valeur à l'attribut height de l'élément iframe.

Il est possible de retrouver le diaporama de présentation du une présentation de ce travail réalisé par Pascal R. sur Github. Une documentation est aussi disponible sur Esup-Portail.

DA noter que d''après le site CanIUse, la fonction postMessage est compatible avec Internet Explorer 8 et supérieure. Cette fonctionnalité est donc prise en charge par plus de 90% des navigateurs du marché.

...

Foundation : concurrent direct de Twitter Bootstrap, on retrouve beaucoup de similitude avec ce dernier
Knacss : micro framework, très léger et ne contient aucun style graphique, juste une grille et des fonctionnalités de placement d'éléments, idéal pour des demandes graphiques très spécifiques
...

Ressources utiles

Ci-dessous un agrégat d'articles, sites et outils utiles qui n'ont pas trouvés leur place au sein de cette documentation

...

Navigate Space

Pages enfant

Comparaison des versions

Ancienne version 19

Nouvelle version Actuel

Légende

Concepts généraux sur le développement de sites

responsives

Les

media-queries

Les solutions techniques

Twitter Bootstrap

Styles de base

Adaptation de Twitter Bootstrap pour fonctionner dans un contexte portlet

Nécessité d'implémentation de modification au sein du framework

Fonctionnement de la version modifiée

Exemples de projets tirant parti du framework

Intégration d'une portlet en pure CSS

Dans quels cas envisager cette solution ?

Les classes CSS conditionnelles

Solution

"homemade"

Intégration de portlet au sein d'une iframe

Ressources utiles

Navigate Space

Pages enfant

Pages … Projet ESUP Mobile Ressources, outils et astuces Initiation RWD : Aide, outils, ressources Historique de la page

Comparaison des versions

Ancienne version 19

Nouvelle version Actuel

Légende

Concepts généraux sur le développement de sites

responsives

Les

media-queries

Les solutions techniques

Twitter Bootstrap

Styles de base

Adaptation de Twitter Bootstrap pour fonctionner dans un contexte portlet

Nécessité d'implémentation de modification au sein du framework

Fonctionnement de la version modifiée

Exemples de projets tirant parti du framework

Intégration d'une portlet en pure CSS

Dans quels cas envisager cette solution ?

Les classes CSS conditionnelles

Solution

"homemade"

Intégration de portlet au sein d'une iframe

Ressources utiles

Pages

Projet ESUP Mobile
Ressources, outils et astuces
Initiation RWD : Aide, outils, ressources

Historique de la page