Simple Metro: Galería de imágenes gratuita con PHP

Pablo

Simple Metro es un pequeño proyecto escrito en PHP para generar galerías de imágenes de forma casi automática. La mecánica de este proyecto es simple, solo necesitamos subir las imágenes a una determinada estructura lógica de carpetas y el sistema automáticamente generará las galerías.

La principal ventaja de emplear este proyecto radica es su prácticamente nula configuración, los requerimientos son básicos: PHP 5 con la biblioteca gráfica instalada y nada más, un desarrollo que funciona en cualquier servidor web del mercado.

galeria gratuita php

Además utiliza CSS3 y HTML5 para mostrar las distintas imágenes, un aspecto interesante de esta herramienta es que las miniaturas se generan automáticamente utilizando para ello una versión ligeramente modificada de LightBox 2.

Un detalle que honestamente me llamo la atención y que creo que no esta del todo bien, es que se sugiere en la web oficial del proyecto utilizar permisos 777 para la carpeta principal contenedora de las galerías, esto puede devenir en un futuro problema de seguridad, en lo personal prefiero siempre utilizar permisos más restrictivos y seguros. Obviamente este aspecto puede ser modificado por nosotros mismos.

Al tratarse de un proyecto de código abierto su utilización es libre, además esto ultimo permite mejorar el código para adecuarlo a nuestras necesidades.

Obviamente esta galería no esta pensada para correr de manera profesional, no al menos en servidores que tienen una demanda muy alta, además tiene grandes limitaciones si consideramos la imposibilidad de cambiar los nombres de las imágenes, este ultimo se obtiene directamente desde el nombre de archivo. Sin embargo me parece un buen recurso que podemos emplear en algunas situaciones como por ejemplo mostrarle a un cliente una serie de opciones, etc.

Simple Metro es un proyecto simple y que puede resultar útil en ciertos momentos, si necesitamos algo con más opciones podemos recurrir a otras opciones, incluso crear nuestra propia versión utilizando como base la propuesta por esta solución.

Aplicación para pintar en Android

Isabel

Existen muchas aplicaciones para dibujar en Android y otras plataformas. Desde las primeras versiones de diferentes SO’s se tuvo en cuenta el agregar herramientas de dibujo porque generalmente son necesarias y aparte, vamos, a todos nos gusta dibujar sepamos o no. En tablets suelen existir opciones bastante avanzadas tanto pagas como gratuitas pero cuesta encontrar alternativas para móviles que podamos disfrutar o brindar a los mas pequeños para que ilustren un rato.

Paint Joy es simple. No esperen herramientas complejas, capas o efectos. Simplemente es como tomar una hoja y un lápiz para garabatear algo que esté en nuestra mente. Lo bueno es que podemos controlar el ancho del trazo, además del estilo y algunos acabados diferentes al clásico. Por ejemplo sumar detalles en crayón, tiza, neón, brillos, etc.

Aplicación para pintar en Android

En total son mas de veinte pinceles para seleccionar el adecuado e ilustrar sin problemas. Se puede modificar el color de fondo o bien optar por realizar un doodle sobre alguna imagen de nuestra galería. Hablando de galerías, Paint Joy incluye la propia donde alojará todoas las creaciones que deseemos guardar.

Punto a favor comparando a otras herramientas similares es el zoom mediante gestos. “Pinchando” la pantalla podemos ampliar o reducir una zona para así poder mejorar hasta el último detalle. Es un factor que puede sonar sin importancia pero creanme cuando les digo que al momento de ilustrar en un medio digital se agradece y mucho.

¿Quieren compartir los resultados? podemos hacerlo de dos maneras. Por supuesto con la imagen en formato clásico pero lo genial es que al guardarla se suma una animación de los pasos que realizamos para poder ver nosotros como lo desarrollamos o compartirlo en alguna galería cuando no estamos cerca de la PC y de los programas de ilustración que solemos utilizar.

Ahora si, los dejo con un video donde se ve un ejemplo para que se tienten y se regalen un rato para dibujar :D.

Paint Joy – Tamaño: 11M – Descargar

Fuentes tipo display gratis para descargar

Tamara

Nuevamente pasa otro mes y con él encuentro una gran cantidad de recursos para compartir. En este caso son una variedad de tipografías que a diferencia de los meses anteriores he decidido agruparlas por estilos en lugar de por novedad.

