En cuanto al blog, el próximo artículo será un tutorial de varias partes de como hacer un CRUD sencillo usando Dreamweaver. He algo que ya he tratado en parte, tanto en Foros del Web como en este mismo blug, pero espero que este nuevo tutorial sea mucho más organizado. Espero tener listo la primera¹ segunda parte a principios de próximo mes.

Crear un botón costumizado para TinyMCE para hacer cosas simples, como agregar elementos o HTML al editor, es bastante sencillo.  Se necesitan 4 cosas:

1. La imagen del botón. Esta debe ser una imagen 20px por 20px. Si es de otro tamaño el editor alterará el alto y el ancho de la imagen para que se de ese tamaño.
2. El código HTML o elemento que quieres que se inserte en el editor.
3. El código javascript. Este se debe añadir al objeto de configuración del tinyMCE.init().
4. Agregar el nuevo botón a la lista de botones.

Imagen

Como he mencionado antes la imagen debe ser 20px por 20px. Si la imagen es un gif o un png con transparencia se podrá apreciar el efecto “hover”, osea, el cambio que ocurre cuando se pone el pointer del mouse encima del botón. En este caso he usado esta  imagen sacada de IconFinder.  La imagen es originalmente 16px por 16px. Yo la he llevado al tamaño adecuado:

Código html que se va a insertar

Para este ejemplo yo usaré la frase “Hola Mundo!“, pero pueden sustituir este código por lo que quieran:

Hola Mundo!

Código javascript que creará la funcionalidad

La última parte, pero a la vez la más importante, es el código el cual debe insertarse en el objeto de la configuración de tu tinyMCE.init(). Este es el código:

setup : function(editor) {
	// Boton 1
	editor.addButton('mi_boton', {
		//nombre del boton
		title : 'Mi boton',
		//imagen del boton (20 x 20 px)
		image : 'mi_imagen.png',
		//funcion a ejecutarse cuando se le de clic al boton.
		onclick : function() {
			editor.focus();
			editor.selection.setContent('Contenido a insertar');
		}
	});
}

A continuación hago un desglose del código:

setup

El método “setup” añade eventos al editor. Como parámetro pasamos el objeto del editor:

setup : function(editor) {
	editor.evento(parametro)
}

addButton

Es un método del objeto del editor el cual añade el botón a la barra de botones.

