Clase 11  |   JQUERY

Clase 11 | JQUERY

 

En la Teórica vimos:

 

 


JavaScript |


 

JavaScript es un lenguaje de programación que se utiliza principalmente para crear apps ó páginas web dinámicas.

Una app/página web dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario.

Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que no es necesario compilar los programas para ejecutarlos. Los programas escritos con JavaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios.

A pesar de su nombre, JavaScript no guarda ninguna relación directa con el lenguaje de programación Java. Legalmente, JavaScript es una marca registrada de la empresa Sun Microsystems.

 


|  JQuery |


 

jQuery es una biblioteca de JavaScript que simplifica la forma de desarrollar aplicaciones ó sitios web. Permite manipular elementos del DOM (textos, imágenes, enlaces, etc.) , cambiar el diseño CSS o realizar peticiones Ajax utilizando instrucciones simples, a través de un código muy conciso y sencillo.

Es un simple fichero con extensión  .js  que contiene objetos y funciones escritas en JavaScript. Este código pone a tu disposición un montón de funciones prefabricadas que podemos utilizar en nuestros proyectos. Ejemplo de algunas de las bibliotecas:

 

img_jquery

 


Info para seguir sumando:


 

patrones

 Patrones mobile

 


| OTROS EJEMPLOS |


Clase 09 y 10  | FORMULARIO |

Clase 09 y 10 | FORMULARIO |

 

En la Teórica vimos:

 

 


FORMULARIO


Los formularios html nos ayudan a aumentar la interactividad de nuestra web/app y nos permiten recibir información de los usuarios de nuestra web/app. Los formularios html están compuestos por campos de texto y botones.

Los formularios son un tag más de html y debe ir indicado mediante la etiqueta <form> y su cierre </form>. Todo lo que vaya dentro de estas etiquetas, serán partes del formulario.

 

La etiqueta <form> tiene una serie de atributos básicos:

– “action” indica el tipo de acción que va a realizar el formulario.  Si queremos que el formulario se envíe a un correo, la acción quedaría escrita de la siguiente manera: <form action=»mailto:direcciondelcorreo@correo.com»></form>, o que me redireccione a otro archivo html <form actionprincipal.html«><fotm>

 

-“method” . Mediante este atributo le indicamos al formulario la forma en la que el formulario será enviado. Existen dos valores posibles: get y post.

El valor get es el valor por defecto. Si no concretamos el method, la información se enviará a través de este medio.

“get” indica que los datos enviados se adjuntarán en la barra de direcciones del cliente, al final de la url correspondiente y después de un signo de interrogación de cierre. Si se envía más de un dato, éstos irán separados por el símbolo &.

El valor post indica que el método de envío no se hará a través de la url, sino formando parte del cuerpo de la petición.

 

El elemento HTML <input> se usa para crear controles interactivos para formularios basados en la web, que reciban datos del usuario. La forma en que <input> funciona varía considerablemente dependiendo del valor de su atributo type, estos son algunos:

 

  • submit: Botón que envía el formulario.
  • password: Control de línea simple cuyo valor permanece oculto.
  • text: Campo de texto de línea simple. Los saltos de línea son eliminados automáticamente del valor introducido.
  • number: Control para introducir un número de punto flotante.
  • date: Control para introducir una fecha (año, mes y día, sin tiempo).
  • checkbox: Casilla de selección. Se debe usar el atributo value para definir el valor que se enviará por este elemento. Permite seleccionar más de uno.
  • radio: Botón radio. Se debe usar el atributo value para definir el valor que se enviará por este elemento.  Solo un botón radio dentro de un grupo puede ser seleccionado a la vez.
  • datalist: permite elegir de un listado.

Otros atributos del input:

  • "name":El nombre del control.
  • "placeholder": especifica una breve sugerencia que describe el valor esperado de un campo de entrada (por ejemplo, un valor de muestra o una breve descripción del formato esperado).
  • "required":este atributo indica que el usuario debe rellenar el control con un valor antes de poder enviar el formulario. Campo obligatorio.

