Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Atteint de JavaScriptite Aiguë [Cyril Durand]

Expert ASP.net Ajax et WCF, Cyril Durand parle dans son blog de point techniques sur ASP.net, ASP.net Ajax, JavaScript, WCF et .net en général. Cyril est également consultant indépendant, n'hésitez pas à le contacter pour de l'assistance sur vos projets

Actualités

  • Blog de Cyril DURAND, passionné de JavaScript, Ajax, ASP.net et tout ce qui touche au developpement Web Client-Side.

    N'hésitez pas à me contacter pour vos projets .net : architecture, accompagnement, formation, ...

    View Cyril Durand's profile on LinkedIn
    hit counters


    Expertise Commerce server et BizTalk

exemple d'utilisation de SVG & canvas pour Firefox 1.5
Une des nouveautés de Firefox 1.5 est, entre autre, le support du SVG et de la balise <canvas>.

SVG

SVG veut dire Scalable Vector Graphics cela permet de faire du vectoriel avec du XML :-)
 
Par exemple ce bout de XML la donnera :
 
rendu du SVG
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">

  <rect x="20" y="20" width="300" height="250"
        style="fill:none;stroke:blue;stroke-width:2"/>

  <ellipse cx="160" cy="70"  rx="40" ry="30"
        style="fill:yellow;stroke:navy;stroke-width:3"/>

  <g transform="translate(0, 120) rotate(30, 160, 60)">
      <ellipse cx="160" cy="70" rx="70" ry="30"
            style="fill:none;stroke:purple;stroke-width:3"/>
  </g>

</svg>
 
la ou ca devient encore plus sympathique c'est qu'on peut manipuler ces images avec javascript grace à DOM ! Voici quelques exemples : http://www.croczilla.com/svg/samples/ (qui marcheront seulement avec FF1.5 ou safari)
 
Je ne sais pas si un jour IE va pouvoir nativement afficher ces choses la (ce serait cool) si quelqu'un à des idées la dessus ... :p
 

Canvas

La balise canvas est une des balise proposé par le WHATWG (et je maintiens mon avis) cette balise permet de faire du dessin trés facilement avec javascript :-)
 
Voici un exemple tiré de : http://developer.mozilla.org/en/docs/Drawing_Graphics_with_Canvas 
<html>
 <head>
  <script type="application/x-javascript">
function draw() {
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");

 ctx.fillStyle = "rgb(200,0,0)";
 ctx.fillRect (10, 10, 50, 50);

 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
 ctx.fillRect (30, 30, 50, 50);
}
  </script>
 </head>
 <body onload="draw()">
   <canvas id="canvas" width="300" height="300"></canvas>
 </body>
</html>
J'aime bien l'idée de cette balise: pouvoir dessiner avec du js : QDB. le problème est que ca ma l'air d'aller à l'encontre du W3C et je doute trés fortement que IE va implémenter ces balises ... :-( si ce "standard", certe sympa, s'impose on risque de retomber dans une nouvelle guerre des navigateurs : c'est celui qui met le plus de fonctionnalités (souvent inutile) qui sera perçu comme le meilleur des navigateurs ...
 
Voici d'autres exemples de <canvas> / SVG : http://thebogles.com/blog/firefox-15-svg-and-canvas-demonstrations 
 
En tout cas en voyant ca, j'ai vraiment hâte de faire du XAML :)
 
PS : J'ai aussi découvert une autre nouveauté (moins documenté) de Firefox1.5, c'est le support des propriétés overflow-x et overflow-y introduite par microsoft qui permettent d'afficher une barre de scroll seulement en bas ou à droite. Avant Firefox 1.5 il était impossible de spécifier quelle scrollbar voulait ton afficher, pour information cette propriété n'est nullement décrite dans les normes W3C ... ;-)
Posted: dimanche 5 février 2006 23:53 par cyril
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

Poppyto a dit :

VBScript permet aussi de faire du dessin sur IE.

Bonne nouvelle pour overflow-x & overflow-y (enfin!) !
# février 6, 2006 09:21

azra a dit :

Hep Msieur, comment je fais pour mon firefox avant 1.5 pour mon overflow? :)
# février 6, 2006 11:09

ROMELARD Fabrice a dit :

Tu as un petit exemple rapide ici :
- http://www.asp-php.net/scripts/asp-php/generer_svg.php

Romelard Fabrice
# février 6, 2006 11:38
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- SharePoint : Bug sur la gestion des permissions et la synchronisation Office par Blog Technique de Romelard Fabrice le 07-10-2014, 11:35

- SharePoint 2007 : La gestion des permissions pour les Workflows par Blog Technique de Romelard Fabrice le 07-08-2014, 11:27

- TypeMock: mock everything! par Fathi Bellahcene le 07-07-2014, 17:06

- Coding is like Read par Aurélien GALTIER le 07-01-2014, 15:30

- Mes vidéos autour des nouveautés VS 2013 par Fathi Bellahcene le 06-30-2014, 20:52

- Recherche un passionné .NET par Tkfé le 06-16-2014, 12:22

- [CodePlex] Projet KISS Workflow Foundation lancé par Blog de Jérémy Jeanson le 06-08-2014, 22:25

- Etes-vous yOS compatible ? (3/3) : la feuille de route par Le blog de Patrick [MVP SharePoint] le 06-06-2014, 00:30

- [MSDN] Utiliser l'approche Contract First avec Workflow Foundation 4.5 par Blog de Jérémy Jeanson le 06-05-2014, 21:19

- [ #ESPC14 ] TH10 Moving mountains with SharePoint ! par Le blog de Patrick [MVP SharePoint] le 06-01-2014, 11:30