13 - December - 2010

Velocizzare il Web parte II

PREMESSA

Buon Giorno a tutti. Oggi sono qui per scrivere la seconda parte della Mini-Guida dedicata alla velocizzazione del Web, in particolare si cerca di velocizzare la navigazione dell utente rendendola più dinamica e istantanea.
Nella seconda parte parleremo delle Gallery fotografiche le tanto amate (o odiate?) gallery che si trovano su quasi tutti i siti web. Molte sono belle e carine da vedere e danno un impressione di velocità di caricamento quasi immediata. Per esempio gli Album di Facebook, oppure altre si contornano di effetti di zoom In e zoom Out come la sezioni immagini di Google Immagini ma come fanno a dare queste funzionalità aòòe fotografie ?
Ebbene i fattori sono solo due

  • Un ottima Banda per i il trasferimento dati da Server a Client
  • Utilizzo di Jquery

Sulla prima c’è poco da dire, anche perchè non è di quello che ci vogliamo occupare, ci concentreremo piuttosto sul secondo punto capendo come si utilizza jquery per rendere una Gallery immediata e senza continui “refresh” della pagina per cambiare fotografia.

STRUMENTI NECESSARI

Se avete già un vostor sito web o comunque lo state sviluppando avrete gia la maggior parte dei componenti necessari , altrimenti seguite la lista qui sotto:

  1. Un I.D.E. ovvero un programma che vi permetta di sviluppare siti web , basterebbe anche l’editor di testo ma lo sconsiglio anche perchè esistono prodotti gratuiti come Notepad++ oppure NetBeans 6.9.1 che sono veramente validi per sviluppare. Se non badate a spese o siete Sviluppatori Microsoft allora vi consiglio Adobe Dreamweaver CS5 , Expression Web 4 , Visual Studio 2010 in versione Ultimate o Professional (Costa molto) oppure in versione Express (Gratuita)
  2. Conoscenze di HTML 4 e XHTML 4 per il linguaggio prettamente Web
  3. Conoscneze di PHP (5 o superiore) o ASP.Net (3.5 o superiore)
  4. Conoscenze Elevate di Javascript
  5. Voglia di fare

Parte 1 : Creazione index.html

Per prima cosa impostiamo la pagina dove vedremo il risultato del nostro lavoro, la pagina sara simile alla precedente ecco qui il codice :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>jQuery plugin Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.slideshow.js"></script>
        <link rel="stylesheet" href="example.css" type="text/css" />
    </head>
    <body>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div id="img">
            <img src="http://www.kiwisi.com/wp-content/themes/atahualpa/images/kiwi68x68.png" data-caption="Questo è il caption della prima immagine" title="I love Kiwisi" />
            <img src="http://www.apple.com/euro/imac/images/overview_hero4_20100727.png#hero-4" title="Imac" data-caption="Questo è il caption della seconda immagine" />
            <img src="http://www.ydraweb.com/assets/images/Blog/2010/blog/jquery-logo.png" data-caption="" />
            <img src="http://antihotlink.topflood.com/googleimages-shunter.php" data-caption="" />
        </div>
        <div>&nbsp;</div>
    </body>
</html>

Il codice è molto semplice ma comunque vanno prestate le dovute attenzioni ad alcuni Tag come i seguenti :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.slideshow.js"></script>
<link rel="stylesheet" href="principale.css" type="text/css" />

Il primo è il tag che racchiude il codice sorgente di Jquery in versione 1.4.2 , noi lo andiamo a prelevare da Googleapis, in poche parole è un enorme dispensa di Api e codice OpenSource. Il secondo tag invece cerca il source (src) della mia classe , fatta in jquery, per creare questa slideshow “istantanea” . Il codice lo trovate scorrendo l’articolo. Nel terzo tag si richiama il codice sorgente del CSS (Cascading Style Sheet) che comporrà lo stile della nostra index.html.

Parte 2 : Creazione di principale.css

Come accennato prima ora diamo uno “stile” alla nostra piccola pagina index.html , il codice è minimale ed essenziale per chi volesse ampliare il progetto prenda il codice sorgente e lo modifichi a suo piacere.

body
{
   margin-left:20px;
}

a
{
   display:block;
   float:left;
   margin-left:5px;
   padding:3px;
}

a:first-child
{
   margin-left:-10px;
}

.flash-nav, .flash
{
   padding:10px;
   width:400px;
}

.flash
{
   width:600px;
}

.flash img
{
   display:block;
   margin:0 auto;
   border:10px #c0c0c0 solid;
}

.clearfix:after
{
   content: ".";
   display: block;
   height: 0;
   line-height: 0px;
   clear: both;
   visibility: hidden;

}

.clearfix
{
   display: inline-block;
}

Non mi soffermo molto a descrivere il Css per due ragioni

  1. Questo non è un tutorial sui css , sarebbe fuorviante
  2. E’ un css molto essenziale ed è semplice da capire ed implementare

A questo punto non ci resta che costruire il cuore della nostra applicazione , il file jquery.slideshow

Parte 3 : Creazione di jquery.slideshow.js

Per ragioni di spazio la classe la potete trovare QUI la classe è ben commentata ed è anche molto facile da capire per chi mastica Javascript. l’unico punto su cui vorrei porre l’attenzione è il pezzo in cui si possono modificare alcuni parametri

/* //----- Parametri di default , si possono cambiare
       * imgHolder     - Elemento che prende in carico l'immagine
       * imgFlashHolder - Elemento per il messaggio flash
       * iRunTotal    - Quante volte il messaggio flash viene visualizzato?
       * iFlashSpeed  - velocita in millisecondi
       * imgFlashTextHolder - Titolo per l'immagine // vedi esempio
       * imgTitle - attributi dell immagine
       * imgCaption - caption dell immagine
	   * imgNavigator - Navigatore per la slideshow
       * runSlideLinkText - Il valore testuale del link alla slideshow
    */
    $.fn.SlideShow.default_options = {
        iRunTotal:0, iFlashSpeed:3000, iHolder:'#img img',imgTitle:'title',
        imgCaption:'data-caption',imgNavigator:'.flash-nav', runSlideLinkText:'SlideShow',
        imgFlashTextHolder:'.flash-text'
    };

Questi parametri sono completamente customizzabili per la slideshow , indipendentemente dal codice di index.html. Questo è un grande vantaggio perchè rendere questo codice piu espanbile i parametri sono commentati , come tutto lo script del resto Particolare attenzione va posta sulla parte del Metodo

 // Avvio della slideshow
            runner: function() {
                // si stoppa se si incontrano degli ostacoli
                if(params.iRunTotal != 0 && counter > params.iRunTotal) {
                    window.clearInterval(timer);
                } else {
                    // Cosa succede se il prosimo elemento ha lunghezza 0
                    if($tmpChild.length <= 0) {
                        $tmpChild = $firstChild;
                        counter++;
                    }
                    $(params.iHolder).hide();
                    $tmpChild.fadeIn('slow');
                    $(params.imgFlashTextHolder).html(methods.getImgText.apply(this,[$tmpChild])).hide().fadeIn('slow');
                    $tmpChild = $tmpChild.next();
                }
            },
            // Prendiamo l'immagine 
            getImgText:function(node) {
                return '<h4>'+node.attr(params.imgTitle) + '</h4><br />' + node.attr(params.imgCaption);
            }
        };
        // inizializzo il puglin
        methods.init.apply(this,[]);
        // Chiamo il callback per il setup
        $.isFunction(callback) && callback.call(this);
        
        this.each(function() {
           // creiamo un istanza per ogni oggetto (immagine)
           new instance(this,params).init({total:total});
        });

        timer = window.setInterval(function(){methods.runner.apply(this,[]);}, params.iFlashSpeed);

difatti li avviene la vera e propria “costruizione” della slideshow impostando tutti i parametri necessari ed editabili , come abbiamo visto precedentemente. Di per se non c’è molto da aggiungere l’unica cosa che vi dico è Provatela e poi commentate questo Articolo oppure contattami per qualsiasi domanda !

Licenza Creative Commons
Questo articolo è sotto licenza : Creative Commons Attribuzione – Non commerciale – Condividi allo stesso modo 2.5 Italia License.

01 - December - 2010

Velocizzare il Web parte I

PREMESSA

Ho deciso di parlare di un argomento molto recente ovvero la velocizzazione delle pagine web 2.0 , Ma cosa significa?

Dal lato del cliente significa avere un web pressoché istantaneo , dove le richieste che vengono fatte dal broswer al server del sito web  non rallentano o ricaricano (tramite refresh della pagina) il sito web. Quando si verificano questi “ricaricamenti”?

