juliosgblog

[juliosgblog]

Programación Creativa

La Programación Creativa (PC) o Creative Coding es un enfoque innovador en la programación que busca la creación de objetos digitales interactivos como una forma de expresión artística. Este enfoque prioriza la expresión sobre la funcionalidad, permitiendo la creación de proyectos que poseen un sentido artístico profundo. La PC se emplea para desarrollar imágenes en tiempo real, diseños visuales, entretenimiento interactivo, mapeo digital, arte sonoro, publicidad, prototipos de productos y diversas variantes más. En las prácticas de computación creativa, se ve el desarrollo de software como un artefacto cultural, un medio no neutral que facilita la comunicación de nuestras emociones. La computadora, según lo descrito por Lev Manovich, se convierte en un metamedio que expande los medios existentes y, por ende, nuestras obras. Los programas generados se consideran software cultural (en esta categoría Manovich incluye herramientas como Photoshop, Illustrator, Premiere, Maya, entre otras).

Programación Creativa con el lenguaje Processing

Las ideas evolutivas de Maeda se materializaron en un nuevo lenguaje conocido como Processing, desarrollado por dos de sus exalumnos del MIT Media Lab. Casey Reas y Benjamin Fry idearon Processing en el año 2001 como un entorno de aprendizaje de programación con un enfoque artístico, permitiendo que personas sin experiencia previa en programación puedan aprender y al mismo tiempo crear sus propias obras.

[juliosgblog]

Accesibilidad en la Web

La accesibilidad web busca garantizar que el contenido en Internet sea utilizable por todos, incluyendo a personas con discapacidades. Desde sus inicios, Internet se concebió como un recurso accesible para absolutamente todos.

WAI y WCAG:

El Consorcio WAI (Iniciativa de Accesibilidad Web) establece estándares y pautas para la accesibilidad web (WCAG). Las últimas pautas se agrupan en cuatro categorías:

Perceptible: Información disponible y perceptible a través de los sentidos.

Operable: Ofrece diversas opciones para manejar la información, adaptándose a distintos dispositivos y necesidades.

Comprensible: Proporciona contenido claro y fácil de entender.

Robusto: Garantiza la adaptabilidad a diferentes dispositivos.

Soluciones para Discapacidades:

Problemas Visuales: Se abordan mediante pautas perceptibles que atienden a la ceguera, baja visión y daltonismo.

Problemas de Audición: Herramientas como subtítulos y señales sonoras en semáforos abordan la sordera.

Problemas Motores: Facilitan el uso del ratón y otros dispositivos de asistencia.

Criterios de Conformidad:

Nivel A (obligatorio).

Nivel AA (necesario).

Nivel AAA (recomendado).

Ejemplos de Herramientas de Accesibilidad:

Captcha Audible: Permite escuchar el código en lugar de visualizarlo.

Subtítulos: Facilitan la comprensión de contenido multimedia.

Semáforos Sonoros: Asisten a personas con discapacidad visual.

Ajuste de Tamaño en Dispositivos Móviles: Facilita la lectura para diversos usuarios.

La accesibilidad web no solo resuelve desafíos, sino que también crea un entorno digital inclusivo, mejorando la experiencia para todos los usuarios.

[juliosgblog]

CARTEL CON IA

[juliosgblog]

Exposiciones

Grupo 1

ICAAN, W3C, Consortium

ICANN: Fundada en 1998 como una organización sin ánimo de lucro, su responsabilidad radica en asignar nombres de dominio y direcciones IP. Su misión principal es garantizar la unicidad de cada página web y evitar la duplicación de nombres.

Consortium: Establecido en 1990, este grupo se enfoca en proporcionar estándares para el almacenamiento. Dentro del Consortium, SNIA se dedica al desarrollo. Entre los beneficios se encuentran...

W3C: World Wide Web Consortium, responsable de establecer estándares web. Han desarrollado protocolos que han impactado en empresas como Amazon Web Services.

MI EXPOSICIÓN :)

Grupo 2: Web 1.0, 2.0, 3.0

Web 1.0: En sus inicios, se basaba en HTML y ofrecía información estática. Las páginas estaban principalmente dedicadas a proporcionar información.

Web 2.0: Marcó un cambio hacia la interacción del usuario, la colaboración en línea y el intercambio de contenido entre usuarios. Surgieron aplicaciones como Wikipedia y Facebook, transformando internet en un espacio colaborativo.

Web 3.0: Conocida como la web semántica, permite a los usuarios proteger sus datos, decidir sobre la compartición de información y personalizar su experiencia en línea. La inteligencia artificial juega un papel crucial. Aunque presenta beneficios como un mayor control sobre los datos y la privacidad, también enfrenta desafíos como la complejidad tecnológica y la limitada accesibilidad.

[juliosgblog]

El Soporte de las Comunicaciones Digitales

Pixel: Una unidad fundamental en el mundo computacional e informático, carente de existencia física y respaldada por las pantallas.

Todos los píxeles comparten el mismo tamaño, diferenciándose únicamente en color. Se conforman a partir de puntos rojos, verdes y azules que se mezclan para generar una gama de colores.

Pixel Art: Un estilo artístico que utiliza la representación visual mediante píxeles, buscando que estos sean claramente visibles.

Similar al concepto del puntillismo en el arte, como lo empleado por Georges Seurat. Los píxeles de 8 y 16 bits eran comunes en los juegos clásicos y aún conservan su relevancia.

Tipos de Pantallas:

CRT (Cathode Ray Tube): Presentes en las primeras computadoras.

LCD (Liquid Crystal Display): Hacen uso de líquidos en su funcionamiento.

LED (Light Emitting Diode): Emiten mayor cantidad de luz.

OLED: No necesitan luz adicional, contando con píxeles independientes.

Tecnologías de Pantallas:

VA: Excelente para visualizar películas y juegos, destacando por sus negros profundos.

IPS: Ideal para diseño gráfico, arte digital y edición de vídeos, gestionando perfiles de colores universales.

Diseño Responsivo: Se adapta a diferentes tamaños de pantalla, ya sean celulares, escritorios o tablets.

Resolución: El tamaño de las pantallas e imágenes en relación con la cantidad de píxeles (por ejemplo, 720p). Los teléfonos móviles pueden tener una resolución superior a la de algunos televisores.

Relación de Aspecto: Aunque no existe una medida específica, todas mantienen una relación entre unidades (por ejemplo, 16:9).

Imágenes:

Vectoriales: Creadas mediante algoritmos matemáticos, ideales para ilustraciones, logotipos y tipografías.

Bitmap: Utilizan píxeles y representan imágenes como fotografías y vídeos.

[juliosgblog]

¿Está obsoleto el diseño de interfaces?

Mercado de plantillas: Plataformas que ofrecen plantillas de sitios web permiten a los usuarios crear sus propios sitios sin necesidad de un diseñador.

Esta práctica puede despojar a la creación de autenticidad. El rol del diseñador se ve sustituido. Sin embargo, su utilidad varía según el contexto. Emplear plantillas para tareas no profesionales está bien. Los diseñadores aportan conocimiento, criterio estético, y pueden infundir emociones y esencia en el diseño.

Patrones de diseño establecidos:

Estos patrones, configuraciones de elementos interactivos, resuelven tareas de interacción de manera reconocible para los usuarios.

A medida que proliferan estos patrones, algunos consideran que diseñar desde cero ya no tiene sentido. En el contexto de aplicaciones y diseño web, la rápida evolución dificulta la adaptación de los usuarios a cambios o mejoras, lo que podría generar rechazo.

Automatización e inteligencia artificial en acción:

Las computadoras ejecutan tareas más allá de nuestras capacidades, a menudo trabajando en colaboración con los humanos.

Aunque son herramientas valiosas, los algoritmos son inherentemente aleatorios. Debemos ser cautelosos en no depender exclusivamente de estas herramientas y perder nuestra capacidad creativa o de producción.

Las páginas de Facebook como nuevos espacios para pequeñas y medianas empresas:

Muchas empresas que ofrecen productos y servicios optan por no desarrollar sus propios sitios web, utilizando en su lugar plataformas de mercado.

Este uso generalizado de marketplaces relega la importancia de las páginas web, descuidando la interfaz y la experiencia del usuario, resultando en sitios ineficientes y con mal aspecto.

La experiencia móvil eclipsa la web tradicional:

El uso predominante de teléfonos celulares sobre computadoras ha llevado a cuestionar la relevancia de diseñar páginas web tradicionales.

