SlideShare uma empresa Scribd logo
Curso: Introdução ao Web Design E-mail: contato@gust4vo.com
Aula 2:
IHC/UX Design
prof. Gustavo Zimmermann
WEB
STANDARDS
os padrões web
Introdução a Web Design – Aula 2: IHC/UX Design
Web Standards
O que são?
Os Padrões Web são recomendações do W3C (World Wide Web
Consortium), as quais são destinadas a orientar os
desenvolvedores para o uso de boas práticas que tornam a web
acessível para todos. Através desses padrões, o W3C tem como
objetivo criar uma plataforma aberta da Web, para o
desenvolvimento de aplicações que possuam um potencial sem
precedentes, permitindo assim que os desenvolvedores criem
experiências ricas, alimentadas por um vasto armazenamento de
dados, os quais estão disponíveis para qualquer dispositivo.
Introdução a Web Design – Aula 2: IHC/UX Design
Web Standards
W3C
W3C, liderada pelo inventor da Web Tim Berners-Lee e o CEO Jeffrey Jaffe, é
uma comunidade internacional onde os membros organizacionais, uma
equipe em tempo integral e o público (desenvolvedores, por exemplo),
trabalham juntos para desenvolver os padrões para a criação e a
interpretação dos conteúdos para a Web.
Tim Berners-Lee Jeffrey Jaffe
Introdução a Web Design – Aula 2: IHC/UX Design
Web Standards
Divisões do HTML 5
Semântico Offline & Armazenamento Acesso ao Dispositivo Conectividade
Multimídia 3D, Gráficos e Efeitos Desempenho e Integração CSS3
Introdução a Web Design – Aula 2: IHC/UX Design
Web Standards
Grupos de Padrões Web
(1/7) Web Design e Aplicações
Padrões para o desenvolvimento de páginas Web,
incluindo HTML & CSS, Script e Ajax, Gráficos, Áudio
e Vídeo, Acessibilidade, Internacionalização, Mobile
Web, Privacidade e Matemática na Web.
Web Design and Applications:
https://www.w3.org/standards/webdesign/
Introdução a Web Design – Aula 2: IHC/UX Design
Web Standards
Grupos de Padrões Web
(2/7) Arquitetura Web
Foco nos princípios da Arquitetura Web,
Identificadores (URL, URI e IRI), Protocolos (HTTP,
XML, JSON, etc.), Meta Formatos e
Internacionalização.
Web Architecture:
https://www.w3.org/standards/webarch/
Introdução a Web Design – Aula 2: IHC/UX Design
Web Standards
Grupos de Padrões Web
(3/7) Web Semântica
Conheça as tecnologias e ferramentas para dar suporte à
“Web dos dados", viabilizando pesquisas como num banco
de dados. Aqui você irá aprender sobre Dados Linkados,
Vocabulários e Ontologias, Consultas, Inferência e
Aplicações verticais.
Semantic Web:
https://www.w3.org/standards/semanticweb/
Introdução a Web Design – Aula 2: IHC/UX Design
Web Standards
Grupos de Padrões Web
(4/7) Tecnologia XML
Tecnologias XML, incluindo XML, XML Namespaces,
XML Schema, Efficient XML Interchange (EXI) e
outros padrões relacionados.
XML Technology:
https://www.w3.org/standards/xml/
Introdução a Web Design – Aula 2: IHC/UX Design
Web Standards
Grupos de Padrões Web
(5/7) Web Services
Refere-se às tecnologias como HTTP, XML, SOAP,
WSDL, SPARQL, entre outras, que possibilitam a
integração e comunicação entre diferentes
aplicações.
Web Of Services:
https://www.w3.org/standards/webofservices/
Introdução a Webdesign – Aula 2: IHC/UX Design
Web Standards
Grupos de Padrões Web
(6/7) Web de Dispositivos
Tecnologias que permitem o acesso à Web por
todos, de qualquer lugar, a qualquer hora e
utilizando qualquer dispositivo.
Web Of Devices:
https://www.w3.org/standards/webofdevices/
Introdução a Web Design – Aula 2: IHC/UX Design
Web Standards
Grupos de Padrões Web
(7/7) Navegadores e Ferramentas de Autoria
Nós devemos ser capazes de publicar e acessar conteúdos
independente do software que utilizamos, do computador que
temos, idioma que falamos, se estamos conectados sem fio ou
não, se a tela é grande ou pequena, etc. Estas normas tem o
objetivo de aprimorar constantemente a web que é aberta para
todos nós.
Browsers and Suthoring Tools:
https://www.w3.org/standards/agents/
Diagramas
os padrões web
Introdução a Web Design – Aula 2: IHC/UX Design
Diagramas
Diagrama Dan Saffer
Dan Saffer
Introdução a Web Design – Aula 2: IHC/UX Design
Diagramas
Diagrama Peter Morville
Peter Morville
Entregáveis
Documentos do UX
Introdução a Web Design – Aula 2: IHC/UX Design
Entregáveis do UX
Fases & Categorias
• 1ª Fase: Concepção
• 2ª Fase: Implementação
• 3ª Fase: Monitoramento
Fases & Categorias: 01. Concepção
1. Road Map
2. Benchmark
3. Definição das Métricas de Sucesso
4. Personas
5. Modelo conceitual
6. Blueprint
7. Ecossistema
8. Focus Group
9. Pesquisa Quantitativa
10. Card Sorting
11. Inventário de Conteúdo
12. Análise de Tarefas
13. Mapa do Site (Site Map)
14. Fluxograma
15. Wireframes
16. Protótipos Navegáveis
17. Storyboards
18. Mood Boards;
Introdução a Web Design – Aula 2: IHC/UX Design
Entregáveis do UX
Fases & Categorias: 02. Implementação
1. Casos de uso
2. Documento de Especificação
3. Mensagens de Sistema
4. Análise Heurística
5. Teste de Usabilidade
6. Controle de Qualidade
7. Análise de Acessibilidade
8. Recomendações de SEO
Introdução a Web Design – Aula 2: IHC/UX Design
Entregáveis do UX
Fases & Categorias: 03. Monitoramento
1. Teste de Usabilidade;
2. Testes A/B;
3. Eye Tracking;
4. Análise de Métricas
5. Análise Quantitativa e Qualitativa (análise de interface)
6. Google Analytics
Introdução a Web Design – Aula 2: IHC/UX Design
Entregáveis do UX
<fim />
Gustavo Zimmermann
e-mail: contato@gust4vo.com

