Aunque algunos decreten la muerte de los blogs, sin duda tienen mucha vida por delante. Y si bien las redes sociales viven una explosión, la función es bien diferente y no van a reemplazarlos.

Por eso las herramientas que permiten integrar los blogs con las redes sociales son más que bienvenidos.

Los dos servicios que se lanzaron hace poco y que van a encontrar en la barra lateral de este blog son: Google Friend Connect (GFC) y Facebook Connect (FBC).

Estas herramientas permiten a los usuarios elegir vincularse a un blog desde el usuario de su red social (también desde otros servicios, como Twitter). Este vínculo implica mostrar nuestra foto como lector del sitio y asociar el perfil del servicio a esa imagen, además de otras características según la herramienta que usemos.

Son diferentes, y por eso pruebo ambos, para poder compararlos.

Lo bueno

El Google Friend Connect es abierto y poco a poco van sumando más servicios. En este momento podés validarte con tu cuenta de Google, Twitter, Orkut, Plaxo e incluso con varias a la vez. Esto es genial porque permite mostrar el perfil de varios servicios.

Para el blogger/webmaster, es muy fácil de instalar, sólo es necesario subir un par de archivos e incluir el código que nos dan donde queremos que se vea.

Facebook Connect permite vincular mis comentarios a mi perfil, lo cual me encanta porque el blog pasa a brindar a los usuarios un perfil propio dentro del blog, desde donde se pueden ver los comentarios que hizo. Además puede enviar cada comentario a las noticias de su perfil en FB.

También te permite editar el perfil en ese blog, tomando como base la descripción que tenés en FB.

Para acceder, si estás logueado a FB es un sólo click y listo. Chequea con FB sin pedirte ninguna password.

Para los sitios las posibilidades son muy interesantes en cuanto a que podrán mostrar diferente información según el perfil y gustos que muestra el usuario en FB. O sea que pasa a tener una base con datos sin necesidad de hacer una propia. Y el usuario no entrega ningún dato.

Lo malo

Facebook Connect se limita solo a una red, obviamente a Facebook. Claro que es una red muy popular.

Además no es de sencilla instalación. En el caso de WordPress existe un plugin (FB Connect WordPress), pero aún así hay que darse de alta como desarrollador… en fin, es más complicado que el GFC.

El Google Friend Connect me pide que le de mi usuario y password de Twitter, por ejemplo, en lugar de validarlo desde el Twitter mismo. Esto no me parece aceptable, porque me pide que le entregue un dato sensible y no todos van a querer hacerlo.

Así como es fácil de instalar no me brinda funciones extras dentro del blog, como sí lo hace FBC. Finalmente termina siendo una versión un poco más interesante que MyBlogLog, pero no mucho más por ahora.

La función de invitación sigue sin funcionar desde que lo instalé (y no soy a la única que le pasa). Cuando funcione me va a permitir sumar toda mi agenda de gmail… lo cual es muy interesante.

Más allá de lo que ofrecen ahora el potencial es enorme y estaré atenta a ver qué más pueden ofrecer.

Les dejo un video en inglés que ilustra las posibilidades del GFC:

Google ofrece ahora en sus resultados de búsqueda, saltear la introducción de Flash. ¡Ja!
Y es que realmente ¿A quién le gustan las intros animadas? Se interponen entre el usuario y lo que realmente fue a buscar.
Otro argumento para disuadir a nuestros clientes.

Más » El flash en la web

Vía | adseok

Cualquier diseñador que se aventura a trabajar con CSS se encuentra con que empezar quizá no es tan difícil, pero cuando quiere ajustar, o sea, poner todo exactamente donde lo pensó originalmente, ahi se complica.
Es el problema que tiene la web, tenemos que trabajar para distintos browsers, distintas velocidades de conexión, distintas resoluciones de pantalla, etc.
Acá hay 6 técnicas que permiten sortear algunas dificultades y mejorar el maquetado de nuestros sitios:

1. Conseguir un tamaño de fuente básico consistente.
2. Conseguir márgenes consistentes (”resetear” las etiquetas).
3. Especificar un “float” para limpiar otro.
4. Reemplazo de imágenes.
5. Falsas columnas.
6. Sprites en CSS (explicación en castellano).

