Archivos de la Categoría: CSS

Las hojas de estilo se están convirtiendo en el verdadero arma para crear en la red sitios web interesantes y bien diseñados. Sitios web con diseños CSS vanguardistas, lugares con tutoriales, recursos o listas de sitios CSS entran en esta categoría.

Cómo crear un visor de imágenes con CSS3

En este artículo vamos a crear un visor de imágenes en únicamente con CSS3 inspirado en el trabajo de Vladimir Kudinov en Futurico User Interface. Las características de CSS que utilizaremos en este artículo han sido probadas en los navegadores más recientes por que el visor no funcionará en todos los navegadores (prueba con Chrome y Safari). No es recomendable utilizarlo en proyectos profesionales porque no funcionará para todos los usuarios. Utiliza el contenido de este artículo para practicar con las características de CSS3 que podrás utilizar cuando esté realmente disponible en un futuro próximo.

leer más »

Code Racer: aprende a programar sitios web jugando

En Internet existen multitud de opciones que pretenden enseñar programación por medio de juegos, especialmente orientadas a niños, pero Code Racer se mueve en otra categoría. Y es que en este caso, estamos ante un juego en línea donde tendremos que enfrentarnos a otros usuarios en carreras de escribir código, como si se tratase de un frenético juego de carreras para adictos a la tecnología.

Una idea ingeniosa y que cumple perfectamente con su cometido de enseñar al tiempo que divierte, aunque quizás con la emoción del momento algunas cosas no se queden muy grabadas. El juego requiere tener cuenta en Facebook para acceder (quizá un hecho que eche para atrás a algunos usuarios), y permite adentrarnos en lenguajes orientados a la web como HTML, CSS y JavaScript.

La simpática iniciativa se la debemos a Treehouse, una joven empresa que ha desarrollado distintas soluciones para enseñar diseño y desarrollo web. La verdad es que con propuestas así o como Code Year, el que no aprende algo de código (al menos a un nivel muy básico) es porque no quiere. ¡Anímate, juega y aprende!

Enlace:
Code Racer – Battle it out and learn the code

Vía:
Genbeta – Con Code Racer aprender a programar es un juego, y muy adictivo 

Ajustar imágenes automáticamente según la resolución

Todos los diseñadores web hemos intentado, en un momento u otro, crear un sitio flexible donde las imágenes se ajusten de forma automática según la resolución del dispositivo del usuario. Para solucionar este problema tenemos diferentes opciones, siendo una de las más versátiles la que nos ofrecen en Adaptative Images in HTML. Utilizando JavaScript, PHP y la biblioteca GD lib, las imágenes de nuestro sitio web serán ajustadas según la resolución de pantalla de nuestro visitante.

El método es muy sencillo de implementar pero tiene la pega de que requiere tener activado JavaScript por parte del usuario en su navegador. De no ser así, se nos ofrece una solución alternativa, que aunque no funciona correctamente en la primera visita, sí lo hace en las subsiguientes.

La única pega, es que el sitio web se encuentra completamente en inglés, aunque es realmente sencillo de entender.

Más información:
Adaptative Images in HTML 

Adobe Muse: diseña sitios web sin escribir código

Hace unos días Adobe dio a conocer Muse, una nueva aplicación destinada a aquellos que quieren diseñar webs, pero no quiere aprender a escribir código. Esto, que para muchos sonará casi una aberración, quiere servir de ayuda a aquellos diseñadores que se imaginan una web, pero no saben cómo hacerla realidad. Al menos, así quieren verlo desde Adobe:

“Lo que hemos visto es que las herramientas que están disponibles para que los diseñadores creen experiencias digitales requieren saber código. Pero la mayoría de los diseñadores o no lo quieren o no están interesados en aprenderlo o lo han hecho y no es la manera en que funciona su mente. Lo que nos dicen es que quisieran diseñar una web tan fácilmente como trabajan con InDesign, Illustrator o Photoshop”. Jane Brady, Senior Marketing Manager.

Muse, que funciona en AIR, utiliza las clásicas herramientas del software de Adobe y le añade otras destinadas a las zonas básicas de una web en forma WYSIWYG. Todo el proceso de trabajo está integrado en el resto de aplicaciones de la suite de Adobe y, mientras, es el propio Muse el que se encarga de crear el código necesario para hacerlo funcionar.

Más información:
Genbeta – Adobe lanza Muse, herramienta para crear de páginas web sin escribir código
Sitio oficial de Adobe Muse (inglés)

Sitios estrambóticos donde perder el tiempo con estilo

Las modernas tecnologías de construcción de sitios web permiten a los diseñadores dar rienda suelta a su más arriesgadas y creativas ideas. Un proceso interactivo mejorado y una apariencia visual destacable pueden conseguirse con herramientas como Flash, JavaScript y PaperVision3D, por nombrar unas pocas. Éstas tecnologías generalmente impresionan y entretienen a los visitantes y además suelen ser utilizadas por artistas conceptuales para presentaciones artísticas y campañas publicitarias.

En esta entrada de Smashing Magazine titulada Bizarre Websites On Which You Can Kill Time With Style encontrarás una colección de sitios impresionantes, que combiando ideas poco convencionales (y en ocasiones estrambóticas) y un uso inteligente de efectos en JavaScript y Flash, te atraerán para jugar con ellas hasta perder un tiempo muy valioso.