Utilità di conversione pagine
Può capitare di aver fatto esperimenti con editor visuali che hanno dato come risultato del codice poco pulito o tag ripetuti o altri problemi. Inoltre ci si può trovare con alcuni tags in maiuscolo ed altri in minuscolo o ancora si può voler convertire un documento in formato testo. Per fare queste ed altre operazioni, ci vengono incontro diversi strumenti di 1st Page. Per le conversioni maiuscolo/minuscolo di qualunque porzione di testo e per decidere se i prossimi tag che inseriremo dovranno essere maiuscoli o minuscoli, vedere i capitoli precedenti.
Convertire un file di testo in HTML
Per ottenere tale risultato basta richiamare l'apposita voce sul menu: File->Convert Text File->HTML Document. Ci verrà chiesto di selezionare un documento da convertire e otterremo una copia di tale documento con formattazione HTML di base. In particolare avremo i tag indispensabili di una pagina web, quindi HTML, HEAD, BODY (con impostazione dei colori di base), TITLE e i vari BR che sostituiscono i vari INVIO. A questo punto sarà sufficiente sostituire la scritta "Untitled" che compare nel titolo con il titolo effettivo e salvare il documento.
Inserire un file di testo in un documento
Se abbiamo un file di testo da aggiungere ad un documento già esistente, possiamo farlo tramite: File->Import/Insert Text File. In questo caso il file viene inserito così come è. Potremo poi procedere ad inserire i BR, convertire in liste o in tabelle tramite i semplici strumenti del menu contestuale alla voce Selected
.
Convertire un documento HTML in file di testo
Tale operazione è molto semplice: basta selezionare Tools->Strip All Tags e rispondere SI alla domanda successiva.
ATTENZIONE: In questo caso non viene creato un nuovo documento ma modificato quello attuale, quindi se volete salvare una copia del lavoro di formattazione HTML già fatto, evitate di premere il tasto SALVA ma andate su File->Save As e date un nuovo nome (o lo stesso nome ma con estensione TXT o comunque diversa). In caso di panico ricordatevi che, se l'opzione è stata precedentemente impostata (vedi), si può effettuare un UNDO anche dopo aver salvato.
Gli strumenti di Tidy HTML
Tidy HTML è uno strumento creato da Dave Raggett per il consorzio W3C e messo a disposizione gratuitamente. Quelli di 1st Page lo hanno quindi potuto integrare all'interno del proprio editor aggiungendo anche un'interfaccia per il settaggio delle varie opzioni e rendendone alcune raggiungibili in maniera autonoma dalle altre. Cominciamo quindi col vedere le opzioni singole, premettendo che su ognuna di queste agisce l'opzione del menu: Tools->Tidy HTML Quick Tools->Output tags in uppercase che può essere attivato per ottenere nel risultato tutti i tags in maiuscolo o disattivato per averli tutti in minuscolo:
Applica formattazione del sorgente
Questa opzione, raggiungibile tramite: Tools->Tidy HTML Quick Tools->Apply Source Formatting, si propone di "formattare" il codice della pagina. Esso restituisce principalmente due risultati:
- Sostituisce i caratteri speciali digitati dalla tastiera con i propri corrispondenti per il web;
- Inserisce dei rientri gerarchici dei tag, mettendo anche su una nuova riga i tag di chiusura dei paragrafi.
Va notato che queste due operazioni vengono eseguite anche dagli altri strumenti, in aggiunta alle altre che andrò ad elencare.
Aggiorna il documento ai fogli di stile
Questo strumento (Tools->Tidy HTML Quick Tools->Upgrade to StyleSheets) è utile per chi si ritrova ad avere documenti HTML senza formattazione CSS e vuole applicare le modifiche del caso. Esso sostituisce le formattazioni di testo ricorrenti con l'applicazione di stili e definisce gli stili stessi all'inizio del documento (Inline Styles). Se poi si vuole creare un Foglio di Stile esterno, basterà spostare la definizione in un altro file e inserire il collegamento allo stesso all'inizio del documento.
Conversione in formato XML
Tools->Tidy HTML Quick Tools->Convert to XML; in questo caso la conversione è in formato XML.
Strumento Tidy HTML completo
Si avvia da: Tools->Tidy HTML Format and Fix. Appena avviato, ci si presenta una finestra in cui inizialmente compaiono alcune informazioni in inglese riguardo Tidy (che significa "mettere in ordine") che si possono riassumere brevemente con ciò che ho scritto all'inizio di questo capitolo. Lo scopo principale dello strumento consiste nel riordinare visivamente la pagina in modo da renderla più "presentabile" quando visualizzata in formato sorgente. C'è poi un tasto che richiama il sito web in cui trovare maggiori informazioni e sotto abbiamo a disposizione gli strumenti per: riportare le impostazioni iniziali (RESTORE DEFAULT SETTINGS), salvare le impostazioni correnti (SAVE SETTINGS) o richiamare impostazioni precedentemente salvate (LOAD SETTINGS).
Ma andiamo a vedere cosa può fare questo strumento:
MARKUP
Corrisponde a Applica formattazione del sorgente
WRAP
Inserisce un INVIO dopo il numero di caratteri impostati. Ne sconsiglierei l'utilizzo se non proprio indispensabile. Per la pagina da pubblicare significherebbe soprattutto maggior pesantezza. Infatti i browser web hanno l'a capo automatico e anche la maggior parte degli editor lo hanno. Per evitare che vengano inseriti INVII indesiderati consiglio di impostare il numero più alto possibile (9.999.999.999.999).
TAB size
Qui va impostato il numero di spazi a cui si vuole che corrisponda un carattere di tabulazione. Questo perché, se sono presenti dei caratteri TAB, essi verranno sostituiti con il numero di spazi qui indicato.
INDENT
Se impostato su YES, vengono impostati dei rientri. In particolare avremo le sezioni del documento HEAD e BODY con un rientro, tutti gli altri elementi che indicano l'inizio e la fine di un paragrafo con due rientri e la prima riga di ogni paragrafo ugualmente con due rientri. Impostandolo su AUTO dice che dovrebbe "decidere" il programma quando è il caso o meno di impostare dei rientri, ma in base alle prove da me effettuate non ho riscontrato differenze rispetto al settaggio di YES. Con NO chiaramente non c'è nessun rientro ed eventuali rientri impostati precedentemente per i TAG vengono eliminati.
INDENT SPACES
Se la precedente opzione non è impostata su NO, è da qui che si decide a quanti spazi deve corrispondere ogni rientro.
INDENT ATtrIBUTES
Se attivato, inserisce un INVIO dopo ogni attributo. Ad esempio il tag:
<body bgcolor="#666666" text="#CCFF66" link="#CC0033">
diverrebbe:
<body
bgcolor="#666666"
text="#CCFF66"
link="#CC0033">
... a voi la scelta.
HIDE ENDTAGS
Se attivato, provvede ad eliminare i tag finali non obbligatori come per esempio quelli di fine elemento di un elenco puntato.
INPUT XML
Se il documento da processare è in formato XML, va indicato qui in modo che possa essere riconosciuto correttamente.
OUTPUT XML
Se attiva questa opzione converte il documento in formato XML.
ADD XML PI
Opzione valida solo se si vuole ottenere un documento XML. Se il documento di origine è già in formato XML PI (Processing Instruction), tale opzione non influenza il risultato. Diversamente, se attiva, l'output XML conterrà anche PI.
OUTPUT XHTML
Se attiva, questa opzione da in output un documento XHTML. Se una o più opzioni XHTML sono già impostate nel documento di origine, esse vengono verificate ed eventualmente corrette. Inoltre i tags resteranno nel formato (maiuscolo o minuscolo) originale indipendentemente da come sono settate le altre opzioni.
DOCTYPE
Non può essere modificato.
CHARACTER ENCODING
Qui si imposta il formato e la dimensione della tabella codici da utilizzare. ASCII è quella di default e se non sapete cosa fare vi consiglio di lasciare tutto così. Considerando che su alcuni computer vengono riconosciuti solo 127 caratteri, alcuni formati convertono tutti i successivi, altri solo alcuni. Impostando ASCII si ha una maggior compatibilità perché tutti i caratteri oltre il 127° della tavola dei caratteri vengono trasformati. Impostando LATIN vengono trasformati solo quelli che eccedono il 255° carattere. UTF8 dà risultati piuttosto strani e ISO2022 converte pochissimi caratteri.
P.S.: Per chi non sapesse cosa è una tavola dei caratteri, si tratta di una sorta di mappa su cui sono stati inseriti i caratteri che normalmente digitiamo da tastiera o che inseriamo come simboli o caratteri speciali e ognuno di essi, quando inserito sul computer, viene trasformato con un codice macchina. Il codice ASCII è il più universale, se così si può dire. In Italia, come anche negli altri paesi usiamo più di 127 caratteri, ma i primi 127 sono universalmente compatibili mentre i successivi sono personalizzati a seconda delle nazioni.
NUMERIC ENTITIES
trasforma i caratteri di cui ho appena parlato in un codice numerico anziché alfanumerico. Questa operazione li rende ancora più compatibili.
QUOTE MARKS
trasforma i caratteri di virgolette semplici e doppie nel corrispondente codificato. Consigliato attivarlo.
QUOTE NBSP
NBSP cioè Non Breaking Spaces sono gli spazi indivisibili. Attivando questa opzione anche loro vengono convertiti.
QUOTE AMPERSAND
FIX BACKSLASH
Se attiva questa opzione converte eventuali caratteri BACKSLASH () presenti in percorsi di file in SLASH (/) visto che gli utenti Windows usano la prima, ma su internet si usa la seconda e quindi un percorso indicato utilizzando la prima non verrebbe trovato su internet.
WRAP SCRIPT LITERALS
Se attivo, attiva l'a capo all'interno di stringhe di testo particolarmente lunghe e lo fa precedere da un carattere BACKSLASH ().
WRAP ASP
Se attivo va a capo anche all'interno di comandi ASP.
BREAK BEFORE BR
Se attivo, viene inserito un INVIO prima di ogni tag BR. Io personalmente preferisco l'INVIO dopo il BR, questione di gusti!
UPPERCASE TAGS
Converte in maiuscolo tutti i TAGS. Per TAG si intende un comando HTML, ad esempio all'interno di: <BODY bgcolor="#666666" text="#CCFF66" link="#CC0033">, solo la parola BODY viene convertita in maiuscolo.
UPPERCASE ATtrIBUTES
In questo caso vengono convertiti in maiuscolo gli attributi, quindi avremo come risultato: <body bgcolor="#666666" TEXT="#CCFF66" LINK="#CC0033">.
CLEAN AND CONVERT DOCUMENT TO CSS
Se attivo corrisponde all'opzione UPGRADE TO STYLESHEETS vista più su.
DROP font TAGS
Ha significato solo se è attiva l'opzione precedente. Se attivato, elimina diversi TAG di formattazione anziché sostituirli con i fogli di stile. I TAG in questione sono quelli relativi ai font ed ai paragrafi centrati tramite CENTER.
Attenzione: se questa opzione è attiva, si perde parte della formattazione. Avviando lo strumento singolo UPGRADE TO STYLESHEETS l'opzione è disattivata.
Compressione del codice
Sul menu: Tools->HTML Source Compressor, troviamo un altro utile strumento di ottimizzazione codice. Mentre lo strumento appena visto ha essenzialmente il compito di "abbellire" il codice per facilitarne la lettura, oltre chiaramente ad una serie di altre utili funzioni, quest'ultimo strumento ha invece quasi la funzione opposta, cioè: rendere il codice più difficile da leggere (per rendere più difficoltosa l'eventuale copia dello stesso) e, soprattutto, ottenere delle pagine più leggere in termini di bytes occupati in modo che possano essere caricate più velocemente.
Questo strumento, a differenza del precedente, non opera sul documento correntemente aperto, ma richiede il nome del documento su cui operare e il nome del nuovo documento (che eventualmente possono anche coincidere).
Attenzione però: fate in modo di avere sempre una copia del documento prima di procedere con questa operazione, oppure specificate un file di destinazione diverso da quello di origine. Questo perché sarà molto difficile operare delle modifiche sul file che si ottiene. Ripeto che lo scopo principale consiste nel creare una copia del documento più leggera possibile (e più difficile possibile da leggere in formato sorgente) da destinare alla pubblicazione su web. Ma se dovremo fare delle modifiche alle pagine, sarà sicuramente molto più agevole farle sul file originale.
Passiamo ora a vedere quali modifiche subiscono i file processati da questo strumento:
- Replace simple tags: sostituisce alcuni tag con altri che producono lo stesso risultato pur risultando più brevi. Dall'esempio presente nel programma stesso, si nota ad esempio che un tag StrONG viene sostituito con B. Il fatto che il secondo sia più breve è innegabile, bisogna però fare attenzione al fatto che mentre il primo è un tag logico, il secondo è fisico. Se quindi si fa uso di fogli di stile, si potrà decidere che il tag StrONG, che dovrebbe identificare del testo in evidenza, anziché corrispondere ad un testo in grassetto (B) corrisponde ad esempio a del testo in rosso. In tal caso va chiaramente disattivata l'opzione di conversione.
- Put tag Center instead of P align="center": per quanto riguarda questa sostituzione non ho avvertenze particolari, anche perché secondo il W3C, CENTER è addirittura supportato leggermente meglio.
- Remove superflous inverted commas in tags: elimina eventuali virgolette (singole o doppie) inutili all'interno di tags. Le virgolette sono indispensabili solo quanto si deve indicare più di una parola. Quindi è bene eliminare quelle inutili.
- Remove superflous spaces: mentre con il Tidy HTML possiamo decidere di aggiungere degli spazi in modo da incolonnare i vari tags per ottenere un risultato più ordinato, adesso possiamo eliminare tutti gli spazi superflui.
- Remove superflous returns: In HTML gli INVIO non danno nessun risultato, infatti per poter andare a capo bisogna inserire il tag BR o creare nuovi paragrafi. Di conseguenza ogni INVIO che abbiamo digitato per abitudine o per comodità, può essere tranquillamente rimosso.
- Remove all returns: elimina assolutamente tutti gli INVIO creando di fatto un documento di una sola riga lunghissima.
- Remove FrontPage's WEBBOT SPAN tags: elimina il tag WEBBOT SPAN creato da FrontPage.
Ora non resta che dare OK per ottenere la compressione immediata in base alle impostazioni e la visualizzazione della finestra dei risultati: da qui potremo verificare il numero di bytes iniziali e quelli dopo la compressione, il numero di righe prima e dopo, vedere un'anteprima (sempre di prima e dopo) e decidere se si vuole aprire il documento compresso nell'editor.
Consiglio di fare l'operazione di compressione solo dopo aver completato il sito appena prima della sua pubblicazione e di creare una copia della cartella che contiene il sito prima di procedere con la compressione.