Quando per esempio si effettua un Login , oppure si cambia pagina di un catalogo di prodotti , oppure si guarda una galleria di immagini, in sostanza quando noi effettuiamo una richiesta , tramite il nostro broswer, ad un sito web il quale dovrà elaborare dei dati e darti una risposta.

Dal lato del programmatore velocizzare il web significa applicare ad esso dei componenti , di solito scritti in javascript, che separano le operazioni e le eseguono in background in modo Asincrono, cosi facendo mentre l’utente naviga sulla sua pagina il nostro Server elabora la sua richiesta senza interrompere la navigazione del utente.

Tutto questo porta ad una navigazione più piacevole e soprattuto con la stessa sicurezza di prima ! Ovviamente per usufruire di queste nuove potenzialità, il cliente dovrà avere Javascript abilitato nel suo broswer.

STRUMENTI NECESSARI

Se avete già un vostor sito web o comunque lo state sviluppando avrete gia la maggior parte dei componenti necessari , altrimenti seguite la lista qui sotto:

  1. Un I.D.E. ovvero un programma che vi permetta di sviluppare siti web , basterebbe anche l’editor di testo ma lo sconsiglio anche perchè esistono prodotti gratuiti come Notepad++ oppure NetBeans 6.9.1 che sono veramente validi per sviluppare. Se non badate a spese o siete Sviluppatori Microsoft allora vi consiglio Adobe Dreamweaver CS5 , Expression Web 4 , Visual Studio 2010 in versione Ultimate o Professional (Costa molto) oppure in versione Express (Gratuita)
  2. Conoscenze di HTML 4 e XHTML 4 per il linguaggio prettamente Web
  3. Conoscneze di PHP (5 o superiore) o ASP.Net (3.5 o superiore)
  4. Conoscenze Elevate di Javascript
  5. Voglia di fare

PARTE 1 Creazione del index.php

La mia logica di guida è sempre stata quella di applicare la pratica immediatamente e spiegarla con nozioni di teoria passo passo , anche perchè scrivere pagine di teoria noiosa con 2 righe di codice alla fine è un po fuorviante perchè essendo pure io programmatore so che quando cerco qualcosa cerco sopratutto il codice.

Detto questo procediamo, in questa prima parte ci occuperemo di un form per il Login, il classico strumento che c’è in ogni sito web 2.0. Per farlo ovviamente dovviamo creare una pagina e chiamarla index.php , dopo di che apritela con il vostro editor preferito e inserite questo codice :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Primo form asincrono</title>

	</head>
	<body>
		<form id="MyForm" action="#" method="post" >

			<input type="text" id="name" name="name" value="Testo"/>  <br>
			<input type="hidden" id="hidden" name="hidden" value="hiddenVlaue"/><br>
			<input type="password" id="password" name="password" value=""/><br>
			<input type="checkbox" id="chbox1" name="chbox1"  checked="checked"/><br>
			<input type="checkbox" id="chbox2" name="chbox2" /><br>

			<br><br>
			<input type="radio" id="radio1" name="choice" value="1" />
			<input type="radio" id="radio2" name="choice" value="2"/>
			<input type="radio" id="radio3" name="choice" value="3" checked="checked"/>
			<input type="radio" id="radio4" name="choice" value="4"/>
			<br><br>
			<select id="Select" multiple="multiple">

				<option value="option1">Opzione 1 </option>
				<option value="option2">Opzione 2</option>
				<option value="option3">Opzione 3</option>
			</select>
			<br><br>
			<textarea id="textarea">La mia text area</textarea>
			<br><br>
			<input type="button" value="Invia i dati" name="Send" onclick="SendData();"/>

		</form>
	</body>
</html>

Questa è la nostra pagina index.php , molto statica ovviamente , salvatela e provate a vedere se funziona aprendola con qualsiasi web broswer (Firefox , Internet Explorer 8(o 9 beta) , Google Chrome , Safari oppure Opera). In questo esempio non c’è nessuno stile per la pagina , è proprio “Grezza”, starà a voi ,successivamente, modificare o implementare il codice nel modo che ritenete più giusto. Come potete notare i nomi, gli id e anche i value li ho messi in inglese, anche in questo caso ogni modifica la dovete fare nel modo che ritenete più opportuno.

Ora passiamo al cuore dell applicazione , la parte PHP e la parte AJAX.

Parte PHP

Create un nuovo file e chiamatelo data.php e all interno dovrete scrivere questo codice :

<?php

var_dump($_POST);

?>

