Archive de octobre 2008
Tutoriel sur la manipulation des dates en JavaScript
par Loïc le Mardi 28/10/2008 à 22:09, dans JavaScript, Tutoriel
Personnellement, j’oublie en permanence la syntaxe pour manipuler des dates et ce quelque soit le langage utilisé.
Si vous êtes dans le même cas que moi, voici un petit tutoriel sur la manipulation des dates en JavaScript.
Firelight : une librairie JavaScript capable de remplacer Silverlight
par Loïc le Dimanche 26/10/2008 à 20:25, dans JavaScript, SVG, Silverlight
Le gros problème de Silverlight, c’est qu’il nécessite un plugin sur le navigateur du client pour fonctionner.
Pour éviter ce désagrément, l’auteur de pleased precariously propose une librairie JavaScript appelée Firelight (toujours en cours de développement) dont le rôle est de prendre du XAML et du WPF en entrée et de générer à aprtir de ça du SVG / JavaScript / DOM équivalent.
Une petite démo ? ça se passe ici (fonctionne pour l’instant sous Firefox 3.x, Safari 3.1.2 et sous Ipod).
La démo se base sur ce fichier XAML.
8 techniques CSS pour réaliser des graphiques
par Loïc le Dimanche 26/10/2008 à 20:01, dans CSS
Le site Six Revisions a publié 8 techniques afin de réaliser des graphiques en utilisant uniquement des CSS.
-
CSS for Bar Graphs
Le blog Apples to Oranges propose trois examples de graph. Le premier, Basic CSS Bar Graph, utilise un <div> pour contenir le graph et un élément <strong> remplir un certain pourcentage de la barre du graph. Six Revisions suggère d’utiliser un <p> plutôt que le <strong> afin d’avoir une valeur plus correcte d’un point de vue sémantique. -
Accessible Data Visualization with Web Standards
Cette seconde technique est proposée par Wilson Miner sur A List Apart. L’objectif est d’obtenir des graph accessibles et respectueux des standards à partir d’une structure relativement simple. L’article propose trois affichages différents : sous forme de graph horizontal classique, sous forme de timeline ou encore en format réduit pour faire plus ou moins office d’icone.Voir la démo du graphe horizontal.
Voir la démo de la timeline.
Voir la démo de la version réduite. -
CSS Vertical Bar Graphs
Cette troisième technique, qui ressemble fortement à celle proposée par Apples To Oranges, est proposée par Eric Meyer qui présente ici un graphique vertical basé sur une liste non-ordonnée. -
Creating a graph using percentage background images
Cette solution est proposée par maxdesign et a la particularité d’utiliser des images de fond pré-créées. Chaque image est associée à une valeur précise pour le graph, par exemple 20% ou 40%. Cette technique est très limitée car elle limite le nombre de valeur affichables à moins d’augmenter le nombre d’images de fond. Par ailleurs, la multiplication des images entraîne également une multiplication des requêtes HTTP pour les charger par le navigateur.
-
Pure CSS Data Chart
Ce graph vertical se base sur une liste de définitions et a l’avantage de proposer l’affichage de la valeur au centre de chaque barre.
Voir la démo. -
CSS Scatter Plot
Parmi tous ces exemples de graph, en voici un sous forme de nuage de points. Cette technique proposée par John Graham-Cumming permet d’avoir des points clickables, idéal si on veut faire pointer chaque point vers des informations additionnelles. -
Definition List Bar Chart
Comme son nom l’indique, ce graph horizontal se base sur une liste de définitions. Cette technique utilise une classe par valeur et utilise un pourcentage de la largeur pour gérer l’affichage. -
Accessible Bar Chart
Cette dernière technique repose sur une table et une image dont on fait varier la largeur pour gérer l’affichage des barres horizontales du graph.
HTML5 et Doctype
par Loïc le Samedi 25/10/2008 à 22:28, dans HTML5
Vous aussi vous n’arrivez jamais à retenir la syntaxe des DOCTYPEs malgré une utilisation régulière ?
Heureusement pour vous (et moi), le W3C a simplifié la syntaxe du DOCTYPE HTML5 qui sera de la forme suivante :
<!DOCTYPE html>
Pratique, non ? Et le plus beau, c’est que IE8 a prévu de le gérer.
Les bénéfices de l’utilisation d’un framework CSS
par Loïc le Samedi 25/10/2008 à 21:32, dans CSS
Chris Coyier donne son analyse sur l’utilité des frameworks CSS dans un billet sur CSS-Tricks.
D’après lui, les frameworks CSS apportent plusieurs avantages :
- ils peuvent vous aider à apprendre les CSS, par exemple en vous mettant directement sous le nez la bonne méthode pour faire un layout en plusieurs colonnes ou un footer qui tienne la route,
- ils vous fournissent du code “basique” afin de vous éviter de devoir le récrire pour chaque site, par exemple le reset des styles,
- ils se chargent de gérer les problèmes de compatibilité,
- ils vous aident à prendre de bonnes habitudes, par exemple en intégrant systématiquement une feuille de style pour l’impression,
- ils vous encouragent à faire un design en grille et pas avec d’horribles tableaux,
- ils sont livrés avec de la documentation, ce qui peut être pratique lorsqu’on livre un site à un client,
- ils sont parfois profondément intégrés à un framework plus complet, par exemple dans le framework YUI et facilitent son utilisation.
Cependant, il pointe aussi quelques défauts majeurs qui l’encouragent à se passer des frameworks CSS autant que possible :
- Pour qu’un framework fasse gagner du temps, il faut s’en servir plusieurs fois afin d’en maîtriser toutes les particularités,
- les frameworks vous forcent la main, par exemple dans le choix des classes ou des ID, et vous obligent à changer vos habitudes (et à les changer différemment selon les frameworks),
- ils peuvent être surchargés inutilement quand on n’utilise qu’une petite partie du framework sans en tirer tout son potentiel,
- ils peuvent parfois faire perdre du temps lorsqu’ils sont imposés car il est parfois plus long de prendre en main le framework et arriver à en tirer le résultat voulu que de tout refaire soi-même à la main.
Pour ma part, je n’ai jamais eut l’occasion d’utiliser un framework CSS, je me contente généralement d’un reset tout fait. Je dois dire que je préfère tout réaliser à la main afin de parfaitement maîtriser les caractéristiques de l’interface que je suis en train de réaliser plutôt que d’utiliser une structure toute faite…
L’avenir des frameworks JS ?
par Loïc le Samedi 25/10/2008 à 17:02, dans CSS, JavaScript
Dans mon précédent billet dédié aux moteurs de sélecteurs CSS en JavaScript, je signale que certaines personnes estiment qu’on en voit la fin : les moteurs ont des performances optimales, il est inutile de chercher à les améliorer de ce côté.
C’est un peu ce que s’est dit Eric Meyer dans un billet publié mercredi dernier où il donne de bonnes idées pour les moteurs à venir.
D’un côté, nous avons les CSS 3 dont les fonctionnalités visent à remplacer des particularités que nous réalisons à l’heure actuelle avec des méthodes de Sioux mélangeant allégrement HTML, CSS, JavaScript et images (coin arrondis, effets d’ombre, animation, dégradés, etc). Le point noir, c’est que les navigateurs évoluent lentement et IE6 nous tire vers le bas, bridant nos possibilités et l’utilisation de tout ce potentiel qui commence à être géré par les nouvelles versions des navigateurs, ce qui nous oblige à continuer avec nos méthodes de Sioux qui sont rôdées, certes, mais qui obligent à déporter une partie de la couche design (les CSS) dans les autres, par exemple en ajoutant les div et les span qui vont bien pour réaliser un joli rendu (div et span qui sont parfois injectés dans le DOM par du JavaScript).
De l’autre côté, on a des moteurs de sélecteurs en JavaScript dont le rôle est de permettre l’utilisation des sélecteurs CSS 3 dans du code JavaScript afin de faciliter l’accès aux données dans la page.
Et si ces moteurs JavaScript faisaient un peu plus que ça ? Ils pourraient par exemple se charger de parcourir la feuille de style, repérer les règles CSS contenant des sélecteurs non-gérés par le navigateur et appliquer les propriétés des règles en question sur les bons éléments. Le développeur pourrait ainsi se mettre à utiliser les sélecteurs CSS 3 dans ses feuilles de style, le moteur JS se chargerait d’appliquer les règles non-gérées par le navigateur.
Il est même possible d’aller encore plus loin : pourquoi ces moteurs javascript ne pourraient-ils pas également gérer des propriétés CSS 3 ? Eric mentionne par exemple la possibilité d’appliquer plusieurs images de fond à un objet en CSS 3 :
#monID {
background:url(top.png) no-repeat top left,
url(bottom.png) no-repeat bottom left,
url(middle.png) no-repeat 50% 50%;
}
Le moteur javascript se chargerait de détecter ce genre de règle et de modifier la structure de l’élément (en lui rajoutant des div et des span) pour lui appliquer les fonds multiple.
La même chose pourrait se faire avec d’inombrables propriétés actuellement inutilisables à moins de cibler des navigateurs de dernière génération. La couche présentation se composerait alors d’une sous-couche de style (les feuilles de style) et d’un moteur javascript pour gérer les problèmes de mauvaise gestion de ces feuilles de style par les navigateurs.
Le Javascript non plus pour aider le développeur à faire son interface mais pour aider le navigateur à afficher ce que lui demande le développeur.
Sizzle, Peppy : la nouvelle vague de moteurs de selectors
par Loïc le Samedi 25/10/2008 à 16:10, dans CSS, JavaScript
Fin août dernier, John Resig a annoncé la création de son tout nouveau moteur de sélecteurs CSS en JavaScript, Sizzle, supposé être intégré dans l’une des prochaines versions de jQuery.
Il y a quelques jours, un autre moteur de sélecteurs a fait son apparition, il s’agit de Peppy, réalisé par James Donaghue.
Côté perf, les deux moteurs sont ce qui se fait de mieux, vous pouvez le constater en lançant le SlickSpeed sur le blog de James Donaghue. Ils sont loin devant les frameworks classiques et ont l’avantage de la légéreté : Sizzle fait 4 ko, Peppy fait 10 ko. Bref idéal pour être intégré n’importe et pour, pourquoi pas, surcharger le moteur de sélecteur de votre framework favori.
A noter toutefois que Peppy a encore quelques soucis avec une mauvaise gestion du cache sous IE : le moteur marche parfaitement à condition que le DOM ne soit jamais modifié, dans le cas contraite peuvent survenir des résultats erronés (c’est d’ailleurs cette mauvaise gestion du cache qui lui permet d’afficher des résultats bien meilleurs que ceux de Sizzle sous IE). Ce problème devrait être réglé au cours du weekend car James Donaghue a annoncé une nouvelle release dans les jours à venir.
En tout cas, ces deux moteurs annoncent le début de la fin de la guerre des perf sur les moteurs de sélecteurs : de nombreuses personnes s’accordent à dire qu’il n’est plus nécessaire d’optimiser la vitesse et qu’il faut se tourner vers d’autres directions.
C’est parti…
par Loïc le Samedi 25/10/2008 à 15:26, dans Non classé
A force de lire des blogs en anglais sur le développement web, on finit par se dire que ça pourrait être pas mal de lancer son propre blog pour enrichir un peu plus la communauté française gravitant autour de ce domaine…
A l’heure actuelle, le web bouge très très vite. Déjà du côté des navigateurs avec des acteurs variés et proposant des applications à fort potentiel. Le monopole d’Internet Explorer s’effrite petit à petit et nous sommes dans les balbutiements d’une nouvelle guerre de navigateurs, en particulier depuis que Google a annoncé son entrée sur ce terrain de jeu.
Mais ça bouge aussi du côté du développement, même sur des technos ayant plusieurs années : le lent abandon des vieux navigateurs a obligé les développeurs à conserver une compatibilité avec de vieilles technos et à limiter l’utilisation de versions plus récentes. On utilise toujours les vieilles marmites mais on a appris à les maîtriser, à en connaître la moindre imperfection. On peut le voir par exemple avec l’explosion de l’Ajax il y a quelques années ou encore l’actuelle panel de frameworks JavaScript pour enrichir et faciliter la création d’une interface.
Bref ça bouge beaucoup, ça bouge très vite et il n’est pas forcément évident de suivre tout ça.
Alors voilà, le blog est lancé, pour le meilleur comme pour le pire. Il sera avant tout orienté sur le front-end et plus particulièrement sur le JavaScript et les CSS, deux technos qui me font frétiller les neurones au quotidien.
J’espère que les articles et les tutoriaux vous plairont et que vous pourrez trouver ici des informations qui vous seront utile dans vos réalisations de tous les jours.
Loïc
