SlideShare una empresa de Scribd logo
Javier Vélez Reyes
@javiervelezreye
javier.velez.reyes@gmail.com
Madrid 23-24 Septiembre 2019
UX Driven
Architectures
Hoy en día los productos digitales
se construyen desde la
Experiencia de Uso
Experiencia de Uso
Frecuentemente hablamos de Experiencia
de Uso pero rara vez sabemos a qué nos
estamos refiriendo
El Recurso escaso de los
próximos años no será la
tecnología sino la atención
Evolución Web
Mark Weiser
Cx
Nómada
Bx
Seguidor
Liderazgo
Dx
El cliente es un nómada
que consume la Web de
forma sistemática
El negocio se encentra perdido
en esta nueva era y deja
guiarse por negocio
Desarrollo entiende la
tecnología y lidera el
proceso de cambio
El Nomadismo Web
El mundo digital es una enorme
superficie llena de recursos por
consumir
El Feudalismo Web
Grandes bastiones se reparten el
mundo digital y el cliente es un
vasallo que rinde tributo
El cliente es un mero
vasallo qué tributa al
negocio
El negocio tiene un
espacio de interacción
abonado por el cliente
El desarrollador define la
metáfora interactiva que
soporta el negocio
Cx
Bx
Dx
Anfitrión
Vasallo
Facilitador
El Consumismo Web
El cliente es un consumidos
inteligente y los negocios compiten
por un fragmento de su tiempo
El cliente es un
consumidor autónomo
e independiente
Desarrollo atiende las
necesidades técnicas del
cliente
El Negocio es un
proveedor al servicio
del cliente
Cx
Bx
Dx
Proveedor
Consumidor
Soporte
Los modelos de interacción dan
forma a un diálogo físico y
emocional con el producto a lo
largo del tiempo
UX & Interacción
Jon Kolko
Entorno
Canal
Medio
UX & Interacción
UX
Google
Twitter
Dropbox
Mozilla
GitLab
Slack
Bx Dx
Cx
Trivago
Tenedor
Glovo
La experiencia de uso de un
producto guarda una estrecha
relación con su modelo interactivo
Interacción & Medio
Una transición de lo individual,
proactivo y transaccional a lo social,
reactivo y dialógico Individual
Proactivo
Transaccional
Social
Reactivo
Dialógico
tiempo
Interacción & Canal
Una transición de lo centralizado
cerrado y acotado a lo distribuido
abierto e inmersivo Simple
Estático
Rígido
Múltiple
Dinámico
Fluido
Customer
time
Interacción & Entorno
El cliente es un consumidos
inteligente y los negocios compiten
por un fragmento de su tiempo Centralizado
Cerrado
Acotado
Distribuido
Abierto
Inmersivo
Arquitecturas Dirigidas por Modelo
El producto se concibe como una exposición
de los datos que expone el modelo donde la
experiencia de uso es fija
Lo que pensó el
Equipo
Servicios
Datos
Back
Config
Front
Modelo
Platform
Arquitecturas Dirigidas por Modelo
El producto se concibe como una exposición
de los datos que expone el modelo donde la
experiencia de uso es fija
Lo que pensó el
Equipo
Diseño Dirigido por Modelo
El desarrollo del producto comienza
por una conceptualización de las
entidades del dominio
Alineamiento Vista & Datos
La vista se diseña para representar
cada una de las entidades que
conforman el modelo
Experiencia Fija
La construcción del producto parte
de una idea prefijada e incambiable
de la forma de uso
Arquitecturas Dirigidas por UX
El producto se desarrolla como un
servicio en la nube explorado por
componentes cambiantes
Lo que demanda el
Usuario
Servicios
Back
Datos Config
Front
Modelo
Platform
Arquitecturas Dirigidas por UX
El producto se desarrolla como un
servicio en la nube explorado por
componentes cambiantes
Lo que demanda el
Usuario
Diseño Dirigido por Experiencia
El desarrollo del producto por
identificar las diferentes formas
canónicas de interacción con los datos
Diálogo Vista & Datos
La vista establece un diálogo
negociado con el modelo para
alcanzar el objetivo del usuario
Experiencia Adaptativa
La vista se adapta de forma continua
y fluida para atender la demanda de
necesidades de la interacción
Arquitectura Dirigidas
por la Experiencia
En los próximos años el desarrollo de
Software se centrará en crear Arquitecturas
dirigidas por la Experiencia
Desarrollo Dirigido por UX
Las arquitecturas dirigidas por la
experiencia dan forma a un nuevo
paradigma de desarrollo
Sencillo
Intuitivo
Social
Continuo
Accesible
Universal
Abstracción
Delegación
Modularidad
Extensión
Genericidad
Adaptación
Composición
Descubrimiento
Transferencia
Centralidad
Arquitecturas
Técnicas
Patrones
Objetivos
Técnicas
Principios
Principio De Adaptación
Los componentes serán capaces de
adaptarse de forma dinámica para operar en
nuevos contextos arquitectónicos de uso
Cada contexto arquitectónico de uso es diferente y
demanda diferentes formas de comunicación con el
resto de componentes de la vecindad
Aplicar estrategias
de adaptación para
fomentar la
reutilización
Evolución del
Contexto de Uso
Adaptación de
los componentes
Principio De Adaptación
Los componentes serán capaces de
adaptarse de forma dinámica para operar en
nuevos contextos arquitectónicos de uso
Ejecución
Despliegue
Hook B
Adaptación por Sustitución
Dirigida por la Arquitectura
Holder Contractual
Nivel Alto
Adaptación por Transformación
Dirigida por el Lenguaje
Holder Semántico
Nivel Medio
Adaptación por Generación
Dirigida por el Desarrollo
Holder Sintáctico
Nivel Bajo
+
Componente
Hook A
Hook C
Extensiones
render (ctx) {
let template = this.getTemplate ()
let content = this.inject (ctx)
let node = document.importNode (content, true)
let shadow = this.attachShadow ({mode: 'open'})
shadow.appendChild (node)
}
Principio De Adaptación
Los componentes serán capaces de
adaptarse de forma dinámica para operar en
nuevos contextos arquitectónicos de uso
Adaptación por Generación
Dirigida por el Desarrollo
Holder Sintáctico
Nivel Bajo
+
render (ctx) {
let template = this.getTemplate ()
let content = this.inject (ctx)
let node = document.importNode (content, true)
let shadow = this.attachShadow ({mode: 'open'})
if (true) {
shadow = this.attachShadow ({mode: 'closed'})
shadow.appendChild (node)
}
}
function Before () {
return `
if (${Environment==='Production'}) {
shadow = this.attachShadow ({mode: 'closed'})
`
}
Ext
function Render (before, after) {
return `
render (ctx) {
let template = this.getTemplate ()
let content = this.inject (ctx)
let node = document.importNode (content, true)
let shadow = this.attachShadow ({mode: 'open'})
${before}
shadow.appendChild (node)
${after}
}
`
}
Core
function After () {
return `}`
}
Ext
Principio De Adaptación
Los componentes serán capaces de
adaptarse de forma dinámica para operar en
nuevos contextos arquitectónicos de uso
Adaptación por Transformación
Dirigida por el Lenguaje
Holder Semántico
Nivel Medio [Symbol.Iterable]
Core
let Ext = {
map (fn) {
let ys = []
for (let x in this) ys.push (fn (y))
return ys
}
reduce (fn, b) {
let y = b
for (let x in this) y = fn (x, b)
return y
}
}
Adición
Core.map = Ext.map.bind (Core)
Core.reduce = Ext.reduce.bind (Core)
Ext
Ext
Object.setPrototypeOf (Core, Ext)
Extensión
views = []
idx = 0
get (idx)
has (view)
add (view)
remove (view)
previous ()
next ()
let Ext = function (before, after) {
let fn = this.previous
let gn = this.next
previous () {
before (); fn (); after ()
}
after () {
before (); gn (); after ()
}
}
Intercesión
Core.previous = Ext.previous.bind (Core)
Core.next = Ext.next.bind (Core)
Ext
Principio De Adaptación
Los componentes serán capaces de
adaptarse de forma dinámica para operar en
nuevos contextos arquitectónicos de uso
Adaptación por Sustitución
Dirigida por la Arquitectura
Holder Contractual
Nivel Alto
Core
get visitor ()
set visitor (v)
render (ctx) {
this.visitor.before (ctx)
...
this.visitor.after (ctx)
}
let Ext = {
before (ctx) {
...
}
after (ctx) {
...
}
}
Ext
Delegación
Core
render (ctx) {
this.before (ctx)
...
this.after (ctx)
}
Extensión
Ext A Ext B
before ()
after ()
before ()
after ()
Provider
get ()
Principio De Descubrimiento
Los componentes deberán poder operar de
forma autónoma con independencia del
contexto donde se ubiquen
Cada componente explora la geografía del
documento anfitrión para descubrir otros
componentes con los que operar
Los componentes
operan de acuerdo a
la metáfora de
mundo abierto
Descubrir
Operar
Principio De Descubrimiento
Los componentes deberán poder operar de
forma autónoma con independencia del
contexto donde se ubiquen
Exploración
Selección
Identidad
Tipo
Categoría
Marcado
Role
Estrategias de Exploración
Las estrategias de exploración
permiten descubrir componentes
candidatos
Estrategias de Selección
Las Estrategias de selección
discuten criterios para la
selección de componentes
Global
Local
Shadow
Inner
Actividades de
Localización
Principio De Descubrimiento
Los componentes deberán poder operar de
forma autónoma con independencia del
contexto donde se ubiquen
Exploración por Caída Exploración por Escalada Exploración por Inundación
function search (ref) {
return [...this.querySelectorAll (ref)]
.filter (this.match)
}
function search (ref) {
return !function get (self) {
return self && this.match (self)
? self
: get (core.parentNode, ref)
} (this)
}
function search (ref) {
return !function get (self) {
let xs = [...self.querySelectorAll (ref)]
let ys = xs.filter (this.match)
return ys.length
? ys
: get (self.parentNode)
} (this)
}
Estrategias de Exploración
Las estrategias de exploración
permiten descubrir componentes
candidatos
Principio De Descubrimiento
Los componentes deberán poder operar de
forma autónoma con independencia del
contexto donde se ubiquen
Estrategias de Selección
Las Estrategias de selección
discuten criterios para la
selección de componentes
function match (core) {
return this === c
}
function match (core) {
return core.hasAttribute ('left')
}
Selección por Identidad
==
Selección por Marcado
<wc-x>
<wc-y left> ... </wc-y>
<wc-y right> ... </wc-y>
</wc-x>
function match (core) {
let found = true
for (let k in Playable)
found == found && k in core
return found
}
const Playable = ['play', 'pause']
Selección por Role
Playable
+ play
+ pause
Principio De Composición
Los componentes podrán ser combinados de
forma compositiva de acuerdo al conjunto de
restricciones de la arquitectura subyacente
Diferentes componentes ofrecen un modelo
visual e interactivo característico para
conformar una experiencia cohesionada
Construcción por Composición
Diversas estrategias de
composición ayudan a
confeccionar unas
experiencia sin fisuras
Principio De Composición
Los componentes podrán ser combinados de
forma compositiva de acuerdo al conjunto de
restricciones de la arquitectura subyacente
Contrato
público
Contrato
público
Contrato de
Composición
dependencias
servicios
Espacios de Composición
El contrato de un componente
expone 4 espacios sintácticos
de composición
Tipos de Composición
En función de las dependencias
entre partes se distinguen 4
tipos de composición
Estrategias de Composición
Es posible aplicar distintos tipos
de estrategias para cubrir los
objetivos de la composición
Declarative
Nesting Reference
Sibling
Binding
Parent
Principio De Composición
Los componentes podrán ser combinados de
forma compositiva de acuerdo al conjunto de
restricciones de la arquitectura subyacente
Espacios de Composición
El contrato de un componente
expone 4 espacios sintácticos
de composición
LCycle
Event
Data
Reflection
Interpolation
Reactive
Functional
Delegation
Inheritance
HOrder
PEvaluation
Closures
Visual
Properties
Mixins
Inline
Cascade
Playable
let playables = [ , , ]
for (let player of playables) {
player.play ()
}
<wc-x>
<wc-y left> ... </wc-y>
<wc-y right> ... </wc-y>
</wc-x>
<wc-x ref='#y'> ... </wc-x>
<wc-y id='y' > ... </wc-y>
<wc-x> ... </wc-x>
<wc-y> ... </wc-y>
A.addEventListener (type,
function (e) {
B.do (e)
})
Dependiente
Independiente
Independiente Dependiente
Principio De Composición
Los componentes podrán ser combinados de
forma compositiva de acuerdo al conjunto de
restricciones de la arquitectura subyacente
Tipos de Composición
En función de las dependencias
entre partes se distinguen 4
tipos de composición
Composición
Autónoma
Composición
Subordinante
Composición
Subordinada
Composición
Cooperativa
Core.toString = function () {
return ...
}
Core.getId = function () {
return Ext.id
}
Core.map = function (fn) {
let ys =[]
for (k in this) {
let y = fn (Core[k])
ys.push (y)
}
return ys
}
Core.next = function () {
let fn = Ext.next
for (k in this) {
let y = fn (Core[k])
ys.push (y)
}
}
Principio De Composición
Los componentes podrán ser combinados de
forma compositiva de acuerdo al conjunto de
restricciones de la arquitectura subyacente
Estrategias de Composición
Es posible aplicar distintos tipos
de estrategias para cubrir los
objetivos de la composición
B.addEventListener (e, ...)
B.fn (...)
<wc-bind>
<wc-rule from='B' to='C' when='e1' />
<wc-rule from='C' to='B' when='e2' />
</wc-bind>
Composición Vertical
e
fn
B
A
Composición Horizontal
A
B C
Principio De Continuidad
Los componentes serán capaces de ofrecen
una experiencia de continuidad en el uso del
producto
Cada componente representa un
modelo de interacción abstracto y
reutilizable
Paso 1 Paso 3
Paso 2
tiempo
Interacción por micro-flujos UX
Micro-flujos de UX que de
despliegan en el espacio y el
tiempo
Principio De Continuidad
Los componentes serán capaces de ofrecen
una experiencia de continuidad en el uso del
producto
Continuidad
Espacial
Continuidad Temporal
Espacio de
Continuidad
Continuidad Temporal
La continuidad temporal determina
cómo se gestiona la experiencia a
lo largo del tiempo
Continuidad Espacial
La continuidad espacial determina
cómo se distribuye la experiencia a
lo largo de los canales y medios
Principio De Continuidad
Los componentes serán capaces de ofrecen
una experiencia de continuidad en el uso del
producto
Continuidad Temporal
La continuidad temporal determina
cómo se gestiona la experiencia a
lo largo del tiempo
Bus.rule
.When (e1)
.When (e2)
.do (
Skip (3),
Sleep (300),
fn
)
Coordinación por Coreografía
Espacio de
Coordinación
Coordinación por Orquestación
Espacio de
Coordinación
let xs = [ , , ]
let ys = xs.map (asSequenceable)
let idx = 0
while (true) {
ys[idx].next ()
idx = (idx + 1) % ys.length
}
Principio De Continuidad
Los componentes serán capaces de ofrecen
una experiencia de continuidad en el uso del
producto
Continuidad Espacial
La continuidad espacial determina
cómo se distribuye la experiencia a
lo largo de los canales y medios
Playable
Abstracción #1
Abstracción #0
Selección
Árboles
Secuencias
Conjuntos
Flujos
Desktop
Mobile
Weareable
Smart TV
Abstracción de Datos
Abstracción
del
Medio
Principio De Transferencia
Los componentes serán capaces de
transferirse de un locus de ejecución a otro
de forma fluida y transparente
Usuario
tiempo
Experiencia Líquida sin Fisuras
A lo largo del tiempo los
componentes se transfieren a
diferentes contextos de ejecución
Los procesos de
transferencia suelen
responden a
acciones del usuario
Principio De Transferencia
Los componentes serán capaces de
transferirse de un locus de ejecución a
otro de forma fluida y transparente
Estrategias en Cliente
La transferencia del lado cliente
discute cómo debe articularse la
transferencia con componentes
Estrategias en Servidor
La transferencia del lado servidor
como puede utilizarse el servidor
como elemento de respaldo
Cliente
Servidor
Espacio de Transferencia
Cliente
Principio De Transferencia
Los componentes serán capaces de
transferirse de un locus de ejecución a
otro de forma fluida y transparente
Estrategias en Cliente
La transferencia del lado cliente
discute cómo debe articularse la
transferencia con componentes
Weareable Mobile
Proxy Proxy
Send to
Mobile
Bus
.rule (R1)
.rule (R2)
.rule (R3)
Bus
.rule (R4)
.rule (R5)
Principio De Transferencia
Los componentes serán capaces de
transferirse de un locus de ejecución a
otro de forma fluida y transparente
Estrategias en Servidor
La transferencia del lado servidor
como puede utilizarse el servidor
como elemento de respaldo
Send to
Mobile
Bus
.rule (S1)
.rule (S2)
.rule (S3)
Bus
.rule (S4)
.rule (S5)
Principio De Intencionalidad
Los componentes articularán un diálogo
reactiva con otros componentes de sistema
para desplegar una experiencia intencional
Se establece un diálogo transparente entre
los Componentes de entorno para desplegar
una experiencia intencional
Los componentes
responsables de
soportar cada
acción no son fijos
Intención A
Espacio
Intencional
Principio De Intencionalidad
Los componentes articularán un diálogo
reactiva con otros componentes de sistema
para desplegar una experiencia intencional
Nivel de Actividad
Nivel de Servicio
Modelo
Intencional
Nivel de Servicio
El sistema proporciona una serie
de componentes que soportan el
desarrollo de actividades
Nivel de Actividad
Una experiencia interactiva se
define a este nivel como un flujo
de actividades en el tiempo
Principio De Intencionalidad
Los componentes articularán un diálogo
reactiva con otros componentes de sistema
para desplegar una experiencia intencional
Nivel de Actividad
Una experiencia interactiva se
define a este nivel como un flujo
de actividades en el tiempo
Intención B
Intención A
Actividad 1
Acción Y
Acción X
let IA = Intents.get ('commons.a')
Bus
.when (ActionX)
.do (IA)
let IB = Intents.get ('commons.b')
Bus
.when (ActionY)
.do (IB)
Principio De Intencionalidad
Los componentes articularán un diálogo
reactiva con otros componentes de sistema
para desplegar una experiencia intencional
Nivel de Servicio
El sistema proporciona una serie
de componentes que soportan el
desarrollo de actividades
Intents
let wx = ...
Intents
.component (wx)
.intent ('commons.p')
.intent ('commons.q')
.intent ('commons.r')
Principio De Centralidad
Los componentes se publicarán en una cloud
para que sean consumidos bajo demanda y
en tiempo de ejecución por el código fuente
install
Plataforma Cloud
Plataforma Browser
Las Experiencias de uso se
confeccionan como un proceso de
composición bajo demanda
Los servidores en
Cloud son capaces
de contextualizar la
entrega
Principio De Centralidad
Los componentes se publicarán en una cloud
para que sean consumidos bajo demanda y
en tiempo de ejecución por el código fuente
Modelo de Empaquetamiento
Los componentes se agrupan
por paquetes por criterios de
cohesión
Modelo de Despliegue
Para utilizar un paquete sobre
una plataforma se ejecuta un
proceso de instalación
install
Modelo de Importación
Las referencias de importación
se resuelven de forma
contextual antes de su entrega
Dominio Componentes
import
install
Paquetes
Cloud
Browser
Principio De Centralidad
Los componentes se publicarán en una cloud
para que sean consumidos bajo demanda y
en tiempo de ejecución por el código fuente
Modelo de Empaquetamiento
Los componentes se agrupan
por paquetes por criterios de
cohesión
package.json provider.js
Servicios
dependencias
Metadatos Instalación
'id' : 'core.chameleon',
'export' : {
'aspect' : 'inspect.js' ,
'component' : 'decorators/component.js' ,
'extends' : 'decorators/extends.js' ,
'extension' : 'decorators/extension.js' ,
}
'import' : [
'core.commons.helper' ,
'core.commons.builder' ,
'core.commons.decorators'
]
'provider' : 'provider.js'
'id' : 'core.chameleon',
'export' : {
'inspect' : 'inspect.js' ,
'component' : 'decorators/component.js' ,
'extends' : 'decorators/extends.js' ,
'extension' : 'decorators/extension.js' ,
}
'import' : [
'core.commons.helper' ,
'core.commons.builder' ,
'core.commons.decorators'
]
Principio De Centralidad
Los componentes se publicarán en una cloud
para que sean consumidos bajo demanda y
en tiempo de ejecución por el código fuente
Modelo de Despliegue
Para utilizar un paquete sobre
una plataforma se ejecuta un
proceso de instalación
install
Plataforma
install
core.chameleon.inspect : http://server/chameleon/core/inspect.js
core.chameleon.component : http://server/chameleon/decorators/component.js
core.chameleon.extends : http://server/chameleon/decorators/extends.js
core.chameleon.extension : http://server/chameleon/decorators/extension.js
core.component.chameleon
Registro
Principio De Centralidad
Los componentes se publicarán en una cloud
para que sean consumidos bajo demanda y
en tiempo de ejecución por el código fuente
Modelo de Importación
Las referencias de importación
se resuelven de forma
contextual antes de su entrega
Plataforma
Registro
import { Artifact } from 'Reference'
core.chameleon.inspect : http://server/chameleon/core/inspect.js
core.chameleon.component : http://server/chameleon/decorators/component.js
core.chameleon.extends : http://server/chameleon/decorators/extends.js
core.chameleon.extension : http://server/chameleon/decorators/extension.js
import
Referencia Simbólica
Abstracta Específica
commons.logger Core.chameleon.inspect ./lib/loader.js
../helper/builder.js
Referencia Física
Absoluta Relativa
/lib/loader.js
Local
Global
http://server/loader.js
Metodología Dirigida
por la Experiencia
La forma en la que se desarrollan
arquitecturas dirigidas por la experiencia
también se altera
Errores Wally
A veces existen error ocultos que
hacen que todo funcione pero
invalidan una solución
Servicios
Back
Datos Config
Front
Modelo
Platform
Dónde está
Wally
Desarrollo Dirigido por Modelo
Las arquitecturas dirigidas por el
modelo siguen el ciclo clásico de
desarrollo de productos
La Idea
Researching
Rutinas Preferencias
Necesidades
Acciones
Intereses
Intenciones
El Diseño
Estructura & Interacción
Estilo
&
Respuesta
La Ejecución
Interacción & Feedback
Asumir una ideación
preconcebida de la
experiencia Crear un diseño fijo
y estático desde la
concepción
equivocada
Construir componentes
específicos de proyecto
con acoplamiento a
datos No cubrir las expectativas
del cliente ni poder
repivotar desde el front
Store
View
Action
Reducer
App
La Construcción
Desarrollo Dirigido por UX
En las arquitecturas dirigidas por la
experiencia el método de
desarrollo se ve alterado
Entender que cada
usuario tiene un ruta
experiencial propia
La Idea
Path A
Path B
Path C
El Diseño
Path A
Path B
Path C
Implementar variantes
para cada ruta UX que se
pueda desplegar
La Construcción
Composición
Adaptación
La construcción es una
actividad de composición
y adaptación en tiempo
de ejecución
La Ejecución
El producto se adapta
según la demanda
experiencial de cada
usuario
Javier Vélez Reyes
@javiervelezreye
javier.velez.reyes@gmail.com
Madrid 23-24 Septiembre 2019
UX Driven
Architectures

Más contenido relacionado

La actualidad más candente

Planificando las bases de una aplicación windows phone
Planificando las bases de una aplicación windows phonePlanificando las bases de una aplicación windows phone
Planificando las bases de una aplicación windows phone
Sorey García
 
Metaprogramación en JavaScript
Metaprogramación en JavaScriptMetaprogramación en JavaScript
Metaprogramación en JavaScript
Javier Vélez Reyes
 
Estrategias de Programación & Estructuras de Datos
Estrategias de Programación & Estructuras de DatosEstrategias de Programación & Estructuras de Datos
Estrategias de Programación & Estructuras de Datos
Javier Vélez Reyes
 
Nuevas formas de pensar en datos con LINQ y Visual Studio 2008
Nuevas formas de pensar en datos con LINQ y Visual Studio 2008Nuevas formas de pensar en datos con LINQ y Visual Studio 2008
Nuevas formas de pensar en datos con LINQ y Visual Studio 2008
juliocasal
 
SOA en la Práctica: WCF &amp; WSSF
SOA en la Práctica: WCF &amp; WSSFSOA en la Práctica: WCF &amp; WSSF
SOA en la Práctica: WCF &amp; WSSF
juliocasal
 
Generalidades de visual basic 8
Generalidades de visual basic 8Generalidades de visual basic 8
Generalidades de visual basic 8
Diego Maxdj Chicaiza
 
El Proyecto Polymer
El Proyecto PolymerEl Proyecto Polymer
El Proyecto Polymer
Javier Vélez Reyes
 
Lenguaje unificado
Lenguaje unificadoLenguaje unificado
Lenguaje unificado
universidad jose antonio paez
 
VS 2005 Y SQL Server 2005 Juntos Son Aun Mejores
VS 2005 Y SQL Server 2005 Juntos Son Aun MejoresVS 2005 Y SQL Server 2005 Juntos Son Aun Mejores
VS 2005 Y SQL Server 2005 Juntos Son Aun Mejores
juliocasal
 
Ponencia conic 2009_darc
Ponencia conic 2009_darcPonencia conic 2009_darc
Ponencia conic 2009_darc
Jorge Rodriguez
 
Un Vistazo A Windows Presentation Foundation
Un Vistazo A Windows Presentation FoundationUn Vistazo A Windows Presentation Foundation
Un Vistazo A Windows Presentation Foundation
juliocasal
 
Reglas de Oro para el Desarrollo con Windows Vista
Reglas de Oro para el Desarrollo con Windows VistaReglas de Oro para el Desarrollo con Windows Vista
Reglas de Oro para el Desarrollo con Windows Vista
juliocasal
 
Trabajo gru
Trabajo gruTrabajo gru
Trabajo gru
jhoffry dekentai
 
Manual de bouml
Manual de boumlManual de bouml
Manual de bouml
ULEAM
 
Fundamentos de visual basic 6.0
Fundamentos de visual basic 6.0Fundamentos de visual basic 6.0
Fundamentos de visual basic 6.0
Jose Ancianis
 

La actualidad más candente (15)

Planificando las bases de una aplicación windows phone
Planificando las bases de una aplicación windows phonePlanificando las bases de una aplicación windows phone
Planificando las bases de una aplicación windows phone
 
Metaprogramación en JavaScript
Metaprogramación en JavaScriptMetaprogramación en JavaScript
Metaprogramación en JavaScript
 
Estrategias de Programación & Estructuras de Datos
Estrategias de Programación & Estructuras de DatosEstrategias de Programación & Estructuras de Datos
Estrategias de Programación & Estructuras de Datos
 
Nuevas formas de pensar en datos con LINQ y Visual Studio 2008
Nuevas formas de pensar en datos con LINQ y Visual Studio 2008Nuevas formas de pensar en datos con LINQ y Visual Studio 2008
Nuevas formas de pensar en datos con LINQ y Visual Studio 2008
 
