Plugin Shadowbox per Wordpress versione 0.2

2 Maggio 2008

Ecco “finalmente” la versione 0.2 del mio plugin Shadowbox per wordpress.

Novità:
Ora è possibile utilizzare il plugin sia con Yahoo! User Interface Library che con Prototype + Scriptaculous oltre ovviamente a MooTools.

Di default è attivato quest’ultimo, ma per chi volesse modificando il file shadowbox.php e commentando la porzione mootools e decommentando quella del framework interessato si può usare il plugin nel modo che si preferisce.

Versioni:

Ecco il repository SVN per chi volesse collaborare:
http://svn.wp-plugins.org/shadowbox/

Gabba Gabba Hey
Bonzo

Linux su windows

19 Marzo 2008

Spesso capita di dover lavorare su una postazione windows e di sentire la mancanza di linux o di qualche suo programma specifico.
Magari è solo una sensazione da geek, più che una vera esigenza, ma spesso questa situazione provoca grossi stati di “ansia”. Di solito per supplire a questa mancanza si ricorre ad una bella virtualizzazione ed ai programmi multipiattaforma (mozilla,OOo…).
Oltre a tutto ciò ci sono anche altri modi che permettono ad un utente Linux di sentirsi a casa anche se sta lavorando su una postazione Windows.


Sudowin

Si tratta di un programma sviluppato per i sistemi Microsoft che inspirandosi al comando Linux SUDO simula la gestione dei permessi delle distribuzioni come Ubuntu.

installazione sudowin

Questo permette di eseguire programmi come amministratore da un account limitato senza dover abbandonare l’account in uso. In questo modo, l’utente resta sempre il proprietario dei file installati, delle chiavi di registro e così via che lo riguardano. A differenza di RunAs, inoltre, tutte le icone presenti sul desktop restano visibili nella loro posizione.

Sudowin


AndLinux

Permette di far funzionare una distribuzione Linux come Ubuntu 7.10 sotto Windows, sia in modalità shell di comandi che grafica attraverso Xming. E questo grazie al fatto che, basandosi sul progetto Cooperative Linux (coLinux), andLinux utilizza dei propri driver per emulare i dispositivi hardware ed eseguire il kernel di Linux in Supervisor Mode (Ring 0)

Nell’installazione viene chiesto quanta RAM volete dedicare ad andLinux.

Installazione andLinux

Si può scegliere se usarlo come servizio o farlo partire manualmente da Prompt.
Bisogna decidere se andLinux accederà alle cartelle condivise di windows e se si come (per esempio usando Samba)

andLinux software

E’ ancora in Beta, ma sembra funzionare già bene.

andLinux screeshots


KDE 4.0 su windows

Il nuovo DE ha un livello di astrazione tale che si potrà eseguire pure su windows.
Per adesso però siamo ancora indietro, aspettiamo novità.

Gabba Gabba Hey
Bonzo

CakePHP, Blog[2]

11 Febbraio 2008

Andiamo avanti con la realizzazione del blog scritto con CakePHP.

Devo creare il meccanismo la creazione, modifica e eliminzaione dei post.

Aggiungere i Post
/app/controllers/posts_controller.php

