Pyrat.net – Création de sites Internet

Sujet de stage : Mettre à jour le plugin CKEditor

2024-11-10T15:54:16Z

Ce qu'il faut faire

Résoudre le ticket : EOL juin 2023 ⇒ Il faut passer en V5.

Quelques liens de documentation

https://ckeditor.com/blog/ckeditor-4-end-of-life/
Ils expliquent pourquoi il faut migrer : https://ckeditor.com/blog/why-migrate-ckeditor-4-to-5/
Et comment : https://ckeditor.com/blog/upgrade-ckeditor-4-to-5/
Une configuration de départ intéressante de CKEditor v5, mais dépréciée en 2025

Bonus : enregistrement au format Markdown

Voir https://ckeditor.com/docs/ckeditor5/latest/features/markdown.html

Bonus interstellaire : enregistrement au format SPIP

Où il s'agirait de faire le convertisseur équivalent à Markdown, mais avec les raccourcis typo de SPIP.

Sujet de stage : moderniser les modèles de Newsletter de SoyezCréateurs

2023-12-16T17:41:34Z

SoyezCréateurs utilise 2 moteurs de Newsletters :

Il s'agirait :

de créer un ou plusieurs modèles RWD
de mutualiser le code des modèles entre les 2 moteurs
de faire évoluer CleverMail pour utiliser un sous-dossier pour stocker les modèles (et les lister dans l'interface d'admin)

Ressources pour construire le template

Maily.to pourrait être utilisé pour réaliser les templates de base à transformer ensuite en squelettes SPIP.
MJML idem (sans doute mieux testé et plus robuste, mais beaucoup plus technique aussi)
ZURB, en particulier Sidebar
600 templates d'emails gratuits
Veille Pyrat sur le sujet

Sujet de stage : remplacer jQueryUI pour les tooltips de SoyezCréateurs

2023-11-28T12:04:51Z

Ce qu'il faut faire

Il s'agit de remplacer les ToolTips gérés par jQueryUI dans SoyezCréateurs par une alternative plus moderne/maintenue.

Un bon candidat : Tippy.js

Et un exemple de code basé sur l'attribut title.

Sujet de stage : améliorer la barre typo de SPIP

2023-02-20T11:02:55Z

Ce qu'il faudrait faire

La barre typo de SPIP bénéficiait avec les enluminures typographiques d'aides à la saisie supplémentaires :

Barre typographique enrichie de SPIP

Voir l'image en taille normale

À savoir :

Zones de saisie pour la bulle d'aide et la langue d'un lien
Création d'ancres et lien vers une ancre
Rechercher/remplacer dans le texte

Il serait intéressant de retrouver ces fonctionnalités, d'autant plus qu'il est devenu facile de créer des boites de dialogues avec MediaBox.

Regarder aussi du côté du HTML5 et de son

Sujet de stage : Redimensionner les images avant upload

2022-07-26T07:16:08Z

Objectif du stage

Il s'agit de modifier le comportement de BigUp afin que ce dernier redimensionne les images côté navigateur avant de les envoyer au serveur.

Intérêt : gagner du temps à l'upload 😉

Un ticket existe sur ce sujet : Redimensionner les images avant upload #4538

Cela a été intégré à SPIP 4.2 : Ajout du retaillage coté client #4865

Difficulté

Importante !

Ce sujet de stage vous intéresse : faites votre stage au sein de pyrat.net !

Guide d'accueil dans la communauté SPIP

2022-02-16T10:24:01Z

Préalable

Lire la charte d'accueil de SPIP !

La communauté SPIP a fait un choix fort de rapports non marchands en son sein.

En conséquence, on n'exige rien, on n'a droit à rien, en face, ce sont des bénévoles et on se doit de les respecter.

Il se peut que l'accueil soit un peu froid (rires). Passez outre. Si quelqu'un vous contredit, il a probablement raison. Et s'il a tort, c'est que vous n'avez pas su exposer des arguments suffisamment construits [1].

