Associare più animazioni a un singolo elemento con Animate.css e jQuery



Pubblicato il 27/12/2013 alle 00:14

emawebdesign

Per un progetto a cui sto lavorando ho avuto la necessità di associare molteplici animazioni CSS3 per un singolo elemento HTML. Come ogni volta che ho una simile esigenza, ho scelto di utilizzare l’ottimo Animate.css di Daniel Eden.

Per utilizzare Animate.css è sufficiente includere il file:

<link rel="stylesheet" href="animate.min.css">

e associare l’animazione all’elemento tramite jQuery:

$('#element').addClass('animated bounceOutLeft');

Nel caso di voler associare all’elemento più animazioni, il codice, diventa inevitabilmente più lungo e complesso:

$('#image').addClass('animated fadeInUpBig');
$('#image').on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(event) {
 
     event.stopPropagation();
 
     $('#txt').removeClass('animated fadeInUpBig').off().addClass('animated pulse');
 
});

Per “snellire” il codice ho scritto un plugin jQuery che condivido, si chiama Many4One Animations. Permette di associare molteplici animazioni a un elemento richiamando il plugin e passando come parametro un array contenente i nomi delle animazioni che si vuole applicare:

$("#image").many4oneAnimations({  
    animations: ['bounce','flash','flipOutX','flipInX','flipOutY','flipInY','fadeOutUpBig','slideInLeft'] 
});

Qui una demo: http://www.emawebdesign.com/demo/many4one-animations/demo.html

Il plugin è rilasciato sotto licenza MIT, richiede Animate.css e jQuery 1.9.1 (o superiore), lo potete scaricare qui sotto e lo trovate anche sul mio profilo Github.

Spero ti possa tornare utile emawebdesign

Se scarichi e utilizzi il plugin significa che hai letto e dato il tuo assenso alle seguenti condizioni:

- EmaWebDesign non si assume alcuna responsabilità, implicita od esplicita, su eventuali danni provocati dall’uso proprio o improprio di questo script.
- chi utilizza questo script lo utilizza completamente a suo rischio e pericolo assumendosene tutte le responsabilità.

emawebdesign download: Many4One Animations (56.87KB)
added: 26/12/2013
clicks: 118
description: Many animations for one element with Animate.css and jQuery. Version: 1.0

Pubblicato in: CSS, css3, JavaScript, jQuery, Open Source, Programmazione, Risorse, Scripts, Web Development | Nessun commento »

Cerchiamo sempre di avere un pensiero critico

Pubblicato il 8/11/2013 alle 18:48

Oggi, il mio YouTuber preferito ShooterHatesYou (a cui faccio spudoratamente pubblicità anche se non ne ha assolutamente bisogno), ha pubblicato sul suo canale di Breaking Italy (che vi consiglio di seguire se non lo seguite già) una riflessione che condivido e sulla quale voglio dire alcune cose. Se vuoi vedere il suo video e non te ne frega nulla di quello che ho scritto, vai pure alla fine del post a cliccare play ma ricordati che non sarai mai un Jedi emawebdesign

Shooter sottolinea come, in rete, le persone discutono soltanto con l’obiettivo di “avere ragione” e, leggendo le discussioni online, è fin troppo evidente dal tono e dal contenuto degli interventi, un pò ovunque, che ognuno ha la propria opinione ma, soprattutto, che ognuno “ha ragione” e che, quindi, ha il diritto di dare addosso a chi la pensa diversamente. A volte con modi accettabili, molte altre volte con modi inaccettabili.

Forse stai pensando: dov’è la novità?

Il problema è insito nella natura umana, tutti vogliono sentirsi i possessori della verità, tutti vogliono sempre avere ragione senza preoccuparsi del fatto che la abbiano o meno perchè l’obiettivo non è quello di portare avanti una discussione costruttiva ma, semplicemente, imporre la propria idea giusta o sbagliata che sia. Una palese prova di stupidità. Si potrebbe dire: “il caso è chiuso“.

Il caso “non è chiuso”, invece, quando questo comportamento viene portato avanti da persone intelligenti che avrebbero tutte le capacità per avere un pensiero critico. Io ne ho conosciute molte e mi tornano alla mente molti esempi relativi al nostro settore, quello dello sviluppo web:

01) Lo sviluppatore che realizza dei nauseanti spaghetti code e che critica quelli che utilizzano un CMS o un Framework MVC giustificando la cosa con degli improbabili:

