Desenvolvimento de Software para Internet - Resumo Aula - Unidade I

Prévia do material em texto

Prof. MSc. Tarcísio Peres
UNIDADE I
Desenvolvimento de
Software para Internet
 Começando com ASP.NET.
 Design Web e UX.
 Integrando front-end e back-end.
 MVC, WebAPI e Gestão de APIs.
 Entity Framework, deploy e orquestração de contêineres.
 Microsserviços, CI/CD e serverless.
 Introdução ao Desenvolvimento Móvel com React Native.
 Programação Reativa, Blazor e Futuro em ASP.NET.
Conteúdo da disciplina
 Introdução ao ASP.NET.
 O papel de WebAPI em ASP.NET.
 Segurança em ASP.NET.
 Melhores práticas de UX para web.
 Frameworks CSS populares e sua integração com ASP.NET.
Conteúdo da unidade I 
 O ASP.NET é um framework desenvolvido pela Microsoft, que permite aos programadores 
criar sites, aplicações web e serviços web dinâmicos.
 Um framework é uma estrutura de suporte definida, na qual um projeto de software pode ser 
organizado e desenvolvido. 
 Um site é tipicamente uma coleção de páginas web estáticas que fornecem informações fixas 
aos visitantes. Essas páginas (projetadas com HTML/CSS/Javacript) não mudam a menos 
que sejam manualmente atualizadas pelo desenvolvedor.
 Uma aplicação web é caracterizada por sua interatividade e capacidade de fornecer 
conteúdo dinâmico que se adapta às ações do usuário.
 São programas que são executados em um servidor web, são 
acessíveis através de um navegador de internet (como o 
Microsoft Edge ou Google Chrome).
 Aplicações web dinâmicas são construídas usando uma 
combinação de tecnologias de servidor, como ASP.NET, PHP, 
Java, ou Node.js, juntamente com HTML, CSS, e JavaScript
no lado do cliente.
ASP.NET
 O ASP.NET está enraizado na plataforma .NET, fornecendo uma integração perfeita com 
diversas linguagens de programação suportadas por essa plataforma, como C#, VB.NET,
e F#. 
 Para começar com ASP.NET, é recomendável instalar o Visual Studio, um ambiente de 
desenvolvimento integrado (IDE) oferecido pela Microsoft, que fornece ferramentas 
poderosas para a codificação, depuração e teste de aplicações. 
 Utilizar o ASP.NET Core no Visual Studio Community é um processo que envolve várias 
etapas, desde a instalação do próprio Visual Studio até a criação de um projeto
ASP.NET Core.
 Essa versão do Visual Studio é uma opção gratuita oferecida 
pela Microsoft, voltada para desenvolvedores individuais, 
pequenas equipes e projetos educacionais.
 Ao adentrar no mundo do Visual Studio, a experiência começa 
com a instalação e configuração, etapas nas quais o Visual 
Studio Installer desempenha um papel crucial, especialmente 
na versão Community.
ASP.NET – Introdução
 Visual Studio Installer
ASP.NET – Instalação
Fonte: acervo próprio.
 O ASP.NET (Framework) foi lançado no início dos anos 2000 como parte do .NET 
Framework, marcando a transição da Microsoft de tecnologias baseadas em páginas Active 
Server Pages (ASP) para uma abordagem mais robusta e orientada a objetos para o 
desenvolvimento web. 
 O ASP.NET Core, lançado oficialmente em 2016, como uma reescrita completa do ASP.NET, 
não mais construído sobre o .NET Framework, mas sim sobre o .NET Core, que é uma 
reimplementação cross-platform, de alto desempenho e modular do .NET.
 Introduziu melhorias significativas em termos de desempenho e eficiência, beneficiando-se 
de uma arquitetura mais modular que permite aos desenvolvedores incluir apenas as 
bibliotecas e dependências necessárias para suas aplicações, reduzindo o overhead.
 Unificou e simplificou o modelo de desenvolvimento para a 
criação de interfaces de usuário web e APIs, integrando MVC, 
Razor Pages (uma abordagem simplificada para construir UIs
web), e Web API em uma única estrutura coesa. No ASP.NET, 
o MVC e Web API existiam como frameworks separados, 
embora complementares.
ASP.NET Core
 A transição do Web Forms para o Razor Pages pode ser vista como um movimento da 
Microsoft para modernizar o desenvolvimento de aplicações web no .NET, incentivando 
práticas de desenvolvimento mais recentes e eficientes, ao mesmo tempo que oferece uma 
curva de aprendizado menos íngreme para aqueles familiarizados com o modelo baseado 
em eventos do Web Forms. 
 Embora o Razor Pages possa ser mais fácil para desenvolvedores de Web Forms se 
adaptarem em comparação ao MVC devido à sua simplicidade e foco na página, ele não 
oferece uma migração direta para aplicações Web Forms existentes.
 As aplicações Web Forms dependem de um modelo de 
