Partiendo de una charla con unos compañeros de trabajo, salió el tema y como lo abarcamos cada uno de nosotros, me pareció tan interesante que aquí me dispongo a hablar un poco sobre el tema. No trato de explicar conceptos o formas de hacer las cosas, simplemente una serie de prácticas.

Aunque son prácticas personales -a excepción del punto 3- creo que todos son totalmente imprescindibles para unos mínimos de calidad.

1.- Inizializar estilos

Sabemos que nuestros diseños se pueden ver alterados de un navegador a otro -incluso mismos navegadores en diferentes S.O.-. Uno de los motivos que causa esto son las tres hojas de estilos que se utilizan (el del navegador, el del usuario y el del diseñador). Para arreglar o resetear los estilos que nos puedan estropear nuestro trabajo debemos usar lo conocido como reseter.

Yo uso una de las versiones de Eric Meyer. Podéis googlear un poco para encontrar mucha información al respecto.

Hay varias formas de realizar este reseteo, puede valernos diferentes dependiendo del proyecto pero la que nunca recomiendo es Hard Reset.

2.- Ver nuestro diseño en varios navegadores

En relación con el punto anterior debemos comprobar nuestro diseño en diferentes navegadores. Lo ideal es llegar a cubrir el 90% de los visitantes de nuestra web (lo podemos saber de antemano o generalizar con datos conocidos).

Podemos tener varios navegadores instalados en nuestro pc (firefox, opera, IE,…) o lo que es mejor tener motores de renderizado (gecko, presto, trident…).

Si eres de Linux puede que te interese el proyecto IEs4Linux, hay su homólogo para Mac en IEs4Mac.

Puede ser tedioso tener varios navegadores, y aún así hay otros muchos que nos dejaremos atrás, por eso hay herramientas webs tan buenas como Browsershots que nos puede facilitar la vida. Prueba en 4 S.O. y 72 navegadores diferentes, nos brinda capturas de pantallas para que veamos los resultados.

3.- Usar un Sistema de Versión

Ya sea Subversión, Git, Cervicia o cualquier otro… una vez te acostumbras a trabajar con un sistema de versionado no sabes como podrías hacer grandes -o pequeños- trabajos sin él. No es totalmente necesario pero si altamente recomendable y puede ayudarte enormemente para cumplir el punto siguiente.

Si no sabes, aprende, hay muchos manuales por internet y aplicaciones gráficas para casi todos. Si ya lo usas felicidades

4.- Tener una buena organización -un TODO, un orden…-

Diréis: “yo me organizo bien probando cosas” y yo os diré: “mentira”. Para trabajos serios, proyectos realmente importantes -para nosotros o para quien sea- no podemos ir haciendo las cosas a lo loco -ni tampoco planearlo todo exhaustivamente porque nos limitará la espontaneidad y la inspiración-.

¿No te estas contradiciendo? Me explico mejor. Para un correcto desarrollo tenemos que tener las ideas claras: saber el diseño a groso modo, la estructura en la que organizaremos los archivos -la simple practica lo da-, etc. Ni empezar desde cero y a ver como va saliendo las cosas ni tenerlo todo exaustivamente pensado puesto que siempre nos llegarán elementos que no encajan bien o pequeños cambios por parte del cliente que nos lo rompe todo.

Por eso digo, organízate de la forma que sea, hazte alguna lista TODO de tareas por hacer, por comprobar… Los post-it pueden ser buenos amigos.

5.- Mejora Progresiva

Un concepto desconocido para muchos desarrolladores y uno de los más importantes. Realizando el trabajo hay dos grandes tendencias:

1. Usar sólo características que soporten todos los navegadores (ello incluya IE 6) haciendo diseños muy limitados.
2. Olvidarse de los navegadores antiguos y fijarse sólo en los más modernos.

A mi parecer, ambos dos son incorrectos. La mejora progresiva tiene dos principios y desde que los leí cambió mi forma de tratar este tema:

1. En primer lugar, el diseño web debe permitir el acceso completo y correcto a toda la información de la página independientemente del tipo de navegador utilizado por el usuario.
2. Después de cumplir el requisito anterior, se deben utilizar las características más modernas de CSS 2/3, aunque sólo los usuarios con navegadores más modernos sean capaces de disfrutarlas.

