¿Qué pasa con los artículos de Mariuzzo.com?

Esto sería una interesante interrogante. La respuesta es simple, y pidiendo disculpa, les expreso que estoy trabajando arduamente en la próxima versión de esta página web lo cual la convertirá a una página con artículos mejores elaborados, más detallados y evitando repetir lo que otros sitios web ya han publicado.

Espero que todos me comprendan. Sin embargo pueden seguirme en Twitter para estar al tanto de cosas interesante sobre el desarrollo web: http://twitter.com/rmariuzzo

¡Hasta pronto!

“MT table” un plugin de jQuery para mejorar las tablas

Table Hover

Hace unos días que creé un plugin de jQuery llamado MT table (Mariuzzo Tools Table). El objetivo principal es poder ofrecer funcionalidades y características a las tradicionales tablas HTML.

Hoy en día, existen muchos plugins maduros que hacen muchas cosas interesante como DataTables y Tablesorter. Sin embargo, estoy creando un plugin similar el cual llamo MT table que hará algunas funciones ya existentes, pero, agregaré nuevas funcionalidades que considero útil para muchos como para mi.

El plugin lo tengo sub-dividido en features (características), de las cuales solo hoverable está terminado en fase beta, las demás son propuestas que están desarrollo:

  • Hoverable. Esta característica nos permite agregar el efecto de hover a cualquier elemento de una tabla como la tabla misma, las filas, las columnas, ambas (formando un cruz), o una simple celda.
  • Selectable. Esto nos permitirá hacer que cualquier elemento de una tabla sea seleccionable como las filas, columnas o celdas. También nos permitirá configurar la selección para que esta sea múltiple o única.
  • Sortable. Sí, esta es una rueda que reinventaré. Es la típica funcionalidad de poder ordenar las columnas. Pienso eventualmente permitir el ordenamiento de filas también.
  • Paginable. Esta es otra rueda a reinventar. Esto hará que tablas con muchas filas sean vistas por páginas. No pasaré por alto agregar la funcionalidad de solicitar las siguientes páginas o anteriores por AJAX.
  • Decorable. Esta característica la haré por pura diversión. Mi intención es poder agregar coloridos especiales a las tablas como gradientes líneales, gradientes circulares entre otras cosas.

También hay otras características que me han pasado por la mente como: ajaxable, editable y pluggable. Pero hasta ahora me limitaré a las ya mencionadas.

Si quieres, puedes visitar la página del proyecto MT table, leer la documentación y descargar la demo interactivar de hoverable.

Zen Coding para escribir HTML/CSS a la velocidad de la luz

html-light-speed

Zen Coding es un conjunto de plugins para programar en HTML o CSS a la velocidad de la luz (casi literalmente). Estas magníficas herramientas te permiten escribir un selector de CSS y expandirlo en su representación del DOM y mucho más.

Un ejemplo básico

Si queremos crear la estructura más básica de un documento XHTML transicional. Solo tenemos que poner lo siguiente.

html:xt

Y al presionar un shortcut o un click tendremos esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
</body>
</html>

Y eso es solo el comienzo de la magia de Zen Coding.

Un segundo ejemplo

Si queremos crear un elemento cualquiera, digamos un DIV con un ID header, entonces escribimos lo que sería un selector CSS:

div#header

Y esto se convertiría en:

<div id="header"></div>

Sencillo y útil ¿verdad?

Un ejemplo complejo

Supongamos que queremos crear un documento HTML con varios DIVs, un menu de UL con varios LI con IDs diferente. Esto también podemos hacerlos en una sola línea:

html:xt>div#header+div#content>ul#menu>li.opcion-$*10

Esto sería igual a:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  </head>
  <body>
    <div id="header"></div>
    <div id="content">
      <ul id="menu">
        <li id="item-1"></li>
        <li id="item-2"></li>
        <li id="item-3"></li>
        <li id="item-4"></li>
        <li id="item-5"></li>
        <li id="item-6"></li>
        <li id="item-7"></li>
        <li id="item-8"></li>
        <li id="item-9"></li>
        <li id="item-10"></li>
      </ul>
    </div>
  </body>
</html>

De seguro esto nos ahorrará bastante la creación de documentos HTML, les dejo el enlace para que puedan descargarlo y prueben las demás extensiones fabulosas.

Nota, esta extensión está disponible para Aptana, TextMate, NetBeans entre otros IDEs. Espero que lo disfruten y me den su opinión.

