M.C.

JORGE OCTAVIO GUZMAN

OBJETIVO: EL ESTUDIANTE SER CAPAZ DE DESARROLLAR APLICACIONES Y SISTEMAS UTILIZANDO LAS TECNOLOGAS ORIENTADAS AL ENTORNO WEB.

Criterios de acreditacin TRABAJOS DE INVESTIGACION POR EQUIPO 20%

TRABAJOS DE INVESTIGACION INDIVIDUAL 20% EXAMENES PARCIALES 30% PROYECTO FINAL 30% LA ESCALA DE CALIFICACIN SER DEL 6 AL 10 LA CALIFICACIN MNIMA APROBATORIA ES 7
Primer parcial: 2 sesin (introduccin y conceptos) Segundo parcial: 5 sesin (programacin web esttica y dinmica) Investigacin grupal: 4ta sesin se entregara la URL Investigacin individual: la 5ta sesin, en archivo de Word Proyecto Final: Fecha por definir
2 Los trabajos (reportes, investigaciones, etc.) tendrn una fecha in prorrogable

Fuentes de consulta
Si un trabajo no tiene fuentes de consulta, no cuenta Las fuentes de consulta deben estar citadas en el contenido del trabajo En el trabajo debe existir una apartado de conclusiones, redactado por el estudiante. A lo sumo 80% es digital. A lo menos 10% es en otro idioma. La investigacin debe ser plural (tomar varios puntos de vista) Sitios como: Wikipedia, rincn del vago, monografas, www.scribd.com, www.slideshare.net, etc. No se consideran como fuentes de consulta valida, pueden ser visitados pero no se tomaran en cuenta.
3

INVESTIGACIN POR EQUIPO

Se cuenta con un servidor de aplicaciones local (wamp, xamp, lamp, etc) pero es necesario publicar en Internet el resultado, por lo que se debe de informar al cliente de distintas opciones (al menos una gratuita), Cules son opciones con las que se cuenta para presentar un sistema en el WEB?

No se entregar reporte de esta investigacin propiamente dado que el producto de sta se anexar al proyecto final, pero para la 4ta sesin se entregara la URL donde se podr ver el resultado de la investigacin, Un sitio web por equipo que permita el uso de bases de datos (proyecto final de la materia BASES DE DATOS). 4

INVESTIGACIN INDIVIDUAL

WEB SEVICES:
Qu son? Para qu son? Qu protocolos se emplean para su implementacin? Qu consideraciones de seguridad se debe tener con ellos?

Se entregar el reporte en la 5ta sesin, en archivo de Word respetando el siguiente formato.

FORMATO DEL REPORTE

Debe existir una hoja de presentacin (que no se numera) Debe existir un ndice de contenido (con extensin mnima de dos hojas), este debe ser elaborado automticamente por el procesador de textos (estas hojas se numeran en romanos) De ser necesario se cuenta con un ndice de figuras. El contenido del trabajo (numerado en arbigos y a partir de 1) cuando menos debe ser:
Introduccin Desarrollo Conclusin
Herramienta importante el salto de pgina y 6 manejo de secciones

Proyecto Final.
Dependiendo de su proyecto de titulacin o una problemtica con la que se encuentren, se debe desarrollar un sitio web, usando las tecnologas tratadas en el curso

Este trabajo ser desarrollado individualmente

Unidad 1.- Introduccin a las tecnologas WEB

1.1 Perspectiva histrica del Internet. 1.2 Protocolo http (protocolo de transferencia de hipertexto).
1.2.1 Arquitectura del WWW. 1.2.2 URLs. 1.2.3 Mtodos http. Persistencia en http Cookies.

1.3 Introduccin al HTML Lenguaje de despliegue del web

1.3.1 HTML como un tipo SGML. 1.3.2 Elementos del lenguaje HTML. 1.3.3 Tablas en HTML. 1.3.4 Formularios.

1.4 Evolucin del desarrollo de aplicaciones Web. 1.5 Hojas de estilo en cascada e introduccin al XML.
8

Unidad 2.- Desarrollo de aplicaciones Web

2.1 Arquitectura de las aplicaciones Web. 2.2 Lenguajes de programacin del lado del cliente. 2.3 Lenguajes de programacin del lado del servidor. 2.4 Ambientes para el desarrollo de aplicaciones Web. 2.5 Metodologas para el desarrollo de aplicaciones Web. 2.6 Aspectos de seguridad.
9

Unidad 4.- Procesamiento del lado del cliente.

4.1 Lenguaje Script del cliente. 4.2 Modelo de objetos con lenguaje Script. 4.3 Objetos lenguaje Script nter construidos. 4.4 Eventos con lenguaje Script. 4.5 Validacin de entrada de datos del lado del cliente. 4.6 Consideraciones del soporte del navegador.
10

Unidad 3.- Programacin del lado del servidor.

3.1 Procesamiento del lado del servidor. 3.2 Conceptos bsicos de la herramienta de desarrollo. 3.3 Operadores. 3.4 Sentencias. 3.5 Arreglos. 3.6 Funciones y libreras. 3.7 Ejemplos prcticos. 3.8 Procesado de formularios. 3.9 Sesiones. 3.10 Conectividad entre el servidor Web y el servidor de base de datos. 3.11 Manejo de archivos. 3.12 Seguridad.
11

Unidad 5.- Servicios Web.

5.1 Visin general de servicios Web XML. 5.2 Tecnologas subyacentes.
5.2.1 SOAP 5.2.2 WSDL 5.2.3 UDDI