Bien faire et laisser braire

Enfin, lire la charte d'accueil de SPIP !

Points d'entrée

Un espace pour Discuter, poser des questions, lire des réponses, répondre
Lire la documentation de SPIP :
- Manuel de référence des boucles et balises
- Guide des fonctions avancées
Vous inscrire sur
- Contrib
- et sur la forge
  Pour la forge, indiquer comme raison que vous allez contribuer à votre mesure (tickets de bugs, PR sur des plugins/squelettes, nouveau plugin…)
Une fois inscrit sur Git.spip.net, il vous faudra aussi demander à rejoindre les groupes
Si vous ne connaissez pas Git, chercher de la doc
Lire FAQ pratique : Comment SPIPer avec git.spip.net
et Guide Git pour SPIP
Découvrir Documentation technique sur SPIP qui cause PHP et des API de SPIP
Apprendre à faire des logs de commit utiles : Commits Conventionnels

Pour Contribuer à SoyezCréateurs

Lire la documentation de SoyezCréateurs :
- Sur SPIP Contrib
- Sur ce site :
Étudier le code source de SoyezCréateurs
Faire des branches et des PR

[1] Oui, il y a des gens qui changent d'avis dans la communauté SPIP 😉

Sujet de stage : image map pour SPIP

2021-05-15T19:41:59Z

Objectif du stage

Il s'agit de modifier le plugin SPIP Image Cliquable [1]pour y intégrer :

un éditeur de zones cliquables afin qu'il génère le code attendu par le plugin :
- ~~1^re étape : fork ajoutant le format d'export SPIP~~
- 2^e étape : intégration dans SPIP
et coupler le tout avec un script adaptant les imagemap pour du RWD :

Réalisé

Janvier 2024, 7 semaines de stages, en binôme :
- Correction du plugin par mise à jour de la lib maphightlight
- Fork de l'éditeur de zones : 1^re étape, ajout d'un export au format SPIP et compatibilité PHP 8.2 (attention, il faut rajouter un dossier examples\example1_files\temp )
Février 2025
- PR sur l'éditeur : https://github.com/maschek/imgmap/pull/92 (non intégré au plugin SPIP)
- PR pour le RWD intégrée au plugin, mais sans utiliser de lib

[1] Alternative plus moderne : Summer html image map creator

Ce sujet de stage vous intéresse : faites votre stage au sein de pyrat.net !

Sujet de stage : Layout Gala en flex et grid

2021-05-15T19:27:37Z

Problématique

En 2005 (autant dire la préhistoire du web), Alessandro Fulciniti propose un HTML assez simple avec 40 variantes d'affichages pour gérer l'affichage d'une page web avec :

entête
pied de page
contenu
navigation principale
navigation secondaire

⇒ Le site web présentant les 40 Layout Gala

15 ans après, ce code fonctionne toujours, mais mériterait d'être actualisé avec ce que permettent les CSS modernes : flexbox et grid layout.

Objectif du stage

Refaire les 40 Layout Gala :

en gardant le HTML tel quel
et en refaisant les CSS de manière moderne (grid et flexbox)
et en en profitant pour équilibrer la hauteur des colonnes
et faire les déclinaisons RWD pour tablettes et mobile
et de faire un site de démo semblable à l'original pour faire la démonstration des 40 layouts
le tout en open source, publié sur Github

Objectif secondaire

Sachant que SoyezCréateurs est basé sur LaYout Gala avec un JavaScript pour équilibrer les colonnes :

