Arts numériques

Afficher des posts verticalement avec un effet d'apparition

Stéphane Noel — 2021-05-01T15:54:21Z

Cette page permet de faire apparaitre des posts dans l'ordre (verticalement) mais alÃ©atoirement horizontalement, avec quelques tailles spÃ©cifiques en largeur.
Les images apparaissent en scroll avec un effet de mouvement et de fondu.

Lazyload + dÃ©tection de prÃ©sence dans le viewport
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.

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.

La librairie "vanilla lazyload" est utilisÃ©e par le script qui ne s'appuie pas sur jQuery.

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.

Afficher les articles en "accordÃ©on"

Stéphane Noel — 2021-03-28T16:35:45Z

Cacher et dÃ©plier le contenu d'articles est facile avec bootstrap, car un module a Ã©tÃ© codÃ© pour Ã§a.

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.

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 nous suffit donc de copier le code sur le site de documentation de Bootstrap et de le placer dans un template part pour que Ã§a marche.

Il n'y a mÃªme pas Ã placer de code javascript, le tout fonctionne d'emblÃ©e.

Placer le code de la boucle Wordpress

Le seul travail Ã faire sera donc d'intÃ©grer la boucle wordpress Ã ce code, et choisir quelles informations afficher.

Voici un premier exemple simple avec le titre dans la partie visible et le reste de l'article dans la partie cachÃ©e.

 array( 'post' ), //'category_name' => 'identite-graphique,illustration', 'posts_per_page' => '10', 'order_by' => 'ASC', ); query_posts($args); $compteur=0; ?>      ">  
 " class="accordion-collapse collapse" aria-labelledby="flush-heading" data-bs-parent="#accordeon_theme_base">

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.

Voici une exemple plus poussÃ©, avec un logo et les catÃ©gories en plus.

Son code :

 array( 'post' ), //'category_name' => 'identite-graphique,illustration', 'posts_per_page' => '10', 'order_by' => 'ASC', ); query_posts($args); $compteur=0; ?>      ">  
 " class="accordion-collapse collapse" aria-labelledby="flush-heading" data-bs-parent="#accordeon_theme_base">

Le rÃ©sultat :

Des posts "draggables" en homepage

Stéphane Noel — 2021-03-27T17:07:07Z

Plusieurs fois demandÃ©, voici un exemple de code permettant de placer des Ã©lÃ©ments alÃ©atoirement dans l'espace de la page, et pouvant Ãªtre dÃ©placÃ©s avec la souris.

Comment aborder ce genre de cas ?

Ce cas est surtout intÃ©ressant parce qu'Ã partir d'une demande, il faut rechercher les solutions techniques pour y rÃ©pondre.

Nous devons Ãªtre en mesure de :
– disposer alÃ©atoirement des Ã©lÃ©ments dans l'espace d'un bloc
– permettre leur dÃ©placement par drag & drop
– mettre Ã l'avant plan le bloc lorsqu'il est cliquÃ©

Ces trois choses passent par du javascript, et la premiÃ¨re chose Ã faire sera de trouver une librairie javascript pour gÃ©rer le "drag & drop". Une recherche rapide sur le net permet de trouver plusieurs librairies open source le permettant. AprÃ¨s avoir lu la documentation et regardÃ© les dÃ©mos, j'ai choisi la librairie displace, trÃ¨s lÃ©gÃ¨re et qui permet de faire le travail.

Test "hors Wordpress"

La premiÃ¨re chose Ã faire est de modÃ©liser notre demande en dehors du thÃ¨me wordpress. Ã‡a peut sembler idiot, mais parfois les librairies peuvent s'avÃ©rer difficile Ã mettre en place. Dominer techniquement la mise en place des Ã©lÃ©ments en htl/css/javascript est donc une bonne faÃ§on de vÃ©rifier qu'on est capable de mettre au travail la librairie. Si un problÃ¨me survient qui empÃªche le bon fonctionnement du code, il sera plus facile de dÃ©bugguer ou dÃ©cider que ce n'est pas la bonne librairie pour la tÃ¢che qui nous incombe.

Voici le code qui permet de tester la base, sans le placement alÃ©atoire, juste pour voir si le drag & drop fonctionne :

     Un test de drag & drop     Element un
