Desarrollo de Aplicaciones Web by Osvaldo Castañeda Hernandez

Universidad Tecnol贸gica de Puebla

Desarrollo de Aplicaciones Web Antolog铆a Versi贸n 1.0

Universidad Tecnológica de Puebla Introducción La utilización de las tecnologías de la información en las actividades cotidianas en el mundo contemporáneo cada vez cobra mayor importancia, por ello cobra vital importancia el desarrollo de aplicaciones web. Objetivo Crear aplicaciones Web manejadas por PHP, utilizando el lenguaje así como sus extensiones. Dirigido a Todas aquellas personas dedicadas a la programación de aplicaciones y que deseen desarrollar soluciones WEB utilizando este lenguaje. Requisitos Haber programado aplicaciones HTML en un nivel básico. Manejo de los conceptos de Orientación a objetos y programación con SQL a nivel básico.5. Alcance El alumno desarrollará un sitio y aplicaciones web con acceso a base de datos, para realizar de manera eficiente los procesos en una organización. Herramientas a utilizar PHP, MySQL, HTML y Apache.

Universidad Tecnológica de Puebla Índice 1. Fundamentos de Sitios Web.

I. II. III.

Entorno de las aplicaciones Web (Internet, Intranet y Extranet) Metodología de desarrollo y publicación de un Sitio Web Lenguaje XHTML

2. Programación de una aplicación Web I. II. III. IV. V.

Fundamentos de programación Web Configuración del Entorno Web Métodos de conexión de forma abierta Métodos de conexión a datos usando directamente los drivers del proveedor. Manipulación de datos a través de un programa

Universidad Tecnológica de Puebla Capítulo I Fundamentos de Sitios Web. I.

Entorno de las aplicaciones Web (Internet, Intranet y Extranet)

Figura 1.1 Concepto de Aplicación WEB

Cuando se habla de un sitio web se refiere en realidad a un conjunto de archivos, que pueden ser de texto, audio, gráficos, etc., unidos mediante un lenguaje de marcas denominado HTML. Este lenguaje permite crear las llamadas páginas web, que no son más que archivos con la extensión htm ó html. Las mismas, se alojan en servidores web, que son computadoras adaptadas especialmente, y que están conectadas en forma permanente a Internet. La ventaja del HTML es que permite presentar varios archivos en forma simultánea (texto junto con un video, gráficos en forma de botones, etc.) y además, cuenta con la posibilidad de crear enlaces o hipervínculos (hyperlinks en idioma inglés), que se encargan de conectar las páginas web entre sí. Esto significa que se puede "saltar" de una página web ubicada en USA, a otra que está en España o Japón en forma inmediata, haciendo que las distancias geográficas desaparezcan en la red. Para poder acceder a los sitios web se necesita un navegador, que es el software encargado de presentar esa información. • • •

Sitio Web: conjunto de archivos Página Web: archivo en formato HTML o HTM Hipervínculo: objeto que se utiliza para enlazar archivos (páginas Web, imágenes, audio, etc.)

http://www2.ing.puc.cl/~jnavon/page2 4

Universidad Tecnológica de Puebla •

Servidor Web: computadora conectada a internet que aloja Sitios Web o archivos que pueden ser solicitados a través de la red

En la ingeniería de software se denomina aplicación web a aquellas aplicaciones que los usuarios pueden utilizar accediendo a un servidor web a través de Internet o de una intranet mediante un navegador. En otras palabras, es una aplicación software que se codifica en un lenguaje soportado por los navegadores web (HTML, JavaScript, Java, asp.net,php, etc.) en la que se confía la ejecución al navegador.2 Otra definición señala que “Una aplicación web es un conjunto de recursos web que participan en el funcionamiento de la propia aplicación web” 3 y está compuesta por: • Componentes de servidor dinamicos Servlets, Jsps • Bibliotecas de clases utilitarias • Elementos web estaticos paginas HTML, imágenes, sonidos • Componentes de cliente dinamicos Applets, Javabeans y clases • Un descriptor de desarrollo y de configuración de la aplicación web en forma de uno o más archivos xml. • Declaracion de los servlets • Enlaces entre url´s y servlets • Enlaces entre los tipos MIME y las palicaciones correspondientes • Declaraciones de las páginas de incio por defecto.

Internet es un conjunto descentralizado de redes de comunicación interconectadas que utilizan la familia de protocolos TCP/IP, garantizando que las redes físicas heterogéneas que la componen funcionen como una red lógica única, de alcance mundial. Sus orígenes se remontan a 1969, cuando se estableció la primera conexión de computadoras, conocida como ARPANET, entre tres universidades en California y una en Utah, Estados Unidos4. Uno de los servicios que más éxito ha tenido en Internet ha sido la World Wide Web (WWW, o "la Web"), hasta tal punto que es habitual la confusión entre ambos términos. La WWW es un conjunto de protocolos que permite, de forma sencilla, la consulta remota de archivos de hipertexto. Ésta fue un desarrollo posterior (1990) y utiliza Internet como medio de transmisión.

2 3 4

http://es.wikipedia.org/wiki/Aplicación_web J2EE Desarrollo de aplicaciones WEB, Autor: Benjamin Aumaille, Ed. Ediciones ENI, Pag. 26 http://es.wikipedia.org/wiki/Internet 5

Universidad Tecnológica de Puebla

Figura 1.2 Internet Una intranet5 es una red de ordenadores privados que utiliza tecnología Internet para compartir dentro de una organización parte de sus sistemas de información y sistemas operacionales. El término intranet se utiliza en oposición a internet, una red entre organizaciones, haciendo referencia por contra a una red comprendida en el ámbito de una organización. Tiene como función principal proveer lógica de negocios para aplicaciones de captura, informes y consultas con el fin de facilitar la producción de dichos grupos de nivel de grupo de trabajo. Las redes internas corporativas son potentes herramientas que permiten divulgar información de la compañía a los empleados con efectividad, consiguiendo que estos estén permanentemente informados con las últimas novedades y datos de la organización. También es habitual su uso en universidades y otros centros de formación, ya que facilita la consulta de diferentes tipos de información y el seguimiento de la materia del curso.

Figura 1.3 Intranet6

5 6

http://es.wikipedia.org/wiki/Intranet http://www.offclick.com/intranet.htm 6

Universidad Tecnológica de Puebla Una extranet7 es una red privada virtual que utiliza protocolos de Internet, protocolos de comunicación y probablemente infraestructura pública de comunicación para compartir de forma segura parte de la información u operación propia de una organización con proveedores, compradores, socios, clientes o cualquier otro negocio u organización. Se puede decir en otras palabras que una extranet es parte de la Intranet de una organización que se extiende a usuarios fuera de ella. Usualmente utilizando la Internet. La extranet suele tener un acceso semiprivado, para acceder a la extranet de una empresa no necesariamente el usuario ha de ser trabajador de la empresa, pero si tener un vínculo con la entidad. Es por ello que una extranet requiere o necesita un grado de seguridad, para que no pueda acceder cualquier persona. Otra característica de la extranet es que se puede utilizar como una Internet de colaboración con otras compañías.

Figura 1.4 Extranet 8

Similitudes y diferencias de Extranet con Internet e Intranet El principal aspecto en común entre estos tres términos es que los tres utilizan la misma tecnología. Las diferencias de la extranet con Internet y la Intranet se dan principalmente en el tipo de información y en el acceso a ella. Además, una extranet requiere mayor seguridad e implica acceso en tiempo real a los datos, ya que estos tienen que estar actualizados. La extranet se dirige a usuarios tanto de la empresa como externos, pero la información que se encuentra en la extranet es restringida, solo tienen acceso a esta red aquellos que tengan permiso. En cambio a la intranet solo acceden los empleados y las áreas internas de la empresa y permite el intercambio de información entre los trabajadores. Por último, a la internet puede dirigirse 7 8

http://es.wikipedia.org/wiki/Extranet http://arquitecturaestefany.blogspot.com/2009/03/extranet.html 7

Universidad Tecnológica de Puebla cualquier usuario y tiene distintos usos, como recabar información de los productos, contactar con cualquier persona de la empresa, etc. En la siguiente tabla se muestran de manera resumida las diferencias entre las aplicaciones en una empresa: Aplicación Usuarios Información Intranet Internos Intercambio entre trabajadores Extranet Internos y externos Colaboración con terceros, acceso restringido Internet Cualquier usuario Objetivos diferentes

II.

Metodología de desarrollo y publicación de un Sitio Web

2.1 Tipos de sitios WEB 9 Los sitios se pueden clasificar de muchas maneras. Cada tipo de sitio tiene unas características y limitaciones propias. Una buena organización es vital para conseguir los objetivos del Sitio. Esta es una forma de clasificar los sitios: 1) Por su audiencia a) Públicos: Es un WebSite normal, una página dirigida al público general, sin restricciones de acceso en principio. b) Extranet: Son Sitios limitados por el tipo de usuarios que pueden acceder, por ejemplo los proveedores de una empresa determinada, o los clientes. c) Intranet: Son sitios cuyo acceso está restringido a una empresa u organización, normalmente funcionan dentro de redes privadas, aunque no siempre es así. 2) Por su dinamismo en sitios interactivos y sitios estáticos: a) Sitios Interactivos: El usuario puede influir sobre el contenido del sitio que variará en función de cada usuario y de los objetivos de éste. Normalmente, las páginas se generan cuando el usuario las solicita, personalizando la información que se le ofrece. b) Sitios estáticos: Los usuarios no pueden modificar o añadir nada al sitio, de cuyos contenidos se encargan exclusivamente sus diseñadores. 3) Por su apertura en Estructuras abiertas, cerradas y semicerradas: a) Estructura abierta: Todos los documentos disponen de su dirección y los usuarios pueden acceder a cualquier punto del WebSite. b) Estructura cerrada: Limita el acceso a unos pocos puntos de entrada (incluso a uno sólo). Un ejemplo sería un sitio que requiere un registro previo para entrar, el usuario siempre tendría que pasar primero por el registro antes de poder acceder al resto de la página. c) Estructura semicerrada: A medio camino entre ambas, obliga a los usuarios a acceder por unos puntos específicos, cómo por ejemplo sólo la página principal y las páginas de entrada a las secciones más importantes. 9

http://www.lawebera.es/manuales/primeros-pasos/como-empezar/tipos-de-webs.php 8

Universidad Tecnológica de Puebla 4) Por su profundidad a) Basada en el número de enlaces que hay que pulsar para llegar al contenido. En general los usuarios prefieren sitios poco profundos. Una buena regla a seguir es que el usuario no tenga que pulsar más de 3 enlaces para encontrar lo que busca. 5) Por sus objetivos a) Comerciales: Están creados para promocionar los negocios de una empresa. Su finalidad es económica. Su audiencia puede estar formada por clientes (actuales y potenciales), inversores (actuales y potenciales), empleados (actuales y potenciales) e incluso la competencia y los medios de comunicación. Podemos a su vez dividirlas en Corporativas (Informan sobre la empresa) y Promocionales (promocionan productos). b) Informativos: Su finalidad principal es distribuir información. La audiencia de este tipo de sitios depende del tipo de información que distribuyen. c) Ocio: Aunque normalmente son sitios con una finalidad económica, son un caso especial. No son sitios fáciles de crear ni de mantener y a veces siguen reglas propias; puesto que a veces es más importante sorprender al usuario con innovaciones que mantener la consistencia y la estructura. d) Navegación: Su finalidad es ayudar al usuario a encontrar lo que busca en Internet. Dentro de este grupo se sitúan los llamados portales, que intentan abarcar prácticamente todo dentro del propio sitio. e) Artísticos: Son un medio de expresión artística de su creador o creadores. Este tipo de sitios suele saltarse todas las convenciones y las únicas normas a aplicar son las que el propio artista o artistas deseen. f)

Personales: Al igual que los anteriores, son un medio de expresión de su creador o creadores. Sus objetivos y su audiencia pueden ser de lo más variopinto. Dentro de este grupo puede haber de todo desde colecciones de fotos de la familia hasta tratados científicos de primer orden.

2.2 MEDIDAD DE SEGURIDAD DE SITIOS WEB10 Para muchas aplicaciones de negocios, como la publicidad y promociones simples, es probable que no se necesite tratar con precauciones de seguridad. Pero si se permite que los usuarios tengan acceso a datos delicados, se deberán tomar medidas para proteger a los datos. Debido a que cada vez son más las personas que desean transferir documentos e información de tarjetas de crédito o cualquier tipo de transmisión de datos en forma segura y sin el temor a los crackers y piratas. Las medidas de seguridad básicas a tener en cuenta son:

2.2.1 La encriptación de datos Es una técnica para ocultar datos de manera que sólo puedan ser vistos por aquellos que deben verlos. Consiste en reemplazar un mensaje enviado con un algoritmo difícil de adivinar. Los servidores seguros tratan de encriptar los datos entre el navegador y el servidor. En algún momento durante el ciclo de compras, después que los datos llegan al servidor seguro, el sistema debe desencriptar los datos. Aun si los datos son desencriptados sólo por un instante, la información podría ser interceptada por algún pirata. Crear un sistema en el que la información permanezca encriptada a lo largo del ciclo es prácticamente imposible. 10

http://www.monografias.com/trabajos5/laweb/laweb.shtml 9

Universidad Tecnológica de Puebla La configuración más segura es una que transmita la información al propietario de la empresa en formato encriptado, pase la información a una computadora que no esté en Internet y luego desencripte la información. Además si en una empresa se utiliza un mismo algoritmo para encriptar y desencripar datos, se necesitará que alguna tercera pieza de datos desencripte el código, que seria una clave. Esto sólo funcionará si tanto la persona transmisora como la parte receptora conocen la clave. Si la persona receptora no conoce la clave, tiene que enviar la clave a esa parte, y está puede ser interceptada.

2.2.2 Firma digital Ofrece un método de encriptación de datos que evita tener que compartir claves para leer mensajes. Es la técnica llamada encriptación de clave pública, donde cada usuario tiene dos claves: una clave pública y una clave privada. Los algoritmos de encriptación y desencriptación son adaptados de manera que sólo la clave pública puede desencriptar los datos encriptados por la clave privada. Por consiguiente, puede transmitir con libertad la clave pública al mundo.

2.2.3 Creación de un sitio seguro Las ventajas de crear un sistema seguro antes de ser pirateado deben ser obvias. La prevención es la mejor medicina y esto se aplica también ala seguridad de las computadoras. Se debe mantener la seguridad de los archivos de datos de tal forma que solo las personas correctas puedan verlos. Esto es crucial para los siguientes tipos de datos y archivos: contraseñas de usuarios, archivos de facturación, registros de sistema y de usuarios, información de tarjetas de créditos, información confinada de sistemas remotos, compiladores, herramientas de administración. Firewalls, wrappers y proxies Los firewalls, wrappers y proxies ofrecen una buena línea de defensa para los propietarios de servidores Web y administradores de sistemas. Los firewalls pueden ser software o hardware que protege los puertos y evita que los piratas penetren al sistema. Los firewalls permiten que tengan acceso al sistema sólo ciertos nombres de dominio confiables. Los wrappers se encuentran disponibles en CERT al igual que en otros archivos en Internet. Los wrappers se ejecutan como una capa de software alrededor de su otro software. Un usuario que se conecta a FTP primero entraría en contacto con el wrapper, el cual luego habilitaría al FTP. El usuario no sabe que existe el wrapper y no puede detectar ninguna diferencia en el sistema. Los wrappers son interesantes porque son flexibles. Pueden actuar como firewalls y en realidad pueden rechazar usuarios con base en sus nombres de usuarios al igual que en sus nombres de dominios. Además permite crear callejones sin salida que permiten atrapar piratas. El modo proxy es un método permite ocultar datos por medio de reenrutamiento de las solicitudes. Es útil para usuarios que están detrás de una firewall. Los usuarios establecen una dirección proxy de su navegador para que apunte hacia su servidor Web. El servidor Web maneja entonces la dirección real de los datos hacia el mundo exterior. Esto reduce la dirección que el usuario está tomando cuando deja su sistema, permitiéndole al usuario enrutar los datos los datos a través de los agujeros en sus propias firewalls. La otra ventaja es que las solicitudes pueden ser filtradas por el software del servidor. Al filtrar la información, puede restringir el contenido y rastrear el uso al igual que modificar la información en ese instante. Los servidores proxy también pueden ser dirigidos a otros servidores proxy, lo cual les permite ocultar datos en forma efectiva. 10

Universidad Tecnológica de Puebla Otra ventaja de los servidores proxy es que los servicios como FTP, Telnet, Gopher, NetnNews, etc., pueden ser erutados a servidores diferentes. Esto le permite distribuir diversas cargas de servidor Web a diferentes servidores físicos. Además de beneficiarse con el ocultamiento de los datos, ser reduce la carga del servidor.

2.3 Desarrollo de aplicaciones El desarrollo de aplicaciones web involucra decisiones no triviales de diseño e implementación que inevitablemente influyen en todo el proceso de desarrollo, afectando la división de tareas. Los problemas involucrados, como el diseño del modelo del dominio y la construcción de la interfaz de usuario, tienen requerimientos disjuntos que deben ser tratados por separado. El alcance de la aplicación y el tipo de usuarios a los que estará dirigida son consideraciones tan importantes como las tecnologías elegidas para realizar la implementación. Así como las tecnologías pueden limitar la funcionalidad de la aplicación, decisiones de diseño equivocadas también pueden reducir su capacidad de extensión y reusabilidad. Es por ello que el uso de una metodología de diseño y de tecnologías que se adapten naturalmente a ésta, son de vital importancia para el desarrollo de aplicaciones complejas. En la actualidad existen tecnologías ampliamente usadas para el desarrollo de aplicaciones web, pero muchas de ellas obligan al desarrollador a mezclar aspectos conceptuales y de presentación. Esto sucede principalmente con aquellas tecnologías no basadas en objetos. La elección de tecnologías complejas demora el proceso e incrementa los costos, pero en ocasiones permite adecuarse a metodologías de diseño más fácilmente. Como es el caso de las tecnologías orientadas a objetos, las cuales tienden a demorar el desarrollo en etapas tempranas. El tiempo de desarrollo en la actualidad es crítico, tanto por razones de marketing como por límites en el presupuesto y los recursos, pero la adopción de estas tecnologías hace que el mantenimiento se transforme en una actividad más simple, la división en capas sea una tarea natural del desarrollo y el tiempo invertido en el diseño facilite el trabajo necesario para el resto de las actividades.

