Pronti con HTML5?

Oramai si può dire che HTML5 sarà il futuro: in rete si possono trovare già demo/esperimenti molto interessanti che sfruttano le nuove features che questo “linguaggio” ci mette a disposizione (in primis GMail che ha attivato il drag&drop degli allegati).
Ho trovato 2 link molto interessanti:

HTML5 Presentation
Un sito che presenta delle slide molto interessanti (con esempio) che spiegano le caratteristiche di HTML5.

HTML Readiness
Schema di compatibilità con i browser più recenti (Chrome è una bomba).

Dateci un occhiata!

10 cose che uno sviluppatore frontend dovrebbe sapere

Girovagando qua e la sono venuto a conoscenza dell’articolo intitolato “Top 10 best practices for front-end web developers” che racchiude 10 consigli che ogni sviluppatore dovrebbe seguire.

  1. Nel momento in cui chiudiamo un div, sarebbe opportuno scriverci un commento accanto che lo identifichi.
  2. Usare CSS Reset
  3. Non usare @import per caricare CSS perchè più lento del classico rel stylesheet
  4. Ottimizzare le immagini (Yahoo Smush.it)
  5. Dividere logicamente il Javascript dal HTML senza mixarli tra loro (stessa cosa per i CSS)
  6. Usare commenti condizionali per compatibilità con i browser (Microsoft) evitando l’uso di hacks
  7. Inserire i Javascript alla fine del documento HTML
  8. Usare HTML semanticamente
  9. Testare man mano ciò che scriviamo con i browser più importanti

Piccoli consigli che a seconda delle casistiche sono più o meno utili :)

Nuovi obblighi per le imprese che hanno un sito Web

La “Legge Comunitaria” introduce nuove norme alle imprese che hanno un sito Internet e queste includono:

  • La sede sociale, l’ufficio del registro delle imprese presso il quale la società è iscritta ed il numero di iscrizione;
  • Il capitale sociale, indicato secondo la somma effettivamente versata e quale risulta esistente dall’ultimo bilancio;
  • L’eventuale stato di liquidazione della società;
  • Se, in caso di SpA o di Srl, la società ha un socio unico (unipersonale).

Anche io come Ernesto Belisario invito tutti a non sottovalutare queste “regolette” perchè si sa: un giorno si svegliano, fanno la multa…e sò cazzi ;)

Non si è ancora capito dove inserire questi dati: c’è chi riesce a metterle nel footer, chi in un’apposita sezione del sito e chi invece fa un link ad una pagina “note legali”.

Tabelle e Div

Su Smashing Magazine c’è un articolo molto interessante (e lunghetto) in cui vengono discusse le differenze tra un layout a tabelle e div.
Ad una prima occhiata può essere visto banale, però vi assicuro che ci sono alcuni argomenti trattati in profondità e piuttosto “originali”.
A fine articolo viene spiegato in poche parole HTML 5 ed il posizionamento basato su tabelle tramite CSS (Table-based layout with CSS): probabilmente il miglior compromesso.

Il futuro promette bene, bisogna vedere quanto saranno bravi i var Browser (a far cosa? indovinate…).

Form semanticamente corretti

Quando dobbiamo creare un Form abbiamo a disposizione una moltitudine di metodi per realizzarlo.
Possiamo usare le tabelle, le liste oppure semplicemente i div (che conterranno i vari item che compongono il form).
Quale di queste strade è la più corretta?
A mio avviso, utilizzare le tabelle e le liste è errato mentre trovo più corretto l’utilizzo (controllato) dei div.
Mark Aplet, che fortunamente la pensa come me, ha creato una paginetta che dimostra come il layout grafico non debba incidere sulla scelta dei tag (semanticamente corretti) visto che con un po’ di CSS è possibile ottenere lo stesso risultato.

D’accordo?!? (cit. Vanna Marchi)

Il posizionamento CSS (prima parte)

Introduzione

Questo tutorial è una traduzione dell’articolo chiamato “Understanding CSS Positioning part 1” di Kilian Valkhof.

Senza ombra di dubbio il posizionamento è la parte più difficile da capire dei CSS.
Non solo perchè ciò dipende molto dal browser che l’utente utilizza, ma anche perchè i CSS permettono più modi di posizionare un elemento con i relativi vantaggi e svantaggi.

Display

Prima di iniziare è giusto parlare dei 2 modi di visualizzazione di un elemento: block ed inline.

Display: block

Block può essere considerato letteralmente come un “blocco”.
Esso ha una specifica larghezza ed altezza, opzionalmente esse possono dipendere dal suo contenuto anche se le dimensioni date mediante CSS hanno la priorità.
Un’altra proprietà degli elementi visualizzati in block è che non possono stare nella stessa linea.
Anche se un elemento ha una larghezza piccola , il prossimo elemento sarà visualizzato sempre sotto di esso.
Due elementi in display:block verranno visualizzati come segue:

display:block

Display: inline

Display: inline è in qualche modo l’opposto.
Elementi con display:inline prendono sempre le dimensioni del loro contenuto ed ignorano qualsiasi dimensioni specificata dal CSS (Internet Explorer ingiustamente non lo fa).
Un’altra caratteristica opposta, come suggerisce il nome, è che gli elementi vengono visualizzati nella stessa linea, così ogni elemento seguirà il suo precedente. Se la linea è “riempita” completamente dagli elementi, gli elementi successivi verranno visualizzati nella riga sottostante.
Ecco una rappresentazione grafica:

display:inline

La proprietà display:none è molto facile da spiegare: essa semplicemente non farà visualizzare l’elemento.

Ci sono una moltitudine di proprietà di visualizzazione come table, inline-block, ecc…

Il flusso di posizionamento

Con il posizionamento non si può non parlare di “flusso” (flow).
Il flusso nei CSS è il modo in cui gli elementi sono posizionati logicamente nel display.
Per esempio, se disattiviamo i CSS su questa pagina, si può vedere come gli elementi sono disposti originariamente (in un determinato ordine) ossia dall’alto verso il basso.

Posizionamento

Una delle proprietà più complesse del CSS.
Questo è vero sia per questioni legate al cross-browsing ma anche ad una denominazione ambigua.
Non è complessa (o comunque non facile da apprendere) la dichiarazione del posizionamento ma il modo in cui l’elemento interagisce con il contesto.
Il posizionamento varia anche in combinazione con la proprietà display utilizzata con esso.
Il modo in cui il posizionamento e la proprietà display interagiscono è il seguente:
position:static e position:relative possono essere entrambe display:block e display:inline, mentre position:absolute e position:fixed (e float) vengono sempre visualizzati come display:block.

Inizieramo con il posizionamento più facile, lo static.

Position: static

E’ il posizionamento base e più semplice da comprendere.
Un elemento con position:static riempie tutto lo spazio di cui necessita (il suo contenuto).
La proprietà display (display:block o display:inline) dipende dal valore di default dell’elemento (ad esempio i div hanno display:block, mentre gli span hanno display:inline) oppure da ciò che si è specificato nel CSS.

Il offsetting (top, bottom, left e right) è ignorato.

Position: relative

Questa proprietà è simile al position:static con una sola ed importante differenza: l’elemento (con altezza e larghezza propri) reso a video non occupa lo spazio originariamente designato ad esso.
La proprietà top, bottom, left e right permettono di spostare l’elemento relativamente allo spazio designato.
Un elemento con position:relative top:20px e left:20px appare come segue:

relative1

La zona grigia è lo spazio designato originariamente all’elemento.

Il prossimo elemento del flusso verrà posizionato usando lo spazio designato dell’elemento precedente considerandolo come quello “reale”.
In questo modo se si posiziona un div al di sotto dell’elemento della figura soprastante otterremo questo:

relative2

Position: absolute

Il posizionamento assoluto è completamente diverso da ciò che abbiamo visto fin’ora.
La più grande differenza è che l’elemento non fa più parte del “flusso”. Ciò significa che non interagirerà in alcun modo con gli altri elementi.
Gli elementi circostanti si limitano a far finta che l’elemento posizionato in questo modo “non esista”.

Le proprietà top, right, bottom e left hanno lo scopo di gestire l’offset rispetto al primo elemento padre che risulta essere posizionato in relative o absolute.
A meno che non siano presenti elementi posizionati con position:relative, position:fixed o position:absolute l’elemento radice è <html>.
Nelle specifiche ciò è chiamato “initial containing block” (ndt: “Blocco contenitore iniziale”).

Un elemento posizionato in modo assoluto con top:20px e left:20px all’interno di un elemento posizionato relativamente verrà mostrato così:

absolute

Si possono avere alcuni problemi con il posizionamento assoluto: l’articolo di paul’OB li descrive molto bene.

Position: fixed

Fixed a causa del mancato supporto con Internet Explorer 6 risulta essere poco conosciuto.
Fixed fa esattamente la stessa cosa di position: absolute con una sola importante differenza: l’offset non prende come riferimento l’elemento genitore bensì il viewport della finestra del browser.
Ciò significa che l’elemento, mentre scrolliamo, rimane visibile e non si muove con il resto della pagina.

z-index

Un’altra proprietà che entra in gioco con il posizionamento è lo z-index.
Questa proprietà permette il controllo del livello di profondità degli elementi posizionati in absolute, fixed e relative.
Lo z-index applicato ad altri posizionamenti diversi da absolute, fixed e relative non porta ad alcun risultato.

Per capire lo z-index, è giusto dare rilevanza alle specifiche:

Nel CSS 2.1 ciascun box ha una posizione composta da 3 dimensioni. Oltre al posizionamento verticale ed orizzontale, gli elementi sono disposti lungo un’asse z uno davanti l’altro.

Ciò è chiamato “stacking” (ndt: pila) e l’insieme degli elementi impilati è chiamato “stacking context”.
C’è da notare come ogni volta si dichiara uno z-index si crea un nuovo stacking context: ciò significa che ogni elemento contenuto nell’elemento corrente userà lo z-index del genitore come punto di partenza.
Spieghiamo meglio il concetto con del codice CSS:

  1. .relativeblock1 {
  2.     position:relative;
  3.     width:200px;
  4.     height:80px;
  5.     z-index:51;
  6. }
  7. .absoluteblock1 {
  8.     position:absolute;
  9.     left:10px;
  10.     top:90px;
  11.     width:40px;
  12.     height:40px;
  13.     z-index:1;
  14. }
  15. .relativeblock2 {
  16.     position:relative;
  17.     width:200px;
  18.     height:80px;
  19.     z-index:50;
  20. }

e HTML:

  1. <div class="relativeblock1">
  2.     <div class="absoluteblock1"></div>
  3. </div>
  4. <div class="relativeblock2"></div>

Tutto ciò verrà visualizzato in questo modo:

zindex

Si può notare come nonostante .relativeblock2 abbia un valore di z-index elevato (50), stia comunque sotto a .absoluteblock2 che ha z-index 1: questo perchè .relativeblock1, con z-index 51, crea un nuovo stacking context dove lo z-index di .absoluteblock1 può essere visto come “51.1”.
Per approfondimenti si consiglia di leggere l’articolo di Tim Kadlec oppure i test di Krijn Hoetmer.