Crea sito

Insel der Engel'

Il mio piccolo pezzo di Paradiso

 
Tag: CSS

Best of Week (+/-) #15

Continuando ancora per qualche tempo il viaggio attraverso i link estivi o, comunque, non recentissimi, per l’appuntamento di questa settimana ho evitato di esagerare come la scorsa volta e credo di aver trovato un buon compromesso fra notizie vecchie e nuove…ma non sta certo a me giudicare. 🙂

Salame #2 Kabu: Salame #2

Ecco la playlist della settimana:

Alla prossima. Enjoy 😉

Best of Week (+/-) #13

Ed eccoci nuovamente, e probabilmente per l’ultima volta in vista della stagione estiva, al nostro appuntamento con il meglio della settimana. Non ho dedicato molto tempo alla cosa ma credo di aver comunque raccolto qualcosa di interessante.

E per festeggiare l’inizio delle “vacanze” ecco una vignetta speciale della nostra amica Kabu.

Prima il dovere, poi il piacere Kabu: Prima il dovere, poi il piacere

Ecco la playlist della settimana:

Alla prossima. Enjoy 😉

Nostalgia di Opera

Aprendo dopo millenni il forum italiano ufficiale di Opera, questa mattina ho trovato una discussione interessante.

Si parlava della scomparsa, nelle ultime versioni del browser, di uno dei più spettacolari e peculiari CSS personali da applicare al volo alle pagine web che stiamo visualizzando, ovvero il mitico Nostalgia.

Opera Nostalgia

Per chi non sapesse di cosa sto parlando, si tratta, come spiega più che esaurientemente il nostro Francy, della grafica ad 8 bit visualizzata dal leggendario Commodore 64.

Nonostante personalmente non lo utilizzi più da secoli, sono rimasto incredulo leggendo della sua rimozione, considerando anche il fatto che più volte sulla rete ho letto di commenti entusiasti di questa funzionalità. Per principio, o per semplice ripicca, sono andato quindi a recuperarlo ed a rimetterlo al suo posto estraendolo da una vecchia versione del browser. Per chi volesse fare altrettanto ecco la procedura da seguire.

Per prima cosa scaricate il file nostalgia.css allegato a questo post.

Adesso dovrete copiarlo nella cartella styles\user\ all’interno del vostro profilo. Se non sapete dove si trova andate su ? > Informazioni su Opera e la troverete alla voce Cartella di Opera.

A questo punto vi basterà riavviare il browser per avere, nella lista dei vostri CSS personali, anche la vecchia modalità Nostalgia. E devo dire che un giro di prova in memoria dei vecchi tempi non dispiace affatto. 😛

Frameworks CSS: La moda del momento

Oggi torno finalmente a parlare un po’ di webdesign. Nessun tutorial questa volta (ma ne dovrebbe arrivare qualcuno prossimamente) ma solo una riflessione.

Seguendo con interesse la parte di blogosfera che si occupa di queste tematiche, non ho potuto fare a meno di notare come ultimamente realizzare, usare e rilasciare un Framework CSS sia diventata una cosa assolutamente necessaria, pena essere uno sfigato.

Web DesignMa andiamo con ordine. Cosa è un Framework CSS? Si tratta in pratica di un “pacchetto” base già pronto con tutto un insieme di regole generali che consentono in poco tempo di realizzare layout anche piuttosto complessi. In realtà l’idea è buona e facilita molto la vita di webmasters e webdesigners che non si vedranno più costretti a ricreare tutto da zero ad ogni lavoro commisionatogli. Creando un framework generico una volta, sarà poi sufficiente riadattarlo alle necessità del nuovo sito a cui si sta lavorando.

Ma la prima pecca (sempre nella mia umilissima opinione) sta proprio in questo: un framework va bene (e comunque neanche troppo) finchè ad utilizzarlo è il suo creatore o una ristretta schiera di sviluppatori molto vicini (nella metodologia) ad esso. Il motivo è presto detto ed anche facile da capire. Per accogliere le più disparate esigenze dei suoi utilizzatori, il CSS base dovrà necessariamente includere un corposo set di regole e proprietà generiche e di reset che non avrebbero senso di esistere (e che non ne hanno in effetti) in un foglio di stile creato in proprio e costruito per adattarsi al progetto per cui è nato, proprio come un guanto in lattice farebbe con una mano. 😆

Conseguenza di ciò sarà una inutile pesantezza e complessità del CSS finale che, tradotto in termini pratici, significa tempi maggiori per il suo download e per il rendering della pagina (ipotizzando che tutti i problemi cross-browser/platform siano stati previsti e risolti 🙄 ).

Se, tuttavia, questi problemi possono essere sentiti solo marginalmente (o comunque in modo irrilevante rispetto ai benefici) usando un framework ben progettato, la follia raggiunge il suo culmine con l’uso di framework specificatamente creati per sopperire ad ogni esigenza. Tipici esempi sono Blueprint e YUI Grids, nonostante le ottime intenzioni con cui nascono.

