RSS
 

Archive for the ‘grafico’ Category

APNG, graficos animados con calidad PNG

17 Nov

Cuando se habla de imágenes animadas enseguida se viene a la mente el formato GIF, un tipo de archivos que cumple con la función de mostrar movimiento pero que tiene limitantes muy grandes, como el hecho de no soportar transparencia en degradados o limitarse a exponer solo 256 colores.

Una muy buena alternativa a este formato la descubro gracias a wydstudios, se trata del formato aPNG (Animated Portable Network Graphics) un tipo de archivo que permite crear animación con las ventajas de los archivos PNGs (Soporte a transparencia en degradados y profundidad de color en 8 y 24 bits). En contra parte tiene algunas desventajas que no han ayudado a una rápida aceptación: un alto peso de los archivos, pocas herramientas para su creación y soporte limitado en los navegadores.

En este momento los únicos navegadores que soportan este tipo de animación son: KSquirrel 0.7.2, XnView 1.92, Opera 9.5 y Mozilla Firefox 3. Y puedes ver ejemplos y más información de este tipo de imágenes en el sitio oficial de este formato y en Mozilla Labs.

Algunas herramientas interesantes para trabajar con este formato son: APNG Assembler, una sencilla herramienta con la que puedes crear animaciones unicamente subiendo un archivo zip que contenga los pngs de la secuencia y APNG Edit extension una extesión para Firefox dedicada a editar y crear este tipo de gráficos.

A mi parecer, es un formato que promete mejorar en mucho la calidad de la animación gráfica pero que aun necesita desarrollo para adaptarse a las exigencias actuales (alta calidad con pocos recursos).

Fuente:  Blog and Web

SocialTwist Tell-a-Friend
 

Backgrounds animados con jQuery

30 Sep

Interesante script para jQuery que usa el plugin para modificar la posición del background y que nos permite hacer efectos con el background similares a los que se suelen hacer con Flash.

Mediante un fondo de mayor tamaño que el elemento y con una forma irregular (esquinas, ondas, degradado, …) se trata de que al mover el fondo, el efecto que se produzca sea el de una animación.

El script sería algo así:

$('#nav a')
  .css( {backgroundPosition: "0 0"} )
  .mouseover(function(){
    $(this).stop().animate(
      {backgroundPosition:"(0 -250px)"},
      {duration:500})
    })
  .mouseout(function(){
    $(this).stop().animate(
      {backgroundPosition:"(0 0)"},
      {duration:500})
    })

Using jQuery for Background Image Animations

Vía / Script & Styles

SocialTwist Tell-a-Friend
 

Coverflow: galeria de imagenes al estilo iPhone

19 Sep

Muy buena librería javascript que nos permite visualizar imágenes como la galería de carátulas que ofrece el iPhone. La transición entre imágenes será mediante una rotación en 3D (un lado es más alto que otro mientras se va colocando en la posición correcta).

coverflow.png

Muestra etiquetas y efecto de reflejo, y su uso es muy sencillo:

tan solo habría que ejecutar un script similar a este:

code lang="javascript">Coverflow.init(
[
	{src: 'img/img-0-lo.jpg', label:
{album: 'All That I Am', artist: 'Santana'}},
	{src: 'img/img-1-lo.jpg', label:
{album: 'August & Everything After', artist: 'Counting Crows'}},
  /* ... */
	{src: 'img/img-10-lo.jpg', label:
{album: 'Viva la Vida', artist: 'Coldplay'}},
	{src: 'img/img-11-lo.jpg', label:
{album: 'We Were Here', artist: 'Joshua Radin'}}
],
{
	createLabel: function(item)
	{
		return item.label.album +'
'+ item.label.artist;
	},

	onSelectCenter: function(item, id)
	{
		var img = new Image();
		img.onload = function()
		{
			Lightbox.show(this.src, id);
		};
		img.src = item.src.replace('-lo.jpg', '-hi.jpg');
	}
});

