Reveal es un plugin para jQuery que permite implementar ventanas modales elegantes de manera muy sencilla.

Las ventanas modales pueden ser customizadas si se desea, aunque el diseño por defecto es muy bueno. El plugin es compatible con todos los navegadores modernos, y muy liviano (1.75 KB).

Sin embargo, tal vez sea mejor utilizar uno de los tantos frameworks MVC de PHP que se encuentran disponibles para elegir: CakePHP, Symfony, CodeIgniter, Kohana, Zend, Yii, Lithium, etc. Despues de todo, dichos frameworks traen incoporadas más funcionalidades y deberían ser mucho más seguros, ya que son usados por  miles de personas y por lo tanto están muy bien testeados.

Ventajas de utilizar un framework desarrollado internamente:

• lo conocemos a la perfección
• podemos modificarlo fácilemente para agregar funcionalidades a medida que son necesarias
• no está sobrecargado con  funcionalidades que raramente utilizamos

Ventajas de utilizar uno de los frameworks disponibles para PHP:

• mejor testeado, menos bugs y más seguridad
• más funcionalidades disponibles, por ej: I18N, Caching, ORM, etc
• utilizar convenciones y técnicas probadas

Es por eso que nos hemos  embarcado en la tarea de probar y decidir si es que alguno de dichos frameworks es más conveniente que utilizar el nuestro.Lo cual ha resultado una tarea bastante complicada.

Lo primero que hicimos fue leer descripciones y reviews de los frameworks más conocidos, buscando en StackOverflow, en phpframeworks.com, etc. Lamentablemente, no es posible decidirse por un framework basándose sólo en la documentación y reviews, es necesario utilizarlo en un proyecto de la vida real para saber realmente que tan bueno resulta ser. Utilizamos todo lo que leimos para acotar la búsqueda a dos frameworks: Yii y CakePHP

En siguientes posts iremos publicando nuestras experiencias.

Supongamos que tenemos una lista de gastos por fecha y queremos mostrar un gráfico de línea representando el gasto en función del tiempo:



begin();
$max = 0;
foreach ($gastos as $key => $model){
if ($gastos[$key]['Expense']['monto'] > $max) $max = $gastos[$key]['Expense']['monto'];
$gastos[$key]['Expense']['fecha'] = $time->format('M',$gastos[$key]['Expense']['fecha']);
}
$max+=200;
$step = 100;

$flashChart->setTitle('Gastos totales x rubro','{font-size:14px;}');
$flashChart->setData($gastos,'/Expense/monto','{n}.Expense.fecha','Gastos','dig');
$flashChart->axis('y',array('range' => array(0,$max,$step)));
$flashChart->axis('x');
echo $flashChart->chart('area_line',array('colour'=>'#3399AA'),'Gastos','dig');
echo $flashChart->render(450,250,'dig');
?>

El método setData recibe el DataSet, una expresión xpath para indicar cuáles son los valores a graficar, otra expresión xpath para indicar las etiquetas en el eje de las x para esos valores, un nombre para el gráfico y un id de gráfico (de esta forma pueden superponerse varios gráficos en uno).

Es importante destacar que en el ejemplo del código del helper se muestra que la expresión xpath para determinar las etiquetas debería ser “default.{n}.Day.date“, pero revisando el código nos dimos cuenta que para que funcione no debe incluirse el nodo “default”.

Para mantener los precios siempre actualizados, las tiendas proveen al sitio encargado de comprar los precios de un archivo de texto con la información de sus productos, los precios, la descripción, etc. Diariamente el sitio web analiza estos archivos y actualiza su base de datos.

De esa manera funciona dameprecios.com, el portal de comparación de precios uruguayo que acaba de publicar nuestra empresa.

Se trata de un proyecto muy ambicioso que implica imponer en el usuario de internet de Uruguay una nueva costumbre, un nuevo concepto y de incorporar un nuevo uso para internet, que tanto en Uruguay como en toda Amerérica Latina, no ha sido 100% explotada.

dameprecios.com: portal de comparación de precios

