SlideShare une entreprise Scribd logo
1  sur  20
Télécharger pour lire hors ligne
HTML5
                   Utilidades,
                   un par de ejemplos
                   y aplicaciones on-line


maspixel.com | #html5ciball + @medinamanu + @maspixel
HTML5. Utilidades



                       Modernizr
                       HTML5 Tutorial
                       Cheat Sheets
                       HTML5 Doctor




maspixel.com | #html5ciball + @medinamanu + @maspixel
HTML5. Utilidades


Modernizr

   Librería JavaScript
   Detecta si CSS3 y HTML 5
   están o no soportadas.
   Open Source

modernizr.com


maspixel.com | #html5ciball + @medinamanu + @maspixel
HTML5. Utilidades


w3schools. HTML5 Tutorial

   Los nuevos tags de HTML5
   Etiquetas que caen en desuso
   Ejemplos de atributos
   Tryit Editor (live code)

w3schools.com/html5


maspixel.com | #html5ciball + @medinamanu + @maspixel
HTML5. Utilidades


Cheat Sheets

   Compilación de tags para
   uso como guía referencia rápida
   PDF, formato gráfico
webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets
testking.com/techking/infographics/ultimate-html5-cheatsheat




maspixel.com | #html5ciball + @medinamanu + @maspixel
HTML5. Utilidades


HTML5 Doctor

   Glosario de tags HTML5
   Ofrece snippets de cada
   etiqueta listos para aplicar


html5doctor.com/glossary


maspixel.com | #html5ciball + @medinamanu + @maspixel
HTML5. Un par de ejemplos



                       Geolocalización
                       Inserción de vídeo




maspixel.com | #html5ciball + @medinamanu + @maspixel
HTML5. Un par de ejemplos


Pasos en cada ejemplo

Replica tú mism@ estos ejemplos para comprobar
cómo surten efecto:
1. Crea dos documentos HTML con etiquetado básico
2. Busca y pega o añade el código específico
3. Cárgalos con un navegador preparado para HTML5
   (comprueba si tu navegador lo está: html5test.com)


maspixel.com | #html5ciball + @medinamanu + @maspixel
HTML5. Un par de ejemplos


Etiquetado 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
HTML5. Un par de ejemplos


Có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
HTML5. Un par de ejemplos


Có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
HTML5. Un par de ejemplos


Có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
HTML5. Un par de ejemplos


Có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
HTML5. Un par de ejemplos


Có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
HTML5. Aplicaciones on-line



                       Joli OS
                       MugTug (SketchUp)
                       Canvas
                       SublimeVideo




maspixel.com | #html5ciball + @medinamanu + @maspixel
HTML5. Utilidades


Joli 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
HTML5. Utilidades


MugTug

   Software de edición de imagen
   Basado en el propio navegador


    mugtug.com



maspixel.com | #html5ciball + @medinamanu + @maspixel
HTML5. Utilidades


Más canvas

   Trigonometría (animación):
   humblesoftware.com/demos/trig

   Gradiente mouse tracker:
   html5demos.com/canvas-grad



maspixel.com | #html5ciball + @medinamanu + @maspixel
HTML5. Utilidades


SublimeVideo

   Servicio online de inserción
   y reproducción vídeo


sublimevideo.net



maspixel.com | #html5ciball + @medinamanu + @maspixel
Gracias
                   por tu atención.                     :)
                   maspixel.com



maspixel.com | #html5ciball + @medinamanu + @maspixel

Contenu connexe

En vedette

Participa en Andalucía - Iznájar (Córdoba)
Participa en Andalucía - Iznájar (Córdoba)Participa en Andalucía - Iznájar (Córdoba)
Participa en Andalucía - Iznájar (Córdoba)Antonio García Barroso
 
Revista mentores junio 2011
Revista mentores junio 2011Revista mentores junio 2011
Revista mentores junio 2011uzcateguidf
 
