Curso HTML 5 - Módulo 1

946 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
946
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Curso HTML 5 - Módulo 1

  1. 1. Responsive Web Design con HTML5 y CSS3 Ing. José Rodríguez Rojas
  2. 2. Contenido1. Introducción a HTML, CSS3 y Responsive Web Design2. Media Queries3. Diseños Fluidos4. HTML5 para Responsive Designs5. CSS3: Selectores, Tipografia y Color6. Estética con CSS37. CSS3 Transiciones, Transformaciones y Animaciones
  3. 3. Introducción a HTML, CSS3 yResponsive Web Design
  4. 4. ¿Por qué son importantes lossmartphones? (IE no?) Crecimiento del (2.86%) 2010 al (7.02%) 2011. Uso de IE6 disminuyó de 8.79% a 3.42% Uso de IE7 disminuyó a 5.42% en el 2011.
  5. 5. Web Responsive Design:Definición El término fue acuñado por Ethan Marcotte. Se consolidan tres técnicas existentes:  Flexible Grid Layout  Flexible Images  Media y Media Queries
  6. 6. Herramientas Testing Viewport http://www.microsoft.com/download/en/details.as px?id=18359 http://safariextendr.com/extension/resizeme https://addons.mozilla.org/en- US/firefox/addon/firesizer/ http://www.chromeextensions.org/appearance- functioning/window-resizer/
  7. 7. Viewport o ScreenSize Viewport y ScreenSize no son lo mismo Viewport: Se refiere al área de contenido sin considerar toolbars, tabs, etc. ScreenSize: Se refiere al área física de visualización del dispositivo.
  8. 8. Ejemplos http://blog.teamtreehouse.com/ http://2011.dconstruct.org/ http://2012.dconstruct.org/
  9. 9. HTML5 Es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML. HTML5 especifica dos variantes de sintaxis para HTML: un «clásico» HTML (text/html), la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deberá ser servida como XML (XHTML)
  10. 10. Reducción de Tiempo y Código Antes:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Ahora:  <!DOCTYPE html>
  11. 11. Reducción de Tiempo y Código Antes:  <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script> Ahora:  <script src="js/jquery-1.7.1.min.js"></script>
  12. 12. Reducción de Tiempo y Código Antes:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Ahora:  <!DOCTYPE html>
  13. 13. Semántica Mejorada<div class=“header”> <div class=“navigation”> <ul class=“nav-list”> <li><a href=“#” title=“Home”>Home</a></li> <li><a href=“#” title=“About”>About</a></li> </ul> </div></div>
  14. 14. Semántica Mejorada<header> <nav> <ul class=“nav-list”> <li><a href=“#” title=“Home”>Home</a></li> <li><a href=“#” title=“About”>About</a></li> </ul> </nav></header>
  15. 15. CSS3 A diferencia de CSS2, que fue una gran especificación que definía varias funcionalidades, CSS3 está dividida en varios documentos separados, llamados "módulos". Cada módulo añade nuevas funcionalidades a las definidas en CSS2, de manera que se preservan las anteriores para mantener la compatibilidad.
  16. 16. Ejemplos http://www.panic.com/blog/ http://demo.marcofolio.net/3d_animation_css3/ http://demo.marcofolio.net/rotating_billboard/ (SAFARI) http://demo.marcofolio.net/polaroid_photo_viewer / http://demo.marcofolio.net/lights_off_canvas http://designlovr.com/examples/dynamic_stack_of _index_cards/

×