5.3 Publicacin de un servicio WEB. 5.4 Consumo de un servicio WEB.

12

Unidad 1.- Introduccin a las tecnologas WEB

1.1 Perspectiva histrica del Internet. 1.2 Protocolo http (protocolo de transferencia de hipertexto).
1.2.1 Arquitectura del WWW. 1.2.2 URLs. 1.2.3 Mtodos http. Persistencia en http Cookies.

1.3 Introduccin al HTML Lenguaje de despliegue del web

1.3.1 HTML como un tipo SGML. 1.3.2 Elementos del lenguaje HTML. 1.3.3 Tablas en HTML. 1.3.4 Formularios.

1.4 Evolucin del desarrollo de aplicaciones Web. 1.5 Hojas de estilo en cascada e introduccin al XML.
13

Perspectiva histrica del Internet

INTERNET es RED DE REDES (WAN) 1962 En julio Leonard Kleinrock public el primer documento sobre teora de conmutacin de paquetes. 1965 Roberts conect una computadora TX2 en Massachusetts con un Q-32 en California 1969 se crea el primer enlace entre las universidades de UCLA y Stanford por medio de la lnea telefnica conmutada.
14

Perspectiva histrica del Internet

1971 Ray Tomlinson crea el correo electrnico 1972 Se realiz la Primera demostracin pblica de ARPANET 1974 Viton Cerf crea el TCP 1979 se crea USENET y nacen las NEW (grupos de discusin) 1984 SE CREO EL SISTEMA DSN (permite dar nombres alfanumricos a las PC)
15

Perspectiva histrica del Internet

1986 La Fundacin Nacional para la Ciencia cre la Red Nacional NSFNET que sustituye a ARPANET. 1989 Integracin de OSI. Tim Berners-Lee y otros investigadores, crean el lenguaje HTML en el CERN de Ginebra, Suiza. 1990 Tim Berners-Lee y otros, crean el primer cliente Web, la WWW y el primer servidor 1992 aparece la multimedia. 1993 se creo el navegador Web Mosaic.
16

Perspectiva histrica del Internet

1994 Se crea yahoo, amazon 1995 SUN presenta JAVA 1998 google 2001 wikipedia 2004 Web 2.0

17

WEB 1.0 vs WEB 2.0

Aspecto Los que publican Como es en Web 1.0 Como es en Web 2.0 Dueos de sitios Web Dueos de sitios Web y los usuarios Distribuido en varios Sitios Caulquiera publica Los usuarios HTML 5, XHTML, CSS Beta Los sitios ofrecen APIS
18

Centralizados en Donde estan los recursos el servidor WEB Publicidad Solo para grandes coorporaciones

Dueos de la informacion El sitio Web Tecnologia Dispoinbilidad Servicios de otros sitios HTML 4.0 Liberatods ---

Protocolo HTTP
Hyper Text Transfer Protocol = creado por Tim Berners-Lee Versiones: 0.9, HTTP/1.0, HTTP/1.1, HTTP/1.2 (no es html) norma el intercambio de inforamcion entre cliente y servidor web (el cliente pide recursos al servidor)

Proceso servidor escucha en el puerto TCP 80, esperando solicidutes de conexion de los clientes,
19

Protocolo http

20

http:// username:password@www.tec.edu :80 /ruta/al/recurso/ index.html ?x1=v1&x2=v2

Datos de usuario Query string

Uniform Resource Locator

Puerto, opcional Ruta (path)

Nombre del protocolo de comunicacin con el servidor (http es el estndar para web) https, ftp, rstp

Recurso que buscamos

Dominios genricos y territoriales

servidor donde se almacena el recurso, puede ser IP o puede ser un nombre de dominio (dominio.dominiodepriemernvel)
El Network Information Center - Mexico (NICMexico) es la 21 organizacion de administracion del conty code Top Level Domain .mx segun el ISO 3166

URL absoluta / relativa

Encontrndonos en la pagina para referenciar al logo se puede hacer: ../../imagenes/logo.jpg file:///C:/Descartes/imagenes/logo.jpg O si la carpeta Descartes es el raiz del servidor http://servidor/imagenes/logo.jpg
22

Multipourpose Internet Mail Extension TYPE

grupo/tipo text/html text/script video/mpeg

Identifican el flujo de bytes que se transmiten y por lo tanto se pueden agrupar como un archivo de tipo X

23

Arquitectura del WWW

Fsica (clasificacin de las redes) Lgica (Arquitectura CLIENTE/SERVIDOR)

24

 Clientes Web:

WWW es un sistema Cliente/Servidor

Utilizan el protocolo HTTP para conectar con los servidores. Solicitan y muestran las pginas web almacenadas en los servidores. Clientes tpicos: navegadores web (Explorer, Firefox).

Servidores Web:
"Escuchan" conexiones entrantes desde clientes. Utilizan el protocolo HTTP para conversar con los clientes. Almacenan y transmiten pginas web a los clientes. Actualmente interactan con el usuario y generan dinmicamente pginas web
25

