Sviluppo e manutenzione di un sito in HTML

NOTE

HOME

 

Premessa

I siti web possono essere realizzati utilizzando un CMS (content management system) come i prodotti open source Drupal o Joomla o i numerosi sistemi professionali proposti sul mercato. Questi sistemi generano le pagine in linguaggi HTML più i programmi inseriti in esse in codice Java Script o PHP che sono poi decodificate e visualizzate dai browser.
Oppure possono essere realizzati direttamente in codice HTML utilizzando un editor WYSIWYG (what you see is what yoou get).

Questo secondo approccio è quello scelto sin dall'inizio per il sito Musica & Memoria. Richiede più lavoro di editing rispetto a un CMS e deve essere organizzato in modo collaborativo il lavoro se svolto da più persone, ma offre il vantaggio di prestazioni superiori, link non generati dinamicamente, e quindi più stabili  nelle ricerche di Google, e di una maggiore flessibilità nelle scelte di visualizzazione e organizzazione delle pagine.
Per gestire un grande numero di pagine e di immagini (in M&M sono alla data oltre 1600 le pagine e oltre 6000 le immagini) senza intervenire su ognuna di esse si fa ricorso a strumenti di gestione dei siti web e dei documenti in genere open e free che consentono di replicare le operazioni (massive editor e altri strumenti.

Questa pagina è una rassegna delle attività di manutenzione che si effettuano sul sito.

 

Standard di scrittura del codice HTML

Ogni pagina non è altro che un file in formato HTML (.htm o .html) la cui struttura deve rispettare le regole di questo linguaggio. Se si usa un editor verranno create rispettando le regole standard, ma conoscere le regole di sintassi, almeno le principali, ed essere in grado di seguire le istruzioni nel caso di inserimento di nuove funzionalità, è un requisito indispensabile.
Al termine della creazione di una pagina bisogna salvarla su file e loro volta organizzati in directory, e questa operazione apparentemente banale, per un grande numero di pagine deve essere effettuata in modo pianificato ed ordinato.

 

Subroutines

Elemento di base della tecnica di programmazione da sempre, consente di creare delle parti di codice, che realizzano tipicamente una funzione, e richiamarle da più programmi senza ripetere le linee di codice. Questa comoda tecnica di programmazione è applicabile anche nella realizzazione delle pagine web, in particolare quando si devono utilizzare definizioni CSS o routine in linguaggio Java.
Per richiamarle la sintassi da utilizzare è la seguente, rispettivamente per CSS e Java:
<link rel="stylesheet" type="text/css" href="programma.css">
<script language="JavaScript" type="text/javascript" src="_programma.js">

NB: Il programma Java script richiamato deve essere costituito solo dal codice, non deve quindi essere preceduto e chiuso dai comandi <script> e </script>, questi sono comandi html e quindi devono essere presenti solo nella pagina html che richiama la routine.

 

Nomenclatura delle pagine

Ogni pagina non è altro che un file in formato HTML (.htm o .html) la cui struttura deve rispettare le regole di questo linguaggio. Per riuscire a gestire un grande numero di pagine è necessario definire e poi rispettare una nomenclatura delle pagine, che è anche utile per rendere più efficaci strumenti indispensabili come Google analytics e come il motore di ricerca di Google:

  • i nomi file (delle pagine, delle immagini, tutti) non devono contenere spazi e caratteri speciali (lettere accentate in primis): vengono gestiti con sequenze di caratteri speciali nei server basati su Linux e creano problemi nei link;

  • devono contenere un nome identificativo della sezione cui fanno parte (es. "traduzioni", "brasile" e simili): in questo modo si potrà visualizzare in Analytics con estrema semplicità le prestazioni di una intera area;

  • devono contenere, individuabili dal motore di ricerca, le parole decisive con cui un visitatore può cercare il contenuto (le chiavi di ricerca): per essere individuabili basta che siano suddivise da separatori conosciuti dai crawler, come "_" o "-", ad esempio: traduzioni_annie_lennox.htm

 

Verificare i link interni (pagine, immagini e documenti)

Il sito non è altro che una serie di pagine linkate tra loro, e in ogni pagina possono essere linkati oggetti, in primo luogo immagini. I link tra le pagine e tra queste e gli oggetti, quando le prime superano le 100 non possono essere gestiti manualmente. basta spostarne alcune per errore o cambiare nome per rendere un lavoro lungo e complicato rimettere le cose a posto. Per gestire un sito grande è necessario un software che esplora e verifica tutti i link. In questo caso non occorre acquistarlo perché un'eccellente programma che fa questa funzione più diverse altre esiste già da anni e il programmatore che l'ha creato, un benefattore evidentemente, di nome Tilman Hausherr, lo ha messo a disposizione gratuitamente anni fa.
Xenu fornisce questi elenchi di dati sul nostro sito (i principali ed utili):

  1. Broken links, ordered by link

  2. Broken links, ordered by page

  3. List of pages by Title (URLs Site-map)

  4. Broken local links

  5. Orphan Files

  6. Statics of URLs

Con le liste 1 e 2 si individuano e poi si gestiscono facilmente i broken links tra le pagine del sito.
La lista di pagine ovvero di URL può essere usata anche come site map per Google, ma soprattutto consente di individuare i titoli delle pagine (elemento indispensabile) fuori standard.

 

Verificare i link interni alle pagine (local links)

Sono i link interni a una pagina non funzionanti: testo del link "segnalibro" non scritto correttamente o segnalibro inesistente. Xenu ne fornisce la lista ma lavorarci non è molto semplice perché sono mischiati link "not found" e ripetuti "anchor occurs multiple times". Solo nel primo caso il link interno non funziona e quindi deve essere gestito con priorità. L'elenco prodotto da Xenu non è in forma tabellare e le due anomalie sono mischiate, se sono molte bisogna suddividerlo. Il processo è semplice ma un po' lungo:

  • si copiano tutte le righe di errore in Word

  • si eliminano con l'editor di word i salti riga o return (^p) ripetuti

  • si sostituiscono gli spazi presenti nei due messaggi di errore in un altro caratteri, ad esempio "_" in questo modo rimane un solo spazio in ogni stringa

  • si sostituisce lo spazio nel carettere "," con l'editor (sostitusci ' not_found' con ';not_found')

  • si converte la lista in tabella

  • si copia la tabella in excel inserendo una riga di intestazione

  • si abilita il filtro di excel sulla seconda colonna e si ppssono ora selezionare solo i messaggi di errore "not found"

A questo punto rimane solo la parte più noisosa e per forza manuale: editare ogni file, normalmente non è necessario accedere al codice html.

 

Verificare i link esterni

 

Applicare una modifica su più pagine

 

Il sito web e i social (Facebook in particolare)

Lo sviluppo del web dal 2010 in poi con la diffusione in massa degli smartphone e, a seguire dei social network, impone a un sito web di essere presente anche su di essi, in particolare su Facebook. Creare una pagina FB (chiamata anche fanpage) è un'operazione molto semplice. Più complesso gestite i like. Nella home page e nelle pagine principali è opportuno inserire il pulsante per inserire un like visibile sulla pagina Facebook del visitatore e anche per condividere la pagina web con i suoi amici. I link sono gratis e vengono concessi con facilità ed è quindi una buona pratica facilitarli e sollecitarli.
Il codice per i link si trova nella sezione developer/tools dii Facebook (https://developers.facebook.com/tools/) con tutte le istruzioni per inserirlo nel sito. Viene spesso aggiornato da Google.
E' anche possibile verificare preventivamente quanti like ha avuto la pagina (anche prima di inserire il pulsante) nelle sezione debugger di condivisione (https://developers.facebook.com/tools/debug/sharing/).
Una pagina può essere già presente, e in questo caso verrà fornito il numero di like e altre informazioni recuperate dallo "scraping" di FB (la descrizione e molto altro). Ma potrebbe anche non essere presente, e in questo caso sarà mostrato il messaggio "Questo URL non è stato condiviso su Facebook in precedenza". Si può a questo punto forzare la condivisione ma il motivo per cui non è condiviso dovrebbe essere che nessuno ha condiviso la pagina su FB. A meno che siate passati da HTTP a HTTPS.

Effetti social del passaggio a HTTPS
Il passaggio al nuovo protocollo è stato molto sollecitato dai gestori dei browser e in particolare da Google ma l'adesione è stata meno immediata e totale del previsto. In ogni caso era necessaria e su M&M abbiamo provveduto entro i tempi indicati, la procedura seguita è descritta in questa pagina.
Il passaggio può comportare però la perdita dei like registrati da FB con il vecchio indirizzo http. In pratica:
- se non è aggiornato l'indirizzo della pagina nel codice FB viene ancora mostrato il numero di like precedente, ma si perdono quelli nuovi;
- se è impostato il redirect automatico vengono mostrati solo quelli selezionati dai visitatori dopo il passaggio a HTTPS indipendente dall'indirizzo inserito nel codice FB
- se l'indirizzo nel codice FB è quello della pagina mobile (nel caso sia utilizzato il sistema canonical page) in alcuni casi FB continua a visualizzare la numerazione precedente.

Non si possono sommare, bisogna scegliere in base al loro numero.

 

Controllare che una sezione di codice sia presente in tutte le pagine (es. Google Analytics)

Le applicazioni di ricerca testi ed editing come Grep sono in grado di cercare velocemente testi su più file, ma non hanno normalmente la funzione inversa, ovvero poter cercare se su più pagine NON è presente un testo.
Per raggiungere questo scopo bisogna operare per step e all'incontrario, quindi cercando i file che hanno il testo da individuare e spostandoli in un'altra directory.
Grep non ha una funzione per generare un file con l'elenco dei file individuati da spostare e quindi bisogna usare un altro strumento, meno comodo perché non è interattivo ma a stringhe di comandi e perché è solo per MS-DOS, ma più potente e adatto a questo scopo, si chiama FINDSTR ed è appunto un comando MS-DOS usabile con il prompt dei comandi. Tramite l'help del DOS si possono visualizzare le sue molte funzioni.

Passo 1: una volta caricati su una directory di lavoro dove saranno raccolti i file da spostare, il comando è:
FINDSTR /M /L "stringa" subdir\*.htm* > elenco.txt

Le due opzioni /M ed /L servono per generare solo il nome file e per fare una ricerca letterale, non influenzata da caratteri speciali.
Siccome ci serve una serie di caratteri uguali per ogni file prima del nome, il comando deve essere lanciato dalla directory padre di quella della cartella contenente i file da lavorare.

Nel file elenco.txt ci saranno più righe con questo formato:
subdir\nome-file.htm

Con l'editor (basta quello di blocco note) è sufficiente sostituire:
subdir\      -->    move   (con spazio)
.htm         -->    .htm elim\
e poi salvare il file di tipo testo come .bat
Ovviamente elim è il nome della sotto-directory

L'ultima operazione è quindi lanciare il file bat dalla directory subdir.

 

Eliminare gli orphan files

Xenu produce una lista degli orphan files individuati. Sono i file presenti nella directory del sito di qualsiasi formato (html, log, ecc.) che non sono linkati in nessuna pagina del sito.
Ogni file dell'elenco si spera non troppo lungo (ma è inevitabile produrli lavorando) ha questo formato:
file:///H:/Musica-e-Memoria/public_html/Imagine.jpg (12.1 KB)

Per spostarli (non è consigliabile eliminarli, ci possono essere file utili) occorre creare un file batch MS-DOS con un comando move per ciascun file. Bisogna però prima creare una directory di destinazione, che conviene chiamare con un nome di questo tipo
z_orphan_001

Dopo creata la directory il comando da generare partendo da ogni stringa è:
move Musica-e-Memoria\public_html\Imagine.jpg z_orphan_1\

Per farlo occorre importare in word la sezione di Xenu con la lista degli orphan file e agire con l'editor sulla parti in verde. Alla fine occorre anche cambiare tutti gli slash con quelli in senso contrario perchè MS-DOS considera solo quelli da sinistra a destra.
La prima sostituzione (in giallo) è semplice, il percorso fino alla directory va modificato in 'move '.
Per la seconda bisogna trasformare l'elenco in tabella agendo sulla parentesi aperta, che usiamo come separatore inserendo un carattere speciale non presente nei nomi file (#) che servirà poi per inserire il nome della directory di destinazione. Prima di questa operazione controllare però se ci sono parentesi aperte nei nomi file e sostituirle con parentesi quadre. Possono essere date o versioni successive dello stesso file.
Quindi: ( --> (#(
Facendo la conversione di testo in tabella usando parentesi aperta come separatore avremo una tabella di questo tipo:

move Musica-e-Memoria/public_html/Imagine.jpg

#

12.1 KB)

move Musica-e-Memoria/public_html/album_france_gall/france_gall-5-minutes-damour_quatrieme_choses.jpg

#

55.5 KB)

move Musica-e-Memoria/public_html/album_france_gall/france_gall-LP.jpg

#

26.2 KB)

move Musica-e-Memoria/public_html/album_france_gall/france_gall-quatrieme_chose.jpg

#

106.5 KB)

 

La terza colonna è quella da eliminare, nella seconda sostituiamo # con il nome della directory di destinazione lasciando però uno spazio davanti per creare un comando sintatticamente corretto.
Dopo questa operazione si converte la tabella in testo, gli slash verso destra in quelli verso sinistra e abbiamo il batch.
Per eseguirlo bisogna convertire il file in formato .bat. Da Word si salva in txt e poi con il prompt dei comandi lo si converte in .bat e infine si lancia dalla directory principale per spostare i file.

 

Eliminare spazi nei nomi file

@echo off
echo if "%%3"=="" if not "%%2"=="" ren "%%1 %%2" %%1%%2>~nospace.bat
lfnfor on
set "=
for %%f in (*.*) do call ~nospace.bat %"%%%f%"%
del ~nospace.bat
--------------------------------------------------------------------
Due sole avvertenze:
- questo batch opera sui file contenuti nella directory corrente
- questo batch rinomina solo i file il cui nome contiene un unico spazio (eliminandolo), anche se è possibile modificarlo affinché funzioni anche in casi più generali.
 

 

© Musica & Memoria Febbraio 2018 / Maggio 2019

CONTATTO

HOME