Desarrollo de Aplicaciones Internet

Clase II
Universidad de los Lagos 2011

Conceptos Bsicos (1)

Pgina web:

Documento realizado en HTML y que es parte de un sitio Web. Aparte del HTML se pueden utilizar otros lenguajes complementarios como PHP, ASP, Javascript...

Sitio web: Pgina principal y sus otras pginas, grficos, documentos, multimedia y otros archivos asociados que se almacenan en un servidor Web o en el disco duro de un equipo.

HTML: (Lenguaje de marcado de hipertexto) Lenguaje estndar de marcas empleado para documentos del World Wide Web.

Conceptos Bsicos (2)

Hipervnculo: Enlace web o en su versin anglosajona link. Un hipervnculo es una conexin de una pgina a otro destino como, por ejemplo, otra pgina o una ubicacin diferente en la misma pgina, una imagen, una direccin de correo electrnico, un archivo o un programa. Un hipervnculo puede ser texto o una imagen.

Lenguaje de programacin: Lenguaje con el que est desarrollada una pgina web.

Editor:
Programa utilizado para crear pginas web sin la necesidad de tener que aprender el lenguaje. Ejemplos: M. FrontPage 2000 y Macromedia Dreamweaver.

Conceptos Bsicos (3)

Servidor:

Mquina conectada a Internet que entre otros servicios- ofrece albergue para pginas web haciendo que estn accesibles desde cualquier punto de Internet.

Cliente FTP:

Programa que permite conectarse al servidor para publicar pginas web.

Hosting: Hospedaje web.

Dominio:
Direccin web asociada a una pgina web.

Conceptos Bsicos (4)

ISP:

Proveedor de servicios para web. Los diferentes servicios que pueden ofrecer son: conexin a Internet, registro de dominio, hospedaje de sitios web, servicios de contadores de servicios, libros de visitas gratuitos, estadsticas para web, entre otros.

URL: (Universal Resource Location / Localizador de recursos universal) Cadena que proporciona la direccin de Internet de un sitio Web o un recurso del World Wide Web, junto con el protocolo mediante el cual se tiene acceso al sitio o al recurso.

Applets: Programas desarrollados con Java para mejorar la presentacin de las pginas Web que realizan animaciones, juegos e interaccin con el usuario.

Conceptos Bsicos (5)

Frames (marcos):

reas rectangulares que subdividen las ventanas de algunas pginas Web, cada una de las cuales contiene un documento de hipertexto independiente de los dems.

Webmaster: Un webmaster es el encargado de crear, disear, estructurar, maquetar, publicar, promocionar y mantener un sitio web.

Tablas:

Elemento fundamental para la maquetacin y distribucin de contenidos de una pgina web.

Conceptos Bsicos (6)

Banner:

Elemento grfico con forma rectangular, normalmente animado, cuyo contenido es publicidad.

Imagen: Archivo grfico que se puede insertar en una pgina Web y mostrar en un explorador de Web. Existen diferentes formatos: GIF, JPEG, BMP, TIFF, WMF y PNG, entre otros.

Propiedades: Caractersticas de un elemento del Web actual, como el ttulo y la direccin URL de un Web o el nombre y el valor inicial de un campo de formulario. Tambin puede especificar propiedades para elementos de pgina como tablas, grficos y elementos activos.

Conceptos Bsicos (7)

PageRank: medida de la visibilidad o nmero y

calidad de los enlaces que recibe una pgina web.

Fundamentos de la WEB

El xito de la WEB se basa en dos puntales fundamentales:

Protocolo HTTP Lenguaje HTML

Protocolo HTTP

El protocolo HTTP (hypertext tranfer protocol) es el protocolo base de la WWW. HTTP utiliza el puerto 80 Orientado a la conexin Existe una variante al HTTP y es el HTTPS

HTTPS

HTTPS (S por Secure)

Utiliza el protocolo de seguridad SSL (Secure Socket Layer) Cifrar y autentificar el trfico entre cliente y servidor Usos en comercio electrnico y trfico de informacin personal y confidencial HTTPS utiliza el puerto 443

HTTP

El funcionamiento de HTTP es el siguiente:

El cliente establece una conexin TCP hacia el servidor, hacia el puerto HTTP (o el indicado en la direccin de conexin), enva un comando HTTP de peticin de un recurso (junto con algunas cabeceras informativas) y por la misma conexin el servidor responde con los datos solicitados y con algunas cabeceras informativas.

El protocolo define adems cmo codificar el paso de parmetros entre pginas. Las directivas de peticin de informacin que define HTTP son:
GET Peticin de recurso. POST Peticin de recurso pasando parmetros. HEAD Peticin de datos sobre recurso. PUT Creacin o envo de recurso. DELETE Eliminacin de recurso. TRACE Devuelve al origen la peticin tal como se ha recibido en el receptor, para depurar errores. OPTIONS Sirve para comprobar las capacidades del servidor. CONNECT Reservado para uso en servidores intermedios capaces de funcionar como tneles.

