2 aprile 2010

Come migliorare le performance del proprio sito con SmartOptimizer

scritto daMauro Accornero

web_performance

Sui tempi di caricamento delle pagine web si è discusso molto, l’argomento è senza dubbio importante sia per favorire la navigazione degli utenti sia per facilitare l’indicizazzione del sito.

In un mondo ideale tutti i siti dovrebbero pesare meno di 100kb complessivi, ottimizzare markup, css,  javascript e immagini, ridurre al minimo le richieste al server e molto altro ancora. Nel mondo reale i contesti sono variegati e talvolta non è possibile ottimizzare tutto l’ottimizzabile oppure anche le migliori procedure non danno i frutti sperati.

E’ quindi necessario muovere il proprio sguardo oltre le tecnologia lato client e cercare ulteriori soluzioni  nel lato server. Un normale ostacolo a questo pensiero è rappresentato dal fatto che non sempre abbiamo pieno accesso al server e ciò rende difficile settare il proprio spazio web in modo congruo.

Una semplice soluzione a questo problema è rappresentata da SmartOptimizer, progetto di Ali FarHadi, il miglioramento delle performance è reso possibile dall’impostazione personalizzata della compressione gzip sul server, il salvataggio della cache dei files e  la compressione e la concatenazione di script.

Per l’utilizzo è necessario possedere un server Apache con il modulo mod_rewrite abilitato (è il modulo di Apache che permette la definizione di regole da un file .htaccess) e php versione 4.3.0 o superiori.

Nel dettaglio la soluzione consiste in una cartella contenente alcuni files php e un file .htaccess. Gli scripts php si occupano della compressione di css e javascript, del salvataggio della cache e delle opzioni custom da impostare sul server, il tutto viene elaborato e rimandato al file .htaccess che permette l’impostazione di nuove regole nello spazio web.

L’utilizzo è molto semplice, una volta scaricata la cartella e il file .htaccess basta caricarli nel proprio spazio web e verificarne il funzionamento. Volendo è possibile utilizzare il file config.php per settare le diverse opzioni di ottimizzazione in base al contesto trattato.

Per eventuali dubbi su utilizzo ed installazione consiglio la pagina di documentazione e download sul sito di Ali FarHadi.

Un ulteriore consiglio per i test sull’ottimizzazione delle vostre pagine web è quello di utilizzare page speed sul vostro browser per meglio analizzare come vengono risolte le richieste al server e su quali contesti lavorare per miglirare i tempi di caricamento e rendering.

23 settembre 2009

Internet Explorer come Google Chrome con Google Chrome Frame

scritto daMauro Accornero

google_chrome_frame

A pochi giorni dal rilascio di 100000 account di test per Google Wave, l’azienda di Mountain View annuncia il rilascio di Google Chrome Frame, un plug in dedicato agli utenti che utilizzano Internet Explorer per ottimizzare la navigazione sul web senza modificare l’interfaccia del browser Microsoft.

Cos’è Google Chrome Frame?

Google Chrome Frame è il nuovo plugin progettato da Google per permettere agli utenti che usano Internet Explorer di usufruire a pieno delle potenzialità dei servizi Google (gmail, Google maps, Google Docs, Youtube ecc) mantenendo il loro attuale browser.

Questo plugin infatti non modifica in alcun modo l’interfaccia del browser ma permette di renderizzare le pagine con il motore di Google Chrome, migliorando notevolmente la navigazione per l’utente finale.

Tutto questo è stato possibile sfruttando lo switch per la versione di retrocompatibilità di Internet Explorer 8.

A cosa serve?

Grazie a Google Chrome Frame anche internet explorer può supportare le nuove tecnologie per il web come l’HTML 5 e i CSS 3. Inoltre, migliora notevolmente le prestazioni dei javascript, velocizzando la navigazione e l’utilizzo delle pagine web. Come ultimo aspetto riduce drasticamente i bug del browser Microsoft migliorando l’esperienza dell’utente durante la navigazione.

Perchè utilizzare Google Chrome Frame?

Da tempo ormai internet explorer limita il supporto per molteplici tecnologie web ed è ormai inevitabile che determinati servizi necessitino di queste tecnologie per funzionare. Google Wave per esempio non  sarà utilizzabile dagli utenti che ancora utilizzano internet explorer, i quali vedranno apparire un popup che offre il download di Google Chrome Frame o di un browser alternativo (firefox 3.5, safari 4 o google chrome).

Da tempo ormai sviluppatori e professionisti del web sono costretti a limitare il potenziale dei loro prodotti e a spendere tempo e lavoro a causa dello scarso supporto offerto dal browser Microsoft.

