Fin del proyecto!

La URL del site es

http://www.scoreandsound.com


Notas adicionales: La página web tiene mucho que mejorar tanto en diseño como contenido y funcionalidades. Se adjuntan las siguientes mejoras:

1. Puntuaciones y Comentarios (al final no dio tiempo, pero no sería complicado)
2. Mejora de keywords y promoción
3. Reducir el número de imágenes y usar + CSS
4. Dar la opción de poder subir ficheros (partituras) y no solo las URL
5. Mejorar las imágenes que hay (se ven los borden en algunas imágenes)

Muchas gracias por todo

Presupuesto

Para la realización del presupuesto lo desglosamos de la siguiente manera:

1. Análisis de viabilidad del proyecto (500 €)
2. Compra de dominio y alojamiento (200 € / año)
3. Diseño gráfico, imágen corporativa y logo (700€)
4. Maquetación (500 €)
5. Programación Web (700€)
6. Posicionamiento y SEO (750€)

En total costaría 3350 €

Promoción III

Otro de los aspectos que pueden ayudarnos a la promoción es darnos de alta en los principales buscadores (bueno, puestos a ponernos, lo mejor sería darse de alta en todos los posibles, ya que no cuesta nada)

Para este caso, nos daremos de alta en el GoogleBot, de manera que google entienda que mi página web existe, y decida enviar una araña para recorrer mi web e indexarla.

Darte de alta en el búscador de google es tan sencillo como escribir tu URL y ellos en un tiempo (según ellos, razonable) recorrerán tu web y la indexarán.

No hemos podido darnos en de alta en BBDD en InternetInvisible debido a que después de mucho tiempo de funcionamiento, ha dejado de dar servicio.

Finalmente para el análisis estadístico y seguimiento de nuestra web y sus visitas, utilizaremos el Google Analytics, que nos indicará como ubicar su píxel para que registre todo el tráfico web y nos diga de dónde viene y hacia dónde va.

Promoción II

Para optimizar nuestra gestión de posicionamiento SEO, hemos utilizado la herramienta SubmitExpress que hará una evaluación sobre la metainformación de nuestra página y nos ayudará a mejorarla.

Los resultados son los siguientes:

Meta tags analysis.
Title:	Title relevancy to page content is poor. The Title relevancy to page content is 50%.
Description:	Description relevancy to page content is poor. The Description relevancy to page content is 50%.
Keywords:	Keyword relevancy to page content is terrible. However, this is not necessarily bad if you have a lot of content. The most important factor is to have your keywords on the page a few times. The keywords relevancy to page content is 0%.
Robots:	Found no robots meta tag. This tag is not really required but helps spiders to index the web page.
Author:	Found no author meta tag. This tag is not really required but helps for your (company) name recognition.

Un análisis más específico nos lo puede dar la herramienta Keyword Density Results que nos deja estos resultados:

HTML

Title

Meta_Description

Meta_Keywords

Visible_Text

Alt_Tags

Comment_Tags

Domain_Name

Image_tags

Linked_Text

Option Tags

Reference_Tags

Total

http://www.scoreandsound.com
Keywords	Total	%
6	6	0
18	18	0
31	31	0
15	37	0
0	0	0
3	3	0
0	1	0
0	18	0
16	16	0
0	0	0
0	39	0
89	169	0

Ambos nos dicen que tenemos que mejorar nuestros títulos por que no son relevantes (esto es importante, como mejora) Y también dice que las keywords son malísimas (lo que nos dice que debemos poner inmediatamente un proyecto que ponga palabras clave por toda la página web, si bien en imágenes, contenido, etcétera) y si hace falta crear más contenido.

Promoción I

Para la promoción y posicionamiento, hemos establecido ciertos meta-tags en las páginas así como el título para ayudar a los búscadores a indexar la página web.

El listado de títulos son el siguiente:

Aprénde música con score & sound
Aprénd a cantar con score & sound
Aprénde piano con score & sound
Aprénde guitarra con score & sound

Mediante la herramienta WebSiteOptimization hemos analizado el tiempo de carga dejándonos este resultado.

De él concluimos que tenemos que mejorar nuestro ratio de imágenes, optimizar nuestro javascript y reducir el número total de objetos.

Web Page Speed Report

