TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

ACTIVIDAD DE COEVALUACIÓN
Una vez contestado el cuestionario anterior intercambia tu guía de aprendizaje con el compañero
de al lado. El profesor mencionará las respuestas correctas para cada reactivo.

Califica las respuestas de tu compañero y anota tu nombre en el espacio que dice REVISÓ.
Anota también el número de aciertos que obtuvo.

INTRODUCCIÓN AL DISEÑO WEB

ACTIVIDAD 1

Para iniciar una página web, primero debes conocer sus características y las reglas básicas
que debes de seguir para diseñarla, por lo tanto, realiza la lectura “¿Qué es HTML?” y
responde el cuestionario que se te presenta. Pregunta a tu profesor las dudas que te vayan
surgiendo.
¿Qué es HTML? (Definición de html - Qué es, Significado y Concepto, n.d.)

HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet. Se trata
de la sigla que corresponde a HyperText Markup Language, es decir, Lenguaje de Marcas de
Hipertexto, que podría ser traducido como Lenguaje de Formato de Documentos para Hipertexto.

Se trata de un formato abierto que surgió a partir de las etiquetas SGML (Standard Generalized
Markup Language). Concepto traducido generalmente como «Estándar de Lenguaje de Marcado
Generalizado» y que se entiende como un sistema que permite ordenar y etiquetar diversos
documentos dentro de una lista. Este lenguaje es el que se utiliza para especificar los nombres de
las etiquetas que se utilizarán al ordenar, no existen reglas para dicha organización, por eso se
dice que es un sistema de formato abierto.

Para qué sirve el HTML

EL HTML se encarga de desarrollar una descripción sobre los contenidos que aparecen como
textos y sobre su estructura, complementando dicho texto con diversos objetos (como fotografías,
animaciones, etc.).

Es un lenguaje muy simple y general que sirve para definir otros lenguajes que tienen que ver con
el formato de los documentos. El texto en él se crea a partir de etiquetas, también llamadas tags,
que permiten interconectar diversos conceptos y formatos.

Para la escritura de este lenguaje, pues, se crean las etiquetas que aparecen especificadas a
través de corchetes o paréntesis angulares: < y >. Entre sus componentes, los elementos dan
forma a la estructura esencial del lenguaje, ya que tienen dos propiedades (el contenido en sí
mismo y sus atributos).

Por otra parte, cabe destacar que el HTML permite ciertos códigos que se conocen como scripts,
los cuales brindan instrucciones específicas a los navegadores que se encargan de procesar el
lenguaje. Entre los scripts que pueden agregarse, los más conocidos y utilizados son JavaScript
y PHP.

SUBMÓDULO 1 15
 Formación para el Trabajo - Sexto Semestre

Marcado estructural y presentacional

El marcado estructural es el que estipula la finalidad del texto, aunque no define cómo se verá el
elemento. El marcado presentacional, por su parte, es el que se encarga de señalar cómo se verá
el texto más allá de su función.

Para conocer el código HTML que utiliza una página web, hay que seleccionar Ver código fuente
en nuestro navegador (como Internet Explorer o Mozilla Firefox). Al elegir esta opción, se abrirá el
editor de texto con el código HTML de la página que se está visualizando.

Breve historia del HTML

Este lenguaje fue desarrollado por la Organización Europea de Investigación Nuclear (CERN) en
el año 1945 con la finalidad de desarrollar un sistema de almacenamiento donde las cosas no se
perdieran, que pudieran ser conectadas a través de hipervínculos.

Primeramente crearon un dispositivo llamado «memex», el cual era considerado como un

suplemento para la memoria.

Posteriormente, Douglas Engelbart, diseñó un entorno de trabajo por computadora que recibiría
el nombre de oNLine System que poseía un catálogo para facilitar la tarea de búsqueda dentro de
un mismo organismo.

Recién en 1965, Ted Nelson acuñó el término hipervínculo, ideando una estructura que se
encontraba conectada de forma electrónica y que más tarde permitiría la creación de la World
Wide Web (1989), un sistema de hipertexto a través del cual era posible compartir una variada
información sirviéndose de Internet (servía para la comunicación entre investigadores nucleares
que formaran parte del CERN).

La primera descripción

El norteamericano Tim Berners-Lee fue el primero en proponer una descripción de HTML en un

documento que publicó en 1991. Allí describía veintidós componentes que suponen el diseño más
básico y simple del HTML.

