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
TABELLE, BORDI E INTERNET EXPLORER
La parola “tabelle” tende a generare un sentimento di ripulsa tra molti sviluppatori web, anche al di là del ragionevole a parere di chi scrive.
Naturalmente, non si sta parlando dell’uso delle tabelle per realizzare un layout di pagina. Si tratta di una prassi oggettivamente superata, sia per la sovrabbondanza di codice generato, sia per la mancata corrispondenza semantica tra i tag usati e risultato ottenuto.
L’uso del tag table e dei tag relativi è invece da considerarsi semanticamente corretto quando occorre rappresentare dei dati appunto in forma tabellare, con righe e colonne.
Ipotizziamo dunque una semplicissima tabella a cui viene assegnata una classe:
<table class=”datiVendita”>
…
</table>
Tramite la classe .datiVendita formatteremo graficamente la nostra tabella, usando le proprietà border, padding e width invece dei corrispondenti attributi precedentemente usati nell’HTML di pagina (border, cellpadding e width).
Supponendo di volere assegnare dei bordi solo alle righe e non alle colonne, la corrispondente regola dovrebbe essere:
.datiVendita tr {
border-bottom: 1px solid #333333;
}
Ma ecco la sorpresa: mentre Firefox, Safari, Google Chrome, Opera raffigurano correttamente il bordo inferiore della riga, Internet Explorer 7 e precedenti non lo visualizzano.
Ho googlato per trovare soluzioni a questo baco e ne ho trovate alcune abbastanza demenziali, ma in realtà il tutto si risolve molto semplicemente riscrivendo la regola come segue:
.datiVendita tr td {
border-bottom: 1px solid #333333;
}
Quanto sopra offre lo spunto per discutere se e quanto sia ragionevole continuare ad offrire piena compatibilità con le versioni precedenti di IE.
Quest’ultimo è ancora di gran lunga il browser più usato, a dispetto dalle statistiche troppo ottimistiche sulla diffusione di Firefox.
Personalmente, nello sviluppo dei siti ai quali lavoro garantisco retrocompatibilità con IE6 e versioni successive, anche perché spesso tale risultato è ottenuto con relativamente poca fatica (come nell’esempio riportato in questo articolo).
IE può non piacere – e di certo non piacciono le versioni zeppe di bachi e di interpretazioni errate quali appunto IE6 e soprattutto IE 5.5 – ma finché non sarà stato soppiantato del tutto, è a mio avviso necessario considerarlo.
CORSO BASE DI WEB DESIGN E ADOBE DREAMWEAVER
INSTANT WEBSITES è lieta di proporre il proprio corso di Web Design e Adobe Dreamweaver di livello base.
Il corso si prefigge di insegnare le tecniche di realizzazione di un sito web conforme alle raccomandazioni internazionali, partendo dallo scenario operativo, proseguendo con l’esame delle competenze ed affrontando gli elementi fondamentali dell’XHTML (HTML e CSS).
E’ un corso “base” nel senso che è rivolto a chi affronta l’argomento per la prima volta, quindi non sono richieste conoscenze già consolidate. Tuttavia, una volta terminato il corso stesso, l’iscritto disporrà delle cognizioni tecniche necessarie allo sviluppo completo di un sito, fermi restando naturalmente i necessari approfondimenti e la necessità di svolgere un’adeguata pratica.
Le aree fondamentali del programma sono le seguenti:
- Introduzione al Web Design
- La struttura di un sito web
- XHTML e CSS: Uso di Adobe Dreamweaver
- Promozione e manutenzione del sito
E’ possibile scaricare il programma del corso in formato pdf.
Il corso si articola su 6 incontri da 4 ore ciascuno, per un totale di 24 ore.
La sede del corso è Milano (zona Jenner/Nigra); la data di inizio è MARTEDI’ 9 NOVEMBRE 2010 e l’orario delle lezioni è dalle ore 18 alle ore 22. La collocazione delle lezioni in orario tardo pomeridiano/serale è stata decisa per accogliere le numerose richieste in tale senso, da parte di persone interessate a partecipare al corso ma impossibilitate a frequentare in orari di lavoro. Se tuttavia il giorno e/o l’orario non si adattassero alle vostre esigenza, vi invitiamo a contattarci per discutere la possibilità di organizzare un corso individuale con una differenza di prezzo modesta.
Rammentiamo che previ accordi, questo corso può essere tenuto anche presso la sede della persona o organizzazione interessata; il programma è personalizzabile a richiesta.
Il costo del corso di gruppo è di Euro 600,00 +4% rivalsa INPS, senza applicazione dell’IVA.
Sono previste condizioni particolari per l’iscrizione cumulativa di gruppi di 2 o più persone.
Per maggiori dettagli ed informazioni, vi invitiamo a visitare la pagina Corsi del sito ed a contattarci senza impegno ai numeri telefonici 0200618547 (tariffa urbana da tutta Italia) o 3479684755, oppure tramite il modulo presente nella pagina Contatti del sito.