» Explicación extendida en inglés

Traducción | Sigt.com
Vía | Isopixel

Desde el año pasado comenzó a aparecer la duda que ya se instaló: cuando plantamos un diseño web ¿Qué resolución debemos contemplar?

Para los que no saben mucho de web, cada monitor puede mostrarnos las cosas con diferentes resoluciones de pantalla:
640 x 480 pixels, 800 x 600 px, 1024 x 768 px y hay muchas más. Incluso las hay mucho más pequeñas, como las de los celulares, que pueden tener 220 x 176 px, por ejemplo.

Hace ya mucho tiempo se hizo el pasaje de 640 x 480 px y desde el año pasado hemos visto como Clarín y La Nación se pasaron a 1024 de ancho, agregando columnas.

La pregunta ya está instalada. Si bien hay que tener en cuenta la mayor cantidad de usuarios, la tendencia claramente indica 1024 px como medida dominante.

Les paso un gráfico (* datos extraídos…) donde, simplificando, podemos decir que el año que viene las resoluciones de 800 x 600 px o menos van a ser solo una pequeña minoría.

El año pasado estaban casi mitad y mitad, este año los usuarios con 800… o menos son poco más de un cuarto del total.

Seguramente me dirán que existe el diseño líquido, lo sé, pero esa es otra discusión…

¿Qué datos tienen uds.? ¿Están de acuerdo? ¿Mañana lloverá?

Estamos necesitando con urgencia alguien que nos ayude con las plantillas CSS para WordPress.
Envianos un email a contacto (arroba) agenciablog.com.ar indicando en el subject tu profesión y nombre con el siguiente formato (es para poder organizar los emails que ingresan, gracias):

ejemplos:
Trabajo AB: CSS | Jorge Gómez | FL
Trabajo AB: PRG/AI | Juana Pérez | FL/RD
(FL significa Frelance, que es lo que estamos buscando en este momento, pero si eventualmente te puede interesar trabajar en Relación de dependencia -RD-, aclaralo).

En el cuerpo del email todos los datos extras que puedas aportar: una intro de pocas líneas que diga tu nombre, una breve y relevante presentación (indicando si tenés especialidad/es o preferencias), links a tu web y/o blog y/o trabajos realizados y varias vías de comunicación (email, teléfono, celular, menajería instantánea, skype).
Por favor incluir un tiempo estimado para el armado de una plantilla simple de WordPress.

Un simple menú dropdown hecho con CSS.

Según dice su autor Patrick Griffiths (HTML Dog), está basado en un ejemplo de menú liviano, accesible y basado en CSS de A List Apart, pero mejorado, ya que es más liviano, más accesible (!) y tiene compatibilidad también con Opera y Safari, pero lo que es más interesante ¡tiene múltiples niveles!

Acá hay un ejemplo con un nivel, con dos niveles, tres niveles y hasta una opción vertical.

La cosa es así:
…Continuar leyendo �

Son contadas las veces que podemos decir: este trabajo se hizo como yo quería. Mayormente a todos nos ha pasado tener que aplicar la regla El cliente siempre tiene la razón y ver que nuestro trabajo carga con algunos cadáveres: colores espantosos, tipografías lamentables, código horrible, etc.

Sofá naranja propone un nuevo elemento para poder descargar culpas frente a los colegas que juzgan nuestros trabajos: incluir en el código el elemento <cwt> indicando que ese vómito de la naturaleza no es de nuestra cosecha.

Igualmente esto es un arma de doble filo, porque aunque es cierto que muchas veces es prácticamente imposible sacar algunas perversas ideas de las cabezas de nuestros clientes, cada una de esos monstruitos demuestran nuestra incapacidad para convencer sobre lo que creemos correcto.

La función del tag ‘cwt’ es marcar aquellas partes de tu site que, lejos de ser el resultado de un sesudo análisis, son producto de ese ente despiadado que convenimos en llamar “El Cliente”.

Es un tag que convertirá tus páginas en código no válido (aunque si necesitas usarlo lo más probable es que de todas formas no valide).

Ale Muñoz, Sofá naranja

Estaba delirando e imaginando otros casos en los que sería interesante el uso de códigos que alerten sobre estos accidentes (quizá algunos sean redundantes, claro):
CDT, Customer Did This: cuando el cliente sabe algo de html y mete mano en el código.
AIDDT, Another Idiot Designer Did this: a veces el cliente tiene secuaces que saben mucho más que nosotros, claro.
BWT, Boss Wanted This: como lo sugirieron en los comentarios de ese post, para los que trabajan en relación de dependencia.

Me había emocionado al encontrar en el manual de Sidar.org las propiedades min-width y max-width. Pensé que había encontrado la solución a los problemas de anchos fijos vs. anchos variables. Qué ilusa; no funcionan ni a palos.

Daniel Clemente afirma que ya no hay que usar .gif y en cambio hay que usar .png (excepto en los animados). El Fireworks resolvió la misma imagen en 2/3 del peso del mismo archivo .gif. Pero supongo que no será solo por eso.

En el Firebird me aparecía un espacio (de 30 px aproximadamente) antes de cada div y no podía solucionarlo con nada (margin:0 no andaba). Extrañamente, si le asignaba un border de mínimo 1 px ese espacio desaparecía. Pero esta no era una solución. Finalmente lo resolví con position: absolute; top: 0px; pero sospecho seriamente que no debe estar bien usarlo de esta manera.

Aquí está el archivo html y el archivo de estilos con los que me estoy peleando y esta es la imagen de la home a la que quiero llegar. Como se ve, me falta bastante…

Más trucos
Elementos After y Before
Selector de estilos (no apto IE).

Creo que muchos de los problemas que los diseñadores gráficos le ven a diseñar para internet, es que no tenemos el control absoluto de cada pixel. Y pareciera que para un diseñador que trabaja en papel esto es terrible. Como siempre trabajé para internet este es para mi un límite que siempre estuvo ahí, así como el papel se arruga o se moja. Por eso no sufro por ello, sino que trato de aprender más sobre la manera de manejarme en este medio.

Por esto, estoy intentando aprender más del manejo de las Cascade Style Sheets (CSS) y para eso estoy buscando material al respecto para documentarme. Ya me daba vergüenza usar tantas tablas porque no es para nada profesional. Aunque me haga cosquillas el estómago voy a tratar de avanzar aprendiendo de cero.

Uno de los motivos por los cuales me fascina trabajar para internet es que puedo aprender con los recursos propios del medio.
Me estoy desasnando leyendo Cómo hacer buenas páginas web. Empieza desde el principio y esto me es especialmente útil porque creo que hay cosas que las mal aprendí. O sea, me falta la base y uso los elementos sin ningún criterio.

Además de la guía, me gustó mucho la defensa que hace Daniel Clemente respecto a los estándares y el porqué se debe diseñar con ellos.

Aquí los links que recolecté hasta ahora.
Los sitios en inglés están indicados con la marca [en].

Sitios de promoción del uso de CSS
CSS Zen Garden [en]
Camaleón CSS
Porqué el diseñar con tablas es estúpido: problemas definidos, soluciones ofrecidas
Cómo hacer buenas páginas web
Alternative Style: Working With Alternate Style Sheets [en]
CSS Design: Going to Print [en]

Trucos
Listamatic [en]
Multiple Classes [en]
Fade in con Javascript y CSS [en]
Alineación vertical [en]
Pure CSS Scrollable Table with Fixed Header [en]
Centrando imágenes usando CSS

Fuentes de donde obtuve algunos links
Tinta China
ALT1040
ArtERNATIVO
Blog de Jaime Olmo
Supermag

Me entero en Dinamic Style sobre un sitio que muestra diferentes opciones de listas verticales y horizontales en CSS.
Son muy simples, están ejemplificadas de manera clara, e incluye el código que hay que poner en el html y en el archivo de estilo.

Yo modifiqué mi CSS y cambié la lista a este formato:

• círculo vacío
• más liviano

Y por si quiero hacer una lista doble:

• cuadrado
• para dar más importancia
  • círculo vacío
  • para que quede en una jerarquía menor

Además muestra formatos de listas que pueden ser usados para menúes, con fondos que cambian al pasar el mouse por encima.
Lo que no sabía era que se podían hacer listas horizontales, lo cual es genial para los menúes que yo solía hacer con behaviors del Dreamweaver.