Warning: Creating default object from empty value in /membri/ragnarokkr/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156

Warning: Creating default object from empty value in /membri/ragnarokkr/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156

Warning: Creating default object from empty value in /membri/ragnarokkr/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156

Warning: Creating default object from empty value in /membri/ragnarokkr/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156

Warning: Creating default object from empty value in /membri/ragnarokkr/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156

Warning: Creating default object from empty value in /membri/ragnarokkr/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156
Estensioni | Ragnarøkkr's Workshop

Guida

Nel blog è possibile leggere anche gli articoli provenienti dal mio vecchio sito Ragnarøkkr's Blog (categoria vecchi articoli).

Se desideri leggere l'articolo originale, clicca sul titolo del post.

Se vuoi leggere l'articolo direttamente da questo blog, clicca sul link accanto aContinua a leggere in fondo al riassunto dell'articolo.

Antipixel

  • BlogItalia - La directory italiana dei blog
  • Il Bloggatore
  • Smilla Magazine
  • Bloggers - Meet Millions of Bloggers
  • OnePlusYou Quizzes and Widgets
  • OnePlusYou Quizzes and Widgets

Advertise




Sito affiliato al network

Maruko [マルコ] Media

Altri siti affiliati al network

iNaSlice

Gestire progetti con Gantter e Google Docs

Gantter Project ManagementQuanti per lavoro hanno avuto bisogno di un programma che permettesse di organizzare tutte le risorse (tempo, personale, collaboratori esterni, ecc…) in gioco, nello sviluppo di un sito web, applicazione, o altro progetto, ma ha sempre avuto remore nell’acquistare l’applicazione di project management leader nel mercato targata Microsoft?

Continua a leggere Gestire progetti con Gantter e Google Docs

Meemi – Glass e Groups per personalizzare il famoso social-network tutto italiano

Screenshot di Meemi con stile ed estensione applicati

Screenshot di Meemi con stile ed estensione applicati

INTRODUZIONE

Famoso social network tutto italiano, Meemi.com di Enrico Scognamillo a.k.a. @capobecchino, suo creatore, non è solo un luogo dove le persone si registrano per pubblicare qualcosa e basta. Per quello ci sono già tanti altri servizi più o meno famosi e validi. No. Meemi è un luogo dove la gente – le persone – si ritrovano per condividere idee, pensieri, stati d’animo, passioni e sentimenti, e trovano sempre qualcuno disponibile ad ascoltare e dare un consiglio, un parere, una parola di conforto. Insomma, una grande, vasta famiglia, piena di sfaccettature e di colori, composta da realtà varie e differenti. Dal ragazzo 15enne, al padre di famiglia, passando per il giovane in carriera, il programmatore e il web designer, ma qui gli esempi si sprecherebbero per la quantità e qualità delle persone che si possono trovare in questa grande piazza dove tutti si ritrovano ogni giorno, per stare in compagnia.
E dopo questa doverosa introduzione, veniamo al sodo :-)

PERSONALIZZAZIONE

In attesa della nuova versione di Meemi, l’attuale interfaccia è molto semplice ed essenziale, senza inutili fronzoli, e molto ben curata. Tramite le impostazioni del proprio account è possibile personalizzare parte della grafica (lo sfondo, i colori, il proprio avatar ed alcuni altri elementi), ma non è (per il momento) possibile agire su altre caratteristiche degli elementi dell’interfaccia. Ecco che qui, entra in gioco la prima estensione dell’articolo, e cioè Meemi Glass.

MEEMI GLASS

Meemi Glass, nella sua ultima versione (la 0.12), modifica parte dell’interfaccia, sia nell’aspetto che nella posizione/dimensione di alcuni elementi. Questa estensione è compatibile con l’add-on Stylish per Chrome e Firefox, oppure può essere installata come script utente, direttamente dal sito dell’estensione.

