Undolog.com

A causa dei diversi rendering tra i vari browser, che vedono sicuramente Microsoft Internet Explorer in testa, bisogna sempre ricorrere ad artifizi particolari per applicare effetti che, ormai, dovrebbero rappresentare uno standard. I pluri-discussi bordi arrotondati sono un classico esempio del “disastro” prodotto dalla completa incapacità di realizzare uno standard serio sul rendering delle pagine HTML/CSS. Esistono in rete numerosissime soluzioni che permettono di ottenere “effetti” (effetti che esonerano dall’HTML attuale come bordi arrotondati, effetti ombra, riflessioni, etc…) con patch sui fogli di stili, particolari trucchi con l’uso di div innestati, librerie Javascript, uso delle canvas, etc…
A titolo puramente didattico vorrei illustrare un’ulteriore tecnica (cross-browser) per applicare dei bordi arrotondati a delle immagini:

Demo e sorgenti

• Progetto completo su Google Code
• demo
• jquery.roundborders.js
• immagine in formato Photoshop
• immagine in formato PNG

Continua a leggere… »

Post correlati

• Internet Explorer 7 (IE7): PNG e CSS ancora lontani? (0)
• Web2.0: Gran Paradiso-Firefox 3.0 e Apollo (2)
• Resa nel ridimensionamento delle immagini sui browser (5)
• CSS3: qualcuno ha visto Internet Explorer? (3)
• Come sopportare IE6 e vivere felici (3)

In questo tutorial vedremo come creare una procedura di Login personale, utilizzando anche funzionalità Ajax tramite jQuery. Ci sono vari metodi per personalizzare il login di Wordpress, ad esempio tramite l’uso di hook e filtri (add_action(), add_filter()). Noi qui useremo una procedura più a basso livello, anche se ci interfacceremo comunque al Kernel di Wordpress. Inoltre faremo in modo di convalidare un utente tramite la dupla email/password.

Perchè realizzare un proprio login?

• In alcuni contesti può ritornare uitle avere il massimo controllo sulla pagina di login, per proporre un layout personalizzato ai nostri utenti registrati. Inoltre si può arricchire la pagina con informazioni utili, dal un logo al classico “Password dimenticata?”
• Per permettere l’accesso tramite l’email (come nell’esempio qui trattato) al posto dello user_login standard di Wordpress
• Per avere la possibilità di inserire un pannello di login nella sidebar del nostro Blog
• E infine, per avere uno scheletro - ed un’idea - per un ottimo Plugin

Ambiente

Nel nostro esempio/tutorial lavoreremo sulla root di Wordpress all’interno di una cartella mylogin. Creiamo due file php all’interno di questa cartella: index.php e logon.php. Il primo conterrà l’interfaccia del nostro login, con tutte le funzioni Javascript/jQuery che ci servono. Il secondo file, logon.php, conterrà il codice per la validazione dell’utente. Creiamo poi una cartella css e dentro questa un file layout.css e una cartella images. All’interno della cartella images inseriremo un classico Ajax loader: createlo online su AjaxLoad.info. Alla fine dovreste avere:

• mylogin
• index.php
• logon.php
• css
• layout.css
• images
• ajax-loader.gif

Continua a leggere… »

Post correlati

• Wordpress: come scrivere un reply to comment usando jQuery (13)
• Aptana IDE update: milestone 9 (0)
• Tutti i cloni di Lightbox in una matrice dinamica (7)
• Sviluppare applicazioni Adobe AIR con Aptana IDE (5)
• Snipplr code 2.0: frammenti (snipp) di codice utile (0)

Non ho capito bene se è un bug o una cosa voluta, comunque sia rimane il fatto che il metodo animate() di jQuery non funziona con alcuni attributi CSS, tra cui background-color (che nella versione camelize è backgroundColor). Ad esempio il seguente codice non produce nessun effetto:

