• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Presentacion
 

Presentacion

on

  • 1,508 views

Tips para comenzar en diseño web.

Tips para comenzar en diseño web.

Statistics

Views

Total Views
1,508
Views on SlideShare
1,474
Embed Views
34

Actions

Likes
0
Downloads
9
Comments
0

4 Embeds 34

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

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

    Presentacion Presentacion Presentation Transcript

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