Applications et programmes réalisées dans le cadre du CDUI

Cette partie plus particulière rassemble l’ensemble des réalisations faites dans ou hors du cadre du CDUI mais utiles pour le projet professionnel CDUI ou dans le travail demandé lors de mon stage CDUI auprès de l’entreprise Ordiformation.

Programmes plus spécifiques à la construction de l’univers Azuléo réalisés précédemment (années 2021 à 2024) :

  • Polygone Calculator : Polygone Calculator n’est pas à proprement parler un calculateur de polygones. La première page était un des premiers exercices réalisé dans le cadre du CDA que j’ai passé en 2024. C’est une mise en page html et css classique : avec header, main, footer, article ou section, aside, menu, balises h1, h2, h3, p, listes , ul, li, ol. Je l’ai amélioré et comme cette page traite des polygones je lui est ajouté une deuxième page qui est un dessinateur de polygones. Les options sont disponibles par les icônes dans le header et un début d’éditeur de script a été réalisé mais vite abandonné vu le travail à fournir pour le CDA.
  • Zelliges : Zelliges est un programme que j’ai développé en 2022 et 2023. C’est une bibliothèque de zelliges qui regroupe un grand ensemble des formes utilisés dans les mosaïques à base de zelliges. Le but n’est ici que de montrer les dimensions des zelliges et d’en faire une représentation incluant placement et couleurs. Des tableaux indiquant les valeurs mathématiques et les valeurs physiques après l’attribution d’une longueur de « base » permet sa représentation seule.
  • MotifZelliges : C’est pour l’instant une base de fonctions en javascript qui me permet de développer des motifs en zelliges. La visualisation se fait par une viewbox Canvas ou SVG et un enregistrement en png des motifs réalisés. Par contre la partie de création de motif est saisie en dur directement en javascript. Le programme Polygone Calculator vu plus haut et son éditeur de script sont une piste à la création des motifs automatiquement par le choix des pièces, la partie rotation et déplacement, les boucles, les sous-ensembles d’instructions possibles dans le script pour dupliquer un motif dans un espace fini.
  • Multitrack ou SVGMusical : Dans SVGMusical on utilise les polygones dans un but de création musicale. Chaque polygone représente un instrument, chaque sommet de ce polygone représente une note. La notation est faite dans une partition ronde; le programme est donc particulièrement adapté à la musique répétitive. Le changement de tempo de chaque instrument individuellement, du rythme général ou de la position des angles font que certaines notes s’activent et d’autres pas. Le but étant de faire une mélodie sur la base de ces polygones. Le principe est réalisé avec cet exemple mais le développement n’a pas été possible ces deux dernières années avec mes formations en CDA et en CDUI. Une possibilité pour moi serait de travailler ce principe en incubation ou en master d’art afin d’en tirer une ou plusieurs applications fonctionnelles et éducatives.
  • CryptoZellige : le principe est dans l’air du temps. Tout le monde connait les cryptomonnaies moins de gens connaissent les NFT ou « Non-Fungible Token ». Un NFT est un certificat de propriété et d’authenticité qui permet le suivi d’un bien numérique dans le temps. Chaque jeton à sa valeur propre et chaque jeton représente un bien. Le but est d’associer des jetons aux zelliges. avec les zelliges on fait des œuvres qui rassemblent un certain nombre de jetons et la valeur des œuvres et des zelliges émises sur le marché donne une valeur moyenne à chaque zellige. La disponibilité ou pas des zelliges, la création ou la destruction d’œuvres, la côte à la revente de ces œuvres interviennent sur cette rareté et cette valeur. c’est un principe qui pourrait être ajouté à Azuléo Zelliges mais non développé actuellement.

