- El código fuente del programa y un ejemplo del resultado
- Nuestro artículo anterior sobre jQuery y selectores
- Un resumen de los estilos de FirefoxOS (en inglés)
<body role="application">
<section role="region" id="list-view">
<header>
<h1>Hiragana</h1>
</header>
<article id="appList" data-type="list">
<ul>
<li><a href="#"><p>Escoger el hiragana</p></a></li>
<li><a href="#"><p>Escribir en romaji</p></a></li>
<li><a href="#"><p>Escribir el hiragana</p></a></li>
</ul>
</article>
</section>
</body>
Esta estructura es importante conservarla tal cual por que al usar estilos predefinidos, estos solo se aplicarán sobre una estructura con el siguiente formato:
- El bloque <section> que divide el contenido en secciones, compuestas por un <header> y un <article>
- El bloque <header>, en donde hemos situado el título <h1>, pero donde podría haber también botones y herramientas.
- El <article> que contiene el contenido de la página/sección.
- La lista <ul> que contiene tres elementos <li> los cuales consisten en un enlace <a> (que actualmente no enlazan a nada) y dentro de los cuales se incluye un párrafo <p> con el título de la opción.
Veamos ahora la hoja de estilos (css) necesaria para dar a este contenido el aspecto adecuado:
@import url(firefoxos/responsive.css);
@import url(firefoxos/headers.css);
@import url(firefoxos/lists.css);
html, body{
margin:0;
font-family:sans-serif;
font-size:10px;
}
Como podéis ver los estilos son muy sencillos de nuevo, pero esto es por que estamos haciendo uso de otras hojas de estilo definidas por otros programadores. Por ello en la nuestra tan solo usamos:
- La instrucción "@import url(....);", que nos permite cargar otras hojas de estilo. En este caso usamos las hojas de estilo ya definidas por FirefoxOS, ahorrándonos casi todo el trabajo
- Una definición de estilos con el selector "html, body", en donde la coma simplemente indica que el estilo se aplica tanto al elemento <html> como al <body>
- Lo primero que hacemos es aplicar un margen nulo, para que no quede un espacio en blanco con el borde de la página, que es lo que sucedería por defecto.
- Por último indicamos un tamaño de fuente a toda la página de 10 píxeles, e indicamos que se use un tipo de letra "sans-serif", que son los tipos de letra que carecen de remates en los extremos y pueden ser más fáciles de leer en ciertas pantallas.
El resultado lo podemos ver a continuación. Como podréis entender, tanto la cabecera naranja, como el fondo azul que se "ilumina" al pulsar una opción son el resultado de usar las hojas de estilo de FirefoxOS con la estructura apropiada:
En conclusión
En este artículo hemos visto como aplicar los estilos por defecto de FirefoxOS. Con ello no solo nos ahorramos trabajo sino que logramos un diseño más consistente con las demás aplicaciones del teléfono. Poco a poco iremos viendo nuevos elementos del interfaz y como utilizarlos. En el próximo artículo empezaremos a desarrollar la navegación dentro de la aplicación, incluyendo la generación dinámica de contenidos de los menús.
