Top Banner
I nstituto T ecnológico S uperior de Jesús Carranza ASIGNATURA: Programación Web CLAVE DE LA ASIGNATURA: SCF - 0427 CARRERA: Ingeniería en Sistemas Computacionales ANTOLOGÍA PRESENTA: L.I. ESTEBAN SANCHEZ MENDOZA Jesús Carranza, Ver Enero 2012
155

Antologia de Programacion Web

Aug 02, 2015

Download

Documents

reychel_chacal
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Antologia de Programacion Web

Instituto Tecnológico Superior de

Jesús Carranza

ASIGNATURA:Programación WebCLAVE DE LA ASIGNATURA:

SCF - 0427

CARRERA:Ingeniería en Sistemas ComputacionalesANTOLOGÍA

PRESENTA:

L.I. ESTEBAN SANCHEZ MENDOZA

Jesús Carranza, Ver Enero 2012

Page 2: Antologia de Programacion Web

ÍNDICE GENERALTema Página

UNIDAD I.INTRODUCCIÓN A LAS TECNOLOGÍAS WEB.

1.1 Perspectiva histórica del Internet. .............................................................. 6

1.2 Protocolo http (protocolo de transferencia de hipertexto). .......................... 8

1.2.1 Arquitectura del WWW...................................................................... 10

1.2.2 URL’s. ............................................................................................... 11

1.2.3 Métodos http. Persistencia en http –Cookies. ................................... 13

1.3 Introducción al HTML. Lenguaje de despliegue del web ............................ 14

1.3.1 HTML como un tipo SGML................................................................ 15

1.3.2 Elementos del lenguaje HTML. ......................................................... 17

1.3.3 Tablas en HTML................................................................................ 18

1.3.4 Formularios. ...................................................................................... 19

1.4 Evolución del desarrollo de aplicaciones Web. .......................................... 21

1.5 Hojas de estilo en cascada e introducción al XML. .................................... 22

UNIDAD II.DESARROLLO DE APLICACIONES WEB

2.1 Arquitectura de las aplicaciones Web. ....................................................... 25

2.2 Lenguajes de programación del lado del cliente. ....................................... 29

2.3 Lenguajes de programación del lado del servidor. ..................................... 30

2.4 Ambientes para el desarrollo de aplicaciones Web.................................... 34

2.5 Metodologías para el desarrollo de aplicaciones Web. .............................. 34

2.6 Aspectos de seguridad. .............................................................................. 44

Page 3: Antologia de Programacion Web

UNIDAD III.PROGRAMACIÓN DEL LADO DEL SERVIDOR.

3.1 Procesamiento del lado del servidor. ......................................................... 47

3.2 Conceptos básicos de la herramienta de desarrollo................................... 51

3.3 Operadores. ............................................................................................... 54

3.4 Sentencias.................................................................................................. 62

3.5 Arreglos. ..................................................................................................... 71

3.6 Funciones y librerías. ................................................................................. 83

3.7 Ejemplos prácticos. .................................................................................... 96

3.8 Procesado de formularios........................................................................... 107

3.9 Sesiones..................................................................................................... 108

3.10 Conectividad entre el servidor Web y el servidor de base de datos. ........ 114

3.11 Manejo de archivos. ................................................................................. 116

3.12 Seguridad. ................................................................................................ 123

UNIDAD IV.PROCESAMIENTO DEL LADO DEL CLIENTE

4.1 Lenguaje Script del cliente. ........................................................................ 127

4.2 Modelo de objetos con lenguaje Script....................................................... 132

4.3 Objetos lenguaje Script ínter construidos. .................................................. 136

4.4 Eventos con lenguaje Script. ...................................................................... 137

4.5 Validación de entrada de datos del lado del cliente. .................................. 137

4.6 Consideraciones del soporte del navegador. ............................................. 138

Page 4: Antologia de Programacion Web

UNIDAD V.SERVICIOS WEB XML.

5.1 Visión general de servicios Web XML. ....................................................... 140

5.2 Tecnologías subyacentes........................................................................... 140

5.2.1 SOAP................................................................................................ 141

5.2.2 WSDL................................................................................................ 143

5.2.3 UDDI ................................................................................................. 146

5.3 Publicación de un servicio WEB................................................................. 147

5.4 Consumo de un servicio WEB.................................................................... 148

Page 5: Antologia de Programacion Web

INTRODUCCION

El diseño web es una actividad que consiste en la planificación, diseño

e implementación de sitios web y páginas web. No es simplemente una aplicación

del diseño convencional, ya que requiere tener en cuenta cuestiones tales como

navegabilidad, interactividad, usabilidad, arquitectura de la información y la

interacción de medios como el audio, texto, imagen y vídeo. Se lo considera

dentro del diseño multimedia.

La unión de un buen diseño con una jerarquía bien elaborada de

contenidos aumenta la eficiencia de la web como canal de comunicación e

intercambio de datos, que brinda posibilidades como el contacto directo entre el

productor y el consumidor de contenidos, característica destacable del medio.

El diseño web ha visto amplia aplicación en los sectores comerciales de

Internet especialmente en la World Wide Web. Asimismo, a menudo la web se

utiliza como medio de expresión plástica en sí. Artistas y creadores hacen de las

páginas en Internet un medio más para ofrecer sus producciones y utilizarlas como

un canal más de difusión de su obra.

Page 6: Antologia de Programacion Web

Unidad I.Introducción a la Programación Web

Objetivo:

Comprender las características de una aplicación

Web y conocer los elementos que interactúan con

ella.

Page 7: Antologia de Programacion Web

Programación Web Unidad I.

L.I. Esteban Sánchez Mendoza Página 6

1.1. Perspectiva histórica del Internet.

Los inicios de Internet nos remontan a los años 60. En plena guerra fría, EstadosUnidos crea una red exclusivamente militar, con el objetivo de que, en el hipotético caso de unataque ruso, se pudiera tener acceso a la información militar desde cualquier punto del país.

Este red se creó en 1969 y se llamó ARPANET. En principio, la red contaba con 4ordenadores distribuidos entre distintas universidades del país. Dos años después, ya contaba conunos 40 ordenadores conectados. Tanto fue el crecimiento de la red que su sistema decomunicación se quedó obsoleto. Entonces dos investigadores crearon el Protocolo TCP/IP, que seconvirtió en el estándar de comunicaciones dentro de las redes informáticas (actualmente seguimos

utilizando dicho protocolo).

ARPANET siguió creciendo y abriéndose al mundo, y cualquier persona con finesacadémicos o de investigación podía tener acceso a la red. Las funciones militares se desligaron deARPANET y fueron a parar a MILNET, una nueva red creada por los Estados Unidos.

La NSF (National Science Fundation) crea su propia red informática llamada NSFNET,que más tarde absorbe a ARPANET, creando así una gran red con propósitos científicos yacadémicos.

El desarrollo de las redes fue abismal, y se crean nuevas redes de libre acceso quemás tarde se unen a NSFNET, formando el embrión de lo que hoy conocemos como INTERNET.

En 1985 la Internet ya era una tecnología establecida, aunque conocida por unospocos.

El autor William Gibson hizo una revelación: el término "ciberespacio". En ese tiempo lared era basicamente textual, así que el autor se baso en los videojuegos. Con el tiempo la palabra"ciberespacio" terminó por ser sinonimo de Internet.El desarrollo de NSFNET fue tal que hacia el año1990 ya contaba con alrededor de 100.000 servidores.

Page 8: Antologia de Programacion Web

Programación Web Unidad I.

L.I. Esteban Sánchez Mendoza Página 7

En el Centro Europeo de Investigaciones Nucleares (CERN), Tim Berners Lee dirigía labúsqueda de un sistema de almacenamiento y recuperación de datos. Berners Lee retomó la idea deTed Nelson (un proyecto llamado "Xanadú" ) de usar hipervínculos. Robert Caillau quien cooperócon el proyecto, cuanta que en 1990 deciden ponerle un nombre al sistema y lo llamarón World Wide

Web (WWW) o telaraña mundial.

La nueva fórmula permitía vincular información en forma lógica y a través de las redes.El contenido se programaba en un lenguaje de hipertexto con "etiquetas" que asignaban una funcióna cada parte del contenido. Luego, un programa de computación, un intérprete, eran capaz de leeresas etiquetas para despeglar la información. Ese interprete sería conocido como "navegador" o"browser".

En 1993 Marc Andreesen produjo la primera versión del navegador "Mosaic", quepermitió acceder con mayor naturalidad a la WWW. La interfaz gráfica iba más allá de lo previsto y lafacilidad con la que podía manejarse el programa abría la red a los legos. Poco después Andreesenencabezó la creación del programa Netscape.

A partir de entonces Internet comenzó a crecer más rápido que otro medio decomunicación, convirtiéndose en lo que hoy todos conocemos.

Algunos de los servicios disponibles en Internet aparte de la WEB son el acceso remotoa otras máquinas (SSH y telnet), transferencia de archivos (FTP), correo electrónico (SMTP),conversaciones en línea (IMSN MESSENGER, ICQ, YIM, AOL, jabber), transmisión de archivos(P2P, P2M, descarga directa), etc.

Page 9: Antologia de Programacion Web

Programación Web Unidad I.

L.I. Esteban Sánchez Mendoza Página 8

1.2. Protocolo http (protocolo de transferencia de hipertexto).

Desde 1990, el protocolo HTTP (Protocolo de transferencia de hipertexto) es elprotocolo más utilizado en Internet. La versión 0.9 sólo tenía la finalidad de transferir los datos através de Internet (en particular páginas Web escritas en HTML). La versión 1.0 del protocolo (la másutilizada) permite la transferencia de mensajes con encabezados que describen el contenido de losmensajes mediante la codificación MIME.

El propósito 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, httpd

en equipos UNIX) localizado mediante una cadena de caracteres denominada dirección URL.

Comunicación entre el navegador y el servidor

La comunicación entre el navegador y el servidor se lleva a cabo en dos etapas:

El navegador realiza una solicitud HTTP

El servidor procesa la solicitud y después envía una respuesta HTTP.

En realidad, la comunicación se realiza en más etapas si se considera el procesamientode la solicitud en el servidor. Dado que sólo nos ocupamos del protocolo HTTP, no se explicará la

Page 10: Antologia de Programacion Web

Programación Web Unidad I.

L.I. Esteban Sánchez Mendoza Página 9

parte del procesamiento en el servidor en esta sección del artículo. Si este tema les interesa, puedeconsultar el artículo sobre el tratamiento de CGI.

Solicitud HTTP

Una solicitud HTTP es un conjunto de líneas que el navegador envía al servidor.Incluye:

Una línea de solicitud: es una línea que especifica el tipo de documento solicitado, elmétodo que se aplicará y la versión del protocolo utilizada. La línea está formada por tres elementosque deben estar separados por un espacio:

o el métodoo la dirección URLo la versión del protocolo utilizada por el cliente (por lo general,

HTTP/1.0)

Los campos del encabezado de solicitud: es un conjunto de líneas opcionales quepermiten aportar información adicional sobre la solicitud y/o el cliente (navegador, sistema operativo,etc.). Cada una de estas líneas 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 líneas opcionales que deben estarseparadas de las líneas precedentes por una línea en blanco y, por ejemplo, permiten que se envíendatos por un comando POST durante la transmisión de datos al servidor utilizando un formulario.

Page 11: Antologia de Programacion Web

Programación Web Unidad I.

L.I. Esteban Sánchez Mendoza Página 10

1.2.1 Arquitectura del WWW.

Web o la web, la "red" o www de "World Wide Web", es básicamente un medio decomunicación de texto, gráficos y otros objetos multimedia a través de Internet, es decir, la web esun sistema de hipertexto que utiliza Internet como su mecanismo de transporte o desde otro puntode vista, una forma gráfica de explorar Internet.

La web fue creada en 1989 en un instituto de investigación de Suiza , la web se basa eny el protocolo de transporte de hipertexto (hypertext transport protocol (http)). La mayoría de losdocumentos de la web se crean utilizando lenguaje HTML (hypertext markup language).

Es importante saber que web o www no son sinónimo de Internet, la web es unsubconjunto de Internet que consiste en páginas a las que se puede acceder usando un hipertexto.Internet es la red de redes donde reside toda la información. Tanto el correo electrónico, como FTPs,juegos, etc. son parte de Internet, pero no de la Web.

Para buscar hipertexto se utilizan programas llamados web que recuperan trozos deinformación (llamados "documentos" o "páginas web") de los servidores web y muestran en lapantalla del ordenador de la persona que está buscando la información gráfica, textual o video eincluso audio.

Después se pueden seguir enlaces o hyperlinks en cada página a otros documentos oincluso devolver información al servidor para interactuar con él. Al acto de seguir un enlace tras otroa veces se le llama navegar en Internet.

La web se ha convertido en un medio muy popular de publicar información en Internet, ycon el desarrollo del protocolo de transferencia segura (secured server protocol (https)), la web esahora un medio de comercio electrónico donde los consumidores pueden escoger sus productos on-line y realizar sus compras utilizando la información de sus tarjetas bancarias de forma segura.

Page 12: Antologia de Programacion Web

Programación Web Unidad I.

L.I. Esteban Sánchez Mendoza Página 11

1.2.2 URL’s.

URL es el acrónimo de (Uniform Resource Locator), localizador uniforme de recursos y

permite localizar o acceder de forma sencilla cualquier recurso de la red desde el navegador de laWWW.

Con la WWW se pretende unificar el proceso información de servicios que anteseran incompatibles entre sí, tratando de conseguir que todos los servicios de internet seanaccesibles a través de la WWW, de esta forma desde un mismo programa se puede tener acceso atodos los recursos de una forma uniforme y permite que los documentos HTML incluyan enlaces aotras fuentes de información en servicios como FTP, gopher, WAIS, etc .

Uso y Formato

Las URL se utilizarán para definir el documento de destino de los hiperenlaces, parareferenciar los gráficos y cualquier otro fichero que se desee incluir dentro de un documento HTML.Cada elemento de internet tendrá una URL que lo defina, ya se encuentre en un servidor de laWWW, FTP, gopher o las News.

El formato de una URL será:

servicio://maquina.dominio:puerto/camino/fichero

El servicio será alguno de los de internet, estos pueden ser:

http: (HyperText Transport Protocol), es el protocolo utilizado para transmitir hipertexto.Todas las páginas HTML en servidores WWW deberán ser referenciadas mediante este servicio.Indicará conexión a un servidor de la WWW.

Page 13: Antologia de Programacion Web

Programación Web Unidad I.

L.I. Esteban Sánchez Mendoza Página 12

https: (HyperText Transport Protocol Secure), es el protocolo para la conexión aservidores de la WWW seguros. Estos servidores son normalmente de ámbito comercial y utilizanencriptación para evitar la intercepción de los datos enviados, usualmente numeros de tarjeta decredito, datos personales, etc ..., realizará una conexión a un servidor de la WWW seguro.

ftp: (File Transfer Protocol), utilizará el protocolo FTP de transferencia de ficheros. Seutilizará cuando la información que se desee acceder se encuentre en un servidor de ftp. Por defectose accederá a un servidor anónimo (anonymous), si se desea indicar el nombre de usuario se usará:ftp://maquina.dominio@usuario, y luego le pedirá la clave de acceso.

gopher, wais: Cualquiera de estos servicios de localización de información, se

indicará el directorio para localizar el recurso concreto.

news: Accede al servicio de news, para ello el visualizador de la WWW debe ser capaz

de presentar este servicio, todos no lo son. Se indicará el servidor de news y como camino el grupode noticias al que se desea acceder: news://news.cica.es/uca.es.

telnet: Emulación de terminal remota, para conectarse a máquina multiusuario, se

utiliza para acceder a cuentas públicas como por ejemplo la de biblioteca. Lo normal es llamar a unaaplicación externa que realice la conexión. En este caso se indicará la máquina y el login:telnet://maquina.dominio@login.

mailto: Se utilizará para enviar correo electrónico, todos los navegadores no son

capaces. En este caso solo se indicará la dirección de correo electrónico del destino: mailto://alias.

correo@domino.

La maquina.dominio indicará el servidor que nos proporciona el recurso, en este

caso se utilizará el esquema IP para identificar la maquina será el nombre de la máquina y eldominio. En el caso de nuestra Universidad el dominio siempre será uca.es. Por tanto un nombrevalido de maquina será www2.uca.es.

Es muy importante indicar siempre el dominio, ya que debemos suponer que seconectarán a nuestras páginas desde servidores externos a nuestra red local por tanto si noindicamos el dominio las URL que especifiquemos no podrían ser seguidas por los navegadores

Page 14: Antologia de Programacion Web

Programación Web Unidad I.

L.I. Esteban Sánchez Mendoza Página 13

externos. Si en vez de www2.uca.es utilizamos www2 será perfectamente accesible por cualquiermáquina de nuestra red local pero si se referenciara desde una red con distinto dominio la maquinawww2 será la maquina llamada así en el dominio remoto si existiera, que no es la que deseamosreferenciar.

El puerto TCP es opcional y lo normal es no ponerlo si el puerto es el mismo que se

utiliza normalmente por el servicio. Solo se utilizará cuando el servidor utilice un puerto distinto alpuerto por defecto.

El camino será la ruta de directorios que hay que seguir para encontrar el documento

que se desea referenciar. para separar los subdirectorios utilizaremos la barra de UNIX /, se usa porconvenio al ser este tipo de máquinas las más usadas como servidores. El nombre de lossubdirectorios y del fichero referenciado puede ser de más de ocho caracteres y se tendrá en cuentala diferencia entre mayúsculas y minúsculas en el nombre.

La extensión de los ficheros será también algo importante, ya que por ella sabe elservidor el tipo de documento que se accede e indica al cliente (navegador) el modo en que debetratarse ese documento. Para definir los tipos de documentos se utiliza los tipos MIME. Lasextensiones más normales con sus tipos correspondientes son:

Tipo MIME Extensión Tipo de fichero

text/html html ó .htm, documento HTML

text/plain .txt por defecto, texto plano

image/gif .gif imagen de formato GIF

image/jpeg jpg ó .jpeg imagen de formato JPEG

1.2.3 Métodos http. Persistencia en http –Cookies.

Cookie' (pronunciado: literalmente "galleta") es un fragmento de información que sealmacena en el disco duro del visitante de una página web a través de su modo a petición delservidor de la página. Esta información puede ser luego recuperada por el servidor en posteriores

Page 15: Antologia de Programacion Web

Programación Web Unidad I.

L.I. Esteban Sánchez Mendoza Página 14

visitas. En ocasiones también se le llama "huella". Las inventó Lou Montulli, un antiguo empleado deNetscape Communications." s

Al ser el protocolo HTTP incapaz de mantener información por sí mismo, para que sepueda conservar información entre una página vista y otra (como login de usuario, preferencias decolores, etc.), ésta debe ser almacenada, ya sea en la URL de la página, en el propio servidor, o enuna cookie en el ordenador del visitante.

De esta forma, los usos más frecuentes de las cookies son:

Llevar el control de usuarios: cuando un usuario introduce su nombre de usuario ycontraseña, se almacena una cookie para que no tenga que estar introduciéndolas para cada páginadel servidor. Sin embargo una cookie no identifica a una persona, sino a una combinación decomputador-navegador-usuario.

Conseguir información sobre los hábitos de navegación del usuario, e intentos despyware, por parte de agencias de publicidad y otros. Esto puede causar problemas de privacidad yes una de las razones por la que las cookies tienen sus detractores.

Originalmente, sólo podían ser almacenadas por petición de un CGI desde el servidor,pero Netscape dio a su lenguaje Javascript la capacidad de introducirlas directamente desde elcliente, sin necesidad de CGIs. En un principio, debido a errores del navegador, esto dio algunosproblemas de seguridad. Las cookies pueden ser borradas, aceptadas o bloqueadas según desee,para esto sólo debe configurar convenientemente el navegador web.

1.3. Introducción al HTML. Lenguaje de despliegue del web.

HTML, siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»),es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado paradescribir la estructura y el contenido en forma de texto, así como para complementar el texto conobjetos tales como imágenes. HTML se escribe en forma de «etiquetas», rodeadas por corchetesangulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un

Page 16: Antologia de Programacion Web

Programación Web Unidad I.

L.I. Esteban Sánchez Mendoza Página 15

documento, y puede incluir un script (por ejemplo JavaScript), el cual puede afectar elcomportamiento de navegadores web y otros procesadores de HTML.

HTML también es usado para referirse al contenido del tipo de MIME text/html o todavíamás ampliamente como un término genérico para el HTML, ya sea en forma descendida del XML(como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML

1.3.1 HTML como un tipo SGML

Page 17: Antologia de Programacion Web

Programación Web Unidad I.

L.I. Esteban Sánchez Mendoza Página 16

El SGML es un sistema para definir lenguajes para dar formato a documentos (markuplanguages). Los autores utilizan un código de formato (en inglés markup) en sus documentos pararepresentar información estructural, presentacional y semántica junto con el contenido. El HTML esun ejemplo de lenguaje de formato de documentos. Aquí tenemos un ejemplo de un documentoHTML: Un documento HTML se divide en una sección de cabecera (aquí, entre y ) y un cuerpo(aquí, entre y ). El título del documento aparece en la cabecera (junto con otras informaciones sobreel documento), y el contenido del documento aparece en el cuerpo. El cuerpo de este ejemplocontiene únicamente un párrafo, codificado o marcado como

Cada lenguaje de formato de documentos definido con SGML se llama aplicaciónSGML. Una aplicación SGML se caracteriza generalmente por:

1. Una declaración SGML. La declaración SGML especifica qué caracteres ydelimitadores pueden aparecer en la aplicación.

2. Una definición del tipo de documento (document type definition, DTD). El DTDdefine la sintaxis de las estructuras de formato. El DTD puede incluir definicionesadicionales, tales como referencias a entidades de caracteres.

3. Una especificación que describe la semántica que se debe conferir al código deformato. Esta especificación también impone restricciones de sintaxis que nopueden expresarse dentro del DTD.

4. Documentos que contienen datos (contenido) y código (markup). Cadadocumento contiene una referencia al DTD que debe usarse para interpretarlo.

Esta especificación incluye una declaración SGML, tres definiciones del tipo dedocumento (ver la sección sobre información sobre la versión de HTML para una descripción de lastres), y una lista de referencias de caracteres

Page 18: Antologia de Programacion Web

Programación Web Unidad I.

L.I. Esteban Sánchez Mendoza Página 17

1.3.2 Elementos del lenguaje HTML.

Además de etiquetas y atributos, HTML define el término elemento para referirse a laspartes que componen los documentos HTML. Aunque en ocasiones se habla de forma indistinta de"elementos" y "etiquetas", en realidad un elemento HTML es mucho más que una etiqueta, ya queestá formado por:

Una etiqueta de apertura, que contiene:

1. Cero o más atributos.

2. Texto encerrado por la etiqueta.

3. Una etiqueta de cierre.

Por otra parte, el lenguaje HTML clasifica a todos los elementos en dos grupos:elementos en línea (inline elements en inglés) y elementos de bloque (block elements en inglés).

La principal diferencia entre los dos tipos de elementos es la forma en la que ocupan elespacio disponible en la página. Los elementos de bloque siempre empiezan en una nueva línea yocupan todo el espacio disponible hasta el final de la línea, aunque sus contenidos no lleguen hastael final de la línea. Por su parte, los elementos en línea sólo ocupan el espacio necesario paramostrar sus contenidos.

Los elementos en línea definidos por HTML son: a, abbr, acronym, b, basefont, bdo,big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong,sub, sup, textarea, tt, u, var. Los elementos de bloque definidos por HTML son: address, blockquote,center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, nos-cript, ol, p,pre, table, ul. Los siguientes elementos también se considera que son de bloque: dd, dt, frame-set, li,tbody, td, tfoot, th, thead, tr. Los siguientes elementos pueden ser en línea y de bloque según lascircunstancias: button, del, iframe, ins, map, object, script.

Page 19: Antologia de Programacion Web

Programación Web Unidad I.

L.I. Esteban Sánchez Mendoza Página 18

1.3.3 Tablas en HTML.

Al igual que las listas,las tablas son componentes dedicados fundamentalmente amejorar la visualización de los documentos en formato electrónico. Se trata de una funcionalidadbásica de la inmensa mayoría de los programas de tratamiento de texto y una forma habitual depresentar información, especialmente numérica, desde la introducción de las mejoras de cálculo.TABLAS BASICAS

La directiva dedicada a las tablas es (directiva cerrada). No es preciso determinarinicialmente el número de filas o columnas, el navegador se encarga de averiguarlo a medida queprofundice en el contenido de la tabla que está cargando en pantalla. Cada celda se limita con ladirectiva cerrada y cada fila con la directiva. Una vez que tengamos declarada el comienzo denuestra tabla con se coloca un nuevo comando contenedor, el atributo (Table Row), para identificarcada fila de la tabla, en el interior de la definición de la tabla: Identifica el comienzo de la tabla Estoidentifica una fila horizontal. Identifica el final de la tabla En cada una de las filas podrán aparecerceldillas que serán de 2 tipos: cabeceras o normales.

Celdillas Cabeceras: Este tipo de celdillas son las que por así decirlo, identifican cadauna de las columnas de la celdilla, y su interior destaca del resto del texto contenido en el resto de latabla, debido a que aparece en negrita. Se limitan por (Table Head) y todo lo que contenga en suinterior, destacara del resto del documento. En este ejemplo definimos una tabla con 2 columnas yuna fila. Las columnas contendrán un texto destacado del resto del contenido de la tabla. Fijarse quetodo lo que vaya entre las directivas definen el total de una fila, y después podremos poner tantasceldillas de cabecera como queramos, definiendo cada una por medio de. Un ejemplo de celdillas decabecera sería el empleado por ejemplo para destacar los días de la semana (Lunes, Martes,Miércoles,...), de un horario de clases, del resto de las celdillas que contienen las horas de clase ensí.

Page 20: Antologia de Programacion Web

Programación Web Unidad I.

L.I. Esteban Sánchez Mendoza Página 19

1.3.4 Formularios.

Un formulario HTML es una sección de un documento que contiene contenido normal,código, elementos especiales llamados controles (casillas de verificación (checkboxes), radiobotones(radio buttons), menúes, etc.), y rótulos (labels) en esos controles. Los usuarios normalmente"completan" un formulario modificando sus controles (introduciendo texto, seleccionando objetos deun menú, etc.), antes de enviar el formulario a un agente para que lo procese (p.ej., a un servidorweb, a un servidor de correo, etc.) Aquí se muestra un ejemplo de un formulario simple que incluyerótulos, radiobotones y botones para reinicializar el formulario o para enviarlo:

Nombre:

Apellido:

email:

Varón

MujerEnviar Restablecer

Nota. Esta especificación incluye información más detallada sobre formularios en lassubsecciones sobre representación de formularios.

Controles

Los usuarios interaccionan con los formularios a través de los llamados controles. El "nombre decontrol" de un control viene dado por su atributo name. El "campo de acción" o alcance del atributoname de un control contenido en un elemento FORM es el elemento FORM. Cada control tiene tantoun valor inicial como un valor actual, que son ambos cadenas de caracteres. Consulte la definiciónde cada control para obtener información sobre los valores iniciales y las posibles restricciones quepuede imponer cada control sobre sus valores. En general, el "valor inicial" de un control puedeespecificarse con el atributo value del elemento de control. Sin embargo, el valor inicial de unelemento TEXTAREA viene dado por sus contenidos, y el valor inicial de un elemento OBJECT deun formulario está determinado por la implementación del objeto (es decir, se sale fuera del alcancede esta especificación). El "valor actual" del control se hace en primer lugar igual al valor inicial. A

Page 21: Antologia de Programacion Web

Programación Web Unidad I.

L.I. Esteban Sánchez Mendoza Página 20

partir de ese momento, el valor actual del control puede ser modificado a través de la interacción conel usuario y mediante scripts. El valor inicial de un control no cambia. Así, cuando se reinicializa elformulario, el valor actual de cada control se reinicializa a su valor inicial. Si el control no tiene unvalor inicial, el efecto de una reinicialización del formulario sobre ese control es indefinido. Cuandose envía un formulario para su procesamiento, para algunos controles se empareja su nombre consu valor actual, y estas parejas se envían con el formulario. Aquellos controles cuyas parejasnombre/valor se envían se llaman controles con éxito.

Tipos de controles

HTML define los siguientes tipos de controles: botones Los autores pueden crear trestipos de botones:

Botones de envío (submit buttons): Cuando se activa, un botón de envío envía un formulario.Un formulario puede contener más de un botón de envío.

Botones de reinicialización (reset buttons): Cuando se activa, un botón de reinicializaciónreinicializa todos los controles a sus valores iniciales.

Botones pulsadores (push buttons): Los botones pulsadores no tienen un comportamientopor defecto. Cada botón pulsador puede tener asociados scripts en el lado del cliente através del atributo evento del elemento. Cuando ocurre un evento (p.ej., el usuario aprieta elbotón, lo suelta, etc.), se acciona el script asociado.

Los autores deberían especificar el lenguaje de programación del script de un botónpulsador a través de una declaración de scripts por defecto (con el elemento META). Los autorescrean botones con el elemento BUTTON o el elemento INPUT. Consulte las definiciones de estoselementos para más detalles sobre cómo especificar diferentes tipos de botones.

Page 22: Antologia de Programacion Web

Programación Web Unidad I.

L.I. Esteban Sánchez Mendoza Página 21

1.4 Evolución del desarrollo de aplicaciones Web.

Con la introducción de Internet y del Web en concreto, se han abierto infinidad deposibilidades en cuanto al acceso a la información desde casi cualquier sitio. Esto representa undesafío a los desarrolladores de aplicaciones, ya que los avances en tecnología demandan cada vezaplicaciones más rápidas, ligeras y robustas que permitan utilizar el Web.

Afortunadamente, tenemos herramientas potentes para realizar esto, ya que hansurgido nuevas tecnologías que permiten que el acceso a una base de datos desde el Web, porejemplo, sea un mero trámite. El único problema es decidir entre el conjunto de posibilidades lacorrecta para cada situación.

El viejo CGI ha cumplido con el propósito de añadir interactividad a las páginas Webpero sus deficiencias en el desarrollo de aplicaciones y en la escalabilidad de las mismas haconducido al desarrollo de APIs específicos de servidor como Active Server Pages, ASP, y PHP, queson más eficientes que su predecesor CGI.

Para aprovechar el potencial de estas tecnologías y ofertar una solución de servidormás extensible y portable, Sun ha desarrollado la tecnología llamada servlet. Los servlets Java sonmuy eficientes, debido al esquema de threads en el que se basan y al uso de una arquitecturaestándar como la JVM, Java Virtual Machine.

Otra nueva tecnología viene a sumarse a las que extienden la funcionalidad de losservidores Web, llamada Java Server? Pages, JSP. Los JSP permiten juntar HTML, aplicacionesJava, y componentes como las Java Beans? creando una página Web especial que el servidor Webcompila dinámicamente en un servlet la primera vez que es llamada.

La Web 2.0 es la representación de la evolución de las aplicaciones tradicionales haciaaplicaciones web enfocadas al usuario final. El Web 2.0 es una actitud y no precisamente unatecnología. Cuando el web inició, nos encontrábamos en un entorno estático, con páginas en HTMLque sufrían pocas actualizaciones y no tenían interacción con el usuario. La Web 2.0 es la transiciónque se ha dado de aplicaciones tradicionales hacia aplicaciones que funcionan a través del

Page 23: Antologia de Programacion Web

Programación Web Unidad I.

L.I. Esteban Sánchez Mendoza Página 22

webenfocadas al usuario final. Se trata de aplicaciones que generen colaboración y de servicios quereemplacen las aplicaciones de escritorio.

Todo inició cuando Dale Dougherty de O’Reilly Media utilizó este término en unaconferencia en la que compartió una lluvia de ideas junto a Craig Cline de Media Live? en la quehablaba del renacimiento y evolución de la web. Constantemente estaban surgiendo nuevasaplicaciones y sitios con sorprendentes funcionalidades. Y así se dio la pauta para la Web 2.0conference de 2004. Esta conferencia no solo fue exitosa sino que ya tuvo seguimiento en la Web2.0 Conference del 2005 celebrada en Octubre. En la charla inicial del Web Conference se habló delos principios que tenían las aplicaciones Web 2.0:

La web es la plataforma La información es el procesador Efectos de la red movidos poruna arquitectura de participación. La innovación surge de características distribuidas pordesarrolladores independientes. El fin del círculo de adopción de software (“Servicios en betaperpetuo”) La Web 2.0 con ejemplos La forma más fácil de comprender lo que significa la Web 2.0es a través de ejemplos. Podemos comparar servicios web que marcan claramente la evoluciónhacia el Web 2.0

1.5 Hojas de estilo en cascada e introducción al XML.

¿Qué es CSS?

CSS es un lenguaje sencillo para la aplicación de estilos a un elemento XML. Undocumento XML puede estar formateado de muchas diferentes formas y propósitos por lo que seríamuy útil utilizar un sólo documento XML y diferentes posibles formateos dependiendo del uso que sele vaya a dar al documento.. CSS, Cascading Style Sheets, hojas de estilo en cascada, fueintroducido en 1996 como el standar para añadir información de estilo a los documentos HTML. Peroeste uso estaba restringido sólo a las etiquetas propias de HTML. Con XML estas reglas de estilopueden aplicarse a todos los elementos. CSS tiene dos versiones denominadas CSS1 y CSS2aparecidas en 1996 y 1998 respectivamente. Aunque el problema en este caso no es el standar,sino el procesamiento de este puesto que en la actualidad no todos los navegadores están

Page 24: Antologia de Programacion Web

Programación Web Unidad I.

L.I. Esteban Sánchez Mendoza Página 23

preparados para su procesamiento. CSS se expresa mediante reglas en un fichero de texto plano.Cada regla contiene el nombre del elemento al que se aplica y el estilo definido.

CSS para HTML vs CSS para XML Las principales diferencias son:

• Los elementos a los que se les pueden asignar una regla de estilo no estánlimitados.

• Los navegadores HTML no entienden e procesamiento de instrucciones,simplemente la hoja de estilos se incluye como un ta style.

• Los navegadores HTML tienen un formateo restringido, mientras que XML no.Cómo especificar un fichero CSS Para poder visualizar un documento XML esnecesario especificar qué formato se debe utilizar. Para este propósito se utiliza lainstrucción xml-stylesheet De este modo el fichero de estilos se incluye en eldocumento XML. La instrucción posee dos atributos.

• href: indica la dirección absoluta o relativa donde se encuentra el fichero de estilos.En este caso el valor de href podría haber sido"http://geneura.ugr.es/~maribel/xml/css/mi_fichero.css". En el ejemplo el fichero sedenomina mi_fichero.css y debe encontrarse en el mismo directorio que el queestamos escribiendo.

• type: Representa el MIME tipo que se va a utilizar que será text/css para un ficheroCSS.

ESTILOS EN CASCADAA un mismo fichero es posible adjuntar más de un fichero de estilos, y esto puede

provocar que un mismo elemento posea varias reglas de estilo asignadas y contradictorias entre si,por lo que se determina un orden de aplicación de estas reglas denominado estilos en cascada.Existen varias formas de asignar un fichero de estilo:

• xml-stylesheet.

• La directiva @import.

Page 25: Antologia de Programacion Web

Programación Web Unidad I.

L.I. Esteban Sánchez Mendoza Página 24

• Utilizando el browser ya sea para utilizar los estilos por defecto o para utilizar unfichero de estilos específico.

La primera forma está clara. Respecto a la segunda debe incluirse en la primera líneadel fichero css y el formato es el siguiente: @import url(direccion relativa o absoluta); El orden deimportación de los ficheros de estilos es el orden de las declaraciones, y as referencias circulares noestán permitidas. El orden en el que se aplican las reglas es muy sencillo. Generalmente si existenmás de una regla para un mismo elemento, se aplica la regla más específica. Por ejemplo: En unaregla con un atributo ID y CLASS tendría preferencia la aplicación del ID primero y despues de laclase y en su defecto la regla del elemento general y sino las reglas que rigen el elemento padre y sino existen las reglas generales de estilo del navegador. En concreto se aplica:

• Reglas del autor.

• Reglas importadas.

• Orden de reglas en el fichero css.

Page 26: Antologia de Programacion Web

Unidad II.Desarrollo de Aplicaciones Web

Objetivo:

Comprenderá los conceptos y elementos

básicos que involucra el desarrollo de

aplicaciones Web

Page 27: Antologia de Programacion Web

Programación Web Unidad II

L.I. Esteban Sánchez Mendoza Página 25

Desarrollo de aplicaciones Web

El diseño y desarrollo de aplicaciones web consiste en implementar sus necesidades,objetivos o ideas en Internet utilizando las tecnologías más idóneas según su proyecto.

Las aplicaciones web ofrecen servicios a los usuarios de Internet que accedenutilizando un navegador web como I. Explorer, Firefox entre otros, dirigiéndose a una dirección deInternet donde obtendrán los servicios que buscan.

2.1 Arquitectura de las aplicaciones Web

Es un SI donde una gran cantidad de datos volátiles, altamente estructurados, van a serconsultados, procesados y analizados mediante navegadores.

Una de las principales características va a ser su alto grado de interacción con elusuario, y el diseño de su interfaz debe ser claro, simple y debe estar estructurado de tal maneraque sea orientativo para cada tipo de usuarios.

Existen diferentes tipos de arquitectura, las cuales son:

Arquitectura de dos niveles:

Es la más simple, se tiene el nivel del “Cliente” y el nivel del “Servidor”.

Page 28: Antologia de Programacion Web

Programación Web Unidad II

L.I. Esteban Sánchez Mendoza Página 26

Arquitectura Web de tres niveles:

El primer nivel consiste en la capa de presentación que incluye no sólo el navegador,sino también el servidor web que es el responsable de dar a los datos un formato adecuado. Elsegundo nivel está referido habitualmente a algún tipo de programa o script. Finalmente, el tercernivel proporciona al segundo los datos necesarios para su ejecución.

Arquitectura MVC:

La arquitectura Modelo-View-Controller surgió como patrón arquitectónico para eldesarrollo de interfaces gráficos de usuario en entornos Smalltalk. Su concepto se basaba enseparar el modelo de datos de la aplicación de su representación de cara al usuario y de lainteracción de éste con la aplicación, mediante la división de la aplicación en tres partesfundamentales:

El modelo, que contiene la lógica de negocio de la aplicación. La vista, que muestra al usuario la información que éste necesita. El controlador, que recibe e interpreta la interacción del usuario, actuando sobre

modelo y vista de manera adecuada para provocar cambios de estado en larepresentación interna de los datos, así como en su visualización.

Page 29: Antologia de Programacion Web

Programación Web Unidad II

L.I. Esteban Sánchez Mendoza Página 27

Esta arquitectura ha demostrado ser muy apropiada para las aplicaciones web yespecialmente adaptarse bien a las tecnologías proporcionadas por la plataforma J2EE, de maneraque:

El modelo, conteniendo lógica de negocio, sería modelado por un conjunto de clasesJava, existiendo dos claras alternativas de implementación, utilizando objetos javatradicionales llamados POJOs (Plain Old Java Objects) o bien utilizando EJB (Enterprise

JavaBeans) en sistemas con mayores necesidades de concurrencia o distribución. La vista proporcionará una serie de páginas web dinámicamente al cliente, siendo para

él simples páginas HTML. Existen múltiples frameworks que generan estas páginas weba partir de distintos formatos, siendo el más extendido el de páginas JSP (JavaServer

Pages), que mediante un conjunto de etiquetas o tags XML proporcionan un interfazsencillo y adecuado a clases Java y objetos proporcionados por el servidor deaplicaciones. Esto permite que sean sencillas de desarrollar por personas conconocimientos de HTML. Entre estos tags tiene mención la librería estándar JSTL(JavaServer Pages Standard Tag Library) que proporciona una gran funcionalidad yversatilidad.

El funcionamiento de una aplicación web J2EE que utilice el patrón arquitectural MVCse puede descomponer en una serie de pasos:

El usuario realiza una acción en su navegador, que llega al servidor mediante una peticiónHTTP y es recibida por un servlet (controlador). Esa petición es interpretada y se transformaen la ejecución de código java que delegará al modelo la ejecución de una acción de éste.

El modelo recibe las peticiones del controlador, a través de un interfaz o fachada queencapsulará y ocultará la complejidad del modelo al controlador. El resultado de esa peticiónserá devuelto al controlador.

El controlador recibe del modelo el resultado, y en función de éste, selecciona la vista queserá mostrada al usuario, y le proporcionará los datos recibidos del modelo y otros datosnecesarios para su transformación a HTML. Una vez hecho esto el control pasa a la vistapara la realización de esa transformación.

Page 30: Antologia de Programacion Web

Programación Web Unidad II

L.I. Esteban Sánchez Mendoza Página 28

En la vista se realiza la transformación tras recibir los datos del controlador, elaborandola respuesta HTML adecuada para que el usuario la visualice.

Ventajas:

Al separar de manera clara la lógica de negocio (modelo) de la vista permite la reusabilidaddel modelo, de modo que la misma implementación de la lógica de negocio que maneja unaaplicación pueda ser usado en otras aplicaciones, sean éstas web o no.

Permite una sencilla división de roles, dejando que sean diseñadores gráficos sinconocimientos de programación los que se encarguen de la realización de la capa vista, sinnecesidad de mezclar código Java entre el código visual que desarrollen (tan sólo utilizandoalgunos tags, no muy diferentes de los usados en el código HTML).

Figura 2.3 MVC o Modelo-Vista-Controlador.

Page 31: Antologia de Programacion Web

Programación Web Unidad II

L.I. Esteban Sánchez Mendoza Página 29

2.2 Lenguajes de programación del lado del clienteLos programas del lado del cliente están incluidos dentro de la página HTML, se

descargan del servidor junto con este.

Un lenguaje del lado cliente es totalmente independiente del servidor, lo cual permiteque la página pueda ser albergada en cualquier sitio. Los programas se ejecutan dentro del ámbitodel browser.Tipos de lenguajes de programación del lado del cliente:

JavaScript

Es un lenguaje de programación que realiza acciones dentro del ámbito de una páginaweb. Su compatibilidad con la mayoría de los navegadores modernos, lo posiciona como el lenguajede programación del lado del cliente más utilizado. Con JavaScript podemos crear efectosespeciales en las páginas y definir interacción con el usuario. El navegador (browser) del cliente esel encargado de interpretar las instrucciones JavaScript y ejecutarlas para realizar estos efectos einteractividades, de modo que el mayor recurso, y tal vez el único, con que cuenta este lenguaje esel propio navegador.

Visual Basic Script

Es un lenguaje de programación de scripts del lado del cliente, sólo compatible conInternet Explorer. Es por ello se usa poco. Está basado en Visual Basic de Microsoft. Tanto susintaxis y modo de operación es una versión reducida del primero. El modo de funcionamiento deVisual Basic Script para construir efectos especiales en páginas web es muy similar al utilizado enJavaScript y los recursos a los que se puede acceder también son los mismos: el navegador.

Page 32: Antologia de Programacion Web

Programación Web Unidad II

L.I. Esteban Sánchez Mendoza Página 30

Applets de Java

Son programas hechos en Java, que se transfieren con las páginas web y que elnavegador ejecuta en el espacio de la página. Los applets son más difíciles de programar que losscripts en JavaScript y requerirán conocimientos medios del lenguaje Java. La principal ventaja deutilizar applets consiste en que son independientes del navegador, del sistema operativo ymultiplataforma.

Flash

Es un programa multimedia de Adobe que se utiliza para crear presentacionesanimadas. Se trata de una aplicación “del lado del cliente” que es leída por los principalesnavegadores. Las animaciones se realizan a partir de vectores y de imágenes en base a píxeles(llamadas “raster graphics”) y pueden incluir audio y video. Este programa es uno de los másutilizados para animar sitios Web y permitir la interactividad.Otros lenguajes del lado del cliente son:

Navegadores para Web. HTML. Vbscript. XML.

2.3. Lenguajes de programación del lado del servidor

Los lenguajes de lado servidor son aquellos lenguajes que son reconocidos, ejecutadose interpretados por el propio servidor y que se envían al cliente en un formato comprensible para él.Por otro lado, los lenguajes de lado cliente son aquellos que pueden ser directamente "digeridos" porel navegador y no necesitan un pre-tratamiento.

Page 33: Antologia de Programacion Web

Programación Web Unidad II

L.I. Esteban Sánchez Mendoza Página 31

Se ejecutan en el servidor de Web y son dependientes de la plataforma del servidor.

La programación del lado del servidor es una tecnología que consiste en elprocesamiento de una petición de un usuario mediante la interpretación de un script en el servidor

web para generar páginas HTML dinámicamente como respuesta.

Se usan para acceder a recursos del servidor, como bases de datos y generación decontenido dinámico para las páginas.

Page 34: Antologia de Programacion Web

Programación Web Unidad II

L.I. Esteban Sánchez Mendoza Página 32

Por ejemplo, el ámbito de ejecución de una página ASP.NET.

Tipos de lenguajes del lado del cliente:

CGI

Es el sistema más antiguo que existe para la programación de las páginas dinámicas deservidor. Actualmente se encuentra un poco desfasado por diversas razones entre las que destacala dificultad con la que se desarrollan los programas y la pesada carga que supone para el servidorque los ejecuta.

Los CGI se escriben habitualmente en el lenguaje Perl, sin embargo, otros lenguajescomo C, C++ o Visual Basic pueden ser también empleados para construirlos.

Page 35: Antologia de Programacion Web

Programación Web Unidad II

L.I. Esteban Sánchez Mendoza Página 33

PERL

Perl es un lenguaje de programación interpretado, al igual que muchos otros lenguajesde Internet como JavaScript o ASP. Esto quiere decir que el código de los scripts en Perl no secompila sino que cada vez que se quiere ejecutar se lee el código y se pone en marchainterpretando lo que hay escrito. Además es extensible a partir de otros lenguajes, ya que desde Perlpodremos hacer llamadas a subprogramas escritos en otros lenguajes. También desde otroslenguajes podremos ejecutar código Perl. ASP

ASP (Active Server Pages) es la tecnología desarrollada por Microsoft para la creaciónde páginas dinámicas del servidor. ASP se escribe en la misma página web, utilizando el lenguajeVisual Basic Script o Jscript (JavaScript de Microsoft).

PHP

PHP es el acrónimo de Hipertext Preprocesor. Es un lenguaje de programación del ladodel servidor gratuito e independiente de plataforma, rápido, con una gran librería de funciones ymucha documentación.

JSP

JSP es un acrónimo de Java Server Pages, que en castellano vendría a decir algocomo Páginas de Servidor Java. Es, pues, una tecnología orientada a crear páginas web conprogramación en Java. Con JSP podemos crear aplicaciones web que se ejecuten en variadosservidores web, de múltiples plataformas, ya que Java es en esencia un lenguaje multiplataforma.Por tanto, las JSP podremos escribirlas con nuestro editor HTML/XML habitual.Otros lenguajes del lado del servidor:

Ruby. Python. XML.

Page 36: Antologia de Programacion Web

Programación Web Unidad II

L.I. Esteban Sánchez Mendoza Página 34

2.4 Ambientes para el desarrollo de aplicaciones Web

Es un programa compuesto por un conjunto de herramientas para un programador.Puede dedicarse en exclusiva a un sólo lenguaje de programación o bien, poder utilizarse paravarios. Consiste en un editor de código, un compilador, un depurador y un constructor de interfazgráfica. Su meta es proveer un marco de trabajo amigable para los programadores de algún lenguajede programación.

Los IDE (ambientes integrados de desarrollo) para aplicaciones Web son muynumerosos.

Considerar los que permitan trabajar con los diferentes lenguajes para Web.

Algunos son específicos para lenguajes del lado del servidor. Por ejemplo, Visual Studiosolo soporta ASP.NET del lado del servidor.

Existen IDE’s de buena cantidad, libres y gratuitos de buena calidad.

Algunos ejemplos de IDE para Web: Microsoft Visual Studio.

Microsoft Web Developer Express.

Mono (para ASP.NET).

NetBeans.

Jbuilder.

Eclipse.

2.5 Metodología para el desarrollo de aplicaciones Web

Ciclo de vida clásico. Pressman, “adopta” esta metodología para el desarrollo de Web,en lo que él llama la “Ingeniería Web”: En donde utiliza la siguiente metodología:

Formulación. Planificación. Análisis (contenido, interacción, funcional, configuración).

Page 37: Antologia de Programacion Web

Programación Web Unidad II

L.I. Esteban Sánchez Mendoza Página 35

Diseño (arquitectónico, navegación, interfaz, de base de datos). Implementación. Pruebas.

UWE UML (UML-Based Web Engineering) es una metodología de desarrollo deaplicaciones web, utilizada en la ingeniería web, prestando especial atención en sistematización ypersonalización (sistemas adaptativos).El método UWE UML consta de seis modelos:

Modelo de casos de uso para capturar los requisitos del sistema.

Modelo conceptual para el contenido (modelo del dominio).

Modelo de usuario: modelo de navegación que incluye modelos estáticos y dinámicos.

Modelo de estructura de presentación, modelo de flujo de presentación.

Modelo abstracto de interfaz de usuario y modelo de ciclo de vida del objeto.

Modelo de adaptación.

Tipos de metodologías:

EORM

Es una Metodología de Relación entre Objeto (Enhanced Object RelationshipMethodology), definida por un proceso iterativo que se concentra en el modelado orientado a objetospor la representación de relaciones entre ellos (acoplamientos) como objetos, es por ello que fue unade las primeras propuestas para Web centrada en el paradigma de la orientación a objetos.

Page 38: Antologia de Programacion Web

Programación Web Unidad II

L.I. Esteban Sánchez Mendoza Página 36

Esta metodología tiene las siguientes ventajas:

Encajamiento de relaciones semánticas en construcciones extensibles, pudiendoparticipar en otras relaciones y ser parte de bibliotecas reutilizables. EORM distingue dos tipos derelaciones orientadas a objetos: Relaciones de generalización y relaciones definidas por el usuario.Mientras que los primeros se concentran como en la semántica asociada entre ellas, los segundosconfían totalmente en la especificación del usuario.

La semántica de vínculos básicos de clases que se manejan, son las siguientes de maneraresumida:

SimpleLink: Es la raíz vínculo básica de clase que proporciona capacidad de interconexión,incluido funciones para la creación, supresión y recorrido.

NavigationalLink: Proporciona mecanismos para enlaces hipermedia que incluye elalmacenamiento de creación de tiempo e información histórica. Se hereda de simpleLink.

NodeToNode: Es un vínculo que hereda de NavigationalLink y proporciona a un objetoHipermedia vínculo de funcionalidad.

SpanToNode: Se hereda de NavigationalLink. Vincula el contenido de un objeto a otroobjeto.

StructureLink: Se hereda de SimpleLink y la raíz de los vínculos estructurales. Se insertadespués creación en el contexto estructural.

SetLink: Es una structureLink que proporciona acceso a un objeto en una desordenadacolección de objetos.

ListLink: Es un structureLink que proporciona acceso a un objeto en una colección ordenadade objetos.

Page 39: Antologia de Programacion Web

Programación Web Unidad II

L.I. Esteban Sánchez Mendoza Página 37

EORM consta de tres fases:

Fase de Análisis: Se trata de orientar a objetos al sistema, sin considerar los aspectoshipermediales del mismo, obteniéndose para ello un Modelo de Objetos con la misma notaciónutilizada en OMT, que refleje la estructura de la información (mediante clases de objetos conatributos y relaciones entre las clases) y el comportamiento del sistema (a través de los métodosasociados a las clases de objetos).

Fase de Diseño: Procede a modificar el modelo de objetos obtenido durante el análisisañadiendo la semántica apropiada a las relaciones entre clases de objetos para convertirlas enenlaces hipermedia, obteniendo finalmente un modelo enriquecido (EORM), en el que se reflejetanto la estructura de la información (modelo abstracto hipermedial compuesto de nodos y enlaces)como las posibilidades de navegación ofrecidas por el sistema sobre dicha estructura, para lo cualexistirá una librería de clases de enlaces, donde se especifican las posibles operaciones asociadas acada enlace de un hiperdocumento, que serán de tipo crear, eliminar, atravesar, siguiente, previoetc., así como sus posibles atributos (fecha de creación del enlace, estilo de presentación enpantalla, restricciones de acceso, etc.).

Fase de Construcción: Se transforman los esquemas en código y son guardados enuna Base de Datos Orientada a Objetos, al elaborar formularios de consulta de las clases con laayuda de un editor gráfico de interfaces. Se genera el código fuente (por ejemplo C#)correspondiente a cada clase y se prepara la Interface Gráfica de Usuario.

OOHDM

Es un Método de Diseño de Desarrollo en Hipermedia Orientado a Objetos (Object-Oriented Hypermedia Design Method) y abarca las cuatro actividades: El modelado conceptual,diseño navegacional, diseño abstracto de interfaz y la puesta en práctica. Estas actividades serealizan en una mezcla de estilo incremental, iterativo y basado en prototipos de desarrollo.

Page 40: Antologia de Programacion Web

Programación Web Unidad II

L.I. Esteban Sánchez Mendoza Página 38

Consta de cuatro fases:

Fase Conceptual: durante esta actividad se construye un esquema conceptualrepresentado por los objetos del dominio, las relaciones y colaboraciones existentes establecidasentre ellos. En las aplicaciones hipermedia convencionales, cuyos componentes no son modificadosdurante la ejecución, se podría usar un modelo de datos semántico estructural (como el modelo deentidades y relaciones). De este modo, en los casos en que la información base pueda cambiardinámicamente o se intenten ejecutar cálculos complejos, se necesitará enriquecer elcomportamiento del modelo de objetos En OOHDM, el esquema conceptual está construido porclases, relaciones y subsistemas. Las clases son descritas como en los modelos orientados aobjetos tradicionales. Sin embargo, los atributos pueden ser de múltiples tipos para representarperspectivas diferentes de las mismas entidades del mundo real.

Page 41: Antologia de Programacion Web

Programación Web Unidad II

L.I. Esteban Sánchez Mendoza Página 39

Fase Navegacional: se debe tener en mente que la generación de aplicaciones Webfue pensada para realizar navegación a través del espacio de información, utilizando un simplemodelo de datos de hipermedia. En OOHDM, la navegación es considerada un paso crítico en eldiseño aplicaciones. Un modelo navegacional es construido como una vista sobre un diseñoconceptual, admitiendo la construcción de modelos diferentes de acuerdo con los distinto perfiles deusuarios. Cada modelo navegacional provee una vista subjetiva del diseño conceptual. El diseño denavegación es expresado en dos esquemas: el esquema de clases navegacionales y el esquema decontextos navegacionales. En OOHDM existe un conjunto de tipos predefinidos de clasesnavegacionales: nodos, enlaces y estructuras de acceso. La semántica de los nodos y los enlacesson las tradicionales de las aplicaciones hipermedia, y las estructuras de acceso, tales como índiceso recorridos guiados, representan los posibles caminos de acceso a los nodos. La principalestructura primitiva del espacio navegacional es la noción de contexto navegacional. Un contextonavegacional es un conjunto de nodos, enlaces, clases de contextos, y otros contextosnavegacionales (contextos anidados). Pueden ser definidos por comprensión o extensión, o porenumeración de sus miembros. Los contextos navegacionales juegan un rol similar a las coleccionesy fueron inspirados sobre el concepto de contextos anidados. Organizan el espacio navegacional enconjuntos convenientes que pueden ser recorridos en un orden particular y que deberían serdefinidos como caminos para ayudar al usuario a lograr la tarea deseada. Los nodos sonenriquecidos con un conjunto de clases especiales que permiten observar y presentar sus atributos(incluidos las anclas), así como métodos (comportamiento) cuando se navega en un particularcontexto.

Fase de Interfaz Abstracta: Las estructuras navegacionales son definidas y se debenespecificar los aspectos de interfaz. Esto significa definir la forma en la cual los objetosnavegacionales pueden aparecer, de cómo los objetos de interfaz activarán la navegación y el restode la funcionalidad de la aplicación, qué transformaciones de la interfaz son pertinentes y cuándo esnecesario realizarlas. Una clara separación entre diseño navegacional y diseño de interfaz abstractapermite construir diferentes interfaces para el mismo modelo navegacional, dejando un alto grado deindependencia de la tecnología de interfaz de usuario.

Page 42: Antologia de Programacion Web

Programación Web Unidad II

L.I. Esteban Sánchez Mendoza Página 40

El aspecto de la interfaz de usuario de aplicaciones interactivas (en particular lasaplicaciones Web) es un punto crítico en el desarrollo que las modernas metodologías tienden adescuidar. En OOHDM se utiliza el diseño de interfaz abstracta para describir la interfaz del usuariode la aplicación de hipermedia. El modelo de interfaz ADVs (Vista de Datos Abstracta) especifica laorganización y comportamiento de la interfaz, pero la apariencia física real o de los atributos, y ladisposición de las propiedades de las ADVs en la pantalla real son hechas en la fase deimplementación.

Fase Implementación: Se tendrá en cuenta que el diseñador debe ya implementar eldiseño. Hasta ahora, todos los modelos fueron construidos en forma independiente de la plataformade implementación; en esta fase es tenido en cuenta el entorno particular en el cual se va a correr laaplicación. Al llegar a esta fase, el primer paso que debe realizar el diseñador es definir los ítems deinformación que son parte del dominio del problema. Debe identificar también, cómo sonorganizados los ítems de acuerdo con el perfil del usuario y su tarea; decidir qué interfaz debería very cómo debería comportarse. A fin de implementar todo en un entorno Web, el diseñador debedecidir además qué información debe ser almacenada.

Construir la interfaz de una aplicación Web es una tarea compleja; no sólo se necesitaespecificar cuáles son los objetos de la interfaz que deberían ser implementados, sino también lamanera en la cual interactuarán con el resto de la aplicación.

OOHDM propone un conjunto de tareas que en principio pueden involucrar mayorescostos de diseño, pero que a mediano y largo plazo reducen notablemente los tiempos dedesarrollo al tener como objetivo principal la reusabilidad de diseño, y así simplificar la evolución yel mantenimiento.

SOHDM

Es un Método que Desarrolla Diseño en panoramas (scenario) Orientada a Objetosen Hipermedia (Scenario - based Object-oriented Hypermedia Design Methodology). Presenta lanecesidad de disponer de un proceso que permita capturar las necesidades del sistema. Para ello,propone el uso de escenarios.

Page 43: Antologia de Programacion Web

Programación Web Unidad II

L.I. Esteban Sánchez Mendoza Página 41

Consta de seis fases:

Fase de Análisis: Se realiza un estudio de las necesidades de la aplicación, delentorno de trabajo y de los actores. La finalidad principal de esta fase es conseguir los escenariosque representen las actividades que se pueden llevar a cabo en el sistema.

Fase de Modelado de Objetos: Se desarrolla un diagrama de clases que representa laestructura conceptual del sistema.

Fase de Diseño de Vistas: Se reorganizan los objetos en unidades navegacionales,que representan una vista de los objetos del sistema.

Fase de Diseño Navegacional: Se enriquecen dichas vistas definiendo los enlacese hiperenlaces que existen en el sistema.

Fase de Diseño de la Implementación: Se diseñan las páginas, la interfaz y la basede datos del sistema.

Fase de Construcción: Se realiza la construcción de la base de datos del sistema. Lacual que se implementará a la aplicación.

En conclusión la metodología SOHDM es una propuesta nueva que cubre en mayorparte todas las fases del proceso de desarrollo, aunque no toma en cuenta la implantación y laspruebas, proponiéndonos un proceso cíclico de tal forma que al realizar una fase se puede regresara alguna de las anteriores para refinarla y adaptarla mejor.

WSDM

Es un Método de Diseño para Sitios Web (Web Site Design Method), donde hay unacercamiento al usuario que define los objetos de información basado en sus requisitos deinformación para el uso de la Web. En este método se definen una aplicación Web a partir de losdiferentes grupos de usuarios que vaya a reconocer el sistema.

Page 44: Antologia de Programacion Web

Programación Web Unidad II

L.I. Esteban Sánchez Mendoza Página 42

Consta de cuatro fases:

Fase de Modelo de Usuario: Se intenta detectar los perfiles de usuarios para loscuales se construye la aplicación. Durante esta fase es necesario determinar: ¿Quién es el públicoobjetivo? ¿Cómo será la visión de su sitio Web? ¿Cuáles son los objetivos de marketing de laempresa? ¿Cuáles son los objetivos de su sitio web? ¿Qué mensaje tiene su compañía quieretransmitir? ¿Cuál es el campo del negocio? ¿Cuáles son los estándares de la industria?

Una vez que tenemos una comprensión de su negocio y sus objetivos de la empresa, quehará recomendaciones a la mejor alcanzar sus metas. Nuestro proceso de planificación estratégicase creará un plan inicial de su sitio web. Se divide en dos sub-fases siguientes: Clasificación de usuarios: Se deben identificar y clasificar a los usuarios que van a hacer

uso del sistema. Para ello, WSDM propone el estudio del entorno de la organización dondese vaya a implantar el sistema y los procesos que se vayan a generar, describiendo lasrelaciones entre usuarios y actividades que realizan estos usuarios.

Descripción de los grupos de usuarios: Se describen con más detalles los grupos deusuarios detectados en la etapa anterior. Para ello, se debe elaborar un diccionario dedatos, en principio con formato libre, en el que indican los requisitos de almacenamiento deinformación, requisitos funcionales y de seguridad para cada grupo de usuarios.

Fase de Diseño Conceptual: Se desarrolla el modelado conceptual no tiene elmismo significado que en OOHDM. Durante el modelado conceptual se realizan dos tareas a la vez:el modelado de objetos, que es lo que en OOHDM se llama modelo conceptual y el diseño de lanavegación, que coincide con la idea de su diseño navegacional, Este tipo de diseño de navegaciónen aplicaciones Web tiene una estructura muy jerárquica.

Page 45: Antologia de Programacion Web

Programación Web Unidad II

L.I. Esteban Sánchez Mendoza Página 43

Pocas recomendaciones se dan en esta etapa, tales como la utilización de páginasde índice, derecho de información dividida en diversos tamaños, el uso de contexto y de lainformación y el uso de señales de navegación. Este modelo distingue tres tipos de componentes denavegación, información y externos. Cada una consta de tres capas: contexto, navegación y capasde información. En WSDM puede existir más de un modelo de navegación, dependiendo de los rolesde usuario detectados durante la primera fase.

Fase de Diseño de Implementación: Se modela la interfaz para cada rol de usuario,Ahora que se tiene una versión definitiva del plan se pueda comenzar con la construcción del sitioweb.

RNA

Es un método de Análisis de Navegación Relacional (Relationship NavigationalAnalysis), que define una secuencia de pasos que se utilizarán para el desarrollo de la Web. Esespecialmente útil para uso de la Web creados en base de sistema de herencia.

La propuesta de RNA es quizás una de las que más ha resaltado la necesidad detrabajar con la especificación de requisitos, incluyendo tareas como el análisis del entorno y de loselementos de interés. Además, resulta interesante pues plantea la necesidad de analizar losrequisitos conceptuales de manera independiente a los navegacionales.Consta de cinco fases:

Fase de Definición de Elementos: Aquí prosiguen los elementos de interés en la cualse han listando dichos elementos de la aplicación. Por elementos de interés se entienden losdocumentos, las pantallas que se van a requerir, la información, etc.

Fase de Análisis del Conocimiento: Se desarrolla un esquema que represente a laaplicación. Para ello RNA propone identificar los objetos, los procesos y las operaciones que se vana poder realizar en la aplicación, así como las relaciones que se producen entre estos elementos

Fase de Análisis de Navegación: Se verifica que el esquema obtenido en la faseanterior sea enriquecido con las posibilidades de navegación dentro de la aplicación.

Page 46: Antologia de Programacion Web

Programación Web Unidad II

L.I. Esteban Sánchez Mendoza Página 44

Fase de Implementación del Análisis: Una vez obtenido el esquema final en el que yase encuentran incluidos los aspectos de navegación, se pasa el esquema a un lenguaje entendiblepor la máquina.

2.6. Aspecto de seguridad

Las aplicaciones Web están más expuestas a ataques.Se pueden tener ataques en tres niveles:

A la computadora del usuario.

Al servidor.

A la información en tránsito.

La seguridad en Web tiene 3 etapas primarias:

Seguridad de la computadora del usuario:

Los usuarios deben contar con navegadores y plataformas seguras, libres de virus yvulnerabilidades. También debe garantizarse la privacidad de los datos del usuario. Seguridad del servidor Web y de los datos almacenados ahí

Se debe garantizar la operación continua del servidor, que los datos no seanmodificados sin autorización (integridad) y que la información sólo sea distribuida a las personasautorizadas (control de acceso). Seguridad de la información que viaja entre el servidor Web y el usuario.

Garantizar que la información en tránsito no sea leída (confidencialidad), modificada odestruida por terceros. También es importante asegurar que el enlace entre cliente y servidor nopueda interrumpirse fácilmente (disponibilidad).

Page 47: Antologia de Programacion Web

Programación Web Unidad II

L.I. Esteban Sánchez Mendoza Página 45

Hay 3 tipos de recomendaciones que se deben tener en cuenta, los cuales son:

Recomendaciones: Asegurar el servidor

Se deben considerar los siguientes puntos: Asegurar el servidor en una forma fundamental: el sistema operativo, ya sea por medio de

actualizaciones (parches) y habilitando los mecanismos propios de la plataforma.

Garantizar la seguridad del servidor Web propiamente (IIS, Apache, etc.)

Auditar las aplicaciones que interactúan en las dos capas anteriores (módulos,bibliotecas).

Recomendaciones: Asegurar la información en tránsito.

Esto se puede lograr por diversos medios:

Asegurando la red físicamente (switches en lugar de hubs).

Esconder la información (estenografía).

Cifrar la información (criptografía) por medio de algoritmos diversos (SSL, VPNs).

Recomendaciones: Asegurar el equipo del usuario

Vulnerar el equipo del usuario quizás no tenga el impacto de vulnerar el servidor, sin embargo es unproblema más difícil de erradicar (1 servidor, 5000 clientes):

Aplicar actualizaciones (parches) al sistema

Operativo.

Uso de antivirus, firewalls personales.

Educación de los usuarios.

Page 48: Antologia de Programacion Web

Unidad III.Programación del lado del Servidor

Objetivo:

Desarrollará aplicaciones Web del lado del servidor conacceso a base de datos.

Page 49: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 47

PROGRAMACIÓN DEL LADO DEL SERVIDOR.

3.1 Procesamiento del lado del servidor.La funcionalidad de lado del Servidor se refiere a la habilidad de los servidores de

correr programas que interactúan con las páginas de los sitios web. Estos pequeños programas sonllamados scripts y residen en los servidores web y te permitirá tener interactividad en tus sitios web.Por ejemplo, si en tu sitio web necesitas que todos los usuarios entren con contraseña, la base dedatos que contiene los nombres de usuario y contraseñas para tu sitio web, y el programa que ofrecela autenticación de acceso se basará en el servidor web y no se encuentra en la página web.

• Funciona del lado del servidor, es decir que con cualquier navegador de Internetpodremos acceder a toda la potencia de PHP, pues éste arroja el resultado al cliente sin necesidadde que éste interprete algo más que simple y común HTML.

• Código abierto (Open source), libertad de distribución y permiso para uso comercialsin costo, aplastando de esta manera al ASP de Microsoft, de licenciamiento comercial. Además,(esto podría generarme una pelea con habbi ;-)) apostaría por la velocidad de PHP por sobre la deASP para los mismos procesos.

• Genera páginas dinámicas. Esto significa que cada página solicitada al servidor esprocesada en el momento como un requerimiento individual, y actualizado al milisiegundo. Inutil parapáginas estáticas, genial para páginas en donde los datos se actualizan constantemente (que tenganacceso a base de datos o ejecuten procesos de cálculo).

• Simplicidad de programación. Un lenguaje de script realmente cómodo de usar por susencillez y claridad.

Cuando nosotros seleccionamos un enlace hipertexto, en realidad lo que pasa es queestablecemos una petición de un archivo HTML residente en el servidor (una computadora que seencuentra continuamente conectado a la red) el cual es enviado e interpretado por nuestronavegador (el cliente).

Page 50: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 48

Así pues, podemos hablar de lenguajes de lado servidor que son aquellos lenguajesque son reconocidos, ejecutados e interpretados por el propio servidor y que se envían al cliente enun formato comprensible para él, por ejemplo: ASP, PHP, JSP.

Por otro lado, los lenguajes de lado cliente (entre los cuales no sólo se encuentra elHTML sino también el Java y el JavaScript los cuales son simplemente incluidos en el código HTML)son aquellos que pueden ser directamente "digeridos" por el navegador y no necesitan unpretratamiento.

Page 51: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 49

Lenguajes del lado del servidor

Lenguajes del lado servidor

CGI

Es el sistema más antiguo que existe para la programaciónde las páginas dinámicas de servidor. Actualmente se encuentra un pocodesfasado por diversas razones entre las que destaca la dificultad con laque se desarrollan los programas y la pesada carga que supone para elservidor que los ejecuta.

Los CGI se escriben habitualmente en el lenguaje Perl, sinembargo, otros lenguajes como C, C++ o Visual Basic pueden sertambién empleados para construirlos.

PERL

Perl es un lenguaje de programación interpretado, al igualque muchos otros lenguajes de Internet como Javascript o ASP. Estoquiere decir que el código de los scripts en Perl no se compila sino quecada vez que se quiere ejecutar se lee el código y se pone en marchainterpretando lo que hay escrito. Además es extensible a partir de otroslenguajes, ya que desde Perl podremos hacer llamadas a subprogramasescritos en otros lenguajes. También desde otros lenguajes podremosejecutar código Perl.

Page 52: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 50

ASP

ASP (Active Server Pages) es la tecnología desarrollada porMicrosoft para la creación de páginas dinámicas del servidor. ASP seescribe en la misma página web, utilizando el lenguaje Visual Basic Scripto Jscript (Javascript de Microsoft).

PHP

PHP es el acrónimo de Hipertext Preprocesor. Es unlenguaje de programación del lado del servidor gratuito e independientede plataforma, rápido, con una gran librería de funciones y muchadocumentación.

JSP

JSP es un acrónimo de Java Server Pages, que encastellano vendría a decir algo como Páginas de Servidor Java. Es, pues,una tecnología orientada a crear páginas web con programación en Java.

Con JSP podemos crear aplicaciones web que se ejecutenen variados servidores web, de múltiples plataformas, ya que Java es enesencia un lenguaje multiplataforma. Por tanto, las JSP podremosescribirlas con nuestro editor HTML/XML habitual.

Page 53: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 51

3.2 Conceptos básicos de la herramienta de desarrollo.Una herramienta es un objeto elaborado a fin de facilitar la realización de una tarea

mecánica que requiere de una aplicación correcta de energía. El término herramienta, en sentidoestricto, se emplea para referirse a utensilios resistentes, útiles para realizar trabajos mecánicos querequieren la aplicación de una cierta fuerza física.

Cada herramienta tiene un fin específico y debería ser usado solo con un findeterminado, Sin embargo esto no se cumple en la mayoría de las tareas del quehacer humano ymucho menos en las aplicaciones web. Cuando pensemos en las mejores herramientas para eldesarrollo web es necesario pensar en donde estará alojado nuestro sitio (hosting).

El hosting o alojamiento web es un sistema esencial para el funcionamiento de los sitiosen Internet y es el lugar donde físicamente reside nuestra información. Si tenemos recursosilimitados para tener nuestro propio sitio entonces tendriamos que hacer una gran investigación paraseleccionar las herramientas más sofisticadas. Sin embargo para la mayoría de las aplicacionesdebemos pagar porque nuestra información sea colocada en cierto servidor.

El lugar donde físicamente se almacenara nuestra información determina los lenguajessoportados (cliente, servidor), el gestor de la base de datos y las prestaciones que podremos ofrecera nuestros futuros usuarios.

Sin el afan de romperse las camisas discutiendo este punto, las herramientas queusaremos para desarrollar el sitio, dependen de las preferencias, del acceso a las herramientas("licencias") y la disponibilidad. En resumen cada quien habla como le va en la feria. Si somosexpertos en un X lenguaje y el sistema Operativo de nuestro host no lo soporta, podremos tener lasherramientas más sofisticadas pero no servirán de nada.

Page 54: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 52

Las fases de un desarrollo web, así como los lenguajes de programación usados, sonmuy extensas y variadas, y por ello necesitamos herramientas específicas para cada una de ellas.Conoceremos a continuación las principales herramientas existentes para poder desarrollarfácilmente un proyecto web.

En el desarrollo web tenemos unas herramientas para el diseño, otras para lamaquetación, otras para la programación, y para la depuración. Todas las herramientas que usemosson muy importantes, desde el sistema operativo hasta el comando más insignificante, y por ellodebemos elegir la más adecuada a nuestras necesidades y capacidades.

Sistema Operativo

Para desarrollar una web, lo primero que necesitamos es un Sistema Operativo, comoes lógico, y su elección no es tan trivial. Hay que tener en cuenta las aplicaciones de las que disponeel Sistema Operativo y sus costos.

Si pensamos desarrollar en .NET este solo es soportado por windows y los costos dehospedaje son mas caros que los que soportan Linux.

Page 55: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 53

Fases de desarrollo de una web

Para elegir las herramientas a utilizar, antes debemos identificar las fases del procesoque forman el ciclo de vida de un desarrollo web.

Diseño: consiste en crear esbozos de la web final mediante una herramientagráfica, como Photoshop

Maquetación HTML/CSS: consiste en convertir los esbozos creados en la faseanterior en plantillas HTML, su respectiva hoja de estilos, y las imágenes usadas.Es posible saltarse la fase anterior para comenzar directamente con esta fase,dependiendo de si dominamos herramientas como Photoshop o no.

Programación cliente: consiste básicamente en Javascript. Existen muchaslibrerias de distribución libre como JQUERY que nos aportan verdaderas joyaspara el desarrollo.

Programación servidor: en esta fase, que se desarrolla junto con la anterior,crearemos la aplicación web en un lenguaje de servidor, como puede ser PHP,ASP .NET, Python, Perl, Java, etc.

Depuración: esta fase enlaza la anterior con la siguiente, y es donde haremos laspruebas unitarias, aserciones, trazas, etc.

Pruebas en local: en nuestro servidor local haremos todas las pruebas posibles.Por ejemplo usando wampServer

Subir archivos al hosting: Dependiendo del hosting, podremos usar FTP, SSH,aconsejo usar cuteFTP es una herramienta confiable y versatil.

Pruebas en hosting: realizaremos las últimas pruebas en el servidor del hostingpara comprobar que el cambio de servidor no ha afectado a nada. Para evitarproblemas, nuestro servidor local debe tener exactamente la misma configuraciónque el servidor del hosting. Recuerde probar que sus códigos sean compatibles almenos con Firefox, Safari e Internet explorer

Page 56: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 54

En general podemos usar comercialmente la suite de Adobe que incluye a Dreamwevery sus herramientas de edición un servidor FTP, además de validar nuestros códigos javascript y css.Con el inconveniente de ser una herramienta muy cara.

En contra parte, va versión Joomla! edition de kademar Linux es la adaptación de laversión de Escritorio DVD (Leo) 4.9.1 con la inclusión de los programas necesarios para trabajar conel gestor de contenidos Joomla!.

En esta edición se incluye instalado el gestor de contenidos Joomla, junto con losprogramas necesarios para su funcionamiento totalmente instalados y configurados. Es posibleaprender a usar Joomla! sin necesidad de buscar un servidor de hosting para crear páginas web.Está funcionando en local y no se tiene que pelear con la instalación de todo lo necesario: base dedatos MySql, phpmyadmin, apache.... etc. Todo está ya instalado y configurado, plenamentefuncional para usarlo inmediatamente.

3.3 Operadores.

Los operadores son un componente esencial de cualquier lenguaje de

programación. Con ellos podemos asignar, unir, cambiar o comparar valores de datos, cambiar elflujo del programa, etc.

Los operadores son símbolos que representan operaciones sobre un valor. Vamos aver a continuación los operadores admitidos por PHP agrupados según su utilidad.

Operador de asignación

El símbolo = permite asignar valores a variables:

<?php$ciudad = 'Veracruz';echo $ciudad.' ';$mi_numero = 633;echo $mi_numero;?>

Page 57: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 55

El operador .= asigna valores al contenido de una variable, es equivalente a $var =

$var + 'nuevo valor';

<?php$numeros = "uno, dos, tres";$numeros .= ", cuatro, cinco, seis";// imprime "uno, dos, tres, cuatro, cinco, seis"echo $numeros;?>

Operador de concatenación

Usando el símbolo. concatenamos cadenas

<?php$nombre = "Jorge";$apellido = "Perez";echo "Nombre: ".$nombre." ".$apellido; //Concatenación?>

Operadores aritméticos

Los operadores aritméticos de PHP son similares a los de C, Java y

Javascript. Los símbolos + - / * realizan operaciones de aritmética básica, el símbolo % obtiene el

resto de una división (módulo). Por ejemplo sea $var1 = 10 y $var2 = 5;

Operador Ejemplo ResultadoNegación -$var1 -10Suma $var1 + $var2 15Resta $var1 - $var2 5Multiplicación $var1 * $var2 50División $var1 / $var2 2Módulo $var1 % $var2 0Ejemplo

Page 58: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 56

Operadores abreviados o combinados

Una forma habitual de modificar el contenido de las variables es mediante losoperadores combinados. La siguiente tabla resume los operadores de asignación combinados

Operador Ejemplo Descripción

+= $variable += 10 $variable = $variable + 10;

-= $variable -= 10 $variable = $variable - 10;

*= $variable *= 10 $variable = $variable * 10;

/= $variable /= 10 $variable = $variable / 10;

%= $variable %= 10 $variable = $variable % 10;

.= $variable .= "concatenar" Concatena las cadenas $variable y"concatenar"

Ejemplo

Page 59: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 57

Operadores de incremento - decremento

PHP ofrece soporte de operadores de pre- y post-(incremento o decremento), estilo-C.

Los símbolos ++ y -- aplicados a una variable, permiten incrementar o decrecer su valor. Su efecto

es distinto según se empleen precediendo o siguiendo el nombre de la variable.

Operador Ejemplo EfectoPre-incremento ++$a Incrementa $a en uno y después devuelve a.Post-incremento $a++ Devuelve $a y después incrementa $a en uno.

Pre-decremento --$a Decrece el valor de $a en uno y después devuelve$a.

Post-decremento $a-- Devuelve $a y después decrece su valor en uno.Ejemplo

Page 60: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 58

Nota: Los operadores de incremento/decremento no afectan a los valores

booleanos. Decrementar valores NULL tampoco tiene efecto, aunque incrementarlos resulta en 1.

Operadores de Comparación.

Los operadores de comparación, como su nombre indica, permiten comparar dosvalores.

Operador Ejemplo Cierto si:Igualdad $a == $b $a es igual a $b.Identidad $a === $b $a es igual a $b y además son del mismo tipo

Desigualdad $a != $b $a no es igual a $b.$a !== $b Los operandos no son iguales o del mismo tipo

Menor que $a < $b $a es estrictamente menor que $b.Menor o igual que $a <= $b $a es menor o igual que $b.Mayor que $a > $b $a es estrictamente mayor que $b.Mayor o igual que $a >= $b $a es mayor o igual que $b.Ejemplo

Otro operador condicional es el operador "?:" (o ternario), que

funciona como en C y otros muchos lenguajes:

(expr1) ? (expr2) : (expr3); La expresión toma el valor expr2 si

expr1 se evalúa a cierto, y expr3 si expr1 se evalúa a falso.

Page 61: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 59

Operadores Lógicos

Los operadores lógicos o booleanos se utilizan conjuntamente con

expresiones que devuelven valores lógicos. Con ellos es posible combinar condiciones y evaluarlasen una sola expresión. La sintaxis de estos operadores es la siguiente:

Operador Ejemplo Cierto si:&& $a && $b Ambos son ciertosand $a and $b|| $a || $b Si uno o ambos es ciertoor $a or $bxor $a xor $b Solo si uno de los dos es cierto.! !$a Si $a es FalsaEjemplo

Operador de ejecución

PHP soporta un operador de ejecución: el apóstrofe invertido (``). PHP intentará

ejecutar la instrucción contenida dentro de los apóstrofes invertidos como si fuera un comando delshell; y su salida devuelta como el valor de esta expresión (i.e., no tiene por qué ser simplementevolcada como salida; puede asignarse a una variable).

Page 62: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 60

Ejemplo:

<?php$entorno = `set`;echo "<pre>$entorno</pre>";$entorno = `dir c:`;echo "<pre>$entorno</pre>";?>

Page 63: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 61

Es equivalente a la función shell_exec y por defecto está inhabilitado su uso si

php esta configurado para ejecutarse en safe_mode.

Precedencia de operadores

Cuando una expresión está formada por más de un operador del mismo tipo, PHP laevalúa de izquierda a derecha, pero cuando creamos expresiones que utilizan más de un operadordiferente, no siempre evalúa estas expresiones de la misma forma.

La precedencia de operadores específica cómo se agrupan las expresiones para serevaluadas. La precedencia relativa de los operadores se puede modificar mediante paréntesis en lasexpresiones que se desea evaluar a criterio del programador.

A continuación se presenta en la tabla la precedencia de los operadores de menor amayor.

Asociatividad Operadores

izquierda ,

izquierda or

izquierda xor

izquierda and

derecha print

izquierda = += -= *= /= .= %= &= |= ^= ~= <<= >>=

izquierda ? :

izquierda ||

izquierda &&

izquierda |

izquierda ^

izquierda &

no asociativo == != ===

no asociativo < <= > >=

izquierda << >>

izquierda + - .

Page 64: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 62

Asociatividad Operadores

izquierda * / %

derecha ! ~ ++ -- (int) (double) (string) (array) (object) @

derecha [

no asociativo new

3.4 SentenciasLas sentencias de control permiten ejecutar bloque de códigos dependiendo de

condiciones. La evaluación de dichas condiciones retorna uno de dos valores verdadero o falso.

Para PHP el 0 es equivalente a falso y cualquier otro número es verdadero.

if...else

La sentencia if...else permite ejecutar un bloque de instrucciones si la condición es verdadera y otrobloque de instrucciones si ésta es falsa. Es importante tener en cuenta que la condición queevaluemos ha de estar encerrada entre paréntesis (esto es aplicable a todas las sentencias decontrol).

if (condición) {//Se ejecuta si la condición es VERDADERA

} else {//Se ejecuta si la condición es FALSA

}

Ejemplo: Determinar si n es par o impar

<?php$enviar = $_POST['enviar'];$n = $_POST['n'];if( isset($enviar) && $_SERVER['REQUEST_METHOD'] == 'POST' ){

if( isset($n) ){if( ( $n % 2 ) == 0 ) {

Page 65: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 63

$cadena = "$n es par";} else $cadena = "$n es impar";echo "<p class='centrado'>".$cadena."</p><br />";

}} else {

echo "<p class='centrado'>Falta información así no puedes ejecutar</p>";}

?>

Ejemplo: Construir un programa que capture un deporte y despliegue dos implementos deportivosapropiados.

isset es una función PHP que regresa verdadero si una variable tomo valor $_SERVER['REQUEST_METHOD'] método de petición se usó para acceder a la página unset destruye una variable especificada

<?php$enviar = $_POST['enviar'];if( isset($enviar) && $_SERVER['REQUEST_METHOD'] == 'POST' ) {

echo "<table class='tablaSinBorde'>";echo "<tr><td colspan='2'>Implementos deportivos de ".$_POST['deporte']."</td></tr>";echo "<tr><td><img src='deportivos/".$_POST['deporte']."01.jpg' /></td>";echo "<td><img src='deportivos/".$_POST['deporte']."02.jpg' /></td>";echo "</tr></table>";unset($enviar);unset($_POST['deporte']);

} else { echo "<p class='centrado'>Falta información así no puedes ejecutar</p>";}

?>

Existe una forma sencilla de usar la sentencia if cuando no tenemos que usar el else ysolo tenenemos que ejecutar una línea de código.

$a = 6;if ($a > 4) echo "$a es mayor que 4";

if...elseif...else

Page 66: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 64

La sentencia if...elseif...else permite ejecutar varias condiciones en cascada. Para estecaso veremos un ejemplo, en el que utilizaremos los operadores lógicos.

La línea 3 checa que el botón enviar sea pulsado y el método de envio se POST. La línea 4 checa que nombre tenga valor distinto a nulo o espacios en blanco. En la línea 7 el contenido de la variable nombre se convierte a mayúsculas

<?php$enviar = $_POST['enviar'];if( isset($enviar) && $_SERVER['REQUEST_METHOD'] == 'POST') {

if (empty($nombre) or !isset($nombre) or trim($nombre) === '' ) {echo "<p class='centrado'>Tú no tienes nombre</p>";

} else {$nombre = mb_strtoupper($nombre);if ($nombre == 'ZAMIRA'){

echo "<br /><p align='center'>Hola $nombre eres ";echo "una Princesa preciosa</p>";

} else {echo "<br /><p align='center'>Tu nombre es $nombre </p>";

}}unset($enviar);unset($nombre);

} else {echo "<p class='centrado'>Falta información así ";echo "no puedes ejecutar</p>";

}?>

Ejemplo: Cálculo del área y perímetro de un triángulo dados sus lados, mediante la formula deHerón. Note que si el radical de área es negativo, los lados proporcionados no forman un triángulo

<?php$a = $_POST['a'];$b = $_POST['b'];$c = $_POST['c'];

Page 67: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 65

$datos = empty($a) or empty($b) or empty($c);$enviar = $_POST['enviar'];if( !$datos && isset($enviar) && $_SERVER['REQUEST_METHOD'] == 'POST' ) {

$perimetro = $a + $b + $c;$p = $perimetro/2; //semiperimetro$radical = $p*($p - $a) * ($p - $b) * ($p - $c);if($radical < 0 ) {

$resultado = 'No es un triángulo'."<br />";} else {

$resultado = "<strong>Área = </strong>".sqrt($radical)."<br />";$resultado .= "<strong>Perímetro </strong>= ".$perimetro."<br />";

}echo "<p class='centrado'>".$resultado."</p>";

} else {echo "<p class='centrado'>Falta información así no puedes ejecutar</p>";

}?>

switch...case...default

Una alternativa a if...elseif...else, es la sentencia switch, la cual evalúa y comparacada expresión de la sentencia case con la expresión que evaluamos, si llegamos al final de la listade case y no encontramos condición verdadera, ejecuta el código de bloque que haya en lasentencia default.

Si encontramos una condición verdadera debemos ejecutar un break para que lasentencia switch no siga buscando en la lista de case.

Ejemplo: El siguiente código imprime el día de la semana actual.

<?phpfunction diaSemana(){

$diaSemana = date('D');$semanaArray = array(

'Mon' => 'Lunes','Tue' => 'Martes','Wed' => 'Miercoles','Thu' => 'Jueves','Fri' => 'Viernes',

Page 68: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 66

'Sat' => 'Sábado','Sun' => 'Domingo',

);return $semanaArray[$diaSemana];

} //diaSemana

$dia = diaSemana();switch ($dia) {

case 'Lunes': echo 'Hoy es Lunes'; break;case 'Martes': echo 'Hoy es Martes'; break;case 'Miercoles': echo 'Hoy es Miercoles'; break;case 'Jueves': echo 'Hoy es Jueves'; break;case 'Viernes': echo 'Hoy es Viernes'; break;case 'Sábado': echo 'Hoy es Sábado'; break;case 'Domingo': echo 'Hoy es Domingo'; break;default: echo 'Cadena no valida';

}?>

A continuación se presenta un ejemplo donde no se evalúa una variable. Lo que seefectúa es una evaluación de expresiones.

<?php$enviar = $_POST['enviar'];if( isset($enviar) && $_SERVER['REQUEST_METHOD'] == 'POST') {

$n = $_POST['n'];switch (true) {case ($n < 0) : $cadena = "$n < 0"; break;case ($n >= 0 && $n <= 3) : $cadena = "0 <= $n <= 3"; break;case ($n >= 4 && $n <= 12) : $cadena = "4 <= $n <= 12"; break;default: $cadena = "$n > 13";}echo "<p class='centrado'>$cadena </p>";unset($enviar);unset($n);

} else {echo "Falta información así no puedes ejecutar";

}?>

Page 69: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 67

Estructuras de control repetitivas/interactivas

A menudo es necesario ejecutar una instrucción o un bloque de instrucciones más deuna vez

Ejemplo:

for

El bucle for resulta muy útil cuando debemos ejecutar un bloque de código a condiciónde que una variable se encuentre entre un valor mínimo y otro máximo. El bucle for se puederomper mediante la sentencia break.

Ejemplo:

<?phpfor ($num = 1; $num <= 5; $num++){

echo $num."<br />";if ($num == 3){

echo "Aquí nos salimos \n";break;

}}

?>

Page 70: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 68

Ejemplo: Calcular una tabla multiplicar. La selección de la tabla se hace desde unformulario.

<?php$enviar = $_POST['enviar'];if( isset($enviar) && $_SERVER['REQUEST_METHOD'] == 'POST') {

$tabla = $_POST['tabla'];echo "<table class='zebra'>";

$renglon = "";for($i = 1; $i <= 10; $i++) {

if($i % 2 == 0) {$renglon .= "<tr class='odd'>";

} else {$renglon .= "<tr>";

}$r = $tabla*$i;$renglon .= "<td>$tabla</td><td>*</td><td>$i";$renglon .= "</td><td>=</td><td>$r</td>";

}echo $renglon."</table>";unset($enviar);unset($renglon);

} else {echo "Falta información así no puedes ejecutar";

}?>

while

La sentencia while ejecuta un bloque de código mientras se cumpla una determinadacondición. Podemos romper un bucle while utilizando la sentencia break.

El siguiente código dado por la formula abajo mencionada, calcula el factorial de n. Elvalor de n debe ser menor o igual a 69 por el tipo de variables que maneja PHP.

Page 71: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 69

<?php$html = "";$enviar = $_POST['enviar'];if( isset($enviar) && $_SERVER['REQUEST_METHOD'] == 'POST') {

$n = $_POST['n'];if($n >= 0 && $n <= 1) {$factorial = 1;

} elseif( $n >= 2 and $n <= 69) {$factorial = 1;$i = 2;while ( $i <= $n ) $factorial *= $i++;

} else $factorial = "indefinido";$html = "<p align='center'>El factorial de $n es ";$html .= number_format($factorial, 0, '.',',')."</p><br />";echo $html;unset($n);unset($factorial);

} else {echo "<p>Falta información así no puedes ejecutar</p>";

}?>

El código factorial se puede optimizar y calcularlo para cualquier valor positivo medianteotros mecanismos.

do..while

Esta sentencia es similar a while, salvo que con esta sentencia primero ejecutamos elbloque de código y después se evalúa la condición, por lo que el bloque de código se ejecutasiempre al menos una vez.

Ejemplo: Calcularemos el factorial de n con la sentencia do while

<?php$enviar = $_POST['enviar'];if( isset($enviar) && $_SERVER['REQUEST_METHOD'] == 'POST') {

$n = $_POST['n'];if($n == 0 and $n == 1) {

$factorial = 1;} elseif( $n < 0 or $n >69) {

Page 72: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 70

$factorial = 'indefenido';} else {

$i = 2;$factorial = 1;do {

$factorial *= $i++;} while ($i <= $n);

}$html = "<p align='center'>El factorial de $n es ";$html .= number_format($factorial, 0, '.',',')."</p><br />";echo $html;unset($n);unset($factorial);

} else {echo "Falta información así no puedes ejecutar";

}?>

El usar while, do while o for es principalmente cuestión de preferencia personal.

foreach

El bucle foreach nos permite iterar en cada elemento de un vector, su sintaxis essencilla. Consiste en indentificar el índice de la matriz, mediante la expresion as y seguidamente lavariable que identificará el valor del elemento:

Por ejemplo: La tabla general de la Jornada 17 del Torneo Bicentenario 2010FEMEXFUT.

<?phpecho "<h4 align = 'center'>Torneo Bicentenario 2010. ";echo "Jornada 17</h4>";$equipo['Chivas'] = 32; $equipo['Monterrey'] = 36;$equipo['Santos'] = 28; $equipo['Pumas'] = 28;$equipo['Morelia'] = 25; $equipo['Cruz Azul'] = 25;$equipo['América'] = 25; $equipo['Gallos Blancos'] = 21;$equipo['Toluca'] = 30; $equipo['Pachuca'] = 25;$equipo['Atlas'] = 24; $equipo['Estudiantes'] = 19;$equipo['Atlante'] = 16; $equipo['Jaguares'] = 19;$equipo['Puebla'] = 19; $equipo['San Luis'] = 14;$equipo['Tigres'] = 19; $equipo['Indios'] = 15;arsort($equipo);

Page 73: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 71

echo "<table class = 'zebra'>";echo "<thead><tr><th>Equipo</th><th>Puntos</th></tr></thead>";$i = 1;foreach( $equipo as $key => $puntos) {

if ($i == 2) {echo "<tr class='odd'>";$i = 1;

} else {echo "<tr>";$i = 2;

}echo "<td>".$key."</td><td align='right'>".$puntos."</td>";echo "</tr>";

}echo "</table>";

?>

3.5 Arreglos.Una arreglo (array) es una estructura de datos que contienen una colección de datos

del mismo tipo. Los array se utilizan como contenedores para almacenar datos relacionados ( envez de declarar variables por separado para cada uno de los elementos del array).

Los elementos del array se acceden a través de la posición que ocupan dentro del

conjunto de elementos del arreglo. El primer elemento es la posición cero.

El tamaño del array se establece cuando creamos el arreglo, pero este puede crecer

posteriormente en forma ilimitada (- Hasta agotar la RAM -).

Los elementos del arreglo pueden tener diferentes tipos de datos.

Page 74: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 72

Denominamos vector a los array unidimensionales y matrices a los arraybidimensionales. Si bien es posible definir matrices de más de dos dimensiones después de casi tresdecadas programando jamás necesite una. Los array se clasifican según su naturaleza en indexadaso asociativas.

Array indexados

Son aquellos en las que el índice es un valor numérico.$estaciones = array ("primavera", "verano", otoño", "invierno");

$sentidos = array ("gusto", "oido", "olfato", "tacto", "vista");

$numeros = array(1,2,30, 50, 60, 70);

Para acceder un elemento del arreglo usaremos la notación genérica:

$estaciones[$i];$sentidos[$i];$numeros[$i];

Como índice podemos usar un número, una variable o constante que represente elelemento referenciando. Iniciando desde la posición cero.

Ejemplo:Se declara un arreglo denominado $estacion. El cual se recorre mediante unciclo for.

<?php$estacion = array ('Primavera', 'Verano', 'Otoño', 'Invierno');echo "Las estaciones del año son <br />";for($i = 0; $i <= 4; $i++)

echo $estacion[$i]."<br />";?>

Page 75: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 73

Los arrays se ordenan usando las funciones asort(), arsort(), ksort(), rsort(), sort(), uasort() yuksort() según el tipo de ordenación.

Ejemplo: Generar un vector aleatorio de tamaño n y ordenarlo.

Usamos la función mt_rand para generar números aleatorios El método sort ordena los valores del vector de menor a mayor

<?php$enviar = $_POST['enviar'];$n = $_POST['n'];if( isset($enviar) and $_SERVER['REQUEST_METHOD'] == 'POST' and

($n > 0 and $n < 200000) ) {for($i = 0; $i <= $n; $i++) { // Genera un vector de tamaño n$vector[$i] = mt_rand(1, 1000); //mt_rand genera números aleatorios}sort($vector); // Ordena el vector//Imprime el Vector ordenadofor($i = 0; $i <= $n; $i++) echo $vector[$i].' ';echo "<br />";

} else {$cadena = "<p class='centrado'>Por aquí no puedes entrar<br /></p>";echo $cadena;

}?>

Otra función interesante es count que cuenta el número de elementos de un arreglo.

Ejemplo. Considere las temperaturas máximas registradas en la ciudad de Veracruzdurante el mes de febrero del 2010.

<?php$temperatura = array(23, 25,27, 23, 27,26,

26, 28,27, 22, 26,21, 2324,21,18,18,19,26,28,27,27,26,18, 23,26,24,27);

sort($temperatura);$n = count($temperatura);$promedio = 0;

Page 76: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 74

for($i = 1; $i < $n; $i++)$promedio += $temperatura[$i];

$promedio = $promedio/$n;$maximo = $temperatura[$n - 1];echo "Temperatura mínima = $temperatura[0] <br />";echo "Temperatura media = $promedio <br />";echo "Temperatura máxima = $maximo <br />";

?>

Ejemplo: Obtener los archivos de un directorio ordenados alfabéticamente.

En la línea 3 se establece un apuntador al directorio indicado mediante la función opendir La línea 4 realiza un ciclo, en el cual la función readdir lee uno a uno los archivos del

subdirectorio La línea 5 asigna el archivo a una posición del vector La función closedir en la línea 7 cierra el apuntador La función sort() línea 8 ordenada el vector de menor a mayor El sentencia de control foreach recorre el vector

<?php

// llenar un array con todos los ítems de un directorio$handle = opendir('zodiaco');while (false !== ($archivo = readdir($handle))) {$archivos[] = strtolower($archivo);

}closedir($handle);sort($archivos);foreach($archivos as $i => $valor) {

echo $valor."<br />";};

?>

Page 77: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 75

Ejemplo: Funciones básicas en arreglos

En la línea 2 se declara un array numérico. Las líneas 3, 9, 14, 20 imprimen el contenido del arreglo mediante la función print_r. La función count cuenta el número de elementos del array (Líneas 4, 6, 11, 16, 21). En la línea 8 se borra uno a uno el contenido del array (unset) En las líneas 14 y 19 se agregan valores en la siguiente posición del vector. En la línea 18 se restablecen los índices mediante la función array_values.

<?php$array = array(1, 2, 3, 4, 5,70,90); // Creamos un array simple.print_r($array); // Imprimimos el arrayecho "<br />Elementos en el array: ".count($array)."<br />";// Borraremos los items,el apuntador del array quedará intacto$n = count($array);for($i = 0; $i <= $n; $i++) {

unset($array[$i]);}print_r($array);echo "<br />Elementos en el array: ".count($array)."<br />";// Ahora sumaremos un item// (observe que el nuevo índice es 7, y no 0).$array[] = 60;print_r($array);echo "<br />Elementos en el array: ".count($array)."<br />";// Re-index:$array = array_values($array);$array[] = 57;print_r($array);echo "<br />Elementos en el array: ".count($array)."<br />";

?>

Función range

Crea un vector que contiene una secuencia de elementos. Sintaxis

array range ( mixed $inicial , mixed $final [, number $incremento ] )

range() retorna vector de elementos desde inicial hasta final, ambos inclusive. Siinicial > final, la secuencia será del mayor al menor.

Page 78: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 76

Si recibe como parámetro incremento, éste será usado como el incremento entreelementos en la secuencia.

incremento es un número positivo. Si no se especifica, incremento tendrá un valorpredeterminado de 1.

<?phpecho "<h1>Uso de range</h1><br />";echo "Vector simple<br />";foreach (range(0, 20) as $numero) {

echo $numero."<br />";}echo "Vector con incremento<br />";foreach (range(0, 200, 20) as $numero) {

echo $numero."<br />";}echo "Vector de letras<br />";foreach (range('a', 'z') as $letra) {

echo $letra."<br />";}echo "Vector de letras descendente<br />";foreach (range('M', 'C') as $letra) {

echo $letra."<br />";}

?>

Arrays asociativos

Un array esta formado por conjuntos de parejas índice => valor, o como sueleexpresarse en inglés, key, value. Los cuales se expresan comunmente con índices o keys numéricos(también conocidos como arrays escalares). Además es posible usar strings como índices, es decir,cadenas de texto. Este tipo de array es el array asociativo:

Ejemplo: Imprimiremos la fecha actual mediante el uso de arreglos.

En la línea 4 se declara un arreglo asociativo que contiene los nombres del mes en español En la línea 11 se declara un arreglo asociativo que contiene los nombres del día de la

semana en español En la línea 18 se obtiene el número del día del mes El año se obtiene en la línea 19

Page 79: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 77

<?PHPfunction imprimeFecha(){

$mesArray = array(1 => 'Enero', 2 => 'Febrero', 3 => 'Marzo', 4 => 'Abril',5 => 'Mayo', 6 => 'Junio', 7 => 'Julio', 8 => 'Agosto',9 => 'Septiembre', 10 => 'Octubre', 11 => 'Noviembre',

12 => 'Diciembre');

$semanaArray = array('Mon' => 'Lunes', 'Tue' => 'Martes', 'Wed' => 'Miercoles','Thu' => 'Jueves', 'Fri' => 'Viernes', 'Sat' => 'Sábado','Sun' => 'Domingo',);

$mesReturn = $mesArray[date('n')];$semanaReturn = $semanaArray[date('D')];

$dia = date('d');$año = date('Y');

return $semanaReturn.' '.$dia.' de '.$mesReturn.' de '.$año;}echo imprimeFecha();

?>

Recorrer una tabla con índices numéricos mediante un bucle es sencillo, pero ¿cómorecorremos una tabla con índices asociados? Para ello, utilizaremos una serie de sentenciasespecíficas para tal fin:

each() se usa normalmente de forma conjunta a list() para recorrer una matriz: por ejemplo:

<?php$deportivos = array('a' => 'BWM M3 Sedan',

'b' => 'Mazda Miata','c' => 'cFerrari 612 Sca glietti','d' => 'Corvette C6');

while (list($key, $deportivo) = each($deportivos)) {$foto = "deportivos/$deportivo".'.jpg';

echo "<img src='$foto' />"."<br />";echo $deportivo."<br />";

}?>

Page 80: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 78

Matrices

Los arrays bidimensionales - matrices - similares a una tabla de doble entrada. Cadauno de los elementos se identifica unívocamente por un nombre ($nombre) seguido de dos ([]) quecontienen los índices del array.

Los índices pueden ser de tipo escalar - equivalen al número de fila y columna que lacelda ocupa en la tabla – o puede ser asociativos lo que equivaldría en alguna medida a usar comoíndices los nombres de la fila y de la columna.

Los elementos de un array bidimensional escalar pueden escribirse usando una de estas sintaxis:

$arreglo[][] = valor. En este caso los índices se autoincrementan iniciando los índices encero. El primer índice corresponde a renglones y el segundo a las columnas.

$arreglo[i][j] = valor. En este caso corresponde al programador el control de los índices.

Ejemplo: Crear e imprimir una matriz r - renglones - x c - columnas -.

En las líneas 6 y 11 se controla el índice renglón En las líneas 7 y 12 se controla el índice columna mt_rand es una función PHP que genera números aleatorios en este caso entre 1 y 100.

<?php$enviar = $_POST['enviar'];if( isset($enviar) and $_SERVER['REQUEST_METHOD'] == 'POST') {

$r = $_POST['renglones'] - 1;$c = $_POST['columnas'] - 1;$cadena = "<table class='tabla'>";for($i = 0; $i <= $r; $i++) {$cadena .= "<tr>";for($j = 0; $j <= $c; $j++) {$matriz[$i][$j] = mt_rand(1, 100);$cadena .= "<td><div align='right'>";$cadena .= $matriz[$i][$j]."</div></td>";

}$cadena .= "</tr>";

Page 81: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 79

}echo $cadena . "</table>";

} else {$mensaje = "<p align='center'>Falta información así ";$mensaje .= "no puedes ejecutar</p>";echo $mensaje;

}?>

Ejemplo: Suma o resta de matrices

Dadas las matrices m-por-n , A y B, su suma A + B es la matriz m-por-n calculadasumando los elementos correspondientes (i.e. (A + B)[i, j] = A[i, j] + B[i, j] ). Es decir, sumar cada unode los elementos homólogos de las matrices a sumar. Por ejemplo:

Mediante la función mt_rand que genera números aleatorios llenamos la matriz A y B La sentencia $operacion*$matriz2[$i][$j] determina si se realiza una suma o resta de

matrices. $operación toma los valores -1 y 1.

<?phpfunction imprimeMatriz($matriz, $r, $c, $mensaje) {

echo "<table class='tabla' align='center'>";echo "<tr><td>$mensaje</td></tr>";for($i = 0; $i < $r; $i++) {$cadena = "<tr>";for($j = 0; $j < $c; $j++) {

$cadena .= "<td><div align='right'>";$cadena .= $matriz[$i][$j]."</div></td>";

}echo $cadena."</tr>";

}echo "</table><br />";

}

$enviar = $_POST['enviar'];

Page 82: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 80

if( isset($enviar) && $_SERVER["REQUEST_METHOD"] == "POST") {$fila1 = $_POST['f1'];$col1 = $_POST['c1'];$fila2 = $_POST['f2'];$col2 = $_POST['c2'];$operacion = $_POST['operacion'];

if($fila1 == $fila2 && $col1 == $col2){for($i = 0; $i < $fila1;$i++){for($j = 0; $j < $col1; $j++){

$matriz[$i][$j] = mt_rand(1,100);$matriz2[$i][$j] = mt_rand(1,100);

}}imprimeMatriz($matriz, $fila1, $col1, 'Matriz A:');imprimeMatriz($matriz2, $fila2, $col2, 'Matriz B:');if($operacion == 1) {$mensaje = 'A + B';

} else $mensaje = 'A - B';echo "<table class='tabla' align='center'>";echo "<tr><td>$mensaje:</td></tr>";for($i = 0; $i < $fila2; $i++) {$cadena = "<tr>";for($j = 0; $j < $col2; $j++) {

$cadena .= "<td><div align='right'>";$cadena .= $matriz[$i][$j]$cadena .= $operacion*$matriz2[$i][$j];$cadena .= "</div></td>";

}echo $cadena."</tr>";

}echo "</table><br>";

} else {$mensaje = 'Las matrices no tienen las mismas dimensiones';$mensaje .= ' por lo tanto es imposible hacer operación';

}echo $mensaje;

} else {echo 'Falta información así no puedes ejecutar';

}?>

Page 83: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 81

Ejemplo: Producto de matrices

El producto de dos matrices se puede definir sólo si el número de columnas de la matriz izquierda esel mismo que el número de filas de la matriz derecha. Si A es una matriz m×n y B es una matrizn×p, entonces su producto matricial AB es la matriz m×p (m filas, p columnas) dada por:

para cada par i y j.

Aplicación:

<?phpfunction imprimirMatriz($matriz, $r, $c, $mensaje) {

$cadena = "<table align='center'>";$cadena .= "<tr><td align='center'>".$mensaje."</td><td></td></tr>";for($i = 0; $i < $r; $i++) {

$cadena .= "<tr>";for($j = 0; $j < $c; $j++) $cadena .= "<td align='right'>".$matriz[$i][$j]."</td>";$cadena .= "</tr>";

}$cadena .= "</table>";echo $cadena;

}

function multiplicaMatriz($matriz, $matriz2, $fila1, $col1, $fila2, $col2){echo "<table class='tabla' align='center'>";echo "<tr><td>Matriz Resultante:</td></tr>";for($i = 0; $i < $fila1; $i++) {$cadena = "<tr>";for($j = 0; $j < $col2; $j++) {$suma = 0;for($k = 0; $k < $col1; $k++) $suma += $matriz[$i][$k]*$matriz2[$k][$j];$cadena .= "<td><div align='right'>".($suma)."</div></td>";

}echo $cadena."</tr>";

Page 84: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 82

}echo "</table><br><br>";

}

$enviar = $_POST['enviar'];if( isset($enviar) && $_SERVER['REQUEST_METHOD'] == 'POST') {

$fila1 = $_POST['f1'];$col1 = $_POST['c1'];$fila2 = $_POST['f2'];$col2 = $_POST['c2'];$suma = 0;

unset($enviar);if($col1 == $fila2){

for($i = 0; $i < $fila1; $i++)for($j = 0; $j < $col1; $j++) $matriz[$i][$j] = mt_rand(1,10);

imprimirMatriz($matriz, $fila1, $col1, "Matriz A:");for($i = 0;$i < $fila2; $i++)for($j = 0; $j < $col2; $j++) $matriz2[$i][$j] = mt_rand(1,10);

imprimirMatriz($matriz2, $fila2, $col2, "Matriz B:");multiplicaMatriz($matriz, $matriz2, $fila1, $col1, $fila2, $col2);

} else {$cadena = "<center>Las matrices no son conformables ";$cadena = "Por lo tanto no se puede hacer la multiplicacion</center>";echo $cadena;

}} else {

echo "Falta información así no puedes ejecutar";}

?>

Ejemplo: Una rocola básica

En las líneas 2 al 6 se declara una matriz bidimensional asociativa llamada Salseros Mediante la instrucción foreach recorremos dicha matriz que obtiene un vector denominado

cantante La extracción del vector cancion en la línea 13 nos permite tomar la musica en nuestro caso

la primera columna es el nombre del artista y el resto de las posibles serán las canciones areproducir

Si bien el programa no tiene errores de lógica, su uso no es óptimo y su optimización serátema de otro apartado

Page 85: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 83

<?php$Salseros = array(

array('Gilberto Santa Rosa','Vivir Sin Ti', 'Me Cambiaron Las Preguntas'),array('Maelo Ruiz','Te va a doler','Regalame una noche'),array('Tito Nieves','Si yo fuera el','La leccion de Pedro K')

);foreach($Salseros as $cantante) {

echo '<tbody><tr>';$i = 1;

foreach($cantante as $cancion) {if ($i !== 1) {

echo "<td>$cancion";$cancion = '../mp3/'.$cancion.'.mp3';echo ";<embed class='flash_close' width='200' height='25'";echo "type='application/x-shockwave-flash' ";echo "src='singlemp3player.swf' ";echo "pluginspage='http://www.adobe.com/go/getflashplayer' ";echo "flashvars='file=$cancion'/;>";echo ";</td;>"

} else {echo "<td>$cancion</td>";

}++$i;

}echo "</tr>";

}echo "</tbody></table></div>"?>

3.6 Funciones y librerías.Una función es el término para describir una secuencia de órdenes que hacen una tarea

específica de una aplicación más grande.

Una función de usuario en PHP no es más que una porción de código que podemosllamar en cualquier momento. De un lado, al dividir nuestro código en funciones podemos aislar yperfeccionar cada una de sus funcionalidades; de otro lado, podemos reutilizar este código, ya queuna función puede ser llamada cuantas veces la necesitemos.

Page 86: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 84

Para definir una función debemos usar la palabra reservada function. Para llamar lafunción basta con invocar su nombre.

Las declaraciones de funciones generalmente son especificadas por:

Nombre de la función con el que se identifica y se distingue de otras. No podráhaber otra función, ni procedimiento con ese nombre (salvo sobrecarga opolimorfismo en programación orientada a objetos).

Un tipo de dato de retorno. Tipo de dato del valor que la función devolverá alterminar su ejecución.

Una lista de parámetros. Especificación del conjunto de argumentos (pueden sercero, uno o más) que la función debe recibir para realizar su tarea.

El código u órdenes de procesamiento. Conjunto de órdenes y sentencias quedebe ejecutar la función.

La sintaxis de una función es la siguiente:function nombreFuncion(arg1, arg2,... argn) {

//cuerpo de la función}Ejemplo: Conventir grados centígrados a grados Fahrenheit.

En las líneas 2 al 4 se hace la declaración de la función La palabra reservada return regresa el valor de la función línea 3 En la línea 11 se hace un llamado a la función cF pasandole como parámetro una

variable <?php function cF( $grados ){

return 1.8 * $grados + 32;}

$g = $_POST['centigrados'];if(isset($_POST['convertir']) and

$_SERVER['REQUEST_METHOD'] == 'POST'and !empty($g) ) {echo "<p class='centrado'>$g grados centigrados equivalen a ";

Page 87: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 85

echo cF($g)." grados Fahrenheit</p>";unset($_POST['centigrados']);

} else {echo "<p class='centrado'>Falta información así no puedes ";echo "ejecutar</p>";

}

PHP no distingue entre mayúsculas y minúsculas al nombrar las funciones, asi que cFsería lo mismo que CF, aunque es buena práctica ser consistente en la forma de escribir losnombres. Como curiosidad, podrás observar que en los mensajes de error, PHP siempre designa tusfunciones en minúscula.

Los paréntesis permiten pasar valores a las funciones (parámetros), son siemprenecesarios, aunque no pases valor alguno

Una función puede retornar más de un valor, si lo regresamos como un arreglo y loasignamos mediante la función de PHP list.

Ejemplo: Convertir grados Centígrados (Celsius) a grados Fahrenheit, Kelvin yRankine.

La línea 6 regresa un array de valores Mediante la función list se recuperan los valores del array en variables

<?phpfunction conversion( $grados ){

$f = 1.8 * $grados + 32;$r = $f + 459.67;$k = $r/1.8;return array($f, $r, $k);

}$convertir = $_POST['convertir'];$formato = "<br /><p class='centrado'>";$g = $_POST['grados'];if( isset($convertir)

and $_SERVER['REQUEST_METHOD'] == 'POST'and (!empty($g) or $g == 0)) {list($f, $r, $k) = conversion($g);echo "$formato $g grados centígrados equivalen a: "</p>";echo "$formato $f grados Fahrenheit</p>";

Page 88: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 86

echo "$formato $r grados Rankine</p>";echo "$formato $k grados Kelvin </p>";

} else {echo "$formato Falta información así no puedes ejecutar</p>";

}?>

Paso de parámetros por referencia

Hasta el momento usamos parámetros por valor. Si queremos pasar nuestras variables

por referencia - de tal manera que los cambios en los argumentospersistan - es necesario anteponer al argumento o parámetro el símbolo "&".

Ejemplo: Considere el cálculo del área y volumen de una esfera en función de su radiomediante las siguientes formulas;

En la línea 2 al 5 se declara una función con parámetros por referencia. La línea 3 usa la función predifinida pi() que no necesita explicación Observe que la función no regresa valores, pero aun así las variables área y

volumen tomaron valor. Esto es porque fueron declaradas como parámetros porreferencia.

La función PHP number_format da formato a un parámetro numérico conseparador de miles y decimales

<?phpfunction calculo( $radio, &$area, &$volumen ){

$area = 4 * pi() * $radio * $radio;$volumen = $area * $radio /3;

}

$radio = $_POST['radio'];

Page 89: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 87

$formato = "<p class='centrado'><br />";if( isset($_POST['calcular'])

and $_SERVER['REQUEST_METHOD'] == 'POST'and $radio > 0 ) {

$area = 0;$volumen = 0;calculo($radio, $area, $volumen);echo "$formato Sea una esfera cuyo radio es $radio metros</p>";echo "$formato tiene un área de ".number_format($area,2,'.',',');echo "metros<sup>2</sup></p>";echo "$formato tiene un volumen de ";echo number_format($volumen,2,'.',',');echo " metros<sup>3</sup></p>";

} else {echo "$formato Falta información así no puedes ejecutar</p>";

}?>

Se puede proporcionar un valor por defecto para la función, que se aplicará salvo queespecífique otro al llamarla.

Ejemplo: Convertir de yardas a metros

En las líneas 2 al 4 declara la función yardas_metros cuyo parámetro por defectoes 1

$y = yardas_metros() hace una llamada a la función sin parámetros $m = yardas_metros($yardas) hace una llamada a la función con parámetros

<?phpfunction yardas_metros( $yarda = 1 ){

return 0.9144 * $yarda;}$forma = "<br /><p class='centrado'>";$yardas = $_POST['yardas'];if( isset($_POST['convertir'])

and $_SERVER['REQUEST_METHOD'] == 'POST'and $yardas > 0) {$y = yardas_metros();$m = yardas_metros($yardas);

echo "$forma Una yarda equivale a $y metros</p>";echo "$forma $yardas yardas equivalen a $m metros</p>";

Page 90: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 88

} else {echo "$forma Falta información así no puedes ejecutar</p>";

}?>

Funciones recursivas

Se denominan funciones recursivas a aquellas que se llaman a sí mismas.

Ejemplo: Para todo número natural n, se llama n factorial o factorial de n al producto detodos los naturales desde 1 hasta n. Es decir:

Se define 0! = 1, para que la relación n! = n × (n - 1)! sea también válida para n = 1. Esta relaciónpermite definir los factoriales por recursividad. La notación n! fue popularizada por el matemáticofrancés Christian Kramp.

<?php$n = $_POST['n'];$forma = "<p class='centrado'>";if( isset($_POST['calcular'])

and $_SERVER['REQUEST_METHOD'] == 'POST'and !empty($n)

and ($n >= 0 and $n <= 69) {// Una función se puede declarar donde// Gustes o se necesitefunction factorial($n = 1) {

if($n <= 1) {return 1; // funcion base

} else { //llamada así mismareturn $n * factorial($n - 1);

}} //Fin: Factorial

Page 91: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 89

echo "$forma El factorial de $n = ";echo factorial($n)."</p>";

} else {echo "$forma Falta información así ";echo "no puedes ejecutar</p>";

}?>

Ejemplo: Determinar si un número es primo, par o impar.

Cero y uno es un número primo y par Dos es primo y par abs calcula el valor absoluto de un número sqrt obtiene la raíz cuadrada de un número floor es el número entero inferior a n. floor(6.7) = 6 $multiplo = floor(sqrt($n)) = Máximo entero que puede dividir

exactamente a un número

<?phpfunction tipo($m) {$n = abs($m);$forma = "<p class='centrado'>";if($n == 0) return "$forma 0 es par</p>";if($n == 1) return "$forma 1 es un primo impar</p>";if($n == 2) return "$forma 2 es el unico primo par<p />";if($n % 2 == 0)

return "$forma".number_format($m, 0, ".", ",")." es par</p>";$multiplo = floor(sqrt($n));$i = 3;while ( ($n % $i !== 0) and ( $i <= $multiplo )) $i += 2;if( $i > $multiplo ) {

return "$forma $m es primo</p>";} else {

return "$forma $m es impar</p>";}

}

if( isset($_POST['calcular'])and $_SERVER['REQUEST_METHOD'] == 'POST'and !empty($_POST['n']) ) {

echo tipo($_POST['n']);} else {

$forma = "<p class='centrado'>";echo "$forma Falta información así no puedes ejecutar</p>";

}

Page 92: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 90

?>

Ejemplo: Máximo común divisor.

En matemáticas el máximo común divisor (abreviado mcd) de dos números enteros esel mayor número que los divide sin dejar resto. El método que se codifica es el algoritmo deEuclides, el cual se describe formalmente como:

<?phpfunction mcd($a, $b) {

$a = abs($a);$b = abs($b);if ($b == 0) $resultado = $a;else $resultado = mcd($b, $a%$b);

return $resultado;} //mcd$a = $_POST['a'];$b = $_POST['b'];$forma = "<p class='centrado'>";if( isset($_POST['calcular']) and

$_SERVER['REQUEST_METHOD'] == 'POST' and!empty($a) and!empty($b)) {$mcd = mcd($a,$b);echo "$forma mcd( $a, $b) = $mcd</p>";echo "$forma $a".'/'.$b. ' = '.$a/$mcd.'/';echo $b/$mcd."</p>";unset($a);unset($b);

} else {echo "$forma Falta información así ";echo "no puedes ejecutar</p>";

}?>

Page 93: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 91

Ejemplo: Mínimo común múltiplo

El mínimo común múltiplo (m.c.m.) de dos números naturales es el menor númeronatural que es múltiplo de todos ellos. Sólo se aplica con números naturales, es decir, no se usandecimales ni números negativos.

Conociendo el máximo común divisor de dos números, se puede calcular el mínimocomún múltiplo de ellos, que será el producto de ambos dividido entre su máximo común divisor.

<?phpfunction mcd($a, $b) {

if ($b == 0) $resultado = $a;else $resultado = mcd($b, $a%$b);

return $resultado;} //mcdfunction mcm($a, $b) {

$a = abs($a);$b = abs($b);return ($a * $b)/mcd($a, $b);

}$a = $_POST['a'];$b = $_POST['b'];$forma = "<p class='centrado'>";if( isset($_POST['calcular']) and

$_SERVER['REQUEST_METHOD'] == 'POST' and!empty($a) and !empty($b) ) {$mcm = mcm($a,$b);echo "$forma mcm( $a, $b) = $mcm</p>";unset($calcular);

} else {echo "$forma Falta información así ";echo "no puedes ejecutar</p>";

}?>

Page 94: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 92

Ejemplo de aplicación: Suma, resta, multiplicación y división de quebrados

Suma o Resta:function sumaResta($n1, $d1, $n2, $d2, $signo) {

$dr = mcm($d1, $d2);$nr = ($n1 * ($dr / $d1) + $signo * $n2 * ( $dr / $d2));$cadena = $n1.'/'.$d1.' ';$cadena .= ($signo == 1?'+':'-').' '.$n2.'/'.$d2;if($nr == 0) {

$mensaje = $cadena.' = 0';} else {

if( $nr == $dr) {$mensaje = $cadena.' = 1';

} else {$mensaje = reducir($nr, $dr, $cadena);

}}return $mensaje;

}

Multiplcacion:

function multiplicar($n1, $d1, $n2, $d2) {$nr = $n1 * $n2;$dr = $d1 * $d2;$cadena = $n1.'/'.$d1.' * '.$n2. '/'.$d2;if($nr == 0 ) {

$cadena .= ' 0';$mensaje = $cadena;

} else {$mensaje = reducir($nr, $dr, $cadena);

}return $mensaje;

}

División:

function division($n1, $d1, $n2, $d2) {$nr = $n1 * $d2;$dr = $n2 * $d1;$cadena = $n1.'/'.$d1.' / '.$n2. '/'.$d2;if($nr == 0 ) {

$cadena .= ' 0';$mensaje = $cadena;

} else {$mensaje = reducir($nr, $dr, $cadena);

Page 95: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 93

}return $mensaje;

}

Reducir:

function reducir($nr, $dr, $cadena) {$mcd = mcd($nr, $dr);if($mcd != 1) {

$nr = $nr / $mcd;$dr = $dr / $mcd;

}if($dr == 1) {

$mensaje = $cadena .' = '.$nr;} else {

$mensaje = $cadena .' = '.$nr.'/'.$dr;}return $mensaje;

}

Fracciones:

$enviar = $_POST['enviar'];if( isset($enviar) and $_SERVER['REQUEST_METHOD'] == 'POST') {

$operacion = $_POST['operacion'];$n1 = $_POST['n1'];$d1 = $_POST['d1'];$n2 = $_POST['n2'];$d2 = $_POST['d2'];if( empty($n1) or empty($n2) or empty($d1) or empty($d2) ) {

$mensaje = 'Deja de jugar';} else {

$d = $d1 * $d2;if( $d == 0) {

$mensaje = 'Deja de jugar';} else {

$operacion = $_POST['operacion'];switch ( true ) {

case ( $operacion == 1) :$mensaje = sumaResta($n1, $d1, $n2, $d2, 1); break;

case ( $operacion == 2) :$mensaje = sumaResta($n1, $d1, $n2, $d2, -1); break;

case ( $operacion == 3) :$mensaje = multiplicar($n1, $d1, $n2, $d2); break;

case ( $operacion == 4) :$mensaje = division($n1, $d1, $n2, $d2); break;

}//switch} //else $d == 0

Page 96: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 94

} // if $empty($n1)} else $mensaje = 'Por aquí no puedes entrar';echo $mensaje;

?>

Ejemplo: La constante matemática e

Es uno de los más importantes números reales. El logaritmo en base e se llamalogaritmo natural o neperiano. El número e, conocido a veces como número de Euler o constante deNapier fue reconocido y utilizado por primera vez por el matemático escocés John Napier, quienintrodujo el concepto de logaritmo en el cálculo matemático.

El número e, al igual que el número π, es un número trascendente, es decir, que nopuede ser obtenido directamente mediante la resolución de una ecuación algebraica. Por lo tanto, esun irracional y su valor exacto no puede ser expresado como un número finito de cifras decimales ocon decimales periódicos. Su valor aproximado (truncado) es dado por la función

El código PHP para calcular el número de Euler esta dado por:<?php

function numeroEuler() {//Máximo error permitido$error = 0.000000000001;$e = 2;$anterior = 0;$i = 2;$f = 2;// Aproximación sucesivawhile ( abs($e - $anterior) >= $error) {$anterior = $e;$e += 1/$f;$f = $f * ++$i;

}return $e;

}$e = numeroEuler();

Page 97: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 95

echo 'Número de Euler o constante de Napier = '.$e;?>

Ejemplo: Mediante una serie de Taylor podemos calcular muchas funcionesimportantes. Como por ejemplo la función exponencial dada por:

Un código depurado se presenta a continuación. El cual es más eficiente al no tenerque calcular cada factorial.

<?phpfunction exponencial($x = 0) {

//máximo error permitido$error = 0.000000000001;if ($x != 0) { $e = 1;} else return 0;$anterior = 0;$i = 0;$f = 1;//Aproximaciónwhile ( abs($e - $anterior) >= $error) {$anterior = $e;$f *= ++$i;$e += pow($x, $i)/$f;

}return $e;

}$x = $_POST['e'];$forma = "<p class='centrado'>";if( isset( $_POST['calcular'] )

and $_SERVER['REQUEST_METHOD'] == 'POST'and !empty($x)) {echo "$forma exp($x) = ".exponencial($x)."</p><br />";

} else {echo "$forma Falta información así no puedes ejecutar</p>";

}?>

Page 98: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 96

3.7 Ejemplos prácticos.Redireccionamiento de los visitantes a las páginas específicas en su idioma.

Conocer los idiomas seleccionados en el navegador de nuestros visitantes puede serun dato muy importante que puede utilizar para redirigir al usuario a una página específica en elidioma correspondiente, o bien para mostrar información específica dirigida al usuario (como porejemplo el anuncio más adecuado)

Si deseamos que nuestro sitio sea bilingüe en inglés y español, bajo el supuesto que elespañol y el inglés son los dos idiomas más utilizado por nuestros visitantes (nuestro idioma pordefecto será español).

<?if (substr($_SERVER['HTTP_ACCEPT_LANGUAGE'],0,2) == 'es'){

include("paginaEspanol.html");} else {

include("paginaIngles.html");}

?>

Imprimir fecha y hora del sistema<html>

<body>La fecha del día de hoy es: <? echo date("Y/m/d"); ?>La hora local del servidor es: <? echo date("G:i:s");?>

</body></html>

Procesando Formularios

Para conocer mediante que método recibimos el formulario en PHP usamos la variablede servidor $_SERVER['REQUEST_METHOD']. El siguiente código muestra su uso.

<?phpif ($_SERVER['REQUEST_METHOD'] == 'GET'){

echo 'Usaste GET para enviar los datos';} else if($_SERVER['REQUEST_METHOD'] == 'PUT'){

echo 'Usaste PUT para enviar los datos';}?>

Page 99: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 97

Eliminar espacios

La funcióm trim elimina los espacios en blanco de la cadena. Observe que estáfunción solo elimina los espacios en blanco de los extremos izquierdo y derecho dela cadena, ignorando los espacios en blanco internos (Línea 9).

la función strtoupper convierte la cadena en mayúsculas ucfirst convierte el primer carácter de una cadena a mayúscula, si el carácter es

alfabético. la función strlower convierte la cadena en minúsculas (Línea 3). ereg_replace busca cualquier ocurrencia del patrón en la cadena y la remplaza

por otra. En nuestro caso, cambia todo espacio en blanco por vacío

<?phpfunction eliminarEspacios($cadena) {

$cadena = strtolower($cadena);$cadena = ereg_replace( ' ', '', $cadena);return "<p class='centrado'>".$cadena."</p><br />";

}

if( isset($_POST['enviar']) &&$_SERVER['REQUEST_METHOD'] == 'POST' ) {

$cadena = trim($_POST['cadena']);if( empty($cadena)) {

echo "<p class='centrado'>Enviaste una cadenavacía</p>";

} else echo eliminarEspacios($cadena);} else {

echo "<p class='centrado'>Así no puedes ejecutar</p>";}

?>

Cálculo de áreas y perímetros

El programa principal (phpcodigo3903.php) realiza una interface básica buscandoseparar el formato del proceso, por eso la cantidad de archivos.

La función isset() checa si pulso el botón calcular (Línea tres). En caso contrariocarga la interfase línea 15

La función unset() destruye una variable, es decir la saca de la memoria (Líneacinco).

Page 100: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 98

La sentencia include() inserta y evalúa el archivo especificado, observe que setiene uno por figura (Línea 8 cuadrado.inc, línea 10 circulo.inc y línea 12rectángulo.inc.

Por simplicidad se presenta aquí el código cuadrado.inc que no es otra cosa quecódigo html para obtener los datos necesarios para calcular el área y el perímetro de un cuadro.

En este caso el único dato necesario es el lado. Note que las propiedas id y namedel form se llaman cuadrado (línea 1), nombre de la figura.

Considere que para todos las figuras el botón de procesamiento se llamaracalcular.

Se incluye un componente de tipo hidden con el valor de Cuadrado (línea 16).

Page 101: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 99

Por último se presenta el código que procesa los datos de entrada.

Envio de correos

Enviar correos mediante PHP es sumamente sencillo si usamos la función mail. La

función mail es: mail($destino, $asunto, $mensaje, $encabezado);

Donde

$destino: es la dirección a donde se enviará el mensaje $asunto: asunto del mensaje $mensaje: cuerpo del mensaje $encabezado: aquí se anexa por ejemplo a quien se envía el mensaje, si el

mensaje va ir con copia para, si el mensaje ira con copia oculta para, si tendráformato html, etc.

or die manda un mesaje si ocurre un error y detiene el proceso

Page 102: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 100

Código.

En la línea 2 se carga una función llamada emailValido que se explicaraposteriormente.

En la línea 4 se checa que la página se carga mediante el método POST. Las líneas 9, 10 y 11 se recuperan los datos que provienen del formulario definido

en phpcodigo3904.html. El correo se envia mediante el código definido en la línea 10, siempre y cuando

tenga un destino, un asunto, un mensaje y un correo valido.

Page 103: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 101

Convertir números a letras

La función que se presenta a continuación convierte números a letras. El número aconvertir debe ser un entero positivo menor a 999,999, 999,999.

La línea 3 (Editada para fines de presentación) declara un array con larepresentación alfabética de los números comprendidos entre 1 y 29. Estacaracterística se debe a que dichos números no siguen un patrón para suescritura.

La línea 7 declara un arreglo asociativo que contiene la conversión de los números30, 40 ... y 90.

La línea 9 obtiene el módulo 10 de n. Si el módulo 10 de n es cero se regresa la posición asociada a n en el vector

decenas(línea 9) Si el módulo 10 de n es diferente de cero. Se regresa la posición asociada a n en

el vector decenas y se hace un llamado a la función básico. La línea 14 declara un arreglo asociativo para la representación alfabética de los

números 100,200, ... y 900. La línea 20 hace uso de un operador ternario para poder manejar la escritura de

los números comprendidos entre 101 y 199. En la línea 27 se obtiene la longitud de n. En el caso de los miles está longitud

varía entre 4 y 6. substr($cadena, -3) obtiene los últimos 3 caracteres de la cadena, línea 28.

Page 104: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 102

Page 105: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 103

Gráficos

La gráfica es una de las herramientas más útiles en el estudio de la mayoría de lasdisciplinas, ya que permite una visión de conjunto del fenómeno sometido a investigación, másrápidamente perceptible que la observación directa de los datos numéricos y alfanuméricos. Susaplicaciones son múltiples y variadas en casi todo el quehacer humano.

Existen diversas librerías escritas para PHP gratuitas y de paga, su selección dependedel objetivo y el precio. En este punto abordaremos el uso de JpGraph librería de uso librecompletamente escrita en PHP y funcional para scripts PHP. JpGraph es una librería orientada aobjetos para PHP >= 5.1

Gráfica X - Y

A continuación se presentan las temperaturas (mínimo, media y máxima) promedio enla ciudad y puerto de Veracruz, Ver. México

En la línea 2 y 3 se carga la librería JpGraph. Las líneas 4, 5 y 6 se encargan de definir los datos mediante arreglos para cada serie En las líneas 7 al 13 se definen las características de las gráficas. Donde Graph( Ancho,

Alto), crea un objeto de tipo gráfica En las líneas 15 al 17, se definen el eje X en este caso meses en español. Las líneas 20 al 22, definen las series en la gráfica La línea 24 agrega físicamente las series a las gráficas y la línea 25 imprime la gráfica.

Page 106: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 104

Gáfica de barras

El ejemplo describe los resultados oficiales del examen de admisión 2010 del InstitutoTécnologico de Veracruz.

La línea 11 se encarga de posicionar las leyendas de cada serie en nuestro casoingresos a primer semestre e ingresos al semestre cero.

La línea 15 y 20 definen el formato de presentación de los datos, en este caso %0.0findica que los valores se presentaran como enteros.

La propiedad SetFillGradient (líneas 16 y 21) configuran el degradado de los coloresen las barras

Page 107: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 105

El método Stroke nos permite mostrar la gráfica (línea 28)

Gráficas de pastel

Las gráficas de pastel sirven para expresar porcentajes o conteos de variablescualitativas (ordinales o nominales).

PiePlot crea una instancia de una gráfica de pastel (línea 5)

Las etiquetas se crean en la línea 20 se definen las etiquetas de los datos y surepresentación (.1f) expresa un decimal.

Page 108: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 106

Page 109: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 107

3.8 Procesado de formularios.PHP se hizo pensando en un uso sencillo con los formularios HTML, através de PHP

podemos validar y valorar el contenido de los formularios, estos los podemos crear HTML conetiquetas <form> e <input>.

Desde PHP usaremos las variables que representan los datos del formulario.

Ejemplo

Vamos a realizar un simple formulario HTML con una caja de texto y un botón de"Submit".

Lo que haremos será hacer que el action del formulario sea mostrar la pagina "valorar.php" y comomethod pondremos "post"

<form action="valorar.php" method="post">Su nombre:<input type="text" name="nombre" /><input type="submit" value="Enviar"/></form>

Ahora crearemos la pagina valorar.php:

<?phpecho "Hola $_POST[nombre], bienvenido a PHP";?>

Page 110: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 108

3.9 Sesiones.Una sesión es la secuencia de páginas que un usuario visita en un sitio web. Desde que

entra en nuestro sitio, hasta que lo abandona.

Las sesiones básicamente son varibles globales que nos permiten almacenar datos quenecesiten volver a ser usados en otros accesos a la página. Cuando una persona entra a una páginaque utiliza sesiones automáticamente se crea un archivo de session en los archivos temporales delservidor y en este archivo es donde se guardan los datos que nosotros necesitamos almacenar.

Este archivo posee el mismo nombre que su "id". El archivo se mantendra mientras tenga activo sunavegador y se destruye al cerrar el navegador.

Para que una página use sesiones debemos inicializarla con la funcion session_start(), la cual creauna nueva sesión o retoma una creada en otra página(del sitio).

Las sessiones propagan su SID(SESSION ID) de dos posibles maneras, según php.ini, por cookieso por url, es decir agregando a todos los posibles link el SID de la sesion.

Otra razón por la que la sesiones suelen ser muy utilizadas es para la autentificación, determinandoel acceso a la página según alguna variable específica de la sesión.

Funciones de gestión de sesiones

función Significado

session_start();

Si es la primera solicitud genera un identificadorde sesión aleatorio cuyo nombre serásess_IDsesión; si es otra solicitud continua lasesión iniciada anteriormente.

session_destroy();Elimina todos los datos asociados con unasesión, borra el archivo en el servidor pero noborra la cookie.

session_unset(); Borra una variable de sesión.

session_id([nombre]); Si no le proporcionamos ningún parámetro nosda el identificador de sesión; si le

Page 111: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 109

función Significado

proporcionamos el parámetro nombre cambia elvalor del identificador por el parámetro nombre.

session_name([nombre]);

Si se invoca sin parámetro devuelve el nombrede la variable interna que tiene el id de sesiones;si se pasa parámetro cambia el nombre de lasesión.

session_get_cookie_params(); Obtiene los parámetros de la cookie de la sesión

session_cache_limiter([cache_limiter]);Si se le proporciona valor modifica el valor pordefecto en cambio sino se muestra el caché quetiene por defecto.

session_regenerate_id() Actualiza el id de sesión activa con uno másreciente

session_encode(); Codifica los datos de la sesión actual en unacadena

session_decode(cadena);

Descodifica la cadena que recibe comoparámetro y que contiene la información desesión, después de usar esta función seactualiza la información de sesión.

session_save_path([path]);Devuelve la ruta al directorio donde se guardanlos archivos asociados a la sesión. El efecto solodura en el script actual.

session_module_name([modulo]);

Devuelve el nombre del módulo que se usa pararealizar la gestión de sesiones. Cuando seinvoca un parámetro se usa como nuevo gestorde sesiones.

session_set_save_handler(open,close,read,write,destroy,gc);

Permite definir su propio manejador para almacenar la información asociada con una sesión.Deesta forma los datos pueden ser metidos en una base de datos en vez de en un archivo. Tenemosque pasarle como parámetro toda la información necesaria para crear y destruir sesiones.

Page 112: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 110

Iniciando con sesiones: Evitando accesos indeseados

En la línea 2 se inicia la sesión - session_star() - Declaramos una variable llamada usuario (línea 3) de tipo session Header nos envia a la página específicada (línea 4)

<?php@session_start();$_SESSION['usuario'] = 'ProgramacionWEB';header("location:0312InicioSesiona.php");

?>

En la línea 3 del segundo programa checamos que se recibió la variables esperada, paraevitar accesos indeseados (línea 6)

Se elimina la variable de sesión (línea 5).

<?php@session_start();if($_SESSION['usuario'] == 'ProgramacionWEB') {

echo 'Usuario: '.$_SESSION['usuario'];unset($_SESSION['usuario']);

} else echo 'Te equivocaste';?>

Contador de visitas con sesiones

Mediante el siguiente ejemplo se implementa un contador de visitas

La línea 2 captura el id de la sección Si la variable de sección "visitas" existe la incrementa, caso contrario la crea y la inicia en 1

(línea 3)

<?php$nombre_anterior = session_id();if ($nombre_anterior == '') session_start();($_SESSION['visitas'])

? $_SESSION['visitas']++: $_SESSION['visitas'] = 1;?>

Page 113: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 111

Note que en realidad este código cuenta el número de veces que recargamos la página durante lasesión

Control de sesiones y autentificación

En esta sección crearemos una forma de autentificación que puede ser usada en múltiplessituaciones

Crear una tabla mysql llamada usuarios e insertar un registro. La función MD5 encripta el password

CREATE TABLE IF NOT EXISTS usuarios (usuario CHAR(25) NOT NULL,password CHAR(255) NOT NULL

) ENGINE = InnoDB DEFAULT CHARSET = latin1;

INSERT INTO usuarios VALUES ('root','bingo');

0312Sesion.php

La línea 2 inicia la sesión La línea 3 checa si esta logeado el usuario. De ser así lo envia a la página

0312PaginaSegura.php, en caso contrario al enviar el login y el password será enviado a lapágina 0312Login.php

<?phpsession_start(); // Iniciar sesión// Checa, si el usuario esta logeadoif (isset($_SESSION['usuario'])) {

header('Location: 0312SesionPaginaSegura.php');}

?><table border='0'><form id='forma' name='forma' method='POST'

action='0312SesionLogin.php'><tr><td>Usuario</td><td>:</td><td><input name='usuario'

type='text' size='25' maxlength='25'></td></tr><tr><td>Password</td><td>:</td><td><input name='password'

type='password' size='25' maxlength='25'></td></tr><tr><td></td><td></td><td><input name='login'

type='submit' id='login' value='Accesar'></td></tr></form></table>

Page 114: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 112

0312SesionLogin.php

En la línea 4 y 5 se realiza la configuración de la conexión a la base de datos mysql_real_escape_string — Escapa caracteres especiales en una cadena para ser usado

en una sentencia SQL para evitar la inyección de código SQL La variable de sesión usuario se define si la consulta regresa un único registro. Si somos usuarios registrados nos envia a la pagína 0312SesionPaginaSegura.php De no ser un usuario registrado la línea 20 nos envia a la página de 0312Sesion.

<?php@session_start(); // Iniciar sessión// Incluir la configuración para la conexión a la base de datosinclude('ruta.inc');$conexion = mysql_connect( $ruta, $login, $password)

or die(mysql_error());mysql_select_db( $db, $conexion ) or die(mysql_error());$sql = "SELECT * FROM usuarios WHERE (usuario = '";$sql .= mysql_real_escape_string($_POST['usuario']);$sql .= "') and (password = '"$sql .= mysql_real_escape_string(md5($_POST['password']))."')";$resultado = mysql_query($sql, $conexion);// Checa el usuario y el password$nr = mysql_num_rows($resultado);mysql_close($conexion);if ($nr == 1) {

// Establece la variable de sesión usuario$_SESSION['usuario'] = $_POST['usuario'];// nos envia a la página seguraheader('Location: 0312SesionPaginaSegura.php');

} else {// nos envia a la página inicialheader('Location: 0312Sesion.php');

}?>

Page 115: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 113

0312SesionPaginaSegura.php

La línea 2 inicia la sesión La línea 5 checa que la variable de sesión usuario no exista de ser así lo envia a la página

0312Sesion.php -intento indebido de acceso a la página-. De existir borra la variable de sesión para evitar accesos posteriores y maneja el código html

<?phpsession_start(); // Inicia sesión// Si la sesión de usuario no se establece,// esta página saltará a página de accesoif (!isset($_SESSION['usuario'])) {

header('Location: 0312Sesion.php');} else session_unset('usuario');//Borra la variable de sesión

?>

<html><head>

<title>Página segura</title></head>

<body><p>Esta es una página segura con sesiones: <b><?php echo $_SESSION['usuario']; ?></b><br>Usted puede poner su información restringida aquí.</p><p><a href="0312SesionLogout.php">Desconectarse</a></p>

</body></html>

0312SesionLogout.php

Esta página destruye las variables de sesión, la misma sesión y nos reenvia automáticamente a lapágina 0312Sesion.php.

<?phpsession_start();

session_unset();session_destroy();header('Location: 0312Sesion.php');

?>

Page 116: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 114

3.10 Conectividad entre el servidor Web y el servidor de base de datos.PHP puede conectarse con bases de datos de dos formas: mediante el uso directo de

