Joyride è un interessante plugin in jQuery, che permette di semplificare la presentazione di nuove caratteristiche di un progetto web ai propri utenti.

Avete presente questi tour animati e ancorati a una nuova interfaccia grafica, in stile Facebook per presentare le notività?
Grazie a questo plugin potremo decidere la posizione dei tooltip, la velocità, attivare cookie o animazione di entrata.

Tramite il codice del plugin jQuery potremo in modo semplice, ancorare alcuni elementi ID ai tooltip animati, e creare un tour cronologico in base alle nostre esigenze.
Un ottimo plugin per promuovere in modo efficace le nuove caratteristiche di un progetto web.

ResearchLovers è un nuovo progetto di analisi e ricerca sulla progettazione dell’esperienza d’uso per prodotti e servizi digitali, basato sul crowdsourcing.

Attualmente ci sono tre tipologie di attività che si possono eseguire, intervista telefonica, usability test o focus group.
Ogni attività richiesta ed eseguita, verrà puntualmente rimborsata in base al tempo dedicato e la frequenza.
Perchè il Progetto è Interessante?Il progetto è molto interessante, in quanto molte aziende prima di pubblicizzare un prodotto o progetto web, tendono a eseguire analisi sull’usabilità e efficacia della comunicazione.
ResearchLovers potrebbe diventare un ottimo bacino di tester a disposizione di qualsiasi azienda, capaci di effettuare testing mirati sulla comuncazione web e usabilità.
Perchè dovrei candidarmi?La scelta nel candidarsi può venire in modo particolare per due motivi, per guadagnare qualcosa, oppure per contribuire nelle analisi e ricerche sullo studio dell’usabilità.
Una volta registrato avremo a disposizione una bacheca con la quale condividere il progetto e aspettare di essere arruolati per il primo testing.
La maggior parte dei test si svolgeranno online, mentre alcuni se richiesti saranno organizzati sul territorio italiano.
Devo essere un Esperto?Assolutamente no, anzi l’utenza media sul web non è esperta,  e nei maggiori dei casi i tester vengono proprio cercati con livello medio/basso proprio per capire le migliori tecniche da applicare o modificare.
Il proprio livello di conoscenza del web non influisce sulla candidatura, ma sicuramente è una caratteristica fondamentale per ricevere una certa tipologia di test.
Segui il ProgettoIl progetto è stato realizzato dai formidabili ragazzi di Sketchin, che auguro loro un grande successo.
Abbiamo la possibilità di seguire il progetto sulla pagina fan Facebook ResearchLovers oppure su Twitter.

PSD2Mail è un interessante strumento online, che permette di trasformare un layout in PSD in una struttura HTML ottimizzata per Newsletter.

Come sappiamo durante la progettazione di una Newsletter, bisogna usare alcune tecniche particolari per mantenere spaziature, stili e dimensioni.
Una volta progettata la grafica PSD della nostra Newsletter, dovremo esportare in HTML il layout, precedentemente tagliato a seconda degli elementi che avremo.
Clicca qui per vedere il video incorporato.
Una volta esportato il layout in HTML, dovremo inserire il codice HTML all’interno del primo box e convertirlo in layout ottimizzato per Newsletter.
In alto troveremo altre opzioni interessanti per il nostro layout, come compatibilità con Outlook, Hotmail o stili del nostro background e immagini.
Clicca qui per vedere il video incorporato.
Una volta configurate tutte le caratteristiche ci absterà inizializzare la conversione, con Make my Newsletter e verrà generato il codice corretto per Newsletter.
CompatibilitàMac OS X 10.6 Snow Leopard
Mail 4.5 – Thundendbird 5 – Thundendbird 6 – Outlook 2011 – Gmail on FF 6 – Sparrow 1.3.2 – Sea Monkey 2.3.1 – Opera on myopera Account Windows XP
Outlook 2003 – Outlook Express – AOL Windows 7
Gmail on IE 9 – Oulook 2010Linux
Thundendbird 3 – Hotmail Chrome/FF6 – Horde webmailAndroid
Gmail – Nexus OneDavvero un interessante tool online gratuito per ottimizzare i tempi nella trasformazioni di layout PSD in layout HTML per Newsletter.

Ad inizio Agosto Adobe ha rilasciato Edge, un applicativo desktop che permette di utilizzare un editor visuale per creare ed esportare animazioni in HTML5.

Una volta installato l’applicativo dal sito ufficiale, potremo iniziare a familiarizzare con l’editor molto simile ad After Effects.
L’editor si presenta con una interfaccia molto familiare per chi usa i software Adobe, infatti troviamo pannelli di proprietà, monitor, timeline, keyframe ecc.

