• Chromium 7: 241 puntos + 12 puntos de bonus. Faltaron 47 puntos.
  Gracias a Mónica por compartir el resultado.
• Chrome 6.0: 217 puntos + 10 puntos de bonus. Faltaron 73 puntos.
  El “excelente” resultado de Chrome sólo es un reflejo del empuje que Google da a HTML5, sin duda es una buena noticia y reto para el resto de navegadores.
• Safari 5.0: 207 puntos + 7 puntos de bonus. Faltaron 86 puntos.
  Un resultado sorprendente para Safari en una versión de producción, inesperado totalmente.
• Firefox 4 Beta 5: 204 puntos + 9 puntos de bonus. Faltaron 87 puntos.
  Un resultado que no deja muy bien puesto a Firefox, sin embargo, se espera que mejoré con la versión de producción.
• Safari for iPhone: 185 puntos + 7 bonus. Faltaron 108 puntos.
  Impresionante cuando consideramos que se utiliza desde un dispositivo móvil. Hace unos años era inconcebible que un navegador móvil compitiera contra versiónes de escritorio.
• Firefox 3.6.1: 139 puntos + 4 puntos de bonus. Faltaron 157 puntos.
  Es un resultado esperado para una versión en producción, especialmente cuando se sabe que las mejoras se estan implementando para la versión 4.
• Internet Explorer 9 Beta: 96 puntos + 5 puntos de bonus. Faltaron 199 puntos.
  Se espera que mejore al salir la versión de producción (no beta), sin embargo, no es seguro.
• Internet Explorer 8: 27 puntos. Faltaron 273 puntos.
• Opera Mini (desde Windows Mobile 6.1): 27 puntos. Faltaron 273 puntos.
• Internet Explorer 7: 12 puntos. Faltaron 288 puntos.

Vale aclarar que todas las pruebas fueron hechas bajo Windows, excepto la de Safari for iPhone realizada desde iOS 4.1.

Actualización: Gracias a Mónica tenemos el resultado de Chromium 7 y agregue el resultado de Internet Explorer 8 y 7.

Actualización 2: Resultado de Opera Mini en Windows Mobile 6.1, gracias a Guatecham.

Actualización 3: Guatecham me avisa

@dic7 hice las pruebas de navegadores con Snow Leopard y todas coinciden … solo Opera 10.6 (que no esta en el listado) tiene 159 + 7 #

Hasta la próxima.

4 comentarios

ivanmendoza 2010 - Bajo licencia Creative Commons By-NC-SA.

Cross browsing, en resumen, consiste en realizar un sitio o aplicación web compatible entre más de un navegador, usualmente se utiliza cuando tu sitio web es compatible con navegadores que utilizan estándares y además Internet Explorer (que suele interpretar código a su modo), aunque el termino es valido para cualquier navegador.

Aplica propiedades CSS3 por separado

El problema aparece cuando Internet Explorer (IE) comienza renderizar mal las propiedades de CSS3, un error poco común pero que si esta presente arruina los estilos del sitio web.

La solución fue eliminar las propiedades CSS3 para IE, algo que me quito tiempo porque las propiedades estaban repartidas entre muchas clases en diferentes lugares y la mayoría eran básicamente iguales. Por ejemplo, si quisiéramos un botón con gradiente azul, sombra y esquinas redondeadas usualmente lo haríamos de esta forma

(por demo sólo estoy aplicando estilos CSS en Firefox, por eso coloco “–moz” frente a la propiedad).

La solución y buen practica es usar un selector por cada propiedad CSS3 que desees usar, de esta forma:

¿Por qué?
Porque de esta forma la clase principal permanece valida para todos los navegadores y sí las propiedades CSS3 nos dieran problema las podríamos eliminar (reiniciar) simplemente haciendo esto (en una hoja de estilo adicional específicamente para IE, o el navegador que este dando el problema):

o sí utilizan Turbine (ver más abajo en recursos) podrían excluir esas propiedades de Internet Explorer, de la siguiente forma

Resalte en magenta la propiedad browser. Está funciona gracias a Turbine y la extensión Sniffer. Básicamente dice: “aplica esta clase en todos los navegadores excepto Internet Explorer”. Se puede elegir versión u otros navegadores, pero para ejemplo así esta bien.

En el caso de Internet Explorer y las esquinas redondeadas puedes usar el script DD_roundies sobre la clase conBordesRedondos4px para obtener los mismos resultados.

Recursos para usar CSS3

CSS3 aún no es terreno solido por lo que hay que tener cuidado al usarlo para mantener la compatibilidad, y para eso existen algunos recursos que te facilitan la tarea

• Turbine. Un framework en PHP para desarrollar CSS, acelera el desarrollo y optimiza el resultado final.
• Plugin CSS3: habilita las opciones CSS3 para utilizarlas según el estándar actual mientras que Turbine CSS se encarga de ajustar la sintaxis a cada navegador.  De esta forma sólo escribes una vez la propiedad.

  

