ESCUELA DE INGENIERIA DE SISTEMAS E INFORMATICA

PROGRAMACIN EN LA WEB INFORME PROYECTO FASE I

DOCENTE: MANUEL FLOREZ

ESTUDIANTES MARA NATHALIA AYALA TORRES EDDA CRISTINA ALVAREZ MANCILLA LUZ ALBA GUILLEN PABN DANIEL DE LAS AGUAS

GRUPO: B1 SUBGRUPO: 02

UNIVERSIDAD INDUSTRIAL DE SANTANDER FACULTAD DE INGENIERIAS FISICO-MECANICAS BUCARAMANGA 08 DE AGOSTO DE 2013

1. Para acceder a la pgina web desde un navegador (cloudeisi) la url sugerida es:

https://cloudeisi.uis.edu.co:20104/20131B102

OBJETIVO GENERAL

Crear e implementar una pgina web de lencera femenina (TOUCH ME) con el fin de dar a conocer la ropa intima y lograr adquirir clientes para la venta de la misma, la cual tenga una alta funcionalidad que cumpla con los requisitos propuestos, como lo son la seguridad, el diseo, la presentacin, la rentabilidad entre otros, utilizando tcnicas y tecnologas de informacin.

OBJETIVOS ESPECIFICOS

Crear una pgina de ventas de lencera femenina, por medio de catlogos. Cumplir con la funcionalidad de la pgina web, que comunique, venda y gestione, realmente que sea asequible a todo pblico. Crear una base de datos para almacenar los clientes, los productos, acorde a los requerimientos de un sitio web dinmico. Realizar la captura de informacin mediante el uso de revistas, pginas relacionadas y llamativas del tema, reuniones continuas con los integrantes del grupo para llegar a acuerdos en el almacenamiento de datos claves de la pgina. Debe validar y registrar usuarios con contrasea, adems subida y bajada de archivos HTML. Implementar un carro de compras mediante el uso de cookies de sesin. Para su utilizacin, el manejo de las sesiones de caducidad, para la seguridad de la pgina. Realizar pruebas para verificar el funcionamiento y la fiabilidad del sitio web adems de garantizar que se est cumpliendo con la mayora de los requerimientos.

2.1 Portada de la pgina del sitio web

2.2 Estructura jerrquica Strapless

Realce Bras Deportivos

Bolsa de Compras Sing In

Sexy

Tanga Bsqueda

Panties

Bikini

Index.html

Inicio

Cachetero

Pijamas Sleep Multimedia Babydols

Revistas Nueva Coleccin Pie

Ofertas

2.3 Funcionalidades de la jerarqua.

Index.html: pgina principal de la web la funcionalidad de esta pgina se indica a continuacin.

1. Inicio: es el primer botn del men principal, la funcionalidad de este es hacer referencia y llegada a la pgina inicial, siempre que se re dirija a una de las subpginas.

2. Bras: es el segundo botn del men este nos re direcciona al catalog de los brasieres que se tienen para la comercializacin, de este desplegamos los 4 siguientes submens.

Strapless: se muestran las imgenes de los brasieres de tipo estraple, que se tienen para la venta. Relace: se muestran las imgenes de los brasieres que moldean y realzan el busto, que se tienen para la venta. Deportivos: se muestran las imgenes de los brasieres deportivos que les gusta usar a tipo de mujeres que les gusta el ejercicio, que se tienen para la venta. Sexy: se muestran las imgenes de los brasieres ms sexys de la coleccin, que se usan para una noche romntica, u ocasiones muy especiales, que se tienen para la venta.

3. Panties: es el tercer botn del men este nos re direcciona al catalog de los pantys y de los vestidos de bao que se tienen para la comercializacin, de este desplegamos los 3 siguientes submens.

Tanga: se muestran las imgenes de los panties mas revocados y de encajes de la coleccin, que se tienen para la venta. Bikini: se muestran la coleccin de vestidos de bao de ltima moda, para ir a la playa de vacaciones, y son los que se tienen disponibles para la venta. Cachetero: se muestran las imgenes de los panties ms discretos y tapados, para la mujer que es mas recatada, que se tienen para la venta. 4. Sleep: en el cuarto botn del men este nos re direcciona al catalog de las pijamas que se tienen para la comercializacin, y de este desplegamos los 2 siguientes submens.

Pijama: se muestran las imgenes de las pijamas ms elaboradas y recatadas, que son las ms comunes de su uso por las mujeres, y a su vez que se tienen para la venta. Babydolls: se muestran las imgenes de las pijamas hechas en encaje, que usan las mujeres para ocasiones especiales, o que son ms de su agrado que las pijamas comunes y a su vez que se tienen para la venta.

