Para esta primera entrega de mi web, se pedían tres cosas:
- Index.html
- Formulario a rellenar.
- Formulario de respuesta.
He utilizado como plantilla para mi web (recuerdo que la web de SIMBEO, un grupo de música) la siguiente plantilla.
El código de la plantilla es muy comprensible y a la hora de hacer cambios me he podido manejar sin problema. Los principales cambios que he hecho han sido:
En lo referente al index.html, en primer lugar el logotipo de la web, todo con photosop partiendo de una versión antigua que ellos tenían en su antigua web, dándole más matices de color y más "fuerza" a este grupo que es puro Rock and Roll. Por otro lado el menú desplegable, lo he adaptado a multidispositivos a mi gusto para dar una interfaz más cómoda al usuario tanto si se navega desde ordenador, como móvil, como tablet gracias a las propiedades del CSS. Así mismo también he adaptado el texto mostrado en pantalla en función del dispositivo, para no sobrecargar los móviles ni dejar escuetos los navegadores. La zona de las quotes y los eventos me gusta como está, he jugado mucho con la etiqueta "href" para enlazar la página, detalle que no venía por defecto obviamente. Si seguimos bajando he querido colocar dos imágenes que simbolizan la esencia del grupo, una de estos tocando y otra con su gran maestro, Leiva. En medio otro slogan que gracias al photoshop ha sido posible. Por último en el footer otro logo del grupo para cerrar el index. Las cuatro pestañas de facebook, twitter, google+ y printerest enlazan con sus respectivas páginas de redes sociales, alguna todavía en construcción.
La página de contacto, he modificado los recuadros dándoles un toque más personalizado, también adaptado a multipantalla en función del dispositivo, he colocado un detalle con jQuery, al pinchar sobre cada una de las tres cajas se despliegan (en función del dispositivo en una dirección u otra) etiquetas con imagen y nombre del campo sobre el que se hace click, quedando estas fijas sombreadas si se rellena el campo. Todo esto es mejor verlo gráficamente pues como bien dicen, una imagen vale más que mil palabras. Si no rellenamos algunos de estos campos nos pedirá que terminemos de rellenar los datos y a continuación le damos al botón de Enviar.
Nos redirige a la página de respuesta del formulario, quiero cambiar el método de recogida de datos para evitar posibles vulnerabilidades tipo SQLi pero como todavía no trabajamos con bases de datos no me he querido adelantar. Aun así se ha procurado depurar el código para evitar posibles fallos de XSS. Es una página de respuesta simple, con un mensaje de agradecimiento y a la vez se ofrecen varios botones que "quizá puedan interesar" al usuario para que siga navegando, y disfrutando, de la página web de SIMBEO.
Se han dejado el resto de páginas que todavía están en construcción (galería, blog, etc) que no se incluyen en esta entrega pero así estéticamente se va viendo como sería el resultado final (por ejemplo las noticias del index enlazan con distintos sitios de la web). Se han añadido algunos detalles como un favicon que indirectamente harán la experiencia del usuario mucho mas atractiva y enriquecedora, dándole al grupo una imagen muy profesional.
Sin más dilación... ¡¡ SIMBEO !! -----> www.SIMBEO.com
