Responsive Web Design - Ivan Madjarov
publicité
Responsive Web Design Une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives Ivan MADJAROV Arnaud FÉVRIER Aix Marseille Université, CNRS LSIS UMR 7296, IUT, Département Réseaux et Télécommunications, Marseille, France [email protected] Aix Marseille Université, CNRS, I2M, UMR 7373, IUT, Département Réseaux et Télécommunications, Marseille, France [email protected] Abstract—En général les sites Web sont conçus pour des écrans larges ce qui provoque un certain inconfort chez les utilisateurs de petits écrans des téléphones portables, smartphones et tablettes quand ils naviguent sur Internet. Le développement Web traditionnel conçoit autant de copies de contenu qu'il y a de familles de terminaux utilisés. La technique du Web adaptatif (Responsive Web Design) conçoit une seule interface autoadaptable et évite ainsi la duplication des sources d'information ou des supports techniques. L'approche adaptative peut être généralisée pour toutes les technologies Web. Il est donc possible de concevoir des cours adaptatifs, des applications mobiles adaptatives ou encore des applications Cloud responsives. Keywords—Responsive Web design; Développement Web adaptatif; Services réseaux; Responsive e-Learning Design. Avec la technique du Web adaptatif on conçoit une seule interface auto-adaptable en opposition avec la technique traditionnelle qui conçoit autant de copies de contenu qu'il y a de famille de terminaux utilisés pour la navigation sur Internet en évitant ainsi la duplication des sources d'information ou des supports techniques (Figure 1). Par conséquent, des économies d'échelles sont engendrées pour le développement et la maintenance des sites Web [12]. Mais, une étude récente montre qu'il n'y a que 25% des sites visités début 2014 qui sont devenus responsives. Pour les autres on dénombre 50% de sites avec duplication de contenu quand ils se mettent à niveau [15]. L'argument avancé concerne le plus de simplicité au niveau conception des sites. Il est incontestable que l'approche responsive pour être réussie et par conséquent devenir efficace demande avant tout une conception du site bien réfléchie. I. INTRODUCTION Jusqu'à une période récente, les sites Web étaient conçus pour une largeur de l'écran de l'ordre de 800 à 1024 pixels. Cette largeur fixe destinée à priori aux ordinateurs de bureau convenait également aux ordinateurs portables. Avec l'apparition des téléphones connectés, les smartphones et les tablettes les utilisateurs du Web ont progressivement changés de comportement. Il est indéniable que le nombre de personnes, en particuliers étudiants, qui utilisent ces petits écrans pour naviguer sur Internet est en croissance exponentielle. Les développeurs des sites en majorité ont aussitôt réagi en dupliquant le contenu pour assurer une version pour les unités mobiles à petit écran et une version standard pour les écrans larges des ordinateurs fixes ou portables. Il est évident que cette solution s'avère peu pratique et forte consommatrice en ressources dans le temps. Le Responsive Web Design [4, 5] (RWD ou encore site Web adaptatif [1]) et les Medias Queries [3] du CSS3 [2] sont une réponse aux enjeux que le Web connaît actuellement avec cette progression constatée des unités mobiles. La nouvelle technique RWD fait évoluer la manière de concevoir un site Web. Les interfaces ne sont plus figées et s'adaptent automatiquement à n'importe quel support permettant de consulter une page sur Internet en tout confort avec une large gamme d'appareils (ordinateurs, smartphones, tablettes, TV, etc.) sans avoir recours au défilement horizontal ou au zoom avant et arrière sur les dispositifs tactiles notamment, manipulations qui accentuent considérablement la sensation d'ergonomie erronée. Fig. 1. L'essentiel de la tâche du Responsive Web Design L'approche adaptative peut s’appliquer à d’autres usages qu’un site Web. Tout ce qui utilise des technologies Web peut être repensé adaptatif. Il est ainsi possible de concevoir des cours pédagogiques adaptatifs, des applications mobiles adaptatives ou encore des applications Cloud responsive. L'intérêt pour ce problème dans ce papier est inspiré par deux facteurs. (1) Dans le PPN 2013 des départements Réseaux et Télécommunications le sujet est traité dans le module M1106 (Initiation au développement Web) dès la première année de DUT où la compétence pour une mise en œuvre du RWD est directement visée. Cette compétence est réutilisée dans le module M2105 (Web dynamique) pour réaliser des pages Web responsives générées côté serveur [13]. (2) La politique de notre université (certainement valable et pour d'autres universités) en matière de pédagogie prévoit à l'avenir le passage à 20% des cours en ligne. C'est-à-dire un accès distant de plus en plus généralisé et illimité dans le temps. Cela a un impact certain sur nos cours, non seulement pour le fond, mais 3ème Workshop pédagogique R&T, Saint Pierre de La Réunion, 17-20 novembre 2014. aussi pour la forme, si on souhaite faciliter l'accès "mobile" à notre pédagogie et inciter les étudiants d'en profiter à leur guise, sans limites, même en déplacement. De nos jours les étudiants de l’Université, de l’IUT, ou d’ailleurs, ont de plus en plus souvent la possibilité de lire ou télécharger leurs cours sur Internet. De plus, les étudiants ne se limitent que très rarement à la lecture de ces cours sur leur ordinateur, ils sont souvent amenés à réviser dans les transports en commun ou ailleurs en utilisant leur smartphone. Il est donc crucial que le Responsive Web Design et l’e-Learning [8] soient étroitement liés pour que les étudiants soient capables d’apprendre leurs cours dans de bonnes conditions, de la manière la plus ergonomique qui soit. II. LES NORMES HTML5 ET CSS3 L'HTML5 est une évolution du langage avec une multitude de nouvelles fonctionnalités et un ensemble de nouvelles balises afin de donner plus de sémantique (de sens) aux pages Web. Cette évolution contribue à la structuration du contenu et avec l'utilisation des feuilles de style (CSS3) on s'approche considérablement à la séparation du fond et de la forme. Ce point est important pour l'adaptation d'une présentation en fonction des médias ciblés. L'écriture du code est allégée et certaines balises sont simplifiées. Ainsi, un document HTML5 type contient un minimum de balises dans la partie en-tête (<head>) comme présenté à la Figure 2. Pour des besoins pédagogiques, nous pouvons définir des règles simples pour la conception d'un site adaptatif. En se basant sur ces règles, nous pouvons construire le cours proposé aux étudiants R&T dans le cadre du module M1106 pour les initier au développement Web dont les connaissances acquises seront appliquées dans le module M2105 tout en respectant la pédagogie par projet. En parallèle, nous pouvons promouvoir une technique aussi simple qui sera utilisée par les créateurs de cours pédagogiques. L'objectif final est de mettre en ligne ces supports de cours responsives et accessibles par n'importe quelle unité mobile à travers les systèmes e-Learning existants de nos universités: Moodle [6], Dokeos [7] ou autres. Suite à des tests, effectués dans le cadre d'un projet tuteuré, nous avons constaté que les moyens intégrés dans les systèmes Moodle ou Dokeos pour les auteurs des cours s'apprêtent difficilement à la technique RWD et varient d'une version à l'autre. Une solution pratique serait de baliser manuellement la page Web et le fichier de style ou d'utiliser un éditeur HTML5 compatible qui respecte mieux les points de ruptures définis par les CSS3. Les fichiers HTML5 et CSS3 produits seront conformes et peuvent être intégrés par la suite dans un environnement numérique de travail (ENT). Dans le cadre du projet de recherche Xesop [10], une solution responsive d'adaptation de contenu a été développée. Elle consiste à produire des contenus pédagogiques dans un format natif XML. Les collections sont enregistrées dans une base de données native [9]. L'avantage consiste à générer à tout moment un contenu adaptatif par l'intermédiaire de services Web accessibles sur un serveur d'application. Les pages responsives sont publiées dans un système de gestion de contenu pédagogique (LCMS) [11] ou affichées à la demande à l'écran de l'unité mobile. Etant données que ce processus est dynamique et peut être initié par un client Web, la solution s'apprête facilement à être implémentée dans un environnement Cloud [14]. Dans la suite de ce papier, dans un premier temps nous allons présenter les balises propres aux HTML5, CSS3 et les Media Queries par la projection d'un petit projet. Nous allons présenter nos tests et les résultats obtenus sur la compatibilité des navigateurs mobiles avec les standards Web en précisant les versions éligibles. Par la suite, nous allons détailler la technique de Responsive Web Design pour la construction d'un site Web responsive en développant le projet en cours. Une attention particulière sera consacrée à la technique du responsive eLearning design ou comment présenter ce cours de façon responsive. Fig. 2. La structure complète d'une page en HTML5 avec des commentaires sur les balises dans l'en-tête et le corps de document. La partie droite de la Figure présente un rendu schématisé de la page. Cette structure peut servir de modèle pour le développement d'un site Web. Pour la détection des caractéristiques du média de l’utilisateur, pour afficher des SVG en arrièreplan, pour spécifier les couleurs, il faut définir et associer au document une feuille de style CSS3 avec les directives (selecteurs) appropriées. Dans la partie corps du document (<body>) pour la structuration du contenu on trouve entre autres les balises sémantiques: <header> : élément pour créer un en-tête; <footer> : élément pour mettre un pied-de-page; <nav> : élément pour la création de menus et naviga- tion entre pages; <aside> : élément pour définir une zone liée ou non au sujet principal de la page; <section> : élément qui regroupe un même sujet; <article> : élément de contenu. Un document HTML5 débute par un <!doctype html>. Cette déclaration permet de renseigner le navigateur sur le type de document HTML délivré. On peut noter la simplification de la syntaxe par rapport aux versions antérieures. L’élément <html> constitue la racine de tout document HTML. Il clôt l’ensemble en fin de page par une balise fer- mante </html>. L'attribut lang précise la langue utilisée pour le contenu de la page. Une langue bien indiquée sera utile ainsi aux synthèses vocales et évitera le remplacement des caractères d'extension. L’en-tête du document avec la balise <head> fournit des renseignements sur le document lui-même: <title>, <meta>,<link>,<style>,<script>,<base>. L'élément <meta> est placé dans la partie <head> du fichier HTML pour combler le besoin de métainformations au sujet du document sans les afficher dans le corps de la page. L'attribut charset définit l'encodage de la page. Le choix de l'UTF-8 est désormais préconisé par le W3C pour tous les protocoles échangeant du texte sur Internet. L'élément <link> placé dans l'en-tête permet de mettre en relation la page avec d'autres documents externes, une feuille de style (CSS) par exemple. L'élément <script> permet d'ajouter des scripts (JavaScript) qui vont s'exécuter dans le navigateur. Dans l'exemple, cinq propriétés sont appliquées à l'élément <p> (le paragraphe). Le texte dans le(s) paragraphe(s) sera jus- tifié, en italique, de couleur bleue, taille des caractères 12 points, présentés avec la police "Times". III. LES NOTIONS DE LA TECHNIQUE RESPONSIVE WEB DESIGN Pour rendre responsive un site Web quelques points clés sont à prendre en considération comme suggérer dans [17] est schématisés à la Figure 3: une grille d'affichage flexible avec un gabarit qui ne dépend pas d'une résolution fixe; des médias flexibles (images, vidéos) qui ne débordent pas du cadre de la grille d'affichage; un ensemble de règles CSS [2] basé sur Media Queries [3] (requête média) qui définissent les conditions de l'affichage en fonction du média. Les balises HTML5 structurent le contenu du document, en délimitant des blocs sémantiques qui sont amenés à contenir: des paragraphes <p>...</p> et passage à la ligne dans un paragraphe <br />, des titres <h1>...</h1>, ... (<h6>...</h6>), des listes ordonnées <ol><li>...</li></ol> ou non ordonnées <ul><li>...</li></ul>, des tableaux <table><tr><td>...</td></tr> </table>, différents types de médias, formes et animation:<img>, <video>, <audio>, <canvas>, des contrôles de formulaires <form>...</form>, des liens hypertextes <a href="url">...</a>. Les CSS (Cascading Style Sheets) ou feuilles de style contrôlent la mise en page des éléments composant une page Web. Ainsi, on peut définir la couleur et la taille d'une police, le positionnement d'un objet, l'espacement entre les paragraphes, ou gérer des effets de transition et définir des points de rupture, afin de séparer le contenu et la forme. Une feuille de style est applicable à une infinité de documents HTML, ce qui facilite la maintenance et réduit les temps de chargement [20]. L’application d’une ou plusieurs feuilles de style pour une page s’effectue par des balises <link>, présentent dans la section <head> (Figure 2) du fichier HTML. Dans cette même partie, il est aussi possible de situer directement les instructions CSS entre les balises <style> et </style>. Une déclaration CSS contient un sélecteur (nom de la balise) dont le rôle est de cibler les éléments concernés par chaque déclaration, suivi d’un bloc entre accolades regroupant les propriétés à appliquer [20]. p { text-align: justify; font-style: italic; color: blue; font-family: Times; font-size: 1em; } Fig. 3. Différents résolutions, orientations et médias à satisfaire avec RWD (image adaptée à partir de [21]) A. La grille d'affichage flexible Pour mettre en œuvre une grille d'affichage flexible il faut éviter les mesures fixes pour décrire la largeur et la hauteur de la zone d'action pour un élément HTML. Si on exprime les mesures, soit en pourcentage (%), soit en mesure "em" (où 1em = 100%) la flexibilité est assurée à la fois pour la taille des polices et pour la taille des éléments HTML. Les valeurs attribuées de cette façon permettent d'avoir une valeur proportionnelle à la taille des caractères utilisés dans la page en fonction du type média. Pour se mettre dans le contexte, on peut estimer que la taille par défaut d'un texte pour qu'il soit lisible est de 16px (12pt), et on peut admettre que cela correspondent à un 1em. Si un titre fait 24px (18pt), on peut remplacer cette valeur par 1.5em. En fait, pour obtenir la conversion correcte on peut appliquer à chaque fois la formule issue de [16]: cible / contexte = résultat (1) où, "cible" correspond à la taille souhaitée, le "contexte" à la taille "normale" et le "résultat" est exprimé en "em" (emphemeral unit ou encore la largeur de la lettre "M"). L'intérêt de la transformation est que si la résolution du contexte change, le texte reste proportionnel à l'affichage. La formule est appli- cable à tous les éléments HTML possédant les propriétés largeur et hauteur (width et height). On peut élaborer une échelle de base de 12px pour le "tiny", 14px pour le "small" et 16px pour le "big". B. Le média flexible Pour un site Web responsive les images, les vidéos et les autres objets médias ne doivent pas déborder le cadre défini. En effet, il est désagréable de voir une image déborder l'écran ou trop petite, écraser et pratiquement invisible. Pour résoudre ce problème on peut faire appel à la propriété CSS "max-width" qui permet de spécifier la largeur maximum de l'élément, par rapport à son parent. img, object, canvas, video, audio { max-width: 100%; height: auto; } Avec la propriété "height:auto" on peut conserver les proportions des médias. L'opération provoque la mise à l'échelle de l'image, c'est-à-dire redimensionnement en fonction de la taille de l'écran. Pour des images raster (gif, jpg, png) cela peut entraîner une perte de qualité. Il est donc recommandé d'utiliser des images plus grandes et de bonne qualité dont la mise à l'échelle de manière dynamique en fonction de la taille du média affectera moins la qualité de la présentation. À certains moments, lorsque les images sont redimensionnées à une taille très petite, les détails deviennent invisibles, et la signification globale de l'image se perd. Dans de tels cas l'image peut être préalablement recadrée autour d'une zone qui détient le sens et la mise à l'échelle se fait sur cette zone. C. Les Média Queries Pour rendre un site responsive il est important d'adapter l'affichage en fonction de la résolution et du type de média (screen, print, tv…), mais aussi en fonction des caractéristiques du support en prenant en compte le ratio et l'orientation. Le plus simple est d'appliquer différents styles (CSS) suivant le profil d'utilisation. Le profil peut être détecté avec la fonctionnalité Media Queries offerte par CSS3. Il s'agit de déterminer les paramètres suivants: (1) l'orientation (mode portrait ou paysage) et (2) les limites de la largeur effective avec les propriétés min-width, max-width. Pour cela il faut prévoir des profils. On peut introduire ainsi des points de rupture qui s'identifient avec la taille à laquelle les règles changent, et les éléments de la mise en page sont dynamiquement redimensionnées et réajustées en fonction de l'écran du média. Lors de nos tests sur les navigateurs mobiles (Table 1) avec des médias différents nous avons constaté que l'adoption de deux points de rupture a plutôt bien fonctionnée. Nous pouvons définir ainsi trois configurations standards: (1) pour un ordinateur de bureau, (2) pour une tablette et (3) pour un smartphone. Dans le test nous avons privilégié le format portrait, ce qui nous permet de couvrir une large gamme d'écrans. De manière générale, on peut considérer qu'en mode portrait une largeur d'écran de moins de 480px appartient à un smartphone, entre 480px et 1024px à une tablette et une largeur d'écran supérieure à 1024px à un ordinateur de bureau ou à un portable. On peut développer et enregistrer le code CSS pour chacun des profils et les appliquer en fonction: <style type="text/css"> @media only screen and (max-width:480px){ /* propriétés pour une largeur de la fenêtre (viewport) jusqu'à 480px */ } @media only screen and (max-width:1024px) and (min-width:480px) { /* propriétés pour une largeur de la fenêtre (viewport) de 480px à 1024px */ } @media only screen and (min-width:1024px) { /* propriétés pour une largeur de la fenêtre (viewport) à partir de 1024px */ } </style> TABLE I. TEST EFFECTUE AVEC LES DERNIERES VERSIONS DISPONIBLES DES NAVIGATEURS MOBILES EN MARS 2014. XML MathML SVG Javascript IE mobile Android Firefox Chrome Opera Safari Opera Mini Dolfin √ √ √ √ √ √ √ √ X X √ X X √ X X √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ HTML5 CSS3 √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ Media Queries √ √ √ √ √ √ √ √ D. Les Viewport et Pixel-Ratio Certains mobiles avec des écrans de 5 pouces (12cm) "FullHD" sont capables d'afficher avec une définition de 1920×1080 pixels. Un ordinateur avec la même définition affichera l'équivalent dans un écran de 17 pouces (43cm). Le nombre de pixels par unité de surface est donc plus élevé sur un smartphone ou une tablette. À l’usage, cette différence se traduit par un affichage équivalent sur l'ordinateur et sur le smartphone mais en beaucoup plus petit. Le zoom peut améliorer la lisibilité mais fait aussi déborder la page de l'écran. Cela provoque des défilements horizontaux et verticaux qui sont mal perçu par l'utilisateur comme n'étant pas très ergonomique. Si en revanche on arrive à modifier le mode d'affichage du navigateur mobile en précisant le nombre de pixels à utiliser, c'est-à-dire en modifiant son pixel-ratio, alors la page sera zoomée de façon optimale et la lecture sera lisible. Le viewport représente la surface visible utilisée pour afficher une page Web. Sur un ordinateur cela correspond à la fenêtre de navigateur. Sur un média mobile en revanche la taille de l'écran en pixel annoncée ne correspond pas à la taille utilisée par son navigateur. Grace aux attributs device-width et device-height des Media Queries on peut obtenir un affichage homogène en gérant le viewport en fonction de média par la balise <meta>: <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> L'attribut "width=device-width" indique au navigateur d'adapter la page à la largeur de l'écran en pixels indépendants et permet d'ajuster le contenu pour différentes tailles d'écrans. L'attribut "initial-scale=1.0" indique au navigateur d'établir une relation de 1:1 entre les pixels CSS et les pixels indépendants, quelle que soit l'orientation de l'appareil. La page peut ainsi s'afficher sur toute la largeur du mode paysage [22]. Enfin, il est possible de spécifier explicitement la valeur du pixel-ratio dans le HTML ou le CSS, ou de laisser au système d'exploitation la tâche de calculer automatiquement le bon pixelratio pour le transmettre au navigateur. Cette dernière option est recommandée et correspond à la valeur 1.0 de l'attribut. L'attribut "user-scalable=yes" autorise l’utilisateur à zoomer la page. Au contraire, l'affectation d'une valeur "no" à cet attribut empêcherait tout zoom et dégraderait l’ergonomie et l’accessibilité de la page. L’importance du pixel-ratio est telle que l’ajout de l'attribut "initial-scale=1.0" par une balise <meta> dans la partie <head> de la page HTML suffit en général à rendre un site beaucoup plus lisible sur les petits écrans [23]. A l'adresse: http://ivmad.free.fr/pi/tp/neticiens.html le miniprojet de la Figure 4 est accessible avec les fichiers sources. pas besoin de créer une version de salle informatique, puis plusieurs versions pour s'adapter aux différents systèmes d'exploitation et médias mobiles (on introduit ainsi le Responsive Multi-Device Design). Avec une seule version l'effet positif immédiat est la facilité de l'entretien et la mise à jour du cours. Le format unique du e-Learning adapté facilite le partage et la réutilisation des objets pédagogiques (LO) [18] tant souhaité par les concepteurs, enseignants et formateurs. Nous pensons que l'e-Learning adaptatif est une approche innovante pour la conception et la présentation (navigation) de cours en combinant une large gamme de composants interactifs. Les nouveaux médias mobiles sont très bien adaptés au style livre électronique, c'est-à-dire qu'une page (chapitre) de cours est conçue en accord avec la logique pédagogique puisque le défilement ne pose aucun problème d'ergonomie. Ainsi, on peut mieux adapter le contenu au dispositif et éviter le style largement répandu de saut de page avant-arrière qui cherche à placer le texte dans un seul écran. Le ReD est non seulement une possibilité de présenter un cours entier sur une grande variété de périphériques, mais aussi d'avoir le contrôle total sur le contenu sur chacune des différentes plates-formes. Ce contrôle peut être accompagné d'une sémantique appropriée (voir Figure 3) pour une structuration du contenu proche de la pédagogie inspirée par le PPN. Par conséquent, nous sommes en mesure de proposer la structure pour une page de cours constituée de "chapitre", "section" et blocs détenant "paragraphe", "figure", "code", "question", un widget interactif ("mediaobject: équation, image vectorielle, chart"), voir un ensemble de "composants". Fig. 4. L'affichage de la page à gauche issue du mini-projet correspond à une résolution supérieure à 1024px, tandis que l'affichage de la même page à droite à une résolution inférieure à 480px. La lisibilité dans les deux affichages est assurée par la différence dans les feuille de style appliquées et la présence du <meta> tag dans la partie <head> du fichier HTML. IV. RESPONSIVE E-LEARNING Le Responsive e-Learning Design (ReD) est une approche qui s'inspire des principes du RWD pour la conception de cours pédagogiques sur Internet. L'e-Learning adapté a pour objectif de proposer une version unique du cours sous la forme de site ou application Web. Une compilation unique du cours fonctionnera sur toutes les plateformes et navigateurs Web, donc Fig. 5. La sémantique d'un cours développée dans [19] Cela permet de présenter le contenu d'une manière tout à fait structurée, fournissant un ordre implicite de navigation autour d'une page avec défilement en profondeur des blocs empilés de gauche à droite et du haut vers le bas en respectant les points de rupture en fonction des propriétés du média. La Figure 4 présente une possible réalisation basée HTML5 et CSS3 qui se marie parfaitement avec la structure proposée à la Figure 2 en utilisant les nouveaux éléments: <header>, <nav>, <section>, <article>, <aside>, <footer> et la technique du RWD. REFERENCES [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] Fig. 6. Présentation Web du cours [13] V. CONCLUSION Selon des sources d'information, en 2014 12% du trafic Internet mondial se fait via les smartphones ou les tablettes. Il devient ainsi incontournable d’adapter les sites aux mobiles. Le RWD apporte une solution adaptée aux nouvelles méthodes de développement Web. Cette approche ne peut être réalisée sans les applications d'édition de code HTML5 et CSS3. La méthode classique qui est pédagogiquement justifiée consiste à utiliser un éditeur de texte avec coloration syntaxique du code. Les tests s'effectuent par le navigateur Web. L'option débogage est disponible sur les récentes versions de la plupart des navigateurs. Néanmoins, il existe des éditeurs HTML5, CSS3 et JavaScript capable de satisfaire des besoins plus importants. Une liste non exhaustive d'applications gratuites et open source peut être proposée: LiveWeave [24] est une application en ligne gratuite d'édition de code HTML5, CSS3 et JavaScript. L'interface web dispose de panneaux redimensionnables. Il suffit de saisir le code HTML5 et CSS3 et la page se construit en temps réel sur le panneau de droite avec une complétion automatique du code. BlueGriffon [25] est un éditeur HTML5 libre qui utilise le moteur Gecko de Firefox. Il intègre un éditeur CSS3 compatible. Le JavaScript est assuré avec l'intégration de la bibliothèque jQuery. L'EDI open source NetBeans [26] connu pour son orientation développement d'applications Web et mobiles basées Java avec la version 8 renforce le support de HTML5, CSS3 et JavaScript. [14] [15] [16] [17] [18] [19] [20] [21] [22] [23] [24] [25] [26] RWD, http://fr.wikipedia.org/wiki/Site_web_adaptatif. Introduction to CSS3, W3C Working Draft, 23 May 2001, http://www.w3.org/TR/2001/WD-css3-roadmap-20010523/. Media Queries, W3C Recommendation 19 June 2012, http://www.w3.org/TR/css3-mediaqueries/. Ben Frain, Responsive Web Designe avec HTML5 et CSS3, Pearson 2013 ISBN: 9-782-7440-2567-9. Ethan Marcotte, Responsive Web Design, A Book Apart, New York, 2011, ISBN 978-0-9844425-7-7. Moodle, http://moodle.com/. Dokeos, http://www.dokeos.com/. e-Learning, http://www.elearning-actu.org/e-learning_definition/. Xesop, http://ivmad.free.fr/xesop/. Ivan Madjarov, Adaptation de contenu pédagogique pour téléphone mobile, Actes du 2-ème colloque: Les Cahiers pédagogiques des R&T, pp.67-75, Kourou, Guyanne Française, Novembre 2010. Ivan Madjarov and Omar Boucelma, XESOP: a Content-Adaptive mLearning Environment, Seventh European Conference on Technology Enhanced Learning, 21st Century Learning for 21st Century Skills, A. Ravenscroft et al. (Eds.): EC-TEL 2012, LNCS 7563, pp. 531–536, Springer-Verlag Berlin Heidelberg 2012. Benjamin LaGrone, HTML5 and CSS3 Responsive Web Design Cookbook, pp. 213, Packt publishing, Birmingham-Mumbai, 2013, www.it-ebooks.info. PPN RT 2013, Diplôme Universitaire de Technologie, Reseaux et Telecommunications, Programme Pédagogique National, p. 85, Ministère de l’enseignement supérieur et de la recherche, 2013. Ivan Madjarov, Cloud-based Framework for Mobile Learning Content Adaptation, In the Proceedings of the EDUCON 2014 IEEE Global Engineering Education Conference, 3-5 April 2014, Istanbul, Turkey, 2014. http://www.android-mt.com/sites-mobiles PXtoEM.com PX to EM conversion, http://pxtoem.com/. Julien Roche, Les fondamentaux du Responsive Web Design, 2013, http://objetdirect.developpez.com/tutoriels/css/responsive-design/. IEEE LOM, Draft Standard for Learning Object Metadata, IEEE 1484.12.1-2002. Ivan Madjarov, Cloud-based Mash-up Authoring Tools for e-Learning, In the Proceedings of CSEDU 2014, 6th International Conference on Computer Supported Education, Volume 1, pp. 526-531, 1-3 April, Barcelona, Spain, 2014. Rodolphe Rimelé, HTML 5 - Une référence pour le développeur Web, 752 pages, Eyrolles, 2013. Brad Frost Web, Responsive Web Design: Missing the Point, http://bradfrostweb.com/blog/web/responsive-web-design-missing-thepoint/. Brad Frost, Creating a Mobile-First Responsive Web Design, http://www.html5rocks.com/en/mobile/responsivedesign/. Le hollandais volant, http://lehollandaisvolant.net/tuto/responsive-css/ Liveweave, http://liveweave.com/. BlueGriffon, http://bluegriffon.org. NetBeans, https://netbeans.org/.
