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
✓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