RWD con HTML5 y CSS3

Responsive Web Design con
HTML5 y CSS3
Ing. José Rodríguez Rojas

Contenido
1. Introducción a HTML, CSS3 y Responsive Web
Design
2. Media Queries
3. Diseños Fluidos
4. HTML5 para Responsive Designs
5. CSS3: Selectores, Tipografia y Color
6. Estética con CSS3
7. CSS3 Transiciones, Transformaciones y
Animaciones

Introducción a HTML, CSS3 y
Responsive Web Design

¿Por qué son importantes los
smartphones? (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.

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

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/

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.

Ejemplos
 http://blog.teamtreehouse.com/
 http://2011.dconstruct.org/
 http://2012.dconstruct.org/

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)

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>

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>

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>

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>

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.

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/

RWD con HTML5 y CSS3

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie RWD con HTML5 y CSS3

Ähnlich wie RWD con HTML5 y CSS3 (20)

Mehr von José Rodríguez

Mehr von José Rodríguez (7)

RWD con HTML5 y CSS3