Prof. Gutiérrez Gonzales Ángel

Transcripción

1 Instituto Politécnico Nacional Unidad Profesional Interdisciplinaria de Ingeniería y Ciencias Sociales y Administrativas Tecnologías en Ambiente Web Unidad Temática II Diseño y Construcción de Modelos Web Prof. Gutiérrez Gonzales Ángel Casquera Pardo Sandra Fabiola Cervera Romero Laura Bibiana Gutiérrez Flores Diana Equipo 3 2AM36

2 2.1 DISEÑO DE SITIOS WEB Jakob Nielsen, afirma lo siguiente: "En esencia, hay dos enfoques fundamentales del diseño: El ideal artístico de expresarse así mismo y el ideal de la ingeniería de resolver un problema para un cliente." En la primera década del desarrollo de la web, el enfoque que elegían muchos diseñadores era el ideal artístico.

3 El diseño se desarrollaba de manera adhoc y por lo general se efectuaba a medida que se generaba HTML. Después evolucionó a partir de la visión artística que surgió de la construcción de webapps.

4 2.1.1 ELEMENTOS Y ATRIBUTOS DE CALIDAD La calidad del diseño incluye requisitos, especificaciones y el diseño del sistema. La calidad de concordancia es un tema enfocado principalmente a la implementación. Si el diseño y el sistema resultante satisfacen los requisitos y metas de desempeño, la calidad de concordancia es alta. Calidad de diseño; Se refiere a las características que los diseñadores especifican para un elemento. Calidad de concordancia; Es el grado en el que las especificaciones de diseño se aplican durante la fabricación.

5 ELEMENTOS 1.- Contenido: La página no debe ser atractiva solamente en su parte visual, debe tener un contenido interesante que atraiga lectores. 2.- Imágenes: Deben usarse buenas fotografías, preferiblemente tomadas por un profesional. Es importante presentar imágenes que no estén pixeleadas (baja resolución) o desenfocadas, esto da una idea sobre la calidad misma del sitio.

6 3.- Tipografía: Es importante utilizar fuentes llamativas pero que conserven una fácil legibilidad. La tipografía debe llamar la atención del usuario pero debe conservar la línea de diseño del sitio. También es importante variar el tamaño de una misma fuente para resaltar secciones interesantes del texto.

7 4.- Botones e iconos: Utilizar botones prácticos y representativos, así como iconos grandes y vistosos aumenta la facilidad de navegación en la página y se dan una guía clara a los usuarios, no es necesario colocar accesorios que no van a brindar un valor real.

8 5.- Animaciones y movimiento: Para generar una sensación de dinamismo, es bueno utilizar elementos animados. Pero es importante no excederse con los elementos móviles, la cuota del 20% del total de la pagina es suficiente, porque pueden causar saturación, distraer la atención de las cosas importantes que se quieren decir y por ultimo sacar al usuario del sitio. 6.- Fondos claros y sencillos: Los fondos claros o totalmente blancos facilitan la visualización, también dan un aspecto despejado a la página resaltando las imágenes, existe la tendencia a utilizar fondos negros para lecturas largas, para no cansar al lector con la luz del monitor.

9 7.- Enlaces a redes: Es de gran ayuda para los usuarios incluir enlaces a redes sociales con las cuales se tiene familiaridad y se interactúa con regularidad, también a sitios de interés. Esto con el fin de generar comunidad y crear lazos de mutuo intercambio con sitios que pueden apalancar la oferta, como proveedores y clientes actuales.

10 2.1.2 NORMA ISO 9126 E ISO/IEC NORMA ISO Funcionalidad Confiabilidad Usabilidad Eficiencia Portabilidad Tiempo que el software se encuentra disponible para su uso, según lo indican los siguientes atributos: madurez, tolerancia a fallas y recuperación. Grado en el que el software emplea óptimamente los recursos del sistema, según lo indican los subatributos siguientes: comportamiento del tiempo y de los recursos. Grado en el que el software satisface las necesidades planteadas según las establecen los atributos siguientes: adaptabilidad, exactitud, interoperabilidad, cumplimiento y seguridad Grado en el que el software es fácil de usar, según lo indican los siguientes subatributos: Entendible, aprendible y operable. Facilidad con la que el software puede llevarse de un ambiente a otro según lo indican los siguientes atributos: adaptable, instalable, conformidad y sustituible.