SOA en la Práctica: WCF &amp; WSSF
SOA en la Práctica: WCF &amp; WSSFSOA en la Práctica: WCF &amp; WSSF
SOA en la Práctica: WCF &amp; WSSF
 
Generalidades de visual basic 8
Generalidades de visual basic 8Generalidades de visual basic 8
Generalidades de visual basic 8
 
El Proyecto Polymer
El Proyecto PolymerEl Proyecto Polymer
El Proyecto Polymer
 
Lenguaje unificado
Lenguaje unificadoLenguaje unificado
Lenguaje unificado
 
VS 2005 Y SQL Server 2005 Juntos Son Aun Mejores
VS 2005 Y SQL Server 2005 Juntos Son Aun MejoresVS 2005 Y SQL Server 2005 Juntos Son Aun Mejores
VS 2005 Y SQL Server 2005 Juntos Son Aun Mejores
 
Ponencia conic 2009_darc
Ponencia conic 2009_darcPonencia conic 2009_darc
Ponencia conic 2009_darc
 
Un Vistazo A Windows Presentation Foundation
Un Vistazo A Windows Presentation FoundationUn Vistazo A Windows Presentation Foundation
Un Vistazo A Windows Presentation Foundation
 
Reglas de Oro para el Desarrollo con Windows Vista
Reglas de Oro para el Desarrollo con Windows VistaReglas de Oro para el Desarrollo con Windows Vista
Reglas de Oro para el Desarrollo con Windows Vista
 
Trabajo gru
Trabajo gruTrabajo gru
Trabajo gru
 
Manual de bouml
Manual de boumlManual de bouml
Manual de bouml
 
Fundamentos de visual basic 6.0
Fundamentos de visual basic 6.0Fundamentos de visual basic 6.0
Fundamentos de visual basic 6.0
 

Similar a Arquitecturas Dirigidas por la Experiencia

EFC-Programación .net-Luis Fernando Aguas - 15012022 1500.pptx
EFC-Programación .net-Luis Fernando Aguas - 15012022 1500.pptxEFC-Programación .net-Luis Fernando Aguas - 15012022 1500.pptx
EFC-Programación .net-Luis Fernando Aguas - 15012022 1500.pptx
Luis Fernando Aguas Bucheli
 
Efc programación .net-luis fernando aguas - 22012022 1700
Efc programación .net-luis fernando aguas - 22012022 1700Efc programación .net-luis fernando aguas - 22012022 1700
Efc programación .net-luis fernando aguas - 22012022 1700
Luis Fernando Aguas Bucheli
 
La magia de Flutter
La magia de FlutterLa magia de Flutter
La magia de Flutter
Mauricio Angulo Sillas
 
5-Unidad 2: Diseño de Vista-2.2 Para Web
5-Unidad 2: Diseño de Vista-2.2 Para Web5-Unidad 2: Diseño de Vista-2.2 Para Web
5-Unidad 2: Diseño de Vista-2.2 Para Web
Luis Fernando Aguas Bucheli
 
TenerifeDev - Desarrollando WebApps en la nube
TenerifeDev - Desarrollando WebApps en la nubeTenerifeDev - Desarrollando WebApps en la nube
TenerifeDev - Desarrollando WebApps en la nube
intelequiass
 
Commit 2018 - Integrando Microservicios y Machine Learning
Commit 2018 - Integrando Microservicios y Machine LearningCommit 2018 - Integrando Microservicios y Machine Learning
Commit 2018 - Integrando Microservicios y Machine Learning
Rafa Hidalgo
 
Arquitectura en la nube. PowerPoint^.pptx
Arquitectura en la nube. PowerPoint^.pptxArquitectura en la nube. PowerPoint^.pptx
Arquitectura en la nube. PowerPoint^.pptx
El Arcón de Clio
 
5-Unidad 2: Diseños de Vista-2.2 Para Web
5-Unidad 2: Diseños de Vista-2.2 Para Web5-Unidad 2: Diseños de Vista-2.2 Para Web
5-Unidad 2: Diseños de Vista-2.2 Para Web
Luis Fernando Aguas Bucheli
 
Renderizando la web del 2020
Renderizando la web del 2020Renderizando la web del 2020
Renderizando la web del 2020
Adrian Alonso Vega
 
Cliente/Servidor
Cliente/ServidorCliente/Servidor
Unidad 4
Unidad 4Unidad 4
Unidad 4
mi casa
 
Webinar: Descubre los diferentes servicios Cloud Native en Azure
Webinar: Descubre los diferentes servicios Cloud Native en AzureWebinar: Descubre los diferentes servicios Cloud Native en Azure
Webinar: Descubre los diferentes servicios Cloud Native en Azure
atSistemas
 
Cloud Native en Azure Webinar atSistemas
Cloud Native en Azure Webinar atSistemasCloud Native en Azure Webinar atSistemas
Cloud Native en Azure Webinar atSistemas
Santi Macias Rodriguez
 
(25.03) RUN 09 - Sesiones Desarrollo - SI 2.0
(25.03) RUN 09 - Sesiones Desarrollo - SI 2.0(25.03) RUN 09 - Sesiones Desarrollo - SI 2.0
(25.03) RUN 09 - Sesiones Desarrollo - SI 2.0
Microsoft Argentina y Uruguay [Official Space]
 
Autocadintermedio
AutocadintermedioAutocadintermedio
Cliente servidoryj
Cliente servidoryjCliente servidoryj
Cliente servidoryj
yoshimaryj
 
Cloud Native en Azure impartido en Microsoft Madrid y Barcelona
 Cloud Native en Azure impartido en Microsoft Madrid y Barcelona Cloud Native en Azure impartido en Microsoft Madrid y Barcelona
Cloud Native en Azure impartido en Microsoft Madrid y Barcelona
Santi Macias Rodriguez
 
Patrones j2 ee
Patrones j2 eePatrones j2 ee
Patrones j2 ee
Roberto Moreno Doñoro
 
Creatividad en la visualización de contenidos en SharePoint con JS Link y Dis...
Creatividad en la visualización de contenidos en SharePoint con JS Link y Dis...Creatividad en la visualización de contenidos en SharePoint con JS Link y Dis...
Creatividad en la visualización de contenidos en SharePoint con JS Link y Dis...
Santiago Porras Rodríguez
 
Creando Aplicaciones Web en el 2015
 Creando Aplicaciones Web en el 2015 Creando Aplicaciones Web en el 2015
Creando Aplicaciones Web en el 2015
Globant
 

Similar a Arquitecturas Dirigidas por la Experiencia (20)

EFC-Programación .net-Luis Fernando Aguas - 15012022 1500.pptx
EFC-Programación .net-Luis Fernando Aguas - 15012022 1500.pptxEFC-Programación .net-Luis Fernando Aguas - 15012022 1500.pptx
EFC-Programación .net-Luis Fernando Aguas - 15012022 1500.pptx
 
Efc programación .net-luis fernando aguas - 22012022 1700
Efc programación .net-luis fernando aguas - 22012022 1700Efc programación .net-luis fernando aguas - 22012022 1700
Efc programación .net-luis fernando aguas - 22012022 1700
 
La magia de Flutter
La magia de FlutterLa magia de Flutter
La magia de Flutter
 
5-Unidad 2: Diseño de Vista-2.2 Para Web
5-Unidad 2: Diseño de Vista-2.2 Para Web5-Unidad 2: Diseño de Vista-2.2 Para Web
5-Unidad 2: Diseño de Vista-2.2 Para Web
 
TenerifeDev - Desarrollando WebApps en la nube
TenerifeDev - Desarrollando WebApps en la nubeTenerifeDev - Desarrollando WebApps en la nube
TenerifeDev - Desarrollando WebApps en la nube
 
Commit 2018 - Integrando Microservicios y Machine Learning
Commit 2018 - Integrando Microservicios y Machine LearningCommit 2018 - Integrando Microservicios y Machine Learning
Commit 2018 - Integrando Microservicios y Machine Learning
 
Arquitectura en la nube. PowerPoint^.pptx
Arquitectura en la nube. PowerPoint^.pptxArquitectura en la nube. PowerPoint^.pptx
Arquitectura en la nube. PowerPoint^.pptx
 
5-Unidad 2: Diseños de Vista-2.2 Para Web
5-Unidad 2: Diseños de Vista-2.2 Para Web5-Unidad 2: Diseños de Vista-2.2 Para Web
5-Unidad 2: Diseños de Vista-2.2 Para Web
 
Renderizando la web del 2020
Renderizando la web del 2020Renderizando la web del 2020
Renderizando la web del 2020
 
Cliente/Servidor
Cliente/ServidorCliente/Servidor
Cliente/Servidor
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Webinar: Descubre los diferentes servicios Cloud Native en Azure
Webinar: Descubre los diferentes servicios Cloud Native en AzureWebinar: Descubre los diferentes servicios Cloud Native en Azure
Webinar: Descubre los diferentes servicios Cloud Native en Azure
 
Cloud Native en Azure Webinar atSistemas
Cloud Native en Azure Webinar atSistemasCloud Native en Azure Webinar atSistemas
Cloud Native en Azure Webinar atSistemas
 
(25.03) RUN 09 - Sesiones Desarrollo - SI 2.0
(25.03) RUN 09 - Sesiones Desarrollo - SI 2.0(25.03) RUN 09 - Sesiones Desarrollo - SI 2.0
(25.03) RUN 09 - Sesiones Desarrollo - SI 2.0
 
Autocadintermedio
AutocadintermedioAutocadintermedio
Autocadintermedio
 
Cliente servidoryj
Cliente servidoryjCliente servidoryj
Cliente servidoryj
 
Cloud Native en Azure impartido en Microsoft Madrid y Barcelona
 Cloud Native en Azure impartido en Microsoft Madrid y Barcelona Cloud Native en Azure impartido en Microsoft Madrid y Barcelona
Cloud Native en Azure impartido en Microsoft Madrid y Barcelona
 
Patrones j2 ee
Patrones j2 eePatrones j2 ee
Patrones j2 ee
 
Creatividad en la visualización de contenidos en SharePoint con JS Link y Dis...
Creatividad en la visualización de contenidos en SharePoint con JS Link y Dis...Creatividad en la visualización de contenidos en SharePoint con JS Link y Dis...
Creatividad en la visualización de contenidos en SharePoint con JS Link y Dis...
 
Creando Aplicaciones Web en el 2015
 Creando Aplicaciones Web en el 2015 Creando Aplicaciones Web en el 2015
Creando Aplicaciones Web en el 2015
 

Más de Javier Vélez Reyes

Procesadores de Lenguajes II
Procesadores de Lenguajes IIProcesadores de Lenguajes II
Procesadores de Lenguajes II
Javier Vélez Reyes
 
Procesadores de Lenguajes I
Procesadores de Lenguajes IProcesadores de Lenguajes I
Procesadores de Lenguajes I
Javier Vélez Reyes
 
Arquitectura de Componentes Web. Patrones de Acceso a Datos
Arquitectura de Componentes Web. Patrones de Acceso a DatosArquitectura de Componentes Web. Patrones de Acceso a Datos
Arquitectura de Componentes Web. Patrones de Acceso a Datos
Javier Vélez Reyes
 
Arquitecturas de Componentes Web. Patrones de Composición
Arquitecturas de Componentes Web. Patrones de ComposiciónArquitecturas de Componentes Web. Patrones de Composición
Arquitecturas de Componentes Web. Patrones de Composición
Javier Vélez Reyes
 
Taller de Programación Funcional en JavaScript
Taller de Programación Funcional en JavaScriptTaller de Programación Funcional en JavaScript
Taller de Programación Funcional en JavaScript
Javier Vélez Reyes
 
La Web Orientada a Componentes
La Web Orientada a ComponentesLa Web Orientada a Componentes
La Web Orientada a Componentes
Javier Vélez Reyes
 
Programación Funcional en JavaScript
Programación Funcional en JavaScriptProgramación Funcional en JavaScript
Programación Funcional en JavaScript
Javier Vélez Reyes
 
Programación Asíncrona en Node JS
Programación Asíncrona en Node JSProgramación Asíncrona en Node JS
Programación Asíncrona en Node JS
Javier Vélez Reyes
 

Más de Javier Vélez Reyes (8)

Procesadores de Lenguajes II
Procesadores de Lenguajes IIProcesadores de Lenguajes II
Procesadores de Lenguajes II
 
Procesadores de Lenguajes I
Procesadores de Lenguajes IProcesadores de Lenguajes I
Procesadores de Lenguajes I
 
Arquitectura de Componentes Web. Patrones de Acceso a Datos
Arquitectura de Componentes Web. Patrones de Acceso a DatosArquitectura de Componentes Web. Patrones de Acceso a Datos
Arquitectura de Componentes Web. Patrones de Acceso a Datos
 
Arquitecturas de Componentes Web. Patrones de Composición
Arquitecturas de Componentes Web. Patrones de ComposiciónArquitecturas de Componentes Web. Patrones de Composición
Arquitecturas de Componentes Web. Patrones de Composición
 
Taller de Programación Funcional en JavaScript
Taller de Programación Funcional en JavaScriptTaller de Programación Funcional en JavaScript
Taller de Programación Funcional en JavaScript
 
La Web Orientada a Componentes
La Web Orientada a ComponentesLa Web Orientada a Componentes
La Web Orientada a Componentes
 
Programación Funcional en JavaScript
Programación Funcional en JavaScriptProgramación Funcional en JavaScript
Programación Funcional en JavaScript
 
Programación Asíncrona en Node JS
Programación Asíncrona en Node JSProgramación Asíncrona en Node JS
Programación Asíncrona en Node JS
 

Último

El uso de las TIC's en la vida cotidiana
El uso de las TIC's en la vida cotidianaEl uso de las TIC's en la vida cotidiana
El uso de las TIC's en la vida cotidiana
231458066
 
625204013-64-Camino-a-----La-Lectura.pdf
625204013-64-Camino-a-----La-Lectura.pdf625204013-64-Camino-a-----La-Lectura.pdf
625204013-64-Camino-a-----La-Lectura.pdf
yuberpalma
 
edublogs info.docx asdasfasfsawqrdqwfqwfqwfq
edublogs info.docx asdasfasfsawqrdqwfqwfqwfqedublogs info.docx asdasfasfsawqrdqwfqwfqwfq
edublogs info.docx asdasfasfsawqrdqwfqwfqwfq
larapalaciosmonzon28
 
Uso de las Tics en la vida cotidiana.pptx
Uso de las Tics en la vida cotidiana.pptxUso de las Tics en la vida cotidiana.pptx
Uso de las Tics en la vida cotidiana.pptx
231485414
 
Inteligencia Artificial
Inteligencia ArtificialInteligencia Artificial
Inteligencia Artificial
YashiraPaye
 
Second Life, informe de actividad del maestro Tapia
Second Life, informe de actividad del maestro TapiaSecond Life, informe de actividad del maestro Tapia
Second Life, informe de actividad del maestro Tapia
al050121024
 
Flows: Mejores Prácticas y Nuevos Features
Flows: Mejores Prácticas y Nuevos FeaturesFlows: Mejores Prácticas y Nuevos Features
Flows: Mejores Prácticas y Nuevos Features
Paola De la Torre
 
Slideshare: definiciòn, registrarse, presentaciones, ventajas y desventajas
Slideshare: definiciòn, registrarse, presentaciones, ventajas y desventajasSlideshare: definiciòn, registrarse, presentaciones, ventajas y desventajas
Slideshare: definiciòn, registrarse, presentaciones, ventajas y desventajas
AdrianaRengifo14
 
Infografia TCP/IP (Transmission Control Protocol/Internet Protocol)
Infografia TCP/IP (Transmission Control Protocol/Internet Protocol)Infografia TCP/IP (Transmission Control Protocol/Internet Protocol)
Infografia TCP/IP (Transmission Control Protocol/Internet Protocol)
codesiret
 
Herramientas para los abogados, 3 herramientas
Herramientas para los abogados, 3 herramientasHerramientas para los abogados, 3 herramientas
Herramientas para los abogados, 3 herramientas
yessicacarrillo16
 
Presentación Seguridad Digital Profesional Azul Oscuro (1).pdf
Presentación Seguridad Digital Profesional Azul Oscuro (1).pdfPresentación Seguridad Digital Profesional Azul Oscuro (1).pdf
Presentación Seguridad Digital Profesional Azul Oscuro (1).pdf
giampierdiaz5
 
La Inteligencia Artificial en la actualidad.docx
La Inteligencia Artificial en la actualidad.docxLa Inteligencia Artificial en la actualidad.docx
La Inteligencia Artificial en la actualidad.docx
luiscohailatenazoa0
 
UML_clase_02_UML_casos_de_uso_05 EN DIAGRAMA
UML_clase_02_UML_casos_de_uso_05 EN DIAGRAMAUML_clase_02_UML_casos_de_uso_05 EN DIAGRAMA
UML_clase_02_UML_casos_de_uso_05 EN DIAGRAMA
martinezluis17
 
Presentación de Tic en educación y sobre blogger
Presentación de Tic en educación y sobre bloggerPresentación de Tic en educación y sobre blogger
Presentación de Tic en educación y sobre blogger
larapalaciosmonzon28
 
El uso de las TIC por Cecilia Pozos S..pptx
El uso de las TIC  por Cecilia Pozos S..pptxEl uso de las TIC  por Cecilia Pozos S..pptx
El uso de las TIC por Cecilia Pozos S..pptx
cecypozos703
 
El uso de las TIC en la vida cotidiana.pptx
El uso de las TIC en la vida cotidiana.pptxEl uso de las TIC en la vida cotidiana.pptx
El uso de las TIC en la vida cotidiana.pptx
jgvanessa23
 
Catalogo General Rubi 2024 Amado Salvador Distribuidor Oficial Valencia
Catalogo General Rubi 2024 Amado Salvador Distribuidor Oficial ValenciaCatalogo General Rubi 2024 Amado Salvador Distribuidor Oficial Valencia
Catalogo General Rubi 2024 Amado Salvador Distribuidor Oficial Valencia
AMADO SALVADOR
 
TIC en educacion.rtf.docxlolololololololo
TIC en educacion.rtf.docxlolololololololoTIC en educacion.rtf.docxlolololololololo
TIC en educacion.rtf.docxlolololololololo
KukiiSanchez
 
