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

- Compte rendu : SharePoint / O365 : des pratiques pour une meilleure productivité par The Mit's Blog le 12-12-2014, 18:11

- [TFS] Suppression des feature SQL Entreprise en masse par Blog de Jérémy Jeanson le 12-06-2014, 09:18

- [Clean Code] règles de nommage par Fathi Bellahcene le 12-04-2014, 22:59

- Windows To Go 10 et Upgrades impossibles par Blog de Jérémy Jeanson le 12-04-2014, 21:38

- SharePoint OnPremise: Statistiques d’utilisation pour traquer les sites fantomes par Blog Technique de Romelard Fabrice le 12-03-2014, 10:28

- SharePoint 2007: Script PowerShell permettant le backup de toutes les collections de sites d’une application Web par Blog Technique de Romelard Fabrice le 12-02-2014, 10:00

- Xamarin : un choix précieux par .net is good... C# is better ;) le 12-01-2014, 15:10

- Office 365: Comparaison des composants pour préparer votre migration de SharePoint 2007 vers Office 365 par Blog Technique de Romelard Fabrice le 11-28-2014, 16:20

- Créer un périphérique Windows To Go 10 ! par Blog de Jérémy Jeanson le 11-21-2014, 04:54

- RDV à Genève le 12 décembre pour l’évènement “SharePoint–Office 365 : des pratiques pour une meilleure productivité !” par Le blog de Patrick [MVP Office 365] le 11-19-2014, 10:40