Instalando CakePHP

Instalando CakePHP

Este artículo es para quien por una razón u otra no ha podido instalar CakePHP o para recomendar a otras personas que necesitan una guía para iniciarse en esta excelente plataforma de desarrollo. Cabe destacar que los pasos descritos son aplicables para usuario de Linux (en mi caso Ubuntu).

Prerequisitos

Asegúrate que tengas…

  • … una conexión a Internet (para descargar CakePHP).
  • … y una instalación fresca de XAMPP (LAMPP).

Leer artículo completo »

Preguntas frecuentes sobre jQuery y los INPUTs

jQuery y los INPUTs

Me encontré con varias preguntas concernientes a jQuery y los elementos INPUTs. Entonces decidí escribir este artículo para aquellos que les sirva el zapato.

¿Cómo seleccionar elementos INPUTs por tipo?

La primera frase de la pregunta nos dice la mitad de como deberíamos de escribir el selector. Primero, sabemos que nuestra elementos a seleccionar son INPUTs, por lo cual deberíamos de comenzar a escribir algo así:

var elementos = $('input');

Sin embargo, si queremos filtrar nuestros INPUTs por algún tipo tan solo debemos de agregar el siguiente filtro y ¡listo!

var submits = $('input[type="submit"]');
var checkboxes = $('input[type="checkbox"]');
var texts = $('input[type="text"]'); 

Y así sucesivamente para cada tipo, solo necesitas cambiar el valor de type para cada selector.

¿Cómo saber el tipo de un elemento INPUT?

La respuesta a esta pregunta es muy sencilla por lo cual no se necesita dar muchas explicaciones. Como el tipo de un elemento INPUT se almacena en el atributo TYPE tan solo necesitamos escribir los siguiente:

var tipo = $('#elemento14').attr('type');

Este código seleccionará el elemento con ID elemento14 y devolverá su tipo.

¿Cómo obtengo el valor de un elemento INPUT?

Esta pregunta suele surgir cuando uno aprende a sacar el texto de un elemento con .text() o el html con .html(). Sin embargo, para los INPUTs es diferente, debemos de utilizar el método .val(). Por ejemplo, si queremos sacar el username puesto en un INPUT text podemos hacerlo así:

var username = $('#username').val();

Este código seleccionará el elemento con ID ‘username’ y devolver su valor.

¿Cómo seleccionar ‘todos’ los INPUTs, incluido los SELECTs, BUTTONs, TEXTAREAs…?

Esto es bien sencillo, tan solo necesitas utilizar un filtro  prediseñado para esto.

var username = $(':input');

Al ejecutar este selector obtendrás todo los tipos de INPUTs diferentes, y todos los SELECTs, BUTTONs y TEXTAREAs.

¿Has tenido otras dudas o preguntas sobre INPUTs y formularios? ¡Utiliza los comentarios para expresarte!

Sigue el Phishing con nuestros Bancos

Phishing al Banco Popular Dominicano

Ya hace tres meses que publiqué un artículo que detallaba un ataque de phishing utilizando como anzuelo al Banco Popular Dominicano. Aunque éste no fue el primer de los ataques, el BPD tomó serias medidas de seguridad implementado el uso de una tarjeta de códigos para cada uno de sus clientes, de esta manera aumentarían significativamente la seguridad y la confianza en su empresa.

Pues esta mañana recibí un nuevo correo phishing animándome a “sincronizar mi tarjeta de claves digitales”. Por supuesto, el correo parece sin lugar a dudas del BPD, pero al mirar detenidamenete nos damos cuentas que no proviene de dicho banco, sino, de un mal intencionado y aprovechado de la tecnología para cometer un crimen cibernético.