2.4 Aplicaciones web y la importancia del desarrollo en capas Las aplicaciones hipermedia han evolucionado en los últimos años y se han concentrado mayormente en la web. Las antiguas aplicaciones distribuidas en cd’s dieron lugar a aplicaciones dinámicas, de constante actualización e incluso personalizables, capaces de adaptarse a los tipos de usuarios y en casos avanzados, a cada usuario en particular. Estas características encuentran el medio ideal en la web, ya que de otra forma sería costoso su mantenimiento y evolución. La complejidad del desarrollo ocurre a diferentes niveles: dominios de aplicación sofisticados (financieros, médicos, geográficos, etc.); la necesidad de proveer acceso de navegación simple a grandes cantidades de datos multimedia, y por último la aparición de nuevos dispositivos para los cuales se deben construir interfaces web fáciles de usar. Esta complejidad en los desarrollos de software sólo puede ser alcanzada mediante la separación de los asuntos de modelización en forma clara y modular. La justificación de tanto trabajo puede encontrarse en cualquier aplicación que requiera navegación: en términos de programación orientada a objetos, si los elementos por los que se navega son los del diseño conceptual se estaría mezclando la funcionalidad hipermedia con el comportamiento propio del objeto. Por otro lado, si los nodos de la red de navegación tienen la capacidad de definir su apariencia, se estaría limitando la extensión de la aplicación para ofrecer nuevas presentaciones del mismo elemento y eventualmente se estaría dificultando la personalización de la interfaz. Es necesario, entonces, mantener separadas las distintas decisiones de diseño según su naturaleza (conceptual, navegacional, de interfaz) y aplicar las tecnologías adecuadas a cada capa en el proceso de implementación.

Universidad Tecnológica de Puebla 2.5 OOHDM11 Las metodologías tradicionales de ingeniería de software, o las metodologías para sistemas de desarrollo de información, no contienen una buena abstracción capaz de facilitar la tarea de especificar aplicaciones hipermedia. El tamaño, la complejidad y el número de aplicaciones crecen en forma acelerada en la actualidad, por lo cual una metodología de diseño sistemática es necesaria para disminuir la complejidad y admitir evolución y reusabilidad. Producir aplicaciones en las cuales el usuario pueda aprovechar el potencial del paradigma de la navegación de sitios web, mientras ejecuta transacciones sobre bases de información, es una tarea muy difícil de lograr. En primer lugar, la navegación posee algunos problemas. Una estructura de navegación robusta es una de las claves del éxito en las aplicaciones hipermedia. Si el usuario entiende dónde puede ir y cómo llegar al lugar deseado, es una buena señal de que la aplicación ha sido bien diseñada. Construir la interfaz de una aplicación web es también una tarea compleja; no sólo se necesita especificar cuáles son los objetos de la interfaz que deberían ser implementados, sino también la manera en la cual estos objetos interactuarán con el resto de la aplicación. En hipermedia existen requerimientos que deben ser satisfechos en un entorno de desarrollo unificado. Por un lado, la navegación y el comportamiento funcional de la aplicación deberían ser integrados. Por otro lado, durante el proceso de diseño se debería poder desacoplar las decisiones de diseño relacionadas con la estructura navegacional de la aplicación, de aquellas relacionadas con el modelo del dominio. OOHDM propone el desarrollo de aplicaciones hipermedia a través de un proceso compuesto por cuatro etapas: diseño conceptual, diseño navegacional, diseño de interfaces abstractas e implementación.

2.5.1 Diseño Conceptual En esta actividad se construye un esquema conceptual representado por los objetos del dominio, las relaciones y colaboraciones existentes establecidas entre ellos. En las aplicaciones hipermedia convencionales, cuyos componentes de hipermedia no son modificados durante la ejecución, se podría usar un modelo de datos semántico estructural (como el modelo de entidades y relaciones). De este modo, en los casos en que la información base pueda cambiar dinámicamente o se intenten ejecutar cálculos complejos, se necesitará enriquecer el comportamiento del modelo de objetos. En OOHDM, el esquema conceptual está construido por clases, relaciones y subsistemas. Las clases son descritas como en los modelos orientados a objetos tradicionales. Sin embargo, los atributos pueden ser de múltiples tipos para representar perspectivas diferentes de las mismas entidades del mundo real. Se usa notación UML (Lenguaje de Modelado Unificado) y tarjetas de clases y relaciones similares a las tarjetas CRC (Clase Responsabilidad Colaboración). El esquema de las clases consiste en un conjunto de clases conectadas por relaciones. Los objetos son instancias de las clases. Las clases son usadas durante el diseño navegacional para derivar nodos, y las relaciones que son usadas para construir enlaces.

2.5.2 Diseño Navegacional La primera generación de aplicaciones web fue pensada para realizar navegación a través del espacio de información, utilizando un simple modelo de datos de hipermedia. En OOHDM, la navegación es considerada un paso crítico en el diseño aplicaciones. Un modelo navegacional es construido como una vista sobre un diseño conceptual, admitiendo la construcción de modelos diferentes de acuerdo con los diferentes perfiles de usuarios. Cada modelo navegacional provee una vista subjetiva del diseño conceptual. El diseño de navegación es expresado en dos esquemas: el esquema de clases navegacionales y el esquema de contextos navegacionales. En OOHDM existe un conjunto de tipos predefinidos de clases navegacionales: nodos, enlaces y estructuras de acceso. La semántica de los nodos y los enlaces son las tradicionales de las 11

Construyendo aplicaciones web con una metodología de diseño orientada a objetos; Silva - Mercerat 12

Universidad Tecnológica de Puebla aplicaciones hipermedia, y las estructuras de acceso, tales como índices o recorridos guiados, representan los posibles caminos de acceso a los nodos. La principal estructura primitiva del espacio navegacional es la noción de contexto navegacional. Un contexto navegacional es un conjunto de nodos, enlaces, clases de contextos, y otros contextos navegacionales (contextos anidados). Pueden ser definidos por comprensión o extensión, o por enumeración de sus miembros. Los contextos navegacionales juegan un rol similar a las colecciones y fueron inspirados sobre el concepto de contextos anidados. Organizan el espacio navegacional en conjuntos convenientes que pueden ser recorridos en un orden particular y que deberían ser definidos como caminos para ayudar al usuario a lograr la tarea deseada. Los nodos son enriquecidos con un conjunto de clases especiales que permiten de un nodo observar y presentar atributos (incluidos las anclas), así como métodos (comportamiento) cuando se navega en un particular contexto.

2.5.3 Diseño de Interfaz Abstracta Una vez que las estructuras navegacionales son definidas, se deben especificar los aspectos de interfaz. Esto significa definir la forma en la cual los objetos navegacionales pueden aparecer, cómo los objetos de interfaz activarán la navegación y el resto de la funcionalidad de la aplicación, qué transformaciones de la interfaz son pertinentes y cuándo es necesario realizarlas. Una clara separación entre diseño navegacional y diseño de interfaz abstracta permite construir diferentes interfaces para el mismo modelo navegacional, dejando un alto grado de independencia de la tecnología de interfaz de usuario. El aspecto de la interfaz de usuario de aplicaciones interactivas (en particular las aplicaciones web) es un punto crítico en el desarrollo que las modernas metodologías tienden a descuidar. En OOHDM se utiliza el diseño de interfaz abstracta para describir la interfaz del usuario de la aplicación de hipermedia. El modelo de interfaz ADVs (Vista de Datos Abstracta) especifica la organización y comportamiento de la interfaz, pero la apariencia física real o de los atributos, y la disposición de las propiedades de las ADVs en la pantalla real son hechas en la fase de implementación.

2.5.4 Implementación En esta fase, el diseñador debe implementar el diseño. Hasta ahora, todos los modelos fueron construidos en forma independiente de la plataforma de implementación; en esta fase se toma en cuenta el entorno particular en el cual se va a correr la aplicación. Al llegar a esta fase, el primer paso que debe realizar el diseñador es definir los ítems de información que son parte del dominio del problema. Debe identificar también, cómo son organizados los ítems de acuerdo con el perfil del usuario y su tarea; decidir qué interfaz debería ver y cómo debería comportarse. A fin de implementar todo en un entorno web, el diseñador debe decidir además qué información debe ser almacenada.

2.6 Ejemplo de una implementación OOHDM En este ejemplo se describirán las etapas de desarrollo de una aplicación web simple, siguiendo la metodología OOHDM. En cada capa de diseño, la implementación correspondiente se basa en diferentes tecnologías, elegidas con el propósito de minimizar la dificultad del desarrollo y aprovechar al máximo las virtudes de la metodología.

2.6.1 Capa Conceptual En OOHDM, el desarrollo se inicia diseñando la capa conceptual, siendo el principal objetivo de esta etapa capturar los conceptos involucrados en el dominio de la aplicación y describirlos en detalle, haciendo uso de diagramas que permitan expresar con claridad el comportamiento, la estructura y las relaciones entre dichos conceptos. La Programación Orientada a Objetos facilita el traslado del diseño conceptual a la implementación, 13

Universidad Tecnológica de Puebla proveyendo al programador con herramientas que permiten reducir la distancia entre el problema del mundo real y la programación de la solución en la computadora. El modelo de objetos del ejemplo consta de las entidades básicas de un dominio específico: un comercio de venta de productos B2C (Negocio a Consumidor). En este dominio, entidades como producto, categoría de productos, carro de compras, usuario, venta, se interrelacionan para responder a la navegación del usuario por la aplicación y a sus actividades transaccionales. Todas las entidades mencionadas se construyen a partir de información persistente, propiedad mantenida por la empresa en forma directa a través de un DBA (Administrador de Bases de Datos) o simplemente aprovechando una funcionalidad incorporada de la aplicación que permita manipular la base de datos. El análisis anterior de las entidades del dominio permite afirmar que dichas clases comparten (al menos) el comportamiento correspondiente a la interfaz con la capa de persistencia: todas las entidades fuertes son capaces de construirse a partir de identificadores, coincidentes con las claves primarias de las tablas correspondientes de la base de datos. Las clases del diseño conceptual que representen a estas entidades podrán obtener sus atributos al iniciarse y actualizar los cambios cuando sea necesario (realizando eventualmente algún tipo de almacenamiento temporal para mejorar la eficiencia). La consistencia de la información queda asegurada, entonces, por el comportamiento de los objetos del modelo.

