Tag: HTML5

HTML5 diventa W3C Recommendation

HTML5Il 28 Ottobre 2014 HTML5 è passato allo stato di W3C Recommendation.

La notizia non può passare inosservata ed è destinata a cambiare anche in Italia l’approccio alla realizzazione di siti web accessibili.

Le parole riportate sul blog di The Paciello Group sono perfette per capire i vantaggi di HTML5:

HTML5 is a great leap forward for an accessible web. In HTML5, accessibility is a core design principle. For the first time the semantics of HTML have been mapped, and implementation requirements defined in terms of the way HTML semantics are conveyed to people using assistive technologies.

The addition of new interactive controls, native video and captioning and new structural elements in HTML5, make it easier than ever for developers to create HTML interfaces that are usable by everyone. The inclusion of WAI-ARIA in HTML5 also provides developers with the tools and information to create accessible custom content and controls that extend the core features of HTML.

Continua a leggere HTML5 diventa W3C Recommendation »

Accessibilità? Sì, grazie

Il mondo sta diventando sempre più accessibile: il web non può rimanere indietro.

voiceover

È ormai da diverso tempo che non parlo di accessibilità su questo blog, ma questo non significa che l’argomento sia ormai da dimenticare. Al contrario il tema è più che mai vivo senza che sia necessariamente legato alla parola “accessibile”, anche in contesti diversi dal web.

Qualche esempio?

Continua a leggere Accessibilità? Sì, grazie »

CSS modulari e SASS, il workshop

Un riassunto del workshop organizzato da Develer dedicato ai CSS modulari.

Qualche giorno fa ho partecipato ad un workshop organizzato da Develer, azienda fiorentina che tra le altre cose può vantare nel proprio curriculum eventi come Better Software.

 

Develer workshops

Il workshop era intitolato “CSS e HTML5: organizzare il caos”. Speaker di turno Matteo Papadopoulos, che in poco più di un’ora ha affrontato una serie di temi relativi allo sviluppo di pagine web facili da mantenere grazie alla logica modulare.

L’argomento non era facile da affrontare soprattutto addentrandosi in dettagli tecnici, ma proprio questo ho trovato diversi spunti interessanti.

Continua a leggere CSS modulari e SASS, il workshop »

HTML5 e l’attributo placeholder

L’attributo placeholder di HTML5 è utile, ma non può sostituire le label di testo all’interno dei form.

L’attributo placeholder di HTML5 è una novità molto utile: consente infatti di visualizzare un breve suggerimento all’interno di un campo input testuale. Se in passato avevate usato l’attributo value abbinato a del codice JavaScript, adesso non è più necessario. Basta aggiungerlo in questo modo:

<label for"nome">Nome:</label>
<input type="text" name="nome" placeholder="Inserisci il tuo nome">

Il risultato sarà simile a questo:

Continua a leggere HTML5 e l’attributo placeholder »

Form accessibili: come usare le label HTML

Guida all’uso delle label HTML nei form, per un sito più accessibile.

Esistono due metodi HTML per contrassegnare un campo di un form con un’etichetta.

Il primo è usare l’attributo “for” sulla label, con un valore corrispondente all’id dell’elemento associato:

<label for="email">email:</label>
<input type="text" id="email" />

Il secondo è inserire il campo del form all’interno della label HTML:

<label>email: <input type="text" /></label>

Personalmente preferisco il primo metodo, ma il secondo è comunque valido e riconosciuto come corretto.

Continua a leggere Form accessibili: come usare le label HTML »

HTML5: l’attributo placeholder

Come utilizzare l’attributo placeholder di HTML5 e risolvere i problemi di accessibilità.

L’attributo placeholder di HTML5 consente di visualizzare un breve suggerimento all’interno delle caselle input di tipo testo e delle textarea. Quando la casella riceve il focus, il testo sparisce e lascia spazio ai caratteri digitati dall’utente.

Continua a leggere HTML5: l’attributo placeholder »

Guida all’uso di HTML5

Tutte le indicazioni per utilizzare HTML5: semantica, CSS reset, tag video e compatibilità cross-browser.