JS Coverflow

Fuente: Sentido Web

SocialTwist Tell-a-Friend
 

Herramientas y ejemplos para mejororar tu desempeño como freelancer

19 Sep

Todos sabemos que en internet encontramos cientos de servicios gratuitos que nos ayudan a mejorar nuestro trabajo como freelance, sin embargo aveces nos resulta difícil encontrar los más adecuados, por ello les quiero compartir una serie de herramientas seleccionadas para apoyar tu trabajo.

Organizando nuestro trabajo:

organizarEmpecemos organizando nuestra área de trabajo y definiendo bien los materiales o documentos con los que vamos a trabajar con el cliente. Utilicemos herramientas efectivas que nos permitan tener todo bajo control, tomemos referencias de cómo hacer mejores y efectivos nuestros documentos.

  • Contrato de Diseño Web:este es un ejemplo de un contrato de diseño web de la empresa net-aspect en donde se describen cada uno de los aspectos a trabajar. Te sirve como referencia para que adecues el tuyo según las necesidades del cliente y tu criterio.
  • Contrato de desarrollo web: en este artículo encontrarás un interesante proyecto sobre el contrato de desarrollo web y las razones para crear uno.
  • Maneja un brief: ejemplo de un brief con su estructura, características y presentado a través de el servicio Scribd que te permite compartir documentos de una forma segura.
  • Organizar tus proyectos y tareas: remember the milk es un servicio muy efectivo, que te permite gestionar tareas de forma sencilla. Es una interface intuitiva con muchas características e integración de servicios que te ayudarán a organizar tu tiempo y trabajo.

Tormenta de ideas y estructura del proyecto:

freelanceAl iniciar un proyecto es importante la tormenta o lluvia de ideas, porque es allí donde se van definiendo las características, estructura, propuestas para un producto final, estas herramientas te pueden ayudar a organizar esas tormentas de ideas.

Diseño Web: algunas herramientas básicas

freelanceSi eres diseñador y desarrollador web, seguro ya tienes herramientas básicas que utilizas en cada uno de tus proyectos, pero como en este medio nunca se deja de aprender, puede que alguna de estas te sirvan en algún momento.

  • Sobre gustos, colores: un artículo que te presenta una serie completa de servicios en donde puedes trabajar con los colores para la web.
  • Comparando la tipografía: typetester es un servicio que te permite comparar los tipos de letras que se manejan en línea y previsualizar el texto.
  • Opciones de editores web: en este artículo encontrarás una serie de editores web con sus características, ventajas y desventajas.
  • Manipulando caracteres HTML: un servicio que te permite conocer el equivalente en código HTML de diversos caracteres de una forma sencilla.
  • Imágenes gratuitas: una serie de sitios web en donde encontrarás imágenes gratuitas para utilizar en tus proyectos.

Comunicate con el cliente y muestra tu trabajo

freelanceComo ya lo habrás experimentado, no necesito explicarte lo complicado que puede ser una mala comunicación con el cliente y el evitarte reuniones para mostrar los avances del proyecto, cuando lo puedes hacer en línea utilizando los servicios adecuados.

  • Envía archivos de gran peso: este servicio es uno de los muchos que existen para enviarle a tu cliente un archivo de gran peso, puedes enviar hasta 100 MB.
  • Vídeo con calidad: si lo que deseas es compartir un vídeo pero con mejor calidad de imagen te recomiendo utilices Vimeo que aunque no es tan popular con YouTube la calidad que permite en el vídeo es mayor.
  • Vídeo conferencias y chat: existen cientos de servicios similares, pero Skype se ha vuelto muy popular para realizar video conferencias de manera profesional, así que vale la pena brindarle está opción de comunicación a tu cliente.

Sigamos investigando y aprendiendo

