~ home page >> web
realizzazione siti web accessibili

.:. copy-writer e realizzazione siti web accessibili a norma W3C WCAG .:.

siti web: tra teoria, legislazione, codifica e grafica


considerazioni e faq : Frequently Asked Questions - domande e risposte

  • perché realizzare un sito web accessibile
  • quali sono le tipologie di realizzazione dei siti
  • quali vantaggi porta il rispetto e l'adozione delle norme raccomandate dal consorzio W3C WCAG
  • qual'è l'importanza dell'ottimizzazione per farsi trovare nel web, in particolare da Google
  • quali sono i punti fondamentali di queste raccomandazioni
  • come incidono e sono efficaci nell'ottimizzazione per i motori di ricerca, Google in particolare
  • quanto tempo ci vuole perché un motore di ricerca, Google in particolare, realizzi l'indicizzazione
  • cosa significa 'Seo', acronimo di 'Search Engine Optimizer'
  • il copy-writer, un tecnico specializzato ed esperto nello scrivere testi adatti al web
  • comunicare on-line in maniera efficace
  • quale grafica e l'importanza della parte grafica in un sito web
  • le fotografie vanno pensate, progettate e realizzate appositamente per la pagina web e il suo contesto
  • meglio un sito realizzato da un solo webmaster oppure da una equipe di tecnici specializzati nel proprio settore
  • meglio un sito dinamico usando CMS affidabili oppure un sito 'fatto tutto a mano' e 'su misura'
  • meglio 'rottamare' un vecchio sito non ottimizzato oppure ripararlo-riaggiustarlo-radrizzarlo-adattarlo...
  • perché un sito web ben realizzato e ottimizzato è costoso e non può avere prezzi da discount

normativa di riferimento W3C, WCAG, Legge 4/2004, Linee Guida


panoramica delle tipologie di siti web

descrizionevantaggidifficoltà e problemi

sito 'statico'

- concettualmente semplice, è l'insieme di più pagine costruite nel classico formato Html
- non è la 'scappatoia' per ignorare le problematiche di accessibilità, fruibilità o un modo di 'arrangiarsi' con tecniche Html improvvisate usando deprecabili programmi 'visuali' (tipo FrontPage)
- richiede comunque un buon 'progetto comunicativo' di fondo
può essere tenuto da una singola persona o un piccolo team, richiede persone molto motivate, organizzate ed affiatate, coscienti della problematica della comunicazione e delle tecniche comunicative adatte al web necessario un minimo di preparazione tecnica all'Html e l'organizzazione efficace delle problematiche d'ufficio e dei flussi informativi

sito 'statico' con alcune pagine 'dinamiche'

un mix tra gestione classica dell'Html statico con l'integrazione di contenuti provenienti da dBase generalmente viene gestito da una persona o un piccolo team - programmazione riservata a tecnici specializzati
- organizzazione delle problematiche dei flussi comunicativi dell'ufficio, con presenza e motivazione del dirigente

sito 'dinamico'

come limite massimo si può arrivare a costruire un CMS personalizzato - gestione di utenti autorizzati ad inserire informazioni,
- gestione da dBase delle informazioni
- programmazione riservata a tecnici molto specializzati
- grosso lavoro direttivo, non può essere lasciato all'improvvisazione organizzativa dell'ufficio quindi serve esperienza, motivazione, capacità, presenza costante del dirigente

'CMS' Content Management System

- un grande contenitore molto complesso progettualmente, che permette una semplice gestione focalizzata sui 'contenuti'
- tutte le procedure avvengono on-line e la gestione direttamente sul server del provider
- attualmente il più raccomandabile e personalizzabile è WordPress
molti utenti autorizzati (anche suddivisi in tipologie) possono inserire informazioni, che tuttavia vanno ben organizzati e, soprattutto, diretti - complessità del programma, gestibile e personalizzabile solamente da tecnici preparati
- difficoltà nell'organizzare i contenuti per tipologie o settori in quanto i Cms sono principalmente pensati per il 'Blog'
- il Cms 'si sposa' e si è completamente in mano alla piattaforma usata

