Dans je passe du temps à essayer de comprendre la subtilité des propriétés CSS mais qui ne sont pas implémentées de la même manière dans tous les navigateurs ; voici quelques ressources intéréssantes :

• Mise en page CSS avancée grâce à la propriété display – Alsacréation
• La propriété CSS display: inline-block – chez Jérémie
• Inline-block dans tous les navigateurs modernes? – Florent Verschelde
• Everything you Know about Clearfix is Wrong – Thierry Koblentz
• The display declaration – Quirksmode
• What is Inline-Block? – Impressive Webs

Un peu de overflow:hidden, un peu de display:inline-block, des petites techniques qui semblent bien fonctionner.

Articles similaires :

1. YAML Debug : Un nouvel outil pour l’intégration web
2. Développement CSS3 compatible multi-navigateurs avec Modernizr et eCSStender

Le principe d’Instant Blueprint se décline en 5 points :

1. Indiquer le nom du projet
2. Sélectionner le DOCTYPE et la librairie JavaScript
3. Indiquer tous les tags d’id désirés
4. Choisir une extension pour le fichier index
5. Et euh… soumettre le formulaire

Voilà, un zip avec tout dedans, on gagne dix minutes pour un truc qu’on aurait pu faire à la main. Pratique, pas pratique ; je ne sais pas. Toujours bon à prendre en tous les cas.

Voir Instant Blueprint.

Articles similaires :

1. Easy, un FrameWork CSS/HTML/JavaScript
2. EZ-CSS, FrameWork CSS qui peut le moins peut le plus
3. OpenFaces, un FrameWork ajax
4. YAML, le FrameWork CSS, sort sa version 3.2
5. CSS FrameWork : Scaffold pour le développement rapide

Voici, les 10 principes en or pour le développement d’applications web par Fred Wilson :

1. Rapidité
2. Utilité immédiate du service
3. Le logiciel est le média
4. Le moins est plus
5. Programmable (par des développeurs)
6. Facile d’adoption (par des développeurs)
7. Architecture REST
8. Visible dans les moteurs de recherche
9. Propre
10. Ludique

Encore une fois, on a l’impression qu’une Web App doit ressembler à une interface de jeu vidéo. Pourquoi pas ? Mais c’est quand même l’utilité d’un service, la possibilité de le modifier, la cohérence de son architecture qui feront son succès.

Lire Fred Wilson’s 10 Golden Principles of Successful Web Apps.

Articles similaires :

1. Tester ses applications pour iPhone et iPad
2. CSS FrameWork : Scaffold pour le développement rapide
3. Applications web accessible
4. Rosemary, gestion de filtres pour le développement CSS
5. 5 éditeurs de texte riche WYSIWYG pour applications web

Voici une liste de 8 outils permettant de mesurer l’accessibilité de ses sites :

• Color Blindness Simulator
• Juicy Studios Image Analyzer
• Firefox Accessibility Extension
• Test and Improve Readability
• LinkPatch
• WAVE
• AccessColor
• aDesigner

Tester l’accessibilité, c’est tester la structure du code mais aussi les contrastes, les couleurs, l’intelligibilité des textes…

Articles similaires :

1. Tester ses applications pour iPhone et iPad
2. Magento SEO – optimisez le référencement de votre site E-commerce
3. Tests multinavigateurs – tester sous IE
4. Outils de recherche web
5. RMLL Accessibilité des CMS

Consultez Sébastien Delorme pour une description plus complète, Transcription de vidéos et référencement :

Les enjeux et utilisations de la transcription automatique peuvent être nombreux et enrichir considérablement l’expérience utilisateur. Dès lors qu’il est possible de transcrire automatiquement une vidéo, il est tout à fait envisageable de :

• Proposer des sous-titres de façon automatique ;
• Fournir automatique une traduction ou des sous-titres traduits (c’est par exemple le cas sur Youtube avec l’utilisation de Google Translate sur les sous-titres, même si les traductions sont encore très imparfaites) ;
• Indexer les contenus vidéos dans les moteurs de recherche (ce que propose justement Exalead sur Voxalead France 24 où il est possible de rechercher des vidéos en fonction de leurs contenus);
• Proposer des fonctionnalités de recherche au sein de contenus vidéos (également possible sur Voxalead France 24);
• …

