Archivo de la categoría: Diseño

Lightly Icons: iOS 7 iconos inspirados en Helvetica Neue

Lightly IconsSi estais buscando los iconos que se usan en iOS 7 aqui tenéis el enlace donde podéis descargarlos 350 iconos para usarlos en vuestros proyectos.

http://tmthymllr.com/lightly-icons/

 

5 errores evitables en el diseño web

He encontrado esta pagina web en la que mas que errores a la hora de la implementación de una pagina web es mas a la hora de implementar o modificar una pagina web, y seguro que mas de uno sabe casos relacionados con esto, por ejemplo a todos nos suena la frase “Esta web, seguro que la ha hecho el primo o el sobrino de alguien” con todos mis respetos a los primos-sobrinos.

http://www.artincom.com/5-errores-evitables-en-diseno-web/

Bootstrap Datepicker

Bootstrap se esta convirtiendo desde hace tiempo en casi un estandar a la hora de realizar paginas web. Algo que siempre nos lleva de cabeza, es el campo Date a la hora de introducir fechas, sobre todo para los que desarrollamos en castellano, ya que si bien algunos navegadores lo soportan, a la hora de mostrar la fecha esta aparece en un formato distinto al que usamos nosotros. He dedicado unas cuantas entradas a la personalización del Jquery datepicker en castellano pero creo que con este Datepicker para Bootstrap voy a tener que modificar unos cuantos de los que tengo desarrollados.

https://github.com/eternicode/bootstrap-datepicker

Configurando Sublime Text 3

Sublime TextSublime Text es una aplicación para desarrollo la cual me esta ganando cada día mas. Tengo que decir que no soy asiduo de ella ya que para grandes proyectos uso PHPStorm y para cosas puntuales sigo siendo muy fan de TextMate, o incluso Vim, pero estas aplicaciones tienen unos “peros”, los cuales los cubre el Sublime Text. Y diréis,¿ que “peros” le ves? pues bien, PHPStorm, como todos los entornos de programación basados en Java (Eclipse, Zend Studio, Netbeans), consume barbaridad de recursos, y el “peso” es muy grande. TextMate es solo para Mac, y Vim es solo para sistemas *NIX, ¿entonces,si necesitamos un entorno de programación ligero y que se pueda utilizar en todos los sistemas? pues ahí esta Sublime Text, valido para cualquier plataforma, ligero y potente.

Sublime Text es muy personalizable y lo podemos ajustar a nuestra manera de programar, y para ello contamos con cantidad de paquetes para complementarlo y personalizarlo a nuestro gusto. En este enlace nos explican como instalar estos complementos, personalizar fuentes y configurar el tema para dejarlo a nuestro gusto. Yo os recomiendo el Soda Light, sobre todo si estáis acostumbrados a TextMate.

A la hora del desarrollo yo os recomiendo instalar tambien los siguientes paquetes: SublimeLinter-php SublimeLinter-phpcs SublimeLinter-phpmd, HTML, SimpleTODO.

Tether posiciona elementos de una manera eficiente

Esta es una libreria muy sencilla que nos puede servir de mucha ayuda a la hora de mantener dos elementos juntos en una pagina web de una manera sencilla y efectiva.

Por ejemplo supongamos que tenemos dos divs, uno llamado yellowBox y otro llamado greenBox, y queremos que se mantengan unidos en la esquina de arriba:

Mas información: http://github.hubspot.com/tether/

25 diseños para webs de eventos

Necesitáis algo de inspiración para realizar una web de eventos. En el siguiente enlace hay unos cuantos ejemplos muy buenos http://inspirationfeed.com/inspiration/websites-inspiration/25-well-designed-event-websites/

Temas gratuitos Bootstrap

BootstrapBootstrap, como muchos de vosotros ya conocéis, es uno de los frameworks para diseño de paginas web mas usado hoy en día. Esto hace que los recursos que podemos encontrar para personalizarlo a nuestro gusto son numerosos. En la entrada de Bootswhatch ya veíamos unos cuantos temas para usar gratuitamente tanto en la versión 2 como en 3 de Bootstrap, en la pagina de Black Tie podemos encontrar una gran colección de temas, destinados para la versión 3 para poder aplicar según la temática de nuestra web.

Convertidor de RGB a Hexadecimal

Seguramente en algún momento mientras estamos desarrollando hemos necesitado convertir un color de RGB a Hexadecimal, por ejemplo, en los nuevos diseños de paginas web, se esta empezando a usar cada vez mas el RGB o RGBA a la hora de establecer los colores, y puede que necesitemos trasladar ese color a hexadecimal, para ello podemos usar la siguiente pagina web para que nos convierta el color http://www.javascripter.net/faq/rgbtohex.htm

Como se mueven nuestros ojos cuando vemos una pagina web

Para los que nos dedicamos al desarrollo/diseño de paginas web, es bastante conocido el principio de como hay que ubicar los elementos  para que el usuario vea primero lo que queremos que vea primero. La siguiente imagen nos muestra como ubicar y distribuir los elementos para que nuestra distribución sea efectiva.

Articulo original en ingles: http://www.getelastic.com/eye-tracking-infographic/

eye-tracking-2

Conocer la longitud y latitud en Google Maps

Si habéis trabajado o trabajáis, os pensáis trabajar con el API de Google Maps, esta web os va a ser de mucha utilidad http://universimmedia.pagesperso-orange.fr/geo/loc.htm ya que poniéndole la dirección del lugar que buscáis o moviendo el marcador os va a devolver la latitud y longitud, y nos va a venir muy bien para poder diseñar nuestros propios mapas con el API de Google Maps.

Web de la API v3 de Google Maps https://developers.google.com/maps/documentation/javascript/?hl=es