Se ha hablado mucho sobre metodología de trabajo a la hora de desarrollar un proyecto Web desde cero, y supongo que cada desarrollador tendrá sus trucos y formas de trabajar propias.
En este post (formado por dos entregas) intentaré hacer un repaso general del proceso que seguimos en Departamento de Internet para el desarrollo de una página web. Tomaremos como ejemplo el desarrollo de nuestra propia Web, aunque no estarán todos los detalles, pues son demasiados y cada proyecto tendrá sus características propias.
Estoy seguro de que estas explicaciones pueden servir como resumen general y ayudar a entender la importancia que tiene una excelente planificación.
Cabe decir que antes de empezar con cualquier proyecto web, es recomendable estudiar de algún modo a la competencia. Esto no significa que vayamos a copiar todo lo que han hecho, al contrario. Se trata de elegir las 5 webs que sean competidoras directas y detallar sus puntos positivos y los negativos. Los negativos los tendremos en cuenta para que no se cuelen en nuestro proyecto, pero los positivos los estudiaremos, cogeremos lo mejor de ellos y los mejoraremosde forma adaptada para nuestro caso.
Este estudio de la competencia queda plasmado en un informe llamado benchmark, que siempre es opcional pero como digo, ayuda a crear un proyecto de éxito.
1. COMUNICACIÓN
Siempre digo que dedicarse a esto implica saber ser flexible, pues en ocasiones, al principio es muy difícil considerar todas las funcionalidades de una página Web. Es por ello que el factor más importante de todos es la buena comunicación.
Para una buena comunicación es muy importante establecer la figura del interlocutoren ambos lados (cliente y desarrollador). El interlocutor será quien tendrá contacto con la empresa de desarrollo y tendrá cierto poder de decisión sobre el proyecto. Esta figura normalmente está representada por responsables de marketing.
Existen tres comportamientos que nunca se deberían dar durante la realización de un proyecto:
- La comunicación es lenta y en ocasiones no hay entendimiento.
- El interlocutor cambia constantemente.
- Hay más de un interlocutor al mismo tiempo y existen contradicciones.
2. OBJETIVOS
Suponiendo que los dos interlocutores son ágiles y claros en sus acciones, podremos empezar con una reunión para así poder determinar otra de las claves del proyecto: los objetivos.
Este punto es fundamental para iniciar un proyecto. Si no sabemos cuál es el objetivo final del proyecto es imposible desarrollarlo pensando en ello, y por lo tanto planificar en consecuencia.
Al ser un pilar fundamental, no podemos dejar que los objetivos cambien durante el desarrollo del mismo, pues podría variar completamente.
3. CONCEPTUALIZACIÓN
Una vez claros los objetivos, los desarrolladores ya pueden empezar a trabajar.
En el proceso de conceptualización hay que establecer las bases que harán que nuestra web sea sólida, funcional, clara y que cumpla con los objetivos. En este punto es muy importante ser previsor, tener un mínimo de experiencia en el trato con el cliente y haber trabajado en proyectos diferentes.
Hay que detallar y describir aspectos como:
- Estructura de la información
- Método de navegación
- Bases de usabilidad
- Situación de elementos clave dentro del diseño
Toda la información y decisiones surgidas de este punto deberán ser reflejadas de alguna manera en algún formato visible para el cliente, para su aprobación. En Departamento de Internet lo hacemos en dos pasos diferentes:
- Escribimos en un documento todas las conclusiones de la conceptualización
- Esas conclusiones se transforman en una conceptualización gráfica.
La conceptualización gráfica no es más que una representación muy básica de lo que podría ser la web final, pero sin diseño ni colores. Sólo líneas y cuadros que representen la situación de los elementos, la navegación, la estructura de la información, etc.
Este tipo de conceptualización es más digerible para el cliente, y puede hacerse una idea muy visual de las conclusiones de todo el proceso creativo previo al diseño.
4. DISEÑO WEB
Una vez el cliente ha revisado y entendido la conceptualización, podemos ponernos a diseñar.
Para diseñar una página web no basta con tener buen gusto (como dicen algunos), sino que también hay que estar al día de las tendencias de diseño web que van apareciendo cada poco tiempo, pues en caso contrario nuestra web quedaría obsoleta (gráficamente) en poco tiempo.
El diseño es el primer impacto que nos lanza una web. Si ese diseño no es claro, sencillo e impactante, la web va a perder puntos y todo nos va a parecer más complicado: su lectura, su navegación, la búsqueda de información, etc.
Muchas veces, no solo es el primer impacto que recibimos desde la propia web, sino que podría ser la primera vez que conocemos una marca. Por poner un ejemplo, yo no tengo ni idea de chimeneas, pero si quisiera una, buscaría en Google y empezaría a visitar webs de empresas que instalan chimeneas: empresas que no conozco de nada. Pues bien, si la primera impresión que da una marca no genera confianza y facilidad, estaremos poniendo una barrera entre nuestro público y nuestros objetivos, que en este caso serían “vender chimeneas a diestro y siniestro”.
El diseño de una página está directamente relacionado con la distribución de la información y las funcionalidades de la misma. Es por ello que este punto viene siempre después de la conceptualización, y no hay que empezar a diseñar hasta que todo está bien revisado y aclarado con el cliente. Pensad en los “call to actions”, en los menús, sus tipografías, su tamaño, los elementos que deben destacar, imágenes…. Todo está relacionado y debe quedar perfectamente definido en la conceptualización.
Hay que tener en cuenta todos los elementos que tendrá la página, secciones, mensajes, sliders, etc. Hay que diseñarlo absolutamente todo para que el maquetador pueda hacer bien su trabajo.
El proceso de diseño será el siguiente:
- Se diseña alguna página relevante de la web (normalmente la home)
- Se le enseña al cliente, para obtener su aprobación
- Se hacen las modificaciones pertinentes y se aprueba la línea gráfica.
- Con la línea gráfica aprobada ya podemos diseñar el resto de páginas, que no será necesario que el cliente apruebe (esperemos que se fíe de nosotros)
- Entregamos todos los diseños en un formato por capas (PNG o PSD) al maquetador y le hacemos las explicaciones necesarias.
5. MAQUETACIÓN
Una vez aprobado el diseño definitivo, ya podemos empezar a maquetar lo que será nuestra web. En principio no hace falta mezclar maquetación con programación, es decir, en la fase de maquetación tan solo utilizaremos lenguajes HTML y CSS.
Nuestro trabajo será maquetar cada una de las páginas diseñadas, teniendo en cuenta las explicaciones del diseñador. No hay que olvidar los estados de botones activos, links, sliders, etc.
El proceso que seguimos en Departamento de Internet es el siguiente:
- Recortamos todas las imágenes y backgrounds que necesitemos del diseño y las guardamos en una carpeta.
- Re-dibujamos en una hoja el diseño en forma de cajas (divs), y le ponemos nombre a cada caja.
- Escribimos en HTML lo que hemos dibujado en la hoja.
- Añadimos el CSS correspondiente para que quede exactamente igual que en el diseño.
- Comprobaremos que se ve correctamente en la mayoría de navegadores.
6. PROGRAMACIÓN
Una vez tenemos lo que yo llamo “plantillas” ya podemos darle “vida” a nuestra web. Lo colgaremos todo en un servidor local o externo, pero que funcione de un modo parecido al servidor final.
Departamento de Internetsiempre programa en PHP + MySQL y si la web lo permite lo hacemos bajoWordPress como CMS.
No voy a explicar cómo maquetar un theme de WordPress (quizá en otro post) pero se trata de añadir las funciones que ya trae la API de WordPress i cuadrarlo todo para que funcione.
Hay que tener especial cariño con las paginaciones y los meta tags de cada página.
Por defecto, cualquier web que sale de Departamento de Internet está preparada para un posicionamiento natural aceptable. Es decir, siempre se da la posibilidad de insertar descripciones y títulos personalizados en cada página. Por otro lado, también se da la posibilidad de personalizar cada una de las URL’s de las diferentes páginas..
También es necesario tener definidas las zonas administrables que el cliente podrá tocar. De ello dependerá que tengamos que instalar más o menos plugins, crear los nuestros, o crear un panel de control completo. Todo depende del tipo de web y de las funcionalidades que tenga.
Proceso a seguir:
- Prepararemos todos los archivos que necesitemos.
- Los rellenaremos con el código HTML de nuestras plantillas.
- Los terminaremos con el código PHP correspondiente.
- Configuraremos WordPress (en este caso) y añadiremos los plugins correspondientes.
- Crearemos un panel de control o crearemos plugins, dependiendo de la web.
- Revisaremos que todo funciona perfectamente.
7. CONTENIDOS Y PUESTA EN MARCHA
Si hemos trabajado en un servidor local o provisional, es hora de mover nuestra instalación de WordPress al servidor final.Pondremos la web en modo mantenimientomientras que hacemos las últimas comprobaciones y añadimos todo el contenido a la web (textos, noticias, imágenes, galerías, etc).
El proceso sería el siguiente:
- Movemos la instalación de la web al servidor final (ojo con las rutas)
- Ponemos la web en modo mantenimiento
- Subimos todo el contenido de la web
- Volvemos a revisar de arriba a abjo
- Intentamos validar (en la medida de lo posible) la Web con el validador de la W3c
- Quitamos modo mantenimiento
- Comprobamos el robots.txt y la generación de un sitemap.
- Avisamos a Google de la nueva página
Como paso opcional, si hemos creado plugins o un panel de control propio, no estaría de másentregar un manual al cliente con todos los pasos que hay que seguir para modificar cualquier aspecto de su web. Este manual se puede acompañar de una formación de una o dos horas y seguro que será de buena ayuda para el Cliente.
8. CONCLUSIONES
Se ha visto la importancia de los direferentes procesos que seguimos enDepartamento de Internetpara el desarrollo de una Web. A pesar de que los procesos pueden variar en contenido e importancia,el orden siempre es el mismo.
Seguramente me han faltado muchos detalles por comentar, pero estoy seguro que esta serie de artículos podrá servir de guía a aquellos que no sepan por dónde empezar o necesitan algún tipo de ayuda.
——————————–
Fuentes:
http://www.departamentodeinternet.com/como-desarrollar-un-proyecto-web-con-exito-1/
http://www.departamentodeinternet.com/como-desarrollar-un-proyecto-web-con-exito-2/
