Cómo desarrollar un proyecto web con éxito (II)

Esta entrada es la segunda parte de un artículo que se ha publicado en dos entregas, así que si acabas de aterrizar, te recomiendo que leas la primera parte sobre Cómo desarrollar un proyecto Web con éxito (I).

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:

1. Recortamos todas las imágenes y backgrounds que necesitemos del diseño y las guardamos en una carpeta.
2. Re-dibujamos en una hoja el diseño en forma de cajas (divs), y le ponemos nombre a cada caja.
3. Escribimos en HTML lo que hemos dibujado en la hoja.
4. Añadimos el CSS correspondiente para que quede exactamente igual que en el diseño.
5. Comprobaremos que se ve correctamente en la mayoría de navegadores.

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 Internet siempre programa en PHP + MySQL y si la web lo permite lo hacemos bajo WordPress 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:

1. Prepararemos todos los archivos que necesitemos.
2. Los rellenaremos con el código HTML de nuestras plantillas.
3. Los terminaremos con el código PHP correspondiente.
4. Configuraremos WordPress (en este caso) y añadiremos los plugins correspondientes.
5. Crearemos un panel de control o crearemos plugins, dependiendo de la web.
6. Revisaremos que todo funciona perfectamente.

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 mantenimiento mientras 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:

1. Movemos la instalación de la web al servidor final (ojo con las rutas)
2. Ponemos la web en modo mantenimiento
3. Subimos todo el contenido de la web
4. Volvemos a revisar de arriba a abjo
5. Intentamos validar (en la medida de lo posible) la Web con el validador de la W3c
6. Quitamos modo mantenimiento
7. Comprobamos el robots.txt y la generación de un sitemap.
8. 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ás entregar 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.

CONCLUSIONES

Se ha visto la importancia de los direferentes procesos que seguimos en Departamento de Internet para 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.

Para que esta entrada sea más interesante, agradecería a todos aquellos desarrolladores que nos quieran contar sus propios procedimientos y trucos, así todos aprenderemos más :)