instituto politÉcnico nacional · 1 sitio web dinamico para la . academia de computacion de esime...
TRANSCRIPT
1
SITIO WEB DINAMICO PARA LA
ACADEMIA DE COMPUTACION DE ESIME ZACATENCO
T É S I S
Q U E P A R A O B T E N E R E L T Í T U L O D E:
Ingeniero en Comunicaciones y Electrónica
P R E S E N T A N
Alejandro Galindo Hernández
Pedro Edson Alcalá Garrido
Jerónimo Ciriaco Castellanos
ASESORES
Catalina Patiño Gallegos
MÉXICO, D.F.
INSTITUTO POLITÉCNICO NACIONAL
ESCUELA SUPERIOR DE INGENIERÍA
MECÁNICA Y ELÉCTRICA
2
Objetivo General: Desarrollar un Sitio web dinámico para la academia de computación de ESIME Zacatenco Objetivos Particulares:
Diseñar un Sitio web dinámico que contendrá información general de la Academia de Computación de ESIME Zacatenco como son eventos, noticias, cursos entre otros.
Desarrollar un Sitio web qué permita a los profesores publicar material didáctico en distintos formatos (pdf, doc, ppt).
Diseñar la propuesta de implementación del sitio web para la Academia de Computación de ESIME Zacatenco.
3
INDICE Páginas
INTRODUCCIÓN ........................................................................................................................ 10
CAPITULO 1: MARCO TEÓRICO
1.1 La Web 2.0............................................................................................................ 12
1.2 Sitio Web .............................................................................................................. 13
1.3 HTML .................................................................................................................... 14
1.4 CSS ....................................................................................................................... 15
1.5 JavaScript ............................................................................................................ 16
1.6 XML...................................................................................................................... 16
1.7 XSLT ..................................................................................................................... 17
1.8 Bases de Datos .................................................................................................... 17
1.9 Navegadores Web ............................................................................................... 18
1.10 Servidores Web ................................................................................................. 19
1.10.1 IIS ................................................................................................................. 20
1.10.2 Apache ......................................................................................................... 20
1.11 Herramientas de Trabajo ................................................................................... 21
1.11.1 Firebug ......................................................................................................... 21
1.11.2 Visual Studio ................................................................................................. 21
1.11.3 Sistema Administrador de Contenidos .......................................................... 23
1.11.4 MWPSK ........................................................................................................ 25
1.11.5 Módulos ........................................................................................................ 26
4
CAPÍTULO 2 : ANÁLISIS DE LA SITUACIÓN ACTUAL
2.1 Situación Actual ................................................................................................. 27
2.2 Beneficios ........................................................................................................... 31
2.3 Requerimientos .................................................................................................. 31
2.4 Normatividad ...................................................................................................... 32
CAPÍTULO 3: DISEÑO DEL SITIO WEB
3.1 Estructura del Sitio Web ..................................................................................... 33
3.2 Perfiles de Usuarios y Autenticación ................................................................. 37
CAPITULO 4: DESARROLLO DEL SITIO WEB ...................................................................... 38
4.1 Arquitectura de MWPSK ..................................................................................... 38
4.2 Estructura ........................................................................................................... 45
4.3 Apariencia ............................................................................................................ 46
4.4 Controles Personalizados ................................................................................... 49
CAPÍTULO 5: PROPUESTA DE IMPLEMENTACIÓN DEL SITIO WEB .............................. 52 GLOSARIO ..................................................................................................................... 59 CONCLUSION ................................................................................................................. 62 ANEXOS ......................................................................................................................... 63
BIBLIOGRAFÍA ............................................................................................................... 69
5
Índice de Figuras Páginas
FIGURA 1.1. FUNCIONAMIENTO DE HTTP .......................................................................... 13
FIGURA 1.2. ESTRUCTURA DE UN DOCUMENTO HTML ................................................... 14
FIGURA 1.3. HTML SIN CSS .................................................................................................. 15
FIGURA 1.4. HTML CON CSS ................................................................................................ 15
FIGURA 1.5. DIFERENCIAS ENTRE HTML Y XML ............................................................... 16
FIGURA 1.6. NAVEGADORES MÁS USADOS EN EL MUNDO ............................................ 19
FIGURA 1.7. VISUAL STUDIO 2010 ....................................................................................... 22
FIGURA 1.8. EXPLORADOR DE SOLUCIONES DE VISUAL STUDIO ................................. 23
FIGURA 1.9. ALGUNAS CARACTERÍSTICAS DE CMS ........................................................ 25
FIGURA 1.10. MY WEB PAGE STARTED KIT ......................................................................... 26
FIGURA 2.1. SITIO WEB ACTUAL DE LA ACADEMIA DE COMPUTACIÓN ........................ 28
FIGURA 2.2. MAPA DEL SITIO WEB ACTUAL DE LA ACADEMIA DE COMPUTACIÓN ... 30
FIGURA 3.1. ESTRUCTURA DEL SITIO WEB ....................................................................... 33
FIGURA 3.2. ELEMENTOS A MOSTRAR EN LAS DISTINTAS ÁREAS DEL SITIO WEB ... 34
FIGURA 4.1. ARQUITECTURA MY WEB PAGE STARTED KIT. .......................................... 32
FIGURA 4.2. CARPETA ADMINISTRATION .......................................................................... 32
FIGURA 4.3. VISTA ADMINISTRADOR .................................................................................. 32
FIGURA 4.4. GESTIÓN DE PÁGINAS Y NAVEGACIÓN ....................................................... 32
FIGURA 4.5. GESTIÓN DE USUARIOS ................................................................................. 32
6
FIGURA 4.6. CARPETA APP_CODE ...................................................................................... 32
FIGURA 4.7. CONTROLS, PROVIDERS Y SECTIONS ......................................................... 32
FIGURA 4.8. CARPETA APP_DATA ....................................................................................... 32
FIGURA 4.9. CARPETAS DE CONTROLES .......................................................................... 32
FIGURA 4.10. CONTROLES EN TIEMPO DE EJECUCIÓN .................................................. 32
FIGURA 4.11. CONTROLES EASY CONTROL ...................................................................... 32
FIGURA 4.12. THEMES ........................................................................................................... 32
FIGURA 4.13. ATRIBUTOS CSS ............................................................................................ 32
FIGURA 4.14. SITIO WEB ACADEMIA DE COMPUTACIÓN................................................. 32
FIGURA 4.15. AGREGAR NUEVO ELEMENTO ..................................................................... 32
FIGURA 4.16. AGREGAR CONTROL PERSONALIZADO ..................................................... 32
FIGURA 4.17. CONTROL AGREGADO .................................................................................. 32
FIGURA 4.18. EDICIÓN DEL CONTROL PERSONALIZADO ................................................ 32
FIGURA 4.19. CONTROL EN EL SITIO WEB ......................................................................... 32
FIGURA 4.20. CONTROL AGREGADO EN EL SITIO WEB ................................................... 32
FIGURA 5.1 CONFIGURACIÓN DE SERVICIOS .................................................................... 53
FIGURA 5.2 SELECCIÓN DE CARACTERISTICAS DEL SERVIDOR ................................... 53
FIGURA 5.3 SELECCIÓN DE SERVICIOS FTP Y SMTP ....................................................... 54
FIGURA 5.4 ALTA DEL SITIO WEB EN EL IIS PASO 1 ......................................................... 55
FIGURA 5.5 ALTA DEL SITIO WEB EN EL IIS PASO 2 .......................................................... 55
FIGURA 5.6 ALTA DEL SITIO WEB EN EL IIS PASO 3 .......................................................... 56
7
FIGURA 5.7 ALTA DEL SITIO WEB EN EL IIS PASO 4 ......................................................... 56
FIGURA 5.8 DESCRIPCIÓN DEL SITIO WEB ........................................................................ 57
FIGURA 5.9 DIRECCIÓN IP Y CONFIGURACION DEL PUERTO ........................................ 57
FIGURA 5.10 DIRECTORIO PARTICULAR DEL SITIO WEB ................................................ 58
FIGURA 5.11 PERMISO DE ACCESOS AL SITIO WEB ......................................................... 58
FIGURA 5.12 ALTA DEL SITIO WEB CONCLUIDA ................................................................ 59
FIGURA 6.1. TABLA DE COLORES WEB INSTITUCIONAL ................................................. 40
FIGURA 6.2. RECOMENDACIONES DE USABILIDAD ......................................................... 42
FIGURA 6.3. ESTRUCTURA DEL PORTAL WEB INSTITUCIONAL ..................................... 44
8
Justificación:
Se realizó el análisis de la estructura del sitio web con el que actualmente cuenta
la Academia de Computación de ESIME Zacatenco, se encontraron algunos
puntos importantes:
No se encuentra actualizada
Los contenidos se encuentran desorganizados
El acceso a contenidos es una tarea tediosa que genera falta de interés por
parte de los usuarios y a su vez causa que no vuelvan a visitar el sitio web
Se ha vuelto obsoleta
No existe una forma de contactar a los alumnos egresados
No hay forma de comunicarse con profesores
No hay manera de conocer los proyectos actuales de titulación
Por estas razones, se considera que es importante que la academia de
computación cuente con un sitio web actualizado y que sea de fácil administración,
esto quiere decir que no se necesitará de un web master para la actualización del
mismo, ya que el sistema se hará cargo de todos los procesos.
9
Resumen
La Academia de Computación de ESIME Zacatenco será la primera especialidad
de este plantel en contar con un sitio web dinámico y de fácil administración, a fin
de que cualquier usuario, sin importar si tenga conocimientos de diseño o
programación, pueda gestionar el sitio web. Para ello, a través de una interfaz
gráfica, el sistema se encargará de gestionar todos los procesos técnicos como
por ejemplo:
La actualización de la imagen principal.
Modificación y actualización de usuarios.
Modificación de aspectos visuales al sitio web.
Creación de páginas.
Manipulación de la navegación a través del sitio web.
Publicación de noticias, eventos.
En el presente proyecto se propone la administración del sitio web usando un
sistema administrador de contenidos (CMS, Content Management System) con el
objetivo de que cualquier usuario que cuente con los permisos requeridos pueda
realizar cambios en el sitio web.
10
Introducción
El presente trabajo describe el desarrollo del sitio web dinámico para la Academia
de Computación de ESIME Zacatenco, que derivado del análisis y la investigación
se desarrollará mediante un Sistema de Administración de Contenidos, el cual
permitirá publicar información en el sitio web de manera fácil, rápida y sencilla, sin
que los conocimientos de programación o diseño de páginas representen un
obstáculo para su acceso, ya que el sistema gestionará las solicitudes requeridas.
Se ha dividido el trabajo en 5 capítulos que describirán cada una de las etapas.
En el capítulo 1, “Marco Teórico”, se tratarán los conceptos básicos relacionados
con el desarrollo de un Sitio web.
En el capítulo 2, “Análisis de la Situación Actual”, se enfocará a conocer las
condiciones en las que se encuentra el actual sitio web con el que cuenta la
Academia de Computación.
En el capítulo 3, “Diseño del Sitio Web”, se definirán las herramientas elegidas
para desarrollar el sitio web.
En el capítulo 4, “Desarrollo del Sitio”, se detallará la forma en que se realizó la
integración de todas las tecnologías empleadas para el desarrollo.
En el capítulo 5, “Implementación y Puesta en marcha del Sitio”, se describirá el
proceso que debe seguirse para la instalación y puesta en marcha del Sitio web.
11
Capítulo 1: Marco Teórico
“Hace algunos años, a inicios de la década de los 90”1 surgió la necesidad de
compartir información entre distintas personas situadas en lugares diferentes, de
esta forma nació lo que hoy conocemos como la World Wide Web. La cual se basa
en HTML, que es un lenguaje de marcas de hipertexto que sirve para dar formato
a los documentos que los navegadores entienden.
Por aquellos años las interfaces gráficas eran muy simples, una página de HTML
constaba solamente de hipervínculos y texto, pero en la actualidad los sitios web
se han convertido en verdaderas obras de diseño, ahora podemos ver:
Gráficos
Multimedia
Ingeniería software
Integración de base de datos
Servicios online
Buscadores
Widgets
Encuestas
Libro de Visitas
RSS
De esta forma nace el concepto de la nueva web, la Web 2.0, que en forma simple
cambia el paradigma de los sitios web, ya no se limita a mostrar información,
ahora los sitios web están destinados a los usuarios, y es el usuario final partícipe
y productor del sitio web.
A continuación se verá con más detalle este concepto.
1 Firtman, Maximiliano. Ajax Web 2.0 con Jquery para Profesionales 2da Edición. Buenos Aires: Alfaomega
Grupo Editor Argentino pp.1
12
1.1 La web 2.0
“El término Web 2.0 define un conjunto de principios y prácticas para los sitios
web, para que un sitio web pueda ser llamado Web 2.0 debería:”2
Permitir a los usuarios controlar los datos presentados en el sitio web.
Habilitar servicios para ser utilizados por los usuarios.
Permitir la incorporación de tecnologías como Ajax, Flash, Jquery y
Silverlight.
La interacción con los usuarios permitiéndoles contribuir al contenido del
sitio.
Experiencia enriquecedora del usuario.
No obstante es importante aclarar que NO ES un Sitio web 2.0.
No es Internet
No es un nuevo lenguaje de programación
No es un cambio de tecnología
No es Ajax
No es RSS
No son blogs
La web 2.0 funciona sobre internet, y sigue utilizando las tecnologías existentes
como HTML, HTPP, JavaScript, CSS, entre otros, pero no se trata de una nueva
tecnología.
Se han mencionado conceptos como sitios web, HTML, CSS, JavaScript que son
pieza fundamental en el desarrollo de un sitio web 2.0, y es momento de aclararlos
para conocer como participa cada una en el proceso de construcción de un sitio
web 2.0.
2 Al Zabir, Omar. Building a Web 2.0 Portal with ASP.NET 3.5. 1ra Edición. Editorial O´Reilly pp.4
13
1.2 Sitio Web
Un sitio web es un conjunto de páginas web (documentos en formato HTML)
relacionadas a un dominio de internet que ofrecen información, herramientas y/o
servicios a sus usuarios, éstas son accedidas mediante el protocolo HTTP
(protocolo de transferencia de hipertexto) a través de un navegador web.
El proceso se realiza de esta forma:
1. El cliente es decir el usuario, a través de su computadora por medio de un
navegador web, realiza una petición.
2. Esta viaja al servidor a través de HTTP.
3. El servidor procesa la petición.
4. Finalmente devuelve una respuesta a través de HTPP y es mostrada al
usuario.
La siguiente figura muestra este proceso.
Figura 1.1: Funcionamiento de HTTP. 3
3 MSDN Latinoamérica. Desarrollador 5 Estrellas: Introducción a ASP.NET. Pp.14
14
1.3 HTML
HTML son las siglas de HyperText Markup Language (Lenguaje de Marcado de
Hipertexto), y con él se "escriben" la mayoría de páginas web que existen.
“La W3C, que es una comunidad internacional que desarrolla estándares para la
Web define a HTML como el lenguaje para describir la estructura de los sitios
web”.4
La siguiente figura ilustra la estructura de un documento HTML
Figura 1.2: Estructura de un documento HTML.5
4 W3C, HTML & CSS Standars. Obtenido el 7 de noviembre del 2011 de
http://www.w3.org/standards/webdesign/htmlcss
5 Thomas A. Powell. HTML&CSS: The complete Reference. Editorial McGraw Hill. pp.32
15
1.4 CSS
Ante las limitaciones de HTML para controlar el aspecto o presentación de los
documentos nace CSS.
CSS (Cascading Style Sheets, hojas de estilos en Cascada) nos permitirá separar
la definición de los contenidos y la definición de su aspecto. De esta forma al
diseñar un sitio web primero se utiliza el lenguaje HTML para marcar los
contenidos y posteriormente CSS para definir como se mostraran los elementos
de HTML.
La siguiente imagen ilustra como aparecería en el navegador el documento sin
utilizar CSS.
Figura 1.3: HTML sin CSS.
Ahora como aparecería utilizando CSS.
Figura 1.4 HTML con CSS.
Una de las ventajas de utilizar CSS es que se reduce la complejidad del
mantenimiento de un sitio web.
16
1.5 JavaScript
JavaScript es un lenguaje de programación del lado del cliente que será utilizado
para definir el comportamiento del sitio web, de esta forma será posible incorporar
efectos como texto que aparece y desaparece, animaciones, acciones que se
activan al pulsar botones y ventanas con mensajes de aviso al usuario, entre
otros.
“En la actualidad existen diversas librerías JavaScript por ejemplo Jquery que sirve
para automatizar tareas comunes y para simplificar las complicadas”.6
Por ahora será suficiente mencionarlo, en el capítulo 3 que será el capítulo
enfocado al diseño del sitio web, se profundizará en el tema de esta poderosa
librería que ayudará a enriquecer la experiencia del usuario en su visita al sitio
web.
1.6 XML
“Por su parte XML (eXtensible Markup Languaje) definido por la W3C como un
lenguaje con una importante función en el proceso de intercambio, estructuración
y envío de datos en la web”. 7 Es un lenguaje de marcas como HTML. Sin
embargo existen diferencias entre estos 2 lenguajes de marcas.
La siguiente tabla muestra algunas diferencias.
XML HTML
eXtensible Markup Languaje HyperText Markup Languaje
Diseñado para transportar
datos
Diseñado para mostrar datos
Etiquetas no predefinidas Etiquetas predefinidas
Se enfoca en que son los
datos.
Se enfoca en cómo se ven
los datos
Auto-Descriptivo
Figura 1.5: Diferencias entre HTML y XML.
6 Chafer, Jonathan. Learning Jquery 1.3. 2010. Madrid, España. Editorial Anaya. pp.29
7 Posadas, Marino. Introducción al Lenguaje XML. Madrid, España. Editorial Eidos. pp.9
17
Es importante señalar que XML no es un reemplazo de HTML, al contrario, son
complementos ya que con HTML junto con CSS y JavaScript se pueden crear
ricas interfaces de usuario y usando XML podemos almacenar los datos en
archivos.
1.7 XSLT
Existe una manera de transformar los archivos XML en HTML, esto se logra
usando XSLT.
“XSLT (eXtensible Stylesheet Languaje Transformation) es una recomendación de
la W3C”8 y permite transformar archivos XML a otros formatos como HTML, PDF,
JPEG, entre otros.
1.8 Bases de datos
Una base de datos es una colección de datos relacionados entre sí, que
representan algún aspecto del mundo real.
Una base de datos puede ser útil para administrar el sitio web por ejemplo, con
ayuda de una base de datos se pueden gestionar en un sitio web:
Datos de los usuarios registrados.
Fecha de la última visita de los usuarios.
Fecha de registro de los usuarios.
Datos de perfil de cada usuario.
Historial de los archivos compartidos por los usuarios.
Historial de mensajes publicados por usuarios.
Estas son solo algunas de las bondades que ofrece una base de datos, al permitir
llevar un control ordenado de un sitio web.
Sin embargo para poder llevar a cabo la gestión de la base de datos, es necesario
contar con un Sistema de administración de datos (Database management System
por sus siglas en ingles DBMS), que es una colección de programas que permiten
crear y mantener una base de datos.
8 Tidwell, Doug. XSLT: Mastering XML Transformations. Editorial O´Reilly. pp.7
18
En realidad el DBMS es un sistema de software que facilita los procesos de:
Definición: Definir una base de datos implica especificar los tipos de datos
que se almacenarán en la base de datos.
La construcción de la base de datos es el proceso que consiste en
almacenar los datos en algún medio de almacenamiento controlado por el
DBMS.
La manipulación de una base de datos incluye funciones como:
o Consulta de la base de datos para recuperar datos específicos.
o Actualizar la base de datos para reflejar los cambios realizados y
generar informes a partir de los datos.
Existen muchos DBMS en el mercado solo por mencionar algunos, se encuentran
MySql, Oracle y Microsoft SQL Server.
Es importante señalar que no es la única forma de consultar, actualizar, definir y
construir bases de datos, en el capítulo número 3 se profundizará en el tema de
las bases de datos con XML, que como ya se ha mencionado es un lenguaje de
marcas que sirve para transportar y almacenar datos en archivos, pero “XML se
está convirtiendo en el formato dominante para el intercambio de datos.”9
1.9 Navegadores Web
“Un navegador web(o cliente web) es un software instalado en la computadora de
un usuario final, y proporciona los medios para conectarse a un servidor web y
visualizar las páginas web almacenadas en el servidor.”10
Los navegadores más usados actualmente son:
Internet Explorer
Firefox
Chrome
Safari
Opera
9 Silberschatz, A., Korth, H., Sudarshan, S. Fundamentos de Bases de Datos. 4ta Edición. McGraw Hill pp.228
10 Odom, Wendell. CCENT/CCNA ICND1. 2da Edición. 2008. Madrid, España. Cysco Systems pp.145
19
De acuerdo a las estadísticas del año 2011, se puede ver que Internet Explorer
es el navegador más utilizado en el mundo.
La siguiente figura ilustra las estadísticas.
Figura 1.6: Navegadores más usados en el mundo.11
1.10 Servidores Web
“Por su parte los servidores web consisten en un software de servidor web
ejecutándose en una computadora, estos almacenan información (en forma de
páginas web) que podrían ser útiles a diferentes personas.”12
Los servidores web más utilizados son:
Apache
IIS(Internet Information Services)
11
Global Stats. Top 5 Browsers on 2011. Obtenido el 7 de Noviembre de http://gs.statcounter.com/
12 Odom, Wendell. CCENT/CCNA ICND1. 2da Edición. 2008. Madrid, España. Cysco Systems pp.145
20
1.10.1 IIS
Internet Information Services es un servidor web y un conjunto de servicios para el
sistema operativo Microsoft Windows, provee un conjunto de servicios que corren
sobre plataformas Windows.
Algunos de los servicios que ofrece son: FTP, SMTP y HTTP.
FTP: File Transfer Protocol (Protocolo de Transferencia de Archivos) es un
protocolo de transferencia de archivos vía red y tiene gran fiabilidad.
SMTP: Simple Mail Transfer Protocol (Protocolo Simple de Transferencia de
correo) es un protocolo de red mediante el cual se envían y reciben
mensajes de correo electrónico.
HTTP: Hipertext transfer protocol (protocolo de transferencia de Hipertexto)
define como los navegadores y los servidores Web se comunican uno con
otros. Está basado en texto y es transmitido sobre conexiones TCP
1.10.2 APACHE
Es un servidor de web HTTP entre sus características están:
Código abierto
Multiplataforma (Linux, Microsoft Windows, Macintosh).
Gran cantidad de Documentación
Extensible
Modular
Popular(fácil de conseguir ayuda/soporte)
21
1.11 Herramientas de Trabajo
Se han descrito algunos conceptos básicos que se deben tener claros para poder
realizar el desarrollo de un sitio web. No obstante, es importante definir las
herramientas a utilizar.
1.11.1 Firebug
Firebug es una herramienta para desarrolladores proporcionada por Firefox, esta
herramienta permitirá:
Inspeccionar y editar HTML.
Optimizar los estilos CSS en vivo.
Visualizar métricas CSS (márgenes, bordes, rellenos, etc.).
Explorar errores y darles seguimiento.
Depurar código JavaScript y ejecutar código JavaScript en vivo.
1.11.2 Visual Studio
Visual Studio es un entorno de desarrollo de Microsoft que funciona bajo sistemas
operativos Windows, la versión a utilizar será la 2010.
Entre sus características principales destacan, que tiene soporte para distintos
lenguajes de programación como son:
Visual C#
Visual C++
Visual Basic.NET
“Además de tener compatibilidad con CSS, HTML y XML, posee un nuevo motor
de edición de JavaScript y Ajax.”13 Visual Studio también proporciona:
Explorador de Servidores
o Permite crear y manipular conexiones a bases de datos.
13
Firtman, Maximiliano. Ajax Web 2.0 con Jquery para Profesionales 2da Edición. Buenos Aires: Alfa omega
Grupo Editor Argentino pp.49
22
Cuadro de Herramientas
o Que provee una gran cantidad de controles de servidor.
Servidor Web Integrado
o Llamado Cassini, permite desarrollar sitios web aunque no se tenga
instalado el IIS.
Explorador de soluciones
o Muestra soluciones, proyectos y los elementos incluidos en dichos
proyectos.
Editores y Diseñadores
o Editores de CSS, HTML, editor de código, además de un diseñador
de páginas web.
Herramientas de compilación y depuración.
Figura 1.7: Visual Studio 2010.
23
Figura 1.8: Explorador de Soluciones de Visual Studio.
Por otro lado mantener el sitio web es una tarea que se realizará utilizando un
sistema administrador de contenidos, ya que proveerá de las herramientas
necesarias para lograrlo.
1.11.3 Sistema Administrador de Contenidos
“Un sistema administrador de contenidos (CMS: Content Management System) es
un sistema que maneja el contenido de los componentes de un sitio web.”14
El propósito de utilizar un CMS es tener la capacidad de editar las distintas partes
de un sitio web sin tener conocimientos de programación o de diseño web.
Entre las principales características de un CMS se encuentran:
Una interfaz gráfica que permita:
o Editar, agregar y eliminar páginas a un sitio web.
o Administrar a los usuarios del sitio web.
o Agregar información como noticias, notificaciones y eventos.
14
Fraser, Stephen. Real World ASP.NET. Building a Content Management System. U.S.A. 2002. Editorial
Apress pp.18
24
o Introducir nuevos módulos al sitio web.
o Modificar la apariencia del sitio web.
o Manipular la navegación del sitio web.
Actualmente existen diversos CMS que brindan las características ya
mencionadas, algunos son:
DotNetNuke
Umbraco
MWPSK (My Web Page Started Kit)
Todos los CMS mencionados tienen en común una arquitectura basada en
módulos.
La siguiente tabla muestra algunas características de cada uno.
DotNetNuke Umbraco MWPSK
Licencia Gratis, de código
abierto, existen
versiones de
pago.
Completamente de
Código abierto.
Completamente de
Código abierto.
Flexibilidad Fácil de optmizar. Se puede
modificar todo lo
que se desee.
Se puede
modificar cualquier
parte del sitio.
Apariencia Basado en
temas/skins,
pueden ser
personalizados.
Pocos temas
diseñados
específicamente
para Umbraco
Se pueden para
crear temas
personalizados,
usando CSS,
además permite el
uso de Skins.
Multimedia Incluye módulos
para crear sitios
interactivos, pero
se deben agregar
complementos.
Soporta audio, y
aspectos visuales
a través de su
Sección
multimedia.
Soporta videos,
audios.
25
Foto galerías Módulos de Foto
galerías.
Pueden ser
usadas, necesita
un paquete extra.
Permite la
creación y edición
de foto galerías.
Blog y foros Si Si Si
Multilenguaje Permite agregar
diferentes
paquetes de
idiomas.
Provee
capacidades
multilenguaje,
soporta 15
lenguajes.
Provee todos los
idiomas
existentes.
Núcleo XHTML 1.0 XML ASP.NET 2.0
Soporte Extensa
Comunidad de
miembros DNN.
Una creciente
comunidad.
Extensa
documentación y
soporte.
Figura 1.9: Algunas Características de CMS.
Por otra parte a pesar que el propósito final de estos CMS mencionados es el mismo, es decir administrar los contenidos de un sitio web sin tener conocimientos de programación o de diseño, existen algunas diferencias importantes como se pudo apreciar en la tabla anterior, no obstante DotNetNuke y Umbraco están destinados a usuarios finales, por su parte MWPSK está destinado a desarrolladores, es por ello que se ha elegido esté CMS.
1.11.4 MWPSK
My Web Page Started Kit, es un kit dirigido a desarrolladores web, que permite:
Extender Funcionalidades.
Creación de módulos y controles.
Personalización de Temas.
Configurar servidor de correo.
Editar proveedor de autenticación.
Utilizar diversos proveedores de bases de datos.
Todo bajo un mismo entorno de trabajo: Visual Studio.
26
Figura 1.10: My Web Page Started Kit.
1.11.5 Módulos
My Web Page Started Kit provee dentro de su arquitectura módulos para ser agregados dentro del sitio web, entre los que destacan:
Descargas
Noticias
Eventos
Libro de Visitas
Formulario de Contacto
Editor de Contenido
Lista de Enlaces
Subpáginas
Controles Sencillos Este último proporciona a los desarrolladores la facilidad de crear controles y serán agregados al sitio web para ser accedidos por el administrador del sitio.
27
Capítulo 2: Análisis de la Situación Actual
En este capítulo se abordará la situación actual del sitio web con el que cuenta la
academia de computación de ESIME Zacatenco, además de conocer las normas y
lineamientos a los que debemos sujetarnos para el desarrollo del sitio web.
Como se ha planteado el objetivo final es desarrollar un sitio web que pueda ser
administrado por alguien que no tenga conocimientos de diseño ni de
programación.
La importancia de contar con un sitio web de este tipo radica en el hecho de que
los sitios web normalmente son administrados por un Web master, es decir que se
necesita de una persona que tenga los conocimientos de programación y diseño
para llevar a cabo tareas de actualización y administración del sitio web.
Si se analiza esta situación, se puede concluir que, desde el punto de vista
económico, acarrea grandes pérdidas y costos monetarios, ya que sería necesario
pagar a una persona para que la administre y actualice, de esta forma contar con
un sistema que permita administrar el sitio web a una persona que no tenga
conocimientos de diseño y programación es una prioridad.
Figura 2.1: Sitio web actual de la Academia de Computación.15
15
Tomada de http://azul2.bnct.ipn.mx/c/index.html
28
Actualmente en la academia de computación se cuenta con un sitio web que no ha
sido actualizado desde el año 2006 por lo que se ha vuelto obsoleto, de esta forma
nace este proyecto, ya que surge de la necesidad de que la academia de
computación de ESIME Zacatenco cuente con un Sitio web que pueda ser
administrado de una manera simple y sencilla, es decir que no se requieran
conocimientos de programación ni de diseño. Además de brindar información
actualizada e incrementar la interacción entre profesores, alumnos, y la comunidad
politécnica.
A raíz de lo ya mencionado se inició un análisis del sitio web de la academia, así
los puntos más importantes producto del análisis son:
Hosting actual
El sitio actual se encuentra alojado en un host perteneciente a la
Biblioteca General del IPN y no en un host de la ESIME.
Información Actual
El sitio con el que cuenta la Academia de Computación actualmente
no tiene información actualizada de la academia (organigrama,
horarios, manuales, directorio de profesores, guías de estudio,
programas de asignatura, mapas curriculares, etc.).
Lineamientos Generales
El sitio web con el que cuenta la Academia de Computación
actualmente no cumple con lineamientos generales del manejo del
Sitio Web Institucional, sitios y páginas Web.
Enlaces en el sitio
El sitio web actual contiene links indicados pero no agregados, es
decir no funcionan.
El sitio web actual contiene 67 enlaces a archivos en formato .pdf, 31
archivos de descargas en formatos .pdf y 22 imágenes tipo .gif, pero
sin tener orden y están obsoletos.
Gestión del sitio actual
El sitio web con el que cuenta la Academia de Computación
actualmente no cuenta con un sistema de gestión de usuarios.
Comunicación entre usuarios
29
En el sitio actual de la Academia de Computación no existe forma de
comunicación entre los usuarios.
Perfiles de usuarios (Profesores)
En el sitio actual de la Academia de Computación no hay perfiles de
usuarios, en este caso de profesores, por lo que es imposible tener
un control de cada profesor dentro del sitio, es decir no se puede
saber que documentos han publicado los profesores.
Paralelamente se realizó el mapeo en la estructura del sitio web actual de la
academia, este mapeo se puede observar mejor con la siguiente imagen:
30
http://
azul2.bnct.ipn.m
x/c/index.html
http://
www.esimez.ipn.mx/
Vínculos de Gráfico
(mapa de bits) (3)
http://www.ipn.mx/
http://
azul.bnct.ipn.mx/
Vínculos de Texto
(31)
Vínculos de Hoja de
estilo (4)
Vínculos de
Secuencia de
comandos (cliente)
(6)
Vínculos de Gráfico
(mapa de bits) (3)
http://
azul.bnct.ipn.mx/
busquedas/index.php
http://
azul.bnct.ipn.mx/
menu_principal_prue
ba.phpVínculos de Texto (3)
http://
azul.bnct.ipn.mx/
imagenes/
cartel_chapa1/
index.phphttp://
azul.bnct.ipn.mx/
index.php?pagina=bu
squedas/
arbol_springer.php&ti
tulo_pagina=Libros%
20de%20Springer
http://
ipn.libricentro.com/
http://
www.bibliotechnia.co
m/dispara/ipn.php
http://www.ieee.org/
http://
search.ebscohost.co
m/
http://
gateway.ovid.com/
autologin.cgi
http://
www.nature.com/
nature
http://148.204.48.96/
uhtbin/webcat
http://
librisite.museglobal.c
om/muse/logon/IPN/
http://
saturnino.dgip.uaa.m
x:8331/V/
?func=change-portal-
1&portal-
name=RESBIUC
http://oa-
hermes.unam.mx/
http://
azul.bnct.ipn.mx/
menu_bib_dig.php
http://
azul.bnct.ipn.mx/
index.php?pagina=../
quejas/
index.html&titulo_pag
ina=Quejas%20y%20
sugerencias
http://
azul.bnct.ipn.mx/
index.php
http://www.ipn.mx/
Vínculos de Hoja de estilo (4)
Vínculos de Secuencia de
comandos (cliente) (6)
Vínculos de Gráfico (mapa de
bits) (3)
http://azul.bnct.ipn.mx/
busquedas/index.php
http://azul.bnct.ipn.mx/
menu_principal_prueba.php
Vínculos de Texto (3)
http://azul.bnct.ipn.mx/
imagenes/cartel_chapa1/
index.php
http://azul.bnct.ipn.mx/
index.php?pagina=busquedas/
arbol_springer.php&titulo_pagin
a=Libros%20de%20Springer
http://ipn.libricentro.com/
http://www.bibliotechnia.com/
dispara/ipn.php
http://www.ieee.org/
http://search.ebscohost.com/http://gateway.ovid.com/
autologin.cgi
http://www.nature.com/naturehttp://148.204.48.96/uhtbin/
webcat
http://librisite.museglobal.com/
muse/logon/IPN/
http://
saturnino.dgip.uaa.mx:8331/V/
?func=change-portal-1&portal-
name=RESBIUC
http://oa-hermes.unam.mx/
http://azul.bnct.ipn.mx/
menu_bib_dig.php
http://azul.bnct.ipn.mx/
index.php?pagina=../quejas/
index.html&titulo_pagina=Queja
s%20y%20sugerencias
http://www.ipn.mx/
http://
azul2.bnct.ipn.mx/c/
esime.gif
http://
azul2.bnct.ipn.mx/c/
escudo_IPN.jpg
http://
azul2.bnct.ipn.mx/c/
CGBSI.gif
http://
azul2.bnct.ipn.mx/c/
fundamentos/
archivos%20(.pdf)/
leccion%201.pdf
http://
azul2.bnct.ipn.mx/c/
fundamentos/
archivos%20(.pdf)/
leccion%203.pdfhttp://
azul2.bnct.ipn.mx/c/
fundamentos/
archivos%20(.pdf)/
leccion%205.pdf
http://
azul2.bnct.ipn.mx/c/
fundamentos/
archivos%20(.pdf)/
leccion%207.pdfhttp://
azul2.bnct.ipn.mx/c/
fundamentos/
archivos%20(.pdf)/
leccion%209.pdfhttp://
azul2.bnct.ipn.mx/c/
fundamentos/
archivos%20(.pdf)/
leccion%202.pdfhttp://
azul2.bnct.ipn.mx/c/
fundamentos/
archivos%20(.pdf)/
leccion%204.pdfhttp://
azul2.bnct.ipn.mx/c/
fundamentos/
archivos%20(.pdf)/
leccion%206.pdfhttp://
azul2.bnct.ipn.mx/c/
fundamentos/
archivos%20(.pdf)/
leccion%208.pdf
http://
azul2.bnct.ipn.mx/c/
fundamentos/
archivos%20(.pdf)/
leccion%2010.pdf
http://
azul2.bnct.ipn.mx/c/
fundamentos/
archivos%20(.pdf)/
complemento%20lec
ciones%201-9.pdfhttp://
azul2.bnct.ipn.mx/c/
fundamentos/
archivos%20(.pdf)/
repaso%20general%
20breve_fundamento
s.pdfhttp://
azul2.bnct.ipn.mx/c/
fundamentos/
archivos%20(.pdf)/
anexo1.pdfhttp://
azul2.bnct.ipn.mx/c/
fundamentos/
archivos%20(.pdf)/
anexo2.pdfhttp://
azul2.bnct.ipn.mx/c/
fundamentos/
archivos%20(.pdf)/
anexo3.pdfhttp://
azul2.bnct.ipn.mx/c/
funciones/
archivos%20(.pdf)/
leccion%2010.pdfhttp://
azul2.bnct.ipn.mx/c/
funciones/
archivos%20(.pdf)/
leccion%2012.pdfhttp://
azul2.bnct.ipn.mx/c/
funciones/
archivos%20(.pdf)/
leccion%2014.pdfhttp://
azul2.bnct.ipn.mx/c/
funciones/
archivos%20(.pdf)/
leccion%2016.pdfhttp://
azul2.bnct.ipn.mx/c/
funciones/
archivos%20(.pdf)/
leccion%2011.pdf
http://
azul2.bnct.ipn.mx/c/
funciones/
archivos%20(.pdf)/
leccion%2013.pdfhttp://
azul2.bnct.ipn.mx/c/
funciones/
archivos%20(.pdf)/
leccion%2015.pdfhttp://
azul2.bnct.ipn.mx/c/
funciones/
archivos%20(.pdf)/
leccion%2017.pdfhttp://
azul2.bnct.ipn.mx/c/
funciones/
archivos%20(.pdf)/
complemento%20lec
ciones%2010-17.pdfhttp://
azul2.bnct.ipn.mx/c/
funciones/
archivos%20(.pdf)/
repaso%20general%
20breve_funciones.p
dfhttp://
azul2.bnct.ipn.mx/c/
Arreglos_apuntadore
s_y_estructuras/
archivos%20(.pdf)/
leccion%2018.pdfhttp://
azul2.bnct.ipn.mx/c/
Arreglos_apuntadore
s_y_estructuras/
archivos%20(.pdf)/
leccion%2020.pdfhttp://
azul2.bnct.ipn.mx/c/
Arreglos_apuntadore
s_y_estructuras/
archivos%20(.pdf)/
leccion%2019.pdfhttp://
azul2.bnct.ipn.mx/c/
Arreglos_apuntadore
s_y_estructuras/
archivos%20(.pdf)/
leccion%2021.pdfhttp://
azul2.bnct.ipn.mx/c/
Arreglos_apuntadore
s_y_estructuras/
archivos%20(.pdf)/
leccion%2022.pdf
http://
azul2.bnct.ipn.mx/c/
Arreglos_apuntadore
s_y_estructuras/
archivos%20(.pdf)/
repaso%20general%
20breve_tercera%20
parte.pdf
http://azul.bnct.ipn.mx/portada/
circulos_lectura_cartel.pdf
http://azul.bnct.ipn.mx/portada/
abrir_sesion.pdf
http://azul.bnct.ipn.mx/portada/
mis_proyectos.pdf
http://azul.bnct.ipn.mx/
n_portada/css/layout.css
http://azul.bnct.ipn.mx/
n_portada/css/spacegallery.css
http://azul.bnct.ipn.mx/
n_portada/css/custom.css
http://azul.bnct.ipn.mx/
estilo_principal.css
http://azul.bnct.ipn.mx/
n_portada/js/jquery.js
http://azul.bnct.ipn.mx/
n_portada/js/eye.js
http://azul.bnct.ipn.mx/
n_portada/js/utils.js
http://azul.bnct.ipn.mx/
n_portada/js/spacegallery.js
http://azul.bnct.ipn.mx/
n_portada/js/layout.js
http://azul.bnct.ipn.mx/lib/
reflection.js
http://azul.bnct.ipn.mx/
imagenes/bnct_2011.jpg
http://azul.bnct.ipn.mx/
imagenes/circulos_web2.jpg
http://azul.bnct.ipn.mx/
imagenes/cartel_chapa1/
chapa1.png
Figura 2.2: Mapa del Sitio Web Actual de la Academia de Computación.16
16
Tomada de http://azul2.bnct.ipn.mx/c/index.html
31
A continuación se mencionan algunos de los beneficios que aportaría tener un
Sitio web en la Academia de Computación de ESIME Zacatenco.
2.1 Beneficios
El desarrollar e implementar este proyecto brindará a la Academia de
Computación ventajas respecto a las Academias restantes, ya que permitirá
enfocar toda la información de una Academia en un sitio web, de esta forma, se
logrará la independencia en cuanto al manejo de contenidos, y la gestión del sitio.
Existen otros beneficios que se espera la Academia obtenga con la
implementación del sitio, entre los que destacan:
Conocer más sobre la Academia de Computación de ESIME Zacatenco.
Mayor interacción entre los usuarios mediante los foros y blogs.
2.2 Requerimientos
Para conocer los requerimientos de sitio web a desarrollar se realizaron reuniones
con el actual presidente de la Academia de Computación para conocer lo que se
deseaba del sistema, los requerimientos son:
Interfaz gráfica para la actualización y modificación las características
principales del sitio web (menús, banners, información relevante, entre
otros)
Secciones de descarga como son: guías de estudio, temarios, horarios,
plan de estudios, prácticas, entre otros.
Contacto con alumnos egresados.
Estructura académica
Sección de proyectos de titulación curricular.
Mapa curricular
Sección bolsa de trabajo
Blogs
No requerir de un web máster para su administración y actualización.
Seguridad
32
Teniendo los requerimientos para el Sitio web, pasaremos a la etapa de diseño, no
sin antes mencionar los lineamientos generales del manejo del Sitio Web
Institucional, sitios y páginas web del Instituto Politécnico Nacional, así como las
normas a las que debemos sujetarnos para llevar a cabo el desarrollo del Sitio
web, esto con la finalidad de realizar un trabajo de calidad, que brinde al usuario
una estancia cómoda, ágil y atractiva al estar navegando en el Sitio web.
2.3 Normatividad
Es importante seguir una normativa para la realización del Sitio web por lo que se
acataran los Lineamientos Generales del manejo del Sitio Web Institucional. Sitios
y Páginas de internet, tomando como punto de partida los criterios establecidos en
el Manual de imagen Institucional del IPN que se agrega como anexos en la parte
final de este trabajo.
33
Capitulo 3: Diseño del Sitio Web
En el capítulo 1 se describieron los conceptos de las tecnologías involucradas en
el desarrollo de un sitio web, en el capítulo 2 se dio a conocer la situación actual
del sitio web con el que cuenta la Academia de Computación, además de conocer
las normas a las cuales debemos sujetarnos para desarrollar este sitio web, en
este capítulo se describirá el diseño del sitio web para la Academia de
Computación de ESIME Zacatenco,
3.1 Estructura del Sitio Web
Siguiendo los lineamientos se definirá la siguiente estructura para el sitio web de la
Academia de Computación:
Figura 3.1: Estructura del sitio web.
34
La siguiente tabla muestra los elementos a mostrar en cada una de las áreas que
se definen en la figura anterior.
Área Elementos a mostrar
Encabezado Banner, buscador, Login de acceso a
usuarios.
Menú Contendrá el menú general que estará
dividido en Organización, Asignaturas,
Especialidad, Contacto, Bolsa de trabajo,
Egresados y Recursos en la web.
Contenido Noticias, Eventos, Actualizaciones.
Pie de Página Información de los derechos de autor del
sitio web.
Figura 3.2: Elementos a mostrar en las distintas áreas del sitio web.
Por su parte el menú estará dividido de la siguiente forma:
Inicio
Organización
o Ubicación
o Directorio de Profesores
o Instalaciones
o Organigrama
Asignaturas
o Software
1er Semestre
Fundamentos de Programación
2do Semestre
Programación Orientada a Objetos
35
3er Semestre
Estructura y Bases de Datos
4to Semestre
Análisis Numérico
o Hardware
5to Semestre
Circuitos Digitales
6to Semestre
Microprocesadores
Recursos en la Web
o Guías de ETS
Fundamentos de Programación
Programación Orientada a Objetos
Estructura y Bases de Datos
Análisis Numérico
Circuitos Digitales
Microprocesadores
o Prácticas
Fundamentos de Programación
Programación Orientada a Objetos
Estructura y Bases de Datos
Análisis Numérico
Circuitos Digitales
Microprocesadores
36
o Tutoriales
Fundamentos de Programación
Programación Orientada a Objetos
Estructura y Bases de Datos
Análisis Numérico
Circuitos Digitales
Microprocesadores
Egresados
Especialidad
o Hardware
Redes LAN
Arquitectura de Computadoras
Aplicaciones de Redes de Computo
Sistemas en Tiempo Real
o Software
Lenguajes de Internet
Ingeniería de Software
Agentes Inteligentes Expertos
Visión por Computadora
o Proyectos de Titulación
o Recursos en la Web
Hardware
Redes LAN
Arquitectura de Computadoras
Aplicaciones de Redes de Computo
37
Sistemas en Tiempo Real
Software
Lenguajes de Internet
Ingeniería de Software
Agentes Inteligentes Expertos
Visión por Computadora
Bolsa de Trabajo
Contacto
3.2 Perfiles de Usuario y Sistema de Autenticación
En el sitio web se definirán 3 tipos de roles o niveles de acceso:
Administrador
Profesor
Usuario
Las funciones de cada uno de ellos serán:
Administrador
o Tendrá todos los permisos para poder agregar, eliminar y modificar,
paginas.
o Podrá gestionar los usuarios del sitio, es decir modificar información,
bloquear, eliminar, editar de los usuarios.
o Podrá agregar nuevas secciones, y contenidos.
Profesor
o Podrá agregar contenidos en diferentes secciones del sitio web,
siempre y cuando el Administrador lo apruebe.
Usuario
o Solo tendrá la capacidad de realizar consultas y descargar del sitio
web.
38
Capítulo 4: Desarrollo del Sitio Web En los capítulos anteriores se definieron conceptos involucrados dentro del desarrollo de un sitio web, además de conocer la situación del sitio de la Academia de Computación y la etapa de diseño del sitio, ahora se va a describir como se desarrollará el proyecto. Como se ha mencionado se utilizará un sistema administrador de contenidos, en este caso My Web Page Started Kit, antes de comenzar la etapa de desarrollo es necesario conocer la arquitectura de MWPSK. 4.1 Arquitectura de MWPSK
4.1 Arquitectura My Web Page Started Kit.
39
Como se puede apreciar en la imagen anterior, MWPSK se encuentra divide en carpetas, la descripción de cada una de estas:
4.2 Carpeta Administration.
En la carpeta de administration se encuentras las páginas que serán vistas únicamente por el administrador del sitio, es decir las páginas donde se pueden gestionar:
Administración de usuarios.
Secciones que serán agregadas.
Gestión de navegación a través del sitio.
4.3 Vista Administrador.
40
4.4 Gestión de Páginas y Navegación.
4.5 Gestión de Usuarios.
Por su parte dentro de la arquitectura se encuentra la carpeta App_Code que será la encargada de brindar el funcionamiento de cada uno de los controles dentro del sitio web, además de los proveedores y roles.
41
4.6 Carpeta App_Code.
4.7 Controls, Providers y Sections.
42
Por otro lado las páginas que sean agregadas al sitio web, se guardaran en la carpeta App_Data en formato XML, además de los controles, imágenes y secciones creadas dentro del sitio web en tiempo de ejecución.
4.8 Carpeta App_Data.
De igual forma los controles visibles dentro del sitio web para ser agregados, deben ser creados en Visual Studio y agregados a la carpeta EasyControls y Section Controls. La diferencia entre estas 2 carpetas radica en que Easy Controls brinda a los desarrolladores la posibilidad de personalizar controles en Visual Studio, teniendo la opción de agregar muchos controles. Las siguientes imágenes ilustran las diferencias entre las 2 carpetas y cómo funcionan dentro del sitio web.
43
4.9 Carpetas de Controles.
4.10 Controles en Tiempo de Ejecución.
44
Como se aprecia los controles dentro de la carpeta Easy Control funcionan como un control más, pero al agregar un Easy Control tenemos la posibilidad de agregar controles creados antes de ejecutar el sitio web.
4.11 Control Easy Control.
De igual forma MWPSK permite personalizar la apariencia del sitio web, los archivos relacionados a la apariencia del sitio web se encuentran en la carpeta App_Themes.
4.12 Themes.
Como se aprecia en la figura anterior dentro de la carpeta App_Themes se encuentran los archivos CSS para modificar el aspecto del sitio.
45
Ahora que se ha conocido la arquitectura del sistema administrador de contenidos
se iniciará el desarrollo del sitio modificando la estructura y apariencia de esté,
para ello se requieren conocimientos avanzados en el lenguaje de CSS y HTML.
4.2 Estructura Se iniciará creando una simple estructura de HTML formada por los siguientes elementos:
Encabezado
Navegación
Menú
Contenido de la Página
Pie de Página <body> <div id="estructura" >
<div id="encabezado" > **Titulo** </div>
<div id="navegacion1" > **Control Login ** **Control Search** </div>
<div id="menu" > **Control Menu** </div> <div id="contenido" > **El contenido** </div> <div id="pie_pagina" > **Pie de Página** </div>
</div> </body>
MWPSK provee de elementos y controles ya definidos para ser agregados en cualquier parte de la estructura, en este caso los controles y elementos a agregar serán:
Titulo/Banner
Login
Búsqueda
Menú
Contenido
Pie de página
46
El código HTML con los elementos y controles agregados que definen la estructura del sitio es el siguiente: <cc1:TemplatedContent runat="server" SkinID="Top"> <ContentTemplate> <div id="estructura" >
<div id="encabezado" > <cc1:WebSiteTitle runat="server"></cc1:WebSiteTitle> </div> <div id="navegacion1" > <cc2:LoginStatus runat="Server" id="LoginStatus1" /> <cc2:Search runat="Server" id="SearchLink1" /> </div>
<div id="menu"> <asp:Menu runat="server" DataSourceID="menuDataSource"></asp:Menu> <asp:SiteMapDataSource runat="server" ID="menuDataSource" ShowStartingNode="false" /> </div> <div id="contenido"> <cc1:HomepageContent runat="server"> </cc1:HomepageContent> </ContentTemplate> </cc1:TemplatedContent> <cc1:TemplatedContent runat="server" SkinID="Bottom"> <ContentTemplate> </div>
<div id="pie_pagina" > <cc1:WebSiteFooter runat="server" ID="footer" /> </div> </div>
</ContentTemplate> </cc1:TemplatedContent> Como se aprecia en el código HTML anterior los elementos y controles ya definidos por el sistema administrador de contenidos inician con las siglas cc1, de esta forma se define la estructura para el sitio web, no obstante la apariencia será definida en las hojas de estilo. 4.3 Apariencia Para iniciar esta etapa definimos una simple estructura de CSS con los elementos que se han definido para personalizar cada zona dentro del sitio web. #encabezado { }
47
#navegacion1 { } #menu { } #contenido { } #pie_pagina { }
Y dentro de cada elemento de la estructura de CSS se definen estilos y características que definirán a las distintas partes del sitio web. Por ejemplo #encabezado { border-style:groove; Background-color:#eeeeee; Width: 768px; Height: 85px; Left: 296px; Position: absolute; Text-align: right; Color: Black; Top: 1px; Border-color: transparent; Background-image:url('_images/IPN_012D57.PNG'); background-repeat: no-repeat; } Teniendo en cuenta que se está modificando la apariencia del elemento encabezado, la siguiente tabla ilustra de que manera afectan a este elemento los distintos atributos especificados.
Atributo Descripción
Border-Style Define el estilo del borde.
Background-color Especifica el color del fondo.
Width Especifica el ancho del elemento.
Height Define la altura del elemento.
Left Define la posición respecto al lado izquierdo de la pantalla.
48
Position Define la posición de un elemento.
Text-Align Especifica la alineación del texto dentro del elemento.
Color Especifica el color de la fuente.
Top Define la posición del elemento respecto a la parte superior de la pantalla.
Border-color Define el color de borde del elemento.
Figura 4.13: Atributos CSS.
De esta forma se continúa modificando la apariencia de cada uno de los elementos dentro del sitio web. El resultado final será:
Figura 4.14: Sitio Web Academia Computación.
49
4.4 Controles Personalizados Ahora es momento de desarrollar los controles personalizados, como se mencionó en el capítulo 1, los módulos disponibles en MWPSK son:
Descargas
Noticias
Eventos
Libro de Visitas
Formulario de Contacto
Editor de Contenido
Lista de Enlaces
Subpáginas
Controles Sencillos
Pero no satisfacen las necesidades requeridas para el sitio web, por lo cual se crearan nuevos controles. Para crear un nuevo control se sigue el procedimiento siguiente: 1.- Se crea un nuevo elemento en la carpeta EasyControls.
Figura 4.15: Agregar Nuevo Elemento.
2.- Se agrega un Web User Control.
50
Figura 4.16: Agregar Control Personalizado.
Y se agregará a la carpeta EasyControls.
Figura 4.17: Control Agregado.
3.- Se personaliza el control, para este ejemplo se agregará un calendario.
51
4.18: Edición del control
Y en el sitio web aparecerá el nuevo control agregado.
4.19: Control en el Sitio Web.
4.20 Control Agregado en el Sitio Web.
De esta forma se pueden crear controles personalizados.
52
Capítulo 5: Propuesta de Implementación. En este capítulo se explicará cómo implementar el sitio web dinámico
requerimientos del hardware y software que se utilizará
Hardware
Como requerimiento principal es un CPU que es el que se utilizará como servidor
este debe tener como características mínimas lo siguiente.
1. Procesador Pentium 4 o su similar.
2. 1.5 GB en memoria RAM
3. 160 GB en disco duro.
Software
En software se utilizará Windows Server 2003 que será instalado en el servidor.
Se utiliza Windows server ya que todo el entorno de trabajo está basado en
plataformas creadas por Windows, y en base a eso no se tendrá que configurar o
modificar alguna configuración de arranque como sucedería con otros software.
Una vez establecidos los detalles técnicos y terminados la instalación de Windows
server 2003 se pasa a la configuración del servidor.
Los servicios que se configuraran en nuestro servidor serán IIS, FTP, SMTP.
Configuración de servicios
Para comenzar con la configuración de los servicios abriremos la ventana panel de
control y se seleccionará la opción asistente para componentes de Windows en el
cual seleccionaremos la opción servidor de aplicaciones como se muestra en la
imagen 5.1
53
5.1 Configuración de Servicios
Una vez seleccionada la opción Servidor de aplicaciones se da clic en botón
detalles el cual abrirá otro cuadro de selección donde se elegirá el servicio de IIS
como se muestra en la siguiente imagen:
5.2 Selección de caracteristicas del servidor
Una vez seleccionado el servicio de IIS se da clic en el botón detalles para agregar
los servicios de FTP Y SMTP el cual despliega con los servicios que cuenta el IIS
y se darán de alta de acuerdo con las necesidades que requiere el sitio web
dinámico de la academia de computación como se muestra en la siguiente
imagen:
54
5.3 Selección de Servicios FTP y SMTP
Una vez seleccionados los dos servicios correspondientes a FTP y SMTP se da
clic en el botón aceptar una vez terminada la instalación de los servicios el
servidor se reiniciará.
Una vez reiniciado se abrirá la carpeta con el nombre Inetpub que se crea en raíz
de la unidad c al instalar el servicio de IIS, dentro de esa carpeta se encuentra una
subcarpeta con el nombre wwwroot, dentro de esa subcarpeta se creara una
carpeta con el nombre SitioWebZAC don ahí se copiarán todos los archivos y
carpetas del sitio web que se tienen el servidor de desarrollo.
Una vez copiado los archivos, es necesario dar de alta el sitio en el IIS los cual se
realizará de la siguiente manera, dar clic en inicio, clic en Herramientas del
Administrativas y se selecciona dando clic en la opción de Administrador de
Internet Information Services (IIS) como se muestra en la siguiente imagen:
55
5.4 Alta del sitio web en IIS paso 1
Se abrirá una nueva ventana en la cual se dará de alta nuestro sitio web como se
muestra en la siguiente imagen:
5.5 Al del sitio web en IIS paso 2
Observando la imagen anterior del lado izquierdo se encuentra la barra de
explorador de carpetas se ubicara la carpeta Sitios Web dando clic derecho
seleccionando la opción nuevo y posteriormente seleccionar sitio web como se
muestra en la siguiente imagen:
56
5.6 Alta del sitio web en IIS paso 3
Se abrirá una nueva ventana con el nombre asistente para crear un sitio web
daremos clic en el botón siguiente ver imagen:
5.7 Alta del sistio web en IIS paso 4
Una vez dando clic en siguiente se escribirá una descripción de sitio el cual es
SitioWebZAC como se muestra en la imagen:
57
5.8 Alta sistio web en IIS paso 5 “Descripcion del Sitio web”
Dando clic en siguiente que en la siguiente pantalla se configurara la dirección ip
del servidor y el puerto TCP el cual será el 8081.
5.9 Alta sistio web en IIS paso 6 “Direccion IP y configuracion del puerto”
Una vez asignados la IP y TCP se da clic en el botón siguiente donde en la
siguiente pantalla se seleccionara la ruta de acceso al sitio, esta es la carpeta que
se creó y se copiaron todos los archivos del sitio, como se muestra en la siguiente
imagen:
58
5.10 Alta sistio web en IIS paso 7 “Directorio Particular del sitio”
Después se da nuevamente clic en siguiente y aparare cera una última pantalla
donde le asignaran los permisos al sitio los cueles se seleccionarán los siguientes
Leer, Ejecutar secuencia de comandos y Escribir como se ve en la siguiente
imagen:
5.11 Alta sistio web en IIS paso 8 “Permisos de acceso al sitio Web”
Y para finalizar dar clic en siguiente y Finalizar que dando como se muestra en la
siguiente imagen:
59
5.12 Alta sitio web en IIS concluida
Ahora si el sitio a quedado configurado en el servidor para su funcionamiento.
60
Glosario
Administrador: Usuario con autorización para realizar cambios en el sitio web
Banner: Imagen Principal para el sitio web.
Base de datos: es una colección de datos relacionados entre sí, que representan
algún aspecto del mundo real.
CSS (Cascading Style Sheets, hojas de estilos en Cascada) nos permitirá separar
la definición de los contenidos y la definición de su aspecto.
FTP: File Transfer Protocol (Protocolo de Transferencia de Archivos) es un
protocolo de transferencia de archivos vía red y tiene gran fiabilidad.
Gráfico: Así es conocida cualquier imagen en el formato o extensión que se
encuentre ej. .jpg, .gif .png, entre otros.
HTML: son las siglas de HyperText Markup Language (Lenguaje de Marcado de
Hipertexto), y con él se "escriben" la mayoría de páginas web que existen.
IIS: (Internet Information Services) es un servidor web y un conjunto de servicios
para el sistema operativo Microsoft Windows, provee un conjunto de servicios que
corren sobre plataformas Windows.
JavaScript: es un lenguaje de programación del lado del cliente que será utilizado
para definir el comportamiento del sitio web, de esta forma será posible incorporar
efectos como texto que aparece y desaparece, animaciones, acciones que se
activan al pulsar botones y ventanas con mensajes de aviso al usuario, entre
otros.
Multiplataforma: Programa que puede ser instalado en cualquier sistema
operativo.
Navegador web: (o cliente web) es un software instalado en la computadora de
un usuario final, y proporciona los medios para conectarse a un servidor web y
visualizar las páginas web almacenadas en el servidor.
Normatividad: Reglas a seguir en el proceso de elaboración del proyecto.
Obsolescencia: es la caída en desuso de máquinas, equipos y tecnologías
motivada no por un mal funcionamiento del mismo.
SMTP: Simple Mail Transfer Protocol (Protocolo Simple de Transferencia de
correo) es un protocolo de red mediante el cual se envían y reciben mensajes de
correo electrónico.
61
Sistema de administración de datos: (Database management System por sus
siglas en ingles DBMS), que es una colección de programas que permiten crear y
mantener una base de datos.
Sistema administrador de contenidos: (CMS: Content Management System) es
un sistema que maneja el contenido de los componentes de un sitio web
Servidores web: consisten en un software de servidor web ejecutándose en una
computadora, estos almacenan información (en forma de páginas web) que
podrían ser útiles a diferentes personas.
Sitio Web: Conjunto de páginas web relacionadas a un dominio de internet que
ofrecen información, herramientas y/o servicios a sus usuarios.
Sitio Web Dinámico: es un conjunto de páginas con la opción de realizar cambios
o modificaciones en tiempo real.
WWW: (World Wide Web) Red de redes o red mundial.
W3C: es una comunidad internacional que desarrolla estándares para la Web
define a HTML como el lenguaje para describir la estructura de los sitios web
XML: (eXtensible Markup Languaje) definido por la W3C como un lenguaje con
una importante función en el proceso de intercambio, estructuración y envío de
datos en la web
XSLT: (eXtensible Stylesheet Languaje Transformation) es una recomendación de
la W3C
62
Conclusiones
Este proyecto surge como una propuesta de la academia de computación, muy
interesante por los diversos retos que enfrentaríamos ya que el desarrollo de este
requirió una larga labor de análisis y de desarrollo, el cual todos nuestros
conocimientos empíricos son llevados a la práctica.
Las herramientas investigadas y utilizadas fueron un eslabón para que el que el
proyecto sea una cadena bien conformada y aplicada de tal forma que para la
implementación, las modificaciones y actualizaciones sean tan sencillas como
únicamente buscar los archivo a subir, y los comentarios, anuncios y comunicados
sean fáciles como escribir un documento en Ms – Word pues investigamos las
diferentes herramientas y no nos conformamos únicamente en encontrar una que
nos fuera sencillo programar pues también no interesaba que los usuarios finales
lo utilicen como una herramienta más.
Concluimos que este proyecto trascenderá por varias generaciones ya que como
se comentó al principio de este escrito será la primera academia en contar con su
propio sitio web dinámico cual reto principal fue desarrollarlo de tal manera que
motive a futuras generaciones a innovar o implementar tecnologías nuevas para el
mejoramiento de este sitio.
Se dejara un legado muy importante, esto nos da mucha alegría y satisfacción por
concluir este proyecto.
63
ANEXO I: Lineamientos Generales del Manejo del Portal Web. El sitio web se diseñara bajo los Lineamientos Generales del manejo del Portal Web
Institucional. Sitios y Páginas, tomando como punto de partida los criterios establecidos
en el Manual de imagen Institucional del IPN proporcionado por la Coordinación de
Comunicación Social; los criterios del Manual de Identidad Institucional del Gobierno
Federal 2006 – 2012, la asesoría de la Subdirección de Enlace Interinstitucional, de la
Dirección General de Imagen, Publicidad y Medios de la Presidencia de la República, la
Guía para desarrollar Sitios WEB de la Administración Pública Federal, coordinada por la
Dirección del Sistema Internet de la Presidencia y por las normas de consulta y
localización de información institucional propuestas para el Ranking Mundial de
Universidades del Centro de medición WEBometrics.
Estos lineamientos se fundamentan en las recomendaciones de usabilidad como mejoras
prácticas de uso Web en Páginas, Sitios y Portales.
De esta forma se logrará diseñar el sitio web de acuerdo a la estandarización visual en los
elementos WEB del IPN, con el fin de que los visitantes se vuelvan usuarios permanentes
y localicen con facilidad la información que resuelva necesidades relacionadas con su
formación, con los vínculos sociales y profesionales y con la relación productiva y de
servicios como una aportación más a las acciones sustantivas del IPN.
Los objetivos que se buscan cumplir al seguir esta normatividad de identidad visual es:
Desarrollar una identidad visual especializada dentro del ámbito WEB que
colabore a complementar el sentido de la Institución.
Unificar a nivel de imagen las unidades académicas y administrativas
responsables locales y regionales.
Establecer normas visuales que construyan un sentido de pertenencia por medio
del uso de retículas y colores específicos.
Escudo, Logotipo y Lema
El Escudo, logotipo y lema del IPN se usarán en su color guinda original, permitiéndose
únicamente las variantes avaladas por el documento de Imagen e identidad del Instituto
de la Coordinación de Comunicación Social como son: blanco sobre negro, negro sobre
blanco.
Color y Texto
El color destinado para el escudo, logotipo y lema será el guinda institucional, que
siguiendo los estándares de claves hexadecimales para color el código de tal es el C1940.
Este mismo color se podrá incluir dentro de plecas y texto, recomendándose el color
blanco como fondo para textos lo que permite su correcta lectura y visualización.
64
Otro punto importante para el manejo de texto es evitar en la medida de lo posible colocar
texto sobre imagen, como podría darse el caso en banner. Salvo en excepciones en las
que sea estrictamente necesario y tomando en cuenta que se deberá designar un espacio
lo más libre de saturación visual dentro del banner para colocar texto.
Como tipografía recomendada para el manejo de información debe usarse la del tipo Arial,
ya que esta tipografía fue concebida especialmente para su manejo y lectura en pantalla,
además que los sistemas operativos la incluyen por default, lo cual nos ahorra conflictos
con el usuario que pudiera carecer de tipografías especiales que se inserten en los textos.
Esta tipografía o tipo de letra debe ser usado por igual dentro de las tablas que se creen y
coloquen.
Del color, como apoyo se proporciona la siguiente tabla de colores web, para poder usarla
en elementos complementarios,
Figura 6.1: Tabla de colores web institucional
Características de las imágenes para el banner en el portal web:
El banner principal deberá tener las siguientes características
Medidas de 736 pixeles de ancho por 100 pixeles
No exceder la dimensión de la imagen en 50 kilobytes.
Usar colores que no agredan ni lastimen la vista del espectador y de preferencia
no utilizar texto sobre la imagen del banner, salvo en caso del uso de títulos y
siempre cuidando que no interfiera en la legibilidad de los mismos.
Lineamientos para la optimización de archivos específicos para el portal web
Tanto las imágenes como los textos se deben optimizar para la correcta visualización de
las páginas en diversos navegadores, tomando como principales Internet Explorer, Firefox
y Chrome.
65
IMÁGENES .GIF Si son imágenes con animación procurar incluir tres caras como máximo, ya que esto
hace más fácil su lectura, el peso de las imágenes o banner no debe exceder de 400 KB.
IMÁGENES .JPG
Optimizarlas a 72 dpi que es la resolución indicada para imágenes en web. La dimensión
dependerá de la sección en que se ubique.
ARCHIVOS .PDF
Excluyendo el texto, las imágenes deben ser optimizadas para un despliegue y descarga
rápida, en el caso de posters se deben trabajar con un máximo de 1200 pixeles de ancho
por lo que den de largo, solo en casos extraordinarios en que el texto no sea legible se
permitirá una mayor extensión.
TEXTO
En este apartado solo se toman en cuenta el tipo y tamaño de la letra. Esta debe ser de la
familia Arial, Verdana o Times, siendo las recomendadas las dos primeras. Esto debido a
que son las que muestran los navegadores sin afectar el formato que le da el autor, el no
ajustarse a estas recomendaciones podría causar que el texto cambiara su tamaño y/o
justificación al momento de ser visualizado.
Recomendaciones de Usabilidad
Un buen portal es aquel que cuidad detalles que a simple vista no se ven, pero cuando se
analiza desde una perspectiva crítica nos podemos dar cuenta de que nuestros usuarios
obtendrán lo que están buscando en un menor tiempo. La usabilidad y la arquitectura de
la información son dos aspectos que se encargan de esto y que juegan un papel muy
importante en la WEB.
Los lineamientos nos brindan información relevante para que podamos cubrir estos
aspectos y mejorar el portal web. No olvidemos que estas son consideradas como
mejores prácticas que se recomiendan realizar.
Figura 6.2: Recomendaciones de Usabilidad.
66
Legibilidad en el comportamiento visual.
Las recomendaciones para la legibilidad en el comportamiento visual son:
Utilizar colores que tengan mucho contraste entre el texto y el fondo. La legibilidad
óptima requiere texto negro sobre fondo blanco (llamado texto positivo). El texto
blanco sobre fondo negro (texto negativo) es casi igual de bueno. Aunque el nivel
de contraste es el mismo que en el texto positivo, la combinación de colores
invertida ralentiza un poco la lectura. La legibilidad sufre más en las
combinaciones de colores con textos más claros que el negro puro, especialmente
si el fondo es más oscuro que el blanco puro. Lo peor son las combinaciones de
colores como el texto rosa con el fondo verde: muy poco contraste e imposible que
lo lean los usuarios daltónicos.
Usar fondos de colores claros o patrones de fondo extremadamente sutiles. Los
gráficos de fondo interfieren con la capacidad visual de ver líneas en los
caracteres y de reconocer las formas de las palabras.
Procurar fuentes lo suficientemente grandes como para que la gente pueda leer el
texto, aunque no tengan una visión perfecta. Los tamaños de fuente diminutos
deben ser relegados a notas de pie de página y en la letra pequeña que la gente
no suele leer.
Hacer que el texto esté quieto. Mover el texto, hacer que éste sea intermitente o
aumentarlo dificulta mucho la lectura.
No utilizar únicamente mayúsculas en el texto, esto provoca una lectura más lenta
y cansada por parte de los usuarios.
Multimedia
En el aspecto de los archivos multimedia como pueden ser animaciones, videos,
imágenes 3D que forman parte de la tecnología que ayuda a que la web se pueda
visualizar de una mejor manera, sin embargo no siempre se recomienda hacer uso de
ella.
Los lineamientos nos brindan algunas razones para usarlas y para evitarlas:
La primera objeción es que muchos de nuestros usuarios no cuentan con una
computadora de última tecnología lo que provoca una lentitud para su despliegue
o visualización.
Muchas veces el diseño es demasiado para la información que se quiere dar a
conocer.
El usuario podría distraerse con estos recursos y pasar a segundo término el
contenido.
Por el contrario, estas herramientas podrían servir como gancho para dar a
conocer información de suma importancia, siempre y cuando el diseño sea de gran
calidad
67
Uno de los mayores errores por parte de los diseñadores es que al aplicar estas
herramientas terminan transformándose en un engaño y es que muchas veces no
corresponde lo que se está viendo visualmente al contenido
Foto imagen
Es importante mencionar dos aspectos que tienen que ver con el texto:
1. Cuando se coloca una imagen es importante poner un pie de foto, los usuarios
querrán saber qué es, dónde está, etc. Así que es mejor darle esa información.
2. Nunca se debe poner texto sobre imagen, ni mucho menos hacer las imágenes
vínculos a la información
Para el estilo de nuestro portal deberemos seguir algunas reglas que nos dictan los
lineamientos, por ejemplo para los espacios dentro de la página, los colores usados de
acuerdo a la Unidad o en nuestro caso para la Academia de Computación.
En cuanto al uso de imágenes
Los parámetros necesarios para las imágenes a incluir dentro de las páginas son los
siguientes:
Considerando que a mayor peso de las imágenes es mayor el tiempo de descarga
y despliegue en los navegadores, el estándar de calidad hablando de puntos por
pulgada (ppi) es de 72. Solo se podrán usar imágenes con mayor resolución en el
caso de mapas, croquis y otros materiales infográficos que requieran consultas
meticulosas o detalladas.
Los gráficos deben ser en formato RGB, salvo aquellos que se distribuyan para
impresión, en cuyo caso se deberán comprimir en formato .Rar o .Zip agregando
una liga para su descarga dentro de la sección correspondiente.
La medida de los banners será de 736 pixeles de ancho por 100 pixeles de alto, en
formato JPG y no sobrepasar los 15 KB. Además siguiendo las normas de
usabilidad se recomienda no manejar texto sobre la imagen del banner, salvo
excepciones en las que sea aplicado de tal forma que no violente ni interfiera la
lectura del mismo.
La siguiente imagen proporciona a grandes rasgos los parámetros modificables para el
diseño del portal, esto con el objetivo como se ha mencionado anteriormente de mantener
una identidad institucional.
68
Figura 6.3: Estructura del portal web institucional
En la imagen se aprecia la manera en que están redactados los comandos que se pueden
modificar, los que se enumeraron para su identificación junto con la imagen que se
muestra, estos deberán ser adaptados al sitio web de la Academia de Computación.
Restricciones de Archivos en General
Es estrictamente necesario que los nombres de imágenes y archivos no contengan
espacios entre palabras NI ACENTOS, debe usar minúsculas para nombrarlos, la omisión
de esta regla entorpece el flujo de llamado de la información, por lo cual los links e
imágenes pueden aparecer rotos.
69
Bibliografía Ajax: Web 2.0 con Jquery para profesionales
paginas 1-26 47-56
Maximiliano Firtman
Segunda Edición
Real World ASP.NET. Building a Content Management System
Fraser, Stephen.
U.S.A. 2002.
Editorial Apress pp.12-28
CCENT/CCNA ICND1
Odom, Wendell.
2da Edición. 2008. Madrid, España.
Cysco Systems pp.145
Fundamentos de Bases de Datos
Silberschatz, A., Korth, H., Sudarshan, S.
4ta Edición. McGraw Hill pp.228
Building a Web 2.0 Portal with ASP.NET 3.5
Al Zabir, Omar.
1ra Edición. Editorial O´Reilly
pp. 1-6
HTML & CSS Standars.
W3C
Obtenido el 7 de noviembre del 2011 de
http://www.w3.org/standards/webdesign/htmlcss
Learning Jquery 1.3.
Chafer, Jonathan.
2010. Madrid, España. Editorial Anaya
Pp.29-39
Introducción al Lenguaje XML.
Posadas, Marino.
Madrid, España. Editorial Eidos.
Pp.2-19
XSLT: Mastering XML Transformations.
Tidwell, Doug.
Editorial O´Reilly.
70
Pp.7-26
Global Stats. Top 5 Browsers on 2011.
Obtenido el 7 de Noviembre del 2011 de http://gs.statcounter.com/
MSDN
Obtenido el 7 de Noviembre de http://msdn.microsoft.com/es-
es/library/ms269115%28v=VS.80%29.aspx