URL:	www.scoreandsound.com
Title:	Aprénde música con Socre and Sound
Date:	Report run on Thu Sep 20 02:36:26EDT2012

Diagnosis

Global Statistics

Total HTTP Requests:	65
Total Size:	794955 bytes

Object Size Totals

Object type	Size (bytes)	Download @ 56K (seconds)	Download @ T1 (seconds)
HTML:	2414	0.68	0.21
HTML Images:	195970	39.86	1.84
CSS Images:	351409	80.44	12.26
Total Images:	547379	120.3	14.1
Javascript:	236668	48.57	2.65
CSS:	8494	1.89	0.25
Multimedia:	0	0.00	0.00
Other:	0	0.00	0.00

External Objects

External Object	QTY
Total HTML:	1
Total HTML Images:	4
Total CSS Images:	52
Total Images:	56
Total Scripts:	7
Total CSS imports:	1
Total Frames:	0
Total Iframes:	0

Download Times*

Connection Rate	Download Time
14.4K	629.13 seconds
28.8K	321.06 seconds
33.6K	277.06 seconds
56K	171.43 seconds
ISDN 128K	61.52 seconds
T1 1.44Mbps	17.21 seconds

*Note that these download times are based on the full connection rate for ISDN and T1 connections. Modem connections (56Kbps or less) are corrected by a packet loss factor of 0.7. All download times include delays due to round-trip latency with an average of 0.2 seconds per object. With 65 total objects for this page, that computes to a total lag time due to latency of 13 seconds. Note also that this download time calculation does not take into account delays due to XHTML parsing and rendering.

Page Objects