impaginazione con Html 5 - struttura concettuale e nuovi Tag

  • DTD Html 5 e DocType
  • struttura concettuale della pagina
  • nuovo tag strutturale: <header>
  • nuovo tag strutturale: <aside>
  • nuovo tag strutturale: <section>
  • nuovo tag strutturale: <footer>
  • nuovo tag elemento: <nav>
  • nuovo tag elemento: <article>
  • nuovo tag funzionale: <audio>
  • nuovo tag funzionale: <video>
  • nuovo tag funzionale: <canvas>
I nuovi tag, per funzionare, necessitano di IE 10 o superiore e sistema operativo Windows 7 o superiore. Combinazioni ottimali si ottengono con Win 10 e MS Edge o FireFox 50 o superiore
Gli altri tag sono comunque compatibili, tranne qualche tag obsoleto.




Tags e struttura di base dell'Html 5:
struttura html5

layout e responsive design

Il layout 'responsive' è caratterizzato da punti di passaggio, nella visualizzazione della pagina nel browser, al variare della risoluzione, nei quali l'aspetto a video si ottimizza 'scattando' ad un diverso posizionamento e forma delle strutture grafiche presenti nella pagina.
I punti discriminanti di risoluzione sono detti 'breakpoint' e possono anche interagire o collaborare con il ridimensionamento 'liquido' dell'aspetto grafico a video.

Risoluzioni tipiche dei principali dispositivi video, espresse per la larghezza, in corrispondenza delle quali è utile far cadere i breakpoits:
  • fino a 320 px - vecchi smartphone, iPhone 4s e smartphone in posizione verticale (portrait)
  • da 320 px a 480 px - iPhone 4s e smartphone in posizione orizzontale (landscape)
  • da 480 px a 800 px - iPad e tablet in posizione verticale (portrait)
  • da 800 px a 1020 px - vecchi video Vga, iPad e tablet in posizione orizzontale (landscape)
  • da 1020 px a 1300 px - video Vga, notebook
  • da 1300 px a 2000 px - video ad alta risoluzione
  • oltre i 2000 px - video ad altissima risoluzione
verifica le risoluzioni, prova a ridimensionare il browser

- attualmente è a meno di 320pxtra 320px e 480pxtra 480px e 640pxtra 640px e 800pxtra 800px e 1024px tra 1024px e 1240pxtra 1240px e 1600pxtra 1600px e 1920pxtra 1920 e 2400pxoltre i 2400px


<320px480px640px800px1024px 1240px1600px1920px2400px>2400px

risorse per il webmaster, programmazione, comunicazione, accessibilità


gestori di eventi in Html:

Un evento è un qualsiasi atto proveniente dall'utente o anche dall'esterno. Per ogni evento è previsto un gestore dell'evento (event-handler)
  • onload: si verifica quando viene caricata una pagina HTML - può essere inserito nel tag < body >
  • onunload: si verifica quando la pagina HTML viene rimossa p.es. per far posto a un'altra
  • onclick: si verifica quando l'utente fa clic sull'oggetto
  • ondblclick: si verifica quando l'utente fa doppio clic sull'oggetto
  • onmousedown: si verifica quando il pulsante del mouse viene premuto
  • onmouseup: si verifica quando il pulsante del mouse viene rilasciato
  • onmouseover: si verifica quando il cursore del mouse passa sopra l'oggetto
  • onmousemove: si verifica quando il cursore del mouse viene mosso mentre è sopra l'oggetto
  • onmouseout: si verifica quando il cursore del mouse esce dall'oggetto
  • onfocus: si verifica quando un oggetto ottiene il fuoco o perché l'utente vi ha portato il mouse o usando il tasto Tab (oggetti < input >, < select >, < textarea >, < button >)
  • onblur: si verifica quando l'oggetto perde il fuoco
  • onkeypress: si verifica quando viene premuto un tasto sopra un oggetto
  • onkeydown: si verifica quando un tasto viene abbassato sopra un oggetto
  • onkeyup: si verifica quando un tasto viene rilasciato sopra un oggetto.
  • onsubmit: si verifica quando viene inviata una Form; funziona solo con il tag form
  • onreset: si verifica quando una Form viene azzerata; funziona solo con il tag form
  • onselect: si verifica quando l'utente seleziona testo in un tag input o textarea
  • onchange: si verifica quando il valore del tag (input, select, textarea) è stato modificato dall'utente

