CONTENIDO UNIDAD 1: ARQUITECTURA DE DESARROLLO WEB

Cliente Servidor Arquitectura de 3 capas: Datos, Negocios y Presentacin

UNIDAD 2: HERRAMIENTAS DE DISEO DE INTERFAZ.

Introduccin. Descripcin del entorno de trabajo. Barras de herramientas. Configuracin de un sitio web. Creacin y edicin de pginas web. Insercin y edicin de textos e imgenes. Uso de hipervnculos. Tablas. Formularios. Elementos Interactivos y multimedia. Plantillas. CSS.

UNIDAD 3: PROGRAMACIN EN PHP

Programacin de script: Introduccin, variables, operadores, sentencias de control, Vectores (tablas), Formularios, Almacenamiento de informacin con BD. Gestin de archivos. UNIDAD 4: HERRAMIENTAS PROGRAMACIN CLIENTE SERVIDOR Servidores: caractersticas principales, estructura bsica, instalacin, conexin y desconexin, resguardo y recuperacin de la informacin. Publicacin y actualizacin UNIDAD 5: HERRAMIENTAS DE BASE DE DATOS. Administradores y Gestores de BD web, creacin de la BD, ingreso de datos, conexin y desconexin, operaciones bsicas para BD, importacin y exportacin de la BD. UNIDAD 6: INTEGRACIN DE HERRAMIENTAS Y SEGURIDAD Paquetes y estndares para accesibilidad a la BD. Transacciones seguras.

UNIDAD 7: SESIONES, AUTENTICACIN DE USUARIOS.

Uso de una IDE con PHP. Cookies y sesiones. Funcionamiento e implementacin

UNIDAD 1: ARQUITECTURA DE DESARROLLO WEB

Cliente Servidor Caractersticas principales de este tipo de arquitectura de cara a base de datos. Esta arquitectura se divide en dos partes claramente diferenciadas, la primera es la parte del servidor y la segunda la de un conjunto de clientes. Normalmente el servidor es una mquina bastante potente que acta de depsito de datos y funciona como un sistema gestor de base de datos (SGBD). Por otro lado los clientes suelen ser estaciones de trabajo que solicitan varios servicios al servidor. Ambas partes deben estar conectadas entre s mediante una red. Una representacin grfica de este tipo de arquitectura sera la siguiente.

Este tipo de arquitectura es la ms utilizada en la actualidad, debido a que es la ms avanzada y la que mejor ha evolucionado en estos ltimos aos. Podemos decir que esta arquitectura necesita tres tipos de software para su correcto funcionamiento: Software de gestin de datos: Este software se encarga de la manipulacin y gestin de los datos almacenados y requeridos por las diferentes aplicaciones. Normalmente este software se aloja en el servidor. Software de desarrollo: este tipo de software se aloja en los clientes y solo en aquellos que se dedique al desarrollo de aplicaciones. Software de interaccin con los usuarios: Tambin reside en los clientes y es la aplicacin grfica de usuario para la manipulacin de datos, siempre claro a nivel usuario (consultas principalmente). A parte de estos existen ms aplicaciones software para el correcto funcionamiento de esta arquitectura pero ya estn condicionados por el tipo de sistema operativo instalado, el tipo de red en la que se encuentra, etc. Arquitectura de 3 capas: Datos, Negocios y Presentacin

La arquitectura cliente/servidor genrica tiene dos tipos de nodos en la red: clientes y servidores. Consecuentemente, estas arquitecturas genricas se refieren a veces como arquitecturas de dos niveles o dos capas. Algunas redes disponen de tres tipos de nodos: Clientes que interactan con los usuarios finales.

Servidores de aplicacin que procesan los datos para los clientes. Servidores de la base de datos que almacenan los datos para los servidores de aplicacin. Esta configuracin se llama una arquitectura de tres-capas. Ventajas de las arquitecturas n-capas: La ventaja fundamental de una arquitectura n-capas comparado con una arquitectura de dos niveles (o una tres-capas con una de dos niveles) es que separa hacia fuera el proceso, eso ocurre para mejorar el balance la carga en los diversos servidores; es ms escalable. Desventajas de las arquitecturas de la n-capas: Pone ms carga en la red, debido a una mayor cantidad de trfico de la red.

Es mucho ms difcil programar y probar el software que en arquitectura de dos niveles

porque tienen que comunicarse ms dispositivos para terminar la transaccin de un usuario.

UNIDAD 2: HERRAMIENTAS DE DISEO DE INTERFAZ.

Cuando tu programa navegador (cliente) pide una pgina web al servidor, ste le enva un fichero de texto (con extensin htm o html) en lenguaje html que tu programa (netscape o explorer) se encarga de "traducir" para que puedas visualizar correctamente en el navegador la pgina web solicitada incluyendo texto, fondos, grficos, etc. El HTML (HipertText Markup Language) Lenguaje de enlaces hipertexto es un sistema que se encarga de definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documentos. El trmino HTML se suele referir a ambas cosas, tanto al tipo de documento como al lenguaje de marcas. Como cualquier pgina web est soportada por un fichero de texto, se pueden elaborar, editar o modificar directamente con el bloc de notas o el wordpad de Windows 95, aunque existen programas editores de pginas web a la venta como HotDog Front Page y programas gratuitos de edicin bsica como Netscape Composer, que permiten editarlas con algunas funciones automatizadas a travs de botones y mens. Elementos del lenguaje HTML Caracteres : Cualquier cadena de caracteres imprimibles que no represente un marcado se representa literalmente, aunque los espacios y tabuladores se reducen a un solo carcter cuando no estn dentro de un bloque preformateado. Marcadores, marcas o etiquetas (tags) : Los marcadores delimitan elementos de un documento como cabeceras, prrafos, etc. La mayora de los marcadores constan de una marca inicial < ...> , que da el nombre y atributos del elemento, seguida del contenido secuencia de caracteres y una marca final</...>. Las marcas iniciales se escriben entre los smbolos "<" y ">" (menor y mayor) y las finales entre "</" y ">" (menor barra y mayor). Por ejemplo, <H1>Contenido</H1>, indica que "Contenido" es una cabecera de nivel uno. Algunos elementos slo tienen una marca inicial (por ejemplo la marca <HR> que representa una lnea horizontal) y otros, aunque disponen de ambas, se suelen expresar slo con la inicial. Nombres de etiquetas : Los nombres consisten en una letra seguida de letras, dgitos, puntos o guiones. Los ejemplos H1 y HR anteriores son ejemplos de nombres de etiquetas. La longitud de un nombre esta limitada a 72 caracteres en la definicin del HTML. Los nombres de elementos y atributos no distinguen entre maysculas y minsculas, pero los nombres de entidades (la representacin alternativa de los caracteres) s.

En las marcas, el nombre del elemento debe comenzar inmediatamente despus del <. Atributos : Cuando una marca inicial admite atributos, stos se escriben a continuacin del nombre del elemento. Generalmente los atributos tienen la forma nombre, signo igual, valor del atributo aunque en algunos casos basta con el nombre del atributo. Se pueden poner espacios en blanco antes y despus del signo igual. El valor de un atributo puede ser una cadena de caracteres entre comillas (simples o dobles) que no contenga el smbolo de fin de marca ">" o un nombre como los definidos en el apartado anterior.Por ejemplo, en <img src="foto.gif">, img src es el nombre de la marca que se refiere a insertar una imagen en la pgina web; y "foto.gif" es el atributo que hace referencia al fichero especfico de imagen que queremos incluir. Comentarios : Para incluir comentarios en HTML se emplea la declaracin de comentarios. Una declaracin de comentarios comienza con <!, le siguen uno o varios comentarios y termina con >. Cada comentario comienza con -- e incluye todo el texto hasta la siguiente aparicin de -- . Dentro de una declaracin de comentarios, se pueden poner espacios en blanco despus de cada uno de ellos, pero no antes del primero. Toda la declaracin del comentario se ignora. En pginas web complejas, con abundante cdigo html, se utilizan estos comentarios para sealar partes de la pgina web que sirvan de orientacin para ubicarse dentro del documento. Por ejemplo, en <!--Aqu empieza el texto--> est sealando una parte de la pgina web en la que empieza el grueso del texto de la pgina. Esta etiqueta se visualiza dentro del cdigo html pero no tiene una traduccin hacia el formato final. Es decir, no se visualiza en el navegador cliente y slo se puede ver si utilizamos la opcin Ver/Origen de la Pgina (en Netscape) Creacin de documentos HTML Los documentos HTML son archivos de texto legibles ASCII con cdigos de composicin especiales embebidos o incorporados en el texto. Esto significa que los archivos HTML contienen letras, nmeros, signos de puntuacin, etc., ms los cdigos de composicin HTML. Insistimos, se pueden leer o modificar directamente desde el bloc de notas. Aunque no es obligatorio, es muy til utilizar la extensin .HTM al archivar el documento HTML desde el bloc de notas. As podrs saber luego de que tipo de documento se trata. Si utilizas un procesador de texto normal debes utilizar la opcin Guardar como texto ASCII. Aspecto de documentos HTML:

Lo que distingue a un archivo HTML de cualquier otro archivo de texto es la presencia de cdigos de composicin, denominados marcadores HTML. Estos cdigos se incluyen en el documento y sirve para controlar el formato y la presentacin del documento final. Los cdigos tambin sirven para crear hipervnculos con otros documentos. Los cdigos de composicin se acotan con unos caracteres especiales, que permiten diferenciarlos del texto del documento propiamente dicho. Estos smbolos son los corchetes angulares < y >. Estos cdigos no distinguen entre maysculas y minsculas aunque la mayora de los autores utilizan maysculas para distinguirlos del resto del texto. Los distintos navegadores muestran sus documentos de formas distintas: vara el color, el tipo de fuente, el tamao, etc. Por lo tanto debes pensar en tu documento como una entidad lgica y no fsica, reconociendo que el aspecto fsico puede variar de un visor a otro y de un PC a otro. Por ejemplo, si introduces tipos de letra especiales (que se salgan de los corrientes que tienen todos los PCs, en Arial, Courier, Times o Helvetica) dentro de tu pgina web, cuando alguien la "vea" en Internet, visualizar esos tipos de letra si estn instalados en su PC, si no los ver con el tipo de letra que tenga cargado por defecto en su navegador. Marcadores o etiquetas HTML obligatorios: Marcador <HTML>: todos y cada uno de los documentos HTML deben empezar y terminar con este marcador que sirve para indicar que se trata de un documento HTML. En el marcador de cierre es obligatoria la barra inclinada (/HTML). Marcadores <HEAD>: los documentos HTML se dividen en dos partes, la cabecera y el cuerpo. Los navegadores Web necesitan distinguir entre cabecera y cuerpo para poder interpretar correctamente los documentos. En general la cabecera del documento (head) incluye la informacin general sobre el documento. Este marcador tienen su marcador de terminacin con la barra inclinada (/HEAD). Marcadores <BODY>: incluye el contenido real del documento (body o cuerpo). Este marcador tiene tambin su marcador de terminacin con la barra inclinada </BODY>. En el caso del marcador body puede ir acompaado, no obligatoriamente, del atributo BGOLOR (Background color) junto con un numero de expresin hexadecimal que determina un color de fondo plano para la pagina web. Esta funcin, como veremos ms adelante con el color de los textos est automatizada en la mayora de editores de pginas web (incluido Netscape Composer). Cabecera del documento Contiene informacin general sobre el documento HTML. Es obligatorio incluir el marcador <TITLE>, el resto de los marcadores son opcionales. Marcador <TITLE>: los navegadores muestran el ttulo de cada uno de los documentos HTML que encuentran. El ttulo que aparece se toma del contenido de

este marcador. Este marcador debe aparecer con su pareja con la barra inclinada </title> y dentro de la seccin <HEAD> Marcador <META>: este campo de metainformacin sirve para proporcionar informacin sobre el documento que no pueda ser expresada en el campo anterior. La informacin se escribe usando pares nombre/valor que pueden ser empleados para dos propsitos: * Proporcionar datos al servidor de HTTP para que genere campos de cabecera (como, por ejemplo, la fecha de caducidad de un documento que se actualiza peridicamente). Se emplean atributos del tipo HTTP-EQUIV y para la segunda los del tipo NAME. En ambos casos, el valor se asigna en el campo CONTENT. <META HTTP-EQUIV ="Expires" CONTENT="Diciembre 1998"> * Para que un usuario incluya informacin adicional sobre el documento, como palabras clave o el nombre del autor. El atributo NAME se refiere a nombres elegidos al azar por el usuario, mientras que HTTP-EQUIV significa que el valor tiene una cabecera equivalente real en el protocolo HTTP. <META NAME="Autor" CONTENT="Cooperacion+Desarrollo+ONGD">

Creacin de encabezados, estilos y prrafos Creacin de encabezados : Los encabezados se emplean para dividir los documentos en secciones, o ms concretamente para marcar los ttulos de esas secciones. Los marcadores son del tipo <H#>Ttulo</H#>, donde # puede ser un numero cualquiera entre 1 (mayor tamao) y 6 (menor tamao). Es recomendable usar los niveles en orden, es decir, despus de un encabezado de nivel uno deberemos usar encabezados de nivel dos para las subsecciones y no saltar directamente al tres o al cuatro, por ejemplo. La representacin de los encabezados depende del visor, generalmente se representan en negrita y van cambiando de tamao y espacios antes y despus, de ms a menos, en funcin del nivel. Introducen normalmente un salto de lnea automtico. Etiquetas de caracteres y tipos de letra:

El lenguaje HTML permite asignar formatos de tipos de letra y caracteres. Los navegadores leen estos marcadores lgicos de tipos de letra de los documentos HTML y los interpretan conforme a su capacidades. Existen multitud de marcadores para indicar que una palabra o frase tiene una connotacin especial y es obligatorio poner los marcadores de cierre al final del texto afectado. Estos son algunos de los ms utilizados LENGUAJE HTML <b>texto en negrita</b> <i>texto en cursiva o itlica </i> <u>texto subrayado</u> <b><i><u>combinando las tres anteriores</b></i></u> <tt>fuente tipo de mquina de escribir</tt> RESULTADO en navegador texto en negrita texto en cursiva o itlica texto subrayado combinando las tres anteriores fuente tipo de mquina de escribir

Formateo de prrafos o bloques: Cada navegador decide en funcin de las posibilidades grficas de cada ordenador las lneas de documento que va a presentar y es posible que ignore los caracteres fin de lnea introducidos. De la misma manera aunque hayas introducido lneas en blanco en tu documento fuente intentando marcar el final de prrafos, los navegadores las ignorarn. Tienes que marcar explcitamente los prrafos. El marcador de prrafo es <P> y se coloca al principio de cada nuevo prrafo, excepto cuando ya hay algn otro salto de lnea. El marcador final es opcional </p>. Aunque no son propiamente para definir bloques, hay marcadores para representar saltos de lnea y para insertar una lnea horizontal. Ambas permiten dividir el texto, por lo que las hemos incluido aqu. Marcador <BR>: este elemento slo tiene marca inicial y se usa para que el visor termine la lnea en el punto en el que encuentre. Realiza por lo tanto un salto de lnea sin que aparezca una lnea en blanco como en el caso de los prrafos. Marcador <HR>: slo consta de una marca inicial y se emplea para presentar una lnea horizontal en el texto, ya sea usando caracteres o un grfico, dependiendo del visor. Presentacin de textos en color: En tus documentos puedes especificar el color del texto. Se utiliza una notacin basada en los colores RGB empleados por todos lo monitores de vdeo en color. Cada color se especifica utilizando tres nmeros en el rango 0 a 255. La ausencia total de color, el negro se expresa con 000 y la saturacin de los tres colores, el blanco como

255 255 255. Entre ambos se definen los dems colores. Para establecer en HTML color del texto debes convertir a hexadecimal cada uno de estos nmeros. NO ASUSTARSE!!!! En todos los programas de edicin de pginas web (incluido Netscape) existe una herramienta para escoger el color del texto (y el del fondo de la pgina) sin necesidad de estos clculos. Esta es una de las funciones que puede resultar engorrosa si se utiliza slo el bloc de notas para realizar paginas web. En cualquier caso existen publicadas en internet tablas de colores y cdigos en http://www.reednews.co.uk.colours.html Marcador <FONT>: establece con el atributo COLOR el color del texto que indiques. <FONT COLOR="4169E1">prueba de color azul</font> prueba de color azul

Atributo TEXT: en el marcador <BODY> establece el color por defecto del texto de todo el documento. <BODY TEXT="4169E1"> Creacin de enlaces y vnculos Hipervnculos: Se llaman hipervnculos a las frases o palabras en color que tienen los documentos HTML y que al pulsar sobre ellos se salta a otro documento del servidor Web o a un servicio o documento que se encuentre en cualquier otro punto de la red, en un servidor situado en tu misma localidad o en el extremo opuesto del planeta. Marcador ancla <A>: Los hipervnculos estn basados en este marcador cuya sintaxis general es: <A ORDEN="objetivo"> Texto resaltado </A> Si sustituyes la palabra ORDEN por HREF indicars un hipervnculo (enlace externo) Por ejemplo (enlace externo: <a href="http://www.apc.org">APC</a>) Si la sustituyes por NAME apuntas hacia un lugar marcado dentro del mismo documento (enlace interno). Dependiendo de la sustitucin realizada el OBJETIVO ser uno u otro.

Por ejemplo, enlace interno a una parte del propio documento con el nombre indice <a name="indice"> Indice de documentos </a> El texto subrayado o resaltado identifica la frase o palabra que aparecer en el documento HTML y que estar ligada con el hipervnculo o lugar a localizar. Vinculacin con documentos locales: El hipervnculo ms sencillo es aquel que apunta a otro documento que se encuentra en el mismo equipo y en el mismo directorio <A HREF="pagina2.htm"> Segunda pgina Web</A> Si necesitas hacer referencia a un documento que se encuentra en un directorio distinto, slo tienes que cambiar la parte del objetivo e incluir en ella la ruta completa. Utilizando la barra inclinada precedida de dos puntos (/) puedes establecer la ruta. <A HREF="../pagina2.htm"> Segunda pgina Web</A> En este ejemplo, el documento pgina2.htm se encuentra ubicado en el directorio inmediatamente inferior donde se encuentra el documento que ests editando. Es lo que se donimina enlaces relativos Vinculacin con un punto especfico del documento (enlaces internos): Como veamos antes, en el caso de los enlaces internos de un documento, primero hay que definir el punto objetivo de la vinculacin y a continuacin se hace referencia en las partes que queramos a dicho punto. Por ejemplo <A NAME="indice">Indice</A> ... ... ... <A HREF="pagina.htm/#indice"> Indice de documentos</A>

En este ejemplo, al pulsar sobre Indice de documentos, slataremos hacia un lugar de la pgina que hemos definido con el nombre de indice a travs de la etiqueta A NAME Vinculacin de localizadores universales de recursos (enlaces externos): Son vnculos hacia documentos o servicios situados en sistemas remotos. Tendremos que utilizar el Localizador universal de recursos URL para hacer referencia al documento remoto.