S1 Terminologia Basicasobre Blogs
S1 Terminologia Basicasobre BlogsS1 Terminologia Basicasobre Blogs
S1 Terminologia Basicasobre BlogsIUTE.BAILADORES
 
Diseño Web Rápido, Seguro, Barato Desde $160
Diseño Web  Rápido, Seguro, Barato Desde $160Diseño Web  Rápido, Seguro, Barato Desde $160
Diseño Web Rápido, Seguro, Barato Desde $160Daniel Quinde
 
Reunión de socios PMI Madrid Spain Chapter 30-septiembre-2014
Reunión de socios PMI Madrid Spain Chapter 30-septiembre-2014Reunión de socios PMI Madrid Spain Chapter 30-septiembre-2014
Reunión de socios PMI Madrid Spain Chapter 30-septiembre-2014Jesús Vázquez González
 
Epson work force-m100-genisformat.com
Epson work force-m100-genisformat.comEpson work force-m100-genisformat.com
Epson work force-m100-genisformat.comuzburo
 
Introduction to Hacking for University Hack Day
Introduction to Hacking for University Hack DayIntroduction to Hacking for University Hack Day
Introduction to Hacking for University Hack DayChristian Heilmann
 
Presentacion de informatica diapositivas felz navidad
Presentacion de informatica diapositivas felz navidadPresentacion de informatica diapositivas felz navidad
Presentacion de informatica diapositivas felz navidadfernandopdt
 
Res 1480 modificatoria res 587 regimen académico
Res 1480 modificatoria res 587 regimen académicoRes 1480 modificatoria res 587 regimen académico
Res 1480 modificatoria res 587 regimen académicopuntodocente
 
Presentation Cendoo tech ger
Presentation Cendoo tech gerPresentation Cendoo tech ger
Presentation Cendoo tech gerCENDOO AG
 

En vedette (17)

2015 Digital Grapevine Chamber Directory
2015 Digital Grapevine Chamber Directory2015 Digital Grapevine Chamber Directory
2015 Digital Grapevine Chamber Directory
 
Presentacion
PresentacionPresentacion
Presentacion
 
Participa en Andalucía - Iznájar (Córdoba)
Participa en Andalucía - Iznájar (Córdoba)Participa en Andalucía - Iznájar (Córdoba)
Participa en Andalucía - Iznájar (Córdoba)
 
Revista mentores junio 2011
Revista mentores junio 2011Revista mentores junio 2011
Revista mentores junio 2011
 
Ch1
Ch1Ch1
Ch1
 
S1 Terminologia Basicasobre Blogs
S1 Terminologia Basicasobre BlogsS1 Terminologia Basicasobre Blogs
S1 Terminologia Basicasobre Blogs
 
Diseño Web Rápido, Seguro, Barato Desde $160
Diseño Web  Rápido, Seguro, Barato Desde $160Diseño Web  Rápido, Seguro, Barato Desde $160
Diseño Web Rápido, Seguro, Barato Desde $160
 
Reunión de socios PMI Madrid Spain Chapter 30-septiembre-2014
Reunión de socios PMI Madrid Spain Chapter 30-septiembre-2014Reunión de socios PMI Madrid Spain Chapter 30-septiembre-2014
Reunión de socios PMI Madrid Spain Chapter 30-septiembre-2014
 
Epson work force-m100-genisformat.com
Epson work force-m100-genisformat.comEpson work force-m100-genisformat.com
Epson work force-m100-genisformat.com
 
Introduction to Hacking for University Hack Day
Introduction to Hacking for University Hack DayIntroduction to Hacking for University Hack Day
Introduction to Hacking for University Hack Day
 
Presentacion de informatica diapositivas felz navidad
Presentacion de informatica diapositivas felz navidadPresentacion de informatica diapositivas felz navidad
Presentacion de informatica diapositivas felz navidad
 
Kircher hermetico
Kircher hermeticoKircher hermetico
Kircher hermetico
 
