extractCSS, proyecto de código libre para extraer el CSS de cualquier documento HTML

extract

Y vamos ahora a por un nuevo recurso para la categorí­a de Utilidades para diseñadores y programadores con extractcss.com, una aplicación que nos permite extraer la hoja de estilos de cualquier documento HTML que le indiquemos.

Solo tenemos que pegar el HTML deseado en el primer panel y seleccionar lo que queremos obtener del mismo. Permite extraer ids, clases y estilos, generando un .css que podemos utilizar posteriormente para adaptar el diseño a lo que tengamos en mente.

El proyecto es de código abierto, disponible en github para que sea posible navegar por sus entrañas. Lo divulgan en webresourcesdepot.com como la solución ideal para separar el css de un html en aquellos casos en los que no se separó inicialmente, algo extremadamente recomendable antes de comenzar cualquier diseño web moderno.

En febrero os listamos una serie de recursos útiles para trabajar con CSS, ideales para los que están aprendiendo a programar hojas de estilo. La mayorí­a de ellos están relacionados con la programación de páginas web viendo en tiempo real el efecto de las alteraciones realizadas, extractCSS puede ser una buena forma de «jugar» con pa´ginas web conocidas para alterar su diseño sin alterar su contenido.

Una buena idea para practicar y conocer mejor el mundillo del diseño web.

skwibl – Herramienta de colaboración entre diseñadores y clientes

skwibl

En los últimos meses hemos visto varias aplicaciones que ayudan a obtener el feedback de nuestros clientes, opiniones sobre nuestros trabajos escritas muchas veces por encima de la imagen que estamos compartiendo.

Skwibl (skwibl.com) es otra opción que no podí­amos dejar de mencionar, una plataforma que nos ayuda a colaborar en proyectos, comunicarnos en tiempo real con nuestros clientes, crear notas sobre áreas especí­ficas en las imágenes y monitorizar tareas incluidas.

Como veis, es más que un simple «te enví­o una imagen y comentas allí­ lo que quieras», es un proyecto que nos permite gestionar todas las tareas asignadas tanto a diseñadores como a clientes, permitiendo así­ ver el estado del trabajo como un todo.

Es posible también enviar ví­deos y permitir la creación de notas en cada frame del mismo, ideal para los proyectos de producción visual en los que se quieren discutir los detalles de todo el trabajo realizado.

Skwibl abrió sus puertas hace ya un año, con versión en inglés y un equipo de cinco profesionales dedicados a ayudar a agilizar el «va y viene» de tareas y opiniones entre clientes y profesionales. Desde entonces son pocas las novedades que han incluido en la herramienta, aunque no por eso dejaremos de visitar el proyecto para ver la evolución de la idea.

Map Icons – iconos especiales para incluir en nuestros mapas de Google

iconos

Para los desarrolladores y diseñadores que cuidan hasta el más mí­nimo detalle de sus aplicaciones existen muchas bases de datos de iconos de todo tipo. Aquí­ os hemos presentado miles de ellos durante los últimos años, pero hasta ahora no nos habí­amos topado con una colección especialmente diseñada para su uso en mapas.

Eso es lo que podéis encontrar en iconos map-icons.com, una fantástica colección especialmente diseñada para Google Maps, con las instrucciones necesarias para implantarlos, alterar su color y tamaño, modificar su posición, etc.

El recurso lo presentan en webresourcesdepot.com como una fuente de iconos para la API de Google Maps API y Google Places, aumentando las instrucciones de developers.google.com para permitir el uso de imágenes y svg.

Un buen recurso para darle más vida a los mapas integrados en nuestras aplicaciones.

Designdrop – Sube un diseño, copia la url y mándala al cliente para que haga comentarios

designAquí­ tenemos otra herramienta que los profesionales del diseño pueden utilizar para recibir el sagrado feedback de sus clientes.

Se trata de designdrop.io, una web bastante sencilla, aunque no menos práctica, que permite subir una imagen y obtener una url para comenzar la discusión de sus elementos.