Anche Youtube ha annunciato da tempo l’utilizzo del tag video (non supportato da internet explorer) e molti sono i siti che da tempo propongono agli utenti l’utilizzo di un browser alternativo tra i molti esistenti per  garantire una migliore navigazione sul web.

Google Chrome Frame per gli sviluppatori

E’ possibile integrare nella pagina web un tag meta per forzare il rendering della pagina con Google Chrome Frame, nel caso l’utente non abbia installato il plugin su internet explorer verrà presentato un avviso che invita a scaricare il plugin o un browser alternativo.

E’ possibile anche utilizzare redirect in javascript e customizzare la soluzione a seconda delle esigenze.

Per maggiori informazioni invito a consultare la relativa pagina su Google code.

8 settembre 2009

91 bellissimi esempi di form creativi per ispirarvi

scritto daMauro Accornero

Da un po’ di tempo seguivo con interesse il sito http://www.1stwebdesigner.com/ tramite feed e soprattutto twitter.

Questa sera ho visto un buon post di venerdì 4 settembre, 91 esempi di form, graficamente avanzate ed utilizzate nei siti con ausilio di javascript (e conseguenti librerie) e css.

Un’ ottima galleria di riferimento su un contesto specifico. La progettazione grafica dei form rimane sempre complessa poichè i riferimenti di graphic design (cartaceo) rimangono limitati (moduli, coupon, cartoline) e sacrificano molto dell’aspetto estetico per favorirne la leggibilità e facilitarne l’uso (o la conversione che dir si voglia).

Di conseguenza al web designer deve applicare la grafica ad un contesto finora poco sfruttato ma molto presente sul web. Per ispirarvi e venir in soccorso nei momenti di blocco:

91 Esempi di form creativi per ispirarvi

3 settembre 2009

I migliori links della settimana

scritto daMauro Accornero

Ecco a voi un po’ di link delle ultime settimane, mi sono imbattuto in alcune web application interessanti e qualche nuova risorsa che mi hanno incuriosito. Buona visione!

Diagrammi e design

Web application per la realizzazioni di diagrammi e grafiche per la rappresentazione delle informazioni.

http://creately.com/

Web Software grafico

Se siete stanche dei soliti programmi di grafica (vettorial e bitmap) ecco delle ottime alternative online che non hanno nulla da invidiare alle attuali suite di software grafico.

http://aviary.com/
http://www.sumopaint.com/web/

Desktop environment

Praticamente un desktop, con relative applicazioni ma totalmente online, molto interessante.

http://eyeos.org/en/whatiseyeos

Online Wireframe Application

Web application per la creazione di mockup e wireframe, utili soprattutto per le feature di condivisione con altri utenti.

http://hello.hotgloo.com/
http://iplotz.com/
http://www.balsamiq.com/products/mockups

Cms

Content management system di nuova generazione, benchè all’ombra dei moderni cms open source sembra abbiano un buon potenziale.

http://www.konductor.net/
http://www.concrete5.org/

Condivisione di presentazioni multimediali

Sito di condivisione di presentazioni multimediali, con numerose possibilità di customizzazione e condivisione per l’utente finale.

http://slidesix.com/

Cms per flash

Se realizzate siti in flash e necessitate di un cms pensato per questa tecnologia, iniziate a valutare queste due alternative molto appetibili.

http://www.yooba.com
http://www.flashmoto.com

10 agosto 2009

Integrare le API di Youtube con PrettyPhoto

scritto daMauro Accornero

esempio_youtube_api

L’integrazione del video nei siti web è ormai diventata una pratica comune, l’inserimento in una pagina web è molto semplice soprattutto se supportato da un servizio che ospita e gestisce i contenuti video come Youtube.

Nell’articolo di oggi mostrerò una semplice integrazione tra le Youtube API e il plugin per JQuery Prettyphoto per ottenere una galleria di video in stile Youtube da inserire nella pagina del proprio sito.

Le Youtube API non sono altro che librerie messe a disposizione degli sviluppatori per gestire con semplicità i contenuti di Youtube su un sito esterno. E’ possibile integrarle con diversi linguaggi e tecnologie, nell’esempio di oggi vedremo com’è possibile utilizzarle con javascript. Per ulteriori informazioni è possibile consultare la relativa documentazione.

PrettyPhoto è un plugin per jquery simile in tutto e per tutto a Lightbox (per prototype e scriptaculus) ulteriori informazioni sono disponibili sul sito ufficiale di PrettyPhoto.

Leggi l’articolo completo

Tag: , , , , ,