La serie que encontrarán a continuación será para aquellos espacios que requieran grandes tamaños, especiales para títulos, banners o sliders. Este estilo de tipografía se denomina Display simplemente por que utilizarlas en tamaños pequeños no facilita la lectura y los detalles que contienen se visualizan mejor si se las emplea en grandes espacios.

Con el boom del diseño adaptable toman cada vez más fuerza ya que es usual ver en los sitios espacios ocupados por imágenes al 100% y esto en pantallas grandes requieren que las fuentes en muchos casos también sean de gran tamaño.

Si nos salimos del diseño web y considero que este tipo de recursos son más acordes a los diseños de impresión gráfica, banners y posters impresos que necesiten captar la atención de alguien al pasar. Es por ello que mi recomendación sería que sean utilizadas para espacios que realmente necesiten destaque como llamadas de atención en folletos o afiches gráficos.

Disclaimer

Descargar Disclaimer | FontFabric

Portica

Descargar Portica | Behance

Blanka Font

Descargar Blanka Font | Behance

Gist Rough Light Tree

Descargar Gist Rough Light Tree | MyFonts

Knarrstaver

Descargar Knarrstaver | Behance

Asfalto

Descargar Asfalto | Behance

GENT

Descargar GENT | Behance

Niobium

Descargar Niobium | QFonts

UGO

Descargar UGO | Behance

PouchDB: Base de datos de bolsillo para crear aplicaciones offline

Pablo

PouchDB es una muy interesante propuesta, se trata de una base de datos para almacenar pequeñas cantidades de información especialmente pensada para el desarrollo de aplicaciones web que se ejecuten offline.

Esta base de datos se encuentra desarrollada utilizando JavaScript y esta inspirada en otro proyecto (Apache CouchDB). Su principal característica radica en permitir sincronizar de manera automática los datos cuando la aplicación se encuentra offline y vuelve a conectarse a Internet.

Otro aspecto a destacar es su muy buena compatibilidad con los distintos navegadores, soporta perfectamente navegadores como el Internet Explorer en versiones no tan nuevas, ademas de obviamente Chrome, Firefox y Safari.

base de datos para aplicaciones offline

Su peso es excelente, apenas 25kb en su versión simplificada y comprimida mediante gzip.

Al tratarse de un proyecto JavaScript funciona perfectamente con Node.js, incluso el autor anuncia en el sitio oficial que la mayoría de sus desarrollos fueron realizados bajo esta plataforma.

PouchDB es un proyecto de caracter open source, garantizando su libre utilización tanto en proyectos comerciales como personales.

Ejemplo de uso:

var db = new PouchDB('dbname');

db.put({
    _id: 'dave@gmail.com',
    name: 'David',
    age: 67
});

db.changes({
    onChange: function() {
        console.log('Ch-Ch-Changes');
    }
});

db.replicate.to('http://example.com/mydb');

Un detalle que siempre me gusta consultar y que me parece fundamental en cualquier proyecto es su documentación, en este caso excelente, muy completa y fácil de comprender.

En caso de necesitar utilizar una base de datos de manera conjunta a jQuery esta biblioteca brinda un buen soporte para este framework, permitiendo vincular muchas de sus funciones con las del popular proyecto. Inclusive podemos emplear PouchDB como si fuese un plugin común y corriente.

Elementos vectorizados para infografías con estilo biselado

Tamara

Las infografías son un recurso sumamente útil para todos aquellos que necesitan desplegar información de forma gráfica y práctica. Generando asociaciones lógicas este recurso puede ayudarlos a armar una imagen informativa o una plataforma interactiva para los que se animen también.

La característica particular de esta herramienta es que posee una buena cantidad de elementos con un estilo actual y moderno que a pesar de la gran cantidad de colores que siempre viene bien tenerlos a mano en este tipo de diseños. Y si bien la paleta es plana se juega con un biselado que hace que los elementos posean cierta estética 3D pero que resulta más similar a la sombra larga que se utiliza en los íconos nuevos.

3D Infographic Elements

Descargar 3D Infographic Vector Elements | PSDVault