INFORMATICA Y TECNOLOGIA
INFORMATICA Y TECNOLOGIAINFORMATICA Y TECNOLOGIA
INFORMATICA Y TECNOLOGIA
renzocruz180310
 
LA GLOBALIZACIÓN RELACIONADA CON EL USO DE HERRAMIENTAS.pptx
LA GLOBALIZACIÓN RELACIONADA CON EL USO DE HERRAMIENTAS.pptxLA GLOBALIZACIÓN RELACIONADA CON EL USO DE HERRAMIENTAS.pptx
LA GLOBALIZACIÓN RELACIONADA CON EL USO DE HERRAMIENTAS.pptx
pauca1501alvar
 

Último (20)

El uso de las TIC's en la vida cotidiana
El uso de las TIC's en la vida cotidianaEl uso de las TIC's en la vida cotidiana
El uso de las TIC's en la vida cotidiana
 
625204013-64-Camino-a-----La-Lectura.pdf
625204013-64-Camino-a-----La-Lectura.pdf625204013-64-Camino-a-----La-Lectura.pdf
625204013-64-Camino-a-----La-Lectura.pdf
 
edublogs info.docx asdasfasfsawqrdqwfqwfqwfq
edublogs info.docx asdasfasfsawqrdqwfqwfqwfqedublogs info.docx asdasfasfsawqrdqwfqwfqwfq
edublogs info.docx asdasfasfsawqrdqwfqwfqwfq
 
Uso de las Tics en la vida cotidiana.pptx
Uso de las Tics en la vida cotidiana.pptxUso de las Tics en la vida cotidiana.pptx
Uso de las Tics en la vida cotidiana.pptx
 
Inteligencia Artificial
Inteligencia ArtificialInteligencia Artificial
Inteligencia Artificial
 
Second Life, informe de actividad del maestro Tapia
Second Life, informe de actividad del maestro TapiaSecond Life, informe de actividad del maestro Tapia
Second Life, informe de actividad del maestro Tapia
 
Flows: Mejores Prácticas y Nuevos Features
Flows: Mejores Prácticas y Nuevos FeaturesFlows: Mejores Prácticas y Nuevos Features
Flows: Mejores Prácticas y Nuevos Features
 
Slideshare: definiciòn, registrarse, presentaciones, ventajas y desventajas
Slideshare: definiciòn, registrarse, presentaciones, ventajas y desventajasSlideshare: definiciòn, registrarse, presentaciones, ventajas y desventajas
Slideshare: definiciòn, registrarse, presentaciones, ventajas y desventajas
 
Infografia TCP/IP (Transmission Control Protocol/Internet Protocol)
Infografia TCP/IP (Transmission Control Protocol/Internet Protocol)Infografia TCP/IP (Transmission Control Protocol/Internet Protocol)
Infografia TCP/IP (Transmission Control Protocol/Internet Protocol)
 
Herramientas para los abogados, 3 herramientas
Herramientas para los abogados, 3 herramientasHerramientas para los abogados, 3 herramientas
Herramientas para los abogados, 3 herramientas
 
Presentación Seguridad Digital Profesional Azul Oscuro (1).pdf
Presentación Seguridad Digital Profesional Azul Oscuro (1).pdfPresentación Seguridad Digital Profesional Azul Oscuro (1).pdf
Presentación Seguridad Digital Profesional Azul Oscuro (1).pdf
 
La Inteligencia Artificial en la actualidad.docx
La Inteligencia Artificial en la actualidad.docxLa Inteligencia Artificial en la actualidad.docx
La Inteligencia Artificial en la actualidad.docx
 
UML_clase_02_UML_casos_de_uso_05 EN DIAGRAMA
UML_clase_02_UML_casos_de_uso_05 EN DIAGRAMAUML_clase_02_UML_casos_de_uso_05 EN DIAGRAMA
UML_clase_02_UML_casos_de_uso_05 EN DIAGRAMA
 
Presentación de Tic en educación y sobre blogger
Presentación de Tic en educación y sobre bloggerPresentación de Tic en educación y sobre blogger
Presentación de Tic en educación y sobre blogger
 
El uso de las TIC por Cecilia Pozos S..pptx
El uso de las TIC  por Cecilia Pozos S..pptxEl uso de las TIC  por Cecilia Pozos S..pptx
El uso de las TIC por Cecilia Pozos S..pptx
 
El uso de las TIC en la vida cotidiana.pptx
El uso de las TIC en la vida cotidiana.pptxEl uso de las TIC en la vida cotidiana.pptx
El uso de las TIC en la vida cotidiana.pptx
 
Catalogo General Rubi 2024 Amado Salvador Distribuidor Oficial Valencia
Catalogo General Rubi 2024 Amado Salvador Distribuidor Oficial ValenciaCatalogo General Rubi 2024 Amado Salvador Distribuidor Oficial Valencia
Catalogo General Rubi 2024 Amado Salvador Distribuidor Oficial Valencia
 
TIC en educacion.rtf.docxlolololololololo
TIC en educacion.rtf.docxlolololololololoTIC en educacion.rtf.docxlolololololololo
TIC en educacion.rtf.docxlolololololololo
 
INFORMATICA Y TECNOLOGIA
INFORMATICA Y TECNOLOGIAINFORMATICA Y TECNOLOGIA
INFORMATICA Y TECNOLOGIA
 
LA GLOBALIZACIÓN RELACIONADA CON EL USO DE HERRAMIENTAS.pptx
LA GLOBALIZACIÓN RELACIONADA CON EL USO DE HERRAMIENTAS.pptxLA GLOBALIZACIÓN RELACIONADA CON EL USO DE HERRAMIENTAS.pptx
LA GLOBALIZACIÓN RELACIONADA CON EL USO DE HERRAMIENTAS.pptx
 

