Diario de Programación

Cuanto más miro CSS, más me asombra lo incompatible que es con Internet Explorer. Cada vez que intento hacer algo nuevo con CSS, aunque sea una chorrada, no funciona en Internet Explorer. Me pongo a buscar por internet e inevitablemente me encuentro algo del estilo “… Internet Explorer no soporta…”, “…Internet Explorer ignora …”, … Internet Explorer interpreta mal …”.

Aquí va una lista de las “insoportabilidades” con las que me he encontrado.

• Interpreta el tamaño de las cajas de forma distinta. El ancho y alto de las cajas en CSS se miden para el texto que lo contiene. El padding y border van fuera del tamaño. Internet Explorer lo mide desde el border. Un mismo tamaño con padding y border se ve más pequeño en Internet Explorer.
• No interpreta los :hover (y creo que muchas pseudoclases más) para todos los elementos. Sólo lo hace con los vínculos.
• En CSS es posible combinar selectores de muchas formas: “.clase p”, “.clase > p”, “.clase + p”, etc, etc. Internet Explorer no interpreta e ignora muchas de ellas.
• y sólo llevo dos días con CSS.

Afortunadamente parece que Internet Explorer 7 cumple algo más con el estándar de CSS.

Bueno, después de varios intentos y de llevar unos días en serio con ello, por fín parece que le voy pillando el truco a CSS y empiezo a sentirme cómodo con él.

Sigue siendo un verdadero peñazo las diferencias entre exploradores, Internet Explorer y Firefox en mi caso, que son con los que hago pruebas, pero poco a poco voy sabiéndo cuáles son esas diferencias y los truquillos para evitarlas. De hecho, en mi último experimento (menús desplegables con CSS puro) decidí pasar olímpicamente de Internet Explorer símplemente poque no funciona si no se pone javascript y de momento no estoy por la labor.

También es un poco rollo el modelo de cajas de CSS y el posicionamiento de las mismas. Aparte de las consabidas diferencias entre navegadores,  muchas veces es complejo predecir el comportamiento. Un pixel arriba o abajo puede dar al traste totalmente con la disposición de los distintos bloques.

Sin embargo, si no buscamos cosas complejas, las ventajas son muchas. Dejar todo el estilo de todas nuestras páginas de nuestro sitio web en un solo fichero CSS (o repartido en tres o cuatro ficheros CSS), con lo que basta tocar ese fichero y subirlo al servidor para cambiar de un solo golpe el aspecto de todas las páginas del sitio. Tengo guardado mi antiguo aspecto de libreta de la página y podría cambiar el aspecto de todo el sitio en cuestión de segundos.

Según he ido aprendiendo, he ido escribiendo algunos tutoriales de CSS con las cosas que más me han llamado la atención o que me han parecido más complejas de entender.  Como siempre, son algo informales, caóticos y sin ningún orden concreto. Sólo son más o menos independientes entre sí y tratando aspectos concretos que me han llamado la atención.

Hace unos días me puso muy contento con un nuevo link que me pasaron de CSS. En él se veía cómo hacer el diseño de una página con cabecera, tres columnas y pie de muchas formas posibles, en función de qué variantes sobre ese diseño desearamos: columna central estirable y las laterales fijas, las tres fijas, las tres estirables, etc.

Me fijé en el diseño nº13 de dicha página, que es el que me gustaba y me desesperé. La forma de hacerlo con CSS era algo rebuscada y no la entendía bien. Usaba cosas como margin-left:-100% ( ¡¡ menos cien por cient !! ) . Así no aprendería CSS en la vida.

Poco después me puse a hacer unos tutoriales de CSS y quise explicar ese diseño como ejemplo, pero me puse a buscar una forma de hacerlo más sencilla. Nada, no había manera, era totalmente incapaz de hacerlo de forma simple. La solución llegó de un foro, pregunté y el diseño es muy, muy tonto. Lo que hace saber.

Para la columna izquierda basta darle un ancho y un float:left, para la columna derecha un ancho y float:right. La central simplemente fluye entre las dos y para evitar que “desborde” por abajo cuando terminen las columnas laterales, basta con darle un margin-left y un margin-right adecuados

#columna_izquierda { width:100px; float:left; }
#columna_derecha { width:100px; float:left; }
#columna_central { margin-left:120px; margin-right: 120px; }

Gracias a esto, empiezo a pensar que CSS no es tan diabólico, sino que simplemente hay mucha gente por ahí que le gustan las cosas complejas.

Pregunté en un foro por el estilo de la libretita y los postit para mi página web y este blog, pero parece que no gustó mucho.

