esercitazione in classe

Page 1


il

Il webdesign o web design, letteralmente progettazione per il world wide web (internet), è un’ espressione inglese utilizzata anche nella lingua italiana per indicare la progettazione tecnica, strutturale grafica di un sito web. Il lavoro del web designer comprende capacità di progettazione, sintesi, gusto estetico e creatività più o meno spiccata, studio dell’interattività dei siti internet, usabilità e accessibilità per consentirne un accesso uniforme, nonché visibilità e diffusione tramite canali internet quali social network, circuiti pubblicitari, motori di ricerca, e così via. Conoscenze minime basilari di un web designer devono essere: design, co-

WEB

DESIGN municazione e webmarketing, funzionamento dei motori di ricerca e ottimizzazione, interfaccia utente, linguaggi di markup HTML, CSS e conoscenze di programmazione e animazione, che consentono una maggiore interattività. I siti internet sviluppati debbono rispondere a grammatiche formali standard, e sviluppate con lo scopo di rendere i siti intercompatibili e navigabili nel modo più uniforme utilizzando i vari browser e sistemi informatici diffusi. La validazione di conformità a tali grammatiche può essere effettuata tramite un apposito validatore online. Altri test accompagnano la creazione del sito, tra questi quelli di accessibilità e

di usabilità, solitamente svolti da esperti appositamente dedicati. Tra i vari fattori da considerare vi sono il colore, l’uso ridotto o nullo del mouse e quindi l’utilizzo della tastiera per navigare, la resa di oggetti multimediali quali audio e video anche in forma testuale per i non udenti o non vedenti, e altri parametri. Il web designer può essere un freelance, ma per lavori di alta qualità/complessità o grande articolazione collabora spesso con un team di sviluppatori di software nonché esperti professionisti dei singoli settori specifici: webmarketing, accessibilità, designer grafici.



NASCITA ai giorni d’OGGI

dalla

Il primo web designer è stato Tim Berners-Lee, inventore del World Wide Web e creatore del primo sito internet, pubblicato nell’agosto 1991. Lee è stato anche il primo a combinare la comunicazione internet (email e reti) con gli ipertesti (usati fino a quel momento solo per navigare tra informazioni registrate su un solo computer oppure su un CD-Rom). Inizalmente, il web design ha utilizzato un semplice linguaggio di markup, l’ HTML, che include alcune opzioni di formattazione e la possibilità di creare collegamenti ipertestuali tra pagine grazie ai links. E’ stata questa caratteristica che ha distinto il web da altri mezzi di comunicazioni. HTML è nato dal linguaggio SGML, e ha iniziato la sua vita come un semplice linguaggio per formattare pagine. Con il tempo e l’uso

l’HTML ha perso in parte la sua funzione di linguaggio per la formattazione pulita e semplice, “sporcato” dall’uso troppo insistente di tags come <font> per la formattazione del testo, oppure con l’utilizzo di alcuni elementi per funzioni diverse dal loro scopo originario. Mentre internet e il web design progredisce, il linguaggio di markup usato per crearlo, HTML, sta diventando più ordinato e flessibile, anche grazie agli standard del W3C. Ad esempio le tabelle, che inizalmente venivano usate come base per creare layouts ben allineati sono state in gran parte sostituite dai DIV con il supporto dei fogli di stile (CSS). L’integrazione di tecnologie come gli script server side (ad esempio PHP, ASP, JSP) e standard del design come CSS stanno rivoluzionando il modo di fare web design.



FONT Core fonts for the Web è il nome di un progetto di Microsoft che ha avuto inizio nel 1996 ed è stato dichiarato terminato nell'agosto 2002. Il suo scopo era di fornire un pacchetto di caratteri tipografici standard per l'uso su Internet. Anche se non più scaricabile dal sito Microsoft la licenza del pacchetto ne permette la ridistribuzione a condizione che ne venga mantenuto il formato ed il nome originale e che non venga incluso in prodotti commerciali; per questo motivo il pacchetto è scaricabile su siti web di terze parti. Per Windows, i caratteri sono forniti all'interno di eseguibili (.exe), ognuno dei quali contiene un file cabinet (.cab), che può essere espanso avendo il software adatto, questo permette l'utilizzo dei font anche da parte di sistemi operativi quali Linux. Per i sistemi Macintosh il file viene fornito come archivio BinHex Stuff-It.

Comunque, anche se i font sono ancora legalmente disponibili su SourceForge e altri siti Web e vengono inclusi in Mac OS, Håkon Wium Lie, CTO di Opera Software, ha segnalato la cancellazione del progetto Web Core Fonts come esempio del fatto che Microsoft cerca di evitare l'interoperabilità con sistemi non MS. L'11 aprile 2005 Ascender Corporation ha raggiunto un accordo con Microsoft, tramite il quale Ascender può distribuire i font Microsoft, inclusi i Windows Core Fonts, i Microsoft Web Fonts e molti altri font multilinguaggio attualmente forniti da Microsoft. Ogni carattere costa dai 20 ai 30 dollari.


Impact è un carattere creato nel 1965 da Geoffrey Lee e realizzato dalla fonderia Stephenson Blake. I suoi tratti spessi, gli spazi tra le lettere compressi e la sua controforma interna minima sono particolarmente tesi, come suggerisce il nome, per "impattare". Il font ha un'altezza x, che raggiunge quasi i tre quarti della linea principale. Le sembianze sono principalmente destinate a titoli ed il carattere ha un utilizzo limitato nelle applicazioni di testo. Le stesse portano a comparare Impact con caratteri simili, come l'Haettenschweiler, il Compacta della Letraset, e l'Helvetica Inserat.

Il Times New Roman è un carattere tipografico con grazie, ideato nel 1931 da Stanley Morison (1889 - 1967), e disegnato da Victor Lardent comparso poi per la prima volta il 3 ottobre 1932 sul quotidiano britannico The Times. Venne rimpiazzato dopo ben 40 anni, poiché le tecnologie di stampa erano completamente cambiate. "Ha un'asse umanista ma proporzione manieriste, colore barocco e affilate finiture neoclassiche." Lo scopo dell'ideatore fu quello di avere un carattere leggibile e con occhio medio "stretto" (cioè un carattere sviluppato più in altezza che in larghezza), che permettesse di comporre le strette colonne tipografiche del quotidiano senza i fastidiosi effetti dei canaletti.

Arial, talvolta anche Arial MT, è un font neo-grotesque sans-serif presente in Microsoft Windows, applicativi Microsoft, Apple Mac OS X e in molte stampanti PostScript. Il carattere è stato creato nel 1982 da Robin Nicholas e Patricia Saunders per la Monotype Typography. È generalmente risaputo che l'Arial è stato pensato come sostituto del famoso Linotype Helvetica (ma "costruito" in modo da non essere così simile da causare problemi legali). Arial è anche un famiglia di caratteri che comprende lo standard Arial (Arial std) e le sue varianti, inclusi Arial Black, Bold, Extra Bold, Condensed, Italic, Light, Medium, Monospaced, Narrow, e Rounded. L'Arial Alternative Regular e l'Arial Alternative Symbol.


il

COLORE

La parte del design che tratta il colore è forse l’aspetto più complicato quando si tratta di progettare un’idea grafica. Perchè? Bhe… perchè il colore ci colpisce in modo molto soggettivo. Per alcuni, una paletta di grigi scuro con macchie di rosa brillante può sembrare un’idea fantastica, per altri, invece, risulta essere orribile. Troppi designer, anche con titoli di studio del tutto rinomati, finiscono col fare scelte sui colori molto soggettive… Il cervello umano percepisce ed elabora i colori di un sito in meno di un secondo, registrando una sensazione positiva o negativa che poi accompagnerà l’utente durante tutto il resto della navigazione. Sfortunatamente non esiste un “codice cromatico” univoco e condiviso in tutte le culture mondiali. Le impostazioni grafiche di maggiore successo sono quelle che non prevedono l’uso di più di tre o quattro colori principali. E’ bene poi realizzare prima di tutto uno schema in bianco e nero per poi aggiungerci i colori, in modo da poter così valutare l’impatto di differenti combinazioni alternative. Per quanto riguarda il testo sarà meglio evitare sia colori ad alto contrasto (il classico nero su bianco) che colori chiari su sfondo bianco o scuri/blu su sfondo scuro, in-