Esempi AnimazioneGetting Jumpy 1Getting Jumpy 2Sunshine and SailingFerris Wheel and Roller CoasterSimple Rich AdSono davvero tempi duri per l’amato Adobe Flash, che mese dopo mese sta perdendo terreno in diverse sue attività che svolgeva come leader.
La scelta di creare e sviluppare questo strumento da parte del team Adobe ci deve trasmettere fiducia, in quanto in molti stanno seguendo la strada giusta nel sostenere il futuro standard HTML5.
Un ottimo tool da provare e da conoscerne l’esistenza, in futuro credo potrebbe riservare delle dolci sorprese.
Presentazione Adobe Edge
Avete avuto modo di provarlo? Cosa ne pensate?

Spur è un tool online gratuito con il quale possiamo analizzare in tempo reale alcuni aspetti di un visual design.

Questoo strumento può essere molto utile per ottenere delle critiche su determinati aspetti, che abbiamo usato nel nostro visual design.
Un web designer questi aspetti dovrebbe conoscerli e applicarli in fase di progettazione, il tool ci permette di verificare se effettivamente li abbiamo eseguiti in modo corretto.
Carichiamo il nostro DesignE’ possibile caricare una URL oppure una screenshot di un design e attivare l’analisi del visual design.

Io consiglio una screenshot in quanto spesso il caricamenteo di una URL è più lento e non sempre va buon fine.
Il tool ci mette a disposizione sette strumenti con i quali potremo mettere alla prova il nostro design.
Ogni strumento verrà applicato al design in tempo reale e potremo verificarne il risultato.
Scala di GrigiQuesto strumento ci permette di annullare i colori del nostro design, e avere una visuale in bianco e nero.

Qesta tecnica ci permette di capire dove l’occhio umano viene maggior mente catturato, senza l’aiuto dei colori, ma solo con le posizioni, dimensioni e struttura.
In questo caso possiamo notare i titoli dei contenuti messi in evidenza, la posizione del menu e le titolazioni degli articoli in seconda pagina.
IntersezioniQuesto strumento ci permette di individuare i punti di intersezioni del nostro design.

Qesta tecnica ci permette di capire se abbiamo usato una struttura efficace, o se dobbiamo equilibrare alcune aree.
In questo caso possiamo notare gli spazi tra una sezione e l’altra, il dosaggio corretto tra tutti gli elementi.
ContrastoQuesto strumento ci permette di analizzare il contrasto dei colori di un design.

Qesta tecnica ci permette di individuare quali siano le aree non funzionali o inappropriate.
In questo caso possiamo notare  i banner pubblicitari come siano in evidenza rispetto al design, buono o cattivo?
SfocaturaQuesto strumento ci permette di rendere sfocato il design con l’obiettivo di individuare le zone di importanza.

Qesta tecnica ci permette di individuare quali siano le aree a fuoco, grazie alla loro posizione e dimensioni rispetto al contenuto.
In questo caso possiamo notare come il menu, logo, prodotto e banner siano elementi molto riconoscibili.
SpecchioQuesto strumento ci permette di rovesciare il nostro design come avessimo uno specchio.

Qesta tecnica ci permette di individuare alcune aree di disallineamento e errori di gerarchia.
In questo caso possiamo notare  come alcuni elementi come banner e articoli recenti siano disallineati e privi di gerarchia.
RotazioneQuesto strumento ci permette di ruotare orizzontalmente il nostro design.

Qesta tecnica ci permette di individuare quali sia l’equilibrio dato alla pagina.
In questo caso possiamo notare alcuni aspetti che non facciamo caos, ad esempio alla quantità esagerata di LINK.
-50% ZoomQuesto strumento ci permette di ridimensionare il nostro design al -50%.

Qesta tecnica ci permette di capire se le dimensioni e posizioni sono efficaci.
In questo caso possiamo notare come anche se lo zoom è stato ridotto al 50% gli elementi fondamntali siano ancora riconoscibili.

JPEGmini è un servizio gratuito online, che permette di ridurre le dimensioni delle nostre immagini fino al 80% senza perdere la loro qualità.

Come sappiamo è fondamentale ridurre il peso delle foto che popolano un sito web e blog, o addirittura per l’advertising web, per diminuire il caricamento della pagina o entrare nel range di marketing adv.
Questo servizio è davvero notevole in quanto una volta caricata una immagine JPG, è possibile ottenere la stessa, in dimensioni ridotte senza perdere qualità.
La tecnologia usata da questo tool ha due componenti principali: il primo è un rilevatore di qualità d’immagine, che imita le qualità percettive del sistema visivo umano, per determinare la quantità massima di compressione che può essere applicato a ogni singola foto senza causare artefatti visibili.

Il secondo è un codificatore JPEG unico, che adatta il processo di codifica JPEG per le foto originali, creando la rappresentazione più compatta delle foto che è possibile con lo standard JPEG.
Originale: 3.662KB
Ottimizzata con JPEGmini: 628 KB
Come possiamo notare l’0ttimizzazione è molto incisiva sul peso, ma allo stesso tempo non vi sono perdite di qualità.
Inoltre abbiamo la possibilità di registrarci gratuitamente al servizio, in questo modo potremo creare album privati delle nostre foto.
Se non vogliamo registrarci possiamo usare il servizio in qualsiasi momento premendo in alto a destra Try It Now, e avremo la possibilità di caricare una immagine per volta e ottimizzarla.
Un utilissimo servizio gratuito da conoscere e usare per le nostre esigenze di ottimizzazione foto sul web.

We're pretty big fans of do-it-yourself work around here, but having the right tools is imperative. The New York Times shows us that for about $250, you can outfit yourself with the dozen or so tools essential to home maintenance. More »

In my last post, Pentesting Adobe Flex Applications with a Custom AMF Client, I described how one could write a client using Python and PyAMF to perform manual penetration testing of Flex applications. The example application I focused on utilized RemoteObjects and communicated via binary AMF encoded messages, a common roadblock for security testers. If you are new to penetration testing Flex applications, I suggest reading my previous post to familiarize yourself with Flex and the techniques I discussed.

In this post, I’ll show how you can exploit Flex applications that use BlazeDS to gain access to internal networks and other hosts behind the firewall. BlazeDS is a Java-based remoting server that allows developers to utilize existing application logic and web services in Flex applications. The following also applies to applications that use Adobe LiveCycle Data Services ES.

A common insecure configuration that we encounter when assessing Flash applications is an insecure crossdomain.xml policy file (usually hosted within a web site’s root directory). By default, a Flash application hosted on domain A cannot access resources from domain B unless domain B has configured their cross-domain policy to allow domain A. More often than not, the cross domain policy file has been configured to allow the entire world access rather than a specific list of trusted domains. Now, assuming the cross domain policy file has been secured, developers of Flex applications that consume data from external web services must now incorporate this restriction into their design. This makes it difficult to develop Flex applications that will be hosted on multiple, possibly untrusted domains.

Enter BlazeDS. To get around the restrictions imposed by cross-domain policy files, BlazeDS allows developers to configure “Proxy Services”. Using Proxy Services, BlazeDS will make calls to remote service destinations on behalf of the Flex application. BlazeDS Proxy Services allows Flex applications to consume SOAP and Web Services hosted on other domains without the need for a cross-domain policy. A common use case for proxy services is to allow external access to internally hosted web services via a specified destination. A typical proxy service is configured like so (see BlazeDS Developer Guide for more detail):

# contents of WEB-INF\flex\proxy-config.xml:
<service id="proxy-service" class="flex.messaging.services.HTTPProxyService">
  ...
  
  <destination id="web-service">
    <properties>
      <dynamic-url>http://ws.localdomain:9899/web/service/content.jsp</dynamic-url>
    </properties>
  </destination>
  
  <destination id="soap-service">
    <properties>
      <wsdl>http://ws.localdomain:9899/ws?wsdl</wsdl>
      <soap>*</soap>
    </properties>
  </destination>
</service>

In the proxy-config.xml above, we have two destinations defined: web-service and soap-service. If you look closely, the soap property has an asterisk (wildcard) defined. This property can define an absolute domain and path, however like cross-domain policies, an asterisk permits BlazeDS to make requests to any hosts it can reach on the network that match this property. This is a common occurrence, due in part to sample configuration files supplied with BlazeDS and lack of awareness on part of those responsible for securing the application server. In more secure configurations, this property is set to a strict domain or path (such as the web-service destination).

If you want to build a Flex client that communicates with Proxy Services, you’ll need to familiarize yourself with the following objects (refer to the Flex Language Reference for more information):

mx.rpc.http.HTTPService (url)
mx.rpc.http.mxml.HTTPService(url)
mx.messaging.messages.HTTPRequestMessage (url)
mx.rpc.soap.WebService (endpointURI)
mx.rpc.soap.mxml.SOAPService (endpointURI)
mx.messaging.messages.SOAPMessage (url)

Without further ado, I’d like to introduce Blazentoo, a tool I developed to exploit such functionality. With Blazentoo, you can exploit insecurely configured Proxy Services and browse internal websites, potentially those on trusted corporate networks. Just recently I was working on an assessment and I was able to successfully compromise an internal application via an exposed BlazeDS server – as this wasn’t the first (or last) time, I decided it was time to build Blazentoo.

To use Blazentoo, you’ll need to know the following (most of this information can be obtained by examining HTTP requests proxied through a tool like Burp Suite, Charles Proxy, or WebScarab):

AMF/HTTP endpoint (the message broker servlet that flex requests are routed to)
The “destination” id (if this is left blank, the DefaultHTTP destination is used)
An optional “channel” id (leave blank if unknown)

If using SOAP, you’ll need to know the following additional information:

A SOAP Action associated with the destination id, and/or
URL of the WSDL (required if no destination id is defined)

Below is a screenshot of Blazentoo in action. Note that the URL being accessed in this example is “http://localhost/”. This could just as easily have been an internal IP address or hostname.

You can download Blazentoo from our tools page.