Teniendo eso en cuenta, que últimamente le estoy pillando el gusto a CSS y que llevo un par de semanas arreglando mis antiguas páginas html para extraer el css y pasarlas a php, pues hoy me entretengo haciendo otro nuevo cambio de look. Este me parece demasiado azul, pero ya seguiré jugando.

Una historia de cómo se evoluciona de las simples páginas HTML a lo más moderno, la web 2.0. Es más o menos la historia de lo que le puede pasar (y le ha pasado) a cualquiera como yo, que empieza como aficionado con un sitio web puramente en HTML y poco a poco, va evolucionando.

Cuando decides empezar a hacer una página, te buscas un editor HTML, a ser posible WYSIWYG, y te lías a hacerla. Vas poniendo en tu sitio una página HTML, otra, luego otra y finalmente otra más. Vas en ella repitiendo una y otra vez los estilos, fondos, secciones comunes como listas de enlaces, una pequeña cabecera, un pequeño pié, …

Empiezas a pensar que algo no va bien. Estás repitiendo muchas veces lo mismo. Lo primero que se te ocurre es hacer una plantilla.html, en la que pones todo lo que es común. Cuando quieres hacer una nueva hoja HTML, copias la plantilla.html y empiezas a rellenar. Luego descubres que hay editores más modernos que te dan soporte para este tipo de plantillas.

Más adelante, te apecete cambiar el estilo de tu página web, cambiar los colores, los fondos, la forma de los subrayados … y NO lo haces. ¿Por qué?. Tienes que ir por todas las páginas HTML, una a una, cambiando el estilo y volver a subirlo todo al servidor. ¿No habrá forma de solucionar esto?.

Pues ahora sí la hay, se llama CSS. En un fichero separado, que llamamos hoja de estilo, escribimos el estilo de todos nuestros elementos de HTML. En ese fichero indicamos que queremos los títulos de color verde, que la imagen de fondo es la protagonista de nuestro manga favorito, los párrafos deben llevar una fuente de letra determinada… Cuando quieres cambiar el estilo de tu sitio web, simplemente cambias el contenido de la hoja de estilo una sola vez, lo subes al servidor y maravillosamente, todo cambia solo.

Otro día decides añadir o borrar alguno de los enlaces del menú que es común a todo tu sitio, o quieres que alguno de los bloques comunes cambie por otro, añadir anuncios de google en todas tus páginas, cambiar el contador de visitantes por otro, o los scripts que llevan las estadísticas de los visitantes. Todo esto no es estilo ni está soportado por CSS. Hay que cambiarlo en todas las páginas HTML una a una nuevamente. ¿No habra solución para esto?. También la hay. Podemos usar algún lenguaje de programación embebido en la página HTML y que nos genere el texto HTML de esas zonas comunes a todas las páginas. El código de este lenguaje de programación se puede meter en un fichero separado, de forma que todas las páginas HTML usen ese ùnico fichero. Pongamos que cogemos un servidor que soporte PHP y hacemos un fichero funciones.php. Ahí metemos diversas funciones de código PHP que nos generan la lista de enlaces, el código del contador, el código para los anuncios google, la cabecera y el pié común a todas nuestras páginas… La extensión de nuestras paginas.html debe cambiar ahora a paginas.php.
Esto nos deja un fichero HTML realmente curioso. Al principio incluye una página de estilo CSS, luego incluye un fichero php, y finalmente se dedica a llamar a una serie de funciones de ese fichero, luego se escribe en HTML sin estilo ninguno el contenido real de nuestra página y listo. Una sitio web construido a base de muchas páginas.php con sólo el contenido específico de ellas. Cambiar el estilo o las partes comunes se hace tocando un único fichero y subiéndolo al servidor.

Este es el punto en el que estoy ahora. Estoy modificando mis antiguas páginas.html a páginas.php con estilo CSS separado.

Se me está planteando la siguiente mejora. ¿Por qué tengo que escribir el contenido directamente en una página .php?. Eso sólo puedo hacerlo en mi casa, donde tengo una copia local de mi sitio web. Abro la herramienta para trabajar en el sito web (dreamweaber o similar) y escribo el artículo. Luego lo subo al servidor. Resulta que así no puedo trabajar en mi página de aficionado durante las vacaciones, que es cuando más tiempo tengo. La solución es guardar los artículos en una base de datos en el servidor. Nuestras páginas.php simplemente consultarían en base de datos el contenido del artículo. Vaya, que nuestra página.php simplemente incluye la hoja de estilo CSS, la librería.php, hace una serie de llamadas a funciones de esa librería para cabecera, pie y demás, y luego hace unas consultas a base de datos para el contenido del artículo. Por supuesto, tendría una página.php especial que me permita escribir nuevos artículos desde el navegador, en cualquier sitio, y guardarlos en la base de datos.

Con esto acabamos de llegar a los actuales gestores de contenido, blogs y demás. Sitios web en los que el propietario tiene un usuario y password de administrador. Desde cualquier sitio puede entrar en el sistema y escribir, modificar o borrar artículos.

Sin embargo, el asunto va más allá. Puesto que es tan fácil publicar desde cualquier lado con un sistema como este, ¿por qué no le damos también un usuario y password a nuestro amigo Federico para que el también pueda escribir sus propios artículos en mi página, ayudarme y la hacemos entre los dos?. O más allá, ¿por qué no doy posibilidad a cualquiera que la visite de añadir comentarios, modificar los artículos o lo que crea pertinente?. Ya lo tenemos, los blogs permiten colaboración entre varios autores, añadir comentarios. Las wikis permiten a cualquier visitante añadir y modificar artículos. Y llegados al extremo,  nuestro sitio web podría permitir a los visitantes crear sus propios sitios web, estilo bebo o myspace. En esto precisamente consiste la web 2.0, sitios web en las que los visitantes pueden añadir y modificar contenidos, hacer comentarios.

Hace un par de días comentaba que el comportamiento distinto de Internet Explorer con CSS me parecía más lógico que el de Firefox. Y eso me cabreaba sobremanera.
Ahora acabo de cambiar el aspecto de la página principal de mis Apuntes de Programación para que se parezcan al de este blog. Me ha llevado un montón de tiempo conseguir que se vea igual en ambos navegadores. También me ha costado un montón de tiempo conseguir que no se descoloquen las cosas con resoluciones de pantalla de 800×600.

Y aquí es donde me empiezo a alegrar y ver que Firefox se comporta mejor. Si pones la resolución de pantalla en 800×600 y miras este blog con ambos navegadores, veras que en ninguno de ellos se ve 100% bien, pero al menor firefox pone la hoja de libreta toda seguida. Internet Explorer pone un cado de hoja, la corta y luego la continúa más abajo, cuando le queda sitio.

Iré poco a poco poniendo a todas las páginas este estilo. Quizás me pelee un poco para arreglar Internet Explorer con resoluciones de 800×600. De todas formas, lo más positivo de la experiencia, es que estoy aprovechando, además de aprender una cosa nueva, para limpiar todo el código html guarreras que había en la página. También me estoy preocupando de pasarlas por un validador de html y conseguir que cumplan el w3c.

sigo a vueltas con lo mismo.

En más de una ocasión me he estado peleando para conseguir una página con tres columnas con CSS. La columna de la izquierda y de la derecha de ancho fijo y la del centro que se ajuste.

Si todos los anchos fueran fijos o todos variables, no habría ningún problema. Usando el width con porcentajes o valores fijos y el float:left todo listo. Sin embargo, lo de la columna central variable me ha dado montones de qubraderos de cabeza.

Gracias a Rodrigo, encontré esta página en la que hay todas las posibilidades de hacer tres columnas y, en concreto, el número 13 es al que me estoy refiriendo, así que a mirar como se hace. Aquí el puñetero CSS. La forma de hacer eso es el típico problema de idea feliz, que te puedes saber perfectamente todos los entresijos de sintaxis de CSS y que no se te ocurra NUNCA.

El truco está en poner primero en el html, como float:left y con width 100%, la columna central. Dentro meter el contenido con margenes en pixels a izquierda y derecha suficientes para hacer hueco a las columnas laterales.

Luego, se pone la columna izquierda como float:left. Como la columna central ocupaba el 100%, esta no cabe, va detrás y se pone en la línea siguiente. El truco consiste en darle un margin-left de ¡¡ -100 % !!. De esta forma se sube automáticamente una línea y queda superpuesto. ¡¡ Vaya trampas !!

Y la columna de la derecha, lo mismo. Un float:left, que como no cabe, se queda en la línea siguiente, y para arreglarlo se le hace un margin-left:ancho_columnapx.

En fin, muy fácil (aunque algo artificioso) si se sabe, pero imposible que se le ocurra a un novatillo como yo. Supongo que hay más formas de hacerlo, de hecho creo que en el CSS de este blog, que tiene las columnas igual, se hace de otra forma.

Por cierto, veo que el internet explorer no entiende las transparencias de los .png, así que si ves este blog con internet explorer, verás que la punta de los lápices tiene una recuadro gris, mientras que con firefox se ve bien.

Sigo jugando con CSS. Me he cogido la hoja de estilo de este blog y he empezado a cambiar cosas hasta que ha quedado lo que se ve ahora. Me qudan algunos detalles

• El link del título quiero quitarle el subrayado y que se subraye al pasar el ratón. Me está costando porque llevo varios intentos, no lo consigo y lo peor de todo, he conseguido que me funcione en internet explorer, pero no en firefox.
• El icono del feed de arriba a la derecha hay que hacerle algo: o transparente o postit.
• También con los títulos de los postit, que de momento son una especie de lápices. A ver si soy capaz de dibujarlos bonitos.

