Taller de Maquetacion web | Jorge Callalle Torres
•
1 recomendación•1,828 vistas
Este documento presenta un taller sobre maquetación web que incluye los beneficios de seguir los estándares web y tener una metodología de maquetación. El taller consiste en tres ejercicios: 1) etiquetar el contenido semánticamente, 2) organizar el contenido con <div> y <span>, y 3) crear la hoja de estilos CSS. El documento también proporciona recursos adicionales sobre HTML5, CSS3 y frameworks.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (19)
Destacado
Destacado (20)
Similar a Taller de Maquetacion web | Jorge Callalle Torres
Similar a Taller de Maquetacion web | Jorge Callalle Torres (20)
Último
Último (20)
Taller de Maquetacion web | Jorge Callalle Torres
- 1. Taller de Maquetación Web Metodología & Ejercicios prácticos Reconocimiento 3.0 Unported (CC BY 3.0)
- 2. Temario ● Beneficios ○ Estándares web ○ Metodología ● Ejercicios ○ Semántica ○ Estructura ○ Estilos
- 3. Beneficios ¿Por qué es buena idea respetar los estándares web? http://www.w3.org/standards/webdesign/htmlcss
- 4. Beneficios ● Sienta las bases para una correcta indexación en buscadores.
- 5. Beneficios ● Ayuda y agiliza la implementación y el mantenimiento de la aplicación.
- 6. Beneficios ● Mejora la accesibilidad de la aplicación. ● Web Accessibility Initiative (WAI) ○ http://www.w3.org/WAI/
- 8. Beneficios ¿Por qué es buena idea tener una metodología de maquetación?
- 9. Beneficios ● Nos permite centrarnos en una sola tarea a la vez...
- 10. Beneficios ● Nos permite centrarnos en una sola tarea a la vez... 1. Semántica XHTML indexación
- 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
- 13. ¡A currar! Ejercicios: 1. Semántica 2. Estructura 3. Estilos
- 14. 1.- Semántica ● Material 1. Diseño gráfico y/o wireframe impreso 2. Contenido en texto plano ● Tareas 1. Identificar los elementos semánticos 2. Etiquetar el contenido ● Addons ○ HeadingsMap ○ Awesome Screenshot
- 15. Semántica/Chuleta http://www.w3schools.com/html/ ● Encabezados: <H1> <H2> <H3> <H4> <H5> <H6> ● Listados: <UL> <OL> <LI> <DL> <DT> <DD> ● Párrafos y saltos de línea: <P> </BR> ● Enlaces: <A HREF="" TITLE=""> ● Imágenes: <IMG SRC="" ALT=""> ● Tablas: <TABLE> <CAPTION> <THEAD> <TBODY> <TFOOTER> <TR> <TH> <TD> ● Formularios: <FORM> <FIELDSET> <LEGEND> <LABEL FOR="" > <INPUT TYPE="TEXT" FOR=""> <INPUT TYPE="SUBMIT" > ● Texto: <STRONG> <EM>
- 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
- 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"
- 23. 3.- Estilos ● Material ○ Estructura (ver ejercicio #2) ● Tareas ○ Crear la hoja de estilos
- 24. Estilos/Chuleta http://www.w3schools.com/cssref/ ● Básicos: color, cursor, clear, position, z-index ● Background: background-color, background-image, background-position, background-repeat ● Fonts: font-family, font-size, font-weight ● Margin: margin-top, margin-bottom, margin-left, margin- right ● Padding: padding-top, padding-bottom, padding-left, padding-right ● Border: border-color, border-top, border-bottom, border- left, border-right
- 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
- 26. Estilos/Hacks IE Hacks IE ● Lower than IE 9 ○ <!--[if lt IE 9]><![endif]--> ● Greater than IE 8 ○ <!--[if gt IE 8]><![endif]--> ● Lower or equal 9 ○ <!--[if lte IE 9]><![endif]--> ● Is IE 6 ○ <!--[if IE 6]><![endif]-->
- 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/
- 30. Recursos extra ● Frameworks CSS ○ Estáticos ■ http://960.gs ■ http://www.blueprintcss.org ○ Responsive ■ http://cssgrid.net ■ http://simplegrid.info ○ LESS ■ http://twitter.github.com/bootstrap
- 31. Recursos extra ● HTML5 ○ Refencia ■ http://html5doctor.com ○ Demos ■ http://html5demos.com ○ Enabling script ■ http://code.google.com/p/html5shiv ■ http://www.modernizr.com ○ Framework ■ http://html5boilerplate.com ■ http://52framework.com ● CSS3 ○ http://css3pie.com ○ http://css3please.com
- 32. Recursos extra ● Microformatos ○ http://microformats.org ○ http://schema.org ● Sprites ○ http://www.alistapart.com/articles/sprites
- 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