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

Con l’articolo SEO: come impostare correttamente le url del proprio sito/blog? abbiamo visto come si devono impostare le url di un sito web per ottenere dei benefici lato SEO.

Oggi vediamo come realizzare un permalink utilizzando il linguaggio PHP. Un permalink è un link permanente che punta ad una pagina web (o anche a un post di un blog). Il permalink non cambia nel tempo, questo permette di identificare univocamente una risorsa sul web e, nel caso di link in entrata o citazioni, non si perderà traffico modificando il contenuto…salvo aver commesso errori di SEO Copywriting. Ma questo è un altro discorso

Nelle nostre web applications realizzeremo i permalink a partire da stringhe di testo. Nel caso degli articoli di un blog è opportuno trasformare in permalink il titolo stesso degli articoli. Il tutto semplicemente grazie all’utilizzo di una funzione come la seguente:

function permalink($string) {
$string = strtolower($string);
$string = preg_replace("/[^0-9A-Za-z ]/", "", $string);
$string = str_replace(" ", "-", $string);
while (strstr($string, "--")) {
$string = preg_replace("/--/", "-", $string);
		}
return($string);
}

Passiamo come parametro il titolo del post (o comunque un testo ottimizzato SEO) ed otterremo il testo correttamente formattato, pronto per essere utilizzato in un permalink. Gli spazi saranno sostituiti dal carattere – (meno), carattere consigliato per separare le parole in una url. Caratteri accentati ed apici vari verranno rimossi, ricordiamoci che un permalink è l’indirizzo di una pagina web e non tutti i caratteri sono consentiti.

Ecco perchè è utile utilizzare una funzione ad hoc

p.s ora tocca a te: la funzione non è perfetta…se trovi il problema segnalalo nei commenti

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

Da sempre mi occupo di progettazione e realizzazione di CMS e Web Applications in generale e, devo dire, che è un lavoro davvero interessante e stimolante. Oggi voglio sottolineare la grande importanza che ha la fase di analisi nella progettazione di una web application.

Uno degli errori più gravi che commette un giovane web developer con poca esperienza è quello di non preoccuparsi di analizzare con grande cura tutto quello che riguarda la web application che deve sviluppare. Inizia a scrivere righe e righe di codice ma questo lo porterà molto presto ad incappare nei primi problemi, giusto per fare qualche esempio:

- Non ha previsto qualcosa
- Ha dimenticato qualcosa di importante
- Deve riscrivere codice poichè funzionante ma l’obiettivo era leggermente diverso
- Non ha adottato la tecnica OOP e non ha previsto la “modularizzazione dell’applicazione”, un errore di progettazione, lo costringerà probabilmente a dover rivedere l’intera applicazione

Un programmatore viene in genere indicato come “analista programmatore” per un motivo ben preciso: non si occupa di scrivere codice soltanto ma bensì di analizzare un problema (o l’esigenza di un cliente), individuare la soluzione per poi implementare il progetto “funzionante” attraverso la stesura del codice. Nella fase di analisi nulla deve essere lasciato al caso, tutto deve essere previsto, per ogni problema deve essere stata trovata la soluzione più opportuna e performante.

Un consiglio che mi sento di dare è quello di adottare il pattern MVC per l’architettura dell’applicazione e di aiutarsi con tabelle e modelli E/R per la progettazione e realizzazione del database. Scrivere una documentazione dettagliata durante la fase di analisi è un dovere “verso se stessi” perchè, in futuro, alcuni concetti dell’applicazione potrebbero andare dimenticati ed è opportuno avere sempre a disposizione documenti che descrivano tutti gli aspetti e i comportamenti dell’applicazione in modo chiaro.

Un altro consiglio che mi sento di dare è quello di prevedere che l’applicazione sia “modulare“. Suddividere l’applicazione in moduli agevolerà la manutenzione del codice. Pensiamo, ad esempio, a un futuro dove sarà necessario modificare la parte dell’applicazione che si occupa di gestire la pubblicazione di news. Avere la possibilità di lavorare al modulo “news” (che conterrà i files necessari al suo funzionamento: inserimento, modifica, cancellazione, ricerca, visualizzazione) ci permetterà di ottimizzare i tempi delle modifiche senza dover intervenire in tutti i files dell’applicazione. Magari prevedere un modulo “plugins” per la gestione automatizzata dei vari moduli sarebbe una funzionalità che renderebbe la nostra applicazione a dir poco eccellente dal punto di vista degli aggiornamenti e dell’espansione delle funzionalità.

Ultimo consiglio, nella fase di analisi, ritengo un fattore di grande importanza quello di prevedere un “core” con cui sviluppare l’intera applicazione. Con core intendo una serie di classi/oggetti che si occuperanno della gestione delle situazioni critiche e degli aspetti fondamentali per il funzionamento dell’applicazione. Ad esempio:

- una classe “database” per le interazioni col database
- una classe “ftp” per la gestione dei files via ftp
- una classe “session” per la gestione delle sessioni utente

Più altre classi personalizzate per compiti specifici. Più è elevata la qualità del core più ne beneficerà il programmatore durante la stesura del codice. Adottare un approccio “object oriented” permette, inoltre, di rendere il codice “riutilizzabile” e offre la possibilità di modificare i comportamenti “interni” senza dover intervenire sull’interfaccia.

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

Sul blog dell’amico Andrea Pernici trovate un mio guest post dove spiego come esportare applicazioni Adobe AIR da Flash. L’articolo in questione è un tutorial con il quale illustro come realizzare una semplice applicazione AIR che permette di twittare dal desktop.

Ecco il link all’articolo: Come realizzare una semplice applicazione Adobe AIR per twittare dal desktop

p.s sul blog di Andrea trovate in alto a destra le icone sociali per seguirlo via RSS, Twitter e Facebook; vi consiglio di seguirlo

 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