DOCUMENTACION DE LA PAGINA WEB

INSTITUTO TECNOLOGICO SUPERIOR DE RIOVERDE

ING EN SISTEMAS COMPUTACIONALES

PROGRAMACION WEB

ING. BERNARDO SANTIAGO MARTINEZ

EMMANUEL VIELMA VILLALOBOS

CESAR ALEJANDRO RIVERA GALVAN

DOCUMENTACION DE DISEÑO WEB

SEMESTRE 7

RIOVERDE S.L.P. 08/OCTUBRE/2010

1
 DOCUMENTACION DE LA PAGINA WEB

TABLA DE CONTENIDOS

Arquitectura de desarrollo del proyecto…………………………………………………………………………………3

Capa de primer Nivel……………………………………………………………………………………………………………..4

Capa de segundo nivel……………………………………………………………………………………………………………4

Capa de Tercer Nivel………………...…………………………………………………………………………………………..4

Lenguaje del lado del cliente………………………………………………………………………………………………….5

HTML……………………………………………………………………………………………………………………………………..5

Lenguaje del lado del servidor………………………………………………………………………………………………..6

PHP…………………………………………………………………………………………………………………………………………6

Herramientas de desarrollo de la página Web…………………………………………………………………………7

Dreamweaver………………………………………………………………………………………………………………………….7

Windows………………………………………………………………………………………………………………………………...8

MySQL Workbench………………………………………………………………………………………………………………….8

Tipos y Roles de Usuario………………………………………………………………………………………………………….9

Usuario Administrador…………………………………………………………………………………………………………….9

Usuario Registrado…………………………………………………………………………………………………………………..9

Usuario Anónimo……………………………………………………………………………………………………………………..9

Diagramas de Caso de Uso……………………………………………………………………………………………………..10

Diseño de Vistas e Interfaz de la Web…………………………………………………………………………………….12

Estructura de Navegación……………………………………………………………………………………………………….14

Seguridad en la Web……………………………………………………………………………………………………………….14

Conclusiones…………………………………………………………………………………………………………………………..15

2
 DOCUMENTACION DE LA PAGINA WEB

ARQUITECTURA DE DESARROLLO DEL

PROYECTO
Esta página Web será desarrollada bajo la arquitectura del modelo de tres capas debido a que
el cliente hace una petición la cual es enviada al servidor de la página o aplicación Web y
después este enviara la petición a la base de datos.

Este modelo es el más indicado debido a que separa la capa de diseño de la capa lógica de
negocio y de la base de datos dando mayor facilidad de uso a quien administra la Web.

Ventajas de la Arquitectura de Tres Capas: Las llamadas de la interfaz del usuario en la estación
de trabajo, al servidor de capa intermedia, son más flexibles que en el diseño de dos capas, ya
que la estación solo necesita transferir parámetros a la capa intermedia. Con la arquitectura de
tres capas, la interfaz del cliente no es requerida para comprender o comunicarse con el
receptor de los datos. Por lo tanto, esa estructura de los datos puede ser modificada sin
cambiar la interfaz del usuario en la PC. El código de la capa intermedia puede ser reutilizado
por múltiples aplicaciones si esta diseñado en formato modular. La separación de roles en tres
capas, hace mas fácil reemplazar o modificar una capa sin afectar a los módulos restantes.

Desventajas de las Arquitecturas de Tres Capas y basadas en Web: Los ambientes de tres capas
pueden incrementar el tráfico en la red y requiere más balance de carga u tolerancia a las
fallas. Los exploradores actuales no son todos iguales. La estandarización entre diferentes
proveedores ha sido lenta en desarrollarse. Muchas organizaciones son forzadas a escoger uno
en lugar de otro, mientras que cada uno ofrece sus propias y distintas ventajas.

Esta arquitectura en la actualidad es la más usada debido a que en ella a cada uno de los
niveles se le confía una tarea simple y con esto pueden ampliarse con facilidad en caso de que
las necesidades aumenten

En este tipo de arquitectura se puede llevar en varios niveles esto facilita al usuario si se
encuentra con un error solamente se tendrá que corregir el error del nivel afectado.

