En effet, IE Tab n’est compatible que jusqu’à la version alpha de Firefox (3.6a1pre) :

La version finale étant sortie après, l’extension est incompatible. Inutile de modifier le fichier install.rdf car l’extension ne semble pas fonctionner avec la version 3.6 finale (cf.)… mais une solution existe.

Il suffit d’installer l’extension Corel IE Tab qui lui ressemble comme deux gouttes d’eau mais qui est compatible avec Firefox 3.6 :

Voilà qui devrait vous permettre de continuer d’utiliser le navigateur au panda roux tout en utilisant le rendu d’IE sur la dernière version de Firefox !

Installer Corel IE Tab

Article original écrit par Mr Xhark publié sur Blogmotion le 01/03/2010 | 3 commentaires |
Attention : l'intégralité de ce billet est protégée par la licence Creative Commons

Visible Tweets est un webservice permettant d’afficher de façon très agréable et orignale tous les tweets citant un mot ou un hashtag :

Cliquer ici pour avoir un exemple de rendu sur le mot « xhark ».

Comment l’utiliser ?

La meilleure façon d’utiliser le service est de vidéo-projeter un ordinateur sur un écran situé derrière le présentateur ou la scène de l’évènement. De cette façon le public peut activer participer et diffuser de l’information vis à vis de l’évènement sur Twitter qui sera automatiquement repris sur le « mur ».

Il faut dans ce cas prévoir une connexion internet WiFi (hotspot) pour permettre à tout le monde d’interagir avec un ordinateur ou smartphone.

Il permet également aux absents (ou retardataires) de participer indirectement à la conférence… sans compter ceux qui ne n’écoutent pas votre interminable discours et qui se laisseront bercer par l’affichage en douceur des tweets

Le rafraichissement est bien sûr automatique et le service est entièrement gratuit, sans restriction ni publicité. 3 effets de transitions sont disponibles via la barre de menu en haut et je dois dire que l’effet « tag gloud » est excellent ! Un simple navigateur web suffit et un flash permet de basculer le mur en plein écran. En cas de coupure réseau, le mur continue d’afficher les derniers tweets.

Il est certain que le service pourrait se doter de quelques options et se perfectionner, mais nous avons là un très bon outil, gratuit, fonctionnel et qui a tout à fait sa place dans le monde professionnel.

Espérons qu’il sera par exemple utilisé au prochain rendez-vous WIA. A éviter toutefois dans le monde éducatif si les participants s’amusent à pourrir le mur en associant des mots trash au hashtags, créant ainsi des trashtag ?

Pour plus d’informations sur cet outil rendez-vous sur le billet de Laurent La Salle qui en parle de façon un eu plus approfondie.

Article original écrit par Mr Xhark publié sur Blogmotion le 17/01/2010 | 3 commentaires |
Attention : l'intégralité de ce billet est protégée par la licence Creative Commons

Ce que j’apprécie sur HTML-ipsum c’est la mise en page :

Plusieurs type de mise en forme sont disponibles : paragraphe, liste (non)ordonnée, phrase, etc.

Un clic sur le titre (« long paragraph », etc.) permet de copier directement le contenu au format HTML dans le presse-papier (tous navigateurs supportés, grâce à flash).

Voir également le Lorum Ipsum multilangue ou encore l’équivalent français à HTML-ipsum.

HTML-ipsum

Article original écrit par Mr Xhark publié sur Blogmotion le 28/07/2009 | 5 commentaires |
Attention : l'intégralité de ce billet est protégée par la licence Creative Commons

Actuellement en bêta, il supporte la simulation de Internet Explorer 6 et 7, sur Firefox 2 et 3 (Mac OS X et Windows) et Safari 3.x (Mac OS X).

Il est possible de créer plusieurs profils de simulation, appelées browser sets, avec pour chacune un ou plusieurs navigateurs :

Il vous suffit ensuite d’entrer l’url du site à vérifier, puis de patienter :

Le résultat est exploitable sous plusieurs vues. La vue côte à côte verrouille les ascenseurs, ce qui permet de comparer facilement la différence entre deux rendus :

« Union skin view » permet de superposer deux rendus, utile pour se rendre compte des décallages de quelques pixels (lire le billet « Mieux comprendre le rendu par défaut des éléments HTML« ).

D’après ce que j’ai pu lire, une extension de simulation de rendu directement dans Dreamweaver CS4 est d’ores et déjà disponible.

Vous vous en doutiez, l’outil est à 100% en flash Espérons qu’il reste accessible et ouvert à tous, mais cela ne semble pas vraiment être ce que souhaite Adobe.

Voilà un outil qui complètera fort bien les solutions de rendu que j’ai déjà pu vous présenter au fil du temps : Scapture, CrossBrowserTesting ou encore Browsershots.