A pesar de esta tendencia, algunas páginas web no adaptadas para celulares pueden resultar más cómodas de explorar en una computadora. Diseñar interfaces hoy en día implica considerar la adaptabilidad a distintos dispositivos, desde celulares hasta computadoras.

[juliosgblog]

TENDENCIA DEL DISEÑO U.I.

"La Interfaz de Usuario (UI)

Se enfoca en la parte visual, abarcando el diseño de sitios web y más.

Es el canal mediante el cual el usuario se comunica con un dispositivo.

Está completamente basada en entornos digitales.

Actúa como punto de contacto entre el usuario y un producto o dispositivo digital.

Aborda todos los aspectos del diseño, desde imágenes y tipografía hasta iconografía."

Experiencia de Usuario (UX):

Se enfoca en la facilidad de uso de la plataforma y la satisfacción del cliente, a menudo realizando investigaciones para comprender las necesidades del público y así crear productos adecuados para ellos.

Prioriza la empatía con el usuario para brindar experiencias satisfactorias.

No se limita exclusivamente a lo digital, abarca desde máquinas expendedoras hasta la visita al supermercado o los viajes en avión.

Su objetivo principal es crear experiencias simples, eficientes, pertinentes y agradables para el usuario."

DIFERENCIAS ENTRE UX y UI

Experiencia de Usuario (UX):

Enfoque: Se centra en la experiencia general del usuario al interactuar con un producto o servicio.

Objetivo: Busca crear una experiencia positiva y satisfactoria para el usuario.

Investigación: Incluye investigación de usuarios, pruebas, análisis y comprensión de las necesidades y comportamientos del usuario.

Consideraciones: Involucra aspectos emocionales, psicológicos y contextuales, además de la funcionalidad y la usabilidad.

Interfaz de Usuario (UI):

Enfoque: Se enfoca en el diseño visual y la presentación de la plataforma.

Objetivo: Busca optimizar la interfaz para que sea atractiva y fácil de usar.

Componentes: Incluye elementos visuales como diseño de páginas, botones, tipografía, iconografía, colores, etc.

Implementación: Se centra en la estructura y el diseño de la interfaz para mejorar la usabilidad y la experiencia visual.

En resumen, UX se centra en la experiencia global del usuario, desde la investigación hasta la implementación, considerando aspectos emocionales y funcionales. Mientras tanto, UI se enfoca específicamente en el diseño visual y la presentación de la interfaz para mejorar la usabilidad y la estética. Ambos trabajan en conjunto para crear una experiencia integral y satisfactoria para el usuario.

WAREFRAME

Un wireframe es un esquema o boceto del diseño de una interfaz donde se ubican todos los elementos sin incluir colores ni imágenes.

[juliosgblog]

METÁFORAS

Las metáforas en la creación de logotipos son comparaciones o asociaciones visuales que se utilizan para transmitir un significado más profundo, un concepto o una idea a través de la imagen del logo. Estas metáforas pueden ser elementos visuales o representaciones gráficas que sugieren ciertos valores, características o propósitos asociados con la marca.

Simbolismo Visual: Utilizar imágenes o iconos que representen indirectamente los valores o la identidad de la marca. Por ejemplo, un árbol para representar crecimiento, un globo terráqueo para globalidad o un candado para seguridad.

Formas y Diseños Simbólicos: Utilizar formas, líneas o patrones que evocan ciertas asociaciones o significados. Por ejemplo, líneas ascendentes para progreso, formas circulares para comunidad o un rombo para estabilidad.

Color y Emoción: La elección del color puede ser una metáfora poderosa. Cada color puede evocar emociones o asociaciones específicas. Por ejemplo, el azul para confianza, el verde para sostenibilidad o el rojo para pasión.

[juliosgblog]

EVOLUCIÓN DE LAS MARCAS

La evolución de las marcas a lo largo del tiempo ha sido significativa, influenciada por cambios culturales, avances tecnológicos, tendencias de diseño y la forma en que las empresas se conectan con sus audiencias. Algunos aspectos clave de esta evolución incluyen:

Simplicidad y Versatilidad: Las marcas han evolucionado hacia diseños más simples y versátiles. Esto se refleja en logotipos más limpios, con menos detalles y adaptados para funcionar bien en diferentes plataformas, desde impresión hasta medios digitales.

