Html5 7
Imágenes de fondo con Background-cover de CSS3
Antes de CSS3 teníamos que recurrir a plugins como backstretch para poner una imagen de fondo en una página web, ahora podemos ocupar la propiedad background-cover, si queremos ponerla en toda la página podemos utilizar el siguiente código:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Ahora claro que no estamos obligados a poner la imagen en todo el sitio, podemos aplicarla a un div o una sección, cambiando la parte de html por el id o clase de la etiqueta(s) respectiva(s).
La gran ventaja de esta solución es que la imagen se adapta al ancho de la pantalla y por lo tanto no afectará a la responsividad de nuestro sitio.
Dibujando con curvas bezier en HTML5
Es posible dibujar curvas Bezier directamente en la página web con instrucciones utilizando el canvas de HTML5 y el método beziercurveTo.
¿para que sirven las curvas de bezier?
Las curvas de bezier sirven para hacer curvas bonitas, de hecho son un método matemático para describir curvas y que ha sido implementado en los sistemas CAD, Photoshop y quien sabe cuanta herramientas más, y,, como pronto se viene el evento de RailsGirls 2.0 hice este post Temático.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById('mycanvas');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = "rgba(200,0,0,0.5)";
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();
ctx.font = "bold 16px Arial";
ctx.fillText("Rails Girls 2.0", 100, 100);
} else {
alert('Necesitas un navegador moderno para poder ocupar el canvas de Html5 .');
}
}
</script>
</head>
<body onload="drawShape();">
<canvas id="mycanvas"></canvas>
</body>
</html>
¿y no sería lo mismo ocupar una imagen hecha en photoshop?
Claro, de hecho sería mucho más fácil, pero aquí viene el siguiente desafío, ya que el canvas de html5 se puede limpiar cada cierto tiempo como en este experimento, podrías ocupar las curvas de bezier para hacer una animación interesante.
¿Cuánto sabes de programación web?
Hace unas 3 semanas, conversando con alumnos del taller de @en1mes salió la idea de hacer un pequeño juego de trivia, preguntas de html, css y otros temas relacionados para saber quién era el que más sabía de programación web. La primera versión que publiqué del proyecto era bastante fea, pero de todas formas obtuvo la suficiente tracción para que valiera el esfuerzo de lanzar una versión con una interfaz mejorada, que incluyera categoría de preguntas, tiempo límite, y con la posibilidad de guardar los mejores puntajes. y finalmente ya tenemos un juego interesante para mostrar y queremos desafiarte a participar.
¿Cuanto sabes de programación web?
Nota aparte.
Me han preguntado harto sobre que herramientas utilicé para crear el juego. El backend está desarrollado en ruby on rails, el front-end es HTML5 con un poco de CSS3, principalmente para las transiciones de colores de las cajas con las preguntas. El proyecto incluye un poco de ajax, hecho en Jquery para que toda la lógica de la sección de preguntas corra en la misma página. PD: Si alguien quiere ayudar con las preguntas o abrir una nueva sección de preguntas respectivo al tema de programación web bienvenido sea.
HTML5 dejó a flash obsoleto
Te has preguntado, porque los programdores dicen que Flash a muerto?, es porque hoy HTML5 incluye muchas funcionalidades de las que tenía flash de forma nativa, esto quiere decir que no necesitas ningún programa extra que se coma la batería de tu computador.
HTML5 incluye:
Soporte nativo para video, y audio
A través de las marcas <video> y <audio> podemos agregar videos y música (o sonidos) de forma nativa (o sea sin necesidad de otros programas, librería, etc) dentro de los navegadores.
Los formatos de video aceptados son MP4, WebM y OGG, revisa las compatibilidades
Los de audio son MP3, WAV y OGG, revisa las compatibilidades
Extensiones para javascript
Html5 soporta extensiones para javascript que permiten hacer diversas cosas, como por ejemplo geolocalizar al usuario de una página web (aquí un ejemplo)
Otras cosas interesantes que permite son:
- drag-and-drop
- almacenamiento
- caching
Capacidad para incluir gráficos
La marca <canvas> que permite incluir gráficos y no sólo de los que sirven para ver y manipular estadísticas, me refiero a hacer juegos directamente en HTML, aquí les dejo un ejemplo que escribí hace un tiempo de como utilizarlo
Marcas semánticas de HTML5
como por ejemplo:
- <main>
- <nav>
- <article>
- <section>
- <header>
- <footer>
- <aside>
Nuevos controles para los formularios con HTML5
como por ejemplo:
- <calendar>
- <date>
- <time>
- <email>
- <url>
- <search>
En resumen:
HTML5 incorpora de forma nativa gran parte de la funcionalidad del muy famoso pero ya obsoleto FLASH.
Geolocalización con HTML5
¿Sabías que tu navegador puede entregar información detallada desde dónde estas viendo UNA página web?
Geolocalizar a una persona con HTML5 es bastante sencillo, basta simplemente con utilizar javascript y la función navigator.geolocation.getCurrentPosition() Ver Más