o papel do front-end na ux
DESCRIPTION
Palestra ministrada na Tableless Conference, no dia 16 de maio de 2013 em São Paulo, e no Front in Aracaju no dia 31/08, sobre o papel do desenvolvedor Front-End na experiência do usuário.TRANSCRIPT
![Page 1: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/1.jpg)
![Page 2: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/2.jpg)
EDU AGNICriador do UX.BLOG, trabalha há nove anos com projetos nas áreas de direção de arte, usabilidade, design de interfaces e front-end. Atualmente é designer no iMasters e curador da área de Design da Campus Party Brasil.
www.uxdesign.blog.br
www.twitter.com/eduagni
www.linkedin.com/in/eduagni
//UX.BLOG
![Page 3: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/3.jpg)
![Page 4: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/4.jpg)
“O produto não é um fim em si, mas a porta de entrada para uma infinidade de experiências.”
(The Nokia Design Manifesto)
//UX.BLOG
![Page 5: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/5.jpg)
O que é a tal daexperiência do usuário?
![Page 6: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/6.jpg)
![Page 7: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/7.jpg)
“I thought human interface and usability were too narrow. I wanted to cover all aspects of a user’s experience with the system, including industrial design graphics, the interface, the physical attraction, and the manual.”Don Norman
//UX.BLOG
![Page 8: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/8.jpg)
![Page 9: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/9.jpg)
Avaliação rápida de um produto
★ Eu consigo usá-lo? (usabilidade)
★ Eu devo usá-lo? (utilidade)
★ Eu quero usá-lo? (desejo)
![Page 10: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/10.jpg)
![Page 11: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/11.jpg)
Projetar para pessoas
![Page 12: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/12.jpg)
Projetar para pessoas
Compartilhar boas histórias
![Page 13: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/13.jpg)
Projetar para pessoas
Compartilhar boas histórias
Estimular os sentidos
![Page 14: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/14.jpg)
Tríade da Experiência
Digital
Projetar para pessoas
Compartilhar boas histórias
Estimular os sentidos
< usabilidade > < desejo >
< utilidade >
![Page 15: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/15.jpg)
Não podemos projetar a experiência do usuário.
![Page 16: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/16.jpg)
Nós podemos projetar para a experiência do usuário.
![Page 17: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/17.jpg)
![Page 18: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/18.jpg)
"Se a facilidade de uso fosse o único requisito, estaríamos todos andando em triciclos"
(Douglas Engelbart, inventor do mouse)
//UX.BLOG
![Page 19: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/19.jpg)
![Page 20: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/20.jpg)
Segundo Peter Merholz (Subject to Change), a experiência de uma pessoa emerge das seguintes qualidades:
★ motivações★ expectativas★ percepções★ habilidades★ fluxo★ cultura
//UX.BLOG
![Page 21: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/21.jpg)
Mesmo com tanto investimento em UX, muitos
produtos digitais são medíocres.
![Page 22: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/22.jpg)
Uma boa experiência do usuário exige um bom
desenvolvimento front-end.
![Page 23: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/23.jpg)
Equipes de UX precisam possuir mais do que apenas
designers. Precisam de desenvolvedores front-end.
![Page 24: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/24.jpg)
Você deve estar querendo saber o
porquê, certo?
![Page 25: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/25.jpg)
![Page 26: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/26.jpg)
Facets of the User Experience (The User Experience Honeycomb)
Peter Morville
//UX.BLOG
![Page 27: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/27.jpg)
![Page 28: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/28.jpg)
</>
</> </>
![Page 29: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/29.jpg)
</>
</> </>
![Page 30: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/30.jpg)
O desenvolvedor front-end deve ser capaz de entender, criticar e ajudar a melhorar um modelo de interação básica e wireframes.
![Page 31: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/31.jpg)
Processo de DesignCentrado no Usuário
![Page 32: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/32.jpg)
http://www.flickr.com/photos/kake_pugh/1307255998
![Page 33: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/33.jpg)
Fluxo de trabalho de Design Centrado no Usuário
//UX.BLOG
![Page 34: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/34.jpg)
Fluxo de trabalho de Design Centrado no Usuário
//UX.BLOG
Definição
![Page 35: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/35.jpg)
Fluxo de trabalho de Design Centrado no Usuário
//UX.BLOG
Definição Pesquisa
![Page 36: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/36.jpg)
Fluxo de trabalho de Design Centrado no Usuário
//UX.BLOG
Definição Pesquisa Estratégia
![Page 37: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/37.jpg)
Fluxo de trabalho de Design Centrado no Usuário
//UX.BLOG
Definição Pesquisa Estratégia Protótipo
![Page 38: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/38.jpg)
Fluxo de trabalho de Design Centrado no Usuário
//UX.BLOG
Definição Pesquisa Estratégia Protótipo Desenvolvimento
![Page 39: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/39.jpg)
Fluxo de trabalho de Design Centrado no Usuário
//UX.BLOG
Definição Pesquisa Estratégia Protótipo Desenvolvimento Testes
![Page 40: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/40.jpg)
UCD
//UX.BLOG
Definição
PesquisaEstratégia
Protótipo
Desenvol.
Testes
![Page 41: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/41.jpg)
![Page 42: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/42.jpg)
![Page 43: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/43.jpg)
![Page 44: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/44.jpg)
Em 2003, Mike Davidson foi responsável pelo redesign do site site da ESPN, utilizando os padrões web.
Com isso obteve uma redução de 50kb por página, e com
isso a economia de banda foi de:
2 Terabytes / dia 61 Terabytes / mês 730 Terabytes / ano
![Page 45: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/45.jpg)
E o que vem a ser a tal da Web Semântica?
![Page 46: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/46.jpg)
★ Semântica é o estudo do significado
Incide sobre a relação entre significante e o que eles representam.
![Page 47: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/47.jpg)
★ Web Semântica é uma extensão da Web atual
Máquinas e humanos trabalhando em cooperação, interligando conteúdos pelos significados.
![Page 48: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/48.jpg)
★ Organizar e dar relevância para a informação Desenvolver tecnologias que tornem a informação legível para as máquinas.
![Page 49: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/49.jpg)
![Page 50: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/50.jpg)
![Page 51: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/51.jpg)
Validar o código nãogarante a semântica
![Page 52: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/52.jpg)
Validadores encontram erros de sintaxe, mas não reconhecem se um código é
bem estruturado, e muito menos a semântica do documento.
![Page 53: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/53.jpg)
Padrões de Acessibilidade garantem a semântica
![Page 54: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/54.jpg)
Um dos primeiros sites acessíveis produzidos por uma empresa comercial.
Todo o redesign foi baseado na Web
Content Accessibility Guidelines
(http://www.w3.org/TR/WCAG/), e com
isso as taxas de conversão aumentaram 300%, custos de manutenção caíram
66%, o tempo de carregamento caiu
75%, e a listagem natural nas buscas
aumentou 50%.
![Page 55: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/55.jpg)
Melhorar a sua capacidade de inovar significa tornar mais próximas duas funções que criam inovações: UX e Front-End
![Page 56: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/56.jpg)
Como acessamos aweb hoje em dia?
![Page 57: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/57.jpg)
![Page 58: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/58.jpg)
![Page 59: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/59.jpg)
O que nos aguarda o futuro?
![Page 60: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/60.jpg)
![Page 61: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/61.jpg)
![Page 62: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/62.jpg)
![Page 63: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/63.jpg)
Design Responsivo★ Grids Fluidos
★ Design Adaptatívo
★ Conteúdo Flexível
★ Otimização de desempenho
![Page 64: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/64.jpg)
O Google recomenda,e também te recompensa.
“Sites que usam Web Design Responsivo, isto é, sites que funcionam em todos os dispositivos com o mesmo conjunto de URLs, com cada URL fornecendo o mesmo HTML a todos os dispositivos e usando apenas CSS para alterar como a página é processada no dispositivo. Essa é a configuração recomendada pelo Google.”
https://developers.google.com/webmasters/smartphone-sites/details
![Page 65: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/65.jpg)
![Page 66: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/66.jpg)
![Page 67: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/67.jpg)
![Page 68: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/68.jpg)
Arquitetura de Informação
![Page 69: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/69.jpg)
Arquitetura de Informação
★ Estabelecer uma escala hierárquica de importância das informações textuais e gráficas do site
★ Repensar a pertinência de apresentação dessas informações em diferentes contextos e dispositivos
![Page 70: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/70.jpg)
Otimize suaperformance
Front-End
![Page 71: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/71.jpg)
Renomeie ou remova elementos não-semânticos do seu HTML, e remova seletores ineficientes do CSS.
![Page 72: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/72.jpg)
Reduza o número de requisições do site, principalmente de Javascript.
![Page 73: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/73.jpg)
Otimize suas imagens com o uso de sprites, compressores, Base64 encode, ou substituindo-as por CSS3.
![Page 75: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/75.jpg)
https://developers.google.com/speed/pagespeed/insights?hl=pt-br
![Page 76: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/76.jpg)
![Page 77: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/77.jpg)
![Page 78: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/78.jpg)
Rich Snippets
![Page 79: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/79.jpg)
★ Para se qualificar para os Rich Snippets, você deve marcar as páginas de seu site usando um dos três formatos suportados: Microdados, Microformatos ou RDFa;
![Page 80: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/80.jpg)
★ Uma vez que seu conteúdo é marcado com dados estruturados, teste-o usando a ferramenta de teste de dados estruturados (http://www.google.com/webmasters/tools/richsnippets);
![Page 81: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/81.jpg)
★ Após você implementar e testar corretamente a marcação, pode levar algum tempo até que os Rich Snippets apareçam nos resultados de pesquisa, conforme indexamos e processamos as páginas.
![Page 82: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/82.jpg)
![Page 83: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/83.jpg)
![Page 84: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/84.jpg)
![Page 85: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/85.jpg)
![Page 86: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/86.jpg)
Schema.orgO padrão semântico dos mecanismos de busca.
![Page 87: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/87.jpg)
★ Os três maiores mecanismos de busca da web - Google, Yahoo! e Bing - se juntaram na criação de um padrão para prover melhores práticas semânticas na publicação de conteúdos na web, de forma que sejam indexados com maior precisão e qualidade;
![Page 88: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/88.jpg)
★ O Schema é baseado no Microdata do HTML5, o que mostra que nada novo está sendo criado, mas sim algo já existente está sendo extendido;
![Page 89: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/89.jpg)
★ O Schema.org contempla diferentes tipos de conteúdos, possuindo marcações específicas para livros, filmes, música, receitas, séries de TV, eventos, organizações, pessoas, lugares, restaurantes, produtos, ofertas, reviews, etc.
![Page 90: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/90.jpg)
Schema.org » Organization
HTML Original
Google.Org
Contact Details:Main address: 38 avenue de l'Opera, F-75002 Paris, FranceTel: ( 33 1) 42 68 53 00, Fax: ( 33 1) 42 68 53 01E-mail: secretariat (at) google.orgURL: <a href="http://www.google.org">www.google.org</a>
Members:- National Scientific Members in 100 countries and territories: Country1, Country2, ...- Scientific Union Members, 30 organizations listed in this Yearbook: Member 1, Member 2
History:
![Page 91: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/91.jpg)
Schema.org » Organization
HTML com Schema
<div itemscope itemtype="http://schema.org/Organization"> <span itemprop="name">Google.org (GOOG)</span>
Contact Details: <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
Main address: <span itemprop="streetAddress">38 avenue de l'Opera</span> <span itemprop="postalCode">F-75002</span>
<span itemprop="addressLocality">Paris, France</span> ,
</div> Tel:<span itemprop="telephone">( 33 1) 42 68 53 00 </span>, Fax:<span itemprop="faxNumber">( 33 1) 42 68 53 01 </span>,
E-mail: <span itemprop="email">secretariat(at)google.org</span>
...
![Page 92: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/92.jpg)
Schema.org » Organization
HTML com Schema
...
Members:- National Scientific Members in 100 countries and territories: Country1, Country2, ...- Scientific Union Members, 30 organizations listed in this Yearbook: <span itemprop="member" itemscope itemtype="http://schema.org/Organization"> Member1 </span>, <span itemprop="member" itemscope itemtype="http://schema.org/Organization"> Member2 </span>,
History:</div>
![Page 93: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/93.jpg)
Schema.org » TVSeries
HTML Original
Grey's Anatomy is a medical drama television series created by Shonda RimesStarring:Justin ChambersJessica Capshaw
Season 1 - May 22, 2005Season 2 - May 14, 2006
![Page 94: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/94.jpg)
Schema.org » TVSeries
HTML com Schema
<div itemscope itemtype="http://schema.org/TVSeries"> <span itemprop="name">Greys Anatomy</span> is a medical drama television series created by <div itemscope itemtype="http://schema.org/Person"> <span itemprop="author">Shonda Rimes</span> </div> Starring: <div itemprop="actor" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Justin Chambers</span> </div> <div itemprop="actor" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Jessica Capshaw</span> </div>...
![Page 95: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/95.jpg)
Schema.org » TVSeries
HTML com Schema
... <div itemprop="season" itemscope itemtype="http://schema.org/TVSeason"> <span itemprop="name">Season 1</span> - <meta itemprop="numberofEpisodes" content="14"/> <meta itemprop="datePublished" content="2005-05-22">May 22, 2005 </div> <div itemprop="season" itemscope itemtype="http://schema.org/TVSeason"> <span itemprop="name">Season 2</span> - <meta itemprop="numberofEpisodes" content="27"/> <meta itemprop="datePublished" content="2006-05-14">May 14, 2006 <div itemprop="episode" itemscope itemtype="http://schema.org/TVEpisode"> <span itemprop="name">Episode 1</span> - <meta itemprop="episodeNumber" content="1"/> </div> </div></div>
![Page 96: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/96.jpg)
http://www.google.com/webmasters/tools/richsnippets
![Page 97: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/97.jpg)
Conclusões
![Page 98: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/98.jpg)
O desenvolvimento front-end não é sobre como resolver problemas de tecnologia.
![Page 99: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/99.jpg)
O desenvolvimento front-end é sobre como assegurar uma boa experiência do usuário
em um produto.
![Page 100: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/100.jpg)
Referências
★ Improving UX Through Front-End Performance (bit.ly/15K5zV2)
★ Livro: Subject to Change, de Peter Merholz
★ Facets of the User Experience (http://bit.ly/IGs40)
★ The Disciplines of User Experience (http://bit.ly/Z7XffS)
★ The Nokia Design Manifesto (http://bit.ly/14tr4o)
★ Holy Trinity of Digital Experience Design (http://bit.ly/1agOZi6)
★ Hi, I'm a UX Developer - You're a what? (bit.ly/13nz0sK)
★ What is a UX Developer and are they really a thing? (bit.ly/zSWtPY)
★ Great User Experiences Require Great Front-End Development (bit.ly/IrRjqo)
★ Schema (schema.org)
![Page 101: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/101.jpg)
Perguntas?Dúvidas?
![Page 102: O papel do Front-End na UX](https://reader037.vdocument.in/reader037/viewer/2022110121/5590b06c1a28abfd058b45cb/html5/thumbnails/102.jpg)
Edu Agni
www.uxdesign.blog.br
www.twitter.com/eduagni
www.linkedin.com/in/eduagni
//UX.BLOG
Obrigado ;)