Programmes réalisés en complément des travaux demandés et pour l’élaboration du dossier de projet (documents et site internet)

  • SVG Sliders : SVG Sliders est né suite à la réalisation de personas pour une étude de marque. Généralement, la création d’un persona est associée à une analyse psychologique ou de personnalité de cette individu. Pour représenter cela graphiquement on peut utiliser des sliders et des curseurs associés à des titres ou des libellés. Le programme SVG Sliders réalise cela pour vous. Pas besoin d’un programme de dessin il suffit d’indiquer dans svg slider les valeurs des curseurs, l’aspect graphique du slider et des curseurs, les polices utilisés, les espacements entre les élément et il vous crée le slider en svg. Il suffit ensuite de l’enregistrer, d’éventuellement l’améliorer avec un logiciel comme Illustrator et vos pouvez l’ajouter à votre persona. Bien sûr, il n’est pas limité à un persona et peu servir à plein d’activité autre si le but est de réaliser un slider.
  • SVG and HTML Font Comparator : à la réalisation du programme précédent j’ai eu à un moment un problème de positionnement du texte SVG du fait de l’espacement autour de la police. Pour positionner correctement la police par rapport aux sliders, je devais connaître exactement la place utilisé par la police de caractères en faisant abstraction de l’espace autour du texte, mesurer ce qu’on appelle les bounding box en javascript. De là, j’ai bifurqué vers un programme permettant de visualiser les polices fixes et ce qu’on appelle les polices variables. Ces dernières polices sont des polices améliorées. Par exemple, une police fixe ne contient qu’une seule graisse (thin, regular, bold), il y a donc autant de fichiers que de graisses — pareil pour les italiques, pareil pour les condensés. Dans une police variable on a l’ensemble de ces éléments dans un seul fichier mais on peut avoir en plus d’autres évolutions de la police dans des variables qu’on appellent axes. On peut par exemple jouer sur l’italique d’un mot, avoir des graisses intermédiaires, changer la forme de la lettre suivant nos propres critères du moins s’ils sont intégrés à la police. Ce qui permet une grande créativité mais aussi une justesse de la forme intéressante. Le programme SVG and HTML Font Comparator permet une visualisation des polices dans toutes leurs spécificités et affiche les axes de celles-ci si elles sont variables sous formes de curseurs afin de pouvoir tester et découvrir ces polices au-mieux avant un usage sur le web.
  • Font Converter Api : Api créée sous Node.js permettant la conversion de polices de caractères; TTC vers woff ou woff2, woff ou woff2 vers TTF. Cette Api fonctionne par le téléchargement de la police à convertir et l’envoi vers l’Api.
  • Azuleo simulateur : comme son nom l’indique il s’agit d’un simulateur. Mon projet de fin de TP CDUI est le site d’une entreprise de vente de pièces en gré cérame, carreaux de ciment et céramiques réalisés par des moyens modernes. Si la technologie reste la même pour le gré cérame et les carreaux de ciments des particularités font entrer les produits de Azuléo Zelliges dans le 21ème siècle. 1) la découpe de pièces au jet d’eau ou au laser à fibre 2) la réalisation de pièce de céramiques en impression 3D du modèle unique à la pré-série. Pour les zelliges en gré cérame cela permet d’utiliser l’ensemble de mon catalogue de pièces pour la réalisation de motif en zelliges. J’ai donc créé un simulateur en javascript générant les motifs et permettant de les modifier au niveau des couleurs. Une base de motif est créée à chaque choix, vous pouvez associer motifs et couleurs de la gamme puis retoucher individuellement chaque zellige de la couleur qui vous plait pour une création ludique des motifs.
  • Ceramic Tiles Generator – Dans le cadre du projet Azuléo Zelliges, une série de scripts en python permettant à partir de fichiers textes simple de réaliser des SVG, PNG et GIF animés de polygones réguliers ou irréguliers
    • Polygon Angle Filter
    • SVG Zellige Calculator
    • SVG Rotator
    • PNG Tile Generator
    • Gif Animation Generator

Dans le cadre du stage effectué chez Ordiformation

  • OF-Custom : Réalisation d’un plugin WordPress permettant de gérer dans WordPress les types de publications personnalisées d’une offre de formation au Format Lhéo (XML) — le format Lhéo est un format créé par le gouvernement français pour standardiser les offres de formations et pouvoir les inclure sur une plateforme commune.
  • XML Validation Api : Api écrite sous Node.js permettant de valider un fichier XML créé avec OF-Custom avant de l’envoyer sur la plateforme de l’EDOF (espace dédié aux organismes de formations).
  • Ordiformation_2025 : thème enfant de WordPress permettant l’affichage des offres de formations. Ce thème contient aussi des entêtes et des pieds de pages personnalisés, des fonctions pour l’affichage de videos ou d’un module de recherche sur certaines pages, l’affichage du fil d’ariane. En plus il contient une page de charte graphique et une page listant l’ensemble des styles wordpress utilisés par WordPress, le thème, les plugins afin de comparer et d’ajuster le thème enfant et les autres styles CSS avec la charte graphique.

Retour en haut