2011

“UNIVERSIDAD SAN PEDRO

HUARAZ”

PROYECTO DE TESIS
CICLO Ciclo X

Los avances tecnológicos de la computación y las

comunicaciones por Internet han ido evolucionando las
actividades de las personas, así como la forma de hacer
negocios. Internet se ha consolidado como la plataforma
ideal para el desarrollo de pequeñas y grandes empresas,
al permitir la globalización de productos y servicios.

El comercio también se ha visto beneficiado con estos

avances, con el llamado E-commerce ó comercio
electrónico.

INTEGRANTES: MEZARINA CORDOVA PIERO A.

VARILLAS MUÑOZ JORGE J.

UNIVERSIDAD SAN PEDRO CEAIS - HUARAZ

FACULTAD DE INGENIERÍA

ESCUELA INFORMÁTICA Y DE SISTEMAS

PROYECTO DE TESIS

ANALISIS, DISEÑO IMPLEMENTACIÓN DE UNA

PÁGINA WEB DINÁMICA PARA EL SEGUIMIENTO Y
MONITOREO DE PROYECTOS DE LA EMPRESA
COPROCSAC “CONSTRUCTORA Y PROVEEDORA
ORGULLO CONCHUCANO S.A.C.”.

INTEGRANTES : MEZARINA CORDOVA PIERO A.

VARILLAS MUÑOZ JAVIER J.

ASESOR : Dr. FERNANDO VEGA HUINCHO

HUARAZ – 10 de febrero del 2011

 DEDICATORIA

El presente trabajo está dedicado en primer lugar a Dios quien nos

brinda la sabiduría necesaria y el don del entendimiento para poder
entender y administrar bien el proyecto en el cual vamos a trabajar.

En segundo lugar agradecer a nuestros padres que son el motor y

motivo de nuestro estudio, los que más nos apoyan en esta dura carrera
de la vida para así poder darles la satisfacción de nuestra carrera.

En tercer lugar a nuestro asesor el Doctor Fernando Vega Huincho

quien nos nutrirá con la sabiduría y la experiencia para poder
implementar bien nuestro proyecto y este logre el nivel necesario y
llegar a ser un buen proyecto.
 AGRADECIMIENTO

En primer lugar al Doctor Fernando Vega Huincho quien como asesor

del curso nos va orientar y dar las pautas y metodología necesaria para
poder sacar el proyecto adelante.

En segundo lugar a nuestra Alma Mater la Universidad San Pedro por

habernos brindado los conocimientos y estudios pertinentes para poder
finalizar nuestra carrera de manera satisfactoria para poder
enorgullecer a nuestras familias, amigos y compañeros de la
Universidad.
 INTRODUCCION

Los avances tecnológicos de la computación y las comunicaciones por

Internet han ido evolucionando las actividades de las personas, así

como la forma de hacer negocios.

Internet se ha consolidado como la plataforma ideal para el desarrollo

de pequeñas y grandes empresas, al permitir la globalización de

productos y servicios.

El comercio también se ha visto beneficiado con estos avances, con el

llamado E-commerce ó comercio electrónico.

 CAPITULO I

1. PLAN DE INVESTIGACION

1.1. PLANTEAMIENTO DEL PROBLEMA

Desde el principio de la comunicación del Internet las organizaciones y los

individuos del negocio han establecido afilado el World Wide Web como siendo
la avenida más popular en traerse a la atención de clientes.

Los Web site se crean básicamente en un código especial, o la lengua conocida

como lengua hiperactiva del margen de beneficio del texto, mejora sabido a
todos como HTML. Esta lengua es qué hace un Web site del Internet posible;
éste es el bloque de edificio y permite la estructura.
La estructura de un Web site incluye los títulos e incluso el tipo fuente del texto
usado.

La escritura de la lengua del HTML es muy desperdiciadora de tiempo y

muchas nuevas maneras y los programas del software de la creación del HTML
se han desarrollado para hacer el proceso de crear un Web site más
rápidamente y fácil. De hecho uno puede desarrollar un Web site entero sin
saber una palabra del HTML. Qué se separa… un Web site de otro es el diseño
real del sitio en la estética visual y la funcionalidad.

El intento o el propósito de los sitios deben ser considerados tan bien como las
audiencias apuntadas los sitios, la estructura contenta y muchos aspectos de la
compatibilidad del diseño. El sitio debe ser compatible a las plataformas de
funcionamiento de la computadora y las capacidades y el gusto de las
audiencias previstas.

La primera cosa un diseñador del Web site debe pedirse por qué este sitio es
necesario.
El diseñador del sitio debe entonces crear una declaración que clarifique el
propósito del sitio y qué visitantes pueden esperar alcanzar del sitio. Esto
inspirará a diseñador del sitio que planee y proporcione un contorno detallado
de cómo el sitio puede ser modificado en el futuro si se presenta la necesidad.
Es la mejor práctica para que los amos de la tela planeen con un objetivo a
largo plazo.

El diseñador del Web site debe crear absolutamente este sitio con las
audiencias previstas claramente en mente.

Un diseñador del Web site debe entender que los visitantes de las razones y de
la motivación entrarán en este sitio y también considerar si puede haber
bastante atracción para que estos visitantes vuelvan otra vez una cierta hora.
Quizás el contenido se considera ser la tarea más desperdiciadora de tiempo de
crear un Web site.

Planear el contenido de un Web site es vital a un éxito de los sitios.

Es generalmente la mejor práctica para que el diseñador del sitio planee para
los cambios regulares en contenido del sitio. Esto es naturalmente
particularmente evidente cuando el sitio se ocupa de acontecimientos recientes
y las noticias y las agendas. Un contenido de los Web site se puede también
utilizar para lo más mejor posible anunciar de un producto o de un servicio
particular.

Tener un Web site compatible en todas las plataformas y browsers de la

computadora es también muy importante.

Esto está llegando a ser aún más esencial en últimos días mientras que el
volumen de usuarios listos de la computadora crece e Internet Explorer no es el
único nombre que saben. Esto es una edición particularmente difícil para los
diseñadores del Web site en encontrar el camino medio y el código y los
comandos derechos que exhibirán una página con eficacia en todos los
browsers y plataformas.
Los Web site han formado ciertamente la manera que los negocios se funcionan
hoy. Los consumidores ahora están comprando un grande muchos artículos en
línea; tener un Web site ha llegado a ser casi esencial para un negocio hoy.
Un Web site que mira profesional inculcará un sentido de la seguridad para los
clientes que hacen compras en el Internet, e indiscutible, atraerá un volumen
de ventas financiero más alto.

1.1.1. Selección del problema:

Según cómo crece el mercado y la globalización ahora los centros de venta y

mercadeo no solo son puestos estáticos de trabajo ni de compra y venta.
Tendremos una publicidad 24 horas al día durante 365 días al año con un
bajo coste de publicidad, donde no tenga que pagar por impresiones de
catálogos, por anuncios costosos en la televisión, radio ó periódicos, además
donde pueda obtener nuevos clientes, ofrecer información acerca de sus
productos y servicios, obteniendo información sobre las preferencias y
gustos de sus clientes, impulsando su empresa hacia otros países y nuevos
mercados.

1.1.2. Formulación del problema:

Como diseñar un web site dinámico para la Implementación de una página Web

dinámica para el Seguimiento y Monitoreo de Proyectos de la empresa

COPROCSAC “Constructora y Proveedora Orgullo Conchucano S.A.C.”.

1.2. OBJETIVOS

1.2.1. OBJETIVO GENERAL

Análisis, diseño implementación de una página web dinámica para el seguimiento

y monitoreo de proyectos de la empresa COPROCSAC “CONSTRUCTORA Y
PROVEEDORA ORGULLO CONCHUCANO S.A.C.”
 1.2.2. OBJETIVO ESPECIFICO

1. Sistematizar información sobre los componentes del sistema

Web site, particularmente la transmisión de datos por medio del

Internet, y sobre las implicaciones sociales del proyecto.

2. Diseñar el prototipo para la venta y consultas de dentro del Web

site.

3. Probar y mejorar el funcionamiento del prototipo.

4. Diseñar el modelo de transmisión de datos a través del internet y

el interfaz de registro en la base de datos de la empresa de

distribución.

5. Implementar el modelo diseñado, probarlo con el prototipo y

optimizar su funcionamiento.

1.3.HIPÓTESIS:
Si se diseña e implementa una página web dinámica para el seguimiento y
monitoreo de proyectos de la empresa COPROCSAC “constructora y proveedora”,
entonces se mejoraran los procesos de ventas de la empresa.

1.4.JUSTIFICACION
1.4.1.1. JUSTIFICACION ECONOMICA:

Las empresas hoy en día saben y reconocen de la importancia que representa la

generación de tráfico (número de visitas a un sitio web) para cumplir los
objetivos de promoción del negocio vía Internet, sin embargo, en donde están
fallando es en la estrategia que han venido siguiendo para promocionar el
negocio, ya que en la mayoría de los casos se limitan a diseñar un sitio web sólo
para tener presencia y erróneamente asumen que sus páginas serán localizadas
por los clientes potenciales sin tener que recurrir a un servicio profesional de
posicionamiento.

Esta idea, aunada a un presupuesto muy limitado de inversión en el proyecto de

diseño del sitio web, han provocado en su conjunto que las empresas no estén
logrando su objetivo de promoción y el beneficio más que financiero y de
posicionamiento del negocio, se reduzca al placer de ver su empresa publicada
en Internet y sentir que al menos se está haciendo algo por promover el negocio,
aunque estas acciones no produzcan ningún resultado para la empresa.

En resumen, la globalización nos impone nuevos esquemas de producción y

comercialización, y nos sitúa en un escenario de nuevos y grandes retos, en el
que estamos comprometidos a innovar o estaremos expuestos a perder
posicionamiento en nuestros respectivos mercados.

1.4.2. JUSTIFICACION SOCIAL:

De acuerdo, muchas de las personas con quien Usted hable podrán no

tener una clara visión de las necesidades y probablemente no tengan
bien definido lo que se puede y no se puede lograr con un sitio web,
pero de cualquier forma es importante su opinión.

Un mecanismo sencillo podría ser un cuestionario para solicitar su

visión y opiniones acerca del tipo de información que ellos podrían
requerir en el desempeño de sus actividades y cómo podrían utilizar el
Internet para cumplir sus funciones. Esto deberá proporcionarle a
Usted una buena idea acerca de la funcionalidad del sitio y sus
principales secciones de contenido.

1.4.3. JUSTIFICACION OPERATIVA

Dependiendo del sector y de su tipo de organización, cualquiera de

estas entidades (y algunos otros) pueden fondear parte de los costos
totales del desarrollo del sitio. Todo mundo se muestra interesado en
el Internet y un plan de negocios bien fundamentado que ofrezca un
atractivo retorno sobre la inversión (ROI) resultará interesante para
muchos.

Si se sigue esta metodología, de entrada ya estará un paso adelante de

su competencia. Finalmente, asegúrese que su sitio se desarrolle para
permanecer en esta trayectoria y conservar el liderazgo.
 1.4.4. JUSTIFICACION TECNICA
Los sitios web deben ser diseñados de tal forma que puedan ser usados
fácilmente y al ser humano le es más sencillo manejar paquetes de
información presentados a través de títulos explícitos (tales como
información de la compañía, catálogo de productos, información del
sitio, noticias, staff, etc.).

Trate de pensar lo más gráficamente posible; el color, las imágenes y

los logotipos pueden hacer bastante para que su sitio sea más atractivo
e impulsen su uso.

1.5.DELIMITACION O ALCANCE

1.5.1. DELIMITACION GEOGRAFICA O ESPACIAL:

Departamento de Ancash

1.5.2. DELIMITACION CIENTIFICA

La presente investigación hace uso de las modernas tecnologías de la

programación web, tal como php 5.0 integrado con ASP.

Obsérvese lo siguiente: la mayoría de los sitios que son premiados con

distinciones como "Lo mejor de...", "La mejor página de la semana...", "Top
5% del Web", son sitios que se dedican a temas muy específicos.

La gente no quiere un montón de sitios que tengan referencias a otros

lugares, la gente lo que busca es el contenido.

1.6.LIMITACIONES O RESTRICCIONES
Escasa bibliografía de programación web dinámica.
Pocos expertos en programación en la web con ASP y PHP.
Nuestro proyecto solo se basara en hacer un web site dinámico de
ventas.
1.7. VARIABLES

1.7.1. VARIABLE INDEPENDIENTE

Análisis, Diseño e Implementación de un Web Site Dinámico.

1.7.2.VARIABLE DEPENDIENTE
Ventas de productos en el web site.
 CAPITULO II

2. MARCO TEORICO

2.1. ANTECEDENTES:

25 Errores Comunes En Los Desarrollos Web

Error 1: Peso en la página

Por mucho ADSL que podamos tener instalado, simplemente tener una página de
150 KB a 200 KB es un crimen. Por ende el peso ideal tiene que rondar los 50 KB a
80 KB como mucho, aunque mucha gente posee ADSL, mucha gente también está
bajando archivos, escuchando música en radios online, y la cuota de velocidad de
descarga empieza a descender.

Incluso en entornos de trabajo, donde hay una red de más de 5 máquinas

utilizando 1 línea de ADSL podemos notar un grave descenso de la velocidad, así
que el factor “ADSL” afecta y mucho.

Las páginas deben pesar lo mínimo posible, esto podemos solucionarlo con código
estándar, bien programado, sin necesidad de eliminar atributos importantes como
el alt="..." o el title="...", ni quitar demasiadas imágenes.

Un ejemplo de sitios muy pesados:

 Banco Santander: 140 KB

 Correos de España: 110 KB
 ELPAIS.es 204 KB
 BBVA.es 132 KB
 Administracion.es 214 KB
 ya.com 135 KB

Esto por supuesto es una medida hecha en la página de inicio de cada URL, pero
con el paso de las revisiones, vemos que se repiten muchas cosas como porciones
de código, y más errores los cuales hacen que el peso de la página crezca a lo largo
de toda una trayectoria de estancia.

En un caso ideal, puedo recomendar que en la página de inicio se carguen los

archivos más esenciales, como las hojas de estilos (luego hablaremos de ella) y
algunas imágenes vitales, de modo que el usuario pueda descargar por ejemplo 700
Kb de información visitando 20 páginas y no 1,3 MB como en algunos exámenes
que hemos verificado.
Error 2: DTD inexistentes

Es común ver que todos los documentos de un sitio no tienen una DTD que los
identifique positivamente como un documento HTML, de hecho, cada navegador al
no encontrarse con un DTD se limita a cualquier cosa.

Esto en el ambiente de desarrolladores, se conoce como Quirck Mode, y cuando un

navegador entra en Quirck Mode, utiliza en su totalidad todo su motor de armado
de páginas, incluye un soporte de visualización de navegadores, viejos, nuevos.

En realidad no sabes lo que te espera, puede que te regalen un tremendo coche, o

algo como una torta de cumpleaños de 20 centímetros de diámetro, esto hace que
tengas incertidumbre y termines preparando toda tu casa para algo que no
sabes que va a ser… pero si tu amigo te hubiera dicho que te traía un cuadro de 2 x
2 metros, hubieras preparado el mejor lugar y la pared justa para colgarlo sin tener
que remover en toda la casa.

Los navegadores actúan de forma similar, cuando reciben un documento que no

posee una DTD que lo identifique el navegador automáticamente se hace un lío
utilizando su motor en su totalidad, técnicamente esto tiene muchas
desventajas, por ejemplo la utilización de todo el motor del navegador es como si
tuviéramos que utilizar el 100% de nuestra capacidad cerebral para comprender
una simple oración, cuando deberíamos utilizar solamente nuestros conocimientos
de lengua castellana.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Error 3: Páginas sin el idioma especificado

Benvinguts!. Seguro que no identifican a simple vista que significa esta palabra,
pues imaginen los parentescos entre palabras que puede haber en una
página, y el significado distinto que te puedes encontrar, uno puede buscar la
palabra “home” y recibir una página en inglés con la palabra “home” que significa
casa, pero… si “home” significa “hombre” en catalán, pero… ¿Qué hago mal?

Define idiomas en el comienzo de cada documento, es fácil, todos los

elementos de HTML heredan el idioma, solo basta ponerlo en elemento <HTML> y
todos los tags dentro de <HTML>...</HTML> contendrán contenido en un idioma
específico.

Ejemplo:

<HTML xmlns="http://www.w3.org/1999/xhtml" xml: lang="es” lang="es”>

Si especificamos un idioma estamos mejorando la semántica del

documento, diciéndole a un motor de búsqueda que quiere indexarnos que
nuestro contenido está plagado de palabras en idioma castellano, pero puede que
dentro de ese documento se encuentren palabras en inglés, catalán, francés.
Un lector de pantallas o un navegador sonoro para gente con discapacidad auditiva,
pronunciará mejor o utilizará una voz de sintetizador distinta cuando se encuentre
una palabra en otro idioma, de esta forma se pronuncian las palabras de forma
correcta, de lo contrario podrá escuchar una voz de sintetizador con pronunciación
inglesa relatando texto en castellano, y eso se traduce a un caos de pronunciación,
acentos distintos y hasta la incomprensión total de una simple oración.

Error 4: Títulos de página molestos y enigmáticos

Muchos ejemplos de los que he revisado tienen títulos de páginas totalmente

molestos y no muy explicativos. Un caso muy gracioso que me da risa que la gente
de administración.es tenga que caer tan bajo con esto:

::::::::::: administracion.es | el portal del ciudadano ........................

Esto no solamente es un gasto de peso (se utilizan caracteres) sino que es

totalmente inconcluso para los lectores de pantalla, por ejemplo un lector de
pantalla leería algo así como:

(dos puntos) (dos puntos) (dos puntos) (dos puntos) (dos puntos) (dos puntos)
(dos puntos) (dos puntos) (dos puntos) (dos puntos) (dos puntos)(espacio)
(administración)(punto)(es)(barra vertical)(el) (portal) (del) (ciudadano) (punto)
(punto) (punto) (punto) (punto) (punto) (punto) (punto) (punto) (punto) (punto)
(punto) (punto) (punto) (punto) (punto) (punto) (punto) (punto) (punto) (punto)
(punto) (punto) (punto)

Ja, ja algunos de los que leen ahora empezarán a entender de lo que hablo, cuando
uno utiliza un sintetizador de voz, cada vez que ingresa a un documento lo primero
que se lee es el título de una página, por ende, a más cosas escriban, más inútil y
largo será el relato, el ejemplo antes mencionado tarda 34 segundos en relatarse.

34 segundos para luego proseguir a relatar otras partes del documento. O sea que
el usuario podría gastar todo un día para leer una simple página o navegar
la Web institucional, ¿se imaginan qué decepción?

Otras de las cosas que me causan gracia es la usabilidad de estos títulos, por
ejemplo observen esta imagen:

Como podrán observar mucha gente no utiliza una sola ventana de navegador,
puede incluso tener 10 ventanas en la barra de tareas de Windows, de modo que
encontrar algo en la barra a simple vista cuesta mucho más que si utilizaran en
primer lugar el nombre del sitio.
Error 5: Sin imágenes navegar una página es imposible

No debería de ser necesario la presencia de imágenes para navegar, aunque le

agregan un sentido gráfico y proporcionan una ayuda visual muy grande, existe
gente que tiene discapacidad y no puede apreciar las imágenes, también puede
que el servidor al cual se accede no termina de enviar las imágenes, dando un
error, cuando pasa esto, la página queda cargada parcialmente, y se puede navegar
en modo texto, si las imágenes tuvieran especificado el atributo alt="..." se podrían
diferenciar muchas cosas, sin tener que recargar las imágenes o esperar a que el
servidor Web funcione.

El Banco Santander Central Hispano lo hace de una forma casi perfecta, la Web se
puede navegar sin imágenes dentro de todo se merece un aplauso, la gran mayoría
de las imágenes tienen explicaciones coherentes y cortas, faltaría especificar
los atributos title="..." en cada enlace o cada imagen para desplegar un cuadro
amarillo de ayuda conocido como Tooltip.

La web de La Moncloa, más allá si la información es interesante o no para algunos,

es innavegable sin imágenes.

En la web de La Caixa, ubica el atributo alt a sus imágenes pero no define un

atributo title="..." de modo que esto solo beneficia los navegadores Internet
Explorer.
Error 6: URL matemáticas, casi imposibles de entender y recordar

Si, matemáticas, algunas URLs son tan complejas de entender que si no

disponemos de una ayuda visual, solemos tener problemas para navegar, en todas
las páginas cuando se posa el cursor del ratón en una dirección podemos ver en la
barra de tareas del navegador a qué URL vamos a ir si hacemos clic, se imaginan
leer una url como esta:

¿Adónde voy a parar? ¿Cómo se llama la sección esa? ¿Web o Gobierno? No

entiendo, y a que vosotros tampoco os daréis cuenta… esto se debe a que no
posee ninguna ayuda visual, ni tampoco las imágenes son accesibles debido a
su carencia de atributos alt="…” y title="…", entonces al depender de elementos
como las imágenes, es raro que podamos navegar con URLs de este tipo.

http://www.elpais.es/articulo.html?xref=20030923elpepucul_1&br
/>type=Tes&anchor=elpporcul

¿A qué sección del diario irá? ¿Cómo se llama el artículo?

Muchos lectores de pantalla, leen o relatan las direcciones de los enlaces, estos
enlaces se crean de una forma terriblemente matemática haciendo casi imposible
un relato entendible, y ni hablar de recordar esta dirección.

Error 7: Código prehistórico reemplazable con CSS

En muchos casos se pueden ver cosas, como en la Web de correos de España,

donde utilizan el tag <font> con una clase de CSS para hacer las letras en negrita,
lo hace de esta forma:

<p><font class="txtNegrita">Lugares y medios de exposición.</font><br />

En las Jefaturas Provinciales de Correos y Telégrafos, Ceuta y Melilla…</p>

Cuando deberían haber hecho:

<h3>Lugares y medios de exposición</h3>

<p>En las Jefaturas Provinciales de Correos y Telégrafos, Ceuta y Melilla…</p>

Luego en una plantilla CSS darle el aspecto gráfico que quieras, este ha sido un
ejemplo, imaginen si sacaran todos los elementos innecesarios y se ubicaran los
elementales se ahorrarían mucho peso entre páginas.
Otro ejemplo mal aplicado lo podemos ver en la Web de correos, cuando quieren
hacer una negrita o un énfasis en una palabra utilizan de nuevo el tag <font> con
una clase, cuando podrían usar el tag <b> o el tag <strong> para dar más
significado semántico al asunto:

El ejemplo correcto sería:

<p>Junto a este viaje al pasado, el <strong>Museo Postal y Telegráfico</strong>

abre una ventana al futuro con la exposición de una maqueta del satélite
Hispasat.</p>

Y en la plantilla de CSS ponerle el color o el tipo de letra que desees.

Error 8: Olvidarse de la semántica, los documentos son una pila de

información sin clasificar…

Eso mismo, una pila de información sin clasificar, la semántica es una de las áreas
de los estándares Web que más importancia tiene que haber en las páginas
que ofrecen contenidos y servicios públicos, de hecho en todas las páginas debería
haber un mínimo de semántica, uno de los problemas que observo es que muchas
empresas grandes que tienen suficiente dinero para hacer estas cosas bien, lo
hacen al revés, cuando la semántica no sólo nos permite darle un significado “esto
es un título", “esto es un párrafo", “esto es una cita” sino también que nos dan
clasificación y jerarquía dentro de un documento, por ende puede retornar más
beneficios.

La jerarquía viene de los elementos como los títulos, listas, definiciones, y la

clasificación nos permite editar esas jerarquías desde CSS, en pocas palabras que a
mejor jerarquizado y clasificado esté el código, más fácil es controlarlo con un CSS.

Ejemplo horrendo de la Web de Correos de España, para hacer un título y un

párrafo utilizan todo este código:

<tr valign="bottom"><!-- 1-->

<td height="24″ valign="bottom"><a href="/identidad/”

class="TitSeccionBold">Una nueva imagen, una nueva identidad</a></td>
</tr><tr>
<td height="6″ valign="top"><img src="/comun/img/lin_g_sep_largo.gif”
width="310″ height="1″></td>
</tr><tr class="txtNormal">
<td height="25″ valign="top” class="txtNormal"> Correos rediseña su marca y
todos sus elementos clave de identificación visual <a
href="/00/img/nuevaimg.avi” class="txtLink">Ver vídeo</a></td>
</tr>

Como podemos apreciar en el código, prevalecen las ganas de armarlo todo

en el mismo documento de HTML, cuando podría estar mucho más limpio,
semántico y controlado por unas pocas reglas de CSS, no entiendo por qué utilizan
el lado más complejo, es como pintar un edificio entero con un aerógrafo para
maquetas.
Error 9: Sin estilos la página no se entiende, ni tiene significado…

Volvemos a otro error que deriva y tiene mucha relación con el error 8, la
clasificación y jerarquías de los elementos de un documento, sin esta práctica el
documento no se puede navegar con facilidad sin hojas de estilo, por ejemplo los
muchachos que hicieron administración.es tuvieron la demente idea de hacer un
sitio aparte para los discapacitados, “una versión texto", una pérdida total de
tiempo, pero ya que estamos, esta versión cuando no se visualizan los estilos queda
algo así:

No se imaginen la versión con imágenes como se podría ver sin hojas de estilo…
mejor ni intentarlo que me deprime…
Un ejemplo digno de seguir es:

Mi página web por ejemplo, no requiere de un esfuerzo visual para comprender

entre lo que es un título y un párrafo, de hecho, cuando vemos una página de este
modo podemos comprender la forma en que un lector de pantalla lee…

Error 10: Documentos Web que son enemigos de la impresora

Leer en la pantalla es muy molesto según indican las pruebas con usuarios, de
hecho casi todos los días en el metro puedo ver como la gente lee páginas Web o
documentos impresos desde el navegador, y la calidad de ellos es de regular a muy
mala cuando debería ser buena, apta para la lectura.

Un error común es ver el típico “imprimir página", dado que todos los navegadores
tienen incorporado la versión de imprimir (iconos, botones, accesos directos) esto
me supone más que una ayuda una molestia más, un botón más al que hay que
prestarle atención en una página, otro botón más que se confunde entre la maraña
de enlaces y botones hechos en el documento Web, y además de funcionar con
Javascript, lo cual le quita ya la ventaja de ser accesible.

Otro error es directamente no hacer nada, ni una versión inútil para imprimir,
ni una hoja de estilos, la solución para esto es agarrar de la oreja a los
desarrolladores y explicarles un ejemplo como este:

Hacer una hoja de estilos que adapte a la impresión, en la cabecera, poner esa hoja
de estilos identificando como si fuera apta para impresión (usando media="print")
luego con el “vista preliminar” del navegador hacer las pruebas e ir quitando
elementos innecesarios, como imágenes de navegación inútiles, barras de
navegación, menús de navegación, banners, etc. dejar sólo los títulos y textos e
imágenes de importancia.
Pueden ir a este ejemplo en esta misma Web, este mismo artículo hacer “vista
preliminar” o “imprimir” y tendrán mejores resultados que los que hemos visto.

Cosas de este estilo se ven a montones, la cantidad de documentos que no se

pueden imprimir por una cuestión de dejadez o de hacer las cosas sin saberlas, sin
estudiarlas.

Cuesta más en tema dinero, tiempo, cantidad de gente para producir

versiones “paralelas” para imprimir, que hacer 1 documento que controle la
impresión de todo un mar de documentos en el sitio.

Error 11: Ventanas emergentes, inútiles, sin sentido y no muy

accesibles

Otro tumor en la Web son las ventanas emergentes, las cuales conocemos por
“popups". Éstas no son más que un tumor que molesta, permanentemente y no
agrega nada de valor.

Error 12: Instale Flash, o de lo contrario no podrá navegar el sitio Web

Uno de los errores más comunes y que todavía se pueden apreciar en la Web. Me deleita un
montón ver ejemplo como 2advanced, que no ofrecen su contenido siquiera en una versión
alternativa, por ejemplo saber que puedo ver sus producciones de video (ya tengo
QuickTime instalado) o por ejemplo leer sus noticias, y así no tengo que instalar otro
programa más.

Puede que sea un poco cerrado el pensamiento, pero la idea es poner (aunque sea) un
acceso a algo un “saltar introducción", Kursor.tv parece no importarle y todo su negocio
depende de una película en Flash, basta que alguien no tenga Flash instalado para que se
vaya a otra Web de su competencia. Pueden ver que en la página Kursor.tv no hay indicios
de accesos a versiones en HTML, tampoco hay teléfonos a mano…

Si utilizan Flash, hay que pensar por la gente que no lo tiene instalado, puede que esa
misma gente incluso no tenga Javascript o no tenga la versión correcta del plug-in de
Flash, suele ocurrir que todo funciona mal o no se esperan los resultados, los plugins de
detección no averiguan a la perfección que tipo de plugins versión 00000000.000000222
tenías instalada…

Otra de las cosas es utilizar Flash y no ofrecer una réplica de tu sitio indexable y navegable
para personas con discapacidad motora por ejemplo (usan el teclado para moverse en un
sitio…) es otro error tirando a crimen.

Error 13: Javascript supera todas las tecnologías de lenguajes, HTML,

CSS, PHP, Javascript es la hostia…

No abuse del Javascript, amigo desarrollador, estoy realmente agotado de ver como
funcionan los scripts en los navegadores, que si tengo que usar Internet Explorer para ver
un menú importante, para acceder a mi cuenta bancaria… basta ya de abusar de
Javascript.

No quiero decir que dejes de utilizarlo, sino haz las cosas con precaución y por
favor, examina los resultados en otro ordenador que no sea tu mega-ordenador con
Internet Explorer build 6.001324, porque con mi Portátil PC Asus y Windows 2000 con
Internet Explorer 5.993888 no puedo usarlo correctamente, y mi amigo Juan con su
Internet Explorer 5.5 (5.789000) tampoco puede… Javascript no es idéntico entre
navegadores, menos entre Internetes Exploretes, de hecho he podido comprobarlo
utilizando 6 PCs distintas con diferentes Explorer y notar diferencias que entre algunas
eran abismales.

Ni hablar de usar otra cosa que no sea el alabado Internet Explorer, pongamos Opera,
Netscape 7 o Mozilla, no… ¿para qué?… Tampoco hablar de utilizar Internet Explorer para
Mac, no… ¿para qué?

Javascript no es un lenguaje perfecto para ser el esqueleto de un website, ni mucho

menos para controlar la interacción entre documentos, os digo algo, si desactivo
Javascript en mi navegador el sitio de Correos de España se navegable en un 20%, no llego
siquiera a enviar una postal desde la página de “Envíe una postal por Internet",
decepcionante.

Error 14: HTML no es un lenguaje de modelaje de páginas

Algo que cuesta de entender, es que, HTML no es un lenguaje de moldeo de páginas, de

hecho el HTML no tiene estética alguna, solo significado, es un lenguaje para clasificar
contenidos, que luego con otra tecnología se editarán los factores visuales, es por eso, que
es estúpido utilizarlo para desarrollar layouts, colorear páginas, posicionar elementos…
para esas cosas se ha creado CSS.

Podremos ver que el gran porcentaje de sitios utilizan tablas para hacer layouts, esto no
está bien, pueden ver el ejemplo del Error 8, las tablas son elementos que fueron creados
para representar datos, no para crear esquemas o maquetar un sitio entero, es como si
utilizáramos gasolina de avión en nuestro coche, la gasolina quizás haga que nuestro motor
funcione, pero tarde o temprano funcionará mal, porque la gasolina de avión tiene más
octanos y está diseñada para motores grandes, motores de aviones.

Error 15: HTML comentado, es igual a más peso en la página

He visto cosas aberrantes, pero hay cosas que no se pueden creer, por ejemplo, es común
en desarrollos comentar ciertas partes de un código, en programación puede incluso
ahorrar mucho tiempo por que cuando se comenta no se borran cosas, o simplemente se
comentan para probar cosas… pero en HTML, cuando se comenta una línea, el servidor
Web procesa la página, y el código comentado, enviándolo al ordenador cliente, de modo
que el mismo navegador es el que no procesa este código comentado.

Un error básico es utilizar los comentarios de HTML para comentar largas porciones de
código HTML, los comentarios de HTML están hechos para realizar ayudas, o para hacer
anotaciones.
El problema comienza cuando se comenta 10 líneas de código en HTML éste sigue
apareciendo y siendo procesador por el servidor, debería comentar esto con otro tipo de
lenguaje, de modo que sea procesado directamente en el servidor Web y no en el
navegador.
Ejemplo de una porción de código encontrada en la web de correos:

<!--<tr> <!-- 4-->

<!–<td height="24″ valign="bottom"> <a href="/01/02/0102_b.asp”
onclick="javascript:pulseExt(’men01′);” class="TitSeccionBold">
Cartas Certificadas</a> </td>
</tr>
<tr>
<td height="6″ valign="top"><img src="/comun/img/lin_g_sep.gif” width="310″
height="1″></td>
</tr>
<tr>
<td class="txtNormal” height="25″ valign="top">Para enviar con total tranquilidad sus
comunicaciones especialmente importantes, con entrega bajo firma.</td>
</tr>
<tr>
<td height="5″><img src="/comun/img/pix_fondo.gif” width="1″ height="1″></td>
</tr>–>
<!– 5–>
<!–<tr>
<td height="24″ valign="bottom"> <a href="/00/04/0004.asp” class="TitSeccionBold">
Acceso a Internet</a> </td>
</tr>
<tr>
<td height="6″ valign="top"><img src="/comun/img/lin_g_sep.gif” width="310″
height="1″></td>
</tr>
<tr>
<td class="txtNormal” height="25″ valign="top">Acceda a internet mediante
línea de alta velocidad. Disponible en más de 35 oficinas
distribuidas por todo el territorio.</td>
</tr>–>

Error 16: Utilizar hojas de estilo en línea o embebidas en los

documentos

Un factor importante en los documentos Web debe ser la separación del contenido de la
presentación, de modo que el HTML sea para contener y el CSS para presentar, por eso,
utilizar hojas de estilos embebidas en el mismo documento no es sano.

En muchas páginas institucionales vemos como embeben el código de las hojas de estilos
en la cabecera, en vez de tener 1 hoja de estilos externa con la información para la
estructura y posicionamiento de los elementos principales, y otra hoja de estilos que varía
de sección en sección, 1 para todas las páginas, con la información mínima, y la otra es una
información única para realizar un posicionamiento de un elemento o algo que se
encuentre en 2 o 3 páginas, aquí estamos dividiendo recursos, y economizando trabajo.
Algo comun que vemos en la Web de Correos de España y el diario El País:

<head>
<style>
.TA
{
scrollbar-3dlight-color:#666666;
scrollbar-arrow-color:#666666;
scrollbar-base-color:#666666;
scrollbar-darkshadow-color:#666666;
scrollbar-face-color:#e2e2e2;
scrollbar-highlight-color:#e2e2e2;
scrollbar-shadow-color:#c0bebe
}
</style>
</head>

Nótese que esta estupidez solo hace que un documento de HTML contenga caracteres que
no se puedan cachear de ninguna forma tradicional, de hecho cada vez que el usuario
recurra a esta página, tendrá que descargarse y procesar esta porción de código, que es
poca si, pero cuenten unos 70 documentos, y hagan el cálculo de cuantos Kilobytes llevan
sumando.

En la Web de Correos, se pueden observar cosas como porciones masivas de código CSS en
todos los documentos, no sólo ubicada entre los elementos sino en el medio del documento

Error 17: Javascript no modularizado

Otro grave error parecido, al caso de las hojas de estilo es que no se modularíza el código
Javascript, de ninguna forma, ni usando un lenguaje de scripting siquiera.

Esto es muy común cuando utilizan Javascript para menús, que se repita siempre la misma
historia de siempre, se repiten incansablemente porciones gigantes de código Javascript,
¿No es mejor modularizar esto de esta forma?

<script type="text/javascript" src="js/GestionaPestana_arrays.js"></script>

Si modularizas código de Javascript, éste se descargará una vez y será cacheado por el
cliente y re-utilizado cada vez que se necesite.

Error 18: Elementos Meta inservibles…

Si hay algo que deben enterarse medio millón de desarrolladores es que, los elementos
metas prácticamente son inservibles, de hecho los buscadores como Google ya no procesan
ni indexan gracias a los elementos meta, dado que nadie los desarrolla bien, dado que los
meta keywords y meta description no definen de forma correcta los contenidos principales
de un sitio, Google los pasa por alto, y muchos buscadores también lo hacen así.

Las tecnologías de ahora permiten buscar mejor en el contenido, que fiarse en dos
elementos creados por un departamento de marketing.

La solución es dejar los elementos meta que sirven a los navegadores, como los que
especifican la codificación del archivos (si es UTF-8 u ISO-8859-1), los que controlan los
robots de los buscadores, y nada más. El resto sobra.

La solución es implementar más los elementos <link> que realmente ayudan más
distribuir contenidos de un sitio que los tags meta.
Ejemplos de metas inservibles

<meta name="generator" content="BBEdit 6.5.2">

<meta name="origen” content="EL PAÍS">
<meta name="description” content="El principal periódico europeo en español">
<meta name="author” content="El País S.L. - Prisacom S.A.">
<meta name="organization” content="El País S.L.">
<meta name="locality” content="Madrid, España">
<meta name="lang” content="es">
<meta http-equiv="Content-Type” content="text/HTML; charset=iso-8859-1″>
<meta name="keywords” content="El país, diario, periodico, newspaper, prensa, press,
noticia, news, internacional, international, world, nacional, national, nation, España,
spain, información general">
<meta content="900″ http-equiv="REFRESH">
<meta name="rating” content="safe for kids">
<meta name="Author” content="Filmac centre s.l.">
<meta name="Language” content="es">
<meta name="revisit-after” content="30 Days">
<meta name="audience” content="general">
<meta name="privacy” content="http://bancaja.es/legal/notalegal.asp">

Error 19: Mapa Web del sitio

¿Para qué hace falta una página con un millar de enlaces? ¿El usuario no puede encontrar
lo que busca? Entonces eso sucede por 2 factores:

1. Página mal organizada

2. Posee un buscador que no hace nada útil.

Está claro, en el 100% de los casos noto que el mapa del sitio es algo inútil, no ayuda en
nada, el usuario no tiene por qué mirar entre un millar de enlaces, no hace falta, tampoco
le ofrece la solución instantánea.

La solución es un buen buscador, de modo que ni bien entro a un sitio, no tengo que estar 1
hora inspeccionando una página con 700 enlaces, hacer un mapa del sitio de un sitio de
banco es prácticamente una salvajada, igualmente para aquellos sitios que poseen 3
secciones y su página Web consta de 50 documentos.

Nada mejor que un buen buscador y una buena arquitectura de la información.

Error 20: Buscador ciego… buscador inútil

No existe nada más inútil que un buscador que ¡no puede buscar!, de hecho, si entramos a
un website normal como el diario El País y busco artículos, no sale nada útil, ni la
categoría.
Para empresas que disponen de presupuestos grandes, no tener un buscador decente es un
punto en contra.

El contenido esencial de minid.net está 100% indexado y se puede buscar a la perfección,

usar grep patterns incluso.
Error 21: La Web no es la televisión

Responsables de un sitio Web, Internet no es una televisión, es por eso, que entrar a un
sitio es como el diario El País es para ver los titulares, no para encontrarse una pantalla
negra, con una publicidad de Wanadoo ADSL de 700 píxeles por 700 píxeles, como si fuera
un anuncio publicitario de televisión.

Lo que más me enerva de estos casos, es que uno no puede hacer nada, sólo tiene que
esperar a que el comando redirect entre en acción.

Muy mal. ¿No basta con cobrar el servicio que tienen que poner este tipo de cosas todavía?

Error 22: Frames no, si us plau

Los frames no son más que una molestia para el desarrollo, no una comodidad,
habiendo 150 artículos dedicados a hablar sobre las desventajas de los frames, todavía se
siguen utilizando, ¿Qué anda mal?

Si lo que desean es ahorrarse la carga de un documento, utilizad includes de algún

lenguaje de scripting como lo es PHP, ASP, JSP, o Python, da igual que lenguaje, pero es
mejor que utilizar un Frame que trae cientos de problemas a tus clientes, para imprimir
son un parto, para desarrollar también, que si tengo que controlar lo que pasa en un lugar,
y en otro frame, que si utilizo Javascript para colorear algo, no basta de frames, son una
pérdida de dinero terrible.

Error 23: Formularios inaccesibles

Un detalle normal, como si estuviéramos hablando de contaminación global, son los

formularios inaccesibles. En muchos sitios se hacen formularios inaccesibles, de tal forma
y color que se tornan inservibles, hace falta un ratón e Internet Explorer 6 para que
funcionen.

Además algo muy común es ver cosas como que un botón no es un botón de formulario,
sino una imagen o una tabla de HTML que tiene celdas que a su vez contienen imágenes y
un pequeño código Javascript que envía los datos de ese formulario.

Ahora yo me pregunto. ¿Por qué tanta complejidad? ¿Qué hace el HTML para que se lo
deje de lado? ¿Es Javascript la mejor opción para hacer formulario? Pues la respuesta es
no. Primero porque sin Javascript activado, éste no tiene validez ya, o sea, no existe
“degradación", si fuera posible que sin Javascript el formulario es procesable, vaya y pase…
pero como esto no es posible, entonces no deberían utilizar Javascript para los formularios.

Otro punto importante es la accesibilidad de los formularios, que carecen de etiquetas

esenciales como y otros materiales de accesibles que hacen de llenar un formulario una
delicia, como los atributos tabindex="...", accesskey="...", <fieldset>, <legend>, etc.
Error 24: Tipografías mal aplicadas

Una de las cosas que podemos notar es que, la gran mayoría de los desarrolladores no sabe
cómo aplicar las tipografías en la Web. El primer problema es encontrarse ejemplos como
Administración.es, que utiliza tipografías demasiado pequeñas para un portal donde el
espectro de gente debe ser más amplio, recuerda que en este tipo de sitios, el 99% de la
gente no será de 20 años con una salud espléndida.

El segundo problema es mala utilización de medidas, por ejemplo podemos notar que en
muchos casos, utilizan medidas en puntos (pt) para tipografías que se visualizan en
pantallas, cuando los (pt) son ideales para sistemas de impresión.

También una de las malas prácticas es utilizar medidas en píxeles, lo cual elimina a
Internet Explorer (sea 3, 4, 5, 5.5 o 6) de que pueda controlar el tamaño de las tipografías,
esto se resume que si un usuario quiere ver las tipografías un nivel más del normal, no
puede, no pasa nada, con otros navegadores la cosa es diferente, pero hey… el 95% de los
damnificados utilizan Internet Explorer… ¿Qué putada no :)?

Error 25: Archivos multimedia, PDF, etc.

Otra de las locuras es abusar de los archivos multimedia para representar datos en la Web,
es casi insano tener 400 PDFs en un sitio Web, cuando esos archivos pueden estar hechos
en HTML, el PDF no fue hecho para reemplazar al HTML, no se mezquinen con estas
tecnologías.

Antes de presentar un PDF, asegurarse de que ese documento está hecho en HTML, si no
tiene nada que ver con la información avisarle al usuario que se le va a servir un archivo
PDF, utilizad íconos y enlaces de texto, y proporcionarle al usuario un medio para llegar a
la instalación del Adobe Acrobat en caso de que el no posea el plug-in.

He visto cosas, en la Web de Correos de España por ejemplo, como utilizan muchos
frames, algunos PDFs se cargan en los frames interiores, logrando así una compleja
lectura, ya es una pesadilla que el PDF se cargue en la misma ventana.
2.2. MARCO TEORICO VARIABLE DEPENDIENTE Y VARIABLE
INDEPENDIENTE

ARQUITECTURA DE APLICACIONES WEB

La (WWW) está basada en el modelo Cliente/Servidor. El cliente principal en

el (WWW) son los browsers o navegadores que solicitan información al

servidor. Las peticiones de información en el Web se realizan a través de la

red (Internet/Intranet), utilizando el protocolo HTTP.

Los modelos de capas son utilizados por las aplicaciones Web dentro de la

filosofía Cliente/Servidor y los modelos más habituales son las arquitecturas

de dos y tres capas.

Arquitectura de dos Capas

 Utilizados en esquemas poco complejos

 Los datos y los servicios Web aparecen juntos

 Difícil de separar los datos de la “lógica de negocio”

 Menor seguridad en los “datos corporativos”

 El cliente recibe los datos y la información directamente del servidor

Arquitectura de tres Capas

Utilizados en esquemas más complejos

 Los datos y los servicios Web aparecen separados

 Facilidad para separar datos de la “lógica de negocio”

 Mayor seguridad en los “datos corporativos”

  El cliente recibe los datos y la información de forma indirecta a través del

servidor

 Los servidores de aplicaciones actúan como un enlace entre los servidores

Web y las aplicaciones empresariales

 Se fomenta la escalabilidad del sistema, la seguridad y la reutilización de

código.

E-Business

Es la aplicación de las tecnologías de la información para facilitar la

compraventa de productos, servicios e información a través de redes públicas

basadas en estándares de comunicaciones. Es cualquier actividad empresarial

que se efectúa a través de Internet, no sólo de compra y venta, sino también

dando servicio a los clientes y colaborando con socios comerciales. La

combinación de Internet con los sistemas de información tradicionales de una

organización (Web + Tecnología de Información), permite potenciar los

procesos vitales de negocios que constituyen la base y esencia de una

empresa. Las aplicaciones basadas en los conceptos de e-business se

caracterizan por ser interactivas, con alta intensidad de transacciones, y

porque permiten un relanzamiento de los negocios hacia nuevos mercados.

Tecnología PHP

PHP es un lenguaje de scripts open source que corre al lado del servidor Web

utilizado para la creación de páginas Web dinámicas. Esta tecnología fue

creada originalmente en 1994 por Rasmus Lerdorf como un conjunto de

herramientas (conocidas como PHP/FI y posteriormente PHP 2.0) que

permitirían tener un dinamismo en el Web.

Dada la naturaleza de ser open-source (código abierto) estas herramientas

ganaron gran popularidad y en 1997 Zeev Zuraski y Andi Gutmans

rediseñaron el parser, bautizándolo con el nombre de PHP3 .Poco después se

volvió a rediseñar y dio lugar a lo que actualmente conocemos como PHP4.

Dentro de PHP existen muchos conceptos de Perl, C y Java por lo que gracias

a esta sintaxis es más fácil familiarizarse con él.

El código PHP se encuentra incrustado en documento HTML por medio de

tags como veremos a continuación en este ejemplo:

En este ejemplo podemos ver que para incluir código PHP en HTML

activamos el tags “<?php”, posteriormente incluimos las instrucciones

correspondientes y para finalizar cerramos nuestro tags con “?>”. Dentro de

un mismo documento se puede activar y desactivar los tags de PHP tantas

veces sea necesario.

Características Principales de PHP

 Tecnología que genera contenidos dinámicos y se encuentra embebido

en archivos HTML.

 Dispone de un gran número de librerías de conexión con la mayoría de

los manejadores de base de datos para el manejo de información

permanente en un servidor.

 Nos proporciona soporte a múltiples protocolos de comunicación en

Internet (HTTP, IMAP, FTP, LDAP, SNMP, etc.)

 El código del intérprete esta accesible para permitir posibles mejoras o

sugerencias acerca de su desarrollo (Esta escrito en lenguaje C).

 No es necesario adoptar alguna tecnología especial en lo que a Web

Server se refiere ya que puede correr sobre cualquier plataforma.

 Consume muy pocos recursos del servidor, no es necesario tener un

equipo muy poderoso.

PHP y las Bases de Datos

PHP es capaz de conectarse con muchos manejadores de bases de datos

diferentes tales como PosgreSQL, Oracle, Informix, etc. Sin embargo uno de

los más utilizados con esta tecnología y a la facilidad de su uso es MySQL.

Todas las funciones comienzan con el prefijo “mysql_”, y si se cambia de

manejador de base de datos solo cambiara el prefijo que corresponderá al

nombre de cada uno de ellos, por ejemplo si quisiéramos utilizar ODBC, el

prefijo de las funciones de manejo de datos seria “odbc_” o en el caso de

trabajar con Oracle cambiaria a “oracle_”.

Las funciones más utilizadas son los siguientes:

La comparación general de las tecnologías ASP, JSP y PHP que nos permiten

la creación de las páginas dinámicas que corren del lado del servidor se

muestra en la siguiente tabla:

 SGBD MY SQL 5.0

MYSQL es un sistema de gestión de base de datos relacional, multihilo y

multiusuario con más de seis millones de instalaciones. MYSQL AB desde

enero de 2008 una subsidiaria de Sun Microsystems desarrollado MYSQL

como software libre en un esquema de licenciamiento dual.

Por un lado y por el otro se ofrece bajo la GNU GPL para cualquier uso

compatible con esta licencia, pero las empresas que quieran incorporarlo en

productos privativos pueden comprar a la empresa una licencia específica que

les permita este uso. Está desarrollado en su mayor parte en ANSI C.

Al contrario que proyectos como Apache, donde el software es desarrollado

por una comunidad pública y el copyright del código está en poder del autor

individual, MYSQL es propiedad y está patrocinado por una empresa privada,

que posee el copyright de la mayor parte del código.

Esto es lo que posibilita el esquema de licenciamiento anteriormente

mencionado. Además de la venta de licencias privativas, la compañía ofrece

soporte y servicios. Para sus operaciones contratan trabajadores alrededor del

mundo que colaboran vía Internet. MYSQL AB fue fundado por David

Axmark, Allan Larsson y Michael Windenius.

La serie en desarrollo de MYSQL SERVER actualmente, es la 5.1 al cual se

añaden nuevas características en relación a la serie 5.0. La serie de

producción actual de MYSQL es 5.0, cuya penúltima versión estable es la

5.0.26 lanzada en octubre de 2006. Actualmente, se puede descargar la serie

5.0.27. La serie de producción anterior fue la 4.1, cuya versión estable es 4.1.7

lanzada en octubre de 2004. A estas versiones de producción sólo se arreglan

problemas, es decir, ya no se añaden nuevas características. Y a las versiones

anteriores solamente se les corrigen bugs críticos.

 HERRAMIENTAS QUE SE UTILIZARÁN PARA EL DISEÑO DE LA

PÁGINA WEB

En el diseño de la página se manejaron diversas herramientas de diseño

como Corel Draw, Macromedia Flash 8, Dreamweaver 8 y el Flash

Optimizer.

Macromedia Flash 8

Hace aproximadamente siete años Macromedia ya estaba considerada

entre líderes del mercado mundial de gráficos y animaciones con su director,

verdadero estándar de la industria compraría FutureSplash para acrecentar

sus posibilidades y convertirlo en el programa de animación para la Web por

excelencia, denominándolo FLASH.

Macromedia Dreamweaver 8

Macromedia Dreamweaver 8 es un editor HTML profesional para diseñar,

codificar y desarrollar sitios, páginas y aplicaciones Web: Tanto si desea

controlar manualmente el código HTML como si prefiere trabajar en un

entorno de edición visual.

Además, Dreamweaver le permite crear aplicaciones web dinámicas basadas

en base de datos empleando etnología de servidor como CFML ASP: NET,

ASP, JSP y PHP.

Ventajas

 Que se puede programar sin saber lenguajes de programación.

 Se utiliza como si estuviéramos trabajando en un programa de

autoedición, ya que se puede incorporar elementos a la página, como texto,

imágenes, sonidos, etc.

 Consigue que un usuario “programe” sin saber programar, los

comportamientos. Se trata de funciones que se han pre programado de

modo que los datos que necesiten pueda ofrecerlos el usuario fácilmente

mediante cuadros de diálogo. También Dreamweaver traduce esos datos

creando correspondiente programa.

 Dreamweaver permite colocar elementos necesarios en la página Web

(botones, listas desplegables, cuadros de texto, etc.).

 En Dreamweaver se diseña la página en la ventana más grande.

 En ella vamos tecleando y añadiendo los distintos componentes a las

páginas que compongan el sitio Web mediante paneles con los que

también se puede modificar dichos elementos según nuestras

necesidades.

 Una vez que se activa Dreamweaver, esa ventana con página estará

rodeada de varios paneles con funciones prácticas para la creación de

sitios Web y sus páginas, como a continuación se presentan.

 Entorno de trabajo de Dreamweaver

1. Barra de menú principal. Contiene el menú con las opciones

principales del programa.

2. Barra insertar. Contiene varios botones distribuidos en fichas con

pestañas. Los elementos que contiene esta barra incorporan diferentes

objetos a la página Web (tablas, formularios, elementos multimedia,

caracteres especiales, etc.) Facilitando su inserción.

3. Barra de herramientas Documento. Contiene varios botones con las

funciones más comunes de Dreamweaver a la hora de diseñar la página Web.

4. Paneles. Contiene elementos especializados para diseñar la página Web.

Según el titulo de cada panel, podrá ver qué aspecto de la página

afectan sus elementos. Uno de los paneles más importantes es el panel

Sitio, ay que nos permite configurar el sitio Web en general.

5. Ventana de Documento. Es la ventana más grande en la que

trabajaremos diseñando la página Web. Suele ser útil maximizarla ver el

contenido de la página de un modo más completo.

6. Barra de estado. Muestra en todo momento la situación en que se

encuentra el usuario durante el diseño. Esta barra contiene el Selector de

etiquetas con el que podemos seleccionar una etiqueta que no tenga un

aspecto visible en la página: por ejemplo, la etiqueta Body que hace

referencia a toda la página Web, por tanto, se selecciona ahí.

7. Inspector de propiedades. Se trata de un panel que varía su contenido

dependiendo del objeto que seleccionemos en la página. Su función cosiste

en ofrecer los elementos que caracterizan al objeto que hayamos seleccionado

en la página para poder modificar esas características.

Microsoft Dreamweaver sistema que ha evolucionado a partir de un lenguaje

de programación, permitiendo diseñar páginas Web de forma visual en

lugar de programada, permite generar y retocar partes de las páginas con

lenguajes como HTML, XML, JavaScript, etc.

2.3 TERMINOLOGIA BASICA:

En informática, la World Wide Web, es un sistema de distribución de

información basado en hipertexto o hipermedios enlazados y accesibles a

través de Internet. Con un navegador web, un usuario visualiza sitios web

compuestos de páginas web que pueden contener texto, imágenes, videos u

otros contenidos multimedia, y navega a través de ellas usando hiperenlaces.

La Web fue creada alrededor de 1989 por el inglés Tim Berners-Lee y el belga

Robert Cailliau mientras trabajaban en el CERN en Ginebra, Suiza, y

publicado en 1992. Desde entonces, Berners-Lee ha jugado un papel activo

 guiando el desarrollo de estándares Web (como los lenguajes de marcado con

los que se crean las páginas web), y en los últimos años ha abogado por su

visión de una Web Semántica.

Estándares Web

Destacamos los siguientes estándares:

 El Identificador de Recurso Uniforme (URI), que es un sistema universal

para referenciar recursos en la Web, como páginas web,

 El Protocolo de Transferencia de Hipertexto (HTTP), que especifica cómo se

comunican el navegador y el servidor entre ellos,

 El Lenguaje de Marcado de Hipertexto (HTML), usado para definir la

estructura y contenido de documentos de hipertexto,

 El Lenguaje de Marcado Extensible (XML), usado para describir la

estructura de los documentos de texto.

Berners Lee dirige desde 2007 el World Wide Web Consortium (W3C), el cual

desarrolla y mantiene esos y otros estándares que permiten a los ordenadores

de la Web almacenar y comunicar efectivamente diferentes formas de

información.

Implicaciones sociológicas

La web, tal y como la conocemos hoy día, ha permitido un flujo de

comunicación global a una escala sin precedentes en la historia humana.
Personas separadas en el tiempo y el espacio, pueden usar la Web para
intercambiar- o incluso desarrollar mutuamente- sus pensamientos más
íntimos, o alternativamente sus actitudes y deseos cotidianos. Experiencias
emocionales, ideas políticas, cultura, idiomas musicales, negocio, arte,
fotografías, literatura... todo puede ser compartido y diseminado
digitalmente con el menor esfuerzo, haciéndolo llegar casi de forma
 inmediata a cualquier otro punto del planeta. Aunque la existencia y uso de
la Web se basa en tecnología material, que tiene a su vez sus propias
desventajas, esta información no utiliza recursos físicos como las bibliotecas
o la prensa escrita. Sin embargo, la propagación de información a través de
la Web (vía Internet) no está limitada por el movimiento de volúmenes
físicos, o por copias manuales o materiales de información. Gracias a su
carácter virtual, la información en la Web puede ser buscada más fácil y
eficientemente que en cualquier medio físico, y mucho más rápido de lo que
una persona podría recabar por sí misma a través de un viaje, correo,
teléfono, telégrafo, o cualquier otro medio de comunicación.

La web es el medio de mayor difusión de intercambio personal aparecido en

la Historia de la Humanidad, muy por delante de la imprenta. Esta
plataforma ha permitido a los usuarios interactuar con muchos más grupos
de personas dispersas alrededor del planeta, de lo que es posible con las
limitaciones del contacto físico o simplemente con las limitaciones de todos
los otros medios de comunicación existentes combinados.

El prefijo WWW en las direcciones Web

Es muy común encontrar el prefijo "WWW" al comienzo de las direcciones web

debido a la costumbre de nombrar a los host de Internet (los servidores) con los
servicios que proporcionan. De esa forma, por ejemplo, el nombre de host para un
servidor web normalmente es "WWW", para un servidor FTP se suele usar "ftp", y
para un servidor de noticias USENET, "news" o "nntp" (en relación al protocolo de
noticias NNTP). Estos nombres de host aparecen como subdominios de DNS, como
en "www.example.com".

El uso de estos prefijos no está impuesto por ningún estándar, de hecho, el primer
servidor web se encontraba en "nxoc01.cern.ch"14 e incluso hoy en día existen
muchos sitios Web que no tienen el prefijo "www".

El prefijo "www" es simplemente una elección para el nombre de subdominio del

sitio Web.

Algunos navegadores web añaden automáticamente "www." al principio, y

posiblemente ".com"" al final, en las URL que se teclean, si no se encuentra el host
sin ellas. Internet Explorer, Mozilla Firefox y Opera también añadirán "http:
//www." y ".com" al contenido de la barra de dirección si se pulsan al mismo
tiempo las teclas de Control y Enter.

Por ejemplo, si se teclea "ejemplo" en la barra de direcciones y luego se pulsa sólo

Enter o Control+Enter normalmente buscará "http://www.ejemplo.com",
dependiendo de la versión exacta del navegador y su configuración.

Tecnologías web

Las tecnologías web implican un conjunto de herramientas que nos facilitarán

lograr mejores resultados a la hora del desarrollo de un sitio web.

Navegadores web

 Mozilla Firefox
 Google Chrome
 Amaya
 Epiphany
 Internet Explorer
 Konqueror sobre Linux
 Lynx sobre Linux
 Netscape Navigator
 Opera
 Safari
 Seamonkey
 Shiira
 Maik Navigator
 Flock
 Arora
 K-Meleon

Servidores web

 CERN http
 Servidor HTTP Apache (libre, servidor más usado del mundo)
 Servidor HTTP Cherokee
 IIS
Otras tecnologías

 OAI-PMH
 CFM Coldfusion
 DHTML
 PHP
 ASP
 CGI
 JSP (Tecnología Java )
 .NET

Tipología web

 Buscador Internet
 Software social
 Portal web o CMS
 Bitácora o Web log / Blog
 Wiki
 Web 2.0
 CAPITULO III

ANÁLISIS Y DISEÑO DEL SISTEMA PROPUESTO

3.1. Descripción de la Metodología

Metodología RUP

El Proceso Unificado Racional (RUP) es un proceso de desarrollo de software y

junto con el lenguaje unificado de modelo (UML), constituye la metodología

estándar más utilizada para el análisis, implementación y documentación de

sistemas orientados a objetos.

Principios:

1.- Adaptar el proceso

Los procesos se adaptan a las características de la empresa.

2.- Equilibrar prioridades

Los requerimientos deben encontrarse en equilibrio con los recursos de la

empresa.

3.- Demostrar valor iterativamente.

El sistema se presenta al gerente para que verifique la estabilidad y calidad del

sistema.

Procesos Ciclo de Vida

a.- Fase de inicio

Se realizó el modelado del negocio de la empresa.

b.- Fase de elaboración

Se realizó los flujos de trabajo de los requerimientos del futuro sistema.

c.- Fase de Construcción

Se realizó los casos de uso, el análisis y diseño concluyendo con la

implementación y pruebas.

d.- Fase de Transición

Es el sistema terminado para ser utilizado.

3.2. Análisis

3.2.1. Definición de Requerimientos

 Registrar Proyectos

 Registrar Analistas

 Registrar Responsables

 Registrar zonas

 Registrar evaluación

 Registrar avances

 Registrar usuarios

 Consultar proyectos

 Consultar analistas

 Consultar responsables

 Consultar zonas o áreas

 Consultar evaluación

 Consultar avances

 Consultar usuarios

3.2.2. Modelo de negocio

Cliente o Entidad Realiza pedido de proyecto

personalmente o mediante web

Área Realiza pedido de proyecto

- Atiende pedido de proyecto

- Realiza análisis del proyecto
Analista - Evalúa el proyecto
- Evalúa la zona.
- Determina que se ejecute del
proyecto
- Supervisa avance del proyecto.
- Entrega del proyecto.
Responsable - Realiza el proyecto

- Registra el proyecto
- Registra al cliente o entidad
Usuario - Registra al áre
a
- Registra al analista
- Registra al responsable
 3.2.2. Diagramas de casos de uso

Real iza pedido de proyecto

CLIENT E/ENT IDA Regi stra al cli ente o entidad
(from CASOS DE U SO)
D (from CASOS DE U SO)
(from ACTORES)

Atiende pedido de proyecto

ANALIST A (from CASOS DE U SO)
(from ACTORES)
AREA
Regi stra al área
(from ACTORES)
(from CASOS DE U SO)
Real ii za anál isis de proyecto
Consulta Proyectos
(from CASOS DE U SO)
(from CASOS DE U SO)
Determ ina ejecutación del
proyecto
(from CASOS DE U SO)

Eval úa el proyecto
(from CASOS DE U SO)

Real iza el proyecto

(from CASOS DE U SO)
Supervisa avance del proyecto Regi stra avances
Entrega de proyecto (from CASOS DE U SO) (from CASOS DE U SO)

(from CASOS DE U SO)

Regi stra al responsable

RESPONSABLE
(from CASOS DE U SO)
(from ACTORES)

Regi stra el proyecto

(from CASOS DE U SO)

USUARIO
Regi stra al anal ista
(from ACTORES)
(from CASOS DE U SO)
3.3. Implementación de la Base de Datos

3.3.1. Modelado Conceptual

En el modelo conceptual identificamos las entidades de la empresa, así

como las relaciones que existen entre ellas.

Se identificaron las siguientes entidades:

 Analistas

 Responsables

 Proyectos

 Evaluación

 Zonas

 Usuarios

 Ejecución

 Avances

3.3.2. Diseño y Modela miento de base de datos con DBDesigner

3.3.3. Modelado Lógico
Una vez obtenido el modelo conceptual de la base de datos se comienza

con la actividad de Normalización. Se detallan las Entidades con sus

atributos y llaves primarias (Primera Forma Normal), así como las

relaciones entre las Entidades (Segunda y Tercera Forma Normal).

Base de Datos

Tablas y sus relaciones

 3.3.4. Modelado Físico

Una vez obtenido el modelo lógico de la base de datos, se determinan los

nombres de las entidades, nombres de los atributos y tipos de datos de

acuerdo a ciertos estándares con el propósito de dejar expedita la base de

datos para implantarla en un DBMS.

ANALISTAS

Cód_analista Nombres Apellidos Dirección

000001 Alberto Gonzáles Av. Manco Cápac 215
Minaya
000002 Julián Penacho Pérez Jr. De la Cruz 360
000003 José Castro Pozo Jr. Huaylas 215
000004 Pedro Morales Conde Av. Luzuriaga 650

Móvil Teléfono Profesión email

943214589 724158 Administrador ago_minaya@hotmail.com

943947852 728459 Ingeniero jpenacho@hotmail.com

943506789 724158 Ingeniero cri_cpozo@gmail.com

943526892 724589 Ingeniero pmconde@hotmail.com

RESPONSABLES

Cód_resp Nombres Apellidos Dirección

000001 Miguel Valladares Fierro Jr. Pomabamba 540
000002 Noe Gonzales Ortega Jr. Circunvalación
360
000003 Mario Morales Cabello Jr. Caraz 910

Móvil Teléfono Profesión email

943897589 724858 Ingeniero m_vallaf@hotmail.com

943969322 765259 Ingeniero noe_gortega@hotmail.com

943478189 724558 Ingeniero m_morales@gmail.com

 ZONAS

cod_zonas cod_analista descripción Distrito Ciudad Departamento

000001 000001 Urbana Ponto Huari Ancash

000002 000003 Rural Ponto Huari Ancash

000003 000002 Rural Ponto Huari Ancash

PROYECTO

cod_proyecto cod_analista descripción Fecha_inicio Fecha_termino

000001 000001 Residuos 2008/02/10 2008/04/15

sólidos

000002 000002 Agua mejorada 2008/05/12 2008/08/10

000003 000002 Cambio tuberías 2008/04/05 2008/08/10

agua y desagüe.

EJECUCIÓN

cod_ejecucion cod_responsable cod_proyecto descripción Fecha

000001 000002 000001 Iniciada 2008/03/10

000002 000003 000002 Iniciada 2008/09/08

000003 000001 000003 Iniciada 2008/09/21

 AVANCES

cod_ejecucion descripción Fecha

000001 Iniciada 10% 20008/03/10

000002 Iniciada 45% 2008/09/08

000003 Iniciada 60% 2008/09/21

USUARIOS

cod_usuario nombre Clave

000001 cristian 123321

000002 noel 152435

000003 jose 632514

 CAPITULO IV

INTERFACES

4. Diseño de Interfaces
4.1. Proceso de desarrollo de Interfaces

4.1.1. Interfaz Principal de la Página Web

4.1.2. Interfaz Proyectos

4.1.3. Interfaz Actores o Responsables

4.1.4. Interfaz Analistas

4.1.5. Interfaz Registro de Proyectos

4.1.6. Interfaz Consulta de Proyectos

4.1.7. Interfaz Consulta de actores o Responsables

4.1.8. Interfaz Registro de Analistas de Proyectos

4.1.9. Interfaz Actualizar Lista de Zonas

 CONCLUSIONES

1. Para desarrollar cualquier proyecto de software es necesario realizar un

perfil de esta, en donde se ve la viabilidad del proyecto.

2. Se pudo comprobar que la captura de requerimientos de los usuarios a

través del modelado de negocio es indispensable, puesto que es el punto de

partida para el desarrollo del software.

3. La metodología empleada en el desarrollo del software es el más idóneo

puesto que nos permite realizar los flujos de trabajo en varias iteraciones.

4. El desarrollo del software en su fase de construcción se logró llevar acabo

gracias a la flexibilidad del manejo de PHP 5 Y MySQL 5.

5. Se obtuvo un resultado satisfactorio del funcionamiento del módulo de

ventas.

6. Este web site ayudara a la empresa para que sea reconocida no solo

nacional sino internacionalmente.

7. Ayudara a dar más prestigio a la empresa, porque estará a la vanguardia

con la tecnología.

8. Mejorara su calidad empresarial, ventas, cotizaciones, proyectos ya que los

hará en forma interactiva y en tiempo real.