No es una tarea fácil al principio pero si queremos hacer trabajos profesionales, tenemos que ser eso mismo, profesionales.

6.- Estándares. Usar validadores

Muchas de las prácticas anteriores carecen de sentido si luego no usamos estándares HTML/XHTML/CSS… por ello según vamos diseñando -o sólo al final si ya tienes práctica- debemos usar validadores para cersionarnos que todo nuestro trabajo es totalmente compatible con los navegadores -todos lo siguen menos IE que va a su bola…-

Hay muchos por la red pero los que recomienda casi cualquier desarrollador son los de W3C.

7.- Tener un ojo pendiente al rendimiento

Según un estudio de Yahoo! el 80% del tiempo de carga de una web actual se destina a peticiones al servidor y descarga de la información (imágenes, estilos, etc.) y el otro 20% al desarrollo de información dinámica (ejecutar comandos php, ruby, etc.). Debido a esto debemos de estar pendientes de nuestro código, de nuestras hojas de estilos, de nuestras imágenes.

Aqui os dejo unos cuantos consejos:

• Optimizar todas nuestras imágenes. Una vez nos convendrá usar .jpg, otras .gif, otras .png. Ajustar la calidad y opciones llega a reducir mucho el peso sin ser perceptible para el ojo humano la diferencia. Ojea manuales para ayudarte con el tema, siempre tendrás tiempo para probar y probar. (Nota: para los usuarios de Photoshop, les puede ser muy interesante una opción dentro del menú Archivo, no recuerdo el nombre pues soy usuario de Gimp pero era algo como guardar imagen para dispositivo móvil/web).
• Usar técnicas de Sprites CSS, reducirás el peso de imágenes y el número de peticiones al servidor.
• Código limpio en el HTML y el CSS -usar la propiedad Shorthand, etc.-.
• No usar flash o imágenes cuando se puede usar trucos CSS para efectos visuales. Ver este enlace para ejemplos.
• Usar compresores de CSS y javascripts como YUI Compresor, sólo lo recomiendo si sabéis lo que hacéis.
• Reducir el número de peticiones al servidor, hay muchos trucos para esto. Es más importante de lo que muchos piensan.

8.- Aprender

Quizá sepamos hacer cualquier web, podamos desenvolvernos en cualquier situación y desarrollar lo que se desea pero… siempre hay mejores formas de hacer las cosas!! mejores herramientas! mejores métodos! mejores prácticas! nuevos lenguajes! nuevos compañeros de los que aprender! nuevos networkings por hacer! y un grandísimo etc.

Se mejor profesional que ayer. No dejes de aprender, de leer blogs, manuales…. haz de la curiosidad y la tenacidad una de tus mejores virtudes.

¿tienes algo más que añadir? ¿no estas deacuerdo con algo? ¿quieres saber más sobre algún punto en concreto? Pues no seas tímido y escribe un comentario

Enlaces interesantes:

• El Reset CSS de Eric Meyer que uso.
• Motores de renderizado de los navegadores
• Historial sobre estadísticas de uso de los navegadores (bastante fiable)
• Efectos de gradientes con CSS
• YUI Compresor online para CSS y javascript

WebSoftware 2.0 se complace en anunciar la puesta en marcha de la pagina www.duranehijos.com. Se trata de un empresa de construcción en Iznájar (Córdoba) que cubre todo tipo de trabajos desde pequeñas reformas a grandes construcicones como bloques de pisos, etc. También disponen de servicio de contenedores y camión pluma.

Como valor añadido se ha dispuesto el sitio web con la posibilidad de seleccionar el idioma, ya sea inglés o castellano.

Sin más queremos desearles suerte y que no les falte trabajo.

Gracias. Nos vemos.

Aprovechamos esta nueva entrada para comunicarnos con ustedes para comentaros que proximamente WebSofware 2.0 presentará uno de sus trabajos www.arrankapegatinas.com. Es la web de un club MTB de Iznájar (Córdoba) al cual le auguramos un brillante futuro y le deseamos mejor suerte.

Esperamos aclarar las dudas y explicar todo el contenido de la web de forma correcta. Una vez hallamos terminado esperemos que la satisfacción de los usarios sea máxima. Comentaremos en el blog qué tal se ha desarrollado todo.

Gracias por la confianza. Nos vemos pronto.

WebSoftware 2.0 se presenta formalmente en sociedad.

Nos vemos pronto.