Solo tenemos que subir o arrastrar el archivo sobre el que queremos debatir y, después de un registro que únicamente solicita email y nombre de usuario, copiar la url única en la que se encontrará el material.

Cuando enviemos dicha url a los clientes (podemos invitarles desde allí­ mismo), podrán seleccionar cualquier región de la imagen y realizar comentarios sobre la misma. Cada región seleccionada tendrá un número indicando la colección de comentarios. Nosotros, como creadores del trabajo, podremos responder allí­ mismo, teniendo de esta forma bien organizadas las discusiones relacionadas con cada sección, sin necesidad de capturas, presentaciones e infinidad de emails que van y vienen.

No es la única solución que vemos de este tipo, pero sí­ es una de las más sencillas de utilizar. No permite analizar el histórico ni tener un portafolio organizado de nuestros trabajos, no podemos comparar versiones ni subir más de un archivo por url, pero en muchas ocasiones no es necesario ese tipo de funcionalidades, solamente necesitamos que alguien opine sobre la imagen que estamos enviando.

Podéis ver un ejemplo aquí­: designdrop.io/SF90fRQ3T, donde he comenzado una discusión de una captura de WWWhatsnew.com

Tres formas de crear gifs animados desde la web

Si las herramientas existentes para crear gifs animados no os acaban de convencer y buscáis algo práctico, rápido y, si es posible, integrado en el navegador, echad un vistazo en esta extensión.

Se trata de MakeGif, creada para transformar ví­deos HTML5 en gifs animados. Solo tenemos que pulsar en el icono y comenzar a generar la animación a partir del ví­deo que estamos consultando en este momento. Es posible especificar el tamaño, los frames por segundo y el número máximo de frames capturados. Si queréis usarlo con Youtube, recordad que el ví­deo tiene que estar en formato HTML5.

makeagif.com también es una conocida opción que permite seleccionar imágenes, transformar un ví­deo de youtube a gif o capturar los frames con la webcam. Existe una galerí­a con algunos gif populares realizados con la herramienta, motivo por el cual durante la creación del gif solicita la categorí­a del mismo. Es posible establecer la velocidad de la animación y el tamaño del resultado.

gif

gifmake.com, por otro lado, es una web que nos permite subir imágenes desde nuestro ordenador, o importarlas desde otro sitio, para generar una animación utilizando la secuencia de fotos. Podemos alterar el tamaño del resultado, definir que haya un loop infinito en la animación y acelerar el resultado para que la transición entre las imágenes sea más rápida.

Y vosotros, ¿qué usáis para crear gifs?.

Fantásticos elementos de todo tipo para embellecer tu web (I)

En el siguiente listado encontraras una gran colección de diferentes recursos web de todo tipo, recopilados especialmente para proporcionar una ayuda a los diseñadores o desarrolladores dedicados al fantástico mundo del internet.

Creativos elementos gráficos:

Lo que necesitas para tus próximas presentaciones: maquetas, fondos, fuentes y demás.

Maqueta del iPhone 5: bonita maqueta en photoshop para el iPhone 5.

iPhone 5 Mockup PSD

Sombras largas: objeto inteligente de Photoshop para generar sombras largas a diferentes elementos.

Patrones oscuros: pequeña colección de patrones oscuros para tu sitio web.

patrones oscuros

Plantilla para logos: con este elemento de Photoshop podrás personalizar tu logo de una manera sencilla.

logo plantilla

Maqueta del Samsumg Galaxy S4: excelente maqueta en Photoshop del Samsumg Galaxy S4.

Maqueta del Samsumg Galaxy S4

Wanted: bonita fuente de texto al estilo del viejo oeste.

Wanted: fuente de texto

Maqueta de marca o identidad: útil set de elementos gráficos para el diseñador web.

Maqueta de marca o identidad

Formularios de registro: pequeña colección de 7 plantillas en PSD de formularios de registro.

Formularios de registro

Plantillas para el iPad: 3 diferentes maquetas súper útiles del iPad en PSD.

Plantillas para el iPad

