HTML5

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.

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

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 .

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.

Timed
Canvas 2D Web
Media
Api Storage
Playback

MIME and
Protocol Document
Microdata
Handler Editing
Registration

Cross –
Browser Drag & Document
History Drop Messaging

Web SQL
Geolocation File API
Database

The Indexed
Database API Web GL SVG

CSS3 Web Workers Web Sockets

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>

<TIME>
O Hoy es <TIME>2011-11-16</TIME>
O <TIME DATETIME=¨2011-11-18¨>Hoy</TIME>
expondremos HTML5.

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>

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();*…+

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>

FORMULARIOS
O Search box <input type="search"
required autofocus
placeholder="Type here.." />
O Spinbox <input type="number"
required autofocus
O Slider<input type="range"
required autofocus
O Fecha: <input type="date"
name="start_date«
id="start_date" value="2010-12-
01" >

CSS3
O text-shadow:
O background:
-webkit-gradient();
O border-radius:
-webkit-box-reflect(linear, left top, left bottom,
from(transparent), to(rgba()));

O -webkit-transform:rotate();
O -webkit-box-shadow:

O -webkit-box-orient: horizontal;

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

HTML5

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (13)

Ähnlich wie HTML5

Ähnlich wie HTML5 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

HTML5