Temas de aplicaciones de Internet- ULS

domingo, 11 de noviembre de 2012

BD- ER

Para esta semana se ha trabajado en el diseño de la base de datos de "ofertitas", iniciando con el modelo entidad relación, presentado a continuación:

domingo, 4 de noviembre de 2012

Políticas de uso "Ofertitas.cl"

Uno de los trabajos realizados para esta semana es el boceto de las políticas de uso:

Políticas de uso:

Este contrato describe los términos y condiciones aplicables a la manipulación realizada por parte del usuario, compréndase a este como comprador, vendedor, o visitante no registrado en la página "Ofertitas.cl".

Cualquier persona que no acepte los términos y condiciones, los cuales tiene un carácter obligatorio y vinculante, deberá abstenerse de utilizar el sitio y/o servicios.

El usuario que utilice este servicio deberá leer y aceptar todas las condiciones establecidas en los términos y condiciones generales de esta página.

Inscripción:

Para realizar una inscripción exitosa y con eso poder publicar y/o comprar productos, es necesario llenar con los datos correspondientes todos los campos del formulario de inscripción, el usuario es el responsable de verificar que la información publicada sea "valida". Ofertitas.cl no se hace responsable si la información no es verídica.

Una vez ingresado todos los datos, se podrá ingresar a un panel e usuario que contendrán las opciones de publicación, área de notificación entre otros. Este ingreso contendrá un sistema de autentificación de usuarios.

El Usuario será responsable por todas las operaciones efectuadas en su Cuenta, pues el acceso a la misma está restringido al uso de su Clave de Seguridad.

Ofertitas.cl posee la facultad de bloquear a un usuario que no cumpla con las políticas de uso de la página.

Infracciones referentes al precio:

Para el caso de las publicaciones "no subastadas", el precio del producto es el publicado, este puede ser cambiado si es que se llega a mutuo acuerdo por parte de ambas partes, esto puedo ser resuelto en el cuadro de preguntas de la publicación.

Para el caso de las subastas, este precio aumenta de acuerdo a la cantidad de pujas, el precio final es de acuerdo al aumento del precio de la última puja realizada antes de la hora límite, el valor de una puja será un 10% inicial basado en el precio de referencia inicial.

Referentes a la utilización de la página:

Que no está permitido:

No están permitidas las publicaciones en las que se exponga información que permita la comunicación entre usuarios, fuera del proceso existente en la página, llámese este proceso como "comprar" o "pujar".

No están permitidas publicaciones que violen las leyes chilenas, esto incluye ventas de sustancias ilícitas, productos médicos, venta de partes de cuerpo humanas o animales, entre otras.

No están permitidas publicaciones que dañen la imagen de "Ofertitas.cl", la página tiene el derecho de borrar cualquier tipo de publicación de la cual sienta que están perjudicando

Proceso de compra:

Para productos: El usuario debe leer todas las características del producto, en caso de tener dudas, está la opción de realizar una pregunta respecto al producto en la misma página del producto en venta. Solo en ese caso es recomendable realizar la solicitud de compra del producto.

Una vez hecha la solicitud de compra, se envía por medio de una notificación en el panel del usuario, información del contacto. El tiempo para la transacción no está acotado, es decir cuando quieran evaluar al comprador podrán hacerlo. Una vez realizada la transacción el comprador puede evaluar al vendedor.

Para Subasta: El usuario debe leer todas las características del producto en subasta, en caso de tener dudas, está la opción de realizar una pregunta respecto al producto. Una vez que se conocen todas las características del bien en subasta, se procese a pujar, siendo el valor de la puja, el 10% del valor de referencia inicial del bien.

El proceso de puja debe ser realizado en los tiempos que dura la publicación predefinidos por Ofertitas.cl y solo el usuario que pujó último, será el comprador beneficiado.

Desde el punto de vista del vendedor, este recibirá en su panel de usuario una notificación con los 3 últimos pujadores, con el precio de puja correspondiente de cada uno, además de los antecedentes para su contacto.

lunes, 22 de octubre de 2012

Primer acercamiento programación web

Para el avance de esta semana, he decidido ya involucrarme en lo que es la programación, respecto de

la pagina a crear, revisando la herramienta adobe dreamweaver CS6 como primera aproximación a la programación de paginas web. Esta primera plantilla está basada en el mockup del home de "ofertitas.cl".

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Ofertitas.cl</title>

<!--

body {

font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;

background-color: #336666;

margin: 0;

padding: 0;

color: #000;

}

/* ~~ Selectores de elemento/etiqueta ~~ */

ul, ol, dl {

padding: 0;

margin: 0;

}

h1, h2, h3, h4, h5, h6, p {

margin-top: 0;

padding-right: 15px;

padding-left: 15px;

}

a img {

border: none;

}

a:link {

color: #42413C;

text-decoration: underline;

}

a:visited {

color: #6E6C64;

text-decoration: underline;

}

a:hover, a:active, a:focus {

text-decoration: none;

}

/* ~~ Este contenedor de anchura fija rodea a todas las demás divs ~~ */

.container {

width: 960px;

margin: 0 auto; /* el valor automático de los lados, unido a la anchura, centra el diseño */

}

.header {

background-color: #336666;

text-align: center;

}

.sidebar1 {

float: left;

width: 180px;

background-color: #CCCCFF;

padding-bottom: 10px;

}

.content {

padding: 10px 0;

width: 600px;

float: left;

background-color: #6C6;

}

.sidebar2 {

float: left;

width: 180px;

background-color: #CCCCFF;

padding: 10px 0;

}

/* ~~ Este selector agrupado da espacio a las listas del área de .content ~~ */

.content ul, .content ol {

padding: 0 15px 15px 40px;

}

ul.nav {

list-style: none; /* esto elimina el marcador de lista */

border-top: 1px solid #666;

margin-bottom: 15px; /* esto crea el espacio entre la navegación en el contenido situado debajo */

}

ul.nav li {

border-bottom: 1px solid #666; /* esto crea la separación de los botones */

}

ul.nav a, ul.nav a:visited {

padding: 5px 5px 5px 15px;

display: block;

width: 160px;

text-decoration: none;

background-color: #C6D580;

}

ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* esto cambia el color de fondo y del texto tanto para usuarios que naveguen con ratón como para los que lo hagan con teclado */

background-color: #ADB96E;

color: #FFF;

}

/* ~~ Los estilos de pie de página ~~ */

.footer {

padding: 10px 0;

background-color: #D6D6D6;

position: relative;/* esto da a IE6 hasLayout para borrar correctamente */

clear: both; /* esta propiedad de borrado fuerza a .container a conocer dónde terminan las columnas y a contenerlas */

}

/* ~~ Clases float/clear varias ~~ */

.fltrt {

float: right;

margin-left: 8px;

}

.fltlft {

float: left;

margin-right: 8px;

}

.clearfloat {

clear:both;

height:0;

font-size: 1px;

line-height: 0px;

}

-->

</style>

#apDiv1 {

position: absolute;

left: 279px;

top: 366px;

width: 550px;

height: 293px;

z-index: 1;

}

.nav #form2 {

font-weight: bold;

}

</style>

</head>

<body>

<ul>

<li><a href="#">Elemento 1.1</a></li>

<li><a href="#">Elemento 1.2</a></li>

<li><a href="#">Elemento 1.3</a></li>

</ul>

</li>

<li><a href="#">Productos</a></li>

<li><a class="MenuBarItemSubmenu" href="#">Servicios</a>

<ul>

<li><a class="MenuBarItemSubmenu" href="#">Elemento 3.1</a>

<ul>

<li><a href="#">Elemento 3.1.1</a></li>

<li><a href="#">Elemento 3.1.2</a></li>

</ul>

</li>

<li><a href="#">Elemento 3.2</a></li>

<li><a href="#">Elemento 3.3</a></li>

</ul>

</li>

<li><a href="#">Ayuda </a></li>

</ul>

<label for="Buscador"> buscador</label>

</form>

</div>

Categorias:

</form>

<div class="AccordionPanelTab">Accesorios vehiculos</div>

<p>Repuestos</p>

<p>Espejos</p>

<p>Motores</p>

<p>Accesoris limpieza</p>

</div>

<div class="AccordionPanelTab">Animales y mascotas</div>

<div class="AccordionPanelContent">Contenido 2</div>

</div>

<div class="AccordionPanelTab">Artes y antiguedades</div>

<div class="AccordionPanelContent">Contenido 3</div>

</div>

<div class="AccordionPanelTab">Camara y accesorios</div>

<div class="AccordionPanelContent">Contenido 4</div>

</div>

<div class="AccordionPanelTab">Computación</div>

<div class="AccordionPanelContent">Contenido 8</div>

</div>

<div class="AccordionPanelTab">Celulares</div>

<div class="AccordionPanelContent">Contenido 6</div>

</div>

<div class="AccordionPanelTab">Servicios</div>

<div class="AccordionPanelContent">Contenido 9</div>

</div>

<div class="AccordionPanelTab">Deporte</div>

<div class="AccordionPanelContent">Contenido 5</div>

</div>

<div class="AccordionPanelTab">Electronica, audio y video</div>

</div>

</ul>

</div>

<h1>Subastas</h1>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</div>

</div>

var Accordion1 = new Spry.Widget.Accordion("Accordion1");

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

</script>

</body>

</html>

domingo, 14 de octubre de 2012

Mockups de "Ofertitas.cl"

Como ya se mencionó en el primer post de bienvenida, este blog está orientado al curso de "Aplicaciones de Internet", cuya actividad en la que se trabajó esta semana, es la creación de mockups de una aplicación web. Esta aplicación web tiene como objetivo ser el medio de comunicación entre el cliente y el ofertante de productos y/o servicios.

Los mockups [1] son maquetas de páginas, que nos permiten visualizar una interfaz más acabada, además, de su funcionalidad y gracias a esta herramienta ya podremos describir de mejor manera el funcionamiento de este proyecto que denominamos "ofertitas.cl". Los mockups que se realizaron fueron: Pagina principal y Pagina de subastas, utilizando las maquetas que vamos a describir ahora .

Pagina Inicial:

En esta página principal podemos varios elementos:

Catalogo: Les permitirá buscar al usuario por categorías de productos.

Buscador: Opción de búsqueda por palabras claves, para el usuario que sabe que producto específicamente está buscando.

Subasta: Son productos en ofertas, que presentan ciertas características.

Barra horizontal: con opciones ya para el usuario, como volver al inicio, ingresar a su panel de usuario entre otros.

Publicidad: colocada al costado derecho de la aplicación, que nos permitirá ser un servicio de no pago para el vendedor

Pagina de subastas:

El objetivo de esta página es la presentación de un producto en oferta, si bien tiene un aspecto similar a la de productos (no subastados), esta posee un contador de tiempo donde señala la cantidad de minutos restantes para el termino de esta publicación, otra característica distintiva, es su funcionamiento, ya que esta publicación tiene una cantidad máxima de productos y su precio al momento de comprar no cambia, es decir "producto en oferta hasta cierta fecha o hasta agotar stock".

La herramienta utilizada para los mockups fue Microsoft Visio 2010 [2].

Referencias

[1] http://www.genbetadev.com/herramientas/mockups-disenando-usabilidad autor: Álvaro Aroca, fecha de revisión: 13/10/2012

[2] http://office.microsoft.com/en-us/visio/.

domingo, 30 de septiembre de 2012

Arquitectura de la información

La arquitectura de la información es un conjunto de elementos que forman parte de un sistema de información, esto nos permite definir características importantes como el sistema de etiquetado, sistema de navegación entre otros.

Aunque, si bien estos elementos nos dan una descripción del sistema que se quisiera llegar a implementar por parte de un programador o diseñador, no podríamos comunicar el diseño de interacción que queremos crear solo con ellos, para eso se hace uso de un vocabulario visual que nos permita representar el diseño de interacción de un sistema por medio de diagramas. Un vocabulario visual es un conjunto de símbolos que nos permiten representar tanto procesos como estructuras.

En esta publicación presentaremos un diagrama de la arquitectura de información del sitio http://www.falabella.com/falabella-cl/, diagramando los procesos de búsqueda y autentificación por medio de estos símbolos, usando el concepto de ingeniería inversa.

Bibliografía:

C3_ia-4xp.pdf Prof. Mauro San Martín,
http://www.jjg.net/ia/visvocab/spanish.html Jesse James Garrett, versión 1.1b (6 de marzo 2002).

jueves, 6 de septiembre de 2012

Protocolo HTTP

Para esta publicación se describirán el propósito de este protocolo, además de sus características y su funcionamiento en el mundo de la web.

Propósito:

Http se creó con el propósito de permitir la transferencia de archivos (generalmente archivos html), entre el cliente que lo solicita y el servidor que lo entrega, para esto se hace uso de un localizador de recursos uniforme o URL.

Características:

El protocolo de transferencia de hipertexto o Hypertext Transfer Protocol fue desarrollado por el consorcio W3C [1] y la IETF [2] al final del año 1990 logrando trabajar en conjunto hasta 1999.

Http es un protocolo orientado a transacciones, siendo el esquema: petición y respuesta, el utilizado para poder comunicarse entre los dos elementos restantes de la web (cliente y servidor).

Http es un protocolo que no contiene estado, es decir, no guarda ninguna información sobre conexiones realizas anteriores, para esto hace uso de cookies [3] en los navegadores.

Hace uso del puerto 80 como interfaz para la salida y entrada de datos.

Al ser un protocolo, este define las reglas de la semántica y la sintaxis de la comunicación.

Funcionamiento:

El uso mas común de http es la solicitud de algún archivo por parte del cliente a un servidor, aunque también existe la posibilidad de poder editar desde el cliente los archivos almacenados en el servidor, para este caso describiremos el primero uso.

Desde el cliente o navegador se hace la solicitud de un archivo a una dirección en Internet, esta dirección identifica al servidor que posee el archivo.

url : http://aplicacionesinternetgabriel.blogspot.com/2012/08/bibliografia.html

dirección : aplicacionesinternetgabriel.blogspot.com/

subdirección : /2012/08/

archivo requerido : bibliografia.html

el navegador interpreta esto enviando un mensaje con una estructura similar a esto:

GET /bibliografia.html HTTP/1.1
 Host: aplicacionesinternetgabriel.blogspot.com
 User-Agent: nombre-cliente

El servidor busca el archivo solicitado, en caso de no encontrar el archivo envía un mensaje de error al navegador, en caso contrario, el archivo lo entrega en cierto formato, hacia el navegador.

La información entregada por el servidor es interpretada por el navegador web y es presentada al usuario con un estilo definido.

referencias:

[1] http://es.wikipedia.org/wiki/World_Wide_Web_Consortium, 06/09/2012.

[2] http://es.wikipedia.org/wiki/Internet_Engineering_Task_Force 06/09/2012.

[3] http://es.wikipedia.org/wiki/Cookie_(inform%C3%A1tica) 06/09/2012.

Bibliografía:

C2_applicaciones_wed_4xp.pdf Prof. Mauro San Martín.

http://es.wikipedia.org/wiki/Hypertext_Transfer_Protocol 06/09/2012.

http://aprenderinternet.about.com/od/ConceptosBasico/a/Que-Es-Http.htm 06/09/2012.

http://es.kioskea.net/contents/internet/http.php3 06/09/2012.

jueves, 30 de agosto de 2012

Primer Capitulo: "Creación de la Internet y diferencias con la Web"

Aunque la palabra "Internet" es algo que usamos a menudo, el significado de esta palabra pueda que no quede muy claro, ademas de otra que pueda usarse como sinónimo que es "la web", pero estas a pesar de estar ligadas en el contexto de la Informática no tienen el mismo significado ni las mismas fechas de creación. El objetivo de esta publicación va enfocado a la definición de ellas.

Internet (Entre redes)

Es un grupo de redes interconectadas por medio de dispositivos de red como hubs, switch o routers, estos dispositivos hacen que las peticiones de comunicación de un host llegue a otro host por toda esta red global.

La Internet tuvo sus inicios en los periodos de guerra fría, es ahí cuando el departamento de Defensa de los Estados Unidos fundó la agencia DARPA (Proyecto de investigación avanzada en defensa), esto evolucionó a ARPANET como una red para la comunicación para los diferentes organismos del país, evolucionando a una conexión entre redes de lugares de todo el mundo dando paso a la Internet.

Web ( World Wide Web)

También llamada red global mundial, es una forma de acceder a la información almacenada en la Internet, para esto hace uso del protocolo de comunicación HTTP (Protocolo de transferencia de hipertexto), ademas permite mediante otros protocolos servicios como de correo, transferencia de archivos directo entre computadoras o servicios de comunicación por chat entre otros.

Para un mayor entendimiento, presento este vídeo de "La historia de la Internet"

Bibliografia:

C1_internet_y_web_4xp.pdf año 2012, Prof. Mauro San Martín
http://es.wikipedia.org/wiki/Historia_de_Internet, 29/08/2012
http://carloscatzin.wordpress.com/2010/01/24/como-funcionan-internet-vs-world-wide-web/