SuperPreview: Sitios a prueba de errores
Si asististe al MIX 09 o checaste los videos online, sabrás de qué se trata este post… y si no tuviste la oportunidad, te cuento que durante el MIX 09, en Las Vegas, se presentó un nuevo producto para Diseñadores Web y Maquetadores de XHTML/CSS parte de la Suite Expression: SuperPreview.
¿Qué onda SuperPreview?
SuperPreview es un nuevo producto creado por Microsoft para Diseñadores Web y Programadores que nos permite verificar que al codear nuestros diseños en XHTML/CSS éstos se vean bien tanto en Internet Explorer (versiones 6, 7 y 8), Firefox y Safari. Buenísimo.
Su interfaz, sencilla de entender, nos permite comparar cómo diferentes browsers presentan las páginas que hemos diseñado o codeado. Por ejemplo sitios optimizados para Internet Explorer 8 no se ven igual en Internet Explorer 6 o bien, sitios para Safari no se despliegan de la misma forma que en Firefox.
Comparación de Alistapart.com usando Firefox e Internet Explorer 8
No está de más contarles que aparte de poder comparar entre diferentes browsers, SuperPreview nos permite abrir imágenes para compararlas con el sitio ya codificado (para todos aquellos “pixel perfectionists”) y asegurarnos así de que el XHTML/CSS está hecho exactamente igual a como se ve el sitio en el diseño. BUENA NOTICIA para los que trabajan con productos de Adobe: Aparte del obvio soporte para bmp, gif y jpg, puedes abrir archivos PNG y PSD. Interoperabilidad… quién?!
Como si fuera papel cebolla, podemos superponer la página e identificar errores, etc.
Los creadores… sabían que no puedo tener instalado IE 6, 7 y 8 al mismo tiempo?
Por supuesto que sí! Es por eso que cuando utilices SuperPreview no necesitarás tener varias versiones de Internet Explorer (no imposible pero casi..), ni mucho menos Firefox o Safari. SuperPreview la tiene clarísima: Utilizando Cloud Services (o Servicios en la Nube), SuperPreview renderea tus sitios y páginas en servidores especialmente creados para eso y te presenta cómo se veran en otros browsers, en tu escritorio, sin dolores de cabeza ni esperas interminables.
Aparte de usar “papel cebolla” y cargar mis páginas… qué puedo hacer?
SuperPreview no se limita solamente a presentarte un sitio o página en dos paneles; con SuperPreview puedes revisar detalles muy específicos: desde crear Guías de referencia, utilizar reglas, hacer Zoom… hasta revisar el CSS (márgenes, textos, alineaciones, imágenes, etc), HTML y DOM para asegurarte de que tus sitios se vean adecuadamente en los browsers principales. En una próxima entrega haré una explicación más específica de las funciones del programa y usaré algunos ejemplos de la vida real..
Ya para cerrar me gustaría preguntarte qué haces para asegurar que tus sitios se vean bien en todos los browsers? Usas varias computadoras con diversas versiones de browsers? Sitios como browsershots? No te preocupas por el tema? Estoy seguro que tendrás algo que compartir, lo estaré esperando!
Daniel Priego
Porque no incluyen la verificación del opera? Es que este navegador es tan bueno que se notaria la superioridad respecto de firefox y explorer!
saludos
Por ahora no hay planes para soportar Opera y personalmente creo que es debido a que SuperPreview está enfocado a los browsers más populares/usados del mercado. Quizás más adelante podría haber soporte para Opera ya que el servicio está basado en Cloud Computing por lo cual no creo que fuera un gran problema implementarlo. De nuevo, solo me lo imagino… habrá que ver lo que se viene en el futuro!
Hola Daniel, la beta que está disponible para bajar incluye la opción de usar otro browser que no sea IE? Si es así, cómo se hace? :o) Estuve probando la aplicación pero sólo tengo disponibles las opciones de IE (en sus diferentes versiones) e imagen.
Hola Adrián!
La beta que está disponible por ahora solamente funciona con Internet Explorer 6-7-8 (si estás usando Windows 7 no anda el IE6). En una versión interna a la que ya tuve acceso ya puedes usar Firefox y todas las versiones de IE en Windows 7/Vista/XP. No falta mucho para que salga al público así que un poquito de paciencia :)
Saludos!
Gracias Daniel, mantenenos al tanto! La verdad que está muy muy buena la herramienta.
Respecto a lo de comprobar nuestras web en distintas versiones de los navegadores para firefox teniendo instalado el 2 puedes instalar el 3 creando otro perfil (hay bastante sitios que lo explican a mi ya se me olvidó como lo hice!) y para explorer una pequeña aplicacion que se llama MultipleIE que te instala las distintas versiones anteriores al 7 y el 8 tiene la opcion de mostrarlo como el 7 y como el 8
:) Hasta mas leer!
Tambien seria bueno que hiciera la comprobacion ara Chrome, navegador de google.
@May – Está interesante lo que mencionas y no dudo que hayan posibilidades de emular distintas versiones de exploradores… pero creo que si existe una aplicación como SuperPreview que lo tiene todo integrado es más práctico. De forma muy personal siento que mientras más fácil sea comprobar los sitios que hago, mejor, sin tener que hacer, quitar y modificar cosas.
@Fann_Lavigne – No sé qué tan práctico sería incluir Chrome por dos cosas: La principal es que Chrome utiliza el mismo engine de Safari: Webkit por lo que si tus páginas se ven bien en SuperPreview en Safari, lo mismo debería suceder con Chrome y la segunda, si cabe el comentario, es que Chrome no tiene la penetración de los navegadores incluídos en SuperPreview… para el caso creo personalmente que antes se incluiría Opera.