SlideShare una empresa de Scribd logo
1 de 49
Descargar para leer sin conexión
Didier Fabián Granados Muñoz

Sesión No. 2 – Conceptos Generales y Repaso de Formularios Web
Agosto 12 de 2009
Desarrollo de Aplicaciones Web II - Sesión 02 - Conceptos Generales e Introducción a los Formularios Web
 Una página web, también conocida como
   página de Internet, es un documento adaptado
   para la Web y normalmente forma parte de un
   sitio web.
 Su principal característica son los hiperenlaces a
   otras páginas web, siendo esto el fundamento
   de la Web.
 Se escribe en un lenguaje de marcado que
   provea la capacidad de insertar hiperenlaces,
   generalmente HTML.
 El contenido de la página puede ser
   predeterminado (página web estática) o
   generado al momento de visualizarla o
   solicitarla a un servidor web (página web
   dinámica).
Página web estática                Página web dinámica
 Básicamente informativa.          Puede interactuar con el
 El visitante y administrador        visitante y/o administrador
   Web no pueden interactuar          Web, pudiéndose modificar
   con la página para modificar       el contenido de la página.
   su contenido.                    SI se utilizan bases de datos y
 NO se utilizan bases de datos       se requiere programación
   ni se requiere programación.       Web.
 Es suficiente utilizar código     El lenguaje utilizado puede
   HTML.                              ser: PHP, ASP, ASP .NET o
                                      Java, entre otros.
 Fácil de desarrollar y en poco
   tiempo.                          Mayor tiempo y costo de
                                      desarrollo.
Desarrollo de Aplicaciones Web II - Sesión 02 - Conceptos Generales e Introducción a los Formularios Web
• Página o formulario de contacto.
• Página de formas de pago: Tarjeta de crédito, giro, depósito o
    transferencia bancaria.
•   Catálogo de productos dinámico: categorías, subcategorías y
    artículos.
•   Carrito de compras.
•   Registro de clientes para comprar en línea.
•   Panel de administración para consultar y actualizar productos,
    clientes y fletes.
•   Panel de seguimiento de pedidos para uso del cliente.
•   Conexión a pasarela de pagos .
•   Entre muchas otras cosas…
Desarrollo de Aplicaciones Web II - Sesión 02 - Conceptos Generales e Introducción a los Formularios Web
Internet

Estación
de trabajo




                                    Servidor(es) de   Base(s) de
             Navegador               aplicaciones       datos
De alguna manera tenemos que llegar a esto…
 El DNS (Domain Name System) o Sistema de Nombres de
  Dominio es una base de datos jerárquica y distribuida que
  almacena información sobre los nombres de dominio de
  redes cómo Internet. También llamamos DNS al protocolo
  de comunicación entre un cliente (resolver) y el servidor
  DNS.


 La función más común de DNS es la traducción de nombres
  por direcciones IP, esto nos facilita recordar la dirección de
  una máquina haciendo una consulta DNS (mejor recordar
  www.politecnicojic.edu.co que 200.13.255.31) y nos
  proporciona un modo de acceso más fiable ya que por
  múltiples motivos la dirección IP puede variar manteniendo
  el mismo nombre de dominio.
   Un nombre de dominio consiste en diferentes partes llamadas
    etiquetas y separadas por puntos.
   La parte situada más a la derecha es el llamado dominio de primer
    nivel (Top Level Domain) y cada una de las partes es un
    subdominio de la parte que tiene a su derecha.
   De esta manera, si tenemos www.politecnicojic.edu.co:
     co – Es quien indica el país de procedencia.
     edu - Es el dominio de primer nivel.
     politecnicojic - Es un subdominio de net.
     www - Es un subdominio de politecnicojic.
   Una consulta de un cliente a un servidor DNS puede ser recursiva
    si el servidor al que consultamos consulta a su vez otro servidor o
    iterativa si responde a partir de los datos que tiene almacenados
    localmente.
Desarrollo de Aplicaciones Web II - Sesión 02 - Conceptos Generales e Introducción a los Formularios Web
   El protocolo de transferencia de hipertexto (HTTP, HyperText
    Transfer Protocol) es el protocolo usado en cada transacción de la
    Web (WWW).
   Fue desarrollado por el consorcio W3C y la IETF (Internet
    Engineering Task Force), colaboración que culminó en 1999 con la
    publicación de una serie de RFC (Request For Comments o
    propuestas para protocolos de internet), siendo el más importante
    de ellos el RFC 2616, que especifica la versión 1.1.
   Define la sintaxis y la semántica que utilizan los elementos
    software de la arquitectura web (clientes, servidores, proxies) para
    comunicarse.
   Es un protocolo orientado a transacciones y sigue el esquema
    petición-respuesta entre un cliente y un servidor.
Desarrollo de Aplicaciones Web II - Sesión 02 - Conceptos Generales e Introducción a los Formularios Web
 El propósito del protocolo HTTP es permitir la transferencia
   de archivos (principalmente, en formato HTML) entre un
   navegador (que se encuentra en el cliente) y un servidor
   web localizado mediante una cadena de caracteres
   denominada dirección URL.
    El navegador realiza una solicitud HTTP.
    El servidor procesa la solicitud y después envía una
      respuesta HTTP.

 En realidad, la comunicación se realiza en más etapas si se
   considera el procesamiento de la solicitud en el servidor.
   Una solicitud HTTP es un conjunto de líneas que el navegador
    envía al servidor. Dicho conjunto incluye:


   Una línea de solicitud: es una línea que especifica el tipo de
    documento solicitado, el método que se aplicará y la versión del
    protocolo utilizada. La línea está formada por tres elementos que
    deben estar separados por un espacio:
     El método (GET o POST)
     La dirección URL.
     La versión del protocolo utilizada por el cliente (por lo general,
       HTTP/1.0, 1.1 ó 1.2).


    GET /index.html HTTP/1.1
    Los campos del encabezado de solicitud: Conjunto de líneas
     opcionales que permiten aportar información adicional sobre la
     solicitud y/o el cliente (navegador, sistema operativo, etc.). Cada una
     de estas líneas está formada por un nombre que describe el tipo de
     encabezado, seguido de dos puntos (:) y el valor del encabezado.


    El cuerpo de la solicitud: Conjunto de líneas opcionales que deben
     estar separadas de las líneas precedentes por una línea en blanco y,
     por ejemplo, permiten que se envíen datos por un comando POST
     durante la transmisión de datos al servidor utilizando un formulario.



    POST /index.html HTTP/1.1
    Host: www.unaurldeejemplo.com
    User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows 7)
