Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 12 vistas

    Unidad 6

    Cargado por

    sofia20032106

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd

    Unidad 6

    Cargado por

    sofia20032106
    12 vistas14 páginas

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    12 vistas14 páginas

    Unidad 6

    Cargado por

    sofia20032106

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    de 14

    Acreditación Institucionald eA lta Calidad

    DESARROLLO
    WEB FULLSTACK
    -BÁSICO

    Autor de contenido
    Andrés Fernando Pineda Guerra

    Autor de contenido

    EMPEZAR
    Tabla de
    Contenido
    Presentación

    Objetivos del curso (competencias)


    Objetivo general
    Objetivo específico

    Mapa de contenido de la unidad

    Unidad 6: Fundamentos de Arquitectura de software.

    6.1. Principios del diseño.


    6.2. Introducción al UX and UI.
    6.3. Herramientas principales.
    6.4. Creación de Mockups y WireFrames.

    Otros materiales para profundizar

    Recursos de video

    Referencias bibliográficas de la unidad

    2
    Presentación

    En la actualidad, con el evidente auge de las tecnologías y el avance


    tan significativo de las mismas, las empresas, universidades y com-
    pañías a nivel mundial se obligan a involucrar dentro de su core, la
    adquisición de soluciones tecnológicas, dichas soluciones son creadas
    por grupos capacitados de personas los cuales involucran e integran
    diversas herramientas las cuales permiten el éxito de los proyectos.
    Con el “CURSO BÁSICO EN DESARROLLO FULL STACK”, aprenderás los
    fundamentos, estructuras y principales bases para el éxito en el desa-
    rrollo de soluciones tecnológicas, partiendo desde el diseño, hasta la
    ejecución, pasando por procesos de lógica matemática, maquetación
    de aplicaciones (web y móviles), aplicación de principios del diseño,
    lenguajes de modelado y maquetado web, introducción a las redes,
    bases de datos, gestión de contenidos y diversos temarios, los cuales
    permitirán ser más competitivo en el ámbito profesional y laboral.

    Objetivos del curso (competencias)

    Objetivo general
    Formar a los participantes en el desarrollo web en todo el ciclo de vida del
    software, en donde adquieran los conocimientos básicos para implementar
    soluciones web.

    Objetivo específico
    - Conocer los conceptos y teoría básica del desarrollo web.

    - Identificar y conocer los diferentes lenguajes de programación y herra-


    mientas para el desarrollo web.

    - Aplicar las diferentes tecnologías web, tendencias y herramientas en el


    desarrollo de soluciones web.

    - Diseñar, desarrollar e implementar soluciones web básicas en donde


    se integren los componentes de Front End, Back End, seguridad, redes y
    buenas prácticas utilizando metodologías ágiles.

    3
    Mapa de contenido de la unidad

    IMAGEN

    Ideas clave
    Interfaz de usuario cuando se realiza la investigación del usuario, se identifica y analiza
    el público objetivo, se definen los flujos de usuarios, se desarrollan la arquitectura de la
    información y los wireframes.

    Experiencia de usuario, la interfaz de usuario es la conexión entre un usuario y un pro-


    ducto, es decir, es el punto donde interactúan. Los botones, las barras de menú, los
    iconos, las fuentes, los colores y similares pertenecen al diseño de la interfaz de usuario.
    Se encarga de la apariencia del producto, traduciendo los wireframes y los prototipos
    desarrollados durante la etapa de UX en algo atractivo y receptivo u optimizado para
    diferentes tamaños de pantalla o dispositivos.

    4
    6.1. Principios del diseño.

    Contextualización general

    Experiencia de usuario

    Son todos aquellos factores de entorno, relación, correlación, tangibilidad que se puede
    dar a un producto, servicio o dispositivo.

    Interfaz de Usuario

    Es el medio de interacción que el usuario tiene con una interfaz, en donde se relaciona
    la arquitectura de información, patrones de diseño e interacción, elementos visuales y
    efectividad relacionada.

    Teoría básica UI.

    Principios de diseño

    • Legibilidad
    • Consistencia
    • Jerarquía
    • Contraste
    • Espacio negativo
    • Escala

    5
    6
    Perspectiva global

    • No hacer pensar al usuario.


    • Pantallas sencillas.
    • Divide y vencerás.

    6.2. Introducción al UX and UI.

    Modelo cliente servidor

    Es una de las principales arquitecturas utilizadas en los servicios web, este modelo de
    aplicación distribuida, permite que las tareas sean divididas entre los servidores y los
    clientes.

    La red cliente-servidor es una red de comunicaciones en la cual los clientes están


    conectados a un servidor, en el que se centralizan los diversos recursos y aplicaciones
    con que se cuenta; y que los pone a disposición de los clientes cada vez que estos son
    solicitados. Esto significa que todas las gestiones que se realizan se concentran en el
    servidor, de manera que en él se disponen los requerimientos provenientes de los
    clientes que tienen prioridad, los archivos que son de uso público y los que son de uso
    restringido, los archivos que son de sólo lectura y los que, por el contrario, pueden ser
    modificados, etc. Este tipo de red puede utilizarse conjuntamente en caso de que se
    este utilizando en una red mixta (Zafra et al., 2013).

    Para entender mejor el modelo cliente - servidor, a continuación, se muestra una ima-
    gen de la arquitectura y sus componentes:

    7
    UX/UI son dos partes del proceso de diseño, UX significa User Experience (experiencia del
    usuario), este se ocupa de los aspectos más conceptuales, por ejemplo; define las funcio-
    nalidades y la experiencia que tendrá el usuario dentro de la, solución web, APP, página
    web, etc. UI se refiere a la User Interface (interfaz del usuario), este se centra en los aspec-
    tos estéticos del producto. Se puede aplicar no solo a aplicaciones digitales sino también a
    productos físicos, procesos administrativos, etc.

    El UX implica principalmente investigación, es necesario comprender aspectos como las


    necesidades del usuario, necesidades empresariales, hábitos de uso, psicología, el uso de la
    tecnología.

    UI se centra en los aspectos estéticos del producto, intentando transmitir la personalidad


    de la marca a través de la tipografía, paletas de colores, tipos de botón, animaciones, ilus-
    traciones e incluso el tono de voz. El diseño de interfaz es también muy importante para la
    experiencia del usuario (Khast, 2017).

    6.3. Herramientas principales.

    8
    6.4. Creación de Mockups y WireFrames.

    Creación de Mockups y wireframes

    Los wireframes y mockups son herramientas que nos ayudan a definir el contenido y la
    posición de los diversos objetos, bloques o secciones de un sitio web digital.

    El objetivo principal es comunicar la estructura visual en una representación de baja fideli-


    dad, por esto se recomienda que se realicen en blanco y negro, ya que permite realizar un
    análisis estructural, mas no de contenido.

    Con el uso de mockups tiene diversas ventajas, como:

    Mejoras en la usabilidad, ya que se planea la estructura previamente y permite que los ob-
    jetos del sitio web ya están previamente planeados y dirigidos a espacios específicos.

    Ayudan al desarrollador, en el momento de estimar tiempos de desarrollo, complejidad de


    módulos, sección o páginas web.

    9
    WireFrames:

    Los wireframes son una representación inicial de un diseño normalmente en baja fideli-
    dad. ¿Qué quiere decir esto? Quiere decir que no es un diseño final, viene a ser el esquele-
    to de un diseño inicial, en el cual se puede visualizar de forma rápida y sencilla cómo irán
    organizados los diferentes componentes de nuestro diseño. Los wireframes suelen repre-
    sentarse en escala de grises con cajas, círculos, líneas, etc (Chicote, 2019).

    Baja fidelidad: los wireframes de


    baja fidelidad suelen ser esquemas
    planos en papel o hechos incluso con
    algún programa de diseño gráfico. No
    suelen tener mucho lujo de detalles y
    sirven como una primera idea general
    de la estructura del producto.

    10
    Alta fidelidad: los wireframes de alta
    fidelidad suelen ser esquemas más
    elaborados en escala de grises. Estos
    suelen contener anotaciones que ex-
    plican qué hace cada botón, sección,
    etc. El texto que se utiliza podría ser
    texto real. No debe confundirse con
    un diseño final. Aquí sí que suelen
    hacerse con un editor gráfico (Chico-
    te, 2019).

    MockUps: El mockup a diferencia del wireframe da un paso más allá y deja-


    mos de tener la baja fidelidad que
    teníamos en el wireframe a pasar a una alta fidelidad con colores, imágenes
    tipografía, sombras, etc.

    Un mockup es una representación de un diseño final a pixel perfect en un


    ecosistema real, ya puede ser un smartphone, una tablet, un desktop, etc.

    Son de gran ayuda cuando se trabaja en equipo y sirven para recibir feed-
    back y mostrar al cliente el diseño final del producto. En definitiva los moc-
    kups es la parte visual que más se asemeja al resultado final del producto.

    11
    12
    Otros materiales para profundizar

    Referencias bibliográficas de la unidad

    Ediciones ENI.

    Debrauwer, L., & Heyde, F. V. der. (2016). UML 2.5: Iniciación, ejemplos y ejercicios
    corregidos. Ediciones ENI.

    Pérez-Montoro, M. (2010). Arquitectura de la información en entornos web. Profe-


    sional de la información, 19(4), Art. 4. https://doi.org/10.3145/epi.2010.jul.01

    13
    13

    También podría gustarte