modification du squelette SPIP SoyezCréateurs pour utiliser les nouvelles CSS (en s'inscrivant sur la forge de SPIP et en travaillant sur une branche spécifique avant de merger avec le master via une PR)
donc modification profonde de layout.css.html
et suppression du script d'équilibrage des colonnes et des classes concernées
ce qui implique apprentissage du langage SPIP (en particulier : les balises #SET, #GET et les filtres |==, |ou pour reproduire en langage SPIP ce qui aura été fait en PHP. Le glossaire de SPIP sera un point d'entrée très utile pour chercher dans la doc)
et donc la compréhension du lien entre table SQL et boucle SPIP

SoyezCréateurs est un squelette Open source pour SPIP. Il est utilisé par environ 1000 sites.

Quant à SPIP, il est utilisé :

sur plus d'un millier de sites gouvernementaux (dont France Diplomatie et les sites des ambassades de France à l'étranger).
Conseil départemental du Cher
Région Occitanie
… et de nombreux autre sites institutionnels

Estimation difficulté/temps

pour un bon intégrateur CSS, les 40 Layout Gala ne devraient pas prendre plus d'une semaine de travail.
l'intégration dans SoyezCréateurs 2 jours environ

Pour un stagiaire, il conviendrait de multiplier ce temps par 3 au minimum.

Travail en terminé !

un premier stagiaire en est arrivé à ceci : Site de démonstration & Code source Jules17/40layouts
header et footer pouvant faire 100% de la lageur de l'écran et contenu/navigation de taille fixe (une piste de solution ici)
largeurs paramétrables (largeur totale et largeurs des colonnes)
intégration dans SoyezCréateurs : version 6

Ce sujet de stage vous intéresse : faites votre stage au sein de pyrat.net !

Jules Hervé l'a fait : LayoutGala 2021 ! (consulter le code source sur Github)

Épreuve avant recrutement d'un stagiaire

2021-03-11T13:30:27Z

Pyrat.net accueille des stagiaires heureux

Je ne cherche pas à accueillir des stagiaires juste parce qu'ils ont un stage à faire, mais parce qu'ils choisissent explicitement pyrat.net et donc SPIP pour leur stage.

Je fais donc passer un test afin de leur permettre de mesurer l'adéquation qu'il peut y avoir entre leurs aspirations, leurs talents, leurs connaissances, et la réalité d'un stage chez pyrat.net.

Pour être précis, il y a 2 épreuves possibles au choix :

réussir à installer SPIP
trouver un client pour qui faire un site durant la période de stage

Épreuve 1 : Réussir à installer SPIP

Il s'agit donc d'installer un site web sous SPIP sur son ordinateur et de prouver la réussite de l'opération.

Ceci implique :

de configurer un serveur web sur sa machine
de trouver comment lancer l'installation de SPIP
de trouver comment créer un article dans SPIP
de faire une copie d'écran du résultat (avec barre d'adresse du site visible)

Un gros plus serait d'installer en plus SoyezCréateurs :

