Tengo una animación Flash que no se ve en mi web

El problema más común, es que la gente suele subir por ftp directamente el archivo .fla que te genera Adobe Flash, y este archivo NO se ve en el navegador. Lo que hay que hacer es exportar la película .fla a .swf una vez tengas creada tu animación. El archivo .swf final es el que debe subirse al servidor para ser visualizado en la página web desde un navegador.

Los archivos SWF de Flash

El formato de archivo de Flash (SWF – Small Web Format) básicamente es un archivo comprimido en formato vectorial (también permite audio y video en sus versiones modernas) basado en el archivo original .fla, que necesita el plugin de Flash para ser visualizado en un navegador.

El objetivo principal del formato SWF es obtener animaciones de un tamaño manejable (reducido) que puedan ser visualizadas con comodidad en internet y que funcionen en cualquier plataforma. Lo cierto es que esto resulta un poco irónico desde el momento en que es necesario instalar un plugin adicional para poder ver dichas animaciones.

Exportar un archivo .fla a .swf

Aunque no recomiendo el uso de Flash en las páginas web, al menos no para crear una web completamente en Flash o para crear sus partes principales, cosas tales como pequeñas animaciones que añadan dinamismo son interesantes, así que vamos a dar unos sencillos pasos para pasar de .fla a .swf. En el archivo de Adobe Flash:

• Pinchas en archivo > exportar
• Guardar como SWF
• Te aparece un cuadro de diálogo donde seleccionas la opciones de tu nuevo archivo .swf, tales como el tamaño, páginas a incluir en la película y cosas muy interesantes para este caso (insertar swf de Flash en HTML) como es la opción de generar un archivo html. Este archivo te permite visualizar en el navegador el archivo Flash antes de ser subido a tu web.

Una vez tenemos el archivo exportado queda incrustarlo en el HTML, vamos allá.

Insertar un archivo swf en una página HTML

Para subir tu animación flash (en formato .swf) en tu página web y que se vea, podemos poner el siguiente código HTML (puedes ver la documentación completa aquí):

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10.0.0.0" width="550" height="400">
    <param name="movie" value="archivoflash.swf" />
    <param name="quality" value="high" />
    <embed src="archivoflash.swf" quality="high" type="application/x-shockwave-flash" width="550" height="400" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>

Con este código, cuando un visitante no tenga el plugin de Flash instalado en su navegador, se le ofrece la posibilidad de instalar el plugin de Flash para ver la animación. Más adelante veremos que esta no es la mejor manera de mostrar Flash en tus páginas web.

De cualquier manera, en todos los ejemplos de este artículo, hay varias cosas que debes cambiar:

• Una es la ruta del archivo, ¡cuidado con esto!, mucha gente no ve sus animaciones Flash en su página web porque pone mal la ruta. En los ejemplos puedes ver “archivoFlash.swf” en dos lugares distintos, debes cambiar ambos por el nombre de archivo y la ruta correcta en tu servidor web (será del tipo http://www.misitioweb.com/Flash/archivoFlash.swf).
• Por otro lado, hay que cambiar el tamaño de la animación acorde con el tamaño que desees darle. Para este punto también hay dos sitios diferentes donde se establece el tamaño (“width” y “height”) que tienen un valor de 550 y 400 píxeles, respectivamente, en el ejemplo. Debes cambiarlos todos por el tamaño de tu animación.

Insertar swf (Flash) en HTML con Dreaweaver

Insertar Flash en HTML usando Dreaweaver es muy sencillo. En la ventana de documento pones el puntero en el sitio donde quieres incluir la película Flash y simplemente tienes que entrar en:

• Insertar > Media > SWF, y seleccionar tu archivo .sfw

O bien pulsar:

• Ctrl + Alt + F

Insertar swf (Flash) en una página HTML con código válido

Este es sin duda mejor método que el anterior. Es aplicable para todos, pero en especial, para los desarrolladores y diseñadores web no es suficiente con insertar correctamente Flash en HTML, hay que insertarlo y además validarlo y que sea accesible. Para ello, existe el método satay, que simplifica el código a lo siguiente:

<object type="application/x-shockwave-flash" data="archivoflash.swf" width="550" height="400">
    <param name="movie" value="archivoflash.swf" />
    <param name="quality" value="high" />
    <img src="noflash.png" width="550" height="400" alt="Imagen en sustitución de flash" />
</object>

Como ocurría con la versión mala del código para inserta el Flash, si el visitante no tiene el plugin para ver Flash en su navegador, hay un elemento alternativo en su lugar. En su solución, Drew McLellan dispuso una imagen sustituta de Flash (lo que en el ejemplo es noFlash.png), pero evidentemente, no es una solución perfecta. Esta imágen sería conveniente sustituirla por un link a la página de descarga de Flash player, por ejemplo de esta manera:

<a herf="http://www.macromedia.com/go/getflashplayer" title="descargar flash player">Descargar Adobe Flash Player para ver esta animación</a>

El método satay para Flash presenta varios inconvenientes, no obstante es una solución bastante buena. El primero, un visitante con una versión antigua del plugin (muy muy antigua, para la inmensa mayoría de visitantes esto no será problema) no carga la animación y ni tan siquiera puede ver el código alternativo.

Otro inconveniente es que se hacen dos peticiones de archivo (se cargan dos swf), y como ya sabemos cuantos menos archivos cargues, más rápido correrá tu página web.

A parte, este código no hace streaming en Internet Explorer. Para solucionar esto último y que funcione bien en todos los navegadores, incluido Internet Explorer, se crea un archivo archivo swf adicional (por ejemplo content.swf) que va a contener al archivo de película que realmente queremos mostrar, con únicamente esta línea de código:

_root.loadMovie(_root.path,0);

Entonces, el código HTML final, listo para todos los navegadores y que valida, es el siguiente:

<object type="application/x-shockwave-flash" data="content.swf?path=archivoflash.swf" width="550" height="400">
    <param name="movie" value="content.swf?path=archivoflash.swf" />
    <param name="quality" value="high" />
    <img src="noflash.png" width="550" height="400" alt="Imagen en sustitución de flash" />
</object>

Rizando el rizo, insertar Flash en HTML con código válido y accesible

Hay otros métodos ligeramente distintos para insertar flash válido en HTML y mejorar su accesibilidad, como el uso de Javascript o de comentarios condicionales, pero el método satay, a pesar de tener más de 8 años (se creó en 2002) sigue siendo muy útil a la hora de diseñar páginas web y que éstas cumplan con los estándares.

No obstante, los comentarios condicionales son una buena técnica para maximizar la accesibilidad de este tipo de contenidos:

<!--[if !IE]> -->
   <object type="application/x-shockwave-flash" data="archivoflash.swf" width="550" height="400">
<!-- <![endif]-->
<!--[if IE]>
   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
      codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"
      width="550" height="400">
      <param name="movie" value="archivoflash.swf" />
<!--><!--dgx-->
      <param name="loop" value="true" />
      <param name="menu" value="false" />
      <p>Este es el <b>contenido</b> alternativo.</p>
   </object>
<!-- <![endif]-->

Aquí podemos ver el ejemplo en funcionamiento desde la página del autor.

Al momento de llevar acabo su validación, nos debemos asegurar de distintas maneras que no se pueda inyectar datos y no se puedan filtrar errores, por lo que generalmente verificamos los datos tanto del lado cliente y como del lado del servidor, teniendo que idear e implementar una larga serie de expresiones regulares que al final del día nos van a desesperar, pero que van a lograr la tarea de lograr un mejor formulario.

Como desarrollador, sabes que los formularios tienen que estar bien estructurados, que deben ser lo más seguro posibles y a la vez debes darles una muy buena presentación, el simple hecho de pensar en ello puede causar desánimo en varios, pero con HTML5 combinado con CSS3 podemos crear maravillas en pocos minutos.

Validar formularios con HTML5 y CSS3

Imagina que te encuentras en un Viernes a las 5 de la tarde, estás a punto de salir del trabajo y en el último momento llega una petición urgente para realizar un formulario para el sitio de ventas de la empresa. Necesitas validarlo muy bien porque de ello depende que los datos del cliente lleguen al servidor de manera correcta y además necesitas darle al formulario un estilo adecuado porque es la imagen de la empresa la que está en juego.

Por tu parte ya no quieres saber nada del trabajo, es Viernes, falta 1 hora para irte a disfrutar de tu fin de semana y lo que menos deseas hacer es crear y validar un formulario, pero debes entregar algo para que sea probado en QA. Es entonces que HTML5 entra al rescate y te ayuda a validar tus campos con una serie de atributos sencillos de aprender y aplicar, los cuales simplemente debes incrustar en el código del formulario.

Al momento de crear los elementos del formulario de la siguiente manera:

<input id ="nombre" name="nombre" type="text" />
<input id ="email" name="email" type="text" />
<input id ="telefono" name="telefono" type="text" />

Indicamos que los tres serán de tipo texto, se les asigna un id y un nombre respectivo para posteriores funciones de validación, las cuales cotidianamente llevábamos acabo en el lado cliente con Javascript.

Con esta declaración clásica tendríamos que validar que el texto introducido en el campo email realmente lleve la estructura deseada, con un nombre de usuario seguido de una “@” y finalmente el dominio, para ello podemos usar una expresión regular o simplemente podemos cambiar el atributo “type” del elemento “input” con HTML5, declarándolo como email de la siguiente manera:

<input id ="email" name="email" type="email" />

Ahora al momento de introducir un texto nos pedirá que sea con esa estructura, en caso de no ser así enviará una advertencia generada y dependiente del propio navegador. Hay que recordar que hasta el momento HTML5 sólo es interpretado por los navegadores estandarizados como Chrome, Safari, Opera y Firefox.

El atributo “type” puede tener otro valores como “url” (dirección de internet), “tel” (teléfono) o “password” (contraseña) que ayudarán a hacer una validación más sencilla, además de agregar especificación al formulario y permitir que se pueda aplicar estilos por tipo a los distintos campos.

Podemos agregar atributos adicionales como “placeholder” que colocará un texto como ejemplo dentro del campo, el cual desaparecerá al momento de dar clic sobre él. El atributo “required” agrega la propiedad de obligatorio a un campo, por lo que si no se introduce un valor en él, el formulario no se enviará.

<input id ="email" name="email" type="email" placeholder="ejemplo@dominio.com" required />

El atributo “autofocus” se emplea para designar el campo seleccionado por defecto al momento de cargar la página, esto elimina la necesidad de recurrir a scripts para lograr esta función. Ahora se puede representar de la siguiente manera:

<input id ="nombre" name="nombre" type="text" required autofocus/>

Lo que anteriormente se hacía así:

 <input id ="nombre" name="nombre" type="text" />
<script>document.getElementById('nombre').focus();</script>

Con esto podemos construir un formulario rápido y sencillo en nuestro hosting. Siguiendo los estándares y recomendaciones queda estructurado de la siguiente manera:

 <form id="pago">
<fieldset>
<legend>Datos personales</legend>
<ol>
<li>
<label for="nombre">Nombre</label>
<input id="nombre" name="nombre" type=text placeholder="Escribe tu nombre completo" required autofocus>
</li>
<li>
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="ejemplo@dominio.com" required>
</li>
<li>
<label for="telefono">Teléfono</label>
<input id="telefono" name="telefono" type="tel" placeholder="Ej. +4466212112154" required>
</li>
<li>
<label for="pais">País</label>
<input id="pais" name="pais" type="text" required>
</li>
</ol>
</fieldset>
<fieldset>
<legend>Datos de tarjeta de crédito</legend>
<ol>
<li>
<label for="numtarjeta">Número</label>
<input id="numtarjeta" name="numtarjeta" type="number" placeholder="Ej. 555-444-333-222" required>
</li>
<li>
<label for="nomtarjeta">Nombre</label>
<input id="nomtarjeta" name="nomtarjeta" type="text" placeholder="Nombre exacto del propietario" required>
</li>
</ol>
</fieldset>
-------------------------------------------------
<fieldset>
<button type="submit">Realizar compra</button>
</fieldset>
</form>

Y para concluir agregamos estilo a nuestro formulario, primero nos enfocamos en la parte general, le damos un fondo de color “SteelBlue”, modificamos su tamaño de letra a 12 píxeles, agregamos un borde de color “LightSteelBlue” y le damos un toque extra con las puntas del borde redondeadas.

 form#pago {
margin:auto;
background: SteelBlue;
color: white;
font-size: 12px;
padding: 30px;
width: 350px;
border:solid 10px LightSteelBlue;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

Quitamos las lineas de los fieldset para que no contrasten con el diseño.

 form#pago fieldset {
border: none;
} 

