INSTITUTO TECNOLOGICO SUPERIOR DE

RIOVERDE S.L.P.

Materia:

PROGRAMACION WEB
Catedrático:
ING. BERNARDO MARTÍNEZ SANTIAGO

VII SEMESTRE
DE
ING. EN SISTEMAS COMPUTACIONALES
Trabajo:
PLANEACION PROYECTO PAGINA WEB
QUE DEPORTES WEB
Elaborado por:
WILLIAM ALBERTO RAMOS AGUILAR
Nº CONTROL: 07296043
Correo electrónico: Jerry_24502@hotmail.com
MIGUEL ANGEL CANO CHAVEZ
No. Control: 07296007
Correo electrónico: an_make@hotmail.com
SERGIO ARMANDO ZARATE GONZALEZ
No. Control: 07296023
Correo electrónico: piwi_866@hotmail.com

2 DE OCTUBRE DEL 2010

CARR. RIOVERDE-SAN CIRO KM.4.5
 TABLA DE CONTENIDO
1. ARQUITECTURA ........................................................................................ 1
2. LENGUAJE DEL LADO DEL CLIENTE: ...................................................... 2
2.1 HTML ........................................................................................................ 2
3. LENGUAJES DEL LADO DEL SERVIDOR ................................................. 3
3.1 PHP .......................................................................................................... 3
3.2 MySQL ...................................................................................................... 4
3.3 SERVIDOR HTTP APACHE ..................................................................... 4
4. HERRAMIENTAS DE DESARROLLO ......................................................... 5
4.1 NETBEANS .............................................................................................. 5
4.2 FLASH ...................................................................................................... 5
4.3 BLOCK DE NOTAS .................................................................................. 6
5. METODOLOGÍA WSDM .............................................................................. 6
5.1 CLASIFICACIÓN DE USUARIOS ............................................................. 6
5.2 DESCRIPCIÓN DE USUARIO .................................................................. 6
5.3 MODELADO DE OBJETOS ...................................................................... 6
5.4 DISEÑO DE NAVEGACIÓN ..................................................................... 7
5.5 DISEÑO DE CASO DE USO .................................................................... 8
5.6 DISEÑO DE VISTAS ................................................................................ 9
6. ESQUEMA DE SEGURIDAD ..................................................................... 16
7. CONCLUSIONES ...................................................................................... 17
TABLA DE CONTENIDO DE IMÁGENES
IMAGEN 1: DISEÑO DE NAVEGACIÓN. ........................................................... 7
IMAGEN 2: DISEÑO CASO DE USO DE NAVEGACION .................................. 8
IMAGEN 3: INTERFAZ PRINCIPAL ................................................................... 9
IMAGEN 4: INTERFAZ DE VENTANA DE VIDEO ........................................... 10
IMAGEN 5: INTERFAZ DE VENTANA DE CALENDARIO ............................... 11
IMAGEN 6: INTERFAZ DE VENTANA DE QUINIELAS ................................... 12
IMAGEN 7: INTERFAZ DE VENTANA DE FUTBOL MEXICANO .................... 13
IMAGEN 8: INTERFAZ DE VENTANA DE FUTBOL TECNOLOGICO ............ 14
 1. ARQUITECTURA
En el diseño de sistemas informáticos actual se suele usar las arquitecturas
multinivel o programación por capas. En dichas arquitecturas a cada nivel se le
confía una misión simple, lo que permite el diseño de arquitecturas escalables
(que pueden ampliarse con facilidad en caso de que las necesidades
aumenten).
El desarrollo del proyecto se realizara en una arquitectura de tres capas y un
nivel, por el hecho de presentación + lógica + datos en una sola computadora.
 Esta arquitectura favorece al proyecto por el hecho de que no es muy
compleja y extensa, ya que en un solo equipo podrá ejecutar las
peticiones del cliente sin retrasar el tiempo de respuesta. Se adopta esta
arquitectura debido a que todo el trabajo se divide en cada una de las
capas, asignándole a estas una misión o meta a cumplir.

1.- Capa de presentación: Esta es la que mira el usuario al entrar al sitio y es

lo que el sistema muestra siempre como primera entrada, aquí captura los
datos de usuario y los reconoce aquí siempre se ejecutan pocos procesos y
solo hace referencia a la capa de negocios.
2.- Capa de negocios (lógica): Es aquí donde se concentran todos los
programas que se ejecutan, recibiendo las peticiones del usuario entrante, esta
capa se comunica con la de presentación para juntas dar respuesta al usuario,
también se comunica con la capa de datos que es donde reside la información
y es extraída para mostrarla después de que el usuario la solicite.
3.- Capa de datos: Esta capa es donde se concentra toda la información que
el sitio va a mostrar al usuario, aquí residen todas las recuperaciones de
información que la capa de negocios solicita, o si fuera el caso donde residen
las solicitudes de almacenamiento de información. Aquí solo se puede
comunicar la capa de lógica.

Que Deportes Web Página 1

 2. LENGUAJE DEL LADO DEL CLIENTE:
2.1 HTML
Hyper Text Markup Language (Lenguaje de marcación de Hipertexto)
Es el lenguaje de marcas de texto utilizado normalmente en la www (World
Wide Web). Fue creado en 1986 por el físico nuclear Tim Berners-Lee; el cual
tomo dos herramientas preexistentes: El concepto de Hipertexto (Conocido
también como link o ancla) el cual permite conectar dos elementos entre si y el
SGML (Lenguaje Estándar de Marcación General) el cual sirve para colocar
etiquetas o marcas en un texto que indique como debe verse. HTML no es
propiamente un lenguaje de programación como C++, Visual Basic, etc., sino un
sistema de etiquetas. HTML no presenta ningún compilador, por lo tanto algún
error de sintaxis que se presente éste no lo detectará y se visualizara en la
forma como éste lo entienda.
El entorno para trabajar HTML es simplemente un procesador de texto, como el
que ofrecen los sistemas operativos Windows (Bloc de notas), UNIX (el editor vi o
ed) o el que ofrece MS Office (Word).
El conjunto de etiquetas que se creen, se deben guardar con la extensión .HTM
o .HTML Estos documentos pueden ser mostrados por los visores o "browsers"
de páginas Web en Internet, como Netscape Navigator, Mosaic, Opera y
Microsoft Internet Explorer.
También existe el HTML Dinámico (DHTML), que es una mejora de Microsoft
de la versión 4.0 de HTML que le permite crear efectos especiales como, por
ejemplo, texto que vuela desde la página palabra por palabra o efectos de
transición al estilo de anuncio publicitario giratorio entre página y página.
 Se empleara este lenguaje ya que es muy sencillo de utilizar y es
soportado en varias plataformas, otra gran ventaja que lo distingue es
que no tiene que ser instalado ya que el sistema cuenta con él y
solo es un acumulador de texto el cual puede ser ejecutado en varias
aplicaciones porque el trabajo de HTML solo es ser un presentador de
texto para las herramientas de compilación.

Que Deportes Web Página 2

 3. LENGUAJES DEL LADO DEL SERVIDOR
3.1 PHP
Oficialmente, PHP es un preprocesador de hipertextos, pero qué significa?
Para ilustrar esto podemos ver un simple ejemplo:
<html>
<head>
<title>Example</title>
</head>
<body>
<?php echo "Hi, Esto es un Script PHP";?>
</body>
</html>
Esto es muy parecido a cualquier otro Script escrito en Perl o C. El código de
PHP está incluido en tags especiales "<?,?>".
Lo que hace diferente a PHP es que el código que se deba ejecutar se ejecuta
siempre en el servidor.
Así, al ejecutar el script anterior, el cliente recibirá sólo los resultados de la
ejecución por lo que es imposible para el cliente acceder al código que generó
la página.
En el nivel más básico PHP es equiparable a un CGI cualquiera. La mayor
fuerza de PHP es que está preparado para soportar accesos a muchos tipos de
bases de datos como:
 Adabas D  Sybase
 dBase  Velocis
 Empress  Unix dbm
 FiclePro  mSQL
 informix  MySQL
 InterBase  Oracle
 Solid  PosgreSQL
Además de esto, PHP soporta la utilización de otros protocolos como IMAP,
SNMP, NNTP, POP3 o HTTP a nivel de socket.
 Se implementara PHP por la facilidad de programación, compatibilidad y
parecido en sintaxis con HTML. Una característica muy importante es
que soporta los accesos a una infinidad de tipos de bases de datos,
Además que manipula las consultas al gestor de bases de datos
MySQL.

Que Deportes Web Página 3

 3.2 MySQL
MySQL es un sistema de gestión de base de datos relacional, multihilo y
multiusuario con más de seis millones de instalaciones. MySQL AB —desde
enero de 2008 una subsidiaria de Sun Microsystems y ésta a su vez de Oracle
Corporation desde abril de 2009— desarrolla MySQL como software libre en un
esquema de licenciamiento dual.
 Se implementara el gestor de bases de datos MySQL por ser el que
aporta más información y fácil de implementar en servidores web ya que
soporta multihilos y multiusuario para las consultas a la información.
3.3 SERVIDOR HTTP 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 y la noción de sitio virtual.Apache
presenta entre otras características altamente configurables, bases de datos de
autenticación y negociado de contenido.
La arquitectura del servidor Apache es muy modular. El servidor consta de una
sección core y diversos módulos que aportan mucha de la funcionalidad que
podría considerarse básica para un servidor web. Apache es usado
principalmente para enviar páginas web estáticas y dinámicas en la World Wide
Web. Apache es usado para muchas otras tareas donde el contenido necesita
ser puesto a disposición en una forma segura y confiable.
 Se implementara el servidor http en apache para subir la página web ya
que es aceptado en multiplataforma y permite el enlazar los gestores de
bases de datos.

Que Deportes Web Página 4

 4. HERRAMIENTAS DE DESARROLLO
4.1 NETBEANS
La plataforma NetBeans 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 pueden ser extendidas fácilmente por otros
desarrolladores de software.
 Se implementara la herramienta de desarrollo NetBeans para dar diseño
y forma a la página web. Ya que permite una fácil programación y
multiplataforma para su implementación o desarrollo mismo
4.2 FLASH
Para la creación de una página web Se puede usar flash para crear una
presentación que es similar a una propaganda de televisión donde se le puede
agregar sonido y video para una mejor experiencia del usuario y Para realizar
un trabajo vistoso y elaborado usando Flash, que muchas veces sería difícil y a
veces imposible usando solo HTML.
Prácticamente muy pocas veces se presentan algún problema con los
navegadores (Browsers): en su mayor parte las películas Flash trabajarán lo
mismo si el usuario está sobre Netscape o IE, sobre Mac o PC. Dentro del uso
de flash únicamente se encuentra un solo problema el cual es que el usuario no
tenga un apropiado plug-in de Flash
 Se implementara la herramienta de desarrollo flash ya que ayuda a dar
mejor diseño de presentación a la página web. En dicha herramienta
podemos diseñar los botones contos de imágenes etc.

Que Deportes Web Página 5

 4.3 BLOCK DE NOTAS

Es la herramienta más adecuada para comenzar con el diseño de páginas web.

Esto es por que Utiliza el juego de caracteres internacional más adecuado para
los archivos HTML.
 Se implementara la herramienta block de notas para el desarrollo de
esta aplicación web ya que puede visualizar cualquier tipo de código y
traducirlo a una aplicación web.

5. METODOLOGÍA WSDM
5.1 CLASIFICACIÓN DE USUARIOS
Se tienen dos tipos de usuarios los cuales podrán acceder al sitio de distinto
modo para su funcionamiento, los usuarios son:
 Administrador
 Públicos
5.2 DESCRIPCIÓN DE USUARIO
Administrador: Realizara registros, actualizaciones, eliminar y también podrá
modificar la información del sitio.
Usuario: Se tendrá que registrar por un control estadístico de visitas del sitio en
el cual solo se tomaran datos generales. Una vez hecho esto entrara en el
sitio donde podrá consultar y descargar información.
5.3 MODELADO DE OBJETOS

usuarios Clase registro Clase permiso Clase ventanas

Modificar
Nombre
Registrar Iniciar sesión
Correo_electrónico
ADMINISTRADOR Eliminar Eliminar
N°_telefónico
Consultar Registrar
Dirección
Actualizar
Inicio
Nombre Artículos
CLIENTE Zona Consultar Partidos
PUBLICO Municipio Descargar Equipos
Edad Estadística de
visitas
Tabla 1 Modelo de objetos.

Que Deportes Web Página 6

 5.4 DISEÑO DE NAVEGACIÓN

IMAGEN 1: DISEÑO DE NAVEGACIÓN.

Que Deportes Web Página 7

 5.5 DISEÑO DE CASO DE USO

IMAGEN 2: DISEÑO CASO DE USO DE NAVEGACION

Que Deportes Web Página 8

 5.6 DISEÑO DE VISTAS
IMAGEN 3: INTERFAZ PRINCIPAL
Encabezado

links Quinielas

Información

Fútbol
Videos
rioverde

Fútbol
calendario Menú
tecnológico

Que Deportes Web Página 9

IMAGEN 4: INTERFAZ DE VENTANA DE VIDEO
videos

Regresar y
Quinielas
publicidad

video

calendario publicidad

Fútbol
links Menú
tecnológico

Que Deportes Web Página 10

IMAGEN 5: INTERFAZ DE VENTANA DE CALENDARIO
calendario

Eventos del mes Quinielas

Calendario

Eventos del día publicidad

Fechas
publicidad Menú
relevantes

Que Deportes Web Página 11

IMAGEN 6: INTERFAZ DE VENTANA DE QUINIELAS
Quinielas

Fútbol
Guardar quiniela
mexicano

Formato de la quiniela

Fútbol
ideo
rioverde

publicidad Menú publicidad

Que Deportes Web Página 12

IMAGEN 7: INTERFAZ DE VENTANA DE FUTBOL MEXICANO
Fútbol mexicano

Tabla de
posiciones

actividades

publicidad

Tabla de
goleadores

Menú publicidad

Que Deportes Web Página 13

IMAGEN 8: INTERFAZ DE VENTANA DE FUTBOL TECNOLOGICO
Fútbol tecnológico

Tabla de
posiciones
Actividades

publicidad

Tabla de
goleadores

links Menú

Que Deportes Web Página 14

5.7 DISEÑO DE IMPLEMENTACION
ETAPA 1: estructurar diagramas de entidad relación para la elaboración y
desarrollo de la base de datos que se manejara para la página Web
ETAPA 2: elaborar el código HTML para el diseño de la página e inicialización
de la interfaz grafica.
ETAPA 3: cargar en NetBeans imágenes y links en código PHP para la etapa
de negocios en la realización de la página Web.
ETAPA 4: desarrollar en flash la presentación de la pagina para que este se
aplicable al código HTML, tales como lo son: los botones, links, diseño de
ventanas, etc.
ETAPA 5: cuadricular la interfaz que se implementara con sus respectivas
funciones el cual se muestra en el diseño de vistas.
ETAPA 6: crear en código HTML el inicio de sesión de usuarios o administrador
según sea el caso.
ETAPA 7: cargar los usuarios a la base de datos en MySQL para que se pueda
realizar la estadística de visitantes, y así se conozca de que zona hay más
visitantes al sitio Web.
ETAPA 8: diseñar las consultas en php tales como: eliminar, registrar,
actualizar, modificar, entre otras para que el usuario administrador y nada más
el las pueda realizar.
ETAPA 9: crear el registro de estadísticas de los usuarios que visitan el sitio
Web en código PHP.
ETAPA 10: diseñar los índex tales como son: los artículos, los partidos, los
equipos, las estadísticas de visita, entre otros.
ETAPA 11: desarrollo de pruebas en NetBeans para comprobar la
compatibilidad con PHP a la hora de hacer los registros y acceso de usuarios.
ETAPA 12: montaje ye implementación en el servidor Web que se manejara en
página Web.
ETAPA 13: configuración e instalación del servidor DNS que es el que se
implementara.

Que Deportes Web Página 15

 6. ESQUEMA DE SEGURIDAD
Dentro de la creación de la página no se ve necesario la implementación de un
esquema de seguridad debido a que la información que se va estar manejando
no se encuentra dentro de un catalogo de privacidad que pueda llegar a
ocasionar problemas por el uso de información y que dicha información será
usada por cada usuario conforme sea su preferencia

Que Deportes Web Página 16

 7. CONCLUSIONES
William Alberto Ramos Aguilar
El documento ayuda a comprender todo el desarrollo del proyecto ya que
explica todos los parámetros y herramientas que van a ser empleadas en el
proyecto, se mira desde las aplicaciones que se van a usar, como es que las
vamos a desarrollar y una vez hechas, como enlazar toda la información o
aplicaciones para que juntas logren un solo objetivo. Se Habla del servidor web
en apache, PHP, MySQL, etc. Y su funcionamiento dentro del sitio.

Miguel Ángel Cano Chávez

Pues el hacer este tipo de trabajo ayuda a que nos desarrollemos en este
campo laboral, ya que ayuda a que se investiga acerca de cómo se debe de
llevar a cabo dicha pagina y como se tiene que unir todo en conjunto para
poder hacerla y la finalidad de esta, aplicando los conocimientos de materias
anteriores como lo es base de datos, entre otras, además de tener más en
claro como se debe de realizar la documentación para poder llevar a cabo el
desarrollo del proyecto.

Sergio Armando Zarate González

Dentro de la creación de la página web se van a utilizar algunas técnicas que
se han ido aprendiendo a lo largo de nuestra formación como ISC´s, y otras
técnicas que se van a aprender con la creación de la página, que es esto lo que
se pretende. Para la creación de dicha página se pretende que sea de un gran
éxito y de gran utilidad para el usuario, se tiene en cuenta que la creación de
nuestra página va hacer un proceso algo complicado y de un enorme grado de
instrucción y aprendizaje.

Que Deportes Web Página 17