Un lien
 Element deux
 Element trois
 Element quatre
 Element cinq

Pour que ce code fonctionne, il faut que la librairie displace.min.js soit placÃ©e dans le mÃªme rÃ©pertoire que notre page html, Ã©videmment. On obtient aprÃ¨s quelques mouvements, ceci :

Il manque deux choses pour ce code :
– le placement alÃ©atoire des blocs
– le changement de position en cas de changement de taille de la page

Je vous Ã©pargne ces codes que je place dans la dÃ©mo complÃ¨te ici :

Code en version pur html/css/javascript

Avec la librairie

CrÃ©er un tempate part pour le code

Une fois le test rÃ©ussi, on place le code dans un template part de Wordpress.
L'utilisation d'un template part n'est pas obligatoire, mais permet d'isoler facilement le code.

Voici la portion de code et la librairie displace.min.js, qui doit Ãªtre placÃ©e dans le dossier assets/ (sans quoi Ã§a ne marchera pas, Ã©videment.

Le template part et la librairie displace

N'oubliez pas de placer ces Ã©lÃ©ments au bon endroit : le template part dans le dossier morceaux/ et le fichier javascript dans assets/

Le code pour placer ce template part dans la page home.php du thÃ¨me "theme_base" :

Code pour un scroll horizontal

Stéphane Noel — 2021-03-21T22:56:19Z

Le code se base au maximum sur Bootstrap. Il utilise cependant un peu de javascript pour calculer la taille du scroll horizontal.
Il affiche le contenu de la boucle, prÃ©cÃ©dÃ© par une page appelÃ©e "Baseline" si elle existe.

OÃ¹ placer ce code

Ce code peut Ãªtre dÃ©posÃ© dans un template part et appelÃ© avec le code d'inclusion de ceux-ci. Pour un template part du nom de home__scroll_horizontal.php, on aura donc :

get_template_part( 'morceaux/home_scroll_horizontal' );

Il peut aussi Ãªtre codÃ© directement dans la page home par exemple. Dans ce cas, on ajoutera les fonctions get_header() et get_footer() avant et aprÃ¨s le code.

Le code

   'page', 'title' => 'Baseline' ); query_posts($args); if(have_posts()) : ?>    
 
      ">   'mw-100 mh-100' )); ?>
  " title="">

La navigation et le footer

La navigation :

   " class="titre-petit text-primary">   'menu-principal', 'container' => 'div', 'container_id' => 'navbarSupportedContent', 'container_class' => 'collapse navbar-collapse ', //'collapse navbar-collapse justify-content-end', 'menu_id' => false, 'menu_class' => 'navbar-nav ms-auto', 'depth' => 3, 'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 'walker' => new wp_bootstrap_navwalker() )); ?>

Le footer

  " rel="home"> est un site Wordpress accompagnÃ© du thÃ¨me gr3_minimal

Stéphane Noel — 2021-03-19T11:03:56Z

Ce code utilise les StringList, qui permettent une manipulation plus facile des Strings que les simples variables tableaux : la fonction shuffle() permet un mÃ©lange des Strings, et remove() permet de supprimer la String dÃ©jÃ utilisÃ©e.

Ã‡a donne ceci en terme de code :

String petit="lion_en_societe.txt"; String moyen="loup_chien.txt"; String grand="mouche_lion.txt"; // la stringlist de textes rÃ©cupÃ©rÃ©s StringList mix; //Les 3 textes sous forme de stringlist aussi StringList t1; StringList t2; StringList t3; void setup() { size(600, 800); } void draw() { // on recharge les textes Ã chaque tour, sinon la liste se vide au fur et Ã mesure // remplir la premiÃ¨re stringlist t1=new StringList(); t1 = remplit(t1, petit); // remplir la deuxiÃ¨me stringlist t2=new StringList(); t2 = remplit(t2, moyen); // remplir la troisiÃ¨me stringlist t3=new StringList(); t3 = remplit(t3, grand); background(255); fill(0); // initaliser la stringlist mix = new StringList(); for (int i=0; i<2; i++) { mix.append(portion(t1)); //appel de fonction } for (int i=0; i<3; i++) { mix.append(portion(t2)); //appel de fonction } for (int i=0; i<5; i++) { mix.append(portion(t3)); //appel de fonction } mix.shuffle(); // mettre Ã§a dans un array traditionnel String[] textes = mix.array(); // transformer l'array en une seule string String resultat = join(textes, "\n"); textSize(10); text(resultat, 20, 20, width-40, height); // saveFrame(); noLoop(); } String portion(StringList lequel) { String retour=""; int phasard=int(random(lequel.size())); retour=lequel.get(phasard); // enlever l'Ã©lÃ©ment utilisÃ© de la StringList lequel.remove(phasard); println("la stringlist fait maintenant "+lequel.size()); return retour; } // remplit les stringlists avec les textes StringList remplit(StringList s, String t) { String[] t_complet=loadStrings(t); for (int i=0; i



