Diseño web – primeros pasos Diseñadores    Web
<ul><li>Aspectos a tomar en cuenta: </li></ul><ul><li>Diferentes navegadores </li></ul><ul><li>Diferentes tamaños de monit...
Además de los tiempos de entrega, los CMS, las versiones de IE, el jQuery, JavaScript, PHP, ASP, CSS (pánico!)
EL proceso de diseño web (en general) es el siguiente: PSD --> HTML/CSS
Tips de diseño web para el Photoshop
PSD Tip 1: Comenzar con un Canvas o lienzo de tamaño apropiado
PSD La idea es hacer que nuestra página muestre el contenido importante en la primera pantalla
PSD Minimizar la cantidad de scrolls verticales, y evitar las barras de scroll horizontal Barra de scroll horizontal … dia...
PSD Para ello podemos tomar como referencia el siguiente gráfico:
PSD Cantidad de píxeles estimada de ancho x largo que pueden ver los usuarios. Resolución visible Al menos X% de usuarios ...
PSD 960px de ancho es una medida de lienzo segura y cómoda para comenzar a diseñar para la web en photoshop
Tip 2: Capas/layer organizados PSD
PSD Las Capas o layers organizados Por lo general, los sitios web tienen una estructura común:
PSD Es por esto, que es buena idea comenzar con un documento en PSD que ya tenga todas estas capas organizadas en carpetas...
Tip 3: Lorem ipsum - El texto de ejemplo PSD
Textos de ejemplo: Por lo general nunca comenzamos con el texto final y debemos rellenar
PSD Mala idea número 1: texto de ejemplo No sigue una distribución regular Texto de ejemplo Texto de ejemplo Texto de ejem...
PSD
PSD Mala idea numero 2: texto random El lector se distrae con el texto Hola mi nombre es juan y esta es la página más boni...
PSD
PSD La solución: lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla orci ac mauris egestas...
PSD El punto de usar  Lorem Ipsum  es que tiene una distribución más o menos normal de las letras, al contrario de usar te...
PSD ejemplo
PSD ejemplo
PSD <ul><li>Recapitulando la sección sobre el PSD: </li></ul><ul><li>960px de ancho es una medida segura para trabajar en ...
Vamos con el CSS
CSS CSS es el lenguaje en el que esta basada la presentación de un documento web.
Esta es una página web con el CSS habilitado CSS
Esta es la misma página web pero con el CSS deshabilitado ...apesta right? CSS
<ul><li>Consideraciones: </li></ul><ul><li>Escribir un CSS desde 0 toma tiempo y si estas empezando más. </li></ul><ul><li...
Qué podemos hacer? CSS
Tip 1: Usar un framework de CSS CSS
<ul><li>Usar un framework de CSS </li></ul><ul><li>Ej.: El 960.gs </li></ul><ul><li>Consiste en una hoja en CSS que incluy...
Esta página está hecha con el 960.gs a 12 columnas CSS
Tip 2: Usar los resets de CSS CSS
<ul><li>Usar los resets de CSS: </li></ul>CSS Así sortearás las inconsistencias de estilo entre navegadores
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big,...
<ul><li>Recapitulando:   </li></ul><ul><li>Usar un framework para programar tus hojas de estilo te da una buena y aventaja...
<ul><li>Y ahora el HTML </li></ul>
Tip 1: comienza con un sitio organizado HTML
Comienza con un sitio organizado Nota: No es exactamente un tip de html pero si te ayudará a tener un código organizado. H...
Tip 2: utiliza los comentarios para enmarcar los segmentos de código HTML
<ul><li>Utiliza los comentarios de HTML para organizar tu código: </li></ul>HTML
<!-- BEGIN OF HEADER --> <div id=&quot;header&quot;>...</div> <!-- END OF HEADER --> Ejemplo: HTML
Tip 3: Valida tu código HTML
Prueba tu código en todos los navegadores que puedas y usa el validador de la w3c: http://validator.w3.org HTML
<ul><li>Herramientas para validar y probar tu código: </li></ul><ul><li>Validador de la W3C:  http://validator.w3.org/ </l...
<ul><li>Tener un código válido es fundamental para:  </li></ul><ul><li>Minimizar las inconsistencias entre navegadores </l...
<ul><li>Recapitulando: </li></ul><ul><li>Usar los comentarios HTML para organizar tu código es buena idea </li></ul><ul><l...
<ul><li>Algunos recursos consultados: </li></ul><ul><li>Webcanvas seguro:  http://ow.ly/1zVIa </li></ul><ul><li>Framework ...
<ul><li>Gracias!  </li></ul><ul><li>Preguntas / planteamientos / sugerencias / decir hola: </li></ul><ul><li>Twitter: @jua...
Upcoming SlideShare
Loading in …5
×

Presentacion

1,180 views

Published on

Tips para comenzar en diseño web.

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
1,180
On SlideShare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Presentacion

  1. 1. Diseño web – primeros pasos Diseñadores  Web
  2. 2. <ul><li>Aspectos a tomar en cuenta: </li></ul><ul><li>Diferentes navegadores </li></ul><ul><li>Diferentes tamaños de monitores. </li></ul><ul><li>Estándares, ah… y el SEO </li></ul>
  3. 3. Además de los tiempos de entrega, los CMS, las versiones de IE, el jQuery, JavaScript, PHP, ASP, CSS (pánico!)
  4. 4. EL proceso de diseño web (en general) es el siguiente: PSD --> HTML/CSS
  5. 5. Tips de diseño web para el Photoshop
  6. 6. PSD Tip 1: Comenzar con un Canvas o lienzo de tamaño apropiado
  7. 7. PSD La idea es hacer que nuestra página muestre el contenido importante en la primera pantalla
  8. 8. PSD Minimizar la cantidad de scrolls verticales, y evitar las barras de scroll horizontal Barra de scroll horizontal … diack XP
  9. 9. PSD Para ello podemos tomar como referencia el siguiente gráfico:
  10. 10. PSD Cantidad de píxeles estimada de ancho x largo que pueden ver los usuarios. Resolución visible Al menos X% de usuarios 760x420px 100% 960x600px 92% 1210x630px 50% 1370x730 11%
  11. 11. PSD 960px de ancho es una medida de lienzo segura y cómoda para comenzar a diseñar para la web en photoshop
  12. 12. Tip 2: Capas/layer organizados PSD
  13. 13. PSD Las Capas o layers organizados Por lo general, los sitios web tienen una estructura común:
  14. 14. PSD Es por esto, que es buena idea comenzar con un documento en PSD que ya tenga todas estas capas organizadas en carpetas, así será más sencillo ubicar y modificar ciertas capas ahorrando tiempo y esfuerzo
  15. 15. Tip 3: Lorem ipsum - El texto de ejemplo PSD
  16. 16. Textos de ejemplo: Por lo general nunca comenzamos con el texto final y debemos rellenar
  17. 17. PSD Mala idea número 1: texto de ejemplo No sigue una distribución regular Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto de ejemplo
  18. 18. PSD
  19. 19. PSD Mala idea numero 2: texto random El lector se distrae con el texto Hola mi nombre es juan y esta es la página más bonita que he cosechado Hola mi nombre es juan y esta es la página más bonita que he cosechado Hola mi nombre es juan y esta es la página más bonita que he cosechado Hola mi nombre es juan y esta es la página más bonita que he cosechado Hola mi nombre es juan y esta es la página más bonita que
  20. 20. PSD
  21. 21. PSD La solución: lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla orci ac mauris egestas tempor. Aliquam hendrerit tincidunt ante, eget adipiscing elit consequat vitae. Nulla vehicula neque adipiscing tortor posuere eu interdum nisi pretium. Nulla tincidunt rutrum felis eu dapibus. Nullam eros urna, condimentum ac scelerisque ac, iaculis sed dolor. Nulla non ultrices nisl. Curabitur eleifend nisl a sem volutpat rhoncus. Curabitur sed nisi ipsum. Suspendisse sed metus ipsum. Proin ornare pellentesque luctus. Nunc hend
  22. 22. PSD El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo &quot;Contenido aquí, contenido aquí&quot;.&quot;
  23. 23. PSD ejemplo
  24. 24. PSD ejemplo
  25. 25. PSD <ul><li>Recapitulando la sección sobre el PSD: </li></ul><ul><li>960px de ancho es una medida segura para trabajar en diseño web. </li></ul><ul><li>Trabajar con un lienzo con las capas organizadas es un excelente punto de partida </li></ul><ul><li>Usar el &quot;loremp ipsum&quot; como texto de relleno mantendrá al lector/cliente enfocado en el diseño haciendo más fácil obtener feedback. </li></ul>
  26. 26. Vamos con el CSS
  27. 27. CSS CSS es el lenguaje en el que esta basada la presentación de un documento web.
  28. 28. Esta es una página web con el CSS habilitado CSS
  29. 29. Esta es la misma página web pero con el CSS deshabilitado ...apesta right? CSS
  30. 30. <ul><li>Consideraciones: </li></ul><ul><li>Escribir un CSS desde 0 toma tiempo y si estas empezando más. </li></ul><ul><li>Internet Explorer (  must die!) </li></ul>CSS
  31. 31. Qué podemos hacer? CSS
  32. 32. Tip 1: Usar un framework de CSS CSS
  33. 33. <ul><li>Usar un framework de CSS </li></ul><ul><li>Ej.: El 960.gs </li></ul><ul><li>Consiste en una hoja en CSS que incluye una serie de estilos predeterminados para diagramar tu sitio en base a 12, 26 y 24 columnas a un ancho web fijo y seguro ( adivinen…960px) </li></ul>CSS
  34. 34. Esta página está hecha con el 960.gs a 12 columnas CSS
  35. 35. Tip 2: Usar los resets de CSS CSS
  36. 36. <ul><li>Usar los resets de CSS: </li></ul>CSS Así sortearás las inconsistencias de estilo entre navegadores
  37. 37. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } Algunos resets: CSS
  38. 38. <ul><li>Recapitulando: </li></ul><ul><li>Usar un framework para programar tus hojas de estilo te da una buena y aventajada posición para empezar en el diseño web </li></ul><ul><li>El 960 grid system es un framework que trabaja 960px de ancho y sirve para diagramar por css el sitio web siendo consistente entre navegadores </li></ul><ul><li>Dado que los valores por efecto varían de navegador a navegador usar los reset de CSS resuelve las inconsistencias y te da un punto de partida con menos preocupaciones. </li></ul>CSS
  39. 39. <ul><li>Y ahora el HTML </li></ul>
  40. 40. Tip 1: comienza con un sitio organizado HTML
  41. 41. Comienza con un sitio organizado Nota: No es exactamente un tip de html pero si te ayudará a tener un código organizado. HTML
  42. 42. Tip 2: utiliza los comentarios para enmarcar los segmentos de código HTML
  43. 43. <ul><li>Utiliza los comentarios de HTML para organizar tu código: </li></ul>HTML
  44. 44. <!-- BEGIN OF HEADER --> <div id=&quot;header&quot;>...</div> <!-- END OF HEADER --> Ejemplo: HTML
  45. 45. Tip 3: Valida tu código HTML
  46. 46. Prueba tu código en todos los navegadores que puedas y usa el validador de la w3c: http://validator.w3.org HTML
  47. 47. <ul><li>Herramientas para validar y probar tu código: </li></ul><ul><li>Validador de la W3C: http://validator.w3.org/ </li></ul><ul><li>Firebug (addon para firefox): http://getfirebug.com </li></ul><ul><li>Web developer bar (addon para firefox) https://addons.mozilla.org/en-US/firefox/addon/60 </li></ul>HTML
  48. 48. <ul><li>Tener un código válido es fundamental para: </li></ul><ul><li>Minimizar las inconsistencias entre navegadores </li></ul><ul><li>Por un error en el código es posible que los spiders de google no lean el contenido y tu pagina no sea indexada apropiadamente </li></ul><ul><li>Evitarás futuros dolores de cabeza cuando implementes código dinámico a tu sitio </li></ul>HTML
  49. 49. <ul><li>Recapitulando: </li></ul><ul><li>Usar los comentarios HTML para organizar tu código es buena idea </li></ul><ul><li>Un código válido permitirá que tu página sea indexada correctamente por los buscadores </li></ul><ul><li>Para validarla puedes usar la webdeveloper bar o bien el W3C validator. </li></ul>HTML
  50. 50. <ul><li>Algunos recursos consultados: </li></ul><ul><li>Webcanvas seguro: http://ow.ly/1zVIa </li></ul><ul><li>Framework de CSS: http://960.gs </li></ul><ul><li>Speed Up Your Design Processes While Reducing Errors: http://ow.ly/1zVHo </li></ul>
  51. 51. <ul><li>Gracias! </li></ul><ul><li>Preguntas / planteamientos / sugerencias / decir hola: </li></ul><ul><li>Twitter: @juanrules </li></ul><ul><li>Facebook: facebook.com/juanrules </li></ul><ul><li>Mail: [email_address] </li></ul><ul><li>Blog: juanrules.me </li></ul><ul><li>Trabajo: vmr.com.ve </li></ul>

×