DISEÑO Y EDICIÓN DE PÁGINAS WEB.

-TEMA 3-

DISEÑO Y EDICIÓN DE PÁGINAS WEB

Trabajo hecho por: Lorena Urrea

ÍNDICE

2. Criterios de diseño

1. Páginas web

3. Herramientas de publicación

4. El lenguaje HTML

6. Editores de páginas web

5. El lenguaje JavaScript

7. Alojamiento de sitios web y transferencia de ficheros

Páginas web

Lo que habitualmente llamamos web o página web es en realidad un sitio web (website), es decir, un conjunto de documentos (páginas web) enlazados entre sí, a los cuales se accede a través de una dirección común. Los documentos que constituyen un sitio web son archivos y carpetas que contienen texto, fotografías, botones, iconos, animaciones, hipervínculos, multimedia, gráficos, tablas, etc., y que se han creado para ser vistos por usuarios con ordenadores y navegadores de distintas características. Para acceder a las páginas web usamos un navegador (Mozilla Firefox, Microsoft Edge, Google Chrome, etc.), que se encarga de comunicar el ordenador con los servidores que albergan las páginas web, descargar las páginas y mostrarlas.

¿Cómo se crea una página web?

Una página web se puede crear directamente escribiendo en HTML en cualquier editor de textos y guardándolo con la extensión adecuada (.html o .htm), pero no se suele hacer así más que con fines educativos. En la práctica real se utilizan editores de páginas web, que permiten diseñar webs de una forma más sencilla e intuitiva. A grandes rasgos existen editores de dos tipos:

Editores WYSIWYG

Editores que trabajan directamente con HTML

La elección de la forma de trabajar dependerá de los gustos y conocimientos del usuario, aunque cuando se profundiza en el diseño de páginas web conviene conocer ambas maneras de construir webs. La siguiente tabla recoge las ventajas e inconvenientes de trabajar directamente con HTML (bien con editores web o con editores de texto) y con un editor WYSIWYG.

Diferencias entre los modos de elaborar páginas web.

Escribiendo en HTML

Con un editor WYSIWYG

• El código queda más limpio. • Es más fácil reutilizar código. • El código se maneja con más precisión. • Es necesario manejar HTML. • El aprendizaje es más difícil. • Hacer una página lleva más tiempo.

• El código no es tan limpio. • No se maneja el código (es la máquina la que lo maneja). • El aprendizaje es sencillo. • Hacer una página es relativamente rápido.

Clasificación

Las páginas web se clasifican en estáticas y dinámicas:

Estática

Dinámica

El usuario puede modificar el diseño, y los contenidos son dinámicos, es decir, responden en función de las peticiones del usuario.

El usuario no puede modificar los contenidos ni el diseño, ni realizar peticiones.

Funcionamiento

Los sitios web son creados por programadores y diseñadores. Una vez creados, las personas encargadas de mantenerlos se llaman administradores (o webmasters, en inglés). El proceso de trabajo habitual de un administrador es crear en su ordenador el conjunto de archivos que conforman la web (llamado sitio local). El administrador manipula estos archivos y también dispone de un espacio donde guardar la página en un sitio accesible a todos los usuarios de Internet (llamado sitio remoto). Ese sitio está en un ordenador especial que se llama servidor, y tanto el espacio como el proceso se denominan alojamiento. Los servidores son ordenadores que alojan las páginas web y las ponen a disposición de toda la red. El proceso de alojamiento de un sitio web y su funcionamiento es el siguiente:

Funcionamiento

Administrador en el sitio local.

Sitio remoto alojado en el servidor.

Programas de transferencia de ficheros

Usuarios

Prediseño y planificación

El primer paso para diseñar una web es la fase que podemos llamar prediseño. Debemos analizar qué objetivos queremos conseguir con nuestra web y posteriormente construirla según la planificación marcada para que se cumplan esos objetivos. A grandes rasgos, debemos preguntarnos:

En esta etapa debemos escribir nuestros objetivos, recopilar y organizar contenidos, escribir las directrices de organización y diseño y establecer un código de colores para los distintos elementos.

+ info

Estructura de una web

La consistencia en el diseño es fundamental para la calidad de nuestra web. Pensando en nuestros futuros visitantes debemos: • Crear una jerarquía visual clara en cada página. • Utilizar las convenciones (lo que se usa de forma mayoritaria en las páginas web). • Dividir las páginas en áreas claramente definidas. • Facilitar el acceso a los enlaces. • Omitir contenidos innecesarios, es decir, simplificar.

