SlideShare is now on Android. 15 million presentations at your fingertips.  Get the app

×
  • Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
 

Html5

by Web Designer & Developer on Jan 23, 2010

  • 6,176 views

Ciò che sappiamo, ciò che ignoriamo, ma soprattutto ciò che dovremmo sapere su HTML5 (prima che sia troppo tardi!)

Ciò che sappiamo, ciò che ignoriamo, ma soprattutto ciò che dovremmo sapere su HTML5 (prima che sia troppo tardi!)

Statistics

Views

Total Views
6,176
Views on SlideShare
6,107
Embed Views
69

Actions

Likes
13
Downloads
166
Comments
1

4 Embeds 69

http://www.slideshare.net 57
http://lopinsjk.wordpress.com 10
http://www.lopinsjk.com 1
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via SlideShare as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • didoo Cristiano Rastelli, Web Designer & Developer FILE DIMOSTRATIVI:
    http://www.didoo.net/permalinks/ugialtnetconf_html5_code.zip

    NOTE ASSOCIATE ALLE SLIDE:

    // [SLIDE 1]
    La scaletta prevede una prima parte più “accademica”, teorica e una seconda parte invece più “pragmatica”, concreta.

    // [SLIDE 3]
    W3C Candidate Recommendation » 2012
    W3C Recommendation » 2022

    // [SLIDE 10]
    HTML5 è la “parola magica” che serve ai “commerciali” e agli uffici marketing per vendere, per intortare gli ignari clienti. Ormai, se non hai “HTML5” sei un barbone!
    (OK, non è ancora così, ma preparatevi, lo sarà presto...)
    Quindi usatela con cautela: potreste pentirvene!

    // [SLIDE 11]
    HTML ha a che fare con il significato delle cose, con la loro rappresentazione.
    Non è un linguaggio di programmazione (almeno, non in senso classico).

    // [SLIDE 12]
    Non uso la parola “web-based” perché ormai la parte del leone stanno cominciando a farla i browser, come “piattaforma” di sviluppo applicativo. Il web come lo intendiamo classicamente è sempre più un medium di trasmissione delle informazioni e dei dati.

    // [SLIDE 13]
    Buona parte delle specifiche di HTML5, che vedremo fra poco, sono focalizzate non più soltanto sulle “pagine web” ma soprattutto sulle “applicazioni web”.
    Pensiamoci un attimo: quanti siti web di una certa rilevanza (basti pensare a Facebook) si stanno trasformando sempre più in “applicazioni web”?
    E quindi, quanto il concetto di web-design si sta spostando verso l’interaction-design?

    // [SLIDE 14]
    Due parole veloci sulle specifiche...

    Attenzione: non sono uno standard (lo sono più o meno de-facto, ma questo è un altro discorso) ma sono una raccomandazione del “consorzio”, una raccomandazione all’uso e adozione delle specifiche.

    // [SLIDE 15]
    Far notare il “delta” fra il 4 e il 5, segno della “bontà” della versione 4. E’ durato oltre dieci anni e ha svolto egregiamente il suo dovere...
    Vi risparmio la saga W3C (consorzio ufficiale) verso WHATWG (consorzio creato da Apple, Mozilla e Opera dopo che il W3C stava prendendo una brutta piega con XHTML). Sappiate solo che a un certo punto della storia, il WC3 ha mollato l’XHTML e si è deciso a seguire la strada aperta dal WHATWG.
    Le specifiche attuali sono il frutto di questo “matrimonio” forzato.

    // [SLIDE 16]
    L’organizzazione delle specifiche - e dei documenti in cui sono successivamente state suddivise - è un po’ caotica, ai limiti della disorganizzazione.
    A questo si aggiunga poi che le specifiche sono abbastanza incomprensibili per “esseri umani” normali: sono scritte soprattutto ad uso e consumo dei browser-developer.

    // [SLIDE 25]
    A questo punto, spero di non avervi troppo spaventati o scoraggiati o delusi...

    // [SLIDE 27]
    In realtà HTML5 è già qui. E’ già attorno a noi...
    Vediamo alcuni esempi reali.

    // [SLIDE 28]
    Google già utilizza HTML5 nelle sue pagine, e soprattutto nelle sue web-applications...

    // [SLIDE 29]
    I browser più evoluti supportano già molte funzionalità dell’HTML5...

    // [SLIDE 30]
    I colossi stanno cominciando a testare alcune funzionalità...

    // [SLIDE 31]
    Gli i dispositivi hardware sono sempre più evoluti...

    // [SLIDE 32]
    Il fatto che sia uno “spezzatino” da un lato fa sì che sia supportato man mano vengono rilasciate nuove versioni dei browser; dall’altro fa sì che sia implementato nei siti web più evoluti o che richiedono funzionalità avanzate.

    // [SLIDE 34]
    A questo punto si pone la domanda: “come posso iniziare a usare HTML5 se i browser più vecchi non lo supportano?”. In realtà la domanda è malposta.

    // [SLIDE 35]
    Come abbiam visto e come vedremo fra poco, HTML5 in realtà non è monolitico: è costituito da una serie di funzionalità molto diverse e indipendenti fra loro.
    Questo vuol dire che non ha senso testare il “supporto a HTML5” ma dovrà essere testato il supporto a una ben determinata funzionalità che vogliamo utilizzare.

    // [SLIDE 39]
    HTML5 è pensato in modo tale che i vecchi browser possano tranquillamente parsare il codice HTML ignorando i nuovi costrutti: “Documents must not use deprecated features. User agents should support deprecated features.”

    // [SLIDE 47]
    Non spaventatevi, dal punto di vista degli aspetti semantici, poco o nulla è cambiato.
    Sono invece stati introdotti nuovi elementi di “struttura”.
    (A proposito non è un errore: HTML5 si scrive tutto attaccato).

    // [SLIDE 48]
    Nuovo doctype, più semplice e senza “bloated code” relativo a versioni, dtd, language, encoding, ecc.

    // [SLIDE 50]
    Cosa accade per i browser che non riconoscono i tag? Il problema maggiore è per IE, come sempre: se trova un tag sconosciuto, lo renderizza ma non gli applica gli stili CSS e lo inserisce nel DOM ma vuoto, senza child. La soluzione è HTML5 shiv, codice che generando (“createElement”) sul load gli elementi sconosciuti, poi li processa correttamente.

    // [SLIDE 52]
    Oggi questo è il modo “classico” per fare l’embed di un video in una pagina web.
    Al di là della complessità del codice, di fatto è diventato uno “standard”...

    // [SLIDE 53]
    Alcune problematiche ancora irrisolte:
    - la giungla dei formati dei file e dei relativi codec audio/video, in cui non mi addentro
    - al momento, non c’è la modalità “fullscreen”
    - lo skinning del player e dei relativi controlli, se non si vuole usare quello nativo, va fatto comunque con controlli esterni (vedi Vimeo)

    // [SLIDE 54]
    L’oggetto canvas di fatto è un oggetto vuoto, che viene “riempito” via API.
    I metodi di elaborazione degli elementi grafici (sia vettoriali che bitmap) sono le solite funzioni di una libreria grafica.

    // [SLIDE 55]
    Il peso e dei form in HTML5 è notevole, in particolare per quel che riguarda gli elementi di input e interazione (da cui si nota l’importanza data alle applicazioni web!)

    // [SLIDE 56]
    L’uso di input-type specifici e di attributi aggiuntivi permette di ridurre notevolmente l’uso di validazione client-side (perlomeno quella più banale e semplice).
    Il browser renderizza, ove implementati, i propri controlli (integrati e nativi) e procede alla validazione dei valori inseriti dall’utente.

    // [SLIDE 61]
    Questo è il test della funzionalità standard-compliant. Se si vuole testare anche per Google Gears, occorre modificare il test.
    Al momento è supportata solo da iPhone e Android per i dispositivi mobili, e da Firefox 3.5 per quanto riguarda i browser tradizionali. Esiste un fallback usando Google Gears.

    // [SLIDE 69]
    HTML5 Storage è supportato da IE8, Firefox 3.6 e Safari 4.
    Safari inoltre supporta “windo.openDatabase”, che è un vero e proprio database SQL.

    // [SLIDE 71]
    Quando un valore del localStorage viene modificato (non quello di sessione, che è limitato alla window) l’evento “storage” viene sollevato (associandolo all’oggetto “body”) in tutte le pagine aperte su quel sito/dominio.

    // [SLIDE 75]
    In conclusione, vi lascio con le parole di due poeti...
    4 years ago
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html5 Html5 Presentation Transcript