Edadmovil

Welcome to a new age!

Migración web HTML a CSS

Aunque no era una parte de las prácticas a realizar, migramos una web que administrábamos con anterioridad (http://www.atletismofuenlabrada.com) basada en tecnología HTML a un portal completamente nuevo basado en HTML y CSS, con alguna funcionalidad en el lado servidor.


PÁGINA ANTIGUA

El portal anterior lo heredamos de otro webmaster con el fin de seguir manteniéndolo, sin que se nos requiriese una renovación. Sí que nos solicitaron que cualquiera mejora que pudiéramos efectuar la realizáramos, dandonos libertad total para cualquier avance.
La página esta diseñada en HTML, completamente estática. Necesitamos ampliar una sección de la misma y hubo que realizar una reestructuración completa de los menús, puesto que estos eran imágenes con funcionalidad de botón que no permitían creación de nuevos elementos ni modificación de los anteriores. Optamos temporalmente por sustituirlos por un array de botones Flash, para poder realizar las modificaciones solicitadas.
El problema era que, con la cantidad de imágenes que teníamos, sumado todo al nuevo contenido Flash, el portal era muy pesado y costaba mucho cargarlo, además de que el tráfico generado era un coste extra para los dueños.
Otro inconveniente que tenía este portal era la práctica imposibilidad de navegación a través de dispositivos móviles y la falta de uniformidad del aspecto de esta según el navegador y el dispositivo usado.


DISEÑO ACTUAL

Hicimos un replanteo de todo el portal por fases. El único requisito que teníamos era no modificar los colores y emblemas del club.
Decidimos eliminar todo rastro de Flash ya que, además de lastrar la carga de la página, estaba dejando de ser aceptado por parte de algunos fabricantes y navegadores.
Se optó por realizar un diseño similar al anterior en colores y estructura, pero apoyandonos en CSS y así sustituir toda la estructura de tabla anterior por <div>.

El diseño final se muestra en la imagen más abajo.

 

 

Además, el foro utilizado dejó de ser funcional debido a la cantidad de spam y flood recibido. Implementamos una solución basada en comentarios por noticia, así personalizamos las opiniones de los usuarios por eventos y tenemos el sistema de foro integrado en el mismo portal.

 

Para mostrar el menú, optamos por una solución integrada en la barra superior con los menús desplegables.

Por último, incluimos una funcionalidad para comunicarnos con el lado servidor, que aunque no había sido solicitada, nos pareció muy útil. Creamos un formulario de contacto con PHP para que el presidente del club recibiera en una cuenta de correo especificada por él los correos de los usuarios que tuvieran alguna sugerencia o pregunta. También se utilizó, adaptado para la ocasión, para el registro online de participantes en la Media Maratón de Fuenlabrada.

 

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: