SlideShare una empresa de Scribd logo
DISEÑO WEB SITIO WEB REALIZACIÓN USABILIDAD/INTERACCIÓN/CONTENIDOS INTERFACE     ELEMENTOS DE LA INTERFACE TECNOLOGÍAS VISIÓN CRÍTICA
¿ QUÉ ES UNA INTERFACE ? CONJUNTO  _ ELEMENTOS _ACCIONES _SITIO WEB EFECTO_ USUARIO _ PROPÓSITO 4 POSTULADOS INICIO
4 POSTULADOS 1.  PROPÓSITO DEL SITIO 2. AYUDAR A LOS USUARIOS A ENCONTRAR LO QUE NECESITAN 3. DEMOSTRAR EL CONTENIDO DEL SITIO 4. USAR DISEÑO VISUAL PARA MEJORAR Y NO PARA DEFINIR LA INTERACCIÓN DEL SITIO WEB INICIO INTERFACE
ELEMENTOS DE LA INTERFAZ CARÁCTER GENERAL SISTEMA DE INFORMACIÓN Y COMUNICACIÓN IDENTIFICACIÓN_ NAVEGACIÓN_ CONTENIDOS_ ACCIÓN EXISTENCIA/IMPORTANCIA/UBICACIÓN INVESTIGACIONES INICIO USO DE LOGOTIPOS SISTEMA DE NAVEGACIÓN ÁREA DE CONTENIDOS ÁREAS DE INTERACCIÓN EXPERIENCIA DE USUARIO ELEMENTOS INTERACTIVOS
USO DE LOGOTIPOS ÍCONO DEL GOBIERNO 1 VISTAZO ETIQUETA LOGO+TÍTULO INICIO ELEMENTOS DE LA INTERFAZ
SISTEMA DE NAVEGACIÓN PÉRDIDO MENÚ DE SECCIONES MENÚ DE RASTROS IDENTIFICACIÓN DE SECCIONES BOTONES DE ACCIÓN PIE DE PÁGINA INICIO ELEMENTOS DE LA INTERFAZ
ÁREA DE CONTENIDOS INFO TÍTULO/RESUMEN/INFORMACIÓN INICIO ELEMENTOS DE LA INTERFAZ
AREAS DE INTERACCIÓN INGRESAR INFORMACIÓN DESARROLLAR LA ACTIVIDAD MÍNIMA INFORMACIÓN INICIO ELEMENTOS DE LA INTERFAZ
EXPERIENCIA DE USUARIO EYETRACKING  RELACIÓN USUARIOS - PERCEPCIONES  INICIO ELEMENTOS DE LA INTERFAZ
ELEMENTOS INTERACTIVOS ENLACES BOTONES FORMULARIOS INICIO ELEMENTOS DE LA INTERFAZ
BOTONES ACCIONES  FORMA ESTÁNDAR SIMPLE Y CLARO PALABRA CLAVE BOTÓN ACTIVO INICIO ELEMENTOS INTERACTIVOS
ENLACES ESTÁNDAR: SUBRAYADO, COLOR AZUL. DIFERENTE AL TEXTO (COLOR / SUBRAYADO) DIFERENCIAR ESTADOS:  ENLACE SIN VISITAR  ENLACE DESTACADO ENLACE ACTIVO ENLACE VISITADO CONTENIDO EXPLICATIVO EN HTML  INICIO ELEMENTOS INTERACTIVOS
“ TEXT AREA” ->  USUARIO INGRESA INFORMACIÓN “ RADIO BUTTON” -> USUARIO MARCA OPCIÓN ADECUADA  “ CHECK BUTTON” ->  USUARIO MARCA OPCIONES ELEGIDAS FORMULARIOS INICIO ELEMENTOS INTERACTIVOS
TECNOLOGÍAS FLASH AJAX INICIO
FLASH ->  Usar equivalentes de texto para elementos gráficos MEJOR GRÁFICA -> SONIDO / IMAGEN/ VIDEO ->  Habilitar la accesibilidad para objetos ->  Usar equivalentes de texto para elementos gráficos OFRECE ALTERNATIVAS NO GRÁFICAS PARA SUS PANTALLAS GRÁFICAS ->  Entregar controles del teclado ->  Asegura contraste de colores  TECNOLOGÍAS INICIO
AJAX Lenguaje Javascript XHTML + CSS + XMLHTTPR + XML Etiquetas en minúscula, cerradas y sin elementos vacíos. Atributos en comillas  TECNOLOGÍAS INICIO
VISIÓN CRÍTICA ESTANDARIZACIÓN DE PÁGINAS POCA CAPACIDAD DE INNOVACIÓN FALTA DE ATRACTIVO SALIR INICIO

Más contenido relacionado

Destacado

Tabela
TabelaTabela
Tabelarbento
 
Biblioteca popular chacras de coria
Biblioteca popular chacras de coriaBiblioteca popular chacras de coria
Biblioteca popular chacras de coriaAdriana Conte
 
APIMEC - Resultados 3T08
APIMEC - Resultados 3T08APIMEC - Resultados 3T08
APIMEC - Resultados 3T08CPFL RI
 
Fotografia - trabalho de grupo
Fotografia - trabalho de grupoFotografia - trabalho de grupo
Fotografia - trabalho de grupojohnny15
 
Renovação do parque de computadores das bibliotecas 2012 - 20120305-14h33 (1)
Renovação do parque de computadores das bibliotecas   2012 - 20120305-14h33 (1)Renovação do parque de computadores das bibliotecas   2012 - 20120305-14h33 (1)
Renovação do parque de computadores das bibliotecas 2012 - 20120305-14h33 (1)
Serviço de Biblioteca EESC/USP
 
If this is art
If this is artIf this is art
If this is artjohnny15
 
Atividade da Roberta
Atividade da RobertaAtividade da Roberta
Atividade da Roberta
Elisângela Ribas
 
Comentários do Valdir e Luiz
Comentários do Valdir e LuizComentários do Valdir e Luiz
Comentários do Valdir e Luiz
edmorte
 
Introducao ao Ruby On Rails
Introducao ao Ruby On RailsIntroducao ao Ruby On Rails
Introducao ao Ruby On Rails
Andre Ferraro
 
3 Defesa Profissional XV Congresso Mineiro Cesario
3 Defesa Profissional XV Congresso Mineiro Cesario3 Defesa Profissional XV Congresso Mineiro Cesario
3 Defesa Profissional XV Congresso Mineiro Cesario
Urovideo.org
 
Tabla con formulas y graficas 10.1
Tabla con formulas y graficas 10.1Tabla con formulas y graficas 10.1
Tabla con formulas y graficas 10.1berruguita4
 
Manual máquina digital Nikkon S2500 br(pb)01 manaus
Manual máquina digital Nikkon S2500 br(pb)01 manausManual máquina digital Nikkon S2500 br(pb)01 manaus
Manual máquina digital Nikkon S2500 br(pb)01 manausLEONARDO TRANCOSO
 
Historia de la
Historia de laHistoria de la
Historia de lajonatan45
 
Projeto LabSurLab no Festival CulturaDigital.Br- 3 edição (edit)
Projeto LabSurLab no Festival CulturaDigital.Br- 3 edição (edit)Projeto LabSurLab no Festival CulturaDigital.Br- 3 edição (edit)
Projeto LabSurLab no Festival CulturaDigital.Br- 3 edição (edit)
Gabriela Agustini
 
Tu Anuncio en sus Manos (OME 2012) Viyoi.tv (Crazy4Media)
Tu Anuncio en sus Manos (OME 2012) Viyoi.tv (Crazy4Media)Tu Anuncio en sus Manos (OME 2012) Viyoi.tv (Crazy4Media)
Tu Anuncio en sus Manos (OME 2012) Viyoi.tv (Crazy4Media)
Javier Correro
 
Formar tutores: (para) que competências?
Formar tutores: (para) que competências?Formar tutores: (para) que competências?
Formar tutores: (para) que competências?
lurdesmartins
 
Economia cl1
Economia cl1Economia cl1
Economia cl1
dayaquiroga
 

Destacado (20)

Tabela
TabelaTabela
Tabela
 
Biblioteca popular chacras de coria
Biblioteca popular chacras de coriaBiblioteca popular chacras de coria
Biblioteca popular chacras de coria
 
APIMEC - Resultados 3T08
APIMEC - Resultados 3T08APIMEC - Resultados 3T08
APIMEC - Resultados 3T08
 
Artigo Cientifico
Artigo CientificoArtigo Cientifico
Artigo Cientifico
 
Fotografia - trabalho de grupo
Fotografia - trabalho de grupoFotografia - trabalho de grupo
Fotografia - trabalho de grupo
 
Renovação do parque de computadores das bibliotecas 2012 - 20120305-14h33 (1)
Renovação do parque de computadores das bibliotecas   2012 - 20120305-14h33 (1)Renovação do parque de computadores das bibliotecas   2012 - 20120305-14h33 (1)
Renovação do parque de computadores das bibliotecas 2012 - 20120305-14h33 (1)
 
If this is art
If this is artIf this is art
If this is art
 
Atividade da Roberta
Atividade da RobertaAtividade da Roberta
Atividade da Roberta
 
Comentários do Valdir e Luiz
Comentários do Valdir e LuizComentários do Valdir e Luiz
Comentários do Valdir e Luiz
 
Introducao ao Ruby On Rails
Introducao ao Ruby On RailsIntroducao ao Ruby On Rails
Introducao ao Ruby On Rails
 
3 Defesa Profissional XV Congresso Mineiro Cesario
3 Defesa Profissional XV Congresso Mineiro Cesario3 Defesa Profissional XV Congresso Mineiro Cesario
3 Defesa Profissional XV Congresso Mineiro Cesario
 
Tabla con formulas y graficas 10.1
Tabla con formulas y graficas 10.1Tabla con formulas y graficas 10.1
Tabla con formulas y graficas 10.1
 
Manual máquina digital Nikkon S2500 br(pb)01 manaus
Manual máquina digital Nikkon S2500 br(pb)01 manausManual máquina digital Nikkon S2500 br(pb)01 manaus
Manual máquina digital Nikkon S2500 br(pb)01 manaus
 
Historia de la
Historia de laHistoria de la
Historia de la
 
Aula e-commerce
Aula e-commerceAula e-commerce
Aula e-commerce
 
Projeto LabSurLab no Festival CulturaDigital.Br- 3 edição (edit)
Projeto LabSurLab no Festival CulturaDigital.Br- 3 edição (edit)Projeto LabSurLab no Festival CulturaDigital.Br- 3 edição (edit)
Projeto LabSurLab no Festival CulturaDigital.Br- 3 edição (edit)
 
Tu Anuncio en sus Manos (OME 2012) Viyoi.tv (Crazy4Media)
Tu Anuncio en sus Manos (OME 2012) Viyoi.tv (Crazy4Media)Tu Anuncio en sus Manos (OME 2012) Viyoi.tv (Crazy4Media)
Tu Anuncio en sus Manos (OME 2012) Viyoi.tv (Crazy4Media)
 
Formar tutores: (para) que competências?
Formar tutores: (para) que competências?Formar tutores: (para) que competências?
Formar tutores: (para) que competências?
 
Tarea 07
Tarea 07Tarea 07
Tarea 07
 
Economia cl1
Economia cl1Economia cl1
Economia cl1
 

Similar a Presentacion

DISEÑO DE INTERFACES.pdf
DISEÑO DE INTERFACES.pdfDISEÑO DE INTERFACES.pdf
DISEÑO DE INTERFACES.pdf
LauLopez16
 
Accesibilidad Web 101 - WWC Santiago
Accesibilidad Web 101 - WWC SantiagoAccesibilidad Web 101 - WWC Santiago
Accesibilidad Web 101 - WWC Santiago
Leonardo Graterol
 
Formulario web movil
Formulario web movilFormulario web movil
Formulario web movil
Diego_Rolando123
 
Internet
InternetInternet
Internet
Vivi Gancino
 
DIAPOSITIVAS POWER POINT
DIAPOSITIVAS POWER POINTDIAPOSITIVAS POWER POINT
DIAPOSITIVAS POWER POINT
Geralpiratecaribean
 
Diseño de sistemas
Diseño de sistemasDiseño de sistemas
Diseño de sistemasunefa
 
Valery....
Valery....Valery....
Valery....
valery1616
 
Valery....
Valery....Valery....
Valery....
valery1616
 
Valery....
Valery....Valery....
Valery....
valery1616
 
