Italian webdesign » Ajax e js http://www.italianwebdesign.it La community per aspiranti webdesigner Wed, 08 Feb 2012 13:42:12 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Usare un javascript per rimpiazzare il target _blank e rendere il sito standard compliant? http://www.italianwebdesign.it/usare-un-javascript-per-rimpiazzare-il-target-_blank-e-rendere-il-sito-standard-compliant/ http://www.italianwebdesign.it/usare-un-javascript-per-rimpiazzare-il-target-_blank-e-rendere-il-sito-standard-compliant/#comments Thu, 10 Mar 2011 11:46:03 +0000 Lauryn http://www.italianwebdesign.it/?p=7421 In questi giorni sto approfondendo alcuni discorsi sull’accessibilità, e il discorso target=”_blank” che come sapete è codice “non valido” per l’xthml strict, è sempre stato un piccolo dilemma.

Lasciare il codice non valido? Renderlo valido ma non permettere al cliente di aprire il link in una nuova pagina? E se volessi permetterglielo cosa uso? Javascript?

Sitepoint ci suggerisce un javascript molto semplice. Sicuramente una soluzione da tenere in considerazione.

target blank 439x300 Usare un javascript per rimpiazzare il target blank e rendere il sito standard compliant?

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/usare-un-javascript-per-rimpiazzare-il-target-_blank-e-rendere-il-sito-standard-compliant/feed/ 14 Upload per trascinamento con html5, ajax e php http://www.italianwebdesign.it/upload-per-trascinamento-con-html5-ajax-e-php/ http://www.italianwebdesign.it/upload-per-trascinamento-con-html5-ajax-e-php/#comments Wed, 29 Sep 2010 11:24:04 +0000 Giancarlo D'Urso http://www.italianwebdesign.it/?p=6593 Il cosiddetto web 2.0 è nato per rispondere alla crescente richiesta di interazione uomo-macchina su internet. Essere attratti da un effetto particolare, o da un’applicazione interrattiva rende un sito web più appetibile e accende la curiosità dell’utente. La stessa curiosità che ho avuto io, quando ho scoperto che su gmail si possono allegare i file, durante la composizione delle email , attraverso l’upload per trascinamento. In pratica l’upload non avviene con il classico form, e il bottone “sfoglia” che consente di selezionare il file prima di accettarne il caricamento, bensì trascinando direttamente il file all’interno del browser nel classico stile drag & drop. In realtà, questa tecnologia ha qualcosa che va oltre il semplice web 2.0 perchè sfrutta le potenzialità di HTML5. In questo articolo descriverò un esempio di come simulare questo effetto.

gmail dragdrop Upload per trascinamento con html5, ajax e php

Innanzitutto elenchiamo gli strumenti che ci servono:

  • il linguaggio php
  • il framework jquery per la chiamata ajax
  • firefox (browser che supporta una forma primitiva di html5, ancora non standardizzata).

Ricordo che per fare le chiamate ajax, i file dell’esempio (anche i file html) vanno inseriti in una directory del server web configurata in modo da accettare le chiamate asincrone lato client (Apache di default lo fa!)

Dunque costruiamo un file html semplice che contiene i riferimenti a jquery e al file upload-trascinamento.js che andremo a riempire successivamente:


<html>
<head>
<title>Prova di upload per trascinamento</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="upload-trascinamento.js"></script>
</head>
<body>
<div style="margin:0 auto; text-align:center">
<h1 style="margin-top:100px;">Upload (di 1 file alla volta) per trascinamento</h1>
<h2 id="stato"></h2>
</div>
</body>
</html>

Ed ecco il file upload-trascinamento.js :


$(document).ready(function() {
$(this)
.bind("dragenter", function(event) {
return false;
})


.bind("dragover", function(event) {
return false;
})


.bind("drop", function(event) {
var file = event.originalEvent.dataTransfer.files[0];
event.stopPropagation();
$("#stato").html("Caricamento del file in corso. Attendere prego....");


$.ajax({
url:'upload.php',
async:true,
type:'POST',
contentType:'multipart/form-data',
processData:false,
data:file,
success: function(data) {
$("#stato").html("Il file <a href=\""+ data + "\">" + data + "</a> e\' stato copiato sul server<br/><br/>");
} ,
beforeSend: function(xhr) {
xhr.setRequestHeader("X-File-Name", file.name);
xhr.setRequestHeader("Cache-Control", "no-cache");
}
});
});
});

