UNIVERSIDAD DEL CENTRO DE VERACRUZ

TRES VALLES, VER., MEXICO

LICENCIATURA EN INGENIERIA INDUSTRIAL

Clave: 30MSU9042R

PROGRAMACION I

UNIDAD IV

SELECCIÓN

DAVID LEÓN CABALLERO RONQUILLO

Materia: PROGRAMACION INGENIERIA INDUSTRIAL

Docente: MSC. JOSE JAVIER BOLAÑOS PERALTA

Fecha 20/04/2024
INDICE

1. QUE ES EL MÉTODO POST

2. QUE ES EL MÉTODO GET

3. QUE ES UN NAME DE UN INPUT

4. QUE ES BOOTSTRAP

5. COMO ENLAZAR UN BOOTSTRAP

6. QUE ES UN LABEL EN HTML

7. QUE ES HTML

8. ESTRUCTURA GENERAL DE HTML

9. ETIQUETAS PRINCIPALES DE HTML

10.REFERENCIAS ELECTRONICAS
 1. ¿Qué es el método POST?

El método POST es uno de los métodos de solicitud HTTP utilizados por los navegadores y
otras aplicaciones para enviar datos al servidor. En comparación con otros métodos HTTP
como GET, el método POST envía los datos en el cuerpo de la solicitud, en lugar de en la
URL. Esto permite enviar una cantidad mayor de datos y manejar información sensible de
manera más segura.

Características del Método POST

1. Seguridad:
• Cifrado de Datos: Aunque el método POST no cifra los datos por sí mismo, es
más seguro que GET porque los datos no se muestran en la URL. Para mayor
seguridad, se recomienda usar POST en combinación con HTTPS.
• Sensibilidad de Datos: Ideal para enviar información sensible, como
contraseñas y datos personales.
2. Capacidad de Datos:
• Sin Límite Estricto de Tamaño: A diferencia de GET, que tiene una limitación
de tamaño impuesta por la longitud de la URL, POST puede manejar grandes
cantidades de datos sin restricciones significativas de tamaño.
3. Idempotencia:
• No Idempotente: A diferencia de GET, POST no es idempotente. Esto significa
que múltiples solicitudes POST pueden tener efectos diferentes en el servidor
(por ejemplo, enviar múltiples formularios de inscripción).
4. Formato de Datos:
• Flexible: Puede enviar datos en varios formatos, como JSON, XML, datos de
formularios (application/x-www-form-urlencoded), o archivos multipart
(multipart/form-data).
Funcionamiento del Método POST

Cuando un cliente (como un navegador web) realiza una solicitud POST, los datos se
incluyen en el cuerpo de la solicitud HTTP. El servidor recibe estos datos, los procesa
según la lógica del servidor, y responde al cliente con un resultado.

Ejemplo de Solicitud POST:

En este ejemplo:

• Línea de Solicitud: POST /submit-form HTTP/1.1 indica que el método POST

se está utilizando para la ruta /submit-form.
• Encabezados de la Solicitud: Incluyen Host, Content-Type (tipo de contenido
de los datos enviados), y Content-Length (longitud de los datos).
• Cuerpo de la Solicitud: Contiene los datos reales enviados al servidor
(username=johndoe&password=1234).

Uso del Método POST en Formularios HTML

El método POST es comúnmente utilizado en formularios HTML cuando se necesita enviar

datos al servidor para ser procesados.
Ejemplo en HTML:

En este ejemplo:

• El formulario utiliza el método POST (method="POST") para enviar los datos.

• Los datos del formulario (username y password) se enviarán al servidor cuando el
usuario haga clic en el botón "Enviar".

Aplicaciones Comunes del Método POST

• Formularios de Registro y Autenticación: Envío de datos de usuarios para creación

de cuentas o inicio de sesión.
• Envío de Archivos: Subida de archivos a un servidor, utilizando el tipo de contenido
multipart/form-data.
• APIs RESTful: Crear nuevos recursos en un servidor, como añadir un nuevo
elemento a una base de datos.
• Envío de Datos Complejos: Transferencia de datos estructurados como objetos
JSON o XML.
Ventajas y Desventajas del Método POST