Une image comme ensemble de particules
Stéphane Noel — 2021-03-15T10:49:44Z

		Un script permettant de reposser les pixels avec la souris et sauver un pdf.
		Le code prend un portrait de Flaubert, remplacez l'image par la vÃ´tre.
// detruire un dessin import processing.pdf.*; boolean saveOneFrame = false; String image_source="flaubert.jpg"; ArrayList pix; PImage im; float nbx=120.0; float nby=120.0; int zone_influence=15; boolean show_stroke=false; void setup() { im=loadImage(image_source); size(634,800); pix=new ArrayList(); for (float px=0;px



CrÃ©er un template en html/css pur
Stéphane Noel — 2021-03-14T15:23:47Z

		Lorsqu'on dÃ©bute, il est difficile de gÃ©rer la crÃ©ation d'un thÃ¨me directement dans un thÃ¨me wordpress : on coupe les fichiers en morceaux, ils sont exÃ©cutÃ©s via la machinerie de Worpress, etc.

On peut en fait dÃ©marrer avec du html pur, et intÃ©grer ensuite le html dans le thÃ¨me morceau par morceau, ce qui peut Ãªtre plus facile.
		Analyser le template
Il s'agit de transformer un wireframe en une page html/css.
Prenons donc le wireframe de la page single, la plus simple Ã analyser. Il s'agit d'en identifier les diffÃ©rents morceaux pour aider la stucture du html. On contrÃ´le que la structure correspond aussi dans la version smartphone.

La particularitÃ© de ce site par rapport Ã un site bootstrap standard est que le titre du site est grand, et que la navigation est placÃ©e en dessous du titre du site et pas Ã sa droite comme c'est massivement le cas. Ã‡a va nous obliger Ã une petite adaptation du code.
Sur base de l'analyse du wireframe, on dÃ©duit une structure html, que l'on place dans une page avec tous les imports nÃ©cessaires de bootstrap (css et js pour le menu, plus les icÃ´nes Ã toutes fins utiles).


Une requÃªte ajax dans un template
Stéphane Noel — 2021-03-08T16:41:32Z

		Charger un contenu en simple clic, sans changer de page, peut Ãªtre cool. Voici quelques bouts de code pour rÃ©ussir Ã§a.
		Plusieurs morceaux de code
La difficultÃ© des requÃªtes en ajax est qu'elles sont constituÃ©es de plusieurs morceaux de code : du html, du javascript, du php et du html encore.

Pour ne pas se perdre il faut comprendre la fonction de ces diffÃ©rents Ã©lÃ©ments.
Un bouton

Le premier Ã©lÃ©ments est un bouton en html, associÃ© Ã une fonction javascript
 
Ce bouton appelle la fonction "charge_article" en lui envoyant l'argument "52", qui est l'id de l'article que nous voulons charger. Remplacez-le par l'id d'un article existant, ou dans une boucle wordpress, par le code php .

Le div avec l'id #conteneur est destinÃ© Ã recevoir le rÃ©sultat de la requÃªte.
Une fonction javascript

Nous allons maintenant Ã©crire la fonction javascript qui reÃ§oit l'appel de fonction, dans un fichier js chargÃ© dans le site ou directement dans la page :

Cette fonction rÃ©cupÃ¨re l'id, puis fait une requÃªte ajax. Javascript va charger une page prÃ©sente dans la machinerie de Wordpress, une page spÃ©cialement dÃ©diÃ©e Ã cet usage.
Une fonction php

