Samuel Reed ofrece esta animación en vivo de como el CSS da estructura a una página.
Internet presta tantos servicios actualmente que no tienes ni que salir de su casa para hacer las compras de la semana, entretenerte, trabajar o comer la comida de tu restaurante favorito. Y si lo que quieres es aprender, la web también ofrece información de todos los temas posibles.
Para aquellos que quieren educarse en el mundo de la tecnología, más específicamente para los que quieren aprender a programar, hay muchas formas de hacerlo. Pueden optar por usar un juego como CodeSpells para hacer la experiencia más divertida, tomar cursos gratuitos, o simplemente revisar el trabajo de los demás para buscar inspiración. Muchos desarrolladores liberan su trabajo bajo licencias open source para colaborar con la comunidad, y para hacerle más fácil del proceso de aprendizaje a otros. Actualmente hay una nueva e interesante tendencia de crear animaciones con sitios web que se programan a si mismos en tiempo real para mostrar al espectador cómo se obtuvo el diseño final.
STRML
Samuel Reed, un desarrollador de sitios web interactivos, decidió crear justamente esto: una web llamada STRML.net que se programa en tiempo real en frente de nuestros ojos, de manera que podamos ver cómo es la estructura que debe llevar un archivo de CSS.
Apenas abrimos el sitio, el desarrollador comenzará a escribir código en vivo y la estructura de la web va cambiando con cada linea de CSS, además estará comentando acerca del código que escribe y para qué sirve cada función.
La animación pasa rápidamente pero en la parte de abajo hay un par de botones donde se puede pausar para leer lo que ha agregado en las últimas líneas y poder entender mejor. El otro botón elimina toda la animación y te lleva al final de la misma para saber cuál es el resultado final. También puedes ingresar tu mismo cambios al código si quieres añadir algo o jugar con el resultado. Finalmente, Reed ha dejado en github todo el código fuente a nuestra disposición y ha liberado el proyecto bajo una licencia abierta.
Imagen de portada: DEGUI Adil – Shutterstock