QTY	SIZE#	TYPE	URL	COMMENTS
1	106734	SCRIPT	http://www.scoreandsound.com/js/Copse_400.font.js	Header size = 320 bytes Up to 81732 bytes could have been saved through compression.
1	91512	IMG	http://www.scoreandsound.com/images/text2.jpg	Header size = 307 bytes Missing width attribute. Missing height attribute.
1	85925	SCRIPT	www.scoreandsound.com ... om/js/jquery-1.5.2.min.js	Header size = 319 bytes Up to 56111 bytes could have been saved through compression.
1	82273	IMG	http://www.scoreandsound.com/images/text1.jpg	Header size = 307 bytes Missing width attribute. Missing height attribute.
1	48551	CSS IMG	http://www.scoreandsound.com/images/bg_top2.jpg	Header size = 306 bytes
1	43055	CSS IMG	http://www.scoreandsound.com/images/bg_top3.jpg	Header size = 306 bytes
1	36597	CSS IMG	http://www.scoreandsound.com/images/bg_bot.jpg	Header size = 306 bytes
1	24698	CSS IMG	http://www.scoreandsound.com/images/bg_top1.jpg	Header size = 306 bytes
1	18271	CSS IMG	www.scoreandsound.com ... m/images/menu4_active.jpg	Header size = 306 bytes
1	18258	SCRIPT	http://www.scoreandsound.com/js/cufon-yui.js	Header size = 318 bytes Up to 10802 bytes could have been saved through compression.
1	18151	CSS IMG	www.scoreandsound.com ... m/images/menu2_active.jpg	Header size = 306 bytes
1	17894	CSS IMG	www.scoreandsound.com ... m/images/menu5_active.jpg	Header size = 306 bytes
1	17753	CSS IMG	www.scoreandsound.com ... m/images/menu3_active.jpg	Header size = 306 bytes
1	15772	CSS IMG	http://www.scoreandsound.com/images/menu4.jpg	Header size = 306 bytes
1	15749	CSS IMG	http://www.scoreandsound.com/images/menu2.jpg	Header size = 306 bytes
1	15624	SCRIPT	www.scoreandsound.com ... ry.fancybox-1.3.4.pack.js	Header size = 318 bytes Up to 10070 bytes could have been saved through compression.
1	15599	CSS IMG	http://www.scoreandsound.com/images/menu5.jpg	Header size = 306 bytes
1	15514	CSS IMG	http://www.scoreandsound.com/images/menu3.jpg	Header size = 306 bytes
10	15287	CSS IMG	www.scoreandsound.com ... /js/fancybox/fancybox.png	Header size = 305 bytes
1	14265	CSS IMG	http://www.scoreandsound.com/images/text.gif	Header size = 305 bytes
1	12150	IMG	http://www.scoreandsound.com/images/eslogan.gif	Header size = 305 bytes
2	10035	IMG	http://www.scoreandsound.com/images/logo.gif	Header size = 305 bytes
1	9689	SCRIPT	www.scoreandsound.com ... query.nivo.slider.pack.js	Header size = 317 bytes Up to 7093 bytes could have been saved through compression.
1	9650	CSS*	http://www.scoreandsound.com/css/style.css	Header size = 303 bytes
1	8494	CSS	www.scoreandsound.com ... jquery.fancybox-1.3.4.css	Header size = 303 bytes Up to 6727 bytes could have been saved through compression. View a formatted version of this CSS file
1	4853	CSS IMG	http://www.scoreandsound.com/images/textarea.gif	Header size = 304 bytes
1	4272	CSS IMG	http://www.scoreandsound.com/images/box_top.jpg	Header size = 305 bytes
1	2414	HTML	http://www.scoreandsound.com	Header size = 480 bytes Congratulations! This file was compressed. View a formatted version of this HTML file
1	Not found	CSS IMG	http://www.scoreandsound.com/css/js/PIE.htc	Header size = 273 bytes
1	2025	CSS IMG	http://www.scoreandsound.com/images/box_bot.gif	Header size = 303 bytes
1	1863	CSS IMG	http://www.scoreandsound.com/images/box2_top.gif	Header size = 303 bytes
1	1569	CSS IMG	http://www.scoreandsound.com/images/search.jpg	Header size = 304 bytes
1	1539	CSS IMG	www.scoreandsound.com ... om/images/footer_logo.gif	Header size = 303 bytes
1	1463	CSS IMG	www.scoreandsound.com ... m/images/menu1_active.gif	Header size = 303 bytes
1	1397	CSS IMG	www.scoreandsound.com ... images/bg_top3_repeat.jpg	Header size = 304 bytes
1	1280	CSS IMG	http://www.scoreandsound.com/images/menu1.gif	Header size = 303 bytes
1	1054	CSS IMG	http://www.scoreandsound.com/images/sign_up.gif	Header size = 303 bytes
1	1004	CSS IMG	www.scoreandsound.com ... es/marker_left_active.jpg	Header size = 304 bytes
1	953	CSS IMG	www.scoreandsound.com ... s/marker_right_active.jpg	Header size = 303 bytes
1	918	CSS IMG	http://www.scoreandsound.com/images/input2.gif	Header size = 302 bytes
1	904	CSS IMG	www.scoreandsound.com ... images/bg_top2_repeat.jpg	Header size = 303 bytes
1	859	CSS IMG	www.scoreandsound.com ... m/images/button2_left.gif	Header size = 302 bytes
1	840	CSS IMG	www.scoreandsound.com ... /images/button2_right.gif	Header size = 302 bytes
1	839	CSS IMG	www.scoreandsound.com ... /images/button1_right.gif	Header size = 302 bytes
1	833	CSS IMG	www.scoreandsound.com ... m/images/button1_left.gif	Header size = 302 bytes
1	833	CSS IMG	http://www.scoreandsound.com/images/box2_bot.gif	Header size = 302 bytes
1	810	CSS*	http://www.scoreandsound.com/css/reset.css	Header size = 301 bytes
1	690	CSS IMG	www.scoreandsound.com ... om/images/marker_left.jpg	Header size = 303 bytes
1	646	CSS IMG	http://www.scoreandsound.com/images/input.gif	Header size = 302 bytes
1	642	CSS IMG	www.scoreandsound.com ... m/images/marker_right.jpg	Header size = 303 bytes
2	418	CSS IMG	www.scoreandsound.com ... om/images/menu_border.gif	Header size = 302 bytes
1	398	CSS IMG	www.scoreandsound.com ... /images/bg_bot_repeat.jpg	Header size = 303 bytes
1	359	CSS IMG	http://www.scoreandsound.com/images/marker_1.gif	Header size = 302 bytes
1	346	CSS IMG	www.scoreandsound.com ... /images/bg_top_repeat.gif	Header size = 302 bytes
1	297	CSS IMG	http://www.scoreandsound.com/images/button2_bg.gif	Header size = 302 bytes
1	269	SCRIPT	http://www.scoreandsound.com/js/cufon-replace.js	Header size = 315 bytes Up to 123 bytes could have been saved through compression.
1	262	CSS IMG	http://www.scoreandsound.com/images/button1_bg.gif	Header size = 302 bytes
1	256	CSS*	http://www.scoreandsound.com/css/layout.css	Header size = 301 bytes
3	203	CSS IMG	www.scoreandsound.com ... s/fancybox/fancybox-x.png	Header size = 301 bytes
2	176	CSS IMG	www.scoreandsound.com ... s/fancybox/fancybox-y.png	Header size = 301 bytes
1	169	SCRIPT	http://www.scoreandsound.com/js/imagepreloader.js	Header size = 314 bytes Up to 41 bytes could have been saved through compression.
1	152	CSS IMG	http://www.scoreandsound.com/images/box_repeat.gif	Header size = 301 bytes
1	90	CSS IMG	www.scoreandsound.com ... om/images/box2_repeat.gif	Header size = 300 bytes
1	70	CSS IMG	www.scoreandsound.com ... ybox/fancy_title_over.png	Header size = 300 bytes
1	68	CSS IMG	http://www.scoreandsound.com/images/marker_2.gif	Header size = 300 bytes
1	49	CSS IMG	http://www.scoreandsound.com/images/line_hor1.gif	Header size = 300 bytes
1	46	CSS IMG	http://www.scoreandsound.com/images/line_ver1.gif	Header size = 300 bytes
1	43	CSS IMG	http://www.scoreandsound.com/js/fancybox/blank.gif	Header size = 300 bytes
65 ^	794955*		Total (^unique objects)

