presentación del curso de html5
DESCRIPTION
Material sobre el curso de HTML5 y CSS3 que impartira futurodelweb.comTRANSCRIPT
![Page 1: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/1.jpg)
PRESENTACIÓN DEL CURSO DE HTML5
FACILITADOR: MARCO ANTONIO ANDRADE @marco_jaw y @infomarked
![Page 2: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/2.jpg)
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
![Page 3: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/3.jpg)
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.
![Page 4: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/4.jpg)
Es la actualización de HTML, el lenguaje en el que es creada la web.
¿Qué es HTML 5?
![Page 5: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/5.jpg)
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?
![Page 6: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/6.jpg)
1989 2000 2002
Versión 2.0
Mejoras semánticas
2004
WHATWG
Web Hypertext Application
Technology Working Group
Historia de HTML5
![Page 7: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/7.jpg)
Historia de HTML5
2007 2009
Adopta el trabajo de
WHATWG
Borrador HTML5
Presente
El futuro de la Web Muerte a XHTML2
Definir HTML5
![Page 8: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/8.jpg)
<center> <big>
<tt>
<strike>
<font>
<u>
<acronym>
<s>
cellspacing
valign size
height
cellpadding
width
ELEMENTOS ELIMINADOS
<basefont>
![Page 9: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/9.jpg)
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
![Page 10: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/10.jpg)
ESTRUCTURA DE HTML5
<header>
<nav>
<article>
<sidebar>
<footer>
<section>
![Page 11: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/11.jpg)
Manejo de formularios
✓Característica importante, mejoras y nuevos elementos disponibles
✓Manera simple, nativa y sin necesidad de recurrir a soluciones de Javascript
![Page 12: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/12.jpg)
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" />
![Page 13: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/13.jpg)
Manejo de formularios
Required
✓Atributo que indica que el valor es necesario antes de ser enviado.
<input type="text" required name=“name" />
![Page 14: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/14.jpg)
Manejo de formularios
Number
✓Despliega un input con un control para moverse asc. ó desc.
<input type="number" name="number" />
![Page 15: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/15.jpg)
Manejo de formularios
Date
✓Formato de fecha sin zona honoraria
<input type="date" name="birthday" />
![Page 16: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/16.jpg)
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>
![Page 17: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/17.jpg)
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>
![Page 18: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/18.jpg)
![Page 19: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/19.jpg)
-webkit-
-ms-
-o-
-moz-
Prefijos de navegadores
-webkit-
![Page 20: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/20.jpg)
Border-Radius
✓-webkit-border-radius: 4px;
✓-moz-border-radius: 4px;
✓border-radius: 4px;
![Page 21: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/21.jpg)
Box-Shadow
✓-webkit-box-shadow: 1px 1px 3px #292929;
✓-moz-box-shadow: 1px 1px 3px #292929;
✓box-shadow: 1px 1px 3px #292929;
![Page 22: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/22.jpg)
Text-Shadow
h1 {
text-shadow: 0 1px 0 gray;
color: #292929;
}
futurodelweb.com
![Page 23: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/23.jpg)
Opacity
<style type="text/css">
.box {
opacity: .6;
}
</style>
<div class="box">
<!--CONTENT-->
</div>
![Page 24: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/24.jpg)
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
![Page 25: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/25.jpg)
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
![Page 26: Presentación del curso de html5](https://reader034.vdocuments.site/reader034/viewer/2022042606/546d751db4af9f932c8b5337/html5/thumbnails/26.jpg)
AHORA A TRABAJAR
Gracias por la atención prestada