(No Ratings Yet)

 Loading ...

Gli sviluppatori web, che realizzano applicazioni per il mobile, hanno finalmente trovato un alleato con cui sviluppare applicazioni per iPhone: jQTouch. Non sto parlando di Objective C/Cocoa ma di un potente plugin per jQuery che permette a chi ha familiarità con HTML/CSS/JavaScript di realizzare applicazioni che si presentano come “native” dell’iPhone, quindi, con grafica, animazioni e funzionalità identiche a quelle delle applicazioni native iPhone.

Per “ricreare” grafica e animazioni tipiche delle applicazioni native iPhone con HTML/CSS/JS si passerebbe obbligatoriamente per un duro lavoro di scrittura del codice mentre, con l’utilizzo di jQTouch, con poche righe di codice e un pò di Ajax si possono realizzare applicazioni identiche in tutto e per tutto a quelle native. Un notevole risparmio di tempo durante la scrittura dell’applicazione ed un vantaggio notevole: in caso di problemi con AppStore o in caso di lunghe attese per la pubblicazione dell’applicazione (o di un suo aggiornamento), è possibile predisporre l’applicazione via web trattandosi infatti di una web application!

Inoltre, realizzare un’applicazione iPhone basata su una web app, permette lo sviluppo della stessa tramite gli ide e software preferiti, non bisogna obbligatoriamente utilizzare MAC e si può utilizzare l’applicazione da qualunque dispositivo dotato di browser web.

Si, ma la pubblicazione dell’applicazione su AppStore?

Esistono strumenti di sviluppo come PhoneGap che convertono applicazioni realizzate con HTML/CSS/JS in applicazioni pronte per essere inviate ad AppStore. Non ho mai utilizzato tale strumento ma, con una veloce googlata, si può vedere che in rete se ne parla molto bene.

jQTouch è opera di David Kaneda. Sotto potete visualizzare un video che mostra il plugin e questo è il canale ufficiale Vimeo di David: davidkaneda.

Se ti interessa jQTouch e lo sviluppo di applicazioni iPhone tramite HTML/CSS/JS iscriviti al feed RSS perchè in futuro parleremo ancora di questi argomenti

 Invia questo articolo a un amico via email

(1 votes, average: 4.00 out of 5)

 Loading ...

In questo mini tutorial vedremo come è semplice ricavare informazioni dalle API di Twitter utilizzando jQuery, Ajax e il formato Json. In pratica, ricaveremo il parametro “description” dalla API relativa alle informazioni dell’utente (user/show) di cui vogliamo l’informazione. Visualizzeremo il valore description in un div con ID univoco uguale ad “output“. L’unico parametro da inviare è l’username dell’utente Twitter di cui vogliamo conoscere la descrizione.

Per prima cosa scarichiamo jQuery ed includiamo la libreria nella nostra pagina web. Ora inseriamo il seguente codice jQuery modificando il valore “tua_username” con la username dell’utente twitter:

<script type="text/javascript">
 
$(document).ready(function() {
 
jQuery.ajax({
		url: "http://api.twitter.com/1/users/show.json?screen_name=tua_username",
		type: 'GET',
		dataType: 'jsonp',
		timeout: 1000,
		error: function(){ jQuery("#output").html("ERROR!"); },
		success: function(json){
			$('#output').html(json.description);
		}	
	});
 
});
 
</script>

Per ottenere altre informazioni, come ad esempio il numero di followers dell’utente, basterà leggere il relativo parametro. In questo caso utilizzando json.followers_count invece di json.description.

 Invia questo articolo a un amico via email

(No Ratings Yet)

 Loading ...

Oggi ti suggerisco un metodo davvero comodo per integrare le Google Maps in una pagina web: jMapping

jMapping è un plugin di jQuery che ti permetterà di integrare comodamente e velocemente una mappa in una pagina web, vediamo come. jMapping dipende dai plugin jQuery.metadata, MarkerManager e MapIconMaker, trovi i link a questi plugin nella home page di jMapping; scarica i plugin e includili nella tua pagina web insieme alle librerie jQuery e, ovviamente, jMapping:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=API_KEY"></script>
<script type="text/javascript" src="jquery.jmapping.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript" src="mapiconmaker.js"></script>
<script type="text/javascript" src="markermanager.js"></script>

Ovviamente sostituisci il parametro API_KEY con la tua API Key. Ora posiziona i seguenti div nella tua pagina web:

<div id="map" style="width:600px;height:400px;"></div>
<div id="map-side-bar">
<div class="map-location" data="{id: 1, point: {lng: 12.49248, lat: 41.89028}, category: 'market'}">
</div></div>

A questo punto richiama jMapping specificando l’ID univoco che in questo caso è “map”:

<script type="text/javascript">
$(document).ready(function(){
  $('#map').jMapping();
});
</script>

Nella pagina usage trovi tutte le opzioni disponibili per configurare opportunamente le tue mappe

 Invia questo articolo a un amico via email

(No Ratings Yet)

 Loading ...

Oggi vediamo come effettuare chiamate Ajax utilizzando il famoso framework jQuery. Per prima cosa scarichiamo jQuery dal sito ufficiale e includiamo il file nella nostra pagina web:

<script type=”text/javascript” src=”jquery.js”></script>

Ora diamo un’occhiata al file PHP al quale faremo la richiesta con Ajax. Il file PHP riceverà un ID integer e ci restituirà una risposta in formato testo, risposta, che visualizzeremo nel div con ID univoco “output“:

<?php

(int)$id = $_GET["id"];

if ($id==1) echo “Chiamata numero 1″;
if ($id==2) echo “Chiamata numero 2″;
if ($id==3) echo “Chiamata numero 3″;

