I Linguaggi Del Web (1° Giornata)
-
Upload
diego-la-monica -
Category
Technology
-
view
830 -
download
1
Transcript of I Linguaggi Del Web (1° Giornata)
Diego La Monica Web Solution DeveloperEmail: [email protected]: http://diegolamonica.info Skype: diego.la.monicaMobile: +39 333 7235382I linguaggi del Web (1 Giorno)
Chi sono?
Web solution developer
Membro di IWA/HWG
Membro del Consiglio Direttivo di IWA Italy da Febbraio 2009
Membro del Gruppo di Lavoro Protocols & Format istituito dal W3C per conto di IWA/HWG
Autore del tool Wi.Li. http://wili.diegolamonica.info
Autore del framework JavaScript JAST http://jastegg.it
Autore del framework PHP ALPHA (di prossima pubblicazione)
Il programma della giornata
Modulo 1 (X)HTML
Cos HTML
I tag e la loro rappresentazione
Differenze tra le grammatiche HTML e XHTML
La suddivisione di una pagina
Strutturare una pagina autodescrittiva
Il programma della giornata
Modulo 2 Stili e CrossbrowsingCos' uno stile?
Come si pu descrivere lo stile di un elemento
Una cascata di... colori.
Separare l'informazione dalla sua presentazione
Rendere l'idea cross-browser.
L'accessibilit sempre in testa!
Uno sguardo al futuro: HTML 5 vs. XHTML 2
Modulo 1 - (X)HTML
(eXtensible) HyperText Markup Language
Cos HTML
HTML = HyperText Markup Lanaguage
un linguaggio di strutturazione dei contenuti
un documento di testo opportunamente strutturato e servito al browser tipicamente come text/html (tramite lestensione .htm o .html)
Non sono necessari editor per la composizione di una pagina HTML anche se aiutano e rendono veloce lo sviluppo
La sintassi di HTML
Non rigorosa
Ogni tag ha il suo scopo
Esistono diverse versioni di HTML
Lultima ufficiale HTML 4.01
La nuova edizione (levoluzione) HTML 5 ancora in stato di Working Draft
HTML4.01
Commentare il markup
I tag e la loro rappresentazione
TestoTesto in corsivoUn tag un informazione che struttura un contenuto presente nella pagina.
Un tag identificato da una parola chiave racchiusa tra parentesi triangolari
Un tag pu essere vuoto o pu contenere informazioni aggiuntive
Un tag pu contenere altre informazioni, e quindi eventuali altri tag al suo interno
Gli attributi
Ciascun tag ha una serie di caratteristiche (attributi) che ne descrivono l'aspetto semantico e rappresentativo:ASPETTO SEMANTICO: Attributi aumentano la comprensione dell'elemento (alt, longdesc. Title )
ASPETTO RAPPRESENTATIVO: Attributi che alterano l'aspetto estetico di un elemento: (border, backcolor, background, forecolor, )
GESTIONE DEGLI EVENTI: Attributi che consentono di programmare il comportamento all'occorrenza di determinati eventi (onclick, onfocus, onblur )
La sintassi XML
XML = eXtensible Markup Language
XML pi rigoroso: ogni tag aperto deve essere necessariamente chiuso
Esiste una differenza tra documenti XML ben strutturati e documenti XML validi.
XML una grammatica di base, ciascuna implementazione un particolare dialetto che aderisce a precise regole.
Introdurre l'XML
Tutti i browser interpretano correttamente XML (servito come application/xml)
Internet Explorer (almeno fino alla 8) non supporta application/xml (deve essere fornito come text/html)
Il dialetto XHTML
XHTML = eXtensible HyperText Markup Language
una grammatica XML per descrivere documenti HTML
Esistono diverse versioni di questo dialetto:
XHTML 1.0 Transitional pensato per consentire una graduale migrazione dei contenuti prodotti in HTML 4.01 verso la nuova grammatica.
XHTML 1.0 Strict per chi produce un contenuto HTML seguendo la strutturazione formale di XML
Differenze tra HTML e XHTML
DTD
HTML 4.01 Transitional
HTML 4.01 Strict
HTML 4.01 Frameset
XHTML 1.0 Transitional
XHTML 1.0 Strict
XHTML 1.0 Frameset
La struttura di un documento
Le informazioni contenute in un documento web sono (o lo possono essere) rivolte a tre diversi fruitori (target della pagina):Informazioni rivolte agli utenti
Informazioni utili per il browser
Informazioni per i motori di ricerca
XHTML come una matrioska
Hello world!Titolo della paginaParagraph #1Sub contents
Suddividere una pagina
Esistono diverse varianti di una rappresentazione comunque sintetizzata in questo schema
Intestazione
Corpo
Pi di pagina
Suddividere una pagina
Una pagina web tipicamente progettata con le seguenti sezioni:Intestazione
Logo e altre informazioni primarie
CorpoContenuti generali (con struttura che tipicamente va da 1 a 4 colonne)
Pi di paginaRecapiti aziendali copyright e Partita IVA
Strutturare l'header
Elementi che aiutano a strutturare un buon header: La codifica della pagina ( UTF-8, UTF-16 )
Indicare un titolo (es. Titolo della pagina)
Una FavIcon
buona prassi inserire l'autore della pagina
Indicazioni sulla lingua del documento
Indicazioni sui contenuti della pagina
Indicare la durata, parole chiave e descrizione del documento
Strutturare il documento
Significa progettare un documento di testo con i corretti accorgimenti.Ciascun capitolo di un libro viene identificato da un numero di capitolo formattato secondo un preciso stile (un intestazione di secondo livello) mentre il titolo di un libro corrisponde ad un'intestazione di primo livello.Una casa con le finestre al posto delle porte non sarebbe una buona casa.Un sito non strutturato rispettando il valore semantico di ciascun elemento, non un buon sito.
Uno stile che... fa la differenza
Fino al 2004 (ma ancora oggi) molti professionisti utilizzavano ForeColor e BackgroundColor o il tag Font per formattare i contenuti di una pagina.Anche l'elemento Table ancora oggi viene impropriamente utilizzato per la strutturazione di layout per il web.Cosa ha contribuito a tutto ci?Il non aggiornamento professionale dei web-designer
Professionisti non in grado e/o non disponibili ad informare gli altri.
Il mancato o parziale supporto dei browser ai fogli di stile.
Modulo 2 Stili & Crossbrowsing
Cos' uno stile?
Come si pu descrivere lo stile di un elemento
Una cascata di... colori.
Separare l'informazione dalla sua presentazione
Rendere l'idea cross-browser.
L'accessibilit sempre in testa!
Uno sguardo al futuro: HTML 5 vs. XHTML 2
Cos' uno stile?
una regola che descrive la presentazione di uno o pi elementi (tag) presenti su un documento.border: 1px solid red;Background-color: #ffe;Font-size: 2em;Color: #800;
Stilizzare un elemento - 1
Stile in linea.
Lorem Ipsum dolor sit amet
Stilizzare un elemento - 2
Stile sulla pagina.div{ border: 1px solid red; Color: #f00;Background-color: #ffe;}
Stilizzare un elemento - 3
Stile separato dalla pagina.
Descrivere lo stile di un tag
h1{display: block;text-indent: 1em;}
div{font-family: Verdana, Arial, Sans-serif;font-size: 0.8em;}
Attributi speciali id e class
Lorem Ipsum
Dolor Sit
Amet
Stile in base a id e class
#mio-div{ In base all'ID}
.altro-elemento{ In base alla Classe }
Una cascata di colori
p{ } Applicato a tutti i paragrafi
div p{ } Applicato a tutti i paragrafi
che sono sotto un DIV
div p.myclass{ } Applicato a tutti iparagrafi con classe
myclass sotto un DIV
Separare la presentazione dal contenuto
Usare i fogli di stile per controllare la presentazione dei contenuti e organizzare le pagine in modo che possano essere lette anche quando i fogli di stile siano disabilitati o non supportati.DM 8 Luglio 2005 Requisito n. 11
Oppure:
@import "myStyle.css"
Rendere l'idea cross-browser
Ciascun browser interpreta alcune caratteristiche dei CSS indicate nella documentazione W3C in modo arbitrario.Talvolta le caratteristiche vengono implementate solo da alcuni di essi.border-radius: 5px; Specifica per angoli arrotondati in CSS3-moz-border-radius: 5px; Versione dello stile definita da Mozilla (non consente la validazione del CSS)-webkit-border-radius:5px Versione supportata da Safari e Chrome (non consente la validazione del CSS)
Cross-browser... offuscato...
Una caratteristica trattata secondo interpretazione soggettiva la trasparenza:opacity: 0.9; Indica che l'opacit dell'oggetto del 90%.Su Internet Explorer non funziona Filter: opacity(alpha=90); Versione funzionante per IE... ma il CSS non viene validato
Per pochi... solo per IE...
Per consentire a Internet Explorer di caricare dei contenuti che gli altri browser non dovranno interpretare necessario utilizzare dei tag di commento strutturati in modo particolare:
e per tutti gli altri?
Secondo Microsfot per servire delle parti di HTML a tutti browser ad eccezione di IE necessario utilizzare la seguente sintassi: Ma il markup diventer invalido... Soluzione?
Codici condizionali di IE
OperatoreDescrizione
IEIdentifica Internet Explorer o se seguito da un numero un vettore di versionamento
ltLess Than = Minore Di
lteLess Than Equal = Minore o uguale a
gtGreater Than = Maggiore di
gteGreater Than Equal = Maggiore o uguale a
!Negazione (NOT)
& , |Operatori And e Or
( )Raggruppamento di sottoespressioni
True, FalseCostanti booleane Vero Falso
Problema: il Box Model
According to the CSS1 specification, released by the World Wide Web Consortium (W3C) in 1996 and revised in 1999, when a width or height is explicitly specified for any block-level element, it should determine only the width or height of the visible element, with the padding, borders, and margins applied afterward.
Il Box Model: la soluzione
annidare due box, definire in quello pi esterno un width pari alla larghezza che si vuole abbia il box, e in quello pi interno solo il padding ed il border desiderato.
Lorem Ipsum
Lorem Ipsum
L'accessibilit sempre in testa
Rispetto degli standard
Aumentare la semantica
Perch?Per garantire alle tecnologie assistive di poter fruire i contenuti
Perch accessibilit e usabilit viaggiano di pari passo
Perch i motori di ricerca non guardano... Leggono!
Fare web e come partecipare ad un gioco: Standard, Accessibilit
e Usabilit sono solo alcune delle sue regole.
Nessun gioco bello se non si seguono le regole!
Back to the future: HTML 5
Il W3C HTML Working Group dal 2004 (prima si era costituito il WHATWG non facente parte del W3C) sta lavorando alle nuove specifiche denominate HTML 5.Pro: Molto pi orientato al Web 2.0 e alle applicazioni su basate su WebContro:Finquando i vari browser non adotteranno la specifica avremo da occuparci della retrocompatibilit
Alcuni particolari di HTML 5
Il namespace:
Nuovi elementi pi semantici: nav, header, footer, figure
Nuove caratteristiche per gli elementi di un form: required, placeholder
contemplati nuovi type: email, tel, number, date, url
XHTML 2.0 sogno di una notte di mezza estate
Nella calda estate del 2009 il W3C ha decretato la chiusura del gruppo di lavoro che si era dedicato alla definizione delle specifiche di XHTML 2. Tra gli italiani del gruppo c'era Alessio Cartocci.Lo scopo ufficiale stato di veicolare tutte le risorse verso HTML5.XHTML una serializzazione XML della sintassi HTML pertanto deve seguire e implementare le specifiche HTML con le regole imposte da XML.Il futuro in HTML5 o, nella versione XML, XHTML 5!
Diego La Monica Web Solution DeveloperEmail: [email protected]: http://diegolamonica.info Skype: diego.la.monicaMobile: +39 333 7235382I linguaggi del Web (1 Giorno)
Cliccate per modificare il formato del testo del titoloFare clic per modificare lo stile del titolo
Cliccate per modificare il formato del testo del titolo
Cliccate per modificare il formato del testo della strutturaSecondo livello strutturaTerzo livello strutturaQuarto livello strutturaQuinto livello strutturaSesto livello strutturaSettimo livello strutturaOttavo livello struttura
Nono livello strutturaFare clic per modificare stili del testo dello schema
Secondo livello
Terzo livello
Quarto livello
Quinto livello
I linguaggi del Web Diego La Monica http://diegolamonica.info International Webmasters Association - http://www.iwa.it