Diseño

Recurso online para aprender jQuery

por

 Una de las librerías con mayor éxito para el desarrollo web ha sido, es y será por un buen tiempo más jQuery. Aunque es muy sencilla de utilizar, he de ahí su popularidad, existen recursos que nos brindar un panorama claro sobre como implementar esta herramienta en nuestros proyectos.

Tenemos por supuesto como primera instancia el sitio oficial  así como un buen número de tutoriales, blogs y foros regados a lo largo y ancho de Internet. Entre ellos se encuentra el siguiente libro online que les traigo directo a la puerta de su hogar. Es bastante básico, pero si llegaste a esta entrada, supongo que buscas algo similar.

El libro lo puedes consultar desde aquí.

Espero que les sea de utilidad, y puedan con ello salir de uno que otro apuro.

Visto en: wwwhatsnew

Identifica las fuentes que utiliza un sitio web con Fount

por


Muchas veces pasa que vemos un sitio web con un diseño impresionante y tipografías que nos llaman mucho la atención pero no sabemos cuál es su nombre. Una opción es investigar el CSS del sitio y sacar manualmente el nombre de las fuentes, pero les quiero ofrecer una opción mejor, y se llama Fount.

Fount es un bookmarklet que nos permite averiguar qué tipografías usa un sitio web de forma rápida y simple. Lo único que tienen que hacer es entrar en el enlace de abajo e instalar el bookmarklet. Luego, cuando entran en el sitio web deseado pinchen en el bookmarklet para activar la función de detección de fuentes.

Ahora vayan clickeando en cada una de las fuentes que les gusten y arriba ala derecha les dirá el nombre, tamaño, propiedades, etc. Si quieren desactivar el modo de detección pinchen nuevamente en el bookmarklet y podrán seguir navegando normalmente en el sitio.

Enlace: Fount

Visto en WebResourcesDepot

La anatomía de un sitio web perfecto [Infografía]

por

Navegando por la web me encontré con una infografía que muestra la anatomía o estructura de un sitio web perfecto, esta infografía fue creada basándose en la perfección de PuntoGeek.com teniendo en cuenta los aspectos de: diseño web, navegación adecuada dentro del sitio, usabilidad, contenido, SEO (optimización en motores de búsqueda), Social Media (la parte de las redes sociales) y otras dos que considero relleno.

Crear tablas comparativas online con Compare Ninja

por


Compare Ninja es una útil herramienta que nos permite generar tablas comparativas online de forma totalmente rápida y gratis. Es especial para todos aquellos que ofrecen productos o servicios en sus sitios, y quieren armar tablas comparativas entre los distintos productos.

Con Compare Ninja podemos crear esas tablas en segundos sin necesidad de conocimientos de HTML y CSS. Lo único que tienen que hacer es ingresar un título para la tabla, especificar la cantidad de productos y categorías a comparar y luego comenzar a editar cada uno de los ítems por separado.

Una vez que terminan la tabla pueden descargar el código HTML/CSS que les genera el sitio e insertarlas en sus propios sitios web.

Enlace: Compare Ninja

Visto en WebResourcesDepot

Divide una imagen con jQuery

por

Los que conocen jQuery sabrán que nos abre un mundo de posibilidades, una de ella muy enfocada a la parte visual de algún sitio web. En esta ocasión me encontré con un curioso plugin, bastante ligero y fácil de usar, que da un toque diferente a las imágenes, dividiéndolas en varias partes, tal como se muestra en la imagen que encabeza la entrada.

Su implementación es muy sencilla, y por cierto, se llama PicStrips:

$("#s").picstrips( {
	splits: 18,
	hgutter: '2px',
	vgutter: '10px',
	bgcolor: '#fff'}
);

Pueden modificar el número de divisiones, su grosor, color de fondo y el espaciado en la parte inferior y superior. Sencillo, ¿No?

Sitio web: PicStrips

Visto en: kabytes

Logotype Maker, el mejor sitio para diseñar logos online gratis

por


A veces, para los que no tienen muchos conocimientos de diseño, diseñar un logo puede ser una tarea titánica, sobre todo si no tenemos ningún programa de diseño gráfico ni los recursos necesarios. Logotype Maker es un generador de logos online de muy alta calidad y de una sencillez de uso que realmente da risa.