- “Quel framework è troppo pesante” (vero, mangia troppo e troppe schifezze)
- “Sei legato alle dinamiche di quel CMS, non sei libero di lavorare” (vero, ti mette una palla al piede e col cazzo che ti liberi)
- “Naaaa come lavoro io si fa prima e ci si differenzia” (perchè io valgo! Usi l’Orèal no?)

Lo sviluppatore in questione, purtroppo, non si sognerebbe mai di dire: “non so cosa sia un pattern architetturale, non ho sufficiente esperienza per utilizzare un framework come Zend, Symphony o CakePHP ma sto studiando per migliorare e arrivare a realizzare applicazioni qualitativamente superiori”. E, soprattutto, non accetterebbe mai consigli per migliorare da chi ha palesemente più competenza ed esperienza. Perchè dico io? Nella mia vita ho amato quelle persone in gamba che mi hanno saputo dare un buon consiglio e i giusti stimoli per migliorare professionalmente.

02) Lo sviluppatore che realizza database senza sapere cosa siano:

- Perchè hai realizzato decine e decine di tabelle inutili e le relazioni quali sarebbero poi? “Eh, tutte quelle tabelle servono a fare delle cose, ogni tabella mi serve per salvare qualcosa…evito troppe variabili nel codice” emawebdesign
- “Un ID univoco per ogni tabella? Che lo metto a fare? Se, casomai, ce ne fosse bisogno forse, si vedrà” emawebdesign
- “Faccio una sola tabella e in questo campo ci salvo tutto così il DB è più leggero” (si, questa è fantastica…dovresti conoscere l’idiota che l’ha detta, qui sono andato off-topic, idiozia pura emawebdesign )

03) Lo sviluppatore LAMP vs quello .NET

Qui è guerra. Nessuno ammette di sposare una filosofia/tecnologia/azienda piuttosto che un’altra per uno o più motivi, di prediligere degli strumenti piuttosto che altri, nessuno che si preoccupa di avere spirito critico verso la tecnologia che ama…conta solo sparare sull’avversario. E’ una questione di appartenenza. Niente spirito critico. La tecnologia che amo è la migliore. Punto emawebdesign

04) Apple vs Android

Anche qui è guerra. Discutere in modo costruttivo su pregi e difetti dei prodotti Apple piuttosto che di quelli Android è solo tempo perso. Meglio urlare che i prodotti Apple sono fantastici e che, Android, è solo una zuppa di codice piena di Maleware e zozzerie, anzi no. Cosa potranno mai capire gli utenti Android della magia di Apple? Voi non capite un cazzo eh? emawebdesign
Oppure far capire agli utenti Apple che non sono liberi di modificare i prodotti, di personalizzare i loro dispositivi, quelli sono solo dei fanboy che sbavano negli store su prodotti che hanno prezzi spropositati perchè non capiscono niente, sono capre, noi nerd che amiamo Android siamo superiori e non ci facciamo fregare i soldi da nessuno (neanche dai produttori di smartphone Android?)! emawebdesign

05) La ricerca del Like a colpi di sarcasmo

Entra in un qualsiasi gruppo su Facebook e noterai che, in qualsiasi discussione, l’obiettivo è solo uno: sparare il commento che si accaparrerà il maggior numero di Like. Anche la più costruttiva delle discussioni prima o poi degenererà in una “Royal Rumble” dove l’unico intento è quello di schernire l’interlocutore e ricevere il maggior numero di Like per vincere la guerra (dei poveri) del sarcasmo. I commenti ai video di YouTube, invece, meglio non andare proprio a leggerli emawebdesign

Si possono fare tantissimi altri esempi ma la questione è chiara. Personalmente, ho già risolto il problema da molto. Non discuto con chi non è in grado di portare avanti una discussione costruttiva. Non amo perdere tempo. Attirarmi in un flame è missione impossibile. Ma amo discutere con persone intelligenti che hanno spirito critico. Persone come ShooterHatesYou. O amici come Max, Sasà ed altri con cui è sempre bello discutere. Per migliorare e per arrivare a vedere le cose dalla giusta prospettiva. E’ questa la cosa giusta e non è importante se ci arriviamo da soli o se beneficiamo di un parere altrui.

