Web 2.0. O.Curé [1 ]

Transcription

1 Web 2.0 O.Curé [1 ]

2 Contact Olivier Curé Copernic 4B060 O.Curé [2 ]

3 Objectifs du cours Développement de sites pour le Web 2.0 HTML, CSS, DOM, javascript et jquery Mashup Introduction aux technologies du Semantic Web (Web 3.0) RDF, RDFS et OWL O.Curé [3 ]

4 Organisation du cours 5 cours de 2 heures (Olivier Curé) Mercredi matin 8h30-10h30 le 3/3 Et 10h45-12h45 les 10,17,24,31/3 et 7/4 5 TD de 2 heures (Valentin Bourgoin) Mercredi 10h45-12h45 le 3/3 Puis 8h30-10h30 les 4 suivants O.Curé [4 ]

5 Evaluation Participation lors des TD (20%) DST final le 18/12/2009 (80%) O.Curé [5 ]

6 Le Web Quelques informations sur le Web et son évolution O.Curé [6 ]

7 Ordre de grandeur Ordre de grandeur : 1Mo : 1 gros roman 200à 500Mo : ce que mémorise un être humain dans sa vie. 900Mo : information contenue dans le génome d'une cellule humaine. 1To : estimation de la taille d'un HD en Toutes les conversations d'un être humain dans sa vie au format MP3. 20To : bibliothèque du congrès à Washington (que le texte), 20 millions d'ouvrages. 200To : archives du net en milliards de pages. 3Po : Bibliothèque du congrès scannerisée (textes + images). 100Eo : total du flux d'information dans le cerveau humain durant sa vie (Von Neumann). Eo (Exa), Zo (Zetta) et Yo (Yotta). O.Curé [7 ]

8 Internet / Web En 2007: 500 million d'adresses IP 1.17 milliard d'utilisateurs 18% de la population 109 million de sites Web 29.7 milliard de pages web 7.2 milliard de recherches/mois (3.9 pour Google) O.Curé [8 ]

9 Des chiffres En 2006: 161 Eo (108 To) d'information ont été créés ou répliqués dans le monde C'est plus que durant les 5000 dernières années International Data Corporation (IDC) estime une croissance 6X d'ici 2010 (soit 988Eo/an) Le volume de l'information technique double tous les 2 ans. Elle doublera toutes les 72 heures en O.Curé [9 ]

10 Encore des chiffres 2009: +de 250million d'utilisateurs sur Facebook: équivalent du 4ème plus gros pays au monde (entre les USA et l'indonésie) Myspace, environ 185million d'utilisateurs En moyenne, une page MySpace est visitée 30 fois par jour pour accéder à Des images (plus de 1 milliard) De la musique (plus de 25 million) Des vidéos (60To) O.Curé [10 ]

11 Encore.. Facebook: 1.8 milliard de photos 31 million d'utilisateurs 10 5 nouveaux utilisateurs par jour 1800 applications YouTube 1.7 milliard de vidéos téléchargés/mois 1 million de streams/jour 20 heures de vidéo d'upload par minute Flickr (juin 2009) O.Curé [11 ]

12 Pour finir ebay dispose de 2 entrepôts de données (data warehouse): Un de plus de 2Po SGBD parallèle (Teradata) Un autre de plus de 6.5Po 50To de nouvelles données par jour SGBD parallèle (Greenplum) 96 noeuds Compression de données à 70% O.Curé [12 ]