Ntics
NticsNtics
Ntics
PATODERBY
 
Clase ii diplomado
Clase ii diplomadoClase ii diplomado
Clase ii diplomadodiplomados2
 
Diseño de sistemas
Diseño de sistemasDiseño de sistemas
Diseño de sistemasunefa
 
Recomendaciones Para Comunicadores
Recomendaciones Para ComunicadoresRecomendaciones Para Comunicadores
Recomendaciones Para Comunicadoresguest68e212
 
Unidad 5 :Diseño del dialogo en línea
Unidad 5 :Diseño del dialogo en líneaUnidad 5 :Diseño del dialogo en línea
Unidad 5 :Diseño del dialogo en línea
samifu
 
Curs 2.8. Utilización Automatizada de Datos Publicos (1)
Curs 2.8. Utilización Automatizada de Datos Publicos (1)Curs 2.8. Utilización Automatizada de Datos Publicos (1)
Curs 2.8. Utilización Automatizada de Datos Publicos (1)
Iniciativa Barcelona Open Data
 
Valery....
Valery....Valery....
Valery....
valery1616
 
Estilos y Paradigmas de Interacción
Estilos y Paradigmas de InteracciónEstilos y Paradigmas de Interacción
Estilos y Paradigmas de Interacción
Juan Manuel Gonzalez Calleros
 

Similar a Presentacion (20)

DISEÑO DE INTERFACES.pdf
DISEÑO DE INTERFACES.pdfDISEÑO DE INTERFACES.pdf
DISEÑO DE INTERFACES.pdf
 
Accesibilidad Web 101 - WWC Santiago
Accesibilidad Web 101 - WWC SantiagoAccesibilidad Web 101 - WWC Santiago
Accesibilidad Web 101 - WWC Santiago
 
Formulario web movil
Formulario web movilFormulario web movil
Formulario web movil
 
Internet
InternetInternet
Internet
 
DIAPOSITIVAS POWER POINT
DIAPOSITIVAS POWER POINTDIAPOSITIVAS POWER POINT
DIAPOSITIVAS POWER POINT
 
Diseño de interfaz
Diseño de interfazDiseño de interfaz
Diseño de interfaz
 
Diseño de Interfaz
Diseño de InterfazDiseño de Interfaz
Diseño de Interfaz
 
Diseño de sistemas
Diseño de sistemasDiseño de sistemas
Diseño de sistemas
 
Valery....
Valery....Valery....
Valery....
 
Valery....
Valery....Valery....
Valery....
 
Valery....
Valery....Valery....
Valery....
 
Ntics
NticsNtics
Ntics
 
Clase ii diplomado
Clase ii diplomadoClase ii diplomado
Clase ii diplomado
 
Html5
Html5Html5
Html5
 
Diseño de sistemas
Diseño de sistemasDiseño de sistemas
Diseño de sistemas
 
Recomendaciones Para Comunicadores
Recomendaciones Para ComunicadoresRecomendaciones Para Comunicadores
Recomendaciones Para Comunicadores
 
Unidad 5 :Diseño del dialogo en línea
Unidad 5 :Diseño del dialogo en líneaUnidad 5 :Diseño del dialogo en línea
Unidad 5 :Diseño del dialogo en línea
 
Curs 2.8. Utilización Automatizada de Datos Publicos (1)
Curs 2.8. Utilización Automatizada de Datos Publicos (1)Curs 2.8. Utilización Automatizada de Datos Publicos (1)
Curs 2.8. Utilización Automatizada de Datos Publicos (1)
 
Valery....
Valery....Valery....
Valery....
 
Estilos y Paradigmas de Interacción
Estilos y Paradigmas de InteracciónEstilos y Paradigmas de Interacción
Estilos y Paradigmas de Interacción
 