execução e de componentes de servidor que não são 
compatíveis com o ASP.NET Core, requerendo uma reescrita 
considerável ou adaptação.
ASP.NET – Transição 
Fonte: acervo próprio.
Qual é uma das principais características do ASP.NET Core em comparação ao ASP.NET 
Framework?
a) Suporte exclusivo para Windows.
b) Uso de controles de servidor e eventos.
c) Capacidade multiplataforma.
d) Dependência do arquivo web.config.
e) Separação de MVC e Web API.
Interatividade
Qual é uma das principais características do ASP.NET Core em comparação ao ASP.NET 
Framework?
a) Suporte exclusivo para Windows.
b) Uso de controles de servidor e eventos.
c) Capacidade multiplataforma.
d) Dependência do arquivo web.config.
e) Separação de MVC e Web API.
Resposta
 A WebAPI em ASP.NET Core é uma peça-chave no desenvolvimento de aplicações web 
modernas, fornecendo uma plataforma eficiente, flexível e de alto desempenho para a 
construção de APIs RESTful (RUBY, RICHARDSON e AMUNDSEN, 2013). 
 O conceito de API, que é a sigla para Application Programming Interface (Interface de 
Programação de Aplicações), representa um conjunto de regras, protocolos e ferramentas 
para construir software e aplicações (HUNTER, 2016).
 Funcionando como uma ponte entre diferentes softwares, uma API permite que diferentes 
programas comuniquem entre si sem a necessidade de conhecer detalhes internos de como 
são implementados.
 O WebAPI é uma tecnologia importante que permite a criação 
de APIs RESTful. Estas são projetadas para serem leves, de 
fácil compreensão e comunicação, utilizando o protocolo HTTP 
como base para a criação, leitura, atualização e exclusão
de dados.
 Uma das APIs mais visíveis no cotidiano é aquela utilizada 
pelas redes sociais (Leblanc, 2011).
WebAPI 
 A arquitetura REST (Representational State Transfer) é uma abordagem baseada em 
padrões web e HTTP, tornando-a ideal para a construção de serviços web que podem ser 
consumidos por uma variedade de clientes, incluindo navegadores web, aplicativos móveis e 
aplicativos de desktop. 
 A WebAPI do ASP.NET Core é projetada para suportar esta abordagem, oferecendo uma 
forma simplificada de desenvolver serviços web sem a necessidade de lidar com a 
complexidade dos protocolos SOAP (Simple Object Access Protocol) baseados
em padrões anteriores. 
 O servidor não armazena nenhum estado de sessão do cliente entre as requisições; 
qualquer estado necessário é mantido no cliente.
 Outro princípio importante é a uniformidade da interface, que 
simplifica e desacopla a arquitetura, permitindo que cada parte 
evolua independentemente. Isso é conseguido seguindo um 
conjunto padronizado de operações (como os métodos HTTP 
mencionados anteriormente) e aplicando o princípio de 
HATEOAS.
Arquitetura REST 
 Suporte extensivo para a documentação automática de APIs, utilizando ferramentas como o 
Swagger/OpenAPI, facilitando, assim, a criação de documentações precisas e fáceis de 
entender que são cruciais para o desenvolvimento de APIs públicas ou de uso interno 
(Lauret, 2019). 
 Swagger e OpenAPI são termos frequentemente utilizados no desenvolvimento de APIs, 
especialmente quando se trata de design, documentação e consumo de APIs RESTful. 
 O ASP.NET Core suporta nativamente a integração com o Swagger/OpenAPI pelo pacote 
NuGet Swashbuckle.AspNetCore.Swashbuckle que automaticamente gera especificações 
OpenAPI para sua API, baseando-se nos comentários XML e nos atributos que você 
adiciona ao seucódigo.
 Swagger.io (Smartbear, 2024) e OpenAPI Specification GitHub 
Repository (Andrews, 2024) são excelentes pontos de partida 
para aprender sobre Swagger e OpenAPI, respectivamente. 
Oferecem a especificação e a documentação oficial e acesso 
a uma comunidade ativa de desenvolvedores e a ferramentas 
que facilitam o trabalho.
Swagger/OpenAPI
 O ASP.NET Core representa uma estrutura de desenvolvimento web de código aberto, 
mantida pela Microsoft e pela comunidade. 
 A sua introdução marcou um avanço notável em termos de flexibilidade, configurabilidade e 
desempenho, tornando-se uma escolha popular entre desenvolvedores que buscam 
eficiência e escalabilidade em suas soluções web. 
 Uma das principais características do ASP.NET Core é seu desenho modular, que permite 
aos desenvolvedores incluir apenas os componentes necessários para seus projetos, 
reduzindo assim a sobrecarga e otimizando o desempenho. Essa modularidade é 
complementada por uma vasta coleção de bibliotecas e ferramentas disponíveis através do 
NuGet, o gerenciador de pacotes do .NET.
 O ASP.NET Core foi projetado para ser cross-platform, 
funcionando em diferentes sistemas operacionais, como 
Windows, Linux e macOS. Essa característica representa uma 
mudança significativa em relação às versões anteriores do 
ASP.NET, que eram restritas ao Windows.
ASP.NET Core
 A estrutura suporta o desenvolvimento de aplicações web de forma síncrona e assíncrona, 
oferecendo recursos avançados para a criação de APIs web, aplicações de página única 
(SPA), e microsserviços. 
 O ASP.NET Core introduz o conceito de middleware, um componente que permite a inserção 
de lógica customizada no pipeline de processamento de requisições HTTP, facilitando a 
implementação de funcionalidades, como autenticação, autorização e gestão de sessões de 
forma eficiente e modular. 
 O conceito de pipeline em computação, especialmente no contexto do desenvolvimento web 