Sono iper critico soprattutto verso me stesso. Non sono mai contento neanche quando realizzo qualcosa di buono e/o ottengo un buon risultato. Cerco sempre di migliorare e imparare nuove cose. E ho anche cambiato idea tantissime volte nella mia vita. Ho cambiato idea su questioni di lavoro, ho cambiato idee politiche, ho cambiato idee calcistiche, insomma, ho sempre cercato di avere spirito critico verso ogni cosa, anche verso le cose che amo e che non difendo mai a prescindere. Sforziamoci di portare avanti discussioni costruttive online e cerchiamo sempre di avere un pensiero critico. Nessuno di noi è il possessore della verità e nessuno è infallibile emawebdesign

p.s su una cosa voglio essere chiaro: tra Batman e Superman non c’è storia. Batman è il migliore e non voglio sentire ragioni emawebdesign

Sotto il video di Shooter

Pubblicato in: Blog, Video | Nessun commento »

#vLog 4: ho trovato il sostituto di Google Reader

Pubblicato il 28/6/2013 alle 11:40

Il primo luglio, Google, chiuderà il servizio GoogleReader con cui, da sempre, abbiamo “divorato” tonnellate di RSS. La scelta ha scontentato, ovviamente, tutti noi che amavamo il feed reader di bigG. Ci siamo subito messi in cerca di un’alternativa. C’è chi ha scelto Flipboard, chi Pulse, chi Reeder e via dicendo ma, la stragrande maggioranza, ha scelto Feedly. Anche io l’avevo scelto semplicemente perchè mi sembrava il “meno peggio”.

Nel seguente vLog, invece, ti presento quello che ho scelto come “erede” di Google Reader: AOL Reader.

Fatemi sapere cosa ne pensate e, vi ricordo, che sta per arrivare anche il fantomatico Reader di Facebook oltre a quello di Digg.

Pubblicato in: Apps, Blog, Google, News, Video, vLog | Nessun commento »

Tag Title: ottimizzarlo al meglio in chiave SEO

Pubblicato il 2/5/2013 alle 10:01

emawebdesign

 

Un aspetto assolutamente fondamentale e decisivo dell’ottimizzazione “onsite” è quello dell’ottimizzazione del tag title. Un tag title non curato al meglio può compromettere l’ottimizzazione onsite e l’intera strategia SEO che abbiamo elaborato per portare traffico ad un determinato contenuto. Vediamo alcuni importanti aspetti che non dobbiamo mai dimenticare quando ci occupiamo dell’ottimizzazione di questo decisivo fattore.

Lunghezza

Il tag title non deve essere eccessivamente lungo, una lunghezza orientativa di 65 caratteri può andare bene. All’interno dobbiamo prevedere un massimo di 3/4 keywords. Non ripetere più volte una keyword al suo interno, il rischio penalizzazione è dietro l’angolo.

Posizione

Per quanto riguarda la posizione delle keywords nel testo del title ricordiamo che, le keywords, vanno posizionate in una parte più “a sinistra” possibile. Prendi come esempio proprio questo post: la keyphrase “tag title” si trova proprio all’inizio del title, nella sua parte più importante agli occhi dei motori di ricerca. Mantenere, poi, un ordinamento delle parole chiave per importanza decrescente (prima la più importante e la meno importante per ultima).

Prossimità

In fase di analisi, valutare con attenzione la prossimità delle parole chiave. I motori di ricerca tengono in considerazione la distanza tra le keywords. Più le parole chiave sono vicine, migliore sarà stata l’ottimizzazione. Un esempio:

- corsi per seo specialist a napoli

- corsi seo napoli: corsi professionali per diventare uno specialista dei motori di ricerca (migliore ottimizzazione senza aver trascurato l’aspetto descrittivo)

Informare e persuadere

Non dimenticare mai che un buon tag title deve essere ben descrittivo. Deve fornire agli utenti l’informazione che può risultare loro più utile. Inoltre, deve avere la capacità di persuadere l’utente a cliccare sul link ed accedere al contenuto. Il CTR è un fattore tenuto in considerazione dai motori di ricerca. Una volta che l’utente ha posizionato il suo sguardo sul nostro title, dobbiamo convincerlo a cliccare emawebdesign

Pubblicato in: Google, Motori di Ricerca, SEO | 1 Commento »

Rilasciata la versione 1.2 di phpGotoMySQL2

Pubblicato il 25/4/2013 alle 19:17

emawebdesign

