Html5 ejemplos

18,112 views

Published on

Presentación creada por @odinmanzano en CIBALL

1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total views
18,112
On SlideShare
0
From Embeds
0
Number of Embeds
716
Actions
Shares
0
Downloads
225
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Html5 ejemplos

  1. 1. HTML5 Utilidades, un par de ejemplos y aplicaciones on-linemaspixel.com | #html5ciball + @medinamanu + @maspixel
  2. 2. HTML5. Utilidades Modernizr HTML5 Tutorial Cheat Sheets HTML5 Doctormaspixel.com | #html5ciball + @medinamanu + @maspixel
  3. 3. HTML5. UtilidadesModernizr Librería JavaScript Detecta si CSS3 y HTML 5 están o no soportadas. Open Sourcemodernizr.commaspixel.com | #html5ciball + @medinamanu + @maspixel
  4. 4. HTML5. Utilidadesw3schools. HTML5 Tutorial Los nuevos tags de HTML5 Etiquetas que caen en desuso Ejemplos de atributos Tryit Editor (live code)w3schools.com/html5maspixel.com | #html5ciball + @medinamanu + @maspixel
  5. 5. HTML5. UtilidadesCheat Sheets Compilación de tags para uso como guía referencia rápida PDF, formato gráficowebdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheetstestking.com/techking/infographics/ultimate-html5-cheatsheatmaspixel.com | #html5ciball + @medinamanu + @maspixel
  6. 6. HTML5. UtilidadesHTML5 Doctor Glosario de tags HTML5 Ofrece snippets de cada etiqueta listos para aplicarhtml5doctor.com/glossarymaspixel.com | #html5ciball + @medinamanu + @maspixel
  7. 7. HTML5. Un par de ejemplos Geolocalización Inserción de vídeomaspixel.com | #html5ciball + @medinamanu + @maspixel
  8. 8. HTML5. Un par de ejemplosPasos en cada ejemploReplica tú mism@ estos ejemplos para comprobarcómo surten efecto:1. Crea dos documentos HTML con etiquetado básico2. Busca y pega o añade el código específico3. Cárgalos con un navegador preparado para HTML5 (comprueba si tu navegador lo está: html5test.com)maspixel.com | #html5ciball + @medinamanu + @maspixel
  9. 9. HTML5. Un par de ejemplosEtiquetado básico <!DOCTYPE html> <html lang=”es”> <head> <meta charset=utf-8 /> <title>Ejemplo HTML5</title> </head> <body> <section> [Añade el resto de código para cada ejemplo anidado en section] </section> </body> </html>maspixel.com | #html5ciball + @medinamanu + @maspixel
  10. 10. HTML5. Un par de ejemplosCódigo específico: geolocalización Tienes un ejemplo en phpguru.org/geolocation.html En cuanto cargues la página, verás cómo funciona. El código de dicha página contiene un único script Para replicarlo, basta copiarlo en tu ejemplo.maspixel.com | #html5ciball + @medinamanu + @maspixel
  11. 11. HTML5. Un par de ejemplosCódigo específico: geolocalización<body> <section> <script> /** * This function is the callback which is passed the result from the .getCurrentPosition() function [resto de código del script] alert(“Sorry, your browser doesn’t appear to support GeoLocation”); } <script> </section></body>maspixel.com | #html5ciball + @medinamanu + @maspixel
  12. 12. HTML5. Un par de ejemplosCódigo específico: vídeo La especificación indica 3 alternativas de formato para insertar un mismo vídeo: .mp4, .ogv y .webm. <video> <source src=”nombreArchivo.mp4” /> <source src=”nombreArchivo.ogv” /> <source src=”nombreArchivo.webm” /> </video> El que veas depende de qué navegador uses...maspixel.com | #html5ciball + @medinamanu + @maspixel
  13. 13. HTML5. Un par de ejemplosCódigo específico: vídeo Para ver sencillamente cómo funciona la etiqueta <video> emplearemos sólo un formato Crea o descarga un vídeo Un par de opciones: File_Big_Buck_Bunny_small.ogv (http://en.wikipedia.org/wiki/Ogg#File_format) gizmo.webm (http://www.808.dk/?code-html-5-video)maspixel.com | #html5ciball + @medinamanu + @maspixel
  14. 14. HTML5. Un par de ejemplosCódigo específico: vídeo<body> <section> <video controls=”controls” autoplay=”autoplay”> <source src=”gizmo.ogv” width=”558” height=”332” type=”video/ogg” /> </video> </section></body> ¡Ojo! Si optas por www.808.dk, el formato que descargues dependerá de qué navegador utilices... Es probable que aquí tengas que cambiar el formato de vídeo.maspixel.com | #html5ciball + @medinamanu + @maspixel
  15. 15. HTML5. Aplicaciones on-line Joli OS MugTug (SketchUp) Canvas SublimeVideomaspixel.com | #html5ciball + @medinamanu + @maspixel
  16. 16. HTML5. UtilidadesJoli OS / Jolicloud Basado en Ubuntu-Linux Interfaz de usuario en HTML5: lanzador de aplicaciones instalables y borrables con un-clic <div class=”clear”></div> social activity stream </section> </div> <footer> <div id=”links”> jolicloud.com <section> <h4>Company</h4>maspixel.com | #html5ciball + @medinamanu + @maspixel
  17. 17. HTML5. UtilidadesMugTug Software de edición de imagen Basado en el propio navegador mugtug.commaspixel.com | #html5ciball + @medinamanu + @maspixel
  18. 18. HTML5. UtilidadesMás canvas Trigonometría (animación): humblesoftware.com/demos/trig Gradiente mouse tracker: html5demos.com/canvas-gradmaspixel.com | #html5ciball + @medinamanu + @maspixel
  19. 19. HTML5. UtilidadesSublimeVideo Servicio online de inserción y reproducción vídeosublimevideo.netmaspixel.com | #html5ciball + @medinamanu + @maspixel
  20. 20. Gracias por tu atención. :) maspixel.commaspixel.com | #html5ciball + @medinamanu + @maspixel

×