Fundamentos de Arquitetura de Sistemas

Aprenda nesse curso sobre como funcionam as arquiteturas de softwares, seus conceitos, aplicações e
Descrição desenvolvimento de operações.

Produzido AndersonFroes - https://andersonfroes.github.io/Portfolio/

Formação com esse curso:

 Inter Java Developer

Professor:

Rafael Galleani

Jefferson Stachelski

Oswaldo Neto

Laureano Gilioli

Alex Cortes

Aulas:

Matéria

Capitulo 1 - Vantagens e Desenvolvimento de Web Services

Serviços Web Objetivos da Aula)

O que são Serviços Web

As vantagens de se utilizar Serviços Web

Tecnologias mais utilizados para desenvolvimento de Serviços Web

Serviços Web

Serviços Web ou Web Services são soluções para aplicações se comunicarem independente de linguagem,
softwares e hardwares utilizados.

Inicialmente Serviços Web foram criados para troca de mensagens utilizando a linguagem XML Extensible
Markup Language) sobre o protocolo HTTP sendo identificado por URI Uniform Resource Identifier).

Podemos dizer que Serviços Web são API's que se comunicam por meio de redes sobre o protocolo HTTP.

Vantagens

Linguagem comum, Integração, Reutilização de implementação, Segurança, Custos

Principais Tecnologias

SOAP, REST, XML, JSON

Fundamentos de Arquitetura de Sistemas 1

 Estrutura SOAP Objetivos da Aula)

O que é SOAP

As vantagens de se utilizar SOAP

O que é XML

Entender a estrutura de uma mensagem SOAP

SOAP

Simples Object Access Protocol

É um protocolo baseado em XML para acessar serviços web principalmente por HTTP.

Pode-se dizer que o SOAP é uma definição de como serviços web se comunicam.

Foi desenvolvido para facilitar integrações entre aplicações.

Vantagens

Permite integrações entre aplicações, independente de linguagem, pois usa como linguagem comum o XML.

É independente de plataforma e software.

Meio de transporte genérico, ou seja, pode ser usado por outros protocolos além do HTTP.

XML

Extensible Markup Language.

É uma linguagem de marcação criada na década de 90 pela W3C.

Facilita a separação de conteúdo.

Não tem limitação de criação de tags.

Linguagem comum para integrações entre aplicações.

Estrutura SOAP

O "SOAP Message" possui uma estrutura única que deve sempre ser seguida. SOAP Envelope, SOAP Header,
SOAP Body).

SOAP Envelope é o primeiro elemento do documento e é usado para encapsular toda a mensagem SOAP.

SOAP Header é o elemento onde possui informações de atributos e metadados da requisição.

SOAP Body é o elemento que contém os detalhes da mensagem.

Fundamentos de Arquitetura de Sistemas 2

 Entendendo o que é WSDL e XSD Objetivos da Aula)

O que é um WSDL

O que é um XSD

SOAP na prática

WSDL

Web Services Description Language.

Usado para descrever Web Services, funciona como um contrato do serviço.

A descrição é feito em um documento XML, onde é descrito o serviço, especificações de acesso, operações e
métodos.

XSD

XML Schema Definition

É um schema no formato XML usado para definir a estrutura de dados que será validada no XML.

O XSD funciona como uma documentação de como deve ser montado o SOAP Message XML que será
enviado através de Web Service.

Links usados na Aula:

http://www.soapclient.com/xml/soapresponder.wsdl

https://www.soapui.org/

Código Implementação em Python

from zeep import Client

client = Client('http://www.soapclient.com/xml/soapresponder.wsdl')
result = client.service.Method1(bstrParam1='oi', bstrParam2='tchau')
print(result)

Aprenda o que são REST, API e JSON Objetivos da Aula)

O que é REST

Vantagens em se utilizar REST

O que é API

Entendendo os métodos utilizados pelo REST

Estrutura de um REST

Estrutura de um JSON

REST

Representational State Transfer.

É um estilo de arquitetura de software que define a implementação de um serviço web.

Fundamentos de Arquitetura de Sistemas 3

 Podem trabalhar com os formatos XML, JSON ou outros.

Vantagens do REST

Permite integrações entre aplicações e também entre cliente e servidor em páginas web e aplicações.

Utiliza dos métodos HTTP para definir a operação que está sendo efetuada.

Arquitetura de fácil compreensão.

API

Application Programming Interface.

São conjuntos de rotinas documentados e disponibilizados por uma aplicação para que outras aplicações
possam consumir suas funcionalidades.

Ficou popular com o aumento dos serviços web.

As maiores plataformas de tecnologia disponibilizam APIs, para acessos de suas funcionalidades, algumas
delas são: Facebook, Twitter, Telegram, Whatsapp, GitHub...

Principais Métodos HTTP

GET - Solicita a representação de um recurso.

POST - Solicita a criação de um recurso.

DELETE - Solicita a exclusão de um recurso.

PUT - Solicita a atualização de um recurso.

JSON

JavaScript Object Notation

Formatação leve utilizada para troca de mensagens entre sistemas.

Usa-se de uma estrutura de chave e valor e também de listas ordenadas.

Um dos formatos mais populares e mais utilizados para troca de mensagens entre sistemas.

Veja sobre Integração com REST e métodos HTTP na prática Objetivos da Aula)

Integração com serviços REST

Métodos HTTP na prática

Código de estado HTTP

Código de Estado

Usado pelo servidor para avisar o cliente sobre o estado da operação solicitada.

1xx - Informativo

2xx - Sucesso

Fundamentos de Arquitetura de Sistemas 4

 3xx - Redirecionamento

4xx - Erro do Cliente

5xx - Erro do Servidor

Links usados na Aula:

https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Status

https://www.postman.com/

https://developer.twitter.com/en/docs/api-reference-index

https://requests.readthedocs.io/en/master/

Capitulo 2 - Conceitos de Arquitetura em Aplicações para Internet

Introdução a Arquitetura de Sistemas Objetivos da Aula)

Tipos de arquitetura.

Comparativo entre os tipos de arquitetura.

Gerenciamento de erros e volume de acesso.

Requisitos Básicos

Conhecimento básico sobre protocolo HTTP e Proxy.

Entendimento sobre RestAPI.

Conhecimento sobre Docker.

Saber programar.

Tipos de arquitetura

Monolito, Microserviços Vários Modelos)

Fundamentos de Arquitetura de Sistemas 5

 Comparando os modelos Monolito e Microserviços Objetivos da Aula)
Monolito

Pros - Baixa complexidade, Monitoramento simplificado.

Contras - Stack única, Compartilhamento de recursos, Acoplamento, Mais complexo a escalabilidade.

Microserviços 1

Pros - Stack dinâmica, Simples escalabilidade.

Contras - Acoplamento, Monitoramento mais complexo, Provisionamento mais complexo.

Microserviços 2

Pros - Stack dinâmica, Simples escalabilidade, Desacoplamento.

Contras - Monitoramento mais complexo, Provisionamento mais complexo .

Microserviços 3

Pros - Stack dinâmica, Simples escalabilidade, Desacoplamento, Menor complexidade.

Contras - Provisionamento mais complexo, Plataforma inteira depende do gerenciador de pipeline.

Gerenciamento de erros e volume de acesso Objetivos da Aula)

Gerenciamento de erros

Onde é mais complexo:

Processos assíncronos Microsserviços 2

Pipeline

Solução:

Dead letter queue

Filas de re-tentativas

Fundamentos de Arquitetura de Sistemas 6

 Link GitHub Professor Jefferson

https://github.com/jeffhsta/fundamentos_arquitetura

Capitulo 3 - A Arquitetura de Aplicações Móveis e Internet das coisas

Conceitos da Internet das Coisas Objetivos da Aula)

Introdução a Internet das Coisas

Arquitetura da Internet das Coisas

Estudo de Caso

Requisitos Básicos

Cloud computing

Protocolo de comunicação de rede

Processamento e armazenamento de dados.

Por que conectar as coisas?

Embutir sensores em objetos do dia-a-dia.

Coletar dados dos sensores.

