|
|
Creato da alex1885 il 03/11/2005
Blog di informatica e non solo
|
Area personale
Cerca in questo Blog
Menu
Ultime visite al Blog
Chi può scrivere sul blog
I Meta-tag sono dei tag Html che hanno il fine di fornire informazioni aggiuntive su un documento ipertestuale. Inoltre hanno un ulteriore ruolo nell'indicizzazione dei motori di ricerca.
L'elemento Meta va inserito nel documento HTML tra i tag <HEAD> </HEAD> e non ha un tag di chiusura. È costituito da una coppia nome/valore, e ha tre attributi principali: Http-Equiv, Name e Content.
Le informazioni contenute in HTTP-EQUIV informano il browser che si tratta di valori di intestazione della connessione HTTP. L'attributo NAME raccoglie informazioni ininfluenti per i browser o i robot, ma utili agli utenti per conoscere, per esempio, l'autore del documento. CONTENT determina il valore da attibuire alla proprietà che lo precede.
NAME
Viene utilizzato con diverse variabili:
- Author: Identifica l'autore della pagina.
- Description: dà una breve descrizione del documento. È consigliabile limitare a 10-15 parole la lunghezza della descrizione, che altrimenti rischia di essere ignorata dai motori di ricerca.
- Copyright: informa che il documento è coperto dal diritto d'autore.
- Generator: specifica l'editor HTML utilizzato per creare il documento.
- Robots: stabilisce se e come i motori di ricerca debbano interrogare il documento.
- Language: determina la lingua utilizzata all'interno della pagina.
Es: <META NAME=author CONTENT="Alessandro Maggio">
<META NAME=description CONTENT="Il Blog di Alessandro">
<META NAME =generator CONTENT="Macromedia Dreamweaver MX">
HTTP-EQUIV
Contiene informazioni utilizzate nella comunicazione tra server e browser. Es: Reply-to indica l'indirizzo di posta elettronica dell'autore del documento. Expires indica al browser la data, in formato GMT, di scandenza del documento (un documento scaduto non dovrebbe essere memorizzato nella cache del browser, e una nuova copia dovrebbe essere richiesta). Refresh permette di sfruttare il cosiddetto "client-pull", cioè il ricaricamento automatico del documento dopo un certo numero di secondi,ecc.
KEYWORD
La sua funzione principale è quella di indicizzare i documenti all'interno dei motori di ricerca. È consigliabile stendere una lista di "keyword" (parole chiave), che identifichino nel modo più dettagliato possibile il contenuto del documento. E' anche consigliato:
- evitare termini generici;
- riportare il termine inglese e quello italiano;
- inserire il singolare e il plurale;
- utilizzare anche forme volutamente sbagliate oppure forme alternative per posizionarsi anche sulle ricerche scritte velocemente e con errori ;
- creare frasi composte con i singoli termini usati nelle keyword,
Es keyword:
<META HTTP-EQUIV=keywords CONTENT="Meta-tag Meta tags meta tag motori di ricerca motore di ricerca search engine search engines">
 Condividi e segnala -
