11. Beneficios
● Nos permite centrarnos en una sola tarea a
la vez:
1. Semántica XHTML indexación
2. Estructura DIV/SPAN organización
12. Beneficios
● Nos permite centrarnos en una sola tarea a
la vez:
1. Semántica XHTML indexación
2. Estructura DIV/SPAN organización
3. Estilos CSS imágenes y colores
16. 2.- Estructura
● Material
○ Contenido etiquetado (ver ejercicio #1)
● Tareas
○ Con la ayuda de las etiquetas no semánticas <div> &
<span> organizar el contenido por bloques de
información.
● Addons
○ Firebug & Web Developer
17.
18.
19.
20.
21. Estructura
● A tener en cuenta...
○ HTML5 tiene nuevas etiquetas semánticas:
■ header
■ footer
■ aside
■ article
■ section
■ figure
■ nav
○ But... "You can still use div"
22.
23. 3.- Estilos
● Material
○ Estructura (ver ejercicio #2)
● Tareas
○ Crear la hoja de estilos
25. Estilos/Reset
"If you don’t define all the default CSS parameters
in your style sheet, the browser will use its default parameters
instead, so your site will end up looking different
depending on what browser you use." http://www.
designisphilosophy.com
● Normalize.css
○ http://necolas.github.com/normalize.css
● BluePrint Reset
○ https://github.com/joshuaclayton/blueprint-
css/blob/master/blueprint/src/reset.css
27. Estilos/Position
● static (por defecto)
○ posición en orden de aparición
● absolute
○ posición según el contexto (no static) del elemento
padre (<body>, <div>)
● relative
○ posición relativa a los atributos: top, left, bottom, right
● fixed
○ posición fija
● Learn CSS Positioning in Ten Steps:
○ http://www.barelyfitz.com/screencast/html-training/css/positioning/
33. Para saber más
● Proporción: Ergonomía y anatomía en
interfaces modernas
○ http://slidesha.re/fewl8r
● OOCSS
○ http://www.scribd.com/doc/60772875
● HTML5 y CSS3
○ http://slidesha.re/fDIry6
● Mind map about Front-end technologies
○ http://goo.gl/EnKsA
- ¿Quién soy? - Taller 100% práctico - XHTML & HTML5, CSS2 & CSS3 - Amplitud
- La base de la maquetación web son los estándares.
¿Estándares?
Los robots encontrarán y comprenderán mejor nuestro contenido. Ya sea a través de posicionamiento orgánico o campaña de publicidad en Google Adwords.
Los robots encontrarán y comprenderán mejor nuestro contenido. Ya sea a través de posicionamiento orgánico, una campaña de publicidad en Google Adwords
Los robots encontrarán y comprenderán mejor nuestro contenido. Ya sea a través de posicionamiento orgánico, una campaña de publicidad en Google Adwords
Los robots encontrarán y comprenderán mejor nuestro contenido. Ya sea a través de posicionamiento orgánico, una campaña de publicidad en Google Adwords