Usar os dados para tomar decisões.

Exemplos

Smart Building, Smart Home, Wearables, Agriculture, Smart Transportation, RFID Suplly Chain, Energy
Efficiency.

Fundamentos de Arquitetura de Sistemas 7

 Computação Ubíqua

A computação ubíqua é a terceira onda da computação que está apenas começando. Primeiro tivemos os
mainframes compartilhados por várias pessoas. Estamos na era da computação pessoal, com pessoas e
máquinas estranhando umas às outras. A seguir vem a computação ubíqua a era da tecnologia 'calma' quando
a tecnologia recua para o pano de fundo de nossas vidas.

'As tecnologias mais importantes são aquelas que desaparecem. Elas se integram à vida do dia a dia ao nosso
cotidiano até serem indistinguíveis dele.'

Desafios da Internet das Coisas

Privacidade e Segurança.

Quantidade exponencial de dispositivos conectadas na rede.

Ser capaz de processar e armazenar uma enorme quantidade de informações.

Gerar valor a partir dos dados coletados.

Arquitetura da Internet das Coisas e Protocolo de Comunicação Objetivos da Aula)

Fundamentos de Arquitetura de Sistemas 8

 Atributos a serem considerados.

Baixo consumo de energia, Rede de dados limitado, Resiliencia, Segurança, Customização, Baixo custo.

Exemplos de Plataformas
Arduino

Plataforma de Prototipagem, Com entradas/saídas, Desenvolvedor escreve em C/C, Interface serial ou USB,
Shields.

Embarcados MCUs)

Microcontrolador de chip único, Sistema operacional real time, Embarcado, Uso industrial, médico, militar,
transporte.

Minicomputadores Raspberry Pi)

Computador completo, Hardware integrado em uma única placa, Roda SO Linux ou Windows, Uso doméstico e
comercial.

Fundamentos de Arquitetura de Sistemas 9

 Protocolo MQTT

Base na pilha do TCP/IP.

Protocolo de mensagem assíncrona M2M.

Criado pela IBM para conectar sensores de pipelines de petróleo a satélites.

Padrão OASIS suportado pelas linguagens de programação mais populares.

Flexibilidade dos tópicos e Cloud Objetivos da Aula)

Fundamentos de Arquitetura de Sistemas 10

 A flexibilidade dos tópicos
Detalhamento da URI

mqtt://broker.io/a6g319/gps/position

mqtt = Protocolo

broker.io = Broker

a6g319 = User Identifier

gps = Sensor

position = Information Type

Modelos de Subscribe

mqtt://broker/user/gps/position

mqtt://broker/user/gps/velocity

mqtt://broker/user/accelerometer

mqtt://broker/+/gps/position

mqtt://broker/user/gps/+

mqtt://broker/+/#

Níveis Diferentes de Qualidade de Serviços

QoS 0

Nível mínimo de menor esforço.

Sem garantia de entrega.

Mensagem não é retransmitida.

QoS 1

Garante que a mensagem foi entregue no mínimo uma vez ao recebedor.

Fundamentos de Arquitetura de Sistemas 11

 Mensagem pode ser retransmitida se não houver confirmação de entrega.

QoS 2

Garante que a mensagem foi entregue no mínimo uma vez ao recebedor.

Mensagem pode ser retransmitida se não houve confirmação de entrega.

Cloud

Grande e cada vez maior número de devices conectados.

TBs ou PBs de informações.

Potencial de escala global.

Estudo de Caso Objetivos da Aula)

Arquitetura é escolha
Você tem total liberdade para escolher qual o Broker, Worker e Data Store usar.

Prova de Conceito

GPS - App Android

Fundamentos de Arquitetura de Sistemas 12

 Broker - Eclipse Mosquitto

Worker - Node.js

Data Store - Banco de Dados MySQL

Mínimo Produto Viável

Usando opções melhores para a aplicação (mais robustas).

GPS - GPS Embarcado

Broker - HiveMQ

Worker - Akka Scala JVM

Data Store - Banco de Dados noSQL

Solução com a Nuvem Cloud)