Le agregamos color al borde de los campos, redondeamos su borde y los alineamos a la derecha dándoles un tamaño de 200 píxeles, lo que los alinea sin la necesidad de recurrir a tablas.

 form#pago input{
font-size:12px;
background: white;
border:solid 1px LightSteelBlue;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
float: right;
margin-right: 15px;
width: 200px;
}

Finalmente arreglamos los elementos de la lista para que no se muestren los números y agregar un poco de espacio entre líneas.

 form#pago ol li {
line-height: 25px;
list-style: none;
}

Y si queremos agregar un estilo o color particular para que los campos obligatorios sean distinguidos, podemos recurrir a alguna de los siguientes códigos:

 form#pago [required]{
border:solid 1px red;
}

input:required {
outline: 1px solid red;
}

Con esto obtenemos un formulario bastante decente para nuestra web o blog, que se puede construir en menos de 10 minutos, dejándonos respirar y permitiéndonos salir a tiempo del trabajo para disfrutar nuestro fin de semana.

>>> Podemos ver aquí el ejemplo en funcionamiento <<<

Vale aclarar que esto es sólo aplicable para la validación del lado cliente, hay que recordar que siempre debemos realizar una validación del lado del servidor, aunque en muchas ocasiones solo sea por precaución, debemos asegurar la veracidad de los datos.

HTML5 nos ofrece esta nueva alternativa para realizar un filtrado a un nivel aún más bajo, si deseas combinarlo con Javascript y algún framework esta más que permitido, la seguridad nunca sobrará para un sitio.

Lo cierto es que el diseño web en HTML5 todavía está en pañales. Hace apenas unos años que empieza a surgir su desarrollo y aunque cada vez está calando con más fuerza en la comunidad de desarrolladores y los navegadores empiezan a darle soporte

No sé si es el momento de lanzar proyectos en HTML5, o esperar a ver que pasa con las especificaciones y los modos de interpretarlas que vayan consolidándose por los navegadores. De lo que sí es el momento es de empezar a aprender y a experimentar con él. Yo personalmente lo estoy probando en alguno de mis proyectos.

El diseño web en HTML5 es más semántico

Personalmente me gusta mucho toda la parte de semántica que se le ha añadido al código HTML con la llegada de la HTML5. Esa simplicidad por medio de etiquetas como <header> <article> o <footer> va a ahorrar a muchos diseñadores web la famosa divitis, o lo que es lo mismo, el usar divs para todo de manera excesiva. Ya no va a hacer falta poner algo como:

<div id="header">
    Contenido del encabezado de la página
</div>

En HTML5 será esto lo que usemos:

<header>
    Contenido del encabezado de la página
</header>

Como vemos, el diseño de una página web en HTML5 va a dotar al código fuente de mayor simplicidad y significado. Ya tan sólo el doctype que se usa al diseñar en HTML5 <!DOCTYPE html> nos puede dar una idea de lo que han buscado con esta nueva versión: hacer las cosas sencillas, y sobre todo sencillas de entender.

Ser un diseñador web preparado para HTML5

El caso es que los diseñadores web, las agencias de diseño web profesional tienen que empezar a adaptarse a los cambios e ir integrando con cautela esta valiosa herramienta en sus desarrollos, en los servicios que se ofrecen a los cliente. A la mayoría les dará igual con qué lenguaje se desarrolla su proyecto, lo importante es el resultado, pero con el tiempo agradecerán ver sus páginas web más veloces o mejor posicionadas en Google.

Los diseñadores web debemos prepararnos para diseñar en HTML5, así que para abrir boca, os dejo el link a una cheatsheet (chuleta) de HTML5 con las etiquetas principales, su uso y atributos, o esta otra en la que están resaltadas las diferencias con HTML4. Yo la tengo imprimida desde hace mes.

