Aprendiendo CSS

26Ene09

Si has estado pensando en aprender CSS pero te has perdido en los innumerables tutoriales de CSS que existen, tal vez quieras seguir leyendo. He recopilado mis sitios favoritos relacionados con CSS que específicamente ayudan a novatos con los conceptos esenciales. Muchos de mis conocimientos los he obtenido de la información dada en estos sitios, y uso la mayoría de estas herramientas diariamente. Definitivamente no me considero un experto en CSS, pero aún sería un novato confundido si no fuera por el esfuerzo de muchos que han compartido su conocimiento y talento. Es tiempo de pasarte esos conocimientos.

 

1. Mantén esto a mano.

Marca esta página [link] para que puedas regresar después, o pásala a alguien que sabes que podría estar batallando para aprender CSS. Entonces marca y etiqueta cada uno de los sitios listados más abajo, usando etiquetas tales como, CSS, tutorial, recurso, etc., para que tú y otros se puedan beneficiar.

 

2. Usa el explorador adecuado.

Lo primero que necesitarás es Firefox. Si pretendes llevar a cabo el desarrollo de alguna página Web, deberías usar Firefox como tu explorador predeterminado. Claro que puedes probar tus sitios en otros exploradores, pero Firefox es definitivamente el apropiado durante el proceso de desarrollo. ¿Por qué? Es muy dócil en cuanto a los estándares de la Web, y puedes añadir complementos para ayudarte. Si aún no lo tienes en tu computadora, bájalo e instálalo ahora.

 

3. Hoja de Propiedades

Antes de que hagas cualquier cosa, abre, guarda e imprime la siguiente hoja de propiedades para que puedas tenerla a mano todo el tiempo.

La hoja de Added Bytes [link] es muy útil para aquellos que sólo necesitan un recordatorio.

 

4. Herramientas de depuración de CSS

Ahora, baja algunas herramientas para Firefox que harán que depurar CSS sea mucho más fácil.

Web Developer Toolbar [link] es una herramienta que debes tener. Es útil por más de 100 razones, pero para el propósito de este post, lo necesitarás para editar en vivo las CSS de la página actual. Hablaremos de eso después, por ahora, sólo agrégalo a Firefox.

CSSViewer [link] hace muy fácil y claro ver las propiedades CSS de cualquier elemento en una página. Añádelo a Firefox ahora. Nota que una vez que lo instalas, necesitarás hacer clic en Ver/Barras de Herramientas/Personalizar, encontrar el icono de CSSView en la lista, y arrastrarlo a tu barra de herramientas, para poder tener acceso a él fácilmente cuando quieras.

CSS Debug Toggle Bookmarklet [link] te deja ver la estructura completa de una página con un click. Arrastra el marcador (bookmarklet) a tu barra de marcadores.
Nota que hay muchos links de marcadores en esa página. Busca el link de CSS Debug Toggle en la sección “Segunda Actualización” (Second Update: section).

 

5. Tutoriales CSS

Ahora que has impreso la hoja de propiedades de CSS y tienes tus herramientas de depuración de CSS, estás listo para empezar a aprender. Recomiendo que uses los siguientes tutoriales en el orden listado.

W3Schools CSS Introduction [link] es el tutorial clásico con el que todos deberían empezar, y marcar para futuras referencias. Es genial para obtener los aspectos de alto nivel de manera fácil, pero los 2 siguientes, en mi opinión, son mejores en cuanto a aprendizaje basado en la experiencia.

Selectutorial’s CSS Select ors tutorial [link] es muy bueno para conceptualizar visualmente lo que pasa cuando completas cada paso.

CSS Basics [link] es la referencia que he encontrado más fácil de entender. Viene con un archivo PDF para que puedas descargarlo, así como con una versión imprimible.

 

6. Entendiendo el modelo de caja CSS

Brainjar’s explanation [link] hace el concepto de modelo de caja muy entendible.

The 3D CSS Box Model [link] y The Interactive 3D CSS Box Model Demo [link] son herramientas muy útiles para entender visualmente el modelo de caja CSS.

 

7. Layouts CSS: Plantillas y Generadores

En este punto, ya estás listo para empezar a experimentar por ti mismo, así que ahora es tiempo de que conozcas las plantillas de CSS y los generadores de layouts. Una de las mejores formas de aprender CSS es ver layouts y estudiar sus códigos. Aquí están mis favoritos:

168 CSS Layouts [link] te da mucho de dónde escoger. Baja algunos y estudia el código.

Otra opción es usar un generador para ayudarte a crear layouts. Los generadores te dan la oportunidad de diseñar tu layout a tu gusto fácilmente. Una vez que bajes tu layout resultante, estudia el código. Aquí están los generadores que más me gustan:

CSS Creator Css Layout Generator [link] es rápido y fácil de usar (especialmente si lees, de verdad, las instrucciones).

YAML Builder [link] es un generador que he revisado [link]

 

8. Depurando CSS

Ya he escrito sobre las herramientas que necesitarás para depurar CSS antes en este post, pero quería enlazar algunos tutoriales de depuración que te ayudarán cuando estás tratando de descubrir por qué tu código no está haciendo lo que piensas que debería hacer.

Duke Listens – Debugging CSS [link] te ayuda a entender como usar el complemento Web Developer de Firefox que bajaste anteriormente (limita la discusión a solo un par de sus muchas funciones).

Debugging CSS, The Easy Way [link] termina con el proceso de depuración para que puedas rastrear exactamente dónde está el problema – lo que es el primer paso para determinar qué está mal.

Debugging CSS [link] describe el proceso de depuración en pasos fáciles de entender.

 

9. CSS, diferentes exploradores e IE especialmente

Obviamente, hay diferentes exploradores del mundo, así que necesitarás probar tus páginas en, al menos, los más populares. Puedes instalar cada explorador en tu computadora si así lo quieres, y probarlo de esa manera, o puedes usar un servicio que haga las pruebas por ti. Para esto recomiendo Browsershots [link] Aunque tengas la opción de revisar tu sitio en diferentes exploradores y versiones, no recomiendo que lo hagas en muchos, ya que tomará mucho tiempo, y realmente no vale la pena. Usualmente reviso las versiones de Windows de Firefox 2 y versiones superiores, IE 6 y superiores, y las últimas versionas de Opera y Safari, además de la última versión de Safari para Mac.

Finalmente, hablaremos de IE.
IE no sigue las mismas reglas que la mayoría de los exploradores, así que frecuentemente encontrarás problemas de CSS en IE. Afortunadamente, otros ya han encontrado los problemas, y han escrito acerca de cómo lidiar con ellos. Algunos recursos se encuentran listados a continuación:

Explorer Exposed [link] lista los problemas más comunes con ajustes y soluciones para lidiar con ellos.

WebCredible’s IE CSS Issues [link] lista 5 de los problemas más comunes con solución para cada uno.

IE CSS Bug Fixes [link] lista unos cuantos problemas con los que puedes encontrarte.

Debugging CSS in Internet Explorer [link] tiene algunos tips para resolver problemas.

IE CSS Bugs That’ll Get You Every Time [link] da más tips para lidiar con problemas en IE.

Y finalmente, How To Create an IE Only Stylesheet [link] te muestra cómo crear plantillas exclusivas de IE.

¡Eso es todo! Buena suerte en tu misión de dominar CSS.

 


Traducido por ~betrealmadrid para noticiasda | Revisado por =disalicia | Link Original: Taking the Plunge: Learning CSS | Publicado originalmente en noticias.deviantart.com



No Responses Yet to “Aprendiendo CSS”

  1. Dejar un comentario

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: