Web Design e Front End - Definição e conceitos

Programador Web
Prof:Gelvazio Camargo

Elementos da Competência
• Web Design(UI Desing e UX Design)
• Front-end: conceitos, interface gráfica, limites de
atuação profissional
• Licença de uso.

Web Design
Conceito
Por muito tempo estava explícito quem era o web design e seu papel.
Porém com o passar do tempo, esta função com este nome deixou de
existir e deu nome á outras 2 funções que são:
UX Designers (Designer de Experiência do Usuário)
UI User Interface (Interface do Usuário)

UX Designers (Designer de Experiência
do Usuário)
O que é UX?
A forma como um usuário experimenta um produto ou serviço é de
responsabilidade da equipe de UX Designers (Designer de Experiência do
Usuário).
O UX Design abrange todos os aspectos da interação do usuário final com
a empresa, seus serviços e produtos. Isso significa identificar e projetar
uma solução que atenda a necessidade dos usuários.
Portanto, a pessoa de UX deve conhecer o usuário a fundo, e isso
somente é possível através de informações reais coletadas de usuários
por meio de testes e pesquisas. O trabalho de UX Designers, como
podemos ver, é bastante multidisciplinar, e navega entre marketing,
pesquisa e desenvolvimento.

Habilidades de um UX designer
O UX Designer é o profissional responsável pela estética de uma
plataforma digital, com o objetivo de proporcionar uma melhor
experiência ao usuário, baseada em seu comportamento, seja por meio
da usabilidade, utilidade ou conveniência oferecidas na interação com o
produto.
Conhecimentos básicos necessários:
➜ Arquitetura da informação: determina a estrutura e o modo como as
informações são inseridas no sistema.
➜ Projeto de interação: organiza a interação com o cliente.
➜ Fluxos das tarefas: mostra o passo a passo de todas as tarefas
realizadas pelos usuários, deixando as ações mais fluidas.
➜ Wireframes: envolve a composição do site (botões, ícones, entre
outros).
➜ Wireflows: traça todo o caminho que o usuário pode percorrer no site
ou aplicativo.
➜ Sitemaps: é o mapa do site, com os detalhes e principais informações
de suas páginas e as relações entre elas.
Além disso, o UX designer também realiza testes de usabilidade do site e
a mensuração de resultados.

UI User Interface (Interface do Usuário)
O que é UI?
User Interface refere-se ao ponto de contato visual específico ou ativos
com os quais o usuário interage: a aparência, sensação e interatividade do
produto digital.
O Designer UI, equipado com toda a orientação de pesquisa de UX, traduz
para uma interface através da tipografia, cores, espaços, botões, grids,
ícones, etc. Então, UI desempenha um grande papel no UX Design, pois é
ele quem cria a interação no produto digital.

Habilidades do UI Designer
O UI Designer é responsável por criar o design criativo, por exemplo,
de um aplicativo e fornecer a melhor experiência ao usuário, por meio de
todo o planejamento feito em UX.
Se esse profissional quer gerar alto valor para o público, aumentar as
chances de reter e encantar clientes, fortalecer a marca e aumentar as
conversões, ele precisa ter conhecimento e habilidades em alguns
softwares:
➜ Adobe XD;
➜ Sketch;
➜ Figma;
➜ Photoshop e Illustrator.
A partir dessas ferramentas, ele consegue fazer os esboços iniciais,
wireframes ou protótipos, selecionando as cores e demais elementos que
farão com que a interface seja amigável e usável para os usuários.

Front end
Conceito
O desenvolvimento front-end da web é o desenvolvimento da
interface gráfica do usuário de um site, por meio do uso de
HTML, CSS e JavaScript, para que os usuários possam visualizar
e interagir com aquele site.
Em resumo, o front-end utiliza a interface de usuário
projetada pelo Designer UI para desenvolver as telas em que o
usuário irá interagir ao longo do uso da aplicação respeitando
todo o layout definido e permitindo ao usuário a real utilização
do produto digital.

Limite entre front-end e back-end?
Até um certo tempo atrás, essa coisa de limites
entre back-end e front-end sempre foi uma
polêmica.
Até que veio a era das APIs.
Quando todo mundo começou a trabalhar com
APIs, microserviços, webservices e todas as outras
tecnologias relacionadas, foi aí que a coisa começou
a se organizar.

