Post Actualizado en julio 25, 2013
¿Cómo cambiar el estilo de nuestro sitio dinámicamente? Parte III
Empezar a jugar con factores externos a nuestro servidor o al ordenador del cliente, nos hará capaces de forjar en nuestros usuarios experiencias más únicas y particulares que las reproducidas con los ejemplos desarrollados en los dos artículos anteriores de esta serie. La capacidad de cambiar la apariencia de nuestro sitio en base a la […]
Empezar a jugar con factores externos a nuestro servidor o al ordenador del cliente, nos hará capaces de forjar en nuestros usuarios experiencias más únicas y particulares que las reproducidas con los ejemplos desarrollados en los dos artículos anteriores de esta serie.
La capacidad de cambiar la apariencia de nuestro sitio en base a la hora del día resultó en una herramienta de dinamismo bastante satisfactoria, gracias a ello ahora podemos crear espacios y ambientes que van acorde a lo que el usuario observa en su ambiente natural en el mismo momento que navega por nuestro sitio, pero por qué no ir más allá y agregar a ese espacio lo necesario para adaptarlo al clima que prevalece en ese ambiente.
Para esta tercera parte de nuestra serie, nuestro objetivo es crear una estructura y su diseño relacionado, basándonos en las condiciones meteorológicas de cualquier región o ciudad del mundo que deseemos, todo de manera relativamente sencilla y con auxiliares totalmente gratuitos.
El principal eslabón para empezar a armar esta cadena de datos es hacer uso de herramientas externas como Web services o Web feeds que nos suministrarán con la información necesaria para crear nuestro árbol de condiciones que se encargaran de cambiar el estilo de nuestro sitio.
Con un poco de CSS y otro de PHP empezaremos a edificar nuestro sistema dinámico meteorológico, comenzando por crear una serie de estilos distintos que se relacionen con las condiciones climáticas más comunes. El día soleado, nublado, con lluvia y con nieve serán nuestros puntos de partida para crear patrones, los cuales podemos detallar más en un futuro para recrear otra clase de climas más específicos.
Tomaremos como base los ejemplos anteriores y crearemos una estructura bastante sencilla para nuestro sitio.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id ="principal">
<div id="contenedor">
</div>
</div>
</body>
</html>
Como se puede observar nada más contaremos con dos capas, la principal y la contenedora, esta última albergará una imagen relacionada con el clima actual, que será lo que variará de un clima a otro, junto con el color del fondo general de la página.
En base a esta estructura empezaremos a darle forma a las diferentes hojas de estilo requeridas, las cuales quedarán conformadas en torno a una base común como la siguiente:
body {
margin: 0;
padding: 0;
height: 100%;
background: #FF8C00;
font-size: 14px;
background: -moz-radial-gradient(center 45deg, circle closest-corner, #FFCC66 0%, #FF8C00 100%);
background: -webkit-gradient(radial, center center, 0, center center, 770, from(#FFCC66), to(#FF8C00));
}
#contenedor {
position: absolute;
left: 50%;
top: 50%;
width: 480px;
height: 500px;
margin-left: -240px;
margin-top: -250px;
padding: 0px;
background: url(‘http://icons.iconarchive.com/icons/dan-wiersma/solar-system/512/Sun-icon.png’) no-repeat center center;
color: #FF8C00;
font: 1.0em/150% ‘arial’, sans-serif;
}
Se puede observar que únicamente nos enfocaremos a darle estilo al cuerpo de la página y a la capa “contenedor”, la cual tendrá como fondo una imagen externa relacionada con cada clima, mientras que en el cuerpo usaremos gradientes con degradado de colores para dar un mejor efecto visual a nuestro fondo.
En este caso la hoja de estilo fue hecha para el clima de “soleado” y mostrará un Sol sobre un degradado de colores amarillo a naranja para recrear el ambiente de dichos días.
Estos dos factores son los que variaremos en cada una de las hojas de estilo que creemos para el resto de los climas.
Nublado:
body {
margin: 0;
padding: 0;
height: 100%;
background: #FF8C00;
font-size: 14px;
background: -moz-radial-gradient(center 45deg, circle closest-corner, #B0C4DE 0%, #708090 100%);
background: -webkit-gradient(radial, center center, 0, center center, 770, from(#313C46), to(#252E36));
}
#contenedor {
position: absolute;
left: 50%;
top: 50%;
width: 480px;
height: 500px;
margin-left: -240px;
margin-top: -250px;
padding: 0px;
background: url(‘http://docs.torquepowered.com/tgb/official/content/documentation/Behavior%20Tutorials/images/Rainy%20Day/cloud.png’) no-repeat center center;
color: #FF8C00;
font: 1.0em/150% ‘arial’, sans-serif;
}
Lluvia:
body {
margin: 0;
padding: 0;
height: 100%;
background: #FF8C00;
font-size: 14px;
background: -moz-radial-gradient(center 45deg, circle closest-corner, #333333 0%, #000000 100%);
background: -webkit-gradient(radial, center center, 0, center center, 770, from(#333333), to(#000000));
}
#contenedor {
position: absolute;
left: 50%;
top: 50%;
width: 480px;
height: 500px;
margin-left: -240px;
margin-top: -250px;
padding: 0px;
background: url(‘http://3.bp.blogspot.com/_qI8qUTNa9Co/TD9WqtS7HKI/AAAAAAAAA0o/Bt4N0oq-1zg/s400/cloud-rain.png’) no-repeat center center;
color: #FF8C00;
font: 1.0em/150% ‘arial’, sans-serif;
}
Nieve:
body {
margin: 0;
padding: 0;
height: 100%;
background: #FF8C00;
font-size: 14px;
background: -moz-radial-gradient(center 45deg, circle closest-corner, #FFFAFA 0%, #5F9EA0 100%);
background: -webkit-gradient(radial, center center, 0, center center, 770, from(#FFFAFA), to(#5F9EA0));
}
#contenedor {
position: absolute;
left: 50%;
top: 50%;
width: 480px;
height: 500px;
margin-left: -240px;
margin-top: -250px;
padding: 0px;
background: url(‘http://www.veryicon.com/icon/png/Holiday/Xmas/White%20snow.png’) no-repeat center center;
color: #FF8C00;
font: 1.0em/150% ‘arial’, sans-serif;
}
Una vez concluido el diseño, empezaremos a construir la maquinaria para echar a andar nuestro sistema, lo primero que debemos obtener son los datos del clima de la ciudad que elegimos para nuestro sitio, sin esta información todo el sistema sería inútil es por ello que es importante obtenerla de manera correcta.
Para nuestro ejemplo utilizaremos un Web feed de tipo RSS proporcionado por la página Yahoo! Weather, que nos permite obtener a través de su API las condiciones climáticas de la ciudad.
Dicha API utiliza una URL estructurada para obtener los datos relacionados, y se encuentra en el siguiente formato:
http://weather.yahooapis.com/forecastrss?p=MXSR0091&u=c
Como podemos observar la dirección principal del API es http://weather.yahooapis.com/forecastrss, si escribimos esta dirección en nuestro navegador y deseamos ingresar obtendremos un error como respuesta, ya que esta API necesita que le proporcionemos dos parámetros necesarios para su correcto funcionamiento.
Después del signo de interrogación (?) de la URL, se muestran los parámetros que debemos proporcionar, el primero de ellos lleva por nombre “p” y hace referencia al código relacionado con la ciudad de la cual queremos obtener el clima, en este caso MXSR0091 es la clave asignada a la ciudad de Hermosillo, México, si deseamos que el sitio se base en otra ciudad debemos buscar el código de nuestra ciudad en la página de Yahoo! Weather, buscando la ciudad y dando clic en el icono de RSS. Por su parte, el segundo parámetro con nombre “u” sirve para especificar en que medida queremos los grados, si asignamos el valor de “c” nos dará los grados en Celsius mientras que el valor “f” nos regresará grados Fahrenheit.
Una vez que hemos identificado nuestra ciudad y los datos se han recibido de manera correcta, debemos implementar esa información mediante código PHP,
<?php
/* Creamos la función "obtener_clima" para obtener el xml con la información necesaria */
function obtener_clima($url)
{
/* Inicializamos el manipulador de información cURL */
$infoCurl = curl_init();
/* Establecemos las opciones de la sesión cURL */
curl_setopt($infoCurl,CURLOPT_URL,$url);//Indicamos la dirección URL a capturar
curl_setopt($infoCurl,CURLOPT_RETURNTRANSFER,1); //Devuelve el resultado de la transferencia como string en lugar de mostrarlo directamente.
curl_setopt($infoCurl,CURLOPT_CONNECTTIMEOUT,5); //Número de segundos a esperar para conectarse, 5 segundos
$xmldata = curl_exec($infoCurl);//Se ejecuta la sesión cURL y se guarda la información obtenida en la variable xml
curl_close($infoCurl);//Se cierra la sesión
return $xmldata;
}
/* Obtenemos la información de Yahoo llamando a la función "obtener_clima" creada en el bloque anterior*/
$data = obtener_clima("http://weather.yahooapis.com/forecastrss?p=MXSR0091&u=c");
/* MXSR0091 = Hermosillo, Sonora, C = Celsius */
/* Después de obtener la información completa, debemos darle formato para quedarnos únicamente con los datos necesarios */
preg_match(‘/<yweather:condition text="(.*)"/isU’,$data, $tipo_clima);//guarda el nombre del clima en la variable "tipo_clima"
$tipo_clima = strtolower(str_replace(array(‘ ‘, ‘(‘, ‘)’), array(‘-‘, ‘-‘, ”), $tipo_clima[1]));//removemos caracteres indeseados y hacemos todas minúsculas
?>
Al final obtendremos una cadena guardada en la variable $tipo_clima, dicho valor se encontrará en inglés puesto que el Feed consultado se encuentra en dicho idioma, los valores que obtendremos serán sunny, fair, partly-cloudy, cloudy, mostly-cloudy, snow y rain, por lo que para implementarlos al nombre del CSS podemos crear las siguientes condiciones.
<?php
switch($tipo_clima){
case ‘sunny’:
case ‘fair’:
$tipo_clima = ‘soleado’;
break;
case ‘partly-cloudy’:
case ‘cloudy’:
case ‘mostly-cloudy’:
$tipo_clima = ‘nublado’;
break;
case ‘rain’:
$tipo_clima = ‘lluvia’;
break;
case ‘snow’:
$tipo_clima = ‘nieve’;
break;
default:
$tipo_clima = ‘soleado’;
break;
}
?>
Una vez cambiado el idioma procedemos a implementar dicha variable en el nombre de nuestro CSS. Si seguimos la estructura “clima_nombre”, entonces nombramos a nuestros estilos “clima_soleado”, “clima_nublado”, “clima_lluvia” y “clima_nieve”, para que al momento de llamarlos en nuestro código únicamente hagamos lo siguiente:
<link rel="stylesheet" type="text/css" href="clima_<?php echo $tipo_clima ;?>" />
Ahora nuestro CSS será implementado de manera dinámica en base al clima obtenido a través de Yahoo! Weather, logrando manipular la información de uno de los factores más importantes del ambiente, el clima.
Podemos combinar las tres opciones de dinamismo que hemos visto a lo largo de esta serie para hacer una experiencia aún más específica, podemos variar nuestro CSS en base al día o la noche, e incluso podemos ser más minuciosos y agregar estilos para otros tipos de clima, todo variará de acuerdo a nuestro ingenio e imaginación
Escrito por:
ISC Daniel Ernesto Navarro Herrera
OK HOSTING TEAM