Écriture de Hello world
Nous pouvons lui donner une infinité de sens selon comment nous faisons apparaître les lettres. Pour ce premier exemple, nous n'utilisons pas le mode son, ou le mode vidéo, nous allons utiliser juste une image fixe.
Nous avons un tableau contenant les actions css basiques (les propriétés) et un tableau contenant les valeurs css.
Nous interagissons avec ces tableaux à l'aide d'un tableau contenant les indices construisant les images en allant chercher les éléments dans les autres tableaux.
En css c'est le dernier qui parle qui a raison, ce qui permet une infinité de possibilité pour faire apparaître la même image (ici l'image fait apparaitre deux mots).
Les dernières ou futures normes css, font que nous n'écrivons plus le css dans la page html, mais que nous l'appelons au travers de "class="
Nous générons donc en c++ ou bash deux fichiers qui associés aux fichiers référents (les tableaux donnant des adresse au css, et aux tableaux de gestions) crée l'image finale
Les variables de bases du css dans le fichier javascript généré de l'exemple sont :
// prop est la propriété css
// val est la valeur css
var prop = ['background', 'background-color', 'color', 'border', 'background-image', 'background-repeat', 'background-attachment', 'background-position', 'border-bottom', 'border-bottom-color', 'border-bottom-style', 'border-bottom-width', 'border-color', 'border-left', 'border-left-color', 'border-left-style', 'border-left-width', 'border-radius', 'border-right', 'border-right-color', 'border-right-style', 'border-right-width', 'border-style', 'border-top', 'border-top-color', 'border-top-style', 'border-top-width', 'border-width', 'margin', 'margin-bottom', 'margin-left', 'margin-right', 'margin-top', 'padding', 'padding-bottom', 'padding-left', 'padding-right', 'padding-top', 'height', 'max-height', 'max-width', 'min-height', 'min-width', 'width', 'outline-style', 'outline-color', 'outline-width', 'outline-offset', 'outline', 'direction', 'letter-spacing', 'line-height', 'text-align', 'text-decoration', 'text-indent', 'text-shadow', 'text-transform', 'text-overflow', 'unicode-bidi', 'vertical-align', 'white-space', 'word-spacing', 'font', 'font-family', 'font-size', 'font-style', 'font-variant', 'font-weight', 'a:link', 'a:visited', 'a:hover', 'a:active', 'list-style', 'list-style-image', 'list-style-position', 'list-style-type', 'border-collapse', 'border-spacing', 'caption-side', 'empty-cells', 'table-layout', 'display', 'visibility', 'bottom', 'clip', 'left', 'position', 'right', 'top', 'z-index', 'overflow', 'overflow-x', 'overflow-y', 'box-sizing', 'clear', 'float', 'opacity', 'filter', 'box-shadow', 'content', 'counter-increment', 'counter-reset', 'border-radius', 'border-top-left-radius', 'border-top-right-radius', 'border-bottom-right-radius', 'border-bottom-left-radius', 'border-image', 'border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset', 'border-image-repeat', 'background-clip', 'background-origin', 'background-size', 'text-shadow', 'box-shadow', 'text-overflow', 'word-wrap', 'word-break', '-ms-transform', '-webkit-transform', 'transform', 'transform-origin', 'transform-style', 'perspective', 'perspective-origin', 'backface-visibility', '-webkit-transition', 'transition', 'animation-name', 'animation-duration', 'animation-delay'];
var val = ['dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'none', 'hidden', 'inline', 'block', 'static', 'relative', 'fixed', 'absolute', 'sticky', 'visible', 'scroll', 'auto', 'px', 'em', 'ex', 'ch', 'rem', 'vw', 'vh', 'vmin', 'vmax', '%', 'linear-gradient', 'radial-gradient', 'translate', 'rotateX', 'rotateY', 'rotateZ', 'ease', 'linear', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier'];
Ce qui nous permet d'appeler les termes générateurs dans des boucles du "for" et rend par la même l'écriture du code beaucoup plus aisé et léger.
Le générateur est en construction, mais fonctionnel en téléchargement ici :
generateur à décompresser et compiler
le css n'est pas encore généré par le javascript, mais avant peu j'aurai corrigé
ce qui donne :
https://www.letime.net/g/
Ce que je vais faire c'est écrire une phrase qui pourra être appelé par chaque caractère en exemple :
char lol1[] = "<script>" ;
char lol2[] = "var nouveauinput; function ajouteElemen() {var body = document.body || document.getElementsByTagName('body')[0], nouveauinput = document.createElement(\"div\"); nouveauinput.setAttribute(\"class\", \"" ;
char lol3[] = "px\"; body.insertBefore(nouveauinput,body.childNodes[0]); } ajouteElemen(); </script> " ;
char lol4[] = "\"); nouveauinput.style.marginTop=\"";
char lol5[] = "px\"; nouveauinput.style.marginLeft=\"" ;
Ensuite dans le switch qui reconnait le caractère de nos messages, je fait dessiner le bon caractère, en exemple :
sortieglm << lol1 << lol2 << "box201" << lol4 << plac << lol5 <<placement << lol3 << endl;
Avec plac qui indique la position en hauteur et placement la position horizontale.
j'ai aussi modifié boucle par box pour être plus dans les normes et cela donne pour le caractère 0
sortieglm << ".box201{ width: 8px; height: 15px; border-style: solid; border-color: coral;border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}" << endl;
Je viens de remplacer le Hello word avec une version issus du nouveau générateur. et j'ai modifier le repère dans le html (le positionnement se fait par rapport à un tag identifiant (plus pratique pour générer des vidéo).
Je pourrai améliorer les lettrines, mais ce n'est pas important car je voudrais que chacun puisse avoir ses propres lettrines.
Ce que je vais faire, c'est un tutoriel pour indiquer comment utiliser le générateur, et montrer la puissance de la sémantique en reprenant
ma page web qui dit qui je suis. Pour la première fois, je dispose d'un langage qui va me permettre de le faire sans contact humain, et c'est ça que je veux faire. Le fait que les robots ne comprennent pas ce que nous disons n'est vraiment qu'un détail par rapport à l'objectif.