La fonction javascript appelle une fonction php du nom de charger_article() et rÃ©cupÃ©rer l'id du post.

Cette fonction doit Ãªtre placÃ©e dans le fichier functions.php du thÃ¨me !
function get_article() { // construire la requÃªte $args = array( 'post_type' => 'post', 'p' => $_REQUEST["post_id"], ); // envoyer $resultat = new WP_Query( $args ); $reponse = ''; // traiter la requÃªte, un seul rÃ©sultat ici if ( $resultat->have_posts() ) { while ( $resultat->have_posts() ) { $resultat->the_post(); $reponse .= get_template_part('morceaux/ajax_article'); } } else { $reponse .= "rien reÃ§u"; // ou faire autre chose } echo $reponse; exit; // fin de la requÃªte } // rendre la requÃªte disponible pour les utilisateur loguÃ©s ou non loguÃ©s add_action('wp_ajax_get_article', 'get_article'); add_action('wp_ajax_nopriv_get_article', 'get_article');
Un template part

Ce n'est pas encore fini ! Ce code fait une requÃªte sur la base de donnÃ©e, et prÃ©pare une boucle wordpress prÃªte Ã l'emploi. Elle appelle alors un template part, un morceau de fichier permettant d'entourer les Ã©lÃ©ments tirÃ©s de la base de donnÃ©e d'un code html permettant son affichage en accord avec le reste du site.

En voici un exemple simple :
 'mb-3' )); ?> 
 
Il affiche l'image mise en avant, le titre et le texte complet, avec un peu de html. On peut Ã©videmment y mettre tout ce qui est possible dans une loop wordpress.
C'est fait !
Chacun de ces fichiers est Ã©videmment amÃ©nageable selon les besoins, mais la logique est posÃ©e.


Fichiers de base
Stéphane Noel — 2021-03-08T00:25:16Z

		Ce thÃ¨me est en cours de dÃ©veloppement, voici une version 0.2 basÃ©e sur Bootstrap 5.
		Templates
Le thÃ¨me comporte les templates :

– home.php

– single.php

– page.php

– archive.php
Ã‰lÃ©ments embarquÃ©s
– Bootstrap version 5 beta2

– les icÃ´nes de Bootstrap 5

– la police Rubik en light, regular, medium et bold
Extras
– des exemples de "templates parts"

– un exemple de template alternatif pour les articles 
– une fonction convertissant les menus de wordpress en menu compatible avec Bootstrap.

– une amÃ©lioration de bootstrap : les tailles de margin, padding, goutiÃ¨res sont codÃ©es en taille 6, 7, 8 et 9, permettant par exemple des paddings et margin en m-6 ou pe-7 par exemple
Attention
Bootstrap 5 modifie certains noms de classe : mr-5 devient me-5 par exemple. Se reporter Ã la documentation officielle pour ne pas avoir de mauvaise surprise.

De mÃªme, jQuery a Ã©tÃ© abndonnÃ© pour cette version, ce qui modifie certains comportements javascript.


PrÃ©parer une structure et un wireframe
Stéphane Noel — 2021-02-28T21:36:18Z

		Un thÃ¨me wordpress se rÃ©flÃ©chit sur base de templates, on l'a vu. Construire un thÃ¨me demande donc d'avoir compris les diffÃ©rents templates accessibles et d'en jouer pour rÃ©pondre Ã la demande. A partir de lÃ , on rÃ©flÃ©chit Ã la structure de chacun de ces templates, gÃ©nÃ©ralement sur base de wireframes avec du papier et un stylo.
		Identifier les besoins
Lors de rÃ©unions prÃ©paratoire, il faut Ã©videmment identifier le besoin auquel rÃ©pondra le site. Typiquement, notre site est un portfolio de graphiste.

On aura besoin de :

– dÃ©finir les compÃ©tences de celui-ci, 
– de montrer l'activitÃ© rÃ©cente, 
– de montrer des productions liÃ©es aux diffÃ©rents champs de compÃ©tence, 
– permettre le contact via un formulaire,

– renvoyer vers les rÃ©seaux sociaux