class PostsController extends AppController
{
var $name = 'Posts';
function index()
{
$this->set(’posts’, $this->Post->findAll());
}
function view($id = null)
{
$this->Post->id = $id;
$this->set(’post’, $this->Post->read());
}
function add()
{
if (!empty($this->data))
{
if ($this->Post->save($this->data))
{
$this->flash(’Your post has been saved.’,'/posts’);
}
}
}
}
?>

Il controller guarda che i dati inviati via POST non siano vuoti, se non lo sono utilizza il metodo per salvare i dati. Con il metodo flash è possibile visualizzare un messaggio che dice se i dati sono stati salvati.

Creo la vista add

/app/views/posts/add.thtml

<<h1>Add Post</h1>
<form method="post" action="url(’/posts/add’)?>”>
<p>
Title:
input(’Post/title’, array(’size’ => ‘40′))?>
tagErrorMsg(’Post/title’, ‘Title is required.’) ?>
</p>
<p>
Body:
textarea(’Post/body’, array(’rows’=>’10′)) ?>
tagErrorMsg(’Post/body’, ‘Body is required.’) ?>
</p>
<p>
submit(’Save’) ?>
</p>
</form>

ecco come si visualizza la pagina:
http://localhost/cake/posts/add
creazione post

Modifico il modello Post
/app/models/post.php
aggiungo la validazione dei dati.


class Post extends AppModel
{
var $name = 'Post';
var $validate = array(
'title' => VALID_NOT_EMPTY,
‘body’ => VALID_NOT_EMPTY
);
}
?>

L’array $validate dice a Cake come validare i dati quando è chiamato il metodo save(). I valori per queste chiave si possono vedere in /cake/libs/validators.php.


/**
* Not empty.
*/
define('VALID_NOT_EMPTY', '/.+/');
/**
* Numbers [0-9] only.
*/
define('VALID_NUMBER', '/^[-+]?\\b[0-9]*\\.?[0-9]+\\b$/');
/**
* A valid email address.
*/
define('VALID_EMAIL', '/\\A(?:^([a-z0-9][a-z0-9_\\-\\.\\+]*)@([a-z0-9][a-z0-9\\.\\-]{0,63}\\.(com|org|net|biz|info|name|net|pro|aero|coop|museum|[a-z]{2,4}))$)\\z/i');
/**
* A valid year (1000-2999).
*/
define('VALID_YEAR', '/^[12][0-9]{3}$/');

Ecco cosa succede se si prova ad inserire un post senza il titolo:

title request

Cancellare i post, azione delete
/app/controllers/posts_controller.php


class PostsController extends AppController
{
var $name = 'Posts';
function index()
{
$this->set(’posts’, $this->Post->findAll());
}
function view($id = null)
{
$this->Post->id = $id;
$this->set(’post’, $this->Post->read());
}
function add()
{
if (!empty($this->data))
{
if ($this->Post->save($this->data))
{
$this->flash(’Your post has been saved.’,'/posts’);
}
}
}
function delete($id)
{
$this->Post->del($id);
$this->flash(’The post with id: ‘.$id.’ has been deleted.’, ‘/posts’);
}
}
?>

Aggiungo il link delete nella vista index
/app/views/posts/index.thtml


echo $html->link(
‘Delete’,
“/posts/delete/{$post[’Post’][’id’]}”,
null,
‘Are you sure?’
)
?>

se clicco mi si apre un alert javascript che mi chiede se sono sicuro.
Se disabilito javascript nel browser il post viene cancellato senza richiesta di conferma.

Modificare i post, azione edit
/app/controllers/posts_controller.php


function edit($id = null)
{
if (empty($this->data))
{
$this->Post->id = $id;
$this->data = $this->Post->read();
}
else
{
if ($this->Post->save($this->data['Post']))
{
$this->flash('Your post has been updated.','/posts');
}
}
}

Creo la vista edit
/app/views/posts/edit.thtml


<h1>Edit Post</h1>
<form method="post" action="url(’/posts/edit’)?>”>
hidden(’Post/id’); ?>
<p>
Title:
input(’Post/title’, array(’size’ => ‘40′))?>
tagErrorMsg(’Post/title’, ‘Title is required.’) ?>
</p>
<p>
Body:
textarea(’Post/body’, array(’rows’=>’10′)) ?>
tagErrorMsg(’Post/body’, ‘Body is required.’) ?>
</p>
<p>
submit(’Save’) ?>
</p>
</form>

aggiungo il link edit nella vista index
/app/views/posts/index.thtml


link(’Edit’, ‘/posts/edit/’.$post[’Post’][’id’]);?>

Modifica pagina di home
/app/config/routes.php

Nel file routes.php ci sono le configurazioni per i controller e le relative viste che si devono aprire per i vari indirizzi.

Modifico commentando

//$Route->connect('/', array('controller' => 'pages', 'action' => 'display', 'home'));

e settando:

/**
* Collegamento alla pagina index
*
*/
$Route->connect ('/', array('controller'=>'posts', 'action'=>'index'));

Così andando a http://localhost/cake mi apre direttamente la vista index del controller posts.

Ecco fatto, ora il sistema di gestione dei Post è finito, il prossimo obbiettivo è implementare un sistema di gestione degli utenti che possono inviare i post.

Gabba Gabba Hey
Bonzo

CakePHP, Blog [1]

5 Febbraio 2008

Comincio a fare “sul serio” con l’uso di CAkePHP, ora proverò a creare un blog.

Creazione database

Per prima cosa
Ecco alcuni accorgimenti sulle regole che devono seguire le tabelle (naming convention):