Mais conteúdo relacionado

Mais procurados

Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!
Cristofer Sousa
 
A 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignA 3ª Área do Design: Web Design
A 3ª Área do Design: Web Design
Gustavo Zimmermann
 
Usando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter BootstrapUsando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter Bootstrap
Flavio Souza
 
Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Web Design > HTML (aula 1)
Web Design > HTML (aula 1)
Felipe Fernandes
 
O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-end
Diego Eis
 
Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)
Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)
Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)
Gustavo Zimmermann
 
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
RC Comunicação
 
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
Diego Eis
 
Desenvolvimento Ágil com Twitter Bootstrap
Desenvolvimento Ágil com Twitter BootstrapDesenvolvimento Ágil com Twitter Bootstrap
Desenvolvimento Ágil com Twitter Bootstrap
Flavio Souza
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designer
Roney Sousa
 
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
Html5,css3,javascript   o lugar onde sonhos se tornam realidade.Html5,css3,javascript   o lugar onde sonhos se tornam realidade.
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
Edmo Jeova
 
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Thiago Nascimento Oliveira
 
Introdução a Bootstrap 3
Introdução a Bootstrap 3Introdução a Bootstrap 3
Introdução a Bootstrap 3
Iago Effting
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSS
Diego Eis
 
HTML5 Básico: Multimídia 2 (aula 4)
HTML5 Básico: Multimídia 2 (aula 4)HTML5 Básico: Multimídia 2 (aula 4)
HTML5 Básico: Multimídia 2 (aula 4)
Gustavo Zimmermann
 
Engenharia de front end de alta performance
Engenharia de front end de alta performanceEngenharia de front end de alta performance
Engenharia de front end de alta performance
Anderson Solano
 