funciones propias del intérprete que dependen del gestor de base de datos usadas o a tráves delestándar ODBC (Open Data Base Connectivity).

En PHP el trabajo con la base de datos se basa en tres etapas fundamentales:

1. Establecer contacto con la base de datos2. Realizar las operaciones necesarias3. Cerrar los recursos empleados

Conectar con una base de datos MySQL - PHP

Para conectarse con una base de datos es necesario crear una conexión con elservidor. Esto se logra en PHP mediante el uso de la función mysql_connect() . Sintaxis

mysql_connect($ruta, $usuario, $password);

Parámetro Descripción

$ruta Opcional. Específica el servidor al cual se conecta. El valor por defecto es"localhost:3306".

$usuario Opcional. Identifica el usuario. El valor por defecto es el nombre deusuario propietario del proceso.

$password Opcional. El valor por defecto es "". No recomendado

ruta invariablemente en un servidor de paga o remoto sera LOCALHOST

Ejemplo de conexión de una base de datos MySQL desde PHP

Línea 6 mediante la función mysql_connect nos conectamos al gestorMySQL

La función mysql_error, devuelve el texto del mensaje de error de laúltima operación MySQL

Page 117: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 115

Mediante la función mysql_select_db seleccionamos la base datos(Línea 8)

mysql_close cierra la conexión a la base de datos (Línea 10).

<?php$ruta = "localhost";$login = "mi_login";$password = "mi_password";$db = "miBaseDatos";$conexion = mysql_connect( $ruta, $login, $password)

or die(mysql_error());mysql_select_db( $db, $conexion ) or die(mysql_error());echo "conectado bravo!!!!!!";mysql_close($conexion);

?>

Crear una base de datos en MySQL - PHP

La sentencia CREATE DATABASE es usada para crear una base de datos en MySQL.Su sintaxis es la siguiente:

CREATE DATABASE nombre

Para generar esta sentencia desde PHP usaremos las siguientes funciones:

La función mysql_connect() nos conecta al servidor mysql con los parámetrosruta, login y password. $ruta indica el sitio donde estaran nuestros datos. La rutalocalhost funciona regularmente cuando nos conectamos a un servidor instaladoen nuestra pc o aun servidor de paga.

La funcion mysql_query ejecuta una sentencia SQL. La función mysql_close() nos lleva los datos de la memoria principal a un

almacenamiento secundario. die muestra el mensaje de error indicado por pantalla y finaliza el script actual en

el punto en el que se encuentre. No devuelve valor alguno.

Ejemplo de creación de una base de datos MySQL desde PHP

mysql_connect (línea 5) hace una conexión a la base de datos mysql_query (línea 10) hace una consulta en este caso crea la base

de datos. mysql_close (línea 16) cierra la conexión a la base de datos

Page 118: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 116

<?phpinclude("ruta.inc");$conexion = mysql_connect($ruta,$usuario, $password);if (!$conexion) {

die('Imposible conexión al servidor: '. mysql_error());}$sentencia = "CREATE DATABASE IF NOT EXISTS prograwe_miBD";if (mysql_query($sentencia, $conexion)) {

echo "Base de datos creada";} else {

echo "Error al crear la base de datos: ".mysql_error();}mysql_close($conexion);

?>

3.11 Manejo de archivos.Hasta el momento almacenamos datos en constantes, variables y arreglos este

almacenamiento es temporal y se pierde cuando termina la ejecución del programa. La solucióncomputacional es almacenar dichos datos en una fuente de almacenamiento secundario como porejemplo un disco duro o pendrive entre otros medios a fin de que persistan aun después de laejecución del programa que los crea y puedan ser usados inclusive por otros programas.

Para lograr esto los datos se almacenan en un recipiente llamado archivo, elprocesamiento de archivos es una herramienta invaluable de programación. Existen diversos tiposde archivos y su descripción escapa del alcance de este curso.

Page 119: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 117

Sin embargo, mis caros y estimados lectores simplemente cualquier cosa almacena ensu disco duro o en su pendrive es un archivo.

Los archivos que PHP pueden ser secuenciales y binarios. Los archivos secuencialesson archivos de texto y los binarios pueden almacenar gráficos y diversos formatos de información.Básicamente responden a las siguientes operaciones básicas:

abrir borrar cerrar copiar escribir leer renombrar

Desde las operaciones básicas como copiar, mover y eliminar, hasta operaciones queexigen una cierta complejidad son requeridas para la configuración de páginas Web.

Función Descripción Sintaxis

copy Copia un archivo copy($origen, $destino)

rename Cambia el nombre del archivo de $antes a$despues

rename($antes,$despues)

unlink Borra el archivo unlink($archivo)

Manejo de imagenes

A continuación se presentan dos ejemplos, para mostrar la totalidad de las imagenes de unacarpeta.

Ejemplo:

La función PHP opendir() se encarga de habilitar una ruta a un subdirectorio. La función readdir() se encarga de leer un archivo o subdirectorio. strlower() convierte el contenido de una cadena a minúscula.

Page 120: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 118

substr() extrae una subcadena de una cadena, en este caso por ser el parámetro negativoextrae los últimos cuatro carácteres (línea 10). El objetivo es extraer la extensión del archivo.

closedir() cierra la ruta al subdirectorio.

<?phpif ($gestor = opendir('../imagenes')) {

// Abre un gestor de directoriosecho "<table border=1 align='center'>";echo "<tr>";$i=0;while (false !== ($archivo = readdir($gestor))) {

//readdir: Lee un elemento del directorio//$gestor abierto previamente//con opendir y desplaza el puntero al elemento siguienteif ($archivo != "." and $archivo != "..") {//checa que no sea subdirectorio$extension = strtolower(substr($archivo, -4));//strlower pasa a minuscula una cadena en este caso//los 4 últimos caracteres//de la cadenaif (($extension == '.jpg') or ($extension == '.gif')

or ($extension == '.png')) {if ($i==4) {// Cuatro imagenes por renglón$i=0;echo "</tr>";echo "<tr>";

}$i++;echo "<td>";echo "<a href='../imagenes/$archivo'>";echo "<img src='../imagenes/$archivo'";echo "border='0' ></a>";echo "</td>";

}}

}echo "</tr>";echo "</table>";closedir($gestor); //Cierra el gestor

}?>

Page 121: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 119

Ejemplo:

La función glob() realiza una búsqueda por todos los nombres de ruta que coincidan concierto patrón. En este caso con los gráficos validos para html.

sort() ordena los nombres de los archivos encontrados. el ciclo foreach recorre el arreglo de archivos.

<?phpecho "<table border=1 align='center'>";echo "<tr>";$i = 0;//carga las imagenes de la carperta//La función glob() realiza una búsqueda por todos los nombres//de ruta que coincidan con patrón$ruta = "../imagenes/";$imagenes = glob($ruta . "{*.jpg, *.gif, *.png}", GLOB_BRACE);sort($imagenes);//Recorre el vectorforeach($imagenes as $foto){if ($i==4) {

$i=0;echo "</tr>";echo "<tr>";

}$i++;echo "<td><a href='".$foto."'><img src='".$foto."/></a></td>";

}echo "</tr>";echo "</table>";

?>

Page 122: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 120

Para el siguiente ejemplo usaremos 4 funciones básicas de manipulación de archivos

Función Descripción Sintaxis

filesize Obtiene el tamaño del archivo filesize($archivo);

fopen Abre un archivo y le asigna un identificador id.$id =fopen($archivo,$modo);

fpassthruLee completamente el archivo y lo muestra. El cierredel archivo es automático al terminar el volcado delarchivo.

fpassthru($id);

header

Permite modificar las cabeceras que envía el servidoral navegador. Estas cabeceras, que siguen elprotocolo HTTP, es la primera información que recibeel navegador en cada petición que realiza, antes queel contenido del archivo.

header("mensaje");

Ejemplo: Mostrar una imagen

fopen además de abrir un archivo, obtiene un apuntador a su contenido. fopen solo debe usarsepara abrir un archivo cuyo contenido vamos a manipular. Si unicamente queremos recuperar sucontenido (y por ejemplo mostrarlo en pantalla), hay otras funciones mas adecuadas.

Los modos en los que se puede abrir un archivo son:

r Sólo lectura. El puntero al comienzo del archivo r+ Lectura y escritura; apuntador al inicio del archivo w Sólo escritura, si no existe el archivo lo crea, si existe lo convierte en archivo de longitud

cero y el apuntador se coloca en el inicio (sobreescribe el contenido, vamos) w+ Lectura y escritura, si existe lo trunca a tamaño cero, y se situa al inicio, si no existe lo

crea a Modo append, sólo escritura, si no existe lo crea. Si existe, el apuntador se coloca al final

del archivo (listo para escribir a continuacion del contenido) a+ Modo append, lectura y escritura, si no existe lo crea; apuntador al final del archivo b es un flag adicional a cualquiera de los anteriores que indica que vamos a operar sobre un

archivo binario (en contraposicion a archivo de texto) como una imagen o un sonido. En

Page 123: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 121

algunos sistemas operativos como linux no existe esta diferencia asi que el indicador b seráignorado.

Las líneas 7 y 8 envían cabeceras HTTP para indicar el tamaño y formato del archivo.

fpassthru (línea 11) hace un volcado del archivo previamente definido en la línea 4.

<?php// Abree el archivo en modo binario$imagen = '../imagenes/Shakira02.png';$id = fopen($imagen, 'rb');

// Envia las cabecerasheader('Content-Type: image/png');header('Content-Length: ' . filesize($imagen));

// imprime el archivo y detiene el scriptfpassthru($id);exit;

?>

Una versión reducida de este código lo podemos encontrar en:

La función file_get_contents (línea 4) permite leer el contenido de un archivo en una cadena.

<?header( "Content-type: image/png");

$archivo = '../imagenes/Shakira02.png';$imagen = file_get_contents($archivo);echo $imagen;

?>

Leer un archivo de texto

En la línea 2 se genera un apuntador al archivo alumnos.txt La función feof (línea 4) comprueba si se encuentra el fin del archivo La función fgets lee el contenido de un archivo hasta encontrar el fin de línea (línea 4) fclose (línea 5) cierra el apuntador

Page 124: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 122

<?php$archivo = fopen('0310alumnos.txt', 'r');//Imprime una linea hasta que el//final del archivo es encontradowhile(!feof($archivo)) {

echo fgets($archivo)."<br />";}fclose($archivo);

?>

Otra forma de hacerlo es mediante la función fread (línea 6) la cual lee el contenido deun archivo.

<?php// obtiene el contenido de un archivo en//una cadena$archivo = '0310alumnos.txt';$id = fopen($archivo, 'r');$contenido = fread($id, filesize($archivo));echo $contenido;fclose($id);

?>

Contador de visitas

file_exists comprueba si un archivo existe (línea 2) La línea 9 y 12 crean un puntero al archivo La línea 13 recupera el número de visitantes La línea 14 incrementa en uno el número de visitantes o reinicia la cuenta si el archivo no

tiene el dato. fputs guarda la información en el archivo Las líneas 21 al 21 imprimen el número de visitantes mediante imagenes de los dígitos fclose (línea 25) cierra el apuntador ysalva el contenido del archivo.

Page 125: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 123

<?php/********************************************************* Contador de visitas programado en PHP **************** Modificado Jose Evaristo Pacheco Velasco ******** Mas utilidaddes para webmsters en www.desenredate.com********************************************************/$destino = '0310visitante.dat';if (!file_exists($destino)) { // si el archivo no existe lo crea

$abrir = fopen($destino, 'w');$cuenta = '';

} else {$abrir = fopen($destino,'r');$cuenta = trim(fread($abrir,filesize($destino)));

}if ($cuenta != '') $cuenta++; else $cuenta = 1;fclose($abrir);$abrir = fopen($destino,'w');fputs($abrir, $cuenta);echo "<p align='center'>Eres el visitante:</p>";// Imprime contadorfor($i = 0; $i < strlen($cuenta); $i++) {

$imagen = substr($cuenta, $i, 1);$contador .= "<img alt='$imagen ' src='$imagen.gif'>";

}fclose($abrir);echo "<p align='center'> $contador </p>";

?>

3.12 Seguridad.La seguridad y funcionamiento sin duda uno de los temas más importantes al

desarrollar un portal web. La validación de datos, es por tanto fundamental.

El no cuidarnos de esto, puede traernos problemas de inyección SQL,CrossScripting, Cookie Poisoning, amenazas de seguridad en la nube (Cloud Computing)y un largo etc, etc, que compromete la estabilidad del sitio y el recurso más valioso de nuestro sitio"la información".

El filtrado de datos es una de las piedras angulares en cualquier aplicación en el temade seguridad, independientemente del lenguaje con el cual se desarrolle.

Page 126: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 124

Page 127: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 125

Filtrado de datos

Una de las mayores fortalezas de PHP es su facilidad de uso. Lamentablemente, estemismo beneficio se usa en contra de PHP, programadores con poca experiencia olvidan usarmedidas de seguridad o carecen de los conocimientos para generar una clase que valide los datosintroducidos por los usuarios finales.

Se han desarrollado diversas clases de validación, algunas mejores que otros, con igual o mayornúmero de métodos para hacer la misma tarea estas no estan estandarizadas. PHP versión 5

proporciona la extensión Filter cuyo objetivo es realizar esta tarea en forma sencilla, robusta y la

estandarización de la entrada de datos del usuario. Las funciones base se presentan a continuación.

Función Descripciónfilter_has_var Verifica si la variable del tipo especificado existe

filter_list Devuelve una lista de todos los filtros soportados

filter_varFiltra una variable con un filtro específico. Devuelve los datos

filtrados, o FALSE si el filtro falla.

filter_input Obtiene una variable desde afuera de PHP y opcionalmente lafiltra

Ejemplo de filter_has_var

La sintaxis es:

filter_has_var(tipo, variable)

Parámetro Descripción

tipo Requerido. específica el tipo que deseamos checar. Los posiblestipos son:

Page 128: Antologia de Programacion Web

Programación Web Unidad III

L.I. Esteban Sánchez Mendoza Página 126

Parámetro Descripción

INPUT_GET INPUT_POST INPUT_COOKIE INPUT_SERVER INPUT_ENV

variable Requerida. Específica la variable que deseamos checar

El objetivo del ejemplo es tratar de frenar invasiones a la seguridad asegurandonos queno introduzcan datos mediante la URL. Este método no es infalible contra la inyección de códigoSQL, pero es una aproximación..<?php

if(!filter_has_var(INPUT_POST, 'login') or!filter_has_var(INPUT_POST, 'key')) {echo('Sin Peligro');

} else die('Por aquí no entras');?>

Mediante la función filter_list es posible recuperar la lista de filtros soportados por nuestro servidor ycon filter_id recuperados el inditificador del filtro.

Ejemplo del uso de filter_list y filter_id.

La línea 5 recorre el vector filter_list La línea 6 imprime el nombre del filtro extraido en la línea 5 la línea 7 imprime el id del filtro

<body><table>

<tr><td>Nombre del Filtro</td><td>ID</td></tr><?php

foreach( filter_list() as $id =>$filter) {echo "<tr><td>".$filter.'</td><td>';echo filter_id($filter).'</td></tr>'."\n";

}?></table>

</body>

Page 129: Antologia de Programacion Web

Programación Web Unidad IV

L.I. Esteban Sánchez Mendoza Página 127

PROCESAMIENTO DEL LADO DEL CLIENTE

4.1 Lenguaje Script del cliente.El navegador es una especie de aplicación capaz de interpretar las órdenes recibidas

en forma de código HTML fundamentalmente y convertirlas en las páginas que son el resultado dedicha orden.

Cuando nosotros pinchamos sobre un enlace hipertexto, en realidad lo que pasa es queestablecemos una petición de un archivo HTML residente en el servidor (un ordenador que seencuentra continuamente conectado a la red) el cual es enviado e interpretado por nuestronavegador (el cliente).

Page 130: Antologia de Programacion Web

Programación Web Unidad IV

L.I. Esteban Sánchez Mendoza Página 128

Así pues, podemos hablar de lenguajes de lado servidor que son aquellos lenguajesque son reconocidos, ejecutados e interpretados por el propio servidor y que se envían al cliente enun formato comprensible para él. Por otro lado, los lenguajes de lado cliente (entre los cuales no sólose encuentra el HTML sino también el Java y el JavaScript los cuales son simplemente incluidos enel código HTML) son aquellos que pueden ser directamente "digeridos" por el navegador y nonecesitan un pretratamiento.

Cada uno de estos tipos tiene por supuesto sus ventajas y sus inconvenientes. Así, porejemplo, un lenguaje de lado cliente es totalmente independiente del servidor, lo cual permite que lapágina pueda ser albergada en cualquier sitio sin necesidad de pagar más ya que, por regla general,los servidores que aceptan páginas con scripts de lado servidor son en su mayoría de pago o susprestaciones son muy limitadas. Inversamente, un lenguaje de lado servidor es independiente delcliente por lo que es mucho menos rígido respecto al cambio de un navegador a otro o respecto alas versiones del mismo.

Page 131: Antologia de Programacion Web

Programación Web Unidad IV

L.I. Esteban Sánchez Mendoza Página 129

Lenguajes del lado cliente

HTML

El lenguaje llamado HTML indica al navegador donde colocar cada texto,cada imagen o cada video y la forma que tendrán estos al ser colocados enla página.

Elel lenguaje consta de etiquetas que tienen esta forma <B> o <P>. Cadaetiqueta significa una cosa, por ejemplo <B> significa que se escriba ennegrita (bold) o <P> significa un párrafo, <A> es un enlace, etc. Casi todaslas etiquetas tienen su correspondiente etiqueta de cierre, que indica que apartir de ese punto no debe de afectar la etiqueta. Por ejemplo </B> se utilizapara indicar que se deje de escribir en negrita. Así que el HTML no es másque una serie de etiquetas que se utilizan para definir la forma o estilo quequeremos aplicar a nuestro documento. <B>Esto está en negrita</B>.

Esta página es un claro ejemplo de uso del HTML.

JAVASCRIPT

Javascript es un lenguaje de programación utilizado para crear pequeñosprogramitas encargados de realizar acciones dentro del ámbito de una páginaweb. Se trata de un lenguaje de programación del lado del cliente, porque esel navegador el que soporta la carga de procesamiento. Su uso se basafundamentalmente en la creación de efectos especiales en las páginas y ladefinición de interactividades con el usuario.

Las sentencias escritas en javascript se encapsulan entre las etiquetas<script> y </script>. por ejemplo, si en el código de una página Webincluimos la sentencia

<script>window.alert("Bienvenido a mi sitio web. Gracias...")</script>

al abrir la página con el navegador se nos mostrará una ventana de

bienvenida

APPLETS DE JAVA

Page 132: Antologia de Programacion Web

Programación Web Unidad IV

L.I. Esteban Sánchez Mendoza Página 130

Es otra manera de incluir código a ejecutar en los clientes que visualizan unapágina web. Se trata de pequeños programas hechos en Java, que setransfieren con las páginas web y que el navegador ejecuta en el espacio dela página.

Los applets de Java están programados en Java y precompilados, es por elloque la manera de trabajar de éstos varía un poco con respecto a loslenguajes de script como Javascript. Los applets son más difíciles deprogramar que los scripts en Javascript y requerirán unos conocimientosbásicos o medios del lenguaje Java.

La principal ventaja de utilizar applets consiste en que son mucho menosdependientes del navegador que los scripts en Javascript, inclusoindependientes del sistema operativo del ordenador donde se ejecutan.Además, Java es más potente que Javascript, por lo que el número deaplicaciones de los applets podrá ser mayor.

Como desventajas en relación con Javascript cabe señalar que los appletsson más lentos de procesar y que tienen espacio muy delimitado en la páginadonde se ejecutan, es decir, no se mezclan con todos los componentes de lapágina ni tienen acceso a ellos. Es por ello que con los applets de Java nopodremos hacer directamente cosas como abrir ventanas secundarias,

controlar Frames, formularios, capas, etc.

VISUAL BASIC SCRIPT

Es un lenguaje de programación de scripts del lado del cliente, pero sólocompatible con Internet Explorer. Es por ello que su utilización estádesaconsejada a favor de Javascript.

Está basado en Visual Basic, un popular lenguaje para crear aplicacionesWindows. Tanto su sintaxis como la manera de trabajar están muy inspiradosen él. Sin embargo, no todo lo que se puede hacer en Visual Basic lopodremos hacer en Visual Basic Script, pues este último es una versión

Page 133: Antologia de Programacion Web

Programación Web Unidad IV

L.I. Esteban Sánchez Mendoza Página 131

reducida del primero.

El modo de funcionamiento de Visual Basic Script para construir efectosespeciales en páginas web es muy similar al utilizado en Javascript y losrecursos a los que se puede acceder también son los mismos: el navegador.

FLASH

Flash es una tecnología, y un programa, para crear efectos especiales enpáginas web. Con Flash también conseguimos hacer páginas dinámicas dellado del cliente. Flash en realidad no es un lenguaje; Sin embargo, situvieramos que catalogarlo en algún sitio quedaría dentro del ámbito de laspáginas dinámicas de cliente.

Para visualizar las "películas" Flash, nuestro navegador debe tener instaladoun programita (plug-in) que le permita visualizarlas.

CSS

CSS, es una tecnología que nos permite crear páginas web de una maneramás exacta. Gracias a las CSS somos mucho más dueños de los resultadosfinales de la página, pudiendo hacer muchas cosas que no se podía hacerutilizando solamente HTML, como incluir márgenes, tipos de letra, fondos,colores... Incluso podemos definir nuestros propios estilos en un archivoexterno a nuestras páginas; así, si en algún momento queremos cambiaralguno de ellos, automáticamente se nos actualizarán todas las páginasvinculadas de nuestro sitio.

CSS son las siglas de Cascading Style Sheets, en español Hojas de estilo enCascada.

Page 134: Antologia de Programacion Web

Programación Web Unidad IV

L.I. Esteban Sánchez Mendoza Página 132

4.2 Modelo de objetos con lenguaje Script.¿Qué es el DOM?

El DOM es una jerarquía de objetos predefinidos que describen los elementos de lapágina web que está mostrando el navegador, así como otras características del proceso denavegación (como son el historial, el tamaño de la ventana de navegación o el contenido de la barrade estado del navegador). Si no se está familiarizado con la programación orientada a objetos, elconcepto de objeto puede resultar algo difuso. Un objeto es, en el fondo, un conjunto de variables yfunciones que actúa sobre dichas variables, encapsuladas en un mismo paquete. El acceso a lasfunciones y a las variables se realiza mediante una interfaz bien definida que aisla al programador dela necesidad de conocer cómo están implementadas internamente dichas funciones. De este modo,la programación orientada a objetos resulta muy intuitiva, y más próxima al conocimiento humano.

Veamos un ejemplo sencillo. En JavaScript, para escribir un mensaje en un cuadro dediálogo utilizamos:

window.alert("¡Hola mundo!")

Page 135: Antologia de Programacion Web

Programación Web Unidad IV

L.I. Esteban Sánchez Mendoza Página 133

Si bien no conocemos como funciona internamente la función alert(), sabemos cómoinvocarla. La abstracción es tal que nos basta con saber que se trata de una función del objetowindow. A estas funciones se las llama métodos, y a las variables propiedades.

3. Compatibilidad entre los DOMs

Aunque puede parecer paradigmático, actualmente no existe una gran diferencia entreel soporte de JavaScript que ofrecen los fabricantes de los dos navegadores dominantes, NetscapeNavigator y Microsoft Internet Explorer. Lo que verdaderamente les diferencia es el Modelo eObjetos de Documento que incorporan.

De hecho, el DOM podría considerarse algo independiente del propio lenguaje descripts. Esta es la idea recogida en el esfuerzo del W3C (World Wide Web Consortium) por obtenerun estándar par el Modelo de Objetos de Documento. El estándar, que está aún en desarrollo, sedivide en 3 partes:

DOM Nivel 1 Core (definiciones fundamentales)

DOM Nivel 1 HTML

DOM Nivel 1 XML

Si este estándar triunfa y tanto Netscape como Microsoft se adhieren a él, el futuro delos scripts para la red será mucho más diáfano, al desaparecer las incompatibilidades entre losdiferentes navegadores (pensemos, por ejemplo, en lo costoso que resulta realizar diferentesversiones de un mismo código para que sea ejecutable por todos los navegadores).

4. El DOM según Netscape

El Modelo de Objetos de Documento que propone Netscape en sus versiones 4.x delNavigator resultaba suficiente cuando el DHTML era sólo una idea. Sin embargo, ahora que es yauna realidad, el DOM de IE 4.x/5.x de Microsoft resulta mucho más potente y versátil. No debeextrañarnos, por tanto, que el futuro estándar del W3C se aproxime al de Microsoft. La futura nuevaversión del Navigator (bautizca como Netscape 6) soportará el DOM estándar del W3C.

Page 136: Antologia de Programacion Web

Programación Web Unidad IV

L.I. Esteban Sánchez Mendoza Página 134

Realmente el DOM del Navigator 4.x es un subconjunto del DOM del IE 4.x/5.x. Esto eslo que hace que el Navigator presente limitaciones importantes en su capacidad de acceder a ciertoselementos de una página y de modificar sus propiedades.

El siguiente esquema muestra el DOM del Netscape Navigator 4.x:

Para establecer una comparación, mostramos a continuación el DOM de Microsoft(aunque sólo hasta un segundo nivel). En este esquema hemos marcado los objetos comunes conNetscape en color verde, y los que sólo soporta Netscape en azul.

Page 137: Antologia de Programacion Web

Programación Web Unidad IV

L.I. Esteban Sánchez Mendoza Página 135

5. Acceso a los elementos del modelo

Para acceder a una propiedad de un objeto del modelo se utiliza la siguientenomenclatura:

nombre_objeto.nombre_propiedad

Para acceder a un método, se utiliza una sintaxis similar:

nombre_objeto.nombre_metodo()

Page 138: Antologia de Programacion Web

Programación Web Unidad IV

L.I. Esteban Sánchez Mendoza Página 136

Entre paréntesis se le pasan al método los argumentos necesarios para su ejecución.Un objeto de JavaScript es, básicamente un array. Esto quiere decir que es posible acceder a laspropieades del objeto utilizando también la sintáxis siguiente:

nombre_objeto["nombre_propiedad"]

Si observamos el DOM de la figura anterior, todos los objetos dependen

jerárquicamente del objeto window. Para acceder al objeto document, sería necesario usar

siempre la sintaxis window.document. Sin embargo, en JavaScript el objeto window es el

objeto por defecto, de modo que puede omitirse.

4.3 Objetos lenguaje Script ínter construidos.String Object: Permite hacer diversas manipulaciones con las cadenas.

Math Object: Posee atributos y métodos asociados a las constantes y funcionesmatemáticas.

Date Object: Permiten la manipulación de datos que representen fechas.

Array Object: Nos da la facilidad de construir arreglos cuyos elementos puedencontener cualquier tipo básico, y cuya longitud se modificará de forma dinámica siempre queañadamos un nuevo elemento.

Boolean Object: Nos permite crear booleanos, esto es, un tipo de dato que es cierto ofalso, tomando los valores true o false.

Number Object: Representa el tipo de dato número.

Page 139: Antologia de Programacion Web

Programación Web Unidad IV

L.I. Esteban Sánchez Mendoza Página 137

4.4 Eventos con lenguaje Script.Eventos con lenguaje script

Un evento es el resultado de la interacción entre un usuario con algún elemento de lainterfaz gráfica que se le presenta. Por ejemplo Hacer clic sobre un botón, cambiar el contenido deun campo de texto o mover el apuntador del ratón sobre un enlace.

Los eventos se pueden capturar de varias formas, aunque se recomienda asociar unmanejador del evento al objeto a capturar el evento. Para cada tipo de evento hay que tener enmente tres elementos: quién lo genera, cuándo ocurre y cuál es el manejador de eventos que sedebe utilizar.

4.5 Validación de entrada de datos del lado del cliente.

La validación del lado del cliente mejora el uso del formulario Web comprobando laentrada de datos del usuario mientras se produce. Al comprobar si se generan errores mientras seintroducen, la validación del lado del cliente permite detectar errores antes de que el formulario Websea enviado, evitando así el viaje de ida y vuelta necesario para la validación del lado del servidor.Por ejemplo, sirve para avisarle al usuario que el campo de email que acaba de llenar no contieneuna dirección de email válida. También permite avisar si falta rellenar campos o que se estánutilizando caracteres no válidos, etc.

Page 140: Antologia de Programacion Web

Programación Web Unidad IV

L.I. Esteban Sánchez Mendoza Página 138

4.6 Consideraciones del soporte del navegador.En la actualidad, la mayor parte de los navegadores son muy versátiles ya que permiten

que el usuario los configure y personalice a su gusto, además, suelen incluir otras funcionalidadescomo servir de cliente de correo electrónico y de noticias, cliente de IRC (chat), etc. A losnavegadores también se les pueden agregar plug-ins (agregados) para mejorar y aumentar suscapacidades e, incluso, con unas cuantas líneas de código se puede crear un navegador propio. Sinembargo, como se ha afirmado anteriormente, hay que poner especial cuidado en la utilización deelementos no estandarizados de forma general, ya que no todos los navegadores soportandeterminados lenguajes o componentes como Java, JavaScripts, marcos, hojas de estilo CSS, DOM(Document Object Model), etc.

Debido a esto último, debemos considerar que tipo de aplicaciones y componentesdeberá soportar el navegador, para ajustarse a las propias necesidades, antes de elegir uno enespecífico<html><head><link href='basico.css' rel='stylesheet' type='text/css' /></head<body><script type='text/javascript'>

function cliente() {var navegador = 'Desconocido';

if (navigator.userAgent.toLowerCase().indexOf('safari') > -1 ) navegador = 'Safari';else if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) navegador = 'Chrome'else if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1 ) navegador = 'Firefox'else if ('\v'=='v') navegador = 'Internet Explorer'else if (/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent)) navegador = 'Opera'

else if (window.external && typeof window.XMLHttpRequest == 'undefined')navegador = 'Internet Explorer 6';

return navegador;}

function idioma() {var idiomaNavegador = new String;if (navigator.language) {

idiomaNavegador = navigator.language;} else { idiomaNavegador = navigator.browserLanguage; }

return idiomaNavegador;}

document.write('<table class="tabla">');

Page 141: Antologia de Programacion Web

Programación Web Unidad IV

L.I. Esteban Sánchez Mendoza Página 139

document.write('<tr><td>Código del navegador : </td><td>' + navigator.appCodeName +'</td></tr>');document.write('<tr><td>Nombre del navegador: </td><td>' + cliente() + '</td></tr>');document.write('<tr><td>Lenguaje: </td><td>' + idioma() + '</td></tr>');document.write('<tr><td>Versión del navegador: </td><td>' + navigator.appVersion + '</td></tr>');document.write('<tr><td>Cookies activados: </td><td>' + navigator.cookieEnabled + '</td></tr>');document.write('<tr><td>Plataforma: </td><td>' + navigator.platform + '</td></tr>');document.write('<tr><td>User-agent header: </td><td>' + navigator.userAgent);document.write('</td></tr></table>');

</script></body></html>http://tuto-mpweb.webcindario.com/indice.html

Page 142: Antologia de Programacion Web

Unidad V.Servicios Web XML

Objetivo:

Integrara los Servicios Web XML al desarrollo de aplicaciones.

Page 143: Antologia de Programacion Web

Programación Web Unidad V.

L.I. Esteban Sánchez Mendoza Página 140

5. Servicios web XML.

5.1 Visión general de servicios Web XML

Un Servicio Web es una colección de protocolos y estándares que sirven para intercambiar datos

entre aplicaciones. Distintas aplicaciones de software desarrolladas en lenguajes de programación

diferentes, y ejecutadas sobre cualquier plataforma, pueden utilizar los servicios web paraintercambiar datos en redes de ordenadores como Internet.

Interoperabilidad de los Servicios Web.

La interoperabilidad se consigue mediante la adopción de estándares abiertos. Las organizaciones

OASIS y W3C son los comités responsables de la arquitectura y reglamentación de los servicios

Web. Para mejorar la interoperabilidad entre distintas implementaciones de servicios Web se ha

creado el organismo WS-I, encargado de desarrollar diversos perfiles para definir de manera más

exhaustiva estos estándares.

5.2 Tecnologías subyacentes.

Estándares empleados en los Servicios Web:

Web Services Protocol Stack: conjunto de servicios y protocolos de losservicios Web.

XML (Extensible Markup Language): Es el formato estándar para los datos que

se vayan a intercambiar.

SOAP (Simple Object Access Protocol) o XML-RPC (XML Remote ProducerCall): Protocolos sobre los que se establece el intercambio.

Otros protocolos: los datos en XML también pueden enviarse de una aplicación

a otra mediante protocolos normales como HTTP (Hypertext Transfer Protocol),FTP (File Transfer Protocol), o SMTP (Simple Mail Transfer Protocol).

Page 144: Antologia de Programacion Web

Programación Web Unidad V.

L.I. Esteban Sánchez Mendoza Página 141

WSDL (Web Services Description Languages): Es el lenguaje de la interfaz

pública para los servicios Web. Es una descripción basada en XML de los

requisitos funcionales necesarios para establecer una comunicación con los

servicios Web.

UDDI (Universal Description, Discovery and Integration): Protocolo para

publicar la información de los servicios Web. Permite a las aplicaciones

comprobar qué servicios web están disponibles.

WS-Security (Web Service Security): Protocolo de seguridad aceptado como

estándar por OASIS (Organization for the Advancement of Structured

Information Standards). Garantiza la autenticación de los actores y la

confidencialidad de los mensajes enviados.

5.2.1 SOAP.SOAP (siglas de Simple Object Access Protocol) es un protocolo estándar que define cómo dos

objetos en diferentes procesos pueden comunicarse por medio de intercambio de datos XML. Esteprotocolo deriva de un protocolo creado por David Winer en 1998, llamado XML-RPC. SOAP fuecreado por Microsoft, IBM y otros y está actualmente bajo el auspicio de la W3C. Es uno de los

protocolos utilizados en los servicios Web.

Los desarrolladores de aplicaciones hoy en día, pueden utilizar la infraestructura de correoelectrónico de Internet para transmitir mensajes SOAP ya sean como mensajes de correo electrónico

de texto o como adjuntos. Los ejemplos que se muestran a continuación muestran un modo detransmitir mensajes SOAP, y deben ser tomados como el modo estándar de hacerlo.

Como ejemplo se muestra la forma en que un cliente solicitaría información de un producto a unproveedor de servicios Web:

Page 145: Antologia de Programacion Web

Programación Web Unidad V.

L.I. Esteban Sánchez Mendoza Página 142

<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"><soap:Body>

<getProductDetails xmlns="http://warehouse.example.com/ws"><productId>827635</productId>

</getProductDetails></soap:Body>

</soap:Envelope>

Y esta sería la respuesta del proveedor:

<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">

<soap:Body>

<getProductDetailsResponse xmlns="http://warehouse.example.com/ws">

<getProductDetailsResult>

<productName>Toptimate 3-Piece Set</productName>

<productId>827635</productId>

<description>3-Piece luggage set. Black Polyester.</description>

<price>96.50</price>

<inStock>true</inStock>

</getProductDetailsResult>

</getProductDetailsResponse>

</soap:Body>

</soap:Envelope>

Page 146: Antologia de Programacion Web

Programación Web Unidad V.

L.I. Esteban Sánchez Mendoza Página 143

A pesar de no ser la única opción posible, HTTP fue elegido como protocolo de transporte por susventajas, para lidiar con cortafuegos, por ejemplo. Otros protocolos como GIOP/IIOP o DCOM

(utilizados en CORBA, RMI y DCOM) suelen ser repelidos por estos cortafuegos.

5.2.2 WSDL.WSDL son las siglas de Web Services Description Language, un formato XML que se utiliza paradescribir servicios Web (algunas personas lo leen como wisdel). La versión 1.0 fue la primera

recomendación por parte del W3C y la versión 1.1 no alcanzó nunca tal estatus. La versión 2.0 seconvirtió en la recomendación actual por parte de dicha entidad.

WSDL describe la interfaz pública a los servicios Web. Está basado en XML y describe la forma decomunicación, es decir, los requisitos del protocolo y los formatos de los mensajes necesarios parainteractuar con los servicios listados en su catálogo. Las operaciones y mensajes que soporta sedescriben en abstracto y se ligan después al protocolo concreto de red y al formato del mensaje.

Así, WSDL se usa a menudo en combinación con SOAP y XML Schema. Un programa cliente quese conecta a un servicio web puede leer el WSDL para determinar qué funciones están disponibles

en el servidor. Los tipos de datos especiales se incluyen en el archivo WSDL en forma de XMLSchema. El cliente puede usar SOAP para hacer la llamada a una de las funciones listadas en el

WSDL.

El WSDL nos permite tener una descripción de un servicio web. Especifica la interfaz abstracta através de la cual un cliente puede acceder al servicio y los detalles de cómo se debe utilizar.

Como vemos, la estructura del WSDL tiene los siguientes elementos:

Tipos de Datos.

<types>: Esta sección define los tipos de datos usados en los mensajes. Se utilizan los tiposdefinidos en la especificación de esquemas XML.

Page 147: Antologia de Programacion Web

Programación Web Unidad V.

L.I. Esteban Sánchez Mendoza Página 144

Mensajes.

<message>: Aquí definimos los elementos de mensaje. Cada mensaje puede consistir en una seriede partes lógicas. Las partes pueden ser de cualquiera de los tipos definidos en la sección anterior.

Tipos de Puerto.

<portType>: Con este apartado definimos las operaciones permitidas y los mensajes intercambiadosen el Servicio.

Bindings.

<binding>: Especificamos los protocolos de comunicación usados.

Servicios.

<service>: Conjunto de puertos y dirección de los mismos. Esta parte final hace referencia a loaportado por las secciones anteriores.

Con estos elementos no sabemos qué hace un servicio pero si disponemos de la informaciónnecesaria para interactuar con él (funciones, mensajes de entrada/salida, protocolos...).

A continuación se muestra un ejemplo de un documento WSDL y sus diferentes secciones. En esteejemplo concreto se implementa un servicio que muestra a partir del nombre de un valor bursátil suvalor actual en el mercado.

Page 148: Antologia de Programacion Web

Programación Web Unidad V.

L.I. Esteban Sánchez Mendoza Página 145

Page 149: Antologia de Programacion Web

Programación Web Unidad V.

L.I. Esteban Sánchez Mendoza Página 146

5.2.3 UDDI.UDDI (Universal Description Discovery and Integration) lenguaje de marcado extensible (XML)

basado en el registro de empresas de todo el mundo se lista en la Internet y un mecanismo pararegistrar y localizar servicios web de aplicaciones. UDDI es una iniciativa de la industria abierta,

patrocinado por la Organización para el Avance de Estándares de Información Estructurada( OASIS ), permitiendo a las empresas a publicar los servicios y descubrir entre sí y definen cómo los

servicios o aplicaciones de software interactúan a través de Internet.

Un registro de empresas UDDI consta de tres componentes:

Páginas blancas - dirección, contacto, y los identificadores conocidos;

Páginas Amarillas - categorizaciones basadas en el estándar industrial taxonomías ;

Páginas verdes - información técnica acerca de los servicios expuestos por la empresa.

Páginas Blancas.

Páginas blancas dan información sobre el negocio de prestación del servicio. Esto incluye el nombrede la empresa y una descripción de la empresa - posiblemente en varios idiomas. Con estainformación, es posible encontrar un servicio del que ya se conocen algunos datos (por ejemplo, lalocalización de un servicio basado en el nombre del proveedor).

Información de contacto de la empresa es también disponible - por ejemplo, la dirección deempresas y número de teléfono y otra información como el número de Dun & Bradstreet SistemaUniversal de Numeración.

Páginas Amarillas.

Páginas amarillas proporcionan una clasificación de los servicios o de negocios, basado en lastaxonomías estándar. Estos incluyen la Clasificación Industrial Uniforme (SIC), la IndustriaNorteamericana del Sistema de Clasificación (SCIAN), o el de las Naciones Unidas estándar Códigode Productos y Servicios (UNSPSC).

Page 150: Antologia de Programacion Web

Programación Web Unidad V.

L.I. Esteban Sánchez Mendoza Página 147

Debido a que una sola empresa puede ofrecer una serie de servicios, puede haber varias páginasamarillas (cada uno describe un servicio) asociado con una página blanca (con información generalacerca de la empresa).

Páginas Verdes.

Páginas verdes se utilizan para describir la forma de acceder a un servicio web, con informaciónsobre los enlaces de servicio. Parte de la información está relacionada con el servicio de Web - talescomo la dirección del servicio y los parámetros y las referencias a las especificaciones de lasinterfaces. Otro tipo de información no se relaciona directamente con el Servicio Web - lo que incluyecorreo electrónico, FTP, CORBA y los detalles de teléfono para el servicio. Debido a un servicio Webpuede tener varios enlaces (como se define en su descripción WSDL), un servicio puede tenermúltiples Páginas Verdes, que cada enlace se necesita tener acceso de otra manera.

5.3 Publicación de un servicio web.La implementación de un servicio Web incluye copiar en el servidor Web el archivo .asmx y los

ensamblados utilizados por el servicio Web, pero que no forman parte de Microsoft .NET Framework.

Por ejemplo, suponga que tiene un servicio Web denominado StockServices. Para implementar esteservicio, crea un directorio virtual en el servidor Web y coloca el archivo .asmx del servicio Web en

dicho directorio. El directorio virtual puede ser también una aplicación Web de los Servicios deInternet Information Server (IIS), aunque no es necesario.

A continuación se ilustra la estructura de directorios de una implementación típica:

\Inetpub

\Wwwroot

\StockServices

StockServices.asmx

\Bin

Page 151: Antologia de Programacion Web

Programación Web Unidad V.

L.I. Esteban Sánchez Mendoza Página 148

Ensamblados que utiliza el servicio Web y que no forman parte de Microsoft .NET Framework.

Elementos publicados con un servicio Web.

Al publicar un servicio Web, se implementan los siguientes elementos en un servidor Web.

Elemento Descripción

Directorio de aplicación Web Actúa como directorio raíz del servicio Web. Los demás archivosse colocan en este directorio.

El directorio debe tener el indicador de aplicación Web de IIS.Archivo<MyXMLWebService>.asmx

Actúa como la dirección URL base para los clientes que llamen alservicio Web. El nombre del archivo puede ser cualquier nombrede archivo válido.

Archivo<MyXMLWebService>.disco

(Opcional) Actúa como mecanismo de descubrimiento para elservicio Web. El archivo .disco no se crea automáticamente paraun servicio Web. Para obtener información sobre la creación de unarchivo de descubrimiento para el servicio Web, vea Cómohabilitar el descubrimiento para servicios Web XML. El nombre delarchivo puede ser cualquier nombre de archivo válido.

Archivo Web.config (Opcional) Si debe reemplazar los valores predeterminados deconfiguración, puede incluir un archivo Web.config. Los serviciosWeb utilizan el archivo de configuración para permitir lapersonalización y extensibilidad del sistema.

Por ejemplo, puede suministrar un archivo Web.config específicodel servicio Web si se requiere autenticación para el servicio, perono para otras aplicaciones Web del sistema.

Directorio \Bin Contiene los archivos binarios del servicio Web. Si la clase delservicio Web no se encuentra en el archivo .asmx, el ensambladoque contiene la clase debe estar en el directorio \Bin.

5.4 Consumo de un servicio web.Una vez que diseñe y distribuya un servicio web XML en un servidor, cualquier persona podría llegar

y beneficiarse con su funcionalidad.

Suponiendo que el desarrollador de un sitio web bancario quiere usar uno de esos servicios parahacer cálculos de interés para los certificados de depósito. Su aplicación bancaria deberá usar o

Page 152: Antologia de Programacion Web

Programación Web Unidad V.

L.I. Esteban Sánchez Mendoza Página 149

consumir su servicio, es decir, acceder y utilizar los métodos disponibles de un servicio web XML.Los visitantes del sitio pueden usar la calculadora sin siquiera saber de dónde provino.

Cuando va a una gasolinera, los encargados le dan un servicio. Por ello usted es el consumidor delservicio. Puede aprovechar cualquier recurso que la gasolinera le ofrezca, como la bomba degasolina, el tiempo y servicio de los encargados, así como otros elementos. Esto le ahorra elproblema de crear su propia bomba de gasolina o de dar servicio a su propio automóvil.

El consumidor de un servicio web XML puede hacer exactamente lo mismo. Visita un servicio yconsume los recursos disponibles. Su equipo podría acceder a un servicio para el procesamiento detextos, por poner un ejemplo. Todas las características de este servicio estarían disponibles parausted, y no tendría que adquirir e instalar un procesador de textos.

El consumidor de un servicio web XML puede ser casi cualquier aplicación de escritorio, una páginaASP.NET o un dispositivo móvil con un teléfono portátil.

Hay 3 etapas para consumir un servicio web xml:

Obtener información del servicio (descubrimiento).

Generar un proxy o intermediario para el servicio.

Usar el proxy para invocar los servicios disponibles.

El descubrimiento es el proceso por el que un cliente encuentra información de un servicio web xml.Por ejemplo, cuando va a un restaurante, primero lee el menú para ver que ofrecen. Losconsumidores hacen lo mismo con los servicios web XML necesitan saber qué hace un servicioantes de usarlo.

Page 153: Antologia de Programacion Web

Programación Web Unidad V.

L.I. Esteban Sánchez Mendoza Página 150

El proxy funge como intermediario entre un cliente y un servicio

Pasos para consumir un servicio web XML

Conclusión.

La principal razón para usar servicios Web es que se pueden utilizarcon HTTP sobre TCP (Transmission Control Protocol) en el puerto 80. Dado que las organizacionesprotegen sus redes mediante firewalls -que filtran y bloquean gran parte del tráfico de Internet-,

Page 154: Antologia de Programacion Web

Programación Web Unidad V.

L.I. Esteban Sánchez Mendoza Página 151

cierran casi todos los puertos TCP salvo el 80, que es, precisamente, el que usan los navegadores.Los servicios Web utilizan este puerto, por la simple razón de que no resultan bloqueados. Esimportante señalar que los servicios web se pueden utilizar sobre cualquier protocolo, sin embargo,TCP es el más común.

Una segunda razón por la que los servicios Web son muy prácticos es que pueden aportar granindependencia entre la aplicación que usa el servicio Web y el propio servicio. De esta forma, loscambios a lo largo del tiempo en uno no deben afectar al otro. Esta flexibilidad será cada vez másimportante, dado que la tendencia a construir grandes aplicaciones a partir de componentesdistribuidos más pequeños es cada día más utilizada.

Page 155: Antologia de Programacion Web

Programación Web Unidad V.

L.I. Esteban Sánchez Mendoza Página 152

BIBLIOGRAFÍA

Domine HTML y DHTML. López José. Ed. Alfa Omega, ISBN 970-15-0876-9.

Diseño y Creación de Páginas Web HTML 4.0.Soria Ramón. Ed. Alfa Omega

Domine ASP.NET. Pratdepadua J. José. Ed.Alfa Omega.

http://tuto-mpweb.webcindario.com/5_4.html

http://msdn.microsoft.com/es-es/library/s9w05e9b(v=vs.80).aspx

http://en.wikipedia.org/wiki/Universal_Description_Discovery_and_Integration

http://es.wikipedia.org/wiki/WSDL

http://es.wikipedia.org/wiki/Simple_Object_Access_Protocol

http://sistemas.itlp.edu.mx/tutoriales/progweb/