El tipo de codificación que se utilizó para el desarrollo de este sistema de hipervínculos debía ser
comprendido, tanto por ordenadores tontos como por mega-estaciones, por eso fue necesario
crear uno absolutamente simples, tanto en lo que respectaba al lenguaje de intercambio (HTML),
como el que hacía referencia al protocolo de red (HTTP).

Al día de hoy existen los Editores Web que permiten que los diseñadores, a través de herramientas
gráficas que reciben el nombre de WYSIWYG puedan crear páginas web sin conocer el código
html, este se crea de forma automatizada, dándole estructura a la web y permitiendo que sea más
allá del ordenador donde es creada. Entre los recursos que pueden enlazarse al código HTML
se encuentran fotografías, vídeos, archivos de otras webs o incluso de la misma y todo tipo de
contenido que se encuentre subido a la red.

Definición de html - Qué es, Significado y Concepto. (n.d.). Definición.de. Recuperado el 31 de

octubre de 2021 de: https://definicion.de/html/

16 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

¿Cuáles son las características del lenguaje HTML?

Este lenguaje será el encargado de convertir un inocente archivo de texto inicial en una página web
con diferentes tipos y tamaños de letra, con imágenes impactantes, animaciones sorprendentes,
formularios interactivos, etc.

Estas características son las que marcaron el diseño de todos los elementos del WWW incluida la
programación de páginas web.

• La página web tiene que ser distribuida: la información repartida en páginas no muy grandes
enlazadas entre sí.
• Debe ser fácil navegar por la página.
• Tiene que ser compatible con todo tipo de ordenadores (PC, Macintosh, estaciones de trabajo,
móviles, etc.) y con todo tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS, etc.)
• Debe ser dinámico: el proceso de cambiar y actualizar la información debe ser ágil y rápido.

Reglas para diseñar una página web

Todo webmaster se enfrenta a un duro reto a la hora de crear un El seguir estas reglas
sitio web que sirva de plataforma para aumentar la visibilidad de
te ayudará para que tu
una empresa (Activa Internet 7 reglas básicas para un buen diseño
de tu web, n.d.) página sea un éxito

El diseño de una página web hoy en día es tan importante como lo puede llegar ser una imagen
corporativa o un diseño de logotipo.

El sitio de una marca debe transmitir los valores y esencia de ésta a través de un diseño bien
realizado y acorde al público meta.

Actualmente un sitio web puede llegar a representar completamente a una marca, ya que
hay empresas que ofrecen sus productos y servicios vía online, y en muchas ocasiones del
funcionamiento y estructura de la página depende que el usuario se quede en ella. (11 reglas para
diseñar una página web | paredro.com, n.d.)

Los usuarios de Internet apenas emplean unos segundos para decidir si permanecen en una
página y esta cuestión dependerá en gran medida de si disponemos de un buen diseño capaz de
mantener su atención. ¿Qué hacer para que nuestros lectores no abandonen nuestra web en 10
segundos? ¿cómo se debe diseñar una página web? Los elementos que se deben investigar para
crear una página correctamente pueden depender de muchos factores, desde el estilo de diseño
que se va implementar, los colores, la tipografía, pero aún más importante se debe saber hacia
quien ira dirigida.

Según estudios realizados por Web DAM Solutions y Digital Insights, el contenido visual se
procesa 60.000 veces más rápido que el texto en nuestro cerebro. Un 65% de la audiencia prefiere
consumir información a través de contenido visual. Además se ha demostrado que el contenido de
vídeo incrementa la conversión en un 86%. Estos datos nos ponen sobre aviso de la tendencia al
alza del consumo de contenido audiovisual y nos da algunas pistas sobre el enfoque que debemos
darle a nuestro sitio web, pero no debemos dejar de lado otros aspectos igual de importantes para
captar la atención de nuestros lectores.

SUBMÓDULO 1 17
 Formación para el Trabajo - Sexto Semestre

A continuación te presentamos una serie de recomendaciones que puedes tener en mente al

momento de construir desde 0 una nueva página de internet:

1.- REUNIR INFORMACIÓN: Investigar el historial de la marca, su giro, sus servicios y la

competencia.

2.- PLANTEAR UN OBJETIVO: El objetivo debe plantearse de acuerdo a la función que hará el
sitio en la red.

3.- CONOCER LOS OBJETIVOS DEL CLIENTE: Nunca se debe de olvidar la opinión del cliente,
aunque tu como diseñador o creativo presentes una idea, ésta debe de ir acorde a los objetivos
deseados del cliente, sin tu perder estilo.

4.- CONOCER EL PÚBLICO OBJETIVO: Se tiene que tomar en cuenta todo tipo de datos
demográficos sobre las personas que estarán frente a un monitor visitando la página. La edad,
el sexo, gustos, estilo de vida, cultura y hasta lugar de residencia.

