Index du portail

Présentation du portail.

Accueil du portail

Présentation du portail. Quand, qui, quoi, où, comment, pourquoi.

Bienvenue

But

Ce portail me permet de partager des informations sur des sujets variés, ces sujets sont relatifs à :
  • mes passions
  • mon expérience
  • mes projets

Présentation

Plutôt pragmatique, j'ai une formation d'électrotechnicien. Mon expérience se résumerait en 20 ans d'exploitation et maintenance, près de 10 ans dans le service et les énergies, et 4 ans d'enseignement.

Motivations

L'évolution de l'intelligence artificielle m'a permis de progresser dans la gestion de la stack web. Depuis 14 mois je me familiarise avec CodeIgniter et Laravel, deux frameworks PHP.

Actualités

Architecture CMS

Le portail évolue, la rubrique technologies permet une intégration rapide de documents en production.

Authentification

L'authentification est configurée pour la partie front et les tokens pour API.

Structure

Les pages devront employer la même structure mise en forme par CSS.

Environnement

Hébergement

Le portail est hébergé sur un serveur mutualisé chez OVH.

Stack

OVH fournit les services SSH, FTP, HTTPS ,PHP, messagerie et Base de données. J'ai choisi Code Ingiter pour le backend, la partie front est réalisé en HTML,SVG et Javascript et CSS

Technologies

Nous sommes enchantés de vous accueillir dans cet espace dédié aux technologies qui nous passionnent, que nous maitrsions de part nos activités dans différents secteurs.

Introduction

Contexte

A travers les différents articles et contenus que vous découvrirez ici, nous aspirons à vous fournir des informations quant à des solutions technologiques et procédés.
Après une formation de 7 années dans les sciences et technologies industrielles, nous avons acquis une expertise dans les domaines de l'électrotechnique et des compétences complémentaires.
Nos 20 années d'expérience, riches et variées, dans les secteurs industriels, résidentiels, tertiaires et hospitaliers, nous ont sensibilisés aux enjeux cruciaux de l'exploitation, telle que la disponibilité, l'organisation, la réactivité et la sécurité.
Cette diversité de parcours nous a permis d'acquérir une vision globale du métier d'électricien, mais également de nous spécialiser dans la maîtrise des énergies et de la maintenance.
Sur un site Seveso 2, dans le secteur médical, en industrie, dans le tertiaire, les salles informatiques et le bâtiment j'ai exploité et mis en oeuvre des equipements nécessaires pour les activités et la sécurité.
Nous vous invitons à explorer notre portail pour découvrir des informations pertinentes, nos projets, et à nous apporter votre soutien et votre confiance.
N'hésitez pas à nous contacter pour toute demande d'information supplémentaire ou pour discuter de la manière dont nous pouvons vous aider à atteindre vos objectifs.

Histoire

Sans être spécialiste dans le domaine, je me passionne pour la chose à l'occasion de découverte et de recherches.

Introduction

Une passion

Natif de Picardie, j'ai pu parcourir l'histoire de France pendant quelques kilomètres. Dans mon enfance j'ai eu la chance de pouvoir écouter le témoignage des anciens. Les randonnées en VTT comme la spéléologie me permirent de concilier sport et histoire. L'histoire est un héritage parfois difficile à supporter mais il doit être assumer et pour assumer cet héritage faut il encore le connaitre. On dit que l'on n'est pas responsable des actes des ses anciens mais pourtant on est bien fier d'avoir d'illustres prédécesseurs; je pense sincèrement qu'on ne peut être sage en ignorant comment nous sommes devenus contemporains de ce monde. Comprendre l'histoire familiale vous démontre qu'aucune vérité n'est jamais unique. On peut rejeter les valeurs d'une civilisation mais on ne peut aborder son passé sans essayer de comprendre son contexte culturel, social et politique Dans cette rubrique nous aborderons principalement des événements que j'ai souvent découvert par le cinéma, au hasard de discussions passionnées ou à l'occasion d'un trajet. Certaines découvertes m'ont particulièrement intéressé et je les ai complétées parfois par des recherches et des lectures. Enfin le projet de gérer ces évènements me permet de progresser notamment dans la gestion des relations entre les données

Saint Leau d'Esserent

Transcriptions du rapport 1944-06-30-NAID-5555460

Identité

GOLKE, CLIFFORD G
Sergent-chef , matricule 16132121, 9e Groupe de Bombardement USAF

Rapport

Date, heure et lieu approximatif du crash ou de l'atterrissage de l'avion.
10 AVRIL 1944 VERS 10H00 ENVIRON 4 KILOMÈTRES AU SUD-OUEST DE SAINT-VAAST-LES-MELLO. AU NORD DE PARIS.

Nature et étendue des dommages subis par l'avion au moment de l'éjection. L'avion était-il en feu ?
Toute l'aile droite était en feu, le moteur n° 1 était en train de s'éteindre et l'aile commençait à se détacher entre les moteurs n° 3 et 4.

À quelle altitude approximative l'éjection a-t-elle eu lieu ?
Environ 6 100 m (20 000 pieds).

