Crea sito

Webmastering

Articoli sul mondo del webmastering

One Web – miliardi di dispositivi per un solo Web

Chi come me segue Opera da qualche annetto conoscerà sicuramente l’importanza attribuita dalla società norvegese allo sviluppo di una rete globale ed unificata.

Del resto per un browser che ha sempre seguito il principio di totale aderenza agli standard web, pur se a discapito a volte della compatibilità, la filosofia del “One Web” introdotta dal W3C non poteva che essere accolta a braccia aperte (non per niente molti componenti di spicco del W3C lavorano o hanno lavorato per Opera).

Seguendo questo principio, dopo tutte le iniziative passate, fra cui impossibile non citare l’articolo del 2007 Open Standards, One Web, and Opera ed il più recente Opera Web Standards Curriculum, è stato qualche giorno fa rilasciato un video che mostra in modo decisamente riuscito la visione del Web e delle sue possibilità secondo Opera.

Our goal is to take the one true Web and make it available to people on their terms

Come sarebbe la nostra vita se tutte quelle tecnologie che da anni balenano nell’immaginifico comune fossero già disponibili e pienamente fruibili?

In poco più di 2 minuti ce lo mostra una ragazza attraverso una sua giornata tipo. Colazione e Facebook, acquisti facili e veloci, geolocalizzazione e mappe, videochiamate VoIP e molto altro ancora grazie all’integrazione di ogni dispositivo con un solo Web.

Il video devo dire è realizzato davvero bene, anche se ricorda un po’ troppo gli spot Vodafone ad essere sinceri. E la cosa forse non è nemmeno da disdegnare perchè ci mostra una Opera Software non solo sempre più aggressiva ma anche attenta all’impostanza di una buona operazione di marketing.

Per chi volesse vedere il video a maggiore risoluzione è disponibile nella sezione Discover del sito Opera.com dove potrete trovare anche gli altri video realizzati dalla società

Web standards curriculum in italiano

Qualche mese fa, parlando della straordinaria iniziativa di casa Opera per la formazione di web developer rispettosi degli standard web, accennavo anche al fatto che, essendo stata la guida rilasciata sotto una licenza Creative Common molto flessibile, ne sarebbe stato possibile (oltre che auspicabile) la localizzazione nelle più svariate lingue.

Fortunatamente non sono stato l’unico ad averlo notato e ad oggi alcuni volenterosi utenti della rete si sono già messi all’opera per portare il Web Standard Curriculum in alcune delle principali lingue, fra cui anche l’italiano.

Per la nostra adorata lingua di Dante pare essersi impegnato un utente esterno alla community di My Opera, Giuseppe aka floyd1616, che ha deciso di ospitare le traduzioni sul suo sito personale. Benchè avrei auspicato di vederle raccolte su un portale come OperaZone poco importa, ciò che conta è che comunque ci siano.

Al momento i lavori sono ancora in fase iniziale e sono state tradotti due soli tutorial introduttivi, ma sembra che ben presto l’intera documentazione dovrebbe essere pienamente fruibile.

Augurando buon lavoro a Giuseppe non ci resta che attendere (o cominciare a studiare) 😉 .

Links:

Opera Web Standards Curriculum
Opera Web Standards Curriculum in italiano
Indice traduzioni disponibili

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.

Opera Web Standards Curriculum

Continuando il nostro excursus attraverso gli avvenimenti estivi, potevo io non parlare della straordinaria iniziativa targata Opera? Ovviamente no. 🙂

Storicamente famosa per il suo sostegno, oltre che aderenza, agli standard Web dettati dal W3C, Opera ASA ha pubblicato un completo corso di educazione ad uno “standards-based web development”Opera Web Standards Curriculum

“Learn to build a better Web with Opera” è lo slogan scelto dalla società per diffondere il verbo. Una chiara dichiarazione di intenti che non può certo lasciare adito a dubbi di sorta.

Gli articoli, che spaziano dalle basi di internet all’analisi di linguaggi quali HTML, CSS e JS, e sono arricchiti di link di approfondimento e ad altre risorse utili, coprono tutte le fasi di sviluppo di un sito.

Inoltre, essendo distribuiti secondo licenza Creative Commons, possono essere liberamente utilizzati da chiunque sul proprio spazio web ed anche localizzati nelle diverse lingue (cosa che forse prenderò in considerazione per OperaZone).

