INSTITUTO TECNOLOGICO

SUPERIOR DE RIOVERDE

MATERIA:
Programación web
TRABAJO:
NOTICIAS RNI

CATEDRÁTICO:
I.S.C. Bernardo Martínez Santiago
NOMBRE DE LOS INTEGRANTES:
Vanessa Martínez Elías
vane_hugo2@hotmail.com
Juan Antonio García Arvizu
juan_586@msn.com
Thania Montes Calderón
tatys.0723@hotmail.com

CARRERA:
Ing. en Sistemas Computacionales
SEMESTRE:
Séptimo semestre
FECHA DE REALIZACIÓN:
08 de octubre del 2010
2
Tabla de conto
ARQUITECTURA EN LA QUE SE DESARROLLARA.................................... 2
Arquitectura de 3 capas ....................................................................... 2
Lenguaje PHP ....................................................................................... 4
Sintaxis: ............................................................................................. 4
LENGUAJE DE LADO DEL SERVIDOR ..................................................... 5
Lenguaje HTML ..................................................................................... 5
Sintaxis: ............................................................................................. 5
HERRAMIENTAS DE DESARROLLO ......................................................... 6
MySQL:.................................................................................................. 6
Herramientas PHP ................................................................................ 7
Diseño y maquetación ......................................................................... 7
Maquetación ....................................................................................... 7
Maquetación, Programación cliente ..................................................... 7
Prueba local ........................................................................................ 7
Pruebas en local, depuración .............................................................. 8
NetBeans ............................................................................................ 8
WampServer ....................................................................................... 8
Dreamweaver ...................................................................................... 9
METODOLOGIAS QUE SE EMPLEARA.................................................... 10
Tipos y Roles de Usuarios ................................................................ 10
Administrador ................................................................................... 10
Clientes ............................................................................................ 10
Diseño de Interfaz .............................................................................. 11
Diseño de Navegación ........................................................................ 15
Diagramas de Caso – Uso................................................................... 18
ESQUEMA DE SEGURIDAD ................................................................... 19
SSL...................................................................................................... 19
CONCLUSIONES .................................................................................... 21
Programación Web

ARQUITECTURA EN LA QUE SE DESARROLLARA

Arquitectura de 3 capas

Elegimos la arquitectura de tres capas por que la arquitectura más

conveniente para nuestro proyecto ya que cada capa es un proceso
separado y bien definido corriendo en plataformas separadas. En la
arquitectura tradicional de tres capas se instala una interfaz de usuario en
la computadora del usuario final (el cliente). La arquitectura basada en
Web transforma la interfaz de búsqueda existente (el explorador de Web),
en la interfaz del usuario final.

En qué consiste cada capa:

1. Capa de presentación: es la que ve el usuario, presenta el sistema al
usuario, le comunica la información y captura la información del usuario
dando un mínimo de proceso (realiza un filtrado previo para comprobar
que no hay errores de formato).
Esta capa se comunica únicamente con la capa de negocio.
2. Capa de negocio: es donde residen los programas que se ejecutan,
recibiendo las peticiones del usuario y enviando las respuestas tras el
proceso. Se denomina capa de negocio (e incluso de lógica del negocio)
pues es aquí donde se establecen todas las reglas que deben cumplirse.
Esta capa se comunica con la capa de presentación, para recibir las
solicitudes y presentar los resultados, y con la capa de datos, para solicitar
al sistema administrador de base de datos para almacenar o recuperar
datos.
3. Capa de datos: es donde residen los datos. Está formada por uno o más
sistemas administradores de bases de datos que realiza todo el
almacenamiento de datos, reciben solicitudes de almacenamiento o
recuperación de información desde la capa de negocio.

Porque escogimos a arquitectura de tres capas:

Mayor sencillez de los clientes.
La separación de roles en tres capas, hace más fácil reemplazar o
modificar una capa sin afectar a los módulos restantes.

2
Programación Web

El código de la capa intermedia puede ser reutilizado por múltiples

aplicaciones si está diseñado en formato modular.
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.
No replicación de lógica de negocio en los clientes: esto permite que las
modificaciones y mejoras sean automáticamente aprovechadas por el
conjunto de los usuarios, reduciendo los costes de mantenimiento.

3
Programación Web

LENGUAJE DE LADO DEL SERVIDOR

Lenguaje PHP

Es un lenguaje de programación utilizado para la creación de sitio web.

PHP es un acrónimo recursivo que significa “PHP Hypertext Pre-processor”,
(inicialmente se llamó Personal Home Page). Surgió en 1995, desarrollado
por PHP Group.

PHP es un lenguaje de script interpretado en el lado del servidor utilizado

para la generación de páginas web dinámicas, embebidas en páginas
HTML y ejecutadas en el servidor. PHP no necesita ser compilado para
ejecutarse. Para su funcionamiento necesita tener instalado Apache o IIS
con las librerías de PHP. La mayor parte de su sintaxis ha sido tomada de
C, Java y Perl con algunas características específicas. Los archivos
cuentan con la extensión (php).

Sintaxis:
La sintaxis utilizada para incorporar código PHP es la siguiente:
<?
$mensaje = “Hola”;
echo $mensaje;
?>

También puede usarse:

<?php
$mensaje = “Hola”;
echo $mensaje;
?>

PHP está diseñado específicamente para ser un lenguaje más seguro para
escribir programas CGI que Perl o C, y con la selección correcta de
opciones de configuración en tiempos de compilación y ejecución, y
siguiendo algunas prácticas correctas de programación.
El lenguaje al lado del servidor que se eligió es PHP por que el trabajo que
realiza es comprensible por parte de todo tipo de usuarios y lo realiza de
la mano de HTML. La ejecución e interpretación la realiza el servidor
atendiendo a las peticiones realizadas mediante comandos por parte del
cliente y obtiene las diferentes páginas Web dependiendo de las órdenes
que se proporcionen. La seguridad con la que cuenta este servidor para
realizar las diferentes consultas a diferentes archivos. Además la

4
Programación Web

capacidad del servidor para tener acceso a las diferentes conexiones de

red.

LENGUAJE DE LADO DEL SERVIDOR

Lenguaje HTML

Desde el surgimiento de internet se han publicado sitios web gracias al

lenguaje HTML. Es un lenguaje estático para el desarrollo de sitios web
(acrónimo en inglés de HyperText Markup Language, en español Lenguaje
de Marcas Hipertextuales). Desarrollado por el World Wide Web
Consortium (W3C). Los archivos pueden tener las extensiones (htm, html).

Sintaxis:

<html> (Inicio del documento HTML)

<head>
( Cabecera )
</head>
<body>
( Cuerpo )
</body>
</html>

<b> </b> Negrita

<p> </p> Definir parrafo
<etiqueta> Apertura de la etiqueta
</etiqueta> Cierre de la etiqueta

Se eligió el lenguaje al lado de cliente HTML, este lenguaje permitirá que el

usuario pueda acceda a los diferentes menús diseñados en la pagina. Este
lenguaje es sencillo de utilizar, además el texto se presenta de forma
estructurada y muestra el despliegue de manera rápida.

5
Programación Web

HERRAMIENTAS DE DESARROLLO

MySQL:

MySQL es muy utilizado en aplicaciones web, como Drupal o phpBB, en

plataformas (Linux/Windows-Apache-MySQL-PHP/Perl/Python), y por
herramientas de seguimiento de errores como Bugzilla. Su popularidad
como aplicación web está muy ligada a PHP, que a menudo 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
monitoreos sobre el desempeño para detectar y corregir errores tanto de
SQL como de programación.

Algunas Características:

 Soporte para SSL

 Usa GNU Automake, Autoconf, y Libtool para portabilidad
 Uso de multihilos mediante hilos del kernel.
 Usa tablas en disco b-tree para búsquedas rápidas con compresión
de índice
 Tablas hash en memoria temporales
 El código MySQL se prueba con Purify (un detector de memoria
perdida comercial) así como con Valgrind, una herramienta GPL
 Completo soporte para operadores y funciones en cláusulas select y
where.
 Completo soporte para cláusulas group by y order by, soporte de
funciones de agrupación
 Seguridad: ofrece un sistema de contraseñas y privilegios seguro
mediante verificación basada en el host y el tráfico de contraseñas
está cifrado al conectarse a un servidor.
 Soporta gran cantidad de datos. MySQL Server tiene bases de datos
de hasta 50 millones de registros.
 Se permiten hasta 64 índices por tabla (32 antes de MySQL 4.1.2).