ed.addButton('example', {
	title : 'example.desc',
	image : '../jscripts/tiny_mce/plugins/example/img/example.gif',
	onclick : function() {
	ed.windowManager.alert('Hello world!! Selection: ' + ed.selection.getContent({format : 'text'}));
}

Este método acepta dos parámetros:

1. el nombre del botón
2. un objeto con las opciones del botón.

Las opciones del objeto son las siguientes:

• title: titulo del botón
• image: ruta de la imagen que se va a utilizar para el botón
• onclick: función  con el evento click del botón

En el caso de mi ejemplo este es el resultado:

setup : function(editor) {
	// Boton 1
	editor.addButton('mi_boton', {
		//nombre del boton
		title : 'Hola Mundo',
		//imagen del boton (20 x 20 px)
		image : 'page_add.png',
		//funcion a ejecutarse cuando se le de clic al boton.
		onclick : function() {
			editor.focus();
			editor.selection.setContent('Hola Mundo!');
		}
	});
}

Puedes ver mi tinyMCE.init aquí

Añadir botón a la lista de botones

Una vez incluido el código al tinyMCE.init se agrega a la lista de botones, sea, a una de las propiedades:

• theme_advanced_buttons1
• theme_advanced_buttons2
• theme_advanced_buttons3

ejemplo:

theme_advanced_buttons2 : "mi_boton, styleselect, formatselect,fontselect,fontsizeselect,separator,image,media,vfilebrowser,preview",

• Demo

jTinyAjax es un plugin de jQuery el cual permite utilizar el editor TinyMCE como un editor AJAX, ideal para hacer cualquier tipo de contenido editable . Aunque TinyMCE ya posee un muy buen API para hacer llamadas AJAX yo he tratado de simplificar el proceso lo más posible usando jQuery y agregar algo de funcionalidad extra. El plugin pesa 5kb minificado, sin contar TinyMCE, y puede ser integrado con jQuery UI y BlockUI para efectos adicionales.

Versión actual

jTinyAjax 1.2

Pruebas hechas en:

IE 7 en adelante, Firefox 3 en adelante, Chrome 10 en adelante, Opera 11 en adelante y Safari 4 en adelante.

Dependencias

• El plugin depende de jQuery versión 1.4.2 o mayor debido al uso de funciones como delegate().
• También depende del paquete normal de TinyMCE versión 3 o superior. Favor de no usar la versión de jQuery.

Opcional

• jQuery UI
• BlockUI

Uso

Primero, debemos incluir los archivos necesarios:

<!-- css jTinyMCE -->
<link href="css/jtinyajax.css" rel="stylesheet" type="text/css" />
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="js/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script src="js/jTinyAjax.jquery.min.js" type="text/javascript"></script>

Si se van a usar jQuery UI y/o BlockUI se incluyen también:

<!-- css jquery UI -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery.blockUI/jquery.blockUI.min.js" type="text/javascript"></script>

La forma más básica de usar jTinyAjax es pasando el URL de la página encargada de interactuar con el servidor, de esta forma:

//con opciones defecto
$('.jtinymceajax').jTinyAjax({
     url: "pagina.php"
});

Opciones

• url: defecto – Empty String
  • URL donde se enviará el contenido. La misma se encargará de las operaciones del lado del servidor
• typeRequest: defecto - ”post”
  • Tipo de request AJAX , “post” o “get”
• tinymceinit: defecto - Objeto de opciones de TinyMCE
  • Opciones de TinyMCE. Para más opciones pueden visitar la página oficial de TinyMCE.
• extraParam: defecto - Empty String
  • Parametros extras para enviar en la consulta AJAX el formato url string:

    variable1=valor1&variable2=valor2

• buttonTextEdit: defecto - ”save”
  • Texto del boton de enviar el contenido
• buttonTextCancel: defecto - ”cancel”
  • Texto del boton de cancelar el contenido
• UIfy: defecto - false
  • Opcion para convertir botones en botones de jQuery UI
• blockUI: false
  • Opcion para usar blockUI. Valores: true, false
• blockOptions: defecto - Objeto de opciones de blockUI
  • Opciones de blockUI que se utilizarán si la opción blockUI tiene el valor de true. Para más opciones pueden visitar la página oficial del plugin.
• ajaxTypeData: defecto - ”html”
  • Tipo de data a recibirse. HTML para el comportamiento defecto. Esto equivale al opción dataType de la función ajax() de jQuery. Si se usa json se espera un campo llamado “editor” el cual debe poseer la información que se quiere colocar en el editor web. El json puede contener cualquier campo adicional, ejemplo:

    {"editor":"esto se pone en el editor","mensaje":"este es un mensaje adicional"}
    

    El json será “parseado” antes de pasarse a los eventos usando el método “$.parseJSON()” de jQuery.

Eventos

• onClick: function
  • Callback que se ejecuta cuando se le da click al elemetno para editarlo
• onCancel: function
  • Callback que se ejecuta cuando se le da click al boton de cancelar
• onSend: function
  • Callback que se ejecuta cuando se le da click al boton de enviar
• onError: function
  • Callback que se ejecuta cuando hay un error en la consulta
• onSuccess: function
  • Callback que se ejecuta cuando termine de realizarse la consulta

Demo

• demo 1
• demo 2

Descarcar

• Descarga el plugin en GitHub

Quiero anunciar mi primer plugin jQuery, o por lo menos el primero que hago público:  jTinyAjax. Este plugin permite utilizar un elemento html (preferiblemente un div) como un editor AJAX. En estos momentos estoy haciendo pruebas en los diferentes navegadores y a la vez tratando de optimizarlo lo mejor que pueda. Pueden ver el progreso en la página del repositorio o en Github.

Hablando de Github, he decidido mover mis descargas, o por lo menos las que considero más importante, a esta plataforma. Lo quería hacer desde hace tiempo pero nunca había encontrado el tiempo.

Tengo también la idea para una nueva serie de artículos: Artículos sacados de las palabras claves de Google Analytics. En esta serie estaré tratando algunos de los temas inspirados en los keywords y expresiones provistos por Google Analytics. Esto lo hago ya que veo que hay muchas personas que llegan al blog buscando algunos temas los cuales todavía no he tratado. Por lo que he visto muchas de las visitas quieren saber más acerca de TinyMCE, FAncybox y Dreamweaver. Voy a tratar de incorporar uno que otro de esos artículos en los próximos meses.

Me despido diciendo que estoy escuchando a La Secta - Siente El Fuego, sólo para no perder la costumbre de mencionar lo que escucho cuando hago este tipo de resumen.

Los otros cambios son más pequeños:

Por fin voy a habilitar la galería que se encuentra al tope de las páginas del blog. Me he decidido subir las fotos a Flickr y hacer una interface propio usando su exelente API.

Por último, voy a estar mejorando partes del diseño del blog. Tengo claro que, al momento de subir el foro por primera vez, el diseño no estaba acabado. Voy a sacar algo de tiempo para acabar este theme de WordPress. Relacionado a esto, yo trabajé varios diseños antes de quedarme con el que tengo actualmente. Pienso también que podría convertir alguno de ellos a un theme completo y ofrecerlo gratuitamente en el foro. Espero tener tiempo para eso.

Aprovecho también este post para decir que en el próximo post voy a ofrecer un primer plugin de jQuery. Este plugin permite utilizar TinyMCE como editor de contenidos AJAX, transformando elementos HTML con contenido interior en editores TinyMCE cuando se hace clic sobre ellos. He usado esta técnica para en algunos de los websites que he trabajado así que decidí hacer un plugin para que sea más fácil re-usarlo. Actualmente estoy haciendo pruebas en diferentes navegadores y luego empezaré a trabajar en la documentación. Espero poder terminarlo pronto.

1. Primero que nada, aunque es la razón menos importante, es el editor que más uso. Digo que es la menos importante ya que el escribir siguiendo los estandares no es algo que tenga que ver con tal o cual editor, lo menciono ya que estaré demostrando como utilizar funciones específicas de DW para lograr estos resultados.
2. Como ya he dicho antes, debido a sus capacidades WYSIWYG DW es uno de los editores web mas utilizados por personas sin mucha experiencia escribiendo código. Debido a esto muchos de los usuarios de DW no están familiarizados con estos conceptos. Este es el grupo al cual va dirigido este artículo.
3. También debo agregar que, aunque la manera de lograr los resultados que queremos se relacionan con DW, los conceptos generales no se relacionan con ningún editor web.

Voy a empezar con los siguientes consejos:

Valida tu código HTML/CSS

Creo que lo más importante es tener el mayor control posible del código que escribes. Las posibilidades de perder ese control aumenta mientras aumenta el tamaño de la página. Es por eso que verificar que el código es valido en todas las etapas del proyecto es importante. Un código válido ayuda a no tener disminuir los problemas de visualización de las páginas. También ayuda a que las páginas se vean de forma más homogénea en todos los navegadores.

DW posee herramientas para hacer validaciones HTML pero siempre he considerado que no son muy buenos. Se puede validar el XHTML usando el comando: File -> Validate -> As XML, pero muchas veces no funciona de forma deseada. Mi recomendación es usar el Validador de la W3C para realizar validaciones (X)HTML y el Validador de CSS para las hojas de estilo. Recomiendo el uso del Webmaster Toolbar para hacer validaciones sin la necesidad de ir a la página de la W3C. También te da la posibilidad de validar documentos en tu servidor local:

El uso del validador también ayuda a fortalecer el conocimiento del HTML y CSS. El validador provee siempre una explicación detallada del problema, por ejemplo:

Si usamos Google Translate para traducir la página podemos ver el problema claramente:

Por último, es bueno tener en cuenta que el validaror es una herramienta. Te ayuda a tener un control de código. Para ser sincero, yo repudio el uso de “hacks” CSS (mayormente aplicados a Internet Explorer 6), pero también pienso que cada programador tiene el derecho a utilizar los recursos necesarios mientras entienda las consecuencias y mientras (de nuevo) tenga control de su código.

Como nombrar los archivos

Esto es algo que tampoco tiene que ver con DW y que también que se ha discutido bastante pero me parece que no está de más mencionarlo aquí debido a las veces que he visto a usuarios de DW tener problemas por a la mala forma de nombrar archivos dentro de un servidor.

Al momento de nombrar cualquier tipo de archivo que será incluido en el servidor (.html, .jpg, .php. .js, etc) es importante tener en cuenta las siguientes consideraciones:

1. El nombre del archivo sólo debe poseer caracteres de la a a la z (sin incluir la ñ ni letras con acento), números del 1 al 9, underscore (_) y guiones (-).
2. Los nombres deben ser únicos en cada directorio. Esto debería ser algo obvio ya que ningún sistema operativo permite tener dos archivos que se llamen iguales en un directorio, pero también tenemos que tener en cuenta que Windows no puedes usar nombres iguales sin importar mayúsculas mientras que en sistemas operativos tipo UNIX (Linux por ejemplo) sí se permite.
3. También es bueno escoger una manera de remplazar los espacios en blancos y usar esta “convensión” siempre. Ejemplos para eso: usar underscore (nombre_archivo.html), usar guión (nombre-archivo.html), usar mayúsculas (algo que es menos usado) (nombreArchivo.html). Yo suelo usar la la segunda opción ya que pienso que es más fácil de leer.

Usar texto alterno (alt) para las imágenes

El uso del atributo alt en las los tags <img /> (imágenes) y <area /> (área) es requerido ya que es necesario proveer un una explicación alterna en casos que las imágenes no pueden ser visualizadas correctamente o si el contendido está siendo visto por alguna persona con algún tipo de impedimento visual.

Al momento de insertar una imagen DW te pide primero que nada que especifiques un texto alterno y, de forma opcional, una descripción más extensa:

Si decides no hacerlo en ese momento sólo necesitas dar clic al botón de cancelar. Siempre podrás agregar o cambiar el Texto ALT si le das clic a la imagen específica y buscas en el Panel de Propiedades el campo Alt:

Usar Labels correctamente en los formularios

Los label son básicamente etiquetas que se asignan a los inputs (text, checkboxes, radio boxes, etc), textarea y select menus. Su propósito es describir el uso del campo, pero ejemplo, en este caso el label del campo “name” es “Name” (Imagen sacada de los ejemplos de dialog de jQueryUI):

Parecería obvio el hecho de que se deben proveer instrucciones específicas para el usuario al momento de llenar una formulario, pero si tomamos en cuenta la manera como los elementos están organizados en la página (flow) muchas veces la relación label/campo no es tan evidente. Esto es un problema mayor si el usuario posee un impedimento visual. Es por eso que es importante hacer que esta relación sea lo más clara posible.

Hay dos formas de crear esta relación:

1. Meter el campo dentro del elemento label:

   <label>Nombre
   <input id="nombre" name="nombre" type="text" />
   </label>
   

2. Igualar el valor del atributo for del label al id del campo.

   <label for="nombre">Nombre</label>
     <input type="text" name="nombre" id="nombre" />
   

Ambas prácticas son perfectamente válidas, aunque según mi experiencia, en  la mayoría de los casos se usa la segunda opción ya que es mucho más flexible. DW provee la funcionalidad para utilizar ambos métodos. Si estás en vista de diseño y le das al botón de agregar un campo de formulario DW pregunta primero si vas a utilizar un label con el campo:

Las opciones son:

• ID: el id del campo que vas a crear, por ejemplo: nombre (los id en html tienen que ser únicos en cada página. Se siguen las normas de nombrar un archivo pero además sólo se puede empezar con una letra).
• Label: El label (etiqueta) del campo, por ejemplo: Favor de especificar su nombre.
• Estilo (Style): Aquí escogeremos uno de los métodos explicados anteriormente : 1-usar el atributo for y 2-incluir el campo dentro del label o 3-optar no usar label.
• Posición (Position): Indica la posición del label: 1-antes del campo o 2-después del campo.

Primero trabajaremos con el CSS. Vamos a tomar prestado el CSS de la galería hoverbox sacado del blog de Nathan Smith. No utilizaremos la funcionalidad hover, sólo la forma de organizar las imágenes.  El CSS puede ser bajado aquí. Yo he modificado un poco el CSS conforme a mis necesidades. Este es el archivo final:

/* ///////////// Hoja de estilo CSS Subir archivos con Dreamweaver 2 //////////// */

/* general */

* {padding:0px;margin:0px;}

/* formulario */

#form1{
	padding: 10px;
	width:250px;
	margin:0 auto;
	background: #F5F5F5;
	border: 1px solid #CCCCCC;
}
#form1 label{display:block;font-weight:bold;padding:5px 0;}
.enviar{display:block; padding:10px 0 5px;text-align:center;}

/* --------- Hover box CSS --------- */

a
{
	text-decoration: none;
}

#container
{
	background: #fff;
	color: #777;
	margin: 0 auto;
	padding: 20px 50px 50px;
	position: relative;
	width: 640px;
}

h1
{
	background: inherit;
	border-bottom: 1px dashed #ccc;
	color: #933;
	font: 17px Georgia, serif;
	margin: 0 0 10px;
	padding: 0 0 5px;
	text-align: center;
}

p
{
	clear: both;
	font: 10px Verdana, sans-serif;
	text-align: center;
	margin-bottom:10px;
	text-align:center;
}

p a
{
	background: inherit;
	color: #993333;
	font-weight:bold;
}

p a:hover
{
	background: inherit;
	color: #000;
}

/* =Hoverbox Code
----------------------------------------------------------------------*/

.hoverbox
{
	cursor: default;
	list-style: none;
}

.hoverbox img
{
	background: #fff;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 2px;
	vertical-align: top;
	width: 100px;
	height: 75px;
}

.hoverbox li
{
	background: #eee;
	border-color: #ddd #bbb #aaa #ccc;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	display: inline;
	float: left;
	margin: 3px;
	padding: 5px;
	position: relative;
}

.hoverbox .preview
{
	border-color: #000;
	width: 200px;
	height: 150px;
}

Para los thumbnails usaremos la librería PHPImagen de nuestro gran amigo okram. Con ésta podemos crear imágenes nuevas para nuestros thumbnails que se ajusten a cualquier tamaño sin que se distorsionen. Bajamos la librería de SourceForge y la incluimos en nuestro script. Para mayor organización voy a crear una carpeta llamanda “include” en cual incluiré las librerías necesarias si acaso necesitara alguna más. Para usar la librería debemos primero crear un archivo PHP el cual funcionará como nuestra imagen. Este archivo crea una instancia de la clase Imagen y a ésta le podemos pasar valores de como va a ser nuestra imagen. Este archivo lo he llamado img.php (comentado lo mejor que he podido) y lo he puesto en la raiz (root) del proyecto:

<?php

/**
 * @author Myokram
 * @copyright 2007
 */

//si se pide el source
if(isset($_GET['source'])) {
    highlight_file(__FILE__);
    exit;
}

//ruta de la imagen
$imagen = $_GET['file'];

//se busca el tamaño de la imagen
$tama_imag = getimagesize($imagen);
$ancho_img = $tama_imag[0];
$alto_img = $tama_imag[1];

//incluimos la librería
include_once "include/PHPImagen.lib.php";

//Instanciamos la clase
$imagen = new Imagen($imagen);

//si el ancho es mayor a alcho real de la imagen el ancho sera el ancho real
$nuevo_ancho = ($_GET['ancho'] <= $ancho_img) ? $_GET['ancho'] : NULL;
//si el alto es mayor a alto real de la imagen el alto sera el ancho real
$nuevo_alto = ($_GET['alto'] <= $alto_img) ? $_GET['alto'] : NULL;
//si se desea croppear la imagen se especifica el cut
$cut = (isset($_GET['cut'])) ? true : false;

//Redimension de la imagen. Los parámetros
$imagen->resize($nuevo_ancho, $nuevo_alto, $cut);

//Si se pide que se baje la imagen
if(isset($_GET['download'])) $imagen->doDownload();
//si no se pide que se baje se muestra la imagen
else $imagen->doPrint();

?>

el root debería verse así:

Una vez tenemos los archivos en su sitio procedemos a alterar el html/php de la lista no-ordenada.  Primero que nada le agregamos la clase “hoverbox” para atar la lista al nuevo CSS. Luego usamos algunos párrafos (<p>) para mejor organización. Añadimos enlaces tanto a la imagen como uno nuevo que luego usaremos para borrar la imagen deseada. Este último enlace enviaría la variable “id” la cual será igual al id del archivo que queremos borrar y un pequeño código javascript para confirmar que la imagen está siendo borrada. También he añadido la clase “imagen_grande” al enlace de la imagen para poder atarla al javascript que usaremos para mostrar las imágenes más grandes. He decidido no incluir el nombre que el usuario decide ponerle a la imagen para poder tener mayor control del  diseño, aunque he dejado el nombre en el ALT Text:

<?php if ($totalRows_Recordset1 > 0) { // Show if recordset not empty ?>
<ul class="hoverbox">
    <?php do { ?>
      <li><p><a href="imagenes/<?php echo $row_Recordset1['archivo_archivos']; ?>" class="imagen_grande"><img src="img.php?file=imagenes/<?php echo $row_Recordset1['archivo_archivos']; ?>&amp;ancho=100&amp;alto=75&amp;cut" alt="<?php echo $row_Recordset1['nombre_archivos']; ?>" height="100" width="75"></a></p>
	 <p><a href="include/borrar.php?id=<?php echo $row_Recordset1['id_archivos']; ?>" onclick="javascript: if(!confirm('&#191;Est&#225; seguro?')) return false;">borrar</a></p></li>
      <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
</ul>
<?php
 } // Show if recordset not empty
?>

Como pueden ver he enlazado el thumbnail a la imagen original pero el “src” (source) del mismo lo he cambiado al archivo img.php y le he pasado varios parámetros GET. A continuación discuto los siguientes valores. El “Query string” GET es el siguiente: “file=imagenes/<?php echo $row_Recordset1['archivo_archivos']; ?>&amp;ancho=100&amp;alto=75&amp;cut“. Separamos los valores por el

&

, el cual es el entity HTML del &. Las variables son las siguientes:

1. file – Es igual a la ruta de la imagen, en este caso la ruta (imagenes) más la variable del nombre del archivo sacada de nuestra base de datos.
2. ancho – el ancho en pixeles deseado de la imagen, en este caso 100.
3. alto – el altoen pixeles deseado de la imagen, en este caso 75.
4. cut – se incluye si se quiere forzar la imagen a ser del tamaño especificado. el script “croppea” la imagen para llevarla a ese tamaño.

Para mostrar la imagen usaremos un lightbox cualquiera. En este caso he usado la versión 1.3.2 de  Fancybox, un plugin de jQuery el cual crea efectos de lightbox muy atractivos. Incluimos jQuery primero. Yo ya había incluido jquery y el UI de jquery desde google en la primera parte de este artículo. Bajamos Fancybox y agregamos la carpeta completa a nuestroa carpeta “js”, donde guardamos todo nuestro javascript. Fancybox también incluye los plugin de easing y de mousewheel, ambos para jQuery. No tenemos la necesidad de usar el de mousewheel en este tutorial pero sí el de easing. Incluimos tanto el CSS de Fancybox y los plugins de Fancybox y de easing al HTML. Al final yo quedé con algo así:

<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.1.custom.css">
<link rel="stylesheet" type="text/css" href="css/general.css">
<link rel="stylesheet" type="text/css" href="js/jquery.fancybox-1.3.2/fancybox/jquery.fancybox-1.3.2.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery.fancybox-1.3.2/fancybox/jquery.easing-1.3.pack.js" type="text/javascript"></script>
<script src="js/jquery.fancybox-1.3.2/fancybox/jquery.fancybox-1.3.2.pack.js" type="text/javascript"></script>
<script src="js/javascript.js" type="text/javascript"></script>

Luego creamos el javascript que se encargará de crear los lightboxes Fancybox. En el archivo “javascript.js” que está en el la carpeta “js” excribimos:

$(document).ready(function(){

	$('.imagen_grande').fancybox({
		'transitionIn':'elastic',
		'transitionOut':'elastic',
	});

})

Si todo sale bien podremos ver el efecto “lightbox” de Fancybox al darle clic a las imágenes. Fancybox se encarga de re-dimensionar la imagen de acuerdo a nuestra resolución, algo que no hace el plugin lightbox original.

Sólo nos falta habilitar el enlace de borrar imágenes. Para esto usaremos la función de dreamweaver de borrar record y la modificaremos un poco para que también se borre la imagen real. Hay dos formas de usar la función de borrar de dreamweaver: incluir el script en la misma página donde está lo que se quiere borrar o tener la funcionalidad en una página aparte. Yo voy a optar por la segunda opción en este caso.

Creamos un archivo PHP nuevo y lo llamamos “borrar.php” y lo incluimos en la carpeta “include”. Abrimos ese archivo, borramos todo el HTML y vamos al panel de “Comportamientos del servidor” (Server Behaviors). Le damos clic al símbolo de más (+) y escogemos “Eliminar registro”:

En la ventana que sale escogeremos “primary key value” en el primer campo y después  la conexión correspondiente, la tabla de archivos, el campo del id de la tabla (en este caso id_archivos), escogemos “numérico” (numeric), escogemos parámetro URL (ya que enviaremos la variable por medio del URL String), especificamos que la variable se va a llamar “id” y por último escogemos la página donde será enviado el usuario después de la operación (en este caso “../index.php”).

Con esto es suficiente para eliminar un record si enviamos el id correspondiente en el URL Query String. Ahora necesitamos agregar el código que borre la imagen real del disco duro. Para eso necesitamos saber el nombre del archivo que vamos a borrar. Por eso debemos hacer una consulta a la base de datos que devuelva el record que vamos a borrar antes de borrarlo. Para eso, hacemos un recorset de esta con un filtro de que el campo “id_archivos” del la tabla “archivos” sea igual a la variable URL “id”:

Con este recordset tendremos el siguiente código:

$colname_Recordset1 = "-1";
if (isset($_GET['id'])) {
  $colname_Recordset1 = $_GET['id'];
}

mysql_select_db($TU_BASE_DE_DATOS, $TU_CONECCION);
$query_Recordset1 = sprintf("SELECT * FROM archivos WHERE id_archivos = %s", GetSQLValueString($colname_Recordset1, "int"));
$Recordset1 = mysql_query($query_Recordset1, $TU_CONECCION) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$totalRows_Recordset1 = mysql_num_rows($Recordset1);

mysql_free_result($Recordset1);

Necesitamos mover ese código dentro de la condición del código producido por la función de borrar, osea, después de:

if ((isset($_GET['id'])) && ($_GET['id'] != "")) {

También necesitamos recuperar el nombre del archivo. Podemos arrastrarlo de el panel del Panel Vinculaciones (Bindings Panel). Lo ponemos antes de:

mysql_free_result($Recordset1);

Esto nos da la variable que contiene el nombre del archivo, en mi caso:

$row_Recordset1['archivo_archivos']

Lo mejor es crear una variable para almacenar el nombre y la ruta del archivo. Lo hacemos de esta forma:

//variable para almacenar el nobre del archivo
$nombre_archivo = '../imagenes/'.$row_Recordset1['archivo_archivos'];

Para borrar el archivo lo mejor es verificar primero si existe para no tener errores PHP. Para eso usamos la función file_exists(). Si existe entonces lo borramos con la función unlink():

//verificamos si el archivo existe. si existe lo borramos
if(file_exists($nombre_archivo)) unlink($nombre_archivo );

Ya con ésto la galería queda lista. Se le podría agregar también una paginación pero eso lo dejo a la discreción de ustedes. La última parte de este tutorial podría ser añadir una paginación de las de Dreamweaver, o una usando la librería PHPaging, también hecha por el gran okran, así como también hablar más acerca de las validaciones PHP y Javascript.

• Demo
• Descargar

Primero que nada quiero que sepan que sé que este hosting es bastante lento. Estoy pensando cambiarme de hosting el año que viene, o tal vez antes si el tráfico aumenta considerablemente.

Ya he empezado la segunda parte del artículo de como subir imágenes usando Dreamweaver. Este cubrirá como borrar tanto los records como las imágenes físicas y también como podemos hacer “thumbnails” usando la librería PHPImagen, creada por okram. Otra cosa que pienso hacer es trabajar un poco en el diseño final del listado de imágenes, así que también harémos uso del panel CSS de DW. Tenía planeado terminar este artículo a mediados de este mes pero me he atrasado un poco debido a que recientemente cambié de sistema operativo y aproveché para re-estructurar mis sistemas de almacenamiento y respaldos. Ya tengo un disco de 1 Terra para uso diario y uno de 1½ Terra para hacer respaldos, además de uno de 500 gigs y otro de 250 gigs externos para mover información.

Otra cosa que me ha quitado tiempo es el trabajo. Tenemos muchos proyectos en la oficina, algunos bastante interesantes. Uno de ellos es la creación de un sistema de manejo de proyectos que cumpla con las necesidades de la empresa. He tomado ProjectPier como base y le estoy agregando nueva funcionalidad como:  añadir tiempo a las tareas de los proyecto, un calendario de tareas y un sistema de reportes. ProjectPier está construido usando el patrón MVC, así que creo que me voy a divertir bastante con él.

Creo que es por esto último que estoy aprovechando cualquier tiempo libre que tengo para ponerme al día con todo lo que quiero leer, ver y oír. actualmente estoy leyendo Beggining WordPress 3 y, aunque siento que los primeros capítulos están enfocados hacia usuarios principiantes de wordpress, hay bastante información referentes al funcionamiento del esta última versión de WP. A la vez estoy leyendo La Fiesta del Chivo de Mario Vargas Llosa. Se que es algo antiguo pero no había tenido la oportunidad de leerlo. Gracias a mi hermanita Sheila por prestármelo.

He estado escuchando mucha música, ya que siempre estoy sentado frente a la computadora. No quiero aburrir a nadie con lo que escucho. Sólo dire que en estos momentos escucho el último disco de Blind Melon. (Tienen un nuevo cantante. No creía que alguien remplazara a Shannon Hoon, pero se escucha muy bien.)

También me he estado poniendo al día con el anime. Mouse, Beserk, Durarara, Clannad, Clannad After Story, Negima!?, This Ugly Yet Beautiful World y no me acuerdo que más.

La lista de artículos que tengo planeado para el blog sigue creciendo. Además de los tutoriales de DW y varios artículos acerca de jQuery tengo en mente hacer una lista de consejos de buenas prácticas al escribir HTML y CSS. Les invito a que sigan recomendando cuales temas les gustaría que trate en futuros artículos, ya sea por medio de comentarios o usando el formulario en la página de contacto.

Crear una tabla usando phpMyAdmin

Primero abrimos phpMyAdmin, le damos click a la base de datos que vamos a usar y donde dice: Create new table on database *el nombre de tu database escribimos el nombre de la tabla que deseamos crear el campo “Name” y “Number of fields” especificamos el número de campos de la misma. Siempre puedes agregar o eliminar campos después:

En la próxima ventana introduces la información específica de los campos a crearse. En mi caso yo voy a crear 4 campos:

1. id – el id de la tabla (integer, incremental).
2. nombre – sevirá de título (varchar, allow null).
3. descripción – descripción mas información (longtext, allow null)
4. fecha – aquí se guardará la fecha en el que se hizo el insert (datime)

Una vez hecho puedes llegar a la tabla dando un click a la base de datos. Si le das click a icono de “Structure” se mostrarán los campos dentro de la tabla:

Ahora insertamos información en nuestra nueva tabla (Insert) para tener algo con qué trabajar. Vamos a la pestaña de “Insert” y agregamos información adecuada. En mi caso he puesto información genérica. También, en mi caso dejo los id en blanco ya que los he asignado como autoincremental:

Creación de un juego de registros (recordset) sencillo en Dreamweaver

Pasamos después a Dreamweaver y ahí podremos ver la nueva tabla en el panel de Base de Datos (Databases):

Para crear un un jugo de registros vamos al panel de Vinculaciones (Bindings) y escogemos Juego de Registros (Recordset):

En la ventana de Recordset defines el tipo de información que quieres extraer de la base de datos:

1. Nombre (Name): Se especifica el nombre del recordset. Se puede dejar el que viene ya puesto pero lo mejor es que se ponga un nombre mas descriptivo, ‘usuarios1′ por ejemplo. Los nombres de los recorset tienen que ser únicos por páginas y sólo pueden ser letras, números, guión (-) y underscore (_). Nada de caracteres especiales ni empezar el nombre con número.
2. Conexión (Conection): Se escoge la conexión
3. Tabla (Table): Se escoge la tabla de la base de datos.
4. Columnas (Columns): En el campo columna se escogen los campos que se van a estar utilizando en el script. También se pueden escoger todos, aunque siempre es mejor sólo utilizar los campos necesarios.
5. Filtros (Fiters): Con el campo filtro hacecemos que la información sea más específica, por ejemplo, si quieres escoger la entrada donde el nombre del usuario sea “Juan” puedes fácilmente hacer que el campo nombre concuerde con el la valor entrado “Juan”. Puedes también utilizar valores como variables URL o variables enviadas de un formulario, variables de sesión, cookies y variables del ambiente (environment) del servidor.
6. Ordenar (Sort): En el ‘sort’ se organiza el orden de los resultados, ascendente o descendente.

Este es un ejemplo de como escoger campos específicos y como usar los campos de filtro y sort. El la siguiente imagen se escogen sólo los campos “nombre” y “descripcion” de la tabla “tabla1″. Se le ha agregado un filtro para que la consulta solo devuelva los registros donde el valor del campo “id” sea igual a la variable de formulario “id” y también se ha especificado que el resultado se organice de forma descendente:

Consultas complejas (modo avanzado)

En el caso que se quiera hacer consultas complejas (más de un filtro y/o organizaciones de contenido complejas) se utiliza el modo avanzado (advanced). Para poder hacer este tipo de consultas es necesario tener claro como se construye una consulta SQL. Lo más recomendable es estudiar el lenguaje ya que el modo GUI del modo avanzado puede llegar a ser también bastante limitado a veces. Dicho esto, también puedo agregar que el modo avanzado resulta muy útil y es muy fácil de usar una vez se sabe usar. Para usarlo le damos al botón de “Avanzado” (Advanced):

Lo primero que vemos es que los dos primeros campos son iguales (nombre y conexión). Los otros campos ha sido removidos y ahora tenemos tres áreas nuevas:

1. SQL: Área donde escribimos nuestra consulta SQL.
2. Variables (Variables): Área donde creamos las variables que usaremos en los filtros.
3. Elementos de base de datos (Database Items): Las tablas y los campos de la base de datos.

Lo importante es saber que el modo avanzado funciona igual que el sencillo. Los botones que están en el área de Elementos de la base de datos son los que agregan elementos a la consulta.

• El botón SELECT tiene que ver con la selección de columnas o de la tabla completa.
• Con el botón WHERE añades uno o múltiples filtros.
• Por último, el botón ORDER BY especifica uno o más tipo de como organizar el resultado.

SELECT

Si queremos hacer una selección de todos los campos de una tabla escogemos la tabla y después le damos click al botón de Select. Por ejemplo,en la siguiente imagen he seleccionado todos los campos de “tabla1″ :

De igual forma, si queremos escoger campos individuales damos click al campo y luego al botón SELECT con cada uno de los campos deseados. En el próximo ejemplo he escogido los campos “id”, “nombre” y “fecha”:

WHERE

Para agregar un filtro lo más recomendable es crear una variable primero. NO es realmente necesario para que funcione el script pero, de esa forma, DW crea el código necesario para validar los valores antes de que estos ínter-actúen con la base de datos. Creamos una variable dándole click al símbolo de más que está en la sección de variables:

En la ventana de “Añadir variable” (Add Variable) DW te pide varios campos:

1. Nombre (Name): Nombre de la variable. Es el nombre que usará DW cuando crea la variable. El nombre debe obedecer las reglas de una variable (en este caso, una variable PHP). Sólo letras de la “a” a la “z“, números del 0 al 9, guiones ( – ) y “underscores” ( _ ). No caracteres especiales (ñ, acentos, etcétera).  Por último, se debe comenzar el nombre con una letra.
2. Tipo (Type): El tipo SQL del valor de la variable. DW los agrupa según el tipo de código que va a crear.
3. Valor Defecto (Default Value): Es el valor de la variable en caso de que no se especifique o llegue vacía al momento de ejecutar el script. DW usa “-1″ cuando en código creado usando el modo sencillo. Este valor asegura que la consulta no devuelva ningún resultado. Si necesitas que tu variable tenga un valor defecto puedes cambiarlo a lo que necesitas.
4. Valor de ejecución (Runtime Value): Es el valor que se usará al momento de ejecución del script. En el modo sencillo DW crea el código dependiendo del tipo de variable. En el modo avanzado se debe agregar el código PHP además del nombre de la variable. Los tipos son los siguiente. Están acompañados con sus respectivos ejemplos de códigos PHP:
   • Variable URL (URL VAriable) (GET). Variable pasada a través del “query string”

     $_GET['nombre_de_la_variable']

   • Variable de formulario (Form Variable) (POST). Variable pasada a través de un formulario.

     $_POST['nombre_de_la_variable']

   • Cookie (Cookie). Variable pasada a través de una cookie.

     $_COOKIE['nombre_de_la_variable']

   • Variable de sesión (Session Variable). Variable pasada a través de una sesión.

     $_SESSION['nombre_de_la_variable']

   • Variable de servidor (Server Variable) . Variable tomada de una de las variables del servidor.

     $_SERVER['nombre_de_la_variable']

   • Variable arbitraria. También se puede usar una variable que ya ha sido creada anteriormente o función PHP que devuelva un valor.

     $pedro

     date('Y-m-d H:i:s')

En el siguiente ejemplo, la variable “variable1″ es de tipo “texto”, su valor defecto es “-1″ y la variable es enviada vía un formulario:

Una vez creada la variable podemos agregar un filtro. Seleccionamos el campo que usaremos en el filtro y le damos clic al botón de WHERE:

Esto agregará el nombre del campo que vamos a usar. La variable y la condición la tenemos que agregar manualmente. Aquí usaremos el operador o condición correspondiente dependiendo de los valores que se quieren obtener de la base de datos . En ese caso he usado igual que “=” para que la consulta devuelva los registros donde el valor del campo ‘nombre” sea igual a la variable de formulario “nombre”:

Para usar una constante no es necesario crear una variable ya que ésta no necesita ser validada. Sólo tenemos que agregarla manualmente. Por ejemplo, la siguiente consulta devuelve los registros donde el campo nombre es igual a la constante ‘Pedro’:

Lo bueno del modo avanzado es que podemos poner múltiples filtros. Sólo tenemos que seguir creando variables y agregando tablas y condiciones. El próximo ejemplo devuelve los registros donde el valor del campo nombre es igual a “pedro” y el valor del campo descripcion es igual a la variable de formulario “descripcion” (variable1):

DW sólo usa el operador lógico ”AND” (Y). Con este operador se tienen que cumplir todas las condiciones. En el último ejemplo se tienen que cumplir las dos condiciones (filtros). Para más información acerca de otros operadores lógicos visite la página de MySQL que trata ese tema.

ORDER BY

Con el botón de ORDER BY se controla la organización del resultado de la consulta. Por ejemplo, para que el resultado se organice con respecto al campo nombre escogemos el campo le damos clic al botón de ORDER BY.  Por alguna razón, DW no incluye una opción para controlar el modo de organización (Ascendente/Descendente) como en el modo sencillo. Si no lo especificamos  la organización siempre será ascendente. Para que sea descendente agregamos “DESC” después del nombre del campo. Podemos también agregar organización múltiple de la misma forma que con los filtros. Estas se separan por comas:

Conclusión

Como mencioné antes, la mejor forma de construir consultas exitosas a una base de datos es entendiendo como se construye una consulta SQL. DW provee funciones sencillas que ayudan a la construcción de consultas básicas, pero estas sólo pueden ayudar en un limitado número de casos. Conocimiento de los lenguajes envueltos (MySQL y PHP en este caso) son necesarios para consultas y sistemas más complejos. Yo recomiendo el foro de Base de datos de Foros del Web para cualquier tipo de duda relacionada no solo a MySQL, sino también otros servidores de bases de datos.