Your SlideShare is downloading. ×
0
Instituto Tecnológico de Tehuacán                                                Ing. En Sistemas ComputacionalesProgramac...
HTML5ContenidoO   HistoriaO   DefiniciónO   Objetivo PrincipalO   Qué es ?O   Qué NO es?O   Novedades en HTML, CSS, JavaSc...
HTML5 es un lenguaje para estructurar ypresentar el contenido de la World Wide  Web , y es una tecnología central del Inte...
Mejorar el lenguaje con el soporte para las    últimas multimedia mientras continua  fácilmente legible por humanos y siem...
TimedCanvas 2D                    Web                Media   Api                      Storage               Playback MIME ...
Web SQLGeolocation                   File API                DatabaseThe IndexedDatabase API    Web GL          SVG   CSS3...
HTML5   HTML   CSS3   JS APIs
O ANTES:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional....
<TIME>O Hoy es <TIME>2011-11-16</TIME>O <TIME DATETIME=¨2011-11-18¨>Hoy</TIME> expondremos HTML5.
<SUB>O f(<var>x</var>, <var>n</var>) =  log<sub>4</sub><var>x</var><sup><var>n</  var></sup>
<PROGRESS>O <progress value ="15324602"  max="4603807">10%</progress>
<AUDIO>O <audio src= "mio.mp3" autoplay loop="3" controls  preload />O <video id="video" src="movie.webm" autoplay  contro...
SECTION EDITABLE y FIGURE<section id="editable"contenteditable="true">         <h2>Titulo[Editable]</h2>         <figure> ...
CANVAS Y JAVASCRIPT<canvas id="logotipo" width="120px" height="120px"style="border:1px solid black">Tu navegador no soport...
CANVAS Y JAVASCRIPT<canvas id="gradiente" width="200px" height="200px"style="border:1px solid black"></canvas>          <s...
FORMULARIOSO Search box <input type="search"  required autofocus  placeholder="Type here.." />O Spinbox <input type="numbe...
CSS3O text-shadow:O background:   -webkit-gradient();O border-radius:  -webkit-box-reflect(linear, left top, left bottom, ...
O -webkit-transform:rotate();O -webkit-box-shadow:O -webkit-box-orient: horizontal;
Referencias:O http://destilandobytes.blogspot.com/2011_08_01_arch    ive.htmlO   http://slides.html5rocks.com/#landing-sli...
HTML5
HTML5
HTML5
HTML5
Upcoming SlideShare
Loading in...5
×

HTML5

768

Published on

Exposicion sobre HTML5.

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
768
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5"

  1. 1. Instituto Tecnológico de Tehuacán Ing. En Sistemas ComputacionalesProgramación Web Alumnos: Gómez Huerta Irais Vivian; Osorio Castillo Rosario; Sánchez Gil Juan Isaac.
  2. 2. HTML5ContenidoO HistoriaO DefiniciónO Objetivo PrincipalO Qué es ?O Qué NO es?O Novedades en HTML, CSS, JavaScript.O Soporte Actual de HTML5O EjemplosO Breve Conclusión
  3. 3. HTML5 es un lenguaje para estructurar ypresentar el contenido de la World Wide Web , y es una tecnología central del Internet propuesto originalmente por Opera Software .
  4. 4. Mejorar el lenguaje con el soporte para las últimas multimedia mientras continua fácilmente legible por humanos y siempreentendido por los ordenadores y dispositivos ( navegadores web , programas de análisis ,etc.) HTML5 pretende subsumir no sólo HTML 4 , pero XHTML 1 y DOM2HTML (particularmente JavaScript ) también.
  5. 5. TimedCanvas 2D Web Media Api Storage Playback MIME and Protocol Document Microdata Handler EditingRegistration Cross – Browser Drag & Document History Drop Messaging
  6. 6. Web SQLGeolocation File API DatabaseThe IndexedDatabase API Web GL SVG CSS3 Web Workers Web Sockets
  7. 7. HTML5 HTML CSS3 JS APIs
  8. 8. O ANTES:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">O CON HTML5:O <!DOCTYPE HTML>
  9. 9. <TIME>O Hoy es <TIME>2011-11-16</TIME>O <TIME DATETIME=¨2011-11-18¨>Hoy</TIME> expondremos HTML5.
  10. 10. <SUB>O f(<var>x</var>, <var>n</var>) = log<sub>4</sub><var>x</var><sup><var>n</ var></sup>
  11. 11. <PROGRESS>O <progress value ="15324602" max="4603807">10%</progress>
  12. 12. <AUDIO>O <audio src= "mio.mp3" autoplay loop="3" controls preload />O <video id="video" src="movie.webm" autoplay controls></video>
  13. 13. SECTION EDITABLE y FIGURE<section id="editable"contenteditable="true"> <h2>Titulo[Editable]</h2> <figure> <img src= "figura.png"title="comiendo nubes" /> <figcaption> Figure 1.Overall scores. </figcaption> </figure></section>
  14. 14. CANVAS Y JAVASCRIPT<canvas id="logotipo" width="120px" height="120px"style="border:1px solid black">Tu navegador no soporta canvas</canvas> <script type="text/javascript"> var c=document.getElementById("logotipo"); var ctx=c.getContext("2d"); ctx.fillStyle="red"; ctx.beginPath();*…+
  15. 15. CANVAS Y JAVASCRIPT<canvas id="gradiente" width="200px" height="200px"style="border:1px solid black"></canvas> <script type="text/javascript"> var c=document.getElementById("gradiente"); var cxt=c.getContext("2d"); var grd=cxt.createLinearGradient(0,0,300,0); grd.addColorStop(0,"yellow"); grd.addColorStop(0.33,"orange"); grd.addColorStop(0.66,"red"); cxt.fillStyle=grd; cxt.fillRect(0,0,400,400); </script>
  16. 16. FORMULARIOSO Search box <input type="search" required autofocus placeholder="Type here.." />O Spinbox <input type="number" required autofocus placeholder="Type here.." />O Slider<input type="range" required autofocus placeholder="Type here.." />O Fecha: <input type="date" name="start_date« id="start_date" value="2010-12- 01" >
  17. 17. CSS3O text-shadow:O background: -webkit-gradient();O border-radius: -webkit-box-reflect(linear, left top, left bottom, from(transparent), to(rgba()));
  18. 18. O -webkit-transform:rotate();O -webkit-box-shadow:O -webkit-box-orient: horizontal;
  19. 19. Referencias:O http://destilandobytes.blogspot.com/2011_08_01_arch ive.htmlO http://slides.html5rocks.com/#landing-slideO http://www.slideshare.net/juaneladio/html-5-presente- y-futuro-de-la-webO http://disneydigitalbooks.go.com/tron/#O http://ie.microsoft.com/testdrive/O http://www.slideshare.net/txipi/introduccion-a-html5O http://www.programacion.com/articulo/crear_una_apa riencia_de_notas_adhesivas_con_css_y_html_5_489
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×