FRAMEWORKS PHP HISPANOS

El desarrollo de Frameworks de diferentes lenguajes de programación se ha expandido en el mundo de la web. PHP como lenguaje líder para desarrollar en hispanoamérica es mucho más que Cake, CodeIgniter, Symfony o Zend.

La siguiente es una colección de proyectos interesantes provenientes de España y Latinoamérica:

EN MÉXICO

ZANPHP

Un framework que se lanzó este año de la mano del emprendedor mexicano y CEO de MilkZoft: Carlos Santana. Dicho framework está escrito en PHP5 y según su creador se originó a partir de un CMS y la “necesidad de hacer un sistema que permitiera administrar sitios web con más rapidez”.

MilkZoft es la empresa que respalda este proyecto, así como también al CMS “MuuCMS”. Santana afirma que se inspiró en los frameworks Symphony y CodeIgniter y que tomó el desarrollo de ZanPHP como un reto personal en donde la principal motivación fue y sigue siendo el aprendizaje.

TLALOKES PHP

Así como las entidades divinas de la mitología mexicana que se encargaban de controlar los flujos de agua este framewoek está concebido para que sea un “ayudante en las tareas del desarrollador”. Fue reescrito 10 veces desde el 2004 y lanzado en su versión 1.0 en el año 2009.

Basilio Briceño, el desarrollador, cuenta que “ningún framework se adaptaba al balance entre velocidad y facilidad de uso” que él buscaba.  Actualmente variossitios usan Tlalokes debido a su enfoque de alta disponibilidad.

TETL PHP

A mediados del 2008 Alvaro Cabrera comenzó a desarrollar las primeras versiones de “Amigable” el framework que en el 2011 se convertiría en “Tetl PHP“. El nombre deriva del término “náhuatl” que significa roca y que determina la dureza, firmeza y solidez del framework que busca ser un “fundamento para comenzar una nueva construcción”.

Para Alvaro “el uso de un lenguaje o herramienta especifica no determina la implementación de buenas soluciones automáticamente”. Además afirma que “lo más importante en un framework es la expresividad, brevedad y que tenga una sintaxis de su agrado”.

SIMPLON

El principal objetivo de este framework está expresado en su nombre: simplificar. Fue concebido en el 2008 por dos emprendedores de México: Rubén Schaffer y Luca Lauretta. Actualmente se puede descargar la versión alpha del framework desde su sitio web.

Rubén cuenta que programó en el paradigma de programación estructurada y luego descubrió las ventajas de usar objetos. “Veía frameworks atascados en el modelo de lo que en Java es posible y “correcto”" entonces junto a Luca decidieron buscar algo “enfocado a definir y cambiar los datos, como se procesan y como se ven en una única definición de los mismos”.

FLAVOR PHP

Basado en el patrón MVC jerárquico, este framework PHP5 fue desarrollado por Pedro Santana en el año 2008. Es open source, compatible con UTF-8 y cuenta con el patrón Active Record. Varios proyectos web utilizan dicho framework, como Sabros.us y Stan entre otros.

EN ESPAÑA

AKELOS PHP

Inspirado en las ventajas de Ruby on Rails y basada en el patrón de diseño MVC. Su creador, Bermi Ferrer, comenzó a desarrollar este framework en el 2004 ya que no encontraba ninguna plataforma de desarrollo ágil. Finalmente en el 2006 se lanzó Akelos 0.6 y en el 2009Akelos 2.

Bermi se inspiró en el libro Patterns of Enterprise Application Architecture para crearlo y afirma que en Akelos “todos los métodos y las interfaces son cuidadosamente seleccionadas, por esto cada vez que alguien quiere hacer algo simplemente tiene que escribir lo que piensa”. Algunos proyectos en los que se usa este framework son Vimity, Lingus TV y The Chemical Brothers.

EN URUGUAY

YUPP FRAMEWORK

Es de procedencia uruguaya, es desarrollado por Pablo Pazos y ya cuenta con varias versiones del mismo. Yupp Framework busca simplificar el desarrollo de aplicaciones web implementando el patrón de diseño MVC + S. La diferencia entre este framework y otros es que posee una API  simple centrada en el modelo de datos.

Pablo cuenta que todo comenzó con un proyecto de CMS y que al tratar de hacerlo más genérico y extensible fue que se originó el proyecto Yupp framework. El desarrollo de las diferentes versiones se realiza gracias al aporte de la comunidad a través del grupo de Yupp en donde actualmente están trabajando en la versión 0.4.

EN COLOMBIA-VENEZUELA-ESPAÑA

KUMBIA PHP

Es un framework para aplicaciones web libre escrito en PHP5 y está basado en diferentes prácticas de desarrollo, entre ellas DRY y el Principio KISS. Sus desarrolladores son varios y de diferentes nacionalidades. Entre ellos figuran: Deivinson Tejeda (Venezuela), Joan Miquel Abrines (España) y Andrés Gutierrez (Colombia).

Algunas de sus principales caracteristicas son: el sistema de plantillas sencillo, la administración de Caché, Scaffolding avanzado, soporte para AJAX y está orientado al público de habla castellana. El primer lanzamiento fue en enero del año 2007 y dos años después lanzaron la versión 1.0 en beta. Actualmente hay varios proyectos que utilizan dicho framework.

Cómo identificar fuentes utilizadas en la web

Una fuente de ordenador es un archivo de datos que contiene los símbolos y caracteres necesarios para representar escritos en determinadas aplicaciones o sitios web. Este texto que estáis leyendo está representado por una fuente que a su vez tiene unas características especiales tales como tamaño, estilo o colores asociados.

Hay multitud de fuentes, algunas muy populares y otras infames -me viene Comic Sans a la cabeza-, y mientras que algunas tienen derechos reservados y es necesario pagar por utilizarlas, otras las podemos utilizar gratuitamente para nuestro sitio web u otras creaciones. Hay multitud de sitios donde encontrarlas, el problema es que en ocasiones queremos utilizar esa fuente que tanto nos gusta de un sitio y no sabemos cual es.

Para usuarios avanzados puede ser relativamente fácil averiguarlo, entrando en el código fuente y buscando tal vez en la hoja de estilos CSS, pero tal vez sea más fácil, por simplicidad y por ahorrar tiempo, utilizar algún método de identificación de fuentes como Fount.

A diferencia de algunas extensiones de navegador de las que os hemos hablado, como WhatFont, Fount utiliza la potencia del lenguaje JavaScript para ofrecernos un bookmarklet que podemos arrastrar a la barra de favoritos de nuestro navegador y utilizar en el momento que queramos identificar fuentes.

Un bookmarklet es una serie de códigos estándar que podemos consumir en cualquier navegador con soporte Javascript (es decir, Chrome, Firefox, Safari o Internet Explorer, por ejemplo). Para utilizar Fount basta con arrastrar el bookmarklet desde la página oficial para, inmediatamente, disfrutar de sus servicios:

• Un clic entrará en modo identificación
• Desde ese momento, podemos pulsar sobre la palabra / fuente que queramos identificar para mostrar su información
• Se nos mostrarán datos tales como nombre de la fuente, tamaño o estilo utilizados
• Un nuevo clic en el bookmarklet saldrá del modo identificación

Como véis, identificar fuentes es muy sencillo gracias a Fount, un fragmento de código que no provoca carga alguna en nuestro navegador al no ser una extensión residente. Podemos utilizar el bookmarklet cuando queramos, incluso aunque no lo tengamos en la barra de favoritos, tal vez renegándolo a una carpeta de favoritos si no vamos a utilizarlo de forma demasiado frecuente.

Curso de HTML para principiantes, parte V

legamos a la última entrega de HTML para principiantes. Ya hemos cubierto todos los conceptos básicos, y en nuestra entrega anterior avanzamos un poco más y revelamos los detalles de las tablas, además de hablar sobre la forma correcta de subir archivos de imágenes a la web  y la creación de listas. En el día de hoy, abarcaremos uno de los temas más complicados pero también útiles: los formularios.

Hace algunas semanas también les compartimos una lista sobre cómo hacer formularios online sin necesidad de saber de código. Estas opciones también son válidas, pero en ese caso, les recomendamos dejar de leer aquí mismo.

Dentro de HTML tenemos la posibilidad de crear una especie de aplicación web muy básica con código, estos serían los formularios. Generalmente se los usa para eso: formularios de contacto, de consulta, de sugerencias, etc. Su uso está muy abarcado porque ha ido reemplazando al atributo mailto del que les hablamos en el apartado sobre enlaces, dado que varios bots usaban estas direcciones de correo detectándolas en el código para enviar spam.

Tenemos dos tipos de formularios: los formularios simples y los formularios avanzados. Comenzaremos por los simples.

Formularios simples

Se crean usando nada más que dos etiquetas, <form> e <input>. <form>, por supuesto, será la etiqueta que le indique al navegador que está por comenzar un formulario. Y es imperativo que la cerremos cuando termine. Dentro de <form> encerraremos todos los campos que queramos que estén incluidos en el formulario. Con <input>, como veremos a continuación, vamos a poder definir dichos elementos, y son bastantes.

Antes de pasar a estos elementos, deberíamos repasar los atributos que se le pueden sumar al formulario:

• action: con este atributo vamos a indicar la URL donde queremos que se procesen los formularios. Generalmente tendrá la extensión .php.
• method: aquí tendremos dos opciones de atributo, post o get. Dependerá del tipo de método que se use para enviar el formulario. Generalmente, para los formularios de contacto, se usa post, porque permite el envío de mucha más información. Además, los datos enviados por get luego se pueden ver en la barra del navegador, como por ejemplo sucede con Google que emplea este método.
• accept: con este atributo definimos cuáles son los formatos de archivos aceptados por el formulario.

Existen otros atributos, pero estos son los más populares. De hecho, los más usados son action y method.

Elementos de un formulario

Ahora pasaremos a repasar los diferentes elementos que pueden estar incluidos dentro de la etiqueta <input>. Esta es la etiqueta fundamental para crear elementos, con algunas excepciones, así que es importante no olvidarlo. Primero comenzaremos detallando los atributos que puede tener <input> para luego hablar bien de los elementos.

Estos atributos son:

• type: aquí vamos a ingresar qué tipo de elemento queremos. Es el atributo más importante. Con text, passwork, checkbox, submit, reset, y más, podemos armar un formulario simple de contacto.
• name: este atributo le asigna un nombre al elemento, y también es fundamental.
• value: cuando ingresamos este atributo, es para poner un valor inicial dentro del elemento. Por ejemplo, si tenemos una lista del 1 al 10 y queremos que comience con uno, el atributo deberá decir value=”1”.
• size: aquí delimitaremos el tamaño de caracteres que debe tener el campo, en el caso de texto y contraseña, y el tamaño de píxeles que debe tener el cuadro en el resto.
• maxlenght: la cantidad máxima de caracteres permitida en un campo.
• checked: cuando estamos usando checkboxes, este atributo permite predeterminar cuál estará seleccionada de antemano.
• disabled: nos permite deshabilitar un elemento del formulario.
• readonly: permite que creemos un elemento que sea sólo lectura.
• src: nos permite crear botones con imágenes, se usa para el botón del formulario y tiene que estar acompañado por una URL.
• alt: como sucede con este atributo, podemos agregar un texto descriptivo.

Ahora que ya conocemos los atributos, podemos avanzar con los tipos de elemento de formulario que definimos en el código a través del atributo type.

El primero de estos tipos es el campo de texto, el elemento más usado en los formularios. Nos permite crear un cuadro de texto vacío para que, por ejemplo, el usuario pueda insertar su nombre de usuario. En el código, veremos algo así –digo algo así porque falta agregar párrafos y texto; este código es simplemente para ver cómo funcionan las etiquetas y cómo deben ser ordenadas, si lo llevamos a un navegador no funcionará y se verá horrible:

<html>
<head><title>Ejemplo de formulario</title></head>
<body>

<form>
<input type=”text” name=”nombre” />
</form>

</body>
</html>

Aquí vemos cómo quedaría el resultado, pasado al navegador:

Dentro del mismo sentido, casi sin variaciones excepto con el atributo, tenemos a las contraseñas. Estas se deben crear claramente usando el atributo password, y el código no se diferencia demasiado del de texto. Aquí vemos el ejemplo anterior, con el agregado de una contraseña:

<html>
<head><title>Ejemplo de formulario</title></head>
<body>

<form>
<p>Nombre
<input type=”text” name=”nombre” /></p>
<input type=”passwork” name=”Contraseña” />
</form>

</body>
</html>

Ahora avanzamos con las checkboxes, otro clásico de internet, que en realidad no son para nada difíciles de crear. Como pueden intuir, tenemos que usar el atributo checkbox, y luego ir enumerando cada uno de los elementos que queremos que tenga. Es algo engorroso porque hay que usar la etiqueta cada vez que queremos agregar una opción. Para que no sean separados con demasiado espacio, tenemos que añadir además la etiqueta <br />. Siguiendo con nuestro ejemplo:

<html>
<head><title>Ejemplo de formulario</title></head>
<body>