Figura 1.5: Paquete de interfaz con la base de datos, dentro del Diseño Conceptual La clase abstracta que define el comportamiento básico de las entidades del modelo y concentra la lógica de interacción con la base de datos será denominada EntidadAbstracta. Para cumplir con los objetivos propuestos, esta clase debe ser capaz de crear una conexión con la base de datos, ejecutar consultas y retornar los resultados para ser procesados. Por una cuestión de eficiencia, la creación de conexiones a la base de datos podría ser delegada a un singleton, es decir, una clase capaz de controlar su instanciación para retornar siempre la misma instancia en reiteradas llamadas a su constructor. Una clase con estas características podría ser instanciada por EntidadAbstracta para luego solicitarle una conexión. Sólo la información más importante y de menor volumen es cargada desde la base de datos en el momento de la instanciación. La información restante puede ser cargada bajo demanda, a partir de un eventual requerimiento de la aplicación. Para ilustrar esta idea con claridad puede considerarse cargar los siguientes atributos en la instanciación de un Producto: descripción, categoría, cantidad disponible y precio. En algún momento de la ejecución, la aplicación puede requerir los productos relacionados de un determinado producto BD Subconjunto de clases del diseño conceptual que interactúan con la base de datos Diseño Conceptual Jerarquía de entidades Resto del modelo (por ejemplo, el usuario podría solicitar una lista de productos relacionados con el producto televisor, tales como video grabadora, filmadora, mesa para televisor, etc.); dado el volumen de esta información y lo esporádico de su requerimiento, se sugiere entonces consultar a la base de datos para obtener esta información sólo cuando es requerida. Notar que la conexión a la base usada en cada consulta es siempre la solicitada en el momento de la instanciación, evitando con esto creaciones y destrucciones reiteradas de conexiones a la base de datos. Un modelo conceptual de estas características, obliga a considerar a todas las entidades del dominio como subclases de EntidadAbstracta (al menos todas aquellas entidades que se mantienen en la base de datos). 14

Universidad Tecnológica de Puebla Esta decisión de diseño puede refinarse aún más para evitar al máximo la incorporación de comportamiento de persistencia en las clases del dominio. Para alcanzar este objetivo puede utilizarse interfaces (mediante las cuales se pueden establecer contratos entre clases, permitiendo así ligar a las clases del dominio con las encargadas de interactuar con la base de datos) y/o un modelo paralelo de wrappers que encapsulen a las clases del dominio (estos wrappers pueden encargarse directamente de la persistencia o interactuar con otras clases para factorizar código, dejando en cada wrapper el comportamiento específico requerido por la entidad encapsulada). Es importante destacar que el diseño conceptual puede estar compuesto de otras clases que por su naturaleza no puedan considerarse subclases de EntidadAbstracta. Estos casos son simplemente colaboradores de entidades concretas, clases requeridas para realizar alguna actividad específica y de corta vida útil, o algunos casos de entidades débiles desde el punto de vista de diseño entidad-relación. Considérese como ejemplo la información relacionada con la navegación del usuario en una determinada sesión, irrelevante para otras sesiones e incluso para el resto de la aplicación. En este caso, se requiere una clase para contener la información mencionada y el comportamiento para manipularla, pero no requiere considerar la persistencia dentro de su funcionalidad.

Figura 1.6: Instanciación de una subclase concreta de EntidadAbstracta

2.6.2 Capa Navegacional La capa navegacional se compone de objetos construidos a partir de objetos conceptuales, y constituyen en general los elementos canónicos de las aplicaciones hipermedia tradicionales: nodos, enlaces, anclas y estructuras de acceso. Sin embargo, estas clases pueden extender el comportamiento característico para funcionar como adaptadores de los objetos conceptuales y delegar así operaciones específicas del dominio. Entonces, los objetos navegacionales pueden actuar como observadores, para construir vistas de objetos conceptuales, y como adaptadores, para extender la actividad navegacional de un nodo y poder aprovechar el comportamiento conceptual 15

Universidad Tecnológica de Puebla del objeto adaptado. Estas dos perspectivas pueden implementarse aprovechando las virtudes inherentes de diferentes tecnologías: JSP para observar y Servlets para adaptar.

Figura 1.7: Construcción de un nodo de la capa navegacional Como puede observarse, la cadena se inicia con un requerimiento del usuario que navega por la aplicación. Al acceder a un enlace, una página JSP es invocada para construir una página XML. En principio, el archivo XML generado puede ser útil para transferir información entre servidores cooperativos, o simplemente entre un cliente y un servidor con un esquema tradicional. En cualquier caso, la portabilidad brindada por las características simples de XML hacen posible una transferencia transparente incluso entre plataformas completamente heterogéneas. Antes de abordar la implementación de la capa de presentación es necesario describir la segunda perspectiva de los nodos, vistos como adaptadores de objetos conceptuales. Un ejemplo donde se observa claramente este tipo de nodos es el carro de compras. Para mostrar el contenido del carro de compras del usuario es necesario instanciar el objeto conceptual CarroDeCompras (notar que el identificador del usuario que navega la aplicación y solicita acceder a su carro de compras es el único dato que se necesita para invocar al constructor de dicha entidad). De este modo, el nodo construido a partir de esta información no sólo concentra los datos de las compras sino que además ofrece un menú de operaciones para manipular el carro de compras, como borrar un elemento, cambiar la cantidad solicitada de un producto, vaciar el carro, finalizar la compra. Todas estas operaciones no son responsabilidad del nodo, sino que son realizadas por el objeto conceptual. Entonces, delegar responsabilidad es lo único que debe hacer el nodo navegacional en este caso: la actividad delegada continúa dentro de un servlet y finalmente es el servlet quien se encarga de redireccionar la navegación a una página JSP para eventualmente mostrar un resultado.

Universidad Tecnológica de Puebla Los servlets son una herramienta muy útil para realizar actividades del lado del servidor y retornar información al cliente para informarle sobre el trabajo realizado o para solicitarle parámetros y retomar alguna operación. Continuando con el carro de compras, en caso que la operación elegida por el usuario sea vaciar el contenido (entre otras operaciones que puede seleccionar), una transacción debe ejecutarse a cargo del objeto CarroDeCompras correspondiente, a fin de modificar la base de datos satisfaciendo el deseo del usuario. Dado que este deseo es manifestado a través de un requerimiento (por ejemplo, realizando un get a través de una URL, o un post a través de un formulario HTML) la acción debe continuar en algún sector de la aplicación, sin necesidad de mostrar información durante el proceso, al menos en este caso puntual. Entonces, puede construirse un paquete de servlets capaces de realizar operaciones específicas e incluso agruparse en jerarquías para aprovechar la herencia de comportamiento. A manera de ejemplo, se puede considerar la jerarquía de servlets de la siguiente figura, diseñados para servir acciones específicas referidas al CarroDeCompras.

Figura 1.8: Jerarquía de servlets para administrar el carro de compras El servlet abstracto de la aplicación es una clase que podría ser útil si se tiene comportamiento común a todos los servlets construidos para una aplicación específica. Luego, el servlet abstracto CarroDeComprasServlet define el comportamiento y la estructura de los servlets que encapsulan la lógica de una operación determinada sobre el carro de compras. No es necesario construir una subclase por operación concreta; varias operaciones pueden encapsularse en una única clase y parametrizarse adecuadamente si son semejantes. AgregarProductoServlet servlet abstracto de la aplicación EliminarProductoServlet VaciarCarroServlet inalizarCompraServlet HttpServlet CarroDeComprasServlet En este escenario, cada subclase concreta de servlet tiene la responsabilidad de ejecutar una operación y retornar al cliente mostrando una página fija o calculada dinámicamente en función del resultado de la operación. Un ejemplo que puede considerarse para cualquier actividad es alternativa entre un resultado exitoso o uno erróneo, de la operación ejecutada. En el primer caso, la navegación podría continuar por una página JSP capaz de ilustrar la forma de proseguir la actividad, o de mostrar los resultados de la misma. En el segundo caso, la navegación se vería interrumpida por una página JSP que informara sobre el error producido y eventualmente solicitara la corrección de parámetros, u ofreciera reintentar la operación.

2.6.3 Capa de Interfaz Abstracta Tanto un nodo actuando como observador como un nodo actuando como adaptador, finalmente continúa por mostrar cierta información y para ello necesita definir la forma de presentación mediante la cual dicha información será visualizada en la interfaz. Para ello se incorporan las dos últimas tecnologías a las que se hará mención en este artículo: XSL y un mecanismo de análisis sintáctico para obtener una página HTML en función de un par de documentos XML/XSL. 17

Universidad Tecnológica de Puebla Las páginas XSL, ubicadas también del lado del servidor, definirán la apariencia de los nodos que se generaron en formato XML. Cada página XSL define la forma en que los elementos del XML asociados serán mostrados, haciendo uso de código HTML y eventualmente CSS, para dar el formato deseado a las páginas finales. Enlaces y estructuras de acceso también son presentados conforme con los estilos adoptados para este tipo de información navegacional. El vínculo entre un XML y su apariencia puede establecerse en forma explícita, con una etiqueta especial situada en la primera línea del archivo XML, o bien podría ser calculado en forma dinámica para satisfacer demandas de personalización. En cualquier caso, retornar al cliente con un archivo XML que haga referencia a un archivo XSL ubicado en el servidor tiene al menos dos inconvenientes: genera un tráfico de ida y vuelta innecesario, ya que podría evitarse enviando directamente el código HTML al cliente, y puede requerir características especiales en el explorador del cliente que pueden privarlo de visualizar la página correctamente.

Figura 1.9: Generación de un documento HTML a partir de una fuente XML + XSL El lenguaje XSLT (Transformaciones XSL40) se utiliza para componer hojas de estilo XSL. Estos documentos contienen instrucciones que mediante el uso de Xalan-Java, por ejemplo, sirven para llevar a cabo las transformaciones y producir un documento de salida, una secuencia de caracteres o de bytes, un DOM (Modelo de Objetos de Documento), etc. En el caso particular mencionado anteriormente, se desea obtener un documento de salida con formato HTML a partir de un par de documentos XML / XSL.

III.

Lenguaje XHTML

XHTML es una reformulación de HTML 4.0 y XML 1.0. HTML fué concebido como un lenguaje para el intercambio de documentos científicos y técnicos. Siendo que HTML es una aplicación SGML, se valió de un reducido grupo de etiquetas para la formulación de documentos relativamente simples. HTML se popularizó rápidamente y superó las expectativas que motivaron su creación. La flexibilidad de HTML y la constante invención de nuevos elementos para ser usados con este lenguaje, ha creado el desorden y falta de compatibilidad con algunos navegadores, cosa que con su reformulación en el XHTML, se pretende corregir. Por su lado, XML es un simple y muy flexible formato de texto derivado de SGML diseñado especialmente para documentos web. Permite a los desarrolladores crear sus propias etiquetas. A diferencia del HTML, XML es muy estricto en su estructura. Más que por el formato, XML “se preocupa” de la estructura. En HTML, es posible visualizar documentos mal estructurados, etiquetas mal anidadas o inconclusas, en XML si se abre una etiqueta, debe cerrarse. 18

Universidad Tecnológica de Puebla XML es ampliamente usado para estructurar datos (inventarios, catálogos, por ejemplo). Una de sus ventajas es la capacidad que provee al permitir la transferencia estructurada de información que puede ser utilizada por otras aplicaciones. Así que XHTML reune la capacidad de formato de HTML y esta se consolida con la formalidad del XML (y sus reglas) a la hora de estructurar documentos para la portación de datos. Esto le permite a la vez, ser manejado y validado por cualquier herramienta estándar. Nos permite echar mano de la modularización. Esta reformulación nos permite desarrollar sitios que podrán ser “vistos” por personas discapacitadas, ya que existen agentes de usuario que pasan la información (obviamente debido a la bien formada estructura) a formatos como Braile. Reglas básicas del XHTML

Al ser una recomendación y un estándar, es necesario observar que nuestros documentos XHTML deben respetar ciertas reglas básicas : 1. Todos los elementos deben estar debidamente jerarquizados

Cuando se escriba un documento es muy común que erroneamente se cierren elementos de forma inadecuada, por ejemplo: <p><i>El <b>Veloz murcielago hindú</b> comía feliz cardillo y caña</p></i> En este ejemplo, se ha cerrado la etiqueta de párrafo antes de lo debido, en algunos navegadores esto pasará desapercibido, sin embargo la forma correcta es la siguiente: <p><i>El <b>Veloz murcielago hindú</b> comía feliz cardillo y caña</i></p> 2. Todo documento debe estar bien formado

Lo cual quiere decir que losdocumentos deben tener al menos la siguiente estructura: <html> <head> ... </head> <body> ... </body> </html> 3. Los nombres de las etiquetas deber estar en minúsculas

Al ser XHTML una aplicación XML, está hace diferencia entre mayúsculas y minúsculas, por lo que <BODY> y <body> son dos cosas muy diferentes

Universidad Tecnológica de Puebla 1.1.

4. Todas las etiquetas deben cerrarse

En versiones anteriores del HTML era posible dejar etiquetas sin cerrar, incluso algunos autores te decía que no era necesario cerrar tal o cual etiqueta, en XHTML es obligatorio que todas las etiquetas sean cerradas, por lo que: <p>Esto es un párrafo Es incorrecto, en su lugar debe ser: <p>Esto es un párrafo</p> El cual tiene su etiqueta de cierre correspondiente. en los casos donde las etiquetas son unarias como <br>, <hr>, <img> y otras, el cierre se da dentro de ella misma, terminando la etiqueta con />, por ejemplo: Este texto hace un <br /><b>Salto de Línea</b> y después pone una línea abajo <br /><hr /> 5. Los nombres de los atributos deben ir en minúsculas

Por lo antes mencionado en el punto 3, todos los nombres de atributos para una etiqueta deben ir en minúsculas, por ejemplo: <img SRC="imagen.gif"> es inválido, en su lugar <img src="imagen.gif" /> sería lo correcto 6. Los valores de los atributos deben ir entre comillas

Esto para evitar confusiones, por ejemplo: <div align=center> es incorrecto, en su lugar use <div align="center"> 7. El atributo id reemplaza al atributo name

En XHTML el atributo name está descontinuado, en su lugar use el atributo id: <input type="text" id="txt_nombre" size="25" /> Sólo en casos de compatibilidad con navegadores antiguos debe usarse el atributo name, si se está usando XHTML transicional, el atributo name es permitido. El DOCTYPE

Todos los documentos XHTML válidos deben llevar un elemento llamado DOCTYPE, el cual no es parte del documento en sí, sino que define el tipo de DTD (Document Type Definition o Definición de tipo de documento) a emplear en los documentos, es obligatorio y puede ser uno de estos tres: 20

Universidad Tecnológica de Puebla •

•

XHTML 1.0 Strict: Se usa cuando se desea utilizar al 100% XHTML, su nombre lo dice bien claro, es XHTML estricto, la declaración del mismo es como sigue: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> HTML 1.0 Transitional: Es el más usado ya que permite manejar elementos de XHTML y HTML 4.01, además de que se debe usar cuando el navegador no soporta correctamente CSS, su declaración es la que sigue:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML 1.0 Frameset: Se debe usar cuando se manejan frames, su declaración es la siguiente: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Comprender los elementos del lenguaje XHTML y hojas de estilo.

Universidad Tecnológica de Puebla Capítulo II Programación de una aplicación Web I.

Fundamentos de programación Web Identificar las instrucciones, comandos y funciones del lenguaje de programación web. En el proceso de desarrollo de aplicaciones web tienen que ser tomadas decisiones concernientes al tipo de lenguaje de programación utilizado en el sitio, por ello es de considerarse las diferentes alternativas de lenguajes existentes. Como punto de partida es de considerarse que código deberá ser ejecuta del lado cliente (el equipo donde se visualiza la página) o del lado servidor (el equipo donde reside el sitio) En las siguientes graficas 12 se muestra dos escenarios, en el primero la ejecución de la aplicación se realiza del lado cliente, esto representa ventajas en el sentido de que la comunicación hacia el servidor pudiera reducirse significativamente y por ende el servidor puede atender un mayor número de peticiones. En este mismo sentido cuando una aplicación web es ejecutada del lado cliente, se reduce los requerimientos que debe de tener el servidor para alojar la aplicación web.

La ejecución de código del lado servidor a su vez tiene grandes ventajas, una de ellas es la posibilidad de no tener tantos requerimientos a los navegadores para que 12

Gráficos tomados de: http://www.adelat.org/media/docum/nuke_publico/lenguajes_del_lado_servidor_o_cliente.html 22

Universidad Tecnológica de Puebla puedan visualizar la aplicación debido a que el procesamiento se lleva a cabo en el servidor, en la grafica se aprecia tecnologías que se ejecutan en el lado del servidor, así como tecnologías que se ejecutan en el lado del cliente.

Es importante hacer notar que muchas veces se requiere ejecución de código tanto del lado cliente como del lado servidor. Los lenguajes de programación más utilizados en la actualidad en la construcción de sitios web son: Lenguajes del lado cliente: •

HTML. Lenguaje basado en etiquetas

•

Java Script. A través de este lenguaje es posible el establecimiento de código que será ejecutado en el propio navegador

•

Applets de Java

•

Visual Basic Script

•

FLASH

•

CSS

Lenguajes del lado cliente: 23

Universidad Tecnológica de Puebla • CGI • PERL • ASP • PHP

• JSP Lenguajes del lado cliente – servidor

• DHTML • XML Programando con PHP Sintaxis de PHP La ventaja que tiene PHP sobre otros lenguajes de programación que se ejecutan en el servidor (como podrían ser los script CGI Perl), es que nos permite intercalar las sentencias PHP en las paginas HTML, es un concepto algo complicado de entender si no se ha visto nunca como funciona unas páginas PHP o ASP. Vamos a ver un ejemplo sencillo para comprenderlo mejor. Seguiremos este criterio durante todo el manual. <html> <head> <title>Ejemplo de PHP</title> </head> <body> Parte de HTML normal. 24

