Lezione1

VALERIA BRIGATTILUCA GUARINI

webdesign.naba@gmail.com

WEB DESIGN I

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 grafica 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 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

World Wide Web

HYPERTEXT

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.

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

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

WaSP portò alla creazione di browsers standards-compliant

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

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

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

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

CASCADINGSTYLESHEET

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

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

2.Alcuni browser

Internet ExplorerFirefoxChromeSafariOperaAndroidAltro

Statistica di utilizzo dei browser - Settembre 2012

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

3. Firebug

4. Un editor di immagini

5. Un client FTP

‣ 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

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

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.

Lezione1

Education

Transcript of Lezione1

Lezione1 Pagina 1 - CERNLezione1 Pagina 10 Lezione1 Pagina 11 Lezione1 Pagina 12 Created Date 11/21/2016 1:26:27 PM ...

Lezione1: Introduzione alla Programmazione

lezione1 - damore.faculty.polimi.it · Title: lezione1.dvi Created Date: 10/9/2017 12:23:59 PM

F. Alacevich - Sociologia del Lavoro 2009-2010 - Decima lezione1 CORSO DI SOCIOLOGIA DEL LAVORO Decima lezione.

Lezione1 cla

Modulo1 lezione1

Lezione1- Espresso

Lezione1-2 05 06si.deis.unical.it/.../Lezioni/Lezione1-2_05_06.pdf · 27/02/2006 Sistemi Informativi 2 Contenuti della lezione del 28/02/2004 Introduzione ai Sistemi Informativi:

LibreOffice Writer per ECDL lezione1

Lezione1 - DiUniTocena/materiale/GestioneDB/1.DW.pdf1 Lezione1 Business Intelligence e Data warehouse 2 Sistemi informativi pComponente di una organizzazione che gestisce (= acquisisce,

Reti Lezione1

Fondamenti di Informatica L-Afimecc.ing.unibo.it/PROGRAMMA/lezione1.pdf · . ... circuiti elettronici ... Architettura di riferimento dei calcolatori

Lezione1 umano

Acidi e basi lezione1 iiia_chimica

Lezione1-2 05 06 - DIMES Unicalsi.deis.unical.it/.../materiale/Lezioni/Lezione1-2_05_06p4.pdf · Introduzione ai Sistemi Informativi: concetti e definizioni di base ... se c’è

Lezione1 Linguaggio C

Asoc1516 - Webinar EDIC lezione1 - progettare

Energia Eolica Lezione1

Lezione1: il sito web. Corso confartigianato giovani -

Corso—Programmazione Linguaggidiprogrammazione ... · Lezione1-Imperativooprocedurale Corso—Programmazione Linguaggidiprogrammazione—Paradigmidiprogrammazione MarcoAnisetti