Semplice no ? Questo piccolo file effettua una visualizzazione della struttura di $_POST tramite la funzione var_dump di PHP (4 o superiore) , questo piccolo file sarà molto utile successivamente quando lo richiamermo in AJAX. Se non conoscete var_dump Approfonditelo.

Parte AJAX

Ora non ci resta che creare il nostro file .js (javascript) , create un nuovo file e chiamatelo AJAX_Form_Classe.js all interno di questo file verrà scritta la Mia classe per gestire il form in modo asincrono, il codice, essendo lungo , potete visualizzarlo nel link seguente  ->AJAX_Form_Classe per scaricarlo fare semplicemente copia e incolla nel vostro file.

In questa Classe c’è un metodo che si chama :

AjaxFormSubmitter.prototype.FetchData = function ()

Esso contiene uno Switch(Tagname) , quello è la parte che dovrete modificare se modifcate il form precedentemente postato. Per fare ciò dovete prima modificare il form e poi effettuare la modifica al interno del metodo sopracitato , ricordatevi che gli ID e i Nomi devono essere uguali sia nel form che ne metodo.

Conclusione

Ora abbiamo tutti gli strumenti necessari ,  ma ancora non possiamo provare il caricamento asincrono effettivamente perchè dobbiamo modificare il file index.php per includere tutti i nuovi file che abbiamo creato. Per fare ciò apriamo index.php e sotto il titolo , tag <title></title> aggiungiamo :

<Script src="http://code.jquery.com/jquery-1.4.4.js" type="text/javascript"></Script>
<Script src="AJAX_Form_Classe.js" type="text/javascript"></Script>
<script type="text/javascript">
function OnLoading ()
		{
			alert("Sto caricando");
		}

		function OnSuccess (data)
		{
			alert ("Richiesta completata " );
			alert(data);
		}

		function OnError (XML)
		{
			alert(XML);
		}
		function SendData(){

				var AjaxForm = new AjaxFormSubmitter("MyForm");
				AjaxForm.SetURL("data.php");
				AjaxForm.SetMethod("POST");
				AjaxForm.SetOnSuccess(
					function(data)
						{
							OnSuccess(data);
						}
					);
				AjaxForm.SetOnFailure (
					function (error)
					{
						OnError(error);
					}
				);
				AjaxForm.SetOnLoading (
					function (){
						OnLoading();
					}
				)
				AjaxForm.Submit();
		}
		</script>

Questa è la parte del index.php che si occuperà si effettuare il caricamento asincrono in base alla richieste dell utente tramite il form. la parte fondamentale è quella che riguarda la funzione

function SendData()

dato che viene richiamata al form principale alla pressione del tasto Invia, questa funzione esegue la chiamata asincrona passando alla classe AJAX tutti i dati del Form e , mentre AJAX elabora i dati, fa visualizzare un alert con scritto “Sto caricando”. Successivamente se tutto va a buon fine allora visualizza un messaggio di successo in caso contrario visualizza un messaggio di errore. Salviamo tutto e proviamolo , ricordatevi che il nome scritto qui :

<Script src="AJAX_Form_Classe.js" type="text/javascript"></Script>

Deve corrispondere al nome del file che avete creato con la classe AJAX vista precedentemente. Da notare che includiamo anche :

<Script src="http://code.jquery.com/jquery-1.4.4.js" type="text/javascript"></Script>

Questo è il codice sorgente della classe Jquery ci serve per creare qualche effetto grafico accattivant nel nostro form durante il caricamento e per qualche funzione utile nel nostro file AJAX , per qualsiasi informazione visitate il sito ufficiale.

Ora non vi resta che testarlo e per qualsiasi chiarimento non esitate a scrivere commenti ! oppure contattatemi sul mio sito web ufficiale

Licenza Creative Commons
Questo articolo è sotto licenza : Creative Commons Attribuzione – Non commerciale – Condividi allo stesso modo 2.5 Italia License.

21 - November - 2010

Arrivano le guide di kiwisi.com

Stanno arrivando! Anzi, la prima è già tra noi…

Il nostro caro Andrea ha sfornato la prima guida e per di più in licenza Creative Commons (e quindi riutilizzabile da tutti, a patto che citiate la fonte).

L’autore, nonché collaboratore e co-mantainer di kiwisi.com mi ha già informato che presto ne verranno pubblicate altre. Invito tutti i lettori e scriverci e o lasciare un commento con le vostre impressioni e le vostre richieste.

Stay tuned,

Diego