# Congratulations. This site is using HTTP compression, otherwise called content encoding using gzip. The sizes reported here are for compressed content sent from the server to the client.
* CSS alternate stylesheets may be referenced in the HTML but are not actually downloaded until they are needed and are therefore not included in the total page size.

Analysis and Recommendations

• TOTAL_HTML - Congratulations, the total number of HTML files on this page (including the main HTML file) is 1 which most browsers can multithread. Minimizing HTTP requests is key for web site optimization. Y
• TOTAL_OBJECTS - Warning! The total number of objects on this page is 65 which by their number will dominate web page delay. Consider reducing this to a more reasonable number. Above 20 objects per page the overhead from dealing with the actual objects (description time and wait time) accounts for more than 80% of whole page latency. See Figure II-3: Relative distribution of latency components showing that object overhead dominates web page latency in Website Optimization Secrets for more details on how object overhead dominates web page latency. Combine, refine, and optimize your external objects. Replace graphic rollovers with CSS rollovers to speed display and minimize HTTP requests. Consider using CSS sprites to help consolidate decorative images. Using CSS techniques such as colored backgrounds, borders, or spacing instead of graphic techniques can reduce HTTP requests. Replace graphic text headers with CSS text headers to further reduce HTTP requests. Finally, consider optimizing parallel downloads by using different hostnames or a CDN to reduce object overhead.
• TOTAL_IMAGES - Warning! The total number of images on this page is 56 , consider reducing this to a more reasonable number. Recommend combining, replacing, and optimizing your graphics. Replace graphic rollover menus with CSS rollover menus to speed display and minimize HTTP requests. Consider using CSS sprites to help consolidate decorative images. Use CSS techniques such as colored backgrounds, borders, or spacing instead of graphic techniques to reduce HTTP requests. Replace graphic text headers with CSS text headers to further reduce HTTP requests. Finally, consider optimizing parallel downloads by using different hostnames to reduce object overhead.
• TOTAL_CSS - Congratulations, the total number of external CSS files on this page is 1 . Because external CSS files must be in the HEAD of your HTML document, they must load first before any BODY content displays. Although they are cached, CSS files slow down the initial display of your page. Remember to place CSS files in the HEAD and JavaScript files at the end of the BODY to enable progressive display.
• TOTAL_SIZE - Warning! The total size of this page is 794955 bytes, which will load in 171.43 seconds on a 56Kbps modem. Consider reducing total page size to less than 100K to achieve sub 20 second response times on 56K connections. Pages over 100K exceed most attention thresholds at 56Kbps, even with feedback. Consider optimizing your site with Website Optimization Secrets, Speed Up Your Site or contacting us about our optimization services.
• TOTAL_SCRIPT - Warning! The total number of external script files on this page is 7 , consider reducing this to a more reasonable number. Combine, refactor, and minify to optimize your JavaScript files. Ideally you should have one (or even embed scripts for high-traffic pages) on your pages. Consider suturing JavaScript files together at the server to minimize HTTP requests. Placing external JavaScript files at the bottom of your BODY, and CSS files in the HEAD enables progressive display in XHTML web pages.
• HTML_SIZE - Congratulations, the total size of this HTML file is 2414 bytes, which less than 50K. Assuming that you specify the HEIGHT and WIDTH of your images, this size allows your HTML to display content in under 10 seconds, the average time users are willing to wait for a page to display without feedback.
• IMAGES_SIZE - Warning! The total size of your images is 547379 bytes, which is over 100K. Consider switch graphic formats to achive smaller file sizes (from JPEG to PNG for example). Finally, substitute CSS techniques for graphics techniques to create colored borders, backgrounds, and spacing.
• SCRIPT_SIZE - Warning! The total size of external your scripts is 236668 bytes, which is over 20K. Consider optimizing your JavaScript for size, combining them, and using HTTP compression where appropriate for any scripts placed in the HEAD of your documents. You can substitute CSS menus for JavaScript-based menus to minimize or even eliminate the use of JavaScript.
• CSS_SIZE - Caution. The total size of your external CSS is 8494 bytes, which is above 8K and less than 20K. For external files, ideally keep them less than 1160 bytes to fit within one higher-speed TCP-IP packet (or an approximate multiple thereof). Consider optimizing your CSS and eliminating features to reduce this to a more reasonable size.
• MULTIM_SIZE - Congratulations, the total size of all your external multimedia files is 0 bytes, which is less than 10K.