Ecco la caratteristiche salienti:

  • Barra delle notifiche verticale e fissa sulla pagina
  • Numeri sulle icone di notifica ingranditi al passaggio del mouse
  • Sfondo aree dell’interfaccia, color bianco opaco al 50%
  • Effetto ombra per tutte le aree dell’interfaccia
  • Area dei meme, evidenziata con aumento dell’opacità all’80% e bordo con bagliore per una migliore visualizzazione, al passaggio del mouse
  • Icone avatar anonime nascoste per salvare spazio
  • Miniature degli avatar evidenziate da un bagliore al passaggio del mouse
  • Sidebar ridotta in larghezza per adattarsi alla nuova posizione della barra delle notifiche
  • Pubblicità ridimensionate per adattarsi alla sidebar (è noto ancora un problema di ridimensionamento con alcune pubblicità in flash)

MEEMI GROUPS

Meemi Groups, è un’estensione per Internet Explorer, Firefox, Chrome/Chromium e Opera, nata per venire in contro alle necessità di alcuni utenti di Meemi, i quali, avendo necessità di poter comunicare uno stesso messaggio a più di una persona contemporaneamente, si trovavano spesso a dover fare copia e incolla da un file di testo al corpo del messaggio, per non dover tutte le volte riscrivere uno per uno il nome degli utenti interessati.

Queste le caratteristiche dell’estensione, a seguire il video tutorial dell’estensione:

  • Aggiunta di un link New Group a fianco dei link Twitter e Draft
  • Aggiunta di una lista a comparsa nella sezione Opzioni dalla quale scegliere tra i gruppi creati
  • Possibilità di aggiungere, inserire e rimuovere uno o più gruppi con un solo clic
  • Ad ogni gruppo è assegnabile un nome che lo identifica
  • Sono supportati i gruppi anche nella sezione dei messaggi privati
  • Memorizzazione persistente dei dati, grazie all’uso di localStorage di HTML5
  • Ora compatibile con IE (richiede l’add-on Trixie), Firefox, Chrome/Chromium e Opera.

Le estensioni sono attualmente alla versione 0.12 per Meemi Glass, e 0.1.12 per Meemi Group, e sono testate e funzionanti. Si fa notare che è imminente il rilascio della nuova versione di Meemi, e quindi presto non saranno più utilizzabili, sino a che non ne verrà rilasciata una release aggiornata ovviamente.

P.S. per chi volesse scaricare lo sfondo che si vede nel video tutorial, ecco il link al quale può essere trovato.

EDIT: ho aggiornato versione, link e caratteristiche di Meemi Group.

Hack per per l’addon Update Notifier

Update NotifierPer tutti coloro che sono abituati ad utilizzare questo prezioso addon di Firefox, e, con l’aggiornamento all’ultima versione del browser (3.5) si vedono costretti a fare a meno delle sue funzioni, ecco un versione modificata di Update Notifier.

Update Notifier, è un addon per Firefox, il cui compito è verificare automaticamente la presenza di versioni aggiornate degli addon da noi installati nel Panda Rosso. Il problema è che attualmente queso addon non è più stato aggiornato (l’ultima versione è la 0.1.5.4 datata 5 giugno 2008), e non è quindi supportato dall’ultimissima versione di Firefox.

Cercando un po’ ho trovato che il problema, causa di questa incompatibilità, è dato dal fatto che l’estensione, non essendo più stata aggiornata, ha impostati come parametri richiesti per l’installazione che la versione del browser non sia maggiore della 3.0.*, rifiutando quindi ogni versione superiore.

Per ovviare al problema, in attesa che l’autore decida di aggiornare questo semplice ma utilissimo addon, potete scaricare da questo link una versione modificata che vi permette di utilizzare Update Notifier anche su Firefox 3.5.

EDIT: 05.07.09 – proprio oggi è stata rilasciata la nuova versione (0.1.5.5) compatibile con Firefox 3.5.

Xmarks per Chrome e problemi di sincronizzazione

XmarksSenz’altro Xmarks (anche conosciuto in precedenza con il nome di Foxmarks) è un’interessante applicazione che ci permette di essere sempre aggiornati con i nostri bookmarks preferiti e le nostre password, qualsiasi computer e/o browser stiamo utilizzando.

Quest’applicazione (o meglio, add-in o estensione, dato che di questo si tratta) è disponibile per i principali browser attualmente disponibili (Internet Explorer, Firefox, Chrome e Safari) e permette una quasi totale integrazione delle funzioni di sincronismo con tutti i browser citati. Scrivo “quasi” perchè, in effetti, non supporta il browser Safari su piattaforma Windows.

Chiarito questo, arriviamo all’argomento di questo articolo, e cioè il fatto che come me, molto probabilmente molti di voi, aggiornando Google Chrome all’ultima versione, si saranno ritrovati con l’estensione non più in grado di sincronizzare correttamente bookmark e password.

Qui di seguito vi descriverò i passaggi da effettuare per cercare di riportare “in vita” la nostra amica estensione:

  1. apriamo Google Chrome, cerchiamo l’icona della nostra estensione e richiamiamo il menu a comparsa cliccandoci sopra col pulsante destro del mouse;
  2. scegliamo la voce Opzioni dal menu;
  3. andiamo in Advanced, dove troveremo il gruppo Manual Overwrite, contenente due voci:
    • Force overwrite of server data, seguita dal pulsante UPLOAD
    • Force overwrite of local data, seguita dal pulsante DOWNLOAD
  4. clicchiamo su UPLOAD se vogliamo forzare l’aggiornamento dei dati presenti sul server remoto, con i dati attualmente presenti sul nostro computer; viceversa, clicchiamo su DOWNLOAD per ottenere l’effetto contrario;
  5. passiamo alla sezione Profiles, dove troveremo il pulsante Change Profile che dovremo cliccare per scegliere il profilo che desideriamo venga usato per la sincronizzazione, e diamo OK, se tutto va per il meglio, in breve la voce <none> cambierà nel nome del profilo scelto.

Et voilà!! Questo è tutto. Una volta fatte le operazioni descritte, dovremmo essere finalmente in grado di poter utilizzare di nuovo al meglio il nostro Xmarks.

jQuery Multimedia Portfolio 2.0 beta – Tutorial

Recentemente, ho avuto modo di poter utilizzare l’interessante Multimedia Portfolio nella sua nuova versione 2 beta, un plug-in per la famosa libreria jQuery, che ci permette di arricchire le pagine dei nostri siti, con un’accattivante quanto semplice – sia nell’utilizzo che nella preparazione del codice – galleria di immagini, ma non solo….

Multimedia Portfolio, è un plug-in che ci permette di aggiungere quel tocco in più alle nostre gallerie di immagini, dandoci la possibilità di mostrare anche video in formato FLV e direttamente da YouTube, e file audio MP3.

Il suo utilizzo è abbastanza semplice, anche se necessita di alcuni altri plug-in per jQuery, per poter funzionare correttamente. Il codice necessario al suo utilizzo è il seguente (con le opportune sostituzioni in caso di directory o versioni di libreria differenti):

<link rel="stylesheet" href="css/jquery.fancybox-1.3.0.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/multimedia-portfolio.css" type="text/css" media="screen" />

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.swfobject.1-0-9.min.js"></script>
<script type="text/javascript" src="js/jquery.multimedia-portfolio-2.0.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.0.pack.js"></script>

e prevede l’utilizzo, oltre alla libreria jQuery (ovviamente ;-) ), anche della libreria jQuery User Interface e dei plug-in per la gestione di: rotella del mouse (Mouse Wheel), filmati Flash (SWFObject), visualizzazione delle immagini (Fancy Box) ed ovviamente il plug-in questione (Multimedia Portfolio). Inoltre, è richiesto l’utilizzo di un paio di fogli di stile (i nomi dei file sono autoesplicativi) per l’aspetto della fancy box e del contenitore della galleria immagini, ed un paio di file SWF per la gestione dei player relativi a video e audio MP3.

Questo plug-in, funziona appoggiandosi ad una semplice lista non ordinata di elementi, che intendiamo andare a visualizzare nella nostra galleria, quindi prepariamo una lista di elementi:

<ul class="multimedia-portfolio">
<!-- Immagine -->
<li>
<a href="link-immagine" title="titolo-immagine">
<img src="link-miniatura" width="larg-miniatura" height="alt-miniatura" alt="" />
</a>
</li>
<!-- Filmato FLV -->
<li>
<a href="link-video" title="titolo-video">
<img src="link-miniatura" width="larg-miniatura" height="alt-miniatura" alt="" />
</a>
</li>
<!-- Audio MP3 -->
<li>
<a href="link-audio" title="titolo-audio" >
<img src="link-miniatura" width="larg-miniatura" height="alt-miniatura" alt="" />
</a>
</li>
<!-- Video da Youtube -->
<li>
<a href="http://www.youtube.com/watch?v=id-del-video" title="titolo-video">titolo-video</a>
</li>
<li>...</li>
...
</ul&gt

Come si può vedere, è sufficiente definire una lista non ordinata (<ul>) degli elementi che si desidera mettere a disposizione degli utenti, ed impostarne la classe a multimedia-portfolio. Fatto ciò, non ci resta che andare ad aggiungere una linea di codice JavaScript alla nostra pagina web, e cioè il classico:

<script type="text/javascript">
$(document).ready(function(){
$("ul.multimedia-portfolio").multimedia_portfolio({width: 500, baseDir: '.'});
});
</script>

Questo frammento di codice verrà solitamente posizionato alla fine della sezione <HEAD> della pagina web. Qui, dobbiamo prestare attenzione ai valori passati alla funzione multimedia_portfolio(). Il parametro width andrà a specificare la larghezza complessiva del contenitore delle immagini, mentre baseDir indicherà la directory nella quale cercare i file SWF (player_flv_maxy.swf e player_mp3_maxi.swf) precedentemente menzionati.

Et voilà! Il gioco è fatto…. beh, non proprio… dobbiamo ricordarci di effettuare alcune modifiche ai fogli di stile precedentemente importati, se la struttura delle directory del vostro sito fosse differente da quella prevista dal plug-in. Quindi, dobbiamo prima assicurarci che nel file multimedia-portfolio.css, i seguenti elementi abbiano impostato correttamente l’attributo background-image, in modo che punti alla giusta directory:

.portfolio-bg-left, .portfolio-bg-right { ... }
.portfolio-bg-bottom-left, .portfolio-bg-bottom-right { ... }
.portfolio-container .portfolio-object-border { ... }
.portfolio-container .masque-left, .portfolio-container .masque-right { ... }
.ui-slider-handle { ... }

Quindi dobbiamo controllare che nel foglio di stile jquery.fancybox-1.3.0.css, i seguenti elementi abbiano l’attributo background-image impostato sulla directory corretta:

#fancybox-loading div { ... }
#fancybox-close { ... }
#fancybox-title-over { ... }
#fancybox-title-left { ... }
#fancybox-title-main { ... }
#fancybox-title-right { ... }
#fancybox-left, #fancybox-right { ... }
#fancybox-left-ico { ... }
#fancybox-right-ico { ... }
#fancy-bg-n { ... }
#fancy-bg-ne { ... }
#fancy-bg-e { ... }
#fancy-bg-se { ... }
#fancy-bg-s { ... }
#fancy-bg-sw { ... }
#fancy-bg-w { ... }
#fancy-bg-nw { ... }

e, dato che Internet Explorer (croce e delizia di tutti i webdesigner) non poteva non renderci la vita difficile, assicuriamoci che l’attributo src del filtro progid:DXImageTransform.Microsoft.AlphaImageLoader, presente della sezione in fondo al file, dedicata ad Internet Explorer, punti anch’esso alla directory corretta.

Terminati questi passaggi, obbligatori, ma piuttosto semplici, avremo finalmente la nostra bella galleria multimediale funzionante.

Come al solito, buona programmazione e buon divertimento a tutti! ;-)