BrowserLab -Wiki – Explications d’Adobe

Article original écrit par Mr Xhark publié sur Blogmotion le 03/06/2009 | 3 commentaires |
Attention : l'intégralité de ce billet est protégée par la licence Creative Commons

Ce service permet de visualiser le rendu d’un site, blog ou tout simplement d’une page sur plusieurs navigateurs que peuvent utiliser vos visiteurs.

Les captures sont générées à partir un système d’exploitation en ligne Linux.

Vous pouvez tester le rendu d’un site sur plusieurs navigateurs : Firefox 1/2/3, Konqueror, Opera, Hv3, Links (mode graphisme ou texte), Dillo ainsi que Lynx.

Plusieurs résolutions sont disponibles, avec pour chacune un appareil l’utilisant :

C’est une bonne idée, mais il faudrait cependant ajouter de nombreuses autres résolutions pour rendre le service complet

La génération d’une capture est relativement rapide et ne dépasse rarement 2 minutes. D’autres informations sont données avec la capture, détail des requêtes HTTP, poids de la page, nombre de requêtes, code de retour du serveur, etc. :

Pour voir un exemple de capture de Blogmotion cliquez-ici.

N’hésitez pas à faire dans la section « Liens » qui comporte quelques adresses sympa, mais également dans la section « Articles« . Une section « Archive » permet de retrouver une ancienne capture sans devoir la regénérer ainsi qu’une section « Historique » qui permet de lister toutes les captures déjà générées pour un site.

Le service existe depuis le mois d’Avril 2008 et basé sur un serveur RPS OVH (France), une version anglaise est disponible.

Pour toutes les autres questions sans réponses que vous pourrez vous poser, je vous invite à aller lire la FAQ.

Note : si l’auteur passe par là, je serai intéressé pour qu’il en dise un peu plus sur l’aspect technique et la façon de générer ces captures ?

Scapture

Article original écrit par Mr Xhark publié sur Blogmotion le 31/05/2009 | 3 commentaires |
Attention : l'intégralité de ce billet est protégée par la licence Creative Commons

Je vous présentais il y a presque un an une solution de visualisation de rendu multiple, grâce au site Browsershots. Ce site fonctionne toujours, de nombreux navigateurs sont d’ailleurs ajoutés au fil du temps.

Un des inconvénients de Browsershots est le temps d’attente pour la génération d’un rendu. Il est absolument inenvisageable de modifier une ligne de votre CSS et de visualiser l’impact rapidement.

J’ai découvert récemment un réel système de virtualisation de systèmes d’exploitation en ligne qui fonctionne parfaitement bien : CrossBrowserTesting !

CrossBrowserTesting vous permet au travers un applet Java de vous connecter réellement sur une machine distante pouvant fonctionner sous :

• Windows : 98 SE, XP (home) SP2, Vista, Seven (bêta)
• Mac : OS 10.5
• Linux : Ubuntu 8.10

Sur chacun des OS est installé une quantité impressionnante de navigateurs, généralement avec plusieurs versions disponibles. Les versions du player flash varient suivant les configurations, de même que la résolution, au choix sur tous les OS comme en témoigne cette capture :

Le service est gratuit avec une durée maximale de 5 minutes par session, ce qui suffit généralement pour un simple test, vous serez par contre peut-être en liste d’attente le temps d’un slot se libère (c’est la seule limitation). Passée ces 5 minutes vous pouvez à nouveau recommencer autant de fois que vous le souhaitez (en testant le soir je n’ai jamais attendu plus que 2 secondes à cause du décalage horaire sûrement…). L’applet Java vous permet de faire des captures d’écran (« snapshot ») qui sont ensuite disponibles dans votre espace membre :

Deux versions payantes sont également disponibles : une version pro qui vous coutera 19.95$/mois (29.95$ le premier mois) pour un temps total de connexion illimité (limité à 30 minutes par session et à 40 sessions/mois) ainsi qu’une version « home/infrequent user » à partir de laquelle plusieurs forfaits de crédits sont proposés : 1 crédit = 5min, il vous en coûtera 20$ pour 2h30 de connexion (forfaits dégressifs).

En plus de l’applet Java, CrossBrowserTesting vous permet d’utiliser un client VNC (option en version bêta). Il est préconisé d’utiliser TightVNC pour Windows et Chicken sur Mac. Personnellement je n’utilise que UltraVNC Viewer qui a l’avantage d’être parfaitement compatible avec tous les protocoles VNC

On vous donnera alors un couple de port / mot de passe de connexion à préciser dans votre client :

Je trouve dommage que dans la version payante « home » les 5 minutes de sessions ne soient pas indivisibles, car à ce rythme le crédit part vite, très vite (il suffit d’avoir sa connexion internet qui plante en utilisant l’applet Java, pour VNC vous pourrez vous reconnecter).