Scripts server-side

Desde el punto de vista del servidor tenemos que tener en cuenta el acceso a la información del modelo de datos. Para ello tendremos que realizar varios scripts de acceso.

Principalmente tenemos 5 scripts de servidor específicos para la gestión de la web:

1. chechUserOK.php (recibe por parametro el usuario y passwd y devuelve true o false si el usuario existe en BBDD)
2. closeSession.php (cierra la sesión PHP, libera la memoria del _SESSION)
3. getUsuario.php (recupera el nombre del usuario de la sesión)
4. insertNewProduct.php (recibe por parametro la info del producto y la inserta en BBDD)
5. insertNewUser.php (recibe por parámetro la info del usuario (registro) y la inserta en BBDD)

Así mismo, dentro de cada una de las páginas que conforman la web:

1. index.php (Home)
2. todas.php (Desglose de todo el producto)
3. voz.php (Desglose de la categoría Voz)
4. guitarra.php (Desglose de la categoría guitarra)
5. piano.php (Desglose de la categoría piano)

Tienen su propio código servidor que recoge de BBDD la información del producto especificado (en función de la página se filtra por la categoría de la misma) y en el caso de todas.php (no se realiza ningún filtro) La utilización del búscador nos redigirá a la página todas.php filtrando alguna de las características del producto (artista, nombre, categoría, usuario...) por el criterio de búsqueda.

Así mismo, gestionamos la persistencia de la sesión de BBDD mediante el objeto PHP llamado _SESSION. que generá una pequeña cookie phpsess en el explorador que encapsula el funcionamiento de las cookies desde php.

Scripts client-side

Para darle un poco de dinamismo a la página, he realizado ciertas funciones en el lenguaje javascript. La página web consta básicamente de 3 script principales basados en plug-ins javascript ya definidos:

1. Un carrousel (NivoSlider): En el mostraremos imágenes de promoción interna como hemos especificado al inicio, en la diagramación
2. Un modalBox (FancyBox): Un mecanismo que nos permitirá realizar login, registros y alta de productos de una manera estéticamente bonita y clara para el usuario final.
3. Ajax para las llamadas asíncronas de servidor en login registro y alta de producto.

 Así mismo, utilizamos código cliente para otros detalles, como comprobar que los formularios tienen todos los campos, que la contraseña y repetición de contraseña sea la misma o para redireccionar correctamente el buscador cuando hagan una búsqueda.

1) El carrousel queda de la siguiente manera:

Se le puede hacer clicks en las flechas y cambia de imagen dinámicamente.

2) El modalbox. Al hacer click en el botón de login, por ejemplo te sale la siguiente pantalla:

Dejando ennegrecida la página de fondo para no distraer.

3) finalmente el AJAX hace las peticiones desde el lado del cliente hacia el servidor, de manera que no hace falta recargar toda la página para obtener el OK del login.

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

Análisis de la competencia I

Siguiendo las instrucciones de la guía, haremos un análisis de la competencia.
Las tres webs similares son:

1. www.8notes.com
2. http://www.free-scores.com
3. http://www.sheetmusicplus.net

El análisis de la primera web (8notes.com) es el siguiente:

Título
Free sheet music on 8notes.com

URL
www.8notes.com

Módulos y submódulos que contiene
Contiene una página principal y 6 submódulos: Estilos, Instrumentos, Artistas, Extras, Miembros y Foro. Básicamente son categorías por las cuales se pueden encontrar las partituras. En Extras se puede encontrar información adicional sobre los instrumentos. En Miembros se pueden ver todos los usuarios registrados y Foro es un foro tradicional.

Indica qué tecnologías de cliente utilizan y para qué
Mediante el Firebug, he analizado los scripts de la página. No aparenta tener mucha interacción con el cliente siendo bastante estática la página web. He logrado percibir que en ciertos casos utiliza javascript para mostrar y cambiar los anuncios de la web.

Indica qué tecnologías de servidor utilizan y para qué
Para el lado del servidor he podido observar que utilizan el asp clásico de microsoft y lo utilizan para logearse y registrar nuevos usuarios, entre otras cosas.

Nivel de inmersión en el comercio electrónico:

Presencial - Información sobre la empresa
Es un portal web de descarga de partituras musicales y con cierto social media de usuarios registrados.

Presencial - Catálogo de productos o servicios
Poseen un único producto que es la subscripción al servicio de descarga de partituras y sólo se realiza a clientes particulares.


Venta B2C - Tipo
Comunidad Virtual

Venta B2C - Tipo de pago
 El método de pago es mediante tarjeta de crédito/débito y cuesta unos 20 dolares por año. A través de pasarelas visa y mastercard.

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 Reino Unido, 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 ciertas ideas sobre la organización del producto


Indica qué no te ha gustado, por qué y cómo lo cambiarías en tu web
Es una página bastante estática, sin mucha interacción con el cliente. Se intentará mejorar la presentación. También se intentará mejorar el producto, dado que este es bastante simple.

Selección del dominio

Una de las partes principales a la hora de empezar un proyecto de este estilo es la selección del dominio. Es una de las partes más creativas en la que uno tiene que decidir el cómo te encontrarán los futuros usuarios y será el conocimiento principal de tu marca.
El dominio seleccionado fue scoreandsound.com. A simple vista se puede ver que  incluye las palabras score y sound que significan partitura y sonidos en inglés. El hecho de que sea en inglés es por el hecho de la internacionalidad a la que apunta el proyecto. Y el nombre está claramente relacionado con la naturaleza del mismo. Este nombre fue seleccionado por que es facil de recordar, aunque cabe mencionar que dentro del ámbito músical es muy dificil encontrar nombres de dominio interesantes y requiere tiempo y pruebas.
Para la selección del nombre me he basado en las redes sociales existentes y en la limitación de los nombres ya registrados. Por ejemplo he probado soundbook (por facebook), sounder (por twitter) y varios similares como soundandsound (por 1&1), pero todos estaban cogido (y la mayoría en desuso)
A priori puede parecer que intentar copiar los nombres de las redes sociales existentes es una chorrada no innovadora, pero hay veces que no es conveniente reinventar la rueda. Si la gente está acostumbrada a esos nombres, para qué poner uno nuevo, no?

Desde el punto de vista más técnico, el dominio se registro con el registrador francés OVH con un plan de alojamiento que permita usar el phpMyAdmin y la gestión de base de datos básica necesaria. El coste del dominio + alojamiento es de 2 € por mes y permitirá empezar con comodidad (sin publicidad, etcétera) este proyecto.

Datos generales del proyecto

Para aclarar un poco las cosas, siguiendo la guía vamos a contestar el primer apartado de los datos generales del proyecto.

URL deseable para el proyecto
La URL será www.scoreandsound.com  (en la siguiente entrada hablaremos un poco sobre la selección de dominio)

