Crea sito

Insel der Engel'

Il mio piccolo pezzo di Paradiso

 
Tag: Web-Design

Best of Week (+/-) #3

Da domani esami. Una buona giustificazione per non aver dedicato molto tempo al blog ed aver osato smembrare il lavoro dell’amata Kabu in più parti (meno pensieri per le prossime settimane 😛 ).

Kabu - I 10 Comandamenti #1

Kabu - I 10 Comandamenti #1

Ecco la playlist della settimana:

Alla prossima. Enjoy 😉

Best of Week (+/-) #2

Settimana ricca di avvenimenti quella appena trascorsa. Indeciso su cosa inserire e cosa far fuori ho quindi pensato di tirare dritto (magari con la speranza di scriverci qualche articolo) e restare su link forse più utili e/o interessanti. 😉

Kabu - Dragonball TG

Kabu - Dragonball TG

Ecco la playlist della settimana:

Alla prossima. Enjoy 😉

Gli usi più creativi di jQuery ?

Oggi spezzo un po’ la monotonia di questo blog per tornare a parlare (era ora!) un po’ di web mastering e web design.

L’occasione mi si è presentata nel mentre selezionavo le risorse da inserire nel prossimo Best of Week e mi sono imbattuto in un articolo, apparso sul celebre portale NetTuts, a prima vista davvero interessante per chiunque si stia cimentando con jQuery e sviluppo web in generale: The 20 Most Practical and Creative Uses of jQuery.

Già il solo titolo, unito alla testata che lo ha pubblicato, dovrebbe essere una garanzia più che sufficiente non solo di utilità pratica ma anche di elevata qualità. Eppure, un po’ per scrupolo, un po’ perchè anche a me la cosa interessava parecchio, ho deciso di andare oltre la semplice lettura e tastare con mano tutti gli esempi riportati. E posso anticiparvi sin da ora che quell’articolo non finirà nella mia rubrica.

Mentre ad una prima lettura sembrerebbe infatti che le implementazioni effettuate dai vari autori siano la cosa più straordinaria del mondo, il discorso cambia decisamente quando si vanno ad aprire i vari esempi.

Non voglio qui puntare il dito contro questo o quello script/sviluppatore, pertanto cercherò di limitarmi ad una anlisi globale sugli aspetti più deludenti riscontrati.

Innanzitutto mi ha lasciato davvero molto perplesso notare come il fattore accessibilità sia stato totalmente ignorato non soltanto da alcuni sviluppatori, ma anche dall’autore dell’articolo.

Personalmente parto infatti da un presupposto imprescindibile secondo cui, se la resa finale non può essere cross-browser o cross-platform, bisognerebbe almeno garantire la piena fruizione dei contenuti anche sui browser non compatibili o con javascript disabilitato. Aspetto che invece non sembra essere stato preso in considerazione da alcuni sviluppatori (pochi per fortuna).

Restando sempre in tema accessibilità mi è parso poi davvero ridicolo riscontrare fra i siti in lista un Portfolio (o landing page) che supera addirittura i 5 MB (senza contare le infinite richieste http) per la sola (e strimizita) home page! Francamente, dopo aver atteso il caricamento di un mostro del genere, mi sarei quantomeno aspettato che non ci sarebbero più stati tempi di attesa nel passare da una sezione all’altra… Ovviamente mi sbagliavo ed anche tecniche base come il semplice preload o gli sprites vanno evidentemente al di là dell’immaginario comune.

Certo che se fosse finito tutto qui mi sarei comunque potuto ritenere fortunato. Ed invece è proprio la domanda che segue che mi ha portato a scrivere questo post:

Ma era davvero necessario ricorrere a jQuery (e JavaScript in generale) per ottenere quegli effetti?

Incredibile ma vero la risposta, in molti casi, è no. 😮

Per replicare alcuni degli effetti presentati sarebbe infatti bastato l’uso dei ben più semplici e compatibili CSS, eventualmente combinati con qualche sano hack.

Ora, ben vengano sperimentazioni e dimostrazioni pratiche delle proprie abilià o delle possibilità di un framework JS, ma nel momento in cui queste abbandonano lo status di esempio per approdare nel mondo reale credo bisognerebbe essere un po’ più critici. Specie poi nel caso specifico di jQuery che non è certo noto come il più parsimonioso di risorse (anche se con la prossima versione le cose porebbero cambiare).

