Cultura digital 2

Plan de aula Creando soluciones digitales En conexión

con HTML Consulta la siguiente
página, es un video
que explica lo que
es un hosting.

bit.ly/404SV4K

INICIO ACTIVIDAD 1

• Definirá en el salon lo que conoce sobre las siguientes palabras: hosting, dominio,
FTP, usuarios, colaboración, HTML, CSS, sitio web, URL, navegador web.

Cimientos digitales
Las páginas web son fundamentales en la era digital, ya que permiten a las empresas
y organizaciones tener presencia en línea, alcanzar a audiencias globales y ofrecer
información y servicios de manera accesible las 24 horas del día. Además, son una po-
derosa herramienta de marketing y comunicación que facilita la interacción con clien-
tes y usuarios. Su importancia radica en su capacidad para impulsar la visibilidad, el
crecimiento empresarial y la difusión de información en la sociedad actual.

El mundo digital ha transformado por completo la forma en que aborda-

mos situaciones, fenómenos y problemáticas. En esta progresión, ex-
ploraremos las páginas web, utilizando herramientas como el hosting,
dominio, FTP, usuarios y contraseñas, junto con el lenguaje de marcas
HTML, las cuales se convierten en la clave para representar soluciones
efectivas en la era digital.

Antes de sumergirnos en la creación de soluciones web, es fundamen-

tal entender los cimientos de la tecnología detrás de ellas. El hosting
o hospedaje web actúa como el terreno donde construimos nuestras
páginas. Es como el espacio en blanco en el que pintamos nuestro cua-
dro. El dominio, por otro lado, es la dirección que guía a los visitantes
hacia ese espacio.

1
 PROGRESIÓN 5

Hosting
El término hosting se refiere al servicio de aloja-
miento web que proporciona a las personas y a
las empresas un espacio en servidores de internet
para almacenar y publicar su contenido web. Estos
servidores están diseñados para estar en línea las
24 horas del día, los 7 días de la semana, lo que
permite que los sitios web sean accesibles en cual-
quier momento desde cualquier lugar del mundo.

Dominio
Un dominio se refiere a la dirección única y legi-
ble que se utiliza para acceder a un sitio web en Usuarios
internet. Funciona como una especie de “nombre”
para identificar un sitio web específico en la red. Un Los usuarios son individuos o entidades que inte-
dominio suele constar de dos partes: el nombre del ractúan con sistemas informáticos y tienen un nom-
sitio (por ejemplo: miempresa) y una extensión de bre o indicador único para acceder a los servicios
dominio (por ejemplo: .com o .org). en línea. Cada usuario tiene una identidad única que
se utiliza para acceder a recursos y datos específi-
FTP cos. Los usuarios pueden ser personas, empleados
de una organización o sistemas automatizados que
FTP, que significa protocolo de transferencia de ar- requieren acceso a información o funciones.
chivos (file transfer protocol en inglés), es un están-
dar de red utilizado para transferir archivos entre Contraseñas
un cliente y un servidor en una red de computado-
ras, como internet. El FTP permite la transferencia Las contraseñas son cadenas de caracteres se-
eficiente de archivos, ya sean documentos, imáge- cretas que los usuarios deben proporcionar al ini-
nes, videos o cualquier otro tipo de datos, de una ciar sesión en sistemas o servicios en línea. Su
ubicación a otra a través de una conexión de red. principal función es autenticar la identidad del usua-
Generalmente se requiere de un usuario y una con- rio y garantizar que sólo las personas autorizadas
traseña para usar un FTP. tengan acceso a la cuenta o recursos protegidos.

2
 Cultura digital 2

DESARROLLO ACTIVIDAD 2

• Investiga cinco diferentes servicios de hosting

web y propón cinco nombres diferentes para
una página web que quieras realizar:

DIRECCIÓN DE INTERNET

1.

2.

Servicio
3.
de hosting

4.

5.

NOMBRE DE SITIOS

2.

Dominio
3. (creado
por mí)

4.

5.

DESARROLLO ACTIVIDAD 3

Hosting y dominio
• Ahora que hiciste una pequeña investigación
acerca de los servicios de hosting y los domi-
nios, te habrás dado cuenta de que los hostings
suelen tener un costo anual, por lo que
expande un poco más tu búsqueda anterior y
llena los datos de la tabla.

3
 PROGRESIÓN 5

DIRECCIÓN COSTO ESPACIO EN COMENTARIOS

DE INTERNET ANUAL (PESOS) LA NUBE (Mb) ADICIONALES

1.

2.

3.

4.

5.