13 Quelques chiffres «Mobile devices in America are generating something like 600 billion geo-spatially tagged transactions per day. Every call, text message, and data transfer handled by your mobile device creates a transaction with your space-time coordinate (to roughly 60 meters accuracy if there are three cell towers in range), whether you have GPS or not. Got a Blackberry? Every few minutes, it sends a heartbeat, creating a transaction whether you are using the phone or not. If the device is GPS-enabled and you re using a location-based service your location is accurate to somewhere between 10 and 30 meters. Using Wi-Fi? It is accurate below 10 meters.». Jeff Jonas ( O.Curé [13 ]

14 Quelques questions Dans quoi stocke-t-on toutes ces informations? Comment pose-t-on des questions? Comment développer un site web de ce type? O.Curé [14 ]

15 Dans quoi stocke-t-on toutes ces informations? Dans des bases de données Une base de données (database) est un ensemble structuré et cohérent de données enregistrées avec le minimum de redondance pour satisfaire simultanément plusieurs utilisateurs de manière sélective et dans un temps opportun. O.Curé [15 ]

16 Système de gestion de base de données (SGBD) Un ensemble de logiciels permettant la création et la maintenance de bases de données. Un SGBD (database Management System -DBMS) doit permettre : la description, l'organisation et la gestion des données sur les mémoires secondaires. la recherche, la sélection et la modification des données. la manipulation des représentations abstraites des données, indépendamment de leur organisation et de leur implantation sur les supports physiques. O.Curé [16 ]

17 Caractéristiques des SGBD Structure (types et comportements des données). Persistence des données (mémoire secondaire). Accès aux données (langage déclaratif pour les requêtes, langage procédural de programmation). Performance (accès et stockage des données). Partage ( accès concurrentiel et transactions) Volume important de données Sécurité et reprise sur pannes O.Curé [17 ]

18 Modèle de données Une BD exploite un modèle de données. Il existe de plusieurs types. Un modèle de données est un ensemble de concepts permettant de décrire la structure d'une base de données : types de données, relations, des contraintes, des opérations (langage de définition et de manipulation des données) et la sémantique. O.Curé [18 ]

19 Quelques modèles de Evolution dans le temps : système de fichiers (50s) données modèle hiérarchique( 60s) :IMS modèle réseau (70s): Codasyl, IDMS modèle relationnel (80s): Oracle, Sybase,DB2,.. modèle orienté objet (90s): Versant, Gemstone, O2 modèle objet-relationnel (90s) : Oracle, DB2, SQLServer, PostgreSQL modèle semi-structuré (hétérogénéité, XML). Le modèle relationnel est le plus populaire aujourd'hui mais de nombreuses variantes émergent actuellement (principalement du domaine du Web: mouvement NoSQL. O.Curé [19 ]

20 Comment pose-t-on des questions? A l'aide d'un langage de requêtes. Ils diffèrent suivant le modèle de données Un langage de requêtes doit prendre en compte 2 aspects: L'expressivité (la complexité des questions que l'on peut poser) La difficulté du calcul de la réponse par l'ordinateur En simplifiant, plus le langage est expressif O.Curé [20 ]

21 Comment développer un site web de ce type? Emergence du web : générations de sites Web : statique, dynamique et «intelligente». 1ère génération : statique 100% HTML Les autres générations exploitent l'architecture client-serveur. HTTP + CGI HTTP + template + scripting O.Curé [21 ]

22 Architectures du web Web / Data Processing Technologies Server-side processing Client-side processing Compiled programs Server-Side scripts Client-side scripts Compiled programs on client workstation CGI Programs Java Servlets ASP.NET Hybrid Technologies Java Server Pages ASP.NET PERL Active Server Pages Cold Fusion Java applets JavaScript VBScript INTEGRATING WEB SITES AND DATABASES, By Mike MORRISON, Joline MORRISON, and Anthony KEYS. Communications of the ACM September 2002 / vol 45, N 9 O.Curé [22 ]

23 HTTP + CGI CGI = Common Gateway Interface Repose sur l'exécution de programmes sur le serveur en lui passant des arguments à travers l'url. Limites : Montée en charge importante est difficile Peu robuste. Code source peu maintenable et lourd. Exemples : Perl, Tcl, shells, etc.. O.Curé [23 ]

24 HTTP + modèle + langage script serveur Un modèle (template) est une page HTML contenant du code, écrit dans un langage script, exécuté du côté serveur. Propose une séparation entre le code applicatif et la page HTML. Le serveur est chargé de la génération du code HTML. Limites : Caractère propriétaire des balises. O.Curé [24 ]

25 Serveur de présentation Proche de la solution précédente mais avec une couche d'architecture plus globale et inclusion de composants. Deux grandes solutions sont disponibles : ASP.net (Active Server Pages) ASP était la 1ère solution sur le marché. Possibilité de développer dans de nombreux langages (VB, C#, etc..). J2EE : Servlets, JSP (Java Server Pages) et java beans. O.Curé [25 ]

