Categorías
Material de Apoyo

Todos los IE en una misma casa

Durante muchos posts hemos reiterado la importancia, a la hora de diseñar una web, de comprobar que se visualiza bien en la mayoría de navegadores.

Echando un vistazo a esta gráfica de nuestras estadísticas, podemos comprobar, que entre los navegadores que usan nuestros lectores hay de todo un poco:

Navegadores

Por tanto, deberíamos cuidar a todos con el mismo mimo.

El problema viene cuando, gracias a las actualizaciones automáticas de nuestro querido Windows XP, nuestro nuevo navegador pasa a ser el Internet Explorer 7. Ahora ya no podremos comprobar cómo se ven las páginas en el IE6 (y os puedo prometer que la interpretación del CSS es muy distinta).

Pues gracias a MultipleIEs podremos tener instaladas diferentes versiones del IE (3.0, 4.01, 5.01, 5.5, 6.0) sin que se peguen entre ellas.

IE

Categorías
Material de Apoyo

Una pequeña lista con lo mínimo para ponerse con CSS

Si el médico antes de operar a su lado pone una mesa con todo el material quirúrgico necesario. Si al ponernos a estudiar, sacamos el boli, el típex, el lápiz, la goma, el subrayador… Entonces, por qué al diseñar webs, nos ponemos delante del bloc de notas y nos quedamos tan anchos??

Así que, continuando con el post de Loretahur sobre libros, ahora vamos a ver que es necesario, y que no, para trabajar con CSS.

Espero que me echéis una mano para completar la lista.

Empezaremos por lo que no es bueno usar. Y esos pequeños errores de newbie.

  • FrontPage , si, ese maravilloso programa de la factoría Redmond es una de las mayores armas contra el diseño web accesible. No entiende para nada el uso de estilos, css y accesibilidad web, llena todo con incompresibles tablas y acaba generando un código enorme imposible de tratar. Como la mayoría de editores webs WYSWYG, no se debería usar nunca.
  • Desarrollar usando un solo navegador. Y más si solo desarrollas usando el navegador de la misma gente de Redmon, el IE. Cada navegador interpreta muchos comandos a su manera, de ahí, que si solo trabajas usando un navegador, obligas a que se vea bien solo con un navegador.
  • Flash, cuanto menos mejor. Y siempre que se ponga tendría que existir una opción sin flash con el mismo contenido. Los que uséis GNU/Linux sabréis a que me refiero. Tener en cuenta, que quitando innecesarias animaciones, el uso de flash puede ser suplido fácilmente con un buen diseño web.

Siempre hay cosas que aunque no son muy recomendables usar, se pueden tolerar mejor.

  • Dreamweaver: Ese «maravilloso» programa adorado por mil un «desarrolladores web». Al igual que FP, crea bastante código innecesario. Acostumbra, aunque trata algo mejor el tema de las CSS, al uso de tablas y no suele hacer mucho caso al tema de accesibilidad.
  • Entonces, lo mejor, picar el código a mano, como siempre, como se hace en programación. Pero, no me seáis burros, no uséis el NotePad! Existen versiones bastante superiores (además de ser libres) de editores de texto, siempre podréis probar notepad2 o notepad++ o [g/k]edit o cualquier otro editor de texto con resaltado sintáctico (claro, también vi y emacs).
  • Evitar los hacks, cuando algo no se puede hacer, el uso de hacks para solucionarlo, a la larga siempre puede dar bastantes dolores de cabeza, y sino, preguntarle a los de los hacks para el IE6 ahora que está el IE7.

Y ahora si, lo que todos deberíamos tener en nuestro equipo:

  • IDE: Si vas a realizar más de una página de forma esporádica, más vale que te hagas con un buen ide que te ayude a organizarte y ahorrate algo de curro. Algunos, por ejemplo:
    • PHPEclipse: Que no es más que el Eclipse de toda la vida con un plugin para desarrollo en PHP, tienes plugins para HTML también, pero vamos, como normalmente lo que hago es picar PHP, pues este es el que uso :-p
    • Bluefish
    • Screem
    • Quanta+
  • Navegadores: Cuantos más mejor. Firefox/Iceweasel, IE5, IE6, IE7 (y es que hay mucha diferencia entre ellos), Opera, Safari, … en cuantos más navegadores los probéis mejor, aunque en principio con FF y con IE6/7 sería suficiente ya que el resto, en la mayoría de los casos, se asemejan bastante al FF.
  • Otra forma es comprobarlo en web. Un buen sitio para ellos (y gratis) es browsershots una aplicación online que te permite comprobar el diseño en una amplia serie de navegadores y resoluciones.
  • Extensiones: Hay mil extensiones útiles para FF, pero la primordial es webdeveloper
  • Hay mil páginas en internet que pueden ayudar bastante, otras tantas de las que podemos sacar trucos de sus propios diseños y otras de obligada referencia, entre ellas nos encontramos, por ejemplo:
  • Programas de retoque y diseño fotográfico. Aquí, si queréis pagar, podéis usar Adobe Photoshop (la versión más «económica» supera los 200 euros). Pero vamos, yo recomendaría Gimp e Inkscape (aunque no tenga ni la menor idéa de ninguno de los tres 😉 )

Bueno, creo que ya hay bastante material para empezar a diseñar…