com ASP.NET Core, refere-se a uma cadeia de componentes de processamento através dos 
quais uma requisição HTTP passa antes de gerar uma resposta.
 Nessa analogia, cada componente do pipeline pode ser visto 
como uma estação de trabalho em uma linha de montagem, 
em que cada estação executa uma tarefa específica. No 
ASP.NET Core, esses componentes são conhecidos
como middleware.
ASP.NET Core
 Quando uma aplicação ASP.NET Core recebe uma requisição, essa requisição não é 
processada por um único bloco de código; em vez disso, ela viaja através do pipeline de 
middleware, que é configurado pelo desenvolvedor. 
 Cada peça de middleware tem a oportunidade de inspecionar, processar ou transformar a 
requisição e a resposta, ou até mesmo encerrar o ciclo de requisição-resposta 
prematuramente, sem passá-la adiante no pipeline.
 Esse design permite uma grande flexibilidade e modularidade, pois os desenvolvedores 
podem adicionar, remover ou reordenar componentes de middleware conforme necessário 
para atender às necessidades específicas da aplicação.
 A capacidade de construir e personalizar o pipeline de 
processamento de requisições com middleware específico 
fornece aos desenvolvedores um controle preciso sobre como 
as requisições são tratadas e respondidas, melhorando a 
segurança, a eficiência e a organização do código da 
aplicação.
ASP.NET Core
Suporte a diferentes padrões de desenvolvimento:
 O MVC permite uma separação clara entre a lógica de programação, a interface do usuário e 
a manipulação de dados, promovendo um desenvolvimento estruturado e fácil manutenção. 
 Razor Pages, por outro lado, é uma abordagem mais simplificada, ideal para páginas web 
que não requerem a complexidade do MVC.
 Blazor é uma tecnologia inovadora que permite o desenvolvimento de interfaces de usuário 
ricas em C#, sem a necessidade de JavaScript, utilizando WebAssembly para executar 
código .NET diretamente no navegador.
 A segurança é outra área em que o ASP.NET Core se 
destaca, oferecendo recursos robustos para proteção contra 
vulnerabilidades comuns da web, como cross-site scripting
(XSS) e falsificação de requisição em sites (CSRF).
 A estrutura promove práticas de desenvolvimento seguro, 
como a utilização de HTTPS por padrão e ferramentas para 
gerenciamento de senhas e autenticação de usuários.
ASP.NET Core
Se posiciona diante de uma diversidade de tecnologias e estruturas concorrentes:
 Node.js é uma plataforma de desenvolvimento em JavaScript do lado do servidor, conhecida 
por sua capacidade de lidar com operações assíncronas e sua performance em aplicações 
em tempo real. Perante o Node.js, o ASP.NET Core se sobressai pela sua robustez, 
segurança e pela integração profunda com o ecossistema do .NET, o que pode ser 
particularmente vantajoso para equipes já familiarizadas com C#.
 Ruby on Rails é um framework para aplicações web escrito em Ruby, valorizado por sua 
convenção sobre configuração e sua eficiência no desenvolvimento rápido de aplicações. 
Em comparação, o ASP.NET Core pode oferecer um desempenho superior, devido à sua 
otimização e ao suporte nativo a tarefas assíncronas e multithreading.
 Django e Flask são frameworks de desenvolvimento web para 
Python. Diante desses frameworks Python, o ASP.NET Core 
se destaca pela sua performance e escalabilidade, 
especialmente em ambientes de produção que exigem altas 
taxas de processamento e eficiência na gestão de recursos.
ASP.NET Core
 A configuração do ambiente de desenvolvimento é um passo crucial. Isso envolve a 
instalação do .NET Core SDK, bem como de um editor de código ou IDE que suporte a 
tecnologia, como o Visual Studio, Visual Studio Code ou Rider. Essas ferramentas oferecem 
funcionalidades robustas para depuração, teste e gerenciamento de dependências, o que é 
fundamental para o desenvolvimento eficiente de aplicações ASP.NET Core.
 A estruturação do projeto merece atenção especial. O ASP.NET Core suporta a separação 
de preocupações através de sua arquitetura em camadas, permitindo a organização do 
código de maneira lógica e modular. Isso inclui a separação do código de interface do 
usuário (UI), lógica de negócios e acesso a dados. Tal abordagem facilita a manutenção e o 
teste do código, e também promove a reusabilidade e a escalabilidade da aplicação.
 Adotar práticas de segurança desde o início do 
desenvolvimento é essencial. Configurar corretamente essas 
funcionalidades e estar sempre atento às melhores práticas de 
segurança, como o uso de HTTPS e a gestão segura de 
senhas e chaves, ajuda a proteger a aplicação contra 
vulnerabilidades comuns.
ASP.NET Core
 Cross-Site Scripting (XSS): Imagine que você recebe um convite para um evento que parece 
vir de um amigo. No entanto, ao abrir o convite, você descobre que, na verdade, ele contém 
um vírus que agora está no seu telefone ou computador. No contexto da web, isso é 
semelhante ao XSS, que ocorre quando um atacante consegue inserir um código malicioso 
em uma página da web que parece segura. 
 Cross-Site Request Forgery (CSRF): Imagine que você está logado em seu banco online e, 