Puedes ver la imagen del correo electrónico que supuestamente recibí del BPD. Note que al ver los detalles del encabezado del correo se nos aclara diciendo que viene desde HI5, obviamente, quien quieres robar nuestros credenciales, nuestras tarjetas de códigos y por consiguiente nuestro dinero no es HI5, ya que esto es una técnica común y muy fácil de hacerse pasar por otra persona o dirección electrónica.

    Leyendo XML desde CakePHP

    Si te ves en la necesidad de leer un archivo XML desde CakePHP lo puedes lograr fácilmente a través de una clase provista. Si estás desde un Controlador o Helper puedes utilizar el siguiente código para leer un archivo XML.

    <?php
    class SampleHelper extends AppHelper {
      function readXML() {
        // Cargamos la clase XML de CakePHP.
        App::import('Xml');
        // Leemos nuestro archivo XML.
        $xml_content =& new XML('sample.xml');
        // Para facilidad de uso convertimos nuestro archivo XML en un
        // arreglo legible.
        $xml_array = $xml_content->toArray(false);
      }
    }
    ?>

    Listo, en la variable $xml_content tendrás la representación pura de un archivo XML y en la variable $xml_array tendrás un arreglo legible de tu archivo XML.

    Si estuviéramos utilizando el siguiente archivo XML:

    <?xml version="1.1" encoding="UTF-8" ?>
    <menu>
      <item name="Home" url="pages/home" />
      <item name="Courses" url="pages/courses" />
      <item name="Portfolio" url="pages/portfolio" />
      <item name="Contact" url="pages/contact" />
    </menu> 

    Obtendríamos el siguiente contenido para la variable $xml_array:

    Array
    (
      [menu] => Array
        (
          [item] => Array
            (
              [0] => Array
                (
                  [name] => Home
                  [url] => pages/home
                )
              [1] => Array
                (
                  [name] => Courses
                  [url] => pages/courses
                )
              [2] => Array
                (
                  [name] => Portfolio
                  [url] => pages/portfolio
                )
              [3] => Array
                (
                  [name] => Contact
                  [url] => pages/contact
                )
             )
          )
    )

    La representación pura del XML no se la mostraré porque es muy verbosa.

    ¿Cómo localizar tus archivos XML?

    Esa fue mi primera pregunta cuando seguí el ejemplo de la documentación oficial de CakePHP. Los archivos XML se leen a partir del directorio /cake/libs/ esto significa que se debe subir dos niveles de manera relativa para hacer referencias a nuestros archivos. Les presento unos ejemplos.

    Ubicación de tu archivo:Ruta a utilizar:
    /app/views/helpers/menu.xml../../app/views/helpers/menu.xml
    /app/models/datasources/db.xml../../app/models/datasources/db.xml

    Esto se debe porque la clase XML de CakePHP está localizada en /cake/libs/ entonces, esta buscará relativamente cualquier archivo.

    ¿Preguntas? Dejalas en los comentarios.

    Creando mi primer Helper para CakePHP

    Creando mi primer Helper en CakePHP

    Recientemente, trabajando en un proyecto de un cliente, me vi en la necesidad de crear un Helper. Por eso quiero compartir con ustedes como podemos crear un Helper en CakePHP de manera rápida y comprensible.

    Antes que todo, queremos recordar que un Helper no es más que un componente utilizado en la capa de presentación de una aplicación. ¿Cuando hay que crear un Helper? Cuando nos encontramos con secciones repetitivas en nuestras vistas, elementos o layouts. Un ejemplo de secciones así, serían los mensajes de alertas, errores o información.

    En este artículo veremos como crear un Helper que nos permita crear mensajes de alertas customizados. El Helper lo llamaremos MessageHelper, procedamos a crearlo.

    Leer artículo completo »

    Sobre jQuery 1.4 y futuras versiones

    jQuery 1.4

    En la conferencia anual de jQuery para este año se presentaron interesantes cambios de esta librería de JavaScript ante una audiencia de 300 personas aproximadamente. Tomando en cuenta el primero discurso presentando por el orador John Resig, miembro de jQuery Core intitulado “Recent Changes to jQuery’s Internals” (Cambios Recientes en jQuery), estaré resaltando los cambios que comenzaremos a ver en la próxima distribución que será la versión 1.3.3 o 1.4 (aún no se ha decidido cual versión estable será la siguiente por la gran cantidad de cambios que veremos). Miren los importantes y nuevos cambios:

    Leer artículo completo »

    Mi primer formulario en CakePHP

    Mi primer formulario en CakePHP

    Siempre me ha gustado crear cosas relativamente rápido y en cortos pasos, es por eso que he creado este artículo para mostrar como crear un formulario simple que populará una tabla de una base de datos MySQL. Veremos la integración por convención de un formulario creado con CakePHP y su conectividad con la base de datos (en este caso MySQL). A lo largo de este artículos estaremos creando un formulario para introducir nuevos productos en un inventario.

    Requisitos.

    • CakePHP 1.2.4xxx
    • XAMPP 1.7 / WAMP 2

    Leer artículo completo »