• Plugin Sniffer: permite mostrar u ocultar estilos CSS según el navegador que visita la página, mejora su visualización y facilitando el cross-browsing. Recomiendo leer la documentación al respeto.
• Internet Explorer 9 (aún en beta) ya soporta parte del estándar CSS3.
• Pueden encontrar más información en el sitio web de desarrolladores de IE9.
• CSS3.info “todo lo que necesitas saber sobre CSS3”.
• Técnicas para conseguir propiedades CSS3 con jQuery por aNieto2K.
• Consejos para mejorar nuestro cross browsing por aNieto2k.
• Además de un lista sin fin de generadores de estilos CSS3
• CSS3 Generator. Genera código de varias propiedades CSS3 para Firefox, Webkit (Chrome, Safari, etc.) y estándar.
• CSS3 Please. En resumen es una especie de plantilla con estilos CSS3 predefinidos pero que podemos modificar escribiendo nuestros propios valores, por desgracia la apariencia no es muy agradable aunque eso no le quita lo útil.
• CSS3 Gradient Generator. Generador de gradientes utilizando CSS3, la interfaz es gráfica y muy fácil de usar.

Hasta la próxima.

Comenta

ivanmendoza 2010 - Bajo licencia Creative Commons By-NC-SA.

Firefox Portable + Dropbox

Mi PC no iba muy bien la semana pasada por lo que estuve trabajando desde computadoras ajenas y en un disco duro externo. La solución rápida para tener Firefox justo como lo quiero sin interferir en la PC ajena es usar Firefox Portable (igual que el normal pero sin instalación). El problema es tener que mantenerlo en la memoria USB, el disco duro, o el soporte que sea. También es de tener en cuenta que por ser una solución poco usual lo termino borrando y por tanto perdiendo la configuración.

La idea es usarlo junto a Dropbox para mantener Firefox en la nube, disponible desde cualquier computadora y ajeno a nuestro almacenamiento. ¿Ventajas? Firefox configurado, disponible en cualquier lugar, justo como lo queremos. ¿Desventajas? Descargar Firefox cada vez que tengamos que usarlo. En caso de tener Dropbox instalado no puedes configurar la velocidad de sincronización, Dropbox sincroniza cuando puede y por supuesto Firefox cambia a cada momento lo que causaría (supongo) demasiado gasto de recursos (conexión de internet y memoria principalmente).

Acortador de URLs “semántico”

Los “acortadores” de URLs se han puesto de moda, hay muchos y la mayoría hace lo mismo. Por lo mismo la idea va más del lado de cómo usarlo que de cómo funciona.

La idea es tener un acortador de URLs integrado con el blog (una extensión de WordPress, de Live Writer o similar) que antes de publicar un tema pida una keyword que resuma todo el tema. Por ejemplo, hace unos momentos he escrito un tema acerca de PsPad y supongamos use la keyword pspad, probablemente meses después quiera enlazarlo pero no recuerde la dirección, aquí entra el acortador porque para enlazar solo tendría que escribir ejemplo.com/ivan/pspad. Claro, la dirección no es tan corta pero sigue siendo más corta que la del blog y además tiene sentido lo que la hace fácil de recordar.

La integración con el blog, además de pedir la keyword al publicar, sería sugerir la keyword a los visitantes al final del tema. Algo como “Enlaza el tema usando ejemplo.com/ivan/pspad”. ¿Quieres conocer la opinión de Javier sobre Apple? usas ejemplo.com/javier/apple.

Además se puede pensar en funcionalidades extras como sugerir temas relacionados, por ejemplo, otros artículos sobre pspad. ¿Cómo? agregando + (más) a la URL: ejemplo.com/ivan/pspad+ y voilá llegamos a una página con todo lo que he dicho sobre pspad, incluso fuera del blog, como por ejemplo en Twitter o Facebook. Hasta podría ser la página de resultados de Google (solo con resultados de mi blog).

Obviamente para esta idea podría usar Delicious que permite un funcionamiento similar, incluso yo lo uso así para compartir recursos a mis amigos, por ejemplo para compartir iconos uso delicious.com/diciembre7/recursos+iconos. Por supuesto no es lo mismo porque esta orientado a favoritos, “mi idea” esta más del lado de una búsqueda de términos en blogs y redes sociales. En este caso sería mejor una URL corta para el buscador de Friendfeed que es más o menos el resultado que me gustaría ver.

¿Si ya existen servicios similares de qué serviría? Serviría para facilitar información. Pedro pregunta qué tal la nueva Mac, Juan contesta “Revisa el artículo de luis  ejemplo.com/luis/mac”. Te das cuenta que no tuvo que ir a google a buscar la URL del blog, no uso delicious, tampoco tuvo que recortar la URL luego de buscar el artículo, simplemente escribió lo que recuerda: luis + mac.

¿Qué les parecen las ideas? ¿Funcionarían? ¿Ya existe algo similar?

Comenta

ivanmendoza 2009 - Bajo licencia Creative Commons By-NC-SA.

2 comentarios

ivanmendoza 2009 - Bajo licencia Creative Commons By-NC-SA.