Risorse per Web designer - yes WEB can » HTML5 http://www.yeswebcan.it Si il Web può, il blog che tratta argomenti di Web Design e Web Marketing. Css, grafica, programmazione, marketing, Seo, Photoshop, Wordpress e tanto altro Mon, 26 Jul 2010 09:49:29 +0000 en hourly 1 http://wordpress.org/?v=3.0 “HTML5 Visual cheat sheet” la griglia con tutti i tag supportati da Html 4.01 e html 5 http://www.yeswebcan.it/html5-visual-cheat-sheet-la-griglia-con-tutti-i-tag-supportati-da-html-4-01-e-html5/html5?utm_source=rss&utm_medium=rss&utm_campaign=html5-visual-cheat-sheet-la-griglia-con-tutti-i-tag-supportati-da-html-4-01-e-html5 http://www.yeswebcan.it/html5-visual-cheat-sheet-la-griglia-con-tutti-i-tag-supportati-da-html-4-01-e-html5/html5#comments Mon, 14 Sep 2009 15:10:16 +0000 yesWEBcan http://www.yeswebcan.it/?p=539 Il passaggio ad HTML 5 vi sta creando problemi? Non ricordate quali sono le istruzioni supportate e quali quelle che dovrete accantonare?

Antonio Lupetti di WOORK ha pubblicato HTML 5 Visual Cheat Sheet, una griglia dove sono elencati gli elementi supportati dalle versioni HTML 4.01 e/o 5.

Progettata per essere stampata ad alta qualità su un foglio formato A3, permette di avere a portata di “occhio”, tutti i tag e i relativi attributi.
Le istruzioni scritte in nero sono supportate sia da Html 4.01 che da Html 5, quelle in grigio sono quelle “obsolete” perchè supportate solo da HTML 4.01, in magenta invece, quelle che verranno introdotte dal nuovo Html 5.

La griglia è disponibile in 2 versioni, una con fondo nero l’altra con fondo bianco, io le ho stampate entrambe e vi consiglio la seconda che è molto più leggibile (e fa risparmiare un pò di toner che non fa mai male :D ).

html5 cheat sheet

Stampatela e applicatela alla vostra parete. Vi sfido a resistere senza dargli una sbriciatina ogni 5 minuti ;)

]]> http://www.yeswebcan.it/html5-visual-cheat-sheet-la-griglia-con-tutti-i-tag-supportati-da-html-4-01-e-html5/html5/feed 3 Introduzione ad Html5 http://www.yeswebcan.it/introduzione-ad-html5/featured?utm_source=rss&utm_medium=rss&utm_campaign=introduzione-ad-html5 http://www.yeswebcan.it/introduzione-ad-html5/featured#comments Thu, 23 Jul 2009 18:21:45 +0000 yesWEBcan http://www.yeswebcan.it/?p=128 In questo articolo, cercherò di illustrarvi in modo semplice informazioni di base e novità di HTML5, in modo da rendere la transizione un tantino più morbida.

Il Doctype

La dichiarazione del doctype per html5 è:

<!DOCTYPE html>

Molti si chiederanno perché si è scelto di utilizzare “html” anziché “html5″, ma sembrerebbe che <!DOCTYPE html5> non sarebbe stato riconosciuto su alcuni browser tipo IE6, non permettendo così un funzionamento a ritroso.

Poi se guardiamo il lato positivo finalmente questo DOCTYPE è piccolo, significativo, e forse per la prima volta saremo in grado di ricordarlo a memoria, e non dovremo incollarlo da un sito all’altro.

I nuovi elementi da conosere

Il W3C ha dato ascolto alla comunità e programmato per il futuro quando ha architettato i nuovi elementi a disposizione.

Abbiamo di tutto, da elementi strutturali di base come <header> e <footer> ad altri come <canvas> , <audio> e <video>, che sembrano essere API molto potenti, che daranno la possibilità di creare più applicazioni user-friendly senza la necessità di Flash per ad esempio animazioni complesse.

I nuovi elementi strutturali:

  • <header> L’elemento header contiene informazioni introduttive ad una sezione o una pagina.
  • <nav> L’elemento nav è riservato ad una sezione di un documento che contiene collegamenti ad altre pagine o collegamenti a sezioni della stessa pagina.
    Non tutti i gruppi di collegamento devono essere contenuti entro il <nav> ma solo quelli per la navigazione principale
  • <section> L’elemento section rappresenta una sezione ben precisa della pagina
  • <article> Article rappresenta una porzione di una pagina che può funzionare autonomamente, tipo un post del blog dove l’utente ha espresso osservazioni indipendenti ecc.
  • <aside> L’elemento aside potrebbe rappresentare una nota, un suggerimento, una barra laterale o qualcosa che solitamente non riguarda il contesto generale di un articolo.
  • <footer>Il footer è elemento per la marcatura a piè di pagina, e non solo della pagina corrente, ma di ogni sezione della pagina. Quindi, è molto probabile che vi sarà più di un <footer> all’interno di una pagina

Guardando questi nuovi elementi, sembra sostituiscono solo il nostro comune DIV ID, e in un certo senso, è vero.

Ma, elementi come <header> e <footer> possono essere utilizzati più di una volta su una sola pagina e si comportano come normali classi. Infatti non hanno solo lo scopo di rappresentare la parte superiore e inferiore del documento, ma rappresentano anche <header> e <footer> di ogni sezione, simile al modo di utilizzare <thead> e <tfoot> per i dati in tabelle.

I vantaggi di utilizzare questi elementi strutturali è dovuto principalmente al fatto che essi sono estremamente ben definiti e forniscono un perfetto modo semantico per definire la struttura del documento.