Mtodos HTTP
1. 2. 3. 4. GET Pide un recurso especificado HEAD Pide un recurso especificado , tiene una respuesta idntica a la que correspondera a una peticin GET, pero sin el cuerpo de la respuesta. Esto es til para la recuperacin de meta-informacin escrita en los encabezados de respuesta, sin tener que transportar todo el contenido. POST Somete los datos a que sean procesados para el recurso identificado. Los datos se incluirn en el cuerpo de la peticin. Esto puede resultar en la creacin de un nuevo recurso o de las actualizaciones de los recursos existentes o ambas cosas. PUT Sube, carga o realiza un upload de un recurso especificado, usa un mensaje multiparte y el mensaje es decodificado por el servidor. En contraste, el mtodo PUT te permite escribir un archivo en una conexin socket establecida con el servidor. DELETE Borra el recurso especificado. TRACE Este mtodo solicita al servidor que enve de vuelta en un mensaje de respuesta, en la seccin del cuerpo de entidad, toda la data que reciba del mensaje de solicitud. Se utiliza con fines de comprobacin y diagnstico. OPTIONS Devuelve los mtodos HTTP que el servidor soporta para un URL especfico. CONNECT Se utiliza para saber si se tiene acceso a un host.

5. 6. 7. 8.

26

Persistencia en cookies
Dado que HTTP es un protocolo que pide conectar y desconectar con cada peticin entonces no es posible tener variables con un mbito mayor al de una sesin (clsicamente una pagina web), por esto se ha buscado una solucin que ofrezca persistencia, la primera fue inventada por NETSCAPE, las cookies.

27

Introduccin a HTML
HiperText Markup Language Hipertext

Hiperlink
HTML is subset of Standard Generalized Markup Language Lenguaje de Marcacin Generalizado= Sistema para la organizacin y etiqutado de documentos
28

HTML
Lenguaje de descripcin de documentos HTML HTML 4.0 + XML 1.0 = XHTML HTML 5 {se ocupa de describir el documento y no del formato}

29

Elementos HTML
<etiqueta>contendio</etiqueta> atributo=valor El valor slo puede contener (a-z , A-Z) (0..9) (- . : _) Case Insensitive

30

HTML -> XHTML

Todos los elementos y atributos en minscula
Esta es una regla comn a todos los sublenguajes xml

Todo valor debe estar delimitado ( o ) Siempre en parejas atributo/valor.

<input type="checkbox" name="test" value="si" checked/> <input type="checkbox" name="test" value="si" checked="checked">

Toda etiqueta abierta se cierra. <br /> <hr /> <img src="" alt="" /> <input type="" value="" />

compact="compact" declare="declare" readonly="readonly" disabled="disabled" selected="selected" defer="defer" ismap="ismap" nohref="nohref" noshade="noshade" nowrap="nowrap" multiple="multiple" noresize="noresize"

31

JavaScript dentro de una etiqueta CDATA. Los javascripts que van dentro del cuerpo de la pgina (no en el header) deben estar dentro de una etiqueta CDATA. En HTML podemos tener:

<script language="JavaScript" type="text/javascript"> <!-document.write("Hello World!"); --> </script>

<script type="text/javascript"> <![CDATA[ document.write("Hello World!"); ]]> </script>

Las anclas son IDs. Las anclas (anchor) que nos permiten navegar dentro una pgina grande, ya no son referenciadas por el tag a sino por el ID del elemento hacia el cual deseamos ir.
<a name=top> <img src=imagen.png> </a>
<a href="#top"> Ir arriba </a>

<img src="imagen.png" id="top" title="Imagen" alt="Imagen" /></a> <a href="#top">Ir arriba</a>

32

CODIGO MINIMO HTML5 HTML

<!DOCTYPE html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w w w .w 3.org/TR/x html1/DTD/x html1-transitional.dtd">

<html> <head> <title>TITULO</title> </head> <body> <header> OTROS ELEMENTOS </header> <nav> OTROS ELEMENTOS </nav>

<HTML> <HEAD> <TITLE> TITULO </TITLE> </HEAD> <BODY> OTROS ELEMENTOS <P> <TABLE> <FORM>

<section> <article> OTROS ELEMENTOS <article> <article> OTROS ELEMENTOS <article> </section> <footer> OTROS ELEMENTOS </footer> </body> </html>

</BODY>

33

Tablas en HTML.
top
Tag <table> <th> <tr> <td> <caption> Description Defines a table Defines a header cell in a table Defines a row in a table Defines a cell in a table Defines a table caption

<colgroup> Specifies a group of one or more columns in a table for formatting <col> Specifies column properties for each column within a <colgroup> element <thead> Groups the header content in a table <tbody> <tfoot> Groups the body content in a table Groups the footer content in a table

<table border='1'> <caption align="bottom">descripcion</caption> <tr> <td> 1.1</td> </tr> </table>

http://www.w3schools.com/html/html_tables.asp

34

Formularios
An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
Tag

Atributos: name, action, method, id The most important form element is the <input> element. An <input> element can vary in many ways, depending on the type attribute text field, checkbox, password, radio button, submit button, and more.

Description

<form> . input elements . </form>

<form> <input> <textarea> <label> <fieldset> <legend> <select> <optgroup> <option> <button>

Defines an HTML form for user input Defines an input control Defines a multiline input control (text area) Defines a label for an <input> element Groups related elements in a form Defines a caption for a <fieldset> element Defines a drop-down list Defines a group of related options in a drop-down list Defines an option in a drop-down list Defines a clickable button

35

http://www.w3schools.com/html/html_forms.asp

FORMULARIOS HTML5

color date datetime datetime-local email month number range search tel time url week
<input type="search" autofocus placeholder="Buscar" name="txtbuscar"> <input type="number" min="10" max="80" step="10" placeholder="##" name="txtnumber"> <input type="range" min="10" max="80" placeholder="range" name="txtrange"> <input type="color" name="txtcolor"> <input type="tel" name="txttel"> <input type="url" name="txturl"> <input type="email" name="txtemail" required="required" alt="Tu email..."/> <input type="month" name="txtmoth"> <input type="date" name="txtdate"> <input type="week" name="txtweek"> <input type="time" name="txttime"> <input type="datetime" name="txtdatetime"> <input type="datetime-local" name="txtdatetime-local">

