Prog Web Unidad 1

28/02/2012
CURSO : PROGRAMACION WEB

Unidad 1 Introduccin a las tecnologas Web.
Objetivo Educacional
El estudiante comprender las caractersticas de una aplicacin Web y conocer los elementos que interactan con ella.
Elaborado por : MTRA. Anglica Mara Ortiz Gaucn
Enero 2012
Enero 2012
1.1 Perspectiva histrica del Internet .

Internet surgi de un proyecto desarrollado en Estados Unidos para apoyar a sus fuerzas militares. Luego de su creacin fue utilizado por el gobierno, universidades y otros centros acadmicos.
1.2 Protocolo http (protocolo de transferencia de hipertexto).

Desde 1990, el protocolo HTTP (Protocolo de transferencia de hipertexto) es el protocolo ms utilizado en Internet. La versin 0.9 slo tena la finalidad de transferir los datos a travs de Internet (en particular pginas Web escritas en HTML). La versin 1.0 del protocolo (la ms utilizada) permite la transferencia de mensajes con encabezados que describen el contenido de los mensajes mediante la codificacin MIME. El propsito del protocolo HTTP es permitir la transferencia de archivos (principalmente, en formato HTML). entre un navegador (el cliente) y un servidor web (denominado, entre otros, http en equipos UNIX) localizado mediante una cadena de caracteres denominada direccin URL.
Elaborado por : MTRA. Anglica Mara Ortiz Gaucn Enero 2012
Internet es a la vez una oportunidad de difusin mundial, un mecanismo de propagacin de la informacin y un medio de colaboracin e interaccin entre los individuos y sus ordenadores independientemente de su localizacin geogrfica.
Comunicacin entre el navegador y el servidor

La comunicacin entre el navegador y el servidor se lleva a cabo en dos etapas
Solicitud HTTP
Una solicitud HTTP es un conjunto de lneas que el navegador enva al servidor. Incluye: Una lnea de solicitud: es una lnea que especifica el tipo de documento solicitado, el mtodo que se aplicar y la versin del protocolo utilizada. La lnea est formada por tres elementos que deben estar separados por un espacio: o el mtodo o la direccin URL o la versin del protocolo utilizada por el cliente (por lo general, HTTP/1.0)
Enero 2012
Enero 2012
28/02/2012
Por lo tanto, una solicitud HTTP posee la siguiente sintaxis (<crlf> significa retorno de carro y avance de lnea): Los campos del encabezado de solicitud: es un conjunto de lneas opcionales que permiten aportar informacin adicional sobre la solicitud y/o el cliente (navegador, sistema operativo, etc.). Cada una de estas lneas 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: es un conjunto de lneas opcionales que deben estar separadas de las lneas precedentes por una lnea en blanco y, por ejemplo, permiten que se enven datos por un comando POST durante la transmisin de datos al servidor utilizando un formulario. MTODO VERSIN URL<crlf> ENCABEZADO: Valor<crlf> . . . ENCABEZADO: Valor<crlf> Lnea en blanco <crlf> CUERPO DE LA SOLICITUD A continuacin se encuentra un ejemplo de una solicitud HTTP: GET http://es.kioskea.net HTTP/1.0 Accept : Text/html IfModified-Since : Saturday, 15-January-2000 14:37:11 GMT User-Agent : Mozilla/4.0 (compatible; MSIE 5.0; Windows 95)
Enero 2012
Enero 2012
1.2.1 Arquitectura del WWW

El diseo del World-Wide Web sigue el modelo clienteservidor. En la Web, las estaciones de trabajo son clientes que demandan hipertextos a los servidores.
En el cual para su funcionamiento se vieron en la necesidad de: a) Disear e implementar un nuevo protocolo que permitiera realizar saltos hipertextuales, es decir, de un nodo de origen a uno de destino. b) Inventar un lenguaje para representar hipertextos que incluyera la estructura y el formato del origen o el destino. Este lenguaje es el HTML o (HyperTextex markup Language). c) Idear una forma de codificar las instrucciones para los saltos hipertextuales de un objeto a otro de la Internet.) Desarrollar aplicaciones cliente para todo tipo de plataforma y resolver el problema de cmo acceder a informacin que est almacenada y es accesible a travs de protocolos diversos (FTP, NNTP, Gopher, HTTP, X.500, WAIS, etc.).
Enero 2012
Tipos de Arquitectura
Aplicaciones mono-capa:
Tanto los datos de
aplicacin como la interfaz como la lgica de modelo residen en una misma identidad
Aplicaciones Cliente Servidor : Se separan 2 de las tres capas. El cliente an puede integrar parte de la funcionalidad del sistema.
*
Al conectarnos a internet estamos navegando en 3 capas. Al abrir un formulario web de inscripcin (capa de presentacin) Despus de enviar la
informacin esta
es verificada (capa de negocios). Finalmente la informacin es grabada en una base de datos (capa de datos).
Enero 2012
Enero 2012
28/02/2012
1.2.2 URLs.
URL son las siglas de Localizador de Recurso Uniforme (en ingls Uniform Resource Locator), la direccin global de documentos y de otros recursos en la World Wide Web.
Esquema URL
Un URL se clasifica por su esquema, que generalmente indica el protocolo de red que se usa para recuperar, a travs de la red, la informacin del recurso identificado. Un URL comienza con el nombre de su esquema, seguido por dos puntos, seguido por una parte especfica del esquema'.
El formato general de un URL es: esquema://mquina/directorio/archivo Tambin pueden aadirse otros datos:
esquema://usuario:contrasea@mquina:puerto/directo rio/archivo
Elaborado por : MTRA. Anglica Mara Ortiz Gaucn Enero 2012 Elaborado por : MTRA. Anglica Mara Ortiz Gaucn Enero 2012
Por ejemplo: http://es.Wikipedia.org/
Algunos ejemplos de esquemas URL:
1.2.3 Mtodos http.

