λ-wiki

λ-wiki :: mots

www!k! v.20120610

λ-wiki :: éditeur

_div{position:absolute;top:-30px; right:20px; text-align:center; font:bold 6em arial; z-index:900; text-shadow:2px 2px 2px black; opacity:0.8;|_a{href:?view=risc;|_span{color:white;|mots}}}

_div{padding:2px; margin:-20px; color:red; font-size:0.7em; text-align:center; | 
01Design.8 | Echelles, Espaces, Temps | Académie Royale des Beaux Arts de Bruxelles, Bruxelles, Belgique | 9-11/05/2012}

_div{position:relative; top:20px; left:35px; width:810px; height:610px; |

°°° NOTE_START °°°

_div{
background:url('data/ward_cunningham.jpg') no-repeat top left;
width:400px; height:300px;
border:1px solid grey;
float:left;
line-height:300px;
text-align:center;
border-radius: 10px 10px 0px 10px ;
box-shadow: 0 0 8px red;
|
_note_start{11|_h1 _span{color:white;|texte}}
}

_div{
background:url('data/ward_cunningham.jpg') no-repeat top right;
width:400px; height:300px;
border:1px solid grey;
float:right;
line-height:300px;
text-align:center;
border-radius: 10px 10px 10px 0px ;;
box-shadow: 0 0 8px green;
|
_note_start{12|_h1 _span{color:white;|epsilonwiki}}
}
_div{clear:both;| }

_div{
margin-top:5px;
background:url('data/ward_cunningham.jpg') no-repeat bottom left;
width:400px; height:300px;
border:1px solid grey;
float:left;
line-height:300px;
text-align:center;
border-radius: 10px 0px 10px 10px ;;
box-shadow: 0 0 8px blue;
|
_note_start{21|_h1 _span{color:white;|nuages}}
}

_div{
margin-top:5px;
background:url('data/ward_cunningham.jpg') no-repeat bottom right;
width:400px; height:300px;
border:1px solid grey;
float:right;
line-height:300px;
text-align:center;
border-radius: 0px 10px 200px 10px ;;
box-shadow: 0 0 8px cyan;
|
_note_start{22|_h1 _span{color:white;|et après ?}}
}

}

°°° NOTE_END °°°

°°° TOP LEFT °°°

_note_end{11|_div{ position:absolute; left:50%; top:10px; margin-left:-390px; width:760px; height:650px; border:1px solid black; background:#fff; box-shadow:0px 0px 8px black; padding:10px; | _note_start{11|_h5 texte}

_h6 _note_start{id:texte1;|3.1) génèse d'un éditeur de texte}
_h6 _note_start{id:texte2;|3.2) le texte balisé}

_center{_img{src:data/amelie_sepia.jpg; height:500px; | le sourire d'Amélie}}

_note_end{id:texte1;|
_div{position:absolute; top:130px; left:0; background:#ffe; border:1px solid black; padding:10px; 
-moz-transform:rotate(-2deg); -webkit-transform:rotate(-2deg); 
|
_note_start{id:texte1;|_h6 3.1) génèse d'un éditeur de texte}
_p Dans le monde digital le matériau de base de l'information est l'octet, un groupe de 8 bits capable de représenter 256 états différents, par exemple les signes associés aux caractères de l'alphabet, aux chiffres, aux opérateurs. Ces caractères sont entrés dans un ordinateur par l'intermédiaire d'un clavier et traités par un micro-processeur qui les stocke temporairement dans la mémoire vive, en affiche sur écran une représentation graphique avant de les stocker de façon permanente dans une mémoire de masse locale ou distante. Ce processus est géré par un logiciel appelé éditeur ou traitement de texte. BlocNote, TextEdit, M$Word ou OpenOffice.Writer en sont des exemples connus.
_p On sait que les navigateurs sont capables d'afficher les pages multimedia des sites WEB ; on sait moins qu'ils sont aussi équipés d'outils d'édition de texte, des outils habituellement relégués au fin fond des formulaires et tout juste capables de recevoir un peu de texte brut dans un champ « textarea ». Aujourd'hui, les outils du WEB 2.0 permettent de transformer cet éditeur élémentaire en porte d'entrée de documents multimedia dynamiques, de véritables applications quittant le bureau des ordinateurs pour se diluer dans les réseaux d'internet.
}}

_note_end{id:texte2;| 
_div{position:absolute; top:450px; left:0; background:#ffe; border:1px solid black; padding:10px;
-moz-transform:rotate(2deg); -webkit-transform:rotate(2deg); 
|
_note_start{id:texte2;|_h6 3.2) le texte balisé}
_p Tout document numérique est composé d'une suite de caractères regroupés en mots pour former des portions de texte. Dans le cas d'un éditeur wiki, ce texte est créé dans la page d'un navigateur et mémorisé dans un fichier texte sur un serveur distant. Dans un premier temps le navigateur affiche ce texte sur l'écran de façon séquentielle, ligne après ligne, dans la police et la taille par défaut, comme simple copie conforme du fichier texte. Pour dépasser cet affichage « brut de décoffrage », pour enrichir le texte (modifier la police, la taille, le style), le transformer en lien (vers une autre portion de texte, une autre page, un autre site, une image), le disposer de façon composée sur une page, il est nécessaire d'injecter des commandes dans le cours du texte. Et se pose le problème de distinguer le texte « commande/verbe » du texte « objet de la commande ».
}}

}}