<form>
<input type=”text” name=”Nombre” />
<input type=”passwork” name=”Contraseña” />
<input type=”checkbox” name=”Ejemplo1” value=”ejemplo1” />Ejemplo 1
<input type=”checkbox” name=”Ejemplo2” value=”ejemplo2” />Ejemplo 2
<input type=”checkbox” name=”Ejemplo3” value=”ejemplo3” />Ejemplo 3
</form>

</body>
</html>

Similares a las checkboxes, tenemos a los radiobuttons, que a diferencia de los anteriores son mutuamente excluyentes. Esto quiere decir que no podemos elegir múltiples opciones, sino únicamente una sola. El tipo de atributo que usamos es radio, y el código nos estaría quedando de esta manera:

<html>
<head><title>Ejemplo de formulario</title></head>
<body>

<form>
<input type=”text” name=”Nombre” />
<input type=”passwork” name=”Contraseña” />
<input type=”checkbox” name=”Ejemplo1” value=”ejemplo1” />Ejemplo 1
<input type=”checkbox” name=”Ejemplo2” value=”ejemplo2” />Ejemplo 2
<input type=”checkbox” name=”Ejemplo3” value=”ejemplo3” />Ejemplo 3
<input type=”radio” name=”sexo” value=”hombre” checked=”checked” />Hombre
<input type=”radio” name=”sexo” value=”mujer” />Mujer
</form>

</body>
</html>

Ahora podemos avanzar a los botones. Tenemos dos, submit y reset. Uno de ellos nos permitirá enviar la información del formulario, y el otro nos permitirá borrar todos los valores para volver a una instancia original. La diferencia reside en cómo completemos el atributo type. Si es con submit, enviaremos, y si es con reset, borraremos. Antiguamente se usaban los dos botones pero hoy en día se ha perfeccionado y casi nadie usa reset, sobre todo porque los formularios no se crean únicamente con HTML sino que están apoyados por PHP y JavaScript. Igualmente, aquí está el ejemplo:

<html>
<head><title>Ejemplo de formulario</title></head>
<body>

<form>
<input type=”text” name=”Nombre” />
<input type=”passwork” name=”Contraseña” />
<input type=”checkbox” name=”Ejemplo1” value=”ejemplo1” />Ejemplo 1
<input type=”checkbox” name=”Ejemplo2” value=”ejemplo2” />Ejemplo 2
<input type=”checkbox” name=”Ejemplo3” value=”ejemplo3” />Ejemplo 3
<input type=”radio” name=”sexo” value=”hombre” checked=”checked” />Hombre
<input type=”radio” name=”sexo” value=”mujer” checked=”checked” />Mujer
<input type=”submit” name=”enviar” value=”Enviar” />
</form>

</body>
</html>

También se pueden agregar otros botones usando el tipo de atributo button, pero este tipo de botones únicamente son útiles si los combinamos con JavaScript. Con este código podemos programar para que el botón haga lo que necesitemos que haga.

Formularios avanzados

Ahora pasaremos a los formularios un poco más avanzados. Para poder avanzar necesitamos conocer más etiquetas, una de las más importantes es <fieldset>. Con esta etiqueta podemos agrupar partes del formulario y sumar la etiqueta <legend> para darles un título. Dentro del abanico de posibilidades también encontramos los menús desplegables y las cajas de texto.

Para crear un menú, tenemos que usar no la etiqueta <input> sino la etiqueta <select> y para crear un cuadro de texto, no nos confundamos con <text>, ahora tenemos que usar <textarea>. Dentro de nuestro código anterior, estas nuevas adiciones se verían así:

<html>
<head><title>Ejemplo de formulario</title></head>
<body>

<form>
<input type=”text” name=”Nombre” />
<input type=”passwork” name=”Contraseña” />
<input type=”checkbox” name=”Ejemplo1” value=”ejemplo1” />Ejemplo 1 <br />
<input type=”checkbox” name=”Ejemplo2” value=”ejemplo2” />Ejemplo 2 <br />
<input type=”checkbox” name=”Ejemplo3” value=”ejemplo3” />Ejemplo 3 <br />
<input type=”radio” name=”sexo” value=”hombre” checked=”checked” />Hombre
<input type=”radio” name=”sexo” value=”mujer” checked=”checked” />Mujer
<input type=”submit” name=”enviar” value=”Enviar” />
<select name=”pais>
<option value=”España”>España</option>
<option value=”Argentina”>Argentina</option>
<option value=”Portugal”>Portugal</option>
<option value=”Chile”>Chile</option>
<textarea name=”comentarios” value=”Deje sus comentarios” cols=”10” rows=”5”></textarea></form>