fatti, entrambe le combinazioni alla lunga tendono ad essere piuttosto stressanti per gli occhi. In ogni caso, il segreto di una scelta cromatica vincente più che nella selezione dei singoli colori è nel loro giusto abbinamento. Per ottenere degli accostamenti gradevoli bisogna considerare che tutte le colorazioni derivano dai tre colori primari: il rosso, il blu ed il giallo. Unendo a due a due i colori primari si ottengono altri tre colori detti secondari: il verde, l’arancio ed il viola. I sei colori terziari si ottengono invece dalla combinazione dei colori primari e dei secondari, e sono: il giallo-arancio, il rosso-arancio, il rosso-viola, il blu-viola, il blu-verde ed il giallo-verde. In generale è poi possibile affermare che i colori caldi devono essere utilizzati quando si vuole sottolineare in maniera decisa il testo o qualche elemento grafico particolare, mentre quelli freddi, quando si vuole sottolineare l’aspetto professionale, oppure, come sfondo. Ecco spiegato perché di solito nelle presentazioni ufficiali si tende a privilegiare la scala comatica del blu. Entrambe le combinazioni risultano comunque abbastanza annoianti alla lunga se non “contaminate” l’una dall’altra.


Color Scheme Designer 3 riporta una schermata di facile utilizzo,attraverso la quale puoi scegliere il colore da cui partire per realizzare la tavolozza dei colori. La cosa meravigliosa di questo sito è che ti propone lui stesso i 6 schemi di colore soltanto cliccando dei link in alto a sinistra. Un’altra interessante funzione di questo sito è che ti permette di emulare la visione del design in base agli utenti affetti da problematiche di vista, ad esempio cecità parziale, monocromatismo, daltonismo, e attraverso i link “preview”, “light page example”, “dark page example”, puoi direttamente avere una visione del design con colori chiari o scuri.

Un’ottima alternativa a Color Scheme Designer 3 è Adobe Kuler, qui potete creare con pochi passi, combinazioni di colori basate su configurazioni standard degli schemi di colore. Un’aggiunta funzione di questo strumento è che è in grado di generare schema di colore attraverso l’upload d’immagini. La registrazione a questo sito offre agli utenti l’interscambio di tavolozze colori con gli altri, che chiunque può usufruire.


Il giallo richiama invece la brillantezza, il calore, l’originalità e la spiritualità. Di difficile abbinamento, in quanto tende a scomparire sui colori chiari, va spesso sottolineato con colori più forti. Le sue varianti più scure (eccettuato il color oro, legato da sempre al benessere economico) sono invece da evitare in quanto collegate a concetti negativi, come gli stati di malattia.

L’arancio è il più stabile e rassicurante tra i colori della terra (in quanto combinazione del rosso, che richiama l’azione, con il giallo, che richiama allegria), spesso associato ad offerte speciali, implica energia, equilibrio, estroversione ed apertura. Nelle sue varianti associate ai colori degli agrumi è in grado di stimolare gli appetiti dell’osservatore.

In particolare il rosso è considerato il colore della passione, quello che più potentemente richiama l’attenzione e spinge efficacemente all’azione, tuttavia viene collegato anche ad aggressività ,violenza ed eccitazione, e, quindi, è bene non eccedere nel suo uso soprattutto se si ha a che fare con utenti professionali.

Il marrone (e tutte le tonalità comprese tra questo ed il rosso) mitiga questi aspetti negativi conferendo maggiore stabilità e credibilità. Tutte le varianti sul colore delle terrecotte sembrano essere molto gradite (soprattuto agli utenti europei), probabilmente perché richiamano colori e temi mediterranei. Meno acceso del rosso, ma anche molto meno efficace nel provocare una reazione, il rosa richiama invece aspetti romantici, femminili e non violenti.


Il verde invece, è uno tra i colori più riposanti e gradevoli per il cervello umano, in quanto richiama la natura, l’armonia e la stabilità. Ha anche proprietà curative ed, in opposizione al rosso, denota un procedimento o una area sicura (come per i semafori). Nella cultura nord americana le sue varianti più scure richiamano il colore del denaro.

Il blu, soprattutto dagli uomini, evoca calma, professionalità, affidabilità e saggezza. E’ sicuramente tra i colori meno rischiosi da utilizzare, a meno che non si commercializzino alimenti (visto che calma la fame). Nelle sue varianti più scure rappresenta potere, conoscenza, integrità e saggezza, in quelle chiare, salute, tranquillità e delicatezza.

Il bianco è considerato il colore della perfezione. Richiama concetti di purezza, innocenza, verginità pulizia e lucentezza. In opposizione al nero ha spesso un significato positivo. Può essere associato anche al freddo (in analogia con la neve), ad ospedale e medici o a prodotti dietetici.

Il nero è invece associato all’eleganza, al potere, al male, al mistero, alla paura ed alla morte. Molto formale, denota anche prestigio ed autorità, conferisce profondità alle prospettive e diminuisce la leggibilità dei testi se usato come sfondo. Combinato con colori rosso-arancio dà vita a schemi cromatici estremamente aggressivi.


il

WEB

MASTER

Webmaster (o Web master), termine inglese usato anche nella lingua italiana, indica generalmente colui che progetta (webdesigner), costruisce ed è responsabile di un sito web. La figura, nata con lo svilupparsi del World Wide Web, può assumere connotazioni e mansioni specifiche a seconda della dimensione del sito web e delle specializzazioni tecniche in possesso. In un sito di piccole dimensioni o in siti di carattere amatoriale/dilettantistico, la persona indicata come webmaster sarà solitamente il progettista, lo sviluppatore, il programmatore (scrittura del codice HTML e linguaggi correlati), il grafico, oltre che il redattore dei contenuti. Nei siti di carattere amatoriale a lui è spesso affidata anche la gestione dei

contatti con gli utenti del sito oltre che la proprietà del sito stesso. Nei siti di maggiori dimensioni e in ambito professionale, il webmaster agirà da coordinatore e supervisore delle attività delle altre persone che lavorano al sito (grafici, editori, ecc.) e sarà normalmente un dipendente o un incaricato del proprietario del sito: da ciò deriva che il webmaster assume anche carattere di “figura professionale”. La figura professionale, a differenza di quella dilettantistica/amatoriale, dovrebbe avocare a sé una serie di conoscenze quali la struttura generale del web, la conoscenza degli standard di qualità emanati dal W3C (World Wide Web Consortium) e di uno o più linguaggi di programmazione, la stesura di docu

menti accessibili, la progettazione contenutistica accessibile, il funzionamento generale dei motori di ricerca e dei sistemi di Information Retrieval (IR), oltre ad una buona conoscenza generale del settore informatico. Il webmaster, di norma, gestisce lo sviluppo delle applicazioni sia client, che server, assumendo la responsabilità della progettazione e della messa online. Segue il processo di sviluppo in tutte le fasi (analisi, progettazione, implementazione, test).



SOFTWARE Adobe Photoshop è un software proprietario prodotto dalla Adobe Systems Incorporated specializzato nell'elaborazione di fotografie (fotoritocco) e, più in generale, di immagini digitali. Questo programma è in grado di effettuare ritocchi di qualità professionale alle immagini, offrendo enormi possibilità creative grazie ai numerosi filtri e strumenti che permettono di emulare le tecniche utilizzate nei laboratori fotografici per il processamento delle immagini, le tecniche di pittura e di disegno.


WordPress è una piattaforma di "personal publishing" e content management system, sviluppata in PHP e che usa come database MySQL. Consente la creazione di un sito internet formato da contenuti testuali o multimediali, facilmente gestibili ed aggiornabili. Creata da Matt Mullenweg, è distribuita con la licenza GNU General Public License. WordPress supporta un solo blog per installazione, ma ne esiste anche una versione multi-utente. Dalla versione 3.0 WordPress MU non esiste più e tutte le funzionalità sono state inglobate in WordPress nella modalità Network.

Adobe Illustrator è un’applicazione informatica prodotta dalla Adobe Systems Incorporated specializzata nell’elaborazione di illustrazioni e grafica vettoriale. Il programma permette di costruire immagini vettoriali attraverso forme geometriche o attraverso degli strumenti di tracciatura. Si possono ricostruire loghi da scansioni attraverso il sistema di tracciatura automatica o manualmente. I lavori più sviluppati attraverso Illustrator sono: costruzione di loghi, prodotti pubblicitari (biglietti da visita, cartellonistica, scritte) o anche layout per siti web.


Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.