Es muy difícil lograr diseños armónicos que permitan desplegar solamente imágenes en formato web, y más complejo aún, hacer que este sitio se visualice bien en cualquier tipo de dispositivo. Es por ello que sin importar la estética, esta plantilla puede resultar muy útil para analizar la forma en la que está realizada.

Parallelism es una template gratuita elaborada en HTML5 que se encuentra disponible para descargar de forma gratuita y que cubre las necesidades relacionadas al muestrario estilo portfolio. Ya sea que son artistas, dibujantes o diseñadores, un sitio así se destaca por si mismo sin importar el diseño, ya que las que hablan serán las imágenes.

Descargar Parallelism | HTML5UP

Además del planteo original para desplegar los elementos, Parallelism cuenta con la cualidad de ser adaptable a las diferentes pantallas ya sean en resoluciones clásicas como en tablets o móviles, tanto el sitio como las previsualizaciones de las imágenes se verán correctamente.

Quizás falte un poco de espacio para la información, ya que usualmente aquellos que tienen material para realizar un portfolio de estas características, participan en proyectos o exposiciones que desearían mostrar allí. Pero no es nada que no pueda reemplazarse con perfiles sociales para los que si encontramos un espacio en el sitio. La plantilla puede resultarles muy útil para aplicarla en con sus propios perfiles, o para analizar su construcción ya que funciona de forma interesante y también es atractiva de forma visual.

Solemos encontrar en la web, opciones que brindan un espacio para la creación de fuentes a través de los dispositivos de entrada clásicos que pueden ser: un teclado, un mouse o una tableta wacom. Es la primera vez que escucho sobre una aplicación que permita crear fuentes tipográficas de forma simple, rápida y al paso y subirlas para compartir en el mismo momento.

Pues esto es lo que realiza iFontMaker™, un editor que funciona idealmente en iPad y tiene un costo de casi U$7.- y por otro lado, hay una versión más barata para Windows 8 que puede adquirirse por U$5,15.- En general, dejo de lado las aplicaciones que son de pago, pero hay ocasiones en las que la originalidad y utilidad del software lo valen y este es uno de esos casos.

Una vez que generamos nuestra propia creación el sistema generará un tipo de letra que puede ser enviada por email o convertida en un archivo TTF, esto requiere de una conexión a internet ya que lo realiza a través de 2ttf.com y necesitara de ello para ser descargada. La fuente será soportada por Firefox, Safary, Google Chrome e Internet Explorer 7+.

Para aquellos que se dedican a crear tipos de letra puede ser una herramienta que capture los momentos exactos de inspiración cuando anden dando vueltas por allí, y también, puede ser una excelente plataforma para que aquellos que aún no se han animado a crear sus propias fuentes, lo hagan de forma fácil.

Sitio: iFontMaker | Visto en: SwissMiss

Quizás por la necesidad de resumir todo y unificar que se siente presente en todo ámbito virtual hoy en día, cada vez salen mas a la luz sitios que se ocupan de guardar marcadores o diferentes cosas relacionadas a Internet.

Uno de ellos es Dragdis, que a pesar de tener la misma base, la ofrece sumando algunas opciones y seguramente confiando en ésto para diferenciarse del resto.

En lo referente a lo visual es muy minimalista, con botones en tonos planos y el estilo de “moda” actualmente. Si bien podría pulirse un poco en este aspecto cumple perfectamente con el orden visual, algo importante en este tipo de herramientas.

Luego de registrarnos nos invitará, claramente, a instalar la extensión en nuestro navegador. Luego solo queda comenzar a sumar elementos a nuestra galería. ¿Cómo? eso va a depender del tipo:

• Videos: Arrastrando desde el pequeño icono que veremos si acercamos el mouse a la esquina superior izquierda.
• Imágenes: Simplemente arrastrándolas.
• Textos: Seleccionando la parte que deseamos guardar y arrastrando.
• Vínculos: Desde el icono del mismo en la barra de direcciones.

Es así como en segundos moveremos lo deseado hasta la derecha, donde se asomará una columna con las carpetas que tengamos creadas, manteniendo un orden al momento sin necesidad de ocuparnos de eso luego.

Por defecto el panel del sitio nos creará tres de ellas: Inspiración, Ver luego e Ideas. Por supuesto podemos eliminar la que deseemos y crear nuevas.

Todos los elementos se verán en el inicio mediante miniaturas, pudiendo disfrutar de los videos allí mismo sin necesidad de ser dirigidos al sitio original.

Finalmente, ingresando a cada uno veremos la fuente de donde lo obtuvimos, un campo donde podemos agregar notas o etiquetas, su enlace directo y por supuesto, iconos para compartirlo en Facebook, Twitter o G+.

Dragdis por ahora se encuentra en beta con invitación, pero si la solicitan no demora demasiado. En mi caso al otro día la tenía esperando en mi casilla de mail.

Web: Dragdis

Zelect es otra opción para personalizar campos del tipo Select de forma sencilla y ágil, con la ventaja de incorporar un pequeño buscador o filtro interno entre las distintas opciones, algo ventajoso para el usuario cuando las opciones son muchas.

El proyecto cuenta con una serie de características que lo convierten en una excelente opción a la hora de modificar la estructura de un campo select clásico, por ejemplo su aspecto visual se puede modificar libremente por medio de las hojas de estilo, puede gestionar tanto select estáticos como aquellos que se generan de forma dinámica utilizando AJAX para solicitarle información al servidor.

Ejemplo de Select personalizado:

La estructura HTML es basica:

<select id="select-backed-zelect">
  <option value="first">First Option</option>
  <option value="second">Another Option</option>
  <option value="third" selected="selected">Third option</option>
</select>

La inicialización, sencilla:

$('#select-backed-zelect').zelect()

Su creador al momento de construir este recurso decidió dar una buena serie de métodos para controlar las acciones que puedan generarse desde el campo, por ejemplo la selección de una opción puede disponer del lanzamiento de un evento.

También tiene varias opciones fáciles de configurar para modificar la forma en que se despliegan los distintos items, una de ellas es la velocidad con la que se despliega la información, otra es el texto por defecto cuando el filtro no encuentra resultados, y así hasta llegar a un nivel de integración casi absoluto.

El proyecto es muy liviano, para que se den una idea esta construido utilizando menos de 300 lineas de código en total.

En el apartado de Github de Zelect van a encontrar varios ejemplo y formas de utilizar esta pequeña biblioteca, les recomiendo ver las distintas opciones para seleccionar cual es la más oportunidad según la plataforma que estén utilizando.

Web: Zelect

WideArea es un pequeño proyecto que podemos utilizar en la realización de campos del tipo TextArea con la funcionalidad de activar el área a pantalla completa para facilitar la escritura de textos largos.

La tecnología utilizada es bien básica, por un lado JavaScript para realizar las funciones relacionadas al accionar del campo y por otro CSS para darle un estilo personalizado y que se pueda integrar perfectamente con nuestro proyecto.

Para utilizar WideArea simplemente debemos incorporar los archivos .js y .css a nuestro proyecto, luego agregar al campo textarea una simple etiqueta HTML data-widearea=”enable” y finalmente llamar a WideArea de la siguiente manera:

wideArea();

WideArea es una solución simple y que tiene un peso acorde a las funcionalidades que brinda, apenas 6kb en total, que corresponden a 2kb el archivo JavaScript y 4kb a la hoja de estilo.

La licencia del proyecto es MIT, como la mayoría de los proyectos similares que comentamos frecuentemente en Kabytes.

Web: WideArea

Una nueva estética para agregar a las tantas que ya hemos enviado, este paquete posee una colección de íconos elaborados en líneas rectas, super simples para aplicar en cualquier diseño.

Lo bueno es que al no tener un estilo particular, puede combinarse con casi cualquier diseño. Editarlos y cambiar sus colores es muy fácil, aunque quizás encuentren problemas con la variedad de opciones, ya que no se trata de un paquete enorme.

Descargar Thin Stroke Icons | 365psd

Aún así para diseños de interfases básicas o llamadas pequeñas en un blog, aplicación móvil o sitio web, resultarán muy atractivos además de darle un toque original al diseño en su conjunto. Están diseñados en Photoshop y se descargan de forma gratuita para utilizar donde gusten.

Las animaciones gráficas que en un momento se hicieron con Flash, hace tiempo que fueron reemplazadas por JavaScript, esto es primeramente para una performance más controlada y por otro lado para que todo lo animado sea accesible a los robots de motores de búsqueda y al mismo tiempo los sitios sean validados.

Se ha institucionalizado la forma de hacer las cosas de esta manera y con el surgimiento de las animaciones en CSS, podemos encontrar aún más experimentos sobre el contenido sin sacrificar que el sitio esté correctamente realizado. Lejos quedaron los menúes hechos con tablas, ahora con CSS y HTML hasta podemos lograr un efecto acordeón que antiguamente requería si o si saber de programación.

Visitar Accordion without JavaScript | CSSDeck

El ejemplo que comparto hoy tiene visualmente un formato popular que puede encontrarse en una gran cantidad de sitios, suele denominarse toogler y la diferencia es que no utiliza códigos JavaScript para lograr el mismo resultado. Una buena forma de experimentar o implementar en sus sitios sin las complicaciones del JavaScript.