Peticiones en HTTP: GET y POST

Las peticiones en HTTP pueden realizarse usando dos mtodos.

El mtodo GET, en caso de enviar parmetros junto a la peticin, las enviara codificadas en la URL. Por su parte, el mtodo POST, en caso de enviarlos, lo hara como parte del cuerpo de la peticin.
GET /index.html HTTP/1.1 Host: www.ejemplo.com User-Agent: Mozilla/4.5 [en] Accept: image/gif, image/jpeg, text/html Accept-language: en Accept-Charset: iso-8859-1

Una peticin GET sigue el siguiente formato:

De estos identificadores, los ms conocidos e importantes son: Host: nombre del servidor solicitado. User-Agent: nombre del navegador o programa usado para acceder al recurso. Accept: algunos formatos de texto e imagen aceptados por el cliente. Accept-Language: idiomas soportados (preferidos) por el cliente, til para personalizar la respuesta automticamente.

Peticiones en HTTP: GET y POST

Para codificar los parmetros como parte de la URL, stos se aaden a la URL detrs del nombre del recurso, separados de ste por un carcter ?. Los diferentes parmetros se separan entre s por el carcter &. Los espacios se sustituyen por +.
Por ejemplo: http://www.ejemplo.com/indice.jsp?nombre=Perico+Palotes&OK=1 que en la peticin HTTP quedara: GET /indice.jsp?nombre=Perico+Palotes&OK=1 HTTP/1.0 Host: www.ejemplo.com User-Agent: Mozilla/4.5 [en] Accept: image/gif, image/jpeg, text/html Accept-language: en Accept-Charset: iso-8859-1

Peticiones en HTTP: GET y POST

POST /indice.jsp HTTP/1.0 Host: www.ejemplo.com User-Agent: Mozilla/4.5 [en] Accept: image/gif, image/jpeg, text/html Accept-language: en Accept-Charset: iso-8859-1 Content-Disposition: form-data; name=nombre Perico Palotes Content-Disposition: form-data; name=OK 1

El lenguaje HTML

Un puntal del xito del WWW es el HTML (hypertext mark-up language) Lenguaje de marcas Permite representar en forma rica el contenido, referenciar a otros recursos, enlaces, mostrar formularios, etc.. Siguiente paso en su evolucin fue la inclusin de mtodos para confeccionar pginas dinmicas: CGI

CGI: Common Gateway Interface

Mecanismo para el paso de informacin entre HTTP y Aplicaciones, ciertos problemas de carga del servidor Posteriormente se desarrollan alternativas a las CGI

Ejecucin de mdulos ms integrados con el servidor Dotar al servidor de interpretes de lenguajes (PHP, ASP,etc.)

A partir de este momento se genera una explosin de arquitecturas y lenguajes

HTML Bsico

Los documentos HTML se conforman como documentos de texto plano Formato del texto se especifica mediante marcas de texto (tags, etiquetas) Las etiquetas o tags son marcas de texto que empiezan por el carcter <, seguido del nombre de la etiqueta, los atributos adicionales y acaban con el carcter >

Ejemplos de etiquetas de HTML:

Titulo
<title>Nombre del documento</title>

Parrafo
<P>Un ejemplo de uso de las etiquetas para marcado de texto</P> La etiqueta P admite adems un atributo, ALIGN, que indica la alineacin del texto en el prrafo, pudiendo tomar los valores:
LEFT, alineacin a la izquierda, es el activo por defecto. RIGHT, alineacin a la derecha. CENTER, centrado del texto.

Tipo
<B>Negrilla<I>Itlica</I>Negrilla</B>

HTML Bsico

<br>, salto de lnea <hr>, permite incluir en nuestra pgina una regla horizontal (una raya de extremo a extremo de la pgina)

Atributos:
NOSHADE: elimina el efecto de sombreado de la regla. WIDTH: define la longitud de la lnea respecto a la pgina. SIZE: define el grosor de la lnea.

HTML Bsico

Los atributos de las etiquetas se incluyen en la etiqueta de inicio de la siguiente forma:

<A HREF=http://www.w3c.org>Enlace</A> <IMG SRC=imagen.jpg BORDER=0 ALT=NOMBRE>

Estilos: CSS

En HTML 4.01 los atributos de los tags han sido declarado obsoletos, debemos evitar su uso y tratar de usar en su lugar hojas de estilo: CSS
h1 { font-size: 22pt; font-family: arial; color: white; background: green; text-align: center; }