“Kohana è un FRAMEWORK PHP 5 che usa la struttura MODEL VIEW CONTROLLER. Questo framework mira essenzialmente ad essere SICURO, LEGGERO e FACILE da usare.”

Premessa

Per prima cosa voglio indicarvi il link alla Home page di Kohana, e poi spiegarvi il perchè ho deciso di parlarvi di questo framework.

Beh, è molto semplice, in questi ultimi tempi ho provato molti framework per lo sviluppo in PHP partendo da Zend, CakePHP, per poi fermarmi su CodeIgniter, con il quale sono rimasto per un po’ di tempo; fino a quando non ho scoperto il suo fratellino “minore” Kohana, che a mio modesto parere è il migliore tra quelli citati.

Motivazioni

Una su tutte è la sua semplicità di utilizzo, pur non avendo una vasta documentazione, anzi la definirei anche piuttosto scarna, soprattutto se la paragoniamo a quella di CodeIgniter, la migliore.

Kohana riesce, come dire a “farsi capire”, infatti non passerà molto tempo dal primo utilizzo che inizierete subito ad entrare nell’ottica giusta per sfruttarlo al meglio, non che gli altri framework siano così complicati, ma con questo vi verrà quasi naturale programmare nel modo più corretto possibile.

Ma la cosa che lo rende più interessante sono senza dubbio i suoi Moduli, con i moduli sarete in grado di scrivere pezzi di codice indipendenti da poter integrare in una qualsiasi applicazione.

Ad esempio, potete creare un’unica “gestione News” e integrarla con facilità nelle vostre applicazioni, in questo modo potrete concentrarvi di più sull’ottimizzazione del codice, senza perdere tempo a riscriverlo ogni volta, ovviamente questa operazione è possibile farla anche con i framework sopra citati ma con Kohana il tutto è stato reso più semplice e funzionale.

Infine l’ultimo punto di forza di cui voglio parlarvi è sicuramente la tecnologia su cui si base questo fantastico strumento, ovvero, PHP 5 OOP grazie alla programmazione ad oggetti offerta da PHP 5 sarete in grado di sovrascrivere delle funzioni astrarre delle classi e definire la visibilità di funzioni e variabili, rendendo tutta la vostra applicazione più sicura.

Conclusione

Quindi se state cercando un framework da usare per le vostre applicazioni PHP Kohana è sicuramente da tenere in considerazione, e nel mio caso è stata anche la scelta definitiva.

Buongiorno, è da qualche tempo che non ci facciamo sentire, ma sapete com’è, avviare una nuova attività è bello ma anche impegnativo; comunque oggi voglio mostrarvi un piccolo trucchetto di jQuery, magari vi potrebbe servire.

Avete mai avuto bisogno di modificare una proprietà di tutti gli elementi della pagina? Se la risposta è si allora continuate a leggere e scoprirete come fare!

Ecco il codice :

$(document).ready(function(){
    $('*').css('font-size','20px');
});

Spiegazione :

Messo in questo modo non ha molto senso perchè avreste potuto metterlo da CSS a tutti gli elementi della pagina, ma era solo per fare un’esempio, e invece che metterlo nel document.ready potreste metterlo al click di un pulsante o qualsiasi altro evento, l’unico limite è l’immaginazione.

Spero di esservi stato un pochino utili , ciao e alla prossima!!

Qui potete trovare una demo dello script, se volete potete vedere i vostri album inserendo semplicemente nell’url della demo

?user=lastfm_username

Mentre per visualizzarlo con classi diverse potete usare il parametro:

?class=cd
?class=vinyl
?class=jewel

Demo : http://sparkinweb.com/demo/lastfm/?class=jewel

Per comprare lo script dovrete registrarvi su CodeCanyon.net.

Troverai un blog utilissimo da cui potrai attingere numerose e utili informazioni del mondo web.
Per contattarci vai nella pagina dei Contatti e compila il form e riceverai la nostra risposta in poche ore.

Lo so è da molto che non postiamo qualcosa d’interessante ma siamo stati presi parecchio con il lavoro, ma con l’anno nuovo vedremo di rimediare con qualche articolo succulento e sfizioso, nel frattempo voglio darvi l’opportunità di accaparrarvi un invito al nuovo sistema di comunicazione di Google Wave, l’unica cosa che dovrete fare è commentare questo articolo e spiegare perchè avete bisogno di Google Wave, quelli che mi convinceranno di più riceveranno l’invito!!

Per chi non sapesse cosa sia Google Wave eccovi un video che vi spiega brevemente:

Un wireframe è composto da dei blocchi, senza colore in scala di grigio, con il nome o degli appunti al loro interno.

I vantaggi di questa tecnica sono rappresentati da questi 2 punti:

Traduzione da appunti o pensiero in una prima forma grafica.
La possibilità di mostrare al cliente questa bozza così da rivedere le sezioni senza stravolgere la grafica, che sarà solo successivamente sviluppata, tradotto in altre parole meno perdite di tempo.