Desarrollo de Aplicaciones Web II - Sesión 02 - Conceptos Generales e Introducción a los Formularios Web
Métodos o comandos HTTP

Comando   Descripción

GET       Solicita el recurso ubicado en la URL especificada y
          envía datos en la misma.
HEAD      Solicita el encabezado del recurso ubicado en la
          URL especificada.
POST      Envía datos al programa ubicado en la URL
          especificada, generalmente mediante formularios.
PUT       Envía datos a la URL especificada.
DELETE    Borra el recurso ubicado en la URL especificada.
   Una respuesta HTTP es un conjunto de líneas que el servidor envía
    al navegador. Incluye los siguientes elementos:


   Una línea de estado: es una línea que especifica la versión del
    protocolo utilizada y el estado de la solicitud en proceso mediante
    un texto explicativo y un código. La línea está compuesta por tres
    elementos que deben estar separados por un espacio:
     La versión del protocolo utilizada
     El código de estado
     El significado del código



    HTTP/1.1 200 OK
    Los campos del encabezado de respuesta: Conjunto de líneas
     opcionales que permiten aportar información adicional sobre la
     respuesta y/o el servidor.


    Cada una de estas líneas está formada por un nombre que
     describe el tipo de encabezado, seguido de dos puntos (:) y el
     valor del encabezado.


    El cuerpo de la respuesta: Contiene el documento solicitado.


    Date: Fri, 31 Dec 2003 23:59:59 GMT
    Content-Type: text/html
    Content-Length: 1221
    ...
 1XX Mensajes
   N° - 100 111 Conexión rechazada


 2XX Operación exitosa
   200 OK
   201-203 Información no oficial
   204 Sin Contenido
   205 Contenido para recargar
   206 Contenido parcial
 3xx Redirección hacia otra URL
    300 Múltiples posibilidades.
    301 Mudado permanentemente.
    302 Encontrado.
    303 Vea otros.
    304 No modificado.
    305 Utilice un proxy.
    307 Redirección temporal.
   4xx Error por parte del cliente
       400 Solicitud incorrecta
       401 No autorizado
       402 Pago requerido
       403 Prohibido
       404 No encontrado
       405 Método no permitido
       406 No aceptable
       407 Proxy requerido
       408 Tiempo de espera agotado
       409 Conflicto
       410 Ya no disponible
       411 Requiere longitud
       412 Falló precondición
       413 Entidad de solicitud demasiado larga
       414 URL de solicitud demasiado largo
       415 Tipo de medio no soportado
       416 Rango solicitado no disponible
       417 Falló expectativa
 5xx Error por parte del servidor
    500 Error interno.
    501 No implementado.
    502 Pasarela incorrecta.
    503 Servicio no disponible.
    504 Tiempo de espera de la pasarela agotado.
    505 Versión de HTTP no soportada.
 Un ejemplo más o menos completo…


 HTTP/1.1 200 OK
 Date: Fri, 31 Dec 2003 23:59:59 GMT
 Content-Type: text/html
 Content-Length: 1221

 <html>
 <body>
 <h1>Página principal del curso</h1>
 (Contenido)
   .
   .
   .
 </body>
 </html>
Desarrollo de Aplicaciones Web II - Sesión 02 - Conceptos Generales e Introducción a los Formularios Web
Pues por todo lo anterior (y otras muchas
cosas más) es posible que veamos nuestras
      páginas web en un navegador!
Desarrollo de Aplicaciones Web II - Sesión 02 - Conceptos Generales e Introducción a los Formularios Web
Desarrollo de Aplicaciones Web II - Sesión 02 - Conceptos Generales e Introducción a los Formularios Web
Los formularios son una
utilidad necesaria para que
los documentos descritos
con HTML dispongan de un
medio para que el lector o
visitante pueda remitir
información personalizada al
servidor, creándose, de esta
forma, un sistema completo
de interacción con el mismo.
   El lenguaje HTML dispone de directivas que permiten crear
    formularios, estos son un conjunto de objetos dinámicos que
    posibilitan al lector interactuar con el documento descrito en base
    a HTML. Estos objetos son:


       Cajas de texto
       Contraseñas
       Campos ocultos
       Casillas de verificación
       Botones de selección
       Botones
       Imágenes
       Áreas de texto
       Listas
 Todos estos objetos (a excepción de los ocultos) permiten
  que el lector realice acciones sobre ellos:

    Introducir o cambiar datos.
    Seleccionar opciones.
    Pulsar botones.


 Y posteriormente remitir el conjunto de información que
  representa los datos introducidos y las opciones
  seleccionadas a una dirección URL determinada que puede
  ser una dirección de correo, un programa que realice un
  tratamiento con ella, etc.
 Los formularios se aplican a cualquier concepto de
  comunicación entre un emisor y un receptor.
 Se puede crear un formulario para introducir simples
  mensajes y enviarlos por correo, realizar pedidos, rellenar
  fichas de admisión, solicitudes de ingreso, suscripciones,
  inscripciones, votaciones, envío de anuncios, rellenar
  currículos, etc.
 Un ejemplo cotidiano se puede encontrar en un motor de
  búsqueda, como Yahoo, Google, Altavista, Bing, etc., donde
  el usuario introduce lo que quiere buscar, selecciona dónde
  quiere buscar y cómo lo quiere buscar. Esta información es
  utilizada por el motor de búsqueda para que un programa
  la analice y, en consecuencia, realice la búsqueda en sus
  bases de datos.
