Archive for the 'web' Category

CSS 3.0 e caratteri

Prendendo spunto da un bel articolo di John Resig – un uomo un genio – pubblicato su ArsTechnica, ho preparato una piccola paginetta di test

Questo il risultato con Firefox 3.0.3:

Mozilla/5.0 (Windows; U; Windows NT 5.1; it; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Pagina di test come appare in Firefox 3.0.3

Questo il risultato con Firefox 3.1:

Mozilla/5.0 (Windows; U; Windows NT 5.1; it; rv:1.9.1b1) Gecko/20081007 Firefox/3.1b1

Immagine di come appare la pagina di test con Firefox 3.1 (beta)

Tutti i browser di nuova generazione infatti saranno in grado di riprodurre anche font non installati nel proprio sistema operativo, a patto che essi vengano correttamente dichiarati nel foglio di stile. Per indicare ad un browser il tipo di carattere utilizzato sarà sufficiente inserire nel foglio di stile:

@font-face {
  font-family: "Arabella";
  src: url(Arabella.ttf) format("truetype");
}

(sostituendo ad Arabella il nome del carattere che si vuole definire)

Ciò fatto, sarà possibile utilizzare il font nelle nostre pagine:

font-family: Arabella, serif;

In questo modo il browser utilizzerà la risorsa specificata, nel caso in cui il font non sia installato sulla propria macchina. Senza dubbio una grande notizia per tutti i Web designer che non si dovranno preoccupare che il font sia o meno installato sul computer del visitatore, in quanto, il font potrà essere reperibile online per la corretta visualizzazione della pagina, che apparirà così come il web designer l’ha pensata.

Problema ? Le licenze di utilizzo dei caratteri , purtroppo sono davvero restrittive :-( . Al sottoscritto, ad esempio, piacerebbe moltissimo usare il Calibri: è molto leggibile, risulta molto adatto per una pagina Web, ha una buoissima resa con l’anti aliasing (Clear Type), però se lo facessi andrei contro la licenza del carattere che è uno dei nuovi font di Windows Vista. Non che sia difficile reperire i font inclusi in Vista: è sufficiente scaricarsi il viewer per i documenti di Office (freeware), scompattare il file e cercarsi i caratteri, ciò nonostante sarebbe “illegale” renderli disponibili in un foglio di stile :-P .

Fortunatamente c’è anche chi, come Dieter Steffmann, rende disponibili gratuitamente dei caratteri molto ben fatti. Per la pagina di test ho usato uno di questi caratteri, Arabella, che nessun web designer sano di mente si sognerebbe mai di utilizzare in una pagina visto che è praticamente illegibile, ma per una pagina di test rende benissimo le differenze con un font senza grazie (di grazie ne ha pure troppe).

Chi vuole può usare il foglio di stile creato da John Resig (che io ho utilizzato per la pagina di test) che definisce tutti i font creati da Dieter Steffmann, ovviamente sarà necessario importarlo nel foglio di stile utilizzato e includere nella stessa cartella i file ttf dei vari caratteri.

Link:

Technorati Tags: , , ,

Come scaricare i filmati di Raiclick

AGGIORNAMENTO: Come mi è stato fatto giustamente notare da @Rafiluccio in questo commento, i filmati di Raiclick si aprono in popup. La cosa, oltre ad essere oltremodo fastidiosa, impedisce l’accesso al bookmarklet (viene disattivata sia la barra dei segnalibri, sia quella degli indirizzi), è quindi necessario aprire quelle pagine in schede o impostare il browser in modo che non nasconda la barra dei segnalibri (o quella degli indirizzi). Per ulteriori informazioni su come fare la cosa con Firefox, si legga il mio commento di risposta a @Rafiluccio (non è difficile). Per altri browser si cerchi nelle impostazioni avanzate del browser stesso.

I filmati di Raiclick sono molto interessanti, se avete notato però il menu contestuale del plugin di WMP è bloccato. Di solito io preferisco guardare i video usando VLC piuttosto che direttamente dal browser. Non potendo però accedere al menu contestuale è difficile risalire direttamente all’URI diretta dello streaming.

Per questo motivo mi sono fatto un bookmarklet su misura per ottenere rapidamente l’indirizzo diretto allo streaming. Il bookmarklet permette con due click di ottenere l’indirizzo (mms://) del filmato, così da poterlo guardare usando VLC. Il bookmarklet è questo:

RaiClick

Per conoscere come aggiungere un bookmarklet al proprio browser seguire questa guida.

Quando ci si trova sulla pagina del filmato desiderato bisogna cliccare sul bookmarklet che rimanderà ad una pagina esterna al sito di Raiclick, questo perchè nella pagina di Raiclick contenente le informazioni sullo streaming parte WMP e non riesco ad avere accesso al documento via bookmarklet. A questo punto, cliccando un’altra volta sul bookmarklet apparirà un prompt con l’indirizzo da copiare/incollare in VLC.

Ë inoltre possibile, usando un Download Manager che supporta il protocollo mms, scaricare il video in locale e guardarselo con calma senza dover dipendere dalla qualità della connessione. Il DM che ho sempre usato (Free download Manager) purtroppo non permette il download da protocollo mms, tempo fa avevo suggerito di utilizzare SDP Downloader, però Orbit Downloader è anche meglio :-) (ringrazio @Thunder Drako che me lo ha fatto notare).

Screenshot  dell'avvio di un nuovo download in Orbit Downloader

Volendo è possibile registrare lo streaming usando VLC, però un conto è registrare e un altro conto è scaricare il file, ovviamente la qualità sarà di molto inferiore nel primo caso (durante le mie prove ho ottenuto risultati a dir poco orribili con l’audio fuori sincrono in modo spaventoso).

Probabilmente chi utilizza Media Player Connectivity non ha bisogno del bookmarklet, una volta che il filmato è stato aperto in VLC è sufficiente risalire all’indirizzo dello streaming dal menu Visualizza -> Informazioni media e flusso.

Technorati Tags: , , ,

Raiclick e la secessione

Boh, per il sito Raiclick io non mi trovo in Italia. Se cerco infatti di guardare qualche video della sezione Sport, questo è il messaggio che mi appare:

Messaggio di Raiclick che avvisa che non mi trovo nei confini nazionali

Unfortunately, this program isn’t available outside Italy.
Il video selezionato non è visibile agli utenti che si collegano al di fuori del territorio italiano.

Io invece mi trovo a Treviso, Italia. Ora, usando un servizio di visualizzazione IP, risulto essere in Piemonte (falso ma almeno rimango nei confini nazionali :-P ):

Visualizzazione parziale del mio indirizzo IP che risulta essere da Ivrea

Mah, io spero risolvano :-( , altrimenti chiederò a qualche italiano di mandarmene una copia via email :-P .

Technorati Tags: ,

Easter Egg in SMF

Oggi, grazie a @michro, ho scoperto che esistono anche in SMF, la piattaforma di forum su cui è basato, fra gli altri, anche il forum di MozillaItalia.

In particolare, quando si raggiungono i 1337 messaggi viene visualizzata la dicitura leet al posto del numero 1337.

immagine che mostra la dicitura leet nel numero messaggi di SMF

Il leet (o anche l33t, 31337 o 1337) è una forma codificata di inglese caratterizzata dall’uso di caratteri non alfabetici al posto delle normali lettere (scelte per la semplice somiglianza nel tratto) o piccoli cambi fonetici.
Il termine ha origine dalla parola “élite”, in inglese di pronuncia simile a “leet”, e si riferisce al fatto che chi usa questa forma di scrittura si distingue da chi non ne è capace.

Se si arriva a 100.000 (errata corrige nei commenti: 1.000.000, grazie a Filippo per la segnalazione) messaggi dovrebbe apparire I’m a Geek, se qualcuno ci riesce mi faccia sapere :-) .

Un altro simpatico Easter Egg contenuto in SMF è about:unknown, che assomiglia molto all’about:mozilla di Firefox :-) . Per trovarlo basta aggiungere ?action=about:unknown all’url del forum, ad esempio questa è la pagina del forum di MozillaItalia:

The Book of Unknown, 4:16

And it came to pass that the unbelievers dwindled in number and saw rise of many proselytizers, and the opposition found fear in the face of the x and the j while those who stood with the something grew stronger and came together. Still, this was only the beginning, and what lay in the future was unknown to all, even those on the right side. from The Book of Unknown, 4:16

In questa discussione. ne potete trovare altri, sempre relativi a SMF.

Technorati Tags: , , ,

Come implementare la copia del testo usando Javascript + Flash (cross browser)

AGGIORNAMENTO: con il nuovo aggiornamento a Flash 10 il metodo proposto in questo articolo smette di funzionare. Sono state infatti introdotte delle restrizioni di sicurezza che non permettono più l’attivazione via Javascript di uno script Flash, per farlo funzionare è necessario inserire un pulsante che attivi lo script Flash mediante un’azione diretta dell’utente (ad esempio mediante clic su un pulsante).
Ulteriori info: Quasimondo.com

Ringrazio ssjx per la segnalazione.

Vediamo come è possibile implementare una funzione per la copia automatica in clipboard del contenuto di una stringa, la cosa può tornare utile per far selezionare direttamente all’utente delle parti di testo e copiarlo senza dover usare la combinazione CTRL-C. A me è servita solo per aggiornare il mio userscript che inserisce il codice HTML valido nelle pagine di Youtube, in questo modo basta selezionare il box dove si trova il codice ed incollarlo sul proprio editor HTML :-) , any suggestions about errors in my poor english are greatly appreciated :-D