Il secondo problema è poi proprio l’uso, spesso davvero eccessivo ed inadeguato, di regole di reset. Anzi si è oggi arrivati persino ad avere non più framework CSS bensì CSS di Reset! 😯

Anche qui meglio dare prima una piccola spiegazione. Con regole di reset in pratica si azzerra qualsiasi “proprietà” (margini, padding e molto altro) che questo o quel browser attribuirebbe arbitrariamente agli elementi della pagina attenendosi al proprio schema (beati coloro che vedranno il giorno in cui il W3C sarà l’unico Dio riconosciuto da sviluppatori web e produttori di browsers).
Senza alcun dubbio il problema esiste ed è reale (anche se personalmente oggi non lo avverto più come in passato) e le opinioni in materia sono le più disparate. Quello che è certo però è che larga parte degli sviluppatori odierni fa un vero abuso di questa pratica anche quando sarebbe assolutamente evitabile, e vedere applicati 10 o più reset al selettore universale non è poi così raro.

Girl PC

Giusto mentre stavo scrivendo questo articolo (in stato di bozza da diverse settimane insieme ad altri che seguiranno 🙁 ) ho avuto modo di leggere un’interessantissima trattazione (che vi consiglio caldissimamente) dell’argomento sulle pagine di <edit>. Ed anche lì comunque il succo è il medesimo benchè a parlare siano voci ben più autorevoli della mia.
Chiamati in causa sono stati infatti Jonathan Snook e Jens Meiert, che si sono espressi anche ben più duramente del sottoscritto ed arrivando addirittura a sostenere che l’unico reset da utilizzare debba essere il classico margin: 0; padding: 0;.

Ai più questo sembrerà forse davvero eccessivo ma personalmente, per il mio modo di sviluppare un sito, non la ritengo una regola tanto costrittiva o limitativa.

Comunque stiano le cose è chiaro che si tratta di pure opinioni personali condivisibili o meno. In attesa di dedicarmi nuovamente al sito principale (lo finirò… un giorno o l’altro lo finirò), e verificare di persona la reale necessità di questi strumenti, io la mia l’ho detta (e con la solita logorroicità che mi contraddistingue 😆 )… ora tocca a voi. 😉

Best of Week (+/-) #6

Avete anche voi l’impressione che questo blog stia già andando alla deriva? … Perchè è quello che penserei io al vostro posto. Ad ogni modo la situazione potrebbe cominciare a migliorare nei prossimi giorni. Nel frattempo ecco qualche link corredato da una delle strip della mitica Kabu.

Punti di vista
Kabu: Punti di vista

Ecco la playlist della settimana:

Alla prossima. Enjoy 😉

Best of Week (+/-) #5

Se in una settimana non riesci nemmeno a creare una lista di link devi esser messo proprio male. O_o Ad ogni modo per farmi perdonare della mancata uscita della scorsa settimana di questa rubrica, nonchè di qualsiasi altro articolo, ecco una serie di letture piuttosto utili ed interessanti più qualche chicca finale. 😛

Per il momento ho inoltre preferito evitare argomenti come Fennec, Opera Mini e Android, riservandomi di riparlarne più approfonditamente più in là (quando, si spera, dovrei avere nuovamente un po’ di tempo e tranquillità).

Infine, prima di lasciarvi alla playlist, una piccola nota a margine: come forse avrete notato in questi giorni ho riadattato molte cose sul blog fra cui anche la formula di questa rubrica che ora non riporta più l’intervallo temporale al quale dovrebbe riferirsi l’articolo. Questo in quanto mi son reso conto che la cosa non era molto pratica nel momento in cui si comincia a saltare qualche appuntamento (come è appunto successo la scorsa settimana). come sempre sono comunque ben accetti critiche e suggerimenti.

Forse non lo sai
Kabu: Forse non lo sai

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>

Best of Week (+/-) #1

L’idea mi era venuta ai tempi in cui avevo deciso di aprire il blog, salvo poi rimandare in attesa che il pubblico crescesse e che io stesso capissi meglio quale direzione avrebbe preso il tutto (e mi piacerebbe ancora capirlo 😛 ).

Comunque con l’articolo di oggi do il via ad una nuova rubrica che, come dice il nome stesso, raccoglie i migliori articoli letti nel corso della settimana (ma non necessariamente limitata a questa)… almeno secondo me. Non garantisco un’uscita a settimana ma farò del mio meglio per essere puntuale.

Il motivo di questa scelta è semplice: seguo ogni giorno oltre un centinaio di feed (si sono troppi lo so) e spesso mi capita di leggere articoli o news interessanti su cui mi piacerebbe soffermarmi senza averne però il tempo. Questa rubrica non risolverà certo il problema ma almeno è un primo passo.

Un ringraziamento va infine a Gioxx a cui mi sono ispirato ancora una volta.

The Family Man
Kabu: The Family Man

Ed ora ecco la playlist della settimana:

Alla prossima. Enjoy 😉