Informática Aplicada a las Ciencias Sociales
Grado en Ciencias Políticas y Gestión Pública. Universidad de Murcia
um.es/docencia/barzana > IACCSS > Creacion-de-paginas-web.html

Creación de páginas web

¿Cómo funciona un sitio web en internet?

Un sitio en internet, habitualmente conocido como página web, se compone de documentación de cualquier tipo, estructurada al menos bajo los lenguajes de programación HTML (o XHTML) y CSS.

XHTML (eXtensible HyperText Markup Language) es un lenguaje de marcas para la estructuración y la configuración del contenido de una página, es el lenguaje habitual de cualquier página web, aunque es habitual utilizar una versión más flexible, conocida como HTML. CSS (cascading style sheets) es un lenguaje que permite dar formato al contenido de la página, hace posible definir casi todo sobre el diseño de una página, como: color y tamaño de las fuentes tipográficas, fondo, alineación del texto, colocación de las imágenes, etc ...

Esquema de como funciona internet


Navegadores

Un navegador es un programa instalado en el disposituvo del usuario que interpreta o "restaura" visualmente el código contenido en las páginas web. Su función consiste en leer el código de la página bajo visualización e interpretarlo, mostrando el resultado en pantalla.

En resumen: el cliente (usuario) solicita una página web, el servidor (ordenador donde el sitio está alojado) procesa la solicitud y devuelve la respuesta y finalmente el navegador la muestra.

Hay diversos navegadores, los más conocidos son:
Navegadores de internet más usados
  • Mozilla Firefox (Windows, Mac, Linux y Android)
  • Google Chrome (Windows, Mac, Linux y Android)
  • Opera (Windows, Mac, Linux, Symbian y Android)
  • Safari (Mac y Windows)
  • Vivaldi, basado en Opera (Linux y Windows)
  • Konqueror (Linux)
  • Internet Explorer (Windows), actualmente renovado como Edge.
Los navegadores no interpretan todos los mismos elementos o formas de configuración de una página web. Firefox muestra de manera fiel lo planificado por el desarrollador de la página web. Sin embargo Internet Explorer hasta recientemente no ha seguido los estándares XHTML y CSS, lo cual da lugar a problemas de visualización.

Por lo que respecta a la seguridad, se puede decir que la privacidad en internet no existe, es algo que se debe asumir y actuar en consecuencia. Para intentar controlar de alguna forma este hecho, a veces no deseado, los navegadores incluyen el denominado "Modo incógnito" que no almacena cookies ni deja en el equipo información de la actividad realizada en las conexiones a internet.


Existen otros navegadores, poco difundidos, que incorporan medidas de seguridad en el acceso a internet:

Epic Browser, utiliza el motor Chromium para renderizar las páginas, así que es rápido y compatible con los estándares. Epic Browser no almacena ninguna información de navegación, no deja instalar cookies, y bloquea los intentos de espionaje. Frena los trackers y la publicidad no deseada, pues integra adBlock. No permite instalar plugins ni extensiones, para no comprometer los datos. Si es posible, encripta las páginas web mediante SSL, con una conexión https, para que nadie pueda observar. Incorpora un proxy que oculta la dirección IP, y que se puede desactivar.

PirateBrowser, The Pirate Bay creó PirateBrowser, un navegador ideado para “evitar la censura”. Está pensado para buscar y descargar torrents evitando los filtros a este contenido que emplean algunos países y algunos proveedores de internet. e logra mediante la anonimización y el bloqueo de trackers, se puede utilizar para navegar de forma más privada. Es una especie de “monstruo de Frankenstein” creado mediante la unión de diferentes partes: es la versión portable de Firefox, con la extensión foxyproxy para ocultar la dirección IP, y un cliente de Tor llamado Vidalia.

Tor Browser Bundle si interesa encriptar la navegación por medio de la red Tor a efectos de censura, se puede extender a todas las webs con esta solución el navegador Tor Browser Bundle. Este programa permite conectar a la red Tor sin configurar nada. Permite navegar desde un pendrive, pues no necesita instalación y no guarda ficheros de configuración. Tor encripta los datos para que no sean espiados, y además los reenvía entre distintos ordenadores de voluntarios de la red Tor, para que no se pueda rastrear su procedencia. Es una solución efectiva si se desea anonimizar los accesos a la red. Lo que se consigue a costa de reducir la velocidad de navegación. Además, algunas webs no aceptan navegar con Tor. Tor encripta los datos desde el ordenador mediante el que se accede, y todo lo que se haga dentro de la red Tor. Pero no encripta los datos que van desde Tor a la web que se visita.


Editores de código

Un editor de código es un programa que entre otras funcionalidades, permite crear código en los lenguajes que emplean las páginas web. Se pueden clasificar en dos categorías:
  • Editores WYSIWYGV
  • Editores de texto
WYSIWYG significa "lo que ves es lo que obtienes", permite escribir el contenido directamente sin necesidad de introducir una sola línea de código. Generan de forma automática el código XHTML/CSS. Algunos programas de este tipo son: NVU, KompoZer, Frontpage, Dreamweaver. Son bastante fáciles de manejar y permiten crear rápidamente unas pocas páginas o incluso una web sencilla completa. En la página Bitelia, se comentan ocho editores HTML online para principiantes y profesionales