Ho rilasciato la versione 1.2 di phpGotoMySQL2, una classe per l’interazione php/mysql che permette di eseguire operazioni CRUD e offre comodi metodi per l’accesso ai dati e per gestire comodamente, attraverso la sola configurazione di opportuni parametri, paginazioni di dati e relazioni tra tabelle (relazioni di tipo uno-a-molti e molti-a-molti).

In questa nuova versione è stato risolto un bug nella paginazione dei dati di una query. In pratica, in presenza della clausola WHERE, il numero di pagine non era corretto.

Ringrazio Angelo Portalupi per aver segnalato il bug.

Pubblicato in: Database, News, Open Source, PHP, Programmazione, Risorse, Scripts, Web Development | Nessun commento »

PHP PDF: ruotare testi e immagini con un add-on per FPDF

Pubblicato il 1/4/2013 alle 00:08

emawebdesign

Per generare file PDF da PHP esiste una classe piuttosto nota e apprezzata: FPDF. Anche io sono solito utilizzarla quando ho esigenza, in una web application, di generare file PDF. Ultimamente mi sono trovato nella circostanza di dover visualizzare, in un file PDF, testi e immagini ruotati.

Googlando un pò ho subito trovato un add-on per FPDF, decisamente comodo e utile allo scopo. Il suo utilizzo è estremamente semplice. Si tratta di una classe PDF_Rotate che estende la classe FPDF. La includiamo nel nostro progetto e predisponiamo la seguente classe PDF che mette a disposizione i metodi RotatedText e RotatedImage:

 
<?php
 
require('rotation.php');
 
class PDF extends PDF_Rotate
{
function RotatedText($x, $y, $txt, $angle)
{
    //Text rotated around its origin
    $this->Rotate($angle, $x, $y);
    $this->Text($x, $y, $txt);
    $this->Rotate(0);
}
 
function RotatedImage($file, $x, $y, $w, $h, $angle)
{
    //Image rotated around its upper-left corner
    $this->Rotate($angle, $x, $y);
    $this->Image($file, $x, $y, $w, $h);
    $this->Rotate(0);
}
}
 
$pdf=new PDF();
$pdf->AddPage();
$pdf->SetFont('Arial', '', 20);
$pdf->RotatedImage('circle.png', 85, 60, 40, 16, 45);
$pdf->RotatedText(100, 60, 'Hello!', 45);
$pdf->Output();
 
?>

Trovate (e potete scaricare) qui l’add-on.

Pubblicato in: Open Source, PHP, Programmazione, Risorse, Scripts, Web Development | Nessun commento »

Volunia, istella, Quag e gli inutili tentativi di realizzare un motore di ricerca italiano

Pubblicato il 22/3/2013 alle 19:51

emawebdesign

Oggi ti voglio parlare di motori di ricerca, argomento che mi sta particolarmente a cuore. E, in particolare, ti dirò la mia sui recentissimi lanci di due motori di ricerca (made in italy): istella e Quag. Ma, soprattutto, cercherò di spiegare perchè è inutile tentare di competere con Google nel search…e che, molto probabilmente, il nuovo Google è stato già realizzato ma non da italiani (peccato!).

Inutile parlare dell’ormai “vecchio” Volunia. Un progetto iniziato male e finito peggio. Vediamo l’ultimo arrivato, Quag, un motore di ricerca che si propone come un motore di ricerca “italiano e sociale”. Il progetto ha beneficiato di un finanziamento di 1,2 milioni di euro da parte di Mariano Pireddu già investitore di Volunia. Che uno quasi vorrebbe dirgli: “di questi tempi ti sembra il caso di buttare soldi?”. Contento lui. Tornando a Quag possiamo anche convenire che, da un punto di vista tecnico e grafico, il progetto non sembra malaccio. Ma cosa fa esattamente? Integra Google e Bing per generare le SERP aggiungendo, come valore aggiunto (chiamiamolo così), la componente sociale. In pratica, il motore, non ti lascia “solo” durante le tue ricerche e ti connette con le persone che hanno effettuato ricerche simili permettendoti di fare loro una domanda. L’immancabile video simpatico ti spiega tutto.

