Diseno y Calidad de las Webapps

Verificar contenido de introducción al diseño de las webapps
Investigar
 Diseño y calidad de una webapp
Cualquier proyecto de software se inicia por alguna necesidad de negocio; la necesidad de corregir una deficiencia en alguna aplicación existente; la necesidad de adaptar una aplicación existente a un modelo de negocio cambiante; la necesidad de extender funciones o la necesidad de crear un nuevo producto o servicio.
Gestión de la calidad
Concepto de calidad: La calidad significa llegar a un estándar más alto en lugar de estar satisfecho con alguno que se encuentre por debajo de lo que se espera cumpla con las expectativas.

Garantía de la calidad del software: La calidad del software es una preocupación a la que se dedican muchos esfuerzos. Sin embargo, el software casi nunca es perfecto.

Todo proyecto tiene como objetivo producir software de la mejor calidad posible, que cumpla, y si puede supere las expectativas de los usuarios.

En este artículo intentaremos dar una visión práctica de Calidad, Calidad de Software, Certificación del Software, Medición del Software, Tipos de medidas y para qué sirve la medida del Software

Revisiones del software: Determinar funcionalidades de software, posibles mejoras, etc. Definiendo una revison de software se dividen en: 1 . 1 . 1 . 1

Versión Actualización Versión ensamblador Revisión
1 1 1 1


Fiabilidad del software
Identificar fallos
Asegurar que cumplen con las guías de tolerancia de fallos
Verificar las correcciones de las acciones de recuperación.

Los estándares de calidad ISO 9000
Es el organismo encargado de promover el desarrollo de normas internacionales de fabricación, comercio y comunicación para todas las ramas industriales a excepción de la eléctrica y la electrónica. Su función principal es la de buscar la estandarización de normas de productos y seguridad para las empresas u organizaciones a nivel internacional.
 Diseño de interfaz
El diseño de la interfaz de usuario se concentra en tres áreas:

Diseño de interfaces entre componentes de software.
Determinar que tan homogéneo es un software, adaptabilidad de código. Determinar si esta ensamblado con código nativo, funcionamiento bajo framework, etc.

Diseño de interfaces entre el software y otros productores / consumidores de información (no humanos)
Examinar la combinación de tecnologías, la posibilidad de conjuntar software bajo módulos y el paso de parámetros.

Diseño de interfaces entre seres humanos y la computadora
Realización de interface agradable al usuario, elección de colores adecuados, tipografías, etc. Es la parte visual, en la que el usuario se da cuenta del diseño general.


 Diseño estético.
Una webapp, como en todo diseño organizacional se divide en dos partes, el desarrollo y el diseño. El diseño no es nada si no tiene desarrollo, y el desarrollo no es nada sin un buen diseño.

En una webapp se contemplan imágenes, hojas de estilo, scripts, y todo lo necesario para la creación de una interface agradable y funcional.

 Diseño de contenido
Examinar la estructura contenidos, que será lo que ofreceremos a nuestros usuarios, también se determina el cómo se mostrara dicha información, por ejemplo, si requiere de un inicio de sesión.

 Diseño arquitectónico
El diseño arquitectico para los sistemas y aplicaciones basados en web se centra en la definición de la estructura global y en la aplicación de las configuraciones de diseño y plantillas constructivas para popularizar la estructura que se representaría como parte de la webapp.







 Diseño de navegación
Una vez establecida la arquitectura de una webapp y establecidas sus componentes el diseñador deberá definir las rutas de navegación que permitan al usuario acceder al contenido y a los servicios de la webapp además identificar la semántica de la navegación para diferentes usuarios y definir la mecánica para dicha navegación.
El diseñador de webapps crea una unidad semántica de navegación para cada uno de las metas asociadas a cada uno de los roles de usuario.



Aplicando un caso de estudio hacia alguna pagina o web service.


Diseño y calidad de una webapp.
EL gobierno de Veracruz, implemento una página web en donde podemos ver el famoso acuario de Veracruz. Sin duda alguna es un gran proyecto. Permite a los turistas conocer el acuario sin la necesidad de trasladarse.




















Diseño de interfaz
Tiene una página de bienvenida desarrollada en flash, es muy agradable, nos da interés en darle clic en entrar.

Una vez dentro de la página, tenernos una página de recorrido, la cual nos muestra un mapa del acuario, y cuáles son las categorías que están en exhibición.



En cada menú, se despliega una animación referente al menú seleccionado. Esto nos da una mayor interacción con el usuario y lo invita a quedarse en el sitio.




Diseño estético.
La pieza fundamental en la página aquí esta mostrada, el usuario da por hecho que la página funciona, pero el usuario ve que tan atractiva es la página. La página del acuario de Veracruz fue desarrollada en su totalidad en Adobe Flash. El análisis de requisitos y el público meta al que está dirigido son para niños, por ello los colores llamativos y la implementación de animaciones.

Diseño de contenido
Esta página está orientada a ofrecer un servicio de manera presencial y de manera virtual.

De manera virtual tenemos las categorías de especies, cuidados, marea roja, etc.

De manera presencial están los menús de ubicación, horario de servicio, costo de admisión, etc. Son herramientas que nos facilitan información si nosotros tenemos planeado visitar el acuario.

Ubicación
Horario de servicio
Costo de admisión
Categorías.
Mapa del acuario
Salas de exhibición
Especies
Corales
Marea Roja
Cuidados

Diseño arquitectónico
El plan de visita para el acuario de Veracruz está conformado de la siguiente manera:

Pagina de introducción, en la que se muestran las promociones, costos, y talleres de verano.

Pagina de información general. Aquí se da un recorrido virtual al acuario, las salas permanentes y las salas de exhibición temporal, así como los menús de contacto y de ubicación.

Pagina de información específica. En caso de que nuestros clientes tengan peces en casa, en la página del acuario de Veracruz les dicen que cuidados deben tener cuando los peces estén enfermos o saber a qué temperatura debe estar el agua. Es información de utilidad que generaran visitas y a la vez se brinda un servicio comunitario.











Diseño de navegación
El acuario de Veracruz tiene por navegación esta barra de menus, la cual nos muestra las especies en las salas de exhibición.



En la página principal esta la ubicación del acuario, así como los costos de admisión y el cómo llegar.
En términos generales, la página está bien elaborada, respeta los estándares de creación de una webapp, además de respetar los estándares ISO para la escritura.
Una observación a la pagina seria el crear un menú sobre contacto, el cual el usuario pueda escribir sus dudas o comentarios para la mejora de la pagina web.

Aportacion Ingenieria de Software

Aportacion al wiki http://ingsw1641.wikispaces.com/

IWeb

Atributos de una WebApp

Intensidad de red (Internet, Intranet, Extranet)
Concurrencia (Frecuencia de acceso de usuarios)
Carga impredecible (magnitud de usuarios por día)
Desempeño (no esperar demasiado)
Disponibilidad (24/7/365)
Gobernada por datos (información [bases de datos])
Sensibilidad al contenido (calidad de producto [estética])
Evolución continúa (Esta ligada con la disponibilidad y habla de actualización constante)
Inmediatez (rapidez con la que se desarrollo)
Seguridad (integridad de los datos)
Estética (el atractivo de la aplicacion)


Categorías de una WebApp.
Informativa (solo lectura, navegación y enlaces simples)
Descarga (servicio de descarga de información)
Personalizable (personalizar el contenido según sus necesidades especificas)
Interacción (interacción entre comunidad de usuarios)
Entrada del usuario (basada en formularios cuando es el principal mecanismo de comunicación)
Orientada a transacciones (solicitud de un usuario)
Orientada a servicios (proporcionan un servicio al usuario)
Portal (canalización del usuario hacia otro contenido o servicio web)
Acceso a base de datos (consulta del usuario a una base de datos y extracción de información)
Almacén de datos (consulta del usuario a una conexión de grandes bases de datos y extrae información)

