• Author / Uploaded
• reychel_chacal

• Categories
• Servidor web
• Red mundial
• Tecnología
• HTML
• JavaServer Pages

Citation preview

Instituto Tecnológico Superior 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

ÍNDICE GENERAL Tema

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

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

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

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.

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.

Programación Web

1.1.

Unidad I.

Perspectiva histórica del Internet. Los inicios de Internet nos remontan a los años 60. En plena guerra fría, Estados

Unidos crea una red exclusivamente militar, con el objetivo de que, en el hipotético caso de un ataque 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 4 ordenadores distribuidos entre distintas universidades del país. Dos años después, ya contaba con unos 40 ordenadores conectados. Tanto fue el crecimiento de la red que su sistema de comunicación se quedó obsoleto. Entonces dos investigadores crearon el Protocolo TCP/IP, que se convirtió 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 fines académicos o de investigación podía tener acceso a la red. Las funciones militares se desligaron de ARPANET 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 y académicos. El desarrollo de las redes fue abismal, y se crean nuevas redes de libre acceso que má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 unos pocos. El autor William Gibson hizo una revelación: el término "ciberespacio". En ese tiempo la red 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ño 1990 ya contaba con alrededor de 100.000 servidores.

L.I. Esteban Sánchez Mendoza

Página 6

Programación Web

Unidad I.

En el Centro Europeo de Investigaciones Nucleares (CERN), Tim Berners Lee dirigía la búsqueda de un sistema de almacenamiento y recuperación de datos. Berners Lee retomó la idea de Ted 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ón a cada parte del contenido. Luego, un programa de computación, un intérprete, eran capaz de leer esas 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", que permitió acceder con mayor naturalidad a la WWW. La interfaz gráfica iba más allá de lo previsto y la facilidad con la que podía manejarse el programa abría la red a los legos. Poco después Andreesen encabezó la creación del programa Netscape. A partir de entonces Internet comenzó a crecer más rápido que otro medio de comunicación, convirtiéndose en lo que hoy todos conocemos. Algunos de los servicios disponibles en Internet aparte de la WEB son el acceso remoto a 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.

L.I. Esteban Sánchez Mendoza

Página 7

Programación Web

1.2.

Unidad I.

Protocolo http (protocolo de transferencia de hipertexto). Desde 1990, el protocolo HTTP (Protocolo de transferencia de hipertexto) es el

protocolo más utilizado en Internet. La versión 0.9 sólo tenía la finalidad de transferir los datos a través de Internet (en particular páginas Web escritas en HTML). La versión 1.0 del protocolo (la más utilizada) permite la transferencia de mensajes con encabezados que describen el contenido de los mensajes 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 procesamiento de la solicitud en el servidor. Dado que sólo nos ocupamos del protocolo HTTP, no se explicará la

L.I. Esteban Sánchez Mendoza

Página 8

Programación Web

Unidad I.

parte del procesamiento en el servidor en esta sección del artículo. Si este tema les interesa, puede consultar 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, el método que se aplicará y la versión del protocolo utilizada. La línea está formada por tres elementos que deben estar separados por un espacio: o o o

el método la dirección URL 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 que permiten 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 estar separadas de las líneas precedentes por una línea en blanco y, por ejemplo, permiten que se envíen datos por un comando POST durante la transmisión de datos al servidor utilizando un formulario.

L.I. Esteban Sánchez Mendoza

Página 9

Programación Web

Unidad I.

1.2.1 Arquitectura del WWW. Web o la web, la "red" o www de "World Wide Web", es básicamente un medio de comunicación de texto, gráficos y otros objetos multimedia a través de Internet, es decir, la web es un sistema de hipertexto que utiliza Internet como su mecanismo de transporte o desde otro punto de 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 en y el protocolo de transporte de hipertexto (hypertext transport protocol (http)). La mayoría de los documentos 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 un subconjunto 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 de información (llamados "documentos" o "páginas web") de los servidores web y muestran en la pantalla del ordenador de la persona que está buscando la información gráfica, textual o video e incluso audio. Después se pueden seguir enlaces o hyperlinks en cada página a otros documentos o incluso devolver información al servidor para interactuar con él. Al acto de seguir un enlace tras otro a veces se le llama navegar en Internet.

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

L.I. Esteban Sánchez Mendoza

Página 10

Programación Web

Unidad I.

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 la WWW. Con la WWW se pretende unificar el proceso información de servicios que antes eran incompatibles entre sí, tratando de conseguir que todos los servicios de internet sean accesibles a través de la WWW, de esta forma desde un mismo programa se puede tener acceso a todos los recursos de una forma uniforme y permite que los documentos HTML incluyan enlaces a otras 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, para referenciar 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 la WWW, 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.

L.I. Esteban Sánchez Mendoza

Página 11

Programación Web

Unidad I.