Per risolvere il problema è necessario installare un'estensione: jQuery Color Animations. Questa permette di eseguire "animazioni" sull'attributo backgroundColor e non solo:

• backgroundColor
• borderBottomColor
• borderLeftColor
• borderRightColor
• borderTopColor
• color
• outlineColor

Post correlati

• jQuery: bordi rotondi sulle immagini per sovrapposizione (0)
• Wordpress: modifcare AdminBigWidth per gli sviluppatori (1)
• Wordpress: come scrivere un reply to comment usando jQuery (13)
• Snipplr code 2.0: frammenti (snipp) di codice utile (0)
• Wordpress: come creare passo passo un proprio login (9)

Recentemente Cristiano Fino ha rilasciato un utile Plugin per Wordpress in grado di aggiugere due link ad ogni commento di un post (forse ne avete uno simile installato, visto che nella directory di Wordpress.org ne ho travati un paio, tuttavia essendo un software italiano sarebbe il caso di onorare l'ottimo lavoro fatto da Cristiano). Questi Link (reply & quote) permettono di rispondere e/o quotare l'autore di un commento, eseguendo quella noiosa operazione di inserire il carattere at (@) per indicare a chi ci si rivolge. In questo tutorial voglio illustrare - per gli utenti medio-esperti - il modo di aggiugere queste due funzionalità "a mano", senza ricorrere all'istallazione di nessun Plugin. Inoltre sfrutterò le capacità di jQuery per la parte in Javascript. La tecnica che espongo è la medesima che ho usato per introdurre questa funzionalità in questo blog.

Nota: l'uso di un plugin è la miglior soluzione per chi tende a modificare spesso il proprio template Wordpress o, al limite, ha in previsione di farlo. Questo tutorial vuole solo mostrare come eseguire interventi mirati all'interno del codice Wordpress ed è dedicato ai più curiosi.

Modifica del file comments.php

La prima modifica che apportiamo è quella di inserire i link "reply" e "quote" all'interno di ogni commento. Per fare questo editiamo il file comments.php situato nella cartella del nostro tema. Questo file contiene tutte le istruzioni che consentono di visualizzare i commenti alla fine di un post. La sezione che ci interessa (che può variare leggermente da tema a tema) è il loop di creazione dei vari commenti, riconoscibile da:

Continua a leggere... »

Post correlati

• Wordpress: come creare passo passo un proprio login (9)
• jQuery: bordi rotondi sulle immagini per sovrapposizione (0)
• Wordpress: scrivere un logout personale (1)
• Wordpress: modifcare AdminBigWidth per gli sviluppatori (1)
• Wordpress: rimuovere i menu dell’amministrazione (5)

Come tutte le librerie di questo tipo anche jQuery permette di estendere le sue funzionalità base tramite dei veri e propri plugin. Rispettando le regole del suo funzionamento, cioè restituiendo sempre un puntatore all'elemento selezionato o a jQuery stessa, è possibile scrivere un plugin con poche righe di codice. Prendiamo come esempio il codice proposto in jQuery contro tutti: un benchmark con 5 browser che era (dopo la correzione segnalata da Luca):

Continua a leggere... »

Post correlati

• Tutti i cloni di Lightbox in una matrice dinamica (7)
• Light Library: da Slimbox a Shadowbox, gallerie in Javascript (12)
• Light gallery: Lightview 2.0.0_rc1 (1)
• DatePicker con Prototype e Scriptaculous (0)
• Accessibilità e Usabilità: unobtrusive Javascript (4)

Un buon sviluppatore non ha problemi a passare da un linguaggio di programmazione ad un altro. La scelta di concentrarsi su un particolare linguaggio, framework o ambiente di sviluppo, è dettata più dalla disponibilità di tempo e dal tipo di lavoro che si svolge. Tuttavia, un fattore importante che può influire sulla scelta di "framework" simili, è la simpatia o l'affezione che può maturare con il tempo.
Nello specifico, ho voluto analizzare alcuni - non certo tutti - framework Javascript disponibili oggi, anche perchè "consigliato" a dare un'occhiata soprattutto a jQuery.
I creatori di mootools (uno dei più noti framework Javascript) hanno reso disponibile uno strumento per eseguire un test di velocità e validità su cinque noti framework Javascript: Slickspeed. Questo test, dagli esiti non affatto scontati, è importante in quanto i framework Javascript operano lato client, cioè vengono eseguiti dal nostro browser. È proprio per questo motivo che alcuni trovano Safari più rapido di Internet Explorer o Google Chrome più rapido di FireFox. Tuttavia ciò spesso dipende anche dal tipo di pagina che si sta visualizzando. Infatti può benissimo capitare che un particolare sito sia davvero più "veloce" se visualizzato in Safari, ma questo non significa che "tutti i siti" saranno più veloci con Safari! Ovviamente questo discorso è valido per qualsiasi altro browser.

Il benchmark

Nel test che ho effettuato con Slickspeed ho messo a confronto i browser disponibili sulla mia macchina (Windows Vista Utilmate 64bit - Intel core 2 quad a 2.4GHz con 8Gb RAM).
Purtroppo il test non sono riuscito ad eseguirlo con Internet Explorer 7, in quanto bloccava la macchina, andando anche fuori scala con i risultati! Ancora una volta complimenti Microsoft.
Ho crercato di mantenere identico lo stato del PC durante l'esecuzione dei test, aprendo singolarmente i browser e non mandando nessun altro processo in esecuzione.

Nota: se avete voglia di eseguire anche voi uno o più di questi test, potete commentare questo post in caso di "curiosi" e diversi risultati.

Google Chrome è risultato davvero veloce, con un valore di 68 (media) nell'esecuzione dei test con jQuery. Il più lento, invece, è risultato Flock, nonostante provenga dalla stessa "madre" Mozilla. Questo pessimo risultato di Flock è davvero curioso visto il suo taglio Social Network; perchè sono proprio i Social Network Web 2.0 a sfruttare molti dei framework Javascript disponibili, così da fornire un'esperienza di navigazione ed interazione davvero innovativa.
A sorpresa Opera batte FireFox e anche di un bel po', ottenendo addirittura un 74 nell'esecuzione di Dojo! FireFox e Safari, tutto sommato, si assomigliano, con Safari più rapido nei test con Mootools e jQuery.

Quale framework scegliere?

Se non badiamo ai test sulla velocità di esecuzione e non ci preoccupiamo della dimesione in Kbytes dei framework stessi, la risposta potrebbe essere "quello che più vi piace" o, se preferite, "quello che conoscete meglio o vi risulta più armonico con il vostro stile di programmazione".
In ultima analisi questi framework si assomigliano un po' tutti (vedi l'uso del $ ad esempio), nonostante alcune importanti e sostanziali differenze che possono saltare agli occhi di un esperto o nell'uso davvero spinto di una particolare libreria. In linea di massima, infatti, tutto quello che si può realizzare con jQuery, ad esempio, lo si può fare benissimo con mootools o prototype! Se jQuery vanta una sintassi estremamente compatta, in quanto tutti i metodi restituiscono sempre l'oggetto base jQuery, creando così file interminabili di oggetto.metodo().metodo().metodo()... non è detto che questo sia a tutti i costi un punto di forza, soprattutto per chi dovrà fare il debug!
Librerie come prototype.js peccano forse in assenza di effetti grafici, anche semplici, costringendo lo sviluppatore ad implementare spinoff come scriptaculous.js, pesanti e distanti dalla libreria inizialmente scelta.

