1micron pipeline

Pipeline per lo sviluppo di siti web avanzati
DATA
05/09/2020
AGGIORNATO
17/04/2023
In 1micron utilizzo diversi strumenti per realizzare siti web stilisticamente avanzati. Vedremo brevemente quali passaggi tecnici utilizzo per passare dalla progettazione alla pubblicazione dei contenuti, concatenando tali strumenti.

Progettazione

  1. Carta e penna
  2. ToDoList (AbstractSpoon)
  3. Adobe XD
  4. Writer (LibreOffice)

Ogni progetto viene preventivamente abbozzato su carta: schizzi, idee, e processi vengono prima formalizzati su appositi canvas di progetto, creati ad hoc, con specifico versionamento.

L'intero processo di gestione viene gestito internamente con ToDoList di AbstractSpoon: gli appunti cartacei delineano i punti chiave del progetto in relazione al tipo di analisi effettuata per il progetto ed alla parte creativa di brainstorming. In questo modo è possibile pianificare a grandi linee tempi e costi.

Ogni fase di sviluppo modella il progetto in itinere utilizzando un approccio a "rilascio continuo" (v. Continuous Delivery).

Per i progetti basati su budget a schema statico le fasi di affinamento progressivo sono superflue o opzionali.

Per il copy di qualsiasi parte del progetto utilizzo Writer di LibreOffice.

Con Adobe XD procedo alla definizione del prototipo di progetto vero e proprio.

1micron: progettazione in Adobe XD

Grafica 2D

  1. Lightroom
  2. Illustrator
  3. Photoshop
  4. InDesign

Tutte le fotografie vengono sempre preventivamente processate in Lightroom.

1micron: lavorazione foto in Adobe Lightroom

Successivamente vengono esportate per eventuali modifiche in Photoshop.

I file di Illustrator vengono utilizzati nativamente all'interno di InDesign o Photoshop oppure per esportare grafica SVG, utilizzata nelle interfacce grafiche.

1micron: iconset Alchemical Pixel realizzato in Illustrator

InDesign viene utilizzato per gestire processi di stampa e materiale specifico come slide e grafica in PDF per il web.

Grafica 3D

Utilizzo Cinema4D + RedShift per creare grafica tridimensionale in punti specifici dei siti web.

Editing

Utilizzo Sublime Text per la realizzazione di tutti i codici dei siti web. Degno di nota è il programma Sublime Merge, della stessa casa, utile per il versionamento in Git.

1micron: scrittura codice in SublimeText

Animazione

  1. GSAP
  2. AfterEffects
  3. Cinema4D
  4. Premiere
  5. Adobe Media Encoder
  6. Red Giant

Utilizzo diversi strumenti per realizzare animazioni 2D/3D per i siti web. In base a specifiche esigenze combino questi strumenti in modo differente per ottenere specifici formati ed effetti animati, che verranno poi successivamente trattati in JavaScript/CSS.

Per la parte video e per saltuari effetti visuali (VFX) utilizzo Red Giant.

Framework

Principalmente utilizzo:

  1. Symfony
  2. NuxtJS
  3. Wordpress

Web Design Toolchain

Uno strumento che ho realizzato per uso interno utilizza tutti i componenti e le librerie presenti nei siti web di 1micron.

Questo permette di avere un archivio completo e sempre aggiornato dei componenti con relative annotazioni tecniche. Inoltre consente di verificare che non ci siano incompatibilità tra librerie, componenti e moduli al fine di creare un ecosistema di strumenti compatibili.

Hosting

  1. Hosting php
  2. Hosting con CDN (via GitHub)

Per i progetti in vanilla php o WordPress mi avvalgo della consulenza di diversi hosting provider, italiani ed esteri, fornendo consulenza per soluzioni shared, VPS e cloud server. Per progetti in Symfony utilizzo il cloud fornito da Symfony.

Per i progetti NodeJS-based utilizzo invece hosting Netlify o Vercel.