sem sair dessa sessão, você clica em um link suspeito que alguém lhe enviou. Esse link, 
sem que você perceba, realiza uma transferência de dinheiro da sua conta para a conta do 
atacante. É como se alguém usasse sua mão para assinar um cheque enquanto você
está distraído.
 SQL Injection: você vai a uma biblioteca e preenche um 
formulário de solicitação para encontrar um livro, mas, em vez 
de escrever o nome do livro, você escreve um comando que 
faz o bibliotecário lhe entregar todos os livros da biblioteca. 
SQL Injection funciona de maneira semelhante: um atacante 
insere comandos maliciosos no lugar de entradas de
dados normais.
Segurança
Qual é a função principal da WebAPI em ASP.NET Core?
a) Criar interfaces de usuário.
b) Construir APIs RESTful.
c) Desenvolver jogos.
d) Gerenciar bancos de dados.
e) Editarvídeos.
Interatividade
Qual é a função principal da WebAPI em ASP.NET Core?
a) Criar interfaces de usuário.
b) Construir APIs RESTful.
c) Desenvolver jogos.
d) Gerenciar bancos de dados.
e) Editar vídeos.
Resposta
 Os princípios guiam os designers na organização e apresentação do conteúdo de forma que 
melhore a experiência do usuário, promovendo uma interação intuitiva e satisfatória com a 
aplicação web. 
 Um desses princípios é a simplicidade, que preza por um design limpo e descomplicado. A 
simplicidade no design web não se traduz em falta de elementos, mas na escolha cuidadosa
deles, garantindo que cada parte tenha um propósito e contribua para o objetivo do site. 
 Isso envolve o uso de cores, tipografia e imagens de maneira ponderada, evitando excessos 
que podem distrair ou confundir o usuário. As cores desempenham um papel fundamental na 
estética e na funcionalidade de um site, sendo utilizadas não apenas para atrair a atenção, 
mas também para evocar emoções e comunicar informações de maneira sutil.
 A escolha de uma paleta de cores deve refletir a identidade da 
marca e ser utilizada de maneira consistente ao longo do site.
 O excesso no uso de cores, por outro lado, pode resultar em 
uma página visualmente saturada, dificultando a identificação 
de informações importantes e potencialmente levando à
fadiga visual.
Princípios básicos de design web
 Além da estética, é crucial considerar aspectos de acessibilidade e desempenho ao escolher 
tipografias para um site. Fontes com alta legibilidade e tamanhos adequados de texto são 
essenciais para garantir que o site seja acessível a todos os usuários, incluindo aqueles com 
deficiências visuais. 
 Da mesma forma, o desempenho do site pode ser afetado pelo número e pelo peso das 
fontes utilizadas. A seleção de fontes otimizadas para a web e o uso criterioso de variantes 
de fontes (como pesos e estilos) podem ajudar a minimizar o impacto sobre o tempo de 
carregamento do site.
 A escolha de imagens de alta qualidade que estejam alinhadas 
com o tema e os objetivos do site pode aumentar 
significativamente o engajamento do usuário. Importante 
também é a otimização dessas imagens para garantir tempos 
de carregamento rápidos e uma boa performance no site.
 Por outro lado, o uso excessivo de imagens grandes ou não 
otimizadas pode resultar em tempos de carregamento lentos, 
afetando negativamente a experiência do usuário.
Princípios básicos de design web
 A consistência é outro princípio vital, assegurando que elementos como cores, fontes e 
layouts sejam uniformes em todas as páginas da web. Uma consistência bem aplicada 
fortalece a identidade visual da marca e facilita a navegação, já que os usuários aprendem 
rapidamente onde encontrar informações e como interagir com o site. 
 Quando elementos como cores, fontes e layouts são mantidos uniformes em todas as 
páginas de um site, isso cria uma sensação de coesão e previsibilidade que beneficia tanto 
a marca quanto o usuário. 
 A uniformidade nas fontes usadas em todo o site contribui para uma leitura mais fluida
e confortável.
 Um layout previsível permite que os usuários localizem 
informações essenciais sem esforço, como menu de 
navegação, rodapé com informações de contato e botões de 
chamada para ação.
 Quando o layout é inconsistente, os usuários podem se sentir 
perdidos e frustrados, o que aumenta a probabilidade de 
abandono do site.
Princípios básicos de design web
 Razor Pages e o MVC (Model-View-Controller) oferecem métodos sofisticados para a criação 
de layouts. Razor Pages facilitam a construção de interfaces web ao combinar marcação 
HTML com código C# de forma fluida, permitindo um controle mais fino sobre o layout e a 
lógica de apresentação. O padrão MVC separa a lógica da aplicação da interface do usuário, 
permitindo que os desenvolvedores trabalhem nos layouts (Views) de forma independente da 
lógica de negócios (Controllers), promovendo um desenvolvimento organizado e modular. 
 Suporte à integração com frameworks front-end populares, como Bootstrap, Angular e React. 
Essa compatibilidade permite aos desenvolvedores aproveitar componentes de UI prontos 
para uso e construir layouts responsivos que se adaptam a diferentes tamanhos de tela, 
melhorando significativamente a experiência do usuário em dispositivos móveis e desktops.
 CSS e JavaScript, permitindo aos desenvolvedores estilizar e 
adicionar interatividade aos seus layouts de forma eficaz. 
Através do uso de bundles e minificação, o ASP.NET Core 
otimiza esses arquivos, melhorando o desempenho do 
carregamento da página. Além disso, é compatível com 
pré-processadores CSS como LESS e SASS.
Layouts no ASP.NET
 A consistência ajuda na aprendizagem e na familiarização dos usuários com o site. À medida 
que os usuários navegam por diferentes páginas, eles rapidamente aprendem onde 
encontrar informações específicas e como interagir com o site, graças à uniformidade dos 
elementos de design. Isso reduz o esforço cognitivo necessário para compreender como o 
site funciona, permitindo que os usuários se concentrem no conteúdo.
 A hierarquia visual que organiza e prioriza o conteúdo de acordo com sua importância, 
guiando o olhar do usuário através da página de forma natural e lógica. Isso pode ser 
alcançado pelo uso estratégico de tamanhos de fonte, cores, espaçamento e elementos 
gráficos que destacam áreas-chave e incentivam a progressão visual do usuário
de maneira intuitiva.
 O espaçamento, incluindo margens e espaçamentos internos 
(padding), é fundamental para criar respiração entre os 
elementos da página, permitindo que os usuários processem 
facilmente o conteúdo.
 Um espaçamento adequado ao redor dos títulos aumenta sua 
proeminência, enquanto um espaçamento consistente entre 
parágrafos melhora a legibilidade do texto.
Princípios complementares
 Além da simplicidade, consistência e hierarquia visual, aprimorar a usabilidade e a 
acessibilidade de um site envolve uma série de práticas e considerações técnicas que vão 
desde a estrutura do projeto até a implementação de funcionalidades específicas. 
 A criação de uma navegação clara e intuitiva é essencial para qualquer site, permitindo que 
os usuários encontrem facilmente o que estão procurando. No ASP.NET, isso pode ser 
alcançado através do uso de layouts consistentes e reutilizáveis.
 A implementação de menus de navegação, breadcrumbs e links de rodapé ajudam os 
usuários a entender sua localização no site e a navegar facilmente entre seções 
relacionadas.
 A performance é um componente crítico da usabilidade. Sites 
que carregam rapidamente oferecem uma experiência de 
usuário superior. O ASP.NET suporta técnicas como o caching
de páginas, otimização de ativos (CSS, JavaScript) através de 
bundling e minification, e o uso de recursos assíncronos para 
melhorar a velocidade de carregamento.
Princípios complementares
 A acessibilidade é uma prioridade, assegurando que o site seja utilizável por pessoas com 
uma ampla gama de capacidades. O ASP.NET facilita a adesão aos padrões de 
acessibilidade, como WCAG (Web Content Accessibility Guidelines), através da geração de 
marcação HTML semântica e suporte para atributos ARIA (Accessible Rich Internet 
Applications). 
 Utilizar controles de formulário com etiquetas apropriadas, garantir um contraste adequado 
de cores e fornecer alternativas textuais para conteúdo não textual são práticas que podem 
ser implementadas facilmente, tornando o site mais acessível. 
 A responsividade é uma característica fundamental no design de sites na era atual, marcada 
pela variedade de dispositivos com acesso à internet.
 O design responsivo funciona através da utilização de layouts 
fluidos, imagens flexíveis e consultas de mídia CSS. Os 
layouts fluidos usam unidades de medida relativas, como 
percentagens em vez de pixels fixos, para definir largurase 
alturas, permitindo que os elementos da página se ajustem 
proporcionalmente ao tamanho da tela.
Princípios complementares
 A User Experience (UX) é um aspecto fundamental no desenvolvimento de produtos digitais, 
como websites, aplicativos móveis e softwares. 
 A UX abrange todos os aspectos da interação do usuário final com a empresa, seus serviços 
e seus produtos. 
 O objetivo principal da UX é garantir que os usuários encontrem valor nas soluções 
oferecidas, proporcionando uma experiência que seja eficiente, intuitiva e satisfatória. 
 A importância da UX reside na sua capacidade de influenciar diretamente a percepção do 
usuário sobre o produto, o que, por sua vez, afeta a fidelidade do cliente, a retenção de 
usuários e, finalmente, o sucesso comercial do projeto.
 A UX é vital porque pode ser a diferença entre o sucesso e o 
fracasso de um produto digital. 
 Uma boa experiência do usuário pode levar a taxas mais altas 
de adoção do produto, maior satisfação do cliente e uma 
vantagem competitiva no mercado.
Experiência do Usuário
 Google Wave: Lançado em 2009, foi uma plataforma inovadora de comunicação e 
colaboração em tempo real. 
 Apesar de sua tecnologia avançada, o produto falhou em grande parte devido à sua 
interface de usuário complexa e sobrecarregada. 
 Os usuários se sentiram confusos e sobrecarregados pelas múltiplas funcionalidades
e pela falta de direcionamento claro, o que levou ao seu declínio e eventual 
descontinuação.
 Microsoft Windows 8: introduziu uma mudança radical na interface, optando por uma 
abordagem baseada em telhas (tiles) pensada inicialmente para dispositivos touchscreen. 
 Muitos usuários de desktop acharam a interface confusa e 
menos intuitiva do que as versões anteriores do Windows, 
especialmente pela ausência do tradicional botão "Iniciar".
 A insatisfação dos usuários levou a Microsoft a fazer ajustes 
significativos na atualização subsequente, o Windows 8.1, e 
mais tarde a revisar muitos desses conceitos de design no 
Windows 10.
Experiência do Usuário
 Spotify: O serviço de streaming de música Spotify destacou-se em um mercado competitivo 
em grande parte devido à sua excelente UX. 
 Com uma interface limpa, navegação intuitiva e personalização baseada em algoritmos, o 
Spotify tornou mais fácil e agradável para os usuários descobrirem e ouvirem música. 
 A capacidade de criar e compartilhar playlists com facilidade adicionou um aspecto social 
que também contribuiu para sua popularidade.
 Tinder: Desde o seu lançamento em 2012, ele revolucionou a indústria de encontros online 
com sua abordagem simples, intuitiva e engajante de deslizar para a direita (like) ou para a 
esquerda (dislike), uma interação que se tornou icônica no design de aplicativos móveis.
 Oferece feedback imediato às ações do usuário, o que é um 
elemento crucial para uma boa UX. Esse feedback positivo 
rápido incentiva a continuidade do uso.
 Dá grande ênfase à apresentação visual dos perfis, com fotos 
ocupando a maior parte da tela. Isso reflete a importância da 
atração física nas primeiras impressões e facilita a tomada de 
decisões rápidas pelos usuários.
Experiência do Usuário
 Usabilidade: refere-se à facilidade com que um usuário pode interagir com um produto ou 
serviço. 
 Design centrado no usuário: uma abordagem de design que coloca as necessidades, desejos 
e limitações dos usuários finais no centro do processo de desenvolvimento. 
 Arquitetura da informação: trata da organização, estruturação e rotulagem do conteúdo de 
maneira eficaz, de modo a facilitar a navegação e a encontrar informações rapidamente.
 Design de interação: concentra-se em criar interfaces engajadoras com comportamentos 
bem pensados. 
 Acessibilidade: fundamental para criar produtos inclusivos.
 Pesquisa com usuários: ajuda a entender as necessidades, 
experiências, comportamentos e objetivos dos usuários.
 Prototipagem e teste: desenvolver protótipos e realizar testes 
iterativos são práticas centrais no processo de design UX. Eles 
permitem validar ideias e conceitos de design com usuários 
reais, garantindo que o produto final atenda às suas 
necessidades e expectativas.
Conceitos fundamentais de UX
Qual é um dos benefícios do design responsivo?
a) Reduz a necessidade de usar CSS.
b) Melhora a experiência do usuário em diferentes dispositivos.
c) Aumenta o tempo de carregamento do site.
d) Diminui a necessidade de testes de usabilidade.
e) Facilita a criação de interfaces de usuário estáticas.
Interatividade
Qual é um dos benefícios do design responsivo?
a) Reduz a necessidade de usar CSS.
b) Melhora a experiência do usuário em diferentes dispositivos.
c) Aumenta o tempo de carregamento do site.
d) Diminui a necessidade de testes de usabilidade.
e) Facilita a criação de interfaces de usuário estáticas.
Resposta
 O uso de softwares de design gráfico como Adobe Photoshop, Illustrator e Sketch é 
prevalente entre os profissionais da área. Esses programas fornecem recursos poderosos 
para a criação de elementos visuais, design de interfaces e experiências de usuário. 
 Com essas ferramentas é possível explorar detalhadamente a composição visual, a paleta de 
cores e a tipografia, elementos cruciais para a comunicação eficaz do conceito de design. 
 As ferramentas de prototipagem como Figma, Adobe XD e Axure desempenham um papel 
essencial no desenvolvimento de produtos digitais. 
 Elas permitem que os designers criem modelos interativos que simulam o funcionamento real 
de um aplicativo ou site.
 Essa prática é indispensável, pois facilita o teste de 
usabilidade, permitindo identificar e corrigir problemas de 
navegação ou experiência do usuário antes do 
desenvolvimento final. 
 Protótipos interativos são uma forma eficaz de comunicar 
ideias de design para clientes e equipes, garantindo que todos 
compartilhem uma visão comum do produto final.
Ferramentas e técnicas de design 
 As técnicas de design também são parte integrante do processo, com a metodologia Design 
Thinking sendo uma das mais destacadas. Essa abordagem centrada no ser humano 
enfatiza a importância de entender as necessidades e os desejos do usuário final desde o 
início do processo de design. 
 Ao empregar técnicas, como brainstorming, prototipagem rápida e testes de usabilidade, o 
Design Thinking incentiva a experimentação e a iteração, permitindo que as soluções de 
design evoluam com base no feedback real dos usuários. 
 Outra técnica importante é o design interativo incremental, que combina princípios do design 
interativo com uma abordagem incremental de desenvolvimento, permitindo uma evolução 
constante do produto através de ciclos de feedback e melhorias.
 No design interativo incremental, o processo começa com a 
criação de uma versão inicial do produto, que é então 
submetida a testes com usuários ou partes interessadas.
 O feedback recolhido a partir destes testes é utilizado para 
informar as modificações e melhorias no design.
 Esse ciclo de design, teste e refinamento é repetido em 
incrementos sucessivos.
Ferramentas e técnicas de design 
 Ao envolver os usuários finais desde o início e continuamente ao longo do desenvolvimento, 
os designers e desenvolvedores podem identificar problemas de usabilidade, compreender 
melhor as necessidades dos usuários e adaptar o produto de maneira mais eficaz. 
 O design interativo incremental é benéfico em ambientes que exigem flexibilidade e 