Otros elemtos del html para formulario:

  • <label></label>La etiqueta <label> define una etiqueta para un elemento <input>. Elemento del formulario que se encuentra en relación al campo a rellenar.
  • <textarea></texarea>La etiqueta  define un control de entrada de múltiples líneas de texto.

 

Clase 08  | MOBILE FIRST |  RESPONSIVE WEB | FUENTES WEB

Clase 08 | MOBILE FIRST | RESPONSIVE WEB | FUENTES WEB

En la Teórica vimos:

 

  • etiqueta meta viewport para controlar la composición en los navegadores móviles:
<meta name="viewport" content="width=device-width, user-scalable=no">

El viewport del navegador es el área de la ventana en donde el contenido web está visible. Generalmente no es del mismo tamaño que la página renderizada, en donde se brindan barras de desplazamiento para que el usuario pueda acceder a todo el contenido.

 

Dispositivos con pantallas angostas (p.e. móviles) muestran la página en una ventana virtual o viewport, que es usualmente más ancho que la pantalla y la comprimen de manera que pueda verse completa. El usuario podrá recorrerla y hacer zoom para ver diferentes áreas de la página. Por ejemplo, si una pantalla móvil tiene un ancho 640px, las páginas pueden ser procesadas con un viewport de 980px, y después comprimidas para que entren en 640px.

Esto se hace porque muchas páginas no están optimizadas para dispositivos móviles y se quiebran (o, al menos, se ven mal) cuando son procesadas a un ancho de viewport pequeño. El viewport virtual es una forma de resolver el problema de sitios no optimizados para móviles, logrando que se vean mejor.

 

