Como todos los años, un clásico. Vamos a hablar de las tendencias que más vamos a ver en cuanto a diseño web en este 2010. Son una serie de predicciones sobre algunos elementos que se van a poner de moda entre diseñadores y webmasters y que se van a ver mucho en el desarrollo y diseño de webs.
Ante todo decir que con la llegada de CSS3 y HTML5 , se abre un nuevo mundo de posibilidades en cuanto al diseño y desarrollo de sitios web.
Otra cosa de la que ya hablaremos en un próximo artículo, es la compatibilidad de estos nuevos lenguajes con los distintos navegadores web.
Siguiendo hablando de las tendencias en diseño web para el próximo 2010, en el blog de webdesignerwall, nos encontramos este interesante artículo donde nos comentan que sobre todo, vamos a ver muchas esquinas redondeadas, y juegos con transparencias y sombras. Todo ello como os comentaba anteriormente, lo va a traer de la mano CSS3.
En cuanto a tipografía, dejaremos de ver tanto las fuentes Verdana y Arial, que son las más utilizadas en diseño web.
Cabeceras más grandes, que van a llenar mucho espacio. Con lo que el scroll necesariamente se va a usar.
Este es un listado de sitios de donde uno puede descargar fuentes en formato Truetype o TTF en forma gratuita. Espero que les sea útil.
Listado con visualizador de ejemplos
Listado simple de tipografias
Para quienes no esten familiarizados con esto, jQuery es librería de JavaScript que nos ayuda a mejorar varios aspectos del html. Con ella es muy facil desarrollar interactividades con Ajax, animaciones, efectos, etc. Para ello solo es necesario utilizar esta librería que pesa solo 56k.
Otra de las ventajas que posee, y es acá donde comienza la explicación de este tema es que podemos encontrar una gran cantidad de plugins que funcionan con jQuery que ya tienen resuelta gran parte de la programación adicional que deberiamos hacer para lograr el efecto deseado.
A continuación veremos los pasos lograr un intercambio de imágenes con fade según podemos ver en este ejemplo.
Primero necesitamos descargar las librerias jQuery y el plugin jQuery.innerfade. y colocamos estos archivos en la carpeta del sitio web. Luego con el siguiente código las incluimos:
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.innerfade.js" type="text/javascript"><</script>
<!--
<style type="text/css" media="screen, projection">
@import url(css/jq_fade.css);
</style>
-->
Ahora necesitamos crear el efecto que necesitamos para lo cual debemos tener en cuenta unos pocos parámetros.
$('ACA VA EL ID O CLASE A LA CUAL APLICAMSO El Efecto').innerfade({
animationtype: Tipo de Animación 'fade' or 'slide' (Default: 'fade'),
speed: Velocidad del Fade(milisegundos o nombre) (slow, normal or fast)(Default: 'normal'),
timeout: Time en milisengundos entre los Fades (Default: '2000'),
type: Tipo de fade: 'sequence', 'random' or 'random_start' (Default: 'sequence'),
containerheight: Altura del elemento contenedor (Default: 'auto')
runningclass: Estilo CSS para el contenedor (Default: 'innerfade')
});
Siguiendo estos parámetros, este es el código del efecto creado
<script type="text/javascript">
$(document).ready(
function(){
$('ul#annita').innerfade({
speed: 1000,
timeout: 5000,
type: 'sequence',
});
});
</script>
Y luego en el de nuestro HTML debemos tener una lista con viñetas del tipo
ul y en cada li tendremos los objetos a cambiar. Este es el código:
<ul id="annita">
<li> <a href="http://www.annaglanz.com.ar/"><img src="adornos4.jpg" alt="Annita, la mas bonita" width="250" height="375" /></a></li>
<li> <a href="http://www.annaglanz.com.ar/"><img src="adornos6.jpg" alt="Annita, la mas bonita" width="250" height="375" /></a></li>
<li> <a href="http://www.annaglanz.com.ar/"><img src="adornos9.jpg" alt="Annita, la mas bonita" width="250" height="375" /></a></li>
<li> <a href="http://www.annaglanz.com.ar/"><img src="adornos13.jpg" alt="Annita, la mas bonita" width="250" height="375" /></a></li>
<li> <a href="http://www.annaglanz.com.ar/"><img src="adornos14.jpg" alt="Annita, la mas bonita" width="250" height="375" /></a></li>
</ul>
Esto es todo. Recuerden que deben subir todos los archivos al servidor y antes tener descargadas las librerias.
