Come costruire una landing page seo oriented dinamica con html, css, il framework w3css, php e mysql in otto ore preservando la salute fisica e mentale

Partiamo dal progetto https://www.farwebdesign.com/umbrianetwork/ , é solo una pagina, che ci vuole a mettere in piedi una landing-page? Questa in due ore di tempo si fa senza problemi. Eh? Togliamoci dall’ effetto finale e risaliamo alle cause e agli antefatti. Lavorate per un facoltoso imprenditore che vi ha messo in pista come frontend developer dandovi 24 ore di tempo per costruire una portentosa landing page che serva a canalizzare la seo dell’ azienda e che gli procuri indubbi vantaggi nelle SERP di Google. Ok gli avete risposto che si poteva fare con qualche modifica riguardante il codice iban a patto che poi i contenuti reali li avrebbe inseriti lui a seconda delle esigenze! E’ andato tutto bene? Mediazione conclusa e incarico ufficialmente partito. Per sfornare la torta senza contrindicazione la ricetta prevede l’utilizzo dei seguenti ingredienti:

  • l’uso del framework usato pochissimo (a torto) w3css, indirizzo https://www.w3schools.com/w3css/
  • un database mysql
  • linguaggio di programmazione php e server in grado di macinare il parser Apache
  • un vigoroso editor di codice per creare il nostro progetto
  • un pò di creatività per immaginare il lay-out
  • tempo a disposizione

 Tolte le ore di sonno di rito, quelle usate per fare colazione e pranzare e cenare e tolto il minutaggio delle pause caffè canoniche concludiamo che otto ore piene di lavoro riusciamo a tirarle fuori per concludere la giornata. A questo punto serve ottimizzare bene il tutto per pianificare il progetto, preparare il database con le voci corrispondenti (vogliamo solo contenuti dinamici nella nostra landing), aggiustare il tiro su un framework che non conosciamo e che è la prima volta che usiamo (ci sono tante classi con diverse funzionalità da sviscerare), risolvere i problemi di paginazione dinamica (se abbiamo più contenuti che devono comparire nella nostra pagina dovranno essere in grado di ruotare su se stessi rispondendo a un meccanismo di paginazione che è qualcosa sempre complicato da implementare) dedicare altro tempo per sistemare le magagne (quelle ci sono sempre in un progetto e sono variabili del tutto imprevedibili, tipo conflittualità tra CSS standard e classi del framework, spostamenti di div non autorizzati che modificano il lay-out nel momento in cui il PHP entra in scena nella pagina per creare intersezioni dinamiche sempre molto delicate da gestire, un display-inline che non vuole saperne di funzionare per allineare degli elementi orizontalmente etc etc). Insomma il lavoro non manca e in otto ore bisogna pensare il progetto, modellare il database, creare contenuti per il DB (questo si che richiede tempo, ma noi avvezzi alla consultazione di faccialibro, li genereremo Fake solo per tamponare!), agganciarsi al database, estrapolare i contenuti solo dopo che il lay-out è pronto e colorato e forgiato con le nostre classi-vestito. Inserire la paginazione finale, compattare meglio il progetto sistemando il file system etc etc. L’importante alla fine è sfornare qualcosa di qualitativamente rilevante che funziona, ovviamente anche la parte grafica con Photoshop avrà il suo senso di esistere, perchè se si aspira a migliorare come frontend developer full stack bisogna essere in grado di avere un piede nella programmazione, ma anche saper gestire un minimo di grafica in maniera autonoma e anche affrontare problematiche di content seo e di usabilità. Insomma chi può sopravvivere nella globalizzazione a pozzanghere liquide è solo Superman, il candidato ideale che sa fare tutto, integrando nel suo cv decine di tecnologie che richiederebbero anni ciascuna per poter essere esplorate prima di affermare davanti a un selezionatore che “io so fare questo”. Ma anche se non abbiamo l’età di Mosè e non siamo l’ultimo immortale, il compito è di facile realizzazione, vediamo perché. Iniziamo ad amalgamare gli ingredienti quindi. Il suggerimento è di partire in quarta con il database e riepmpirlo di contenuti fittizi, facendo però attenzione che la struttura dati sia perfetta, nel senso che i campi devono essere quelli che servono senza ripensamenti successivi e dimenticanze. Quindi una volta che ci si toglie questa incombenza non da poco, abbiamo un motore sotto che dovrà essere solo azionato con PHP. Presumibilmente dal momento in cui abbiamo pensato il progetto, abbiamo deciso di includere l’uso di una tecnologia nuova come CSSW3 e conclusa la fase di progettazione del DB, se ne sono andate almeno due ore, ovviamente senza che qualcuno ci abbia puntato una pistola alla tempia. Ce la farò in sei ore a fare tutto il resto? Certo perchè tutti continuano a ripetere che andrà tutto bene. Quindi a questo punto non ci resta che esplorare il w3css link https://www.w3schools.com/w3css/ . Dopo aver studiato la socumentazione allestito una impostazione di massima per la nostra pagina (che ovviamente modificheremo per tutto il resto del tempo alla ricerca dei migliori aggiustamenti estetici!) , diviso per sezioni, deciso cosa o non cosa vedere (la nostra idea è di fare qualcosa di molto semplice che dovrebbe solo amplificare i contenuti niente di trascendentale), scopriamo che abbiamo consumato quasi la metà del tempo a nostra disposizione, ma abbiamo sempre tanto tempo per risolverla senza andare in contro a penalizzazioni di compenso. Per cui sicuri di poter completare l’opera ci spariamo pure mezz’ ora di paura fuori programma per ricaricare le batterie e ripartire! Dopo residuo a disposizione dopo la sortita al Bar, 4 ore precise. Ok! La prima ora la dedico a recuperare i contenuti in maniera dinamica con una SELECT che dovrà scavare nel DB e recuperare i dati sulla pagina centrale. Ok fatto. Poi faccio la stessa operazione su tutto il resto della mia pagina, anche in quelle aree dove voglio recuperare dinamicamente i contenuti dei link (altrimenti non avrebbe nessun senso utilizzare php e mysql per memorizzare i dati, potrei fare tutto a mano con html statico). Mentre facciamo tutte queste operazioni abbiamo perso tempo a modellare sia il LINK, sia le immagini, per renderle fruibili con codice dinamico perchè come sappiamo gli script PHP devono sposarsi con la parte statica e nella sintassi succede spesso di dimenticare senza farlo apposta un punto e virgola e anche di tranciare una virgoletta vitale che fa funzionare un valore stringa. Fortunatamente ci viene in aiuto il nostro editor preferito (recentemente sto usando molto Visual Studio Code che è davvero super) che si mette a mugognare graficamente se qualcosa non funziona. Nel frattempo dopo cinque ore di lavoro ci siamo accorti che da una singola pagina la nostra cartella progetto è lievitata a diversi file e anche con tantissime immagini da noi create appositamente per riempire di contenuti il DB. Abbiamo file che inclusi nella pagina principale funzionano da connessione per il DB, abbiamo file che inclusi nella nostra pagina principale, ci creano dinamicamente un footer e così via. Così con largo anticipo riusciamo ad arrivare il momento topico in cui non ci resta che risolvere tutto dando il tocco finale: implementare la paginazione! Ops e ci resta ancora parecchio tempo, bene! E’ sicuramente la parte più dispendiosa se non la si fa tutti i giorni. Bisogna fare in modo che dividendo il numero di record del DB con un intero scelto dall’ utente mi vengano restituite le pagine da mostrare per la visualizzazione senza far scorrere la pagina di un km e mezzo per visualizzare tutto il recordset di dati! Insomma alla fine sfruttiamo tutto il tempo a nostra disposizione per risolvere anche questo problema senza affanni e allo scoccare nell’ ottava tutto è pronto per la consegna, anche se ovviamente non manca quel qualcosa che si poteva ulteriormente migliorare e che non abbiamo avuto modo di seguire: https://www.farwebdesign.com/umbrianetwork/ . La morale della favola è che anche le cose semplici non sono facili come sembrano. Era solo una pagina ma le operazioni da fare per renderla dinamica e autonoma non erano certo risolvibili con uno schiocco di dita e comunque le cose da mettere in atto per renderla fruibile erano tante e tutti invisibili all’ esterno. Guardiamo il lato positivo: abbiamo imparato qualche rudimento di un framework nuovo che non è certo equiparabile per dffusione a bootstrap ma che si rivelato una portentosa cassetta degli attrezzi (se parliamo di libreria la differenza con un framework è come chiedere a supporto un singolo attrezzo, un cacciavite per esempio, che risolve solo un problema contingente, senza offrire un ventaglio di opzioni su problematiche che potrebbero sorgere tra le più svariate). In uno dei prossimi post Umbriaway Consulting affronterà la spinosa questione di come costruire un sito dinamico di cento pagine in una settimana senza andare incontro a un TSO, cronometro alla mano!

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...