Cell. +39 3479684755
Il Blog di Instant Websites
CSS3, HTML5, Flash, jQuery … sarà rivoluzione?
La prossima introduzione a tutti gli effetti della nuova versione di HTML, cioè la 5, e dei Cascading Style Sheet, cioè la 3, lasciano presagire una sorta di rivoluzione nel campo dello sviluppo web per via dei nuovi strumenti che verranno messi a disposizione dei web designer.
Fin da oggi è possibile iniziare a sperimentare alcune delle nuove proprietà dei CSS3, poiché a) queste dovrebbero essere definite nella loro versione definitiva, b) i browser più intelligenti già le supportano, c) nel caso dei browser meno intelligenti (vale a dire IE, ma qualcuno ne dubitava?) la degradazione non comporta problemi di visualizzazione.
Ci siamo ad esempio occupati nel precedente articolo della proprietà fontface che consente di utilizzare font non standard nelle pagine web.
Questa è supportata persino da IE, addirittura nelle sue versioni più vecchie, quindi è utilizzabile da subito.
Un’altra proprietà interessante che andrà a risolvere un problema annoso – e diciamo con sincerità, noioso – è border-radius: questa permette di arrotondare gli angoli di un box in base ad un certo valore di raggio e può essere applicata a tutti gli angoli ovvero solo ad alcuni.
Vediamo un semplice esempio di un contenitore con tutti e quattro i bordi arrotondati:
#angoli-arrotondati {
width: 450px;
height: 300px;
margin: 20px 0;
background-color: #FF0000;
-moz-border-radius: 10px; /* per Firefox */
-webkit-border-radius: 10px; /* per Safari e Google Chrome */
border-radius: 10px; /* per IE9 */
}
ed un altro con i soli angoli inferiori arrotondati:
#angoli-inferiori-arrotondati {
width: 450px;
height: 300px;
margin: 20px 0;
background-color: #FF0000;
border: 1px solid #333333;
-moz-border-radius: 0 0 10px 10px; /* per Firefox */
-webkit-border-radius: 0 0 10px 10px; /* per Safari e Google Chrome */
border-radius: 0 0 10px 10px; /* per IE9 */
/*
Le ultime tre righe equivalgono a:
-moz-border-radius-bottomleft: 10px;
-webkit-border-radius-bottomright: 10px;
*/
}
In questa pagina sono presenti entrambi gli esempi: visualizzandola con Internet Explorer 8 e precedenti, gli angoli non risulteranno arrotondati mentre con tutti gli altri browser l’effetto funziona.
Un’altra questione che ha agitato le acque del web design è rappresentata dall’ostracismo attuato da Apple nei confronti di Flash, non supportato da iPhone né da iPad.
Qualcuno si è affrettato a dichiarare la morte di Flash, con comprensibile scarsa soddisfazione di Adobe; altri hanno affermato che la necessità di questo strumento verrà comunque meno per via delle opportunità offerte dai framework come jQuery e dallo stesso HTML5 che promette di gestire i file multimediali.
Chi scrive non è d’accordo su queste visioni estreme. Flash ha tuttora la sua utilità, a patto che non se ne abusi, soprattutto perché può compromettere la fruibilità di un sito (e la sua accessibilità).
jQuery è un framework duttile ed efficiente ma non sempre di facile utilizzo: i plugin richiedono numerosi test per accertarne la loro efficacia cross-browser e l’applicazione di più d’uno nella stessa pagina può generare incompatibilità.
L’ottica più corretta per uno sviluppatore web che deve garantire la massima fruibilità possibile per il proprio lavoro è ancora costituita dalla scelta dello strumento di volta in volta migliore per ottenere un certo risultato in termini di leggerezza della pagina, universalità tra i vari browser (o quantomeno degradazione accettabile), qualità del risultato ottenuto.
Tutti questi argomenti vengono trattati nell’ambito del nostro Corso Base di Web Design organizzato da INSTANT WEBSITES a Milano.
Il prossimo corso comincerà il 25 gennaio 2011.
Potete trovare i dettagli in queste pagine: http://www.instantwebsites.it/corsi.html e http://www.corsiwebdesign.it/corsobase.php
Frames addio e tabelle … demoni da scacciare?
E’ notizia di questi giorni: HTML 5 non includerà più i tag relativi ai frames. Certo, gli sviluppatori già evitavano l’uso dei frames come la peste da tempo e quindi si tratterà semplicemente di una presa d’atto della obsolescenza di un dispositivo deprecabile per una serie di motivi molto concreti. Discorso chiuso. Non ci mancheranno.
Più complesso, invece, il discorso riguardante le tabelle. I puristi dei CSS hanno smesso di impiegarle per la realizzazione dei layout a favore dei più flessibili e precisi tag div ed anche l’impiego per il semplice inquadramento dei contenuti di pagina è considerato da taluni in maniera negativa.
Personalmente, credo che in questo – così come su quasi tutto … – sia preferibile trovare una posizione intermedia che tenga da un lato conto dello sviluppo tecnologico e della necessità di evitare le “zuppe di codice” e, dall’altro, permetta di adottare senza preclusioni di tipo quasi ideologico soluzioni tecniche semplici ed efficaci.
Io non uso più da tempo il tag table per realizzare dei layout. Da quando ho acquisito una buona pratica dei CSS-P, semplicemente non ne sento più il bisogno e oltretutto è chiaro che i fogli di stile consentono un controllo molto superiore dei layout complessi.
Quando però mi trovo a dovere inquadrare dei contenuti all’interno di un div definito tramite CSS, non disdegno l’uso delle tabelle se questa soluzione si prospetta come più semplice ed immediata.
A titolo di esempio, prendiamo una pagina con molte miniature fotografiche cliccando le quali si aprono delle altre pagine del sito. Se le foto sono soggette a frequente aggiornamento è preferibile usare una lista non ordinata debitamente formattata tramite CSS, come ho fatto in questa pagina: http://www.lebarbiedifulvia.it/html/barbies/fantasy.html (fra le molte per le quali ho usato questa soluzione). In tale modo è infatti possibile aggiungere immagini in qualsiasi punto della lista senza dovere spostare le altre, inoltre se la pagina ha dimensione elastica le miniature si riallineano in automatico (a ciascuna voce li dell’elenco si assegna un float: left; mentre a ciascuna immagine si applica la regola: display: block; per affiancarle). Se però non si prevedono aggiornamenti e soprattutto il tempo disponibile per sviluppare il codice è molto ristretto, è molto più facile usare una tabella ed inserire le miniature nelle singole celle: è forse una strada tecnicamente errata? Assolutamente no…
HTML 5 manterrà l’uso delle tabelle e questo può fare comodo. Quindi, se non ci sono controindicazioni e nemmeno limitazioni, usiamole senza paura dei … demoni.