Desarrolla para Firefox, hackea para Explorer
Visita este artículo en http://www.estadobeta.com/2006/11/07/desarrolla-para-firefox-hackea-para-explorer/
Por Ismael en CSS, Estándares, artículos
Desde que baso mi trabajo en los Estándares Web CSS, HTML y Javascript, he mantenido que es mejor hacer todo el proceso de diseño y desarrollo sobre navegadores con buen soporte de esos estándares como Firefox, y arreglar las incompatibilidades con Internet Explorer sólo una vez que el proyecto está terminado y funcional.
La razón es simple: actualmente hay muchos navegadores con buen soporte de estándares en uso (puse Firefox en el título porque es el más conocido, pero bien podría ser Opera, Konqueror o el excelente Camino para Mac). Si desarrollas para uno de ellos primero y sigues los estándares, te aseguras buenos resultados en todo ese universo de programas de una sola vez. Explorer*1, por otro lado, no sólo soporta esos estándares deficientemente, sino que además define sus propios comportamientos y es conocido por una cantidad considerable de bugs que hacen el trabajo muy tedioso. Es cierto que, una vez te acostumbras a las mañas propias de Explorer, es perfectamente posible construir interfaces de calidad para el navegador de Microsoft, pero entonces luego tendrías que corregir uno por uno los demás navegadores y, lo que es peor, estarías aprendiendo la interpretación de los estándares particular de una versión de IE en lugar de aprender la forma correcta de una vez por todas (IE7 apunta, de a poco,a los estándares como deben ser).
Ese es el argumento práctico, pero hay otro un poco más esotérico.
El proceso de desarrollo de interfaces para la web tiene varios pasos: generalmente se empieza con bocetos o wireframes, luego se trabaja el diseño visual de los bocetos con herramientas gráficas, luego se construye el HTML y CSS necesarios para visualizar las interfaces en un navegador y se agregan los comportamientos Javascript necesarios. Generalmente estos pasos van en paralelo, y se vuelve atrás si en el transcurso del trabajo surgen nuevos problemas, pero el punto es que son muchos los procedimientos que median entre la idea del proyecto y su estado final.
Desarrollar sobre software que soporta los estándares nos permite un flujo más o menos inmediato entre la idea y el resultado. Esto ayuda a mantener el foco sobre lo esencial del proyecto y evita distraerse con minucias del código. No hay sorpresas.
Explorer, sin embargo, debido a su soporte deficiente requiere contínuos parches y rodeos que distraen, quitan tiempo, desmotivan (no hay nada peor que trabajar sin motivación!) y ensucian el código. Esto último no lo digo sólo por purista: código rebuscado y difícil de entender es código inmantenible y una puerta abierta para los bugs.
Cierto. Siguiendo ciertas directrices -no uses más de dos floats consecutivos, olvídate de position: fixed, normaliza los márgenes y paddings y sólo utiliza los métodos estándares del DOM- es posible llevar un proyecto a buen término sin demasiadas complicaciones en cualquier navegador moderno, pero en muchos casos nuestro proyecto incluye técnicas triviales en la mayoría de los navegadores (¿alguien dijo position: absolute?) que en IE pueden tomar horas (o días… Ejem, me ha pasado) de investigación, pruebas y hacks para resolver. Esas mismas horas en que aún contabas con ese empuje vital para realizar cualquier proyecto de calidad: la motivación y los objetivos claros.
Así pues, aunque sólo valga como humilde consejo, desarrolla para Firefox primero, hackea para Explorer después.
*1. Todavía estoy hablando de Internet Explorer 6-. No he hecho pruebas suficientes con la nueva versión, IE7.
- Servicios:
- Comentarios RSS
- Menear!
- Del.icio.us
11/7/2006 at 5:55 am
Cuanta razon llevas… Anda qeu no estoy sufriendo (y lo que me queda). ¿porque se odian tanto los navegadores?
11/7/2006 at 9:05 am
Lamentablemente, con el aumento del pedazo de torta que ahora se lleva Firefox en el mercado de los browser, varios sitios (mas o menos importantes) ahora están desarrollando ESPECIALMENTE para explorer y parchando ESPECIALMENTE para Firefox, olvidando al resto de los navegadores (y, obvio, seguir los estándares). Es un triste espectáculo que empezará a trasladar el odio desde Explorer a Firefox. Así que: OJO!
11/7/2006 at 11:38 am
Exacto, derepente tratar de fixear problemas en explorer, requiere horas y lo mas importante te quita la motivacion y sin motivacion nosotros no somos nada.
Excelente articulo
11/7/2006 at 12:25 pm
Talmente de acuerdo con esa metodología… y en mi caso del debugeo con el explorer ya se encarga buena parte del resto de compañeros de trabajo que vienen corriendo: “habeis hecho mal la página, oiga que la web no se ve bien… pero ¿como no haceis las páginas para el explorer?… mira mira sale un enlace repetido al final, ” xD
11/7/2006 at 2:35 pm
Que decir, como siempre EstadoBeta dando el pie para ir mejorando. Lo extraño es que cuando aprendí HTML y CSS lo hice con estándares y me enamoré de Firefox, y comencé a probar todo lo que hacía en ese navegador. Después salió la primera pega y en IE quedó la escoba, desde ahí comencé a ensusciar los códigos y a escuchar la palabra HACKs y claro que la motivación baja. Pero bueno gracias a sitios como esto no todo está perdido, nuevamente felicitaciones, muy buen artículo.
11/7/2006 at 3:11 pm
como siempre…excelente!
11/9/2006 at 1:20 pm
100% de acuerdo, aunque generalemente los problemas que he tenido en el explorer 6 es cuando esta en el quirks mode. Pero ultimamente y comprendiendo mas a detalle cuestiones especificas de las CSS he logrado que muchos de mis desarrollos funcionen de manera correcta por lo menos en tres de los navegadores mas populares firefox, opera y explorer. Lamentablemente no tengo posibilidad de probar mis desarrollos en algun navegador de Mac Os pero estoy seguro que si se ve en los tres anteriores correctamente ya vamos de gane….
Saludo, y excelente sitio…
P.D. Podrias agregar algun plugin para poder susribirnos a los comentariios de las entradas, realmente comento en varios blogs y en ocasiones le pierdo el hilo cuando no cuentan con la funcionadalidad que menciono.
11/9/2006 at 1:55 pm
Gerardo: te refieres a subscripciones via email?
11/9/2006 at 5:10 pm
Exelente el articulo, IE me tiene al borde de la desmotivación mi desarrollo web HTML y CSS lo hago mediante Adobe Dreamweaver y al momento de visualizar en IE siempre keda la caga no solo porke se ve mal, tambien porke el cliente piensa q uno no sabe realmente desarrollar web sites, por esos motivos tengo una pregunta ¿donde hacen cursos avanzados de HTML, CSS, Javascript, XHTML, PHP, ASP, XML, Flash, ActionScript?
¿Ismael tu haces clases?
11/11/2006 at 2:08 pm
Cuánta razón tienes!! Debería estar prohibido utilizar IE. Esta grafica muestra el proceso de creación de una web a modo de humor, pero es que cuando la ví me dije a mi mismo: “Es verdad”.
11/11/2006 at 7:53 pm
Jose Luis: vaya que lo es
m79: si vives en Chile no te puedo recomendar un lugar donde enseñen esto. En general las universidades e institutos estan atrasados con respecto a estas tecnologías. Yo he hecho clases particulares pero en este momento estoy de cabeza en Aardvark.
Lo que si te puedo recomendar es que dejes Dreamweaver de lado e intentes construir tus proyectos en un buen editor de código. Lo fundamental es saber qué es lo que pasa en tu código, y la interfaz WYSIWYG de Dreamweaver lo hace difícil.
Empieza con ejercicios sencillos (hay mucha info en la web, aquí mismo también encuentras algo).
Lo mejor es tener un proyecto claro. A medida que lo desarrollas te irás enfrentando a distintos problemas y adquiriendo habilidades específicas. Por mi experiencia esa es la mejor forma de aprender.
Gerardo: instalé un plugin de subscripciones (el link aparece abajo de l formulario de comentarios). Si lo pruebas o encuentras algun problema, me avisas!
11/14/2006 at 1:31 pm
Muy cierto, Isma. Pero no menos cierto es que para la gente que se inicia como yo con el XHTML/CSS, es muy frustrante ver cómo un lindo diseño (visto en Firefox) se ve horrible en el IE. Sin embargo, muchos desarroladores web amigos siguen diseñando y convirtiendo todo a gifs y tablas, testeando siempre cómo se ve en el maldito IE. Les sirve y de mucho, ya que no se preocupan por “estandarizar”, ahorrando tiempo y pasando al siguiente proyecto de inmediato. Trabajar con estándares vale mucho la pena, y más aún si uno quiere dedicarse a esto en serio, pero los comienzos son muy traumáticos, y mientras tanto… ves cómo tus amigos sólo utilizan CSS para “lookear” mejor algún link y siguen adelante usando tablas y tablas y tablas…
11/15/2006 at 6:54 pm
Es cierto, si nos dedicamos al mundo de la Web es casi obligatorio aprender estándares, ya que la Web evoluciona cada vez más y lo que se busca es que todos manejemos el mismo lenguaje y que crezca en un mismo sentido, aunque tengamos que luchar con IE que algunos dolores de cabeza nos causa. Y como todos saben las tablas solo se deben usar para mostrar datos tabulados.
11/16/2006 at 10:26 pm
Oiga Guru…
para que le voy a decir una cosa por otra, si estoy 99% de acuerdo en lo que mencionas… pero me gustaría que fundamentaras más tu idea de no utilizar Dreamweaver a cambio de un buen editor de código.
El Padawan
11/17/2006 at 1:36 pm
Ismael al igual q Coto (El Padawan) a mi también me gustaría saber más el fundamento de no ocupar Dreamweaver, de hecho como punto a favor del programa es q uno tiene la división codigo / diseño creo yo.
11/17/2006 at 3:41 pm
Coto, m79: Dreamweaver es también un excelente editor de código, especialmente por la autocompletación de código (así se dice?) y otras ayudas. Lo que quiero decir es que la mayoría de los usuarios del software usan el modo visual (WYSIWYG), que hace todo más “amigable” con drag&drop, pero también hace más difícil aprender lo que está pasando realmente con el código.
Incluso si usas el modo de edición de código, pienso que la abundancia de ayuda (menus, autocompletación) de DW pueden hacer más difícil para un principiante aprender HTML, ya que no es necesario recordar y aprender todos los elementos si el programa hace muchas cosas por tí. A mi me pasó: no me familiaricé con todos los elementos css y html hasta que me cambié a un editor con sólo lo básico que me obligara a entender html sin ayuda.
Para quienes ya saben html y css DW es una herramienta excelente y muy productiva.
No se si se entiende.
11/17/2006 at 7:17 pm
Me quedo clarisimo gracias Ismael.
11/18/2006 at 1:55 pm
Yo uso el Crimson Editor, se los recomiendo!! (Ya publiqué este mensaje, no estoy seguro de haberlo enviado correctamente.)
11/22/2006 at 9:04 am
Y algun buen editor de código sería?
11/22/2006 at 10:44 am
Man: hay varios. Yo en PC uso Notepadd++ (gratis) y en Mac, Textmate (barato).
11/23/2006 at 5:18 am
una compañera tiene un problemilla con el DreamWeaver y o los comento por si sabéis si hay alguna solución. Tiene la pagina http://www.tinet.org/~centret/soatif/index que se ve perfecta con Explorer, pero si usas Firefox se desmonta. Aparecen los títulos separados del logo y un agujero negro en medio de las imágenes centrales. He probado en alguna máquina y con las últimas versiones de los dos se ve bien, pero en otros no.
Sé que por algun sitio hay alguna solución para que la página se adapte al navegador…
¿Podéis decirme algo?
gracias
11/23/2006 at 7:51 am
es un cacho ie. pero tengo la impresion, con el poco uso que le he dado, que ie7 es un poco mas “estandar”. al fin algo de alivio para los desarrolladores. por lo menos hasta ahora ningun cliente me ha reclamado… sigamos esperando…
11/23/2006 at 10:07 am
Uyy me he perdido harto de la conversa, bueno al parecer ya ha terminado. Como hablaban de los editores por allá arriba, yo empecé con DW y la verdad es que no entendía nada, hacía demasiadas cosas por mi y yo estaba empezando. Después revisando varias webs me encontré con el TextMate que de verdad es barato!!! y aprendí muchísimo más que DW y aún lo sigo utilizando. Para MAC es un muy buen editor.
1/23/2007 at 11:57 am
Pues, yo difiero… los desarrolladores usamos firefox, pero el 75% de los internautas usan ie, yo 1º lo hago para ie y despues para firefox, opera….
1/30/2007 at 3:33 pm
Juan: en el segundo párrafo de este artículo está el contraargumento para tu comentario.
3/30/2007 at 8:14 am
Toda la razón del mundo.
Por mi trabajo tengo que lidiar con el explorer a menudo y es lo peor del mundo. Me ha hecho perder infinidad de horas con su interpretación de los css.
Conclusión: no uséis explorer a no ser que sea por motivos profesionales (de trabajo). Si cada vez hay más páginas estándares no les quedará otra opción que tragar o pudrirse. Tampoco me disgustaría lo segundo porque eso de ir a su bola les debería traer consecuencias.
Odio al explorer!!! Es una auténtica bazofia en todas sus versiones, hoy por hoy la 7. Seguro que para la próxima versión que saquen ya tendrá alguna característica que tiene el firefox 1.0.
3/20/2008 at 12:02 pm
Saludos a quienes estan detrás de este consultorio medico de explore y mozilla, y que sigaadelante, no desmayen. Bueno mi consulta es como puedo lograr cierta compatibilidad en tre estos dos navegadores de mas uso por lo menos aqui en Ecuador creo yo, o existe algún tipo de html para estos dos al diseñar las paginas. Si es asi quisiera aprender. Gracias
8/4/2008 at 12:28 am
Yo opino que, ya con la nueva versión de Internet Explorer 7 que se apega de poco más a los estándares, no debemos usar hacks de ningún tipo. Es necesario que también la gente que tiene Internet Explorer 6 y 5 (¿qué demonios les ha pasado?) se de cuenta que su navegador es obsoleto, pero ¿cómo les haremos saber si seguimos utilizando hacks que sólo encubren el mal funcionamiento de esos navegadores? Actualmente lo que he hecho es aliarme mejor a a la campaña de “Salva a un desarrollador”: www.savethedevelopers.org