Bootstrap 4
Bootstrap 4Bootstrap 4
Bootstrap 4
Tais Reis
 
SEO, Semantica e HTML5
SEO, Semantica e HTML5SEO, Semantica e HTML5
SEO, Semantica e HTML5
Fábio Flatschart
 
Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)
Luiz Felipe Fernandes Machado Costa
 
Aula 5. frameworks mobile
Aula 5. frameworks mobileAula 5. frameworks mobile
Aula 5. frameworks mobile
andreluizlc
 

Mais procurados (20)

Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!
 
A 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignA 3ª Área do Design: Web Design
A 3ª Área do Design: Web Design
 
Usando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter BootstrapUsando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter Bootstrap
 
Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Web Design > HTML (aula 1)
Web Design > HTML (aula 1)
 
O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-end
 
Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)
Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)
Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)
 
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
 
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
 
Desenvolvimento Ágil com Twitter Bootstrap
Desenvolvimento Ágil com Twitter BootstrapDesenvolvimento Ágil com Twitter Bootstrap
Desenvolvimento Ágil com Twitter Bootstrap
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designer
 
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
Html5,css3,javascript   o lugar onde sonhos se tornam realidade.Html5,css3,javascript   o lugar onde sonhos se tornam realidade.
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
 
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
 
Introdução a Bootstrap 3
Introdução a Bootstrap 3Introdução a Bootstrap 3
Introdução a Bootstrap 3
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSS
 
HTML5 Básico: Multimídia 2 (aula 4)
HTML5 Básico: Multimídia 2 (aula 4)HTML5 Básico: Multimídia 2 (aula 4)
HTML5 Básico: Multimídia 2 (aula 4)
 
Engenharia de front end de alta performance
Engenharia de front end de alta performanceEngenharia de front end de alta performance
Engenharia de front end de alta performance
 
Bootstrap 4
Bootstrap 4Bootstrap 4
Bootstrap 4
 
SEO, Semantica e HTML5
SEO, Semantica e HTML5SEO, Semantica e HTML5
SEO, Semantica e HTML5
 
Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)
 
Aula 5. frameworks mobile
Aula 5. frameworks mobileAula 5. frameworks mobile
Aula 5. frameworks mobile
 

Semelhante a Introdução ao Web Design: Aula 2 - IHC/UX Design

Web Standards
Web StandardsWeb Standards
Web Standards
George Mendonça
 
Aplicações web acessíveis
Aplicações web acessíveisAplicações web acessíveis
Aplicações web acessíveis
Leandro Borges
 
Website Fixie - Metodologia Projeto E
Website Fixie - Metodologia Projeto EWebsite Fixie - Metodologia Projeto E
Website Fixie - Metodologia Projeto E
Isabela Loepert
 
Web Standards
Web StandardsWeb Standards
Web Standards
Pedro Tavares
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
MarceloRosenbrock1
 
Daw slide 01
Daw slide 01Daw slide 01
Daw slide 01
Pedro Neto
 
Perspectivas De Desenvolvimento Para Web
Perspectivas De Desenvolvimento Para WebPerspectivas De Desenvolvimento Para Web
Perspectivas De Desenvolvimento Para Web
Leandro Costa
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Luiz Antonio
 
Desenvolvimento Web em ambiente de software livre
Desenvolvimento Web em ambiente de software livreDesenvolvimento Web em ambiente de software livre
Desenvolvimento Web em ambiente de software livre
Pedro Neto
 
A importância dos padrões web
A importância dos padrões webA importância dos padrões web
A importância dos padrões web
Divulgrs
 
Desvendando padrões para desenvolvimento web, base para o sucesso
Desvendando padrões para desenvolvimento web, base para o sucessoDesvendando padrões para desenvolvimento web, base para o sucesso
Desvendando padrões para desenvolvimento web, base para o sucesso
Ubiratan Z. do Nascimento
 
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
MBA em Marketing Digital e Gestão de Projetos Web
 
Laboratório Web 2013-2014 - Apresentação Unidade Curricular
Laboratório Web 2013-2014 - Apresentação Unidade CurricularLaboratório Web 2013-2014 - Apresentação Unidade Curricular
Laboratório Web 2013-2014 - Apresentação Unidade Curricular
Ricardo Pereira Rodrigues
 
Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de Interfaces
Ana Migowski
 
Web Share
Web ShareWeb Share
Web Share
agenciatrilha
 
201406Carvalho
201406Carvalho201406Carvalho
201406Carvalho
Afonso Pra
 
Portais Corporativos e Gestao de Conteudo
Portais Corporativos e Gestao de ConteudoPortais Corporativos e Gestao de Conteudo
Portais Corporativos e Gestao de Conteudo
Ricardo Martins Neves
 
Desenvolvimento web com Software Livre
Desenvolvimento web com Software LivreDesenvolvimento web com Software Livre
Desenvolvimento web com Software Livre
Ruan Carvalho
 
Desenvolvimento web com software livre
Desenvolvimento web com software livreDesenvolvimento web com software livre
Desenvolvimento web com software livre
Ruan Carvalho
 
Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2
Patricia Mallmann
 

Semelhante a Introdução ao Web Design: Aula 2 - IHC/UX Design (20)

Web Standards
Web StandardsWeb Standards
Web Standards
 
Aplicações web acessíveis
Aplicações web acessíveisAplicações web acessíveis
Aplicações web acessíveis
 
Website Fixie - Metodologia Projeto E
Website Fixie - Metodologia Projeto EWebsite Fixie - Metodologia Projeto E
Website Fixie - Metodologia Projeto E
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
 
Daw slide 01
Daw slide 01Daw slide 01
Daw slide 01
 
Perspectivas De Desenvolvimento Para Web
Perspectivas De Desenvolvimento Para WebPerspectivas De Desenvolvimento Para Web
Perspectivas De Desenvolvimento Para Web
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
Desenvolvimento Web em ambiente de software livre
Desenvolvimento Web em ambiente de software livreDesenvolvimento Web em ambiente de software livre
Desenvolvimento Web em ambiente de software livre
 
A importância dos padrões web
A importância dos padrões webA importância dos padrões web
A importância dos padrões web
 
Desvendando padrões para desenvolvimento web, base para o sucesso
Desvendando padrões para desenvolvimento web, base para o sucessoDesvendando padrões para desenvolvimento web, base para o sucesso
Desvendando padrões para desenvolvimento web, base para o sucesso
 
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
 
Laboratório Web 2013-2014 - Apresentação Unidade Curricular
Laboratório Web 2013-2014 - Apresentação Unidade CurricularLaboratório Web 2013-2014 - Apresentação Unidade Curricular
Laboratório Web 2013-2014 - Apresentação Unidade Curricular
 
Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de Interfaces
 
Web Share
Web ShareWeb Share
Web Share
 
201406Carvalho
201406Carvalho201406Carvalho
201406Carvalho
 
Portais Corporativos e Gestao de Conteudo
Portais Corporativos e Gestao de ConteudoPortais Corporativos e Gestao de Conteudo
Portais Corporativos e Gestao de Conteudo
 
Desenvolvimento web com Software Livre
Desenvolvimento web com Software LivreDesenvolvimento web com Software Livre
Desenvolvimento web com Software Livre
 
Desenvolvimento web com software livre
Desenvolvimento web com software livreDesenvolvimento web com software livre
Desenvolvimento web com software livre
 
Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2
 

Mais de Gustavo Zimmermann

Aula 13 - Livros Proféticos
Aula 13 - Livros ProféticosAula 13 - Livros Proféticos
Aula 13 - Livros Proféticos
Gustavo Zimmermann
 
Aula 12 - Revisão Pré-Avaliação
Aula 12 - Revisão Pré-AvaliaçãoAula 12 - Revisão Pré-Avaliação
Aula 12 - Revisão Pré-Avaliação
Gustavo Zimmermann
 
Aula 11 - Livros Poéticos
Aula 11 - Livros PoéticosAula 11 - Livros Poéticos
Aula 11 - Livros Poéticos
Gustavo Zimmermann
 
Aula 9 - Livros Históricos (part. 2)
Aula 9 - Livros Históricos (part. 2)Aula 9 - Livros Históricos (part. 2)
Aula 9 - Livros Históricos (part. 2)
Gustavo Zimmermann
 
Aula 10 - Livros Históricos (part. 3)
Aula 10 - Livros Históricos (part. 3)Aula 10 - Livros Históricos (part. 3)
Aula 10 - Livros Históricos (part. 3)
Gustavo Zimmermann
 
Aula 8 - Livros Históricos (part. 1)
Aula 8 - Livros Históricos (part. 1)Aula 8 - Livros Históricos (part. 1)
Aula 8 - Livros Históricos (part. 1)
Gustavo Zimmermann
 
Aula 7 - Revisão Pré-Avaliação
Aula 7 - Revisão Pré-AvaliaçãoAula 7 - Revisão Pré-Avaliação
Aula 7 - Revisão Pré-Avaliação
Gustavo Zimmermann
 
Aula 6 - Deuteronômio
Aula 6 - DeuteronômioAula 6 - Deuteronômio
Aula 6 - Deuteronômio
Gustavo Zimmermann
 
Aula 5 - Números
Aula 5 - NúmerosAula 5 - Números
Aula 5 - Números
Gustavo Zimmermann
 
Aula 1 - História da Bíblia
Aula 1 - História da BíbliaAula 1 - História da Bíblia
Aula 1 - História da Bíblia
Gustavo Zimmermann
 
Aula 3 - Êxodo
Aula 3 - ÊxodoAula 3 - Êxodo
Aula 3 - Êxodo
Gustavo Zimmermann
 
Aula 4 - Levíticos
Aula 4 - LevíticosAula 4 - Levíticos
Aula 4 - Levíticos
Gustavo Zimmermann
 
Aula 2 - Gênesis
Aula 2 - GênesisAula 2 - Gênesis
Aula 2 - Gênesis
Gustavo Zimmermann
 
Aula 1 - Apologética e suas Metodologias
Aula 1 - Apologética e suas MetodologiasAula 1 - Apologética e suas Metodologias
Aula 1 - Apologética e suas Metodologias
Gustavo Zimmermann
 
Aula 2 - Teologia Natural
Aula 2 - Teologia NaturalAula 2 - Teologia Natural
Aula 2 - Teologia Natural
Gustavo Zimmermann
 
Conciência Política
Conciência PolíticaConciência Política
Conciência Política
Gustavo Zimmermann
 
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Gustavo Zimmermann
 
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Gustavo Zimmermann
 
HTML5 Básico: Marcação (aula 1)
HTML5 Básico: Marcação (aula 1)HTML5 Básico: Marcação (aula 1)
HTML5 Básico: Marcação (aula 1)
Gustavo Zimmermann
 
Apologética (Aula 5): Filosofia Vs. Verdade
Apologética (Aula 5): Filosofia Vs. VerdadeApologética (Aula 5): Filosofia Vs. Verdade
Apologética (Aula 5): Filosofia Vs. Verdade
Gustavo Zimmermann
 

Mais de Gustavo Zimmermann (20)

Aula 13 - Livros Proféticos
Aula 13 - Livros ProféticosAula 13 - Livros Proféticos
Aula 13 - Livros Proféticos
 
Aula 12 - Revisão Pré-Avaliação
Aula 12 - Revisão Pré-AvaliaçãoAula 12 - Revisão Pré-Avaliação
Aula 12 - Revisão Pré-Avaliação
 
Aula 11 - Livros Poéticos
Aula 11 - Livros PoéticosAula 11 - Livros Poéticos
Aula 11 - Livros Poéticos
 
Aula 9 - Livros Históricos (part. 2)
Aula 9 - Livros Históricos (part. 2)Aula 9 - Livros Históricos (part. 2)
Aula 9 - Livros Históricos (part. 2)
 
Aula 10 - Livros Históricos (part. 3)
Aula 10 - Livros Históricos (part. 3)Aula 10 - Livros Históricos (part. 3)
Aula 10 - Livros Históricos (part. 3)
 
Aula 8 - Livros Históricos (part. 1)
Aula 8 - Livros Históricos (part. 1)Aula 8 - Livros Históricos (part. 1)
Aula 8 - Livros Históricos (part. 1)
 
