En estos días he empleado algo de mi tiempo libre desarrollando una aplicación para Windows 8 usando la API de Karmacracy para la cual he intentado usar al mínimo WinJS y los controles por defecto, manteniendo, además, el diseño anteriormente conocido como «Metro». El resultado hasta ahora es este, aunque está sujeto a cambios, y a mejoras:

En este artículo veremos cómo conseguir el scroll horizontal, conservando elementos como el título y el cuadro de inicio de sesión.

Primeros pasos

Lo primero que necesitamos es generar un proyecto vacío en HTML5 para Windows 8, y agregar este código dentro del campo body del fichero default.js

    <div class="content">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

Por otra parte agregamos el siguente estilo CSS para darle forma de caja:

.content ul {
    list-style-type:none;
}

.content li {
    background: #00ff90;
    width:540px;
    height:100px;
    margin:40px;
}

El resultado es el que se muestra a continuación. Como vemos, las cajas se han colocado una debajo de otra, y no hay ningun tipo de desplazamiento, ni horizontal ni vertical:

Para conseguir que se sitúen uno al lado del otro, tendremos que añadir el siguiente código a nuestro CSS, en él, definimos la propiedad columns, válida a partir de CSS3, y establecemos un ancho a la misma:

.content {
    columns:600px;
}

Finalmente, para conseguir el desplazamiento, hemos de agregar los siguientes valores al elemento body de nuestra página:

body {
    overflow-y:hidden;
    overflow-x:scroll;
    display:-ms-flexbox;
    -ms-flex-direction:row;
}

El resultado es el que vemos a continuación:

Pese a que no es aún el resultado que esperamos, nos vamos acercando. El siguiente paso es conseguir cierta consistencia, ya que en en vídeo anterior se cortaba uno de los elementos. Para ello, es tan sencillo como agregar las siguiente líneas:

* {
    margin:0;
    padding: 0;
}

.content li {
    ...
    display:inline-block;
}

Con estos pequeños cambios ya tendremos corregidos por una parte que no se corten los elementos, y por otra, que el primer elemento no tenga un margen diferente.

Agregando márgenes

Las guías de estilo recomiendan un margen de 120px a la derecha y 140px hacia arriba para el contenido, siendo este el área ocupada por el título. Además se recomienda un margen de unos 60px en la parte inferior del mismo. Con lo cual el siguiente paso es agregar los márgenes a nuestro bloque de contenidos:

.content {
    columns:600px;
    margin-top:140px;
    margin-left:120px;
    margin-bottom:60px;
}

Por otra parte modificaremos los márgenes del elemento li para que los espacios coincidan:

.content li {
    width:590px;
    margin:10px 0;
}

Con estos, y los cambios que hemos hecho anteriormente, obtenemos la siguiente pantalla.

Agregando título

El título se compone fundamentalmente de un texto metido en un bloque h1. En este caso, he usado algunos estilos y bases de Windows 8 (concretamente de lo que obtendríamos si agrgáramos una página nueva) para conseguir una mejor alineación, siendo este el código HTML necesario:

    <div id="title">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Titulo</span>
            </h1>
        </header>
    </div>

Y este el CSS:

#title {
    position:absolute;
    left:120px;
}

Las posiciones establecidas son absolutas para poder ser independientes de la acción de scroll

El último paso consiste en agregar nuestro cuadro de login, en este caso usaré un bloque vacío de color azul, con unas dimensiones fijas, pero como se ve al principio del artículo, se puede sustituir perfectamente.

    <div id="account">
    </div>

Las propiedades de este cuadro de login son las siguientes:

#account {
    position:absolute;
    top:15px;
    right: 0;
    margin:40px;
    background: #0026ff;
    width:200px;
    height:60px;
}

Como el título, tiene una posición fija, solamente que se fija a la derecha en vez de a la izquierda. Se establecen ciertos márgenes, y el resultado es el que se muestra:

Con estos pasos ya tenemos una base sobre la que empezar a mostrar nuestro contenido.

Resumen y más

En este artículo hemos visto cómo crear una app con cajas parecidas a las tiles, y con cierto scroll horizontal. Este se puede complementar con Angular JS para la interacción con Javascript en Windows 8 para comenzar a desarrollar aplicaciones nativas para Windows 8 que pueden ser luego fácilmente migrables a plataformas HTML5 como Firefox OS o Blackberry, o a través de tecnologías Phonegap o Apache Cordova para el resto de plataformas móviles.