Quasar – Todo Informática

Estas son algunas cosas que a veces se nos escapan:

• Siempre definir margin y padding. Este es uno de los problemas más molestos a la hora de diseñar para Firefox e Internet Explorer (especialmente IE6) ya que cada navegador tiene valores predeterminados diferentes. Pueden usar * {padding:0; margin:0; } para definir 0 padding y margin para todos los elementos.
• link, visited, hover y active es el orden en los que hay que definir los atributos de a (links)
• Tipos de letras con espacios deben encerrarse entre comillas. Por ejemplo: “Trebuchet MS”
• Usar em en vez de pixel nos ayuda a mantener los tipos de letra en forma proporcional. Usando font-size: 62.5% setea el tamaño a aproximadamente 10px. Que es igual a 1em. De ahi podemos usar 1.1em (11px) y así.
• Siempre usar background (o background-color) y color: #xxxxxx para definir el color de fuente ya que no solo es requerido para ser CSS válido sino que también hay usuarios que cambian los colores por defecto. Al usar esto nos garantizamos que el color de fondo y de fuentes sea el que queremos para nuestro diseño.
• En vez de setear margin-top, margin-right, margin-bottom y margin-left podemos poner todo en una línea: margin: 12px 4px 6px 3px; (en el sentido de las agujas del reloj: arriba, derecha, abajo, izquierda).
• Para alinear (flotar) imagenes a la derecha o izquierda para que el texto las rodée podemos usar float: right o float: left.
• En Firefox y Opea podemos usar bordes redondeados de CSS3 con:
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  En Internet Explorer tenemos que seguir usando imagenes para emular este efecto.
• Si queremos usar una imagen en vez de un texto, pero queremos mantener el texto en el código podemos usar display: none y un background con imagen: background: #fff url(/imagenes/mi_imagen.gif); Aunque es preferible usar el background y que el texto quede visible porque sino Google puede tomar ese detalle en contra pensando que uno está ocultando keywords (ver referencia).
• Recordar que HTML y Body pueden cambiarse con CSS también.
• Al usar CSS con Flash podemos usar z-index para que el CSS / Flash esté por encima o por debajo del elemento que queramos. También, en Flash se puede usar la opción OPAQUE para tener más control sobre esto aunque no funcione bien en todos los navegadores.

Uno de los problemas del diseño de páginas web es que no todas las fuentes, tipos de letras, están disponibles en todas las computadoras. Mucha gente quiere un tipo de letra específico pero la cantidad de tipos de letras que vienen por defecto en los sistemas operativos es limitada. Si bien hay equivalencias, por ejemplo para el tipo de letra Arial, en Linux, otras fuentes no corren con la misma suerte e incluso un leve cambio en el espaciado cambia la perspectiva y el diseño.

También está el tema de que mucha gente piensa su diseño usando muchos tipos de letras y eso tampoco es sano (ni estético) pero eso es otro problema.

Como si esto fuera poco mucha gente diseña y usando fuentes que no son gratuitas lo cual agrega otra traba a la hora de pasar un diseño desde el programa a la implementación en Web.

Recientemente con el desarrollo de HTML5 y CSS3 se van a implementar nuevas declaraciones para importar fuentes. Si bien esto no soluciona el tema de las fuentes pagas si soluciona que en un futuro no muy lejano podamos mostrar sitios con fuentes que no están presentes en la computadora del visitante.

Por suerte hay un nuevo proyecto que pronto va a dar una solución a ambos problemas. Se llama Typekit.

¿Cómo funciona?

Typekit negocia con los creadores de las fuentes un precio y Typekit le cobra a los diseñadores una tarifa (que según ellos no va a ser muy cara). Además Typekit va a ofrecer un sistema para buscar y navegar fuentes facilitando así la búsuqeda de la fuente perfecta para nuestro proyecto. De esta manera vamos a poder importar directamente desde nuestro CSS las fuentes.

Si bien esta no es una solución para muchos sí ayuda para sitios que requieren fuentes no convencionales. La verdad, a mi manera de pensar, es que si el precio es justo Typekit va a ser una herramienta útil.

Por otro lado sigo en desacuerdo con el tema de usar muchos tipos de letra diferentes. En un sitio de arte una letra rara puede verse bien pero algo que muchos clientes y diseñadores con poca experiencia creen es que cuanto más agresiva es la letra mejor… esto lo único que hace es que el sitio sea dificil de leer… y en Internet el Contenido es el Rey.

Pueden conocer más sobre Typekit desde su Blog. El sitio está en construcción pero parece que este mismo año lanzan el producto. También pueden dejar el correo en el sitio principal para que les avisen cuando Typekit esté disponible.

Después de varios años la W3C (World Wide Web Consortium), organización que se dedica a organizar y crear estándares para Internet, puso a disposición del público las guías de accesibilidad.

Bajo el título de “Estándar Web del W3C define la accesibilidad para la Web de nueva generación: El esfuerzo de colaboración se plasma en un estándar más flexible y fácil de probar que promueve la accesibilidad de la Web” el comunicado de prensa habla sobre la guía que ofrece por primera vez un punto de partida de dónde diseñadores y profesionales pueden basarse a la hora de desarrollar proyectos.

Ver comunicado de Prensa

Ver Guías

Quasar WP Theme

Desde hace tiempo estoy tratando de encontrar algún diseño que pegue con el contenido pero siempre encuentro algo que cambiar. Esta vez me decidí a hacer mi primer Theme para Wordpress… llamado obviamente Quasar.

Necesito pasar de Photoshop a CSS el diseño y listo. También va a estar disponible para descargas.

El concepto es simple: el contenido es el que manda. El tema en sí no tiene mucho color pero si quería que el encabezado no ocupara mucho, que haya un resumen por grupo de categorías de lo que hay en el sitio ya que lo leen personas de diferentes niveles de conocimientos en computación (clientes, diseñadores, programadores, etc) y era hora de separar esas cosas para que nadie se confunda o piense que el sitio tiene contenido que no es para cada uno.

También quería cambiar por un fondo blanco para que sea más fácil de leer y sin muchas imagenes. La parte superior tiene la búsqueda que este diseño no tiene y el link a los RSS. El resto del diseño es a tres columnas fijas. La primer columna, a la izquierda, son los posts, la segunda publicidad y la tercera la navegación.

El footer (que no aparece en el screenshot) va a tener algunos links también.

Desde que Internet Explorer se hizo famoso por el soporte a CSS (los archivos que le dan formato a las páginas) se inició la guerra de los navegadores… a partir de eso momento comenzó además el desorden de los estándares (y el auge de las organizaciones que tratan de arreglarlo).

Esto lleva al problema de que muchos diseños no son compatibles entre navegadores. ¿Cómo darse cuenta? esta herramienta ofrece screenshots de sitios. Solo debemos escribir la dirección y seleccionar en qué navegador queremos verlo.

Visitar NetRednerer