Lezione1

WEB DESIGN I

VALERIA BRIGATTI
LUCA GUARINI

webdesign.naba@gmail.com

martedì 6 novembre 2012

OBIETTIVI DEL
CORSO


★ creare un sito “statico”
★ capire HTML e CSS


Per domande, dubbi,
aiuto, scrivete a:

webdesign.naba@gmail.com


AGENDA DEL
CORSO


IL CORSO È SUDDIVISO IN
11 LEZIONI.


‣ Sviluppo di siti mediante standard Web
‣ HTML
‣ CSS
‣ Nozioni di usabilità
‣ Differenze tra graﬁca per il Web e per
la stampa
‣ Nozioni di accessibilità

LIBRI CONSIGLIATI


SUL WEB


MODALITÀ DI
VALUTAZIONE


test a crocette su HTML

test a crocette su CSS

Progetto ﬁnale: realizzazione sito web


IL WEB DESIGN


Il Web Design è il
processo di
pianiﬁcazione e
creazione di un sito.

FRONT-END


È la parte del sito visibile ai visitatori:
contenuto, struttura, graﬁca, azioni possibili.


✓ Web Designer

✓ Graﬁco

✓ UX Designer

✓ Information Architect

✓ UI Designer

✓ Content Strategist

✓ Art Director


BACK-END


È la parte "non visibile" del sito
che ne rende possibile il
funzionamento: programmazione
lato server (PHP, ASP, etc.),
database (MySQL, SQL, etc.).


✓ developer/programmatore

• PHP, ASP, Java, C
• MySQL, SQL


COSA FA IL
WEB DESIGNER?


Il web designer "progetta" il sito e
lo realizza mediante HTML, CSS
e JavaScript.


ARGOMENTI DEL
CORSO


Web Standards

★ HTML (contenuto e struttura del sito)
★ CSS (presentazione, aspetto del sito)


BREVISSIMA
STORIA DEL WEB


1991 1993

World Wide Web

rilascia il codice
Tim Berners-Lee sorgente del World
Wide Web, che diventa
HYPERTEXT di pubblico dominio


1993 1994

Nascono molti
nuovi browser

Il primo browser web.
Unix, Mac, Windows

Netscape Navigator
1995

Microsoft Internet Explorer

BROWSER WARS

Microsoft e Netscape puntarono a:

• implementare nuove caratteristiche
piuttosto che sistemare i problemi con
quelle esistenti

• creare, in maniera incompatibile,
nuove funzionalità in competizione
con quelle già implementate dagli altri
browser


Quindi, gli sviluppatori erano spesso
costretti a sviluppare più versioni dello
stesso sito per renderlo visibile su tutti i
browser, oppure "ottimizzare" un sito per
la visione su uno speciﬁco browser.


WEB STANDARDS


Tim Berners-Lee fonda il
World Wide Web Consortium
1994 (W3C) al MIT, con il supporto
di CERN, ARPA e
Commissione Europea.

Obiettivo: standardizzare i
protocolli e le tecnologie
utilizzate per creare il web, per
far sì che il contenuto sia
accessibile a tutti.


• Il W3C pubblica
“recommendations”, ossia
speciﬁche “consigliate” ma non
obbligatorie

• Es.: HTML 4.0, PNG, CSS
• Il W3C non pone ﬁne alle “browser
wars”

• 1998: per creare una pagina Web
visibile da tutti era necessario
conoscere 5 versioni di JavaScript

1998

WaSP