La propiedad width controla el tamaño del viewport. Puede definirse con un número en pixeles como  width=600 o con un valor especial device-width que es el equivalente al ancho de la pantalla en píxeles CSS en una escala de 100%. (Existen valores correspondientes de height y device-height, los cuales pueden ser útiles para páginas con elementos que cambian tamaño o posición basadas en la altura del viewport (height).

La propiedad initial-scale controla el nivel de zoom cuando la página se carga por primera vez. Las propiedades maximum-scaleminimum-scale, y user-scalable controlan la forma en cómo se permite a los usuarios aumentar o disminiuir el zoom en la página.  Si user-scalable se establece en ‘0’ o ‘no’, esto evitará que los usuarios hagan zoom.

 

MOBILE FIRST


«Mobile First» es un concepto simple: diseñar pensando en los móviles primero. En el cual debemos comenzar siempre centrándonos en los dispositivos con pantallas más pequeñas y generalmente con menor ancho de banda disponible para la navegación.

En un móvil no cabe toda la información y no tiene sentido que un usuario deba hacer un scroll casi infinito hasta encontrar aquello que resulta de importancia.

En Mobile First  el diseño irá de menos a más; acomodando los elementos de diseño e información de tal manera que el layout (esquema de distribución)  se adapte a las necesidades de cada anchura de pantalla.

 

RESPONSIVE WEB – DISEÑO ADAPTABLE


El uso de dispositivos móviles para navegar en la web está creciendo constantemente, y estos deben estar optimizados para se visualizados en sus diferentes resoluciones de pantalla. A menudo, la mayoría de los dispositivos están restringidos por el tamaño de visualización y requieren de un enfoque diferente del modo en que se muestra la disposición del contenido en la pantalla.

Existe una cantidad de diferentes tamaños de pantallas en los teléfonos, tablets, escritorios, consolas de juegos, TV , etc. Estas están siempre cambiando, de modo que es importante que el sitio web  se pueda adaptar a cualquiera de sus tamaños , hoy o en el futuro.

 

Diseño web adaptable, originalmente definido por Ethan Marcotte en A List Apart, responde a las necesidades de los usuarios y los dispositivos que estén usando. Los cambios de diseño según el tamaño y las capacidades del dispositivo. Por ejemplo, en un teléfono los usuarios deberían ver el contenido que se muestra en una única columna; una tablet puede mostrar el mismo contenido en dos columnas.

Toda web tiene que estar maquetada siguiendo los principios del responsive design.

Un diseño adaptable se basa en cambiar la apariencia de la web (tanto el contenido como su distribución) en función del dispositivo desde el cual se accede.
No se debe confundir con tener una versión de la página para cada dispositivo, sino que con la misma maquetación HTML y con el mismo código CSS asociado, el diseño varía en función del dispositivo. Y es aquí donde entran las media queries. El concepto no es 100% nuevo de CSS3, sino que tiene su punto de partida en los Media Types.

 

¿Qué es un media type?

Los media types permiten indicar una serie de estilos que se aplicarán según el tipo de medio.

 

Los media types más típicos son:

  • all: para todo (valor por defecto).
  • print: en la vista previa de impresión y a la hora de imprimir.
  • screen: para las pantallas de ordenador.
  • tv: para televisores.

 

¿Qué es un media Query?

Las media queries son propias de CSS3 y vienen a extender a los media, utilizando un media type con una serie de expresiones relacionadas con las características del dispositivo desde el cual se accede a la web. Las media queries dan como resultado verdadero o falso. Si el resultado es verdadero, se leen las reglas CSS de su interior, si es falso no. Las media queries dejan que la presentación del contenido se adapte a un rango específico de dispositivos de salida sin tener que cambiar el contenido en sí.

 

Ejemplo :

body{ background: #fff;}

@media(min-width:60rem){

section{flex-direction: row;}
 article{ width: 33%;}
 body{ background: yellow;}

}

 

Esta media query significa:
Cuando el ancho de pantalla tenga un ancho a partir de 60rem (960px) se lee el código encerrado dentro de las llaves que abren y cierran la media query. Hará que si  el fondo es blanco,  a partir del tamaño de pantalla de 60rem, se modifica su fondo en amarillo, la sección hará que sus elementos flexibles se muestren uno a continuación del otro, horizontalmente, a lo largo posicionándose en fila y que los artículos tengan un ancho del 33%.

 

| Links útiles |

 

Clase 06 | FLEX-BOX |

Clase 06 | FLEX-BOX |

En la Teórica vimos:

 

Optimización de imagen para web: gif, jpg, png.


Para que la página web/ app no tenga un peso excesivo y se cargue en poco tiempo, es necesario reducir el peso de las imágenes, o sea, optimizarlas para su uso en la web.

A pesar del mejoramiento en el ancho de banda y las mejoras en los procesadores, aun sigue siendo recomendable que las páginas web/app tengan un peso reducido para evitar que tengan problemas o demoren en cargar.

Para que el diseño tenga la vista que su creador ha planificado, es necesario que el largo y ancho de las imágenes no se modifique, por lo que la única opción con que se cuenta es con la reducción de la calidad.

La reducción de la calidad de una imagen, no necesariamente afectará su vista en la página web o app. Esto se debe a que generalmente las imágenes obtenidas de una cámara, un escáner u otro medio, tienen una resolución óptima para su impresión o revelado, que es muy superior al mínimo necesario para que se vea bien en el monitor de un ordenador.

¿Qué se modifica en una imagen para su optimización?

Las imágenes a ser utilizadas en el diseño de una página web o app, puede ser modificada en varios parámetros a los efectos de reducir su peso. El parámetro más empleado para modificar el peso de una imagen es la resolución, cuya medida es en ppp (pixeles por pulgada cuadrada).

Una cámara digital obtiene resoluciones de unas 300 ppp, y una impresión de buena calidad (aunque pueden obtenerse impresiones de mayor calidad) es de 200 ppp.

Estas resoluciones no son necesarias en una imagen que va a ser mostrada en una página web o app, ya que una resolución de 72 ppp es lo que se recomienda para su uso en este medio.

Otro parámetro modificable es el color. Una imagen de alta calidad (denominado color verdadero, ya que se acerca a la capacidad del ojo humano en la detección de colores) tiene una profundidad de color de 32 bits por pixel, de los cuales 24 bits son para el color (casi 17.000.000 de colores) y 8 bits son destinados a las transparencias.

Reduciendo la escala de profundidad del color a 16 bits (color de alta densidad), se obtiene también una reducción del peso de la imagen. Para imágenes que emplean pocos colores, pueden utilizarse escalas menores, como 256 colores o menos.

El formato JPG es apropiado para guardar imágenes fotográficas o con degradados. Este formato admite millones de colores (24 bits) y mantiene el modo de color en RGB de la imagen original. Al guardar en JPG se debe elegir una calidad de compresión. Conviene comprimir lo más posible, mientras la calidad de la imagen sea aceptable.

El formato PNG es la más usada para iconos o marcas.  Su mayor ventaja: la transparencia. La transparencia de PNG logra una calidad de imagen mucho mayor y simplificando el maquetado, permitiendo independizar las imágenes de sus fondos. El PNG tiene dos opciones: PNG8 (con paleta de color reducida hasta 256 colores) y el PNG24 ideal para transparencias.

El formato GIF va más allá, ya que cada imagen guarda su propia escala de colores, lo que reduce notoriamente la cantidad de información (y por consiguiente el peso) que contiene un archivo de imagen. Comprime mejor las imágenes con plenos de color originados en dibujos vectoriales. Este formato reduce la paleta a 256 colores como máximo. Al guardar una imagen como gif, es importante decidir la cantidad de colores porque de esto depende el peso del archivo: cuanto menos colores, más liviano. Las imágenes gif además pueden ser transparentes y animadas.

Al momento de exportar las imágenes transparentes necesitan un tratamiento especial: los bordes de la imagen deben ser suavizados hacia el color sobre el que irá colocado en el HTML, de lo contrario la imagen resultará con bordes duros (serruchados). Para ello se utiliza la opción mate que permite seleccionar el color similar al fondo.

El formato SVG (Scalable Vector Graphics) es un formato vectorial y escalable para web con la ventaja que eso significa para hacer un sitio adaptable. Es un formato abierto, estándar y basado en XML.

El archivo SVG se puede guardar directamente desde Illustrator y el resultado, es un archivo que se puede ver en el navegador, pero que también se puede abrir en programas de editor de código. Esto le da infinitas posibilidades de uso para web, especialmente combinado con el lenguaje javascript.

¿Cómo optimizar una imagen?

Hay varias formas de optimizar una imagen para su empleo en páginas web o app.

Algunos programas de edición de imágenes tienen plug-ins para la optimización y otros tienen esas funcionalidades incorporadas.

– Adobe Photoshop:

Presenta herramientas que permiten definir algunos parámetros de calidad para optimizar las imágenes, tanto reduciendo su calidad para su utilización en la web, como para aumentarla para su uso en impresiones. En Photoshop,  una de las opciones que tiene es la herramienta para guardar imágenes optimizadas para web (archivo > guardar para web).

– GIMP

No posee funciones que permitan definir la calidad de las imágenes tratadas, pero en el guardado permite la modificación de algunos de ellos (según el formato) para reducir su tamaño.

Otra opción es la utilización de herramientas específicas, tanto programas como herramientas online, servicios en línea que permiten emplear algunos trucos con buenos resultados.

 

Unidades de medida en CSS


Las medidas en CSS se emplean para definir la altura, anchura y márgenes de los elementos y para establecer el tamaño de fuente del texto. Todas las medidas se indican como un valor numérico entero o decimal seguido de una unidad de medida.

CSS divide las unidades de medida en dos grupos: absolutas y relativas. Las medidas relativas definen su valor en relación con otra medida, por lo que para obtener su valor real, se debe realizar alguna operación con el valor indicado. Las unidades absolutas establecen de forma completa el valor de una medida, por lo que su valor real es directamente el valor indicado.

Nos referimos a píxeles (px) como una de las unidades absolutas, porque siempre tienen el mismo tamaño, independientemente de cualquier otra medida. No es una unidad escalable: no guarda relación con la medida de fuente de su contenedor o del contenedor root.

Por otro lado disponemos de unidades relativas, que lo son respecto al tamaño de fuente, font-size o a la ventana actual (viewport). Entre las que utilizaremos las unidades de medida rem y porcentaje (%)

 

Porcentajes


La unidad de medida porcentual es la que se usa por defecto en los elementos HTML en donde de manera predeterminada cada elemento de bloque usa un ancho del 100%, es por eso que cuando achicamos la ventana del navegador con una página que no tenga estilos, la página se adapta, ya que siempre usará el ancho total visible.

Pero nosotros podemos utilizar  los porcentajes de una manera más avanzada tratando de generar layouts mas complejos (esquema de distribución de los elementos dentro un diseño).

Supongamos, por ejemplo, que hay un div que contiene todos los elementos de la página y, según el diseño, este elemento debiera medir 1200 pixeles. En lugar de usar esa medida en pixeles, es conveniente usar una medida en porcentajes, en donde el máximo ancho del elemento sean esos 1200px:

 

El uso de los porcentajes también lo podemos llevar a elementos interiores del layout, en donde, por ejemplo, podemos asignar a la columna principal de contenido y a la barra lateral unas medidas de ancho del 70% y el 30% respectivamente, haciendo que sean completamente adaptables al tamaño de su elemento contenedor.

 

 

Rem


La unidad rem viene de Root EM, que es igual al font-size del elemento root, que en HTML sería el elemento <html>. Es una medida relativa no a su elemento padre, sino al contenedor principal html.

Esto significa que si el elemento HTML tiene un tamaño de fuente de 16px (como es por defecto), entonces 1rem, sería igual a 16px, y si queremos aplicar un tamaño basado en rem a cualquier elemento de la página, no importará cual sea el tamaño de fuente que tenga asociado ese elemento, ya que 1 rem siempre será igual a 16 pixeles a no ser que se modifique el elemento raíz.

Usar rem nos permite cierta estructura para poder definir ciertas partes del layout, pero al mismo tiempo nos entrega cierta escalabilidad para respetar las configuraciones de cada usuario.

 


FLEXBOX


La propiedad Flexible Box, o flexbox, de CSS3 es un modo de diseño que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos. Para muchas aplicaciones, el modelo “caja flexible” produce una mejora sobre el modelo “bloque” porque no utiliza la propiedad float, ni hace que los márgenes del contenedor flexible interfieran con los márgenes de sus contenidos.

Muchos diseñadores verán que el modelo “caja flexible” es más sencillo de utilizar. Los elementos“hijos” de una “caja flexible” pueden colocarse en cualquier dirección y pueden tener dimensiones flexibles para adaptarse al espacio visible. Posicionar los elementos “hijos” es más sencillo, y los diseños complejos pueden hacerse más fácilmente y con código más limpio, ya que el orden de visualización de los elementos es independiente del orden que estos tengan en el código fuente. Esta independencia afecta intencionadamente únicamente a la representación visual, dejando el orden de distribución y navegación a lo que diga el código fuente.

Lo que caracteriza un diseño flexible es su habilidad para alterar el ancho y alto de sus elementos para ajustarse lo mejor posible al espacio disponible en cualquier dispositivo. Un contenedor flexible expande sus elementos para rellenar el espacio libre, o los comprime para evitar que rebasen el área prevista.

 

| LINKS RECOMENDADOS | FLEXBOX

Clase 5 | HTML5 + CSS |
Clase 4 | HTML5 | Etiquetas semánticas |

Clase 4 | HTML5 | Etiquetas semánticas |

En la Teórica vimos:                                                                                              

  • HTML5: etiquetas semánticas:

Qué son etiquetas semánticas

Semántica: Perteneciente o relativo a la significación de las palabras.  Este tipo de etiquetas del lenguaje HTML son aquellas que dan un significado a las partes del documento.

Las etiquetas semánticas indican qué es el contenido que contienen, en lugar de cómo se debe formatear al mostrar el documento HTML. Estas  etiquetas, tienen importancia en el marco del HTML y de la composición de un documento web para ayudar a los motores de búsqueda como Google a indexar más correctamente los contenidos de un sitio.

Dentro del etiquetado semántico también tenemos varias funciones, pero las principales y elementales son las que sirven para definir el esquema principal del documento, como HEADER, ARTICLE, FOOTER, etc.  Generalmente, en cualquier documento tenemos una cabecera, un cuerpo y un pie de página, elementos que definen la estructura. Todas esas etiquetas semánticas nos indican qué es el contenido que engloban y cuál es su relación con el conjunto de elementos del documento HTML.

  • header. La cabecera de una web, ojo, no confundir con la etiqueta head.
  • nav. establece un apartado con enlaces de la página, por ejemplo, un menú.
  • main. Expresa el contenido principal de un documento.
  • section. Define una sección de un documento.
  • article. Indica que el contenido encerrado dentro de las etiquetas es un artículo.
  • aside. El contenido lateral de una página.
  • footer. hace referencia al pie de una página o sección.

Las etiquetas semánticas no tienen un estilo predeterminado que el navegador nos vaya a asignar. Es decir, porque HEADER signifique que es una cabecera, el navegador no va en ningún caso a posicionar el elemento en la parte de arriba del documento. Lo mismo con FOOTER, que no lo colocará en la parte de abajo, o ASIDE al lateral.

Nosotros mediante CSS, debemos asignar los estilos que queramos se aplique a cada uno de esos elementos del documento HTML.

También vimos:

  • ul de «unordered list» –lista no ordenada . crea una lista no ordenada. Sus etiquetas son: <ul> y </ul> (ambas obligatorias). Está definido como: Elemento para listas. Crea una caja: En bloque. Puede contener: Uno o más elementos li.
  • li del ingles item list o elemento de lista declara cada uno de los elementos de una lista. Sus etiquetas son: <li> y </li>. Crea una caja: en bloque. Puede contener: cero o más elementos en bloque o en en linea.
  • a  Crea un enlace a otras páginas de internet, archivos o ubicaciones dentro de la misma página, direcciones de correo, o cualquier otra URL. Ejemplo:<a href="http://www.catedraocampo.com.ar">DGPC </a> 

 

 

 

Clase 3 | FTP | HTML5 |

Clase 3 | FTP | HTML5 |

En la teórica de la clase 3 vimos :

HTML 5 (HyperText Markup Language, versión 5)

La semántica es el estudio de los significados de palabras y frases en un idioma ( elementos semánticos = elementos con un significado ). Un elemento semántico describe claramente su significado tanto para el navegador como para el desarrollador. La web semántica se ha venido desarrollando con el paso del tiempo, y el HTML 5 llegó para ayudar en este proceso.

Al «actualizar» a HTML5 el tipo de documento debe estar en la primera línea de cada página HTML. Las versiones anteriores de HTML definen un montón de doctypes, y elegir el más adecuado puede ser difícil. En HTML5, sólo hay un tipo de documento:

<!DOCTYPE html>

El Doctype o “Declaración del tipo de documento” es una instrucción especial que va al inicio de nuestro documento HTML y que permite al navegador entender qué versión de HTML estamos utilizando. Esta información determinará la manera en la que el navegador procesará el documento, un DOCTYPE distinto podría implicar hasta una visualización diferente del sitio web dentro del mismo navegador.

  • <html></html> — el elemento <html>. Este elemento encierra todo el contenido de la página entera, y, a veces, se lo conoce como el elemento raíz (root element).
  • <head></head> — el elemento <head>. Este elemento actúa como un contenedor de todo aquello que se quiera incluir en la página HTML y que no es contenido visible por los visitantes de la página. Incluye cosas como palabras clave, una descripción de la página que aparezca en resultados de búsquedas, CSS para dar estilo al contenido, declaraciones del juego de caracteres, etc.
  • <body></body> — el elemento <body>. Encierra todo el contenido que se desea mostrar a los usuarios web que visiten la página, ya sea texto, imágenes, videos, juegos, pistas de audio reproducibles, y demás.
  • <meta charset="utf-8"> — este elemento establece el juego de caracteres que el documento usará en utf-8, que incluye casi todos los caracteres de todos los idiomas humanos. Básicamente, puede manejar cualquier contenido de texto que se quiera incluir. No hay razón para no establecerlo, y puede evitar problemas en el futuro.
  • <title></title> — establece el título de tu página, que es el título que aparece en la pestaña del navegador cuando la página es cargada, y se usa para describir la página cuando es añadida a los marcadores o como favorita.

 

Clase 2 | Esquicio | TEÓRICA: UX-Principios y reglas |

Clase 2 | Esquicio | TEÓRICA: UX-Principios y reglas |


Compartimos  la teórica de la Clase 2: UX. Usabilidad y Heurísticas. Ejemplos.

 


  Teórica_Usabilidad-Heuríticas

  

 

El pensamiento de diseño es un proceso en el que tratamos de entender al usuario, cuestionar los supuestos , y redefinir problemas en un intento de identificar estrategias y soluciones alternativas que pueden no ser evidentes al instante con nuestro nivel inicial de comprensión. Al mismo tiempo, el pensamiento de diseño proporciona un enfoque basado en la solución para resolver los problemas/necesidades. Es una forma de pensar y de trabajo, método de práctica.

El pensamiento de diseño gira en torno a un profundo interés en el desarrollo de la comprensión de las personas para las que estamos diseñando los productos o servicios. Nos ayuda a observar y desarrollar la empatía con el usuario de destino. Nos  ayuda en el proceso de cuestionamiento: cuestionar el problema, cuestionando los supuestos e implicaciones. Es extremadamente útil en la solución de los problemas que están mal definidos o desconocidos, al volver a enmarcar el problema de una manera centrada en humanos, creando muchas ideas,  intercambio  y adoptando un enfoque práctico en la creación de prototipos, pruebas . El pensamiento de diseño también incluye la experimentación en curso: dibujar , crear  prototipos , pruebas , y así probar los conceptos e ideas.

 

La experiencia del usuario (UX)  es un proceso de creación de productos que proporcionan experiencias significativas y personalmente relevantes. Esto implica el diseño cuidadoso de la usabilidad y el placer derivado de la utilización de un producto.

 

Un concepto importante en el diseño de UX es el proceso por el cual los usuarios forman experiencias. Cuando un usuario se encuentra primero un producto, se forma una impresión momentánea. Esta impresión momentánea evoluciona con el tiempo, por lo general como el producto 

se utiliza en todo un período. En este proceso, el usuario de la percepción, la acción, la motivación y la cognición se integran para formar una historia memorable y coherente: esto es lo que llamamos la experiencia del usuario. Este proceso provoca respuestas emocionales, que determinan en gran medida si la experiencia será considerada positiva o negativa.

Diseñadores UX, o diseñadores que son conscientes del proceso de formación de la experiencia, buscan crear y dar forma deliberada los factores que influyen en el proceso. Para ello, se tendrá en cuenta el por qué , qué y cómo de uso de un producto.

Ficha de Equipo 2do. Cuat. 2019