Usando Javascript la cosa non è possibile, molti browser infatti, impediscono, per ragioni di sicurezza, l’accesso alla clipboard via Javascript. Se ci si limitasse ad IE invece, sarebbe possibile ottenere la cosa utilizzando il solo Javascript, se si vuole invece fare una cosa cross-browser è necessario utilizzare uno script in Flash. Tutto sommato Flash è i plugin più popolare, molto probabilmente la maggioranza degli utenti lo ha installato e quindi non ci dovrebbero essere grossi problemi.

Logo di Adobe Flash

Qui di seguito riporto la tecnica da usare per implementare la funzione copyToClipboard e il metodo di utilizzo, la funzione è leggermente modificata rispetto all’originale, queste sono le modifiche che ho apportato:

  • rimossa la parte di codice relativa a IE (che permette di suo di inviare testo alla clipboard), dovrebbe comunque funzionare se il plugin Flash è installato (io non ho il plugin di Flash in IE, quindi servirebbe verificarlo :-P );
  • l’originale permetteva solo la copia di testo inserito all’interno di tag INPUT (accettava l’oggetto come parametro), la mia versione invece accetta una stringa come input :-) ;

La funzione originale è possibile l’abbiate vista all’opera su Photobucket o su Urltea (prima di capire che sfruttava Flash avevo una mezza idea di aprire un bug su Bugzilla :-P ), quella modificata la potete vedere all’opera su questa pagina selezionando il codice della funzione inserito nel tag PRE (ho preparato una pagina a parte perchè non voglio caricare lo script sulla pagina del post).

