jQTouch: applicazioni per iPhone con un plugin jQuery

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 10/8/2010 alle 00:28

emawebdesign

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 ;)

Google Buzz
Pubblicato in Ajax,Apple,CSS,HTML,Mobile,Risorse,Video,iPhone,jQuery | Nessun commento »

jQuery, json e le Twitter API: un esempio pratico

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 4.00 out of 5)
Loading ... Loading ...

Pubblicato il 27/5/2010 alle 11:08

jquery json twitter api

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.

Google Buzz
Pubblicato in Ajax,JavaScript,News,Programmazione,Scripts,Social Network,jQuery | 4 Commenti »

jMapping: utilizzare le Google Maps tramite un plugin di jQuery

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 24/3/2010 alle 15:55

emawebdesign

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 ;)

Google Buzz
Pubblicato in HTML,JavaScript,News,Programmazione,Scripts,Web 2.0,jQuery | 6 Commenti »

jQuery Ajax: come effettuare richieste Ajax tramite jQuery

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 15/3/2010 alle 06:00

jquery ajax

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 ;)

Google Buzz
Pubblicato in Ajax,HTML,JavaScript,News,Programmazione,Scripts,jQuery | 15 Commenti »

Simple Modal: finestre di dialogo personalizzate

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 10/2/2010 alle 16:12

emawebdesign

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.

Google Buzz
Pubblicato in Grafica,JavaScript,News,Risorse,jQuery | Nessun commento »

Table sorter: ordinare una tabella html con jQuery

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 24/7/2009 alle 16:19

table sorter

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.

http://www.emawebdesign.com/wp-content/plugins/downloads-manager/img/icons/winzip.gif 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.

Google Buzz
Pubblicato in HTML,News,Programmazione,Scripts,jQuery | Nessun commento »

I migliori post della settimana #32

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 12/7/2009 alle 11:16

Best Post

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

Google Buzz
Pubblicato in Advertising,Flash,Foto e immagini,Grafica,Migliori post della settimana,SEO,Social Network,Video,Web 2.0,jQuery | Nessun commento »

Inserire un calendario nel proprio sito grazie a jQuery

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 9/7/2009 alle 09:20

timepicker jquery

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 ;)

Google Buzz
Pubblicato in JavaScript,News,Programmazione,Risorse,Scripts,jQuery | 2 Commenti »

I migliori post della settimana #29

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 21/6/2009 alle 11:33

Best Post

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

Google Buzz
Pubblicato in Flash,Grafica,Guadagnare online,Migliori post della settimana,iPhone,jQuery | Nessun commento »

I migliori post della settimana #28

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 14/6/2009 alle 16:15

Best Post

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

Google Buzz
Pubblicato in Blog,Grafica,Guadagnare online,JavaScript,Migliori post della settimana,MooTools,Motori di Ricerca,PHP,Programmazione,Prototype,Scripts,Wordpress,jQuery | Nessun commento »
  • Pagina 1 di 2
  • 1
  • 2
  • >

Categorie







Ultimi commenti

  • EmaWebDesign: @Joel sono d’accordo con te ;) @Giovanni si Giov, CKeditor merita più di un’occhiata :)
  • Giovanni: Io ormai ho adottato TinyMCE ma con questo post mi hai invogliato a riprovare FCK – pardon –...
  • Joel: Hola ;-) qualche mesetto fa ho avuto la necessità di inserire un editor in un mio progetto. Penso di averne...
  • EmaWebDesign: TinyMCE è sicuramente uno degli editor Wysiwyg più amati, soprattutto da chi utilizza Wordpress ;)
  • luca: Ciao, Io ho utilizzato per molto tempo fckeditor ma per alcune cose era molto limitato e quindi un volta ho...
  • EmaWebDesign: @Rudy sarebbe il caso di capire come il the best possa stare dentro al the best…cioè, mica può...
  • Giovanni: Mitico Rudy, sei troppo meta-blogger! Ema, io ho l’impressione che quando uno metta uno specchietto...
  • Rudy Bandiera: Io preferisco questo, questo è il mio articolo preferito, ma così si genera un paradosso ovvero il the...
  • EmaWebDesign: Ciao Marco, essì, la Web Analytics è una delle cose più interessanti in assoluto. A presto ;)
  • Marco: Ottimo :) articolo interessante :D