Inutile parlare delle SERP che sono di Google e Bing (corriere.it dice “interessante osservare che Quag integra al suo interno i motori più usati nel web, Google e Bing” ignorando che questa “integrazione” non è operazione particolarmente complicata), parliamo di questa “componente sociale”. Se un individuo effettua una ricerca sul web si aspetta di ottenere una risposta: immediata e soddisfacente. Cosa che riesce ad ottenere, quasi nella totalità dei casi, grazie a Google. Ti pare che uno effettua una ricerca e, poi, sente il bisogno di fare una domanda? E a chi poi? Se proprio ho delle domande vado a farle su Twitter e Facebook dove so di avere amici/contatti affidabili e, magari, competenti in materia. Possiamo apprezzare il lavoro svolto, possiamo apprezzare la buona volontà. Ma, l’obiettivo, è irraggiungibile perchè il prodotto non offre nulla di valore e/o innovativo. Purtroppo o per fortuna l’abbiamo capito un pò tutti:

integrare una “componente sociale” non vuol dire per forza fare innovazione.

A mio avviso, nel search, non ha alcun senso inserire alcun tipo di componente sociale (a parte la questione authorship). Per me (dimmi anche tu come la vedi), il search, vuol dire: faccio una domanda (query) ad una e una sola entità che mi restituisce una risposta soddisfacente. Fine della storia. Se, poi, ho voglia di “social” ho l’imbarazzo della scelta: siamo nell’era dei social media o no? emawebdesign

Parliamo ora di istella, motore di ricerca “partorito” da Renato Soru (amministratore delegato di Tiscali) che, da tempo, aveva annunciato il progetto (come ci ricorda il Tagliaerbe) che, dopo qualche ritardo, è stato presentato questa settimana. Se non avete visto la presentazione potete vederla qui. Ti consiglio di vederla, ti permetterà di capire tutto sul progetto e su chi c’è dietro. Durante la visione ho alternato momenti di piacevole divertimento ad altri di puro sgomento emawebdesign

Analizziamo il progetto da un punto di vista tecnico.

Da quello che si può capire, istella, sembra un’accozzaglia di idee “prese in prestito” da altri progetti:

- L’interfaccia del primo Bing
- L’interfaccia delle librerie e istella clip praticamente copiata da Pinterest. Nel video della presentazione, Riccardo Luna, non ha potuto fare a meno di chiedere “assomiglia un pò a Pinterest?“. Ignorate questa cosa se siete deboli di cuore o ascoltate la risposta di Soru per rabbrividire emawebdesign
- La libreria digitale in cui si possono caricare file in stile DropBox. Nella presentazione, Soru, dice “abbiamo guardato più o meno all’esperienza di DropBox“. Fin qui ci può anche stare. Ma, la dichiarazione che arriva subito dopo, perdonate il cinismo, è da scompiscio: “…solo che, questo qui, non solo te li carica ma l’indicizza…te li organizza, li indicizza…“. Vabbè.

In pratica, anche qui, il motore di ricerca si presenta come un “contenitore” dove gli utenti possono contribuire condividendo quelli che Soru chiama “archivi storici“. Effettivamente è geniale, nel 2013, proporre un motore di ricerca con contenuti UGC. O no? emawebdesign

Che, poi, non era difficile chiedere a Soru per quale motivo, gli utenti, dovrebbero condividere i loro contenuti e/o file su istella. Forse condividere su Facebook, Twitter, YouTube, Instagram ecc. non è fico perchè riempiamo datacenter che non parlano la nostra lingua? Perchè è giusto farlo per la salvaguardia della cultura italiana? Beh, come per ogni startup, in bocca al lupo per l’acquisizione utenti.

Tuttavia, in favore di istella, posso dire che il mio lato nerd apprezza le mappe che possono essere visualizzate anche andando indietro nel tempo fino a 50 anni. Belle. Magari possono tornare utili in ambito accademico/ricerca ma non possiamo certo pensarle come una killer feature. Ci mancherebbe. Se vogliamo, infine, parlare della qualità delle SERP…tocchiamo il tasto più dolente. I risultati sono decisamente scadenti anche se ho notato un leggero miglioramento rispetto a ieri (lo stanno aggiornando man mano?). Sempre il Tagliaerbe ci mostra qualche esempio. Anche l’amico Riccardo ci segnala la scadente qualità delle SERP e qualche “magagna” tecnica.