LanguageDetector es una clase PHP, gratuita, para detectar el idioma de cualquier texto de forma automática.

Esta clase tiene varias aplicaciones, una de ellas es automatizar el proceso de detección de idioma en una base de datos que debemos organizar. Su utilización es de lo más sencilla. Una vez que tenemos el modelo creado (hay un archivo de ejemplo en la descarga), simplemente escribimos algo como lo siguiente:

// register the autoloader
require 'lib/LanguageDetector/autoload.php';

// we load the language model, it would create
// the $config object for us.
$detect = new LanguageDetector\Detect('language.php');

$lang = $detect->detect("Agricultura (-ae, f.), sensu latissimo, 
est summa omnium artium et scientiarum et technologiarum quae de 
terris colendis et animalibus creandis curant, ut poma, frumenta, 
charas, carnes, textilia, et aliae res e terra bene producantur. 
Specialius, agronomia est ars et scientia quae terris colendis student, 
agricultio autem animalibus creandis.")

var_dump($lang);

Eso es todo

Es interesante ver el funcionamiento interno de esta clase escrita en PHP. Cuenta con un pequeño algoritmo, que el autor define como una especie de PageRank, para clasificar y comparar las distintas palabras que componen el texto y así poder concluir el idioma en el que se encuentra escrito.

Web: LanguageDetector

Spiffy es uno de los primeros showcase de plantillas HTML5 y CSS3 que pude encontrar. Con un repertorio de trabajos no muy amplio pero si de gran calidad, las plantillas se encuentran perfectamente organizadas listas para ser descargadas.

Cada una de las plantillas se puede descargar de forma gratuita, además pueden probarse directamente desde el sitio apretando un simple botón que nos muestra una vista previa totalmente funcional.

Para descargar las plantillas no necesitamos realizar ningún pago ni registro, simplemente seleccionamos descargar y tendremos todos los archivos necesarios en nuestra computadora.

Cada una de las plantillas vienen con todos los archivos necesarios para su total edición, punto más que positivo para una correcta integración con nuestros contenidos.

Todos los trabajos se encuentran liberados bajo licencia Creativa Commons, en su versión que solo tienen como requerimiento su atribución. Honestamente con la calidad que tienen es un precio muy bajo y justo que debemos pagar.

Actualmente Spiffy cuenta con 12 plantillas en su stock, este numero seguramente se ira incrementando con el pasar de los días.

Web: Spiffy

Rando era de esas aplicaciones que iban quedando en la lista de las que debo probar y siempre por un motivo u otro salteaba. Para sorpresa mia, cuando finalmente le di una oportunidad quedé encantada.

La idea de Rando es extremadamente simple: regalar una imagen. Sin vueltas, configuraciones ni filtros. Uno ingresa y se encuentra con un entorno súper minimalista y un solo botón (deslizándonos a la derecha veremos un mini tutorial). Al pulsar dicho botón, se activa la cámara, tomamos una fotografía y el mismo cumplirá la función de enviarla a alguien completamente aleatorio del mundo que por supuesto, tenga la aplicación. A los pocos minutos, sonará una notificación que nos avisará que hemos recibido a cambio otra foto.

Lo único que veremos al pulsar en la foto será (si el usuario lo tiene activado) su ubicación en un mapa mundial. Nada mas. No hay nombres, enlaces, posibilidad de marcar como favorito o aplicar un “me gusta”.

Como bien comentan sus creadores, ésto fue pensado desde un principio. No incluirían los elementos sociales tan presentes en todo hoy en día. A lo único que apuntaba, según sus palabras, es a “regalar un momento de nuestras vidas o una escena recibiendo otra a cambio”. Idea atractiva para escapar un poco de tantas redes sociales.

Luego de utilizarlo puede gustar o no pero nadie podrá negar que apunta a algo completamente diferente a lo que solemos ver, algo que la transforma en una herramienta atractiva de por si que dependerá de cada uno el tiempo que le demos de uso. De momento sigue en desarrollo, teniendo como principales metas acelerar el envio de imágenes y sumar la posibilidad de guardar en la misma app los “randos” que deseemos (actualmente se guardan en nuestra galería).

Por mi parte, me encantó la originalidad y el minimalismo. Genera una sensación rara la de enviar algo y que la única interacción sea la de recibir una imagen, algo que me hizo notar lo acostumbrada que estoy a la interacción con otros usuarios en las redes.

Rando es completamente gratuito tanto para iPhone, iPod touch y iPad como para Android.

Dicho todo, los invito a que la prueben y, ¿quién sabe? en estos días termino recibiendo un rando de ustedes .

Rando – Descargar: App Store – Google Play