Com a criação de APIs há um limite claro entre
back-end e frot-end.
O back-end cria os endpoints e o front-end lê as
informações contidas nesses endpoints e faz o que tem de
ser feito. O único acordo que as duas partes devem fazer é
como a estrutura desses dados será exposta.
Sendo assim, o que ocorreu foi uma reformulação do
perfil do desenvolvedor front-end.
Um dev que manja MUITO de interface. Que domina CSS
como ninguém e todos os truques de JS para manipular
elementos no DOM com CSS, além de conseguir lidar com o
designer discutindo soluções de layout;
E outro profissional que tem uma grande facilidade para a
parte funcional da coisa.

Interface Gráfica
Quando falamos em “interface gráfica” estamos nos
referindo à parte visual de um software ou aplicação que
disponibiliza para o usuário uma forma de enviar
comandos (clicar em links de um menu, digitar um termo
de busca etc.) que serão traduzidos em código para fazer
o software executar alguma ação.
Ou seja, é tudo o que você, como usuário, vê e/ou
interage com.

Limite de atuação profissional.
O desenvolvedor front-end é responsável pela experiência do usuário
dentro de uma aplicação web, é ele quem vai desenhar e desenvolver
as páginas com as quais, posteriormente, o usuário irá interagir.

FRONT-END
Na web, o front-end trabalha no lado do cliente (client side), no navegador.
Os links, as imagens, os botões e até mesmo este texto que você está lendo são o resultado da
mistura de códigos escritos em duas linguagens: o HTML e o CSS. Sem nos alongar muito no
assunto, o HTML (Hyper Text Markup Language) define o que é o que dentro de uma página e
ajuda o navegador saber como exibir os conteúdos.
O CSS (Cascade Style Sheet) é utilizado para especificar estilos visuais (margem, tipografia, cores
etc.) para cada elemento ou grupo de elementos definidos com o HTML.
Geralmente, essas duas linguagens têm um aliado para tornar os sites mais interativos: o
JavaScript.
Essa outra linguagem de programação permite que criemos carrosséis de imagens, janelas pop-
up, filtros de conteúdo e até animações. Costumamos dizer que o HTML é o esqueleto e o CSS é
o que deixa as coisas “bonitas”, dando estilo a elas. O JavaScript, por sua vez, traz vida para esse
corpo.

Back-end, o contrarregra
O back-end é como se fosse o contrarregra por trás da interface gráfica.
Enquanto o front-end cuida do visual e da interação entre o usuário e a
interface, o back-end está agindo nos bastidores, buscando em um servidor as
informações, dados e arquivos que serão exibidos no navegador.
Por exemplo, em um site mais complexo, como uma rede social, não basta ter o
visual das páginas sem as informações que devem aparecer em cada uma.
Essas informações estão armazenadas em um banco de dados que precisa ser
consultado e manipulado para que as coisas funcionem bem.
É aí que chegamos no tal back-end…

Back-end
Simplificando as coisas, podemos dizer que uma página é capaz de
funcionar sem o back-end, mas ela é mais limitada, o que não é necessariamente
ruim. Sites institucionais, por exemplo, não precisam dessa complexidade, e atendem
bem o objetivo a que se destinam.
O back-end também é conhecido como server side (ou lado do servidor) e é
composto, normalmente, de três partes: um servidor, uma aplicação e um banco de
dados.
Servidor: é a máquina que armazena fisicamente os arquivos e os “serve”, isto é, os
envia ou salva novos dados, conforme requisições.
Aplicação: é o programa propriamente dito, uma sequência de códigos escritos pela
desenvolvedora para executar a função para que foi desenhado.
Banco de dados: é onde os dados estruturados são armazenados e facilmente
encontrados e alterados. Dados de cadastro, por exemplo, ficam em bancos de dados.
Um dos melhores servidors de banco de dados free no mundo é o postgresql, temos
tambem o Mysql, o sqlite, etc.
Mas temos tambem outros pagos, como oracledb-Oracle, sqlserver - Microsoft,
MongoDB, etc.

O que é programar?
Existem várias linguagens de programação que podemos empregar
para conversar com os computadores.
Algumas das linguagens mais populares, como Python, Ruby ou PHP,
podem ser utilizadas para escrever essas aplicações que estabelecem a
comunicação do navegador com o servidor, do servidor com o banco de
dados, e como as informações que buscamos ou inserimos em uma
página na web serão manipuladas e armazenadas nesse banco de dados.

Front-end X Back-end
Um tópico de discussão entre desenvolvedores é a complexidade que envolve
cada ponta da linha que define todos esses níveis de comunicação: usuário-
navegador, navegador-servidor, servidor-banco de dados.
Para alguns, desenvolver códigos em HTML, CSS e JavaScript para o front-end
é mais fácil que elaborar códigos para o back-end, usando outras linguagens
como Python, Ruby, PHP ou ainda C#, Swift, etc.
Na verdade, essa ideia é infundada. Hoje em dia, o HTML, que já chegou à
quinta versão (o HTML 5), e o CSS, que está na terceira (CSS 3), possibilitam a
criação de conteúdo muito mais complexo do que antigamente.
Além disso, manipular essas linguagens para criar páginas com maior apelo
visual não é uma tarefa tão descomplicada como pode parecer.