Desarrollo de Aplicaciones Web II - Sesión 02 - Conceptos Generales e Introducción a los Formularios Web
Debemos recordar la estructura básica de un documento
HTML.

 <html>


 <head>
 Otras etiquetas...
 </head>

                                      En esta región del
 <body>                               documento
 Contenido de la página...            HTML es que
 </body>                              debemos insertar
                                      el formulario.
 </html>
El objeto FORM


 El objeto <form> permite la creación de un formulario
  dentro de una página Web. Este objeto es un objeto
  contenedor, puesto que contendrá el resto de los objetos
  de que se componga el formulario. De igual manera, el
  objeto <form> define el formato de transmisión de los
  datos introducidos y el lugar de destino.


 Una página web puede contener múltiples formularios
  (directivas <form> … </form>, aunque no es lo más
  recomendado), con acciones diferentes. Sin embargo, no
  pueden existir formularios dentro de otros formularios ni
  cruzarse las directivas.
Sintaxis básica


 La sintaxis básica del objeto <form> es la siguiente:



 <form action="acción" method="MétodoTransmisión">

         Aquí van los objetos del Formulario

 </form>
Sintaxis básica


 La cláusula action contiene la URL o dirección de destino,
   que puede ser una dirección de correo electrónico, o bien
   un programa en el servidor que gestionará los datos que se
   envían. Esta etiqueta es requerida, aunque si no se
   especifica, tomará por defecto URL de la página actual.
 La cláusula method indica el método, formato o protocolo
   de transmisión de los datos del formulario. Su valor puede
   ser uno de los siguientes:
    GET
    POST
Cláusula "method“ o método de envío de datos


 GET: Es el método por defecto. Los datos se transmiten
  incluidos en la URL de petición en forma de variable de
  entorno y con el siguiente formato:


      campo=valor[&campo=valor ... ]


 No se pueden transmitir más de 255 caracteres.
Cláusula "method“ o método de envío de datos


 POST: Es el formato que utiliza la aplicación del servidor,
   los datos se transmiten en el cuerpo del protocolo y la
   aplicación los recibe en la entrada estándar. En la cadena de
   caracteres se define el formato de los datos.
 Tiene una serie de atributos especiales MIME (Multipurpose
   Internet Mail Extensions). En principio esta codificación es
   "application/x-www-form-urlencoded".
 Permite la transmisión de grandes cantidades de datos. Por
   lo tanto, es posible enviar archivos mediante un formulario
   cuyo método sea POST, sin olvidar otra cláusula llamada
   enctype, que indica qué tipo de dato será enviado según el
   inciso anterior.
Campos o Elementos


 Un campo o elemento, es una entidad independiente de
  información dentro del conjunto del formulario.
 Dicho en otros términos, los campos o elementos son cada
  uno de los objetos en un formulario que representa la
  información introducida, editada o seleccionada por el
  usuario.
 Existe una variedad de tipos de campos, dependiendo del
  método de introducción de los datos, que en su mayoría se
  hace desde el teclado.
Elementos INPUT


 Prácticamente todos estos campos con la directiva
  <input>, cuya sintaxis básica es la siguiente:

 <input
 type="text|password|checkbox|radio|submit|reset|file|
 hidden|image"
         [size="tamaño"]
         [value="valor"]
         [checked="checked"]
         [maxlength="LongitudMáxima"]
         [name="NombreDeCampo"]
         [align="top|middle|bottom|left|right"]
         [src="UrlDeLaImagen"]
 />
Campos o Elementos

   Obviamente, según las características de un determinado tipo de campo
    (dado por el atributo type) utilizará ciertas cláusulas de las citadas
    anteriormente. Por ello, a continuación se tratan cada uno de los tipos y
    sus respectivas cláusulas,
      text
      password
      hidden
      checkbox
      radio
      button
      submit
      reset
      file
      image
Elemento TEXTAREA


 En ocasiones es necesario la introducción de un texto largo,
   con múltiples líneas. Por ello, la caja de texto se queda
   limitada y es necesario recurrir a otro tipo de campo
   especial, llamado área de texto. Este campo se crea con una
   directiva nueva, llamada textarea, y cuya sintaxis básica
   es la siguiente:


  <textarea name="nombre" [cols="columnas"]
  [rows="filas"] [align="alineación"]>
  Texto Inicial, no es necesario
  </textarea>
Elemento SELECT (Listas)


   Una lista es un conjunto de opciones que el usuario puede elegir
    con un click de ratón. A diferencia de una casilla de verificación o
    un botón de selección, las listas agrupan las opciones en un solo
    cuadro.
   Existen dos tipos de listas:
     Listas normales
     Listas desplegables.
   Las primeras muestran un recuadro con la lista de opciones en su
    interior. Las segundas enseñan una especie de caja de texto con
    un botón a la derecha que, al hacer click sobre él, se despliega la
    lista.
Elemento SELECT (Listas)


 Para esto, hay que utilizar dos directivas nuevas: <select>
   y <option>, cuya sintaxis básica es la siguiente:



<select name="NombreLista" [size="valor"]
[align="alineación"] [width="valor"] [height="valor"]
[multiple="multiple"]>
<option [selected="selected"]>Texto de la opción</option>
...
</select>
Desarrollo de Aplicaciones Web II - Sesión 02 - Conceptos Generales e Introducción a los Formularios Web
Desarrollo de Aplicaciones Web II - Sesión 02 - Conceptos Generales e Introducción a los Formularios Web

Más contenido relacionado

La actualidad más candente

Presentacion sesion 3 en MPA del CEU por Pablo de Castro
Presentacion sesion 3 en MPA del CEU por Pablo de CastroPresentacion sesion 3 en MPA del CEU por Pablo de Castro
Presentacion sesion 3 en MPA del CEU por Pablo de CastroPablo De Castro
 
Presentacion sesion01 - Programacion WEB
Presentacion sesion01 - Programacion WEBPresentacion sesion01 - Programacion WEB
Presentacion sesion01 - Programacion WEBploncan24
 
Capa de Aplicacion
Capa de AplicacionCapa de Aplicacion
Capa de AplicacionITTBlogger
 
Pagweb
PagwebPagweb
Pagwebdaniel
 
Patrones Arquitecturales Para Aplicaciones Web
Patrones Arquitecturales Para Aplicaciones WebPatrones Arquitecturales Para Aplicaciones Web
Patrones Arquitecturales Para Aplicaciones Webguesta7f40
 
Revision de tecnologias web
Revision de tecnologias webRevision de tecnologias web
Revision de tecnologias webFRISLY5
 
Servicios web xml
Servicios web xmlServicios web xml
Servicios web xmlJuan Anaya
 
Glosario leidys
Glosario leidysGlosario leidys
Glosario leidysLeidys2011
 
Diapositivas servicios web
Diapositivas servicios webDiapositivas servicios web
Diapositivas servicios webanmari23
 
9-Unidad 3: Diseños de Vista-3.1 Creación Web Services
9-Unidad 3: Diseños de Vista-3.1 Creación Web Services9-Unidad 3: Diseños de Vista-3.1 Creación Web Services
9-Unidad 3: Diseños de Vista-3.1 Creación Web ServicesLuis Fernando Aguas Bucheli
 

La actualidad más candente (17)

Presentacion sesion 3 en MPA del CEU por Pablo de Castro
Presentacion sesion 3 en MPA del CEU por Pablo de CastroPresentacion sesion 3 en MPA del CEU por Pablo de Castro
Presentacion sesion 3 en MPA del CEU por Pablo de Castro
 
Presentacion sesion01 - Programacion WEB
Presentacion sesion01 - Programacion WEBPresentacion sesion01 - Programacion WEB
Presentacion sesion01 - Programacion WEB
 
Java Web - Introduccion
Java Web - IntroduccionJava Web - Introduccion
Java Web - Introduccion
 
Capa de Aplicacion
Capa de AplicacionCapa de Aplicacion
Capa de Aplicacion
 
S3-PD2-2.1. SOAP
S3-PD2-2.1. SOAPS3-PD2-2.1. SOAP
S3-PD2-2.1. SOAP
 
Web services
Web services Web services
Web services
 
Pagweb
PagwebPagweb
Pagweb
 
Apuntes entorno cliente servidor
Apuntes entorno cliente   servidorApuntes entorno cliente   servidor
Apuntes entorno cliente servidor
 
Patrones Arquitecturales Para Aplicaciones Web
Patrones Arquitecturales Para Aplicaciones WebPatrones Arquitecturales Para Aplicaciones Web
Patrones Arquitecturales Para Aplicaciones Web
 
Servicios web
Servicios webServicios web
Servicios web
 
Revision de tecnologias web
Revision de tecnologias webRevision de tecnologias web
Revision de tecnologias web
 
Ekipo 2
Ekipo 2Ekipo 2
Ekipo 2
 
Servicios web xml
Servicios web xmlServicios web xml
Servicios web xml
 
Glosario leidys
Glosario leidysGlosario leidys
Glosario leidys
 
Diapositivas servicios web
Diapositivas servicios webDiapositivas servicios web
Diapositivas servicios web
 
9-Unidad 3: Diseños de Vista-3.1 Creación Web Services
9-Unidad 3: Diseños de Vista-3.1 Creación Web Services9-Unidad 3: Diseños de Vista-3.1 Creación Web Services
9-Unidad 3: Diseños de Vista-3.1 Creación Web Services
 
Bloque 3
Bloque 3Bloque 3
Bloque 3
 

Destacado

Destacado (20)

Solicitud de información vía web
Solicitud de información vía webSolicitud de información vía web
Solicitud de información vía web
 
Acceso remoto
Acceso remotoAcceso remoto
Acceso remoto
 
Acceso remoto
Acceso remotoAcceso remoto
Acceso remoto
 
Internet
InternetInternet
Internet
 
Modulo V: Acceso remoto y redes privadas virtuales
Modulo V: Acceso remoto y redes privadas virtualesModulo V: Acceso remoto y redes privadas virtuales
Modulo V: Acceso remoto y redes privadas virtuales
 
Proyecto multicapa y conexión
Proyecto multicapa y conexiónProyecto multicapa y conexión
Proyecto multicapa y conexión
 
Ftth tecnored v2.0
Ftth tecnored v2.0Ftth tecnored v2.0
Ftth tecnored v2.0
 
Manual técnico del software
Manual técnico del softwareManual técnico del software
Manual técnico del software
 
Elaborando una Solicitud Word 2010
Elaborando una Solicitud Word 2010Elaborando una Solicitud Word 2010
Elaborando una Solicitud Word 2010
 
Solicitud (1)
Solicitud (1)Solicitud (1)
Solicitud (1)
 
Solicitud Al Alcalde
Solicitud Al AlcaldeSolicitud Al Alcalde
Solicitud Al Alcalde
 
Acceso Remoto A Computadores
Acceso Remoto A ComputadoresAcceso Remoto A Computadores
Acceso Remoto A Computadores
 
Alfabeto Emocional
Alfabeto EmocionalAlfabeto Emocional
Alfabeto Emocional
 
Strategy Desk Oct 28
Strategy Desk Oct 28Strategy Desk Oct 28
Strategy Desk Oct 28
 
Herramientas útiles para reporteros en web
Herramientas útiles para reporteros en webHerramientas útiles para reporteros en web
Herramientas útiles para reporteros en web
 
Los 2 Lobos
Los 2 LobosLos 2 Lobos
Los 2 Lobos
 