https: (HyperText Transport Protocol Secure), es el protocolo para la conexión a servidores de la WWW seguros. Estos servidores son normalmente de ámbito comercial y utilizan encriptación para evitar la intercepción de los datos enviados, usualmente numeros de tarjeta de credito, 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. Se utilizará cuando la información que se desee acceder se encuentre en un servidor de ftp. Por defecto se 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 grupo de 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 una aplicació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 el dominio. En el caso de nuestra Universidad el dominio siempre será uca.es. Por tanto un nombre valido de maquina será www2.uca.es. Es muy importante indicar siempre el dominio, ya que debemos suponer que se conectarán a nuestras páginas desde servidores externos a nuestra red local por tanto si no indicamos el dominio las URL que especifiquemos no podrían ser seguidas por los navegadores L.I. Esteban Sánchez Mendoza

Página 12

Programación Web

Unidad I.

externos. Si en vez de www2.uca.es utilizamos www2 será perfectamente accesible por cualquier máquina de nuestra red local pero si se referenciara desde una red con distinto dominio la maquina www2 será la maquina llamada así en el dominio remoto si existiera, que no es la que deseamos referenciar. 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 al puerto 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 por convenio al ser este tipo de máquinas las más usadas como servidores. El nombre de los subdirectorios y del fichero referenciado puede ser de más de ocho caracteres y se tendrá en cuenta la 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 el servidor el tipo de documento que se accede e indica al cliente (navegador) el modo en que debe tratarse ese documento. Para definir los tipos de documentos se utiliza los tipos MIME. Las extensiones 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 se almacena en el disco duro del visitante de una página web a través de su modo a petición del servidor de la página. Esta información puede ser luego recuperada por el servidor en posteriores

L.I. Esteban Sánchez Mendoza

Página 13

Programación Web

Unidad I.

visitas. En ocasiones también se le llama "huella". Las inventó Lou Montulli, un antiguo empleado de Netscape Communications." s Al ser el protocolo HTTP incapaz de mantener información por sí mismo, para que se pueda conservar información entre una página vista y otra (como login de usuario, preferencias de colores, etc.), ésta debe ser almacenada, ya sea en la URL de la página, en el propio servidor, o en una 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 y contraseña, se almacena una cookie para que no tenga que estar introduciéndolas para cada página del servidor. Sin embargo una cookie no identifica a una persona, sino a una combinación de computador-navegador-usuario. Conseguir información sobre los hábitos de navegación del usuario, e intentos de spyware, por parte de agencias de publicidad y otros. Esto puede causar problemas de privacidad y es 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 el cliente, sin necesidad de CGIs. En un principio, debido a errores del navegador, esto dio algunos problemas 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 para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (). HTML también puede describir, hasta un cierto punto, la apariencia de un L.I. Esteban Sánchez Mendoza

Página 14

Programación Web

Unidad I.

documento, y puede incluir un script (por ejemplo JavaScript), el cual puede afectar el comportamiento 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ía má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

L.I. Esteban Sánchez Mendoza

Página 15

Programación Web

Unidad I.

El SGML es un sistema para definir lenguajes para dar formato a documentos (markup languages). Los autores utilizan un código de formato (en inglés markup) en sus documentos para representar información estructural, presentacional y semántica junto con el contenido. El HTML es un ejemplo de lenguaje de formato de documentos. Aquí tenemos un ejemplo de un documento HTML: 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 sobre el documento), y el contenido del documento aparece en el cuerpo. El cuerpo de este ejemplo contiene únicamente un párrafo, codificado o marcado como Cada lenguaje de formato de documentos definido con SGML se llama aplicación SGML. Una aplicación SGML se caracteriza generalmente por: 1.

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

2.

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

3.

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

4.

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

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

L.I. Esteban Sánchez Mendoza

Página 16

Programación Web

Unidad I.

1.3.2 Elementos del lenguaje HTML. Además de etiquetas y atributos, HTML define el término elemento para referirse a las partes 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 que está 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 el espacio disponible en la página. Los elementos de bloque siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea, aunque sus contenidos no lleguen hasta el final de la línea. Por su parte, los elementos en línea sólo ocupan el espacio necesario para mostrar 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 las circunstancias: button, del, iframe, ins, map, object, script.

L.I. Esteban Sánchez Mendoza

Página 17

Programación Web

Unidad I.

1.3.3 Tablas en HTML. Al igual que las listas,las tablas son componentes dedicados fundamentalmente a mejorar la visualización de los documentos en formato electrónico. Se trata de una funcionalidad básica de la inmensa mayoría de los programas de tratamiento de texto y una forma habitual de presentar 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 determinar inicialmente el número de filas o columnas, el navegador se encarga de averiguarlo a medida que profundice en el contenido de la tabla que está cargando en pantalla. Cada celda se limita con la directiva cerrada y cada fila con la directiva. Una vez que tengamos declarada el comienzo de nuestra tabla con se coloca un nuevo comando contenedor, el atributo (Table Row), para identificar cada fila de la tabla, en el interior de la definición de la tabla: Identifica el comienzo de la tabla Esto identifica una fila horizontal. Identifica el final de la tabla En cada una de las filas podrán aparecer celdillas que serán de 2 tipos: cabeceras o normales. Celdillas Cabeceras: Este tipo de celdillas son las que por así decirlo, identifican cada una de las columnas de la celdilla, y su interior destaca del resto del texto contenido en el resto de la tabla, debido a que aparece en negrita. Se limitan por (Table Head) y todo lo que contenga en su interior, destacara del resto del documento. En este ejemplo definimos una tabla con 2 columnas y una fila. Las columnas contendrán un texto destacado del resto del contenido de la tabla. Fijarse que todo lo que vaya entre las directivas definen el total de una fila, y después podremos poner tantas celdillas de cabecera como queramos, definiendo cada una por medio de. Un ejemplo de celdillas de cabecera 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 en sí.

