Estilos en WAT

Estándar

Los estilos son una parte importante a la hora de crear nuestra aplicación en base a un sitio web. Para ello WAT permite configurarlo desde el mismo archivo config.json

screenshot_06092014_042546

Por defecto encontraremos lo siguiente:

"styles":
{
    "setViewport": true,
    "targetWidth": "",
    "targetHeight": "800px",
    "suppressTouchAction": false,
    "extendedSplashScreenBackground": "#464646",
    "hiddenElements":[
	    "header", ".bs-header"
    ],
    "backButton": {
	    "borderColor": "#FFFFFF",
	    "color": "#FFFFFF"
    },
    "wrapperCssFile": "/css/wrapper-styles.css",
    "customCssFile": "/css/injected-styles.css",
    "customCssString": "body {padding:0;font-size: 14pt;}"
},

A continuación se detallará cada uno de las opciones:

setViewport

Es la primera opción que encontraremos, permite confirmar si personalizaremos la vista que se quiere presentar(true) o usaremos la actual en base a lo que nos muestra el sitio web (false). Por defecto viene habilitado, por lo cual todos los cambios que realizaremos dentro de ‘styles’ impactarán.

Por ejemplo, podríamos haber cambiado el tamaño de la fuente de 14px a 140px, manteniendo:

    "setViewport": true,

screenshot_06092014_042546

y ahora el mismo caso, pero con

    "setViewport": false,

screenshot_06092014_044013

targetWidth – targetHeight

Nos permitirán especificar  el ancho (widht) y alto (height) de la vista. Para sitios webs adaptables (responsive) es recomendable no especificarle ningún valor (es decir que el tamaño de la vista será el mismo que el sitio)

Por ejemplo en este caso se ha aplicado un

    "targetWidth": "5000px",
    "targetHeight": "5000px",

screenshot_06092014_043058

Pero… Como nuestro sitio es adaptable no hace falta especificarle ningún valor

    "setViewport": true,
    "targetWidth": "",
    "targetHeight": "",

screenshot_06092014_044811
suppressTouchAction

Esta opción nos permitirá suprimir las acciones táctiles. Es recomendable dejar por defecto esta opción para sitios en el cuales se requiera de una barra de navegación.

    "suppressTouchAction": false,

screenshot_06092014_041259

extendedSplash Screen Background

Con esta opción podremos especificar el color de fondo para nuestro SplashScreen extendido (el que posee la animación de carga). Por ejemplo en este caso:

    "extendedSplashScreenBackground": "#FF0000",

screenshot_06092014_044955

hiddenElements

Con esta opción podremos ocultar aquellos elementos que no necesitemos del sitio web. En un próximo post se desarrollará este tema.

backButton

En esta parte podremos tener un conjunto de reglas para el botón de retroceso. Por ejemplo podemos cambiarle el color de la flecha (color) o la circunferencia (borderColor)

"backButton": {
"borderColor": "#0000FF",
"color": "#FF0000"
},

screenshot_06092014_045856

wrapperCssFile

Especifica la dirección en donde se encontrarán los estilos propios de la aplicación (estilos del appbar, del botón de retroceso, etc). No es necesario modificarlo.

 "wrapperCssFile": "/css/wrapper-styles.css",

Si navegamos en el archivo css nos encontraremos con los siguiente:

Screenshot (1163)
customCssFile

Nos permitirá especificar la ruta de un archivo en el cual podremos inyectar los estilos en el control webView, anulando el css de la página.

    "customCssFile": "/css/injected-styles.css",

Por ejemplo: Podemos hacer que en la aplicación se vea que cada post se encuentre con fondo de color rojo, para ello inyectaré el siguiente código en el injected-styles.css:

#primary {
background-color:#ff0000;
}

screenshot_06092014_052204

customCssString

Por último también es posible especificar los estilos directamente desde el mismo archivo de config.json por medio del customCssString. Retomando el ejemplo del inicio cambiaré el tamaño de la fuente a 140 puntos.

    "customCssString": "body {padding:0;font-size: 140pt;}"

Eso es todo!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s