Innanzitutto, bisogna scaricare il file _clipboard.swf, che potete trovare al link inserito a fine post. Il file è distribuito con licenza GPL (non da me ma dall’autore), quindi lo potete usare come meglio credete :-) .

I’ve uploaded the SWF file that you can use in your own webpage.

This software is licensed under the GPL so you can take this solution, change it, whatever, free.

Una volta uploadato il file _clipboard.swf sul vostro spazio Web (non usate quello caricato sul mio server, grazie!) inserite il percorso del file nella variabile clipboardswfpath e richiamate la funzione all’interno della pagina in cui desiderate utilizzarla passandogli come argomento una stringa che verrà copiata nella clipboard del visitatore.

	copyToClipboard(document.getElementById('input_id').value);
	

per un tag PRE (e probabilmente per quasi tutti gli altri):

	oggetto=document.getElementById('id_tag_pre');
	range = document.createRange();
	range.selectNodeContents(oggetto);
	copyToClipboard(range);
	

per IE usate getElementById(‘mypre_id’).innerText.
Ecco la funzione:


	function copyToClipboard(texttocopy)
	{
		  var clipboardswfpath="indirizzo_file_SWF";
		var flashcopier = 'flashcopier';
		if(!document.getElementById(flashcopier)) {
			var divholder = document.createElement('div');
			divholder.id = flashcopier;
				document.body.appendChild(divholder);
	    }
		document.getElementById(flashcopier).innerHTML = '';
		var divinfo = '<embed src="'+clipboardswfpath+'"  FlashVars="clipboard='+encodeURIComponent(texttocopy)+'" width="0" height="0"></embed>';
		document.getElementById(flashcopier).innerHTML = divinfo;
	}
	

Purtroppo non è possibile, come da suggerimento che ho avuto su userscript.org inserire il file SWF come stringa di caratteri usando un data link, al momento i browser non supportano.

Come piccola considerazione finale, vorrei far notare a tutti quanto possa influenzare la “sicurezza” di un browser l’utilizzo di un plugin. Se, escludendo IE, nessun altro browser si fida a dare accesso in scrittura alla clipboard un motivo deve pur esserci, il fatto che avendo il plugin Flash installato si possa “raggirare” questa restrizione dovrebbe far riflettere. Certo, poter accedere alla clipboard permette alle applicazioni Web maggiori funzionalità ma a discapito, forse, della sicurezza. Rassicuro tutti, dicendo che nemmeno Flash dà accesso alla clipboard in lettura :-P .

Ringrazio ssjx/Engelium che mi ha fatto interessare all’argomento :-)

Fonte: Clipboard Copy.

Technorati Tags: , , ,

Blogbabel, è la fine ?

Oggi stavo, come al solito, guardando il feed RSS di Blogbabel e vedo che non funziona, incuriosito ho cercato di caricare la homepage (il feed RSS è creato via Dapper e pensavo il problema fosse dovuto al server di Dapper, ogni tanto succede) e invece vedo questo messaggio:
Ci siamo stufati

BlogBabel è temporaneamente sospesa.

Ci siamo stufati dell’arroganza di alcuni blogger italiani, che pensano di poter ricattare un servizio offerto alla comunità e al grande pubblico, e non perdono occasione per trasformare qualsiasi discussione in un litigio da riunione di condominio.

In particolare, grazie a [.......], e gli altri che continuano a non capire che un motore di ricerca ha poco a che fare con la licenza d’uso dei contenuti. Vi manca BlogBabel? Parlatene con loro.

Matteo che notoriamente è più equilibrato di me, mi suggerisce di riportare un messaggio che ho pubblicato poco fa nel gruppo di discussione pubblico. Eccolo:

Non so se [la sospensione] sarà temporanea o meno: l’idea di avere qualche testa calda che decide di farmi causa mi sconforta abbastanza, dopo tutto il tempo e le energie spese per fare BB, doverne impiegare altrettante (e soldi ovviamente) per difendermi dalle accuse di qualche megalomane mi sembrerebbe davvero un calcio nei denti…

Sinceramente non ho mai seguito con molto interesse i battibecchi stile bimbi dell’asilo sull’argomento, e quindi non so bene i motivi che hanno portato alcuni blogger ad una campagna anti blogbabel, questo post è solo di disappunto visto che a me il servizio offerto tornava molto utile. Non tanto per la classifica in sè (negli ultimi mesi devo essere sceso di circa duemila posizioni), ma piuttosto per l’ottima indicizzazione delle notizie dai blog italiani, peccato :-( .

Io ci mettevo pure i blogbabel tag a fine post ora mi toccherà cambiarli :-P .

Parere mio, se questo comportamento infantile facesse proseliti, può chiudere anche la blogosfera, chiusa per eccesso di stupidità ! (avevo scritto idiozia, ma avevo sbagliato termine :-P )

« Uno stupido è una persona che causa un danno ad un’altra persona o gruppo di persone senza nel contempo realizzare alcun vantaggio per sé o addirittura subendo una perdita »

(Carlo Maria Cipolla)

Technorati Tags: , ,

Search plugin per Google in Klingon

Visto che non sapevo che fare :-P , ecco due search plugin per usare Google localizzato in . Anche non conoscendo il Klingon, non dovrebbe essere difficile orientarsi fra le pagine di Google, visto che, anche senza localizzazione, si dovrebbe conoscere a memoria l’utilità delle varie voci.

Io consiglio di installare il secondo che utilizza la versione accessibile di Google (Google Beta Shortcuts), che permette di navigare molto più velocemente nella pagina dei risultati.

Per chi usa Firefox 3 (o SearchWord) le keyword sono rispettivamente: gkl per la normale ricerca in Google Klingon e gskl per la ricerca con Google Beta Shortcut, naturalmente rigorosamente in Klingon :-) . Enjoy !

Il logo usato come icona per il motore di ricerca viene da qui.

Già che ci sono segnalo altri due bei articoli, uno recente l’altro un po’ meno, per approfondire la questione: « Google: Easter Egg e scherzetti vari » che, in periodo pasquale e ormai prossimi al primo aprile, potrebbero avere un qualche interesse:

Una raccolta dei migliori Easter Egg e scherzetti fatti da quei simpaticoni di Google, il giochetto in Java del coniglietto alla presa con le uova è simpatico .-)

Se non volete aspettare le tre del mattino per vedere Nessie, potete seguire i consigli dati sul blog e applicare l’apposito foglio di stile :-)

Technorati Tags: , , , ,

Comparativa fra i server DNS di OpenDNS e quello del provider

Prendendo spunto da un articolo di Digital Inspiration, ho voluto mettere a confronto la velocità del server DNS del mio provider internet (Tele2) rispetto a quello di OpenDNS.

Siccome di mettere come prompt l’ora non mi convinceva affatto – troppo tempo perso a incollare la stringa per la query – ho fatto due file BATCH che prendono come input un qualunque dominio e restituiscono come output l’orario prima della query e l’orario dopo la query, la differenza è il tempo impiegato per risolvere l’indirizzo IP da parte dei due server DNS.

opendns.bat

@echo off
echo %time%
nslookup %1 208.67.222.222 > %temp%\tmp.txt
echo %time%
del %temp%\tmp.txt

tele2dns.bat ( dns1-it.swip.net)

@echo off
echo %time%
nslookup %1 193.12.150.2 > %temp%\tmp.txt
echo %time%
del %temp%\tmp.txt

Facendo una ventina di query, a orari diversi, sembra effettivamente che il server DNS di Tele2 sia più veloce di quello di OpenDNS (circa 5/10 centesimi di secondo in meno), ma, ho ottenuto persino risultati in cui questo comportamento “medio” veniva stravolto e il server di OpenDNS era più prestante nella risoluzione dell’indirizzo IP. Il tempo impiegato per la risoluzione degli indirizzi va dai quattro ai sette decimi di secondo, quello di Tele2 mediamente impiega cinque decimi di secondo, quello di OpenDNS ne impiega circa sei.

Secondo me, troppi fattori in gioco per azzardarsi a fare grafici e comparative di vario genere, ecco uno screenshot di un caso limite dove il server di Tele2 sembra addormentato: più di un secondo contro i 47 centesimi di quello di OpenDNS (meno della metà):

Screenshot del prompt dei comandi che mostra un caso limite: 47 centesimi per OpenDNS e oltre 100 per quello di Tele2

In media il server DNS fornito dal provider ( ele2 nel mio caso) sembra essere più prestante.

Quindi, visto che un decimo di secondo è relativamente insignificante come differenza, usate il server che vi pare :-) , se poi volete fare ancora prima, scaricate ShowIP e modificate il file HOSTS. del vostro sistema operativo.

Fonte: Digital Inspiration.

Technorati Tags: , , ,

Songza: ottimo motore di ricerca e jukebox per ascoltare la propria musica preferita online

Songza è un ottimo motore di ricerca e jukebox per cercare ed ascoltare le proprie canzoni online. Ci sono davvero un sacco di brani disponibili anche di artisti nostrani e l’interfaccia utente è davvero ben fatta.

