0

Curso: Fundamentos de Arquitetura de Sistemas - (Material Curso Dio)

#Arquitetura de Sistemas
Anderson Froes
Anderson Froes
Professores: 
Rafael Galleani
Jefferson Stachelski
Oswaldo Neto
Laureano Gilioli
Alex Cortes

Link para Download do Artigo:
https://drive.google.com/file/d/1YFlnBAbrcj_yo07t_IjTDofyANRLFm1x/view?usp=sharing

**Link GitHub: Professor Jefferson**
https://github.com/jeffhsta/fundamentos_arquitetura


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

**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.

**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.
- 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
- 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)

**Comparando os modelos Monolito e Microserviços (Objetivo 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


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.

**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 (Objetivo da Aula)**
**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.

**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)**
**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.
  - 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 (Objetivo da Aula)**
**Arquitetura é escolha**
Você tem total liberdade para escolher qual o Broker, Worker e Data Store usar.

**Prova de Conceito**
- GPS - App Android
- 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.

- 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

**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.

**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

**Normalização**
- 1ª ... 5ª - Formas normais
- 1ª, 2ª e 3ª - Mais comum

**SGDBR - SQL (Objetivos da Aula)**
**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
		 , 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
- 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**
- **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.

**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 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** 
- 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.
1
54

Comentários (1)

0
Rosemeire Deconti

Rosemeire Deconti

03/03/2021 11:42

Valeu ! Muito agradecida!

Um ser humano buscando conhecimento e sucesso em sua vida profissional

Brasil