Estos Mtodos HTTP son como tipos de solicitudes que hacen en la comunicacin del protocolo HTTP, estas peticiones son acciones a realizar, cada peticin tiene ya definido su accin a hacer. como sabemos la comunicacin del HTTP se da en Request/Response se podra decir que en estos dos pasos, estos pasos son el de peticin y respuesta en la comunicacin.
http - recursos HTTP

https - HTTP sobre SSL ftp - File Transfer Protocolo mailto - direcciones de correo electrnico ldap - bsquedas LDAP Lightweight Directory Access Protocolo file - recursos disponibles en el sistema local, o en una red local news - grupos de noticias Usenet (newsgroup) gopher - el protocolo Gopher (ya en desuso) telnet - el protocolo telnet
Enero 2012
Persistencia en http Cookies.

Uno de los mecanismos ms usados para mantener persistencia es el mecanismo de cookies, inventado por Netscape . El concepto es que mediante un header del protocolo HTTP el server pueda almacenar informacin en el cliente. Ejemplo de uso: contador de las veces que accede un usuario a una pgina. para guardar la personalizacin de un usuario de la pgina. guarda el perfil del usuario Cuando el server enva un header con un cookie el browser, si acepta cookies, guarda la informacin enviada en un archivo de texto con un formato especial. Cada vez que el browser solicita una pgina del dominio que envi la cookie re-envia la cookie al site, de esta forma es posible mantener persistencia. La informacin que puede guardarse en una cookie esta limitada por lo que habitualmente se utiliza la misma para mantener el identificador de sesin del usuario almacenndose el resto de los datos necesarios en el servidor usando el session-id de la cookie como clave.
Enero 2012
Enero 2012
28/02/2012
un ejemplo como se accede y lee en una cookie desde asp.
Introduccin al
Qu es el HTML? El HTML ( HiperText Markup Language ) es el lenguaje utilizado para representar documentos en la WWW (World Wide Web). Adems de texto normal incluye tambin, elementos multimedia (grficos, vdeo, audio) y existen enlaces (links) que permiten saltar a otras partes del documento o a otro sitio cualquiera de Internet.
<% 'grabacin de las cookies en la maquina cliente Response.Cookies("Usuario")("nombre")="Felipe" Response.Cookies("Usuario")("apellido")="Ruiz" %> < % 'recuperacin de las cookies de la maquina cliente response.write "Nombre:"&Request.Cookies("usuario")("nombre")&"<br >" response.write "Apellido:"&Request.Cookies("usuario")("apellido") %>
Enero 2012
1.3.1
Html Como Un Tipo Sgml
1.3.2 Elementos del lenguaje HTML

A las instrucciones que forman el lenguaje HTML las
SGML son las siglas de Standard Generalized Markup Language o Lenguaje de Marcacin Generalizado. Consiste en un sistema para la organizacin y etiquetado de documentos. La Organizacin Internacional de Estndares (ISO) ha normalizado este lenguaje en 1986. El lenguaje SGML sirve para especificar las reglas de etiquetado de documentos y no impone en s ningn conjunto de etiquetas en especial. El lenguaje HTML esta definido en trminos del SGML. XML es un estndar de creacin posterior, que incorpora un subconjunto de la funcionalidad del SGML (suficiente para las necesidades comunes), y resulta ms sencillo de implementar pues evita algunas caractersticas avanzadas de SGML.
denominaremos elementos. Se distinguen dos tipos de elementos:

Elementos llenos Elementos vacos
Enero 2012
Enero 2012
Elementos llenos: Los primeros son elementos que se forman mediante una marca de inicio y otra de final. En HTML las marcas se de militan con los signos < (inferior a) y > (superior a). La marca de fin es idntica a la inicial pero con el aadido de la barra inclinada, /, justo antes del nombre de la misma. Elementos vacos: Estos elementos no requieren de la marca final, ya que normalmente no producen un efecto sobre el texto en s, sino que definen separadores. Por ejemplo el elemento <HR> que sirve para mostrar una lnea horizontal en la pantalla, se escribir: <HR>
sintaxis con la que se trabaja en el lenguaje HTML
La etiqueta presenta frecuentemente dos partes:
Una apertura de forma general <etiqueta> Un cierre de tipo </etiqueta> Todo lo incluido en el interior de esa etiqueta sufrir las modificaciones que caracterizan a esta etiqueta. As por ejemplo: Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento HTML escribimos una frase con el siguiente cdigo:
<b>Esto esta en negrita</b>
Enero 2012
Enero 2012
28/02/2012
Partes de un documento HTML
Estructura bsica de un docto HTML

<HTML> <HEAD> <TITLE>Ttulo de la pgina</TITLE> ... </HEAD> <BODY> Aqu ira el contenido de la pgina </BODY> </HTML>
un documento HTML ha de estar delimitado por la etiqueta <html> y </html>. Dentro de este documento, podemos asimismo distinguir dos partes principales: El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de ndole informativo como por ejemplo el titulo de nuestra pgina. El cuerpo, flanqueado por las etiquetas <body> y </body>, que ser donde colocaremos nuestro texto e imgenes delimitados a su vez por otras etiquetas
Enero 2012
NOTA:

Las maysculas o minsculas son indiferentes al escribir etiquetas Al notar que las etiquetas pueden ser escritas con cualquier tipo de combinacin de maysculas y minsculas. <html>, <HTML> o <HtMl> son la misma etiqueta. No todos los navegadores son idnticos. los resultados de nuestro cdigo pueden cambiar de uno a otro por lo que resulta aconsejable visualizar la pgina en varios. Generalmente se usan Internet Explorer y Firefox como referencias ya que son los ms extendidos. En la disputa por ser el navegador ms usado, en la actualidad otros productos vienen tomando fuerza como Chrome, el navegador de Google.
Enero 2012
Enero 2012
LISTADO DE ETIQUETAS
Tag  <!DOCTYPE> <a> <applet> <body> <br> <b> Vaco Descripcin corta Inserta comentarios ocultos Establece el tipo de documento Inserta vnculos o marcadores Inserta un applet (scripts) Contiene los elementos a mostrar Fuerza un quiebre de lnea Texto en negrita
Tag <basefont> <font> <form> <frame> <frameset> <h1> <h2> <h3> <h4> <h5> <h6>
Vaco
Descripcin corta Tamao de la fuente predeterminado Establece el estilo de fuente Inserta un formulario Inserta un marco Inserta un grupo de frames Encabezado de nivel 1 Encabezado de nivel 2 Encabezado de nivel 3 Encabezado de nivel 4 Encabezado de nivel 5 Encabezado de nivel 6
Enero 2012
Enero 2012
28/02/2012
Tag <center> <head> <hr> <html> <i> <iframe> <img> Vaco Descripcin corta Centra su contenido Define el bloque de encabezado Dibuja una lnea o regla horizontal Contiene al documento Muestra texto en itlica Inserta un marco dentro del documento Inserta una imagen
1.3.3 TABLAS EN HTML

Las
tablas son muy tiles a la hora de ordenar y estructurar nuestros documentos web. La tabla utiliza el cdigo pareado <TABLE> y </TABLE>.
La tabla estar compuesta por filas que se definirn entre las etiquetas <TR> y </TR>. Las filas estarn compuestas por celdas que se definirn entre las etiquetas <TD> y </TD>.
Enero 2012
Enero 2012
Ejemplo: <TABLE> <TR> <TD>FILA1COL1</TD> <TD>FILA1COL2</TD> </TR> <TR> <TD>FILA2COL1</TD> <TD>FILA2COL2</TD> </TR> </TABLE>
(El borde lo agregamos dando un valor al atributo border). Ejemplo:
Resultado: FILA1COL1 FILA2COL1 FILA1COL2 FILA2COL2
<TABLE border=3> <TR> <TD>FILA1COL1</TD> <TD>FILA1COL2</TD> </TR> <TR> <TD>FILA2COL1</TD> <TD>FILA2COL2</TD> </TR> </TABLE>
Enero 2012
Enero 2012
Si nosotros queremos que haya un espacio de separacin entre las letras el borde se lo asignaremos mediante el atributo cellpadding.
Ejemplo:
Para definir una anchura y altura a la tabla se le dan valores a los atributos width y height.
Ejemplo:
<TABLE border=3 cellpadding=12> <TR> <TD>FILA1COL1</TD> <TD>FILA1COL2</TD> </TR> <TR> <TD>FILA2COL1</TD> <TD>FILA2COL2</TD> </TR> </TABLE>
<TABLE border=3 cellpadding=12 cellspacing=6 widht=350 height=150> <TR> <TD>FILA1COL1</TD> <TD>FILA1COL2</TD> </TR> <TR> <TD>FILA2COL1</TD> <TD>FILA2COL2</TD> </TR> </TABLE>
Enero 2012
Enero 2012
28/02/2012
<HTML> <HEAD> <TITLE> PRINCIPAL </TITLE> </HEAD> <FRAMESET ROWS=20%,*> <FRAME SCROLLING= NO BORDERCOLOR="red" MARGINHEIGHT=8
La tabla se alinea a la pgina con el atributo align.
Ejeplo de tabla con celdas de diferente color
Ejemplo:
<TABLE border=3 cellpadding=12 cellspacing=6 widht=350 height=150 align=right> <TR> <TD>FILA1COL1</TD> <TD>FILA1COL2</TD> </TR> <TR> <TD>FILA2COL1</TD> <TD>FILA2COL2</TD> </TR> </TABLE>
<table width="300" cellspacing="5" border="6"> <tbody><tr> <td><center><b> ELEMENTO </b></center></td> <td><center><b> COLOR </b></center></td> </tr> <tr> <td><center> PIA </center></td> <td bgcolor="YELLOW"><center> AMARILLA </center></td> </tr> <tr> <td><center> PELOTA </center></td> <td bgcolor="PURPLE"><center><font color="WHITE"> MORADA </font></center></td> </tr> <tr> <td><center> CAMISA </center></td> <td bgcolor="GREEN"><center><font color="WHITE"> VERDE </font></center></td> </tr> <tr> <td><center> PLUMA </center></td> <td bgcolor="RED"><center><font color="WHITE"> ROJA </font></center></td> </tr> <tr> <td><center> AUTOMVIL </center></td> <td bgcolor="BLUE"><center><font color="WHITE"> AZUL </font></center></td> </tr> </tbody></table> <h5><br/><br/><br/><div align="CENTER"><a target="CONTENIDO" href="Hojadepresentacion_DAGC.html"> REGRESAR </a></div></h5></center>
Enero 2012
IMAGEN DE FONDO
Tambin se puede insertar una imagen de fondo a nuestras pginas para ello utilizaremos el atributo background. Ejemplo: <HTML> <HEAD> <TITLE>Imagen de fondo</TITLE> </HEAD> <BODY background="imgfon.gif"> Esta es una pgina con una imagen de fondo. </BODY> </HTML>
FRAMES
Los frames (marcos o cuadros) permiten dividir la ventana en varias ms pequeas, de modo que en cada una de ellas se carga una pgina HTML distinta. Las versiones ms antiguas de los navegadores no tienen implementada esta caracterstica, por lo que no podrn verlos.
Enero 2012
Enero 2012
Sintaxis
EJEMPLO en este caso son dos filas, de 75 pxeles la primera y el resto de la ventana la segunda.
Los frames se declaran con la etiqueta <FRAMESET>, que debe ser colocada antes de la etiqueta <BODY>. Si no se cumple este requisito, la etiqueta se ignorar. Las etiquetas NOFRAMES y BODY solamente se usan por cortesa, de hecho se pueden suprimir. Las etiquetas FRAME SRC="frames.htm" cargan las pgina indicadas en el frame correspondiente. EL atributo ROWS (filas) es el que define el nmero y el tamao de los frames, Tambin se puede dividir en columnas mediante COLS
<HTML> <HEAD><TITLE> Ttulo de la pgina </TITLE></HEAD> <FRAMESET ROWS=75,*> <FRAME SRC="frames1.htm" > <FRAME SRC="frames2.htm" > </FRAMESET> <NOFRAMES> <BODY> Lo siento,su navegador no soporta frames. Pulse <a href="frames1.htm>aqu </A> para acceder a los contenidos de estas pginas. </BODY> </NOFRAMES> </HTML>
Enero 2012
28/02/2012
Tambin es posible anidar frames, llamando a una pgina que tenga de nuevo frames o bien declarndolo explcitamente.
EL atributo ROWS (filas) es el que define el nmero y el tamao de los frames, Tambin se puede dividir en columnas mediante COLS El tamao de los frames se puede especificar de ms formas: COLS=*,5* dos columnas, la segunda cinco veces mayor que la primera COLS=150,*,150 tres colunmas, la primera y tercera de 150 pxels, la segunda ocupa el resto. ROWS=20%,80% dos filas que ocupan el 20 % y el 80 % del espacio respectivamente.
Un ejemplo de esto ltimo es el que aparece abajo: <FRAMESET COLS=20%,*> <FRAME SRC="frames1.htm"> <FRAMESET ROWS=20%,*> <FRAME SRC="frames2.htm"> <FRAME SRC="frames3.htm"> </FRAMESET> </FRAMESET> Este cdigo divide la ventana en dos columnas, la primera del 20 % del ancho total, y la segunda queda dividida a su vez en dos filas, siendo la primera de ellas un 20 % del total
Enero 2012
El atributo TARGET
Ejemplo:
Lo ms interesante de los frames es la posibilidad que tienen de interactuar entre si, es decir pulsar un enlace en el frame 1 y cargar el contenido en el frame2. Para conseguir esto hay que darle un nombre a los frames y luego indicar en el enlace donde se va a cargar mediante el atributo TARGET.
<HTML> <HEAD><TITLE> Frames --Ejemplo 3-</TITLE></HEAD> <FRAMESET COLS=150,*> <FRAME SRC="frames4.htm" NAME=margen> <FRAME SRC="frames5.htm" NAME=principal> </FRAMESET> </HTML>
Los enlaces de la pgina frames4.htm , que es la que se carga en el margen izquierdo,se escriben de la forma: <A HREF="frames1.htm" TARGET=principal>Frame 1 </A>
Enero 2012
Hay ciertos valores reservados para TARGET, estos son
Atributos de FRAME

