Proyecto del curso (III): Entrega final

Entrados ya en la etapa final del proyecto, toca pasar todo a php e ir dándole la forma real a la página. He cambiado todo lo que llevaba realizado, ya que no me convencía en absoluto cómo estaba quedando aquello. Dejando caer la primera versión en el olvido, centrémonos en la nueva. 

La página consta de los siguientes elementos: una única página con toda la información de la banda, así como un formulario de contacto, una base de datos para suscripciones y un cuadro de búsqueda que redirige a otra página con los resultados de la búsqueda.

Para empezar, para no recargar mucho la página con colores, hemos decidido optar por la simplicidad del diseño y hemos usado colores vivos, con energía y pureza; en este caso, amarillo y blanco.

Usando plantillas de bootstrap hemos configurado la barra de navegación añadiendo el logo del grupo y las distintas secciones en las que se divide nuestra página, señalizándolas mediante glyphicons.  Hacemos uso de php para no tener que repetir código en exceso. 

En la sección de historia, he hecho uso de los conocimientos aprendidos a lo largo del curso con las entregas de la revista para compaginar fotos y texto sin que se nos salgan de los límites.

En la parte de contacto, hemos creado un formulario simple con pocos campos a rellenar, totalmente cambiado al que venía por defecto, con un toque personalizado del grupo de fondo. Está conectado a un mailer para tener un registro de las distintas solicitudes.

En la sección de galería y conciertos hemos querido plasmar el trabajo del grupo a lo largo de estos años en los distintos conciertos mediante fotos ordenadas por fecha y lugar para que los nuevos y antiguos seguidores puedan descubrir o revivir los momentos destacados de anteriores eventos.

Por último, en la página de la banda, he querido reflejar a cada componente del grupo, con sus respectivas referencias a sus redes sociales, ellos son la viva esencia de SIMBEO.

Además, hemos añadido diversos plugins que harán la user experience mucho mas atractiva y amena para todo aquel que visite la página. 

Pero ante todo, la seña de identidad, el favicon con la "S" para que incluso en las pestañas generales no dejen de tener un toque propio.

Pues bien, esto es SIMBEO:

http://www.tewcexample2.esy.es/

Proyecto del Curso (II): Web estática

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

Paleta de Colores

Este artículo se va a estructurar en cuatro puntos.

1. Mirando los enlaces de la web, parte del logo de tu web (si no lo tienes ahora, coge cualquier otro o bien una foto) y define la paleta de colores de tu web. usa https://color.adobe.com/es/

Partimos del logo de la web:

Pero como queremos darle una estética nueva al grupo vamos a editarla un poco con Photoshop.

Se ha procedido a eliminar partes del fondo y decolorar la imagen para que combine mejor con el fondo que se le va a dar, el resultado: 

Aparentemente no es gran cosa, vamos a proceder a seleccionar la paleta de colores que acompañará la web (Punto 2).

Hay varias alternativas para definir la paleta de colores (triádico, análogo, monocromo), vamos a contrastar algunas de ellas y ver cual encaja mejor con el diseño de la web.

Al ser un logotipo claro, vamos a necesitar un color oscuro de fondo para que contraste con los tonos blancos y sea visible y llamativo. No me convencían ni los colores análogos ni triádicos porque perdía identidad la web. Tenía que predominar un color, así que opté por cargar la imagen con la web que se me ha facilitado y definir un estilo cromático intenso:

Y sobre esta gama de colores vamos a estructurar todos los colores de la página web. Añadiendo para los encabezados colores que por patronaje encajen de una manera agradable y visual, el blanco y el naranja :

Cambiando la temperatura de la web:

Pero no encajan con las estética de la web ninguna de las dos así que se ha descartado la idea, por lo menos para el primer boceto inicial de esta. 

Para concluir con el último punto:

4. Razona sobre las texturas de tu web.

Predominan los colores oscuros pero vivos, que se resaltan con algunos colores puntuales para despertar la atención del visitante. A su vez hay elementos repetitivos como las lineas divisorias de cada elemento para definir una clara separación entre estos. Es una textura clara, agradable y monocromática, se ha intentado no sobrecargar al visitante pero tampoco "aburrirle".

Y así es como se va a definir a priori la selección de colores para el proyecto Simbeo.

Foto - Yo estuve allí

Yo estuve allí 

Nota: Se ha realizado el proceso con Photoshop CC 2015.

El primer paso que he dado ha sido coger una fotografía de la escuela:

Tras ello, he escogido una foto mía y una foto de un personaje famoso, un Papa Noel colgante:

Con la herramienta "lazo metálico" y "varita mágica" se ha procedido a recortar la silueta de cada imagen para dejarlas sin fodo y poder superponerlas en la imagen principal de la ETSIT:

Para la de Papa Noel se han tenido que combinar dos capas de recorte para no perder la cuerda de la que cuelga, superponiendo capas, desplazando al cuerda y combinándolas para que formen una sola.

Respecto a mi foto: 

La he puesto entre la "maleza" de las plantas, he creado a partir de mi silueta una máscara de capa, que al ir pintando con el pincel sobre esta puedo seleccionar partes que queden o no ocultas, a continuación la primera foto es el resultado de la máscara de capa y la segunda es como quedan las dos fotografías juntas:

 Con el Papa Noel, se ha realizado el mismo efecto, se le cuelga de la esquina y se crea una máscara de capa para que el poste de la derecha quede por delante suyo:

Nos pedían también poner algo de texto, así que vamos a eliminar el rótulo rojo que hay en la fotografía con la herramienta de "crear parche" haciendo que todo el tejado sea similar y a la vez usando el corrector puntual para que las malformidades de la imagen queden resueltas, el resultado: 

Y por último, insertamos un recuadro de texto, lo giramos y ponemos el texto que queramos, en mi caso, mi nombre:

Como último retoque, el borde de la "a" que se superpone con el poste de la escuela, al estar el tejado de la escuela por detrás, no se debería ver así que creando una nueva máscara de capa y con el pincel hemos quitado esa parte de la última letra. Quedando como resultado final el que se muestra en la primera fotografía de este artículo.

Y así es como se realiza un pequeño montaje fotográfico utilizando tres sencillas herramientas de Adobe Photoshop CC 2015, el resultado final:

#1 Presentación de la web

El proyecto que voy a realizar consiste en la web de un grupo de música.

Es algo muy concurrido y común que todo el mundo tenga hoy día una página web, especialmente los grupos de música. Mas allá de los vídeos que podamos encontrar en Youtube es muy importante que haya un lugar propio con la seña de identidad del propio grupo, con su esencia, material especial y con información adicional para todo aquel curioso que quiera saber más sobre la banda.

Hacer una web es algo sencillo que si no se dispone de conocimientos hay páginas webs que te van ofertando distintas opciones y puedes "personalizar" tu propia web. Está al alcance de todos tener una página web pero tan solo al alcance de unos pocos hacerla bien. Con bien no me refiero a una estética concreta, eso va a depender del público objetivo y de la seña de la propia banda. Me refiero a una web clara, donde todo el contenido sea accesible, intuitiva, y lo más importante, atractiva.

Una "main page" como página principal sería la portada de la página encabezada por el logotipo de la banda. Con diferentes páginas con material como conciertos, música, galeria, noticias, info y contacto. Estas secciones a priori me parecen fundamentales para la organización de la web así como que en su conjunto permiten encontrar en pocos clicks todo aquello que podamos buscar acerca del grupo o sus integrantes.

El motivo de este proyecto es la amistad que entablo con un componente de la banda. Ellos ya tienen una página pero no la tienen actualizada y podría mejorarse con creces, por tanto, es una oportunidad estupenda de ayudar a promocionarse a un gran grupo de rock.

El objetivo de la página es darle al grupo una seña de identidad propia en internet, enfocado a todos los curiosos y amantes de la música.

Tras buscar en internet he encontrado algunas páginas similares que procedo a analizar:

https://www.leivaweb.es/

https://www.supersubmarina.es/




http://simbeoweb.wixsite.com/simbeo




Las dos primeras son de grupos famosos, la tercera es la página del grupo que voy a mejorar. Tanto "Leiva" como "Supersubmarina" tienen un diseño muy llamativo y atractivo. Las tres páginas son muy intuitivas para encontrar con pocos clicks lo que buscas, ofrecen interacción al usuario y la hacen muy atractiva. Leiva da unos matices negros y unos toques de gris que se refleja en su nuevo disco "mounstruos" de un toque un poco más sombrío. Por otro lado, supersubmarina tiene un azul cálido, también acorde con la línea que sigue su música.  También quiero destacar que en las tres páginas hay una pestaña donde se recogen enlaces a sus respectivas redes sociales, algo imprescindible en el "corazón" de un grupo. Como último detalle, tan solo Leiva tiene favicon, pequeño detalle que hace de una página una buena página como antes he descrito.

En definitiva, un sector con grandes páginas en las que inspirarme y un gran reto para darle un aire fresco a este gran grupo.