Investigar sitios web de cada una de las categorías, 3 ejemplos de cada una. Subir al blog

Estratos de IWeb

Técnicas administrativas, donde vamos encontrar estimaciones presupuestos, calendarización, análisis de riesgos

Proceso (desarrollo ágil [rápidos ciclos de desarrollo], misión mas importante de la ingeniería web, reducir tiempo en el desarrollo de producto)

Actividades

1. Que se adopte al cambio
2. Que sea una aplicación que aliente la creatividad y la independencia del equipo de desarrollo y fortalezca la interacción entre accionistas
3. Construir sistemas que utilicen pequeños equipos de desarrollo.
4. Subrayar el desarrollo evolutivo incremental con cortos ciclos de desarrollo
Método (labores técnicas, comprender, caracterizar y construir)

Métodos de comunicación
1. Recolección de requisitos -> saber las necesidades
2. Análisis de requisitos -> comprender el contenido que tendrá una WebApp, función que proporcionara y modos interacción que el usuario requerirá
3. Método de diseño -> contenido aplicación y arquitectura de información.
4. Método de prueba -> revisiones técnicas formales tanto de contenido y del modelo de diseño.

Tecnologías y herramientas (conjunto de descripción de contenidos, modelación, recursos de desarrollo basados en componentes, navegadores, multimedia, herramientas de auditoría de sitio, herramientas de conectividad de bases de datos, herramientas de seguridad, servidores y utilidad, herramientas de administración y análisis de sitio)



Formulacion y planificación para la ingeniería Web.


1. Determinar que sirve y que no, necesidades y clasificaciones. Toda la información
a. Cuál es el motivación para buscar una aplicación web (objetivo general y específico).
b. Quien lo va a usar.
2. Comunicación con los clientes.
3. Categorias
a. El que solo conoce, quiere información
b. El que trabaja con la información
c. El que visita para la compra
d. El que ya compro, necesita soporte técnico
4. Modelado
5. Editor web

6. Proceso
1. Adoptar cambio
2. Alientar la creatividad.
3. Construir sistemas pequenos
4. Desarrollo evolutivo

Metodos de la IWeb
Métodos de comunicación
Métodos de análisis de requisitos
Diseño
Prueba

Marco de trabajo
Para que sea efectivo debe adaptarse, organizarse, comunicarse las actividades, la información y los métodos, plazo y restricciones y que el problema sea de resolver.

WebApps se entregan de manera incremental, actividades repetidas según sea el incremento en que se someta la ingeniería.

Comunicación con el cliente, análisis de negocio, contexto empresarial, predicen potenciales. Formulacion recopilar de requisitos describe el problema a resolver.

Apunte de la Ingenieria Web.

Encontre un articulo muy intereante de la ingenieria web, espero haber contribuido. Este articulo des de Universidad de Extremadura. Departamento de Informática. Escuela Politécnica

http://www.informandote.com/jornadasIngWEB/articulos/jiw01.pdf

Tipos de páginas en Internet.

TIPO	Ejemplo 1	Ejemplo 2	Ejemplo 3
Informativa	www.el-universal.com.mx/	http://www.planoinformativo.com/	http://www.entretodos.com.mx/
Descarga	www.softonic.com/	www.uptodown.com/	www.download.com/
Personalizable	www.blogger.com/	www.myspace.com/	www.hi5.com/
Interacción	www.juegosjuegos.com/	www.multimedia.pedagogia.com.mx/	www.pipoclub.com/
Entrada de usuario	www.google.com/	www.ask.com/	www.yahoo.com.mx/
Orientada a transacciones	www.santander.com.mx/	www.hsbc.com.mx/	www.banxico.org.mx/
Orientada a servicios	www.live.com	www.hotmail.com	www.facebook.com
Portal	www.microsoft.com/mexico	www.unam.mx	www.sep.gob.mx
Acceso a base de datos	www.ife.gob.mx	www.slide.com	www.slideshare.net
Almacén de datos	www.picassa.com	www.rapidshare.com	www.upload.com