El paquete incluye íconos, elementos para gráficos que deberán ser editados por proporciones para que todo quede acorde a la información que se despliega, llamadas de atención gráficas con íconos agregados y salvando los engranajes que están al final creo que todo tiene visualmente una calidad excelente. Se encuentra en formato vectorizado para que pueda editarse sin problemas y adaptar los componentes a lo que necesiten armar. También puede cambiarse la paleta de colores y siempre tengan en cuenta de mantener el valor de las sombras con respecto al tono que elijan.

Screencasts desde Chrome en segundos

Isabel

Existe una gran cantidad de herramientas que nos permiten grabar lo que hacemos en pantalla con fines laborales, de ocio o por presentaciones que hagamos relativas a un nuevo desarrollo propio, aplicación o diseño. Muchas de ellas son pagas o bien suman una marca de agua en el caso de las que se ofrecen libremente. Sin embargo, algunas pocas brindan todo lo necesario para un screencast básico sin frenos de ningún tipo.

En el caso de la que conoceremos hoy, trabaja sobre Chrome y lo que hace es que podamos grabar lo ocurrido en una pestaña activa. Útil incluso para mostrar tutoriales o aplicaciones puntuales.

Screencasts desde Chrome en segundos

Si bien la aplicación se encuentra en etapa beta funciona realmente bien y de forma estable. Además de grabar cada acción que realizamos se sumará el audio, punto mas que a favor en comparación a otras herramientas similares.

Los videos serán alojados en nuestro disco en formato  Webm/vp8 con audio OGG. En el caso de no desear una copia para nosotros y en lugar de eso busquemos subirlo a YouTube, en un solo click comenzaremos el proceso sin problemas.

Para aquellos que deseen grabar no solo lo que ocurre en una pestaña sino en cualquier instancia de la pantalla, la opción está inluida pero de manera experimental. Seguramente con algunas aplicaciones encuentren problemas al menos por este momento, hasta nuevas actualizaciones. Recordemos que hasta el día de hoy se pensó como una herramienta que trabaje en Chrome unicamente y todo el resto se suma de a poco por el buen recibimiento que generó.

Screencasts desde Chrome en segundos

Screencastify no funciona con elementos externos como Flash o Java justamente con la idea de que pueda trabajar sobre cualquier ámbito tranquilamente en un futuro.

En la pestaña de opciones que se despliega si accedemos al icono que aparecerá luego de la instalación podemos configurar algunos puntos importantes respecto a la grabación que realizaremos. Por ejemplo, seleccionar entre cinco resoluciones:

  • 1080p (1.900 x 1.200).
  • 720p (1.280 x 720).
  • 480p (854 x 480).
  • 360p (640 x 360).
  • 240p (426 x 240).

Tengan en cuenta que a mejor resolución, mayor será el peso del video cuando esté finalizado. Otro elemento seleccionable es si deseamos agregar audio u optamos por una grabación silenciosa para que quede asi o bien para editar luego con un programa mas avanzado sumando la música que deseemos.

En esa misma solapa aparecerán luego resúmenes listando los screencasts anteriores que hemos creado, junto a la información de la configuración actual y el botón para dar inicio a un trabajo nuevo.

Una buena alternativa para screencast fáciles y en segundos, que no nos hagan pasar un largo rato metidos en configuraciones o funciones avanzadas que quizás no requerimos.

Web: Screencastify para Chrome

12 Recursos gratuitos para extender Bootstrap

Pablo

Bootstrap me parece unas de las herramientas más interesante del momento, su facilidad de uso y su gran comunidad la convierten en un aliado a la hora de diseñar un nuevo proyecto.

herramientas para boostrap gratis

Si consideramos la cantidad de dispositivos que se utilizan hoy en día para visualizar un sitio web, creo que empezar de cero un proyecto prácticamente no tiene sentido, es por esta simple razón que considero muy valido valerse de herramientas como Bootstrap para hacer más sencilla la vida del desarrollador.

Sin embargo Bootstrap no lo tiene todo, siendo honesto podría decir que prácticamente nada en el mundo lo tiene, sin embargo la gran comunidad detrás de este proyecto permite extender las funcionalidades del framework de manera muy sencilla, logrando contemplar la mayoría de los escenarios posibles. En esta pequeña entrada voy a recomendar algunos recursos para extender las funcionalidades de Bootstrap, la mayoría de ellos en algún momento los utilice, otros los tengo pendientes para cuando sea necesario.