Una iniziativa, come dice lo stesso Asa Dotzler, sicuramente encomiabile e che va ad aggiungersi all’ottimo lavoro già svolto in passato attraverso i canali Open the Web (il cui logo, dal sapore un po’ retrò, capeggia in cima a questo articolo) ed il più recente Opera Developer Community. Nella speranza che non rimangano solo parole nel vento.

Web Developer: adesso si che si ragiona

Erano i primi giorni di vita di questo blog quando analizzavo per la prima volta le possibilità offerte agli sviluppatori Web dai vari browser, e sottolineando come persino io (lo sapevate che sono un fan di Opera? 😛 ) ancora non potessi fare a meno di Firefox e delle sue estensioni durante lo sviluppo di un sito.

Web developmentDa allora comunque le acque si son mosse parecchio ed il panorama davanti al quale ci troviamo risulta essere non solo molto più interessante, ma anche in pieno fermento.

Ovviamente mi riferisco al rilascio, da parte della società norvegese, di Opera Dragonfly, il debugger tool destinato, nelle intenzioni dei suoi creatori, a rimpiazzare totalmente Firebug nei cuori di tutti i web developer.

Nonostante alcuni problemi iniziali mi avessero impedito di provarlo (se siete nella stessa situazione postate un commento e spiegherò come risolvere), alla fine ho avuto anche io la mia occasione e nelle ultime nottate, complice il mio neonato interesse verso Ajax e MooTools, la libellula norvegese è diventata la mia più fedele compagna di lavoro. Rispetto alla precedente Developer Console (che non ho ancora abbandonato) risulta effettivamente molto più potente e versatile, per quanto manchino ancora alcune funzioni per me fondamentali, fra tutte la modifica on the fly dei CSS, e non sia certo priva di bugs. La situazione comunque non è certo statica e ad Oslo sono costantemente al lavoro per portare avanti lo sviluppo di questa prima alpha, basandosi in particolar modo sui numerosi feedback e suggerimenti della schiera di beta testers volontari. Ed ecco dunque spuntar fuori sul blog dedicato la prima di una lunga serie di weekly builds che, oltre a correggere numerosi bugs, aggiunge anche alcune funzioni essenziali come il completamento della Command Line e l’ Object Inspector. Tutto questo mentre il Desktop Team si prepara a rilasciare una build capace di far girare Dragonfly anche in modalità offline, attuale problema dovuto alll’incompatibilità del protocollo HTTPS con la cache persistente.

Peccato tuttavia che una feature che avevo chiesto spesso e che ritengo assolutamente fondamentale, ovvero l’integrazione di un sistema di validazione “trasparente”, come quello offerto in Firefox da HTML Validator o dalla la Web Developer Toolbar, non sarà integrato nella proposta di Opera. Personalmente non so quanto questo possa influire fra gli sviluppatori più esperti, ma onestamente l’idea di dover passare al setaccio ogni pagina usando il validatore online non è che mi solletichi molto.

Opera Dragonfly

Ma se gli sviluppatori di Opera stanno lavorando sodo per guadagnarsi il successo, chi si occupa dello sviluppo di Firebug non sta certo a guardare e giusto ieri ha rilasciato una nuova versione dell’estensione forse più popolare del web che, non solo aggiunge (finalmente) il supporto a Firefox RC1, ma offre anche nuove funzioni, una maggiore cura dei dettagli e, infine, il miglioramento complessivo delle performance (anche se questo, a mio parere, è più probabilmente dovuto al nuovo FF3 piuttosto che all’estensione in se).

Ecco dunque spiegato lo strano titolo con cui ho presentato questo post. Dopo anni di assoluta quiete e pressochè totale disinteresse verso (noi? … esagero?)  poveri sviluppatori web, eccoci trasformati improvvisamente nelle principessine più desiderate del reame… e finchè dura chi si lamenta? 😀

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. 😛

Google User Experience: predica bene, ma…

Quante volte, girovagando di qua e di là alla ricerca di qualche utile articolo sul web-design, vi siete imbattuti in una di quelle liste di consigli da seguire durante la progettazione del vostro sito?

Personalmente non le conto nemmeno più, e gli autori sono davvero i più svariati, dall’esperto internazionale di CSS al piccolo blogger che cerca di mettere a disposizione degli altri tutta la sua esperienza.