Usando produtos da Amazon.

GPS - GPS Embarcado

Broker - AWS IoT Core

Worker - AWS Kinesis Firehose

Data Store - AWS S3

IoT na prática

GPS MQTT → Broker MQTT → Worker TCP → Cache (socket.io)

Armazena todas as posições geográficas.

Fundamentos de Arquitetura de Sistemas 13

 GPS Embarcado → AWS IoT Core → AWS Data Stream → AWS Lambda → AWS ElasticCacheRedis
Armazena somente a ultima posição geográfica.

AWS ElasticCache Redis → AWS EC2 → FeathersJSBackend → Dashboard

Forma de acessar as informações para mostrar para o cliente.

Capitulo 4 - Arquitetura de Dados Essencial

Conceitos Introdutórios e o que é um Banco de Dados Objetivos da Aula)

Conceito de Dados.

O que é um Banco de Dados.

Banco de Dados Relacionais.

Exemplo Prático.

Requisitos Básicos

Conhecimentos de Lógica de Programação.

Conhecimentos de Tipos de Dados.

Conhecimentos de Operadores Lógicos.

Dados

Valores, Ocorrências.

Importância

Dados → Informação → Conhecimento.

Dados Digitais

Lorem Ipsum 00 99991111 120,19

Velit Esse Cillum 55 99992222 1.300,19

Fundamentos de Arquitetura de Sistemas 14

 Modelo Sustentável

Estruturação → Durabilidade → Velocidade → Controle de Acesso → Isolamento

O que é um Banco de Dados

Abstração

SGDBs

Linguagem de Definição.

Linguagem de Manipulação.

Dicionário de Dados

Modelos de Banco de Dados

Flat, Hierárquico, Relacional, (etc...)

Redes - Grapho, Orientado a Objetos, Objeto-Relacional, Big Data.

Fundamentos de Arquitetura de Sistemas 15

 Banco de Dados Relacionais Objetivos da Aula)
SGDBR - RDBMS

Formado por Tabelas, Registros/Tuplas, Colunas, Chave PK/FK

Modelagem

Modelo conceitual - MER

Modelo lógico - Implementação

Fundamentos de Arquitetura de Sistemas 16

 Normalização

1ª ... 5ª - Formas normais

1ª, 2ª e 3ª - Mais comum

SGDBR - SQL Objetivos da Aula)

Fundamentos de Arquitetura de Sistemas 17

 SQL

DDL - Data Definition Language

DML - Data Manipulation Language

DQL - Data Query Language

Comando DDL

CREATE TABLE Cliente

(
Codigo NUMERIC(10) NOT NULL PRIMARY KEY,
Nome VARCHAR(50) NOT NULL,
Telefone VARCHAR(15)
)

Comando DML

INSERT INTO Cliente (Codigo, Nome, Telefone)

VALUES (1, "Lorem ipsum","(88) 999 9999")

DELETE FROM Cliente

WHERE Codigo = 1

UPDATE Cliente
SET Nome = "Lorem Ipsum"
WHERE Codigo = 1

Comando DQL

SELECT Codigo,
Nome
FROM Cliente
<WHERE> Codigo = 1
<GROUP BY> Profissao
<HAVING> Count(1) > 0
<ORDER BY> Nome, Codigo

Query

SELECT Codigo,
Nome
FROM Cliente
WHERE Codigo = 2
UNION
SELECT Codigo,
Nome
FROM Cliente
WHERE Nome = "Lorem Ipsum"

SELECT Quantidade
, Valor
, Descricao
FROM Item_venda
JOIN Produto
ON Codigo = Cod_Produto
WHERE Valor > 5

Funções de Conjunto

SELECT SUM(ven.Quantidade) AS QTotal

, SUM(ven.Valor) AS VTotal

Fundamentos de Arquitetura de Sistemas 18

 , pro.Descricao
FROM Item_venda ven
JOIN Produto pro
ON pro.Codigo = ven.Cod_Produto
WHERE ven.Valor > 5
GROUP BY pro.Descricao
HAVING SUM(ven.valor) >= 10

Index

