• Save
Curso HTML 5 - Módulo 1
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • 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
958
On Slideshare
958
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
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. Responsive Web Design con HTML5 y CSS3 Ing. José Rodríguez Rojas
  • 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. Introducción a HTML, CSS3 yResponsive Web Design
  • 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. 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. 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. 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. Ejemplos http://blog.teamtreehouse.com/ http://2011.dconstruct.org/ http://2012.dconstruct.org/
  • 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. 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. 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. 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. 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. 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. 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. 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/