HTML5, CSS3, Responsive Design

844 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
844
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5, CSS3, Responsive Design

  1. 1. • 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.
  2. 2. Etiquetas descontinuadas en HTML5:
  3. 3. 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.
  4. 4. <!DOCTYPE html>
  5. 5. 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,…
  6. 6. CSS puede emplearse de 3 maneras: • Inline Styles • Internal Style Sheet • External Style Sheet NO
  7. 7. 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");
  8. 8. 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
  9. 9. <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)" /
  10. 10. Diseño fluido: Procurar utilizar % la mayor parte del tiempo Viewport: <meta name="viewport" content="width=device-width , initial-scale=1 ,maximum-scale=1" />
  11. 11. /* 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) { }
  12. 12. /* 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) { }

×