Html + CSS

Lo primero que toca hacer es la maquetación de la página web. Para poder realizar dicha tarea, tenemos que saber qué contenidos queremos mostrar. Para ello, nos basaremos en el diagrama del post anterior, en el que mostramos la estructura de una de las páginas. Todas las páginas seguirán el mismo esquema.
Para el diseño gráfico, hemos recorrido varias páginas mirando CSS de otras fuentes, así como de templates (existen páginas que muestran ciertos moldes css que pueden ayudar a uno a coger inspiración o una base)
Claramente, a medida que se vaya haciendo el desarrollo, los CSS pueden sufrir ciertas variaciones y correcciones.
A su vez he utilizado unas cuantas imagenes hechas con el photoshop para darle un toque estilístico a la página web más importante. De todas formas, un diseñador profesional podría haber cuidado mejor los detalles.

Los CSS están colgado en estas direcciones:

1. http://scoreandsound.com/css/style.css
2. http://scoreandsound.com/css/layout.css
3. http://scoreandsound.com/css/reset.css

Estos CSS incluyen la gestión de los plug-in javascript que utilizaremos así como la del diseño de la página en sí.

Finalmente la página web tiene un aspecto de este estilo:

Modelo de datos

Como hemos mencionado el modelo de datos está realizado con el software DIA.

La idea es que un usuario pueda realizar un login por tanto habrá que guardar sus credenciales de acceso por una parte. A su vez, este usuario podrá subir un producto musical que contendrá la url del vídeo, de la partitura, una serie de descripciones y clasificaciones. Y además, si me da tiempo pondré que los usuarios puedan comentar y puntuar estos productos

Todo este modelo está pasado a phpMyAdmin para us tratamiento posterior a través del servidor:

Selección del entorno