Maqueta de marca en PSD: útil colección de elementos para mostrar tus últimos proyectos.

Maqueta de marca en PSD

Modernas GUI para desarrolladores y diseñadores:

Todo tipo de elementos para desarrollar de manera fácil tu próxima aplicación.

Marble GUI: colección de diferentes elementos útiles para tu web.

Marble GUI

Light GUI kit: pequeña y simple colección de elementos de interfaz para tu web.

Light GUI kit

GUI minimalista: excelente concepto de interfaz de usuario minimalista en archivo PSD.

GUI minimalista

99Lime UI: completo set de diferentes elementos minimalistas para la web.

99Lime UI

iPad GUI: kit de diferentes elementos de interfaz del iPad para diseñadores.

iPad GUI

Modern Touch UI: gran colección de elementos de interfaz con un estilo metro (win 8).

Modern Touch UI Kit

Android GUI: completo set de más de 1000 elementos de interfaz totalmente editable.

Android GUI

íconos de gran calidad:

Las siguientes son colecciones de í­conos creados siguiendo las últimas tendencias de la web.

Maki í­conos: completo paquete de 95 í­conos en SVG para utilizarlos en MapBox.

Iconos para mapas

Ultimate Icon: Gran set de í­conos con más de 1000 unidades totalmente gratis.

Ultimate Icon set

íconos de Adobe: pequeño set de 8 diferentes í­conos de adobe en PSD.

Set Iconos de Adobe

íconos Planos: hermoso conjunto de í­conos con un estilo plano en formato PSD.

Set de Iconos Planos

íconos SEO: kit de 12 diferentes í­conos SEO de estilo plano.

12 icons SEO

Kit de í­conos planos: pequeña pero bonita colección de 6 í­conos con un estilo moderno.

Kit de iconos planos

íconos redondos: moderno paquete de í­conos para las diferentes redes sociales.

Iconos redondos

Surfing í­cons: simple y bonita colección de 12 diferentes í­conos en PSD.

Iconos al estilo Surf

íconos de iOS 7: útil colección de 32 í­conos de barra para el iOS 7.

Iconos de iOS 7

íconos sociales: moderno set de í­conos sociales para tu sitio web.

Iconos sociales

íconos en CSS: increí­ble colección de í­conos creados totalmente en CSS.

Iconos en CSS

Plantillas web en variados formatos:

En la siguiente lista se podrá encontrar plantillas en PSD para tu inspiración, así­ mismo encontrarás plantillas en HTML y temas para WordPress.

BlueBox: moderna plantilla para sitio web de estilo plano en PSD.

BlueBox

Coorpin: útil portafolio para WordPress con un estilo minimalista.

portafolio para WordPress

Pronto: tema para WordPress con un diseño en grilla.

diseño en grilla

Celestino: limpio y creativo tema tipo portafolio para WordPress.

portafolio para WordPress

Carbon: plantilla web HTML + CSS adaptable a diferentes dispositivos.

plantilla web HTML + CSS

Pinball: plantilla para blog en PSD con un estilo de grilla y con versión responsiva.

plantilla para blog

Adapt: portafolio para WordPress totalmente responsivo.

portafolio para WordPress

Display: plantilla web en PSD con un estilo limpio y minimalista.

plantilla web en PSD

Impero: tema simple y minimalista para WordPress perfecto para restaurantes.

tema minimalista para WordPress

Pinbin: moderno tema para WordPress al mejor estilo de Pinterest.

moderno tema para WordPress

Skybox: elegante plantilla web multipropósito en archivo PSD.

plantilla web multipropósito

Creativos experimentos o complementos para tu web:

La lista de abajo contiene fragmentos de código y diferentes complementos pensados para embellecer la web.

Mason.js: plugin de jQuery para la creación de grillas perfectas con JavaScript.

plugin de jQuery

UI Transitions: plugin que nos permite crear y eliminar los í­tems de una lista con animación.

listas con animacion

Animaciones CSS3: excelente plugin con una colección de diferentes animaciones en CSS3.

