Webkit... ou comment reproduire les erreurs du passé.

Publié par Fabrice Michellonet sous le(s) label(s) , le 31 mars 2009

A croire que l'histoire se répète indéfiniment, et qu’on ne tire pas de leçons du passé.

Pourquoi ce coup de gueule ? Tout simplement parce que je viens de tomber sur une news qui présente les EXTRAORDINAIRES nouvelles propriétés CSS du moteur Webkit (utilisé principalement par Safari et Google Chrome)…

Attention mesdames et messieurs, jusqu’à maintenant on utilisait les CSS pour styler un élément, maintenant avec Webkit vous pouvez lui donner un comportement.

La preuve en image : une horloge uniquement en CSS.

Horloge CSS

Et le fabuleux bout de CSS proprietaire qui va bien...

   
/* -webkit-transition: property duration timing-function */
#clock img[src*='hour'] {
-webkit-transform: rotate(90deg);
}

#clock img[src*='second'] {
-webkit-transition: -webkit-transform 60s linear;
}

#clock:target img[src*='second'] {
-webkit-transform: rotate(360deg);
}

Comportements vous avez dit ? Mais, normalement ce n’est pas le rôle de Javascript de donner un comportement, dit l’architecte Web ?

Et dire que dans le passé, lorsqu’ Internet Explorer 6 était le seul browser potable du marché (non Jérome Links n’est pas à proprement parlé un browser :)) des milliers de voix s’élevait contre toutes les fonctions propriétaires que Microsoft avait introduites en marge de la norme.

Tient, la c’est marrant, j’en entends beaucoup moins s’insurger….


#fabrice {
-webkit-shutup: 5sec;
}

[Source Ajaxian]

Quand Google et Microsoft fonctionnent main dans la main.

Publié par Fabrice Michellonet sous le(s) label(s) , le 27 mars 2009

Dernièrement, j'ai l'impression que dans le giron de Microsoft on s'émeut de plus en plus, parfois outre mesures, de ce qui se fait chez Google. Pourtant, je me suis laissé dire qu'il existe surement des terrains ou les deux offres se complètent.

En ce moment par exemple, je travaille chez mon client avec le composant Javascript de Virtual Earth qui permet, comme tout le monde doit déjà le savoir, d’afficher de belles cartes géographique avec zoom, navigation interactive et toutes les petites choses sexy que les aficionados de Google Maps apprécient.

Imaginez maintenant que vous ne souhaitiez pas uniquement

  • explorer les environs de votre lieu d’habitation,
  • ou bien encore prévoir le trajet en faire en auto pour vous rendre dans votre prochain lieu de villégiature
mais que vous souhaitiez pour votre projet BI actuel afficher vos indicateurs quels qu’ils soient sur une jolie carte le tout sur une simple page web…

Bien, je suis sur que vous me voyez venir avec mes gros sabots…

Alors prenons une petite dose de Virtual Earth et un soupçon de Google Charts et l’on obtient alors quelque chose dans ce goût la :

Carte + Graph

Et pour ceux qui se demande comment on peut faire ce genre de chose voici le code, somme toute très très simple :



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Virtual Earth
</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=fr-FR"></script>

<script type="text/javascript">
function initialize() {
map = new VEMap('myMap');
var ParisLatLong = new VELatLong(48.8667, 2.3333);
map.LoadMap(ParisLatLong);
map.Resize(800, 600);
map.SetZoomLevel(7);
map.SetCenter(ParisLatLong);

var newShape = new VEShape(VEShapeType.Pushpin, ParisLatLong);

newShape.SetTitle("Répartition des moyens de transport à Paris");
newShape.SetDescription('<img src="http://chart.apis.google.com/chart?chtt=un+beau+spacer&chts=ffffff&chs=200x100&chf=bg,s,ffffff&cht=p3&chd=t:56.00,40.00,4.00&chl=Autos|Motos|Autres" alt="My google chart" />');
map.AddShape(newShape);
}
</script>

<style type="text/css">
HTML, BODY, FORM {margin:0; padding:0; height:100%; width:100%;}
</style>

</head>
<body onload="initialize();">
<form name="form1" method="post" action="Default.aspx" id="form1">
<div id="myMap" style="position:relative; width:100%; height:100%"/>
</form>
</body>
</html>

Evidement je laisse libre cours à votre imagination pour rendre vos cartes BI encore plus interactive et bien entendu attractives pour les utilisateurs.

J’en profite pour vous donner deux liens qui m’ont semblé fort intéressants :