Aula 7 - Revisão Pré-Avaliação
Aula 7 - Revisão Pré-AvaliaçãoAula 7 - Revisão Pré-Avaliação
Aula 7 - Revisão Pré-Avaliação
 
Aula 6 - Deuteronômio
Aula 6 - DeuteronômioAula 6 - Deuteronômio
Aula 6 - Deuteronômio
 
Aula 5 - Números
Aula 5 - NúmerosAula 5 - Números
Aula 5 - Números
 
Aula 1 - História da Bíblia
Aula 1 - História da BíbliaAula 1 - História da Bíblia
Aula 1 - História da Bíblia
 
Aula 3 - Êxodo
Aula 3 - ÊxodoAula 3 - Êxodo
Aula 3 - Êxodo
 
Aula 4 - Levíticos
Aula 4 - LevíticosAula 4 - Levíticos
Aula 4 - Levíticos
 
Aula 2 - Gênesis
Aula 2 - GênesisAula 2 - Gênesis
Aula 2 - Gênesis
 
Aula 1 - Apologética e suas Metodologias
Aula 1 - Apologética e suas MetodologiasAula 1 - Apologética e suas Metodologias
Aula 1 - Apologética e suas Metodologias
 
Aula 2 - Teologia Natural
Aula 2 - Teologia NaturalAula 2 - Teologia Natural
Aula 2 - Teologia Natural
 
Conciência Política
Conciência PolíticaConciência Política
Conciência Política
 
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
 
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
 
HTML5 Básico: Marcação (aula 1)
HTML5 Básico: Marcação (aula 1)HTML5 Básico: Marcação (aula 1)
HTML5 Básico: Marcação (aula 1)
 
Apologética (Aula 5): Filosofia Vs. Verdade
Apologética (Aula 5): Filosofia Vs. VerdadeApologética (Aula 5): Filosofia Vs. Verdade
Apologética (Aula 5): Filosofia Vs. Verdade
 