aprenderEstoy segura que existen cientos de recursos más que te puede ayudar a mejorar tu trabajo. Es posible que hayas utilizado muchas de estas herramientas y tengas incluso más opciones en mente, pero el objetivo de este artículo es sintetizar en este espacio pinceladas de las múltiples opciones que existen.

También quería dejarles el espacio de comentarios para que sigamos construyendo este artículo y nos compartan las referencias de servicios y opciones que consideren que valga la pena incorporar a la lista de arriba. Ya que las experiencias son múltiples y en este medio no existen fórmulas establecidas, sólo la experiencia de quienes se dedican al medio y comparten su conocimiento.

Imágenes tomadas de sxc.

Fuente: Maestros del Web

SocialTwist Tell-a-Friend
 

Esquinas redondeadas, CSSRound

04 Aug

CSSRound es una aplicación que nos permite generar estilos, HTML e imágenes para crear cajas con esquinas redondeadas de forma muy sencilla.

cssround.png

Tan solo tendremos que indicar el radio de la esquina, el color de fondo de la capa, el color de la caja redondeada, el color de la letra, el ancho de la caja y el contenido, y nos devolverá todo lo necesario para mostrar el diseño en nuestra página.

CSSRound

Via: Sentido Web

SocialTwist Tell-a-Friend
 

Comprimir fotografías con Blubox

29 Jan

bluebox logo

Con la fotografía digital en unos máximos históricos de popularidad, herramientas que las traten como algo importante no paran de salir a la luz. Blobox es una herramienta pensada para los que tenemos ingentes cantidades de fotografías en el pc y no queremos que nos ocupe mucho espacio. Se trata de un compresor de imagen, de los mejores.

Blubox  llego a su versión 4,  y ofrece la capacidad de comprimir imágenes hasta en un 95% sin sacrificar para nada la calidad de las imágenes. Y si eres un maniático de la seguridad, con este programa podrás también encriptar y protegerlas. El truco de este programa está en que al contrario que los compresores generales, sus algoritmos son específicos para tratar las imágenes. Y por supuesto que podemos volver al formato original de forma muy sencilla.

Blubox cuenta además con un visor de fotografías, una especie de álbum de fotos, para manejar toda tu colección si así lo deseas y poder ver las imágenes incluso estando comprimidas y codificadas, lo cual es muy útil.

El programa no es gratuito,  aunque se puedes bajar una versión de prueba.

Características:

  • Comprime imágenes hasta un 95% sin pérdida de calidad.
  • Permite encriptar y proteger imágenes con la novedosa tecnología AES Encryption de 256 bits.
  • Reduce el tiempo de envío de fotos por e-mail o FTP.
  • Permite ver las imágenes cuando aún están comprimidas y codificadas.
  • Permite organizar y almacenar las imágenes ahorrando espacio en disco y de forma protegida contra intrusos.
  • Descomprime con facilidad a su formato original.

Fuente: genbeta.com
Sitio Oficial y descarga | Blubox.

SocialTwist Tell-a-Friend
 

Feng-GUI: conoce que partes llaman la atención de tu diseño

08 Dec

Feng-GUI es una aplicación online que simula la detección de las zonas más llamativas para un usuario, ya sea de tu página web o diseño.

Mediante inteligencia artificial simular la percepción humana y mediante un mapa de calor resalta las zonas más llamativas.

Se puede enviar una imagen o una URL, a mí no me ha funcionado con una URL, pero si se captura la imagen de la web se puede hacer de la misma manera.

 http://www.feng-gui.com

SocialTwist Tell-a-Friend
 

Javascript Color Picker: selección de color estilo PhotoShop

27 Oct

Javascript Color Picker es un string que permite añadir un selector de color estilo Photoshop. Esta herramienta puede ser útil cuando queremos que el usuario seleccione un color.

A parte de las componentes HSV, también se puede utilizar las componentes RGB. Ha sido comprobado en IE5.5, IE6, IE7, FF2, Opera 9 y Safari 2

Link:  Javascript Color Picker

SocialTwist Tell-a-Friend