Adaptación a lo Digital: Con la llegada de Internet y las redes sociales, las marcas han tenido que adaptarse para ser reconocibles y efectivas en entornos digitales. Esto ha llevado a la simplificación de diseños y a la necesidad de ser visualmente atractivas en pantallas pequeñas.

Flexibilidad y Adaptabilidad: Las marcas buscan ser más adaptables a través de sistemas de identidad visual flexibles. Esto implica el uso de variaciones de color, diseño y elementos visuales que se pueden ajustar sin perder la coherencia de la marca.

Enfoque en la Experiencia del Usuario: Las marcas modernas se centran en la experiencia del usuario y buscan conectarse emocionalmente con sus audiencias. Esto se refleja en diseños que buscan generar una conexión más personal y emocional con los consumidores.

Valor de la Marca: Las marcas han cobrado mayor importancia y valor en la percepción de los consumidores. La construcción de una identidad sólida y auténtica se ha vuelto fundamental para diferenciarse en un mercado competitivo.

Transparencia y Responsabilidad: Las marcas modernas están adoptando la transparencia y la responsabilidad social como parte de su identidad. Los consumidores valoran cada vez más las marcas que se comprometen con causas sociales y ambientales.

En resumen, la evolución de las marcas ha sido un proceso dinámico, marcado por la adaptación a nuevos entornos, la búsqueda de una conexión más profunda con los consumidores y la necesidad de diferenciarse en un mercado cada vez más competitivo y globalizado.

[juliosgblog]

ÍCONOS

Los íconos son representaciones gráficas pequeñas y simbólicas que representan objetos, acciones o conceptos específicos. Se utilizan comúnmente en interfaces de usuario, aplicaciones, sitios web y más, para facilitar la identificación rápida y la interacción con funciones o elementos específicos. Los íconos están diseñados para ser visualmente reconocibles y suelen ser intuitivos, ayudando a los usuarios a navegar y comprender de manera más rápida y eficiente las interfaces digitales.

ISOTYPE

Sistema de pictogramas como lenguaje universal y el analfabetismo

ISOTIPO

El término "isotipo" se utiliza en el contexto del diseño gráfico y la comunicación visual para referirse a un elemento gráfico o un símbolo que representa una idea, concepto o entidad específica de manera visualmente identificable. Este elemento gráfico se emplea como una representación simbólica independiente de cualquier texto.

LOGOTIPO

El término "logotipo" se refiere a la representación gráfica o visual de una marca, empresa, producto o entidad, compuesta principalmente por texto o tipografía. En un logotipo, el diseño se centra en el nombre de la marca o empresa utilizando una fuente de texto específia, estilizada y única.

IMAGOTIPO

El término "imagotipo" se refiere a un tipo de logotipo que combina tanto elementos gráficos como elementos textuales. En otras palabras, un imagotipo es una representación visual de una marca que incorpora tanto un símbolo o icono distintivo como el nombre de la marca utilizando una tipografía específica.

ISOLOGO

Un "isologo" es un tipo de logotipo que fusiona un isotipo (un símbolo o icono gráfico independiente) con el logotipo (el nombre o tipografía de la marca) en una sola unidad visual. En esencia, un isologo combina un símbolo distintivo con el nombre de la marca en un diseño integrado.

[juliosgblog]

Esta clase Niki nos presento su cancion.

La combinación de la canción y el video generan una energía que me provoca una sensación increíblemente positiva, algo difícil de poner en palabras.

[juliosgblog]

SKEUMORFISMO

El skeumorfismo en diseño gráfico y de interfaz se refiere a la técnica que utiliza elementos visuales de la vida real, como texturas, sombras, ornamentos o detalles decorativos, para representar objetos físicos en entornos digitales. Estos elementos se incorporan para que los usuarios puedan reconocer y asociar fácilmente la función o el propósito de un objeto digital con su equivalente en el mundo real.

Por ejemplo, en el diseño de aplicaciones, podrías encontrar botones con apariencia de cuero, papel, madera o metal, imitando la apariencia táctil de objetos reales para proporcionar una experiencia de usuario más familiar y comprensible.

