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.