Esta herramienta es perfecta para resizar un montón de imágenes de forma automatizada, ahora mismo estoy procesando un archivo por lotes en el cual cojo una serie de fotografías de producto originales que me ha facilitado mi cliente, concretamente unas 30000 imágenes y creo un thumbnail con ellas a un tamaño de 110 px. de ancho, dándole en el proceso un efecto de “focus” con un 20% de incidencia, esto realza la foto en pequeños tamaño, para después grabarlas en otra carpeta con el prefijo min_ (the miniatura)  y todas en formato .jpg independientemente de cual sea el formato original con una calidad del 80%. Este es el caso práctico que me ocupa ahora mismo.

Otras cosas que os cuento, la velocidad del programa de lotes para modificar imágenes es impresionante, mi equipo es un Core i5 a 2,67Ghz. equipado con 12 Gb. y s.o. Ubuntu y según cuenta el programa la conversión de tamaños va a tardar cosa de 1 hora, es, pero para mi es poco tiempo pues las fotos originales disponen de un tamaño considerable y son infinidad de archivos. Puede leer una cantidad de tipos de archivo acojonante, pezón, impresionante desde .jpg a .svg pasando por tipos de archivos gráficos de los que ya no se acuerda ni el que los inventó. Ole, ole ole!

El programa tiene un funcionamiento muy visual e intuitivo, permite hacer muchas cosas, añadir, marcos, efectos de tipo cámara Polaroid, incluso te permite hacer efectos 3D, rotación espacial, efecto de sombra, buaf!!! La tira, por ejemplo si tienes una página web y quieres cambiar radicalmente el aspecto de todas las fotos que se muestran, construyes una macro le das el directorio donde están la imágenes, marcas “incluir subdirectorios” y clasca! En poco tiempo tendrás cambiadas todas las fotos de la web.

Cosas que le hacen falta, en la acción de guardar puedes desactivar por ejemplo los metadatos, forzar un tipo de imagen de salida, .jpg jpeg .jpe .gif, etc. pero claramente le falta algo para normalizar los archivos, por ejemplo pasarlos todos a minúsculas, por lo demás me quito el sombrero y descubro que aún no soy calvo.

Para los impacientes y ubunteros, instálala desde un terminal con un: sudo aptitude install phatch

Páginas relacionadas con este artículo:

1. Visor de imágenes con efectos y jQuery
2. Visor de imágenes con efectos y jQuery
3. Programas gratis alternativos

En fin esto es más bien un reseña con la que tan sólo pretendo dejar aquí la impronta de un interesante descubrimiento, la denominación de origen de los “grandes botones de acción” o así los quiero llamar yo a partir de ya.

Estos botones o megabotones no son otra cosa que esos botones que en muchas webs sirven para que destaque la acción del registro de usuarios o la suscripción, la compra, la prueba de algo, etc.

El diseño de estos botones debe ser muy cuidado a nivel estético y deben de llamar la atención sobre el resto de contenidos de la web pues en sí son los auténticos objetivos del site o página web en la que se encuentran y por tanto su presencia y buen diseño recaerán en una ostensible mejora en la usabilidad de tu web o de tu aplicación web.

Y por fin lo que quería compartir con vosotros, el enlace con una colección de estos big buttons en Noupe así que, vaquero sin vaca y sin pistolas, apunta y dispara:

http://www.noupe.com/design/50-effective-and-creative-call-to-action-buttons.html

Páginas relacionadas con este artículo:

1. Botones en CSS3
2. Botones en CSS3
3. Iconos botones y elementos para reproductores

La W3C le ha puesto logo a la implementación de HTML5, y no sólo se ha quedado hay, ha iconizado las diferentes tecnologías que van a integrar esta nueva normativa que va imperar sobre el HTML, la tecnología  supuestamente llamada a ser una auténtico Flash Killer.

Los iconos de las tecnologías aquí:

Dependiendo de lo que uses en tu web puedes mostrar unos u otros logotipo, por este orden según la imagen: El primer icono hace referencia al uso de una estructura semántica HTML5, el segundo de que se usan bases de datos en cliente, el tercero que es multidispositivo, esto es que se ha cuidado para que se pueda acceder con PCs, tablets, móviles, etc. El cuarto icono hac referencia a que se usa conectividad con datos en tiempo real, los http request de antes, saltamos de línea y el icono de multimedia, es decir que esto lleva vídeo bajo HTML5, el segundo de la segunda nos informa que se hace uso de las 3D, a darle caña al Canvas. El tercero de la segunda que parece una flor, no! no es una flor nuclearizada significa que se trabaja duro en optimizarlo para ofrecer un cran rendimiento, y último, el más bonito a mi forma de entender la estética nos informa que aquí se usa CSS3.

Hoy me siento icónico los de la W3 incluso han colocado un generador del gráfico personalizado, esto es, seleccionas las tecnologías que implementas pulsas un botón y te escupen un código html que tras ser insertado en tu web mostrará, preferiblemente a pie de página lo hachetemelerocinco que tu eres.

