Desarrollo de Aplicaciones Internet

Clase II

Universidad de los Lagos2011

Conceptos Básicos (1)

Página 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:

Página principal y sus otras páginas, gráficos, 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 estándar de marcas empleado para documentos del World Wide Web.

Conceptos Básicos (2)

Hipervínculo:

“Enlace web” o en su versión anglosajona “link”. Un hipervínculo es una conexión de una página a otro destino como, por ejemplo, otra página o una ubicación diferente en la misma página, una imagen, una dirección de correo electrónico, un archivo o un programa. Un hipervínculo puede ser texto o una imagen.

Lenguaje de programación:

Lenguaje con el que está desarrollada una página web.

Editor:

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

Conceptos Básicos (3)

Servidor:

Máquina conectada a Internet que –entre otros servicios- ofrece albergue para páginas web haciendo que estén accesibles desde cualquier punto de Internet.

Cliente FTP:

Programa que permite conectarse al servidor para publicar páginas web.

Hosting:

Hospedaje web.

Dominio:

Dirección web asociada a una página web.

Conceptos Básicos (4)

ISP:

Proveedor de servicios para web. Los diferentes servicios que pueden ofrecer son: conexión a Internet, registro de dominio, hospedaje de sitios web, servicios de contadores de servicios, libros de visitas gratuitos, estadísticas para web, entre otros.

URL:

(Universal Resource Location / Localizador de recursos universal) Cadena que proporciona la dirección 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 presentación de las páginas Web que realizan animaciones, juegos e interacción con el usuario.

Conceptos Básicos (5)

Frames (marcos):

Áreas rectangulares que subdividen las ventanas de algunas páginas Web, cada una de las cuales contiene un documento de hipertexto independiente de los demás.

Webmaster:

Un webmaster es el encargado de crear, diseñar, estructurar, maquetar, publicar, promocionar y mantener un sitio web.

Tablas:

Elemento fundamental para la maquetación y distribución de contenidos de una página web.

Conceptos Básicos (6)

Banner:

Elemento gráfico con forma rectangular, normalmente animado, cuyo contenido es publicidad.

Imagen:

Archivo gráfico que se puede insertar en una página Web y mostrar en un explorador de Web. Existen diferentes formatos: GIF, JPEG, BMP, TIFF, WMF y PNG, entre otros.

Propiedades:

Características de un elemento del Web actual, como el título y la dirección URL de un Web o el nombre y el valor inicial de un campo de formulario. También puede especificar propiedades para elementos de página como tablas, gráficos y elementos activos.

Conceptos Básicos (7)

PageRank: medida de la visibilidad o número y calidad de los enlaces que recibe una página web.

Fundamentos de la WEB

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

Protocolo HTTPLenguaje HTML

Protocolo HTTP

El protocolo HTTP (hypertext tranfer protocol) es el protocolo base de la WWW.

HTTP utiliza el puerto 80Orientado a la conexiónExiste 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 tráfico entre cliente y

servidorUsos en comercio electrónico y tráfico de

información personal y confidencialHTTPS utiliza el puerto 443

HTTP

El funcionamiento de HTTP es el siguiente: El cliente establece una conexión TCP hacia el servidor, hacia el puerto

HTTP (o el indicado en la dirección de conexión), envía un comando HTTP de petición de un recurso (junto con algunas cabeceras informativas) y por la misma conexión el servidor responde con los datos solicitados y con algunas cabeceras informativas.

El protocolo define además cómo codificar el paso de parámetros entre páginas.

Las directivas de petición de información que define HTTP son:GET Petición de recurso.POST Petición de recurso pasando parámetros.HEAD Petición de datos sobre recurso.PUT Creación o envío de recurso.DELETE Eliminación de recurso.TRACE Devuelve al origen la petición tal como se ha recibido en elreceptor, para depurar errores.OPTIONS Sirve para comprobar las capacidades del servidor.CONNECT Reservado para uso en servidores intermedios capaces de funcionar

como túneles.

Peticiones en HTTP: GET y POST

Las peticiones en HTTP pueden realizarse usando dos métodos. El método GET, en caso de enviar parámetros junto a la petición, las

enviaría codificadas en la URL. Por su parte, el método POST, en caso de enviarlos, lo haría como

parte del cuerpo de la petición. Una petición GET sigue el siguiente formato:

GET /index.html HTTP/1.1Host: www.ejemplo.comUser-Agent: Mozilla/4.5 [en]Accept: image/gif, image/jpeg, text/htmlAccept-language: enAccept-Charset: iso-8859-1

De estos identificadores, los más conocidos e importantes son:Host: nombre del servidor solicitado.User-Agent: nombre del navegador o programa usado para accederal 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

automáticamente.

Peticiones en HTTP: GET y POST

Para codificar los parámetros como parte de la URL, éstos se añaden a la URL detrás del nombre del recurso, separados de éste por un carácter ?. Los diferentes parámetros se separan entre sí por el carácter &. Los espacios se sustituyen por +.

Por ejemplo: http://www.ejemplo.com/indice.jsp?nombre=Perico+Palotes&OK=1que en la petición HTTP quedaría:

GET /indice.jsp?nombre=Perico+Palotes&OK=1 HTTP/1.0Host: www.ejemplo.comUser-Agent: Mozilla/4.5 [en]Accept: image/gif, image/jpeg, text/htmlAccept-language: enAccept-Charset: iso-8859-1

Peticiones en HTTP: GET y POST

POST /indice.jsp HTTP/1.0Host: www.ejemplo.comUser-Agent: Mozilla/4.5 [en]Accept: image/gif, image/jpeg, text/htmlAccept-language: enAccept-Charset: iso-8859-1Content-Disposition: form-data; name=“nombre” Perico PalotesContent-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 evolución fue la inclusión de métodos para confeccionar páginas dinámicas: CGI

CGI: Common Gateway Interface

Mecanismo para el paso de información entre HTTP y Aplicaciones, ciertos problemas de carga del servidor

Posteriormente se desarrollan alternativas a las CGI Ejecución de módulos más integrados con el

servidor Dotar al servidor de interpretes de lenguajes (PHP,

ASP,etc.) A partir de este momento se genera una

explosión de arquitecturas y lenguajes

HTML Básico

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 carácter

<, seguido del nombre de la etiqueta, los atributos adicionales y acaban con el carácter >

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 además un atributo, ALIGN, que indica la alineación del texto

en el párrafo, pudiendo tomar los valores:LEFT, alineación a la izquierda, es el activo por defecto.RIGHT, alineación a la derecha.CENTER, centrado del texto.

Tipo<B>Negrilla<I>Itálica</I>Negrilla</B>

HTML Básico

<br>, salto de línea<hr>, permite incluir en nuestra página

una regla horizontal (una raya de extremo a extremo de la página)

Atributos: NOSHADE: elimina el efecto de sombreado de la regla. WIDTH: define la longitud de la línea respecto a la

página. SIZE: define el grosor de la línea.

HTML Básico

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;

}