TARGET=_top, hace que la pgina se cargue en la ventana completa del navegador. TARGET=_self, hace que la pgina se cargue en la misma ventana del frame actual. TARGET=_parent, hace que la pgina se cargue en el frame "padre", del que desciende el actual TARGET=_blank, hace que la pgina se cargue en una nueva ventana. TARGET=nombre, hace que la pgina se cargue en el frame llamado nombre. Si no existe se carga en una ventana nueva
En los frames se pueden modificar algunas de sus caractersticas por medio de las etiquetas que siguen: SCROLLING= yes, no , auto . Indica si el frame llevar siempre, nunca o cuando lo necesite, barra de deslizamiento vertical BORDERCOLOR="color" . Indica el color del borde MARGINWIDTH=n . Indica el margen horizontal, tanto derecho como izquierdo, en pxels MARGINHEIGHT=n . Indica el margen vertical, tanto superior como inferior, en pxels NORESIZE . Indica que el frame no se puede redimensionar. Si no se pone este atributo colocando el cursor en el borde del frame, permitira su deslizamiento
Enero 2012
Enero 2012
28/02/2012
Atributo de FRAMESET
FRAMEBORDER=yes, no . Indica si los frames tendrn bordes o no.
CAPAS
En un documento HTML
Enero 2012
Enero 2012
Capa <div> ...
<div> y </div> y sus Atributos

Las capas no son ms que unos recuadros, que pueden situarse en cualquier parte de la pgina, en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y solaparse entre s, lo que proporciona grandes posibilidades de diseo.
id se le da un nombre a la capa. style se establecen el resto de propiedades de la capa. propiedades left (izquierda) y top (superior) se establece la posicin de la capa respecto a los mrgenes izquierdo y superior de la pgina. la propiedad position con el valor absolute, Para que la capa aparezca en la posicin establecida. Pueden tomar un nmero como valor, acompaado de px cuando haga referencia a pxeles, y acompaado de % cuando haga referencia a un porcentaje.
A travs de la propiedad z-index puede establecerse el ndice de la capa dentro de la pgina. Una capa podr ser solapada por aquellas capas cuyo ndice sea mayor. Siempre es un valor numrico. de las propiedades width (anchura) y height (altura) se establece el tamao de la capa. la propiedad visibility puede establecerse la visibilidad de la capa. Puede tomar los valores inherit (se muestra la capa mientras la capa a la que pertenece tambin se est mostrando), visible (muestra la capa, aunque la capa a la que pertenece no se est viendo) y hidden (la capa est oculta).

