Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP”
Abstract
[ES] En este proyecto se aborda la creación de un portal web, ofreciendo al usuario acceso a una serie de recursos multimedia relacionados con la figura de Luis Sánchez Polack “TIP”, tales como textos, imágenes, audios, vídeos, etcétera.
Full text
Escuela Técnica Superior de Ingeniería Informática Universitat Politècnica de València Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” Proyecto Final de Carrera Ingeniería Informática Autor: Francisco Javier Saiz García Director: Juan Vicente Oltra Curso 2015 - 2016
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 2
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 3 Resumen En este proyecto se aborda la creación de un portal web, ofreciendo al usuario acceso a una serie de recursos multimedia relacionados con la figura de Luis Sánchez Polack “TIP”, tales como textos, imágenes, audios, vídeos, etcétera. Palabras clave: web, TIP, divulgación Resum En este projecte s'aborda la creació d'un portal web, oferint a l'usuari accés a una sèrie de recursos multimèdia relacionats amb la figura de Luis Sánchez Polack "TIP", com ara textos, imatges, àudios, vídeos, etcètera. Paraules clau: web, TIP, divulgació Abstract In this project there is tackled the creation of a web portal, offering users access to a range of multimedia resources related to the figure of Luis Sánchez Polack "TIP", such as texts, images, audios, videos, etc. Keywords: web, TIP, divulgation
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 4
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 5 Índice 1. Objeto y objetivos ..................................................................................................... 13 2. Introducción ............................................................................................................. 14 2.1. Descripción del proyecto ...................................................................................... 14 2.2. Estructura del documento ..................................................................................... 16 3. Antecedentes ............................................................................................................. 18 3.1. Web sobre Tip de Juan Vicente Oltra .................................................................... 19 3.2. Especial “10 años sin Tip” en el archivo de RTVE ................................................ 20 3.3. Página de Luis Sánchez Polack en Wikipedia ........................................................ 21 3.4. Recopilación de discografía y bibliografía de Tip en el blog de Antonio Tausiet ...... 21 3.5. Ficha de Luis Sánchez Polack en IMDB ............................................................... 22 4. Análisis .................................................................................................................... 23 4.1. Especificación de requisitos ................................................................................ 23 4.2. Diagrama de casos de uso ................................................................................... 25 5. Diseño ...................................................................................................................... 26 5.1. Interfaz gráfica ................................................................................................... 26 5.1.1. Sección página principal .................................................................................. 28 5.1.2. Sección biografía ............................................................................................ 29 5.1.3. Sección multimedia ......................................................................................... 30 5.1.4. Sección texto ................................................................................................... 31 5.1.5. Sección documento ......................................................................................... 32 5.1.6. Sección imagen............................................................................................... 33 5.1.7. Sección audio ................................................................................................. 34
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 6 5.1.8. Sección vídeo ................................................................................................. 35 5.1.9. Sección hemeroteca ........................................................................................ 36 5.1.10. Sección obituario ............................................................................................. 37 5.1.11. Sección artículo .............................................................................................. 38 5.1.12. Sección contacto ............................................................................................. 39 5.2. Mapa de navegación ........................................................................................... 40 6. Implementación ........................................................................................................ 41 6.1. Alternativas de desarrollo ..................................................................................... 41 6.1.1. CMS .............................................................................................................. 42 6.1.1.1. WordPress .................................................................................................. 43 6.1.1.2. Joomla ........................................................................................................ 44 6.1.1.3. Drupal ........................................................................................................ 45 6.1.2. HTML + CSS + JavaScript .............................................................................. 46 6.2. Solución elegida ..................................................................................................47 6.2.1. ¿CMS o HTML? ..............................................................................................47 6.2.2. Comparación entre CMS y HTML ....................................................................47 6.2.3. Conclusiones y decisión tomada ...................................................................... 49 6.3. Tecnologías utilizadas ......................................................................................... 50 6.3.1. HTML5 .......................................................................................................... 50 6.3.2. CSS3 ............................................................................................................. 52 6.3.3. JavaScript ....................................................................................................... 54 6.4. Herramientas software empleadas ........................................................................ 56 6.4.1. Texto ............................................................................................................. 56 6.4.1.1. Notepad ++ .................................................................................................. 57 6.4.1.2. Microsoft Word .......................................................................................... 58 6.4.1.3. Adobe Reader ............................................................................................. 58 6.4.2. Imagen ........................................................................................................... 59 6.4.2.1. Gimp .......................................................................................................... 59 6.4.2.2. Paint ........................................................................................................... 60
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 7 6.4.3. Audio y vídeo .................................................................................................. 61 6.4.3.1. aTube Catcher .............................................................................................. 61 6.4.3.2. Miro Video Converter ................................................................................. 62 6.4.3.3. Online Video Converter ............................................................................... 63 6.4.3.4. Online Convert ........................................................................................... 63 6.4.3.5. Audacity ..................................................................................................... 64 6.4.3.6. Avidemux ................................................................................................... 65 6.4.3.7. VirtualDub ................................................................................................. 65 6.4.3.8. VLC Media Player ...................................................................................... 66 6.4.4. Navegadores web .............................................................................................67 6.4.4.1. Internet Explorer ..........................................................................................67 6.4.4.2. Mozilla Firefox ........................................................................................... 68 6.4.4.3. Google Chrome ........................................................................................... 68 7. Pruebas y validaciones ............................................................................................. 69 7.1. Validación de HTML5 ........................................................................................ 69 7.2. Validación de CSS3 ............................................................................................ 70 7.3. Compatibilidad con navegadores web ................................................................... 71 7.3.1. Compatibilidad con Internet Explorer ................................................................ 73 7.3.2. Compatibilidad con Mozilla Firefox ..................................................................74 7.3.3. Compatibilidad con Google Chrome .................................................................76 7.3.4. Resultados de la prueba de navegadores ............................................................ 77 7.4. Compatibilidad con diferentes resoluciones de pantalla ......................................... 78 7.4.1. Resolución 1366 x 768 .................................................................................... 78 7.4.2. Resolución 1280 x 768 .....................................................................................79 7.4.3. Resolución 1024 x 768 .....................................................................................79 7.4.4. Resolución 800 x 600 ...................................................................................... 80 7.4.5. Resultados de la prueba de resoluciones ........................................................... 80 8. Resultados y conclusiones ......................................................................................... 81 9. Bibliografía y referencias ......................................................................................... 83
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 8 9.1. Páginas web ....................................................................................................... 83 9.2. Recursos de audio ............................................................................................... 85 9.3. Recursos de vídeo ............................................................................................... 85 9.4. Recursos de artículos de prensa ........................................................................... 85 10. Anexos .................................................................................................................. 86 10.1. Anexo A. Propiedad intelectual ........................................................................ 86 10.1.1. Marco legislativo actual .................................................................................. 86 10.1.2. Derechos de autor ........................................................................................... 89 10.1.2.1. Derechos morales ........................................................................................ 89 10.1.2.2. Derechos de explotación .............................................................................. 90 10.1.2.3. Límites y excepciones .................................................................................. 91 10.2. Anexo B. Manual de usuario ............................................................................ 93 10.2.1. Página de inicio .............................................................................................. 93 10.2.2. Biografía ........................................................................................................ 94 10.2.3. Multimedia ..................................................................................................... 95 10.2.3.1. Texto .......................................................................................................... 96 10.2.3.2. Imagen ........................................................................................................97 10.2.3.3. Audio ......................................................................................................... 98 10.2.3.4. Vídeo ......................................................................................................... 99 10.2.4. Hemeroteca .................................................................................................. 100 10.2.5. Contacto ........................................................................................................ 102
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 9 Índice de Figuras Figura 1. Web sobre Tip de Juan Vicente Oltra - Página de inicio. ......................................... 19 Figura 2. Web sobre Tip de Juan Vicente Oltra - Mapa de navegación. ................................. 20 Figura 3. Especial “10 años sin Tip” en el archivo de RTVE. ............................................... 20 Figura 4. Página de Luis Sánchez Polack en Wikipedia. ........................................................ 21 Figura 5. Recopilación de discografía y bibliografía de Tip en el blog de Antonio Tausiet. ...... 21 Figura 6. Ficha de Luis Sánchez Polack en IMDB. .............................................................. 22 Figura 7. Diagrama de casos de uso. ................................................................................... 25 Figura 8. Boceto interfaz gráfica. ....................................................................................... 26 Figura 9. Boceto menú. ....................................................................................................... 27 Figura 10. Boceto copyright. ............................................................................................... 27 Figura 11. Boceto sección página principal. ........................................................................ 28 Figura 12. Boceto sección biografía. ................................................................................... 29 Figura 13. Boceto sección multimedia. ............................................................................... 30 Figura 14. Boceto sección texto. .......................................................................................... 31 Figura 15. Boceto sección documento. ................................................................................ 32 Figura 16. Boceto sección imagen. ..................................................................................... 33 Figura 17. Boceto sección audio. ........................................................................................ 34 Figura 18. Boceto sección vídeo. ........................................................................................ 35 Figura 19. Boceto sección hemeroteca. ............................................................................... 36 Figura 20. Boceto sección obituario. .................................................................................... 37 Figura 21. Boceto sección artículo. ..................................................................................... 38 Figura 22. Boceto sección contacto. .................................................................................... 39
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 16 2.2. Estructura del documento Obviamente, todo lo expuesto hasta ahora viene acompañado de la presente memoria del proyecto que recoge todas las fases del mismo, desde las tareas iniciales de consulta y búsqueda de información, pasando por etapas de análisis y diseño, hasta alcanzar su conclusión y posterior entrega. Este documento presenta los siguientes capítulos: Objeto y objetivos Propuesta del proyecto, donde se definen las motivaciones que conducen a su realización y los objetivos marcados “a priori” como necesarios para poder darse por finalizado. Introducción Breve descripción del proyecto, efectuada de manera bastante somera y sin entrar en demasiados detalles, remarcando ligeros matices que permitan hacerse una idea de lo que se va a obtener como resultado. Antecedentes Búsqueda de páginas web o portales similares ya existentes sobre Luis Sánchez Polack “Tip”, o que hagan algún tipo de mención a él, que puedan servir como punto de partida inicial. Análisis Este apartado comprende la especificación de todos los requisitos que debe cumplir el producto a desarrollar, así como la representación del sistema mediante diagramas de casos de uso. Diseño Sección dedicada a mostrar la apariencia de las distintas pantallas del portal a través de distintos bocetos de la interfaz gráfica y a establecer el flujo de navegación que se produce durante su ejecución.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 17 Implementación Exposición de diferentes alternativas para desarrollar el portal, argumentando por qué se elige una solución y no otra, enumerando las tecnologías utilizadas y mencionando las herramientas software empleadas, resaltando, además, aquellos detalles asociados al código fuente que se consideren de especial interés, aunque sin detenerse en exceso y evitando extralimitarse. Pruebas y validaciones Conjunto de pruebas que se efectúan para comprobar el correcto funcionamiento del sistema ante distintas situaciones, así como la validación de determinados estándares web. Resultados y conclusiones Valoración y comentario final del trabajo entregado, contemplando la inclusión de una lista de posibles ampliaciones o mejoras pendientes a realizar en un futuro. Bibliografía y referencias Fuentes de información consultadas para la realización del proyecto, ya sean libros, apuntes o páginas web, usadas tanto para la redacción de la memoria como para la adquisición de recursos multimedia que se hayan incorporado al portal. Anexos Espacio reservado para toda aquella información que complementa a algunos de los puntos expuestos en otros capítulos y que, fundamentalmente, por su extensión, se ha preferido dejar al final de la memoria.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 18 3. Antecedentes Antes de comenzar con el desarrollo de cualquier trabajo, independientemente del ámbito en que se enmarque, es importante localizar material existente sobre el tema a tratar. En el caso que nos ocupa, Luis Sánchez Polack “Tip” goza todavía de gran fama entre el público y mucha gente guarda un grato recuerdo de sus actuaciones, apariciones en televisión, intervenciones en programas de radio, etcétera. Por eso, a la hora de buscar en Internet se encuentra abundante información acerca de él, aunque, también es verdad, que la mayoría de lo hallado se reduce a artículos de prensa en hemerotecas de periódicos en su edición digital o publicaciones relacionadas con su fallecimiento. Sin embargo, en lo que respecta a portales web, páginas o blogs que dediquen totalmente su espacio, o bien, solo alguna sección a Tip, tanto en su vertiente personal como profesional, no son ya tan frecuentes. A continuación, se van a mencionar únicamente aquellos sitios web que, por diversos motivos, como, por ejemplo, la variedad de datos presentados, se hayan considerado más relevantes o de especial interés, indicando claramente, entre corchetes, la fuente de donde se ha extraído. Posteriormente, la dirección web o URL asociada, será convenientemente referenciada en el apartado de bibliografía de la presente memoria. En primer lugar, previo paso a una exposición algo más detallada y de manera individual de cada fuente, se va a realizar un listado general de todas ellas.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 19 Debido a la cantidad de contenido que muestra y al cariño con que se nota que ha sido elaborada, es preciso destacar, por encima del resto, la web sobre Tip de Juan Vicente Oltra. Además, que como ya se ha comentado anteriormente, se va a tomar como base, mejorando aquellos aspectos que se consideren oportunos, para implementar el portal web que se pretende conseguir como resultado al finalizar este proyecto. Por otra parte, entre los restantes sitios consultados se encuentran: Especial “10 años sin Tip” en el archivo de RTVE. Página de Luis Sánchez Polack en Wikipedia. Recopilación de discografía y bibliografía de Tip en el blog de Antonio Tausiet. Ficha de Luis Sánchez Polack en IMDB. 3.1. Web sobre Tip de Juan Vicente Oltra Creada por el profesor Juan Vicente Oltra y sin ningún tipo de interés comercial, tal y como se indica en la propia página de inicio [1]: Figura 1. Web sobre Tip de Juan Vicente Oltra - Página de inicio. Fuente: Captura de pantalla. A través de ella, se puede acceder a otras secciones, como biografía, textos de Luis Sánchez Polack en solitario, en coautoría con Joaquín Portillo “Top” o junto a José Luis
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 20 Coll, incluyendo una última página a modo de obituario, que recoge una esquela y distintos artículos de prensa aparecidos tras su fallecimiento: Figura 2. Web sobre Tip de Juan Vicente Oltra - Mapa de navegación. Fuente: Elaboración propia. 3.2. Especial “10 años sin Tip” en el archivo de RTVE Con motivo del décimo aniversario de su muerte, el archivo de RTVE incorpora una sección dedicada a Tip [2], donde se recogen varios vídeos con algunos de sus mejores momentos en televisión: Figura 3. Especial “10 años sin Tip” en el archivo de RTVE. Fuente: Captura de pantalla.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 21 3.3. Página de Luis Sánchez Polack en Wikipedia Artículo en la Wikipedia [3] que resume su biografía, desde sus inicios como actor, pasando por la formación del dúo con José Luis Coll, hasta llegar a su fallecimiento: Figura 4. Página de Luis Sánchez Polack en Wikipedia. Fuente: Captura de pantalla. 3.4. Recopilación de discografía y bibliografía de Tip en el blog de Antonio Tausiet Entrada en el blog de Antonio Tausiet [4] que repasa los discos grabados por Tip, en compañía de Joaquín Portillo “Top” o junto a José Luis Coll, así como los libros publicados por y sobre él: Figura 5. Recopilación de discografía y bibliografía de Tip en el blog de Antonio Tausiet. Fuente: Captura de pantalla.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 22 3.5. Ficha de Luis Sánchez Polack en IMDB IMDB es una base de datos online especializada en cine, bastante conocida, donde pueden consultarse diversos datos, como, por ejemplo, el reparto de una determinada producción cinematográfica. Si se realiza una búsqueda de Luis Sánchez Polack, se muestra su ficha [5], que incluye un listado con todas aquellas películas y programas de TV donde ha intervenido: Figura 6. Ficha de Luis Sánchez Polack en IMDB. Fuente: Captura de pantalla.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 23 4. Análisis La etapa de análisis del proyecto sirve de base para enunciar los contenidos y funcionalidades que va a presentar el portal web, sin entrar en detalles de diseño e implementación, que se abordarán más adelante. 4.1. Especificación de requisitos En primer lugar, se debe recordar que el propósito fundamental de este proyecto es lograr un portal web dedicado a la difusión de la figura de Luis Sánchez Polack “Tip”. Dicho espacio contará con una serie de secciones donde se organizará todo aquel contenido que se desee poner a disposición del usuario. Por otra parte, cabe señalar que se tratará de una página web sin ningún ánimo de lucro y que cumplirá rigurosamente la ley de propiedad intelectual, protegiendo, en todo momento, los derechos de su obra (consultar más información al respecto en el anexo correspondiente). El portal web se dividirá en varias secciones claramente diferenciadas: Biografía Área dedicada a presentar información sobre la vida personal y profesional de Luis Sánchez Polack “Tip”. Multimedia Archivo de recursos audiovisuales en distintos formatos (texto, imagen, audio y vídeo). Hemeroteca Espacio reservado a almacenar artículos y recortes de prensa. Contacto Página que muestra los datos necesarios para contactar con los administradores del portal.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 24 Como producto, la página web de Tip podrá ser visualizada por cualquier persona que tenga acceso a Internet, sin ningún tipo de limitación o restricción de seguridad. A los usuarios del portal se les ofrecerán las siguientes opciones: Consultar biografía Leer la biografía de Tip, donde se detallan aspectos de su vida personal y, también, de su trayectoria profesional. Visualizar textos Acceder al archivo multimedia para examinar una selección de textos humorísticos de diferentes épocas, escritos únicamente por Luis Sánchez Polack “Tip”, junto a Joaquín Portillo “Top” o en coautoría con José Luis Coll, incluyendo, además, varios relatos transcritos de sus intervenciones en programas de radio. Visualizar galería de fotos Acceder al archivo multimedia para contemplar imágenes de distintos momentos de su vida. Reproducir audios Acceder al archivo multimedia para escuchar algunas canciones que interpretó a lo largo de su carrera. Reproducir vídeos Acceder al archivo multimedia para ver determinados sketches de sus apariciones en televisión. Consultar recortes de prensa Acceder a la hemeroteca, donde existen artículos de prensa, publicados en varios periódicos o revistas, y una sección, denominada obituario, con noticias aparecidas tras su fallecimiento. Mostrar datos de contacto Permitir, a través de la dirección de correo electrónico que se facilita, ponerse en contacto con los administradores del portal, para poder dar su opinión o hacer llegar material audiovisual del que se disponga para que, en caso que se considere oportuno, incluirlo junto al resto de recursos multimedia.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 25 4.2. Diagrama de casos de uso Una manera de representar gráficamente los requisitos funcionales de un proyecto software es mediante el diagrama de casos de uso. En realidad, se trata de una herramienta que captura las acciones que un usuario puede realizar dentro de un sistema, pero evitando la jerga técnica, para que cualquier persona, independientemente de su nivel de conocimiento de programación, alcance a entender las interacciones que se producen dentro del mismo. A continuación, se muestra el diagrama de casos de uso del caso que nos ocupa: Figura 7. Diagrama de casos de uso. Fuente: Elaboración propia.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 32 5.1.5. Sección documento La interfaz gráfica correspondiente a la página, que incluye la transcripción de alguno de los textos de Tip en particular, presenta una estructura, cuya sección puede apreciarse en el esquema siguiente: Figura 15. Boceto sección documento. Fuente: Elaboración propia. De acuerdo con el boceto anterior, la página documento cuenta con: Un título, situado en parte superior de la misma, que permite identificar claramente el documento que se encuentra consultando el usuario. Un bloque de texto, donde se reproduce el documento en cuestión y que puede contener imágenes que ayuden a situar la acción, o simplemente se recurre a ellas para ilustrar la página, aunque no es indispensable que aparezcan. Un enlace, puesto bajo una línea de separación, que dirige el flujo de navegación hacia la página que ha sido visitada inmediatamente antes que la actual.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 33 5.1.6. Sección imagen La interfaz gráfica correspondiente a la página, que simula ser una galería de fotos, presenta una estructura, cuya sección puede apreciarse en el esquema siguiente: Figura 16. Boceto sección imagen. Fuente: Elaboración propia. Según el boceto anterior, en la página imagen se enumeran una serie de elementos, tales como: Un título de sección, situado en parte superior de la misma, que permite identificar claramente el punto donde se encuentra el usuario. Un carrusel de imágenes, ubicado justo a continuación, que visualiza una foto u otra, dependiendo de si se pulsa sobre la flecha anterior o siguiente. Asociado a esto, existe un pequeño cartel con la descripción de cada imagen, que varía en función de la foto que se muestre en pantalla. Un enlace, puesto bajo una línea de separación, que dirige el flujo de navegación hacia la página que ha sido visitada inmediatamente antes que la actual.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 34 5.1.7. Sección audio La interfaz gráfica correspondiente a la página, que sirve como índice de los audios, presenta una estructura, cuya sección puede apreciarse en el esquema siguiente: Figura 17. Boceto sección audio. Fuente: Elaboración propia. De acuerdo con el boceto anterior, la página audio cuenta con: Un título de sección, situado en parte superior de la misma, que permite identificar claramente el punto donde se encuentra el usuario. Una foto de portada, ubicada justo a continuación, que pretende establecer algún nexo o relación con la información que se muestra. Un listado de audios, donde se especifica su contenido de forma breve. Dichas pistas de sonido pueden ser reproducidas directamente desde la misma página, si así se desea, sin necesidad de utilizar ningún programa externo. Un enlace, puesto bajo una línea de separación, que dirige el flujo de navegación hacia la página que ha sido visitada inmediatamente antes que la actual.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 35 5.1.8. Sección vídeo La interfaz gráfica correspondiente a la página, que sirve como índice de los vídeos, presenta una estructura, cuya sección puede apreciarse en el esquema siguiente: Figura 18. Boceto sección vídeo. Fuente: Elaboración propia. Según el boceto anterior, en la página vídeo se enumeran una serie de elementos, tales como: Un título de sección, situado en parte superior de la misma, que permite identificar claramente el punto donde se encuentra el usuario. Una foto de portada, ubicada justo a continuación, que pretende establecer algún nexo o relación con la información que se muestra. Un listado de vídeos, donde se especifica su contenido de forma breve. Dichas grabaciones pueden ser reproducidas directamente desde la misma página, si así se desea, sin necesidad de utilizar ningún programa externo. Un enlace, puesto bajo una línea de separación, que dirige el flujo de navegación hacia la página que ha sido visitada inmediatamente antes que la actual.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 36 5.1.9. Sección hemeroteca La interfaz gráfica correspondiente a la página, que contiene la hemeroteca, presenta una estructura, cuya sección puede apreciarse en el esquema siguiente: Figura 19. Boceto sección hemeroteca. Fuente: Elaboración propia. De acuerdo con el boceto anterior, la página hemeroteca cuenta con: Un título de sección, situado en parte superior de la misma, que permite identificar claramente el punto donde se encuentra el usuario. Una foto de portada, ubicada justo a continuación, que pretende establecer algún nexo o relación con la información que se muestra. Un listado de artículos, donde se especifica su contenido de forma breve. Dichos documentos, generalmente, se presentan en formato PDF, ya que se han obtenido como resultado del escaneo de diversos periódicos o revistas. Un icono colocado en un espacio centrado y bien localizado, pensado para acceder fácilmente al apartado de obituario. Un enlace, puesto bajo una línea de separación, que dirige el flujo de navegación hacia la página que ha sido visitada inmediatamente antes que la actual.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 37 5.1.10. Sección obituario La interfaz gráfica correspondiente a la página, que incluye una esquela y un conjunto de artículos publicados tras su fallecimiento, presenta una estructura, cuya sección puede apreciarse en el esquema siguiente: Figura 20. Boceto sección obituario. Fuente: Elaboración propia. Según el boceto anterior, en la página obituario se enumeran una serie de elementos, tales como: Un título de sección, situado en parte superior de la misma, que permite identificar claramente el punto donde se encuentra el usuario. Una esquela, ubicada justo a continuación. Un listado de artículos, donde se especifica su título, autor, fecha y medio de publicación. Un enlace, puesto bajo una línea de separación, que dirige el flujo de navegación hacia la página que ha sido visitada inmediatamente antes que la actual.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 38 5.1.11. Sección artículo La interfaz gráfica correspondiente a la página, que incluye la transcripción de algún artículo de prensa en particular, presenta una estructura, cuya sección puede apreciarse en el esquema siguiente: Figura 21. Boceto sección artículo. Fuente: Elaboración propia. De acuerdo con el boceto anterior, la página artículo cuenta con: Un título, acompañado por el nombre del autor que lo ha escrito, además del medio de comunicación y su fecha de publicación, que permite identificar claramente el artículo que se encuentra consultando el usuario. Un bloque de texto, donde se reproduce el artículo de prensa en cuestión. Un enlace, puesto bajo una línea de separación, que dirige el flujo de navegación hacia la página que ha sido visitada inmediatamente antes que la actual.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 39 5.1.12. Sección contacto La interfaz gráfica correspondiente a la página de contacto presenta una estructura, cuya sección puede apreciarse en el esquema siguiente: Figura 22. Boceto sección contacto. Fuente: Elaboración propia. Según el boceto anterior, en la página contacto se enumeran una serie de elementos, tales como: Un título de sección, situado en parte superior de la misma, que permite identificar claramente el punto donde se encuentra el usuario. Un espacio reservado para mostrar la información de contacto, en este caso concreto, la dirección de correo electrónico. Un enlace, puesto bajo una línea de separación, que dirige el flujo de navegación hacia la página que ha sido visitada inmediatamente antes que la actual.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 40 5.2. Mapa de navegación Una vez que se ha mostrado con suficiente detalle el aspecto visual que presenta cada una de las secciones del portal mediante los bocetos anteriores, pueden consultarse, en este diagrama, las relaciones jerárquicas que existen entre ellas, así como el flujo de navegación que se produce durante su ejecución: Figura 23. Mapa de navegación. Fuente: Elaboración propia.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 41 6. Implementación La etapa de implementación repasa las distintas alternativas que existen para llevar a cabo el desarrollo del portal, comparando las características de cada una de dichas opciones y eligiendo, entre ellas, aquella que se considere más apropiada, argumentando las razones que conducen a tal decisión. Por otra parte, además, se aprovecha este apartado para enumerar las tecnologías utilizadas, así como las herramientas software empleadas durante la confección del presente proyecto. 6.1. Alternativas de desarrollo Cuando se piensa en la elaboración de un sitio web se deben tener en cuenta determinados factores que ayuden a decidir cómo abordar el problema y lograr una solución que responda a las expectativas generadas. En este punto solo se desean indicar las alternativas disponibles para implementar un portal web, al menos aquellas más comunes habitualmente. La comparación entre ellas y posterior argumentación de por qué se elige una y no otra se deja para más adelante (véase apartado 6.2.1. de este capítulo). En lo que a tecnología se refiere, hay dos vertientes bien diferenciadas: Seleccionar un sistema de gestión de contenidos, también conocido como CMS, para construir el portal web. Desarrollar la web a medida, partiendo desde cero, mediante la combinación de varios lenguajes: HTML, CSS y JavaScript.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 48 utilizan plantillas y distribuciones ya preparadas, invirtiendo, consecuentemente, menos horas de trabajo, por tanto, resultan, habitualmente, más económicos. Sin embargo, puede darse la situación que un cliente requiera alguna funcionalidad adicional, entonces, tanto el tiempo como el coste aumenten, debido a que sea preciso instalar módulos extra, por ejemplo. Se trata, pues, de un factor algo engañoso y de carácter bastante incierto. Además, otra cualidad a tener muy en cuenta es el diseño. Si se elige un CMS puede dar la sensación de algo ya visto, porque sean estructuras predefinidas o, simplemente, coincida el tema con otra página visitada anteriormente. Mientras que si se opta por un desarrollo a medida con HTML, es más probable que se consiga un diseño único y original, haciendo que el usuario se encuentre cómodo navegando por la web y que le resulte más atractivo, gracias a la identificación de dicha apariencia con el contenido que se muestra, así como la inclusión de animaciones, efectos, interfaces que interactúan con el puntero del ratón, etcétera. En lo relativo al volumen de la web y su frecuencia de actualización, si consta de muchas páginas y el refresco de cada una de ellas se produce en un corto espacio de tiempo, quizás sea interesante inclinarse por un CMS. Para portales web medianos o pequeños, cuyos contenidos no varíen diariamente, sería suficiente con un desarrollo a medida. Relacionado con lo anterior, es cierto que la consola de administración de cualquier CMS facilita la labor de publicación, no siendo necesarios grandes conocimientos de informática, al contrario de lo que sucede con los desarrollos hechos a medida con HTML, donde es imprescindible un manejo más especializado, pero a la hora de adaptar la plantilla, muchas veces hace falta modificar una multitud de ficheros y sí que se precisa de un perfil de trabajador más experto en programación, dependiendo, claro está, del grado de familiarización con la plataforma. La usabilidad es otra característica a valorar. Los desarrollos a medida suelen ser más fáciles de usar, en parte, porque han sido diseñados específicamente para cubrir aquellas necesidades que el cliente ha solicitado. Con los CMS ocurre que como pretenden abarcar un amplio abanico de posibilidades, incluyen funciones innecesarias y opciones que confunden al usuario, lo que complica su manejo, aumentando la curva de
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 49 aprendizaje y siendo indispensable una formación específica para sacarle un mayor provecho. Por último, existe mucha controversia en lo referente a seguridad. Hay posturas que aseguran que los CMS son menos seguros que los desarrollos a medida, y a la inversa. Lo que parece evidente es que, aunque los CMS suelen contemplar medidas de seguridad muy avanzadas, su uso generalizado y extendido hace que estén más expuestos a ataques de hackers, porque si se ha encontrado un agujero de seguridad en una página con determinado CMS, solo queda replicar el método de actuación para hacerse con su control. Por el contrario, como la programación de un sitio web hecho a medida con HTML es exclusiva para dicho espacio, se evita un beneficio posterior en caso de que alguien logre burlar las medidas de seguridad, ya que únicamente le sirve para esa vez. 6.2.3. Conclusiones y decisión tomada Dados los beneficios e inconvenientes de cada enfoque citados durante este apartado, se estima que ninguna de las alternativas es perfecta, en el sentido que para ciertos proyectos es mejor usar un CMS y para otros es preferible un desarrollo a medida, todo depende, claro está, de las necesidades del cliente. En el caso que nos ocupa, el portal web dedicado a la difusión de la figura de Luis Sánchez Polack “Tip”, siendo un espacio con pocas páginas, que no va a ser actualizado tan frecuentemente como un blog, bastante específico en determinados contenidos y sin funcionalidades estandarizadas propias de los CMS, parece sensato optar por una implementación desde cero mediante HTML. Asimismo, al poseer naturaleza académica en origen, aunque más adelante se publique con el fin que se detalla en los objetivos de la presente memoria, resultando gratuito en cuanto a precio de las tecnologías propuestas y cuyo desarrollador, además, no percibe ningún sueldo, lo que significa que la limitación económica no es un problema, y donde el tiempo tampoco es un factor determinante, se prefiere abordar dicha implementación de acuerdo a la solución que se considere más interesante profesionalmente hablando. Por todo lo argumentado hasta ahora, se concluye que cualquiera de las opciones es tan válida como otra, pero que se toma la decisión de realizar el desarrollo del portal a medida, combinando HTML, CSS y JavaScript, desestimando el uso de un CMS.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 50 6.3. Tecnologías utilizadas Para realizar el proyecto, partiendo desde cero, y así desarrollar el portal a medida, se han utilizado varios lenguajes, cuyo conjunto está formado, básicamente, por HTML, CSS y JavaScript. A continuación, se va a proceder a la explicación de cada una de estas tecnologías, comentando, en primer lugar, su definición y características más relevantes, para, posteriormente, detenerse y hacer especial hincapié en aquellas funcionalidades propias que se hayan incorporado a la web, siempre y cuando se estime conveniente. 6.3.1. HTML5 Figura 28. Logo de HTML5. Fuente: https://www.w3.org/html/ HTML, siglas en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Se considera el lenguaje web más importante siendo su invención crucial
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 51 en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado. El lenguaje HTML basa su filosofía de desarrollo en la diferenciación. Para añadir un elemento externo a la página (imagen, vídeo, script, entre otros.), éste no se incrusta directamente en el código de la página, sino que se hace una referencia a la ubicación de dicho elemento mediante texto. De este modo, la página web contiene solamente texto mientras que recae en el navegador web (interpretador del código) la tarea de unir todos los elementos y visualizar la página final. Al ser un estándar, HTML busca ser un lenguaje que permita que cualquier página web escrita en una determinada versión, pueda ser interpretada de la misma forma (estándar) por cualquier navegador web actualizado. [13] La quinta revisión de HTML (HTML5) establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos. Algunos de ellos son técnicamente similares a las etiquetas <div> y <span>, pero tienen un significado semántico, como, por ejemplo, <nav> (bloque de navegación del sitio web), <header> (cabecera) y <footer> (pie de página). Además, entre otras mejoras, añade etiquetas con códecs para mostrar los contenidos multimedia, tales como <audio> y <video>. Un ejemplo de su uso puede extraerse del código del proyecto: AUDIO EN HTML5 <audio id="audio_pepe_lui" controls> <source src="audios/pepe_lui.ogg" type="audio/ogg"/> <source src="audios/pepe_lui.mp3" type="audio/mpeg"/> Your browser does not support the audio element. </audio>
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 52 VÍDEO EN HTML5 <video width="320" height="240" controls> <source src="videos/vaso_agua.ogv" type="video/ogg"> <source src="videos/vaso_agua.mp4" type="video/mp4"> Your browser does not support the video tag. </video> 6.3.2. CSS3 Figura 29. Logo de CSS3. Fuente: https://www.w3.org/Style/CSS/ Hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje usado para definir y crear la presentación de un documento estructurado escrito en HTML o XML2 (y por extensión en XHTML). El World Wide Web Consortium (W3C) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores. La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación. La información de estilo puede ser definida en un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales con el elemento <style> o en cada etiqueta particular mediante el atributo style. [14]
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 53 Un ejemplo de su uso puede extraerse del código del proyecto: body { background-color: #D3D3D3; } a { text-decoration: none; } .menu { background-color: #000000; font-size: 12pt; font-weight: bold; margin-left: 18%; margin-right: 18%; padding: 12px; width: 64%; } .menu-item { color: #FFFFFF; } .seccion { background-color: #F5DEB3; margin-left: 18%; margin-right: 18%; padding: 12px; width: 64%; } .titulo_seccion { color: #993322; font-size: 24pt; font-weight: bold; } [ ... ]
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 54 6.3.3. JavaScript Figura 30. Logo de JavaScript. Fuente: https://www.w3.org/standards/webdesign/script JavaScript (abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico. Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas, aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo, en documentos PDF y aplicaciones de escritorio (mayoritariamente widgets) es también significativo. JavaScript se diseñó con una sintaxis similar a C, aunque adopta nombres y convenciones del lenguaje de programación Java. Sin embargo, Java y JavaScript tienen semánticas y propósitos diferentes. Todos los navegadores modernos interpretan el código JavaScript integrado en las páginas web. Para interactuar con una página web se provee al lenguaje JavaScript de una implementación del Document Object Model (DOM). [15]
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 55 Un ejemplo de su uso puede extraerse del código del proyecto: CARRUSEL DE IMÁGENES EN JAVASCRIPT var Fotos = new Array(); var Descrip = new Array(); var aux = 0; Fotos [0] = "imagenes/tip.jpg" Fotos [1] = "imagenes/tipColl.jpg" Fotos [2] = "imagenes/tipTop.jpg" Fotos [3] = "imagenes/luis_amparo.jpg" Descrip [0] = "TIP" Descrip [1] = "TIP Y COLL" Descrip [2] = "TIP Y TOP" Descrip [3] = "LUIS Y AMPARO" var V_max = Fotos.length; V_max = V_max-1; function siguiente () { if (aux == V_max){ aux = 0; } else{ aux = aux+1; } document.images.Galeria.src = Fotos[aux]; document.getElementById('descrip_foto').innerHTML = Descrip[aux]; } function anterior () { if (aux == 0){ aux = V_max; } else{ aux = aux-1; } document.images.Galeria.src = Fotos[aux]; document.getElementById('descrip_foto').innerHTML = Descrip[aux]; }
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 56 6.4. Herramientas software empleadas A la hora de implementar el proyecto, tanto en lo que estrictamente se refiere a desarrollo del portal como durante el proceso de elaboración de esta memoria, se han usado multitud de aplicaciones. Para conseguir un recorrido más ordenado por cada una de ellas y evitar posibles confusiones, se ha preferido agrupar dichos programas en cuatro categorías, de acuerdo a los elementos multimedia que intervengan: Texto. Imagen. Audio y vídeo. Navegadores web. Seguidamente, se va a proceder a listar cada una de estas herramientas software, dando una breve descripción, comentando para qué se ha utilizado y, en algún caso puntual, incluso puede que se faciliten los pasos necesarios para reproducir determinado comportamiento. 6.4.1. Texto Dentro de este bloque tienen cabida herramientas software relacionadas con la edición, el procesamiento y la visualización de textos. En concreto, se han empleado los siguientes programas: Notepad++ Microsoft Word Adobe Reader
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 57 6.4.1.1. Notepad ++ Figura 31. Logo de Notepad++. Fuente: http://notepad-plus-plus.org/ Notepad++ es un editor de texto, de código fuente libre y con soporte para varios lenguajes de programación, que se distribuye bajo los términos de la Licencia Pública General de GNU. De momento, solo está disponible su versión para Microsoft Windows. Se parece al Bloc de Notas en cuanto al hecho de que puede editar texto sin formato y de forma simple. No obstante, incluye opciones más avanzadas, tales como el resaltado de expresiones propias de la sintaxis del lenguaje de programación o marcado, que facilitan su lectura, pudiendo ser útiles para usuarios avanzados, como desarrolladores y programadores. Además, posee otras características a tener en cuenta, como, por ejemplo, que se pueden abrir varios documentos a la vez y organizarlos en pestañas, de manera similar a como actúan los navegadores web. Por otra parte, también señala los elementos de apertura y cierre correspondientes, tales como paréntesis, corchetes y llaves, para ayudar en su identificación y localización. En el proyecto se ha usado, fundamentalmente, para actualizar las páginas HTML, modificando aspectos tanto de su contenido como de su estructura, así como para editar los archivos con extensión css y js, que contienen las hojas de estilo y el código JavaScript, respectivamente.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 64 6.4.3.5. Audacity Figura 40. Logo de Audacity. Fuente: http://audacityteam.org/ Audacity es una aplicación informática multiplataforma libre, que se puede usar para grabación y edición de audio, distribuido bajo la licencia GPL. Entre sus características más destacadas se encuentran la grabación de audio en tiempo real, la edición de archivos de audio tipo Ogg Vorbis, MP3, WAV, AIFF, AU, LOF y WMP, así como la conversión entre formatos, la importación de archivos con extensión MIDI, RAW y MP3, la edición de pistas múltiples y la posibilidad de agregar efectos al sonido (eco, inversión, tono, etcétera). Por otra parte, además, permite usar plugins para aumentar su funcionalidad. En el proyecto, se ha usado, básicamente, para eliminar el ruido en determinadas pistas de audio.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 65 6.4.3.6. Avidemux Figura 41. Logo de Avidemux. Fuente: http://www.avidemux.org/ Avidemux es una aplicación libre diseñada para la edición y procesado de vídeo. Se trata de un proyecto abierto, donde muchas sugerencias de usuarios son puestas en práctica. Entre sus características más relevantes se incluyen el cortado y la adición de fragmentos de vídeo, la incorporación de filtros y la recodificación entre varios formatos. En el proyecto, se ha usado, fundamentalmente, para cortar secuencias de vídeo. 6.4.3.7. VirtualDub Figura 42. Logo de VirtualDub. Fuente: http://www.virtualdub.org/ VirtualDub es una herramienta libre para capturar vídeo y procesarlo, que se ejecuta en Microsoft Windows. Dispone de funciones muy avanzadas, es capaz de usar plugins
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 66 para añadir diferentes técnicas de procesado de vídeo, y puede trabajar con cualquier fichero AVI, independientemente del códec que use, mientras esté instalado. Tal y como se ha mencionado anteriormente, actúa de manera parecida a Avidemux, de hecho, comparten prácticamente las mismas funcionalidades, aunque existen ligeras diferencias entre uno y otro. 6.4.3.8. VLC Media Player Figura 43. Logo de VLC Media Player. Fuente: https://www.videolan.org/vlc/ VLC Media Player es un reproductor multimedia libre y de código abierto, desarrollado por el proyecto VideoLAN y distribuido bajo la licencia GPL. Es capaz de reproducir casi cualquier formato de video sin necesidad de instalar códecs externos y puede reproducir videos en formatos DVD, Bluray, a resoluciones normales, en alta definición o incluso en ultra alta definición o 4K. En el proyecto se ha usado para reproducir audios y vídeos.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 67 6.4.4. Navegadores web Dentro de esta sección se enumeran los distintos navegadores web que se han empleado para realizar las pruebas y comprobaciones de visualización del portal. En concreto, se trata de los siguientes: Internet Explorer Mozilla Firefox Google Chrome 6.4.4.1. Internet Explorer Figura 44. Logo de Internet Explorer. Fuente: http://windows.microsoft.com/ie Internet Explorer, usualmente abreviado como IE, es un navegador web desarrollado por Microsoft para el sistema operativo Microsoft Windows desde 1995. En el año 2015 se anunció que a partir de Windows 10 se sustituye por Microsoft Edge.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 68 6.4.4.2. Mozilla Firefox Figura 45. Logo de Mozilla Firefox. Fuente: https://www.mozilla.org/es-ES/firefox/ Mozilla Firefox, llamado simplemente Firefox, es un navegador web libre y de código abierto desarrollado para Microsoft Windows, Android, OS X y GNU/Linux. Está coordinado por la Corporación Mozilla y la Fundación Mozilla. Usa el motor Gecko para renderizar páginas web, que implementa actuales y futuros estándares web. 6.4.4.3. Google Chrome Figura 46. Logo de Google Chrome. Fuente: http://www.google.com/chrome Google Chrome es un navegador web desarrollado por Google y compilado basándose en varios componentes e infraestructuras de desarrollo de aplicaciones (frameworks) de código abierto, como el motor de renderizado Blink (bifurcación o fork de WebKit). Está disponible gratuitamente bajo condiciones específicas del software privativo o cerrado.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 69 7. Pruebas y validaciones Una vez finalizada la implementación del portal, llega el momento de evaluar y comprobar su correcto funcionamiento. Por esta razón, se va a analizar si el código cumple con los estándares básicos de la web y si, además, se obtiene una respuesta positiva tanto de su ejecución en diversos navegadores web como de su uso ante distintas resoluciones de pantalla. 7.1. Validación de HTML5 El World Wide Web Consortium (W3C) proporciona un servicio [19] donde se permite validar el código HTML: Figura 47. Validación de HTML5. Fuente: Captura de pantalla.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 70 Tras procesarse la petición, se aprecia cómo ha pasado el test satisfactoriamente, aunque se advierte que para el caso de HTML5 se trata todavía de una versión no estable del validador: Figura 48. Validación de HTML5 - Resultado. Fuente: Captura de pantalla. 7.2. Validación de CSS3 Del mismo modo, el W3C ofrece la posibilidad de validar las hojas de estilo CSS [20]: Figura 49. Validación de CSS3. Fuente: Captura de pantalla.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 71 Como resultado, se obtiene la calificación de válido para CSS3: Figura 50. Validación de CSS3 - Resultado. Fuente: Captura de pantalla. 7.3. Compatibilidad con navegadores web La idea de esta prueba es observar cómo se visualiza el portal en distintos navegadores web, ya que los usuarios tienen sus preferencias al respecto y cada uno puede inclinarse por alguno en concreto. Por tanto, para elegir sobre cuáles validar su compatibilidad, se ha tomado una estadística que recoge su porcentaje de uso durante el año 2015: Figura 51. Estadísticas de navegadores en 2015 - Datos numéricos. Fuente: http://www.w3schools.com/browsers/default.asp
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 72 Según los datos numéricos anteriores, extraídos de un estudio realizado por w3schools, los navegadores web más comúnmente utilizados son Google Chrome, Mozilla Firefox e Internet Explorer, por ese orden. Tras ellos figuran Safari y Opera, pero con una menor cuota de mercado. La misma información puede representarse mediante un gráfico: Figura 52. Estadísticas de navegadores en 2015 - Gráfico. Fuente: http://www.w3schools.com/browsers/default.asp De acuerdo con estos resultados, se ha decidido que únicamente se va a proceder a efectuar la comprobación del comportamiento del portal sobre los tres navegadores web más representativos, es decir, aquellos con mayor volumen de usuarios: Internet Explorer, Mozilla Firefox y Google Chrome. Por el contrario, Safari, Opera y otros navegadores web minoritarios quedan al margen de esta validación. Aparte de visualizar la página de inicio del portal, se ha optado por incluir en la prueba aquellas secciones que requieren una atención especial, como audio y vídeo, ya que se trata de dos nuevos componentes añadidos a la quinta versión del lenguaje HTML.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 73 7.3.1. Compatibilidad con Internet Explorer La página de inicio del portal, así como las secciones de audio y vídeo, se muestran de la siguiente manera en Internet Explorer: Figura 53. Prueba con navegador Internet Explorer - Página de inicio. Fuente: Captura de pantalla. Figura 54. Prueba con navegador Internet Explorer - Audio. Fuente: Captura de pantalla.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 80 7.4.4. Resolución 800 x 600 Figura 65. Prueba con resolución 800 x 600. Fuente: Captura de pantalla. 7.4.5. Resultados de la prueba de resoluciones Como puede comprobarse, el portal se comporta bastante bien ante diferentes resoluciones de pantalla, aunque es cierto que durante su desarrollo se ha priorizado su correcto funcionamiento para un tamaño de 1366 x 768 píxeles, debido a que se trata de las dimensiones de pantalla del ordenador portátil con que se ha implementado. De todos modos, se ha logrado una visualización suficientemente razonable a partir de pantallas con una resolución de 1024 x 768 píxeles, ya que, en todas ellas, los elementos de la página se ajustan a su anchura y en ningún momento se descoloca su contenido, es decir, logra mantener prácticamente intacta su estructura. La única resolución que se resiente ligeramente, puesto que incluso se reduce bruscamente el tamaño de los iconos, es aquella que corresponde a monitores antiguos (800 x 600 píxeles), pero también es cierto que son cada vez menos habituales.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 81 8. Resultados y conclusiones A lo largo de este proyecto y tras darlo por acabado, se ha creado el portal web dedicado a la difusión de la figura de Luis Sánchez Polack, también conocido como “Tip”, partiendo desde cero y realizando un desarrollo a medida mediante la utilización de diversos lenguajes, como HTML, CSS y JavaScript. Bien es cierto que en tareas de esta índole, tanto ante aplicaciones web como con cualquier otro tipo de software, siempre se está sujeto a cambios o modificaciones de última hora, pero también resulta evidente que en algún punto se deben fijar sus límites y la fecha de conclusión del mismo, puesto que tampoco es cuestión de alargarlo en exceso en el tiempo, al fin y al cabo existen ciertos plazos a cumplir en lo que respecta a la vertiente académica. Como valoración personal, aparte de servirme para obtener el título de Ingeniero Informático, considero que ha sido una grata experiencia y estoy bastante satisfecho con el resultado. De hecho, ya había trabajado anteriormente con tecnologías similares a éstas, pero desconocía las novedades que ofrecían las actuales versiones de dichos lenguajes, en lo que a contenido multimedia se refiere, principalmente, y gracias a este proyecto, he podido poner en práctica, por ejemplo, aspectos relacionados con la inclusión de audio y vídeo embebidos dentro de una página web, entre otras muchas características. Mientras que en lo que concierne a la consecución de los objetivos marcados al principio de esta memoria, teniendo en cuenta que se pretendía poner en marcha una plataforma de información sobre Tip, presentando recursos en múltiples formatos, y que se deseaba establecer una especie de comunidad colaborativa, donde cualquier usuario pudiera hacer llegar contenido a través de una dirección electrónico, con el propósito de que se publicara en el portal, puede afirmarse que se ha logrado en gran medida, aunque todavía queda faena por hacer, ya que solo se han sentado las bases. No obstante, es un buen comienzo, ya que se dispone de un espacio web que contiene textos transcritos, imágenes, pistas de audio, fragmentos de vídeo, etcétera.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 82 Además, presenta un diseño claro e intuitivo, ya que se ha organizado en distintas secciones, que recogen el material disponible, según una clasificación lógica, y se ha preparado dicho entorno para albergar una estructura que sea compatible con diversas resoluciones de pantalla, así como varios navegadores web, permitiendo su visualización frente a diferentes combinaciones o situaciones. Por tanto, en lo que atañe a la difusión de la figura de Luis Sánchez Polack, esta meta puede darse por válida, a falta de contratar un dominio y publicarlo en la web para que sea accesible a toda aquella persona que disponga de conexión a Internet, se tienen los elementos necesarios para que los datos de Tip y todo el conjunto de recursos multimedia puedan consultarse, de momento, en local, a modo de aplicación de escritorio. Sin embargo, tal vez, en ese sentido, queda pendiente de otorgar al portal un carácter más dinámico, pero resulta evidente que, una vez se haga lo que se comenta, se le sacará mucho más rendimiento y llegará de forma más sencilla a mucha más gente, permitiendo una cierta retroalimentación entre usuarios y administradores del sitio, incluyendo información o nuevo material a partir de los correos recibidos, siempre y cuando se estime oportuno. Y por último, se citan algunas mejoras o posibles ampliaciones a realizar en el futuro: Incorporar contenido adicional en todas y cada una de las secciones del portal. Averiguar por qué no se reproducen los vídeos en Internet Explorer y corregirlo, con tal de que funcione, como ocurre en Mozilla Firefox o Google Chrome. Contratar un dominio de Internet donde alojar el portal, proporcionando así un servicio más real, para que los fans y seguidores de Tip puedan establecer contacto con la plataforma, haciendo llegar su material por correo. Adaptar las hojas de estilo para los tamaños de pantalla de los nuevos dispositivos, como tablets y smartphones, lo que en informática se denomina diseño responsive.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 83 9. Bibliografía y referencias 9.1. Páginas web [1] Web sobre Tip de Juan Vicente Oltra http://personales.upv.es/jvoltra/luis/tipprimera/Luis.html [2] Especial “10 años sin Tip” en el archivo de RTVE http://www.rtve.es/television/diez-sin-tip/ [3] Página de Luis Sánchez Polack en Wikipedia https://es.wikipedia.org/wiki/Luis_S%C3%A1nchez_Polack [4] Recopilación de discografía y bibliografía de Tip en el blog de Antonio Tausiet http://seronoser.free.fr/tip/ [5] Ficha de Luis Sánchez Polack en IMDB http://www.imdb.com/name/nm0844766/ [6] Publicación de Miguel Ángel Álvarez en DesarrolloWeb http://www.desarrolloweb.com/articulos/que-es-un-cms.html [7] Artículo sobre WordPress en Wikipedia https://es.wikipedia.org/wiki/WordPress [8] Artículo sobre Joomla en Wikipedia https://es.wikipedia.org/wiki/Joomla [9] Artículo sobre Drupal en Wikipedia https://es.wikipedia.org/wiki/Drupal
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 84 [10] El uso de CMS como WordPress VS las ventajas del desarrollo web a medida https://www.interactivos.net/es/blog/991/el-uso-de-cms-como-wordpress-vs-lasventajas-del-desarrollo-web-a-medida [11] Desarrollo Web, ¿CMS tipo WordPress o programación tradicional? http://blog.nubelo.com/desarrollo-web-cms-tipo-wordpress-programacion-tradicional/ [12] Ventajas del desarrollo web a medida frente al uso de CMS populares (Joomla, WordPress, Drupal, etc.) https://www.latevaweb.com/desarrollo-a-medida-vs-estandar-cms.html [13] Artículo sobre HTML en Wikipedia https://es.wikipedia.org/wiki/HTML [14] Artículo sobre CSS en Wikipedia https://es.wikipedia.org/wiki/Hoja_de_estilos_en_cascada [15] Artículo sobre JavaScript en Wikipedia https://es.wikipedia.org/wiki/JavaScript [16] Manual de desarrollo para HTML http://www.w3schools.com/html/default.asp [17] Manual de desarrollo para CSS http://www.w3schools.com/css/default.asp [18] Manual de desarrollo para JavaScript http://www.w3schools.com/js/default.asp [19] Validación de HTML https://validator.w3.org/
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 85 [20] Validación de CSS https://jigsaw.w3.org/css-validator/ [21] Real Decreto Legislativo 1/1996, de 12 de abril https://www.boe.es/buscar/pdf/1996/BOE-A-1996-8930-consolidado.pdf 9.2. Recursos de audio Dame la manita Pepe Lui https://www.youtube.com/watch?v=_SdS5-Yw50o La flauta de Bartolo https://www.youtube.com/watch?v=xfeWaya10D4 Obdulia https://www.youtube.com/watch?v=K_YvJQhq1QA Doña Concha https://www.youtube.com/watch?v=vg5m_5GJSyg 9.3. Recursos de vídeo Cómo llenar un vaso de agua https://www.youtube.com/watch?v=wUDAVJm6r88 9.4. Recursos de artículos de prensa Tip y Coll debajo de su chistera http://hemeroteca.abc.es/nav/Navigate.exe/hemeroteca/madrid/abc/1975/07/27/138.html http://hemeroteca.abc.es/nav/Navigate.exe/hemeroteca/madrid/abc/1975/07/27/139.html http://hemeroteca.abc.es/nav/Navigate.exe/hemeroteca/madrid/abc/1975/07/27/140.html http://hemeroteca.abc.es/nav/Navigate.exe/hemeroteca/madrid/abc/1975/07/27/141.html
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 86 10. Anexos 10.1. Anexo A. Propiedad intelectual Este anexo está dedicado a repasar determinados aspectos acerca de las leyes que rigen la propiedad intelectual y exponer aquellas implicaciones que conllevan la publicación en Internet o, simplemente, el hecho de usar material con derechos de autor. Cabe recordar que, tal y como se indica en los requisitos del proyecto, el portal web dedicado a la difusión de la figura de Luis Sánchez Polack “Tip” es un espacio web sin ánimo de lucro y que cumple rigurosamente la ley de propiedad intelectual, protegiendo, en todo momento, los derechos de su obra. De hecho, se cuenta con la autorización expresa de sus propietarios. 10.1.1. Marco legislativo actual La normativa que permanece en vigor hoy día en España sobre propiedad intelectual está encabezada por el Real Decreto Legislativo 1/1996, de 12 de abril, por el que se aprueba el texto refundido de la Ley de Propiedad Intelectual, regularizando, aclarando y armonizando las disposiciones legales vigentes sobre la materia. Este decreto une las anteriores leyes sobre propiedad intelectual que se habían establecido durante la democracia desde el año 1987 e incluye las nuevas directivas europeas sobre propiedad intelectual, derogando las siguientes disposiciones: 1. Ley 22/1987, de 11 de noviembre, de Propiedad Intelectual. 2. Ley 20/1992, de 7 de julio, de modificación de la Ley 22/1987, de 11 de noviembre, de Propiedad Intelectual. 3. Ley 16/1993, de 23 de diciembre, de incorporación al Derecho español de la Directiva 91/250/CEE, de 14 de mayo, sobre la protección jurídica de programas de ordenador.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 87 4. Ley 43/1994, de 30 de diciembre, de incorporación al Derecho español de la Directiva 92/100/CEE, de 19 de noviembre, sobre derechos de alquiler y préstamo y otros derechos afines a los derechos de autor en el ámbito de la propiedad intelectual. 5. Ley 27/1995, de 11 de octubre, de incorporación al Derecho español de la Directiva 93/98/CEE, del Consejo, de 29 de octubre, relativa a la armonización del plazo de protección del derecho de autor y de determinados derechos afines. 6. Ley 28/1995, de 11 de octubre, de incorporación al Derecho español de la Directiva 93/83/CEE, del Consejo, de 27 de septiembre, sobre coordinación de determinadas disposiciones relativas a los derechos de autor y derechos afines a los derechos de autor en el ámbito de la radiodifusión vía satélite y de la distribución por cable. Otras referencias al respecto pueden encontrarse en: Ley 21/2014, de 4 de noviembre, por la que se modifica el texto refundido de la Ley de Propiedad Intelectual, aprobado por Real Decreto Legislativo 1/1996, de 12 de abril, y la Ley 1/2000, de 7 de enero, de Enjuiciamiento Civil. Ley 2/2011, de Economía Sostenible. Ley 14/2011, de 1 de junio, de la Ciencia, la Tecnología y la Innovación. Como propiedad intelectual se entiende que se trata de aquella propiedad que nace asociada a las creaciones de la mente humana o intelecto. Incluye: Los derechos de autor: obras artísticas, científicas o literarias. La propiedad industrial: patentes, marcas, modelos industriales, etc. De entre todos los artículos del Real Decreto Legislativo 1/1996, de 12 de abril, mencionado anteriormente, se destacan algunos de ellos, extrayéndose secciones o apartados de los mismos que se consideren más interesantes para el caso que nos ocupa:
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 88 Artículo 1. Hecho generador. La propiedad intelectual de una obra literaria, artística o científica corresponde al autor por el solo hecho de su creación. Artículo 2. Contenido. La propiedad intelectual está integrada por derechos de carácter personal y patrimonial, que atribuyen al autor la plena disposición y el derecho exclusivo a la explotación de la obra, sin más limitaciones que las establecidas en la Ley. Artículo 3. Características. Los derechos de autor son independientes, compatibles y acumulables con: 1. La propiedad y otros derechos que tengan por objeto la cosa material a la que está incorporada la creación intelectual. 2. Los derechos de propiedad industrial que puedan existir sobre la obra. Artículo 5. Autores y otros beneficiarios. 1. Se considera autor a la persona natural que crea alguna obra literaria, artística o científica. 2. No obstante, de la protección que esta Ley concede al autor se podrán beneficiar personas jurídicas en los casos expresamente previstos en ella. Artículo 10. Obras y títulos originales. Son objeto de propiedad intelectual todas las creaciones originales literarias, artísticas o científicas expresadas por cualquier medio o soporte, tangible o intangible, actualmente conocido o que se invente en el futuro. Acto seguido, después de recoger algunos artículos con definiciones más generales sobre propiedad intelectual, se agrupan en un conjunto, a modo de bloque temático, aquellos que hacen referencia directa a los derechos de autor de manera más específica.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 89 10.1.2. Derechos de autor Habitualmente, se suelen utilizar indistintamente los términos propiedad intelectual y derechos de autor, ya que ambos hacen referencia a los derechos que se le reconocen al autor de una obra. Tal y como se cita en el artículo 2 del decreto 1/1996, de 12 de abril, los derechos de autor pueden clasificarse en: Derechos personales o morales, que son irrenunciables e inalienables y pertenecen al autor. Derechos patrimoniales o de explotación, que permiten beneficios económicos y pueden cederse. 10.1.2.1. Derechos morales Según el artículo 14 del decreto, corresponden al autor los siguientes derechos irrenunciables e inalienables: Decidir si su obra ha de ser divulgada y en qué forma. Determinar si tal divulgación ha de hacerse con su nombre, bajo seudónimo o signo, o anónimamente. Exigir el reconocimiento de su condición de autor de la obra. Exigir el respeto a la integridad de la obra e impedir cualquier deformación, modificación, alteración o atentado contra ella que suponga perjuicio a sus legítimos intereses o menoscabo a su reputación. Modificar la obra respetando los derechos adquiridos por terceros y las exigencias de protección de bienes de interés cultural. Retirar la obra del comercio, por cambio de sus convicciones intelectuales o morales, previa indemnización de daños y perjuicios a los titulares de derechos de explotación. Acceder al ejemplar único o raro de la obra, cuando se halle en poder de otro, a fin de ejercitar el derecho de divulgación o cualquier otro que le corresponda.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 96 10.2.3.1. Texto La sección Texto sirve como índice de todos aquellos documentos escritos por Tip en solitario, junto a Top o en coautoría con José Luis Coll, presentando el siguiente aspecto: Figura 69. Portal web de Tip - Sección texto. Fuente: Captura de pantalla. Pulsando sobre el título de algún texto en particular se accede a su contenido: Figura 70. Portal web de Tip - Ejemplo de documento de texto. Fuente: Captura de pantalla.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 97 10.2.3.2. Imagen La sección Imagen pone a disposición del usuario diversas fotografías de Tip, presentando el siguiente aspecto: Figura 71. Portal web de Tip - Sección imagen. Fuente: Captura de pantalla. En dicha página puede contemplarse cómo se visualiza una determinada imagen de Tip acompañada de una breve descripción. A la hora de cambiar de foto, únicamente hay que pulsar cualquiera de las flechas de dirección y, entonces, tanto la imagen como la descripción adjunta variarán, logrando un efecto de galería o carrusel.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 98 10.2.3.3. Audio La sección Audio contiene una selección de archivos de audio donde interviene Tip, presentando el siguiente aspecto: Figura 72. Portal web de Tip - Sección audio. Fuente: Captura de pantalla. Para reproducir una determinada pista de audio, tan solo hay que escoger un elemento de la lista y apretar sobre el botón Play, sin necesidad de utilizar ningún programa externo, ya que, en condiciones normales, el navegador web se encarga de ello.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 99 10.2.3.4. Vídeo La sección Vídeo incluye una selección de archivos de vídeo donde interviene Tip, presentando el siguiente aspecto: Figura 73. Portal web de Tip - Sección vídeo. Fuente: Captura de pantalla. Para reproducir un determinado vídeo, tan solo hay que escoger un elemento de la lista y apretar sobre el botón Play, sin necesidad de utilizar ningún programa externo, ya que, en condiciones normales, el navegador web se encarga de su visualización.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 100 10.2.4. Hemeroteca La sección Hemeroteca recoge artículos de prensa que hacen referencia a Tip y que han sido extraídos de diversos medios de comunicación en forma escrita, como periódicos o revistas, presentando el siguiente aspecto: Figura 74. Portal web de Tip - Sección hemeroteca. Fuente: Captura de pantalla. La página está distribuida de tal manera que aparece un listado con los títulos de diferentes artículos, obtenidos mayoritariamente de hemerotecas digitales. Al seleccionar uno de ellos, se abre el correspondiente archivo en formato PDF, se muestra por pantalla la transcripción del texto o, directamente, se redirige a la dirección de Internet que esté asociada con dicho enlace. Por otra parte, también existe la alternativa de utilizar el icono que aparece en el espacio central de la página para navegar hasta la sección Obituario. Además, gracias a un icono situado en la parte inferior de la pantalla se puede volver a la página de inicio.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 101 Si se ha hecho clic sobre el icono comentado anteriormente, se accede a la sección Obituario, donde se pueden consultar noticias aparecidas en prensa tras el fallecimiento de Tip. Dicha página presenta el siguiente aspecto: Figura 75. Portal web de Tip - Sección obituario. Fuente: Captura de pantalla. Aunque en la imagen anterior no se aprecie del todo, puesto que el contenido sobrepasa el límite vertical de la pantalla y se necesita mover el scroll para visualizarlo por completo, bajo la esquela se listan varios artículos de prensa. Pulsando sobre el título de uno en concreto se accede a él: Figura 76. Portal web de Tip - Ejemplo de artículo de prensa. Fuente: Captura de pantalla.
Portal web dedicado a la difusión de la figura de Luis Sánchez Polack “TIP” 102 10.2.5. Contacto La sección Contacto presenta el siguiente aspecto: Figura 77. Portal web de Tip - Sección contacto. Fuente: Captura de pantalla. En dicha página, se facilitan los datos de contacto para que cualquier persona pueda intercambiar opiniones con el administrador de la página, solicitar información o hacer llegar material sobre Tip, para que, si se considera oportuno, publicarlo junto al resto de recursos. Además, gracias a un icono situado en la parte inferior de la pantalla se puede volver a la página de inicio.