Ventajas:

• Seguridad Mejorada: Los datos no se exponen en la URL.

• Mayor Capacidad de Datos: Puede manejar grandes volúmenes de datos.
• Versatilidad de Datos: Soporta múltiples formatos de datos.

Desventajas:

• No Idempotente: Las solicitudes repetidas pueden causar acciones duplicadas.

• Menor Caché: Las solicitudes POST no se pueden almacenar en caché fácilmente,
lo que puede afectar el rendimiento en ciertas aplicaciones.

2. ¿Qué es el método GET?

El método GET es uno de los métodos de solicitud más utilizados en el protocolo HTTP
(Hypertext Transfer Protocol). Es utilizado por los navegadores web y otras aplicaciones
para solicitar datos de un servidor. A diferencia del método POST, los datos se envían como
parámetros en la URL, lo que hace que las solicitudes GET sean visibles en la barra de
direcciones del navegador.

Características del Método GET

1. Visibilidad de Datos:
• Datos en la URL: Los datos enviados mediante GET se anexan a la URL como
parámetros de consulta. Esto hace que los datos sean visibles y se puedan
compartir fácilmente a través de enlaces.
• No adecuado para datos sensibles: Debido a que los datos se muestran en la
URL, no es recomendable usar GET para enviar información sensible, como
contraseñas.
2. Idempotencia:
• Idempotente: Las solicitudes GET son idempotentes, lo que significa que
múltiples solicitudes idénticas producirán el mismo resultado sin causar efectos
secundarios en el servidor.
 3. Caché:
• Cachable: Las solicitudes GET pueden ser almacenadas en caché por los
navegadores y servidores proxy, lo que mejora el rendimiento al reducir la
necesidad de solicitudes repetidas al servidor.
4. Limitación de Datos:
• Limitación de Tamaño: Los datos enviados mediante GET están limitados por la
longitud máxima de la URL, que varía según el navegador y el servidor, pero
típicamente es alrededor de 2000 caracteres.

Funcionamiento del Método GET

Cuando un cliente (como un navegador web) realiza una solicitud GET, los datos de la
solicitud se anexan a la URL de destino como parámetros de consulta. El servidor recibe la
solicitud, procesa los parámetros, y devuelve una respuesta que típicamente contiene el
recurso solicitado.

Ejemplo de Solicitud GET:

En este ejemplo:

• Línea de Solicitud: GET /search?q=desarrollo+web HTTP/1.1 indica que el

método GET se está utilizando para la ruta /search con un parámetro de consulta q
igual a desarrollo+web.
• Encabezados de la Solicitud: Incluyen Host, que especifica el dominio del
servidor.

Uso del Método GET en Formularios HTML

El método GET se utiliza comúnmente en formularios HTML para búsquedas y otros

formularios donde los datos no son sensibles y pueden ser visibles en la URL.
Ejemplo en HTML:

En este ejemplo:

• El formulario utiliza el método GET (method="GET") para enviar los datos.

• Los datos del formulario (query) se enviarán al servidor como parte de la URL
cuando el usuario haga clic en el botón "Enviar".

Aplicaciones Comunes del Método GET

• Recuperación de Datos: Solicitar datos de un servidor, como páginas web,

imágenes, y archivos.
• Consultas de Búsqueda: Enviar parámetros de búsqueda desde un formulario de
búsqueda en una página web.
• Navegación Web: Cargar nuevas páginas web cuando se hace clic en enlaces.
• APIs RESTful: Recuperar recursos de un servidor en arquitecturas RESTful.

Ventajas y Desventajas del Método GET

Ventajas:

• Facilidad de Uso: Las URL con parámetros GET se pueden compartir fácilmente.
• Caché: Mejora el rendimiento al permitir que las solicitudes se almacenen en caché.
• Idempotencia: Garantiza que las solicitudes repetidas no causarán cambios no
deseados en el servidor.
Desventajas:

• Seguridad: No adecuado para datos sensibles debido a la visibilidad de los

parámetros en la URL.
• Limitación de Tamaño: La cantidad de datos que se pueden enviar está limitada por
la longitud de la URL.
• Compatibilidad con Datos: Menos flexible que POST para enviar datos complejos o
de gran tamaño.

El método GET es una herramienta esencial en la comunicación HTTP, especialmente útil

para la recuperación de datos y la interacción con formularios donde los datos enviados no
son sensibles. Su capacidad para ser almacenado en caché y su idempotencia lo hacen ideal
para solicitudes que no modifican el estado del servidor, proporcionando eficiencia y
seguridad en la navegación web y en el acceso a recursos de servidores. Sin embargo, para
datos sensibles y grandes volúmenes de datos, el método POST es la alternativa preferida.

3. ¿Qué es un NAME de un INPUT?

En el desarrollo web, los formularios son componentes fundamentales para la interacción

con los usuarios. Estos formularios permiten la recolección de datos que pueden ser
procesados en el servidor. Una de las características esenciales de los elementos de
formulario es el atributo name. Esta investigación profundiza en el significado, uso y
mejores prácticas del atributo name en los inputs HTML.

Definición del Atributo name

El atributo name en HTML es un atributo global utilizado en varios elementos, incluidos

los elementos de formulario como <input>, <textarea>, <select>, y <button>. El name
define el nombre del control y se utiliza para identificar datos cuando se envía el formulario
al servidor. Es esencial para la vinculación de los datos de entrada con los scripts del lado
del servidor.
Uso del Atributo name en Inputs

1. Identificación de Datos: Cuando un formulario es enviado, el navegador

empaqueta los datos del formulario en pares de nombre-valor. El atributo name
define el nombre del control, que se usa como clave en estos pares.

En este ejemplo, si el usuario ingresa "JohnDoe" en el campo de texto y envía el

formulario, el par de nombre-valor enviado al servidor será username=JohnDoe.

2. Acceso en Scripts del Servidor: Los lenguajes del lado del servidor, como PHP,
Python (Django, Flask), y Java, utilizan el nombre del input para acceder a sus
valores. Por ejemplo, en PHP, se puede acceder al valor del input anterior usando
$_POST['username'].
3. Agrupación de Datos: En inputs con el mismo name, los valores se agrupan en un
array. Esto es útil para inputs que permiten múltiples selecciones, como
checkboxes

Aquí, si el usuario selecciona "Sports" y "Music", el servidor recibirá

hobby=sports&hobby=music.
Mejores Prácticas para el Uso del Atributo name

1. Nombres Descriptivos y Únicos: Usar nombres descriptivos para facilitar la

identificación y manipulación de datos en el servidor.

2. Consistencia en Convenciones de Nomenclatura: Utilizar convenciones de

nomenclatura consistentes, como camelCase, snake_case, o kebab-case, para
mantener la coherencia y legibilidad del código.
3. Evitar Nombres Reservados: No utilizar nombres que puedan entrar en conflicto
con palabras reservadas o variables globales del lenguaje del servidor.
4. Agrupación Lógica: Para inputs relacionados, agrupar los nombres en estructuras
anidadas para un manejo más sencillo.

4. ¿Que es Bootstrap?

Bootstrap es un marco de desarrollo front-end de código abierto que facilita la creación de

sitios web y aplicaciones web. Desarrollado originalmente por Mark Otto y Jacob Thornton
en Twitter, Bootstrap ha evolucionado hasta convertirse en uno de los frameworks más
populares y ampliamente utilizados en el desarrollo web moderno. Su objetivo principal es
agilizar y simplificar el proceso de diseño web al proporcionar una colección de
herramientas y componentes preconstruidos.
Características Principales

1. Sistema de Rejilla (Grid System):

