(No Ratings Yet)

 Loading ...

CKeditor (ex FCKeditor) è sicuramente uno degli editor wysiwyg più conosciuti e utilizzati nei CMS. Il suo utilizzo è davvero semplice:

- si carica l’editor nello spazio web via FTP
- si includono i files necessari nella pagina dove lo si vuole utilizzare
- si crea un’istanza con una sola riga di codice

window.onload = function() {
CKEDITOR.replace( ‘nome istanza’ , {
toolbar : ‘Basic’
});

Una delle cose fondamentali, nell’utilizzo di CKeditor in una web application, è la possibilità di leggere e scrivere il contenuto dell’editor. Per queste e per tante altre opzioni, CKeditor, mette a disposizione delle API javascript molto comode e facili da utilizzare. Vediamo ora come poter leggere e scrivere il contenuto dell’editor grazie ai metodi getData e setData:

Per leggere il contenuto dell’editor

var text = CKEDITOR.instances["nome istanza"].getData();

Per scrivere il contenuto nell’editor

CKEDITOR.instances["nome istanza"].setData(“testo di prova”);

E tu quale editor wysiwyg utilizzi nei tuoi web projects?

 Invia questo articolo a un amico via email

(No Ratings Yet)

 Loading ...

Negli ultimi tempi abbiamo visto nascere e affermarsi servizi di url shortening come tinyurl e bit.ly. Questi servizi permettono di convertire, con un semplice click, una url lunga in una url corta, una short url.

A cosa servono le short url?

Nell’era dei social media, gli utenti, hanno esigenza di condividere i propri contenuti ed è sicuramente più comodo utilizzare url corte piuttosto che lunghe ma, soprattutto, per servizi come Twitter dove è possibile digitare soltanto 140 caratteri per ogni aggiornamento, l’utilizzo di short url è assolutamente necessario per non sprecare il numero di caratteri a disposizione.

Per una precisa strategia aziendale o, magari, a causa di un ego gigantesco potreste voler utilizzare un url shortener personalizzato, installato su un vostro dominio. Io potrei utilizzare un dominio tipo ema.li (sarà libero??)

Per tale scopo potete utilizzare YOURLS, una serie di script PHP che vi permetteranno di mettere in piedi il vostro url shortener personalizzato su un dominio che supporti PHP, MySQL e il modulo di Apache mod rewrite. E’ scontato che dovrete registrare un dominio che sia il più corto possibile, altrimenti la cosa non avrebbe senso

Yourls vi darà, inoltre, la possibilità di decidere se rendere pubblico il servizio o mantenerlo privato. Mette a disposizione delle API, un bookmarklet e, soprattutto, degli strumenti di analisi per i vostri short url…la cosa più importante di tutte

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

Si può conoscere la url a cui punta una short url di bit.ly in modo semplice grazie a PHP e alle API. Bisogna registrarsi ed ottenere una API Key, dopodichè basterà impostare i parametri come nel seguente esempio:

$apiKey = "";
$login = "";
$short_url = "http://bit.ly/cBJlDQ";
$xml = simplexml_load_file('http://api.bit.ly/v3/expand?shortUrl=' .$short_url .'&format=xml&login=' .$login .'&apiKey=' .$apiKey);
if ($xml!=false) $long_url = $xml->data[0]->entry->long_url;
 
echo "LONG URL: " .$long_url;

Gli unici parametri da configurare sono login (la username di bit.ly), la API Key e la short url.

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

Per recuperare il titolo della  pagina web e il dominio di appartenenza tramite JavaScript:

<script type="text/javascript">
 
function title() {
var result = window.document.title;
return(result);
}
 
function domain() {
var result = window.document.domain;
return(result);
}
 
window.onload = function() {
alert("title:" + title() + " - domain:" + domain());
}
 
</script>

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

Oggi ho deciso di condividere una risorsa che potrebbe risultare molto utile soprattutto per chi lavora con Flash e i file SWF. Si tratta di una classe JavaScript, che ho realizzato con il paradigma OOP (programmazione orientata agli oggetti), di soli 4KB con cui potrai embeddare filmati Flash nelle tue pagine web in modo davvero semplice e veloce.

Il nome di questa classe è EWD Flash Embed ed è una valida alternativa ad altre risorse già note come SWFObject.

La classe JS è semplicissima da utilizzare (basta leggere la documentazione per tutti i dettagli) è cross-browser, W3C compliant e soprattutto è gratuita: la licenza con cui la rilascio è la Creative Commons Attribuzione-Non commerciale-Non opere derivate 2.5 Italia.

Ecco un esempio di utilizzo:

var fl = new flash();
fl.width(200);//Larghezza filmato
fl.height(200);//Altezza filmato
fl.src(“filmato_flash.swf”);//Nome del file
fl.align(“middle”);//Allineamento
fl.play(true);
fl.scale(“showall”);
fl.noplugin(“Per visualizzare correttamente questa pagina hai bisogno del Flash Player!”,true);
fl.embed(“mio_div”);//ID dell’elemento dove embeddare il filmato

Per scaricare la classe e per tutte le info e i dettagli potete visualizzare la pagina ufficiale: EWD Flash Embed

 Invia questo articolo a un amico via email