Para la realización del proyecto web he decidido coger un entorno sencillo que me permitiera de una forma rápida y facil la producción de la web.
Para el servidor web en local he escogido el llamado WAMP. WAMP es un acrónimo muy descriptivo que significa Windows Apache MySQL PHP, dejándo claramente las tecnologías que se utilizarán desde el punto de vista de servidor. Una de las cuestiones más útiles es que tiene una configuración por defecto que funciona a la primera y que le permite tener a tu ordenador local como si fuera un servidor ya configurado con el que se puede servir peticiones y acceder a base de datos.
Así mismo, para la realización del modelo de datos (que mostraremos en el siguiente post) hemos utilizado otra herramienta sencilla, el phpMyAdmin. Mediante una interfície web creamos en local el modelo de datos que posteriormente exportaremos al servidor web real sin tener que realizar demasiado trabajo.
Para la edición del código (dado que no trabajaré con una ingente cantidad de ficheros, sino que serán unos pocos) hemos elegido el editor NotePad++. Es un editor simple y ligero que te permite trabajar en diferentes lenguajes (lo cierto es que a medida que crece el proyecto, este editor se queda insuficiente teniéndolo que sustituir por un Eclipse o Dreamweaver.
Para la edición de las imágenes utilizaremos una versión portable de photoshop, con el que podremos realizar cambios rápidamente sin tener que cargar demasiado en memoria RAM.
Finalmente para la edición de diagramas y modelado gráfico se ha utilizado el DIA, un software de código libre que permite crear modelos entidad-relación, UML y diagramas de flujo.

Diseño gráfico

En el aspecto gráfico, considero que hay que tener claras tres cosas:

• El logo
• Los colores
• La tipografía

Es importante dejar clara las ideas que se quieren tener con la selección de cada una de las tres cosas: Innovar puede suponer la diferencia muchas veces; pero hay veces que uno tiene que decidir la imagen corporativa basándose en lo ya existente. La idea es clara, aprovechar las buenas sensaciones que dan grandes empresas triunfadoras de una manera sutil, utilizando colores o tipografías parecidas o imitando logos.

En el caso del logo, al llamarse la página web scoreandsound, aprovecharemos el juego que tienen las dos S (Score & Sound) y se creará uno parecida a la idea de 1&1. Sería algo parecido a S&S. Pero con los colores corporativos que se describirán luego.

Para los colores, dado que la página quiere dar una sensación seria y simple. Utilizaremos colores un poco más apagados como el gris plateado, el azul y el verde.Colores que nos recuerdan a empresas como movistar
Es importante no excederse en la complejidad con colores y tipografías ya que puede agobiar al usuario.

Para la tipografía, como queremos mostrar cierta seriedad. Utilizaremos tipografías más robustas como pueden ser Times New Roman, Helvética o Verdana.

La selección de esta combinación de seriedad y simpliza nace básicamente de dos conceptos: seriedad; porque la formación y el aprendizaje son cosas importantes y serias y eso es lo que encontrarás en el portal. Aprenderás de verdad. Simplicidad; porque aprender es en muchas ocasiones complicado y la gente termina abandonando por ello, la complejidad. La página se debería vender como algo sencillo.

Diagramación de la web

Para la diagramación de la web, está prevista una resolución de 1024x728 píxeles ( la resolución para un monitor estándard de hoy en día) y seguirá el siguiente esquema.

Para la desición del diagrama me he basado en la página web tercera (http://www.sheetmusicplus.com) pero he utilizado ninguna plantilla concreta.

Creo que para una primera fase es suficiente pero debería ir mejorando y agregandose más información a medida que el proyecto vaya creciendo. Como decía Knuth: Las optimizaciones prematuras son la madre de todas las desgracias . Empecemos por lo simple, luego lo mejoramos.

Análisis de la competencia III

El análisis de la tercera web (sheetmusicplus.com) es el siguiente:

Título
SheetMusic for Piano, Guitar and Choral - Sheet Music Plus

URL
www.free-scores.com

Módulos y submódulos que contiene
Contiene una página principal y varios módulos. En todos ellos se venden partituras. Lo que los módulos son diferentes formas de encontrar la información. Es decir, que los módulos en los que se organiza la web son una ayuda de búsqueda. Dentro de los criterios existen: Instrumentos, Piano, Guitarra, Voz, Géneros, de la A a la Z, etcétera.

Indica qué tecnologías de cliente utilizan y para qué
La página tiene un fuerte arraigo en tecnologías javascript y ajax para realizar llamadas al servidor para realizar despliegues de los menús, tooltips, etcétera.

Indica qué tecnologías de servidor utilizan y para qué
Para el lado del servidor he podido observar que utilizan php y lo utilizan para consultas sobre bases de datos de partituras, de usuarios, puntuaciónes, vídeos.

Nivel de inmersión en el comercio electrónico:
Presencial - Información sobre la empresa
Es un portal web de descarga de partituras musicales de pago. Organizado desde diferentes formas para encontrar las partituras.


Presencial - Catálogo de productos o servicios
Poseen un catálogo partituras de venta al usuario final. Así como cursos de pago de diferentes instrumentos.



Venta B2C - Tipo
Tienda Virtual.



Venta B2C - Tipo de pago

Tienen diferentes métodos de pago. Diferentes pasarelas de pago (Visa, Mastercard, American Express...) Así como pago por PayPal.


Venta B2B - Afiliación

Tienen un servicio de afiliación, donde terceras empresas pueden ofrecer el producto de esta página, a cambio de un porcentaje sobre la venta.
Se ajusta a la LSSICE?
Se ha mirado en el Whois del dominio para averguar cierta información. Descubriéndose que la empresa no se encuentra en España, sino en Estados Unidos, por tanto la LSSICE no afecta a dicha página, siendo la legislación inglesa la que regule el comercio electrónico de dicha web.

Indica qué te ofrece de positivo para tener en cuenta en tu web
Es una tienda online de venta de partituras de pago. Posee una web user-friendly y bien organizada (un buen ejemplo a seguir). El producto es sencillo, solamente venden partituras que con el paso del tiempo estarán consiguiendo a buen precio.

Indica qué no te ha gustado, por qué y cómo lo cambiarías en tu web
El produco es sencillo. No hay comunidad de usuarios ni interación social, es puramente una tienda virtual. ScoreAndSound incluiría parte de este producto, además de las partituras, tutoriales de cómo aprender a tocar cada partitura.

Análisis de la competencia II

El análisis de la segunda web (free-scores.com) es el siguiente:


Título
Free-scores.com : World Wide Free Sheet Music



URL
www.free-scores.com

Módulos y submódulos que contiene
Contiene una página principal y 4 submódulos:  Partituras Gratuitas, Partituras de Pago, Instrmentos Musicales y un Concurso musical. En partituras gratuitas se ofrecen partituras que no poseen derecho de autor. Las de pago son las que sí lo poseen y deben abonarse. Instrumentos musicales es la venta de instrumentos y el concurso, menos importante es un mecanismo de márketing para fomentar la participación de los usuarios.

Indica qué tecnologías de cliente utilizan y para qué
La página tiene un fuerte arraigo en tecnologías javascript y ajax para realizar llamadas al servidor para realizar formularios del tipo autocompletar, combobox dinámicos etcetera.

Indica qué tecnologías de servidor utilizan y para qué
Para el lado del servidor he podido observar que utilizan php y lo utilizan para consultas sobre bases de datos de partituras, de usuarios, puntuaciónes, vídeos.

Nivel de inmersión en el comercio electrónico:
Presencial - Información sobre la empresa
Es un portal web de descarga de partituras musicales gratuitas y de pago. Así como venta de instrmentos musicales. 

Presencial - Catálogo de productos o servicios
Poseen un catálogo partituras de venta al usuario final, así como un catálogo de instrumentos. Todos son enlaces a otras tiendas.


Venta B2C - Tipo
Comunidad Virtual



Venta B2C - Tipo de pago

No existe método de pago debido a que todo el producto proviene de la integración con otras empresas. Entiendo que por cada venta generada se llevarán un porcentaje.


Se ajusta a la LSSICE?
Se ha mirado en el Whois del dominio para averguar cierta información. Descubriéndose que la empresa no se encuentra en España, sino en Francia, por tanto la LSSICE no afecta a dicha página, siendo la legislación inglesa la que regule el comercio electrónico de dicha web.


Indica qué te ofrece de positivo para tener en cuenta en tu web
Ofrece muy buenas ideas sobre cómo estructurar el negocio, es una página más dinámica, más completa, con usuarios y perfiles. Muchas ideas de las que tenía en mente esta página ya las había desarrollado. De todas formas, el producto no acaba siendo el mismo. Aquí se venden partituras e instrumentos. ScoreAndSound venderá paquetes de formación sobre piezas musicales (vídeos tutoriales, partituras y demás herramientas para aprender la pieza)


Indica qué no te ha gustado, por qué y cómo lo cambiarías en tu web
A pesar de tener bastante información, no la encuentro bien presentada al usuario, la gestión de perfiles y usuarios es un poco confusa y no hay un márketing establecido estratégicamente. También encuentro que tiene demasiada publicidad