permalink
- Segnala abuso |
Web Usability
I siti Web devono essere chiari e coerenti, devono permettere una navigazione semplice ed efficace, devono mantenere quello che promettono e non mettere mai in situazioni da cui non si sappia come uscire. Tutte queste cose concorrono a formare il concetto di "Web Usability" o usabilità dei siti Web. Bisogna puntare alla semplicità e concentrarsi sulle esigenze e gli obiettivi degli utenti, invece che sulle cose che fanno colpo. Progettare l’usabilità di un sito internet significa quindi applicare strumenti e tecniche che consentano al navigatore del sito di trovarsi in un ambiente piacevole e utile. L'usabilità può essere misurata valutando la velocità con cui viene raggiunto un obiettivo, il numero di errori, il dispendio di energia e la soddisfazione da parte di chi svolge il compito.
Web Accessibility
A tal proposito il W3C ha dato vita al WAI (Web Accessibility Initiative), che espone le linee guida per l’accessibilità, che spiegano come realizzare contenuti per il Web di modo che siano accessibili a persone affette da disabilità. La loro applicazione consente di rendere disponibili i contenuti Web a tutti gli utenti, indipendentemente dal tipo di strumento di navigazione utilizzato. Secondo il W3C, il conformarsi a queste linee guida consentirà agli utenti di reperire sul Web informazioni in maniera più veloce.
L’attenzione del web designer a riguardo dei problemi di accessibilità
Progettare e sviluppare siti web accessibili non significa rinunciare a qualcosa ma al contrario arricchire la pagina stessa con componenti che la completino e la rendano più adatta alla consultazione in qualunque circostanza.
Per esempio, una pagina accessibile ai non vedenti non deve essere necessariamente di solo testo, può contenere immagini, grafici, tabelle, ecc., occorre però che le sue componenti destinate alla vista siano accompagnate da informazioni alternative.
Naturalmente con problemi di accessibilità non ci si riferisce soltanto ai problemi che possono riscontrare i disabili. Un buon web designer nel progettare il suo sito web dovrebbe tenere conto anche di altri fattori, come per esempio il fatto che tutti gli utenti non possiedono lo stesso browser, non tutti dispongono di computer e connessioni di grandi capacità. Per esempio dovrebbe fare attenzione nell’inserire immagini o altri file di grande dimensione nelle sue pagine, in quanto ciò potrebbe rendere la loro visualizzazione abbastanza difficoltosa per utenti che non dispongono di connessioni a banda larga.
Inoltre sarebbe buona norma, per un web designer quella di verificare la correttezza del codice delle proprie pagine web, attraverso per esempio dell’html validator messo a disposizione dal W3C, in modo da evitare che i browser non visualizzino elementi della nostra pagina.
Come rendere accessibile una tabella:gli attributi summary, captino, col, colgroup, th, thead,tbody, tfoot
Per quanto riguardo le tabelle vi sono dei particolari attributi dedicato all’accessibilità. Ogni tabella può avere una didascalia associata (si veda l'elemento caption), che fornisce una breve descrizione dello scopo della tabella. Una descrizione più lunga può essere fornita anche (attraverso l'attributo summary ) a beneficio di coloro che usano programmi utente di tipo vocale o basati sul sistema Braille.
Le righe di tabelle possono essere raggruppate nelle sezioni intestazione, piede e corpo rispettivamente attraverso gli elementi thead, tfoot, tbody. I raggruppamenti di righe trasmettono informazioni strutturali aggiuntive e possono essere riprodotti dai programmi utente in modi che evidenziano questa struttura. I programmi utente possono sfruttare la suddivisione intestazione/corpo/piede per supportare lo scorrimento delle sezioni del corpo indipendentemente dalle sezioni intestazione e piede.
Inoltre è possibile anche raggruppare le colonne per fornire informazioni strutturali aggiuntive che possono essere utilizzate dai programmi utente. Gli autori possono dichiarare le proprietà delle colonne all'inizio della definizione di una tabella per mezzo degli elementi colgroup e co, in modo da consentire ai programmi utente di riprodurre la tabella in maniera incrementale, senza dover aspettare che siano stati ricevuti tutti i dati prima di cominciarne la riproduzione.
Le celle di tabella possono contenere sia informazioni di "intestazione" (si veda l'elemento th) sia "dati" (si veda l'elemento td), per mezzo di questi attributi i programmi utente di tipo non visuale possono comunicare più facilmente all'utente le informazioni di intestazione riguardanti la cella.
Per quanto detto fin qui le tabelle non dovrebbero essere usate come un semplice strumento per arrangiare visivamente il contenuto di un documento, dal momento che ciò può causare problemi nella riproduzione su media non visuali. Per di più, quando si usano insieme con immagini, queste tabelle possono costringere gli utenti ad usare la barra di scorrimento orizzontale, per riuscire a vedere una tabella progettata su un sistema con un video più grande. Per minimizzare tali problemi, gli autori dovrebbero usare i fogli di stile piuttosto che le tabelle per controllare l'aspetto della pagina.
Definizione di browser: browser solo testo, screen-reader e altri web user agents
Tanto per cominciare diamo una definizione di browser. Cos’è un browser? Non è altro che il software che utilizzate tutti i giorni per accedere ad Internet e di visualizzare le pagine Web. Tra glia altri sicuramente il più diffuso è Internet Explorer di Microsoft, ma questo non è l’unica ce ne sono altri, per esempio Netscape (che fra l’altro è stato il primo browser commerciale), Opera, Firefox (è un browser open source), ecc.
Oltre a questi browser sopra citati, ce ne sono alcuni interamente dedicati agli utenti disabili, fra questi i browser solo testo e gli screen-reader. Gli screen-reader, o lettori di schermo, sono degli applicativi che disolito vengono eseguiti all’avvio del computer per consentire all’operatore non vedente di avere fin da subito il controllo del sistema operativo. Questi programmi trasformano in voce il testo che appare sullo schermo, uno dei più diffusi screen reader è il Jaws. Per quanto riguarda il browser solo-testo non fa altro che visualizzare solo il testo delle pagine web.
Utilità dei CSS per l’accessibilità
Come succede per le pagine html, anche per i fogli di stile c’è la possibilità di verificarne la correttezza del codice, attraverso il validatore offerto sempre dal W3C. Il validatore CSS oltre una lista di errori, fornisce anche degli warnings (avvertimenti): si tratta di suggerimenti che aiutano a migliorare l'accessibilità dei documenti, dunque consigliamo agli sviluppatori di risolvere anche i problemi segnalati da questi avvisi, non solo gli errori di sintassi veri e propri. L'ideale è ottenere dei CSS che al termine dell'analisi del validatore W3C risultino privi sia di errori sia di avvertimenti.
I CSS sono inoltre utili all’accessibilità in quanto rendono le singole pagine web più leggere e meno confusionarie in quanto riducono il codice presente in esse, difatti tutte le informazione di layout e di struttura della pagina sono inserite nei CSS. Ciò cosa comporta? Ciò fa si che le pagine siano visualizzate più velocemente dagli utenti, inoltre risulta più semplice modificarle per un web designer.
Creazione di una homepage usabile e la navigazione usabile
Ci sono modi migliori di costruire un sistema di navigazione usabile che non il semplice aggiungere link uno dopo l'altro al sito. Un sito di successo organizza l'informazione in un formato facile da usare. Per progettare un sito che lavori con e per i visitatori, l'intero schema di navigazione va costruito, partendo dalla loro prospettiva. La chiave di volta sta nell'identificare un critico punto di azione, dei punti di ingresso e dei punti di uscita.
Un punto di azione è il luogo in cui vogliamo guidare i nostri utenti. Ci sono zone dell'ambiente web dove i visitatori possono interagire, acquistare qualcosa o ottenere finalmente l'informazione desiderata. Per identificare i punti d’azione bisognerebbe però prima chiedersi che cosa i visitatori vorrebbero fare durante la visita e creare una gerarchia delle priorità.
Dal punto di ingresso gli utenti dovrebbero trovare percorsi chiari verso ogni punto di azione del sito. La home page può essere inteso come il primo punto di azione, il punto di azione di grado zero.
I punti di uscita hanno molto a che fare con i punti di azione, per diversi motivi: nel migliore dei casi gli utenti escono dal sito perché hanno finito ciò che volevano fare nel punto di azione, o nel peggiore perché non sono riusciti in ciò che volevano. Scoperti i motivi per i quali gli utenti lasciano, si possono creare altri punti di azione dalle pagine di fuga allo scopo di trattenerli sul nostro sito. Un'altra strategia, nel caso che le cose siano andate bene è quella di cercare di instaurare un feeling post navigation (ripetere un invito all'iscrizione alla newsletter). Una della cose più importanti è tenere d'occhio i logs per capire quali sono i punti di uscita.
Le Teorie della Gestalt
La Gestalt è una teoria di pensiero nata in Germania tra la fine dell’ottocento e gli inizi del Novecento. Ciò che affermano i sostenitori di questa teoria è che la percezione di ciò che ci circonda non è la semplice somma di elementi e sensazioni primarie, bensì un'unità strutturata di esse. Esempio se accendiamo due differenti lampadine di un lampadario, ciò che percepiamo non è l’accensione di due lampadine differenti, ma piuttosto percepiamo una sola luce che apparentemente passa da una posizione all'altra. Dunque la nostra percezione dell'evento risulta essere molto differente dalla semplice somma dei fenomeni che lo compongono presi separatamente, ciò che la Gestalt cerca di comprendere sono proprio le leggi o principi con cui strutturiamo le nostre percezioni. Conoscere questi principi può essere utile per disporre i veri elementi che compongono una pagina web.
Ecco i principi della Gestalt:
1) Vicinanza: all'interno di una stessa 'scena', gli elementi tra loro vicini vengono percepiti come un tutto. Nel design di una pagina web possiamo tener conto di ciò avvicinando gli elementi che sono concettualmente correlati e allontanando fra loro quelli che non lo sono.
2) Similitudine: all'interno di una stessa 'scena' gli elementi tra loro simili per forma, colore e dimesione, vengono percepiti come collegati. Nell'impaginazione questo ha un riscontro molto comune: l'elenco puntato. Riutilizzare elementi, colori o simboli che visivamente collegano un'informazione ad un’altra aiuta a rendere accessibile e facilmente navigabile un sito.
3) Chiusura: linee e forme familiari vengono percepite come chiuse e complete, anche se graficamente non lo sono. Questo principio ha molti riscontri nell'impaginazione. Primo fra tutti l'allineamento: organizzare lo spazio secondo linee e rettangoli invisibili aiuta il lettore a capire la strutturazione e l'organizzazione della pagina, per questo motivo, è sconsigliabile l'uso dell'allineamento centrato. Ci si può avvalere di questo principio anche per sfruttare 'virtualmente' lo spazio che realmente non abbiamo a disposizione, possiamo sfruttare anche lo spazio immaginato da chi guarda.
4) Figura Sfondo: le figure vengono percepite prima di tutto dal proprio contorno, il resto viene inteso come sfondo. Questo principio si trasforma in grafica nel più famoso principio del contrasto, proprio perchè le figure vengono riconosciute grazie al loro contorno, più la figura sarà in contrasto con lo sfondo, più facile sarà riconoscerla e ricordarla, e maggiore sarà l'importanza che le verrà quindi data.
|
Condividi e segnala -
permalink
- Segnala abuso |
Le immagini sono dei file che specificano come devono essere accesi i pixel del monitor. Ci sono diversi formati di file immagine: GIF, JPEG, TIFF, BMP, ecc., ma i primi due sono i formati più utilizzati e diffusi nel web.
Il formato GIF sta per Graphics Interchange Format. Questo formato e' disponibile per parecchie piattaforme e per questo e' molto usato nel web. Questo tipo di immagini usano solo 256 colori, il loro problema non è quest'ultimo, il problema vero e proprio di questo formato è che usa un algoritmo di compressione chiamato LZW, che non ha una licenza pubblica percio' andrebbero pagati i diritti di uso.
Il formato GIF non è il migliore se bisogna pubblicare una foto, in quanto come detto questo formato utilizza solo 256 colori, mentre nelle foto si parla di milioni di sfumature. Per le foto si preferisce quindi utilizzare il formato JPEG. Le GIF sono comunque molto utili in quanto si possono costruire immagini trasparenti, immagini interlacciate ed immagini animate.
Cos'e' una GIF trasparente? Bene, le immagini sono sempre dei quadrati o dei rettangoli, percio' non puoi costruire un' immagine circolare per esempio. Per questa ragione le GIF trasparenti sono realmente utili. Infatti, si supponga di dover disegnare un cerchio rosso su uno sfondo nero per esempio. E' ok quando metti la tua immagine sun una pagina a sfondo nero. Vedrai solo un cerchio rosso. Ma se los sfondo dell'immaggine è differente dal nero, ecco che ci vengono in aiuto le caratteristiche delle GIF, che permettono di rendere lo sfondo dell'immagine trasparente.
JPEG significa Joint Photographic Experts Group ed e' un formato per immagini con milioni di colori. Infatti le JPEG usano un algoritmo di compressione che elimina i colori superflui, piu' colori elimini maggiore sara' la perdita di qualita', ma minori saranno le dimensioni dell'immagine.
Le immagini bitmap (bmp) sono immagini con un alta definizione, ma che di contro hanno grandi dimensioni, proprio per questo non sono molto usate nel web.
Il formato PNG, acronimo di Portable Network Graphics, è un formato progettato per la webgrafica. Supporta colori fino a 32 bit e può contenere la trasparenza, purtroppo produce file di grandi dimensioni.
Questo tipo di formato non è supportato da tutti i tipi di browser, ma è tuttavia possibile installare un plug-in per visualizzare le immagini PNG.
Esistono due tipi di file PNG:
- Il formato PNG-8 che usa colori a 8 bit e presenta molte analogie con i file di tipo GIF.
- Il formato PNG-24 supporta colori a 24 bit e presenta molte analogie con i file di tipo JPEG.
|
Condividi e segnala -
permalink
- Segnala abuso |
Per quanto riguarda l'uso dei colori nel web, il W3C ha elaborato la così detta tavolozza deo colori sicuri, web-safe ovvero sicuri per il web.
Per sicurezza si intende la loro compatibilità con qualsiasi user agent, in altre parole con i browser. I colori sono rappresentati per mezzo del codice esadecimale, allo scopo di essere visualizzati correttamente dai vari browser.
La palette Web Safe è composta da 216 colori che sono "universalmente riconosciuti dai browser e dai sistemi operativi". Si compone di sei gradazioni uniformemente spaziate di rosso (R), verde (G) e blu (B).
Le teorie grafiche insegnano che la somma dei colori usati, affinché sia piacevole alla vista, deve dare come risultato il grigio; in altre parole è come se avessimo la famosa tavolozza di colori di un pittore e mescolandoli deve uscire fuori il grigio.
|
Condividi e segnala -
permalink
- Segnala abuso |
Per indicare i valori RGB nel linguaggio HTML si utilizza il sistema di codifica esadecimale. Il sitema esadecimale si basa su un sistema di numerazione in base sedici che comprende le cifre da 0 a 9 e da A a F.
I codici esadecimali dei colori sono costituiti da numeri a sei cifre. Le prime due cifre si riferiscono al livello del rosso, le secondo due si riferiscono al livello del verde e infine le ultime due si riferiscono al livello del blue. Questi valori devono essere sempre racchiusi fra virgolette e devono essere preceduti dal segno #.
Qui di seguito sono rappresentati i 16 colori, riconosciuti dal maggior numero di browser, con i rispettivi codici esadecimali:
Aqua: 00FFFF; Navy: 000080;
Black: 000000; Olive: 808000;
Blue: 0000FF; Purple: 800080;
Fucsia: FF00FF; Red: FF0000;
Gray: 808080; Silver: C0C0C0;
Green: 008000; Teal: 008080;
Lime: 00FF00; White: FFFFFF;
Maroon: 800000; Yellow: FFFF00;
|
Condividi e segnala -
permalink
- Segnala abuso |
| « Precedenti | Successivi » |
