20 sitios para aprender CSS

El diseño web es mucho más complicado de lo que parece, y una de las formas correctas de hacerlo es usando Hojas de estilos o CSS. No es nada fácil poderse manejar con ellas, pero tenemos suerte de que existan multitud de sitios donde podremos encontrar buenos tutoriales, ayudas o incluso trozos de código que podremos usar en nuestro sitio. A continuación os listamos 20 de estos sitios.

  1. A list Apart. Un buen sitio que contiene multitud de artí­culos sobre CSS, así­ como tutoriales. Es uno de los sitios más longevos, ya que sus artí­culos datan desde 1999. Se centran mucho en el cumplimiento de los estándares.
  2. CSS Help Pile. Esta web está estructurada como si de un directorio se tratara. Está perfectamente organizado, ordenando los tutoriales por niveles, desde principiantes hasta expertos. Un buen sitio donde buscar ayuda.
  3. CSS Basic. Se trata de un perfecto libro de un uso básico de CSS dividido en 18 capí­tulos. Se puede leer tanto en la propia web como descargar el pdf para tenerlo siempre a mano y disponible. Altamente recomendable.
  4. Holly CSS Zeldman. Colección de guí­as, tutoriales e incluso libros, todo perfectamente ordenado. Existen diferentes categorí­as especializadas, como una muy interesante sobre web 2.0.
  5. Eric Meyer: CSS. Eric Meyer es un aclamado diseñador web que comparte en esta página todos sus conocimientos sobre las hojas de estilo. Siempre es bueno aprender de los grandes.
  6. 456 Berea Street ”“ CSS category. Multitud de artí­culos, sobre unos 300, hablando de todo lo hablable referente a las CSS, desde lo más sencillo hasta lo más complicado.
  7. /* Position Is Everything */. En esta web podremos ver los bugs o errores más comunes que podemos encontrar en cualquier sitio relacionados con diseño y css. Nos informará de cual es el error, como solucionarlo e incluso nos proporcionará algunos ejemplos.
  8. HTML Dog CSS Tutorials. Un lugar donde encontrar diferentes manuales y tutoriales de buenas prácticas a la hora de usar CSS y XHTML para que no solo nos quede todo bonito, si no que además cumpla los estándares más estrictos. 
  9. Learn CSS Positioning in Ten Steps. En tan solo 10 pasos podremos conocer los fundamentos más básicos a la hora de comenzar a usar CSS. Un buen sitio donde empezar si no tienes ni la más menor idea. Incluye ejemplos bastante ilustrativos.
  10. Andy Budd CSS/Web Standards Links. Andy Budd, un gurú en el mundo de las hojas de estilos, comparte algunas reseñas y enlaces a sitios donde podemos encontrar ayuda a la hora de afrontar un proyecto con esta tecnologí­a.
  11. W3CSchools CSS Tutorial. Página dividida en los diferentes elementos que podemos usar en CSS en la que tenemos varios ejemplos de cada uno de qué forma podemos usarlos.
  12. css Zen Garden. Usar CSS como un jardí­n de tranquilidad está a nuestro alcance gracias a esta web, donde nos muestra ejemplos de usar una misma plantilla HTML con diferentes CSS y ver como puede cambiar radicalmente el aspecto y la estética.
  13. CSS at MaxDesign. En esta página podrás encontrar diferentes tutoriales sobre diferentes conceptos, como Listmatic, para realizar listas de multitud de formas.
  14. CSSeasy.com. De una forma clara y sencilla nos proponen diferentes ejemplos que, tan sólo viendo el código fuente de cada uno, comprobaremos que no es tan difí­cil defenderse un poquito en este mundo del diseño web con CSS.
  15. CSS-Discuss. Comunidad donde se discutirá y compartirá conocimientos sobre CSS. Dispone de una estupenda wiki con multitud de ejemplos.
  16. Web Design from Scratch: CSS. De nuevo otra estupenda página donde empezar, ya que dispone de estupendos tutoriales para principiantes.
  17. CSS-Tricks. Blog donde de una forma periódica se irá colgando interesantes artí­culos sobre CSS, como tutoriales o noticias relacionadas con CSS.
  18. CSS en Delicious. Obviamente uno de los sitios donde no deberí­amos dejar de buscar es en Delicious, en el tag CSS, donde aparecerán muchas páginas guardadas por otros usuarios que contendrán mucha información y ayuda sobre este mundo.
  19. SitePoint CSS Reference. Aunque SitePoint es una página con más contenido, también encontramos una sección con referencias a CSS donde podremos encontrar mucha y útil información.
  20. CSSDog. Desde los más novatos hasta los más avanzados en todo lo relacionado con CSS podrán encontrar aquí­ lo que necesita. Una web muy amplia que nos puede servir de mucha ayuda.