Animaciones CSS

Cubo 3D: galerí­a de imágenes en un cubo 3D construido totalmente en CSS.

Cubo CSS 3D

Ficha de información: 7 bonitos efectos para mostrar información de un elemento.

Ficha de información

Flipswitch: generador online de interruptores con animación en puro CSS3.

Generador online de interruptores CSS3

Libros animados: excelente tutorial para crear la animación de un libro que se despliega al pasar el cursor sobre este.

Libros animados CSS3

Galerí­a de imágenes: útil galerí­a de imágenes construida en jQuery para exhibir tus fotos.

Galerí­a de imágenes

Furatto: moderno framework HTML y CSS perfecto para acelerar el desarrollo de páginas web.

Framework HTML y CSS

Efectos de scroll: útil colección de diferentes efectos de scroll para tu sitio web.

Efectos de scroll

Efectos de transición: asombrosa recopilación de diferentes efectos de animación en CSS + jQuery.

Efectos de transición

responsivewebcss nos ayuda a programar sitios web que se adapten a móviles y tabletas

css

Crear un sitio web que se adapte a las pantallas de nuestros dispositivos móviles ha dejado de ser un lujo para ser una necesidad. Aunque la mayorí­a de las webs consigue verse de forma decente en un tablet, no ocurre lo mismo con los móviles, por lo que se hace necesario incluir algunas funcionalidades (extensiones o caracterí­sticas na hoja de estilos) que permitan adaptar de forma dinámica el contenido que presentamos.

Si preferí­s tener algo de libertad en lo que a diseño se refiere, la mejor forma es programar la web pensando, desde su inicio, en el aspecto móvil, y para eso tenemos responsivewebcss.com, para que nos ayude en ese punto.

Se trata de una aplicación, presentada hoy en webresourcesdepot.com, que genera el código CSS necesario para poder comenzar a trabajar. Solicita los tamaños y la estructura base de nuestra web y permite bajar archivos html y css para que sean incluidos o adaptados dentro de nuestro diseño, ahorrando mucho tiempo en programación y diseño.

Ya que el resultado es html, tendremos que abrir el código e incluir los elementos dinámicos adecuados para transformarlo en php o cualquier otro lenguaje con el que estemos trabajando, aunque el tener el css ya creado es un paso que muchos agradecerán, tanto para trabajos profesionales definitivos como para los que estén practicando y estudiando diseño web.

Concept Inbox – Para aprobar nuestros diseños junto con nuestros clientes

conceptinbox

Seguimos concentrados en utilidades para los webdesigners y profesionales del diseño en general para hablar de conceptinbox.com.

Se trata de una aplicación web, disponible en español e inglés, que ayuda a agilizar el proceso de aprobación de los diseños por parte de los clientes. Podemos subir nuestros diseños y gestionarlos en la web, permitiendo compartirlos con los clientes y compañeros de forma sencilla para obtener el siempre necesario feedback. Para crear la cuenta no es necesario rellenar complejos formularios, simplemente tenemos que enviar nuestros primeros diseños por email a in@conceptinbox.com y ver cómo nuestro primer espacio ya es creado de forma automática.

Nuestro espacio de trabajo, el lugar en el que podemos guardar nuestros diseños, puede ser personalizado y protegido con contraseña. Es posible también alterar el orden de las imágenes con solo arrastrar el contenido, así­ como activar o desactivar los comentarios que los usuarios realicen sobre nuestros trabajos.

De momento existen dos opciones: la gratuita, con un lí­mite de 50 megas por cuenta, y la premium, con cuentas desde 1 Giga y un coste de 9 dólares mensuales, aunque puede probarse durante 14 dí­as sin compromiso. Esta segunda opción permite también almacenar proyectos, no solo imágenes, así­ como incluir fondos personalizados y proteger los proyectos con contraseña.

Florencia Espinasse, una de sus responsables, nos comenta que ya están trabajando en una nueva versión que verá la luz dentro de pocas semanas. Estaremos atentos y os informaremos sobre las novedades.