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).

Dentro de las “buenas costumbres” que debemos tener a la hora de crear nuestra hoja de estilos está la de optimizar dicha hoja una vez la tengamos terminada. De esta forma vamos a conseguir que nuestro archivo pese bastante menos.

Alguno pensará que no es necesario optimizar el peso de un triste archivo CSS que apenas pese 3Kb. Pues muy mal pensado Hay que intentar optimizar todo lo posible este tipo de cosas (peticiones al servidor y descarga de archivos necesarios), maxime cuando el ADSL en España va como va.

Además, se recomienda juntar todas las hojas de estilo de nuestro sitio para tener UN SOLO archivo css (asi solo se realiza una petición al servidor). Si hacemos esto, probablemente el archivo pese mas de 3Kb.

A continuación os muestro un par de paginas dedicadas a la optimizacion de archivos css. Son muy sencillas de usar (se utiliza un formulario). Subimos el archivo css o copiamos su contenido en el formulario. Le damos a optimizar y… voila! nos devuelve el código optimizado y toda la información referente a los cambios que ha realizado y al ratio de optimizacion conseguido. Las páginas son cssoptimizer y css compressor

Aqui estamos otro curso mas!!! Durante este tiempo de descanso he estado mirando un par de libros interesantes relacionados con el tema de diseño web.

El primero es la Guia Practica de Anaya Multimedia sobre Joomla 1.5.X. El libro esta muy bien (en la línea de las guias de esta colección), sin embargo, al ser una lectura “obligada” por temas de trabajo, no la estoy disfrutando todo lo que debiera.

Mi siguiente recomendación si me gusto mucho cuando la leí. Es mas, lo estoy volviendo a releer ahora mismo con el objetivo de hacer unos apuntes nuevos para este curso .
El libro en cuestión es CSS Avanzado. Como veis es de la famosa pagina Librosweb.

Son solo 150 páginas pero MUY interesantes y con mucha información MUY UTIL. Es el complemento perfecto al libro que usamos en clase (sacado de la misma pagina).
Comenta desde trucos para obtener efectillos curiosos usando CSS (transparencias, bordes redondeados, sombra paralela…) hasta propiedades y selectores avanzados. Pasando por temas de depuración, rendimiento y “buenas costumbres para hacer una CSS”.

No os dejéis engañar por el titulo. Lo de “Avanzado” es para que se lea el otro libro primero. Cualquiera de vosotros (hablo de mis alumnos que tienen el titulo ) puede leerlo y entenderlo perfectamente. Y lo mejor es que, con dedicarle un poco de lectura por las tardes, en 3-4 días lo tenéis listo.

Para finalizar, agradecer a D. Javier Eguíluz Pérez, autor de estos libros, por compartir de forma gratuita, sus conocimientos sobre el tema de diseño web. Yo personalmente, he aprendido mucho leyendo sus libros (que han sido casi todos :p)

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

Las imagenes bullets son iconitos pequeños que se usan para sustituir las viñetas en las listas y mejorar asi su estilo. No es dificil hacerse una bullet para nuestras listas, pero para la gente vaga (o poco creativa :p) voy a mostrar una página con 200 bullets gratuitas listas para usar: 200 Bullets Gratis

Ahora no teneis excusa para dejarme las viñetas que traen por defecto las listas en HTML

Gracias a Juan Cruz he podido leer un articulo muy interesante (y bastante cortito) sobre que hoja de estilo de “Reseteo de CSS” escoger. Aqui os lo dejo:

Escoge tu CSS inicial

Basicamente lo que nos viene a decir es que, para grandes proyectos, es recomendable escoger la de Eric Meyer y para proyectos pequeños y/o medianos (lo mas normal), la de Faruk Ateş.

Aqui os dejo una pagina interesante con cuarenta plantillas CSS gratis. Algunas son muy sencillas y podeis usarlas para ver el código y repasar como se hacian estas cosas :p

Layout Gala

Aqui os paso una dirección para poner bonitas nuestras tan socorridas tablas. Esas que todo el mundo usa en algun momento de su vida para “enderezar” los bailes de las estructuras creadas con DIV’s (y luego no lo admite).

CSS para Tablas

Podeis ir viendo los diseños conforme vais pinchando en las celdas de la primera columna de la tabla que aparece.

Todos los CSS son gratuitos si mantenemos el nombre del autor cuando lo usemos.

Yo suelo utilizar mucho el tema Infected (que es el que os he puesto por defecto a la hora de cargar el enlace).

¿A cuantos os ha pasado que, una vez terminada la maquetación de la página, la visualizais con otro navegador y toda al estructura baila? (Eso os pasa por no hacerme caso y no hacer las pruebas en varios navegadores:P)

La realidad es que maquetar en CSS es un verdadero coñazo. Tenemos que estar atentos a que toda la pagina se vea bien en, al menos, los dos navegadores mas extendidos: Internet Explorer y FireFox.

Cuando no hay manera de arreglar “nuestro fallo” en el CSS para que se vea bien la pagina en ambos navegadores, la gente “mala” recurrimos a los hacks que existen. ¿A quien le importa que el CSS sea valido cuando tienes un cliente que solo quiere que su pagina “sea bonita, este la primera en google y se vea en Firefox y Explorer”? Es triste, pero a la hora de la verdad es asi.

De todas formas, las cosas siempre hay que intentar hacerlas bien desde el principio. Debemos preocuparnos, en la medida de lo posible, que nuestro código HTML/CSS sea válido.

Para ello he encontrado algunas alternativas a esos hacks que usan “las malas personas“.

La primera es una libreria en JavaScript que, si la usamos, nos promete convertir al Internet Explorer en un navegador totalmente compatible con los estandares CSS.

A JavaScript library to make MSIE behave like a standards-compliant browser

La pagina oficial es esta: IE7-JS

La he estado probando y parece que funciona bien. Por lo menos en lo que se refiere al ajuste de medidas de paddings, margins y demás.

Sin embargo, no termina de convencerme.

• Para empezar, es una libreria JavaScript, por tanto si el navegador no tiene activado los scripts, nuestra pagina no se corrige.
• Hay que insertar un hack para usarla (el famoso IF en el HTML) que, si bien con él podemos pasar el validador, se aleja del objetivo de no tener que usar hacks.
• Dependiendo de la velocidad de conexion del servidor, se ve como la pagina “se arregla”. Es decir, de principio la pagina es cargada sin arreglar y, tras cargar el script, la pagina se reajusta y se coloca bien (y todo ello lo ve el usuario).

Aunque es una alternativa muy trabajada y muy bien programada, yo solo la usaria en caso de tener que entregar algun prototipo de la pagina de un dia para otro. Y siempre con vistas a solucionar ese “baile de estructura”.