Fuente: Six Revisions.

Edicy – Excelentes herramientas para crear un sitio web

Edicy es una interesante opción a la hora de elegir una plataforma para crear un sitio web.

Con bastantes herramientas que permiten incluir imágenes, textos y contenido rss con mucha facilidad, Edicy ha sido pensado para que usuarios sin mucha experiencia en el mundo web no tengan ningún problema para administrar el contenido de cada página creada.

Edicy se encuentra en varios idiomas, español incluido, y dispone de una presentación en nuestro idioma para que podáis compararlo con otros productos antes de recomendarlo a aquel conocido que necesita un sitio web en dos dí­as.

WetPaintPleaseTouch – Crear graffitis colaborativos

WetPaintPleaseTouch es el sueño de todo artista callejero digital. Se trata de una aplicación online que permite crear graffitis con diversas herramientas de pintura.

Desde sprays hasta pistolas o pinceles tenemos aquí­ una curiosa forma de ensuciar las paredes virtuales de esta web.

Todas las pinturas realizadas podrán ser guardadas en la galerí­a pública, permitiendo a otros artistas continuar trabajando en vuestro diseño.

Una herramienta interesante para llamar la atención del poderoso y famoso creador de Wikis que hay por detrás de ella: WetPaint.

Gracias Adrian por el enlace.

BlinkWeb – Otra aplicación para la creación de web

Ya hemos hablado últimamente de diferentes aplicaciones que nos facilitan la creación de una web sin necesidad de tener la menor idea de programación web, html, hojas de estilo ni nada que se le parezca.

En esta ocasión tenemos a BlinkWeb, un sitio para la creación de web, pero esta vez más orientado a la venta. Tras un rápido registro entramos ya en la creación de un nuevo sitio. Sorprende lo fácil que lo hace todo, no teniendo que utilizar ni una sola lí­nea de código, si no que todo funciona con la técnica de arrastrar y soltar. Eso sí­, me ha gustado que si tenemos un poco más de dominio de html o de css, tenemos la opción de escribir algo de código, lo cual se agradece para poder personalizarlo todo un poquito más. A destacar también que, si necesitamos ayuda, tenemos a una simpática señorita que nos va explicando como hacerlo todo, la cual se puede desactivar cuando queramos, claro.

Tenemos tres tipos de página, una para la venta de un producto, otro para contenido, y un tercero para la creación de un blog. Para cada una tenemos unas plantillas personalizadas, bastante atractivas y vistosas que en un solo click le dará a nuestra nueva web un aspecto profesional, divertido, educativo o lo que queramos.

La aplicación destaca por el gran número de funcionalidades que posee, desde el poder añadir diferentes elementos como formularios, botones, publicidad, libros de visitas o imágenes, incluso el poderlos editar cada uno de ellos, hasta la posibilidad de ir creando nuevas páginas para darle más dimensión al sitio.

Cuando hayamos acabado de maquetar y rellenar nuestra página, podremos publicarla, ya sea en un subdominio de BlinkWeb, en un dominio propio para darle más seriedad o incluso bajarnos el código para subirlo en nuestro hosting y tener el total control del mismo.

Sin lugar a dudas, de todos los que hemos analizado aquí­, éste resulta uno de los más completos y a la vez más sencillo, y con más posibilidades de personalizar.

Lunarr – Crea contenido por las dos caras de la web

He recibido una invitación para probar un muy curioso servicio: Lunarr.

Después de crear la cuenta aparece una página en blanco, con unos botones en la parte inferior que permiten subir cualquier tipo de documentos en ella. Los documentos pueden ser alterados varias veces, lunarr siempre guardará la historia de cada modificación para que puedan recuperarse versiones anteriores en caso de ser necesario.

Lo original de la aplicación es la posibilidad de «girar» la página web para poder enviar un email con el contenido de la misma por la parte trasera de la página. Algo difí­cil de explicar si no veis el ví­deo de demostración:

Como veis Lunarr aprovecha al máximo el espacio. Para qué conformarse con una cara de la web si pueden usarse las dos…

Knol – La unidad del conocimiento de google

Google no para de sacar dí­a a dí­a nuevas herramientas en su ya inmenso conjunto de aplicaciones online. Esta vez nos trae Knol, cuyo slogan es «a unit of knowledge», es decir, «una unidad del conocimiento».

¿Y qué significa ésto? Pues en resumidas cuentas, lo que google quiere intentar es que cada usuario pueda aportar conocimiento, información de aquello en lo que es experto, en aquellas temáticas que domine y que pueda compartir con el resto de los usuarios, siendo así­ una base de artí­culos en los que podamos apoyarnos para nuestras tareas cotidianas o profesionales.

Aspecto de Knol
Aspecto de Knol

¿Pero ésto no lo hace ya la wikipedia?

Se podrí­a decir que si, la wikipedia hoy en dí­a es un recurso al que todos accedemos para buscar cualquier tipo de información, sea cual sea, habiendo artí­culos de casi cualquier cosa. Pero hay una gran diferencia con respecto a knol. En la wikipedia, aunque todos podamos aportar nuestro conocimiento, hay unos editores, unos entes superiores que nos supervisan, que nos corrigen y que deciden qué está bien y qué está mal en esos conocimientos. No encontraréis dos artí­culos diferentes sobre un mismo tema, si no que todo está unificado en uno, con las consecuentes discusiones cuando se trata de temas tan controvertidos como puede ser la polí­tica.

Con Knol todo esto cambia, ya que cada uno escribe un artí­culo sobre el tema que quiera, y si quiero escribir otro en el que tengo una perspectiva completamente diferente, podré hacerlo, y ninguno estará por encima del otro, si no que ambos convivirán para que puedan ser consultados y que cada uno saque sus propias conclusiones.

Otra diferencia es que con nuestros artí­culos en knol podremos conseguir algún beneficio económico, ya que tendremos la opción de incluir nuestro código adsense en ellos. En cambio, en la wikipedia trabajamos totalmente gratis y de forma voluntaria.

Como conclusión, decir que es una herramienta totalmente alternativa y que puede convivir en perfecta armoní­a con la wikipedia, ya que mientras la wikipedia está más enfocada a ser una enciclopedia universal, knol intenta más ser un contenedor de diferentes artí­culos, como si de una revista cientí­fica se tratara.

La forma de funcionar es totalmente google, teniendo una usabilidad exquisita, y nada más entrar ya podemos saber casi a la perfección como funciona todo como si lleváramos toda la vida usándolo. Podemos acceder a un listado de los knol (así­ es como se conoce a cada artí­culo) que hemos escrito, así­ como editar nuestro perfil.

Hasta hace poco solo se podí­a acceder a knol mediante invitación, pero ya está abierto a todo aquel que tenga una cuenta google (¿quién no tiene una ya?).

Hurox – Crea y comparte en comunidad

De nuevo os presentamos un sitio para la creación de web, como ya hicimos hace unas entradas, pero con algunas diferencias.

Hurox está más enfocado a crear una web para que sea compartida con el resto de usuarios e interactuar con ellos. Es decir, refuerza más el concepto de red social que de un simple creador de webs.

Cuando nos logueamos en la aplicación, a la cual previamente habremos tenido que registrarnos, se nos presenta un completo panel de administración, con una apariencia similiar a la de casi cualquier escritorio de nuestro sistema operativo favorito, en el cual ya podemos empezar a juguetear.

Podemos subir cualquier cosa que tengamos en nuestro ordenador, mostrarlo en nuestra página personalizada y compartirlo, ver las estadí­sticas de nuestro sitio y saber cuantos usuarios han entrado. También podemos comprobar el nivel de popularidad del sitio y ver que opinan otros usuarios del mismo.

De entre los elementos que podemos subir están imágenes, videos, música e incluso e-books, y todo quedará perfectamente clasificado, podiendo navegar entre todo lo que tengamos.

Además, disponemos de la posibilidad de ganar algo de dinero, que nunca viene mal, con la publicidad que viene en nuestra página. Cuanto más atractivo sea nuestro sitio, cuantos más amigos tengamos, más ganaremos, así­ que os incita a contárselo a todos vuestros amigos.

