Bonjour 👋

Marc Friederich ☃️

🥰 web

La veille technologique ?

Pourquoi un laboratoire ?

Motivation personnelle

Comprendre ma relation à mon métier

💾 1998 > 2001 > 2003

Comem+ 34

2005

Evtek Finland

2006

Antistatique

2008

Participation aux conférences

Organisation de conférences

🧪 L'objectif du lab

• Importance de la veille
• Prendre du recule sur votre profession
• Mécanismes de la gestion des connaissances
• Trouver votre système

Comment

1. 🎲 6 étapes
2. 🚧 Travaux pratiques
3. 📦 Livrable web
4. 💔 Travail solo
5. 🎙 Présentation

Questions à cette étape ?

La veille technologique

Organiser sa formation continue, se tenir au courant des prochaines tendances et anticiper les grands changements dans votre domaine de prédilection.

Les étapes de la veille

1. 🎯 Le domaine
2. 📡 Système d'écoute
3. 🎚 Workflow de tri
4. 🗃 Classement
5. ⏳ L'épreuve du temps
6. 💡 Exploitation

🎯
Le domaine

Choix du domaine

Spécialistes vs Généralistes

Le cercle de l'ennui du fun

🚧

Exercice pratique nº1

Tracer votre Ikigai.
Ce pourqui vous vous levez le matin (en semaine)

30 min, solo

C'est un exercice personnel

Quel élément de la formation COMEM vous passionne le plus ?

🗺 Fiche de domaine

Exemple : Design d'interaction web

🚧

Exercice pratique nº2

Définir votre domaine de veille, Thème favoris, votre passion

30 min, solo puis présentation à la classe

Rédaction de la fiche de domaine (Dénomination, mots-clés, sous-domaines)

1. 🎯 Le domaine
2. 📡 Système d'écoute
3. 🎚 Workflow de tri
4. 🗃 Classement
5. ⏳ L'épreuve du temps
6. 💡 Exploitation

📡
Système d'écoute

Online/Offline😷

Canaux 🔮

• Réseaux sociaux
• Blogs / magazines
• Podcasts
• Newsletters
• Événements (meetup, conférence)
• Agrégateurs (alertes)

Émetteurs 📣

• Personnalité du domaine
• Influenceurs
• Organisations professionnelles
• Organismes de standardisation
• Entreprises leader dans le domaine

Astuces 🎮

Conférences → speakers

🚧

Exercice pratique nº3

90 min, solo

Identifier pour votre domaine : les réseaux, les acteurs, les événements qui informent

Perdez-vous un peu dans la toile 🕵️‍♀️

Notez les URLs, les façons de s'abonner (newsletter, RSS, follow on twitter, youtube, instagram...)
Rendu : Commencez le 1er article qui liste les émetteurs·trices et sources de votre veille (en expliquant pourquoi vous les avez choisis)

Welcome back

Vous vous souvenez pourquoi on est là ?

🧪 L'objectif du lab

• Importance de la veille
• Prendre du recule sur votre profession
• Mécanismes de la gestion des connaissances
• Trouver votre système

Comment

1. 🎲 6 étapes
2. 🚧 Travaux pratiques
3. 📦 Livrable web
4. 💔 Travail solo
5. 🎙 Présentation

1. 🎯 Le domaine
2. 📡 Système d'écoute
3. 🎚 Workflow de tri
4. 🗃 Classement
5. ⏳ L'épreuve du temps
6. 💡 Exploitation

🚧

Exercice pratique nº3

Identifier pour votre domaine : les réseaux, les acteurs, les événements qui informent

Perdez-vous un peu dans la toile 🕵️‍♀️

Notez les URLs, les façons de s'abonner (newsletter, RSS, follow on twitter, youtube, instagram...)
Rendu : Commencez le 1er article qui liste les émetteurs·trices et sources de votre veille (en expliquant pourquoi vous les avez choisis)

La bulle ⚗️ et l'écho 🙉

Filter bubble : Algorithmes de sélection des informations (médias sociaux, Agrégateurs, Recherche)

Echo chamber : Distorsion de la réalité due à une surexposition à un seul point de vue

1. Prise de conscience
2. Se méfier des recommandations
3. Diversifier les canaux
4. IRL check

🛠 outils

Classification suivant la source

• Média (images, vidéo, textes, sons)
• Taille (long format, brèves)
• Périodicité (real time, weekly digest)
• Technologies (Web, Apps, Mails)

Choix des outils 🛠

• Multi-canaux
• Article vs Digest
• Facilité d'exportation du système
• Ouverture

Recap 📡

• Étape clé de la veille
• Attention à la bulle
• Ouverture des outils
• Maintenance des listes et outils

🚧

Exercice pratique nº4

Sélectionner consciencieusement 15 articles/éléments/medias

Lisez/écoutez/visionnez les attentivement

Prenez le meilleur, préparez 3 slides pour le présenter à la classe

🎙

Compréhension de git

git ≠ github.com

github.com/zufrieden/slides-veille-tech-heig-2022

	
Prénom Nom
	
mon domaine ...


	
Mon sujet
	
Ma source
	
Pourquoi ?


	Slide 1


	Slide 2


	Slide 3

						

  
Slide 3
  	
					
						

data-background-image="https://xyz/monimage.png"

data-background-size="contain"

data-background-size="cover"

M49/1

Antonini Dario

UX/UI Designer

How to structure your first UX Design portfolio

UX Planet

Découverte de bonnes pratiques, trouver des idées et confirmer des raisonnements

« Quel est mon parcours ? Comment suis-je entré dans l'UX ? »

« Quel genre de compétences ai-je qui seront utiles pour ce rôle? »

« Quels sont mes intérêts et ma passion qui correspondent vraiment à ce travail ? »

« Que me manque-t-il en termes de compétences ou de connaissances ? »

02. Les pages de mon portfolio

• Portfolio - Projets
• À propos
• Résumé (CV)
• Contact

• Objectif du projet
• Livrables
• Processus
• Durée du projet, Date
• Membres du groupe
• Mon rôle
• Liens vers le livrable
• Aperçu (images)

Attanasio Stefano

Analyste Video dans le football

Analyse tactique

Sky Sport Italia

Etudie tactiquement les équipes italiennes et leurs adversaires pour déterminer comment les matchs à venir vont se dérouler

Sky Sport Italia

Csikos Audrey

Design d’application mobile/web

Responsive Design & Auto Layout

sur YouTube

Pourquoi? Apprendre une nouvelle technique sur Figma

Contraintes sur Figma

• élément enfant se dimensionne selon son parent

Auto layout sur Figma

• stack de plusieurs éléments
• choisir l'espace entre les éléments
• padding entre les éléments
• décider du comportement lors du resizing (fixe, redimenssion selon le container,...)

Exemple: Masonry Grid

Dione Timothée

E-commerce

Utilisation d'instaagram pour les petites entreprises

https://blog.hubspot.com/marketing/instagram-marketing-small-business?hubs_post-cta=blognavcard-marketing

PL'article est choisi parce qu'il est utile pour des projets que je dois réaliser

Pourquoi Instagram est important pour les petites entreprises ?

• 90% des utilisateurs Insta suivent au moins 1 business
• 1 utilisateur sur 2 utilise l'app pour dévouvrir de nouveaux business

15 points à suivre pour développer sa stratégie Instgram

1. Définir un objectif (traffic, ventes, brand awarness...)
2. Mettre les informaitons de base de l'entreprise sur le compte (téléphone, e-mail, adresse)
3. Inclure synthétiquement qui on est, ce qu'ont fait et le type de contenu publié sur le compte
4. Inclure des liens efficaces à l'aide d'outils comme Linktree
5. Mentionner des rabais offerts périodiquement
6. Geolocaliser les publications
7. Republier les users generated contents à l'aide de recherche par géolocalisation
8. Offrir des promotions exclusives aux utilisateurs selon certains critères

15 Conseils Hubspot pour commencer

Hhubspot propose ce kit de publications Instagram pour aider au lancement

1. Offrir des promotions exclusives aux utilisateurs selon certains critères
2. Créer un Hashtag personnalisé pour l'entreprise et en utiliser d'autres
3. Utiliser des influenceurs
4. Utiliser Instagram Shoping
5. Iviter les utilisateurs à réagir et utiliser les outils de "polls et questions"
6. Utiliser des réels (montrer une journée dans le business, montrer le processus derrière la scène, raconter l'histoire de marque, introduire les membres de l'équipe)
7. Montrer des images cératives et intéressantes
8. Analyser les métriques avec Des outils

Finkel Benaiah

mon domaine Designer UX / UI

Good to great UI animation tips

https://uxdesign.cc/good-to-great-ui-animation-tips-7850805c12e5

L'élément en plus pour réaliser des interactions de qualités.

Kemm Pereira Tanya

Communication et branding

How symbols and brands shape our humanity

TedTalk

Parce que quand on veut communiquer, on oublie souvent qu'on parle à des humains, peut importe le canal.

Unir les gens

Les symboles parlent aux gens, et permettent de créer un conscensus

Marque? Ou marketing?

Le pouvoir que les humains donnent aux symboles selon leur contexte

Les nouvelles communautés

Leger Alexia

Communication/marketing, réseaux sociaux

Référencement Instagram

https://audreytips.com/instagram-seo/

Utile pour mon futur métier, donne des techniques précises, peut appliquer les conseils directement, article récent

3 Conseils pour le profil

• Optimiser le profil instagram
• Incluer votre mot-clé principal dans votre nom d’affichage et @Username
• Utiliser des mots-clés secondaires dans votre bio

3 conseils pour les publications

• Traiter vos hashtags comme des mots-clés
• Utiliser des mots-clés secondaires dans vos légendes d’images
• Profiter du texte alternatif d’Instagram

Autres astuces

• Etre tagué
• Suivre les performances de votre stratégie de référencement Instagram
• Éviter toutes techniques de référencement Black Hat

Ouakel Neïb

Direction artistique

Direction artistique

https://www.creativebloq.com/career/art-director-11121180

Un bon résumé de ce qu'il faut retenir

Le but :

"We need to make sure our team is empowered and grounded, whilst being excited and inspired to push boundaries."

Comment :

"it's not all about creative talent, you're also going to need to have the right temperament and personality for the job."

Ce qu'il ne faut pas négliger :

"It's all about teamwork."/p>

Picciola Sandro

Marketing digital Réseaux sociaux

Sujet :BeReal

Source : https://www.meltwater.com/fr/blog/be-real

Pourquoi ? Nouveau réseau social que je ne connaissais pas et qui commence à prendre l'ampleur

BeReal

• Lancé en 2020
• 50 millions de téléchargement
• Idée innovante

Et les autres ?

• Instagram
• TikTok
• Snapchat

Marketing d'Influence...

No

Revaclier Laure-Hélène

Rédaction web

Chaîne YouTube de Lucie Rondelet

https://www.youtube.com/c/LucieRondelet/videos

Je suis tombée sur son blog Formation Rédaction Web, puis sa chaîne YouTube, puis son podcast Spotify, puis son livre.

2 vidéos sur lesquelles je suis tombée en partant de son blog :

-9 évolutions possibles pour un rédacteur web (https://www.youtube.com/watch?v=2M4d5xwpUDM)

-13 outils pour la rédaction web (https://www.youtube.com/watch?v=d30j1TbfjZQ)

9 évolutions possibles :

• Copywriter
• Content manager
• Social writer
• Conseiller en stratégie digitale
• Chef de projet digital
• Référenceur / Consultant SEO
• Storyteller
• Assistant virtuel
• Responsable éditorial

13 outils pour la rédaction web :

• Correcteur d'orthographe, conjugueur, dictionnaire en ligne
• Vérifier le duplicate content
• Générateur de balises HTML
• Suite Google
• Facturation en ligne
• Notion / Trello / Monday
• Calendly
• Keywords everywhere
• Yoast SEO
• Canva
• Unsplash / Pixabay
• Veille

Rodriguez Alan

mon domaine c'est l'innovation.

#BestFootnoteEver

1 This was once revealed to me in a dream.

Nicolas Berdyaev, From The Divine and the Human, English Translation 1949, p. 6. pic.twitter.com/DltIWBDjWs

— Ticia Verveer (@ticiaverveer) February 17, 2018

Mon sujet

Ma source

Pourquoi ?

La définition ultime de l'innovation

Mettre en œuvre une idée qui répond à un besoin spécifique et apporte de la valeur à la fois à l'entreprise et au client.

Sandoz Jules

Management dans le dev

3 astuces "Clean Code" pour rendre vos équipes de dev plus efficaces

Ido Shveki sur Medium.com

Parce qu'il partage de bonnes pratiques sur le dev

Le Clean Code c'est quoi?

• Des bonnes pratiques à suivre dans son développement

Pourquoi suivre ces bonnes pratiques?

• Un rapport lecture/écriture de 10:1
• Du code clair, compréhensible et maintenable

Quelles recommendations?

• Utiliser une bonne nomenclature
• Eviter les fonctions à effets secondaires
• Commenter uniquement quand nécessaire

Sordet Stéphane

mon domaine Product Management / Product Owner

Débuter dans le management

Medium.com

Intéressant d'avoir des tips pour débuter dans un domaine avec plein de pratiques différentes

Comprendre le processus

Augmenter la participation des parties prenantes

A plusieurs on va plus loin

Tarrit Vincent

Développement web et mobile

Mon sujet est le développement web

Youtube : Fireship

Je trouve complet et rapide à regarder

Fireship

Traber Sébastien

Développement web

Zod Makes TypeScript Even Better

Zod Makes TypeScript Even Better

Pourquoi ?

Un outils intéressant pour gagner du temps lors de la validation de formulaire

une librairie typescript pour valider des données. Typiquement utile pour la validation de formaulaire mais pas seulement. Zod est disigné pour être developer-friendly.

Les aventages

• Zero dépendences
• Fonctionne dans node.js et touts les browser moderne
• Prend très peu de place
• Concis
• Fonctionne aussi avec javascript

Créer un simple schéma

              
import { z } from "zod";

// creating a schema for strings
const mySchema = z.string();

// parsing
mySchema.parse("tuna"); // => "tuna"
mySchema.parse(12); // => throws ZodError

// "safe" parsing (doesn't throw error if validation fails)
mySchema.safeParse("tuna"); // => { success: true; data: "tuna" }
mySchema.safeParse(12); // => { success: false; error: ZodError }
              
              

Créer un schéma pour un objet

              
import { z } from "zod";

const User = z.object({
  username: z.string(),
});

User.parse({ username: "Ludwig" });

// extract the inferred type
type User = z.infer;
// { username: string }
              
              

Traversini Sébastien

marketing digital

stratégie marketing

Youtube : https://www.youtube.com/watch?v=yzrFf1pHMf8

Parce que le marketing digital m'intéresse

Le format m'intéresse, car j'aime beaucoup apprendre par la vidéo et j'ai besoin de voir et de pouvoir lire ce que l'on m'explqiue pour comprendre.

Uebelhart Calvin

DataScience

Intelligence artificielle

Futura-sciences.com

L'intelligence artificielle est très utilisée en Data Science

Contenu de l'article

• Gato
• Developpé par DeepMind
• Réseau généraliste

Capacités

• Jouer à la console Atari
• Identifier le contenu des images
• Discuter
• empiler des blocs avec un bras robotique
• ...

L'augmentation constante de la puissance disponible serait au contraire un facteur bien plus important dans le développement de l'IA que l'augmentation des connaissances humaines dans le domaine.

• Meilleure que les experts dans un peu plus de la moitié des tâches
• peu de chance d'évoluer vers une IA forte

M49/2

Antonietti Déborah

UX / UI designer

Recherche utilisateur - AB Testing

https://www.kameleoon.com/fr/ab-testing

emoji_objects Idées et marche à suivre pour de bons AB tests

Deux méthodes différentes

de calculs de statistiques

LA MÉTHODE FRÉQUENTISTE

LA MÉTHODE BAYÉSIENNE

Cuche Héloïse

UX designer

Plugins Figma

Bitbytesoft

Optimiser les outils utilisés permet de gagner en efficacité

Brève description de 21 plugins

Ceux que je connaissais déjà (2/21..) :

• Unsplash
• Font Preview

Mes coups de <3

• Storyset (illustration, tout reste customisable)
• Chart (Barre, donut, progress,...)
• Spell (Correcteur et propositions)

Dubois Meryl

Design d'interaction

Cypress in 100 seconds

vidéo Fireship

court, ludique et efficace

Fireship

Tutoriels de développement de web app

Très actif

Série des "100 seconds"

Découvrir une techno rapidement

Dynamique et divertissant

Cypress in 100 seconds

Framework de test JS

Interface dans le browser

Navigue l'app comme un utilisateur

Gfeller Salomé

Dev front-end

Codeflow

The New Stack

Pourrait révolutionner la façon développer en collaboration

StackBlitz a annoncé un nouveau produit : CodeFlow qui sortira début 2023

• Codeflow ajoute une intégration GitHub en un clic à l'environnement de développement StackBlitz
• Permet de créer et review des pull requests instantanément et facilement
• Ajouter "PR.new" au début d'un URL GitHub permet de l'ouvrir instantanément dans un environnement live

Approche "Multi-burner stove"

• Permet de travailler sur une nouvelle fonctionnalité en local normalement
• Ainsi que de faire des corrections rapides sans devoir stash, pull, installer les dépendences, etc.
• Donc faire des changements directement dans l'environnement StackBlitz

Le but final est de créer le Figma du développement

• Permettre le développement collaboratif
• Complètement online
• En temps réel
• Permettre de développer aux personnes qui ne savent pas (ou peu) coder

Ismaïli Anas

mon domaine est le Marketing

Mon sujet : "Comment programmer vos posts sur Linkedin"

Ma source : "Le Blog du modérateur"

Pourquoi ? : "Besoin de maîtriser le fonctionnement de Linkedin notamment dans le cadre de la réalisaton de mon TB"

• Désormais possible de programmer publications à l'avance sur l'application native de Linkedin
• Uniquement disponible sur l'application Android et la version Web

• Rendez-vous dans la section Créer un post depuis le feed général
• Cliquez sur l’horloge qui apparaît en bas, à côté du bouton Post
• Choisissez la date et l’heure pour publier votre message
• Validez votre choix pour programmer votre publication

Linkedin is rolling out an in-app schedule posts feature! ⏰

Currently available on Android and web only. pic.twitter.com/TzMJCwT2uR

— Matt Navarra (@MattNavarra) November 22, 2022

Mairot Paul

Développement Web

The illusion of speed – why perceived performance matters

dev.to

Titre intriguant 🧐, utile pour de futurs projets

Time is relative

État actif & État passif

Garder l'utilisateur en mode actif

• Éviter les éléments qui "sautent"
• Attention aux animations
• Preloading

Faire que l'état passif paraisse plus rapide

• Barre chargement
• Chargement du squelette du site
• Jeu pour patienter
• Informer l'utilisateur

Meia Simon

Développement frontend

React Router

https://twitter.com/melvynxdev

Gain de productivité

Qu'est-ce que c'est ?

• Librairie JS pour REACT
• Client side routing

Relative links

• Comme en bash
• Navigation avec ./adc ou ../../def par ex.

Loader

• Pré-load les datas dans la route
• Affichage en fonction du loading state

Molano Correia Jasmine

Creative dev

Les outils du processus créatifs

TEDx | Si j’avais un robot? Le robot un outil comme les autres. | THIBAULT BREVET |

Andrea Anner et Thibault Brevet, m'ont inspiré à changer de voie

Questionner les precessus créatifs

• Dans les domaine du design on se concentre sur le resultats
• Develloper des outils qui nous apprenent de nouvelles manière de travailler

Jouer avec un robot

• Apprendre au robots à jouer

L'avenir

• Ne pas subir les technologies mais les apprivoiser
• Connaître ses outils c'est gagné une indépendance
• Réfléchir en dehors de la boîte à outils du designer

Mota Santiago Adriana

User eXperience

Comment améliorer l'expérience utilisateur d'un site web ?

USABILIS · Conseil UX et ergonomie digitale

Domaine · TB · Ikigai · Texte · Vidéos · Liens

Importance de l'UX : GAFAMI

L'UX est la qualité de l'expérience vécue

• Utilisabilité et impact émotionnel
• "88% des internautes ne reviennent pas sur un site qui leur a fait vivre une expérience désagréable."
• Tests utilisateurs

Ergonomie et utilisabilité

• Les couleurs utilisées
• Les polices choisies
• La structure des textes
• L’arborescence visible du site

“Le design est l’ambassadeur silencieux de votre marque” - Paul Rand.

• Qui sont vos personas et que veulent-ils ?
• Penser responsive design
• Information & navigation vont de paire
• La rapidité de chargement des pages d’un site
• ...

Piaget Eliott

UI Design

Live adobe UI Design

Behance et yotube

Explicatif et inspirant

interaction avec le chat

Tips

Resch Julie

Recherche parcours utilisateurs

Le SXO

Blog UX (blog-ux.com)

Sujet intéressant pour l'avenir

Qu'est ce que le SXO

C'est la contraction de "Search eXperience Optimization"

Avantages du SXO

• Orienté parcours utilisateurs
• Fidéliser et convertir le prospect
• Tests utilisateurs pour optimiser les choix
• S'adapter aux supports (mobile, desktop...)

Le SXO va remplacer le SEO ?

• L'UX rapporte gros quand il est bien utilisé
• S'adapter aux algorithmes de demain
• Être visible c'est bien mais convertir c'est mieux

Salgat Sylvain

Production de contenu digital

What Magic Lantern reveals – 5D Mark III capable of 4K all along

https://www.eoshd.com/news/what-magic-lantern-reveals-5d-mark-iii-capable-of-4k-all-along/

Pourquoi ? Parce qu'il peut vous être utile

Canon 5D Mark III

Reflex plein format

Mars 2012 - 3'499$

Souto Alexandre

mon domaine : UX/UI

Mon sujet : Top 10 UX videos of all time

Ma source : NN/g

Pourquoi ? Get into UX life

NN/g

Nielsen Norman Group

Blog : World Leaders in Research-Based User Experience

Videos

600 vidéos pour 10 millions de vues

Top 10 des vidéos selon les viewers

Top 10

Guide : How to Empathy Map, Customer Journey Mapping 101, ...

Philosophie : The term "UX"

...

Mon choix : When to Use Which UX Research Method

Srbinovski Aleksandar

Stratégie marketing

Analyse de concurrence

https://fr.semrush.com/blog/analyse-concurrence/

L'analyse des concurrents est une étape importante dans le marketing

Elle permet d'identifier les forces, les faiblesses et d'anticiper les menaces du marché

Etablir une liste de concurrents

Créer une liste avec l'outil Market Explorer de Semrush

• Trouver des concurrents organiques
• Trouver des concurrents dans la recherche payante
• Trouver des concurrents dans le SEO

Identifier la stratégie digitale

• Analyser les parts de marché
• Etudier l'audience
• Analyser les placements et les promotions

Créer un plan d'action

• Transfomer les observations en informations exploitables

Themo Marilyn

Travail sur les modèles d'affaires

Ce que les leaders font faux en matière d'innovation

https://www.strategyzer.com/blog/what-leaders-get-wrong-about-innovation

Car il challenge les idées reçues dans le domaine

Deux erreurs dans le domaine d'innovation

1) Il suffit d'avoir une bonne idée

Réalité : Il faut se concentrer sur le test d'idée
Changer d'état d'esprit dans le processus d'idéation
Humilité (idée - clients - business model)
<=> Focus sur le test - itération

2) Focus soit sur l'innovation soit sur le management de business existants

Réalité : Il faudrait focus sur les deux. Equilibre entre "Explore and exploit"

Vianney-Liaud Emile

Développement web

Le monde de l'Open Source

GitHub

Comment rendre l'Open Source viable?

90%

Entreprises utilisant l'open source

413Mio

Contributeurs de l'open sources

Wismer David

Développement web frontend

Performance avec des frameworks JS

Analytics India Magazine

Comment résoudre le problème de performance sur le web?

La performance sur le web

• Temps de chargement
• Expérience utilisateur

"Pas tous les problèmes ne sont solvables"

Solutions

• Qwik (lazy-loading)
• Next.js (automatic static optimisation)
• Deno.js (rust)

Welcome 🤗
back back back

Qu'avez-vous appris
de plus important ?

Au menu 👨🏻‍🍳

1. 🎚 et 🗃 Théorie
2. 🫣 Coder
3. 🌏 Déployer
4. ✍️ Articles

Questions ?

1. 🎯 Le domaine
2. 📡 Système d'écoute
3. 🎚 Workflow de tri
4. 🗃 Classement
5. ⏳ L'épreuve du temps
6. 💡 Exploitation

🎚
Workflow de tri

Pourquoi 🎯
et quand ⏳ ?

Utilité et temporalité de l'information

⭐️