Por el momento, y por estar el proyecto aún en desarrollo, no hemos suscripto una gran cantidad de tiendas, pero poco a poco iremos sumando los principales comercios de Montevideo

A decir verdad, Magento es muy interesante, así que tras instalarlo ya comenzé a trabajar en la nueva versión de una tienda online, para un cliente. Sin lugar a dudas es muy superior a todas las demás opciones (al menos las que yo conozco) por lo que sin pensarlo mucho tiempo, opté por usarlo para una tienda virtual que estaba comenzando a desarrollar.

El primer problema con el que me encontré, al instalarlo en mi servidor local (localhost) fue que no me permitía ingresar al admin. En un principio pensé que estaba ingresando mal la contraseña (en el proceso de instalación te permite elegir el usuario y contraseña para el primer administrador del sitio). Pero luego me di cuenta que cuando tipeaba mal el usuario o la contraseña me daba un mensaje de error, mientras que cuando la tipeaba bien, simplemente volvía a la pantalla de login sin mostrarme ningún error.

Tras googlear un rato, encontré la solución (tomando información de distintos lugares) por lo que pensé que podría ser útil publicar aquí un resumen.

El problema parece darse en algunos navegadores (Firefox es el que uso yo) y se da porque no reconoce el dominio “localhost” como un dominio seguro. Una opción es cambiar la ruta de nuestro sitio, y en lugar de usar http://localhost/mitienda/admin usar http://127.0.0.1/mitienda/admin (127.0.0.1 es la IP para localhost). Eso puede cambiarse sencillamente desde el panel de administración, pero para ello, obviamente, tenemos que poder ingresar antes. Para cambiarlo sin ingresar al panel de administración tenemos que ejecutar una query en la base de datos MySQL, usando por ejemplo phpmyadmin.

La consulta que debemos ejecutar es la siguiente:
UPDATE core_config_data SET value="http://127.0.0.1/mitienda" WHERE path IN ('web/unsecure/base_url','web/secure/base_url') ;
(hay que cambiar “mitienda” por el nombre de la carpeta donde estemos guardando la instalación de Magento en el servidor local).

Luego probamos de entrar al admin por “http://127.0.0.1/mitienda/admin”. Eso debería funcionar, y tiene como ventaja que si copiamos la instalación a otro servidor, solamente ejecutando de nuevo esta consulta cambiando el value por el valor correcto vamos a poder usar la tienda tal como la teníamos en localhost.

Esa es sin dudas la mejor opción, ya que no tenemos que cambiar nada de código, pero acá les dejo otra forma, por si la anterior no funcionó…

Esta opción implica retocar el código de uno de los archivos del core de Magento, por lo que no es ideal y puede sobreescribrse en algún momento (por ej., al actualizar Magento). El archivo que tenemos que modificar es el siguiente:

mitienda/app/code/core/Mage/Core/Model/Session/Abstract/Varien.php

y en ese archivo tenemos que modificar las siguientes líneas:

// set session cookie params
session_set_cookie_params(
$this->getCookie()->getLifetime(),
$this->getCookie()->getPath(),
$this->getCookie()->getDomain(),
$this->getCookie()->isSecure(),
$this->getCookie()->getHttponly()
);

y dejarlas así:

// set session cookie params
session_set_cookie_params(
$this->getCookie()->getLifetime(),
$this->getCookie()->getPath()//,
//$this->getCookie()->getDomain(),
//$this->getCookie()->isSecure(),
//$this->getCookie()->getHttponly()
);


Guardamos ese archivo y probamos nuevamente. Ahora si debería funcionar, pero tenemos que recordar que este cambio que hicimos, una vez que nuestra tienda es “mudada” a un servidor en internet bajo un dominio real (y por tanto, seguro para todos los navegadores) debemos deshacerlo y volver el archivo a su estado original.

Inicializamos el plugin:

$().ready(function(){
$("#tags").autocomplete('buscar_tags.php',
{ multiple: true,
autoFill: true,
selectFirst: true,
formatItem: formatItem,
formatResult: formatResult } );
});

function formatItem(row) {
return row[0] + ” (” + row[1] + “)”;
}

