PROGRAMACION WEB

INSTITUTO TECNOLOGICO SUPERIOR DE RIOVERDE

ALUMNOS:
LEOPOLDO REYNAGA HERNANDEZ

MA. GUADALUPE PATIÑO LANDAVERDE

MATERIA:

PROGRAMACION WEB

TRABAJO:
DESARROLLO DEL PROYECTO DE PÁGINA WEB

CARRERA:

ING. SIST. COMPUT.

CATEDRATICO

ING. BERNARDO MARTINEZ SANTIAGO

FECHA:

8/OCT/2010

1
 PROGRAMACION WEB

INDICE:

Tabla de contenido

INTRODUCCION ..................................................................................................................................... 3

ARQUITECTURA IMPLEMENTADA .......................................................................................................... 4

LENGUAJE DEL LADO DEL SERVIDOR ...................................................................................................... 5

LENGUAJE DEL LADO DEL CLIENTE ......................................................................................................... 6

HERRAMIENTAS DE DESARROLLO .......................................................................................................... 7

METODOLOGIA ...................................................................................................................................... 8

DIAGRAMA CASO DE USO ...................................................................................................................... 9

DISEÑO DE NAVEGACION Y VISTAS ...................................................................................................... 10

ESQUEMA DE SEGURIDAD EN LA PÁGINA WEB .................................................................................... 14

¿PORQUE UTILIZAR HTTPS?......................................................................................................... 14

DIFERENCIAS CON HTTP ............................................................................................................... 14

2
 PROGRAMACION WEB

INTRODUCCION
El proyecto que realizaremos trata de una página web. La cual se piensa que
será para una tienda o súper, en al cual el usuario podrá darse de alta en la
pagina, podrá ver todos los artículos de venta, así como ver descuentos futuros
y hacer pedidos a domicilio. El cual tendrá que añadir todos sus datos para la
realización del envió. En el transcurso de la descripción del proyecto se
señalara que tipo de arquitectura implementaremos en la pagina, que tipos de
lenguaje se utilizaran tanto del lado del servidor como del lado del cliente, las
herramientas que utilizaremos para la creación tanto de base de datos como
para la generación de la pagina etc., la metodología que implementaremos,
como diagramas para tener una vista de cómo se realizaran los procesos,
diseño de vistas y diseño de interfaz en la cual el usuario interactuara con esta
y por ultimo la seguridad que le implementaremos a la pagina

3
 PROGRAMACION WEB

ARQUITECTURA IMPLEMENTADA
ARQUITECTURA DE 3 CAPAS

Nosotros utilizaremos esta arquitectura ya que proporcionaríamos la interfaz

visual que los clientes utilizarán para ver la información y los datos además de
que los componentes son responsables de solicitar y recibir servicios de otros
componentes que se crearan. Además de que el nivel de negocios le ayudara
al usuario a conectarse directamente con la información que desea
comunicándose esta con la BD y evitar que el usuario no tenga conexión
directa con la BD.Tambien cuenta con un nivel de datos que nos ayudara con
la Inserción, modificación, consulta y borrado. Para que el usuario se pueda
registrar, modificar y borrar sus datos y realizar las peticiones.

Las ventajas son las siguientes:

• Los componentes de la aplicación pueden ser desarrollados en cualquier
lenguaje.
• Los componentes son independientes.
• Los componentes pueden estar distribuidos en múltiples servidores.
• La D.B. es solo vista desde la capa intermedia y no desde todos los
clientes.
• Mejora la administración de los recursos cuando existe mucha
concurrencia.

4
 PROGRAMACION WEB

LENGUAJE DEL LADO DEL SERVIDOR

PHP
Es el lenguaje de script interpretado en el lado del servidor utilizado para la
generación de páginas web dinámicas

Este lenguaje lo emplearíamos para relacionar la base de datos con la página

Web y también ayudaría para la creación y configuración de la página como ya
lo vimos en clase. Es el lenguaje que necesitaríamos nosotros como
administradores de la página para realizar modificaciones en ella.