Tipos de páginas en Internet.

Entre los billones de sitios Web que podemos encontrar, destacamos de manera generalizada 10 tipos, los cuales se desglosan en la siguiente tabla. Nota importante, las páginas web mencionadas pueden hacer referencia a otro tipo de servicio al que nombramos, por ejemplo, yahoo, aparte de que es un sitio de entrada de usuarios, también cumple con el parámetro base de datos, almacén de datos, portal y servicios. Pero por fines educativos, nos limitamos a mencionarlos como una pagina de entrada de usuarios.

Diagramas de desarrollo.

• Es un gusto poder compartir estas animaciones, solo que hay un detalle, no pude cargar las animaciones en la misma ventana de este post, sin embargo, les hago la invitacion para que revisen estos links en los cuales estan las animaciones.
  
  
  
  
  
  
  Un Saludo.

Diagramas de desarrollo.

Metodologia de la programación

Metodología

Un objetivo de décadas ha sido el encontrar procesos o metodologías predecibles y repetibles que mejoren la productividad y la calidad.


Etapas del proceso

La ingeniería de software requiere llevar a cabo muchas tareas, sobre todo las siguientes:


Análisis de requisitos

Extraer los requisitos de un producto de software es la primera etapa para crearlo. Mientras que los clientes piensan que ellos saben lo que el software tiene que hacer, se requiere de habilidad y experiencia en la ingeniería de software para reconocer requisitos incompletos, ambiguos o contradictorios. El resultado del análisis de requisitos con el cliente se plasma en el documento ERS, Especificación de Requerimientos del Sistema, cuya estructura puede venir definida por varios estándares, tales como CMM-I. Asimismo, se define un diagrama de Entidad/Relación, en el que se plasman las principales entidades que participarán en el desarrollo del software.


Especificación

Es la tarea de describir detalladamente el software a ser escrito, en una forma matemáticamente rigurosa. En la realidad, la mayoría de las buenas especificaciones han sido escritas para entender y afinar aplicaciones que ya estaban desarrolladas. Las especificaciones son más importantes para las interfaces externas, que deben permanecer estables.


Diseño y arquitectura

Se refiere a determinar como funcionará de forma general sin entrar en detalles. Según Yourdon consiste en incorporar consideraciones de la implementación tecnológica, como el hardware, la red, etc. Se definen los casos de uso para cubrir las funciones que realizará el sistema, y se transforman las entidades definidas en el análisis de requisitos en clases de diseño, obteniendo un modelo cercano a la programación orientada a objetos.


Programación

Reducir un diseño a código puede ser la parte más obvia del trabajo de ingeniería de software, pero no es necesariamente la porción más larga.


Prueba

Consiste en comprobar que el software realice correctamente las tareas indicadas en la especificación. Una técnica de prueba es probar por separado cada módulo del software, y luego probarlo de forma integral.


Documentación

Realización del manual de usuario, y posiblemente un manual técnico con el propósito de mantenimiento futuro y ampliaciones al sistema.


Mantenimiento

Mantener y mejorar el software para enfrentar errores descubiertos y nuevos requisitos. Esto puede llevar más tiempo incluso que el desarrollo inicial del software. Alrededor de 2/3 de toda la ingeniería de software tiene que ver con dar mantenimiento. Una pequeña parte de este trabajo consiste en arreglar errores, o bugs. La mayor parte consiste en extender el sistema para hacer nuevas cosas. De manera similar, alrededor de 2/3 de toda la ingeniería civil, arquitectura y trabajo de construcción es dar mantenimiento.

Fuente: apuntes de Desarrollo de Sistemas Informáticos