Il progetto è di Humanized, una piccola azienda software che è specializzata in usabilità e che produce l’ottimo Enso, ora freeware e del quale parlerò in un prossimo post. Fra l’altro, Mozilla ha assoldato alcuni sviluppatori di Humanized per migliorare l’usabilità dei propri prodotti, magari ci si potrebbe aspettare ben presto un’estensione che metta in pratica quanto descritto dal responsabile del design di Mozilla, Alex Faaborg, in questointeressante articolo di Mozilla Labs.

E’ inoltre disponibile un search plugin da aggiungere alla barra del nostro browser preferito :-) . Da provare !

Chi conosce questa ?

Mi scuso con chi ha visto la prima versione di questo post, il fatto è che WP ha aggiunto un po’ di new line nel codice di embedding del player.

Technorati Tags: , , , , , ,

Feed RSS per le ricerche di Blogbabel e Bloglines sottoforma di Search Plugin

Visto che in Firefox 3 le ricerche rapide potranno essere effettuate iindicizzando i vari motori di ricerca installati, senza bisogno di aggiungere dei segnalibri parametrici, ho deciso di aggiornare tutti i miei segnalibri che utilizzavo allo scopo, trasformandoli in Search Plugin ed indicizzandoli opportunatamente. Quasi tutti sono ottenuti usando OpenSearchFox, una comoda estensione che permette di creare un search plugin direttamente dal form nella home page del motore. Tutti tranne quelli di Blogbabel e Bloglines perchè in questi due casi preferisco i risultati della ricerca sottoforma di feed RSS, in modo da poterli sottoscrivere :-)

Sottoscrivendo i feed per argomento di interesse è possibile avere tutte le notizie aggregate provenienti dai blog italiani con Blogbabel e da feed RSS generici usando Bloglines. Se state cercando notizie fresche questi due motori di ricerca sono da preferirsi all’insuperabile Google. Il feed RSS di Blogbabel è stato creato usando Dapper (migliorato rispetto alla vecchia versione postata in precedenza), quello di Bloglines usando le API interne. Ovviamente, visto che la pagina dei risultati di Blogbabel viene prima processata da Dapper, è più lenta a caricarsi, altrettanto ovviamente se il sito di Dapper è down il feed non sarà disponibile :-P . Questi sono i due motori di ricerca:

Favicon di BlogbabelInstalla il search plugin per Blogbabelt

Favicon di BloglinesInstalla il search plugin per Bloglinest
Favicon di BloglinesInstalla il search plugin per Bloglinest (IT)

Questi sono due esempi della pagina restituita cercando “Firefox”:

Favicon di BlogbabelEsempio di ricerca con Blogbabel

Favicon di BloglinesEsempio di ricerca con Bloglines

Fra i risultati della prima ricerca dovrebbe apparire anche questo post :-D , fra i risultati della seconda: no, purtroppo :-(

Per Bloglines ho anche la versione inglese, ma per pigrizia non la metto :-P , chiunque fosse interessato può lasciare un commento o modificarsi a mano il file XML (basta togliere ql=it).

Io ne ho verificato il funzionamento con Firefox ma dovrebbero potersi installare anche con IE7. . Mi sembra che Opera non supporti il formato OpenSearch, ma se qualcuno mi dice come fare un plugin per Opera, proverò a crearne uno ad hoc. I due motori sono già predisposti per supportare le keyword: bb per Blogbabel e blit per Bloglines, naturalmente si possono usare solo con Firefox 3, per usarle con firefox 2.0.x è necessario installare SearchWord.

La pagina dei risultati è in formato XML, il che significa che è pura, senza avvisi pubblicitari (spero che nessuno se l’abbia a male).

Anche se qualche blogger ha deciso di togliersi da Blogbabel (giuro non ne capisco il motivo) resta il miglior motore di ricerca per la blogosfera italiana. Anzi , se mi funziona, ho modificato il Simple Tags per inserire i tag di Blogbabel in luogo di quelli di Technorati.

PS: con IE6 si vedono le icone accanto ai motori di ricerca ?

Technorati Tags: , , , , ,