Todos en alguna ocasión cuando empezamos o una vez que ya tenemos nociones de web, nos preocupa como hacer que nuestro sitio sea mas amigable y que cause una buena impresion, bueno pues aquí les dejamos unos pequeños y muy sencillos tips que nos pueden ayudar a mejorar la experiencia de los usuarios de nuestras web.

Cambiar el color del texto seleccionado

En Firefox, Safari y Opera puedes cambiar la combinación de colores por default por uno que combine mejor con tu diseño y lo haga mas vistoso:

selection   { background:#c3effd; color:#000; /* Safari y Opera */ }

-moz-selection { background:#c3effd; color:#000; /* Firefox */ }

Evitar que Firefox “salte” al mostrar y ocultar la barra de scroll

Firefox esta configurado para mostrar y ocultar la barra de scroll vertical según si el contenido de una página sobrepasa o no el alto de la ventana (el “fold”). En sitios interactivos con contenido dinámico que pueda cambiar una y otra vez, este efecto provoca un salto desagradable. Esto lo resolvemos asi de fácil:

html { overflow-y:scroll; }

Aplicar esquinas redondeadas a los contenedores

Además de ser un cambio agradable en Firefox y Safari, también ayuda a identificar mejor los elementos.

input      { -moz-border-radius:10px; -webkit-border-radius:10px; }

Define los saltos de página para imprimir

Muchos usuarios necesitan imprimir el texto de tu sitio web. No olvides ordenar los temas en las hojas ubicando saltos de página para no cortar una oración a la mitad:

.page-break  { page-break-before:always; }

Íconos específicos en atributos

Si colocas muchos enlaces define íconos específicos para diferenciar por ejemplo cuales son links de descarga y cuales links a otras páginas, muchos usuarios te lo agradecerán… aunque no lo digan XD

a[href$='.pdf'] { padding:0 20px 0 0; background:transparent url(/graphics/icons/pdf.gif) no-repeat center right; }

Cambiar el cursor por un puntero en los links y botones

Este simple efecto causa mucho impacto en los usuarios, hay muchos diseños que podemos usar ademas de la clásica manita apuntando. Recuerden que en los pequeños detalles están las grandes diferencias.

input[type=submit],label,select,.pointer    { cursor:pointer; }

Hacer “cliqueable” toda el área alrededor de los links

Esto no solo hará más comoda la experiencia para el usuario sino que nos evitará preocuparnos tanto por la accesibilidad de nuestro link. Esto lo hacemos poniendo la propiedad display en Block en nuestros links.

#navigation li a    { display:block; }

Fuente: http://davidwalsh.name/css-enhancements-user-experience

La maquetación de CSS es muy reccurrida en la actualidad para poder organizar y presentar los contenidos de una manera mas elegante y vistosa, y con relativamente poco esfuerzo. Sin embargo, como en todo, hay algunas cosas que debemos cuidar para que esta tarea no resulte en un esfuerzo inútil.

Algunas cosas a considerar son:

1. Organización:

Planea y organiza tu hoja de estilo según la especificidad de los elementos. Esto te ayudará a minimizar las pruebas/error de tu css. Recuerda que siempre tendras que ir monitoreando como va ajustando tu css, así que es preferible que de un principio tengas una estrutura sólida sobre la cual trabajar.

2. Propiedades repetidas:

Es muy común ver propiedades repetidas, sobre todo las de tamaño de fuentes o color. Por lo tanto lo mejor es planificar para evitar la redundancia y lograr una hoja de estilo mas optimizada, define claramente tus estilos, si es necesario usa estilos combinados de este modo reduces la redundancia en código.

3. Nombre de Clases e ID

Intenta darle nombres globales a tus etiquetas para que sea comprensible a cualquier webmaster. Recuerda que no siempre serás tu quien utilice el código, por lo tanto es mejor usar un estilo estandarizado para la definición de nombres, o al menos que sean nombres específicos evita los clásicos clase1, textobonito, etc.  =)

4. Amigo Borde

La propiedad Border puede ser un gran ayudante a la hora de posicionar y flotar divs u otros elementos. Asignale un borde de 1 pixel a las cajas para ver sus limites de padding y margin, esto te ayudara a encontrar errores y después puedes quitar el borde.

5. Pixeles

Un problema muy común es el de la barra del menu que se cae para abajo. Bueno te cuento que un simple pixel puede lograr esta catástrofe, mide bien tu diseño y ten en cuenta que los navegadores no son 100% similares, trata de pensar en un diseño flexible, y realiza tus pruebas en diferentes navegadores, recuerda que la idea es que otras personas visiten tu página y no todos usan tu navegador favorito.

6. Diseño Abierto

Debido a los típicos problemas de cajas, margenes y rellenos te recomiendo diseñar ampliamente sobre el lienzo. Optimiza contenidos para que te puedas extender por todo el espacio disponible sin necesidad de meterte a los temas de hacks y hojas alternativas.

7. Evita los Hacks

Aunque muchas veces nos ayudan a resolver algunos problemillas de compatibilidad entre navegadores, es una realidad que al final del dia trabajan sobre características cambiantes de los mismos, por lo tanto después de una actualización estos remedios caseros dejan de funcionar.

8. Estudia los elementos de linea y los de bloque

Es simple, en CSS existen elementos de linea como son los enlaces y los de bloques entre los que encontramos los párrafos. Si estudias que tipo de elemento existen vas a poder predecir como reaccionaran en el lienzo. También podrás cambiar su esencia con Display Inline o Display Block.

Consejos y tips para maquetacion css

9. Comenta la lineas

De inicio nos parecerá un desperdicio de espacio, pero te daás cuenta conforme vayas avanzando que esto te ahorrará mucho tiempo en codificación, después las puedes borrar o dejarlas así para que tu código sea más entendible por otras personas.

10. Pixels, Em y Porcentajes

Tu decides el alcance que puede tener tu web, como tambien el diseño al cual se tiene que adaptar. Si diseñas con pixeles sabes que estas limitado pero podes lograr un diseño mas armónico, y con Em y Porcentajes tenes mas compatibilidad entre diferentes dispositivos. La decisión es tuya: armonía o flexibilidad?

11. Posicionamiento

Css te ofrece un amplio campo de posibilidades en la maquetación, el uso de Float, Absolute, Relative… Cual es mejor? Todos. Tenes que entender su reacción en el lienzo para ver que te conviene usar en el proyecto que estas. Por ejemplo, el Float quizas sea un buen compañero en sitios donde haya contenido dinámico, porque las columnas tienen que ir creciendo con el nuevo contenido. La posición absoluta te da mas libertad en el diseño porque puedes colocar los elementos donde te guste y en combinación con Z-index es excelente para los diseños líquidos. Pero lo mejor es usarlas a todas, sacando el máximo potencial de css. No te limites, explota todas las características que te ofrece CSS.

Consejos y tips para maquetacion CSS

Sin duda alguna hay muchas otras cosas que se pueden y deben considerar, lo importante es que tu te vayas sintiendo cómodo y la mejor estrategia es la que te haga sentir más cómodo. Te invitamos  compartir tus tips y consejos para otros visitantes del blog.

Consultado en: www.puentecromatico.com

Gog.is es un acortador de URLs, con la particularidad de que sirve sólo para búsquedas de Google.

Esta característica es la que hace que tenga un funcionamiento diferente al del resto: basta con posponer las cláusulas de la consulta a una dirección fija (gog.is); así, http://gog.is/microsoft devolverá los resultados para la empresa de Bill Gates, o lo que Google piensa de ella.

También incorpora prácticos atajos para consultas especializadas del gigante de la Red, es decir: Shops, Blogs, Libros, Noticias, así como sitios de terceros relacionados, como YouTube. Estas queries se pueden realizar por medio de la anteposición de un vocablo y dos puntos (‘shop:’, http://gog.is/shop:ipod; ‘blog:‘, ‘book:‘, ‘news:‘ e ‘y:‘ para el portal de videos, respectivamente).

Ahora es más facil compartir una busqueda con este acortados de url.

Visita: http://gogglis.appspot.com/

Si alguna vez te has pasado buscando en la red algún libro o un texto que quieras por trabajo o por ocio, sabrás que a veces esta tarea no es del todo fácil y rápida,sin embargo navegando por la red me encontré con la pagina mega-pdf.com que funciona con la api de google search  de esta forma nos permite buscar en la red los resultados referentes a nuestra búsqueda en PDF arrogando los resultados de la misma forma que google y con la opción directamente hacia la descarga, de esta forma podemos buscar libros, documentos y todo lo que se nos pueda ocurrir en formato PDF, esta es una herramienta que nos puede facilitar en algun momento la búsqueda en la red y algo a su favor  es que cuenta con un formato conocido como lo es el formato de búsqueda de google dejándonos tiempo para navegar.

Navegando por la web siempre te encuentras sitios en donde leer sus contenidos es cansado esto se debe a que utilizan colores contrastantes como por ejemplo fondo negro con letras blancas, o letras más pequeñas etc. Claro no hay nada más placentero que la lectura e informarte de lo que sucede en la web, pero o te informas bien  o te quedas ciego. :P

Existe varias herramientas para solucionarnos un poco esta situación.

Readability es una herramienta sencilla que hace de leer en la web una tarea más placentera, eliminando el desorden alrededor de lo que estás leyendo.

Para utilizar esta herramienta solo tienes que generar tu configuración  personalizada del tamaño de la letra, color de fondo etc, luego ya generada tu configuración  la guardas como favoritos.

El último solo tienes que navegar en la web, cuando desees leer algun articulo solo accede a tus favoritos y dale clic a tu marcador de Readadility.

Ir a Readability

Google Reader como su nombre lo dice es una de las mejores aplicaciones de Google para obtener información, mantenerse actualizado. A continuación algunos tips que te pueden servir en Google Reader.

1. “Ordenar como por arte de magia”

Una de las opciones que tenemos para ordenar nuestros items es la opción “Ordenar como por arte de magia” (Sort by magic). Se preguntaran que significa esto; básicamente Google Reader ordena sus items por los likes que hiciste y por otras razones más. El resultado te podrá sorprender dependiendo del uso que le das a Google Reader.

Esta opción puede ayudarte a ver los items más populares al principio y asi ahorrar algo de tiempo.

2. Ordena tus carpetas

Imagina tu computadora con todos tus archivos en una sola carpeta. Es un martirio tener todo en un mismo lugar y pasa lo mismo con los items de Google Reader si este no está organizado por carpetas. Una de las ventajas que tiene el ordenar por carpetas es que nos facilita leer los items de una sola “categoría” y también me facilita ordenarlas según lo que quiera. Por ejemplo las noticias de tecnología prefiero ordenarlas “como por arte de magia” y los posts de algunos bloggers del post más antiguo al más nuevo.

Esta son las carpetas que tengo por el momento:

El orden lo es todo en Google Reader, en especial si sigues más de 50 feeds.

2.1 Ordena tus carpetas en el orden en que las leas

Dado que podemos ordenar manualmente (drag & drop) las carpetas en la aplicación me gusta ordenarlas en el orden de importancia que le doy. Esto porque mientras voy leyendo los items y acabe de leer los pertenecientes a una carpeta puedo pasar a la siguiente presionando la barra espaciadora. Asi que para navegar solamente necesito presionar “j j j j [Spacebar] j j j”.

3. La importancia de 1 y 2 (Expanded/List View)

Algunos posts tienen varias imágenes y otro tipo de media (videos, documentos embebidos, etc), lo cual consume nuestro ancho de banda y hace que el cargar los items de una carpeta pueda tardar lo suficiente para colmar nuestra paciencia. Si estamos con poco tiempo podemos utilizar la “Vista de Lista” (List View) de los items y ver solamente los títulos y las primeras palabras de cada post. Para activar la List View debemos hacer click en List View o simplemente presionar 1. Para volver a la vista expandida presionar 2.

Esto me resulta demasiado útil en caso de seguir a blogs de Diseño, de gadgets y blogs con varios archivos de media en general.

4. “Mark all as read”

“Mark all as read”/”Marcar todos como leídos” el BOTÓN. Nos permite marcar como leído los items de un feed, carpeta, las personas que seguimos o de todos los feeds. A veces te sentiras algo triste ya que sabes que al presionar este botón se perderan varios items que realmente pudieron haberte interesado, asi que antes de presionar este botón te recomiendo abrir el feed/carpeta en List View (2) y ordenarlo “como por arte de magia” (1er tip).

A billion items are about to be extinguished. Oh, the Jedis are going to feel this one.

5. Revisa tus patrones para saber que feeds eliminar

Los “Patrones” (Trends) que nos proporciona Google Reader acerca de nuestro hábito de leer es una de las mejores herramientas que tenemos a disposición. En especial los Patrones de Suscripción porque nos indica que feeds son los que más items generan por día (Actualizado frecuentemente), los feeds inactivos y los feeds con pocos lectores. Al de cada suscripción tenemos un ícono de basurero que facilita aún más la eliminación de la suscripción.

Nota: Estos 30 días pasados no tuve la oportunidad de leer via feed los items que tengo en la carpeta Tech News.

6. Shares y Likes

Existen todo tipo de lectores de RSS, pero estos carecen de estas vitales características. Hace tiempo Google Reader incorporó la capacidad de poder hacer “Likes” y compartir los items de un feed. Ambas características y la posibilidad de seguir los items compartidos de otras personas mejoraron dramáticamente la experiencia. Los likes denotan un artículo popular y también puedes ver los shares de las personas a las que sigues (dependiendo de su configuración).

7. Follow

En Google Reader puedes encontrar contenido fácilmente si sigues a las personas que le gustaron X artículo. Lo más probable es que tengan intereses parecidos y encuentres mucha más información. No es obligatorio seguir a las personas que te siguen pero es interesante ver el contenido que comparten.

8. El feed de tus elementos compartidos

Google Reader nos da la posibilidad de tener una página y un feed con nuestros elementos compartidos. Dicho feed puede ser fácilmente agregado a tu blog/website. Puedes acceder a las opciones https://www.google.com/reader/view/?tab=my#friends-manager-page e ir a ala opción “Your shared items page”/ “Página tus elementos compartidos”

Ve a tu página de items compartidos (si lo están) y puedes obtener el feed RSS.

Visto en: eresseasolutions