presentación del curso de html5

PRESENTACIÓN DEL CURSO DE HTML5

FACILITADOR: MARCO ANTONIO ANDRADE @marco_jaw y @infomarked

RUTA DE APRENDIZAJE ✓Presentacion de Objetivo

✓¿Qué es HTML5?

✓Historia breve de HTML5

✓Compatibilidad en navegadores Web

✓Elementos eliminados

✓Nuevos elementos y atributos de HTML5

✓Estructura de HTML5

✓Manejo de formularios

✓Audio y Video

OBJETIVO DEL CURSO

Brindar herramientas de desarrollo para la creación y publicación de páginas web, usando técnicas avanzadas de diseño y programación para obtener aplicaciones dinámicas e interactivas.

Es la actualización de HTML, el lenguaje en el que es creada la web.

¿Qué es HTML 5?

Nos permite una mayor interacción entre nuestras páginas Web y contenido multimedia (audio, video, etc).

Mayor facilidad al momento de codificar nuestro diseño

Mejorar la experiencia del usuario

¿Por qué utilizarlo?

1989 2000 2002

Versión 2.0

Mejoras semánticas

2004

WHATWG

Web Hypertext Application

Technology Working Group

Historia de HTML5

Historia de HTML5

2007 2009

Adopta el trabajo de

WHATWG

Borrador HTML5

Presente

El futuro de la Web Muerte a XHTML2

Definir HTML5

<center> <big>

<tt>

<strike>

<font>

<u>

<acronym>

<s>

cellspacing

valign size

height

cellpadding

width

ELEMENTOS ELIMINADOS

<basefont>

Nuevos elementos y atributos en html5

<header> <aside>

<meter>

<mark>

<section>

<canvas>

<time> <nav>

required

min/max

type email, url, date, time, color picker

oninvalid

autocomplete

ESTRUCTURA DE HTML5

<header>

<nav>

<article>

<sidebar>

<footer>

<section>

Manejo de formularios

✓Característica importante, mejoras y nuevos elementos disponibles

✓Manera simple, nativa y sin necesidad de recurrir a soluciones de Javascript

Manejo de formularios

Email

✓Evalúa la cadena ingresada y despliega un listado de posibles correos electrónicos que están siendo ingresados

<input type="email" name="email" />

Manejo de formularios

Required

✓Atributo que indica que el valor es necesario antes de ser enviado.

<input type="text" required name=“name" />

Manejo de formularios

Number

✓Despliega un input con un control para moverse asc. ó desc.

<input type="number" name="number" />

Manejo de formularios

Date

✓Formato de fecha sin zona honoraria

<input type="date" name="birthday" />

Manejo de formularios

Audio

✓Sin necesidad de plugins (ejemplo Flash)

✓Formatos: MP3, Wav, Ogg

<audio controls="controls">

<source src="audio.mp3" type="audio/mpeg">

</audio>

Manejo de formularios

Video

✓Sin necesidad de plugins (ejemplo Flash)

✓Formatos: MP4, WebM, Ogg

<video width="240" controls="controls">

<source src="movie.mp4" type="video/mp4">

</video>

-webkit-

-ms-

-o-

-moz-

Prefijos de navegadores

-webkit-

Border-Radius

✓-webkit-border-radius: 4px;

✓-moz-border-radius: 4px;

✓border-radius: 4px;

Box-Shadow

✓-webkit-box-shadow: 1px 1px 3px #292929;

✓-moz-box-shadow: 1px 1px 3px #292929;

✓box-shadow: 1px 1px 3px #292929;

Text-Shadow

h1 {

text-shadow: 0 1px 0 gray;

color: #292929;

}

futurodelweb.com

Opacity

<style type="text/css">

.box {

opacity: .6;

}

</style>

<div class="box">

<!--CONTENT-->

</div>

Columns

<style type="text/css">

.columns {

-moz-column-count: 2;

-webkit-column-count: 2;

}

</style>

<div class="columns">

<p>Lorem ipsum…</p>

</div>

Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Nulla elementum accumsan

mi. Maecenas id dui a magna tempor

pretium. Quisque id enim. Proin id tortor.

Curabitur sit amet enim vitae quam

pharetra imperdiet. Nulla diam ante,

pellentesque eu, vestibulum non,

adipiscing nec, eros. Vestibulum ante

ipsum primis in faucibus orci luctus et

ultrices posuere

Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Nulla elementum accumsan

mi. Maecenas id dui a magna tempor

pretium. Quisque id enim. Proin id tortor.

Curabitur sit amet enim vitae quam

pharetra imperdiet. Nulla diam ante,

pellentesque eu, vestibulum non,

adipiscing nec, eros. Vestibulum ante

ipsum primis in faucibus orci luctus et

ultrices posuere

Transition ul a {

-webkit-transition: padding .4s;

-moz-transition: padding .4s;

-o-transition: padding .4s;

transition: padding .4s;

}

a:hover {

padding-left: 6px;

}

<ul>

<li><a href=”#”>Hi</a></li>

</ul>

* Hi

* Hi

AHORA A TRABAJAR

Gracias por la atención prestada