Plantilla para tablero interno en PSD

Tamara

En general, cuando compartimos recursos nos enfocamos en lo que el usuario ve ya sean elementos UI, diseños de páginas web o iconos, el sentido inicial es tener herramientas para completar todo lo relacionado a lo que en el medio se denomina front end. Pero en muchos casos, y para aquellos que trabajan del otro lado, es difícil encontrar recursos que faciliten las cosas en cuestiones estéticas, simplemente por el mero hecho de que son espacios destinados a administradores o desarrolladores y en la gran mayoría de las empresas no se tiene en cuenta esa parte trasera del desarrollo.

Por otro lado hay miles de aplicaciones de las que jamás nos enteraremos porque están destinadas a las redes intranet de las empresas y no salen de allí, pero para los mismos usuarios de esos sistemas un panel bien diseñado puede ser de gran ayuda a la hora de entender cómo funciona y al mismo tiempo relacionarlo con la empresa que lo ofrece.

Son cosas que casi nunca se tienen en cuenta, pero ante la necesidad de tener que hacerlo un poco más atractivo, este tipo de plantillas puede resultar muy útil no solo para implementar completamente sino para tener una base estética que ofrezca a sus usuarios un espacio claro, limpio y sin elementos que lo hagan parecer antiguo.

Stylish dashboard PSD

Descargar Dashboard PSD Free | FreebiesGallery

En este caso la plantilla que comparto es un planteo de tablero de mensajería interna con barra funcional lateral, avatares de usuarios, mensajes, solapas, listas y llamadas de atención. Se puede utilizar como está y realizar como está una maqueta su contenido, o bien, se pueden extraer diferentes elementos como la barra lateral que creo es una excelente opción para ahorrar espacio en diferentes secciones.

Como siempre, todo queda a criterio del desarrollador y deberán tener en cuenta que en el caso de que el sistema ya se encuentre creado, lo que harán es una adaptación visual que bien puede basarse en esta plantilla. No suelo compartir este tipo de elementos pero creo que en caso de urgencia les puede resultar muy útil.

Honbu: herramienta colaborativa para pequeños grupos

Isabel

Es interesante ver la manera en la cual las herramientas para trabajar en equipo van mutando. Los que en un principio eran paneles imposibles de entender se transformaron en aplicaciones funcionales, cada vez mas simples y efectivas. Sin dudas esto esté influenciado porque también es mas habitual que la gente trabaje junta pero virtualmente.

Honbu llega para ser una nueva propuesta y con algunas características geniales. En su sitio explican que deseaban que todos estén enterados de las fechas límites para entrega de proyectos, de qué tareas realizará cada integrante, mejorar la productividad y mantenerlos en contacto. Todos puntos que se necesitan en un equipo mas allá de si es virtual o no.

Honbu: herramienta colaborativa para pequeños grupos

Para comenzar hay dos opciones: utilizar la prueba gratuita de un mes (sin necesidad de ingresar tarjetas de crédito) o bien optar por el plan gratuito que es el que utilizaremos como ejemplo. Las diferencias entre éste y sus demás posibilidades es que se trabajará solo con pequeños grupos de tres personas, incluidos nosotros, con un límite de tres grupos diferentes. Claramente no es una opción para grandes empresas sin abonar pero puede ser una excelente propuesta para equipos pequeños.

En uno de los paneles del sitio veremos a nuestros contactos, identificados con diferentes colores para saber quienes están en línea y quienes no, facilitando la comunicación respectiva al proyecto sobre el cual estemos trabajando.

Por otro lado se puede crear una conversación para lanzar ideas y comentar entre todos si parece factible realizarlas o no, sumando o restando detalles automáticamente. Justamente para organizar y ampliar esas ideas podemos compartir archivos que se sumarán al proyecto de forma segura. Presentaciones, hojas de trabajo, videos, imágenes o lo que se nos ocurra puede ser subido sin problemas, pasando a estar disponibles para todo el equipo de trabajo.

Cada cambio que realizamos en un proyecto es notificado al resto mediante un icono con la idea de que constantemente se mantenga esta comunicación grupal tan necesaria.

El panel principal es realmente atractivo y funcional. Se ven los últimos cambios, mensajes y archivos subidos identificados con sus respectivos iconos en estilo flat. Arriba de todo se ve el buscador para acceder aún mas velozmente al contenido que deseemos y sobre la derecha el mensajero y las diferentes secciones. Finalmente, desde el panel de opciones se puede ir modificando lo que necesitemos aunque al ser tan cómodo no va a ser necesario en la mayoría de los casos.

Gran propuesta que como bien dije antes, se enfoca en grupos pequeños pero que invita a la colaboración y motiva constantemente por su organización.

Web: Honbu

Notas en Android con Writer

Isabel

James McMinn es un desarrollador de Glasgow que mantiene varios proyectos. Uno de ellos es Writer para Android, la cual hizo por una necesidad propia y terminó teniendo bastante éxito para él inesperado.

Existen muchas aplicaciones para escribir en móvil. Muchas intentan ser una alternativa portátil a los procesadores de texto que utilizamos en nuestra PC al trabajar. Sin embargo el problema termina siendo cuando hablamos de un teléfono promedio. En una tablet seguramente sean cómodas pero en pantallas mas pequeñas, al tener múltiples funciones y barras de opciones, se complica el tema de los espacios.

Writer es una herramienta para notas en Android que se enfoca en el minimalismo y la falta de distracciones. La idea es que podamos escribir cosas al paso rápidamente pero también documentos mas extensos sin problema y de forma cómoda. Dicen que los escritores suelen optar por lo simple y sin dudas es una gran verdad así que su base parte desde ese punto.

Notas en Android con Writer

La aplicación ofrece tres funciones únicamente: Escribir textos, aplicar markdown básico y acceder a estadísticas sobre lo que hemos creado. Nada mas. No hay elementos conectados a redes sociales, ni colores, ni imágenes ni nada extra sino la posibilidad de encontrarnos con lo que estamos escribiendo sin pensar en nada mas.

De momento las notas son alojadas en la tarjeta SD dentro de la carpeta de la app pero en futuras versiones permitirán modificar la ruta, además de sumar la posibilidad de sincronizar con Dropbox y Box.net, dos servicios que hoy en este tipo de proyectos deben estar por su enorme cantidad de usuarios.

En la pantalla de inicio Writer nos mostrará un listado de todo lo que hemos escrito, asi como también el momento en el cual lo hicimos. Esto puede ordenarse ya sea alfabéticamente o por fecha de modifcación según nos resulte cómodo. Sobre el markdown no hay mucho que explicar, se pueden crear encabezados, listas numeradas o con otros estilos, marcar como negrita o itálica, etc.

Finalmente, el detalle interesante de las estadísticas nos mostrará dentro del documento la cantidad de palabras y caracteres, el tiempo estimado de lectura que tendrá, su ubicación y fecha de edición. Detalles que no solo son agradables de ver sino que ayudan en el caso de que escribamos documentos que deban cumplir con alguna longitud puntual.

Writer funciona, cumple, no distrae y es extramadamente liviana, además de funcionar para versiones 2.1+, abarcando modelos algo mas antiguos, punto que muchas herramientas actualmente dejan de lado.

Writer – Tamaño: 96k – Descargar

Redimensionar imágenes con PHP

Pablo

PHP_image_resize es una excelente biblioteca desarrollada con PHP para facilitar el proceso de redimensionar imágenes.

La principal ventaja de esta librería es su sencillez de uso, apenas unas lineas de código son necesarias para cambiar el tamaño de una imagen, sin complicaciones ni engorrosas comprobaciones, todo lo hace casi automáticamente esta biblioteca.

biblioteca php image resize

La función encargada de modificar las imágenes acepta varios parámetros de configuración, los que más destaco son:

  • $proportional: Definimos si queremos guardar -o no- la proporciones de la imagen.
  • $delete_original: Permite eliminar la imagen original luego de modificar sus dimensiones.
  • $use_linux_commands: En caso de activar esta opción las imágenes se eliminan utilizando el comando RM, caso contrario se emplea unlink de PHP.

La lista completa de opciones:

function smart_resize_image($file,
                            $string = null,
                            $width = 0,
                            $height = 0,
                            $proportional = false,
                            $output = 'file',
                            $delete_original = true,
                            $use_linux_commands = false,
                             $quality = 100)

Un ejemplo de uso:

//Indicamos la ruta a la imagen alojada en nuestro servidor
$file = 'your_path_to_file/file.png';

//Indicamos la ruta de destino
$resizedFile = 'your_path_to_file/resizedFile.png';

//Llamamos a la función encargada de redimensionar la imagen
smart_resize_image($file , null, SET_YOUR_WIDTH , SET_YOUR_HIGHT , false , $resizedFile , false , false ,100 );

Eso es todo, la biblioteca completa se encuentra en un solo archivo, lo que facilita su instalación.

Web: PHP_image_resize

Sets de posters estilo vintage en alta resolución

Tamara

Está claro que este tipo de recursos resultan muy específicos para quienes buscan una estética particular, pero por otro lado se que son difíciles de encontrar cuando se los necesita y es interesante saber dónde hallarlos en el momento preciso. Dos series de posters estilo vintage con referencias de la publicidad francesa de esa época, que en algunos casos despliegan ilustraciones y en otras conforman simplemente el afiche promocional.

Estéticamente mezclan elementos que hoy en día se utilizan como texturas o iconos, pero que en general tienen su propia personalidad y están muy arraigados a la estética francesa que luego se hizo muy popular y crean o no tiene muchos fanáticos. La posibilidad que ofrecen estas imágenes va desde la inspiración hasta la necesidad de impresión (aunque quizás no lo suficientemente grande) de posters o folletos, sobre todo para fines decorativos.

Vintage Posters

Descargar Vintage Posters | FarFarHill

Vintage Illustrations

Descargar Vintage Illustrations | FarFarHill

Ambos sets contienen imágenes en alta resolución y quizás sea un tanto tedioso descargarlos dado el tamaño y el lugar en el que están alojados, pero creo que para aquellos que aman el estilo o están buscando una forma de aplicarlo en sus diseños puede ser un recurso valuable que a fin de cuentas les ahorre trabajo de búsqueda. Seguramente alguno de ellos les resultan conocidos por lo que la posibilidad de contar con ellos en una buena resolución es sumamente interesante.

Más adelante podrán ver cuánto rinde gráficamente al momento de imprimir en caso de que esa sea su elección, pero estimo que cuentan con la calidad suficiente para que al menos se puedan imprimir en un tamaño A4 standard. Ya me dirán ustedes si los usan si es posible obtener esa dimensión. Para aquellos que solo quieran utilizarlos en versión online, web o para alguna aplicación móvil, no tendrán ningún inconveniente ya que tienen una buena densidad de pixeles y seguramente sirven para cualquier dimensión destinada a la virtualidad.

Movienr: recomendación de películas online

Isabel

Se podría pensar que se trata de un sitio más ocupado de recomendar películas pero Movienr cuenta con algunas características que lo destacan del resto y por eso decidí armar el post. El proyecto nace para cuatro cosas: descubrir películas, organizar las vistas, obtener recomendaciones y compartir en un entorno social el resultado de todo esto. Las posibilidades son amplias y por eso voy a intentar detallarlas de a poco.

Movienr: recomendación de películas online

Con solo ingresar veremos las últimas películas agregadas y las mas vistas. Luego del registro sí podemos recorrer un poco mas. Realmente el sitio puede utilizarse sin tener una cuenta pero de esa manera solo podremos buscar títulos y la verdad es que se pierde gran parte de la idea. Por otro lado es cuestión de segundos y vale la pena.

Ya con nuestra cuenta seremos llevados a un panel bastante completo. Posiblemente sobre la derecha vean que no se encuentra actividad nuestra y eso vamos a cambiar. En este mismo sector aparece un cuadro con las estadísticas de lo que hemos visto o no y mas abajo algunas listas creadas de ejemplo.

Movienr: recomendación de películas online

Aun así, la sección que mas nos interesará es la ubicada sobre la izquierda. Allí veremos una serie de solapas con género, temática, lugar, período, nuevas películas y origen. Dentro de cada una aparecerán las opciones. Por ejemplo, en “género” figuran cintas de acción, aventuras, animación, comedias, etc. Mas abajo aparecen dos sliders, el primero para seleccionar un rango de años y el segundo para ordenar por puntaje.

Cuando configuremos estas opciones aparecerán los resultados listando películas con las características que hemos marcado para agregar a nuestra selección, eliminar de los resultados o tildar como vistas. Allí mismo se accede a su duración, datos técnicos y trailer.

Movienr: recomendación de películas online

Si ingresamos en una película conoceremos el resto de la información: puntajes, temáticas, poster, reparto completo y país de origen.

Antes hablábamos de la parte social, importante en este sitio. Claro que esto se notará aún mas cuando sigamos usuarios con nuestros gustos ya que básicamente podemos interactuar con ellos en un muro similar al que se puede ver en Facebook.

Finalmente, si entramos en nuestro perfil veremos también una serie de opciones: muro (para interactuar con alguien ubicaremos antes la “@” seguida con su nombre de usuario), películas vistas, las que debemos ver, favoritas, recomendadas y estadísticas, donde se ven atractivos gráficos mostrados en estilo infografía.

Genial opción si son amantes del cine y que va en buen camino si siguen ofreciendo funcionalidad sin complicar demasiado sus funciones.

Web: Movienr

6 originales diseños para el elemento HTML SELECT

Pablo

Modificar el aspecto visual de un <select> es bastante más complejo de lo que parecería en una primera instancia, el principal problema fue siempre la compatibilidad con los navegadores más antiguos, para nuestra suerte este problema cada vez nos afecta en menor gracias al avance y penetración de los navegadores que reconocen perfectamente las propiedades de CSS3.

Select Inspiration es un interesante repositorio de Github que cuenta con 6 diseños distintos para implementar en nuestros elementos <select>, estos diseños no solo modifican todo lo referido al aspecto de este control sino que implementan novedosas animaciones que pueden cambiar casi por completo al <select> de toda la vida.

select animados y diferentes

Antes de continuar los invito a que los vean funcionar, para ello simplemente ingresen a la demostración online.

La tecnología empleada para realizar este fantástico trabajo consiste en una combinación de JavaScript y CSS3, las propiedades utilizadas son básicas, transformaciones y transiciones principalmente, por lo que no vamos a tener problema en la mayoría de los navegadores del mercado.

El código fuente es para libre utilización tanto en proyectos personales como comerciales.

Web: Select Inspiration

LookShop: Theme e-commerce gratis PSD

Isabel

Es extraño dar con themes enfocados en el comercio, al menos si buscamos opciones gratuitas. Es por eso que no pude dejar pasar LookShop ya que no solo se trata de una buena opción sino que a diferencia de muchos otros cuidaron lo visual al máximo. La plantilla se encuentra en formato PSD e incluye varias páginas para armar el sitio deseado. En el ejemplo se trabajó con colores calmos y agradables, quizás teniendo en cuenta que cuando se trata de estas temáticas las imágenes son protagonistas además de ser abundantes.

LookShop: Theme e-commerce gratis PSD

En la página de inicio se muestra un modelo con menú superior, slider para mostrar promociones y una nueva barra debajo con opciones sociales. Luego sí llega una galería con elementos a la venta que se puede filtrar con variados atributos. Finalmente se ve el pie con mas enlaces, información para las ventas y créditos.

Dentro de la opción para mostrar un tipo de producto se ven los destacados en el slider superior y todos los artículos de ese estilo debajo en miniaturas. Pasando a la barra lateral se accede a las categorías, slider para rango de precios, talles o medidas y finalmente los destacados.

LookShop: Theme e-commerce gratis PSD

Finalmente llegamos a la página individual de cada ítem, una de las mas importantes ya que debe ser clara, informar todos los datos necesarios y guiar al cliente correctamente. Por supuesto que lo primero en llamar la atención es la imagen de muestra, junto a una pequeña galería con mas opciones de vistas. Junto a esto se ve su nombre, descripción, talles disponibles en menú desplegable, colores y los botones para agregar (o no) al carrito de compras. Seguimos con un sector social para compartirlo y se cierra antes del pie de página con cinco opciones desplegables que muestran descripción ampliada, información adicional, reviews de clientes, enlaces y la alternativa de enviarlo como regalo.

Son tres plantillas en PSD gratis que en conjunto forman un excelente sitio para vender nuestros productos claramente. Al encontrarse en este formato podemos editar absolutamente todo, agregando fondos si lo consideramos adecuado y modificando colores a gusto. Seguramente lo que también modifiquemos sean los medios de pago dependiendo de con qué vías trabajemos y las redes sociales si no deseamos aplicarlas. Las opciones son miles, lo importante es que tenemos una base perfecta para crear el proyecto soñado y luego aplicarlo mediante código en donde corresponda.

Dentro de la descarga, además de estas tres plantillas, se suman dos del inicio para visualizar en móvil y tablet, facilitando enormemente el paso de crear un sitio de diseño adaptable, importante siempre pero aún mas en este tipo de temáticas.

LookShop – Descargar en The Cap Can

Mockups estilo flat de elementos de escritorio

Tamara