Voyez aussi un billet de Mikiane sur le sujet, Démo: inauguration de la transcription automatique des programmes TV/video live :

A court terme, cette technologie peut grandement améliorer le référencement de nos contenus. Elle offre un meilleur confort de lecture quand l’audio pose des difficultés et en particulier pour les malentendants. Enfin, elle peut être une aide potentielle dans le cadre de l’apprentissage des langues.

Bien entendu, rien ne surpassera jamais une transcription manuelle, plus pertinente, surtout pour les traductions. Cependant, tant que l’homme restera une grosse faignasse, ce genre de solution restera un bon support par défaut.

Articles similaires :

1. Intégration video : tags et sous titres
2. TYPO3 V4 – les tutoriaux vidéos pour éditeurs
3. La BBC maîtresse des titres consistants

Le principe est de copier/coller des blocs prêt à l’emploi dans des containers. J’ai une zone de contenu que je veux diviser en 3, je copie le code pour 3 colonnes et je le colle dans mon container et ainsi de suite à l’infini.

Le fichier CSS ne comprend que le code pour diviser une zone en x colonnes et les faire flotter dans le bon ordre. L’auteur a ajouté quelques lignes pour la compatibilité multi-navigateurs (IE) et le tour est joué.

EZ-CSS se montre très pratique pour la division rapide des zones de contenus de sa page. Justement, EZ-CSS propose une version encore plus basique spécialement dédiée au prototypage.

C’est Jean-Paul du marketing que vous pouvez impressionner avec un site plus vrai que nature. Enfin, faites gaffe quand même, il va croire que le boulot est terminé.

EZ-CSS est un FrameWork a montrer aux quarantenaires développant encore en tableau et à utiliser pour les mises en page à réaliser rapidement.

Voir EZ-CSS – FrameWork CSS.

Articles similaires :

1. Easy, un FrameWork CSS/HTML/JavaScript
2. TYPO3 : un FrameWork pour TemplaVoila
3. Instant Blueprint, FrameWork CSS express
4. OpenFaces, un FrameWork ajax
5. Les références du FrameWork CSS Markercss

On rappelle : avec une librairie de graphe, il est possible à l’aide d’une petite ligne de code en JavaScript et quelques paramètres, d’afficher ses plus belles courbes ou ses plus beaux histogrammes. Les librairies de graphes en JavaScript sont de bonnes alternatives à Flash.

Quelles sont les particularités de Grafico ?

• Sélection automatique de la meilleure échelle pour l’affichage
• Intégration d’informations relatives aux points ou zones des graphes
• Affichage (éventuel) de la moyenne
• Personnalisation des graphes avec affichage d’un logo en fond

Grafico affiche de beaux graphes. si on lit bien la page de leur site, on note que la librairie est plutôt lente sous le navigateur Opéra. Ces mauvaises performances ne sont pas pour aider à son adoption.

Grafico ne semble pas se démarquer spécifiquement de ses concurrents ; mais dans le domaine des librairies de graphes, on remarque qu’elle n’affichent pas toutes le même type de graphes dans les même conditions.

A retenir de Graphico, une librairie javaScript basée sur prototype.js affichant des courbes et des histogrammes avec les échelles en abscisses et en ordonnées.

Voir Grafico.

Articles similaires :

1. eCSStender : une librarie JavaScript pour prendre le contrôle de vos CSS
2. Graphiques (Charts) avec JavaScript
3. Cartographer, librairie JavaScript pour associer des graphiques à Google Map
4. Easy, un FrameWork CSS/HTML/JavaScript
5. dygraphs JavaScript Visualization Library

Si vous avez suivi les commentaires (off) de Steve Jobs : Flash a un taux de pénétration du marché très important (98%) sur les machines utilisateurs (donc on diffuse de la vidéo dans un lecteur flash sans souci de format de la vidéo) ; mais flash fait travailler votre processeur à fond les ballons et donc ralentit votre machine.

L’arrivée d’HTML5 sur les plus gros navigateurs du marché permet de se passer des lecteurs en flash. Sauf qu’en passant par HTML5, la lecture de la vidéo dépend des codecs (codeurs-décodeurs) présent sur votre machine. On peut se passer d’un lecteur Flash, mais il faut que le navigateur ait le droit de lire ces codecs.

A ce propos, Firefox et Opéra ont choisi de lire des codecs libres (ogg), pas très performants. Google (chrome) et Safari (apple) permettent la lecture de h264 qui n’est pas libre mais dont ils ont les brevets (malins les américains, pas evil mais presques).

Par la fermeture de format, Apple attaque, non seulement Adobe et le plugin flash, mais aussi Mozilla et les navigateurs Libres. C’est vraiment pas bien du tout.

Les développeurs HTML pour le moment comment qu’on fait. Pour avoir un aperçu, une solution possible, il faut visiter cette page : Video for Everybody!.

Video for Everybody is simply a chunk of HTML code that embeds a video into a website using the HTML5 element, falling back to QuickTime and Flash automatically, without the use of JavaScript or browser-sniffing. It therefore works in RSS readers (no JavaScript), on the iPhone / iPad (don’t support Flash) and on many, many browsers and platforms.

Video for Everybody! propose un système de fall back ; en français, ça veut dire que quand un média ne passe pas (pas compatible), on en lit un autre par défaut. Il est possible de le faire plusieurs fois, en cascade.

Pour la vidéo, le fallback est ainsi fait :

1. Si j’ai Firefox (>3.5) ou Opera, je lis la balise avec le format ogg (codec theora)
2. Si j’ai chrome ou safari, je lis la balise avec le format mp4 (codec h264)
3. Si mon navigateur ne peut pas lire HTML5, et que quicktime est installé, je lis le fichier avec quicktime
4. Si mon navigateur ne peut pas lire HTML5, et que quicktime n’est pas installé, je lis le fichier dans un player flash

Si tu n’a pas quicktime, pas flash et pas HTML5, tant pis pour toi. A part ça, on notera deux avantages :

1. Pas de pages spécifiques à visiter pour voir une vidéo, on lit la vidéo quel que qoit son navigateur
2. Pas de détection de navigateur avec JavaScript, qui est lourd et pas beau

Mais elle présente deux soucis.

1. Le code est un peu long à implémenter, pas facile de s’y retrouver
2. L’éditeur doit compresser ses vidéos dans les deux formats que sont ogg et mp4 (h264)

Video for Everybody! propose un code prêt à l’emploi pour afficher de la vidéo à tous les visiteurs de votre site. Cependant, il ne résout pas le problème de fond concernant la nécessité d’avoir une vidéo encodée dans deux formats différents. Oui, les brevets c’est n’importe quoi, c’est pas écolo.

Articles similaires :

1. HTML5 et la vidéo, Open Standard Media Player
2. Le futur avec HTML5 par Bruce Lawson
3. Humble Finance: graphiques dynamiques avec HTML5
4. Intégration video : tags et sous titres
5. Les outils indispensables pour le HTML5 et le CSS3

Durant ces dernière années, on avait cru à la mise en place des outils collaboratifs au sein des entreprises afin de pouvoir échanger notre travail et générer de l’émulation au sein des équipes. Si certaines entreprises ont investi dans ces sytèmes ce fut au prix de lourdes formations ou par embauche de personnels éduqués à leur utilisation. Pour les autres, l’e-mail reste le moyen d’envoyer notes et demandes sans forme, ni organisation : « à faire, ASAP ! ».

Le mythe de l’entreprise 2.0 dans lequel la veille des un soutient la recherche et le développement des autres (et inversement), s’est envolé pour nombre de sociétés. Difficile passage d’une organisation « délégative » à une une organisation « intégrative » dans une société capitaliste dirigée par les (non) lois du marché.

La semaine dernière l’iPad d’Apple s’est imposé à la une des quotidiens du monde entier. Les critiques semblent aller quasiment toutes dans le même sens : rien de révolutionnaire, mais le concept va (malheureusement) plaire et s’imposer. Apple propose un outil performant de consultation sur lequel les utilisateurs pourront accéder à du contenu privilégié.

Dans sa comparaison entre le L’iPad d’Apple et le Kindle D’Amazon (Kind(le) of a(n I)pad : du passé faisons tablette rase), Olivier Ertzscheid note les caractéristiques de ces nouveaux outils en insistant sur le principe de :

