proyecto web
TRANSCRIPT
2
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 [email protected]
Juan Antonio García Arvizu [email protected]
Thania Montes Calderón
CARRERA:
Ing. en Sistemas Computacionales
SEMESTRE:
Séptimo semestre
FECHA DE REALIZACIÓN:
08 de octubre del 2010
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
2
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.
Programación Web
3
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.
Programación Web
4
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
Programación Web
5
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.
Programación Web
6
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).
Programación Web
7
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.
Programación Web
8
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:
Programación Web
9
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.
Programación Web
10
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.
Programación Web
11
Diseño de Interfaz
Página principal
Pagina de noticias regionales (principal)
LOGO TITULO DE LA PAGINA FECHA
SECCIONES:
REGIONAL
NACIONAL
INTERNACIONAL
NOTICIA DEL DIA
NOTICIAS
SOBRESALIENT
ES
PUBLICDAD
HISTORIAL: NOTICIAS DE
OTROS DIAS
ENTRETENIMIENTO
LOGO
PRINCIPAL NACIONAL INTERNACIONAL
NOTICIAS REGIONALES
RRRRRREREGIONALESRE
GIONALES
FECHA
NOTICIAS REGIONALES DE DIA
NOTICIAS
SOBRESALIENTES
PUBLICIDAD
Municipios
Rioverde
Cd. Ferdz
San ciro
Cardenas
Programación Web
12
Página regional Nº 1 (Rioverde)
Página regional Nº 2 (Cd. Fernández)
LOGO
PRINCIPAL NACIONAL INTERNACIONAL
NOTICIAS REGIONALES
(RIOVERDE) FECHA
NOTICIAS REGIONALES DE DIA
(RIOVERDE)
NOTICIAS
SOBRESALIENTES
PUBLICIDAD
Municipios
Rioverde
Cd. Ferdz
San ciro
Cardenas
NOTICIAS REGIONALES DE DIA
(CD. FERNANADEZ)
LOGO
PRINCIPAL NACIONAL INTERNACIONAL
NOTICIAS REGIONALES
(CD. FERNANDEZ) FECHA
NOTICIAS
SOBRESALIENTES
PUBLICIDAD
Municipios
Rioverde
Cd. Ferdz
San ciro
Cardenas
Programación Web
13
Página regional Nº3 (San Ciro)
Página regional Nº4 (Cárdenas)
LOGO
PRINCIPAL NACIONAL INTERNACIONAL
FECHA
NOTICIAS REGIONALES DE DIA
(CARDENAS)
NOTICIAS
SOBRESALIENTES
PUBLICIDAD
Municipios
Rioverde
Cd. Ferdz
San ciro
Cardenas
NOTICIAS REGIONALES
(CARDENAS)
LOGO
PRINCIPAL NACIONAL INTERNACIONAL
NOTICIAS REGIONALES
(SAN CIRO) FECHA
NOTICIAS REGIONALES DE DIA
(SAN CIRO)
NOTICIAS
SOBRESALIENTES
PUBLICIDAD
Municipios
Rioverde
Cd. Ferdz
San ciro
Cardenas
Programación Web
14
Página nacionales
Página internacional
LOGO
PRINCIPAL REGIONALES NACIONAL DEPORTES
NOTICIAS INTERNACIONELES
RRRRRREREGIONALESREGIONAL
ES
FECHA
NOTICIAS INTERNACIONALES DE DIA
NOTICIAS
SOBRESALIENTES
PUBLICIDAD
LOGO
PRINCIPAL REGIONALES INTERNACIONAL DEPORTES
NOTICIAS NACIONALES
RRRRRREREGIONALESRE
GIONALES
FECHA
NOTICIAS NACIONALES DE DIA
NOTICIAS
SOBRESALIENTES
PUBLICIDAD
Programación Web
15
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
Programación Web
16
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
Programación Web
17
Página principal Página de noticias internacionales
Programación Web
18
Diagramas de Caso – Uso
Programación Web
19
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:
Programación Web
20
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.
Programación Web
21
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.