A utilização do JavaScript tem evoluído muito.
Hoje, ele é utilizado também por desenvolvedores back-end em ferramentas
como o Node.js e em banco de dados como o MongoDB.
Além disso, para trabalhar como desenvolvedor front-end, são cada vez mais
exigidos conhecimentos em User Experience (UX), ou Experiência do Usuário,
que é a área que se ocupa em trazer uma boa experiência para o usuário a
pessoa, de maneira que elae tenha sentimentos positivos em relação ao
produto ou serviço.

E o desenvolvimento back-end não fica pra trás quanto ao rigor da demanda
por melhores aplicações.
Existem muitos frameworks em constante atualização para fazer com que as
linguagens server side trabalhem com melhor performance, ou seja, sejam
mais rápidas e eficientes.

O melhor dos dois mundos:
Em vez de discutir, não seria melhor se cada lado aprendesse como o outro
funciona para todos trabalharem melhor, juntos?
Pois é, aí entram os desenvolvedores full-stack.
Normalmente, são desenvolvedores back-end que buscam entender e se capacitar
para poder criar páginas HTML e plugins em JavaScript ou desenvolvedores front-
end que trabalham com administradores de conteúdo como o WordPress ou Joomla
e procuram aprofundar seus conhecimentos nas linguagens com as quais essas
ferramentas foram criadas.

O importante, no final das contas, é estar seguro daquilo que se quer
saber e manter o foco.
Em um mundo ideal, nós seríamos capazes de programar em todas
as linguagens possíveis, mas, na realidade, é melhor saber fazer bem
aquilo que nos propusemos do que ser um programador que faz tudo
“mais ou menos”.

Licença de uso
O que é e como funciona uma licença de software?
O licenciamento de software funciona como um tipo de contrato
estabelecido entre o fabricante (desenvolvedor) e a pessoa ou empresa que o
usará.
Nele, podem existir restrições para downloads, instalações, manutenções,
alterações (mudanças no código-fonte), uso de certas funcionalidades e
distribuição.
O objetivo da licença é proteger o proprietário com direitos autorais
(copyright).

Principais tipos de licenças
Licença para aquisição perpétua:
Quem recebe esse modelo de licenciamento ganha direito de uso vitalício
do produto.
Isso pode ser bom, mas limita o usuário em processos de atualizações e
manutenções, podendo torná-lo ineficiente no futuro.

Licença para uso temporário:
Nesse tipo de licença, o usuário ganha uma permissão bem limitada
para usar o software.
Só é autorizada a sua instalação em apenas um ou alguns
computadores e por um tempo previamente acordado.
Essa licença inclui atualizações por parte do desenvolvedor, mas os
custos com manutenções são de responsabilidade do usuário.

Licença para software livre:
Nessa modalidade de licenciamento, a pessoa física ou jurídica ganha uma
permissão ampla de downloads, instalações, estudo do código-fonte,
modificações das funcionalidades e distribuições.
Ou seja, o usuário tem total liberdade para adaptar o software às necessidades
pessoais ou do negócio.
Porém, isso não significa que ele será gratuito.
Se você quiser um programa realmente livre, precisa de uma garantia legislativa
chamada “Copyleft”, que livra o usuário de qualquer restrição atribuída pelos
direitos autorais.
Mesmo assim, ele não será considerado de domínio público, mantendo certas
limitações ligadas ao direito de propriedade intelectual.

Licença Open Source:
Os softwares Open Source, também conhecidos como “programas de código
aberto”, têm licença de uso, mesmo que isso não envolva valores por suas
liberações.
Nesse modelo de autorização, a empresa fica isenta dos custos ligados ao
desenvolvimento.
Entretanto, ela pode ter que arcar com o pagamento de algumas taxas de
manutenção, principalmente quando for hospedar a aplicação nos servidores.
A grande vantagem aqui é a liberdade que o usuário ganha para personalizar as
funcionalidades de acordo com as suas necessidades, tendo acesso total ao código-
fonte.
Porém, é bom ficar atento às restrições de uso, que o diferem do software livre.