</body>
</html>

Con esto ya podemos crear un formulario completísimo.

Curso de HTML para principiantes, parte IV

Las imágenes en HTML

Las páginas web no podrían existir sin imágenes. Hoy en día, la importancia de lo visual en las páginas web es obvia. Pero las imágenes tienen que estar subidas de una manera determinada para poder funcionar de forma efectiva. Tenemos dos formas de incluir imágenes, dependiendo del tipo de imágenes que queremos usar. Por eso, vamos a comenzar con la diferenciación entre estos tipos.

Por un lado, tenemos las imágenes de contenido. Estas son imágenes que se incluyen directamente en el código HTML y que deberían servir para proporcionar información adicional. No siempre sucede, pero ese es el espíritu. Por otra parte, tenemos las imágenes de decoración o adorno que se insertan directamente en el código CSS y que no tienen que ver con lo que estamos tratando en este momento. Este tipo de imágenes están insertadas en las hojas de estilo.

Nos dedicaremos, entonces, a las imágenes de contenido. Estas se insertan a través de la etiqueta <img>, que a su vez cuenta con una serie de atributos comunes que podemos usar, como la alineación, bordes, etc. Pero además, la etiqueta <img> cuenta con atributos específicos que es importante que usemos, muchas de las veces. Estos atributos son:

• src: se trata de la URL desde donde estaremos “levantando” la imagen. Puede ser un servidor propio o ajeno, pero es importante que la fuente de la imagen esté siempre activa para evitar errores. Por eso es recomendable usar un servidor propio.
• alt: este es uno de los atributos más importantes de la imagen, y ya en nuestra guía de buenas prácticas para escribir HTML mencionábamos que tenemos que agregarlo por cuestiones de validación y accesibilidad. Nunca debe ser olvidado.
• longdesc: este es uno de los atributos menos usados, pero nos permite acceder a una descripción de la fotografía en una determinada URL.
• name: se trata del nombre de la imagen, como pueden haber adivinado, y es el nombre que aparecerá cuando apoyamos el cursor sobre la imagen.

La etiqueta <img> cuenta con dos atributos más que pueden ser usados para “editar” la imagen desde el código. Estos son width y height, pero no es recomendable usarlos dado que casi siempre deforman la imagen. Si necesitamos usar una foto de un ancho de 450 píxeles, no tenemos que determinar esto desde el HTML, sino que tenemos que editar la foto usando un programa alternativo, y luego subirla. Las ediciones de imágenes se tienen que hacer de forma paralela. Además de usar píxeles, también podemos indicar estas medidas en forma de porcentaje.

En definitiva, los atributos “obligatorios” son src y alt. No pueden dejar de estar en todas las imágenes que subimos al servidor. En cuanto al formato en que tiene que estar la imagen, depende de uno, pero tengamos en cuenta que al estar trabajando con web podemos tener limitaciones de peso de subida desde nuestro propio servidor, y también tenemos que hacer que la imagen cargue rápidamente para nuestros usuarios. Por eso, es mejor usar los formatos más livianos para la web, en 72dpi (o píxeles por pulgada) y en formato PNG o JPG.

Las listas

Otra gran forma de usar HTML es a través de las listas. Se trata de agrupar una serie de textos en un conjunto ordenado o desordenado, que se podrá ver de forma diferente en el resultado final. Por este motivo, tenemosdos tipos de listas que se manejan con etiquetas diferentes: se tratan de las listas ordenadas y de las listas desordenadas. También tenemos la opción de sumar un tipo diferente, las listas de definición, pero al no ser tan usado no estaremos viéndolo en profundidad aquí.

Comenzaremos por las listas desordenadas. Este tipo de listas es el más implementado dada su sencillez. La etiqueta con la cual podemos formar listas desordenadas es un elemento de bloque, y sus dos etiquetas principales son <ul> y <li> (etiqueta que comparte con la lista ordenada). En definitiva, una lista desordenada tendrá este aspecto en el código:

<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>

Notemos que cada una de las etiquetas <li> tiene que estar cerrada. Una vez que tengamos todo dentro de este código, este será el resultado:

• Elemento 1
• Elemento 2
• Elemento 3

Pasaremos ahora a las listas ordenadas. La etiqueta contenedora cambia, dado que será <ol>, pero el mecanismo es básicamente el mismo. Esta es una porción de código para una lista ordenada:

<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>

Y el resultado será:

1. Elemento 1
2. Elemento 2
3. Elemento 3

La diferencia entre las listas ordenadas y desordenadas, además de la obviedad, es que tiene un atributo que nos permite cambiar las viñetas o números que ordenan. Para poder usar a, A, o I en lugar de 1., podemos usar el atributo start.

Las tablas

Finalmente, llegó la hora de uno de los asuntos más “complicados” del HTML. Puede que sea difícil de resolver en un primer momento, pero rápidamente nos acostumbraremos. Las tablas pueden usarse en el sentido tradicional, para organizar información, pero dentro de una página web también pueden usarse para organizar secciones como el header, el footer, el banner, etc. Básicamente nos dicen dónde deberían ir las cosas.

Usar tablas para organizar páginas web es un acercamiento muy 90’s a la cuestión. Hoy en día la práctica utilizada es crear contenedores div en CSS para poder ubicar las partes de la página de forma correcta. Pero las tablas mantienen una cierta utilidad.

Las tablas están incluidas en HTML desde sus primeras versiones para facilitar el manejo de datos. Pero pueden causar que el producto final de nuestro trabajo sea demasiado pesado y tarde demasiado tiempo en cargar en el navegador, más si lo complementamos con imágenes y otros recursos. Cuando creamos una tabla en HTML, básicamente estamos usando los mismos elementos de siempre que nos permiten crear filas y columnas, encabezados, y más.

Tenemos varios tipos de tablas. Comenzaremos con las tablas simples. En este caso, se componen de tres etiquetas, y no tienen demasiada dificultad. Más adelante hablaremos de atributos y otras cuestiones específicas. Las tres etiquetas son:

• <table>, para delimitar el comienzo y fin de una tabla
• <tr>, que delimita el comienzo de cada fila
• <td>, que determina el contenido de cada celda.

Puede ser algo confuso, pero pensemos que <tr> es table row, por lo que es la fila, y <td> es table data.

Una tabla en HTML se forma de esta manera:

<table>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

El resultado final será este:

Para seguir avanzando, podemos complejizar la tabla usando otras etiquetas y atributos específicos de las tablas. Por ejemplo, la etiqueta <th> se usa dentro de <tr> como reemplazo de <td>, y es una etiqueta de encabezado de tabla. Si la usamos, el texto que ingresemos en esta etiqueta se verá luego destacado. Las propiedades de este destaque se pueden definir a través de CSS.

Esto nos lleva a hablar de los atributos específicos de las tablas. Aunque hay muchos, mencionaremos los más imprescindibles, los que nos permitirán jugar más con las tablas y hasta con la estructura de un sitio web, si es que queremos crear uno para practicar. Estos atributos son muy importantes para la creación de tablas complejas.

• colspan: se trata del número de columnas que tiene que ocupar la celda. Si quiero tener una celda más grande, que ocupe 2 columnas mientras el resto ocupa una sola, tengo que usar este atributo seguido por la cantidad de columnas: colspan=”2”.
• rowspan: en el mismo sentido que el anterior atributo, tenemos que usar rowspan para fusionar celdas en una fila.

Estos dos atributos nos permiten crear tablas complejas y organizar la información de forma diferente. También se pueden usar otros atributos, pero no son tan comunes.

• abbr: es el atributo que describe el contenido de la celda
• headers: nos muestran las celdas que actúan como cabeceras.

Curso de HTML para principiantes, parte III

DOCTYPE

Antes de ponernos a hablar sobre el DOCTYPE, creo que es momento de recomendar un artículo de nuestro compañero Eduardo donde nos cuenta un poco más sobre las buenas prácticas a la hora de escribir HTML. Una de ellas, la primera, de hecho, es declarar el DOCTYPE correcto. Esto es fundamental, y se nos puede pasar de largo si no tenemos cuidado –aunque generalmente, herramientas como Dreamweaver y similares nos insertan el código de DOCTYPE de forma automática-.

El DOCTYPE es, básicamente, una forma de indicarle al navegador la versión de HTML que estamos usando. Es como una especie de identificador que le permite al browser saber con qué está lidiando. Para poder explicar un poco mejor el DOCTYPE, tenemos que meternos un poco en el mundo de XML. Si no lo habíamos dicho antes, ahora es un buen momento: el XHTML, la versión más usada del código hoy en día, es un derivado del lenguaje XML, y como tal toma muchas de las características de su sintaxis.

