Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
HTML5
1. Instituto Tecnológico de Tehuacán
Ing. En Sistemas Computacionales
Programación Web
Alumnos:
Gómez Huerta Irais Vivian; Osorio Castillo Rosario; Sánchez Gil Juan Isaac.
2. HTML5
Contenido
O Historia
O Definición
O Objetivo Principal
O Qué es ?
O Qué NO es?
O Novedades en HTML, CSS, JavaScript.
O Soporte Actual de HTML5
O Ejemplos
O Breve Conclusión
3.
4. HTML5 es un lenguaje para estructurar y
presentar el contenido de la World Wide
Web , y es una tecnología central del
Internet propuesto originalmente por
Opera Software .
5. Mejorar el lenguaje con el soporte para las
últimas multimedia mientras continua
fácilmente legible por humanos y siempre
entendido 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.
6. Timed
Canvas 2D Web
Media
Api Storage
Playback
MIME and
Protocol Document
Microdata
Handler Editing
Registration
Cross –
Browser Drag & Document
History Drop Messaging
7. Web SQL
Geolocation File API
Database
The Indexed
Database API Web GL SVG
CSS3 Web Workers Web Sockets
10. O ANTES:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
O CON HTML5:
O <!DOCTYPE HTML>
11. <TIME>
O Hoy es <TIME>2011-11-16</TIME>
O <TIME DATETIME=¨2011-11-18¨>Hoy</TIME>
expondremos HTML5.
16. 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();*…+
17. 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>
18. FORMULARIOS
O 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" >
19. CSS3
O text-shadow:
O background:
-webkit-gradient();
O border-radius:
-webkit-box-reflect(linear, left top, left bottom,
from(transparent), to(rgba()));
23. Referencias:
O http://destilandobytes.blogspot.com/2011_08_01_arch
ive.html
O http://slides.html5rocks.com/#landing-slide
O http://www.slideshare.net/juaneladio/html-5-presente-
y-futuro-de-la-web
O http://disneydigitalbooks.go.com/tron/#
O http://ie.microsoft.com/testdrive/
O http://www.slideshare.net/txipi/introduccion-a-html5
O http://www.programacion.com/articulo/crear_una_apa
riencia_de_notas_adhesivas_con_css_y_html_5_489
