'Tendencias Diseño Web 2014'

Buenas a todos, hoy os voy a comentar cómo está cambiando el mundo web. Estamos en una constante evolución, debido a los tiempos que corren debemos adaptar nuestros diseños y desarrollos a las nuevas demandas de los clientes: webs vistosas, compatibles con los smartphones, diseños claros y bonitos, tipografías elegantes y diferenciadas, rapidez en los tiempos de carga

Responsive

El diseño sensible a las diferentes resoluciones es quizás el punto más importante. Una tendencia que sin duda se afianzará aún más durante el 2014. Hay más de 1,5 billones de smartphones en el mundo y el 80% de usuarios navega por internet desde ellos.

Metro (Windows 8)

Un diseño parecido al que tiene el famoso Windows 8: información almacenada claramente y bien diferenciada por bloques. Con un contenido bien estructurado frente a contenido escondido y/o rebuscado. Geografía simple e iconos intuitivos.

Minimalistas

Colores claros con una gama concisa, textos grandes, navegación sencilla y usabilidad clara. No queremos que el usuario abandone nuestra página web porque haya exceso de contenido, necesitamos mostrar la información realmente relevante.

Fondos a pantalla completa

A la gente le gusta que haya impacto visual nada más ingresar a una página. Una imagen vale más que mil palabras, utilicemos ese dicho.

Librería Parallax de jQuery

Efecto muy conocido que consiste en trasposicionar varios fondos de manera simultánea, haciendo que todos se muevan a velocidades diferentes a medida que hacemos scroll o variamos la posición del ratón. Esto proporciona profundidad y vistosidad.

Cabeceras fijas

Hay que facilitar la navegabilidad, un sencillo truco es fijar siempre la cabecera en el top de la página para que el usuario la tenga siempre disponible y no tenga que scrollear para cambiar entre elementos.

Scroll infinito

Una técnica algo más compleja, consiste en cargar contenido a medida que se va haciendo scroll hacia abajo. De esta manera se consigue una carga inicial muy rápida, ya que sólo mostramos aquellos elementos primarios, a la vez que no recargaremos la página a medida que el usuario vaya haciendo scroll. Recurso tremendamente útil.

Página única

Es importante, como hemos dicho, mostrar una cantidad de información no demasiado extensa al usuario. Para ello dejaremos de dividir la web en muchas pestañas, mostrando el contenido en la home. Podemos ayudarnos de técnicas como: diferenciar bien las secciones (cambiar color de fondo en pares/impares, por ejemplo), usar el efecto Parallax para contenidos dinámicos…

Tipografía

La tipografía te define. Es hora de decir adiós a Arial, Times New Roman, Comic Sans. Podemos utilizar cualquier tipografía en nuestra página web. Esto le da un valor añadido al sitio, personalmente siempre he considerado que una buena tipografía es esencial a la hora de darte a conocer y decir lo que quieres decir.

Es todo, ¡espero que os sirvan y mucha suerte para el 2014!

'Sprite de iconos con múltiples imágenes'

¡Hola! Hoy voy a enseñaros un truco de css para evitar un problema bastante usual a la hora de maquetar un icono que tenga hover en páginas web.

 
Cuando realizamos una maquetación estándar de un enlace con una imagen de fondo y queremos que tenga efecto hover, lo normal sería hacer esto:
 

1
2
3
4
5
6
7
8
9
10
.mi-enlace {
	width: 20px;
	height: 20px;
	background: url(images/fondo.png);
}
.mi-enlace:hover {
	width: 20px;
	height: 20px;
	background: url(images/fondo_hover.png);
}

En teoría es correcto, pero en la práctica tiene un problema: cuando aún no hemos cargado las imágenes, al poner el puntero encima del enlace se producirá un pequeño latigazo, quedándose el enlace sin fondo durante unas décimas de segundo mientras carga el background del estado hover, produciendo un efecto visual bastante cutre.

 
Para evitar esto realizaremos lo que se conoce como sprite. Voy a poner de ejemplo las redes sociales de la cabecera de esta web:

 
Iconos Redes Sociales

 
Lo importante es crear una imagen que contenga todos los iconos que queramos utilizar, tanto el estado normal como el estado hover. Después vamos a nuestro código css, donde la clave estará en utilizar la propiedad background-position para los estados hover. Veamos el ejemplo para el css del icono de facebook:

 

1
2
3
4
5
6
7
8
9
10
11
#social-links a.facebook {
	width: 25px;
	height: 24px;
	background: url(images/social_icons.png);
	background-position: -164px 0;
	display: block;
}
#social-links a.facebook:hover {
	background: url(images/social_icons.png);
	background-position: -164px -26px;
}

 
El primer valor indica la posición horizontal y el segundo la posición vertical. Con este “truco” conseguiremos tener cargados todos los iconos de nuestro sprite y al pasar el ratón por encima no dará ningún latigazo pre-carga. Después, con algo de jQuery podremos crear animaciones para el efecto hover.

 
Espero que os haya sido de ayuda, ¡hasta la próxima!

'¡Bienvenid@s a mi Página Web!'

¡Hola a todos! Por fin ve la luz mi proyecto personal. Después de dedicarme al mundo de la programación web durante algo más de cuatro años, finalmente me he decidido a lanzar mi propia web. Si ya lo dice el refrán: En casa de herrero, cuchara de palo.

 

Le he dedicado muchas horas de desarrollo, consultando con varios amigos y colegas del sector opiniones sobre la ubicación de los módulos, colores… ¡sin esta ayuda me habría salido un churro!

 

Podréis encontrar un portfolio actualizado con mis últimos trabajos, imágenes e información acerca de ellos. Algo de información personal y profesional sobre mí, y un formulario de contacto para preguntarme lo que queráis.

 

Sin más dilación, ¡espero que os guste y… FELIZ AÑO 2013!