Infine, e parzialmente correlato al punto precedente, lascia un po’ perplessi anche un’altra cosa. Molte delle risorse segnalate non hanno in realtà quasi nessun “sex-appeal” . Cosa che dovrebbe fare un attimo riflettere per un articolo che titola come “I 20 usi più pratici e creativi di jQuery”.

Ma ad ogni modo qui si va sul campo dei gusti personali e non è quindi possibile dare giudizi assoluti.

Chiudo quindi questo mio secondo articolo-polemica (o terzo ? 😕 ) nel mondo del web design lasciando a voi il compito di giudicare. E se volete fatemi avere i vostri pareri. 😉

PS
Preciso comunque che non tutto è da buttare e, anzi, molte cose sono interessanti. Solo sarebbe stato necessario maggior criterio durante la stesura dell’articolo.

Best of Week (+/-) #20

Ritornano i vecchi impegni, continuano le nuove passioni e, chiaramente, il blog comincia a risentirne… proprio ora che iniziavo ad accarezzare l’idea dei 4 articoli a settimana… pazienza… ad ogni modo mettetevi comodi e concentratevi perchè la playlist di oggi è decisamente più impegnativa del solito.

Cruciverba
Kabu: Cruciverba

Ecco la playlist della settimana:

Alla prossima. Enjoy 😉

Filmati Flash in background con i CSS

Ed iniziamo con questo articolo una serie di guide e di tips & tricks per eventuali webmasters alle prime armi che passassero da queste parti. Onestamente non so bene neanche io come (e se) si svilupperà la cosa. Ma come sempre l’importante è iniziare no?

L’idea mi è venuta grazie ad una domanda posta da un utente sul forum di MegaLab.it. Vedendo come operazioni apparentemente molto semplici possano sembrare dei problemi insormontabili ad un neofita mi ha spinto a cominciare questa nuova “rubrica”.

Ed adesso andiamo al tema di oggi: “Come creare in modo semplice e veloce una pagina web in cui un filmato flash farà da cornice alla nostra pagina vera e propria”.

Il trucchetto si rivela utile soprattutto per chi il Flash non lo conosce proprio al meglio, visto che la soluzione migliore sarebbe sviluppare tutto direttamente con questo programma sfruttandone le pressochè illimitate possibilità.

Per realizzare il nostro progetto ci limiteremo dunque al solo uso di codice (x)HTML e CSS e, in particolare, alle specifiche XHTML 1.0 Strict e CSS 2.1 così da garantire un’ottima compatibilità cross-browser e cross-platform (nonostante quell’ XHTML 1.0 Strict possa far pensare diversamente qualche profano 😉 ).

Per ottenere l’effetto desiderato, ovvero avere due livelli sovrapposti in vario modo esattamente come siamo abituati a vedere in programmi di grafica come Photoshop, la specifica CSS2 infatti ci mette a disposizione la proprietà z-index.

Tutto quello che dobbiamo fare è quindi creare due box posizionati assolutamente ed ai quali attribuire dei valori diversi per lo z-index (maggiore per quello che deve essere visualizzato sopra). Tuttavia questo non è ancora sufficiente in quanto limitandovi ad inserire il vostro file .swf tramite il codice standard (in genere fornito dalla routine di esportazione stessa) noterete che invece di fare da sfondo al livello superiore verrà visualizzato in primo piano coprendo la vostra pagina.

Questo comportamento, apparentemente inspiegabile, è in realtà normale in quanto, affinchè il plugin flash del vostro browser posizioni e visualizzi il filmato nel modo desiderato, è necessario che aggiungiate al codice fornito per il suo inserimento (ammesso che si tratti di codice XHTML valido) la seguente stringa:

<param name="wmode" value="transparent">

ottenendo quindi un codice di questo tipo:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="wmode" value="transparent" /><param name="src" value="movie.swf" /><embed type="application/x-shockwave-flash" width="100" height="100" src="movie.swf" wmode="transparent"></embed></object>

A questo punto avrete ottenuto l’effetto desiderato senza dovervi scervellare a gestire il tutto tramite il ben più complicato Flash. Comodo no? 😉