26 Serveur d'applications Objectif : fournir une mise en oeuvre logique applicative sous la forme de composants. Ces derniers doivent être persistants et particulier à des transactions, de manière distribuée. Ce middleware offre des fonctions techniques comme : l'équilibrage de charge, la tolérance aux pannes, la gestion de cache, service de nommage et de localisation => fonctions vitales dans le cadre d'applications Internet O.Curé [26 ]

27 J2EE Architecture Java reposant sur l'orienté objet (héritage, encapsulation et polymorphisme). Servlets, JSP, JavaBeans, JSTL (JavaServer Tag Libraries) => profite du modèle MVC (Modèle Vue Contrôleur). Gestion des transactions (JTA). Gestion des BD (JDBC). Gestion des messages (JMS, JavaMail). Gestion des objets distribués (RMI-IIOP). Gestion de renommage des services (JNDI). Solutions : BEA logic, Websphere, Enhydra, Jboss, Geronimo. O.Curé [27 ]

28 Le Web Le Web révolutionne l'accès à l'information. Des millions de sites, des milliards de pages et des technologies diverses : statique/dynamique, internet/ intranet/extranet. HTML est un support pour l'information distribuée à destination des êtres humains mais n'est pas adapté pour les applications, pourtant ce besoin devient incontournable. O.Curé [28 ]

29 Constat du Web HTML (HyperText Markup Language) est un langage permettant de présenter l'information à l'écran (navigateur). Pas d'échange de données Pas de traitement de données en dehors de l'affichage HTML est le support du Web actuel, un Web syntaxique. Problèmes engendrés : Moteur de recherche e-commerce Publication de services O.Curé [29 ]

30 Web 2.0 Le Web 2.0 a été initiée par l'apparition de l'ajax et d'autres solutions RIA (Rich Internet Application). Enrichir l'expérience de l'utilisateur: Obtenir le même type de comportement qu'avec une application standard (desktop) Une application Web non Web2: Impose une approche «clic, attendre et rafraîchir» pour les interactions avec l'utilisateur O.Curé [30 ]

31 Contraintes des appli Web Interruption des opérations de l'utilisateur L'utilisateur ne peut réaliser des opérations lorsqu'il attend une réponse Perte du contexte pendant le rafraichissement Perte d'info sur l'écran Perte de la position (scrolling) Pas d'instantanéité du retour des actions de l'utilisateur Attente pour obtenir la prochaine page Contrainte d'html Limite des éléments graphiques Motivation des techno Rich Internet Application (RIA) O.Curé [31 ]

32 Technologies RIA Applet (Java) Macromedia Flash/AIR Java Web start DHTML Ajax Silverlight (plateforme Microsoft) JavaFX (plateforme Java) O.Curé [32 ]

33 Applet Positifs: Utilisation des API java Utilisation de data streaming, manipulation graphique, threading and GUI avancée Négatifs: Temps de chargement du code Une application mal conçue peut faire planter le navigateur O.Curé [33 ]

34 Macromedia Flash Programmation avec ActionScript Exemple d'implémentation: Flex, Lazlo (open source) Positifs: Affichage de de graphique vectoriel Négatifs: Navigateur a besoin d'un plug-in ActionScript est propriétaire O.Curé [34 ]

35 Java Web Start Une application desktop exécutéesur le net Positifs: Expérience type desktop Levier sur les techno Java Opérations déconnectées possibles Signature digitale des appli Déploiement incrémentale Négatifs: Les vieux systèmes JRE ne fonctionnent pas. Le premier temps de chargement peut être long O.Curé [35 ]

36 DHTML Dynamic HTML DHTML = Javascript + DOM + CSS Utilisé pour la création d'application interactives Communication non asynchrone Rafraichissement complet de la page est nécessaire Raison de son succès relatif O.Curé [36 ]

37 AJAX DHTML avec communicationasynchrone au travers de XMLHttpRequest Positifs: Une bonne alternative RIA Plusieurs boites à outils existent Pas de plug-in nécessaire Négatifs Toujours des incompatibilités entre navigateurs Difficulté à maintenir et debugger le code javascript O.Curé [37 ]

38 Quelques exemples d'applications basées AJAX Google Maps Les données de la carte sont demandées et téléchargées de manière asynchrone en tâche de fond Les autres parties de la page ne sont pas modifiées donc pas de perte du contexte opérationnel Google Suggest (fin 2004): permettre la saisie des premières lettres du mot recherché, d'afficher les recherches les plus courantes. O.Curé [38 ]

39 Autres utilisations d'ajax Auto complétion Adresse , nom, ville peuvent être auto complètés lors de la saisie de l'utilisateur Validation des données d'un formulaire en temps réel Identifiant, codes postaux, etc. Simplification de la logique de validation (côté serveur et client) Rafraîchissement des données O.Curé [39 ]

40 1.DOM Document Object Model O.Curé [40 ]

41 Introduction DOM W3C Document Object Model ou Modèle d'objets représentant un Document Objectif: permettre aux scripts et aux programmes d'accéder dynamiquement au contenu, à la structure et à la présentation des documents HTML ou XML et de les mettre à jour. C'est un interface de programmation O.Curé [41 ]

42 Introduction DOM (suite) Hétérogénéité: La recommandation propose une interface utilisable dans la plupart des environnements et des applications, indépendamment du langage de programmation et de la plate-forme supportant l'application. O.Curé [42 ]

43 Normalisation 3 niveaux: Niveau 1 (1998): spécification des objets permettant de définir le contenu et la structure d'un document. 2 parties: DOM Core pour les interfaces de base du DOM et leurs applications aux documents XML DOM HTML spécifie les interfaces applicables aux documents HTML Niveau 2 (2000) complète le niveau 1 en spécifiant le modèle d'objets pour les feuilles de styles CSS, un modèle de gestion des événements et support des namespaces. Niveau 3 (2004) ajoute le support de Xpath, une interface de sérialization pour XML. O.Curé [43 ]

44 Exemple document XML <catalog> <book id="101"> <title>xml in a Nutshell</title> <author>elliotte Rusty Harold, W. Scott Means</author> <price>39.95</price> </book> <book id="121"> <title>who Moved My Cheese</title> <author>spencer, M.D. Johnson, Kenneth H. Blanchard</author> <price>19.95</price> </book> </catalog> O.Curé [44 ]

45 DOM et Ajax Avec Ajax, particulièrement son exploitation sur une page Web, exploite largement le DOM. On distingue 2 étapes: trouver l'élément avec lequel on veut travailler Modifier le contenu de l'élément ou le réorganiser O.Curé [45 ]

46 Trouver un élément document.getelementbyid() Retourne un élément DOM Paramètre: une chaîne de caractères Trouve un élément d'une page. L'id doit être unique. document.getelementsbytagname() element.getelementsbytagname() Argument: une chaîne Retourne une collection d'éléments O.Curé [46 ]

47 Trouver un élément (suite) element.childnodes Pas d'argument, retourne une collection d'éléments DOM Trouve l'enfant immédiat d'un élément element.parentnode Pas d'argument, retourne un élément DOM Trouve le parent direct element.nextsibling / previoussibling Pas d'argument, retourne un élément DOM O.Curé [47 ]