11

12 2.1.3 NORMAS INSTITUCIONALES SEGURIDAD DEL SOFTWARE Actividad del aseguramiento del software que se centra en la identificación y evaluación de los peligros potenciales que podrían afectarlo negativamente y que podrían ocasionar que falle todo el sistema. Si los peligros se identifican al principio del proceso del software, las características de su diseño se especifican de modo que los eliminen o controlen.

13 Se lleva a cabo un proceso de modelado y análisis. Inicialmente se identifican los peligros y se clasifican según su riesgo. Una vez identificados estos peligros en el nivel del sistema, se utilizan técnicas de análisis para asignar severidad y probabilidad de ocurrencia a cada uno. Para ser eficaz, el software debe analizarse en el contexto de todo el sistema. Una vez identificados y analizados los peligros, pueden especificarse requerimientos relacionados con la seguridad para el software. Es decir, la especificación contendría una lista de eventos indeseables y las respuestas deseadas del sistema ante ellos. Después se indicaría el papel del software en la administración indeseable de los mismos.

14 LAS NORMAS DE CALIDAD DE ISO-9000 Se define como la estructura organizacional, responsabilidades, procedimientos, procesos y recursos necesarios para implementar la administración de la calidad. Los sistemas de aseguramiento de la calidad se crean para ayudar a las organizaciones a asegurar que sus productos y servicios satisfagan las expectativas del consumidor gracias a que cumplan con sus especificaciones.

15 Establecer los elementos de un sistema de administración de la calidad. LA NORMA ISO 9001:2000 Desarrollar, implementar y mejorar el sistema. Definir una política que ponga el énfasis en la importancia del sistema. Documentar el sistema de calidad. Apoyar el control y aseguramiento de la calidad. Describir el proceso. Producir un manual de operación. Desarrollar métodos para controlar (actualizar) documentos. Establecer métodos de registro. Promover la importancia de la calidad entre todos los participantes. Centrarse en la satisfacción del cliente. Definir un plan de calidad que se aboque a los objetivos, responsabilidades y autoridad. Definir mecanismos de comunicación entre los participantes.

16 Establecer mecanismos de revisión para el sistema de administración de la calidad. Identificar métodos de revisión y mecanismos de retroalimentación. Definir procedimientos para dar seguimiento. Identificar recursos para la calidad, incluidos personal, capacitación y elementos de la infraestructura. Establecer mecanismos de control. Para la planeación. Para los requerimientos del cliente. Definir métodos de corrección. Evaluar datos y métricas de la calidad. Definir el enfoque para la mejora continua del proceso y la calidad.

17 EL PLAN DE ACS Proporciona un mapa de ruta para instituir el aseguramiento de la calidad del software. Desarrollado por el grupo de ACS (o por el equipo del software si no existe un grupo de ACS), el plan funciona como plantilla para las actividades de ACS que se instituyen para cada proyecto de software.

18 2.1.4 DISEÑO DE LA INTERFAZ DE LA WEBAPP Aunque las webapps plantean algunas dificultades especiales en el diseño de la interfaz de usuario, los principios y lineamientos básicos son aplicables. Puede ingresar por una ubicación "inicial de la webapp (la página de arranque, por ejemplo) o por algún vínculo en cierto nivel inferior de la arquitectura de aquélla.

19 OBJETIVOS 1) Establecer una ventana congruente en el contenido y las funciones que brinda. 2) Guiar al usuario a través de una serie de interacciones con la webbap. 3) Organizar las opciones de navegación y contenido disponibles para el usuario. Para lograr una interfaz consistente, primero debe usarse un diseño estético, a fin de establecer un "aspecto" coherente.

20 MECANISMOS Menús de navegación: contienen palabras clave que enlistan contenido o funciones clave. Estos menús se implementan de modo, que el usuario pueda elegir entre una jerarquía de subtemas que se despliegan al seleccionar la opción principal en el menú.

