PROGRESIÓN 5
Representa la solución de la situación,
fenómeno o problemática a través de páginas
web (hosting u hospedaje, dominio, FTP,
usuarios, contraseñas), con el lenguaje de
marcas Hypertext Markup Language o HTML
El diseño de una página web es
como la ventana de tu negocio en
el mundo digital: debe ser atractivo,
funcional y reflejar la esencia
de tu marca”.
ANÓNIMO
ALINEACIÓN DE LA PROGRESIÓN
Categorías
C4. Creatividad digital.
Subcategorías
S1. Creación de contenidos digitales.
S2. Desarrollo digital.
S3. Literacidad digital.
Aprendizajes de trayectoria
Diseña y elabora contenidos digitales mediante técnicas, métodos y recursos tecnológicos para fortalecer su creatividad e
innovar en su vida cotidiana.
Metas de aprendizaje
M1. Utiliza herramientas, servicios y medios digitales para crear contenidos, difundir información, potenciar su creatividad
e innovación.
M2. Realiza investigación, entornos digitales para extraer, recopilar, ordenar y graficar información aplicable a las áreas
del conocimiento.
Recursos sociocognitivos Recursos socioemocionales
Ciencias sociales y Pensamiento matemático. Responsabilidad social.
Número de horas
HMD 5 horas. HEI 2 horas.
HMD: Horas de estudio mediadas por el docente.
HEI: Horas de estudio independiente.
62
Cultura digital 2
Creando soluciones digitales
con HTML
bit.ly/404SV4K
ACTIVIDAD
• Mediante una lluvia de ideas, definirán en el grupo lo que conocen sobre las si-
guientes 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.
63
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.
64
Cultura digital 2
ACTIVIDAD 1
• 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.
ACTIVIDAD 2
Hosting y dominio
•
65
PROGRESIÓN 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.
66
Cultura digital 2
ACTIVIDAD 3
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.
67
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.
ACTIVIDAD 4 • 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
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> …
<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.
68
Cultura digital 2
Algunas de las etiquetas contienen atributos que En este ejemplo pode-
les dan una función única dentro de la página web. mos observar que la eti-
Vamos a ver tres ejemplos: queta <img> es una eti-
queta vacía, es decir, no
1. Enlaces: los enlaces o hipervínculos son se necesita cerrar. Ade-
textos en color azul que al presionarlos nos más de eso podemos
mandan a una página diferente o a una parte ver dos atributos más:
distinta de la página web. La etiqueta <a>
define un enlace, pero para poder usarla Width: nos ayuda a
debemos usar un atributo, los atributos son seleccionar el ancho de
palabras dentro de la etiqueta de apertura la imagen que vamos a
separados por un espacio y después del colocar. Si se omite esta
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>
69
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:
70
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.
71
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.
DE LABORATORIO 1
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
que vamos a elaborar una página web. Puedes seleccionar el sitio web con el que
indica, puedes realizar la
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
imagen de 9 puntos donde se abrirá un menú en el cual vas bit.ly/3QDgugJ
también lo puedes trabajar
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.
72
Como muchas de las he-
rramientas digitales, Goo-
gle Sites tiene la opción
de deshacer (Ctrl + z)
y rehacer (Ctrl + 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
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.
73
PROGRESIÓN 5
ÁREAS DE OOPORTUNIDAD
1. 4.
2. 5.
3. 6.
Evaluación de la progresión
• Para finalizar con la progresión, te invitamos a que
realices una coevaluación con uno de tus compa-
ñeros, esto te servirá para saber en qué puedes
mejorar la próxima vez, cuáles son tus áreas de
oportunidad y qué fue lo que hiciste bien.
• Si tu docente lo indica también puedes realizar
una autoevaluación.
LO HICE NO LO HICE
CRITERIO A EVALUAR
(2 PUNTOS) (O PUNTOS)
Investigué al menos 4 sitios web de hosting.
Actividad de inicio
Propuse al menos 4 nombres de dominio para mi sitio web.
Investigué al menos 3 sitios de web hosting con sus precios y
espacio que ofrecen por un año.
Actividad Llené la primera tabla con los datos que se me solicitaron.
de
desarrollo 1 Revisé si los nombres de mis dominios estaban disponibles.
Llene la segunda tabla con los datos que me solicitaron.
Realicé una página web con código HTML.
Actividad Agregué contenido a mi página web dentro de las etiquetas
de de </body>.
desarrollo 2
Utilicé un editor HTML en línea.
Realicé mi página 1 con todos los elementos que me solicitaron.
Actividad
Realicé mi página 2 con todos los elementos que me solicitaron.
de
desarrollo 3
Realicé mi página 3 con todos los elementos que me solicitaron.
74
LO HICE NO LO HICE
CRITERIO A EVALUAR
(2 PUNTOS) (O PUNTOS)
Realicé un sitio web en Google Sites.
Agregué varias páginas a mi sitio web.
Agregué bloques de contenido a las páginas de mi sitio web.
Práctica de Agregué texto a mis páginas del sitio web.
laboratorio
Agregué imágenes y gráficos a mis páginas del sitio web.
1
Agregue páginas hijo dentro de otras páginas.
Personalicé mi sitio web según la teoría del color.
Publiqué mi sitio web con un nombre descriptivo y único.
Compartí por redes sociales el enlace de mi sitio web para que
lo pudieran navegar.
Revisé al menos tres sitios web de mis compañeros.
Actividad Comenté al menos tres áreas de oportunidad a mis compañe-
de ros de clase.
cierre
Mis compañeros de clase me comentaron opciones de mejora
en mi sitio web.
Realicé las mejoras que me sugirieron mis compañeros.
Total de puntos
• ¡Felicidades! Terminaste con tu evaluación del
trabajo realizado en la progresión. Ahora vamos a
analizar los resultados según los puntos obtenidos
en la lista de cotejo con la siguiente tabla:
PUNTOS NO LO
RESULTADO RECOMENDACIÓN
OBTENIDOS HICE
19 puntos Trabajo Sigue con el buen trabajo que llevas hasta ahora y siempre trata de
o más Ideal dar lo mejor de ti.
15 a 18 Buen Hiciste un buen trabajo, pero tienes espacio para mejorar, trata de
puntos trabajo obtener un mejor puntaje la próxima vez.
Tienes muchas áreas de oportunidad, todos aprendemos a nuestro
14 puntos Necesito
propio ritmo. Pide ayuda a tu docente para saber en qué área
o menos mejorar
puedes mejorar.
75
Notas
