Desarrollo de Aplicaciones Internet Clase II Universidad de los Lagos 2011

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 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 conexión 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 tráfico entre cliente y servidor Usos en comercio electrónico y tráfico de información personal y confidencial HTTPS 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 el receptor, 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.1 Host: User-Agent: Mozilla/4.5 [en] Accept: image/gif, image/jpeg, text/html Accept-language: en Accept-Charset: iso De estos identificadores, los más 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 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: que en la petición HTTP quedaría: GET /indice.jsp?nombre=Perico+Palotes&OK=1 HTTP/1.0 Host: User-Agent: Mozilla/4.5 [en] Accept: image/gif, image/jpeg, text/html Accept-language: en Accept-Charset: iso

Peticiones en HTTP: GET y POST POST /indice.jsp HTTP/1.0 Host: User-Agent: Mozilla/4.5 [en] Accept: image/gif, image/jpeg, text/html Accept-language: en Accept-Charset: iso 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 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 Ejemplos de etiquetas de HTML: Titulo Nombre del documento Parrafo Un ejemplo de uso de las etiquetas para marcado de texto 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 Negrilla Itálica Negrilla

HTML Básico, salto de línea, 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: Enlace

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; }