Universidad Tecnológica de Puebla <BR><BR> <?php echo "Parte de PHP<br>"; for($i=0;$i<10;$i++) { echo "Linea ".$i."<br>"; } ?> </body> </html> El código PHP ejecutado tiene dos partes: la primera imprime “Parte de PHP" y la segunda es un bucle que se ejecuta 10 veces de 0 a 9, por cada vez que se ejecuta se escribe una línea, la variable $i contiene el número de línea que se está escribiendo. Variables Una variable es un contenedor de información, en el que podemos meter números enteros, números decimales, carácteres... el contenido de las variables se puede leer y se puede cambiar durante la ejecución de una página PHP. En PHP todas las variables comienzan con el símbolo del dólar $ y no es necesario definir una variable antes de usarla. Tampoco tienen tipos, es decir que una misma variable puede contener un número y luego puede contener carácteres. <html> <head> <title>Ejemplo de PHP</title> </head> <body> <?php $a = 1; $b = 3.34; $c = "Hola Mundo"; echo $a,"<br>",$b,"<br>",$c; ?> </body> </html> Existen 2 tipos de variables, las variables locales que solo pueden ser usadas dentro de funciones y las variables globales que tienen su ámbito de uso fuera de las funciones, podemos acceder a una variable global desde una función con la instrucción global nombre_variable; Aritméticos Estos son los operadores que se pueden aplicar a las variables y constantes numéricas. Operador 25

Nombre

Ejemplo

Universidad Tecnológica de Puebla + * / % ++ --

Suma Resta Multiplicación División Módulo Suma Resta

5 7 6 4 7 1 1

+6 -9 *3 /8 %2 $a++ $a--

Ejemplo: <html> <head> <title>Ejemplo de PHP</title> </head> <body> <?php $a = 8; $b = 3; echo $a + $b,"<br>"; echo $a - $b,"<br>"; echo $a * $b,"<br>"; echo $a / $b,"<br>"; $a++; echo $a,"<br>"; $b--; echo $b,"<br>"; ?> </body> </html> Comparación Los operadores de comparación son usados para comparar valores y así poder tomar decisiones. Operador Nombre Ejemplo Devuelve verdadero cuando: == Igual $a == $b $a es igual $b != Distinto $a != $b $a es distinto $b < Menor que $a < $b $a es menor que $b > Mayor que $a > $b $a es mayor que $b <= Menor o igual $a <= $b $a es menor o igual que $b >= Mayor o igual $a >= $b $a es mayor o igual que $b Condicionales Las sentencias condicionales nos permiten ejecutar o no unas ciertas instrucciones dependiendo del resultado de evaluar una condición. Las más frecuentes son la instrucción if y la instrucción switch. 26

Universidad Tecnológica de Puebla Sentencia if ... else <?php if (condición) { Sentencias a ejecutar cuando la condición es cierta. } else { Sentecias a ejecutar cuando la condición es falsa. } ?> La sentencia if ejecuta una serie de instrucciones u otras dependiendo de la condición que le pongamos. Probablemente sea la instrucción más importante en cualquier lenguaje de programación. Con la sentencia switch podemos ejecutar unas u otras instrucciones dependiendo del valor de una variable, en el ejemplo anterior, dependiendo del valor de la variable $posicion se ejecuta el bloque 1 cuando el valor es "arriba", el bloque 2 cuando el valor es "abajo" y el bloque 3 si no es ninguno de los valores anteriores. Bucles Los bucles nos permiten iterar conjuntos de instrucciones, es decir repetir la ejecución de un conjunto de instrucciones mientras se cumpla una condición. Sentencia while <?php while (condición) { intrucciones a ejecutar. } ?> Mientras la condición sea cierta se reiterará la ejecución de las instrucciones que están dentro del while. <html> <head> <title>Ejemplo de PHP</title> </head> <body> Inicio<BR> <?php $i=0; while ($i<10) { echo "El valor de i es ", $i,"<br>"; $i++; } 27

Universidad Tecnolรณgica de Puebla ?> Final<BR> </body> </html> Sentencia for La instrucciรณn for es la instrucciรณn de bucles mรกs completa. En una sola instrucciรณn nos permite controlar todo el funcionamiento del bucle. El primer parรกmetro del for, es ejecutado la primera vez y sirve para inicializar la variable del bucle, el segundo parรกmetro indica la condiciรณn que se debe cumplir para que el bucle siga ejecutรกndose y el tercer parรกmetro es una instrucciรณn que se ejecuta al final de cada iteraciรณn y sirve para modificar el valor de la variable de iteraciรณn. Funciones El uso de funciones nos da la capacidad de agrupar varias instrucciones bajo un solo nombre y poder llamarlas a estas varias veces desde diferentes sitios, ahorrรกndonos la necesidad de escribirlas de nuevo. <?php function Nombre(parametro1, parametro2...) { instrucciรณn1; instrucciรณn2; instrucciรณn3; instrucciรณn4; return valor_de_retorno; } ?> Manejo de cadenas Dado el uso del lenguaje PHP el tratamiento de cadenas es muy importante, existen bastantes funciones para el manejo de cadenas, a continuaciรณn explicaremos las mรกs usadas. * strlen(cadena). Nos devuelve el nรบmero de carรกcteres de una cadena * split(separador,cadena). Divide una cadena en varias usando un carรกcter separador. * sprintf(cadena de formato, var1, var2...). Formatea una cadena de texto al igual que printf pero el resultado es devuelto como una cadena. * substr(cadena, inicio, longitud). Devuelve una subcadena de otra, empezando por inicio y de longitud longitud. * chop(cadena). Elimina los saltos de lรญnea y los espacios finales de una cadena. * strpos(cadena1, cadena2). Busca la cadena2 dentro de cadena1 indicรกndonos la posiciรณn en la que se encuentra. * str_replace(cadena1, cadena2, texto). Reemplaza la cadena1 por la cadena2 en el texto. <html> <head> 28

Universidad Tecnológica de Puebla <title>Ejemplo de PHP</title> </head> <body> <?php echo strlen("12345"),"<br>"; $palabras=split(" ","Esto es una prueba"); for($i=0;$palabras[$i];$i++) echo $palabras[$i],"<br>"; $resultado=sprintf("8x5 = %d <br>",8*5); echo $resultado,"<br>"; echo substr("Devuelve una subcadena de otra",9,3),"<br><br>"; if (chop("Cadena \n\n ") == "Cadena") echo "Iguales<br><br>"; echo strpos("Busca la palabra dentro de la frase", "palabra"),"<br><br>"; echo str_replace("verde","rojo","Un pez de color verde, como verde es la hierba."),"<br>"; ?> </body> </html> Envío y recepción de datos El lenguaje PHP nos proporciona una manera sencilla de manejar formularios, permitiéndonos de esta manera procesar la información que el usuario ha introducido. Al diseñar un formulario debemos indicar la página PHP que procesará el formulario, así como en método por el que se le pasará la información a la página. <html> <head> <title>Ejemplo de PHP</title> </head> <body> <H1>Ejemplo de procesado de formularios</H1> Introduzca su nombre: <FORM ACTION="procesa.phtml" METHOD="GET"> <INPUT TYPE="text" NAME="nombre"><BR> <INPUT TYPE="submit" VALUE="Enviar"> </FORM> </body> </html> Por razones de seguridad para acceder a las variables del formulario hay que usar el array de parámetros $_POST[] o $_GET[] dependiendo del método usado para enviar los parámetros. Method GET y POST 29

Universidad Tecnológica de Puebla En la página anterior hemos comentado que los datos de un formulario se envía mediante el método indicado en el atributo METHOD de la etiqueta FORM, los dos métodos posibles son GET y POST. La diferencia entre estos dos métodos radica en la forma de enviar los datos a la página, mientras que el método GET envía los datos usando la URL, el método POST los envía por la entrada estándar STDIO <html> <head> <title>Ejemplo de PHP</title> </head> <body> <H1>Ejemplo de procesado de formularios</H1> <FORM ACTION="procesa2.phtml" METHOD="GET"> Introduzca su nombre:<INPUT TYPE="text" NAME="nombre"><BR> Introduzca sus apellidos:<INPUT TYPE="text" NAME="apellidos"><BR> <INPUT TYPE="submit" VALUE="Enviar"> </FORM> </body> </html> <html> <head> <title>Ejemplo de PHP</title> </head> <body> <H1>Ejemplo de procesado de formularios</H1> <FORM ACTION="procesa2.phtml" METHOD="POST"> Introduzca su nombre:<INPUT TYPE="text" NAME="nombre"><BR> Introduzca sus apellidos:<INPUT TYPE="text" NAME="apellidos"><BR> <INPUT TYPE="submit" VALUE="Enviar"> </FORM> </body> </html> <html> <head> <title>Ejemplo de PHP</title> </head> <body> <H1>Ejemplo de procesado de formularios</H1> El nombre que ha introducido por GET es: <?php echo $_GET['nombre']," ", $_GET['apellidos'] ?><br> El nombre que ha introducido por POST es: <?php echo $_POST['nombre']," ", $_POST['apellidos'] ?> <br> </body> </html> 30

Universidad Tecnológica de Puebla Envío de correo electrónico PHP nos ofrece la posibilidad de enviar emails de una manera sencilla y fácil, para ello el lenguaje nos proporciona la instrucción mail( ) <?php mail(destinatario, tema, texto del mensaje); ?> En el parámetro destinatario pondremos la dirección de email a donde se enviará el mensaje, en el parámetro tema el tema o subject del mensaje y el parámetro texto del mensaje el cuerpo del mensaje en formato texto plano. Existe una sintaxis extendida de la instrucción mail( ) que nos permite añadir información adicional a la cabecera del mensaje. <?php mail(destinatario, tema, texto del mensaje, información adicional de cabecera); ?> En la información de cabecera podremos incluir parámetros adicionales al mensaje como Reply-To:, From:, Content-type:... que nos permiten tener un mayor control sobre el mensaje.

A su vez, si el sitio web realiza conectividad a base de datos esta decisión tiene tomarse de una manera conjunta, entre las tecnologías de motores de bases de datos que más se utilizan tenemos: • • •

Microsoft SQL Server Mysql Oracle

En secciones posteriores se detallara la utilización del motor de base de datos Mysql. Tarea: Realizar investigación de versiones gratuitas de SQL Server y Oracle

