Queli Coto Desarrollador Web

A veces nos es inevitable tener que recurrir a estos hacks, por alguna razón  los navegadores se empeñan en no cumplir con un mismo standard  y lo que podemos estar viendo correctamente en unos, en otros se ve fatal. No estoy hablando de los Internet explorer, me refiero ya a navegadores decentes como Firefox, Opera, Safari, Chrome.

Pues Bien, esta semana me he encontrado en el trabajo con un problema de maquetación en google chrome (sólo se descolocaba unos controles en un slider) y buscando dí con la siguiente solución, que aunque es un poco enrevesada funciona perfectamente.

@media screen and (-webkit-min-device-pixel-ratio:0)

{
//colocamos las reglas css

.next a { margin-top: 15px;}
.back a { margin-top: 15px;}
}

Lo encontré en el blog de Martin Ivanov que me ha sorprendido gratamente y ya está en mi Reader. Este hack viene a sustituir al viejo body:nth-of-type(1) Selector que si bien antes sólo lo interpretaba el Chrome, ahora ya lo consiguen interpretar el Firefox 3.5 y el Opera9.2+, lo que nos hace ver el peligro de usar estas técnicas, así que  el consejo es: intentar evitar el uso de CSS hacks todo lo que podamos.

Seguimos con las herramientas de formas simples en illustrator, en el anterior tutorial ya vinos como crear un cuadrado, circulo, triángulo y una cruz. En este veremos algún consejillo o truco para seguir creando formas simples.

Empezamos por la herramienta Polígono ( Polygon Tool) basta con seleccionarla en el cuadro de mando y pulsar sobre nuestra mesa de trabajo, esto hará que nos salga una ventana preguntandonos por las dimensiones  del radio del objeto a dibujar y lo más importante los lados.

Una vez seleccionado los datos que queremos usar ya podremos terminar de dibujar nuestro objeto y como podéis observar, el truco para dibujar un triángulo es escoger 3 lados, sencillo  eh, con la de vueltas que dimos en el anterior tutorial.

Un segundo truco es que mientras estamos dibujando podemos cambiar los lados seleccionados pulsando las teclas arriba y abajo del teclado numérico.

Un ejemplo de diversas formas creadas con las herramientas polygon tool y star tool con un relleno en blanco y un trazo magenta de 13pt.

Como desarrollador web que soy, debo chequear todas las maquetaciones en todos los navegadores posibles.

Pero a veces, es imposible encontrar todos los navegadores que funcionen en un mismo sistema operativo y además, si te compras un ordenador y trae instalado el windows vista, perdemos el explorer 6 con lo cual, mientras este siga con vida, tenemos un problema.

En esta guía voy a detallar los pasos que he seguido para tener instalado en un pc los siguientes navegadores.

Firefox2, Firefox3, Opera, Safari, Internet explorer 8, Internet explorer 7, internet explorer 6 y Konqueror.

Empezamos con los sencillos

Internet explorer 7

Como estamos bajo windows vista, nuestro navegador por defecto instalado, es el internet explorer 7, así que lo tacharemos de la lista.

screenshot de noth.es en internet explorer 7

¿ Hasta aquí, dificil verdad ? Seguiremos con los siguienes que también son fáciles.

Firefox 2 y Firefox 3 beta

Vamos a instalar ahora los firefox, para ello yo recomiendo siempre las versiones portables, ya que las podemos guardar en nuestro pendrive y usarlo donde queramos.

Nos vamos a portableapps y nos bajaremos tanto la versión ff2 como la versión ff3.

Enlace descarga firefox 2 | Enlace descarga firefox 3

La instalación la hacemos donde queramos, yo recomiento una carpeta llamada navegadores para tenerlos todos ahí, pero esto es cuestión de gustos, la instalación es muy simple siguiente, siguiente y siguiente.

screenshot de seende.com en firefox 2

screenshot de job2time en firefox 3

Opera

Para la instalación del opera, haremos lo mismo que con los firefox, nos bajaremos la versión portable. La instalación de esta versión es mucho más simple, con descomprimir el fichero ya lo tenemos.

Enlace de descarga opera 9

screenshot de glamouralive.com en Opera

Safari

De este navegador existen muchas versiones por la red portables, pero yo no conzoco ningún, grupo que se este haciendo cargo de este desarrollo y prefiero no bajarme ningún portable de momento, por lo que la mejor opción o al menos la que recomiendo en esta guía es, la instalación del original de la página de safari.

Enlace de descarga Safari para windows

screenshot de quelicoto.es en safari

Ahora a por los más “difíciles”

Internet explorer 6

La mejor opción que he encontrado para hacer funcionar el ie6 en windows vista, ya que las opciones de multi ie, que en windows xp si funcionaban a la perfección en vista no es así.

Es intalar el microsoft virtual pc, que nos permitirá instalar otros sistemas operativos dentro de windows vista, como por ejemplo el que necesitamos el windows xp.

Por lo que procedemos a descargar la virtual pc de microsoft, la instalación es sencillísima, todo siguiente .

Ahora nos tocará instalar un pc virtual que contenga el explorer 6, para ello microsoft tiene disponible para la descarga legal y testing lo que denominan vpc image, así que nos vamos a descargar la que corresponde con el explorer 6

Descarga de IE6_VPC.EXE 435.1 MB

Pasos para instalar este imagen en el microsoft virtual pc

1. Lo primero ejecutaremos el exe que nos hemos descargado y guardamos su contenido en una carpeta por ejemplo c:\navegadores\ie6, este proceso tarda mucho, paciencia.
2. ejecutamos el virtual pc y nos preguntará que queremos hacer , escogemos crear un equipo virtual
3. Nos pide escoger un nombre por ejemplo ie6xp - siguiente
4. La siguiente pantalla nos dice el sistema operativo que necesitamos, escogemos windows xp, por ser la imagen que nos hemos descargado
5. Podemos ajustar la ram a usar, yo recomiendo 512 mb
6. En este proceso nos pide un disco virtual, vhd, que es lo que hemos descomprimido antes, seleccionamos la opción, un disco virtual existente
7. Lo seleccionamos, estará en c:\navegadores\ie6 y por ultimo finalizar
8. Con esto ya tendremos nuestro windows instalado con ie6, podemos configurar la red para que este tenga acceso internet, como si otro pc se tratase, basta con darle a iniciar con arrancarlo.

screenshot de quelicoto.es en internet explorer 6

Internet explorer 8

Tenemos que hacer los mismo pasos, instalar la imagen que nos proporciona microsoft

Descarga IE8_VPC.EXE 438.6 MB

screenshot de noth.es en internet explorer 8

Konqueror

Con este navegador sucede lo mismo que con las versiones 6 y 8 del explorer, necesitamos montar una imagen virtual de linux dentro de nuestro windows, la mejor forma y sencilla que he encontrado es usando la distribución, andlinux.org

Nos bajamos la versión que trae el KDE instalado, he igual conseguimos engancharnos y cambiarnos a linux otra vez.

Enlace de descarga de andlinux-beta1-kde.exe

Una vez descargado los pasos para su instalación son muy sencillos.

1. La instalación es todo siguiente - siguiente, hasta la pregunta de como compartir ficheros con windows
2. Recomiendo la segunda opción COFS, donde solo tenemos que escoger una carpeta, que será visible por ambos sistemas
3. Y por último antes de darle a finalizar debemos, seleccionar en el listado de programas a instalar, la opción del konqueror web browser, que es justo lo que estamos buscando.

Una vez instalado tendremos el entorno linux dentro de nuestro propio windows, y podremos ejecutar sus aplicaciones de la mima forma que las nativas, un auténtico lujo, ahora quién se niegará a probar linux pero eso es otra guerra.

Bastará con ejecutar konqueror

screenshot de quelicoto.es en konqueror

Y esta es la barra de estado de mi windows con todos los navegadores cargados

Navegador extra, al instalar este linux para windows también tenemos instalado el navegador firefox 2 para su testing en linux

Con lo cual está guía sirve para instalar los siguientes navegadores:

firefox 2, firefox 3, opera, safari, internet explorer 6, internet explorer 7, internet explorer 8, konqueror y firefox 2 para linux

Vamos ya nadie se puede negar a hacer webs multi-browser, otra cosa es que nos dé más dolores de cabeza pero para eso somos desarrolladores webs.

Se que existen muchas otras formas para tener multisistema dentro de otro como WMware, pero además de ser una aplicación no libre, tendremos que disponer de los sistemas operativos originales para poder instalarlo, vamos que esta guía no es la única forma de hacerlo, es la que yo utilizo y recomiendo.