Presentacion

Diseño web – primeros pasos Diseñadores  Web

Aspectos a tomar en cuenta:
Diferentes navegadores
Diferentes tamaños de monitores.
Estándares, ah… y el SEO

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 … diack XP

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 760x420px 100% 960x600px 92% 1210x630px 50% 1370x730 11%

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, así será más sencillo ubicar y modificar ciertas capas ahorrando tiempo y esfuerzo

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 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

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

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

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 "Contenido aquí, contenido aquí"."

PSD ejemplo

PSD
Recapitulando la sección sobre el PSD:
960px de ancho es una medida segura para trabajar en diseño 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 diseño haciendo más fácil obtener feedback.

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

Consideraciones:
Escribir un CSS desde 0 toma tiempo y si estas empezando más.
Internet Explorer (  must die!)
CSS

Qué podemos hacer? CSS

Tip 1: Usar un framework de CSS CSS

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 ( adivinen…960px)
CSS

Esta página está hecha con el 960.gs a 12 columnas CSS

Tip 2: Usar los resets de CSS CSS

Usar los resets de CSS:
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, 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

Recapitulando:
Usar un framework para programar tus hojas de estilo te da una buena y aventajada posición para empezar en el diseño 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 varían de navegador a navegador usar los reset de CSS resuelve las inconsistencias y te da un punto de partida con menos preocupaciones.
CSS

Y ahora el HTML

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. HTML

Tip 2: utiliza los comentarios para enmarcar los segmentos de código HTML

Utiliza los comentarios de HTML para organizar tu código:
HTML

<div id="header">...</div>  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

Herramientas para validar y probar tu código:
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

Tener un código válido es fundamental para:
Minimizar las inconsistencias entre navegadores
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
Evitarás futuros dolores de cabeza cuando implementes código dinámico a tu sitio
HTML

Recapitulando:
Usar los comentarios HTML para organizar tu código es buena idea
Un código válido permitirá que tu página sea indexada correctamente por los buscadores
Para validarla puedes usar la webdeveloper bar o bien el W3C validator.
HTML

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

Gracias!
Preguntas / planteamientos / sugerencias / decir hola:
Twitter: @juanrules
Facebook: facebook.com/juanrules
Mail: [email_address]
Blog: juanrules.me
Trabajo: vmr.com.ve

http://refreshsc.org.ve	25
http://www.slideshare.net	5
http://juanrules.me	3

Presentacion

by Juan Pernia (juanrules) on Apr 18, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 33

Statistics

Presentacion — Presentation Transcript