Cada índice puede consistir desde 1 hasta 16 columnas o partes de
columnas. El máximo ancho de límite son 1000 bytes (500 antes de
MySQL 4.1.2).
6
Programación Web

 Los clientes se conectan al servidor MySQL usando sockets TCP/IP

en cualquier plataforma. En sistemas Windows se pueden conectar
usando named pipes y en sistemas Unix usando ficheros socket
Unix.
 En MySQL 5.0, los clientes y servidores Windows se pueden conectar
usando memoria compartida.
 MySQL contiene su propio paquete de pruebas de rendimiento
proporcionado con el código fuente de la distribución de MySQL.

Se utilizara para guardar la información de las páginas, lo elegimos porque

un lenguaje del que tenemos un mejor conocimiento y por su capacidad
para guardar información.

Herramientas PHP

Diseño y maquetación
GIMP: Es el equivalente de software libre más próximo a Photoshop. Al ser
libre es posible conseguirlo gratuitamente, y de hecho cualquier
distribución GNU/Linux lo incluye. Al igual que en Photoshop, con él
podremos crear el diseño y las imágenes de la maquetación HTML.
También disponible en Windows

Maquetación
Inkscape: El equivalente en Windows es Adobe Fireworks. Es un excelente
editor gráfico vectorial con el que poder crear iconos, banners, y demás
dibujos de forma muy fácil y sencilla, incluso para aquellos que no tengan
demasiados conocimientos en edición gráfica digital, es gratis y se puede
utilizar en software libre.

Maquetación, Programación cliente

Dreamweaver, Aptana, Amaya: Con ellos crearemos el código HTML/CSS
(maquetación), siendo Aptana la opción más profesional para la
programación cliente (Javascript).

Prueba local
Apache Instalar un servidor web Apache en la máquina donde
desarrollamos es fundamental. De esta manera haremos pruebas
rápidamente: editamos un fichero PHP, vamos al navegador, actualizamos,
y vemos los cambios.

7
Programación Web

Pruebas en local, depuración

Firefox / Firebug / Web Developer Extension: Firefox es sin duda la mejor
herramienta creada en los últimos tiempos para los desarrolladores web, y
con Firefox sus dos extensiones más útiles para nuestra profesión: Firebug
y Web Developer.

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.

La plataforma ofrece servicios comunes a las aplicaciones de escritorio,

permitiéndole al desarrollador enfocarse en la lógica específica de su
aplicación. Entre las características de la plataforma están:

 Administración de las interfaces de usuario (ej. menús y barras de

herramientas)
 Administración de las configuraciones del usuario
 Administración del almacenamiento (guardando y cargando
cualquier tipo de dato)
 Administración de ventanas
 Framework basado en asistentes (diálogos paso a paso)

NetBeans 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.

Nosotros decidimos utilizar el Lenguaje de programación PHP por que de

acuerdo a sus herramientas nos ofrece muchos beneficios, facilidad, y
tiene muchas herramientas que podemos utilizar en la elaboración de
nuestra pagina ya que la mayoría son económicos.

WampServer
WAMP es el acrónimo usado para describir un sistema de infraestructura
de internet que usa las siguientes herramientas:

8
Programación Web

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. LAMP es el
sistema análogo que corre bajo ambiente Linux.

En nuestra opinión hemos elegido el wampserver por que es una

herramienta que nos brinda la facilidad de tener Php, MySql, Apache, las
cuales utilizáremos en nuestro proyecto y que mejor que tener todo en un
solo paquete.

Dreamweaver
Dreamweaver es la herramienta de diseño de páginas web más avanzada,
tal como se ha afirmado en muchos medios. 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...

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.

Lo elegimos porque es muy fácil de realizar páginas web ya que nos

proporciona las herramientas que necesitamos para crear nuestra página
fácilmente sin necesidad de escribir mucho código, nos dice que html será
su formato a usar por esta razón se nos hizo más conveniente ya que
conocemos el manejo de html.

9
Programación Web

METODOLOGIAS QUE SE EMPLEARA

Tipos y Roles de Usuarios

Administrador

El rol del administrador será diseñar la página que sea agradable para el
cliente, subir información y actualizar la pagina para que se encuentre a
la orden del día. Realizar el mantenimiento de la página y negar el
permiso para modificar, alterar o dañar información que se proporcione al
cliente, el administrador tendrá que buscar las noticias que subirá a la
pagina diariamente, la pagina se actualizara a la 01:00 am para que los
clientes puedan ver las noticias a primera hora.

Clientes

El rol del cliente simplemente será acceder a la página sin realizar ningún
registro podrá ver las noticias más importantes, ya sean regionales,
nacionales e internacionales, y publicidad, y la selección que realice será
de acuerdo a su preferencia, los clientes no podrán hacer ninguna
modificación en la pagina.

10
Programación Web

Diseño de Interfaz
Página principal

LOGO TITULO DE LA PAGINA FECHA

SECCIONES: NOTICIA DEL DIA NOTICIAS

REGIONAL SOBRESALIENT
ES
NACIONAL

INTERNACIONAL ENTRETENIMIENTO

HISTORIAL: NOTICIAS DE PUBLICDAD

OTROS DIAS

Pagina de noticias regionales (principal)

LOGO FECHA
NOTICIAS REGIONALES
RRRRRREREGIONALESRE
PRINCIPAL GIONALES INTERNACIONAL
NACIONAL

Municipios NOTICIAS
Rioverde SOBRESALIENTES
NOTICIAS REGIONALES DE DIA
Cd. Ferdz
San ciro
Cardenas
PUBLICIDAD

11
Programación Web

Página regional Nº 1 (Rioverde)

LOGO NOTICIAS REGIONALES FECHA

(RIOVERDE)

PRINCIPAL NACIONAL INTERNACIONAL

Municipios NOTICIAS
Rioverde SOBRESALIENTES
NOTICIAS REGIONALES DE DIA
Cd. Ferdz
(RIOVERDE)
San ciro
Cardenas
PUBLICIDAD

Página regional Nº 2 (Cd. Fernández)

LOGO NOTICIAS REGIONALES FECHA

(CD. FERNANDEZ)

PRINCIPAL NACIONAL INTERNACIONAL

Municipios NOTICIAS
Rioverde SOBRESALIENTES
NOTICIAS REGIONALES DE DIA
Cd. Ferdz
(CD. FERNANADEZ)
San ciro
Cardenas
PUBLICIDAD

12
Programación Web

Página regional Nº3 (San Ciro)

LOGO NOTICIAS REGIONALES FECHA

(SAN CIRO)

PRINCIPAL NACIONAL INTERNACIONAL

Municipios NOTICIAS
Rioverde SOBRESALIENTES
NOTICIAS REGIONALES DE DIA
Cd. Ferdz
(SAN CIRO)
San ciro
Cardenas
PUBLICIDAD

Página regional Nº4 (Cárdenas)

LOGO NOTICIAS REGIONALES FECHA

(CARDENAS)

PRINCIPAL NACIONAL INTERNACIONAL

Municipios NOTICIAS
Rioverde SOBRESALIENTES
NOTICIAS REGIONALES DE DIA
Cd. Ferdz
(CARDENAS)
San ciro
Cardenas
PUBLICIDAD

13
Programación Web

Página nacionales

LOGO FECHA
NOTICIAS NACIONALES
RRRRRREREGIONALESRE
PRINCIPAL GIONALES
REGIONALES INTERNACIONAL DEPORTES

NOTICIAS
SOBRESALIENTES
NOTICIAS NACIONALES DE DIA

PUBLICIDAD

Página internacional

LOGO FECHA
NOTICIAS INTERNACIONELES
RRRRRREREGIONALESREGIONAL
PRINCIPAL ES NACIONAL
REGIONALES DEPORTES

NOTICIAS
SOBRESALIENTES
NOTICIAS INTERNACIONALES DE DIA

PUBLICIDAD

14
Programación Web

Diseño de Navegación

Página principal Página de noticias regionales (principal)

Página de noticias regionales (principal) Página regional Nº 1

Página de noticias regionales (principal) Página regional Nº 2

15
Programación Web

Página de noticias regionales (principal) Página regional Nº 3

Página de noticias regionales (principal) Página regional Nº 4

Página principal Página de noticias nacionales

16
Programación Web

Página principal Página de noticias internacionales

17
Programación Web

Diagramas de Caso – Uso

18
Programación Web

ESQUEMA DE SEGURIDAD

SSL

El esquema de seguridad que escogimos fue Protocolo SSL (Secure Socket

Layer) es un sistema de seguridad desarrollado Netscape y utilizado
actualmente por la mayoría de empresas que comercian a través de
Internet. El SSL proporciona autenticación y privacidad de la información
entre extremos sobre Internet mediante el uso de criptografía.
Habitualmente, sólo el servidor es autenticado (es decir, se garantiza su
identidad) mientras que el cliente se mantiene sin autenticar; la
autenticación mutua requiere un despliegue de infraestructura de claves
públicas (o PKI) para los clientes. Los protocolos permiten a las
aplicaciones cliente-servidor comunicarse de una forma diseñada para
prevenir escuchas (eavesdropping), la falsificación de la identidad del
remitente (phishing) y alterar la integridad del mensaje..

Es un sistema de seguridad ideado para acceder a un servidor

garantizando la confidencialidad de los datos mediante técnicas de
encriptación modernas. Una de las razones por la que escogimos SSL es
por tiene las siguientes características:

Confidencialidad: Mediante el uso de la Encriptación se garantiza que los

datos enviados y recibidos no podrán ser interpretados ninguna otra
persona que no sea ni el emisor ni el receptor.

Integridad: Se garantiza que los datos recibidos son exactamente iguales a

los datos enviados, pero no se impide que al receptor la posibilidad de
modificar estos datos una vez recibidos.

Autentificación: El vendedor se autentifica utilizando un Certificado

Digital emitido por una empresa llamada Autoridad Certificadora, este
documento es totalmente infalsificable y garantiza que el Vendedor es
quien dice ser.

Otra de las razones por la que lo elegimos fueron sus objetivos que son, en
orden de prioridad:

19
Programación Web

Seguridad Criptográfica. Debe ser usado para establecer una conexión

segura entre dos partes.

Interoperatividad. Programadores independientes deben poder desarrollar

aplicaciones que, utilizando SSL, permitan intercambiar en forma exitosa
parámetros de cifrado sin tener conocimiento del código utilizado por el
otro.

Flexibilidad. Debe ser una base sobre la cual puedan incorporarse nuevos
métodos de cifrado. Esto trae aparejado dos objetivos más: evitar la
creación de un protocolo nuevo y la implementación de una nueva
biblioteca de seguridad

Eficiencia. Dado que las operaciones de cifrado consumen gran cantidad

de recursos, en especial CPU, incorpora ciertas facilidades que permiten
mejorar este aspecto, además de mejorar el uso de la red.

20
Programación Web

CONCLUSIONES

Juan Antonio García Arvizu

Este proyecto me ha ayudado mucho para aprender a diseñar una página

web así como también se aprendió las diferentes formas de cómo se puede
hacer una página web, no es tan simple como parece se tiene que hacer
un análisis de todo lo requerido, sobre todo estar bien definido en cuanto
a tu pagina saber lo que quieres para analizar que diseño, arquitectura,
lenguajes de programación vas a aplicar tanto del lado del cliente como del
servidor y sobre todo la seguridad que se le va a poner a la pagina también
se tiene que tomar en cuenta acerca de la base de datos con la cual se
trabajara y cuál es la más conveniente para implementar.

Thania Montes Calderón

Creo que este proyecto será interesante ya que posiblemente en un futuro

nos sea de gran utilidad, en el proyecto utilizamos herramientas php que
nos sean fáciles de utilizar y muy económicas, en la arquitectura elegimos
la de 3 capas ya que esta arquitectura nos brinda mayor beneficio ya que
con esta arquitectura la pagina se actualizara más rápidamente. Espero
podamos poner en práctica la investigación que se realizo.

Vanessa Martínez Elías

En la elaboración del proyecto “NOTICIAS RNI” la búsqueda de la

información acerca de cómo realizar la programación de una página Web
me ha permitido explorar por las distintas formas en que se puede
realizar, y conocer todos los elementos que podemos agregar para permitir
el acceso a esta dejándome un conocimiento concreto de la realización de
la pagina. Comprendí los lenguajes para la realización de nuestra página y
los que se eligieron necesitan un enlace de los mismos para interpretar
los diferentes comandos y no se deben de eliminar por el contrario
tendremos problemas a la hora de poner en marcha la ejecución además
podemos realizar diferentes navegaciones por varias páginas. Para que los
clientes puedan ver la página realizamos el diseño y presentación de esta
para permitir al cliente entrar y seleccionar las diferentes noticias en
diferentes secciones y manejamos la seguridad para que se proporcione
un servicio satisfactorio al cliente y como ingenieros debemos aplicar
siempre este concepto en la programación de cualquier proyecto.

21