Autor

Yo mismo

Diario de Honduras - fotos de mi última gran aventura

Algunas fotos (ejemplo del tutorial Fotolog en PHP)

Artículos

W3Csites.com Mundocitas.com

Consejos de/para un desarrollador front

publicado el 3 de Abril de 2006
Enlace permanente: http://www.marciobarrios.com/consejos-desarrollador-front

Este artículo básicamente lo he hecho para recordarme estas guías a mi mismo, porque son puntos que quiero tener siempre muy presentes, ya que a veces con el día a día pierdes un poco el rumbo, de todos modos creo que le puede servir a más gente, son cosas incluso lógicas en algun caso, pero que siempre viene bien recordarlas. No me alargo mucho en las explicaciones, simplemente son recordatorios, ahí van:

Mantén tu código limpio y ordenado
  • en el XHTML:

    una técnica muy útil para llevar un control sobre las etiquetas es que añadas un comentario después de la etiqueta de cierre:

    <div id="cuerpo">
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
    </div><!-- end div#cuerpo -->
  • en el CSS:

    Divide tus hojas de estilo en secciones lógicas(Comunes, Navegación, Formularios, Cuerpo, etc...), incluso puedes poner al principio de tu CSS un resumen de los contenidos, además para que el código sea más legible puedes identar tus reglas según su profundidad. Además si tu CSS es muy extensa puedes dividirlas en CSS lógicas(layout.css, colors.css, forms.css...) e importarlas desde un CSS principal, así lo podrás tener más ordenado, aunque este tipo de técnicas requieren una mayor atención y entender muy bien la especificidad de las reglas para no tener sorpresas.

    h1{...
    }
        h1 span{...
        }
            h1 span a.tal{...
            }

    Más consejos de desarrollo en la web de Lokesh Dhakar.

  • en el ECMAScript/DOM:

    Ten en cuenta que la legibilidad es más importante que la optimización(o almenos en la mayoría de los casos). Si te dedicas bastante a programar en este lenguaje entonces te recomendaría que comentases muy bien el código, sobretodo tus funciones(qué hace la función, parámetros de entrada y qué devuelve) y que si te vas a poner en serio es de obligado utilizar objetos(sí, claro que existen, y más concretamente utiliza Object Literal Notation).

    En este punto me quedaría horas hablando porque la verdad que hay mucho tema, pero simplemente doy unas nociones que creo que son de utilidad.

Sigue los estándares

Los estándares del W3C son las guías básicas para que el trabajo que hagamos desarrollando sitios web sea efectivo y duradero, lee y aprende sus recomendaciones sino estás perdido en este mundo, así de claro.

Desarrolla para los navegadores modernos, luego corrige errores para IE

Esta frase se me quedó grabada(no es literal pero venía a decir esto) del primer libro que leí sobre estándares web: Diseño con estándares web, de Jeffrey Zeldman, sin duda un libro de obligada lectura para todos los que nos dedicamos a este mundo. Bueno siguiendo con el tema, soy de los que opinan que la web avanza cada día y no podemos quedarnos atrás por culpa de IE, así que debemos integrar una web con nuestro navegador estándar favorito(todos menos IE) y hacer las cosas bien hechas, luego ya nos daremos cuenta de que IE la mitad de reglas CSS no las interpreta o las interpreta mal, pero ya lo arreglaremos en un CSS a parte. Además debemos implementar las mejoras que nos propone el W3C y que los navegadores(Opera, Firefox, Safari...) van adoptando, como por ejemplo CSS3, que es muy potente y nos hace más fácil y nos ofrece más posibilidades al trabajo de presentar una web.

Otro punto es importante es el de los ya conocidos hacks para IE. Si te ves obligado a utilzar hacks, manténlos separados del código limpio, así no te costará eliminarlos cuando no los necesites, e impórtalos mediante comentarios condicionales.

Siempre intenta innovar y mejorar

Te puede parecer muy difícil o imposible innovar en estos campos habiendo tanto gurú suelto por ahí, pero no lo es, intenta probar contínuamente nuevas formas de utilizar tu CSS(te sorprendería saber la cantidad de maneras que hay de desarrollar un CSS obteniendo el mismo resultado), de optimizarla o de buscar nuevas metodologías, en tu XHTML procura intentar ser más preciso utilizando las etiquetas disponibles y aprende a utilizar otras que posiblemente nunca hayas utilizado antes(¿has utilizado alguna vez la etiqueta address? seguro que adivinas para qué sirve...), y si hablamos de ECMAScript/DOM aquí ya entramos en el maravilloso mundo de la programación, puedes crear una librería para ver imágenes de forma muy elegante o un código para poder reordenar una tabla, y un largo etc. En fin, seguro que ellos empezaron como cualquiera de nosotros, así que ánimo y arriba el producto español!