Elejedelmal
ElejedelmalElejedelmal
Elejedelmal
 
Infarto Coronario
Infarto Coronario Infarto Coronario
Infarto Coronario
 
\"FRASES CÉLEBRES\"
\"FRASES CÉLEBRES\"\"FRASES CÉLEBRES\"
\"FRASES CÉLEBRES\"
 
Trece Lienas GABO
Trece Lienas GABOTrece Lienas GABO
Trece Lienas GABO
 

Similar a Desarrollo de Aplicaciones Web II - Sesión 02 - Conceptos Generales e Introducción a los Formularios Web

Similar a Desarrollo de Aplicaciones Web II - Sesión 02 - Conceptos Generales e Introducción a los Formularios Web (20)

html
htmlhtml
html
 
Fundamentos de la web
Fundamentos de la webFundamentos de la web
Fundamentos de la web
 
Protocolo http
Protocolo httpProtocolo http
Protocolo http
 
PROTOCOLO HTTP.pptx
PROTOCOLO HTTP.pptxPROTOCOLO HTTP.pptx
PROTOCOLO HTTP.pptx
 
Dn12 u3 a9_dzlm
Dn12 u3 a9_dzlmDn12 u3 a9_dzlm
Dn12 u3 a9_dzlm
 
Introducció a les Aplicació Web
Introducció a les Aplicació WebIntroducció a les Aplicació Web
Introducció a les Aplicació Web
 
2.12 http
2.12 http2.12 http
2.12 http
 
Arquitectura de paginas web
Arquitectura de paginas webArquitectura de paginas web
Arquitectura de paginas web
 
PROTOCOLO HTTP
PROTOCOLO HTTPPROTOCOLO HTTP
PROTOCOLO HTTP
 
Servidores Proxy protocolo HTTP
Servidores Proxy  protocolo HTTPServidores Proxy  protocolo HTTP
Servidores Proxy protocolo HTTP
 
Protocolo HTTP
Protocolo HTTPProtocolo HTTP
Protocolo HTTP
 
ASR_Tema_3.pdf
ASR_Tema_3.pdfASR_Tema_3.pdf
ASR_Tema_3.pdf
 
Http
HttpHttp
Http
 
Servicios Web.pptx
Servicios Web.pptxServicios Web.pptx
Servicios Web.pptx
 
Http
HttpHttp
Http
 
PROTOCOLO HTTP
PROTOCOLO HTTPPROTOCOLO HTTP
PROTOCOLO HTTP
 
Arquitectura cliente servidor
Arquitectura cliente servidorArquitectura cliente servidor
Arquitectura cliente servidor
 
Presentación1
Presentación1Presentación1
Presentación1
 
Angel ruiz g151 tendencia de la web
Angel ruiz g151 tendencia de la webAngel ruiz g151 tendencia de la web
Angel ruiz g151 tendencia de la web
 
Angel ruiz g151 tendencia de la web
Angel ruiz g151 tendencia de la webAngel ruiz g151 tendencia de la web
Angel ruiz g151 tendencia de la web
 

Más de Didier Granados

Desarrollo de Aplicaciones Web II - Sesión 07: Transacciones
Desarrollo de Aplicaciones Web II - Sesión 07: TransaccionesDesarrollo de Aplicaciones Web II - Sesión 07: Transacciones
Desarrollo de Aplicaciones Web II - Sesión 07: TransaccionesDidier Granados
 
Desarrollo de Aplicaciones Web II - Sesión 08: Sesiones y Cookies
Desarrollo de Aplicaciones Web II - Sesión 08: Sesiones y CookiesDesarrollo de Aplicaciones Web II - Sesión 08: Sesiones y Cookies
Desarrollo de Aplicaciones Web II - Sesión 08: Sesiones y CookiesDidier Granados
 
Desarrollo de Aplicaciones Web II - Sesión 05 - Evolución de los lenguajes PO...
Desarrollo de Aplicaciones Web II - Sesión 05 - Evolución de los lenguajes PO...Desarrollo de Aplicaciones Web II - Sesión 05 - Evolución de los lenguajes PO...
Desarrollo de Aplicaciones Web II - Sesión 05 - Evolución de los lenguajes PO...Didier Granados
 
Desarrollo de Aplicaciones Web II - Sesión 04 - Programación Orientada a Objetos
Desarrollo de Aplicaciones Web II - Sesión 04 - Programación Orientada a ObjetosDesarrollo de Aplicaciones Web II - Sesión 04 - Programación Orientada a Objetos
Desarrollo de Aplicaciones Web II - Sesión 04 - Programación Orientada a ObjetosDidier Granados
 
Desarrollo de Aplicaciones Web II - Sesión 01 - Introducción
Desarrollo de Aplicaciones Web II - Sesión 01 - IntroducciónDesarrollo de Aplicaciones Web II - Sesión 01 - Introducción
Desarrollo de Aplicaciones Web II - Sesión 01 - IntroducciónDidier Granados
 
CSS - Hojas de Estilo en Cascada
CSS - Hojas de Estilo en CascadaCSS - Hojas de Estilo en Cascada
CSS - Hojas de Estilo en CascadaDidier Granados
 
Sistemas de Gestion del Conocimiento
Sistemas de Gestion del ConocimientoSistemas de Gestion del Conocimiento
Sistemas de Gestion del ConocimientoDidier Granados
 

Más de Didier Granados (7)

Desarrollo de Aplicaciones Web II - Sesión 07: Transacciones
Desarrollo de Aplicaciones Web II - Sesión 07: TransaccionesDesarrollo de Aplicaciones Web II - Sesión 07: Transacciones
Desarrollo de Aplicaciones Web II - Sesión 07: Transacciones
 
Desarrollo de Aplicaciones Web II - Sesión 08: Sesiones y Cookies
Desarrollo de Aplicaciones Web II - Sesión 08: Sesiones y CookiesDesarrollo de Aplicaciones Web II - Sesión 08: Sesiones y Cookies
Desarrollo de Aplicaciones Web II - Sesión 08: Sesiones y Cookies
 
Desarrollo de Aplicaciones Web II - Sesión 05 - Evolución de los lenguajes PO...
Desarrollo de Aplicaciones Web II - Sesión 05 - Evolución de los lenguajes PO...Desarrollo de Aplicaciones Web II - Sesión 05 - Evolución de los lenguajes PO...
Desarrollo de Aplicaciones Web II - Sesión 05 - Evolución de los lenguajes PO...
 
Desarrollo de Aplicaciones Web II - Sesión 04 - Programación Orientada a Objetos
Desarrollo de Aplicaciones Web II - Sesión 04 - Programación Orientada a ObjetosDesarrollo de Aplicaciones Web II - Sesión 04 - Programación Orientada a Objetos
Desarrollo de Aplicaciones Web II - Sesión 04 - Programación Orientada a Objetos
 
Desarrollo de Aplicaciones Web II - Sesión 01 - Introducción
Desarrollo de Aplicaciones Web II - Sesión 01 - IntroducciónDesarrollo de Aplicaciones Web II - Sesión 01 - Introducción
Desarrollo de Aplicaciones Web II - Sesión 01 - Introducción
 
CSS - Hojas de Estilo en Cascada
CSS - Hojas de Estilo en CascadaCSS - Hojas de Estilo en Cascada
CSS - Hojas de Estilo en Cascada
 
Sistemas de Gestion del Conocimiento
Sistemas de Gestion del ConocimientoSistemas de Gestion del Conocimiento
Sistemas de Gestion del Conocimiento
 

Último

Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfalejandrogomezescoto
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfJoseAlejandroPerezBa
 
La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....Aaron Betancourt
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfodalistar77
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosLCristinaForchue
 
VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx Emialexsolar
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidaddanik1023m
 
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETGermán Küber
 
Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.marianarodriguezc797
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxPaolaCarolinaCarvaja
 
La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2montoyagabriela340
 
Carta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfCarta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfangelinebocanegra1
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfymiranda2
 
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...RaymondCode
 
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSPRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSLincangoKevin
 
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...OLGAMILENAMONTAEZNIO
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfOBr.global
 
Análisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfAnálisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfcastrodanna185
 

Último (20)

Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
 
La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....
 
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier FolchBEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdf
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
 
VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx E
 
BEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura SilvaBEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura Silva
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidad
 
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
 
Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docx
 
La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2
 
Carta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfCarta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdf
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
 
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
 
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSPRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
 
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
 
Análisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfAnálisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdf
 

