Icona (informatica): differenze tra le versioni

Da Wikipedia, l'enciclopedia libera.
Vai alla navigazione Vai alla ricerca
Naviga nella cronologia in modo interattivo
← Differenza precedenteDifferenza successiva →
Contenuto cancellato Contenuto aggiunto
VisualeWikitesto
Nessun oggetto della modifica
Inseritore (discussione | contributi)
1 733 modifiche
Etichette: Link a wikipedia.org Modifica visuale
Riga 14: Riga 14:
* un'icona può essere essa stessa un [[Collegamento ipertestuale|link]] e venire utilizzata per creare delle ricorrenze ad una [[pagina Web]] su altre pagine o siti; un'operazione di questo tipo è anche detta [[Scambio di link]] (Link Exchange).
* un'icona può essere essa stessa un [[Collegamento ipertestuale|link]] e venire utilizzata per creare delle ricorrenze ad una [[pagina Web]] su altre pagine o siti; un'operazione di questo tipo è anche detta [[Scambio di link]] (Link Exchange).
Anche un [[sito web]] può avere una propria icona ([[favicon]], letteralmente icona dei preferiti) che generalmente rappresenta il logo del sito stesso. Nella maggior parte dei browser questa icona appare alla sinistra dell'[[Uniform Resource Locator|URL]] digitata. Per esempio l'icona di [[wikipedia]] è una W nera su fondo bianco.
Anche un [[sito web]] può avere una propria icona ([[favicon]], letteralmente icona dei preferiti) che generalmente rappresenta il logo del sito stesso. Nella maggior parte dei browser questa icona appare alla sinistra dell'[[Uniform Resource Locator|URL]] digitata. Per esempio l'icona di [[wikipedia]] è una W nera su fondo bianco.

== Nel web ==
Ci sono diverse tecniche per incorporare delle icone in una pagina web. Le due più utilizzate sono i font-icona (ogni lettera corrisponde ad un icona simbolica) e le immagini (svg, jpg, png...). Queste ultime hanno diversi vantaggi rispetto ai font-icona:

* Possibilità di creare l'icona con molti particolari e colori. I font-icona hanno solitamente un colore solo.

[[File:Clouds Cute for CSS sprites.svg|alt=CSS Sprite, attuano una sola chiamata al server utilizzando una sola immagine che ne contiene molte.|miniatura|[[Sprite (informatica)|CSS Sprite]], attuano una sola chiamata al server utilizzando una sola immagine che ne contiene molte.]]

* Le immagini sono dotate di elementi semantici incorporati, come <title> e <desc>, che lo rendono accessibile a screen reader e browser di testo. Come anche attraverso il tag <alt>, <title> e le regole [[Wai-aria|WAI-ARIA]] attraverso l'attributo ''aria-labelledby''. Un font-icona verrà invece letto come "A", "E", ecc.
* I font-icona sono vulnerabili alle tecniche di [[Antialiasing|anti-aliasing]] implementate dal browser che influiscono sulla qualità visiva dell'icona rendendola sfocata e meno nitida.
* Le immagini e/o gli elementi SVG possono essere animate con CSS3 in modo molto più vario rispetto ai font-icona no