Le sperimentazioni con HTML5 sono già iniziate da tempo, e nonostante serviranno ancora degli anni prima che la specifica diventi uno standard del W3C, si possono già trovare in rete molti esempi del suo utilizzo.

Dopo avere introdotto l’argomento su questo blog, ho approfittato di un piccolo progetto basato su Sweetcron per prepararmi e testare con mano lo stato attuale di HTML5. E’ così che è nata la nuova versione di 1la.it, lavoro che mi ha aiutato a mettere in ordine le idee per scrivere questa guida.

Continua a leggere Guida all’uso di HTML5 »

IE9 e HTML5

Uno sguardo alle nuove caratteristiche di Internet Explorer 9 ed alle funzionalità supportate di HTML5.

La nuova versione di Internet Explorer si preannuncia molto interessante per gli sviluppatori, viste le numerose modifiche introdotte ed i miglioramenti al motore di rendering.

Si potrebbe discutere a lungo sui ritardi nell’introduzione di novità già presenti da tempo sui browser concorrenti, ma al momento la cosa più importante è capire cosa cambierà nel prossimo futuro.

Il supporto di HTML5

Seguendo la working draft del W3C, queste caratteristiche sono già state presentate come supportate da IE9:

Inoltre sono state introdotte altre novità interessanti, come il supporto a SVG.

Guida per sviluppatori

E’ stato realizzato anche un documento molto ben dettagliato destinato agli sviluppatori. Si tratta della Beta Guide for Developers, dove si parla di CSS3, DOM, SVG e HTML5.

La guida finché il browser non sarà rilasciato potrà subire dei cambiamenti, ma già adesso è un utile punto di riferimento.

E le vecchie versioni di IE?

Quello delle versioni obsolete non è un problema da sottovalutare. E’ difficile infatti trovare versioni obsolete di Firefox o Chrome, mentre è cosa nota l’incredibile resistenza di Explorer 6. Proprio per questo motivo conviene sfruttare JavaScript, scegliendo tra due soluzioni:

  • ie7.js: consente di adeguare IE6 agli standard, aggiungendo anche il supporto alle immagini png trasparenti
  • Modernizr: una libreria che individua le funzioni supportate dal browser utilizzato, aggiungendo all’elemento html delle classi (per esempio .borderradius, .audio, .opacity…). Non aggiunge nuove funzionalità ai browser obsoleti, ma permette di individuarne le mancanze e gestirli in maniera diversa.

Qualsiasi soluzione decidiate di adottare, è bene considerare le conseguenze: abbandonare il supporto a IE6 ormai non è una scelta sbagliata, ma significa escludere comunque una parte di utenti. Il mio consiglio è di fare le dovute considerazioni a seconda del target del vostro sito: se vi rendete conto che gli utenti di Explorer 6 sono ancora numerosi, un file JavaScript potrebbe salvarvi.

Web Design 2010

Cosa cambierà nel mondo del web design durante il 2010? Qualche previsione per il prossimo anno.

Arrivati a fine anno, è giunto il momento di tirare le somme e fare delle previsioni su cosa accadrà nel 2010 nel mondo del web design.

Difficilmente ci saranno delle rivoluzioni, ma certe tendenze già viste alla fine del 2009 inizieranno ad affermarsi. Alcuni siti che nasceranno potranno usare HTML 5 ed i CSS3 senza problemi: sperimentare è ormai un dovere per non farsi cogliere impreparati..

Cosa aspettarsi quindi nel 2010? Ecco alcune previsioni.

HTML 5

Lo standard per il futuro dell’HTML è già stato ufficializzato dal W3C durante il 2009. Sono già stati fatti alcuni esperimenti interessanti, ma è logico aspettarsi che durante il prossimo anno l’HTML 5 sarà ancora più utilizzato.

Non ho mai nascosto la mia preferenza per l’XHTML, e per ora questo sito continuerà ad utilizzare tale specifica, ma se in questo momento decidessi di partire con un nuovo progetto sarei seriamente tentato di provare le potenzialità dell’HTML 5.

CSS 3

I CSS sono sempre stati in evoluzione continua: anche i browser ad ogni aggiornamento supportano funzioni sempre nuove. Ormai non serve più attendere l’ufficialità del W3C: molti produttori permettono di sperimentare i nuovi moduli dei CSS prima che questi diventino uno standard (ad esempio usando i prefissi moz- o webkit-).

