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…

24 respuestas a «Una pequeña lista con lo mínimo para ponerse con CSS»

Pequeña lista para empezar a diseñar una web con CSS…

Antes de hacer, cualquier operación, construir una casa,… se tienen que tener preparadas las herramientas necesarias para ello, lo mismo ocurre con el diseño de webs, y más si se van a diseñar con CSS. Por lo tanto, antes de empezar, se debe hace…

No conocía el enlace para incorporar W3Schools al buscador del Firefox. Es simplemente genial. Ahora con un sólo clic a buscar en la mejor web para mi gusto sobre programación web.

Por cierto, GeL/T0, el post es estupendo 😀

Para programar en PHP recomiendo un plugin para Eclipse desarrollado por Zend (diseñadores del motor de PHP) e IBM y SUN, para instalarlo se hace como cualquier plugin en eclipse: Help -> Software Updates -> Find and Install, Search for new features to install, New Remote Site…, como nombre pues PHP-IDE y dirección http://downloads.zend.com/phpide

He probado tambien el que tu menciones pero personalmente este me parece bastante mejor.

:-$

En menos de diez minutos en meneame…

No me lo esperaba, la verdad… Esto es presión para el próximo post :-p

@Carmen, @loretahur: Muchas gracias a las dos.

Loretahur, si te ha gustado pasaté por http://mycroft.mozdev.org/ y prueba con más, la rae, ebay-es, youtube, wikipedia-es,…
Creo que eso es de lo mejor que incorpora el FF.

@Ete, muchas gracias! Lo probaré en cuanto tenga cinco minutos.

Yo he probado inkscape y le he usado en varios proyectos web en la universidad y en el Curro y me ha ido bastante bien.

Algunas utilidades más

Optimizadores de CSS online

Tabla muy completa y actualizada de los odiosos hacks que hay que utilizar para ampliar la compatibilidad de nuestros diseños.

Plugin para Firefox – Firebug

Si tienes clara la estructura de tu página pero no te manejas bien con CSS, en este sitio te generan en dos clics el XHTML y el CSS. Prúebalo.

Y como herramienta para diseñar aconsejo Fireworks, para aprender Photoshop, aquí tenéis un curso gratuito en español.

Un saludo y gracias por la lista. Muy interesante.

Para aprender css lo que te hace falta es lápiz y papel… el programa para editarlo «a pelo» (así se te quedará mejor) puede ser notepad, vi o similar y FF + IE para pruebas, fuera del entorno de pruebas el IDE te vendrá impuesto por las características del proyecto o la empresa, si es un proyecto .net VSS si es Java X, etc, etc.

El IDE es como todo, hay que saber manejarlo (este comentario no vale para Frontpage).

Y para gráficos recomendaría muy encarecidamente el Fireworks de macromed… digo adobe

Lo primero, muchas gracias a todos por los comentarios (y por los votos en meneame), la verdad es que no esperaba que tuviese tanto «impacto» el post.

@emarts: No dudes que probaré Bugzilla, pero, mi duda (desde la ignorancia) es cual puede ser su utilidad para diseño web. Si me lo explicas te lo agradecería 😉

@overspace: inkscape y gimp, mis dos grandes desconocidos… Y los próximos que intentaré aprender, no lo dudes!

@Cristian Eslava: Lo primero, gracias por enlazar! Los enlaces sobre optimización de CSS online se me han pasado en el post, tienes toda la razón, son bastante importantes!
Sobre la tabla de Hacks, es cierto que es bastante completa. Aunque personlamente desaconsejo los hacks, siempre es buena tenerla a mano.
Firebug parece una de esas herramientas de las que cuando las conoces no entiendes como has podido vivir sin ella. La tendré que estudiar más a fondo.

Los generadores de código CSS; para newbies puede estar bien, pero cuando ya empiezas a tener más experiencia, te aseguro que tienes una buena lista de ejemplos propios para empezar a desarrollar.

Sobre el tema del Fireworks, uhhmm… pagar 360 euros por algo que no verá todo el mundo y que creará limitaciones en la web, personalmente no me hace mucha gracia.

Pero eso sí! muchas gracias por la lista de enlaces!

@kuki; papel, lápiz e ¡imaginación! Estoy totalmente de acuerdo contigo. Pena que de imaginación ande muy escaso :-p
El uso de IDEs es principalmente (en mi caso) la comodida y estructuración que obtienes con ellas, es más comodo crear proyectos que andar abriendo cada html/css por separado…

Te digo lo mismo que a Cristina, pagar 360 euros por el Fireworks me parece excesivo…

@xa2: Muchas gracias. Pero, a que te refieres con como se comportan con mysql?? No llego a entenderlo bien (a estas horas ando más dormido que despierto ; )

