Taller de Maquetación Web
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Taller de Maquetación Web

on

  • 10,728 views

Taller de Maquetación Web. Metodología &  

Taller de Maquetación Web. Metodología &  
Ejercicios prácticos.

Statistics

Views

Total Views
10,728
Views on SlideShare
10,388
Embed Views
340

Actions

Likes
5
Downloads
265
Comments
0

6 Embeds 340

http://brunogarciaechegaray.tumblr.com 320
http://blog.garciaechegaray.com 9
http://www.linkedin.com 7
http://www.tumblr.com 2
http://translate.googleusercontent.com 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • - ¿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

Taller de Maquetación Web Presentation Transcript

  • 1. Taller deMaquetació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/
  • 7. Beneficios● Multidispositivo
  • 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. Estructura3. 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
  • 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. 3.- Estilos● Material ○ Estructura (ver ejercicio #2)● Tareas ○ Crear la hoja de estilos
  • 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. 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. 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. 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. Estilos/Float Hack
  • 24. Estilos/Float Hack
  • 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. 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. Recursos extra● Microformatos ○ http://microformats.org ○ http://schema.org● Sprites ○ http://www.alistapart.com/articles/sprites
  • 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.  ¡Gracias! http://bruno.garciaechegaray.com