T Ingeniería

Sistemas Computacionales

E
Programación Web

C
Alumnos:

R Sánchez Vázquez María Jessica

Núñez Reynaga Luz Elisa

I Fong Badillo César Alberto

O Trabajo:

V Reporte - Página Web

E 7º Semestre, Turno Matutino

R Rioverde, S.L.P. a 8 de Octubre de 2010

D
E
Contenido
INTRODUCCION ........................................................................................................................ 1

TIPO DE ARQUITECTURA ........................................................................................................... 2

LENGUAJE DEL LADO DE SERVIDOR ........................................................................................... 3

LENGUAJE DEL LADO DE CLIENTE .............................................................................................. 4

HERRAMIENTAS DE DESARROLLO A UTILIZAR ............................................................................ 5

Wampserver ......................................................................................................................... 5

Apache.................................................................................................................................. 6

NetBeans .............................................................................................................................. 7

Dreamweaver ....................................................................................................................... 8

GESTOR PARA LA BASE DE DATOS ......................................................................................... 9

MySQL .................................................................................................................................. 9

METODOLOGIA ....................................................................................................................... 10

TIPOS DE USUARIOS ............................................................................................................ 10

ROLES DE USUARIO ............................................................................................................. 10

DISEÑO DE NAVEGACIÓN .................................................................................................... 11

DIAGRAMAS DE CASO Y USO ............................................................................................... 13

DISEÑO DE LA INTERFAZ ...................................................................................................... 14

ESQUEMA DE SEGURIDAD ....................................................................................................... 15

SSL ...................................................................................................................................... 15

CONCLUSIONES....................................................................................................................... 17

CONTACTOS ............................................................................................................................ 18
INTRODUCCION

El siguiente trabajo muestra el informe de una página web desarrollada

en Windows, la cual trata de una zapatería, donde se pretende mostrar (ó dar
publicidad) por medio de este medio informático las diferentes variedades de
calzado que existen en dicha zapatería, mostrando así; el tipo, número, color,
estilo, material, existencia, entre otras propiedades de cada modelo de zapato,
además proporcionar los datos de las diferentes sucursales que existen como
lo son: dirección, teléfono, horario de trabajo para facilitarle al cliente o usuario
la localización del lugar por si está interesado en algún tipo de calzado y saber
si esta en existencia o en que sucursal lo puede encontrar.

1
TIPO DE ARQUITECTURA

El tipo de arquitectura que se utilizará en esta página web será la de tres

capas porque permite el diseño de arquitecturas escalables donde se pueda
modificar conforme las necesidades vayan aumentando, así será más sencillo
al momento de dar de alta un zapato, o modificar cualquier otro aspecto.

2
LENGUAJE DEL LADO DE SERVIDOR

El lenguaje que se utilizara será PHP, porque es un lenguaje

interpretado de propósito general ampliamente usado, diseñado especialmente
para desarrollo web y puede ser incrustado dentro de código HTML lo cual
facilita la creación de la pagina, además de que tiene varias ventajas, ya que
puede ser desplegado en la mayoría de los servidores web y en casi todos los
sistemas operativos y plataformas sin costo alguno.

Otra de los aspectos de tomar sobre la decisión de este lenguaje, es que

aunque todo en su diseño está orientado a facilitar la creación de página web,
es posible crear aplicaciones con una interfaz gráfica para el usuario, utilizando
la extensión PHP-Qt o PHP-GTK, lo cual la hace más llamativa y atractiva para
el usuario.

Además permite la conexión a diferentes tipos de servidores de bases

de datos tales como MySQL, lo cual al ser compatible con HTML será de gran
ayuda para la creación de esta página.

3
LENGUAJE DEL LADO DE CLIENTE

El lenguaje de lado de cliente será HTML, como ya se menciono antes

es compatible con el lenguaje del lado de servidor PHP, además de que la
forma de utilización de este lenguaje no es complicada y puede ser creado y
editado con cualquier editor de textos básico, como puede ser el bloc de notas.

4
HERRAMIENTAS DE DESARROLLO A UTILIZAR

Wampserver

WAMP es el acrónimo usado para describir un sistema de infraestructura

de internet que usa las siguientes herramientas:

 Windows, como sistema operativo;

 Apache, como servidor web;
 MySQL, como gestor de bases de datos;
 PHP (generalmente), Perl, o Python, como lenguajes de programación.

El uso de un WAMP permite servir páginas html a internet, además de

poder gestionar datos en ellas, al mismo tiempo un WAMP, proporciona
lenguajes de programación para desarrollar aplicaciones web.

5
 Apache

El servidor HTTP Apache es un servidor web HTTP de código abierto

para plataformas Unix (BSD, GNU/Linux, etc.), Microsoft Windows, Macintosh y
otras, que implementa el protocolo HTTP/1.1 y la noción de sitio virtual.

El servidor Apache se desarrolla dentro del proyecto HTTP Server

(httpd) de la Apache Software Foundation.

Apache presenta entre otras características altamente configurables,

bases de datos de autenticación y negociado de contenido, pero fue criticado
por la falta de una interfaz gráfica que ayude en su configuración.

Apache es el componente de servidor web en la popular plataforma de

aplicaciones LAMP, junto a MySQL y los lenguajes de programación
PHP/Perl/Python (y ahora también Ruby).

6
 NetBeans

NetBeans es una plataforma que permite que las aplicaciones sean

desarrolladas a partir de un conjunto de componentes de software llamados
módulos. Un módulo es un archivo Java que contiene clases de java escritas
para interactuar con las APIs de NetBeans y un archivo especial (manifest file)
que lo identifica como módulo. Las aplicaciones construidas a partir de módulos
pueden ser extendidas agregándole nuevos módulos. Debido a que los
módulos pueden ser desarrollados independientemente, las aplicaciones
basadas en la plataforma, NetBeans puede ser extendido fácilmente por otros
desarrolladores de software.

La selección de esta plataforma es porque es un proyecto de código

abierto de gran éxito con una gran base de usuarios, una comunidad en
constante crecimiento, y con cerca de 100 socios en todo el mundo.

Además de que permite crear aplicaciones Web con PHP 5, un potente

debugger integrado y además viene con soporte para Symfony un gran
framework MVC escrito en php. Al tener también soporte para AJAX, cada vez
más desarrolladores de aplicaciones LAMP o WAMP, están utilizando
NetBeans como IDE.

7
 Dreamweaver

La elección principal de este programa es porque es una de las

herramientas de diseño de páginas web más avanzadas, además este
programa dispone de funciones para acceder al código HTML generado.

La aplicación permite crear sitios de forma totalmente gráfica, también la

conexión a un servidor, a base de datos, soporte para programación en ASP,
PHP, Javascript, cliente FTP integrado, etc.

Dreamweaver Cumple perfectamente el objetivo de diseñar páginas con

aspecto profesional, y soporta gran cantidad de tecnologías, además muy
fáciles de usar:

 Hojas de estilo y capas

 Javascript para crear efectos e interactividades
 Inserción de archivos multimedia...

8
 Además es un programa que se puede actualizar con componentes, que
fabrica tanto Macromedia como otras compañías, para realizar otras acciones
más avanzadas.

En resumen, el programa es realmente satisfactorio, incluso el código

generado es de buena calidad. La única pega consiste en que al ser tan
avanzado, puede resultar un poco difícil su manejo para personas menos
experimentadas en el diseño de webs.

GESTOR PARA LA BASE DE DATOS

MySQL

La elección de este sistema de BD fue porque ya se tienen

conocimientos básicos a cerca del mismo, por cursos anteriores en otras
materias como lo fue Base de datos, además de que permite la conexión con el
servidor PHP que se utilizará. Por un lado se ofrece bajo la GNU GPL para
cualquier uso compatible con esta licencia.

Otro de los motivos de la elección es que para realizar la base de datos

es que MySQL esta patrocinado por una empresa privada, que posee el
copyright de la mayor parte del código.

Esto es lo que posibilita el esquema de licenciamiento anteriormente

mencionado. Además de la venta de licencias privativas, la compañía ofrece
soporte y servicios. Para sus operaciones contratan trabajadores alrededor del
mundo que colaboran vía Internet.
9
METODOLOGIA
TIPOS DE USUARIOS

El usuario administrador. Es la persona a la que va destinada dicho

producto de software una vez que ha superado las fases de desarrollo
correspondientes. En principio es el propietario del mismo aunque éste puede
designar más administradores.

El usuario anónimo (Cliente). Aquel que navegara en el sitio web sin

autenticarse como usuario registrado. Normalmente, el usuario registrado goza
de mayores privilegios que el usuario anónimo; en este caso se utilizara solo
usuarios anónimos.

ROLES DE USUARIO
El usuario administrador.

Tiene acceso a todas las operaciones de gestión que se pueden realizar

en la página. Trabajará en tareas de configuración de la aplicación, como dar
mantenimiento a la base de datos, actualizarla, hacer cambios en la interfaz de
la misma, puede publicar y editar los artículos; todo en cuanto a modificaciones
se refiera.

Principalmente el software se desarrolla pensando en la comodidad del

usuario final, y por esto se presta especial interés y esfuerzo en conseguir una
interfaz de usuario lo más clara y sencilla posible.

El usuario anónimo (Cliente).

Estos usuarios podrán navegar en la página Web sin la necesidad de

registrarse para acceder a otras partes de la misma, así también no podrá
hacer modificaciones, ni editar aspectos de la página.

10
 DISEÑO DE NAVEGACIÓN
Descripción

En la primera vista de la pagina web estará un botón en el cual al dar un

click, mandara a otro sitio donde se encontraran las dos sucursales de la
zapatería.

Sucursal 1

Sucursal 2

Al seleccionar cualquiera de las dos sucursales mandara al siguiente

sitio donde se podrán ver los datos donde se encuentra localizado la sucursal,
como lo es la dirección y el teléfono, así como el horario de trabajo de la
zapatería y los tipos de calzado con los que cuenta.

En esa misma interfaz se podrá seleccionar el tipo de calzado que desee

ver el usuario, ejemplo: “botas” y mandara a otro sitio donde se encuentran los
diferentes tipos de bota que se tienen en existencia, así como las propiedades
de cada una (modelo, tipo, textura, color, talla, precio, material, etc). Así el
cliente tendrá una idea más clara y se sentirá motivado para visitar la sucursal
de su preferencia.

11
 Página Principal

ENTRAR

SUCURSAL 1 SUCURSAL 2

Dirección:
Dirección:
Teléfono:
Teléfono:

SUCURSAL 1
Tipo de calzado niño
Tipo calzado adultos
SUCURSAL 2
Zapatos Zapatos
Tennis Tennis
Botas Botas
Zapatillas Guaraches
Guaraches

Zapatos

Imagen Modelo Talla Tipo Color Material Textura Precio

… … … 12 … … … …

… … … … … … …

Menú de Inicio
 DIAGRAMAS DE CASO Y USO

Operaciones de
Gestión

Dar mantenimiento
a la BD

Actualizar la BD

Hacer cambios en
la interfaz
Administrador
Publicar y editar
artículos

Corregir errores

Ingresar a la página
web

Consultar información

(artículos, mercancía)

Usuario Anónimo (Cliente)

13
 DISEÑO DE LA INTERFAZ

como la moda no hay dos

Anúnciate con
nosotros

14
ESQUEMA DE SEGURIDAD
SSL

SSL es la abreviatura de "Secure Sockets Layer"

Una de las decisiones de tomar este esquema de seguridad, es porque

es soportado por todos los navegadores comunes de internet que existen. Los
datos transmitidos mediante una conexión SSL están protegidos por la
encriptación de los datos, un mecanismo que previene y evita que los datos
sean vistos por terceras partes o que puedan ser alterados.

Además Los navegadores de internet pueden conectarse con los

servidores web mediante http y https. Una conexión mediante https implica
escribir https:// antes del nombre de dominio o URL y, suponiendo que el
servidor web disponga de un certificado SSL, la conexión se realizará de forma
segura y encriptada.

La misión del protocolo SSL es permitir establecer una conexión segura

entre el servidor web y el visitante que accede al web mediante un navegador
de internet, encriptando los datos entre ambos de forma que, lo datos que
viajan por internet entre el servidor y el visitante (y viceversa) no sean legibles
por terceros si fueran interceptados.

15
 Para que se pueda utilizar el protocolo SSL en un servidor web, debe
obtenerse un "certificado SSL" emitido por una "Entidad Emisora de
Certificados" reconocida tanto por el servidor como por el navegador del
visitante.

El navegador indica que se está bajo una "sesión segura" cambiando la

dirección de navegación de http:// a https:// y mostrando generalmente un
pequeño candado en la parte inferior del navegador.

Los visitantes pueden pinchar sobre el candado para ver el certificado

SSL, quien lo emitió, a nombre de quien lo emitió, y hasta cuando es válido.

16
CONCLUSIONES
Al término de este documento, que tan solo es un avance teórico, se
desea llevar a cabo realmente, con la utilización de las herramientas antes
mencionadas. Gracias a la investigación previa para la realización del mismo,
se tiene un concepto más claro de lo que se quiere llegar con el desarrollo de la
página y las necesidades que el cliente requiere; así como las problemáticas
que pudieran presentarse. Los conocimientos obtenidos en la materia de
programación web han sido un apoyo eficiente, ya que motiva a seguir
aprendiendo a cerca del desarrollo y programación de páginas, no solo en lo
que estamos acostumbrados sino, abriendo caminos a nuevas expectativas

María Jessica Sánchez Vázquez

Ya concluido el reporte y haber recopilado la información necesaria,

sobre como hacer una pagina web me dejo los conocimientos necesarios para
poderla realizar mas adelante.

Mas adelante se planea poderla realizar e implementarla ya al publico

para hacer publicidad al negocio y a la vez tener mayor productividad.

Se obtuvieron buenos resultados en la elaboración de este reporte para

poderlo hacer en un futuro.

Luz Elisa Núñez Reynaga.

Una vez que se ha llegado al culmen del presente, en donde se esta

planificando la elaboración de una pagina web, la cuál será aplicada a una
zapatería, en donde en un principio su funcionalidad será la promoción y
difusión de los productos.

En un principio para poder empezar a realizarla, debemos tener bien

definidos los objetivos y metas las cuales nos fijaremos a realizar.

César Alberto Fong Badillo

17
CONTACTOS

Vazquez_jessy13@hotmail.com

Fong_medc16@hotmail.com

Elisa_n3r90@hotmail.com

18