21 Iconos gráficos-, botones, interruptores y otras imágenes similares que permiten que el usuario seleccione alguna propiedad o que especifique una decisión. Imágenes: Cierta representación gráfica que el usuario selecciona para establecer un vínculo hacia un objeto de contenido o función de la webapp.

22 2.1.5 Diseño de la Estética También llamado diseño gráfico, es una actividad artística que complementa los aspectos técnicos del diseño de las webapps. Sin estética, una webapp tal vez Hay un viejo refrán que dice que "la belleza está en los ojos del espectador". sea funcional pero no atractiva.

23 2.1.6 Diseño del Contenido Se centra en dos tareas diferentes del diseño, cada una de las z dirigida por individuos que poseen habilidades distintas. En primer lugar, se desarrolla presentación del diseño para los objetos del contenido y los mecanismos requeridos para establecer una relación entre ellos.

24 2.1.7 Diseño Arquitectónico Está ligado con las metas establecidas para una webapp, con el contenido que se va a presentar, con los usuarios que la visitarán y con la filosofía de navegación adoptada. La arquitectura del contenido se centra en la manera en la que objetos de contenido se estructuran para la presentación y la navegación.

25 En la mayoría de los casos, el diseño arquitectónico se lleva a cabo en paralelo con el de la interfaz, el estético y el del contenido. Como la arquitectura de la webapp tal vez es muy influida por la navegación, las decisiones que se tomen durante esta acción del diseño influirán en el trabajo realizado durante el diseño de aquélla.

26 2.1.8 Diseño de la Navegación Arquitectura de la webbap Páginas, textos, subprogramas otras funciones de procesamiento DISEÑO DE LA NAVEGACIÓN Rutas de navegación Permitan a los usuarios acceder al contenido y a las funciones de la webapp. 1) Identificar la semántica de navegación para los distintos usuarios del sitio y 2) Definir la mecánica (sintaxis) para efectuar la navegación.

27 2.1.9 Método de Diseño de Hipermedios Orientados a Objetos El diseño conceptual del MDHOO genera una representación de los subsistemas, clases y relaciones que definen el dominio de aplicación para la webapp. Durante el diseño conceptual se reutilizan los diagramas de clase, agregaciones e información desarrollada como parte del análisis de la webapp, con objeto de representar las relaciones entre clases.

28 Diseño de la navegación para el MDHOO El diseño de la navegación identifica un conjunto de "objetos" que se derivan de las clases definidas en el diseño conceptual. Para incluir éstos, se define una serie de "clases de navegación" o "nodos". Conforme se desarrolla el diseño, se utilizan patrones para el diseño de la navegación. El MDHOO emplea un conjunto predefinido de clases de navegación: nodos, vínculos, anclas y estructuras de acceso. Una vez definidas las clases de navegación, el MDHOO "estructura el espacio de navegación, agrupando los objetos de navegación en conjuntos llamados contextos".

29 2.2 Herramientas para desarrollo de Modelos Web 1. Adobe Kuler: Una aplicación de internet de Adobe gratuita, que te permitirá crear y buscar combinaciones de colores. Para hacer uso de esta aplicación deberás estar registrado como usuario en la página de Adobe, y con tu usuario y password podrás tener acceso a él.

30 2. Typecast: El objetivo es poder decidir la tipografía que utlizarás en los textos que publicarás en la web de forma sencilla y rápida, de la misma forma que lo hacemos con los editores de texto y fotografía tradicionales. 3. Mockflow: Te permite montar un prototipo en cuestión de minutos, online y para multitud de plataformas diferentes. La versión gratuita sólo permite un proyecto con 4 páginas, pero puedes descargarlas en diversos formatos y borrarlas conforme las dejes de necesitar.

31 4. GuideGuide: Es una extensión de Adobe Photoshop con la que preparar tu documento para comenzar a diseñar tus webs será cuestión de minutos. 5. Layervaul: Es una aplicación web que te permitirá controlar y gestionar todos los aspectos de tu proyecto (comunicación con compañeros, gestión de archivos, etc.) desde una misma interfaz.