Dunque, cerchiamo di capire cosa fa questo codice:

  1. Vengono associati , all’intera pagina web (ma si potrebbe fare anche per un div o un paragrafo), tre nuovi eventi javascript riconoscibili solo dai browser che supportano html5: Dragenter, Dragover, Drop. Nel caso specifico, siamo interessati all’evento Drop, però affinchè l’evento funzioni  è necessario definire anche gli altri, magari riempiendoli con un’ azione irrilevante (return false)
  2. L’evento Drop si aziona nel momento in cui rilasciamo sulla pagina web uno o più file. Dunque cosa accade quando questo evento viene azionato?
  • Si estrae il primo file tra quelli selezionati e trascinati dal browser. Un vettore di oggetti event.originalEvent.dataTransfer.files contiene tutti i file trascinati. In particolare l’elemento files[0] contiene un solo file : il primo del vettore. Ciò significa che si potrebbero fare upload multipli. L’esempio, per semplicità, è stato sviluppato nell’ipotesi che sia fatto l’upload di un file alla volta
  • Si blocca la normale apertura del file sul browser con event.stopPropagation()
  • Si effettua la chiamata asincrona .ajax  ad un file php. La chiamata jquery passa come dati al file php , il file che è stato trascinato. E’ importante notare la presenza di contentType:’multipart/form-data’ che imposta nell’header della chiamata ajax  il tipico trasferimento dei file dati come nei normali form html, processData:false che disabilita il casting di default previsto per i dati trasmessi  con data e che permette di trasmettere l’oggetto file, non come stringa, ma con il suo datatype corretto (pdf, immagine, ecc…insomma  in base al tipo di file che abbiamo trascinato nel browser) e beforeSend che, ancora una volta, modifica gli header della chiamata ajax, per trasmette il nome del file estratto dall’oggetto file.

L’ultimo passo per completare il lavoro è è la costruzione del ricevente della chiamata ajax, ovvero il file upload.php:


<?php
$headers = getallheaders();
$nomefile = basename($headers['X-File-Name']);
$streamdati = file_get_contents("php://input");
file_put_contents($nomefile, $streamdati);
echo $nomefile;
?>

Lo script estrae il nome del file dall’header X-File-Name, legge il flusso di dati  (i byte del file) attraverso lo stream di input (php://input) passato alla funzione file_get_contents e costruisce nella directory corrente del server un nuovo file con il nome e i byte del file trasmesso.

Spero di non essere stato troppo prolisso e di aver fornito a tutti voi una nuova tecnica per rendere ancora più appetibili le vostre applicazioni web. E’ possibile scaricare e usare gratuitamente il codice di questo articolo su http://www.giancarlodurso.altervista.org

Aggiornamento. nuova versione:

In seguito alle nuove versioni di jquery e Firefox 4, il codice sopra indicato va aggiornato cambiando la riga di codice event.stopPropagation(); con event.preventDefault();

La nuova versione , funzionante con jquery 1.5.2 e Firefox 4, è al solito scaricabile dalla mia pagina web!

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/upload-per-trascinamento-con-html5-ajax-e-php/feed/ 10 Due plugin di JQuery: Easy Accordion e Easy List Splitter http://www.italianwebdesign.it/due-plugin-di-jquery-easy-accordion-e-easy-list-splitter/ http://www.italianwebdesign.it/due-plugin-di-jquery-easy-accordion-e-easy-list-splitter/#comments Mon, 27 Sep 2010 06:01:42 +0000 Lauryn http://www.italianwebdesign.it/?p=6587 Oggi vi suggerisco questi due plugin, creati dallo stesso autore e che mi sembrava carino segnalarvi. Il primo (Easy Accordion Plugin) permette l’effetto Accordion con delle funzioni anche di autostart che possono sempre essere utili. Il secondo (Easy List Splitter) invece propone un utilizzo del javascript per poter affiancare più liste. Invece di farlo con i css e magari con più classi e id, con questo metodo la cosa si alleggerisce di molto.

Che ne pensate? Io me li tengo fra i bookmarks, so già che mi serviranno per un prossimo progetto. Grazie Andrea!

easy accordion plugin 450x260 Due plugin di JQuery: Easy Accordion e Easy List Splitter

bend lists to your needs 450x260 Due plugin di JQuery: Easy Accordion e Easy List Splitter

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/due-plugin-di-jquery-easy-accordion-e-easy-list-splitter/feed/ 3 trasformazioni css3 con dojo http://www.italianwebdesign.it/trasformazioni-css3-con-dojo/ http://www.italianwebdesign.it/trasformazioni-css3-con-dojo/#comments Thu, 22 Apr 2010 06:39:12 +0000 nic http://www.italianwebdesign.it/?p=5907 Immagine 101 trasformazioni css3 con dojoLa specifica css3 – tuttora in lavorazione – prevede due proprietà molto interessanti: transform e transform-origin, che consentono di eseguire trasformazioni in due dimensioni quali rotazioni, scalature, inclinazioni e loro composizioni su un elemento della pagina.
Trovate qui http://www.w3.org/TR/css3-2d-transforms/ la lista delle trasformazioni disponibili nel dettaglio; la proprietà transform-origin si occupa di fissare il punto attorno a cui avviene la trasformazione.

Per semplicità ci concentreremo sulla rotazione.
Per esempio, volendo ruotare di 45 gradi attorno all’angolo in alto a sinistra e in senso orario il div che ha id=”bersaglio”, in un browser rispettoso dello standard dovremmo scrivere:
#bersaglio{
transform: 45deg;
transform-origin: 0 0; /* x y, si comporta come background-position */
}