5. Nueva coleccin: en el quinto botn del men, nos lleva a la pgina de la ltima coleccin, lo que est ms de moda, tambin mostramos a reconocidas modelos mostrando diseos exclusivos de distintas marcas, los colores los diseos que ms se acercan al fashionismo del mundo y adems tenemos sugerencias acerca de que otras cosas se encuentran a la moda y son la tendencia en el mercado. 6. Oferta: en el sexto botn del men, nos lleva a la pgina donde tenemos los grandes descuentos, mostramos las imgenes de lo que se encuentra ofertado, e igualmente, no solo colecciones pasadas si no tambin algunas

prendas de la ltima coleccin, esta parte de la pagina es la que ms se frecuenta ya que las personas siempre buscan calidad a bajo precio. Bolso de compras: en este icono que se encuentra en la pgina inicial da acceso podemos acceder para escoger los tems que se quieren comprar, esta funcionalidad es muy importante ya que se debe validar con seguridad por medio de una cookie (cabe aclarar que este campo se encuentra an en construccin)

Log in: este botn da acceso a los campos de usuarios registrados y no registrados en la pagina, adicionalmente dentro del mismo se encuentra el botn que nos re dirige al formulario de registro de la misma, para aquellos que se quieren registrar.(cabe aclarar que este botn sigue en construccin, ya que se necesita la base de datos, de igual forma si se puede lograr validar los datos en el formulario as no se haga el registro, este se har en el momento de conexin con la base de datos.)

Bsqueda: este espacio de bsqueda nos da la posibilidad de colocar palabras claves y nos re direcciona a las pginas de su coincidencia de lo contrario no llevara a una pgina de no coincidencia con la palabra clave escrita por el usuario.

Multimedia: este campo de la pgina inicial nos muestra un video de las modelos ms deseadas por la mayora de hombres, este muestra una coleccin de ropa interior que comercializa nuestra marca, pueden disfrutar a dems de sonido en cada una de las pginas.

 Revistas: este campo de la pgina inicial nos muestra las revistas ms destacadas en el mundo de la moda, cada una de ellas hace referencia a la pgina de la revista, para que puedan ver las tendencias y los colores y diseos que ms se estn usando, adems consejos tiles a la hora de vestirse.

El pie de pgina tiene unos iconos que nos permite que los usuarios hagan parte de nuestras redes sociales y nos sigan en twitter, instagram, facebook, y puedan ver videos de las colecciones en youtube.

2.4 PRINCIPIOS WEB APLICADOS EN EL DISEO.

Composicin de pgina

El xito de una buena composicin de pgina consiste en una organizacin balanceada, clara y concisa de la informacin usando las herramientas bsicas de diseo: formato editorial, tipografa, color y uso de grficas. La composicin debe guiar al usuario visualmente. Distinguir en un principio las reas de informacin, navegacin principal, secundaria, local, etc. El contraste El contraste es importante y nos ayuda a mantener mdulos de informacin y a facilitar la lectura ya si esta es una pgina de texto, e igualmente si es una pgina animada el contraste con la multimedia es muy importante Ejemplo: pgina de texto: Ejemplo: pgina animada

 Usar plantillas. Usar una misma plantilla no quiere decir que la pgina sea aburrida, al contrario utilizar la misma plantilla mantiene una pgina consistente, limpia y ordenada, ayuda a facilitar los procesos de revisin y bsqueda del usuario, es una herramienta muy til para la web. . Uso de Encabezados y pie de pgina. Los encabezados deben de presentar la identidad grfica del sitio y el pie de pgina presenta por lo general el origen del sitio y ligas acerca del sitio: informacin legal, derechos de autor, ao de produccin, contacto, etc. Dimensiones El diseo de Web implica una serie de limitaciones. Dada la naturaleza del medio, nuestras pginas deben de funcionar en diferentes plataformas y con distintas dimensiones de pantalla. Comenzaremos por hablar de las dimensiones de pantalla. Debemos mantenernos al corriente de estadsticas del usuario. La siguiente pgina proporciona estadsticas de uso de sistemas operativos, navegador, resolucin, etc. http://www.thecounter.com. De acuerdo a este sitio, actualmente la mayor parte de usuarios usa una resolucin de pantalla de 1024 x 768 y en segundo lugar sigue la resolucin de 800x600. Antes de empezar el diseo y la produccin de un sitio de Web, debemos definir con nuestro equipo de trabajo que formato seguiremos.

Tablas El uso de tablas es sumamente importante. No solo sirven para presentar datos de forma tabular, o como las conocemos fuera del contexto de Web, sino porque nos ayudan a crear espacios editoriales. Sugerencias: Usar tablas para crear columnas, dividir la pgina en varias columnas facilita la distribucin de informacin, usar tablas para incorporar grficas y pie de foto dentro de un rea de texto largo. Usar tablas para armar composiciones grficas. Gran parte del xito de una buena navegacin se debe a la estructura del sitio en general;

Presentacin de elementos de navegacin

Gran parte del xito de una buena navegacin se debe a la estructura del sitio en general; como decidimos agrupar nuestro contenido, bajo que secciones, etc., pero la otra parte se la debemos a una clara presentacin y localizacin de elementos de navegacin. Sugerencias Presentar claramente la navegacin principal o global. Acceso claro y rpido a la pgina principal Sacar provecho del uso de encabezados y pies de pgina. Utilizar cautelosamente grficas como parte de la navegacin. No siempre es claro para el usuario que son zonas calientes. Mantener consistencia en la seleccin de colores asignados a ligas y a pginas visitadas. Ayudar al usuario a saber dnde estn. El cambio de color por ejemplo, o el simple hecho de desactivar la liga de la seccin en la que se encuentran. Tipografa. La seleccin y uso de tipografa es quiz el elemento ms difcil dentro del proceso de diseo. La tipografa asume un doble papel tanto como comunicador visual y como verbal. La tipografa nos ayuda a distinguir visualmente grupos de texto y de esta manera ayuda al usuario a predecir que tipo de informacin encontrara en ciertas reas de la pgina. El ojo viajara de bloque en bloque a lo largo de la pgina y es gracias a estos bloques tipogrficos que podemos alcanzar una buena jerarqua de informacin.

Color Ya se menciono anteriormente, que el balance de color puede ayudar a nuestros usuarios a navegar con mayor facilidad nuestra pgina al delimitar reas y al agrupar diferente tipo de informacin. Cuando se habla de contraste no necesariamente quiere decir que haya contraste entre un claro y un oscuro. Al contrario, el contraste debe de ser muy sutil, muchas veces se logra entre variaciones de un mismo color, hay sitios que son monocromticos en su totalidad o sitios que usan diferentes porcentajes y variaciones de color en varias secciones, eso es suficiente para facilitar la lectura y visin de la pgina. Sugerencias: Evitar colores muy vibrantes como fondo de pgina. Ejemplo de un psimo uso de colores y

Grficas de fondo. No usar colores fluorescentes en texto ni en el fondo. Utilizar color para distinguir secciones en nuestra pgina. Seleccionar una paleta de color y mantenerse constante o a ella, utilizar variantes de los colores de esa misma paleta (porcentajes por ejemplo) en vez de introducir nuevos colores. Utilizar el espacio vaco, en blanco, como elemento de diseo.

3. Estructura del sitio.

4.1 Validacin de formularios: en esta parte se cre un registro de usuario, para esto se utiliza el script para la captura de los datos. que en este caso es el formulario que validar:

Nombres y apellidos Fecha de nacimiento Pas Regin ciudad Telfono Direccin Email Contrasea Confirmacin de contrasea

4.2 Cookie. La cookie que se lleva implementada es la conteo de visitas de la pgina web (cabe aclarar que falta colocar otras como lo es la cookie del carrito de compras).

4.3 la multimedia es importante ya que es la parte principal de la pgina, es comercializar ropa, para ello se deben mostrar fotos, videos, se ambiento la pagina con msica de pasarela, es importante definir que no es una pgina de texto, si no animada de shopping, como las pginas de las cuales nos guiamos que se encuentran en nuestra bibliografa.

5. ETIQUETAS Se aplicaron las siguientes etiquetas: <iframe>, <select>, <form>,<input>, <a>, <pre>, <tr> , <audio>, <video> entre otras como <br>

CONCLUSIONES Durante la realizacin de este proyecto hemos aprendido e identificado distintos principios de diseo web, realizamos la captura de datos con la ayuda de nuestras fuentes de las paginas seleccionadas, para la validacin del formulario utilizamos java script, aunque tuvimos algunos inconvenientes con esta validacin llegamos a la conclusin de que debemos seguir trabajando en el tema, para poder superar las dificultades. Hemos aprendido a trabajar en grupo, la planificacin de las actividades se ha desarrollado correctamente, creemos que la funcionalidad de la pgina est siendo exitosa y poco a poco vamos logrando nuestros objetivos, el uso de la informacin ha sido muy importante, ya que con ella hemos podido consultar algunas dudas para la elaboracin y escogencia de las cosas que nuestra web queremos que lleve, adems algunas paginas tiles que han ayudado a la realizacin de cdigo, en java, HTML y php; realmente esperamos seguir trabajando en la web para la segunda fase de entrega final de nuestra pgina web.

BIBLIOGRAFIA VICTORIAS SECRET. Panties, brass, sport y sleep. Disponible en: www.victoriassecret.com. Consultado: 26/07/13 CRISS BY CRISTINA HURTADO. Fondo, diseo. Disponible en : http://www.crissbycristinahurtado.com/ Consultado: 26/07/13 TOUCH COLLECTION. Imgenes, diseo de plantillas. Disponible en: http://touche.com.co/ Consultado: 25/07/13