Des membres d'équipage ont-ils été blessés ou tués avant le crash ?
Non.

Combien de membres d'équipage ont sauté en parachute ? Leurs parachutes se sont-ils ouverts ?
Manahan, Justice, Hedlund, Dearing, Harnahan, Moedebeck, Hard, ont sauté en parachute. Thompson, Enstrom, je ne sais pas. J'ai vu deux hommes tomber sans que leurs parachutes ne s'ouvrent.

La source a-t-elle vu d'autres membres de l'équipage, morts ou vivants, après l'atterrissage ?
J'ai vu deux hommes tomber, seulement de loin, dont les parachutes ne se sont pas ouverts. J'ai pris contact avec Cletus Hard le lendemain.

A-t-il reçu des informations d'autres personnes quant au sort des autres membres de l'équipage ? Si oui, veuillez fournir les détails fournis par son informateur et indiquer si les autres membres d'équipage ont été identifiés par leur nom ou autrement.
Les Français ont apporté les noms de Thompson, Moedebeck et Harnahan comme étant morts. Ils ont donné une bonne description de Justice, qui a été capturé. Ils amenaient Hedlund et Dearing pour nous rejoindre, mais les Allemands les ont capturés en chemin. Un Français s'est échappé.

La source a-t-elle examiné l'épave de l'avion ? Si oui, dans quel état était-elle ?
Non, je ne me suis pas approché suffisamment. Faible taux d'oxygène dans le champ, train d'atterrissage dans les bois et partie du fuselage dans le champ.

Si l'avion s'est abîmé en mer, à quelle distance se trouvait-il de la côte ?

Comment la source a-t-elle été secourue ? Quels radeaux de sauvetage, débris, etc., sont restés à la surface et auraient pu aider les autres membres d'équipage à se maintenir à flot ?

Quel est l'avis de la source quant au sort des autres membres d'équipage et pourquoi ?
Ouvrir les parachutes trop tôt a peut-être permis aux Allemands de capturer deux membres d'équipage dès le premier jour.

Informatique

Ce portail me permet de maitriser les technologies front HTML,CSS et Javascript et backend PHP/MySql.

Architecture modulaire

Une nécessité

Pour ajouter des fonctionnalités sur la partie front comme les composants une organisation du code est à trouver.
Ceci de par le fait que l'application SPA est servi par un framework MVC et que l'on réparti les vues entre le template et la vue

La structure est réalisé avec HTML et CSS, cette structure doit s'adapter aux terminaux mobiles et ordinateurs.

Le theming incombe à CSS, il faut séparer mise en forme de la structure du theming.

Javascript gère les interactions.
Selon le niveau on gère directment l'action dans le module ou dans les cas plus complexes on publie les evenements aux module et composants souscripteurs.
Les modules et composants doivent au maximum être indépendant de l'interface. Il faut limiter les références DOM aux classes.

La documentation est importante, il faut savoir prendre le temps de lire et d'écrire. Obsidian peut être très utile pour gérer des projets

Composants

Callout

Ces blocs évoluent pour intégrer un contenu à mettre en évidence.

Evolutions
Theming, ajouter des icone splus adaptés sur les barres de titre

Utilisation du bus d'événements
On peut imaginer un support de cours avec suivi d'assiduité. Il faudrait emettre un evenement qui signale l'ouverture, ceci permettant de vérifier que l'utilisateur prenenle temps de bien ire les notions importantes

callout - note
Intégration
Le composant se réparti entre
  • La structure (php/html)
  • La mise en forme (css)
  • Le theming (css)
  • L'intéraction (javascript)

A intégrer

Dictionnaire

Composant de données.

Introduction

Recherche de mots

Code Naf

Composant de données.

Introduction

Recherche de code APE









Compte PCG

Composant de données.

Introduction

Recherche de compte PCG

NuméroLibelléClasse

WysEdit

Composant éditeur HTML simple.

Éditeur

Zone d'édition

Le composant WysEdit permet de saisir du HTML et de basculer entre le mode édition et la prévisualisation.
Réservé aux utilisateurs avertis — le contenu est rendu via innerHTML.

Événements disponibles via le bus :

  • wysedit:show:wysedit1 — passer en vue
  • wysedit:edit:wysedit1 — passer en édition
  • wysedit:set:wysedit1 — injecter du contenu
  • wysedit:clear:wysedit1 — vider
  • wysedit:get:wysedit1 — récupérer le contenu

Vox

Synthèse vocale

Composant vox

Synthèse vocale (event bus)



Composant vox

Reco vocale (event bus)



Composants

Composants en cours d'intégration cms

mermaid

gantt

	                    gantt
	                    dateFormat  YYYY-MM-DD
	
	                    section Clickable
	                    Visit mermaidjs, read documentation         :active, cl1, 2025-08-22, 2d
	                    Print arguments         :cl2, after cl1, 3d
	                    Print task              :cl3, after cl2, 3d
	
	                    click cl1 href "https://mermaidjs.github.io/"
	                    click cl2 call mermaid_printArguments("test1", "test2", 3)
	                    click cl3 call window.mermaid_printTask(cl3)
	                

