Baixe o app para aproveitar ainda mais
Prévia do material em texto
25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&PA… 1/36 DESIGN DIGITALDESIGN DIGITAL CONCEITUANDO E APLICANDO OSCONCEITUANDO E APLICANDO OS PRINCÍPIOS BÁSICOS DE DESIGN DIGITALPRINCÍPIOS BÁSICOS DE DESIGN DIGITAL Autor: Me. Leandro C. Cardoso Revisor : Amanda de Br i t to Murt inho I N I C I A R 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&PA… 2/36 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 projeto de design digital. 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&PA… 3/36 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. Tecnologias da Informação e ComunicaçãoTecnologias da Informação e Comunicação (TIC)(TIC) 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&PA… 4/36 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. 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. 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. 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&PA… 5/36 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 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: 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&PA… 6/36 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&PA… 7/36 Quadro 1.1 - Geração de computadores e de interfaces de usuários Fonte: Adaptado de Nielsen (1993). 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 interfacedeve 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 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&PA… 8/36 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. 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. Figura 1.3 - Disquete, CD Room Fonte: Ridthidet Phuimoontree / 123RF. 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&PA… 9/36 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: 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. 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 10/36 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 Laureate, 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.eadlaureate.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 Como a Internet FuncionaComo a Internet Funciona 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 11/36 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. 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ão se 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çõescomo 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. 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 12/36 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 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 13/36 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 é apresentado no Quadro 1.2. 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 14/36 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 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 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 15/36 ligado para que os arquivos do site �quem disponíveis 24 horas por dia. 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. 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 16/36 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 Experiência do Usuário (UX) e Interface doExperiência do Usuário (UX) e Interface do Usuário (UI)Usuário (UI) 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 17/36 (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. 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 certeza de 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 Figura: 1.4 - Camadas que constituem a experiência do usuário Fonte: Garrett(2003, p. 28). 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 18/36 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 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 http://www.whatwg.org/ 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 19/36 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>. 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. Figura 1.5 - Estrutura básica de HTML5, conforme padrões W3C Fonte: Ferreira e Eis (2019, on-line). 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 20/36 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: 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. 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 21/36 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 é 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:  . 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. 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 22/36 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, bastadigitar 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 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. Nome/Descrição Código Como é visualizado no navegador Non breaking space Copyright © © Marca Registrada ® ® Menor que < < Maior que > > E comercial & & Apóstrofo ' ‘ Apóstrofo Duplo " “ Cent ¢ ¢ Libra £ £ Yen ¥ ¥ Euro € € TradeMark ™ ™ Seta para a Esquerda ← ← Seta para Cima ↑ ↑ Seta para Direita → → Seta para Baixo ↓ ↓ 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 23/36 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. https://validator.w3.org/ https://jsfiddle.net/ http://www.cssdesk.com/ https://www.lncc.br/~borges/php/testar.html 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 24/36 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 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. 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 25/36 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 Desenvolvimento Desenvolvimento front-endfront-end e e back-endback-end 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 26/36 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: 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 Quadro 1.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 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 navegador02.<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 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 27/36 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 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. 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 28/36 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�sticados 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 29/36 que 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> 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 30/36 <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; 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 31/36 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”. 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. https://jsfiddle.net/ http://www.cssdesk.com/ 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 32/36 b) V, V, F, F, V. c) F, F, F, F, F. d) F, F, V, V, F. e) V, V, V, V, V. 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 33/36 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. 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 34/36 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. T R A I L E R https://www.youtube.com/watch?v=qma8YVHev0c 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 35/36 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/ 25/03/2021 Ead.br https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 36/36
Compartilhar