No olvidarse de CSS3

El uso de HTML5 va a ir de la mano de CSS3, así que no hay que olvidarse tampoco de preparase para este lenguaje que nos trae cosas tan útiles como bordes redondeados, degradados o textos animados simplemente con CSS puro. Cosas que hasta ahora necesitaban de uso de imágenes, javascript o incluso flash, ralentizando nuestras páginas web.

1. Obtenga los enlaces de sitios de temas relevantes al tuyo. Enlaces que apunten a tu sitio desde sitios con relevancia al tuyo tienen más valor que enlaces desde sitios que no son de su ramo.

2. Use la palabra clave en el texto del enlace. Evite usar palabras como haz clic aquí, o el nombre de su negocio, en vez usa palabras clave que le ayudarán a posicionar su sitio en frases con más volumen de búsqueda.

3. Confirme que el enlace que le dan es follow. Antes de tratar con algún sitio sobre un intercambio de enlaces, directorios de enlaces o la posibilidad de publicar un artículo, hay que verificar que el enlace que le va a dar es válido. Una opción, especialmente en directorios de artículos, es revisar artículos que ya están publicados y ver la calidad del enlace que hay en ellos. Si se trata de intercambio de enlaces, después de realizar el intercambio hay que revisar el enlace y volver revisarlo periódicamente.

4. Enlaces de redes sociales. Los redes sociales no dan enlace follow, sin embargo vale la pena sacar enlaces de ellos ya que los buscadores sacan mucha información de las redes sociales. No hay que establecer toda la estrategia sobre las redes sociales pero algún porcentaje de los enlaces sí tiene que venir de los mismos.

5. Trate de conseguir enlaces de sitios con pr alto. Enlace que sale de una página con pr 4 vale más que el enlace de una página con pr 0.

6. No es deseable enlaces de sitios malos. Evite trabajar con sitios de mala calidad: que contengan enlaces rotos, que su tiempo de descarga sea muy lento o que den enlaces a sitios con contenido de adultos o contenido ofensivo. Créame, no los necesitas como tus amigos.

7. ¿Y cuando te piden enlace reciproco? En general, lo mejor es recibir beneficios sin que se tenga que dar algo a cambio. Sin embargo, eso es muy difícil de hacer, especialmente, si se posiciona su sitio sin la ayuda de un consultor de seo .A veces no se cuenta con otra opción más que con la de dar un enlace a cambio. En este caso, hay que analizar bien con quien tratamos , qué tipo de enlace le dan, cuál será el beneficio en su estrategia y considerar si vale la pena dar el enlace a cambio o no.

Si ya están luchando con eso del link building seguro ya se dieron cuenta de que no es fácil conseguir enlaces de sitios con pr alto, con un tema relevante al suyo, sin dar a cambio un enlace. Una buena asesoría de un consultor SEO que cuente con los recursos adecuados le puede facilitar mucho el trabajo.

Para ello se cuenta con una gran cantidad de extensiones, generalmente creadas por terceros (desarrolladores independientes del proyecto principal Joomla), y en su mayoría gratuitas, aunque algunas ofrecen dos versiones, una básica gratuita y otra con mayores posibilidades de pago.

Cada vez que se necesite una extensión para Joomla 1.5, nos encontraremos con que se cuenta con varias opciones para un mismo fin. Deberemos saber que no todas las opciones son iguales, ya que algunas nos resultarán más útiles por contar con mayor cantidad de funciones, otras por ser más fáciles de manejar, o por tener alguna función específica que deseamos, o por que genera un código válido, etc.

Sin embargo, no podemos hacer un tutorial donde se describan todas las extensiones que permiten llevar a cabo la integración de un foro en Joomla 1.5, por lo que en este artículo, solo describiremos uno de los más populares, Kunena.

Descarga

Como siempre, para comenzar a utilizar una extensión, debemos descargarla. La versión que proponemos, dado que se encuentra desarrollada en español es la siguiente:

Descarga

Se trata de una versión modificada (no oficial), que cuenta con las mismas características que el desarrollo oficial, pero que está pensada fundamentalmente para las webs desarrolladas en español.

Características

Se trata de un componente que se encuentra integrado a todas las funciones de Joomla 1.5, por lo que el registro de usuarios, su administración, la conexión y desconexión de usuarios, se hace utilizando los elementos propios de Joomla 1.5. Esto quiere decir que, cuando un usuario de una página web desarrollada en Joomla 1.5 ingresa con su nombre de usuario y contraseña, también tiene acceso al foro integrado a Joomla con Kunena.

La integración también se realiza en los aspectos visuales, ya que se integra fácilmente con cualquier plantilla de Joomla, contando con plantillas propias que permiten (siempre utilizando los parámetros básicos de la plantilla de Joomla) modificar algunos de los aspectos del foro.

Configuración

Al igual que muchos componentes complejos, Kunena cuenta con un panel de control propio, al que se puede acceder desde “Componentes / Foros Kunena”. En este panel de control (Ver imagen inferior) se cuenta con varios íconos, el primero de los cuales nos lleva a la página de configuración de los foros.

La configuración de Kunena cuenta con muchos puntos en común con la configuración global de Joomla 1.5 como ya veremos. La configuración de Kunena se realiza desde una única página, en la cual encontraremos todos los parámetros de configuración divididos en paneles, de acuerdo con el tipo de configuración de que se trate.

Importante: Generalmente los componentes de este tipo, vienen con configuraciones por defecto que permiten un buen funcionamiento del mismo, por lo que en caso de desconocer la función, siempre es conveniente que se dejen los parámetros por defecto, con lo que se evitarán problemas posteriores.

Configuración básica

• Título: es el nombre que adoptará para el encabezado del foro, y que también aparecerá en los ítems de menú que conduzcan al foro desde cualquier parte de la página desarrollada con Joomla 1.5.
• Dirección de email: Email donde se recibirán las notificaciones de las actividades realizadas en el foro. Generalmente se trata del email del administrador de la página.
• Foro offline: Dejando la opción en “Si”, el foro queda fuera de servicio para los  visitantes y usuarios, aunque las personas con acceso al back-end podrán continuar navegando por él. Se utiliza para los casos en que se realizan actividades de mantenimiento y no se desea que se produzcan ingresos al foro mientras se están llevando a cabo.
• Franja horaria del servidor: A los efectos de mantener la hora actualizada (no olvidemos que en los foros suele ser visible la fecha y la hora en que se realizan los post), en los casos en que el servidor se encuentra en una zona horaria diferente a la de los usuarios del foro, se introduce aquí la diferencia en horas, tanto en números positivos como negativos, según sea el caso.
• Fin de sesión: El tiempo que dura una sesión, en segundos.
• Mensaje de foro offline: Es el mensaje que verán los visitantes al foro cuando el mismo se encuentre desactivado utilizando la opción descrita más arriba.
• Activar suscripciones RSS: Esta opción permite o no que los usuarios descarguen los últimos mensajes del foro.
• Tipo de RSS por defecto: Permite seleccionar el tipo de listado que será posible descargar. Cuando se selecciona “Por Mensaje”, el usuario recibirá una lista completa con todas las respuestas, mientras que cuando se selecciona “Por Tema”, el usuario recibirá solo la última entrada en cada uno de los temas.
• Historia RSS: mediante esta opción, se determina el período de tiempo que abarcará la descarga de RSS. La opción por defecto de Kunena es un mes, pero en caso de foros con mucha actividad, esto puede ocasionar algunos problemas, por lo que es conveniente reducir este tiempo a una semana o menos.
• Activar creación de PDF: Activando esta opción, los usuarios pueden descargar un documento PDF con el contenido del tema visible.

Configuración SEO