Los localizadores son la clave para localizar e interpretar informacin en Internet. Los URL son una forma estndar de describir tanto la localizacin de un recurso en la Red, como su contenido. El lenguaje HTML utiliza una sintaxis estndar para designar los URL: Nombredelservicio://hostdeinternet:nnumerode puerto/recurso Nombre del servicio: servicio que se quiere realizar (http, mail, news, ftp). Nombre del host de Internet: lugar donde se encuentra el servicio. Nmero de puerto: opcional. Recurso: archivo, documento, marca, etc. URL http: acceso a pginas Web de un servidor en la World Wide Web. Por ejemplo: enlace a la pgina web de novedades de Nodo50: <a href="http://www.nodo50.org/novedades.htm">Novedades Nodo50</a> URL ftp: acceso a directorios o archivos de un servidor de ftp Por ejemplo: enlace al servidor de ftp de Nodo50: <a href="ftp://nodo50.org">FTP</a> URL news: acceso a un grupo de noticias . Por ejemplo: enlace a un grupo de noticias <a href="news://nodo50.org/reg.mexico">Grupo de noticias reg.mexico</a> URL mailto: envo de mensajes de correo Por ejemplo: enlace a una direccin de correo <a href="mailto:ayuda@nodo50.org">ayuda@nodo50.org</a> URL file: acceso a archivos locales en el PC. Por ejemplo: enlace a un archivo en el propio PC <a href="file://pruebas/pagina3.htm">pagina3</a>

Creacin de listas Listas desordenadas o con topos : Se indica cada elemento de la lista destacndolo con un punto u otro smbolo tipogrfico.

Lista desordenada: <UL TYPE="tipo"> <LI>Elemento 1</LI> <LI>Elemento 2</LI> </UL>

Marcador <UL>: define comienzo y final de lista desordenada. Atributo TYPE: tipo de topo para cada elemento. DISC SQUARE HOLLOW CIRCLE Crculo Cuadrado Crculo vaco.

Marcado <LI> : define cada elemento de la lista. No es obligatorio el marcador final. Listas ordenadas o numeradas : Se indica cada elemento de la lista con un nmero de orden. Lista ordenada: <OL TYPE="tipo" START="numero"> <LI>Elemento 1</LI> <LI>Elemento 2</LI> </OL>

Marcador <OL>: define comienzo y final de lista ordenada. Atributo TYPE: tipo de numeracin empleado. z1 a A Nmeros arbigos. Letras minsculas. Letras maysculas.

i I

Nmeros romanos en minsculas. Nmeros romanos en maysculas.

Atributo START: nmero con el cual comienza la lista. Marcado <LI> : define cada elemento de la lista. No es obligatorio el marcador final. Listas de glosario : Permiten incluir junto a cada elemento una descripcin del mismo. Lista de glosario: <DL> <DT>Trmino 1</DT> <DD>Dato 1</DD> <DD>Dato 2</DD> <DT>Trmino 2 </DT> </DL>

Marcador <DL>: define comienzo y final de lista de glosario. Marcado <DT> : define cada trmino. Marcado <DD> : define cada dato. Listas anidadas : Se pueden crear listas anidadas de cada una de las listas vistas anteriormente. Creacin de tablas Una tabla esta compuesta por filas y columnas de informacin. No solo permiten tabular la informacin sino mantener un mayor control sobre lo que se visualizar en la pantalla. La interseccin de una fila y una columna genera una celda. <TABLE BORDER=10 WIDTH="90%" ALIGN="justify"> <CAPTION> Ttulo de la tabla</CAPTION> <TH ALIGN="right">Cabecera columna 1</TH> <TH ALIGN="right">Cabecera columna 2</TH> <tr> <TD ALIGN="center">Fila 1, columna 1</TD>

<TD ALIGN="center">Fila 1, columna 2</TD> <TR> <TD ALIGN="left">Fila 2, columna 1</TD> <TD ALIGN="left">Fila 2, columna 2</TD> </TR> </TABLE>

Marcador <TABLE>: indica que vamos a crear una tabla. Atributo BORDER: presenta lneas de separacin de celdas as como su ancho en pixels Atributo CAPTION: ttulo de la tabla. Atributo WIDTH: anchura de la tabla. PIXELS RELATIVE Pixeles en pantalla. Porcentaje de la anchura de pgina (%)

Atributo ALIGN en <TABLE>: tipo de alineacin JUSTIFY LEFT RIGHT Ajustar al ancho de la pgina. Izquierda. Derecha.

Marcador <TH>: cabecera de la tabla. Aparecen en negrita. Marcador <TR>: indica el final de una fila. Marcador <TD>: indica un dato de la tabla, es decir una celda. Atributo ALIGN en <TH>, <TR> y <TD>: tipo de alineacin CENTER LEFT RIGHT Centro. Izquierda. Derecha.

En definitiva, el cdigo del principio de este apartado sobre creacin de tablas tendra este resultado:

Ttulo de la tabla Cabecera columna 1 Fila 1, columna 1 Fila 2, columna 1 Fila 2, columna 2 Cabecera columna 2 Fila 1, columna 2