Diagramme de sequence

    sequenceDiagram
    autonumber
    
    participant window.load
    participant eventBus.forms
    box Purple features mot
    participant mot.form.js
    participant mot.controller.js
    participant mot.service.js
    participant mot.renderer.js
    end
    participant window.validateForm
    participant ui
    
    rect rgb(191, 223, 255)
        window.load--)mot.form.js: initMotForm()
        mot.form.js->>eventBus.forms : souscrit a forms:submit
        note right of window.load: Initialisation.
        
        window.load--)mot.controller.js: initMotController()  
        mot.controller.js->>eventBus.forms : souscrit a forms:search
    
        window.load--)mot.renderer.js : initMotRenderer()
        mot.renderer.js->>eventBus.forms : souscrit a mot:loading
        mot.renderer.js->>eventBus.forms : souscrit a mot:loaded
        mot.renderer.js->>eventBus.forms : souscrit a mot:error
    end
    
    rect rgb(255, 223, 191)
        note left of ui: Validation formulaire
        ui--)window.validateForm: evt submit src motForm  
        window.validateForm->>eventBus.forms : publie forms:submit
        eventBus.forms->>+mot.form.js : forms:submit
        mot.form.js-->mot.form.js : validation
    end
    
    rect rgb(191, 223, 255)
        mot.form.js->>-eventBus.forms : publie forms:search
        eventBus.forms->>mot.controller.js: forms:search
    end
    
    rect rgb(255, 223, 191)
        mot.controller.js->>eventBus.forms : publie mot:loading 1
        eventBus.forms->>+mot.renderer.js : mot:loading
        mot.renderer.js--)-ui : affichage chargement
    end
    
    rect rgb(191, 223, 255)	
        note left of mot.service.js : requete
        mot.controller.js->>+mot.service.js : fetch()
        mot.service.js-->mot.service.js : response
        mot.service.js->>-mot.controller.js :result
        mot.controller.js->>eventBus.forms : publie mot:loaded
        eventBus.forms->>+mot.renderer.js: mot:loaded
        mot.controller.js->>eventBus.forms : publie mot:loading 0
    end
    
    rect rgb(255, 223, 191)
        mot.renderer.js--)-ui : affichage des données en tableau
    end

codeval

Volume normal selon ISO 2533

Volume normal ISO 2533

Apex

Histogramme

Carousel

Carousel d'images

Leaflet

Leaflet

Some text

ThreeJs

cube

galaxy

terrain

cube

Dialog

Dialog

Roméo & Juliette

Mise en scène vocale avec le composant Vox.

La scène

Balcon de Vérone

Roméo — Frank Dicksee 1884 Roméo
Juliette — Waterhouse 1898 Juliette

Test Autocomplete

Démonstration du composant autocomplete via bus.

Recherche de mot

Autocomplete mot


Sélection : (id : )

Images

Gestion de la médiathèque.

Médiathèque

Gestion des images

Formes juridiques

Référentiel INSEE des formes juridiques (260 codes).

Référentiel

Formes juridiques

Types de voie

Référentiel des 63 types de voie.

Référentiel

Types de voie

Codes postaux

39 192 codes postaux France — source La Poste.

Recherche

Codes postaux

Adresses

Gestion des adresses postales.

Adresses

Gestion des adresses

Organisations

Gestion des organisations.

Organisation

Gestion des organisations

Entreprise

Gestion des entreprise.

Entreprise

Gestion des entreprise

RESERVED

Zone de test composants composites

Composant articleZone

edit

Ce composant doit servir de base aux intégrations des components js dans le scomposant composites php

articles

  • 1 - Accueil du portail
    • 1 - Bienvenue
    • 2 - Actualités
    • 3 - Environnement
  • 2 - Technologies
    • 4 - Introduction
  • 3 - Histoire
    • 5 - Introduction
    • 6 - Saint Leau d'Esserent
  • 4 - Informatique
    • 5 - Architecture modulaire
  • 5 - Dictionnaire
    • 6 - Introduction
  • 6 - Code Naf
    • 7 - Introduction
  • 7 - Compte PCG
    • 8 - Introduction
  • 8 - WysEdit
    • 9 - Éditeur
  • 9 - Vox
    • 10 - Composant vox
    • 25 - Composant vox
  • 10 - Composants
    • 11 - mermaid
    • 21 - codeval
    • 22 - Apex
    • 23 - Carousel
    • 24 - Leaflet
    • 26 - ThreeJs
    • 27 - Dialog
  • 11 - Roméo & Juliette
    • 20 - La scène
  • 12 - Test Autocomplete
    • 30 - Recherche de mot
  • 13 - Images
    • 31 - Médiathèque
  • 14 - Formes juridiques
    • 32 - Référentiel
  • 15 - Types de voie
    • 33 - Référentiel
  • 16 - Codes postaux
    • 34 - Recherche
  • 17 - Adresses
    • 35 - Adresses
  • 18 - Organisations
    • 36 - Organisation
  • 19 - Entreprise
    • 37 - Entreprise

Cette boîte de dialogue modale a un arrière-plan festif !

Cette seconde boîte de dialogue modale n'est pas indépendante