Sesión 9: Diseño visual / Historia del Diseño web

La clase inicia con una conversación sobre el diseño visual y todo lo visto hasta ahora: El cual se considera una disciplina artística que se encarga de comunicar visualmente un mensaje el cual por lo general es una acción (qué debe hacer el usuario).

Proximidad – Repetición – Alinear, elementos de la Gestalt considerando la composición visual. Un buen diseño digital se esfuerza por presentar el contenido de la plataforma o sitio web de tal manera que el usuario pueda entender cual es la jerarquía y la importancia de los elementos.

Al ser nuestra vista periférica donde el ojo fija la atención en un punto deberíamos captar al usuario según nuestro ritmo, en la interfaz hay muchas cosas que hacer, cómo ordeno la información del sitio ??? hacia dónde debería llegar el usuario

No todos los ojos ven de la misma manera, la paleta de colores tiene la función de ser accesibles y usables, luego esteticamente debe ser agradable, se generan armonias, atributos diferentre 60/30/10%.

Las tipografías también tienen jerarquía, sus tamaños, 16px es el tamaño mas pequeño para nuestro sitio para que sea legible, se buscan las que son legibles y sean universales como las de google fonts, por ejemplo textillaje es un sitio de edición de tipografías.

https://textillate.js.org

Otra habilidad del diseñador es la capacidad de dibujar interfaces SKETCHING, esto ayuda con las proporciones y puedo adelantar el trabajo de formulacion del proyecto:

algunos consejos para mejorar los diseños visualmente: Analizar, demuestra, prioriza, equilibra, testea.

Desarrollo Web/ Historia

La historia de internet 1990 – hasta la fecha

Desde el 2010 Flat design con colores vivos y colores planos es una tendencia en la actualidad, un estilo de diseño de interfaz de usuario que utiliza elementos bidimensionales simples y colores brillantes.

Hoy se utilizan diversos programas para realizar interfaz: Figma que es un Software para realizar interfaz y Adobe XD Sketch, Balsamic, invisionapp, sus entornos son muy similares.

Sitio para animaciones https://animejs.com

 

Historia de Internet

Arpanet es el primer internet. La ARPAnet (advanced research projects agency network) o Red de Angencias de Proyectos de Investigación Avanzada en español, era una red de computadoras construida en 1969 como un medio resistente para enviar datos militares y conectar principales grupos de investigación a través de los Estados Unidos.

Los científicos de ARPANET demostraron que el sistema era operativo creando una red de 40 puntos conectados en diferentes localizaciones. Esto estimuló la búsqueda en este campo y se crearon otras redes.

https://theconversation.com/how-the-internet-was-born-the-network-begins-to-take-shape-67904

Una red creada que nace en la idea de en caso de guerra descentralizar la red de comunicación  para no quedar sin información o inteligencia, el proyecto concluye con Arpanet, Conectaba 23 puntos en EEUU, luego evoluciona a internet

https://www.fib.upc.edu/retro-informatica/historia/internet.html

Entre 1974 y 1982 se crearon gran cantidad de redes entre las que destacaron:

  • Telenet (1974): Versión comercial de ARPANET.
  • Usenet (1979): Sistema abierto centrado en el e-mail y que aun funciona.
  • Bitnet (1981): Unía las universidades americanas usando sistemas IBM.
  • Eunet (1982): Unía Reino Unido, Escandinavia y Holanda.

En aquél momento el mundo de las redes era un poco caótico, a pesar de que ARPANET seguía siendo el “estándar”. EN 1982, ARPANET adoptó el protocolo TCP/IP y en aquel momento se creó Internet (International Net).

En la edición 2022, el informe señala que el número de usuarios de internet en el mundo alcanzó los 4,950 millones de personas, lo que representa al 62,5% de la población mundial (7.910 millones de personas).28-01-2022

WWW

El World Wide Web (WWW) es una red de “sitios” que pueden ser buscados y mostrados con un protocolo llamado HyperText Transfer Protocol (HTTP).

Hoy esta todo cableado con fibra optica. Los cables submarinos son cables de fibra óptica que conectan países de todo el mundo a través de cables colocados en el fondo del océano. Estos cables, a menudo de miles de kilómetros de longitud, pueden transmitir grandes cantidades de datos rápidamente de un punto a otro.

tambien se trabaja en satélites https://www.starlink.com

Museo del arte web

https://web.archive.org/

https://www.versionmuseum.com/history-of/google-search

Entorno DOS
window 3.1
Windows First

La interfaz viene acompañándonos desde el inicio de internet.

Unicorn Designs / Developer = Diseñador / Desarrollador unicornio

 

