desarrollo de aplicaciones web ii - sesión 02 - conceptos generales e introducción a los...
TRANSCRIPT
Didier Fabián Granados Muñoz
Sesión No. 2 – Conceptos Generales y Repaso de Formularios Web
Agosto 12 de 2009
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
Básicamente informativa.
El visitante y administrador
Web no pueden interactuar
con la página para modificar
su contenido.
NO se utilizan bases de datos
ni se requiere programación.
Es suficiente utilizar código
HTML.
Fácil de desarrollar y en poco
tiempo.
Página web dinámica
Puede interactuar con el
visitante y/o administrador
Web, pudiéndose modificar
el contenido de la página.
SI se utilizan bases de datos y
se requiere programación
Web.
El lenguaje utilizado puede
ser: PHP, ASP, ASP .NET o
Java, entre otros.
Mayor tiempo y costo de
desarrollo.
• 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…
Navegador
Estación
de trabajo
Servidor(es) de
aplicaciones
Base(s) de
datos
Internet
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.
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.
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)
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>
Pues por todo lo anterior (y otras muchas
cosas más) es posible que veamos nuestras
páginas web en un navegador!
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.
<html>
<head>
Otras etiquetas...
</head>
<body>
Contenido de la página...
</body>
</html>
Debemos recordar la estructura básica de un documento HTML.
En esta región del documentoHTML es que debemos insertar el formulario.
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>
