Presentación del curso de html5

  • 762 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
762
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
88
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. FACILITADOR: MARCO ANTONIO ANDRADE @marco_jaw y @infomarkedPRESENTACIÓ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 CURSOBrindar herramientas de desarrollo parala creación y publicación de páginasweb, usando técnicas avanzadas dediseño y programación para obteneraplicaciones dinámicas e interactivas.
  • 4. ¿Qué es HTML 5?Es la actualización de HTML, el lenguaje en el quees 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 HTML51989 2000 2002 2004 Versión 2.0 WHATWG Mejoras semánticas Web Hypertext Application Technology Working Group
  • 7. Historia de HTML5 2007 2009 PresenteAdopta el trabajo de Muerte a XHTML2 El futuro de la WebWHATWG Definir HTML5Borrador 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>
  • 18. Prefijos de navegadores -webkit- -o- -moz- -ms- -webkit-
  • 19. Border-Radius✓-webkit-border-radius: 4px;✓-moz-border-radius: 4px;✓border-radius: 4px;
  • 20. Box-Shadow✓-webkit-box-shadow: 1px 1px 3px #292929;✓-moz-box-shadow: 1px 1px 3px #292929;✓box-shadow: 1px 1px 3px #292929;
  • 21. Text-Shadowh1 { text-shadow: 0 1px 0 gray; color: #292929;} futurodelweb.com
  • 22. Opacity<style type="text/css"> .box { opacity: .6; }</style><div class="box"> <!--CONTENT--></div>
  • 23. 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>
  • 24. Transitionul a { -webkit-transition: padding .4s; -moz-transition: padding .4s; -o-transition: padding .4s; * Hi transition: padding .4s;} * Hia:hover { padding-left: 6px;}<ul> <li><a href=”#”>Hi</a></li></ul>
  • 25. Gracias por la atención prestadaAHORA A TRABAJAR