L.I. Esteban Sánchez Mendoza

Página 18

Programación Web

Unidad I.

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 de un menú, etc.), antes de enviar el formulario a un agente para que lo procese (p.ej., a un servidor web, a un servidor de correo, etc.) Aquí se muestra un ejemplo de un formulario simple que incluye rótulos, radiobotones y botones para reinicializar el formulario o para enviarlo: Nombre: Apellido: email: Varón Mujer Enviar

Restablecer

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

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

Página 19

Programación Web

Unidad I.

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

Tipos de controles HTML define los siguientes tipos de controles: botones Los autores pueden crear tres tipos 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ón reinicializa todos los controles a sus valores iniciales.



Botones pulsadores (push buttons): Los botones pulsadores no tienen un comportamiento por defecto. Cada botón pulsador puede tener asociados scripts en el lado del cliente a través del atributo evento del elemento. Cuando ocurre un evento (p.ej., el usuario aprieta el botón, lo suelta, etc.), se acciona el script asociado. Los autores deberían especificar el lenguaje de programación del script de un botón

pulsador a través de una declaración de scripts por defecto (con el elemento META). Los autores crean botones con el elemento BUTTON o el elemento INPUT. Consulte las definiciones de estos elementos para más detalles sobre cómo especificar diferentes tipos de botones.

L.I. Esteban Sánchez Mendoza

Página 20

Programación Web

Unidad I.

1.4 Evolución del desarrollo de aplicaciones Web. Con la introducción de Internet y del Web en concreto, se han abierto infinidad de posibilidades en cuanto al acceso a la información desde casi cualquier sitio. Esto representa un desafío a los desarrolladores de aplicaciones, ya que los avances en tecnología demandan cada vez aplicaciones más rápidas, ligeras y robustas que permitan utilizar el Web. Afortunadamente, tenemos herramientas potentes para realizar esto, ya que han surgido nuevas tecnologías que permiten que el acceso a una base de datos desde el Web, por ejemplo, sea un mero trámite. El único problema es decidir entre el conjunto de posibilidades la correcta para cada situación. El viejo CGI ha cumplido con el propósito de añadir interactividad a las páginas Web pero sus deficiencias en el desarrollo de aplicaciones y en la escalabilidad de las mismas ha conducido al desarrollo de APIs específicos de servidor como Active Server Pages, ASP, y PHP, que son más eficientes que su predecesor CGI. Para aprovechar el potencial de estas tecnologías y ofertar una solución de servidor más extensible y portable, Sun ha desarrollado la tecnología llamada servlet. Los servlets Java son muy eficientes, debido al esquema de threads en el que se basan y al uso de una arquitectura estándar como la JVM, Java Virtual Machine. Otra nueva tecnología viene a sumarse a las que extienden la funcionalidad de los servidores Web, llamada Java Server? Pages, JSP. Los JSP permiten juntar HTML, aplicaciones Java, y componentes como las Java Beans? creando una página Web especial que el servidor Web compila 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 hacia aplicaciones web enfocadas al usuario final. El Web 2.0 es una actitud y no precisamente una tecnología. Cuando el web inició, nos encontrábamos en un entorno estático, con páginas en HTML que sufrían pocas actualizaciones y no tenían interacción con el usuario. La Web 2.0 es la transición que se ha dado de aplicaciones tradicionales hacia aplicaciones que funcionan a través del

L.I. Esteban Sánchez Mendoza

Página 21

Programación Web

Unidad I.

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

Todo inició cuando Dale Dougherty de O’Reilly Media utilizó este término en una conferencia en la que compartió una lluvia de ideas junto a Craig Cline de Media Live? en la que hablaba del renacimiento y evolución de la web. Constantemente estaban surgiendo nuevas aplicaciones y sitios con sorprendentes funcionalidades. Y así se dio la pauta para la Web 2.0 conference de 2004. Esta conferencia no solo fue exitosa sino que ya tuvo seguimiento en la Web 2.0 Conference del 2005 celebrada en Octubre. En la charla inicial del Web Conference se habló de los 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 por una arquitectura de participación. La innovación surge de características distribuidas por desarrolladores independientes. El fin del círculo de adopción de software (“Servicios en beta perpetuo”) La Web 2.0 con ejemplos La forma más fácil de comprender lo que significa la Web 2.0 es a través de ejemplos. Podemos comparar servicios web que marcan claramente la evolución hacia 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. Un documento XML puede estar formateado de muchas diferentes formas y propósitos por lo que sería muy útil utilizar un sólo documento XML y diferentes posibles formateos dependiendo del uso que se le vaya a dar al documento.. CSS, Cascading Style Sheets, hojas de estilo en cascada, fue introducido en 1996 como el standar para añadir información de estilo a los documentos HTML. Pero este uso estaba restringido sólo a las etiquetas propias de HTML. Con XML estas reglas de estilo pueden aplicarse a todos los elementos. CSS tiene dos versiones denominadas CSS1 y CSS2 aparecidas 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 L.I. Esteban Sánchez Mendoza