  • I nomi devono essere in plurale inglese (posts ad esempio), in modo che i modelli corrispondenti abbiano nomi in singolare;
  • tutte le tabelle devono avere una chiave primaria chiamata id;
  • le chiavi esterne utilizzate per costruire le relazioni tra le tabelle devono essere nomiate utilizzando il singolare della tabella a cui fanno riferimento seguito da _id (post_id per esempio);
  • è possibile includere i campi created e modified che verranno automaticamente aggiornati da CakePHP quando si opererà sui record.

Cake contiente una classe inflections che si occupa di ottenere i plurali dei vari nomi.

Creo il database blog_cake.

Creo la tabella posts.

/* First, create our posts table: */
CREATE TABLE posts (
id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(50),
body TEXT,
created DATETIME DEFAULT NULL,
modified DATETIME DEFAULT NULL
);


/* Then insert some posts for testing: */
INSERT INTO posts (title,body,created)
VALUES ('il titolo', 'Questo è il contenuto di un post.', NOW());
INSERT INTO posts (title,body,created)
VALUES ('secondo titolo', 'Altro contenuto di un post.', NOW());
INSERT INTO posts (title,body,created)
VALUES ('Divetimento', 'Divertiamoci.', NOW());

Imposto i dati di connessione al database nel file /app/config/database.php

var $default = array('driver' => 'mysql',
'connect' => 'mysql_pconnect',
'host' => 'localhost',
'login' => '‘,
‘password’ => ‘ ‘,
‘database’ => ‘blog_cakel’ );

Cake contiene una Classe AppModel da cui si parte per ottenere i nuovi modelli, estendendo tale classe di partenza.

Creo il modello Post:

/app/models/post.php


class Post extends AppModel
{
var $name = 'Post';
}
?>

Creo il controller Post
Dato che abbiamo deciso di seguire le convenzioni sui nomi sarà possibile accedere ai modelli implementati direttamente attraverso $this->NOME_MODELLO.
/app/controllers/posts_controller.php

class PostsController extends AppController
{
var $name = 'Posts';
}
?>

Ci aggiungo l’azione index


class PostsController extends AppController
{
var $name = 'Posts';
function index()
{
$this->set(’posts’, $this->Post->findAll());
}
}
?>

Il metodo index registra un array con tutti i post inseriti utilizzando il metodo set, che rende disponibile questo array alla vista.

Creo la vista index

/app/views/posts/index.thtml


<h1>Blog</h1>

<dl>
<dt>
<h3>link($post[’Post’][’title’], “/posts/view/”.$post[’Post’][’id’]); ?></h3>
echo $post['Post']['id'];
echo '<br/>';
echo $post['Post']['created'];
echo '<br/&gt';
echo '<br/>';
?>
</dt>
<dd>
echo $post['Post']['body'];
?>
</dd>
</dl>

Vado con il browser all’indirizzo:
http://localhost/cake/posts/
ed ecco il risultato:

cakePHP blog

Ora aggiungo l’azione view al controller, per gestire la visualizzazione di un singolo post.


class PostsController extends AppController
{
var $name = 'Posts';
function index()
{
$this->set(’posts’, $this->Post->findAll());
}
function view($id = null)
{
$this->Post->id = $id;
$this->set(’post’, $this->Post->read());
}
}
?>

Creo la vista view
/app/views/posts/view.thtml


<h2></h2>
<p><small>Created: </small></p>
<p></p>

Ora se clicco sul titolo del primo post, mi sposto all’indirizzo:
http://localhost/cake/posts/view/1

e vedo la vista view di questo post.

post singolo

Così ho completato tutte le pagine per visualizzare il blog, la prossima volta passo alle pagine per inserimento, modifica e cancellazione dei post.

Gabba Gabba Hey
Bonzo

Plugin shadowbox per wordpress

31 Gennaio 2008

Ho letto di questo componente Shadowbox che è una specie di Lightbox, slimbox che consente di inserire molti tipi di contenuti: non solo foto ma video da youtube, animazioni flash, pagine html, ecc..

Ho quindi pensato di provare a creare il mio primo plugin per wordpress integrando questo componente.

Qui intanto gli esempi di come funziona Shadowbox:

Demos

Images

Single Image (Flickr)
Image Gallery


Large Image

You may have to shrink your browser window to view the effect here. See the handleLgImages option for more information.

Clipped (no resizing) Resized Draggable

Thumb Gallery

Unlike the previous image gallery, this one is triggered by thumbnail links. It also uses a skip counter and is continuous.

Red Red Red

Flash

Single SWF
SWF Gallery
Flash Video

Movies

Single Movie (mov)
Single Movie (mpeg-4, controller disabled)
Single Movie (avi, autoplay disabled)

Single Movie (wmv)
Apple.com Trailer
YouTube
Google Video
Movie Gallery



External Website
This page
Mixed Content Gallery


Il Plugin è molto semplice, basta caricare la cartella che si ottiene scompattando l’archivio compresso nelal cartella /wp-content/plugins, andare nella parte di amministrazione e attivare il plugin.

Per utilizzarlo basta aggiungere rel=”shadowbox” ai link che volete aprire in questo modo.

ecco un po’ di esempi presi dal sito di shadowbox

Markup

The simplest way to use Shadowbox is through your HTML markup. At the very least, you must add a rel="shadowbox" attribute to your links. For example, say you have this link to an image on your page:

<a href="myimage.jpg">My Image</a>

In order to set up this link for use with Shadowbox, simply change it to this:

<a href="myimage.jpg" rel="shadowbox">My Image</a>

If you would like to display a title for your image, simply add a title attribute to the link.

<a href="myimage.jpg" rel="shadowbox" title="My Image">My Image</a>

You must explicitly tell Shadowbox the dimensions to use to display content other than images. This is done by adding a few parameters to the end of the rel attribute, separated by semi-colons (like a CSS style declaration). To specify a movie’s height and width, use the height and width parameters. Note: unlike in CSS, these values must always be specified in pixels.

<a href="mymovie.swf" rel="shadowbox;height=140;width=120">My Movie</a>

Additionally, you may set Shadowbox options on a per-link basis. To do this, you must include a JSON-formatted parameter called options. An example could be:

<a href="myimage.jpg" rel="shadowbox;options={overlayOpacity: 0.5, resize: false}">My Image</a>

In addition to displaying single images and movies, Shadowbox is also capable of displaying galleries of content. In order to designate a link as part of a gallery, you must add the gallery name to the rel attribute between square brackets immediately following the word “shadowbox”. For example, the following markup creates a gallery called “Vacation” with two pictures:

<a href="beach.jpg" rel="shadowbox[Vacation]">The Beach</a>
<a href="pier.jpg" rel="shadowbox[Vacation]">The Pier</a>

Galleries may be composed of content of many different types. The following markup is a compressed version of the last demo above. It demonstrates how various media can be combined into a single gallery.

<a rel="shadowbox[Mixed];options={counterType:'skip',continuous:true}" href="vanquish.jpg">jpg</a>
<a rel="shadowbox[Mixed];width=520;height=390" href="caveman.swf">swf</a>
<a rel="shadowbox[Mixed];width=292;height=218" href="kayak.mp4">movie</a>
<a rel="shadowbox[Mixed]" href="index.html">iframe</a>

Per ora il plugin funziona con mootools, ma è facilmente adattabile ad altre librerie javascript, visto che shqdowbox include i vari adapter per queste librerie.

Scarica il plugin versione 0.1
Ovviamente spero che se ci sono reeori qualcuno me lo segnali.

Gabba Gabba Hey
Bonzo