Le design du site doit Ãªtre en accord avec les choix esthÃ©tiques que dÃ©fend notre graphiste. Ici un design simple, voire minimal, mais orientÃ© sur le contenu et Ã©lÃ©gant.
Identifier la structure
Un site possÃ¨de toujours une page d'entrÃ©e, qui est en gÃ©nÃ©ral la page la plus complexe Ã construire, puisqu'elle contiendra - en plus d'un header et d'un footer - diffÃ©rents contenus piochÃ©s dans la base de donnÃ©e.
Typiquement : la baseline du site, quelques productions rÃ©centes mises en avant, un certain nombre de contenus liÃ©s Ã des catÃ©gories prÃ©cises.
A partir de cette page, le menu et les diffÃ©rents Ã©lÃ©ments de cette page vont pointer vers des contenus spÃ©cifiques, typiquement des pages, des posts et des catÃ©gories.
PrÃ©parer les wireframes de ces diffÃ©rentes page sera donc la premiÃ¨re mission.
Voici une mise en page assez simple.
On commence par une vue du template affichant un article :

Puis on rÃ©flÃ©chit aux autres gabarits principaux : le template des catÃ©gories et la page d'entrÃ©e du site.
      
     
 
 
(L'idÃ©e ici est de proposer un premier cas d'intÃ©gration et de dÃ©veloppement, il n'y a rien de compliquÃ© Ã rÃ©aliser en Wordpress donc)
Identifier les templates
Ce site Ã©tant simple, il va demander le dÃ©veloppement des templates de base de Wordpress que sont

– home.php : le template de la page d'entrÃ©e

– single.php : le template des articles (post)

– page.php : le template des page (typiquement une page "a propos"

– archive.php : le template par catÃ©gorie
On doit alors rÃ©pondre Ã quelques question spÃ©cifique au web :

sur les Ã©crans larges, comment se disposent les contenus ?

– occupent-ils tous l'espace de la page de gauche Ã droite ?

– limitent-ils leur taille en se centrant dans la page ?

– limitent-ils leur taille en restant sur la gauche ?
Quelques dÃ©tails graphiques ou spÃ©cificitÃ© de navigation peuvent alors Ãªtre pensÃ©s. Typiquement :

– un choix radical de typo ou de couleur,

– une disposition de la navigation particuliÃ¨re (dans l'espace, dans la maniÃ¨re dont elle apparait (survol, clic, etc)

– un accÃ¨s aux infos particulier (au hasard, muet, ou au contraire par saturation)

– un mÃ©thode d'affichage des images (trÃ¨s grandes, trÃ¨s petites, colorisÃ©es, avec un effet d'apparition/disparition, etc)
Trop de dÃ©tails nuisent Ã la lisibilitÃ© et rendent le site brouillon, voire compliquÃ© Ã maintenir dans le temps. Tout le monde n'a pas le temps de redÃ©velopper un site tous les 6 mois, faites des choix qui peuvent tenir un an ou deux au moins. Ã‰vitez les trucs Ã la mode, ils seront dÃ©modÃ©s rapidement.

Arts numériques

Afficher des posts verticalement avec un effet d'apparition

Afficher les articles en "accordÃ©on"

Qu'est ce qu'un accordÃ©on en dÃ©veloppement web

Un code dÃ©jÃ prÃªt sur le site de Bootstrap

Placer le code de la boucle Wordpress

"> " aria-expanded="false" aria-controls="flush-collapse">

"> " aria-expanded="false" aria-controls="flush-collapse"> 'image_accordeon' )); ?>

Des posts "draggables" en homepage

Comment aborder ce genre de cas ?

Test "hors Wordpress"

CrÃ©er un tempate part pour le code

Code pour un scroll horizontal

OÃ¹ placer ce code

Le code

" title="">

La navigation et le footer

Assembler un texte Ã partir de 3 sources diffÃ©rentes

Une image comme ensemble de particules

CrÃ©er un template en html/css pur

Analyser le template

Une requÃªte ajax dans un template

Plusieurs morceaux de code

C'est fait !

Fichiers de base

Templates

Ã‰lÃ©ments embarquÃ©s

Extras

Attention

PrÃ©parer une structure et un wireframe

Identifier les besoins

Identifier la structure

Identifier les templates

">

">