Página 22

Programación Web

Unidad I.

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án limitados.

•

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 es necesario especificar qué formato se debe utilizar. Para este propósito se utiliza la instrucción xml-stylesheet De este modo el fichero de estilos se incluye en el documento 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 se denomina mi_fichero.css y debe encontrarse en el mismo directorio que el que estamos escribiendo. •

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

ESTILOS EN CASCADA A 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. L.I. Esteban Sánchez Mendoza

Página 23

Programación Web

Unidad I.

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

L.I. Esteban Sánchez Mendoza

Página 24

Unidad II. Desarrollo de Aplicaciones Web

Objetivo:

Comprenderá los conceptos y elementos básicos que involucra el desarrollo de aplicaciones Web

Programación Web

Unidad II

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 acceden utilizando un navegador web como I. Explorer, Firefox entre otros, dirigiéndose a una dirección de Internet 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 ser consultados, procesados y analizados mediante navegadores. Una de las principales características va a ser su alto grado de interacción con el usuario, y el diseño de su interfaz debe ser claro, simple y debe estar estructurado de tal manera que 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”.

L.I. Esteban Sánchez Mendoza

Página 25

Programación Web

Unidad II

 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. El segundo nivel está referido habitualmente a algún tipo de programa o script. Finalmente, el tercer nivel proporciona al segundo los datos necesarios para su ejecución.

 Arquitectura MVC: La arquitectura Modelo-View-Controller surgió como patrón arquitectónico para el desarrollo de interfaces gráficos de usuario en entornos Smalltalk. Su concepto se basaba en separar el modelo de datos de la aplicación de su representación de cara al usuario y de la interacción de éste con la aplicación, mediante la división de la aplicación en tres partes fundamentales:  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 la representación interna de los datos, así como en su visualización.

L.I. Esteban Sánchez Mendoza

Página 26

Programación Web

Unidad II

Esta arquitectura ha demostrado ser muy apropiada para las aplicaciones web y especialmente adaptarse bien a las tecnologías proporcionadas por la plataforma J2EE, de manera que:  El modelo, conteniendo lógica de negocio, sería modelado por un conjunto de clases Java, existiendo dos claras alternativas de implementación, utilizando objetos java tradicionales 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 web a 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 interfaz sencillo y adecuado a clases Java y objetos proporcionados por el servidor de aplicaciones. Esto permite que sean sencillas de desarrollar por personas con conocimientos de HTML. Entre estos tags tiene mención la librería estándar JSTL (JavaServer Pages Standard Tag Library) que proporciona una gran funcionalidad y versatilidad. El funcionamiento de una aplicación web J2EE que utilice el patrón arquitectural MVC se puede descomponer en una serie de pasos:  El usuario realiza una acción en su navegador, que llega al servidor mediante una petición HTTP y es recibida por un servlet (controlador). Esa petición es interpretada y se transforma en 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 que encapsulará y ocultará la complejidad del modelo al controlador. El resultado de esa petición será devuelto al controlador.  El controlador recibe del modelo el resultado, y en función de éste, selecciona la vista que será mostrada al usuario, y le proporcionará los datos recibidos del modelo y otros datos necesarios para su transformación a HTML. Una vez hecho esto el control pasa a la vista para la realización de esa transformación. L.I. Esteban Sánchez Mendoza

Página 27

Programación Web

Unidad II

En la vista se realiza la transformación tras recibir los datos del controlador, elaborando la 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 reusabilidad del modelo, de modo que la misma implementación de la lógica de negocio que maneja una aplicació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 sin conocimientos de programación los que se encarguen de la realización de la capa vista, sin necesidad de mezclar código Java entre el código visual que desarrollen (tan sólo utilizando algunos tags, no muy diferentes de los usados en el código HTML).

Figura 2.3 MVC o Modelo-Vista-Controlador.

L.I. Esteban Sánchez Mendoza

Página 28

Programación Web

Unidad II

2.2 Lenguajes de programación del lado del cliente Los 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 permite que la página pueda ser albergada en cualquier sitio. Los programas se ejecutan dentro del ámbito del 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ágina web. Su compatibilidad con la mayoría de los navegadores modernos, lo posiciona como el lenguaje de programación del lado del cliente más utilizado. Con JavaScript podemos crear efectos especiales en las páginas y definir interacción con el usuario. El navegador (browser) del cliente es el encargado de interpretar las instrucciones JavaScript y ejecutarlas para realizar estos efectos e interactividades, de modo que el mayor recurso, y tal vez el único, con que cuenta este lenguaje es el propio navegador.  Visual Basic Script Es un lenguaje de programación de scripts del lado del cliente, sólo compatible con Internet Explorer. Es por ello se usa poco. Está basado en Visual Basic de Microsoft. Tanto su sintaxis y modo de operación es una versión reducida del primero. El modo de funcionamiento de Visual Basic Script para construir efectos especiales en páginas web es muy similar al utilizado en JavaScript y los recursos a los que se puede acceder también son los mismos: el navegador.

L.I. Esteban Sánchez Mendoza

Página 29