Título del proyecto
El título sería Partituras y sonido que vendría a reflejar su naturaleza musical y pedagógica.

Tipo de web
La página pretende ser una red social de músicos.

Ambito de aplicación
Partiría localmente, pero apunta a ser internacional.
 
Perfil del usuario tipo
Tanto músicos experimentados, como novatos en período de aprendizaje. En función de la implicación con la red social los usuarios tendrán una determinada categoría (así como los foros actuales)

Sinopsis del proyecto
Red social musical de formación y aprendizaje. En el post anterior se explica un poco mejor la idea.

Idiomas previstos
Como en el ámbito de localidad, empezaría en español, pero acabaría extendiendose.

Lista de palabras clave
partitura, sonido, hoja musical, aprendizaje musical, partituras gratis, cursos guitarra gratis, cursos piano gratis, red social musica, aprender piano, aprender guitarra, piano tutorial, guitarra tutorial, bajo tutorial, batería tutorial, musica, armonía


No se ha utilizado ninguna herramienta, solo el sentido común para saber qué búsquedas podrían realizarse.




Descripción de la web para incorporar en la cabecera:
ScoreAndSound es una red social musical en la que podrás aprender con cursos y tutoriales a tocar instrumentos gracias a la ayuda de profesionales voluntarios de la música.

Partituras y música

Una de las actividades habituales en la interpretación es la búsqueda de partituras y de tutoriales que expliquen como deben tocarse dichas piezas para determinados instrumentos. Particularmente yo, como intento de músico, siempre he encontrado esta tarea tediosa por lo difícil que es encontrar esta información de manera sencilla y de calidad en la web. Siempre me he visto forzado a buscar tablaturas y partituras por un lado, subscribiéndome a mil páginas diferentes que me ofrecían miles de partituras que había que pagar y que no reflejaban la pieza tal y como corresponde en la realidad. Además, si la complejidad de la lectura suponía buscar un vídeo de la canción, debía recurrir a youtube a escuchar a gente que la mayoría de veces no seguían la partitura que tú habías obtenido anteriormente.
Por este motivo nace este proyecto. Como una forma totalizadora de organizar la información que necesita un músico para formarse. La idea reside en un único portal web, basádo en las nuevas tendencias sociales que aprovechan la iniciativa de la gente y su vocación por la música para facilitar que se encuentren partituras, tablaturas y vídeos. Es decir, nuestro producto se entendería como ente musical de aprendizaje que tendría -para cada instrumento- la partitura musical, los vídeos tutoriales de dicha partitura, la pieza tocada entera.
De la misma manera se podrán organizar cursos de aprendizaje de instrumentos que serían fáciles de encontrar y estarían de forma organizada, gratuitos, realizado por expertos de todas partes del mundo (con voluntad y vocación de enseñar)
En primera instancia lo harían de forma gratuita, pero más adelante para incentivar a hacer cursos de calidad, se les podría pagar un dinero en función de la cantidad de visitas del curso y posibles votaciones.
A priori, el modelo de negocio se sustentaría a base de publicidad, pero a medida que el proyecto vaya creciendo, podría acabar siendo una red social de músicos, y al ente musical de aprendizaje podrían agregarse exámenes que certificarían que un músico sabe tocar una pieza determinada, entonces personas que esten buscando grupo o clientes, podrían demostrar qué saben tocar.
Aunque ahora mismo todos son ideas y está un poco desorganizado....

Comienza el proyecto

El proyecto en cuestión es para la asignatura Tecnologías de la Información, optativa de la ingeniería superior en informática. El objetivo es práctico, realizar una aplicación web, abarcando todos los procesos desde el análisis del mercado (del propio proyecto y de la competencia) pasando por la diagramación, el diseño gráfico y la gestión del desarrollo y los contenidos, finalizando con la presupuestación económica del proyecto.

Para la correcta realización del proyecto vamos a seguir la guía que nos ha proporcionado la profesora y con la que paso a paso iremos desarrollando la aplicación.

¿De qué va el proyecto? Tratará sobre música. La idea básica es la creación de un portal que facilite a los músicos la obtención de partituras, tablaturas. Así como cursos gratuitos de formación a través de vídeos. La idea es aprovechar a la comunidad de músicos para que suban sus propias partituras y propios tutoriales de una forma organizada, que facilite su búsqueda y encuentro.