if ($id!=1 && $id!=2 && $id!=3) echo “Parametro non valido!”;

?>

Ecco che, con poche righe jQuery, possiamo effettuare la richiesta:

<script type=”text/javascript”>

$.ajax({
type: “GET”,
url: “test.php”,
data: “id=1″,
success: function(response){
$(“#output”).html(response);
}
});

</script>

Modificando il valore del parametro id in data, magari inserendo dati in input tramite un form, visualizzeremo il messaggio opportuno a seconda del parametro inviato, in questo caso, un numero intero (1,2 o 3). La risposta testuale fornita dal file PHP è contenuta nel parametro response e la visualizziamo nel div output tramite la riga:

$(“#output”).html(response);

Questo è un semplice esempio ma, con altrettanta semplicità, potremo realizzare applicazioni complesse senza scrivere un’infinità di righe di codice grazie a un potente framework come jQuery

 Invia questo articolo a un amico via email

(No Ratings Yet)

 Loading ...

Se vogliamo utilizzare nei nostri progetti finestre di dialogo personalizzate nella grafica, animate ed assolutamente accattivanti, abbiamo davvero tante soluzioni a disposizione.

Basti pensare a ModalBox, MoodalBox, ShadowBox e via dicendo.

Vi consiglio di dare comunque un’occhiata a SimpleModal sul sito di Eric Martin. Trovate alcuni esempi di finestre personalizzate che si avvalgono di jQuery, scaricabili liberamente.

 Invia questo articolo a un amico via email

(No Ratings Yet)

 Loading ...

Vediamo col seguente mini-tutorial come implementare un sistema per permettere l’ordinamento dei valori in una tabella HTML utilizzando un plugin per jQuery: tablesorter

Scaricate il plugin dalla pagina ufficiale: http://tablesorter.com/docs/index.html

Includete nella vostra pagina il plugin e il pacchetto jQuery:

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”tablesorter.js”></script>

Tra i tag head della pagina inserite il codice js:

<script type=”text/javascript”>

$(document).ready(function()
{
$(“table“).tablesorter();
}
);

</script>

Ecco fatto

La tabella ovviamente deve avere un ID univoco, in questo esempio l’ID è table. Potete associare alla tabella la classe “tablesorter” per rendere più accattivante la grafica della stessa ma potete anche personalizzare la grafica CSS alla mano.

Potete scaricare i files dell’esempio.

download: Tablesorter (24.93KB) added: 24/07/2009 clicks: 258 description: Table sorter è un plugin per jQuery con cui si può implementare un sistema per ordinare i valori in una tabella HTML.

 Invia questo articolo a un amico via email

(No Ratings Yet)

 Loading ...

Come ogni settimana ecco i posts più interessanti:

01) Vacanze 2.0: I Social Network Per Pianificare Il Tuo Viaggio

02) Guida di apprendimento di Flash Video

03) I Migliori Plugin Jquery Con Effetto Lightbox

04) Cos’è la risoluzione di un’immagine

05) Una Raccolta di SEO Tools Sempre Utili

06) Come vendere pubblicità tramite le concessionarie pubblicitarie online

07) Pubblicità su Facebook: come fare

08) La longevità dei social network

09) Alcuni Grandi Fraintendimenti nella SEO

 Invia questo articolo a un amico via email

(No Ratings Yet)

 Loading ...

In questo breve tutorial vedremo come inserire il widget di un calendario nel proprio sito web utilizzando un plugin jQuery.

Per prima cosa, scarichiamo il plugin dalla pagina ufficiale: dynDateTime: calendar date and time picker

Scompattiamo l’archivio ZIP nella cartella del nostro sito e includiamo i files del plugin e di jQuery:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js”></script>
<script type=”text/javascript” src=”jquery.dynDateTime.js”></script>
<script type=”text/javascript” src=”lang/calendar-en.js”></script>
<link rel=”stylesheet” type=”text/css” media=”all” href=”css/calendar-blue.css”  />

Inseriamo nella pagina un DIV con ID univoco contenente un campo di testo e un button. Subito prima del div incolliamo il codice jQuery associandolo al div che in questo esempio ha id uguale a “timePicker“:

<script type=”text/javascript”>
jQuery(document).ready(function() {
jQuery(“#timePicker input“).dynDateTime({
button: “.next()” //next sibling
});
});
</script>

Abbiamo finito

Ecco il widget in azione: timePicker

Nella cartella CSS ci sono diverse skin da utilizzare per il calendario, se non ci piacciono possiamo sempre realizzarcela da soli

 Invia questo articolo a un amico via email

(No Ratings Yet)

 Loading ...

Di seguito i post più interessanti di questa settimana:

1) Miti e leggende del mondo freelance

2) PageFlip: I Migliori componenti Flash e servizi 2.0

3) Affiliazioni: 10 Programmi Top Per Guadagnare Con Internet

4) 26 Ottimi Menu di Navigazione in jQuery

5) Introducing iPhone-style Checkboxes

6) Creare un Testo che Colpisca lo Sguardo in Illustrator

 Invia questo articolo a un amico via email

(No Ratings Yet)

 Loading ...

Di seguito i posts più interessanti di questa settimana:

1) Interagire con il Database di WordPress in php

2) Framework a confronto: jQuery, MooTools, Prototype

3) Nicchia popolare vs. nicchia specifica: pro e contro

4) Il miglior file manager in PHP

5) Posizionamento sui motori di ricerca: 10 errori da evitare!

6) Oltre 50 Loghi di Successo che utilizzano gradienti

 Invia questo articolo a un amico via email