Bello, no?
Ma quali browser supportano queste proprietà?
Beh, nessuno, ma… prima le buone notizie! icon smile trasformazioni css3 con dojo

Safari e tutti i browser che usano webkit le supportano come -webkit-transform e -webkit-transform-origin. Vale per safari dalla versione 3.1 e per tutti i chrome/chromium.
Quindi in questo caso avremmo:
#bersaglio{
-webkit-transform: 45deg;
-webkit-transform-origin: 0 0;
}
Vale anche per i browser di iphone, ipod touch e ipad, naturalmente.

Firefox a partire dalla versione 3.5 ha le proprietà -moz-transform e -moz-transform-origin, quindi il nostro esempio diventerebbe:
#bersaglio{
-webkit-transform: 45deg;
-webkit-transform-origin: 0 0;
-moz-transform: 45deg;
-moz-transform-origin: 0 0;
}
Opera dalla versione 10.50 ha le proprietà -o-transform e -o-transform-origin, quindi:
#bersaglio{
-webkit-transform: 45deg;
-webkit-transform-origin: 0 0;
-moz-transform: 45deg;
-moz-transform-origin: 0 0;
-o-transform: 45deg;
-o-transform-origin: 0 0;
}
Ho dimenticato qualcosa? Ah, sì, Internet Explorer.
Internet Explorer a oggi non ha le proprietà transform, quindi niente da fare.

Ok, ok, stavo scherzando.
Microsoft, a partire da Internet Explorer 5.5, fornisce un filtro Matrix, che è in grado di riprodurre le trasformazioni. Peccato che matrix voglia sei valori e il loro calcolo non è immediato; dovendo cambiare la rotazione da 45 a 30 gradi per esempio, dovremmo rifare tutti i conti, decisamente non è un approccio molto comodo.

Per fortuna esiste una via alternativa.

dojotoolkit alla riscossa
Esistono svariate librerie javascript che hanno caratteristiche diverse, ma in comune hanno il compito di mascherare le incoerenze dei vari browser in modo che chi sviluppa un’applicazione web complessa o desideri anche soltanto utilizzare delle animazioni, possa farlo ignorando i dettagli realizzativi.
Per esempio usando dojo, jQuery, YUI, Prototype o altro non abbiamo bisogno di sapere che Internet Explorer utilizza valori che vanno da 0 a 100 per l’opacity, mentre dovrebbero variare da 0 a 1: possiamo limitarci a dire alla libreria javascript che certi elementi dovranno avere una opacity pari a 0.5, e la libreria farà il lavoro sporco per noi.

Per quanto riguarda le trasformazioni css, la versione 1.5 di dojo (http://www.dojotoolkit.org), che dovrebbe uscire a breve, è in grado applicarle utilizzando una sintassi aderente allo standard, prendendosi carico delle differenze tra i browser.

Ecco che cosa dobbiamo fare, passo per passo:
scaricare la versione 1.5 “release” da qui http://www.dojotoolkit.org/download/ (sarà disponibile tra poco).
Decomprimere lo zip. Otterremo tre cartelle: dojo, la libreria di base; dijit i widget; e dojox, le estensioni.

Creiamo un file html e diamo un po’ di stile al nostro bersaglio:
#bersaglio{
text-align:center;
background: #999;
color:#ddd;
height:300px;
width:300px;
font:20px arial;
border:3px solid #aaa;
}

includiamo lo script dojo.js nell’head della pagina con:
<script type="text/javascript" src="dojo/dojo.js"></script>
Subito dopo, aggiungiamo questo script:
<script type="text/javascript">dojo.require("dojox.html.ext-dojo.style");
dojo.ready(function(){
dojo.style("bersaglio", {
"transform": "rotate(45deg)",
"transformOrigin": "0 0"
});
});
</script>
Si occupa di caricare la parte di dojox che gestisce le trasformazioni e di applicarla al nostro div una volta che la pagina è caricata (dojo.ready) et voilà, il gioco è fatto!
Se poi volete sbizzarrirvi e girare tutti i div presenti in pagina di 45 gradi, basterà scrivere al posto della dojo.style…, qualcosa come:
dojo.query("div").style({
"transform": "rotate(45deg)",
"transformOrigin": "0 0"
});
Ecco qui il risultato (tutto in una pagina per praticità di lettura):
http://www.nicolarizzo.com/gamesroom/iwd/rotate.html

Infine, qualora riusciste a mettere le mani sul sito del vostro peggior nemico:
dojo.query("body").style({
"transform": "scaleY(-1)"
});
semplicemente lo capovolgerà.
Naturalmente è possibile anche animare le trasformazioni, potrebbe essere l’argomento per un prossimo articolo.
Qua potete trovare un paio di demo:
http://archive.dojotoolkit.org/nightly/dojotoolkit/demos/css3/demo.html
http://www.nicolarizzo.com/gamesroom/dojoc/nic/demos/clock.html
Buon divertimento!

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/trasformazioni-css3-con-dojo/feed/ 6 I bordi arrotondati anche su explorer? Ci pensiamo noi… http://www.italianwebdesign.it/i-bordi-arrotondati-anche-su-explorer-ci-pensiamo-noi/ http://www.italianwebdesign.it/i-bordi-arrotondati-anche-su-explorer-ci-pensiamo-noi/#comments Wed, 10 Feb 2010 06:35:14 +0000 Lauryn http://www.italianwebdesign.it/?p=5484 …o meglio, ci pensa Jon Raash con questo javascript per far funzionare questa nuova proprietà css3 anche su Explorer. Al che salta fuori la polemica: ma possibile che neanche Explorer 8 supporti ancora i css? Grrr

Va beh, se il sito ve lo permette e non è già carico di javascript un piccolo sacrificio lo si può fare…

A presto!

cross browser.34scs8jk664gss0kwkkowss8k.81dbcgijb8g0ok4kwco84sksw.th.jpeg I bordi arrotondati anche su explorer? Ci pensiamo noi...

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/i-bordi-arrotondati-anche-su-explorer-ci-pensiamo-noi/feed/ 18 jQuery per conteggiare il numero dei caratteri rimanenti di un form http://www.italianwebdesign.it/jquery-per-conteggiare-il-numero-dei-caratteri-rimanenti-di-un-form/ http://www.italianwebdesign.it/jquery-per-conteggiare-il-numero-dei-caratteri-rimanenti-di-un-form/#comments Mon, 01 Feb 2010 06:03:09 +0000 Lauryn http://www.italianwebdesign.it/?p=5379 Avete presente quando su Twitter vi fa il conto alla rovescia dei caratteri rimanenti che potete scrivere?

Ecco con questo Javascript potete aggiungerlo ai vostri form. Buon lavoro!

01 450x241 jQuery per conteggiare il numero dei caratteri rimanenti di un form

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/jquery-per-conteggiare-il-numero-dei-caratteri-rimanenti-di-un-form/feed/ 14 Paginare (dividere in più pagine) elenchi, notizie, immagini con jQuery http://www.italianwebdesign.it/paginare-dividere-in-piu-pagine-elenchi-notizie-immagini-con-jquery/ http://www.italianwebdesign.it/paginare-dividere-in-piu-pagine-elenchi-notizie-immagini-con-jquery/#comments Thu, 24 Dec 2009 07:30:36 +0000 Lauryn http://www.italianwebdesign.it/?p=5156 Se come me vi è capitato oggi di dover “paginare” un elenco dinamico di notizie, o per meglio dire, dividere in più pagine un elenco di notizie che altrimenti costituirebbero un elenco unico presente nella pagina…ecco a tutti voi consiglio questo script che mi è stato consigliato da Luca:

jQuery Quick Pagination