Desventajas:
  • El código generado aunque funcional, dista mucho de estar refinado.
  • La separación del contenido (XHTML) y la presentación (CSS) no es evidente.
  • Tienen limitaciones.
  • Al final se consigue una página, pero puede que sea distinta a la esperada.
Los editores de texto proporcionan mayor flexibilidad en la creación de una página y permiten al creador estar cerca de todo en el desarrollo. Una página web se compone principalmente de los lenguajes XHTML y CSS y un editor de texto permite editar directamente el código, separando de forma correcta los dos lenguajes básicos que conforman una página web.

Los más difundidos son: Aptana, Bluefish y Geany, en Windows destacan: Notepad, Notepad ++, y UltraEdit. Se recomienda Notepad ++ que es gratuito, y por otra parte muestra en colores colores los códigos XHTML/CSS, lo que permite desarrollar código con más comodidad.

Tutorial HTML

Fuente: HTML.es

Para aprender a programar páginas web usando diversos lenguajes, se recomienda el sitio w3schools.com. También se puede acceder a la página web de la asignatura del Grado en Ingeniería Informática, Desarrollo de Aplicaciones Web.

Ergonomía en páginas web

Actualmente se habla mucho sobre ergonomía web, usabilidad y accesibilidad, con frecuencia sin explicar el concepto. La usabilidad web es el estudio de la interfaz entre el hombre y la máquina, concretamente entre un usuario y un sitio en la red. El objetivo es mejorar la experiencia de navegación al visitar un sitio en internet.

Usabilidad

Los principales objetivos de la usabilidad web se proponen:
  • Una navegación clara y sencilla para el usuario
  • Velocidad de ejecución durante la búsqueda de información
Ergonomía

La ergonomía es muy importante, asegura que un visitante pueda encontrar fácilmente la información que busca, en lugar de que abandone el sitio después de pasar un mal momento. Una buena usabilidad web, además de facilitar la visita del usuario responde a una necesidad real para quien busca información (para los sitios web editoriales, blogs ...) o para quien compra un producto en sitios comerciales.

Legibilidad

Otro componente de la interfaz web es la legibilidad, un texto que no se puede leer debido a los malos contrastes de color o tamaño de letra, puede causar una mala experiencia para el usuario. El primer argumento para hacer un sitio web es mostrar su contenido básico. Si no se puede leer, cualquier utilidad y la importancia de un sitio pierde interés.

Accesibilidad

Se debe cumplir (está establecido por la legislación española y normas WAI, WCAG, UNE 139803:2004) con criterios relacionados con el usuario que va a visitar el sitio para que encuentre la información fácilmente. En la página web "Accesibilidad en la Web" aparece el vídeo de una conferencia que trata en detalle la accesibilidad en páginas web. Todo esto dependerá de:
  • Edad: para facilitar la adaptación y comprensión de un sitio.
  • Soporte: ordenador, teléfono inteligente, tableta, dispositivo táctil. Esto provoca problemas de resolución de la pantalla de cambio del navegador utilizado.
  • Nivel de habilidad con la navegación por internet y hábitos.

El siguiente vídeo muestra ejemplos de problemas de accesibilidad:



Responsive Design es un término que se cita con frecuencia, básicamente consiste en adaptar un sitio a los distintos dispositivos para que el mismo contenido se muestre lo más optimizado a los usuarios y que la navegación sea lo más natural posible dependiendo del dispositivo. ¿Qué significa que la información se muestre clara, y que sea fácilmente navegable? Que el usuario pueda visualizar de forma correcta la información sin que tenga que aplicar casi nunca ni zoom, ni scroll ni otras técnicas de navegación web, y siempre apareciendo el mismo contenido para todas las plataformas. La experiencia de usuario debe percibirse casi igual independientemente del dispositivo desde el que se acceda.

Responsive Design


La siguiente tabla muestra un resumen de los principales principios de la ergonomía.

Criterios Descripción
Sobriedad El diseño limpio y claro. No muy animada para interrumpir la visión del usuario
Legibilidad Estructuración y organización de la información (título, subtítulo, párrafo, texto a transmitirse) con la información más importante en la parte superior
Usabilidad El respeto de la "regla de tres clics" sistema de navegación claro e idéntica en todas las páginas, acceso a la página principal con un solo clic, presencia de un logotipo
Velocidad Tiempo páginas de carga rápida lo más cortos posible (reducir el tamaño de las imágenes, optimizar css)
Interactividad Presencia de enlaces para que el usuario puede navegar por su cuenta (importancia de los anclajes claros y precisos). Atraer al lector con frases para ir a otras páginas. Facilitar el intercambio y la distribución (formulario de contacto, compartir en las redes sociales, oportunidad de comentar)
Accesibilidad Hacer que el sitio sea accesible a todos, cumplir los estándares de W3C, implementación de leyenda en las imágenes y enlaces. Colores adecuados para mejorar la legibilidad para daltónicos y el contraste y la fuente adecuados para los discapacitados visuales

Alojamiento de un sitio web

A continuación se muestran dos vídeos sobre el proceso de alojamiento de cualquier página web. Pertenecen al curso MOOC "iDESWEB: Introducción al desarrollo web" del profesor Sergio Luján, de la Universidad de Alicante.





Página de inicio