Dentro del XML, una de las cosas más importantes a tener en cuenta es el Document Type Definition, o DTD, que es un documento que nos indica las normas y prohibiciones que tiene que tener un documento en la web o en el entorno en el que estemos. Por ejemplo, si vamos a trabajar con discos, podemos hacer a través del DTD que uno de los campos obligatorios sea el nombre.

Tomando el DTD de estos documentos, el estándar XHTML nos permite usar 3 versiones diferentes, que veremos ahora. Lo que tenemos que tener en cuenta es que la etiqueta DOCTYPE se incluye fuera de la etiqueta <html>, es lo único que va por fuera, dado que es un indicativo para el navegador más que otra cosa.La inclusión de la etiqueta <doctype> antes de <html> es algo fundamental que no puede faltar en ninguna página web.

Volviendo a los tipos de DOCTYPE, en realidad dependen de la versión de HTML que estamos usando en el momento. Tenemos tres tipos: Strict, Transitional y Frameset. Por supuesto, cada una de estas varía dependiendo de la versión, por lo que recomendamos que antes de poner un DOCTYPE consultemos con W3Schools para saber si lo estamos haciendo de forma correcta. Usualmente, los documentos de Dreamweaver cuentan con un DOCTYPE transicional.

Así como siempre tenemos que cerrar todas las etiquetas que abrimos, también es importantísimo poner el DOCTYPE antes de la primera etiqueta.

Los vínculos

Uno de los aspectos más importantes del HTML son los vínculos. De hecho, son algo así como su gracia, porque uno de los propósitos principales de este lenguaje es la creación de hipertexto. Cuando se incorporó el HL (Hyper Link) al HTML, el éxito estaba garantizado. Los vínculos también pueden llamarse enlaces, y hoy en día forman una parte crucial del ecosistema de internet, además de generar toda una mentalidad diferente a la hora de leer. Pero eso lo podemos dejar para otra ocasión.

Tenemos que tener en cuenta que un enlace tiene un destino y un final. El recorrido no importa, pero cada una de estas puntas son denominadas anclas, o anchors en inglés. Hablaremos más en profundidad dentro de algunas líneas, pero primero repasaremos qué es y cómo funciona una URL. Seguro ya damos por sentado que sabemos qué es y qué hace, pero seguramente tenemos una vaga idea de cómo funciona.

Las Uniform Resource Locator son una forma de identificar cada uno de los recursos presentes en internet. Como tales, no pueden ser compartidas por diferentes recursos, son identificaciones únicas. Además de servir como identificador, para el usuario son una forma rápida de acceder a un sitio, dado que de otra forma tendríamos que ingresar una importante colección de números. Las URL se componen de diferentes  partes:

• El protocolo: se trata del mecanismo implementado por el navegador para acceder a un determinado sitio web. Los más conocidos son, por ejemplo, HTTP y HTTPS.
• El servidor: es el lugar donde se encuentra almacenado el sitio al que queremos acceder. El nombre de cada servidor permite que el navegador identifique dónde queremos ir cada vez que ingresamos un determinado nombre.
• La ruta: una vez que le indicamos al navegador el protocolo y el servidor, quizás también tengamos que agregar una ruta para identificar una parte o página específica dentro del sitio. Por ejemplo, para acceder a nuestra sección sobre redes sociales, tendrían que sumar a la URL la ruta /redes-sociales.

Estos son los tres componentes principales de una URL, aunque también hay otros, como por ejemplo:

• La consulta: esto seguramente lo han visto varias veces en búsquedas que se realizan en blogs, dentro de la URL se puede visualizar como ?=búsqueda=bitelia. Las palabras están siempre separadas por estos dos caracteres, = y & (para agregar una nueva variable).
• La sección: también dentro de cada página web podemos, a través de la URL, acceder a una determinada sección de una misma página. Dentro de la URL está simbolizado con el #, y pueden probarlo por ustedes mismos haciendo clic en “Comentarios” para que los lleve directamente al fondo de la página.

Ahora que ya tenemos bien comprendidas las URLs podemos comenzar con los vínculos. Entender que es una URL antes es importante porque son las URLs las que estarán insertadas en el vínculo, y son la forma que tenemos de darle a entender al navegador que queremos ir a otra parte.

Tipos de vínculos