• Sistemas operativos donde se ejecutan • Tamaño máximo de la base de datos

II.

Configuración del Entorno Web En la actualidad existen diferentes tecnologías que dan soporte a los servidores de páginas web, estas constituyen la base en la cual las páginas son alojadas y desplegadas cuando una petición se realiza a través de un navegador web

Universidad Tecnológica de Puebla Un estudio de Netcraft13, muestra que los servidores de páginas web que dominan en mercado son Apache 14 e IIS15, como se muestra en la siguiente figura:

Tomando de referencia esta información, en los anexos de este documento se muestra los procesos para la configuración del servidor de páginas web Apache e IIS. PRACTICA: Realizar la instalación del servidor de páginas web Apache e IIS (Se sugiera la utilización de Vmware) III.

Métodos de conexión de forma abierta Existen diferentes mecanismos a través de los cuales es posible establecer conectividad a bases de datos entre los cuales tenemos: • • •

ODBC, JDBC, PDO O NATIVA

A continuación se describe cada uno de ellos. ODBC ODBC16 (Open Database Connectivity) es una plataforma estándar de acceso a sistemas de manejo de bases de datos. ODBC es independiente del sistema operativo o del lenguaje de programación que se esté utilizando.

13 14 15 16

http://news.netcraft.com/ http://www.apache.org/ http://www.iis.net/ http://www.easysoft.com/developer/interfaces/odbc/linux.html 32

Universidad Tecnológica de Puebla A través de estas tecnologías es posible establecer conexiones con bases de datos tales como: • • • • • • • • •

Oracle SQL Server Access Sybase Interbase Firebird C/D-ISAM LINC Developer System Z

Un ejemplo de la utilización de ODBC desde código PHO es la siguiente 17: <? # connect to a DSN "mydb" with a user and password "marin" $connect = odbc_connect("mydb", "marin", "marin"); # query the users table for name and surname $query = "SELECT name, surname FROM users"; # perform the query $result = odbc_exec($connect, $query); # fetch the data from the database while(odbc_fetch_row($result)){ $name = odbc_result($result, 1); $surname = odbc_result($result, 2); print("$name $surname\n"); } odbc_close($connect); ?> Un ejemplo de la utilización de ODBC desde código C# es la siguiente 18:

17 18

http://phplens.com/phpeverywhere/node/view/9 http://www.easysoft.com/developer/languages/csharp/CSharpODBCExample1.cs 33

Universidad Tecnol贸gica de Puebla using using using using

System; System.Collections.Generic; System.Text; System.Data.Odbc;

namespace ConsoleApplication1 { class Program { static void Main(string[] args) { OdbcConnection DbConnection = new OdbcConnection("DSN=SAMPLE_ISAM"); DbConnection.Open(); OdbcCommand DbCommand = DbConnection.CreateCommand(); DbCommand.CommandText = "SELECT * FROM NATION"; OdbcDataReader DbReader = DbCommand.ExecuteReader(); int fCount = DbReader.FieldCount; Console.Write( ":" ); for ( int i = 0; i < fCount; i ++ ) { String fName = DbReader.GetName(i); Console.Write( fName + ":" ); } Console.WriteLine(); while( DbReader.Read()) { Console.Write( ":" ); for (int i = 0; i < fCount; i++) { String col = DbReader.GetString(i); Console.Write(col + ":"); } Console.WriteLine(); } DbReader.Close(); DbCommand.Dispose(); DbConnection.Close(); 34

Universidad Tecnológica de Puebla } } }

JDBC JDBC (Java Database Connectivity) es una plataforma estándar de acceso a bases de datos desde Java

• • • • • • •

DB2 FoxPro Ingres InterBase LDAP MS Access MS SQL Server

• • • • • •

MySQL Oracle Paradox PostgreSQL Progress Sybase

El listado completo de manejadores de bases de datos soportados por JDBC se puede encontrar en: http://developers.sun.com/product/jdbc/drivers/ Un ejemplo de la utilización de JDBC a base de datos SQL Server es el siguiente 19 : DriverManager.getConnection( "jdbc:odbc:dsn_name;user=***;password=***"); DriverManager.getConnection("jdbc:odbc:dsn_name",properties); // properties contains "user" and "password" /** * OdbcSqlServerConnection.java * Copyright (c) 2007 by Dr. Herong Yang. All rights reserved. */ import java.sql.*; public class OdbcSqlServerConnection { public static void main(String [] args) { Connection con = null; try { Class.forName("sun.jdbc.odbc.JdbcOdbcDriver") ; 19

http://www.herongyang.com/jdbc/JDBC-ODBC-SQL-Server-Connection.html 35

Universidad Tecnol贸gica de Puebla // Connect with a full url string con = DriverManager.getConnection( "jdbc:odbc:SQL_SERVER;user=sa;password=HerongYang"); System.out.println("First connection ok."); con.close(); // Connect with a url string and properties java.util.Properties prop = new java.util.Properties(); prop.put("user", "sa"); prop.put("password", "HerongYang"); con = DriverManager.getConnection("jdbc:odbc:SQL_SERVER", prop); System.out.println("Second connection ok."); con.close(); } catch (Exception e) { System.err.println("Exception: "+e.getMessage()); } } } Un ejemplo de la utilizaci贸n de JDBC a base de datos Oracle es el siguiente 20 : Connection connection = null; try { // Load the JDBC driver String driverName = "oracle.jdbc.driver.OracleDriver"; Class.forName(driverName); // Create a connection to the database String serverName = "127.0.0.1"; String portNumber = "1521"; String sid = "mydatabase"; String url = "jdbc:oracle:thin:@" + serverName + ":" + portNumber + ":" + sid; String username = "username"; String password = "password"; connection = DriverManager.getConnection(url, username, password); } catch (ClassNotFoundException e) { // Could not find the database driver } catch (SQLException e) { // Could not connect to the database 20

http://www.exampledepot.com/egs/java.sql/ConnectOracle.html 36

Universidad Tecnológica de Puebla }

IV.

Métodos de conexión a datos usando directamente los drivers del proveedor.

Debido a Identificar los diversos métodos de conexión definidas por el proveedor de base de datos (OLEDB, SQLServer, Oracle,MySQL) V.

Manipulación de datos a través de un programa

Esta sección tiene como objeto mostrar el empleo de las instrucciones de inserción, borrado, actualización y consulta en una base de datos con la finalidad de que estas operaciones sean posteriormente incorporadas dentro del desarrollo de su aplicación web. NOTA: Como punto de partida es necesario tener habilitado un servidor de páginas web Apache con soporte de PHP y un motor de base de datos Mysql, para ellos te tienen diferentes opciones, desde trabajarlo en Linux, o utilizar soluciones integradas como es el caso de AppServer para ambientes Windows

Conexión Ingrese a su localhost y crea una base de datos denominada familia que contenga a la tabla agenda donde los campos de dicha tabla se describen a continuación

Universidad Tecnológica de Puebla Una vez creada, se deberá realizar el código en HTML la cual haga referencia a los campos mostrados con anterioridad, el código lucirá de la siguiente manera: <form action="InsertarPHP.php" method="POST"> Escribe tu nombre: <input type="text" maxlength="10" size="10" name="nom"> <br><br> Escribe tu direccion: <input type="text" maxlength="10" size="10" name="dir"> <br><br> Escribe tu Telefono: <input type="text" maxlength="10" size="10" name="tel"> <br><br> <br><br><br> <input type="submit" value="ENVIAR DATOS"> input type="reset" value="BORRAR DATOS"> </form>

Una vez que tienes la interfaz, que es el código en HTML, el código PHP que va a realizar la ejecución es el siguiente: Este código va a hacer referencia al archivo denominado conectar, y su única función es proveer una conexión con la base de datos y así no estar repitiendo de manera consecutiva el mismo código. Cuando ya se tiene el código en un archivo y se emplea el mismo, utiliza la instrucción require(" "); y en este caso quedará de la siguiente forma require("conectar.php"); <? $Servidor = localhost; $Usuario = "mysql"; $Password = ""; $BaseDeDatos = "Familia"; $conexion=mysql_connect($Servidor,$Usuario,$Password) or die("Error: El servidor no puede conectar con la base de datos"); $descriptor=mysql_select_db($BaseDeDatos,$conexion); ?>

Este es el código que corresponde al archivo InsertarPHP.php 38

Universidad Tecnológica de Puebla <?php # AÑADIMOS EL NUEVO REGISTRO $v1=$nom; $v2=$dir; $v3=$tel; require("conectar.php"); $consulta = mysql_query("INSERT INTO agenda (`id`, `Nombre`, `Direccion`, `Telefono`) VALUES ('', '$v1', '$v2', '$v3')"); if($guardar == mysql_query("$consulta")) { echo "Registro Agregado"; }else{ echo " se causó un error"; } ?> Te la pagina lucirá similar a esto

Después de presionar el botón de enviar datos o continuar, la confirmación esperada será

Universidad Tecnológica de Puebla

Actividad Lee detenidamente las oraciones y ve realizando paso a paso cada una de las instrucciones marcadas. • •

Crea una base de datos denominada Super. Dentro de la base se crearan las tablas de damas y caballeros, cada una de las tablas tendrán los campos consecutivo, código (XX-DDD), descripción (20) , cantidad(3), precio unitario (5), total(12).

Importante: deberán de insertar mínimo 5 registros en cada tabla (damas y caballeros) Una vez que se tienen creada la base de datos con las tablas, se deberá de realizar el script para conectarte a la base de datos y el código para insertar datos. Se beberá de entregar el código debidamente documentado de manera individual y proponer cual es la sintaxis y/o condigo para eliminar un registro.