Durante il 2009 ho già parlato di Web Fonts e Flexible Boxes, e nel 2010 ci saranno sicuramente altre novità in questo senso.

Internet Explorer 6

Per qualcuno IE6 è già defunto, ma la realtà lo dà ancora vivo e vegeto, assestato intorno al 10% del market share. Sono cifre ancora ragguardevoli, ma ormai le cose stanno cambiando. La tendenza è già chiara, ed il 2010 sarà l’anno giusto per vederlo sparire.

Il problema in Italia rimangono le pubbliche amministrazioni e gli uffici dove si continuano ad utilizzare vecchi computer, ma per quello purtroppo non c’è soluzione a breve termine.

La guerra dei browser

Mettendo da parte il discorso relativo a IE6, la guerra dei browser nel 2010 si farà ancora più interessante. Google Chrome ha superato in brevissimo tempo i numeri di Safari, e l’introduzione del ballot screen in Europa potrebbe riservare alcune sorprese.

Non resta che tenere sotto controllo le statistiche e seguirne l’evoluzione: Internet Explorer potrebbe anche perdere quote rilevanti.

Chrome OS

Infine nel 2010 nascerà il sistema operativo made in Google, e questa è già una notizia. Concepito per essere utilizzato solo con una connessione attiva, non sarà il massimo per il panorama italiano, ma ancora una volta a Mountain View hanno indicato la strada da seguire. Il futuro dei nostri dati è online, e Chrome OS sarà un primo importante passo in quella direzione.

Con questo post ho voluto tracciare un quadro generico per il prossimo anno: ci saranno sicuramente altre novità oltre a quelle citate, ma il 2010 sarà comunque un anno importante. Se avete altre previsioni da fare lasciate un commento: aspetto anche i vostri pareri.

Il W3C abbandona XHTML, il futuro è HTML 5

La presa di posizione del W3C: stop allo sviluppo di XHTML 2 per portare avanti solo HTML 5.

W3C LogoIl W3C ha chiarito la sua posizione sul futuro della specifica XHTML: con una news pubblicata il 3 Luglio ha chiuso lo sviluppo di XHTML 2, per dedicare tutte le risorse al futuro HTML 5.

Dalle notizie della settimana appena conclusa infatti è possibile leggere:

2009-07-02: Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the Working Group, W3C hopes to accelerate the progress of HTML 5 and clarify W3C’s position regarding the future of HTML.

Una decisione sicuramente importante per il futuro di chi sviluppa sul web, ma non così sorprendente come potrebbe sembrare. Ammetto di avere sperato in XHTML 2, ma i segnali colti fino ad ora non sono mai stati rassicuranti. Quest’ultima notizia è solo la conferma della strada fortemente voluta e consigliata (in modo più o meno forzato) da Google e dai vari sviluppatori di browser, che da tempo stanno spingendo per la specifica HTML 5.

Alla luce di quanto accaduto la decisione di Dave Shea, sviluppatore americano, che ha deciso di abbandonare XHTML da qualche tempo, non appare così sbagliata. Ne avevo parlato nel post “Abbandonare XHTML?”, ma in ogni caso non c’è alcun motivo di avere fretta di cambiare. Per quanto mi riguarda resto fermo sulla mia posizione: finchè HTML 5 non sarà pienamente supportato, XHTML 1.0 resterà la mia scelta principale; è semplicemente arrivato il momento di approfondire lo studio della nuova specifica per chi non l’avesse ancora presa in considerazione, visto che tra qualche tempo sarà largamente diffusa.

Come punto di partenza vi segnalo le Faq del W3C sul futuro di XHTML, ed il post “HTML 5: approfondimenti ed evoluzioni future”, dove troverete diversi link utili.

A proposito di tempi: quanto ci vorrà per vedere HTML 5 supportato da tutti i principali browser? Sicuramente qualche anno, ma la data potrebbe non essere così lontana. In alcuni casi certe funzionalità sono già ben supportate, e questo indica che gli stessi produttori hanno interesse a seguire la specifica. Non sarà comunque un cambiamento improvviso: c’è tutto il tempo per documentarsi ed approfondire.