Babozor’s Blog

Lors de mon errance nocturne sur le web, je suis tombé sur cet article assez intéressant (enfin en tout cas au premier abord) sur les 5 éléments HTML que nous n’utilisons probablement pas.
L’article parle en l’occurrence de tags pour certains obscures ou méconnus, mais certains s’avèrent plutôt pratiques.

1. le tag address
Comme son nom l’indique c’est pour tagger une adresse (postale) de quelqu’un. Franchement je vois pas trop l’intérêt… peut être pour une meilleure indexation… passons

2. le tag q (ou quote, c’est à dire citation). Là c’est déjà plus pratique… même si ça reste anecdoctique.

3. le tag optgroup. Là c’est vraiment plus intéressant, cela permet de regrouper divers options dans un tag select… là je dois dire très très pratique…

4. le tag acronym ou abbr permet de mettre un sous titre à un mot (en gros expliciter une abbrévaiation par exemple)… ouais ça peut se révéler pratique, mais sans plus

5. enfin fieldset permet de regrouper plusieurs éléments d’un formulaire.

Bon je dois avouer que sur les 5, deux me paraissent intéressants, deux ne servent pas à grand chose, et le dernier est moyennement intéressant, mais bon au moins ce soir, je me coucherais un peu moins idiot (encore que)

Après une certaine attente, après son acquisition par Google, nous pouvons enfin tester de fond en comble Writely.
Beaucoup de posts ont déjà été fait sur l’ouverture attendue et annoncée de Writely, en effet, Google étend son offre WebOffice, après Gmail (WebMail), Spreasheet (tableur) et Calendar… sa suite bureautique s’étoffe.

Donc la question est la suivante: Writely est elle une alternative valable à une suite bureautique classique, telle que MS Office ou encore OpenOffice?
Nous allons donc tenter de faire un tour assez complet des fonctionnalités de Writely

1. la gestion des fichiers
La gestion des fichiers ne dérouteront pas les utilisateurs assidus de Gmail, il en reprend le principe. Vos documents peuvent avoir certains attributs: Actif, Star, Tagé, A la poubelle…
On peut donc y accéder via les onglets correspondant.
Le principe est éprouvé depuis Gmail, ça marche, c’est intuitif, mais risque d’embrouiller certains quand on commence à manipuler un garnd nombre de fichiers si on ne tag pas correctement tous ses documents.

2. Import / création des fichiers
Plusieurs moyens pour ajouter des fichiers à writely:
- créer un nouveau fichier directement à partir de writely, en lui donnant un nom (c’est l’option la plus naturelle)
- uploader un fichier, là aussi rien de vraiment révolutionnaire, malgré que la taille des fichiers uploadés soit limité à 500Ko pour les fichiers textes et 2Mo pour les images, les formats acceptés sont les plus standard: fichiers textes, MS Word (doc et rtf) et OpenOffice (odt et sxw). On regrette de ne pouvoir uploader plusieurs fichiers en même temps ou même tout un dossier, mais bon on s’en contente pour l’instant.
- fonction Email-In. Là on touche à une fonction intéressante. On peut emailer un contenu à writely qui l’intègre directement. Un email unique nous est attribué du type xxxxx@prod.writely.com. On peut l’utiliser de deux manières différentes. On écrit un texte dans le mail, le sujet du mail devient alors le titre du document et le corps du mail le contenu du document. J’ai essayé ça marche vraiment bien, c’est super pratique et bien fait.
On peut aussi envoyer un fichier attaché (document texte ou image, avec les même restrictions de poids que pour l’upload).
A chaque réception et convertion de document, un récépissé est reçu sur notre mail Gmail… c’est vraiment un plus de ce service.

3. l’édition des fichiers
Bon l’édition du fichier en lui même est somme toute classique mais bien faite. Il y a l’essentiel, on peut à peu près tout faire.
Il y a même un correcteur orthographique, mais qui pour l’instant n’est qu’en anglais.
C’est propre, il manque certaines choses principalement pour de la mise en forme, mais rien de dramatique. Il y a tout ce qu’il faut pour traiter 90% des demandes en matière de traitement de texte