Credetemi è facilissimo da implementare, se ci sono riuscita io!! icon biggrin Paginare (dividere in più pagine) elenchi, notizie, immagini con jQuery

A presto e Buon Natale, ci risentiamo a Santo Stefano!

Immagine 33 450x290 Paginare (dividere in più pagine) elenchi, notizie, immagini con jQuery

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/paginare-dividere-in-piu-pagine-elenchi-notizie-immagini-con-jquery/feed/ 10 Plugin e tutorials JQuery per migliorare le tue gallery di immagini http://www.italianwebdesign.it/plugin-e-tutorials-jquery-per-migliorare-le-tue-gallery-di-immagini/ http://www.italianwebdesign.it/plugin-e-tutorials-jquery-per-migliorare-le-tue-gallery-di-immagini/#comments Tue, 03 Nov 2009 07:19:43 +0000 Lauryn http://www.italianwebdesign.it/?p=4910

Fonte: PV.M Garage

jqueryimg07 Plugin e tutorials JQuery per migliorare le tue gallery di immagini

Nel Web Design Moderno i Framework Javascript sono molto utilizzati, il motivo della loro diffusione è dovuto al fatto che queste librerie permettono di sviluppare senza grossi grattacampi interfacce non banali e sono molto versatili.

Io utilizzo quotidianamente jQuery, probabilmente il framework più conosciuto, per i miei progetti web e in questo post ho collezionato alcune utili risorse per migliorare la visualizzazione delle immgaini su qualsiasi tipo di sito web.

Una lista completa di plugin e tutorial che potrebbero rilevarsi molto utili per migliorare la qualità dei propro lavori sul web. Buon Lavoro!

Se conosci altre risorse di qualità segnalale attraverso i commenti.

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/plugin-e-tutorials-jquery-per-migliorare-le-tue-gallery-di-immagini/feed/ 4 I migliori plugin di jQuery in circolazione sono qui http://www.italianwebdesign.it/i-migliori-plugin-di-jquery-in-circolazione-sono-qui/ http://www.italianwebdesign.it/i-migliori-plugin-di-jquery-in-circolazione-sono-qui/#comments Mon, 24 Aug 2009 06:35:35 +0000 Lauryn http://www.italianwebdesign.it/?p=4343 Una bella lista di plugin per jQuery molto utili:
Best jQuery Tutorials for June 2009

Animated Menu Using jQuery

Create a Dynamic Scrolling Content Box Using AJAX

dynscroll I migliori plugin di jQuery in circolazione sono qui

How to create tab with JavaScript

Animated Navigation with CSS & jQuery

Twitter like Search with jQuery and Ajax.

5 Sliding Content Techniques, Examples & jQuery How to’

jQuery FAQs: Scroll To and Highlight Tutorial

Spice up your WordPress theme with jQuery

FancyPlayer – jQuery Fancybox and Flowplayer Integration Tutorial Image Flip Using jQuery

How To Build an Animated Header in jQuery

Ajaxed Sliding Shopping Cart With jQuery

Ajax Pagination with jQuery,PHP,Mysql

How To CodeIgniter, jQuery & JSON

Create a live-update list effect with jQuery

jQuery Image Gallery/News Slider with Caption Tutorial

jqimgtext I migliori plugin di jQuery in circolazione sono qui

Fly-To-Basket Effect With jQuery


Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/i-migliori-plugin-di-jquery-in-circolazione-sono-qui/feed/ 3 Usare la proprietà rounded corners dei css3 anche con internet explorer http://www.italianwebdesign.it/usare-la-proprieta-rounded-corners-dei-css3-anche-con-internet-explorer/ http://www.italianwebdesign.it/usare-la-proprieta-rounded-corners-dei-css3-anche-con-internet-explorer/#comments Tue, 18 Aug 2009 06:27:17 +0000 Lauryn http://www.italianwebdesign.it/?p=4339 Per chi già si proietta avanti e usa css3 per sperimentare le sue nuove proprietà, c’è questo trick, proposto da Antonio Lupetti, che mixa css3 con un javascript e permette di usare i bordi arrotondati, o meglio la proprietà rounded corners, anche con internet explorer, che non la supporta.

Il trick si chiama Curvy corners e l”articolo di Antonio che ne spiega l’uso è in inglese ma semplicissimo icon wink Usare la proprietà rounded corners dei css3 anche con internet explorer

curvy1 Usare la proprietà rounded corners dei css3 anche con internet explorer

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/usare-la-proprieta-rounded-corners-dei-css3-anche-con-internet-explorer/feed/ 2