1. Datepicker. Un selector de fechas, funciona muy bien y cuenta con muchas opciones de configuración, es compatible totalmente con Bootstrap 2 y funciona en su tercera versión, aunque en esta ultima pueden aparecer unas pequeñas incompatibilidades, estas probablemente se solucionen en futuras versiones.

Un punto a destacar es que permite definir distintos idiomas, detalle que será de utilidad en sitios configurados para multiples idiomas.

datepicker para bootstrap

2. Modal. Un recurso para extender los diálogos modales de Bootstrap, brindando un abanico más amplio de opciones. Funciona en Bootstrap versión 3 y cuenta con la posibilidad de utilizar temas para configurar los aspectos visuales.

Para destacar: funciona en diseños adaptables, permite la carga de información mediante AJAX, se pueden configurar aspectos como el scroll del navegador, desactivando este ultimo según sea necesario.

dialogos modales

3. Wysiwyg. Un editor wysiwyg para ampliar las funcionalidades de un campo de texto. Como característica relevante podemos citar su capacidad de aceptar teclas rápidas en Windows y Mac. Es compatible con dispositivos móviles y funciona en todos los navegadores modernos.

editor de texto enriquecido

4. Daterangepicker. Otro selector de fechas, pero en este caso hace principal hincapié en la selección de rangos, inspirado claramente en las primeras versiones de Google Analytics.

bootstrap selector de rangos

5. Switch. Una pequeña biblioteca que funciona de manera conjunta con jQuery para crear botones segmentados animados. Convierte fácilmente los checkboxes y radio en segmentados mediante una configuración que no requiere más que unas pocas lineas de código. Soporta la mayoría de los navegadores, inclusive Internet Explorer en su versión 8 o superior.

toggle botones boostrap

6. Select. Una forma sencilla de modificar el comportamiento y visualización de las listas estilo drop-down, acepta la división de categorías empleando una muy sencilla estructura HTML que podríamos definir como básica.

selector multiple bootstrap

7. Tour. Un proyecto novedoso que permite crear lo que comúnmente conocemos como tours (que no es más que una presentación interactiva de un sitio web). Muy fácil de usar, la idea de este proyecto es la definir el tour por medio de pasos.

tour funcion boostrap

8. Multiselect. Un muy lindo recurso para crear listas drop-down con la posibilidad de selección multiple, un problema que aparece bastante seguido cuando desarrollamos formularios, con esta herramienta vamos a poder resolverlos rápidamente y sin complicaciones.

selector multiple con opciones

9. Image Gallery. Una fantástica herramienta, ideal para aquellos que buscan crear una galería de imágenes sin complicaciones. Tiene la posibilidad de reproducir las imágenes de forma continua y a pantalla completa.

galeria de imagenes con bootstrap

10. Lightbox. No hay mucho que decir, la popular biblioteca Lightbox pero adaptada a Bootstrap. Funciona perfecto y la documentación es prácticamente la misma que la del Lightbox original.

bootstrap lighbox

11. Calendar.Un magnífico calendario estilo Google diseñado con Boostrap, funciona perfectamente y tiene un aspecto minimalista, el mismo puede ser modificado relativamente fácil mediante el uso de CSS.

calendario

12. jqBootstrap Validation. Uno de mis preferidos, creo que es la mejor alternativa para validar formularios cuando empleamos Bootstrap en nuestro proyecto. Este recurso cobra especial valor cuando lo que buscamos es validar formularios en versiones antiguas de navegadores web, en las versiones más recientes y gracias a HTML5 no hay tanta complejidad sin embargo (y lamentablemente), todavía en el mercado existen muchísimas personas con versiones que no admiten este tipo de validaciones.

validar formularios con bootstrap

Si tienen algún complemento para recomendar por favor no duden en hacer su aporte, nunca vienen mal los recursos para extender la utilidad de Bootstrap :D

Shape [Corto de Animación]

Tamara

Creo que jamás había visto un corto que describiera el diseño en su máxima expresión y partiendo desde figuras que han necesitado siglos de adaptación por parte del entendimiento humano para comprender que las líneas no son la cosa misma sino una abstracción de la realidad y que bien puede ser representado de esa manera.

Desde allí y la noción de que el diseño es, desde su origen, una solución a las necesidades de la gente y que a medida que pasa el tiempo esas innovaciones van convirtiéndose en fundamentales para nuestra forma de vida.

Shape