36

Evolucin del desarrollo WEB

Documentos (hypertexto) Animaciones, (applets) Lenguajes Dinmicos

Documentos e Imgenes

Common Gateway Interface

WEB 2.0

37

Cascading Style Sheets

El HTM es un lenguaje de descripcin de documentos, mientras que el CSS es el lenguaje usado para definir la presentacin de estos. HTML todo lo crea en rectngulos (elementos box), CCS les da el formato (color, posicin, tamao, incluso forma) Existen elementos de bloque (crean un salto de linea y son tan anchos como se pueda [div, h1h6, p, ul, ol, li,] y los elementos inline que no crean un salto de linea y solamente tienen la anchura de lo que contienen [strong, em, a, img, span] HTML es un lenguaje estructurado en el que el orden en que se incluyen sus sentencias es vital, CSS es declarativo, todo se expresa en reglas y tienen sentido hasta que se han dictado todas.
38

Elementos block
1. 2. 3. 4. 5. Forma un bloque y se posiciona a s mismo verticalmente con un nuevo salto de lnea sobre y bajo l. Toma toda la anchura disponible basndose en la anchura de su elemento padre (contenedor). Su altura cambia en relacin a su contenido. Puede contener otros elementos inline y/o block. Se le puede asignar una anchura (width) y una altura (height) fija utilizando css. 1.

Elementos inline
2.
3. 4. Se posiciona a s mismo horizontalmente en lnea con el resto del contenido de su elemento padre (contenedor). Toma la anchura y altura mnima en relacin a su contenido. SOLO puede contener otros elementos inline. NO se puede imponer una anchura y una altura fija a travs de css.

Elementos Block
p dl blockquote fieldset h1-h6 menu address table div dir center form ul pre noframes ol hr isindex

Elementos Inline
a applet i s strong sup abbr br img b strike dfn samp acronym button span map big font code kbd input bdo iframe small basefont q var select object tt u em sub cite textarea

Nuevos Elementos Block en HTML5

article figura section aside footer video audio header canvas hgroup figcaption output

label

39

REGLA = selector DECLARACION | DECLARACION DECLARACION = {propiedad: valor}

SELECTOR DECLARACION REGLA PROPIEDAD VALOR

CSS Rules (styles)

Selector: indica a que elementos se aplicara el formato Declaracin: Entre llaves se encuentra uno o mas pares de afirmaciones de que formato se aplicara al elemento especificado por el selector. Propiedad: caracterstica que se modificara al elemento Valor: cantidad de la caracterstica especificada en propiedad.

40

Tipos de selectores
Selector de tipo simple:= Es el selector que se aplica a un elemnto tiene por nombre el nombre del elemento al que se aplicara. Selector de clase:= identificado por comenzar con . y a continuacin el nombre de la clase, se aplica a todos los elementos que tienen de esa clase. Selector ID:= comienza por # seguido del nombre del identificador del elemento. Selector de pseudoclase:= siempre comienza por un selector, dos puntos y seguido por el nombre de una pseudo clase.
41

/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */ p, a, span, em { text-decoration: underline; } /* El estilo se aplica solo a los elementos "em" que se encuentran dentro de "p a span" */ p a span em { text-decoration: underline; }

Pseudo clases

42

Three Ways to Insert CSS

1.- Inline style

<head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

2.- Internal style sheet

3.- External style sheet

<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
43

4.- Hojas de usuario **Hoja del navegador.

eXtensible Markup Language

XML is designed to transport and store data. XML is subset for SGML XML Tags are Case Sensitive XML Elements Must be Properly Nested XML Documents Must Have a Root Element Comments in XML = <!-- This is a comment --> White-space is Preserved in XML XML Stores New Line as LF
44

Entity References
Some characters have a special meaning in XML.

45

XML Docs
XML with correct syntax is "Well Formed" XML. XML validated against a DTD is "Valid" XML.

46

Unidad 2.- Desarrollo de aplicaciones Web

2.1 Arquitectura de las aplicaciones Web. 2.2 Lenguajes de programacin del lado del cliente. 2.3 Lenguajes de programacin del lado del servidor. 2.4 Ambientes para el desarrollo de aplicaciones Web. 2.5 Metodologas para el desarrollo de aplicaciones Web. 2.6 Aspectos de seguridad.
47

Arquitectura de las aplicaciones Web

La arquitectura de un sitio Web tiene tres componentes principales:
1. Un servidor WEB 2. Una conexin de RED 3. Uno o mas clientes
Se construyen generalmente bajo 2 o 3 capas

48

ARQUITECTURA EN CAPAS

MONOLITICAS 2 CAPAS (CLIENTE/SERVIDOR)

P+L / D P/ L+D P+L / L +D D: datos persistentes L: procesamiento acorde a la lgica de negocios P: presentarlos adecuadamente Es importante notar que los lmites entre las capas son lgicos, por lo que es posible ejecutar las tres capas en la misma mquina.
49

3 CAPAS
P/ L/D

Componentes de una aplicacin web

Lgica de negocio

parte mas importante de la aplicacin define los procesos que involucran a la aplicacin conjunto de operaciones requeridas para proveer el servicio
Manipulacin de BD y archivos Los usuarios acceden a travs de navegadores, dispositivos mviles, PDAs, etc. Funcionalidad accesible a travs del navegador Limitada y dirigida por la aplicacin

Administracin de los datos Interfaz

50

Lenguajes de programacin WEB

Lado del Cliente VBScript (derivado de Visual Basic) JavaScript (derivado de Java) Lado del Servidor CGIs (PERL, C, C++,) ASP , ASP.NET JSP PHP

Los Lenguajes de programacin del lado del servidor son especialmente tiles en trabajos que se tiene que acceder a informacin centralizada. Practical Extraction and Report Language

51

Scripts lado del cliente

52

CGIs

53

Paginas dinmicas

54

Ambientes para el desarrollo de aplicaciones Web

IDEs

Editores de texto
notepad, vi, pico, nano, emacs

Editores WYSIWYG
Ms Expression Web 4, DreamWeaver

IDES
Eclipse, Visual Studio, Zend Studio

55

Metodologas para el desarrollo de aplicaciones

Relationship Management Methodology Object Oriented Hypermedia Design Method UML-based Web Engineering

56

Relationship Management Methodology

proceso de anlisis, diseo y desarrollo de aplicaciones hipermedia. Esta metodologa es apropiada para dominios con clases de objetos bien definidas con claras relaciones entre si. Por ejemplo, catlogos o bases de datos tradicionales. El modelo propone un lenguaje que permite describir los objetos del dominio, sus interrelaciones y los mecanismos de navegacin hipermedia de la aplicacin. Los objetos del dominio se definen con la ayuda de entidades, atributos y relaciones asociativas.
57

Object Oriented Hypermedia Design Method

OOHDM propone el desarrollo de aplicaciones hipermedia a travs de un proceso compuesto por cuatro etapas: diseo conceptual, diseo navegacional, diseo de interfaces abstractas e implementacin.

58

UML-based Web Engineering

Se trata de un mtodo que hace uso de tcnicas procedentes de la orientacin a objetos para especificar aplicaciones hipermedia. UWE plantea un enfoque iterativo y progresivo cuyas actividades fundamentales son el anlisis de requisitos y el diseo conceptual, de la navegacin y de la presentacin. Los elementos hipermedia se representan por medio de elementos propios de los diagramas de clases UML. As por ejemplo, los nodos son clases, los enlaces son asociaciones estereotipadas y las ayudas a la navegacin (como ndices o mapas) son clases estereotipadas. Para modelar aspectos dinmicos se hace uso de modelos de tarea y diagramas de estado, mientras la navegacin y la presentacin se representan por medio de UML y de estereotipos creados al efecto.
59

Proceso de UWE:

(Rquirements Model)Anlisis de Requisitos: Fija los requisitos funcionales de la aplicacin Web para reflejarlos en un modelo de casos de uso. Esto da lugar a los diagramas de casos de uso. (Content Model)Diseo Conceptual: Se construye el modelo conceptual del dominio de la aplicacin considerando los requisitos reflejados en los casos de uso. El resultado es el diagrama de clases. (Navigation Model)Diseo Navegacional: Se obtienen el modelo de espacio de navegacin y el de estructura de navegacin, que muestra como navegar a travs del espacio de navegacin. El resultado son diagramas de clases que representan estos modelos. (Porccess Model) Diseo de Presentacin: Representa las vistas del interfaz del usuario mediante modelos estndares de interaccin (diagramas de secuencia diagramas de estados ) UML.
60

Aspectos de seguridad.
Por la poca seguridad informtica en Internet, el colocar una Web trae riesgos que pueden ser controlados con alguna estrategia que permita asegurar los datos:
1. 2. 3. 4. La encriptacin de Datos Firma Digital Creacin de un Sitio Seguro (https) Firewalls, Wrappers y Proxies

61

Unidad 3.- Procesamiento del lado del cliente.

4.1 Lenguaje Script del cliente. 4.2 Modelo de objetos con lenguaje Script. 4.3 Objetos lenguaje Script nter construidos. 4.4 Eventos con lenguaje Script. 4.5 Validacin de entrada de datos del lado del cliente. 4.6 Consideraciones del soporte del navegador.
62

Lenguajes SCRIPT

63

Modelo del lenguaje JavaScript.

Es un lenguaje interpretado, idneo para trabajar en Web. Las dos caractersticas principales de JavaScript son, que es basado en objetos y que es orientado a eventos.

No permite un control absoluto sobre los recursos de la computadora

JScript

VBScript

64

Elementos bsicos:
Variables: Las variables en JavaScript se crean mediante la palabra reservada var.
Numericas Cadenas Arrays (Colecciones de datos) Booleanos Aritmeticos Relacionales Lgicos

Operadores: Simbolos que dicen la operacin a realizar:

Estructuras de control: Son todas aquellas sentencias que nos ayudan a controlar la forma en que se va ejecutando nuestra aplicacin. Funciones: Son procesos que tienen entradas y una salida. Se declaran con la palabra reservada function. Objetos incorporados:
Condicionales (if, switch) Cclicos (while, do..while, for)

65

 Array Object :
arrayObj = new Array() arrayObj = new Array([size]) arrayObj = new Array([element0[, element1[, ...[, elementN]]]]) length. Propiedad que contiene el nmero de elementos del arreglo. concat(arreglo2). Aade los elementos de arreglo2 al final de los del arreglo que invoca el mtodo, devolviendo el resultado. sort(funcionComparacion). Ordena los elementos del arreglo alfabticamente. Si se aade una funcin de comparacin como parmetro los ordenar utilizando sta. Dicha funcin debe aceptar dos parmetros y devolver 0 si son iguales, menor que cero si el primer parmetro es menor que el segundo y mayor que cero si es al revs.

Arguments Object (You cannot explicitly create an arguments object.) :

[function.]arguments[n]

Boolean Object: boolObj = new Boolean([boolValue]) JScript Language Reference

66

 Date Object :
dateObj = new Date() dateObj = new Date(dateVal) dateObj = new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]]) getTime() setTime(milisegundos). Obtienen y establecen, respectivamente, la fecha y la hora tomados como milisegundos transcurridos desde el 1 de enero de 1970. getYear() setYear(ao). Obtienen y establecen, respectivamente, el ao de la fecha. ste se devuelven como nmeros de 4 dgitos excepto en el caso en que estn entre 1900 y 1999, en cuyo caso se devolvern las dos ltimas cifras. getFullYear() setFullYear(ao). Realizan la misma funcin que los anteriores, pero sin tantos los, ya que siempre devuelven nmeros con todos sus dgitos. getMonth() setMonth(mes) getDay() setDay(dia) getHours() setHours(horas) getMinutes() setMinutes(minutos) getSeconds() setSeconds(segundos). Obtienen y establecen, respectivamente, el mes, da, hora, minuto y segundo de la fecha, tambin respectivamente, getDay() Devuelve el da de la semana de la fecha en forma de nmero que va del 0 (domingo) al 6 (sbado).

String Object : newString = new String(["stringLiteral"])

charAt(pos) indexOf(subcadena). split(separador). concat(string2) substr(indice, lenght) substring(indice1, indice2) toLowerCase() toUpperCase()

67

 Math Object (An intrinsic object that provides basic mathematics functionality and constants.):
Math.E Math.PI Math.abs(number) Math.asin(number) , Math.acos(number) , Math.atan(number) Math.sin(number) , Math.cos(number) , Math.tan(number) Math.ceil(number), Math.floor(number), Math. round (number) Math.exp(number) , Math.log(number) Math.max([number1[, number2[. . . [, numberN]]]]) Math.min([number1[, number2[. . . [, numberN]]]]) Math.pow(base, exponent) Math.random( ) Math.NaN Math.MAX_VALUE, Math.MIN_VALUE Math.NEGATIVE_INFINITIVE , Math.POSITIVE_INFINITIVE

Number Object: numObj = new Number(value)

JScript Language Reference

68

69

DOM
El objeto de documento encapsula el contendido, su nodo raz (es decir su documentElement) es <html>.
Atributos childNodes firstChild lastChild nextSibing previousSibing tagName nodeValues parentNode Metodos setAttibute(atirbuto,valor) getAttribute(atributo) removeAttribute(atributo) getElementById(id) getElementsByTagName(tag) createElement(etiqueta) appendChild(nodo) insertBefore(nodo1,nodo2)

