Miguel Monreal Ordiñana

Archive for marzo 2007

Quizá no parezca una avanzada técnica, pero muchas veces se nos apodera un problema por no saber simplificar el escenario hasta el absurdo para encontrar qué va mal.Definir de manera concreta qué no funciona es a veces tan difícil o más que resolverlo.Comentar código hasta la máxima simplicidad e ir descomentando pequeños fragmentos puede ser la mejor manera.

Esto elude a la frase “esto le ha tenido que pasar a alguien más“, pero ¿el QUÉ?, ¿exactamente QUÉ problema?.

Una vez contestada esta pregunta podemos encontrar soluciones en la red, yo recomiendo sin duda PositionIsEverything en donde se han identificado y catalogado los bug encontrados en Internet Explorer, Opera y Navegadores Gecko (Firefox, Camino, etc.) con sus distintas soluciones.

La última vez que recurrí a ella fue porque, para variar, una página se renderizaba mal en Internet Explorer.Reduje la página al absurdo y me di cuenta que en un div me dejaba mucho más margen a la izquieda que en Firefox.Luego descubrí que exactamente me dejaba el doble al leer el “IE Doubled Float-Margin Bug” que relataba PositionIsEverything.

En el propio blog de Microsoft sobre Internet Explorer se han ido señalando, y en muchos casos resolviendo, los errores relatados (bugs, funcionalidades por implementar, etc.) en PositionIsEverything como si de un TODO list se tratase.

Espero que os sea de ayuda

Durante tiempo, escribir una CSS era un proceso totalmente incierto debido a las diferentes renderizaciones que se producían y producen en navegadores basados en Gecko, Opera o Internet Explorer (principalmente el último).

En multitud de ocasiones me he preguntado, ¿por qué ese div aparece abajo? o ¿quién está dejando más espacio del querido, el div de arriba o el de abajo?.

Esta situación conllevaba a una serie de permutaciones de pruebas que no llevaban a ningún lado, y si llevaba a alguno no sabías bien por qué.

Afortunadamente han ido aparareciendo herramientas que nos permiten saber en cada momento los límites de cada elemento, sus márgenes(en el caso de un elemento de bloque), padding, border, estilos heredados, estilos sobreescritos , etc. y de manera gráfica, símplemente poniendo el ratón encima del elemento.

Estamos hablando de Firebug, plugin para Firefox y fundamental para entender que ese div se ha renderizado abajo porque no cabe en la línea anterior,que un div muestra un margin de 10 y no de 15 porque lo ha heredado de un estilo global o que un<p> está dejando un padding de 5px como estilo por defecto.

Además de eso nos permitirá cambiar al vuelo la CSS y ver los cambios al instante, evitando tener que cambiar el código CSS en el editor, salvar y F5.

Aquí os dejo un pantallazo:

Screenshot de Firebug

Bueno eso está muy bien, pero es un plugin de Firefox, ¿qué pasa con Internet Explorer?, pues que por fin han sacado una herramienta similiar compatible con explorer 6 y 7 , se llama IE Developer ToolBar

Para finalizar aquí os dejo un otro plugins más para Firefox:

Web Developer toolbar.

Normalmente estas dos son necesarias ya que entre Firefox e Internet explorer se copa el 98-99% de los navegadores usados a día de hoy, pero siempre queda el compromiso de hacer una web accesible por todos. Opera suele renderizar los contenidos de manera correcta, Camino esta basado en Gecko….

En cualquier caso, ¿conocéis alguna herramienta similar a Firebug en alguno de éstos navegadores más minoritarios?

Seguir un orden a la hora de crear las vistas en cualquier proyecto es fundamental. No diseñar unos layouts, unos estilos generales, etc. puede conllevar a un desbarajuste comparable al mejor spaguetti code en javascript.(Espero asustar con esto)

No creo que nadie se plantee un proyecto en la web sin uso de hojas de estilo en cascada (CSS), pero lo que realmente espero es que nadie se lo plantee sin saber bien que hace o sin saber explotar en un mínimo porcentaje su potencia. Es el claro ejemplo de algo que se supone que te iba a ayudar te acaba ahogando.

Aprender CSS pasa por entender sobre que nos basamos, es decir XHTML + CSS.

Yo recomendaria, o mejor dicho, el w3c recomienda:

  • Saber exactamente que es XHTML , ya que seguro que tenemos HTML en mente que ya no están permitido en XHTML (deprecated)
  • Familiarizarnos con la terminología de CSS, no hace falta entender todo ni aprenderse las quincemil opciones de estilo que existen para cada instrucción. De nuevo éste es un buen sitio.

Por ahora suficiente. Trata de hacer o probar los ejemplos que salgan, no te desesperes si no los entiendes mucho.Todo es incrementaL, y al final uno va “cerrando conocimientos” con la práctica y cometiendo errores.

Personalmente desaconsejo los típicos manuales tochos de HTML y CSS, y los manuales de “aprenda css en 24 horas” (luego que los informáticos son raros y no salen mucho…).

Toda nueva tecnología tiene una curva de aprendizaje y al principio es duro, pero es mejor entender la base y así poder aprovechar a un buen nivel las bondades que tenga, y que la tecnología realmente te sea útil, que al final es de lo que se trata. Si no es así, quizá no debas usarla.

Seguiremos con ello.

Hello world!

lo tenía que hacer…..

A partir de aquí hablaremos de flex, java, css , RIAs y las experiencias que tiene un novato como yo en estas tecnologías y el mundo web en general

Comencemos!