Il wireframing è una tecnica che consente di sviluppare i siti più rapidamente,  perchè si passa a realizzare la grafica solamente quando si hanno le idee chiare con il cliente sulla struttura del sito.

In conclusione, se anche voi desiderate perdere meno tempo possibile e centrare subito l’obiettivo, vi consiglio questa tecnica. Alla prossima.

Salve,

Oggi voglio parlarvi di un problema che vero problema non è, ma più un fastidio; avete presente quando create un sito con tutta la vostra bella grafichina tutto preciso e perfetto, e poi il cliente vi chiede di poter inserire i video e vi ritrovate quel, IMHO, orrendo player di YouTube? Precisiamo, YouTube funziona benissimo con tutti i suoi pregi eccetera, ma io non sopporto la grafica del player, quindi cercando un po’ su http://code.google.com, ho trovato il modo di fare un player personalizzato, eccovi qui la guida.

Premessa :

Oggi in questo articolo tratteremo solo i punti base di questo argomento, mentre tutti gli approfondimenti del caso potrete trovarli a questo indirizzo: http://code.google.com/intl/it-IT/apis/youtube/js_api_reference.html

Codice :

Passiamo subito al codice necessario:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("swfobject","2.1");
</script>
<script type="text/javascript"> 

function onYouTubePlayerReady(playerId) {
    ytplayer = document.getElementById("ytplayer");
    cueNewVideo('GdZn7k5rZLQ',0);
}

function loadNewVideo(id, startSeconds) {
    if (ytplayer) {
         ytplayer.loadVideoById(id, parseInt(startSeconds));
    }
}

function cueNewVideo(id, startSeconds) {
    if (ytplayer) {
        ytplayer.cueVideoById(id, startSeconds);
    }
}

function play_pause(){
    if (ytplayer) {
        if(getPlayerState() == 1){
            pause();
        }else{
            play();
        }
    }
}

function play() {
    if (ytplayer) {
        ytplayer.playVideo();
    }
}

function pause() {
    if (ytplayer) {
        ytplayer.pauseVideo();
    }
}

function stop() {
    if (ytplayer) {
        ytplayer.stopVideo();
    }
}

function getPlayerState() {
    if (ytplayer) {
        return ytplayer.getPlayerState();
    }
}
</script>

Spiegazione :

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("swfobject", "2.1");
</script>

Ok siccome dobbiamo lavorare con le API di Google, siccome YouTube è di Google, carichiamole e carichiamo anche la libreria swfobject che ci servirà poi per caricare il player di YouTube.

function onYouTubePlayerReady(playerId) {
    ytplayer = document.getElementById("ytplayer");
    cueNewVideo('GdZn7k5rZLQ',0);
}

Questa funzione viene richiamata una volta che il player è stato caricato, inizializza l’oggetto che useremo poi nelle altre funzioni; in questo specifico caso carica il video con l’ID “GdZn7k5rZLQ” partendo dal secondo 0 quindi dall’inizio.

function loadNewVideo(id, startSeconds) {
    if (ytplayer) {
        ytplayer.loadVideoById(id, parseInt(startSeconds));
    }
}

function cueNewVideo(id, startSeconds) {
    if (ytplayer) {
        ytplayer.cueVideoById(id, startSeconds);
    }
}

Queste due funzioni servono entrambe per caricare un video, ma la prima “loadNewVideo” lo carica e lo fa partire immediatamente, mentre la seconda “cueNewVideo” lo carica e rimane in attesa che l’utente clicchi play, le ho messe tutte e due, ma noi in questo esempio useremo solo la seconda.

Beh credo che per le altre funzioni sopra citate non serva una grossa spiegazione, a parte per quella che recupera lo stato del player, se andrete a vedere nel link che vi ho indicato sopra, potrete trovare che la funzione che ritorna lo stato del player, ritorna un valore di tipo numerico; ovvero: unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5).

Bene, queste sono le funzioni che vi servono per una gestione minimale del player, passiamo ora al caricamento del player, che per chi ha già usato swfobject non sarà nulla di nuovo:

Codice e Spiegazione:

<div id="ytplayer">
    Hai bisogno di Flash Player 8 o superiore e Javascript per vedere questo video.
</div>
<script type="text/javascript">
    // <![CDATA[
    var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
    //questo è l'id che prenderà l'object quando sarà creato
    var atts = { id: "ytplayer" };
    swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer",
        "ytplayer", "400", "300", "8", null, null, params, atts);
    //]]>
</script>

Bene qui troviamo un DIV con ID “ytplayer”, questo è il div dove andremo a caricare il player, mentre lo script serve a:

caricare l’SWF che si trova a questo indirizzo:

http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer

con le dimensioni : 400 di larghezza 300 di altezza e usando la versione di Flash 8; mentre questa riga:

var atts = { id: "ytplayer" };

serve per dare l’ID all’object che verrà creato, io ho mantenuto gli stessi ID per non andare a cambiarli nel CSS.

Bene per oggi è tutto ora sapete come creare un player di YouTube Personalizzato!! In alto e qui in basso trovate i link per vedere in azione l’esempio mostrato e anche per scaricare il codice.

Occorrente :

• Google AJAX API
• Una pagina HTML

Si tutto qui!! Tutto quello di cui abbiamo bisogno è racchiuso nel primo punto, passiamo ora al codice html della pagina;

Da inserire nell’head della pagina:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("language", "1");

function initialize() {
   //Recupero il testo da tradurre
   var text = document.getElementById("text").innerHTML;

   /*
   * Traduco il testo recuperato e se la traduzione è andata a buon fine lo mostro nell'apposito div
   */
   google.language.translate(text, 'it', 'en', function(result) {
       var translated = document.getElementById("translation");
       if (result.translation) {
           translated.innerHTML = result.translation;
       }
   });
}
google.setOnLoadCallback(initialize);
</script>

Passiamo alla spiegazione del codice:

google.load("language", "1");

Con questa riga abbiamo caricato l’API che si occupa delle lingue e quindi delle traduzioni.

var text = document.getElementById("text").innerHTML;

Stanziamo il contenuto dell’elemento con id “text” nella variabile text

google.language.translate(text, 'it', 'en', function(result) {
       var translated = document.getElementById("translation");
       if (result.translation) {
           translated.innerHTML = result.translation;
       }
   });

Richiedo la traduzione del testo contenuto nella variabile text da Italiano it ad Inglese en, in caso la traduzione vada a buon fine, mostro il tutto inserendolo nell’elemento che ha id uguale a “translation”.

In questo blocco di codice dove abbiamo inserito la dicitura ‘it’, potremmo anche lasciare la stringa vuota e cioè ”, dato che il sistema riconoscerebbe in automatico la lingua del testo che gli abbiamo passato, e lo tradurrebbe, in questo caso, in inglese.

google.setOnLoadCallback(initialize);

Necessario per un corretto funzionamento dello script, richiama la funzione di traduzione al caricamento della pagina.

Questo è tutto il codice Javascript di cui abbiamo bisogno, mentre il codice html è ben poca roba, semplicemente i 2 DIV :

<div id="text">Testo da tradurre</div>
<div id="translation"/>

Bene per oggi è tutto e spero che quest’API di Google vi sia utile, personalmente adoro le API, presto nuove ed interessanti guide su questo argomento!!!

Bentrovati con il nuovo appuntamento di jQuery Tips!!

Oggi voglio parlarvi di un’argomento che non mi è stato mai molto simpatico, e cioè il messaggio di conferma sul click di un’elemento, in questo caso specifico su un link per eliminare un’elemento.

Premessa :

Ma dico io se uno clicca su “Elimina” sarà perchè vuole eliminarlo quell’elemento o no?? A quanto pare no e per una corretta programmazione ecc.. ecc.. ecc.. ci va messo un messaggino che chiede la conferma dell’eliminazione.

Bene oggi sono qui a spiegare un semplice trucchetto per tutti i pigroni come me, che non vogliono riscrivere ogni volta il codice per ogni sezione dove compaia un link per l’eliminazione.

Ecco il codice :

$(document).ready(function(){
    $('.elimina').click(function(){
        var risultato = confirm("Sei sicuro di voler eliminare l'elemento selezionato?");
        return risultato;
    });
});

Bene bene bene, inserite questo codice nell’head della vostra pagina e tutti i link o elementi a cui darete la classe “elimina” al loro evento di click vi apparirà un messaggio che vi chiede conferma della vostra azione.

Con questo articolo sono sicuro che sarò utile a qualcuno, quindi alla prossima.
Bye!!!

Quante volte vi è capitato di dover creare un pulsantino che nascondesse e mostrasse a comando un determinato div?? Per tutti quelli che ogni volta si creavano il codice per quell’apposito div eccovi una semplice soluzione.

$(".mostra_nascondi").click(function(){
    var div_da_nascondere = $(this).attr('rel');
    $('#' + div_da_nascondere).toggle();
    return false;
});

Questo è il codice che risolverà tutti i vostri problemi di togglanza divviana, passiamo ad analizzare il poco codice qua sopra:

Tutti gli elementi che hanno come classe “mostra_nascondi”, al loro evento di click, quindi quando ci cliccheremo sopra col mouse (sono in vena di dettagli XD), prenderanno il testo contenuto del loro attributo rel e toggleranno il div con quell’ID, quindi ad esempio:

<a class="mostra_nascondi" rel="pippo" href="#">Mostra / Nascondi Pippo</div>
<div id="pippo">Ciao, io sono Pippo!!!</div>

Quindi in questo caso quando si cliccherà il div#pippo verrà togglato!

Ah stavo per dimenticare, il “return false” serve per non far tornare la pagina in cima, dato che cliccando su quel link si otterrebbe quell’effetto perchè come attributo href abbiamo usato “#”.


Alla prossima!!!