{"id":28,"date":"2007-02-12T10:31:36","date_gmt":"2007-02-12T09:31:36","guid":{"rendered":"http:\/\/www.loretahur.es\/AprendiendoCSS\/una-pequena-lista-con-lo-minimo-para-ponerse-con-css\/"},"modified":"2007-02-12T10:32:28","modified_gmt":"2007-02-12T09:32:28","slug":"una-pequena-lista-con-lo-minimo-para-ponerse-con-css","status":"publish","type":"post","link":"http:\/\/www.loretahur.net\/AprendiendoCSS\/una-pequena-lista-con-lo-minimo-para-ponerse-con-css\/","title":{"rendered":"Una peque\u00f1a lista con lo m\u00ednimo para ponerse con CSS"},"content":{"rendered":"<p>Si el m\u00e9dico antes de operar a su lado pone una mesa con todo el material quir\u00fargico necesario. Si al ponernos a estudiar, sacamos el boli, el t\u00edpex, el l\u00e1piz, la goma, el subrayador&#8230; Entonces, por qu\u00e9 al dise\u00f1ar webs, nos ponemos delante del bloc de notas y nos quedamos tan anchos??<\/p>\n<p>As\u00ed que, continuando con el post de Loretahur sobre libros, ahora vamos a ver que es necesario, y que no, para trabajar con CSS.<\/p>\n<p>Espero que me ech\u00e9is una mano para completar la lista.<\/p>\n<p>Empezaremos por lo que <strong>no es bueno<\/strong> usar. Y esos peque\u00f1os errores de newbie.<\/p>\n<ul>\n<li><strong>FrontPage<\/strong> , si, ese maravilloso programa de la factor\u00eda Redmond es una de las mayores <strong>armas contra el dise\u00f1o web accesible<\/strong>. No entiende para nada el uso de estilos, css y accesibilidad web, llena todo con incompresibles tablas y acaba generando un c\u00f3digo enorme imposible de tratar. Como la mayor\u00eda de editores webs WYSWYG, no se deber\u00eda usar nunca.<\/li>\n<li>Desarrollar usando <strong>un solo navegador<\/strong>. Y m\u00e1s si solo desarrollas usando el navegador de la misma gente de Redmon, el <strong>IE<\/strong>. Cada navegador interpreta muchos comandos a su manera, de ah\u00ed, que si solo trabajas usando un navegador, obligas a que se vea bien solo con un navegador.<\/li>\n<li><strong>Flash<\/strong>, cuanto menos mejor. Y siempre que se ponga tendr\u00eda que existir una opci\u00f3n sin flash con el mismo contenido. Los que us\u00e9is GNU\/Linux sabr\u00e9is a que me refiero. Tener en cuenta, que quitando innecesarias animaciones, el uso de flash puede ser suplido f\u00e1cilmente con un buen dise\u00f1o web.<\/li>\n<\/ul>\n<p>Siempre hay cosas que aunque <strong>no son muy recomendables usar<\/strong>, se pueden tolerar mejor.<\/p>\n<ul>\n<li><strong>Dreamweaver<\/strong>: Ese \u00abmaravilloso\u00bb programa adorado por mil un \u00abdesarrolladores web\u00bb. Al igual que FP, crea bastante c\u00f3digo 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.<\/li>\n<li>Entonces, lo mejor, picar el c\u00f3digo a mano, como siempre, como se hace en programaci\u00f3n. Pero, no me se\u00e1is burros, no us\u00e9is el <strong>NotePad<\/strong>! Existen versiones bastante superiores (adem\u00e1s de ser libres) de editores de texto, siempre podr\u00e9is probar <a title=\"Webpage del programa\" href=\"http:\/\/www.flos-freeware.ch\/notepad2.html\">notepad2<\/a> o <a title=\"Webpage del programa\" href=\"http:\/\/notepad-plus.sourceforge.net\/es\/site.htm\">notepad++<\/a> o [g\/k]edit o cualquier otro editor de texto con resaltado sint\u00e1ctico  (claro, tambi\u00e9n vi y emacs).<\/li>\n<li><strong>Evitar los hacks<\/strong>, 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\u00e1 el IE7.<\/li>\n<\/ul>\n<p>Y ahora si, lo que todos <strong>deber\u00edamos tener<\/strong> en nuestro equipo:<\/p>\n<ul>\n<li><strong>IDE<\/strong>: Si vas a realizar m\u00e1s de una p\u00e1gina de forma espor\u00e1dica, m\u00e1s vale que te hagas con un buen ide que te ayude a organizarte y ahorrate algo de curro. Algunos, por ejemplo:\n<ul>\n<li><a title=\"Webpage del programa\" href=\"http:\/\/www.phpeclipse.de\/tiki-view_articles.php\"><strong>PHPEclipse<\/strong><\/a>: Que no es m\u00e1s que el Eclipse de toda la vida con un plugin para desarrollo en PHP, tienes plugins para HTML tambi\u00e9n, pero vamos, como normalmente lo que hago es picar PHP, pues este es el que uso :-p<\/li>\n<li><a title=\"Webpage del programa\" href=\"http:\/\/bluefish.openoffice.nl\/index.html\"><strong>Bluefish<\/strong><\/a><\/li>\n<li><strong><a title=\"Webpage del programa\" href=\"http:\/\/www.screem.org\/\">Screem<\/a><\/strong><\/li>\n<li><a title=\"Webpage del programa\" href=\"http:\/\/quanta.kdewebdev.org\/\"><strong>Quanta+<\/strong><\/a><\/li>\n<\/ul>\n<\/li>\n<li><strong>Navegadores<\/strong>: Cuantos m\u00e1s mejor. Firefox\/Iceweasel, IE5, IE6, IE7 (y es que hay mucha diferencia entre ellos), Opera, Safari, &#8230; en cuantos m\u00e1s navegadores los prob\u00e9is mejor, aunque en principio con FF y con IE6\/7 ser\u00eda suficiente ya que el resto, en la mayor\u00eda de los casos, se asemejan bastante al FF.<\/li>\n<li>Otra forma es <strong>comprobarlo en web<\/strong>. Un buen sitio para ellos (y gratis) es <strong><a title=\"Webpage del programa\" href=\"http:\/\/browsershots.org\">browsershots<\/a> <\/strong>una aplicaci\u00f3n online que te permite comprobar el dise\u00f1o en una amplia serie de navegadores y resoluciones.<\/li>\n<li><strong>Extensiones<\/strong>: Hay mil extensiones \u00fatiles para FF, pero la primordial es <a title=\"Webpage de la extensi\u00f3n\" href=\"https:\/\/addons.mozilla.org\/firefox\/60\/\"><strong>webdeveloper<\/strong><br \/>\n<\/a><\/li>\n<li>Hay mil p\u00e1ginas en internet que pueden ayudar bastante, otras tantas de las que podemos sacar trucos de sus propios dise\u00f1os y  otras de obligada referencia, entre ellas nos encontramos, por ejemplo:\n<ul>\n<li><strong><a title=\"Webpage de W3Schools\" href=\"http:\/\/mycroft.mozdev.org\/download.html?name=w3schools&amp;sherlock=yes&amp;opensearch=yes&amp;submitform=Search\">W3Schools<\/a><\/strong>: La mejor gu\u00eda de referencia en la web. Para FF existe la posibilidad de <a title=\"Webpage de los plugins de FF\" href=\"http:\/\/mycroft.mozdev.org\/download.html?name=w3schools&amp;sherlock=yes&amp;opensearch=yes&amp;submitform=Search\">incorporarlo a su buscador<\/a>.<\/li>\n<li><strong>Validadores web<\/strong> de <a title=\"Webpage de validaci\u00f3n CSS\" href=\"http:\/\/jigsaw.w3.org\/css-validator\/\">CSS<\/a> y <a title=\"Webpage de validaci\u00f3n HTML\" href=\"http:\/\/validator.w3.org\/\">HTML<\/a> del <strong>W3C<\/strong>.<\/li>\n<li>La misma web del <strong><a title=\"Webpage del W3C\" href=\"http:\/\/www.w3.org\/\">W3C<\/a><\/strong> (tambi\u00e9n en <a title=\"Webpage del W3C.es\" href=\"http:\/\/www.w3c.es\/\">castellano<\/a>), sus <a title=\"Webpage del W3C\" href=\"http:\/\/www.w3.org\/Style\/CSS\/\">especificaciones<\/a> y su <a title=\"Webpage del W3C.es\" href=\"http:\/\/www.w3c.es\/Divulgacion\/GuiasReferencia\/CSS21\/\"><strong>guia de referencia r\u00e1pida<\/strong><\/a> del CSS2.<\/li>\n<li><strong>Validadores de accesibilidad<\/strong> autom\u00e1ticos como <a title=\"Webpage de TAW\" href=\"http:\/\/www.tawdis.net\/taw3\/cms\/es\"><strong>T.A.W.<\/strong><\/a> Aunque su informaci\u00f3n no es que sea \u00abley\u00bb, si aportan mucha ayuda.<\/li>\n<li>P\u00e1ginas sobre colores como <a title=\"Webpage de EasyRgb\" href=\"http:\/\/www.easyrgb.com\/\"><strong>Easyrgb<\/strong><\/a> y la utilidad de <a title=\"Webpage de Juicy Studio\" href=\"http:\/\/juicystudio.com\/services\/colourcontrast-es.php#contrast\">contraste de colores<\/a> de <a title=\"Webpage de Juicy Studio\" href=\"http:\/\/juicystudio.com\/services.php\">Juicy Studio<\/a>. Siempre pueden servir de ayuda a la hora de encontrar colores seguros (y lo digo por experiencia).<\/li>\n<li>Y como no <a title=\"Webpage de Google\" href=\"http:\/\/www.google.es\/\">google<\/a>! Siempre que teng\u00e1is dudas, pasaros por \u00e9l y tambi\u00e9n por <strong><a title=\"Webpage de Foros del Web\" href=\"http:\/\/www.forosdelweb.com\/\">forosdelweb<\/a><\/strong>. Seguramente os resolver\u00e1 la mayor\u00eda de ellas.<\/li>\n<\/ul>\n<\/li>\n<li>Programas de retoque y dise\u00f1o fotogr\u00e1fico. Aqu\u00ed, si quer\u00e9is pagar, pod\u00e9is usar <strong>Adobe Photoshop<\/strong> (la versi\u00f3n m\u00e1s \u00abecon\u00f3mica\u00bb supera los 200 euros). Pero vamos, yo recomendar\u00eda <a title=\"Webpage de Gimp\" href=\"http:\/\/www.gimp.org\"><strong>Gimp<\/strong><\/a> e <a title=\"Webpage de Inkscape\" href=\"http:\/\/www.inkscape.org\"><strong>Inkscape<\/strong><\/a> (aunque no tenga ni la menor id\u00e9a de ninguno de los tres \ud83d\ude09 )<\/li>\n<\/ul>\n<p>Bueno, creo que ya hay bastante  material para empezar a dise\u00f1ar&#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Si el m\u00e9dico antes de operar a su lado pone una mesa con todo el material quir\u00fargico necesario. Si al ponernos a estudiar, sacamos el boli, el t\u00edpex, el l\u00e1piz, la goma, el subrayador&#8230; Entonces, por qu\u00e9 al dise\u00f1ar webs, nos ponemos delante del bloc de notas y nos quedamos tan anchos?? As\u00ed que, continuando [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"_links":{"self":[{"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/posts\/28"}],"collection":[{"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/comments?post=28"}],"version-history":[{"count":0,"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/posts\/28\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/media?parent=28"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/categories?post=28"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/tags?post=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}