webtodoweb.com

Diario de un Diseñador web, usabilidad, accesibilidad, recursos gratis GNU

Backgrounds animados con jQuery

September30

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

Crea redes sociales.

September30

Elgg es una aplicación open source que permite crear redes sociales de forma sencilla y con bastantes características que completarán nuestra web.

elgg.png

Entre las características del administrador nos encontramos con administración de usuarios, objetos, ficheros y del sitio, gráficas con relaciones de los usuarios, múltiples sitios por instalación, internacionalización, sistema de etiquetas, ACL, vistas, eventos, plugins y API para widgets.

Además permite RSS, FOAF, XFN, OpenId, OpenSocial, OAuth, JSON, Ajax con jQuery, sistema de caché que permite memcached.

Lógicamente, el usuario final dispondrá de su perfil, panel, feeds de su actividad, preferencias, blog, aplicaicones OpenSocial, repositorio de ficheros, foros y mucho más.

Elgg necesita PHP 5.2+, Apache, GD, MySQL 5+ y mod_rewrite. A parte OpenSocial necesita Mcrypt y la librería PHP SOAP.

Elgg

Vía / WebAppers

¿¿ RSS !!??

September30

 

Si te suscribes al RSS de una página web o blog, empezarás a recibir, a partir de ese momento y directamente en tu ordenador (computadora), todas las nuevas noticias que se publiquen en esa página web o blog, sin necesidad de visitar la página web. Si te suscribes a varios blogs, recibirás las noticias de todos los blogs a los que te hayas suscrito en un único lugar (en tu lector RSS). Puedes ver las ventajas que tiene el RSS, a través de un ejemplo ilustrativo.

¿Qué es RSS?
¿Qué ventajas o beneficios tiene para el lector?
¿Cómo se puede suscribir una persona a un canal o fuente RSS de una
página?

Esas y más preguntas se pueden contestar en el blog RSS Explicado

Via| Blog Vecindad Grafica

Coverflow: galeria de imagenes al estilo iPhone

September19

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

Tomar decisiones en grupo: Zapproved

September19

 

Esto es una herrmienta fantástica. Zapproved es una herramienta online gratis para tomar decisiones en grupo.

Nos permite crear una propuesta y enviarla a nuestros amigos o colegas que creamos necesario, para que participen en la discusión y voten. Esta gente a la que enviamos la propuesta NO necesita registrarse para participar en el proceso.

Funciona así:
1. Creamos la propuesta en nuestra cuenta en Zapproved.
2. Enviamos pedidos de respuesta a nuestros amigos o colegas, quienes recibirán un mail HTML.
3. Ellos aceptarán o dirán no con un simple click.
4. Nosotros tendremos un informe de quienes han aceptado, denegado, o no han respondido.
5. Las propuestas son archivadas en un historial en nuestra cuenta.

La verdad es que me parece genial, para quienes trabajan en grupo y necesitan tomar decisiones colectivas es bárbaro. Aviso: recién está en beta así que no se sorprendan por algún bug.

Enlace | Zapproved

Fuente | makeusof

Herramientas y ejemplos para mejororar tu desempeño como freelancer

September19

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

Chrome: navegador google

September4

 

Bueno parece que Google no detiene su marcha, ahora salen algunas imágenes de Chrome el que sera su futuro navegador web.

La beta sera lanzada mañana pero estas imágenes ya nos dejan saber algo a los más curiosos. Se ve claramente que tendrá soporte de pestañas, una alta integración con todos los servicios de Google y lo que a mi me parece que es una pagina de inicio con thumbnails similar a Opera.

Me pregunto: Google no confía en que Firefox supere finalmente a IE algún día? O sera que no quiere depender de nadie externo a su “Imperio”?

Como mucho es una opción más que nunca viene mal y como en todo la competencia hace bien.

Link Oficial

Actualización: Descargar Google Chrome

Via | Unblogged

Acabo de instalar Chrome y la verdad es super ligero, y tiene las tipicas funciones que podemos esperar de google. La pagina de inicio lista nuestraos marcadores y en la parte central muestra las miniaturas de los sitios más visitados.


Portada de Google Chrome

Y en este video los Ingenieros de Google nos explican el porque de Chrome.

IE8 en beta #2

September1

Ya habíamos visto las mejoras en la primera beta de IE8, y desde ayer tenemos disponible la beta #2 que viene a introducir características ya vistas en otros navegadores.

La nueva beta está disponible para su descarga gratuita y funcionará en Windows XP y Windows Vista.

Entre las mejoras visuales más evidentes está la nueva Barra de direcciones inteligente (Smart Address Bar) que viene imitar la funcionalidad de la barra de direcciones de Firefox 3 y de Opera 9.5:

Me gusta la forma en que clasifica los grupos de elementos, entre coincidencias en la URL, favoritos, historial y búsquedas en el título.

Otra mejora que veo es la forma en que se agrupan por colores pestañas relacionadas, es decir los que has abierto desde otra pestaña:

Le veo utilidad cuando estás trabajando en 2 o más búsquedas a la vez y vas abriendo sitios diferentes; Incluso es posible cerrar todas las prestañans de un grupo o volver ha abrir las mismas pestañas de una sesión anterior. Ah! y ahora el buscador ya está integrado dentro de la ventana principal del navegado, ya no como una ventana flotante, un cambio muy bueno:

En versiones anteriores se puede logran la integración del buscador en la ventana principal usando la extensión Inline Search.

Otro cambio respecto a las pestañas, es que ahora cada una es independiente de otra, si en dado caso una colapsa no debería afectar a las demás. En la practica Internet Explorer crea más procesos y el consumo de memoria es bastante alto:


¿A poco será un fallo de arquitectura que una característica ? ;) A pesar de consumir tanta memoria RAM no lo sentí tan lento como cuando Firefox ha llegado a esos niveles.

Otras características están detalladas a profundidad en el IEBlog como:

  • SmartScreen Filter, protector contra phishin, malware y otros sitios que no sean seguros para el usuario.
  • XSS Filter, extra seguridad contra el Cross-Site Scripting.
  • InPrivate Browsing, o lo que llamaría el Porn Mode, cuando está activo este estado IE no guardará cache o historial de lo que navegues hasta que lo desactives. ¿Útil no?

Del lado de los estándares en Ajaxian señalan algunos cambios, aunque no significativos. Por lo que he observado ya no hay tantos problemas de CSS con algunos sitios que he visitado comparado con IE7, solo puedo decir que en ocasiones el background u otros elementos no se presentan correctamente, en fin es una versión beta.

De cualquier modo, esta Beta no trae nada nuevo respecto a lo que ya hemos visto en otros navegadores, básicamente Microsoft está igualando lo que ya hay en el mercado.

A finales de este año Microsoft planea lanzar la versión final de IE8. Como opinión personal veo bastante bien esta versión beta de IE, aunque aún espero que puedan mejorar mucho más -por el bien de todos-.

Via| Maestros del Web

« Older Entries