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
CSS, Diseño para móviles, Diseño Web, HTML5, iPhone, jQuery, jQuery Mobile, Taller Web, Tutoriales.
Tutorial de jQuery Mobile II. Transición de páginas

Tutorial de jQuery Mobile II. Transición de páginas

Ya hemos visto en Web App con jQuery Mobile. Tutorial I, cómo maquetar una página en HTML, y cómo hacer los enlaces para pasar de una página a otra, pues bien, ahora vamos a ver unos “efectos especiales” para hacer la Web Appmás atractiva.

jQuery Mobile incluye un conjunto de seis efectos de transición entre páginas, basados en CSS y que pueden aplicarse a cualquier vínculo de la página o formulario. Estos efectos los podréis ver en vuestro ordenador si navegáis con Chrome, espero y deseo que en un futuro cercano, podamos utilizar estos efectos también en diseño web tradicional.

También hay que resaltar, que alguna de las transiciones no se ve correctamente con algunas versiones antiguas de Android. En cualquier caso, es obvio que tanto los navegadores de Smartphone como los tradicionales, tendrán que acabar “tragándose” esta tecnología tarde o temprano.

CONTINUAR LEYENDO “Web App con jQuery Mobile. Transiciones de página. Tutorial II” »

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