4. sauvegarde / export
Il est évidement possible de sauver son travail, ou de l’exporter.
L’export est possible vers les formats standard: HTML, Rtf, Word, OpenOffice et PDF… voilà qui est intéressant.

5. la collaboration
C’est un des points intéressant de writely, il vous permet de donner accès à vos docuements, en lecture, mais aussi en écriture/modification.
Pour cela rien de plus facile, vous avez juste à inviter votre contact en rentrant son email et hop le tour est joué.
Vous pouvez rendre un document complètement publique ou accessible à seulement certaines personnes.
Je pense que c’est la clef de ce genre d’applications… la collaboration.

6. les options
Comme vous le voyez les options disponibles sont sommaires…
Des options de mailing, changer son pseudo ou son mot de passe.
Rien de trop, de toute façon le reste est configurable dans l’interface et dépend principalement du document, donc… pas besoin de surcharger le panneau d’options avec moult options inutiles.

7. la publication
L’option de publication vous permet de rendre le document publique, en fait writely le convertit en HTML et le laisse disponible à une adresse du type http://www.writely.com/View.aspx?docid=xxxxxx
Vous pouvez aussi décider de restreindre la publication à vos collborateurs.
Bien pratique pour faire valider un document…

8. les corrections
Vous pouvez accéder à tout moment à la liste des corrections qui ont été faites, la date, la personne qui a effectuée ces corrections et enfin les zones concernées par ces corrections.
Indispensable quand on pense cet outil comme un outil collaboratif.

Conclusion
Après un test de quelques heures, je n’ai pas vraiment pu metter en défaut Writely, qui est un bon outil bien conçu et avec quelques options bien pensées et qui risquent de nous rendre très vite accro.
Il manque encore quelques options de mise en forme, de tableau, bordures, etc… mais je ne doute pas que ces options viendront.
Idem pour le vérificateur d’orthographe en anglais uniquement.
Ce sont sans aucun doute les deux seuls défauts que j’ai réussi à trouver (d’autres en trouveront par la suite j’en suis sur)…
C’est un service très séduisant et qui mérite d’être testé plus en profondeur, en tout cas comme ça à première vue, je suis assez preneur!

Il y a quelques semaines, mon pote Thibault est passé me voir pour que je le brief un petit peu sur les opérations bit à bit.
Ces opérations ne sont pas des plus compréhensibles (pour le commun des mortels), mais peuvent rendre de grands services.
Leurs utilisations (la liste est loin d’être exhaustive…):
- masquage
- cryptage (simpliste)
- extraction de données
- etc…

Je vais donc essayer de faire un récapitulatif simple et précis, avec quelques exemples.
Nous allons décrire ici les fonctions associées au opérations bit à bit en PHP, mais ces opérations sont valables dans tous les langages de programmations standard (seuls les noms des fonctions et la syntaxe risque de changer, le principe de base reste le même).
Vous trouverez une référence à ces fonctions ici:
http://www.php.net/manual/en/language.operators.bitwise.php
ou ici pour la version française:
http://www.php.net/manual/fr/language.operators.bitwise.php

Opérations de comparaison
Il y a 4 opérations de comparaisons bit à bit:

- AND (ET)
Permet de faire une addition bit à bit de deux données.
Il faut que les deux données soit à 1 pour que le résultat soit à 1.
exemple:
A = 0110 1101
B = 1101 1001
donc si C = A & B
C = 0100 1001

- OR (OU ou OU inclusif)
Ou inclusif, si une des deux variables est a un, le résultat est à un.
On reprend les mêmes variables
C = A | B
C = 1111 1101

- XOR (OU exclusif)
Ou inclusif, une seule des deux variables doit être a un, pour que le résulat soit à un.
C = A ^ B
C = 1011 0100

- NOT (Inverse - Non)
Si la variable est à 1 le résultat est égal à 0 et inversement
C = ~ A
C = 1001 0010

Opérations de décalage
il y a deux opérations de décalage:

- décalage vers la droite
permet de diviser un chiffre par deux, décale tous les bits d’un emplacement vers la droite.
exemple:
C >> A
C = 0011 0110

- décalage vers la gauche
permet de multiplier un chiffre par deux, décale tous les bits d’un emplacement vers la gauche.
exemple:
C << A
C = 1101 1010

