Como introducirse al diseño web – Parte II

El usar CSS es un metodo muy usado hoy dia, ademas que permite dar el formato a un documento HTML de maneera mas controlada. Aunque, siendo realistas hay que decir que si tiene su curva de aprendizaje. Sin embargo una vez que empiezas a comprender como funciona, puedes empezar a ver el codigo de otras pagina y aprender por ejemplos practicos. Esta es la forma en la que he encontrado muchas aplicaciones muy creativas de CSS que luego utilizarlo en algun sitio.

En lo personal les voy a recomendar un addon de firefox es el WEB DEVELOPER 1.1.6, con este plugin puedes hacer click derecho sobre paginas web para que puedas ver su codigo HTML y mas importante su CSS y el arreglo que DIVs que usaron para armar el sitio.

Web Developer 1.1.6 un complemento (addon) para Firefox

Este addon creado por Chris Pederick es muy util, ya que sirve tanto para expertos como para novatos ya que al poder ver en otras ventanas la part tecnica de un diseño web te da nuevas ideas y te sirve como herramienta de aprendizaje. Podras descargarlo aqui Descargar Web Developer 1.1.6 para Firefox

Web Developer 1.1.6

Web Developer 1.1.6

Como usar Web Developer para aprender CSS

Pues es muy sencillo, abres una pagina web que tenga algun CSS que desees saber como lo lograron y seleccionas.
WEB DEVELOPER > CSS > VIEW CSS (con esto abres el CSS adjunto al archivo)
o
WEB DEVELOPER > CSS > VIEW STYLE INFORMATION Esta es la verdadera hermosura de este addon, ya que te permitira ver el acomodo de DIVs para que luego lo compares con el CSS adjunto y con ello podras darte idea de como estrucutraron el sitio. Estructurar un sitio es a veces la tarea mas dificil y tal vez lo hayan intentado con tablas de HTML. con DIVs y CSS es mas facil, aun asi es bueno que tomen nota de como otros lo logran.

Muy bien ¿y ahora donde veo sitios con buen CSS?

Pues si ya instalaron el Web Developer 1.1.6 es tiempo de navegar por sitios con CSS, abrir tu editor de HTML y hacer muchas pruebas. (muchas, ya que la practica sera lo mejor)
He aqui un sitio donde pueden ver varias paginas web con un buen diseño en CSS para que aprendan viendo ejemplos.
http://cssmania.com
css_mania1

Otros articulos relacionados con Introduccion al diseño

https://sdgestudio.wordpress.com/2008/09/29/como-introducirse-al-diseno-web-parte-i/

Acerca de Emmanuel Vargas @sdgestudio

Graphic Designer currently working with user interface for web applications using dojo toolkit, jQuery in a java environment. Photographer interested in portrait, experimental and photo-journalism for social events. www.sdgestudio.com you can find me in G+

Un Comentario

  1. Pingback: Como introducirse al diseño web – Parte III « sdgestudio.wordpress.com

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: