Hace un tiempo encontre, una herramienta muy util para testear mis webs en las versiones de Internet Explorer (IE 5.5, IE6, IE7, IE8) en sistemas Windows XP, Windows Vista y Windows 7.
El Programa se llama IETester, es un navegador web que tiene la funcionalidad de mostrar la representacion de una pagina web como se ve en las diferentes versiones del Internet Explorer.
Tiene un funcionamiento sencillo, y ademas contiene diferentes herramientas de desarrollo. Sin duda sera una buena herramienta en el desarrollo y diseño de paginas web.
Actualmente este proyecto se encuentra en la versión Alpha. Aqui les dejo un screen donde pruevo como se ve mi diseño en los navegadores IE6 y IE7.
Enlace: IETester
Aqui les dejo los estilos css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| /*blockquote*/
blockquote {
border-left:10px solid #ccc;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"\201C""\201D""\2018""\2019";
font: italic normal 12pt/1.2em Georgia;
color: #5F5F5F;
}
blockquote:before {
color:#888888;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
blockquote p {
display:inline;
}
blockquote:after {
content: close-quote;
color:#888888;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.5em;
} |
Si desean otros formatos o estilos, pueden consultar este link.
Es muy comun querer saber como se ve tu diseño de una pagina web en otros navegadores con diferentes versiones, lastima que no todos los navegadores web interpreten igual los codigos html y css.
Afortunadamente hay websites para ese proposito:
- BrowserShots, Es una web dedicada a este proposito, su funcionamiento es asi: introduciomos la url a revizar, despues seleccionamos los navegadores que deseemos y enviamos la peticion, se agregara a la cola y despues de un tiempo se mostrara la captura de pantalla de cada navegador mostrando la salida de nuestra url.
(Navegadores: Todas las versiones de Firefox, IExplorer, Opera, Flock, Safari, muchos mas).
- ie netRenderer, Solo para las versiones de Internet Explorer. Es muy util para ver rapidamente la captura de pantalla de una url. Si no tenemos instalado el ie6 es una alternativa rapida para checkear la compatibilidad.
Seguramente alguna vez haz querido hacer unos efectos de transparencia en tus diseños con CSS.
En realidad esto se logra de diferentes maneras, veamos las opciones con estilos CSS:
1
2
3
4
| .transparente50 {
filter:alpha(opacity=50);
opacity: 0.5;
} |
En esta estilo CSS tiene el efecto 50% de transparencia,es necesario indicar que la propiedad se llama “OPACITY” (opacidad), y su valor maximo es 1 o 100 en el caso de filter:alpha(opacity=100), con ese valor no hay ninguna transparencia; ahora explico cada propiedad y en los navegadores que funciona:
- opacity: 0.5; es el estandar actual en CSS, y funciona en la mayoria de vesiones de Firefox, Safari y Opera. Esto propiedad seria suficiente si todos los navegadores siguieran los estandares vigentes.
- filter:alpha(opacity=50); para Internet Explorer.
Ahora, tendrias un problema si deseas que el fondo sea transparente pero el texto no, como se muestra en la imagen de arriba. Ya que si tu pones a un contenedor con “opacity:0.5″, todo el contenido del contenedor aplicaria ese efecto.
Aplicando los estilos mencionados anteriormente la solucion aparente seria asi:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <style type ="text/css">
.contenedor {
/*background-color no es necesario pero esta aqui como ejemplo*/
background-color:#000;
/*25% de opacidad osea 75% de transparencia*/
filter :alpha (opacity =25 );
opacity : 0.25;
}
.contenedor .texto {
background:transparent;
color:blue;
/*100% de opacidad osea 0% de transparencia*/
filter :alpha (opacity =100 );
opacity : 1;
}
</style >
<div class ="contenedor">
<div class ="texto">Texto sin transparencia y en azul</div >
</div > |
Esto no funciona en Firefox, el texto se muestra transparente; y en Internet explorer, funciona pero, el texto se muestra distorcionado especialemente las que estan en negrita.
La solución
Create una imagen de tamaño minimo [1 pixel de alto y ancho] en Photoshop, Fireworks o el programa de manipulacion de imagen que utilizes, pintale del color que desees por ejemplo negro, y aplicale el filtro de opacidad al 50%. Ahora guardalo como un archivo PNG con el nombre “transparente50.png”, los archivos PNG tienen la propiedad de conservar su transparencia y es compatible con casi todos los navegadores web.
Entonces, asi quedaria el estilo CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <style type ="text/css">
.contenedor {
/*ruta del archivo PNG con transparencia*/
background:url(transparente50.png ) repeat;
}
.contenedor .texto {
color:blue;
background:transparent;
}
</style >
<div class ="contenedor">
<div class ="texto">
Texto sin transparencia
</div >
</div > |
Espero que halla sido de provecho esta redacción.
