Tecnico em Desenvolvimento de Sistemas - Modulo Desenvolvimento Front-End (1)

Prévia do material em texto

<p>TÉCNICO EM DESENVOLVIMENTO DE SISTEMAS</p><p>MÓDULO</p><p>DESENVOLVIMENTO FRONT-END</p><p>Módulo: Desenvolvimento Front-end</p><p>2</p><p>Sumário</p><p>Programação Front-End ............................................................................................ 3</p><p>Introdução .............................................................................................................................................................. 3</p><p>Tema 1: História da Internet................................................................................................................................... 4</p><p>Tema 2: Conceitos e Serviço da WEB (1.0, 2.0 E 3.0) ............................................................................................ 10</p><p>Tema 3: Introdução Ao HTML ............................................................................................................................... 17</p><p>Tema 4: Tabelas.................................................................................................................................................... 25</p><p>Tema 5: Formulários ............................................................................................................................................. 31</p><p>Tema 6: CSS (Cascating Styles Sheets – Folhas de Estilo em Cascata) .................................................................. 43</p><p>Tema 7: Box Model............................................................................................................................................... 51</p><p>Tema 8: Layout Responsivo .................................................................................................................................. 55</p><p>Tema 9: JavaScript ................................................................................................................................................ 64</p><p>Tema 10: Cookies e Bibliotecas ............................................................................................................................ 75</p><p>Tema 11: Frameworks .......................................................................................................................................... 80</p><p>Administração de Websites ..................................................................................... 81</p><p>Introdução ............................................................................................................................................................ 81</p><p>Tema 1: Conceito de Internet e Mercado da Internet .......................................................................................... 82</p><p>Tema 2: Estruturas de Websites ........................................................................................................................... 91</p><p>Tema 3: Tecnologias de Web Sites ....................................................................................................................... 99</p><p>Tema 4: Responsividade ..................................................................................................................................... 104</p><p>Tema 5: Documentação para Web ..................................................................................................................... 112</p><p>Tema 6: Plataformas de Desenvolvimento Web ................................................................................................ 124</p><p>Tema 7: Layout e Design Digital ......................................................................................................................... 137</p><p>Tema 8: Conteúdo para Web Site ....................................................................................................................... 145</p><p>Tema 9: Conteúdo para redes sociais ................................................................................................................. 152</p><p>Tema 10: Plataformas de Marketing .................................................................................................................. 159</p><p>Tema 11: Análise de Portal ................................................................................................................................. 168</p><p>Referências bibliográficas ...................................................................................... 178</p><p>Módulo: Desenvolvimento Front-end</p><p>3</p><p>Programação Front-End</p><p>Introdução</p><p>Figura 1: Internet / Fonte: https://www.feebsc.org.br/</p><p>Todos nós temos uma História. Quando entendemos de onde nossa origem, conseguimos então</p><p>compreender a evolução até chegarmos no momento atual.</p><p>Com a Internet não foi diferente. Tudo começa logo após a Segunda Guerra Mundial, com uma</p><p>treta gigante entre Estados Unidos e União Soviética, que antes eram aliados, mas agora se tornam</p><p>inimigos. Acompanhe o desenrolar dessa novela e entenda como uma Guerra deu origem à maior rede</p><p>do mundo. Vamos lá?</p><p>https://www.feebsc.org.br/</p><p>Módulo: Desenvolvimento Front-end</p><p>4</p><p>Tema 1: História da Internet</p><p>Guerra Fria</p><p>Depois da Segunda Guerra, EUA e URSS começaram a ter seus desentendimentos, dando origem à</p><p>Guerra Fria em 1949. Neste contexto, em que os dois blocos ideológicos e politicamente antagônicos</p><p>exerciam enorme controle e influência no mundo, qualquer mecanismo, qualquer inovação, qualquer</p><p>ferramenta nova poderia contribuir nessa disputa liderada pela União Soviética e pelos Estados Unidos:</p><p>as duas superpotências compreendiam a eficácia e a necessidade absoluta dos meios de comunicação.</p><p>Figura 2: Guerra Fria – EUA e União Soviética / Fonte: UOL</p><p>Nesse meio de tensão da Guerra Fria no dia 4 de outubro de 1957 a União Soviética decide lançar</p><p>o Sputnik - 1, primeiro satélite artificial lançado em órbita, com o intuito de dar uma volta ao redor da terra</p><p>e logo cair no oceano, porém os EUA entenderam isso como um ato hostil. Para atender à necessidade</p><p>militar de proteger os sistemas de defesas temendo um ataque nuclear e cientes do poder da</p><p>comunicação, os EUA criaram um sistema de descentralização de suas informações no Pentágono para</p><p>evitar que possíveis ataques causassem a perca irreparável de documentos do governo. Um ataque</p><p>poderia trazer a público informações sigilosas, tornando os EUA vulneráveis.</p><p>Módulo: Desenvolvimento Front-end</p><p>5</p><p>Figura 3: Sputnik – 1º Satélite Artificial / Fonte: Sputnik News</p><p>Então o presidente Dwight Eisenhower decidiu fundar a ARPA (Advanced Research Projects</p><p>Agency Network) mais tarde se transformando na DARPA (Defense Advanced Research Projects Agency)</p><p>- Agência de Defesa de Projetos e Pesquisa Avançada, onde criou um sistema de compartilhamento de</p><p>informações entre centros militares distantes geograficamente, a fim de facilitar as estratégias de guerra</p><p>e manter a segurança dos dados descentralizando as informações apenas em um local físico. Assim foi</p><p>criada a ARPANET, com a primeira conexão sendo feita 29 de outubro de 1969 entre a Universidade da</p><p>Califórnia e o Instituto de Pesquisa de Stanford.</p><p>Figura 4: ARPANET com 4 pontos / Fonte: theconversation</p><p>Momento histórico onde a primeira de mensagem de email foi enviada usando o protocolo NCP</p><p>(Network Control Protocol - Protocolo de Controle de Rede) entre os computadores SDS Sigma 7 na</p><p>Califórnia e o SDS 90 em Stanford protocolo NCP tinha um ponto negativo, quando uma informação era</p><p>trocada entre eles, outros computadores na rede eram obrigados aguardar o compartilhamento para então</p><p>fazer sua comunicação via rede, fazendo que a comunicação era feita de apenas 2 computadores por</p><p>vez, atrasando assim a comunicação entre outros pontos, na época não existiam muitos computadores</p><p>conectados a ARPANET, eram apenas 4 ( SDS Sigma 7 na Califórnia, SDS 90 em Stanford, IBM 370/75</p><p>em Los Angeles e o DEC PDP 10 em UTAH).</p><p>Módulo: Desenvolvimento Front-end</p><p>6</p><p>Figura 4: Computadores SDS Sigma 7 e SDS 90 / Fonte: slideshare</p><p>Figura 5: Computadores</p><p>nota-se que as</p><p>propriedades são bem parecidas com as do elemento ;</p><p>Margin: - Definimos o margin com 25 pixels dos lados, para melhorar e espaçar o texto.</p><p>Padding: - Com o padding deixamos um espaço interno entre o bloco do texto.</p><p>Text-align – Aqui nessa propriedade definimos que o parágrafo seja justificado.</p><p>Font-size – Com a font-size deixamos a fonte do parágrafo com tamanho de 25 pixels.</p><p>Color: - Mudamos a cor do texto para branco, dando destaque no texto e contrastando com o fundo.</p><p>Text-shadow: - Colocamos uma sombra em preto no texto para dar um contraste com a cor branca.</p><p>Font-family – Definimos a família de fontes para nosso parágrafo, assumindo a ordem de importância</p><p>em caso a fonte não esteja instalada, automaticamente assume a próxima fonte da sequência.</p><p>Resultado no navegador:</p><p>Podemos notar que as definições no código CSS são de muita importância para uma página</p><p>HTML, sem o uso do CSS é praticamente inviável fazer o mesmo estilo em HTML puro, por isso o uso do</p><p>CSS se fez muito importante desde a sua criação.</p><p>Responda:</p><p>1) O que é CSS?</p><p>2) O que faz um CSS dentro de um documento em HTML?</p><p>3) Qual a sintaxe para incorporar uma folha de estilo dentro de uma página em HTML?</p><p>4) Quais os principais tipos de seletores em CSS?</p><p>5) Qual a função da propriedade text-align?</p><p>6) Qual propriedade CSS preciso usar para mudar a cor do texto de um elemento do HTML?</p><p>7) Para mudar a cor do background do HTML, qual a sintaxe?</p><p>8) Como funciona a propriedade text-shadow?</p><p>9) As propriedades ____________ e _____________ são essenciais para definir as dimensões de um</p><p>elemento, como largura e altura.</p><p>10) Qual a diferença entre margin e padding?</p><p>Desafio - Faça uma folha de estilo mudando o layout do desafio 3</p><p>Módulo: Desenvolvimento Front-end</p><p>51</p><p>Tema 7: Box Model</p><p>Box Model Usado Para Layouts</p><p>No CSS sempre quando estilizamos algum elemento, é comum, que alguma alteração que iremos</p><p>fazer, possa impactar em outros elementos, e precisamos estar cientes disso. Deste modo é importante</p><p>saber compreender o conceito de Box Model, que é utilizado em layout de páginas web.</p><p>Basicamente, a ideia do box model é composta por quatro partes:</p><p>• Conteúdo</p><p>• Espaçamento</p><p>• Bordas</p><p>• Margens</p><p>Em resumo, podemos dizer que o box model trata-se de como as 4 propriedades acima se</p><p>relacionam para compor a dimensão do elemento.</p><p>Figura 15: Estrutura do box model com seus atributos – Fonte: dev</p><p>Analisando a área de conteúdo (content) do box model é a área ocupada pelo conteúdo real do</p><p>elemento. Muitas das vezes possuem um fundo, cor de fonte ou até mesmo uma imagem. É localizada</p><p>dentro do conteúdo as dimensões, elas são; largura do conteúdo ou largura do box, e altura do conteúdo</p><p>ou a altura do box conteúdo.</p><p>A área de preenchimento (padding) estende-se para a borda em torno do preenchimento. Em</p><p>casos em que a área de conteúdo tem um fundo, imagem ou cor, será estendido para a área do</p><p>preenchimento, desse modo, podemos entender que o preenchimento(padding) é a extensão do</p><p>conteúdo(content). O preenchimento se localiza dentro do padding edge, e suas dimensões são a largura</p><p>do padding-box e a altura do padding-box. O espaço entre o padding e o content podem ser controlados</p><p>pelas seguintes propriedades CSS;</p><p>• Padding</p><p>• Padding-top</p><p>• Padding-right</p><p>• Padding-bottom</p><p>• Padding-left</p><p>Módulo: Desenvolvimento Front-end</p><p>52</p><p>Temos também a área da borda (border) se estende a área de preenchimento para a área que</p><p>contém as bordas. Esta é a área do border, e as dimensões dela são a largura e a altura do border-box.</p><p>A área do border depende do tamanho da borda que definimos pela propriedade border ou pela border-</p><p>width.</p><p>E por fim a área de margem (margin) se estende a área da borda com um espaço vazio usado</p><p>para fazer a separação dos elementos vizinhos. Esta área contém as dimensões de largura e altura do</p><p>margin-box. O tamanho da sua área é definido usando as seguintes propriedades:</p><p>• Margin</p><p>• Margin-top</p><p>• Margin-right</p><p>• Margin-bottom</p><p>• Margin-left</p><p>Vamos aplicar uma classe(.class) em um elemento para entendermos melhor a forma que o box</p><p>model funciona, definindo as propriedades de estilo. Assim podemos ver que o box model é de suma</p><p>importância para a estilização das páginas, deixando os elementos melhor organizados e visualmente</p><p>mais bonito e elegante os elementos da página em HTML.</p><p>Nesse caso, quando aplicamos a classe acima em um elemento, ele vai ter as dimensões que</p><p>definimos (50 pixels de altura e largura), correto? Não, errado. O elemento será mostrado com 72 pixels</p><p>de altura e 92 pixels de largura. Isso acontece pelo fato das propriedades padding e border serem</p><p>somadas à largura e alturas definidas anteriormente, consequentemente, aumentando as dimensões do</p><p>elemento. Com esse acontecimento podemos entender que as propriedades width e height definem as</p><p>dimensões do seu conteúdo e não do elemento em sua totalidade. Vamos ver como acontece esse tipo</p><p>de “erro”.</p><p>Largura: 50 (largura definida) + 20(padding left) + 20(padding right) + 1(border left) + 1(border right)</p><p>totalizando 92 pixels de largura.</p><p>Altura: 50(altura definida) + 10(padding top) + 10(padding bottom) + 1(border top) + 1(border top)</p><p>totalizando 72 pixels de altura.</p><p>Para a resolução desse tipo de problema, como tantos outros que podem acontecer, a atualização</p><p>do CSS 2 para o CSS 3, trouxe novas propriedades para auxiliar na correção desses problemas.</p><p>Box-Sizing</p><p>Uma das propriedades que o CSS3 trouxe para facilitar a vida dos desenvolvedores e o box-sizing.</p><p>Essa propriedade nos permite alterar o comportamento do box model. Por padrão, os elementos possuem</p><p>o valor content-box para essa propriedade.</p><p>Um exemplo para descrever melhor o box model com o uso do content-box. Considere os</p><p>elementos a seguir:</p><p>Módulo: Desenvolvimento Front-end</p><p>53</p><p>Os elementos são estilizados com o mesmo valor na largura, porem como podemos notar na</p><p>imagem acima, o elemento2 é mostrado maior pelo fato do padding ser adicionado a ele.</p><p>Uma propriedade que ajuda a resolver esse empasse é o box-sizing, permitindo um novo valor</p><p>resolvendo os problemas dos exemplos anteriores:</p><p>Qual a função dela? Simples. Essa propriedade altera o comportamento do box model, fazendo</p><p>que o browser (navegador) faça o cálculo a largura e altura do elemento, contando não somente o seu</p><p>conteúdo (como no content-box), mas considerando também, o padding e o border do elemento. Vamos</p><p>melhorar o exemplo anterior com a utilização do border-box;</p><p>Duas linhas de código do CSS foram adicionadas, aplicando a propriedade border-box, deste</p><p>modo melhorando a interação com o navegador e corrigindo o erro de espaçamento definido no CSS.</p><p>Vamos ver o resultado:</p><p>Sintaxe do Código: box-sizing: border-box;</p><p>Módulo: Desenvolvimento Front-end</p><p>54</p><p>Entretanto essa propriedade não é aceita total ou parcialmente em alguns navegadores ( em</p><p>média seria 90%, com 80% suporte parcial e com 18% suporte total), sendo assim se faz necessário</p><p>utilizar os prefixos para que essa propriedade aconteça da forma que for definida no código CSS. Segue</p><p>a sintaxe dos prefixos para ser mostrada nos navegadores;</p><p>Responda:</p><p>1) Qual a estrutura do box model?</p><p>2) Quais as propriedades usadas para posicionamento de elementos no box model?</p><p>3) A area do preenchimento estende-se para a _________________ em torno do __________.</p><p>4) O espaço entre p padding e o content podem ser controlados por quais propriedades?</p><p>5) Qual a Sintaxe da propriedade “box-sizing”?</p><p>6) Sabemos que nem todos os navegadores entendem a box-sizing nativamente, qual a linha de comando</p><p>devo utilizar para que não aconteça um erro na interpretação dessa propriedade?</p><p>7) Em qual momento é recomendado o uso da propriedade do border-box?</p><p>Desafio – Crie Um Formulário De</p><p>Contato Usando As Propriedades Do Box Model</p><p>Módulo: Desenvolvimento Front-end</p><p>55</p><p>Tema 8: Layout Responsivo</p><p>Figura 16: Layout de sites – Fonte: igluonline</p><p>O Que é Layout</p><p>Layout é um termo técnico para aparência, significa arranjo, esquema ou design. Na área de</p><p>design gráfico, layout é um rascunho da estrutura de uma página de revista, jornal ou página web. O</p><p>layout engloba muitos elementos como: gráficos, textos, imagem, e a forma que eles se comportam dentro</p><p>do espaço determinado pelo desenvolvedor.</p><p>É feito geralmente pelo design gráfico, em nossa área como desenvolvedores web, geralmente</p><p>nos é enviado o layout predefinido, pronto para a implementação em código. Mas em alguns momentos,</p><p>temos a necessidade de criarmos um layout, consequentemente devemos saber como funciona e o modo</p><p>que é criado um layout, não só isso, mas um layout responsivo (adaptável em todos os dispositivos</p><p>apresentados).</p><p>O layout de uma página depende da criatividade e do conteúdo que ela irá conter, deste modo,</p><p>precisamos entender a necessidade do cliente, a função do site, quais informações que ele precisa ter</p><p>destaque, e outras como alocar corretamente os menus e informações contidas nele.</p><p>Otimização De Layouts Web</p><p>A otimização do layout é de suma importância para as páginas web, pois através dele, exploramos</p><p>de maneira eficaz e eficiente todo o espaço determinado para as informações contidas na página web.</p><p>Devemos analisar alguns itens para a otimização/criação de um layout responsivo, vamos analisar alguns</p><p>deles;</p><p>S.E.O (Search Engine Optimization - Otimização de Mecanismos de Busca) – O SEO faz uso de</p><p>ferramentas disponíveis na internet como o planejador de palavras chave do google, onde é feito a</p><p>filtragem através das palavras chaves relacionadas ao tema do site, otimizando nas buscas, quando</p><p>usamos os mecanismos de busca.</p><p>Foco e Clareza – Vamos supor que você tenha uma página da sua empresa na internet, e um cliente faz</p><p>a busca com o mesmo assunto relacionado a sua empresa procurando um produto ou serviço. Ao navegar</p><p>pelo site esse cliente deve achar a informação que precisa imediatamente para que não saia do seu site</p><p>Módulo: Desenvolvimento Front-end</p><p>56</p><p>e vai buscar em outro. Pra isso o site deve conter clareza e foco em seu design, isso é a importância de</p><p>um layout responsivo, que realmente que funciona como ponte e se transforme em venda. Clareza e</p><p>objetividade no site, é o que faz toda a diferença, seu produto pode ser até melhor, ou seu serviço ser</p><p>referencia no mercado, mas se seu site não tem clareza nas informações, com menus intuitivos e</p><p>facilidade no acesso, o cliente consequentemente irá procurar outro site.</p><p>Carregamento Rápido – É comum pensarmos que o carregamento de um site não faz tanta diferença</p><p>assim, mas ao pensar assim, estamos totalmente errados, pois a velocidade do carregamento de um site</p><p>é determinante no quesito numero de acessos. Por exemplo você está navegando pela internet com os</p><p>dados móveis no seu celular, ao entrar em um determinado site, se ele demora muito pra carregar,</p><p>consequentemente você irá procurar outro site. Por esse, entre outros motivos, devemos nos atentar pelo</p><p>rápido carregamento do site. O layout responsivo entra nessa parte, definindo regras para que o</p><p>carregamento do site seja o mais rápido e eficiente possível.</p><p>Sem Excessos – Conhecemos o tão conhecido termo “Menos é Mais”, qualquer excesso em sites é</p><p>prejudicial, tanto em sites que possuem cores em excesso que podem causar cansaço nos usuários, ou</p><p>em sites monocromáticos que tornam o site sem vida e chatos e fazem que os usuários não fiquem muito</p><p>tempo. Imagens em tamanhos desproporcionais (muito pequena ou muito grande), acaba tirando o foco</p><p>das informações que realmente importa ou passando desapercebida. Por isso é importante ter</p><p>responsividade no layout para auxiliar a navegação do usuário no site. Devemos nos atentar em criar um</p><p>layout simples e objetivo, onde as informações mais importantes com destaque, e links intuitivos pois</p><p>devemos lembrar nem todos nossos usuários sabem navegar na internet.</p><p>Devemos lembrar que cada caso é um caso, não existem uma regra absoluta sobre layouts, a</p><p>regra usada é que o layout deve proporcionar uma experiência boa para o usuário, ajudando a encontrar</p><p>informações, sendo elegante, fácil acesso as informações e rápido carregamento. Esses são os pontos</p><p>importantes para que possamos criar um layout responsivo que realmente funcione.</p><p>CSS Grid e Flex Box</p><p>O CSS Grid é um sistema usado para estruturar layouts permitindo configurar em duas dimensões</p><p>com linhas e colunas. A grade é formada por essas linhas e colunas, por isso o nome Grid. Esse sistema</p><p>é muito completo e poderoso, pois ele permite a definição de certos elementos de maneiras diferentes, o</p><p>que no início pode até confundir, mas com o uso na prática acaba facilitando o entendimento.</p><p>Nesse capítulo vamos conhecer um pouco mais desse sistema que é bastante usado pelos</p><p>desenvolvedores em CSS. Antes de mais nada temos que entender que novas propriedades CSS são</p><p>essenciais para o uso do grid, onde temos elementos como grid container ou elemento pai e propriedades</p><p>para os itens da grid ou elementos filhos.</p><p>Alguns detalhes são importantes para o aprendizado da CSS GRID, ele requer um</p><p>desenvolvimento prático das habilidades não só de um layout, mas pensando como um sistema inovador</p><p>de uma nova forma de estruturação de layouts. Vejamos algumas dicas importantes para o correto uso</p><p>do CSS GRID, facilitando no entendimento das propriedades, e consequentemente usando de forma</p><p>correto e simples.</p><p>Sempre use nomes ao invés de números, em CSS GRID sabemos que são compostos por linhas</p><p>e colunas em sua essência. Por exemplo, esse CSS configura uma grade com 2 colunas e coloca o</p><p>conteúdo principal da página na 2ª coluna:</p><p>Módulo: Desenvolvimento Front-end</p><p>57</p><p>O código acima até funciona, porém não utiliza um recurso importante do CSS GRID, onde é</p><p>possível dar nomes específicos as linhas e colunas. Recomendo que use esse recurso sempre que puder,</p><p>para facilitar no uso e em futurar alterações do layout. Veja esse mesmo exemplo de forma melhorada;</p><p>Embora esse exemplo seja simples, mas serve para entendermos de como esse recurso funciona.</p><p>Em casos em que o layout tenha um código muito maior, usando esse recurso podemos identificar os</p><p>elementos mais facilmente, acelerando o processo tanto de criação como o de alteração.</p><p>A legibilidade é essencial, já que estamos falando de GRID. A linha 3 desse modo está</p><p>descrevendo tudo que está acontecendo dentro do grid container. Aqui não estamos listando apenas</p><p>listando as colunas, mas também delineando a intenção de cada coluna. É importante esse uso, pois aqui</p><p>estamos falando apenas de 2 colunas, mas quando o site tem mais colunas na página, a negligência no</p><p>uso desse recurso do CSS GRID, acaba complicando a vida do desenvolvedor web.</p><p>Nesse video temos com detalhes o uso do CSS GRID na prática, nele percebemos a importância</p><p>de uma boa organização do código em CSS, quanto na responsividade das informações do layout.</p><p>Como estamos trabalhando com uma grade (grid), precisamos fazer a indicação de quantas linhas</p><p>e colunas essa grade terá. Para as colunas usamos o grid-template-columns e para as linhas usamos o</p><p>grid-template-rows.</p><p>Temos esse resultado no navegador:</p><p>Módulo: Desenvolvimento Front-end</p><p>58</p><p>Do mesmo modo podemos declarar as linhas utilizando a propriedade grid-template-rows, veja o</p><p>código abaixo:</p><p>Temos o resultado no navegador:</p><p>Para melhorar o uso dessas propriedades podemos adicionar a grid-template-areas, pois o CSS</p><p>GRID nos permite dar nomes para cada área da nossa grade(grid), e</p><p>indicar onde cada elemento deve ir. até agora só declaramos o</p><p>tamanho das nossas colunas e linhas, notamos que os nossos itens</p><p>vão se organizando na grid de acordo com a ordem que estão no</p><p>documento HTML.Com essa propriedade fica simples entender a</p><p>estrutura da grade. Vamos definir o nosso HTML colocando as classes</p><p>nos itens da grade(grid) para indicarmos a posição de cada um deles</p><p>no CSS.</p><p>Nota – se que nomeamos cada item das classes, facilitando a identificação de cada um deles no</p><p>CSS. Para cada item, declaramos a propriedade grid-area, que nos permite indicar o nome da área que</p><p>cada elemento deverá ocupar na grid. Aqui está nomeado como exemplo, mas sinta-se a vontade para</p><p>nomeá-las de acordo com a necessidade.</p><p>Para nomearmos às areas, escrevemos dentro das aspas (“ ”), sendo assim , ao abrir novas aspas</p><p>estamos indicando que estamos indo para a linha seguinte. Note o exemplo abaixo:</p><p>Módulo: Desenvolvimento Front-end</p><p>59</p><p>Nesse caso, repetimos header e footer duas vezes porque declaramos 2 colunas, e queremos que</p><p>eles ocupem as duas.</p><p>Veja o resultado no navegador:</p><p>Percebemos que nossos itens estão colados, temos outra propriedade que podemos espaçar as</p><p>linhas e colunas, a propriedade grid-column-gap e grid-column-row. Vamos ver o código em CSS:</p><p>Veja o resultado no navegador:</p><p>O grid-gap é um atalho para declararmos as suas propriedades em um só lugar. Podemos usar</p><p>de duas formas, passando um único valor, onde os dois serão aplicados para o espaço de linhas e</p><p>colunas, ou passando dois valores o primeiro será para linhas e o segundo para colunas.</p><p>Módulo: Desenvolvimento Front-end</p><p>60</p><p>O uso do prefixo grid- destas propriedades mostradas aqui, estão sendo removidos, e já são</p><p>suportados nos navegadores modernos. Deste modo também pode-se utilizar as propriedades column-</p><p>gap, row-gap e gap.</p><p>Temos outras propriedades onde podemos definir, de maneira efetiva e simples, vejamos elas a</p><p>seguir:</p><p>JUSTIFY-ITEMS – Faz o alinhamento de todos os itens da grid horizontalmente dentro da sua própria</p><p>célula(área). Segue os valores dessa propriedade;</p><p>• stretch (padrão): estica os itens horizontalmente para eles preencherem sua célula.</p><p>• start: alinha os itens no início de suas células.</p><p>• end: alinha os itens no final de suas células.</p><p>• center: alinha os itens no centro de suas células.</p><p>ALIGN-ITEMS – Determina o alinhamento de todos os itens da grid verticalmente dentro da sua própria</p><p>célula (área). Segue os valores dessa propriedade;</p><p>• stretch (padrão): estica os itens verticalmente para eles preencherem sua célula.</p><p>• start: alinha os itens na parte de cima de suas células.</p><p>• end: alinha os itens na parte de baixo de suas células.</p><p>• center: alinha os itens no centro de suas células.</p><p>JUSTIFY-CONTENT – O justify-item alinha cada item dentro da sua própria área. Já o justify-content</p><p>alinha horizontalmente as áreas em relação ao container.</p><p>stretch: redimensiona os itens da grid para preencherem a largura do container. Apenas funciona se</p><p>você não tiver declarado uma largura para as colunas.</p><p>• start: alinha as áreas no início da grid.</p><p>• end: alinha as áreas no final da grid.</p><p>• center: alinha as áreas no centro da grid.</p><p>• space-around: distribui as áreas com o espaço a sua volta.</p><p>• space-between: distribui as áreas com o espaço entre elas.</p><p>• space-evenly: distribui o espaço igualmente entre as áreas.</p><p>ALIGN-CONTENT – O align-item faz o alinhamento de cada item dentro da sua própria área. Já o align-</p><p>content alinha verticalmente as áreas em relação ao container. Veja os valores dessa propriedade;</p><p>• stretch: redimensiona os itens da grid para preencherem a altura do container. Apenas funciona</p><p>se você não tiver declarado uma altura para as linhas.</p><p>• start: alinha as áreas no topo da grid.</p><p>• end: alinha as áreas na base da grid.</p><p>• center: alinha as áreas no centro da grid.</p><p>• space-around: distribui as áreas com o espaço a sua volta.</p><p>• space-between: distribui as áreas com o espaço entre elas.</p><p>• space-evenly: distribui o espaço igualmente entre as áreas.</p><p>Essas propriedades são as principais de uso quando falamos de CSS GRID, fazem parte de um</p><p>layout responsivo, em sua maioria, recomendo que treine essas propriedades modificando os valores</p><p>para compreender melhor seu uso.</p><p>Flexbox</p><p>Módulo: Desenvolvimento Front-end</p><p>61</p><p>O CSS Flexible Box Layout Model ou simplesmente Flexbox é uma das especificações do CSS3 que</p><p>promete fazer a organização dos elementos na página web previsivelmente quando o layout responsivo</p><p>se faz necessário, sendo visualizado em diversos tamanhos de tela em diferentes dispositivos. Ele nos</p><p>ajuda na organização desses elementos sem usar o float e também nos auxilia resolver problemas de</p><p>BOX MODEL que normalmente acontecem quando acrescentamos o border, margin e padding além da</p><p>largura do elemento.</p><p>A utilização do Flexbox é bem simples; os filhos deum elemento em Flexbox pode se posicionar em</p><p>qualquer direção e pode ser definido em dimensões flexíveis para se adaptar. Podemos posicionar</p><p>diversos elementos independente da sua posição no HTML, e isso é muito bom, pois deste modo está</p><p>resolvendo um dos problemas do float e da sua dependência com a estrutura dos elementos em HTML.</p><p>É necessário entender que o Flexbox é uma maneira nova de posicionar elementos no seu layout,</p><p>com isso precisamos de novos nomes para a identificação dos elementos da estrutura. Vamos conhecer</p><p>cada um deles;</p><p>FLEX CONTAINER – É o elemento que envolve a estrutura como um todo. Podemos definir que um</p><p>elemento é um Flex Container com a propriedade display com os valores flex ou inline-flex.</p><p>FLEX ITEM – São os elementos filho (child) do flex container.</p><p>AXES OU EIXOS – São as direções básicas que existem em um Flex Container: main axis, que seria o</p><p>eixo horizontal ou principal, e o cross axis que seria o eixo vertical.</p><p>DIRECTIONS – Determina o início e o fim do fluxo dos itens. Seguem o vetor estabelecido pelo modo</p><p>tradicional de escrita; da esquerda pra direita, direita pra esquerda, etc.</p><p>As propriedades order, flex-wrap e flex-flow também se fazem importantes para a definição de um</p><p>layout feito com Flexbox. A propriedade order determina o lugar que os elementos aparecerão, a</p><p>propriedade flex-flow determina a ordem do fluxo em que os elementos aparecerão e a propriedade flex-</p><p>wrap define se os elementos serão forçados a ficar a mesma linha ou se eles irão quebrar em várias</p><p>linhas.</p><p>Definindo Uma Estrutura Flexbox</p><p>Para darmos início vamos começar com o código em HTML;</p><p>Agora no CSS vamos definir que a div main irá virar um Flex Container, para isso definimos a</p><p>propriedade display com os valores flex ou inline-flex. O valor do Flex faz o elemento ser um BLOCO,</p><p>Módulo: Desenvolvimento Front-end</p><p>62</p><p>com o valor inline-flex, o elemento vira um inline-block com as propriedades do Flex Container. Vamos</p><p>ver como fica no código em CSS:</p><p>Nesse código automaticamente os divs da</p><p>nossa classe. main ficarão um ao lado do outro. Para</p><p>definirmos que os flex itens comecem a ter uma</p><p>distribuição na largura, basta definirmos para eles a</p><p>propriedade flex, segue modelo ao lado:</p><p>A propriedade flex é um atalho para as propriedades flex-grow, flex-shrink e flex-basis. Vamos</p><p>supor que queremos modificar a ordem que os elementos aparecem. É bem simples, é so usarmos a</p><p>propriedade order e modificar as colunas:</p><p>Flex-flow</p><p>Vamos supor que ao invés de colunas, nós optamos</p><p>por linhas. Caso seja necessário criar uma versão para</p><p>mobile, em mobile ter colunas é ruim, então devemos definir</p><p>apenas a propriedade flex-flow com o valor column, vamos</p><p>ver no código a seguir:</p><p>Essa propriedade possui outros valores, como row, row-reverse e column-reverse. O row-reverse</p><p>e o column-reverse invertem a ordem dos elementos automaticamente sem a obrigação de modificar</p><p>novamente a propriedade order definido de cada elemento.</p><p>O Flexbox funciona perfeitamente no Google</p><p>Chrome, alguns testes foram feitos no Safari e no Mozilla e não funcionaram, no Edge funciona com o (-</p><p>Módulo: Desenvolvimento Front-end</p><p>63</p><p>ms) aplicado no CSS. O importante saber pra qual uso será o site assim definindo assim suas</p><p>configurações dentro do código para não ter erros no navegador.</p><p>Esse vídeo mostra de forma mais detalhada o uso do Flexbox, essa poderosa ferramenta usada</p><p>em layouts de páginas. Confira no vídeo:</p><p>Responda:</p><p>1) Por que devo fazer um layout de um site?</p><p>2) Por que é importante definir um layout responsivo?</p><p>3) Quais os principais aspectos devo observar na hora de criar um layout?</p><p>4) Quais as ferramentas que o CSS3 disponibiliza para um layout responsivo e eficaz?</p><p>5) O que é CSS GRID?</p><p>6) O que é Flexbox?</p><p>7) Qual a função da propriedade align-item?</p><p>8) Qual a diferença entre o align-item e o align-content?</p><p>9) Como chama as estruturas de Flexbox?</p><p>10) Qual a vantagem do Flexbox e o box model?</p><p>Desafio – Crie um site de perfil pessoal com uso do CSS Grid ou Flexbox.</p><p>Módulo: Desenvolvimento Front-end</p><p>64</p><p>Tema 9: JavaScript</p><p>Figura 17: JavaScript – Fonte: dankicode</p><p>Oque é JavaScript</p><p>Em 1996 o programador Brendan Eich cria a linguagem JavaScript, uma linguagem de</p><p>programação de alto nível muito usado em páginas web devido ser uma linguagem que permite interações</p><p>diferentes com o usuário e de fácil aplicação, o JavaScript tem compatibilidade com todos os</p><p>navegadores, facilitando a aplicação em páginas web. O JavaScript também é conhecida como uma</p><p>linguagem de programação comportamental, criando conteúdos dinâmicos, controles de mídias e</p><p>animações para deixar as páginas web com mais interatividade e mais interessantes. Mas porque usar o</p><p>JavaScript nas páginas web e não outras linguagens? Vamos conhecer algumas características</p><p>importantes do JavaScript que se sobressaem das outras linguagens.</p><p>• O JavaScript é uma linguagem que não precisa de um compilador, pois a interpretação é feita nos</p><p>navegadores internet.</p><p>• É uma linguagem de fácil aprendizado.</p><p>• É totalmente compatível com várias plataformas e navegadores.</p><p>• É mais leve que as outras linguagens de programação.</p><p>• Os erros no JavaScript são mais fáceis de serem localizados, logo são mais fáceis de serem</p><p>corrigidos.</p><p>• Com o JavaScript é possível fazer sites mais interativos e que segura a atenção do usuário.</p><p>Sintaxe Básica</p><p>O JavaScript é uma linguagem case-sensitive (linguagem que faz diferenciação entre letras</p><p>maiúsculas e minúsculas), que usa o conjunto de caracteres Unicode. Por exemplo se uma variável se</p><p>chama Loja, quando eu for usa-la se eu escrever loja, certamente vai dar erro, pois ela é case-sensitive.</p><p>As instruções no JavaScript são chamadas de declaração e são separadas por ponto e vírgula ( ; ). O</p><p>código fonte dos scripts em JavaScript são lidos da esquerda pra direita e são convertidos em uma</p><p>sequência de elementos de entrada. Vamos conhecer as sintaxes do JavaScript e entendermos seu uso:</p><p>Módulo: Desenvolvimento Front-end</p><p>65</p><p>COMENTÁRIOS – Os comentários em JavaScript são definidos de duas formas, a primeira é comentário</p><p>de uma única linha (// comentário de uma linha), e a segunda é o comentário de múltiplas linhas (/*</p><p>comentário de múltiplas linhas*/).</p><p>DECLARAÇÕES – Existem 3 tipos de declarações em JavaScript, são elas:</p><p>• Declaração de variáveis, onde opcionalmente, inicializando-a com um valor.</p><p>• Declaração let, onde permite que declare várias variáveis limitando o escopo no bloco.</p><p>• Declaração de constantes, onde possuem escopo de bloco. O valor de uma constante não pode</p><p>ser alterado por uma atribuição ou ser redeclarada.</p><p>VARIAVEIS - As variáveis são como o sistema trata uma parte da memória para alocar/guardar</p><p>informações, onde podem ser usadas posteriormente. Exemplo:</p><p>Preciso fazer uma conta aritmética simples e mostrar o resultado através de uma variável. Então</p><p>vamos lá – Tenho a variável chamada soma, nela será armazenada a soma entre dois números, numero1</p><p>+ numero2 = soma, logo se preciso mostrar a soma dos números não preciso de um numero3, apenas</p><p>eu chamo a variável soma.</p><p>Em JavaScript o nome das variáveis é chamado de identificadores e obedecem a algumas regras</p><p>– Um identificador JavaScript deve começar com uma letra, underline (_), ou cifrão ($); os caracteres</p><p>subsequentes podem também ser números (0-9). Pelo fato do JavaScript ser case-sensitive, letras</p><p>incluem caracteres de “A” a “Z” (maiúsculos) e de “a” a “z” (minúsculos).</p><p>Vamos ver algumas formas usadas para a declaração de variáveis:</p><p>• Com a palavra-chave var. Exemplo – var x = 75. Esta sintaxe pode ser usada para declarar tanto</p><p>variáveis locais como globais.</p><p>• Com a palavra-chave let. Exemplo – let y = 50. Esta sintaxe pode ser usada para declarar uma</p><p>variável local de escopo de bloco.</p><p>Uma variável sendo declarada usando var ou let sem especificar o valor inicial tem o valor undefined.</p><p>As variáveis se dividem nos seguintes tipos:</p><p>String – São variáveis de texto, quase sempre chamada de “cadeia de caracteres”. Os valores atribuídos</p><p>a esse tipo normalmente usam aspas duplas ( “ “ ) ou aspas simples (‘ ’).</p><p>Float – Variáveis com ponto flutuante, ou seja, variáveis com números em casas decimais.</p><p>Boolean – Tipos de variáveis com valores true(verdadeiro) e false(falso).</p><p>Int – São variáveis com números inteiros.</p><p>Arrays – Uma variável array faz a referência a vários espaços na memória, é um conjunto de valores</p><p>organizados por um índice.</p><p>JavaScript na Prática</p><p>O JavaScript pode ser inserido na página HTML de duas formas:</p><p>INTERNO – Inserido no próprio documento em HTML utilizando as tags e , conforme na</p><p>imagem abaixo:</p><p>Módulo: Desenvolvimento Front-end</p><p>66</p><p>EXTERNO – Implantado em um documento externo (.js), em um documento separado do HTML. Deste</p><p>modo devemos fazer a referência desse documento JavaScript na página HTML, conforme imagem</p><p>abaixo:</p><p>Usando as variáveis no JavaScript como vimos acima, vamos ver na prática o funcionamento da</p><p>linguagem, sempre atento nas regras de declaração de variáveis. Vamos ver um exemplo:</p><p>O JavaScript por ser uma linguagem de programação, nos oferece métodos mais avançados do</p><p>que as linguagens vistas até aqui, uma delas são as funções. As funções podem receber parâmetros e</p><p>retornar valores, porém o tipo de retorno e o tipo dos parâmetros não precisa ser definido previamente.</p><p>Vamos ao exemplo abaixo:</p><p>Esse é um exemplo de uma função em JavaScript sem parâmetros e sem retorno.</p><p>Esse é um exemplo de uma função em JavaScript com parâmetro e com retorno. Nota – se que</p><p>para definirmos um retorno em uma função, devemos utilizar a palavra return seguida do valor ou</p><p>expressão do resultado.</p><p>Controle de Fluxo e Estruturas Condicionais</p><p>Estruturas de controle de fluxo, conhecidas também como estruturas condicionais, são estruturas</p><p>onde se define condições em forma de looping, encadeando processos onde o resultado depende de</p><p>ações predefinidas em uma das condições. Vamos ver o código abaixo como exemplo:</p><p>Módulo: Desenvolvimento Front-end</p><p>67</p><p>Nesse exemplo vimos a sintaxe da estrutura if-else, o</p><p>bloco de instruções else pode ser omitido, em casos</p><p>que apenas uma condição precise ser avaliada. No</p><p>próximo exemplo temos uma variável chamada idade</p><p>sendo avaliada, e dependendo do seu valor, uma</p><p>mensagem é exibida na tela.</p><p>Em outros casos onde necessitamos de mais condições, usamos</p><p>a estrutura switch para verificar o valor da variável e retornar o</p><p>valor.</p><p>O comando switch faz a verificação do valor de uma variável, sendo que pra cada opção executa</p><p>um conjunto de ações. Caso nenhum dos valores for verificado, os comandos do bloco default são</p><p>executados. O bloco default, porém, pode ser omitido caso não</p><p>exista uma ação padrão a ser executada</p><p>se nenhuma das opções for observada.</p><p>O comando switch usado em outro exemplo, nesse caso a verificação de qual dia da semana.</p><p>Laços De Repetição</p><p>Existem estruturas de repetições, onde comando executa o comando dentro do loop até que o</p><p>retorno seja diferente do determinado para entrar em loop. No</p><p>JavaScript uma desses laços se chama while (enquanto –</p><p>português). Vamos ver um exemplo no código:</p><p>Módulo: Desenvolvimento Front-end</p><p>68</p><p>Essa estrutura de repetição while é muito usada para</p><p>executar um conjunto de ações enquanto uma condição for</p><p>verdadeira. Quando a condição retorna o valor falso, o bloco de</p><p>comando é finalizado. Vamos ver um exemplo bastante usado</p><p>em JavaScript:</p><p>Outra estrutura semelhante é a do – while, que executa</p><p>um bloco de ações até que uma condição seja falsa. Mas, essa</p><p>condição é validada após a execução dos comandos, fazendo</p><p>com que estes sejam executados pelo menos uma vez.</p><p>Um exemplo semelhante ao comando while pode ser</p><p>usado para representar a sintaxe do comando do-while. Vamos</p><p>ver o código ao lado:</p><p>E a última estrutura de repetição usada no JavaScript é o for, ele usa um contador para executar</p><p>um bloco de ações uma determinada quantidade de vezes. Vejamos um exemplo da sintaxe:</p><p>Fica mais fácil entender essa estrutura quando</p><p>observamos um exemplo prático. No exemplo abaixo,</p><p>temos uma variável contador é inicializado com o valor</p><p>zero, e enquanto for menor que 10, o laço deve ser</p><p>executado.</p><p>Comando Alert</p><p>A função prompt é semelhante a função</p><p>alert, a diferença, que na janela pop-up que</p><p>essa função exibe é possível digitar texto,</p><p>assim coletando dados digitados pelo usuário.</p><p>Vamos ao exemplo da sintaxe:</p><p>Veja o resultado no navegador:</p><p>Módulo: Desenvolvimento Front-end</p><p>69</p><p>Comando Prompt</p><p>A função prompt é semelhante a função</p><p>alert, a diferença, que na janela pop-up que essa</p><p>função exibe é possível digitar texto, assim</p><p>coletando dados digitados pelo usuário. Vamos ao</p><p>exemplo da sintaxe:</p><p>Veja o resultado no navegador:</p><p>Nesse caso o valor coletado pelo prompt, foi atribuído a uma variável, e a função alert exibiu o</p><p>valor dessa variável, sendo o valor digitado “Aluno NovoTec”.</p><p>Objeto Window</p><p>O objeto window é usado para fazer a manipulação das janelas do navegador. Toda vez que</p><p>abrirmos o navegador simultaneamente esse objeto é gerado, isso acontece porque esse objeto</p><p>representa exatamente essa janela que foi aberta. Para criarmos esse objeto, não precisamos usar</p><p>nenhum tipo de linguagem, como HTML, porque isso é feito automaticamente pelo navegador. Com esse</p><p>objeto podemos criar e abrir novas janelas de maneiras diferentes. Esses processos são possíveis através</p><p>das propriedades e métodos que o objeto window possui. Vamos ver a sintaxe desse objeto:</p><p>• window.propriedade</p><p>• window.metodo</p><p>Propriedades</p><p>As propriedades do objeto window tem como objetivo modificar os aspectos em relação à janela</p><p>do navegador.</p><p>• Closed – Esta propriedade retorna um valor booleano indicando se a janela foi fechada.</p><p>• DefaltuStatus – Esta propriedade nos permite definir uma mensagem padrão que será</p><p>exibida no status do navegador.</p><p>Módulo: Desenvolvimento Front-end</p><p>70</p><p>• Document – Esta propriedade possui todas as características da página HTML, onde</p><p>podemos integrar no meio de um comando JavaScript tag HTML.</p><p>• Frames: Array de frames em uma janela.</p><p>• History: Esta propriedade contém uma lista representando as URLs que o usuário já</p><p>visitou. Podemos acessar todas as URLs visitadas pelos usuários atribuindo os seguintes</p><p>métodos a essa propriedade: current, next e previous.</p><p>• InnerHeigth: Com esta propriedade podemos definir ou obter a altura da área onde o</p><p>conteúdo é apresentado, não a altura do navegador em si.</p><p>• InnerWidth: Com esta propriedade podemos definir ou obter a largura da área onde o</p><p>conteúdo é apresentado, não a largura do navegador em si.</p><p>• Length: Informa a quantidade de frames existentes em uma janela.</p><p>• Location: Esta propriedade tem informações referentes ao endereço corrente. Um</p><p>exemplo é a propriedade hostname, que retorna o nome do servidor que está hospedando</p><p>a página carregada. Nessa propriedade temos mais dois métodos:</p><p>• Reload: Que força o navegador a carregar a página.</p><p>• Replace: Que carrega a URL informada.</p><p>• Name: Podemos utilizar para definir ou obter o nome da janela.</p><p>• Navigator: Esta propriedade contém informações sobre o navegador, nome, versão, e</p><p>outras informações. O objeto navigator possui também um método interessante:</p><p>• javaEnabled(): Que informa se o navegador está com o Java habilitado.</p><p>Vamos utilizar o objeto document como exemplo para aprendermos como funciona a sintaxe do</p><p>objeto window.</p><p>Document.write</p><p>O método document.write serve</p><p>para escrever informações no documento</p><p>HTML. Ele é muito simples de usar, basta</p><p>colocar dentro de parênteses ( ) o que</p><p>deseja que apareça no documento. Vamos</p><p>definir duas variáveis, uma com um nome</p><p>e outra com idade, então vamos escrever</p><p>no documento a string (texto): “Meu nome</p><p>é [nome] e tenho [idade] anos” No código</p><p>HTML fica assim:</p><p>Note que quando usamos texto para aparecer no</p><p>documento, ele deve estar entre aspas “ ” , e quando usamos uma</p><p>variável para mostrar o valor é somente o nome da variável, nesse</p><p>caso nome e idade. Vamos conferir o resultado no navegador:</p><p>Manipulando Eventos</p><p>Os eventos são disparados quando alguma ação é executada, como clique num botão, ou a</p><p>digitação de valores em um input. No código podemos atribuir valores aos eventos como se fossem</p><p>propriedades, desde que o valor atribuído seja</p><p>um código a ser executado. Por exemplo na</p><p>imagem abaixo, mostra o código de uma</p><p>página com um botão, que, ao ser clicado,</p><p>exibe uma mensagem (alert):</p><p>Módulo: Desenvolvimento Front-end</p><p>71</p><p>Vamos ver o resultado no</p><p>navegador:</p><p>Nesse exemplo as tags ... não foram necessárias, pois o código encontra-se</p><p>dentro do próprio button. Caso o código a ser executado no evento seja muito extenso, é possível criar</p><p>uma função para isso e associá-la ao evento em questão. Vamos ver um exemplo:</p><p>Esse exemplo tem como resultado o mesmo do anterior no navegador, a diferença dele, é que o</p><p>evento foi chamado no próprio botão.</p><p>OnMouseover – O evento onmouseover executa um código em JavaScript quando o ponteiro do mouse</p><p>é movido para um elemento ou para um de seus filhos.</p><p>OnMouseout – O evento executa um JavaScript quando o ponteiro o mouse é movido para fora de um</p><p>elemento ou de seus filhos.</p><p>OnLoad – Esse evento carrega o elemento JavaScript.</p><p>OnBlur – Esse evento remove o foco do elemento.</p><p>OnChange – Esse evento altera o valor do elemento.</p><p>OnClick – Esse evento executa um comando quando é clicado pelo usuário.</p><p>OnKeyPress – Esse evento é executado quando o usuário pressiona uma tecla sobre o elemento.</p><p>OnSubmit - Esse evento é usado em formulários, onde é definida uma ação em JavaScript.</p><p>OnFocus – Esse evento é aplicado um foco no elemento.</p><p>Os eventos são muito importantes no JavaScript, pois facilita na interação com o usuário e é</p><p>carregado de modo instantâneo.</p><p>Usamos os eventos de duas maneiras:</p><p>INLINE – Dessa maneira o evento é definido diretamente na tag do elemento, vamos ao exemplo:</p><p>EXTERNO – Para usarmos um evento externo, é preciso de um manipulador de evento, nesse exemplo</p><p>vamos usar o event listener que adiciona ou remove um evento sobre qualquer elemento. Esse evento</p><p>nos disponibiliza duas funções principais, são elas:</p><p>Módulo: Desenvolvimento Front-end</p><p>72</p><p>addEvent – Adiciona uma função que será disparada quando ocorrer determinado evento no objeto.</p><p>removeEvent – Remove um listener previamente adicionado em um objeto e retorna o valor true, em</p><p>caso</p><p>de sucesso.</p><p>Vamos ver um exemplo do uso desse evento:</p><p>Vamos ver mais alguns exemplos de eventos mais usados no JavaScript:</p><p>Evento onload</p><p>Evento onchange</p><p>Módulo: Desenvolvimento Front-end</p><p>73</p><p>Eventos onmouseover e onmouseout</p><p>Eventos onmousedown, onmouseup e onclick</p><p>Por essas e outras que o JavaScript vem se tornando cada vez mais usado e ganhando adeptos</p><p>todos os dias, uma linguagem leve, interativa e de fácil aplicação.</p><p>Responda:</p><p>1) O que é o JavaScript?</p><p>2) Qual o nome do criador do JavaScript e em que ano foi criado?</p><p>3) Quando usamos o JavaScript para páginas web, qual as vantagens dele quanto as outras linguagens?</p><p>4) Como posso inserir um arquivo JavaScript numa página em HTML?</p><p>5) Quais as estruturas de repetição do JavaScript?</p><p>6) O object window é usado para ________________ no navegador.</p><p>Módulo: Desenvolvimento Front-end</p><p>74</p><p>7) O que faz a função do alert?</p><p>8) Qual a função do prompt?</p><p>9) Qual a diferença de inserir um link para um arquivo JavaScript interno e um externo?</p><p>10) Quais os principais tipos de variáveis no JavaScript?</p><p>Desafio</p><p>Crie uma rotina em JavaScript em que o usuário digite um nome e a idade, e na janela do navegador</p><p>apareça o nome e a idade digitados pelo usuário.</p><p>Módulo: Desenvolvimento Front-end</p><p>75</p><p>Tema 10: Cookies e Bibliotecas</p><p>Oque São Cookies</p><p>Os cookies são pequenos arquivos criados por sites em que o usuário visitou, e que são salvos</p><p>no computador do usuário, por meio do Browser. Eles contém informações que são usadas para identificar</p><p>o visitante, seja para personalizar a página de acordo com o perfil, ou até mesmo para facilitar o transporte</p><p>de dados entre as páginas de um mesmo site. Cookies também são comumente relacionados a casos de</p><p>violação de privacidade em sites web.</p><p>Essa tecnologia existe desde seu início da internet doméstica, nos anos 1990, foi criada para</p><p>atender às demandas do E-commerce, mas foi ganhando diferentes propósitos ao decorrer dos anos. A</p><p>lei GDPR (General Data Protection Regulation – Regulamento Geral de Proteção de Dados). Ela</p><p>regulamenta a transparência das informações fornecidas ao site pelo usuário e obriga a exibição de um</p><p>aviso sobre a política de cookies adotada pelo site. Os cookies podem ser divididos em duas categorias</p><p>principais, com muitos subconjuntos:</p><p>COOKIES DE SESSÃO – São cookies que permanecem no navegador mantêm suas informações até</p><p>que as sessões sejam fechadas. Quando uma nova janela do navegador é aberta, o mesmo usuário é</p><p>tratado como um novo visitante e deve inserir suas credenciais de login.</p><p>COOKIE PERSISTENTE – Os cookies persistentes têm uma vida útil determinada e permanecem no</p><p>navegador até o período decorrido, ou até mesmo, seja excluído manualmente. Os sites que usam</p><p>cookies persistentes lembram os usuários mesmo depois de fecharem o navegador. Esse tipo de cookie</p><p>ativa recursos como carrinhos de comprar persistentes, que retém produtos adicionados ao carrinho entre</p><p>sessões.</p><p>O cookie em si é apenas uma pequena linha de texto, nele não contém informações sobre o</p><p>usuário ou a máquina do usuário. Nos cookies normalmente contém a URL do site que colocou o cookie,</p><p>um número único gerado exclusivamente para aquele acesso e a data de validade do cookie.</p><p>Vamos ver os tipos de sites que usam essa tecnologia e como funciona em cada um deles:</p><p>E-Commerce (Comércio eletrônico)</p><p>No comércio eletrônico essa estratégia serve para manter itens adicionados a um carrinho de</p><p>compras mesmo que o usuário mude de página, ao navegar entre produtos diferentes. Sem o uso dos</p><p>cookies, os sites não seriam capazes de manter informações salvas no meio do caminho. Além de permitir</p><p>a preservação de dados durante o acesso, os cookies funcionam como uma espécie de identificador do</p><p>Módulo: Desenvolvimento Front-end</p><p>76</p><p>computador. Usando esse recurso, os endereços online podem personalizar anúncios e destaques a</p><p>serem exibidos para os usuários, com base no histórico de visitas anteriores.</p><p>Os sites de E-commerce usam uma combinação de cookie de sessão e cookie persistentes para</p><p>criar uma experiencia perfeita no carrinho de compras. Quando o usuário adiciona itens ao carrinho, os</p><p>cookies da sessão acompanham os itens. Caso o usuário abandonar o carrinho, os cookies persistentes</p><p>fazem a recuperação de suas seleções do banco de dados na próxima vez que ele visitar, ou até mesmo</p><p>permite que o desenvolvedor crie campanhas personalizadas de redirecionamento que incentivem o</p><p>usuário a revisitar o carrinho. Esse recurso é de grande ajuda para incentivar as conversões para vendas.</p><p>Login</p><p>A recuperação de algo que foi digitado pelo usuário pode ser feita pelo uso de cookies no seu site.</p><p>Usando esse recurso, nomes, endereços, dados de cadastro em formulários ou até mesmo termos de</p><p>busca usados em campos de pesquisa podem ser restaurados. Os cookies funcionam para lembrar que</p><p>um usuário está logado em um determinado site. Ao entrar em um serviço que exija senha, a autenticação</p><p>fica ativa mesmo após atualizar a página ao navegar nos endereços internos. Sem o uso dos cookies,</p><p>sites como Youtube, Netflix, Amazon Prime ou qualquer outro com conta de usuário vinculadas precisaria</p><p>de um novo login toda vez que um video for carregado.</p><p>Privacidade e Segurança</p><p>Ao fazer usos carrinhos de compras, logins com validade duradoura e outros elementos que</p><p>melhoram a experiência de navegação, os cookies pedem em troca a privacidade do usuário. Esses sites</p><p>podem usar as informações disponibilizadas pelos usuários nesses arquivos para compor um padrão de</p><p>identificação na web, que por sua vez não depende de visitas diretas ao site. Com o uso dessa prática,</p><p>uma loja pode conhecer o padrão de consumo do usuário mesmo que ele nunca tenha visitado o site.</p><p>A segurança é muito importante ao usarmos a politica de cookies, os hackers mal-intencionados</p><p>podem aproveitar as informações presentes em cookies para aplicar golpes na web. Um dos ataques</p><p>mais conhecidos é aquele que fazem uso dos dados de validação de login e senha para navegar em uma</p><p>determinada loja virtual, assim comprando produtos no nome da vítima.</p><p>Um video que explica um pouco mais sobre a LGPD e suas práticas, aprenda, mais sobre esse</p><p>recurso muito bom para ajudar os desenvolvedores de website.</p><p>Bibliotecas</p><p>Biblioteca é um arquivo que organiza código pré-definido para uso em aplicações. São uma</p><p>coleção de recursos usados por programas de computador e podem incluir:</p><p>• Dados de configuração</p><p>• Documentação</p><p>• Procedimentos</p><p>• Classes</p><p>• Funções</p><p>• Templates</p><p>Módulo: Desenvolvimento Front-end</p><p>77</p><p>• Especificações de tipos</p><p>• Entre outros recursos</p><p>Mas o que deve estar se perguntando, por que usar bibliotecas? Vou te apresentar algumas</p><p>vantagens para você entender melhor:</p><p>• Funções comuns são pré-definidas para programação modular.</p><p>• Rapidez no desenvolvimento da aplicação, pois podem ser usadas por vários programas</p><p>distintos, mas que necessitem de funcionalidades similares. Assim implementação reuso</p><p>de código em aplicações.</p><p>• Com as bibliotecas podemos escrever códigos menores e mais organizados, poupando</p><p>tempo precioso no desenvolvimento e diminuindo a ocorrência de erros.</p><p>• Facilitam a atualização do programa.</p><p>• Ao usar uma biblioteca, um programa passa a ser capaz de executar suas funções sem</p><p>que seja necessário implementa-las no programa em si.</p><p>Centenas de bibliotecas estão disponíveis para uso de aplicações. Algumas das mais conhecidas</p><p>incluem:</p><p>• NumPy – Utilizada na linguagem Python</p><p>• jQuery – Utilizada na linguagem JavaScript</p><p>• Matplotlib – Utilizada na linguagem Python</p><p>• D3.js – Utilizada em JavaScript</p><p>• Processing.js – Utilizada no JavaScript</p><p>• STL – C++ Standard Library – Utilizada no C++</p><p>Bibliotecas Padrão</p><p>Disponibilizadas por Padrão nas implementações de</p><p>uma linguagem de programação, geralmente</p><p>descritas na especificação da linguagem à qual pertencem.</p><p>Tratada como parte da linguagem em si, mesmo sendo uma entidade separada. Traz funções</p><p>gerais, como acesso a disco, a manipulação de strings, entrada e saída, etc.</p><p>Exemplos de Bibliotecas Padrão:</p><p>• Biblioteca Padrão C</p><p>• JCL – Java Class Library</p><p>• Python Standard Library</p><p>• FCL – Framework Class Library (.NET Framework)</p><p>• C++ Standard Library</p><p>Vinculação de Bibliotecas</p><p>As Bibliotecas podem ser vinculadas e acessadas em dois momentos distintos, dependendo da</p><p>linguagem e bibliotecas empregadas:</p><p>• Ligadas ao programa durante o processo de compilação: Bibliotecas Estáticas</p><p>• Acessadas somente durante a execução do programa (em runtime): Bibliotecas Dinâmicas ou</p><p>ainda Bibliotecas Compartilhadas.</p><p>Exemplos de arquivos de bibliotecas incluem arquivos com as extensões tipo: .dll, .so, .h e .lib.</p><p>Módulo: Desenvolvimento Front-end</p><p>78</p><p>Quando começamos a falar de bibliotecas, geralmente acaba confundindo com arquivo de</p><p>cabeçalho, mas existe algumas diferenças. Um arquivo de cabeçalho é um arquivo que contém</p><p>referências a bibliotecas em uma linguagem. Traz, por exemplo, listas de nomes e funções (protótipos) e</p><p>como chamar essas funções, além de tipos de dados e constantes usadas pelas bibliotecas. Sendo assim,</p><p>trata-se de uma interface para uma implementação – a biblioteca em si.</p><p>BIBLIOTECA/FRAMEWORK - Sabemos que o JavaScript é uma das linguagens mais usadas na web,</p><p>juntamente com a HTML e a CSS, dão vida e interatividade a boa parte dos sites. Assim como as outras</p><p>linguagens, ao longo dos anos o JavaScript foi sendo aperfeiçoado e ganhando cada vez mais</p><p>notoriedade no meio web. Dessa forma foi sendo criados vários plugins/frameworks/bibliotecas para se</p><p>usar o JavaScript, visando a facilidade do uso da linguagem em tarefas comuns do nosso cotidiano de</p><p>desenvolvimento web.</p><p>A grande maioria desses frameworks são compartilhados de forma gratuita na internet, e ainda</p><p>com open Source. Alguns desses frameworks, devido o grande poder que possuem, acabam se</p><p>destacando e tornando-se fundamental para o desenvolvimento web. Vale lembrar que bibliotecas são</p><p>um conjunto de códigos prontos para uso, esses códigos podem conter classes, instruções, funções e</p><p>rotinas que podem ser implementadas em diversas aplicações web.</p><p>Framework é um conjunto de bibliotecas em um formato padrão para o uso, podemos inserir o</p><p>nosso próprio código, a um código já existente no framework, mas o seu código tem que respeitar as</p><p>regras do framework, caso eu optar para usar um framework, preciso entender como ele trabalha e fazer</p><p>meu código pensando nele.</p><p>A desvantagem de se trabalhar com framework, é que seu código fica “amarrado” a ele, então se</p><p>futuramente esse framework se tornar obsoleto, o seu código continua amarrado a ele, tornando inviável</p><p>seu uso. Por isso é mais funcional o uso de bibliotecas devido a facilidade de utilização e implementação</p><p>nos códigos, não criando uma dependência de utilização. Vamos conhecer algumas bibliotecas e</p><p>frameworks mais conhecidos e usados atualmente.</p><p>Principais Bibliotecas</p><p>jQuery é a principal biblioteca JavaScript atualmente, ela foi criada em 2006 pelo engenheiro de</p><p>software americano John Resig, e tem sido usado em sites ao redor do mundo. Algumas estimativas</p><p>indicam que o jQuery é usado em mais de 50% dos sites ativos hoje. Uma das vantagens do jQuery é</p><p>que ele “entende” que nem todos os navegadores podem possuir os mesmos recursos iguais, mas com</p><p>nomes diferentes permitindo uma boa compatibilidade entre eles. Uma das desvantagens é que podem</p><p>ocorrer conflitos entre scripts dificultando a depuração em alguns casos.</p><p>D3.JS é uma biblioteca JavaScript ideal para se trabalhar com dados, essa biblioteca é uma ótima</p><p>ferramenta para visualizações personalizadas, serve tanto para gráficos simples em formato de barras</p><p>por exemplo, como para os mais complexos em 3D. Uma das vantagens do D3.js é que tem um rico</p><p>conjunto de ferramentas para visualização de dados. Uma das desvantagens é a falta de privacidade</p><p>caso os dados sejam sigilosos.</p><p>Biblioteca Biblioteca Código-Fonte do Programa</p><p>Módulo: Desenvolvimento Front-end</p><p>79</p><p>REACT é uma das principais bibliotecas usadas hoje em dia, sendo uma biblioteca de código</p><p>aberto apoiada pelo Facebook, o react é usado para ajudar no desenvolvimento de aplicativos web em</p><p>pequena ou larga escala. Ele usa componentes, que ajudam a encapsular código e estado. O uso de</p><p>componentes facilita a construção de interfaces de usuário mais complexos. Uma das vantagens do react</p><p>é que ele é muito fácil para aprender e utilizar, por isso o crescimento exponencial no uso dessa biblioteca.</p><p>Uma das desvantagens é que ela abrange apenas uma camada da interface do usuário do aplicativo, ou</p><p>seja, pode exigir em algum momento, outra tecnologia como complemento para a parte de visualização.</p><p>GLIMMER.JS é uma biblioteca JavaScript com componentes de UI (User Interface – Interface do</p><p>Usuário) e foco em rapidez e leveza para web, o objetivo dos fundadores, foi desenvolver algo menor e</p><p>mais leve que o Ember.js (outra biblioteca JavaScript). Uma das vantagens dessa biblioteca é que ela faz</p><p>a diferenciação entre elementos estáticos e dinâmicos. Uma das desvantagens é que ela é destinada a</p><p>ser usada prioritariamente no Ember, causando a dependência dessa tecnologia;</p><p>Responda:</p><p>1) O que são cookies?</p><p>2) Para que servem os cookies?</p><p>3) O que é biblioteca JavaScript</p><p>4) Por que o uso de bibliotecas é importante no desenvolvimento de aplicativos web?</p><p>5) Qual a biblioteca JavaScript mais usada atualmente?</p><p>6) Qual biblioteca JavaScript é recomendada para uso de dados gráficos?</p><p>7) Para qual propósito inicialmente os cookies foi criado?</p><p>Módulo: Desenvolvimento Front-end</p><p>80</p><p>Tema 11: Frameworks</p><p>Principais Frameworks</p><p>BOOTSTRAP é um dos principais frameworks JavaScript web do mercado, ele é capaz de</p><p>oferecer padrões para o desenvolvimento HTML, CSS e JavaScript. Com ele é possível criar designs</p><p>responsivos com uma aparência razoável sem precisar sem um expert em design ou front-end. Uma das</p><p>vantagens do bootstrap é que ele oferece uma estrutura consistente que suporta grande parte dos</p><p>navegadores. Uma das desvantagens dele é que todos os sites com esse framework terão uma aparência</p><p>semelhante se você não fizer uma personalização adequada.</p><p>ANGULARJS é um framework mantido pelo Google e apoiado por uma enorme comunidade de</p><p>desenvolvedores em todo mundo, é um dos frameworks JavaScript mais importantes quando falamos de</p><p>desenvolvimento web. Trata-se de um framework front-end open Source para o desenvolvimento</p><p>dinâmico de aplicações web. Uma das vantagens é que ele suporta o cache e muitos outros processos,</p><p>o angular reduz a carga da cpu do servidor. Uma das desvantagens é que dependendo da qualidade dos</p><p>códigos, aplicações dinâmicas mais complexas tendem a apresentar alguns atrasos e mostrar falhas</p><p>durante a execução.</p><p>EMBER.JS o ember é um framework open source que combina muito dos melhores recursos de</p><p>seus concorrentes, tornando-a uma ferramenta perfeita para criar aplicações complexas. O objetivo dele</p><p>é aumentar a produtividade de desenvolvimento de aplicações web, com a mentalidade de que é melhor</p><p>perder um pouco de tempo no desenvolvimento com o fim de facilitar a manutenção. Uma das vantagens</p><p>do ember.js é o foco em produtividade. Uma das desvantagens é não ter a renderização do lado do</p><p>servidor, tornando esse processo mais lento.</p><p>VUE.JS é outro framework open source, que permite facilmente misturar e combinar o Vue entre</p><p>diferentes projetos, ele é muito utilizado para criar aplicações single page (página única) e também para</p><p>desenvolver vários tipos de interfaces, que possuem necessidades de uma maior interação</p><p>e uma melhor</p><p>experiencia para o usuário. Uma das vantagens do Vue são os recursos e a flexibilidade de integração,</p><p>pois depende somente do JavaScript e não requer outras ferramentas para funcionar. Uma das</p><p>desvantagens é a falta de suporte para projetos de larga escala.</p><p>Nesse vídeo o canal código fonte tv faz uma análise dos frameworks mais utilizados no JavaScript,</p><p>vale a pena conferir e entender mais dessa poderosa ferramenta.</p><p>Responda:</p><p>1) O que são frameworks?</p><p>2) Qual a diferença entre bibliotecas e frameworks?</p><p>3) Qual o framework mais utilizado no mercado hoje em dia?</p><p>Desafio</p><p>Com suas palavras explique as vantagens e desvantagens de usar framework.</p><p>Módulo: Desenvolvimento Front-end</p><p>81</p><p>Administração de Websites</p><p>Introdução</p><p>Esta disciplina tem como objetivos:</p><p>• Apresentar a arquitetura cliente-servidor.</p><p>• Analisar a estrutura dos web sites.</p><p>• Identificar as várias tecnologias usadas nas páginas web.</p><p>• Abordar as implicações das novas tecnologias de acesso.</p><p>• Estudar a Metodologia de Desenvolvimento de Web Sites, segundo Clement Mok.</p><p>Módulo: Desenvolvimento Front-end</p><p>82</p><p>Tema 1: Conceito de Internet e Mercado da Internet</p><p>Internet e World Wide Web</p><p>A internet é um conjunto de redes de computadores interligado no mundo inteiro, sua forma</p><p>permite a conexão de todos os usuários ao mesmo tempo, pode ser usado um Desktop, Notebook, celular,</p><p>Tablet. E para manter essa interação são utilizado um conjunto de protocolos e serviços em comum,</p><p>podendo assim, os usuários conectados nela, usufruírem de serviços de informação de alcance mundial.</p><p>É de extrema importância lembrar que Internet e World Wide Web (WWW ou apenas Web) não são</p><p>exatamente a mesma coisa. Como a maioria dos internautas usa quase que somente a web, acaba</p><p>achando que ela abrange toda a Internet, mesmo sendo o recurso mais utilizado da Internet, juntamente</p><p>com o e-mail, a World Wide Web são apenas um dos serviços da Internet.</p><p>Quando falamos em home pages, web sites e páginas web, se referem à Web e não à Internet.</p><p>A vantagem da Web é que através de um web site pode-se ter acesso a quase todos os recursos e</p><p>serviços disponíveis na Internet.</p><p>Chamamos de WWW ou de W3 a "teia de alcance mundial" é a mais poderosa ferramenta para a</p><p>obtenção de informações na Internet. A WWW oferece uma interface do tipo hipertexto multimídia (ou</p><p>hipermídia) permite que o usuário percorra milhares de telas interligadas que contém textos, sons e</p><p>imagens animadas ou não.</p><p>Uma página na WWW é especificada por um endereço chamado de URL (Uniform Resource</p><p>Locator) ela inicia com os caracteres http:// (Hiper Text Transfer Protocol), é o nome do protocolo de</p><p>transferência de hipertexto adotado pela WWW.</p><p>Serviços e Protocolos</p><p>Outro conceito muito importante que devemos estar ciente é que para cada serviço da Internet</p><p>está relacionado um protocolo de comunicação diferente. Um protocolo é uma linguagem que contém um</p><p>grupo de diretrizes específicas. O protocolo base para troca de qualquer tipo de informação na Internet é</p><p>o TCP/IP. Porém, cada serviço usa um protocolo de nível superior específico para aquele serviço</p><p>solicitado. Por exemplo: na World Wide Web usa-se o protocolo HTTP na comunicação entre o cliente</p><p>(browser) e o servidor, já para fazer o download de um arquivo usa-se o protocolo FTP.</p><p>HTTP: (Hyper Text Transfer Protocol - Protocolo de Transferência de Hipertexto) na comunicação entre</p><p>o cliente (browser) e o servidor. Além do http existem outros protocolos e serviços disponíveis que</p><p>compõem a Internet nos dias de hoje.</p><p>FTP: do Inglês File Transfer Protocol (Protocolo de Transferência de Arquivos), é o serviço que permite o</p><p>envio de arquivos de um computador a outro na Internet, contendo desde um pequeno texto até grandes</p><p>programas, além de também possibilitar a manipulação remota de diretórios (criação de diretórios, troca</p><p>de nome de arquivos, exclusão de arquivos, etc.).</p><p>E-mail: do inglês Eletronic Mail (Correio Eletrônico) - serviço extensamente usado e divulgado na Internet,</p><p>serve para o envio e recebimento de mensagens de texto, que pode ainda conter arquivos, imagens e</p><p>sons anexados. É atualmente um dos principais serviços disponibilizados pela Internet. Disponibilizamos</p><p>a seguir, a relação dos serviços mais utilizados na Internet e os protocolos correspondentes:</p><p>Serviço da Internet</p><p>Protocolo</p><p>Exemplo de endereço</p><p>World Wide Web (WWW)</p><p>HTTP</p><p>http://www.neweducation.com.br</p><p>Módulo: Desenvolvimento Front-end</p><p>83</p><p>File Transfer Protocol</p><p>FTP</p><p>ftp://ftp.microsoft.com</p><p>Eletronic Mail (e-mail)</p><p>SMTP / POP</p><p>smtp.host.com (endereço do servidor)</p><p>nome@host.com (endereço de e-mail)</p><p>News</p><p>NNTP</p><p>news://news.microsoft.com</p><p>Chat</p><p>IRC</p><p>irn.netcom.net.uk</p><p>mschat.msn.com</p><p>World Wide Web + Secure Sockets Layer</p><p>HTTPS</p><p>https://www.submarino.com.br/login.asp?page=wrap</p><p>Intranet e Extranet</p><p>Provável que você já deva ter ouvido falar ou ainda lido em um livro ou revista a respeito de</p><p>Intranets e Extranets. Neste tópico apenas conceitua-se Intranet e Extranet. Informações mais detalhadas</p><p>podem ser obtidas em livros específicos.</p><p>• Intranet</p><p>Há pouco tempo que as organizações privadas começaram a dar mais atenção ao fato de utilizar</p><p>a infraestrutura de redes que já existem, juntado toda a tecnologia de comunicação oferecida pela Internet</p><p>e os recursos gráficos, intuitivos e multiplataforma, oferecidos pela World Wide Web. Desta união nascem</p><p>as Intranets.</p><p>Como toda rede, a Intranet é composta por uma estrutura cliente x servidor, ou seja, servidores</p><p>que armazenam os dados, e aplicações cliente que acessam e manipulam estes dados, numa</p><p>infraestrutura de rede que mantém tudo interligado.</p><p>Isto faz parecer que uma Intranet não seja nada diferente de uma aplicação típica de rede. Do</p><p>ponto de vista técnico não existem muitas novidades em uma Intranet, além dos dados que trafegarem</p><p>sob o protocolo TCP/IP.</p><p>A principal diferença entre uma Intranet e uma rede tradicional não é a parte técnica. Está na</p><p>natureza a apresentação da informação. O formato gráfico dos elementos juntamente com a possibilidade</p><p>de acesso a partir de uma entrada comum - o navegador - é o que a distinguem das demais redes.</p><p>Esta nova maneira, de localizar e utilizar a informação, é muito mais amigável que mapear um</p><p>drive de um servidor particular, atravessar uma complicada estrutura de diretórios, navegar através de</p><p>uma lista de nomes de arquivos. As pessoas preferem clicar em ícones em vez de buscar a informação</p><p>através de diretórios.</p><p>Além disto, a independência de plataformas oferecida pelo HTTP e pelo HTML permite à estrutura</p><p>de uma Intranet suportar vários clientes, melhor do que uma aplicação típica de rede.</p><p>https://www.submarino.com.br/login.asp?page=wrap</p><p>Módulo: Desenvolvimento Front-end</p><p>84</p><p>Como definição pode-se dizer que uma Intranet corresponde à rede interna de uma empresa que</p><p>utiliza a mesma infraestrutura e tecnologias usadas na Internet, assim como, protocolo TCP/IP, servidores</p><p>web, navegadores, e-mail, notícias, etc., para disponibilizar informação de forma gráfica e atualizada aos</p><p>usuários internos da empresa.</p><p>Mas qual a vantagem de se investir em uma Intranet em vez de manter a estrutura de rede</p><p>tradicional? As vantagens são muitas, sobretudo podemos citar:</p><p>• economia com custos de instalação e manutenção de demanda de uma rede tradicional;</p><p>• economia com horas de treinamento para usar o sistema, pois a interface é a mesma usada na</p><p>Internet;</p><p>• facilidade para encontrar as informações na rede, através do uso de páginas web e sites de busca na</p><p>Intranet;</p><p>• amplitude de tecnologias e recursos gratuitos ou de baixo custo disponíveis na Internet, e que podem</p><p>ser usados nos web sites da Intranet;</p><p>• possibilidade de uso de videoconferência com custos mais baixos e usos de recursos multimídia,</p><p>como</p><p>áudio, vídeo e animação em web sites de treinamento;</p><p>• facilidade para encontrar profissionais para dar manutenção nos web sites e na rede.</p><p>Do ponto de vista tecnológico uma Intranet é composta por:</p><p>• infraestrutura de rede;</p><p>• servidores;</p><p>• documentos;</p><p>• navegadores;</p><p>• aplicações;</p><p>Infraestrutura de Rede</p><p>Pode-se dizer que a espinha dorsal de uma Intranet se baseia na utilização de uma rede. É a rede</p><p>que vai fornecer a conexão necessária para que a informação seja acessada a partir de qualquer local da</p><p>organização.</p><p>Da mesma forma que a Internet, uma Intranet utiliza o protocolo de rede TCP/IP para realizar a</p><p>comunicação. É o TCP/IP que vai fornecer um endereço IP para cada máquina da rede, permitindo que</p><p>as máquinas possam se localizar e comunicar entre si.</p><p>Além do protocolo TCP/IP, uma Intranet utiliza o protocolo HTTP.(Hypertext Transfer Protocol) ou</p><p>Protocolo de Transferência de Hipertexto, que vai permitir a transmissão de texto, imagens e hiperlinks</p><p>associados às páginas, nos formatos aceitos pelos navegadores, que será a ferramenta utilizada para a</p><p>visualização das informações.</p><p>• Servidores</p><p>Com a rede já montada a próxima questão sobre infraestrutura de uma Intranet é onde armazenar</p><p>a informação.</p><p>Normalmente, a informação é armazenada em máquinas destinadas somente para este fim, que</p><p>possam ser acessadas durante todo o tempo e a qualquer hora, chamadas de servidores. No caso da</p><p>Intranet este servidor precisa ser um servidor Web, ou seja, possuir os protocolos necessários para que</p><p>as páginas de informação no formato HTML possam ser acessadas pelos usuários. Isto não significa que</p><p>um servidor Web não possa oferecer acesso à informação armazenada em outros tipos de servidores.</p><p>Um servidor Web pode estar integrado a um servidor de e-mail ou a um servidor de bancos de dados, por</p><p>exemplo.</p><p>• Documentos</p><p>Módulo: Desenvolvimento Front-end</p><p>85</p><p>Documentos são as chaves de uma Intranet, ou seja, a "personificação" da informação. O formato</p><p>padrão para os documentos em uma Intranet é o HTML, um formato que mistura texto e tags que</p><p>controlam a formatação e hiperlinks de páginas para outros documentos.</p><p>Um documento HTML funciona bem por várias razões: é pequeno, fácil de ser transmitido via rede,</p><p>não se liga a uma plataforma específica, pode rodar em qualquer sistema operacional.</p><p>Embora os documentos HTML sejam componentes-chaves para qualquer solução Intranet, outros</p><p>tipos de documentos podem ser utilizados, principalmente no caso de organizações que utilizam a</p><p>plataforma Microsoft e desejam aproveitar a documentação existente nos formatos utilizados no pacote</p><p>Microsoft Office.</p><p>• Navegadores</p><p>Os navegadores são programas utilizados pelos usuários de uma Intranet para visualizar os</p><p>documentos exibidos pelo servidor, realizando as seguintes funções:</p><p>• localização e comunicação com os servidores;</p><p>• leitura do formato HTML e exibição gráfica dos documentos armazenados;</p><p>• leitura dos hiperlinks dos documentos e salto até os endereços determinados;</p><p>• oferecimento de ferramentas padrão que auxiliam a navegação, como botões que levam para frente</p><p>e para trás, locais favoritos e histórico;</p><p>• tratamento de elementos multimídia como som, vídeo e imagens 3D.</p><p>• Aplicações</p><p>Aplicações são programas específicos escritos por desenvolvedores para solucionarem</p><p>problemas específicos dentro das organizações.</p><p>Existem muitas ferramentas disponíveis para um desenvolvedor de Intranet. Ferramentas que incluem</p><p>controles, scripts e componentes que atuam diretamente no servidor.</p><p>Controles são partes das aplicações que podem ser executados de dentro do navegador, estendendo sua</p><p>funcionalidade e permitindo a construção de soluções que estão muito além da simples exibição dos</p><p>documentos. Escritos em ferramentas como C++, Java, Visual Basic, Delphi, etc., são incorporados</p><p>diretamente nos documentos HTML.</p><p>• Extranet</p><p>Há algum tempo algumas empresas utilizam redes privadas (Virtual Private Network ou VPN) para</p><p>a comunicação entre seus computadores. As VPNs são instaladas normalmente em empresas que</p><p>precisam estabelecer uma comunicação constante, rápida e segura de informações entre matriz e filial,</p><p>fabricante e distribuidor ou fornecedor. Os principais clientes deste tipo de rede são instituições</p><p>financeiras, multinacionais, centros de processamento de dados, etc. Esta troca de informações através</p><p>de VPNs é chamada de EDI (Eletronic Data Interchange - Troca eletrônica de dados).</p><p>Quando existe uma grande distância entre as redes, o custo de instalação de uma conexão direta</p><p>se torna muito elevado, pois linhas privativas entre cidades distantes têm o custo muito elevado. Por isso,</p><p>os sistemas de EDI são restritos, impossibilitando o uso por empresas de menor porte. Esta situação</p><p>passou a mudar com o uso da Internet para fins comerciais e o surgimento das Intranets. A estrutura de</p><p>Internet passou a ser usada para acesso à Intranet de empresas. Surge assim o conceito de Extranet.</p><p>Uma Extranet é um tipo específico de ligação entre redes Intranet que usa a Internet como meio</p><p>de conexão, permitindo que filiais de uma empresa, ou fornecedores e distribuidores acessem sites e</p><p>banco de dados das Intranets. Esse sistema é chamado de WEBEDI.</p><p>Módulo: Desenvolvimento Front-end</p><p>86</p><p>Como a informação não trafega por uma rede particular e sim pela Internet é necessário criptografar e</p><p>autenticar os dados, através da instalação de firewalls, nas "pontas" das redes (entre as redes e a Internet)</p><p>para proteger a conexão de acessos externos provenientes do restante da Internet.</p><p>Isto quer dizer que, se uma determinada empresa possui filiais pode fazer uma conexão entre elas e a</p><p>matriz, utilizando a Internet como meio de conectividade, porém preservando a integridade e o sigilo dos</p><p>dados que trafegam entre as redes. Seria como criar um "túnel" para comunicação entre essas redes, e</p><p>ninguém mais, que não as próprias redes envolvidas, tivessem acesso a esses dados. Sendo assim, esse</p><p>tipo de conexão acaba funcionando como uma rede privada (VPN) usando a infraestrutura da Internet.</p><p>Devido à facilidade deste tipo de implementação, muitas empresas criam enormes redes que interligam</p><p>suas sedes regionais. Esta ligação permite que os usuários da rede da empresa comuniquem-se entre si</p><p>ou com parceiros, fazendo parte da Extranet. Uma VPN pode funcionar como uma imensa rede privada</p><p>de comunicações, com tráfego de alcance global.</p><p>Atividades</p><p>1. Descreva o que é Internet e Web.</p><p>2. O que é um Protocolo? Dê exemplos.</p><p>3. O que é uma Intranet?</p><p>A Internet e as Empresas</p><p>Há algum tempo muitos questionavam se valia a pena colocar um site da empresa na Internet.</p><p>Atualmente não se questiona mais a importância da Internet e nem de criar um web site para representar</p><p>a empresa online. Podemos dizer que o mínimo que se espera de uma empresa que queira se manter</p><p>atualizada e competitiva é ter presença na Web, ou seja, ser uma empresa .COM. Algumas desvantagens</p><p>de uma empresa não estar presente na Internet, podem ser listadas:</p><p>o desatualização e atraso;</p><p>o falta de competitividade;</p><p>o no início: perda de uma fatia do mercado consumidor;</p><p>o com o tempo: esquecimento.</p><p>Hoje o grande desafio das empresas é criar web sites lucrativos com a venda de produtos e serviços.</p><p>Algumas vantagens de uma empresa .COM:</p><p>o quebra de barreiras regionais, atuação mundial;</p><p>o competitividade;</p><p>o os pioneiros sempre serão lembrados (Amazon);</p><p>o melhor atendimento ao cliente;</p><p>o novas oportunidades de negócios.</p><p>Módulo: Desenvolvimento Front-end</p><p>87</p><p>É importante ressaltar que estar presente na web (ser uma .COM) não representa apenas criar</p><p>um web site com um visual bonito e colocar todas as informações sobre a empresa. Um web site tem que</p><p>ser competitivo, tem que ter realmente algo que os internautas procuram.</p><p>Outro aspecto que não se pode esquecer</p><p>é que juntamente com o advento do web site da</p><p>empresa, uma série de mudanças deverá ser implementada, como consequência da implantação de uma</p><p>nova cultura e filosofia digital, trazida pela Internet.</p><p>Para realmente tirar proveito da tecnologia de Internet e acompanhar a demanda que poderá vir</p><p>em função dos acessos ao web site, uma empresa deve rever seus processos internos e passar a usar a</p><p>tecnologia também internamente, assim como, e-mail, envolvimento de todas as pessoas da empresa na</p><p>atualização e manutenção das informações do web site, velocidade na negociação com fornecedores e</p><p>entrega dos produtos, criação de uma Intranet, treinamento dos funcionários na operação da Internet e</p><p>novas tecnologias, etc.</p><p>Podemos listar algumas consequências:</p><p>o caminho sem volta;</p><p>o reavaliação estrutural e operacional;</p><p>o investimento em treinamento para evitar o "analfaNETismo";</p><p>o contratação de profissionais.</p><p>A Importância da Internet no Mundo dos Negócios</p><p>No mundo atual, a Internet vem assumindo um papel primordial na criação de vantagens na área</p><p>dos negócios. Essas vantagens são partilhadas tanto por consumidores como pela própria empresa. No</p><p>caso dos primeiros, pode-se apontar de forma resumida a disponibilidade de informação, o divertimento,</p><p>a facilidade de experimentação, a satisfação imediata e a interatividade ou a resposta simultânea. Para</p><p>as empresas, as vantagens da Internet são a redução de custos, maior interatividade, comunicação</p><p>integrada, melhoria do serviço ao cliente e teste de novos produtos e serviços no mercado. Por outro lado,</p><p>pode-se também apontar como vantagens a adesão a mercados internacionais e a outros segmentos</p><p>bem como à disponibilidade de uma oferta ao cliente.</p><p>Ainda relativo às empresas, é importante salientar que a Internet possibilitará um aumento das vendas,</p><p>na medida em que constitui mais uma alternativa em termos de canal de distribuição. A sua utilização</p><p>pode ocorrer ao nível de todas as funções de marketing, como:</p><p>• Vendas: aumenta a visibilidade das marcas e dos produtos e serviços, auxiliando a decisão de</p><p>compra e permitindo a realização destas on-line. Este novo canal de vendas permite a qualquer empresa</p><p>aderir ao mercado global. Pequenas empresas ou empresas geograficamente isoladas podem assim</p><p>realizar vendas iguais ou superiores às das grandes empresas;</p><p>• Comunicação: através do site da empresa, pois se coloca ao conhecimento de si própria, bem</p><p>como de seus produtos e serviços, com um custo reduzido quando comparado com meios como a</p><p>imprensa ou a televisão. A empresa pode ainda anunciar em sites, através de banners, botões, pop-ups;</p><p>• Serviço ao cliente: complementa ou substitui o call center. A Internet é talvez o único meio que</p><p>permite ao cliente escolher os sites de visita, consulta, compra, no tempo que desejar;</p><p>• Relações públicas: através da publicação de releases sobre a empresa e suas atividades;</p><p>• Marketing Research: através da utilização da Internet para pesquisas de informação de apoio à</p><p>tomada de decisão.</p><p>Módulo: Desenvolvimento Front-end</p><p>88</p><p>A Internet permite igualmente manter um negócio ativo 24 horas por dia, 365 dias por ano. Este</p><p>aspecto permite ultrapassar os problemas respeitantes aos fusos horários, permitindo que as pessoas de</p><p>todo o mundo acessem aos sites dentro do seu horário de atividade.</p><p>Resolução de Tela</p><p>Largura</p><p>Altura</p><p>Descrição</p><p>240</p><p>320</p><p>Telefone</p><p>320</p><p>480</p><p>Smart Phone</p><p>480</p><p>800</p><p>Smart Phone</p><p>768</p><p>1024</p><p>Tablet</p><p>1000</p><p>620</p><p>(1024x768, Maximizado)</p><p>1260</p><p>875</p><p>(1280x1024, Maximizado)</p><p>1420</p><p>750</p><p>(1440x7x900 Maximizado)</p><p>1580</p><p>1050</p><p>(1600x1200, Maximizado)</p><p>Carreiras de Internet</p><p>As carreiras ligadas à Internet continuam em alta, segundo consultores e especialista do setor de</p><p>recursos humanos. A demanda por vagas neste mercado ainda é grande, apesar das dificuldades de</p><p>algumas empresas. De analistas de suportes aos criadores de conteúdo e de programadores a diretores</p><p>comerciais, a Internet absorve uma grande quantidade de profissionais. As empresas estão à procura de</p><p>centenas de profissionais, nas mais diversas especialidades. Boas oportunidades para atividades de</p><p>Internet ainda estão à espera de profissionais qualificados. As empresas possuem diversas vagas e</p><p>opções. Estudantes e profissionais de informática devem buscar a melhor oportunidade.</p><p>Módulo: Desenvolvimento Front-end</p><p>89</p><p>Existem mais de 50 especializações profissionais relacionadas à Internet. No início da década de</p><p>90, os profissionais da rede mundial de computadores se resumiam a um designer, um programador, um</p><p>redator e operadores de rede. Atualmente, novas funções foram criadas como, por exemplo, analista de</p><p>tráfego em site, gerente de e-commerce, analista de tecnologia da informação, gerente de loja virtual, etc.</p><p>• Web Designer</p><p>Esta foi a primeira profissão de Internet a ser largamente difundida. O Web Designer é o profissional que</p><p>cuida da parte visual do web site. Sua função é definir a estrutura de um web site, criar e desenhar a</p><p>interface. Em alguns casos também é responsável pela montagem e publicação do web site.</p><p>Conhecimentos necessários: conceitos de design e artes gráficas, manipular imagens usando programas</p><p>de edição de imagens, fazer ilustrações usando softwares vetoriais e conhecer ferramentas para criação</p><p>de páginas web. É aconselhável conhecer HTML e CSS, ter noções de usabilidade, acessibilidade e</p><p>ergonomia.</p><p>• Web Developer</p><p>É o já conhecido desenvolvedor, mas com conhecimentos de programação para tecnologias de Internet.</p><p>O web developer complementa o trabalho do web designer. Sua função primordial é projetar a parte</p><p>técnica e programável do web site, incluindo programação de acesso a banco de dados.</p><p>Conhecimentos necessários: linguagem de programação visual (VB, Delphi, C++), domínio de HTML,</p><p>programação JavaScript e linguagens para acesso à base de dados (ASP, PHP, ColdFusion, Java Server</p><p>Pages).</p><p>• Web Master</p><p>Profissional responsável pela manutenção e gerenciamento do web site. Sua função inclui criação e</p><p>atualização de páginas para o web site, programação, publicação do web site e garantia de funcionamento</p><p>do servidor web.</p><p>Conhecimentos necessários: domínio de HTML, programação JavaScript e linguagens para acesso à</p><p>base de dados (ASP, PHP, ColdFusion, Java Server Pages). É aconselhável também ter noções de rede,</p><p>gerenciamento de um servidor web, segurança de web sites, funcionamento de Intranets e Extranets.</p><p>• Web Administrator</p><p>Profissional encarregado de instalar e manter o web site em funcionamento no servidor web. Também</p><p>deve ser capaz de montar uma Intranet, através da configuração de servidores web, proxys, firewalls,</p><p>browsers, etc.</p><p>Conhecimentos necessários: funcionamento de redes, protocolo TCP/IP, servidores Web, proxy, firewall,</p><p>servidores de banco de dados e administração de ambientes operacionais.</p><p>• Web Writer / Redator Web</p><p>Este profissional é responsável pelo conteúdo de um web site. Sua função inclui a digitação, adaptação,</p><p>revisão e produção dos textos que serão colocados online. Um web writer deve ter um excelente domínio</p><p>da língua e de revisão de textos, e de preferência ter formação em jornalismo.</p><p>• DBA (Administrador de Banco de Dados)</p><p>A profissão de administrador de banco de dados não é nova, assim como o uso dos bancos de dados.</p><p>Mas, com o aumento do número de web sites que acessam bancos de dados, o DBA se tornou um</p><p>profissional muito importante em um projeto de web site. Sua função inclui modelagem de banco de</p><p>dados, implementação e gerenciamento dos servidores de banco de dados.</p><p>Conhecimentos necessários: modelagem de banco de dados, implementação e administração de</p><p>servidores de banco de dados SQL Server, Oracle ou MySQL e domínio do sistema operacional (NT ou</p><p>UNIX). É aconselhável também conhecer linguagens de acesso a banco de dados</p><p>IBM 370/-75 e PDP-10 Fonte: slideshare</p><p>Protocolo TCP/IP</p><p>Em 1972 dois pesquisadores perceberam a necessidade de novos protocolos serem usados na</p><p>comunicação, Robert Kahn mais conhecido como Bob Kahn criou o protocolo chamado TCP ( Transfer</p><p>Control Protocol - Protocolo de Controle de Transferência), a idéia do TCP era eliminar o problema do</p><p>NCP, onde teria que parar a rede enquanto estava sendo feita uma transmissão, podendo assim utilizar</p><p>várias transmissões simultaneamente, porém esse protocolo também tinha um problema, que era</p><p>identificar os pontos de transferência, ja que na época os pontos tinham aumentado, então o pesquisador</p><p>Vinton Cerf conhecido como Vint Cerf, criou o protocolo IP (Internet Protocol - Protocolo de Rede) afim</p><p>de resolver os problema de identificação dos pontos de acesso, fazendo assim uma padronização da</p><p>comunicação, juntando então os protocolos TCP/IP.</p><p>Figura 6: Vincent Cerf e Robert Kahn / Fonte: hollywoodbowles</p><p>Módulo: Desenvolvimento Front-end</p><p>7</p><p>Com o avanço da Arpanet e o enorme crescimento dos pontos de acesso, os militares decidiram</p><p>dividir essa rede ficando apenas com a administração da MILNET, os centros de pesquisas e</p><p>universidades responsáveis pela NFSNET (National Science Foundation - Fundação Nacional de Ciência)</p><p>ficando assim as redes comerciais usando a Arpanet.</p><p>Com a necessidade de interconexão dessas redes, exceto a MILNET, foi criada uma Interconnect</p><p>Networking, onde foi simplificada e finalmente chegando ao nome que conhecemos hoje, a Internet.</p><p>Criação do WWW</p><p>Figura 7: Tim Berners-Lee / Fonte: vanityfair</p><p>Em meados da década de 50, mais precisamente 8 de junho de 1955, em Londres na Inglaterra,</p><p>nasce Timothy John Berners-Lee, um dos principais responsáveis pela internet que temos hoje.</p><p>Em 1980 Tim Berners-Lee, trabalhou no Instituto CERN (European Organization for Nuclear</p><p>Research – Conselho Europeu de Pesquisa Nuclear) como consultor em projetos de comunicação. Nesse</p><p>período em que trabalhou no CERN, Tim elaborou um projeto baseado em hipertextos, que falando em</p><p>termos resumidos é um conjunto de informações organizadas em blocos de textos.</p><p>Esse projeto foi elaborado para facilitar a comunicação entre seus colegas de outros laboratórios,</p><p>via internet. Em paralelo, Tim Berners-Lee trabalhava em outro projeto, que ele nomeou como Enquire.</p><p>O projeto Enquire foi usado para associar e armazenar as informações em que Tim e seus colegas</p><p>trabalhavam, muito semelhante ao Wikipédia de hoje em dia.</p><p>Em 12 de março de 1989, com ajuda de seu colega Robert Cailliau, ele escreveu uma proposta</p><p>de gerenciamento de informação baseados em elementos do Enquire, que descrevia um sistema melhor</p><p>elaborado para trocar informações.</p><p>Essa proposta foi publicada em 1990, sendo reconhecida mais tarde pelo primeiro modelo da</p><p>World Wide Web, o famoso www. Protocolo usado até os dias de hoje, o www pega as informações da</p><p>internet, e as organiza em blocos de texto, imagens e multimidia.</p><p>Para transportar esses blocos de informações de hipertextos, Tim Berners-Lee criou um protocolo</p><p>de transferência, o conhecido HTTP (Hypertext Transfer Protocol – Protocolo de Transferência de</p><p>Hipertexto) formando assim a padronização entre a transferência de pacotes de hipertextos. Então Tim</p><p>Berners-Lee juntamente com Robert Cailliau criam o HTML (Hypertext Markup Language – Linguagem</p><p>de Marcação de Hipertexto), para a criação de páginas da internet.</p><p>Com o crescente uso da linguagem HTML e seus protocolos (HTTP e www), Tim Berners-Lee</p><p>fundou a W3C (World Wide Web Consortium), o órgão formado por um grupo de empresas dispostas a</p><p>auxiliar na criação de regras e recomendações para a criação de conteúdos web usando hipertextos.</p><p>Navegadores</p><p>Módulo: Desenvolvimento Front-end</p><p>8</p><p>Falando de forma geral, os navegadores são os softwares mais utilizados e importantes, depois</p><p>do sistema operacional. Obviamente que o fato de serem usados para interpretar os blocos de hipertextos</p><p>enviados através do HTTP, ou seja, os documentos HTML, ajudam chegar nesse grau de importância.</p><p>Vamos imaginar que você quer acessar o site do google, pelo navegador que faz a “requisição” via HTTP</p><p>para o servidor onde o site do google está hospedado e pedindo para baixar a página (pacote de</p><p>informações em HTML) e mostrando na tela.</p><p>O primeiro navegador também foi criado por Tim Berners-Lee o (WorldWideWeb) em 1990. Em</p><p>1992 foi a vez do Mosaic, o navegador mais conhecido na época. O Mosaic foi criado pelos estudantes</p><p>do NCSA (National Center for Supercomputing Applications - Centro Nacional de Aplicações para</p><p>Supercomputação. Com a evolução da web, os navegadores também foram evoluindo e oferecendo cada</p><p>vez mais rapidez de respostas e oferecendo melhor serviços para os usuários.</p><p>A Internet no Brasil</p><p>A internet surgiu no Brasil em 1989, quando um grupo de universitários buscavam trocar</p><p>informações com outras universidades internacionais. Essa conexão foi o LNCC (Laboratório Nacional de</p><p>Pesquisa Cientifica) e a Universidade e Maryland nos Estados Unidos, eram trocadas emails</p><p>relativamente simples, mas que na época de grande usabilidade.</p><p>Os primeiros domínios.br foram registrados em 1989, antes mesmo da primeira conexão de</p><p>computadores nacionais e internacionais. Nesse período se dá início a uma rede nacional, já que todos</p><p>os computadores conectados ganham um número de IP, essa base de registro foi estruturada pela</p><p>FAPESP (Fundação de Amparo à Pesquisa do Estado de São Paulo.</p><p>O “boom” da internet se deu pelo uso do www, possibilitando um enorme crescimento de usuário</p><p>criando suas próprias páginas web. Em paralelo surgia o comercio na rede, fortalecendo ainda mais o</p><p>crescente avanço da internet no Brasil.</p><p>Você sabia?</p><p>A internet tem o mesmo peso de um morango.</p><p>Spams dominam a internet.</p><p>A webcam foi criada para vigiar uma cafeteira.</p><p>Twitter já teve outro nome.</p><p>O primeiro site da história ainda está no ar.</p><p>Módulo: Desenvolvimento Front-end</p><p>9</p><p>Responda:</p><p>1) Em qual período Histórico a Internet surgiu?</p><p>2) A agência militar americana DARPA foi a responsável pelo início dos estudos que deram origem à</p><p>Internet. Logo no início, a rede teve um nome. Você sabe qual foi?</p><p>3) A primeira versão da rede que deu origem à Internet interligava quantos computadores?</p><p>4) Qual o nome do primeiro protocolo usado na transmissão de dados entre os controladores?</p><p>5) Qual o nome do pesquisador que criou o TCP (Transfer Control Protocol)?</p><p>6) Qual o nome do criador do IP (Internet Protocol)?</p><p>7) O que significa a sigla "www" e qual o nome do seu criador?</p><p>8) Como é feita a conexão entre os continentes nos dias de hoje?</p><p>9) Em que ano o Brasil fez sua primeira conexão?</p><p>10) O cientista inglês Tim Berners-Lee foi o responsável pela criação de três coisas muito importantes</p><p>para a Internet. Cite quais foram:</p><p>Desafio</p><p>Faça uma linha cronologia dos principais eventos desde a criação a internet até os dias de hoje.</p><p>Módulo: Desenvolvimento Front-end</p><p>10</p><p>Tema 2: Conceitos e Serviço da WEB (1.0, 2.0 E 3.0)</p><p>Figura 8: Serviços WEB - Fonte: opensoft</p><p>Serviços WEB</p><p>A internet se tornou a forma mais democrática de comunicação, dentro dela temos os mais</p><p>diversos tipos de ferramentas para fazermos a busca de todo, e qualquer conteúdo criado ou até mesmo</p><p>publicado na rede.</p><p>Mas o que seria WEB? Falando em termos populares “web” simplesmente é uma das siglas do</p><p>tão conhecido “www” (World Wide Web), falando em termos técnicos “web” é o termo usado para</p><p>denominar uma rede com um conjunto de computadores conectados, onde conseguem realizar trocas e</p><p>recebimento de mensagens.</p><p>No capítulo anterior vimos onde começou a internet e sua história, vamos agora entender quais</p><p>as principais características e diferenças dos avanços da web, possibilitando variadas</p><p>como VB, ASP, etc.</p><p>Módulo: Desenvolvimento Front-end</p><p>90</p><p>• SEO (Otimizador de Mecanismos de Busca)</p><p>Os mecanismos de busca são responsáveis por grande parte das visitações e entrada de novos</p><p>internautas em um web site. A criação de um conteúdo otimizado para esses mecanismos, busca de</p><p>palavras-chaves e codificação semanticamente correta é função de um especialista em mecanismos de</p><p>busca, principalmente com conhecimento sobre o Google.</p><p>Mercado de Trabalho</p><p>O mercado de trabalho para esses profissionais é bem amplo. A seguir, uma relação das possíveis</p><p>empresas e áreas de atuação:</p><p>• Produtoras de Web Sites;</p><p>• Agências de Publicidade;</p><p>• Escritórios de Design;</p><p>• Provedores de Acesso;</p><p>• Empresas da Web (Yahoo, Amazon, Net Trade);</p><p>• Empresas que controlam seus próprios sites;</p><p>• Empresas que tem uma Intranet;</p><p>• Consultoria própria.</p><p>Atividades</p><p>1. Qual é a função de um Web Designer?</p><p>2. Qual é a função de um Web Developer?</p><p>3. Em sua opinião, as funções de Web Designer e Web Developer são complementares ou conflitantes?</p><p>Por quê?</p><p>Módulo: Desenvolvimento Front-end</p><p>91</p><p>Tema 2: Estruturas de Websites</p><p>O que é Site?</p><p>A definição do que é um site depende do ponto de vista do segmento que se olha. Para um</p><p>empresário um site pode ser um canal de comunicação e novas oportunidades de negócios.</p><p>Para um usuário comum da Web pode ser um conjunto de páginas contendo muitas informações</p><p>sobre o mundo, diversão, etc. Tecnicamente, um site é um conjunto de arquivos. E cada arquivo guarda</p><p>certa quantidade de informações como textos, imagens, sons, vídeos e animações.</p><p>Gerações de Sites</p><p>• Sites de 1ª geração</p><p>Devido à limitação imposta por modems lentos e monitores monocromáticos os web sites de</p><p>primeira geração eram muito simples. As primeiras páginas que circularam pela Web foram criadas por</p><p>cientistas e pesquisadores que desejavam compartilhar suas ideias, documentos, teses, etc., com outros</p><p>pesquisadores de outras universidades.</p><p>Essas páginas eram caracterizadas por longos textos com sequência do topo para a base e da</p><p>esquerda para a direita e usavam recursos básicos de formatação de texto, como negrito, itálico,</p><p>marcadores de textos, quebras de parágrafo, linhas horizontais como separadores, e pequenas imagens.</p><p>Os web sites de primeira geração eram criados por técnicos e muitos utilizavam texto preto em fundo</p><p>cinza.</p><p>• Sites de 2ª geração</p><p>Os sites de segunda geração trouxeram algumas novidades visuais que foram possibilitadas pelos</p><p>recursos incorporados nas novas versões dos navegadores.</p><p>Estas melhorias visuais incluem ícones substituindo palavras, imagens "ladrilhadas" substituindo</p><p>o fundo cinza, botões com chanfros e banners substituindo os títulos. Outra característica dos sites de</p><p>segunda geração é a utilização de menus verticais com opções dispostas de cima para baixo e com listas</p><p>para apresentar uma hierarquia de informações.</p><p>A tecnologia teve grande influência nos sites de segunda geração. Isto trouxe como resultado sites</p><p>com uma melhoria visual através do uso de ícones e menus e sites enfeitados, cheios de efeitos</p><p>pirotécnicos como consequência do deslumbramento das novas tecnologias.</p><p>Módulo: Desenvolvimento Front-end</p><p>92</p><p>Neste momento a web estava sendo usada para fins comerciais, mas as páginas ainda eram construídas</p><p>por técnicos. O termo homepage passa a ser largamente utilizado.</p><p>• Sites de 3ª geração</p><p>Os sites de terceira geração representam uma mudança radical na aparência dos web sites.</p><p>Apesar da contínua evolução dos navegadores e tecnologias que sempre influenciam o design, a principal</p><p>característica dos web sites de terceira geração não é a tecnologia, e sim o design.</p><p>Esta mudança foi consequência, sobretudo, da vinda de designers que já trabalhavam com artes</p><p>gráficas para o mundo das páginas web. Começaram a aparecer páginas mais criativas, com melhor</p><p>combinação de cor, mais harmonia na composição dos elementos, enfim, com planejamento visual.</p><p>A maioria dos web sites que conhecemos atualmente é classificada como web site de terceira</p><p>geração.</p><p>• Sites de 4ª geração</p><p>Módulo: Desenvolvimento Front-end</p><p>93</p><p>Independentemente da classificação por geração, algumas novas tecnologias em particular</p><p>trouxeram inovações que realmente estão influenciando o design dos web sites. Essas tecnologias estão</p><p>permitindo a criação de web sites com interfaces totalmente novas, mais dinâmicas, mais intuitivas e mais</p><p>interativas.</p><p>Uma dessas tecnologias é o Flash. Através dos recursos multimídia disponíveis nesta tecnologia</p><p>pode-se criar web sites com interfaces animadas, com efeitos sonoros, imagens 3D, fotos, vídeo, etc.</p><p>Estes recursos ampliam as possibilidades de criação do web designer. O design ganha novas dimensões,</p><p>facilitando a interação do internauta com a interface e a informação.</p><p>Categoria de sites</p><p>Para facilitar o aprendizado sobre a importância das características e recursos, alguns web sites</p><p>foram classificados em categorias. Podem-se usar muitas classificações diferentes, mas a classificação</p><p>a seguir está baseada em macroáreas de atuação, sendo elas:</p><p>• institucional;</p><p>• notícia/informação;</p><p>• entretenimento;</p><p>• comércio eletrônico;</p><p>• portal;</p><p>• serviços.</p><p>• Institucional</p><p>Este foi o primeiro tipo de site comercial que apareceu na web. O site institucional tem o objetivo</p><p>de apresentar a empresa, sendo quase uma versão interativa do folder institucional da empresa.</p><p>Características típicas:</p><p>• informação atualizada sobre a área de atuação da empresa;</p><p>• informação sobre os produtos ou serviços da empresa;</p><p>• localização e telefones;</p><p>• página e e-mail de contato;</p><p>• páginas com informações adicionais para atrair o cliente, assim como eventos, assuntos</p><p>relacionados à área de atuação da empresa, teste drive, downloads.</p><p>Módulo: Desenvolvimento Front-end</p><p>94</p><p>O site da Bauducco é um bom exemplo de site institucional, que traz não apenas informação sobre</p><p>a empresa e sua linha de produtos, mas também sobre lançamentos, receitas, um jogo que mostra como</p><p>o panettone é produzido, página para a imprensa, além de papéis de parede, protetor de tela, etc.</p><p>Exemplos:</p><p>http://www.bauducco.com.br</p><p>http://www.bosch.com.br/</p><p>http://www.etti.com.br</p><p>• Notícia/Informação</p><p>Nesta categoria incluem-se os sites de agências de notícias, revistas on-line, sites de documentação</p><p>técnica, etc.</p><p>Características típicas:</p><p>• informação atualizada;</p><p>• carregamento rápido das páginas;</p><p>• design agradável, porém leve;</p><p>• pouca imagem na homepage;</p><p>• navegação clara e objetiva;</p><p>• textos não muito longos;</p><p>• links para edições anteriores;</p><p>• estrutura e organização das páginas;</p><p>• tecnologias de acesso dinâmico.</p><p>Exemplos:</p><p>http://www.veja.com.br</p><p>http://www.estadao.com.br</p><p>http://www.g1.com.br</p><p>http://quatrorodas.abril.uol.com.br/</p><p>http://www.etti.com.br/</p><p>http://quatrorodas.abril.uol.com.br/</p><p>Módulo: Desenvolvimento Front-end</p><p>95</p><p>Entretenimento</p><p>Os sites de entretenimento têm necessidades e características totalmente contrárias aos sites de</p><p>notícia/informação, pois o objetivo principal é entreter o internauta, e entretenimento envolve belas</p><p>imagens, animações, vídeo e áudio.</p><p>Características típicas:</p><p>• visual colorido;</p><p>• uso de imagens;</p><p>• animação e vídeos;</p><p>• músicas e efeitos sonoros;</p><p>• navegação clara e limpa;</p><p>• design mais livre;</p><p>• uso de tecnologia como Flash, HTML dinâmico, Java Script;</p><p>• alta interatividade.</p><p>Módulo: Desenvolvimento Front-end</p><p>96</p><p>Exemplos:</p><p>http://www.cartoonnetwork.com.br/ppg/index.html</p><p>http://www.hopihari.com.br</p><p>http://www.atrativa.ibest.com.br/</p><p>• Comércio eletrônico</p><p>Nesta categoria estão os sites de lojas virtuais, sites de magazines, etc. Não há muito segredo em</p><p>relação às características primordiais de um site de comércio</p><p>eletrônico. Quando entramos num site de</p><p>comércio eletrônico, com o objetivo de comprar algo, o que esperamos encontrar? Primeiramente que a</p><p>loja tenha o produto procurado, em segundo lugar que o prazo de entrega seja curto, terceiro que o site</p><p>seja seguro, e por último que o produto seja entregue. A velocidade no carregamento das páginas e na</p><p>busca por produtos é considerada como primordial.</p><p>Características típicas:</p><p>• possuir produto ou serviços atualizados;</p><p>• informações detalhadas sobre produto ou serviço;</p><p>• fotos e preço de cada produto;</p><p>• segurança;</p><p>• uso de tecnologias de acesso a banco de dados;</p><p>• opções de formas de pagamento;</p><p>• promoções.</p><p>Exemplos:</p><p>http://www.americanas.com.br</p><p>http://www.submarino.com.br</p><p>http://www.e-store.com.br</p><p>http://www.fnac.com.br/</p><p>http://www.atrativa.ibest.com.br/</p><p>http://www.fnac.com.br/</p><p>Módulo: Desenvolvimento Front-end</p><p>97</p><p>Portal</p><p>Nesta categoria estão os grandes sites com links para diversas páginas sobre um determinado</p><p>assunto. Geralmente estão ligados a outros sites como games, cinema, notícias, bate-papo, revistas,</p><p>compras, esportes, educação e muitos outros assuntos.</p><p>Características típicas:</p><p>• possuir informações atualizadas;</p><p>• uso de tecnologias de acesso a banco de dados;</p><p>• patrocinadores;</p><p>• os textos devem ser redigidos por profissionais;</p><p>• possuir um grande conteúdo de informações;</p><p>Exemplos:</p><p>http://www.terra.com.br</p><p>http://www.uol.com.br</p><p>http://www.ig.com.br</p><p>http://www.ig.com.br/</p><p>Módulo: Desenvolvimento Front-end</p><p>98</p><p>Serviços</p><p>Atualmente há um número grande de sites que prestam serviços online. Desde correio, previsão</p><p>do tempo, inserir créditos no celular, declarar seu imposto de renda ou até mesmo consultar seu saldo no</p><p>banco.</p><p>Características típicas:</p><p>• possuir informações atualizadas;</p><p>• uso de tecnologias de acesso a banco de dados;</p><p>• design claro e suave;</p><p>• possuir estatísticas sobre determinados assuntos;</p><p>• possuir busca;</p><p>• segurança;</p><p>• canal fácil de comunicação.</p><p>Exemplos:</p><p>http://www.inmet.gov.br/</p><p>http://www.itau.com.br</p><p>http://www.detran.sp.gov.br/</p><p>Atividades</p><p>1. Descreva com suas palavras: o que é um site?</p><p>2. Descreva com suas palavras as 4 gerações de sites.</p><p>3. Como podemos categorizar os sites?</p><p>http://www.detran.sp.gov.br/</p><p>Módulo: Desenvolvimento Front-end</p><p>99</p><p>Tema 3: Tecnologias de Web Sites</p><p>Tecnologias Usadas em uma Página Web</p><p>Com certeza você já ouviu falar de muitas tecnologias diferentes que são utilizadas nas páginas</p><p>web. A tecnologia básica usada nas páginas web é o HTML (Hypertext Markup Language - linguagem de</p><p>marcação de hipertexto).</p><p>HTML não é uma linguagem de programação, e sim uma linguagem de marcação estrutural. Ela</p><p>foi criada com o objetivo inicial de formatar textos e imagens e possibilitar a ligação (hiperlink) entre</p><p>páginas web. Atualmente existem várias tecnologias que são utilizadas em web sites. Existem tecnologias</p><p>para funções diferentes, algumas simplesmente interagem com o HTML e o navegador, outras fazem</p><p>conexão com banco de dados ou acessam pequenos programas que rodam no servidor web</p><p>(componentes), e tem ainda aquelas que permitem executar recursos multimídia nos web sites. A cada</p><p>dia é criada uma nova tecnologia, veja no diagrama como essas várias tecnologias estão relacionadas</p><p>em uma página web002.</p><p>Podemos listar algumas tecnologias:</p><p>Tecnologia</p><p>Descrição</p><p>HTML</p><p>Hypertext Markup Language é uma linguagem de marcação estrutural.</p><p>XHTML</p><p>Extensible Hypertext Markup Language é uma reformulação da linguagem de marcação HTML baseada</p><p>em XML.</p><p>CSS</p><p>Cascading Styles Sheet é uma linguagem de formatação.</p><p>JAVASCRIPT</p><p>Módulo: Desenvolvimento Front-end</p><p>100</p><p>Linguagem de programação que permite acesso aos elementos de uma página web, janela e eventos.</p><p>JAVA</p><p>Linguagem de programação para desenvolvimento de sistema.</p><p>CGI</p><p>Commom Gategay Interface é uma interface definida de maneira a possibilitar a execução de programas</p><p>em um servidor de informações. Os programas CGI estão na forma de scripts escritos em alguma</p><p>linguagem como C, Perl, Shell do Unix e VB Script. Os scripts são interpretados pelo servidor que executa</p><p>as instruções.</p><p>PERL</p><p>Linguagem de programação que possui funções muito eficientes para manipulação de textos, o que a</p><p>torna muito popular para programação de formulários WWW.</p><p>ASP</p><p>Active Sever Pages é uma tecnologia criada pela Microsoft, que gera páginas dinamicamente. A</p><p>linguagem ASP é, na verdade, uma junção de programação em VBScript.</p><p>ASP.NET</p><p>Os scripts ASP.NET são significativamente mais potentes como aplicativos compilados em lugar de</p><p>scripts interpretados, e eles podem ser estendidos para um Web Service, um objeto .NET que pode ser</p><p>chamado à distância com facilidade.</p><p>PHP</p><p>Linguagem que possibilita a criação de sites dinâmicos. Uma das características dessa linguagem é o</p><p>fato dela ser executada no servidor. Normalmente utiliza em conjunto com banco de dados MySQL.</p><p>Cold Fusion</p><p>Linguagem de desenvolvimento rápido que permite a criação de aplicações web dinâmicas.</p><p>WAP</p><p>É um protocolo desenvolvido para ambientes móveis que necessitem de informações independentemente</p><p>de sua localidade física. Ele é um padrão desenvolvido por grandes empresas de telefonia móvel para</p><p>ser usado de forma que aparelhos como celulares ou "palms" sejam capazes de acessar informações</p><p>disponíveis na Internet.</p><p>XML</p><p>A sigla XML(EXtensible Markup Language) corresponde a Linguagem de Marcação Expansível e consiste</p><p>em um padrão utilizado para a marcação de documentos que contém informações estruturadas, ou seja,</p><p>documentos que contém uma estrutura clara e precisa da informação que é armazenada em seu</p><p>conteúdo.</p><p>FLASH</p><p>Software para desenvolvimento de animações e aplicações multimídia, tanto para a World Wide Web</p><p>como para CD-ROM, utilizando tecnologia vetorial.</p><p>ACTIONSCRIPT</p><p>Linguagem de programação usada no software Adobe Flash.</p><p>Comitê W3C</p><p>Módulo: Desenvolvimento Front-end</p><p>101</p><p>Existe um consórcio de empresas chamado World Wide Web Consortium ou W3C que</p><p>regulamenta e define os padrões que serão usados nas novas tecnologias. O comitê W3C enfrenta um</p><p>problema de tempo entre a avaliação de uma nova tecnologia e sua aprovação para uso pelo mercado.</p><p>A velocidade na criação de novas tecnologias e a demanda do mercado levam as empresas de tecnologia,</p><p>principalmente Microsoft e Mozilla, a lançarem novas versões de navegadores e programas que suportam</p><p>novas tecnologias ainda não aprovadas pelo W3C.</p><p>Raio-X de uma Página Web</p><p>É importante ressaltar que nenhuma das tecnologias atualmente em uso ainda substitui ou</p><p>descarta totalmente a linguagem HTML. Na verdade, a maioria delas depende do HTML, pois são</p><p>chamadas e executadas a partir do código HTML.</p><p>Para poder ver o código de uma página HTML:</p><p>• No Internet Explorer, menu Exibir, opção Código fonte ou posicione o cursor do mouse, em</p><p>qualquer lugar da página (menos em cima de imagens) e clique o botão direito do mouse, e escolha Exibir</p><p>código fonte.</p><p>Novas tecnologias de acesso</p><p>Módulo: Desenvolvimento Front-end</p><p>102</p><p>Atualmente os usuários estão acessando a Internet através das chamadas conexões de alta</p><p>velocidade (banda larga ou broad band) que até então eram restritas apenas aos provedores de acesso</p><p>(ISPs) ou empresas que tinham condições de manter os altos custos de uma linha privada (LP) com uma</p><p>operadora telefônica.</p><p>Várias são as tecnologias utilizadas para possibilitar o acesso de alta velocidade, que incluem</p><p>Cable Modem, ISDN, ADSL e comunicação sem fio por antenas.</p><p>Alguns dos serviços de conexões de alta velocidade atualmente são o Speedy da Telefônica que utiliza</p><p>a tecnologia ADSL, o Virtua da Net e a GVT que utilizam Cable Modem. Também existe hoje a Internet</p><p>via Satélite</p><p>e via Rádio.</p><p>Quando se fala em conexões de alta velocidade, não se referem apenas ao fato de poder ver os</p><p>web sites atuais serem carregados mais rapidamente, ou porque se pode fazer downloads de arquivo</p><p>com muitos megabytes em poucos minutos, mas, sobretudo porque essas tecnologias estão mudando a</p><p>forma de se fazer site, influenciando diretamente no trabalho do web designer.</p><p>Sites relacionados:</p><p>• http://www.netcombo.com.br/</p><p>• http://www.gvt.com.br/</p><p>• http://www.anatel.gov.br</p><p>Web Standard X Tabelas</p><p>A principal forma de diagramação de Web Sites até 2005 era utilizando o recurso de Tabelas (Tag</p><p>Table). Essa maneira de desenvolver serviu muito bem até essa época, porém, com preocupações</p><p>maiores com buscadores, acessibilidade e internet em mobiles, a tabela aos poucos vem sendo</p><p>substituída pelo Web Standard (Tableless).</p><p>A tag Div, juntamente com uma utilização mais inteligente do CSS, permite um controle maior do</p><p>layout, menos código e um tempo menor de carregamento da página. Além disso, o código é montado de</p><p>maneira otimizada e melhor interpretado por buscadores e sistema de leitura para deficientes visuais.</p><p>O www.csszengarden.com demonstra o potencial desse tipo de Web Site, permitindo o mesmo código</p><p>HTML sem ser transformado em inúmeros layouts com uma mudança no estilo CSS.</p><p>http://www.anatel.gov.br/</p><p>Módulo: Desenvolvimento Front-end</p><p>103</p><p>Hot Sites</p><p>É comum a utilização do termo Hot Site, em lançamento de: produtos, filmes, eventos e publicidade</p><p>online. Normalmente esse tipo de Web Site é de caráter temporário, sem manutenção posterior e faz</p><p>parte de uma campanha de marketing mais agressiva.</p><p>O Adobe Flash é o software mais utilizado para a criação de Hot Sites, normalmente englobando</p><p>som, imagens e até mesmo vídeo.</p><p>Web Sites Estáticos e Dinâmicos</p><p>Até o advento das tecnologias de acesso a banco de dados via web, o conteúdo dos web sites</p><p>somente podia ser alterado manualmente, ou seja, cada vez que alguém pedia alguma alteração o web</p><p>designer ou web master tinha que abrir a página, fazer a alteração e salvar a página novamente no</p><p>servidor. As páginas deste tipo de web site são chamadas estáticas.</p><p>Uma ótima solução para empresas são os sites estáticos que buscam divulgar seus produtos e</p><p>serviços na Internet, através do seu site institucional, onde a mesma não necessita fazer atualizações</p><p>frequentes em seu site, sem contar com o custo baixo para desenvolvimento e manutenção do site, as</p><p>atualizações necessárias são realizadas no próprio documento HTML.</p><p>Os web sites que utilizam tecnologias de acesso a banco de dados permitem que as páginas</p><p>sejam atualizadas de forma automática ou dinamicamente. Ou seja, basta fazer a alteração no banco de</p><p>dados que automaticamente a nova informação aparecerá na página do web site. As páginas deste tipo</p><p>de web site são chamadas de páginas dinâmicas.</p><p>Os sites dinâmicos geralmente contam com uma área administrativa onde você mesmo poderá</p><p>administrar as páginas dinâmicas do seu site inserindo, alterando ou excluindo informações em um banco</p><p>de dados, para que seu site esteja sempre atualizado, estas atualizações podem ser efetuadas de</p><p>qualquer computador que estiver conectado com a Internet.</p><p>Atividades</p><p>1. Cite 3 tecnologias utilizadas em uma Página Web.</p><p>2. O que faz o Comitê W3C?</p><p>3. O que faz o Software FLASH?</p><p>Módulo: Desenvolvimento Front-end</p><p>104</p><p>Tema 4: Responsividade</p><p>Site mobile e site responsivo O site responsivo é uma versão única de site que se adapta aos</p><p>diferentes tamanhos de tela, seja desktop, tablet ou celular. Conforme o dispositivo, os elementos da tela</p><p>são reposicionados para facilitar a leitura e o aproveitamento do espaço. Ele tem a vantagem de facilitar</p><p>bastante a manutenção e a atualização do conteúdo, uma vez que, feito isso, já está tudo adaptado para</p><p>todos os dispositivos. Ele pode ser vantajoso, também, pelo fato de o Google gostar de sites responsivos</p><p>(porque privilegiam a experiência do usuário), aí, essas páginas se tornam mais amigáveis para o</p><p>ranqueamento no Google. Temos um exemplo: o site de produtos de beleza e cosméticos Beleza Na Web</p><p>escolheu ter um site responsivo.</p><p>Fonte 1: belezanaweb.com.br (2022)</p><p>Vantagens e Desvantagens</p><p>• Tempo e dinheiro: como já falamos antes, um site exige menos tempo de desenvolvimento e,</p><p>consequentemente, menos dinheiro do que um app. Isso porque não requer uma plataforma diferente</p><p>para programação, já que é uma adaptação do seu site. Ah, e isso facilita e agiliza a manutenção também.</p><p>• Acessibilidade: é fácil acessar o site pelo navegador do celular, certo? Não precisa ir à loja, criar conta</p><p>e fazer download do site para acessar o conteúdo, como acontece com um app. As pessoas precisam ter</p><p>um pouco mais de boa vontade para baixar o app e, depois disso, fica mais fácil, claro.</p><p>• Facilidade de publicação: para publicar um app, é preciso adaptar seu aplicativo às diretrizes de cada</p><p>loja, enviar para aprovação e aguardar um ou mais dias para que isso aconteça (e ele pode ser recusado).</p><p>Para correções e melhorias é o mesmo processo. Já um site mobile ou responsivo não passa por esses</p><p>procedimentos, o que torna bem mais ágil uma publicação ou correção.</p><p>Módulo: Desenvolvimento Front-end</p><p>105</p><p>• Internet: o site depende da internet para ser acessado, diferente de um app, que pode funcionar off-line.</p><p>Dessa maneira, o usuário não fica na “mão” e pode usufruir do produto ou serviço, mesmo que não esteja</p><p>conectado à internet.</p><p>• Experiência do usuário: um site responsivo pode não ter a melhor experiência para o usuário e a</p><p>customização que o app tem, isso porque ele precisa funcionar bem em diversas plataformas. Nesse</p><p>caso, a experiência do usuário pode ficar um pouco comprometida. Já no app, o produto é pensado e</p><p>desenvolvido especialmente para cumprir algumas funções, naquela plataforma. A experiência do usuário</p><p>costuma ser muito melhor.</p><p>• Desempenho: em geral, os sites podem ter um tempo de processamento de informações maior do que</p><p>de um app, ou seja, pode ser mais lento. E aí, quem quer perder tempo hoje em dia, não é? Quanto mais</p><p>rápido, melhor.</p><p>Web Sites Estáticos e Dinâmicos</p><p>Até o advento das tecnologias de acesso a banco de dados via web, o conteúdo dos web sites</p><p>somente podiam ser alterado manualmente, ou seja, cada vez que alguém pedia alguma alteração o web</p><p>designer ou web master tinha que abrir a página, fazer a alteração e salvar a página novamente no</p><p>servidor. As páginas deste tipo de web site são chamadas estáticas.</p><p>Uma ótima solução para empresas são os sites estáticos que buscam divulgar seus produtos e</p><p>serviços na Internet, através do seu site institucional, onde a mesma não necessita fazer atualizações</p><p>frequentes em seu site, sem contar com o custo baixo para desenvolvimento e manutenção do site, as</p><p>atualizações necessárias são realizadas no próprio documento HTML.</p><p>Os web sites que utilizam tecnologias de acesso a banco de dados permitem que as páginas</p><p>sejam atualizadas de forma automática ou dinamicamente. Ou seja, basta fazer a alteração no banco de</p><p>dados que automaticamente a nova informação aparecerá na página do web site. As páginas deste tipo</p><p>de web site são chamadas de páginas dinâmicas.</p><p>Os sites dinâmicos geralmente contam com uma área administrativa onde você mesmo poderá</p><p>administrar as páginas dinâmicas do seu site inserindo, alterando ou excluindo informações em um banco</p><p>de dados, para que seu site esteja sempre atualizado, estas atualizações podem ser efetuadas de</p><p>qualquer computador que estiver conectado com a Internet.</p><p>Controle</p><p>Na mídia impressa, o designer está habituado a utilizar programas de diagramação (QuarkXpress,</p><p>InDesign) para montar um projeto. Antes de ser impresso este projeto é convertido em uma linguagem de</p><p>descrição de página, como o Postscript. O formato do impresso é fixo, permitindo controle total sobre a</p><p>peça.</p><p>Já na mídia on-line, o Web Designer utiliza o HTML, que é uma linguagem de marcação estrutural,</p><p>que não tem poder de apresentar um projeto que seja visualizado da mesma forma em qualquer tipo de</p><p>monitor. A linguagem HTML foi desenvolvida para descrever a estrutura da informação, não a sua</p><p>aparência. Aí é que entra o trabalho do Web Designer, balancear a estrutura da informação com sua</p><p>aparência.</p><p>Cada internauta usa uma configuração diferente em seu microcomputador, como modo de vídeo,</p><p>fonte, resolução de imagens, navegador, etc. Isso faz com que um site possa ser visto diferente da forma</p><p>que você o projetou. Conhecendo cada uma dessas características fica mais fácil chegar a um</p><p>denominador comum.</p><p>Navegadores</p><p>Módulo: Desenvolvimento Front-end</p><p>106</p><p>O programa de navegação ou browser é o software que interpreta o código HTML. A linguagem</p><p>HTML foi criada com dois objetivos: ser universalmente aceita e constituir uma linguagem multiplataforma</p><p>padrão para apresentação de texto, imagens e outros elementos na Internet.</p><p>Percebendo a velocidade com que as mudanças ocorrem na rede, empresas empreendedoras</p><p>resolveram acelerar o processo, criando códigos HTML próprios sem o aval do consórcio W3C. A primeira</p><p>empresa a agir desta forma foi a Netscape, logo seguida pela Microsoft. Novos códigos HTML foram</p><p>criados e são suportados apenas pelos browsers proprietários. Estes códigos não oficiais são chamados</p><p>de extensões HTML.</p><p>Os browsers mais utilizados hoje na Web são o, Internet Explorer da Microsoft e o Mozilla Firefox.</p><p>Pode ser citado também o Safári e Opera, em números de utilização bem menores ao Google Chrome.</p><p>Resolução de Vídeo</p><p>Resolução de vídeo é a forma como as imagens são formadas, ou seja, o número de pontos que</p><p>compõem a imagem na tela (pixel). Atualmente o modo de vídeo mais utilizado pelo usuário brasileiro é</p><p>o de 800x600 pixels. Em outros países esse número varia bastante. Veja mais informações na Unidade</p><p>I.</p><p>Módulo: Desenvolvimento Front-end</p><p>107</p><p>As resoluções disponíveis nas placas de vídeo são de 800x600, 1024x768 e 1280x960, podendo</p><p>variar conforme o modelo e marca.</p><p>Existem diversas formas de lidar com essa situação. Alguns web sites são planejados com seu</p><p>layout fixo, onde cada elemento tem seu tamanho predeterminado - independente da resolução do</p><p>monitor.</p><p>Em outros casos o layout é montado de maneira responsiva, onde a página se adapta</p><p>automaticamente ao dispositivo que o usuário utiliza seja monitor, celular, tablet, televisão, etc. Sendo</p><p>assim se o internauta estiver visualizando um site responsivo em seu celular, os elementos se</p><p>reorganizam para apresentar o que é principal primeiro.</p><p>Site da agência Create</p><p>http://createdm.com/</p><p>Resolução de Imagem</p><p>Como o meio de apresentação do projeto é a tela do computador e não uma página impressa,</p><p>arquivos de alta resolução não fazem parte das mídias interativas. Gráficos de alta resolução foram</p><p>criados para serem impressos em impressoras de alta densidade de pixels. Geralmente uma imagem em</p><p>alta resolução possui algo em torno de 300 ppi (pontos por polegada).</p><p>A resolução de tela mais comum é gerada por 72 ppi (pixels por polegada).</p><p>A unidade de medida para imagens na Internet é feita em pixels, ao invés de centímetros ou</p><p>polegadas utilizados em mídia impressa.</p><p>Ao contrário do que se imagina e mesmo do que se costuma praticar, o processo de criação de</p><p>um web site não começa na frente de uma tela de computador, é preciso elaborar algumas perguntas e</p><p>obter suas respostas primeiro.</p><p>Esta primeira etapa tem total influência no resultado do trabalho e dela dependem todas as outras,</p><p>as informações coletadas e as decisões tomadas serão os guias durante toda a execução do projeto.</p><p>A boa definição de um web site contribui para que as tomadas de decisão sejam claras e firmes</p><p>além de acelerar todos os outros processos, que de outra forma consumiriam mais tempo e dinheiro.</p><p>Módulo: Desenvolvimento Front-end</p><p>108</p><p>As preocupações nesta fase do projeto incluem as partes formais e burocráticas, como propostas,</p><p>contratos e cronogramas, além da coleta de informações, geração de ideias e de esboços sobre o que</p><p>será colocado na página, público-alvo e a escolha pela utilização de tecnologias.</p><p>Coleta de Informações, Geração de Ideias e Esboços</p><p>Para a elaboração de um site é necessário um estudo prévio, através de reuniões com o cliente,</p><p>com a equipe de desenvolvimento, de pesquisas e quaisquer outras fontes de informação que venham a</p><p>contribuir com o projeto. É preciso formular perguntas e obter respostas:</p><p>• Qual é o objetivo do site?</p><p>• Qual será seu público-alvo?</p><p>• O site será de Comércio Eletrônico ou apenas Institucional?</p><p>• A atualização será semanal ou mensal?</p><p>• Fotos dos produtos serão tiradas?</p><p>Todos os esboços e comentários feitos nesta fase devem ser guardados para servirem de apoio no</p><p>desenvolvimento de uma proposta.</p><p>• Objetivo</p><p>"Aumentar o lucro!" - Esta é normalmente a resposta dada pelo cliente quando perguntado sobre o</p><p>objetivo de seu site. A resposta, sob o ponto de vista do empresário, pode até estar certa, mas para o</p><p>web designer é uma resposta que não contribui em nada com o desenvolvimento do projeto.</p><p>Por "objetivo do site" deve-se entender que resultados o site deve trazer. A resposta deve ser</p><p>aprofundada, ou a pergunta deve ser reformulada: "De que modo você espera que o site traga benefícios</p><p>a sua empresa?".</p><p>O objetivo do site é importante para guiar o processo de criação e ajudar a definir a "personalidade" do</p><p>site:</p><p>• É sério o tempo todo ou bem humorado?</p><p>• Usa cores quentes ou frias, chamativas ou pastéis?</p><p>• Apresenta os produtos e serviços da empresa como a atração principal ou disfarçados entre</p><p>outras funções do site?</p><p>• Aceita publicidade ou não?</p><p>• É independente ou é ligado a um portal?</p><p>Além disso, é respondendo a perguntas como estas que será possível decidir qual tipo de site será</p><p>criado. Estas são questões cruciais, mas que dependem também do conhecimento do público-alvo, das</p><p>pessoas que potencialmente visitarão o site.</p><p>• Público-alvo</p><p>Já diz o ditado popular: "não se pode agradar a gregos e troianos", e nenhum site quer correr o</p><p>risco de desagradar seus visitantes. De nada adianta todo o capricho na produção de ideias, na detecção</p><p>dos objetivos do site e na coleta de informações se o visitante não tiver acesso ou não se sentir à vontade</p><p>com algum aspecto das páginas de seu site.</p><p>O público-alvo de um web site tende a ser o mesmo público que consome o produto ou serviço</p><p>sobre o qual o site trata, e neste sentido todas as informações prévias que o cliente tiver sobre o assunto</p><p>serão úteis. Em algumas situações, entretanto, o público pode não ser o mesmo.</p><p>Módulo: Desenvolvimento Front-end</p><p>109</p><p>Há algum tempo, quando a fabricante do sabão em pó OMO decidiu produzir o site do produto,</p><p>ela percebeu que grande parte do público consumidor do produto não tinha acesso à Internet. Decidiu-se</p><p>então por focar o site em outro público-alvo que, segundo a empresa, apresentava um índice razoável de</p><p>influência na compra de sabão em pó.</p><p>É interessante detectar através de pesquisa de informações bem aprofundadas sobre o público-</p><p>alvo, que vão além da idade, classe social e sexo, incluindo também gírias, gostos e tipo de computador</p><p>mais usado. Este último item é de especial importância, pois ajuda na decisão sobre qual tecnologia será</p><p>utilizada na construção do site.</p><p>• Pesquisa e Solução</p><p>Existem atualmente diversos métodos de pesquisa para melhor conhecer o seu cliente e/ou o</p><p>visitante do site: grupos de discussão, entrevista pessoal on-line ou por telefone, formulários de pesquisa</p><p>on-line.</p><p>Quando o orçamento e o cronograma permitem, a pesquisa é o caminho mais certo e seguro para</p><p>conhecer o público-alvo, suas opiniões e o que esperam do site - muitas vezes</p><p>boas sugestões que podem</p><p>ser implementadas nas páginas de duas formas:</p><p>• ajudando a descobrir problemas e soluções para o site, o produto, serviço ou sua comunicação;</p><p>• sugerindo novidades que podem ser colocadas em avaliação para posterior implementação.</p><p>Uma pesquisa muitas vezes pode trazer questões que não foram abordadas nas reuniões com cliente,</p><p>seja por desconhecimento, seja por esquecimento, e por isso é uma ferramenta que deveria ser utilizada</p><p>sempre que possível.</p><p>• Proposta, Contrato e Cronograma</p><p>Módulo: Desenvolvimento Front-end</p><p>110</p><p>A proposta é um documento que diz ao cliente em detalhes como é o projeto que a produtora</p><p>pretende executar, quanto tempo levará e quanto isso vai custar. Todas as decisões a respeito do</p><p>emprego de determinada tecnologia, organograma ou outros elementos do site devem ser explicadas e</p><p>justificadas detalhadamente na proposta. Deve-se mencionar a tecnologia que será empregada, o</p><p>tamanho previsto do site, conter a descrição individual de cada uma das páginas, citando inclusive os</p><p>links e ferramentas adicionais (sistema de busca, animação, etc.). Como não poderia deixar de ser, deve</p><p>conter também todas as informações a respeito do orçamento, discriminadas individualmente</p><p>(desenvolvimento, registro, hospedagem, etc.).</p><p>Contrato é o instrumento legal a ser assinado por contratado e contratante. É de responsabilidade</p><p>de quem desenvolverá o site. É extremamente aconselhável que o modelo de contrato seja redigido com</p><p>o auxílio de um advogado.</p><p>Um cronograma para desenvolvimento do site deve ser detalhado e bem pensado, com os pés no</p><p>chão - com prazos viáveis que atendam expectativas do cliente e da equipe de produção. Não basta</p><p>apenas especificar uma data final, mas sim um calendário completo das datas para o início e o término</p><p>de cada uma das etapas de desenvolvimento, das reuniões, tarefas e também a data de conclusão. Este</p><p>cronograma deve ser de conhecimento das duas partes.</p><p>Arquitetura da Informação</p><p>A dificuldade em encontrar informações em web site causa um prejuízo de bilhões de dólares</p><p>anuais em compras não concluídas e internautas insatisfeitos. Além do design existem também outros</p><p>fatores que dificultam na hora de navegar em um site e de encontrar a informação pretendida. Dentre</p><p>estes fatores podemos citar:</p><p>• má distribuição das informações no site;</p><p>• excesso de conteúdo no site como um todo, e em páginas individuais;</p><p>• conteúdo desnecessário ou não adequado ao site;</p><p>• uso inadequado de tecnologias;</p><p>• utilização de imagens, animações, vídeos, etc., pesados e que deixam o site mais lento.</p><p>Todos esses problemas são consequência de um mau planejamento da arquitetura do web site ou a falta</p><p>dela.</p><p>• Conteúdo do site</p><p>Módulo: Desenvolvimento Front-end</p><p>111</p><p>Um fator importante em um projeto de Web Site é o seu conteúdo. Dê ao internauta o que navegar.</p><p>O conteúdo de um site deve ser claro e objetivo. Não deve encher o site de baboseiras e coisas sem</p><p>sentido. Nos dias de hoje o internauta está mais crítico em relação à informação pesquisada.</p><p>As informações devem ser pesquisadas e analisadas com muita seriedade. Os textos devem ser</p><p>redigidos por um jornalista e as fotos tiradas por um fotógrafo hábil e competente.</p><p>• Arquitetura da Informação</p><p>Arquitetura de Informação é a organização de padrões de dados com o objetivo de transformar o</p><p>que é complexo em algo mais claro. É o que define a navegação e a estrutura do conteúdo de um</p><p>aplicativo web, seja web site ou intranet, e de interfaces de software.</p><p>A Arquitetura da Informação é um passo essencial na criação ou reformulação de uma interface.</p><p>Um bom planejamento de todos os fluxos de informação e das funcionalidades de um site torna o produto</p><p>feito sob medida para o usuário final.</p><p>Em geral, equipes de desenvolvimento web passam da etapa de levantamento de informações do</p><p>cliente diretamente para a etapa de criação de layouts, sem considerar aspectos fundamentais na</p><p>formulação de uma interface que precedem o trabalho de branding e design de um site. Estes aspectos</p><p>são:</p><p>A partir dessas informações é que se consegue chegar a uma definição dos grupos de informações</p><p>principais do site, ou seja, quais serão as seções e subseções do site. Exemplo: pode-se chegar à</p><p>conclusão de que o web site deve ter uma seção institucional com informações sobre a empresa, outra</p><p>destinada a dar detalhes sobre toda a linha de produtos da empresa, outra voltada para a imprensa, etc.</p><p>A seção de Produtos pode ser desmembrada em outras subseções, uma para cada produto fabricado</p><p>pela empresa.</p><p>Atividades</p><p>1. Qual a diferença entre site estático e dinâmico?</p><p>2. Qual a função dos navegadores?</p><p>3. Descreva com as suas palavras, como podemos coletar informações para gerar ideias para</p><p>criação de esboços da página Web?</p><p>Módulo: Desenvolvimento Front-end</p><p>112</p><p>Tema 5: Documentação para Web</p><p>A Documentação na Arquitetura da Informação</p><p>Os pioneiros da Arquitetura da Informação para web desenvolveram na última década - e</p><p>continuam desenvolvendo - uma documentação que pode ser manuseada e compreendida tanto pelos</p><p>clientes como pela equipe responsável pela produção e implantação de cada projeto.</p><p>Para a realização deste trabalho, com competência e profissionalismo, surgiu à figura do Arquiteto</p><p>de Informação, o profissional capaz de organizar, classificar e indexar o conteúdo, além de construir os</p><p>canais para o trânsito, de navegação, entre as seções deste conteúdo categorizado.</p><p>Sitemaps e wireframes são termos cada vez mais familiares para quem trabalha de alguma</p><p>maneira com web sites. Estes gráficos de representação esquemática do que está sendo desenvolvido</p><p>no planejamento em cada web site têm o poder quase "mágico" de trazer à vida uma porção do trabalho</p><p>realizado pelo Arquiteto e mostrar claramente que há um processo contínuo de inteligência por trás de</p><p>cada decisão tomada.</p><p>Ao Arquiteto de Informação é dado o papel de construir os caminhos da informação, suas</p><p>conexões e desdobramentos, a fim de contribuir para a divulgação do conhecimento.</p><p>Um sitemap é a representação gráfica da estrutura de um web site, do ponto de vista da</p><p>distribuição do conteúdo por "páginas" e do caminho mais simples (hiperlink) a ser percorrido pelo usuário</p><p>para se chegar a cada "página" pretendida.</p><p>Não se pretende esgotar as possibilidades de navegação ou interação digital com um sitemap. A</p><p>história do design gráfico, muito antes da idealização de um computador pessoal, já nos mostrava que</p><p>para se fazer compreender, um projeto deve ser uniformizado e simplificado, em seus pontos mais</p><p>importantes.</p><p>Mapas, em geral, são representações iconográficas de estruturas físicas ou digitais, de modo a</p><p>serem mais úteis como guias visuais e informativos de um determinado caminho ou sistema, mais do que</p><p>a representação de alta fidelidade do próprio caminho.</p><p>Modelos de mapas</p><p>Deve-se fazer uma distinção entre os dois tipos de sitemaps existentes.</p><p>Todo web site planejado por um arquiteto de informação apresenta dois sitemaps. O primeiro ainda</p><p>na fase de projeto apresenta as "páginas" do futuro site com suas principais conexões. Chamado de</p><p>sitemap estrutural, este modelo é quase totalmente iconográfico e necessita apenas de alguns elementos</p><p>complementares em sua apresentação para ser plenamente compreendido.</p><p>Recursos como legenda e numeração de páginas são muito importantes para a compreensão do</p><p>sitemap. Algumas características do sitemap estrutural:</p><p>• simbólico;</p><p>• não-maleável;</p><p>• interpretável;</p><p>• não-interativo;</p><p>• bidimensional.</p><p>Módulo: Desenvolvimento Front-end</p><p>113</p><p>Exemplo de sitemap estrutural</p><p>O segundo modelo de sitemap que se conhece é o navegável, comumente encontrado. Muitos</p><p>sites apresentam este recurso, geralmente acessível através de um botão ou link simples. Este mapa</p><p>estrutura-se como uma página a mais do site,</p><p>onde estão os nomes de todas as seções do site, com links</p><p>ativos. Foi desenvolvido para auxiliar o usuário a encontrar a informação, serviço ou produto que procura.</p><p>Para se fazer compreensível até para os recém iniciados na web, estes mapas apresentam elementos</p><p>visuais muito comuns aos do próprio site, além de carregar forte influência da mídia impressa,</p><p>principalmente na disposição das seções e na indicação de seus subníveis. As principais características</p><p>deste modelo de sitemap são:</p><p>• navegável;</p><p>• digital;</p><p>• interativo;</p><p>• indexador;</p><p>• multidimensional.</p><p>Módulo: Desenvolvimento Front-end</p><p>114</p><p>Estrutura de sitemap navegável</p><p>Aliado ao sitemap, o wireframe é um documento que se torna cada vez mais fundamental para o</p><p>trabalho do arquiteto de informação, apesar de não ser uma régua de estilos para o layout e a criação</p><p>das páginas de um site, como é erroneamente interpretado por muitos web designers.</p><p>Sua função é estruturar o conteúdo de cada página, indicando o peso e relevância de cada</p><p>elemento do layout e sua relação com os demais elementos formadores do todo.</p><p>Também cabe ao wireframe indicar a correta marcação de textos, breadcrumbs de navegação,</p><p>guidelines de marca e até dos recursos de programação e tecnologia a serem utilizados pela equipe de</p><p>produção. Posteriormente também serve como baliza para testes de usabilidade.</p><p>Dicas:</p><p>Os breadcrumbs ou "migalhos de pão" são elementos muito utilizados para que o utilizador não</p><p>se perca, indicando-lhe onde está e a relação hierárquica desse modo com o resto da estrutura da web.</p><p>Trata-se de uma espécie de Path que costuma ter a seguinte forma:</p><p>Módulo: Desenvolvimento Front-end</p><p>115</p><p>Além desta função estrutural, o wireframe também é utilizado para marcação das etapas de um</p><p>processo de interação entre usuário e o sistema. Como nas etapas de uma compra on-line, por exemplo,</p><p>busca pelo produto, escolha de um dos resultados, confirmação da intenção, preenchimento do cadastro</p><p>e opção de pagamento.</p><p>Para cada um destes passos da compra deve haver um wireframe que explique detalhadamente</p><p>todas as possibilidades de interação e o caminho percorrido pelo usuário.</p><p>Principais elementos de um wireframe</p><p>Na construção do wireframe o arquiteto busca representar esquematicamente todos os elementos</p><p>que compõem a página. Imagens, textos, formulários, flash, mecanismos de busca são representados</p><p>por variações gráficas de elementos similares - como quadrados e círculos, traços contínuos e</p><p>pontilhados, palavras em negrito e sublinhadas, largura e altura das páginas - padronizados para todos</p><p>os wireframes da documentação.</p><p>Wireframe com baixo detalhamento</p><p>Módulo: Desenvolvimento Front-end</p><p>116</p><p>Módulo: Desenvolvimento Front-end</p><p>117</p><p>Um web site raramente é uma ação isolada de uma empresa na tentativa de se comunicar com</p><p>seus clientes, prestando serviços ou vendendo diretamente seus produtos. É muito importante que o site</p><p>esteja graficamente e conceitualmente alinhado com a proposta de comunicação que vem sendo adotada</p><p>nas demais ações na Internet e mesmo nas mídias off-line, como jornais, revistas, TV, outdoors, ponto-</p><p>de-venda, etc. É claro que este envolvimento com a marca deve ater-se também ao respeito pelas</p><p>características do universo digital e o objetivo individual de cada projeto, combinando unidade e</p><p>autonomia de atuação.</p><p>Alguns riscos e vantagens do wireframe:</p><p>Riscos:</p><p>• não atender as expectativas dos clientes, empresas ou instituições, que estão longe dos</p><p>conceitos mais básicos da Arquitetura de Informação, sentindo-se assim mais confortáveis em</p><p>aprovar layouts de designers, por serem peças com grande impacto gráfico;</p><p>• acomodar a equipe de criação de modo que os designers, por falta de tempo hábil ou</p><p>insegurança, não mais inovem em seus projetos e sigam as indicações do wireframe à risca;</p><p>Módulo: Desenvolvimento Front-end</p><p>118</p><p>• por não ser desenhado na exata escala em que será construído o site, pode gerar desencontros</p><p>de entendimento da relevância de cada elemento na composição da página e seu impacto de</p><p>visualização;</p><p>• necessita de tempo, educação e insistência de uso até tornar-se corretamente entendido pelos</p><p>profissionais envolvidos nas etapas de cada projeto.</p><p>Vantagens:</p><p>• facilita a aplicação de conceitos de usabilidade já testados e comprovadamente eficientes;</p><p>• auxilia a equipe de desenvolvimento e programação na tarefa de produzir o site de maneira mais</p><p>rápida, padronizada e eficiente;</p><p>• após a implantação do site, os wireframes auxiliam nos testes de usabilidade e mostram</p><p>efetivamente o que deve ser refeito em cada uma das páginas;</p><p>• funciona como uma documentação do site e deve ser consultado antes de cada modificação</p><p>posterior, para prever impactos na arquitetura e funcionalidade.</p><p>Principais softwares para criação de sitemaps e wireframes</p><p>Para quem está começando no ofício de arquiteto da informação, ou ainda pretende dominar esta</p><p>nova profissão, algumas dicas são muitos úteis. A começar pelos softwares mais utilizados atualmente,</p><p>o arquiteto tem muitas opções para criar ou personalizar sua documentação da maneira que melhor</p><p>escolher.</p><p>Certamente você poderá utilizar outros softwares para construir sua documentação, porém os três</p><p>listados a seguir são recomendáveis para a função, visto que foram desenvolvidos para o planejamento</p><p>e representação esquemática de sistemas em geral:</p><p>• Visio - http://www.microsoft.com/office/visio/</p><p>• Concept Draw - http://www.conceptdraw.com/</p><p>• Smart Draw - http://www.smartdraw.com/</p><p>Modelo de Documentação feita no Microsoft Visio</p><p>http://www.smartdraw.com/</p><p>Módulo: Desenvolvimento Front-end</p><p>119</p><p>Estrutura de Navegação</p><p>Uma vez determinada à arquitetura da informação de um site, deve-se começar a pensar em como</p><p>a mesma será apresentada para o usuário. Esta etapa é definida como a implementação da interface com</p><p>o usuário ou estrutura navegacional. Nela deve ser definido claramente, como o usuário passa de um</p><p>nível a outro da navegação, como ele se localiza dentro do imenso universo de sites disponíveis na Web.</p><p>Ë importante sempre contextualizar em todas as páginas, em que site, e em qual tópico do site o usuário</p><p>se encontra e como ele pode acessar os demais tópicos.</p><p>Usa-se muito como recurso navegacional o mapa do site, que representa graficamente a estrutura</p><p>do site, como uma ferramenta adicional à navegação. Outra ferramenta que pode ser utilizada é o</p><p>mecanismo de busca dentro do site.</p><p>Note que a navegação é uma forma de procura da informação, onde, não necessariamente o</p><p>usuário sabe exatamente o que procura. O segredo é tornar esta experiência a mais prazerosa possível,</p><p>sempre tentando fazer com que a cada clique o usuário entenda algum conceito ou que algo se</p><p>acrescente a ele. Os links devem ser bem pensados. É importante que o usuário saiba para onde ele está</p><p>indo. Desta forma, durante o projeto navegacional deve-se tomar extremo cuidado com os nomes</p><p>utilizados nos diversos menus e nos links existentes.</p><p>Cuidado com links do tipo "Próxima Página". A web é um grande sistema de hipermídia, e desta</p><p>forma, não linear. Dependendo de como o usuário chegou ao seu site, "Próxima Página" pode não fazer</p><p>Módulo: Desenvolvimento Front-end</p><p>120</p><p>o menor sentido. Pelo mesmo motivo é sempre importante fornecer os mecanismos navegacionais para</p><p>que a qualquer momento, não importa através de que página, o usuário saiba exatamente onde ele está</p><p>e para onde ele pode ir.</p><p>Com tanta informação na rede, devem-se tomar todos os cuidados possíveis para que o usuário</p><p>sinta confiança na informação que está lendo. Desta forma, é importante identificar a instituição/pessoa</p><p>responsável pelo site, fornecer a data da última atualização e um endereço para contato.</p><p>É fácil concluir que o projeto gráfico e o projeto navegacional devem ser</p><p>desenvolvidos conjuntamente.</p><p>Barra de navegação</p><p>Qualquer que seja o esquema e o tipo de navegação do site, um elemento indispensável é a barra</p><p>de navegação. Ela vai tornar possível que o usuário identifique onde ele está, ir para áreas importantes</p><p>do site e, principalmente, voltar de onde ele veio (parece estranho, mas este é um dos principais motivos</p><p>que levam as pessoas a se perderem dentro de um site).</p><p>A barra de navegação deve ser simples e eficaz, para que seja de imediata identificação, além de</p><p>estar presente em todas as páginas do site.</p><p>Barra de navegação horizontal simples e amigável</p><p>Barra de navegação vertical com visual mais arrojado</p><p>Módulo: Desenvolvimento Front-end</p><p>121</p><p>Usabilidade</p><p>Usabilidade é um dos termos mais usados atualmente em relação à web sites, e diz respeito à</p><p>facilidade de uso do web site. Um web site tem uma boa usabilidade quando é fácil de entender e de usar,</p><p>daí a origem do termo. Um dos gurus de web design e maior defensor da usabilidade é o norte-americano</p><p>Jakob Nielsen, que aborda este assunto em seu site www.useit.com, e também no livro "Projetando web</p><p>sites - Designing Web Usability".</p><p>Nas duas últimas décadas, diversos autores têm se debruçado sobre o tema, desde que os</p><p>computadores passaram a ser utilizado por um número maior de pessoas, seja para trabalho, estudo ou</p><p>atividades domésticas. Muitas definições sobre o que é usabilidade têm sido emitidas. Por exemplo, o</p><p>pesquisador francês Dominique Scapin considera que a usabilidade está diretamente ligada ao diálogo</p><p>na interface e é a capacidade do software em permitir que o usuário alcance suas metas de interação</p><p>com o sistema. Para Jakob Nielsen, ser de fácil aprendizagem, permitir utilização eficiente e apresentar</p><p>poucos erros são os três aspectos fundamentais para a percepção da boa usabilidade por parte do</p><p>usuário.</p><p>Ainda existem outros fatores que servem como delimitadores para o conceito e ajudam a definir o</p><p>termo usabilidade. Antes de qualquer coisa, o site deve ser de fácil aprendizagem, pois todos sabem que</p><p>o tempo de aprendizagem de um web site é zero. Não dá para enviar um manual de uso para cada</p><p>possível usuário ensinando onde se localiza a barra de menus, ou como finalizar a compra. Desta forma,</p><p>é através da própria interface que usuário deve perceber a forma de uso do sistema, que por sua vez,</p><p>deve permitir que os usuários alcancem níveis de desempenho aceitáveis dentro de um determinado</p><p>período de tempo.</p><p>Também é comum pensar em medidas para usabilidade, pois servem como parâmetros para</p><p>avaliar o nível de usabilidade de um sistema ou de uma interface. As medidas frequentemente mais</p><p>consideradas são: efetividade, eficiência e satisfação.</p><p>Um site com boa efetividade permite que o usuário alcance os objetivos iniciais de interação. Se</p><p>for um site de comércio eletrônico, que o usuário realize a compra ou mesmo uma consulta de preço. Se</p><p>for um site de notícias, que o usuário consiga ler as manchetes e aprofundar-se em algum assunto de</p><p>interesse, ou pesquisar matérias anteriores. A efetividade geralmente é observada em termos de</p><p>finalização de uma tarefa e também em termos de qualidade do resultado obtido.</p><p>Novos produtos, com interfaces mais naturais estão sendo desenvolvidos. É o caso da Surface</p><p>(www.microsoft.com/surface), o primeiro "computador de mesa".</p><p>Módulo: Desenvolvimento Front-end</p><p>122</p><p>Somando-se à efetividade, a outra medida de usabilidade, a eficiência, que se refere à quantidade</p><p>de esforço necessário para se chegar a um determinado objetivo. Então, não é suficiente permitir que o</p><p>usuário atinja o objetivo e realize a tarefa, mas que o faça com o menor esforço possível. Os desvios que</p><p>o usuário faz durante a interação e a quantidade de erros cometidos pode servir para avaliar o nível de</p><p>eficiência do site. Por isso, oferecer rotas alternativas e atalhos para o conteúdo ou para a finalização da</p><p>tarefa pode ser uma boa maneira de tornar o site mais eficiente.</p><p>A terceira medida de usabilidade, satisfação, talvez seja a mais difícil de medir e quantificar, pois</p><p>pode estar relacionada a fatores altamente subjetivos. De maneira geral, satisfação se refere ao nível de</p><p>conforto que o usuário sente ao utilizar a interface e qual a aceitação como maneira de alcançar seus</p><p>objetivos. A satisfação pode ser percebida por meio de análise qualitativa das atitudes, por exemplo,</p><p>através da opinião do usuário, por meio de entrevistas ou mesmo comentários feitos durante a interação.</p><p>Esses conceitos e medidas devem ser entendidos como maneiras para melhorar a experiência do</p><p>usuário durante seu contato como o site. A boa usabilidade ajuda a formar, ou manter, uma boa imagem</p><p>diante dos usuários. Alcançar uma boa usabilidade é uma maneira de se destacar na multidão de serviços</p><p>oferecidos na Internet, viabilizar melhor o acesso ao conteúdo e se manter na briga para bater a</p><p>concorrência.</p><p>Interatividade</p><p>Interatividade se resume em diversas formas criativas de se trabalhar usando várias maneiras de</p><p>interação em uma apresentação, onde o emissor consiga transmitir a mensagem para o receptor. Para</p><p>se desenvolver qualquer tipo de interatividade é necessário utilizar-se de tecnologias avançadas, através</p><p>disto, há a possibilidade de um maior controle do receptor pelo emissor, proporcionando um conhecimento</p><p>maior do mesmo, fazendo com que a interatividade seja benéfica, por exemplo, uma empresa para com</p><p>seus clientes.</p><p>Interatividade na Web engloba vários assuntos, várias coisas que relacionam a ligação homem-</p><p>máquina. Todo meio de comunicação em um site, onde relacione essa ligação é uma interatividade.</p><p>Existem diversas formas de um site ser interativo.</p><p>Todos os profissionais que desenvolvem um site (webmaster e webdesigner) necessitam conhecer</p><p>um pouco de Webmarketing, justamente para que no projeto desse site seja incluída alguma</p><p>interatividade, sendo a mesma construtiva.</p><p>Os sites interativos geralmente funcionam de acordo com o desenvolvimento de cada projeto, mas</p><p>todos com o mesmo objetivo de deixar o site personalizado, dinâmico e sempre procurando atender as</p><p>necessidades do seu internauta.</p><p>Os sites interativos têm como objetivo o emissor, porque através dele chegará a mensagem ao</p><p>receptor e esse início deve sempre surgir através de estudos de estratégias usadas pelo receptor para</p><p>que sempre se consiga prender a atenção do mesmo.</p><p>A interatividade tem vários meios para dar retorno, tanto comercial, como em facilitar meios de</p><p>comunicação interna de uma empresa.</p><p>Comercial: sempre que é feito uma compra online, está precedendo um meio de uma interatividade,</p><p>porque está sendo feita uma integração entre o emissor e receptor.</p><p>Muitos sites promovem sorteios, promoções concorridas através de uma interatividade.</p><p>A News Letters é um meio de interatividade, na qual é preenchido um formulário que possibilita,</p><p>através do e-mail, o recebimento de vários tipos de informações e com elas sempre vem alguma</p><p>publicidade on-line (Banners).</p><p>Através da interatividade se facilita muito o processo de comunicação interna de uma empresa,</p><p>um dos exemplos disso é o Business Call Center, que é uma Central de Atendimento, suporte e auxílio</p><p>Módulo: Desenvolvimento Front-end</p><p>123</p><p>aos consumidores, clientes, etc. Existem vários outros serviços que facilitam a comunicação entre a</p><p>empresa e seus concessionários, reduzindo os custos de se ter uma estrutura local, por apenas um site</p><p>que disponibiliza vários tipos de serviços facilitando o meio de comunicação.</p><p>Alguns exemplos de Interatividades na Web:</p><p>• chats;</p><p>• formulários;</p><p>• jogos;</p><p>• making off;</p><p>• cartão de apresentação (multimídia);</p><p>• palestras e work shop on-line;</p><p>• business call center, entre outras.</p><p>Atividades</p><p>1. O que são Sitemaps e wireframes?</p><p>2. Quais são as características do sitemap estrutural?</p><p>3. Qual a função da Estrutura de</p><p>sitemap navegável?</p><p>Módulo: Desenvolvimento Front-end</p><p>124</p><p>Tema 6: Plataformas de Desenvolvimento Web</p><p>Arquitetura Cliente-Servidor</p><p>Um dos primeiros conceitos que deve ficar claro antes de apresentar as tecnologias usadas nas</p><p>páginas web é que os web sites funcionam numa arquitetura cliente - servidor. Neste caso o cliente é o</p><p>browser /navegador e o servidor é o servidor web.</p><p>Estrutura de um Web Site</p><p>Neste item será analisada a estrutura de um web site. Independentemente da geração em que o</p><p>web site se enquadra, têm os web sites que são mais simples em sua estrutura e tecnologias envolvidas</p><p>e outros que são mais complexos, pois utilizam tecnologias de acesso ao servidor, bancos de dados e</p><p>recursos multimídia.</p><p>• Estrutura Básica</p><p>Classificam-se como estrutura básica os web sites que utilizam em suas páginas apenas HTML</p><p>(páginas estáticas), contendo textos estáticos, imagens, gifs animados e alguns efeitos de interatividade</p><p>usando JavaScript.</p><p>Módulo: Desenvolvimento Front-end</p><p>125</p><p>• Estrutura complexa</p><p>Classificam-se como estrutura complexa os web sites que utilizam hiperlinks para páginas</p><p>dinâmicas com acesso a componentes no servidor, a banco de dados, às animações em Shockwave</p><p>Flash, vídeo streaming e áudio.</p><p>Sites de Busca</p><p>Obter a melhor classificação em um site de busca é a mais importante tarefa de divulgação de um</p><p>site. A pesquisa nos sites de busca é a maneira mais utilizada pelos usuários da Internet.</p><p>Um site bem classificado nos sites de busca terá o tráfego de novos visitantes aumentado</p><p>drasticamente.</p><p>Um site de busca é um banco de dados que ajuda as pessoas a encontrar informações na Internet,</p><p>de acordo com palavras ou termos digitados pelos usuários.</p><p>De um modo geral, existem três tipos de sites de busca:</p><p>• diretórios;</p><p>• spider;</p><p>• metabusca.</p><p>• Como funcionam?</p><p>Os Diretórios, como o Yahoo, são como as páginas amarelas de um guia telefônico. Eles possuem</p><p>várias categorias e subcategorias sobre os mais variados assuntos. Uma boa classificação depende</p><p>basicamente da informação que foi fornecida durante o cadastramento do site e da escolha da categoria.</p><p>Os Spiders são programas que percorrem a Web automaticamente em busca de novas páginas,</p><p>alimentando continuamente os bancos de dados dos sites de busca. Para cadastrar o seu site num site</p><p>que utiliza este tipo de programa, você só precisa informar o endereço (URL) do site e ele será visitado</p><p>pelo spider, que o classificará de acordo com o conteúdo encontrado em diferentes partes das suas</p><p>páginas.</p><p>Módulo: Desenvolvimento Front-end</p><p>126</p><p>Os Metabusca são sites de busca que se utilizam do resultado de outras buscas. Esse tipo de site</p><p>faz uma pesquisa em vários sites de busca diferentes e apresenta os resultados organizados em uma</p><p>única lista de classificação.</p><p>• Tornando seu site visível</p><p>Um erro comum é fazer o cadastramento em um site de busca antes de verificar se a estrutura de</p><p>informação do site permite obter uma boa classificação. O uso de frames, imagens e animações em Flash,</p><p>gráficos, mapas de imagens, conteúdo dinâmico, links com JavaScript, todas essas técnicas precisam ser</p><p>usadas com cuidado, para não prejudicar uma boa classificação.</p><p>• Métodos de classificação</p><p>Os sites de busca utilizam um conjunto de vários fatores para aferir a importância de um site para</p><p>fins de classificação nos resultados de uma pesquisa.</p><p>Um grande fator é a utilização da tag , que tem grande importância na classificação. Pois</p><p>você pode definir no título palavras chaves que serão pesquisadas.</p><p>As tags META description e keyworks permitem ao desenvolvedor do site colocar informações</p><p>para os sites de busca que levam essas tags em consideração.</p><p>• As principais ferramentas de Busca</p><p>http://www.google.com</p><p>http://www.yahoo.com</p><p>http://www.bing.com.br</p><p>Equipe</p><p>Uma equipe de desenvolvimento de web sites pode variar muito, desde equipes extremamente</p><p>enxutas como um web designer e um web developer, até dezenas de pessoas envolvidas em várias</p><p>etapas e áreas. A seguir veja um modelo que é classificado como ideal para um bom projeto de web site.</p><p>Módulo: Desenvolvimento Front-end</p><p>127</p><p>Exemplo de modelo de equipe de desenvolvimento de web site</p><p>Hospedagem</p><p>Após seu site ficar pronto, ele deverá ser colocado em um Servidor Web. O Servidor Web é um</p><p>conjunto de programas instalados de forma que a máquina fica "aberta" para que qualquer usuário da</p><p>Internet possa acessá-la. Existem muitas empresas especializadas em hospedagem de site. Elas</p><p>oferecem grandes recursos de tecnologias, segurança, comodidade e suporte técnico.</p><p>Antes de escolher o serviço de hospedagem, faça uma pesquisa e saiba exatamente o que você</p><p>precisa. O preço varia de acordo com o espaço, taxa de transferência mensal, quantidade de e-mails e</p><p>outros recursos.</p><p>Módulo: Desenvolvimento Front-end</p><p>128</p><p>Diversos serviços de hospedagem</p><p>Domínio</p><p>Na Internet, todo site é identificado por um endereço, também chamado de domínio. Com o</p><p>crescimento da rede mundial, ter um domínio atraente é muito importante para o sucesso de um site. E</p><p>para alguns negócios o domínio tem que ser internacional.</p><p>Na URL http://www.neweducation.com.br, o domínio se restringe apenas a neweducation.com.br.</p><p>O que é DNS?</p><p>DNS significa Domain Name System. É um sistema de identificação de computadores ligados à</p><p>Internet. Mais especificamente, ele transforma um domínio em um conjunto de números chamado</p><p>endereço IP. O DNS, por exemplo, transforma o domínio yahoo.com.br no endereço IP "200.211.225.70".</p><p>A origem do DNS vem dos primórdios da Internet. Naquela época, o número de servidores ligados</p><p>à Internet era ainda pequeno e cada um deles era designado por um conjunto de números. Como eram</p><p>poucos, era fácil guardar seus números.</p><p>Mas a Internet cresceu rapidamente e milhões de servidores foram conectados. Dessa maneira,</p><p>usar números para designar os servidores deixou de ser prático. Era preciso inventar um sistema que</p><p>traduzisse endereços numéricos em endereços de fácil memorização. Esse problema foi resolvido pelo</p><p>DNS.</p><p>No Brasil o órgão responsável por domínios é a CGI.BR e seu endereço é http://registro.br. Para</p><p>ter um domínio .br basta acessar o site, se cadastrar como usuário, ganhar um login e uma senha.</p><p>Atualmente se paga apenas R$ 30,00 (trinta reais) por ano pelo registro de um domínio.</p><p>Módulo: Desenvolvimento Front-end</p><p>129</p><p>Home Page do registro.br</p><p>Para registrar domínios fora do Brasil, há várias empresas que fazem registros. Podemos citar o</p><p>site Register.com (http://register.com) e Network Solutions (http://www.networksolutions.com).</p><p>Blogs</p><p>Os blogs surgiram há aproximadamente 5 anos e são utilizados pelas pessoas como uma espécie</p><p>de diário online. Inclusive a própria tradução do seu nome completo - WebLog - é diário da web.</p><p>O proprietário do blog (ou proprietários, em blogs comunitários) utiliza essa ferramenta para a</p><p>publicação de histórias, novidades, ideias e imagens.</p><p>A vantagem dessa forma de comunicação é a sua facilidade de uso, sendo possível criar um blog</p><p>sem conhecimento de nenhuma linguagem ou programa. Em poucos minutos e cliques você já pode</p><p>começar a publicar (ou postar - jargão utilizado pelos donos de blogs) as suas ideias.</p><p>O crescimento da quantidade de blogs na web (calcula-se que existam 30 milhões de blogs no</p><p>mundo) criou um ambiente onde se pode encontrar de tudo, desde blogs de jornalistas e escritores até</p><p>blogs de adolescentes e professores de informática.</p><p>Módulo: Desenvolvimento Front-end</p><p>130</p><p>Os blogs possuem uma enorme quantidade de acessos, pois mesmo as pessoas que não</p><p>possuem o seu próprio blog visitam os de outras pessoas para buscar assuntos do seu interesse. Essa</p><p>setorização de assuntos cria comunidades, onde um blogueiro indica</p><p>o site de outro blogueiro, criando</p><p>uma interligação de blogs.</p><p>Muitos proprietários de blogs são formadores de opinião, quer seja dentro de sua comunidade,</p><p>quer seja dentro de toda a web e por isso não podemos descartar o blog como uma séria ferramenta de</p><p>trabalho para qualquer um que queira tornar pública as suas ideias.</p><p>Fotoblogs</p><p>Derivado do blog, o fotoblog (fotolog ou flog) é também uma ferramenta muito importante para a</p><p>divulgação de idéias. Nesse caso, no formato de fotografias.</p><p>Dentro de um fotoblog é possível postar fotos todos os dias e contar com um sistema de</p><p>comentários para saber a opinião dos seus visitantes sobre aquela imagem. Aliás, em muitos casos, é</p><p>essa opinião que motiva os autores a criar imagens cada vez mais interessantes, tornando assim o</p><p>fotoblog uma enorme forma de interação interpessoal.</p><p>De maneira semelhante ao blog, o fotoblog também permite o cadastro de diversos fotoblogs</p><p>"amigos", formando uma comunidade e fazendo o internauta pular de um fotoblog para o outro e criando</p><p>assim uma rede de rápida expansão.</p><p>Algumas empresas estão criando fotoblogs e blogs para a divulgação de produtos, isso mostra</p><p>que é hora de levar mais a sério esse fenômeno que há muito tempo deixou de ser uma mania de</p><p>adolescentes.</p><p>Comunidades Virtuais</p><p>Desde a sua abertura pública, a internet procurou ser uma forma de aproximar as pessoas.</p><p>Utilizando tecnologias como bate-papo, e-mail, IRC, ICQ, MSN, Skype e mesmo web sites, a web cada</p><p>dia mais é um importante meio de comunicação.</p><p>Dentro dessa inúmera quantidade de sistemas de comunicação, os fóruns e grupos de discussão</p><p>sempre foram as formas mais sérias de se comunicar. Os profissionais de diversas áreas costumam se</p><p>reunir para trocar ideias, sugestões, esclarecer dúvidas e obter informações em serviços de grupos e</p><p>fóruns há muito tempo.</p><p>Essa febre por comunicação (pessoal e profissional) tem como principal novidade o conceito de</p><p>Comunidade Virtual.</p><p>Módulo: Desenvolvimento Front-end</p><p>131</p><p>Dentro de uma comunidade virtual as pessoas podem se reunir em grupos, trocar novidades,</p><p>reencontrar amigos distantes, fazer contatos profissionais e até mesmo encontrar um par romântico.</p><p>Funcionando como um grande fórum, as comunidades virtuais utilizam diversos conceitos já</p><p>bastante conhecidos da web (murais, mensagens, grupos de discussão, bate-papo e outros - tudo no</p><p>mesmo lugar), porém o foco agora passa a ser a conexão pessoal entre os seus usuários.</p><p>Normalmente os arranjos dentro dessas comunidades têm como base o usuário. Dessa forma um</p><p>usuário pode cadastrar amigos (outros usuários) e fazer parte de comunidades (repletas de usuários)</p><p>onde serão trocadas mensagens sobre um assunto específico.</p><p>Como uma grande rede de amigos, o crescimento dessas comunidades progride de forma rápida,</p><p>com grande parte do seu público constituído de brasileiros que a utilizam cada vez mais em seu dia a dia.</p><p>Mas não são apenas maravilhas que encontramos nessas comunidades. Com essa enorme quantidade</p><p>de pessoas reunidas, muitos problemas também acontecem. Dificuldades de conexão, invasões de</p><p>comunidades, spams, falhas tecnológicas e até mesmo casos de racismo são alguns dos males que</p><p>começam a surgir.</p><p>Wikis</p><p>As Wikis são páginas comunitárias na internet que podem ser alteradas por todos os usuários que</p><p>têm direitos de acesso. Na internet pública, essas páginas comunitárias geraram fenômenos como a</p><p>Módulo: Desenvolvimento Front-end</p><p>132</p><p>Wikipedia, que é uma enciclopédia on-line escrita por leitores e moderada pelos próprios usuários, que</p><p>cuidam da integridade do seu conteúdo.</p><p>A Wikipedia é uma enciclopédia colaborativa, com milhões de páginas de informações</p><p>Usadas em empresas, as wikis estão se tornando uma maneira fácil de trocar ideias para um grupo de</p><p>trabalhadores envolvido em um projeto.</p><p>Essa notícia da Folha de São Paulo (24/06/2007) mostra como o conceito de colaboração vai além da</p><p>Wikipedia:</p><p>"A utilização desse novo modelo vai além da enciclopédia Wikipedia ou do YouTube e começa a entrar</p><p>rapidamente no mundo industrial. Trinta e cinco empresas da Fortune 500 fazem parte do InnoCentive,</p><p>um site que reúne 91 mil cientistas de 175 países. Nele, as companhias colocam problemas que suas</p><p>equipes de P&D (pesquisa e desenvolvimento) não conseguem solucionar e oferecem recompensas que</p><p>vão de US$ 5.000 a US$ 100 mil para os que trouxerem respostas viáveis.</p><p>Em vez de se limitar a seu grupo de funcionários, nomes como Boeing e Procter & Gamble buscam</p><p>inovação em âmbito global, o que eleva a rapidez e o espectro das descobertas.</p><p>Apesar de ter 9.000 pesquisadores, a Procter & Gamble decidiu que 50% das ideias para o</p><p>desenvolvimento de seus novos produtos deverão vir de fora de suas fronteiras até 2010."</p><p>Fonte: Folha de São Paulo</p><p>RSS</p><p>Abreviação de "really simple syndication" (distribuição realmente simples) é uma maneira de</p><p>distribuir informação por meio da internet que se tornou uma poderosa combinação de tecnologias "pull"</p><p>- com as quais o usuário da web solicita as informações que deseja-- e tecnologias "push" --com as quais</p><p>informações são enviadas a um usuário automaticamente.</p><p>Módulo: Desenvolvimento Front-end</p><p>133</p><p>Ao usar RSS, você fica sabendo imediatamente quando uma informação do seu interesse é</p><p>publicada, sem que você tenha de navegar até o site de notícias.</p><p>O visitante de um site que funcione com RSS pode solicitar que as atualizações lhe sejam enviadas</p><p>(processo conhecido como "assinando um feed").</p><p>Redes Sociais</p><p>Hoje as redes e as mídias sociais são um dos meios de comunicação empresa x clientes, porém</p><p>devido a constantes mudanças, são poucas empresas que acompanham a sua agilidade. Neste momento</p><p>é que entra o papel do web designer em administrar, incentivar e manter a empresa em constante</p><p>comunicação com seu público-alvo através destes meios.</p><p>É também fundamental o desenvolvedor e mantenedor estarem atualizados através de redes</p><p>sociais voltadas para designers.</p><p>• Colour Lovers</p><p>Uma comunidade em constante atualização que inspira através de pessoas apaixonadas por cores. Unem</p><p>tendências para criar novas cores, padrões e paletas de cores.</p><p>Módulo: Desenvolvimento Front-end</p><p>134</p><p>http://www.colourlovers.com/</p><p>• Dribbble</p><p>O usuário do Dribbble pode postar trabalhos que estão sendo desenvolvidos através de pequenas</p><p>amostras de imagens com o objetivo de obter a opinião de seus seguidores.</p><p>http://dribbble.com/</p><p>• Threadless, Camiseteria e Wedologos</p><p>Essas três comunidades de concorrência criativa incentivam através de premiações em dinheiro e/ou</p><p>produtos.</p><p>Módulo: Desenvolvimento Front-end</p><p>135</p><p>www.camiseteria.com.br</p><p>www.wedologos.com.br</p><p>http://www.camiseteria.com.br/</p><p>Módulo: Desenvolvimento Front-end</p><p>136</p><p>• Bēhance</p><p>Uma rede social voltada para a apresentação do design criativo onde podem ser postadas fotos, projetos</p><p>em desenvolvimento, vídeos, ilustrações</p><p>http://www.behance.net/</p><p>• Fontli</p><p>Uma comunidade tipográfica que funciona através de um aplicativo para captura de fontes, e com um</p><p>acervo de fontes para todo tipo de projeto.</p><p>http://www.fontli.com</p><p>Atividades</p><p>1. Defina qual é a estrutura básica e complexa de um web site?</p><p>2. Quais são os três tipos de sites existentes?</p><p>3. Para que serve a hospedagem de um site?</p><p>Módulo: Desenvolvimento Front-end</p><p>137</p><p>Tema 7: Layout e Design Digital</p><p>Cores</p><p>Color, em Latino, Couleur em Francês, colore em Italiano; Cor para os Brasileiros, tudo para expressar</p><p>uma sensação visual que nos oferece a natureza, através dos raios de luz irradiados em nosso planeta.</p><p>Algumas experiências psicológicas têm provado que há uma reação física do indivíduo diante da cor. Há</p><p>uma pesquisa, feita pelo psicólogo Bamz, que alia o fator à preferência que o indivíduo manifesta por</p><p>determinada cor.</p><p>Esse estudo pode conduzir a resultados eficazes no campo mercadológico.</p><p>Estudo de Bamz</p><p>• vermelho - corresponde ao período de 1 a 10 anos - idade da efervescência e da espontaneidade;</p><p>• laranja - corresponde ao período de 10 a 20 anos - idade da imaginação, excitação, aventura;</p><p>• amarelo - corresponde ao período de 20 a 30 anos - idade da força, potência, arrogância;</p><p>• verde - corresponde ao período de 30 a 40 anos - idade da diminuição do fogo juvenil;</p><p>• azul - corresponde ao período de 40 a 50 anos - idade do pensamento e da inteligência;</p><p>• lilás - corresponde ao período de 50 a 60 anos - idade do juízo, do misticismo, da lei;</p><p>• roxo - corresponde ao período dos 60 anos em diante - idade do saber, da experiência e da</p><p>benevolência.</p><p>Sensações acromáticas:</p><p>• branco - a palavra branco vem do germânico blank (brilhante). Simboliza a luz, e nunca é</p><p>considerada cor, pois de fato não é. Se para os ocidentais simboliza a vida e o bem, para os</p><p>orientais é a morte. Para nós ocidentais representa espaço;</p><p>• vermelho - vem do latim vermiculus (verme, inseto). Desta se extrai uma substância escarlate, o</p><p>carmim, e chamamos a cor de carmesim. Simboliza uma cor de aproximação, de encontro;</p><p>• laranja - origina-se do persa narang, através do árabe naranja. Simboliza o flamejar do fogo;</p><p>• amarelo - deriva do latim amaryllis. Simboliza a cor da luz irradiante em todas as direções;</p><p>• verde - vem do latim viridis. Simboliza a faixa harmoniosa que se interpõe entre o céu e o sol.</p><p>Cor reservada e de paz tranquilizante. Cor que favorece o desencadeamento de paixões;</p><p>• azul - tem origem no árabe e no persa lázurd. É a cor do céu sem nuvens. Dá a sensação do</p><p>movimento para o infinito;</p><p>• roxo - vem do latim russeus. Cor que possui um forte poder microbicida;</p><p>• violeta - é diminutivo do provençal antigo viula (viola). Essa cor possui bom poder sonífero.</p><p>Módulo: Desenvolvimento Front-end</p><p>138</p><p>Em diversas áreas do design (e mesmo nas artes plásticas) são utilizados sistemas para a criação</p><p>de arranjos de cores. O sistema mais popular é o Círculo Cromático. Com base no Círculo Cromático é</p><p>possível "encontrar" combinações de cores, criando assim paletas harmônicas.</p><p>Módulo: Desenvolvimento Front-end</p><p>139</p><p>Harmonia Monocromática - Na harmonia monocromática, são usadas apenas variações da mesma cor,</p><p>com diferentes tons. Essa paleta de cores é a mais segura para uma combinação discreta e é muito</p><p>utilizada no desenho de interfaces.</p><p>Harmonia Análoga - Usando o mesmo círculo cromático, tem-se a harmonia análoga: três cores bem</p><p>próximas são selecionadas, em que uma delas é tida como predominante. É uma sequência de cores.</p><p>Harmonia Complementar - Utiliza cores complementares (opostas no círculo cromático), como amarelo e</p><p>violeta, azul e laranja, verde e vermelho.</p><p>Cores quentes X cores frias - Outras combinações envolvem o uso de cores quentes com cores frias. O</p><p>contraste de uma cor com a outra, marca a composição da página.</p><p>Na Web, há bons e maus exemplos de combinações de cores. Existem sites em que não se</p><p>consegue enxergar as letras. Outros, que ardem sua visão com cores fortes. Na hora de escolher as cores</p><p>de um site tome cuidado com as combinações. Evite usar letras claras em fundos claros ou cores escuras</p><p>em fundos escuros, tenha cuidado ao utilizar cores extravagantes, como verde limão brilhante, rosa</p><p>choque, etc. Uma combinação correta de cores depende de bom senso e da habilidade do designer, que</p><p>pode, com uma combinação menos usual, conseguir bons resultados.</p><p>Módulo: Desenvolvimento Front-end</p><p>140</p><p>Em geral, procure seguir as seguintes recomendações:</p><p>• tenha a principal preocupação de deixar o site legível e com boa aparência para passar uma boa</p><p>impressão;</p><p>• utilize combinações consagradas, tipo fundo claro (branco, prata) com letras de cor escuras (preto, azul</p><p>escuro), ou fundo escuro com letras claras;</p><p>• combinações extravagantes podem até ser um sucesso se bem conduzidas, mas geralmente são uns</p><p>desastres;</p><p>• solicite opiniões de pessoas que conhecem o assunto. Na maioria das vezes elas vêem coisas que você</p><p>não vê.</p><p>Vale lembrar que estas recomendações também servem no uso de papéis de fundo. Utilizando uma</p><p>combinação ruim, fica difícil de ler o conteúdo do site e pode acabar comprometendo o projeto como um</p><p>todo.</p><p>Dicas: Não transforme a sua página num Carnaval, seja simples.</p><p>A Escolha da Interface</p><p>Este é outro aspecto importante, pois uma coisa é saber que se precisa de um botão aqui, de um</p><p>banner ali, e outra é saber qual o estilo que conduzirá o desenho desses elementos.</p><p>Um estilo de design pode ser clássico, infantil, moderno, mais quadrado, mais "clean", ou com</p><p>muitos elementos e cores, enfim, podem-se usar os mais diversos estilos. Entretanto, o estilo escolhido</p><p>tem que atender a uma série de requisitos, como ser mais adequado ao tipo de informação, facilitar a</p><p>navegação, atender às necessidades de marketing, usar cores adequadas ao tipo de informação ou à</p><p>identidade visual da empresa.</p><p>Pode-se também fazer uso de uma metáfora como forma de apresentar as informações do web</p><p>site.</p><p>O www.csszengarden.com é ótimo lugar para entender a diferença da interface. Todas as páginas</p><p>possuem o mesmo conteúdo, mudando de aparência apenas com estilos CSS.</p><p>Metáforas</p><p>Módulo: Desenvolvimento Front-end</p><p>141</p><p>Uma metáfora forte pode unir a navegação ao usuário de forma consistente. Metáforas devem ser</p><p>familiares, gerar unidade visual e, principalmente, serem apropriadas para a largura de banda da Internet.</p><p>Metáforas guiam o visitante, os fazem sentir confortáveis, enquanto fornecem subsídios para a</p><p>navegação.</p><p>Exemplos de metáforas incluem galerias, quadrinhos, canais de televisão, revistas, jornais,</p><p>ambientes de comércio, museus, prateleiras de lojas, parques de diversões, safáris. Elas podem tanto</p><p>ser bem feitas como exageradas em relação a detalhes. Estas últimas acabam complicando a navegação</p><p>dos usuários.</p><p>Metáforas são veículos de navegação. Faça-as simples, consistentes e fáceis de explorar. A boa</p><p>metáfora coloca a interação onde você exatamente espera que ela esteja. Uma metáfora ruim gera a</p><p>necessidade de se aprender uma série de comandos para se navegar. Ou, no mínimo, gera cliques a</p><p>mais. Metáforas bem feitas facilitam a navegação.</p><p>Site da empresa japonesa Spoon (colher) - http://www.spoon-inc.co.jp/</p><p>Site Temático</p><p>Não precisamos de uma metáfora para fazer um site. Um tema consistente pode funcionar</p><p>igualmente bem. Um tema pode ser visual ou conceitual. Exemplos de temas: pinturas, arte primitiva,</p><p>fotografias, imagens juvenis, arte tipográfica, futurista e assim por diante. Como as metáforas, os temas</p><p>podem incentivar ou atrapalhar.</p><p>Um tema pode ser praticamente qualquer coisa. Os melhores são sutis e consistentes. Lojas de</p><p>brinquedos podem usar temas, como cores, texturas, iluminação e ilustrações para identificar de forma</p><p>exclusiva suas lojas.</p><p>Módulo: Desenvolvimento Front-end</p><p>142</p><p>Site Oficial Shrek 3 - http://www.shrek.com</p><p>Criatividade</p><p>"Criatividade é o processo de fazer e comunicar conexões significativas e novas para nos ajudar</p><p>a pensar muitas possibilidades; para nos ajudar a pensar e experimentar de várias formas, usando</p><p>diferentes pontos de vista; para nos ajudar a pensar novas e inusitadas possibilidades; e para nos guiar</p><p>no processo de gerar e selecionar alternativas". (Isaksen & Treffinger, 1985)</p><p>Quando a coisa é difícil de definir ou entender, um exercício interessante é observá-la sob diversos</p><p>ângulos, "O que é Criatividade?".</p><p>Sob o ponto de vista humano</p><p>Criatividade é a obtenção de novos arranjos de ideias e conceitos já existentes formando novas</p><p>táticas ou estruturas que resolvam um problema de forma incomum, ou obtenham resultados de valor</p><p>para um indivíduo ou uma sociedade. Criatividade pode também</p><p>formas de</p><p>interações com os dados e usuários, porém a evolução da web está mais relacionada com a forma na</p><p>qual à utilizamos do que os avanços tecnológicos, as diferentes eras da web até apresentam uma</p><p>evolução tecnológica, mas o fator que realmente é representado nas “mudanças” na web, é da forma que</p><p>o usuário de comporta.</p><p>Módulo: Desenvolvimento Front-end</p><p>11</p><p>Figura 9: Principais Características / Fonte: romarconsultoria</p><p>WEB 1.0</p><p>A web 1.0 é o início da era da internet, sua primeira fase de desenvolvimento, começando com</p><p>poucos usuários e pontos conectados, a web 1.0 é conhecida como a era das informações, com sites</p><p>estáticos e sem interatividade, sendo feita a comunicação de apenas “uma via”, as páginas não ofereciam</p><p>aos usuários nenhum dinamismo, sendo usada apenas para leitura, onde a única forma de interatividade</p><p>era dos comentários deixados por usuários em alguns sites. Evoluindo de suas raízes de uso militar, a</p><p>web foi tomando um formato diferente devido as necessidades dos diferentes tipos de usuários, e assim</p><p>iniciando uma mudança e importante na evolução da web.</p><p>Módulo: Desenvolvimento Front-end</p><p>12</p><p>WEB 2.0</p><p>A web 2.0 ficou conhecida como a era das redes sociais, trazendo interatividade e dinamismo nas</p><p>páginas, oferecendo diversas ferramentas para criadores de conteúdo e desenvolvedores, é a web do</p><p>compartilhamento com novas possibilidades e alvos. Com essa evolução foi possível os ganhos que</p><p>esses avanços nos proporcionaram, essa versão da web foi criada pelo especialista Tom O’ Reilly, que</p><p>nos mostra nova forma de se usar a internet como uma “plataforma web”, as páginas ganharam</p><p>buscadores otimizados e layouts focados diretamente no usuário. Assim os conceitos da web 2.0 buscou</p><p>sempre a otimização de sites através de ferramentas altamente acessíveis e essenciais para as páginas</p><p>da web 2.0.</p><p>WEB 3.0</p><p>A web 3.0 é denominada como a "web inteligente ou web semântica", ela apresenta várias formas</p><p>de interação trabalhando com machine learning (aprendizado de máquina), blockchain (cadeia de blocos)</p><p>e inteligência artificial, proporcionando assim uma melhor experiência com o usuário e segurança com os</p><p>dados compartilhados. A principal característica dessa versão da web, é a inteligência na qual as</p><p>máquinas aprendem e executam tarefas baseadas nos seus próprios erros extraindo padrões e regras de</p><p>conjunto de dados, sendo assim se tornando capaz de tomar decisões guiadas pelos resultados inferidos.</p><p>As grandes facilidades e segurança que temos hoje são possíveis graças a web semântica, a atual</p><p>geração está cada dia mais evoluindo, e só por curiosidade, já existem estudos e testes em ambiente</p><p>web 4.0.</p><p>Módulo: Desenvolvimento Front-end</p><p>13</p><p>Saiba mais das novas tecnologias apresentadas e usadas na web 3.0 Veja esse video que explica</p><p>muito bem qual as ferramentas e suas Diferenças.</p><p>Serviços WEB</p><p>A web service é uma solução sendo usada na interação entre sistemas e aplicações diferentes</p><p>entre si. Esta tecnologia possibilita que novas aplicações tenham interatividade com aplicações que ja</p><p>existem, e que sistemas desenvolvidos em diferentes plataformas possam ser compatíveis.As aplicações</p><p>web fazem uso dos componentes de web services para enviar e receber dados, aplicações que se</p><p>caracterizam em ter sua própria linguagem, de forma que é feita a tradução para uma linguagem universal</p><p>em formato intermediário como XML e Json por exemplo.</p><p>Quando aconteceu o "boom" da internet, os processos, que antes eram manuais, se tornaram</p><p>online, pois notava - se a necessidade de uma variedade de ferramentas que automatizasse os processos,</p><p>sendo tais ferramentas interoperáveis e escaláveis para proporcionar o reuso de sistemas que já estavam</p><p>sendo utilizados remotamente. Essas tecnologias usadas desde os primórdios da web, continuam e se</p><p>mantem até hoje, porém o formato XML é o mais usado na lista dos serviços web.</p><p>XML (Extensible Markup Language) é uma linguagem de marcação onde a descrição dos</p><p>documentos utilizados nessa linguagem são de forma autocontida, ou seja, os documentos possuem</p><p>regras predefinidas. Vamos ver alguns conceitos básicos dos web services:</p><p>API (Application Programming Interface) - É uma interface de comunicação de programas. É um</p><p>intermediário de software que permite que dois aplicativos se comuniquem. Cada vez que você usa um</p><p>aplicativo como o Facebook, envia uma mensagem instantânea ou verifica a previsão do tempo em seu</p><p>telefone, você está usando uma API.</p><p>WEB 3.0</p><p>Serviços</p><p>Youtube</p><p>Web Semântica</p><p>Web Dinâmica</p><p>Experiência</p><p>Realidade</p><p>Módulo: Desenvolvimento Front-end</p><p>14</p><p>HTTP (Hypertext Transfer Protocol) - É o protocolo de comunicação e transferência de dados</p><p>criado por Tim Bernees- Lee, ele permite a busca de recursos, como documentos HTML. É a base de</p><p>qualquer troca de dados na Web e é um protocolo cliente-servidor, o que significa que as solicitações são</p><p>iniciadas pelo destinatário, geralmente o navegador da Web.</p><p>URI (Uniform Resouce Identifier) Um termo técnico de uma cadeia de caracteres compactas que</p><p>são usadas para identificar ou até mesmo denominar um recurso na internet.</p><p>URL (Uniform Resouce Locator) É um termo utilizado para nominar um Localizador Uniforme de</p><p>Recursos. Um URL nada mais é do que o endereço de um determinado recurso exclusivo na web. Em</p><p>teoria, cada URL válido aponta para um recurso exclusivo. Esses recursos podem ser uma página HTML,</p><p>um documento CSS, uma imagem, etc.</p><p>RPC - Remote Procedure Call (Chamada de Procedimento Remoto), é um protocolo que um</p><p>programa pode usar para solicitar um serviço de um programa localizado em outro computador em uma</p><p>rede sem ter que entender os detalhes da rede. O RPC é usado para chamar outros processos nos</p><p>sistemas remotos, como um sistema local. RPC usa o modelo cliente-servidor.</p><p>SOAP - Simple Object Access Protocol (Protocolo de Acesso a Objeto Simples) é um protocolo</p><p>usado para trocar dados entre aplicativos que são construídos em diferentes linguagens de programação.</p><p>SOAP é baseado na especificação XML e funciona com o protocolo HTTP. Isso o torna perfeito para uso</p><p>em aplicativos da web.</p><p>REST - Representational State Transfer (Transferência de Estado Representacional), é um estilo</p><p>de arquitetura que fornece padrões entre sistemas de computador na web, tornando mais fácil para os</p><p>sistemas se comunicarem entre si.</p><p>Módulo: Desenvolvimento Front-end</p><p>15</p><p>JSON - JavaScript Object Notation é um formato baseado em texto padrão para representar dados</p><p>estruturados com base o JavaScript. É frequentemente usado para transmitir dados em aplicativos da</p><p>web (por exemplo, enviar alguns dados do servidor para o cliente, para que possam ser exibidos em uma</p><p>página da web ou vice-versa).</p><p>Classificação Dos Websites</p><p>Na internet encontramos diversas possibilidades tanto de uso, como de criação, os usuários da</p><p>internet possuem propósitos de uso dos mais diversos e particulares entre si, por isso é delicado</p><p>classificar cada um deles, devido a novas tecnologias aparecerem rapidamente em nosso cotidiano. Mas</p><p>temos a classificação mais conhecida de cada tipo de websites e os seus propósitos, vejamos alguns</p><p>exemplos:</p><p>Portais web - são sites com informações agrupadas de variadas áreas tais como os portais de</p><p>notícias, os de tecnologia, e também os portais para ramos mais específicos como os de games, mundo</p><p>geek, esportes e etc.</p><p>Buscadores - são usados como o próprio nome sugere, para realizar buscas na web através de</p><p>palavras-chave, com a evolução da web, automaticamente que os buscadores também evoluíram,</p><p>facilitando as buscas com tecnologias cada vez mais assertivas e eficientes. O buscador mais conhecido</p><p>é o Google.</p><p>Sites corporativos - são de uso institucional</p><p>fazer aparecer resultados de valor</p><p>estético ou perceptual que tenham como característica principal uma distinção forte em relação às "ideias</p><p>convencionais".</p><p>Sob o ponto de vista cognitivo</p><p>Criatividade é o nome dado a um grupo de processos que procura variações em um espaço de</p><p>conceitos de maneira a obter novas e inéditas formas de agrupamento, em geral selecionadas por valor</p><p>(possuem valor superior às estruturas já disponíveis, quando consideradas separadamente). Podem</p><p>também ter valor similar às coisas que já se dispunha antes, mas representam áreas inexploradas do</p><p>espaço conceitual (nunca usadas antes).</p><p>Sob o ponto de vista neurocientífico</p><p>É o conjunto de atividades exercidas pelo cérebro na busca de padrões que provoquem a</p><p>identificação perceptual de novos objetos que, mesmo usando "pedaços" de estruturas perceptuais</p><p>antigas, apresentem uma peculiar ressonância, caracterizadora do "novo valioso", digno de atenção.</p><p>Sob o ponto de vista computacional</p><p>É o conjunto de processos cujo objetivo principal é obter novas formas de arranjo de estruturas</p><p>conceituais e informacionais de maneira a reduzir (em tamanho) a representação de novas informações,</p><p>através da formação de blocos coerentes e previamente inexistentes.</p><p>Na criação da Interface de um site, exercite sua memória fotográfica e navegue muito na Web.</p><p>Visite páginas que possam estimular sua criatividade. Seja sempre criativo!</p><p>Módulo: Desenvolvimento Front-end</p><p>143</p><p>Criatividade é a capacidade de resolver problemas com eficiência. Portanto, um web designer que</p><p>cria um site útil e interessante para o usuário e o seu cliente, é um profissional criativo. Afinal, atingir os</p><p>objetivos de um site e agradar tanto o cliente quanto o usuário, não é nada fácil.</p><p>Se você pensar desta forma, verá que desenvolver a sua criatividade pode não ser tão complicado</p><p>ou mágico como parece. Para ser um web designer mais criativo, seja um observador de sites e cases</p><p>de sucesso.</p><p>Ao navegar, observe cada detalhe de um site e as soluções encontradas por outros web designers</p><p>para diversos problemas comuns a sites como: a falta de objetividade e usabilidade. Observe tudo, até</p><p>mesmo aquilo que não lhe parece útil. Cedo ou tarde, você poderá utilizar a mesma solução.</p><p>Desenvolva seu potencial criativo colecionando imagens de sites e navegando com um olhar crítico e</p><p>atento. Lembre-se, criatividade não é privilégio exclusivo das pessoas mais talentosas. Criatividade pode</p><p>ser exercitada.</p><p>Produção das mídias</p><p>Como produção das mídias entende-se a produção de imagens, fotos, ilustrações, interface,</p><p>ícones, animações ou mesmo sons que serão usados na interface do web site.</p><p>Para a criação da Interface pode-se usar vários softwares de criação e edição de imagens como</p><p>o Fireworks e o Photoshop.</p><p>É necessário saber se as imagens e as fotos serão obtidas de bancos de imagens ou deverão ser</p><p>produzidas por um fotógrafo. Depois de obtida a imagem também será necessário tratá-la e adaptá-la aos</p><p>requisitos da mídia digital, como resolução, dimensões, etc.</p><p>Bem como no caso de ícones e ilustrações que poderão vir de clip-arts ou produzidas</p><p>especialmente por um ilustrador para este web site.</p><p>Formatos gráficos</p><p>Existem três formatos gráficos usados na web, o formato JPEG, o formato GIF, e o formato PNG,</p><p>sendo que este último começou a ser mais usado recentemente, por ser aceito apenas pelos browsers</p><p>mais novos. Esses formatos gráficos serão abordados no módulo referente ao software de tratamento de</p><p>imagem, mas convém ter uma visão geral sobre eles:</p><p>Formato GIF - este é um dos formatos de imagem mais antigos. É mais utilizado para as imagens usadas</p><p>na criação de botões, menus, títulos, logos e detalhes visuais, devido à sua característica de permitir a</p><p>utilização das cores exatas da imagem. A desvantagem está no fato de poder utilizar até 256 cores. A</p><p>vantagem disto é a possibilidade de gerar arquivos com tamanhos bem pequenos, quando se usam</p><p>poucas cores. Este formato também permite a utilização de transparência e imagens animadas (gif</p><p>animado).</p><p>Formato JPEG (ou JPG) - este formato é mais utilizado para fotos por permitir o uso de até 16 milhões de</p><p>cores com vários níveis de compactação, gerando imagens com boa qualidade e tamanho de arquivos</p><p>bem reduzidos. Não permite transparência e nem animação.</p><p>Formato PNG - este é um formato híbrido e que tem características comuns aos outros dois formatos</p><p>vistos.</p><p>Implementação</p><p>Aqui chegamos à etapa final do desenvolvimento do web site. A implementação é uma etapa que</p><p>corresponde tanto à junção da arquitetura e design com as tecnologias, como a alguns processos de</p><p>finalização e pós-produção do site.</p><p>• Implementação do Design ao HTML</p><p>Módulo: Desenvolvimento Front-end</p><p>144</p><p>Depois de pronta a arquitetura e o design da Interface é necessário aplicar a Interface ao HTML. Isto pode</p><p>ser feito via digitação de código puro ou usando um dos vários softwares de montagem de páginas e sites</p><p>como o Macromedia Dreamweaver ou o Microsoft FrontPage.</p><p>• Programação</p><p>O HTML não é suficiente para obter todos os recursos que se espera de um web site. Várias podem ser</p><p>as programações que serão necessárias neste momento, desde JavaScript até programação de acesso</p><p>aos bancos de dados (ASP, PHP, JSP), programação de CGI's, ou componentes do servidor.</p><p>• Testes</p><p>Assim que o site estiver previamente montado em HTML e com as principais programações é muito</p><p>importante que se inicie uma bateria de testes, para testar a navegabilidade da Interface e a eficiência</p><p>das tecnologias utilizadas.</p><p>• Publicação do site</p><p>Com o serviço de hospedagem contratado é necessário fazer a transferência dos arquivos do site para o</p><p>servidor web do hospedeiro, para que se possam fazer os testes finais antes da divulgação do site.</p><p>Sempre que for publicar um site é necessário ter o endereço FTP do host, login e senha. Dados esses</p><p>que serão fornecidos pela empresa de hospedagem contratada.</p><p>Atividades</p><p>1. Qual a diferença entre a Harmonia Monocromática, Análoga e a Complementar das cores?</p><p>2. Quando utilizamos metáforas em páginas WEB?</p><p>3. O que é produção de mídias?</p><p>Módulo: Desenvolvimento Front-end</p><p>145</p><p>Tema 8: Conteúdo para Web Site</p><p>O conteúdo do seu Web Site é muito importante. No âmbito online, o conteúdo é o destaque para</p><p>estratégias de marketing.</p><p>Até pouco tempo atrás muitos acreditavam que os jornais impressos, revistas e até mesmo livros</p><p>seriam totalmente substituídos por suas versões digitais, porém isso não aconteceu.</p><p>Sabe-se que perdeu mercado para as versões digitais, mas que as empresas e pessoas utilizam diversos</p><p>tipos de conteúdo diferentes, simultaneamente.</p><p>https://www.ebsco.com/e/pt-br/blog/revista-impressa-e-digital-ambos-os-formatos-podem-coexistir</p><p>Estratégias de Marketing de Conteúdo</p><p>Existem várias técnicas de marketing de conteúdo, uma das mais utilizadas é a Inbound Marketing.</p><p>Essa técnica tem o objetivo de atrair o cliente para vender e fidelizar utilizando o conteúdo como pilar</p><p>dessa “negociação”, sendo extremamente assertiva num médio a longo prazo.</p><p>Web Marketing é nome que dá à prática de fazer marketing através da web. Isto inclui desde</p><p>utilização de banners, pop-ups, splashes, etc., em web sites até o uso de e-mails.</p><p>Existem web sites promocionais que são criados especificamente para divulgar um determinado</p><p>produto, e depois do término da campanha são tirados do ar. Alguns exemplos:</p><p>• para o lançamento do processador Pentium III a Intel criou um web site promocional onde os</p><p>internautas podiam se cadastrar e participar de um sorteio de computadores com o novo processador</p><p>embutido;</p><p>• para divulgar sua cerveja em lata, a Antarctica além de comerciais de tv, outdoors, anúncios em</p><p>revistas, também criou um web site onde os internautas podiam saber quais as cidades que teriam festas,</p><p>cadastrar alguma festa</p><p>em particular e participar de chats que relacionavam o bate-papo a gírias ligadas</p><p>à cerveja, assim como "João paga uma cerveja Maria";</p><p>• as indústrias automobilísticas têm utilizado muito os web sites promocionais para divulgar seus</p><p>lançamentos, assim como http://www.novopalio.com.br.</p><p>http://www.novopalio.com.br/</p><p>Módulo: Desenvolvimento Front-end</p><p>146</p><p>Conteúdo</p><p>Todo e qualquer elemento, seja ele gráficos, textual, vídeo ou interativo de um site é descrito como</p><p>conteúdo.</p><p>É o conteúdo que fará com que os usuários prefiram seu site do que o do concorrente.</p><p>Sendo assim, colocar informações sobre produtos e serviços prestados, funcionários,</p><p>metodologias de trabalho, dentre outras informações pertinentes ao seu público alvo, direcionará a</p><p>fidelidade de um possível cliente.</p><p>Empresas com e-commerce atingi públicos distantes e quem tem o espaço físico também tem</p><p>muitas vantagens, como por exemplo, criar a curiosidade da visitação no seu espaço ou deixar algum</p><p>meio de contato para tirar dúvidas.</p><p>Para isso, precisamos entender o público-alvo que queremos atingir, para criar o conteúdo voltado</p><p>para essas pessoas, sempre focado em atender as necessidades do cliente.</p><p>https://www.salvadorneto.com.br/qual-o-seu-conteudo/</p><p>Módulo: Desenvolvimento Front-end</p><p>147</p><p>Importância do conteúdo?</p><p>O conteúdo do site, faz com que as pessoas continuem acessando e consumindo seus produtos</p><p>e serviços, assim com o conteúdo adequado ao seu público, fidelizará seu usuário. Abaixo temos algumas</p><p>dicas de como auxiliar no desenvolvimento de conteúdo para seu web site:</p><p>1. Conteúdo direcionado ao Perfil do seu Público</p><p>Seu conteúdo precisa estar alinhado as expectativas do seu público, discorra sobre temas que esse nicho</p><p>de pessoas goste e aponte os diferenciais da sua empresa e temas correlatos.</p><p>Existem também questões padrões que você pode utilizar e ganhar visibilidade com clientes em potencial,</p><p>por exemplo:</p><p>https://imoveisbc.com/artigo/3274/qual-o-melhor-banco-para-financiar-um-apartamento</p><p>Como um banco, podemos criar conteúdo para responder essa questão, muito comum de “Como</p><p>financiar a compra do primeiro imóvel?”, isso atenderia a dúvida e poderia alimentar e poderia direcionar</p><p>esse possível cliente a pedir um empréstimo, ou pelo menos entender o passo-a-passo de todo o</p><p>processo de financiamento.</p><p>Já ouviu a frase “Tempo é dinheiro”? Se você publica informações relevantes que ajude seus</p><p>usuários a tomarem melhores decisões, ele entenderá que o seu serviço está disponível e será tão bom</p><p>quanto as informações que foram úteis para essa solução encontrada.</p><p>2. Ranqueamento de sites</p><p>Você já pesquisou alguma informação no Google e apareceram milhares de sites com conteúdo</p><p>similares ao que foi pesquisado?</p><p>Anualmente, são pesquisados mais de 2 trilhões de informações no Google, o que fez com que</p><p>esse buscador seja o maior mecanismo de busca do mundo!</p><p>Agora vamos imaginar que seu público-alvo está procurando no Google o tipo de serviço prestado</p><p>pela sua empresa, como ele conseguirá chegar até o seu site e não no do concorrente? Simples, criando</p><p>conteúdos pertinentes e mais interessantes no seu website, essa é a melhor maneira de chegar os</p><p>usuários do seu público-alvo.</p><p>Como financiar a compra do primeiro</p><p>imóvel?</p><p>Módulo: Desenvolvimento Front-end</p><p>148</p><p>Para começar precisamos entender quais são as palavras chaves que essas pessoas buscam na internet,</p><p>para facilitar a buscar e encontrar suas páginas web.</p><p>Otimize a visualização das informações, priorize o que os usuários tem de dúvidas, traga de maneira</p><p>contextualizada e de fácil entendimento para que seus conteúdos sejam selecionados pelos buscadores,</p><p>como o Google.</p><p>https://www.terra.com.br/noticias/sites-desenvolvidos-com-foco-estrategico-impactam-no-</p><p>ranqueamento-em-buscadores,507b43919be8d1ce5cd50ce8631b0751pqd3dwrn.html</p><p>3. Referências de Conteúdo</p><p>Ser mencionado em outros sites, é como se seu website recebesse um ponto extra de confiança</p><p>em buscadores. Sendo assim é muito comum a troca de favores, mencionar links de sites externos para</p><p>que suas páginas sejam mencionadas em websites de terceiros.</p><p>Portanto, quanto mais páginas de sites parceiros ou que seu website se torne referência em algum</p><p>tema/assunto, maior a sua classificação no ranqueamento nos buscadores como o Google, já citado</p><p>anteriormente.</p><p>Sendo assim, dependendo contexto em que seu público-alvo se encaixa, ser referenciado em</p><p>outros sites como padrão de conhecimento, é o suficiente para que sua classificação seja alta e esteja</p><p>entre os primeiros sites na lista de procura, sobre esse tema nos buscadores de informação.</p><p>Módulo: Desenvolvimento Front-end</p><p>149</p><p>https://meuredator.com.br/erros-ao-criar-conteudo/</p><p>4. Converter Conteúdo</p><p>Como já mencionado, conteúdo é todo elemento textual, gráfico e interativos na página web,</p><p>através desses elementos podemos analisar se ele está fazendo com o que o usuário se torne um</p><p>potencial cliente ou não.</p><p>As vezes o conteúdo que foi direcionar para “ganhar” esse cliente, pode estar afastando, por várias</p><p>situações. Como uma frase ou imagens desatualizadas, ou desconexas aos temas tratados.</p><p>Com tudo, é sempre bom fazer testes e ter um processo analítico para que você tenha uma boa tomada</p><p>de decisão na hora de criar conteúdo que tragam os usuários e que se tornem clientes em potencial.</p><p>Botões, links, frases podem estimular um contato ou até mesmo uma visita.</p><p>https://freelancear.com.br/converter-mais-vendas</p><p>5. Autoridade sobre o Tema do Conteúdo</p><p>Quando você pesquisa sobre determinado conteúdo, geralmente procuramos encontrar as</p><p>pessoas que tem maior visibilidade sobre o tema, que são referências sobre aquele conteúdo.</p><p>Módulo: Desenvolvimento Front-end</p><p>150</p><p>Então quando nos disponibilizamos a produzir um conteúdo sobre determinado assim, você</p><p>precisa realmente entender do que se trata e trazer informações reais, importantes e que esteja no</p><p>contexto em que seu público-alvo se encontra.</p><p>Além disso dicas de utilização de algo, passo-a-passo sobre algum assunto sempre chama muito</p><p>atenção do público em geral.</p><p>Quando vamos comprar um tênis, que tipo de tênis, marca, modelo te vem a mente? E porque</p><p>essa marca/modelo? É esse tipo de informação que você precisa entender sobre seu público alvo, as</p><p>preferências e o como ganhar sua atenção. Demonstrar domínio sobre o assunto, traz a ideia de</p><p>experiencia sobre o tema abordado.</p><p>Ser autoridade sobre o conteúdo será um caminho longo, porém tem que ser persistente, além</p><p>das menções em sites de terceiros podem ajudar nessa trajetória.</p><p>Ganhando a confiança dos usuários e dos buscadores, com certeza você conseguirá alavancar</p><p>seus negócios através do seu web site.</p><p>https://flaviomuniz.com.br/autoridade-digital/</p><p>6. Estratégia Digital Baseada em Conteúdo</p><p>Com o conteúdo coerente e assertivo ao seu público-alvo, podemos criar campanhas digitais.</p><p>Além disso o SEO (Search Engine Optimization / Otimização dos Mecanismos de Busca) utiliza o</p><p>conteúdo como base porque atraem os usuários conforme o que é ofertado de conteúdo nas páginas do</p><p>Web Site.</p><p>Por isso, se o conteúdo das suas páginas possui os termos chaves de pesquisa sobre o tema do</p><p>seu público-alvo, isso melhora sua importância no meio digital.</p><p>Portanto, o coração do seu planejamento do Web Site, necessariamente precisa ser o conteúdo,</p><p>ele que vai fortalecer e incentivar o sucesso do seu negócio.</p><p>Módulo: Desenvolvimento Front-end</p><p>151</p><p>https://marketingdoamanha.com/seo-o-que-e/</p><p>Atividade</p><p>1. Defina Web Marketing:</p><p>2. Por que o conteúdo deve ser direcionado ao perfil do meu público alvo?</p><p>3. O que é ser autoridade sobre o tema do conteúdo? E por que isso é importante?</p><p>Módulo: Desenvolvimento Front-end</p><p>152</p><p>Tema 9: Conteúdo para redes sociais</p><p>O uso da internet se tornou a principal</p><p>ferramenta digital para os consumidores brasileiros. De</p><p>alguma forma, o mobile satisfaz as principais necessidades do ser humano, de acordo com a teoria de</p><p>Maslow, que é aquela teoria da motivação humana, Sabe? Se você não lembra ou não conhece, vai ficar</p><p>fácil entender por essa imagem:</p><p>https://www.dlojavirtual.com/negocios/dicas-para-o-seu-negocio/piramide-de-maslow/</p><p>Conforme vimos na pirâmide, as nossas necessidades básicas começam ali na base, que são as</p><p>fisiológicas e têm sua prioridade definida até o topo, que é a autorrealização. Quando falamos de cada</p><p>uma dessas necessidades e da aplicação de websites nelas, temos a seguinte correlação:</p><p>• Fisiológicas: Os sites permitem hábitos saudáveis diários e as páginas relacionadas ao</p><p>monitoramento de saúde e atividade física têm aumentado bastante sua audiência diária. No Brasil, 29%</p><p>das pessoas utilizam páginas web para monitorar a própria saúde. Os dados são de um levantamento</p><p>internacional feito pela GfK e realizado com mais de 20 mil usuários de internet, de 16 países. Por aqui,</p><p>foram 4.900 entrevistados. De acordo com os números, o país já está lado a lado com os Estados Unidos</p><p>quando o assunto é o uso desses recursos. Os números tendem a aumentar. De acordo com a consultoria</p><p>Gartner, o mercado de wearables deve crescer 16,7% ao ano, atingindo US$ 34 bilhões em 2020.</p><p>Estimativas apontam que serão mais de 830 milhões de dispositivos conectados. Isso significa que as</p><p>pessoas vêm buscando suprir algumas de suas necessidades fisiológicas com ajuda da tecnologia.</p><p>• Segurança: Ao falar de segurança, podemos nos referir à segurança física, condições climáticas,</p><p>carreira e segurança financeira. No caso de carreira, o uso de sites oferece privacidade e descrição, por</p><p>isso é muito utilizado para buscar aquela vaga dos sonhos. É na internet que a gente checa se segunda-</p><p>feira vai chover (e na sexta-feira checa de novo para ter certeza de que no final de semana vai dar praia).</p><p>Dessa maneira, os serviços que oferecem conteúdo que transmita, de alguma forma, segurança e</p><p>previsibilidade ao usuário, ganham espaço e audiência dia a dia. Temos dois exemplos populares: o</p><p>Linkedin (para networking e busca de novas oportunidades profissionais) e o site Clima Tempo (para</p><p>acompanhar a previsão do tempo no dia a dia).</p><p>Nessa categoria também podem estar os apps de controle financeiro, como o Guia Bolso e os</p><p>serviços de bancos, usados cada vez mais, não só para controle, mas também para transações (pagar</p><p>contas, fazer transferências, empréstimos e aplicações). Aliás, melhor coisa não ter que ir ao banco, não</p><p>é?</p><p>https://www.dlojavirtual.com/negocios/dicas-para-o-seu-negocio/piramide-de-maslow/</p><p>Módulo: Desenvolvimento Front-end</p><p>153</p><p>• Social, amor e pertencimento: Você tem alguma dúvida de que a nossa comunicação ficou bem</p><p>mais fácil e rápida com o uso da internet? E assim, criar e manter relacionamentos ganhou um aliado</p><p>importante, seja para enviar e receber mensagens, seja para tentar achar aquele par perfeito com um site</p><p>de relacionamentos. O melhor exemplo de todos, quando falamos em comunicação, são os chats, suporte</p><p>técnico, bate papo e até mesmo negociações de compras online.</p><p>Agora, se o problema é achar a tampa para sua panela, já está tudo resolvido. Há algumas boas</p><p>opções de serviços online disponíveis para conhecer pessoas e, quem sabe, encontrar o amor da sua</p><p>vida (ou não).</p><p>• Estima e Respeito: É aquela vontade toda de ser aceito, reconhecido e valorizado. As pessoas</p><p>costumam manifestar bastante isso nas redes sociais, não é? São muitas selfies, fotos na academia, fotos</p><p>com os amigos e tudo mais que renda bons likes (e depois que posta, dá-lhe atualização para ver quantas</p><p>curtidas já teve!). De todo o tempo que as pessoas passam na internet, 1/3 é em redes sociais. O brasileiro</p><p>é o líder de audiência nas redes sociais na América Latina e o segundo no mundo, ficando atrás das</p><p>Filipinas. Em 2019, atingimos a média de 225 minutos por dia.</p><p>• Autorrealização: A autorrealização envolve aspirações e conquistas, como viagens, por exemplo.</p><p>Os sites em que você pode comparar preços e fazer o planejamento de uma viagem estão, cada vez</p><p>mais, ganhando a audiência, pelo conforto e praticidade nas tomadas de decisão. A Decolar.com é um</p><p>exemplo desse tipo de serviço bem famosinho aqui no Brasil. Mas há muitos outros, não é? Booking.com,</p><p>Skyscanner, TripAdvisor...</p><p>Credibilidade</p><p>Se a intenção é motivar e direcionar seus usuários, eles têm que se sentir seguros e a interface</p><p>(o que o usuário vê) é que vai fazer esse papel. Então, será preciso considerar esses quatro fatores na</p><p>hora de pensar no design do seu produto:</p><p>• Qualidade de design</p><p>É óbvio, mas não é simples. Aqui, entra todo o cuidado com a organização do seu conteúdo, o</p><p>título das categorias e as cores que você usa nas publicações em suas redes sociais. Lembre-se de que</p><p>tem hora e medida certa para usar a criatividade, então, não adianta inventar coisas e prejudicar a sua</p><p>usabilidade, como dar nomes exóticos para suas categorias ou usar ícones desconhecidos para</p><p>representar seus produtos. Seu usuário precisa saber onde clicar.</p><p>Além da organização, é preciso manter um padrão visual adequado ao perfil dos seus usuários e</p><p>ao tipo de produto. Isso quer dizer que é possível que um público jovem esteja mais acostumado a um</p><p>design minimalista do que um público mais velho, por exemplo. Outras coisas a se observar são as cores</p><p>e espaçamentos. Alguns espaços em branco bem colocados no site dão aquele ar de organização e</p><p>respiro. Já as cores podem, de alguma forma, representar melhor seu produto. Por exemplo: uma página</p><p>de Instagram de uma clínica médica parece mais confiável se for mais clean e usar tons de azul ou verde,</p><p>que transmitam tranquilidade e credibilidade. Entretanto, se esse mesmo site tivesse muita informação e</p><p>cores fortes, certamente você poderia achá-lo um pouco estranho, não?</p><p>Módulo: Desenvolvimento Front-end</p><p>154</p><p>https://www.instagram.com/clinicaveterinariabelocao/</p><p>• Informação, fotos e vídeos atualizados</p><p>Em geral, os usuários notam quando a empresa é uma autoridade no assunto pelo conteúdo que</p><p>eles veem no site. Então, além da necessidade de conter todo o seu portfólio nas suas redes sociais,</p><p>seus produtos e serviços devem estar bem explicados e ilustrados, para que a confiança possa ser de</p><p>alguma forma sentida.</p><p>Essa é uma forma de mostrar, também, que você realmente quer ajudar seus usuários a</p><p>entenderem o que está sendo oferecido e, assim, fazerem uma boa escolha. Sobre as fotos ou vídeos,</p><p>eles precisam ter uma boa qualidade. Recomendo que você evite aquelas imagens genéricas de banco</p><p>de imagens. Elas não dizem nada e passam despercebidas pela maioria dos usuários.</p><p>Então, opte sempre por um conteúdo proprietário, que use a sua linguagem, mostre o seu produto</p><p>ou serviço da forma mais transparente e completa possível. Um bom exemplo é o Tastemade. Quem</p><p>nunca foi seduzido por aqueles vídeos e achou que era super fácil fazer a receita? Ou quase morreu de</p><p>vontade de comer o bolo que viu e aí mandou o vídeo para a mãe pedindo encarecidamente que ela</p><p>fizesse aquela receitinha básica para o filho querido?</p><p>Módulo: Desenvolvimento Front-end</p><p>155</p><p>https://www.instagram.com/tastemade/</p><p>• Jogo aberto</p><p>É isso mesmo, os usuários querem transparência! Não adianta usar letrinhas pequenas com</p><p>asteriscos no fim da tela, nem esconder preço, deixar para exibir o prazo de entrega só no final da compra</p><p>ou não deixar clara a política de troca.</p><p>Tem que ser tudo às claras. Só assim, seu usuário vai se sentir mais seguro e mais disposto a</p><p>usar seu produto. E, se você puder fazer tudo isso sem exigir dados desnecessários, melhor ainda.</p><p>• Tenha proximidade com o mundo real</p><p>É preciso falar a mesma língua que o seu usuário, e isso deve ser feito de forma muito natural e</p><p>lógica. Vale</p><p>tanto para a escolha da comunicação como para o uso de símbolos e outros elementos que</p><p>façam parte do dia a dia das pessoas.</p><p>• Exerça o controle, sem tirar a liberdade</p><p>É importante que você direcione o usuário para ajudá-lo a cumprir sua tarefa, mas sem tirar as</p><p>opções de fazer o que ele quiser em seu site (desde que não haja problema com a funcionalidade ou com</p><p>as regras do negócio).</p><p>• Outras opiniões a seu respeito</p><p>Legal, você já fez a sua parte: um layout de qualidade, com todos seus produtos ou serviços bem</p><p>explicados, com fotos e vídeos atuais e proprietários, além da preocupação em deixar o usuário à vontade</p><p>no seu site ou app. Mas isso não é tudo, é apenas você falando do seu próprio produto.</p><p>Os usuários querem, cada vez mais, saber quais são as opiniões dos outros sobre seu produto ou</p><p>sobre a empresa.</p><p>Colocar casos de sucesso ou depoimentos de outros usuários como destaques nas redes sociais</p><p>não vale? Vale sim, pode colocar. Mas não significa que seus clientes deixarão de procurar por mais</p><p>coisas a seu respeito nas redes sociais, sites de reclamação e outras mídias (sites, jornal, revista etc.).</p><p>Módulo: Desenvolvimento Front-end</p><p>156</p><p>Então, sempre que puder, faça o link desses conteúdos no seu site e isso vai demonstrar que você é</p><p>realmente confiável.</p><p>Defina o conteúdo</p><p>Lembra-se daquela história da arquitetura de informação e definição do conteúdo? Pois é, é bom</p><p>que tenha a ideia dos elementos que devem fazer parte de cada tela para distribuir tudo isso da melhor</p><p>maneira para os seus usuários, considerando a prioridade das informações. Não se esqueça de criar uma</p><p>estratégia de conteúdo: qual conteúdo já existe, como será organizado, checar se é um conteúdo efetivo</p><p>e se será necessário criar novos conteúdos.</p><p>Considere tudo o que torna seu design acessível</p><p>É preciso pensar nos detalhes de design e nas características dos usuários.</p><p>a) Design:</p><p>• Tamanho e estilo da fonte.</p><p>• Cores e contraste.</p><p>• Imagens, vídeo e áudio.</p><p>b) Usuários:</p><p>• Idade.</p><p>• Habilidade cognitiva.</p><p>• Audição e visão.</p><p>• Compreensão da língua e da linguagem.</p><p>• Dispositivo, tecnologia e conexão.</p><p>Módulo: Desenvolvimento Front-end</p><p>157</p><p>https://www.wsitebrasil.com.br/blog/post/marketing-digital/use-as-redes-sociais-para-fazer-seu-</p><p>ecommerce-vender-mais/51</p><p>Otimização de imagens</p><p>Além de adaptar o tamanho das imagens ao layout, o designer precisa ter a preocupação de</p><p>otimizar essas imagens (deixá-las mais leves), considerando que elas podem demorar um pouco mais</p><p>para carregar em sites mobile ou apps. Portanto, todo cuidado é pouco para evitar que seu usuário desista</p><p>do seu produto ou gaste todo o pacote de dados tentando carregar seu site.</p><p>Hierarquia da informação</p><p>Chegou a hora de dizer para o seu usuário o que é mais importante e essa é a melhor forma de</p><p>lembrá-lo e ajudá-lo a cumprir sua meta principal. Nesse caso, é preciso criar um contraste entre o que é</p><p>informação primária e o que é informação para suporte. As informações mais importantes devem estar</p><p>nitidamente em destaque e o contraste entre elas pode ser feito por meio de sombra, cor, tamanho, peso</p><p>e estilo.</p><p>Módulo: Desenvolvimento Front-end</p><p>158</p><p>https://agencialina.com.br/blog/hierarquia-da-informacao-boas-praticas-para-nao-designers/</p><p>Conteúdo e legibilidade</p><p>Seu conteúdo deve ser fácil e rápido de ler. Tenha bastante cuidado com espaços (que precisam</p><p>ser bem aproveitados, mas sem espremer demais as informações) e as imagens não podem ser tão</p><p>pequenas a ponto de não serem identificadas, ainda mais sem um título. Quando usar imagens em uma</p><p>lista, procure colocar a foto à esquerda e o texto à direita, para facilitar o fluxo de leitura. Evite usar letras</p><p>muito pequenas e use fontes diferentes apenas para títulos e contraste para coisas que quer destacar.</p><p>• Entenda seus usuários: entenda que você não é o usuário, portanto, estude quem ele é, como</p><p>se comporta, o que faz, quais as suas necessidades e expectativas e, sob esse ponto de vista, você</p><p>poderá criar algo que seja realmente relevante para ele.</p><p>• Siga boas práticas de design: não precisa reinventar a roda, nem encher linguiça. Adotar</p><p>comportamentos, simbologia e comunicação comuns a outras páginas facilita a aprendizagem e</p><p>engajamento. Lembre-se de ser minimalista ou você pode complicar a vida do seu usuário.</p><p>Atividade</p><p>1. Como podemos passar credibilidade nos conteúdos de redes sociais?</p><p>2. Por que precisamos dar destaques as opiniões dos usuários?</p><p>3. O que precisamos considerar para que tenhamos um design acessível?</p><p>Módulo: Desenvolvimento Front-end</p><p>159</p><p>Tema 10: Plataformas de Marketing</p><p>Você assiste ao seu programa de televisão preferido e, ao mesmo tempo, comenta nas redes</p><p>sociais? Responde a uma mensagem em seu smartphone enquanto navega em um site no seu</p><p>computador?</p><p>Relaxa, você não é a única pessoa que faz isso.</p><p>Quando as redes sociais começaram a se popularizar, junto com tantas novidades, vieram as</p><p>mudanças de muitos dos nossos hábitos.</p><p>O crescimento das redes sociais acabou sendo potencializado por toda essa evolução tecnológica</p><p>que estamos vivenciando. Hoje temos à nossa disposição tablets, smartphones, notebooks mais leves e</p><p>com baterias melhores, smartwatches e smartglasses, ambos frutos do conceito de Wearable</p><p>Technology, ou tecnologia vestível, que é a incorporação de dispositivos eletrônicos em roupas e</p><p>acessórios. Além de muitas coisas que estão acontecendo nos grandes centros de inovação, como a IoT</p><p>– Internet das Coisas; AI – Inteligência Artificial; CI – Inteligência Cognitiva; e muito mais. Quem viver,</p><p>verá!</p><p>Com o ganho de escala, muitos desses produtos têm-se tornado mais acessíveis, conquistando</p><p>um número cada vez maior de adeptos, que passam a acessar conteúdo interativo ao mesmo tempo que</p><p>teclam e assistem a seu programa de televisão favorito.</p><p>Esse fenômeno é atualmente chamado de hábito “Multitelas”, já que é comum estarmos</p><p>conectados em mais de um dispositivo para realizar coisas completamente diferentes de acordo com</p><p>nossa conveniência e preferência.</p><p>De olho em toda essa transformação, as agências de publicidade, as empresas de mídia e os</p><p>anunciantes começaram a perceber as inúmeras possibilidades que tinham para interagir de uma forma</p><p>diferente com toda essa audiência.</p><p>A partir daí todos esses atores vêm trabalhando com suas equipes para tentar compreender cada</p><p>vez mais o comportamento das pessoas e criar situações que contribuam para gerar uma melhor</p><p>interação entre marcas e consumidores.</p><p>É interessante notar, também, as transformações que isso tem gerado nas estruturas de</p><p>marketing das empresas e da necessidade de novas especialidades dentro das agências ou times</p><p>internos, pois todos precisam incorporar o pensamento multitelas no momento de idealizar produtos,</p><p>serviços, ofertas e, posteriormente, suas campanhas de mídia.</p><p>De acordo com dados divulgados pelo Google, somos mais de 60 milhões de brasileiros que já acessam</p><p>dois tipos de tela simultaneamente e 30 milhões que já se conectam em três telas ao mesmo tempo.</p><p>O mais comum é utilizar a TV e o smartphone, hábito de 90% dos usuários.</p><p>O que tudo isso mostra para a gente?</p><p>Isso significa que a TV, mesmo sendo ainda o meio de comunicação mais consumido no Brasil,</p><p>não tem mais a mesma penetração do passado e, consequentemente, tem menos atenção do público.</p><p>Com isso, agências, emissoras e anunciantes deixaram de enxergar as estratégias multitelas como um</p><p>diferencial em suas campanhas e passaram a considerá-las como um elemento imprescindível para a</p><p>comunicação com seus públicos.</p><p>No entanto, é importante estarmos atentos para o fato de que como esse tipo de estratégia é</p><p>focada em torno do perfil de cada cliente que está simultaneamente em diferentes telas e plataformas, é</p><p>necessário conhecer em profundidade os diferentes</p><p>comportamentos e ferramentas para criarmos</p><p>abordagens distintas.</p><p>Módulo: Desenvolvimento Front-end</p><p>160</p><p>É preciso saber, também, como cada público gosta de ser impactado e, a partir disso, escolher o</p><p>melhor momento e a melhor abordagem em cada plataforma, de acordo com o que cada uma delas pode</p><p>oferecer em termos de tipos e níveis de interação.</p><p>Se milhões de pessoas conectadas, milhões de celulares em operação e o hábito multitelas já</p><p>seriam suficientes para convencer qualquer empresa a investir em anúncios móveis, as mídias sociais</p><p>são o elemento-chave que favorece e impulsiona ainda mais a conscientização de investir nesse tipo de</p><p>publicidade.</p><p>De qualquer forma, o aprendizado que esse comportamento multitelas tem trazido é que as ações</p><p>em diferentes telas precisam estar atreladas à relevância.</p><p>Se você parar para pensar, irá notar que é praticamente impossível navegar na Internet sem se</p><p>deparar com um anúncio. As empresas abordam as pessoas de várias formas: e-mails marketing,</p><p>anúncios nas redes sociais, nos aplicativos, vídeos no YouTube etc.</p><p>O fato é que, se você estiver conectado, será impactado por publicidade invasiva. E quando existir</p><p>a oportunidade de “pular o anúncio”, certamente você fará isso.</p><p>O desafio é entender a tela certa e o conteúdo mais aderente para ela. Caso contrário, a</p><p>publicidade parecerá incoerente, irrelevante, incômoda e inoportuna.</p><p>Portanto, criar um anúncio para uma plataforma mobile não é apenas sobre como impactar, nem</p><p>como adaptar da TV, mas como impactar de forma contextualizada. A parte complexa do trabalho é</p><p>conseguir mapear a jornada do consumidor para entender a forma como o usuário realiza a transição de</p><p>dispositivos, seja por tipo de conteúdo, horário, localização ou outro critério, para que o anunciante possa</p><p>oferecer o conteúdo certo, criativo, inovador e na hora certa.</p><p>Dados do setor</p><p>De acordo com o Instituto Kantar Ibope Media, o mercado publicitário brasileiro movimentou R$</p><p>150 bilhões em compra de mídia em 2019.</p><p>A pesquisa apontou que mídia display, ou seja, publicidades nas telas digitais da internet,</p><p>somaram mais de R$ 3,5 bilhões do mercado de mídia no país.</p><p>Um outro estudo bastante interessante, o We Are Social 2020, realizado pela Hootsuite, mostrou</p><p>que o Brasil já é o segundo país em minutos no celular por pessoa: 9 horas e 29 minutos em média, por</p><p>dia.</p><p>O mercado já vinha sinalizando isso, mas o estudo comprovou que 29% dos brasileiros navegam</p><p>pela internet apenas pelo celular, e as mulheres são mais propensas do que os homens a serem usuárias</p><p>de internet exclusivamente mobile.</p><p>O mobile já representa mais de 50% do tempo on-line do brasileiro, e a audiência exclusivamente</p><p>mobile no Brasil cresceu 7% em relação ao ano anterior.</p><p>Outro dado interessante é que mesmo com a proliferação de tantos apps, 30 aplicativos principais</p><p>são responsáveis por 51% do tempo do brasileiro no mobile e 95% do tempo é gasto nos 10 principais</p><p>apps do usuário.</p><p>Devido ao alto grau de especialização, esse mercado é composto por grandes players, como</p><p>Facebook e Google, grandes empresas de mídia, operadoras de telefonia móvel e agências</p><p>especializadas em mobile advertising. Caso da Hands, que “desenvolve campanhas baseada nos KPIs</p><p>definidos pelos clientes e segmenta o target com ferramentas on e off-line, garantindo assertividade, além</p><p>de produzir campanhas com formatos criativos, utilizando todo seu conhecimento sobre as</p><p>funcionalidades existentes nos devices mobile”.</p><p>Plataformas de Marketing</p><p>Hands</p><p>Módulo: Desenvolvimento Front-end</p><p>161</p><p>hands.com</p><p>Além da Hands (e do Google Adsense), temos várias outras empresas com redes próprias, que atuam</p><p>com advertising, como, por exemplo:</p><p>Inlocomedia</p><p>inlocomedia.com</p><p>Louyt</p><p>Módulo: Desenvolvimento Front-end</p><p>162</p><p>louyt.com</p><p>Segmentação</p><p>Como grande parte dos dispositivos móveis possibilita habilitar as tecnologias Bluetooth e GPS</p><p>para ter uma precisão de localização aprimorada, e as próprias plataformas conseguem armazenar e</p><p>utilizar uma infinidade de dados de cada usuário, é possível criar inúmeras segmentações, indo além dos</p><p>já conhecidos dados sociodemográficos.</p><p>A partir dos dados geolocalizados, por exemplo, é possível tentar determinar que tipo de ação o</p><p>usuário está́́́ executando naquele momento e, então, impactá-lo se estiver próximo do estabelecimento</p><p>do anunciante ou fazendo alguma atividade relacionada com os produtos ou serviços da marca.</p><p>Essas informações possibilitam a entrega de campanhas oportunas e relevantes para o público.</p><p>Com isso, o investimento em anúncios mobile permite ao anunciante:</p><p>• Criar campanhas integradas (on-line e off-line);</p><p>• Impactar o consumidor no local e na hora certa;</p><p>• Atrair visitantes/clientes;</p><p>• Qualificar os leads;</p><p>• Otimizar o ROI.</p><p>De qualquer forma, é preciso compreender que, atualmente, conseguir se fazer presente durante</p><p>a jornada de compra do consumidor é um dos maiores desafios para qualquer anunciante.</p><p>Um estudo da empresa Kissmetrics apontou que, para 60% dos profissionais de marketing e</p><p>publicidade, anúncios segmentados por meio de geolocalização entregam resultados melhores.</p><p>É importante entender também que, ao contrário do que muita gente acredita, as pessoas não</p><p>deixaram de gostar de ser impactadas pela publicidade.</p><p>As pessoas continuam adorando campanhas criativas. O que elas não querem mais é publicidade</p><p>fora de contexto.</p><p>Contexto, atualmente, é a palavra-chave para a comunicação entre marcas e consumidores e</p><p>pode realmente fazer com que uma marca se destaque dos concorrentes se sua segmentação estiver</p><p>correta e sua comunicação e seus produtos forem realmente relevantes para seu público.</p><p>De um modo geral, os anúncios móveis são segmentados para dispositivos como iPhone, iPad e</p><p>Android e, especialmente no caso do Google, podem aparecer quando os usuários realizam pesquisas</p><p>pelo seu smartphone ou na rede mobile de sites parceiros. Após clicarem nos anúncios, os usuários são</p><p>Módulo: Desenvolvimento Front-end</p><p>163</p><p>direcionados para mobile sites ou para a realização de alguma ação, como reproduzir um vídeo, enviar</p><p>e-mails ou fazer uma chamada telefônica e assim por diante.</p><p>Facebook e Google são os dois players dominantes quando o assunto é Mobile Ads, mas,</p><p>dependendo do segmento ou características do negócio, a entrega de ambos pode não ser 100%</p><p>satisfatória e, nesses casos, é recomendável diversificar o uso das plataformas e buscar algo ainda mais</p><p>segmentado ou “nichado”.</p><p>Aqui no Brasil, a operadora Vivo criou uma plataforma de Mobile Ads que conta com mais de 70</p><p>milhões de clientes, sendo considerada a maior do País.</p><p>Nessa ferramenta, a Vivo oferece a possibilidade de segmentação por sexo, idade, localização e</p><p>todas as informações que a operadora de telefonia possui de cada cliente.</p><p>É possível ainda definir objetivos para cada campanha, como:</p><p>• Branding;</p><p>• Geração de leads;</p><p>• App Install;</p><p>• Geolocalização;</p><p>• Navegação patrocinada;</p><p>• E-commerce.</p><p>A plataforma da Vivo oferece oportunidades para ações de relacionamento, construção de marca,</p><p>vendas e projetos customizados de acordo com a demanda dos clientes.</p><p>Para otimizar as conversões, a plataforma da Vivo Ads disponibiliza ainda recompensas pelo</p><p>engajamento com a mídia. Ao interagir com o anúncio, o consumidor receberá como prêmio pacotes de</p><p>Internet para navegar grátis.</p><p>vivo-ads</p><p>Com o avanço do Mobile Ads, é importante que você tenha a compreensão de que</p><p>independentemente de o fornecimento da plataforma de mídia ser global, como no caso de Facebook,</p><p>Instagram e Google, ou local, como Vivo Ads, para ter sucesso na compra do tráfego e conversão do</p><p>público certo, a correta segmentação é o primeiro passo para o sucesso de uma campanha.</p><p>Formatos e investimentos</p><p>Quando se trata de escolher</p><p>uma plataforma de redes sociais para implementar os esforços de</p><p>publicidade móvel, é preciso observar quais delas oferecem as melhores oportunidade, tanto em formato</p><p>quanto em investimento.</p><p>Módulo: Desenvolvimento Front-end</p><p>164</p><p>Os formatos de anúncios mobile basicamente podem ser classificados de três maneiras: textos,</p><p>gráficos e interativos, porém definir qual formato deve ser usado para entregar o anúncio ao consumidor,</p><p>esse, sim, é um grande desafio.</p><p>Anúncio formato texto</p><p>Google Ads</p><p>Anúncio formato gráfico</p><p>Google</p><p>Anúncio formato aplicativo</p><p>Módulo: Desenvolvimento Front-end</p><p>165</p><p>Google ads</p><p>Isso porque cada formato chamará a atenção do consumidor de um modo diferente e sua</p><p>visibilidade dependerá também do contexto da entrega.</p><p>Os tipos de formatos e respectivos investimentos podem variar muito de acordo com cada</p><p>plataforma, já que a competitividade e a busca por inovação são muito grandes nesse mercado em rápida</p><p>evolução.</p><p>Abaixo, você irá conhecer alguns deles:</p><p>• Push Ads – É enviada uma notificação para o público-alvo, que, ao clicar nela, realizará uma</p><p>ação predeterminada.</p><p>blog inlocomedia</p><p>• Native Ads – Anúncio integrado ao conteúdo que o usuário está consumindo naquele momento.</p><p>Se estiver conhecendo um restaurante, por exemplo, poderá clicar no anúncio para ir ao aplicativo de</p><p>mapas ou chamar um Uber.</p><p>Módulo: Desenvolvimento Front-end</p><p>166</p><p>blog inlocomedia</p><p>• Retargeting – in loco – O anúncio é exibido a alguém que já visitou determinada página do site.</p><p>Neste caso, de pessoas que visitaram locais físicos recentemente.</p><p>blog inlocomedia</p><p>Como você já deve ter percebido, as plataformas de mídias sociais são totalmente diferentes tanto</p><p>no tipo de interação que permitem ao seu público quanto nos formatos disponibilizados para os anúncios.</p><p>Entre as plataformas mais populares de publicidade móvel atualmente, temos as redes sociais, com a</p><p>possibilidade de definir o dispositivo em que será entregue a mídia (como Facebook, Instagram,</p><p>Twitter...), Google (e sua rede de display) e as empresas com rede própria, como a Hands e AppsFlyer.</p><p>Módulo: Desenvolvimento Front-end</p><p>167</p><p>Oportunidades</p><p>O mundo de hoje é móvel. Nossos hábitos continuam mudando rapidamente e muita gente nem</p><p>possui mais desktop ou notebook pessoal. Usam apenas o smartphone.</p><p>O aumento do número de celulares em operação, o crescimento do e-commerce, o aumento dos</p><p>sites responsivos e a ampliação da oferta de redes Wi-Fi em locais públicos e privados confirmam a</p><p>tendência de crescimento desse setor.</p><p>Abaixo, você conhecerá as principais tendências.</p><p>São elas:</p><p>• Inteligência Artificial e Realidade Aumentada – Com o rápido avanço dessas tecnologias,</p><p>empresas como Apple, Google e outros grandes fabricantes do setor já vêm desenvolvendo</p><p>projetos pensando em suas futuras gerações de produtos e serviços.</p><p>• Wearables – Relógios, pulseiras e óculos inteligentes são apenas o início deste mercado</p><p>promissor que tem o objetivo de vestir as pessoas com tecnologia para facilitar o seu dia a dia.</p><p>Muitos adeptos, inclusive, utilizam cada vez menos seus smartphones.</p><p>• Apps – Com o amadurecimento do setor de aplicativos, a expectativa é que o mercado</p><p>continue crescendo e que, em vez de novas redes sociais, aumente o número de aplicativos com</p><p>o objetivo de facilitar cada vez mais o dia a dia das pessoas.</p><p>• E-Commerce – Com o aumento da segurança nas transações e o aprimoramento da</p><p>experiência do usuário, a tendência é que aumente cada vez mais o número de vendas online.</p><p>Diante desse cenário, é possível prever que surgirão novas possibilidades de interação com os</p><p>consumidores e novos formatos de mídia focados em diferentes tipos de experiências que os usuários</p><p>terão. Com isso, será imprescindível conseguir gerar tráfego e aumentar a taxa de conversão de leads.</p><p>Atividade</p><p>1. Com o crescimento das redes sociais o que foi potencializado?</p><p>2. Quanto o mercado publicitário brasileiro movimento em 2019?</p><p>3. Cite 2 empresas que atuam com advertising.</p><p>Módulo: Desenvolvimento Front-end</p><p>168</p><p>Tema 11: Análise de Portal</p><p>Nos primórdios da compra de mídia pela Internet, para se veicular um anúncio, era necessário</p><p>negociar com cada site, blog ou portal.</p><p>Imagine a dificuldade de um profissional de mídia com tantos sites, portais e mídias sociais para</p><p>gerir campanhas?</p><p>Com o passar do tempo, o crescimento dos usuários de Internet e o consequente aumento da</p><p>fragmentação dos diversos públicos, o processo de compra de mídia foi ficando vez mais demorado e</p><p>ineficiente. Com isso, o mercado começou a buscar formas mais eficientes para se comprar mídia,</p><p>surgindo, assim, as Ad Networks, empresas agregadoras de sites, as quais passaram a facilitar a vida</p><p>de agências e anunciantes, e que cobravam uma margem no CPM (custo por mil impressões) para</p><p>oferecer o serviço.</p><p>Mas era apenas o começo de uma grande transformação, pois o mercado continuou se</p><p>aprimorando e evoluindo em torno da automatização desse processo e as Ad Networks, apesar de</p><p>facilitarem o processo de compra de mídia, possuíam um alcance limitado, sendo necessário trabalhar</p><p>com diversas redes.</p><p>Assim, surgiram as Ad Exchanges, sistemas que funcionam como uma espécie de “bolsa de</p><p>anúncios”. Com elas, foi se formando um grande ecossistema de fornecedores em torno da compra de</p><p>mídia programática.</p><p>A maioria das pessoas nem imagina que os banners que elas veem impressos nas páginas da</p><p>Internet podem ter sido negociados por intermédio de uma plataforma de mídia programática e que o</p><p>anunciante provavelmente participou de um complexo processo de leilão em tempo real.</p><p>A mídia programática é um tema bastante discutido no marketing digital, e isto se deve ao fato de</p><p>que, com esse método, é possível escolher exatamente quem pode anunciar e onde publicar os anúncios.</p><p>Uma vez que é feita a segmentação, basta atualizar a ferramenta de gestão de mídia para que todo o</p><p>controle de verba fique automaticamente parametrizado.</p><p>Além disso, oferece benefícios aos anunciantes, pois produz preços completamente</p><p>transparentes. Um desses benefícios é o fato de que o comprador agora pode decidir exatamente quanto</p><p>quer pagar pelas impressões.</p><p>Outro benefício é que os anúncios são exibidos para as pessoas que demonstraram interesse</p><p>naquele determinado produto ou serviço (ou tem perfil para isso), enquanto no formato convencional de</p><p>mídia on-line, o banner aparece para qualquer pessoa que acesse o site, sem um critério mais específico.</p><p>Para se ter uma ideia do crescimento desse setor, uma pesquisa recente Programmatic Marketing</p><p>Forecasts, da Zenith, apontou que a mídia programática movimentou, em 2019, U$ 84 bilhões no</p><p>mercado mundial. A expectativa é que os investimentos nessa área devem ficar acima de dois dígitos ao</p><p>longo dos próximos anos aqui no Brasil.</p><p>Mas, como em qualquer área que sofre mudanças drásticas, e na área de mídia digital não é</p><p>diferente, a compra programática gera preocupações em alguns profissionais. Nesse caso, os publishers</p><p>(sites produtores de conteúdo), já que nessa modalidade de compra e venda de espaço, a programática</p><p>facilita a vida dos anunciantes, que podem comprar impressões por um valor menor, e com isso os</p><p>publishers podem ganhar menos.</p><p>Com isso, o mercado tem o desafio de aprender a usar essa tecnologia da forma correta para</p><p>otimizar investimentos e gerar valor aos anunciantes, vendedores, fornecedores e, principalmente, para</p><p>os consumidores.</p><p>Mídia Programática</p><p>A Mídia Programática é um processo de compra de mídia, de maneira automatizada (como já</p><p>falamos), com um ecossistema formado por fornecedores e plataformas, como Ad Exchanges, Data</p><p>Management Platform (DMP), Demand Side e Platforms (DSP). Uma de suas características mais</p><p>interessantes é a licitação de mídia em tempo</p><p>real ou RTB (Real Time Bidding).</p><p>Módulo: Desenvolvimento Front-end</p><p>169</p><p>minhavida.com.br</p><p>Esse sistema é extremamente eficiente, pois permite ao anunciante fazer lances para anunciar no</p><p>inventário oferecido por vendedor e, com apenas uma operação, a campanha pode ser exibida em vários</p><p>sites. Porém, é preciso compreender que existe diferença entre lance em tempo real (RTB) e a compra</p><p>programática. Eles estão diretamente relacionados, mas não são sinônimos.</p><p>RTB é um sistema que permiteao anunciante atingir os consumidores com base em seu</p><p>comportamento online recente, pois, antes do anúncio ser impresso para o internauta, as informações</p><p>sobre ele e a página/app que ele está utilizando são enviadas para um Ad Exchange, onde o comprador</p><p>fará seu lance.</p><p>Esse processo todo acontece em menos de 100 milissegundos. Portanto, é uma característica</p><p>extremamente relevante da compra programática e justamente por isso seu uso vem crescendo muito.</p><p>Vale destacar que a licitação em tempo real trouxe mais relevância, já que grande parte das estratégias</p><p>não está concentrada mais em canais e, sim, na compra de audiência.</p><p>Assim, a mídia programática pode ser utilizada por qualquer tipo de negócio, porque permite</p><p>aumentar o reconhecimento de marca e despertar o desejo de compra nos usuários. É indicada também</p><p>para empresas que precisam aumentar o número de acessos no site ou nas redes sociais.</p><p>Uma das coisas que tornam o conceito de programática tão atraente é que, além da Rede de Display do</p><p>Google, o anunciante, através de uma DSP, passa a ter acesso a um inventário muito mais amplo. O que</p><p>permite uma infinidade de cruzamentos de bases de dados e de critérios de segmentação, aumentando</p><p>a assertividade e permitindo veicular mídia com custos considerados mais adequados e justos.</p><p>Módulo: Desenvolvimento Front-end</p><p>170</p><p>google.com.br/ads/displaynetwork</p><p>Segmentação e plataformas</p><p>A partir da infinidade de dados que são gerados (Big Data), é possível criar clusters</p><p>(segmentações), reduzir drasticamente a dispersão dos anúncios, controlar o alcance e analisar os</p><p>resultados das campanhas.</p><p>Para configurar a campanha e acessar o inventário de mídia on-line, disponibilizado pelos sites</p><p>por meio das Ad Exchanges, é necessário acessar uma DSP.</p><p>Com as informações na DSP, o gestor da campanha poderá criar uma ou mais estratégias que</p><p>trabalharão de forma independente para alcançar o público-alvo, como, por exemplo:</p><p>• Conteúdo semântico: neste caso, o lance é dado apenas quando uma página tem conteúdo</p><p>relacionado com a categoria do anunciante.</p><p>• Whitelists: são lista de sites relevantes para o anunciante. Os lances são dados apenas</p><p>nesses canais previamente selecionados.</p><p>• Retargeting: é possível instalar tags no site e, com isso, conseguir mapear os usuários e</p><p>impactá-los (segui-los) quando estiverem navegando novamente.</p><p>• Third Party Data: é possível segmentar campanhas conforme características demográficas,</p><p>interesses e intenção de compra dos usuários. O lance é dado somente quando o perfil</p><p>selecionado entrar em uma página com inventário disponível.</p><p>• Dados Onboarding: é possível carregar uma lista de contatos do próprio anunciante e</p><p>encontrá-los on-line.</p><p>Além de compreender as características do modelo programático, o entendimento sobre o</p><p>inventário também é essencial para o sucesso de uma campanha desse tipo.</p><p>O primeiro passo é entender como operar:</p><p>• Full-service: esta opção é mais indicada para anunciantes que não têm experiência em mídia</p><p>programática ou que não podem ter pessoas dedicadas a esse tipo de operação. Assim, a operação fica</p><p>totalmente nas mãos do fornecedor.</p><p>• Self-service: neste caso, o anunciante ou sua agência tem total controle sobre o gerenciamento, a</p><p>operação e a otimização da companha, utilizando cada uma das plataformas e negociando diretamente</p><p>com cada um.</p><p>Módulo: Desenvolvimento Front-end</p><p>171</p><p>O próximo passo é compreender quais são as empresas envolvidas e como funcionam a</p><p>negociação e as formas de pagamento.</p><p>• DSP e Trading Desks – Qualquer uma dessas empresas irá analisar, com o anunciante, a verba</p><p>necessária para a campanha, podendo cobrar um percentual sobre o valor investido, uma mensalidade</p><p>sobre a tecnologia (fee) ou uma combinação das duas formas. Por exemplo:</p><p>BrightRoll Yahoo!</p><p>brightroll.com</p><p>Google Marketing Platform</p><p>doubleclickgoogle.com</p><p>MediaMath</p><p>Módulo: Desenvolvimento Front-end</p><p>172</p><p>mediamath.com</p><p>Publya</p><p>publya.com</p><p>Amnet</p><p>Módulo: Desenvolvimento Front-end</p><p>173</p><p>amnetgroup.com</p><p>Cadreon</p><p>cadreon.com.br</p><p>• DMPs – Cobram por mensalidade de tecnologia com base na quantidade de dados coletados ou um</p><p>valor sobre a quantidade de dados utilizados pela plataforma, ou ainda uma combinação dos dois.</p><p>Exemplos:</p><p>Tail</p><p>Módulo: Desenvolvimento Front-end</p><p>174</p><p>tail.digital</p><p>Adobe</p><p>adobe.com/br</p><p>• Data Providers – Cobram pelo uso dos dados. Exemplos:</p><p>Navegg</p><p>Módulo: Desenvolvimento Front-end</p><p>175</p><p>navegg.com</p><p>• SSPs – Cobram uma porcentagem das vendas geradas. Alguns exemplos:</p><p>OpenX</p><p>openx.com</p><p>PubMatic</p><p>Módulo: Desenvolvimento Front-end</p><p>176</p><p>pubmatic.com</p><p>Formatos e investimentos</p><p>Os inventários de mídia online estão disponíveis em formatos de display, vídeo, social e mobile, e</p><p>as plataformas de DSP entregam o anúncio onde o usuário estiver, de acordo com a segmentação</p><p>solicitada.</p><p>A rede de display garante que o usuário veja o anúncio de uma forma não agressiva, direcionada</p><p>de acordo com os termos pesquisados ou o interesse que é demonstrado durante o período de navegação</p><p>na Internet.</p><p>Os tipos de anúncios disponibilizados pela rede de display são:</p><p>Anúncios de texto</p><p>• Padrão de anúncio da Pesquisa do Google, com título, duas linhas de texto (35 caracteres</p><p>cada) e URL.</p><p>Anúncios gráficos</p><p>• Permitem incluir imagens, design personalizado, cores de fundo etc.</p><p>Anúncios rich media</p><p>• São anúncios gráficos, como, por exemplo, carrossel de produtos, pois possuem elementos</p><p>interativos, animações etc., que podem ser customizados de acordo com o perfil de cada</p><p>pessoa.</p><p>Anúncios de vídeo no YouTube</p><p>• É possível criar anúncio e incorporar um vídeo para ser reproduzido diretamente nele.</p><p>Algumas plataformas oferecem a operação de todos esses formatos, mas de acordo com sua</p><p>especialidade, cada uma delas pode apresentar uma performance melhor em um segmento ou outro.</p><p>A maioria das plataformas trabalha com formatos mobile, mas nem todas são cross-device; a</p><p>maioria opera em display, mas nem todas trabalham com vídeos; algumas atuam no Facebook, mas</p><p>nem todas no LinkedIn ou Twitter.</p><p>Um fator importante para escolher as melhores plataformas é entender que tipo de negociação</p><p>cada uma delas permite.</p><p>São elas:</p><p>• Open auction – A negociação mais comum. Qualquer anunciante pode ter acesso ao</p><p>inventário.</p><p>Módulo: Desenvolvimento Front-end</p><p>177</p><p>• Private auctions – Neste caso, somente alguns anunciantes são convidados a acessar o</p><p>inventário.</p><p>• Preferred deals – Antes que o inventário fique disponível ao mercado, é oferecido a um preço</p><p>fixo para um determinado anunciante que tem a preferência de compra.</p><p>• Programmatic guaranteed – Um preço fixo é definido e a entrega de inventário é garantida,</p><p>diferentemente do que acontece nas outras negociações.</p><p>Desafios e tendências</p><p>Esse mercado enfrenta desafios que fazem com que muitos anunciantes ainda relutem em investir</p><p>através desse formato de compra de mídia. Fraude e falta de transparência são os principais problemas.</p><p>É comum perder alguns dólares por causa de fraude.</p><p>Isso se deve ao fato de que os leilões usam o princípio “Second Price Option”, no qual o vencedor</p><p>paga o preço do segundo lance mais um centavo. O comprador sabe</p><p>o que vai pagar, mas não sabe</p><p>quem realmente deu o lance, nem o valor.</p><p>O problema é que, por conta dessa “brecha” no processo, o preço final pode ser manipulado.</p><p>Além disso, como o “last-click” ainda é o modelo de atribuição mais utilizado, há uma quantidade</p><p>exagerada de banners na Internet contribuindo para que mais pessoas bloqueiem as mídias, impedindo</p><p>a exibição de novos banners.</p><p>Assim, para que a compra de mídia programática continue crescendo e conquiste novos</p><p>anunciantes, é preciso que as empresas do setor tentem regular esse mercado, desenvolvendo soluções</p><p>que tornem o processo mais transparente e ético.</p><p>As tendências para mídia programática são:</p><p>• Omnichannel – Aumento do uso de programática em múltiplos e diferentes formatos de</p><p>publicidade que são tradicionalmente administrados de forma separada.</p><p>• Novos meios – Vídeo e mobile são as formas mais óbvias, mas já existem iniciativas em</p><p>social, áudio e TV.</p><p>• Personalização – Estão aumentando os investimentos para garantir o reconhecimento cada</p><p>vez mais preciso do usuário, de forma constante e por meio de vários dispositivos.</p><p>• Métricas – Existe uma iniciativa de toda a indústria em aprimorar os critérios para a análise</p><p>dos resultados das campanhas.</p><p>• Investimentos em criativos (peças publicitárias) – Com o aprimoramento dos níveis de</p><p>personalização e exibição da mídia para os diferentes públicos dentro de uma mesma</p><p>campanha, aumentam as possibilidades criativas.</p><p>• Medição do impacto off-line – A partir do conceito omnichannel, é possível monitorar o</p><p>comportamento do consumidor para entender e medir a penetração do mobile no tráfego off-</p><p>line.</p><p>Atividade</p><p>1. O que é Ad Exchanges?</p><p>2. Descreva a função da mídia programática.</p><p>3. Quais são os tipos de anúncios disponibilizados pela rede de display?</p><p>Módulo: Desenvolvimento Front-end</p><p>178</p><p>Referências bibliográficas</p><p>Sites</p><p>Download</p><p>• http://www.superdownloads.com.br/</p><p>• http://www.baixaki.com.br</p><p>• http://www.download.com/</p><p>Fontes</p><p>• http://www.dafont.com/en/</p><p>• http://www.coolarchive.com/fonts.cfm</p><p>• http://www.netfontes.com.br/</p><p>• http://www.fontface.com/</p><p>• http://www.1000fonts.com</p><p>Flash</p><p>• http://www.flashkit.com</p><p>• http://www.pontoflash.com.br</p><p>• http://www.thefwa.com</p><p>Busca</p><p>• http://www.yahoo.com.br/</p><p>• http://www.cade.com.br</p><p>• http://www.google.com</p><p>• http://www.altavista.com</p><p>Plugins</p><p>• http://www.autofx.com/</p><p>• http://www.alienskin.com/</p><p>Programação - códigos livres</p><p>• http://www.portaldaprogramacao.com</p><p>• http://software.xfx.net/utilities/dmbuilder/</p><p>• http://www.dynamicdrive.com/</p><p>• http://www.scriptfacil.com/</p><p>• http://www.linhadecodigo.com.br</p><p>• http://www.imasters.com.br/</p><p>• http://lib.seven.com.br/</p><p>• http://www.wmonline.com.br/</p><p>• http://www.estudehtml.com.br/</p><p>• http://www.crieseuwebsite.com/</p><p>• www.asparena.eti.br</p><p>Redes Sociais</p><p>• http://www.colourlovers.com/</p><p>• http://dribbble.com/</p><p>• www.treadless.com</p><p>• www.camiseteria.com.br</p><p>• www.wedologos.com.br</p><p>Módulo: Desenvolvimento Front-end</p><p>179</p><p>• http://www.behance.net/</p><p>• http://www.fontli.com</p><p>Revistas</p><p>• http://info.abril.com.br/</p><p>• http://www.digitaldesigner.com.br</p><p>• http://www.revistawww.com.br</p><p>Outros links úteis</p><p>• http://www.lynda.com/</p><p>• http://www.wezen.com.br/cores</p><p>• http://www.adobe.com/</p><p>• http://www.nielsen-netratings.com/</p><p>• http://www.yankeegroup.com/</p><p>• http://www.w3.org</p><p>• http://www.microsoft.com.br</p><p>• http://www.cg.org.br/</p><p>• https://www.ciawebsites.com.br/marketing-digital/entenda-a-importancia-do-conteudo-para-o-seu-</p><p>site/#:~:text=O%20conte%C3%BAdo%20informa%20ao%20seu,compra%20do%20seu%20Primeiro%</p><p>20Im%C3%B3vel%E2%80%9D.</p><p>• https://flaviomuniz.com.br/autoridade-digital/</p><p>• https://freelancear.com.br/converter-mais-vendas</p><p>• https://meuredator.com.br/erros-ao-criar-conteudo/</p><p>• https://www.terra.com.br/noticias/sites-desenvolvidos-com-foco-estrategico-impactam-no-</p><p>ranqueamento-em-buscadores,507b43919be8d1ce5cd50ce8631b0751pqd3dwrn.html</p><p>• https://imoveisbc.com/artigo/3274/qual-o-melhor-banco-para-financiar-um-apartamento</p><p>• https://www.salvadorneto.com.br/qual-o-seu-conteudo/</p><p>• http://www.novopalio.com.br</p><p>• https://www.ebsco.com/e/pt-br/blog/revista-impressa-e-digital-ambos-os-formatos-podem-coexistir</p><p>• https://marketingdoamanha.com/seo-o-que-e/</p><p>BLOG PUBLICIDADE UOL. Dados ajudam a aumentar a representatividade na propaganda.</p><p>BURGER, Luciana. Mobile & Maslow: Como o mobile supre as necessidades dos consumidores no</p><p>digital? 2017.</p><p>DUARTE, Fernando. Brasil é 'vice' em tempo gasto em redes em ranking dominado por 'emergentes'.</p><p>2019.</p><p>EMARKETER. eMarketer Releases New US programmatic ad spending. 1. nov. 2017.</p><p>FLURRY. All-New Flurry Mobile Analytics Intro. 2016.</p><p>FOUNDATION. What is the difference between Interaction Design and UX Design?. 2019.</p><p>GAYNOR, Bryan. Programmatic is good for your PPC Strategy. 14 set. 2017.</p><p>GOOGLE. Brand marketing programmatic buying guide.</p><p>HOOTSUIT. We are social 2020. 2020.</p><p>HUBSPOT. Marketing Statistics. 2020.</p><p>HUBSPOT. Not another state of marketing. 2020.</p><p>Módulo: Desenvolvimento Front-end</p><p>180</p><p>HUBSPOT. State of marketing. 2020.</p><p>IAB BRASIL. Mídia programática.</p><p>KRUG, Steve. Don't Make Me Think, Revisited: a common sense approach to web usability. 3. ed. San</p><p>Francisco: New Riders Publishing, 2015.</p><p>LORANGER, Hoa. Top web UX design guidelines. San Francisco: usability week – Nielsen Norman</p><p>Group, 2015.</p><p>Mundo do Marketing, 30 ago 2017.</p><p>NOALVO. 108 dados sobre mercado publicitário. 2020.</p><p>NORMAN, Don. The Design of Every Things. Reprint. New York: Basic Books (AZ). 2016.</p><p>OLIVEIRA, Priscila. Tendências e desafios para a mídia programática no Brasil.</p><p>PIRES, R. Qual será o futuro da publicidade? 2020.</p><p>SHARECARE. Crescimento de apps/wearables de saúde é esperado no mercado. 2019.</p><p>SIANG, Teo. The Ultimate Guide to Understanding UX Roles and Which One You Should Go For. 2019.</p><p>SILVA, Camila. Conheça as 5 vantagens da compra de mídia programática. Abr. 2015.</p><p>SOUZA, Francisco Alberto Madia de. Marketing Trends 2017. São Paulo: M.Books, 2016.</p><p>SPINA, Felipe. Mídia programática: o que é e como implementar na prática essa forma de comprar</p><p>anúncios. 5 out. 2017.</p><p>UOL. Internet dispara 20% e lidera alta nos investimentos com anúncios no Brasil. 2019.</p><p>WHITENTON, Kathryn. User experience training. San Francisco: Usability Week, 2015.</p><p>ou corporativo, onde costumam ser a homepage de</p><p>uma determinada empresa, ou até mesmo de uma instituição, contendo informações gerais da área de</p><p>prestação de serviço, história da instituição, contatos, produtos entre outras informações. Um exemplo é</p><p>o site da Coca Cola é um site corporativo da empresa contendo informações que os administradores</p><p>julgam importantes.</p><p>Sites educativos - são usados com o intuito de publicar conteúdos de diversos tipos e finalidades</p><p>para que cheguem a uma didática eficiente para o processo de aprendizagem de seus usuários. Na</p><p>internet encontramos diversos tipos de sites educativos, desde conteúdos gratuitos, como também cursos</p><p>EAD (Ensino à Distância) como instituições de ensino superior.</p><p>Sites de rede sociais - são usados com um ambiente onde os usuários possam compartilhar</p><p>informações, interesses pessoais, festas, amigos, viagens; ou redes sociais de perfis do tipo profissional,</p><p>estudantil entre outros.</p><p>Blogs - são sites criados para publicações de artigos, pesquisas e até mesmo de "fofocas", devido</p><p>a facilidade de criar um blog, qualquer usuário da internet pode criar seu próprio blog e fazer seus artigos</p><p>com suas publicações.</p><p>Sites da imprensa - são revistas e jornais tradicionais que além da versão impressa, também</p><p>disponibilizam seu conteúdo de forma online. Esses sites tem o papel importante de manter a informação</p><p>atualizada.</p><p>Módulo: Desenvolvimento Front-end</p><p>16</p><p>Sites bancários - são sites de bancos e entidades financeiras que oferecem seus serviços através</p><p>da internet. Esses sites possuem complementos de segurança de dados, para maior confiabilidade e</p><p>interação, proporcionando aos usuários segurança nas transações bancárias.</p><p>E-Commerce - são sites de lojas online que geralmente oferecem seus produtos e serviços de</p><p>forma presencial. As lojas online tiveram um crescimento exponencial nos últimos anos devido a</p><p>tecnologia que usamos atualmente, facilitando a criação e gerenciamento de seus produtos e</p><p>implementando complementos que facilitam a interação com os usuários.</p><p>Sites de aplicativos web - são aplicativos online de softwares, que outrora necessitavam de uma</p><p>instalação no seu computador para o uso, através desses serviços se tornaram online como por exemplo</p><p>o Google Docs., que antes da sua criação não era possível usarmos processadores de texto de modo</p><p>online, sem prévia instalação no computador.</p><p>Sites multimidia - são sites dedicados a transmissão de áudio e video, são muitos sites que</p><p>utilizam esse formato como Youtube, Vimeo entre outros, atualmente o crescimento de podcasts</p><p>migraram para o uso dessas plataformas para armazenar e disponibilizar seu conteúdo de forma mais</p><p>efetiva.</p><p>Responda</p><p>1) O que significa WEB?</p><p>2) O que é Web Services?</p><p>3) Qual formato é o mais usado na lista de serviços web?</p><p>4) Defina U.R.L</p><p>5) Qual a utilização de uma API?</p><p>6) Quais são as limitações da Web 1.0?</p><p>7) A Web 2.0 foi a grande precursora na utilização das redes sociais e interatividade nos sites, qual a</p><p>característica da Web 2.0 que tornou isso possível?</p><p>8) Qual as características da Web 3.0?</p><p>9) Entre as evoluções da Web (1.0,2.0 e 3.0), quais as diferenças entre elas?</p><p>10) O que é um site E-commerce</p><p>Desafio</p><p>Mostre a importância da evolução da web com suas próprias palavras.</p><p>Módulo: Desenvolvimento Front-end</p><p>17</p><p>Tema 3: Introdução Ao HTML</p><p>Figura 10: Logo HTML 5 – Fonte: Wikipedia</p><p>Terminologia</p><p>HTML - Linguagem de Marcação de Hipertexto é uma linguagem usada em criação de sites, ela</p><p>é responsável por mostrar no navegador como seu conteúdo será organizado, ou seja, é uma linguagem</p><p>que transforma o conteúdo "cru" e faz a organização (marcação) desse conteúdo no navegador.</p><p>Se o site tem imagem, é o html que determina como e onde ela é mostrada, em caso de tabela</p><p>também, o html mostra no navegador a tabela de acordo como está no próprio documento html, se o</p><p>documento possui metadados, é o html que mostra como serão carregados. Através do html são possíveis</p><p>integrações com outras linguagens, tanto de marcação como o CSS (Cascating Style Sheet) e o</p><p>JavaScript (programação).</p><p>Toda página escrita em HTML deve ser salva (.html ou .htm)A linguagem html possui algumas</p><p>características próprias e distintas na qual possamos identificar, como as “tags”, as tags (etiquetas –</p><p>português) em html são comandos que se encontram entre os sinais de menor que “” , e tem o objetivo determinar uma ação de identificação de tópico. O html na sua atual versão que é</p><p>a 5.0, teve algumas atualizações de grande importância para as páginas web, uma delas é como o html</p><p>trata as informações nessa versão, não apenas na estrutura e organização, mas também indicando o</p><p>significado das informações. Vamos conhecer as principais tags encontradas nos documentos html.</p><p>Tags Estruturais</p><p>... - Esta tag indica que a página foi escrita em html. Ela aparece na primeira linha da</p><p>página. É utilizada principalmente para mostrar que a página usa HTML 5 – a versão mais recente da</p><p>linguagem. Também conhecido como elemento root, esta tag pode ser considerada como uma tag pai</p><p>para qualquer outra página. Ela é a primeira e a última tag usada nas páginas html.</p><p>... - Esta tag é utilizada para especificar o cabeçalho da página, onde nada entre essa</p><p>tag será mostrado no documento. É usada também para especificar metadados sobre a página. Inclui o</p><p>Módulo: Desenvolvimento Front-end</p><p>18</p><p>nome da página (tag ... ), suas dependências (JavaScript e CSS), é dentro dessa tag que</p><p>colocamos links de scripts em JavaScript e links de estilos em CSS.</p><p>... - Como o nome sugere, essa tag contém o título/nome da página. Você pode ver isso</p><p>na barra de navegação do seu navegador para qualquer página aberta. Mecanismos de busca utilizam</p><p>esta tag para extrair o assunto da página, o que é bastante conveniente para o ranqueamento e melhor</p><p>visualização da página.</p><p>... - Tudo que é mostrado na página, ou seja, tudo o que o usuário vê escrito, está dentro</p><p>da tag body, nela contém todo o conteúdo da página.</p><p>- Temos um método onde podemos colocar comentários no código em</p><p>html, isso facilita na organização do seu documento em html. Os comentários não são mostrados na</p><p>página dentro do navegador, só é mostrado no código auxiliando o próprio desenvolvedor, ou outros</p><p>desenvolvedores que irão utilizar aquele documento.</p><p>... - Essa tag é muito usada para agrupar elementos de um site, que facilita a identificação</p><p>nas folhas de estilos (CSS). Pode ser atribuída alguns atributos, são eles:</p><p>• ID - Define um identificador</p><p>• CLASS - Define uma classe.</p><p>• TITLE - Define um título.</p><p>• WIDTH – Define a largura.</p><p>• HEIGHT – Define a altura.</p><p>Veja um exemplo:</p><p>Esse código em HTML será exibido no navegador da seguinte forma:</p><p>Podemos visualizar o título da página na barra de navegação do navegador, o endereço do site</p><p>(nesse caso o endereço do site onde se encontra salvo no computador) e o corpo da página escrito</p><p>“Começando o meu primeiro Site”. É assim que funciona uma estrutura básica em HTML, vamos conhecer</p><p>um pouco mais das novas tags (tags semânticas), que vieram junto com a nova versão do HTML 5.0.</p><p>... - Determina o cabeçalho da página.</p><p>- Especifica o rodapé da página.</p><p>... - Marca o conteúdo principal da página.</p><p>... - Denota um artigo na página. Uma página pode ter vários artigos, desse modo é</p><p>importante inserirmos o atributo name em cada artigo da página.</p><p>... - Determina o conteúdo mostrado na lateral da página.</p><p>Módulo: Desenvolvimento Front-end</p><p>19</p><p>... - Especifica</p><p>uma seção da página, semelhante ao article, podem ter varias</p><p>seções na página, sendo necessário o uso do atributo name para melhor identificá-las.</p><p>... - Essa tag é reservada para diagramas, gráficos em geral.</p><p>... - É usada para colocar uma descrição em uma figura.</p><p>... - É utilizada para separar os links de navegação de uma página, menus de links</p><p>geralmente ficam separados por essa tag.</p><p>- É usada para quebra de linha dentro do conteúdo, semelhante ao , porém a diferença é que</p><p>essa tag pode ser usada dentro de um texto específico para melhorar sua visualização no navegador.</p><p>• Tags de Texto</p><p>... - São seis variações de</p><p>escrita de cabeçalho. O possui o maior</p><p>tamanho da fonte, enquanto o o menor.</p><p>... - É uma tag usada para</p><p>agrupar elementos de títulos ( ) de</p><p>forma semântica, ajudando os sites de buscas</p><p>para entender os títulos e facilitar em achar o site.</p><p>... - Esta tag indica o começo de um parágrafo, textos sem formatação são colocados dentro</p><p>dessa tag.</p><p>... - Deixa o texto em negrito.</p><p>... - Deita o texto em itálico.</p><p>... - Deixa o texto sublinhado.</p><p>Veja um exemplo:</p><p>Módulo: Desenvolvimento Front-end</p><p>20</p><p>Esse código html mostrará no navegador da seguinte forma:</p><p>- Esta tag é responsável pela quebra de linha da página. Usada quando você quer escrever em</p><p>uma nova linha. Essa tag não precisa ser fechada, por isso é usada com um comando único.</p><p>• Links e Âncora</p><p>Nome da âncora - Esta é uma tag âncora. Primariamente utilizada para inclusão de</p><p>hyperlinks.</p><p>E-mail - Tag dedicada para o envio de emails.</p><p>Número de telefone - Tag âncora para menção de números de contato.</p><p>Como os números são clicáveis, é particularmente útil para usuários de celular.</p><p>... - Esta tag pode ser utilizada para navegação rápida para outra parte da</p><p>página.</p><p>• Imagens</p><p>A tag define onde será mostrada uma imagem na página, ela possui propriedades para melhor</p><p>aplicação das imagens, vejamos quais são:</p><p>- Tag para mostrar imagens em uma página.</p><p>src=”URL” - A URL ou caminho onde a imagem está localizada no seu computador ou na web.</p><p>alt=” texto” - O texto escrito aqui é exibido quando o usuário passa o mouse em cima da imagem. Pode</p><p>ser utilizada para dar detalhes adicionais sobre a imagem, facilitando também para os motores de busca.</p><p>height=” altura da imagem” - Essa tag especifica a altura da imagem, pode ser em pixels ou</p><p>porcentagem.</p><p>width=” largura da imagem” - Essa tag especifica a largura da imagem, pode ser em pixels ou</p><p>porcentagem.</p><p>border=” ...” - Tag que altera a grossura da borda da imagem, caso não definida ela adota o valor padrão</p><p>que é 0.</p><p>- Especifica a área de imagem do mapa.</p><p>shape=” ...” - Formato da área.</p><p>Módulo: Desenvolvimento Front-end</p><p>21</p><p>coords=” ...” - Coordenadas da informação vital do formato da área. Exemplo: vértices para triângulos,</p><p>centro/radianos para círculos.</p><p>... - Indica uma imagem interativa (clicável).</p><p>• Listas</p><p>... - Tag usada para lista ordenada ou numerada de itens.</p><p>... - Tag para listas não ordenadas.</p><p>... - Item individual como parte da lista, pode ser usada nas duas tags de listas.</p><p>Podemos fazer alterações nas especificações padrão das listas, alterando valores dos atributos, e assim</p><p>personalizando as listas. Conheça alguns atributos das listas:</p><p>reversed - Este atributo booleano especifica que as partes desta lista serão especificadas em ordem</p><p>reversa, isto é, a menos importante será listada primeiro.</p><p>start - Este atributo inteiro especifica o valor inicial para a numeração dos itens da lista. Embora o tipo de</p><p>ordenação dos elementos possa ser com algarismos romanos, tal como XXXI, ou letras, o valor inicial</p><p>sempre é representado como um inteiro. Para iniciar a contagem a partir da letra "C", utilize .</p><p>Type;</p><p>Indica o tipo de numeração:</p><p>‘a’ – Indica letras minúsculas.</p><p>‘A’ – Indica letras maiúsculas.</p><p>‘i’ – Indica algarismos romanos minúsculos.</p><p>‘I’ – Indica algarismos romanos maiúsculos.</p><p>‘1’ – Indica números (padrão).</p><p>O tipo de marcação é usado na lista inteira, a menos que um atributo type diferente seja utilizado dentro</p><p>do elemento . Vejamos alguns exemplos do uso das listas em html:</p><p>A saída no navegador será assim;</p><p>Módulo: Desenvolvimento Front-end</p><p>22</p><p>Usando o atributo Start;</p><p>No navegador;</p><p>Note que o atributo start indica o início do item na lista, nesse caso foi iniciado a partir do número 7. Listas</p><p>aninhadas também podem ser utilizadas em html. Exemplo:</p><p>Saída no navegador:</p><p>Módulo: Desenvolvimento Front-end</p><p>23</p><p>Listas OL e UL aninhadas:</p><p>Saída no navegador:</p><p>Responda:</p><p>1) O que é HTML?</p><p>2) O que são tags?</p><p>3) A tag é essencial para uso de arquivos externos no documento HTML, quais tipos de arquivos</p><p>posso usar para fazer o link através dessa tag?</p><p>4) Qual a função da tag ?</p><p>5) O HTML vem se atualizando no decorrer dos anos, qual versão estamos atualmente do HTML?</p><p>6) Qual tag utilizo para inserir uma imagem na página web?</p><p>7) Sabemos que as tags e , são tags de listas HTML, qual a função de cada uma delas</p><p>respectivamente?</p><p>8) Como escrevo um comentário em um documento HTML?</p><p>Módulo: Desenvolvimento Front-end</p><p>24</p><p>9) Quais são as tags de estrutura do HTML?</p><p>10) Como devo salvar um documento HTML?</p><p>Desafio</p><p>Crie uma página em html como se fosse seu perfil com sua foto, nome e uma seção que diz um pouco</p><p>sobre você.</p><p>Dica: Para criar documento em HTML é necessário um editor de texto, deixei para</p><p>download o Visual Studio Code, da Microsoft. É um software leve e intuitivo para</p><p>começar no HTML.</p><p>Opção 2: Interpretador pela internet: https://playcode.io/new/</p><p>https://playcode.io/new/</p><p>Módulo: Desenvolvimento Front-end</p><p>25</p><p>Tema 4: Tabelas</p><p>Figura 11: Estrutura tabelas em HTML – Fonte: homehost.com.br</p><p>Oque São Tabelas</p><p>Tabelas são listas de dados compostas por linhas e colunas de forma bidimensional, ou seja, em</p><p>duas dimensões. São muito utilizadas para apresentar dados de uma forma organizada e profissional. No</p><p>HTML é possível usarmos tabelas para a organização de dados, mostrando a importância desses dados</p><p>em nossa página de forma organizada e sistemática. De forma fácil é possível usarmos esse recurso</p><p>muito bem estruturado e organizado para apresentação de dados em lista.</p><p>Vamos conhecer a estrutura básica de uma tabela, para codificarmos uma tabela em HTML.</p><p>NOME IDADE PROFISSÃO</p><p>Eduardo 25 Motorista</p><p>Camila 32 Gerente de Vendas</p><p>Wesley 18 Ator</p><p>• Estruturas HTML Das Tabelas</p><p>A tag usada para criar uma tabela é a tag , que posteriormente fechada com . É</p><p>entre essas tag que incluímos as tags referente as linhas e colunas da tabela, ou seja, as células da</p><p>tabela.</p><p>As tags que formam a estrutura de uma tabela html, são as tags que significa table row, usada</p><p>para definir uma linha, e a tag que significa table data, usada para criar uma célula. Sendo assim</p><p>podemos notar que as colunas em uma tabela html são feitas automaticamente através da quantidade de</p><p>células incluídas dentro de uma linha.</p><p>Módulo: Desenvolvimento Front-end</p><p>26</p><p>Figura 12: Tag das tabelas / Fonte: homehost</p><p>Sendo assim vamos criar nossa primeira tabela em html, usando como referência o exemplo</p><p>acima:</p><p>Podemos incluir uma ou mais células representando títulos, ganhando certo destaque em relação</p><p>às demais células,</p><p>usamos a tag que significa table header. Vamos aplicar essa tag no mesmo</p><p>Exemplo usado acima e vejamos o resultado:</p><p>Módulo: Desenvolvimento Front-end</p><p>27</p><p>Note que alteramos todas as tags da primeira linha para as tags , dando um destaque</p><p>no título das células.</p><p>O resultado no navegador sairá assim:</p><p>Podemos aplicar a tag para</p><p>títulos verticais também, ou seja, na</p><p>primeira coluna. Dessa forma vamos ver</p><p>um exemplo olhando a tabela a seguir:</p><p>No navegador temos o seguinte resultado:</p><p>Módulo: Desenvolvimento Front-end</p><p>28</p><p>Anteriormente, vimos como funciona a estrutura básica de tabelas em html, com as tags e</p><p>, e as células título . Além dessas, também há tags usadas para melhorar a estrutura da tabela,</p><p>a tag ... por exemplo, é usada para representar o cabeçalho da tabela, que em geral</p><p>é composta por títulos.</p><p>Temos também a tag ... , usada para representar o corpo da tabela e a tag</p><p>... que por sua vez é utilizada para representar o rodapé da tabela. Essas tags tem como</p><p>principal função manter uma semântica adequada para as tabelas, vejamos um exemplo com essas tags</p><p>aplicada no código html.</p><p>O resultado do código no navegador fica assim:</p><p>Módulo: Desenvolvimento Front-end</p><p>29</p><p>Em alguns casos, seja necessário o uso de uma</p><p>célula vazia (em branco), podemos usar as tags ou</p><p>sem incluir nenhum conteúdo, porém alguns</p><p>navegadores não conseguem ler adequadamente nesse</p><p>formato, então podemos utilizar uma técnica de espaço</p><p>vazio usando o &nbsp (inclui um valor vazio no html).</p><p>Segue o exemplo ao lado:</p><p>No navegador o resultado é o seguinte:</p><p>Em alguns casos necessitamos utilizar células mescladas, ou seja, criar uma célula que abrange</p><p>mais que uma linha ou coluna. Podemos então utilizar os atributos colspan que faz a mesclagem de</p><p>colunas e rowspan que faz a mesclagem das linhas. O colspan é usado de forma que é necessário indicar</p><p>o número de colunas a serem mescladas (colspan=”x”, onde o x representa o número de colunas) e o</p><p>rowspan usado de forma semelhante só que indicando o número de linhas para serem mescladas;</p><p>(rowspan=”x”, onde o x representa o número de linhas).</p><p>Vamos ver um exemplo usando o colspan:</p><p>Módulo: Desenvolvimento Front-end</p><p>30</p><p>No navegador a saída é dessa forma:</p><p>Podemos notar que a coluna ‘telefones’ foi mesclada usando o espaço de 2 colunas conforme</p><p>definida no código html. Veremos um exemplo com o atributo rowspan:</p><p>O exemplo acima mostra duas linhas mescladas com o atributo rowspan. Existem mais algumas</p><p>propriedades para usarmos nas tabelas, porém muitas delas foram alteradas pelo uso de folhas de estilos</p><p>para a formatação (CSS), no capítulo de CSS vamos ver algumas formatações adicionais nas tabelas.</p><p>Responda:</p><p>1) O que são tabelas HTML?</p><p>2) As tabelas são formadas pelas ____________ e pelas __________.</p><p>3) Como é chamado um elemento individual da tabela?</p><p>4) Para criamos uma tabela em HTML, devemos começar com a tag ________ .</p><p>5) Quais as tag de estrutura de uma tabela HTML?</p><p>6) Como aumentar as dimensões de uma tabela em HTML?</p><p>7) Para que serve os atributos colspan e rowspan?</p><p>8) Qual atributo preciso para definir a bordar de uma tabela HTML?</p><p>9) Qual a função das tags e ?</p><p>10) Qual a finalidade da tag ?</p><p>Desafio</p><p>Criar uma tabela html com 5 colunas (nome, idade, comida favorita, filme favorito e serie favorita) e 8</p><p>linhas, com título e rodapé.</p><p>Módulo: Desenvolvimento Front-end</p><p>31</p><p>Tema 5: Formulários</p><p>Figura 13: Formulários HTML – Fonte: homehost</p><p>O Que São Formulários?</p><p>Os formulários em html são usados como uma das principais ferramentas de interatividade entre</p><p>os usuários e um site ou aplicativo. Através deles que os usuários enviam dados para o site, sendo que</p><p>na maior parte do tempo esses dados são enviados para um servidor web, porém a página web pode</p><p>requisitar para usa-los em qualquer momento. Em geral quando necessitamos que o usuário forneça</p><p>algum tipo de informação, é pelo formulário que fazemos esse pedido, que por sua vez envia os dados</p><p>para um banco de dados, para o armazenamento ou utilização em outra página. Existem inúmeras</p><p>finalidades na qual podemos usar os formulários, vamos conhecer as principais tags e aprender a utilizar</p><p>o formulário em html.</p><p>A principal diferença entre um formulário html e um documento simples html é que na maioria das</p><p>vezes, o dado coletado é enviado ao servidor. Nesse caso, é necessário ter um servidor web configurado</p><p>para receber e processar os dados, vamos aprender a configurar um servidor web mais adiante, nesse</p><p>capitulo vamos nos atentar para o formulário e seus atributos. Os formulários necessitam de validações</p><p>em seus campos, é até possível fazer essas validações em html, mas no html 5, é indicado fazer as</p><p>validações no código JavaScript incorporado no formulário.</p><p>Antes de codificar um formulário, é de grande ajuda ter ele desenhado em algum arquivo, ou até</p><p>mesmo numa folha de papel, para facilitar na hora de codificar e não esquecer nenhum campo importante.</p><p>Criando um Formulário</p><p>Todo formulário em html deve começar pela tag e terminar fechando-a , esse</p><p>elemento não é visual (quando colocamos somente a tag na página, ao executar no navegador</p><p>não nos mostra nada, é apenas para indicar que naquele local determinado tem um formulário), ela</p><p>precisa de outros elementos para que o formulário ganhe vida. Vamos conhecer as tags do formulário e</p><p>seus atributos.</p><p>Dentro da tag deve ser configurado alguns atributos para indicar qual a finalidade daquele</p><p>formulário, podemos identificar um formulário através do atributo id=”nome_do_formulário”, em casos</p><p>em que temos mais que um formulário na página , também temos o atributo method (método) que define</p><p>o método HTTP para o envio de dados, ele pode ser method=”get” ou method=”post”. Vamos ver as</p><p>diferenças de cada um:</p><p>GET = Os dados serão enviados junto com a URL, e desta forma, serão visíveis para os usuários,</p><p>que podem fazer alterações, onde pode gerar alguns problemas e incidentes quanto a segurança dos</p><p>dados.</p><p>Módulo: Desenvolvimento Front-end</p><p>32</p><p>POST = Os dados serão enviados no corpo da mensagem HTTP, sendo assim serão invisíveis</p><p>para os usuários, o método mais indicado para envio de dados.</p><p>Outro atributo da tag é o autocomplete, este atributo permite desabilitar(off) o</p><p>comportamento padrão da maioria dos navegadores modernos, os quais sugerem valores para os</p><p>campos baseados em preenchimentos anteriores, ou seja, esse atributo desabilita o auto completar dos</p><p>campos de dados pelos navegadores, mas sempre que se achar necessário ser habilitado pode ser</p><p>colocado o valor (on).</p><p>Os formulários em html possui alguns elementos essenciais para seu bom funcionamento, vamos</p><p>conhecer alguns deles para compreender melhor o uso dos formulários;</p><p>INPUT – Com a nova versão do HTML (5.0), esse elemento ganhou novos types (tipos), onde</p><p>possibilita atribuir mais controles, porém ainda temos alguns navegadores que não reconhecem esses</p><p>novos types, adotando assim ao valor padrão . O elemento input é um elemento que</p><p>permite a entrada de vários tipos de dados, seu comportamento é definido pelo atributo type, dentre os</p><p>tipos de entrada de dados usados pela tag , podemos destacar alguns:</p><p>TEXT – Esse atributo permite a entrada de textos curtos, com limitação de uma linha, não</p><p>apresenta restrições quanto ao conteúdo utilizado, e não possui validação. Além desse atributo, o ideal é</p><p>que usamos o atributo id, que é usado para estilizar o elemento utilizando o CSS, e o atributo name, que</p><p>serve para determinar o nome do campo, assim podendo ser identificado quando</p><p>for enviado pro servidor</p><p>na forma de uma variável, que por sua vez terá o valor igual ao conteúdo do atributo value</p><p>.</p><p>LABEL – Faz a definição de um rótulo para melhorar o controle de campos.</p><p>LEGEND – Define um título para um conjunto de campos.</p><p>Exemplo do código:</p><p>No navegador:</p><p>CHECKBOX – Usado juntamente com a tag input, esse atributo cria uma variada cadeia de opções</p><p>selecionáveis, que podem ser escolhidas pelo usuário, permitindo também a seleção de mais de uma</p><p>opção.</p><p>Exemplo do código:</p><p>Módulo: Desenvolvimento Front-end</p><p>33</p><p>Podemos observar que todos os elementos possuem o mesmo valor no atributo “name”, neste</p><p>caso “generoFilme”, mas cada um está associado um valor diferente no atributo value.</p><p>No navegador:</p><p>RADIO – Esse atributo é semelhante ao anterior criando uma lista de opções, porém permitindo somente</p><p>uma opção pra ser selecionada.</p><p>Exemplo do código:</p><p>Neste caso é importante lembrar que todos os elementos radio, que estão relacionados devem</p><p>possuir o mesmo name. Confira o resultado no navegador.</p><p>Módulo: Desenvolvimento Front-end</p><p>34</p><p>PASSWORD – Esse atributo é muito utilizado para criar campos de entrada de senhas, protegendo os</p><p>elementos visualmente, substituindo por um carácter padrão o “ * ”. Dificultando os curiosos.</p><p>Exemplo de código:</p><p>No navegador:</p><p>DATE – Esse de tipo de atributo aceita apenas datas. Em alguns navegadores quando este campo é</p><p>utilizado ele apresenta um calendário no qual podemos escolher uma data específica, em outros casos</p><p>ele apresenta apenas uma máscara mostrando um formato que a informação será mostrada.</p><p>Exemplo do código:</p><p>Podemos determinar um intervalo de datas válidas, com os atributos “min” e “max”, sempre usadas</p><p>no formato de datas norte americano ano-mês-dia, onde o ano deve conter 4 dígitos. Veja o resultado no</p><p>navegador.</p><p>COLOR – Este atributo fornece ao usuário um elemento que permite selecionar uma cor, dependendo do</p><p>navegador este elemento é apresentado de formas diferentes. Em geral o valor retornado está no formato</p><p>hexadecimal (#AABBCC).</p><p>Exemplo do código:</p><p>Módulo: Desenvolvimento Front-end</p><p>35</p><p>No navegador:</p><p>EMAIL – Este atributo permite uma verificação do conteúdo do campo para garantir que o formato digitado</p><p>seja um email válido, pode ser enviado em branco, salvo com o uso do atributo required. Em casos que</p><p>o atributo multiple esteja presente, é possível submeter mais de um endereço de email válido, para isso</p><p>devemos separar cada email com uma virgula ( , ).</p><p>Exemplo do código:</p><p>No navegador:</p><p>NUMBER – Permite a entrada de dados numéricos permitindo definir através dos atributos “min” para o</p><p>valor mínimo e “max” para o valor máximo. Outro atributo que é usado é o “step” que define o valor do</p><p>incremento e decremento do campo.</p><p>Exemplo de código:</p><p>Módulo: Desenvolvimento Front-end</p><p>36</p><p>No navegador:</p><p>RANGE – Este atributo em geral apresenta uma barra horizontal, cujo os valores são limitados pelos</p><p>atributos “min” e “max”, outro atributo usado é o “step”.</p><p>Exemplo do código:</p><p>No navegador:</p><p>TIME – Este atributo permite ao usuário colocar um horário no formato de 12 ou 24 horas, com o formato</p><p>hh:mm, em casos de 12 horas com a sigla AM/PM, e em casos 24 horas hh:mm:ss, isso dependendo do</p><p>navegador.</p><p>Exemplo do código:</p><p>Módulo: Desenvolvimento Front-end</p><p>37</p><p>No navegador:</p><p>URL – Este atributo é usado quando precisamos de uma validação do campo para verificar uma url válida</p><p>digitada pelo usuário.</p><p>Exemplo do código:</p><p>No navegador:</p><p>HTML 5 Novas Tags</p><p>Esses atributos do apresentados até aqui são atributos que fazem parte do html já algum</p><p>tempo, com a chegada da versão 5.0 do html, veio também alguns novos atributos que ajudam a</p><p>interatividade com o usuário e a praticidade na implementação, vamos conhecer os principais.</p><p>Módulo: Desenvolvimento Front-end</p><p>38</p><p>PLACEHOLDER – Este atributo mostra uma “dica” de como o campo dever ser preenchido, na versão</p><p>anterior só era possível com auxílio de scripts (JavaScript ou jQuery). Essa “dica” aparece no campo até</p><p>que o usuário começa a digitar algo. As informações do placeholder ficam visíveis somente enquanto o</p><p>campo está vazio, e não influencia no valor do campo em si.</p><p>Exemplo de código:</p><p>No navegador:</p><p>REQUIRED – Este atributo quando presente auxilia na validação do campo, o formulário não será</p><p>“submetido/enviado” caso o campo esteja vazio. Veja o exemplo do código:</p><p>No navegador:</p><p>AUTOFOCUS – Esse atributo é possível implementa-lo somente em um campo do formulário, pois</p><p>sempre que o navegador carregar a página onde está o formulário o campo terá o foco, sendo assim o</p><p>cursor aparecerá nesse campo predefinidamente. Este atributo garante que ao carregar a página do</p><p>formulário, sempre seremos direcionados para o mesmo campo.</p><p>Exemplo do código:</p><p>Módulo: Desenvolvimento Front-end</p><p>39</p><p>Devemos colocar o atributo no campo que terá o foco toda vez que a página será carregada, pode</p><p>– se colocar em qualquer campo em específico, só devemos lembrar que esse atributo pode ser usado</p><p>somente em um campo do formulário.</p><p>Veja no navegador o resultado do</p><p>código:</p><p>MAXLENGTH – Esse atributo permite a limitação da quantidade máxima de caracteres que podem ser</p><p>inseridos na tag , ideal para limitar campos com o type=”text”. Vamos ver o código como</p><p>exemplo.</p><p>Esse atributo, em particular, não é possível visualizar em imagem, pois não mostra nada referente</p><p>ao limite determinado no campo, é possível a visualização comente implementando na página e</p><p>visualizando que o campo não permite mais caracteres que o estipulado no código.</p><p>AUTOCOMPLETE - Em geral por padrão, os navegadores oferecem a função de autocomplete em</p><p>formulários, porém em alguns momentos seja necessário desabilitar esta função, por exemplo, quando</p><p>precisamos confirmar o endereço de um e-mail, login ou senha.</p><p>Exemplo do código:</p><p>Módulo: Desenvolvimento Front-end</p><p>40</p><p>Esses são os principais atributos utilizados na tag , claro que temos muitos mais,</p><p>recomendo que baixe da internet a documentação do HTML 5.0 para visualizar todas as tags na nova</p><p>versão, baixe do site:</p><p>Vamos aprender sobre outras tags também bastante utilizadas nos formulários:</p><p>SELECT – Essa tag utilizamos quando desejamos criar uma estrutura no modelo “drop-down”, que</p><p>mostrar pro usuário uma série de opções selecionáveis. Dependendo dos parâmetros implantados no</p><p>código, os usuários poderão selecionar uma ou mais opções.</p><p>Exemplo do código:</p><p>Podemos notar que o modo no qual escrevemos essa tag é diferente, sendo aberto a tag com</p><p>e após seu término fechando – a com , onde todas as opções são usadas com ao</p><p>atributo ... .Vamos ver no navegador como será o resultado:</p><p>TEXTAREA – Diferente da tag , que permite o usuário fornecer apenas uma linha de dados, esta</p><p>tag permite que seja fornecido uma quantidade de informações muito superior. Permitindo a inserção de</p><p>texto de múltiplas linhas, sendo muito útil para armazenar mensagens mais longas ou trechos de textos.</p><p>Pode ser inserido 2 atributos para determinar o número máximo de linhas e colunas dentro da área de</p><p>texto, o atributo rows é usado para limitar o número de linhas, e o atributo cols a quantidade de colunas.</p><p>Exemplo do código:</p><p>Módulo: Desenvolvimento Front-end</p><p>41</p><p>No navegador podemos</p><p>visualizar da seguinte</p><p>forma:</p><p>BUTTON – É possível adicionar botões aos formulários de duas maneiras, primeiro é usando a tag</p><p>e segundo é usando a tag . Os botões no formulário são de extrema importância, pois</p><p>são</p><p>através deles que a maioria das interações são acionadas. Uma das principais funções é invocar o</p><p>método que realiza o envio/submissão dos dados do formulário para um servidor ou página em PHP.</p><p>Essa tag tem o modo de utilização sendo aberta com e fechada com . Vamos ver um</p><p>exemplo do código:</p><p>Assim como a tag , a tag possui uma série de atributos importantes para</p><p>diversas utilizações. É importante conhecermos os mais usados para deixar nossos formulários mais</p><p>funcionais e práticos. Vamos conhecer os principais atributos da tag :</p><p>TYPE – Determina o tipo do botão, ele aceita alguns valores como; (button), para botão no formato</p><p>padrão, (reset), para um botão com a finalidade de resetar os campos preenchidos para um valor padrão,</p><p>e (submit), para criar um botão com a função de enviar os dados do formulário.</p><p>NAME – É usado para nomear o botão.</p><p>VALUE – Usamos o value para definir o nome/valor que aparece no botão.</p><p>FORMACTION - Define a URL onde os dados submetidos serão processados.</p><p>AUTOFOCUS – Determina que o botão deve receber o foco sempre quando a página for carregada.</p><p>DISABLED – Faz com que o botão seja desabilitado e não responda aos eventos, como por exemplo ao</p><p>click ou passar do mouse.</p><p>FORMMETHOD – Especifica como será realizada a submissão do formulário, seja no método GET ou</p><p>POST.</p><p>FORMNOVALIDATE – Determina que o formulário seja submetido/enviado sem ser validado, esse</p><p>atributo só deve ser usado nos botões tipo submit.</p><p>Objetos e Iframes</p><p>Módulo: Desenvolvimento Front-end</p><p>42</p><p>Novas tags adicionadas como a e a vieram para ajudar na implementação e</p><p>uso do html, e deixar mais leves a prática de adicionar objetos multimidia na página, vamos conhecer</p><p>essas tags com mais detalhes:</p><p>... - Esta tag é utilizada para incorporar tipos de mídias adicionais à página.</p><p>Podendo ser áudio, video, documento em pdf, entre outros. Com alguns atributos importantes para a</p><p>utilização como width (largura) e height (altura) para ajustar as dimensões onde o objeto será adicionado</p><p>e o type que determina o tipo do conteúdo exibido.</p><p>... - Essa tag é uma espécie de bloco de conteúdo em linha, que é utilizado como um</p><p>contêiner flexível para arquivos de mídia. Ele tem a posição flutuante dentro da página, significando que</p><p>é colocado relativo à outros itens da página. Conheça alguns atributos da tag iframe.</p><p>NAME – Determina o nome do frame.</p><p>SRC – A fonte URL/caminho do objeto multimidia para ser inserido dento do iframe.</p><p>SRCDOC – Insere um conteúdo HTML para ser mostrado dentro do iframe.</p><p>WIDTH – Determina a largura do iframe.</p><p>HEIGHT – Determina a altura do iframe.</p><p>- Serve para customizar o iframe. Incluindo parâmetros adicionais para ir junto com o</p><p>conteúdo.</p><p>... - É usado para incorporar na página objetos externos, como plugins (flash player</p><p>entre outros).</p><p>Responda:</p><p>1) O que é um formulário HTML?</p><p>2) Qual a principal diferença entre um formulário em HTML e um documento simples HTML?</p><p>3) Para a tag podem ser atribuídos o atributo ___________ (atributo onde define o local através</p><p>da url) e o _______________ (atributo que define o método HTTP).</p><p>4) Qual a diferença entre os métodos de um formulário HTML?</p><p>5) Qual a tag usada para usada para adicionar uma área de texto no formulário?</p><p>6) Para inserir um botão no formulário eu uso a tag ___________ ou a tag __________.</p><p>7) A tag me retorna qual valor?</p><p>8) Qual a função da tag no código em HTML.</p><p>9) Qual tag utilizo para inserir um campo de texto?</p><p>10) Qual o uso da tag ?</p><p>Desafio</p><p>Faça um formulário de contato, com os campos nome, e-mail comentários e botão enviar.</p><p>Módulo: Desenvolvimento Front-end</p><p>43</p><p>Tema 6: CSS (Cascating Styles Sheets – Folhas de Estilo em Cascata)</p><p>Figura 14: CSS – folhas de estilo em cascatas – Fonte: creativebloq</p><p>Oque São CSS</p><p>A CSS (Folhas de Estilo em Cascata) é uma linguagem usada para estilizar documentos de forma</p><p>leve e elegante, ela possibilita determinar o comportamento de um determinado documento em telas de</p><p>diferentes dispositivos. Ela é altamente compatível com o HTML, fazendo parte de praticamente toas as</p><p>páginas da web, fazemos o uso das css para estilizar os documentos HTML, visando sempre a rapidez e</p><p>eficácia na visualização dos elementos. As CSS permitem aplicar estilos de modo seletivo em elementos</p><p>de documentos HTML.</p><p>Por exemplo, para selecionar todas as tags (elementos) título de uma página e fazer qualquer tipo</p><p>de alteração e estilização, com as CSS não há necessidade de modificar elemento individualmente (como</p><p>era feito antigamente), posso simplesmente determinar no código CSS que os títulos terão um</p><p>determinado comportamento, e a alteração é feita em todos. Para que a página em HTML possa fazer</p><p>uso dos estilos em CSS, é necessário inserir na tag um link para a página em CSS onde estão</p><p>configurados os estilos. Veja no exemplo:</p><p>Podemos notar na linha 3 da imagem acima, indicando a inserção da página estilo.css no atributo</p><p>href, fazendo assim o link para que essa página seja usada esses estilos. O link é uma tag utilizada para</p><p>indicar ao html que uma página externa será adicionada, nesse caso usamos o essa tag indicando que esse link é relativo às folhas de estilos do tipo (type) text/css. E por último</p><p>fazemos o uso do href=” nome_da_pagina.css”, para indicar o local da página do estilo CSS.</p><p>Vamos ver um exemplo simples do uso do html na tag do html:</p><p>Módulo: Desenvolvimento Front-end</p><p>44</p><p>Podemos notar nesse exemplo onde o elemento foi configurado para que tenha a cor</p><p>blue(azul) em todos os elementos que a página está linkada. Toda estrutura é chamada de conjunto de</p><p>regras (em geral usamos o termo “regra”, por ser mais curto). Vamos conhecer a anatomia do conjunto</p><p>de regras do CSS.</p><p>SELETOR (SELECTOR) – O nome do elemento (tag) em HTML no começo do conjunto de regras. Ele é</p><p>responsável por selecionar o(s) elemento(s) a serem aplicados os estilos (nesse caso, os elementos ).</p><p>Para dar estilo a um outro elemento, é só mudar o seletor.</p><p>DECLARAÇÃO (DECLARATION) – Uma regra simples como color: red; especifica quais das</p><p>propriedades do elemento deseja estilizar. Nesse caso irá mudar a cor do elemento para vermelho.</p><p>PROPRIEDADES (PROPERTY) – Forma pela qual usamos para estilizar um elemento em HTML. Nesse</p><p>caso, color é uma propriedade dos elementos . Em CSS, podemos escolher quais propriedades</p><p>queremos afetar com sua regra.</p><p>VALOR DA PROPRIEDADE (PROPERTY VALUE) – Com o valor da propriedade podemos escolher</p><p>uma, dentre muitas aparências possíveis para uma determinada propriedade ( cada propriedade em</p><p>particular, possui inúmeros valores de distintos).</p><p>Figura 15: Sintaxe do CSS – Fonte: guilhermemuller</p><p>Na imagem acima nota-se a estrutura do conjunto de regras que se faz necessário para a</p><p>aplicação do CSS, temos primeiro que indicar o seletor (nesse caso o elemento ), para definir as</p><p>propriedades desse seletor sempre devemos definir a propriedade entre chaves ( { } ) , depois a</p><p>declaração da propriedade seguida de dois pontos ( : ), e atribuindo o valor da propriedade, finalizando</p><p>a linha de cada declaração com o ponto e vírgula ( ; ). Devemos lembrar que essa regra deve ser usada</p><p>em todos os elementos que serão estilizados com o CSS, mudando algumas definições pontualmente.</p><p>Em casos que é necessário a estilização de mais de uma propriedade, é só definir na linha de baixo uma</p><p>nova propriedade, declarando o valor da mesma. Veja o exemplo abaixo:</p><p>Podemos perceber que definimos o estilo do elemento com o uso de três propriedades</p><p>diferentes.</p><p>Módulo: Desenvolvimento Front-end</p><p>45</p><p>Nesse exemplo</p><p>acima, podemos notar que foram inseridos no CSS três elementos, o elemento</p><p>HTML, onde é aplicado em todo o documento HTML, o elemento p e o elemento h1. Podemos fazer</p><p>diversas alterações deixando nossas páginas muito mais atrativas visualmente com o CSS.É possível</p><p>também definir um mesmo conjunto de regras para múltiplos seletores, vamos ver um exemplo:</p><p>Na imagem acima definimos três seletores com o mesmo conjunto de regras, ou seja, mesma</p><p>propriedade e valor para os três, apenas separando-os com uma vírgula ( , ). Nesse exemplo</p><p>determinamos que os elementos , e , serão apresentados na página em vermelho.</p><p>O CSS vem evoluindo em paralelo com o HTML, por isso é importante saber suas versões e como</p><p>contribuem para nosso uso hoje em dia, o canal código fonte explica essa história com detalhes, veja</p><p>esse video e entenda um pouco mais dessa linguagem “mágica” de estilos.</p><p>Diferentes Tipos de Seletores</p><p>Existem diversos tipos de seletores diferentes, vamos conhecer os seletores de elementos. Que</p><p>selecionam todos os elementos de um determinado tipo nos documentos HTML.</p><p>Porém é preciso fazer seleções mais especificas, veja alguns dos tipos mais comuns de seletores.</p><p>Módulo: Desenvolvimento Front-end</p><p>46</p><p>Fontes e Textos</p><p>No CSS podemos vincular fontes em diferentes formas, uma delas é um vínculo online de fonte,</p><p>nesse caso usando o google fonts podemos inserir uma ou mais famílias de fontes com esse método,</p><p>vamos ver no código:</p><p>Nota-se no código acima que vinculamos uma folha de estilo que baixa a família de fontes Open</p><p>Sans junto com a página web, permitindo que seja definido seus elementos HTML usando a própria folha</p><p>de estilos. No CSS é possível estilizar várias propriedades de um mesmo elemento de texto, vamos</p><p>conhecer agora esses elementos:</p><p>Módulo: Desenvolvimento Front-end</p><p>47</p><p>Na tabela acima estão as possibilidades que podemos definir os estilos das fontes, importante que</p><p>na hora da prática você faça testes para descobri qual melhor estilo para seu documento. A seguir vamos</p><p>ver a tabela de propriedades de texto:</p><p>PROPRIEDADE DE</p><p>TEXTO</p><p>VALOR DA PROPRIEDADE</p><p>direction ltr | rtl | inherit</p><p>hanging-punctuaction None | [ start | end | adjancent ]</p><p>letter-spacing normal | length (%)</p><p>punctuation-trim None | [ start | end | adjancent ]</p><p>text-align Start | end | left | right | center | justify</p><p>text-align-last Start | end | left | right | center | justify</p><p>text-decoration none | underline | overline | line-through | blink</p><p>text-emphasis none | [ accent | dot | circle | disc] [ before | after ]</p><p>text-indent Length (%)</p><p>text-justify Auto | inter-word | interideograph | inter-cluster | distribute | kashida |</p><p>Tibetan</p><p>text-outline None | color | length</p><p>text-shadow None | color | length</p><p>text-transform None | capitalize | uppercase | lowercase</p><p>text-wrap Normal | unrestricted | none | suppres</p><p>unicode-bidi Normal | embed | bidioverride</p><p>white-space Normal | pre | nowrap | prewap | pre-line</p><p>white-space-collapse Preserve | collapse | preserve-breaks | discard</p><p>word-break Normal | keep-all | loose | break-strict | breal-all</p><p>word-spacing Normal | length (%)</p><p>word-wrap Normal | break-word</p><p>Na tabela acima é mostrado a propriedade de texto com seus respectivos valores, dessa forma é</p><p>possível entender que cada propriedade tem um valor especifico com uma ação especifica. Não é</p><p>necessário que saiba todas, o importante é usa-las de acordo achar melhor em sua folha de estilo, por</p><p>PROPRIEDADE FONTE VALOR DA PROPRIEDADE</p><p>Font font-style | font-variant | font-weight | font-size | font-family | caption</p><p>icon | menu | message-box | smallcaption | status-bar</p><p>Font-size xx-small | x-small | small | medium | large | x-large | xx-large | smaller</p><p>larger | inherit | length (%)</p><p>Font-size-adjust None | inherit | number (%)</p><p>Font-stretch normal | wider | narrower | ultra-condensed | extracondensed |</p><p>condensed | semi-condensed | semiexpanded | expanded | extra-</p><p>expanded | ultraexpanded | inherit</p><p>Font-style Normal | italic | oblique | inherit</p><p>Font-variant Normal | small-caps | inherit</p><p>Font-weight Normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 |</p><p>800 | 900 | inherit</p><p>Font-family Family-name | generic-family | inherit</p><p>Módulo: Desenvolvimento Front-end</p><p>48</p><p>isso é recomendado que faça testes com cada um desses valores de cada propriedade, assim é possível</p><p>visualizar o efeito de cada uma delas.</p><p>Desenvolvimento e Aplicação</p><p>Vamos começar a utilizar o CSS na prática para fixar melhor esse conjunto de regras e seu modo</p><p>de aplicação.</p><p>HTML:</p><p>CSS:</p><p>Alterando o background da página:</p><p>Agora para o elemento . Há algumas declarações aqui, então vamos passar por elas uma a uma:</p><p>width: 600px; — Isso força o corpo a ter 600 pixels de largura.</p><p>margin: 0 auto; — Quando você define dois valores em uma propriedade como margin ou padding, o</p><p>primeiro valor afeta a parte superior do elemento e a parte inferior (tornando-os 0 nesse caso), e no</p><p>segundo valor os lados esquerdo e direito (aqui, auto é um valor especial que divide o espaço horizontal</p><p>uniformemente entre esquerda e direita). Você também pode utilizar um, três ou quatro valores, como</p><p>documentado aqui.</p><p>background-color; — Como antes, isso define a cor de fundo do elemento.</p><p>padding: 0 20px 20px 20px; — Temos quatro valores definidos no padding, para criar um pouco de</p><p>espaço em torno do nosso conteúdo. Dessa vez, estamos definindo sem padding na parte superior do</p><p>corpo, e 20 pixels no lado esquerdo, na parte inferior e no lado direito. Os valores definem a parte superior,</p><p>o lado direito, a parte inferior e o lado esquerdo, nessa ordem. Como com a margin, você também pode</p><p>usar um, dois, ou três valores.</p><p>Módulo: Desenvolvimento Front-end</p><p>49</p><p>border: 3px solid black; — Isso simplesmente define uma borda preta sólida de 3 pixels de largura em</p><p>todos os lados do corpo.</p><p>Margin: Definimos o margin do h1 em 0, para tirar os espaços da margem do texto.</p><p>Padding: O padding no texto é importante para espaçar dos outros elementos da página.</p><p>Color: Definimos a cor do texto.</p><p>Text-shadow – Uma propriedade bastante interessante que usaremos aqui é o text-shadow, que aplica</p><p>uma sombra ao conteúdo de texto do elemento. Seus quatro valores são os seguintes:</p><p>• O primeiro valor em pixel define o deslocamento horizontal da sombra do texto — até onde</p><p>ele se move: um valor negativo deve movê-la para a esquerda.</p><p>• O segundo valor em pixel define o deslocamento vertical da sombra do texto — o quanto</p><p>ela se move para baixo, neste exemplo; um valor negativo deve movê-la para cima.</p><p>• O terceiro valor em pixel define o raio de desfoque da sombra — um valor maior significará</p><p>uma sombra mais borrada.</p><p>• O quarto valor define a cor base da sombra.</p><p>Text-align: - Essa propriedade centraliza o texto.</p><p>Font-family: - Definimos uma família de fontes, ele funciona em ordem, nesse caso se a fonte Cambria</p><p>não estiver instalada no computador ou no servidor (caso o site já esteja hospedado), ele define a fonte</p><p>Georgia para uso, e assim sucessivamente.</p><p>Com essa propriedade centralizamos a imagem para melhorar a aparência. Nós poderíamos usar</p><p>novamente o truque margin: 0 auto que aprendemos anteriormente para o corpo, mas também</p><p>precisamos fazer outra coisa. O elemento é em nível de bloco, o que significa que ocupa espaço</p><p>na página e pode ter margens e outros valores de espaçamento aplicados a ele. Imagens, por outro lado,</p><p>são elementos em linha, o que significa que não podem ter margens. Então, para aplicar margens a uma</p><p>imagem, temos que dar o comportamento de nível de bloco a imagem usando display: block.</p><p>Módulo: Desenvolvimento Front-end</p><p>50</p><p>Nos parágrafos aqui definimos propriedades para melhor alocar o texto na página,</p>