window.document

70

Operadores del lenguaje Script (1)

Asignacin: Asigna un valor a una variable

var resultado=50

Comparacin:
== Devuelve true si son iguales. Fuerza conversiones de tipo. != Devuelve true si son distintos. Fuerza conversiones de tipo. === Devuelve true si son iguales y del mismo tipo. !== Devuelve true si son distintos o de distinto tipo. >Devuelve true si la variable de la izquierda es mayor que la variable de la derecha < Devuelve true si la variable de la derecha es mayor que la variable de la izquierda >= Devuelve true si la variable de la izquierda es mayor o igual que la variable de la derecha <= Devuelve true si la variable de la izquierda es menor o igual que la variable de la derecha

71

Operadores del lenguaje Script (2)

Aritmticos:

* Multiplicacin / Divisin + Suma - Resta % Resto de una divisin. ++ Incrementa el valor de la variable.

-- Disminuye el valor de una variable.

Pre-orden y post-orden

Pre-orden y post-orden

Operadores: Unarios Binarios Ternario

Lgicos:

&& Y || O ! Negacin

Parntesis dan mayor prioridad

72

Estructuras de control de decisin

if(condicin) { acciones } else { acciones }

switch(variable) { case constante 1: acciones; break; case constante 2: acciones; break; case constante N: acciones; break; default : acciones; }
73

Estructuras de control cclicas

while (condicion) { acciones; } -------------------------------------------------------------do { acciones; } while (condicion); -------------------------------------------------------------for (inicio; condicin; incremento) { acciones; }

74

Entrada / Salida
Salida:
document.write('hola'); alert(a);

