Design digital 1

Prévia do material em texto

introdução
Introdução
Nesta unidade, será apresentada a importância das Tecnologias da Informação e Comunicação (TIC),
abordando a história da internet e o processo para registrar um site, bem como os conceitos das
terminologias UX, Experiência do Usuário e UI, Interface do Usuário, assunto de extrema
importância no desenvolvimento de projetos de design digital, o qual inclui o estudo de arquitetura
de informação, com uma introdução básica do HTML5.
Além disso, estudaremos os conceitos e noções básicas de desenvolvimento de front e back-end ,
pois, com o conhecimento desses temas, você terá uma base para aplicar esses conceitos em um
DESIGN DIGITALDESIGN DIGITAL
CONCEITUANDO E APLICANDO OSCONCEITUANDO E APLICANDO OS
PRINCÍPIOS BÁSICOS DE DESIGNPRINCÍPIOS BÁSICOS DE DESIGN
DIGITALDIGITAL
Autor: Me. Leandro C. Cardoso
Rev isor : Amanda de Br i t to Murt inho
IN IC IAR
projeto de design digital.
A informação e a comunicação são elementos essenciais para os seres humanos desde sempre, mas
só a partir do período da pré-história começaram os estudos sobre o assunto. Na Idade da Pedra,
por exemplo, caçar animais de grande porte era difícil de ser concretizado somente por um
indivíduo, sendo necessário um grupo de caçadores; e a comunicação entre os indivíduos desse
grupo era o que garantiria o êxito para executar um ataque coordenado. A evolução da linguagem
foi o resultado de como os seres humanos conseguiram se comunicar com mais e�ciência.
A partir do momento em que a sociedade começou a se organizar, e com o surgimento das
primeiras civilizações, os líderes de Estado observaram que se fazia necessário propagar, de maneira
e�ciente e consolidada, as informações para a população. A solução se deu com a invenção da
escrita: por meio desta, a informação passou a ser registrada, podendo, assim, ser eternizada; não
era mais necessário o ser humano guardar toda a informação na sua memória, pois, toda vez que
precisasse lembrar, veri�car e/ou constatar a informação correta, bastava consultar a informação
novamente. A linguagem escrita pode ser considerada até uma extensão do cérebro humano; por
meio dela, a informação pode ser codi�cada por um grande número de indivíduos que possuem o
conhecimento da leitura.
As tecnologias da informação e comunicações, também conhecidas como TICs, tiveram avanços
surpreendentes, mas algumas ainda são utilizadas até os dias de hoje, como o papel e as
calculadoras. O marco dessa evolução se deu no século 20, com a invenção dos computadores e das
redes de computadores, nas quais os computadores se conectam, e com a evolução das tecnologias
de tratamento e propagação da informação, que não possuem restrições quanto ao tipo de
informação nem ao tipo de processamento que realizam.
Conceituação de Interfaces
Com as TICs, para se tornar viável a transmissão das informações, é necessário que exista um
mecanismo que execute a intermediação dos dados computacionais com as pessoas que se
comunicam por meio dessas informações; e essa interlocução é feita por meio das interfaces.
Para de�nir interfaces, é necessário ter conhecimentos amplos de várias áreas do conhecimento,
principalmente em função do aumento constante e considerável das novas tecnologias.
Tecnologias da Informação eTecnologias da Informação e
Comunicação (TIC)Comunicação (TIC)
As pessoas que utilizam os tablets , smartphones , notebooks e os computadores pessoais se
comunicam com esses dispositivos controlando todos os seus recursos por intermédio das
Interfaces Grá�cas de Usuário (G.U.I.), como é conhecido tecnicamente, ou simplesmente Interface.
Dessa maneira, as interfaces interpretam a linguagem computacional e apresentam para o usuário
uma linguagem visual que o auxilie a entender e manusear os dispositivos, ou seja, executa a
interconexão do usuário com a tecnologia.
Concepções do Design de Interfaces
As interfaces estão em um grande processo de evolução, aproximando-se de um ponto de uma
autonomia quase total no que se diz respeito ao processo de interação com os usuários. Portanto,
evoluções na so�sticação dos recursos comandados por voz, inteligência arti�cial e sensores de
movimentos são elementos que já fazem parte de um grande número de interfaces, que já existem
e são utilizadas por milhares de pessoas.
Além disso, interfaces com comando de voz fazem parte do cotidiano de qualquer pessoa que
possui um smartphone; como exemplo temos o sistema operacional Android, da Google, que pode
ser ativado fazendo uma pergunta e, em seguida, falando "Ok Google", ou o IOS , da Apple , que,
utilizando a Siri , dá acesso a esse mesmo recurso.
Interfaces e sua Evolução
O surgimento dos computadores Macintosh , da Apple , de�niu um grande marco para as interfaces,
principalmente pelo fato de tornar a operação com essa máquina mais amigável, introduzindo
ícones, menus e barras de rolagem. No entanto, logicamente, interfaces não são simplesmente a
Figura 1.1 - Exemplos de interfaces: notebooks, tablets e smartphones 
Fonte: Everythingpossible / 123RF.
Figura 1.2 - Exemplo de interface por comando de voz de um smartphone 
Fonte: Kaspars Grinvalds / 123RF.
introdução desses componentes visuais. Uma das maneiras de estabelecer um histórico e a
evolução das interfaces é comparar com a evolução dos desktops , os computadores pessoais,
elaborando comparações com os componentes de hardware que as suportam (TESLER, 1991).
Nielsen (1993) desenvolveu uma tabela na qual relaciona e quali�ca a categoria de usuários de
computadores em cada geração, o que é de absoluta relevância para o desenvolvimento de
interfaces. Vejamos mais detalhes no Quadro 1.1:
Quadro 1.1 - Geração de computadores e de interfaces de usuários 
Fonte: Adaptado de Nielsen (1993).
O
TECNOLOGIA
DE
HARDWARE
MODO DE
OPERAÇÃO
LINGUAGENS DE
PROGRAMAÇÃO
TECNOLOGIA
TERMINAL
TIPO DE
USUÁRIOS
IMAGEM
COMERCIAL
PARAD
DE INT
DE US
- Mecânica e
Eletromecânica
Usado
somente
para cálculos
Movimento de
cabos e chaves
Leitura de
luzes que
piscam e
cartões
perfurados
Os próprios
inventores
Nenhuma. Os
computadores
não saíram
dos
laboratórios
Nen
5
Válvulas,
máquinas
enormes e
com alta
ocorrência de
falha
Um usuário
a cada
tempo usa a
máquina
(por um
tempo
bastante
limitado)
Linguagem de
máquina
001100111101
TTY. Usados
apenas nos
centros de
computação
Especialistas e
pioneiros
Computador
como uma
máquina para
cálculos
Progra
ba
5
Transistores,
mais con�áveis
Computadores
começam a ser
usados fora de
laboratórios
Batch
(computador
central não
acessado
diretamente)
Assembler ADD
A,B
Terminais de
linha glass
TTY
Tecnocratas,
pro�ssionais
de
computação
Tecnocratas,
pro�ssionais
de
computação
Linguag
Com
0
al
Circuito
integrado. A
relação custo-
benefício
justi�ca a
compra de
computadores
para muitas
necessidades
Time-sharing
Linguagens de alto
nível (Fortran,
Pascal, C)
Terminais full
screen ,
caracteres
alfanuméricos
Acesso
remoto
bastante
comum
Grupos
especializados
sem
conhecimento
computacional
(caixas
automáticos)
Mecanização
das atividades
repetitivas e
não criativas
Me
hierárq
preench
de form
5
VLSI Pessoas
podem
comprar seu
computador
Computador
pessoal para
um único
usuário
Linguagens
orientadas a
problemas/objetos
(planilhas de
cálculo)
Displays
grá�cos
Estações de
trabalho,
portáveis
Pro�ssionais
de todo tipo e
curiosos
Computador
como uma
ferramenta
WI
(Win
Icons, 
e P
dev
Integração de
alta escala
Pessoas
podem
comprar
diversos
computadores
Usuários
conectados
em rede e
sistemas
embutidos
Não imperativas,
provavelmente
grá�cas
Dynabook,
E/S
multimídia,
portabilidade
simples,
modem
celular
Todas as
pessoas
Computador
como um
aparelho
eletrônico
Interfa
basead
com
A observação de como o ser humano se comunica facilita muito o processo de compreensão de uma
interface. Um dos estudos é o da linguística,em que é observado que uma conversa não se dá de
uma forma totalmente sequencial. Por exemplo: no momento em que alguém faz uma pergunta,
primeiro você pensa sobre o assunto, analisa e, depois, dá a resposta, ou seja, para que uma
conversa realmente exista, é necessária a construção do assunto, de modo que a conversa faça
sentido e tenha signi�cado. As interfaces procuram estabelecer esse diálogo de acordo com os
elementos dispostos na tela, e esses objetos devem fazer sentido.
Metáforas de Interface
Normalmente, em razão de as metáforas já fazerem parte da nossa experiência e do nosso
conhecimento, não percebemos quando as usamos no nosso cotidiano; as metáforas não aparecem
só na poesia ou na literatura, mas são parte integrante de nosso pensamento e linguagem. Elas
funcionam da mesma maneira nas interfaces, por exemplo, no momento em que um usuário move
um arquivo ou documento de uma pasta (diretório) para outro local, em um sistema operacional
como o Windows ou iOS, ele entende que realmente está trocando o arquivo ou documento de
lugar.
Para ser realmente compreensível, uma interface deve levar em consideração o indivíduo que irá
utilizá-la, devendo estar de acordo com os conhecimentos do usuário, para que a interação ocorra
de forma natural. Analise o seguinte exemplo: nas novas interfaces de programas e sistemas
operacionais, o ícone de salvar, normalmente representado por um disquete, já não aparece mais
com a mesma frequência, pois o disquete não é mais utilizado para salvar arquivos há alguns anos.
Sendo assim, os indivíduos que nunca utilizaram os disquetes para salvar arquivos não conseguem
assimilar o ícone com a sua função. Mesmo o CD Room já não é muito utilizado para salvar arquivo,
sendo, atualmente, mais comum utilizar pendrive , ou mesmo armazenar em discos virtuais, também
conhecido como nuvens.
reflita
Re�ita
No livro The Art of Human-Computer Interface Design , o autor a�rma que é
possível comparar uma interface digital com situações de comunicação entre
duas pessoas, nas quais as mensagens de erros que aparecem nas interfaces
representam uma comunicação incorreta. Se compararmos com uma conversa
entre indivíduos, seria no momento quando uma pessoa não consegue
compreender a outra. Re�ita sobre o assunto : você acredita que, por conta de
as interfaces fazerem parte do nosso cotidiano, já podemos chegar a um grau de
comparação no qual podemos relacionar o uso das interfaces com uma conversa
entre duas pessoas?
No desenvolvimento de uma interface, os designers precisam levar em consideração não somente
as questões visuais, como os tipos (fontes de letras) mais legíveis, barras de rolagem mais
funcionais, a harmonia das cores, som e voz, mas também como o usuário irá utilizar todos os
recursos, melhorando e facilitando a sua relação com a máquina.
praticar
Vamos Praticar
As interfaces facilitam a compreensão dos mecanismos e dispositivos que utilizam Tecnologias da
Informação e Comunicação (TICs), que, na maioria dos casos, executam ações complexas, que não são
percebidas pelos usuários em razão do desenvolvimento de uma interface totalmente e�ciente. Sobre
determinado assunto, analise as a�rmativas:
I. ( ) Para existir um sistema homem-máquina, é necessário que existam ações ligando os elementos homem
e máquina na busca por um objetivo, ou seja, uma tarefa comum que leve esses elementos a interagirem. E
o facilitador dessa interação é a Tecnologia da Informação e Comunicação (TIC).
II. ( ) O processo de adaptação da máquina ao homem fez parte da evolução do ser humano e, com a
popularização dos computadores pessoais e a preocupação para o desenvolvimento de interfaces, essa
adaptação se tornou mais fácil.
III. ( ) Na interface, o ponto de vista do sistema é priorizado. Quando o designer de interface faz uso da
metáfora de uma tecnologia ou de um ambiente que o usuário do computador não conhece, o usuário
precisa se familiarizar primeiro para depois poder usar.
IV. ( ) As terminologias encontradas nos computadores e nos sites na internet como “salas de bate-papo”,
“correio eletrônico” e “loja virtual” são exemplos práticos de metáforas utilizadas pelos designers de
interfaces.
V. ( ) A metáfora nas interfaces permite que o usuário interaja com o computador, formando um sistema
próprio de comunicação, um mundo virtual totalmente independente e sem nenhuma referência do mundo
real, fora do ambiente computacional.
Assinale a alternativa que apresenta a sequência correta:
Figura 1.3 - Disquete, CD Room 
Fonte: Ridthidet Phuimoontree / 123RF.
a) F, V, F, V, F.
b) V, V, F, F, V.
c) F, F, F, F, F.
d) F, F, V, V, V.
e) V, V, V, V, V.
O funcionamento da internet , por incrível que pareça, utiliza uma infraestrutura relativamente
simples em relação à sua tecnologia, que recebe o nome de rede cliente-servidor. Os servidores são
os computadores no qual estão guardados os arquivos e realizam a distribuição desses dados
armazenados para os clientes (a outros computadores acessados na mesma rede).
Por exemplo, o seu notebook , computador, tablet ou smartphone , conectado à internet, é um
cliente; já o computador da Ânima, no qual você está acessando este conteúdo dessa disciplina EaD,
é um exemplo de servidor. Os dados são transferidos entre servidor e cliente por meio de uma
conexão física, por �os, cabos, satélite, micro-ondas etc., conhecida como ponto a ponto, por meio
da rede totalmente interconectada pelo mundo ou por meio de conexões móveis.
Os computadores se comunicam na internet por um sistema de endereços conhecidos como IP
(Internet Protocol), que são inúmeros e para diferentes tipos de acessos e serviços, como o HTTP
(HyperText Transfer Protocol), em que é possível transmitir texto, imagens, sons, vídeos, ou seja,
multimídia, e também hipertexto, que são os links, ou o texto interligado entre si por meio de
vínculos. A comunicação entre os computadores (servidor-cliente) se dá por números, por exemplo,
214.144.99.11. Para facilitar, esses números são transformados em endereços, aos quais acessamos.
Por exemplo, no site “www.eadÂnima.com.br” é feita uma “tradução” do endereço simbólico para o
numérico, chamado DNS (Domain Name Server); esse nome simbólico é conhecido como domínio.
A História da Internet
Foi ano de 1969 que, inicialmente nomeada como ARPANET, surgiu a internet, que, primeiramente,
era um sistema que conectava os computadores do departamento de defesa dos Estados Unidos. A
ARPANET, no �nal da década de 1970, foi permitida para o uso da população civil; as universidades
de renomes foram as primeiras a empregar a internet em seus campi . O uso comercial com os
domínios que conhecemos atualmente como seusite.com.br teve início na metade da década de
1980.
A internet possui várias utilidades, mas começou a se popularizar em 1989, quando um físico do
CERN (Centro Europeu de Pesquisa Nuclear) inventou o WWW ( World Wide Web ) para compartilhar
os documentos com links entre a comunidade de investigação em física. Sendo assim, a partir da
década de 1990, a WWW se propagou mundo afora.
Como a Internet FuncionaComo a Internet Funciona
Unindo o avanço dos softwares e hardware , os computadores passaram a ter mais capacidade e a
ser mais rápidos, e até mais compactos – se comparamos um computador a um notebook , tablet e
até mesmo a um smartphone –, o que contribuiu muito para o que é a internet que conhecemos
atualmente.
Tipos de Conexão Digital
Quando um dispositivo está ligado na rede mundial de computadores, ele está estabelecendo uma
conexão à internet. Atualmente, estamos conectados praticamente 24 horas por dia, por meio de
dispositivos móveis como smartphones e tablets ; só desconectamos quando desligamos o acesso do
dispositivo à internet. Inicialmente, a conexão com a internet se dava de um modo totalmente físico;
conectando-se por cabos e �os, as primeiras conexões se davam por meio de hardwares como Dial
Modem, conhecida como a internet discada – a sua conexãose dava através de uma ligação
telefônica para uma operadora. A internet atingiu a sua popularidade nos anos 2000, mas só
alcançava uma velocidade máxima de 56,6 kbps.
As conexões começaram a se tornar digital a partir da implantação da tecnologia conhecida como
xDSL (Digital Subscriber Line), linha de assinante digital que proporciona uma velocidade até cinco
vezes maior do que na conexão discada, 128 kbps no mínimo, porém, poderia chegar até 24 Mbps.
Essa tecnologia também utiliza a conexão por linha telefônica para se conectar à internet, mas com
um modem dedicado a executar a ligação, o que permitia que o usuário pudesse usar a linha
telefônica ao mesmo tempo em que estivesse conectado à internet.
Algumas operadoras de televisão por assinatura utilizam a sua estrutura de cabo para conexão à
internet, dessa maneira, uma linha telefônica já não se faz mais necessária para se conectar à
internet. No início da implantação, a velocidade dessa conexão variava de 70 kbps a 150 Mbps; a
partir desse momento, surgiram outros tipos de conexão, como a �bra óptica, rádio, satélite, entre
outras conexões sem a utilização de cabos.
A conexão por �bra óptica não usa a mesma maneira de envio de informações como a da conexão
por cabo; ela se dá por meio de dois tipos de �bras: o monomodo , utilizado, geralmente, por
empresas que permitem conexões de longo alcance, capaz de prover apenas um sinal por vez, e o
multimodo , normalmente para uso residencial, pois tem um custo menor, permite a emissão de
vários sinais ao mesmo tempo e é indicado para transmissões de curta distância. Na conexão por
�bra, não ocorre nenhuma interferência na transmissão, proporcionando uma conexão sem erros
para o usuário e uma velocidade maior, podendo ser de 50 Gbps.
Para uma conexão por satélite, usa-se uma antena no lugar de cabos para prover o acesso à
internet, sendo alternativa para localidades em que outras opções de conexão ainda não são
atendidas. Ao utilizar antena, situações como uma situação climática ruim, como chuvas e ventos, ou
quando algum objeto passa na frente da antena podem interferir no sinal. Esse tipo de conexão
também permite uma velocidade alta, pois a comunicação é realizada do usuário para o satélite e do
satélite para o seu servidor.
Já para a conexão por rádio não existe a necessidade de telefone, ou TV a cabo, por utilizar um
conjunto de antenas que abrangem uma grande área. Pode ser utilizado em comunidades rurais,
nas cidades ou em locais onde o cabeamento ou a �bra óptica ainda não estão disponíveis.
A manutenção das antenas é quase inexistente desde que implementada de maneira correta, mas
também pode apresentar falhas, pelo fato das interferências que ocorrem nas transmissões por
ondas eletromagnéticas, ou pela ocorrência de ventos, tempestades e chuvas. Para usuários
domésticos, a velocidade de conexão pode variar entre 1 MB e 10 MB; já para empresas existem
planos acima de 20 MB, mas não existem muitas operadoras que disponibilizam esse serviço, pois a
tecnologia não é atual – surgiu na década de 1980, no lançamento da rede de celular AMPS
(Advanced Mobile Phone Service), com os norte-americanos, para transmitir voz no sinal analógico,
utilizava o FDMA (Frequency Division Multiplexing Access), sendo conhecida com 1G, a primeira
geração móvel.
A partir desse momento, foram criadas outras tecnologias. Foi nos anos 1990 que os primeiros
celulares no Brasil começaram a aparecer. A geração 2G foi a responsável pela transição do sistema
analógico para o digital, surgindo com a implantação das operadoras de sinal digital para voz, como
GSM (Global System for Mobile Comunications) e o CDMA (Code Division Multiple Access). Também
foi a primeira vez que foi possível enviar dados como os SMSs (Short Message Service), serviço de
mensagens curtas. Nessa época também aconteceu uma evolução nos celulares, que começaram a
diminuir de tamanho e a consumir menos bateria.
A terceira geração, o 3G, proporciona maior velocidade de conexão e, com a so�sticação da
transmissão de dados e voz, permite recursos como videochamadas, recurso do aplicativo WhatsApp
. Além disso, permite transmissão digital de sinal de televisão e, com um pequeno modem, é
possível acessar a internet em um notebook , entre outros serviços. A tecnologia da recepção é a
rádio, mas utilizando toda a infraestrutura das operadoras de celular.
Com isso, surge a geração 4G, que utiliza tecnologia LTE (Long Term Evolution), que dá prioridade
para a transmissão de dados pelas tecnologias WCDMA e GSM, mas não ignora o uso para ligações
de voz, permitindo maior velocidade de conexão com a internet.
Nesse contexto, a tecnologia tem uma concorrente, que é uma versão mais potente que o Wi-Fi, em
que é possível abranger uma cidade inteira e com velocidade de conexão bastante elevada: é a
WiMax. Para o uso dessa conexão, é necessário ter um smartphone compatível e com uma
operadora que transmita o sinal no local que o usuário irá receber.
Embora o 4G não esteja disponível em todo o território brasileiro, a quinta geração, a 5G, já está em
processo de testes para promover velocidade dez vezes maior nos dispositivos móveis, como
smartphones e tablets , do que o 4G. O avanço dessa tecnologia trará uma estrutura ideal para que a
Internet das Coisas (IoT) se torne viável, prevendo a conexão na internet por meio vários outros
dispositivos, como carros, geladeiras, micro-ondas, entre outros, e também abre uma gama enorme
para os pro�ssionais de design digital.
Provedor de Internet
Para um usuário se conectar à rede mundial de computadores, além de escolher um tipo de
conexão, é necessário optar por um provedor para viabilizar esse acesso. As empresas que prestam
esse serviço são conhecidas como “provedor de acesso”, ISP (Internet Service Provider - Provedor de
Serviço Internet) ou fornecedor de acesso à internet.
Sendo assim, as empresas disponibilizam o acesso de acordo com as formas de conexão que foi
contratada, como por TV a cabo, linhas digitais, satélite, 3G, 4G etc. Os provedores, atualmente, são
chamados de banda larga, pois disponibilizam internet de alta velocidade.
Provedores que disponibilizam conexão sem �o via rádio, wireless , usando as tecnologias Wi-Fi e
WiMax podem prover internet com uma cobertura de 400 metros em relação à antena. Também
existem opções de hotspots , que são encontrados facilmente em aeroportos, cafés, lanchonetes etc.
Até a década de 1990, esses serviços eram executados por empresas especializadas, em função de
uma lei que proibia as operadoras de prestarem qualquer outro serviço que não fosse o de
telefonia. Com a chegada da banda larga, a partir dos anos 2000, não era mais necessário que a
conexão fosse feita da maneira tradicional, o que permitiu que as operadoras de telefonia também
prestarem esse tipo de serviço.
Registro de Domínio e Servidor de Hospedagem
Para publicar um site na internet, é preciso registrá-lo e hospedá-lo em uma empresa que presta
esse tipo de serviço. O domínio nada mais é que o endereço de um site na internet.
Para obter o endereço mencionado, é necessário registrar no órgão competente; no caso do Brasil,
os domínios terminados em “br” são registrados no site www.registro.br, devendo ser paga uma taxa
anual. Qualquer pessoa ou empresa legalmente estabelecida no Brasil, como pessoa jurídica (CNPJ)
ou física (CPF), e que possua um contato em território nacional podem registrar um domínio.
Já as empresas estrangeiras poderão solicitar um domínio desde que possuam um procurador
legalmente estabelecido no Brasil. Para algumas categorias de domínios, é necessário o envio de
documentação própria, e também são analisados o registro do CNPJ na RFB (Receita Federal) para
veri�car se a razão social, o nome fantasia e as atividades econômicas autorizadas são compatíveis
com a categoria pretendida. Em algumas categorias, com o nome de domínio pretendido, além
dessa análise, são necessários requisitos adicionais, como é apresentadono Quadro 1.2. 
Quadro 1.2 - Categorias de registros que precisam de requisitos adicionais 
Fonte: Adaptado de RegistroBr.
A função do domínio DNS é traduzir um endereço IP em nome para que facilite a vida das pessoas,
para que elas não tenham que �car lembrando o número IP de cada site. Já um servidor de
hospedagem é o local em que são armazenados todos os arquivos de um site na internet, isto é,
onde o site é publicado on-line . Contudo, esses serviços são oferecidos por empresas de
hospedagem, pois, quando o serviço é contratado, a pessoa ou empresa está alugando um espaço
dentro de um servidor que será utilizado para publicar o site na internet.
Dessa forma, no servidor são armazenados os arquivos necessários para que o site funcione
corretamente. Sendo assim, um servidor nada mais é, do que um computador que sempre �ca
ligado para que os arquivos do site �quem disponíveis 24 horas por dia.
Categorias de registros que precisam requisitos adicionais
Categoria Requisitos adicionais
.AM.BR Comprovante da ANATEL para radiodifusão sonora AM
.B.BR Autorização do Banco Central
.COOP.BR Comprovante de que o titular é cooperativa
.DEF.BR Autorização do Colégio Nacional dos Defensores Públicos Gerais
.EDU.BR
Comprovação da atividade especí�ca por meio de documento do MEC e
algum documento que comprove que o nome a ser registrado não é
genérico
.FM.BR Comprovante da ANATEL para radiodifusão sonora FM
.GOV.BR Comprovação de que a instituição pertence ao Governo Federal
JUS.BR Autorização do Conselho Nacional de Justiça
.LEG.BR Comprovação de instituição ligada ao Poder Legislativo
.MIL.BR Autorização do Ministério da Defesa
.MP.BR Autorização do Conselho Nacional do Ministério Público
.ORG.BR
Documentação que comprove a natureza da instituição não
governamental sem �ns lucrativos
.PSI.BR Comprovação de que a empresa é provedora de acesso à internet
.TC.BR Autorização CG tc.br
praticar
Vamos Praticar
Quando você está conectado à internet, outras bilhões de pessoas também estão conectadas a bilhões de
outras coisas, e tudo isso acontece na base do acordo, que é como funciona a internet, em que todos
precisam concordar em seguir as mesmas regras. Há anos o Brasil já faz parte dessa rede mundial de redes
de computadores, que, no total, liga milhões de pessoas no país.
De acordo com o conteúdo apresentado, analise as alternativas a seguir:
I. Quando você conecta 2 computadores, forma uma rede local. Se um amigo conecta outros 2
computadores, tem-se outra rede; caso ambos concordem em funcionar sob as mesmas regras, podem
conectar as redes, o que representa uma internet.
II. O acesso à internet de modo externo se dá quando um dispositivo, que pode ser considerado um ponto
de rede local, se conecta à outra rede maior, conhecido como domínio da internet.
III. O site registro.br é o órgão competente responsável por comercializar as diversas velocidades de
internet, desde as velocidades mais populares até as mais rápidas possíveis.
IV. Os arquivos dos sites e serviços utilizados pelos usuários na Internet estão disponíveis em servidores de
alta capacidade conectados à rede mundial de internet.
V. A internet é uma rede mundial que conecta milhões de computadores ao redor do mundo, no qual os
tipos, tamanhos, marcas e modelos podem variar, mas devem ter o mesmo sistema operacional.
Está correto o que se a�rma em:
a) I e V, apenas.
b) II e III, apenas.
c) II, III e IV, apenas.
d) I, II e III, apenas.
e) I, II e V, apenas.
O termo UX (User Experience ou Experiência do Usuário) diz respeito à experiência de uma pessoa
em utilizar um dispositivo, sistema e aplicativos; já a terminologia UI (User Interface ou Interface do
Usuário) está relacionado ao modo como a pessoa alcançará essa experiência.
Como o UX se preocupa com a experiência do usuário, lida com as emoções, ou seja, como a pessoa
se relaciona com o serviço ou produto. Para �car mais claro, o objetivo do UX é fazer com que seja
simples e natural, o mais amigável possível – user-friendly – a utilização de um produto ou serviço.
Dessa maneira, ao desenvolver um projeto de design digital, por exemplo, é preciso compreender
como as pessoas se comportam e, especi�camente, estudar o padrão de comportamento do público
que irá utilizá-lo. Dessa maneira, o projeto é concebido de modo que o produto ou serviço não cause
nenhuma frustração, mas, sim, satisfação ao usuário, para que o utilize várias vezes, tudo isso
proporcionado pela experiência agradável na sua utilização e interação.
Já a UI possui atributos mais técnicos, pois está ligada ao planejamento e à criação do ambiente ao
qual o usuário controla, englobando toda a estratégia de design e desenvolvimento de um produto,
como usabilidade, conteúdo e a arquitetura de informação. A UI também é o estudo de como o
usuário executa as interações do produto e serviço, que podem estar em diversos dispositivos de
projetos digitais, como: smartphones, tablets, smartTV, caixas eletrônicos, equipamentos de
localização de lojas em shoppings etc., já que o usuário interage com esses dispositivos por meio de
aplicativos, softwares, sistemas que possuem uma interface com elementos grá�cos com menus,
botões, imagens e ilustrações, e o seu desenvolvimento deve ter uma preocupação de UX e UI.
Sendo assim, o pro�ssional que desenvolve essa interface é o design digital, que precisa conhecer
várias áreas para conceber um projeto, e uma delas é da arquitetura da informação, além de ter que
conhecer o usuário a ponto de poder antecipar as suas reais necessidades de utilização do projeto,
para que ele compreenda facilmente e consiga executar o que ele pode, quer e espera executar.
Arquitetura de Informação e Noções de UX e UI
No nosso cotidiano, nos deparamos com uma grande quantidade de informação e �ca mais evidente
quando usamos aplicativos ou sites na internet, sendo assim, a Arquitetura da Informação
(Architecture Information - AI) estuda a forma de organizar as informações de um sistema para que
facilite a compreensão do usuário na interface.
Experiência do Usuário (UX) eExperiência do Usuário (UX) e
Interface do Usuário (UI)Interface do Usuário (UI)
Em um projeto de design de interface, o momento do planejamento da AI é bem objetivo, e, para
iniciar esse planejamento, noções de UX e UI são fundamentais. Segundo Garrett (2003), o processo
de experiência com o usuário é constituído por cinco camadas, cujas sobreposições vão de um nível
mais abstrato para o mais concreto. São elas: 
Estratégia : diz respeito ao que esperamos para o produto ( website , sistema, aplicativo),
mas não apenas àquilo que queremos, mas ao que os usuários desejam.
Escopo : levantamento de requisitos e especi�cações de funcionalidades e qualidades que
o produto deve ter e como o projeto será conduzido.
Estrutura : como o conteúdo deverá ser organizado? O que é menos e o que é mais
importante a ser exibido e encontrado pelos usuários? Como encaixar isso nas
capacidades e limitações técnicas, mercadológicas e de usabilidade do produto?
Esqueleto : é o momento em que se desenha a organização dos elementos que
constituirão a interface, os seus componentes – inclusive, pensando quais os tipos de
componentes mais adequados para exibir as informações e habilitar funcionalidades para
os usuários.
Superfície : é a interface �nal, aquilo que o consumidor, cliente ou usuário terá diante de
si e com a qual vai interagir.
Nesse contexto, a Figura 1.4 representa as sobreposições das cinco camadas, do nível mais abstrato
para o mais concreto, apresentadas no livro The elements of the user experience , de Garrett (2003).
Portanto, �ca evidente que o planejamento AI está intimamente ligado à UX. Dessa maneira, existem
muitas características emocionais consideradas abstratas, mas que devem ser levadas em
consideração, antes mesmo de iniciar a concepção de uma interface, e são esses aspectos que
levam mais tempo no planejamento de um projeto, pois é preciso ter certezade que a ideia e a
estratégia de como dispor o conteúdo do projeto estão funcionando.
Sendo assim, a Arquitetura da Informação se responsabiliza por aspectos mais técnicos, no que diz
respeito, por exemplo, a se o projeto possui uma boa navegação, e responde conforme as
solicitações do usuário, que interage por meio da interface. É nessa etapa que o design utiliza
recursos e técnicas para a construção da Arquitetura da Informação, como o HTML5, que serão
utilizados na construção de um aplicativo, sistema, website etc.
Introdução ao HTML5
Figura: 1.4 - Camadas que constituem a experiência do usuário 
Fonte: Garrett (2003, p. 28).
Para compor elementos que estão disponíveis na web, como imagens, textos, áudios, vídeos etc., é
necessária uma linguagem que permita a publicação desse conteúdo, conhecida como Linguagem
de Marcação de Hipertexto (Hypertext Markup Language) ou, simplesmente, HTML. Versões como
HTML+, HTML2.0 e HTML 3.0, que têm o objetivo de so�sticar e aumentar a gama de opções que
essa linguagem poderia proporcionar, surgiram nos anos de 1993 até 1995, porém, somente em
1997 o HTML começou a ser padronizado pelo grupo de trabalho do W3C.
Sendo assim, na versão do HTML4, a separação da estrutura do código como a formatação,
conceitos de acessibilidade foram apontados pelo W3C, para que os desenvolvedores levassem em
consideração nos seus projetos.
Em 2004, empresas como Apple, Mozilla e Opera, não satisfeitas com os caminhos que a web estava
seguindo, se organizaram e criaram o WHATWG ( http://www.whatwg.org/ ) para escrever a
linguagem do HTML5, versão que permite a utilização de ferramentas de outras linguagens de
programação, como o CSS e o Javascript, bem como criar novas tags e modi�car a função de outras.
Nesse contexto, podemos de�nir as tags como rótulos utilizados para comunicar ao navegador como
o site deve ser visualizado.
Já no HTML 5, as seções como cabeçalho, menus, rodapé e as nomenclaturas das tags foram
padronizadas, o que permite que essas informações sejam capturadas de forma automática, pois
facilitam para que os mecanismos de buscas possam encontrar os sites. Isso também proporciona
maior interatividade, sem a necessidade de instalação de plugins , e também permite ser utilizado
em diversos dispositivos, como smartphones e tablets , sendo compatível com novos navegadores e
possibilitando a utilização das novas características ou atualização de forma imediata, sem a
necessidade de elaborar alterações em código de um projeto já existente.
Construção de Arquivo HTML5
Na construção de um arquivo HTML, são escritas tags que são interpretadas pelo navegador que
resulta no visual do site. A linguagem é escrita por meio de linhas de programação, que possui uma
estrutura básica, e o que marca o início de uma tag é o símbolo matemático menor que (<) e, após
esse símbolo, é inserido o nome da tag e todas as informações que devem constar nessa tag ;
depois, é inserido o símbolo matemático maior que (>).
A tag HTML pode conter várias tags, como se fosse uma árvore, em que algumas tags possuem
hierarquias, e a tag principal dessa hierarquia sempre será a HTML. Para encerrar um conjunto de
tags, basta inserir o símbolo < e uma barra /, depois, o nome da tag e o símbolo >. Vejamos, na
Figura 1.5, um exemplo, linha 7, a tag sendo encerrada, representada pelo código </head>.
saiba mais
Saiba mais
O W3C é um consórcio internacional que regulamenta os
padrões para web, composto por órgãos governamentais,
empresas e organizações independentes, com a �nalidade
de estabelecer padrões para a criação e a interpretação de
conteúdos para a web.
ACESSAR
http://www.whatwg.org/
https://www.w3c.br/
Na estrutura básica de HTLM5, o Doctype , obrigatoriamente, precisa estar na primeira linha de
código, antes da tag HTML, pois ele não é uma tag do HTML, mas, sim, uma instrução para que o
navegador obtenha informações sobre qual versão de código o arquivo foi desenvolvido. Na linha 2
da Figura 1.5, podemos observar o código <HTML lang=‘‘pt-br’’>, em que o atributo lang se refere ao
idioma principal do documento. Observe que o código tem um padrão, em que primeiro é inserido o
símbolo matemático <, depois a tag (que no exemplo é o HTML), em seguida, o atributo no caso lang,
logo depois o símbolo matemático de igualdade =, após, são abertas aspas ‘‘, depois o atributo da
tag, que é seguida das aspas fechadas ’’ e, por último, o símbolo matemático >, que resulta no código
<HTML lang=‘‘pt-br’’>.
Após a tag que se refere ao idioma, a próxima que deve ser inserida é a head , que se refere a todas
as informações do cabeçalho de uma página HTML, contendo as informações sobre título da página,
metadados (que são as informações sobre a página) e o conteúdo publicado, que tem a função de
facilitar o entendimento dos relacionamentos e evidenciar a utilidade das informações dos dados.
No head também está contida a Meta Charset , que se refere à codi�cação usada pelo documento. A
UTF-8 é a mais utilizada na América Latina, pois permite o uso de acentos e do cedilha, dentre
outros.
Outra tag que também compõe a head é a <link>, que, nesse caso, são links para fontes externas que
serão usadas no documento. No exemplo da Figura 1.5, há uma tag <link> que importa o CSS para a
página, que é um mecanismo para adicionar estilo a um documento web – alguns padrões de
formatação, como de estilo de letra, por exemplo. O atributo rel=”stylesheet” informa que o link se
refere à importação de um arquivo CSS.
A tag title se refere ao título da página, ou seja, ao nome da página. Na linha 7 da Figura 1.5, a tag
head é fechada (representada como </head>). Já na linha 8 é aberta a tag body , ou seja, é o corpo da
página, no qual todas as informações que são inseridas dentro dessa tag são visualizadas nos
navegadores. A linha 10 representa o �nal da tag body , ou seja, o �m do conteúdo da página e, na
linha 11, a tag informa que, naquele ponto, termina a página em HTML, representada pelo código
</html>. Sendo assim, as informações apresentadas são uma construção de um arquivo HTML5,
conforme padrões W3C.
Veja, no Quadro 1.3, um breve resumo das tags e suas funções:
Figura 1.5 - Estrutura básica de HTML5, conforme padrões W3C 
Fonte: Ferreira e Eis (2019, on-line).
Quadro 1.3 - Tags e suas funções 
Fonte: Elaborado pelo autor.
Formatação de Estruturas Básicas
Para escrever um parágrafo, a tag que deve ser utilizada é a <p>; para quebra de linha, a <br>. Cada
formatação do texto, como negrito, itálico subscrito e sobrescrito, entre outros, possui seus próprios
atribuídos, que estão representados no Quadro 1.4 – ao lado é apresentado como essa tag é
visualizada em um navegador.
Quadro 1.4 - Tags de formatação de texto e exemplo de como são visualizadas em um navegador 
Fonte: Elaborado pelo autor.
Outra tag bastante utilizada é a <h1></h1>, que indica a formatação de um título principal, que tem
variações de h1 até h6, podendo ser representadas como: <h2></h2> <h3></h3> <h4></h4> <h5>
</h5> <h6></h6>.
Quando é necessário inserir símbolos especiais, é indicado o uso de entidades ( entities ), recurso
que viabiliza o uso de caracteres que não estão disponíveis no teclado, como quando é necessário
usar os símbolos matemáticos, como o menor igual < e maior igual >, para visualização em um
navegador, já que esses símbolos são utilizados na linguagem. Para inserir uma entidade, primeiro é
Tag Função
<!DOCTYPE html> informa que o arquivo é HTML5; deve estar na primeira linha
<html></html> tag que inicia e encerra um arquivo HTML
<head></head>
tag do cabeçalho, na qual �cam informações que são
comportamentais e não vão aparecer no site, como a tag <title>
</title>, entre outras; deve estar dentro de <head>
<body></body> tag que contém tudo o que irá aparecer no site
Código Visualização no navegador
<b> Este texto está em negrito </b> Este texto está em negrito
<strong> Este texto está forte </strong> Este texto está forte
<big> Este textoestá grande </big> Este texto está grande
<em> Este texto está enfatizado </em> Este texto está enfatizado
<i> Este texto está em itálico </i> Este texto está em itálico
<small> Este texto está pequeno </small> Este texto está pequeno
<sub> Este texto contém subscrito </sub> Este texto contém 
<sup> Este texto contém sobrescrito
</sup>
Este texto contém 
subscrito
sobrescrito
necessário usar o caractere & (e comercial), depois o nome da entidade, número decimal ou número
hexadecimal e terminando com o ; (ponto e vírgula). Além disso, uma entidade bastante utilizada é a
que reproduz a tecla de espaço – non-breaking space –, que apresenta o seguinte código: &nbsp.
O Quadro 1.5 nos apresenta a relação de alguns símbolos especiais mais utilizados e como o seu
código é visualizado em um navegador.
Quadro 1.5 - Lista de códigos de caracteres especiais e como é visualizada em um navegador 
Fonte: Elaborado pelo autor.
Plataformas para Correção de Códigos HTML
Para criar um arquivo em HTML, basta digitar o código em um editor de texto, como o bloco de
notas, e salvar o arquivo na extensão .html; para visualizar, basta abrir em um navegador. Caso
Nome/Descrição Código Como é visualizado no navegador
Non breaking space &nbsp;
Copyright &copy; ©
Marca Registrada &reg; ®
Menor que &lt; <
Maior que &gt; >
E comercial &amp; &
Apóstrofo &apos; ‘
Apóstrofo Duplo &quot; “
Cent &cent; ¢
Libra &pound; £
Yen &yen; ¥
Euro &euro; €
TradeMark &trade; ™
Seta para a Esquerda &larr; ←
Seta para Cima &uarr; ↑
Seta para Direita &rarr; →
Seta para Baixo &darr; ↓
apareçam erros, existem plataformas que identi�cam, por exemplo, erros de tags não fechadas;
quando o erro aparece, ele é apresentado na tela e isso possibilita você efetuar a correção.
O HTML5 possui padrões de�nidos pelo W3C e WHATWG. Respeitando esses padrões, a visualização
do site nos principais navegadores será o mais �el possível, de acordo com o código desenvolvido
pelo programador. A seguir, vejamos a indicação de plataformas para correção de códigos digitados.
https://validator.w3.org : HTML Validator, serviço de validação do W3C em que é possível
colar o código diretamente, enviar o arquivo e, se a página já estiver no ar, digitar o
endereço. Essa plataforma identi�ca os erros, apresentando um relatório.
https://js�ddle.net : nesta plataforma, a indicação de erro é apresentada na linha do
código, destacando com um círculo vermelho, no início da linha, que possui algum erro.
http://www.cssdesk.com/ : permite a visualização on-line da página; para isso, basta digitar
o código.
https://www.lncc.br/~borges/php/testar.html : é a plataforma do Laboratório Nacional de
Computação Cientí�ca, que pertence ao Ministério da Ciência, Tecnologia, Inovações e
Comunicações. Também permite a visualização on-line da página; para isso, basta digitar o
código.
As plataformas apresentadas permitem o desenvolvimento de autonomia para identi�cação e
autocorreção dos códigos em HTML, o que facilita e otimiza muito o trabalho no desenvolvimento de
uma interface e na arquitetura da informação.
praticar
Vamos Praticar
Experiência do Usuário (UX) e Interface do Usuário (UI), independentemente da terminologia, a realidade é
que as duas áreas são essenciais e têm grande sinergia. Apesar de diferentes e de tratarem de
determinadas partes dentro de um projeto de design digital, trabalham em conjunto.
Conforme o conteúdo apresentado, sobre interfaces, analise as a�rmativas a seguir e assinale a alternativa
correta.
I. A Interface do Usuário (UI) está mais ligada aos aspectos abstratos e emocionais de um projeto de design
digital, pois é a interface com a qual o usuário está sempre em contato. Sendo assim, precisa responder aos
aspectos psicológicos do usuário.
II. A Experiência do Usuário (UX) se preocupa com aspectos como formato, tamanho e cor de um botão, isto
é, com todos os aspectos visuais com os quais o usuário irá interagir em um projeto de design digital.
III. Fica difícil pensar em uma UI e projetar sem pensar na experiência do usuário; da mesma forma, não dá
para aplicar tudo o que foi planejado no UX Design sem a ajuda da UI, que torna viável as experiências.
IV. UI não se limita apenas à parte visual do projeto, mas, também, em como será realizada a interação do
usuário com o meio pela a interface grá�ca, indo além da estética e aparência do projeto.
V. A função do pro�ssional de UX é entender as percepções das pessoas ao usarem um determinado objeto
e, com isso, tornar essa experiência algo positivo, grandioso, agradável e que alcance as expectativas dos
https://validator.w3.org/
https://jsfiddle.net/
http://www.cssdesk.com/
https://www.lncc.br/~borges/php/testar.html
clientes.
Está correto o que se a�rma em:
a) I e II, apenas.
b) III, IV e V, apenas.
c) II, III e IV, apenas.
d) I, II e III, apenas.
e) I, II e IV, apenas.
Interface frontal, parte frontal ou front-end – e para uso especí�co para web, client-side – são
terminologias que se referem à parte visual de um projeto. Já parte de suporte, de retaguarda,
secundária ou back-end – e para uso especí�co para web, server-side – são termos que se referem à
etapa do desenvolvimento do sistema de um projeto.
Desenvolver o front-end é criar a interface do sistema com o usuário de acordo com a identidade
visual do projeto, levando em consideração, que as telas devem ser criadas para que a interação
com o usuário seja mais fácil possível. Para isso, utiliza recursos de interfaces como:
tabelas, botões, listas, campos de pesquisa com exibição dos resultados;
feedbacks com mensagens de texto informando que uma ação está pendente ou
concluída;
animações que, de acordo com a maneira que surgem na tela, facilitam a compreensão
com o que o usuário está interagindo;
dicas para explicar as funcionalidades de um sistema, recurso de autocompletar um texto
ou ação, entre outros.
Já o pro�ssional que trabalha com o desenvolvimento back-end cuida das funcionalidades do
sistema, da interação com as bases de dados, conforme as solicitações do usuário, ou seja, a
linguagem de programação. Portanto, para ambiente web , é necessário ter conhecimentos de
servidores, de protocolos como HTTP e de segurança.
Dessa forma, para concepção de um projeto, por exemplo, web, o trabalho da equipe front-end e
back-end é essencial; não adianta ter um site ou uma plataforma web que seja impecável na sua
programação, ou um banco de dados no qual funcione tudo regularmente, se não é compreensível à
sua utilização, principalmente porque o ambiente web é acessível a todos que estão conectados à
internet; por isso a interface precisa ser amigável: para que o usuário não desista e continue a
utilizar sempre o serviço.
Criação de Listas Ordenadas e não Ordenadas
Nos desenvolvimentos front-end e back-end , a criação de estruturas de listas ordenadas e não
ordenadas é importante para visualizar melhor as informações de um determinado assunto e para
criar alguns menus. Uma lista ordenada apresenta tópicos sequenciais, enquanto a não ordenada os
apresenta por meio de marcadores, conforme exemplo demonstrado no Quadro 1.6:
Desenvolvimento Desenvolvimento front-end front-end ee
back-endback-end
Quadro 1.6 - Exemplo de lista ordenada e não ordenada 
Fonte: Elaborado pelo autor.
Na linguagem HTML, a tag que representa lista ordenada é a OL. O formato da lista é de�nido pelo
atributo TYPE, que pode ser 1, A, a, I, i, sendo o atributo 1 para lista numerada, como o exemplo <OL
type=1">; o atributo A para lista com letras maiúsculas; o atributo a para lista com letras minúsculas;
o atributo I para lista com algarismos romanos usando caracteres maiúsculos; e o atributo i para
lista com algarismos romanos usando caracteres minúsculos.
Para listas não ordenadas, a tag utilizada deve ser a UL, de�nida no atributo TYPE: com circle para
identi�car um círculo, como o exemplo, <UL TYPE="circle">; square para quadrado e disc , para disco.
Sendo assim, observe o Quadro1.7 de programação em HTML e como é a sua visualização em um
navegador:
Quadro 1.7 - Código HTML de lista não ordenada e como é visualizada em um navegador 
Fonte: Elaborado pelo autor.
Estruturas de Navegação Web
O planejamento de como o usuário irá utilizar as telas ou páginas de um site é conhecido como
estruturas de navegação de mídias digitais ou estruturas de navegação web . Esse planejamento tem
como objetivo que cada usuário compreenda com rapidez e se direcione, facilmente, entre as
seções, para que construa um modelo mental de resposta dessa estrutura, pois, se for
compreendida facilmente, mais rápido será o seu deslocamento para as outras seções. Nesse
contexto, existem alguns modelos de estruturas de navegação web como a linear, sequencial ou
cronológica – �at model – em que as trocas de páginas são determinadas com botões nomeados
como “Próxima página” e “Página anterior”.
A estrutura que recebe o nome de hierárquico ou arborescente é utilizada em sites que possuem
um grande número de conteúdo, pois cria links entre assuntos de interesses genéricos mais
especí�cos, como base na construção de uma taxonomia, ou seja, normas de classi�cação de acordo
Lista ordenada Lista não ordenada
1.            Item número um. 
2.            Item número dois. 
3.            Item número três.
●             Primeiro item. 
●             Segundo item. 
●             Terceiro item.
Código HTML Visualização no navegador
02.<UL TYPE="circle"> 
03.<LI>Lista com círculo</LI> 
04.</UL> 
05.<UL TYPE="square"> 
06.<LI>Lista com quadrado</LI> 
07.</UL> 
08.<UL TYPE="disc"> 
09.<LI>Lista com disco</LI> 
10.</UL>
●             Lista com círculo 
●             Lista com quadrado 
●             Lista com disco
com as solicitações do usuário. Dessa maneira, as informações podem ser acessadas a partir de
diferentes pontos de partidas; como exemplo temos o site Amazon.com, em que o mesmo resultado
pode ser obtido por meio de buscas diferentes como palavras-chave, títulos, autores assuntos,
gêneros, que já pode ter sido previamente personalizado. Além disso, na estrutura com o nome de
“boneca aninhada” – nested doll (as listas aninhadas de sublinks , que vão direcionando, lateralmente,
o assunto procurado, por meio de uma seta, com uma nova lista de links, que se abre até se chegar
ao tópico procurado), normalmente é utilizada nas versões para dispositivos móveis de sites com
grande quantidade de informações.
Contudo, ainda temos a estrutura Centro radial – hub and spoke – em que a navegação parte de uma
tela central com os principais links e para os sublinks e vice-versa, não sendo necessário navegar em
todas as páginas ou telas, já que, para o usuário ir para uma seção diferente, é necessário sempre
voltar para a tela central.
Na estrutura matricial ou em grade não existe uma estrutura de hierarquia. Por exemplo, é possível
navegar horizontalmente por imagens de cada seção, com os “Links relacionados” ou “Veja também”,
que unem diferentes páginas de um mesmo site de acordo com algumas características em comum.
Essa estrutura horizontal, normalmente, é utilizada em sites de notícias, em que parte do conteúdo
é organizado em torno de tags , que variam de acordo com o conteúdo em destaque em um
determinado dia ou época.
Já na estrutura híbrida, os assuntos genéricos se unem aos mais especí�cos ou vice-versa, de acordo
com conteúdo criado dinamicamente pelo usuário. Como exemplo, podemos citar os sites de
notícias organizados por assuntos como esportes, economia e lazer que, quando são acessados
conforme grau de interesse do usuário, destacam-se algumas notícias; geralmente, há também
navegação horizontal entre os itens mais visitados, recentes, últimas notícias, mais comentados,
bem como navegação por tags .
Na estrutura conhecida com o nome “personalizado”, o usuário de�ne as informações que quer
receber, ou as ferramentas do próprio site rastreiam o percurso que o usuário realizou durante uma
visita, selecionando o conteúdo de sua preferência (normalmente, aqueles mais acessados). Um
exemplo são sites buscas: a página de resultado possui uma estrutura vertical que contém os links
do site e também uma navegação apresentada, a partir das palavras da busca. A estrutura com o
nome participativo se destina sobre as ações dos usuários e dos objetos sociais criados ou
modi�cados durante suas ações, na navegação, como uma rede colaborativa.
A estrutura cross-media (mídias cruzadas) segue os encadeamentos de um ambiente amplo de
informações, composto por um conjunto de ambientes mais restritos, mídias e canais interligados,
que se complementam e dependem um do outro para compor a experiência de uso ou completar
uma ideia ou tarefa. Temos como exemplo o cadastro de um e-mail para receber e-mail marketing:
quando há o envio de mensagem para a caixa postal do assinante e este precisa clicar em um link
para con�rmação; vale lembrar que o cadastro não é �nalizado caso não haja con�rmação.
Já o cross-channel , ou transchannel (canais cruzados) considera a estrutura de informações composta
por elementos dispersos de maneira estruturada, criação, publicação, ação, relacionamento e
recriação. É um conjunto de elementos individuais, em que cada um, contribuindo à sua maneira,
compõe uma experiência integrada, entre canais. O multi-channel (multicanais) é a oferta de serviços
ou experiências da mesma natureza que podem ser acessados ou usados a partir de inúmeros
canais, em que os usuários acessam um ou outro e podem realizar a mesma tarefa ou acessar a
mesma informação completa. Temos como exemplo um correntista de um banco que acessa sua
conta por meio do site para veri�car seu extrato bancário, sendo que ele pode fazer a mesma
atividade em um caixa eletrônico, pelo celular, ou pelo terminal diretamente no banco.
E ad hoc , caótico ou em teia, não apresenta uma ordem aparente, em que os relacionamentos entre
itens são mais editoriais que estruturais, os percursos são determinados pelos usuários, que se
direcionam de acordo com os seus interesses, seguindo hiperlinks que encontram nas páginas ou
ordenações baseadas nas características das próprias informações, ou então por um editor ou
especialista em conteúdo, que determina os relacionamentos entre links . É a forma de estrutura
que oferece mais risco de desorientação, no entanto, permite o cruzamento total e irrestrito de
informações, pois não está condicionada a nenhum modelo prede�nido.
Estruturas Analíticas de Projeto (EAP)
Planejar o que deve ser executado para desenvolver as entregas do projeto é o objetivo do Work
Breakdown Structure (WBS), em português, Estrutura Analítica do Projeto ou, simplesmente, EAP.
Nessa estrutura, deve-se dividir o projeto em partes menores, em níveis de importância de trabalho,
a �m de facilitar seu gerenciamento.
O EAP é uma base do gerenciamento de projetos que está descrita em uma das principais
referências em gestão de projetos no mundo: o Guia PMBOK® - Project Management Body of
Knowledge. Esse guia facilita o trabalho do gerente de projetos, para que ele tenha um controle do
tempo e, consequentemente, de custo, pois é possível visualizar as etapas das principais entregas.
As estruturas analíticas do projeto bene�ciam não somente o gerente de projeto, mas toda a cadeia
que faz parte do contexto, como toda a equipe, o cliente, patrocinadores, fornecedores e outras
partes interessadas, os stakeholders. Dessa maneira, a EAP colabora na de�nição de qual o trabalho
necessário para o projeto, proporciona uma visão comum do trabalho, oferece a linha-base da
�nalidade do projeto e monitora o andamento, apoiando outros processos de gerenciamento de
projetos, estimando custos, planejando recursos e identi�cando erros.
Introdução ao CSS e Indexação ao Arquivo HTML5
A Cascading Style Sheets (CSS), folhas de estilo em cascata, é outra linguagem, separada do HTML,
responsável pelos estilos que são exibidos em uma página da web. Possui recursos mais so�sticadosque os do HTML, pois formata visualmente textos de uma página utilizando somente o HTML – no
qual, em função da grande mistura de códigos com o próprio, texto �ca praticamente impraticável.
Com os conhecimentos básicos de HTML, a sintaxe do CSS tem estrutura simples, para
simplesmente informar as propriedades e valores e separar por um sinal de dois pontos ":"; cada
propriedade é separada por um sinal de ponto e vírgula ";", e o sinal de colchetes abrindo { e
fechando }. Veja o exemplo a seguir, de um texto na cor azul e com o fundo amarelo.
{color: blue;
background-color: yellow;}
Existem, também, outras maneiras de declarar essas propriedades, e uma delas é por meio do
atributo style dentro do próprio arquivo HTML, por exemplo:
<p style="color: blue; background-color: yellow;">
Outro modo de usar o CSS é identi�car suas propriedades dentro de uma tag <style>, utilizando
propriedades visuais em outro documento. Dessa maneira, é preciso identi�car, no HTML, a qual
elemento se refere; para isso, é necessário utilizar um seletor CSS, para buscar os elementos da
página que receberão esse padrão. Veja o exemplo abaixo, em que todas as tags identi�cadas com
letra p alteram a cor para azul e o background amarelo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Introdução ao CSS</title>
<style>
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
< p >
O conteúdo desta tag será exibido na letra em azul com fundo amarelo!
< /p >
< p >
<strong>Também</strong> será exibido em azul com fundo amarelo!
< /p >
</body>
</html>
A utilização de arquivos externos, geralmente com a extensão .css, é outra maneira de identi�car o
uso de CSS, bastando informar, no arquivo HTML, o link desse arquivo com a extensão .css. Usando
dessa maneira externa, o arquivo em HTML �ca mais organizado, pois não precisa ser atribuída uma
grande quantidade de informações no seu código; essa informação deve estar contida na tag
<head> do HTML, como o exemplo destacado em amarelo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sobre a Mirror Fashion</title>
<link rel="stylesheet" href="estilos.css ">
</head>
<body>
<p>
O conteúdo desta tag será exibido em azul com fundo amarelo!
</p>
<p>
<strong>Também</strong> será exibido em azul com fundo amarelo!
</p>
</body>
</html>
No arquivo do exemplo acima, de nome estilos.css, só é necessário inserir a programação do
conteúdo do CSS, conforme exemplo abaixo:
p {
color: blue;
background-color: yellow;
}
Partindo desse conceito, diferentes formatações podem ser inseridas no arquivo, como: de�nição de
fontes, por meio dos atributos font-family ; alinhamento, com a text-align ; centralizado, justi�cado,
alinhado à esquerda ou à direita, por meio dos atributos center , justify , left e right , respectivamente.
Dentre outros atributos que podem ser inseridos no CSS, como bordas, de�nição de imagem de
fundo etc.
Como no caso da linguagem em HTML, existem plataformas para correção de códigos digitados em
CSS, que são as mesmas para de HTML: https://js�ddle.net e http://www.cssdesk.com/ . Elas
permitem o desenvolvimento de autonomia para identi�cação e autocorreção dos códigos em HTML
e CSS.
praticar
Vamos Praticar
No mercado de criação de interfaces digitais, existem dois termos bastante utilizados: front-end e back-end .
Inclusive, em sites de vagas de empregos existem oportunidades com os títulos “Programador Front-end e
Programador Back-end”.
https://jsfiddle.net/
http://www.cssdesk.com/
De acordo com o conteúdo apresentado, analise as a�rmativas a seguir e assinale V para a(s) verdadeira(s) e
F para a(s) falsa(s):
I. ( ) O front-end é todo código de programação desenvolvido responsável pela apresentação do sistema
conhecido como server-side , tratando-se de aplicações web.
II. ( ) Desenvolvedores front-end lidam diretamente com banco de dados, servidores de aplicação complexos
e várias linguagens de programação.
III. ( ) O back-end de um projeto de design digital fornece e garante todas as regras do sistema, acesso a
banco de dados e segurança.
IV. ( ) Um exemplo de back-end é quando digitamos o endereço de um site no navegador e apertamos a tecla
Enter ; inicia-se, assim, um processo em que é enviada uma requisição ao servidor no qual a página está
hospedada.
V. ( ) Depois que o site já foi acessado, as interações só dependem do front-end , não havendo mais
nenhuma necessidade de consulta no servidor web , que são realizadas pelo back-end .
Assinale a alternativa que apresenta a sequência correta:
a) F, V, F, V, F.
b) V, V, F, F, V.
c) F, F, F, F, F.
d) F, F, V, V, F.
e) V, V, V, V, V.
indicações
Material Complementar
LIVRO
O design do dia a dia
Donald A. Norman
Editora: An�teatro
ISBN: 8532520839
Comentário: o autor, especialista em usabilidade e considerado uma
das pessoas que criou o termo UX, analisa profundamente o “porquê
alguns produtos satisfazem os consumidores, enquanto outros os
deixam completamente frustrados”, por meio do exemplo de produtos
adequados e inadequados, ressaltando a importância do poder da
observação de si mesmo e dos outros na identi�cação de falhas e
oportunidades para a resolução de problemas.
FILME
Piratas da Informática
Ano: 1999
Comentário: o �lme conta a história dos primórdios da informática, no
momento em que a indústria começou a focar no consumidor �nal.
Cenas históricas, como o lançamento do primeiro computador pessoal e
dos primeiros dias da Microsoft e da Apple são apresentadas neste
�lme. Para saber mais sobre o �lme, assista ao trailer. 
TRA ILER
https://www.youtube.com/watch?v=qma8YVHev0c
conclusão
Conclusão
Nesta unidade de ensino, você compreendeu a importância das Tecnologias da Informação e
Comunicação (TICs), que têm referência desde a Idade da Pedra, para os projetos de design digital.
Aprendeu, também, os processos de registro de um site, com o destaque para alguns ramos de
atuação que possuem categorias especí�cas. Além disso, você pôde identi�car a importância de os
pro�ssionais de UX (Experiência do Usuário) e de UI (Interface do Usuário) trabalharem em sintonia,
e a importância do W3C, que trouxe uma padronização da linguagem HTML. Por �m, estudou a
arquitetura da informação, importante para o conhecimento do pro�ssional de design digital, pois
facilita o desenvolvimento de interfaces.
referências
Referências Bibliográ�cas
FERREIRA, E.; EIS, D. HTML5 : curso W3C Escritório Brasil. Disponível em:
http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf . Acesso em: 27 nov. 2019.
GARRETT, J. J. The elements of the user experience . New York: New Riders, 2003.
LAUREL, B. (Ed.) The Art of Human-Computer Interface Design . Massachusetts: Addison-Wesley
Publishing, 1990.
NIELSEN, J. Usability Engineering. Academic Press . New York: Cambridge, 1993.
REGISTRO de novos domínios. Registro.br . Disponível em: https://registro.br/ajuda/registro-de-
novos-dominios/ . Acesso em: 27 nov. 2019.
TESLER, L. G. Networked Computing in the 1990s. Scienti�c American , v. 265, n. 3, p. 86-93, set.
1991.
http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf
https://registro.br/ajuda/registro-de-novos-dominios/