Ed ecco infine il codice completo di una pagina di esempio in cui un filmato preso da YouTube farà da sfondo al testo:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="it-IT">
<head>
<title>Test1 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--
#box1 { background: #ffffff; width: 450px; position: absolute; top: 120px; left: 30px; z-index: 1; }
#box2 { background: #f3f3f3; width: 300px; position: absolute; top: 160px; left: 90px; z-index: 2; }
-->
</style></head>
<body>
<div id="box1">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="wmode" value="transparent" /><param name="src" value="http://www.youtube.com/v/dZWl-SOC5jQ" /><embed type="application/x-shockwave-flash" width="100" height="100" src="http://www.youtube.com/v/dZWl-SOC5jQ" wmode="transparent"></embed></object></div>
<div id="box2">Come volevasi dimostrare questo testo viene visualizzato sopra il filmato</div>
</body>
</html>

Safari 3.1: la soluzione che molti webmaster aspettavano

Non essendo (ancora) un mac user non ho mai seguito molto lo sviluppo di Safari e WebKit, il suo core-engine.

Safari LogoCome molti di voi sapranno tuttavia qualche tempo fa Apple ha deciso di portare il suo innovativo web-browser sulla piattaforma di zio Bill e da allora le cose sono cambiate, ritrovandomi adesso a seguire una decina di feed in più per restare aggiornato sull’argomento.

E proprio oggi aprendo il mio Google Reader trovo tra questi ultimi feed una notizia che mi ha davvero interessato, sia come pseudo-esperto/amante di browser (no, non sono malato 🙄 ) sia, soprattutto, come webmaster dal momento che aspettavo questa feature da anni.

La notizia a cui mi riferisco è il supporto (finalmente!) al download dei font usati nelle pagine che visitiamo, qualora questi non siano disponibili sul nostro sistema.

Sino ad oggi infatti in questi casi il comportamento standard di tutti i browser sarebbe stato di sostituirli con font simili (con risultati spesso piuttosto lontani dall’originale) o, peggio ancora, con quelli di default.

Sembrerà una cavolata ma in realtà la cosa ha sempre rappresentato un problema di non poco conto per tutti i webmaster, specie se alle prime armi, che realizzato il layout dei propri sogni scoprono come questo renda in modo orribile sul PC dell’amico (naturalmente il problema dei font è solo uno dei tanti sotto questo aspetto).

L’unica soluzione, ormai ampiamente collaudata nel corso degli anni, è stata quella di ricorrere all’uso di limitati set di caratteri standard che, nella migliore delle ipotesi (e non sempre questo è vero), tutti gli utenti della rete dovrebbero avere installati sul proprio sistema.

Naturalmente questo palliativo, viste le infinite possibilità che i grafici (o tipografi? 😕 ) di oggi ci mettono a disposizione, non mi ha mai soddisfatto molto, appiattendo di fatto molte idee originali in nome della compatibilità. Del resto anche il “workaround” di ricorrere all’uso di immagini non è applicabile che a limitate sezioni della pagina come l’header o poco altro, mentre quello di realizzare tutto in flash (che permette di incorporare i font nel file) non è certo una soluzione valida.

Finalmente comunque questo problema ha trovato una soluzione piuttosto semplice, ma al tempo stesso efficace, grazie al lavoro svolto dagli sviluppatori di WebKit.

Inspector Fonts

Resta tuttavia il dubbio sulla reale utilità della cosa qualora anche i concorrenti non adottino lo stesso comportamento. Sviluppare un sito per un solo browser non è infatti la scelta migliore, specie se questo non ha i numeri di IE o FF, e non credo che saranno in molti i webmaster che rischieranno una mossa del genere.

Sperando che Microsoft, Mozilla ed Opera si pronuncino presto sulla faccenda non ci resta che attendere fiduciosi.

Discorso font a parte comunque, altre novità accompagneranno il debutto di Safari 3.1.

Tra le più importanti, il supporto allargato ad HTML5, l’ultima versione dello standard, già adottato anche da Opera 9.5 e Firefox 3, che includerà fra le altre anche tag per il supporto nativo agli elementi audio e video, e le nuove capacità CSS Transform e CSS Animations, caratteristiche davvero interessanti nelle mani di sviluppatori esperti.

E come sempre ecco una lista di fonti ed approfondimenti vari.

Links:

WebKit Blog: Web Inspector Update
WebKit Blog: CSS Animation
TheAppleLounge: Mac OSX 10.5.2: seed 9C31 con Safari 3.1
Apple Blog: Safari 3.1: supporto ai font web scaricabili e molto altro
MelaMorsicata: In arrivo Safari 3.1
Just Browsing: Apple Edges Towards RIA Viability