🎛

Processus

1. Premier tri -> Outil de lecture
2. Lecture -> Sélection (long terme, références)
3. Classé pour toujours

1. 🎯 Le domaine
2. 📡 Système d'écoute
3. 🎚 Workflow de tri
4. 🗃 Classement
5. ⏳ L'épreuve du temps
6. 💡 Exploitation

🗃
Classement

Category / Tags

Exclusif / Ouvert

Définition de la taxonomie : Exemple CSS

hugo.io

🧪
Lab

• Sécurité
• Performances
• Resilience
• Simplicité

monsite/
├── archetypes/
│   └── default.md
├── assets/
├── content/
├── data/
├── layouts/
├── public/
├── static/
├── themes/
└── config.toml
						

➜  zufrieden git:(source) hugo
Start building sites … 

                   |  EN   
-------------------+-------
  Pages            | 2869  
  Paginator pages  |   26  
  Non-page files   |   90  
  Static files     |   69  
  Processed images |    0  
  Aliases          |    1  
  Sitemaps         |    1  
  Cleaned          |    0  

Total in 860 ms 

➜  zufrieden git:(source) hugo serve
Start building sites … 
					
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Cohérence avec votre domaine

Comment choisir un outil/logiciel/framework/CMS/theme ?

1. 🥰 Communauté
2. 💉 Dépendances
3. 🎨 Design
4. 🚢 Quantité de code
5. 📟 Derniers commit

