Descargar para leer sin conexión
Subido porManuel Padilla
HTML5, CSS3, Responsive Design
Este documento proporciona información sobre el diseño de sitios web y el uso de tablas, etiquetas HTML5, hojas de estilo en cascada (CSS), diseño responsivo y medios queries. Recomienda usar tablas para datos y no para diseño, evitar tablas anidadas, y que las actualizaciones de sitios son costosas. Además, explica nuevas etiquetas HTML5 como <header>, <footer>, <nav> y <section>, y cómo enlazar hojas de estilo CSS externas e internas y usar medios queries para diseño adaptable a
HTML5, CSS3, Responsive Design
- 2. • Las tablasson 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.
- 4. Nuevas etiquetas estructurales: Etiqueta Descripción <head> Definela 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.
- 5.
- 8. CSS: En CSS Elementos HTML Identificadoresde elementos Clases de elementos Combinaciones En HTML p <p><p> #id1 id="id1" . clase1 class="clase1" p, clase1,…
- 9. CSS puede emplearsede 3 maneras: • Inline Styles • Internal Style Sheet • External Style Sheet NO
- 10. CSS Reset: Reseteo delos estilos impuestos por el navegador. El CSS Reset más popular fue desarrollado por Eric Meyer´s @import url("reset.css");
- 11. Buenas Practicas: • Ordenarlos 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 (portraitand 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 (portraitand 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) { }