Bloque 4: Redes e Internet.

Funcionamiento de los CRS-GDS

3. Comunicaciones: Diseño de páginas web y sistemas de gestión de

contenidos

1. Diseño web
Actividad que consiste en la planificación, diseño e implementación de sitios web.
No se trata de una simple aplicación de diseño convencional, ya que requiere tener en cuenta la
navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como
el audio, texto, imagen, enlaces y vídeo.
La unión de un buen diseño con una jerarquía bien elaborada de contenidos, aumenta la eficiencia de
la web como canal de comunicación e intercambio de datos, que brinda posibilidades como el
contacto directo entre el productor y el consumidor de contenidos.
El diseño web ha visto amplia aplicación en los sectores comerciales
de Internet especialmente en la World Wide Web.

1.1 Diseño web aplicado

Al diseñar una página web tratamos básicamente de:
- realizar un documento con información hiperenlazado con otros documentos, y
-asignarle una presentación para diferentes dispositivos de salida (pantalla de ordenador,
papel, tablet, smartphone, etc).
Esto se puede conseguir de diversas formas.

Formas de crear documentos o páginas web:

- Creando archivos de texto en HTML (Hyper Text Markup
Language), PHP, ASP, ASPX, JavaScript, JSP, Python, Ruby, ...
- Utilizando un programa WYSIWYG o WYSIWYM de creación de páginas.
- Utilizando lenguajes de programación del lado servidor,para
generar la página web.

1.1.1 Etapas en el diseñ o de una pá gina web

Debemos tener en cuenta tres etapas:
- El diseño visual de la información que se desea transmitir: Distribución de texto,
gráficos, vínculos a otros documentos y otros objetos multimedia que se quieran
añadir. Realizar un boceto previo en papel facilitará tener un orden claro sobre el
diseño.
- Estructura y relación jerárquica de las páginas del sitio web: Escritura de las páginas
web estableciendo los vínculos apropiados para facilitar la navegación por ellas.
- Posicionamiento en buscadores o SEO (Search Engine Optimization): Consiste en
optimizar la estructura del contenido para mejorar la posición en que aparece la
página en determinada búsqueda.
Inicialmente, las páginas web se generaban escribiendo el código HTML en un editor de
texto. A mediados de 1996, aparecieron algunos editores visuales de HTML, como MS
FrontPage y Adobe Dreamweaver, que no requerían saber HTML, por lo que el
desarrollador podía concentrarse en el diseño del documento.
1.1.2 Fundamentos
Un correcto diseño web implica conocer cómo se deben utilizar cada uno de los elementos
permitidos en HTML, es decir, hacer un uso correcto de este lenguaje dentro de los
estándares establecidos por la W3C y en lo referente a la web semántica.
La web semántica aboga por un uso lógico de las etiquetas HTML según el significado para
el que fueron concebidas. Por ej., <P> para marcar párrafos y <TABLE> para tabular datos.
Así, se utiliza el documento HTML únicamente para contener, organizar y estructurar la
información y las hojas de estilo CSS para indicar como se mostrará dicha información en
los diferentes medios (como un monitor, un smartphone, un papel, un sintetizador de voz,
etc.). Lógicamente, esta metodología beneficia enormemente la accesibilidad del
documento.
También existen páginas dinámicas, que permiten interacción entre la web y el visitante,
proporcionándole herramientas como buscadores, chat, foros, sistemas de encuestas, etc.

1.1.3 Accesibilidad
El diseño web debe seguir unos requerimientos mínimos de accesibilidad web que haga
que sus sitios web o aplicaciones puedan ser visitados por el mayor número de personas.
Para conseguir estos objetivos de accesibilidad se han desarrollado pautas como las del
W3C: Pautas de accesibilidad al contenido Web
2.1 (WCAG, Web Content Accessibility Guidelines).

1.2 Historia
En un principio era sólo texto, pero a medida que ha evolucionado la tecnología se han
generado nuevas formas de desarrollar la web. Las más significativas son la inclusión de
imágenes, el vídeo y la animación, junto con los espacios 3D, lo que aporta valores
estilísticos, de diseño y de interactividad jamás imaginados antes.
El diseño de páginas web se ha desarrollado a medida que ha evolucionado Internet: En
1992 había unos 50 sitios web, a principios de 2021 unos 1.830 millones. El primer sitio
web fue info.cern.ch, publicado el 6 de agosto de 1991.
A pesar de la gran cantidad de sitios web que existen en el mundo, sólo una fracción de
ellos es visitado habitualmente por la mayoría de los usuarios (unos 30.000 sitios webs, un
porcentaje bajísimo sobre el total). Hay que tener en cuenta que una gran mayoría de esos
sitios web forman parte del contenido “inaccesible” de la Deep Web.
A partir de estos datos, podemos entender la necesidad de concentrar los esfuerzos para
atraer a los usuarios. El desarrollo efectivo de la estructura web y del contenido, el diseño
y el uso del color son la clave para atraer a los usuarios, formando vínculos en su
subconsciente.

1.3 HTML (Hyper Text Markup Language)

La última versión de este lenguaje es la 5 (HTML 5), donde se introducen nuevos
elementos que mejoran la navegación y la usabilidad de los sitios web en los distintos
navegadores.
Aunque hoy en día existen muchos lenguajes avanzados para el diseño de páginas web, e
incluso sitios web que nos permiten diseñarla directamente (como 1&1 Mi Web,
www.1and1.es), veremos algún ejemplo sencillo de página web escrita en HTML.

El lenguaje HTML se basa en el uso de etiquetas o directivas que

permiten especificar los efectos del contenido.
 Estructura básica de un documento HTML:
<html> <!-- Limita el documento e indica que es HTML -->
<head> <!-- Prólogo del documento – sin contenido -->
<title>Título</title> <!-- Usado por el navegador -->
</head>
<body> <!-- Contenido del documento -->
Cuerpo del documento (texto, imágenes, vínculos, etc.)
</body>
</html>

Directivas más importantes:

- Título apartado: <h1>A</h1> <h2>B</h2> … <h6>F</h6>
- Fin de párrafo: <p>
- Retorno de carro o salto de línea: <br>
- Texto preformateado: <pre>Respeta retornos de carro</pre>
- Cita textual: <blockquote>Cita</blockquote>
- Dirección de correo: <address>E-mail: a@ba.es</address>
- Negrita: <b>Texto en negrita</b>
- Cursiva: <i>Texto en cursiva</i>
- Máquina de escribir: <tt>Texto tipo máquina de escribir</tt>
- Centrar: <center>Texto centrado</center>
- Lista no numerada (viñetas): <ul> <li>A <li>B <li>C </ul>
- Lista numerada: <ol> <li>A <li>B <li>C </ol>
- Glosario: <dl> <dt>T1 <dd>D1 <dt>T2 <dd>D2 </dl>
- Línea horizontal de separación: <hr>
- Comentario: <!-- Comentario -->
- Vínculo: <a href="http://www.ual.es">Univ. de Almería</a>
- Imagen: <img src="monigote.gif“>
- Caracteres especiales:
&nbsp; (espacio en blanco) &lt; (<) &gt; (>) &amp; (&) &quot; (“)
&aacute; (á) &eacute; (é) &iacute; (í) &oacute; (ó) &uacute; (ú)
&Aacute; (Á) &Eacute; (É) &Iacute; (Í) &Oacute; (Ó) &Uacute; (Ú)
&uuml; (ü)
(¡) &Uuml; (Ü) &ntilde; (ñ) &Ntilde; (Ñ) &#191; (¿) &#161;
Ejemplo: Universidad de Almer&iacute;a
- Tabla:

<table border="1">
<tr><th>Nombre</th><th>Apellido</th></tr>
<tr><td>Pedro</td><td>García</td></tr>
<tr><td>Juan</td><td>Pérez</td></tr>
</table>

2. Sistemas de gestión de contenidos

Un sistema de gestión de contenidos (o CMS, del inglés Content Management System) es un
programa que permite crear una estructura de soporte (framework) para la creación y
administración de contenidos, principalmente en páginas web, por parte de los
administradores, editores, participantes y demás roles.

Consiste en una interfaz que controla una o varias bases de datos donde se aloja el contenido
del sitio web. El sistema permite manejar independientemente el contenido y el diseño.
El gestor de contenidos genera páginas web dinámicas interactuando con el servidor web para
generar la página web bajo petición del usuario, con el formato predefinido y el contenido
extraído de la base de datos del servidor.
Esto permite gestionar, bajo un formato estandarizado, la información del servidor,
reduciendo el tamaño de las páginas para descarga y reduciendo el coste de gestión del portal
con respecto a un sitio web estático, en el que cada cambio de diseño debe ser realizado en
todas las páginas web.

Los gestores de contenidos se pueden clasificar según diferentes criterios:

- Por sus características
- Según el lenguaje de programación empleado, como por ejemplo Active Server
Pages, Java, PHP, ASP.NET, Ruby On Rails, Python, PERL
- Según la licencia: Código abierto o Software propietario
- Por su uso y funcionalidad
- Blogs, Foros, Wikis, Enseñanza (WebCT), Comercio electrónico, Publicaciones
digitales, Difusión de contenido multimedia, Propósito general, …

Ejemplo:

- Todo el mundo puede participar (voluntariamente) en la generación de contenido de

forma colaborativa

- El diseño está preestablecido por el administrador (Fundación Wikimedia) y no se

puede modificar

Ventajas de los gestores de contenidos:

- Facilita el acceso a la publicación de contenidos a un rango mayor de usuarios. Permite
que cualquier usuario pueda añadir contenido en el portal web sin necesidad de tener
conocimientos de programación ni maquetación.
- Permite la gestión dinámica de usuarios y permisos, la colaboración de varios usuarios
en el mismo trabajo y la interacción mediante herramientas de comunicación.
- Los costes de gestión de la información son mucho menores ya que se elimina un
eslabón de la cadena de publicación, el maquetador. La maquetación se hace al inicio
del proceso de implantación del gestor de contenidos.
- La actualización, backup y reestructuración del portal son mucho más sencillas al tener
todos los datos vitales del portal (los contenidos) en una base de datos estructurada
en el servidor.