Esta es una excelente recopilación hecha por Colorburned, se trata de 22 tutoriales de HTML5, CSS3 y jQuery, orientados a desarrolladores front-end. Ahora que el uso estas tecnologías se está haciendo cada vez más común, siempre es bueno contar con este tipo de utilidades que nos ayudarán a realizar un mejor trabajo.

En este listado encontraremos tutoriales para diferentes trabajos, por ejemplo, manejo de backgrounds, formularios, creación de grids sensibles (responsive design), menús de navegación etc. Como siempre, les dejo tres enlaces de esa lista:

1. Creando un layout sensible con Media Queries


2. Formulario de registro y login con HTML5 y CSS3


3. Menú estilo acordeón con CSS3


Enlace: 22 HTML5/CSS3/jQuery Tutorials for Frontend Web Developers

CSS Arrow Please, es una aplicación online que permite añadir flechas indicadoras a nuestras cajas de contenido, utilizando únicamente CSS (sin imágenes), ideal para tooltips.

Esta herramienta ofrece múltiples opciones de configuración (tamaño, posición, color y bordes), generando automáticamente el código CSS necesario.

Enlace: CSS Arrow Please

Colllor, es una aplicación web de uso gratuito (no requiere registrarse) que nos permite crear esquemas de color, a partir de uno determinado, obteniendo así, el tono de color más adecuado para nuestro uso.

Es fácil de usar, una vez dentro de la aplicación, ingresamos el color a examinar (valor hexadecimal o nombre en inglés) y la aplicación mostrará el valor exacto de los tonos más claros y oscuros del mismo.

Además, podremos explorar entre los matices, tonos, colores similares y mezclar colores para crear otros nuevos.

Enlace: Colllor

En todo diseño con contenido textual, la forma más común de rellenar los espacios de texto, es agregando el famoso contenido "Lorem Ipsum", pero, ¿no se aburren de usar siempre lo mismo?.

Web Resources Depot ha hecho una interesante recopilación. Se trata de 22 generadores online de textos Ipsum, pero no de "Lorem Ipsum", eso ya aburre, sino de diferentes tipos de contenido textual, como los diálogos del actor Samuel L. Jackson en las diferentes películas en las que actuó.

Aquí les dejo tres ejemplos de esos generadores:

1. Bacon Ipsum


2. Samuel L. Ipsum


3. Space Ipsum


Enlace: Got Bored Of Lorem Ipsum? 22 “Different” Alternatives For Placeholder Text

Gridpak es una aplicación web interactiva que permite generar layouts sensibles de forma simple y rápida.

Puedes configurar el ancho del grid, número de columnas, color de fondo de las columnas; y una vez que has configurado el grid, haces clic en Add break point para ver el resultado final, que también podrás descargar en un archivo comprimido que contiene lo siguiente:

• Un archivo CSS con todas las clases y propiedades que necesitas para crear el diseño sensible del grid.
• Un archivo LESS con la misma información, pero incluyendo variables, mixins y métodos para ayudarte.
• Un archivo de SCSS, como el archivo LESS, pero en SCSS.
• Una archivo PNG semitransparente para cada grid creado, esto ayudará mejor al diseño.
• Un archivo JavaScript que permite alternar una capa dentro y fuera del grid en cualquier navegador utilizando la tecla "G".

A continuación, les dejo un video demostrativo de esta interesante herramienta.



Enlace: Gridpak

Quizás muchos de ustedes se han topado con páginas como 9GAG o Cuanto Cabrón, bastante conocidas en la red por mostrar infinidad de viñetas y memes que cuentan historias graciosas a manera de cómic.

Algunos se preguntarán cómo hacen esas viñetas, en la red existen por ejemplo brushes para photoshop con muchos de los memes famosos (Yao Ming, Troll face, Forever alone, etc), pero para ahorrar todo ese trabajo de buscar los memes, descargarlos, montarlos en Photoshop, crear la viñeta y publicarla, existe Rage Maker, un completísimo editor de viñetas online que contiene la mayoría de memes famosos.

Como pueden ver en la imagen que inicia esta entrada, al lado izquierdo encontrarán todo el menú de memes disponibles, distribuidos en categorías que pueden filtrar en la lista desplegable ubicado sobre el menú, seleccionar los que deseas usar arrastrándolos hacia el lienzo del centro, también puedes ingresar texto, hacer trazos, incluso importar tus propias imágenes. Cuando hayas finalizado, puedes guardar la viñeta como imagen para luego publicarla en cualquier web, por ejemplo, las que mencioné en el párrafo inicial.

Enlace: Rage Maker
Fuente: Wwwhats New

Una de las preguntas más comunes entre los desarrolladores es: ¿Cuál es el mejor lenguaje de programación?. Dar con la respuesta correcta es complicado ya que cada lenguaje tiene su comunidad de incondicionales adeptos que siempre van a estar debatiendo sin cansancio para demostrar que tal o cual lenguaje es el mejor, confundiendo aún más a aquellos que se inician en este mundo de la programación.

En el campo del desarrollo web existen tres lenguajes que son los más populares: PHP, Python y Ruby, cada uno con lo suyo. En Udemy han elaborado una infografía mostrando cada una de las bondades de estos tres lenguajes, entre los que podemos apreciar: su usabilidad, los lenguajes en los que han sido influenciados y los sitios de internet más importantes que lo usan. Podemos ver por ejemplo, que Facebook está desarrollado en PHP, Twitter en Ruby y Google en Python.


Fuente: Genbeta Dev

3x4 Grid Builder es una aplicación web bastante útil que permite crear un grid HTML y CSS rápidamente. Posee un lienzo de 3 x 4 bloques, sólo bastará con arrastrar y soltar hacia el lienzo, los bloques dados a la derecha de éste.

Se puede crear, por ejemplo, un grid de dos columnas con encabezado y pie de página. Una vez terminado de crear el grid, hacemos clic en el botón Show me the code y nos mostrará el código HTML y CSS del diseño creado. Finalmente lo copias a tu editor HTML preferido y listo, ya tienes tu base para empezar a crear tu página.

Puedes consultar también la guía que muestra las 892 formas de dividir el grid, con video incluído.

Enlace: 3x4 Grid Builder

En la red hay disponibles una gran cantidad de frameworks para crear aplicaciones web móviles que pueden manejar casi cualquier situación. Para aplicaciones complejas, por lo general son la mejor opción. Sin embargo, para quienes están desarrollando una aplicación sencilla, que requiere las características de interfaz de usuario más estándar, Zoey puede ser una buena opción.

Zoey es un framework ligero potenciado en HTML5 y CSS3 para crear aplicaciones móviles sencillas, está desarrollada sobre Zepto.js y sólo pesa 6KB (comprimida). Dispone de componentes de interfaz de usuario como navegación, listas, botones, grupos de control, formularios y grillas.

Zoey es compatible con iOS y Android, y viene con una estructura que cubre todas sus características.

Enlace y Descarga: Zoey

iUI es un framework web para dispositivos móviles, que incluye las herremientas necesarias (librería JavaScript, CSS e imágenes) para el desarrollo de aplicaciones web móviles con tecnología táctil. Fue desarrollado en 2007 pensado en el iPhone (de ahí su nombre), pero actualmente es compatible con la mayoría de smartphones y tablets.

iUI tiene soporte para menús, formularios, listas, galerías de imágenes y mucho más. Además, están incluídas las extensiones para el almacenamiento en caché, obtener información del sistema, video HTML5 o cambiar el theme.

iUI está muy bien documentado e incluye tutoriales que ayudarán a utilizarlo con facilidad.

Enlace: iUI