El sistema tiene un juego de comunicación, como el poder mandar mensajes instantáneos o privados con tus amigos. Estos amigos tendrán que estar registrados también en Hurox para poder contactar con nosotros.

Está aún en fase beta y hay funcionalidades que se irán añadiendo a lo largo de la maduración del proyecto.

En definitiva, una alternativa más para aquellos que no quieran o no sepan programar de tener su información en la red.

Roxer – Tu página web en un momento

La gente que no se dedique a esto del mundo de la informática les para mucho su desconocimiento a la hora de decidirse a tener una página web. Aunque hoy en dí­a existen diferentes formas que facilitan la vida como wordpress o bloguer, a muchos se les sigue haciendo cuesta arriba todo lo que conlleva montarlo y tenerlo al dí­a.

Por eso me alegra mucho que existan aplicaciones web como Roxer, que hacen llegar todo este mundo de internet a cualquier persona que tenga un poco de interés.

Roxer es un servicio web que, sin necesidad de tirar ni una sola lí­nea de código, podemos montar en un momento una página web. Es realmente alucinante la facilidad y rapidez con lo que funciona todo, pero empecemos por el principio.

En primer lugar nos tenemos que registrar, obviamente, y en el registro nos pedirá un nombre para nuestra página. Esto es importante, ya que la url de nuestro nuevo sitio quedará nombreelegido.roxer.com, así­ que pensarlo bien. A parte de este dato, solo nos pedirá el correo electrónico y una contraseña, cosa que se agradece.

Una vez entramos, ya podemos empezar a tocar cosas, todo en modo gráfico, moviéndolo todo por la pantalla y situándolo donde queramos. Si nada más entrar estamos perdidos, podemos usar el wizard, que está en la barra inferior a la izquierda, donde podremos elegir entre insertar un objeto, cambiar el fondo o crear una nueva página.

Si elegimos esta última, podremos elegir entre diferentes plantillas, bastante interesantes, y ya seguir a partir de ellas, o bien usar una hoja en blanco si eres valiente. Hay para todos los gustos, desde una plantilla simple a una creada por nosotros mismos.

Si nos decidimos a elegir en el wizard la opción de añadir un objeto, tenemos la opción de añadir una gran diversidad de utilidades, desde una cuenta atrás para el próximo mundial de Brasil 2010, una barra lateral, un calendario de google e incluso un video de youtube o una sección para comentarios.

Además de todas estas ayudas, podemos interactuar con todos los elementos que tengamos en la página, cambiando el tamaño de las imágenes, modificando el texto y haciendo casi cualquier cosa que se nos ocurra.

Cuando ya estéis contento con el diseño de la página que no se os olvide guardar. Para ello lo que hay que hacer es cerrar el candadito que nos aparece en el menú inferior. Esto quizás sea el único fallo que le he encontrado a este servicio, ya que no es nada intuitivo.

Obviamente, no es lo mismo que tener el total control de nuestra página, pero es una estupenda herramienta tanto para, como deciamos al principio, aquellos usuarios que no tienen ninguna idea de programación, como para aquellos otros que necesitan hacer una página de buen aspecto, de forma rápida y sin ninguna complicación ni preocupación.

Jag.ag – Crear contenido para móviles

Jag.ag es una aplicación que dispone de un editor de texto ideal para crear contenido para teléfonos móviles.

Las páginas creadas pueden visualizarse en un teléfono simulado. Podréis añadir texto en diferentes tamaños, fondo y hasta tres imágenes para darle más color al asunto.

Bastante más limitado que Ubix pero más rápido y práctico para situaciones urgentes.

fuente: wmhn

Ubix – Crear sitios web para móviles

Excelente opción para crear desde cero una web destinada a ser leida desde teléfonos móviles.

Ubik ofrece una plataforma de creación de sites que permite elegir entre varios modelos disponibles. Cada modelo tiene unas caracterí­sticas diferentes: unos tienen más imágenes, otros más textos, etc.

Podréis editar el contenido del modelo elegido hasta que tenga el aspecto deseado, con vuestras fotos y vuestros textos, listo para ser divulgado.

El resultado podrá ser visto en forma de subdominio dentro de ubik, preparado para ser accedido desde cualquier modelo de teléfono con acceso a Internet.

Gracias Marta por el enlace.