Desarrollo de Aplicaciones Web II - Sesión 02 - Conceptos Generales e Introducción a los Formularios Web

  • 1. Didier Fabián Granados Muñoz Sesión No. 2 – Conceptos Generales y Repaso de Formularios Web Agosto 12 de 2009
  • 3.  Una página web, también conocida como página de Internet, es un documento adaptado para la Web y normalmente forma parte de un sitio web.  Su principal característica son los hiperenlaces a otras páginas web, siendo esto el fundamento de la Web.  Se escribe en un lenguaje de marcado que provea la capacidad de insertar hiperenlaces, generalmente HTML.  El contenido de la página puede ser predeterminado (página web estática) o generado al momento de visualizarla o solicitarla a un servidor web (página web dinámica).
  • 4. Página web estática Página web dinámica  Básicamente informativa.  Puede interactuar con el  El visitante y administrador visitante y/o administrador Web no pueden interactuar Web, pudiéndose modificar con la página para modificar el contenido de la página. su contenido.  SI se utilizan bases de datos y  NO se utilizan bases de datos se requiere programación ni se requiere programación. Web.  Es suficiente utilizar código  El lenguaje utilizado puede HTML. ser: PHP, ASP, ASP .NET o Java, entre otros.  Fácil de desarrollar y en poco tiempo.  Mayor tiempo y costo de desarrollo.
  • 6. • Página o formulario de contacto. • Página de formas de pago: Tarjeta de crédito, giro, depósito o transferencia bancaria. • Catálogo de productos dinámico: categorías, subcategorías y artículos. • Carrito de compras. • Registro de clientes para comprar en línea. • Panel de administración para consultar y actualizar productos, clientes y fletes. • Panel de seguimiento de pedidos para uso del cliente. • Conexión a pasarela de pagos . • Entre muchas otras cosas…
  • 8. Internet Estación de trabajo Servidor(es) de Base(s) de Navegador aplicaciones datos
  • 9. De alguna manera tenemos que llegar a esto…
  • 10.  El DNS (Domain Name System) o Sistema de Nombres de Dominio es una base de datos jerárquica y distribuida que almacena información sobre los nombres de dominio de redes cómo Internet. También llamamos DNS al protocolo de comunicación entre un cliente (resolver) y el servidor DNS.  La función más común de DNS es la traducción de nombres por direcciones IP, esto nos facilita recordar la dirección de una máquina haciendo una consulta DNS (mejor recordar www.politecnicojic.edu.co que 200.13.255.31) y nos proporciona un modo de acceso más fiable ya que por múltiples motivos la dirección IP puede variar manteniendo el mismo nombre de dominio.
  • 11. Un nombre de dominio consiste en diferentes partes llamadas etiquetas y separadas por puntos.  La parte situada más a la derecha es el llamado dominio de primer nivel (Top Level Domain) y cada una de las partes es un subdominio de la parte que tiene a su derecha.  De esta manera, si tenemos www.politecnicojic.edu.co:  co – Es quien indica el país de procedencia.  edu - Es el dominio de primer nivel.  politecnicojic - Es un subdominio de net.  www - Es un subdominio de politecnicojic.  Una consulta de un cliente a un servidor DNS puede ser recursiva si el servidor al que consultamos consulta a su vez otro servidor o iterativa si responde a partir de los datos que tiene almacenados localmente.
  • 13. El protocolo de transferencia de hipertexto (HTTP, HyperText Transfer Protocol) es el protocolo usado en cada transacción de la Web (WWW).  Fue desarrollado por el consorcio W3C y la IETF (Internet Engineering Task Force), colaboración que culminó en 1999 con la publicación de una serie de RFC (Request For Comments o propuestas para protocolos de internet), siendo el más importante de ellos el RFC 2616, que especifica la versión 1.1.  Define la sintaxis y la semántica que utilizan los elementos software de la arquitectura web (clientes, servidores, proxies) para comunicarse.  Es un protocolo orientado a transacciones y sigue el esquema petición-respuesta entre un cliente y un servidor.
  • 15.  El propósito del protocolo HTTP es permitir la transferencia de archivos (principalmente, en formato HTML) entre un navegador (que se encuentra en el cliente) y un servidor web localizado mediante una cadena de caracteres denominada dirección URL.  El navegador realiza una solicitud HTTP.  El servidor procesa la solicitud y después envía una respuesta HTTP.  En realidad, la comunicación se realiza en más etapas si se considera el procesamiento de la solicitud en el servidor.
  • 16. Una solicitud HTTP es un conjunto de líneas que el navegador envía al servidor. Dicho conjunto incluye:  Una línea de solicitud: es una línea que especifica el tipo de documento solicitado, el método que se aplicará y la versión del protocolo utilizada. La línea está formada por tres elementos que deben estar separados por un espacio:  El método (GET o POST)  La dirección URL.  La versión del protocolo utilizada por el cliente (por lo general, HTTP/1.0, 1.1 ó 1.2). GET /index.html HTTP/1.1
  • 17. Los campos del encabezado de solicitud: Conjunto de líneas opcionales que permiten aportar información adicional sobre la solicitud y/o el cliente (navegador, sistema operativo, etc.). Cada una de estas líneas está formada por un nombre que describe el tipo de encabezado, seguido de dos puntos (:) y el valor del encabezado.  El cuerpo de la solicitud: Conjunto de líneas opcionales que deben estar separadas de las líneas precedentes por una línea en blanco y, por ejemplo, permiten que se envíen datos por un comando POST durante la transmisión de datos al servidor utilizando un formulario. POST /index.html HTTP/1.1 Host: www.unaurldeejemplo.com User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows 7)
  • 19. Métodos o comandos HTTP Comando Descripción GET Solicita el recurso ubicado en la URL especificada y envía datos en la misma. HEAD Solicita el encabezado del recurso ubicado en la URL especificada. POST Envía datos al programa ubicado en la URL especificada, generalmente mediante formularios. PUT Envía datos a la URL especificada. DELETE Borra el recurso ubicado en la URL especificada.
  • 20. Una respuesta HTTP es un conjunto de líneas que el servidor envía al navegador. Incluye los siguientes elementos:  Una línea de estado: es una línea que especifica la versión del protocolo utilizada y el estado de la solicitud en proceso mediante un texto explicativo y un código. La línea está compuesta por tres elementos que deben estar separados por un espacio:  La versión del protocolo utilizada  El código de estado  El significado del código HTTP/1.1 200 OK
  • 21. Los campos del encabezado de respuesta: Conjunto de líneas opcionales que permiten aportar información adicional sobre la respuesta y/o el servidor.  Cada una de estas líneas está formada por un nombre que describe el tipo de encabezado, seguido de dos puntos (:) y el valor del encabezado.  El cuerpo de la respuesta: Contiene el documento solicitado. Date: Fri, 31 Dec 2003 23:59:59 GMT Content-Type: text/html Content-Length: 1221 ...
  • 22.  1XX Mensajes  N° - 100 111 Conexión rechazada  2XX Operación exitosa  200 OK  201-203 Información no oficial  204 Sin Contenido  205 Contenido para recargar  206 Contenido parcial
  • 23.  3xx Redirección hacia otra URL  300 Múltiples posibilidades.  301 Mudado permanentemente.  302 Encontrado.  303 Vea otros.  304 No modificado.  305 Utilice un proxy.  307 Redirección temporal.
  • 24. 4xx Error por parte del cliente  400 Solicitud incorrecta  401 No autorizado  402 Pago requerido  403 Prohibido  404 No encontrado  405 Método no permitido  406 No aceptable  407 Proxy requerido  408 Tiempo de espera agotado  409 Conflicto  410 Ya no disponible  411 Requiere longitud  412 Falló precondición  413 Entidad de solicitud demasiado larga  414 URL de solicitud demasiado largo  415 Tipo de medio no soportado  416 Rango solicitado no disponible  417 Falló expectativa
  • 25.  5xx Error por parte del servidor  500 Error interno.  501 No implementado.  502 Pasarela incorrecta.  503 Servicio no disponible.  504 Tiempo de espera de la pasarela agotado.  505 Versión de HTTP no soportada.
  • 26.  Un ejemplo más o menos completo… HTTP/1.1 200 OK Date: Fri, 31 Dec 2003 23:59:59 GMT Content-Type: text/html Content-Length: 1221 <html> <body> <h1>Página principal del curso</h1> (Contenido) . . . </body> </html>
  • 28. Pues por todo lo anterior (y otras muchas cosas más) es posible que veamos nuestras páginas web en un navegador!
  • 31. Los formularios son una utilidad necesaria para que los documentos descritos con HTML dispongan de un medio para que el lector o visitante pueda remitir información personalizada al servidor, creándose, de esta forma, un sistema completo de interacción con el mismo.
  • 32. El lenguaje HTML dispone de directivas que permiten crear formularios, estos son un conjunto de objetos dinámicos que posibilitan al lector interactuar con el documento descrito en base a HTML. Estos objetos son:  Cajas de texto  Contraseñas  Campos ocultos  Casillas de verificación  Botones de selección  Botones  Imágenes  Áreas de texto  Listas
  • 33.  Todos estos objetos (a excepción de los ocultos) permiten que el lector realice acciones sobre ellos:  Introducir o cambiar datos.  Seleccionar opciones.  Pulsar botones.  Y posteriormente remitir el conjunto de información que representa los datos introducidos y las opciones seleccionadas a una dirección URL determinada que puede ser una dirección de correo, un programa que realice un tratamiento con ella, etc.
  • 34.  Los formularios se aplican a cualquier concepto de comunicación entre un emisor y un receptor.  Se puede crear un formulario para introducir simples mensajes y enviarlos por correo, realizar pedidos, rellenar fichas de admisión, solicitudes de ingreso, suscripciones, inscripciones, votaciones, envío de anuncios, rellenar currículos, etc.  Un ejemplo cotidiano se puede encontrar en un motor de búsqueda, como Yahoo, Google, Altavista, Bing, etc., donde el usuario introduce lo que quiere buscar, selecciona dónde quiere buscar y cómo lo quiere buscar. Esta información es utilizada por el motor de búsqueda para que un programa la analice y, en consecuencia, realice la búsqueda en sus bases de datos.
  • 36. Debemos recordar la estructura básica de un documento HTML. <html> <head> Otras etiquetas... </head> En esta región del <body> documento Contenido de la página... HTML es que </body> debemos insertar el formulario. </html>
  • 37. El objeto FORM  El objeto <form> permite la creación de un formulario dentro de una página Web. Este objeto es un objeto contenedor, puesto que contendrá el resto de los objetos de que se componga el formulario. De igual manera, el objeto <form> define el formato de transmisión de los datos introducidos y el lugar de destino.  Una página web puede contener múltiples formularios (directivas <form> … </form>, aunque no es lo más recomendado), con acciones diferentes. Sin embargo, no pueden existir formularios dentro de otros formularios ni cruzarse las directivas.
  • 38. Sintaxis básica  La sintaxis básica del objeto <form> es la siguiente: <form action="acción" method="MétodoTransmisión"> Aquí van los objetos del Formulario </form>
  • 39. Sintaxis básica  La cláusula action contiene la URL o dirección de destino, que puede ser una dirección de correo electrónico, o bien un programa en el servidor que gestionará los datos que se envían. Esta etiqueta es requerida, aunque si no se especifica, tomará por defecto URL de la página actual.  La cláusula method indica el método, formato o protocolo de transmisión de los datos del formulario. Su valor puede ser uno de los siguientes:  GET  POST
  • 40. Cláusula "method“ o método de envío de datos  GET: Es el método por defecto. Los datos se transmiten incluidos en la URL de petición en forma de variable de entorno y con el siguiente formato: campo=valor[&campo=valor ... ]  No se pueden transmitir más de 255 caracteres.
  • 41. Cláusula "method“ o método de envío de datos  POST: Es el formato que utiliza la aplicación del servidor, los datos se transmiten en el cuerpo del protocolo y la aplicación los recibe en la entrada estándar. En la cadena de caracteres se define el formato de los datos.  Tiene una serie de atributos especiales MIME (Multipurpose Internet Mail Extensions). En principio esta codificación es "application/x-www-form-urlencoded".  Permite la transmisión de grandes cantidades de datos. Por lo tanto, es posible enviar archivos mediante un formulario cuyo método sea POST, sin olvidar otra cláusula llamada enctype, que indica qué tipo de dato será enviado según el inciso anterior.
  • 42. Campos o Elementos  Un campo o elemento, es una entidad independiente de información dentro del conjunto del formulario.  Dicho en otros términos, los campos o elementos son cada uno de los objetos en un formulario que representa la información introducida, editada o seleccionada por el usuario.  Existe una variedad de tipos de campos, dependiendo del método de introducción de los datos, que en su mayoría se hace desde el teclado.
  • 43. Elementos INPUT  Prácticamente todos estos campos con la directiva <input>, cuya sintaxis básica es la siguiente: <input type="text|password|checkbox|radio|submit|reset|file| hidden|image" [size="tamaño"] [value="valor"] [checked="checked"] [maxlength="LongitudMáxima"] [name="NombreDeCampo"] [align="top|middle|bottom|left|right"] [src="UrlDeLaImagen"] />
  • 44. Campos o Elementos  Obviamente, según las características de un determinado tipo de campo (dado por el atributo type) utilizará ciertas cláusulas de las citadas anteriormente. Por ello, a continuación se tratan cada uno de los tipos y sus respectivas cláusulas,  text  password  hidden  checkbox  radio  button  submit  reset  file  image
  • 45. Elemento TEXTAREA  En ocasiones es necesario la introducción de un texto largo, con múltiples líneas. Por ello, la caja de texto se queda limitada y es necesario recurrir a otro tipo de campo especial, llamado área de texto. Este campo se crea con una directiva nueva, llamada textarea, y cuya sintaxis básica es la siguiente: <textarea name="nombre" [cols="columnas"] [rows="filas"] [align="alineación"]> Texto Inicial, no es necesario </textarea>
  • 46. Elemento SELECT (Listas)  Una lista es un conjunto de opciones que el usuario puede elegir con un click de ratón. A diferencia de una casilla de verificación o un botón de selección, las listas agrupan las opciones en un solo cuadro.  Existen dos tipos de listas:  Listas normales  Listas desplegables.  Las primeras muestran un recuadro con la lista de opciones en su interior. Las segundas enseñan una especie de caja de texto con un botón a la derecha que, al hacer click sobre él, se despliega la lista.
  • 47. Elemento SELECT (Listas)  Para esto, hay que utilizar dos directivas nuevas: <select> y <option>, cuya sintaxis básica es la siguiente: <select name="NombreLista" [size="valor"] [align="alineación"] [width="valor"] [height="valor"] [multiple="multiple"]> <option [selected="selected"]>Texto de la opción</option> ... </select>