Insomma, Mission poco chiara, valore del prodotto non pervenuto. Soru ha fatto capire chiaramente che l’obiettivo, pardon, il sogno è prendere quote di mercato nel search. Se questo è il progetto, la mission, appare quantomai impossible. Eppure, il progetto, ha ricevuto grande copertura mediatica. Da questo punto di vista, condivido l’opinione di Antonio Lupetti. Certo giornalismo manca di spirito critico oltre che di competenza. Non c’è interesse nel segnalare/parlare di startup di valore (che in Italia non mancano assolutamente). Ma solo di propinare la solita storiella notiziabile dell’anti-Google, del nuovo Google e di tutti i titoloni poco opportuni se non addirittura comici che potete trovare su qualsiasi testata giornalistica o magazine online che ha presentato i nuovi motori di ricerca made in Italy. Levatevelo tutti dalla testa. A Google non gli potete fare manco il solletico. Solo Microsoft c’è riuscita con Bing. A fare il solletico a Google intendo.

Ok ma, all’inizio del post, avevi detto che il nuovo Google è stato già realizzato?

Concludo questo post lasciandoti uno spunto di riflessione. Ci sono due simpatici giovanotti che hanno fatto innovazione e che continuano a farla. Si chiamano Sergey Brin e Larry Page. Sono sicuro che li conosci. Negli ultimi tempi abbiamo un pò tutti sposato l’idea che, il nuovo Google, sarà un motore di ricerca semantico in grado di fornire la risposta giusta per qualsiasi domanda posta in linguaggio naturale. Ora, immagina di indossare un paio di occhiali tecnologici…in qualsiasi momento puoi fare loro una domanda utilizzando la voce e ottenere una risposta soddisfacente. Che sia Google ad aver “individuato” il nuovo Google? Magari semplicemente trovandolo in una nuova forma di se stesso? Da un pò di tempo a questa parte ho questa visione. Tu come la “vedi”?

Pubblicato in: Business online, Google, Motori di Ricerca, News, Startup | Nessun commento »

Beppe Grillo SWG4 e Zip War Airganon: ecco come scaricare il misterioso software (forse)

Pubblicato il 20/3/2013 alle 19:20

emawebdesign

Il software Zip War Airganon (basato sul sofisticato algoritmo SWG4) è stato scritto interamente dal noto programmatore (ex dipendente di Google, Microsoft, Apple, Amazon, Skype e Volunia) Michael Knight, il quale, ha annunciato sul suo blog che è gia pronta la nuova versione nome in codice “KITT“.

Per scaricare il software (presentato da Beppe Grillo nel video che ha “animato” la rete in questi giorni) è sufficiente collegarsi al blog del leader del Movimento 5 stelle e cliccare su “Accedi all’area supersegreta“. Inserire “administrator” come username e “hop hop gadget elicottero” come password.

A questo punto si può scaricare la versione gratuita o quella a pagamento che è ottimizzata per i motori di ricerca (Volunia e istella compresi).

Ovviamente hai capito che sto scherzando e che ho scritto un bel pò di minchiate. Vero? emawebdesign

Eppure, ancora oggi, leggo online di persone che non si sono rese conto che, il video di Grillo, è una palese trollata. Ma andiamo con ordine. Lunedì, Francesco Lanza, pubblica sul suo blog un post con cui riporta alla luce un video di Grillo del 13 aprile 2012. Per farvi un’idea precisa e/o se non avete visto il video, lo trovate alla fine di questo post.

Nel video, Grillo, parla di un software con cui sarà possibile scovare i politici evasori e, quindi, sequestrarne i beni. Un discorso surreale farcito da paroloni più o meno informatici come:

- SWG4
- Zip War airganon
- algoritmo di out e crowd sourcing
- crownd outsourcing
- cross checking

Per non parlare del fatto che, il software in questione, sarebbe in grado di accedere liberamente a tutti i dati bancari mondiali senza alcuna autorizzazione ne rispetto per la privacy. Grillo dice che hanno un “check meraviglioso”…ma può essere meraviglioso a tal punto? emawebdesign

Insomma, Grillo si è divertito a prendere in giro la rete anche se non si è capito bene per quale motivo. A maggiore conferma della trollata, al minuto 2:22, si vede chiaramente che il comico genovese trattiene a fatica una risata. Oddio, ovviamente c’è chi ha immediatamente capito la trollata. Ma molti invece no. Alcuni sono addirittura partiti in lunghe discussioni (avvistate su facebook o nei commenti al video stesso) con le solite starnazzate politiche. Una cosa alla fine è certa: oggi con gli impegni che ha, Grillo, non può più permettersi di perdere tempo a trollare su YouTube. E, soprattutto, che il leader del movimento 5 stelle ha tutte le carte in regola per vendere videocorsi su come realizzare video virali emawebdesign