Aadir imgenes Adicin de imgenes internas: Son las imgenes que aparecen cuando se visualiza el documento HTML. Los navegadores slo pueden visualizar dos tipos de imgenes: Imgenes en formato GIF o formato de intercambio de grficos. Imgenes en formato JPG o Joint Photographic Expert Group. El resto de imgenes (tif, bmp, etc.) se tratan como imgenes externas y slo se pueden visualizar con las aplicaciones auxiliares o los plug-ins de los navegadores Adems de que las imgenes tengan que ser de este tipo, es aconsejable que no tengan un tamao superior a 20-25K para evitar que tarden mucho en cargarse y la pgina web sea lo suficientemene "gil". Para ello, es muy importante que la resolucin de estas imgenes no sea superior a 75ppp que es la resolucin de la pantalla. Es intil darles una mayor resolucin (que se aplica en la edicin en papel) porque slo van a ocuparnos mayor espacio y no por ello se van a poder ver mejor en el monitor. Marcador <IMG>: permite incluir una imagen en el documento. No necesita terminador. Atributo SRC: permite especificar el archivo que contiene la imagen. Atributo ALT: texto alternativo para cuando no se pueda visualizar la imagen. Atributo ALIGN: alineacin fsica de la imagen. MIDDLE TOP BOTTOM LEFT RIGHT Alineacin centro. Alineacin superior. Alineacin inferior. Alineacin izquierda. Alineacin derecha.

Atributos HEIGHT Y WIDTH: tamao de las imgenes en el documento (normalemene en pixeles).

Atributo BORDER: permite sealar si se quiere enmarcar la imagen o no, as como el grosor de dicho marco Un ejemplo de inclusin de imgen en cdigo html incuyendo todos los atributos mencionados sera: <img src="prueba.jpg" alt="imagen de prueba" height=20 widht="40 align=right border=0> Esta lnea de codigo indica que insertamos una imagen tipo jpg llamada prueba, de 20x40 pixeles, sin marco, alineada a la derecha y con un texto alternativo (el que aparece cuando no se quieren ver imgenes en el navegador o cuando se estn cargando). Convertir una imagen interna en un hipervnculo: Basta incluir el marcador de imagen con todos sus atributos entre los marcadores de ancla (<a href=....></a> . El resultado obtenido es poder pulsar directamente sobre la imagen para acceder al hipervnculo. <A HREF="http://wwwnodo50.org"><IMG SRC="logonodo50.gif"></A>

Fondos de imagen: Tambin se puede establecer que una imagen sea el fondo de un documento HTML incluyndose como atributo del marcado del cuerpo (body) del documento HTML. <BODY BACKGROUND= "fondo.jpg">

Hasta aqu, lo que podramos denominar como un curso bsico para elaborar pginas web, sin embargo, el lenguaje HTML est provisto de ms cdigos y funciones que complican un poco ms su elaboracin pero tambin la hacen ms completa. Como ampliacin a esta primera parte de creacin de html, hemos elaborado una segunda parte ms avanzada que recomendamos seguir una vez se haya asimilado esta primera parte

AVANZADO Creacin de pagnas basadas en marcos o "frames Los marcos son como los trucos de vdeo de pantalla partida que se utilizan ocasionalmente en programas de televisin para mantener la atencin de l@s espectador@s. En los marcos la ventana del visor se divide en varias secciones independientes entre ellas y por supuesto interactivas. En el caso de las pginas web, cada uno de estos marcos suelen contener una pgina web

con los habituales cdigos HTML. Todos estos marcos que componen una web estn referenciados en la pgina web que los engloba. Por ejemplo, la siguiente pgina web bsica est compuesta por dos marcos en columnas que hacen a su vez referencia a dos pginas web, web1.htm y web2.htm <html> <body> <FRAMESET COLS="25%,75%/"> <FRAME SRC="web1.htm" NAME="nom"> <FRAME SRC="web2.htm"> </FRAMESET> </body> </html>

Marcador <FRAMESET>: define el marco al que llama un documento HTML. Tiene marcador de terminacin. Atributo COLS y ROWS: especifica el tamao de los divisores verticales y horizontales de los marcos. Podemos especificar en pixels o en porcentajes suprimiendo las barras inclinadas y especificando tantos nmeros como divisiones de la ventana. Marcador <FRAME>: define cada uno de los marcos establecidos en referencia a una pgina web cada uno de ellos Atributo SRC: especificacin del URL que define el marco. Atributo NAME: establece el nombre del marco para posteriores referencias como la presentacin de un vnculo de un marco en otro marco con un nombre determinado: es un nombre que se da a un frame o marco y no tiene porque ser el mismo nombre del fichero a que hace referencia dicho marco. Al establecer el vnculo se incluir el atributo TARGET, indicando el nombre de marco que debe presentar el URL seleccionado.

Creacin de formularios y scripts CGI Adems de la inclusin de hipervnculos e imgenes, una de las caractersticas ms importantes de HTML es la de pode usar formularios para que el usuario o la usuaria pueda introducir su informacin. Un formulario se compone de una plantilla para recoger un conjuto de datos, la especificacin del mtodo de enviar los datos recogidos y el URL de la accin asociada.

