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

Qual’è la cosa più importante per un sito web? I contenuti? Certo, ma non dimentichiamo che anche il sito con i migliori contenuti del mondo sarebbe nulla senza un buon traffico. Il traffico, le visite ricevute, sono la cosa più importante insieme alla qualità dei contenuti.

Che tu sia un blogger, che tu abbia un sito aziendale o un e-commerce, inevitabilmente, avrai a che fare con la Web Analytics. La Web Analytics è una metodologia di analisi che permette di analizzare il traffico di un sito grazie a strumenti potenti e, spesso, gratuiti. Il più famoso e utilizzato strumento di Web Analytics gratuito è Google Analytics. Chi ha un sito web ha bisogno di valutarne l’efficacia, di analizzare gli accessi e i comportamenti dei visitatori al fine di correggere, in tempo reale, eventuali errori di comunicazione commessi.

Non sfruttare le possibilità offerte dalla Web Analytics significa non potersi rendere conto della bontà del lavoro svolto, non poter rimediare ad eventuali errori commessi e non poter pianificare strategie per migliorare la comunicazione ed incrementare il ROI. In parole povere, il successo di un sito web, passa inevitabilmente attraverso un quotidiano lavoro di analisi qualitativa degli accessi. La Web Analytics è fondamentale. Soltanto la Web Analytics può fornire risposte a domande come queste:

- Il numero di visitatori cresce/diminuisce?
- Come migliorare l’usabilità del sito?
- Come ottimizzare i contenuti del sito?
- Quali sono le keywords che rendono e/o convertono?
- Quali sono i siti attraverso i quali arrivano i visitatori?

Vediamo ora come iniziare a monitorare gli accessi

Strumenti come Google Analytics si basano sulla tecnica del “page tagging“. Dopo aver aperto un account, e dopo aver aggiunto il sito da monitorare, otterrai poche righe di codice JavaScript che dovrai incollare in tutte le pagine del tuo sito web. Ricorda che il codice va inserito in tutte le pagine del sito al fine di non perdere informazioni preziose poichè, i visitatori, possono raggiungere il tuo sito web dai motori di ricerca “entrando” da qualsiasi pagina, non per forza dalla home page. Una soluzione “tecnica” opportuna è quella di inserire il codice in un file a parte, automaticamente incluso in tutte le pagine del sito. In questo modo inserirai il codice una sola volta e, in caso di modifiche, modificherai una sola volta. Se il tuo sito è composto da molte pagine otterrai un bel risparmio di tempo e fatica

Google Caffeine e velocità di caricamento dei siti

Abbiamo già parlato di Google Caffeine e dell’importanza che ha oggi (molto più di ieri) la velocità di caricamento di un sito web come fattore per un buon posizionamento sui motori di ricerca. Avere un sito “leggero” che si carica velocemente è fondamentale per essere competitivi lato SEO. Il codice JavaScript di Google Analytics che viene incluso nelle pagine del sito, anche se molto leggero, risiede comunque su un server esterno e, tutto quello che risiede su un server esterno, ha tempi di caricamento più lunghi rispetto alle pagine del proprio sito web.

Questo ci convince che è opportuno inserire il codice di tracciamento alla fine delle pagine, subito prima della chiusura del tag body. Posizionando il codice alla fine delle pagine si risolvono eventuali problemi di rallentamento mentre vengono caricati i contenuti del sito. Soltanto quando tutti i contenuti del sito sono stati caricati viene eseguito il codice JavaScript e viene registrato il visitatore.

Sono dell’idea che la Web Analytics sia meglio “lasciarla” ai professionisti del settore, gli unici in grado di comprendere la notevole mole di informazioni restituite dagli strumenti di analisi e misurazione. Ciò non toglie che, con strumenti come Google Analytics, anche il più inesperto avrà modo di monitorare gli accessi al proprio sito e di rendersi subito conto di quello che funziona e quello che non funziona, di dove si è commesso errori e dove si è “visto giusto”. Se hai la possibilità di rivolgerti ad esperti meglio, altrimenti, non rinunciare al fai da te. La Web Analytics è fondamentale (quante volte l’ho detto? ) per il successo del tuo sito web

 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

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

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

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

(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