🚧

Exercice pratique nº5

• Créer un repository sur github : labveilletech
• Installer HUGO, créer le site labveilletech hugo new site labveilletech
• Bien choisir un thème et l'installer
• Créer votre page A propos

Hosting GitHub

Documentation complète pages.github.com

Actions Hugo

github.com/peaceiris/actions-hugo

.github/workflows/gh-pages.yml

name: github pages

on:
  push:
	branches:
	  - main  # Set a branch to deploy

...
						

...

jobs:
	deploy:
		runs-on: ubuntu-18.04
		steps:
			- uses: actions/checkout@v2
				with:
				  submodules: true 
				  fetch-depth: 0

			- name: Setup Hugo
				uses: peaceiris/actions-hugo@v2
				with:
					hugo-version: 'latest'

...
					

...

- name: Build
	run: hugo --minify

- name: Deploy
	uses: peaceiris/actions-gh-pages@v3
	with:
		github_token: ${{ secrets.GITHUB_TOKEN }}
		publish_dir: ./public%  
					

Welcome back^4/5

Bonne année !

Au menu 👨🏻‍🍳

1. ⏳ et 💡 Théorie
2. 🌏 Déployer
3. ✍️ Articles

1. 🎯 Le domaine
2. 📡 Système d'écoute
3. 🎚 Workflow de tri
4. 🗃 Classement
5. ⏳ L'épreuve du temps
6. 💡 Exploitation

⏳
L'épreuve du temps

1984

Des courbes à retenir 📈📉

jQuery

						
$('body').append($('<p>'))
	
	

Vanilla

	
document.body.appendChild(document.createElement('p'))
						
						

⌛️ A quel moment ça s'arrête ?

The idea that something might work fine the way it is has no place in tech culture.

~ Maciej Ceglowski

Evolution vs progress

🔮
Prédire et qualifier l'utilité des informations

1. 🎯 Le domaine
2. 📡 Système d'écoute
3. 🎚 Workflow de tri
4. 🗃 Classement
5. ⏳ L'épreuve du temps
6. 💡 Exploitation

💡
Exploitation planifiée

Expérimentation

1. ⛑ Prototype

2. 🎩 Vrais projets

3. 🧰 Lessons apprises

🧰

• Sujet et objectifs de l'expérience
• Résultat attendu, résultat obtenu
• Point d'apprentissage
• Idées/exemples d'application de la méthode

🧑‍🚒

🕵️‍♀️

🚧

Exercice pratique nº6

Jusqu'à la fin du cours

• Création d'un prototype pour expérimenter
• Rédaction de l'article "lesson apprise"

🧘‍♀️

Avoir confiance en votre système

Welcome back

Dernier cours 😱

Au menu 👨🏻‍🍳

1. 💡 Théorie
2. 🌏 Déployer
3. ✍️ Articles

Socle technologique

• Hébergement web
  • OS
  • Webserver
• Génération du site HTML
  • OS
  • Hugo App
• Stockage de la source de contenu
  • Git

Github pages

git branch gh-pages

GitHub Actions

Automatiser

1. 🙋 Une nouvelle version
2. 🧰 Installer les outils
3. 📦 Récupérer le code
4. 🏗️ Générer le site
5. ⚓️ Publier

🧪 Objectif atteint ?

• Importance de la veille
• Prendre du recule sur votre profession
• Mécanismes de la gestion des connaissances
• Trouver votre système

Veille technologique

1. 🎯 Le domaine
2. 📡 Système d'écoute
3. 🎚 Workflow de tri
4. 🗃 Classement
5. ⏳ L'épreuve du temps
6. 💡 Exploitation

Vos questions maintenant ou plus tard zufrieden.io