• El sistema de rejilla de Bootstrap es una de sus características más destacadas.
Utiliza una cuadrícula de 12 columnas que permite a los desarrolladores crear
diseños responsivos de manera sencilla.
• La rejilla es flexible y se adapta automáticamente a diferentes tamaños de
pantalla, asegurando que el contenido se vea bien en dispositivos móviles,
tabletas y computadoras de escritorio.
2. Componentes Preconstruidos:
• Bootstrap incluye una amplia gama de componentes de interfaz de usuario
preconstruidos, como botones, formularios, tablas, menús de navegación y
mucho más.
• Estos componentes son altamente personalizables y se pueden extender o
modificar según las necesidades del proyecto.
3. Estilos CSS y Temas:
• Bootstrap proporciona una colección de estilos CSS que aseguran una apariencia
visual coherente y profesional.
• Además, ofrece la capacidad de personalizar temas utilizando variables Sass, lo
que permite a los desarrolladores adaptar el diseño a la identidad de su marca
4. JavaScript Integrado:
• Incluye una serie de plugins JavaScript que añaden interactividad y
funcionalidad avanzada, como carruseles, modales, tooltips, entre otros.
• Estos plugins están diseñados para ser fáciles de integrar y usar.
5. Responsive Design:
• Bootstrap está diseñado para ser responsive por defecto, lo que significa que
todos sus componentes y elementos se adaptan automáticamente a diferentes
tamaños de pantalla y dispositivos.
• Utiliza media queries y otras técnicas CSS modernas para garantizar una
experiencia de usuario óptima en cualquier dispositivo.
Ventajas de Usar Bootstrap

1. Ahorro de Tiempo:
• Al proporcionar componentes preconstruidos y estilos consistentes, Bootstrap
reduce significativamente el tiempo necesario para desarrollar y diseñar sitios
web.
2. Consistencia:
• Asegura una apariencia y comportamiento uniformes en todos los navegadores y
dispositivos, lo que es crucial para la experiencia del usuario.
3. Comunidad y Soporte:
• Además, la documentación oficial es extensa y está bien mantenida, lo que facilita
la resolución de problemas y la implementación de nuevas características.

Desventajas y Limitaciones

1. Peso y Carga:
• Si no se personaliza adecuadamente, Bootstrap puede añadir un peso innecesario
al sitio web, lo que puede afectar el tiempo de carga.
2. Diseños Similares:
• Dado que muchos desarrolladores utilizan los mismos componentes y estilos
predeterminados, los sitios web creados con Bootstrap pueden parecer similares
si no se personalizan adecuadamente.

Casos de Uso y Ejemplos

Bootstrap se utiliza en una amplia variedad de proyectos, desde sitios web personales y
blogs hasta aplicaciones web complejas y portales corporativos. Algunos ejemplos notables
incluyen:

• Sitios de noticias y blogs: Donde la consistencia y la rapidez de desarrollo son

cruciales.
• Aplicaciones web empresariales: Que requieren una interfaz de usuario sólida y
coherente.
• Prototipos y proyectos MVP: Donde la rapidez y la eficiencia son esenciales
para validar ideas rápidamente.
 5 Cómo Enlazar Bootstrap

Bootstrap es uno de los frameworks CSS más populares para el desarrollo web responsivo
y mobile-first. Desarrollado por Twitter, proporciona un conjunto robusto de herramientas
CSS y JavaScript para crear interfaces de usuario elegantes y consistentes. En esta
investigación, se detallará cómo enlazar Bootstrap en un proyecto web, incluyendo la
configuración de un entorno de desarrollo, la integración de Bootstrap y las mejores
prácticas.

Enlazando Bootstrap en un Proyecto

Existen dos métodos principales para enlazar Bootstrap a un proyecto web: mediante una
CDN (Content Delivery Network) o descargando los archivos de Bootstrap e incluyéndolos
localmente.

Enlazando Bootstrap mediante una CDN

Utilizar una CDN es una de las formas más sencillas y rápidas de incluir Bootstrap en un
proyecto. Los archivos de Bootstrap se alojan en servidores externos y se cargan desde allí.

Pasos:

• Incluir el CSS de Bootstrap: En la sección <head> de tu archivo HTML, añade

el siguiente enlace:

• Incluir el JavaScript de Bootstrap: Justo antes del cierre de la etiqueta </body>,

añade los siguientes enlaces:
Ejemplo de Proyecto con Bootstrap

A continuación, se presenta un ejemplo básico de un archivo HTML que incluye Bootstrap

mediante una CDN.

Enlazar Bootstrap a un proyecto web es un proceso sencillo que puede realizarse mediante
una CDN o descargando los archivos localmente. Ambos métodos tienen sus ventajas y se
pueden elegir según las necesidades del proyecto. Siguiendo las mejores prácticas y
personalizando Bootstrap adecuadamente, se puede crear una aplicación web elegante,
responsiva y fácil de mantener.

6. Que es un LABEL en HTML

El elemento <label> en HTML es un componente esencial en la creación de formularios

web accesibles y fáciles de usar. Su principal función es asociar etiquetas de texto a
elementos de formulario, como entradas de texto, casillas de verificación y botones de
opción. Este elemento mejora la accesibilidad y la experiencia del usuario, permitiendo que
los formularios sean más intuitivos y fáciles de navegar.
Definición y Propósito del Elemento <label>

El elemento <label> en HTML se utiliza para definir una etiqueta para un elemento de
formulario. Asociar un <label> con un elemento de formulario mejora la usabilidad y la
accesibilidad del formulario.

Sintaxis Básica

La sintaxis básica del elemento <label> es la siguiente:

Asociaciones entre <label> y Elementos de Formulario

Existen dos métodos principales para asociar un <label> con un elemento de formulario:

1. Atributo for:
• El atributo for del elemento <label> se usa para asociar la etiqueta con el
elemento de formulario cuyo id coincide con el valor del atributo for.
• Ejemplo:
 2. Encapsulamiento Directo:
• Un elemento <label> puede encapsular directamente un elemento de
formulario. En este caso, la asociación se establece implícitamente.
• Ejemplo:

Beneficios del Uso de <label>

1. Mejora de la Accesibilidad:
• Los lectores de pantalla utilizan el elemento <label> para proporcionar
información contextual a los usuarios con discapacidades visuales.
• Asociar correctamente etiquetas con elementos de formulario permite a los
dispositivos de asistencia identificar y comunicar de manera efectiva la
funcionalidad de los elementos del formulario.
2. Mejora de la Usabilidad:
• Al hacer clic en una etiqueta asociada, el navegador enfoca automáticamente el
elemento de formulario correspondiente, facilitando la interacción del usuario
con el formulario.

Beneficios del Uso de <label>

3. Mejora de la Accesibilidad:
• Los lectores de pantalla utilizan el elemento <label> para proporcionar
información contextual a los usuarios con discapacidades visuales.
• Asociar correctamente etiquetas con elementos de formulario permite a los
dispositivos de asistencia identificar y comunicar de manera efectiva la
funcionalidad de los elementos del formulario.
Ejemplo

Formulario de Registro:

El elemento <label> en HTML es crucial para crear formularios accesibles y fáciles de usar.
Su correcta implementación mejora significativamente la experiencia del usuario y la
accesibilidad del formulario, garantizando que todos los usuarios, independientemente de
sus capacidades, puedan interactuar con los formularios de manera efectiva. Al seguir las
buenas prácticas y asegurarse de que cada elemento de formulario tenga una etiqueta
asociada, los desarrolladores pueden crear formularios más eficientes y accesibles.
 7. ¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje de marcado estándar para la creación

de páginas web. Desarrollado inicialmente por Tim Berners-Lee en 1991, HTML ha
evolucionado significativamente y es fundamental para el funcionamiento de la web. Este
documento ofrece una visión detallada de HTML, sus características, su evolución, y su
importancia en el desarrollo web.

Características Principales de HTML

Estructura Básica de un Documento HTML, un documento HTML típico se estructura de la

siguiente manera:

• <!DOCTYPE html>: Declaración del tipo de documento que indica al navegador

que se trata de un documento HTML5.
• <html>: Elemento raíz del documento.
• <head>: Contiene metadatos sobre el documento como el título, codificación de
caracteres, enlaces a hojas de estilo, scripts, etc.
• <body>: Contiene el contenido visible de la página, como textos, imágenes, videos,
enlaces, etc.
Elementos y Atributos

• Elementos: Son las estructuras básicas de HTML, representadas por etiquetas como
<p>, <div>, <a>, etc.
• Atributos: Proporcionan información adicional sobre los elementos y se colocan
dentro de las etiquetas de apertura. Por ejemplo, <a
href="https://www.example.com">Enlace</a>.