Tuttavia, questi elementi devono essere utilizzati con una certa attenzione, perché si può facilmente commettere l’errore di ripeterli troppe volte.

Facilitare il passaggio da XHTML

Anche se HTML 4.01, XHTML 1.0, e HTML5 sono tutti molto simili ci sono alcune piccole differenze nella sintassi che possono, molto facilmente, non permettere la validazione del codice.

Per questo HTML5 ha alcune funzioni ad hoc per rendere la transizione più facile.

Ad esempio, quando vogliamo creare un form in HTML5, la corretta sintassi di un elemento di input di testo è questa:

<input type=”text” id=”name”>

Ma se siete accaniti codificatori XHTML e abituati alla chiusura degli elementi andrebbe bene anche così:

<input type=”text” id=”name”/>

Le stesse regole si applicano a <meta> e agli altri elementi di chiusura.

Quali sono i vantaggi?

Con le nuove tecnologie ci devono essere benefici, altrimenti perché si usano? Se il vecchio codice funziona bene ed è efficiente non vi è alcun motivo di aggiornarlo. Non c’è nessuna ragione per farlo.

Archiviazione dati offline

La parte più bella di HTML5 è sicuramente la sua capacità offline. Programmi come Thunderbird e Outlook (e ora in misura GMail) permettono di navigare anche in modalità offline. Con HTML5, avremo la stessa funzionalità, ma nel browser stesso, e questo è il primo serio passo per colmare il divario tra desktop e web, e apre tutti i tipi di porte per il futuro delle applicazioni on line.

Il W3C ha preso le parti migliori dalle varie tecnologie Web e messe insieme, ciò che ne nasce è il più potente linguaggio di markup esistente.

Alcune altre API HTML5

  • Drag & Drop La API drag-and-drop definisce un evento basato su sistema di trascinamento. Tuttavia, questa API richiede JavaScript per funzionare pienamente .
  • Video & Audio L’API di audio e video sono ottimi aggiornamenti per l’incorporamento dei media. Anche se il supporto è limitato al momento, incorporare video non è mai stato così facile:

    <video width=”400″ height=”360″ src=”vid.mp4″>

  • Geolocation La Geolocalizzazione è un API molto cool di HTML5.
    Tramite un dispositivo User Agent, (ad esempio un dispositivo mobile) viene rilevata la locazione dalla quale ci si collega al sito per eventualmente fornire all’utente dati personalizzati. Per questione di privacy sembrerebbe che questa funzione può essere disabilitata.

Dove posso usarlo?

Anche con il sostegno molto limitato di HTML5, nel Web ci sono già ambienti dove possiamo fare le nostre prove. Attualmente, Safari è la nostra migliore piattaforma di test, infatti sostiene la maggior parte dei nuovi elementi e le API.

Naturalmente, le cose possono cambiare in qualsiasi momento, quindi, occhi sempre aperti su Opera, Firefox e Chrome.

E ora cosa fare?

Ci vorrà tempo prima che tutti gli elementi siano completamente supportati.
I browser devono recuperare anni di ritardo e molto altro tempo si perderà prima che tutti i navigatori aggiornino i loro browser con quelli che supportano questo linguaggio.

Con Html5, siamo prossimi ad una nuova era, con un patrimonio di conoscenze e la capacità di imparare dagli errori del passato (e dai nuovi ). HTML5 è stato istituito con le aspettative di un potente linguaggio di markup e tocca a noi utilizzarlo in modo che possa beneficiare tutti noi.

]]> http://www.yeswebcan.it/introduzione-ad-html5/featured/feed 4 Il futuro è HTML 5 http://www.yeswebcan.it/il-futuro-si-chiama-html-5/html5?utm_source=rss&utm_medium=rss&utm_campaign=il-futuro-si-chiama-html-5 http://www.yeswebcan.it/il-futuro-si-chiama-html-5/html5#comments Fri, 10 Jul 2009 10:28:18 +0000 yesWEBcan http://www.yeswebcan.it/?p=29 Il blog apre i battenti con una notizia importantissima per chi sviluppa siti internet.

Il 3 Luglio Jeffrey Zeldman ha annunciato che il team del W3C smetterà di implementare xhtml 2.0 entro la fine del 2009, per concentrare tutte le risorse su HTML5.

Alla fine sono stati accontentate le richieste di google e degli sviluppatori di Firefox e Opera, sperando però si anticipino i tempi per il supporto completo su tutti i browser, rispetto alla data data ipotizzata fino a qualche giorno fa ebbene il 2022.

Meno tranquilla in realtà dovrebbe essere Adobe visto che html5 grazie al tag “video” renderà flash player quasi del tutto inutile. E non solo a quanto pare html 5 renderà il browser indipendente da plugin, Active X e Java inclusi

Sicuramente prima che questa tecnologia sia completamente supportata passerà qualche anno, basti pensare che il browser più diffuso al mondo, Internet Explorer 7, non supporta gli standard HTML 5, e per questo credo che avremo tutto il tempo di documentarci e continuare tranquillamente ancora per un pò a sviluppare siti col “vecchio” xhtml.

Infondo è stato lo stesso Jeffrey che nel suo libro “Progettare siti web standard” ci ha insegnato che utilizzare linguaggi standard per il web avrebbe significato sviluppare tenendo conto della tanto decantata Forward compatibility, e che i siti in css+xhtml sarebbero SEMPRE stati supportati dai browser più usati.

Intanto SMASHING MAGAZINE ha pubblicato un pdf contenente tutti i tag HTML5 attualmente supportati dai browser.

]]> http://www.yeswebcan.it/il-futuro-si-chiama-html-5/html5/feed 1