function formatResult(row) {
return row[0];
}

En donde:  multiple = true permite ingresar más de un valor autocompletado,  autoFill: completa la palabara para poder seleccionarla presionando enter o tab,  selectFirst hace que la primera sugerencia sea seleccionada si no se presiona enter o tab o se selecciona algo utilizando el puntero, formatItem es una función que permite formatear como se muestra cada item mientras que formatResult es una función que permite formatear cómo se muestra una vez seleccionado un ítem.
Otras posibilidades son:

• max: limitar la cantidad máxima de ítems
• minChars: mínima cantidad de caracteres que debe escribir el usuario para que se active el autocompletar
• etc

Cuando implementemos el código de buscar_tags.php, obtendremos en el parmámetro q del querystring el valor ingresado por el usuario. Por ejemplo, si el usuario ingresa “foo” se generará un request de tipo:  buscar_tags.php?q=foo&limit=10, donde limit tendrá el valor de la opción “max”.  EL script buscar_tags.php deberá retoranar el resultado un ítem por renglón. Para el ejemplo de formatItem anterior podría ser:

foreach($resultados as $resultado) {
echo $resultado[0], "|", $resultado[1], "\n";
}


1. CakePHP. Carga de archivos
Utilizando los consejos publicados en este post, implementaremos la lógica PHP para subir archivos al servidor. El siguiente método toma el nombre del directorio en el servidor al cual se quieren subir los archivos, el array de archivos del formulario y un identificador opcional en caso que se desee crear un subdirectorio en donde guardar el archivo.

/**
* uploads files to the server
* @params:
*		$folder 	= the folder to upload the files e.g. 'img/files'
*		$formdata 	= the array containing the form files
*		$itemId 	= id of the item (optional) will create a new sub folder
* @return:
*		will return an array with the success of each file upload
*/
function uploadFiles($folder, $formdata, $itemId = null) {
// setup dir names absolute and relative
$folder_url = WWW_ROOT.$folder;
$rel_url = $folder;

// create the folder if it does not exist
if(!is_dir($folder_url)) {
mkdir($folder_url);
}

// if itemId is set create an item folder
if($itemId) {
// set new absolute folder
$folder_url = WWW_ROOT.$folder.'/'.$itemId;
// set new relative folder
$rel_url = $folder.'/'.$itemId;
// create directory
if(!is_dir($folder_url)) {
mkdir($folder_url);
}
}

// list of permitted file types, this is only images but documents can be added
$permitted = array('image/gif','image/jpeg','image/pjpeg','image/png');

// loop through and deal with the files
foreach($formdata as $file) {
// replace spaces with underscores
$filename = str_replace(' ', '_', $file['name']);
// assume filetype is false
$typeOK = false;
// check filetype is ok
foreach($permitted as $type) {
if($type == $file['type']) {
$typeOK = true;
break;
}
}

// if file type ok upload the file
if($typeOK) {
// switch based on error code
switch($file['error']) {
case 0:
// check filename already exists
if(!file_exists($folder_url.'/'.$filename)) {
// create full filename
$full_url = $folder_url.'/'.$filename;
$url = $rel_url.'/'.$filename;
// upload the file
$success = move_uploaded_file($file['tmp_name'], $url);
} else {
// create unique filename and upload file
ini_set('date.timezone', 'Europe/London');
$now = date('Y-m-d-His');
$full_url = $folder_url.'/'.$now.$filename;
$url = $rel_url.'/'.$now.$filename;
$success = move_uploaded_file($file['tmp_name'], $url);
}
// if upload was successful
if($success) {
// save the url of the file
$result['urls'][] = $url;
} else {
$result['errors'][] = "Error uploaded $filename. Please try again.";
}
break;
case 3:
// an error occured
$result['errors'][] = "Error uploading $filename. Please try again.";
break;
default:
// an error occured
$result['errors'][] = "System error uploading $filename. Contact webmaster.";
break;
}
} elseif($file['error'] == 4) {
// no file was selected for upload
$result['nofiles'][] = "No file Selected";
} else {
// unacceptable file type
$result['errors'][] = "$filename cannot be uploaded. Acceptable file types: gif, jpg, png.";
}
}
return $result;
}

