por Omar Benyakhlef | Diseño para móviles, Diseño Web, HTML5, iPhone, jQuery, jQuery Mobile, Mobile
La última tendencia de diseño web es el Responsive Design o «Diseño Adaptativo». Con la ayuda del HTML5 y CSS3, ahora podemos adaptar los diseños de páginas web en función del tamaño de pantalla del usuario. La característica fundamenteal de este tipo de diseño web, es que se adapta perfectamente a cualquier resolución, basta con ir cambiando el tamaño de la ventana del navegador, para ver cómo se van recolocando los módulos que forman la web.
Gracias a esta técnica no tenemos que hacer distintas web o utilizar distintas CSS para hacer un diseño para web, smartphone o tableta. El mismo diseño se verá correctamente en cualquiera de los distintos dispositivos y lo más importante, se reducirán los costes de creación y mantenimiento.
La idea de implementar esta técnica viene de lejos, del año 2008, recomendado por W3C en «Mobile Web Best Practices» bajo el subtítulo «One Web«.
Hoy en día la disparidad tan grande que hay en tamaños de pantalla (sobremesas, portátiles, smartphones, tablets…), ha provocado que finalmente los diseñadores web nos planteemos esta práctica como indispensable en todos nuestros diseños. (más…)
por Omar Benyakhlef | CSS, HTML5
Recursos HTML5 GRATIS
HTML5 ha representado una tremenda evolución en el diseño web.
En este post podréis encontrar varias direcciones en las que poder encontrar documentación y ejemplos de diseños web realizados con HTML5.
(más…)
por Omar Benyakhlef | HTML5, jQuery
Preload jQuery
Un ejemplo muy vistoso, de cómo hacer un preload con jQuery y HTML5. Además de poder descargarlo, podréis ver una explicación de su funcionamiento en http://www.megaptery.com/
por Omar Benyakhlef | accesibilidad, CSS, Diseño Web, HTML5, jQuery, Usabilidad
Evolución web desde 1990 a 2012
Desde hace unos años, el diseño web ha sufrido una tremenda transformación, gracias a las nuevas tecnologías y a la obligatoria necesidad de los distintos navegadores de adaptarse a ellas.
La web hoy en día es un Universo cada vez mayor de páginas web y aplicaciones web relacionadas entre sí, lleno de vídeos, fotos y contenido interactivo.
Pero detrás de todo esto, existe una interacción de tecnologías y navegadores que intentan día a día hacerse más compatibles y dar al usuario una mejor experiencia.
En los últimos años, la tecnología web ha evolucionado tremendamente, esto, permite a los diseñadores web, la posibilidad de dar rienda suelta a la imaginación, sin tantas limitaciones como hasta ahora había. Las páginas web actuales, son el resultado de los esfuerzos de una comunidad web de código abierto que ayuda a definir estas tecnologías web, como HTML5, CSS3 y WebGL y asegurarse de que están apoyados en todos los navegadores web.
En http://evolutionofweb.appspot.com/, podréis ver toda la evolución que ha sufrido la web desde 1990 hasta 2012. Las bandas de color en esta visualización representan la interacción entre las tecnologías de la web y los navegadores. Como veréis es una lucha es interminable por poder dar al usuario una compatibilidad con las nuevas tecnologías que van surgiendo.
por Omar Benyakhlef | HTML5
Etiqueta CANVAS. HTML5
El elemento Canvas de HTML5 es una etiqueta HTML similar a <div>, <a> o <table>, con la excepción de que su contenido se escribe o dibuja con JavaScript.
La etiqueta canvas va asociada a una función JavaScript, y con ella se pueden hacer todo tipo de líneas, dibujos, colores, gradientes, sombras, esquinas redondeadas, …
La forma de utilizar la etiqueta <canvas>, es la siguiente:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// do stuff here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200">
</canvas>
</body>
</html>
En este tutorial, podréis encontrar todo tipo de código para cada una de las múltiples posibilidades que nos ofrece esta etiqueta. Espero que os sirva.
por Omar Benyakhlef | CSS, Diseño Web, HTML5, Trucos CSS
Notificaciones tipo iPhone con HTML5
El diseño web está muy ligado al resto de diseños tecnológicos, sobre todo al diseño realizado para smartphones. Hoy os dejo algo que seguro que os gusta. Se trata de la notificación que aparece en el iPhone (por ejemplo), cuando tenemos mensajes pendientes de leer.
Realizado en CSS3 y HTML5, aquí os dejo una demo y el código listo para descargar. Espero que os sea útil.
