Material sobre el curso de HTML5 y CSS3 que impartira futurodelweb.com

1. FACILITADOR: MARCO ANTONIO ANDRADE @marco_jaw y @infomarked
PRESENTACIÓN DEL CURSO DE HTML5

2. 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

3. 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.

4. ¿Qué es HTML 5?
Es la actualización de HTML, el lenguaje en el que
es creada la web.

5. ¿Por qué utilizarlo?
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

6. Historia de HTML5
1989 2000 2002 2004
Versión 2.0 WHATWG
Mejoras semánticas Web Hypertext Application
Technology Working Group

7. Historia de HTML5
2007 2009 Presente
Adopta el trabajo de Muerte a XHTML2 El futuro de la Web
WHATWG Definir HTML5
Borrador HTML5

8. ELEMENTOS ELIMINADOS
width
<center> <u>
cellspacing
<big>
height <basefont>
<s>
<font>
size
<acronym>
<tt> valign
cellpadding
<strike>

9. Nuevos elementos y atributos en html5
<header> <section>
required <aside> oninvalid
<time> <nav>
<mark> autocomplete
type
email, url, date, time, color picker
<canvas>
min/max
<meter>

10. ESTRUCTURA DE HTML5
<header>
<nav>
<article>
<sidebar>
<section>
<footer>

11. Manejo de formularios
✓Característica importante, mejoras y nuevos
elementos disponibles
✓Manera simple, nativa y sin necesidad de
recurrir a soluciones de Javascript

12. 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" />

13. Manejo de formularios
Required
✓Atributo que indica que el valor es necesario
antes de ser enviado.
<input type="text" required name=“name" />

14. Manejo de formularios
Number
✓Despliega un input con un control para
moverse asc. ó desc.
<input type="number" name="number" />

15. Manejo de formularios
Date
✓Formato de fecha sin zona honoraria
<input type="date" name="birthday" />

16. 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>

17. 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>

19. Prefijos de navegadores
-webkit- -o-
-moz-
-ms- -webkit-

20. Border-Radius
✓-webkit-border-radius: 4px;
✓-moz-border-radius: 4px;
✓border-radius: 4px;

21. Box-Shadow
✓-webkit-box-shadow: 1px 1px 3px #292929;
✓-moz-box-shadow: 1px 1px 3px #292929;
✓box-shadow: 1px 1px 3px #292929;

22. Text-Shadow
h1 {
text-shadow: 0 1px 0 gray;
color: #292929;
}
futurodelweb.com

23. Opacity
<style type="text/css">
.box {
opacity: .6;
}
</style>
<div class="box">
<!--CONTENT-->
</div>

24. Columns
<style type="text/css"> Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur
.columns { adipiscing elit. Nulla elementum accumsan adipiscing elit. Nulla elementum accumsan
mi. Maecenas id dui a magna tempor mi. Maecenas id dui a magna tempor
-moz-column-count: 2; pretium. Quisque id enim. Proin id tortor. pretium. Quisque id enim. Proin id tortor.
-webkit-column-count: 2; Curabitur sit amet enim vitae quam Curabitur sit amet enim vitae quam
pharetra imperdiet. Nulla diam ante, pharetra imperdiet. Nulla diam ante,
} pellentesque eu, vestibulum non, pellentesque eu, vestibulum non,
</style> adipiscing nec, eros. Vestibulum ante adipiscing nec, eros. Vestibulum ante
ipsum primis in faucibus orci luctus et ipsum primis in faucibus orci luctus et
ultrices posuere ultrices posuere
<div class="columns">
<p>Lorem ipsum…</p>
</div>

25. Transition
ul a {
-webkit-transition: padding .4s;
-moz-transition: padding .4s;
-o-transition: padding .4s; * Hi
transition: padding .4s;
}
* Hi
a:hover {
padding-left: 6px;
}
<ul>
<li><a href=”#”>Hi</a></li>
</ul>

26. Gracias por la atención prestada
AHORA A TRABAJAR