Introducción al desarrollo web PDF

Introducción al desarrollo web Introducción Queda rigurosamente prohibida, sin la autorización escrita de los derechos de autor (copyright), bajo las sanciones establecidas en las leyes, la reproducción total o parcial de esta obra por cualquier medio o procedimiento, comprendidos la reprografía y...

Introducción al desarrollo web Introducción Queda rigurosamente prohibida, sin la autorización escrita de los derechos de autor (copyright), bajo las sanciones establecidas en las leyes, la reproducción total o parcial de esta obra por cualquier medio o procedimiento, comprendidos la reprografía y el tratamiento informático, y la distribución de ejemplares de ella mediante alquiler o préstamo públicos. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmento de esta obra. INICIATIVA Y COORDINACIÓN DEUSTO FORMACIÓN COLABORADORES Realización: Oneclick Diseño y Software, S.L Elaboración de contenidos: Andrés Vega Moreno Formador especializado en la Creación y programación de páginas web. Ingeniero Técnico informático, Diseñador Gráfico y experto en creación de páginas web, es el coordinador de la formación tecnológica de la plantilla de la Asociación Triángulo. Iván Cerezo Vivas Maestro, formador experto en entornos de desarrollo, C# y Unity 3D de los que imparte cursos en Aula Arcade. Supervisión técnica y pedagógica: Grufium Educación y Excelencia, S. L. Coordinación editorial: Grufium Educación y Excelencia, S. L. © Grufium Educación y Excelencia, S. L. Barcelona (España), 2021 Primera edición, segunda reimpresión: julio 2021 ISBN: 978-84-9128-958-6 (Obra completa) ISBN: 978-84-9128-959-3 (Introducción al desarrollo web) Depósito Legal: B 14000-2018 Impreso por: SERVINFORM Avenida de los Premios Nobel, 37 Polígono Casablanca 28850 Torrejón de Ardoz (Madrid) Printed in Spain Impreso en España Esquema de contenido Introducción 1. Internet y la web 1.1. ¿Qué es internet? 1.2. Direcciones de internet 1.2.1. Direcciones IP y dominios 1.2.2. URI y URL 1.2.3. TLD, subdominios y redirecciones 1.2.4. Servidores raíz 1.3. Arquitectura cliente-servidor 1.3.1. Características de un cliente 1.3.2. Características de un servidor 1.3.3. Ventajas del modelo cliente-servidor 1.3.4. Desventajas del modelo cliente-servidor 1.3.5. Otros tipos de arquitectura 1.4. Aplicaciones web 1.5. Accesibilidad 1.5.1. ¿Qué se entiende por accesibilidad en páginas web? 1.5.2. WCAG: niveles de accesibilidad (A, AA, AAA) 1.5.3. Pautas para cumplir con el nivel WAI-A de WCAG 2.0 1.6. Usabilidad 1.6.1. Recomendaciones para crear sitios web usables 1.6.2. Herramientas de accesibilidad y usabilidad 1.6.3. Herramientas avanzadas 2. Dominios y alojamiento web 2.1. ¿Qué se necesita para publicar una web? 2.2. Registradores de dominios gratuitos y de pago 2.3. Pasos para registrar un dominio propio de pago 2.3.1. Registro de dominios ccTLD.es 2.3.2. Registro de dominios gTLD genéricos 2.4. Pasos para registrar un dominio gratuito 2.5. ¿En qué consiste el hosting o alojamiento? 2.5.1. Conceptos básicos de servicios de alojamiento 2.5.2. Operaciones para enlazar dominios y alojamiento 2.5.3. Servidores de alojamiento gratuitos y de pago (hosting) 2.5.4. Pasos para configurar un servidor web de pago 2.5.5. Pasos para configurar un servidor web gratuito 2.6. Crear un servidor web con XAMPP 2.6.1. Introducción 2.6.2. Instalación y configuración XAMPP A. Instalación paso a paso B. Configuración general C. Creación y gestión de base de datos local D. Seguridad del servidor local 2.6.3. Alternativas a XAMPP: WAMP, LAMP, MAMP 2.6.4. DNS dinámicos 2.7. Actividades prácticas guiadas Resumen Introducción En este primer tema, se parte de la base de que el lector conoce algunos conceptos mínimos de informática, pero no conoce el funcionamiento de internet, de las páginas web o de los servidores. Si ese no es su caso, siéntase libre para avanzar a las siguientes unidades o continúe en este capítulo para refrescar algunas nociones básicas. El objetivo de este curso no es profundizar: no es formar en los niveles (capas del modelo OSI) en los que se basa la comunicación a través de cualquier red e internet, ni tampoco analizar pormenorizadamente los protocolos que se usan para ello. El objetivo aquí es aprender a desarro- llar aplicaciones y páginas web accesibles y usables utilizando tecnolo- gías como HTML, CSS, JavaScript, PHP y MySQL. Para alcanzar la meta propuesta en este curso, en cambio, sí será nece- sario abordar conceptos como el de dirección IP, dominio, servidor DNS, protocolos HTTP o FTP, etc. Y se hará de la forma más clara y pedagógica posible, por dos razones: primero, para que se entiendan bien los proce- sos intrínsecos que, sin que uno se dé cuenta, suceden cuando se visita un sitio web; segundo, para proveer al lector de una base robusta sobre aquellos conceptos esenciales, es decir, sobre aquellos que se espera que conozca cualquier profesional de este ámbito. Introducción 5  1. Internet y la web 1.1. ¿Qué es internet? Se puede definir internet como «una red física heterogénea y descen- tralizada que posibilita la interconexión entre todos los dispositivos dotados con tarjetas de red que existan en el mundo». Estos dispositi- vos van desde ordenadores personales y teléfonos móviles a electrodo- mésticos, o incluso a la novedosa ropa inteligente; y todos ellos podrán conectarse a esa red mundial de forma cableada o inalámbrica. Se trata de una red porque su estructura se asimila a una tela de araña: consta de nodos, que actúan como puntos de interconexión de los dife- rentes tramos de la red (subredes) y aristas. Las aristas son las vías (cami- nos) por las que circula la información entre nodo y nodo. Aparte, se trata de una red física heterogénea porque las conexiones de la red se efectúan usando elementos y tecnologías muy diferentes: ca- bles de cobre, cables de fibra óptica, cables submarinos intercontinenta- les…, y también enlaces inalámbricos y vía satélite que utilizan princi- pios físicos como la conductividad eléctrica o la transmisión de datos mediante ondas electromagnéticas. Figura 1. Mapa de internet (The OPTE Project). Finalmente, se trata de una red descentralizada porque no existe un único nodo principal que haga la función de raíz única o punto de partida del que dependan todos los demás, o donde se almacene toda la información. Y tampoco se rige por un único organismo na- cional o internacional. Por el contrario, su regulación depende de una serie de agrupaciones de empresas y organizaciones, que son las que deciden cómo se hacen las conexiones, qué reglas (protocolos) se usan en la comunicación y cuál es el futuro de la red. Las dos agru- paciones más importantes son: 6 Introducción al desarrollo web  IETF (traducido como ‘Grupo de Trabajo de Ingeniería de Internet’). Se trata de una organización internacional normalizadora y sin ánimo de lucro que vela por que los protocolos y la arquitectura en los que se basa internet funcionen correctamente y de una forma abierta, trans- parente y universal. Es la agrupación que establece las modificaciones en los paradigmas de comunicación de internet. Sus documentos se encuentran disponibles para toda persona que desee consultarlos. ICANN (‘Corporación de Internet para la Asignación de Nombres y Nú- meros’). Es una organización sin ánimo de lucro, pero creada de acuer- do con las leyes de los Estados Unidos. Se encarga de asignar y vigilar la resolución única y los emparejamientos unívocos entre nombres de dominio y direcciones IP. Esto se verá en el siguiente punto, «Direccio- nes de internet». 1.2. Direcciones de internet Es posible conectarse a esta red gracias al propio proveedor de servi- cios de internet (ISP), el cual otorga a cada uno la asistencia necesaria para que pueda consultar y acceder a otros servicios y equipos conec- tados a la misma red. Normalmente, los ISP los gestionan las mismas compañías que suministran las líneas telefónicas o la televisión por cable, aunque podrían ser independientes en algunos casos. Una vez contratado el servicio de internet con un ISP, el cliente es capaz de visitar cualquier página web que se ubique en alguno de los equipos conectados a esa red, siempre que sepa dónde se encuentra la página. Por poner un símil con la vida cotidiana, si uno desea ver una película en su ciudad, deberá saber primero cuál es la dirección de los cines en los que se proyecta. Ese cine tendrá una dirección postal única, compuesta de nombre de la calle, número, ciudad y código postal. En internet, a ese identificador se lo llama dirección IP, y es la que localiza de forma unívoca un equipo de la red. Hoy en día, en las redes coexisten dos versiones de IP: IP versión 4 e IP versión 6. Aunque —poco a poco— las IPv6 van ganando terreno, en el ámbito doméstico y práctico se está más familiarizado con las IPv4, que constan de una serie de números separados por puntos. Figura 2. Ejemplos de direcciones IPv4 e IPv6. Internet y la web 7  1.2.1. Direcciones IP y dominios + Un equipo conectado a internet podría tener, entonces, la siguiente IP: 216.58.210.163. Por tanto, si alguien quisiese acceder a ese equipo para Saber más pedirle información o un servicio, lo primero que debería conocer es esa Se pueden comprobar dirección. las direcciones IP de las páginas que Sin embargo, dada su complejidad numérica, sería complicado recordar se visitan en el enlace varias de estas direcciones IP, más aún cuando algunas, encima, podrían web situado en el cambiar en el tiempo. Por este motivo, se utiliza un «sistema de traduc- anexo, al final del ciones». Gracias a él, para acceder a un equipo, una página web o ciertos módulo. servicios en internet, ni se utiliza ni se necesita recordar direcciones IP numéricas. En su lugar, se usan los llamados nombres de dominio, corres- pondientes a esas IP, que son nombres sencillos con los que identificar las direcciones. Así, por ejemplo, cuando se accede a Google, en vez de escribir en el navegador la IP 216.58.210.163, lo que se suele escribir es www.google.es. Para traducir el nombre de dominio a IP, y viceversa, se utiliza el sistema + de nombres de dominio (DNS: ‘domain name system’). Gracias a este sistema, basta con recordar el nombre previamente registrado y apro- bado por la ICANN, en lugar de la serie de números de la IP. El sistema de nombres de dominio utiliza una serie de bases de datos en las que Saber más se almacena la información de qué IP corresponde a qué nombre de La petición HTTP dominio. se llama así por el protocolo de Se dice que esta base de datos es distribuida, porque no existe una única transferencia copia de ella, sino varias, almacenadas en varios equipos conectados a de hipertexto la red de internet, y cuya única finalidad es la de servir nombres DNS que define cómo (servidores DNS) cuando se les pregunta. se transfiere la información en Se trata, además, de una base de datos jerárquica, porque una única la World Wide Web base de datos no guarda información de todos los dominios existentes (WWW). De ahí que en internet, sino que se organiza por niveles (dominios y subdominios). los nombres de sitios Por ello, algunas bases de datos guardan los dominios terminados en web vayan precedidos.es, otras guardan las IP de los.com, etc. de las letras http://www. Cuando se desea visitar un sitio web, se escribe el nombre del sitio en la caja de navegación/dirección de cualquier navegador de internet: Mozilla Firefox, Internet Explorer, Chrome o Safari. Al hacerlo, el navegador en- vía una petición especial (llamada petición DNS), que pasará a un ser- vidor DNS local, el cual buscará en su agenda si cuenta con la dirección IP del sitio que se desea visitar. Si no es así, el mismo servidor DNS local 8 Introducción al desarrollo web iniciará una búsqueda iterativa por uno o varios nodos hasta que alguno de los servidores DNS confirme que «sabe» en qué dirección IP se en- cuentra el dominio buscado. + Cuando el nombre se encuentra, el servidor que guarda la IP correspon- Saber más diente a dicho nombre enviará una respuesta en la que se indica la IP del La petición DNS se sitio web. Entonces, el servidor local pasará la IP al cliente que inició la pe- ejecuta internamente tición DNS y, por lo general, actualizará su agenda con dicha información. antes que la petición HTTP porque es la Automáticamente, el cliente lanzará ahora una petición HTTP dirigida que da la información específicamente a la IP en la que se encuentra el servidor web (www) del sobre el servidor de dominio solicitado. Si se tiene permiso para visitar dicha web, el navega- la web que se ha dor comenzará a recibir la estructura de la página web, la estética (esti- solicitado en la HTTP. los), imágenes, vídeos y, en general, todo lo relacionado con el sitio bus- cado. Conforme se vayan recibiendo estos datos, se irán representando, para que el cliente vea la página y pueda navegar por ella; es decir, ya se podrá hacer clic en los enlaces de la web, tanto en los que conducen a otras partes de esa web (otras páginas) como en los que conducen a enlaces externos (hacia otras páginas web externas). Petición DNS; ¿cuál es la IP 1 de www.google.com? 216.58.210.163 2 SERVIDOR DNS LOCAL SERVIDOR HTTP 216.58.210.163 Petición HTTP 3 para visitar una web Respuesta HTTP 4 Figura 3. Proceso de una petición DNS. 1.2.2. URI y URL El concepto de URL fue, junto al posterior protocolo de transferencia de hipertexto (HTTP), uno de los conceptos clave que aceleró el crecimien- to de internet a partir de 1991. A través de la World Wide Web, las URL permiten crear hiperenlaces; es decir, enlaces a otros sitios o partes del texto y también a otros lugares, textos y recursos. Internet y la web 9  Para definir qué es una URI, primero se abordará la definición formal, un + tanto más compleja. Así pues, basándose en la especificación RFC 3986 del IETF, una URI se puede clasificar como un localizador (URL), un nom- bre (URN) o ambos. El término localizador uniforme de recursos (URL) Saber más se refiere al subconjunto de URI que, además de identificar un recurso El original del (por ejemplo, una imagen o un archivo de audio), proporciona un medio documento RFC 3986 para ubicar el recurso describiendo su mecanismo de acceso primario del IETF se puede (por ejemplo, su «ubicación» de red). consultar en su web, cuyo enlace se Dado que la definición formal resulta difícil de comprender, quizá sea encuentra en el anexo, mejor expresarlo de otra manera. Una URI (‘identificador de recursos al final del módulo. uniforme’) es un nombre que identifica de forma única en internet cual- quier recurso —ya sea un texto, una imagen, un vídeo— alojado en un servidor y enlazado a través de una página web. Dentro de una URI, se distinguen dos denominaciones: URL (‘localizador de recursos uniforme’): parte que define dónde se ha localizado el recurso. URN: nombre del recurso en sí. Por ejemplo, en el caso de una imagen subida a una web, que la imagen esté disponible para su descarga en En la URI ficticia que se acaba de usar como ejemplo, lo que se ha mar- cado en azul correspondería a la URL, y lo rosa al nombre del recurso. De ahí que, comúnmente, se hable de URL para referirse a los nombres de las páginas webs y de URI para referirse al nombre completo de cualquier recurso accesible y único en la red. URI URL + URN Figura 4. Esquema de un localizador URI. Cuando alguien agrega un sitio web a los favoritos/marcadores de su na- vegador, no está sino añadiendo la URL a su agenda de páginas habitua- les. Al hacer clic en ese favorito, su navegador copia dicha URL, la pega en la caja de direcciones y envía la petición para cargarla automáticamente. 10 Introducción al desarrollo web 1.2.3. TLD, subdominios y redirecciones Para terminar esta sección, se presentan los conceptos de subdominio + y redirección. Un subdominio es cualquier nombre de dominio que de- pende de otro superior y cuya existencia se justifica con fines de clasifi- Saber más cación, organización o administración del dominio principal. Esto es así La mayoría de los como consecuencia del funcionamiento por niveles del sistema DNS, y navegadores y es común utilizarlo para diferenciar funcionalidades. sitios web ya se han configurado para Por ejemplo, para utilizar el buscador de Google se suele escribir poder obviar tanto el www.google.com, pero para usar su sistema de correo se escribe HTTP como las www, mail.google.com. Si se descompone el nombre en tres partes, y se lee porque existen reglas de derecha a izquierda, el.com sería el TLD (top level domain, o ‘dominio en los servidores de nivel superior’); siempre se denomina TLD a lo que se sitúa más a la de dichos dominios derecha de cualquier dominio. Lo siguiente correspondería al segun- que, cuando reciben do nivel, donde se halla el cuerpo del dominio, en este caso.google. una petición, dan Por último, se halla el tercer nivel (www), que identifica el nombre de la por hecho que se máquina o subdominio. Así, al escribir dicha dirección, lo que se solicita al trata de servir una navegador es: «Quiero ir a una empresa comercial (.com) llamada Google; web. Por ello, solo es concretamente, al servidor donde se aloja su página web (www)». O, al necesario especificar escribir mail.google.com, se diría: «Llévame a la misma empresa, pero al el subdominio para servidor que se encargue del sistema de correo (mail)». acceder a otros servicios específicos. SISTEMA DNS Primer nivel (TLD)...... es org com net Segundo nivel (DOMINIO PRINCIPAL) unicef unicef avg google asus Tercer nivel (SUBDOMINIO) www www mail www drive Figura 5. El sistema DNS. Niveles de Ejemplo: www.google.com dominios y subdominios. Internet y la web 11  Los TLD de nivel superior (o primer nivel) se pueden clasificar en dos grandes grupos: Los dominios de nivel superior geográficos (ccTLD), reservados para webs de determinados países. Siguen la nomenclatura de dos letras asignadas a cada país según la norma ISO 3166-1 (.es,.us,.uk,.fr…). Los dominios de nivel superior genéricos (gTLD), los cuales pueden dividirse, a su vez, en cuatro subcategorías, cuyos usos recomendados son los siguientes: gTLD no restringidos.com Dominios para webs con fines comerciales. Dominios para webs con fines informativos o divulgati-.info vos (este gTLD originalmente fue de uso restrictivo, pero «se liberó» para cualquier uso)..org Organizaciones y asociaciones sin ánimo de lucro. Tabla 1..net Proveedores de redes y servicios de internet. gTLD no restringidos. Hay que destacar que, aunque se gestionen por la ICANN, su uso es un poco desordenado: debido a la cantidad de dominios que se dan de alta al cabo del día en todo el mundo, y a la saturación de los dominios.com, el resto de gTLD se viene empleando también para otros usos, que no son los originalmente asignados. Por ejemplo, hay empresas privadas u organizaciones de empresas que compran dominios.org o.info, y otros proyectos no comerciales, pero que, por una decisión de comunicación o marketing, utilizan dominios.com. gTLD restringidos.pro Profesionales acreditados y certificados. Empresas de negocios (la denominación viene del in-.biz glés: business). Tabla 2. gTLD restringidos..name Sitios personales. Estos dominios están restringidos, y la ICANN ejerce mayor control sobre ellos. Por esa razón, para adquirirlos es necesario cumplir una serie de requisitos y demostrar su cumplimiento ante la ICANN. 12 Introducción al desarrollo web  gTLD patrocinados (solo principales).edu Dominios para webs con fines educativos..mobi Dominios relacionados con dispositivos móviles..xxx Webs de pornografía y erotismo. Tabla 3..travel Servicios relacionados con viajes. Principales gTLD patrocinados. Aquí se han resumido los principales gTLD, pero existen más. Dichos dominios pueden consultarse tanto en la web de la ICANN como en los resultados de cualquier empresa registradora de dominios. No obstante, no se debe olvidar una cuarta categoría: los gTLD comer- ciales. Esta categoría contiene un gran número de variantes y carece de restricción o regulación alguna. Es posible encontrar dominios muy diversos, como.madrid,.barcelona,.pizza,.tienda. 1.2.4. Servidores raíz Existen trece entidades llamadas servidores raíz (trece direcciones IP). En estos servidores se almacena una copia de la «agenda de internet» (es decir, la relación IP-dominio). Por tanto, cualquier IP asociada a un dominio de primer nivel (.com,.edu,.info…) se encuentra registrada en ese archivo. Podría parecer que cada vez que se entra en una web.com, por ejemplo, consultamos alguno de estos trece servidores, pero en realidad no es así. + Esto se debe a otro de los beneficios de los niveles de los dominios y de la estructura de internet: servidores de menor nivel —más locales o Saber más cercanos a los usuarios corrientes— guardan agendas parciales con los Se puede consultar dominios de primer nivel que les conciernen y con los subdominios rela- información sobre cionados con aquellos dominios. Por tanto, los trece servidores raíz solo los servidores raíz se consultan cada cierto tiempo: los servidores de menor nivel —que son de diferentes niveles los que se consultan habitualmente— solo conectan con los servidores y sobre las empresas raíz de vez en cuando, para comprobar si ha habido alguna modificación independientes que y la dirección IP de ese dominio concreto ha cambiado. se encargan de su mantenimiento A esta consulta a los servidores raíz se la conoce como propagación DNS, en su web, cuyo y puede durar horas hasta completarse. Hoy en día, los servidores raíz enlace se encuentra se encuentran distribuidos por el mundo, pero hace poco tiempo se en- en el anexo, al final contraban todos en los Estados Unidos. del módulo. Internet y la web 13  Figura 6. Localización de los principales servidores DNS en el mundo (OpenStreetMap). Si en España en una pestaña se accede a la página web del busca- dor Google, www.google.com, y en otra pestaña a www.google.es, se comprobará que se termina en la misma web, en la que finaliza en.es. Por lo tanto, se conecta a uno de los servidores de Google asignados para conexiones desde España. Además, si uno observa la caja de direcciones, la URL pasa a ser www.google.es; pero, al entrar desde el dominio.com, automáticamente se le añaden una serie de códigos —diferentes en cada caso—, lo que no sucede cuando entramos directamente en el.es. Sobre estos códigos solo se dirá, por ahora, que son datos que indican que, al solicitar una dirección www.google.com, se redirige al usuario a una dirección www.google.es, o, lo que es lo mismo, a uno de los servidores que Google tiene reservados para los navegantes de España. Además, indica que se ha pasado de usar el protocolo HTTP al protocolo HTTP seguro (HTTPS), entre otros datos. Figura 7. Acceso a www.google.es con y sin redirección. Pues bien, esos códigos añadidos indican una redirección. La redirec- ción sucede cuando, al entrar en una web, el servidor DNS que almacena la relación entre nombre de dominio e IP posee una regla o registro de redirección, que fuerza al navegador a redirigir a otra dirección IP (o dominio), es decir, a otro servidor. En este caso, dicha regla diría algo así como «A todas las personas que entren en www.google.com desde España redirígelas a www.google.es». 14 Introducción al desarrollo web Se puede comprobar fácilmente qué dirección IP corresponde a qué do- minio concreto utilizando una ventana de terminal, desde cualquier or- denador (tanto Windows como Linux o Mac disponen de ellas). También es posible utilizar aplicaciones como Ping Total o similares desde un dispositivo móvil. Esta herramienta, la ventana terminal, resulta muy útil para distintos problemas: comprobar si hay conexión a internet, o algún problema con el router desde consola, ver si hay conexión o no con el servidor cuando se tope con un sitio web caído, y entonces descartar o no el error de conexión… Por ejemplo, en Windows lo más fácil consiste en pulsar la tecla Windows del teclado y escribir las letras cmd para ejecutar la consola o símbolo del sistema. Para sistemas Linux y Mac, abriremos la aplicación Terminal, que se encuentra en la carpeta herramientas (Linux) o aplicaciones/utilidades (Mac). Figura 8. Lanzando la consola del sistema en Windows. Una vez dentro del terminal, e independientemente del sistema en el que se ejecute, se escribirá la palabra ping seguida del dominio del que se desee saber el IP. Siguiendo con el ejemplo anterior, en la figura que se muestra a continuación se ha hecho ping tanto a www.google.com como a www.google.es: Figura 9. Conociendo la IP que corres- ponde a un nombre de dominio utilizando la herramienta Ping. Internet y la web 15  En los resultados, se observa que para www.google.es se ha conectado a la IP 216.58.210.163, mientras que para www.google.com la conexión se ha realizado con 216.58.214.164. Por ello, si por ejemplo se escribe una de estas IP en la caja de direcciones del navegador y se pulsa Enter, debería conducir al mismo sitio web. Se puede comprobar que efectiva- mente es así: Figura 10. Comprobando que se puede acceder a una web usando su IP única. Para la misma acción en una aplicación móvil, simplemente se ha de es- cribir el dominio o IP al cual le se desea hacer ping y pulsar en el botón para enviar el paquete de prueba de conexión. Figura 11. Herramienta para utilizar la herramienta Ping desde un dispositivo móvil. La herramienta Ping puede resultar también muy útil para identificar qué está fallando dentro de una red local y, sobre todo, cuando la web consultada se encuentre caída (no disponible para el público), para po- der comprobar rápidamente si se trata de un problema del servidor de alojamiento web o de la mala configuración que uno haya hecho en esa web. En el primero de los casos, Ping no responderá; mientras que en el segundo sí se recibirá comunicación por parte del equipo (habrá conectividad), por lo que será necesario revisar más profunda- mente la configuración del dominio o del servidor web. 16 Introducción al desarrollo web 1.3. Arquitectura cliente-servidor La arquitectura cliente-servidor es una forma de organizar la comuni- cación entre los equipos conectados a una red. En este tipo de organi- zación unos —los «clientes»— solicitan servicios o información a otros equipos de la misma red cuya única función es despachar de manera segura y permanente dichas informaciones o servicios solicitados. Sin entrar demasiado en detalles o tecnicismos, el concepto de servidor se puede definir como «un ordenador un poco más sofisticado que los caseros, siempre disponible y conectado a internet, con una dirección IP fija (que no cambia a lo largo del tiempo) y que lleva instalado algunos programas (software) especiales; gracias a todo ello, puede “servir” pá- ginas web o recursos almacenados en su memoria (disco duro) a través de la red cuando alguien se los pida». Impresora PC Internet Portátil Router Servidor Figura 12. Tableta Diferentes dispositivos actúan como clientes, y se conectan Smart TV Móvil al servidor. Por otra parte, podría definirse cliente como «ese alguien que pide los recursos almacenados en un servidor». Por tanto, un cliente será cual- quier software instalado en un ordenador de mesa, portátil, teléfono móvil, etc., que se conecta a ese servidor a través de un protocolo de comunicación concreto (HTTP, FTP, etc.), y que le demanda al servidor ciertos recursos. Internet y la web 17  La aparición de este tipo de arquitectura vino dada porque, en los pri- ! meros años de la computación, resultaba demasiado costoso poseer equipos que pudieran, por ejemplo, realizar cálculos matemáticos, o con memoria y velocidad de procesador suficiente para las tareas que hoy se Recuerda consideran rápidas y sencillas de realizar en un ordenador. Gracias a la El término software arquitectura cliente-servidor, un usuario podía disponer de una termi- engloba al conjunto nal que constara solo de monitor y teclado —llamada terminal tonta—, de programas y que, obviamente, era mucho más económica. La terminal se conecta- informáticos que ba a un servidor con mucho mejor hardware, más recursos de cálculo están disponibles y, por consiguiente, mucho más caro. En la terminal se introducía la para instalar y utilizar información que se deseaba procesar y se enviaban una serie de coman- en algún equipo dos (órdenes) al servidor. Entonces, el servidor realizaba las operaciones informático. necesarias con esos datos y devolvía los resultados a la terminal tonta, que los mostraba en su pantalla. 1.3.1. Características de un cliente Puede ser cualquier programa (software) o equipo (PC, Mac, teléfono móvil, tablet, smart TV, electrodoméstico, etc.) que, conectado a inter- net, requiera o demande un servicio a un tercero. Es el encargado de iniciar la comunicación, pidiendo un servicio o información. Tras ser aprobada su solicitud, recibe la información solicitada. ! Puede establecer simultáneamente varias conexiones con el mismo o con diferentes servidores, para el mismo o diferente servicio. Recuerda Transforma la petición del usuario en comandos entendibles por Un protocolo no el servidor, recibe la información del servidor y se la presenta al es más que un usuario. conjunto de normas y reglas acordadas y estandarizadas que 1.3.2. Características de un servidor marcan el modo de actuar en cualquier Es el equipo que dispone del software necesario para ofrecer cierta proceso; en este caso, información o servicios a los clientes que lo soliciten. la comunicación entre cliente y servidor. Recibe la solicitud del servicio y la procesa; después, envía al cliente la información solicitada a través de la red que inició la petición. 18 Introducción al desarrollo web  Puede aceptar simultáneamente peticiones de muchos clientes. Según la cantidad de recursos del servidor, puede limitarse el número total de peticiones de servicio, y así evitar que se comprometa la fluidez de ! comunicación con los clientes atendidos. Esta característica es necesa- ria como medida de protección frente a posibles ataques informáticos. Recuerda Se llama hardware Algunos ejemplos de servidores son: al conjunto de componentes ýý Servidor de nombres de dominio DNS: el que recibe peticiones para físicos que integran traducir nombres de dominio a direcciones IP. cualquier equipo informático, como ýý Servidor de base de datos: el que almacena las bases de datos pre- la placa base, paradas para ser consultadas y modificadas. el procesador, las tarjetas de red, ýý Servidor de almacenamiento NAS: especializado en almacenar datos la memoria RAM y archivos. Puede ser un servidor de uso general (para toda clase de o gráfica, el disco archivos) o especializado en el almacenamiento de vídeos, música, duro, etc. libros, etc. ýý Servidor de impresión o de cola de impresión: es el que recibe las peticiones de impresión, las gestiona y las envía a las impresoras. Consiste en pequeños programas de cualquier sistema operativo que ofrecen servicios internos al propio sistema, como el de cola + de impresión o el de actualización. Por ejemplo, cuando se insta- lan programas de muy diferente índole, como pueden ser Dropbox, Saber más Spotify o incluso los antivirus, todos ellos añaden estos pequeños Las peticiones de programas, que permanecen cargados en memoria. La mayoría de actualización de un las veces es posible comprobar esto último, porque aparecen como cliente o un servidor pequeños iconos en la barra de tareas del sistema operativo, con pueden implicar el frecuencia junto al reloj del sistema. envío de información a varios o a todos los Por ejemplo, los navegadores de internet son programas de tipo cliente clientes o servidores. instalados en los ordenadores personales y que hacen de intérpretes en Por ejemplo, si un el proceso de comunicación en el modelo cliente-servidor. Así, cuando se dominio cambia de escribe la URL http://www.google.es en la barra de direcciones de un na- dirección IP, esta debe vegador y se pulsa Intro, el navegador lo traduce a una serie de órdenes actualizarse en todos y señales eléctricas que viajan a través de la red para iniciar el proceso de los servidores DNS. comunicación entre el cliente y el servidor. A este proceso se lo llama propagación de Otro software tipo cliente pueden ser los programas para transmitir o re- DNS, y suele tardar cibir archivos por el protocolo FTP. Como se verá en esta misma unidad, horas en realizarse. estos programas se usan para cargar y descargar archivos de servidores Internet y la web 19  y en servidores. La misma tarea también puede ejecutarse a través de ! navegadores, puesto que la mayoría de ellos son capaces de comunicar- se utilizando más protocolos que el HTTP; y, si no lo hacen nativamente, puede extenderse su funcionalidad con los llamados add-ons o plugins. Recuerda Los add-ons y plugins son pequeños programas que se añaden (de ahí la La URL es denominación de add-on) o se «enchufan» al navegador (plug-in) para el protocolo. dotarlo de funcionalidad extra. Sin embargo, se comprobará más ade- En el caso de http:// lante que, para ese fin, resulta mucho más cómodo y fiable usar clientes www.google.es, FTP que navegadores. se trata del protocolo HTTP, cuyas siglas aparecen junto al 1.3.3. Ventajas del modelo cliente-servidor nombre del dominio (www.google.es). Encapsulación: los servidores funcionan modularmente tanto en el ámbito de software como en el de hardware. Eso significa que dife- rentes módulos hardware pueden ensamblarse y desensamblarse en caliente (sin apagar ni reiniciar el equipo). Del mismo modo, pueden cargarse o descargarse en memoria diferentes módulos software con el fin de sustituirlos por una versión mejorada, o para habilitar o des- habilitar funcionalidades del servidor. Si se trata de un servidor ba- sado en Windows, a esta funcionalidad se la llama servicio; mientras que, si se basa en Unix, suele llamársele demonio. Y no son más que pequeños programas escritos en algún lenguaje de programación informático —también llamados scripts— con una funcionalidad muy específica, siempre esperando a que se les requiera para realizar el + cometido para el que fueron creados. Escalabilidad: en situaciones de fallo, mantenimiento o sustitución, se Saber más puede ampliar o reducir el número de nodos de la red, ya sean clientes Un equipo que o servidores, y de manera independiente. También se pueden migrar pretenda dar servidores completos a nuevas localizaciones, con el menor impacto servicio web deberá y repercusión posibles para los clientes que se encuentren usando los tener cargado y servicios en ese momento. en ejecución un demonio/servicio Control sobre los recursos: los servidores suelen contar con robustos HTTP, que es el sistemas de control y registro (logs) de errores que permiten monitori- responsable de zar el estado actual del servidor y los motivos por los que algo pueda gestionar qué hacer estar funcionando de manera inadecuada o poco eficiente. Asimismo, cuando un cliente disponen de mecanismos discriminatorios de aceptación o denega- pide ver una página ción de servicios sobre clientes o grupos de clientes, lo cual permite web. disponer de un control total sobre qué se sirve a quién. 20 Introducción al desarrollo web 1.3.4. Desventajas del modelo cliente-servidor Coste del hardware y software, y mantenimiento: cualquier servicio + web que vaya a ofrecerse a varios clientes simultáneamente necesita de máquinas potentes y de anchos de banda de internet considera- Saber más bles; solo así puede poder absorber la demanda. Un servicio web bási- Las granjas de co, como despachar páginas web sencillas, quizá pueda prestarse con servidores son un equipo más modesto, siempre y cuando no se superen las diez o habitaciones o quince peticiones simultáneas. Sin embargo, hoy en día, cuando cada edificios enteros vez es más frecuente consumir música y vídeo por internet, se necesi- habilitados con tan equipos más sofisticados y en mayor cantidad. Esto incrementa los sistemas de costes de adquisición, mantenimiento y consumo eléctrico de las lla- refrigeración y con madas granjas de servidores. Por supuesto, en este curso se abordarán conexiones a internet otras opciones que ahorren costes en este sentido. de muy alta velocidad. Pueden contener Colapso y congestión de servidores: en este modelo, todos los clientes desde dos servidores realizan las peticiones al mismo servidor, el cual, si no tiene capacidad hasta cientos de ellos, para atender tantas peticiones, puede colapsar o servir la información que se utilizan como muy lentamente, lo que menoscaba drásticamente la calidad del servi- bancos de datos, cio. Este embotellamiento constituye una de las mayores desventajas centrales de proceso o del modelo, porque el sistema se congestiona más a mayor número de cálculo, DNS, etc. clientes, y la única solución es aumentar el número de servidores y las capacidades de estos, lo que conlleva un incremento de los costes. Seguridad: aunque este punto podría incluirse también en las ven- tajas debido a la encriptación de la comunicación entre diversos clientes y servidores, se destaca como desventaja porque un modelo cliente-servidor resulta más vulnerable a ataques que otros modelos. Un servidor se halla siempre disponible y localizado; por lo tanto, expuesto a peticiones no siempre legítimas o lícitas. Existe una vul- nerabilidad importante frente a los llamados ataques DoS (denial of service, o ‘denegación de servicios’). En tales ataques, utilizando uno o varios equipos (clientes) infectados con algún tipo de malware, se realizan de manera masiva y simultanea peticiones a un mismo servi- dor con el objetivo de alcanzar ese tope de peticiones máxima. Esta maniobra busca impedir que clientes lícitos o legítimos (clientes del servicio) puedan acceder a los servicios de ese servidor. Cada vez es menos habitual este tipo de ataques: la mayoría de las empresas cuyos servidores son sensibles a este tipo de ataques siguen incre- mentando el número de servidores conectados, y así evitan la posi- bilidad de que se alcance ese límite incluso cuando son atacadas. Internet y la web 21  1.3.5. Otros tipos de arquitectura + Otros tipos de arquitectura son las llamadas redes cliente-cola-cliente, que fueron las predecesoras de un tercer tipo de arquitectura: las famo- Saber más sas redes peer-to-peer (‘redes de pares’ o ‘par-a-par’, P2P). La principal Se considera malware característica de las redes P2P es que cada equipo conectado a dicha a todo programa red se comporta a la vez como cliente y servidor. El principal bene- informático cuyo ficio de este tipo de redes es que evitan que todas las peticiones de objetivo sea molestar clientes se dirijan hacia el mismo servidor, lo que podría crear cuellos a usuarios, de de botella y velocidades de transmisión lentas, o incluso bloqueos. En cualquiera de las este tipo de sistemas, el hecho de que aumente el número de clientes formas. Así, se habla beneficia al sistema, ya que posibilita más nodos que, además de pedir, de tipos de malware sirvan, por lo que la información se encuentra aún más accesible. según sea la manera de lograr ese objetivo: malware infeccioso PC PC —gusanos y virus—, que infecta y daña equipos; malware lucrativo, que consigue beneficios PC PC a través del usuario; malware oculto, que envía información sobre el usuario; etc. Figura 13. Ejemplo de red P2P en la que cada equipo demanda y pide ser- vicios a otros iguales en la red. PC PC Se trata de redes superpuestas, y las podemos clasificar según su gene- ración, estructuración, grado de anonimato de los equipos de la red o grado de centralización. Este último criterio es el más utilizado, y se sub- divide en redes P2P centralizadas, redes P2P semicentralizadas y redes P2P totalmente descentralizadas. 22 Introducción al desarrollo web El uso más conocido de este tipo de redes es el del intercambio de archivos entre usuarios, en el que un cliente puede demandar archivos mientras que está sirviendo otros, ya sea sirviendo al mismo usuario al + que demanda archivos o a un tercer usuario. Aunque menos conocidas, estas redes también son ampliamente utilizadas para servicios de tele- Saber más fonía a través de internet. Es lo que se denomina VoIP: los servidores Se considera red se encargan principalmente del mantenimiento de la base de datos de superpuesta a aquella usuarios, calidad del servicio y, por supuesto, el enrutamiento de las que, usando como llamadas entre clientes. base la infraestructura y protocolos habituales de una 1.4. Aplicaciones web red, añade una capa más que permite Para entender lo que es una aplicación web, primero hay que diferenciar crear una red virtual entre aplicaciones compiladas y aplicaciones interpretadas. Una aplica- de comunicación ción compilada (o programa) es un conjunto de código informático es- únicamente entre crito en algún lenguaje de programación de alto nivel que, tras haberse ciertos nodos desarrollado y testado, se somete a un proceso de traducción o conver- (equipos) de dicha sión hacia lenguaje a bajo nivel (una serie de órdenes entendibles por red. Por ejemplo, el procesador de un ordenador) y se empaqueta para esa clase concreta cuando se llama de procesadores (es decir, se crean uno o varios ficheros que contienen por Skype, no es el resultado de dicha traducción). A ese proceso de traducción y empaque- que exista una red tado se le conoce como compilación, y da como resultado un fichero que se física exclusiva para podrá ejecutar y que se comportará igual en cualquier máquina que posea llamar a través de el tipo de procesador para el que el software ha sido creado. este software, sino que esta red está Por otro lado, una aplicación interpretada es cualquier conjunto de có- superpuesta a la red digo que, en lugar de compilarse, se interpreta por un navegador web general. justo en el momento de consumirse (utilizarse) dicha aplicación. Por tanto, no contiene ficheros ejecutables ni instalables, sino códigos des- cargados desde el servidor al que uno se haya conectado. En definitiva, una aplicación web es básicamente un conjunto de ar- chivos que contienen código informático que el navegador de internet interpreta una vez descargado de un servidor. Una aplicación permite realizar acciones al usuario y, normalmente, interactúa con alguna base de datos remota, base de datos que necesita para consultar o guardar información. Internet y la web 23  Figura 14. Zopim.com es un ejemplo de aplicación web compleja. Cada vez que uno entra en su correo electrónico, se conecta al servi- dor de correo de la organización con quien mantenga el contrato de + servicios (Google, Microsoft, Yahoo, etc.) y se descarga un conjunto de scripts (ficheros con código informático). Gracias a esa descarga, aparece ante el cliente toda la interfaz de usuario de correo electróni- Saber más co, incluyendo su buzón de entrada, y todo lo demás. Lo mismo ocu- Para un usuario, rre cuando se navega por la World Wide Web (WWW) y se entra en leer un contrato cualquier red social, comercio electrónico, etc. De forma transparente, el de servicios cuando usuario está descargando código escrito en múltiples lenguajes de pro- crea una cuenta gramación. Tales lenguajes se interpretan en el acto por el navegador de de correo o se da de internet, que utiliza para ello varios protocolos. Y la descarga se realiza alta como usuario gracias a la arquitectura cliente-servidor. registrado en una web suele suponer Por consiguiente, cualquier página que se visite —con independencia una actividad tediosa. de su naturaleza o utilidad, tenga o no base de datos asociada— repre- Sin embargo, nunca senta un ejemplo de aplicación web. Lo que se vea o pueda hacerse en está de más leerlo o, ella es resultado de la interpretación de una serie de códigos descarga- al menos, buscar en dos de uno o varios servidores. En este curso se aprenderá a crear todos internet si alguien esos códigos de forma independiente y por partes, y también a subirlos ha detectado alguna a un servidor, ya sea este el propio equipo, uno gratuito o uno ajeno de cláusula que atente pago. Se trabajará todo lo necesario para que ese servidor se encuentre contra la privacidad o preparado para recibir visitantes (clientes), visitantes que demandarán los derechos básicos descargar los códigos creados para visualizar la aplicación web construi- de los usuarios. da durante el curso. Son sorprendentes algunos términos Hoy en día, existen aplicaciones web que permiten hacer práctica- que normalmente mente de todo en la red: herramientas para dibujar o para editar se aceptan en redes fotografías online sin necesidad de haber instalado en el equipo nin- sociales u otros gún programa de edición o retoque fotográfico, herramientas para medios. convertir nuestros vídeos favoritos a otros formatos, como el MP3, o 24 Introducción al desarrollo web herramientas para visitar cualquier lugar del mundo de manera vir- tual. Gracias al desarrollo de nuevos y potentes estándares, como HTML5, es posible, además, jugar directamente en el propio nave- + gador, sin instalar el juego; incluso es posible utilizar aplicaciones web para crear otras aplicaciones web personalizadas. A estas últi- Saber más mas aplicaciones web se las llama gestores de contenido (en inglés, La interfaz de usuario CMS: content manager system), y permiten publicar fácilmente textos, la forman todos los fotografías y cualquier multimedia. Hoy en día, el 51 % de las pági- elementos visuales nas web en internet se construyen sin utilizar ningún CMS; es decir, que le permiten a se crean programando todo el sistema desde cero. Sin embargo, el uno interactuar con 49 % restante se han elaborado utilizando algún gestor de conteni- una aplicación. En la dos. Existen muchos sistemas, cinco de los cuales copan el 75 % de las interfaz se muestran webs confeccionadas con CMS. Estos cinco sistemas son WordPress, los botones, menús o Joomla, Drupal, Magento y Blogger. Puedes consultar la estadística textos en los que se completa en la web de W3Techs. puede hacer clic para efectuar diferentes WordPress es el CMS más importante en la actualidad. Comenzó siendo funciones. En el caso una herramienta para desarrollar blogs personales, pero hoy en día ha del correo electrónico, evolucionado tanto que se ha convertido en el referente, con más de un sería consultar la 60 % de cuota de uso en cuanto a gestores de contenido se refiere. Se bandeja de entrada, trata de un software libre, gratuito y distribuido mediante licencia GPL. los contactos, etc. En las páginas web WordPress.com o WordPress.org se pueden crear blogs, páginas personales, porfolios o incluso tiendas online complejas en cuestión de minutos. En el primero (.com), la aplicación web se almacena (hospeda) en los servidores de wordpress.com de forma gratuita y, en principio, sin límite de tamaño. Sin embargo, el nombre del blog constituirá obli- gatoriamente un subdominio de WordPress (quedaría, por ejemplo, www.miblogpersonal.wordpress.com). Si se aspira a un mayor control sobre los archivos, a adquirir un nombre de dominio propio (que no sea un subdominio de wordpress.com) o a otras funcionalidades avanzadas —como estadísticas, etc.—, se ha de pagar uno de los pla- nes avanzados. En cambio, si se utiliza una de las distribuciones descargadas desde.org, aumenta la libertad, pero la instalación inicial y los primeros pasos resultarán más incómodos: hay que comprar el dominio, alqui- lar el espacio en un servidor de hosting para almacenar la web, crear el propio servidor de prueba o explotación, crear la base de datos manualmente y configurarlo todo. Aun así, como futuros diseñado- res web, conviene familiarizarse con estos conceptos y conocer los pasos para instalar CMS. Internet y la web 25  Figura 15. Sitio web de WordPress.org en español. El segundo CMS más utilizado se llama Joomla. Al igual que WordPress, ofrece la posibilidad de crear aplicaciones web sin necesidad de progra- marlas, partiendo de cero. Figura 16. Sitio web de Joomla.org en español. Tanto Joomla como WordPress cuentan con una comunidad muy grande que va creando extensiones, plugins, plantillas estéticas… Las posibilidades son muy amplias, y seguirán aumentando a medida que aumenten las velocidades de conexión a internet y la potencia de los equipos y los servidores. Por eso, se piensa que el mundo de las aplicaciones web constituye el presente y el futuro. De hecho, según el último estudio de la ONTSI sobre uso y actividades de consumo de contenidos digitales, de los once primeros hábitos de consumo de los usuarios de internet, al menos siete se realizan utilizando aplicaciones web a las que se accede por el navegador, en lugar de aplicaciones que partan del escritorio o del móvil. 26 Introducción al desarrollo web 1.5. Accesibilidad Aunque a las nuevas generaciones quizás les cueste un poco más asimi- + larlo, internet es, en realidad, una tecnología bastante nueva. Durante Saber más sus inicios existían abundantes incertidumbres sobre el camino que de- La ONTSI es el bía seguirse, o cómo evolucionarían las tecnologías de la red. Además, Observatorio se han sucedido bastantes pulsos entre dichas tecnologías para ver cuál Nacional de las de ellas se convertía en el nuevo estándar, cuál adquiría el posiciona- Telecomunicaciones miento y la fuerza para apropiarse de la red. Estas luchas casi siempre se y de la Sociedad han entablado entre empresas que, lícitamente, trataban de enriquecer de la Información, aún más la navegación y los contenidos de la red con la introducción que depende del de sistemas para reproducir multimedia —como audio, animaciones o Ministerio de Energía, vídeo en web—. Y estos sistemas, más que en competidores, terminaron Turismo y Agenda por convertirse —casi siempre— en complementos de la tecnología de Digital. En la web la que forman parte hoy en día. Esta tecnología es el lenguaje de marca- de ONTSI, cuyo do para crear páginas web, el lenguaje que se estudiará en este curso: enlace se encuentra HTML. En esta aún corta pero intensísima historia de internet, se ha en el anexo, al final pasado por varias versiones y definiciones de dicho lenguaje, hasta que del módulo, hay se culminó en el más duradero y estable hasta la fecha, el HTML5 (en el disponibles multitudes momento de escribir este libro, se encuentra en la recomendación 5.2, de informes acerca del 14 de diciembre de 2017). del mercado de las telecomunicaciones En esa evolución, y a medida que se consolidaban ciertos estándares que e internet. hoy damos por sentado en el desarrollo web, fueron ganando peso con- ceptos como accesibilidad, adaptabilidad y usabilidad, conceptos orien- tados a crear una web cada vez más semántica, universal y accesible, independiente del hardware o software desde el que se accediera. Así, en la actualidad se encuentran sitios que se adaptan a diferentes formatos de pantalla y orientaciones (diseño responsivo), que ofrecen la posibilidad de cargar estilos visuales de alto contraste o tamaños en sus tipografías y que disponen de metadatos en elementos como artículos, imágenes o vídeos, de forma que personas con alguna diversidad funcional puedan acceder y comprender el contenido que se les está exponiendo. Para lograr esta universalidad, hoy en día existen dos organismos de referencia que definen las recomendaciones, no solo de HTML5, sino de todo lo que debe cumplir una web para que se considere accesible. Y es responsabilidad de todo desarrollador web conocer las limitaciones y barreras de los usuarios, con el fin de evitarlas a la hora de construir sitios para uno mismo o para terceros, porque incrementar la accesibili- dad es una labor necesaria y cada vez más demandada. Por lo tanto, es importante tener en cuenta las siguientes limitaciones para saber cómo facilitar la navegación: Internet y la web 27  Falta de visión, oído o reducción parcial o total de la movilidad del + tren superior (reducción que imposibilite la interacción con elementos pequeños, como botones, enlaces, etc.). Saber más Imposibilidad o dificultad para procesar ciertos tipos de información. La licencia GPL es una licencia que Falta de dispositivos, como teclado o ratón, y uso de métodos alter- reconoce los derechos nativos, como sopladores, lápices/apuntadores de boca u otro tipo de de autor para todo apéndices. software cuyo código y documentación Dificultad en el habla o la compresión del idioma en el que se hayan sean libres, públicos, redactado los textos, o grabados los vídeos/audios. consultables y modificables por Navegador diferente o versión del navegador superior o inferior cualquier persona. a la versión principal en la que se ha probado el sitio durante el Además, contempla desarrollo. que cualquier mejora o uso mejorado del Dispositivo diferente o desconocido. Es materialmente imposible software debe seguir probar un sitio en todo el abanico de posibilidades que existen, y distribuyéndose bajo en todos los dispositivos del mercado. Por lo tanto, es muy probable la misma filosofía. que todo lo que no se haya previsto, en cuanto a ajustes de textos y Fue creada por la Free elementos de una página web, sufra ligeras modificaciones. La mayoría Software Fundation de ellas serán casi inapreciables, puesto que se usarán estándares que para el sistema los navegadores instalados en la casi totalidad de dispositivos deben ad- operativo GNU. mitir; pero, aun así, hay que cerciorarse de crear algunas reglas de se- guridad que «pregunten» al dispositivo qué características tiene, para actuar de una forma u otra. Entorno con poca visibilidad, luz excesiva, ruido ambiente, etc. Las barreras más comunes y fácilmente solventables, que sin embar- go siguen existiendo hoy en día en la mayoría de las páginas web, se pueden resumir en los siguientes puntos: Ausencia de texto alternativo. Tanto las imágenes como los mapas de imá- genes deben incorporar siempre un atributo llamado alt. Este atributo contiene un texto alternativo que sustituirá a la imagen en caso de que el navegador no se haya configurado para mostrar imágenes (por dirigirse a invidentes, u otros motivos). El espacio que ocupa esa imagen será reem- plazado por el texto que se haya especificado en el atributo alt. 28 Introducción al desarrollo web  Uso de tablas, frames u otros elementos obsoletos o poco recomenda- dos. En la nueva versión de HTML5, se han sustituido estos elementos por otros que cuentan con la misma funcionalidad y resultado estéti- + co, pero son más flexibles, robustos y seguros. Saber más Ausencia de descripciones en las imágenes o subtítulos en los vídeos Una web semántica o sonidos. es aquella que aporta información extra Gamas de colores con poco contraste o falta de alternativa. útil, información que facilita la compresión al mayor número de 1.5.1. ¿Qué se entiende por accesibilidad en páginas web? personas posible. También la aporta Se puede considerar a una web accesible si se han cumplido una serie por algoritmos de pautas recomendadas y normas de aplicación y si posee tecnologías relacionales que faciliten la navegación por dicha web al mayor número de usuarios, inteligentes, lo con independencia de si esos usuarios tienen o no alguna discapacidad. que permite que Así, para cumplir con la accesibilidad, un sitio web debe prepararse con se interprete dicha uno o varios de los siguientes mecanismos: información y se efectúen búsquedas Magnificadores de pantalla, amplificadores de contrastes visuales o modi- inteligentes. A la web ficadores de la gama de color frontal-fondo, o de las fuentes (tipografías). semántica también se la llama web 3.0. Lectores de texto automático o convertidores de texto a voz (speech to text). Teclados especiales con atajos, dispositivos apuntadores de poca sen- sibilidad o precisión, etc. Dispositivos con conexiones lentas a internet, pantallas pequeñas o poca luminosidad para personas hipersensibles a la luz. Según estudios del Observatorio de la Infoaccesibilidad —de Discapnet— y de la Fundación ONCE, más de un 20 % de los accesos a páginas web se realizan bajo al menos una de las situaciones anteriores, por lo que no es baladí tenerlas en cuenta. Además, seguir las recomendaciones conlleva una serie de ventajas, también extraídas de dichos informes: Cumplir con el derecho ciudadano a la participación y no discrimina- ción por razón de discapacidad. Internet y la web 29  Cumplir las disposiciones legislativas al respecto, tanto por la Admi- nistración pública, obligada a ello ante la ciudadanía, como por las redes privadas que aspiren a participar en contratos con la Administra- ción o financiación pública. Sin ahondar demasiado en el marco legal, demasiado extenso para este curso, solo se apuntará que existen dispo- siciones específicas de accesibilidad tanto en la Constitución española de 1978 como en la Ley de Servicios de la Sociedad de la Información y Comercio Electrónico (Ley 34/2002, de 11 de julio) y en la Ley de Igual- dad de Oportunidades, no Discriminación y Accesibilidad Universal de las Personas con Discapacidad (Ley 21/2003, de 2 de diciembre). Maximización de los usuarios potenciales, mayor alcance de la comu- nicación, servicios o mercado. De acuerdo con los datos del Instituto Nacional de Estadística (1999), el 9 % de la población en España tiene alguna discapacidad, en total 3 528 221 personas. Al diseñar webs conforme a estándares de accesibilidad, se garantiza la equivalencia de los contenidos entre distintos navegadores y dis- positivos. Mejor indexación en los motores de búsqueda. El cumplimiento de las pautas, tanto en código como en contenidos semánticos (por ejem- plo, vínculos con sentido), permite a los motores de búsqueda una mejor identificación de los contenidos, y en consecuencia mayores po- sibilidades de posicionamiento en los buscadores. Aunque no son equivalentes, la accesibilidad cursa una estrecha relación con la usabilidad de un sitio. Al cumplir requisitos de accesibilidad básicos en los elementos técnicos de una web (estructura de contenidos, víncu- los, contraste de color, efectos y movimientos, formularios, tablas, etc.), mejoran las condiciones de uso para la mayor parte de las personas. 1.5.2. WCAG: niveles de accesibilidad (A, AA, AAA) Las siglas WCAG se refieren a Web content accessibility guidelines, que traducido al castellano significa ‘Guía para una web accesible’. Es una especificación realizada gracias a la iniciativa WAI (Web Accessibility Initiative), y publicada por el World Wide Web Consortium (W3C). El objetivo consiste en eliminar todas las barreras posibles mencionadas anteriormente. 30 Introducción al desarrollo web  Figura 17. Logotipos de conformidad con niveles WAI. En esta guía, cada pauta dispone de una serie de recomendaciones veri- ficables y una prioridad de cumplimiento. Cuando una web cumple todas las recomendaciones de la prioridad 1, se dice que posee el nivel de con- formidad WAI-A, si cumple, además, con la prioridad 2, su nivel corres- ponderá a WAI-AA, y, si lo hace con la prioridad 3, a WAI-AAA. Una vez creada una web, es posible verificar en qué nivel se encuentra usando herramientas online dedicadas a tal fin. Una vez se conozca el nivel, es posible descargar el logotipo acreditativo W3C correspondiente e incluirlo en el pie de la página web creada, o en el apartado de ella que se desee. El logotipo se encuentra tanto en la web de W3C como en el enlace web situado en el anexo, al final del módulo. Las prioridades se distribuyen de la siguiente manera: Prioridad 1: engloba las pautas cuyo incumplimiento hará que algu- nas personas no puedan acceder a la información expuesta en el sitio web. Se trata, por tanto, de necesidades que una web debe cumplir. Prioridad 2: engloba las pautas cuyo incumplimiento hará que el ac- ceso a la información expuesta sea muy difícil para algunos grupos de personas. Se trata, por tanto, de necesidades que una web debe cumplir. Prioridad 3: engloba las pautas cuyo incumplimiento hará que algu- nas personas tengan alguna dificultad para acceder a la información expuesta en el sitio web. Se trata, por tanto, de necesidades que una web puede cumplir. Internet y la web 31  Es importante intentar cumplir las recomendaciones de prioridad 1 para obtener el nivel A, por las ventajas que se han remarcado un poco más arriba. Se debe recordar que cumplirlas conlleva, además, una mejora considerable en el posicionamiento de los resultados que los buscado- res ofrecen a los usuarios cuando estos realizan sus búsquedas por pa- labras clave. Podríamos agrupar todas las pautas en cuatro principios básicos: Principio 1: perceptibilidad. Referente a que los componentes de la interfaz de usuario y los textos son presentados de forma que los usuarios puedan percibirlos. Son todas las pautas que comienzan por 1 de la tabla que se muestra a continuación (tabla 4). Principio 2: operatividad. Los elementos de interfaz y navegación deben estar operativos y permitir la interactividad bajo ciertas con- diciones. Son todas las pautas que comienzan por 2 de la tabla 4. Principio 3: comprensibilidad. La información y el manejo de la inter- faz deben ser comprensibles. Son todas las pautas que comienzan por 3 de la tabla 4. Principio 4: robustez. El contenido debe poder interpretarse de forma fiable y sin variaciones por un amplio abanico de aplicaciones de usua- rio o incluir ayudas técnicas si fuese preciso. Son todas las pautas que comienzan por 4 de la tabla 4. 1.5.3. Pautas para cumplir con el nivel WAI-A de WCAG 2.0 Para finalizar con el apartado «Accesibilidad», se resumirán en una tabla (tabla 4) los puntos que debe cumplir una página web para lograr un nivel WAI-A, de conformidad con el WCAG 2.0. Cada principio contiene otras pautas, pero son de cumplimiento para AA y AAA (deben y pueden, respectivamente). Como hay muchas pautas, es recomendable comenzar con el nivel A y, una vez cumplido dicho nivel, dejar en una segunda fase la adecuación para los siguientes. Quizá algunos de los conceptos o eti- quetas que se muestran en la tabla resulten desconocidos para el alumno; pero se abordarán un poco más adelante, en este mismo módulo. 32 Introducción al desarrollo web Pauta Título Recomendaciones Todas las imágenes, botones de imagen de los for- mularios y las zonas activas de los mapas de imagen contarán con un texto alternativo adecuado. Las imágenes que no transmitan contenidos, que sean decorativas o cuyo contenido ya se halle pre- sente como texto se ofrecerán con el texto alter- nativo vacío (alt = "") o aplicadas como fondos de imagen CSS. Todas las imágenes enlazadas contarán con un texto descriptivo alternativo. Contenido El contenido equivalente alternativo para las imá- no textual y genes complejas se ofrecerá en una página aparte 1.1.1 alternativas (enlazada o referenciada mediante longdesc). textuales Los botones de los formularios poseerán nombres (‘values’) descriptivos. Los elementos de los formu- larios tendrán etiquetas textuales (‘labels’) asociadas o, si estas no pueden utilizarse, un título (‘title’) descriptivo. Los elementos multimedia incrustados (‘embedded’) se identificarán mediante textos accesibles. Los marcos (‘frames’) contarán con un título apro- piado. Se ofrecerá una transcripción descriptiva (incluyendo Medios tem- todas las pistas e indicadores visuales y auditivos) podepen- para el audio grabado (no en directo) basado en dientes web (podcast de audio, archivos MP3, etc.). 1.2.1 Solo audio Se ofrecerá una descripción auditiva o textual para y solo vídeo los vídeos grabados (no en directo) sin audio basa- (grabado) dos en web (por ejemplo, vídeos que no incluyen pistas de audio). Se ofrecerán subtítulos para los vídeos grabados Subtítulos 1.2.2 (no en directo) basados en web (vídeos de YouTube, (grabados) etc.). Audiodes- cripción Se ofrecerá una transcripción o audiodescripción de 1.2.3 o medio los vídeos grabados (no en directo) basados en web. Tabla 4. alternativo Pautas para cumplir con las (grabado) recomendaciones WCAG AA 2.0. Internet y la web 33  Pauta Título Recomendaciones El marcado semántico se usará para designar los encabezados (), listas (, y ), texto especial o enfatizado (, , , , por ejemplo), etc. El marcado semánti- co deberá usarse apropiadamente. Las tablas se usarán para marcar los datos tabula- Información dos. Las celdas de datos () se asociarán con sus 1.3.1 y relaciones encabezados () donde sea necesario. Los títulos de las tablas (caption) y sus resúmenes (summary) se usarán de forma apropiada. Las etiquetas (label) textuales se asociarán con sus campos (input) corres- pondientes en los formularios. Los elementos de los formularios que estén relacionados se agruparán mediante fieldset/legend. Secuencia El orden de navegación y lectura (determinado por 1.3.2 significativa el orden en el código fuente) será lógico e intuitivo. Las instrucciones no dependerán de la forma, tama- ño o ubicación visual (por ejemplo, no serán del tipo Caracterís- «Haga clic en el icono cuadrado para continuar» o 1.3.3 ticas senso- «Las instrucciones se encuentran en la columna de riales la derecha»). Las instrucciones no dependerán del sonido (por ejemplo, no habrá instrucciones del tipo «Un sonido beep le indica que puede continuar»). No use el color como el único método para transmi- tir el contenido o distinguir elementos visuales. Los enlaces deben distinguirse de los elementos y 1.4.1 Uso del color del texto que los rodean. Si se utiliza el color para diferenciar los enlaces, se debe usar una forma adicional para distinguirlos (por ejemplo, se subrayan cuando reciben el foco). Se debe ofrecer un mecanismo para poder parar, Control pausar, silenciar o ajustar el volumen de cualquier 1.4.2 del audio sonido que se reproduzca automáticamente en la página más de tres segundos. Todas funciones de las páginas deberán estar dispo- nibles para utilizarse con el teclado, excepto aquellas que de forma conocida no pueden realizarse con el teclado (por ejemplo, un dibujo a mano alzada). Accesible Los atajos de teclado y accesskeys (que normalmente 2.1.1 deberían evitarse) no deben entrar en conflicto con por teclado los atajos y accesskeys presentes en el navegador o el lector de pantalla. Es decir, a la hora de crear las reglas de accesibilidad por teclado, no deben utilizarse las mismas combinaciones de teclas ya estandarizadas en los dispositivos o navegadores. 34 Introducción al desarrollo web Pauta Título Recomendaciones El foco del teclado no deberá hallarse bloqueado Sin trampas o fijado en un elemento concreto de la página. El 2.1.2 para el foco usuario deberá poder moverse por todos los ele- del teclado mentos navegables de la página utilizando única- mente el teclado. Si una página o aplicación posee un límite de tiempo para realizar una tarea deberá ofrecer la opción de Tiempo apagar, ajustar o aumentar ese límite de tiempo. No es 2.2.1 ajustable un requisito para eventos en tiempo real (por ejemplo, suficiente una subasta) donde el límite de tiempo es absoluta- mente necesario, o si el plazo de tiempo es de más de 20 horas. Todo movimiento automático, parpadeo o despla- zamiento de más de tres segundos deberá poderse pausar, parar u ocultar por el usuario. El movimien- to, parpadeo o desplazamiento podrá usarse para llamar la atención del usuario o destacar un conteni- Poner do si dura menos de tres segundos. en pausa, 2.2.2 El contenido actualizado automáticamente (por detener, ocultar ejemplo, una página recargada o redireccionada automáticamente, un ticker de noticias, la actuali- zación de un campo mediante AJAX, un aviso, etc.) podrá pausarse, pararse u ocultarse si el usuario lo desea, o el usuario podrá controlar manualmente los tiempos de actualización. No se crearán contenidos que destellen más de tres veces por segundo, a menos que el parpadeo sea lo Umbral de suficientemente pequeño, los destellos sean de bajo 2.3.1 tres destellos contraste y no contengan demasiado rojo. (Véase el o menos apartado sobre el destello en general y el umbral de destello del rojo, en inglés). Se ofrecerá un enlace para saltar la navegación y otros elementos que se repitan en todas las páginas. Si una página cuenta con una estructura adecuada de encabezados, puede considerarse una técnica suficiente en lugar de un enlace del tipo «Ir al conte- nido principal». Tenga en cuenta que la navegación Evitar 2.4.1 por encabezados todavía no se admite en todos los bloques navegadores. Si una página utiliza un conjunto de marcos (frameset) y los marcos (frame) se han titulado apropiadamente, puede considerarse una técnica suficiente para acceder directamente a cada marco individual. Internet y la web 35  Pauta Título Recomendaciones Titulado La página web deberá tener un título descriptivo e 2.4.2 de páginas informativo. Orden El orden de la navegación por los enlaces, elementos 2.4.3 del foco de los formularios, etc., deberá ser lógico e intuitivo. Siempre que no sean ambiguos para los usuarios en general, los enlaces (o botones de imagen en un formulario, o zonas activas en un mapa de imagen) serán lo suficientemente descriptivos como para identificar su propósito (objetivo) directamente des- de el texto enlazado o, en su caso, desde el enlace Propósito de en su contexto (por ejemplo, en los párrafos que lo 2.4.4 los enlaces rodean, elementos de una lista, celdas o encabeza- (en contexto) dos en una tabla, etc.). Los enlaces (o botones de imagen en un formulario) con el mismo destino deberían tener las mismas des- cripciones (ser consistentes, según criterio de éxito 3.2.4), pero los enlaces con diferentes propósitos y destinos deberían tener diferentes descripciones. El idioma principal de la página deberá identificarse Idioma de 3.1.1 utilizando el atributo lang de HTML (por ejemplo, la página ). Cuando un elemento reciba el foco no se deberá Al recibir 3.2.1 iniciar un cambio en la página que confunda o des- el foco oriente al usuario. Al recibir Se deberá advertir al usuario con antelación de los entradas cambios —imprevistos o automáticos— en la confi- 3.2.2 (cambios guración de cualquier elemento de la interfaz que imprevistos) causen una modificación en la página. Se debe ofrecer la información al usuario sobre los campos obligatorios de un formulario, o aquellos que necesitan un formato, valor o longitud espe- cífica, utilizando el elemento label (si este no se encuentra disponible, póngase la información en el atributo de título title del elemento). Identifi- 3.3.1 cación de Si se usa la validación de datos de los formularios errores (del lado del cliente o del servidor), se ha de ofrecer la información sobre los errores y avisos de forma eficiente, intuitiva y accesible. Los errores deben estar claramente identificados y se debe ofrecer un acceso rápido al elemento problemático, además de permitir que el usuario pueda fácilmente solucionar el error y reenviar los datos del formulario. 36 Introducción al desarrollo web  Pauta Título Recomendaciones Se deberán proporcionar las suficientes etiquetas, avisos e instrucciones necesarios para los elemen- Etiquetas o tos interactivos. Use para ello instrucciones, ejem- 3.3.2 instrucciones plos, posicione adecuadamente las etiquetas (label) y agrupe e identifique los campos con fieldsets/ legends. Se deberán evitar los errores de sintaxis de HTML/ Procesamien- 4.1.1 XHTML. El código puede comprobarse, analizarse y to validarse a través de http://validator.w3.org/. Se deberá utilizar el marcado de tal forma que se Nombre, fun- facilite la accesibilidad. Esto incluye el seguir las es- 4.1.2 ción, valor pecificaciones oficiales de HTML/XHTML, utilizando la gramática formal de manera apropiada. 1.6. Usabilidad Según el ingeniero en telecomunicaciones danés Jakob Nielsen, uno de los mayores estudiosos de la usabilidad en la web, este término se define como la facilidad de utilizar la interfaz de usuario y los métodos aplicables durante el proceso de diseño para potenciar un uso sencillo de la web. Así se recoge en la norma ISO 9241, que establece el estándar de calidad para «la efectividad, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico». Dicho estándar mide los siguientes componentes de ca- lidad, que son preguntas que todos deberían hacerse a la hora de diseñar y desarrollar cualquier web: 1. Aprendizaje: ¿cómo de fácil es para un usuario aprender las tareas básicas cuando entra al sitio por primera vez? 2. Eficiencia: una vez que el usuario ha aprendido a usar el sitio, ¿cómo de rápido realiza las tareas más complejas? 3. Memorización: transcurrido algún tiempo desde el último uso, cuan- do el usuario regresa, ¿cómo de fácil es el recuerdo de las tareas dis- ponibles en el sitio web? 4. Errores: ¿cuántos errores comete un usuario mientras navega por el sitio?, ¿tarda mucho en enmendar el error?, ¿cómo de importantes son los errores? 5. Satisfacción: ¿cuánto le agrada al usuario el diseño del sitio? Internet y la web 37  Al contrario que con la accesibilidad (muy legislada y especificada —no tanto implantada—), con la usabilidad nos encontramos un camino más lento en cuanto a estandarización. Es cierto que hoy comienzan a existir recomendaciones más asentadas, pero seguimos en periodo de estudio. Aun así, es bueno tener en cuenta las siguientes consideraciones para lograr webs con un buen diseño en cuanto a usabilidad se refiere. 1.6.1. Recomendaciones para crear sitios web usables 1. Navegación amigable e información. El usuario debe tener siempre claro en qué sección o momento de la navegación se encuentra. Nunca debe experimentar la sensación de haberse perdido o de hallarse en una zona del sitio desconocida. Debe recibir mensajes de confirmación para operaciones sensibles, permanecer informado cuando esté inmer- so en un periodo de espera, mientras se realiza alguna operación del lado del cliente o del servidor, sin que esos tiempos se vuelvan dema- siado largos o provoquen inestabilidad en la navegación. Asimismo, la estructuración del contenido en categorías o la elección de los menús debe presentarse de la manera más intuitiva posible, para que, aun sin recordar dónde estaba una sección, el usuario pueda acceder a ella de forma casi inconsciente. 2. Localización e idiomas. Tanto la interfaz como la información —inclu- yendo mensajes emergentes, ayudas o avisos— deben mostrarse en el lenguaje de preferencia del usuario. Si se trata de un sitio multidioma, es preciso recordar la preferencia del navegante para futuras sesiones, para evitarle la molestia de tener que reconfigurar el sistema en cada visita. 3. Control y libertad. Uno de los aspectos más negativos en cuanto a usabilidad es que el usuario no pueda volver atrás —a pasos ya dados o al estado inicial de un proceso—, o que, si lo hace, pierda la infor- mación vertida en esos pasos anteriores, parte de la cual probable- mente desee mantener. Por tanto, es recomendable que en su visita existan anclas o enlaces (‘links’) siempre visibles para volver al inicio de la navegación o a la página de inicio/bienvenida (‘landing page’). No es recomendable lanzar ventanas (las denominadas pop-ups) que el usuario no haya abierto conscientemente, ni a tamaño de ventana completa ni de ventana parcial. 4. Asistencia. Por muy buen diseño que se haya desarrollado, quizá el sitio contenga algunos procesos un poco más complejos o quizá se desee prepararlo para personas menos duchas en el manejo de páginas web. 38 Introducción al d