Un esempio

Proprio quest'ultimo motivo, ad esempio, mi ha portato a sostituire l'accoppiata prototype/scriptaculous con jQuery per realizzare i pannelli interattivi/animati qui nella sidebar di undolog.com. In effetti, usando anche Google API per importare le librerie, è uno spreco caricare tutta la libreria scriptaculous per uno slideDown e slideUp. A titolo informativo e di esempio, ecco com'era il codice Javascript con l'accoppiata prototype/scriptaculous:

e com'è adesso con jQuery:

Tutto sommato, a ben guardare, non mi sembra ci sia moltissima differenza! Ma come dicevo prima... è questione "anche" di gusto personale.

Post correlati

• jQuery: bordi rotondi sulle immagini per sovrapposizione (0)
• Tutti i cloni di Lightbox in una matrice dinamica (7)
• Light Library: da Slimbox a Shadowbox, gallerie in Javascript (12)
• Light gallery: Lightview 2.0.0_rc1 (1)
• jQuery restyling (0)

Proprio in questi giorni (sotto consiglio...) stavo dando un'occhiata a jQuery, un'ottima libreria sullo stile di prototype.js, scriptaculous.js, mooTools, per intenderci... ed ecco che oggi tutto il sito è stato completamente ridisegnato:

Ottimo inizio per allargare i miei orizzonti su questo tipo di librerie! Prossimamente pubblicherò qualche articolo interessante, soprattutto sulle differenze tra jQuery e le altre librerie "simili".