Entiendo que es un filme optimista que ve la evolución del diseño como algo completamente positivo, pero la realidad es que depende de cada uno que así sea.

Shape fue dirigido y diseñado por Johnny Kelly. Que tengan un hermoso fin de semana! =)

Iconos gratuitos del mes de marzo 2014

Tamara

Luego de tantos meses que he venido compilando estos paquetes de íconos uno podría pensar que se terminarían en algún momento. La realidad es que mes a mes surgen nuevas y originales opciones que pueden ser ideales para el próximo proyecto. Lo bueno de estos envíos es que a medida que pasa el tiempo los estilos se depuran y actualizan y así podemos contar con una base renovada y que cubra nuevos aspectos según estilos particulares.

En esta oportunidad hay opciones clásicas que siempre se buscan como iconos sociales o de sistema, pero además algunos específicos que solo pueden ser utilizados en base a un concepto particular. También encontrarán diversos formatos que les permitirán mayor capacidad de edición y personalización a medida que los vayan necesitando.

Al implementarlos en cualquier proyecto puede se que encuentren con que un paquete no resulta satisfactorio para cubrir todo lo que requiere el desarrollo, es por ello que en la variedad podrán quizás hallar archivos complementarios que completen la colección y permitan que cada espacio tenga su elemento correspondiente para ofrecer al usuario una navegación dinámica y clara, además de estéticamente atractiva.

Sea Icon Set

Descargar Sea Icon Set | Graficheria

Office Icons

Descargar Office Icons | bilmaw

Flat Icons Set

Descargar Flat Icons Set | 365psd

Circle Icons

Descargar Circle Icons | 365psd

Random Icons

Descargar Random Icons | Dribbble

Japanese Icons Pack

Descargar Free Japanese Icon Pack | CreativeBloq

Flat Icon Set

Descargar Flat Icon Set | Graficheria

15 Flat Icons PSD

Descargar 15 Flat Icons PSD | Web3Canvas

Juicicons

Descargar Juicicons

Free Colorful Icons Set PSD

Descargar Free Set Colorful Icons PSD | Dribbble

150 Outlined Icons

Descargar 150 Outlined Icons | GraphicBurger

iOS Icons

Descargar iOS Icons | IconShock

12 Flicons PSD

Descargar 12 Flicons PSD | FreebiesBug

70 Clean Icons

Descargar 70 Clean Icons | 365psd

Phinx: La forma más sencilla de migrar bases de datos con PHP

Pablo

Phinx es un proyecto que le resultará interesante a la mayoría de los programadores PHP que utilicen bases de datos a diario y necesiten una forma rápida y sencilla de migrarlas.

Esta herramienta es excelente para lograr una muy correcta organización de nuestras bases de datos, brindando al programador de una serie de herramientas para crear, modificar y mantener las estructuras actualizadas sin recurrir a complejas instrucciones o procesos.

migrar bases de datos con php

La idea detrás del proyecto es la de proveer a los programadores PHP de un recurso con el cual administrar y mantener una base de datos sea una tarea sencilla, al menos desde el punto de vista de la organización y actualización.

Esta herramienta funciona de manera conjunta a Composer, mediante su utilización la instalación no requiere más que unas pocas lineas de código:

{
    "require": {
        "robmorgan/phinx": "*"
    }
}

Luego ejecutamos:

php composer.phar install --no-dev

Eso es todo no necesitamos nada más para instalar Phinx en nuestro proyecto.

Para crear una base de datos y mostrar un poco lo sencillo que resulta Phinx:

<?php

use Phinx\Migration\AbstractMigration;

class CreateUserLoginsTable extends AbstractMigration
{
    /**
     * Change.
     */
    public function change()
    {
        // create the table
        $table = $this->table('user_logins');
        $table->addColumn('user_id', 'integer')
              ->addColumn('created', 'datetime')
              ->create();
    }

    /**
     * Migrate Up.
     */
    public function up()
    {

    }

    /**
     * Migrate Down.
     */
    public function down()
    {

    }
}
?>

Como se puede ver en el ejemplo la clase ya nos brinda de dos mecanismos para realizar posteriormente una migración o actualización de estructura.

Un punto favorable: la documentación, es estupenda, muchos ejemplos y todos muy bien desarrollados.

Phinx se encuentra liberado bajo licencia MIT, lo que garantiza su libre utilización.

Web: Phinx