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

- Après Montréal, ce sera Barcelone, rendez-vous à la European SharePoint Conference 2014 ! par Le blog de Patrick [MVP SharePoint] le il y a 5 heures et 17 minutes

- Emportez votre sélection de la MSDN dans la poche ? par Blog de Jérémy Jeanson le 04-17-2014, 22:24

- [ #Office365 ] Pb de connexion du flux Yammer ajouté à un site SharePoint par Le blog de Patrick [MVP SharePoint] le 04-17-2014, 17:03

- NFluent & Data Annotations : coder ses propres assertions par Fathi Bellahcene le 04-17-2014, 16:54

- Installer un site ASP.net 32bits sur un serveur exécutant SharePoint 2013 par Blog de Jérémy Jeanson le 04-17-2014, 06:34

- [ SharePoint Summit 2014 ] Tests de montée en charge SharePoint par Le blog de Patrick [MVP SharePoint] le 04-16-2014, 20:44

- [ SharePoint Summit 2014 ] Bâtir un site web public avec Office 365 par Le blog de Patrick [MVP SharePoint] le 04-16-2014, 18:30

- Kinect + Speech Recognition + Eedomus = Dommy par Aurélien GALTIER le 04-16-2014, 17:17

- [ SharePoint Summit 2014 ] Une m&#233;thodologie simple pour concevoir vos applications OOTB SharePoint de A &#224; Z par Le blog de Patrick [MVP SharePoint] le 04-16-2014, 16:51

- //Lean/ - Apprendre à faire des Apps Windows universelles par Blog de Jérémy Jeanson le 04-16-2014, 12:57