Ejemplos Prácticos de HTML

Enlaces y Navegación

Imágenes

Formularios
 8. Estructura General de HTML

Para asegurar que los documentos HTML sean accesibles, semánticamente correctos y
fáciles de mantener, se deben seguir ciertas buenas prácticas:

1. Uso de Etiquetas Semánticas

Utilizar etiquetas semánticas como <header>, <nav>, <main>, <article>, <section> y

<footer> mejora la legibilidad del código y la accesibilidad del contenido.

Comprender la estructura general de HTML es esencial para crear páginas web efectivas y
accesibles. La correcta utilización de elementos HTML, junto con buenas prácticas de
codificación, no solo mejora la experiencia del usuario sino que también facilita el
mantenimiento y la escalabilidad del código. Con el continuo avance del desarrollo web, es
importante mantenerse actualizado con las mejores prácticas y las nuevas características
introducidas en HTML.
 9. Etiquetas principales de HTML

HTML es el lenguaje estándar utilizado para construir páginas web y aplicaciones web. Su
sintaxis se basa en etiquetas que describen la estructura y el contenido de un documento
web. Las etiquetas HTML se utilizan para marcar diferentes elementos dentro de una
página, como encabezados, párrafos, enlaces, imágenes, formularios, entre otros.
Comprender las etiquetas principales de HTML es fundamental para cualquier
desarrollador web, ya que sienta las bases para crear páginas web accesibles, semánticas y
bien estructuradas.<html>: Define el comienzo y el final de un documento HTML.

Se identificaron y analizaron las siguientes etiquetas principales de HTML:

• <head>: Contiene información meta sobre el documento, como el título, metadatos,

enlaces a hojas de estilo y scripts.
• <title>: Define el título del documento, que se muestra en la barra de título del
navegador.
• <body>: Contiene el contenido visible de la página web, como texto, imágenes,
enlaces y otros elementos.
• <h1> a <h6>: Define encabezados de diferentes niveles, del más importante (h1) al
menos importante (h6).
• <p>: Define un párrafo de texto.
• <a>: Crea un enlace a otra página web o recurso.
• <img>: Inserta una imagen en la página.
• <ul>, <ol>, <li>: Crean listas no ordenadas (viñetas), listas ordenadas (números) y
elementos de lista, respectivamente.
• <div> y <span>: Se utilizan como contenedores genéricos para agrupar y estilizar
elementos, divs para bloques y spans para texto en línea.
• <form>, <input>, <button>: Crean formularios interactivos con campos de entrada y
botones de envío.

El estudio destaca la importancia de comprender y utilizar adecuadamente las etiquetas

principales de HTML para desarrollar páginas web bien estructuradas, semánticas y
accesibles.
REFERENCIA ELECTRONICAS

https://lmsnews.org/metodo-get/

https://blog.hubspot.es/website/que-es-bootstrap

https://www.geeksforgeeks.org/how-to-specify-the-name-of-an-input-element/

https://www.arimetrics.com/glosario-digital/bootstrap

https://www.hostinger.mx/tutoriales/que-es-bootstrap

https://www.geeksforgeeks.org/html-input-name-attribute/

https://aulacm.com/que-es/bootstrap-significado-definicion/

https://axarnet.es/blog/bootstrap

https://html.com/attributes/input-name/

https://www.santanderopenacademy.com/es/blog/que-es-bootstrap.html

https://www.dofactory.com/html/input/name

https://www.aprenderaprogramar.com/index.php?Itemid=192&catid=69&id=527%3Aget-
y-post-html-method-formas-de-envio-de-datos-en-formulario-diferencias-y-ventajas-
ejemplos-cu00721b&option=com_content&view=article

https://www.appyweb.es/diccionario/http-get/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

https://dinahosting.com/blog/bootstrap-que-es-como-instalarlo-y-ejemplos-de-uso/

https://www.abrirllave.com/html/ejemplo-metodo-post-en-atributo-method.php

https://es.linkedin.com/pulse/instalando-bootstrap-nuestro-proyecto-3-formas-prado-
gonzalez-e67ge

http://www.javier8a.com/itc/bd2/post%20y%20get.pdf