JQuery, per chi non lo sapesse, è un libreria che come dice il suo slogan (Write less, Do more), permette grandi, gradissime interazioni con pochissime conoscenze di Javascript.
In concomitanza con il rilascio della versione 1.2 (anzi la ormai già la 1.2.1) è stata innaugurata una “sezione” tutta dedicata alle “intefacce utente” (UI) a dir poco spettacolare!

Inutile soffermarmi sui dettagli visto che, seppur di facile utilizzo, è comunque doverosa la lettura della documentazione. Piuttosto vi consiglio di dare uno sguardo alla demo di una Photo Gallery per capire a che livello sono arrivati!

Viene davvero da chiedersi se le appicazioni in Adobe (Ex Macromedia) Flash abbiano davvero ancora un futuro…

Fermo restando che la forza di questa libreria è probabilmente la semplicità, vi lascio con alcune altre applicazioni con l’intento di stupire eventuali scettici:

• Trascinamento di oggetti
• Ordinamento
• Selezione
• Ridimenzionamento
• Accordion (non saprei davvero tradurlo)
• Date pickers
• Finestre di dialogo
• Sliders
• Ordinamento di tabelle
• Tabs
• Effetti FishEye
• Effetti ombra

Articoli correlati:

1. Cinidisicilia.it chiuso, ma basta riportare una notizia per una denuncia?
2. Da HP la macchina digitale che ti fa bello

Continua la serie degli scripts della serie “me lo sono fatto per me, ma lo rendo disponibile che magari a qualcuno torna utile”: uno script in ASP.net che oltre a fare il classico ridimesionamento (resize) ritaglia (crop) l’immagine con una forma quadrata.

Sono immerso in un progetto (molto presto vi annuncierò i dettagli) che necessita di anteprime (thumbnails) quadrate di alcune foto. Fino ad ora me la sono sempre sbrigata tramite CSS+Resize(in ASP.net) ma ero curioso di vedere che risultati si potessero ottenere facendo tutto tramite ASP.net.

Cerca, studia, prova, ho realizzato uno script che, passandogli il percorso dell’immagine e larghezza del quadrato necessario, si occupa di ridimesionare e ritagliare l’immagine trasformandola in un quadrato.

Tanto per capirci, ho un’immagine così (la mia Locanda):

con questo script diventa così:

I parametri da passargli tramite querystring sono:

1. img – ovvero il percorso dell’immagine.
2. opx – ovvero la larghezza risultante dell’immagine

Esempio:

http://www.simonerodriguez.com/square.aspx?img=/images/RECEPTIO_2.jpg&opx=150

Non mi soffermo sui dettagli dello script poiché non è lo scopo di questo articolo, ma se vi state chiedendo perché genera solo “quadrati”, la risposta è che “a me serviva così”! …magari più in là lo renderò anche “rettangolare”.

English version
I developed a script in ASP.net to resize and crop an image in a square shape.
You have only to pass those two parameters through querystring:

1. img – The image path
2. opx – The quare width result

Example:

http://www.simonerodriguez.com/square.aspx?img=/images/RECEPTIO_2.jpg&opx=150

Download: Crop and Resize (813B) Data: 12/09/2007 Click: 2227 Descrizione:

Nessun articolo correlato.

Solitamente evito turorial e articoli troppo tecnici visto che “saper spiegare” è una cosa più difficile di quanto sembri. Questo volta però ho realizzato uno scriptino che permetterà a chiunque (o quasi) di implementare l’invio di un form in Ajax senza bisogno di particolari abilità.

Premesse
Per chi non lo sapesse, Ajax è una tecnica di sviluppo web che tramite l’oggetto XMLHttpRequest permette l’invio e ricezione di dati senza bisogno di ricaricare la pagina con evidenti benifici in termini di velocità e usabilità del sito.

L’implementazione è più facile di quanto sembri anche per form già esistenti; è inoltre possile gestire anche l’eventualità che il browser abbia i javascript disabilitati redirigendolo in un’apposita pagina.

A differenza di molti script che si trovano in rete,ho cercato di parametrizzare i campi fondamentali così da poter specificare il messaggio di ‘Loading’ e l’ID del DIV in cui visualizzare la risposta del Form.

1. Lo Script
Innanzi tutto avrete bisogno di questo script che dovrete uploadare nel vostro sito e linkare nella sezione head della pagina del form in questo modo:

<script src="js/ajaxsbmt.js" type="text/javascript"></script>

Non dimenticate di modificare il percorso del JS con quello della cartella in cui l’avete uploadato.

2. Il Form
L’unica cosa da aggiungere rispetto ad un form classico, è il richiamo alla funzione xmlhttpPost associata all’evento onsubmit.
Il richiamo alla funzione xmlhttpPost va personalizzata secondo le vostre esigenze:

1. Il primo paramentro (‘response_ajax.asp’) si riferisce alla pagina che riceverà i dati del form e risponderà
2. Il secondo parametro (‘MyForm’) si riferisce al nome del form da cui prelevare i dati
3. Il terzo parametro (‘MyResult’) si riferisce all’ID del DIV che conterrà la risposta del form ed il messaggio di attesa.
4. Il quarto paramentro (‘Wait…’) si riferisce al messaggio di attesa che apparità durante l’invio dei dati. Potete anche inserire del codice HTML magari per far apparire un’immagine di caricamento.

<form name="MyForm" action="response_normal.asp" method="post" onsubmit="xmlhttpPost('response_ajax.asp', 'MyForm', 'MyResult', 'Wait...'); return false;">
<input type="text" name="sample_text" value="Test" />
<input type="submit" name="send_button" value="Send" />
</form>

La cosa interessante è che nel caso in cui il browser avesse il javascript disabilitati, i dati verranno inviati comunque alla pagina specificata nella proprietà action rendendo questo script di fatto accessibile.

4. Conclusioni
Visto quanto è facile realizzare un form “moderno”? Ho cercato di semplificare la questione il più possibile ma se avete dubbi, domande o problemi, lasciate un commento.
Lo script è stato testato con Firefox 2 e Internet Explorer 6 ma se avete la possibilità di testarlo con altri browser vi prego di comunicarmelo.

Download: Script Ajax form submit (3.33KB) Data: 21/02/2010 Click: 16412 Descrizione:

QUI trovate una DEMO

NON DIMENTICATE DI VOTARMI SU DIGG ->

5. Immagini per il ‘Loading’
La fase di invio/attesa dati può essere personalizzata con una bella gif, eccovene alcune.
Ricordate che passando del codice HTML tramite la funzione xmlhttpPost i doppi apici (“) devono essere sostituti con lo slash e l’apice (\’).

Aggiungo in fine questo fantastico sito AjaxLoad che permette in perfetto stile web 2.0 di crearsi la propria immagine di caricamento.

Nessun articolo correlato.