All posts in Webdesign

Sifrvault, polices prêtes à l’emploi

Si vous utilisez la technique sifr sur un site pour pouvoir afficher vos textes avec la police de votre choix, vous savez surement que pour utiliser une police en particulier, il faut d’abord créer un petit fichier flash contenant cette police. Le but de Sifrvault et de collecter et distribuer ces petits fichiers flash pour le plus grand nombre de police.

[ad#posts]

Atlas, éditeur en ligne pour créer des applications avec le framework Cappuccino

Après Bespin, l’éditeur de texte en ligne de Mozilla, 280 North présente Atlas, une application en ligne pour créer des applications basées sur le framework Cappuccino. Leur démo (vidéo ci-dessous) est très impressionnante, tant au niveau de leur éditeur en ligne, qu’au niveau de la facilité avec laquelle on peut créer une application très rapidement.

Pour rappel, le framework Cappuccino permet de créer des applications web avec un look and feel d’application classique (voir par exemple 280 Slide, une copie de Keynote (l’application d’Apple pour créer des présentations), mais en version web).

Pour en savoir plus :

Atlas
Cappuccinno

[ad#posts]

Seamlesstextures, images répétitives pour vos fonds de page


Seamlesstextures.net propose toute une collection de textures répétitives gratuites (bois, herbe, papier, …) à utiliser pour vos fonds de page.

[ad#posts]

Bespin, éditeur de texte en ligne


Bespin est un éditeur de texte en ligne, issu du Mozilla Lab. Utilisant Canvas, il permet d’éditer vos fichiers html, js, … en ligne. Après un petit test rapide, l’outil semble rapide et efficace. Il dispose d’une ligne de commande permettant d’utiliser des fonctions (remplacer du texte avec des regex, trim, …).
Pour le tester, il faut utiliser un navigateur supportant Canvas, et les fonctions avancées de Canvas, donc Firefox 3 ou une nightly de Safari.


Introducing Bespin from Dion Almaer on Vimeo.

Plus de détail sur l’annonce de Bespin sur Ajaxian.

[ad#posts]

Un slideshow animé sans flash grâce à Canvas


Jérôme Wax expérimente avec l’objet canvas, il a créé un diaporama animé entièrement propulsé en javascript et utilisant l’objet canvas. Encore une raison de moins d’utiliser Flash pour réaliser de petites animations sur un site.

Dans un autre style, l’équipe de développement de Safari présente une technique d’animation en CSS, à tester avec une version de développement de Safari ou avec Safari sur votre Iphone.

[ad#posts]

Petite sélection de plug-in jquery

Voici une petite sélection de plug-in jquery pouvant se révéler utiles :

jQuery iPod-style Drilldown Menu

Un menu reproduisant la navigation sur un iPod, pratique pour afficher des menus complexes, avec de nombreux niveaux

Compteur de mot dans un textarea

Comme son nom l’indique, permet de compter le nombre de mots dans un textarea

Parseur d’url

Permet de récupérer facilement les informations d’un lien. Le plug-in permet d’accéder simplement au lien, au protocol du lien (http, https, …), au domaine, au port utilisé, aux paramètres s’il y en a (item=value&item2=value2), au nom du fichier (index.html), au chemin (/folder/dir/), et à encore bien d’autres paramètres.

Timers

Permet d’appeler une fonction toutes les x secondes, une fois ou plusieurs fois

[ad#posts]

Plotr, librairie javascript pour générer des graphique (utilise Canvas)

PlotrPlotr est une librairie javascript créée par Bas Wenneker qui permet de générer des graphiques en utilisant l’objet canvas et la librairie Prototype, qui fonctionne avec Safari, Firefox, Opera et IE 6 (grâce à  ExplorerCanvas).


var dataset = {
                'myFirstDataset': [[0, 1], [1, 0.8], [2, 2.3], [3, 1.3], [4, 2.56]],
                'mySecondDataset': [[0, 0.5], [1, 0.5], [2, 2], [3, 1], [4, 1.4]],
                'myThirdDataset': [[0, 0.7], [1, 0.3], [2, 1.5], [3, 0.8], [4, 1.2]],
                'myFourthDataset': [[0, 0.1], [1, 0.1], [2, 0.1], [3, 0.1], [4, 1]]
};
var options = {
        padding: {left: 30, right: 0, top: 10, bottom: 30},
        colorScheme: 'grey',
        backgroundColor: '#d8efb0',
        xTicks: [{v:0, label:'week 1'},
        {v:1, label:'week 2'},
        {v:2, label:'week 3'},
        {v:3, label:'week 4'},
        {v:4, label:'week 5'}
        ]
};

var lineChart = new Plotr.LineChart('plotr1',options);
lineChart.addDataset(dataset);
lineChart.render();

Plotr

Visiter Plotr >>
Exemple 1 >>
Exemple 2 >>

Installer IE 7 et IE 6 sur le même ordinateur

IE7Microsoft propose la version finale d’IE 7 aujourd’hui. Vous pouvez télécharger IE 7 ici.
Nous voici donc avec un navigateur de plus sur lequel tester nos pages web, de nouveaux hacks à  apprendre, bref, une raison de plus de s’arracher les cheveux.
Pour continuer à  tester ses sites avec IE 6 qui sera là  encore un moment, vous pouvez télécharger une version standalone d’IE 6 sur le site d’evolt, qui propose de télécharger de nombreuses versions des différents navigateurs ayant existés dans sa Browser archive.

Stream d’un fichier pdf généré à la volée et page blanche avec IE

De plus en plus de site web ont recours à la génération de pdf à la volée, que ce soit pour permettre au visiteur de sauvegarder une page d’un site, ou pour générer divers documents (facture, fiche produit, formulaire personnalisé, …).
J’utilise ce système sur de nombreux sites, et je viens de découvrir un problème survenant avec IE sur pc. Sur certains sites en effet, plutôt que d’afficher le pdf généré et renvoyé au navigateur par le serveur, IE affiche une page blanche.
Après investigation, il apparaît que le problème survient si le serveur est configuré pour envoyer les pages au navigateur en les compressant en gzip. La compression semble perturber IE. Même si le serveur n’est configuré que pour compresser les pages html et php par exemple, puisque la génération du pdf se fait par l’appel d’une page php, le flux de retour est compressé en gzip, et modifier le header retourné par le serveur n’y change rien.
La solution à ce problème est soit de générer automatiquement le pdf, puis de mettre un lien pointant directement sur le fichier pdf (dans ce cas le flux de réponse ne sera pas compressé puisqu’on appelle un fichier pdf), soit, plus radical, supprimer la compression gzip pour les pages à destination d’IE. La premiére solution n’est pas toujours possible, la deuxième est un peu extrême à mon gout. Si vous connaissez une autre technique, je suis preneur.

script.aculo.us Reflector, reflet d’image

scriptaculous reflector
La génération de reflet sous les images d’une page web (façon iWeb) est toujours à la mode. Après le script reflection.js, Thomas Fuchs ajoute Reflector à sa bibliothèque d’effet javascript Scriptaculous.

Scriptaculous Reflector >>
L’article sur Ajaxian >>