Post correlati

• Tutti i cloni di Lightbox in una matrice dinamica (7)
• Light Library: da Slimbox a Shadowbox, gallerie in Javascript (12)
• Light gallery: Lightview 2.0.0_rc1 (1)
• jQuery contro tutti: un benchmark con 5 browser (3)
• Accessibilità e Usabilità: unobtrusive Javascript (4)

È stata rilasciata la release candidate 1 (rc1) della versione 2.0 della libreria Javascript Shadowbox, di Michael J. I. Jackson, utilissima per aprire finestre dedicate alla visualizzazioni di vari tipi di media, da Flash a QuickTime a pagine HTML. In questa nuova versione troviamo:

• Il sito è più ricco di informazioni e include ora un wizard (sullo stile di mootools) per creare "al volo" un pacchetto della libreria personalizzato alle nostre esigenze
• Possibilità di usare un modulo standalone base, senza includere necessariamente - gli adattatori per le - librerie esterne come prototype.js, jQuery, etc...
• Miglioramenti alla gestione e realizzazione delle Skin
• Localizzazione

La libreria è disponibile anche su SVN all'indirizzo:

http://michaeljackson.googlecode.com/svn/trunk/shadowbox

Post correlati

• Web2.0: Gran Paradiso-Firefox 3.0 e Apollo (2)
• Web2.0: Adobe ci prova con Apollo? (2)
• Unobtrusive LightWindow 2.0 (0)
• Dove Javascript vince (1)
• Ajax senza HTTPRequest (2)

Google, in quest'ultimo perdiodo, ha rilasciato una moltitudine di strumenti dedicati agli sviluppatori, aggiornando di continuo i propri rilasci. Adesso stringe un accordo con i più diffusi framework AJAX, e non solo, per centralizzare la distribuzione delle librerie jQuery, prototype, script.aculo.us, MooTools e dojo!

In pratica è possibile accedere a queste librerie sfruttando le infrastrutture e la rete Google, con notevoli vantaggi in termini di velocità e sicurezza.

La velocità, nel caricamento, è garantita dalla stessa rete Google che, oltre a fornire di per se una struttura di server distribuita, permette (di default) il caricamento compresso (gzip/minify) delle librerie. Gli hosting Google più vicini alla richiesta saranno utilizzati per inviare il codice e, in caso di non raggiungimento o down temporaneo, la rete Google garantirà comunque l'invio del codice Javascript!

Continua a leggere... »

Post correlati

• Tutti i cloni di Lightbox in una matrice dinamica (7)
• Light Library: da Slimbox a Shadowbox, gallerie in Javascript (12)
• Light gallery: Lightview 2.0.0_rc1 (1)
• jQuery contro tutti: un benchmark con 5 browser (3)
• Camelize, CamelCase (0)

