Por fin he conseguido tener bastante terminada la maquetación para 1024x768, y antes de dar más pasos he decidido que era el momento de comprobar la compatibilidad con otros navegadores antes de seguir avanzando.
El primero que he probado es Opera 9.20 para Linux, y el resultado era el mismo que con el Firefox 2.0 para Linux.
Luego he probado el Internet Exploter 6.0 y me he llevado el chasco, pues me descoloca todo lo que he colocado en el centro de la cabecera. Se trata de un div con posición relative, hijo de un div también con posición relative y rodeado de divs con posicionamiento absolute.
Investigando he aprendido que Internet Exploter es famoso entre los desarrolladores web por sus bugs de posicionamiento, y yo estoy sufriendo sus consecuencias :-(
He encontrado información acerca de cómo colocar comentarios condicionales para que Internet Exploter lea código distinto de otros navegadores en este sitio. Aquí, más que decir "quien hace la ley hace la trampa" quedaría mejor "quien hace el bug hace la chapuza".
No han terminado aquí mis peleas con los de Redmon. Cuando he ido a instalar la versión 7 de su Internet Exploter (para seguir probando la compatibilidad) me he encontrado con que no me lo permite porque no tengo instalado el Service Pack 2, y no lo tengo instalado porque no me lo permite. Resulta que tengo TODAS las actualizaciones instaladas menos la que necesito, y no me deja instalarla, simplemente porque no le da la gana. Cada día más asco.
domingo, 26 de agosto de 2007
jueves, 23 de agosto de 2007
Los primeros problemas
Pronto me he encontrado con los primeros y serios problemas. He usado el posicionamiento relativo y no funciona cuando llego a la columna de la derecha, pero antes voy a explicarme mejor.
He intentado hacer la cabecera en dos bloques pegados, a los que he llamado cabeceraIz y cabeceraDer. A su vez, dentro de cabeceraIz he creado otros dos bloques, uno a la izquierda del todo con el típico logo (float: left), al que le he dado el mismo nombre, y otro con el nombre cabeceraCen que contenía a su vez los bloques rótulo y navegador.
La desagradable sorpresa me la he llevado cuando he visto que los divs no se mueven bien dentro de otros DIVs, así que cuando he ido a dar el atributo float: right al div cabeceraDer, este no se coloca a la misma altura que el de cabeceraIz, a pesar que la suma de ambos es menor que el div que los contiene, que recuerdo es el div contenedor.
De hecho se sale del DIV contenedor, que he puesto "rodeando" a todo el documento.
¿Por qué? pues aún no lo sé :-(
SOLUCIONADO:
Bueno, esta vez he tenido suerte y no me ha llevado mucho aprender algo nuevo. El comportamiento que yo esperaba era que un div se posicionase dentro de otro en función de los límites del contenedor, y resulta que para que eso ocurra el elemento contenedor debe tener el atributo position en relative o absolute, según he aprendido de estadobeta.com Mil gracias.
De todas formas, "como los buenos pintores", acabo de tener un "arrepentimiento", pues estaba intentando hacer una columna central de tamaño fijo y acabo de cambiar de opinión, así que habrá que retocar tanto el código como las barras separadoras que simulan la continuación del agua del logo.
La razón por la que elegí hacerla fija fue que estas barras no se cortasen, así que finalmente voy a tener que hacer que se trate de una especie de imagen que se enlaza a sí misma como si fuese un azulejo.
He intentado hacer la cabecera en dos bloques pegados, a los que he llamado cabeceraIz y cabeceraDer. A su vez, dentro de cabeceraIz he creado otros dos bloques, uno a la izquierda del todo con el típico logo (float: left), al que le he dado el mismo nombre, y otro con el nombre cabeceraCen que contenía a su vez los bloques rótulo y navegador.
La desagradable sorpresa me la he llevado cuando he visto que los divs no se mueven bien dentro de otros DIVs, así que cuando he ido a dar el atributo float: right al div cabeceraDer, este no se coloca a la misma altura que el de cabeceraIz, a pesar que la suma de ambos es menor que el div que los contiene, que recuerdo es el div contenedor.
De hecho se sale del DIV contenedor, que he puesto "rodeando" a todo el documento.
¿Por qué? pues aún no lo sé :-(
SOLUCIONADO:
Bueno, esta vez he tenido suerte y no me ha llevado mucho aprender algo nuevo. El comportamiento que yo esperaba era que un div se posicionase dentro de otro en función de los límites del contenedor, y resulta que para que eso ocurra el elemento contenedor debe tener el atributo position en relative o absolute, según he aprendido de estadobeta.com Mil gracias.
De todas formas, "como los buenos pintores", acabo de tener un "arrepentimiento", pues estaba intentando hacer una columna central de tamaño fijo y acabo de cambiar de opinión, así que habrá que retocar tanto el código como las barras separadoras que simulan la continuación del agua del logo.
La razón por la que elegí hacerla fija fue que estas barras no se cortasen, así que finalmente voy a tener que hacer que se trate de una especie de imagen que se enlaza a sí misma como si fuese un azulejo.
Para el menú izquierdo
Creo que voy a usar un menú desplegable para el menú de la izquierda.
Por ahora el artículo que he encontrado más interesante es el de vectoralia.com.
Ya veremos...
Es posible que también lo use para el menú de la cabecera, aunque eso es menos probable.
Por ahora el artículo que he encontrado más interesante es el de vectoralia.com.
Ya veremos...
Es posible que también lo use para el menú de la cabecera, aunque eso es menos probable.
Posicionamiento mediante CSS
Otra decisión que he tenido que adoptar a la hora de diseñar la página es cómo posicionar los elementos.
Siempre he querido aprender cómo hacer ésto, cómo usar las etiquetas DIV y SPAN (recuerden que es mi primer diseño), y cómo controlar el aspecto me la web mendiante hojas de estilo.
He encontrado un estupendo artículo en desarrolloweb.com (muchísimas gracias) que he seguido casi al pie de la letra.
--**-- Edito esta entrada para añadir que tuve muchos problemas siguiendo el artículo recomendado anteriormente, aunque posiblemente sea útil a otras personas. Finalmente volví a empezar desde cero, pero siguiendo esta vez el ejemplo expuesto en chuidiang.com, aunque hay que leerse el artículo previo.
Para ser más exactos, mi web no tiene tres columnas, sino que antes de estas tres columnas tiene una cabecera también dividida en tres columnas y aquí sí he usado las enseñanzas de desarrolloweb.com.
Reitero pues mi gratitud hacia estas dos webs--**--
Siempre he querido aprender cómo hacer ésto, cómo usar las etiquetas DIV y SPAN (recuerden que es mi primer diseño), y cómo controlar el aspecto me la web mendiante hojas de estilo.
He encontrado un estupendo artículo en desarrolloweb.com (muchísimas gracias) que he seguido casi al pie de la letra.
--**-- Edito esta entrada para añadir que tuve muchos problemas siguiendo el artículo recomendado anteriormente, aunque posiblemente sea útil a otras personas. Finalmente volví a empezar desde cero, pero siguiendo esta vez el ejemplo expuesto en chuidiang.com, aunque hay que leerse el artículo previo.
Para ser más exactos, mi web no tiene tres columnas, sino que antes de estas tres columnas tiene una cabecera también dividida en tres columnas y aquí sí he usado las enseñanzas de desarrolloweb.com.
Reitero pues mi gratitud hacia estas dos webs--**--
Diseñando webs para varias resoluciones
Comienzo el diseño "serio" de mi primera web, hasta ahora no había hecho más que pruebas y "retoques" de plantillas de Post Nuke.
Una de mis obligaciones como coordinador TIC de mi centro es administrar su página web, y como ésta no existe, o la que hay está obsoleta, necesitamos partir de cero.
Se ofreció mi compañero Benjamín Castillo que desarrollarla, pero va a estar demasiado ocupado para ello, así que me toca a mí, ¿qué le vamos a hacer?
Después de abandonar la idea de utilizar un CSM, voy a diseñarla "a pelo" y encima partiendo sólo de un editor de texto ¡toma ya! (estoy usando kate, que no está muy integrado que digamos en mi Ubuntu Feisty Fawn). Estoy dispuesto a valorar sugerencias en este sentido.
La primera duda que me surge es el tamaño, y me he decantado por seguir los consejos que propone Miguel Cruz en webestilo.com, gracias Miguel.
De todas formas, no voy a hacer caso de diseñar para 640x400, porque considero que ya hay muy pocos monitores de esas resoluciones, y en el futuro habrá menos. La web que diseño no creo que se consulte mucho mediante móviles, pdas, etc, y si veo que me equivoco ya habrá tiempo de crear para ellos.
La inmensa mayoría de los usuarios de nuestra página van a ser miembros de la comunidad educativa. Los cuales, en su mayoría, tienen equipos de reciente adquisición y es de esperar que su resolución mínima sea de 800x600.
Tampoco voy a diseñar para resoluciones mayores de 1024x768, porque creo que en estos monitores se verá bien lo diseñado para esta resolución.
Por tanto, y estando a menos de 120 euros las pantallas de tft de 17", me decanto por diseñar a 1024x768px y hacer la adaptación oportuna para 800x600px, pero como algo secundario, que el tiempo de un coordinador tic vale más que la trufa ;-)
Además, y para simplificar el tema, lo que voy a hacer es que la versión de 800x600 carezca de la columna derecha de las tres que va a tener la página, y dónde tengo pensado ubicar los enlaces, etc. Si acaso los añada al pie.
Añadir también que voy a diseñar para Firefox, y que luego haré los ajustes necesarios para Internet Exploter, pues según he leído es lo más práctico.
Una de mis obligaciones como coordinador TIC de mi centro es administrar su página web, y como ésta no existe, o la que hay está obsoleta, necesitamos partir de cero.
Se ofreció mi compañero Benjamín Castillo que desarrollarla, pero va a estar demasiado ocupado para ello, así que me toca a mí, ¿qué le vamos a hacer?
Después de abandonar la idea de utilizar un CSM, voy a diseñarla "a pelo" y encima partiendo sólo de un editor de texto ¡toma ya! (estoy usando kate, que no está muy integrado que digamos en mi Ubuntu Feisty Fawn). Estoy dispuesto a valorar sugerencias en este sentido.
La primera duda que me surge es el tamaño, y me he decantado por seguir los consejos que propone Miguel Cruz en webestilo.com, gracias Miguel.
De todas formas, no voy a hacer caso de diseñar para 640x400, porque considero que ya hay muy pocos monitores de esas resoluciones, y en el futuro habrá menos. La web que diseño no creo que se consulte mucho mediante móviles, pdas, etc, y si veo que me equivoco ya habrá tiempo de crear para ellos.
La inmensa mayoría de los usuarios de nuestra página van a ser miembros de la comunidad educativa. Los cuales, en su mayoría, tienen equipos de reciente adquisición y es de esperar que su resolución mínima sea de 800x600.
Tampoco voy a diseñar para resoluciones mayores de 1024x768, porque creo que en estos monitores se verá bien lo diseñado para esta resolución.
Por tanto, y estando a menos de 120 euros las pantallas de tft de 17", me decanto por diseñar a 1024x768px y hacer la adaptación oportuna para 800x600px, pero como algo secundario, que el tiempo de un coordinador tic vale más que la trufa ;-)
Además, y para simplificar el tema, lo que voy a hacer es que la versión de 800x600 carezca de la columna derecha de las tres que va a tener la página, y dónde tengo pensado ubicar los enlaces, etc. Si acaso los añada al pie.
Añadir también que voy a diseñar para Firefox, y que luego haré los ajustes necesarios para Internet Exploter, pues según he leído es lo más práctico.
Inauguro
Bueno, comenzamos esta andadura que no sabemos muy bien dónde nos llevará.
Por ahora mis pretensiones son bien humildes, y no espero que lea este blog más que yo mismo. La función primordial con el que lo creo es ayudarme a recordar esas miles de cosas que hago configurando mis equipos y los de otra gente, y que luego, pasado el tiempo, se borra de mi hipocampo.
Muchas veces he echado de menos una bitácora dónde recordar qué y cómo lo hice. Seguro que voy a perder mucho tiempo escribiendo estas líneas, pero espero recuperarlo cuando me encuentre en esa situación.
Si además esta información puede servir de ayuda a más gente, sería para mí una gran satisfacción, pues casi todo lo poco que sé se lo debo a las aportaciones que otros hicieron generosamente.
Quizás más adelante me anime a escribir sobre otras de mis pasiones, como pudieran ser mi querido Real Betis Balompié, el motociclismo, mi trabajo como profesor de secundaria y coordinador TIC, o mi gran pasión imposible, volar en mi propio aeroplano, pero por ahora me voy a limitar al objetivo principal.
¿Que puede interesarle saber al navegante sobre mí? Bueno, lo primero que ya habrá advertido es que la brevedad no es una de mis virtudes ;-)
mis aficiones y mi trabajo ya los he mencionado, así que con eso creo que es más que suficiente.
Por ahora mis pretensiones son bien humildes, y no espero que lea este blog más que yo mismo. La función primordial con el que lo creo es ayudarme a recordar esas miles de cosas que hago configurando mis equipos y los de otra gente, y que luego, pasado el tiempo, se borra de mi hipocampo.
Muchas veces he echado de menos una bitácora dónde recordar qué y cómo lo hice. Seguro que voy a perder mucho tiempo escribiendo estas líneas, pero espero recuperarlo cuando me encuentre en esa situación.
Si además esta información puede servir de ayuda a más gente, sería para mí una gran satisfacción, pues casi todo lo poco que sé se lo debo a las aportaciones que otros hicieron generosamente.
Quizás más adelante me anime a escribir sobre otras de mis pasiones, como pudieran ser mi querido Real Betis Balompié, el motociclismo, mi trabajo como profesor de secundaria y coordinador TIC, o mi gran pasión imposible, volar en mi propio aeroplano, pero por ahora me voy a limitar al objetivo principal.
¿Que puede interesarle saber al navegante sobre mí? Bueno, lo primero que ya habrá advertido es que la brevedad no es una de mis virtudes ;-)
mis aficiones y mi trabajo ya los he mencionado, así que con eso creo que es más que suficiente.
Suscribirse a:
Comentarios (Atom)