Programación Web

Unidad II

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

 Flash Es un programa multimedia de Adobe que se utiliza para crear presentaciones animadas. Se trata de una aplicación “del lado del cliente” que es leída por los principales navegadores. 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ás utilizados 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, ejecutados e 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" por el navegador y no necesitan un pre-tratamiento.

L.I. Esteban Sánchez Mendoza

Página 30

Programación Web

Unidad II

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 el procesamiento 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 de contenido dinámico para las páginas.

L.I. Esteban Sánchez Mendoza

Página 31

Programación Web

Unidad II

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 de servidor. Actualmente se encuentra un poco desfasado por diversas razones entre las que destaca la dificultad con la que se desarrollan los programas y la pesada carga que supone para el servidor que los ejecuta. Los CGI se escriben habitualmente en el lenguaje Perl, sin embargo, otros lenguajes como C, C++ o Visual Basic pueden ser también empleados para construirlos.

L.I. Esteban Sánchez Mendoza

Página 32

Programación Web

Unidad II

 PERL Perl es un lenguaje de programación interpretado, al igual que muchos otros lenguajes de Internet como JavaScript o ASP. Esto quiere decir que el código de los scripts en Perl no se compila sino que cada vez que se quiere ejecutar se lee el código y se pone en marcha interpretando lo que hay escrito. Además es extensible a partir de otros lenguajes, ya que desde Perl podremos hacer llamadas a subprogramas escritos en otros lenguajes. También desde otros lenguajes podremos ejecutar código Perl.  ASP ASP (Active Server Pages) es la tecnología desarrollada por Microsoft para la creación de páginas dinámicas del servidor. ASP se escribe en la misma página web, utilizando el lenguaje Visual Basic Script o Jscript (JavaScript de Microsoft).  PHP PHP es el acrónimo de Hipertext Preprocesor. Es un lenguaje de programación del lado del servidor gratuito e independiente de plataforma, rápido, con una gran librería de funciones y mucha documentación.  JSP JSP es un acrónimo de Java Server Pages, que en castellano 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 ejecuten en variados servidores 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.

L.I. Esteban Sánchez Mendoza

Página 33

Programación Web

Unidad II

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 para varios. Consiste en un editor de código, un compilador, un depurador y un constructor de interfaz gráfica. Su meta es proveer un marco de trabajo amigable para los programadores de algún lenguaje de programación. Los IDE (ambientes integrados de desarrollo) para aplicaciones Web son muy numerosos. Considerar los que permitan trabajar con los diferentes lenguajes para Web. Algunos son específicos para lenguajes del lado del servidor. Por ejemplo, Visual Studio solo 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). L.I. Esteban Sánchez Mendoza

Página 34

Programación Web

Unidad II

 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 de aplicaciones web, utilizada en la ingeniería web, prestando especial atención en sistematización y personalizació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 Relationship Methodology), definida por un proceso iterativo que se concentra en el modelado orientado a objetos por la representación de relaciones entre ellos (acoplamientos) como objetos, es por ello que fue una de las primeras propuestas para Web centrada en el paradigma de la orientación a objetos.

L.I. Esteban Sánchez Mendoza

Página 35

Programación Web

Unidad II

Esta metodología tiene las siguientes ventajas: Encajamiento de relaciones semánticas en construcciones extensibles, pudiendo participar en otras relaciones y ser parte de bibliotecas reutilizables. EORM distingue dos tipos de relaciones 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 segundos confí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 manera resumida:



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 el almacenamiento 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 objeto Hipermedia vínculo de funcionalidad.



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



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



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



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

L.I. Esteban Sánchez Mendoza

Página 36

Programación Web

Unidad II