Es importante sealar que la utilidad de los formularios est limitada al uso de las pginas junto con servidores, ya que las acciones asociadas son programas, generalmente scripts de CGI , que deben funcionar en un servidor al cual se le envan los datos para ser procesados Declaracin de formularios: MARCADOR <FORM>: establece la definicin del formulario. En su interior aparecen una secuencia de elementos de entrada (INPUT), junto con elementos de marcado de estructura del documento. <FORM ACTION="URL" METHOD="mtodo de acceso" ENCTYPE="tipo de codificacin"> <INPUT TYPE=TEXT NAME="nom" SIZE=n MAXLENGTH=n VALUE="val"> <INPUT TYPE=PASSWORD NAME="nom" SIZE=n MAXLENGTH=n VALUE="val"> <INPUT TYPE=CHECKBOX NAME="nom" VALUE="val1" CHECKED> texto 1 <INPUT TYPE=CHECKBOX NAME="nom" VALUE="val2"> texto 2 <INPUT TYPE=RADIO NAME="nom""VALUE="val1" CHECKED> texto 1 <INPUT TYPE=RADIO NAME="nom" VALUE="val2"> texto 2 <INPUT TYPE=IMAGE NAME="nom" SRC="mapa.gif"> <INPUT TYPE=HIDDEN NAME="clave" VALUE="val"> <INPUT TYPE=SUBMIT NAME="clave" VALUE="caption"> <INPUT TYPE=RESET NAME="clave" VALUE="caption"> <SELECT NAME="nom"> <OPTION SELECTED>texto 1 <OPTION>texto 2 </SELECT> <TEXTAREA NAME="nom" ROWS=n COLS=c> texto de varias lneas </TEXTAREA> </FORM>

Atributo ACTION: especifica el URL de la accin asociada al formulario. Si no se especifica, por defecto se asume que el URL es el BASE del documento. Atributo METHOD: indica el mtodo de acceso al URL de la accin. El conjunto de mtodos aplicables es funcin del esquema del URL. Se pueden emplear los mtodos GET y POST, que se describirn ms adelante. Atributo ENCTYPE: especifica el tipo de codificacin para el transporte de los pares nombre/valor, excepto en los casos en los que el protocolo no imponga uno. Trataremos este tema en el punto referido a la codificacin de los formularios. MARCADOR <INPUT>: representa cada uno de los campos de entrada de datos.

 Atributo TYPE: establece el tipo de entrada y por tanto el formato de recogida de los datos que sern enviados para que el sistema los procese. TEXT PASSWORD CHECKBOX RADIO IMAGE HIDDEN SUBMIT RESET Casillas de texto en blanco: Atributo NAME: especifica el nombre de la variable que recoger el valor del datos y que permitir su posterior gestin. Atributo SIZE: especifica la cantidad de espacio reservada para este campo. El valor por defecto depende del visor. Atributo MAXLENGTH: limita el mximo nmero de caracteres que pueden ser introducidos en el campo. Si el valor es mayor que el del atributo SIZE, el visor debe permitir el desplazamiento de la lnea. El nmero de caracteres por defecto es ilimitado. Atributo VALUE: indica el valor inicial del campo. Casillas de texto para claves: mismos atributos que las casillas de texto en blanco solo que el eco en pantalla de los caracteres tecleados son asteriscos. Casillas de seleccin: permite la seleccin no excluyente de una serie de opciones y dispone de los atributos NAME, SIZE y VALUE adems de : Atributo CHECKED: indica que el estado inicial es seleccionado. Botones de radio: permite la seleccin excluyente de una serie de opciones y dispone de los atributos NAME, SIZE, VALUE y CHECKED. Pixels de una imagen: especifica una imagen para que la muestre el visor y permite la entrada de dos campos, las coordenadas x e y de un pixel seleccionado de la misma. Los nombres de los campos son iguales al del campo, aadiendo al final .x e .y. Los atributos Casillas de texto en blanco. Casillas de texto para claves. Casillas de seleccin. Botones de radio. Pixels de una imagen. Campos oculto Botn de envo. Botn de reinicio.

NAME y SRC son necesarios y el campo ALIGN es opcional. Atributo SRC: indica el archivo que contienen el mapa imagen. Atributo ALIGN: tipo de alineacin. Campos oculto: el usuario no interacta con l, es el atributo VALUE el que especifica el valor del campo. Tanto el atributo NAME como VALUE son obligatorios. Botn de envo: opcin que enviar los datos al URL servidor. Botn de reinicio: opcin que permite iniciar el formulario con los valores por defecto. MARCADOR <SELECT>: se emplea para reducir el campo a una lista de valores, es decir incluye en el formulario una lista desplazable. Atributo NAME: especifica el nombre del campo. Atributo SIZE: determina el nmero de tems visibles. Si se indica tamao uno, se suelen presentar como mens desplegables, mientras que si el tamao es mayor se suelen presentar como lista con barra de desplazamiento. Atributo MULTIPLE: indica que se trata de una lista desplegable. MARCADOR <OPTION>: representa cada uno de los valores. Los atributos del elemento son: Atributo SELECTED: indica que esta opcin est seleccionada inicialmente. Si ninguna opcin tiene este atributo, el visor presenta la primera seleccionada. Atributo VALUE: indica el valor a retornar si se selecciona la opcin. Si no se incluye el atributo, se emplea el contenido del elemento. MARCADOR <TEXTAREA>: representa un campo de texto de mltiples lneas o rea de texto. El contenido del elemento es el valor inicial del campo. La especificacin de filas y columnas slo se refiere a la dimensin del rea visible, pero los programas cliente pueden permitir sobrepasar los lmites mediante barras de desplazamiento. Generalmente se emplea un tipo de letra de caja fija para mostrar los contenidos del campo. Atributo COLS: nmero de columnas visibles del rea de texto, en caracteres. Atributo NAME: nombre del campo. Atributo ROWS: nmero de lneas visibles del rea de texto, en caracteres.

