El dinamismo adoptado en nuestro sitio, puede llevarse a un mayor grado de personalización y autenticidad con la adopción de rutinas de desarrollo más complejas, elaboradas especialmente para modificar el diseño de una página dinámicamente en base a factores que detonen los distintos estilos.
Podemos innovar y buscar formas únicas de mezclar nuestros CSS con funciones de JavaScript o algún lenguaje del lado servidor, para poder ofrecerle a nuestro usuario una experiencia distinta a la que ofrecen el resto de los sitios, creando ambientes más ad hoc a lo que al visitante le gusta.
Es muy poco común que se juegue con factores cruzados en CSS, muchas veces utilizamos funciones que van de JavaScript a PHP y viceversa, utilizamos JSON y XML para enviar y recibir datos, AJAX para respuestas instantáneas, pero en muy pocas ocasiones aprovechamos el dinamismo para aplicarlo a los estilos.
Podemos empezar a buscar implementar diseños basados en los resultados obtenidos por funciones de JavaScript, con ejemplos sencillos como mostrar un estilo en base a la parte del día en que nos visita el usuario.
El hecho de cambiar la apariencia de nuestro sitio web en base a la hora o período del día en que nos visitan, añade especialización en nuestros diseños, puede mejorar la experiencia del visitante y por su puesto divertir o entretener, dependiendo del tipo o sector de visitantes que tenemos comúnmente.
Existen dos maneras esenciales para realizar esta tarea, la primera y más sencilla de ellas es utilizar JavaScript, gracias a sus funciones podemos desplegar los estilos en base a la hora que tiene el usuario en su computadora, puesto que es un lenguaje del lado cliente, donde no hay necesidad de descargar ni instalar algo para desarrollar la aplicación.
La otra parte, es realizarlo mediante algún lenguaje de lado del servidor, como es el caso común de PHP, ASP.NET o JSP, que a diferencia de JavaScript nos desplegará el estilo en base a la hora del servidor donde se encuentre nuestra aplicación, es por ello que para poder utilizar esta opción tenemos que tener instalado y funcionado una infraestructura que actúe como servidor Web en una computadora.
Ambas maneras se pueden utilizar, todo depende de que enfoque queramos darle a lo que vamos a desarrollar, puesto que esencialmente hacen lo mismo y al final obtendremos un resultado bastante similar, pero también dependerá de que tan relacionados estemos con uno u otro lenguaje.
Una vez definido si vamos a cambiar estilos CSS dinámicamente desde el lado del cliente o del servidor, debemos empezar a pensar en el aspecto del diseño, lo fundamental es definir cuantos “layouts” queremos mostrar a los largo del día, dato necesario para establecer el intervalo de tiempo que durará cada estilo.
Se puede presentar la necesidad de mostrar únicamente dos estilos diferentes, uno para el día y otro para la noche, o se puede optar por tener estilos más concretos los cuales pueden irse rotando cada cierto número de horas, todo dependerá de la especificidad que queramos imprimir en la experiencia del usuario al navegar por el sitio.
Como base del ejercicio podemos desarrollar un estilo distinto para las tres etapas más relevantes del día, la mañana, tarde y la noche, los cuales cambiarán el aspecto del sitio cada ocho horas, calculo basado en las 24 horas que tiene el día, divididas entre las 3 etapas que lo conforman nos da como resultado 8 horas por cada estilo, aunque esto es en gran parte relativo y si agregamos otros estilos para etapas como el amanecer y el ocaso podemos asignar menos tiempo a estas, todo depende de perspectivas.
Fundamentándonos en el número establecido de estilos que deseamos, empezaremos a diseñar patrones y combinaciones de colores relacionados a cada etapa del día, tomando lo relevante de cada una de ellas y distinguiendo lo que observamos en el ambiente en las horas que conforman la etapa.
Debemos trabajar sobre una estructura base, la cual muestre de manera correcta los colores establecidos. Es recomendable, en un principio, desarrollar un template sencillo para ir identificando de que manera se acoplaran los colores y adaptarlos a nuestros gustos, para ello es aconsejable usar una estructura web que contenga los divs más comunes en un sitio, una cabecera, un menú, un contenedor, un div para contenido escrito, alguna barra lateral y un pie de página.
Partiendo de esto, nuestro código HTML luciría de la siguiente manera:
<html> <head> <meta charset="utf-8"> </head> <body> <div id ="principal"> <div id="contenedor"> <div id="cabecera"> <h1 id="titulo">Estilos de Prueba</h1> <div id="descripcion">CSS basado en las etapas del día.</div> </div> <div id="navegacion"> </div> <div id="contenido"> <div> <h3>Artículo de Prueba</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum augue, dictum luctus blandit vestibulum, sagittis eu tortor. Pellentesque ut enim quis est semper pretium at rhoncus leo. Integer vitae nibh sed turpis varius porta a et ipsum.</p> <p></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum augue, dictum luctus blandit vestibulum, sagittis eu tortor. Pellentesque ut enim quis est semper pretium at rhoncus leo. Integer vitae nibh sed turpis varius porta a et ipsum. Curabitur venenatis odio vitae augue dapibus mattis at id leo. Ut enim enim, tincidunt sit amet congue non, molestie sed orci. Nunc adipiscing, est nec iaculis laoreet, lectus ipsum tincidunt elit, mattis facilisis urna quam vitae elit. Nullam eu elit a purus gravida mattis. Vivamus pharetra eleifend nunc nec malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Pellentesque consequat, lacus pretium dapibus eleifend, nulla ante vulputate augue, id elementum nunc odio ut ante. Morbi purus dolor, lobortis ut eleifend ut, fringilla vel quam. Proin quis arcu eu est tristique adipiscing. Mauris ligula mi, egestas sed commodo eget, vulputate quis justo. Curabitur dictum porta risus in facilisis. Vivamus quis malesuada ipsum. Sed varius faucibus tincidunt. Quisque luctus erat a dolor molestie consequat. </p> </div> </div> <div> <ul> <li>Lorem ipsum</li> <li>Dolor sit amet</li> <li>Consectetur adipiscing</li> <li>Lorem ipsum</li> <li>Dolor sit amet</li> <li>Consectetur adipiscing</li> <li>Lorem ipsum</li> <li>Dolor sit amet</li> <li>Consectetur adipiscing</li> <li>Lorem ipsum</li> <li>Dolor sit amet</li> <li>Consectetur adipiscing</li> </ul> </div> <div> <ul> <li>Lorem ipsum</li> <li>Dolor sit amet</li> <li>Consectetur adipiscing</li> <li>Lorem ipsum</li> <li>Dolor sit amet</li> <li>Consectetur adipiscing</li> <li>Lorem ipsum</li> <li>Dolor sit amet</li> <li>Consectetur adipiscing</li> <li>Lorem ipsum</li> <li>Dolor sit amet</li> <li>Consectetur adipiscing</li> </ul> </div> <div style="display: block;" id="pie"> </div> </div> </div> </body> </html>
El entorno se ira creando agregando los colores que escogimos a dicha estructura, en el ejemplo que estamos desarrollando para este artículo, se escogieron colores amarillo claro para la mañana, naranja-marrón para la tarde y negro-gris para la noche.
Continúa…
modificado el 17 junio, 2018 11:32