Recursos Web

Hemos visto en clase como podemos redondear bordes de diferentes elementos de nuestra página. Como sé que no os acordáis, os refresco un poco la memoria:

Si nuestro navegador soporta el estándar CSS3, usaremos:

Hoy día esa propiedad ya es soportada por todos los navegadores modernos (incluido IE9). Aún así, todavia existe gente que usa versiones más antiguas de los navegadores. Para estos navegadores podemos usar:

Aunque con estas propiedades no nos validaran la página (no son estándar).

Internet Explorer, como no, es diferente. Como ya sabemos, las versiones 6, 7 y 8 de este “magnifico” navegador, no soportan propiedades de CSS3, por tanto, lo explicado antes no nos sirve.

Algunos sitios comentan que para solucionar esto en IE8 se ha de usar la propiedad: -ms-border-radius: 3px; Ni caso. Esa propiedad no funciona en ninguna de las versiones de IE indicadas (y me extrañaria que funcionara en IE9)

En clase vimos que podíamos solucionar esto usando una libreria en Javascript llamada DD_roundies.js

Para quien no le guste esa solución, o simplemente quiera saber alguna alternativa más, aquí os muestro como redondear bordes en Ineternet Explorer usando un archivo .htc

El método es muy sencillo:

Imaginad que queremos que este DIV tenga los bordes redondos en todos los navegadores:

< div id="redondo">Esto es algo muy útil< /div>

Para ello nos vamos al CSS y añadimos un selector ID para darles las propiedades:

#redondo{
    ...
   -moz-border-radius: 8px; /* Firefox*/
   -webkit-border-radius: 8px; /* Safari,Chrome.*/
   border-radius: 8px; /* El estándar.*/
   behavior:url(border-radius.htc);/* IE 8.*/
}

Como veis, para IE hemos añadido la propiedad behaviour (os remito al libro de CSS Avanzado) junto con ruta relativa de un archivo .htc. FIN. Eso es todo.

El archivo necesario se puede descargar de AQUI. En ese mismo enlace tenéis ejemplos de lo que acabo de explicar.

Ni que decir tiene que esta forma tampoco valida (estamos usando la propiedad Behavior que es propia de IE).

En muchas ocasiones, cuando navego en busca de algo (un recurso, una solución , unos archivos…) nos encontramos con sitios que parecen tener lo que buscamos.  Sin embargo, en muchos de esos sitios no podemos acceder a esa información a no ser que, previamente, nos registremos en el sitio.

Esto para mi es una molestia. No por el hecho de rellenar el formulario de registro (que normalmente es corto) si no por el hecho de ceder mi dirección de correo a un sitio que, muy posiblemente, no vaya a volver (encuentre o no la solución en dicho sitio)

Es por eso que el recurso que os presento es más una herramienta útil para estos casos que para el diseño web.  Su nombre es: 10 Minute Mail

Nada más entrar en esa página se nos genera automaticamente un correo temporal que dura 10 minutos. Pasado ese tiempo (y si no le decimos lo contrario) esa dirección de correo desaparece.

Esa página tambien sirve de bandeja de entrada del correo generado. De modo que si realizamos un registro y nos tienen que validar el correo usado (normalmente nos envia un mensaje con una URL de validación al correo) tan solo tenemos que esperar a que el correo aparezca en la bandeja  de entrada ‘falsa’ que tiene la página.

Si diez minutos no es suficiente, siempre podemos “dame 10 minutos más” (aparece debajo de nuestra dirección falsa) para alargar la vida de nuestra cuenta de correo.

No os preocupeis si, dentro de los diez minutos de vida, cerrais la página. Mientras no borreis las cookies/sesiones del navegador, la página va a seguir manteniendo la cuenta generada (y por ende, los mensajes que tuvierais en la bandeja de entrada).

Siempre que empiezo con el tema de HTML, a mis alumnos les llama la atención el que ‘caracteres’ tan cotidianos para nosotros (la ñ, las vocales acentuadas, el espacion en blanco…) no sean entendibles para los navegadores.

Por mucho que intentemos ir colocando el código correcto conforme escribimos, o que usemos la opcion ‘buscar y reemplazar’ de nuestro editor favorito,  si no estamos acostumbrados,  es normal que se nos escape algún carácter y tengamos que hacer correcciones una vez que tenemos la web subida al servidor. Un coñazo, todo sea dicho.