SELECT ...
WHERE Profissao = 1
AND Genero = "M"

Transactions Objetivos da Aula)

Transactions

Inicio = Insert, Delete, Update

Resolução = Commit, Rollback

Fim = Novos Dados ou Dados Originais

ACID - Transactions

Atomicidade - Todas operações executadas com sucesso. Commit ou Rollback).

Consistência - Unicidade de chaves, restrições de integridade lógica, etc...

Isolamento - Várias transações podem acessar simultaneamente o mesmo registro (ou parte do registro).

Durabilidade - Depois do Commit, mesmo com erros, queda de energia, etc. As alterações devem ser
aplicadas.

SGDBR na prática Objetivos da Aula)

SGDBs-R

Banco de Dados Pagos

Oracle, Microsoft SQL Server, IBM DB2

Banco de Dados Gratuitos

PostgreSQL, MySQL, SQLite

Link Download PostgreSQL https://www.enterprisedb.com/downloads/postgres-postgresql-downloads

Criando Banco de Dados Objetivos da Aula)

Criar um Banco de Dados usando PostgreSQL Versão Windows)

Abrir o Programa

Clicar com o botão direito em cima de Server e ir em Create Server

General/Name = Colocar um nome

Connection/Host = localhost ou ip remoto

Fundamentos de Arquitetura de Sistemas 19

 Port = 5432

Código usado na Aula PostgreSQL

CREATE TABLE cliente

(codigo NUMERIC(10) NOT NULL PRIMARY KEY,
nome VARCHAR(100) NOT NULL,
telefone VARCHAR(15)
)

INSERT INTO cliente (codigo, nome, telefone)

VALUES (1,'Lorem Ipsum', '(99) 9999 9999')

COMMIT

SELECT * FROM cliente

DELETE FROM cliente

COMMIT

SELECT * FROM cliente

Capitulo 5 - Conceitos de Responsividade e Experiência do Usuário

Tópicos Introdutórios sobre UX e UI Objetivos da Aula)

Introduzir o aluno nos conceitos de UI/UX Design.

Explorar os principais pontos de responsividade.

Desmistificar pontos críticos do design de interfaces.

Requisitos Básicos

Noções básicas de Design

Noções básicas ferramentas de Design Photoshop, Illustrator, Adobe XD

Interesse em desenvolver produtos digitais Websites e Interfaces digitais)

Fundamentos UI/UX

Briefing, Imersão e Unpack

Um grande projeto começa sempre com um briefing bem feito. É no briefing que se entende o objetivo de um
projeto, e o objetivo é fundamental para entender o porquê daquele trabalho, e se a solução inicialmente
imaginada irá gerar o resultado desejado.

Através da imersão, procuramos conhecer o problema. O contexto, o público, os stakeholders, as premissas, as

regras de negócio, o histórico, a estratégia, as demandas, as reclamações, etc.

A imersão é a base de conhecimento necessária para que se comece a delinear uma solução.

Geralmente em uns Sprint Design, o primeiro dia é conhecido como "Unpack" e é nessa etapa que podemos
ouvir várias informações diferentes, e é fundamental para o sucesso do projeto.

Desenvolvedores sabem de coisas que os designers não sabem, os stakeholders sabem de coisas que os
product managers não sabem, e assim por diante. Isso literalmente abre todas as hipóteses possíveis para o
projeto.

Wireframes, Grids e Hierarquia

Estrutura - Como os objetos devem ser posicionados no layout?

Conteúdo - Como serão colocados os conteúdos para ajudar na usabilidade e interatividade do usuário?

Hierarquia Informativa - Como o conteúdo será organizado e apresentado?

Funcionalidade - Como será a usabilidade em cima da interface? Em relação ao comportamento, como interagir
com o usuário? E como ele se comporta?

Grids, Alinhamento e Espaçamento

Fundamentos de Arquitetura de Sistemas 20

 Grid - Podemos mais facilmente determinar o fluxo de leitura que queremos o nosso leito tenha. Nos ajuda a
projetar em proporções harmoniosas balanceando os pesos dos elementos gráficos do layout. Permite criar
peças mais eficazes. (lembre-se sempre de dar atenção ao espaçamento e alinhamento tanto de textos quanto
de elementos da sua interface, focando sempre na responsividade desses elementos.)

Luzes, Sombras, Consistência e Padrão

Luzes e Sombras - As luzes e sombras são os recursos que garantem movimento, profundidade, sobreposição
e contraste em sua interface. É importante para separar elementos, menus, demarcar áreas importantes e
principalmente indicar ações possíveis em seu projeto.

Consistência e padrão - Lembre-se que o seu projeto deve manter o mesmo tom de redação UX Writer), o
mesmo padrão visual Design System) e a mesma consistência em diversos devices UX Design).

Cores da Interface Objetivos da Aula)

Cores

Saber usar as cores em um projeto não é uma tarefa fácil, principalmente quando se está iniciando na área de UI
Design. Uma dica importante é conhecer um pouco sobre a psicologia das cores para entregar algo factível ao
cliente. Aqui vamos falar sobre algumas regras e teorias que poderão te ajudar a iniciar e não fazer feio diante de
um cliente.

Cores - UI Primárias

Paleta Primária - Estas são as cores mais importantes de todo o sistema. A paleta primária é composta pelas
cores principais da marca, tons de cinza e, geralmente , o azul flat. Azul Primário, Laranja Primário, Cinza
Primário.)

Cores - UI Secundárias

Paleta Secundária - Além das cores primárias, suas variações, e tons de cinza, todo designer de interfaces
precisa, também, escolher as cores que já têm, por padrão, um significado próprio. Por exemplo, a cor
vermelha é comumente associada a erro, o verde a sucesso e o amarelo a avisos importantes. Essas cores,
chamadas "Cores de Feedback" são essenciais dentro de uma interface porque já trazem um significado
implícito que já faz parte da cultura do usuário.

Cores - Gradiente

Gradiente ou Degradê - A volta do uso do gradiente em 2017, trouxe mais elegância para as interfaces vem
sendo aplicada em diversas formas, como no redesign de logos como do Instagram, por exemplo e de maneira
muito forte nas UI User Interface) tanto Web como Mobile. Além do maior impacto visual, estimulado o usuário,
o degradê proporciona sensações de dinamismo e movimento, visto que as interfaces precisam ser amigáveis
e intuitivas o uso das cores pode ser vista como tentativa de aproximação e melhoria na experiência do
usuário.

Tipografias
Escolher uma tipografia é como escolher uma roupa, pense no que as roupas podem dizer sobre você: com base
no que você veste, as pessoas podem criar conceitos certeiros ou equivocados sobre seu estilo, sua
personalidade, situação econômica, idade ou impressão que quer causar.
Tipos de Fonte

Para simplificar aqui, vamos focar em 4 categorias básicas que serão úteis para entender melhor do assunto e te
deixar mais seguro para escolher fontes para projetos, e discutir suas escolhas com outras pessoas.

Serifadas - Fontes serifadas apresentam pequenos traços ou prolongamentos no final de suas letras. Elas
geralmente representam os conceitos de seriedade e tradicionalidade.

Sem Serifa (sans-serif) - Estas fontes não tem as linhas extras no final das letras. Por esse motivo, são
geralmente consideradas mais modernas e dinâmicas.

Cursivas (script) - Abrange as fontes manuscritas ou caligráficas passando por vários estilos diferentes, de
elegante, pessoal e exclusivo a divertido e descontraído.

Decorativas ou fantasia (display) - Fontes destinadas a chamarem sua atenção. Elas geralmente são mais
inusitadas do que práticas e devem ser usadas em pequenas doses, para efeito e propósito específicos.

Fundamentos de Arquitetura de Sistemas 21

 Tamanho e Peso

Se você fez trabalhos para a escola ou faculdade provavelmente se lembra daquelas regrinhas da ABNT para
diagramação de texto como tipo Times New Roman, tamanho 12, espaçamento entrelinha 1.5. E isto é bom. Para
um papel. O Computador não é um papel. O tamanho padrão de texto de um browser é 16px. Quando lemos um
livro ou um trabalho acadêmico seguramos o papel a uma distância bem próxima dos olhos. Quando mexemos em
um computador desktop ou notebook a distância em relação a tela é muito maior. Por isto é necessário que o texto
esteja em um tamanho confortável em relação a esta distância.