Cookies:

I cookie sono brevi frammenti di testo (lettere e/o numeri) che permettono al server web di memorizzare sul client (il browser) informazioni da riutilizzare nel corso della medesima visita al sito (cookie di sessione) o in seguito, anche a distanza di giorni (cookie persistenti).
In base alle caratteristiche e all'utilizzo distinguiamo
  • Cookie strettamente necessari e cookies tecnici.
    La loro durata è generalmente legata alla sessione di lavoro (cookie di sessione) e restano attivi solo fino alla chiusura del browser o all'esecuzione del comando di logout.
    Indispensabili per il corretto funzionamento del sito, in genere utilizzati per gestire il login e l'accesso alle funzioni riservate del sito, oppure per attivare il contatore interno delle visite al sito.
    La disattivazione può comportare la riduzione di alcune funzionalità come l'accesso all'area riservata.
  • Cookie di analisi e prestazioni. (Questo sito non utilizza cookie di questo tipo)
    In genere si tratta di cookies 'persistenti' alla sessione di lavoro o con scadenza.
    Sono utilizzati per raccogliere e analizzare il traffico e l'utilizzo del sito in modo anonimo. Pur senza identificare l'utente, consentono, per esempio, di rilevare se il medesimo utente torna a collegarsi in momenti diversi. Permettono inoltre di monitorare il sistema e migliorarne le prestazioni e l'usabilità.
    La disattivazione può essere fatta senza alcuna perdita di funzionalità.
  • Cookie di profilazione. (Questo sito non utilizza cookie di questo tipo)
    Cookies permanenti utilizzati per identificare (in modo anonimo e non) le preferenze dell'utente e migliorare la sua esperienza di navigazione.
    La disattivazione può essere fatta senza alcuna perdita di funzionalità.
  • Cookie di terze parti. (Questo sito non utilizza cookie di questo tipo)
    Visitando un sito web si possono ricevere cookie sia dal sito visitato ("proprietario"), sia dai siti gestiti da altre organizzazioni ("terze parti"). Per esempio la presenza di "social plugin" come Facebook, Twitter, Google+ ecc., finalizzati alla condivisione dei contenuti sui social network.
    Si tratta di parti della pagina integrate con codice dei suddetti siti. La presenza di questi plugin comporta la trasmissione informazioni da e verso questi siti.
    La gestione delle informazioni raccolte da "terze parti" è disciplinata dalle relative informative dei siti, alle quali far riferimento.
    In particolare Google Analytics è un servizio di analisi e report del traffico web, con raccolta dati (compreso l'indirizzo IP dell'utente) gestita in modo anonimo per monitorare e migliorare le prestazioni del sito 'proprietario.
    Google non raccoglie informazioni personali, non associa l'indirizzo IP a nessun altro dato posseduto, non cerca di collegare un indirizzo IP con l'identità di un utente. Google può comunicare queste informazioni a terzi se imposto dalla Legge. L'utente può disabilitare in modo selettivo l'azione di Google Analytics installando sul proprio browser la componente di opt-out fornito da Google stesso.(https://tools.google.com/dlpage/gaoptout)

calibrazione del video

Toni o sfumature di grigio: ottimale quando è appena visibile la linea divisoria tra 95 e 100.

calibrazione del video - BiancoNero


Spettro RGB: dovrebbero vedersi sfumature di progressive di colore senza interruzioni o scalini

calibrazione del video - Colore

codici colore RGB e codici Esadecimali


colore, comunicazione, marketing : teoria dei colori e applicazione web

coloreutilizzoazionepsicologia
biancoalimentazione, salute, bellezza, eleganzasomma e comprende tutti gli altri coloripurezza, creatività, pulizia, fiducia
verdealimentari biologici, turismo, naturanatura, calma, tranquillità, sicurezza, piacere, stabilitàpace, crescita, armonia, fortuna
giallobambini, divertimentobenessere, creatività, allegria, dinamismo, giovinezza, solaritàallegria, felicità ottimismo
arancioe-commerce, fidelizzazionedinamismo, azione, accoglienzaenergia, movimento, calore
rosagiovani, donnepositività, apertura, scambio, donazione, perdonofemminilità, romanticismo, tenerezza, sogno
rossoe-commerceenergia, azione, urgenzaardore, passione, desiderio, potenza, potere
violabellezza, fashionconsolazione, concentrazione, calma, ricchezza, lussoeleganza, spiritualità regalità, nobiltà
bluistituzionale, sociale, businesssicurezza, concentrazione, protezione, fiduciaaffidabilità professionalità fiducia, appartenenza, lealtà, saggezza
neroprodotti di lusso e alta qualitàricchezza, raffinatezza, eleganza, lussoautorità, potenza, eleganza
vedi anche

indice Gulpease

L'indice Gulpease (GULP = Gruppo Universitario Linguistico Pedagogico) è un indicatore di leggibilità di un testo nella lingua italiana.
Elaborato negli anni ottanta dai linguisti della Sapienza di Roma che facevano capo a Tullio De Mauro, aiuta a capire quanto il nostro testo si legga con agio e facilità.
Non misura la chiarezza o la comprensibilità, ma solo la leggibilità.
Per questo è un indicatore, un modo divertente per esercitarsi, non un verdetto.

Considera due variabili linguistiche: lunghezza della parola e lunghezza della frase rispetto al numero delle lettere.
La formula di calcolo è:


scrivi o incolla un testo:

  indice Gulpease : 

I risultati sono compresi tra 0 e 100, dove il valore "100" indica la leggibilità più alta e "0" la leggibilità più bassa.
In generale testi con un indice
  • inferiore a 80 sono difficili da leggere per chi ha la licenza elementare
  • inferiore a 60 sono difficili da leggere per chi ha la licenza media
  • inferiore a 40 sono difficili da leggere per chi ha un diploma superiore

Cluetrain: i 95 punti del 'Manifesto Clutrain'

  • www.cluetrain.com
  • scopri il manifesto Clutrain

strumenti e utility per il webmaster

Libri & eBook : acquista on line : Libreria del Santo, Edizioni Messaggero
design

Design - Progettare gli oggetti quotidiani

di Alberto Bassi

Una lampada, una bicicletta, un computer, ma anche libri, siti web, sistemi e servizi. All'origine delle 'cose', fisiche o immateriali, che ogni giorno entrano nelle nostre vite, esiste un processo globale di progettazione nel quale convergono ideazione, produzione, comunicazione, utilizzo, consumo e riuso: è il design.

per l'acquisto: Libreria del Santo, scheda prodotto
Linguaggio e comunicazione

Linguaggio e comunicazione

di Stagnitta Antonino

Ogni comunicazione non è solo un suono tra la mia voce e il tuo orecchio, ma il trasferimento da una mia complessa struttura logico-informatica verso un altro tuo complesso informatico di pensieri significanti, di sentimenti ed arti esaltanti, e di espressioni trascendenti la fisicità di questo stupendo Universo. Il linguaggio significa l'anima e il suo conoscere: solo un Dio, misteriosamente Infinito e Onnipotente, poteva realizzare tutto ciò in questo magnifico cosmo di fuochi galattici, di palle e palloni e buchi neri, ma, soprattutto, di luce.

per l'acquisto: Libreria del Santo, scheda prodotto

bibliografia generale e varia - acquistabili in libreria

titoloautoreedizione
Manuale di giornalismoA.Barbano, V.Sassu2012 - Laterza
La scimmia che vinse il PulitzerN.Bruno, R.Mastrolonardo2011 - Bruno Mondadori
Don't Make Me ThinkSteve Krug2005 - Paperback (in inglese solo su Amazon)

documenti e utility per il webmaster

documenti, strumenti, materiali utili di Google
Microsoft Windows e il suo mondo
documenti utili consultabili nel web
comunicazione, accessibilità
grafica e web design
html e programmazione
gestione, server e piattaforme
Cms
materiali e utility scaricabili direttamente da questo sito