EORM consta de tres fases: Fase de Análisis: Se trata de orientar a objetos al sistema, sin considerar los aspectos hipermediales del mismo, obteniéndose para ello un Modelo de Objetos con la misma notación utilizada en OMT, que refleje la estructura de la información (mediante clases de objetos con atributos y relaciones entre las clases) y el comportamiento del sistema (a través de los métodos asociados a las clases de objetos). Fase de Diseño: Procede a modificar el modelo de objetos obtenido durante el análisis añadiendo la semántica apropiada a las relaciones entre clases de objetos para convertirlas en enlaces hipermedia, obteniendo finalmente un modelo enriquecido (EORM), en el que se refleje tanto 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 cual existirá una librería de clases de enlaces, donde se especifican las posibles operaciones asociadas a cada enlace de un hiperdocumento, que serán de tipo crear, eliminar, atravesar, siguiente, previo etc., así como sus posibles atributos (fecha de creación del enlace, estilo de presentación en pantalla, restricciones de acceso, etc.). Fase de Construcción: Se transforman los esquemas en código y son guardados en una Base de Datos Orientada a Objetos, al elaborar formularios de consulta de las clases con la ayuda 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 (ObjectOriented 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 se realizan en una mezcla de estilo incremental, iterativo y basado en prototipos de desarrollo.

L.I. Esteban Sánchez Mendoza

Página 37

Programación Web

Unidad II

Consta de cuatro fases: Fase Conceptual: durante 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 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.

L.I. Esteban Sánchez Mendoza

Página 38

Programación Web

Unidad II

Fase Navegacional: se debe tener en mente que la 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 distinto 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 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 observar y presentar sus atributos (incluidos las anclas), así como métodos (comportamiento) cuando se navega en un particular contexto. Fase de Interfaz Abstracta: Las estructuras navegacionales son definidas y se deben especificar los aspectos de interfaz. Esto significa definir la forma en la cual los objetos navegacionales pueden aparecer, de 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.

L.I. Esteban Sánchez Mendoza

Página 39

Programación Web

Unidad II

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. Fase Implementación: Se tendrá en cuenta que el diseñador debe ya implementar el diseño. Hasta ahora, todos los modelos fueron construidos en forma independiente de la plataforma de implementación; en esta fase es tenido 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. Construir la interfaz de una aplicación Web es 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 interactuarán con el resto de la aplicación.

OOHDM propone un conjunto de tareas que en principio pueden involucrar mayores costos de diseño, pero que a mediano y largo plazo reducen notablemente los tiempos de desarrollo al tener como objetivo principal la reusabilidad de diseño, y así simplificar la evolución y el mantenimiento. SOHDM Es un Método que Desarrolla Diseño en panoramas (scenario) Orientada a Objetos en Hipermedia (Scenario - based Object-oriented Hypermedia Design Methodology). Presenta la necesidad de disponer de un proceso que permita capturar las necesidades del sistema. Para ello, propone el uso de escenarios.

L.I. Esteban Sánchez Mendoza

Página 40

Programación Web

Unidad II

Consta de seis fases: Fase de Análisis: Se realiza un estudio de las necesidades de la aplicación, del entorno de trabajo y de los actores. La finalidad principal de esta fase es conseguir los escenarios que 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 la estructura 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 enlaces e hiperenlaces que existen en el sistema. Fase de Diseño de la Implementación: Se diseñan las páginas, la interfaz y la base de datos del sistema. Fase de Construcción: Se realiza la construcción de la base de datos del sistema. La cual que se implementará a la aplicación. En conclusión la metodología SOHDM es una propuesta nueva que cubre en mayor parte todas las fases del proceso de desarrollo, aunque no toma en cuenta la implantación y las pruebas, proponiéndonos un proceso cíclico de tal forma que al realizar una fase se puede regresar a 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 un acercamiento al usuario que define los objetos de información basado en sus requisitos de información para el uso de la Web. En este método se definen una aplicación Web a partir de los diferentes grupos de usuarios que vaya a reconocer el sistema.

L.I. Esteban Sánchez Mendoza

Página 41

Programación Web

Unidad II

Consta de cuatro fases: Fase de Modelo de Usuario: Se intenta detectar los perfiles de usuarios para los cuales se construye la aplicación. Durante esta fase es necesario determinar: ¿Quién es el público objetivo? ¿Cómo será la visión de su sitio Web? ¿Cuáles son los objetivos de marketing de la empresa? ¿Cuáles son los objetivos de su sitio web? ¿Qué mensaje tiene su compañía quiere transmitir? ¿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, que hará recomendaciones a la mejor alcanzar sus metas. Nuestro proceso de planificación estratégica se 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 donde se vaya a implantar el sistema y los procesos que se vayan a generar, describiendo las relaciones entre usuarios y actividades que realizan estos usuarios.



Descripción de los grupos de usuarios: Se describen con más detalles los grupos de usuarios detectados en la etapa anterior. Para ello, se debe elaborar un diccionario de datos, en principio con formato libre, en el que indican los requisitos de almacenamiento de información, requisitos funcionales y de seguridad para cada grupo de usuarios. Fase de Diseño Conceptual: Se desarrolla el modelado conceptual no tiene el

mismo 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 la navegación, que coincide con la idea de su diseño navegacional, Este tipo de diseño de navegación en aplicaciones Web tiene una estructura muy jerárquica.

L.I. Esteban Sánchez Mendoza

Página 42

Programación Web

Unidad II

Pocas recomendaciones se dan en esta etapa, tales como la utilización de páginas de índice, derecho de información dividida en diversos tamaños, el uso de contexto y de la información y el uso de señales de navegación. Este modelo distingue tres tipos de componentes de navegación, información y externos. Cada una consta de tres capas: contexto, navegación y capas de información. En WSDM puede existir más de un modelo de navegación, dependiendo de los roles de 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 sitio web. RNA Es un método de Análisis de Navegación Relacional (Relationship Navigational Analysis), que define una secuencia de pasos que se utilizarán para el desarrollo de la Web. Es especialmente ú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 de trabajar con la especificación de requisitos, incluyendo tareas como el análisis del entorno y de los elementos de interés. Además, resulta interesante pues plantea la necesidad de analizar los requisitos 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 cual se han listando dichos elementos de la aplicación. Por elementos de interés se entienden los documentos, las pantallas que se van a requerir, la información, etc. Fase de Análisis del Conocimiento: Se desarrolla un esquema que represente a la aplicación. Para ello RNA propone identificar los objetos, los procesos y las operaciones que se van a 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 fase anterior sea enriquecido con las posibilidades de navegación dentro de la aplicación.

L.I. Esteban Sánchez Mendoza

Página 43

Programación Web

Unidad II

Fase de Implementación del Análisis: Una vez obtenido el esquema final en el que ya se encuentran incluidos los aspectos de navegación, se pasa el esquema a un lenguaje entendible por 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 y vulnerabilidades. 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 sean modificados sin autorización (integridad) y que la información sólo sea distribuida a las personas autorizadas (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 o destruida por terceros. También es importante asegurar que el enlace entre cliente y servidor no pueda interrumpirse fácilmente (disponibilidad).

L.I. Esteban Sánchez Mendoza

Página 44

Programación Web

Unidad II

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 bibliotecas).

dos capas anteriores (módulos,

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 un problema 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.

L.I. Esteban Sánchez Mendoza

Página 45

Unidad III. Programación del lado del Servidor

Objetivo:

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

Programación Web

Unidad III

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 son llamados 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 de datos que contiene los nombres de usuario y contraseñas para tu sitio web, y el programa que ofrece la 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 Internet podremos acceder a toda la potencia de PHP, pues éste arroja el resultado al cliente sin necesidad de 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 comercial sin 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 de ASP para los mismos procesos. • Genera páginas dinámicas. Esto significa que cada página solicitada al servidor es procesada en el momento como un requerimiento individual, y actualizado al milisiegundo. Inutil para páginas estáticas, genial para páginas en donde los datos se actualizan constantemente (que tengan acceso a base de datos o ejecuten procesos de cálculo). • Simplicidad de programación. Un lenguaje de script realmente cómodo de usar por su sencillez y claridad. Cuando nosotros seleccionamos un enlace hipertexto, en realidad lo que pasa es que establecemos una petición de un archivo HTML residente en el servidor (una computadora que se encuentra continuamente conectado a la red) el cual es enviado e interpretado por nuestro navegador (el cliente).

L.I. Esteban Sánchez Mendoza

Página 47

Programación Web

Unidad III

Así pues, podemos hablar de lenguajes de lado servidor que son aquellos lenguajes que son reconocidos, ejecutados e interpretados por el propio servidor y que se envían al cliente en un 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 el HTML 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 un pretratamiento.

L.I. Esteban Sánchez Mendoza

Página 48

Programación Web

Unidad III

Lenguajes del lado del servidor Lenguajes del lado servidor CGI Es el sistema más antiguo que existe para la programación de las páginas dinámicas de servidor. Actualmente se encuentra un poco desfasado por diversas razones entre las que destaca la dificultad con la que se desarrollan los programas y la pesada carga que supone para el servidor que los ejecuta. Los CGI se escriben habitualmente en el lenguaje Perl, sin embargo, otros lenguajes como C, C++ o Visual Basic pueden ser también empleados para construirlos. PERL Perl es un lenguaje de programación interpretado, al igual que muchos otros lenguajes de Internet como Javascript o ASP. Esto quiere decir que el código de los scripts en Perl no se compila sino que cada vez que se quiere ejecutar se lee el código y se pone en marcha interpretando lo que hay escrito. Además es extensible a partir de otros lenguajes, ya que desde Perl podremos hacer llamadas a subprogramas escritos en otros lenguajes. También desde otros lenguajes podremos ejecutar código Perl.

L.I. Esteban Sánchez Mendoza

Página 49

Programación Web

Unidad III

ASP

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

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

JSP es un acrónimo de Java Server Pages, que en castellano 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 ejecuten en variados servidores 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.

L.I. Esteban Sánchez Mendoza

Página 50

Programación Web

Unidad III

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 sentido estricto, se emplea para referirse a utensilios resistentes, útiles para realizar trabajos mecánicos que requieren la aplicación de una cierta fuerza física. Cada herramienta tiene un fin específico y debería ser usado solo con un fin determinado, Sin embargo esto no se cumple en la mayoría de las tareas del quehacer humano y mucho menos en las aplicaciones web. Cuando pensemos en las mejores herramientas para el desarrollo 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 sitios en Internet y es el lugar donde físicamente reside nuestra información. Si tenemos recursos ilimitados para tener nuestro propio sitio entonces tendriamos que hacer una gran investigación para seleccionar las herramientas más sofisticadas. Sin embargo para la mayoría de las aplicaciones debemos pagar porque nuestra información sea colocada en cierto servidor. El lugar donde físicamente se almacenara nuestra información determina los lenguajes soportados (cliente, servidor), el gestor de la base de datos y las prestaciones que podremos ofrecer a nuestros futuros usuarios. Sin el afan de romperse las camisas discutiendo este punto, las herramientas que usaremos 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 somos expertos en un X lenguaje y el sistema Operativo de nuestro host no lo soporta, podremos tener las herramientas más sofisticadas pero no servirán de nada.

L.I. Esteban Sánchez Mendoza

Página 51

Programación Web

Unidad III

Las fases de un desarrollo web, así como los lenguajes de programación usados, son muy 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 desarrollar fácilmente un proyecto web. En el desarrollo web tenemos unas herramientas para el diseño, otras para la maquetación, otras para la programación, y para la depuración. Todas las herramientas que usemos son muy importantes, desde el sistema operativo hasta el comando más insignificante, y por ello debemos elegir la más adecuada a nuestras necesidades y capacidades.

Sistema Operativo

Para desarrollar una web, lo primero que necesitamos es un Sistema Operativo, como es lógico, y su elección no es tan trivial. Hay que tener en cuenta las aplicaciones de las que dispone el Sistema Operativo y sus costos. Si pensamos desarrollar en .NET este solo es soportado por windows y los costos de hospedaje son mas caros que los que soportan Linux.

L.I. Esteban Sánchez Mendoza

Página 52

Programación Web

Unidad III

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



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



Maquetación HTML/CSS: consiste en convertir los esbozos creados en la fase anterior 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 muchas librerias de distribución libre como JQUERY que nos aportan verdaderas joyas para 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 las pruebas 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 hosting para comprobar que el cambio de servidor no ha afectado a nada. Para evitar problemas, nuestro servidor local debe tener exactamente la misma configuración que el servidor del hosting. Recuerde probar que sus códigos sean compatibles al menos con Firefox, Safari e Internet explorer

L.I. Esteban Sánchez Mendoza

Página 53

Programación Web

Unidad III

En general podemos usar comercialmente la suite de Adobe que incluye a Dreamwever y 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 la versión de Escritorio DVD (Leo) 4.9.1 con la inclusión de los programas necesarios para trabajar con el gestor de contenidos Joomla!. En esta edición se incluye instalado el gestor de contenidos Joomla, junto con los programas necesarios para su funcionamiento totalmente instalados y configurados. Es posible aprender 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 de datos MySql, phpmyadmin, apache.... etc. Todo está ya instalado y configurado, plenamente funcional 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 el flujo del programa, etc. Los operadores son símbolos que representan operaciones sobre un valor. Vamos a ver 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:

L.I. Esteban Sánchez Mendoza

Página 54

Programación Web

Unidad III

El operador .= asigna valores al contenido de una variable, es equivalente a $var = $var + 'nuevo valor';

Operador de concatenación Usando el símbolo. concatenamos cadenas

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

Resultado

Negación

-$var1

-10

Suma

$var1 + $var2

15

Resta

$var1 - $var2

5

Multiplicación

$var1 * $var2

50

División

$var1 / $var2

2

Módulo

$var1 % $var2

0

Ejemplo

L.I. Esteban Sánchez Mendoza

Página 55

Programación Web

Unidad III

Operadores abreviados o combinados Una forma habitual de modificar el contenido de las variables es mediante los operadores 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

L.I. Esteban Sánchez Mendoza

Página 56

Programación Web

Unidad III

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

Efecto

Pre-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

L.I. Esteban Sánchez Mendoza

Página 57

Programación Web Nota:

Unidad III 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 dos valores. Igualdad Identidad

Operador

Desigualdad Menor que Menor o igual que Mayor que Mayor o igual que Ejemplo

Ejemplo $a == $b $a === $b $a != $b $a !== $b $a < $b $a $b $a >= $b

Cierto si:

$a es igual a $b. $a es igual a $b y además son del mismo tipo $a no es igual a $b. Los operandos no son iguales o del mismo tipo $a es estrictamente menor que $b. $a es menor o igual que $b. $a es estrictamente mayor que $b. $a es mayor o igual que $b.

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.

L.I. Esteban Sánchez Mendoza

Página 58

Programación Web

Unidad III

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 evaluarlas en una sola expresión. La sintaxis de estos operadores es la siguiente: Operador

&& and || or xor ! Ejemplo

Ejemplo $a && $b $a and $b $a || $b $a or $b $a xor $b !$a

Cierto si: Ambos son ciertos Si uno o ambos es cierto Solo si uno de los dos es cierto. Si $a es Falsa

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 del shell; y su salida devuelta como el valor de esta expresión (i.e., no tiene por qué ser simplemente volcada como salida; puede asignarse a una variable).

L.I. Esteban Sánchez Mendoza

Página 59

Programación Web

Unidad III

Ejemplo:

L.I. Esteban Sánchez Mendoza

Página 60

Programación Web

Unidad III

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 la evalúa de izquierda a derecha, pero cuando creamos expresiones que utilizan más de un operador diferente, no siempre evalúa estas expresiones de la misma forma. La precedencia de operadores específica cómo se agrupan las expresiones para ser evaluadas. La precedencia relativa de los operadores se puede modificar mediante paréntesis en las expresiones que se desea evaluar a criterio del programador. A continuación se presenta en la tabla la precedencia de los operadores de menor a mayor. Asociatividad

Operadores

izquierda

,

izquierda

or

izquierda

xor

izquierda

and

derecha

print

izquierda

= += -= *= /= .= %= &= |= ^= ~= =

izquierda

?:

izquierda

||

izquierda

&&

izquierda

|

izquierda

^

izquierda

&

no asociativo

== != ===

no asociativo

< >=

izquierda

>

izquierda

+-.

L.I. Esteban Sánchez Mendoza

Página 61

Programación Web

Unidad III

Asociatividad

Operadores

izquierda

*/%

derecha

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

derecha

[

no asociativo

new

3.4 Sentencias Las 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 otro bloque de instrucciones si ésta es falsa. Es importante tener en cuenta que la condición que evaluemos ha de estar encerrada entre paréntesis (esto es aplicable a todas las sentencias de control).

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