Your SlideShare is downloading. ×
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Desarrollo de Aplicaciones Web II - Sesión 02 - Conceptos Generales e Introducción a los Formularios Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

3,046

Published on

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
  • ME PARECE QUE ES MUY NIMPORTANTE PORQUE EL DESARROLLO DE LAS APLICACIONES WEB SE USA MUCHO PARA CREAR PAGINAS
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,046
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
170
Comments
1
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Didier Fabián Granados Muñoz Sesión No. 2 – Conceptos Generales y Repaso de Formularios Web Agosto 12 de 2009
  • 2.  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).
  • 3. 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.
  • 4. • 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…
  • 5. Internet Estación de trabajo Servidor(es) de Base(s) de Navegador aplicaciones datos
  • 6. De alguna manera tenemos que llegar a esto…
  • 7.  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.
  • 8.  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.
  • 9.  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.
  • 10.  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.
  • 11.  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
  • 12.  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)
  • 13. 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.
  • 14.  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
  • 15.  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 ...
  • 16.  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
  • 17.  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.
  • 18.  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
  • 19.  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.
  • 20.  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>
  • 21. Pues por todo lo anterior (y otras muchas cosas más) es posible que veamos nuestras páginas web en un navegador!
  • 22. 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.
  • 23.  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
  • 24.  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.
  • 25.  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.
  • 26. 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>
  • 27. 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.
  • 28. 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>
  • 29. 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
  • 30. 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.
  • 31. 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.
  • 32. 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.
  • 33. 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"] />
  • 34. 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
  • 35. 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>
  • 36. 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.
  • 37. 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>

×