Licença para aluguel:
O modelo de licenciamento para aluguel de softwares também é muito
comum entre as empresas.
A sigla ASP (Application Service Provider), que significa “Provedor de Serviços
de Aplicativos”, é usada para nomear a permissão.
É bem parecido com a licença de uso temporário, mencionada acima. A
diferença é que o programa não é hospedado nos servidores e computadores
da empresa.
Ele fica na nuvem e o usuário paga uma taxa fixa mensal para usar o sistema
em sua totalidade (funcionalidades e desempenho).

Licença para SaaS:
SaaS é a sigla para “Software as a Service” e significa “software como serviço”, em
português.
Esse tipo de licença é parecido com o de uso temporário e o de aluguel, mas se
diferencia por vários aspectos.
O sistema fica hospedado em uma plataforma na nuvem, eliminando a
necessidade de downloads e instalações.
A empresa paga uma mensalidade correspondente ao número de usuários ou
recursos que vai utilizar no software.
Enquanto o provedor ou empresa desenvolvedora fica responsável por todas as
funções de atualização, manutenção, disponibilidade e segurança.
O serviço é contratado por meio de assinatura e o contrato é baseado no SLA
(Service Level Agreement), onde ficam especificados todos os direitos e
responsabilidades de ambas as partes.
Ele é ideal para as empresas que vendem soluções em forma de softwares.

Qual é o tempo médio de validade para as licenças?
Toda licença de software possui uma data de validade, exceto a de uso perpétuo.
Nesta, a permissão é anulada sempre que alguém ferir alguma cláusula do
contrato, desrespeitando os termos de utilização. Algumas licenças precisam ser
renovadas a cada atualização do sistema para que o usuário tenha acesso às novas
versões. Já outras possuem renovação automática.
O mais importante aqui é descobrir o tipo de licença utilizado pelo fornecedor
do seu software e ficar atento às mudanças realizadas nos termos de uso, além de
verificar se está acessando as versões mais atualizadas do sistema.
No setor de TI, há uma grande preocupação com o contrato de prestação de
serviços e poucos gestores prestam atenção na licença de software, com os termos
de uso, à qual estão sendo submetidos. Você, como profissional da área, tem o
dever de mudar isso, conscientizando fornecedores e usuários sobre o assunto.

Termo de uso
A comercialização do software pertence apenas ao proprietário ou distribuidor
autorizado.
A aquisição do programa não concede necessariamente aos usuários o direito de
uso extensivo da obra, pois o uso do produto estará vinculado aos termos da
licença.
O entendimento legal é que uma licença de software possui limitações em sua
validade técnica, ou seja, refere-se ao tempo de vida da versão no momento de
seu lançamento. Você pode ter atualizado o aplicativo em seu telefone ou
computador e ter sido solicitado a alterar os termos de uso.
Após atualizar o software, a licença anterior não será mais válida. Como a relação
de compra é final, isso não mudará seu uso atual. Portanto, mesmo que a empresa
não ofereça mais suporte a uma versão específica por alguns anos após a
descontinuação, você ainda pode continuar a se beneficiar do software usado
legalmente.

Licenciamento das cópias do software
O licenciamento pode trazer estabilidade às operações da sua empresa.
Produtos ilegais podem ser interrompidos a qualquer momento, causando
problemas de desempenho.
Além disso, o software licenciado é seguro e passa por certificações, auditorias e
testes de segurança suficientes para garantir sua eficiência.
Para produtos de código aberto, eles fornecem transparência para que usuários e
desenvolvedores possam investigar suas operações para estabelecer auditorias
orgânicas. No entanto, livrar-se de problemas operacionais não é a única razão para
licenciar seu pacote de software ou investir em soluções de código aberto.
Evitar a confusão gerada por multas é suficiente para justificar a licença.
Após o cadastramento do sistema, os custos de manutenção serão reduzidos, não
havendo mais a preocupação de que as inspeções passem a fazer parte do dia a dia
da empresa.

Qual a licença mais apropriada?
Quantos usuários corporativos precisam desse software todos os dias?
Você deve responder a esta pergunta com segurança antes de comprar uma
licença.
Todos os membros da organização usam software básico, como o pacote Office, e
apenas os gerentes, em várias áreas da empresa, podem precisar de um sistema de
Business Intelligence.
Desta forma, defina quem precisa de acesso aos recursos para estimar qual tipo de
licença é o mais barato para a sua organização. A diferença em algumas licenças é
o número de recursos que os usuários podem acessar. Isso é especialmente
comum para software executado na nuvem.
Estabeleça os recursos necessários para determinar qual versão do software sua
empresa comprará.

Web Design e Front End - Definição e conceitos

Web Design e Front End - Definição e conceitos

Mais conteúdo relacionado

Semelhante a Web Design e Front End - Definição e conceitos

Web Design e Front End - Definição e conceitos