1. Diseo web primeros pasos DiseadoresWeb

2.

Aspectos a tomar en cuenta:

Diferentes navegadores

Diferentes tamaos de monitores.

Estndares, ah y el SEO

3. Adems de los tiempos de entrega, los CMS, las versiones de IE, el jQuery, JavaScript, PHP, ASP, CSS (pnico!) 4. EL proceso de diseo web (en general) es el siguiente: PSD --> HTML/CSS 5. Tips de diseo web para el Photoshop 6. PSD Tip 1: Comenzar con un Canvas o lienzo de tamao apropiado 7. PSD La idea es hacer que nuestra pgina muestre el contenido importante en la primera pantalla 8. PSD Minimizar la cantidad de scrolls verticales, y evitar las barras de scroll horizontal Barra de scroll horizontal diack XP 9. PSD Para ello podemos tomar como referencia el siguiente grfico: 10. PSD Cantidad de pxeles estimada de ancho x largo que pueden ver los usuarios. Resolucin visible Al menos X% de usuarios 760x420px 100% 960x600px 92% 1210x630px 50% 1370x730 11% 11. PSD 960px de ancho es una medida de lienzo segura y cmoda para comenzar a disear para la web en photoshop 12. Tip 2: Capas/layer organizados PSD 13. PSD Las Capas o layers organizados Por lo general, los sitios web tienen una estructura comn: 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 ms sencillo ubicar y modificar ciertas capas ahorrando tiempo y esfuerzo 15. Tip 3: Lorem ipsum - El texto de ejemplo PSD 16. Textos de ejemplo: Por lo general nunca comenzamos con el texto final y debemos rellenar 17. PSD Mala idea nmero 1: texto de ejemplo No sigue una distribucin 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. PSD 19. PSD Mala idea numero 2: texto random El lector se distrae con el texto Hola mi nombre es juan y esta es la pgina ms bonita que he cosechado Hola mi nombre es juan y esta es la pgina ms bonita que he cosechado Hola mi nombre es juan y esta es la pgina ms bonita que he cosechado Hola mi nombre es juan y esta es la pgina ms bonita que he cosechado Hola mi nombre es juan y esta es la pgina ms bonita que 20. PSD 21. PSD La solucin: 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. PSD El punto de usarLorem Ipsumes que tiene una distribucin ms o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aqu, contenido aqu"." 23. PSD ejemplo 24. PSD ejemplo 25. PSD

Recapitulando la seccin sobre el PSD:

960px de ancho es una medida segura para trabajar en diseo web.

Trabajar con un lienzo con las capas organizadas es un excelente punto de partida

Usar el "loremp ipsum" como texto de relleno mantendr al lector/cliente enfocado en el diseo haciendo ms fcil obtener feedback.

26. Vamos con el CSS 27. CSS CSS es el lenguaje en el que esta basada la presentacin de un documento web. 28. Esta es una pgina web con el CSS habilitado CSS 29. Esta es la misma pgina web pero con el CSS deshabilitado ...apesta right? CSS 30.

Consideraciones:

Escribir un CSS desde 0 toma tiempo y si estas empezando ms.

Internet Explorer ( must die!)

CSS 31. Qu podemos hacer? CSS 32. Tip 1: Usar un framework de CSS CSS 33.

Usar un framework de CSS

Ej.: El 960.gs

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 ( adivinen960px)

CSS 34. Esta pgina est hecha con el 960.gs a 12 columnas CSS 35. Tip 2: Usar los resets de CSS CSS 36.

Usar los resets de CSS:

CSS As sortears las inconsistencias de estilo entre navegadores 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.

Recapitulando:

Usar un framework para programar tus hojas de estilo te da una buena y aventajada posicin para empezar en el diseo web

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

Dado que los valores por efecto varan de navegador a navegador usar los reset de CSS resuelve las inconsistencias y te da un punto de partida con menos preocupaciones.

CSS 39.

Y ahora el HTML

40. Tip 1: comienza con un sitio organizado HTML 41. Comienza con un sitio organizado Nota: No es exactamente un tip de html pero si te ayudar a tener un cdigo organizado. HTML 42. Tip 2: utiliza los comentarios para enmarcar los segmentos de cdigo HTML 43.

Utiliza los comentarios de HTML para organizar tu cdigo:

HTML 44.

...

Ejemplo: HTML 45. Tip 3: Valida tu cdigo HTML 46. Prueba tu cdigo en todos los navegadores que puedas y usa el validador de la w3c: http://validator.w3.org HTML 47.

Herramientas para validar y probar tu cdigo:

Validador de la W3C:http://validator.w3.org/

Firebug (addon para firefox):http://getfirebug.com

Web developer bar (addon para firefox)https://addons.mozilla.org/en-US/firefox/addon/60

HTML 48.

Tener un cdigo vlido es fundamental para:

Minimizar las inconsistencias entre navegadores

Por un error en el cdigo es posible que los spiders de google no lean el contenido y tu pagina no sea indexada apropiadamente

Evitars futuros dolores de cabeza cuando implementes cdigo dinmico a tu sitio

HTML 49.

Recapitulando:

Usar los comentarios HTML para organizar tu cdigo es buena idea

Un cdigo vlido permitir que tu pgina sea indexada correctamente por los buscadores

Para validarla puedes usar la webdeveloper bar o bien el W3C validator.

HTML 50.

Algunos recursos consultados:

Webcanvas seguro:http://ow.ly/1zVIa

Framework de CSS:http://960.gs

Speed Up Your Design Processes While Reducing Errors:http://ow.ly/1zVHo

51.

Gracias!

Preguntas / planteamientos / sugerencias / decir hola:

Twitter: @juanrules

Facebook: facebook.com/juanrules

Mail:[email_address]

Blog: juanrules.me

Trabajo: vmr.com.ve