{"id":922,"date":"2025-08-29T09:43:59","date_gmt":"2025-08-29T07:43:59","guid":{"rendered":"https:\/\/portfolio.tsao-tsao.com\/?page_id=922"},"modified":"2025-09-15T07:37:13","modified_gmt":"2025-09-15T05:37:13","slug":"applications-et-programmes-realisees-dans-le-cadre-du-cdui","status":"publish","type":"page","link":"https:\/\/portfolio.tsao-tsao.com\/?page_id=922","title":{"rendered":"Applications et programmes r\u00e9alis\u00e9es dans le cadre du CDUI"},"content":{"rendered":"\n<p>Cette partie plus particuli\u00e8re rassemble l&rsquo;ensemble des r\u00e9alisations faites dans ou hors du cadre du CDUI mais utiles pour le projet professionnel CDUI ou dans le travail demand\u00e9 lors de mon stage CDUI aupr\u00e8s de l&rsquo;entreprise Ordiformation.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/portfolio.tsao-tsao.com\/?page_id=1002\"><strong>Formulaire QQOQCCP<\/strong><\/a> : Qui ? Quoi ? O\u00f9 ? Quand ? Comment ? Combien ? Pourquoi ?<\/li>\n\n\n\n<li><a href=\"https:\/\/portfolio.tsao-tsao.com\/?page_id=1010\"><strong>Questionnaire strat\u00e9gique<\/strong><\/a> : pour vous aider \u00e0 conna\u00eetre vos besoins<\/li>\n\n\n\n<li><a href=\"https:\/\/portfolio.tsao-tsao.com\/?page_id=996\"><strong>Pyramide<\/strong><\/a> &#8211; petit travail demand\u00e9 dans le cadre d&rsquo;une collaboration avec la formation CIP<\/li>\n<\/ul>\n\n\n\n<p>Programmes plus sp\u00e9cifiques \u00e0 la construction de l&rsquo;univers Azul\u00e9o r\u00e9alis\u00e9s pr\u00e9c\u00e9demment (ann\u00e9es 2021 \u00e0 2024) :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/polygonecalculator.tsao-tsao.com\"><strong>Polygone Calculator<\/strong><\/a> : Polygone Calculator n&rsquo;est pas \u00e0 proprement parler un calculateur de polygones. La premi\u00e8re page \u00e9tait un des premiers exercices r\u00e9alis\u00e9 dans le cadre du CDA que j&rsquo;ai pass\u00e9 en 2024. C&rsquo;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&rsquo;ai am\u00e9lior\u00e9 et comme cette page traite des polygones je lui est ajout\u00e9 une deuxi\u00e8me page qui est un dessinateur de polygones. Les options sont disponibles par les ic\u00f4nes dans le header et un d\u00e9but d&rsquo;\u00e9diteur de script a \u00e9t\u00e9 r\u00e9alis\u00e9 mais vite abandonn\u00e9 vu le travail \u00e0 fournir pour le CDA.<\/li>\n\n\n\n<li><a href=\"https:\/\/zelliges.tsao-tsao.com\"><strong>Zelliges<\/strong><\/a> : Zelliges est un programme que j&rsquo;ai d\u00e9velopp\u00e9 en 2022 et 2023. C&rsquo;est une biblioth\u00e8que de zelliges qui regroupe un grand ensemble des formes utilis\u00e9s dans les mosa\u00efques \u00e0 base de zelliges. Le but n&rsquo;est ici que de montrer les dimensions des zelliges et d&rsquo;en faire une repr\u00e9sentation incluant placement et couleurs. Des tableaux indiquant les valeurs math\u00e9matiques et les valeurs physiques apr\u00e8s l&rsquo;attribution d&rsquo;une longueur de \u00ab\u00a0base\u00a0\u00bb permet sa repr\u00e9sentation seule.<\/li>\n\n\n\n<li><strong>MotifZelliges<\/strong> : C&rsquo;est pour l&rsquo;instant une base de fonctions en javascript qui me permet de d\u00e9velopper des motifs en zelliges. La visualisation se fait par une viewbox Canvas ou SVG et un enregistrement en png des motifs r\u00e9alis\u00e9s. Par contre la partie de cr\u00e9ation de motif est saisie en dur directement en javascript. Le programme Polygone Calculator vu plus haut et son \u00e9diteur de script sont une piste \u00e0 la cr\u00e9ation des motifs automatiquement par le choix des pi\u00e8ces, la partie rotation et d\u00e9placement, les boucles, les sous-ensembles d&rsquo;instructions possibles dans le script pour dupliquer un motif dans un espace fini.<\/li>\n\n\n\n<li><strong>Multitrack <\/strong>ou<strong> <a href=\"http:\/\/svgmusical.tsao-tsao.com\">SVGMusical<\/a><\/strong> : Dans SVGMusical on utilise les polygones dans un but de cr\u00e9ation musicale. Chaque polygone repr\u00e9sente un instrument, chaque sommet de ce polygone repr\u00e9sente une note. La notation est faite dans une partition ronde; le programme est donc particuli\u00e8rement adapt\u00e9 \u00e0 la musique r\u00e9p\u00e9titive. Le changement de tempo de chaque instrument individuellement, du rythme g\u00e9n\u00e9ral ou de la position des angles font que certaines notes s&rsquo;activent et d&rsquo;autres pas. Le but \u00e9tant de faire une m\u00e9lodie sur la base de ces polygones. Le principe est r\u00e9alis\u00e9 avec cet exemple mais le d\u00e9veloppement n&rsquo;a pas \u00e9t\u00e9 possible ces deux derni\u00e8res ann\u00e9es avec mes formations en CDA et en CDUI. Une possibilit\u00e9 pour moi serait de travailler ce principe en incubation ou en master d&rsquo;art afin d&rsquo;en tirer une ou plusieurs applications fonctionnelles et \u00e9ducatives.<\/li>\n\n\n\n<li><strong>CryptoZellige<\/strong> : le principe est dans l&rsquo;air du temps. Tout le monde connait les cryptomonnaies moins de gens connaissent les NFT ou \u00ab\u00a0Non-Fungible Token\u00a0\u00bb. Un NFT est un certificat de propri\u00e9t\u00e9 et d&rsquo;authenticit\u00e9 qui permet le suivi d&rsquo;un bien num\u00e9rique dans le temps. Chaque jeton \u00e0 sa valeur propre et chaque jeton repr\u00e9sente un bien. Le but est d&rsquo;associer des jetons aux zelliges. avec les zelliges on fait des \u0153uvres qui rassemblent un certain nombre de jetons et la valeur des \u0153uvres et des zelliges \u00e9mises sur le march\u00e9 donne une valeur moyenne \u00e0 chaque zellige. La disponibilit\u00e9 ou pas des zelliges, la cr\u00e9ation ou la destruction d&rsquo;\u0153uvres, la c\u00f4te \u00e0 la revente de ces \u0153uvres interviennent sur cette raret\u00e9 et cette valeur. c&rsquo;est un principe qui pourrait \u00eatre ajout\u00e9 \u00e0 Azul\u00e9o Zelliges mais non d\u00e9velopp\u00e9 actuellement.<\/li>\n<\/ul>\n\n\n\n<p>Programmes r\u00e9alis\u00e9s en compl\u00e9ment des travaux demand\u00e9s et pour l&rsquo;\u00e9laboration du dossier de projet (documents et site internet)<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>SVG Sliders<\/strong> : SVG Sliders est n\u00e9 suite \u00e0 la r\u00e9alisation de personas pour une \u00e9tude de marque. G\u00e9n\u00e9ralement, la cr\u00e9ation d&rsquo;un persona est associ\u00e9e \u00e0 une analyse psychologique ou de personnalit\u00e9 de cette individu. Pour repr\u00e9senter cela graphiquement on peut utiliser des sliders et des curseurs associ\u00e9s \u00e0 des titres ou des libell\u00e9s. Le programme SVG Sliders r\u00e9alise cela pour vous. Pas besoin d&rsquo;un programme de dessin il suffit d&rsquo;indiquer dans svg slider les valeurs des curseurs, l&rsquo;aspect graphique du slider et des curseurs, les polices utilis\u00e9s, les espacements entre les \u00e9l\u00e9ment et il vous cr\u00e9e le slider en svg. Il suffit ensuite de l&rsquo;enregistrer, d&rsquo;\u00e9ventuellement l&rsquo;am\u00e9liorer avec un logiciel comme Illustrator et vos pouvez l&rsquo;ajouter \u00e0 votre persona. Bien s\u00fbr, il n&rsquo;est pas limit\u00e9 \u00e0 un persona et peu servir \u00e0 plein d&rsquo;activit\u00e9 autre si le but est de r\u00e9aliser un slider.<\/li>\n\n\n\n<li><strong>SVG and HTML Font Comparator<\/strong> : \u00e0 la r\u00e9alisation du programme pr\u00e9c\u00e9dent j&rsquo;ai eu \u00e0 un moment un probl\u00e8me de positionnement du texte SVG du fait de l&rsquo;espacement autour de la police. Pour positionner correctement la police par rapport aux sliders, je devais conna\u00eetre exactement la place utilis\u00e9 par la police de caract\u00e8res en faisant abstraction de l&rsquo;espace autour du texte, mesurer ce qu&rsquo;on appelle les bounding box en javascript. De l\u00e0, j&rsquo;ai bifurqu\u00e9 vers un programme permettant de visualiser les polices fixes et ce qu&rsquo;on appelle les polices variables. Ces derni\u00e8res polices sont des polices am\u00e9lior\u00e9es. Par exemple, une police fixe ne contient qu&rsquo;une seule graisse (thin, regular, bold), il y a donc autant de fichiers que de graisses \u2014 pareil pour les italiques, pareil pour les condens\u00e9s. Dans une police variable on a l&rsquo;ensemble de ces \u00e9l\u00e9ments dans un seul fichier mais on peut avoir en plus d&rsquo;autres \u00e9volutions de la police dans des variables qu&rsquo;on appellent axes. On peut par exemple jouer sur l&rsquo;italique d&rsquo;un mot, avoir des graisses interm\u00e9diaires, changer la forme de la lettre suivant nos propres crit\u00e8res du moins s&rsquo;ils sont int\u00e9gr\u00e9s \u00e0 la police. Ce qui permet une grande cr\u00e9ativit\u00e9 mais aussi une justesse de la forme int\u00e9ressante. Le programme SVG and HTML Font Comparator permet une visualisation des polices dans toutes leurs sp\u00e9cificit\u00e9s et affiche les axes de celles-ci si elles sont variables sous formes de curseurs afin de pouvoir tester et d\u00e9couvrir ces polices au-mieux avant un usage sur le web.<\/li>\n\n\n\n<li><strong>Font Converter Api<\/strong> : Api cr\u00e9\u00e9e sous Node.js permettant la conversion de polices de caract\u00e8res; TTC vers woff ou woff2, woff ou woff2 vers TTF. Cette Api fonctionne par le t\u00e9l\u00e9chargement de la police \u00e0 convertir et l&rsquo;envoi vers l&rsquo;Api.<\/li>\n\n\n\n<li><strong>Azuleo simulateur<\/strong> : comme son nom l&rsquo;indique il s&rsquo;agit d&rsquo;un simulateur. Mon projet de fin de TP CDUI est le site d&rsquo;une entreprise de vente de pi\u00e8ces en gr\u00e9 c\u00e9rame, carreaux de ciment et c\u00e9ramiques r\u00e9alis\u00e9s par des moyens modernes. Si la technologie reste la m\u00eame pour le gr\u00e9 c\u00e9rame et les carreaux de ciments des particularit\u00e9s font entrer les produits de Azul\u00e9o Zelliges dans le 21\u00e8me si\u00e8cle. 1) la d\u00e9coupe de pi\u00e8ces au jet d&rsquo;eau ou au laser \u00e0 fibre 2) la r\u00e9alisation de pi\u00e8ce de c\u00e9ramiques en impression 3D du mod\u00e8le unique \u00e0 la pr\u00e9-s\u00e9rie. Pour les zelliges en gr\u00e9 c\u00e9rame cela permet d&rsquo;utiliser l&rsquo;ensemble de mon catalogue de pi\u00e8ces pour la r\u00e9alisation de motif en zelliges. J&rsquo;ai donc cr\u00e9\u00e9 un simulateur en javascript g\u00e9n\u00e9rant les motifs et permettant de les modifier au niveau des couleurs. Une base de motif est cr\u00e9\u00e9e \u00e0 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\u00e9ation ludique des motifs.<\/li>\n\n\n\n<li><strong>Ceramic Tiles Generator<\/strong> &#8211; Dans le cadre du projet Azul\u00e9o Zelliges, une s\u00e9rie de scripts en python permettant \u00e0 partir de fichiers textes simple de r\u00e9aliser des SVG, PNG et GIF anim\u00e9s de polygones r\u00e9guliers ou irr\u00e9guliers\n<ul class=\"wp-block-list\">\n<li><strong>Polygon Angle Filter<\/strong><\/li>\n\n\n\n<li><strong>SVG Zellige Calculator<\/strong><\/li>\n\n\n\n<li><strong>SVG Rotator<\/strong><\/li>\n\n\n\n<li><strong>PNG Tile Generator<\/strong><\/li>\n\n\n\n<li><strong>Gif Animation Generator<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>Dans le cadre du stage effectu\u00e9 chez Ordiformation<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>OF-Custom<\/strong> : R\u00e9alisation d&rsquo;un plugin WordPress permettant de g\u00e9rer dans WordPress les types de publications personnalis\u00e9es d&rsquo;une offre de formation au Format Lh\u00e9o (XML) \u2014 le format Lh\u00e9o est un format cr\u00e9\u00e9 par le gouvernement fran\u00e7ais pour standardiser les offres de formations et pouvoir les inclure sur une plateforme commune.<\/li>\n\n\n\n<li><strong>XML Validation Api<\/strong> : Api \u00e9crite sous Node.js permettant de valider un fichier XML cr\u00e9\u00e9 avec OF-Custom avant de l&rsquo;envoyer sur la plateforme de l&rsquo;EDOF (espace d\u00e9di\u00e9 aux organismes de formations).<\/li>\n\n\n\n<li><strong>Ordiformation_2025<\/strong> : th\u00e8me enfant de WordPress permettant l&rsquo;affichage des offres de formations. Ce th\u00e8me contient aussi des ent\u00eates et des pieds de pages personnalis\u00e9s, des fonctions pour l&rsquo;affichage de videos ou d&rsquo;un module de recherche sur certaines pages, l&rsquo;affichage du fil d&rsquo;ariane. En plus il contient une page de charte graphique et une page listant l&rsquo;ensemble des styles wordpress utilis\u00e9s par WordPress, le th\u00e8me, les plugins afin de comparer et d&rsquo;ajuster le th\u00e8me enfant et les autres styles CSS avec la charte graphique.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cette partie plus particuli\u00e8re rassemble l&rsquo;ensemble des r\u00e9alisations faites dans ou hors du cadre du CDUI mais utiles pour le [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-922","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/portfolio.tsao-tsao.com\/index.php?rest_route=\/wp\/v2\/pages\/922","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portfolio.tsao-tsao.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/portfolio.tsao-tsao.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/portfolio.tsao-tsao.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/portfolio.tsao-tsao.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=922"}],"version-history":[{"count":24,"href":"https:\/\/portfolio.tsao-tsao.com\/index.php?rest_route=\/wp\/v2\/pages\/922\/revisions"}],"predecessor-version":[{"id":1039,"href":"https:\/\/portfolio.tsao-tsao.com\/index.php?rest_route=\/wp\/v2\/pages\/922\/revisions\/1039"}],"wp:attachment":[{"href":"https:\/\/portfolio.tsao-tsao.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}