Ecco il video

Pubblicato in: News, Video | Nessun commento »

CakePHP CMS: integrare Twitter Bootstrap con CakePHP

Pubblicato il 21/2/2013 alle 18:39

emawebdesign

 

Nelle settimane scorse ho avuto l’influenza, una vera rottura. Non ce la facevo proprio a lavorare ma non potevo certo passare il tempo solo a leggere e guardare puntate di Big Bang Theory. Avevo bisogno di qualcosa che mi mantenesse allenato il cervello emawebdesign

Così mi sono messo a “giocare” con CakePHP e, integrando Twitter Bootstrap, ho realizzato un CMS che ho deciso di chiamare Bootcake EWD e che, ovviamente, condivido con te (e con il resto dell’umanità) visto che ho scritto ovunque che sono un sostenitore dell’open source emawebdesign

Puoi scaricare i files alla fine del post.

Di cosa si tratta?

Bootcake EWD non è un CMS “completo” come, ad esempio, WordPress o Joomla. L’ho pensato come una sorta di “CMS base“, un punto di partenza per poter costruire, in poco tempo, qualsiasi tipo di CMS o Web Applications che necessiti di un back-end per la gestione dei contenuti. Per tutti gli sviluppatori che amano lavorare con un framework MVC, in particolare CakePHP, Bootcake EWD può essere un buon punto di partenza per lo sviluppo dei propri progetti.

Bootcake EWD, dopo l’installazione, mette a disposizione due soli moduli: Users e Pages. Users per creare gli utenti che possono accedere al back-end e Pages per creare le pagine del sito/applicazione. Ricopiando i files app/Controller/PagesController.php (o UsersController.php), app/Model/Page.php e le views (add.ctp, edit.ctp, index.ctp) presenti in app/View/Pages e cambiandone i nomi e le caratteristiche (database e form nelle views), si potranno, in pochissimo tempo, creare altri moduli. Nota bene che le view app/View/Pages/list_pages.ctp e app/View/Pages/view.ctp sono i files front-end che permettono di visualizzare pubblicamente la lista di pagine presenti e la singola pagina. Nel file app/webroot/js/functions.js ho inserito alcune funzioni necessarie per il funzionamento del back-end. In app/View/Elements ci sono i files header.ctp e footer.ctp che sono porzioni di markup “incluse” in tutte le view.

Come integrare Twitter Bootstrap in CakePHP?

Caricare il file bootstrap.css nella cartella app/webroot/css (caricare anche il file bootstrap-responsive.css per layout responsive). Caricare il file bootstrap.js nella cartella app/webroot/js. Quindi, caricare i files delle icone Glyphicons (glyphicons-halflings-white.png e glyphicons-halflings.png) nella cartella app/webroot/img. A questo punto, creare un nuovo file di layout nella cartella app/View/Layouts che chiameremo bootstrap.ctp e che conterrà il codice di markup di Bootstrap con le inclusioni dei files necessari per il suo funzionamento.

<!DOCTYPE html>
<html>
<head>
<title><?php echo $title; ?> - <?php echo $sitename; ?> - <?php echo $description; ?></title>
<meta name="description" content="<?php echo $description; ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<script src="http://code.jquery.com/jquery.js"></script>
<?php echo $this->Html->css('bootstrap.css'); ?>
<?php echo $this->Html->css('bootstrap-responsive.css'); ?>
<?php echo $this->Html->script('bootstrap.js'); ?>
<?php echo $this->Html->script('functions.js'); ?>
</head>
<body>
<?php echo $this->fetch('content'); ?>
</body>
</html>

Abbiamo integrato Bootstrap, ora, nelle views possiamo usufruire di tutta la potenza delle sue interfacce. Ad esempio, se un pulsante di un form vogliamo renderlo “bootstrap-style“, ci basterà specificarlo come illustrato di seguito:

echo $this->Form->submit('Save',array('class'=>'btn btn-success'));

Questo per quanto concerne CakePHP, ovviamente, possiamo anche inserire il solo codice html di Bootstrap laddove ci serve.

Come installare e usare Bootcake EWD?

La procedura d’installazione è quella di CakePHP con qualche piccola aggiunta. Caricare tutti i files e cartelle presenti nella cartella bootcakeewd sullo spazio web, dopodichè, settare le variabili url, sitename, description e uploads nel file app/Config/core.php. In url mettere l’indirizzo del sito (con slash finale), in sitename il nome del sito, in description la descrizione e in uploads il path della cartella in cui finiranno i files uploadati (anche qui slash finale). Questa cartella sarà sempre, comunque, app/webroot/files. Ora specificare i parametri di connessione al database MySQL nel file app/Config/database.php. Ti ricordo che le url le puoi gestire dal file app/Config/routes.php e che, se installi in una sottodirectory, devi specificare la direttiva RewriteBase /nome_cartella/ nei files htaccess che trovi in tuo_sito/.htaccess, tuo_sito/app/.htaccess e tuo_sito/app/webroot/.htaccess.

Ora, richiamare tuo_sito/install per installare Bootcake EWD, in pratica, per creare le tabelle nel database. Dopo questo passaggio, il file app/Controller/InstallationController.php, può anche essere eliminato poichè non serve più. Per accedere al back-end richiamare tuo_sito/admin ed accedere inserendo “admin” sia come username che come password. Creare un nuovo utente ed eliminare quello di default.

Per verificare che l’installazione sia riuscita puoi richiamare tuo_sito/check_installation.

Ora è tutto pronto, devi solo dare sfogo alla tua creatività per sviluppare il tuo progetto emawebdesign

E’ ovvio che un requisito che devi avere è un minimo di familiarità con i framework MVC. Ma, oggi come oggi, usare questi strumenti è ormai divenuto uno standard per lo sviluppo di web application (per fortuna!). Una cosa interessante che otteniamo dall’integrazione di Bootstrap è che, anche il layout del back-end, è totalmente responsive. Ovviamente, questa “base”, può essere migliorata e/o ampliata. Se decidi di dedicarci tempo e di combinarci qualcosa facci sapere eh emawebdesign

Se avete domande chiedete pure, come sempre, discutiamo nei commenti emawebdesign

Download

Se scarichi e utilizzi Bootcake EWD significa che hai letto e dato il tuo assenso alle seguenti condizioni:

- EmaWebDesign non si assume alcuna responsabilità, implicita od esplicita, su eventuali danni provocati dall’uso proprio o improprio di Bootcake EWD.
- chi utilizza Bootcake EWD lo utilizza completamente a suo rischio e pericolo assumendosene tutte le responsabilità.

Versione 1.0
Licenza GPL

emawebdesign download: Bootcake EWD (2.03MB)
added: 21/02/2013
clicks: 677
description: Bootcake EWD è un CMS "base" realizzato integrando Twitter Bootstrap con CakePHP.

Pubblicato in: CakePHP, CMS, jQuery, Open Source, PHP, Programmazione, Risorse, Twitter Bootstrap, Web Development | Nessun commento »

phpgotomysql2: superati i 100 download e rilasciata la versione 1.1 che presenta qualche novità

Pubblicato il 21/1/2013 alle 20:44

emawebdesign

La classe phpgotomysql2 ha superato i 100 download e sono lieto di comunicarti che ho rilasciato la versione 1.1 emawebdesign

Dalla versione 1.1 sono disponibili le librerie mysqli (in alternativa alle mysql functions). Con un post sul blog edit di html.it, il sempre puntuale Claudio Garau, ci ha ricordato che le mysql functions sono deprecate a partire dalla versione 5.5.0 di PHP. Per questo, le librerie mysqli sono quelle predefinite della classe per l’interazione con MySQL.

Come segnalato nel changelog è ora possibile passare i parametri di configurazione per la connessione al database direttamente nel costruttore in alternativa al metodo getParams(). Inoltre è stato aggiunto il metodo countRow() con cui è possibile conoscere il numero di record che corrispondono a una query.

Tenete d’occhio questo blog, il mio account Twitter o la mia pagina Facebook perchè phpgotomysql2 è solo una piccola parte di un progetto ben più grande che sono prossimo a rilasciare, sempre gratuitamente per tutti, nel nome dell’open source emawebdesign

Nel frattempo, buon download con la versione 1.1 di phpgotomysql2 emawebdesign

Pubblicato in: Database, News, Open Source, PHP, Programmazione, Scripts, Web Development | Nessun commento »