°°° TOP RIGHT °°°

_note_end{12|_div{ position:absolute; left:50%; top:10px; margin-left:-390px; width:760px; height:650px; border:1px solid black; background:#fff; box-shadow:0px 0px 8px black; padding:10px; | _note_start{12|_h5 epsilonwiki}

_h6 _note_start{id:syntaxe;|3.3) syntaxe}
_h6 _note_start{id:ergonomie;|3.4) ergonomie}

_center{_img{src:data/amelie_sepia.jpg; height:500px; | le sourire d'Amélie}}

_note_end{id:syntaxe;|
_div{position:absolute; top:100px; left:0; background:#ffe; border:1px solid black; padding:10px; 
-moz-transform:rotate(-5deg); -webkit-transform:rotate(-5deg); 
|
_note_start{id:syntaxe;|_h6 3.3) syntaxe}

_p On a donc été amené à inventer le concept de « texte balisé » et le couple HTML/CSS s'est imposé comme standard reconnu par tous les navigateurs. Dans les logiciels WYSIWYG le texte balisé est caché et seul le résultat est visible. Les navigateurs n'en sont pas encore là et il est habituel d'entrer le texte balisé dans une fenêtre et de visualiser le résultat dans une autre. Les blogs, les wikis (cf [W_WIK]) et les CMS (Content Management System) disposent d'une syntaxe remplaçant l'écriture du texte balisé sous la forme directe HTML/CSS par une syntaxe intermédiaire simplifiée et plus lisible.
_p Epsilonwiki [W_EPS] est construit sur le concept wiki inventé en 1995 par Ward Cunningham. Il dispose d'une syntaxe originale dont la forme générale s'écrit ainsi :
« °°_verbe{ attibuts | objet }°° ». Exemples : 
_ul 1) « °°_b{portion de texte}°° » agira sur une unique portion de texte, la règle étant déjà définie dans le nom, 
_ul 2) « °°_span{font-size:12px;|portion de texte}°° » appliquera la taille de 12px à la portion de texte située à droite du séparateur, 
_ul 3) « °°_a{PIXAR|http://www.pixar.com}°° » affichera le texte PIXAR comme lien vers le site de PIXAR, 
_ul 4)	« °°_img{data/bonobo.jpg|100|un	bonobo}°° »	affichera	l'image	« data/bonobo.jpg » de hauteur 100px et l'infobulle « un bonobo » au passage du curseur sur l'image.