Qualcuno potrebbe dire -  e non a torto - basta! Di librerie Javascript (Unobtrusive - non intrusive, o parzialmente) per gestire immagini e gallerie ce ne sono davvero tante. Comunque sia ecco la lista, con pregi e difetti, delle migliori che ho provato.

SLIMBOX 1.41

Estremamente minimale, 7K (alla versione 1.41), richiede mootools per funzionare. Come indicato sulla Home page è un vero e proprio clone grafico di Lightbox, che vedremo più sotto. Sinceramente, a parte l'estrema compattezza della libreria, non possiede caratteristiche peculiari. Sullo stesso sito, comunque, è possibile trovare anche uno script per generare riflessioni runtime... al limite può essere utile questo

Voto: --6 - Home Page Slimbox, Home Page Reflection.js for MooTools

LIGHTBOX2

Una delle più note e semplici. Gestisce in questa release sono immagini (quindi non funziona con QuickTime, Flash o altro). Per il suo funzionamento richiede Prototype e Scriptaculous. Usa l'attributo rel per identificare i link delle immagini da processare:

Come le altre librerie che vedremo, supporta la modalità slideshow, inserendo tra parentesi quadre un qualsiasi identificativo in una serie di link/image:

Voto: 6 - Home Page Lightbox2

LIGHTWINDOW 2.0

Anche questa è abbastanza diffusa! Dopo tutto come capire qual'è la più usata? ;). Comunque sia è estremamente completa  e versatile. Sul sito campeggia la richiesta di donazioni per l'acquisto di un Mac... un tantino invasiva e pressante... Comunque sia, come la precedente, per il suo funzionamento, richiede la presenza di Prototype e Scriptaculous. A differenza della precedente, tuttavia, questa permette di visualizzare moltisiimi tipi di file: dalle immagini, filmati QuickTime, filmati Flash, pagine HTML esterne e PDF. Di contro, utilizza vari attributi, alcuni facoltativi (author, caption e title) altri obbligatori (class e  params - per impostare il comportamento della libreria). Ad esempio, per visualizzare una gallery o slideshow usa l'attributo rel:

Voto: 8 - Home Page LightWindow 2.0

SHADOWBOX 1.0B

Nonostante sia alla versione 1.0 beta, questa è forse la libreria più completa, sia dal punto di vista funzionale sia per le librerie supportate. Per il suo funzionamento, infatti, è possibile scegliere tra una serie di framework, grazie a dei file "adapter" appositamente realizzati e fornite dall'autore:

• Yahoo! User Interface Library (yahoo, dom, event, anim)
• Ext (standalone, ext-core.js)
• Prototype + Scriptaculous
• jQuery
• MooTools (requires Fx.Styles and its dependancies)
• Dojo Toolkit (thanks Peter Higgins)

L'effetto visivo (configurabile tramite skin/css), poi, a differenza delle altre, è sicuramente più accattivante. Gli attributi usati sono solo il rel dove, al sue interno, trovano spazio tutti gli altri parametri di configurazione. Ad esempio, per realizzare una gallery, basta usare:

Se si desidera impostare qualche opzioni (vedi sito per la lista completa) basta usare la seguente sintassi:

Su Internet se ne possono trovare anche altre, come ad esempio Highslide JS. Anzi, se volete segnalarmi qualche altra libreria... Comunque sia, personalmente, preferisco Shadowbox per semplicità, scalabilità e cross-framework.

Voto: 9 - Home Page Shadowbox 1.0B

Post correlati

• Tutti i cloni di Lightbox in una matrice dinamica (7)
• Light gallery: Lightview 2.0.0_rc1 (1)
• Shadowbox assetURL: impostare il percorso delle immagini (2)
• Accessibilità e Usabilità: unobtrusive Javascript (4)
• Restyling: animazioni ed interattività (0)