Entrada:
a = confirm(Decide si ACEPTAR o CANCELAR"); a = prompt('Introduce algo');

75

Eventos con lenguaje Script.

Evento se considera cualquier accin que el usuario realiza con el sistema:

Evento onLoad onUnLoad onMouseOver onMouseOut onSubmit onClick onBlur onChange onFocus onSelect Descripcion Al Terminar de cargarse una pgina Al salir de una pgina Pasar el ratn por encima Que el ratn deje de estar encima Enviar un formulario Pulsar un elemento Perder el foco Seleccionar texto o perder el foco Conseguir el foco Seleccionar texto Elementos que lo admiten <body...> <frameset...> <body...> <frameset...> <a href..> <area...> <a href..> <area...> <form...> button, checkbox, link, radio button, checkbox, link, radio button, checkbox, link, radio button, checkbox, link, radio button, checkbox, link, radio

Lista de principales eventos

76

Validacin de entrada de datos del lado del cliente

Validar: Dar fuerza o firmeza a algo, hacerlo creble o apreciado o estimado Con el formulario que se creo antes agregarle el evento: <form onsubmit="return validar()> Y en el <head> de la pagina agregar el script de validacin.

77

Objeto XMLHttp
En 1998 Microsoft saco Remote Scripting que permita por medio de un applet y JavaScript hacer peticiones al servidor sin que el usuario se diese cuenta, al sacar IE5 crea este en un ActiveX (objeto XMLHttp). En 2002 Google (posiblemente) retoma el concepto y se crea AJAX (XMLHttpRequest).

78

Ajax
Tecnologa que usa JavaScript y XML de forma Asncrona para obtener recursos del servidor sin que el usuario sea consiente de esto.
1. 2. 3. 4. 5. Instanciar el Objeto XMLHttp Configurar y abrir la peticin Definir un manejador Jscript para realizar la peticin Enviar la peticin y los datos al servidor En el handler procesar los datos recibidos
79

Patrn de diseo: Factory

80

Cargar contenido dinmicamete

Se prentende que en la barra de navegacion las secciones disponibles sean: INICIO-CONTACTO-HISTORIA- ACERCA DE El contenido de estas secciones siempre se cargara en la capa llamada "section Por lo que en la pagina.html tendremos el funcion obterneXHR() y en cada una de las anclas mandaremos a ejecutar un manejador Jscript para cada pagina.
81

Consideraciones del soporte del navegador

Dado que el navegador en cada maquina puede ser diferente se recomienda realizar el cdigo lo mas portable posible, usar objetos genricos para esto se puede utilizar una librera que realiza todo esto:

http://jquery.com/download/

82

jquery
biblioteca (considerada tambin un framework) de Javascript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML.

text() - Sets or returns the text content of selected elements html() - Sets or returns the content of selected elements (including HTML markup) val() - Sets or returns the value of form fields

83

extras
Js doc: Estandar para documentar cdigo js JSON: JavaScript Objetct Notatio: Transporte liviano de objetos, Sintaxis: todo obejto json esta entre llaves {
nombre: John, edad : 25, hijos: [Mary, Sean], pareja:{

nombre: John, edad : 25, hijos: [Mary, Sean]

84

Unidad 4.- Programacin del lado del servidor.

3.1 Procesamiento del lado del servidor. 3.2 Conceptos bsicos de la herramienta de desarrollo. 3.3 Operadores. 3.4 Sentencias. 3.5 Arreglos. 3.6 Funciones y libreras. 3.7 Ejemplos prcticos. 3.8 Procesado de formularios. 3.9 Sesiones. 3.10 Conectividad entre el servidor Web y el servidor de base de datos. 3.11 Manejo de archivos. 3.12 Seguridad.
85

Procesamiento del lado del servidor.

86

Conceptos bsicos.

PHP es un lenguaje interpretado de SCRIPT de alto nivel embebido que se ejecuta en el servidor Usa un servidor, en caso de PHP por lo general es apache, en caso de ASP por lo general IIS, en caso de JSP tomcat, cada uno de ellos se puede configurar apache en tiene un archivo httpd.conf y el PHP se configura en php.ini

Cdigo HTML normal, cdigo PHP se encierra entre <?php y ?>

87

Variables
No se manejan tipos de dato explcitamente, toda variable empieza por $, las reglas para declarar variables son similares a las de C, C++, JAVA, JSCRIPT

$X =9; $Y= 2;

Los comentarios son como en C++ // y /* */

Casesensitive
88

Operadores
Aritmticos, relacionales y lgicos, php sobrecarga el uso del punto para especificar concatenacin de cadenas, por ejemplo:

$x = Hola; $y = Mundo; $z = $x . . $y $z = Hola Mundo

* / % + == === != < > <= >= && AND || OR XOR

89

Cadenas
No existe un tipo de dato en especial para cadenas Diferencia entre y Imprimir con {}

La salida en la pagina se consigue con las fucniones: printf y la funcion echo

Las cadenas pueden ser entre comillas o apostrofes, encomilladas se interpreta su contenido

90

chr Devuelve un caracter especfico explode Divide una cadena en varias cadenas htmlentities Convierte todos los caracteres aplicables a entidades HTML implode Une elementos de un array en una cadena ltrim Retira espacios en blanco (u otros caracteres) del inicio de un string md5 Calcula el hash md5 de un string money_format Da formato a un nmero como un string de moneda nl2br Inserta saltos de lnea HTML antes de todas las nuevas lneas en un string number_format Formatear un nmero con los miles agrupados ord devuelve el valor ASCII de una caracter printf Imprimir una cadena con formato rtrim Retira los espacios en blanco (u otros caracteres) del final de un string setlocale Establecer la informacin de la configuracin regional strcmp Comparacin de string segura a nivel binario strlen Obtiene la longitud de una cadena strrev Invierte una string strtolower Convierte una cadena a minsculas strtoupper Convierte un string a maysculas substr Devuelve parte de una cadena trim Elimina espacio en blanco (u otro tipo de caracteres) del inicio y el final de la cadena

91

Sentencias
Las estructuras de control que maneja el lenguaje son el IF..ELSE, SWITCH, WHILE, DO..WHILE, FOR

include(ruta/archivo); include_once (ruta/archivo); require (ruta/archivo); require_once (ruta/archivo);

todas las funciones y clases definidas en el archivo incluido tienen mbito global.

92

Arreglos
Los arreglos pueden ser indexados por numero (numricos) o nombre (asociativos).

93

La clave puede ser un integer o un string. El valor puede ser de cualquier tipo.

Funciones y libreras.
Una funcin es un bloque de cdigo, como un proceso puede tener datos de entrada, tiene un dato de salida, similar al lenguaje JSCRIPT se usa la palabra reservada function Mejor empleada la palabra biblioteca, es un conjunto de funciones que se ponen a disposicin del programador junto con un API:
jquery jgraph fpdf phpmailer adodb php .
94

Mtodo valores recabados en el formulario al servidor, se especifica la URL en action <form method="__" action="__"> <input type="text" name="txt1" /> <input type="submit" /> </form> Mtodos:
post get
Para subir archivos al servidor debemos agregar al formulario el atributo: enctype="multipart/form-data"

Procesado de formularios por el cual el cliente enviara los

95

Procesado de formularios
En el destino se tendr las variables dependiendo del nombre del elemento del formulario origen. Desde la versin 4.0.3 la bandera de configuracin track_vars esta habilidata por lo que a las variables ser posible usarlas por medio del arreglo asociativo que corresponda: $_POST[] o $_GET[] Del ejemplo anterior tendramos en el script del action la posibilidad de usar la variable $_GET["txt1"] Buena practica es antes de usar una variable saber si esta existe, esto es posible con la funcin isset que devuelve un valor cierto en caso de que la variable exista, caso contrario devolver falso.
96

Sesiones
Forma de dar persistencia a cierta informacin, mantenindola en archivos en el servidor.
session_start inicializa una sesin y crea el identificador de sesin. session_id devuelve el identificador de la sesin actual. session_regenerate_id genera un nuevo identificador para la sesin actual. session_unset limpia todas la variables de sesin registradas. session_destroy elimina todas la variables de sesin registradas.

Imposible session_start despus de desplegar

97

Conectividad con el db server.

PHP trabaja con MYSQL, pero soporta otros servidores de base de datos. mysql, mysqli, PDO (PhpDataObjet)

Mtodos mysql_* estn obsoletos, pero existen por soporte an. Es recomendable usar PDO (pero esta extensin se encuentra en desarrollo)

98

En el archivo php_enhanced_es.chm
. Versin de PHP en que se introdujo Includo con PHP 5.x Estado de desarrollo de MySQL Recomendado por MySQL para nuevos proyectos Soporte para juegos de caracteres Soporte para Declaraciones Preparadas en el lado del servidor Soporte para Declaraciones Preparadas en el lado del cliente Soporte para Procedimientos Almacenados Soporte para Declaraciones Mltiples Suporte para todas las funcionalidades de MySQL 4.1+ Extensin mysqli de PHP 5 S Desarrollo activo S - opcin recomendada S PDO (Usando el driver PDO MySQL y el Driver Nativo MySQL) 5 S Desarrollo activo, desde PHP 5.3 S S Extensin MySQL de PHP Antes de 3.0 S Slo se le mantiene No No

No

No

No

No

Mayormente

No

Mayormente

No

99

CONECTAR A LA BASE DE DATOS

Estilo orientado a objetos

Estilo por procedimientos

100

Trabajar la b.d.d orientado a objetos

101

Trabajar la b.d.d por procedimientos

102

TERMINAR CONEXION

Estilo orientado a objetos Estilo por procedimientos

103

Manejo de archivos
basename Devuelve el componente de nombre de rastreo de la ruta copy Copia archivos delete Borra un archivo dirname Devuelve el directorio padre de la ruta fclose Cierra un puntero a un archivo abierto feof Comprueba si el puntero a un archivo est al final del archivo fflush Vuelca la salida a un archivo fgetc Obtiene un carcter de un puntero a un archivo fgetcsv Obtiene una lnea del puntero a un archivo y la examina para tratar campos CSV fgets Obtiene un lnea del puntero a un archivo file_exists Comprueba si existe un fichero o directorio file Transfiere un fichero completo a un array filesize Obtiene el tamao de un fichero fnmatch Compara un nombre de archivo con un patrn fopen Abre un archivo o URL fputcsv Da formato a una lnea como CSV y la escribe en un puntero a un archivo fread Lectura de un fichero en modo binario seguro fscanf Analiza la entrada desde un archivo de acuerdo a un formato fseek Busca sobre un puntero a un fichero ftell Devuelve la posicin de lectura/escritura actual del puntero a un archivo fwrite Escritura de un archivo en modo binario seguro is_dir Indica si el nombre de archivo es un directorio is_file Indica si el nombre de fichero es un fichero normal is_uploaded_file Indica si el archivo fue subido mediante HTTP POST mkdir Crea un directorio move_uploaded_file Mueve un archivo subido a una nueva ubicacin parse_ini_file Analiza un archivo de configuracin parse_ini_string Analiza una cadena de configuracin pathinfo Devuelve informacin acerca de una ruta de archivo realpath Devuelve el nombre de la ruta absoluta canonizada rename Renombra un archivo o directorio rewind Rebobina la poscin de un puntero a un archivo rmdir Elimina un directorio

104

Ejemplo de log en archivo

105

Aspectos de seguridad
Aspectos a considerar para la seguridad de las aplicaciones Web:
Autenticacin Autorizacin

No confiar en las entradas de los usuarios: register_globals=off

No dar salidas no necesarias log_errors = On display_errors = Off
106

Unidad 5.- Servicios Web.

5.1 Visin general de servicios Web XML. 5.2 Tecnologas subyacentes.
5.2.1 SOAP 5.2.2 WSDL 5.2.3 UDDI

5.3 Publicacin de un servicio WEB. 5.4 Consumo de un servicio WEB.

107