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.

Marqueed, la solución web perfecta para discutir diseños entre varias personas

marqueed

Mucho ha llovido desde que os presentamos Marqueed (marqueed.com) hace ya más de un año. Por entonces era una herramienta bastante sencilla que permití­a subir una imagen a la web y crear un chat en algunos de sus puntos para que varias personas puedan discutir posibles cambios. Hoy, con la misma filosofí­a en mente, puede presentarse como una plataforma de colaboración bastante completa en este sentido.

El funcionamiento es sencillo, solo tenemos que seleccionar las imágenes que queremos discutir con colaboradores o clientes e invitar al grupo de trabajo. Cada uno podrá escribir y dibujar sobre el material, manteniendo siempre un registro de todas las alteraciones.

Además de permitir subir un grupo de imágenes, diseños, capturas o fotografí­as y añadir colaboradores, que serán invitados ví­a email, es posible capturar páginas web indicando sus urls, discutir capturas de pantalla, seleccionar páginas con su bookmarklet, ver el histórico de los comentarios realizados en cada región de cada imagen por cada miembro del equipo, recibir alertas cada vez que alguien realice alguna observación en nuestro material, integrar la aplicación con Google Drive (ya están trabajando con Dropbox), usar etiquetas para clasificar y marcar el contenido, dar invitaciones para que algunas personas solo tengan acceso de visualización (sin permitir comentar ni editar) y personalizar nuestra marca en la página de trabajo.

La solución es gratuita para quien use hasta 2 colecciones privadas, siendo ilimitado el número de colecciones públicas que pueden crearse. Podéis encontrar los precios y condiciones en www.marqueed.com/pricing.

typewonder, para probar tipos de letra en sitios web antes de alterar su CSS

typewonder

Si estáis diseñando una web o realizando cambios en vuestro sitio y una de las prioridades es cambiar su tipografí­a, typewonder (typewonder.com) puede ayudar mucho con una aplicación sencilla y práctica.

Se trata de una herramienta que permite visualizar cómo quedarí­a cualquier página web si usamos algún tipo de letra de las disponibles en Google Fonts. Solo tenemos que informar la url y seleccionar la tipografí­a deseada, typewonder se encargará de mostrar el resultado sin necesidad de haber tocado una sola linea de código.

El resultado puede compartirse (enviarse a los clientes para que opinen, por ejemplo) e incluye un botón para que sea sencillo obtener el código que tendremos que alterar en el archivo css para aplicar los cambios deseados.

Esta aplicación, junto a BestWebFonts, es esencial para ahorrar tiempo a la hora de hacer pruebas, aunque le falta algo de flexibilidad para poder definir mejor qué parte del sitio web queremos alterar.

Es gratuita, aunque ofrecen un botón de donaciones en la parte inferior derecha de su página principal para poder obtener algunos ingresos de los profesionales que decidan hacer uso del servicio.

flatsies – Para compartir diseños con nuestros clientes

flatsi

No es la primera ni será la última herramienta que comentamos con el mismo objetivo: compartir los trabajos realizados con nuestros clientes para evitar adjuntos en emails dispersos.

En el caso de flatsi.es tenemos una aplicación, disponible por invitación, que permite divulgar en una única url todas las capturas con los diseños que hemos realizado (sea un logotipo, páginas web, panfletos, etc.). El cliente recibirá la url y podrá navegar por las imágenes enviadas dentro de un sitio preparado para cualquier tipo de dispositivo (móvil, web o tablet).

Aunque no parece extremadamente original, sí­ lo es la función que incluye de «creación automática de fondos«. Si la imagen que compartimos, nuestro diseño, es azul en sus lí­mites, por poner un ejemplo, Flatsies será capaz de detectarlo y mostrar, en caso de que lo consideremos interesante, todo el fondo integrado con nuestro diseño.

En el ví­deo inferior podéis ver una demostración de lo que flatsies puede hacer por nosotros. En su página principal podemos solicitar la invitación y ver cómo existen opciones Premium que, por 4 dólares al mes, permiten poner contraseña en nuestras urls, personalizar el logo o eliminar el lí­mite de 4 proyectos que tienen las cuentas gratuitas.

architizer – Una red social para arquitectos y diseñadores de interiores

Os comentamos esta red en su lanzamiento, en 2009, y lo volvimos a hacer en esta colección de Recursos útiles para arquitectos y diseñadores de interiores. Hoy os la presentamos de nuevo después del lanzamiento de su nueva versión, enfocada en permitir a los profesionales de esta categorí­a mostrar sus trabajos y poder así­ obtener más clientes.

Los arquitectos y diseñadores de interiores podrán subir sus trabajos en cualquier formato, ya sea imagen o documento PDF. El equipo de architizer se encargará de transformarlo en algo realmente atractivo para que forme parte del portafolio de la empresa.

Otros arquitectos pueden comentar los trabajos subidos y ver todos los materiales utilizados en la construcción de cada obra, punto en el que entran las marcas, ya que pueden divulgarse como proveedores de los proyectos presentamos.

Los arquitectos y empresas no pagan nada para usar el sistema, son las marcas las que pueden elegir entre varias opciones, mensualidades que van desde 95 a varios cientos de dólares al mes.

De momento solo está disponible en inglés, aunque es una red 90% visual, donde es el proyecto, las maquetas y las fotos los que dominan el espacio de Architizer.

Comentan en TC que archdaily (archdaily.com), como competencia de architizer (www.architizer.com), continúa apostando por la publicación directa del profesional, sin ningún equipo interno encargado de filtrar y embellecer el contenido, algo que puede marcar una gran diferencia entre ambos proyectos (velocidad e independencia Vs belleza).

Pop – Crea y simula prototipos para aplicaciones móviles

pop

Disponible para iPhone, y con versión inminente en Android, Pop (popapp.in) es una joya que todos los desarrolladores de aplicaciones deberí­an tener en su móvil.

Se trata de una herramienta que nos permite capturar prototipos dibujados en papel (podemos fotografiarlos con la cámara del móvil) y agruparlos como bocetos de una misma aplicación. Hasta aquí­ nada sorprendente, ya que podemos hacer fotos de los dibujos en papel y agruparlos en la propia cámara del móvil o en aplicaciones como Dropbox, por poner un ejemplo. Lo genial de Pop es que podemos, después de tener las fotos capturadas, añadir eventos en diferentes regiones de cada captura, de forma que es posible «navegar» entre los dibujos haciendo clicks en bocetos de botones, textos, fotos, etc.

El paso a paso serí­a el siguiente:

– Dibujamos en papeles las pantallas de nuestra próxima aplicación móvil.
– Fotografiamos dichos dibujos con el móvil agrupando todos dentro del dispositivo. Es posible ajustar y recortar la fotografí­a, teniendo en cuenta que cada captura es procesada automáticamente para que el brillo y el contraste permita destacar el contenido del dibujo.
– Seleccionamos diferentes partes de cada captura y asociamos un enlace en cada una. El enlace apunta a otro dibujo, por lo que al ejecutar el conjunto podremos navegar entre el prototipo pulsando los dibujos de botones y demás elementos.

El resultado puede compartirse de forma sencilla, algo ideal para enviarlo a clientes, por ejemplo, ayudando a tener una definición más exacta del proyecto que se está realizando.

Las mejores webs para analizar colores

De entre todas las herramientas que hemos comentado como Utilidades para diseñadores web, os voy a mostrar una lista de aquéllas que tienen al color como protagonista.

Son aplicaciones muy útiles para extraer colores de una página web o para generar paletas, una pequeña selección que puede ser muy útil durante la etapa de concepción de cualquier nuevo diseño.

Colorotate

colores

Aquí­ tenemos todo un clásico que, con versión web, plugin de Photoshop y iPad, comentamos por primera vez en 2009.

Comentan en su presentación que los métodos tradicionales de elección de colores en las computadoras son siempre bidimensionales, extremadamente limitados, motivo por el cual decidieron crear un sistema que permita trabajar con colores en 3D, algo más intuitivo y práctico.

ColorExplorer

color
Continúa leyendo «Las mejores webs para analizar colores»

Impresionantes recursos de todo tipo para desarrollo web

Los creativos y desarrolladores y la web van de la mano, especialmente en los últimos tiempos, cada uno se beneficia grandemente del otro a través de la creación de todo tipo de material que pueda ser usado en la web, como fuentes, GUIs iconos y más.

Valiosos elementos útiles para web:

Valiosa y útil colección de diferentes elementos web gratuitos para que los utilices en tu próximo proyecto.

Maqueta PSD para el iPad: maqueta en photoshop del iPad útil para la vista anticipada de productos.

Maqueta psd para el ipad

Elementos de infografí­a en PSD: hermosa colección de elementos de infografí­a en formato PSD.

Elementos de infografí­a en PSD

Plantilla flat del macbook: plantilla del iMac y del Macbook al estilo flat en formato PSD.

Plantilla flat del macbook

Idealist sans: sencilla y agradable fuente de texto.

Idealist Sans

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

Maqueta de marca o identidad

Maquetado de graficas en PSD: interesante conjunto de gráficas en formato PSD.

Maquetado de graficas en PSD

Plantilla del iPhone 5: útil maqueta del iPhone 5 en PSD para tus próximas aplicaciones.

Plantilla del iPhone 5

Fascí­nate: fuente de texto ideal para diseñadores.

Fascí­nate: Fuente de texto

Estanterí­as de madera: 4 diferentes vistas en perspectiva de estanterí­as en formato PSD.

Estanterí­as de madera

Elegante reproductor multimedia: concepto moderno de un widget reproductor multimedia.

Elegante reproductor multimedia

Archivo narrow: útil fuente de texto diseñada tanto para formato impreso como para plataformas digitales.

Archivo Narrow

Widget de inicio de sesión: moderna interfaz de inicio de sesión en PSD y CSS.

Widget de inicio de sesión

Plantilla de un iPad: plantilla tipo PSD de un iPad para la pre visualización de tus productos.

Plantilla de un iPad

Interfaz de subida de archivos: concepto de interfaz de un widget para la subida de archivos.

Interfaz de subida de archivos

Plantilla gravertical: espectacular maqueta construida en photoshop para la presentación de tus aplicaciones.

Plantilla Gravertical

Macbook air: útil plantilla del macbook de alta resolución en formato PSD.

Macbook Air

Cintas abstractas: 12 diferentes cintas abstractas diseñadas en illustrator y photoshop para tu próximo proyecto.

Cintas abstractas

 

Interfaz Grafica de Usuario orientada al diseño web:

La siguiente es una gran colección gratuita de diferentes conceptos de interfaz grafica de usuario orientada al diseño web en formato PSD.

GUI metro: moderna interfaz de usuario con más de 20 diferentes elementos.

UI metro

GUI app: set de elementos para el desarrollo de aplicaciones.

App UI

iOS GUI: excelente colección de elementos para el nuevo iOS7.

GUI para iOS7

GUI estilo flat: completa interfaz de usuario de estilo flat para implementar en tu blog.

GUI Estilo Flat

GUI para android: completo set de elementos android 4 (jelly bean) para teléfonos inteligentes.

GUI para Android

GUI con diseño flat: kit de diferentes elementos de interfaz de usuario con un diseño moderno.

GUI con diseño Flat

Flat UI kit: moderno set de diferentes elementos para el desarrollo web.

Flat UI Kit

GUI para mapas: moderno kit de elementos para la utilización en mapas.

GUI para Mapas

Completa colección de í­conos

Durante el segundo trimestre del año, hemos recopilado una serie de los mejores y más útiles sets de í­conos gratuitos que se pueden encontrar en la web.

íconos simples: set de 30 diferentes iconos de 32x32px en PSD.

Iconos Simples

íconos de redes sociales: paquete de 35 í­conos sociales al estilo flat.

Iconos de Redes Sociales

íconos de alimentos: completo paquete de diferentes í­conos de alimentos en formato PSD.

Iconos de Alimentos

íconos para aplicaciones: colección de 9 í­conos redondeados para utilizar en tus aplicaciones.

Iconos para aplicaciones

íconos coloridos: pequeño set de elegantes í­conos coloridos en formato PSD.

Iconos Coloridos

íconos de búsqueda: útil colección de diferentes í­conos de búsqueda para tu web.

Iconos de Búsqueda

Elegantes í­conos de archivos: completo set de 21 í­conos de formato de archivos como PNG, JPEG o MP3.

Elegantes Iconos de Archivos

Set de í­conos flat: pequeño y útil paquete de í­conos de estilo original.

Set de Iconos Flat

íconos de dispositivos móviles: Excelente colección de diferentes í­conos de dispositivos móviles.

Iconos de dispositivos móviles

Vectory: enorme colección de diferentes í­conos multipropósito en formato PNG.

Iconos Vectory

íconos de corazones: set de í­conos de corazones con 15 estilos diferentes en formato AI.

Iconos de Corazones

Kit de í­conos finos: paquete de 24 í­conos sencillos en formato PSD.

Kit de Iconos Finos

íconos minimalistas: bonita y útil colección de í­conos con un diseño simple y minimalista.

Iconos minimalistas

Set de í­conos sociales: colección de 16 diferentes í­conos sociales con un estilo flat.

Set de iconos sociales

iOS glyphs: set de í­conos para iOS al estilo de los jeroglí­ficos.

iOS Glyphs

Temas en formato HTML+PSD+WP:

Esta lista presenta temas en WP y HTML para los entusiastas del buen diseño y temas en PSD para los programadores avezados en busca de inspiración.

WebMag: moderna plantilla web para utilizar en la plataforma de blogger.

WebMag plantilla para blogger

Kitchenwall: plantilla web PSD para blog con un diseño minimalista.

plantilla Kitchenwall

