Si tu acceso a la información sobre html5, no la más adecuada, esta infografia, ayudará a desarrollar los diseños en esta tecnología. La muestra esta en ingles pero no es tan complicado darse cuenta sobre lo que esta tratando de explicar.
El orden de la información esta de acuerdo a lo que necesites usar. Espero que sea útil para sus desarrollos.
Fuente: CraftymanBlog
Muchas de las cosas que sé, es por experiencia. Por ahora me dedico al desarrollo de sistemas Web, tengo conocimientos de PHP y base de datos. Lo bueno, de mi es que aprendo nuevas cosas, las busco y las vivo.
Como bien sabemos (y empezaremos por aqui) NO todos los navegadoras soportan esta propiedad de HTML5, y siendo reales la mayoria de nosotros diseñamos sitios AUN para IE6 (egh!), entonces visto desde ese plano esta tecnología aun esta lejos para muchos sitios ya que solo IE9 lo soporta (y eso que aun esta BETA), bueno! esto no nos impide a aprender estas nuevas etiquetas no?
Su uso es bastante sencillo:
<video src="miVideo.ogv"></video>
A diferencia del método tradicional que usamos con FLASH es sencillo no?, claro que para que quede bien necesitamos un par que cosas como:
<video src=mivideo.ogv width=640 height=480 controls poster=imagendevideo.jpg> <a href=myvideo.ogv>Descargar este Video.</a> </video>
Con este código mostramos una imagen para los navegadores que no soportan html5, como ven se usa una extensión .OGV, es una de las pocas extensiones que nos sirven para usar este atributo, a continuación les muestro las extensiones que son soportadas por los navegadores:
Entonces, hasta ahí no esta tan complicado no?, lastimosamente no todos usan estos navegadores modernos, pero bueno, esto es temporal. Para conseguir estas extensiones existen varios softwares de conversión de video para obtener estos resultados, aqui les dejo uno: http://www.mirovideoconverter.com
Al final para usarlo tendremos este código para todos los navegadores que soportan html5:
<video width=640 height=480 controls poster=miImage.jpg id=videocontent> <source src=mivideo.ogv type=video/ogg> <source src=mivideo.mp4 type=video/mp4> <source src=mivideo.webm type=video/webm> <a href=mivideo.mp4>Descarga este Video.</a> </video>
También podemos jugar un poco con las condicionales de php para recuperar el navegador y la versión del mismo para optar por html5 o Flash.
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
HTML5 A technical specification for Web developers, es un sitio web donde muestran todo lo relacionado sobre esta evolución del HTML, el único inconveniente es que esta en Ingles pero el sitio web es muy intuitivo así que no deberíamos tener problemas para ver el uso especifico del HTML5
<!DOCTYPE HTML> <HTML> <HEAD> <META CHARSET="UTF-8"> <BASE HREF="http://www.example.com/"> <TITLE>An application with a long head</TITLE> <LINK REL="STYLESHEET" HREF="default.css"> <LINK REL="STYLESHEET ALTERNATE" HREF="big.css" TITLE="Big Text"> <SCRIPT SRC="support.js"></SCRIPT> <META NAME="APPLICATION-NAME" CONTENT="Long headed application"> </HEAD> <BODY> ...
Altamente recomendado.
Link | WHATWG HTML5
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
En este POST mostraré nuevamente la increíble funcionalidad de HTML5. Esta tecnología ya esta en nuestras puertas y solo necesitamos algo de ingenio para lograr diseños espectaculares.
Les entregare el link de un blog donde nos muestran algunos ejemplos de experimentos. Ahora, solo les mostraré el primero de la lista. Hay otros pero dejo a ustedes su interés por probarlos.
El Primer experimento se llama Untangle, y es un juego donde debes llevar los grafos de manera que los arcos no se crucen y en el menor tiempo posible. Es un juego de ingenio. Les muestro uno de mis tiempos. es por lejos fácil de igualar.
Si visitan este blog verán una serie de experimentos sobre HTML5. Recuerden que lo que se tiene son experimentos. Y coincido con el blog que afirman que para el desarrollo de juegos, todavía Flash es la mejor solución.
Via: www.queness.com/…/9-incredible-html5-canvas-and-javascript-experiments
Hasta pronto.
Muchas de las cosas que sé, es por experiencia. Por ahora me dedico al desarrollo de sistemas Web, tengo conocimientos de PHP y base de datos. Lo bueno, de mi es que aprendo nuevas cosas, las busco y las vivo.
Buenos días, no estoy muy seguro de este post, si tiene alguna utilidad o algo así, sin embargo, lo dejo a su consideración.
Si, como dice el titulo Son juegos realizados en HTML5, con la ayuda de su casi inseparable dúo. Canvas y JavaScript.
Bueno solo les mostraré el que jugue. Y se trata de
Agent 008 Ball es un juego que luce fenomenal. Es un juego de billas, donde el objetivo es meter la mayor cantidad de bolas en las butacas, antes de que acabe el tiempo.
Lo Jugue, y si no fuera por el tiempo, lo seguiria jugando.
Entre lo destacable de este juego es sus gráficas, muy limpias. Con un buen nivel de detalle.
Su jugabilidad es intuitiva. No te costará mucho dominarlo.
Según la fuente donde saque este post afirma: “Cuando se lanzó Internet Explorer 9, Microsoft quisó crear una serie de juegos que mostrarán el nivel de expieriencia que su nuevo navegador puede proporcionar. Uno de ellos es este videojuego.” Interesante, el Internet Explores 9, habrá que ver más de este navegador.
Bueno eso es todo, si les interesa les doy la fuente de este artículo, donde nos muestra otros juegos también interesantes.
Fuente: baluart.net
Muchas de las cosas que sé, es por experiencia. Por ahora me dedico al desarrollo de sistemas Web, tengo conocimientos de PHP y base de datos. Lo bueno, de mi es que aprendo nuevas cosas, las busco y las vivo.
Encontré esta página en la que inscriben sitios hechos en HTML5 y CSS3 así como otras nuevas tecnologías, nos sirve para ver ejemplos muy bueno e interesantes sobre el uso de HTML5 y CSS3, y también los podemos usar como Inspiración para nuevos proyectos, el sitio del que les hablo es 101 Best Html5 Sites en la que podemos ver sitios como estos:
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
Slick CSS3 Animated Image Caption, fue un experimento más de CSS3 y un poco de HTML5 usando la propiedad transition de CSS3. Su uso es sencillo en este ejemplo solo se necesita poner la imagen y el título dentro de un DIV:
El Html :
<div class="wrap">
<img src="Tu imagen" alt="imagen" />
<article class="text"><!-- HTML5-->
<h2><a href="#">Texto para la Animación</a></h2>
</article><!-- texto -->
</div><!-- Contenedor -->
y aquí la magia del CSS3:
.wrap{
height:200px;width:400px;
background:#000;
overflow:hidden;
position:relative;
}
.text{
background:rgba(0,0,0,0.5);
top:-70px;
color:white;
font:14px Georgia,serif;
height:auto;width:inherit;
position:absolute;
/* Magia de la trancisión con CSS3 */
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.text a{
color:#fff;
display:block;
padding:15px;
text-decoration:none;
/* CSS3 Transition Magic */
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .5s ease-out;
transition: all .4s ease-out;
}
.text a:hover{
color:red;
text-decoration:none;
}
.container:hover .text{
top:0;
}
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
52Framework, es básicamente una Web Base hecha con puro HTML5 y CSS3, en la cual usa todas las nuevas herramientas que trae consigo estas nuevas tecnologías, entonces teniendo en cuenta que no son aceptadas por todos los navegadores al 100%, hay que hacer malabares si quieres usarlo en nuevos proyectos, y el número 52 viene de 52px que viene del sistema de gridas que usa este framework (16 columnas, 52 pixel con 8 pixeles de separación)
Entre sus características estan las siguientes:
<!DOCTYPE html> y <html lang="en">Demo y Descarga | 52Framework
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
BonBon Bottons, es simplemente un archivo .CSS basado en CSS3 que añade efectos visuales a los links que tengan la clase de “button” y sus variantes.
<a href="" class="button">Label</a>
Link y Demo | BonBon Sweet CSS3 Buttons
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
Y eso que aun no se lo usa a 100% el HTML5 ya podemos ver ejemplos increíbles hechos bajo el mismo lenguaje, como este juego de Helicoptero, ya antes se vio el juego de PACMAN incluso lo vimos en el logo de google.
Link | HTML5 Helicopter
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...