Dado que lo voy a usar en varios controllers, lo agregué al AppController. Un ejemplo de cómo usarlo sería el siguiente:

En la vista: <?php echo $form->file(‘File.image’); ?>
En el controller:


$fileOK = $this->uploadFiles('files', $this->data['File']);
// si el archivo fue subido correctamente
if(array_key_exists('urls', $fileOK)) {
// guardar la url en la informacion del from
$this->data['Post']['image_url'] = $fileOK['urls'][0];
}


2. jQuery

Para el frontend, usamos el plugin AjaxUpload de jQuery, disponible aquí. Les recomiendo que vean los ejemplos disponibles desde esa misma página. Una vez descargado, (requerden que también necesitan jQuery), lo guardamos en la carpeta app/webroot/js. Para poder utilizarlo, no olviden incluirlo en la vista: <?php $this->addScript($javascript->link(‘ajaxupload’)); ?>

Un ejemplo de código javascript para inicializar AjaxUpload es el siguiente:

$(document).ready(function(){
 new AjaxUpload('#att_file', {
  action: 'controller/action',
  name: 'data[Attachment][path]',
  autoSubmit: true,
  onComplete : function(file, response){
    alert('Carga Filanizada');
  },
  onChange: function(){
  }
 });
});//document ready

Debemos setear el action para que apuente al controllador y acción correspondiente.

AjaxUpload permite utilizar cualquier elemento como botón para abrir el cuadro de dialogo de seleccionar archivos. Por ejemplo, podríamos usar un div:

<div id='att_file'>Cargar Archivos</div>

AjaxUpload utiliza un iframe oculto para cargar el archivo, por lo que no es una técnica AJAX propiamente dicha, aunque logra una experiencia de uso similar.

Podríamos utlizar los eventos onChange y onComplete para mostrar un mensaje de Loading. Si es necesario adjuntar más datos para ser enviados por el formulario, se puede utilizar la propiedad data.

Con esto tenemos todos los elementos necesarios para tener carga de archivos AJAX utilizando CakePHP.

Imágen extraida del sitio web de prettyCheckboxes

En este post vamos a enfocarnos en los radio buttons y checkboxes, o “botones de opcion” y “casillas de verificación”… como nos guste llamarles.

He probado con varios plugins de jQuery, e incluso personalizarlos bastante, pero considero que prettyCheckboxes es uno de los más sencillos de utilizar. Para incluirlo en tu diseño solo tienes que:

1.- Importar jQuery (por supuesto) y el archivo prettyCheckboxes.js que podrás descargar de este sitio (allí encontraras ejemplos y una explicación mas detallada)

2.- Inicializar prettyCheckboxes (para todos los checkbox y radio buttons de la página):

    $(document).ready(function(){
        $('input[type=checkbox],input[type=radio]').prettyCheckboxes();
    });

O inicializarlo solo para algunos elementos de tus formularios:

    $(document).ready(function(){
        $('input.myCheckbox').prettyCheckboxes();
    });

Y eso es todo, ahora solo falta personalizar las imágenes (que descargas de la página de prettyCheckboxes para que se vean según tu diseño.

Pueden ver algunos demos en esta dirección.

Es algo más complejo jQuery treeView, pero también bastante más versátil.

El código jQuery a utilizar es el siguiente:


$(".stripeMe tr").mouseover(function() {


$(this).addClass("over");

}).mouseout(function() {


$(this).removeClass("over");

});
$(".stripeMe tr:even").addClass("alt");

Las tablas a las que quieran agreagar el efecto deben tener la clase “stripMe”. Si quieren tener una fila encabezado de la tabla a la cual no se le aplique el efecto, deben utilizar thead y tfoot para el footer.

Los estilos a utilizar para pintar las filas son: alt y over . Como ven en el código, a las filas impares se le aplica el esitlo “alt” mientras que el estilo “over” es utilizado para destacar las filas cuando el mouse pasa sobre ellas.

Para leer más acerca de esta técnica, pueden visitar este sitio