Celestino: portafolio para WordPress, con un diseño limpio y sencillo.

Celestino - tema para wordpress

Avenir: plantilla web tipo HTML con un estilo sombrí­o.

plantilla web avenir

Cleanless: maqueta web de diseño simple y minimalista en formato PSD.

maqueta web Cleanless

Crisp persona: sencillo tema para WordPress con diseño responsivo.

Crisp Persona

Ameyso: moderno y responsivo tema para WordPress.

Ameyso: tema para wordpress

Bislite: simple y agradable plantilla web estructurada en HTML5.

plantilla web HTML5

Plantilla web flat: plantilla para sitio web con diseño fresco.

Plantilla Web Flat

Webdepot: moderna plantilla web en formato XML dirigida la popular plataforma blogger.

plantilla web

Portafolio web: fresca y agradable plantilla web para tu portafolio en formato PSD.

Portafolio Web

Clippy: tema para WordPress simple y con diseño responsivo.

tema para wordpress

Web personal: esta plantilla web en PSD está diseñada para que puedas exhibir tu trabajo en la web.

Web personal

Web fashion: plantilla web en formato PSD dirigida al sector de la moda en internet.

Web Fashion

Snaps: moderno tema para WordPress prefecto para presentación de galerí­as de imágenes.

moderno tema para wordpress

Fizz: hermoso tema para WordPress con diseño responsivo.

Fizz: hermoso tema para wordpress

Fantásticos experimentos de código y plugins para tu sitio:

Abajo se presenta un lista de piezas experimentales de código y plugins para integrar al sitio y proveerlo de efectos y funcionalidades.

Unslider: útil slider de jQuery full pantalla adaptable a múltiples dispositivos.

Slider responsivo

Colores flat: excelente colección de los colores flat más populares hoy en dí­a.

colores flat

Walidate: excelente plugin para la validación de campos de un formulario.

Validar fomulario

Slideshow: magní­fico slider de jQuery con efectos originales.

magnifico slider

Smartmenus: súper útil menú con diseño adaptable a diferentes dispositivos.

Menu Responsivo

Multi-formulario: espectacular tutorial online para crear un formulario de múltiples pasos.

formulario de multiples pasos

Digg Digg: plugin de wordpress para añadir diferentes botones de redes sociales a tu blog.

Botones de redes sociales

Converse.js: excelente plugin para convertir tu web en una sala de chat electrónica.

Chat Online

Pop easy: este plugin te ahorrará tiempo a la hora de crear diferentes lightbox para tu web.

lightbox para tu web

Ladda: útil colección de diferentes botones de carga en jquery.

colección de botones de carga

SlidesJS: espectacular slider con diseño adaptativo a diferentes dispositivos.

slider responsivo

Cajon de pestañas: simple y elegante widget con diferentes pestañas.

Cajon de Pestañas

Clipping magic: aplicativo web que te ayudara a eliminar el fondo de una imagen de forma sencilla.

eliminar el fondo de una imagen

Botones creativos: colección de diferentes botones con increí­bles efectos.

Botones Creativos

Aristochart: librerí­a de canvas para crear y personalizar tus estadí­sticas.

Aristochart librerí­a de canvas

Efectos de carga: excelente colección de efectos para animar los contenedores de tu web.

Efectos de Carga

Este artí­culo ha sido publicado aquí­, en WWWhatsnew.com, por el Equipo de The Shock family: iconshock, wpthemegenerator y jqueryslidershock, responsables también por bypeople.com.

Nueva versión web de Kuler, de Adobe, extrae los colores de cualquier imagen

kuler

Obtener una paleta de colores a partir de una imagen no es una novedad. Existen muchas aplicaciones web que pueden realizar tareas parecidas, como pictaculous.com o colorexplorer.com, pero pocas lo hacen tan rápido como la nueva versión de Kuler, famosa herramienta web de Adobe.

Solo tenemos que acceder a kuler.adobe.com/create/color-wheel y pulsar en la cámara que aparece en la parte superior derecha para subir nuestra imagen, obteniendo paletas de colores que responden a diferentes criterios de extracción.

Kuler apareció aquí­ en WWwhatsnew.com, por primera vez, en 2006. Mucho más tarde, en 2009, apareció siendo una de las 12 herramientas web para diseñadores que recomendamos en la época. Desde entonces hemos visto varias actualizaciones, una de ellas relacionada con la creación de paletas y ahora con la extracción de colores de nuestras imágenes.

En la página del proyecto (www.adobe.com/products/kuler.html) hacen también referencia a la aplicación de iPhone, desde la cual podemos obtener colores de las imágenes que capturamos, algo extremadamente útil para quien trabaja con decoración y diseño gráfico.