Consulta de un Registro En esta ocasión, se va a trabajar con la consulta de un registro de la tabla agenda que se había creado previamente, para lo cual se deben de realizar los siguientes pasos: • Contar con el archivo conectar.php; recuerda que en este archivo contiene las instrucciones para conectarte al servidor, y a la base de datos. 40

Universidad Tecnológica de Puebla La interfaz de esta página, va a ser sencilla y está dada en primera instancia por el siguiente código: <form action="busqueda.php" method="POST"> Escribe el nombre a buscar o consultar: <input type="text" maxlength="10" name="nom"> <input type="submit" value="buscar "> </form> Como puede observarse, este formulario va a hacer referencia a un archivo denominado búsqueda.php, que es donde se va a realizar la búsqueda del elemento dentro de nuestra tabla agenda de la base de datos familia; el código de dicho archivo es el siguiente: <? require("conectar.php"); $v1=$nom; $resul=mysql_query("Select * from agenda where(Nombre like '$v1')"); if ("$resul") { echo "<table border=2>"; while ($regis=mysql_fetch_row($resul)){ echo "<tr>"; foreach($regis as $clave){ echo "<td>",$clave,"</td>"; } } echo "</table>"; } else{ echo "no se encontró el registro"; } mysql_close(); ?> La descripción de este código es la siguiente: $resul=mysql_query("Select * from agenda where(Nombre like '$v1')"); 41

Universidad Tecnológica de Puebla Esta línea, indica que se va a generar una consulta de la tabla agenda donde el criterio de búsqueda será el campo “Nombre” que sea igual a lo que contenga la variable $v1. while ($regis=mysql_fetch_row($resul)) En esta línea de código, la instrucción especifica mysql_fetch_row, devuelve el arreglo con los valores de la consulta, que sería nuestro criterio ($result). foreach($regis as $clave) Esta línea tiene como finalidad asignar a una variable temporal lo que contenga $regist. mysql_close(); Observe que después de haber mostrado el archivo especificado, se debe de cerrar la conexión a la base de datos que se habilito en el archivo conectar.php, esto con la finalidad de que no puedan generarse errores sobre el manejo de datos. Las pantallas serán algo similar a las siguientes

Universidad Tecnológica de Puebla

Actividad De la Base de datos anterior (super), deberán de utilizar el método de búsqueda para localizar los artículos por medio de su código y nombre; de ambas tablas (damas y caballeros). Eliminación de un registro con confirmación A continuación se va a mostrar la eliminación (borrado) de un registro de en la tabla agenda que se había creado previamente, para lo cual se deben realizar los siguientes pasos: •

Contar con tu archivo conectar.php; recuerda que en este archivo se tienen las instrucciones para conectarte a tu servidor, y a la base de datos.

La interfaz de esta página, va a ser sencilla y está dada de primera instancia por el siguiente código: <form action="eliminar.php" method="POST"> Escribe el nombre a eliminar o borrar: <input type="text" maxlength="10" name="nom"> <input type="submit" value="Eliminar Registro"> </form>

Universidad Tecnológica de Puebla Como se puede observar, este formulario va a hacer referencia a un archivo denominado eliminar.php, que es donde reside el código para eliminar previa confirmación de la acción dentro de nuestra tabla agenda de la base de datos familia; el código de dicho archivo es el siguiente: <? require("conectar.php"); $v1=$nom; $resul=mysql_query("Select * from agenda where(Nombre like '$v1')"); if ("$resul") { echo "<form name=eli action=SiConfirmoEliminacion.php method=post>"; while ($regis=mysql_fetch_row($resul)) { echo "CLAVE: ","<input type=text name=id value=$regis[0]>", "<br>"; echo "NOMBRE: ","<input type=text name=nom value=$regis[1]>", "<br>"; echo "DIRECCION: ","<input type=text name=dir value=$regis[2]>", "<br>"; echo "TELEFONO" ,"<input type=text name=tel value=$regis[3]>", "<br>", "<br>", "<br>"; } echo "Estas Seguro de Eliminar el registro","<br>","<br>"; echo "<input type=submit value=Si>"; echo "<input type=reset value=No>"; } else{ echo "no se encontró el registro","<br>","<br>"; } mysql_close(); ?> Como puede observarse, en esta ocasión se está haciendo el llamado a un tercer archivo denominado SiConfirmoEliminacion.php, este archivo lo que hace realmente es eliminar el archivo que se encontró previamente en el anterior (eliminar.php), es decir si uno quisiera eliminar un registro de la base de datos con la plena seguridad de que es ese, entonces solo se tendría que hacer el archivo SiConfirmoEliminacion.php. 44

Universidad Tecnol贸gica de Puebla El archivo SiConfirmoEliminacion.php es el siguiente: <? require("conectar.php"); $V=$id; $resul=mysql_query("DELETE FROM agenda WHERE(Id like $V)"); if ($resul){ echo "REGISTRO ELIMINADO"; } else{ echo " ERROR NO SE PUDO ELIMINAR EL REGISTRO"; } mysql_close(); ?> Las pantallas ser谩n algo similar a las siguientes

Universidad Tecnológica de Puebla

Despliegue del contenido de una tabla de la base de datos. En esta ocasión, se va a trabajar con el listado (despliegue) de un registro de nuestra tabla agenda que se había creado previamente, para lo cual debes de realizar los siguientes pasos: •

Contar con tu archivo conectar.php; recuerda que en este archivo contiene las instrucciones para conectarte a tu servidor, y a la base de datos.

La interfaz de esta página, va a ser sencilla y está dada de primera instancia por el siguiente código: <form name="miform" action="listado.php" method="POST"> <input type="submit" value="Mostrar o Desplegar toda la Base de Datos "> </form> Como observaste, ahora la interfaz solo lleva la gestión del botón de Mostrar…, ya que como se supone se va a desplegar todo el contenido de la tabla de datos, el archivo que ejecuta dicha acción es listado.php, el cual contiene el siguiente script <? require("conectar.php"); $v1=$nom; $resul=mysql_query("Select * from agenda"); echo "<CENTER> <table border=2>"; while ($regis=mysql_fetch_row($resul)){ echo "<tr>"; foreach($regis as $clave){ echo "<td>",$clave,"</td>"; 46

Universidad Tecnológica de Puebla } } echo "</table> </CENTER>"; mysql_close(); ?> Las pantallas serán algo similar a las siguientes

Actividad De la Base de datos anterior (super), deberán de utilizar el método de despliegue general por cada una de las tablas (damas, caballeros). Como ya se tiene todas las acciones o las más comunes, ahora deberán de entregar ya todo integrado es decir trabajar en el aspecto de presentación a 47

Universidad Tecnol贸gica de Puebla todo este trabajo de practica utilizando hojas de estilo, realizar la aplicaci贸n lo m谩s detallado posible y obviamente entendible.

Universidad Tecnológica de Puebla Entregables Las actividades a realizarse se dividen en dos fases, la primera enfocada al análisis de requerimientos y diseño de la aplicación web y la segunda se enfoca a la implementación y pruebas de la misma. Así los entregables de las fases serán: Primera fase: Determinar los requerimientos de funcionalidad del programa mediante técnicas de análisis para determinar las variables de entrada y salida del problema específico. • • •

Determina el objetivo del programa. Realiza un mapa conceptual del problema. Genera un listado de variables E/S asociándoles un tipo de dato.

Proponer una solución mediante un algoritmo o diagrama de flujo, para atender los requisitos de un problema específico. • • • •

Establece los pasos lógicos a seguir y su orden. Usa las estructuras de control necesarias. Presenta el pseudocódigo del problema o diagrama de flujo correspondiente al modelado de objetos. Define un escenario de pruebas para evaluar que los resultados son acordes a los requerimientos.

Establecer los elementos de las páginas de un Sitio Web por medio del análisis de requerimientos de datos para cubrir las necesidades de comunicación de una organización. • • •

Realiza la especificación los requerimientos (apariencia, información a presentar, funcionalidad del sitio). Elabora el Mapa del sitio. Diseña el prototipo de interface de acuerdo con los criterios de usabilidad.

Segunda fase: Desarrollar la aplicación utilizando algún lenguaje de programación para solucionar un problema específico. • • • 49

Realiza la traducción del diseño al lenguaje de programación. Interpreta los errores de compilación y los corrige. Generar un programa ejecutable y realiza la verificación de los resultados (errores lógicos) al menos con 2 corridas usando valores de entrada diferentes.

Universidad Tecnológica de Puebla •

Presenta el código fuente del programa de acuerdo a las buenas prácticas de programación (tabulaciones, comentarios, nombres de variables, entre otras).

Adicionalmente en la segunda fase se entregará en medio electrónico: • • • •

Sitio Web (Formularios, Contadores, Accesos a Base de Datos con sus funciones de interacción: altas, bajas, modificaciones, consultas y reportes). Base de Datos. Archivo de conexión de Base de datos. Documentación electrónica (Manual de usuario y técnico).

Universidad Tecnológica de Puebla Bibliografía • • • •

Java 2 Interfaces gráficas y aplicaciones para internet (2da. Edición), Ceballos, Francisco Javier, AlfaOmega Ra-Ma The web designer’s Idea Book: The Ultimate Guide, Mcneil, Patrick, FW Publications Inc. Principios de seguridad en el comercio electrónico (1era Edición), Puentes Cairo, Juan Francisco. AlfaOmega Ra-Ma Web Applications Design Patters (Interactive Technologies. 1st Ed.), Vora, P. Morgan Kaufmann.