En esta sección de nuestro curso ahondaremos en los diferentes tipos de vínculos que tenemos disponibles gracias a HTML. Se trata de los vínculos relativos, los vínculos absolutos y los vínculos de email. Cada uno tiene un código propio, aunque similar, y hay que tener cuidado con no confundirlos. También tienen atributos propios, que debemos usar para dejar en claro cómo queremos que se comporte el navegador ante la presencia de un link.

En una página web lo más probable es que usemos vínculos absolutos todo el tiempo, así que nos concentraremos en esta parte. Para poder crear un hipervínculo, tenemos que usar el código <a>, pero acompañado de determinados atributos. Un hipervínculo normal que nos lleva a otra página web es:

<a href=”http://www.bitelia.com/”>Esto es un hipervínculo</a>

Como podemos ver, la etiqueta <a> está acompañada del atributo que marca la dirección o URL a la cual tiene que dirigirse el enlace. Dentro del interior de la etiqueta aparecerá el texto que más tarde estará destacado en el texto como hipervínculo.

Otro de los atributos más importantes de la etiqueta <a> es el target. Básicamente, el target indicará dónde tiene que ir el navegador hoy en día. Si es una nueva pestaña, una nueva ventana, o dentro de la misma ventana. Gracias a las ventajas de las pestañas hoy en día casi todos los navegadores modernos nos permiten obviar el target dado que se abrirán automáticamente en una nueva pestaña. Pero, por las dudas, el código para hacerlo es:

<a href=”http://www.bitelia.com/” target=”_blank”>Esto es un hipervínculo</a>

Unos párrafos atrás hablábamos del enlace como “destacado” en el texto. Esto se puede lograr a través de atributos, también, pero hoy en día es algo que genera un código muy pesado y desprolijo y es completamente evitable gracias a CSS.

Para ir cerrando el tema de los vínculos, también tenemos que tener el cuenta la etiqueta para enviar correos electrónicos. Para poder modificar un enlace tenemos que agregar algo de código a lo que vimos anteriormente:

<a href=”mailto:info@bitelia.com/”>Envíanos un correo</a>

En un documento HTML, cuando hacemos clic sobre este enlace se nos abrirá una ventana con el cliente de correo que tengamos por default en la computadora. Hoy en día no es recomendable por una serie de motivos, siendo la seguridad el más importante. Existe una infinidad de bots que recorre internet buscando correos electrónicos para SPAM, y además, los usuarios muchas veces no aprecian tener que abrir su cliente de correo electrónico de forma inesperada. Una de las prácticas usadas para reemplazar el mailto es el formulario, del cual hablaremos en la próxima entrega.

Las anclas

Seguramente han notado con anterioridad que, en Wikipedia, cuando hacemos clic en uno de los enlaces del índice, ubicado a principio de página, nos lleva no a un documento HMTL, sino a un sector dentro del mismo documento. Esto se puede lograr usando anclas, y es muy útil a la hora de diseñar páginas que contienen mucho texto y que necesitan de una buena división para no “marear” demasiado al usuario. Si vamos a crear una web, la idea es que sea cómoda y navegable, por supuesto.

El código para realizar anclas es muy simple, y a través de Dreamweaver el proceso también es súper fácil. Tenemos que tomarlo como un enlace perfectamente normal, pero con la diferencia de que en lugar de tener una URL, la etiqueta <a> tendrá un ancla, un lugar dentro del texto donde dirigirse. Ahora bien, para que este lugar pueda ser identificado tendrá que recibir una determinada etiqueta. Para eso, con cada ancla que usemos que tenemos que usar además una etiqueta id. Parece algo confuso al principio, pero ampliaremos.

Este es el código desde dónde vamos a partir. Imaginemos que es una pregunta en la sección de FAQ de una página:

<a href=”#ancla1”>¿Cómo voy hasta abajo?

<p id=”ancla1”>Pues poniendo un ancla.</p>

Si desguazamos las partes de las etiquetas, notaremos que el ancla superior está precedida por un #, que como dijimos antes en las URLs marca una determinada sección de un documento. Por otra parte, lo que estamos haciendo en el segundo pedazo de código es indicarle al navegador cuál es la identificación de ese determinado párrafo. Por ende, este párrafo en particular, marcado con la etiqueta <p>, es único en todo el documento, pues tiene el id “ancla1” que no le corresponde a ningún otro párrafo. Así es como, haciendo clic en el primer enlace, terminaremos en esta parte del documento.

La etiqueta id es también súper útil a la hora de diseñar con CSS, pero eso tendremos que dejarlo para otra entrega.