Introdução ao Web Design: Aula 2 - IHC/UX Design

  • 1. Curso: Introdução ao Web Design E-mail: contato@gust4vo.com Aula 2: IHC/UX Design prof. Gustavo Zimmermann
  • 3. Introdução a Web Design – Aula 2: IHC/UX Design Web Standards O que são? Os Padrões Web são recomendações do W3C (World Wide Web Consortium), as quais são destinadas a orientar os desenvolvedores para o uso de boas práticas que tornam a web acessível para todos. Através desses padrões, o W3C tem como objetivo criar uma plataforma aberta da Web, para o desenvolvimento de aplicações que possuam um potencial sem precedentes, permitindo assim que os desenvolvedores criem experiências ricas, alimentadas por um vasto armazenamento de dados, os quais estão disponíveis para qualquer dispositivo.
  • 4. Introdução a Web Design – Aula 2: IHC/UX Design Web Standards W3C W3C, liderada pelo inventor da Web Tim Berners-Lee e o CEO Jeffrey Jaffe, é uma comunidade internacional onde os membros organizacionais, uma equipe em tempo integral e o público (desenvolvedores, por exemplo), trabalham juntos para desenvolver os padrões para a criação e a interpretação dos conteúdos para a Web. Tim Berners-Lee Jeffrey Jaffe
  • 5. Introdução a Web Design – Aula 2: IHC/UX Design Web Standards Divisões do HTML 5 Semântico Offline & Armazenamento Acesso ao Dispositivo Conectividade Multimídia 3D, Gráficos e Efeitos Desempenho e Integração CSS3
  • 6. Introdução a Web Design – Aula 2: IHC/UX Design Web Standards Grupos de Padrões Web (1/7) Web Design e Aplicações Padrões para o desenvolvimento de páginas Web, incluindo HTML & CSS, Script e Ajax, Gráficos, Áudio e Vídeo, Acessibilidade, Internacionalização, Mobile Web, Privacidade e Matemática na Web. Web Design and Applications: https://www.w3.org/standards/webdesign/
  • 7. Introdução a Web Design – Aula 2: IHC/UX Design Web Standards Grupos de Padrões Web (2/7) Arquitetura Web Foco nos princípios da Arquitetura Web, Identificadores (URL, URI e IRI), Protocolos (HTTP, XML, JSON, etc.), Meta Formatos e Internacionalização. Web Architecture: https://www.w3.org/standards/webarch/
  • 8. Introdução a Web Design – Aula 2: IHC/UX Design Web Standards Grupos de Padrões Web (3/7) Web Semântica Conheça as tecnologias e ferramentas para dar suporte à “Web dos dados", viabilizando pesquisas como num banco de dados. Aqui você irá aprender sobre Dados Linkados, Vocabulários e Ontologias, Consultas, Inferência e Aplicações verticais. Semantic Web: https://www.w3.org/standards/semanticweb/
  • 9. Introdução a Web Design – Aula 2: IHC/UX Design Web Standards Grupos de Padrões Web (4/7) Tecnologia XML Tecnologias XML, incluindo XML, XML Namespaces, XML Schema, Efficient XML Interchange (EXI) e outros padrões relacionados. XML Technology: https://www.w3.org/standards/xml/
  • 10. Introdução a Web Design – Aula 2: IHC/UX Design Web Standards Grupos de Padrões Web (5/7) Web Services Refere-se às tecnologias como HTTP, XML, SOAP, WSDL, SPARQL, entre outras, que possibilitam a integração e comunicação entre diferentes aplicações. Web Of Services: https://www.w3.org/standards/webofservices/
  • 11. Introdução a Webdesign – Aula 2: IHC/UX Design Web Standards Grupos de Padrões Web (6/7) Web de Dispositivos Tecnologias que permitem o acesso à Web por todos, de qualquer lugar, a qualquer hora e utilizando qualquer dispositivo. Web Of Devices: https://www.w3.org/standards/webofdevices/
  • 12. Introdução a Web Design – Aula 2: IHC/UX Design Web Standards Grupos de Padrões Web (7/7) Navegadores e Ferramentas de Autoria Nós devemos ser capazes de publicar e acessar conteúdos independente do software que utilizamos, do computador que temos, idioma que falamos, se estamos conectados sem fio ou não, se a tela é grande ou pequena, etc. Estas normas tem o objetivo de aprimorar constantemente a web que é aberta para todos nós. Browsers and Suthoring Tools: https://www.w3.org/standards/agents/
  • 14. Introdução a Web Design – Aula 2: IHC/UX Design Diagramas Diagrama Dan Saffer Dan Saffer
  • 15. Introdução a Web Design – Aula 2: IHC/UX Design Diagramas Diagrama Peter Morville Peter Morville
  • 17. Introdução a Web Design – Aula 2: IHC/UX Design Entregáveis do UX Fases & Categorias • 1ª Fase: Concepção • 2ª Fase: Implementação • 3ª Fase: Monitoramento
  • 18. Fases & Categorias: 01. Concepção 1. Road Map 2. Benchmark 3. Definição das Métricas de Sucesso 4. Personas 5. Modelo conceitual 6. Blueprint 7. Ecossistema 8. Focus Group 9. Pesquisa Quantitativa 10. Card Sorting 11. Inventário de Conteúdo 12. Análise de Tarefas 13. Mapa do Site (Site Map) 14. Fluxograma 15. Wireframes 16. Protótipos Navegáveis 17. Storyboards 18. Mood Boards; Introdução a Web Design – Aula 2: IHC/UX Design Entregáveis do UX
  • 19. Fases & Categorias: 02. Implementação 1. Casos de uso 2. Documento de Especificação 3. Mensagens de Sistema 4. Análise Heurística 5. Teste de Usabilidade 6. Controle de Qualidade 7. Análise de Acessibilidade 8. Recomendações de SEO Introdução a Web Design – Aula 2: IHC/UX Design Entregáveis do UX
  • 20. Fases & Categorias: 03. Monitoramento 1. Teste de Usabilidade; 2. Testes A/B; 3. Eye Tracking; 4. Análise de Métricas 5. Análise Quantitativa e Qualitativa (análise de interface) 6. Google Analytics Introdução a Web Design – Aula 2: IHC/UX Design Entregáveis do UX
  • 21. <fim /> Gustavo Zimmermann e-mail: contato@gust4vo.com