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.

Share and Enjoy

Comparte este Blog de Diseño Web
CSS, Diseño Web, HTML5, Trucos CSS.
Notificaciones tipo iPhone con HTML5

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.

Share and Enjoy

Comparte este Blog de Diseño Web
Ajax, Diseño de páginas web, Diseño Web, HTML5, jQuery.
Scroll Parallax

Scroll Parallax

En este blog de diseño web, hemos visto como a lo largo de los años las tendencias del diseño web siguen sorprendiéndonos y alcanzando niveles que hace años eran difíciles de imaginar.

En esta última década hemos sido partícipes como diseñadores, de una constante evolución. Desde las web más básicas, que simplemente parecían un documento word metido en una pantalla, pasando por aquellas horrorosas webs, en las que todo parpadeaba y en las que era necesario llenar la web de botones con el mensaje “pulse aquí”, para posteriormente pasar a una época en lo que todo parecía que iba a ser flash y acto seguido abandonar la idea al darnos cuenta de que lo que verdaderamente era importante, era el SEO y la USABILIDAD.

En todo este tiempo, hemos vivido muchas mejoras en las conexiones de los usuarios, lo cual se ha visto obviamente reflejado en los diseños. Esto nos permitió empezar a utilizar grandes imágenes y backgrounds, a no estar tan pendientes del peso de la página. Nuevos dispositivos desde los que visualizar las webs, como los smartphones, iPhones, iPads,… Y en los últimos años, la implantación de una tecnología que ha dado un vuelco al diseño web y que como diseñadores nos ha permitido abrir la imaginación para poder realizar diseños con los que nunca antes nos habríamos atrevido, todo gracias a la implantación del jQuery.

CONTINUAR LEYENDO “Tendencias Diseño Web para 2012. SCROLL PARALLAX” »

Share and Enjoy

Comparte este Blog de Diseño Web
accesibilidad, Ajax, Cool Web Design, CSS, Diseño de páginas web, Diseño Web, HTML5, jQuery, Usabilidad.
24 Ejemplos de HTML5 & jQuery & CSS3… Alucinante !!!

24 Ejemplos de HTML5 & jQuery & CSS3… Alucinante !!!

El diseño webestá en constante evolución.

La aparición hace unos años del jQuery y CSS3, unido a las mejoras introducidas (aunque todavía ridículas) en las velocidades de conexión, han supuesto un cambio radical en la concepción de diseños web.

Ahora con la implantación cada vez mayor de las webs hechas con HTML5, llegamos a un periodo en el que “todo es posible“.

Con un poco de imaginación y atractivos diseños, vamos a ver una total revolución en el diseño web, sobre todo en la usabilidad.

A continuación os dejo con 24 ejmplos de páginas web realizadas en HTML5, jQuery y CSS3,  que me han sorprendido mucho, estamos entrando en una nueva fase de diseño y usabilidad, en la que ya no hace falta pulsar sobre un botón para realizar una acción, en la que podremos interactuar mucho más con la web y dejar de ser meros espectadores.

CONTINUAR LEYENDO “24 Ejemplos de HTML5 & jQuery & CSS3… Alucinante !!!” »

Share and Enjoy

Comparte este Blog de Diseño Web
Diseño de páginas web, Diseño Web, HTML5, Usabilidad.
Scroll infinito con History API HTML5

Scroll infinito con History API HTML5

La constante evolución del diseño web, hace que cada vez tengamos más posibilidades de hacer más usables nuestras páginas web.

En esta ocasión Warpspire.com nos deja un claro ejemplo de cómo el HTML5 va a ser una revolución en el diseño web .

Todos aquellos que hayáis navegado por Twitter, habréis visto que no existe paginación. La página se va cargando de nuevo cada vez que llegamos al final del scroll. Esto permite no sobre cargar la página, ya que el contenido se va cargando paulatinamente y sobre todo hace mucho más fácil y rápida la navegación.

Lo mismo sucede si analizamos Facebook, donde podemos ver que también se renuncia a la paginación, utilizando también el scroll sin fin.

Esta API de HTML5 es verdaderamente útil y mejora aún más la navegación de Twitter y Facebook.

CONTINUAR LEYENDO “Scroll infinito contra paginación. HTML5 History API” »

Share and Enjoy

Comparte este Blog de Diseño Web