HTML5, CSS3, Responsive Design

• Las tablas son usadas para mostrar

datos tabulares, no para diseño.

• Las tablas anidadas alentan la pagina

web y son consideradas como puntos

negativos en Woorank.

• Los rediseños de sitios son más

laboriosos y costosos.

Etiquetas descontinuadas en HTML5:

Nuevas etiquetas estructurales:

Etiqueta Descripción

<head> Define la cabecera de una pagina o sección.

<footer> Define el pie de una pagina o sección.

<nav> Define una región de navegación en una pagina o sección.

<section> Define una sección o grupo de contenido.

<article> Define un articulo o una pieza de contenido.

<aside> Define contenido relacionado.

<!DOCTYPE html>

En CSS En HTML

Elementos HTML p <p><\p>

Identificadores de elementos #id1 id="id1"

Clases de elementos . clase1 class="clase1"

Combinaciones p, clase1,…

CSS:

CSS puede emplearse de 3 maneras:

• Inline Styles

• Internal Style Sheet

• External Style Sheet

NO

CSS Reset:

Reseteo de los estilos impuestos por el navegador.

El CSS Reset más popular fue desarrollado por Eric Meyer´s

@import url("reset.css");

Buenas Practicas:

• Ordenar los elementos en orden jerárquico y alfabético.

• Utilizar comentarios y separadores

• Combinar elementos

• Uso de múltiples clases

• Al usar 0 no es necesario definir la unidad (px, em, %,…)

• Utilizar em para tamaños de fuente

Diseño fluido:

Procurar utilizar % la mayor parte del tiempo

Viewport:

<meta name="viewport" content="width=device-width , initial-scale=1 ,maximum-scale=1" />

/* Smartphones (portrait and landscape) ----------- */@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}

/* Smartphones (landscape) ----------- */@media only screen and (min-width : 321px) {}

/* Smartphones (portrait) ----------- */@media only screen and (max-width : 320px) {}

/* iPads (portrait and landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}

/* iPads (landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}

/* iPads (portrait) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}

HTML5, CSS3, Responsive Design

Technology

Transcript of HTML5, CSS3, Responsive Design