• Ahora bien, en el caso de los dominios te ha- Utiliza la siguiente página para verificar si tus
brás dado cuenta que muchas veces los domi- 5 dominios están disponibles. Si es necesario
nios ya están ocupados y que es difícil encon- propón nuevos dominios hasta que encuentres
trar un nombre único que no haya sido tomado. al menos 3 disponibles.

DOMINIO DISPONIBLE/NO DISPONIBLE OPCIONES SIMILARES

1.

2.

3.

4.

5.

6.

4
 Cultura digital 2

DESARROLLO ACTIVIDAD 4

Creando tu primera página web con HTML

• HTML (Hypertext Markup Language) es el len-
guaje fundamental para crear páginas web en
la world wide web. En esta actividad, te
introduci-rás a los conceptos básicos de HTML
y crearás tu propia página web simple. HTML
utiliza eti-quetas o marcadores para definir la
estructura y el contenido de una página web. A
lo largo de esta actividad, aprenderás a utilizar
etiquetas HTML para crear títulos, párrafos,
listas, enla-ces e imágenes.

Ésta es la estructura básica de HTML:

El lenguaje HTML utiliza etiquetas que son palabras

clave que se escriben entre los símbolos de menor
que < y mayor que >. Estas etiquetas por lo gene-
ral tienen una etiqueta de inicio y una etiqueta de
cierre. Por ejemplo, <html> al inicio del documento
y la misma etiqueta al final </html> y como puedes
observar para indicar que es la etiqueta de cierre se
agrega una diagonal / al inicio de la palabra.

Todas las páginas deben llevar al menos cuatro eti-

quetas que son las siguientes:

ETIQUETA DESCRIPCIÓN

No es una etiqueta como tal, es una declaración que sirve para indicarle al nave-
<!DOCTYPE html>
gador qué tipo de documento es nuestro archivo.

<head> Es el encabezado de tu página web y contiene información general, como regla

</head> general dentro de esta etiqueta va colocada la etiqueta de <title>.

<title> En esta etiqueta se escribe el nombre de nuestra página web, este nombre apare-
</title> ce en la pestaña del navegador.

<body> En esta etiqueta colocarás el contenido de tu página, puede ser una infinidad de
</body> elementos, suele ser la etiqueta que contenga más contenido.

5
 PROGRESIÓN 5

• Importante: si no tienes un
bit.ly/408Trin
editor de HTML instalado en
tu computadora o celular pue-
des usar el siguiente editor en
línea de forma gratuita y vien-
do en tiempo real los cambios
de tu página web.

DESARROLLO ACTIVIDAD 5 • Revisa el siguiente código y analiza el uso de

las diferentes etiquetas:

Creando tu página web con HTML usando

enlaces e imágenes
Ahora que has visto cómo es la estructura de las
páginas con HTML vamos a agregar un poco de
contenido a la página, de ahora en adelante sólo
editaremos el contenido de la etiqueta <body>
pero es importante que agregues toda la estructura
HTML así como asignar un nombre a tu página.

Dentro del cuerpo (<body>) de nuestra página po-

demos agregar texto que estará en nuestra página,
por lo general se suelen utilizar como base las si-
guientes etiquetas:

ETIQUETA DESCRIPCIÓN

Es una etiqueta de párrafo, todos los párrafos deberán estar contenidos en esta etiqueta
<p>
y puedes usar tantas como quieras. Después de usar esta etiqueta el siguiente texto salta
</p>
una línea.

Se usa para escribir un encabezado que tiene texto más grande y con negritas, se pueden
<h1>
usar múltiples encabezados de distintos tamaños con sólo cambiar el número <h2></h2> …
</h1>
<h6></h6>.

Ésta es una etiqueta vacía y no se debe de cerrar, sólo se escribe una vez y es utilizada para
<br>
hacer un salto de línea. Puedes saltar tantas líneas como tú quieras.

6
 Cultura digital 2

Algunas de las etiquetas contienen atributos que En este ejemplo pode- Importante:
les dan una función única dentro de la página web. mos observar que la eti- Para q ue funcione co-
Vamos a ver tres ejemplos: queta <img> es una eti- rrectamente la imagen
queta vacía, es decir, no en nuestra página web
1. Enlaces: los enlaces o hipervínculos son se necesita cerrar. Ade- debemos de colocar el
textos en color azul que al presionarlos nos más de eso podemos archivo de la imagen en
mandan a una página diferente o a una parte ver dos atributos más: el mismo lugar donde
distinta de la página web. La etiqueta <a> guardamos nuestro ar-
define un enlace, pero para poder usarla Width: nos ayuda a
debemos usar un atributo, los atributos son chivo HTML. Si movemos
seleccionar el ancho de
la imagen de ahí veremos
palabras dentro de la etiqueta de apertura la imagen que vamos a
un recuadro con una x
separados por un espacio y después del colocar. Si se omite esta roja según el navegador.
atributo escribimos un símbolo de igual = etiqueta la imagen apare-
seguido de un texto entre comillas: cerá en tamaño real.

<a herf="https://www.conexioneditorial. Height: nos ayuda a seleccionar el alto de la ima-

mx/">Visita la página de Conexión </a> gen, podemos omitir esta etiqueta y automática-
mente se colocará la altura en proporción al ancho
En este caso href es el atributo y el texto del tamaño real de la imagen.
entre comillas es la página a la que me va a
dirigir el enlace. El texto entre las etiquetas 3. Por último, el atributo que vamos a ver es
será el texto del enlace. el de style que suele usarse en la etiqueta
<p> o <h1>. El contenido de este atributo
2. Imágenes: las imágenes son elementos puede variar, pero en nuestro ejemplo va-
esenciales de las páginas web y es importan- mos a ver dos variantes:
te saber cómo insertar imágenes. Para esto a) style=color: red, en este caso el color
se usa la etiqueta <img> y el atributo src, del texto será de color rojo, puedes co-
que es el que contiene el lugar donde esta locar diferentes colores con palabras en
nuestra imagen que puede ser un archivo de inglés como blue, green, yellow, etcétera.
nuestra computadora o un lugar en internet. b) style=text-align: center, en este caso
nuestro texto va a estar centrado, también
<img src="imagen_conexion.jpg" puedes usar las palabras right o left para
width="500" height="600"> acomodar el texto de forma diferente.

CÓDIGO HTML RESULTADO

<!DOCTYPE html>
<html>

<head>
<title>Mi página con estilo</title>
</head> Éste es un encabezado que está
<body> centrado y de color azul
<h1 style= “color:blue;text-align:center”>Éste es un
encabezado que está centrado y de color azul</h1> Éste es un párrrafo en color verde
<p> style= “color:green;”>Éste es un párrafo en color
verde</p>
</body>
</html>

7
 PROGRESIÓN 5
En conexión
• Muy bien, ahora es momento de practicar lo aprendido. Vas a realizar tres páginas
En el siguiente enlace
puedes encontrar un
web diferentes según se te indica:
tutorial de HTML con
muchísimos ejemplos
y un editor en línea PÁGINA CARACTERÍSTICAS
que puedes usar para
practicar con tus
códigos HTML. 1. Crea una página que contenga título.
2. Dos encabezados de diferentes tamaños que estén
bit.ly/46Iy75B Página 1
centrados y de color diferente.
3. Al menos tres párrafos con alineación y color a tu gusto.

1. Todos los elementos de la página 1.

2. Dos enlaces, uno al principio y uno al final de la página
Página 2 que te lleven a dos páginas de internet.
3. Inserta al menos dos imágenes con tamaños diferentes
usando los atributos de ancho, alto y alineación de texto.

1. Crea una página completamente desde cero con todos

los elementos aprendidos acerca de un tema que te llame
Página 3
mucho la atención, algo que sea tu pasión, que te
guste mucho.

Crear una página web solía requerir un conocimiento profundo de HTML y otras tecno-
logías de desarrollo web. Sin embargo, en la actualidad, existen herramientas y plata-
formas que hacen que la creación de sitios web sea accesible para cualquier persona,
incluso sin experiencia en codificación. Exploraremos cómo puedes crear páginas web
sin necesidad de escribir código HTML.

Si deseas crear páginas web sin la necesidad de conocer HTML o tener habilidades de
programación, existen varias plataformas en línea que ofrecen servicios de creación de
sitios web con interfaces intuitivas y amigables. Aquí tienes algunas de las más populares:

8
 Cultura digital 2

PÁGINAS CARACTERÍSTICAS LOGO

Es una plataforma de creación de sitios web muy popular que ofrece una
amplia variedad de plantillas y herramientas de diseño. Su editor visual
Wix
te permite personalizar tu sitio web de manera sencilla sin necesidad
de conocimientos de programación.

Es conocido por su facilidad de uso y sus características de arrastrar y soltar.

Weebly Ofrece opciones de diseño flexibles y una variedad de widgets para personalizar
tu sitio web.

Se enfoca en la creación de sitios web elegantes y visualmente atractivos.

Squarespace Ofrece plantillas profesionales y un editor de diseño intuitivo para personali-
zar tu sitio.

Aunque WordPress se asocia a menudo con la programación, ofrece una platafor-

WordPress.com ma de creación de sitios web más amigable para principiantes. Puedes elegir entre
una variedad de temas y personalizar tu sitio con complementos.

