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 ...
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:
- 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.
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
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 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
- Introducción
Breve introducción y qué aprenderás usando este tutorial. - Lección 1: ¡Nos ponemos en marcha!
Descubre qué herramientas necesitas para crear tu propio sitio web. - Lección 2: ¿Qué es HTML?
Comprende qué es HTML y qué significa. - Lección 3: ¿Elementos y etiquetas?
Qué son los elementos y las etiquetas y para qué se usan. - Lección 4: Crea tu primer sitio web
Aprende a crear tu primer documento HTML; crea la plantilla básica para futuras páginas. - Lección 5: ¿Qué has aprendido hasta ahora?
Resumen de lo aprendido hasta ahora y descubre qué aprenderás en las siguientes lecciones. - Lección 6: Más elementos
Familiarízate con siete de los elementos más usados. - Lección 7: Atributos
Aprende a añadir información adicional a las etiquetas y formula comandos de un modo más claro. - Lección 8: Enlaces
Descubre cómo crear enlaces internos a tus propias páginas y externos a otras páginas de Internet. - Lección 9: Imágenes
Descubre lo sencillo y fácil que es insertar imágenes en tus páginas. - Lección 10: Tablas
Construye tablas con HTML para presentar contenido estructurado. - Lección 11: ... y más tablas
Crea tablas aún más sofisticadas. - Lección 12: Presentación (CSS)
Comprende cómo se usan las Hojas de Estilo en Cascada (CSS) para añadir una presentación de fantasía a tus páginas. - Lección 13: Sube tus páginas a Internet
Descubre cómo publicar tus páginas en Internet para que otros también puedan disfrutarlas. - Lección 14: Estándares web y validación
Aprende sobre el estándar común de HTML y cómo comprobar que el código escrito es correcto. - Lección 15: Últimos consejos
Unos cuantos consejos a tener en cuenta al crear tus proyectos de web.
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
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.
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 |