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

- [ #Yammer ] From Mailbox to Yammer and back / De votre messagerie vers Yammer et retour ! par Le blog de Patrick [MVP SharePoint] le 09-15-2014, 11:31

- [ #Office 365 ] New service settings panel / Nouveau panneau de paramétrage des services par Le blog de Patrick [MVP SharePoint] le 09-11-2014, 08:50

- Problème de déploiement pour une démo SharePoint/TFS? par Blog de Jérémy Jeanson le 09-10-2014, 21:52

- [ #Office365 ] Delve first impressions / Premières impressions sur Delve par Le blog de Patrick [MVP SharePoint] le 09-09-2014, 16:57

- [ #Office365 ] How to change Administration console language ? / Comment changer la langue de la console d’administration ? par Le blog de Patrick [MVP SharePoint] le 09-09-2014, 08:25

- [ #SharePoint 2013 ] Suppression de bases de données en état “Pas de Réponse” par Le blog de Patrick [MVP SharePoint] le 09-04-2014, 14:10

- Changer l’adresse d’une ferme Office Web Apps associée à SharePoint par Blog de Jérémy Jeanson le 09-01-2014, 22:21

- Une ferme #SharePoint 2013 dans @Azure en quelques clics (1ère partie) ! par Le blog de Patrick [MVP SharePoint] le 08-28-2014, 18:52

- SharePoint 2013: Préparation de la migration - Création des site Templates dans 2010 et 2013 par Blog Technique de Romelard Fabrice le 08-20-2014, 16:31

- [ #Yammer ] How to change interface language ? Comment changer la langue de l’interface ? par Le blog de Patrick [MVP SharePoint] le 08-20-2014, 14:21