Aunque el skeumorfismo solía ser popular en el diseño digital, con el tiempo ha surgido una tendencia hacia estilos más minimalistas y planos. Sin embargo, en ciertos contextos y para ciertos propósitos, todavía se emplea esta técnica para crear interfaces visuales más atractivas y reconocibles para los usuarios.

[juliosgblog]

EVOLUCIÓN HISTÓRICA DEL DISEÑO DIGITAL

En el paisaje de la historia del diseño digital, ciertos hitos marcaron un viaje desde las computadoras imponentes y de acceso restringido hasta la conectividad global, transformando cómo nos relacionamos con la tecnología.

Arpanet (1958) En los años 50, las computadoras eran monumentales y de uso restringido, reservado para aquellos con conocimientos técnicos. Arpanet, concebido en 1958, sentó los cimientos para la interconexión de computadoras, sembrando la semilla que florecería en Internet.

Red Mundial (1960) La década de los 60 vio una expansión de las redes, ampliando la conectividad entre computadoras y allanando el terreno para futuros avances en la comunicación digital.

Douglas Engelbart (1966) En 1966, Douglas Engelbart presentó el primer mouse, revolucionando la interacción humano-computadora y simplificando el manejo de las interfaces gráficas.

Inicio de Arpanet (1969) Arpanet, lanzado en 1969, fue el precursor de Internet, marcando el inicio de la interconexión global de computadoras.

INTERNET (Vinton Cerf) (1970) Vinton Cerf contribuyó al desarrollo de Internet diseñando su estructura fundamental y estableciendo los protocolos que posibilitaron la comunicación en línea.

Correo electrónico (Ray Tomlinson) (1971) Ray Tomlinson implementó el correo electrónico en 1971, presentando una forma revolucionaria de comunicación digital.

Microsoft (Bill Gates y Paul Allen) (1975) En 1975, Bill Gates y Paul Allen fundaron Microsoft, desempeñando un papel crucial en el desarrollo de software para computadoras personales.

APPLE (Steve Jobs) La influencia de Steve Jobs en Apple se destacó por su énfasis en el diseño estético, marcando una diferencia clave con otras compañías.

Xerox Star y Xerox Alto Las interfaces gráficas de Xerox Star y Xerox Alto influyeron significativamente en el diseño de las primeras computadoras personales.

Apple Lisa (1979) Apple Lisa, lanzada en 1979, fue la primera computadora personal accesible al público, representando un hito en la evolución de las interfaces gráficas.

GUI NeXT Computer (1990) La interfaz gráfica de usuario (GUI) en el NeXT Computer, desarrollado por Steve Jobs en 1990, enfatizó la representación de la personalidad del usuario.

Hipertexto Protocolo HTTP y WorldWideWeb (Primera página web) La creación del protocolo HTTP y la primera página web (WorldWideWeb) sentaron las bases para la World Wide Web.

Mac OS 9.1 (1999) y Windows 95 (1995) Mac OS 9.1 y Windows 95 consolidaron la metáfora del escritorio en sistemas operativos populares.

Mac OS X, Windows XP, Windows Vista, Snow Leopard Estos sistemas operativos reflejaron la evolución de las interfaces gráficas, desde la sofisticación hasta la crítica del exceso de metáforas.

Desarrollo de smartphones (Blackberry, iPhone 1) La llegada de Blackberry y el iPhone 1 en 2007 marcó el inicio de los smartphones, transformando la interacción con la tecnología.

Esqueumorfismo El esqueumorfismo, una técnica de diseño que retiene ornamentos o estructuras de objetos originales, influyó en el diseño de interfaces digitales.

Sistema operativo Android (2007) Android, lanzado en 2007, introdujo una alternativa en el mercado de sistemas operativos, marcando el comienzo de tendencias minimalistas.

Mundo virtual y Kinect Tecnologías como Kinect conectaron el mundo virtual con el real, permitiendo la interacción con interfaces mediante el cuerpo.

Metáforas en la actualidad A pesar de la evolución, algunas metáforas persisten en iconos e interfaces, como los íconos de Photoshop, demostrando la importancia del contexto para su comprensión.

CONCLUSIÓN

La evolución del diseño digital representa un viaje desde metáforas literales hasta conceptos más abstractos, moldeando la manera en que nos relacionamos con la tecnología hoy en día.