Informe final
Informe finalInforme final
Informe final
 
El libro en la Alta Edad Media
El libro en la Alta Edad MediaEl libro en la Alta Edad Media
El libro en la Alta Edad Media
 
HUELE A DIOS
HUELE A DIOSHUELE A DIOS
HUELE A DIOS
 
Res 1480 modificatoria res 587 regimen académico
Res 1480 modificatoria res 587 regimen académicoRes 1480 modificatoria res 587 regimen académico
Res 1480 modificatoria res 587 regimen académico
 
Presentation Cendoo tech ger
Presentation Cendoo tech gerPresentation Cendoo tech ger
Presentation Cendoo tech ger
 

Html5 ejemplos

  • 1. HTML5 Utilidades, un par de ejemplos y aplicaciones on-line maspixel.com | #html5ciball + @medinamanu + @maspixel
  • 2. HTML5. Utilidades Modernizr HTML5 Tutorial Cheat Sheets HTML5 Doctor maspixel.com | #html5ciball + @medinamanu + @maspixel
  • 3. HTML5. Utilidades Modernizr Librería JavaScript Detecta si CSS3 y HTML 5 están o no soportadas. Open Source modernizr.com maspixel.com | #html5ciball + @medinamanu + @maspixel
  • 4. HTML5. Utilidades w3schools. HTML5 Tutorial Los nuevos tags de HTML5 Etiquetas que caen en desuso Ejemplos de atributos Tryit Editor (live code) w3schools.com/html5 maspixel.com | #html5ciball + @medinamanu + @maspixel
  • 5. HTML5. Utilidades Cheat Sheets Compilación de tags para uso como guía referencia rápida PDF, formato gráfico webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets testking.com/techking/infographics/ultimate-html5-cheatsheat maspixel.com | #html5ciball + @medinamanu + @maspixel
  • 6. HTML5. Utilidades HTML5 Doctor Glosario de tags HTML5 Ofrece snippets de cada etiqueta listos para aplicar html5doctor.com/glossary maspixel.com | #html5ciball + @medinamanu + @maspixel
  • 7. HTML5. Un par de ejemplos Geolocalización Inserción de vídeo maspixel.com | #html5ciball + @medinamanu + @maspixel
  • 8. HTML5. Un par de ejemplos Pasos en cada ejemplo Replica tú mism@ estos ejemplos para comprobar cómo surten efecto: 1. Crea dos documentos HTML con etiquetado básico 2. Busca y pega o añade el código específico 3. Cárgalos con un navegador preparado para HTML5 (comprueba si tu navegador lo está: html5test.com) maspixel.com | #html5ciball + @medinamanu + @maspixel
  • 9. HTML5. Un par de ejemplos Etiquetado 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. HTML5. Un par de ejemplos Có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. HTML5. Un par de ejemplos Có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. HTML5. Un par de ejemplos Có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. HTML5. Un par de ejemplos Có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. HTML5. Un par de ejemplos Có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. HTML5. Aplicaciones on-line Joli OS MugTug (SketchUp) Canvas SublimeVideo maspixel.com | #html5ciball + @medinamanu + @maspixel
  • 16. HTML5. Utilidades Joli 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. HTML5. Utilidades MugTug Software de edición de imagen Basado en el propio navegador mugtug.com maspixel.com | #html5ciball + @medinamanu + @maspixel
  • 18. HTML5. Utilidades Más canvas Trigonometría (animación): humblesoftware.com/demos/trig Gradiente mouse tracker: html5demos.com/canvas-grad maspixel.com | #html5ciball + @medinamanu + @maspixel
  • 19. HTML5. Utilidades SublimeVideo Servicio online de inserción y reproducción vídeo sublimevideo.net maspixel.com | #html5ciball + @medinamanu + @maspixel
  • 20. Gracias por tu atención. :) maspixel.com maspixel.com | #html5ciball + @medinamanu + @maspixel