Taller de Maquetacion web | Jorge Callalle Torres

1,823 views

Published on

Metodología y ejercicios prácticos de cómo maquetar una web.

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

No Downloads
Views
Total views
1,823
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
123
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Taller de Maquetacion web | Jorge Callalle Torres

  1. 1. Taller deMaquetación Web Metodología &   Ejercicios prácticos Reconocimiento 3.0 Unported (CC BY 3.0)
  2. 2. Temario● Beneficios ○ Estándares web     ○ Metodología● Ejercicios        ○ Semántica        ○ Estructura ○ Estilos
  3. 3. Beneficios ¿Por qué es buena idea respetar los estándares web?http://www.w3.org/standards/webdesign/htmlcss
  4. 4. Beneficios● Sienta las bases para una correcta indexación en buscadores.
  5. 5. Beneficios● Ayuda y agiliza la implementación y el mantenimiento de la aplicación.
  6. 6. Beneficios● Mejora la accesibilidad de la aplicación.● Web Accessibility Initiative (WAI) ○ http://www.w3.org/WAI/
  7. 7. Beneficios● Multidispositivo
  8. 8. Beneficios ¿Por qué es buena idea tener una metodología de maquetación?
  9. 9. Beneficios● Nos permite centrarnos en una sola tarea a la vez...
  10. 10. Beneficios● Nos permite centrarnos en una sola tarea a la vez... 1. Semántica      XHTML      indexación 
  11. 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. 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. 13. ¡A currar!Ejercicios:1. Semántica    2. Estructura3. Estilos
  14. 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. 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. 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. 17. Estructura● A tener en cuenta... ○ HTML5 tiene nuevas etiquetas semánticas:  ■ header ■ footer ■ aside ■ article ■ section ■ figure ■ nav ○ But... "You can still use div"
  18. 18. 3.- Estilos● Material ○ Estructura (ver ejercicio #2)● Tareas ○ Crear la hoja de estilos
  19. 19. 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
  20. 20. 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
  21. 21. Estilos/Hacks IEHacks 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]-->
  22. 22. 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/
  23. 23. Estilos/Float Hack
  24. 24. Estilos/Float Hack
  25. 25. 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
  26. 26. 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
  27. 27. Recursos extra● Microformatos ○ http://microformats.org ○ http://schema.org● Sprites ○ http://www.alistapart.com/articles/sprites
  28. 28. 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
  29. 29.  ¡Gracias! http://bruno.garciaechegaray.com

×