Merci à Mike de l’équipe de CrossBrowserTesting de m’avoir crédité gratuitement mon compte de quelques dollars pour que je fasse mes tests et rédige ce billet. Voici en retour ma liste de bugs rencontrés :

• problème sur certains caractères non alpha-numériques (dont le « . ») sur les claviers AZERTY français (ils correspondent aux caractères des claviers QWERTY)
• si l’on tape trop vite (valable en Java et VNC) des caractères non entrés s’insèrent entre les lettres (un champ « send text » dans l’applet Java permet de contourner le bug)
• pas de timer pour le temps restant en connexion VNC (ça coupe brusquement quand le temps est écoulé), cela reste toutefois un défi technique pour eux vu que le protocole VNC ne prévoit pas ce genre de fonctionnalités

Malgrès cela je dois dire que je suis époustouflé par la fiabilité et l’automatisation du système ! Tout semble fonctionner sur des images Vmware qui sont montées à la volée à la demande de chaque utilisateur (d’où certaines restrictions techniques), tout comme l’ouverture de connexion sur un port aléatoire associé à un mot de passe généré.

Les images Vmware étant montées à la volée, vous pouvez faire autant de modifications que vous le souhaitez (voir foutre en l’air le système), une fois la session terminée tout disparaîtra (n’espérez pas récupérer un document placé sur le bureau ou dans « mes documents » !).

Le concept fonctionne bien et justifie parfaitement l’existence d’offres payantes. Je suis tout de même curieux de connaître la charge maximale (limite d’accueil de connexions simultanées) en cas d’affluence d’une telle architecture. Une fois que le site sera populaire j’imagine que la chance pour se connecter en compte gratuit sera relativement faible, et l’attente très looooongue.

Alors courez sur CrossBrowserTesting tant que c’est pas trop connu

Article original écrit par Mr Xhark publié sur Blogmotion le 24/03/2009 | Un commentaire |
Attention : l'intégralité de ce billet est protégée par la licence Creative Commons

• polices et tailles de polices
• paddings
• margins
• couleurs
• tableaux
• listes
• blockquotes
• etc.

Le framework est en fait composé d’un seul et unique fichier CSS que vous pouvez utilisé comme base lors de l’élaboration d’un site web. Il permet d’effectuer un reset de certaines proprietés CSS permettant d’obtenir un rendu identique (ou presque) sous tous les navigateurs.

Oubliez les galères d’alignement et le décallages CSS pour rendre vos formulaires lisibles et esthétiques, SenCSs s’occupe de tout ! Les polices utilisées dans le framework vous permettront d’obtenir un rendu quasi identique quel que soit votre système d’exploitation (Windows, Linux, Mac).

Un bon exemple valant mieux qu’un court discours il vous suffit d’aller sur la page d’exemple HTML de SenCSs pour vous en rendre compte par vous même, pensez à analyser la source pour vous en rendre compte.

Voilà de quoi convertir tous les grincheux aux standards CSS et brosser tous les puristes dans le sens du poil Je vous invite par ailleurs à lire également ce billet de Emmanuel Georjon qui traite de trois framework CSS.

Site Officiel de SenCSs
Projet sur Google Code

Article original écrit par Mr Xhark publié sur Blogmotion le 26/01/2009 | 6 commentaires |
Attention : l'intégralité de ce billet est protégée par la licence Creative Commons

Pour visualiser le rendu de votre navigateur je vous propose cet outil de Julien Royer :

Prenons par exemple l’élément « blockquote » :

• Mozilla Firefox, margin : 16px 40px
• Internet Explorer, margin : 19px 40px

3px de différence ! Peut-être allez-vous me dire que je suis perfectionniste ? Mais sur un design ou tout est millimétré cette différence peut avoir son importance.

En complément d’information de ce billet je vous conseille (si nous n’étions pas en démocratie je vous y forcerai ) de lire un billet de Gilles Vauvarin sur les (ré)initialisations CSS (reset) qui permettent de pallier à ses différences d’interprétation. En effet, il existe de nombreuses (mauvaises) méthodes de « reset », vous comprendrez les rouages et éviterez de reproduire ces erreurs dont certaines sont argumentées par le W3C.

A lire également : « Rendu par défaut des éléments HTML » et « Reset CSS, une technique à manier avec précaution« , deux billets Alsacreations dont le créateur n’est autre que Raphael Goetter, cador des temps moderne du CSS

Vous souciez-vous de ces différences (avant de lire ce billet) ? ou bien préferiez vous négliger les utilisateurs qui n’utiliseraient pas votre navigateur favoris ? Les commentaires sont ouverts.

Article original écrit par Mr Xhark publié sur Blogmotion le 30/11/2008 | 9 commentaires |
Attention : l'intégralité de ce billet est protégée par la licence Creative Commons