pagina
Vivisezionare una pagina web
Donato Taddei in privato, 23\12\2012, h. 12.27.

Segnalo questa mia creaturina perchè credo possa incuriosire, interessare o perfino servire a 
qualcuno, oltre che a me.
donatotaddei.altervista.org/dom.php
ma anche una visitina alla mia home page può presentare qualcosina di utile, specie a chi naviga da 
cell.
donatotaddei.altervista.org/

Di seguito riporto quanto si ottiene scegliendo "Info sull'applicazione" dal menu "Azioni" della 
stessa:
                        Don

Info sull'applicazione
Ho scritto questa applicazione con l'obbiettivo di velocizzare la mia connessione da mobile 
alleggerendo le pagine, e per poter rimuovere il "ciarpame" che ostacola la navigazione, non solo 
annunci e avatar, ma all'occorrenza anche menu, frames che ritenga inutili.
Allo stato questo obbiettivo è soltanto abbozzato ma rilascio ugualmente l'applicazione perchè già 
ora fa egregiamente ed in modo estremamente semplice ed immediato ciò che si fa utilizzando gli 
strumenti di sviluppo implementati nei browser moderni, e più precisamente
1.Isolare, nascondere o rimuovere qualsiasi elemento in una pagina
2.Vederne e/o modificarne gli attributi, vedendone gli effetti
3.Vederne e/o modificarne il codice sorgente, vedendone gli effetti
4.Vederne l'elemento genitore e/o gli elementi figli
5.Cercare negli script e nei fogli di stile i riferimenti all'elemento analizzato
6.vedere il codice sorgente della pagina
7.Ottenere un rapporto di validazione formale del codice Html della pagina dal servizio W3c, poi 
tradotto in italiano con Google
8.Ottenere un rapporto di validazione dello stile della pagina in italiano, direttamente dal 
servizio W3c
9.Valutare la accessibilità della pagina attraverso il servizio etre.com
10.Vedere il contenuto di script e fogli di stile esterni richiamati nella pagina
11.Visualizzare tutti gli elementi di un dato tipo (es. form, bottoni ecc.)
12.Visualizzare tutti gli elementi di una data classe: (Attributo class
13.Visualizzare tutti gli elementi cui sia associato un determinato evento
14.Ottenere un sommario degli elementi presenti, delle classi definiti, degli eventi impostati, dei 
file esterni associati.
Struttura della pagina
Al caricamento la pagina presenta un banalissimo form con tre campi:
•Un campo Indirizzo in cui inserire l'uri della pagina da analizzare
•un pulsante Carica
•un menu Azioni, di cui si dirà più avanti
Caricata la pagina da analizzare sarà visualizzato:
1.
un sommario contenente, oltre a informazioni come la codifica della pagina o la versione di html,
- L'eventuale indicazione di elementi oscurati,
- il totale di file esterni associati alla pagina
- il totale per ciascun elemento presente nella pagina
- il numero di classi presenti nella pagina
- il numero di eventi presenti.
2.L'elemento (o gli elementi) eventualmente in esame
3.Gli elementi discendenti diretti del corpo del documento,, ovvero figli degli elementi "body" o 
"frameset".
Per ciascun elemento, isolato da una linea di separazione, riconosciuta dagli screen-reader, verrà 
presentato:
?Una casella di selezione col nome dell'elemento e il progressivo nell'ambito della pagina da cui 
selezionare le azioni da compiere sull'elemento;
?una riga di sommario degli elementi suoi discendenti
?Se l'elemento ha degli attributi, compariranno in una area di testo editabile, ciascuno su una 
riga, col nome separato dal valore da un segno di '='; é anche possibile aggiungere attributi, come 
ad esempio label per permettere agli screen-reader di raggiungere quell'elemento più facilmente, o 
per modificare le dimensioni o il contrasto;
Selezionare "Modifica attributi dalla casella sovrastante per vedere in azione le modifiche.
?Il contenuto dell'elemento;
?Se è stata selezionata l'opzione "Codice" comparirà una area di testo editabile contenente il 
codice dell'elemento che quindi, oltre che html, potrà essere codice css o di script.
Selezionare l'opzione "Modifica codice" per rendere operative le modifiche.
Dalla casella di selezione relativa a ciascun elemento è possibile selezionare:
1.Nascondi : l'elemento non compare a video
2.Codice : Comparirà l'area di testo editabile col codice
3.Modifica attributi
4.Modifica codice
5.Elementi figli : Saranno presentati i suoi discendenti diretti
6.Elemento genitore
7.Rimuovi : da usarsi con cautela poichè le modifiche vengono memorizzate in un file e rese 
effettive ogni volta che si ricarica la pagina.
é tuttavia sempre possibile scegliere "Mostra tutti" o "mostra rimossi dal men u Azioni per 
annullare queste modifiche.
8.Cerca riferimenti : Vengono trovati e visualizzati tutti i riferimenti all'elemento, al suo "id" 
o "name", e alla classe cui appartiene, nei fogli di stile o script esterni associati alla pagina 
nonchè tra gli elementi "style" e "script" al suo interno.
Il menu Azioni
Da questo lunghissimo menu è possibile compiere azioni di tipo generale sulla pagina:
1.Info sull'applicazione : Ciò che stai leggendo
2.Codice html : visualizza il codice dell'intera pagina
3.Pagina originale, nel caso link od altro non funzionino correttamente
4.Valida Html : la pagina viene sottoposta al validatore W3c per la validazione di correttezza 
formale del codice html, e il report viene poi tradotto in italiano Con Google.
5.Valida lo stile : la pagina viene sottoposta al validatore css del W3C, per il controllo della 
correttezza formale dello stile, ricevendone un report direttamente in italiano.
6.Valuta accessibilità : indirizza al servizio etre.com per una valutazione di conformità alle 
linee guida per l'accessibilità dei contenuti web.
Questi strumenti possono essere utili agli utenti che intendano segnalare questioni di 
accessibilità ai gestori dei siti, per corroborare la segnalazione con elementi oggettivi, e perchè 
da questi report si capisce che in molti casi le modifiche da fare sono davvero minime e dunque 
facilmente fattibili, senza attendere il refilling del sito.
7.File esterno per elemento n. (per ogni file esterno) : visualizza lo scipt o foglio di stile 
esterno associato alla pagina
8.totale elemento : (per ciascun tipo di elemento presente nella pagina) : Visualizza tutti gli 
elementi di un dato tipo.
Può risultare utile per isolare facilmente campi di immissione dati come form, bottoni, campi di 
editazione, o altro come tabelle, link, frames, ecc.
9.Classe nomeclasse (per ogni classe definita nella pagine) : visualizza tutti gli elementi cui sia 
associata quella classe
10.Evento nomeevento (per ogni evento impostato nella pagine) : visualizza tutti gli elementi con 
quell'evento impostato
Può risultare utile per individuare, e come detto anche etichettare, elementi che richiedono di 
attivare una emulazione mouse da parte degli screen-reader, che spesso sfugge ai meno esperti, 
eche, altrimenti, senza dispositivi di puntamento, è impossibile raggiungere.