[[File:CSS-Sprite_Schema.gif|link=https://it.wikipedia.org/wiki/File:CSS-Sprite_Schema.gif|alt=Esempio di uso di uno sprite in CSS|miniatura|Esempio di uso di uno sprite in [[CSS]]]]

* Poiché i caratteri delle icone vengono inseriti utilizzando pseudo-elementi, il loro posizionamento è più difficile delle immagini. Potrebbe essere necessario modificare molte proprietà CSS, mentre nelle immagini si deve solo specificare la dimensione.
* Creare icone tramite software come Inkscape è molto più semplice che creare da zero un font-icona. Se si scelgono questi ultimi si è costretti ad usare font già esistenti
* Si possono creare icone anche in codice, ad esempio [[SVG]], [[Canvas (elemento HTML)|Canvas]] e [[WebGL]].


== Note ==
== Note ==

Versione delle 16:28, 2 feb 2021

Esempio di icone in varie dimensioni

In informatica, un'icona è definita come un pittogramma o ideogramma, generalmente visualizzato tramite un monitor, parte dell'interfaccia grafica di un sistema informatico, assieme a finestre, menù e puntatori, che hanno soppiantato le interfacce a linea di comande (CLI).

Le icone sono spesso utilizzate come supporto al veloce riconoscimento e comprensione di uno strumento o funzione integrati in un software software, oppure di un collegamento per l'esecuzione d un software dal sistema operativo o la facile categorizzazione di file per tipo. Il livello di stilizzazione di una icona è variabile, spesso più simile ad un cartello stradale che ad una illustrazione dettagliata dell'elemento rappresentato.[1]

In un sistema operativo un'icona può assumere la funzione di hyperlink o collegamento ad un software o file. L'utente può interagire con un'icona tramite un mouse, puntatore, touch o comandi vocali. Il puntatore posizionato all'interno dell'interfaccia ed in relazione ad altre icone, può essere usato per fornire ulteriori informazioni riguardo il loro utilizzo.[2]

Utilizzo

Le icone hanno molteplici impieghi; alcuni di essi possono essere:

  • nei moderni sistemi operativi alle applicazioni viene associata un'icona e l'interazione con tale icona (ad esempio un doppio clic) è il metodo standard per il lancio delle applicazioni;
  • all'interno di un programma, possono essere utilizzate per rappresentare un'azione (come copia e incolla in un elaboratore testi o indietro in un browser);
  • in un file manager le icone vengono usate per differenziare i tipi di file in base alla loro estensione;
  • in una pagina Web un'icona può essere usata per caratterizzare il collegamento ipertestuale che la affianca; ad esempio, in un forum web è frequente che le discussioni con un numero elevato di messaggi vengono affiancate da icone infuocate;
  • un'icona può essere essa stessa un link e venire utilizzata per creare delle ricorrenze ad una pagina Web su altre pagine o siti; un'operazione di questo tipo è anche detta Scambio di link (Link Exchange).

Anche un sito web può avere una propria icona (favicon, letteralmente icona dei preferiti) che generalmente rappresenta il logo del sito stesso. Nella maggior parte dei browser questa icona appare alla sinistra dell'URL digitata. Per esempio l'icona di wikipedia è una W nera su fondo bianco.

Nel web

Ci sono diverse tecniche per incorporare delle icone in una pagina web. Le due più utilizzate sono i font-icona (ogni lettera corrisponde ad un icona simbolica) e le immagini (svg, jpg, png...). Queste ultime hanno diversi vantaggi rispetto ai font-icona:

  • Possibilità di creare l'icona con molti particolari e colori. I font-icona hanno solitamente un colore solo.
CSS Sprite, attuano una sola chiamata al server utilizzando una sola immagine che ne contiene molte.
CSS Sprite, attuano una sola chiamata al server utilizzando una sola immagine che ne contiene molte.
  • Le immagini sono dotate di elementi semantici incorporati, come <title> e <desc>, che lo rendono accessibile a screen reader e browser di testo. Come anche attraverso il tag <alt>, <title> e le regole WAI-ARIA attraverso l'attributo aria-labelledby. Un font-icona verrà invece letto come "A", "E", ecc.
  • I font-icona sono vulnerabili alle tecniche di anti-aliasing implementate dal browser che influiscono sulla qualità visiva dell'icona rendendola sfocata e meno nitida.
  • Le immagini e/o gli elementi SVG possono essere animate con CSS3 in modo molto più vario rispetto ai font-icona no
Esempio di uso di uno sprite in CSS
Esempio di uso di uno sprite in CSS
  • Poiché i caratteri delle icone vengono inseriti utilizzando pseudo-elementi, il loro posizionamento è più difficile delle immagini. Potrebbe essere necessario modificare molte proprietà CSS, mentre nelle immagini si deve solo specificare la dimensione.
  • Creare icone tramite software come Inkscape è molto più semplice che creare da zero un font-icona. Se si scelgono questi ultimi si è costretti ad usare font già esistenti
  • Si possono creare icone anche in codice, ad esempio SVG, Canvas e WebGL.

Note

  1. ^ Joel Rosenblatt, Former Apple Designer Kare Testifies at Samsung Patent Trial, in Businessweek, Bloomberg LP, 7 agosto 2012. URL consultato il 7 agosto 2012.
  2. ^ (EN) ICT Pictograms, Icons and Symbols, [1], 10 maggio 2011

Voci correlate

Altri progetti

Controllo di autoritàLCCN (EN) sh00000329 · J9U (EN, HE) 987007290981305171
  Portale Informatica: accedi alle voci di Wikipedia che trattano di Informatica
Estratto da "https://it.wikipedia.org/w/index.php?title=Icona_(informatica)&oldid=118394730"