Diseñador Unicornio: Diseñador que sabe hacer de todo. Es complejo desarrollar todas las areas.

Unicornio (Diseñador + Desarrollador)

¿Quién es un diseñador de pila completa (unicornio)?

No existe una definición estándar del término ‘diseñador de pila completa’, ni una lista universalmente aceptada de conjuntos de habilidades para la calificación. El espectro de opiniones sobre una persona que posiblemente se esconde detrás del título en un CV es muy amplio:

  • un experto en estrategia, investigación de usuarios, diseño de interacción y diseño visual
  • un diseñador visual versátil que puede hacer ilustración, impresión, sitios web y diseño de aplicaciones móviles
  • un diseñador web que entiende los lenguajes de programación lo suficientemente bien como para comunicarse con los desarrolladores en su idioma nativo
  • un diseñador que comprende el aspecto técnico del producto y puede realizar el diseño de un prototipo de trabajo por sí mismo
  • un individuo interdisciplinario que es capaz de diseñar, manejar la redacción publicitaria, descifrar código, etc., para brindar soluciones generales a una variedad de áreas vinculadas a la experiencia del usuario
  • una persona con múltiples habilidades capaz de abordar cada capa de desarrollo de software sin ayuda de nadie
  • un diseñador web que pueda hacer trabajos de desarrollo de back-end y bases de datos
  • un desarrollador web que por alguna razón está diseñando más que desarrollando cualquier cosa
  • una persona que ha intentado ser de todo pero no está segura de cuál debería ser su especialidad
  • otra frase de marketing que utilizan las agencias de empleo para categorizar al personal de TI
En el cruce de información se producen conflictos porque no hay mucho conocimiento de las demás habilidades.

Es un solo proyecto, pero cada área debe aprender a comunicarse, Diseño que es mas artístico y de pensamiento libre versos la programación que es mas estructurada.

La interfaz hoy

Actualmente con el diseño mas minimalista se sugiere un diseño mas funcional, busca predecir lo que quieren los usuarios, google ha evolucionado tecnológicamente,.

Back End también fue cambiando con los lenguajes html5 php css Javascript.

https://en.wikipedia.org/wiki/HTML5

¿Qué significa CSS3? El CSS podría definirse como un tipo de lenguaje que permite definir y crear la presentación de un documento ya estructurado y escrito en un lenguaje de marcado como puede ser HTML. Es decir, permite generar el diseño visual de páginas web e interfaces de usuario, permite modificar el estilo.

SVG o Gráficos Vectoriales Escalables es un estándar web para definir gráficos basados en vectores en páginas web. Basado en XML, el estándar SVG proporciona marcado para describir rutas, formas y texto dentro de una ventana gráfica.

Evolución de internet

https://medium.com/@vivekmadurai/web-evolution-from-1-0-to-3-0-e84f2c06739

La web se torna mas semántica, diversos aspectos del significado, sentido o interpretación de signos lingüísticos como símbolos, palabras, expresiones o representaciones formales.

La web semántica es un conjunto de actividades desarrolladas en el seno de World Wide Web Consortium con tendencia a la creación de tecnologías para publicar datos legibles por aplicaciones informáticas.​ Se basa en la idea de añadir metadatos semánticos y ontológicos a la World Wide Web.

Económicamente también se registra una revolución, con monedas digitales como bitcoin – nft

https://opensea.io

activos digitales NFT, venta de productos como ilustraciones, yo compro el derecho de la imagen.

Evolución Web desde 1.0 a 5.0

http://myeltcafe.com/articles/evolution-of-web-from-1-0-to-5-0/

La interfaz del programa es fundamental para todos los procesos humanos. Hoy las paginas web se parecen cada vez mas a las plataformas, pequeños espacios de interacción.

https://en.wikipedia.org/wiki/History_of_the_web_browser

Historia de la interfaz

https://business.adobe.com/blog/basics/a-brief-history-of-ui-and-whats-coming

Se ha evolucionado a IOT Internet Of Things. El internet de las cosas, los electrodomésticos controlados por una interfaz de un celular. El internet de las cosas​ es un concepto que se refiere a una interconexión digital de objetos cotidianos con internet.​​ Es, en definitiva, la conexión de internet más con objetos que con personas.​ También se suele conocer como internet de todas las cosas o internet sobre las cosas.

Criptomonedas

https://www.caixabankresearch.com/es/economia-y-mercados/politica-monetaria/blockchain-y-criptomonedas-bienvenidos-al-nuevo-paradigma-0#:~:text=La%20tecnología%20blockchain%20facilita%20la,pagos%20tradicionales%20cuentan%20con%20un

La próxima clase revisaremos HTML.