• URLs amigables: Similar a la opción con que cuenta Joomla 1.5. Esta opción hace que las páginas de los foros tengan o no URLs amigables, aún cuando en la configuración global de la página en Joomla 1.5 esta opción se haya configurado diferente.
• No usar IDs de categorías: Joomla 1.5 genera URLs donde se puede ver el número identificador de la categoría. Mediante esta opción, las URLs que generará el foro no incluirán este número. En el caso de los foros, teniendo en cuenta que los usuarios tienen la opción de crear temas, existe la posibilidad de que se generen URLs duplicadas, por lo que no es conveniente hacer uso de esta opción.
• Habilitar soporte UTF-8: Se utiliza esta opción en caso de que las URL`s SEF no se pueden leer.  Kunena acepta URLs UTF8 incluso si esta función se ha desactivado.

Configuración del frente

Las opciones que encontraremos en este cuadro, permiten configurar las diferentes opciones de visualización del foro, como la cantidad de temas y mensajes por cada tema que serán visibles, la cantidad de resultados mostrados en una búsqueda, el uso de emoticones, etc. Es muy sencillo configurar esta sección, aunque no es conveniente que se toquen algunos parámetros, como las rutas de las imágenes o rutas de páginas de ayuda, ya que pueden generar inconvenientes serios y no existen muchos motivos para cambiar estos directorios.

Configuración de usuarios

Mediante estos parámetros, podremos controlar el funcionamiento del foro para los usuarios, determinando si los usuarios podrán usar su nombre de usuario para identificarse o su nombre real, si se requerirá el email, si el mismo será mostrado a otros usuarios (lo que en la mayoría de los casos no es conveniente), permitir ediciones por parte de los usuarios, etc.

Por lo general, este tipo de parámetros son de muy sencilla utilización y son aspectos conocidos por todos los que frecuentan foros, por lo que este tipo de configuraciones no representa ninguna dificultad.

Opciones de longitud

En esta sección se puede configurar la longitud máxima de las palabras, del título y de las firmas. En el caso de la longitud máxima de las palabras, suele emplearse para evitar problemas con la plantilla, y la longitud máxima recomendada es de 70 caracteres. En el caso de la longitud del título, es importante para la generación de las URLs.

Configuración de opciones de seguridad

El empleo de estos parámetros depende en gran medida del tipo de foro que se esté creando, y del tipo de usuarios que se espera recibir.

• Solo usuarios registrados: Esta opción hará que el uso del foro, incluyendo la lectura, sea posible o no solo para usuarios registrados.
• Permitir cambio de nombre: Permite o no que los usuarios cambien de nombre al escribir los mensajes.
• Escritura pública: En caso de que se configure Si, cualquier usuario, registrado o no, podrá escribir en el foro. En caso de que se configure como No, solo los usuarios registrados podrán escribir mensajes en el foro.
• Protección anti-flood: Establece un tiempo de espera entre dos mensajes consecutivos por parte de un mismo usuario.
• Email a los moderadores: Cuando se activa esta opción, los moderadores del foro reciben notificaciones por email cuando se ingresan nuevos mensajes en el foro.
• Sistema antispam: activa o no el CAPTCHA en los mensajes de los usuarios.
• Incluir mensaje completo en email a suscriptores: Cuando se ha permitido la suscripción, los emails recibidos por los usuarios pueden incluir el texto completo de los mensajes o simplemente los títulos de los mismos.
• Ocultar IP de los moderadores: En caso de que esta opción se active, solo los administradores podrán ver las IP de los mensajes de los moderadores.

Configuración de Avatares

Mediante estos parámetros, es posible determinar si los usuarios podrán incluir avatares, si podrán subir sus propios avatares, el tamaño de las imágenes, etc. Se debe tener en cuenta que el empleo de avatares, la calidad y el tamaño de los mismos afectan el tiempo de carga de la página, por lo que se debe ser cuidadoso en este punto de la configuración. Permitir el uso de avatares de tamaños grandes, puede hacer que la página demore mucho tiempo en cargar, lo que puede perjudicar la permanencia de usuarios en la página, al prolongarse en forma excesiva la navegación.

Subida de archivos e imágenes

Lo primero que se puede determinar mediante el uso de esta configuración, es si los usuarios pueden o no subir imágenes o archivos. En caso de que esto sea permitido, determinar la visibilidad de los mismos por parte de invitados, el tamaño y el tipo de archivos permitidos.

Es conveniente que estas opciones sean permitidas en los casos que sea absolutamente necesario por el tipo de foro que se trata, ya que la subida de archivos, la descarga de los mismos, la presentación de imágenes por parte de los usuarios, consumen ancho de banda del servidor y provoca un enlentecimiento de la carga de la página.

Configuración de rangos de usuarios

Kunena permite la clasificación en rangos a los usuarios, de acuerdo a la participación de los mismos en el foro. Esto suele utilizarse como elemento motivador para la participación. También puede configurarse el uso de imágenes para establecer el rango de los usuarios.

Configuración del BBcode

Esta configuración permite determinar la presencia o no de determinados botones en el editor de los mensajes y la configuración de los mismos.

Opciones de integración

Mediante esta configuración, es posible integrar Kunena con componentes como JomSocial y Community Builder, en caso de que se estén empleando estos componentes en el desarrollo de webs sociales. Permite integrar los avatares, perfiles, mensajes privados, etc.

Configuración de plugins

Kunena cuenta con varios plugins que mejoran sus prestaciones. En caso de que algunos de ellos se hayan instalado, es posible configurarlos mediante esta sección de la configuración de Kunena. En el siguiente artículo, veremos como puede mejorarse un foro de Kunena mediante el empleo de plantillas, módulos y plugins especialmente diseñados para este poderoso componente de Joomla.

Regiones repetidas

Las regiones repetidas son aquellas que pueden ser utilizadas en forma reiterada dentro de una plantilla. Esto quiere decir que, si tenemos una región que utilizaremos en otras partes de la plantilla, podremos definirla como región repetida y duplicarla en el lugar que la necesitemos, ahorrando un tiempo considerable en la creación de regiones que ya fueron diseñadas.

Este tipo de elementos fue pensado (como casi todo Dreamweaver) para su utilización en maquetación  con tablas, aunque también admite otros tipos de elementos. Hay dos tipos de regiones repetidas: las regiones repetidas propiamente dichas y las tablas repetidas.

Otra característica importante de las regiones repetidas es que no necesariamente tienen por que ser editables. Sin embargo, lo más frecuente es que necesitemos que algunas partes de las regiones repetidas sean editables mientras que otras permanezcan bloqueadas. Esto es posible, ya que dentro de las regiones repetidas es posible establecer regiones editables.

Teniendo en cuenta sus características (posibilidad de duplicarse y de inserción de regiones editables), podría decirse que se trata de plantillas dentro de la plantilla.

Creación de regiones repetidas

Al igual que en el caso de las regiones editables, la selección de la región a convertir debe realizarse en la vista de diseño, por lo que todos los pasos que daremos en adelante se harán en esta vista.

En primer lugar, se debe señalar la región que utilizaremos como región repetida dentro del diseño que ya se encuentre desarrollado. Puede tratarse de un texto, una lista, títulos, imágenes o una combinación de elementos.

Luego podremos optar, al igual que en el caso de las regiones editables, por hacer clic con el botón derecho del ratón sobre la región señalada y hacer clic sobre “Plantillas / Nueva región repetida”, con lo que se abrirá un pequeño cuadro en el que deberemos introducir el nombre que le daremos a esta región para luego poder identificarla.

En la vista de diseño aparecerán las regiones repetidas rodeadas de un borde celeste con una etiqueta en la que puede leerse el nombre de la región. Es importante aclarar que solo se pueden introducir letras (mayúsculas o minúsculas) y números en la formación de un nombre de región.

Tablas repetidas

Dentro de las posibilidades de establecer regiones repetidas, se encuentra la opción de crear tablas con filas repetidas. Al igual que en el caso de las regiones repetidas propiamente dichas, se puede optar por hacer que algunas celdas sean editables, mientras que el resto permanece bloqueado.

Para crear una tabla repetida, se pueden utilizar los mismos procedimientos que se emplean en la creación de regiones repetidas, seleccionando la opción correspondiente a las tablas. En el cuadro que se abre, deberemos definir el número de filas y columnas que tendrá la tabla, además de las características de las mismas (ancho, altura, bordes, colores, etc.), además de definir el nombre de la tabla repetida.

La tabla creada de esta forma, puede ser parcialmente repetida, ya que la región repetida puede establecerse en este mismo cuadro, estableciéndose las filas inicial y final de la parte repetida de la tabla.
El color de fondo de las celdas y filas puede editarse para que se muestre con colores diferentes cuando la tabla repetida se inserta en un punto cualquiera del diseño. Para ello, bastará con editar el código en la vista de código, para lo cual se deben tener algunos conocimientos de HTML.

Regiones opcionales

La utilización de regiones opcionales es bastante más compleja, ya que incluye opciones de programación. Las regiones opcionales se establecen cuando se desea que las mismas se muestren u oculten ante determinadas circunstancias, por lo que se deben establecer algunos elementos condicionales (if, else), típicos de los lenguajes de programación.

Esto quiere decir que cuando nos encontramos diseñando, podremos definir algunos parámetros que harán que la región se muestre o permanezca oculta. Cuando más de una región opcional se vincula a un determinado parámetro, la modificación de éste puede hacer que el conjunto de regiones se muestren o se oculten.

Las regiones opcionales pueden ser de dos tipos: editables y no editables. Cuando se establece una región opcional no editables, se permite a los usuarios de la plantilla modificar los parámetros que hacen que ésta permanezca oculta o sea visible, pero sin poder editar su contenido. En las regiones opcionales editables, el usuario puede, adicionalmente, editar el contenido de dicha región.

Establecer regiones opcionales

El procedimiento para crear regiones opcionales es igual a los casos anteriores. En este caso, el cuadro que se abre cuenta con dos pestañas, que vemos en la imagen siguiente:

Como puede verse en la parte inferior de la imagen, en la pestaña correspondiente a las opciones avanzadas pueden introducirse las variables según las cuales se visualizará  o no la región establecida.

Tanto cuando se emplea el menú desplegable del botón derecho del ratón como yendo a través del menú Insertar, pueden verse las dos opciones posibles para el establecimiento de una región opcional. Si se establece simplemente “Región opcional”, ésta no será editable, ya que para ello puede verse más abajo el ítem correspondiente a las regiones opcionales editables.

Plantillas anidadas

En ciertas ocasiones, es posible que la utilización de plantillas no sea suficiente para colaborar en el diseño de una página web, como en el caso de páginas dentro de un mismo diseño, que requieren ciertos cambios respecto de la plantilla para que su visualización sea correcta.

Para ello, Dreamweaver CS4 presenta la opción de crear una nueva plantilla basada en la plantilla original, por lo que ambas plantillas se encontrarán vinculadas entre si, aunque su utilización en el diseño de una página web sea independiente.

Las regiones editables de la plantilla original se pasarán como tales a la plantilla anidada. Todos los cambios que se realicen en la plantilla original, se actualizan automáticamente en las plantillas anidadas.

Luego de creada la plantilla anidada, la misma puede ser modificada en todo aquello que se crea conveniente. Todo aquello que permanezca sin modificaciones, será actualizado desde la plantilla original cuando se edite la misma.

Creación de una plantilla anidada

Para crear una plantilla anidada, se debe crear un documento a partir de la plantilla que será base del diseño. Para ello, se debe ir a “Nuevo” del menú principal. Cuando se abre el cuadro correspondiente, se debe seleccionar “Página de plantilla”, tras lo cual se debe seleccionar la plantilla que será base.

Luego de realizadas las modificaciones que se entiendan necesarias, se utiliza “Guardar como plantilla”. Una vez guardado el documento, se actualizan los vínculos con el diseño original, del mismo modo que lo hace cuando se abre.

Pero además, luego de creado un nuevo documento basado en una plantilla, este documento permanece conectado a ella, de forma tal que cuando se realicen modificaciones a la plantilla, los documentos creados con ella pueden ser modificados mediante la actualización de los documentos.

Esto también representa una gran ventaja, ya que es posible realizar cambios profundos en el diseño de una página web realizando cambios únicamente en la plantilla, y luego solo deberá actualizarse el diseño de la página, con lo que los cambios realizados en la plantilla pasarán en forma automática a todas las páginas de la web creadas con ella.

Regiones de la plantilla

Las plantillas cuentan con cuatro tipos de región diferentes:

1. Regiones editables: Son aquellas regiones que el diseñador deja sin bloquear y en las que se podrán introducir modificaciones durante el proceso de creación de páginas web con plantillas. Generalmente estas regiones editables están relacionadas con la introducción de los contenidos de la página.
2. Regiones repetidas: Una región repetida es una sección del documento que puede encontrarse parcialmente bloqueada (como si se tratara de una plantilla dentro de una plantilla), de forma que puedan introducirse copias de este tipo de regiones dentro del documento creado con la plantilla. Por ejemplo, puede crearse una región repetida para los menús, en los que el diseño general está bloqueado, pero pueden introducirse ítems.
3. Regiones opcionales: Son regiones bloqueadas o parcialmente bloqueadas, en las que el usuario puede determinar si el elemento será mostrado o no. Esto es útil en aquellos casos en los que un diseño puede introducir algunos elementos en algunas páginas, pero no necesariamente en todas.
4. Regiones con atributos editables: Algunas regiones de la plantillas, pueden estar parcialmente bloqueadas, pero no en porciones visibles, sino en sus atributos. Por ejemplo, es posible hacer que al introducirse una imagen por parte del usuario de la plantilla, éste solo tenga la opción de determinar la alineación, mientras que el resto de los atributos permanece fijo.

Al momento de guardarse una plantilla y ésta no contiene regiones editables, Dreamweaver envía una alerta para que en caso de que se haya tratado de un olvido, se hagan las modificaciones necesarias.

Creación de una plantilla

Existen dos formas para crear una plantilla con Adobe Dreamweaver CS4. La primera, es la creación de una plantilla desde cero, o sea, a partir de una plantilla en blanco. La segunda, es la creación de una plantilla a partir de un documento existente. En esta última opción, permite que luego de la creación del diseño de una página web, establezcamos el mismo como plantilla para la creación del resto de las páginas de la web, con lo que se puede repetir el diseño de la página en el resto de la web con extrema facilidad.

Crear una plantilla a partir de un documento existente

El procedimiento para la creación de una plantilla a partir de un documento existente es muy sencillo, ya que solo basta con abrir el documento y guardarlo como plantilla en “Archivo / Guardar como plantilla”, tras lo cual se deberá establecer un sitio en cuya raíz se guardará la plantilla.

Crear plantillas en blanco

La forma de crear una plantilla en blanco es a través de “Archivo / Nuevo”. En el cuadro, se debe seleccionar “Plantilla en blanco” y luego se debe seguir el mismo procedimiento que se emplea en la creación de un documento nuevo, pudiendo seleccionar el tipo de lenguaje que se empleará, alguno de los diseños predeterminados, si se empleará CSS en la propia página o externo y el tipo de documento.

Establecimiento de las regiones editables

Luego de que se ha realizado un diseño para una plantilla en blanco o se ha abierto un documento para establecerlo como plantilla, se debe definir cuales serán las regiones editables del documento, a fin de proteger mediante el bloqueo a aquellas regiones que no se modificarán, pero que permita a la vez la introducción de los elementos necesarios para la creación de nuevas páginas basadas en la plantilla.

Cada elemento del diseño de una página web puede establecerse como una región editable. Sin embargo, no es posible establecer a varios elementos en conjunto como región editable. Para definir como región editable a un elemento, basta con seleccionarlo en vista de diseño, hacer clic con el botón derecho del ratón e ir a “Plantillas / Nueva región editable”.

También es posible crear una nueva región editable a través de “Insertar / Objetos de plantilla / Región editable” del menú principal.

En cualquiera de los dos casos, aparecerá un pequeño cuadro en el cual deberemos introducir el nombre de la región editable. Debemos tener en cuenta que cada región editable debe tener un nombre que será único en la plantilla. Una vez finalizado el procedimiento, la región editable aparecerá en la vista de diseño enmarcada por un rectángulo de color azul, que en la esquina superior izquierda tendrá una etiqueta con el nombre de la región editable.

Para eliminar una región como editable, se debe hacer clic con el botón derecho sobre la etiqueta con el nombre de la región editable, y hacer clic nuevamente en “Quitar formato de plantilla”. También es posible hacerlo seleccionando el elemento e ir a “Modificar / Plantillas / Quitar formato de plantilla” del menú principal.

Para cambiar el nombre de la región editable, se debe seleccionar el elemento e ir al cuadro Propiedades (si no aparece en la ventana el cuadro se abre desde “Ventana / Propiedades” o con Ctrl + F3), donde se muestra el nombre en un campo, en el cual introduciremos el nuevo nombre, siempre recordando que no deben repetirse los nombres de las regiones editables dentro de una plantilla.

En la segunda parte de este artículo, veremos como crear otros tipos de regiones y como trabajar con ellas.

Muchas veces nos olvidamos de los detalles, cuando en muchas ocasiones estos son fundamentales para lograr el enganche con los visitantes de tu web. La información necesita presentarse de manera adecuada, y con los detalles podemos dar ese toque de diferencia que hará que un usuario prefiera nuestro sitio sobre los otros.

En la actualidad, los navegadores permiten experimentar a gran escala con las hojas de estilo, con excepción de Internet Explorer, todos soportan la mayoría de las propiedades con las que cuenta este lenguaje. En este caso vamos a hablar de distintos tipos de animaciones hechas con CSS.

Animaciones de texto con CSS

Uno de los pequeños pero poderosos efectos que podemos crear hoy en día de manera fácil, es la animación de texto. Las animaciones, comúnmente conocidas en el ambiente del diseño, consisten en agregar un efecto de movimiento a un objeto, en nuestro caso al texto o a un div, lo que le agrega la sensación de que está en diferentes planos en ciertos momentos.

En el pasado existían etiquetas como “marquee” o “blink” que podían agregar ciertas animaciones primitivas a nuestro texto, llegó a tal grado el mal uso de ellas que actualmente se encuentran descontinuadas, y al verlas en una página pueden causar la indigestión de más de uno.

Hasta hace poco para realizar este efecto de manera correcta se tenía que recurrir a herramientas de diseño como Flash. En este momento CSS3 nos ofrece la capacidad para crearlo al agregar unas cuantas líneas de código a nuestra hoja de estilo.

Las animaciones CSS (@-webkit-keyframes) son parte del paquete propuesto por WebKit para la estandarización de CSS3, es por ello que actualmente sólo pueden ser visualizadas en Google Chrome y Safari. Su objetivo es poder brindar al desarrollador la capacidad de crear y realizar contenido gráfico sencillo pero a la vez enriquecedor.

Tipos de animaciones de texto con WebKit

Podemos manejar dos tipos de animación, “pulse” y “bounce”, efectos bastante conocidos para aquellos que han manejado algún programa de diseño anteriormente. Para agregarlos a nuestro objeto, no hay que tener un dominio total de CSS, basta con agregar las siguientes líneas en nuestro CSS;

@-webkit-keyframes pulse {
   from {
   opacity: 0.0; /* Nivel de transparencia inicial */
   font-size: 50px; /* Tamaño inicial de la font en la animación */
   }
   to {
   opacity: 0.8; /* Nivel de Transparencia final */
   font-size: 100px; /* Tamaño final de la font en la animación */
   }
   }
   #animacionpulse {
   -webkit-animation-name: pulse; /* El nombre del efecto que estamos agregando */
   -webkit-animation-duration: 2s; /* Tiempo que durará la animación */
   -webkit-animation-iteration-count: infinite; /* Las veces que queremos reproducir la animación */
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-direction: alternate; /* Propiedad utilizada para que el texto regrese al tamaño de origen de manera gradual */
   } 

   @-webkit-keyframes bounce {
   from {
   left: 0px;
   }
   to {
   left: 200px;
   }
   }
   #animacionbounce {
   -webkit-animation-name: bounce;
   -webkit-animation-duration: 2s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: alternate;
   width: 50%;
   padding: 0.2em 1em;
   position: relative;  /*La posición relative es necesaria */
   background: crimson;
   }
   

Y finalmente agregamos las siguientes líneas en el body de nuestro sitio:

<div id="animacionpulse" style="font-family: Arial; text-align: center;"> Probando Pulse! </div> 

<div id="animacionbounce"> Probando Bounce! </div>

Lo que hacemos básicamente es agregar la librería de animaciones @-webkit-keyframes, después especificamos que tipo de efecto queremos usar ya sea “pulse” como en el primer caso, o “bounce” como en el segundo, y procedemos a dar los valores necesarios para que se efectué la acción.

>>> Aquí podemos ver la demo. <<< (recuerda que sólo se ve en Google Chrome y Safari)

Como podemos observar los dos efectos son bastantes sencillos de aplicar y muy parecidos en composición, y si experimentamos podemos crear efectos más elaborados y complejos agregando atributos a estas estructuras básicas.

Crear banners animados con CSS y WebKit

Una de las funcionalidades que podemos darle a este efecto, es para crear un banner con una atmósfera donde el elemento seleccionado se encuentre en movimiento mientras que el resto de los elementos se encuentren estáticos o se difumen, y así lograr centrar la atención en ese punto.

Para realizarlo basta con aplicar el elemento “webkit-transform” que nos permite modificar la estructura del div al momento de la animación. El código CSS sería el siguiente:

 @-webkit-keyframes pulse {
   0% {
   background-color: black;
   opacity: 1.0;
   -webkit-transform: scale(1.0) rotate(0deg);
   }
   20% {
   background-color: black;
   opacity: 0.8;
   -webkit-transform: scale(1.2) rotate(-5deg);
   }
   40% {
   background-color: black;
   opacity: 0.6;
   -webkit-transform: scale(1.0) rotate(5deg);
   }
   55% {
   background-color: black;
   opacity: 0.8;
   -webkit-transform: scale(2.0) rotate(0deg);
   }
   65% {
   background-color: black;
   opacity: 0.9;
   -webkit-transform: scale(2.0) rotate(0deg);
   }
   100% {
   background-color: black;
   opacity: 1.0;
   -webkit-transform: scale(2.0) rotate(0deg);
   }
   }

   .banner {
   -webkit-animation-name: pulse;
   -webkit-animation-duration: 2s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-direction: alternate;
   color:FFF;
   background-color: black;
   width: 10%;
   padding: 0.2em 1em;
   margin: 6em;
   }

Y el HTML correspondiente:

<div>
   <p>Coches usados!
       <span style="font-size:12px">Ven y conoce el nuevo carro 3008. Maneja hacia el futuro!</span> </p>
</div>

Con esto obtenemos un recuadro en movimiento de color negro con el mensaje que incluimos en el div con clase “banner”.

>>> Aquí podemos ver la demo. <<< (recuerda que sólo se ve en Google Chrome y Safari)

Conclusiones

Como en todos los casos del diseño, no hay que exagerar el uso de un efecto, la cuestión aquí es saber donde y cuando aplicar cada técnica. El exceso sólo puede confundir e incluso abrumar a la persona que navega por nuestro sitio salga de nuestro hosting.

El animar un texto produce un resultado bastante atractivo, pero no por ello se deberá aplicar a todo el texto que nos lleguemos a encontrar. Debemos saber bien la función de cada parte de nuestro sitio y al tener esto como noción, nuestro mismo sentido común nos dirá en donde aplicarlo.

Por ejemplo, imagina que tenemos una página de blog donde constantemente exponemos cierta cantidad de artículos, ahora visualiza todos esos escritos con un efecto de animación, es algo frustrante ¿No lo crees?, no queremos que este efecto pronto se convierta en otra etiqueta “blink”.

Por otra parte, es muy importante tener en cuenta que este efecto no se visualiza en todos los navegadores ni mucho menos, sino que sólo se ve en Chrome y Safari por el momento. Esperemos que con el tiempo se integre en la estandarización de CSS3 y el resto de navegadores lo implementen.

Es por esta razón, que en muchas ocasiones veremos que un módulo alojado en la posición “top”, puede aparecer inclusive al final de la página, ya que estas locaciones pueden ser manejadas a criterio de los diseñadores con total libertad.

Los módulos tienen su propio gestor en Joomla 1.6, con el que se tiene un control completo de los mismos, además de proveer las funciones necesarias para la creación y eliminación de módulos.

Acceso al gestor de módulos de Joomla 1.6

El acceso al gestor de módulos puede realizarse desde el propio panel de control principal de Joomla 1.6, que tiene un ícono destinado a este fin. Además, puede accederse también mediante el ítem “Gestor de extensiones” y luego “Gestor de módulos” de la barra de herramientas principal, que aparece en la parte superior de todas las ventanas del Administrador.

Ventana principal del gestor de módulos de Joomla 1.6

En la imagen que vemos más abajo, podemos apreciar que el gestor de módulos, al igual que las demás secciones del Administrador de Joomla 1.6, cuenta con una barra de herramientas principal, donde se puede acceder a las principales funciones de la gestión de los módulos.

La barra de herramientas principal

En primer lugar, aparece el ícono “Nuevo”, que permite ingresar a la ventana donde se crean los módulos nuevos. Luego, está el ícono “Editar”, con el que se accede a una ventana donde se edita la configuración del módulo seleccionado. Luego, otra de las novedades de Joomla 1.6, se encuentra el ícono “Duplicar”, con el que se puede generar un nuevo módulo a partir de otro.

Esta función permite la creación de un módulo de similares características a uno existente. La principal ventaja que ofrece esta función, es que se puede crear un nuevo módulo a partir de otro y luego editar sus características que lo diferencian del anterior, lo que supone un considerable ahorro de tiempo, ya que muchas de las configuraciones ya se encontrarán realizadas y solo será necesario cambiar aquellos parámetros que serán diferentes.

Luego, se encuentran los botones de publicación y despublicación. El siguiente botón, es “Check In”, que hace una revisión de los módulos seleccionado. Finalmente, el ícono de la papelera, que hace que los módulos seleccionados sean enviados a la papelera de módulos, un paso previo a la eliminación completa de los mismos.

Cuerpo principal del gestor de módulos de Joomla 1.6

La parte principal del gestor de módulos se encuentra encabezado por la sección de búsquedas, que cuenta con una serie de filtrados para acceder a los módulos que cumplen ciertos requisitos, sin tener que buscar uno por uno en toda la tabla.

La tabla del gestor de módulos, similar a las tablas que muestran las distintas partes de Joomla 1.6, está dividida en varias columnas. Salvo la opción de publicación, el resto de las columnas solo muestran la información de la configuración, lo que quiere decir que en caso de querer modificar esta misma, debe recurrirse a la edición particular de cada uno de los módulos, accediendo a través del uso del botón “Editar” de la barra de herramientas principal.

En la primera columna, algo que es característico de Joomla, se encuentran las casillas de verificación que da la opción de seleccionar varios módulos a la vez, para realizar aquellas funciones que admite el tratamiento en bloque, como la publicación y la eliminación.

La segunda columna corresponde al título del módulo, que será el que se mostrará en la página principal, siempre y cuando esta opción se encuentre seleccionada. En la siguiente columna se muestra la posición en la que se encuentra el módulo, y puede ordenarse el listado en base a este criterio, haciendo clic en el nombre de la columna. Luego se encuentra la columna donde se indica las páginas donde este módulo será visible.

La siguiente columna muestra el tipo de módulo. A continuación, se muestra la columna del estado de publicación, lo que puede modificarse haciendo clic en el ícono que aparece en cada una de las celdas de esta columna. En la columna siguiente aparecen los números de orden en que se encuentran los diferentes módulos dentro de cada locación.

Posteriormente hay una columna en la que se puede ver el nivel de acceso a este módulo. Las dos últimas columnas pertenecen al lenguaje en que se encuentra configurado el módulo, y en la última, se informa el número de identificación del módulo.

En el pie de la tabla, se encuentra la navegación, con un selector que permite elegir la cantidad de módulos que van a ser mostrados por cada página (5, 10, 15, 20, 30, 50, 100 y todos). En base a la cantidad de módulos que serán listados, la tabla puede dividirse en varias páginas. Para facilitar la tarea de navegar entre los diferentes listados generados, en este pie se encuentran íconos que permiten cambiar de página.

Creación de un nuevo módulo

Para crear un nuevo módulo, se debe hacer clic en “Nuevo” en la barra de herramientas principal de esta ventana, tras lo cual se abrirá la siguiente ventana pop-up:

En esta ventana se debe seleccionar el tipo de módulo que se creará, tras lo cual se abre la ventana donde se introducirán los datos de configuración del nuevo módulo, que es la siguiente:

Detalles

Como puede apreciarse, esta ventana se encuentra dividida en tres secciones. La primera sección está destinada a los detalles, es decir, a los parámetros básicos de la configuración del módulo. En esta sección pueden verse en primer lugar, el campo “título”, el cual es obligatorio.

Luego aparecen cuatro listas desplegables en las que se puede seleccionar la posición donde se ubicará el módulo, el estado de publicación del mismo, el nivel de acceso y el número de orden en que se encontrará dentro de la posición seleccionada.

A continuación puede seleccionarse si se desea que el título se encuentre visible o no. Luego aparecen las fechas de publicación y de finalización de la publicación del módulo. En caso de dejarse la opción por defecto, la fecha de publicación será la actual, mientras que la fecha de despublicación quedará en “nunca”.

Debajo se encuentra una lista donde se selecciona el idioma del módulo. Más abajo, aparece un campo en el cual pueden dejarse notas, para diferentes utilidades. Finalizando esta sección se encuentran tres textos de información, donde puede verse el tipo de módulo que se está creando (lo que fue realizado en el paso anterior), la locación del módulo (sitio o back-end) y una descripción del tipo de módulo.

Asignación del módulo

La sección que se encuentra debajo de la primera, contiene la información de asignación de páginas para el módulo. En esta sección, puede definirse en que páginas se verá y en cuales no. El tipo de asignación puede seleccionarse en una lista desplegable, en la que se elije entre “todas”, “ninguna”, “solo en las páginas seleccionadas” y “todas menos en las páginas seleccionadas”.

Cuando se selecciona una de estas dos últimas opciones, se habilita el campo siguiente, en el que se muestra un listado de todos los artículos contenidos en la página, divididos en sus correspondientes secciones. Una casilla de verificación indica en cuales o cuales no (según la opción seleccionada en el paso anterior) se verá el módulo en creación.

Opciones

La tercera sección se encuentra a la derecha, y es en la que se encuentra la configuración de opciones básicas y avanzadas. En las opciones básicas, solo se puede determinar si la fecha será mostrada o no.

En las opciones avanzadas, se puede seleccionar las opciones de Layout alterno y el manejo del caché, mientras que en un campo que aparece en blanco, puede determinarse el sufijo para el módulo.

1. Nombra los campos del formulario con el atributo “name”

Esto es fundamental para facilitar el manejo de los datos con scripts, y para hacer uso de arreglos globales con los métodos $_POST y $_GET en PHP.

Muchas librerías de javascript basan su funcionamiento en este atributo, jQuery cuenta con varios métodos que realizan una acción en base al nombre, y si el campo no cuenta con este atributo no se puede aplicar o detonar dicha acción.

De igual manera, aquellos que deciden utilizar PHP como lenguaje de programación para desarrollar los blog o webs que tienen en su hosting, podrán notar que para utilizar los métodos $_POST o $_GET, básicos para acceder a los datos que fueron ingresados en un formulario, necesitan utilizar el valor del atributo “name” dentro de dicho arreglo.

Trata de utilizar un nombre que este relacionado con los datos que introducirás en el campo, para que sea más sencillo recordar y utilizarlo en eventos posteriores.

<input type="text" name="telefono” />

2. Usa un “id” distinto para cada campo del formulario

Te permitirá manejar otros atributos y aplicar estilos de CSS, al mismo tiempo que servirá para diferenciar campos relativamente similares.

<input type="text" name="telefono” id=”tel” />

3. Aplica el elemento “label” adecuadamente

Aplica el elemento “label” para escribir un texto relacionado con algún campo del formulario. Usualmente para esta acción usamos etiquetas como “span”, las cuales a simple vista realizan la misma función. No hay nada de malo en hacerlo, pero hay que recordar que la etiqueta “label” nació exclusivamente con este propósito por lo que los estándares recomiendan su uso.

Gracias a este elemento podrías agregar el atributo “for” que te permite vincular el texto con el campo, algo que no se puede realizar al utilizar los elementos “span” o “p”.

El atributo “for” contendrá como valor el “id” del campo con el que queremos vincular el texto, esto permite que al dar clic sobre el texto el puntero del Mouse se coloque en el campo vinculado.

<label for=”tel”>Teléfono</label><input type="text" name="telefono” id=”tel” />

4. Utiliza “tabindex” para mejorar la accesibilidad

Utiliza el atributo “tabindex” para controlar de una mejor manera la accesibilidad a los campos de tu formulario y establecer un orden de importancia entre ellos. Cada vez es más común que los visitantes de un sitio hagan uso de la tecla “Tab” para desplazarse, ya que resulta ser más rápido y sencillo que utilizar el Mouse se ha convertido un método bastante popular, por lo que es importante saber controlar su comportamiento dentro de nuestro formulario para así establecer un orden de importancia entre los campos.

Por defecto, la tecla “Tab” seguirá el orden lineal en que se encuentran posicionados los elementos dentro del código fuente. Es decir, al momento de pulsar la tecla “Tab” dentro de un formulario, el puntero se posicionará en el primer campo que encuentre dentro del HTML, al pulsarla de nuevo se irá al segundo y así sucesivamente.

Si este no es el orden que deseas dar, puedes agregar de manera sencilla el atributo “tabindex” en la etiqueta de tu campo, esto te permitirá darle el orden que tu desees a los elementos. Dicho atributo debe tener asignado un valor numérico, el cual representará su posición, aquel que tenga el número más pequeño será el primero en ser accedido por la tecla “Tab”.

Entonces, si yo escribo las siguientes líneas de código:

<form>
<input type="text" name=”1” id=”1” tabindex="2" />
<input type="text" name=”2” id=“2” tabindex="4" />
<input type="text" name=”3” id=”3” tabindex="1" />
<input type="text" name=”4” id=”4” tabindex="3" />
</form>

Obtendré como resultado en mi navegador, un formulario con cuatro campos, de los cuales el primero en ser accedido mediante la tecla “Tab” será el que se encuentra escrito linealmente en la tercera posición, debido a que cuenta con el atributo tabindex = “1”.

5. Emplea el atributo “accesskey” cuando sea necesario

Emplea el atributo “accesskey” cuando sea necesario y apropiado colocar el puntero en un campo especifico mediante el teclado. Este atributo agrega la propiedad para acceder a un campo mediante una combinación de teclas, la cual estará conformada por la tecla Alt + el valor que se le da al atributo.

Es decir, si yo le doy el valor de “b” al atributo accesskey de mi etiqueta input, al apretar la combinación Alt+b, el puntero se colocará automáticamente en ese campo.

Trata de elegir combinaciones que no se encuentren en uso por algún navegador, para evitar confusiones y que se despliegue un menú o se detone una acción, en vez de llevar el puntero al campo que cuente con el atributo.

Al momento de codificar la propiedad queda de la siguiente manera:

<label>Buscar: </label><input type="text" name=”buscar” id=”buscar” accesskey="b"/>

Obteniendo como resultado un recuadro, en el cual podemos colocarnos con la clave de acceso “Alt+b”.

No es recomendable hacerlo para todos los campos, trata de aplicarlo únicamente a elementos importantes o claves, y si lo consideras necesario has de hacer saber al usuario que existen dichas combinaciones disponibles.

6. Envuelve y segmenta tu formulario utilizando el elemento “fieldset”

Cuando manejamos formularios muy largos y/o conformados por varios elementos similares, es recomendable dividirlos en sectores que estén compuestos por campos relacionados, para permitirle al desarrollador llevar una mejor administración de los elementos, y mostrar al usuario una cara más limpia y ordenada del formulario.

Por ejemplo, si tenemos un formulario que necesita recolectar información similar sobre dos establecimientos diferentes, podemos usar el elemento fieldset para separar y delimitar los datos relacionados a cada uno y para que así no sean confundidos por el usuario.

Para ello, podemos apoyarnos en el elemento “legend”, cuya función equivale a agregar un título a cada uno de los “fieldset” donde se utilice, quedando representado de la siguiente manera:

<fieldset>
<legend>Hotel 1</legend>
<label>Ciudad:</label><input type="text" name=”C1”/>
<label>Dirección:</label><input type="text" name=”D1”/>
<label>Teléfono:</label><input type="text" name=”T1”/>
</fieldset>
<fieldset>
<legend>Hotel 2</legend>
<label>Ciudad:</label><input type="text" name=”C2”/>
<label>Dirección:</label><input type="text"name=”D2” />
<label>Teléfono:</label><input type="text" name=”T2”/>
</fieldset>

Con esto obtendremos dos recuadros, cada uno con sus respectivos campos y con el título establecido en la etiqueta legend.

7. Asigna de manera correcta todos los atributos de la etiqueta

Es un principio fundamental de los estándares de la W3C. Muchas veces por costumbre o comodidad nos olvidamos de cerrar o declarar correctamente un atributo.

Esto pasa comúnmente con atributos como selected, checked, readonly y disabled, los cuales son incluidos en el elemento sin agregarles algún valor, y aunque de la forma incorrecta aún hacen lo que deberían de hacer, los estándares nos indican que esta forma de programar no es la correcta y debemos agregar un valor que se encontrará entre comillas.

Incorrecto:

<input type="checkbox" checked disabled />
<input type=”text”  readonly />
<option selected>

Correcto:

<input type="checkbox" checked=”checked” disabled=”disabled” />
<input type=”text”  readonly=”readonly” />
<option selected=”selected”>

8. Para listas con muchos campos, ordena alfabéticamente

Ordena los datos de tus listas por alfabeto y utiliza el agrupamiento de opciones con el elemento “optgroup” para categorizar cuando tengas un “select” demasiado grande, esto te permitirá agregar un título sobre cada grupo de opciones, las cuales dividirás en base al factor común que desees.

Supongamos que tenemos una lista “drop-down” donde debemos incluir todos los países del mundo, el resultado es aproximadamente 198 opciones. Algo abrumador que puede hacerse accesible con la simple función de ordenar los datos por alfabeto.

Al agrupar las opciones en base al continente que pertenecen, le facilitamos aún más las cosas al usuario reduciendo el número de países o regiones en donde tiene que buscar, y esto lo podemos hacer de la siguiente manera:

<select>
<optgroup label="América">
<option>Argentina</option>
<option>Canadá</option>
<option>Chile</option>
<option>Estados Unidos</option>
<option>México</option>
<option>Venezuela</option>
</optgroup>
<optgroup label="Europa">
<option>Albania</option>
<option>Chipre</option>
<option>España</option>
<option>Francia</option>
<option>Inglaterra</option>
<option>Italia</option>
</optgroup>
</select>

Debemos incluir el atributo “label”, que tendrá como valor el título que deseamos poner en la parte superior de cada grupo, sin este atributo no se visualizará la división y puede causar confusión para los usuarios de tu sitio web.

9. Da un estilo adecuado a tu formulario

Cuando crees el diseño web de tu formulario, resalta las partes importantes y se creativo, no elijas colores que puedan causar confusión o molestia, no elijas fondos oscuros con letras oscuras ni mucho menos colores de letras claros con un fondo blanco. Presta atención a los principios del diseño web.

10. Valida, sin esto tu formulario puede ser menos que inútil

Al momento de validar tu web es recomendable hacerlo tanto del lado del cliente como del servidor, para advertir de manera puntual al usuario que esta cometiendo un error y por si este se llega a filtrar evitar en el servidor que el dato perdure.

Para la validación en el lado del cliente, Javascript representa la opción más sencilla para llevarla a cabo, pero siempre debemos asegurarnos de que nuestra aplicación funciona sin él, ya que pueden surgir casos donde el usuario lo tenga desactivado, y es donde la validación del lado servidor entrará para evitar que se ingresen datos no adecuados.

La validación del lado del servidor variará según el lenguaje que estemos utilizando (PHP, ASP, JSP, otros), pero cualquiera que sea el que usemos se estructurará de manera sencilla, aún más si estamos usando algún framework.

En muchos casos se puede recurrir a AJAX con el uso de jQuery, para conseguir una retroalimentación relativamente más rápida por parte del servidor de hosting, para que el usuario reciba el mensaje del error que pudo haber ocurrido.