…alors je me suis dis que c'était peut-être le moment d'apprendre à le faire moi-même, disons en tant que projet à long-terme.

J'ai décidé de me pencher sur les bases pour squelletiser mon premier site internet. Ou plutôt finalement ma première page. En me donnant comme objectif de constituer une gallerie d'images à présenter, j'ai choisi de regrouper une selection de “travaux” dont je n'aurais jamais su quoi faire ou savoir présenter sans ce projet car ce qui m'intéresse ici c'est la possibilité qu'un site internet propose à pouvoir faire matière avec ses propres archives. Il s'agit donc de dessins réalisés sur le fameux logiciel Microsoft Paint lorsque j'étais enfant, vers 2007-2009 qu je suis donc allée les récupérer sur le vieux pc de ma grand-mère.

Parce qu'à part les CMS type wordpress, wix ou les skyblog, tumblr je n'y connaissais rien en code, j'ai démarré des petits exercices sur codecadamy pour me familiariser avec les syntaxes du web. Avant ça je ne savais pas trop faire la différence entre le html, le css et le javascript (il y en a d’autres). J'en suis plutôt restée à essayer surtout le html (langage pour déterminer le contenu de la page web) et le css (langage de feuille de style, qui permet la mise en forme de base du contenu html, la typo, les couleurs, la disposition des médias choisi etc), et à en apprendre le lexique.

html:

http://azunino.info/aide/html/nomenclature.html

css:

Les exercices de codecademy se font par échelons. Petit à petit, les possibilités augmentent en progressant par niveau. Apprendre à faire dialoguer le html avec le css en se familiarisant avec des règles de display des élements, choisir la position du header, du footer, des éventuels boutons, menus et des informations qu'ils contiennent dans une logique de hiérarchisation bien précise.

https://www.w3schools.com/ https://css-tricks.com/ https://www.w3.org/wiki/Main_Page

En ce qui concerne ma galerie d'image, j'ai rassemblé mes dessins paint dans un dossier, lui même situé dans un dossier-mère “siteweb” contenant l'arborescence du site. Ce matériel est nécessaire au bon fonctionnement du site, pour le jour où je devrai tout transmettre à un serveur afin de le mettre en ligne (icônes, curseurs, favicon, typo, médias, index des pages, leur feuille de style, scripts…). Il permet le bon fonctionnement des chemins relatifs, je crois aussi que le mieux est de les classer par type.

Pour l'instant c'est un peu le bazar : J'ai des dossiers spécialement pour garder de côté des templates trouvés sur internet (https://codepen.io/, https://www.freecodecamp.org/), des dossiers pour les pages distinctes “home”, “paint”, j'isole tout pour l'instant pour ne pas trop m'y perdre, et dans le dossier “fractur” des essais de pages pour ne pas faire de fausse manip sur les versions finales :

Bref, ensuite j'ai remis mon dossier siteweb un peu plus au propre :

à noter; j'ai installé le framework flask pour un peu peu plus tard quand je serai plus à l'aise. C'est une petite application de développement web qui se sert d'un environnement python (l'utilisation de lignes de commande dans le terminal) pour en quelque sorte “simuler” un serveur sur son ordinateur en premier lieu, puis permettre de faire tourner des petits scripts dans le site qui menant par exemple à plusieurs pages différentes, mais avec le même schéma/template transposé mais via un ensemble de lignes de code. (https://www.kaherecode.com/tutorial/demarrer-avec-flask-un-micro-framework-python c'est mieux expliqué ici)

j'ai donc créé mon environnement et “myproject” flask dans la racine de mon ordinateur, dans le dossier utilisateur, mais comme dit plus haut, je m'en servirai quand j'aurais plusieurs pages à articuler entre elles.

le tout début : welcome granny! en reférence à la gentilesse de ma mamie pour m'avoir preté son ordinateur à tous les repas de famille.

L'utilisation des flexbox est super fatiguante et technique, voici plusieurs essais et recherches compilées de présentation des images en miniatures, éventail, etc.

J'ai aussi essayé l'option “grid”, qui organisait bien les images en colonnes.

Ici ce sont les curseurs, l'ensemble de la recherche infographique et iconographique de mon site que j'ai scannés depuis un dessin fait à l'encre, et rassemblé dans ce dossier. Il faut ensuite les convertir en dessin vectoriel sur inscape et le mieux est le format 32×32 pixels.

Ici, rien à voir mais j'ai essayé des faire une home page d'après un template avec une vidéo en background. Montées, modifiées sur kadenlive, ffmpeg et audacity (données brutes reconverties), d'après des caméra de surveillance qui buguent qui m'ont été prêtées, je les archives dans mon ordinateur. “Malotta” est normalement le nom du site en lui-même.

Puis j'ai travaillé sur GIMP pour tester un fond d'écran gif à l'image de l'esthétique brute de Microsoft Paint, en utilisant les superpositions de modes de calques, et en décalants les tracés pour donner un peu de relief à l'un de mes dessins. Histoire de faire croire à un site un peu mois “statique”.

Finalement, j'ai choisi de ne pas mettre ma galerie organisée en grid mais plutôt de la laisser consultable en déroulement vertical, j'y ai ajouté des titres dérivés des orignaux (un peu trop gênants à la base).

Il reste bon nombre de choses à régler. J'aimerais maîtriser mieux la disposition des images, et ajouter d'avantage d'icones, rendre la page dynamique pour que lorsqu'on clique sur une image elle s'agrandisse et que le curseur change, fabriquer ma propre typo d'après d'autres dessins à l'encre et avec ça accompagner chaque page du site en général avec une bande sonore propre. Un projet en éternelle construction et évolution donc… Mais je suis quand même contente d'avoir pu faire ce premier essai quoique un peu chaotique, car à part en le publiant numériquement comme sur un vieux skyblog pourri de quand on a 12 ans, le contenu ce dossier paint aurait fini aux oubliettes.