Cuando termine con todo, a ver si me animo y le doy el mismo aspecto al resto de la página.

Después del maravilloso tutorial de CSS que encontré y que me confirmaba la forma de trabajar y posicionar los div de una página html, me decidí a poner en práctica lo aprendido. He cogido el indice de mi página de metodologías de diseño orientado a objetos, que estaba un poco antigua, y la he rehecho entera con CSS y divs.

Pues he acabado hasta las narices de CSS:

• Me he tirado varias horas para hacer esa “cutrez”.
• Me he tirado varias horas hasta que he conseguido que internet explorer y firefox presenten lo mismo, sin meter “hacks”.
• Me he tirado varias horas intentando que los div-postit (esos cuadros amarillos) salieran a la derecha en el firefox, sin poner posiciones absolutas que no me gustan. Mi idea inicial era poner un float:left para la lista de tutoriales que sale a la izquierda y un text-align:right para los div-postit. En internet explorer los text-align:right funcionan bien con los div-postit y se los llevan a la derecha, pero en firefox los text-align parece que no afectan a los div-postit. Me salían siempre superpuestos a la lista de tutoriales. Creo que el standard de CSS dice que los text-align sólo afectan a elementos que no sean “bloque”.
• El float:left que he puesto a la lista de tutoriales en internet-explorer hace que los div-postit “fluyan” bien alrededor, pero en firefox los textos fluyen, pero sin respetar las fronteras de los div. Prueba a visualizar la página con ambos navegadores y estrechar poco a poco el navegador para tratar de que los div-postit se peguen a la lista de tutoriales. Verás el comportamiento distinto.

En fin, muchas horas para no hacer nada y peleándome con sólo dos navegadores. Debe ser horrible hacerlo también con las distintas versiones de internet explorer en paralelo y con otros navegadores distintos, todos a la vez y cada uno de su padre y de su madre.

Encima, yo soy de los de “todo lo de microsoft es malo” y “firefox es maravilloso”, pero resulta que me parece más fácil y lógico el comportamiento de internet explorer (la versión 6 es la que tengo), lo que me cabrea mucho, mucho, mucho. Los div se pueden alinear como parte del texto y además cuando fluyen alrededor de un float, lo hacen en bloque. Encima, en las pruebas que hice se me ocurrio ponerle a un div-postit de esos un display:inline para tratar de alinearlo. En Internet explorer iba más o menos bien (ya iba bien), pero en firefox aquello dejo de comportarse como un bloque y el color amarillo de fondo dejó de tener forma cuadrada y se convirtió en rectangulitos alrededor de algunos textos.
Bueno, supongo que será que no he pillado todavía bien la filosofía de esto y que sigo siendo muy reacio a poner posiciones absolutas para las cosas, que quizas es lo que se deba hacer. Esperaré que se me pase el cabreo y seguiré con CSS dentro de algunos días.

Estoy compungido.

Me acabo de encontrar un buen tutorial sobre CSS, bueno, en realidad un conjunto de tutoriales. De ellos, sólo uno cortito explica un poco la sintaxis de CSS. El resto son más bien ideas y filosofías de cómo organizar la página html para que sea fácilmente tratatada con CSS y el cómo hacer ciertas cosas que todos queremos hacer habitualmente con CSS.

En concreto, me ha llamado muchísimo la atención el Tutorial de posicionamiento y layout en CSS. Es exactamente lo que buscaba y lo que pretendía hacer con mi cutre-tutorial de CSS, pero está claro que ellos saben más que yo y tienen más experiencia.

Por eso estoy compungido. Voy a tener que retocar mi tutorial entero para que se parezca al de ellos o bien tirarlo directamente a la basura.

Mi consejo para los que quieran aprender CSS es que se lean los siguientes tutoriales de esa página:

• Tutorial básico de CSS.
• Tutorial de posicionamiento y layout en CSS.
• El modelo de caja de CSS.
• Reglas de codificación y lienamiento de CSS.
• Finalmente y para que quede claro que no es oro todo lo que reluce gracias a “El Maligno” (como lo llaman en esa página), el de ñapas para arreglar internet explorer.

Los cuatro primeros nos pueden servir perfectamente para entender la filosofía de CSS y cómo organizar la página. El último nos deja claro que tendremos que hacer ñapas en nuestro CSS porque Internet Explorer no respeta el standard y eso nos dará muchos quebraderos de cabeza (lo digo por experiencia).Luego, por supuesto, habrá que coger uno que nos sirva de referencia de CSS para buscar todos los posibles valores, atributos y parámetros.