Los contenidos de una página web pueden ser: • Texto • Imágenes • Gráficos • Animaciones • Tablas • Botones • Iconos • Hipervínculos • Multimedia

+ info

La disposición de los elementos en una web tipo es la siguiente:

Elementos de diseño

A la hora de diseñar una web hay que atender a cuestiones tan elementales como el contraste del texto con el fondo, el tamaño de los caracteres o la elección de los colores. Todo esto, evidentemente, depende de los gustos del diseñador, de forma que lo que a uno le parece maravilloso a otro le puede parecer de mal gusto o vulgar. En todo caso, hay que tener en cuenta que en el diseño de páginas web, como en cualquier ámbito, hay modas y tendencias que siguen todos los sitios profesionales. En general, se debe usar el sentido común y ponerse siempre del lado del usuario.

Página web de Google en el año 2021

Página web de Google en el año 2009

+ info

En la fase de diseño entran en juego dos conceptos diferenciados: la maquetación y la interfaz.

interfaz

maquetación

La interfaz es el conjunto de comandos y métodos que facilitan la interacción entre el usuario y el sistema (el sitio web). Debe tenerse en cuenta el dispositivo de salida: ordenador, teléfono móvil, tableta digital...

La maquetación se encarga de organizar espacios y contenidos escritos, visuales y audiovisuales. Abarca los aspectos semánticos y formales de una aplicación digital.

En cuanto a los elementos de maquetación, podemos distinguir entre elementos gráficos y tipográficos, elementos de imagen y elementos funcionales:

1. Elementos gráficos y tipográficos. Son, por ejemplo, la tipografía, el punto, la línea, la forma y el color. Ninguna maquetación digital puede pasar sin ellos.

2. Elementos de imagen. Las fotografías, ilustraciones, símbolos e iconos atraen las miradas en cualquier maquetación.

3. Elementos funcionales. Convierten una maquetación digital en la interfaz de un medio digital. Son los elementos que pueden seleccionarse entre las herramientas del editor o bien diseñarse. Por ejemplo los botones, los hipervínculos.

Una recomendación en cuanto a la tipografía: no utilizar letra con serifa para la web.

La tipografía con serifa facilita la lectura en un texto impreso, pero la dificulta en una pantalla de ordenador. Los párrafos de la figura, están escritos en Arial (sin serifa) y Times New Roman (con serifa), ambas del mismo tamaño de fuente (mismo número de puntos). Puedes comprobar cuál de ellos es más cómodo de leer, y después probar el mismo ejercicio en la pantalla del ordenador.

TIMES NEW ROMAN ARIAL

Análisis del prediseño

2. Público ¿A quién se dirige?

1. Objetivo ¿Qué se pretende conseguir con la web?

3. Contenidos ¿Qué contenidos se quieren mostrar?

4. Directrices ¿Cuáles se usarán en cuanto a forma, organización y estructura?

Análisis de elementos gráficos y tipográficos

Análisis de elementos de imagen

Uso de ilustraciones, imágenes e iconos

Tipo de letra

Uso de colores

Análisis de elementos funcionales

Personalización de contenidos, cambio de idioma

Cambio de tamaño de letra o alto contraste

Dispone de buscador

Estándares de accesibilidad de la información

Según la legislación española, las páginas web de organismos públicos deben satisfacer los estándares de publicación referidos a navegabilidad y accesibilidad para personas con discapacidades. Existe un compromiso para que los sitios web cumplan unas normas que les permitan ser visitados y utilizados por el mayor número posible de personas. Se trata de minimizar el efecto de las limitaciones físicas y técnicas de los posibles visitantes.

Estos criterios, llamados criterios de accesibilidad, están recogidos por el World Wide Web Consortium (W3C). La WAI (web accessibility initiative) es una rama del W3C que establece niveles de conformidad o accesibilidad (A, AA y AAA) para las webs en función del grado de cumplimiento de dichos criterios, desde los más básicos hasta los más exigentes.

La mayoría de los sitios web que visitamos tienen asignado el nivel AA, y muy pocos tienen el AAA. Incluir el icono en una web no es una certificación externa sino un compromiso de cumplir el nivel de accesibilidad. La adopción de criterios de accesibilidad a la hora de diseñar una web implica numerosos beneficios, como aumentar el número de visitantes, reducir el tiempo de carga de la página o disminuir el número de errores. Para principiantes, intentar cumplir las normas básicas de accesibilidad es un objetivo a medio plazo; comprender los consejos de la W3C (y más aún cumplirlos) requiere un alto nivel de especialización.

Herramientas de publicación: gestores de contenidos

Las herramientas de publicación son herramientas relativamente fáciles de usar que permiten al usuario crear sus propios contenidos y publicarlos en Internet sin la necesidad de contar con conocimientos técnicos de diseño o programación. De acuerdo con las características de los contenidos que se vayan a tratar, se pueden vilizar distintas herramientas, como vimos en la unidad anterior. En esta unidad nos centraremos en los gestores de contenidos.

Un gestor de contenidos es una herramienta de publicación que permite generar contenidos web y editarlos y actualizarlos online sin necesidad de contar con conocimientos técnicos de diseño o programación. En inglés se conoce como CMS (content management system). Los gestores de contenidos se basan en plantillas ya definidas que el usuario puede adaptar y personalizar según sus gustos, lo cual abarata los costes de creación de las páginas web y ahorra tiempo en su elaboración. Además, el uso de plantillas proporciona un diseño común y una apariencia homogénea a todos los contenidos publicados, con lo cual el resultado es una web coherente. El usuario puede acceder a ellos mediante un navegador.

Con un gestor de contenidos podemos crear blogs y wikis:

wiki

blogs

Algunos gestores de contenidos

WordPress

+ info

Joomla

+ info

Drupal

+ info

EL LENGUAJE HTML

El uso de gestores de contenido facilita la creación de páginas web para un usuario poco experto. Sin embargo, los diseñadores de páginas web se centran en la creación de páginas a partir del lenguaje en que están escritas: el lenguaje HTML (hypertext markup language, lenguaje de marcas hipertextuales). La función de los navegadores que utilizamos habitualmente (Chrome, Firefox, Edge, etc.) es interpretar ese lenguaje y transformarlo en la página web que se nos muestra.

Una página web se puede crear directamente escribiendo en este código en cualquier editor de textos y guardándolo con la extensión adecuada (.htm o .html), pero no se suele hacer así más que con fines educativos. En la práctica, se utilizan editores de páginas web, que permiten diseñar webs de una forma más sencilla e intuitiva.

Las características básicas del lenguaje HTML son las siguientes:

El lenguaje HTML5 es la quinta versión del lenguaje de etiquetas HTML Su desarrollo está regulado por el Consorcio W3C. Su primera versión definitiva se lanzó en octubre del 2014. Se trata de un lenguaje diseñado para incorporar etiquetas específicas de funcionalidades multimedia (imagen, audio y video). Con su lanzamiento ha comenzado el declive del que hasta ahora era el rey del contenido multimedia, el lenguaje Flash. Este declive se ha acentuado por la negativa de algunos de los principales fabricantes a que funcione Flash en sus dispositivos, apostando claramente por el HTML5.

Una vez desarrollado el estándar, la implementación del lenguaje por parte de los diferentes navegadores está siendo paulatina, dado que muchos de ellos crearon su propia versión de HTML5 (no regida por el W3C y que, por lo tanto, no funciona exactamente igual). Por eso es necesario recurrir a tablas de compatibilidad para ver qué etiquetas funcionan en cada uno de ellos. A continuación tienes un ejemplo de tabla de compatibilidad de HTML5 para los distintos navegadores:

JavaScript

Este hecho lo convierte en el lenguaje ideal para, por ejemplo, validar datos en for-mularios, como paso previo al envío al servidor para su almacenamiento. Es lo que ocurre, por ejemplo, cuando en un formulario te aparece un mensaje que indica que falta un campo por rellenar, o que has puesto un valor de texto en un campo numérico, etc. Esas validaciones normalmente están hechas con JavaScript en el propio navegador.

Siguiente

JavaScript

El aspecto del código de JavaScript es el siguiente:

JavaScript ha evolucionado a versiones como AJAX (acrónimo de asynchronous JavaScript and XML) o JSON (acrónimo de JavaScript ob-ject notation), que permiten interaccionar con el servidor desde local en el navegador (como por ejemplo con una base de datos). Estos usos de JavaScript podemos verlos en formularios en los que se te pide que introduzcas un nombre de usuario y, al salir de ese campo, se te indica si dicho nombre de usuario ya lo tiene asignado otra persona.

Editores de páginas web

Los editores de páginas web son aplicaciones que permiten crear páginas web. Ya hemos visto al principio de la unidad que los editores WYSIWYG (what you see is what you get) nos permiten confeccionar una web como si estuviéramos escribiendo un documento con un procesador de texto y generan automáticamente el código fuente en HTML.