Arquitecturas Dirigidas por la Experiencia

  • 1. Javier Vélez Reyes @javiervelezreye javier.velez.reyes@gmail.com Madrid 23-24 Septiembre 2019 UX Driven Architectures
  • 2. Hoy en día los productos digitales se construyen desde la Experiencia de Uso
  • 3. Experiencia de Uso Frecuentemente hablamos de Experiencia de Uso pero rara vez sabemos a qué nos estamos refiriendo
  • 4. El Recurso escaso de los próximos años no será la tecnología sino la atención Evolución Web Mark Weiser
  • 5. Cx Nómada Bx Seguidor Liderazgo Dx El cliente es un nómada que consume la Web de forma sistemática El negocio se encentra perdido en esta nueva era y deja guiarse por negocio Desarrollo entiende la tecnología y lidera el proceso de cambio El Nomadismo Web El mundo digital es una enorme superficie llena de recursos por consumir
  • 6. El Feudalismo Web Grandes bastiones se reparten el mundo digital y el cliente es un vasallo que rinde tributo El cliente es un mero vasallo qué tributa al negocio El negocio tiene un espacio de interacción abonado por el cliente El desarrollador define la metáfora interactiva que soporta el negocio Cx Bx Dx Anfitrión Vasallo Facilitador
  • 7. El Consumismo Web El cliente es un consumidos inteligente y los negocios compiten por un fragmento de su tiempo El cliente es un consumidor autónomo e independiente Desarrollo atiende las necesidades técnicas del cliente El Negocio es un proveedor al servicio del cliente Cx Bx Dx Proveedor Consumidor Soporte
  • 8. Los modelos de interacción dan forma a un diálogo físico y emocional con el producto a lo largo del tiempo UX & Interacción Jon Kolko
  • 9. Entorno Canal Medio UX & Interacción UX Google Twitter Dropbox Mozilla GitLab Slack Bx Dx Cx Trivago Tenedor Glovo La experiencia de uso de un producto guarda una estrecha relación con su modelo interactivo
  • 10. Interacción & Medio Una transición de lo individual, proactivo y transaccional a lo social, reactivo y dialógico Individual Proactivo Transaccional Social Reactivo Dialógico tiempo
  • 11. Interacción & Canal Una transición de lo centralizado cerrado y acotado a lo distribuido abierto e inmersivo Simple Estático Rígido Múltiple Dinámico Fluido Customer time
  • 12. Interacción & Entorno El cliente es un consumidos inteligente y los negocios compiten por un fragmento de su tiempo Centralizado Cerrado Acotado Distribuido Abierto Inmersivo
  • 13. Arquitecturas Dirigidas por Modelo El producto se concibe como una exposición de los datos que expone el modelo donde la experiencia de uso es fija Lo que pensó el Equipo Servicios Datos Back Config Front Modelo Platform
  • 14. Arquitecturas Dirigidas por Modelo El producto se concibe como una exposición de los datos que expone el modelo donde la experiencia de uso es fija Lo que pensó el Equipo Diseño Dirigido por Modelo El desarrollo del producto comienza por una conceptualización de las entidades del dominio Alineamiento Vista & Datos La vista se diseña para representar cada una de las entidades que conforman el modelo Experiencia Fija La construcción del producto parte de una idea prefijada e incambiable de la forma de uso
  • 15. Arquitecturas Dirigidas por UX El producto se desarrolla como un servicio en la nube explorado por componentes cambiantes Lo que demanda el Usuario Servicios Back Datos Config Front Modelo Platform
  • 16. Arquitecturas Dirigidas por UX El producto se desarrolla como un servicio en la nube explorado por componentes cambiantes Lo que demanda el Usuario Diseño Dirigido por Experiencia El desarrollo del producto por identificar las diferentes formas canónicas de interacción con los datos Diálogo Vista & Datos La vista establece un diálogo negociado con el modelo para alcanzar el objetivo del usuario Experiencia Adaptativa La vista se adapta de forma continua y fluida para atender la demanda de necesidades de la interacción
  • 17. Arquitectura Dirigidas por la Experiencia En los próximos años el desarrollo de Software se centrará en crear Arquitecturas dirigidas por la Experiencia
  • 18. Desarrollo Dirigido por UX Las arquitecturas dirigidas por la experiencia dan forma a un nuevo paradigma de desarrollo Sencillo Intuitivo Social Continuo Accesible Universal Abstracción Delegación Modularidad Extensión Genericidad Adaptación Composición Descubrimiento Transferencia Centralidad Arquitecturas Técnicas Patrones Objetivos Técnicas Principios
  • 19. Principio De Adaptación Los componentes serán capaces de adaptarse de forma dinámica para operar en nuevos contextos arquitectónicos de uso Cada contexto arquitectónico de uso es diferente y demanda diferentes formas de comunicación con el resto de componentes de la vecindad Aplicar estrategias de adaptación para fomentar la reutilización Evolución del Contexto de Uso Adaptación de los componentes
  • 20. Principio De Adaptación Los componentes serán capaces de adaptarse de forma dinámica para operar en nuevos contextos arquitectónicos de uso Ejecución Despliegue Hook B Adaptación por Sustitución Dirigida por la Arquitectura Holder Contractual Nivel Alto Adaptación por Transformación Dirigida por el Lenguaje Holder Semántico Nivel Medio Adaptación por Generación Dirigida por el Desarrollo Holder Sintáctico Nivel Bajo + Componente Hook A Hook C Extensiones
  • 21. render (ctx) { let template = this.getTemplate () let content = this.inject (ctx) let node = document.importNode (content, true) let shadow = this.attachShadow ({mode: 'open'}) shadow.appendChild (node) } Principio De Adaptación Los componentes serán capaces de adaptarse de forma dinámica para operar en nuevos contextos arquitectónicos de uso Adaptación por Generación Dirigida por el Desarrollo Holder Sintáctico Nivel Bajo + render (ctx) { let template = this.getTemplate () let content = this.inject (ctx) let node = document.importNode (content, true) let shadow = this.attachShadow ({mode: 'open'}) if (true) { shadow = this.attachShadow ({mode: 'closed'}) shadow.appendChild (node) } } function Before () { return ` if (${Environment==='Production'}) { shadow = this.attachShadow ({mode: 'closed'}) ` } Ext function Render (before, after) { return ` render (ctx) { let template = this.getTemplate () let content = this.inject (ctx) let node = document.importNode (content, true) let shadow = this.attachShadow ({mode: 'open'}) ${before} shadow.appendChild (node) ${after} } ` } Core function After () { return `}` } Ext
  • 22. Principio De Adaptación Los componentes serán capaces de adaptarse de forma dinámica para operar en nuevos contextos arquitectónicos de uso Adaptación por Transformación Dirigida por el Lenguaje Holder Semántico Nivel Medio [Symbol.Iterable] Core let Ext = { map (fn) { let ys = [] for (let x in this) ys.push (fn (y)) return ys } reduce (fn, b) { let y = b for (let x in this) y = fn (x, b) return y } } Adición Core.map = Ext.map.bind (Core) Core.reduce = Ext.reduce.bind (Core) Ext Ext Object.setPrototypeOf (Core, Ext) Extensión views = [] idx = 0 get (idx) has (view) add (view) remove (view) previous () next () let Ext = function (before, after) { let fn = this.previous let gn = this.next previous () { before (); fn (); after () } after () { before (); gn (); after () } } Intercesión Core.previous = Ext.previous.bind (Core) Core.next = Ext.next.bind (Core) Ext
  • 23. Principio De Adaptación Los componentes serán capaces de adaptarse de forma dinámica para operar en nuevos contextos arquitectónicos de uso Adaptación por Sustitución Dirigida por la Arquitectura Holder Contractual Nivel Alto Core get visitor () set visitor (v) render (ctx) { this.visitor.before (ctx) ... this.visitor.after (ctx) } let Ext = { before (ctx) { ... } after (ctx) { ... } } Ext Delegación Core render (ctx) { this.before (ctx) ... this.after (ctx) } Extensión Ext A Ext B before () after () before () after () Provider get ()
  • 24. Principio De Descubrimiento Los componentes deberán poder operar de forma autónoma con independencia del contexto donde se ubiquen Cada componente explora la geografía del documento anfitrión para descubrir otros componentes con los que operar Los componentes operan de acuerdo a la metáfora de mundo abierto Descubrir Operar
  • 25. Principio De Descubrimiento Los componentes deberán poder operar de forma autónoma con independencia del contexto donde se ubiquen Exploración Selección Identidad Tipo Categoría Marcado Role Estrategias de Exploración Las estrategias de exploración permiten descubrir componentes candidatos Estrategias de Selección Las Estrategias de selección discuten criterios para la selección de componentes Global Local Shadow Inner Actividades de Localización
  • 26. Principio De Descubrimiento Los componentes deberán poder operar de forma autónoma con independencia del contexto donde se ubiquen Exploración por Caída Exploración por Escalada Exploración por Inundación function search (ref) { return [...this.querySelectorAll (ref)] .filter (this.match) } function search (ref) { return !function get (self) { return self && this.match (self) ? self : get (core.parentNode, ref) } (this) } function search (ref) { return !function get (self) { let xs = [...self.querySelectorAll (ref)] let ys = xs.filter (this.match) return ys.length ? ys : get (self.parentNode) } (this) } Estrategias de Exploración Las estrategias de exploración permiten descubrir componentes candidatos
  • 27. Principio De Descubrimiento Los componentes deberán poder operar de forma autónoma con independencia del contexto donde se ubiquen Estrategias de Selección Las Estrategias de selección discuten criterios para la selección de componentes function match (core) { return this === c } function match (core) { return core.hasAttribute ('left') } Selección por Identidad == Selección por Marcado <wc-x> <wc-y left> ... </wc-y> <wc-y right> ... </wc-y> </wc-x> function match (core) { let found = true for (let k in Playable) found == found && k in core return found } const Playable = ['play', 'pause'] Selección por Role Playable + play + pause
  • 28. Principio De Composición Los componentes podrán ser combinados de forma compositiva de acuerdo al conjunto de restricciones de la arquitectura subyacente Diferentes componentes ofrecen un modelo visual e interactivo característico para conformar una experiencia cohesionada Construcción por Composición Diversas estrategias de composición ayudan a confeccionar unas experiencia sin fisuras
  • 29. Principio De Composición Los componentes podrán ser combinados de forma compositiva de acuerdo al conjunto de restricciones de la arquitectura subyacente Contrato público Contrato público Contrato de Composición dependencias servicios Espacios de Composición El contrato de un componente expone 4 espacios sintácticos de composición Tipos de Composición En función de las dependencias entre partes se distinguen 4 tipos de composición Estrategias de Composición Es posible aplicar distintos tipos de estrategias para cubrir los objetivos de la composición
  • 30. Declarative Nesting Reference Sibling Binding Parent Principio De Composición Los componentes podrán ser combinados de forma compositiva de acuerdo al conjunto de restricciones de la arquitectura subyacente Espacios de Composición El contrato de un componente expone 4 espacios sintácticos de composición LCycle Event Data Reflection Interpolation Reactive Functional Delegation Inheritance HOrder PEvaluation Closures Visual Properties Mixins Inline Cascade Playable let playables = [ , , ] for (let player of playables) { player.play () } <wc-x> <wc-y left> ... </wc-y> <wc-y right> ... </wc-y> </wc-x> <wc-x ref='#y'> ... </wc-x> <wc-y id='y' > ... </wc-y> <wc-x> ... </wc-x> <wc-y> ... </wc-y> A.addEventListener (type, function (e) { B.do (e) })
  • 31. Dependiente Independiente Independiente Dependiente Principio De Composición Los componentes podrán ser combinados de forma compositiva de acuerdo al conjunto de restricciones de la arquitectura subyacente Tipos de Composición En función de las dependencias entre partes se distinguen 4 tipos de composición Composición Autónoma Composición Subordinante Composición Subordinada Composición Cooperativa Core.toString = function () { return ... } Core.getId = function () { return Ext.id } Core.map = function (fn) { let ys =[] for (k in this) { let y = fn (Core[k]) ys.push (y) } return ys } Core.next = function () { let fn = Ext.next for (k in this) { let y = fn (Core[k]) ys.push (y) } }
  • 32. Principio De Composición Los componentes podrán ser combinados de forma compositiva de acuerdo al conjunto de restricciones de la arquitectura subyacente Estrategias de Composición Es posible aplicar distintos tipos de estrategias para cubrir los objetivos de la composición B.addEventListener (e, ...) B.fn (...) <wc-bind> <wc-rule from='B' to='C' when='e1' /> <wc-rule from='C' to='B' when='e2' /> </wc-bind> Composición Vertical e fn B A Composición Horizontal A B C
  • 33. Principio De Continuidad Los componentes serán capaces de ofrecen una experiencia de continuidad en el uso del producto Cada componente representa un modelo de interacción abstracto y reutilizable Paso 1 Paso 3 Paso 2 tiempo Interacción por micro-flujos UX Micro-flujos de UX que de despliegan en el espacio y el tiempo
  • 34. Principio De Continuidad Los componentes serán capaces de ofrecen una experiencia de continuidad en el uso del producto Continuidad Espacial Continuidad Temporal Espacio de Continuidad Continuidad Temporal La continuidad temporal determina cómo se gestiona la experiencia a lo largo del tiempo Continuidad Espacial La continuidad espacial determina cómo se distribuye la experiencia a lo largo de los canales y medios
  • 35. Principio De Continuidad Los componentes serán capaces de ofrecen una experiencia de continuidad en el uso del producto Continuidad Temporal La continuidad temporal determina cómo se gestiona la experiencia a lo largo del tiempo Bus.rule .When (e1) .When (e2) .do ( Skip (3), Sleep (300), fn ) Coordinación por Coreografía Espacio de Coordinación Coordinación por Orquestación Espacio de Coordinación let xs = [ , , ] let ys = xs.map (asSequenceable) let idx = 0 while (true) { ys[idx].next () idx = (idx + 1) % ys.length }
  • 36. Principio De Continuidad Los componentes serán capaces de ofrecen una experiencia de continuidad en el uso del producto Continuidad Espacial La continuidad espacial determina cómo se distribuye la experiencia a lo largo de los canales y medios Playable Abstracción #1 Abstracción #0 Selección Árboles Secuencias Conjuntos Flujos Desktop Mobile Weareable Smart TV Abstracción de Datos Abstracción del Medio
  • 37. Principio De Transferencia Los componentes serán capaces de transferirse de un locus de ejecución a otro de forma fluida y transparente Usuario tiempo Experiencia Líquida sin Fisuras A lo largo del tiempo los componentes se transfieren a diferentes contextos de ejecución Los procesos de transferencia suelen responden a acciones del usuario
  • 38. Principio De Transferencia Los componentes serán capaces de transferirse de un locus de ejecución a otro de forma fluida y transparente Estrategias en Cliente La transferencia del lado cliente discute cómo debe articularse la transferencia con componentes Estrategias en Servidor La transferencia del lado servidor como puede utilizarse el servidor como elemento de respaldo Cliente Servidor Espacio de Transferencia Cliente
  • 39. Principio De Transferencia Los componentes serán capaces de transferirse de un locus de ejecución a otro de forma fluida y transparente Estrategias en Cliente La transferencia del lado cliente discute cómo debe articularse la transferencia con componentes Weareable Mobile Proxy Proxy Send to Mobile Bus .rule (R1) .rule (R2) .rule (R3) Bus .rule (R4) .rule (R5)
  • 40. Principio De Transferencia Los componentes serán capaces de transferirse de un locus de ejecución a otro de forma fluida y transparente Estrategias en Servidor La transferencia del lado servidor como puede utilizarse el servidor como elemento de respaldo Send to Mobile Bus .rule (S1) .rule (S2) .rule (S3) Bus .rule (S4) .rule (S5)
  • 41. Principio De Intencionalidad Los componentes articularán un diálogo reactiva con otros componentes de sistema para desplegar una experiencia intencional Se establece un diálogo transparente entre los Componentes de entorno para desplegar una experiencia intencional Los componentes responsables de soportar cada acción no son fijos Intención A Espacio Intencional
  • 42. Principio De Intencionalidad Los componentes articularán un diálogo reactiva con otros componentes de sistema para desplegar una experiencia intencional Nivel de Actividad Nivel de Servicio Modelo Intencional Nivel de Servicio El sistema proporciona una serie de componentes que soportan el desarrollo de actividades Nivel de Actividad Una experiencia interactiva se define a este nivel como un flujo de actividades en el tiempo
  • 43. Principio De Intencionalidad Los componentes articularán un diálogo reactiva con otros componentes de sistema para desplegar una experiencia intencional Nivel de Actividad Una experiencia interactiva se define a este nivel como un flujo de actividades en el tiempo Intención B Intención A Actividad 1 Acción Y Acción X let IA = Intents.get ('commons.a') Bus .when (ActionX) .do (IA) let IB = Intents.get ('commons.b') Bus .when (ActionY) .do (IB)
  • 44. Principio De Intencionalidad Los componentes articularán un diálogo reactiva con otros componentes de sistema para desplegar una experiencia intencional Nivel de Servicio El sistema proporciona una serie de componentes que soportan el desarrollo de actividades Intents let wx = ... Intents .component (wx) .intent ('commons.p') .intent ('commons.q') .intent ('commons.r')
  • 45. Principio De Centralidad Los componentes se publicarán en una cloud para que sean consumidos bajo demanda y en tiempo de ejecución por el código fuente install Plataforma Cloud Plataforma Browser Las Experiencias de uso se confeccionan como un proceso de composición bajo demanda Los servidores en Cloud son capaces de contextualizar la entrega
  • 46. Principio De Centralidad Los componentes se publicarán en una cloud para que sean consumidos bajo demanda y en tiempo de ejecución por el código fuente Modelo de Empaquetamiento Los componentes se agrupan por paquetes por criterios de cohesión Modelo de Despliegue Para utilizar un paquete sobre una plataforma se ejecuta un proceso de instalación install Modelo de Importación Las referencias de importación se resuelven de forma contextual antes de su entrega Dominio Componentes import install Paquetes Cloud Browser
  • 47. Principio De Centralidad Los componentes se publicarán en una cloud para que sean consumidos bajo demanda y en tiempo de ejecución por el código fuente Modelo de Empaquetamiento Los componentes se agrupan por paquetes por criterios de cohesión package.json provider.js Servicios dependencias Metadatos Instalación 'id' : 'core.chameleon', 'export' : { 'aspect' : 'inspect.js' , 'component' : 'decorators/component.js' , 'extends' : 'decorators/extends.js' , 'extension' : 'decorators/extension.js' , } 'import' : [ 'core.commons.helper' , 'core.commons.builder' , 'core.commons.decorators' ] 'provider' : 'provider.js' 'id' : 'core.chameleon', 'export' : { 'inspect' : 'inspect.js' , 'component' : 'decorators/component.js' , 'extends' : 'decorators/extends.js' , 'extension' : 'decorators/extension.js' , } 'import' : [ 'core.commons.helper' , 'core.commons.builder' , 'core.commons.decorators' ]
  • 48. Principio De Centralidad Los componentes se publicarán en una cloud para que sean consumidos bajo demanda y en tiempo de ejecución por el código fuente Modelo de Despliegue Para utilizar un paquete sobre una plataforma se ejecuta un proceso de instalación install Plataforma install core.chameleon.inspect : http://server/chameleon/core/inspect.js core.chameleon.component : http://server/chameleon/decorators/component.js core.chameleon.extends : http://server/chameleon/decorators/extends.js core.chameleon.extension : http://server/chameleon/decorators/extension.js core.component.chameleon Registro
  • 49. Principio De Centralidad Los componentes se publicarán en una cloud para que sean consumidos bajo demanda y en tiempo de ejecución por el código fuente Modelo de Importación Las referencias de importación se resuelven de forma contextual antes de su entrega Plataforma Registro import { Artifact } from 'Reference' core.chameleon.inspect : http://server/chameleon/core/inspect.js core.chameleon.component : http://server/chameleon/decorators/component.js core.chameleon.extends : http://server/chameleon/decorators/extends.js core.chameleon.extension : http://server/chameleon/decorators/extension.js import Referencia Simbólica Abstracta Específica commons.logger Core.chameleon.inspect ./lib/loader.js ../helper/builder.js Referencia Física Absoluta Relativa /lib/loader.js Local Global http://server/loader.js
  • 50. Metodología Dirigida por la Experiencia La forma en la que se desarrollan arquitecturas dirigidas por la experiencia también se altera
  • 51. Errores Wally A veces existen error ocultos que hacen que todo funcione pero invalidan una solución Servicios Back Datos Config Front Modelo Platform Dónde está Wally
  • 52. Desarrollo Dirigido por Modelo Las arquitecturas dirigidas por el modelo siguen el ciclo clásico de desarrollo de productos La Idea Researching Rutinas Preferencias Necesidades Acciones Intereses Intenciones El Diseño Estructura & Interacción Estilo & Respuesta La Ejecución Interacción & Feedback Asumir una ideación preconcebida de la experiencia Crear un diseño fijo y estático desde la concepción equivocada Construir componentes específicos de proyecto con acoplamiento a datos No cubrir las expectativas del cliente ni poder repivotar desde el front Store View Action Reducer App La Construcción
  • 53. Desarrollo Dirigido por UX En las arquitecturas dirigidas por la experiencia el método de desarrollo se ve alterado Entender que cada usuario tiene un ruta experiencial propia La Idea Path A Path B Path C El Diseño Path A Path B Path C Implementar variantes para cada ruta UX que se pueda desplegar La Construcción Composición Adaptación La construcción es una actividad de composición y adaptación en tiempo de ejecución La Ejecución El producto se adapta según la demanda experiencial de cada usuario
  • 54. Javier Vélez Reyes @javiervelezreye javier.velez.reyes@gmail.com Madrid 23-24 Septiembre 2019 UX Driven Architectures