Hay una gran cantidad de plantillas que permiten realizar maquetas de un producto terminado y que resultan ideales para mostrar trabajos gráficos antes de su etapa final de impresión. Son interesantes para llevarle al cliente una visión general de cómo se verá la marca en diferentes soportes y cuántos elementos diferentes se pueden contemplar para llevar finalmente al plano físico.

En este caso la idea es plantear esto mismo, que siempre tiende a imitar los elementos con cierto realismo, a un estilo plano que presenta muy bien cada uno de los ejemplos. La forma en la que está realizado brinda una sensación moderna y original que se sale de lo que usualmente se ve en este tipo de recursos.

Además de resultar ser una buena herramienta de presentación, puede que inspire algunos componentes que no habíamos tenido en cuenta hasta ese momento y podamos así probar nosotros mismos el resultado antes de decidirnos por el final.

Flat Mockups

Descargar Flat Mockups | GraphicBurger

Hay varios planteos para ejemplificar los casos, cada uno con su respectiva paleta aunque esto puede hacerse coincidir con el proyecto en cuestión sin problemas ya que los archivos disponibles para descarga se encuentran en formato .psd para Photoshop y .ai para Illustrator. Por lo que sin importar que programa hayan utilizado para crear la identidad, será muy simple combinarla con cualquiera de estas maquetas.

No tienen una finalidad gráfica en si, pero suelen ahorrar muchísimo tiempo a la hora de plantear una idea e incluso, puede ayudarlos a crear una identidad personal en poco tiempo y no olvidarse de incluir todas las posibilidades que se les presenten, poniendo en la balanza el equilibrio, el concepto y la transmisión de ideas que tienen que tener un sentido de cara a lo que quiere decir nuestra marca.

El resultado será muy armónico y si bien se ata al estilo plano del cual muchos están cansados, es todavía una herramienta estéticamente original.

Pinball: plantilla grid en PSD gratis

Isabel

Lo mejor de las plantillas PSD es ya conocido. El formato nos permite editar absolutamente todo sin problemas y en muchos menos pasos que si se trata de una tradicional. Imaginemos que cada objeto que vemos tiene su propia capa por lo que si deseamos cambiarlo, eliminarlo, alternar colores, medidas o agregar texto, solo debemos ubicar su layer en Photoshop y actuar. Estos atributos hacen que este tipo de plantillas sean perfectas como aprendizaje. Si están pensando en crear sus propios diseños es un buen consejo descargar varias y analizarlas, viendo cómo son formadas, su orden y en qué técnicas se implementaron. Al principio será extraño como todo lo nuevo pero una vez que tomen práctica irán administrando el tiempo mejor y sumando sus propios métodos.

Pinball: plantilla grid en PSD gratis

El tercer beneficio es que son aplicables al sistema que utilizemos luego, sea el que sea, mediante el código que corresponda. Hoy en día venimos hablando mucho del formato grid porque es tendencia y dependiendo del tema del sitio puede resultar ameno utilizarlo. Si optan por este estilo, Pinball permite todo lo que comentaba y mas.

El theme está pensado para portfolios y sitios que busquen un formato magazine o revista pero mas moderno. Se muestran sus miniaturas en grilla con fondo blanco cada una y un extracto que da paso a un sistema de rating para que los usuarios y lectores voten si lo desean. En general es bastante limpia y solo se ven elementos en su cabecera, con el logo, su buscador y el menú de navegación.

Pinball: plantilla grid en PSD gratis

Vale aclarar que el menú se ve minimizado, algo que actualmente se usa bastante y que de ser activado despliega su contenido, ahorrando espacio visual. En algunos casos esta función es permanente y en otros solo se activa dependiendo del dispositivo que estemos utilizando en themes de diseño adaptable.

Claro, al ser PSD todo esto es modificable al gusto y la necesidad de cada uno. Como les decía al inicio del post solo es cuestión de tiempo y ganas. Sin embargo, sin ningún cambio es una alternativa genial para quienes busquen un theme en formato grid para aplicar inmediatamente, dedicándonos solo al código una vez que esté descargado.

Justamente sobre la descarga hay que aclarar que se accede a ella de manera gratuita pero luego de compartir el contenido en alguno de nuestros perfiles sociales, ya sea Twitter o Facebook. Una vez enviado el estado desde el botón del sitio que nos invita a hacerlo, se activará la bajada de archivos y en segundos estaremos listos para trabajar.

Pinball – Descargar en CSS Author