Además si trabajas en alguna agencia o en alguna empresa del mundillo y estás al día de todas las novedades del sector puedes ayudar a impulsar nuevas tecnologías y metodologías más óptimas. Ya que tenemos la desgracia de ir algo atrasados en estos temas beneficiémonos de esto en nuestro país y aprovechemos las tecnologías emergentes.

Comparte tus conocimientos

No hay mejor manera de aprender, todos empezamos desde 0 y todos acabamos aprendiendo en mayor o menor medida, los foros o listas de distribución son una gran fuente de información y si no fuera por gente que se dedica a ayudar con sus conocimientos nunca hubiéramos aprendido, así que este es un punto importante, además puedes dar a conocer tu trabajo y la gente puede hacer críticas constructivas sobre él y así podrás mejorar.

El W3C no lo es todo
  • Que valide no significa que esté bien hecho

    El validador del W3C es automático, por tanto hay temas como la accesibilidad o la semántica que no pueden corregir, intenta desarrollar tu estructura conforme a una lógica y a un significado, teniendo en cuenta que no todo el mundo accede a internet de la manera que tú y yo accedemos.

  • A veces los estándares "parecen" una falsa promesa

    Evidentemente tienen muchísimas ventajas, pero ni la presentación de una web(CSS) es tan fácil como se prometía ni el xhtml es la panacea para crear las estructuras web perfectas ni los navegadores nos lo ponen fácil(sí sí, ése), así que hay veces en que debemos plantearnos girarle la cara a la semántica o a los estándares, eso sí, simplemente en puntos concretos. "It's OK To Break Standards" es un artículo de Justin Palmer done habla extensamente de este punto, muy interesante y recomendable.

Preócupate por la accesibilidad

Siguiendo con el punto anterior, todos los desarrolladores debemos preocuparnos por la accesibilidad en nuestro medio, internet, ya que es importante que la información de la web pueda llegar a todas las personas, sin distinción.

Para conseguirlo debemos seguir unas pautas de accesibilidad (WCAG), que nos guiarán por la metodología correcta, para examinar los fallos de una web podemos utilizar servicios como Hera (mi preferido, presenta los resultados de forma muy clara), TAW o Examinator, además de constatar que sin CSS la web puede ser completamente operativa, para esto puedes utilizar un navegador de texto como Lynx.

Aun pasando todos estos test, repito que no significa ni mucho menos que nuestra web sea accesible, eso solo puede ser constatado por un expero en accesibilidad después de repasar todos los puntos de las pautas.

Separa lo máximo posible la estructura, la presentación y el comportamiento

Al principio se hace difícil el hecho de separar totalmente estos 3 conceptos, sobretodo el comportamiento de la estructura, esta práctica es muy recomendable ya que así nuestro código es mucho más legible y entendible, ya no para quien pueda llegar a tocarlo, sino para nosotros mismos cuando volvamos a ese proyecto antiguo que queremos retocar. Para separar el comportamiento de la estructura recomiendo utilizar la librería behaviour o event:selectors.

Dicho esto tengo que decir que ver acabado un sitio web con esta separación de conceptos es un placer de actualizar o hacer mejoras, además de reflejar la profesionalidad del trabajo.

El comportamiento(ECMAScript/DOM) puede enriquecer mucho la "experiencia del usuario"

Esto hay que tenerlo muy claro, hablo de mejorar, así que lo más importante de esto es que aporte realmente una mejora de usabilidad y que la web sea totalmente operativa sin javascript. Navegar por una simple web puede convertirse en una magnífica experiencia para el usuario si le ponemos las cosas fáciles e intuitivas, gracias al comportamiento podemos mejorar mucho la navegación utilizando pestañas, efectos o enlaces más explicativos, mejorando el arduo trabajo de rellenar un formulario mostrando de manera muy clara los mensajes de error o validación (evitando esos molestos alerts), o incluso creando una estructura nueva dependiendo de la resolución del navegador, y un largo etc.

No regales tu trabajo

Esto si que es difícil, al empezar nadie confía en ti y es muy fácil caer en la tentación de hacer trabajillos prácticamente regalados(yo el primero), pero deberíamos valorar más nuestro trabajo y entre todos promover la competencia justa. Lo ideal es hacer proyectos propios para "mostrar al mundo" qué sabes hacer, de todos modos este mundillo está cada vez peor pagado, así que huye si puedes! ;)