adaptabilidade, pois permite que as equipes de projeto respondam rapidamente a mudanças 
nas necessidades do usuário ou nos objetivos do projeto. 
 Ao dividir o processo de desenvolvimento em incrementos menores, a equipe pode se sentir 
mais motivada e focada, já que cada ciclo completo oferece uma sensação de progresso
e realização.
 Frameworks CSS populares, como Bootstrap, Foundation e 
Tailwind CSS, têm desempenhado um papel crucial nodesenvolvimento web, fornecendo um conjunto robusto de 
ferramentas de estilo que facilitam a criação de interfaces de 
usuário responsivas e visualmente atraentes. Quando 
integrados com ASP.NET eles podem significativamente 
acelerar o processo de desenvolvimento e melhorar a 
qualidade do produto final.
Ferramentas e técnicas de design 
 Desenvolvimento acelerado: utilizar componentes pré-construídos e sistemas de grid reduz o 
tempo de desenvolvimento, permitindo que os desenvolvedores se concentrem na lógica de 
negócios e outras funcionalidades importantes.
 Consistência e responsividade: os frameworks CSS garantem uma experiência de usuário 
consistente e responsiva em diferentes dispositivos e tamanhos de tela.
 Customização e flexibilidade: apesar de oferecerem componentes prontos para uso, muitos 
frameworks CSS também permitem customizações profundas.
 Melhoria na manutenibilidade: a utilização de um framework CSS padronizado pode ajudar a 
manter o código mais organizado e fácil de manter.
 A integração do Bootstrap com ASP.NET é relativamente 
simples e direta.
 Os desenvolvedores podem incluir os arquivos CSS e 
JavaScript do Bootstrap em seus projetos ASP.NET MVC ou 
ASP.NET Core através de referências diretas nos arquivos de 
layout ou utilizando gerenciadores de pacotes como
o NuGet ou o npm.
Benefícios do uso de frameworks CSS
 Essa integração permite aos desenvolvedores utilizar os componentes e classes do 
Bootstrap para construir rapidamente interfaces de usuário elegantes e responsivas, 
mantendo o backend robusto e as funcionalidades do ASP.NET. 
 Foundation, da ZURB, é outro framework CSS avançado, conhecido por sua abordagem 
mobile-first e por oferecer um ambiente altamente customizável para o desenvolvimento de 
designs responsivos. 
 Semelhante ao Bootstrap, a Foundation pode ser facilmente integrada a projetos ASP.NET. 
Incluindo os arquivos CSS e JavaScript da Foundation em um projeto ASP.NET, os 
desenvolvedores podem aproveitar suas funcionalidades avançadas para criar sites e 
aplicações web que se adaptam perfeitamente a qualquer tamanho de tela.
 Tailwind CSS é um framework CSS de utilidade-primeiro 
(utility-first) que permite aos desenvolvedores criar designs 
personalizados sem sair do seu HTML.
 Diferente do Bootstrap e da Foundation, que oferecem 
componentes prontos para uso, o Tailwind fornece classes de 
utilidade que podem ser combinadas para criar designs únicos.
Uso de frameworks CSS
 A fluidez e a flexibilidade dos elementos de layout. Isso significa que os elementos da página 
devem se ajustar automaticamente às diferentes larguras de tela, mantendo a aparência
e a funcionalidade. 
 O ASP.NET Core facilita essa prática através de sua integração com frameworks CSS como 
Bootstrap, que utiliza um sistema de grid flexível para criar layouts que respondem às 
mudanças no ambiente de visualização. 
 Ao incorporar o Bootstrap, ou outros frameworks semelhantes em um projeto ASP.NET Core, 
os desenvolvedores podem aproveitar esses sistemas de grid para construir interfaces de 
usuário que se adaptam suavemente a qualquer tamanho de tela.
 Gerenciar como as imagens e outros tipos de mídia são 
exibidos em dispositivos com diferentes resoluções é outro 
aspecto crucial do design responsivo.
 O ASP.NET Core suporta a implementação de imagens 
adaptáveis através de atributos HTML como srcset e sizes, 
permitindo que os navegadores escolham a versão mais 
apropriada de uma imagem com base no tamanho da tela
e na resolução. 
Pilares do design responsivo
 A performance é um aspecto crítico do design responsivo, pois os usuários esperam que as 
páginas carreguem rapidamente, independentemente do dispositivo ou da conexão com
a internet. 
 O ASP.NET Core promove práticas que melhoram a performance, como o carregamento 
preguiçoso de imagens e scripts, a minificação de arquivos CSS e JavaScript (usando, por 
exemplo, BundlerMinifier ou WebOptimizer), e o uso de cache para reduzir o tempo
de carregamento. 
 Além disso, o suporte do ASP.NET Core para o desenvolvimento de APIs RESTful permite 
a criação de aplicações web que carregam dados de forma eficiente, melhorando a 
responsividade e a experiência do usuário.
 Para implementar o carregamento preguiçoso de imagens em 
uma página Razor Pages você pode aproveitar o atributo 
loading nativo do HTML5, que é suportado pela maioria dos 
navegadores modernos.
 O atributo loading pode ser definido como lazy para imagens
e iframes.
Pilares do design responsivo
 Pode significativamente reduzir o tempo de carregamento ao armazenar cópias de recursos 
frequentemente acessados. 
 Cache de resposta: utilize o middleware de Cache de Resposta para armazenar as respostas 
de solicitações HTTP. No Startup.cs, adicione app.UseResponseCaching() no método 
Configure. Você pode controlar o comportamento do cache usando atributos como 
[ResponseCache] nas suas actions ou páginas Razor.
 Cache em memória: para dados que são frequentemente lidos mas raramente alterados, 
você pode usar o cache em memória. Primeiro, adicione o serviço de cache em memória no 
método ConfigureServices do Startup.cs com services.AddMemoryCache(). Então, injete e 
utilize o IMemoryCache em suas páginas ou controllers para armazenar e recuperar dados.
 Cache distribuído: para aplicações em escala ou em 
ambientes de cluster, um cache distribuído como Redis ou 
SQL Server pode ser utilizado. Configure o serviço de cache 
distribuído em Startup.cs e use de forma semelhante ao cache 
em memória.
Caching
Critérios de escolha:
MVC ou Razor Pages?
Fonte: autoria própria.
Critério Razor Pages MVC
Complexidade do Projeto
Melhor para projetos simples a 
moderadamente complexos.
Melhor para projetos complexos 
e de grande escala.
Abordagem de 
Desenvolvimento
Centrado em páginas, na qual 
cada página tem seu próprio 
modelo de manipulação de 
requisições.
Baseado no padrão Model-
View-Controller, separando a 
lógica de apresentação, 
negócios e dados.
Tipo de Aplicação
Aplicações web que são 
predominantemente orientadas 
a páginas.
Aplicações que precisam de 
uma estrutura robusta, como 
APIs e aplicações complexas 
de UI.
Controle sobre o HTML
Facilita a citação rápida de 
páginas com menos 
configuração.
Permite um controle mais 
granular sobre o HTML gerado.
Reuso de Código
Menos foco na reutilização de 
componentes entre páginas.
Facilita a reutilização de lógica 
de negócios e componentes 
visuais.
Prototipagem Rápida
Ideal para prototipagem rápida 
devido à sua simplicidade.
Pode ser mais demorado 
devido à necessidade de definir 
mais estruturas.
Por função:
Ferramentas – Teste de usabilidade
Fonte: Autor
Função Ferramenta Detalhe
Simulação de 
Interações do 
Usuário
Selenium
Ferramenta de automação de testes para simular interações 
do usuário, suportando múltiplos navegadores e linguagens.
Playwright
Permite automatizar navegadores Chromium, Firefox e 
WebKit, oferecendo uma abordagem moderna para testes 
automatizados.
Coleta de 
Feedback
Microsoft
Clarity
Fornece uma plataforma gratuita para coleta de feedback
com funcionalidades de heatmaps e gravações de sessão.
Usabilia
Plataforma para coletar feedback dos usuários através de 
pesquisas e formulários, ideal para entender necessidades 
dos usuários.
SurveyMonkey
Ferramenta de pesquisa online que ajuda na coleta de 
feedback do usuário através de questionários 
personalizáveis.
Análise 
Comportamental
Google
Analytics
Oferece análise comportamental detalhada do usuário, 
incluindo páginas visitadas, duração da sessão e caminhos 
de navegação.
Application
Insights
Ferramenta de análise e monitoramento da Microsoft que 
integra facilmente com aplicações ASP.NET para fornecer 
insights do comportamento do usuário.
Heatpages
Microsoft
Clarity
Além de coletar feedback, oferece heatmaps para visualizaronde os usuários clicam, movem e rolam na página.
Qual é um benefício do uso de frameworks CSS como Bootstrap e Foundation em projetos 
ASP.NET?
a) Reduzir a segurança do projeto.
b) Aumentar o tempo de desenvolvimento.
c) Facilitar a criação de interfaces de usuário responsivas e visualmente atraentes.
d) Dificultar a manutenção do código.
e) Tornar o código menos organizado.
Interatividade
Qual é um benefício do uso de frameworks CSS como Bootstrap e Foundation em projetos 
ASP.NET?
a) Reduzir a segurança do projeto.
b) Aumentar o tempo de desenvolvimento.
c) Facilitar a criação de interfaces de usuário responsivas e visualmente atraentes.
d) Dificultar a manutenção do código.
e) Tornar o código menos organizado.
Resposta
Referências
 ANDREWS, H. OAI – OpenAPI-Specification, 2024. Disponível em: 
https://github.com/OAI/OpenAPI-Specification. Acesso em: 1º fev. 2024.
 HUNTER, K. Irresistible APIs: Designing web APIs that developers will love. 1st Edition. ed. 
[S.l.]: Manning, 2016.
 LAURET, A. The design of web APIs. 1. ed. [S.l.]: Manning, 2019.
 LEBLANC, J. Programming Social Applications: Building Viral Experiences with OpenSocial, 
OAuth, OpenID, and Distributed Web Frameworks. 1st Edition. ed. [S.l.]: Yahoo Press, 2011.
 RUBY, Sam; RICHARDSON, Leonard; AMUNDSEN, Mike. RESTful Web APIs: Services for a 
Changing World. [S.l.]: O'Reilly Media, 2013.
 SMARTBEAR. SWAGGER. OpenAPI Specification GitHub 
Repository, 2024. Disponível em: https://swagger.io/. Acesso 
em: 1º fev. 2024.
ATÉ A PRÓXIMA!