Presentacion

  • 1. DISEÑO WEB SITIO WEB REALIZACIÓN USABILIDAD/INTERACCIÓN/CONTENIDOS INTERFACE ELEMENTOS DE LA INTERFACE TECNOLOGÍAS VISIÓN CRÍTICA
  • 2. ¿ QUÉ ES UNA INTERFACE ? CONJUNTO _ ELEMENTOS _ACCIONES _SITIO WEB EFECTO_ USUARIO _ PROPÓSITO 4 POSTULADOS INICIO
  • 3. 4 POSTULADOS 1. PROPÓSITO DEL SITIO 2. AYUDAR A LOS USUARIOS A ENCONTRAR LO QUE NECESITAN 3. DEMOSTRAR EL CONTENIDO DEL SITIO 4. USAR DISEÑO VISUAL PARA MEJORAR Y NO PARA DEFINIR LA INTERACCIÓN DEL SITIO WEB INICIO INTERFACE
  • 4. ELEMENTOS DE LA INTERFAZ CARÁCTER GENERAL SISTEMA DE INFORMACIÓN Y COMUNICACIÓN IDENTIFICACIÓN_ NAVEGACIÓN_ CONTENIDOS_ ACCIÓN EXISTENCIA/IMPORTANCIA/UBICACIÓN INVESTIGACIONES INICIO USO DE LOGOTIPOS SISTEMA DE NAVEGACIÓN ÁREA DE CONTENIDOS ÁREAS DE INTERACCIÓN EXPERIENCIA DE USUARIO ELEMENTOS INTERACTIVOS
  • 5. USO DE LOGOTIPOS ÍCONO DEL GOBIERNO 1 VISTAZO ETIQUETA LOGO+TÍTULO INICIO ELEMENTOS DE LA INTERFAZ
  • 6. SISTEMA DE NAVEGACIÓN PÉRDIDO MENÚ DE SECCIONES MENÚ DE RASTROS IDENTIFICACIÓN DE SECCIONES BOTONES DE ACCIÓN PIE DE PÁGINA INICIO ELEMENTOS DE LA INTERFAZ
  • 7. ÁREA DE CONTENIDOS INFO TÍTULO/RESUMEN/INFORMACIÓN INICIO ELEMENTOS DE LA INTERFAZ
  • 8. AREAS DE INTERACCIÓN INGRESAR INFORMACIÓN DESARROLLAR LA ACTIVIDAD MÍNIMA INFORMACIÓN INICIO ELEMENTOS DE LA INTERFAZ
  • 9. EXPERIENCIA DE USUARIO EYETRACKING RELACIÓN USUARIOS - PERCEPCIONES INICIO ELEMENTOS DE LA INTERFAZ
  • 10. ELEMENTOS INTERACTIVOS ENLACES BOTONES FORMULARIOS INICIO ELEMENTOS DE LA INTERFAZ
  • 11. BOTONES ACCIONES FORMA ESTÁNDAR SIMPLE Y CLARO PALABRA CLAVE BOTÓN ACTIVO INICIO ELEMENTOS INTERACTIVOS
  • 12. ENLACES ESTÁNDAR: SUBRAYADO, COLOR AZUL. DIFERENTE AL TEXTO (COLOR / SUBRAYADO) DIFERENCIAR ESTADOS: ENLACE SIN VISITAR ENLACE DESTACADO ENLACE ACTIVO ENLACE VISITADO CONTENIDO EXPLICATIVO EN HTML INICIO ELEMENTOS INTERACTIVOS
  • 13. “ TEXT AREA” -> USUARIO INGRESA INFORMACIÓN “ RADIO BUTTON” -> USUARIO MARCA OPCIÓN ADECUADA “ CHECK BUTTON” -> USUARIO MARCA OPCIONES ELEGIDAS FORMULARIOS INICIO ELEMENTOS INTERACTIVOS
  • 15. FLASH -> Usar equivalentes de texto para elementos gráficos MEJOR GRÁFICA -> SONIDO / IMAGEN/ VIDEO -> Habilitar la accesibilidad para objetos -> Usar equivalentes de texto para elementos gráficos OFRECE ALTERNATIVAS NO GRÁFICAS PARA SUS PANTALLAS GRÁFICAS -> Entregar controles del teclado -> Asegura contraste de colores TECNOLOGÍAS INICIO
  • 16. AJAX Lenguaje Javascript XHTML + CSS + XMLHTTPR + XML Etiquetas en minúscula, cerradas y sin elementos vacíos. Atributos en comillas TECNOLOGÍAS INICIO
  • 17. VISIÓN CRÍTICA ESTANDARIZACIÓN DE PÁGINAS POCA CAPACIDAD DE INNOVACIÓN FALTA DE ATRACTIVO SALIR INICIO