Post on 15-Jan-2015
description
• 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
<link rel='stylesheet' href='css/stylesheet.css' type='text/css' />
<link rel='stylesheet' href='css/stylesheetPrint.css' type='text/css' media="print" />
<link rel='stylesheet' href='css/stylesheet.css' type='text/css' media="only screen and (max-device-width: 480px)" /
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) {}