Los editores NVU (esta palabra se pronuncia como N-view, de new view) y Kompozer son editores avanzados, libres y multiplataforma. NVU ya no lo mantiene su autor desde su última versión, la 1.0. Desde ese momento comenzó el desarrollo de KompoZer, que se define como el desarrollo alternativo no oficial de NVU. KompoZer mejora las prestaciones de NVU.

Editores de páginas web

Otros editores de este tipo son Adobe Dreamweaver (anteriormente, Macromedia Dreamweaver) y BlueGriffon (software libre, soporta HTML5).

El entorno de trabajo de estos editores es el siguiente:

El último paso para que la página web que hemos creado pueda ser vista por otros usuarios es situar en un servidor de Internet. Desde ese momento debemos mantener el sitio web y actualizar sus contenidos en la medida en que sea necesario. Generalmente, las empresas que ofrecen servicios de Internet incluyen espacios para sus clientes. Algunos son gratuitos, como 007sites.com, webs.com o awardspace.com; en tal caso, suelen mostrar banners de publicidad en la página que alojamos. Otros servicios de alojamiento web no incluyen publicidad pero tienen condiciones limitadas o bien esperan que los usuarios acaben contratando planes de pago con mayores posibilidades.

Alojamiento de sitios web

Alojamiento de sitios web

En estos sitios nos debemos conformar con la URL que nos asignen para nuestra página, pero también tenemos la posibilidad de comprar un dominio con el nombre que queramos, algo usual para la mayoría de las empresas e incluso muchos particulares. Desde el inicio de Internet, los nombres de dominio han generado toda una industria a su alrededor. Los dominios más codiciados son aquellos que contengan palabras como juegos, viajes, vuelos, etc. Algunos de ellos fueron comprados por particulares con visión de negocio en Internet y posteriormente se vendieron por miles e incluso millones de dólares.

Transferencia de ficheros

Los programas de transferencia de ficheros (FTP) son los encargados de comunicar nuestro ordenador con el servidor que nos brinda alojamiento, de forma que ese conjunto de archivos que componen nuestro sitio web y que manipulamos en nuestro ordenador local puedan sustituir, cuando sea necesario, a los que aloja el servidor.

En el tema usaremos FileZilla, programa de transferencia de ficheros libre y multiplataforma. El navegador Firefox también sirve como programa de transferencia de ficheros si se le añade un complemento que se llama FireFTP, y algunos editores, como NVU o KompoZer, permite publicar directamente las páginas web.

Transferencia de ficheros

Todos los programas de FTP funcionan de un modo similar. Tienen una barra de direcciones en la que se debe introducir la dirección del servidor con el que se quiere conectar, el nombre de usuario y la contraseña cuando sea necesario. También contiene dos paneles: el de la izquierda, con el árbol de archivos del ordenador local, y el la derecha (vacío en la figura), en el que una vez conectados aparecerán las carpetas en nuestro sitio web remoto.

Bibliografía

• Autor: Arturo Gómez Gilaberte y Eva Parramón Ponz.

• Tecnologías de la Información y la Comunicación – 2º de Bachillerato.

• Editorial: Donostiarra.

