Web Dev.
Chrome Frame: Google s’attaque à Internet Explorer
29/04/10
Google a décidé de s’attaquer une nouvelle fois à Microsoft, toujours sur le terrain du navigateur web mais cette fois-ci avec une optique moins frontale: celle du moteur de rendu du navigateur Internet Explorer.
L’aspect utilisateur final
En plus de proposer leur navigateur maison Google Chrome, voici qu’ils proposent Google Chrome Frame qui vient taquiner IE de l’intérieur. Sous forme de plugin à installer sur votre système (Windows uniquement, évidemment), Chrome Frame vient remplacer directement dans IE le moteur de rendu HTML/Javascript natif par celui de Google Chrome (basé sur Webkit).
Bien entendu, cela ne substitue que le moteur de rendu et rien d’autre des fonctions du navigateur. Vous conservez Internet Explorer avec toutes ses fonctions, c’est juste la façon d’interpréter le code html et css et d’afficher les pages web qui change. De plus, le moteur de rendu Chrome Frame ne vient pas se substituer en permanence à celui d’Internet Explorer, c’est au bon vouloir de l’utilisateur, quand il le désire ou quand le site visité lui signale qu’il est compatible avec Chrome Frame…
Séduire les développeurs web
Mais comme souvent pour faire connaître et adopter ses services, Google va d’abord séduire les développeurs web!
Google propose donc, en plus de Chrome Frame pour les utilisateurs finaux, des meta-tags (documentation pour l’intégration) et une librairie javascript à intégrer/utiliser dans vos pages web pour: basculer le rendu de votre site automatiquement sur Chrome Frame si le visiteur l’a déjà installé ou bien proposer au visiteur d’installer Chrome Frame s’il est utilisateur d’IE.
Quel est l’intérêt pour le développeur web à part d’essayer de faire disparaître IE pour ne plus avoir à faire des hacks et des règles d’exceptions pour IE qui ne respecte pas les standards ? (Ce qui en soit est déjà une belle motivation)
- Proposer aux utilisateurs d’IE qui le souhaitent d’avoir une expérience enrichie de son site web: HTML5, CSS3 et javascript plus rapide.
- Proposer aux utilisateurs d’IE qui ne peuvent pas utiliser un autre navigateur (ex: en entreprise) d’enrichir leur façon de surfer. J’ai vu encore en 2010 des utilisateurs qui restent coincés sur IE6 à cause de logiciels métiers ou de fonctionnalités d’une partie de l’intranet qui dépendent de composants ActiveX uniquement compatibles avec IE6.
- Coder d’une seule et unique façon (selon les standards) et annoncer à ses visiteurs: soit vous aurez une version pourrie et bancale avec IE, soit vous aurez du version superbe en ajoutant le moteur de rendu Chrome Frame. (c’est un peu radical, j’en conviens)
Réel intérêt de Google Chrome Frame dans les projets web
Franchement, je pense que cela n’empêchera pas de toujours devoir penser à hacker son code pour le rendre compatible avec les différentes versions d’IE, car il y aura toujours un pourcentage d’utilisateurs IE parmi les visiteurs.
Cependant dans un environnement clôt comme l’intranet d’une entreprise obligé d’utiliser IE pour différentes raisons, cela permet un déploiement plus rapide des projets web internes (car moins de temps de codage), et de supporter plus de fonctionnalités (html5, css2/3, javascript moderne) dans ces projets. Il suffira juste de déployer Chrome Frame par une petite installe sur le poste des utilisateurs (soit à la main ou soit en automatique pour tout le parc via l’administrateur IT).
Une petite vidéo de présentation:
Lien (téléchargement et documentations): http://code.google.com/chrome/chromeframe/
Récupérer le favicon d’un site web automatiquement en PNG
30/09/08
Le favicon c’est ce petit icône que récupère votre navigateur pour l’afficher dans la barre d’adresse, l’onglet ou les favoris:
Il est en général au format ICO (icône pour windows) et très rarement en GIF ou PNG, bien que les navigateurs standards (comme Firefox, Safari ou Opera) savent gérer ces formats.
Google propose un service automatique de conversion de cet icône au format PNG. Très pratique donc pour les webmasters afin d’afficher automatiquement dans leurs scripts l’icône d’un site web, pour agrémenter leurs liens hypertextes par exemple.
Il suffit d’appeler dans votre code HTML l’image avec l’url suivante:
http://www.google.com/s2/favicons?domain=nomdedomaine.extension
exemple:
<img src="http://www.google.com/s2/favicons?domain=amazon.com" />
Voici quelques illustrations:
Google.fr
Mozilla-europe.org
Et si Google ne peut pas récupérer de favicon car le site n’existe pas ou n’a pas de favicon, un petit globe est alors affiché.
Exemple: atzratzruaztuay.com
Ajaxload, générateur d’images de chargement pour AJAX
28/09/08
Voici un truc tout bête, certes pas nouveau, mais qui rend bien service.
Lorsque dans un script je fais un appel asynchrone pour rapatrier ou mettre à jour des données ou du contenu dans un page web (heu, oui… on appelle ça vulgairement AJAX), j’ai parfois besoin de mettre une petite image qui bouge pour signifier à l’utilisateur qu’il se passe quelque chose en arrière plan. On appelle cela un pre-loader.
Le problème c’est que fabriquer soi-même ce genre d’images est un peu une perte de temps. Et il faut parfois adapter cette image à la charte et aux couleurs du site, donc n’en utiliser qu’une seule pour tous vos projets ne résout pas le problème.
Aussi le site Ajaxload se propose de vous générer ce genre d’images facilement.
Au programme: une interface ultra simple à utiliser, le choix parmi 36 modèles de pre-loader, le choix de la couleur à donner à votre image, ainsi que celle du fond via une palette de couleur (ou code Hexadécimal) ou même en fond transparent.
Note: C’est une info une peu vieillotte (je sais et je m’en fous!), mais comme j’ai parfois besoin de ce site web et que je le paume toujours dans les méandres de mes bookmarks, en faire une note ici me permettra d’avoir une façon de plus de le retrouver, tout en faisant partager l’info.
Tester son site web sur Safari/Webkit
23/07/08
Le site BrowsrCamp permet de générer automatiquement une capture d’écran de votre site web afin d’en connaître le rendu sur le navigateur Safari d’Apple.
La procédure est simple: entrez l’adresse de la page à tester, la largeur d’écran (de 800 à 1600 pixels) et le format de rendu jpeg ou png. Sous quelques secondes vous aurez le droit à une belle capture d’écran.
Si vous préférez plus d’interactivité et un rendu immédiat, ou tout simplement ne pas être dépendant d’un service web, vous pouvez installer le navigateur Midori (pour Gnome) qui utilise le même moteur de rendu Webkit que Safari, en attendant la future version « Webkit » du navigateur Epiphany.
Pour installer Midori sur Ubuntu:
sudo aptitude install midori
ou directement en cliquant sur ce lien: apt://midori
TimThumb, script php pour la génération de vignettes
13/07/08
TimThumb est un petit script php bien pratique qui permet de retailler à la volée des images.
Cela permet notamment de faire des vignettes (thubnails) assez facilement.
Il supporte les images de type jpeg, gif et png, il fonctionne avec GD Lib et php à partir de la version 4.3.
Concrètement comme fonctionne-t-il?
Tout simplement en lieu et place de l’appel à votre balise image habituelle sur votre site ou dans votre application php
<img src="monimage.jpg" />
remplacez par
<img src="/scripts/timthumb.php?src=monimage.jpg&h=150&w=150&zc=1" />
h pour la hauteur désirée, w pour la largeur désirée et z 1 si vous souhaitez utiliser le zoom, 0 sinon.
TimThumb ira automatiquement lire le fichier image, le retailler aux dimensions voulues et mettre le fichier en cache (afin de ne pas refaire le même traitement à chaque fois) puis afficher votre fichier. Tout cela de façon transparente.
BarackSlideshow, un diaporama léger basé sur mootools
10/07/08
BarackSlideshow est un élégant diaporama écrit en javascript et basé sur le framework Mootools (version 1.2).
Son interface est simple et jolie, les fondus de transition sont du plus bel effet et le curseur mobile donne l’impression d’être face à du flash. Sauf que tout est en html+css+javascript, et évidemment valide xhtml. Le code quant à lui est léger, et donc rapide à charger.
Son nom lui vient du fait qu’il est inspiré du slideshow présent en page d’accueil du site de Barack Obama.
Site web du script: Devthought – BarackSlideshow
Demo: BarackSlideshow demo
Source de l’article: BarackSlideshow – Lightweight Mootools Slideshow Script
Je me mets au web 2.0, le web social, grâce à Twitter
10/07/08
Non, il ne faut pas rêver non-plus, mais quoi encore!
J’ai assez de mal à sociabiliser sur le net et encore plus à rentrer dans un comportement de troupeau de moutons virtuels, pour aller m’inscrire sur un service social du net et m’y faire de pseudo-amis…
J’avais déjà eu l’occasion de voir Twitter, et de penser que ça pouvait être pas mal pour des gens ayant la nécessité de vivre en troupeau, mais sans aucun intérêt pour moi.
Néanmoins, je suis revenu (en partie) sur mon avis à la lecture de quelques articles portant sur l’API Twitter.
Via son API, Twitter peut être utilisé pour d’autres finalités que celle d’écrire son petit bout de quotidien qui lui passe par la tête et de le montrer fièrement à ses contacts ou à des inconnus sur son blog.
Twitter peut devenir un outil d’automatisation au sein d’une application.
Travailler sur son nouveau site web grâce à OpenDNS
13/06/08
J’utilise au quotidien les services OpenDNS pour les résolutions de noms de domaine, histoire de remplacer les serveurs DNS poussifs de mon FAI Neuf.
Les serveurs DNS de neuf sont souvent très lents et parfois indisponibles et on ne sait pas avec quelle logique ils sont gérés, ceux de Cegetel où j’étais avant la fusion Neuf/Cegetel étaient pire que tout et j’étais même obligé d’utiliser les DNS de mon cher FAI précédent Nerim.
Puis j’en suis venu à utiliser OpenDNS, qui franchement est plus rapide et plus fiable. Pas grand chose à faire, juste rajouter 208.67.222.222 et 208.67.220.220 dans la configuration serveur dns primaire et secondaire de la connexion internet de son ordinateur ou de son routeur. Je sais également que certains utilisent OpenDNS pour leur serveur dédié.
En lisant cet article: Developing with OpenDNS, j’ai découvert encore un des avantages de OpenDNS: le « CacheCheck« .
Les caches des serveurs DNS se remettent à jour régulièrement en s’interrogeant les uns les autres, si bien que si une modification sur un nom de domaine est faite, celle-ci se propage au travers des différents serveurs DNS du monde pour refléter les changements effectués.
Cette propagation peut prendre un temps indéterminé allant de quelques instants à 48h, selon que l’on effectue la modification juste avant un rafraîchissement du cache ou pas et que la chaîne de propagation est plus ou moins longue jusqu’à votre serveur dns…
Et pendant ce temps (pouvant aller jusqu’à 48h), le développeur web qui vient de faire pointer son nom de domaine vers un nouvel hébergeur ou l’admin système ragent de ne pouvoir commencer à bosser sur son site et le tester immédiatement ou bien de tester la config de son serveur de mail…
Le CacheCheck de OpenDNS répond à ce problème et permet de demander un rafraîchissement immédiat des infos DNS pour un nom de domaine particulier. Ainsi si vous utilisez OpenDNS comme serveur dns pour votre connexion, le nouveau pointage dns de votre nom de domaine (nouveau ou pas) peut être mis à jour immédiatement et vous pouvez donc commencer à l’utiliser et travailler dessus sans latence.
Très pratique…
Lien: OpenDNS, CacheCheck
Source: Developing with OpenDNS | Scott Mallinson
SimpleXML chez 1and1
10/06/08
Envie de manipuler un peu de XML facilement avec SimpleXML en php, mais vous êtes hébergé en mutualisé chez 1and1.fr et vos scripts refusent de fonctionner… des interdictions dans tous les sens, des fonctions non prises en charges, l’impression d’être attaché avec des menottes dans le dos?
Voici la petite procédure à suivre:
D’abord il est probable que votre hébergement soit encore en php4 par défaut alors que php5 est installé. Or SimpleXML est une composante de php5.
Pour activer le support de php5, placer un fichier .htaccess dans votre dossier (où à la racine de votre site) avec dedans:
AddType x-mapp-php5 .php
AddHandler x-mapp-php5 .php
Cela permet d’activer l’interpréteur php5 pour les fichiers php.
Puis on se rend compte que la fonction simplexml_load_file a été désactivée car « la directive allow_url_fopen est sur Off dans la configuration de PHP ».
C’est bien dommage car cette fonction est très efficace pour charger un fichier xml en tant qu’objet xml. La FAQ de 1and1 conseille plutôt d’utiliser la fonction fsockopen (toute bridée) et implicitement de passer par simplexml_load_string ensuite. Ils donnent même un exemple bien poussif pour utiliser fsockopen chez 1and1. Il n’en reste que cette solution est bien trop lente et surtout bien trop lourde (en testant leur solution, charger un fichier xml en objet est à vue d’oeil 50 fois plus lent que par simplexml_load_file).
On va donc faire fit de cette solution et activer la directive allow_url_fopen = On. Il suffit pour cela d’ajouter un fichier php.ini dans le répertoire où s’exécutent vos scripts en mettant dedans la ligne
allow_url_fopen = On
Ainsi il est possible de charger un fichier distant avec simplexml_load_file.
Recommandations:
- Veillez à bien sécuriser vos scripts afin que l’on ne puisse utiliser à votre insu cette fonctionnalité pour charger du contenu ou des scripts.
- Et puis veillez à optimiser vos scripts pour qu’ils soient efficaces et qu’ils consomment le moins de ressources possible afin de ne pas vous faire taper sur les doigts (coupure du site, mise sur un serveur poubelle) par 1and1.
googleDrive
23/04/08
googleDrive est un petit projet expérimental qui n’a d’autre but que la faisabilité technique. Il s’agit d’un mash up de Google Maps avec du flash et du javascript permettant de conduire une petite voiture (à l’aide des flèches du clavier) dans les rues sur une carte générée par Google.
Vous pouvez, choisir votre carte en définissant la localité.
Lien: phatfusion : googleDrive