También en esta arquitectura esta distribuido el trabajo para la creación de una aplicación por
nivel de esta manera ninguno de los niveles se mezclan con los demás

3
 DOCUMENTACION DE LA PAGINA WEB

Capa de primer nivel

Esta capa es llamada capa de presentación y en ella interactúa el usuario esta capa es lo que se
llama interfaz y viene a ser la página Web, tiene que ser sencilla y entendible para el usuario y
solamente le comunica información al usuario y captura la información del mismo en una
manera comprensible.

Capa de segundo nivel

Esta capa es llamada capa de negocios y en esta capa solamente se encuentran los programas
que residen y es tomada la información del usuario y envía la respuesta al mismo. En esta capa
es donde se ponen todas las reglas que deben de seguirse. Esta es la capa intermedia por que
esta se comunica con la capa de presentación para pedirla información del usuario y si es
necesario comunicarse con la capa de base de datos para enviar o recibir la petición.

Capa de Tercer Nivel

Es donde residen los datos y es la encargada de acceder a los mismos. Está formada por uno o
más gestores de bases de datos que realizan todo el almacenamiento de datos, reciben
solicitudes de almacenamiento o recuperación de información desde la capa de negocio

4
 DOCUMENTACION DE LA PAGINA WEB

LENGUAJE DEL LADO DEL CLIENTE

HTML
Usaremos el lenguaje de HTML porque este es el lenguaje más común en páginas Web además
de su sencillez ya que el mismo indica al navegador donde colocar cada texto, cada imagen o
cada video y la forma que tendrán estos al ser colocados en la página.

El lenguaje consta de etiquetas cada etiqueta tiene un significado Casi todas las etiquetas
tienen su correspondiente etiqueta de cierre, que indica que a partir de ese punto no debe de
afectar la etiqueta

Así que el HTML no es más que una serie de etiquetas que se utilizan para definir la forma o
estilo que queremos aplicar a nuestro documento

Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades
básicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que
se considere válido al documento HTML

Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido está
ubicado entre las dos etiquetas. Algunos elementos, tales como <br>, no tienen contenido ni
llevan una etiqueta de cierre. Debajo se listan varios tipos de elementos de marcado usados en
HTML.

El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico, como
puede ser Gedit en Linux, el Bloc de Notas de Windows, o cualquier otro editor que admita
texto sin formato como GNU Emacs, Microsoft Wordpad, TextPad, Vim, Notepad++, entre
otros.

Existen además, otros editores para la realización de sitios Web. Estos editores permiten ver el
resultado de lo que se está editando en tiempo real, a medida que se va desarrollando el
documento. Ahora bien, esto no significa una manera distinta de realizar sitios Web, sino que
una forma un tanto más simple ya que estos programas, además de tener la opción de trabajar
con la vista preliminar, tiene su propia sección HTML la cual va generando todo el código a
medida que se va trabajando. Algunos ejemplos de editores son Macromedia Dreamweaver, o
Microsoft FrontPage.

5
 DOCUMENTACION DE LA PAGINA WEB

LENGUAJE DEL LADO DEL SERVIDOR

PHP
En el lenguaje del lado del servidor usaremos el lenguaje PHP debido a que Es un lenguaje
multiplataforma y es totalmente orientado al desarrollo de aplicaciones Web con acceso a
información almacenada en una Base de Datos.

El código fuente escrito en PHP es invisible al navegador y al cliente ya que es el servidor el que
se encarga de ejecutar el código y enviar su resultado HTML al navegador. Esto hace que la
programación en PHP sea segura y confiable.

La capacidad de conexión con la mayoría de los motores de base de datos que se utilizan en la
actualidad, destaca su conectividad con MySQL. Además de que cuenta con la capacidad de
expandir su potencial utilizando la enorme cantidad de módulos llamadas extensiones.

Es libre, por lo que se presenta como una alternativa de fácil acceso para todos. Permite
aplicar técnicas de programación orientada a objetos. No requiere definición de tipos de
variables aunque sus variables se pueden evaluar también por el tipo que estén manejando en
tiempo de ejecución.

Tiene manejo de excepciones. Si bien PHP no obliga a quien lo usa a seguir una determinada
metodología a la hora de programar, aun estando dirigido a alguna en particular, el
programador puede aplicar en su trabajo cualquier técnica de programación o desarrollo que
le permita escribir código ordenado, estructurado y manejable.

6
 DOCUMENTACION DE LA PAGINA WEB

HERRAMIENTAS DE DESARROLLO DE LA
PAGINA WEB
DREAMWEAVER
Esta es una aplicación la cual se usa para el desarrollo de páginas Web tanto como de HTML
como de PHP. Es el programa de este tipo más utilizado en el sector del diseño y la
programación Web, por sus funcionalidades, su integración con otras herramientas como
Adobe Flash y, recientemente, por su soporte de los estándares del World Wide Web
Consortium. La gran ventaja de este editor sobre otros es su gran poder de ampliación y
personalización del mismo.

Las versiones originales de la aplicación se utilizaban como simples editores WYSIWYG. Sin
embargo, versiones más recientes soportan otras tecnologías Web como CSS, JavaScript y
algunos frameworks del lado servidor.

Como editor WYSIWYG que es, Dreamweaver permite ocultar el código HTML de cara al
usuario, haciendo posible que alguien no entendido pueda crear páginas y sitios Web
fácilmente sin necesidad de escribir código.

Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web instalados en su

ordenador para previsualizar las páginas Web. También dispone de herramientas de
administración de sitios dirigidas a principiantes como, por ejemplo, la habilidad de encontrar
y reemplazar líneas de texto y código por cualquier tipo de parámetro especificado, hasta el
sitio Web completo. El panel de comportamientos también permite crear JavaScript básico sin
conocimientos de código. también permite la conexión a Bases de Datos como MySQL y
Microsoft Access, para filtrar y mostrar el contenido utilizando tecnología de script como, por
ejemplo, ASP, ASP.NET, ColdFusion, JSP y PHP sin necesidad de tener experiencia previa en
programación.

7
 DOCUMENTACION DE LA PAGINA WEB

WINDOWS
Trabajaremos en el sistema windows debido a que tiene una mayor compatibilidad con
programas al ser el sistema operativo mas usado en el mundo. Como en nuestro caso
estaríamos usando la herramienta de dreamweaver que solo se encuentra disponible para
sistemas windows y MAC no podríamos trabajar bajo una distribución de Linux ya que es
incompatible, además tampoco podríamos trabajar bajo el sistema MAC ya que este software
es exclusivo para computadoras que utilizan ese dicho sistema y ninguno de los integrantes
contamos con esa computadora. Además de esto los programas utilizados y la manera de
programación son iguales bajo cualquier sistema operativo y se llega al mismo objetivo.

MySQL WORKBENCH
Con esta Herramienta modelaremos los diagramas de entidad relación para las bases de datos
Puede utilizarse para diseñar el esquema de una base de datos nueva, documentar una ya
existente o realizar una migración compleja

Esta Herramienta nos permitirá crear la base de datos de una manera mas visual y no en un
modo consola generando automáticamente lo que seria la base de datos con tan solo hacer un
clic ya que este programa cuenta con herramientas que inserta automáticamente una tabla o
creando las relaciones y generando el código necesario para trabajar en MySQL.

8
 DOCUMENTACION DE LA PAGINA WEB

TIPOS Y ROLES DE USUARIOS

Usuario administrador

Es el encargado de la página, el que la administra, y da privilegios a los demás usuarios.

Y es el que se esfuerza en conseguir una interfaz de usuario lo más clara y sencilla
posible.

Usuario registrado
Va a tener acceso a los datos que se estén manejando en la página y tener la capacidad de
navegar libremente sin restricciones mediante un identificador y una clave de acceso .
Normalmente, un usuario registrado tiene asignada una cuenta propia que mantiene
información personalizada del usuario en el servidor, (como puede ser dirección de e-
mail y espacio correspondiente). También puede dar acceso a ciertos contenidos no
accesibles al público en general

Usuario anónimo

Solamente podrá ver el inicio de la página más no acceder a datos importantes y no

podrá navegar tan libremente en la página ósea que va a tener restringido la mayoría de
los accesos a la pagina.

REGISTRADO
ANONIMO

WEB

ADMINISTRADOR

REGISTRADO ANONIMO

9
 DOCUMENTACION DE LA PAGINA WEB

DIAGRAMAS DE CASO DE USO

CREA INTERFAZ DE PÁGINA

CREA LA SEGURIDAD EN LA PÁGINA

DA PRIVILEGIOS A LOS
USUARIOS
ADMINISTRADOR

INICIAR SESION

DESCARGAR APLICACION

MI CUENTA
REGISTRADO

10
 DOCUMENTACION DE LA PAGINA WEB

REGISTRARSE

INICIAR SESION

BUSCAR ARTÍCULO

ANONIMO

11
 DOCUMENTACION DE LA PAGINA WEB

DISEÑO DE VISTAS

Esta sería la página de inicio con la cual interactuaría el usuario al iniciar el servicio web. La
interfaz de la vista para la navegación sería similar a la página de inicio solo sería modificado el
cuerpo de la página.

Dentro del cuerpo de la página se pondrían ofertas o algún tipo de propaganda de la web. Y si
el usuario hiciera clic en el producto sería trasladado a otra página pero con una interfaz
similar solamente cambiaria lo que es el la propaganda dentro del cuerpo de la web

12
 DOCUMENTACION DE LA PAGINA WEB

Esta sería la nueva página si el usuario hace un clic sobre el menú de navegación o sobre la
propaganda como se observa es similar a la página de inicio una ves que el usuario se loggeo.

Esta sería la página si el usuario tiene un error de inicio de sesión

13
 DOCUMENTACION DE LA PAGINA WEB

ESTRUCTURA DE NAVEGACION:

Estructura Radial

En este modelo las páginas secundarias no se conectan entre sí, y se debe navegar por la
página principal para ir de una secundaria a otra, es decir, la principal contiene enlaces a todas
las secundarias, pero las secundarias sólo contienen un retorno a la principal

La ventaja de esta estructura es que facilita la navegación, los visitantes sólo tendrán que
efectuar uno o dos clics para retornar a la página principal; sin embargo esto podría también
ser un inconveniente porque obliga al usuario a regresar siempre a la página de inicio.

SEGURIDAD EN LA WEB

Nosotros vamos a usar la seguridad HTTP, porque es más simple de usar e

implementar nosotros como programadores, porque podemos implementar los
cortafuegos más bien conocido como firewall, como el de Windows que es el más
común que trabaja sobre el esquema de HTTP.

Las aplicaciones se protegen realizando un control de acceso mediante la sólida

implantación de mecanismos de autenticación y autorización. Una medida de
seguridad adicional consiste en la instalación de cortafuegos de aplicación, dedicados a
filtrar el tráfico específico de distintas aplicaciones: correo (SMTP), Web (http), bases
de datos, etc.

14
 DOCUMENTACION DE LA PAGINA WEB

CONCLUSIONES

CESAR ALEJANDRO RIVERA GALVAN

Esto se trató de crear la documentación de cómo se va a hacer nuestra página web tuvimos
que primeramente saber que usuarios iban a trabajar en nuestra web, el rol de cada quien,
luego íbamos a diseñar las vistas y a interfaz de la página junto con su diseño de navegación.
Pero para esto primero se tiene que saber con qué arquitectura vamos a desarrollar nuestro
proyecto.

EMMANUEL VIELMA VILLALOBOS

Nuestro trabajo fue documentar el cómo se va a hacer nuestra página web de nuestro
proyecto por decir que lenguajes vamos a usar del lado del servidor y el lado del cliente y
también saber con qué herramienta de desarrollo tendremos que trabajar como lo es el
dreamweaver y tendremos que crear nuestra interfaz y diseño de vistas de la página. Por
último se habla de la seguridad de la página.

15