5.- CREAR UN MAPA DEL SITIO: Es importante antes de ponerse a diseñar y programar, bocetar
las ideas y hacer distintas pruebas.

y Organiza el contenido
La usabilidad es una cuestión muy importante a la hora de mejorar la experiencia del
usuario. Una información bien estructurada y de fácil acceso permitirá una fácil navegación
por nuestra web. Estructurar el contenido con apartados y menús de manera clara permitirá
dirigir la atención hacia aquellos aspectos relevantes que queremos destacar.

6.- CREA O REÚNE UN CONTENIDO ATRACTIVO: El contenido tanto tipográfico como visual,
debe llamar la atención de la audiencia.

y Elección de fuentes apropiadas

La elección de la fuente de texto depende en gran medida del diseño y colores que hayamos
elegido para nuestro sitio web. En cualquier caso, no debemos buscar fuentes demasiado
complicadas. Para ello emplearemos una fuente de fácil lectura con un tamaño legible a
primera vista.

y El color de nuestro sitio web

Hasta hace muy poco tiempo la tendencia sobre el fondo de nuestro sitio web era utilizar el
color blanco, pero en la actualidad se empiezan a incorporar colores con tonos pastel que a
nivel visual son más atrayentes para el usuario. En cualquier caso no debemos olvidar que
debe existir un contraste adecuado entre el fondo y la fuente de texto.

y Imágenes de calidad
Las imágenes que elijamos para incorporar a nuestra web deben ser acordes con el
contenido de nuestras publicaciones. La calidad de la imagen es muy importante teniendo
en cuenta que es lo primero que va a atraer la atención de los usuarios. Buscaremos
imágenes bien definidas y con alta resolución para provocar un impacto visual. Conociendo
el poder que tiene una imagen puede ser aconsejable introducir textos en las mismas para
transmitir un mensaje en pocos segundos.

18 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

y El vídeo es un gran aliado

Las últimas tendencias nos revelan que el vídeo cada vez es más consumido, pero debemos
saber que su duración es muy importante. Los usuarios de Internet no emplearán más de 1
o 2 minutos para visualizar este tipo de contenidos. Si nuestros vídeos tienen una duración
mayor corremos en riesgo de no mostrar nuestro mensaje completo. La calidad del mismo
también es un factor determinante a la hora de la visualización por lo que debemos optar
por la alta definición.

7.- PLANIFICA: Empezar con las ideas básicas y crear un calendario de avances y metas.

8.- PROPÓN IDEAS FRESCAS Y NUEVAS AL CLIENTE: Puede que el cliente tenga una idea
muy definida para su sitio, pero si éstas no funcionan, se pueden pulir con una buena propuesta
de diseño, quedando todos conformes.

9.- CREAR: Definir el concepto de la página y no entregar un trabajo que no se entienda y sin
ningún estilo.

y Simplifica el mensaje
Para llegar al usuario debemos exponer nuestros mensajes de una manera clara y directa.
Simplifica tu mensaje utilizando frases cortas y a la vez contundentes e inspiradoras.
Provoca una reacción en los usuarios invitándoles a realizar alguna acción y utiliza los
espacios en blanco adecuadamente para crear un espacio limpio y ordenado.

10.- HAZ PRUEBAS: Antes de dar por terminado el proyecto, se debe realizar pruebas de que todo
funcione, desde códigos, botones, textos, videos y animaciones para que el cliente no tenga
quejas sobre el trabajo entregado.

y Diseño responsive
Los usuarios tienen la oportunidad de conectarse a Internet a través de múltiples dispositivos.
El diseño de nuestro sitio web debe adaptarse tanto a ordenadores de sobremesa o
portátiles como a smartphones, tablets o cualquier otra resolución de pantalla disponible
en el mercado. Un diseño responsive nos permitirá adaptarlo garantizando la correcta
visualización de nuestro espacio en cualquier dispositivo.

11.- CREAR UNA WEB QUE SE MANTENGA: Decir no a los 404s y a los actualízala.

11 reglas para diseñar una página web | paredro.com. (n.d.). Paredro.com. Retrieved October
31, 2021 from https://www.paredro.com/11-reglas-para-disenar-una -pagina-web/

Activa Internet 7 reglas básicas para un buen diseño de tu web. (n.d.). Activa Internet. Retrieved
October 31, 2021 from http://www.activainternet.es/7-reglas-basicas-buen -diseno-web/

SUBMÓDULO 1 19