You are on page 1of 8

ESCUELA SUPERIOR POLITÉCNICA DEL LITORAL

FACULTAD DE INGENIERIA EN ELECTRICIDAD Y COMPUTACION
Desarrollo de Aplicaciones Web
Proyecto Parcial - Ing. Jorge Rodríguez E.
2014 – 2T
Fecha de Entrega: 4 de Diciembre del 2014 07:30 AM

Objetivo
Elaborar un sitio web que será una red social aplicando tecnologías modernas en el desarrollo del
diseño de sitios Web. Utilizar las siguientes tecnologías:
HTML5
CSS
JavaScript
Programación dinámica de cliente con AJAX y DOM

Descripción REI-NET (GUIDO CAICEDO)
Esta es una aplicación Web para ser utilizada por redes de innovación como la Red
Ecuatoriana de Innovación. La plataforma busca que los miembros de la Red tengan
la facilidad de interactuar a través del planteamiento de problemas y la propuesta de
soluciones. De esta forma habrían personas miembros de la red que plantearían
alguna necesidad o problema y otras que propondrían prototipos de productos o
servicios o ideas de negocio (no necesariamente relacionadas). Al mismo tiempo las
instituciones que forman parte de la red estarán en capacidad de manejar programas
de apoyo a través de la plataforma donde podrán dar acompañamiento (incubación,
aceleración, coaching) a equipos que plantean emprendimientos para producir
innovación. Así mismo podrán plantear concursos para que miembros de la red
participen.
Las funciones principales de la plataforma serían:
1)
2)
3)
4)

GESTION DE USUARIOS E INSTITUCIONES
GESTION DE OFERTA Y DEMANDA
GESTION DE INCUBACION
GESTION DE CONCURSOS

Analicemos en más detalles cada uno de los componentes:

GESTION DE USUARIOS E INSTITUCIONES
El sistema requiere la administración e interacción de los actores involucrados en la
red. Para esto existirán dos tipos de cuentas: Institucionales y personales.
La
primeras representan a la institución y las segundas a personas que se encuentran

Las DEMANDAS y OFERTAS explicadas más adelante también pueden ser comentadas y calificadas. búsqueda y consulta. Se deberá registrar la fecha y dirección IP desde donde se realizó la aplicación.afiliadas a la institución. También existirá una opción de directorio donde el usuario podrá explorar las instituciones y sus miembros (en la exploración se podrán también ver ofertas y demandas por tipo. Para ambos tipos de cuenta existirán opciones de registro. Teléfono y mail de contacto Recursos que ofrece a la red. Una recomendación es un comentario positivo y una calificación de 0 a 5 estrellas. Los ámbitos de una publicación son: La misma institución. Opción captcha para evitar SPAM . Para el caso de las instituciones esto incluye además de la oferta y demanda de la institución. Usuarios de la red que pertenezcan a instituciones. el ámbito de alcance de la parte de incubación y concursos. Los usuarios también tendrán un buzón de mensajes en los que podrán dejar y recibir mensajes de otros usuarios. Los usuarios podrán manejar grupos para cuando hagan publicaciones (DEMANDAS y OFERTAS) controlar el ámbito de los usuarios para los que serán visibles. Los que pertenezcan a INDEPENDIENTE no pueden hacer recomendaciones. A nivel de usuarios individuales existirán opciones de privacidad para controlar los elementos visibles para otros usuarios e instituciones. edición. un grupo de instituciones o todos. pueden hacer recomendaciones a otros usuarios de la red o a las iniciativas de estos (ver DEMANDA y OFERTA en la sección siguiente). concursos e iniciativas de incubación que son opciones que se explican más adelante). a la que se pueden afiliar personas que no pertenezcan a una institución registrada de la red. Las instituciones llenarán los siguientes datos al aplicar               Nombre de la institución Nombre Abreviado si existiera Logo Descripción general Misión Ciudad y País donde se encuentra localizada Sitio Web Nombre de a persona que llena la aplicación Nombre de la persona a cargo de la administración del usuario institucional Cargo que ocupa. Es de notar que por defecto existirá una institución que se llamará INDEPENDIENTE.

En caso de que la publicación sea de DEMANDA. Los usuarios podrá crear. esta deberá de incluír:      Nombre de la necesidad o problema Descripción resumida de la necesidad o problema Dominio y subdominio al que pertenece el problema Palabras claves para búsqueda rápida Tiempo en el que se necesita disponer de ella (que pude se hasta de varios años) . este deberá ir acompañado de un texto descriptivo. el proceso de aprobación debe incluír el usuario administrador de la institución.Las personas llenarán los siguientes datos al aplicar              Nombre de la persona Identificación (cédula o pasaporte) Foto Institución a la que pertenece (lista) Cargo que ocupa Breve descripción de su actividad Ciudad y País donde se encuentra ubicado Sitio Web Teléfono y mail de contacto Fecha de nacimiento Areas de interés (tags) Se deberá registrar la fecha y dirección IP desde donde se realizó la aplicación. Opción captcha para evitar SPAM El esquema de registro deberá ser seguro con confirmaciones con enlaces seguros vía mail. DESACTIVADA y CENSURADA. DESACTIVADA significa que el usuario decidió abandonar o detener la propuesta (este estado no es reversible) y CENSURADA significa que el administrador de la institución decidió suspender la iniciativa por algún motivo. TERMINADA significa que dejó de existir debido a que se satisfizo si se trata de DEMANDA y se concluyó de manera satisfactoria si fue una OFERTA (este estado no es reversible). En el caso de usuarios que pertenecen a una institución. editar y cambiar de estado la DEMANDA u OFERTA que manejen. TERMINADA. GESTION DE OFERTA Y DEMANDA Los usuarios de la red podrán publicar a la red necesidades o problemas que necesitan sean resueltos (DEMANDA) o también soluciones (OFERTA) que pueden ir desde una tecnología hasta un emprendimiento que ya tiene modelo de negocio y/o un equipo. Los usuarios podrán tener el estado de ACTIVO. SUSPENDIDO o INACTIVO. Activa significa que la instancia pertenece a una iniciativa que está siendo trabajada por quien la propuso. Los estados pueden ser ACTIVA. Cualquiera que sea el motivo de cambio de estado.

o emprendimiento Tipo de oferta: tecnología. prototipo. un grupo de instituciones o todos) Las OFERTAS funcionarán de manera similar a las DEMANDAS pero manejando los siguientes datos                    Nombre de la tecnología. Solo las versiones fijas que se crean se pueden usar de manera pública. En el momento que el usuario desee crear una instancia publicable le indicará que la desea crear y le dará un nombre.     Lugar donde se necesita (puede ser desde una ciudad hasta todos los países) Perfil del beneficiario de la necesidad (usuario final) Perfil del cliente de la necesidad (quien pagaría por la solución) Descripción de alternativas de solución existentes actualmente si las hubiere Descripción de la importancia de resolver la necesidad La demanda tendrá un manejo de control de versiones de la siguiente manera:   Habrá una versión maestra que siempre se podrá editar. A partir de allí. o emprendimiento Dominio y subdominio al que pertenece la soluciónn Palabras claves para búsqueda rápida Tiempo en el que el producto o servicio estrella estaría disponible (que puede ser desde días hasta varios años) Lugar donde puede ser aplicado (puede ser desde una ciudad hasta todos los países) Perfil del beneficiario de la oferta (usuario final) Perfil del cliente para la oferta (quien pagaría por la solución) Descripción de alternativas de solución existentes actualmente si las hubiere Descripción de la propuesta de valor Business Model Canvas Diagrama de Porter Cuadro de Competidores Cuadro de Tendencias relevantes Fotos de prototipo o producto Equipo (miembros de la plataforma) Estado de propiedad intelectual si la hubiere Evidencia de tracción si la hubiere . las instancias creadas podrán tener una copia editable que puede servir para generar una siguiente instancia de la misma manera que el original (la cual se maneja como una derivada de la instancia anterior en el control de versiones). Las DEMANDAS podrán ser publicadas en el ámbito que desee el usuario (su misma institución. prototipo. prototipo o emprendimiento Descripción resumida de la tecnología. Las versiones editables son solo visibles para el usuario. Todos los demás campos de la nueva instancia se copiarán de la instancia maestra (habrá un campo que registrará la fecha de creación).

De allí los campos mencionados no podrá cambiar. todos) NOTA: El alcance se puede aumentar pero no disminuír Al generar la instancia. Una instancia de INCUBACION cuando es creada deberá tener los siguientes atributos básicos:        Fecha de inicio de la iniciática de incubación Nombre de la iniciativa de incubación Descripción de la iniciativa de incubación Condiciones de la iniciativa de incubación Perfil de OFERTAS y equipos a incubar Tipos de OFERTAS a incubar Alcance (la propia institución. Luego de publicada la INCUBACION. GESTION DE INCUBACION La cuenta de una institución puede decidir abrir un proceso de incubación. Un usuario no puede ser CONSULTOR de una INCUBACION si es parte de una de las OFERTAS. Las OFERTAS pueden ser también parte de procesos de incubación. Rol de los miembros del equipo (si lo hubiere) Un usuario puede anexarse a una OFERTA publicada como parte del equipo. . los usuarios pueden aplicar con sus OFERTAS. Estos deberán aceptar la solicitud. Un proceso de incubación busca captar OFERTAS del sistema para que estas sean apoyadas por un equipo de consultores que ayuden a mejorarla durante un periodo de tiempo. Lo miembros del equipo de una instancia pueden tener estado ACTIVO o INACTIVO (excepto el creador de la instancia que en caso de desear cambiar a INACTIVO deberá decidir pasar el control de la instancia a otro miembro del equipo. Durante estos periodos. Habrá un campo de cambios en las condiciones en el que se publicarán dichos cambios pero sin alterar los contenidos anteriores. Las DEMANDAS y las OFERTAS al igual que los usuarios pueden tener recomendaciones de otros usuarios (excepto de aquellos en INDEPENDIENTE) Las DEMANDAS y OFERTAS pueden ser parte de CONCURSOS. El creador de la instancia deberá aceptarle e indicar el rol que tendría en un campo de descripción. usuarios CONSULTORES. añadirá el tipo de consultor del que se trata. Así mismo una OFERTA no puede ingresar a una INCUBACION si uno de los miembros de su equipo es un CONSULTOR. grupo. la cuenta de la institución podrá abrir periodos de convocatoria. Una vez publicada. El usuario institucional decidirá quienes se aprueban y quienes no. esta será publicada a los usuarios dentro del alcance y en el directorio. Si aceptan el usuario de la cuenta institucional dela INCUBACION. siempre que las reglas de la institución a la que pertenece lo permitan). podrán ser solicitados a través de la plataforma.

com https://www. Así mismo al crear la instancia del CONCURSO.com . registrándose la fecha en que se hizo. La forma de añadir jurados es similar a la de añadir consultores. El número de finalistas posible se define al crear la instancia del CONCURSO. Los CONSULTORES sólo pueden dar retroalimentación. Los CONSULTORES son asignados por cada INCUBADA. Existirán además usuarios JURADO que serán los únicos que calificarán. el sistema calculará los GANADORES.incubatorportal. En dicho MILESTONE se especificarán los siguientes datos:     Fecha en la que tiene que ser completado Requerimientos a ser cumplidos en los campos actuales de INCUBADA Campos nuevos que se requiera llenar para el MILESTONE Pesos que tiene en importancia cada uno de los requerimientos del MILESTONE Luego de cumplida la fecha cada MILESTONE puede ser retroalimentado y será calificado por los CONSULTORES. Puede haber más de uno por INCUBADA. Estos pueden editarse para añadir pero no para quitar.boostlatam. TERCER LUGAR y FINALISTA.com/tour. SISTEMAS CON ALGUNAS FUNCIONALIDADES PARA CONSULTAR: http://www.younoodle. El administrador de la INCUBACION podrá definir un MILESTONE a ser completado. Existirá la opción de mover el calendario creado.Cada OFERTA aprobada entrará a ser una iniciativa INCUBADA. SEGUNDO LUGAR. El sistema conservará el histórico de los MILESTONES para consulta de los usuarios involucrados El administrador podrá cambiar el estado de una INCUBADA a TERMINADA o DESACTIVADA. se le podrá dar retroalimentación por parte de los consultores que será visualmente manejable por los usuarios de INCUBADA. se definirán los PREMIOS. Existirá el estado de GANADOR. Para cada INCUBADA. GESTION DE CONCURSOS Desde muchos puntos de vista es similar a la gestión de la incubación con las siguientes diferencias:       Los MILESTONES se predefinen desde la creación del CONCURSO con fechas definidas.html http://senescyt. Luego del último MILESTONE.

startupwave.http://www. es decir su sitio con las diferentes paginas creadas y que utilicen el estilo creado. efectos de mouse. estilo a controles de formulario. Deben mostrar datos quemados en las páginas para poder visualizar su correcta apariencia.html. Una hoja de estilo utilizando Responsive Web Desing para que pueda ser vista en un navegador de PC y en un dispositivo móvil que usted elija. Los formularios deben implementar validaciones con JavaScript Utilice controles de formulario HTML 5.co/beta/services/ https://openideo. Incorporar tipos de letras que no se encuentren en el sistema operativo. ENTREGABLES Tarea 1 (10-Noviembre-2014 18:00) Layout que utilizara para las diferentes páginas de su sitio web (imagen). Presentar un documento con notas sobre el proceso de diseño de su sitio web (pantallas de proceso de diseño del layout para cada estilo). Tarea 2 (17-Nov-2014 18:00) Presentación de la plantilla CSS de su sitio. El sitio web será revisado en PC (Internet Explorer.com/content/how-it-works Requerimientos (Jorge Rodríguez) El sitio web debe tener una buena apariencia visual y se deberán tener en cuenta los siguientes elementos como parte de su diseño web: - - Menú Galerías de imágenes Implementar efectos con CSS3 Fondos. Incorporar funcionalidad AJAX para consultas a documentos XML o JSON en los cuales se encuentra la información de los diferentes elementos mostrados. sombras en textos. NOTA: Utilice paletas de colores para combinar colores correctamente en su diseño. La página principal del sitio Web deberá llamarse index. Google Chrome y Mozilla) y en el navegador que usted elija para el dispositivo móvil que selecciono. transparencias. . La originalidad en este requerimiento será calificada. Cuál es la plantilla o código html base que utilizará y la hoja de estilos para organizar el diseño. sombras en paneles.

eastley.Proyecto cuyas páginas no sigan la misma combinación de colores ni estilos CSS tendrán nota de CERO. d.com/previews/WB09T4648/ http://themeforest. Carpeta “img” para guardar imágenes b.mosaicpro. Proyecto parcial (4-Dic-2014 07:30 AM) 1. Efecto CSS que haya implementado.Proyecto que se entreguen sin el documento solicitado en el punto 1 serán penalizados con el 50% de la nota. 2. Carpeta “xml” o “json” para guardar archivo xml o json dependiendo del caso NOTA: . Pantallas del resultado del validador HTML 5 después de chequear la página i.3.net/ http://cdn. c. Un documento con la siguiente información: a. Notas sobre el proceso de diseño de su sitio web (pantallas de proceso de diseño del layout para cada estilo) b. .html http://demo.net/civi2/ http://wbpreview.Tarea 3 (27-Nov-2014 07:30 AM) Presentación de avance del proyecto. c. Ejemplo de sitios creados con HTML5 o o o o o http://www. El sitio Web con la siguiente estructura de carpetas: a. Carpeta “js” para guardar archivos con código javascript d.net/item/themekit-modern-ui-kits-for-appswebsites/6767145 .0/4/index. indicando en que objeto de diseño de su sitio web fue utilizado. Referencias de sitios web utilizados.biz/social3/3.juhanda. Si obtiene errores en sus páginas incluya pantallas de esos errores. Carpeta “css” para guardar archivos de hojas de estilo.