Lezione1

VALERIA BRIGATTILUCA GUARINI

[email protected]

WEB DESIGN I

martedì 6 novembre 2012

mailto:[email protected]


OBIETTIVI DEL CORSO


★ creare un sito “statico”

★ capire HTML e CSS


Per domande, dubbi, aiuto, scrivete a:

[email protected]




AGENDA DEL CORSO


IL CORSO È SUDDIVISO IN 11 LEZIONI.


‣ Sviluppo di siti mediante standard Web

‣ HTML

‣ CSS

‣ Nozioni di usabilità

‣ Differenze tra grafica per il Web e per la stampa

‣ Nozioni di accessibilità


LIBRI CONSIGLIATI



http://www.amazon.co.uk/exec/obidos/ASIN/1430216069/standardista-21

http://www.amazon.co.uk/exec/obidos/ASIN/1430216069/standardista-21


http://www.amazon.com/dp/1118008189/ref=rdr_ext_tmb

http://www.amazon.com/dp/1118008189/ref=rdr_ext_tmb

SUL WEB


MODALITÀ DI VALUTAZIONE


test a crocette su HTML

test a crocette su CSS

Progetto finale: realizzazione sito web


IL WEB DESIGN


Il Web Design è ilprocesso dipianificazione e creazione di un sito.


FRONT-END


È la parte del sito visibile ai visitatori:contenuto, struttura, grafica, azioni possibili.


✓ Web Designer

✓ Grafico

✓ 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


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

Web Standards


BREVISSIMA STORIA DEL WEB


1991

World Wide Web

HYPERTEXT

1993

rilascia il codice sorgente del World Wide Web, che diventa di pubblico dominio

Tim Berners-Lee


1993 1994

Nascono molti nuovi browser

Netscape Navigator1995

Il primo browser web.Unix, Mac, Windows

Microsoft Internet Explorermartedì 6 novembre 2012

BROWSER WARSmartedì 6 novembre 2012

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 specifico browser.


WEB STANDARDS


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

1994

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


• Il W3C pubblica “recommendations”, ossia specifiche “consigliate” ma non obbligatorie

• Es.: HTML 4.0, PNG, CSS

• Il W3C non pone fine alle “browser wars”

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


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

1998

WaSP

standard


"The Web Standards Project (WaSP) fights 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."

www.webstandards.org


http://www.webstandards.org

http://www.webstandards.org

WaSP portò alla creazione di browsers standards-compliant


2001

REDESIGN CON GLI STANDARD WEB

2002 2003

Diventa leader nel supporto degli standard web e

delle nuove tecnologie.


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

2003


PERCHÉ SEPARARELA STRUTTURADALLA PRESENTAZIONE?


‣ Codice più efficiente: se mettiamo tutto in un file 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


HYPERTEXTMARKUPLANGUAGE


‣ 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


HYPERTEXTMARKUPLANGUAGE

EXTENSIBLE


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


CASCADINGSTYLESHEET


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)


http://www.sublimetext.com/

Sublime Text 2


http://www.sublimetext.com

http://www.sublimetext.com

2.Alcuni browser


http://www.mozilla.org/en-US/firefox/all.html























https://www.google.com/intl/en/chrome/browser/



















http://www.opera.com/download/



































23%

19%

29%

16%5%

5%4%

Internet ExplorerFirefoxChromeSafariOperaAndroidAltro

Statistica di utilizzo dei browser - Settembre 2012

Wikimedia Traffic Analysis Report - Browsers, 2012-09, Wikimedia


http://stats.wikimedia.org/archive/squid_reports/2012-09/SquidReportClients.htm

http://stats.wikimedia.org/archive/squid_reports/2012-09/SquidReportClients.htm

3. Firebug


https://addons.mozilla.org/en-us/firefox/addon/firebug/

































































4. Un editor di immagini


http://www.pixelmator.com/try/






























5. Un client FTP


http://filezilla-project.org/download.php








































http://cyberduck.ch/



































‣ 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.

Visualizzare il sorgente


XHTML


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 finisce con dei tag: il tag di apertura e il tag di chiusura

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

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


‣ 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.

Cos'è un attributo?


<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 finestra del browser.


<title>

È il titolo vero e proprio della pagina HTML o il nome del sito. Non viene visualizzato dentro la finestra 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 finestra del browser.


DOCTYPE: Document Type Definition

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

‣ identifica la versione di HTML in uso

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

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

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


RIASSUNTO


‣ Le pagine HTML sono documenti testuali

‣ LʼHTML usa i tag (parole chiave circondate da < e >) per dare un particolare significato 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.


➡ 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

Link


http://goo.gl/DgkpL

http://goo.gl/DgkpL

http://www.webstandards.org/

http://www.webstandards.org/

http://goo.gl/J26H4

http://goo.gl/J26H4

http://www.w3.org/

http://www.w3.org/

http://goo.gl/Erki3

http://goo.gl/Erki3

COMPITI


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

✓ Installare Firebug in Firefox (https://addons.mozilla.org/it/firefox/addon/firebug/).

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


https://addons.mozilla.org/it/firefox/addon/firebug/






Lezione1

Education

Transcript of Lezione1