Diseño de un portal web para la promoción de la empresa Kokoh Investigación, S.L. utilizando tecnología Ajax

UNIVERSIDAD POLITÉCNICA DE VALENCIA ESCUELA POLITECNICA SUPERIOR DE ALCOY Ingeniería Técnica de Informática de Gestión Diseño de un portal web para la promoción de la empresa Kokoh Investigación, S.L. utilizando tecnología AJAX PROYECTO FINAL DE CARRERA DIRIGIDO POR: D. Manuel Llorca Alcón REALIZADO POR: D. Juan Daniel Valor Miró Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy Página 2 de 105 PROYECTO FINAL DE CARRERA DIRIGIDO POR: D. Manuel Llorca Alcón REALIZADO POR: D. Juan Daniel Valor Miró EMPRESA: Kokoh Investigación, S.L. Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy Índice del Proyecto 1 - Introducción a la problemática 6 1.1 - Necesidades empresariales a cubrir.................................................................6 1.1.1 – Breve descripción de la empresa............................................................. 6 1.1.2 – Análisis de la situación actual...................................................................6 1.1.3 - Objetivos a alcanzar en la empresa..........................................................7 1.2 - Planificación Inicial del Proyecto......................................................................8 1.2.1 – Casos de Uso de la Página Web..............................................................8 1.2.2 – Modelo Conceptual de la Base de Datos................................................. 9 1.2.3 – Estructura Básica del Proyecto...............................................................11 1.3 – Introducción a las técnicas AJAX...................................................................12 1.3.1 - ¿Qué es AJAX y cuáles son sus ventajas?............................................12 1.3.2 – Librerías y Frameworks de AJAX........................................................... 13 2 – Desarrollo de la aplicación web 14 2.1 – Lenguajes de programación empleados....................................................... 14 2.1.1 – Programación de la Base de Datos con MySQL....................................14 2.1.2 – Programación del lado del Servidor con PHP........................................17 2.1.3 – Estructuras generadas en HTML............................................................20 2.1.4 – Aplicación de estilos mediante CSS.......................................................22 2.1.5 – Programación Interactiva con JavaScript...............................................23 2.2 – Componentes diseñados para la aplicación web.........................................25 2.2.1 – Traducción “al vuelo” con Google Ajax...................................................25 2.2.2 – Localización y mapeado mediante Google Maps...................................28 2.2.3 – Integración social mediante AddThis......................................................30 Página 3 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 2.2.4 – Efectos, animaciones y menús con Jquery............................................31 2.2.5 – Galería de Instalaciones con EasySlider y PHP....................................33 2.2.6 – Soporte propio para BBCode parcial......................................................35 2.3 – Infraestructuras de soporte en la web........................................................... 36 2.3.1 – Conexiones seguras mediante HTTPS.................................................. 36 2.3.2 – Análisis del tráfico mediante Google Analytics.......................................39 2.3.3 – Adaptación a la Ley de los Servicios de la Información.........................41 3 – Problemas en el desarrollo de la web 43 3.1 – Problemas de visualización en distintos navegadores...............................43 3.1.1 – Compatibilidad con Internet Explorer 6..................................................43 3.1.2 – Fallos en todos los navegadores............................................................45 3.1.2 – Compatibilidad con el nuevo CSS3........................................................46 3.2 – Problemas de Seguridad y Amenazas........................................................... 48 3.2.1 – Protección contra man-in-the-middle y eavesdropping..........................48 3.2.2 – Protección contra ataques XSS Indirectos.............................................48 3.2.3 – Protección contra ataques XSS Directos...............................................49 3.2.4 – Protección básica contra análisis del JavaScript...................................50 4 – Resultado final aprobado 51 4.1 – Estructura final de la página web...................................................................51 4.1.1 – Especificación general del contenido de la web.....................................51 4.1.2 – Diseño de la sección sobre la Empresa................................................. 54 4.1.3 – Adaptación de la sección de Instalaciones.............................................58 4.1.4 – Creación de una sección de Productos..................................................59 4.1.5 – Concepción y diseño de la plataforma de usuarios................................63 4.1.6 – Creación de una tienda virtual on-line....................................................68 Página 4 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 4.2 – Técnicas de promoción aplicadas..................................................................70 4.2.1 – Técnicas de posicionamiento SEO.........................................................70 4.2.2 – Técnicas de posicionamiento social.......................................................73 4.2.3 – Análisis del posicionamiento actual........................................................74 4.2.4 – Análisis de las visitas obtenidas en el periodo inicial.............................75 4.3 – Análisis de carga y tiempos de respuesta.....................................................78 4.3.1 – Análisis de la carga inicial de la web...................................................... 78 4.3.2 – Análisis de las cargas Ajax de la página.................................................80 5 – Conclusiones obtenidas del proyecto 81 5.1 – Conclusiones finales obtenidas..................................................................... 81 5.1.1 – Necesidades empresariales cubiertas....................................................81 5.1.2 – Conclusiones generales del proyecto.....................................................82 5.1.3 – Conclusiones académicas del proyecto................................................. 83 5.2 – Posibles mejoras futuras a aplicar.................................................................84 5.2.1 – Creación de presupuestos automatizados............................................. 84 5.2.2 – Adaptación estricta a todas las minusvalías...........................................86 5.2.2 – Seguimiento de peticiones Ajax..............................................................93 5.2.3 – Uso de microformatos para las noticias.................................................95 5.3 – Bibliografía y Anexos de interés.....................................................................96 5.3.1 – Bibliografía del proyecto......................................................................... 96 5.3.2 – Anexo: Pautas de accesibilidad WCAG 2.0...........................................97 5.3.3 – Anexo: Elección del proveedor de hosting.............................................99 5.3.4 – Anexo: Sistema de promoción Ad-Words.............................................100 5.3.5 – Glosario de Términos Técnicos............................................................102 Página 5 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 1 - Introducción a la problemática 1.1 - Necesidades empresariales a cubrir 1.1.1 – Breve descripción de la empresa Kokoh Investigación, S.L. es una empresa española formada por un equipo de especialistas multidisciplinares que abarcan la ingeniería industrial, física, electrónica y la luminotecnia. Su trabajo consiste en crear, diseñar, desarrollar y fabricar productos de alta calidad para la iluminación vial con tecnología LED. La iluminación led de Kokoh Investigación, S.L. incorpora el diseño de elementos innovadores, tanto mecánicos como electrónicos, que mejoran el rendimiento de las luminarias y a su vez aportan un mayor ahorro energético, con el consiguiente ahorro económico y reducción del impacto ambiental a nivel de emisiones de CO2 y de contaminación lumínica. Kokoh Investigación, S.L. ha instalado hasta la fecha en las poblaciones de Penáguila, Alcocer de Planes, Lorcha, Planes, Benilloba, Benialfaquí, Sella, Catamarruch, La Torre de les Maçanes, Benillup, Facheca, Famorca, Agres, Tollos, Tárbena y Villalonga, todas ellas en la Comunidad Valenciana. También en la Comunidad de Navarra en el pueblo de Lerín. Kokoh Investigación, S.L cuenta entre su partenariado tecnológico a distintas universidades con el fin de la actualización constante de técnicas e Investigación + Desarrollo. En la actualidad la compañía es especialista en Farolas Ornamentales y Equipos Luminarios para la iluminación vial rápida; destinadas a calles de circulación lenta, calles peatonales, etc. respetando la estética rústica del entorno. 1.1.2 – Análisis de la situación actual La empresa Kokoh Investigación, S.L. se mueve en diversos ámbitos; pero sin duda el más importante de todos ellos es el de la administración pública. Actualmente ha realizado ya diversos contratos con ella, y está a la espera de nuevas oportunidades de mejorar de forma real el alumbrado público de diversos municipios. Durante el proceso de selección de un concurso de instalación de alumbrado público expedido por la administración; diversos técnicos y especialistas revisan las propuestas de las diversas empresas (y a las propias empresas) para determinar cual de los mejores candidatos es el mejor para realizar dicha instalación. Sin duda, gran parte del esfuerzo de la empresa está focalizado en dar la imagen que le corresponde, como candidato más que sobresaliente para realizar dicha instalación. Por otro lado, en este proceso se evalúa no solo la propuesta formal realizada mediante las vías que la administración determina para ello; sino también a la empresa solicitante en sí. Para ello los técnicos de la administración reúnen la información necesaria de los medios adecuados (prensa, Internet, registros oficiales, históricos de contrataciones, etc) y la barajan para finalmente seleccionar el mejor candidato. Página 6 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy Cabe destacar que pese a que Kokoh Investigación, S.L. está más centrada en el ámbito de la administración pública, su actividad no se reduce a él. Sin embargo en otros ámbitos la empresa carece de una imagen de peso que le permita iniciar sus actividades a nivel industrial. Así pues, lo que la empresa necesita llegados a este punto, es una carta de presentación que sirva tanto a los técnicos de la administración como a los profesionales y potenciales clientes del sector. Dicha carta de presentación debe estar a todos los niveles posibles; y sin duda, el más importante es el digital. 1.1.3 - Objetivos a alcanzar en la empresa Kokoh Investigación, S.L. en conjunción con los expertos del sector ha determinado de muy crítica su presencia en el mundo de la red mediante el diseño de una página web empresarial. Los motivos son evidentes: •Vía más fácil y habitual de consulta de casi cualquier persona en prácticamente todos los lugares del mundo... •Gran cantidad de potenciales clientes que pese a la distancia pueden acceder a la información integra de la empresa... •Medio que dispone de gran interacción y versatilidad con el usuario; permitiendo una comunicación bidireccional... •Facilidad de actualización a medida que la actividad empresarial avance o cambie, pudiéndola especializar por sectores o áreas... •Alta disponibilidad de la información tanto temporal como geográficamente... Así pues, en el marco legal de las prácticas en empresa de la Universidad Politécnica de Valencia, Campus de Alcoy; la empresa solicita el diseño, creación y puesta en marcha de una página web empresarial dinámica que permita en todo momento a los potenciales clientes el acceso a la información que Kokoh Investigación, S.L. desee ofrecer. La página web deberá cumplir los siguientes requisitos: •Ser dinámica e interactiva para que el usuario sienta que está al día... •Ofrecer toda la información que Kokoh Investigación, S.L. desee ofrecer. •Debe poder soportar cambios futuros de forma que sea ampliable... •Deberá tener un diseño acorde a la actividad de la empresa reflejando su esencia. •Se realizarán técnicas de posicionamiento SEO y Social para su promoción. •Deberá responder a los criterios de la empresa y soportar múltiples idiomas. Por lo demás, se me permite establecer las tecnologías y metodologías a emplear en la construcción de la misma. El proceso de desarrollo estará controlado y supervisado por la propia empresa y debo atenerme a sus requerimientos que pueden verse modificado en el transcurso de las practicas. Página 7 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 1.2 - Planificación Inicial del Proyecto 1.2.1 – Casos de Uso de la Página Web Es necesario para realizar una aproximación inicial en recursos, tecnologías y tiempo, realizar un modelo básico de Casos de Uso en los que se especifique cuales van a ser los casos de uso más habituales de la página web; y a que secciones van a tener acceso los diferentes perfiles de usuarios que se contemplan. Página 8 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy Destacamos en primer lugar la existencia de cuatro perfiles diferentes que interactuarán con la página web. A continuación ofrezco una breve reseña de los mismos para un mejor entendimiento del diagrama: •Visitante: Usuario de la red que accede a la página web sin estar registrado ni tener ningún tipo de permisos explícitos. Este tipo de usuarios puede registrarse (pasando a ser Clientes) y/o consultar la información que se ofrece. También puede proporcionar su opinión sobre la misma... •Cliente: Visitante registrado y validado sin ningún permiso especial. Este tipo de usuarios puede consultar la información que se le ofrece y tiene ciertos privilegios de comunicación con la empresa para requerir información adicional si lo desea. Entre estos privilegios incluyen el poder (si lo dese) proporcionar su opinión... •Colaborador: Se trata de un visitante registrado con permisos especiales acreditados explicitamente por el Administrador. Aparte de todas las ventajas de ser un Cliente, también se le permite escribir opiniones técnicas que tendrán una relevancia e importancia mayor que las comunes... •Administrador: Se trata de un usuario especial que estará controlado por la empresa que tiene un poder total sobre la página web. Es capaz de gestionar de forma básica los contenidos de la página web, además de las opiniones técnicas., Por último, destacar que dicha clasificación permitirá personalizar la información ofrecida por la página web adaptándola a cada uno de los perfiles según convenga si fuese necesario... 1.2.2 – Modelo Conceptual de la Base de Datos Es necesario definir no solo los perfiles de entrada a la página web y las operaciones que dichos perfiles pueden realizar; sino también los datos que se sustentan dichas operaciones. Así pues, se ha de realizar un soporte en datos para las siguientes operaciones: •Visitante → Registrar sus Datos •Visitante, Cliente → Proporcionar su Opinión •Colaborador → Añadir Opinión Técnica •Administrador → Gestionar Opiniones Técnicas •Administrador → Gestionar las Noticias Destacar que la operación de Cliente, “contactar con la empresa”; se hará a petición expresa a través de e-mail; por lo que no necesita de ningún almacén de datos especifico. Por otro lado, en “Registrar sus Datos” no solo se desean guardar los datos del visitante, sino también de la empresa a la que pertenece... Así pues, contamos con 5 almacenes de datos muy claros, a los que añadimos dos más para marcar el nivel de permisos del usuario. Finalmente obtenemos el siguiente diagrama Entidad-Relación: Página 9 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy `titulo` varchar(50) collate utf8_unicode_ci NOT NULL default '', `contenido` text collate utf8_unicode_ci NOT NULL, `fecha` date NOT NULL default '0000-00-00', PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=0; CREATE TABLE IF NOT EXISTS `usuarios` ( `id` int(11) NOT NULL auto_increment, `email` varchar(30) collate utf8_unicode_ci NOT NULL default '', `clave` varchar(50) collate utf8_unicode_ci NOT NULL default '', `nombre` varchar(50) collate utf8_unicode_ci default NULL, `apellidos` varchar(50) collate utf8_unicode_ci default NULL, `dni` varchar(9) collate utf8_unicode_ci default NULL, `cargo` varchar(90) collate utf8_unicode_ci default NULL, `telefono` varchar(12) collate utf8_unicode_ci default NULL, `e_nombre` varchar(50) collate utf8_unicode_ci default NULL, `e_cif` varchar(9) collate utf8_unicode_ci default NULL, `e_direccion` varchar(90) collate utf8_unicode_ci default NULL, `e_ciudad` varchar(30) collate utf8_unicode_ci default NULL, `e_provincia` varchar(30) collate utf8_unicode_ci default NULL, `e_cp` varchar(5) collate utf8_unicode_ci default NULL, `e_pais` varchar(30) collate utf8_unicode_ci default NULL, `e_telefono` varchar(12) collate utf8_unicode_ci default NULL, `es_escritor` tinyint(1) NOT NULL default '0', `es_admin` tinyint(1) NOT NULL default '0', PRIMARY KEY (`id`), UNIQUE KEY `email` (`email`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=0; Cabe destacar la codificación utilizada en cada una de estas tablas que es unicode. De esta forma podemos guardar (para las futuras traducciones) cualquier tipo de carácter en la base de datos sin realizar conversiones entre codificaciones. Así pues, podemos guardar si así lo deseamos cualquier carácter ruso, chino o árabe. Con esto queda completamente definida la programación del almacén de datos de nuestra aplicación web que se encargará de retener y conservar todos los datos que se le indiquen desde la programación desde el lado del servidor. Página 16 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 2.1.2 – Programación del lado del Servidor con PHP PHP es un lenguaje de programación interpretado, diseñado originalmente para la creación de páginas web dinámicas. Es usado principalmente en interpretación del lado del servidor (server-side scripting) pero actualmente puede ser utilizado desde una interfaz de línea de comandos o en la creación de otros tipos de programas incluyendo aplicaciones con interfaz gráfica usando las bibliotecas Qt o GTK+. PHP es un acrónimo recursivo que significa PHP Hypertext Pre-processor (inicialmente PHP Tools, o, Personal Home Page Tools). Fue creado originalmente por Rasmus Lerdorf en 1994; sin embargo la implementación principal de PHP es producida ahora por The PHP Group y sirve como el estándar de facto para PHP al no haber una especificación formal. Publicado bajo la PHP License, la Free Software Foundation considera esta licencia como software libre. PHP es un lenguaje interpretado, diseñado especialmente para desarrollo web y que puede ser incrustado dentro de código HTML. Generalmente se ejecuta en un servidor web, tomando el código en PHP como su entrada y creando páginas web como salida. Durante el proceso de trasformación puede realizar llamadas a bases de datos o a otros sistemas que le aporten más información. PHP ha sido elegido para la programación del lado del servido, por la siguiente gran lista de ventajas que aporta al sistema y su facilidad de uso: •Es un lenguaje multiplataforma que se complementa bien con MySQL. •Completamente orientado al desarrollo de aplicaciones web dinámicas con acceso a información almacenada en una Base de Datos. •El código fuente escrito en PHP es invisible al navegador y al cliente ya que es el servidor el que se encarga de ejecutar el código y enviar su resultado HTML al navegador. Esto hace que la programación en PHP sea segura y confiable. •Capacidad de conexión con la mayoría de los motores de base de datos que se utilizan en la actualidad, destaca su conectividad con MySQL y PostgreSQL. •Capacidad de expandir su potencial utilizando la enorme cantidad de módulos (llamados ext's o extensiones). •Posee una amplia documentación en su página oficial, entre la cual se destaca que todas las funciones del sistema están explicadas y ejemplificadas en un único archivo de ayuda. •Es libre, por lo que se presenta como una alternativa de fácil acceso para todos. •Permite aplicar técnicas de programación orientada a objetos. •Biblioteca nativa de funciones sumamente amplia e incluida por defecto. •No requiere definición de tipos de variables aunque sus variables se pueden evaluar también por el tipo que estén manejando en tiempo de ejecución. •Tiene manejo de excepciones (desde PHP5) y se puede programar en OO. Página 17 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy Para ilustrar la estructura de desarrollo de la aplicación web, se ha desarrollado un pequeño esquema que explica gráficamente como va a ser construida esta parte del sistema. El esquema es el siguiente: Como se puede observar en la imagen; la programación del lado del servidor va a cubrir dos procesos bien diferenciados: 1. Servir una página principal cuando un usuario entre a visitar la página que le ofrecerá una pantalla completa con todos los menús, recursos, etc. 2. Servir pequeños cambios y fragmentos de información cuando el usuario realice una acción y active el motor AJAX que interactuará con el servidor... Por otro lado, todo el directorio INC y PAG estarán compuestos por ficheros PHP que darán servicio a estos dos procesos. La jerarquía de ficheros final es: /contacta.php /empresa.php /index.php /tecnologia.php /ssl/contacta.php /ssl/empresa.php /ssl/index.php /ssl/redireccion.php /ssl/tecnologia.php Página 18 de 105 Estos cinco ficheros son las entradas y la página de entrada (index.php) ilustradas en el dibujo superior... Estos ficheros forman la capa SSL realizada con PHP que se explicará mas adelante. Enmascaran las entradas. Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy /inc/borrar.php /inc/cabecera.php /inc/config.php /inc/flash.php /inc/menu.php /inc/pie.php /inc/recursos.php /pag/actualidad.php /pag/clientes.php /pag/clientes_no.php /pag/empresa.php /pag/instalaciones.php /pag/noticias.php /pag/productos.php /pag/clientes/articulo.php /pag/clientes/modificar.php /pag/clientes/registrar.php /pag/clientes/validar.php /pag/empresa/googlemaps.php /pag/empresa/menu_1.php /pag/empresa/menu_2.php /pag/empresa/menu_3.php /pag/empresa/menu_4.php /pag/empresa/menu_5.php /pag/empresa/ver_articulo.php /pag/instalaciones/galeria.php /pag/productos/fabrica.php /pag/productos/homologacion.php /pag/productos/instalacion.php Por último, por supuesto, todos estos ficheros contienen el código PHP necesario para dar funcionalidad y contenido a la página web que se está diseñando para la empresa española Kokoh Investigación, S.L. Dicho código no se incluye aquí pues es demasiado extenso (aproximadamente unas 1200 páginas) y carece de utilidad fuera de su propósito: Generar la página web que demanda el cliente en el lado del servidor. Página 19 de 105 En este directorio INC podemos encontrarnos los includes correspondientes a cualquiera de las páginas de entrada y el config.php... Estos ficheros que están en la raíz de PAG ilustran las secciones principales de la página web y contienen el código que les da contenido, forma y funcionalidad... Estos ficheros de PAG que están en subdirectorios ilustran las subsecciones y los apartados de las secciones generales anteriores. Cada una de estas páginas devuelve solo la información de los cambios (poco tamaño). Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 2.1.3 – Estructuras generadas en HTML HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir scripts (por ejemplo de Javascript), los cuales pueden afectar el comportamiento de navegadores web y otros procesadores de HTML. Por otro lado, HTML posee entidades que permiten representar cualquier tipo de carácter en la página web. Los caracteres especiales como signo de puntuación, letras con tilde o diéresis, o símbolos del lenguaje; se deben convertir en entidad HTML para mostrarse en un navegador. La siguiente es una lista de caracteres españoles y su correspondiente entidad HTML: Carácter Entidad HTML Carácter Entidad HTML á á Á Á é é É É í í Í Í ó ó Ó Ó ú ú Ú Ú ü ü Ü Ü ñ ñ Ñ Ñ ¡ ¡ ¿ ¿ Este lenguaje hoy por hoy es el más extendido y el que interpretan todos los navegadores web del mercado. El código HTML en la aplicación web va a ser generado por el código PHP del lado del servidor. El resultado es una mezcla de ambos, ilustrada en el siguiente ejemplo (imprime el titulo, representado por <h1></h1> solo si la variable $esBot de php es verdadera): <div id="cabecera"> <?php if($esBot==true){ ?> <h1>Kokoh Investigacion S.L. - Iluminacion LED y Alumbrado Publico</h1> <?php } ?> </div> Página 20 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy Por otro lado, la página web posee una estructura HTML básica que no cambia y dentro de ella, zonas que son las que van a cambiar mediante las peticiones realizadas al motor AJAX. A continuación ilustramos el esquema base de la estructura de la página web, sus partes y su visibilidad; que será explicada justo después de su representación gráfica, para una mejor comprensión: Las zonas en rojo del esquema contienen meta-información que no es visible para el usuario final. Las zonas en azul son simples contenedores sin información propia, y las zonas verdes son las partes que el usuario ve y que contienen la información que el usuario desea. El conjunto de todas las secciones forma una página web en HTML completa y funcional. En nuestro diseño, la sección que va a ser continuamente cambiada mediante llamadas al motor de Ajax será la marcada como Cuerpo. El resto de secciones o permanecerán invariables o sufrirán relativamente muy pocos cambios y en momentos muy determinados. Cabe destacar que aunque la sección de HEAD no sea visible, la información que posee representa un 80%-90% del peso (en Kb) de la página web. Sin embargo esta zona solo se cargará una única vez ya que las peticiones Ajax contienen solo la información que uno les pide. Así se ahorra mucha trasferencia al refrescar solo el contenido de la sección Cuerpo y no toda la página web (como se venía haciendo hasta ahora en la mayoría de páginas). Página 21 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 2.1.4 – Aplicación de estilos mediante CSS Las hojas de estilo en cascada (en inglés Cascading Style Sheets), CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) 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. Por ejemplo, el elemento de HTML <h1> indica que un bloque de texto es un encabezamiento. Versiones más antiguas de HTML permitían atributos extra dentro de la etiqueta abierta para darle formato (como el color o el tamaño de fuente). No obstante, cada etiqueta <h1> debía disponer de la información si se deseaba un diseño consistente para una página y, además, una persona que lea esa página con un navegador pierde totalmente el control sobre la visualización del texto. Cuando se utiliza CSS, la etiqueta <h1> no debería proporcionar información sobre como va a ser visualizado, solamente marca la estructura del documento. La información de estilo separada en una hoja de estilo, especifica cómo se ha de mostrar <h1>: color, fuente, alineación del texto, tamaño y otras características no visuales. En nuestro caso, utilizaremos una hoja de estilo externa, que cumplirá las siguientes características: •Precargará la información de todos los elementos de la aplicación web, se estén mostrando ya o vaian a ser mostrados tras una petición Ajax. •Contendrá toda la información que defina la presentación de la página web según los requisitos de la empresa... •Contendrá enlaces a las imágenes que formen parte de estos estilos (que estarán en la carpeta IMG del proyecto)... •Será compatible con todos los navegadores web utilizando los hacks correspondientes si estos son estrictamente necesarios... •Este fichero se llamara estilos.css y estará en el directorio HTML del proyecto... Un ejemplo del código CSS incluido en la aplicación web es el siguiente (no se muestra todo ya que es demasiado extenso): h2 { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; text-shadow:#777777 3px -3px 3px; } a, a:hover, a:link, a:active, a:focus { text-decoration:none; } Página 22 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 2.1.5 – Programación Interactiva con JavaScript JavaScript es un lenguaje de scripting orientado a objetos, utilizado para acceder a objetos en aplicaciones. Principalmente, se utiliza integrado en un navegador web permitiendo el desarrollo de interfaces de usuario mejoradas y páginas web dinámicas. JavaScript es un dialecto de ECMAScript y se caracteriza por ser un lenguaje basado en prototipos, con entrada dinámica y con funciones de primera clase. JavaScript ha tenido influencia de múltiples lenguajes y se diseñó con una sintaxis similar al lenguaje de programación Java, aunque más fácil de utilizar para personas que no programan. Todos los navegadores modernos interpretan el código JavaScript integrado dentro de las páginas web. Para interactuar con una página web se provee al lenguaje JavaScript de una implementación del DOM (árbol de estructura del navegador donde se carga el contenido del HTML)... La programación interactiva de la interfaz mediante JavaScript sigue el siguiente esquema básico: Como se puede comprobar, hay dos fases básicas: La carga inicial de la página (hecha por los métodos tradicionales) y la respuesta a los eventos realizada con JavaScript (programación interactiva del lado del cliente). Cabe destacar que no siempre será necesario realizar la segunda petición al servidor (solo si uno lo desea). Página 23 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy A continuación se va a ilustrar del esquema de programación interactiva utilizado en la aplicación web actual, que se divide en varios ficheros JavaScript (que estarán dentro del directorio HTML): •jquery.js: Este fichero contiene 71Kb de la librería Jquery v1.4 sin comprimir, que forma el framework básico de ejecución de nuestro código... •jquery.plugins.js: Este fichero contiene una recopilación de plugins para Jquery que lo dotan de funcionalidades más avanzadas y de filtros y efectos extras; los cuales se van a utilizar en el desarrollo de la aplicación web... •jquery.translate.js: Este fichero contiene el framework de traducción de Google mediante Jquery que permitirá implementar un sistema de traducción “al vuelo” en 54 idiomas diferentes... •scripts.php: Este fichero va a contener el código de nuestra aplicación web (todos los métodos y callbacks necesarios); y va a ser levemente modificado por el servidor dependiendo de diversos factores (de ahí su extensión php)... Así pues, mediante un código en la cabecera HEAD de la estructura HTML enviado en la primera carga similar al que se muestra a continuación; cargamos todo el código JavaScript en el navegador de forma adecuada: <script src="html/jquery.js" type="text/javascript"></script> <script src="html/jquery.plugins.js" type="text/javascript"></script> <script src="html/jquery.translate.js" type="text/javascript"></script> <script src="html/scripts.php" type="text/javascript"></script> Por otro lado, y aunque más adelante se adentrará más en detalle en el desarrollo de algunos de los componentes utilizados, comentar que Jquery pone a disposición del usuario una API muy completa con la que podemos realizar todo tipo de instrucciones. A modo ilustrativo, podemos realizar el siguiente código: $("#menu a").bind("mouseenter",function(e) { $(this).stop(false,true).animate({width: '180px'}, 300); }); $("#menu a").bind("mouseleave",function(e) { $(this).stop(false,true).animate({width: '160px'}, 300); }); Este código que se muestra a continuación crea dos CallBack para el texto que hay dentro de todos los elementos menu de la página. Concretamente uno al poner el cursor sobre él y el otro al quitarlo (sin hacer clic, pasando por encima). Cuando alguno de estos eventos sucedan, el elemento sobre el que ocurra cambiara, de forma animada, su anchura, creando un efecto de movimiento en el texto (no se aumenta la anchura del texto sino del elemento que lo contiene). Así de simple es utilizar Jquery y esta va a ser la base para el desarrollo interactivo de la aplicación web que se va a desarrollar para Kokoh Investigación, S.L. Página 24 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 2.2 – Componentes diseñados para la aplicación web 2.2.1 – Traducción “al vuelo” con Google Ajax En el pie de la página se ha diseñado un pequeño menú que traduce automáticamente la página web a tres idiomas (castellano, valenciano e ingles), utilizando la tecnología de Google Ajax Translation. Pese a que solo hay traducción a estos idiomas, es sumamente sencillo añadir 49 idiomas más una vez se ha adaptado la página web para el primero. Esta tecnología se basa en realizar peticiones al servidor de Google con la información que se desee traducir antes de mostrarla por pantalla al usuario final. Si contemplamos estas peticiones, el ciclo de la programación interactiva sería el siguiente: Página 25 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy •Menú Lateral de la Sección Empresa: Este menú lateral, poseerá un efecto de desplazamiento hacia la derecha, creado con la función animate, al pasar el ratón por encima de alguno de sus elementos. Por otro lado, dicho elemento fijará su tamaño y se volverá de color azul cuando se haga clic sobre él. El resultado es similar al mostrado a continuación: •Cambio entre dos secciones: Cuando se hace clic sobre un elemento del menú se produce un cambio de contenido. Este cambio de contenido va a ser animado con las funciones SlideDown y SlideUp; consiguiendo un efecto de enrollamiento y despliegue del contenido enviado mediante peticiones Ajax. •Este efecto está muy logrado y enmascara el poco tiempo que tarda en realizarse la petición Ajax, por lo que el contenido simplemente se enrolla y desenrolla instantáneamente y no causa sensación de carga en ningún momento de la misma... •Si por lo que fuese el servidor respondiese más lento, la animación se quedaría esperando con el contenido enrollado hasta que este estuviese preparado (entonces lo mostraría). Para evitar que el usuario crea que se ha bloqueado la página se ha añadido un indicador de carga en ese momento: •Menú Superior de la Sección de Instalaciones: Para este menú se opta por un deslizante inferior que se moverá sobre el elemento en el que se sitúe el ratón y se fijara sobre el que se haya echo click. Es de implementación similar al menú superior de la página web y de resultado parecido. Finalmente, destacar que se han realizado algunas animaciones más para cubrir ciertos detalles más de la página web; pero que al no ser de una importancia tan relevante como estos no se han incluido en este documento. Por otro lado, es necesario no olvidar que en la página web hay animaciones realizadas con otras técnologías. Página 32 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 2.2.5 – Galería de Instalaciones con EasySlider y PHP Una de las secciones requeridas por la empresa Kokoh Investigación, S.L. es una galería con las instalaciones que ha realizado la empresa dividas por ciudades. Para realizar esta galería, primero se ha establecido un menú superior en esa sección con las ciudades en las que se han realizado una instalación: Esta lista de ciudades se obtiene analizando los subdirectorios que contiene un directorio principal FTP, en el cual se gestiona esta sección, mediante el uso de técnicas de PHP. De esta manera, en realizad las secciones son subdirectorios y sus nombres, los nombres de ellos. El código PHP utilizado para realizar esta transformación es el siguiente: <?php $dir = @opendir("./instalaciones"); if($dir!=false){ while(false !== ($archivo=readdir($dir))) { if($archivo!="." && $archivo!=".." && is_dir("./instalaciones/". $archivo)){ ?> <li><a onclick="javascript:instalacionLink('pag/instalaciones/galeria.php? id=<?php echo $archivo;?>'); return false;"><?php echo $archivo;?></a></li> <?php } } } ?> Una vez diseñada esta parte, se realizará para cada sección un escaneo del subdirectorio para listar las imágenes de su interior, y montar de forma dinámica la galería con el contenido de los mismos. La parte del código de la galería que realiza esta acción concreta, se corresponde con el siguiente: <?php while(false !== ($archivo=readdir($dir))) { if($archivo!="." && $archivo!=".."){ ?> <li><a><img src="<?php echo $seccion."/".$archivo;?>"/></a></li> <?php } } ?> Página 33 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy Por otro lado, cabe destacar el estilo que se le da al usuario de esta galería; que se ha diseñado utilizando el plugin para Jquery llamado EasySlider. Este plugin permite realizar galerías de imágenes de forma sencilla y personalizable. En nuestro caso el resultado final ha sido el siguiente: De esta imagen podemos extraer varia conclusiones de la personalización aplicada al plugin EasySlider, y del diseño realizado mediante CSS de sus elementos: •En la parte inferior se muestran las miniaturas de las imágenes disponibles en esa sección; estando marcada en azul la imagen actual... •En la parte superior se ve la imagen en grande, que cambia con un efecto de empuje hacia la izquierda (la imagen se ha tomado a mitad de la transición). •En un principio la transición de imágenes es automática cada 8 segundos, aunque este comportamiento cesa si seleccionamos una imagen del menú inferior. Así pues, el resultado final es una galería que se genera automáticamente y que además presenta un estilo que no tienen nada que envidiar a las presentaciones de diapositivas de escritorio... Página 34 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 2.2.6 – Soporte propio para BBCode parcial Existen diversos formularios en la página web que permiten una interacción más profunda con el usuario permitiéndole añadir comentarios, opiniones, etc. Para enriquecerlos más aún se ha añadido para dichos formularios, soporte para un BBCode parcial mediante PHP y Ajax... En primer lugar, se ha realizado un parser de BBCode en PHP que permite traducir el BBCode a HTML cuando se solicita la información al servidor. Se trata de una función muy simple en PHP: function bbCode($texto){ $rep1=array("\n","[i]","[/i]","[b]","[/b]","[u]","[/u]","[img]","[/img]","[* ]","[list]","[/list]","[quote]","[/quote]","[code]","[/code]"); $rep2=array("<br/>","<em>","</em>","<strong>","</strong>","<u>","</u>","<img src=\"","\"/>","<li>","<ul>","</ul>","«","»","«","»"); return str_replace($rep1,$rep2,$texto); } Lo que hace esta función es sencillo, traduce los caracteres del primer Array por los del segundo en la cadena que se le pase como argumento. En el primer Array están los códigos BBCode soportados, y en el segundo su equivalencia en HTML. En segundo lugar, un usuario normal de Internet no conoce el lenguaje BBCode; por lo que se ha optado por diseñar una botonera encima de los cuadros de texto, que introduzcan automáticamente estos códigos al hacer clic. De esta forma se le dan potencia a los formularios, haciéndolos más amigables para el usuario final. El resultado de dicho diseño es el siguiente: De esta forma, cualquier usuario puede insertar código BBCode de forma automatizada y sin necesidad de conocer este lenguaje especial que fue diseñado inicialmente para este tipo de necesidades y que en nuestro caso ha resultado ser realmente muy útil. Por supuesto, el uso de estos botones utiliza técnicas de manipulación de datos Ajax, y no recarga absolutamente nada de la página web. Página 35 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 2.3 – Infraestructuras de soporte en la web 2.3.1 – Conexiones seguras mediante HTTPS A día de hoy y más que nunca, la seguridad es un factor importantisimo en el desarrollo de cualquier aplicación informática. Así pues, hay una serie de riesgos que son necesarios evitar en cualquier aplicación que, como esta, posea una trasmisión de datos por la red: •Análisis de la información enviada al servidor a través de los formularios y las peticiones para obtener información personal del usuario que visita la página web. •Análisis de los protocolos de trasmisión de datos utilizados en las llamadas al motor de Ajax para obtener información del servidor y descubrir fallos. •Técnicas de “man in the middle” para suplantar ciertas partes de la página web mostrando al usuario información alterada y falsa. Para ayudar a solucionar estos tres grandes fallos de seguridad en las transmisiones de datos del protocolo HTTP; se ha optado por utilizar una estrategia PKI mostrando finalmente la página bajo el protocolo HTTPS. La idea principal de HTTPS es la de crear un canal seguro sobre una red insegura. Esto proporciona una protección razonable contra ataques eavesdropping y man-in-themiddle, siempre que se empleen métodos de cifrado adecuados y que el certificado del servidor sea verificado y resulte de confianza. La confianza inherente en HTTPS está basada en una Autoridad de certificación superior que viene pre-instalada en el software del navegador (Es el equivalente a decir "Confío en la autoridad de certificación (p.e. VeriSign/Microsoft/etc.) para decirme en quien debería confiar"). Sin embargo una conexión HTTPS a un website puede ser validada si y solo si todo lo siguiente es verdad: Página 36 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy •El usuario confía en la Autoridad de certificación para dar fe solo para websites legítimos sin nombres engañosos. •El website proporciona un certificado válido (y un certificado inválido muestra una alerta en la mayoría de los navegadores), lo que significa que está firmado por una autoridad confiable. •El certificado identifica correctamente al website (visitando https://algunsitio.com y recibiendo un certificado para "AlgunSitio S.A." y no AlgunZitio S.A.") Cada uno de los nodos involucrados en Internet son dignos de confianza, o que el usuario confíe en que la capa de cifrado del protocolo (TLS o SSL) es inquebrantable por un eavesdropper. En nuestro caso, la empresa de hosting que utilizamos (Nominalia Internet, S.L.) provee de una salida bajo un servidor seguro que posee el siguiente certificado: Los datos de este certificado se pueden observar en la imagen; pero cabe destacar que el cifrado es muy alto (AES 256bits) y que por tanto es prácticamente imposible interceptar los mensajes que se intercambian el cliente con el servidor. Cabe destacar que la salida sobre servidor seguro se hace bajo un subdominio del dominio sserver.es, por lo que la empresa pierde el nombre de dominio que ella solicita y desea poseer... Para solucionar este problema, se ha optado por realizar una página de marcos que posea en su interior un único marco que lo ocupe todo y que haga referencia a este servidor seguro. De esta forma, al conectarte a la página web, lo que en realidad se Página 37 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy realiza es una conexión HTTP al dominio seguro y por lo tanto toda la comunicación se cifra de la misma forma que si se accediera de forma normal. De esta forma este problema queda solucionado, a la vez que utilizamos el protocolo seguro de transmisión web HTTPS. Sin embargo, aunque la conexión sigue cifrada, en ninguno de los navegadores actuales se muestra el conocido candado en la barra de direcciones; pudiendo confundir a algún usuario avanzado. Por otro lado, al usar ciertas librerías comentadas anteriormente; se producía una advertencia muy molesta al acceder a la página web, que indicaba lo siguiente: Advertencia: Esta página incluye contenido no seguro que puede poner en peligro su privacidad. Este mensaje puede deberse a que se ha intentado realizar una suplantación de identidad sobre la página web. Este error estaba causado por el hecho de incluir las librerías desde servidores remotos bajo el protocolo HTTP; por lo que la solución ha consistido en incorporar las versiones seguras de esas librerías (ya sean externas o internas) para evitar que el navegador una vez reciba la página por HTTPS realice petición alguna por HTTP. Una vez logrado esto, el soporte de las conexiones seguras mediante HTTPS ha sido completado con éxito y está actualmente en funcionamiento, con un éxito rotundo y un logro en la seguridad de los visitantes. Página 38 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 2.3.2 – Análisis del tráfico mediante Google Analytics Google Analytics es un servicio gratuito de estadísticas de sitios web. Ofrece información agrupada según los intereses de tres tipos distintos de personas involucradas en el funcionamiento de una página: ejecutivos, técnicos de marketing y webmasters. Se pueden obtener informes como el seguimiento de usuarios exclusivos, el rendimiento del segmento de usuarios, los resultados de la campaña de marketing, el marketing de motores de búsqueda, las pruebas de versión de anuncios, el rendimiento del contenido, el análisis de navegación, los objetivos y proceso de redireccionamiento o los parámetros de diseño web. Este producto se desarrolló en base a la compra de Urchin (hasta entonces la mayor compañía de análisis estadístico de páginas web) por parte de Google. Se comienza añadiendo un código JavaScript a cada una de las páginas que se desea analizar, al que se denomina GATC (Google Analytics Tracking Code). Este carga algunos archivos desde los servidores Google y monitoriza para luego enviar toda esta información al servidor Google y almacenarla en la cuenta de cada usuario. Para funcionar, el GATC carga un archivo más grande desde el servidor web de Google, y luego asigna a las variables con el número de cuenta del usuario. El archivo más grande (actualmente conocido como ga.js) es típicamente de 18 KB en tamaño y solo se descarga una vez al comienzo de la visita, ya que se almacenará en la caché durante el resto de la sesión. Como todos los sitios web que implementan Google Analytics con el código de ga.js usan el mismo archivo maestro de Google, un visitante que anteriormente hubiera visitado cualquier otro sitio con este código implementado también tendrá el archivo en el caché de su máquina. El resultado es que el aumento del tiempo de carga de la página al incluir el código es mínima. El resultado de este servicio es la evaluación sencilla mediante informes de lo que ocurre cada momento en la página web. A continuación se ilustran los resultados de la aplicación de esta técnica en la página web de Kokoh Investigación, S.L.: Página 39 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy También se pueden ver informes personalizados mostrando ciertos datos relevantes de las visitas de la página: O por ejemplo, algo muy interesante: El informe de las páginas de acceso a nuestra página web; que nos permite evaluar diversos aspectos de la misma: Página 40 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 2.3.3 – Adaptación a la Ley de los Servicios de la Información La Ley de servicios de la sociedad de la información y del comercio electrónico tiene como objeto la regulación del régimen jurídico de los servicios de la sociedad de la información y de la contratación por vía electrónica. El criterio para determinar si un servicio o página web está incluido dentro del ámbito de aplicación de la Ley es si constituye o no una actividad económica para su prestador. Todos los servicios que se ofrecen a cambio de un precio o contraprestación están, por tanto, sujetos a la nueva Ley. Sin embargo, el carácter gratuito de un servicio no determina por sí mismo que no esté sujeto a la Ley. Existen multitud de servicios gratuitos ofrecidos a través de Internet que representan una actividad económica para su prestador (publicidad, ingresos de patrocinadores, etc.) y, por lo tanto, estarían incluidos dentro de su ámbito de aplicación. Ejemplos de estos servicios serían los habituales buscadores, o servicios de enlaces y directorios de páginas web, así como páginas financiadas con publicidad o el envío de comunicaciones comerciales. Los prestadores de servicios deben indicar en su página web: •Su nombre o denominación social y datos de contacto: Domicilio, dirección de correo electrónico y cualquier otro dato que permita una comunicación directa y efectiva, como por ejemplo un teléfono o un número de fax. •Si la empresa está registrada en el Registro Mercantil o cualquier otro registro público, deberá señalar también el número de inscripción que le corresponda. •Su NIF completo y válido con el que se realizó el registro mercantil. •Información sobre el precio de los productos, indicando si incluye o no los impuestos aplicables, gastos de envío y cualquier otro dato que deba incluirse en cumplimiento de normas autonómicas aplicables. La normativa española se aplicará a los contratos que los consumidores celebren con prestadores establecidos en España. El lugar de establecimiento en España de un prestador de servicios debe estar indicado en su página web y puede comprobarse mediante consulta al Registro Mercantil u otro en que el prestador esté inscrito. En general, la LSSI no se aplica a las Administraciones Públicas, puesto que éstas no tienen el carácter de prestador de servicios de la sociedad de la información definido en su anexo. De esta forma, determinadas actividades típicas de las Administraciones, como la gestión electrónica de la recaudación de tributos o la información sobre los servicios de un tercero (como podría ser la mera información en la página web de un Ayuntamiento sobre las casas rurales existentes en el término municipal) se consideran como actividades públicas o de interés general distintas a la "actividad económica" a la que se refiere la LSSI. Sin embargo, cuando la actividad de una Administración sí tenga un carácter económico (por ejemplo, la venta de libros turísticos por una entidad pública dependiente de un Ayuntamiento), le será aplicable la LSSI. Página 41 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 3.2 – Problemas de Seguridad y Amenazas 3.2.1 – Protección contra man-in-the-middle y eavesdropping La protección contra estos dos tipos de ataques ha sido descrita y detallada en la sección 2.3.1 llamada “Conexiones seguras mediante HTTPS”; y consiste en utilizar el cifrado de los datos mediante el protocolo HTTPS. Para una descripción más detallada consultar de nuevo la sección citada... 3.2.2 – Protección contra ataques XSS Indirectos Su nombre original es "Cross Site Scripting", y es abreviado como XSS para no ser confundido con las siglas CSS, (hojas de estilo en cascada). Las vulnerabilidades de XSS originalmente abarcaban cualquier ataque que permitiera ejecutar código de "scripting", como VBScript o JavaScript, en el contexto de otro sitio web (y recientemente esto se podría clasificar más correctamente como "distintos orígenes"). Estos errores se pueden encontrar en cualquier aplicación que tenga como objetivo final, el presentar la información en un navegador web. El problema está en que usualmente no se validan correctamente los datos de entrada que son usados en cierta aplicación. Esta vulnerabilidad puede estar presente de forma directa (también llamada persistente) o indirecta (también llamada reflejada). •Indirecta (Reflejada): este tipo de XSS consiste en modificar valores que la aplicación web utiliza para pasar variables entre dos páginas, sin usar sesiones y sucede cuando hay un mensaje o una ruta en la URL del navegador, en una cookie, o cualquier otra cabecera HTTP (en algunos navegadores y aplicaciones web, esto podría extenderse al DOM del navegador). Si nos centramos en la protección contra ataques XSS indirectos, hay que tener en cuenta que no hay posibilidad de realizar este tipo de ataques cuando se utilizan técnicas Ajax ya que la barra de direcciones permanece inalterada. Lo máximo que se podría realizar sería simular las peticiones Ajax al servidor con valores que puedan provocar una vulnerabilidad. Para acabar con esto basta colocar filtros en los $_GET de PHP, para que determinen que valores exactamente pueden pasarse y cuales no. Un ejemplo podría ser: <?php $seccion = 1; if(isset($_GET["sec"])) { if($_GET["sec"]==2) $seccion = 2; else if($_GET["sec"]==3) $seccion = 3; } ?> Así pues, defender una página web realizada en Ajax de ataques XSS indirectos es relativamente sencillo, como se ha podido comprobar. Página 48 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 3.2.3 – Protección contra ataques XSS Directos Su nombre original es "Cross Site Scripting", y es abreviado como XSS para no ser confundido con las siglas CSS, (hojas de estilo en cascada). Las vulnerabilidades de XSS originalmente abarcaban cualquier ataque que permitiera ejecutar código de "scripting", como VBScript o JavaScript, en el contexto de otro sitio web (y recientemente esto se podría clasificar más correctamente como "distintos orígenes"). Estos errores se pueden encontrar en cualquier aplicación que tenga como objetivo final, el presentar la información en un navegador web. El problema está en que usualmente no se validan correctamente los datos de entrada que son usados en cierta aplicación. Esta vulnerabilidad puede estar presente de forma directa (también llamada persistente) o indirecta (también llamada reflejada). •Directa (Persistente): este tipo de XSS comúnmente filtrado, consiste en invadir código HTML peligroso en sitios que así lo permiten; incluyendo así etiquetas como lo son <script> o <iframe>. Para solucionar este problema grave que suele hacerse mediante ataques en los formularios (ya que si comentas, lo que escribes se añade al HTML de la página) basta con filtrar los $_POST de PHP con la siguiente función; diseñada específicamente para solucionar esta tipo de ataques: function limStr($texto){ $texto = utf8_decode($texto); $texto = stripslashes($texto); $texto = htmlentities($texto); $texto = utf8_encode($texto); return($texto); } Una vez definida esta función en PHP bastará con utilizarla de la siguiente forma para limpiar la entrada de posibles ataques XSS Directos mediante el uso de cuanlquier formulario de la página web: $rs = mysqli_query($conex,"SELECT clave, es_escritor, es_admin FROM usuarios WHERE email LIKE '".limStr($_POST["email"])."'"); Una vez realizado esto con todas las variables $_POST de PHP los ataques XSS Directos no van a ser ya posibles (salvo si hubiese alguna vulnerabilidad en el porpio código de PHP, que no es el caso). Página 49 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 3.2.4 – Protección básica contra análisis del JavaScript El código de las aplicaciones JavaScript, al igual que el resto de contenidos de las páginas web, está disponible para ser accedido y visualizado por cualquier usuario. Con la aparición de las aplicaciones basadas en AJAX, muchas empresas han desarrollado complejas aplicaciones cuyo código fuente está a disposición de cualquier usuario. Aunque se trata de un problema casi imposible de solucionar, existen técnicas que minimizan el problema de que se pueda acceder libremente al código fuente de la aplicación. La principal técnica es la de ofuscar el código fuente de la aplicación. El código javascript es ejecutado en el lado del cliente por lo que el navegador lo descarga y queda visible al visitante. Normalmente no tiene que pasar nada pero en algunos casos es posible encontrar información valiosa sobre una página leyendo sus ficheros javascript, por ello, existen métodos y programas para ofuscar nuestro código, haciendo un poco más difícil su interpretación humana, ya que la ejecución por parte del navegador sigue siendo la misma. Los ofuscadores utilizan diversos mecanismos para hacer casi imposible de entender el código fuente de una aplicación. Manteniendo el comportamiento de la aplicación, consiguen ensuciar y dificultar tanto el código que no es un problema el que alguien pueda acceder a él. Al ofuscar el código se obtienen cosas como la siguiente: function c(g){var m=0;while(m<g.length){var r=g[m];r.l=d(r.n,r.o);if(r.j==true){ r.k=e(r.n,r.o,r.l);}else{r.k=0;}r.t=f(r.l+r.k);m++;}} Como vemos es muy complicado, pero no imposible, saber que hace este programa. Sin embargo la cosa se lía mucho más cuando el código JavaScript contiene algunos cientos de lineas, haciéndolo prácticamente ilegible. Al sustituir todos los nombres de las variables y de las funciones por nombres de una sola letra, es prácticamente imposible comprender el código del programa. En ocasiones, también se utilizan ofuscadores de este tipo con el propósito de reducir el tamaño del código fuente. Además de aplicaciones comerciales específicamente diseñadas para ofuscar código JavaScript, también se pueden utilizar las herramientas que minimizan el tamaño de los scripts. Eliminando los comentarios y reduciendo el nombre de todas las variables, los programas que minimizan el tamaño de los scripts también consiguen ofuscar su código. Página 50 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 4 – Resultado final aprobado 4.1 – Estructura final de la página web 4.1.1 – Especificación general del contenido de la web La página web final posee seis grandes secciones principales, de las cuales pende el resto del contenido de la misma. A continuación se ha diseñado un diagrama que muestra las diferentes secciones y las dependencias de acceso entre ellas. Página 51 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy Como se puede comprobar, hay muchas secciones en la página web, algunas más complejas que otras, pero todas relacionadas de forma jerárquica. En este caso, se carga primero la página de bienvenida con el menú principal, y desde ahí se muestran los posibles accesos a otras secciones. Cabe destacar que el menú principal representado en la primera sección, permanece disponible en todas las demás, por lo que es posible siempre volver a partir desde el principio (estés en la sección que estés). Con este diagrama se representa bastante bien que secciones y su jerarquía tiene la página web; pero es necesario también conocer su distribución física. En otras palabras; que verá el usuario al entrar en la página web y como estará organizado todo. Como podemos observar en la imagen; hay tres partes diferenciadas en la página web, que se especifican a continuación: •Cabecera: Esta compuesta por un logo realizado en Flash que tiene el título de la página con efectos de iluminación no intrusivos, y el menú principal, creado según se ha explicado anteriormente... Página 52 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy •Cuerpo: Contiene la información de la sección actual. Esta zona es la única que cambia de contenido mediante técnicas Ajax. En este caso, en la pantalla de presentación podemos observar la siguiente información: •En primer lugar una introducción de la empresa y su actividad. Se ha realizado un breve resumen para no cargar al usuario de información al inicio y producir una mala impresión... •En segundo lugar un botón que muestra las últimas novedades de la empresa de forma rápida e instantánea. Estas noticias, por supuesto, deben ser introducidas por alguien de la empresa de forma periodica. •A continuación se muestra una presentación de las secciones de más interés de la empresa, mediante un deslizable que muestra información gráfica y que cambia cada cierto tiempo de forma automática. •Pie: Está sección posee una especial relevancia; y para destacarla, entre los cambios de secciones y gracias al efecto SlideUp quedará centrada en la pantalla para que el usuario la visualice bien. Esta sección contiene: •Traducción “al vuelo”: Como podemos observar, hay tres botones con los nombres de los idiomas, que nos traducirán toda la página al hacer un simple clic encima de ellos. Los idiomas disponibles son (se puede añadir más en cualquier momento): •Castellano •Catalán / Valenciano •Ingles •Agregadores sociales: En la parte superior derecha, podemos encontrarnos la botonera de agregadores sociales que hemos creado mediante el plugin AddThis para este caso en concreto... •Información LSSI: En la parte inferior hay datos privados de la empresa junto con la nota legal que muestra la ventana de información de la Ley de los Servicios de la Información... En principio, estas son las secciones visibles fundamentales con las que el usuario final se encontrará cuando acceda a la página web. Como se puede comprobar en la página anterior, se ha optado por un diseño oscuro con focos de luz, que capten la atención del usuario y que le transmita la esencia de la empresa. Respecto al diseño de la página, destacar que se trata de un diseño vertical que varía su altura dependiendo del contenido, pero que mantiene la anchura fija. Ademas el efecto que produce es de estar descolgado de la parte superior, como si de una lampara se tratara... Por último, destacar que esto es todo en cuanto al diseño genérico de la página web se refiere. Sin embargo, a continuación es necesario explicar cada sección por separado, para tener una mejor idea de lo que supone diseñar una página web con Ajax. Página 53 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 4.1.2 – Diseño de la sección sobre la Empresa Cuando el usuario, que está visitando la página web de Kokoh Investigación, S.L., accede a través del menú superior correspondiente al apartado de La Empresa; lo primero que ve es lo que se muestra en la siguiente imagen extraída de la propia página web (una vez se finalizó su diseño): Como podemos comprobar, la sección sobre la empresa posee dos partes fundamentales, que van a ser brevemente explicadas a continuación: •Menú Lateral Izquierdo: Se ha diseñado un menú lateral que desglosa toda la información sobre la empresa y que posee los efectos explicado en el apartado correspondiente de este documento. •Panel de Información Derecho: A la parte derecha podemos observar un panel con texto que posee la información de la empresa que se está mostrando actualmente; correspondiente con la subsección que se visita. Sin embargo este panel no contiene siempre únicamente información; pues hay subsecciones que opiniones y otros temas más interactivos... Por otro lado, destacar que tanto la cabecera como el pie siguen permaneciendo idénticos a los que habían antes; ya que de hecho son los mismos (recordemos que Ajax cambia solo partes de la página, y estas no se han tocado). Una vez visto en términos generales esta sección, es necesario hacer un repaso general sobre las subsecciones que contiene esta importantisima sección. A continuación se listan y se aporta más información de cada una de ellas por separado, atendiendo a los aspectos más relevantes y novedosos. Página 54 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy Subsección “Sobre la Empresa” Esta sección contiene dos bloques de información sobre la empresa; titulados “¿Quienes somos?” y “Proyectos del 2009”. Ambos bloques contienen información muy relevante sobre la propia empresa y los logros que ha conseguido durante el pasado año 2009. Toda la información ha sido revisada y actualizada por los directivos actuales de la propia empresa... El diseño gráfico de esta sección se puede ver claramente en la imagen de la página anterior; ya que es la sección que se abre por defecto al entrar a la sección principal de “La Empresa”... Subsección “Nuestra Tecnología” Esta sección contiene dos bloques de información sobre la empresa; titulados “Ventajas de la tecnología LED” y “Investigación y Desarrollo”. Ambos bloques contienen información muy relevante sobre la tecnología LED y la Investigación y el Desarrollo propio que se realiza dentro de la propia empresa. Toda la información ha sido revisada y actualizada por los directivos actuales de la propia empresa... El diseño gráfico de esta sección es idéntico al de la sección anterior... Subsección “Opiniones Técnicas” En esta sección le mostramos al usuario una lista de opiniones de carácter técnico; realizadas por grandes profesionales en el sector, como por ejemplo profesores de universidad de gran renombre. Además el usuario puede comentar los artículos aquí dispuestos aportando más información de interés para todos los que puedan leerla... El diseño gráfico es simple: Una breve descripción del objetivo de la subsección y una lista de artículos de opinión. A continuación se puede ver claramente este diseño: Página 55 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy Sin embargo, esto no es todo; al hacer clic sobre el artículo de opinión en sí; el panel derecho cambia y pasa a tener el contenido del artículo y un formulario simple para poder remitir las opiniones sobre dicho artículo. Más o menos algo parecido a lo que se muestra en la siguiente imagen: Como podemos comprobar, los comentarios están, por supuesto, paginados en grupos de cinco comentarios cada página. De esta forma evitamos que se acumulen una cantidad ingente de comentarios y la página tarde decenas de segundos en cargar. Subsección “Danos tu Opinión” Esta subsección tiene un diseño similar a la segunda parte de la anterior: Posee una pequeña descripción y a continuación los comentarios paginados con un formulario para poder añadir una nueva opinión... El mensaje de bienvenida dice: Le agradeceríamos mucho que nos hiciera participes de la opinión que tiene usted sobre nuestra empresa (y los servicios o productos que ofrecemos); ya bien sea de forma general o relacionada con algún aspecto en concreto de la misma... Esto se ha establecido así para animar a los usuarios finales a participar en la aplicación web. Que no solo sea un medio de comunicación unidireccional, sino más bien que sea bidireccional. Página 56 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy Subsección “Ponte en Contacto” Esta sección, es fundamental para la empresa pues predispone de todos los medios necesarios para una mejor comunicación. Es el siguiente paso a ver la página web; y el anterior a realizar una compra (que es el objetivo final de la empresa). Esta sección contiene dos bloques fundamentales, que se van a desglosar y explicar brevemente a continuación. •En el primero, se muestra la información de contacto de la empresa y un enlace hacia el mapa interactivo diseñado mediante la tecnología de Google Maps. •En el segundo, se ofrece un formulario para que cualquier usuario pueda comunicarse vía email de forma rápida y eficaz con la empresa. El aspecto final de esta sección está bastante logrado y es fiel al resto del diseño de la página web. Este diseño se muestra en la imagen que se incluye a continuación, para hacerse una idea aproximada del resultado del mismo: Como se puede comprobar, para los formularios se ha seguido una técnica de simplicidad absoluta para que el usuario no vea en ellos un interrogatorio; sino un medio que tiene a su disposición para contactar, si así lo desea, con Kokoh Investigación, S.L. via electrónica. Página 57 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy Es importante entrar con más detalle en cada uno de estos apartados iniciales de la plataforma de usuarios de la página web. El primero de ellos y más sencillo es el apartado de registro de nuevos usuarios que se ha diseñado. A continuación, se ilustra la pantalla de registro de nuevos usuarios: Destacar el uso de la tecnología Ajax para la validación del formulario; que permite mostrar los campos incorrectos sin necesidad de recargar la página web, marcando dichos campos en rojo. Esta forma de realizar validaciones es muy útil, ya que los datos que introduce el usuario no se pierden al validar los datos y permanecen tal y como los ha escrito él. Cabe destacar que la validación se repite mediante una respuesta al método POST del formulario (método tradicional) por si alguien intenta realizar ataques basándose en la ausencia de JavaScript para validar los datos. Sin embargo esta validación se pasa si la realizada con Ajax se pasa; y como son secuenciales para el usuario es transparente. Por otro lado; si el proceso de registro tiene éxito; la identificación en el sistema se hace de forma automatizada con los datos proporcionados en este formulario. Página 64 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy El apartado fundamental de la plataforma de usuarios es el que se accede una vez el visitante se registra en el sistema y que varía en función del tipo de usuario y los permisos (explicados anteriormente) que posea. La pantalla para los clientes regulares (sin privilegios especiales) es; Como se puede ver claramente; la pantalla consta de diversos iconos que permiten el acceso a diferentes secciones de la página web. A continuación una breve descripción de cada uno de los elementos del menú: •Modificar Datos: Accede a una pantalla similar a la del registro que permite modificar los datos actuales del usuario registrado. •Danos tu Opinión: Accede a la sección de “La Empresa”, a la subsección de danos tu opinión. La diferencia está en que una vez identificado el usuario ya no se le pregunta el nombre y el e-mail (se obtienen automáticamente de entre los datos de registro del usuario). •Ponte en Contacto: Accede a la sección de “La Empresa”, a la subsección de contacto. Destacar que una vez identificado el usuario ya no se le pregunta el nombre y el e-mail (se obtienen automáticamente de entre los datos de registro del usuario). •Cerrar Sesión: Simplemente cierra la sesión activa del usuario y vuelve a la pantalla de identificación mostrada anteriormente. De esta forma, el usuario puede volver a identificarse con otro perfil si así lo deseará. •Ver Artículos: Permite acceder a la sección “La Empresa”, a la subsección “Opiniones Técnicas”; con la diferencia que en los comentarios ya no se les va a preguntar ni el e-mail ni el nombre. •Nuestros Productos: Simplemente permite al usuario acceder a la sección de “Productos” donde se exponen todos sus datos; de una forma fácil, sencilla e intuitiva... •Instalaciones Hechas: Esto es un acceso más intuitivo a la sección de “Instalaciones” que permite al usuario ver claramente las instalaciones que la empresa ha realizado hasta la actualidad... Página 65 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy Por otro lado, cabe destacar que el menú que verán los usuarios con permisos de colaboradores variará levemente respecto al anterior. En concreto será el que se muestra en la siguiente imagen: Como podemos comprobar; es un único elemento el que cambia con respecto el menú estándar que poseerán todos los usuarios del sistema: Escribir Artículo. Esta sección desplegará una simple pantalla con la que los usuarios podrán escribir sus propios artículos de opinión (que irán directos a la sección correspondiente). Dicha sección tiene el siguiente diseño gráfico (se puede usar BBCode): Página 66 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy Por último, la pantalla para el administrador será más completa que la anterior; y se corresponderá con la siguiente imagen: El panel en si es similar al del colaborador (posee también la opción de escribir un artículo), pero de nuevo presenta una diferencia: Administrar Instalaciones Esta sección accede a un FTP (protocolo de trasferencia de ficheros) que permite la gestión integra de la sección de Instalaciones a través del explorador, mediante un sencillo sistema de ficheros... Sin embargo, cuando el administrador está identificado en el sistema, esto no es lo único que puede realizar: Puede borrar comentarios y opiniones técnicas desde la propia pantalla de visualización. Un ejemplo claro es el siguiente: Como podemos comprobar, al lado del listado de opiniones técnicas, nos encontramos con el elemento “Borrar”; que le permite al administrador borrar toda la opinión técnica y sus comentarios. También puede borrar comentarios uno a uno, tanto de esta sección como en la de danos tu opinión... Finalmente, destacar que esta plataforma de usuarios (bastante avanzada), puede en cualquier momento ser ampliada sin ningún tipo de problema (ya que se ha realizado de forma bastante escalable, según los requisitos de la propia empresa). Página 67 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 4.1.6 – Creación de una tienda virtual on-line Un servicio verdaderamente muy útil de cara al usuario final, y muy ventajoso económicamente hablando para la empresa, es el de implantar una tienda virtual sobre la plataforma de usuarios que actualmente ya está en funcionamiento. Esto se hace siguiendo unos sencillos pasos, para adaptar los sistemas actuales y dar lugar a una tienda virtual de una forma sencilla y útil de cara al usuario. Estos pasos son los siguientes: 1. En la sección de productos, aparte de tener dos tablas generales con los datos técnicos y de instalación de todos los productos (que pueden serguir siendo consultadas); realizaríamos lo siguiente: •Dividimos la información por productos separados, en vez de en dos tablas generales de información... •En la página de presentación, al hacer clic sobre un elemento; mostramos toda su información y la opción “Añadir al Carrito”... •Mostramos un mensaje de “Producto añadido correctamente al carrito de compra”; que contendrá una lista de productos... •Este mensaje dispondrá de dos opciones: Seguir Mirando y Comprar. Página 68 de 105 Nombre Producto Datos del Producto Añadir al Carrito Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 2. En la sección de usuarios, para los usuarios regulares añadimos una opción de listado de facturas debajo de “Cerrar Sesión”... •Las facturas estarán firmadas digitalmente por la empresa... •Se podrá solicitar el envío en papel de la factura en cuestión... 3. Crear un sistema de pago que cubra las necesidades de pago de la empresa. Esto se puede realizar mediante PayPal; aunque en principio solo soporta pagos manuales, siguiendo un esquema como el siguiente: Con esto conseguiríamos realizar compras online para todos los clientes que lo deseen; facilitando la actividad económica de la empresa y abriéndose a nuevos mercados de clientes. Sin embargo, y dada la expiración del contrato; esta sección no se llegó a finalizar, pese a que sus bases, planificación y planteamiento estaban concluidas... Página 69 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 4.2 – Técnicas de promoción aplicadas 4.2.1 – Técnicas de posicionamiento SEO La tarea de ajustar la información de las páginas que se pretenden hacer aparecer en primeras posiciones de los resultados es conocida como SEO, sigla en inglés de Search Engine Optimization, o sea, 'Optimización para motores de búsqueda'. Consiste en aplicar diversas técnicas tendientes a lograr que los buscadores de Internet sitúen determinada página web en una posición y categoría alta (primeras posiciones) dentro de su página de resultados para determinados términos y frases clave de búsqueda. También es entendido como las técnicas de desarrollo web que tengan como objetivo mejorar la posición de un determinado sitio web por sus páginas en la lista de resultados de los motores de búsqueda que en inglés se identifican como SERPs y forma parte de la jerga de los webmasters hispanohablantes. Para aplicar estas técnicas hay que seguir cuidadosamente las siguientes recomendaciones: •Conseguir que otras webs de temática relacionada enlacen con tu web: •Darse de alta en directorios importantes como Dmoz y Yahoo!; que los buscadores toman más en cuenta al ser revisados manualmente por personas... •Registrarse y participar en foros, de preferencia en foros temáticos relacionados a la actividad de su página web. En los foros debe aparecer enlaces a su página web. •Ahora mismo hay cientos de redes sociales, por ejemplo Hi5, Facebook y, Orkut, en las cuales participar y obtener visitas de nuestros «amigos». •Crear contenidos con textos que contienen frases con que buscan los usuarios web los servicios o productos de este sitio. •Hacer nuestra web lo más accesible posible: limitar contenido en Flash, frames o JavaScript. •Crear títulos únicos y descripciones pertinentes del contenido de cada página. Cada página es una tarjeta de presentación para el buscador. •Enlazar internamente las páginas de nuestro sitio de manera ordenada y clara, haciendo sitemaps... •Actualizar la página con contenido original de calidad, y de forma frecuente. •Crear y mantener los ficheros sitemap.xml y robots.txt en la raíz del servidor para un acceso más sencillo de los buscadores al contenido. Por otro lado, hay que explicar que son los sitemaps y para que sirve el fichero robots.txt que se deben incluir en la raíz del servidor. Página 70 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy Un mapa de sitio web (o mapa de sitio o mapa web) es una lista de las páginas de un sitio web accesibles por parte de las arañas web y los usuarios. Puede ser tanto un documento en cualquier formato usado como herramienta de planificación para el diseño de una web como una página que lista las páginas de una web (ya realizada), organizadas comúnmente de forma jerárquica. Esto ayuda a los visitantes y a los bots de los motores de búsqueda a hallar las páginas de un sitio web. Google creó Google Sitemaps (Mapas de sitio de Google en inglés) para que los desarrolladores web pueden publicar listas de enlaces de sus sitios, debido a que algunas webs tienen un número grande de páginas dinámicas que sólo están disponibles cuando los usuarios emplean los formularios correspondientes. En estos casos los archivos de Sitemaps pueden usarse para indicar a una araña web cómo deben ser encontradas las páginas. Actualmente Google, MSN, Yahoo y Ask.com soportan este protocolo conjuntamente, ahora llamado simplemente Sitemaps. Por otro lado, la página web de la empresa incluye el siguiente: <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>http://www.kokohinvestigacion.com/</loc> <changefreq>weekly</changefreq> <priority>0.9</priority> </url> <url> <loc>http://www.kokohinvestigacion.com/empresa.php</loc> <changefreq>weekly</changefreq> <priority>0.8</priority> </url> <url> <loc>http://www.kokohinvestigacion.com/tecnologia.php</loc> <changefreq>weekly</changefreq> <priority>0.8</priority> </url> <url> <loc>http://www.kokohinvestigacion.com/contacta.php</loc> <changefreq>weekly</changefreq> <priority>0.3</priority> </url> </urlset> Página 71 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy El estándar de exclusión de robots, también conocido como el protocolo de la exclusión de robots o protocolo de robots.txt es un método para evitar que ciertos bots que analizan los sitios Web u otros robots que investigan todo o una parte del acceso de un sitio Web, público o privado, agreguen información innecesaria a los resultados de búsqueda. Es importante mantener este fichero actualizado para permitir a los buscadores el acceso a la información que nosotros queremos ofrecerles. Este estándar fue creado por consenso en junio de 1994 por los miembros de robots que enviaban la lista ([email protected]). La información que especifíca las piezas que no deben ser alcanzadas se especifica en un archivo llamado robots.txt en el directorio de nivel superior del sitio Web. Los patrones de robots.txt son emparejados por comparaciones simples de subsecuencia, así que se debe tomar cuidado para cerciorarse de que los directorios tengan concordancia con el modelo, y que tengan añadido el carácter “/” al final, si no todos los archivos con nombres comenzando con esa subsecuencia emparejarán, más bien que apenas ésos en el directorio previsto. En nuestro caso, el fichero robots.txt que se mantiene es el siguiente: User-agent: * Disallow: /img/ Disallow: /pag/ Disallow: /htm/ Disallow: /inc/ Disallow: /lng/ Disallow: /ssl/ Disallow: /testing/ Disallow: /private/ Disallow: /v01/ Disallow: /v02/ Disallow: /v03/ Disallow: /v04/ Disallow: /v05/ Disallow: /v06/ Disallow: /v07/ Disallow: /index.php Disallow: /sitemap.xml Allow: / Sitemap: http://www.kokohinvestigacion.com/sitemap.xml Página 72 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 4.2.2 – Técnicas de posicionamiento social Estamos de lleno en la Web 2.0 en la que son los usuarios y clientes los auténticos protagonistas. Los participantes en redes sociales como Facebook, LinkedIn, Tuenti o Twitter comparten su experiencia y opiniones sobre todo tipo de cosas. Piden consejo y expresan preferencias. También sobre marcas, empresas, productos y servicios. Comentan qué les gusta y qué no y expresan públicamente su satisfacción por un trabajo bien hecho, por una buena atención o, más frecuentemente, su descontento y malestar en caso de haber quedado insatisfechos. Mantener a su sitio Web al margen de esta conversación ya no es una opción: el mercado, sus clientes, va a opinar sobre sus productos o servicios, va a criticar su marca o a alabar su empresa le guste o no. Las empresas que aprendan cómo mantener una escucha activa de lo que se dice de ellas en las redes sociales, aprovechen las críticas para mejorar sus procesos o su atención al cliente y participen en la conversación aportando valor, y no de forma intrusiva, tendrán una gran ventaja para ganar más clientes, más fieles y, seguramente, también más rentables. En comparación con otras estrategias de marketing online, el posicionamiento en las redes sociales posee muchas ventajas: •Aporta mucha información sobre la percepción de su empresa por el mercado: conocerá de primera mano lo que sus clientes dicen de su empresa y su opinión. •Humaniza su empresa al personalizar su presencia en una “voz” que se dirige, no a segmentos de mercado, sino a clientes concretos. •Puede provocar un efecto viral: gestionar adecuadamente la conversación de su empresa con ciertos líderes de opinión puede tener un enorme efecto multiplicador en redes como Facebook o Twitter. •Genera experiencia y conocimiento en una tendencia al alza: participar cuanto antes en la web social y descubrir sus potencialidades y oportunidades puede ayudarle a estar por delante de sus competidores. Cabe destacar que las estrategias elegidas por Kokoh Investigación, S.L. Para este posicionamiento han sido las siguientes: •Agregadores sociales mediante AddThis... •Interactuación social mediante comentarios... •Web añadida a marcadores sociales... •Difusión social del nombre de la empresa... •Tweets con contenido empresarial... Así pues; y tras aplicar estas simples técnicas de posicionamiento social, el numero de visitas se fidedigna constantemente ya que las mantienes continuamente informadas en todo momento de la actividad que se realiza en la propia empresa para que así reciban voluntariamente y de forma constante publicidad. Página 73 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 4.3.2 – Análisis de las cargas Ajax de la página Las cargas Ajax se producen como respuesta a un evento sobre la página web que lanza un callback en javascript. Existen dos tipos de peticiones Ajax diferentes: •Peticiones Ajax al servidor: •Este tipo de peticiones, comienzan con un evento, realzan una o varias peticiones al servidor; y finalizan con cambios en alguna de las estructuras de la página web. •Un ejemplo de carga de este tipo es: •Las peticiones al servidor son tan breves que tardan incluso menos que refrescar la página web. •El tiempo de carga estimado varía según los datos entre 0,09s y 0,9s •Pueden haber tantas peticiones como se deseen realizar... •Pueden dar respuesta a cualquier evento que se realice... •Peticiones Ajax locales: •Este tipo de peticiones dan respuesta a eventos y realizan cambios locales que han sido previstos de antemano. •Un ejemplo de carga de este tipo es: •Este ejemplo tiene cuatro eventos separados e independientes. •Simplemente se ejecuta código javascript que tarda un tiempo. •El tiempo de ejecución varía entre 1ms y 9ms según scripts... •Se pueden establecer timers que se ejecuten de forma periodica. Así pues, queda claramente reflejado en estos ejemplos que las peticiones Ajax son realmente muy breves; y el resultado final mucho más expectacular y profesional que el que ofrece el sistema clásico de diseño web... Página 80 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 5 – Conclusiones obtenidas del proyecto 5.1 – Conclusiones finales obtenidas 5.1.1 – Necesidades empresariales cubiertas Kokoh Investigación, S.L. ha evaluado en conjunción con el resto de técnicos y especialistas de la empresa, el cumplimiento de los siguientes requisitos; cuyo resultado se adjunta a continuación: •Vía más fácil y habitual de consulta de casi cualquier persona en prácticamente todos los lugares del mundo... - La página permite dicha consulta gracias a la información que aporta y a la traducción “al vuelo” de la misma... •Gran cantidad de potenciales clientes que pese a la distancia pueden acceder a la información integra de la empresa. - La plataforma de usuarios permite este acercamiento, que se verá completo si se integra una tienda online. •Medio que dispone de gran interacción y versatilidad con el usuario; permitiendo una comunicación bidireccional. - La integración social y la tecnología Ajax hacen de la página web mucho más que un simple folleto publicitario. •Facilidad de actualización a medida que la actividad empresarial avance o cambie, pudiéndola especializar por sectores o áreas. - El perfil de administrador puede actualizar la página de forma sencilla adaptándola a nuevos tiempos... •Alta disponibilidad de la información tanto temporal como geográficamente. - Disponibilidad 24hx365d desde cualquier lugar del mundo. •Ser dinámica e interactiva para que el usuario sienta que está al día. - Las técnicas Ajax proporcionan de un dinamismo fuera de lo común. •Ofrecer toda la información que Kokoh Investigación, S.L. desee ofrecer. - La página web posee las secciones que la empresa ha decidido. •Debe poder soportar cambios futuros de forma que sea ampliable. - El perfil de administrador puede añadir novedades; y Ajax es programación dinámica. •Deberá tener un diseño acorde a la actividad de la empresa reflejando su esencia. - El diseño oscuro con potentes focos de luz refleja la esencia de la empresa. •Se realizarán técnicas de posicionamiento SEO y Social para su promoción. - Las técnicas se han descrito en el presente documento. •Deberá responder a los criterios de la empresa y soportar múltiples idiomas. - Responde a dichos criterios y tiene un sistema de traducción “al vuelo”. Así pues, se han cumplido con éxito todos los requisitos y objetivos que la empresa tenía en referencia a este tema tan candente de forma completamente satisfactoria. Con esto finaliza el repaso de los objetivos... Página 81 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 5.1.2 – Conclusiones generales del proyecto Respecto a lo que supone la generalidad de este proyecto; una vez finalizadas las practicas en empresa y desarrollado todo lo descrito en el presente documento, es conveniente extraer unas buenas conclusiones generales del mismo. En primer lugar, cabe destacar la más que acertada elección de la tecnología Ajax como base de este gran proyecto de diseño web empresarial; ya que ha facilitado en gran medida el dotar a la página web de dinamismo. Pero no únicamente esto; el uso de Ajax ha aportado las siguientes ventajas: •La experiencia de usuario en la navegación es mucho más rica. Ya no se refresca la página constantemente al interactuar con ella, sino solo fragmentos. •El tiempo de espera para una petición se reduce. El usuario al hacer un pedido (request) al servidor, no se envía toda la página (solo la parte que cambia). •Por la misma razón anterior el trafico al servidor se reduce y se economizan costes de tráfico y mantenimiento de servidores que resultan más baratos. •Ha permitido realizar cantidad de servicios como la traducción al vuelo, la galería de instalaciones o la integración social de forma sencilla... •AJAX funciona en cualquier navegador y posee una gran potabilidad ya que no requiere de un plug-in como en el caso de Adobe Flash y los Applets de Java... Por otro lado, ha sido toda una experiencia encargarse personalmente de todas las etapas de planificación, diseño, contratación, desarrollo, testing, promoción y mantenimiento; pues aunque se han realizado de forma básica, te permiten introducirte de forma decisiva de lleno en todas las áreas del desarrollo de aplicaciones web. •Planificación: Se ha tenido que planificar y estructurar la aplicación web. •Diseño: Se ha tenido que realizar un diseño tanto del fronted como del backend de la aplicación web... •Desarrollo: Se ha tenido que programar en 5 lenguajes de programación para lograr hacer funcionar la aplicación Ajax... •Testing: Se ha testado e intentado explotar diversos bugs y se han corregido gran cantidad de fallos para mejorar la aplicación. •Promoción: Se han aplicado técnicas de promoción y posicionamiento web. •Mantenimiento: Se ha llevado a cabo un mantenimiento esencial de la web. Por último, el contexto de practicas en empresa ha sido un gran experiencia de introducción al mundo laboral; pues se debía realizar reuniones, cumplir plazos y cubrir unas expectativas; cosa que me ha introducido de lleno en los ajetreos de la vida laboral moderna de una forma exitosa... Página 82 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 5.1.3 – Conclusiones académicas del proyecto Es necesario también plasmar de forma clara las conclusiones a nivel académico que este proyecto ha aportado y las claras ventajas del mismo a dicho nivel. En primer lugar, el marco legal de las practicas en empresa aporta de forma clara e irremediable una puesta en practica de todos los conceptos que se enseñan en la carrera; de forma que (en mayor o menor medida), debes aplicar los conocimientos aprendidos obteniendo experiencia real. Las ventajas de esto son claras y tangibles, ya que aunque el conocimiento teórico es siempre necesario; este debe pulirse mediante la practica donde realmente se aplica, y surgen los problemas reales que requieres de soluciones reales basadas en el conocimiento previamente aprendido. En segundo lugar, y dada la naturaleza del proyecto; se ha requerido del estudio de ciertas tecnologías ausentes en la carrera; lo cual ha completado satisfactoriamente la enseñanza recibida, aportando conocimientos en un área importante para la sociedad actual y su demanda. Así pues; para el desarrollo de este proyecto se ha necesitado del aprendizaje de los siguientes conceptos/lenguajes: •Tecnología AJAX desde la teoría hasta la aplicación práctica. •Lenguaje de programación del lado del servidor PHP... •Lenguaje de marcado del cliente HTML y de estilos CSS... •Lenguaje de programación del cliente JavaScript... •Herramientas de diseño web de Adobe y otras similares... •Servicios que ofrece la web 2.0 y como aplicarlos a la nuestra... •Servicios sociales y la emergencia de las redes sociales... •Normativas y leyes españolas vigentes que afectan al diseño web... •LOPD, LSSI, WCAG (y las leyes similares a esta)... Así pues, como se puede comprobar, son muchos los conocimientos adquiridos en el transcurso de este proyecto; que complementan de forma inequívoca los conocimientos teóricos adquiridos en la carrera. En definitiva; este proyecto ha sido una experiencia satisfactoria, con una gran cantidad de ventajas en su realización. Página 83 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 5.2 – Posibles mejoras futuras a aplicar 5.2.1 – Creación de presupuestos automatizados Una posible mejora verdaderamente muy útil de cara al usuario final, y muy ventajosa económicamente hablando para la empresa, sería la de implantar un sistéma de presupuestación automatizada. Esto lo haríamos siguiendo los unos pasos, para adaptar los sistemas actuales de la tienda on-line y dar lugar al nuevo sistema de una forma sencilla y útil de cara al usuario final. Estos pasos son los siguientes: 1. En la sección de productos, en le pop-up que sale al hacer clic sobre un elemento de la lista de productos; implementar los siguientes cambios respecto a la versión actual: •Añadir un botón para añadir al presupuesto actual... •Este botón vendrá acompañado de un campo que indique la cantidad de ese producto, y otro campo que indique la distancia aproximada entre cada una de las luminarias. También solicitamos la fecha a la que el usuario desea que la instalación se finalice (obligando a un margen mínimo de forma automática). •El sistema añade automáticamente al presupuesto actual la información de los datos solicitados (si no hay uno lo crea) y lo muestra mediante una ventana emergente Ajax al usuario final. Página 84 de 105 Titulo del Producto Datos del Producto Añadir al Carrito Numero y Distancia Fecha Final Esperada Añadir al Presupuesto Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 2. En la sección de usuarios, para los usuarios regulares añadimos una opción de “Presupuestos” eliminando el menú de “Cerrar Sesión”... •Los presupuestos estarán firmadas digitalmente por la empresa... •Se podrá solicitar la compra del presupuesto; por lo que se accederá al sistema de pago implementado para el carrito de compra, pero con todos los datos del presupuesto... 3. Utilizaremos un sistema de pago que cubra las necesidades de pago de la empresa. Esto se puede realizar mediante PayPal; o siguiendo un esquema como el siguiente, que ya se utilizaba para la tienda on-line: Con esto conseguiríamos realizar presupuestaciones automatizadas que en función de los valores “luminarias”, ”distancia” y ”fecha conclusión” realice un cálculo de materiales, personal y costes generales aproximados, bastante fiables... Página 85 de 105 Presupuestos Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 5.2.2 – Adaptación estricta a todas las minusvalías Aunque la página web ha sido diseñada para soportar ciertos tipos de minusvalías (como por ejemplo, la vista deficiente mediante el uso de colores en contraste alto y tipos de letras ampliables mediante combinaciones de teclado gracias a css); sería muy recomendable realizar una adaptación más estricta para soportarlas todas, haciendo la información mucho más accesible de lo que actualmente está. El máximo organismo dentro de la jerarquía de Internet que se encarga de promover la accesibilidad es el World Wide Web Consortium (W3C), en especial su grupo de trabajo Web Accessibility Initiative (WAI). En 1999 el WAI publicó la versión 1.0 de sus pautas de accesibilidad Web. Con el paso del tiempo se han convertido en un referente internacionalmente aceptado. En diciembre del 2008 las WCAG 2.0 fueron aprobadas como recomendación oficial. Por otro lado; en España existen las siguientes leyes y normativas relacionadas con la accesibilidad en los que se tratan dichos temas: •Ley 51/2003 de 2 de diciembre de Igualdad de Oportunidades, No Discriminación y Accesibilidad Universal con discapacidad. •Real Decreto 366/2003 de 16 de marzo, de accesibilidad y no discriminación de las personas con discapacidad en sus relaciones con la Administración General del Estado. •Ley 27/2007, de 23 de octubre, por la que se reconocen las lenguas de signos españolas y se regulan los medios de apoyo a la comunicación oral de las personas sordas, con discapacidad auditiva y sordociegas. •Real Decreto 1494/2007, de 12 de noviembre, por el que se aprueba el Reglamento sobre las condiciones básicas para el acceso de las personas con discapacidad a la sociedad de la información. •Ley 49/2007, de 26 de diciembre, por la que se establece el régimen de infracciones y sanciones en materia de igualdad de oportunidades, no discriminación y accesibilidad universal de las personas con discapacidad. Centrandonos en la WCAG; sabemos que la WCAG consiste en 14 pautas que proporcionan soluciones de diseño y que utilizan como ejemplo situaciones comunes en las que el diseño de una página puede producir problemas de acceso a la información. Las pautas contienen además una serie de puntos de verificación que ayudan a detectar posibles errores; y cada punto de verificación está asignado a uno de los tres niveles de prioridad establecidos por las pautas, por lo que es importante al menos garantizar el cumplimento de los puntos de verificación con prioridad 1... •Prioridad 1: Son aquellos puntos que un desarrollador Web tiene que cumplir ya que, de otra manera, ciertos grupos de usuarios no podrían acceder a la información del sitio Web. •Prioridad 2: Son aquellos puntos que un desarrollador Web debería cumplir ya que, si no fuese así, sería muy difícil acceder a la información para ciertos grupos de usuarios. Página 86 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy •Prioridad 3: Son aquellos puntos que un desarrollador Web debería cumplir ya que, de otra forma, algunos usuarios experimentarían ciertas dificultades para acceder a la información. Siguiendo estas pautas, los desarrolladores de contenidos pueden crear páginas que se transformen de manera correcta. Este tipo de páginas siguen siendo accesibles a pesar de cualquiera de las limitaciones descritas en la introducción, incluyendo las discapacidades físicas, sensoriales y cognitivas, las restricciones debidas al trabajo y las barreras tecnológicas. Las pautas que propone la WCAG son las 14 siguientes en su versión inicial, que se desarrollan con más detalle en la página oficial de la W3C: 1. Proporcione alternativas equivalentes para el contenido visual y auditivo 2. No se base sólo en el color (utilización de contrastes y escalas de grises). 3. Utilice marcadores y hojas de estilo y hágalo apropiadamente. 4. Identifique el idioma usado (para correcta interpretación de dispositivos). 5. Cree tablas que se transformen correctamente (en texto o referencias). 6. Asegúrese de que las páginas que incorporen nuevas tecnologías se transformen correctamente. 7. Asegure al usuario el control sobre los cambios de los contenidos tempodependientes. 8. Asegure la accesibilidad directa de las interfaces incrustadas. 9. Diseñe para la independencia del dispositivo. 10.Utilice soluciones provisionales (hasta que los dispositivos se adapten). 11. Utilice las tecnologías y pautas W3C (estándares de mundiales). 12.Proporcione información de contexto y orientación. 13.Proporcione mecanismos claros de navegación. 14.Asegúrese de que los documentos sean claros y simples. Construir webs teniendo en cuenta su accesibilidad beneficia a todas las personas pues la hace independiente de sus capacidades, su modo de acceso o del entorno en que se encuentren. De esta manera se consigue que cualquier persona pueda tener una experiencia de uso positiva, tanto en la facilidad como en las posibilidades de uso. Hacer la página accesible implica no sólo construir la web siguiendo las pautas y estándares de accesibilidad, sino también diseñarla teniendo en cuenta aquellos aspectos del diseño centrado en el usuario que nos proporcionan conocimiento sobre nuestros usuarios, sus objetivos, preferencias y necesidades. Así pues; cumplimentar estas 14 pautas de accesibilidad web; es una propuesta más que recomendable para mejorar la web haciéndola accesible a todas las personas. Página 87 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy Cada una de las 14 pautas tiene uno o más puntos de verificación, que explican cómo se aplica la pauta en determinadas áreas y que contiene técnicas para implementarlas de forma eficaz. Estos documentos de técnicas proporcionan información sobre su aplicación, incluyendo explicaciones, estrategias y ejemplos de etiquetado detallados. Por otro lado, los puntos de verificación (ordenados por el nivel de prioridad expresado anteriormente) de la norma WCAG 1.0 son los siguientes: En general (Prioridad 1) 1.1 Proporcione un texto equivalente para todo elemento no textual (Por ejemplo, a través de "alt", "longdesc" o en el contenido del elemento). Esto incluye: imágenes, representaciones gráficas del texto, mapas de imagen, animaciones (Por ejemplo, GIFs animados), "applets" y objetos programados, "ascii art", marcos, scripts, imágenes usadas como viñetas en las listas, espaciadores, botones gráficos, sonidos (ejecutados con o sin interacción del usuario), archivos exclusivamente auditivos, banda sonora del vídeo y vídeos. 2.1 Asegúrese de que toda la información transmitida a través de los colores también esté disponible sin color, por ejemplo mediante el contexto o por marcadores. 4.1 Identifique claramente los cambios en el idioma del texto del documento y en cualquier texto equivalente (por ejemplo, leyendas). 6.1 Organice el documento de forma que pueda ser leído sin hoja de estilo. Por ejemplo, cuando un documento HTML es interpretado sin asociarlo a una hoja de estilo, tiene que ser posible leerlo. Página 88 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 6.2 Asegúrese de que los equivalentes de un contenido dinámico son actualizados cuando cambia el contenido dinámico. 7.1 Hasta que las aplicaciones de usuario permitan controlarlo, evite provocar destellos en la pantalla. 14.1 Utilice el lenguaje apropiado más claro y simple para el contenido de un sitio. Y si utiliza imágenes y mapas de imagen (Prioridad 1) 1.2 Proporcione vínculos redundantes en formato texto para cada zona activa de un mapa de imagen del servidor. 9.1 Proporcione mapas de imagen controlados por el cliente en lugar de por el servidor, excepto donde las zonas sensibles no puedan ser definidas con una forma geométrica. Y si utiliza tablas (Prioridad 1) 5.1 En las tablas de datos, identifique los encabezamientos de fila y columna. 5.2 Para las tablas de datos que tienen dos o más niveles lógicos de encabezamientos de fila o columna, utilice marcadores para asociar las celdas de encabezamiento y las celdas de datos. Y si utiliza marcos ("frames") (Prioridad 1) 12.1 Titule cada marco para facilitar su identificación y navegación. Y si utiliza "applets" y "scripts" (Prioridad 1) 6.3 Asegure que las páginas sigan siendo utilizables cuando se desconecten o no se soporten los scripts, applets u otros objetos programados. Si esto no es posible, proporcione información equivalente en una página alternativa accesible. Y si utiliza multimedia (Prioridad 1) 1.3 Hasta que las aplicaciones de usuario puedan leer en voz alta automáticamente el texto equivalente de la banda visual, proporcione una descripción auditiva de la información importante de la banda visual de una presentación multimedia. 1.4 Para toda presentación multimedia tempodependiente (por ejemplo, una película o animación) sincronice alternativas equivalentes (por ejemplo, subtítulos o descripciones de la banda visual) con la presentación. Y si todo lo demás falla (Prioridad 1) 11.4 Si, después de los mayores esfuerzos, no puede crear una página accesible, proporcione un vínculo a una página alternativa que use tecnologías W3C, sea accesible, tenga información (o funcionalidad) equivalente y sea actualizada tan a menudo como la página (original) inaccesible. En general (Prioridad 2) 2.2 Asegúrese de que las combinaciones de los colores de fondo y primer plano tengan el suficiente contraste para que sean percibidas por personas con deficiencias de Página 89 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 5.3 – Bibliografía y Anexos de interés 5.3.1 – Bibliografía del proyecto Para realizar el proyecto y completar el presenta documento se han acudido a diferentes fuentes de información; que se han contrastado para obtener la información más fiable y actualizada posible. La lista de fuentes de información es la siguiente: •http://es.wikipedia.org/ •http://www.postgresonline.com/ •http://code.google.com/intl/es-ES/apis/ajaxlanguage/ •http://code.google.com/p/jquery-translate/ •http://code.google.com/intl/es-ES/apis/maps/ •http://www.jquery.com/ •http://plugins.jquery.com/ •http://api.jquery.com/ •http://www.mityc.es/dgdsi/lssi/ •http://www.findmebyip.com/litmus/ •http://foro.elhacker.net/ •http://www.google.com/analytics •http://blog.ikhuerta.com •http://www.xml-sitemaps.com/ •http://www.w3c.es/ •Información de Diseño de Aplicaciones de Base de Datos. •Información de la asignatura de Redes de Segundo de la EPSA. •Información de Seguridad en Sistémas Informáticos. •Información de la asignatura Diseño de Base de Datos. •Apuntes del curso del CFP de programación con PHP y MySQL. Así pues, la información extraída de estas fuentes ha servido para realizar una autoformación y para tomar las mejores decisiones que han desencadenado el finalizar con éxito este proyecto empresarial; realizado bajo el marco legal de practicas en empresa con Kokoh Investigación, S.L. Página 96 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 5.3.2 – Anexo: Pautas de accesibilidad WCAG 2.0 Las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.0 (traducción al castellano de Web Content Accessibility Guidelines 2.0) es la última versión de las pautas de accesibilidad del contenido en la Web del World Wide Web Consortium (W3C). El 11 de diciembre de 2008 se publicó la recomendación definitiva después de un proceso de elaboración de casi 10 años. WCAG 2.0 se compone de 4 principios, 12 directrices y 60 criterios de cumplimiento, más un número no determinado de técnicas suficientes y técnicas de asesoramiento. El primero de los cuatro principios que se debe poner en practica de esta nueva normativa de accesibilidad, viene desglosado según el esquema que se muestra en la siguiente imagen: Por otro lado, el principio numero cuatro es el más breve de todos y viene representado por el siguiente esquema: Página 97 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy Cabe destacar la importancia de los principios 2 y 3 dentro de esta normativa pues aplican cantidad de guías para asegurar la completa compatibilidad y accesibilidad a la página web por cualquier persona que sufra una minusvalía. Se puede encontrar una explicación más detallada de todos estos puntos en la página web oficial de la W3C en la sección correspondiente de la norma WCAG 2.0... Página 98 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 5.3.3 – Anexo: Elección del proveedor de hosting La siguiente relación de proveedores de servicios de hosting y registro de dominios ha sido extraída de las empresas oficiales registradas en el Ministerio de Industria Comercio y Turismo de España... Se cita textualmente el carácter de estas empresas que se describe en la web oficial de red.es (servicios de red del estado): “Desde red.es1 promovemos activamente la figura de los Agentes Registradores. [...] Los Agentes Registradores son entidades acreditadas por red.es que actúan en cualquier trámite relacionado con el registro de dominios “.es”, [...] y ofrecerles una serie de servicios adicionales, tales como correo electrónico, servicios Web, alojamiento de páginas personales, registro de patentes y marcas, etc….” Dichas empresas deben presentar diversos documentos y acreditaciones, que garantizan al estado que están preparadas para ofrecer dicho servicio de forma correcta y con garantías de que pueden ofrecer una calidad de servicio aceptable... La lista completa de estas empresas se puede obtener de la web del ministerio; concretamente accediendo a la dirección especificada a continuación: •https://www.nic.es/registro/article/258 De entre los agentes registradores destacan los tres siguientes sobre los demás por los servicios que ofrecen, el elevado numero de usuarios que utilizan sus servicios, y su renombre en diversos ámbitos de la informática... www.arsys.es Gran catalogo de servicios Precios elevados Opiniones malas2 http://www.arsys.es/hosting/tarifas-web.htm Entre 30€ y 828€ de forma anual... Reparación de errores lento y problemático... www.piensasolutions.com Catalogo reducido Precios muy bajos Opiniones malas2 http://www.piensasolutions.com/hosting/ Entre 30,40€ y 102,70€ de forma anual... El servicio al cliente es inexistente... www.nominalia.com Catalogo muy reducido Precios bajos Opiniones malas2 http://www.nominalia.com/hosting/ Entre 150€ y 175€ aproximados al año... Problemas con el registro de dominios... 1www.red.es es una iniciativa del ministerio para promover el uso de la red en españa... 2 Las opiniones de malas experiencias han sido recolectadas en foros especializados de diseño web... Página 99 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy Estos proveedores de servicios de hosting y registro de dominios actúan a nivel nacional, y por tanto poseen las ventajas y limitaciones de las empresas de este gran tamaño... Por lo demás, para ver en más detalle precios y prestaciones, es necesario ver los diversos planes que ofrece cada empresa en su página web... Finalmente y tras duras decisiones de la empresa se ha optado por contratar los servicios de nominalia; que se utilizan hasta la fecha sin ningún tipo de problema. Podemos decir que la empresa está contenta con este proveedor de servicios de Internet pues funciona de maravilla3. 5.3.4 – Anexo: Sistema de promoción Ad-Words Este servicio de pago que ofrece Google a las empresas de todo el mundo, permite mostrar anuncios en los primeros resultados de búsqueda en Google personalizados para cada palabra que se busque... Por ejemplo; si introducimos la palabra “leds” obtenemos lo siguiente: En esta imagen se muestran claramente tres zonas diferenciadas; dos marcadas como “Sponsored Links”, que equivalen a aquellas Empresas que utilizan este servicio de Google; la otra muestra los resultados normales de la búsqueda en orden de relevancia... Para mostrar estos anuncios en las búsquedas de Google, este utiliza un mecanismo de palabra-región-oferta: los anuncios varían según buscas led o iluminación (por ejemplo) y según tu localización geográfica (Comunidad Valenciana, España, etc). 3 El servicio técnico de nominalia ha solucionado el único contratiempo ocurrido en 18 horas... Página 100 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy Así pues puedes focalizar el uso del dinero para obtener visitas de las zonas que más le interesen a la empresa: Por otro lado es importante también conocer el método de pago, que se corresponde al llamado pago por clic: se paga una pequeña cantidad por cada clic que hacen en el anuncio; de forma que cuando se alcanza un limite máximo (previamente establecido) de gasto al día, el anuncio deja de aparecer. A continuación se muestran los precios mínimos que se ofrecen por clic: Iluminación - 0,04€ Leds - 0,05€ Electrónica - 0,04€ Led - 0,07€ Para realizar el pago real se puede utilizar una las siguientes opciones: •Facturación mediante pago tradicional: Tras recibir clics, haremos efectivo el cobro en su tarjeta o cuenta de forma automática mediante una domiciliación bancaria o el uso de una tarjeta de crédito... •Facturación prepago: Por cada clic que reciba, el coste se deducirá del saldo de una cuenta de Prepago, que puede recargar por transferencias bancarias o mediante el uso de una tarjeta de crédito. La empresa finalmente se ha decidido ha contratar este servicio una vez se finalice la construcción de la página web para las palabras siguientes: •Alumbrado •Publico Esto permitirá atraer el perfil de cliente que la empresa desea: Los que buscan una solución para un alumbrado publico de calidad que repercuta en ahorro de costes... Página 101 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy 5.3.5 – Glosario de Términos Técnicos Ancho de banda Expresa la cantidad de datos que pueden ser transmitidos en determinado lapso de tiempo. En las redes se expresa en bps (bits por segundo)... Base de datos Conjunto de datos organizados de modo tal que resulte fácil acceder a ellos, gestionarlos y actualizarlos. Browser También llamado navegador, es un programa para recorrer la World Wide Web . Algunos de los más conocidos son Netscape Navigator, Microsoft Explorer, Opera y Neoplanet Buscador, motor de búsqueda Es un programa, ubicado en un sitio de Internet , que recibe un pedido de búsqueda, lo compara con las entradas de su base de datos y devuelve el resultado. Algunos de los más conocidos: Yahoo, Altavista, Lycos, Google. Dominio Un dominio es un nombre registrado ante organismos oficiales y que identificará de manera inequívoca una dirección dentro de la Web. Hosting Se entiende por hosting al espacio de alojamiento que brinda un proveedor de ISP , en él se alojarán las paginas, imagenes y demás archivos de un sitio en la Web al cual se relacionará un nombre o dominio. HTML dinámico Variante del HTML (Hyper TextMark-up Language) que permite crear páginas web más animadas mediante la especificación W3C. Hipertexto Textos enlazados entre sí. Haciendo clic con el mouse el usuario pasa de un texto a otro, vinculado con el anterior. HTTP Hypertext Transfer Protocol. Protocolo de transferencia de hipertextos . Es un protocolo que permite transferir información en archivos de texto, gráficos, de video, de audio y otros recursos multimedia. Internet Red de redes. Sistema mundial de redes de computadoras interconectadas. Fue concebida a fines de la década de 1960 por el Departamento de Defensa de los Estados Unidos; más precisamente, por la ARPA. Se la llamó primero ARPAnet y fue pensada Página 102 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy para cumplir funciones de investigación. Su uso se popularizó a partir de la creación de la World Wide Web. Actualmente es un espacio público utilizado por millones de personas en todo el mundo como herramienta de comunicación e información. ISO International Organization for Standardization. Fundada en 1946, es una federación internacional que unifica normas en unos cien países. Una de ellas es la norma OSI , modelo de referencia universal para protocolos de comunicación. Página Web Una de las páginas que componen un sitio de la World Wide Web. Un sitio web agrupa un conjunto de páginas afines. Hoy en día este término ha evolucionado mucho hasta designar a las propias páginas y todo lo relacionado con ellas... Servidor Computadora central de un sistema de red que provee servicios y programas a otras computadoras conectadas. SQL Structured Query Language. Lenguaje de programación que se utiliza para recuperar y actualizar la información contenida en una base de datos . Fue desarrollado en los años 70 por IBM. Se ha convertido en un estándar ISO y ANSI . Subdominio Sitio que está almacenado en el espacio de disco de un dominio, al cual se accede por intermedio del dominio que lo contiene: www.dominio.com/subdominio o por su equivalente subdominio.dominio.com. TCP/IP Transfer Control Protocol / Internet Protocol. Es el protocolo que se utiliza en Internet para realizar todas las peticiones... WebMail Mediante el webmail el correo electrónico se revisa con el navegador. Se puede acceder a él desde cualquier computadora situada en cualquier lugar. WebMaster Persona responsable de la creación, administración, programación y control técnico de un sitio web. WWW (World Wide Web) Red mundial; telaraña mundial. Es la parte multimedia de Internet . Es decir, los recursos creados en HTML y sus derivados. Sistema de información global desarrollado en 1990 por Robert Cailliau y Tim Berners-Lee en el CERN (Consejo Europeo para la Investigación Nuclear). Con la incorporación de recursos gráficos e hipertextos , fue la base para la explosiva popularización de Internet a partir de 1993. Página 103 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy Lector de pantalla Es un programa de software que lee en voz alta al usuario el contenido de la pantalla. Lo usan principalmente los ciegos. Habitualmente los lectores de pantalla pueden leer textos que estén impresos, no pintados. Magnificador de pantalla Es un programa de software que amplía una parte de la pantalla, para que pueda ser vista más fácilmente. Lo usan principalmente las personas de escasa visión. Mapa de imagen Una imagen que ha sido dividida en zonas con acciones asociadas. Pinchar en una zona activa provoca una acción. Cuando el usuario pincha en una zona activa del mapa de cliente, la aplicación de usuario calcula en qué zona se ha pinchado y sigue el vínculo asociado a esa zona. Pinchar en una zona activa de un mapa de servidor genera las coordenadas que se envían al servidor, que realizará cierta acción. Elemento Este documento utiliza el término "elemento" tanto en el estricto sentido de SGML (un elemento es una construcción sintáctica) como en el más general de significar un tipo de contenido (tal como vídeo o sonido) o una construcción lógica (tal como un encabezamiento o una lista). El segundo sentido enfatiza que una pauta inspirada en HTML puede aplicarse fácilmente a otro lenguaje de marcado. Idioma Lenguaje humano hablado, escrito o de señas como el francés, japonés, lenguaje de señas americano o braille. El idioma del contenido debe ser indicado con el atributo "lang" en HTML y el atributo "xml:lang" en XML. Contenido, estructura y presentación del documento El contenido de un documento se refiere a lo que dice el usuario a través del idioma, las imágenes, los sonidos, las películas, las animaciones... La estructura de un documento es como se organiza lógicamente (Por ejemplo, en capítulos, con una introducción y una tabla de contenidos, etc.). Un elemento (Por ejemplo, en HTML los elementos P, STRONG, BLOCKQUOTE) que especifica la estructura de un documento es llamado un elemento estructural. La presentación de un documento es como éste es mostrado (Por ejemplo, como dibujo, como una presentación gráfica bidimensional, como una presentación sólo texto, como un sonido sintetizado, como braille, etc.). Un elemento que especifica la presentación de un documento (Por ejemplo, B, FONT, CENTER) es llamado elemento de presentación. Contenido Accesible El contenido es accesible cuando puede ser usado por alguien con discapacidad, gracias a la adaptación a las normas y recomendaciones de la W3C que da en su normativa WCAG 1.0 o WCAG 2.0 Página 104 de 105 Juan Daniel Valor Miró Escuela Politécnica Superior de Alcoy Página 105 de 105 Gracias a todos los que me han apoyado durante el transcurso de las prácticas en empresa y de este proyecto en general.