Obiettivo: far diventare le
“recommendations” del W3C degli standard
a cui devono adeguarsi tutti i browser
(ossia Netscape e Microsoft all'epoca).

www.webstandards.org

"The Web Standards Project (WaSP) ﬁghts for
standards that reduce the cost and complexity of
development while increasing the accessibility
and long-term viability of any site published on
the Web. We work with browser companies,
authoring tool makers, and our peers to deliver
the true power of standards to this medium."

WaSP portò alla creazione
di browsers
standards-compliant


REDESIGN CON GLI STANDARD WEB

2001 2002 2003

Diventa leader nel
supporto degli
standard web e
delle nuove
tecnologie.


2003

Dimostra come lʼintero design possa
cambiare pur mantenendo la stessa identica
struttura: separazione tra struttura e aspetto


PERCHÉ SEPARARE
LA STRUTTURA
DALLA PRESENTAZIONE?


‣ Codice più efﬁciente: se mettiamo tutto
in un ﬁle HTML, questo sarà più
grande, quindi più pensante da
scaricare, perciò più lento e più
costoso.

‣ Siti più facili da mantenere: si può
cambiare l'aspetto di un elemento solo
nel CSS, con l'effetto di cambiarlo in
tutte le pagine HTML in cui è presente.


‣ Accessibilità: le tecnologie assistive
utilizzano le informazioni di struttura
invece di quelle di presentazione. I
documenti Web con markup semantico
sono più facilmente navigabili e si
accede al loro contenuto più facilmente.

‣ Compatibilità con più dispositivi: con
diversi CSS si può visualizzare la
stessa pagina.


‣ Ai motori di ricerca piacciono gli Standard: il
"crawler" cerca il contenuto e la struttura del
documento, che deve essere semantica per
segnalare al motore di ricerca cosa è
importante e cosa non lo è.

‣ Separare contenuto, presentazione e
comportamento è il modo migliore per
sviluppare un sito o una app.


HTML, XHTML &
HTML5


HTML


HYPER
TEXT
MARKUP
LANGUAGE


‣ Un insieme di elementi che descrive la
struttura di un documento.

‣ Markup ≠ programmazione


‣ Usato per specificare il contenuto e la
struttura di un documento e per definirne
il significato di ciascuna parte

‣ È quello che contiene tutto il testo, le
immagini, etc., che vedete in un sito Web

‣ Utilizza degli "elementi" (detti anche
"tag") per identificare le varie componenti
di una pagina Web. Questi dicono al
browser come interpretare l'informazione
che contengono.


‣ Il markup deve essere quanto più
semantico possibile, ossia deve
descrivere la funzione del contenuto.

‣ Es.: un titolo sarà descritto da un
elemento "heading", un paragrafo da un
elemento "paragraph", un elenco da un
elemento "list".


XHTML


EXTENSIBLE
HYPER
TEXT
MARKUP
LANGUAGE


Porta in HTML le regole sintattiche più
stringenti di XML (eXtensible Markup
Language), ossia:

- tutti i tag e gli attributi devono essere
minuscoli

- ogni tag aperto deve avere il
corrispondente tag di chiusura

- nessun elemento né attributo nuovo
rispetto a HTML


‣ backward-compatible con HTML
‣ aggiunge funzionalità potenti per lo
sviluppo di applicazioni web

‣ include funzionalità prima possibili solo
con plugin o JavaScript


CSS


CASCADING
STYLE
SHEET


Permettono di controllare
l'aspetto di ogni elemento
HTML/XHTML/HTML5.


TOOLS


1. Un editor di testo (es., Notepad,
Text, TextWrangler, etc.)
o un IDE (es., Panic Coda, Sublime
Text 2, Notepad++) o una Web
Development app (es., Adobe
Dreamweaver)


Sublime Text 2

http://www.sublimetext.com/


2. Alcuni browser


Statistica di utilizzo dei browser - Settembre 2012

Internet Explorer
Firefox 5%
16%
Chrome 5%
Safari 4%
Opera
Android
Altro
23%

29%

19%

Wikimedia Trafﬁc Analysis Report - Browsers, 2012-09, Wikimedia


3. Firebug


4. Un editor di immagini


5. Un client FTP


Visualizzare il sorgente

‣ Sorgente: codice della pagina, ossia
(X)HTML e CSS

‣ Nel browser, aprire una pagina web.
Fare click con il tasto destro del mouse
e poi cliccare su "Visualizza sorgente".
Se la pagina è in HTML o XHTML, verrà
visualizzato il sorgente.


ELEMENTI


‣ Gli elementi sono i mattoni costitutivi di
(X)HTML.

‣ Dicono al browser che funzione ha un
certo oggetto all'interno della pagina.
Ad es., se è un paragrafo, un titolo, una
citazione, etc.

‣ Contengono tutte le informazioni di cui
necessita il browser.


‣ Un elemento di (X)HTML comincia e
ﬁnisce con dei tag: il tag di apertura e il
tag di chiusura

‣ Un tag è costituito dal simbolo <,
seguito da del testo ed inﬁne dal
simbolo >.

‣ All'interno di un tag c'è il nome del tag
ed opzionalmente uno o più attributi.


Cos'è un attributo?
‣ Gli elementi di (X)HTML possono avere
diversi attributi, che cambiano a seconda
dell'elemento e danno al browser delle
informazioni aggiuntive sul contenuto
dellʼelemento.

‣ Gli attributi si trovano solo nel tag di apertura.

‣ Ogni attributo è composto da una coppia
Nome-Valore: name="value".

‣ Alcuni sono opzionali, altri obbligatori.


<html>

È lʼelemento che contiene
lʼintera pagina web.


HEAD, TITLE &
BODY


<head>

Si trova sempre prima
dellʼelemento <body>. Contiene
le informazioni che riguardano la
pagina ma che non vengono
visualizzate nella ﬁnestra del
browser.


<title>

È il titolo vero e proprio della
pagina HTML o il nome del sito.
Non viene visualizzato dentro la
ﬁnestra del browser, ma fuori, sul
bordo superiore o sul tab del
browser.


<body>

Tutto quello che viene inserito tra
<body> e </body>, verrà
visualizzato nella ﬁnestra del
browser.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

DOCTYPE: Document Type Deﬁnition

‣ deve essere il primissimo elemento della
pagina, prima di qualunque spazio bianco o
testo o "invio"

‣ identiﬁca la versione di HTML in uso

‣ il browser usa questa informazione per
decidere come rendere gli oggetti sullo
schermo


RIASSUNTO


‣ Le pagine HTML sono documenti
testuali

‣ LʼHTML usa i tag (parole chiave
circondate da < e >) per dare un
particolare signiﬁcato al contenuto che
si trova tra il tag di apertura e il tag di
chiusura


‣ Spesso si usa la parola “elementi” per
far riferimento ai tag

‣ Gli attributi si trovano nei tag di apertura
e danno delle informazioni aggiuntive
riguardo al contenuto dellʼelemento


‣ Gli attributi sono composti da
nome_attributo=”valore”

‣ Per usare lʼHTML dovete conoscere i
tag che vi mette a disposizione, la loro
funzione e dove metterli.


Link
➡ Infographic: "A Brief History of Web
Standards" - http://goo.gl/DgkpL
➡ WaSP: http://www.webstandards.org/
➡ Tim Berners-Lee: http://goo.gl/J26H4
➡ W3C: http://www.w3.org/
➡ Opera Web Standards Curriculum:
http://goo.gl/Erki3


COMPITI


✓ Scaricare e installare Firefox, Chrome e
Sublime Text 2.

✓ Installare Firebug in Firefox (https://
addons.mozilla.org/it/ﬁrefox/addon/
ﬁrebug/).

✓ Cominciare a pensare ad un layout per
il proprio sito web personale per
l'esame.


Lezione1

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Lezione1

Ähnlich wie Lezione1 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Lezione1