INSTITUCION EDUCATIVA DISTRITAL NUESTRA SEÑORA DE LA NIEVES
TALIANA SUAREZ
11-03
PROFESORA
MARISOL DE LA CRUZ
05 DE MAYO 2025 BARRAQUILLA
¿QUÉ EN UN SITIO WEB?
Un sitio web es un conjunto de páginas interconectadas alojadas en un dominio
específico y accesibles a través de internet. Estas estructuras permiten mostrar
información, vender productos, ofrecer servicios y prácticamente cualquier otra
cosa que sean capaces de imaginar.
2 CONSULTA EN EL BLOG ESCOLAR LAS FUNCIONES DE LAS SIGUIENTES
ETIQUETAS
<!doctype>, <html> </html>, <head> </head>, <title> </title>, <body> </body>,
<h1> … <h6>
<p> </p>, <font> </font>, <strong> </strong>, <em> </em>, <u> </u>, <sub> </sub>,
<a> </a>
<sup> </sup>, <br>, <nobr>, <p align=”…”> </p>, <ul> </ul>, , <ol> </ol>, <li> </li> ,
<img>
Estructura básica
• <!DOCTYPE>: Declara el tipo de documento y la versión de HTML.
• <html> </html>: Define el elemento raíz del documento HTML.
• <head> </head>: Contiene metadatos sobre el documento, como título,
autor, descripción, etc.
• <title> </title>: Establece el título de la página web, que se muestra en la
barra de título del navegador.
• <body> </body>: Contiene el contenido visible de la página web.
Encabezados y párrafos
• <h1> ... <h6>: Define encabezados de diferentes niveles, siendo <h1> el más
importante.
• . <p> </p>: Define un párrafo de texto.
Formato de texto
• <font> </font>: (obsoleto) Define la fuente, tamaño y color del texto. Se
recomienda usar CSS en su lugar.
• <strong> </strong>: Define texto en negrita, generalmente utilizado para
enfatizar importancia.
• <em> </em>: Define texto en cursiva, generalmente utilizado para enfatizar
énfasis.
• <u> </u>: Define texto subrayado.
• <sub> </sub>: Define texto subíndice.
• <sup> </sup>: Define texto superíndice.
Enlaces y saltos de línea
• <a> </a>: Define un enlace hipervínculo a otra página web o recurso.
• <br>: Define un salto de línea.
Imágenes y multimedia
• <img>: Define una imagen en la página web.
Listas
• <ul> </ul>: Define una lista desordenada (con viñetas).
• <ol> </ol>: Define una lista ordenada (numerada).
• 3. <li> </li>: Define un elemento de lista dentro de <ul> o <ol>.
Otras
• <nobr>: Evita que el texto se divida en varias líneas.
• <p align="..."> </p>: (obsoleto) Define la alineación del texto en un
párrafo. Se recomienda usar CSS en su lugar.
3 IDENTIFICA Y DESCRIBE LAS CARACTERÍSTICA DE UN SITIO WEB.
Un sitio web típico tiene las siguientes características:
Estructura
• Página de inicio o portada: Presenta una visión general del sitio y sus
contenidos.
• Navegación: Menús, botones o enlaces que permiten moverse entre
las diferentes páginas.
• Páginas de contenido: Secciones específicas para artículos, noticias,
productos, servicios, etc.
• Página de contacto: Formulario o información de contacto para
comunicarse con el propietario del sitio.
Diseño
• Diseño visual: Colores, fuentes, imágenes y elementos gráficos que
crean una identidad visual.
• Layout: Organización y disposición de los elementos en la página.
• Responsividad: Capacidad del sitio para adaptarse a diferentes
tamaños de pantalla y dispositivos.
FUNCIONALIDADES
• Interactividad: Elementos que permiten la interacción del usuario,
como formularios, botones, enlaces, etc.
• Búsqueda: Funcionalidad para buscar contenido dentro del sitio.
• Autenticación: Sistema de login y registro para acceder a contenido
restringido.
• Comentarios y foros: Espacios para que los usuarios compartan
opiniones y discutan temas relacionados.
CONTENIDO
• Textos: Artículos, noticias, descripciones de productos, etc.
• Imágenes: Fotografías, gráficos, iconos, etc.
• Videos: Contenido multimedia para presentar información de manera
más dinámica.
• Archivos descargables: Documentos, software, etc., disponibles para
su descarga.
TECNOLOGÍAS Y ESTÁNDARES
• HTML: Lenguaje de marcado para estructurar el contenido.
• CSS: Lenguaje de estilos para controlar la presentación.
• JavaScript: Lenguaje de programación para agregar interactividad.
• Protocolo HTTPS: Para garantizar la seguridad y privacidad de los
datos transmitidos.
• Accesibilidad: Cumplimiento de estándares para garantizar el acceso
a personas con discapacidades.
4 DESCRIBE LAS FUNCIONES DE UN SITIO WEB
Un sitio web puede tener diversas funciones dependiendo de su propósito y
objetivo. Aquí te presento algunas de las funciones comunes:
• Información: Proporcionar información sobre una empresa, producto,
servicio o tema específico.
• Comunicación: Permitir la comunicación entre la empresa y los usuarios a
través de formularios de contacto, correos electrónicos o chats en vivo.
• Venta en línea: Ofrecer productos o servicios para comprar en línea,
incluyendo procesos de pago y envío.
• Publicidad: Mostrar anuncios y promociones para atraer a nuevos clientes o
aumentar las ventas.
• Interacción con usuarios: Permitir a los usuarios interactuar con el sitio web
a través de comentarios, foros, encuestas, etc.
• Descarga de recursos: Ofrecer recursos como documentos, imágenes,
videos o software para descargar.
• Registro y membresía: Permitir a los usuarios registrarse y acceder a
contenido exclusivo o beneficios.
• Blog o noticias: Publicar artículos de blog o noticias para mantener a los
usuarios informados sobre la empresa o industria.
• Búsqueda: Permitir a los usuarios buscar contenido específico dentro del
sitio web.
• Integración con redes sociales: Conectar el sitio web con las redes sociales
de la empresa para ampliar la presencia en línea.
• Análisis y seguimiento: Recopilar datos y estadísticas sobre el tráfico y
comportamiento de los usuarios en el sitio web.
• Soporte técnico: Ofrecer asistencia y soporte técnico a los usuarios a través
del sitio web.
5. ¿CUÁLES SON LOS TIPOS DE SITIO WEB?
Existen varios tipos de sitios web, cada uno con un propósito específico. Aquí te
presento algunos de los más comunes:
• Sitios web corporativos: Presentan información sobre una empresa, su
historia, productos o servicios.
• Tiendas en línea (e-commerce): Permiten a los usuarios comprar productos
o servicios en línea.
• Blogs: Sitios web que publican artículos o entradas de blog sobre temas
específicos.
• Sitios web de noticias: Publican noticias y artículos sobre eventos actuales.
• Sitios web educativos: Ofrecen recursos educativos, cursos en línea,
tutoriales, etc.
• Sitios web de entretenimiento: Ofrecen contenido de entretenimiento, como
juegos, videos, música, etc.
• Sitios web de redes sociales: Permiten a los usuarios interactuar con otros,
compartir contenido, etc.
• Sitios web de portfolio: Presentan trabajos o proyectos realizados por una
persona o empresa.
• Sitios web de eventos: Promocionan eventos, conferencias, festivales, etc.
• Sitios web gubernamentales: Proporcionan información sobre servicios
gubernamentales, políticas, etc.
• Sitios web de salud y bienestar: Ofrecen información y recursos sobre salud
y bienestar.
• Sitios web de viajes y turismo: Proporcionan información sobre destinos
turísticos, hoteles, etc.
• Sitios web de finanzas y banca: Ofrecen servicios financieros, información
sobre inversiones, etc.
• Sitios web de arte y diseño: Presentan obras de arte, diseño gráfico, etc.
• Sitios web de tecnología: Publican noticias, artículos y recursos sobre
tecnología.
6. ¿QUÉ ES UN MICROSITIO?
Un micrositio es un sitio web pequeño y específico que se enfoca en un tema o
propósito particular. A menudo, se utiliza para:
• Promocionar un producto o servicio: Un micrositio puede ser creado para
promocionar un producto o servicio específico de una empresa.
• Crear una campaña de marketing: Los micrositios pueden ser utilizados para
crear campañas de marketing específicas y dirigidas a un público objetivo.
• Proporcionar información adicional: Un micrositio puede proporcionar
información adicional sobre un tema específico, sin sobrecargar el sitio web
principal.
• Crear una experiencia interactiva: Los micrositios pueden ser diseñados
para crear experiencias interactivas y atractivas para los usuarios.
Características de un micrositio:
• Enfoque específico: Un micrositio se enfoca en un tema o propósito
específico.
• Diseño minimalista: Los micrositios suelen tener un diseño minimalista y
enfocado en el contenido principal.
• Contenido conciso: El contenido de un micrositio es conciso y directo.
• Objetivo claro: Un micrositio tiene un objetivo claro, como generar leads o
aumentar las ventas.
Ventajas de un micrositio:
• Flexibilidad: Los micrositios pueden ser creados y lanzados rápidamente.
• Enfoque en el objetivo: Un micrositio se enfoca en un objetivo específico, lo
que puede aumentar la efectividad de la campaña.
• Medición de resultados: Los micrositios pueden ser utilizados para medir el
éxito de una campaña o promoción.
7. DEFINE QUE ES UN ONE PAGE WEB
Un One Page web, también conocido como sitio web de una sola página, es un tipo
de sitio web que presenta toda la información importante en una sola página. En
lugar de tener múltiples páginas y secciones, un One Page web condensa el
contenido en una sola página, que se desplaza verticalmente para mostrar
diferentes secciones.
Características de un One Page web:
• Una sola página: Todo el contenido se encuentra en una sola página.
• Secciones definidas: La página se divide en secciones claras y definidas,
como introducción, servicios, portfolio, contacto, etc.
• Desplazamiento vertical: El usuario puede desplazarse verticalmente para
acceder a diferentes secciones.
• Navegación simple: La navegación es simple y fácil de usar, con enlaces a
secciones específicas dentro de la página.
Ventajas de un One Page web:
• Simplicidad: Un One Page web es fácil de navegar y entender.
• Velocidad: Al tener menos páginas, un One Page web puede cargar más
rápido.
• Enfoque en el contenido: Un One Page web se enfoca en el contenido
principal y evita la distracción de múltiples páginas.
• Diseño minimalista: Un One Page web puede tener un diseño minimalista y
atractivo.
Uso adecuado de un One Page web:
• Sitios web personales: Un One Page web es ideal para sitios web personales
o portfolios.
• Pequeñas empresas: Un One Page web puede ser adecuado para pequeñas
empresas con un enfoque claro.
• Campañas de marketing: Un One Page web puede ser utilizado para
campañas de marketing específicas.
En resumen, un One Page web es un tipo de sitio web que presenta toda la
información importante en una sola página, con secciones definidas y navegación
simple. Es ideal para sitios web personales, pequeñas empresas y campañas de
marketing.
8. DEFINE LOS ELEMENTOS DE UN SITIO WEB (TÉCNICOS, DE ESTRUCTURA, DE
CONECTIVIDAD).
Un sitio web técnico de estructura de conectividad se refiere a la organización y
diseño de la infraestructura técnica que soporta un sitio web.
Elementos de infraestructura
• Servidores: Máquinas que almacenan y procesan los datos del sitio web.
• Almacenamiento: Sistemas de almacenamiento de datos, como bases de
datos o sistemas de archivos.
• Redes: Infraestructura de red que conecta los servidores y permite la
comunicación entre ellos.
• Firewalls: Sistemas de seguridad que controlan el tráfico de red y protegen
el sitio web de ataques.
Elementos de conectividad
• Protocolos de comunicación: Protocolos como HTTP, HTTPS, FTP, etc. que
permiten la comunicación entre el sitio web y los usuarios.
• Puertos: Puertos de red que se utilizan para la comunicación entre el sitio
web y los usuarios.
• Direcciones IP: Direcciones IP que identifican el sitio web en la red.
• DNS: Sistema de nombres de dominio que traduce las direcciones IP en
nombres de dominio.
Elementos de seguridad
• Certificados SSL/TLS: Certificados que cifran la comunicación entre el sitio
web y los usuarios.
• Autenticación: Sistemas de autenticación que verifican la identidad de los
usuarios.
• Autorización: Sistemas de autorización que controlan el acceso a los
recursos del sitio web.
• Monitoreo de seguridad: Sistemas que monitorean el sitio web para detectar
y responder a incidentes de seguridad.
Elementos de rendimiento
• Caching: Sistemas que almacenan copias de los datos más frecuentemente
solicitados para mejorar el rendimiento.
• Balanceo de carga: Sistemas que distribuyen el tráfico de red entre varios
servidores para mejorar el rendimiento y la disponibilidad.
• Optimización de código: Técnicas que mejoran el rendimiento del código del
sitio web.
• Monitoreo de rendimiento: Sistemas que monitorean el rendimiento del sitio
web para detectar y resolver problemas.
9. IDENTIFICA Y DEFINE LOS ELEMENTOS TÉCNICOS DE UN SITIO WEB.
Elementos de Front-end
• HTML (HyperText Markup Language): Lenguaje de marcado que se utiliza
para estructurar y organizar el contenido de un sitio web.
• CSS (Cascading Style Sheets): Lenguaje de estilo que se utiliza para
controlar la apariencia y el diseño de un sitio web.
• JavaScript: Lenguaje de programación que se utiliza para agregar
interactividad y dinamismo a un sitio web.
• Frameworks y bibliotecas: Herramientas como React, Angular, [Link],
jQuery, etc. que facilitan el desarrollo de sitios web.
Elementos de Back-end
• Lenguajes de programación: Lenguajes como PHP, Python, Ruby, Java, etc.
que se utilizan para desarrollar la lógica del sitio web.
• Frameworks y bibliotecas: Herramientas como Laravel, Django, Ruby on
Rails, Spring, etc. que facilitan el desarrollo de sitios web.
• Bases de datos: Sistemas de almacenamiento de datos como MySQL,
PostgreSQL, MongoDB, etc.
• Servidores web: Software como Apache, Nginx, IIS, etc. que gestionan las
solicitudes HTTP y sirven el contenido del sitio web.
Elementos de infraestructura
• Servidores: Máquinas que alojan el sitio web y gestionan las solicitudes
HTTP.
• Almacenamiento: Sistemas de almacenamiento de datos como discos
duros, SSD, etc.
• Redes: Infraestructura de red que conecta los servidores y permite la
comunicación entre ellos.
• Seguridad: Medidas de seguridad como firewalls, certificados SSL/TLS,
autenticación, etc. que protegen el sitio web de ataques y vulnerabilidades.
Elementos de diseño y experiencia del usuario
• Diseño responsivo: Diseño que se adapta a diferentes dispositivos y
tamaños de pantalla.
• Interfaz de usuario: Diseño de la interfaz que interactúa con el usuario.
• Experiencia del usuario: Diseño que se enfoca en la satisfacción y la
facilidad de uso del sitio web.
Elementos de optimización y rendimiento
• Optimización de código: Técnicas que mejoran el rendimiento del código del
sitio web.
• Caching: Sistemas que almacenan copias de los datos más frecuentemente
solicitados para mejorar el rendimiento.
• Compresión de archivos: Técnicas que reducen el tamaño de los archivos
para mejorar la velocidad de carga.
• Monitoreo de rendimiento: Herramientas que monitorean el rendimiento del
sitio web y detectan problemas.
10. IDENTIFICA Y DEFINE LOS ELEMENTOS DE ESTRUCTURA DE UN SITIO WEB.
Elementos básicos
• Cabecera (Header): Sección superior de la página que contiene el logotipo,
menú de navegación y otros elementos importantes.
• Cuerpo (Body): Sección principal de la página que contiene el contenido
principal.
• Pie de página (Footer): Sección inferior de la página que contiene
información de contacto, enlaces a redes sociales, etc.
Elementos de navegación
• Menú de navegación: Lista de enlaces que permiten a los usuarios acceder
a diferentes secciones y páginas del sitio web.
• Barra de navegación: Barra que contiene enlaces a las secciones principales
del sitio web.
• Enlaces de navegación: Enlaces que conectan diferentes páginas o
secciones dentro del sitio web.
Elementos de contenido
• Título: Título de la página que se muestra en la cabecera y en la barra de título
del navegador.
• Encabezados: Encabezados que dividen el contenido en secciones y
subsecciones.
• Párrafos: Bloques de texto que contienen información sobre un tema
específico.
• Imágenes: Imágenes que se utilizan para ilustrar el contenido y mejorar la
apariencia de la página.
• Videos: Videos que se utilizan para presentar información de manera más
dinámica.
Elementos de interacción
• Formularios: Formularios que permiten a los usuarios ingresar información
y enviarla al servidor.
• Botones: Botones que permiten a los usuarios realizar acciones específicas,
como enviar un formulario o realizar una compra.
• Enlaces: Enlaces que conectan la página con otros recursos en línea o con
otras páginas del sitio web.
Elementos de diseño
• Diseño responsivo: Diseño que se adapta a diferentes dispositivos y
tamaños de pantalla.
• Tipografía: Fuentes y estilos de texto que se utilizan para presentar el
contenido.
• Colores: Colores que se utilizan para mejorar la apariencia y la legibilidad del
contenido.
• Imágenes de fondo: Imágenes que se utilizan como fondo de la página o de
secciones específicas.
En resumen, los elementos de estructura de una página web incluyen la cabecera,
cuerpo, pie de página, menú de navegación, barra de navegación, enlaces de
navegación, título, encabezados, párrafos, imágenes, videos, formularios, botones,
enlaces, diseño responsivo, tipografía, colores y imágenes de fondo. Estos
elementos trabajan juntos para crear una página web funcional y atractiva.
11. Identifica Y Define Los Elementos De Conectividad De Un Sitio Web.
Elementos de conectividad
• Enlaces: Conexiones entre páginas web que permiten a los usuarios navegar
entre ellas.
• URLs: Direcciones únicas que identifican cada página web y permiten
acceder a ella.
• Protocolos de comunicación: Protocolos como HTTP y HTTPS que permiten
la comunicación entre el cliente y el servidor.
• Puertos: Puertos de red que se utilizan para la comunicación entre el cliente
y el servidor.
• Direcciones IP: Direcciones únicas que identifican cada dispositivo en la red
y permiten la comunicación entre ellos.
• DNS (Sistema de Nombres de Dominio): Sistema que traduce las
direcciones IP en nombres de dominio fáciles de recordar.
• Certificados SSL/TLS: Certificados que cifran la comunicación entre el
cliente y el servidor para proteger la privacidad y la seguridad de los datos.
Elementos de interacción
• Formularios: Formularios que permiten a los usuarios ingresar información
y enviarla al servidor.
• Botones: Botones que permiten a los usuarios realizar acciones específicas,
como enviar un formulario o realizar una compra.
• Enlaces dinámicos: Enlaces que se generan dinámicamente en función de
la interacción del usuario con el sitio web.
• API (Interfaz de Programación de Aplicaciones): Interfaces que permiten a
los desarrolladores acceder a funcionalidades y datos de un sitio web o
aplicación.
Elementos de integración
• Integración con redes sociales: Integración de un sitio web con redes
sociales para permitir la compartición de contenido y la autenticación de
usuarios.
• Integración con servicios externos: Integración de un sitio web con servicios
externos, como pagos en línea o servicios de mapas, para mejorar la
funcionalidad del sitio.
• Integración con bases de datos: Integración de un sitio web con bases de
datos para almacenar y recuperar datos de manera eficiente.
. 12. CONSULTA COMO AÑADIR UN CHAT A UN SITIO WEB.
Opciones para añadir un chat
• Servicios de chat en la nube: Utiliza servicios como Zendesk, Freshdesk,
(enlace no disponible) o LiveChat que ofrecen soluciones de chat en la nube.
• Plugins y módulos: Utiliza plugins y módulos para plataformas como
WordPress, Joomla o Drupal que permiten integrar un chat en tu sitio web.
• Desarrollo personalizado: Desarrolla un chat personalizado utilizando
tecnologías como JavaScript, HTML y CSS.
Pasos para añadir un chat
• Elige un servicio o plugin: Selecciona un servicio de chat en la nube o un
plugin que se adapte a tus necesidades.
• Crea una cuenta: Crea una cuenta en el servicio de chat o plugin que hayas
seleccionado.
• Configura el chat: Configura el chat según tus necesidades, incluyendo la
apariencia, el comportamiento y las funcionalidades.
• Añade el código: Añade el código del chat a tu sitio web, ya sea mediante un
plugin o manualmente.
• Prueba el chat: Prueba el chat para asegurarte de que funcione
correctamente y se integre bien con tu sitio web.
Ventajas de añadir un chat
• Mejora la experiencia del usuario: Un chat en vivo puede mejorar la
experiencia del usuario y aumentar la satisfacción del cliente.
• Aumenta la interacción: Un chat puede aumentar la interacción con tus
visitantes y ayudar a resolver sus dudas y preguntas.
• Mejora la conversión: Un chat puede ayudar a mejorar la conversión y
aumentar las ventas.
Consideraciones
• Privacidad y seguridad: Asegúrate de que el chat sea seguro y proteja la
privacidad de los usuarios.
• Soporte técnico: Asegúrate de que tengas un equipo de soporte técnico
capacitado para responder a las preguntas y dudas de los usuarios.
• Integración con otros sistemas: Asegúrate de que el chat se integre bien con
otros sistemas y herramientas que utilices en tu sitio web.
