• Save
I linguaggi del web - seconda edizione (1° giornata)
Upcoming SlideShare
Loading in...5
×
 

I linguaggi del web - seconda edizione (1° giornata)

on

  • 812 views

Contenuti del modulo:...

Contenuti del modulo:
- Cos’è HTML
- I tag e la loro rappresentazione
- Differenze tra le grammatiche HTML e XHTML
- La suddivisione di una pagina
- Strutturare una pagina autodescrittiva
- HTML 5

Statistics

Views

Total Views
812
Views on SlideShare
805
Embed Views
7

Actions

Likes
1
Downloads
0
Comments
0

2 Embeds 7

http://www.iwa.it 6
http://alpha-framework.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

I linguaggi del web - seconda edizione (1° giornata) I linguaggi del web - seconda edizione (1° giornata) Presentation Transcript

  • I linguaggi del Web – 2ª Ed. (1° Giorno) Diego La Monica – Web Solution Developer Email: me@diegolamonica.info Web: http://diegolamonica.info Twitter: http://twitter.com/jast/ Slide Share: http://slideshare.net/diego.la.monica/ Skype: diego.la.monica Mobile: +39 333 7235382
  • Chi sono?● Web solution developer● Membro di IWA/HWG● Membro del Consiglio Direttivo di IWA Italy da Febbraio 2009 2● Membro del Gruppo di Lavoro Protocols & Format istituito dal W3C perconto 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”http://github.com/diegolamonica/ALPHA/ I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Il programma della giornata Cos’è HTML I tag e la loro rappresentazione 3 Differenze tra le grammatiche HTML e XHTML La suddivisione di una pagina Strutturare una pagina autodescrittiva HTML 5 I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Nota sulla slideNellangolo inferiore destro di alcune slide èpresente un “pallino” come è visibile in 4questa slide.Esso indica che per la slide è prevista unasessione pratica. I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Modulo 1 - (X)HTML 5I linguaggi del Web – Diego La Monica – http://diegolamonica.infoInternational Webmasters Association - http://www.iwa.it
  • Cos’è HTML HTML = HyperText Markup Language È un linguaggio di strutturazione dei contenuti 6 È un documento di testo opportunamente strutturato e servito al browser tipicamente come text/html (tramite l’estensione .htm o .html) Non sono necessari editor specifici per la composizione di una pagina HTML anche se aiutano e rendono veloce lo sviluppo I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • La sintassi di HTML Non è rigorosa Ogni tag ha il suo scopo 7 Esistono diverse versioni di HTML L’ultima ufficiale è HTML 4.01 La nuova edizione (l’evoluzione) è HTML 5 ancora in stato di Working Draft I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Commentare il markup 8<!--Questo testo non verrà mai renderizzato dalbrowser, ma sarà presente nellHTML della pagina --> I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • I tag e la loro rappresentazioneUn tag è uninformazione che struttura uncontenuto presente nella pagina. Un tag è identificato da una parola chiave 9 <li> racchiusa tra parentesi triangolari ( < e > ) Un tag può essere vuoto o può <img> contenere informazioni aggiuntive <p>Testo</p> Un tag può contenere altre informazioni, e <p>Testo <em>in quindi eventuali altri tag al suo interno corsivo</em></p> Un tag aperto non deve essere necessariamente chiuso I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Elementi essenziali<html> … </html> Contenitore principale che racchiude il contenuto della pagina 10<head> … </head> Contenitore le informazioni da trasmettere al browser<title> … </title> Indica al browser cosa scrivere sulla barra del titolo.<body> … </body> Contiene il documento che verrà renderizzato dal browser I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Le entitàIn dipendenza della codifica della pagina potremmoavere specifiche entità.Tuttavia tutti i browser implementano quei i riservati al 11markup ( <, >, ", , & ).In base alla codifica le entità disponibili nella paginapossono variare:http://www.w3schools.com/tags/ref_entities.asp ehttp://www.w3schools.com/tags/ref_symbols.asp I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • HTML4.01 Direttiva: indica che si specifica la definizione del tipo di documento Specifica pubblica (distribuzione pubblica) altrimenti potrebbe essere SYSTEM. 12<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Identificatore: quando la specifica è pubblica questa informazione risulta obbligatoria e ne descrive il nome pubblico della DTD La presenza di un URL indica che si tratta di una DTD esterna I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Elementi dellHTMLGli elementi (o tag) dellHTMLdefiniscono la struttura di una parte deldocumento.Gli elementi si suddividono in:Block-levelInline 13 I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Elementi Block-levelPossono contenere testo o elementi ditipo 14Block-levelInlineAlcuni elementi di tipo block level: body, div, blockquote I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Elementi inlinePossono contenere testo e solo elementi 15di tipo Inline.Alcuni elementi di tipo inline level:a, span, em, strong, q, img I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Gli attributiCiascun tag ha una serie dicaratteristiche (attributi) che ne 16descrivono laspetto semantico,rappresentativo e lo stato. Altriconsentono di gestire gli eventilegati allo specifico elemento. I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Attributi semanticiAttributi che aiutano luomo o latecnologia nella corretta comprensione eidentificazione dellelemento:alt, longdesc, title, for, lang … 17 I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Attributi presentazionaliAttributi che alterano laspettoestetico* dellelemento:border, backcolor, background,forecolor, align …*Solo nelle DTD di tipo Transitional 18 I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Attributi di statoSpeciali attributi che descrivonolo stato dellelemento in unpreciso istante:checked, selected, readonly, disabled 19 I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Attributi per gli eventiAttributi che consentono di programmare ilcomportamento della pagina, dellelementoo di eseguire determinate azioni al verificarsi 20di un preciso evento: onclick, onfocus, onblur …Attenzione! Questi attributi violano i principi di accessibilità della pagina(Dlgs 4/2004) se non si prevede un comportamento analogo in caso didisattivazione del JavaScript. I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Specifiche di HTML 4.01DocumentazioneUfficiale: http://www.w3.org/TR/html401/ 21Trad. italiana: http://www.diodati.org/w3c/html401/cover.htmlDTDUfficiale: http://www.w3.org/TR/html401/sgml/dtd.htmlTrad. italiana: http://www.diodati.org/w3c/html401/sgml/dtd.html I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Per pochi... solo per IE...Per consentire a Internet Explorer di caricare deicontenuti che gli altri browser non dovrannointerpretare è necessario utilizzare dei tag di 22commento strutturati in modo particolare: <!--[if lte IE 6]> <p>Paragrafo visto da IE 6 e precedenti</p> <![endif]--> I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • … e per tutti gli altri?Secondo Microsoft per servire delle parti di HTMLa tutti browser ad eccezione di IE è necessario 23utilizzare la seguente sintassi: <![if !IE]> … <![endif]>Ma il markup diventerà invalido... Soluzione? <!--[if !IE]>--> … <!--<![endif]--> I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Codici condizionali di IEOperatore DescrizioneIE Identifica Internet Explorer o se seguito da un numero è un vettore di versionamentolt “Less Than” = Minore Di 24lte “Less Than Equal” = Minore o uguale agt “Greater Than” = Maggiore digte “Greater Than Equal” = Maggiore o uguale a! Negazione (NOT)&,| Operatori And e Or() Raggruppamento di sottoespressioniTrue, False Costanti booleane Vero Falso I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Introdurre lXML<?xml version="1.0" encoding="utf-8"?> Tutti i browser interpretano correttamente XML 25 (servito come application/xml) A Internet Explorer (fino alla versione 8) bisogna servire il contenuto come text/html. Internet Explorer dalla versione 9 supporta XML con il corretto mime-type. I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • La sintassi XML XML = eXtensible Markup Language XML è più rigoroso: ogni tag aperto deve essere necessariamente chiuso 26 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 I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Il dialetto XHTML XHTML = eXtensible HyperText Markup Language È una grammatica XML per descrivere documenti HTML Esistono diverse versioni di questo dialetto, tra cui: 27 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 I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Alcune grammatiche di XHTML Frameset , frameXHTML 1.0 Frameset<!DOCTYPE html PUBLIC noframes, ecc... "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> elementi inline 28XHTML 1.0 Transitional nel body, alcuni<!DOCTYPE html PUBLIC attributi(es. name, "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> bgcolor,align, target)XHTML 1.0 Strict Focalizzato sullo scopo di<!DOCTYPE html PUBLIC ciascun elemento e non su "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> come esso appare! I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • XHTML come una matrioska<?xml version="1.0" encodin="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Ciao mondo!</title> </head> 29 <body> <div> <h1>Questo è il titolo di primo livello</h1> <p> Paragrafo 1 </p> <div> Sottocontenuto della prima sezione </div> </div> … <body></html> I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • La struttura di un documentoLe informazioni contenute in un documentoHTML/XHTML sono (o possono essere) rivolte a trediversi fruitori (target della pagina): Utente Browser Motore di ricerca 30 I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Strutturare lheaderElementi che aiutano a strutturare un buon header: La codifica della pagina ( UTF-8, UTF-16 …) Indicare un titolo (es. <title>Titolo della pagina</title>) 31 Una FavIcon È buona prassi inserire lautore della pagina Indicazioni sulla lingua del documento Indicazioni sui contenuti della pagina Indicare la durata, parole chiave e descrizione del documento I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Strutturare il documentoSignifica progettare un documento di testo con i correttiaccorgimenti.Ciascun capitolo di un libro viene identificato da un numero di 32capitolo formattato secondo un preciso stile (un intestazione disecondo livello) mentre il titolo di un libro corrisponde adunintestazione di primo livello.Una casa con le finestre al posto delle porte non sarebbe una buonacasa.Un sito non strutturato rispettando il valore semantico di ciascunelemento, non è un buon sito. I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Suddividere una pagina Intestazione Esistono diverse varianti di una 33 Corpo rappresentazione comunque sintetizzata in Piè di pagina questo schema I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Suddividere una paginaUna pagina web è tipicamente progettata con le seguenti sezioni: Intestazione Logo e altre informazioni primarie 34 Corpo Contenuti generali (con struttura che tipicamente va da 1 a 4 colonne) Piè di pagina Recapiti aziendali copyright e Partita IVA I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Back to the future: HTML 5Il “W3C HTML Working Group” dal 2004 (prima si eracostituito il WHATWG non facente parte del W3C) stalavorando alle nuove specifiche denominate HTML 5. 35Pro: molto più orientato al “Web 2.0” e alle applicazionibasate su WebContro: finquando i vari browser non adotteranno laspecifica avremo da occuparci della retrocompatibilità I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Alcuni particolari di HTML 5● Il namespace: <!DOCTYPE HTML>● Nuovi elementi più semantici: nav, header, footer, figure 36● Nuove caratteristiche per gli elementi di un form: required, placeholder● contemplati nuovi type: email, tel, number, date, url I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Elemento HEADERLelemento header rappresenta una 37sezione di introduzione o di supporto allanavigazione. I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Elemento FOOTERLelemento footer rappresenta la parte inferiore dellasezione in cui è situato. footer, solitamente, contiene 38informazioni inerenti la sua sezione come, per esempio, chi hascritto un articolo, collegamenti a documenti correlati, dati dicopyright e simili. I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Elemento ASIDELelemento aside rappresenta la parte della pagina,contenente del testo ed affiancata ai contenuti principali 39del sito, separato dai contenuti stessi. Tale sezione è daconsiderarsi come una barra laterale nella pagina web. I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • Elemento NAVLelemento nav rappresenta la sezione di una pagina dalla quale è possibileaccedere ad altre pagine oppure a link àncora allinterno dello stessodocumento: una sezione con link di navigazione (per esempio lindice di una 40pagina di un Wiki).Non tutti i link del documento dovranno essere necessariamente inclusi in unelemento nav ma bisogna ricordare che la semantica di questo elementodescrive proprio un contenitore di link per la navigazione primaria. I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • HTML5 per tuttiLattuale problema di HTML5 è di non essere supportato da tutti ibrowser. Tuttavia esistono diverse soluzioni che ci consentono diimplementare le nostre pagine in HTML5 e garantirci una 41rappresentazione quasi equivalente riproducendo buona parte delleregole definite per il nuovo markup.Per Internet Explorer:http://remysharp.com/downloads/html5.jsPer Firefox 2:http://blog.whatwg.org/supporting-new-elements-in-firefox-2 I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • XHTML 2.0… sogno di una notte di mezza estateNella calda estate del 2009 il W3C ha decretato la chiusura del gruppodi lavoro che si era dedicato alla definizione delle specifiche diXHTML 2. Tra gli italiani del gruppo cera Alessio Cartocci. 42Lo scopo ufficiale è stato di veicolare tutte le risorse verso HTML5.XHTML è una serializzazione XML della sintassi HTML pertantodeve seguire e implementare le specifiche HTML con le regoleimposte da XML. Il futuro è in HTML5 o, nella versione XML, XHTML 5! I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  • I linguaggi del Web – 2ª Ed. (1° Giorno) Diego La Monica – Web Solution Developer Email: me@diegolamonica.info Web: http://diegolamonica.info Twitter: http://twitter.com/jast/ Slide Share: http://slideshare.net/diego.la.monica/ Skype: diego.la.monica Mobile: +39 333 7235382