Voila le principe général.
Vous voyez rien de bien compliqué…
J’essayerais dans une deuxième partie, de prouver par l’exemple en quoi ces opérations sont intéressantes.

Une des principales caractéristiques du CSS qui malheureusement est trop peu méconnue et trop peu utilisée est l’héritage.
Pour résumer, les déclarations des fils héritent des propriétés du père.
Ce n’est malheureusement pas aussi simple que ça, mais ça résume bien l’intention.
Par nature, le langage HTML est un langage arborescent… en voici un petit exemple:

Si par exemple j’écris la délcaration suivante:

body {color:#B6B6B6;}

Tous les éléments fils du tag Body reprendront la même propriété, c’est à dire un texte en gris.
De même si je veux que mes éléments de ma deuxième liste soit en rouge, je peux écrire ceci:

ol {color:#FF0000;}

Pas besoin de préciser la couleur pour les éléments LI qui sont les fils de OL puisque ceux ci ont hérité de ses propriétés.

C’est extrèmement pratique.
Par exemple, vous voulez que tous les textes de votre page soit en Arial 12 pixels noir ?
Pas de problème, vous avez juste à spécifier la déclaration suivante:

body {font-family: Arial, sans-serif; font-size: 12px; color: #000000;}

Bien sûr, il y a quelques exceptions et ennuis, sinon ce serait beaucoup trop simple (et aussi vachement moins rigolo).
Toutes les propriétés ne sont pas hérités pour des raisons évidentes. Ces propriétés sont: les bordures (border), les marges (margin), les espacements (padding), les arrières plans (background).
La raison est évidente, si vous spécifiez un padding de 30 pour votre tag body (pour le contenu de la page soit espacé de 30 pixels par rapports à la taille réel du navigateur), si cette propriété est héritée, tous les autres éléments seront espacés de 30 pixels, pas très pratique…
Un autre problème peut venir de la non propagation des styles hérités dans les tableaux. IE4 & 5 et Navigator 4 ne propagent pas les styles dans les tableaux, certains navigateurs propagent une partie des styles (par exemple la famille de police et la couleur, mais pas la taille)… une manière de contourner ça est d’inclure les tableaux dans une déclaration globale de ce type:
body, table, th, td {font-size: 12px;}
Il est à noté aussi que si vous effectuez cette déclaration en utilisant des valeurs proportionnelles, certains problèmes peuvent apparaître. En effet, pour les navigateurs de nouvelle génération (IE6+, N6+, Ff1+), les propriétés sont bien propagés dans les tableaux, mais par défaut une cellule de table correspond à 41% de la taille de la police par défaut fixée par l’utilisateur. Il y a donc un risque que si vous effectuez la délcaration suivante:
body, table, th, td {font-size: 0.8em;}
que le résultat ne soit pas vraiment à la hauteur de vos espérances.
Beware, donc…

Après des mois d’attente, l’outil d’analyse de traffic Xiti nous livre sa version 7, avec moult Ajax et une interfaçe complètement revue et corrigée.
J’ai pu tester la version gratuite et la version professionnelle.
La grande différence de ces deux versions réside (outre le fait qu’on paye évidemment) dans des fonctions inactives dans la version gratuite et l’obligation de mettre le tag jaune horrible (visible pour une config 1024×768 - cf la home de babozor pour voir l’horreur de ce logo rouge sur fond jaune, mais bon en même temps c’est gratuit), alors que le tag de la version payante est invisible.
Pour qui a déjà mis les mains sur la version 6 de Xiti, le passage à la version 7 est une bénédiction.
Nouvelle interfaçage tout en Ajax, très pratique… une approche qui tend vers une vraie application web et non plus juste un site web de consultation de statistiques.
L’outil reste le même simplement la navigation est nettement plus aisée, les graphique globalement un peu accessoires mais rendent l’interface plus plaisante.
C’est l’exemple type d’une application intelligent d’Ajax. Nous sommes dans une application web cadrée (ou l’utilisateur est loggé et donc aucun problème de référéncement), pour une population formée ou habituée au média (marketteux, web-slave et directeurs informatiques) dans un but précis.
Bref, très beau passage de version pour Xiti, j’applaudis des deux mains… continuez comme ça.
Seul petit bémol, certaines fonctionnalités ne sont pas accesibles dans la version 7, par exemple la gestion des pages et chapitres suspendue jusqu’au 29 mai, n’est toujours pas actif, mais bon, on va rester indulgent et leur pardonner (pour cette fois seulement…)

Source: http://ajaxian.com/archives/accessible-maps

Des cartes accessibles

Seth Diffey a écrit un article dans A List Apart sur des cartes plus accessibles.

“
La plupart des applications de cartographie en ligne ne s’intéressent pas aux problèmes d’accessibilité. Pour une personne visuellement déficiente, ces cartes sont inutiles.

Existe-t-il un moyen d’afficher les informations d’une carte en mode texte, en la rendant accesible, utile et attractive visuellement? Oui: en utilisant une carte accessible basée sur CSS dans lequel les informations de la carte sont séparés de son contenu visuel
“

L’article contruit une carte en CSS propre et plutôt jolie, en omettant les problèmes sans fin, tel que la désactivation du JavaScript…

Source: http://ajaxian.com/archives/ajacss-accessible-ajax

ajaCSS: Ajax Accesible

Bhasker V K nous vient avec ajaCSS qui provient d’un travail précédent sur:

- la reconnaissance vocale avec Ajax (regardez la vidéo de démonstration)
- ajax + css pour les écrans basses résolution (regardez la vidéo de démonstration)
- ajax + css pour les recherches de pattern / la reconaissance d’écriture manuscrite (regardez la vidéo de démonstration)

Source: http://ajaxian.com/archives/scriptaculous-create-your-own-ajax-effects

Script.aculo.us: Créez vos propres effets Ajax

Thomas Fuchs a écrit un article sur créer vos propres effets Ajax.

L’article va derrière les effets pré-fabriqués de Script.aculo.us, et montre comment créer vos propres effets. Un exemple est utilisé avec un effet de caisse enregistreuse, qui compte le changement de montant, quand celui ci change

Le résultat final est plutôt sympatique:

new Effect.CashRegister(’total’,150,{duration:10});

Vous pouvez aussi explorer les fonction de callbacks, pour des effets de processing, transition, queues, etc…

Source: http://ajaxian.com/archives/your-corner-ajax-communication-widget

Your corner: Un Widget de communication en Ajax

MontRed a créé Your Corner comme une façon pour leurs utilisateurs de communiquer.

C’est un Widget simple en Ajax qui permet aux utilisateurs de laisser des commentaires.

C’est implémenté avec la librairie JSOLait et vous pouvez la mettre en place très facilement.

Source: http://ajaxian.com/archives/dom-builder-a-nicer-dom

DOM Builder: un meilleur DOM

Apparement tout le monde hait les API DIM. C’est sans aucun doute super difficile de travailler avec. Certains on jeteé DOM à la poubelle et se tournent plutôt vers inneHTML et ses amis pour faire le boulot. Certains pensent que “Il semble que c’est mal et sal d’utiliser innerHTML pour manipuler ou ajouter du contenu dans une page. Ce n’est pas un standard (plus un accord entre les fabricants de navigateurs) et cela ne fonctionne pas sur certains navigateurs avec des mime-types alors que les spécifications W3C de DOM sont implémentés de façon assez constantes dans les navigateurs modernes.”

Dan Webb a construit DOM Builder, wui ressemble un peu aux builder de Ruby (et de Groovy).

Example:
“
La fonction retourne un noeud DOM que vous pouvez affecter à n’importe quelle partie du document. Chaque fonction prend un certain nombre d’arguments. Le premier argument peut contenir un objet contenant une paire d’attributs qui peuvent être spécifiés ou non. Autrement il crait le noeud avec le texte donné et lapplique à n’importe quel noeud DOM. Voila
“

ar html = DomBuilder.apply();

var form = html.FORM(
html.DIV(
html.INPUT({type : ‘text’, name : ‘email’}),
html.INPUT({type : ‘text’, name : ‘password’}),
html.INPUT({type : ’submit’}),
)
);

document.body.appendChild(form);