_p Au delà de l'enrichissement d'un texte qui coule séquentiellement dans l'espace de la page, il est également possible d'envisager de segmenter le texte en le logeant grâce à la puissante balise « °°_div{ ... | ... }°° » et les attributs CSS dans des blocs positionnés de façon arbitraire dans la page. Au final, construites sur la base d'une syntaxe claire et cohérente un nombre a priori illimité de balises peut être envisagé pour constituer un outil d'enrichissement de texte et de composition de page aussi sophistiqué que souhaité. 
_p La syntaxe d'epsilonwiki est en cours d'évolution vers une forme se rapprochant de la syntaxe LISP : °°{first rest}°° où : first est le nom d'une balise, rest est une suite d'expressions de la forme °°{first rest} : {first {first {first {first ... {first rest}}}}}°°, ce qui qui pourrait transformer la syntaxe actuelle en un véritable langage faisant d'epsilonwiki un environnement de programmation à part entière.

}}

_note_end{id:ergonomie;|
_div{position:absolute; top:300px; left:0; background:#ffe; border:1px solid black; padding:10px; 
-moz-transform:rotate(5deg); -webkit-transform:rotate(5deg); 
|
_note_start{id:ergonomie;|_h6 3.4) ergonomie}

_p Epsilonwiki est construit sur un moteur wiki opensource ultra léger, facile à installer et à utiliser ; il s'agit d'un projet minimaliste, écrit en très peu de lignes de code (PHP+Javascript+CSS+RegExp), pesant environ 30ko, sans zone d'ombre et donc complètement contrôlable. L'interface d'entrée et de sortie des informations est constitué par n'importe quel navigateur WEB sur n'importe quel système et sur n'importe quelle machine, de l'ordinateur de table au smartphone ; il propose une fenêtre d'édition et une fenêtre de visualisation dynamiquement liées. Décrire le détail des fonctionnalités dépasse le cadre de cet article (cf [W_EPS]).
_p Depuis sa naissance en Avril 2007, epsilonwiki a été testé et a évolué dans de nombreuses situations : carnet de notes, page revue, tables, affiche, mémoire, cours, présentations vidéo, gestion de cours, de chantiers, .... Le présent article a été composé sur epsilonwiki, directement en ligne, à parti de divers navigateurs tournant sur diverses machines ; les modèles 3D ont été produits sur Sketchup + pFormes + Render[in] et sur PovRay, les planches 2D sur VectorWorks Standard et les images ont été retouchées sur PixelMator.

}}

°°° BOTTOM LEFT °°°

_note_end{21|_div{ position:absolute; left:50%; top:10px; margin-left:-390px; width:760px; height:650px; border:1px solid black; background:#fff; box-shadow:0px 0px 8px black; padding:10px; | _note_start{21|_h5 nuages}

_h6 _note_start{id:nuages;|3.5) des mots dans les nuages}

_center{
_show{data/mots/Cloud-Computing.jpg|300|500|arbre de la connaissance}
_show{data/mots/arbre-maison.jpg|250|500|arbre de la connaissance}

}

_note_end{id:nuages;|
_div{position:absolute; top:100px; left:0; background:#ffe; border:1px solid black; padding:10px; opacity:0.8;
-moz-transform:rotate(-5deg); -webkit-transform:rotate(-5deg);  
|
_p On parle beaucoup du cloud computing ces temps-ci. Apple a bien sûr inventé sa propre version « iCloud », mais la différence est de taille. Du côté « iCloud » on est en présence d'un système de synchronisation automatique à travers un « cloud » de données dupliquées et stockées sur plusieurs machines. Côté cloud computing on est en présence d'un « cloud » stockant des documents dynamiques et accessibles (en lecture et édition) depuis plusieurs machines, où ils ne font que passer le temps nécessaire (streaming). Epsilonwiki se trouve dans cette seconde catégorie. Il produit des documents multimédia interactifs en ligne :
_ul 1) multimédia veut dire composés de textes, d'images, de sons et de vidéos,
_ul 2) interactifs, veut dire que le document possède des zones cliquables qui déclenchent des actions : des liens, des notes qui affichent des informations complémentaires, des images qui s'affichent en taille augmentée sur fond gris, des groupes d'images qui s'affichent en séquence, des diaporamas, et bientôt, des zones de calcul (wikicalc), de dessin vectoriel (canvas), ...
_ul 3) en ligne, veut dire directement stockés et accessibles sur le réseau internet.
_p Les outils d'édition de ces documents sont également en ligne : il y a les outils qui restent et opèrent sur le serveur HTTP, comme l'interpréteur PHP, et il y a ceux qui sont chargés à la demande avec les données sur l'ordinateur local, qui opèrent à l'intérieur du navigateur, comme l'interpréteur JavaScript et l'interpréteur CSS. Pour que l'ensemble fonctionne quel que soit le système d'exploitation et la machine il faut sur le serveur HTTP un moteur PHP et sur l'ordinateur local un client HTTP possédant un moteur JavaScript+CSS, c'eest le cas de tous les navigateurs.
_p Epsilonwiki est bien un outil de la génération « cloud computing » ! Pour l'instant limité à l'édition collaborative de pages en ligne sur le WEB, avec l'évolution d'une syntaxe utilisant au mieux les possibilités du HTML5 et du CSS3, il deviendra envisageable de créer de façon collaborative l'ensemble des documents qu'un architecte a à produire et à partager : 3D, 2D, DQE.

}}