¿Qué son las 09:00 de un día de enero del año 2011 y todavía no tienes tu pegatina HTML5?

Corre!!!!  http://www.w3.org/html/logo/

Páginas relacionadas con este artículo:

1. Compatibilidad del HTML5 entre navegadores
2. Plantillas de páginas web con HTML5
3. El aporte que HTML5 representa a los desarrolladores web

Ideal para usar como carrousel de productos en cualquier página de inicio de tiendas online.

Puedes aprovecharlo para destacar los últimos productos y además de que la tienda mejorará en lo visual este slider hará que aumente el tiempo de estancia en la landing page más visitada de la tienda, es decir, en la home y con ello obtensrás un gran beneficio en el posicionamiento de tu web.

http://workshop.rs/projects/coin-slider/

Páginas relacionadas con este artículo:

1. Slider con hashtag bajo jQuery
2. Modificar muchas imágenes de forma automática
3. Otro slider o accordion pero este gratis

Excelente desarrollo de un sistema de capas deslizantes en modo acordeón o slider, lo mejor es que no precisa de jQuery pues está desarrollado exclusivamente en HTML+CSS3

Puedes verlo funcionar en dos sabores, horizontal y vertical recuerda que para descargarte el código para jugar deberás estudiar el HTML con un ver código fuente y descargarte el CSS… alguien ha oído FireBug?:

http://www.venturelab.co.uk/demos/accordion/

Páginas relacionadas con este artículo:

1. Creador visual de CSS3
2. Recursos en HTML5 y CSS3
3. Botones en CSS3

Bromas a parte, ha existido un abuso de proporciones inimaginables con la tipografía Comic Sans, la he visto en infinidad de tarjetas de visitas, en los logotipos de algunas empresas, en miles de powerpoints desde los más infantiles que proclaman el descomunal amor que algunos profesan a sus gatos a powers de esos que quitan el frío y animan el alma y lo de más abajo del alma, en fin que menos en un entierro me he encontrado a esta fuente en todos los lados.

A todos estos artistas de la Comic Sans va dedicada la siguiente obra, Comic Sans Criminal porque vosotros le habéis dado sepultura.

http://www.comicsanscriminal.com/

Páginas relacionadas con este artículo:

1. Web fonts
2. Tipografías grunge
3. Anatomía de una tipografía

Aún no hemos podido comprobar la funcionalidad de esta clase pero por lo que parece indicar no es un sólo redireccionador de url atendiendo al dispositivo o browser sino que parece que puede modifica los enlaces al vuelo existentes en la página web para mantenerse en el formato apropiado del dispositivo.

http://code.google.com/p/cimobile/wiki/CiMobile

Páginas relacionadas con este artículo:

1. Diferentes dispositivos diferentes resoluciones
2. Estructuras redimensionables para iPhone
3. jQuery para móviles

Puedes descargar la hoja de estilos CSS en el siguiente enlace.

http://horaciobella.com/zardi/

Páginas relacionadas con este artículo:

1. Creador visual de CSS3
2. Recursos en HTML5 y CSS3
3. Iconos botones y elementos para reproductores

O como dicen los de lengua inglesa, ver el Wireframe, see the wireframe.

¿Qué es un wireframe?

Pues como ya decimos en el título un wireframe es un esquema de disposición de los diferentes elementos de una página web. Los módulos visuales sin textos en los que se distribuyen los contenidos.

La utilidad que le podemos dar es la del estudio y la inspiración, por ejemplo cuando una página web te gusta o te atrae por su usabilidad, ejecutas la herramienta y podrás ver su estructura, a partir de aquí inspira y expira código fuente hasta que la mejores.

En la captura de pantalla anterior te mostramos el wireframe de la página corporativa de nuestra aplicación de gestión online invOOice.com, una distribución la mar de sencilla y clara, en el header, selector de idiomas, logo, menú de navegación cuerpo de a tres columnas con imagen en cada una y un footer.

La aplicación para ver el wireframe

Esta aplicación es un Bookmarklet, es decir una aplicación web que se puede instalar como favorito, para instalarla:

Arrástra ESTO hasta tu barra de favoritos, si no te funciona dirígete a la página de autor y allí encontrarás más botones para instalarlo y una mayor documentación.

Os copiamos un vídeo de youtube sobre el funcionamiento de esta aplicación:

Enlace original: http://www.volkside.com/2010/12/introducing-wirify-the-web-as-wireframes/

Páginas relacionadas con este artículo:

1. Menú de navegación desplegable en CSS3
2. Estructuras redimensionables para iPhone
3. Medir la velocidad de una web

Bueno hoy algo sencillito, un CSS reset de los de copipastear, es totalmente free y open source, yo por respeto al autor “Eric Meyer” dejo su referencia, pero si lo necesitais para un proyecto comercial lo podeis quitar sin tenerlo que refreir ni nada, a pedir de boca. Aquí va:

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Páginas relacionadas con este artículo:

1. Cómo añadir un botón para compartir con Facebook
2. Tabla MySQL con provincias Argentinas
3. Estilos CSS del cursor