Primero empezamos poniendo un texto (el que llevará el logo), y el sistema nos generará una serie de logos aleatorios con distintos diseños. Ahí tienen que elegir el que más les guste y comenzar a editarlo, pudiendo agregar distintos degradados, cambiar las tipografías, agregar sombras, bordes, reflejos, y muchísimas cosas más. Incluso hasta podemos agregar imágenes desde la biblioteca o subirlas desde nuestro disco.

Una vez que terminamos podemos descargar el logo en el tamaño que queramos y en muy alta calidad, ya sea en formato PDF, PNG o en un ZIP.

Debo reconocer que de todos los generadores de logos online que probé, Logotype Maker es el mejor de todos, ya sea por su facilidad de uso, por la calidad de los diseños, y por las opciones de personalización que tiene.

Enlace: Logotype Maker

Visto en GeeksRoom

Picozu Editor: Excelente editor de imágenes online con soporte para capas

por


Si bien hay muchísimas opciones para editar fotos online, hoy les quiero recomendar una nueva herramienta llamada Picozu Editor, un nuevo editor de imágenes online que vale la pena dar a conocer porque es muy útil.

Con Picozu Editor podemos hacer todo tipo de ediciones (no tan) básicas a nuestras imágenes, incluyendo el trabajo mediante capas, pinceles, ajustes de color, aplicar decenas de filtros y avanzadas herramientas. Algo destacable es que nos pide permiso para almacenar datos en nuestra computadora, para así poderlo usar offline luego.

En todo momento se va guardando el avance de nuestro trabajo de forma automática, y el sitio nos lo hará saber mediante notificaciones que aparecen en la esquina inferior derecha de la pantalla.

Lo que me gustó de este editor es que tiene una interfaz muy limpia e intuitiva, y lo mejor de todo, es totalmente gratis.

Enlace: Picozu Editor

Visto en Addictive Tips

BgPatterns: Herramienta para generar patterns online

por


BgPatterns es una excelente y útil herrmaienta para diseñadores o personas que quieran diseñar patterns online de forma gratuita. Su uso es muy simple y nos permite generar patterns o patrones para utilizar como fondos en cualquier tipo de diseño sin necesidad de conocimientos.

Lo bueno es que con BgPatterns podemos configurar:

  • Los colores que tendrá el pattern.
  • El canvas (hay 5 diferentes), su opacidad y tamaño.
  • La imagen del pattern (hay muchos diseños disponibles de varias temáticas), opacidad y tamaño.
  • Rotación del pattern.

Enlace: BgPatterns

Logo Maker, herramienta para crear logos online

por


Logo Maker es una interesante herramienta que nos permite crear logos online de forma totalmente gratuita y sin tener ningún tipo de conocimiento de diseño. Obviamente no es un Photoshop, pero nos puede sacar de un apuro más de una vez, y sino es una excelente alternativa para los que buscan logos no muy rebuscados y creados en segundos.

Su uso es muy sencillo, tiene una gran cantidad de símbolos o «shapes» para que podamos insertar en el logo, diferentes tipografías a las cuales podemos darle formato para que el logo quede bien diseñado. Si lo deseamos podemos subir una imagen para utilizar en el logo o bien subir uno que ya tengamos hecho y editarlo.

En todo momento podemos ver un preview del logo con el botón del ojito que hay abajo a la derecha, y cuando terminemos descargamos el logo listo!

Enlace: Logo Maker

Freebie para diseñadores: El Revólver Social

por

Para algunos diseñadores no hay nada mejor que encontrarse con un freebie, un regalo de otros diseñadores. Esta vez les traigo un diseño que me encontré en Forrst y su creador lo titula ‘The Social Gunman’. El diseñador lo publica gratuitamente en su blog disponible para la descarga.

Se trata de varios íconos de Social Media organizados en forma de balas para un revólver (bastante creativo). Se encuentra en formado .psd y con una calidad máxima para cambiar su tamaño sin problemas de pixelación. ¿Una vista previa?:

¡¡ Clic en la imagen para ir al sitio oficial y comenzar la descarga !!