• lecture intensive (Kindle – nombre limité de contenu, achat de documents), et de,
• lecture extensive (iPad – nombre illimité de contenu, documents gratuits plus documents payants)

Au détail près que l’iPad, tout comme l’iPhone, n’est pas aussi ouvert qu’il le devrait. En effet, la tablette Apple reproduit le modèle de l’iPod et de l’iPhone avec le passage quasi obligatoire ou naturel par le magasin de la société Apple. Comme le note André Gunthert (L’iPad ou la consultation) :

L’objet révèle l’abandon de la fiction du user generated content et raconte le retour des contenus numériques dans l’ample sein des industries culturelles. De l’ancien programme du web 2.0, dans quelques années, il ne restera finalement que la pratique photo, la conversation des réseaux sociaux, et une touche de search.

Sur ce commentaire, Narvic propose une vision d’époque sur la liquidation du concept du web 2.0 (contenu généré par les utilisateurs) par les grandes sociétés. Voici, ce qu’on peut analyser de la stratégie de Steve Jobs et de ses confrères :

De surcroît, si j’ai bien compris où tout cela nous menait, vu la tournure que prennent les choses aujourd’hui : la librairie (le marché du livre) est en passe de supplanter en ligne la bibliothèque (l’accès libre à la culture). Tous les ouvrages récents, encore couverts par le droit d’auteur, qui me sont aujourd’hui accessibles gratuitement à la bibliothèque municipale de prêt de mon quartier, ne me seront pas accessibles en ligne dans les mêmes conditions avant qu’ils ne « tombent » dans le domaine public. C’est donc encore le supermarché qui gagne et la bibliothèque universelle attendra, si elle arrive jamais !

Ça fait, mal, très mal, les jeunes générations ont-elles été formées à consommer et s’amuser ?

Non seulement internet, comme « nouvel espace public électronique démocratique et planétaire » (S. Proulx), comme lieu d’épanouissement de l’expression de la créativité personnelle (le « Web 2.0 »), comme lieu de culture ouvert à tous (la « bibliothèque universelle »), vire largement au supermarché, mais il se révèle aussi plus qu’autre chose comme un vaste espace du purs loisirs même pas créatifs, une sorte de grande salle de jeux pour adolescents immatures.

Dans mon quotidien, je suis personnellement témoin de ce phénomène. Films grands spectacles, consoles de jeux, applications iPhone et petit journal, les conversations sont peu nourries par l’argumentation et la nécessité d’actions volontaires dans le monde qui nous entoure.

Tout de même, malgré la main mise des institutions privées sur notre organisation social ; il ne faut pas préjuger des capacités des jeunes générations et de leur nécessité de liberté. Je partage l’analyse de Narvic, je suis très inquiet sur le pouvoir des intérêts privés, mais je ne m’avancerai pas sur l’adoption et l’acceptation par les utilisateurs à la vue des incertitudes sur l’avenir de notre société.

Articles similaires :

1. L’homme multitâche est un mythe
2. Bibliothèque numérique mondiale
3. Hacker IE, forcer l’interprétation CSS3

La lightbox est très appréciée des concepteurs car elle permet de procéder à certaines configurations ou téléchargerments de fichiers sans quitter la page active. Cette fonctionnalité est une sorte de terrain d’entente entre les clients et les intégrateurs. Son utilisation n’est pas toujours du meilleur effet, mais elle remplace, de manière plus conforme aux règles de l’utilisabilité, la célèbre popup.

Pour éviter l’ouverture de nouvelles fenêtres, les intégrateurs pourront utiliser ColorBox. Respectant les règles du W3C, légère, gérant le préchargement d’images, les fondus, permettant les callbacks (…), cette fonctionnalité peut se révéler un solide avantage dans la réalisation de ses pages.

Découvrez ColorBox – A light-weight, customizable lightbox plugin for jQuery 1.3 and 1.4.

Articles similaires :

1. jQuery Accessible RIA : fonctionnalités jQuery accessibles
2. TYPO3 – galerie d’images : LightBox et FancyBox
3. Roundabout, plugin jQuery pour la rotation axiale d’éléments
4. Plugin jQuery : tablesorter
5. jQuery : plugin ARIA