Horizontal scroll with HTML5 for Windows Store apps

These days I have spent some of spare time developing an application for Windows 8 using the Karmacracy API. For this, I have tried to minimize the WinJS usage and default controls, while maintaining the design previously known as «Metro». The result so far is this, although it may be subject to changes and improvements:

karmacracy-stage-6

In this article we will see how to get the horizontal scroll, keeping elements such as the title and the login box.

Continuar leyendo «Horizontal scroll with HTML5 for Windows Store apps»

Conseguir scroll horizontal con Javascript para aplicaciones Windows Store

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:

karmacracy-stage-6

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.

Continuar leyendo «Conseguir scroll horizontal con Javascript para aplicaciones Windows Store»

El framework 960gs para diseño web

Reconozco que soy un diseñador y/o maquetador bastante del montón (de la parte baja del montón), en comparación con los artistas que se ven actualmente en internet, así que recurro de manera bastante habitual a frameworks que me facilitan bastante la existencia.

960gs es un framework CSS que  fija el ancho de la web que estás desarrollando a 960px, (el ancho estándar para una web vista correctamente en un monitor de 1024x 768), y la tarea que realiza es bastante simple, establece dicho ancho, y divide la web en 12, 16 o 24 paneles que podemos emplear a nuestra voluntad.

Un ejemplo de uso sería el siguiente, tras agregar en el head de nuestra web la referencia al css, agregamos esta estructura, que nos divide la web en dos secciones, un grid de anchura 4 y otro de anchura 8. cada «unidad» en este caso tiene 60 px con un margen de 10px a cada lado, lo que nos permite jugar un poco con la estructura de nuestro sitio.

<div class="container_12">
    <div class="grid_4"></div>
    <div class="grid_8"></div>
</div>

Personalmente me parece extremadamente útil para poder maquetar la web y mantener cierta coherencia en el diseño, además, el resultado final es muy agradable para la vista.

Como detalle adicional, cuando nos descargamos el paquete tenemos además plantillas y plugins para photoshop/illustrator, además de un par de plantillas para hacer bocetos sobre papel directamente, que nos permitirán hacer nuestro sitio pensando en los 960px directamente en la fase de diseño y que nos sea más sencillo luego implementarlo.

Espero que os resulte interesante.

Más información: 960.gs