Para intentar evitar este tipo de cosas, hoy os muestro una sencilla y útil página web que se encarga de traducir lo que escribimos a texto entendible por los navegadores. Esto es, que hace toda la transformación de caracteres problemáticos de nuestro texto por nosotros. Como resultado nos devuelve un texto totalmente apto para colocar en nuestra web.

Pero no acaba ahí la cosa, esta web también hace el paso inverso. Es decir, podemos darle un texto con los caracteres pasados a codificación HTML y la página nos devolverá el texto con acentos, espacios, arrobas…

Html-Ent.com

Para finalizar me gustaría indicar que es facil hacer una web con la funcionalidad que presenta esta que os enseño…¿verdad? Os animo a ver si sois capaces de “copiar” el funcionamiento de esta web (que seguro que lo sois).

Como pista os dire una palabra…htmlentities

Aqui os dejo una cortita entrada muy interesante del blog ‘blocdeesbozos‘ de mi alumnito frikidelosquedacharlas preferido.

Comenta como hacer funcionar ‘min-height’ en Internet Explorer. Copio tal cual:

Es una combinación de selectores CSS para conseguir que un div tenga un alto mínimo. Esto viene muy bien para decorar tablas que, vía MySQL, tendrán resultados diferentes en función de lo que se busque. Gracias a esto, la imagen de fondo de la tabla siempre aparecerá:

    .tabla{
           min-height:500px;
           height:auto !important;
           height:500px;
    }

Me hizo falta para una cosa del trabajo, y después de mucho buscar, dí con la solución. Aquí podéis ver una prueba. Independientemente del tamaño que alcance esa lista (podéis probar con varias provincias), la marca de agua colocada en el fondo siempre mantendrá el mismo alto, y por tanto se verá entera.

Articulo original : Blocdeesbozos

Como ya sabéis, a lo largo del curso suelo ser muy pesado con lo de probar las páginas en Internet Explorer y en Firefox. No me canso de repetir que hay que tener ambos navegadores abiertos a mismo tiempo que vamos creando la página, con objeto de comprobar como se ve en uno y como se ven en otro. Y no, no me fio un pelo de los “previsualizadores” propios que traen algunos editores como Pspad, las versiones antiguas de Dreamweaver…

Entiendo que a alguien le puede resultar “lioso” el moverse por tres aplicaciones abiertas a la vez: Explorer, Firefox y el editor que usemos para crear la pagina. También entiendo que haya gente que prefiera uno u otro navegador y “le cueste” abrir ambos.
Pero el tema del diseño web es asi. Hasta que todos los navegadores sean capaces de cumplir con los estandares establecidos (vease como ejemplo el modelo de cajas CSS en IE y en el resto de navegadores), nos tenemos que aguantar.

Para ayudar a esa gente que se “lia” con dos navegadores abiertos a la vez, os voy a mostrar un fantástico plugin de Firefox: IE TAB

Su descripción es bien clara: IE Tab, una extensión de Taiwán que permite: Integrar Internet Explorer en pestañas de Mozilla/Firefox. Es decir, podemos abrir el IE desde una pestaña de Firefox. Fijaros en el ahorro de medios que eso supone.

Ahora es suficiente con tener abierto un solo navegador, Firefox, y tener dos pestañas abiertas: una pestaña normal y corriente (para ver nuestra pagina en Firefox) y otra pestaña usando el IE Tab (para ver nuestra pagina en IExplorer).

Es mas, si tenemos una pagina abierta con FireFox, en cualquier momento podemos comprobar como se ejecutaría esa pagina en Internet Explorer. Tan solo hay que pulsar el icono que activa el plugin y listo!!!.

Para facilitaros el uso del plugin y evitaros el tener que trastear por los menús, os recomiendo que, una vez instalado el IE Tab, pulséis con el botón derecho en la barras de iconos del navegador (pej, al lado del icono de la casita), seleccionéis “personalizar” en el menú que se despliega y os aparecerá un montón de iconos. Buscad el del plugin (ver imagen) y arrastrarlo con el ratón al lado de la casita.

De esta manera cada vez que queráis cambiar entre FireFox y Explorer, bastara con pulsar ese botón. Si lo que quereis es abrir una pestaña nueva en Firefox con vista de Explorer, pulsad sobre ese mismo icono pero con el botón central del ratón (la rueda del ratón, vamos).