In genere solo raramente mi soffermo in una lettura più attenta di questo genere di articoli (ipotizzando con arroganza di non aver nulla di nuovo da imparare 😳 ). Eppure questa volta non ho potuto proprio ignorare il post in questione, dopo aver appreso dal titolo che il dispensatore di consigli di turno era niente-po-po-di-meno-chè l’onnipotente Google. 😮

Google Teacher

Ad una prima lettura, il gruppo Google User Experience è in effetti riuscito a sintetizzare in 10 semplici punti come una applicazione web degna di questo nome dovrebbe essere sviluppata. Si tratta di consigli molto generici ma di indubbio valore didattico. Del resto si tratta di quelle stesse linea guida seguite ai tempi della creazione di quell’interfaccia che ha decretato il successo di Google nella lotta dei search engine.

E allora dov’è il problema vi starete chiedendo? Semplice provate a scorrere la lista fino al sesto punto:

6. Design for the world.

… Our goal is to design products that are contextually relevant and available through the medium and methods that make sense to users…

… and Google’s mission to make the world’s information universally accessible, demand products that support assistive technologies and provide a useful and enjoyable experience for everyone…

Se a questo punto non siete sobbalzati dalla sedia e/o svenuti significa che non usate Opera con le web application di Google. Giusto in questi giorni sto infatti valutando seriamente l’idea di abbandonare sia GReader che Gmail in favore di alternative che non richiedano necessariamente Firefox per funzionare.

Chiunque usi il Feed Reader di Google con Opera sa bene infatti come, oltre ai mille problemi in cui si incappa ad ogni aggiornamento dell’applicazione (che vengono risolti mediamente in 10 giorni o più), attualmente la sua lettura risulti estremamente irritante, con latenze e “freeze” temporanei che metterebbero alla prova anche la pazienza di San Francesco.

Anche Gmail e le altre applicazioni poi non è che brillino sul fronte compatibilità, per quanto si riesca comunque a lavorare una mezzoretta senza farsi venire un’ulcera gastrica.

Google si era sempre difesa affermando come fosse Opera ad avere delle limitazioni intrinseche di difficile soluzione. Ma abbiamo già visto come queste affermazioni fossero del tutto prive di fondamento.

Insomma sviluppare web-application universali va bene… purchè in qualsiasi parte dell’universo ci si trovi si stia usando Firefox. 🙄

Campagna anti-google a parte, esorto comunque tutti i miei lettori a seguire alla lettera almeno i consigli dati dalla grande G… ma per l’esempio forse è meglio guardare altrove. 😉

Opera Dragonfly si prepara per il primo vagito

Circa un mese fa scrivevo il primo post sul mistero che circondava Opera Dragonfly.

Opera DragonflyLe idee al riguardo erano molte e le più disparate ma fino alla fine nulla di certo si sapeva sulla natura di questo fantomatico progetto.

Ora finalmente quelli di Opera hanno deciso di rompere la suspance e, contestualmente al rilascio della seconda beta pubblica di Kestrel, hanno rivelato al mondo intero cosa in effetti sia questa fantomatica libellula che tanto ha fatto parlare di sè.

Come giustamente ipotizzato da molti (e da babox in particolare che ne ha fornito anche una interessante spiegazione) il progetto non era altro che i tanto attesi strumenti di sviluppo che da tempo la software house norvegese aveva promesso ai suoi utenti. Ed in effetti la loro mancanza si sentiva eccome, nonostante la pur sempre ottima Developer Console sviluppata in javascript come palliativo temporaneo.

Adesso invece il nuovo tool pare non voglia più essere considerato solo un’alternativa minore al più famoso Firebug, bensì prenderne il posto come strumento di riferimento per tutti gli sviluppatori web. (per i particolari vi rimando all’articolo su OperaZone.it)

Certo fin qui si parla di semplice campagna pubblicitaria visto che ai fatti nessuno ha ancora avuto il piacere di testarlo di persona, ma, basandomi sulla semplice esperienza personale, credo che entro poco tempo Opera Dragonfly riuscirà davvero nel suo obiettivo (con l’inevitabile “effetto collaterale” che molti più utenti useranno anche Opera browser 😛 ).

Che dire allora… appuntamento al 6 Maggio per il grande debutto e per le prime prove su strada. Io ho già prenotato i biglietti, e so che anche voi farete altrettanto visto il numero di visite che il precedente articolo ha ricevuto tramite Google. 😉

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. 😉

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>
Go to Top