Envo y gestin de informacin

Ahora ya sabemos como obtener informacin mediante formularios HTML, el concepto bsico es tomar la informacin introducida en el formulario y pasarla al servidor Web. La interfaz de pasarela comn o CGI es la forma normalizada de conseguir este objetivo. Proceso de gestin de un formulario: Un visor presenta el documento con los campos en su estado inicial. Segn el tipo de campo, el usuario puede modificar sus valores (seleccionando un campo, rellenando con texto, etc.). Cuando ha terminado, puede enviarlo empleando un botn de envo o una seleccin de pixel en una imagen. En caso de que el formulario slo tenga un campo de entrada de texto de una lnea, el visor debe aceptar una pulsacin de la tecla de ENTER en ese campo como peticin de envo del formulario. En ese momento el visor analiza las entradas en funcin del mtodo, accin y tipo de codificacin que se especifican como atributos en el marcador de formulario. Tras este anlisis lo enva al servidor Web donde se procesarn los datos. Este servidor procesa la informacin y devuelve el resultado en forma de documento HTML que el usuario puede ver. Normalmente el proceso repite la informacin que ha introducido el usuario para su verificacin antes de ser enviada realmente. Para hacer esto su script CGI no solo debe pasar la informacin al usuario para procesarla sino que debe tambin formatear la salida en HTML, incluso colocar los marcadores necesarios. El navegador recibe la informacin formateada y la visualiza de forma dinmica. . Atributo ACTION: en los formularios basados en CGI es siempre el nombre de un programa CGI situado en el servidor Web y normalmente en el directorio cgi-bin. Atributo ENCTYPE: la codificacin por defecto de todos los formularios es, segn el esquema MIME, application/x-www-form-urlencoded. Un conjunto de datos de formulario se representa del siguiente modo: Los nombres de campos y los valores son preprocesados: los espacios son reemplazados por el smbolo +, y los caracteres son sustituidos como en los URL, es decir, los caracteres no alfanumricos se representan con un signo de porcentaje y dos dgitos hexadecimales que indican el cdigo ASCII del carcter (%HH). Los saltos de lnea (empleados en campos de mltiples lneas), se representan con pares CRLF (sustituidos por %0D%0A). Los campos se listan en el orden en el que aparecen en el documento, con los nombres separados del valor por el smbolo = y los pares separados entre s por el smbolo &. Los campos con valores nulos pueden ser omitidos, en particular, los campos no seleccionados en entradas booleanas no deben aparecer en los datos, pero los campos ocultos que tengan el atributo VALUE s. Atributo METHOD: el mtodo de consulta depende de los efectos que el formulario tenga es decir, si el envo va a producir cambios en cualquier documento o programa que no sea

nuestro visor Formularios de Consulta, atributo METHOD=GET: Si el proceso del formulario es idempotente (no produce cambios), el mtodo debe ser GET. Un ejemplo de este tipo de formularios son las consultas a bases de datos, que no tienen efectos laterales visibles. Para procesar un formulario cuyo URL de accin es un URL de tipo HTTP y el mtodo es GET, el visor genera un URL que comienza con el de la accin al que se le aade un interrogante (?) y el conjunto de datos codificado con el formato application/x-www-formurlencoded visto en el punto anterior. Para acceder a la consulta el visor accede al URL de la misma manera que lo hace con los que aparecen en los anclajes. De todos modos, en algunos casos, la codificacin de los datos puede generar un URL extremadamente largo, lo que puede provocar un funcionamiento errneo con algunos servidores de HTTP antiguos. Por esta razn, algunos formularios que no tienen efectos laterales, se escriben usando el mtodo POST. Formularios con efectos Laterales, atributo METHOD=POST : Para formularios con efectos laterales (como uno que modifique una base de datos) se emplea el mtodo POST. Para procesar un formulario cuyo URL de accin es de tipo HTTP y el mtodo es POST, el visor gestiona una transaccin de tipo POST del protocolo HTTP, usando el URL de la accin y el cuerpo de un mensaje de tipo application/x-www-form-urlencoded como antes. El visor debe presentar la respuesta del HTTP POST de la misma forma que la respuesta obtenida con el mtodo GET. Ejemplo de URL al enviar un formulario : El usuario rellena los campos y solicita el envo. Supongamos que los valores son: nombre "Alicia Perez" genero "F" numero "4" idioma "I" otros "catalan\neuskera" Entonces el visor gestiona una transaccin HTTP POST usando el URL /cgi-bin/post-query. El cuerpo del mensaje ser la siguiente lnea: nombre=Alicia+Perez&genero=F&numero=4&idiomas=I&otros=catalan%0D%0Aeuskera