• W3C. (2024). HTML5 y estándares web. (https://www.w3.org) MDN Web Docs. (2024).

• JavaScript: Guía para desarrolladores web. (https://developer.mozilla.org/es/)

• Nelsen, J. (2012). Usabilidad: Diseño de sitios web con el usuario en mente. Pearson Educación.

• Krug, S. (2014). No me hagas pensar: Una aproximación a la usabilidad web. New Riders.

• Choren, C. (2018). Diseño y desarrollo web con HTML5, CSS3 y JavaScript. Alfaomega.

FIN

¡GRACIAS!

Es la persona responsable de mantener el sitio web y actualizar los contenidos, así como de transferirlos al servidor.

Google permite una personalización muy avanzada de contenidos a través de su herramienta iGoogle. Desde ella puedes hacer cosas como personalizar noticias, recibir información del tiempo o habilitar un acceso a Gmail. También permite el uso de varios idiomas.

Una web tipo tendrá, a grandes rasgos, los siguientes elementos: 1. Encabezamiento 2. Marca o logotipo 3. Menú de navegación 4. Titular 5. Contenidos 6. Pie de página Todos los elementos del mismo tipo deben ser similares.

Estándares de publicación Los estándares de publicación más básicos son: • Utilizar hojas de estilo. • Asegurarse de que la página se ve bien en distintos navegadores. • Usar las etiquetas de texto alternativo para describir la función de los elementos visuales. • Facilitar la trascripción de los ficheros de sonido y la descripción de los vídeos. • Organizar las páginas usando encabezados, listas y una estructura consistente. • Realizar tablas de manera que se puedan leer línea a línea. • Revisar y validar el código HTML.

Requieren un conocimiento avanzado del lenguaje HTML. Editores de este tipo son: Komodo Edit (software libre), Sublime Text y Arachnophilia (gratuito).

Para acceder a las páginas web, los usuarios utilizan un navegador (Google Chrome, Mozilla Firefox, Internet Explorer, etc.), que se encarga de comunicar cada ordenador con los servidores que albergan las páginas web, descargar las páginas y mostrarlas.

Google utiliza, en sus páginas interiores, una letra estándar, sin serifa, de tamaño normal. Básicamente, se utilizan el color negro para los textos, el azul para los enlaces descriptivos y el verde para las direcciones URL. El subrayado sirve para los enlaces y no se emplea la cursiva. Para facilitar la lectura, en la página de resultados se resaltan con negrita las palabras buscadas.

1. Objetivo. ¿Qué se pretende conseguir con la web?2. Público. ¿A quién se dirige? 3. Contenidos. ¿Qué contenidos se quieren mostrar? 4. Directrices. ¿Qué especificaciones se usarán en cuanto a forma, organización y estructura? 5. Tecnología. ¿Con qué medios técnicos se cuenta para realizarla? 6. Tiempo. ¿De cuánto tiempo se dispone? 7. Presupuesto. ¿De cuánto dinero se dispone?

Google permite realizar búsquedas de diversos tipos. Las habituales búsquedas de texto se complementan con un buscador de imágenes y un buscador de vídeos, entre otros.

Son los programas encargados de comunicar el ordenador local con el servidor que brinda alojamiento, de forma que ese conjunto de archivos que componen el sitio web y que manipula el administrador en su ordenador local puedan sustituir, cuando sea necesario, a los que aloja el servidor.

El uso de colores es muy reducido. Se utiliza el blanco para el fondo de todas las páginas, y colores básicos para mostrar el texto (negro para el texto, azul y verde para los enlaces y rojo para destacados)

Google no dispone de una opción específica de cambio de tamaño de texto o de alto contraste (más allá de su propio diseño de fondo blanco con los textos en color oscuro).

En las páginas de Google hay un claro predominio del texto (descripción y enlaces). Prácticamente se renuncia al uso de imágenes, salvo en el logotipo y en los enlaces de paginación.

• Los blogs, que son como diarios en Internet, constituyen otra herramienta de expresión y comunicación. En ellos se publican de manera instantánea entradas (también llamadas artículos o posts) que se organizan cronológicamente empezando por la más reciente. Los lectores pueden publicar comentarios en cada una de las entradas.

En la evolución de la página inicial de Google se observa una simplificación visual en conjunto. En el logo se usan colores más planos y puros, una tipografía sencilla y más geométrica y que muestra una pérdida de volumen. El resultado es un logo más estilizado, limpio y moderno, sin perder la esencia de Google, que lo considera "simple, amigable y cercano".Esta sencilla página se ha ido actualizando continuamente y sigue la tendencia actual en el diseño, como es esperable de cualquier página web de referencia.

Son aquellos que nos permiten confeccionar una web como si estuviéramos escribiendo un documento con un procesador de texto y generan automáticamente el código fuente en HTML. Editores de este tipo son: Adobe Dreamweaver (anteriormente, Macromedia Dreamweaver), BlueGriffon (software libre), KompoZer (software libre y multiplataforma) y NVU (también software libre y multiplataforma). Estos dos últimos son muy similares y los utilizaremos en esta unidad.

Para que la página web que tiene el administrador pueda ser vista por otros usuarios, debe estar situada en un servidor de Internet, ofrecido normalmente por empresas privadas.

• Una wiki es un sitio web de construcción colectiva sobre un tema específico. Facilita la discusión sobre temas diversos y puede ser editada por cualquier usuario desde la Web (añadiendo, modificando o eliminando contenidos). La más conocida mundialmente es Wikipedia.

JavaScript es un lenguaje dinámico que se ejecuta en local en el ordenador, es decir, es el propio navegador (Microsoft Edge, Google Chrome, Mozilla Firefox, Opera...) el que se encarga de la ejecución de las instrucciones de este lenguaje. La diferencia con HTML es que, con éste, el navegador presenta la información, mientras que con JavaScript podemos interactuar con la página, es decir, el navegador interpreta y ejecuta el código.