Peso - O peso é a grossura dos caracteres de um tipo. Este atributo é definido pela propriedade font-weight. Pode
ser normal, bold (negrito), bolder (mais negrito) e lighter (mais fino). Ou ainda, se estas opções estiverem
disponíveis na fonte que você escolheu, variar entre um valor numérico de 100 a 900.

Sendo a correspondência:

100 - Thin

200 - Extra Light Ultra Light)

300 - Light

400 - Normal

500 - Medium

600 - Semi Bold Demi Bold)

700 - Bold

800 - Extra Bold Ultra Bold)

900 - Black Heavy)

Componentes da Interface do Usuário Objetivos da Aula)

Iconografia
A palavra ícone vem do Grego "eikon" e significa imagem. Muito antes do surgimento do design de experiência, os
ícones já eram usados como ferramenta de comunicação. Seu objetivo era comunicar eficientemente uma
mensagem através de uma linguagem visual comumente compreendida. Os primeiros ícones eram imagens de
objetos com os quais os usuários estavam familiarizados, como objetos de escritório e programas de software.

Como utilizar os ícones na UI

Mantenha os ícones simples - Simplifique o máximo possível e evite elementos desnecessários. Eles devem
traduzir de forma simples a informação que precisam passar no ambiente em que serão usados.

Combine os ícones com palavras - As pessoas processam mais rapidamente recursos visuais do que textos,
especialmente quando já conhecem os significados desses símbolos. As palavras esclarecem a mensagem de
um ícone e dão às pessoas confiança nos resultados de suas interações. Mesmo para ícones universais, incluir
um texto é geralmente mais seguro.

Escolha ícones familiares - A compreensão de um ícone pelo usuário é baseada em suas experiências
anteriores. Ao decidir incluir ícones na sua interface, pesquise primeiro e se familiarize com o que está sendo
usado em plataformas do mesmo segmento.

Utilize espaçamento - Tenha sempre pelo menos 1cm x 1cm no mínimo em torno do ícone para legibilidade e
fácil toque em celulares. Quando grandes o suficiente, os ícones funcionam bem em telas mobile onde o
espaço é limitado.

Consistência - Concentre-se em elementos comuns para usar em seus ícones. A primeira coisa a considerar é
a paleta de cores. Não mais do que três cores para manter o design clean. Não tenha medo de repetir
elementos em todos os seus ícones. Repetição ajuda os usuários a identificar ícones e associá-los a uma ação.
O peso e estilo do ícone também são decisivos na hora de manter a consistência.

Utilizando imagens

Como diz o ditado, uma imagem vale mais que mil palavras. As imagens podem ser usadas de maneira eficiente
para capturar a atenção do usuário e diferenciar seu produto. Uma única imagem pode transmitir mais para o
observador do que um bloco de texto elaborado. Além disso, as imagens podem atravessar as barreiras

Fundamentos de Arquitetura de Sistemas 22

 linguísticas, algo que um texto não conseguiria. Imagem NÃO pode ser tratada como "decoração", ela tem o poder
de fazer ou quebrar a experiência do usuário UX.

Contexto relevante - Os usuários reagem ao visual mais rápido do que um texto, com isso em mente
certifique-se de que o seu conteúdo coincide com os recursos visuais de apoio. Você deve selecionar as
imagens que tem uma forte relação com o seu produto e criar um contexto relevante.

Relevância - O objetivo do seu site/aplicativo não é exibir imagens, mas as imagens podem mostrar o
propósito do seu produto. Use um número limitado de recursos visuais no design, mas use aquela que
realmente vai capturar a atenção do usuário.

Guias de Estilo - Manuais

Manual da marca

Criado pelo designer, ou uma equipe de designer, que criaram a identidade visual, ele determina a correta
aplicação da marca em diferentes suportes (gráfico, web, etc). É um guia que contém todas as informações
da marca, fornecendo todas as especificações, recomendações e normas fundamentais para a correta
utilização da identidade visual.

O objetivo é preservar a uniformidade e coerência de comunicação da marca, mantendo suas propriedades

visuais, identificação e reconhecimento da marca independentemente da plataforma em que ela for
aplicada.

Como aplicar os conceitos em projetos Objetivos da Aula)

Responsividade

A tecnologia mudou o mundo e continua o fazendo constantemente. A internet e o altíssimo nível de

desenvolvimento de tecnologias disponíveis transformara o nosso modo de acessar informações e de nos
relacionar com o mundo.

O Brasil é um dos países que mais cresce em todo o mundo quando o assunto é uso de smartphones, e
segundo estudo publicado pela Fundação Getúlio Vargas FGV, alcançou a marca de um smartphone por
habitante em 2017.

Falando de comportamento de consumo, já está comprovado que o futuro do e-commerce terá como principal
responsável o crescimento das compras feitas através de celulares - que já até ganhou um nome, o m-
commerce (mobile-commerce).

Portanto, é importantíssimo para qualquer empresa que tenha como foco oferecer para seu consumidor mais
facilidade e conforto no momento da experiência de compra, ter um site adaptado para a tela de seu celular ou
para qualquer outra tela que ele deseje utilizar - como é o caso dos tablets. Isso é responsividade!

Através da responsividade de um site, que deve levar em conta a usabilidade, ou seja, ter um site realmente
adaptado para que as pessoas consigam acessar e navegar nele com tranquilidade usando apenas uma mão,
uma empresa pode oferecer para seu cliente:

Facilidade e Conforto de acesso.

Boa Experiência de uso.

Sofisticação ao usuário.

Fidelização do usuário.

Ferramentas Importantes:

Google resize:
https://material.io/resources/resizer

Window resize:

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=pt-BR

Acessibilidade:
Empatia e Inclusão

Fundamentos de Arquitetura de Sistemas 23

 Quando falamos em desenvolver um produto, o foco principal durante o desenvolvimento dele são seus
usuários, as pessoas que vão utilizar o sistema com mais frequência. Por esse motivo, fazemos pesquisas com
essas pessoas para saber suas dificuldades e receios com relação a tarefa que vai ser executada utilizando o
produto. Nessas pesquisas, procuramos entender as tarefas feitas por elas nos colocando em seus lugares e
por isso que a empatia é tão importante.

Compreender a acessibilidade significa que podemos construir serviços que funcionam para todos,
independentemente da necessidade de seu acesso. Todo projeto exige uma pesquisa para que se conheça o
usuário, é importante saber para quem se está projetando, se os usuários possuem, por exemplo, transtorno do
espectro autista, se são usuários deficientes auditivos ou surdos, com dislexia, com baixa visão, deficiência
física, para usuários de leitores de tela, dentre outros.

Prototipagem

Utilidade - A prototipagem é útil, por exemplo, quando é necessário melhorar a experiência dos usuários UX,
atualizar modelos de negócios e criar novos produtos ou serviços. Em um projeto de longa duração, pode ser
refeita ao longo do processo. Depois dos testes, é possível que seja necessário reenquadrar os protótipos e
retestá-los.

Fidelidade do protótipo - Um protótipo pode ser desde uma representação conceitual ou análoga da solução
(baixa fidelidade), passando por aspectos da ideia, até a construção de algo o mais próximo possível da
solução final (alta fidelidade).

Portifólio, Clientes e Apresentação

O portfólio é uma das principais ferramentas de qualquer profissional liberal. É através dele que podemos
mostrar o nosso trabalho a um potencial empregador ou cliente. Além disso, ter um portfólio pode ajudar a
passar uma imagem mais profissional. Lembre-se de inserir em seus cases do portfólio, o desafio trazido pelo
cliente, a solução sugerida a ele e também como você chegou a essa solução, além do projeto finalizado.

Uma boa apresentação garante novos clientes e demonstra seu profissionalismo.

Fundamentos de Arquitetura de Sistemas 24