Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (8)
Destacado
Similar a HTML5, CSS3, Responsive Design
Similar a HTML5, CSS3, Responsive Design (20)
Último
Último (20)
HTML5, CSS3, Responsive Design
- 2. • 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.
- 3. Etiquetas descontinuadas en HTML5:
- 4. 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.
- 8. CSS: En CSS Elementos HTML Identificadores de elementos Clases de elementos Combinaciones En HTML p <p><p> #id1 id="id1" . clase1 class="clase1" p, clase1,…
- 9. CSS puede emplearse de 3 maneras: • Inline Styles • Internal Style Sheet • External Style Sheet NO
- 10. 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");
- 11. 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
- 12. <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)" /
- 14. Diseño fluido: Procurar utilizar % la mayor parte del tiempo Viewport: <meta name="viewport" content="width=device-width , initial-scale=1 ,maximum-scale=1" />
- 15. /* 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) { }
- 16. /* 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) { }