Diseñando aplicaciones I: Interfaces con HTML

Un interfaz es la parte de una aplicación que el usuario "ve", y con la que se comunica. En las aplicaciones de FirefoxOS (como en las aplicaciones web) este interfaz está definido mediante HTML, usándose generalmente un archivo HTML para cada pantalla de la aplicación.

Pero HTML fue originalmente un lenguaje para escribir documentos en la web, y creo necesario señalar las diferencias que implica el usarlo para desarrollar aplicaciones. Este artículo por tanto se ajustará a un nivel básico de conocimientos, así que disculpad si algunas de las cosas que comento ya las conocéis.

Si habéis aprendido HTML para hacer páginas web seguro que conoceréis muchas etiquetas (<p>, <ol>, <strong>, <em>, <h1>,...). La buena noticia para los que no las conozcan es que para programar aplicaciones casi nos basta con usar una sola: el bloque <div>. Mientras que las otras etiquetas tienen un aspecto y comportamiento predefinido, esta otra está pensada para adoptar cualquiera que necesitemos:

Como se muestra en la imagen anterior, todo interfaz lo podemos dividir en un conjunto de bloques identificables, los cuales adoptarán su aspecto y comportamiento final usando respectivamente CSS y javascript. Respecto al aspecto podemos usar distintas letras, márgenes, fondos, colores, bordes,... Respecto al comportamiento podemos cambiar el texto de un bloque, hacer que realice cálculos al pulsarlo, que muestre el progreso mediante una barra que se alarga o acorta,...

Pero para poder hacer todo eso necesitamos una manera de identificar dichos bloques y es aquí donde entran los atributos más importantes de HTML: "id" y "class". El primero identifica un bloque de manera única, mientras que el segundo admite una lista de palabras que puede compartir con otros bloques:

<div id="boton_continuar" class="boton destacado">
</div>

En el ejemplo anterior el bloque podría ser identificado por ser un bloque <div>, por su identificador "boton_actual" o por sus clases "boton" o "destacado". Por ejemplo, en CSS:

div{
   margin:1em;
}

.boton{
   border-radius:3em;
}

#boton_continuar{
   background:green;
}

Este código haría que el bloque anterior tuviese un margen por ser un div, tuviese las esquinas redondeadas por tener la clase "boton", y el fondo verde por ser el "boton_continuar". Fijaos que mientras la etiqueta se pone tal cual, la clase se identifica poniendo un punto delante, y el identificador usando una almuhadilla (#).

Javascript no tiene una manera equivalente de identificar los bloques, pero se han creado librerías que permiten hacerlo. En concreto nosotros usaremos una llamada jQuery:

$('.boton').click(
   // Aquí iria una función que se ejecuta al pulsar
   // cualquier bloque con la clase "boton"
)

// La siguiente instrucción pone el texto "Continuar"
// En el botón identificado como "boton_continuar"
$('#boton_continuar').text('Continuar')

Como podéis observar jQuery utiliza una el símbolo del dolar ($), seguido de unos paréntesis entre los que se introduce el selector al que le queremos aplicar el efecto, ya sea asociarle un evento o modificarlo de manera dinámica. Hay formas más complejas de definir selectores, como seleccionar solo los bloques que estén dentro de otros dados, o solo los bloques pares o impares,... Lo importante por ahora es saber que podemos usar estos selectores tanto para definir el aspecto de los bloques con CSS, como para definir su comportamiento con jQuery.

Otras etiquetas HTML

Aunque con los bloques <div> tenemos casi toda la funcionalidad que necesitamos, quería mencionar algunas de las otras etiquetas que se suelen utilizar en aplicaciones HTML y la razón para usarlas:

• Los bloques <span>: Son genéricos como los <div> pero pensados para ser usados dentro de párrafos de texto, aunque en realidad pueden 
• Las imágenes <img>: Siguen siendo necesarias para mostrar imágenes dentro de la aplicación.
• Las listas <ul>, <li>: Se suelen utilizar para definir menús o listados de elementos
• Los enlaces <a>: Aunque se podrían programar con javascript, siguen siendo una manera rápida de enlazar con otros contenidos.
• Los elementos de formulario <input> y <textarea>: Interesantes sobre todo a la hora de meter campos de edición de texto.