Es otra opción sencilla para crear tu sitio web. Ofrece una versión gratuita y de pago
Jimdo
con varias características de diseño y opciones de personalización.

Es una plataforma más avanzada, pero con una interfaz de diseño visual poderosa.
Webflow
Es ideal si deseas más control sobre el diseño de tu sitio web.

Si buscas una solución simple y gratuita, Google Sites te permite crear sitios web
Google Sites
básicos utilizando herramientas familiares de Google como Docs y Drive.

Estas plataformas suelen ofrecer planes gratuitos y

de pago, dependiendo de tus necesidades. Puedes
explorarlas y elegir la que mejor se adapte a tus
objetivos y nivel de experiencia. No necesitas co-
nocimientos de HTML para crear un sitio web pro-
fesional y atractivo con estas herramientas.

Hoy en día, la creación de páginas web se ha vuelto

más accesible gracias a las siguientes tendencias.

Plataformas de
creación de sitios web
Existen plataformas en línea que proporcionan
herramientas intuitivas de arrastrar y soltar para
crear páginas web. Estas plataformas, como
Wix, Weebly y Squarespace, eliminan la necesi-
dad de escribir código HTML.

9
 PROGRESIÓN 5
En conexión
Tutorial para crear un
sitio web en Google Site.
Constructores de páginas web: los constructores de páginas web, como WordPress
con editores visuales y complementos, permiten a los usuarios crear sitios web sin
bit.ly/3FsKx5F codificar directamente.

Plantillas y temas: se ofrecen una amplia variedad de plantillas y temas prediseñados

que puedes personalizar según tus necesidades. Estas plantillas a menudo incluyen
diseños y estilos predefinidos.

DESARROLLO ACTIVIDAD 6

Concentrado y compartiendo la información

Ahora vamos a retomar la presentación que realizaste en la progresión 2, con la
Si tu docente te lo
indica, puedes realizar la
que vamos a elaborar una página web. Puedes seleccionar el sitio web con el que
práctica con otro tema desees trabajar. En nuestro caso usaremos Google Sites:
que parezca relevante o
interesante para la clase; Paso 1. Inicia sesión con una cuenta de Google y da clic en la
bit.ly/3QDgugJ
también lo puedes trabajar imagen de 9 puntos donde se abrirá un menú en el cual vas
de forma individual a buscar Google Sites.
o por equipos.
• Nota: si no aparece Google Sites puedes seleccionar el bo-
tón “Más de Google” donde aparecerán todas las herramien-
tas de Google a tu disposición.

Paso 2. Selecciona Crear un sitio > En blanco.

Paso 3. Selecciona el tipo de Bloque de contenido

que quieres que tu página principal contenga del
lado derecho en el menú Insertar.
Paso 4. Selecciona del lado derecho la opción de Pági-
nas y empieza a poblar el sitio con las páginas que
creas necesarias.
Paso 5. Si quieres que una página sea subpágina de
otra, sólo debes arrastrarla hasta la página deseada.

10
 Cultura digital 2

Como muchas de las he-

rramientas digitales, Goo-
gle Sites tiene la opción
de deshacer (C trl + z)
y rehacer (C trl + y) los
cambios realizados, por lo
que no temas a explorar
la herramienta.

Paso 6. Rellena de información de cada una

de las páginas, recuerda explorar todas las
opciones de la herramienta, todos lo tipo de
bloque de contenido y todos los temas.
Paso 7. Personaliza tu sitio web con los colores
razonables según la teoría del color que vi-
mos en las progresiones anteriores.
Paso 8. Presiona el botón Publicar del lado
derecho.

• ¡Excelente!, ya has publicado tu sitio web y es

posible verlo desde cualquier parte el mundo,
¡bien hecho! Ahora sólo tienes que compartirlo
con tu comunidad.

CIERRE ACTIVIDAD 7

Compartiendo mi sitio web

Paso 9. En la ventana deberás dar color a un • Para finalizar, copia el enlace de tu sitio web y
nombre personalizado de tu sitio web para compártelo por medio de redes sociales como
que sea único. Luego presiona nuevamen- Facebook, Instagram, WhatsApp, etc. Pide a tus
te Publicar. compañeros que visiten tu sitio web y te comen-
Paso 10. Después de publicar tu sitio web po- ten áreas de oportunidad. Coloca en la tabla de
drás ver en el botón Publicar varias opcio- siguiente página al menos tres áreas de oportu-
nes, selecciona Ver sitio web publicado nidad que te hayan dado tus compañeros y pos-
para poder visualizar o compartir tu sitio web. teriormente aplícalas para mejorar tu sitio web.

11
 PROGRESIÓN 5

ÁREAS DE OOPORTUNIDAD

1. 4.

2. 5.

3. 6.

12