Ventajas del PHP

- PHP corre en casi cualquier plataforma utilizando el mismo código fuente,

pudiendo ser compilado y ejecutado en algo así como 25 plataformas,
incluyendo diferentes versiones de Unix, Windows
(95,98,NT,ME,2000,XP,bla,bla,bla) y Macs. Como en todos los sistemas se
utiliza el mismo código base, los scripts pueden ser ejecutados de manera
independiente al OS.

- La sintaxis de PHP es similar a la del C, por esto cualquiera con experiencia

en lenguajes del estilo C podrá entender rápidamente PHP. Entre los lenguajes
del tipo C incluimos al Java y Javascript.

- PHP es completamente expandible. Está compuesto de un sistema principal

un conjunto de módulos y una variedad de extensiones de código.

- Muchas interfaces distintas para cada tipo de servidor. PHP actualmente se

puede ejecutar bajo Apache, IIS, AOLServer, Roxen yTHTTPD. Otra alternativa
es configurarlo como modulo CGI.

- Puede interactuar con muchos motores de bases de datos tales como

MySQL, MS SQL, Oracle, Informix, PostgreSQL, y otros muchos. Siempre
podrás disponer de ODBC para situaciones que lo requieran.

- Rapidez. PHP generalmente es utilizado como modulo de Apache, lo que lo

hace extremadamente veloz. Esta completamente escrito en C, así que se
ejecuta rápidamente utilizando poca memoria.

- PHP es Open Source, lo cual significa que el usuario no depende de una

compañía específica para arreglar cosas que no funcionan, además no estás
forzado a pagar actualizaciones anuales para tener una versión que funcione.

5
 PROGRAMACION WEB

LENGUAJE DEL LADO DEL CLIENTE

HTML

El lenguaje HTML nos indicaría como navegadores donde colocar cada

texto, cada imagen o cada video y la forma que tendrán estos al ser
colocados en la página, la posición el tamaño, ubicación, el tipo de letra, el
espacio entre ellos, colocar enlaces para direccionarnos a otra ubicación. .

Este lenguaje consta de etiquetas que tienen esta forma <B> o <P>. la
cual cada etiqueta tiene su significado. por ejemplo :

<B> significa que se escriba en negrita, <P> significa un párrafo, <A> es

un enlace, etc. Casi todas las etiquetas tienen su correspondiente etiqueta
de cierre, que indica que a partir de ese punto no debe de afectar la
etiqueta. Por ejemplo </B> se utiliza para indicar que se deje de escribir
en negrita.

En conclusión sobre este lenguaje, es una serie de etiquetas que se

utilizan para definir la forma o estilo que queremos aplicarle a nuestra
página web.

JAVASCRIP

Javascript es un lenguaje de programación que podríamos utilizar, pero

esta en duda. Es utilizado para crear pequeños programitas encargados
de realizar acciones dentro de nuestra página web. Es un lenguaje de
programación del lado del cliente, porque es el navegador el que soporta
la carga de procesamiento.

Lo podríamos utilizar principalmente para la creación de efectos

especiales en nuestra página y con lo que tendrán que interactuar
nuestros usuarios con la interfaz.

Un ejemplo sería el siguiente:

Las sentencias escritas en javascript se encapsulan entre las etiquetas

<script> y </script>. Por ejemplo, si en el código de una página Web
incluimos la sentencia

<Script>
window.alert ("Bienvenido a mi sitio web. Gracias...")
</script>

al abrir la página con el navegador se nos mostrará una ventana de

bienvenida

6
 PROGRAMACION WEB

HERRAMIENTAS DE DESARROLLO

WORKBENCH

Esta herramienta será esencial en nuestro proyecto, ya que podremos realizar

la base de datos sin tener que programarla en mysql, se crearan las tablas con
sus respectivos campos y atributos, además de sus ligamientos para relacionar
las tablas con otras. Y por último, cuando ya tengamos nuestra base de datos
lista lo único que hay que hacer es trasladar nuestro BD de diseño de
workbench hacia mysql.

ARGOUML

Esta herramienta nos servirá para la creación de nuestro diagrama caso uso.

MySQL

Mysql es la herramienta de base de datos que le brindaremos a nuestra página

web, además de que no tiene ningún costo y es muy rápida y sencilla de
manejar, es muy utilizado en aplicaciones web en plataformas Linux/Windows-
Apache-MySQL-PHP/Perl/Python, y por herramientas de seguimiento de
errores como Bugzilla. Esta BD es aplicación web la utilizaríamos porque está
muy ligada a PHP, y casi la mayoría de las veces aparece en combinación con
MySQL.

MySQL es una base de datos muy rápida en la lectura cuando utiliza el motor
no transaccional MyISAM, pero puede provocar problemas de integridad en
entornos de alta concurrencia en la modificación. En aplicaciones web hay baja
concurrencia en la modificación de datos y en cambio el entorno es intensivo
en lectura de datos, lo que hace a MySQL ideal para este tipo de aplicaciones.
Sea cual sea el entorno en el que va a utilizar MySQL, es importante adelantar
monitoreo sobre el desempeño para detectar y corregir errores tanto de SQL
como de programación.

7
 PROGRAMACION WEB

METODOLOGIA

La metodología que nosotros utilizaremos es la WSDM que significa Método de

Diseño para Sitios Web (Web Site Design Method). Esta metodología mantiene
a fondo el diseño de nuestra aplicación web ya que mantiene cuatro fases muy
importantes para tener una descripción mas precisa del modelo a diseñar. Las
cuatro fases son: Fase de Modelo de Usuario, Fase de Diseño Conceptual,
Fase de Diseño de Implementación y Fase de Realización de Implementación
en las cuales se describirán a continuación acerca del proyecto.

TIPOS Y ROLES DE USUARIO

Los tipos de usuario que entraran en nuestra página web serán los usuarios
cliente registrados y tal vez los usuarios administrador. Decimos “tal vez”
porque puede que nuestra página web no necesite de este tipo de usuarios ya
que la información que se visualice será mostrada para todos de igual manera,
los usuarios administradores, su función es ver información confidencial que los
usuarios cliente no podrían ver y realizar cambios a la información así como
agregar nuevos productos, nuevas ofertas, descuentos, impedir pedidos o
quitar cualquiera de estos.
El rol del usuario cliente registrados solamente es ver la información de la
página, realización de pedidos y los únicos cambios que podrá hacer de
información es la de su perfil como usuario.

8
 PROGRAMACION WEB

DIAGRAMA CASO DE USO

En este diagrama se verá n los procesos que realizaran los usuarios clientes
registrados y nosotros como creadores y administradores de la página web.

9
 PROGRAMACION WEB

DISEÑO DE NAVEGACION Y VISTAS

Las vistas que se mostraran a continuación son muy simples ya que solamente
son para tener una idea de cómo funcionara la pagina y la ubicación que tendrá
si da clic en uno de los botones de la pagina.
Nuestra página de inicio será la siguiente:

Si aun o estamos registrados y le damos clic en el botón “regístrate” nos

mandara a la siguiente ubicación:

En esta parte tendremos que colocar todos los datos que se piden para poder
registrarnos y al darle clic en el botón “registrarse” nos mandara a la sig.
Página:

10
 PROGRAMACION WEB

Esta sería la página principal. Si ya estamos registrados y desde la página de

inicio colocamos nuestro nombre de usuario y contraseña y damos clic en
“entrar” nos mandara automáticamente a esta página, donde se muestra el
nombre de usuario, y los apartados que contiene como productos, productos
con descuento, ofertas y pedidos.
Si damos clic en productos aparecerá la siguiente página:

En la cual se muestra el listado de los productos con los que cuenta la tienda y
su precio. El botón que aparece en la parte inferior nos mandara a la página
principal.

11
 PROGRAMACION WEB

Si en la página principal damos clic en productos con descuento nos mandara a

la siguiente parte:

Donde se mostrara el listado de productos con descuento que tiene la tienda.

Si damos clic en ofertas en la pág. Principal aparecerá la siguiente:

Aquí se mostrara otro listado de las ofertas que mantiene la tienda.

12
 PROGRAMACION WEB

Y por último, si damos clic desde la página principal en “pedidos” la página

siguiente será:

En esta parte el usuario tendrá que seleccionar los productos que encargara,
en esta página nos falto una parte donde se mostrara el total en pesos de los
productos seleccionados, así vera el usuario si tiene el dinero necesario o no
para realizar el pedido, si no es así podrá quitar de la lista algunos productos
necesarios hasta que el total de efectivo este entre sus posibilidades de pagar.

Tendrá que introducir la fecha en la que desee que se le entregue el pedido y

se le dará clic en el botón “generar pedido” para dar por finalizado el pedido.

13
 PROGRAMACION WEB

ESQUEMA DE SEGURIDAD EN LA PÁGINA WEB

Nosotros como creadores de la página Web no podríamos decir que nuestra

aplicación no es importante para un cracker. Estos se basan por medio de las
contraseñas, Podremos hacernos la pregunta de ¿quién va a querer obtener
información mía? pero dado que los métodos de contagio se realizan por medio
de programas, desde unas máquinas a otras, estos no distinguen buenos de
malos, interesantes de no interesantes. Por tanto abrir sistemas y dejarlos sin
claves es facilitar la vida a los virus.

Podemos implementar un poco de seguridad desde el lenguaje PHP donde le

damos los privilegios al cliente de leer, sobrescribir, y ejecutar, pero también
podremos negarle cualquiera de estas.

El protocolo HTTPS es una versión segura del protocolo HTTP que implementa
un canal de comunicación seguro y basado en SSL (Secure Socket Layers)
entre el navegador del cliente y el servidor HTTP.

¿Porque utilizar HTTPS?

TCP/IP es un canal de comunicación no seguro, donde para ir de un cliente a
un servidor, la información realiza un seguido de saltos entre diferentes rotures
que se encargan de hacer llegar la información a su destino.

En cada uno de estos saltos, la información es transmitida en la red local del

router, siendo recibida también (dependiendo del dispositivo que crea dicha
red) por todos los dispositivos de la misma red, pudiendo ser capturada para
fines malintencionados.

No podemos evitar esto, pero podemos encriptar esta información para que
una vez capturada no pueda conocerse su contenido y así poder enviar con
tranquilidad números de cuenta, datos personales...
Diferencias con HTTP
A diferencia de HTTP, HTTPS trabaja por defecto por el puerto 443 TCP, y
antes de enviar los datos realiza algunas acciones previas.
Para hacer esta negociación, el cliente, envía al servidor las opciones de
cifrado, compresión y versión de SSL junto con algunos bytes aleatorios
llamados Challenge de Cliente.

El servidor, escoje las opciones de cifrado, compresión y versión de SSL entre

las que ha ofertado el cliente y le envía su decisión y su certificado.

Ambos negocian la clave secreta llamada master secret y usando esta clave, la
Challenge de Cliente y las opciones pactadas se envían la información
encriptada de tal manera que de ser interceptada no se puede descifrar.

14
 PROGRAMACION WEB

CONCLUSION
Como conclusión podemos decir que este proyecto nos traerá conocimientos sobre
cómo realizar una página web y todo lo que con lleva para su creación desde las
herramientas hasta la seguridad que implementaremos. Además de que en un proyecto
futuro tendremos las bases para la realización de esto. También vamos aprender a
manejar muy bien el lenguaje PHP, HTML y JAVASCRIP. Y conoceremos bajo que
arquitectura trabajan cada página web.

15