Saludos,
GIMP y Inskape son una pasada. Gimp le da mil patadas al programa propietario Photoshop.

Como editor uso el NVU, es software libre, es gratuito, conecta con tu servidor remoto por ftp, entiende xhtml i no mete código innecesario en la parte WYSWYG, es la verdadera alternativa libre al Dreamweaver.

También programo PHP/Mysql con el editor Smultron (software libre) y hay otro que se llama TextWrangler (también libre).

Tanto con mac como con GNU/linux existen todo un ejército de aplicaciones libres que te permiten programar páginas con CSS/XHTML muy cómodamente. Pero ahora bien, estudiar pues hay que estudiar… claro está 🙂

saludos a todos y gracias por el artículo!

Yo añadiría a la lista otra extensión del Firefox, se llama Firebug y es una pasada, muy útil para ver las peticiones hecha con Ajax, comportamiento del DOM, errores Javascript, etc. Ahh tb es muy bueno un programa que se llama cssed (sólo para Linux), está aún en fase beta, pero muy util para editar y crear hojas de estilo.

Yo añadiría un par de cosas mas. Hay una extensión de firefox que a mi me resulta imprescindible y es Firebug que es un depurador de javascript con puntos de interrupción, trazas y visualización de variables. Toda una atentica virguería que ahorra miles de dolores de cabeza.

Y lo segundo que es más fácil hacer que primero se vea bien en Firefox y luego en IE que al reves. O lo que es lo mismo de los que mejor soportan los estandares a los que menos. Espero que esto sirva a alguien.

@joancatala: Jeje, prometo aprender GIMP y Inskape!
NVU lo he visto alguna vez de pasada, pero no me atraen mucho los WYSWYG, aunque creo que la cosa estaría entre este y Amaya[1] (de los que no he llegado a comentar nada en el post :-S ).

Smultron y TextWrangler¿? Yo puedo sentirme feliz por poder usar Debian en el curro… Pero vamos, yo se de uno que usa Mac. Que morro!

Gracias a ti por comentar! Y además dando buenas idéas 😉

@tacuix (aka Linux-Z) gracias por enlazar!

@mario: Añadido Firebug! Habrá que echarle un vistazo a cssed que tiene buena pinta.

@matados2k: Creo que por votación popular, realmente me faltaba por poner el firebug!

El tema de como desarrollar en principio no lo quería meter en este post en exceso, pero está claro que la recomendación ppal es desarrollar para firefox. O, como ya dije en cierta ocasión[2] «desarrolla para firefox y que se joda el IE» (A titulo personal, claro 😉 )

@Birrasmil: El enlace del tutorial no lo he podido ver desde el curro, aunque algo me ha ayudado San Google[3]. Probaré desde casa.
Las standalone están genial! Ahora, para linuseros/maqueros recomiendo ie4linux[4] (eso si, solo para desarrollar! nada de para navegar por internet!!!)

[1]: http://es.wikipedia.org/wiki/Amaya_(navegador)
[2]: http://g05l21.bitacoras.com/archivos/2006/11/23/templates-css-i-cabecera-dos-columnas-pie-un-truquito
[3]: Enlace a la cache de google
[4]: http://www.tatanka.com.br/ies4linux/page/Es/P%C3%A1gina_Inicial

Me refiero a si tiene algún plugin para relacionarse con mysql, en dreamweaver he probado con el que creando una base de datos, él te crea un formulario «automático» para poder introducir los datos desde él.

@xa2, pues la verdad es que no tengo ni idéa de eso que me comentas, ni si quiera sabía que el Dreamweaver lo hiciera. Vamos, yo para MySQL pico PHP y listo.

Pero vamos, que yo sepa, ninguna de las IDEs comentadas tienen esa opción.

Un saludo

Gracias por el sitio y por responder. La verdad es que no me acuerdo cómo lo conseguí hacer, y el resultado es un poco chapucero, pero para pasar unas encuestas rápidas me sacó del apuro en tiempo record, hice la tabla en mysql, le enchufé el dreameweaver y me creó el formulario. Lo limpié y ya está.

Estoy completamente de acuerdo en la selección de programas que NUNCA habría que usar, etcétera. Yo soy un «diseñador web» aficionado, no trabajo de esto, pero creo que en cuanto a lo de probar el trabajo, no solo hay que hacerlo en distintos navegadores, sino incluso en distintas plataformas … en mi Instituto los ordenadores tienen Linux+Gnome (Guadalinex), en casa los alumnos tienen Xp, Vista e incluso Mac OsX … yo mismo trabajo con los tres … y no funciona igual el FF o el Safari en los distintos OS.
Yo trabajo con un editor de Mac OsX, el Smultron, pero tengo toqueteo también con todo lo que pillo, como el NVu que traen los Guadalinex del Instituto, pero prefiero escribir el código a mano.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *