Your SlideShare is downloading. ×
Universidad san pedro ceais  proyecto de tesis
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Universidad san pedro ceais proyecto de tesis

2,079
views

Published on

sadsad

sadsad


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,079
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
73
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 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.
  • 2. 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
  • 3. DEDICATORIAEl presente trabajo está dedicado en primer lugar a Dios quien nosbrinda la sabiduría necesaria y el don del entendimiento para poderentender y administrar bien el proyecto en el cual vamos a trabajar.En segundo lugar agradecer a nuestros padres que son el motor ymotivo de nuestro estudio, los que más nos apoyan en esta dura carrerade la vida para así poder darles la satisfacción de nuestra carrera.En tercer lugar a nuestro asesor el Doctor Fernando Vega Huinchoquien nos nutrirá con la sabiduría y la experiencia para poderimplementar bien nuestro proyecto y este logre el nivel necesario yllegar a ser un buen proyecto.
  • 4. AGRADECIMIENTOEn primer lugar al Doctor Fernando Vega Huincho quien como asesordel curso nos va orientar y dar las pautas y metodología necesaria parapoder sacar el proyecto adelante.En segundo lugar a nuestra Alma Mater la Universidad San Pedro porhabernos brindado los conocimientos y estudios pertinentes para poderfinalizar nuestra carrera de manera satisfactoria para poderenorgullecer a nuestras familias, amigos y compañeros de laUniversidad.
  • 5. INTRODUCCIONLos avances tecnológicos de la computación y las comunicaciones porInternet 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 desarrollode pequeñas y grandes empresas, al permitir la globalización deproductos y servicios.El comercio también se ha visto beneficiado con estos avances, con elllamado E-commerce ó comercio electrónico.
  • 6. CAPITULO I1. 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.
  • 7. El diseñador del sitio debe entonces crear una declaración que clarifique elpropósito del sitio y qué visitantes pueden esperar alcanzar del sitio. Estoinspirará a diseñador del sitio que planee y proporcione un contorno detalladode 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 alargo plazo.El diseñador del Web site debe crear absolutamente este sitio con lasaudiencias previstas claramente en mente.Un diseñador del Web site debe entender que los visitantes de las razones y dela motivación entrarán en este sitio y también considerar si puede haberbastante 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 decrear 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 paralos cambios regulares en contenido del sitio. Esto es naturalmenteparticularmente evidente cuando el sitio se ocupa de acontecimientos recientesy las noticias y las agendas. Un contenido de los Web site se puede tambiénutilizar para lo más mejor posible anunciar de un producto o de un servicioparticular.Tener un Web site compatible en todas las plataformas y browsers de lacomputadora es también muy importante.Esto está llegando a ser aún más esencial en últimos días mientras que elvolumen 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 losdiseñadores del Web site en encontrar el camino medio y el código y loscomandos derechos que exhibirán una página con eficacia en todos losbrowsers y plataformas.
  • 8. Los Web site han formado ciertamente la manera que los negocios se funcionanhoy. Los consumidores ahora están comprando un grande muchos artículos enlí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 losclientes que hacen compras en el Internet, e indiscutible, atraerá un volumende 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.”
  • 9. 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 lageneración de tráfico (número de visitas a un sitio web) para cumplir losobjetivos de promoción del negocio vía Internet, sin embargo, en donde estánfallando es en la estrategia que han venido siguiendo para promocionar elnegocio, ya que en la mayoría de los casos se limitan a diseñar un sitio web sólopara tener presencia y erróneamente asumen que sus páginas serán localizadaspor los clientes potenciales sin tener que recurrir a un servicio profesional deposicionamiento.Esta idea, aunada a un presupuesto muy limitado de inversión en el proyecto dediseño del sitio web, han provocado en su conjunto que las empresas no esténlogrando su objetivo de promoción y el beneficio más que financiero y de
  • 10. posicionamiento del negocio, se reduzca al placer de ver su empresa publicadaen 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 ycomercialización, y nos sitúa en un escenario de nuevos y grandes retos, en elque estamos comprometidos a innovar o estaremos expuestos a perderposicionamiento 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.
  • 11. 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.
  • 12. 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.
  • 13. CAPITULO II2. MARCO TEORICO 2.1. ANTECEDENTES:25 Errores Comunes En Los Desarrollos WebError 1: Peso en la páginaPor mucho ADSL que podamos tener instalado, simplemente tener una página de150 KB a 200 KB es un crimen. Por ende el peso ideal tiene que rondar los 50 KB a80 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 dedescarga empieza a descender.Incluso en entornos de trabajo, donde hay una red de más de 5 máquinasutilizando 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ódigoestándar, bien programado, sin necesidad de eliminar atributos importantes comoel 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 KBEsto por supuesto es una medida hecha en la página de inicio de cada URL, perocon el paso de las revisiones, vemos que se repiten muchas cosas como porcionesde código, y más errores los cuales hacen que el peso de la página crezca a lo largode toda una trayectoria de estancia.En un caso ideal, puedo recomendar que en la página de inicio se carguen losarchivos más esenciales, como las hojas de estilos (luego hablaremos de ella) yalgunas imágenes vitales, de modo que el usuario pueda descargar por ejemplo 700Kb de información visitando 20 páginas y no 1,3 MB como en algunos exámenesque hemos verificado.
  • 14. Error 2: DTD inexistentesEs común ver que todos los documentos de un sitio no tienen una DTD que losidentifique positivamente como un documento HTML, de hecho, cada navegador alno encontrarse con un DTD se limita a cualquier cosa.Esto en el ambiente de desarrolladores, se conoce como Quirck Mode, y cuando unnavegador entra en Quirck Mode, utiliza en su totalidad todo su motor de armadode 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, oalgo como una torta de cumpleaños de 20 centímetros de diámetro, esto hace quetengas incertidumbre y termines preparando toda tu casa para algo que nosabes que va a ser… pero si tu amigo te hubiera dicho que te traía un cuadro de 2 x2 metros, hubieras preparado el mejor lugar y la pared justa para colgarlo sin tenerque remover en toda la casa.Los navegadores actúan de forma similar, cuando reciben un documento que noposee una DTD que lo identifique el navegador automáticamente se hace un líoutilizando su motor en su totalidad, técnicamente esto tiene muchasdesventajas, por ejemplo la utilización de todo el motor del navegador es como situviéramos que utilizar el 100% de nuestra capacidad cerebral para comprenderuna simple oración, cuando deberíamos utilizar solamente nuestros conocimientosde lengua castellana.<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">Error 3: Páginas sin el idioma especificadoBenvinguts!. Seguro que no identifican a simple vista que significa esta palabra,pues imaginen los parentescos entre palabras que puede haber en unapágina, y el significado distinto que te puedes encontrar, uno puede buscar lapalabra “home” y recibir una página en inglés con la palabra “home” que significacasa, pero… si “home” significa “hombre” en catalán, pero… ¿Qué hago mal?Define idiomas en el comienzo de cada documento, es fácil, todos loselementos de HTML heredan el idioma, solo basta ponerlo en elemento <HTML> ytodos los tags dentro de <HTML>...</HTML> contendrán contenido en un idiomaespecífico.Ejemplo:<HTML xmlns="http://www.w3.org/1999/xhtml" xml: lang="es” lang="es”>Si especificamos un idioma estamos mejorando la semántica deldocumento, diciéndole a un motor de búsqueda que quiere indexarnos quenuestro contenido está plagado de palabras en idioma castellano, pero puede quedentro de ese documento se encuentren palabras en inglés, catalán, francés.
  • 15. Un lector de pantallas o un navegador sonoro para gente con discapacidad auditiva,pronunciará mejor o utilizará una voz de sintetizador distinta cuando se encuentreuna palabra en otro idioma, de esta forma se pronuncian las palabras de formacorrecta, de lo contrario podrá escuchar una voz de sintetizador con pronunciacióninglesa 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áticosMuchos ejemplos de los que he revisado tienen títulos de páginas totalmentemolestos y no muy explicativos. Un caso muy gracioso que me da risa que la gentede 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 estotalmente inconcluso para los lectores de pantalla, por ejemplo un lector depantalla 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, cuandouno utiliza un sintetizador de voz, cada vez que ingresa a un documento lo primeroque se lee es el título de una página, por ende, a más cosas escriban, más inútil ylargo 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 queel usuario podría gastar todo un día para leer una simple página o navegarla Web institucional, ¿se imaginan qué decepción?Otras de las cosas que me causan gracia es la usabilidad de estos títulos, porejemplo 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 queencontrar algo en la barra a simple vista cuesta mucho más que si utilizaran enprimer lugar el nombre del sitio.
  • 16. Error 5: Sin imágenes navegar una página es imposibleNo debería de ser necesario la presencia de imágenes para navegar, aunque leagregan un sentido gráfico y proporcionan una ayuda visual muy grande, existegente que tiene discapacidad y no puede apreciar las imágenes, también puedeque el servidor al cual se accede no termina de enviar las imágenes, dando unerror, cuando pasa esto, la página queda cargada parcialmente, y se puede navegaren modo texto, si las imágenes tuvieran especificado el atributo alt="..." se podríandiferenciar muchas cosas, sin tener que recargar las imágenes o esperar a que elservidor Web funcione.El Banco Santander Central Hispano lo hace de una forma casi perfecta, la Web sepuede navegar sin imágenes dentro de todo se merece un aplauso, la gran mayoríade las imágenes tienen explicaciones coherentes y cortas, faltaría especificarlos atributos title="..." en cada enlace o cada imagen para desplegar un cuadroamarillo 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 unatributo title="..." de modo que esto solo beneficia los navegadores InternetExplorer.
  • 17. Error 6: URL matemáticas, casi imposibles de entender y recordarSi, matemáticas, algunas URLs son tan complejas de entender que si nodisponemos de una ayuda visual, solemos tener problemas para navegar, en todaslas páginas cuando se posa el cursor del ratón en una dirección podemos ver en labarra de tareas del navegador a qué URL vamos a ir si hacemos clic, se imaginanleer una url como esta:¿Adónde voy a parar? ¿Cómo se llama la sección esa? ¿Web o Gobierno? Noentiendo, y a que vosotros tampoco os daréis cuenta… esto se debe a que noposee ninguna ayuda visual, ni tampoco las imágenes son accesibles debido asu carencia de atributos alt="…” y title="…", entonces al depender de elementoscomo 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, estosenlaces se crean de una forma terriblemente matemática haciendo casi imposibleun relato entendible, y ni hablar de recordar esta dirección.Error 7: Código prehistórico reemplazable con CSSEn 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 unejemplo, imaginen si sacaran todos los elementos innecesarios y se ubicaran loselementales se ahorrarían mucho peso entre páginas.
  • 18. Otro ejemplo mal aplicado lo podemos ver en la Web de correos, cuando quierenhacer una negrita o un énfasis en una palabra utilizan de nuevo el tag <font> conuna clase, cuando podrían usar el tag <b> o el tag <strong> para dar mássignificado 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éliteHispasat.</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 deinformación sin clasificar…Eso mismo, una pila de información sin clasificar, la semántica es una de las áreasde los estándares Web que más importancia tiene que haber en las páginasque ofrecen contenidos y servicios públicos, de hecho en todas las páginas deberíahaber un mínimo de semántica, uno de los problemas que observo es que muchasempresas grandes que tienen suficiente dinero para hacer estas cosas bien, lohacen al revés, cuando la semántica no sólo nos permite darle un significado “estoes un título", “esto es un párrafo", “esto es una cita” sino también que nos danclasificación y jerarquía dentro de un documento, por ende puede retornar másbeneficios.La jerarquía viene de los elementos como los títulos, listas, definiciones, y laclasificación nos permite editar esas jerarquías desde CSS, en pocas palabras que amejor 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 unpá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 ytodos sus elementos clave de identificación visual <ahref="/00/img/nuevaimg.avi” class="txtLink">Ver vídeo</a></td></tr>Como podemos apreciar en el código, prevalecen las ganas de armarlo todoen 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é utilizanel lado más complejo, es como pintar un edificio entero con un aerógrafo paramaquetas.
  • 19. 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, laclasificación y jerarquías de los elementos de un documento, sin esta práctica eldocumento no se puede navegar con facilidad sin hojas de estilo, por ejemplo losmuchachos que hicieron administración.es tuvieron la demente idea de hacer unsitio aparte para los discapacitados, “una versión texto", una pérdida total detiempo, pero ya que estamos, esta versión cuando no se visualizan los estilos quedaalgo 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…
  • 20. Un ejemplo digno de seguir es:Mi página web por ejemplo, no requiere de un esfuerzo visual para comprenderentre lo que es un título y un párrafo, de hecho, cuando vemos una página de estemodo podemos comprender la forma en que un lector de pantalla lee…Error 10: Documentos Web que son enemigos de la impresoraLeer en la pantalla es muy molesto según indican las pruebas con usuarios, dehecho casi todos los días en el metro puedo ver como la gente lee páginas Web odocumentos impresos desde el navegador, y la calidad de ellos es de regular a muymala 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 navegadorestienen incorporado la versión de imprimir (iconos, botones, accesos directos) estome supone más que una ayuda una molestia más, un botón más al que hay queprestarle atención en una página, otro botón más que se confunde entre la marañade enlaces y botones hechos en el documento Web, y además de funcionar conJavascript, 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 losdesarrolladores y explicarles un ejemplo como este:Hacer una hoja de estilos que adapte a la impresión, en la cabecera, poner esa hojade estilos identificando como si fuera apta para impresión (usando media="print")luego con el “vista preliminar” del navegador hacer las pruebas e ir quitandoelementos innecesarios, como imágenes de navegación inútiles, barras denavegación, menús de navegación, banners, etc. dejar sólo los títulos y textos eimágenes de importancia.
  • 21. Pueden ir a este ejemplo en esta misma Web, este mismo artículo hacer “vistapreliminar” 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 sepueden imprimir por una cuestión de dejadez o de hacer las cosas sin saberlas, sinestudiarlas.Cuesta más en tema dinero, tiempo, cantidad de gente para producirversiones “paralelas” para imprimir, que hacer 1 documento que controle laimpresión de todo un mar de documentos en el sitio.Error 11: Ventanas emergentes, inútiles, sin sentido y no muyaccesiblesOtro 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 noagrega nada de valor.Error 12: Instale Flash, o de lo contrario no podrá navegar el sitio WebUno de los errores más comunes y que todavía se pueden apreciar en la Web. Me deleita unmontón ver ejemplo como 2advanced, que no ofrecen su contenido siquiera en una versiónalternativa, por ejemplo saber que puedo ver sus producciones de video (ya tengoQuickTime instalado) o por ejemplo leer sus noticias, y así no tengo que instalar otroprograma más.Puede que sea un poco cerrado el pensamiento, pero la idea es poner (aunque sea) unacceso a algo un “saltar introducción", Kursor.tv parece no importarle y todo su negociodepende de una película en Flash, basta que alguien no tenga Flash instalado para que sevaya a otra Web de su competencia. Pueden ver que en la página Kursor.tv no hay indiciosde 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 esamisma gente incluso no tenga Javascript o no tenga la versión correcta del plug-in deFlash, suele ocurrir que todo funciona mal o no se esperan los resultados, los plugins dedetección no averiguan a la perfección que tipo de plugins versión 00000000.000000222tenías instalada…Otra de las cosas es utilizar Flash y no ofrecer una réplica de tu sitio indexable y navegablepara personas con discapacidad motora por ejemplo (usan el teclado para moverse en unsitio…) 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 comofuncionan los scripts en los navegadores, que si tengo que usar Internet Explorer para verun menú importante, para acceder a mi cuenta bancaria… basta ya de abusar deJavascript.No quiero decir que dejes de utilizarlo, sino haz las cosas con precaución y porfavor, examina los resultados en otro ordenador que no sea tu mega-ordenador conInternet Explorer build 6.001324, porque con mi Portátil PC Asus y Windows 2000 con
  • 22. Internet Explorer 5.993888 no puedo usarlo correctamente, y mi amigo Juan con suInternet Explorer 5.5 (5.789000) tampoco puede… Javascript no es idéntico entrenavegadores, menos entre Internetes Exploretes, de hecho he podido comprobarloutilizando 6 PCs distintas con diferentes Explorer y notar diferencias que entre algunaseran 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 paraMac, no… ¿para qué?Javascript no es un lenguaje perfecto para ser el esqueleto de un website, ni muchomenos para controlar la interacción entre documentos, os digo algo, si desactivoJavascript en mi navegador el sitio de Correos de España se navegable en un 20%, no llegosiquiera 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áginasAlgo que cuesta de entender, es que, HTML no es un lenguaje de moldeo de páginas, dehecho el HTML no tiene estética alguna, solo significado, es un lenguaje para clasificarcontenidos, que luego con otra tecnología se editarán los factores visuales, es por eso, quees 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 noestá bien, pueden ver el ejemplo del Error 8, las tablas son elementos que fueron creadospara representar datos, no para crear esquemas o maquetar un sitio entero, es como siutilizáramos gasolina de avión en nuestro coche, la gasolina quizás haga que nuestro motorfuncione, pero tarde o temprano funcionará mal, porque la gasolina de avión tiene másoctanos y está diseñada para motores grandes, motores de aviones.Error 15: HTML comentado, es igual a más peso en la páginaHe visto cosas aberrantes, pero hay cosas que no se pueden creer, por ejemplo, es comúnen desarrollos comentar ciertas partes de un código, en programación puede inclusoahorrar mucho tiempo por que cuando se comenta no se borran cosas, o simplemente secomentan para probar cosas… pero en HTML, cuando se comenta una línea, el servidorWeb procesa la página, y el código comentado, enviándolo al ordenador cliente, de modoque 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 decódigo HTML, los comentarios de HTML están hechos para realizar ayudas, o para haceranotaciones.El problema comienza cuando se comenta 10 líneas de código en HTML éste sigueapareciendo y siendo procesador por el servidor, debería comentar esto con otro tipo delenguaje, de modo que sea procesado directamente en el servidor Web y no en elnavegador.
  • 23. 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 suscomunicaciones 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 mediantelínea de alta velocidad. Disponible en más de 35 oficinasdistribuidas por todo el territorio.</td></tr>–>Error 16: Utilizar hojas de estilo en línea o embebidas en losdocumentosUn factor importante en los documentos Web debe ser la separación del contenido de lapresentació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 estilosen la cabecera, en vez de tener 1 hoja de estilos externa con la información para laestructura y posicionamiento de los elementos principales, y otra hoja de estilos que varíade sección en sección, 1 para todas las páginas, con la información mínima, y la otra es unainformación única para realizar un posicionamiento de un elemento o algo que seencuentre 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;
  • 24. 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 queno se puedan cachear de ninguna forma tradicional, de hecho cada vez que el usuariorecurra a esta página, tendrá que descargarse y procesar esta porción de código, que espoca si, pero cuenten unos 70 documentos, y hagan el cálculo de cuantos Kilobytes llevansumando.En la Web de Correos, se pueden observar cosas como porciones masivas de código CSS entodos los documentos, no sólo ubicada entre los elementos sino en el medio del documentoError 17: Javascript no modularizadoOtro grave error parecido, al caso de las hojas de estilo es que no se modularíza el códigoJavascript, 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 mismahistoria 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 elcliente 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 elementosmetas prácticamente son inservibles, de hecho los buscadores como Google ya no procesanni indexan gracias a los elementos meta, dado que nadie los desarrolla bien, dado que losmeta keywords y meta description no definen de forma correcta los contenidos principalesde 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 doselementos creados por un departamento de marketing.La solución es dejar los elementos meta que sirven a los navegadores, como los queespecifican la codificación del archivos (si es UTF-8 u ISO-8859-1), los que controlan losrobots de los buscadores, y nada más. El resto sobra.La solución es implementar más los elementos <link> que realmente ayudan másdistribuir contenidos de un sitio que los tags meta.
  • 25. 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 encontrarlo 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 ennada, el usuario no tiene por qué mirar entre un millar de enlaces, no hace falta, tampocole 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 1hora inspeccionando una página con 700 enlaces, hacer un mapa del sitio de un sitio debanco es prácticamente una salvajada, igualmente para aquellos sitios que poseen 3secciones 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útilNo existe nada más inútil que un buscador que ¡no puede buscar!, de hecho, si entramos aun website normal como el diario El País y busco artículos, no sale nada útil, ni lacategoría.Para empresas que disponen de presupuestos grandes, no tener un buscador decente es unpunto en contra.El contenido esencial de minid.net está 100% indexado y se puede buscar a la perfección,usar grep patterns incluso.
  • 26. Error 21: La Web no es la televisiónResponsables de un sitio Web, Internet no es una televisión, es por eso, que entrar a unsitio es como el diario El País es para ver los titulares, no para encontrarse una pantallanegra, con una publicidad de Wanadoo ADSL de 700 píxeles por 700 píxeles, como si fueraun anuncio publicitario de televisión.Lo que más me enerva de estos casos, es que uno no puede hacer nada, sólo tiene queesperar 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 plauLos 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 sesiguen utilizando, ¿Qué anda mal?Si lo que desean es ahorrarse la carga de un documento, utilizad includes de algúnlenguaje de scripting como lo es PHP, ASP, JSP, o Python, da igual que lenguaje, pero esmejor que utilizar un Frame que trae cientos de problemas a tus clientes, para imprimirson 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 unapérdida de dinero terrible.Error 23: Formularios inaccesiblesUn detalle normal, como si estuviéramos hablando de contaminación global, son losformularios inaccesibles. En muchos sitios se hacen formularios inaccesibles, de tal formay color que se tornan inservibles, hace falta un ratón e Internet Explorer 6 para quefuncionen.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 yun 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 lodeje de lado? ¿Es Javascript la mejor opción para hacer formulario? Pues la respuesta esno. 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 etiquetasesenciales como y otros materiales de accesibles que hacen de llenar un formulario unadelicia, como los atributos tabindex="...", accesskey="...", <fieldset>, <legend>, etc.
  • 27. Error 24: Tipografías mal aplicadasUna de las cosas que podemos notar es que, la gran mayoría de los desarrolladores no sabecómo aplicar las tipografías en la Web. El primer problema es encontrarse ejemplos comoAdministración.es, que utiliza tipografías demasiado pequeñas para un portal donde elespectro de gente debe ser más amplio, recuerda que en este tipo de sitios, el 99% de lagente 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 enmuchos casos, utilizan medidas en puntos (pt) para tipografías que se visualizan enpantallas, 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 aInternet 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, nopuede, no pasa nada, con otros navegadores la cosa es diferente, pero hey… el 95% de losdamnificados 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 hechosen HTML, el PDF no fue hecho para reemplazar al HTML, no se mezquinen con estastecnologías.Antes de presentar un PDF, asegurarse de que ese documento está hecho en HTML, si notiene nada que ver con la información avisarle al usuario que se le va a servir un archivoPDF, utilizad íconos y enlaces de texto, y proporcionarle al usuario un medio para llegar ala 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 muchosframes, algunos PDFs se cargan en los frames interiores, logrando así una complejalectura, ya es una pesadilla que el PDF se cargue en la misma ventana.
  • 28. 2.2. MARCO TEORICO VARIABLE DEPENDIENTE Y VARIABLE INDEPENDIENTEARQUITECTURA 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”
  • 29.  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
  • 30. caracterizan por ser interactivas, con alta intensidad de transacciones, yporque permiten un relanzamiento de los negocios hacia nuevos mercados.Tecnología PHPPHP es un lenguaje de scripts open source que corre al lado del servidor Webutilizado para la creación de páginas Web dinámicas. Esta tecnología fuecreada originalmente en 1994 por Rasmus Lerdorf como un conjunto deherramientas (conocidas como PHP/FI y posteriormente PHP 2.0) quepermitirían tener un dinamismo en el Web.Dada la naturaleza de ser open-source (código abierto) estas herramientasganaron gran popularidad y en 1997 Zeev Zuraski y Andi Gutmansrediseñaron el parser, bautizándolo con el nombre de PHP3 .Poco después sevolvió 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 graciasa esta sintaxis es más fácil familiarizarse con él.El código PHP se encuentra incrustado en documento HTML por medio detags como veremos a continuación en este ejemplo:En este ejemplo podemos ver que para incluir código PHP en HTMLactivamos el tags “<?php”, posteriormente incluimos las instruccionescorrespondientes y para finalizar cerramos nuestro tags con “?>”. Dentro de
  • 31. un mismo documento se puede activar y desactivar los tags de PHP tantasveces 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 DatosPHP es capaz de conectarse con muchos manejadores de bases de datosdiferentes tales como PosgreSQL, Oracle, Informix, etc. Sin embargo uno delos 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 demanejador de base de datos solo cambiara el prefijo que corresponderá alnombre de cada uno de ellos, por ejemplo si quisiéramos utilizar ODBC, elprefijo de las funciones de manejo de datos seria “odbc_” o en el caso detrabajar con Oracle cambiaria a “oracle_”.Las funciones más utilizadas son los siguientes:
  • 32. La comparación general de las tecnologías ASP, JSP y PHP que nos permitenla creación de las páginas dinámicas que corren del lado del servidor semuestra en la siguiente tabla:
  • 33. SGBD MY SQL 5.0MYSQL es un sistema de gestión de base de datos relacional, multihilo ymultiusuario con más de seis millones de instalaciones. MYSQL AB desdeenero de 2008 una subsidiaria de Sun Microsystems desarrollado MYSQLcomo software libre en un esquema de licenciamiento dual.Por un lado y por el otro se ofrece bajo la GNU GPL para cualquier usocompatible con esta licencia, pero las empresas que quieran incorporarlo enproductos privativos pueden comprar a la empresa una licencia específica queles permita este uso. Está desarrollado en su mayor parte en ANSI C.
  • 34. Al contrario que proyectos como Apache, donde el software es desarrolladopor una comunidad pública y el copyright del código está en poder del autorindividual, 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 anteriormentemencionado. Además de la venta de licencias privativas, la compañía ofrecesoporte y servicios. Para sus operaciones contratan trabajadores alrededor delmundo que colaboran vía Internet. MYSQL AB fue fundado por DavidAxmark, Allan Larsson y Michael Windenius.La serie en desarrollo de MYSQL SERVER actualmente, es la 5.1 al cual seañaden nuevas características en relación a la serie 5.0. La serie deproducción actual de MYSQL es 5.0, cuya penúltima versión estable es la5.0.26 lanzada en octubre de 2006. Actualmente, se puede descargar la serie5.0.27. La serie de producción anterior fue la 4.1, cuya versión estable es 4.1.7lanzada en octubre de 2004. A estas versiones de producción sólo se arreglanproblemas, es decir, ya no se añaden nuevas características. Y a las versionesanteriores solamente se les corrigen bugs críticos.
  • 35. 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.
  • 36.  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.
  • 37. Entorno de trabajo de Dreamweaver1. Barra de menú principal. Contiene el menú con las opcionesprincipales del programa.2. Barra insertar. Contiene varios botones distribuidos en fichas conpestañas. Los elementos que contiene esta barra incorporan diferentesobjetos 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 lasfunciones 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áginaafectan sus elementos. Uno de los paneles más importantes es el panelSitio, ay que nos permite configurar el sitio Web en general.
  • 38. 5. Ventana de Documento. Es la ventana más grande en la quetrabajaremos diseñando la página Web. Suele ser útil maximizarla ver elcontenido de la página de un modo más completo.6. Barra de estado. Muestra en todo momento la situación en que seencuentra el usuario durante el diseño. Esta barra contiene el Selector deetiquetas con el que podemos seleccionar una etiqueta que no tenga unaspecto visible en la página: por ejemplo, la etiqueta Body que hacereferencia a toda la página Web, por tanto, se selecciona ahí.7. Inspector de propiedades. Se trata de un panel que varía su contenidodependiendo del objeto que seleccionemos en la página. Su función cosisteen ofrecer los elementos que caracterizan al objeto que hayamos seleccionadoen la página para poder modificar esas características.Microsoft Dreamweaver sistema que ha evolucionado a partir de un lenguajede programación, permitiendo diseñar páginas Web de forma visual enlugar de programada, permite generar y retocar partes de las páginas conlenguajes como HTML, XML, JavaScript, etc.2.3 TERMINOLOGIA BASICA:En informática, la World Wide Web, es un sistema de distribución deinformación basado en hipertexto o hipermedios enlazados y accesibles através de Internet. Con un navegador web, un usuario visualiza sitios webcompuestos de páginas web que pueden contener texto, imágenes, videos uotros 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 belgaRobert Cailliau mientras trabajaban en el CERN en Ginebra, Suiza, ypublicado en 1992. Desde entonces, Berners-Lee ha jugado un papel activo
  • 39. 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 WebDestacamos 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
  • 40. 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 WebEs muy común encontrar el prefijo "WWW" al comienzo de las direcciones webdebido a la costumbre de nombrar a los host de Internet (los servidores) con losservicios que proporcionan. De esa forma, por ejemplo, el nombre de host para unservidor web normalmente es "WWW", para un servidor FTP se suele usar "ftp", ypara un servidor de noticias USENET, "news" o "nntp" (en relación al protocolo denoticias NNTP). Estos nombres de host aparecen como subdominios de DNS, comoen "www.example.com".El uso de estos prefijos no está impuesto por ningún estándar, de hecho, el primerservidor web se encontraba en "nxoc01.cern.ch"14 e incluso hoy en día existenmuchos sitios Web que no tienen el prefijo "www".El prefijo "www" es simplemente una elección para el nombre de subdominio delsitio Web.Algunos navegadores web añaden automáticamente "www." al principio, yposiblemente ".com"" al final, en las URL que se teclean, si no se encuentra el host
  • 41. 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 mismotiempo las teclas de Control y Enter.Por ejemplo, si se teclea "ejemplo" en la barra de direcciones y luego se pulsa sóloEnter o Control+Enter normalmente buscará "http://www.ejemplo.com",dependiendo de la versión exacta del navegador y su configuración.Tecnologías webLas tecnologías web implican un conjunto de herramientas que nos facilitaránlograr 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-MeleonServidores web  CERN http  Servidor HTTP Apache (libre, servidor más usado del mundo)  Servidor HTTP Cherokee  IIS
  • 42. Otras tecnologías  OAI-PMH  CFM Coldfusion  DHTML  PHP  ASP  CGI  JSP (Tecnología Java )  .NETTipología web  Buscador Internet  Software social  Portal web o CMS  Bitácora o Web log / Blog  Wiki  Web 2.0
  • 43. CAPITULO III ANÁLISIS Y DISEÑO DEL SISTEMA PROPUESTO3.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.
  • 44. 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.
  • 45. Responsable - Realiza el proyecto - Registra el proyecto - Registra al cliente o entidad Usuario - Registra al áre a - Registra al analista - Registra al responsable
  • 46. 3.2.2. Diagramas de casos de uso Real iza pedido de proyecto CLIENT E/ENT IDA Regi stra al cli ente o entida d (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 áre a (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)
  • 47. 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
  • 48. 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).
  • 49. Base de DatosTablas y sus relaciones
  • 50. 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. ANALISTASCód_analista Nombres Apellidos Dirección000001 Alberto Gonzáles Av. Manco Cápac 215 Minaya000002 Julián Penacho Pérez Jr. De la Cruz 360000003 José Castro Pozo Jr. Huaylas 215000004 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
  • 51. 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 PROYECTOcod_proyecto cod_analista descripción Fecha_inicio Fecha_termino000001 000001 Residuos 2008/02/10 2008/04/15 sólidos000002 000002 Agua mejorada 2008/05/12 2008/08/10000003 000002 Cambio tuberías 2008/04/05 2008/08/10 agua y desagüe. EJECUCIÓNcod_ejecucion cod_responsable cod_proyecto descripción Fecha000001 000002 000001 Iniciada 2008/03/10000002 000003 000002 Iniciada 2008/09/08000003 000001 000003 Iniciada 2008/09/21
  • 52. AVANCEScod_ejecucion descripción Fecha000001 Iniciada 10% 20008/03/10000002 Iniciada 45% 2008/09/08000003 Iniciada 60% 2008/09/21 USUARIOScod_usuario nombre Clave000001 cristian 123321000002 noel 152435000003 jose 632514
  • 53. CAPITULO IV INTERFACES4. Diseño de Interfaces 4.1. Proceso de desarrollo de Interfaces 4.1.1. Interfaz Principal de la Página Web
  • 54. 4.1.2. Interfaz Proyectos4.1.3. Interfaz Actores o Responsables
  • 55. 4.1.4. Interfaz Analistas4.1.5. Interfaz Registro de Proyectos
  • 56. 4.1.6. Interfaz Consulta de Proyectos4.1.7. Interfaz Consulta de actores o Responsables
  • 57. 4.1.8. Interfaz Registro de Analistas de Proyectos4.1.9. Interfaz Actualizar Lista de Zonas
  • 58. CONCLUSIONES1. 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.