trouver comment installer des plugins
installer SoyezCréateurs (se rendre compte au passage qu'il fallait vérifier avec quelle version de SPIP il est déclaré compatible)
faire une copie d'écran de la page d'accueil

Jackpot : configurer SoyezCréateurs en mode Cognac :

trouver la doc
configurer en mode Cognac
faire une copie d'écran de la page d'accueil

⇒ compétences évaluées :

capacité à chercher des informations sur Internet et à les appliquer
débrouillardise
motivation
ténacité

Épreuve 2 : Trouver un client pour qui faire un site durant la période de stage

C'est une possibilité pour un stage plus orienté contenu et/ou graphisme. Avec cette démarche, le stagiaire est assuré d'avoir une matière concrète à traiter durant son stage.

Il s'agit ainsi de trouver un client qui sera partant au minimum pour le Amenez vos idées, repartez avec un site !.

Il est possible de rajouter 2 jours de formation : Formation CMS SPIP + SoyezCréateurs (Plan de cours).

⇒ compétences évaluées :

capacité à chercher des informations sur Internet et à les appliquer [1]
débrouillardise
motivation
ténacité
sens de la relation commerciale

[1] Pour trouver des exemples récents de sites réalisés par pyrat.net…

Vous souhaitez quand même 😉 faire un stage au sein de pyrat.net après avoir lu ça ? Soyez les bienvenus !

Stage étudiant en entreprise

2007-05-07T10:11:54Z

Pas de stage possible en ce moment !

pyrat.net recherche des stagiaires compétents en :

HTML5/CSS3 (Framework Bootstrap ou Foundation sont un plus)
PHP
jQuery (AJAX)
SPIP, Wordpress
MySQL,
jQuery,
Graphiste

Vous êtes en études d'informatique, communication, graphisme.

Vous aimez aller plus loin que ce que les cours seuls peuvent vous apporter.

Vous désirez mettre en œuvre vos compétences dans une entreprise dynamique.

Au sein de pyrat.net, vous pourrez

découvrir une Entreprise Individuelle
obtenir une reconnaissance publique [1]
réaliser un travail conforme aux bonnes pratiques en matière de création de site web
effectuer votre stage à la campagne ! ~~Possibilité de télétravail~~ [2].

pyrat.net utilise des logiciels libres

Serveur : Linux, Apache, MySQL et PHP
Graphisme : The Gimp et InkScape
CMS : SPIP

pyrat.net recherche des jeunes

qui ont un regard critique sur eux-mêmes, la société, leurs cours
qui savent où ils veulent aller et pourquoi
créatifs
autonomes
débrouillards
qui souhaiteraient s'établir un jour à leur compte
qui cherchent préférentiellement en anglais sur Internet

Critères

Les plus recherchés

réussir à installer le squelette SoyezCréateurs
connaissance du HTML et des CSS
connaissance des bonnes pratiques en matière de création de sites web et d'accessibilité
bonne expression écrite et orthographe
connaissance de SPIP (idéalement, avoir un site personnel sous SPIP)
connaissance du PHP
connaissance approfondie de Linux
maîtrise des outils graphiques sous Linux

Ce qui peut freiner notre enthousiasme [3]

ne pas lire l'anglais (ou préférer le français à l'anglais sur Internet)
pour les graphistes, ne savoir se servir que de PhotoShop
n'avoir que des connaissances scolaires [4]
ne faire le stage que parce qu'il est obligatoire dans le cursus des études
ne pas avoir de connexion Internet le soir pour continuer à se documenter
fumer [5]
ne pas avoir de site web personnel

Test avant recrutement

Pour éviter les déceptions, nous faisons passer une Épreuve avant recrutement d'un stagiaire

Gratification ?

Gratification selon dispositions légales

Le stage est avant tout tourné vers l'acquisition d'une compétence et d'une expérience. Vous interviendrez donc avant tout pour participer à une communauté Open Source.

Dans tous les cas, votre travail sera signé de votre nom [6].

Aide à trouver un stage

Ceci est ce que j'ai pu lire de plus intéressant sur comment chercher et trouver un stage. Je vous en conseille vivement la lecture.

Et un autre article : La plus grosse erreur des devs qui cherchent un stage ou une alternance.

Et un article pour les futurs stagiaires en développement super intéressant et documenté.

[1] vos contributions seront publiées sous votre nom

[2] Bien que le télétravail soit une conséquence logique du travail dans le domaine de la création de sites web, la loi le qualifie d'illégal…

[3] Mais ne saurait constituer une discrimination

[4] Oui, les tableaux en HTML, c'est en général une mauvaise idée, même si c'est plus facile à enseigner

[5] Jacques Pyrat est allergique au tabac ce qui handicape fortement ses relations sociales ; mais il est simple de redevenir non fumeur.

[6] Signature des commits sur la zone de SPIP, mentions légales de réalisation sur les sites publiés avec votre participation.

Ces stages ne déboucheront pas sur une embauche, le contexte économique français ne permettant pas raisonnablement de le faire.

Par contre, Pyrat.net travaille avec d'autres indépendants. Pourquoi pas vous un jour ?