Capas
A travs de la propiedad overflow puede establecerse si se mostrar o no el contenido de la capa cuando no pueda ser visualizado en su totalidad, por ser la capa demasiado pequea. Puede tomar los valores visible (se muestra todo el contenido de la capa, aunque esto implique hacer que la capa sea ms grande), hidden (no es posible visualizar el contenido de la capa que no quepa en ella), scroll (se muestra la barra de desplazamiento, aunque el contenido de la capa pueda ser visualizado totalmente) y auto (se muestra la barra de desplazamiento cuando sea necesario). A travs de la propiedad clip puede establecerse el rea de la capa que podr ser visualizado. Lo que hace es recortar la capa, haciendo que partes de ella no sean visibles.
A travs de las propiedades layer-background-image y background-image se puede establecer una imagen de fondo para la capa. La ruta y el nombre de la imagen han de aparecer entre parntesis, despus de la palabra url. A travs de las propiedades layer-background-color y background-color se puede establecer un color de fondo para la capa. Ha de ser un nmero hexadecimal.
Enero 2012
Enero 2012
28/02/2012
Por ejemplo,
Todas estas propiedades se especifican a travs del atributo style, y deben aparecer entre comillas dobles, con un punto y coma detrs de cada una. Para asignar los valores a las propiedades no se utiliza el smbolo = (igual), sino que se utiliza el smbolo : (dos puntos).
<div id="capa" style="position:absolute; width:200px; height:115px; z-index:3; visibility: visible; background-color: #0099CC; layer-background-color: #0099CC; background-image: url(imagenes/fondocapa.gif); layer-background-image: url(imagenes/fondocapa.gif); clip: rect(1 auto auto 3);"> Este texto está dentro de una capa. </div>
Enero 2012
Enero 2012
Ejemplo utilizando la etiqueta <layer>
Otra forma de insertar capas es utilizando las etiquetas <span> y </span>, en lugar de las etiquetas <div> y </div>. existen las etiquetas <layer> y </layer>, pero solamente son reconocidas por el navegador Netscape. La principal diferencia de la etiqueta <layer>, en lo que se refiere a las otras dos, es que las propiedades de la capa se especifican como atributos independientes, y no como valores dentro del atributo style.
<layer name="capa" width="200px" height="115px" z-index="3" visibility="show" bgcolor="#0099CC" background="imagenes/fondocapa.gif"> Este texto está dentro de una capa. </layer>
Enero 2012
Enero 2012
1.4
Evolucin del desarrollo de aplicaciones Web.
El desarrollo de aplicaciones WEB ha evolucionado por los siguientes aspectos: Evolucin del Uso/Demandas Evolucin de Tecnologas Navegador Evolucin Tecnologas Servidores Marketing de Ventas Hiper-Hype y las Dot.Com
Enero 2012
Enero 2012
10
28/02/2012
Figura: Crecimiento redes mundiales
Figura: Crecimiento redes mundiales
Enero 2012
Enero 2012
Los registros de nombres de dominio:
Hosts de Internet:
Enero 2012
Enero 2012
Figura: WWW crecimiento
FORMULARIOS
Enero 2012
Enero 2012
11
28/02/2012
FORMULARIOS
Declaracin de formulario
Los formularios nos van a permitir, desde dentro de una presentacin web, solicitar informacin al visitante. Estos formularios estarn compuestos por tantos campos como informaciones queramos obtener. Una vez introducidos los valores en estos campos sern enviados a una URL donde se procesar toda esta informacin.
La declaracin de formulario queda recogida por las etiquetas <form>.....</form> y dentro de ellas se recogern todas las variables de entrada.
NOTA: Una vez se hayan introducido los valores en los campos, el contenido de estos ser enviado a la direccin (URL) donde tengamos el programa que pueda procesar las variables. Para poder realizar este ltimo paso de procesar las variables necesitaremos realizar un programa externo en algun lenguaje de programacin como PERL, C++ o Visual Basic. A este programa externo se le suele llamar CGI (Common Gateway Interface).
Enero 2012
A la etiqueta de apertura <form> le acompaarn estos atributos:
EJEMPLO #1:
action="" Entre comillas se indica el programa que va a tratar las variables enviadas con el formulario, un guin CGI o la URL mailto. Method="" Indica el mtodo de transferencia de las variables. Post, si se enva a travs del STDIO. Get, si se enva a travs de la URL.
<HTML> <HEAD> <TITLE>Ejemplo 1</TITLE> </HEAD> <BODY> <H1>Formularios</H1> <FORM ACTION="mailto:unaprueba" METHOD="POST"> <INPUT TYPE="text" NAME="nombre"><BR> <INPUT TYPE="submit"><INPUT TYPE="Reset"> </FORM> </BODY> </HTML>
Enero 2012
Enero 2012
Campos de entrada
La etiqueta <input> define la introduccin de variables. Junto a esta etiqueta encontraremos los siguientes atributos: type= " Indicar el tipo de variable a introducir. text Indica que el campo a introducir ser un texto. Sus atributos: maxlenght= " Seguido de un valor que limitar el nmero mximo de carcteres a introducir en ese campo.
Seguido de un valor que limitar el nmero de caracteres a mostrar en pantalla. value="" Indica que no hay valor inicial del campo. Password Indica que el campo a introducir ser una palabra de paso. Mostrar asteriscos en lugar de letras escritas. Sus atributos sern los mismos que para text.
size=""
Enero 2012
12
28/02/2012
Checkbox
El campo se elegir marcando de entre varias opciones una casilla cuadrada. value="" Entre comillas se indicar el valor de la casilla. checked La casilla aparecer marcada por defecto. Radio El campo se elegir marcando de entre varias opciones una casilla circular. value= " Entre comillas se indicar el valor de la casilla.
El campo contendr el valor en coordenadas del punto de la imagen que haya dado click. Atributo obligatorio: src= " Entre comillas escribiremos el nombre del archivo de imagen. hidden El visitante no puede modificar su valor ya que no est visible. Se manda siempre junto al atributo value= seguido de su valor entre comillas. Name="" Indicar el nombre que se asigna a un determinado campo.
Image
Enero 2012
EJEMPLO #2:
Campos de seleccin
<HTML> <HEAD> <TITLE>Ejemplo 2</TITLE> </HEAD> <BODY> <H1>Formularios</H1> <FORM ACTION="mailto:unaprueba" METHOD="POST"> Texto: <INPUT TYPE="text" NAME="nombre"><BR> Password: <INPUT TYPE="password" NAME="contra"><BR> Sexo:<INPUT TYPE="radio" NAME="boton1" VALUE="1"> Hombre <INPUT TYPE="radio" NAME="boton1" VALUE="2">Mujer<BR> Vehiculo:<INPUT TYPE="checkbox" NAME="Moto" VALUE="Si">Moto <INPUT TYPE="checkbox" NAME="Coche" VALUE="" CHECKED>Coche <BR><BR> <INPUT TYPE="submit"><INPUT TYPE="Reset"> </FORM> </BODY> </HTML>
Las etiquetas <select>.....</select> encierran los valores que podremos elegir a partir de una lista. Los atributos que acompaan a la etiqueta de apertura son: name="" Indicar el nombre del campo de seleccin. Size="" Indicar el nmero de opciones visibles. Si le asignamos 1, la seleccin se presentar como un men desplegable. Si le asignamos un valor mayor se presentar como una lista con barra de desplazamiento.
EJEMPLO # 3:

multiple Indica si se pueden realizar multiples selecciones. Las diferentes opciones de la lista se indicarn mediante la etiqueta <option> que puede acompaarse del atributo selected para indicar cual es la opcin que aparecer por defecto. Si no lo especificamos, siempre ser la primera de la lista.
<HTML> <HEAD> <TITLE>Ejemplo 3</TITLE> </HEAD> <BODY> <H1>Formularios</H1> <FORM ACTION="mailto:unaprueba" METHOD="POST"> <SELECT NAME="Colores" MULTIPLE> <OPTION VALUE="r">Rojo</OPTION> <OPTION VALUE="g">Verde</OPTION> <OPTION VALUE="b">Azul</OPTION> </SELECT> <BR><BR> <SELECT NAME="Colores" SIZE="1"> <OPTION VALUE="r">Rojo</OPTION> <OPTION VALUE="g">Verde</OPTION> <OPTION VALUE="b">Azul</OPTION> </SELECT> <BR><BR> <INPUT TYPE="submit"><INPUT TYPE="Reset"> </FORM> </BODY> </HTML>
Enero 2012
Enero 2012
13
28/02/2012
Areas de texto
EJEMPLO #4:
Con las etiquetas <textarea>;.....</textarea> definimos un texto de mltiples lneas para que el visitante pueda incluir un comentario junto a sus datos. Junto a la etiqueta de apertura pueden aparecer los siguientes atributos: name="" Nombre del campo. Cols="" Numero de columnas de texto visible. Rows="" Numero de filas de texto visible.
<HTML> <HEAD> <TITLE>Ejemplo 16</TITLE> </HEAD> <BODY> <H1>Formularios</H1>
<FORM ACTION="mailto:unaprueba" METHOD="POST"> <TEXTAREA COLS=20 ROWS=10 NAME="Texto"> </TEXTAREA> <BR><BR> <INPUT TYPE="submit"><INPUT TYPE="Reset"> </FORM>
</BODY> </HTML>
Enero 2012
Enero 2012
Botones
Ejemplo # 5:
Se definen mediante la etiqueta <input> a la que le acompaan los atributos: type="" Seguido de submit para enviar los datos del formulario y seguido de reset para borrar los datos que se han introducido. Value="" Indica el texto que incorporaran los botones. Normalmente, enviar y borrar.
<HTML> <HEAD> <TITLE>Ejemplo 5</TITLE> </HEAD> <BODY> <H1>Formularios</H1> <FORM ACTION="mailto:unaprueba" METHOD="POST"> <TEXTAREA COLS=20 ROWS=10 NAME="Texto"> </TEXTAREA> <BR><BR> <INPUT TYPE="submit"><INPUT TYPE="Reset"> </FORM> </BODY> </HTML>
Enero 2012
Enero 2012
1.5 HOJAS DE ESTILO EN CASCADA E INTRODUCCIN AL XML.

Las hojas de estilo son mtodos que permiten modificar
Se les denomina en cascada porque el navegador web sigue esa regla para determinar la prioridad de los recursos y resolver posibles conflictos.
la forma en que se visualizan los documentos; contienen las descripciones de cmo se deben mostrar los elementos de un documento XML (Lenguaje Extensible de Mtodos) y se busca permitir variar la forma en que visualizamos el documento sin necesidad de cambiar los contenidos del mismo.
Actualmente existen dos tipos de hojas de estilo: las hojas de estilo en cascada (CSS) y las hojas de estilo extensibles (XSL).
04/07/11
04/07/11
14
28/02/2012
Las ventajas del uso de hojas de estilo CSS son: las posibilidades adicionales para el formato / presentacin, mayor control sobre el documento y mayor facilidad en la personalizacin de los documentos.
HOJAS DE ESTILO
04/07/11
Enero 2012
Hojas de estilo

Vincular una hoja de estilo
Los estilos CSS (Cascading Style Sheets) son hojas de estilo de actualizacin automtica. Se pueden definir estilos independientes o estilos asociados a determinadas etiquetas por ejemplo a la etiqueta <a> (que corresponde a los hiperenlaces). De este modo, todos los hiperenlaces de la pgina o del sitio adquiriran la apariencia definida en ese estilo y con un slo cambio en la hoja de estilos podemos cambiar de golpe el estilo de todos los enlaces en todas las pginas vinculadas a este estilo.
Para vincular una hoja de estilo a un documento es necesario insertar la etiqueta <link> en el documento, entre las etiquetas <head> y </head>. Esta etiqueta no necesita etiqueta de cierre.
A travs del atributo href se especifica la hoja de estilo que se va a vincular al documento.
A travs del atributo rel se tiene que especificar que se est vinculando una hoja de estilo, por lo que su valor ha de ser stylesheet. A travs del atributo type se tiene que especificar que el archivo es de texto, con sintaxis CSS, por lo que su valor ha de ser text/css.
Enero 2012
Enero 2012
Ejemplo de una hoja vinculada:
Sintaxis de las hojas de estilo
<link href="misestilos.txt" rel="stylesheet" type="text/css" >
En primer lugar se pone el nombre del estilo, y entre llaves se especifica la lista de propiedades (en minsculas) que se corresponden con dicho estilo. Cada una de estas propiedades tiene que tener un punto y coma detrs, y los valores se asignan con el smbolo : (dos puntos). El nombre del estilo puede ser un nombre inventado por nosotros, o el nombre de una etiqueta HTML. Para poder utilizar un nombre inventado, tiene que estar precedido por un punto, o por el nombre de una etiqueta seguida de un punto.
NOTA:Las hojas de estilo pueden crearse con cualquier editor de texto, como puede ser el Bloc de notas, y pueden guardarse con la extensin TXT.
Enero 2012
15
28/02/2012
Ejemplo de una hoja de estilo:
body {background-color: #006699; font-family: Arial,Helvetica;} .mitexto {font-family: Arial,Helvetica; fontsize:18px;}
NOTA:no existe ninguna etiqueta <mitexto>, por lo que para aplicar este estilo a algn elemento de la pgina habra que indicarlo de algn modo.
Para aplicar este estilo a un elemento, habra que insertar el atributo class en su etiqueta. Por ejemplo, para aplicar ese estilo al siguiente prrafo del documento: <p>texto con estilo</p> Habra que escribir: <p class="mitexto">texto con estilo</p>
Enero 2012
Las propiedades
Pero para aplicar el estilo nicamente a una parte del contenido de la etiqueta, como podra ser el caso de una palabra del prrafo, sera necesario incluir la etiqueta <span> (que agrupa bloques, sin producir un cambio de lnea).
Algunas propiedades que pueden especificarse en los estilos, as como los valores que pueden tomar:
Familia de la fuente: La propiedad es font-family.
Grosor del texto: La propiedad es font-weight. Sus valores pueden ser: bold (negrita), bolder (mas negrita), lighter (ligera) o un nmero del 100 al 900.
Tamao de la fuente: La propiedad es font-size. Puede tomar como valor un nmero.
Espacio entre lneas: La propiedad es line-height. Puede tomar como valor un nmero.
Decoracin de la fuente: La propiedad es text-decoration. Puede tomar como valor none (ninguno), underline (subrayado), line-through (una lnea encima), overline (tachado) o blink (parpadeo). Si se aplica none a los hiperenlaces, puede evitarse que aparezcan subrayados.
Alineacin del texto: La propiedad es text-align. Puede tomar como valor center (centrado), left (izquierda), right (derecha) o justify (justificado).
Espacio entre caracteres: La propiedad es letter-spacing. Puede tomar como valor un nmero.
Sangrado del texto: La propiedad es text-indent. Puede tomar como valor un nmero.
Estilo de la fuente: La propiedad es font-style. Puede tomar como valor italic, cuando se desee que el texto aparezca en cursiva.
Transformar el texto: La propiedad es text-transform. Puede tomar como valor capitalize (la inicial de cada palabra aparecer en maysculas), uppercase (todo en maysculas) o lowercase (todo en minsculas).
Color: La propiedad es color. Puede tomar como valor un nmero en hexadecimal. Si se aplica esta propiedad a los hiperenlaces, sern de este color, en lugar de los indicados por los atributos link (vnculo), vlink (vnculo activo), y alink (vnculo visitado) de la etiqueta <body>.

Enero 2012 Elaborado por : MTRA. Anglica Mara Ortiz Gaucn Enero 2012
16
28/02/2012
Color de fondo: La propiedad es background-color. Puede tomar como valor un nmero en hexadecimal.
Imagen de fondo: La propiedad es background-image. La ruta y el nombre de la imagen han de aparecer entre parntesis, despus de la palabra url.
Ancho de bordes: La propiedad es border-width. Puede tomar como valor un nmero.
Mrgenes: Las propiedades son margin-top (margen superior), margin-right (margen derecho), margin-bottom (margen inferior), margin-left (margen izquierdo), o margin (los valores de los mrgenes superior, derecho, inferior e izquierdo, separados por espacios). Pueden tomar como valor un nmero (cuatro nmeros separados por espacios en el caso de margin).
Color del borde: La propiedad es border-color. Puede tomar como valor un nmero en hexadecimal.
En el caso de los valores numricos, especificar la unidad de medida a utilizar: cm (centmetros), pt (puntos), px (pxeles), o % (porcentaje).
Enero 2012
Enero 2012
Introduccin al XML
El Lenguaje de Marcaje Extensible (Extensible
Markup Language, XML) es un lenguaje de metamarcaje (meta-markup) que proporciona un formato para describir datos estructurados. Esto facilita declaraciones ms precisas de contenido y resultados de bsquedas con ms significado entre muchas plataformas. Adems, el XML habilitar una nueva generacin de aplicaciones manipulacin y visualizacin de datos basadas en Web.
04/07/11
17

Prog Web Unidad 1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Prog Web Unidad 1

Uploaded by

Copyright:

Available Formats

28/02/2012

CURSO : PROGRAMACION WEB

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

1.1 Perspectiva histrica del Internet .

1.2 Protocolo http (protocolo de transferencia de hipertexto).

Comunicacin entre el navegador y el servidor

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

1.2.1 Arquitectura del WWW

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Por ejemplo: http://es.Wikipedia.org/

Algunos ejemplos de esquemas URL:

1.2.3 Mtodos http.

http - recursos HTTP

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Persistencia en http Cookies.

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

un ejemplo como se accede y lee en una cookie desde asp.

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Html Como Un Tipo Sgml

1.3.2 Elementos del lenguaje HTML

denominaremos elementos. Se distinguen dos tipos de elementos:

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

sintaxis con la que se trabaja en el lenguaje HTML

La etiqueta presenta frecuentemente dos partes:

<b>Esto esta en negrita</b>

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Partes de un documento HTML

Estructura bsica de un docto HTML

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

1.3.3 TABLAS EN HTML

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

(El borde lo agregamos dando un valor al atributo border). Ejemplo:

Resultado: FILA1COL1 FILA2COL1 FILA1COL2 FILA2COL2

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

La tabla se alinea a la pgina con el atributo align.

Ejeplo de tabla con celdas de diferente color

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn

Elaborado por : MTRA. Anglica Mara Ortiz Gaucn