Diseño Web: Area Mobildec

Queremos enumerar los aspectos técnicos que nos parecen interesante del diseño web de Área Mobildec. No queremos ponernos a describir todo el tedioso proceso, pero si dejar los detalles más inusuales.

Herramientas y tecnologías utilizadas

Tips & Tricks

Problema con la cantidad de entradas cargadas en movil y desktop

Por resolución y tiempo de carga, en un móvil no queríamos cargar más de 4 entradas mientras que en otros dispositivos queríamos cargar 8. Fue un problema esa distinción ya que el query de WP es PHP y no se puede cambiar el valor de una variable con JS (Cuando se carga JS PHP ya ha ejecutado el query, y no hay manera de re-cargarlo), así que llegamos a una solución con la que no estoy del todo contento: Detectar el dispositivo con los encabezados HTTP.

¿Porqué no estoy contento con esa solución? Porque me gusta depender de la resolución, no del dispositivo, me gusta la fluidez basada en la amplitud de las pantallas.

Así que implementamos el script bastardo: mobileDetect. Al principio quise quedar como un profesional y decir “Eh, es una solución de la nueva tendencia RESSResponsive Web Design with Server-Side Components -” pero no nos engañemos: me gustaría más depender de la resolución, asi que le dije al cliente que efectivamente, era una chapuza. No entendió nada y le pareció correcto – Clara, nuestra cliente y amiga, nos tiene una paciencia increíble -.

Menú

Como podéis apreciar, el menu en móvil está bastante centrado en pantalla: eso fue intencional y nos mola saber que el usuario tiene todas las opciones para moverse por la web nada más entrar. Claro, no tiene mucho mérito cuando el menú es de 3 elementos, pero aún así nos gusta pensar que nuestra idea e implementación es especial.

Los menús de las redes sociales están arriba del todo en móvil, pero en resoluciones ya acercándose a tablets, bajan al centro y reposicionamos casi todos los elementos. Es un cambio que rompe un poco la consistencia del diseño pero consideramos necesario en favor del equilibrio visual en resoluciones grandes.

Footer

Todo el footer se dedica al contacto con la empresa, incluído un formulario para escribirles con validación en CSS.

Entradas

El tamaño de las imágenes es manejado en el admin de WordPress para ajustarse al las miniaturas. El precio antiguo es escrito por medio de data-attributes para no meter código innecesario en el HTML.

Primero tuvimos que crear metaboxes para agregar los precios de los artículos:


	$prefix = 'cool_';

$meta_box = array(
    'id' => 'my-meta-box',
    'title' => 'Datos',
    'page' => 'post',
    'context' => 'normal',
    'priority' => 'high',
    'fields' => array(
        
		array(
			'name' => 'Precio acutal (oferta)',
			'desc' => 'Precio Actual',
			'id' => $prefix . 'actualprice',
			'type' => 'text',
			'std' => 'Url'
    	),

		array(
			'name' => 'Precio anterior',
			'desc' => 'Precio anterior',
			'id' => $prefix . 'oldprice',
			'type' => 'text',
			'std' => 'precioant'
    	)
    )
);

Hay un tutorial muy completo en Deluxe Blog Tips de donde aprendimos a hacer todo este montón de código y a implementarlo.

El caso es que para obtener esos valores solo hay que volcarlos en una variable:


$actualprice = get_post_meta($post->ID, "cool_actualprice", true);
$oldprice = get_post_meta($post->ID, "cool_oldprice", true);

Y luego simplemente imprimir un valor en el data-attribute y otro como contenido del span:


<span data-precio="<?php echo $oldprice; ?>" class="precios"><?php echo $actualprice; ?></span>

Los estilos con CSS son muy explícitos:


.precios{
	position: absolute;
	z-index: 100;
	background-color: @secondarycolor;
	padding: 1em .3em 0 .3em;
	text-shadow:1px 1px 1px @darkgrey;
	color: @white;
	.border-radius(4px, 4px, 0, 0);
	.box-shadow(1px 1px 1px rgba(0,0,0,.7));
	margin-top: .3em;
	
	&::before {
		content: attr(data-precio);
		position: absolute;
		z-index: 1000;
		top:0;
		.font-size(12);
		text-shadow:none;
		text-decoration: line-through;
		color: @lightergrey;

	} 
}


El mismo método es utilizado para la tienda donde se encuentra el producto, en el footer del artículo: Catellón o Almassora.

Actualmente estamos esperando por Area para introducir contenido real y hacer una revisión final, actualmente hay cosas que fallan como las imágenes en grande y detalles relativos al contenido, pero espero que esto os de una idea de como trabajamos y lo más importante: que al menos algo hayáis aprendido o tengáis alguna idea para robarnos!

Daniel Martínez

Opiniones y preguntas:

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *