https://arts-numeriques.codedrops.net/ artsnumeriques est le support des cours de Stéphane Noel, professeur à l'école de recherche graphique. fr SPIP - www.spip.net https://arts-numeriques.codedrops.net/Manchester-Baby-le-premier-ordinateur-Von-Neuman https://arts-numeriques.codedrops.net/Manchester-Baby-le-premier-ordinateur-Von-Neuman 2024-01-19T22:02:41Z text/html fr Stéphane Noel <p>1948 <br class='autobr' /> Le mathématicien Von Neuman écrit un rapport proposant une architecture d'ordinateur révolutionnaire : le programme et les données qu'il manipule y sont stocké tout deux dans une "mémoire". C'est conceptuellement puissant mais cette "mémoire" est purement théorique, car elle n'existe pas au moment où le rapport est écrit. C'est à l'université de Manchester que Freddie Williams, Tom Kilburn et Geoff Tootil vont concevoir la Small-Scale Experimental Machine, surnommée "The baby", sur (…)</p> - <a href="https://arts-numeriques.codedrops.net/-Chronologie-" rel="directory">Chronologie</a> <img src='https://arts-numeriques.codedrops.net/local/cache-vignettes/L150xH100/crt_memory-576f6.jpg?1726920047' class='spip_logo spip_logo_right' width='150' height='100' alt="" /> <div class='rss_chapo'><p>1948</p></div> <div class='rss_texte'><p>Le mathématicien Von Neuman écrit un rapport proposant une architecture d'ordinateur révolutionnaire : le programme et les données qu'il manipule y sont stocké tout deux dans une "mémoire". C'est conceptuellement puissant mais cette "mémoire" est purement théorique, car elle n'existe pas au moment où le rapport est écrit. C'est à l'université de Manchester que Freddie Williams, Tom Kilburn et Geoff Tootil vont concevoir la Small-Scale Experimental Machine, surnommée "The baby", sur laquelle fut exécuté le premier programme enregistré, le 21 juin 1948. <br class='autobr' /> La mémoire utilisée est un tube Williams, c'est-à-dire un tube cathodique. La machine a essentiellement été conçue pour tester le concept de mémoire et donc l'architecture de Von Neuman. L'un des trois programme que la machine exécutera fut écrit par Alan Turing.</p></div> https://arts-numeriques.codedrops.net/La-machine-de-Turing https://arts-numeriques.codedrops.net/La-machine-de-Turing 2023-07-16T19:38:09Z text/html fr Stéphane Noel <p>1936 <br class='autobr' /> Arduino est une pièce d'éléctronique programmable qui peut se comporter comme une interface entre ordinateur et monde réel (capter et activer des actions) ou de manière autonome. C'est un projet open source entouré d'une large communauté. Le langage de programmation d'Arduino est très proche de celui de Processing, dans une interface similaire.</p> - <a href="https://arts-numeriques.codedrops.net/-Chronologie-" rel="directory">Chronologie</a> <img src='https://arts-numeriques.codedrops.net/local/cache-vignettes/L150xH83/maquina-7984d.png?1726920047' class='spip_logo spip_logo_right' width='150' height='83' alt="" /> <div class='rss_chapo'><p>1936</p></div> <div class='rss_texte'><p><a href="http://www.arduino.cc/">Arduino</a> est une pièce d'éléctronique programmable qui peut se comporter comme une interface entre ordinateur et monde réel (capter et activer des actions) ou de manière autonome. C'est un projet open source entouré d'une large communauté. Le langage de programmation d'Arduino est très proche de celui de Processing, dans une interface similaire.</p></div> https://arts-numeriques.codedrops.net/Carlson-produit-une-electrophotographie https://arts-numeriques.codedrops.net/Carlson-produit-une-electrophotographie 2023-07-15T13:05:37Z text/html fr Stéphane Noel <p>1938 <br class='autobr' /> Chester Carlson produit la première photocopie le 22 octobre 1938 avec l'aide du physicien allemand Otto Kornei, et basée sur les recherches théoriques du français Jean-Jacques Trillat. Carlson dépose un brevet le 6 octobre 1942. Le procédé de fabrication de copie basée sur l'électricité statique est connue depuis des dizaines d'années, mais basé sur une charge obtenue avec de la lumière ou du frottement. Carlson obtient un résultat stable en testant différents supports et méthode (…)</p> - <a href="https://arts-numeriques.codedrops.net/-Chronologie-" rel="directory">Chronologie</a> <img src='https://arts-numeriques.codedrops.net/local/cache-vignettes/L150xH87/carlson-first_xerox-7466e.jpg?1726920047' class='spip_logo spip_logo_right' width='150' height='87' alt="" /> <div class='rss_chapo'><p>1938</p></div> <div class='rss_texte'><p>Chester Carlson produit la première photocopie le 22 octobre 1938 avec l'aide du physicien allemand Otto Kornei, et basée sur les recherches théoriques du français Jean-Jacques Trillat. Carlson dépose un brevet le 6 octobre 1942. Le procédé de fabrication de copie basée sur l'électricité statique est connue depuis des dizaines d'années, mais basé sur une charge obtenue avec de la lumière ou du frottement. Carlson obtient un résultat stable en testant différents supports et méthode de charge électro-statique, mais s'attèle surtout à rendre plus rapide l'ensemble des manipulations et plus compact l'espace nécessaire à produire ce qui deviendra la photocopieuse. <br class='autobr' /> Le brevet de Carlson est refusé par Kodak, puis acheté par la compagnie Heloid qui après différentes fusions devient Xérox. Le brevet initial de la production de photocopie sur papier standard est d'une durée de 20 ans, alors que le secteur tertiaire se développe fortement après-guerre, et Xerox engrange des bénéfices faramineux. Une partie de la fortune colossale sera investie dans le Xerox Parc, lieu central dans le développement de l'informatique.</p></div> https://arts-numeriques.codedrops.net/Xerox-Alto-et-la-metaphore-de-bureau https://arts-numeriques.codedrops.net/Xerox-Alto-et-la-metaphore-de-bureau 2023-01-12T21:51:00Z text/html fr Stéphane Noel <p>1973 <br class='autobr' /> L'Alto était un outil de recherche pour Xerox autour de la question de l'interfaçage homme/machine. Continuité des travaux de Douglas Engelbart dans les années 60, il reprend l'idée d'une interface graphique et le "cliquer-pointer". Alan Kay et Bill English (qui a travaillé avec Engelbart au Augmentation Research Center avant de rejoindre le Xerox Park), notamment, travailleront au développement des outils d'interfaçage. Vers la fin des années 1970, environ 1000 exemplaires étaient (…)</p> - <a href="https://arts-numeriques.codedrops.net/-Chronologie-" rel="directory">Chronologie</a> <img src='https://arts-numeriques.codedrops.net/local/cache-vignettes/L150xH118/arton661-3b2fe.jpg?1726920047' class='spip_logo spip_logo_right' width='150' height='118' alt="" /> <div class='rss_chapo'><p>1973</p></div> <div class='rss_texte'><p>L'Alto était un outil de recherche pour Xerox autour de la question de l'interfaçage homme/machine. Continuité des travaux de Douglas Engelbart dans les années 60, il reprend l'idée d'une interface graphique et le "cliquer-pointer". Alan Kay et Bill English (qui a travaillé avec Engelbart au Augmentation Research Center avant de rejoindre le Xerox Park), notamment, travailleront au développement des outils d'interfaçage. Vers la fin des années 1970, environ 1000 exemplaires étaient utilisés dans divers laboratoires Xerox, et approximativement 500 exemplaires dans plusieurs universités.<br class='autobr' /> Les laboratoires du Xerox Park seront visités par de nombreux jeunes ingénieurs, et certains y feront des stages. Parmi eux Steve Jobs et Bill Gates, qui reprendront plusieurs concepts développés dans le développement des operating system de Apple et Microsoft.</p></div> https://arts-numeriques.codedrops.net/Semi-Automatic-Ground-Environment-SAGE https://arts-numeriques.codedrops.net/Semi-Automatic-Ground-Environment-SAGE 2022-11-26T16:03:13Z text/html fr Stéphane Noel <p>1959 <br class='autobr' /> Conçu autour d'un réseau de macroordinateurs (mainframe computer), de nombreux sites de stations radar dont ceux de la ligne Pinetree puis la ligne DEW, et de la liste des capacités offensives disponibles (missiles, chasse, etc.), il permettait de produire en temps réel une image unifiée de l'espace aérien à l'échelle du territoire national et de pouvoir apporter une réponse tactique immédiate en cas de danger. SAGE est le cÅ“ur du dispositif du Commandement de la défense (…)</p> - <a href="https://arts-numeriques.codedrops.net/-Chronologie-" rel="directory">Chronologie</a> <img src='https://arts-numeriques.codedrops.net/local/cache-vignettes/L150xH110/arton660-9051d.jpg?1726920048' class='spip_logo spip_logo_right' width='150' height='110' alt="" /> <div class='rss_chapo'><p>1959</p></div> <div class='rss_texte'><p>Conçu autour d'un réseau de macroordinateurs (mainframe computer), de nombreux sites de stations radar dont ceux de la ligne Pinetree puis la ligne DEW, et de la liste des capacités offensives disponibles (missiles, chasse, etc.), il permettait de produire en temps réel une image unifiée de l'espace aérien à l'échelle du territoire national et de pouvoir apporter une réponse tactique immédiate en cas de danger. SAGE est le cÅ“ur du dispositif du Commandement de la défense aérospatiale de l'Amérique du Nord et du Air Defense Command face à une hypothétique attaque aérienne. Son caractère secret, ses énormes ordinateurs et ses écrans gigantesques ont fondé une partie du folklore de la guerre froide, ainsi qu'on peut le voir dans des films comme Docteur Folamour et Le cerveau d'acier.</p></div> https://arts-numeriques.codedrops.net/Le-Ferranti-Mark-1-premier-ordinateur-commercialise https://arts-numeriques.codedrops.net/Le-Ferranti-Mark-1-premier-ordinateur-commercialise 2022-11-18T23:19:21Z text/html fr Stéphane Noel <p>1951 <br class='autobr' /> La première machine fut livrée à l'université de Manchester en février 1951, juste avant l'UNIVAC I livré au Bureau du recensement des États-Unis un mois plus tard. La machine fut construite par Ferranti au Royaume-Uni. Elle était basée sur le Manchester Mark I, conçu à l'université de Manchester par Frederic Calland Williams et Tom Kilburn. Le Manchester Mark I servit de prototype pour le Ferranti Mark I ; les principales améliorations étaient la taille de la mémoire vive et de la (…)</p> - <a href="https://arts-numeriques.codedrops.net/-Chronologie-" rel="directory">Chronologie</a> <img src='https://arts-numeriques.codedrops.net/local/cache-vignettes/L150xH104/arton659-3b632.jpg?1726920048' class='spip_logo spip_logo_right' width='150' height='104' alt="" /> <div class='rss_chapo'><p>1951</p></div> <div class='rss_texte'><p>La première machine fut livrée à l'université de Manchester en février 1951, juste avant l'UNIVAC I livré au Bureau du recensement des États-Unis un mois plus tard. La machine fut construite par Ferranti au Royaume-Uni. Elle était basée sur le Manchester Mark I, conçu à l'université de Manchester par Frederic Calland Williams et Tom Kilburn. Le Manchester Mark I servit de prototype pour le Ferranti Mark I ; les principales améliorations étaient la taille de la mémoire vive et de la mémoire morte, un multiplieur plus rapide et des instructions supplémentaires.</p></div> https://arts-numeriques.codedrops.net/L-architecture-de-von-Neumann https://arts-numeriques.codedrops.net/L-architecture-de-von-Neumann 2022-11-18T23:13:46Z text/html fr Stéphane Noel <p>1945 <br class='autobr' /> L'architecture dite architecture de von Neumann est un modèle pour un ordinateur qui utilise une structure de stockage unique pour conserver à la fois les instructions et les données demandées ou produites par le calcul. De telles machines sont aussi connues sous le nom d'ordinateur à programme enregistré. La séparation entre le stockage et le processeur est implicite dans ce modèle. <br class='autobr' /> Cette architecture est appelée ainsi en référence au mathématicien John von Neumann, qui a élaboré (…)</p> - <a href="https://arts-numeriques.codedrops.net/-Chronologie-" rel="directory">Chronologie</a> <img src='https://arts-numeriques.codedrops.net/local/cache-vignettes/L150xH143/arton658-dd0d3.png?1726920048' class='spip_logo spip_logo_right' width='150' height='143' alt="" /> <div class='rss_chapo'><p>1945</p></div> <div class='rss_texte'><p>L'architecture dite architecture de von Neumann est un modèle pour un ordinateur qui utilise une structure de stockage unique pour conserver à la fois les instructions et les données demandées ou produites par le calcul. De telles machines sont aussi connues sous le nom d'ordinateur à programme enregistré. La séparation entre le stockage et le processeur est implicite dans ce modèle.</p> <p>Cette architecture est appelée ainsi en référence au mathématicien John von Neumann, qui a élaboré en juin 1945 dans le cadre du projet EDVAC1 la première description d'un ordinateur dont le programme est stocké dans sa mémoire.</p> <p>Alan Turing, John William Mauchly et John Eckert (pendant leurs travaux sur l'ENIAC) ont également utilisé ce concept ou une idée proche, et ce indépendamment de von Neumann.</p></div> https://arts-numeriques.codedrops.net/La-machine-analytique-de-Babbage https://arts-numeriques.codedrops.net/La-machine-analytique-de-Babbage 2022-11-18T23:07:54Z text/html fr Stéphane Noel <p>1834 <br class='autobr' /> C'est pendant le développement d'une machine à calculer destinée au calcul et à l'impression de tables mathématiques (machine à différences) que Babbage eut l'idée d'y incorporer des cartes du métier Jacquard, dont la lecture séquentielle donnerait des instructions et des données à sa machine, et donc imagina, malgré des différences notables de fonctionnement (elle fonctionnait à la vapeur avec des roues et engrenages mécaniques), l'ancêtre des ordinateurs modernes. <br class='autobr' /> C'est au cours (…)</p> - <a href="https://arts-numeriques.codedrops.net/-Chronologie-" rel="directory">Chronologie</a> <img src='https://arts-numeriques.codedrops.net/local/cache-vignettes/L150xH144/arton657-ac143.jpg?1726920048' class='spip_logo spip_logo_right' width='150' height='144' alt="" /> <div class='rss_chapo'><p>1834</p></div> <div class='rss_texte'><p>C'est pendant le développement d'une machine à calculer destinée au calcul et à l'impression de tables mathématiques (machine à différences) que Babbage eut l'idée d'y incorporer des cartes du métier Jacquard, dont la lecture séquentielle donnerait des instructions et des données à sa machine, et donc imagina, malgré des différences notables de fonctionnement (elle fonctionnait à la vapeur avec des roues et engrenages mécaniques), l'ancêtre des ordinateurs modernes.</p> <p>C'est au cours du développement de cette machine qu'Ada Lovelace formalise les idées de Babbage et développe le premier algorithme de programmation de l'histoire, devenant la première informaticienne de l'humanité.</p></div> https://arts-numeriques.codedrops.net/Afficher-des-posts-verticalement-avec-un-effet-d-apparition https://arts-numeriques.codedrops.net/Afficher-des-posts-verticalement-avec-un-effet-d-apparition 2021-05-01T15:54:21Z text/html fr Stéphane Noel <p>Cette page permet de faire apparaitre des posts dans l'ordre (verticalement) mais aléatoirement horizontalement, avec quelques tailles spécifiques en largeur. <br class='autobr' /> Les images apparaissent en scroll avec un effet de mouvement et de fondu. <br class='autobr' /> Lazyload + détection de présence dans le viewport <br class='autobr' /> Le chargement de ces images utilise lazyload, un type de script qui vérifie lors du scroll de la page si les images vont entrer dans le viewport (la partie visible de la page) et déclenche leur (…)</p> - <a href="https://arts-numeriques.codedrops.net/-Wordpress-par-l-exemple-le-theme-theme_base-" rel="directory">Wordpress par l'exemple : le thème theme_base</a> <img src='https://arts-numeriques.codedrops.net/local/cache-vignettes/L150xH118/arton656-b1d77.jpg?1726920048' class='spip_logo spip_logo_right' width='150' height='118' alt="" /> <div class='rss_chapo'><p>Cette page permet de faire apparaitre des posts dans l'ordre (verticalement) mais aléatoirement horizontalement, avec quelques tailles spécifiques en largeur.<br class='autobr' /> Les images apparaissent en scroll avec un effet de mouvement et de fondu.</p></div> <div class='rss_texte'><p>Lazyload + détection de présence dans le viewport<br class='autobr' /> Le chargement de ces images utilise lazyload, un type de script qui vérifie lors du scroll de la page si les images vont entrer dans le viewport (la partie visible de la page) et déclenche leur chargement si c'est le cas.</p> <p>Un deuxième script vérifie si l'image est chargée et effectivement dans le viewport, et si c'est le cas la fait apparaitre.</p> <p>La librairie "<a href="https://github.com/verlok/vanilla-lazyload/" class="spip_out" rel="external">vanilla lazyload</a>" est utilisée par le script qui ne s'appuie pas sur jQuery.</p> <p>Le document zippé ci-joint fournit le code complet sous la forme d'un template part pour wordpress, accompagné du fichier lazyload prévu pour être placé dans le dossier "assets" du thème theme_base.</p></div> https://arts-numeriques.codedrops.net/Afficher-les-articles-en-accordeon https://arts-numeriques.codedrops.net/Afficher-les-articles-en-accordeon 2021-03-28T16:35:45Z text/html fr Stéphane Noel <p>Cacher et déplier le contenu d'articles est facile avec bootstrap, car un module a été codé pour ça. <br class='autobr' /> Qu'est ce qu'un accordéon en développement web Un accordéon, sur le web, est un mode d'affichage dans lequel on affiche pour chaque élément une barre horizontale, et en clic on déplie l'information complète. <br class='autobr' /> Un code déjà prêt sur le site de Bootstrap En fait, les systèmes d'accordéon sont couant sur le web, et Bootstrap dispose de codes html/css/javascript intégrés. Il (…)</p> - <a href="https://arts-numeriques.codedrops.net/-Wordpress-par-l-exemple-le-theme-theme_base-" rel="directory">Wordpress par l'exemple : le thème theme_base</a> <img src='https://arts-numeriques.codedrops.net/local/cache-vignettes/L150xH102/arton655-1a06a.png?1726920048' class='spip_logo spip_logo_right' width='150' height='102' alt="" /> <div class='rss_chapo'><p>Cacher et déplier le contenu d'articles est facile avec bootstrap, car un module a été codé pour ça.</p></div> <div class='rss_texte'><h2 class="spip">Qu'est ce qu'un accordéon en développement web</h2> <p>Un accordéon, sur le web, est un mode d'affichage dans lequel on affiche pour chaque élément une barre horizontale, et en clic on déplie l'information complète.</p> <p><span class='spip_document_1255 spip_documents spip_documents_center'><img src='https://arts-numeriques.codedrops.net/local/cache-vignettes/L500xH304/accordeon-5de4d.jpg?1726920048' width='500' height='304' alt="" /></span></p> <h2 class="spip">Un code déjà prêt sur le site de Bootstrap</h2> <p>En fait, les systèmes d'accordéon sont couant sur le web, et Bootstrap dispose de codes html/css/javascript intégrés. Il nous suffit donc de copier <a href="https://getbootstrap.com/docs/5.0/components/accordion/" class="spip_out" rel="external">le code sur le site de documentation de Bootstrap</a> et de le placer dans un template part pour que ça marche.</p> <p>Il n'y a même pas à placer de code javascript, le tout fonctionne d'emblée.</p> <h2 class="spip">Placer le code de la boucle Wordpress</h2> <p>Le seul travail à faire sera donc d'intégrer la boucle wordpress à ce code, et choisir quelles informations afficher.</p> <p>Voici un premier exemple simple avec le titre dans la partie visible et le reste de l'article dans la partie cachée.</p> <p><span class='spip_document_1258 spip_documents spip_documents_center'><img src='https://arts-numeriques.codedrops.net/local/cache-vignettes/L500xH290/accordeon-3-6bde5.png?1726920049' width='500' height='290' alt="" /></span></p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><?php // code à placer dans un template_part // on garde la requete par defaut $temp_query = $wp_query; $args = array( 'post_type' => array( 'post' ), //'category_name' => 'identite-graphique,illustration', 'posts_per_page' => '10', 'order_by' => 'ASC', ); query_posts($args); $compteur=0; ?> <main class="container py-5"> <?php if(have_posts()) : ?> <div class="accordion accordion-flush" id="accordeon_theme_base"> <?php while(have_posts()) : the_post(); ?> <div class="accordion-item"> <h2 class="accordion-header" id="flush-heading<?php the_id(); ?>"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse<?php the_id(); ?>" aria-expanded="false" aria-controls="flush-collapse<?php the_id(); ?>"> <?php the_title(); ?> </button> </h2> <div id="flush-collapse<?php the_id(); ?>" class="accordion-collapse collapse" aria-labelledby="flush-heading<?php the_id(); ?>" data-bs-parent="#accordeon_theme_base"> <div class="accordion-body"> <?php the_content(); ?> </div> </div> </div> <?php endwhile; ?> </div> <?php endif; ?> </main> <?php /* retrouver la query de base */ $wp_query = $temp_query; ?></code></pre></div> <p>Il est à noter qu'il n'est pas possible de placer des liens dans la partie "titre" de l'accordéon : cliquer sur cette partie ouvre ou ferme le contenu, c'est tout.</p> <p>Voici une exemple plus poussé, avec un logo et les catégories en plus.</p> <p>Son code :</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><?php // on garde la requete par defaut $temp_query = $wp_query; $args = array( 'post_type' => array( 'post' ), //'category_name' => 'identite-graphique,illustration', 'posts_per_page' => '10', 'order_by' => 'ASC', ); query_posts($args); $compteur=0; ?> <main class="container py-5"> <?php if(have_posts()) : ?> <div class="accordion accordion-flush" id="accordeon_theme_base"> <?php while(have_posts()) : the_post(); ?> <div class="accordion-item"> <h2 class="accordion-header" id="flush-heading<?php the_id(); ?>"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse<?php the_id(); ?>" aria-expanded="false" aria-controls="flush-collapse<?php the_id(); ?>"> <div class="row w-100 align-items-end justify-content-start decoration-hover"> <div class="col-auto"> <?php the_post_thumbnail('rectangle', array( 'class' => 'image_accordeon' )); ?> </div> <div class="col titre-grand"> <?php the_title(); ?> </div> <div class="col texte-minus pe-5 text-end"> <?php the_category(', '); ?> </div> </div> </button> </h2> <div id="flush-collapse<?php the_id(); ?>" class="accordion-collapse collapse" aria-labelledby="flush-heading<?php the_id(); ?>" data-bs-parent="#accordeon_theme_base"> <div class="accordion-body"> <?php the_content(); ?> </div> </div> </div> <?php endwhile; ?> </div> <?php endif; ?> </main> <style> .image_accordeon { height:3em; width:auto; } </style> <?php /* retrouver la query de base */ $wp_query = $temp_query; ?></code></pre></div> <p>Le résultat :</p> <p><span class='spip_document_1257 spip_documents spip_documents_center'><img src='https://arts-numeriques.codedrops.net/local/cache-vignettes/L500xH340/accordeon-2-b40f4.png?1726920049' width='500' height='340' alt="" /></span></p></div>