°°° BOTTOM RIGHT °°°

_note_end{22|_div{ position:absolute; left:50%; top:10px; margin-left:-390px; width:760px; height:650px; border:1px solid black; background:#fff; box-shadow:0px 0px 8px black; padding:10px; | _note_start{22|_h5 et après ?}

_h6 _note_start{id:evolution;|3.6) évolution}

_center{_show{data/mots/iproc_sketch.jpg|500|700|le futur iProc by am}}

_note_end{id:evolution;|
_div{position:absolute; top:100px; left:100px; background:white; border:1px solid black; padding:10px; width:600px;
opacity:0.9; box-shadow:4px 4px 4px black;

-moz-transform:rotate(-5deg); -webkit-transform:rotate(-5deg);
|
_p Dans un raccourci un peu rapide, on peut même entrevoir le jour où nos ordinateurs ne contiendront plus qu'un seul logiciel, le navigateur, ouvert en plein écran sur une ou plusieurs instances d'un « epsilonwiki » (:-) contrôlant des pages multimédia en ligne. Plus de bureau, plus d'icônes de fichiers et de dossiers, plus de système d'exploitation au delà du strict nécessaire au fonctionnement du navigateur, un micro-Linux de moins 32ko. Et bientôt les ordinateurs de disparaître eux-mêmes, éclatés en composants de plus en plus petits et reliés par wifi, le clavier remplacé par une image projetée sur un plan quelconque en interaction avec nos mains, l'écran disparu au profit d'une image video-projetée sur un mur (cf [W_SIX]), le disque dur oublié depuis longtemps, le coeur de l'ordinateur réduit à un bijou cubique (1"/1"/1") posé ... sur le front !
_p Et un peu plus tard, ce qui reste de silicium devenu composé organique, et même composant de notre corps reprogrammé par zones. Nul besoin d'imaginer un homme bardé de circuits électroniques et des fils sortant du crâne comme un astronaute, non, un homme dégagé de toutes ces béquilles et assistants, auto-reprogrammé par zones. Avec par exemple un cristallin ayant acquis les propriétés d'un circuit LCD connecté par BlueTooth au bijou cubique (ou à un arbre de la connaissance façon Avatar/Pandora) et affichant sur la rétine du texte ou des images, ou mieux, l'ensemble nerf optique et ses terminaisons dans le cerveau capable de générer des informations reconnues comme textes et images, ou encore mieux, le cerveau dans son entier capable de communiquer avec les bases de données réparties dans la CyberSphère !
_p Enfin un epsilonwiki arrivé à sa nième version, épuré de tout superflu, écrit en quelques lignes et gérant des séquences d'octets, des mots, un simple petit poème algorithmique aussi beau qu'un coucher de soleil sur une chapelle grecque au bout de l'ile de Siphnos, où reposent nos aïeux.

}}