html5

HTML5
CSS3



TRIA – Tecnólogo Informático

HTML5 y CSS3
Repaso JQuery

HTML5 y CSS3
Repaso JQuery

HTML5 y CSS3
HTML5
Para usar HTML5 se utiliza el doctype.


Es compatible con versiones antiguas de navegadores.

HTML5 y CSS3
HTML5



Hello world!






Hola HTML5!
Esta es mi primera web




HTML5 y CSS3
HTML5
En HTML4


En HTML5


En HTML4En HTML5


En HTML4


En HTML5


HTML5 y CSS3
HTML5
En HTML4 sólo existía un elemento contenedor sin significado
semántico .
En HTML5 existen Div, Section y Article que además de cumplir con una
comportamiento similar a div aportan semántica.


Es el contenedor genérico, es un elemento a nivel de bloque sin sentido adicional
semántico.


Es un "documento genérico osección de aplicación"
Normalmente, tiene un header y suele tener un footer .


Es una parte independiente del documento. También suele llevar un título y un
footer.

HTML5 y CSS3
HTML5

Se usa para definir la sidebar.

La parte más baja, donde tenemos toda la información

La cabecera de la web.

Se usa para definir el menú o la navegación de la página.

HTML5 y CSS3

HTML5 yCSS3
HTML5

HTML5 y CSS3

HTML5 y CSS3
HTML5
Nuevas Características
• Audio & Video
• Canvas
• Almacenamiento local
• WebSockets
• Semántica
• Compatibilidad hacia atrás
• Eficacia en el renderizado

HTML5 y CSS3
HTML5
Audio
La etiqueta define sonido o cualquier tipo de
streaming de audio.
Atributos:
• autoplay
• controls
• loop
• preload
• src

HTML5 y CSS3HTML5
La etiqueta define un botón de comando o un radiobutton o un
checkbox.
Atributos:
• checked
• disabled
• icon
• label
• radiogroup
• type
Haz click aquí

HTML5 y CSS3
HTML5
La etiqueta se usa para destacar una palabra o una parte del texto.
La etiqueta se usa para agrupar titulares (h1,h2)

Bienvenidos a mi web
La web de HTML5


La etiqueta se usa para visualizar elprogreso de una tarea
que se esté realizando

25%


HTML5 y CSS3
HTML5
La etiqueta se usa para definir la fuente de un archivo de audio o
video.





La etiqueta contiene el encabezado para el elemento
details, que se usa para dar detalles sobre un documento o parte de un
documento.

Copyright por mi persona.
Lorem ipsum dolor sit amet....


HTML5 y CSS3

FormulariosWeb

HTML5 y CSS3
HTML5
Placeholder
Un placeholder es un texto que se muestra para ayudar al
usuario y darle información.
En cuanto se hace click en el input, desaparece:

HTML5 y CSS3
HTML5

Autofocus


El autofocus no funciona en todos los navegadores, así que si quiere usar y
tener máxima compatibilidad, se puede usar JavaScript.


function auto(){
if (!("autofocus" indocument.createElement("input"))) {
document.getElementById("i").focus();
}
}
window.onload = auto;


HTML5 y CSS3
HTML5
Tipos de Texto
Información que se puede utilizar para desplegar y/o validar el tipo de texto
ingresado.






window.onload = function() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var img =document.getElementById("imagen");
context.drawImage(img, 0, 0);
};


•

Cargando la imagen completamente desde javascript:

var canvas = document.getElementById("e");
var context = canvas.getContext("2d");
var img = new Image();
img.src = "img/imagen.png"; //Necesita especificarse donde está la imagen
context.drawImage(img, 0, 0);

HTML5 y CSS3
HTML5
Gradientes
Son transiciones suaves entredos colores:
• createLinearGradient(x0, y0, x1, y1): pinta a lo largo de una
dirección indiada por la línea que va desde el punto (x0, y0) hasta
(x1, y1).
• createRadialGradient(x0, y0, r0, x1, y1, r1): pinta a lo largo de un
cono, con círculo inicial está en (x0, y0) con radio r0, y con círculo
final en (x1, y1) con radio r1.

Se debe crear un objeto Gradient:
var my_gradient =...