(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

(No Ratings Yet)

 Loading ...

Nel mini-tutorial di oggi vedremo come impostare il fullscreen in un filmato Flash utilizzando ActionScript 3.

Nel filmato Flash, inseriamo il codice ActionScript sul primo fotogramma. Per prima cosa, dichiariamo una variabile “fullStatus” di tipo booleano. Questa variabile conterrà “true” se il filmato è in modalità “fullscreen” altrimenti “false” se è in modalità “normal“:

var fullStatus:Boolean;
fullStatus = false;

Ora scriviamo una funzione che, in questo caso, chiameremo “changeMod“. La funzione controllerà la variabile fullStatus. Se la variabile contiene “false” la proprietà stage.displayState verrà impostata su StageDisplayState.FULL_SCREEN; se contiene “true” la proprietà verrà impostata su StageDisplayState.NORMAL:

function changeMod(e:MouseEvent):void
{

if (fullStatus==false) {
fullStatus = true;
btt.stage.displayState = StageDisplayState.FULL_SCREEN;
}
else {
	   fullStatus = false;
       btt.stage.displayState = StageDisplayState.NORMAL;
      }

}

Posizioniamo un componente “button” con nome d’istanza “btt” sullo stage e associamo la funzione changeMod all’evento MouseEvent.CLICK. Così facendo, cliccando sul pulsante, potremo attivare/disattivare il fullscreen:

btt.addEventListener(MouseEvent.CLICK, changeMod);

Ultima cosa ma importantissima: nel codice html che incorpora il filmato nella nostra pagina web non dimentichiamo di impostare il parametro “allowFullScreen” su “true“:

Qui potete vedere il filmato in azione.

Di seguito potete scaricare i files del mini-tutorial.

download: Flash Fullscreen AS3 (1.14MB) added: 11/07/2010 clicks: 83 description: Come impostare il Fullscreen in Flash con ActionScript 3.

 Invia questo articolo a un amico via email

(No Ratings Yet)

 Loading ...

Flash non girerà mai suoi “gioiellini” della Apple e questo l’abbiamo capito tutti e ce ne siamo fatti una ragione (forse???). Ma c’è chi si “ingegna” per ovviare ai divieti di zioSteve

Smokescreen è un progetto open source che permette la visualizzazione di contenuti Flash su iPhone/iPod/iPad. Smokescreen consente la conversione automatica dei contenuti Flash in JavaScript/html5.

Ecco una demo del progetto nel seguente video:

 Invia questo articolo a un amico via email

(No Ratings Yet)

 Loading ...

Nell’ultimo mese sono stato contattato da una adv agency che mi ha chiesto di realizzare un nuovo CMS per un sito dinamico (appartenente ad un loro cliente) e di apportare alcune modifiche anche alla parte client. Visualizzando i sorgenti del sito web ho avuto modo di constatare diversi errori di progettazione  e una moltitudine di scelte più o meno insensate dovute, probabilmente, alle scarse competenze di coloro che in passato hanno realizzato il sito in questione

Errore n°1: menu principale realizzato in Flash

Ebbene si, il primo errore è un errore SEO. Il menu principale e le photogallery dei prodotti sono state realizzate in Flash. Mentre per le photogallery la scelta di utilizzare Flash può essere condivisibile (anche se le soluzioni JS non mancano di certo, vedi qui e qui) il menu principale di un sito non va mai e poi mai realizzato in Flash. Bisogna realizzarlo in semplice HTML per permettere agli spider dei motori di ricerca di trovare le pagine del sito. Leggerezza confermata anche dall’assenza di una sitemap.

Errore n°2: layout tabellare

Il layout delle pagine web è stato realizzato con le tabelle senza rispettare gli standard web e senza tenere conto di una cosa importantissima come l’accessibilità. Errore gravissimo, nulla da aggiungere.

Errore n°3: pagine non dotate di url seo-friendly

Il dominio del sito in questione effettua un redirect ad un server dove è ospitato il sito. Tutte le pagine del sito, comprese quelle dei prodotti, non hanno url uniche. In pratica, tutte le pagine del sito rispondono all’indirizzo www.sitoinquestione.com. Nei motori di ricerca non sono indicizzate le pagine dei prodotti, altro errore SEO dunque (ogni prodotto doveva avere un indirizzo del tipo www.sitoinquestione.com/prodotto-xyz).

Errore n°4: il multilingua che ti farà impazzire

Questa è una vera e propria genialata. In pratica, il sito è multilingua (ita, eng, fra, esp) e per ogni photogallery (di ogni prodotto) sono stati realizzati 4 SWF del tipo:

- photogallery_prodotto_x_ita.swf
- photogallery_prodotto_x_eng.swf
- photogallery_prodotto_x_fra.swf
- photogallery_prodotto_x_esp.swf

e via così per le photogallery di tutti i prodotti. Era sufficiente realizzare un unico file SWF che caricava le informazioni dinamicamente: si inviavano all’SWF le variabili ID_prodotto e la lingua scelta e il gioco era fatto. Invece no, immaginate ora di fare una modifica, anche piccola, alla photogallery…risultato? Impazzire tra decine e decine di file FLA tutti uguali

Ho notato tanti altri piccoli errori ma credo di avervi fatto rabbrividire abbastanza Inoltre rischio di fare troppo la parte del Saputone e non mi sembra il caso

 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 ...

Oggi vediamo come realizzare un widget per FriendFeed utilizzando PHP e le API di FriendFeed. Si, lo so, esistono già i widget per i social network ma, siamo developers, le cose ci piace realizzarcele con le nostre manine

Cosa farà questo widget?

Visualizzerà il nostro stream di FriendFeed e sarà facilmente personalizzabile impostando opportunamente le seguenti variabili:

- width (larghezza del widget)
- borderColor (colore del bordo)
- backgroundColor (colore di sfondo)
- titleColor (colore del titolo)
- txtColor (colore del testo)
- font (tipo di font utilizzato)

Queste variabili saranno i parametri della funzione widgetCSS(), funzione, che includeremo tra i tag head della nostra pagina e che stamperà il codice CSS (sulla quale non mi soffermo molto):

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>PHP Widget per FriendFeed con SimpleXML e le API di FriendFeed</title>
<?php widgetCSS(“400″,”#3399CC”,”#E1E1E1″,”#FFFFFF”,”#3366CC”,”Verdana”); ?>
</head>

La funzione stamperà il codice CSS tramite degli echo impostando dinamicamente i valori come nell’esempio seguente:

echo ‘border-color:’ .$borderColor .’;';

Nella nostra pagina, dove faremo visualizzare il widget, includeremo la funzione widget (che fantasia eh?) che includerà il tutto tramite div e liste. I parametri della funzione sono il titolo del widget, lo username dell’utente FriendFeed e il numero di elementi da visualizzare:

function widget($title,$username,$number) {

echo ‘<div id=”widgetFF”>’;
echo ‘<div id=”widget_top”>’ .$title .’</div>’;
echo ‘<ul>’;

$xml = simplexml_load_file(‘http://friendfeed-api.com/v2/feed/’ .$username .’?format=xml’);

for ($i=0;$i<$number;$i++) {
echo “<li><img src=’icon.png’ alt=’widget icon’ />” .$xml->entry[$i]->body .”</li>”;
}

echo ‘</ul>’;
echo ‘</div>’;

}

Analizziamo la funzione:

La libreria SimpleXML di PHP5 legge l’API di FriendFeed richiesta in formato XML:

http://friendfeed-api.com/v2/feed/emawebdesign?format=xml

Ovviamente l’username è inserito dinamicamente. Con un ciclo FOR stampiamo a video il contenuto dell’elemento body dell’array XML:

$xml->entry[$i]->body

Niente di più semplice, l’inclusione della funzione è la seguente:

<?php widget(“My FriendFeed”,”emawebdesign”,10); ?>

Potete vedere il widget in azione qui e scaricare i files per darci un’occhiata più da vicino

download: WidgetFF (4.63KB) added: 07/03/2010 clicks: 85 description: Widget per FriendFeed realizzato con PHP e le API di FriendFeed

 Invia questo articolo a un amico via email

(No Ratings Yet)

 Loading ...

In ogni sito web non possono mai mancare paragrafi e blocchi di testo che è opportuno presentare con una grafica gradevole e ordinata. Tra le tante soluzioni oggi vediamo come stilizzare un box di testo servendoci di un immagine e dei CSS.

Nella nostra pagina web inseriamo i seguenti div ed incolliamo un paragrafo di testo, il classico lorem ipsum

<div id=”textbox“>
<div id=”topimg“><h1>Text Box</h1></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

All’interno del div “textbox” inseriamo un ulteriore div, topimg, che avrà un immagine di sfondo (con un gradiente da grigio a bianco) e conterrà il titolo del blocco di testo.

L’immagine che abbiamo realizzato è di 400px per 50px, e la posizioniamo in top senza ripetizione. Inoltre, optiamo per ornare il blocco di testo con un bordo:

#textbox {
width:400px;
height:auto;
margin:0;
padding:1px;
border-color:#336699;
border-style:solid;
border-width:2px;
}

#topimg {
width:400px;
height:50px;
margin:0;
padding:0;
background-image:url(img.jpg);
background-position:top;
background-repeat:no-repeat;
}

Per il paragrafo, scegliamo semplicemente il tipo di font e l’allineamento giustificato:

p {
margin:0;
padding:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-align:justify;
}

Ecco come appare il blocco di testo. Potete anche scaricare i files per visionarli direttamente

download: textbox CSS (1.54KB) added: 19/01/2010 clicks: 153 description: Blocco di testo stilizzato con i CSS

 Invia questo articolo a un amico via email

(1 votes, average: 4.00 out of 5)

 Loading ...

Oggi vi metto a disposizione un semplice menu accordion che ho realizzato utilizzando MooTools.

Oserei definire il menu estremamente “basilare”, sarà un gioco da ragazzi renderlo graficamente accattivante o anche cambiarne struttura semplicemente modificando il file CSS.

Per utilizzare il menu includete nella vostra pagina web i seguenti files:

<script type=”text/javascript” src=”mootools.js”></script>
<script type=”text/javascript” src=”accordion.js”></script>
<link rel=”stylesheet” href=”style.css” type=”text/css” />

Inserite i DIV:

<div id=”container_accordion”> il contenitore
<div id=”accordion”> il menu

e quindi le varie voci con i rispettivi contenuti (non dimenticate gli identificatori toggler ed element):

<h3 class=”toggler“>Voce 1</h3>
<div class=”element“>
<a href=”#”>Link 01</a><br />
<a href=”#”>Link 02</a><br />
<a href=”#”>Link 03</a>
</div>

Potete vedere il menu in azione qui.

Di seguito potete scaricare il pacchetto ZIP contenente tutti i files

download: Menu Accordion (28.43KB) added: 30/10/2009 clicks: 209 description: un semplice menu accordion realizzato con MooTools

 Invia questo articolo a un amico via email

(No Ratings Yet)

 Loading ...

InstantShift ha raccolto 99 templates HTML/CSS di alta qualità. Alcuni sono davvero eccellenti e vale la pena dare un’occhiata.

Tutti gli altri templates potete visionarli qui: 99 High-Quality Free (X)HTML/CSS Templates

 Invia questo articolo a un amico via email