48 Trouver un élément (fin) Avec jquery en utilisant un sélecteur $() Argument: une chaîne de caractères Retourne un objet jquery couvrant un tableau d'éléments Exemple: $(''div'') : sélectionne tous les noeuds correspondant à une type d'élément $(''#maliste''): sélection par un ID unique $(''ul#'maliste li.new''): sélecteur complexe CSS O.Curé [48 ]

49 Modifier le DOM document.createelement() Arg: nom d'un élément, retourne un élément document.createtextnode() element.innerhtml element.appendchild() element.removechild() element.insertbefore() O.Curé [49 ]

50 Modifier DOM avec jquery (suite) $.html() $.append(), $.prependto(), $.insertbefore(), $.insertafter() Insère du contenu dans un noeud $.remove(): supprime tous les éléments d'une page $.empty(): vide tous les éléments d'un ensemble O.Curé [50 ]

51 2. CSS (Cascade StyleSheet) O.Curé [51 ]

52 CSS : Cascade Style Sheets CSS = règles + feuilles de style. Règle = état d'un aspect stylistique d'un ou plusieurs éléments. Feuille de style = ensemble de règles qui s'applique à un document HTML. Exemple : une feuille de style comportant une unique règle : H1 { color : blue} O.Curé [52 ]

53 Introduction Objectif : offrir aux concepteurs de sites Web, un outil puissant de présentation des documents HTML (et XML). CSS : cascade style sheets, est une mécanisme simple permettant d'ajouter du style aux documents HTML. Normes : juillet 1997 : CSS 1 janvier 1998 : CSS 2 CSS 3 (en cours de validation). O.Curé [53 ]

54 Versions CSS 1 Recommendation du W3C Uniquement pour HTML Incomplet CSS 2 Pour XML et HTML Recommendation W3C actuelle CSS 3 Toujours pas disponible Syntaxe non XML O.Curé [54 ]

55 Règle des CSS Une règle est constituée de 2 parties : - Un sélecteur (lien entre le document HTML et le style). - Une déclaration (une partie de la règle spécifiant une partie de la présentation). Syntaxe : H1 {color : blue } sélecteur déclaration Presque tous les éléments peuvent être utilisés comme une sélecteur (il n'y a par d'intérêt à utiliser un élément invisible, ex : br). Une déclaration se décompose en propriétés et valeurs (color est la propriété et blue est la valeur). O.Curé [55 ]

56 Groupement de règles Lorsque plusieurs sélecteurs possèdent une même définition, il est préférable de les regrouper. Ex : H1, H2, H3 { font-weight : bold } Lorsqu'une règle possède plus d'une propriété, on sépare les propriétés par des ";". Ex : H4 { color : red ; font-weight : bold } O.Curé [56 ]

57 Lien avec les documents HTML Il existe quatre méthodes pour attacher une feuille de style à un document HTML. Appliquer à l'ensemble du document HTML à l'aide de la balise <style> dans l'en-tête. Appliquer à une balise à l'aide de la balise <style> Lier le document à une feuille de style externe à l'aide de la balise <link> Lier le document à une feuille de style externe à l'aide de O.Curé [57 ]

58 Style de document Imbriquer la feuille de style entre commentaires pour les navigateurs non compatibles CSS. Inconvénient : Maintenance sur site volumineux. <html><head> <title>essai css</title> <style type="text/css"> <!-- h1 {color : blue} --> </style> </head> <body> <h1>premier essai avec CSS</h1> </body> </html> O.Curé [58 ]

59 Styles en lignes Méthode la plus simple d'associer un style à une balise. Principe : inclure un attribut style à la balise en plus de la liste habituelle des propriétés et des valeurs respectives. Inconvénients : code lourd et maintenance. <html> <head> <title>page styles en ligne</title> </head> <body> <h1 style="color : blue; font-style :italic"> Chapitre 1</h1> </body> </html> O.Curé [59 ]

60 Feuilles de style externes liées La balise <link> doit apparaître dans l'entête. L'URL de la feuille de style peut être absolu ou relatif à l'url de base du document. Avantage : Maintenance sur des sites volumineux. <html><head> <title>page avec link</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>chapitre 1</h1> </body> </html> O.Curé [60 ]

61 Feuilles de style doit apparaître dans la balise <style> dans l'en-tête. L'URL de la feuille de style peut être absolu ou relatif à l'url de base du document. Peut aussi apparaître dans une feuille de style externe. <html><head> <title>page url( style.css ); --> </style></head> <body> <h1>chapitre 1</h1> </body> </html> O.Curé [61 ]

62 Feuilles de style externe Dans un document texte avec extension ".css". Réutilisation dans plusieurs documents HTML pour la gestion d'une charte graphique sur un site contenant beaucoup de pages (maintenance). BODY { background-color : Yellow; color : Black } H1 { font-weight : bold; color : red} O.Curé [62 ]

63 Hiérachie des styles Ordre de priorité : style en ligne > style de document > link Différence et link : Équivalence lorsqu'une seule balise <link> Lorsqu'il y a plusieurs feuilles est préférable, car il y a fusion des styles. La feuille du dernier import est prioritaire. O.Curé [63 ]

64 Classes de style Les classes de style permettent de définir plusieurs styles différents pour une ou plusieurs balises. On peut définir des classes régulières (attachées à une balise) ou bien génériques (pour l'ensemble des balises). Définition d'une classe dans une feuille de document ou externe : Classe régulière d'un paragraphe : P.nomclasse {propriétés : valeurs ; etc.. } Classe générique :.nomclasse {propriétés : valeurs ; etc.. } Exploitation : Pour une classe régulière : <P class="nomclasse">abc</p>. Pour une classe générique on peut utiliser les balises <div> et <span>. O.Curé [64 ]

65 Pseudo-classes Les pseudo-classes permettent de définir l'affichage de styles pour certains états de balises. Les noms sont prédéfinis. Elles sont rattachées au nom de la balise par ":" et non ".". Principales pseudo-classes : A:link, A:active, A:visited, P:first-letter, P:first-line. Attention à la compatibilité des navigateurs avec les pseudo-classes introduites dans CSS2 (A:hover, A:focus, :first-child, :lang). O.Curé [65 ]

66 Identificateur L'attribut id assigne à l élément correspondant un identificateur unique au sein du document. On peut définir des identificateurs réguliers (attachés à une balise) ou bien génériques (pour l'ensemble des balises). Définition d'un identificateur dans une feuille de document ou externe : #jaune {color : jaune} ou H1#bleu {color : blue} Exploitation : <span id="jaune">jaune</span> ou <H1 id="jaune">titre bleu</h1> O.Curé [66 ]

67 DIV et SPAN Balises introduites dans HTML 4. DIV : Crée une division au sein d'un document. Fonctionnement sur un bloc. SPAN : Permet de déléguer le formatage du texte entre les balises à une feuille de style. Fonctionnement sur la ligne. Attribut «id» pour identifier une zone Exemple: <div id=''menu''>...</div> O.Curé [67 ]

68 Héritage <HTML> <HEAD><TITLE>CSS1</TITLE> </HEAD> <BODY> <H1>Titre 1</H1> <P><STRONG>CSS1</STRONG> intro:</p> <UL> <LI>h ritage <LI>exemple <LI>selecteurs </UL> </BODY></HTML> Arbre du document HTML de droite HTML / \ HEAD BODY / / \ TITLE H1 P UL / \ STRONG LI LI LI L'organisation interne d'un document HTML est supportée par le DOM (Document Object Model) sous forme d'arborescence. Les balises qui se trouvent dans une section délimitée par d'autres balises héritent des propriétés et valeurs de la balise mère. O.Curé [68 ]

69 } Propriétés sur les caractères element { font-family: Helvetica, Arial; font-size: x-large; font-style: italic; font-variant: small-caps; font-weight: 900; font-stretch: semi-expanded O.Curé [69 ]

70 Propriétés sur le texte element { text-indent: 0.5in; text-align: center; text-decoration: underline; text-transform: capitalize; white-space: normal } O.Curé [70 ]

71 Propriétés sur les couleurs element { color: #00FF00; background-color: rgb(43, 43,43); border-color: black } O.Curé [71 ]

72 Unités Les valeurs de certaines propriétés peuvent être exprimées dans plusieurs unités. Couleur : nom d'une couleur de la palette web, #rgb, #rrggbb, rgb (0-255,0-255,0-255), rgb (0-100%,0-100%,0-100%). Taille : on distingue deux types : relative et absolue. Relative : em, ex, px et %. Absolue : in, cm, mm, pt, pc. O.Curé [72 ]

73 Les listes 2 types de liste en html: non ordonnée (ul) et ordonnée (ol) CSS permet d'ajouter du style aux listes Pour ul: ul.a {list-style-type : x; } Avec x= {circle, none, disc (défaut), square} Pour ol: ol.b{list-style-type: y;} Y= {decimal, lower-alpha, lower-greek, lower-roman..} O.Curé [73 ]

74 Les listes (suite) On peut mettre une image: ul {liststyle-image: url(''abc.png'');} O.Curé [74 ]

75 CSS float Un élément peut être déplacer vers la gauche ou la droite et avoir d'autres éléments l'encadrant. Utile pour les images. Exemple : im {float: left;} Pour annuler float, on utilise clear Ex:.text {clear:both;}, both indique que l'on annule à droite et à gauche. Valeurs possibles: {left, right, both, none, inherit} O.Curé [75 ]

76 Un point sur les propriétés Les grandes classes des propriétés de CSS 1 : police de caractères, disposition du texte, couleurs, fonds de document et boîtes. Le CSS2 étend le jeu de propriétés au positionnement des images, effets visuels, media, etc.. L'exploitation de ces propriétés se posent au niveau de la compatibilité des navigateurs. Normes CSS et propriétés sur le site du w3c ( Articles sur webreview ( HTMLHelp, le site css.nu (http;//css.nu). Outils : TopStyle, Style Master, CSS Validator : O.Curé [76 ]