Inglês Instrumental e Webdesign

Curso Profissionalizante em 4 Informática Avançada Imagens: @freepik INGLÊS INSTRUMENTAL E WEBDESIGN



CURSO PROFISSIONALIZANTE EM ADMINISTRAÇÃO Direção Geral: Gilson Lara EMPRESARIAL E INFORMÁTICA APLICADA Coordenação de Ensino: Felipe Meyer DISCIPLINA: INFORMÁTICA Texto e Pesquisa: Felipe Meyer MÓDULO: INGLÊS INSTRUMENTAL E WEBDESIGN Projeto Gráfico: Felipe Meyer 3ª Edição - 2022 Ilustrações: @Storyset CEDUTECH – Centro de Educação Tecnológica Capa: Felipe Meyer (Imagens: @Freepik) Centro de Educação Tecnológica 3

Sumário Inglês Instrumental 5 Introdução ao Desenvolvimento para a Web 10 Linguagens Web 13 Introdução ao HTML 17 Editores Web 22 Landing Pages 27 Content Management Systems 30 Post x Página 34 Domínio e Hospedagem 37 Wordpress 43 Usuários do Wordpress 54 Temas e Aparência 57 Plugins 66 WooCommerce 71 Produtos 80 Configuração de Formas de Pagamento e Entrega 84 Formulários para Captação de Leads 89 E-Mail Marketing 92 Otimização de Mecanismos de Buscas 97 Analytics 103 4 Inglês Instrumental e Webdesign

Inglês Instrumental Ser bilíngue é um dos requisitos essenciais para garantir um emprego em algumas empresas, como é o caso das multinacionais. No entanto, apenas o inglês utilizado para conversas casuais não é o suficiente. Isso porque o idioma estrangeiro é utilizado no cotidiano dos negócios, com todos os termos e expressões específicos de um ramo empresarial. Com o objetivo de instruir os profissionais ao inglês de negócios, surgiu, no Brasil dos anos 1970, o Inglês Instrumental. Inicialmente conhecido como English for Specific Purposes (ou ESP), o inglês instrumental nada mais é que os estudos de Inglês para Propósitos Específicos. Essa técnica consiste no aprendizado rápido e preciso do idioma estrangeiro com um objetivo profissional. Ou seja, o instrumental trabalha o vocabulário e pontos fundamentais de uma área específica de trabalho ou estudo. Focado mais no reading do que no speaking, com o propósito de compreender livros e artigos estrangeiros, o inglês instrumental é muito visado por profissionais que buscam melhorar os conhecimentos em áreas de trabalho como medicina, direito, tecnologia da informação, turismo, administração e finanças. O inglês instrumental se destaca por usar a leitura como base para o aprendizado em uma área específica. A meta é fazer com que a assimilação do conteúdo seja mais rápida, considerando o fato de que as palavras Centro de Educação Tecnológica 5

comuns na língua inglesa estão presentes na maioria dos Um exemplo disso é o que podemos praticar com frequência textos. ao pesquisarmos um assunto no Google: em vez de digitar a dúvida completa no buscador, utilizamos palavras-chave sobre Para trabalhar a habilidade leitura, existem três técnicas muito o assunto. A partir disso, a plataforma destaca e prioriza nas populares no inglês instrumental, o Skimming, o Scanning, primeiras posições os conteúdos que mais podem se relacionar e o Prediction. Essas estratégias de leitura são aplicadas com sua busca. para ajudar a traduzir textos mais rapidamente e identificar informações. A mesma lógica se aplica ao pesquisarmos um capítulo específico de um livro no sumário e, por meio das palavras- Skimming chave encontradas, irmos até um assunto. Ou, ainda, quando procuramos a tradução de palavras em um dicionário, ou até “Skim” em inglês é “deslizar à superfície”, “passar os olhos mesmo a folheação de livros e revistas. Assim, o skimming é por”. O Skimming consiste em observar o texto a fim de uma técnica que contribui para a compreensão da organização detectar o assunto geral do mesmo. Para aplicar a estratégia é do texto, do vocabulário adotado e de qualquer outra necessário prestar atenção ao layout do texto: título, subtítulo, interpretação que possa ser necessária. primeiras linhas ou resumo, últimas linhas do texto ou de cada parágrafo e informações visuais, porém sem se preocupar com Scanning os detalhes. Ou seja, uma lida superficial do texto. “Scan” em Inglês quer dizer “examinar”, “sondar”, “explorar”. Utilizar esta técnica significa que não precisamos ler cada No Scanning o leitor corre os olhos pelo texto em busca de sentença, mas sim passarmos os olhos por sobre o texto. Às uma informação específica. Essa estratégia não exige uma vezes não é sequer necessário ler o texto em detalhes, como leitura completa do texto e nem entra em detalhes do mesmo, nas tirinhas ou charges. sendo muito utilizada na leitura de dicionários e índices de livros e artigos. O Scanning também é uma estratégia que Busca-se nessa estratégia detectar o sentido geral do texto identifica palavras-chave na interpretação de textos e pode ser por meio de dicas como cognatos, falsos cognatos, palavras bem utilizada em provas e testes de proficiência. conhecidas, estrangeirismos e termos destacados. Nesse sentido, o conhecimento prévio da língua inglesa é muito Exemplos típicos são o uso do dicionário para obter informação importante para a execução dessa prática, mas não é sobre o significado de palavras ou a utilização do índice de um obrigatório. livro para encontrar um artigo de interesse. Nesses casos, a 6 Inglês Instrumental e Webdesign

técnica foca nas informações mais importantes do texto, e etc. Funcionam como uma tempestade de palavras. Em não nas palavras-chave. O scanning possibilita uma leitura qualquer assunto abordado no texto, é fundamental que mais rápida e objetiva, que pode responder a determinados você perceba alguns vocábulos que estão relacionados questionados sem a necessidade de que todo o texto seja lido entre si, a fim de que você possa compreender a ou traduzido para o português. mensagem com mais rapidez. • Contexto linguístico: pistas e marcas gramaticais. Prediction • Linguagem não verbal: gravuras, gráficos, tabelas, números, etc. A Prediction, ou “predição”, é uma atividade de pré-leitura na qual se é levado a deduzir o conteúdo de um texto. Por Cognatos exemplo, ao ver uma foto ou uma manchete em um site, pode- se prever qual o assunto da matéria. Com isso, o leitor será Na língua inglesa, muitas palavras compartilham com a língua estimulado a ler, ou não. portuguesa a mesma raiz, normalmente latina ou grega. São os chamados cognatos. Cognatos são palavras que têm, Isso só é possível porque quem escreve o faz de maneira etimologicamente, uma origem comum. O reconhecimento organizada, porque as pessoas pensam de maneira semelhante de cognatos é um item muito importante para a compreensão e porque alguns tipos de textos possuem estruturas previsíveis. de um texto em inglês, já que normalmente representam pelo Quanto mais experiente for o leitor, maior será sua capacidade menos 20 a 25% de todas as palavras de um texto. em prever. As palavras cognatas podem ser subdivididas em: A predição pode ser feita através de elementos como: • Idênticas: possuem exatamente a mesma grafia que o • Conhecimento prévio sobre o tema: também conhecido português (apesar disso, a pronúncia é diferente). Ex: como background knowledge, ou “bagagem cultural”. chocolate, crime, virus, radio, hotel, social, taxi, hospital, Se você teve algum contato com o tema do texto, com etc. certeza terá mais facilidade na sua leitura. Quanto mais cultura geral tiver o leitor, mais fácil será a predição. Para • Semelhantes: possuem uma grafia bem parecida com o isso, o melhor remédio é o hábito da leitura. português, sendo identificadas facilmente, quase que instantaneamente. Ex: telephone, apartment, industry, • Contexto semântico: palavras que têm ideias relacionadas, violence, calm, car, etc. como, por exemplo, escola, livro, aluno, cadeira, professora • Vagamente parecidas: possuem uma semelhança menor Centro de Educação Tecnológica 7

em relação à grafia, mas, com algum esforço, podem ser Reconhecer as marcas tipográficas representa um grande identificadas. Ex: activity, frequently, drug, responsible, auxílio à leitura. O aspecto visual, as ilustrações, gráficos, computer, etc. tabelas, o tipo de letra usado, letras maiúsculas, palavras em negrito ou itálico, as aspas, os números, uma pontuação Estrangeirismos específica, etc., tudo isso pode nos dar dicas importantes para ajudar a descobrir mais sobre o conteúdo de um texto. O estrangeirismo é o emprego de palavras oriundas de outros idiomas e são comuns em nossa língua portuguesa. Alguns Grupos nominais desses termos ficam restritos à linguagem oral, outros acabam sendo devidamente apropriados pela língua escrita e nem São a combinação de substantivo e adjetivo (exemplos: percebemos que se trata de empréstimos linguísticos. carro novo, comunicação lógica, frase comum, etc.). Saber reconhecer os grupos nomimais também ajuda no processo Há ainda algumas palavras presentes em nosso vocabulário de compreensão do texto. que são facilmente identificadas como empréstimos quando apresentadas em sua vestimenta estrangeira. Essas mesmas Linking words palavras podem passar por um processo de mascaramento que as deixa parecidas com a maneira como são pronunciadas Ao ler um texto em inglês você já teve a sensação de que as e também com palavras pertencentes ao nosso léxico. palavras estão de trás para frente? Isso se deve aos grupos nominais. São as conjunções, aquelas palavrinhas que Marcas Tipográficas ligam as orações (and, but, however, although, etc.) e são importantíssimas na leitura de um texto pois alinham as ideias Há inúmeras fontes de informações para o aluno de inglês apresentadas. instrumental. Além da simples análise ortográfica do que está impresso diante de nossos olhos, podemos usar outros Afixos elementos tão eficientes quanto as palavras necessárias para a comunicação: as marcas tipográficas. Algumas palavras que aparecem nos textos demandam um pouco mais de atenção para deduzi-las e reconhecê-las As marcas tipográficas são elementos que, no texto, transmitem durante a leitura. São as chamadas palavras derivadas, ou seja, informações nem sempre representadas por palavras. palavras que apresentam componentes denominados afixos 8 Inglês Instrumental e Webdesign

- podendo ser prefixos ou sufixos - anexados a um radical. O Falsos Cognatos conhecimento da formação das palavras é muito útil, e sem dúvida, extremamente importante para a compreensão do Os falsos cognatos são palavras de línguas diferentes que, texto, já que o reconhecimento das palavras com afixos evita apesar de apresentarem grafias e/ou pronúncias semelhantes, perda de tempo na consulta ao dicionário. possuem significados distintos. Eles são exatamente o oposto dos cognatos, palavras de mesma raiz e que, por isso, possuem Sufixos e prefixos podem ser acrescidos às palavras dando-lhes semelhanças ortográficas e mesmo significado em diferentes novos significados. idiomas. Os prefixos não alteram a classe gramatical da palavra, ou A palavra inglesa cigar, por exemplo, significa “charuto”. seja, se a palavra for um adjetivo, continua sendo um adjetivo No entanto, é habitualmente mal traduzida por “cigarro”, e assim por diante. Já os sufixos alteram a classe gramatical, palavra portuguesa que na verdade, em inglês, é traduzida podendo transformar, por exemplo, verbos em substantivos por cigarette. Apesar de cigar e “cigarro” possuírem a mesma ou adjetivos. raiz, os seus respectivos significados são diferentes. Outro exemplo no inglês é prejudice, que quer dizer “preconceito”, Contextual Reference e não prejuízo, como parece. Muitos outros erros de tradução acontecem devido às semelhanças entre grafias e/ou É normal existirem no texto elementos de referência que pronúncias desse tipo de palavras e por essa razão, os falsos são usados para evitar repetições e para ligar as sentenças, cognatos são também chamados de falsos amigos (false tornando a leitura mais compreensível e fluente. Esses friends, em inglês) e podem ser divididos em duas categorias elementos aparecem na forma de pronomes diversos: diferentes: os puros e os eventuais. • Pessoais: he, she, it, they, etc… • Puros: Os falsos cognatos puros são palavras que apre- • Demonstrativos: this, that, those, such… sentam significados completamente diferentes para cada • Relativos: who, whom, whose, that, which… idioma, apesar de parecerem graficamente entre si. • Adjetivos possessivos: his, her, our… • Eventuais: Já os falsos cognatos eventuais apresentam diversos significados, sendo que um deles pode ser se- melhante entre idiomas diferentes (tais palavras também podem ser conhecidas como polissêmicas). Centro de Educação Tecnológica 9

Introdução ao Desenvolvimento para a Web Inglês Instrumental e Webdesign O Web Design é uma área focada no desenvolvimento de interfaces digitais, como layout de sites e aplicativos para a web. Para isso, os web designers criam as páginas usando linguagens de marcação como, por exemplo, o HTML. Envolve trabalhos ligados ao layout e design de páginas online assim como produção de conteúdos. O processo de criação de site pode ser feito a partir de editores de código (como o bloco de notas ou o notepad++), de ferramentas do tipo WYSIWYG (onde se trabalha paralelamente com o código puro e a visualização final) ou por frameworks e CMS, que são plataformas de gerenciamento de conteúdo. Nesse caso, cabe ao webdesigner a tarefa de instalar e personalizar o framework de acordo com o que cada cliente quer. Há ainda a possibilidade de se utilizar criadores online de sites, mas este método é pouco recomendado para trabalhos profissionais, pois traz uma série de limitações quanto às funcionalidades e tende a passar a ideia de amadorismo. Elementos Essenciais do Webdesign • Responsividade: O termo Responsive Web Design foi cunhado em 2010 por Ethan Marcotte, em um artigo de seu blog A List a Part. Em sua definição, um site é considerado 10

responsivo quando se adéqua às necessidades do usuário. entendido em uma simples “passada de olhos”. Um site responsivo é aquele cuja disposição dos elementos • Tipografia: Algo que muitas pessoas negligenciam é a e o conteúdo se adaptam de acordo com o tamanho da tela do usuário. Isso significa que, independentemente importância da tipografia. Ou seja, o tipo de fonte que do dispositivo que utilizar, o layout daquele website você irá utilizar para escrever. Cada fonte transmite uma será carregado sem erros, mantendo a facilidade de se intenção diferente ao leitor. Algumas vão ser capazes de encontrar o que deseja, sempre com uma navegação passar um de seriedade maior do que outras. Outras, simples e intuitiva. Se o usuário acessar pelo celular, por todavia, tem a função de serem mais elegantes e talvez exemplo, os blocos de conteúdo são reposicionados para combine melhor com determinados assuntos. As fontes facilitar a leitura e os botões e fontes ficam maiores para web precisam ser legíveis e acessíveis a todos, não facilitar o clique, isso acontece para que usuário tenha a importa o meio de acesso. A otimização das fontes do melhor experiência de uso possível. seu site pode melhorar a legibilidade, a acessibilidade e • Escaneabilidade: Esse termo diz respeito à capacidade simplificar o uso. Portanto, é fundamental ter atenção de se ler alguma coisa com facilidade e, com isso, ser com esse aspecto. capaz de reter melhor as informações. É uma técnica de • Velocidade do carregamento: Diversas pesquisas já organização de conteúdo que visa tornar sua compreensão apontaram que um dos principais motivos para abandono mais simples, dinâmica e rápida. A escaneabilidade de de um site é a lentidão no carregamento. O ideal é que um conteúdo é importante porque ela está relacionada o seu usuário fique o maior tempo possível no site, para com fatores que, indiretamente, tornam o seu conteúdo que possa aprender mais sobre a sua empresa e acabe mais agradável não só para o seu público, mas para os tomando a decisão de compra ou conversão no site da algoritmos dos mecanismos de busca. Um texto bem empresa. Com a utilização do acesso mobile crescendo trabalhado em termos de escaneabilidade facilita a sua exponencialmente em todo o mundo, a questão se leitura dinâmica ao utilizar artifícios como listas, imagens, torna ainda mais latente. No Brasil, os serviços de negrito e evitar trechos muito longos. Se os textos de Internet móvel ainda não são os mais adequados para o um site parecem complicados, o usuário não vai pensar carregamento de páginas mais pesadas. De acordo com duas vezes antes de fechar a aba daquele endereço e próprio Google, maior motor de busca da atualidade, a procurar por um outro conteúdo que o satisfaça. Por isso, velocidade de carregamento é um dos 200 principais o bom redator busca criar textos que tenham a chamada fatores de ranqueamento. Então, além de prejudicar a “escaneabilidade” ou, em outras palavras, a adequação experiência do usuário, um site lento também prejudica do conteúdo para que seja simples o suficiente para ser seu posicionamento na página de resultados dos motores de busca. Centro de Educação Tecnológica 11

Além dos elementos acima, é importante que o webdesigner side. É o que fornece e garante todas as regras de negócio, considere alguns outros fatores quando estiver esboçando um acesso a banco de dados, segurança, escalabilidade e site: integridade dos dados. Esses desenvolvedores trabalham com linguagens como Java, C#, PHP, Python, Ruby ou até • Tendências atuais de design: é importante manter-se mesmo JavaScript. atualizado com as mais recentes de modo que o site não • Desenvolvedor Full Stack: Esse é um tipo de profissional pareça velho ou desatualizado. que pode entregar um projeto do início ao fim, sem precisar de ajuda de outro para criar uma parte do • Público alvo: o site deve refletir a audiência que o sistema. É um profissional mais valorizado no mercado, consumirá. especialmente se for habilidoso em front-end e back-end de forma semelhante, ou seja, não tende apenas para um • Principais funções do site: um profissional de web design dos lados. precisa estar ciente do propósito do site que está criando e precisa ter certeza de incluir os elementos necessários. Web Designer ou Web Developer? Além destes, o desenvolvimento para a Web comumente envolve outros dois tipos de profissionais: O Web Designer tem como propósito, além de projetar, também desenhar web sites, sistemas, aplicativos web e blogs. • Designer UX (User eXperience): Um componente Já um desenvolvedor web pode-se dizer que é o programador importante do webdesign é a criação de uma experiência propriamente dito – aquele que abraçará os conceitos criados perfeita para o usuário. O UX Designer leva em consideração pelo designer e os desenvolverá. aspectos como a facilidade de uso, percepção de valor do sistema, utilidade, eficiência na execução de tarefas e Os Web Developers podem ser categorizados em: demais características para propor a melhor solução a um determinado problema. • Desenvolvedor Front-end: front-end é todo o código da aplicação responsável pela apresentação do software • Designer UI (User Interface): UI Design é o meio pela (client-side). É exatamente o código do sistema que “roda” qual uma pessoa interage e controla um dispositivo, no navegador. Um desenvolvedor front-end, geralmente, software ou aplicativo. Esse controle pode ser feito por trabalha com linguagens como HTML, CSS e JavaScript, meio de botões, menus e qualquer elemento que forneça além de frameworks e bibliotecas. uma interação entre o dispositivo e o usuário. UX está relacionado com a experiência do usuário e com seus • Desenvolvedor Back-end: back-end é a parte do software sentimentos, já UI é a maneira como o usuário alcançará que roda no servidor, também conhecida como server- essa experiência. 12 Inglês Instrumental e Webdesign

Linguagens Web As linguagens de programação web são utilizadas especifica- mente para o desenvolvimentos das camadas de apresentação e de lógica de negócio de sites, portais e aplicações web em geral. Para a camada de apresentação, é essencial que seco- nheça principalmente HTML, CSS e ao menos o básico de Ja- vaScript. Para as linguagens de programação de lógica, as opções dis- poníveis no mercado são muitas e com isso fica muito difícil dominar todas as linguagens, por isso é importante, pelo me- nos a princípio, focar em alguma delas como PHP, ASP ou .NET, apesar de existirem várias outras. Cada linguagem possui suas próprias características e peculia- ridades, trazendo formas diferentes de se realizar determina- das ações - a forma como um problema pode ser resolvido em uma linguagem pode ser completamente diferente em outra linguagem. Por isso, estudar e entender bem como cada uma delas funciona faz com que o profissional consiga extrair ao máximo o potencial da linguagem que escolher para trabalhar. HTML Criado em 1991, por Tim Berners-Lee, na Suíça. Inicialmente, foi projetado para interligar instituições de pesquisa próximas Centro de Educação Tecnológica 13

e compartilhar documentos com facilidade. Não é uma lingua- CSS é usado em conjunto com o HTML para definir os estilos e gem de programação em si, mas sim uma linguagem de marca- o layout de documentos. Assim, enquanto o HTML serve para ção (hypertext markup language, ou “linguagem de marcação estruturar conteúdos, o CSS ajuda a formatá-los. de hipertexto”), ou seja, um conjunto de regras e códigos que definem como os elementos da página devem ser exibidos. Com o Cascading Style Sheets é possível criar animações com- plexas, criar efeitos com uso de parallax, que faz parecer que a Embora haja ferramentas que fazem todo o trabalho de estru- imagem de fundo tem uma profundidade diferente, criar sites turação das páginas em HTML, o profissional precisa enten- interativos e também jogos com HTML5 e CSS3. der como isso acontece, para poder melhorá-las, e corrigi-las, quando necessário. PHP CSS Numa explicação resumida, PHP é uma linguagem de progra- mação utilizada por programadores e desenvolvedores para O CSS foi desenvolvido pelo W3C (World Wide Web Consor- construir sites dinâmicos, extensões de integração de aplica- tium) em 1996, por uma razão bem simples: o HTML não foi ções e agilizar no desenvolvimento de um sistema. Uma das projetado para ter tags que ajudariam a formatar a página. suas grandes vantagens é ser uma linguagem muito simples Você deveria apenas escrever a marcação para o site. Depois para iniciantes. Além disso, é a linguagem de programação que o HTML se tornou padrão da internet, foi necessário in- web mais usada para implementação de funções dinâmicas e serir imagens, cores e design avançado. Como a versão antiga complexas em websites e aplicações web. não suportava isso, foram adicionadas novas tags. O PHP é, sem dúvida, uma das linguagens web com o melhor O problema veio com a necessidade de alterar, por exemplo, custo benefício: projetos que são desenvolvidos nessa lingua- a cor de um link: se ele estivesse em 300 páginas diferentes, o gem possuem diversas vantagens tais como o baixo valor no trabalho era um por um, tag por tag. Até que, em 1995, Håkon investimento da infraestrutura para a manutenção da aplica- Wium Lie e Bert Bos apresentaram a proposta do Cascading ção e a possibilidade de encontrar mão de obra qualificada Style Sheets (CSS). muito facilmente. A ideia era usar HTML para estruturar o site e deixar a tarefa Outra vantagem do PHP é que, apesar de ser extremamente de apresentação para o CSS — disposto no próprio HTML, de- simples para um iniciante, oferece muitos recursos avançados marcado por tags ou em um arquivo separado. Em resumo, o para um programador profissional. 14 Inglês Instrumental e Webdesign

O PHP é usado por mais de 78% dos sites que usam alguma • Python: Linguagem multiplataforma que permite desen- linguagem de programação do lado do servidor, sendo que a volver aplicações para celulares, desktop e web, entre ASP.NET tem o segundo lugar com pouco mais de 10% da quo- outros. Além disso, permite integrar diversos serviços e ta de mercado. sistemas de forma rápida e eficaz. JavaScript • C#: Principal linguagem de programação quando se fala em Microsoft, pode ser usada para criação desde servi- Grande parte das páginas web usa JavaScript. Criada para a ços e plataformas web a até mesmo dispositivos móveis, Netscape em meados de 1995, inicialmente chamava-se LiveS- como para Windows Phone, e no desenvolvimento de ga- cript. Logo, porém, a Sun Microsystems se interessou por ela e mes. entrou no seu desenvolvimento. Seu nome, então, foi mudado para JavaScript — por influência da Sun, criadora do Java. Bancos de Dados Ela é responsável pelos scripts que fazem certos comporta- Um banco de dados nada mais é do que uma coleção de dados mentos funcionarem nos sites, como quando se passa o mou- estruturados. Pense em uma selfie: você aperta o botão para se sobre um item de menu e várias opções são exibidas, por tirar uma foto de você mesmo. A foto é o dado, enquanto a exemplo. Ou seja, enquanto o HTML estrutura a página e o CSS galeria do seu celular onde a foto ficou armazenada é o banco a deixa “bonita”, o JavaScript a faz funcionar. de dados. É importante ter em mente que JavaScript é diferente de Java Bancos de dados são locais onde dados são armazenados e ge- — tanto no conceito quanto no uso. O JavaScript é uma lingua- renciados. A palavra “relacional” é utilizada quando os dados gem processada pelo navegador web (client-side) e o Java é armazenados estão organizados em tabelas. Cada tabela está entendido e processado pelo servidor (server-side). relacionada de alguma maneira. Outras Linguagens MySQL • Java: Linguagem orientada a objetos e a mais usada para O MySQL é um sistema gerenciador de banco de dados re- aplicativos de dispositivos móveis Android. Também é lacional de código aberto. O serviço utiliza a linguagem SQL muito popular no desenvolvimento web. (Structure Query Language – “Linguagem de Consulta Estrutu- rada”), que é a linguagem mais popular para inserir, acessar e gerenciar o conteúdo armazenado num banco de dados. Centro de Educação Tecnológica 15

O MySQL é um dos bancos de dados relacionais mais utilizados Além disso, o MySQL é fácil de usar e compatível com diversos no mercado, principalmente em sites criados em PHP. Também sistemas operacionais, garantindo seu lugar como o sistema é uma tecnologia open source, permitindo o desenvolvimen- de gerenciamento de banco de dados mais popular do mundo. to personalizado para as necessidades da empresa e do site. {} </> 16 Inglês Instrumental e Webdesign

Introdução ao HTML O acrônico HTML significa em inglês: HyperText Markup Language. Em português: “Linguagem de Marcação de Hipertexto”. Por trás das palavras Hipertexto e Marcação há muita história e elas guardam a real essência da função do HTML. O HTML foi inventado por Tim Berners-Lee, um físico do centro de pesquisas CERN, na Suíça. Ele surgiu com a ideia de um sistema de hipertexto na internet. Hipertexto significa um texto que possui referências (links) para outros textos que podem ser acessados imediatamente. Berners-Lee publicou a primeira versão do HTML em 1991, consistindo em 18 tags. Desde então cada versão do HTML vem com novas tags e atributos (modificadores de tags). Atualmente existem 140 tags HTML, mesmo que algumas delas já estejam obsoletas (ou seja, não são mais suportadas pelos navegadores). Devido à rápida ascensão e popularidade, o HTML é agora considerado um padrão oficial da web. As especificações do HTML são mantidas e desenvolvidas pelo Consórcio World Wide Web (W3C). O maior upgrade da linguagem foi o lançamento do HTML5 em 2014, que introduziu diversos novos recursos. Um dos mais aguardados foi a incorporação nativa de vídeos e arquivos de áudios. Centro de Educação Tecnológica 17

Documentos HTML são arquivos com as extensões .html ou <!DOCTYPE html> .htm. Eles podem ser visualizados com qualquer navegador <html lang=”pt-br”> (como Google Chrome, Safari, Microsoft Edge ou Mozilla <head> Firefox). <meta charset=”UTF-8”/> O navegador faz a leitura do arquivo e renderiza seu conteúdo <title>Document</title> para a visualização dos usuários. Geralmente sites comuns </head> possuem diversas páginas HTML. Por exemplo: homepages, <body> páginas explicando o propósito do site, e páginas de contato <!-- Conteúdo --> teriam documentos HTML distintos. </body> </html> A função do HTML na programação web sofreu alterações ao longo dos anos e hoje essa linguagem deve ser utilizada Em seguida, clique em “Salvar como...” e renomeie o arquivo unicamente para estruturar o conteúdo das páginas. Não cabe para “index.html”. Você pode abrir este arquivo em qualquer a ela definir características visuais ou comportamentos, pois navegador, porém ele mostrará apenas uma página em branco, isso deve ser feito usando CSS e JavaScript. pois ainda não foi inserido qualquer conteúdo além do título. Elementos É possível compreender o documento HTML de uma maneira muito simples, através de uma divisão de blocos das tags Cada página HTML consiste em uma série de elementos, que essenciais, conforme a seguinte estrutura: podem ser consideradas os blocos de construção das páginas. Eles criam uma hierarquia que estrutura o conteúdo entre Definição do documento (doctype); seções, parágrafos, cabeçalhos e outros blocos de conteúdo. A Cabeçalho (head); maioria dos elementos HTML utilizam as sintaxes de abertura Corpo (body). e fechamento como <elemento> e </elemento>. • Doctype: Sempre deve existir o doctype, representado Abra o Bloco de Notas do Windows e digite os códigos a seguir, pelo código <!DOCTYPE html>. O doctype não é uma exatamente como são mostrados. tag HTML, mas sim uma instrução para o navegador e outros programas que podem ler seu site, de que o código 18 Inglês Instrumental e Webdesign

encontrado ali é um código HTML. Assim, eles sabem o são direcionados para cada Tag, através de especificação). Os que fazer para mostrar seu site da melhor forma possível. Atributos possuem nome e um valor. Existem Atributos que O doctype é obrigatório e deve constar sempre na você vai usar praticamente sempre e existem outros que serão primeira linha do seu documento. mais raros. • Head: Contém informações que não são transpostas visivelmente para o usuário/leitor do documento. São Elementos x Tags dados implícitos, de uso e controle do documento, vinculação com outros arquivos, aplicação de lógica de As Tags servem para marcar onde começam e terminam programação de scripts e metadados. Na prática, todo o os Elementos. Já os Elementos são uma parte conceitual/ conteúdo do cabeçalho fica delimitado entre a abertura e semântica que têm um começo e fim determinados. Parece fechamento da tag <head>. uma diferença boba, mas mantenha ela sempre em mente e • Body: Trata-se do documento em si, ou seja, a informação isso vai fazer toda a diferença no seu entendimento de HTML. legível para o usuário/leitor do documento. É todo e As principais partes de um elemento são: qualquer texto que se deseja apresentar, assim como toda e qualquer forma de mídia de saída (imagens, sons, • A tag de abertura: Nome do elemento envolvido por < miniaplicativos embutidos, conteúdo multimídia, etc). >. Isso demonstra onde o elemento começa, ou onde seu Além disso, toda a apresentação de entrada de dados efeito se inicia. (formulários) também se aplica nesta seção do documento. Na prática, o corpo do documento é delimitado pelo par • A tag de fechamento: Demonstra onde o elemento acaba. de tags <body> e </body>. Dentro do elemento body Esquecer de incluir uma tag de fechamento é um dos sua estrutura de página terá os elementos semânticos erros mais comuns de iniciantes e pode levar a resultados da construção da sua página, onde serão declarados e estranhos. identificados cabeçalhos, rodapé, conteúdo principal, etc. • O conteúdo: Esse é o conteúdo do elemento. Atributos • O elemento: A tag de abertura, a de fechamento, e o Atributos são informações que passamos na Tag para que conteúdo formam o elemento. ela se comporte da maneira esperada. Existem atributos globais (que funcionam em todas as Tags) e específicos (que Títulos Títulos são normalmente utilizados para identificar páginas e seções e possuem aparência diferenciada do restante do texto. Centro de Educação Tecnológica 19

No HTML há seis níveis de cabeçalhos/títulos que podem ser <p>Primeiro parágrafo do texto.</p> utilizados por meio das tags h1, h2, h3, h4, h5 e h6, sendo h1 o <p>Segundo parágrafo do texto.</p> maior/mais relevante e h6 o menor/menos relevante. <p>Terceiro parágrafo do texto.</p> Retorne ao documento criado no Bloco de Notas e apague a Imagens linha “<!-- Conteúdo -->”. No lugar dela, digite os códigos a seguir. A inserção de imagens em uma página HTML pode ser feita por meio da tag img, que recebe no atributo src o endereço <h1>Título de nível 1</h1> do arquivo a ser carregado. Além desse, outros dois atributos <h2>Título de nível 2</h2> importantes são o alt, que indica um texto alternativo que será <h3>Título de nível 3</h3> exibido caso o arquivo não possa ser carregado, e o title, que <h4>Título de nível 4</h4> indica o texto que aparecerá como “tooltip” ao passar o mouse <h5>Título de nível 5</h5> sobre a figura. <h6>Título de nível 6</h6> Para visualizar uma imagem no seu documento, retorne ao Agora salve seu documento e abra-o novamente no navegador, Bloco de Notas e insira: para visualizar os diferente níveis de títulos. <img src=”imagem” alt=”Texto alternativo” title=”Avatar” /> Parágrafos <img src=”arquivo_inexistente.jpg” alt=”Texto alternativo” title=”Outra figura”/> Parágrafos de texto são gerados na HTML por meio das tags <p> e </p>. Esse é um exemplo de tag cuja disposição na Antes de visualizar as mudanças, procure na web uma imagem tela se dá em forma de bloco, ou seja, um parágrafo é posto qualquer, copie o link da mesma e cole-o no lugar da palavra sempre abaixo do outro. “imagem” da primeira tag. Mantenha a segunda tag como está, para visualizar o que acontece quando uma imagem não Abra novamente o documento no Bloco de Notas e, abaixo é encontrada pelo navegador. Salve o documento e finalmente dos títulos, insira os códigos abaixo, salvando o documento carregue-o no navegador. em seguida. 20 Inglês Instrumental e Webdesign

Links • <b> e <Strong>: para negrito/texto forte; • <i> e <em>: para itálico/ênfase; Links são normalmente utilizados para direcionar o usuário • <sup> e <sub>: para sobrescrito e subscrito, para outras páginas, ou para outras partes da mesma página. Nos dois casos, utilizamos a tag <a>, que possui o atributo respectivamente; href, no qual indicamos o destino daquele link. • <ins> e <del>: para indicar trechos que foram incluídos ou <a href=”pagina2.html”>Página 2</a> removidos, respectivamente; • <small>: para textos menores que o padrão; <a href=”#paragrafo3”>Ir para o parágrafo 3</a> • <mark>: para texto destacado. <!--outros elementos--> <p id=“paragrafo3”>Parágrafo 3.</p> <p>Texto em negrito com <b>bold</b> e <strong>strong</strong>.</p> Formatação <p>Texto em itálico com <i>italics<i> e As tags de formatação de texto ajudam a destacar trechos da <em>emphasis</em>.</p> parte escrita da página, seja para fins de SEO ou por requisitos do conteúdo. Formatações como negrito e itálico podem ser <p>Texto ^sobrescrito e aplicadas com facilidade utilizando as várias tags disponíveis _subscrito.</p> para esse fim: <p>Texto <ins>inserido</ins> e <del>excluído</del>.</p> <p>Texto <small>pequeno</small> e <mark>destacado</mark>.</p> Centro de Educação Tecnológica 21

Editores Web Inglês Instrumental e Webdesign WYSIWYG WYSIWYG (lê-se “wiz-zi-wig”) é o acrônimo para What You See Is What You Get, que significa “o que você vê é o que você tem”. Esse tipo de editores fornece uma interface que mostra como o código é exibido em uma página da Web em funciona- mento. Usar editores WYSIWYG não requer nenhum conhe- cimento HTML. Claro que domínios profissionais demandam maior conhecimento e contar com profissionais faz diferença, mas para quem deseja manter um blog simples sem gastar muito (ou nada), conhecimentos em programação são desne- cessários. Um dos exemplos de editores WYSIWYG mais conhecidos, que quase todo mundo já teve contato ao menos uma vez na vida, são os editores de texto, planilhas e apresentações que inte- gram suítes de escritório, como o Microsoft Office. O modo de exibição “Layout de impressão” do Word, Excel e Power- Point exibe para o usuário exatamente como o documento, planilha ou apresentação que ele está editando serão impres- sos. Assim, ele pode editar as páginas da maneira que achar melhor, desde distribuir o texto de uma forma que ache mais adequada, a ajustar as margens ou trocar o formato da página 22

(dependendo do papel que será usado na impressão) e ver o como Microsoft Office, LibreOffice, Google Docs e editores de resultado em tempo real. texto rico (rich text) como WordPad e Evernote. A maioria dos editores de texto no site permite que você use a linguagem de A maioria dos aplicativos WYSIWYG lançados atualmente marcação ou WYSIWYG. Por exemplo, a caixa de postagem do são editores de sites. Os serviços de postagens em blogs, por WordPress permite que você alterne entre o editor “Visual”, exemplo, utilizam esse método para publicar um artigo. Pro- que oferece uma visualização direta do que você está escre- dutos como Blogger, WordPress, Medium, LiveJournal e outros vendo, e o editor “Texto”, que permite editar em HTML dire- foram importantes para permitir que cada usuário tivesse uma tamente. voz na internet e criasse o que desejasse, desde um diário pes- soal a blogs e sites sobre assuntos diversos, mais ou menos Muitas plataformas WYSIWYG oferecem aos usuários, ainda, profissionais, sem ter que conhecer nada de HTML ou lingua- modelos prontos para uso que eliminam as suposições para gens mais avançadas para isso. atrair a atenção do público. Se você precisa de um conjunto simples de páginas de entrada estáticas, uma arquitetura de A principal vantagem de um editor WYSIWYG, é claro, é exata- site complexa ou designs de e-mail envolventes, existem op- mente tornar todo o processo mais fácil para o usuário final. ções de modelo disponíveis para atender a quase todas as ne- Em vez de aprender a usar várias linguagens de marcação di- cessidades. Não há necessidade de contratar um designer de ferentes, esses editores permitem formatar, redimensionar e site para criar modelos personalizados para o seu negócio. adicionar multimídia às suas postagens com o clique de um botão. No entanto, corre-se o risco de ter um produto com o código “sujo”, o que pode interferir no desempenho do produto fi- É por isso que a maioria dos fóruns, construtores de sites e edi- nal. Essa “sujeira” acontece porque o aplicativo pode inserir tores mudaram amplamente para os sistemas WYSIWYG. Ou códigos desnecessários que não são visíveis no momento da seja, o usuário não precisa decorar códigos e, com isso, eco- criação. nomiza tempo no desenvolvimento do seu projeto. Isso é ideal para quem não possui muita experiência em programação e Existem ferramentas que permitem mesclar os dois métodos, precisa colocar um site no ar com baixo custo. como o DreamWeaver da Adobe. Dessa forma, o programador consegue criar sites com facilidade e, ainda por cima, conse- Grande parte dos editores de texto disponíveis comercialmen- gue revisar o código fonte para retirar os excessos que o sof- te são WYSIWYG. Isso inclui processadores de texto populares tware não é capaz de identificar sozinho. Centro de Educação Tecnológica 23

HTML Textual Editores de código são editores de texto com poderosos recur- sos integrados e funcionalidades especializadas para simplifi- Como o nome indica, os editores HTML textuais são baseados car e acelerar o processo de edição de código. Já um IDE, por em texto, sendo quase que o oposto dos editores WYSIWYG. outro lado, é um conjunto de ferramentas de desenvolvimento Você precisa ter conhecimento em HTML ao usar esses tipos de software projetadas para tornar a codificação mais fácil. Em de editores e não é possível ter uma visualização ao vivo do outras palavras, um IDE possui um editor de código, um de- site. purador, compilador e outros recursos importantes, tudo em uma única ferramenta. Esse tipo de editor oferece mais liberdade e mais opções per- sonalizadas. Usando um editor textual, você pode otimizar Ferramentas melhor as páginas da web para os mecanismos de pesquisa. Por exemplo, é possível criar uma página que siga as Diretrizes Existe uma infinidade de ferramentas no mercado para o de- de Acessibilidade ao Conteúdo da Web (WCAG), para que as senvolvimento de sites e aplicativos para a web, sejam edito- pessoas com deficiências possam visualizar sua página. res WYSIWYG, textuais ou IDEs. Escolher qual utilizar vai de- pender não só das funcionalidades oferecidas por cada um, IDE mas principalmente dos objetivos e conhecimentos prévios de cada desenvolvedor. Listamos a seguir alguns dos softwares IDE ou Integrated Development Environment (Ambiente de em maior evidência atualmente. Desenvolvimento Integrado) é um software que auxilia no de- senvolvimento de aplicações, muito utilizado por desenvolve- • Atom: Atom é um editor HTML textual gratuito e de códi- dores, com o objetivo de facilitar diversos processos (ligados go aberto, desenvolvido pela equipe do GitHub e lançado ao desenvolvimento), que combinam ferramentas comuns em em 2014. O objetivo é oferecer uma experiência superior uma única interface gráfica do usuário (GUI). ao editor, mantendo-o completamente livre. Além de fle- xibilidade para personalizar o software em si. Ele se apre- Para o desenvolvedor, é uma forma de criar aplicações de ma- senta como o editor de texto mais “hackeável” do século neira mais rápida, uma vez que estas IDEs auxiliam em todo XXI. Isso significa que os desenvolvedores podem contri- o processo de desenvolvimento de uma aplicação, provendo buir para editar, sugerir, alterar e compartilhar o código- diversos benefícios, como a análise de todo o código a ser es- -fonte do programa, além de criar seus próprios pacotes crito, identificação de bugs causados por um erro de digitação, para melhorar o Atom. autopreenchimento de trechos de códigos, etc. 24 Inglês Instrumental e Webdesign

• Notepad++: O Notepad++ foi desenvolvido para máqui- web design.”. O Brackets é um editor de códigos HTML, nas Windows e distribuído como software gratuito. Os CSS e JavaScript leve e limpo com ótimas funções de usuários do Linux também podem usá-lo via Wine. Seu apoio. Permite trabalhar simultaneamente com vários ar- repositório também está disponível no GitHub. Como em quivos, funções de seleção de cores, função de Preview da outros projetos da comunidade, plugins de terceiros são página e etc. É sem dúvida uma boa opção para o Note- suportados. O Notepad ++ diferencia-se pela sua simplici- pad++ e o Sublime Text. dade. Ele é super leve e existe até uma versão para celular. • CodeLobster: CodeLobster é um IDE portátil (ambiente de desenvolvimento integrado) que é criado principalmen- • Sublime Text: Sublime é um editor desenvolvido por uma te para linguagem de script PHP, mas também suporta companhia de Sydney, e se enquadra na categoria de fre- HTML, CSS e JavaScript. Ele possui recurso de highlight emium. Isso quer dizer que você pode usar o Sublime de de sintaxe e fornece dicas para tags, funções e seus pa- graça, mas você tem que comprar uma licença para usu- râmetros. É também um editor que lida facilmente com fruir dos recursos por completo. O Sublime oferece um arquivos que contêm um conteúdo misto. Além disso, suporte ótimo que garante que o programa seja constan- possui plugins integrados para frameworks populares e temente atualizado. Os usuários podem adicionar plugins CMS como CakePHP, CodeIgniter, Drupal, JQuery, Joomla, feito pela comunidade ou criar os seus próprios plugins. Smarty, Symfony, WordPress, Yii, Magento e outros. Em- bora a funcionalidade básica do Codelobster PHP Edition • Adobe Dreamweaver CC: Adobe Dreamweaver foi desen- seja gratuita, você precisará de um número de série para volvido e gerenciado pela gigante de tecnologia Adobe a versão profissional ou para que os plug-ins escolhidos Inc. É uma ferramenta premium, poderosa e versátil, ser- funcionem após o período de avaliação de 30 dias. Você vindo tanto para o desenvolvimento de back-end quan- pode obter o número de série gratuito após um registro to de front-end. Como um software de código fechado, rápido e simples no site. o Dreamweaver foi projetado para funcionar dentro do • Adobe XD: A interatividade é a principal característica ecossistema da Adobe. A Adobe também oferece supor- dessa ferramenta criada pela gigante empresa de sof- te, plugins e recursos para garantir que você codifique twares Adobe, responsável também pelos já conhecidos perfeitamente a qualquer momento. O Dreamweaver é Photoshop, InDesign, Illustrator, Premiere, Lightroom e um dos editores que suportam os tipos de editor textual e Dreamweaver. Antes da chegada do XD, o próprio Pho- WYSIWYG. Então, você decide se quer codificar com uma toshop era usado para a realização de mockups de websi- apresentação visual em tempo real ou seguir o caminho te e aplicativos. Como ele não estava fazendo o trabalho clássico. completo, a Adobe lançou o XD (o nome abrevia Experien- • Brackets: Segundo seus produtores, o Brackets é “Um edi- tor de textos moderno e de código aberto que entende Centro de Educação Tecnológica 25

ce Design). Com ele, designers conseguem trabalhar ade- balho. O Figma é gratuito para uso, mas apresenta versões quadamente o fluxo do projeto, o caminho que o usuário pagas para profissionais e empresas. No plano gratuito, percorre ao clicar nos botões dos apps ou nos links em não há limite de armazenamento em nuvem para os pro- um website. O Adobe XD está integrado ao Pacote Adobe jetos, o histórico dos últimos 30 dias é mantido e há o limi- Creative Cloud e permite aos profissionais de design or- te de uma equipe. A versão “Professional”, oferecida por ganizar todo o processo de criação, desde o projeto aos US$ 12 por mês para cada editor, permite compartilhar protótipos de sites e aplicativos para desktops e mobile. bibliotecas, histórico ilimitado e biblioteca compartilhável A principal funcionalidade da ferramenta Adobe XD é a entre equipes. Já a versão “Organization”, oferecida por criação de aplicativos mobile e para isso ele apresenta a US$ 45 ao mês por editor, é voltado para empresas e traz possibilidade de escolha de qual tela será a artboard, de recursos para centralizar equipes, compartilhar fontes, acordo com o projeto. O Adobe Experience Design permi- criar plugins particulares e outras opções. te ao designer criar versões responsivas para dispositivos móveis, prévia do desktop e gravar o projeto em formato Inglês Instrumental e Webdesign de vídeo, o que facilita a visualização em apresentações antes de exportar a versão final. • Figma: O Figma é uma ferramenta grátis muito utilizada pelos designers para a criação de interfaces. Tudo pode ser feito online, pelo navegador e, de forma colaborativa. A primeira versão do Figma foi lançada em 2015 com o propósito de funcionar como uma plataforma para traba- lho colaborativo de design. Por ser acessível e permitir que várias pessoas editem projetos em tempo real, tornou-se uma opção muito útil para situações de trabalho remoto: evita cenários como a perda de um arquivo final ou a falta de integração entre ideias de profissionais em grupo. Para começar a trabalhar com o Figma, é necessário criar um espaço para a sua equipe. Essa área concentrará todos os projetos realizados e possui uma biblioteca própria, em que é possível inserir paletas de cores, logos e outros ele- mentos gráficos que fazem parte da padronização do tra- 26

Landing Pages Landing Pages, ou “páginas de destino”, têm como foco principal a conversão dos visitantes. São páginas com poucos elementos e focadas em um CTA (“call to action”) principal, evitando distrações e garantindo o objetivo traçado. O termo tem origem no idioma inglês e pode ser traduzido como “página de aterrissagem”. No Marketing Digital, uma landing page é o primeiro espaço que um visitante acessa ao entrar em um site. Quando você clica em um anúncio, em uma campanha de e-mail marketing ou em banners, por exemplo, e é direcionado para uma página, que geralmente tem como objetivo atrair clientes ou consumidores, você foi encaminhado para uma landing page. É muito comum que nessa página de destino haja um formulário para gerar algum tipo de conversão — seja uma venda, clique, curtida, visualização, download, cadastro ou assinatura de newsletters, por exemplo. Diferentemente da página inicial de um site, que geralmente é mais genérica e abrangente, as landing pages são mais objetivas e criadas estrategicamente para despertar a curiosidade, criar interesse e provocar desejo no público-alvo, para que ele converta esses sentimentos ou necessidades em algum tipo de ação positiva, como nos exemplos que citamos acima. Centro de Educação Tecnológica 27

Independentemente do tipo, o único objetivo das landing devem transmitir de maneira clara e direta a proposta de valor pages é o de gerar conversões e é exatamente por isso que se da sua oferta, de forma que, quando um visitante chegar à diferenciam de outras páginas de um site. Para isso, a página página, ele pense: “que oferta interessante, talvez seja disso deve ser clara, precisa e organizada, oferecendo realmente que estou precisando, vou ler o restante da página”. aquilo que foi prometido, informado ou especificado em sua campanha estratégica inicial. Imagem Tipos de Landing Pages Use uma imagem que reflita a sua oferta. Evite generalismo ou imagens de bancos de imagens que já foram muito usadas, • Página de captura: Criada para capturar dados de contato pois isso pode atrapalhar a conversão. No caso de softwares de um lead (e-mail, nome e telefone, etc) permitindo a ou ofertas de produtos que possam ser mostradas de alguma criação de uma lista de leads. forma, opte por fazê-lo. Mostre telas do software e partes do webinar/eBook oferecido para transmitir credibilidade sobre • Página de confirmação pendente: Nos pede para a oferta. acessar a caixa de entrada de nosso e-mail para realizar a confirmação e conclusão do cadastro. Descrição da Oferta • Página de vendas: Apresenta um determinado serviço ou Em grande parte dos casos, uma página de conversão precisará produto em um modelo de oferta. de mais descrições sobre a oferta para conseguir vender bem a ideia, eliminar pontos de dúvidas e alinhar expectativas. • Página de obrigado: Serve para finalizar uma conversão. Pode envolver o download de outro material, a sugestão Nesses casos, costuma-se seguir algumas boas práticas: de leitura de um post ou até mesmo, a aquisição de um produto ou serviço. • Use bullet points; • Escreva fragmentos ou sentenças curtas, que sejam Título e Subtítulo possíveis de ler com facilidade; Um dado divulgado pelo Copyblogger, site referência em • Escolha de 3 a 5 itens mais importantes, sem usar blocos copywriting, diz que 8 em cada 10 pessoas que chegam a uma página só leem o cabeçalho. Somente 2 em cada 10 lerão o muito longos de texto; restante da página. Levando esse dado em consideração, • Destaque termos relevantes em negrito; percebemos que os principais elementos de uma página, de • Fale de benefícios, não de funcionalidades. fato, são o título e o subtítulo. Isso significa que esses elementos 28 Inglês Instrumental e Webdesign

• Em casos onde a oferta é complexa e precisa de mais • Baixe agora; explicações, você também pode usar outros elementos, • Acesse o conteúdo completo; como vídeos explicativos ou uma prévia do material • Receba o material; usando uma apresentação incorporada. • Agende sua consultoria... Formulário É fundamental que o CTA seja claro, objetivo e que ajude o visitante a entender qual ação ele está realizando, e ao mesmo O formulário é onde acontecerá a conversão. Deve existir tempo o convite para realizá-la. um balanço entre algumas variáveis, tais como o número de informações requeridas e o número de Leads que será obtido. Outros Elementos Não é regra, mas em geral, quanto mais informações, menor • Sentido de leitura: setas ou uma imagem de alguém a taxa de conversão. Ainda assim, coloque no formulário as olhando para o formulário. O olho humano costuma seguir informações que você precisa coletar dos Leads. Isso vai fazer esses indicativos e isso pode influenciar na conversão. muita diferença na hora de passar o Lead do marketing para as vendas. • Prova social: evidências de que outras pessoas compraram, baixaram ou encontraram algum valor na CTA oferta. Algumas formas de se fazer isso incluem botões de compartilhamento, número de downloads do material ou O call-to-action (CTA) é qualquer chamada — visual ou textual até mesmo depoimentos. — que leve o leitor ou visitante de uma página a realizar alguma ação, ou seja, são aqueles botões ou texto que convidam a • Senso de urgência: quanto tempo falta para uma oferta pessoa a realizar a ação, geralmente com frases no imperativo expirar, para estimular o visitante indeciso a agir mais como: rápido. Centro de Educação Tecnológica 29

Content Management Systems Inglês Instrumental e Webdesign Até anos atrás, apenas quem tinha um conhecimento razoável de programação conseguia colocar um site ou blog no ar. Uma loja virtual ou fórum então… só contando com alguém com muito conhecimento técnico para fazer a edição, publicação e manutenção. No entanto, os sistemas de gerenciamento de conteúdo (CMS) revolucionou a forma de criar esses novos mecanismos. A sigla vem do termo em inglês Content Management System, que significa “Sistema de Gerenciamento de Conteúdo”. A es- sência de um CMS é facilitar a criação, edição, publicação e distribuição de informações. Para facilitar, pense no CMS como o esqueleto de um site, que deve ser preenchido por você com as informações que deseja compartilhar. Com ele, o adminis- trador do site pode trocar as chamadas de destaque, publicar novos conteúdos, imagens, vídeos e muitos outros recursos. A maioria deles também permite agendar a data que um novo conteúdo vai ao ar. Assim, fica muito mais fácil manter um site atualizado. Com um sistema de gestão de conteúdo, você pode facilmente atualizar o conteúdo antigo ou excluir pos- tagens que não tem mais interesse em manter, por exemplo. Eles são úteis também para desenvolvedores, que muitas ve- zes podem utilizar as soluções prontas para diminuir o tempo de desenvolvimento, permitindo que se concentrem em pro- 30

duzir soluções que atendam necessidades específicas de cada preencher os “campos” para montar uma publicação que irá cliente, além da produção do layout. para o site. Por exemplo, um sistema para gerenciamento de blogs usa um editor com atalhos simples para textos. O con- Todos os sites da web são desenvolvidos por meio de diversas teúdo organizado no CMA é enviado para que o CDA crie um linguagens específicas, como HTML, PHP, Javascript, entre ou- código que será publicado no front-end e arquivado. tras. O que o CMS faz é exatamente organizar, a partir de um sistema único, toda esta parte “difícil” do desenvolvimento de A característica central do CMS é que ele permite gerenciar os um site. Na prática, a programação já está pronta na platafor- conteúdos, controlando todas as suas fases, desde a produção ma, para que seja personalizada pelo usuário e assim obter o e inclusão de imagens à revisão do material final. Para isso, o resultado final que é o site pronto. Geralmente, os CMS apre- CMS apresenta um painel onde é possível inserir o conteúdo, sentam um painel de controle, que contém campos a serem incluindo textos, imagens, fotos, vídeos, infográficos. Ainda, as preenchidos e alimentados com conteúdos em texto, imagens, plataformas CMS têm suporte para usuários múltiplos, o que vídeos, etc. Todos esses conteúdos ficam salvos em um banco permite delegar tarefas e responsabilidades a respeito do ge- de dados, no servidor de hospedagem do site, de forma se- renciamento de conteúdos. gura. Com o sistema de gerenciamento de conteúdo também é possível configurar opções mais avançadas, como menus, Além da facilidade do gerenciamento e da publicação dos con- design de páginas, formulários de contato, enquetes, canais teúdos de um site, podemos citar, entre outras vantagens em de inscrição, assinaturas de serviços e diversas outras funcio- se adotar um CMS: nalidades. • baixo custo de manutenção do site e gestão de conteúdos; A estrutura base de um sistema CMS é formada por dois com- • facilidade para criação e publicação de textos e imagens; ponentes: o aplicativo de gerenciamento de conteúdo (CMA) • inclusão de plugins para obter mais funcionalidades na e o aplicativo de entrega de conteúdo (CDA). Ambos formam o back-end, o painel de controle (dashboard) da plataforma. plataforma; Nesse espaço, o usuário encontra as ferramentas necessárias • recursos práticos que permitem a indexação nos buscado- para administrar, criar e publicar conteúdos, com materiais que ajudam a construir o front-end, o “rosto” de um site para res de pesquisa; internet. O CMS usa uma estrutura padronizada para que os • velocidade no carregamento da página (inclusive em dis- usuários não tenham que construir cada página a partir do zero. Na área de criação de conteúdos, a pessoa deve apenas positivos móveis); • facilidade para modificar o visual do website; • atualização automática das linguagens de programação; • criação de URL amigável (o que é ótimo para SEO); Centro de Educação Tecnológica 31

• configuração de acesso aos usuários; forma é muito ativa - ela reúne vários desenvolvedores e • painel de controle para o gerenciamento da plataforma. programadores que estão prontos pra te ajudar em qual- quer dificuldade nos fóruns de suporte. Principais CMS do Mercado • Drupal: Outra plataforma é a Drupal, que tem como van- tagem suportar sistemas altamente personalizáveis. É Existem diversos sistemas de gerenciamento de conteúdo, uma ótima alternativa para quem busca sites seguros e sendo alguns relativamente simples e outros complexos e com velocidade no carregamento. A plataforma oferece poderosos. Geralmente incluídos em um sistema de gerencia- um sistema bem flexível para o gerenciamento de posts mento de conteúdo estão os recursos de gerenciamento de personalizados. Além disso, o software é considerado formato, publicação baseada na Web, indexação, controle de muito mais seguro do que o WordPress e o Joomla. Sites revisão, pesquisa e recuperação. criados com este CMS possuem um excelente tempo de resposta e segurança. A plataforma funciona em módulos Embora existam opções de CMS pagos, os mais utilizados são que interagem entre si, o que permite um alto poder de gratuitos e open source. Isso significa que possuem código li- customização do sistema. Os módulos nativos integram vre, aberto, criado e mantido por desenvolvedores espalhados com várias ferramentas populares analíticas, de marke- pelo planeta. Listamos a seguir as opções mais conhecidas atu- ting e e-commerce. Empresas como NASA, Sony, Nokia e a almente no mercado. Tesla usam esse CMS como sistema padrão. Uma das coi- sas que torna o Drupal mais consistente que outros CMS, • Wordpress: Essa é uma das plataformas mais populares em termos técnicos, é o fato de ser o mais antigo (criado no mundo. O WordPress é usado sobretudo para criação em 2000). Por outro lado, isso acaba sendo um problema de blogs, mas também funciona como um CMS para loja quando se estamos falando em facilidade de utilização. virtual. Um ponto a favor da plataforma é que ela ofere- Muitos usuários criticam sua complexidade, sendo uma ce recursos e plugins extras para que o usuário consiga das explicações de ele não ser tão utilizado como o Wor- adaptá-la conforme suas necessidades. O WordPress é um dPress, por exemplo. gerenciador de conteúdo muito simples de utilizar. Seu in- • Magento: Trata-se de uma plataforma de e-commerce. tuito é que qualquer pessoa que desenvolva algum tipo Com ela, além de criar páginas com produtos, pedidos e de conteúdo possa publicá-los em um site de forma fácil entregas, é possível, entre as funcionalidades, gerar lan- e sem precisar trabalhar com códigos de programação. O ding pages. O Magento oferece opções para todos os por- WordPress também oferece templates prontos que você tes e tipos de empresas. O Magento é uma ferramenta de pode personalizar do seu jeito. E a comunidade da plata- código aberto mas que não trabalha com linguagem de 32 Inglês Instrumental e Webdesign

programação direta, mas sim com um desenvolvimento integrado a outros portais de distribuição, como YouTube por meio de templates personalizáveis (temas). Isso sig- e Facebook. Com ele, dá para gerenciar os diferentes ca- nifica que você pode desenvolver sua loja virtual sozinho, nais onde você publica vídeos em um único local. pois não há trabalho direto com linguagem de programa- • Moodle: O Moodle é uma das grandes referências quan- ção. A plataforma trabalha com a linguagem de programa- do falamos em plataformas voltadas para educação e ele ção PHP e foi lançada em 2008. Desde então tem recebido vem trazendo novos ares à educação a distância. O prin- atualizações de otimização e correção de bugs ano a ano, cipal intuito do desenvolvedor dessa plataforma é que ela fazendo do Magento uma plataforma atual e segura. fosse fácil de utilizar, de forma bem intuitiva para que até • Joomla!: O Joomla! é um CMS também gratuito e de códi- aqueles que não estão habituados pudessem ter acesso. A go aberto para publicações web, construído em estrutura plataforma foi desenvolvida para facilitar o relacionamen- de aplicativo web modelo-visualização-controlador. Além to entre as instituições de ensino e o estudante, pois é um de sites em geral, o Joomla! pode ser usado para a cria- ambiente online criado para desenvolver a aprendizagem. ção de revistas e jornais online, comércio eletrônico, sites Ele pode ser utilizado tanto para cursos à distância quanto governamentais, portais comunitários e páginas pesso- para auxiliar os treinamentos presenciais. O Moodle tem ais. Permite a criação de sites com flexibilidade e rapidez. um local de armazenamento de conteúdo, onde é possível Uma das vantagens é que a plataforma permite a integra- compartilhar documentos, áudio ou até mesmo vídeo em ção com extensões baixadas pelo usuário. A comunidade forma de vídeo aula. Ao disponibilizar seus cursos você e o suporte do Joomla! não são tão grandes quanto a do pode organizar um cronograma de estudos sem precisar WordPress, mas mesmo assim, essa plataforma gratuita seguir uma ordem pré-estabelecida. O aluno poderá aces- é uma das mais confiáveis e é uma ótima alternativa ao sar a plataforma de qualquer local com internet e isso per- WordPress. Além disso, ele é considerado o “meio termo” mite um acesso rápido aos documentos que a entidade de entre a complexidade do Drupal e a simplicidade do Wor- ensino deseja compartilhar, fazendo dessa função um di- dPress. Além disso, trabalha melhor com backups, sendo ferencial interessante do Moodle. Nele também é possível mais fácil manter cópias de segurança daquilo que você observar o comportamento dos alunos, pois a plataforma desenvolveu. gera relatórios completos de quais conteúdos estão sendo • Media Portal: Que tal um CMS para vídeos? Se esse é o mais acessados, por quanto tempo estão sendo acessados seu foco, o Media Portal é uma alternativa, pois pode ser e também se foram finalizados ou não. Centro de Educação Tecnológica 33

Post x Página Inglês Instrumental e Webdesign As palavras postagem e post são usadas para indicar uma publicação na Internet, como comentários em redes sociais, compartilhamentos de fotos em grupos de discussão, opiniões em blogs, entre outros. Post é uma palavra estrangeira, sendo a forma original da palavra em inglês. É um substantivo mas- culino. Postagem é a forma aportuguesada da palavra. É um substantivo feminino. Como forma de diferenciar esses conte- údos, tradicionalmente um “post” ou “artigo” refere-se a uma notícia exibida em ordem cronológica inversa. É um herdeiro do formato blog. À medida que o post se torna mais antigo, fica mais difícil o visitante encontrá-lo, pois ele vai sendo “em- purrado” para o fim da linha pelos posts mais novos (por isso é bom marcá-lo em categorias e com tags). • Categorias: As categorias organizam os assuntos ou posts em segmentos semelhantes: temas, títulos, conteúdos e definições que estejam em um mesmo lugar para serem encontrados mais facilmente. Assim, o leitor poderá en- contrar um assunto de interesse em uma só categoria, sem ter que fazer uma grande busca em um determinado site. • Tags: As tags ajudam a complementar a organização das categorias do conteúdo, servindo para classificar detalhes e assuntos mais específicos (enquanto as categorias po- dem ser consideradas “genéricas”). Segmentadas por de- 34

talhes menores ou subdivisões, permitem que um mesmo A natureza oportuna dos posts torna-os extremamente so- post esteja em mais de uma dessas classificações. ciais. Você pode usar um dos muitos plugins de compartilha- mento social para permitir que seus usuários compartilhem O Post é considerado dinâmico justamente porque ele tem a seus posts em redes sociais como Facebook, Twitter, LinkedIn, tendência de ser modificado várias vezes. Já páginas são está- Pinterest etc. As posts incentivam a conversa. Eles têm um re- ticas, não são listadas por data e não usam tags. As páginas se curso de comentário integrado que permite aos usuários pos- destinam a conteúdos mais permanentes, que não vão sofrer sam comentar sobre um determinado assunto. Por padrão, alterações a não ser que seja realmente necessário, e são or- comentários, pingbacks e trackbacks estão habilitados. ganizadas de forma hierárquica (uma página pode ter diversas subpáginas, por exemplo). Na maioria dos temas, os post e as páginas têm a mesma apa- rência. Mas quando você está usando sua página para criar A página de contato do seu site, para exemplificarmos melhor, uma landing page ou uma página de galeria de fotos ou vídeo, não precisa ter categorias. Ela não precisa aparecer com os o recurso de modelos de página personalizada é muito útil: posts. É uma página com a finalidade de listar as formas de por padrão, o WordPress vem com um recurso que permite contato do seu site ou empresa. Dificilmente você terá outras criar modelos de página personalizados usando o seu tema. páginas com esse mesmo conteúdo. Isso permite que os desenvolvedores personalizem a aparên- cia de cada página quando necessário. As páginas não têm uma data de publicação, seus autores não são normalmente exibidos no front-end e tradicionalmente Assim: são destinadas a conteúdo estático e atemporal. • Posts tem duração. Páginas são atemporais. Se você criar posts fixos, eles aparecerão antes dos outros • Posts são sociais. Páginas não. posts. Posts podem ser encontrados em Arquivos, Categorias, • Posts são categorizados. Páginas são hierárquicas. Posts recentes e em outros menus (ou widgets). Eles também • Posts são incluídos no feed RSS. Páginas não. são exibidos no feed RSS do blog (uma assinatura feita pelos • Páginas possuem templates para customização. Posts não. leitores para receberem notificações de conteúdos novos). • Posts têm autor e data de publicação. Páginas não. Você pode controlar quantos posts serão exibidos por vez nas Configurações de leitura. No Wordpress, a URL de um post in- Em resumo, um post é um tipo de publicação que pode ser clui a data em que o post foi publicado. organizado e listado com categorias e tags. As páginas são para Centro de Educação Tecnológica 35

conteúdos estáticos, que não precisam de uma organização • Agenda: Eventos e compromissos futuros. em categorias. Para um artigo em um Blog, use um post. Para • Landing Page: Página de oferta e conversão. um formulário de contato, use uma página. O WordPress e outros CMS também permitem que os desen- Tipos de Post volvedores criem seus próprios tipos de posts personalizados. Este recurso é usado por plugins para criar tipos de conteúdo • Artigo: Conteúdo informativo ou opinativo. adicionais. Por exemplo, se você estiver executando uma loja • Notícia: Novidade ou informação com validade momen- virtual, poderá ver um tipo de post chamado “Produto” em sua área de administração. tânea. • Tutorial: Passo a passo, instrucional. • Lista: Relação de serviços, produtos ou temáticas. • Podcast: Conteúdo em áudio. • Publieditorial: Post pago. • Guest Post: Post de convidado. • Resenha: Análise de serviço, produto ou obra. • Estudo de caso: Exemplificação. • Vídeo: Conteúdo audiovisual. • Galeria: Pasta de imagens. • Entrevista: Perguntas e respostas de personalidade. Tipos de Páginas • Home: Página inicial. • Sobre: Página institucional. • Contato: Canais de atendimento. • Produtos/Serviços: Descrição de atividades ou catálogo virtual. • Equipe: Funcionários, diretores e colaboradores. • Portifólio: Exemplos de trabalhos anteriores. 36 Inglês Instrumental e Webdesign

Domínio e Hospedagem Domínio é um nome exclusivo que serve para localizar e identi- ficar você ou sua empresa na web, e que aparece após o www. em sites ou após o @ em e-mails. É o endereço que as pesso- as utilizam para encontrá-lo na web e, por isso, é considerado fundamental para quem quer ter um site ou blog. O domínio é uma parte importante para construir a sua identidade e a presença na web. Registrá-lo é o primeiro passo para garantir uma presença online e aumentar a visibilidade da sua empresa também na internet. Os domínios também podem usar redirecionamentos. Isso essencialmente permite que, quando as pessoas tentarem acessar um domínio, elas sejam automaticamente redirecio- nadas para outro. É algo que pode ser útil para campanhas e microsites. Também pode ser usado para evitar confusão com maneiras diferentes de escrever o mesmo nome. Por exemplo, se você visitar www.fb.com, será redirecionado para www.fa- cebook.com. DNS O domínio foi uma convenção criada para tornar o acesso aos sites na internet mais fáceis de se lembrar e mais amigáveis aos seres humanos. Isso porque, na realidade, os sites são lo- calizados pelos provedores de internet através de um número chamado de IP, como vimos no primeiro módulo. As combina- Centro de Educação Tecnológica 37

ções numéricas presentes nos IPs são muito boas para serem comum, mas também há o “.gov” para sites governamen- lidas por computadores, mas nada práticas para os seres hu- tais, “.edu” para portais educacionais, “.med” para portais manos. O domínio de site funciona como um atalho para os medicinais e muitos outros. A lista oficial de TLDs é manti- arquivos que estão nele, mascarando o endereço de IP. da por uma organização chamada Internet Assigned Num- bers Authority (IANA). DNS é a sigla em inglês para Domain Name System ou, em tra- • Código do país: Já o código do país é opcional e determina dução livre, Sistema de Nomes de Domínio. Basicamente, o o país de origem do domínio, que em nosso caso é o .br. DNS traduz os números de cada endereço de IP para os nomes Um fato curioso é que, em outros países, é possível regis- — o endereço dos sites. Assim, em vez de acessarmos um site trar um domínio sem o TLD e apenas com o código do país por meio de um endereço de IP como 216.58.219.131, é muito (ex: meusite.jp para Japão), mas no Brasil esta funciona- mais fácil acessar www.google.com.br ou outra URL similar. lidade é restrita a sites de instituições de ensino (como universidades). Os domínios, portanto, facilitam a navegação na internet, pos- sibilitando de páginas serem encontradas e de receberem um Para poder obter um domínio é necessário registra-lo. Geral- número maior de visitantes. mente, os domínios de extensões pagas são os mais utilizados, pois possuem maior confiabilidade na internet. Quem cuida dos registros de domínio é uma organização chamada ICANN (Corporação da Internet para Atribuição de No Brasil, a entidade que gerencia os domínios .br é o Regis- Nomes e Números). A ICANN especifica quais extensões de tro.br, pertencente ao NIC.br. Um domínio é único, portanto, domínio estão disponíveis e mantém um banco de dados cen- antes de registrar o domínio para seu site, você precisa verifi- tralizado indicando para onde cada domínio aponta. car se o que deseja registrar está disponível para uso. Há sites que verificam gratuitamente se um endereço web está sendo Um domínio é composto por: utilizado. • Nome do domínio: O nome de domínio corresponde ao Você pode criar uma URL de 2 a 26 caracteres — sem contar o nome do seu site, e está normalmente associado à sua “www.” e o “.com.br”. De forma geral, endereços eletrônicos marca, projeto ou empresa. longos devem ser evitados. Eles são mais difíceis de decorar e até mesmo de adaptar nos anúncios e materiais de divulga- • Categoria do domínio (TLD): A categoria, também cha- ção. Alguns caracteres especiais, como o hífen, também são mada de TLD ou top level domain, corresponde ao seg- proibidos. mento do site. O sufixo “.com” (de “comercial”) é o mais 38 Inglês Instrumental e Webdesign

Um domínio é legalmente propriedade de um registrante. Hospedagem Quando alguém registra um endereço, o registrar vai reunir as informações pessoais do registrante e enviá-las para o diretó- Se você comprar um domínio, saiba que será preciso contratar rio WHOIS. uma hospedagem em um provedor ou datacenter para criar seu site. Registro de domínio não é sinônimo de hospedagem Subdomínios de site! O subdomínio nada mais é que uma divisão do domínio. Ou A hospedagem de site é um serviço que guarda os textos, ima- seja, é um endereço que faz parte de um domínio. Ao possuir gens, vídeos e todo o conteúdo do site pelo navegador. É como um domínio, você pode criar quantos subdomínios quiser a se fosse um “aluguel” e esse deve ser pago de maneira men- partir dele. sal, trimestral, semestral ou anual. As melhores hospedagens de sites são feitas por empresas especializadas. Elas possuem O subdomínio posiciona-se à esquerda do domínio. Existem servidores próprios ou alugados, máquinas com hardware e diversas empresas que permitem a utilização de seus domí- software especialmente configurados para a web. Esses servi- nios para a criação de páginas através de subdomínios. dores ficam em estruturas físicas conhecidas como “data cen- ters”, que nada mais são do que grandes conjuntos de servido- Um grande exemplo disso é o WordPress.com que permite a res de hospedagem. criação de sites gratuitamente, porém como subdomínio da mesma. Por exemplo, ao criar um blog gratuito no wordpress. Cada site que você visita efetivamente consiste em dois ele- com, o endereço seria algo como meusite.wordpress.com. Isso mentos principais: um domínio e um servidor. representa que seu site pertence ao domínio wordpress.com. Dessa forma, você fica restrito as regras deles, e ao servidor • Um servidor é uma máquina física que hospeda os arqui- deles, tornando-se dependente da empresa do domínio prin- vos e os bancos dados que compõem seu site, e os envia cipal. para os computadores das pessoas através da internet quando elas visitam a sua página. Pode ser uma boa opção para páginas simples, como blogs pessoais, porém para um site de uso comercial ou empresarial, • Um domínio é o que as pessoas digitam para acessar o o ideal é possuir seu domínio próprio. seu site, e que aponta o navegador para o servidor que armazena esses recursos. Centro de Educação Tecnológica 39

A palavra “site” significa “lugar”, em inglês. Podemos dizer que muito provavelmente o mesmo já esteja configurado. Há di- se trata do lugar onde estão os arquivos do nosso blog, loja vir- ferentes tipos, ainda, de hospedagem, como veremos abaixo: tual ou página de negócios. Um site é um conjunto de arquivos (textos, imagens e códigos) que juntos formam as páginas que • Hospedagem gratuita: uma versão com recursos extre- estamos acostumados a encontrar na internet. mamente limitados, com pouco espaço em disco e trans- ferência, além de banners e propagandas. Em termos de Os arquivos do site são lidos por programas especializados – os recursos, não se compara às opções pagas. navegadores, mas antes esses arquivos precisam estar guarda- dos em determinado local, o que chamamos de servidor. • Hospedagem compartilhada: é a mais comum e mais uti- lizada entre os tipos de Hospedagem. Por ser um tipo de Quando você digita uma URL no seu navegador, ele envia uma Hospedagem barata e que oferece diversas funcionalida- solicitação para o servidor específico onde o seu site está hos- des que atendem empresas de pequeno e médio portes, pedado. O servidor então faz upload dos arquivos e os trans- oferece um excelente custo-benefício. Consiste em um mite pela internet para o aparelho que você está usando. O servidor compartilhado entre vários sites diferentes. Em seu dispositivo, então, baixa os arquivos e os exibe. muitos casos, a Hospedagem compartilhada oferece sites, bancos de dados, transferência e espaço em disco ilimita- Ao publicar um site, os arquivos que você hospedou passam dos, com certificado SSL incluso, criador de sites e suporte a estar disponíveis na Internet, para que visitantes acessem 24/7. o seu site ou a loja e possam navegar pelas páginas, realizar compras e etc. Junto com o serviço de hospedagem, os pro- • Servidor Virtual Privado (VPS): Neste tipo de hospeda- vedores oferecem também o serviço de e-mail com endereço gem, por meio virtualização, um servidor físico robusto personalizado, usando o seu domínio. é dividido em vários servidores virtuais isolados uns dos outros virtualmente. Apesar de compartilharem recursos O custo para a hospedagem de site varia conforme o provedor físicos, processamento, tráfego, espaço em disco e memó- que você escolhe, além do tipo e também dos planos de hos- ria RAM são totalmente dedicados a cada servidor virtual pedagem. Para estar hospedando, basta contratar os planos privado. de hospedagem através desses provedores e configurar seu domínio para os servidores da sua hospedagem. • Hospedagem Cloud: oferece recursos dedicados e ex- clusivos, com o mesmo painel da Hospedagem de Sites. Caso você realize a compra do domínio pelo próprio provedor, A nuvem é uma maneira de armazenar dados em vários computadores e acessá-los por meio de uma conexão com a internet. Ela se comporta como um único computa- dor físico, com capacidade de processamento e espaço de 40 Inglês Instrumental e Webdesign

armazenamento infinitos. A hospedagem cloud é a tercei- Outro fator que está ligado ao consumo deste recurso é rização de recursos de computação e armazenamento de a otimização do site, sendo assim, os sites com melhores uma organização para um provedor de serviços. otimizações consomem menos recursos de transferência. • Servidor dedicado: é mais cara, privada e indicada para • Painel de Controle: Um Painel de Controle serve para fa- grandes empresas que necessitam de alto desempenho, cilitar a administração do site e dos recursos da hospeda- disponibilidade e customização. gem contratada, sem que o usuário precise ter conheci- mentos técnicos. Nesses painéis, a interface é amigável, Recursos o que torna mais fácil o gerenciamento da hospedagem, criar contas de e-mails, alterar senhas, configurar domí- Os recursos dizem respeito às tecnologias implementadas e nios, banco de dados, instalar softwares etc. Um dos sis- serviços oferecidos pelos provedores. Eles determinam o de- temas mais populares entre serviços de hospedagem é o sempenho, velocidade, espaço e quantidade de tráfego supor- cPanel. tado. • Contas de e-mail: O e-mail é uma das principais ferramen- tas de comunicação na internet, e ter contas de e-mail • Armazenamento: O armazenamento (também conhecido com o seu domínio, além de ser muito profissional, ga- como espaço em disco) é o limite de espaço que o con- rante um contato com mais credibilidade com os seus teúdo de um site pode utilizar dentro do servidor. Então, clientes ou leitores. O e-mail é oferecido gratuitamente antes de contratar um plano, é importante saber qual é o em muitas hospedagens. tamanho que os arquivos do seu site possuem para com- • Domínios: Conhecer quantos domínios se pode ter em parar com o espaço em disco disponibilizado no servidor. uma hospedagem é pertinente para quem deseja criar Além dos arquivos do site, os e-mails também ocupam vários sites diferentes. Um plano de hospedagem de sites esse espaço em disco. que oferece a inclusão de múltiplos domínios (ou subdo- mínios) permite que você hospede vários sites em um úni- • Transferência: É a quantidade de dados que podem ser co plano de hospedagem. transferidos para a hospedagem em um mês. Por exem- • Criador de Sites ou CMS: Para quem não tem conheci- plo, quando você precisa atualizar o site, fazer upload mento técnico, um dos principais fatores a serem anali- de imagens ou qualquer outro conteúdo, o recurso de sados em uma hospedagem de site é a disponibilidade de transferência está sendo utilizado. Além disso, ao acessar Criador de Sites ou auto instaladores de CMS (sistemas de um site é feito o download dos arquivos pelo navegador. gerenciamento de conteúdo). Dessa forma, a transferência (ou tráfego) também está • Backup: É uma cópia de segurança de arquivos ou dados. relacionada à quantidade de visitas que um site recebe. Centro de Educação Tecnológica 41

Ele serve para salvar e guardar as informações do site ga- serão disponibilizados aos clientes. A revenda de hospe- rantindo que possam ser recuperados em possíveis erros dagem é uma ótima maneira de começar um negócio on- ou acidentes inesperados. Os backups podem ser feitos line e ganhar dinheiro na internet. manualmente ou automaticamente, além disso você tam- • Uptime: Esse é o termo que define a disponibilidade de bém pode fazer através do cPanel ou deixar na nuvem um servidor, ou seja, quanto maior for o uptime, maior é com o backup online. a garantia de que o seu site estará disponível. Esse núme- • Certificado SSL: O certificado SSL é fundamental para si- ro é fornecido em percentual, então quando falamos em tes que precisam garantir aos seus visitantes que nenhum hospedagem de sites, o máximo que pode ser garantido é dado fornecido será interceptado por terceiros. Desta for- ente 99,5% e 99,9% de uptime. ma, as informações como números de cartão de crédito, • Sistemas de Bancos de Dados: São estruturas em formas dados pessoais e outras, serão protegidas. Importante no- de tabela que guardam dados importantes no servidor da tar que nem todos os serviços de hospedagem oferecem hospedagem. Os bancos de dados armazenam de forma essa opção e, mesmo entre os que a oferecem, este pode segura e organizada as principais informações que pre- ser uma opção cobrada à parte. cisam ser manipulas pelo site ou aplicação. Na hora de • FTP: O File Transfer Protocol, como o próprio nome indica, contratar um serviço, este recurso determina se a hos- é um protocolo que tem a função de transferir arquivos pedagem possui ou não bases para armazenamentos de (upload e download). É o meio utilizado para enviar os dados. Sites estáticos, que não guardam dados de usuá- arquivos do seu site para a hospedagem. Para fazer essa rios ou posts de blog, não precisam necessariamente de transferência, tradicionalmente, se utilizam clientes de bancos de dados. FTP, programas específicos para isso, mas muitos servido- • Migrador de Sites: Oferecido pelas melhores hospeda- res oferecem também a opção de gerenciadores de arqui- gens de site, o migrador fornece a possibilidade de trazer vos online que eliminam esta necessidade. o site, e-mails e bancos de dados de outro provedor para a • Revenda de Hospedagem: É um produto em que pode ser nova empresa. Este recurso é muito popular, e geralmente oferecido o próprio serviço de hospedagem para tercei- oferecido de forma gratuita com o objetivo de atrair clien- ros, gerenciando valores, planos, pacotes e recursos que tes insatisfeitos com o atual serviço. 42 Inglês Instrumental e Webdesign

Wordpress O WordPress é uma plataforma que permite a você criar um blog ou um site de forma simples e fácil. Por meio do login em um painel de administração, o usuário pode modificar cores do site, fontes, informações como telefone, endereço e ain- da publicar conteúdo em forma de posts ou páginas. O Wor- dPress é um Sistema de Gerenciamento de Conteúdo (CMS) que alimenta mais de 35% de todos os sites da internet – e esse número continua a crescer todos os anos. Existem duas formas de você utilizar o Wordpress: • No site wordpress.com você pode criar um site totalmen- te gratuito com apenas alguns cliques, porém o seu site vai ter o subdomínio .wordpress.com (por exemplo: ce- dutech.wordpress.com); • A segunda forma é utilizar o wordpress.org. Nesse site é possível fazer o download dos arquivos de instalação do WordPress e instalar a plataforma em sua própria hospe- dagem, ou ainda num servidor local para testes. A van- tagem é que você tem controle total da plataforma, po- dendo alterar código e fazer backup dos seus arquivos e banco de dados. O WordPress usa PHP e MySQL, linguagens que são suporta- das por todos os serviços de hospedagem de site. A jornada Centro de Educação Tecnológica 43

do WordPress começou em 2003 quando dois desenvolvedo- O WordPress é uma plataforma que funciona em conformida- res, Matt Mullenweg e Mike Little, começaram a construir uma de com os padrões vigentes da Web e da usabilidade. É um nova plataforma para blogs. Ela foi criada a partir de um sof- software livre e gratuito. Além disso, a ferramenta dispõe de tware chamado bs/cafeblog. Eles lançaram a primeira versão recursos próprios para otimização para mecanismos de busca. do WordPress (WordPress 1.0) em janeiro de 2004. Esta versão era bem diferente da versão atual do WordPress, que é muito Para melhor entender o funcionamento do WordPress, pode- bem estruturada e cheia de recursos. mos destacar alguns dos seus principais elementos estruturais: Entretanto, ela já tinha a maioria dos principais recursos que • Temas: O tema é o modelo de elementos visuais que o ainda usamos hoje, como o editor de conteúdos e um sistema site vai conter para apresentar aos visitantes, podendo de gerenciamento de usuários. O simples processo de insta- ser gratuitos ou pagos. Esses temas são personalizáveis lação, moderação de comentários e a função de permalinks e podem ser alterados sem afetar o conteúdo. É impor- também já existiam. tante diferenciar o termo “tema” (em inglês, theme) do mais conhecido template. No WordPress, templates são O WordPress é um software de código aberto. Isso significa layouts utilizados para reorganizar os menus e widgets de que o código-fonte está disponível para todos. Pessoas do uma página, e independem do tema que, este sim, deter- mundo inteiro podem estudar, modificar e testar o WordPress. minará a aparência so site. Eles podem contribuir reportando bugs e corrigindo proble- mas, se desejarem. • Plugins: Os plugins são extensões que servem para rea- lizar ações específicas. Essas ferramentas adicionais ofe- Hoje em dia, o projeto é desenvolvido, gerenciado e mantido recem funcionalidades específicas que podem auxiliar a por uma comunidade dedicada de código aberto composta aumentar o potencial do seu site. por milhares de membros no mundo. Eles trabalham remota- mente, sendo a maioria deles voluntários. Eles se encontram • Widgets: Os widgets são componentes para adicionar pessoalmente durante o WordCamp, um evento dedicado à conteúdo adicional na barra lateral e/ou no rodapé do plataforma. site, como últimas publicações, barra de pesquisa, entre outros. Não é necessário implementar códigos para inse- O WordPress continua crescendo rapidamente e uma nova rir os widgets, apenas selecionar e arrastar as opções de- versão costuma ser lançada a cada 2 ou 3 meses com novos sejadas no menu apropriado do Painel de Controle. recursos e atualizações de segurança. • Menu: Uma das principais customizações de um site é o menu. Apesar de poder ser alterado pelo administrador, a sua posição dentro do site e a quantidade varia de tema 44 Inglês Instrumental e Webdesign

para tema. O menu é essencial para determinar como permitir que outras pessoas editem/gerenciem o seu site será a experiência do usuário e quão intuitiva será a na- sem usar o seu login. vegação do mesmo. • Permalinks: Permalinks são os URLs permanentes para • Páginas e posts: Como vimos anteriormente, as páginas suas postagens. Cada postagem ou página possui um link e os posts são os dois tipos de conteúdo disponíveis no permanente exclusivo que os visitantes usam para aces- WordPress. Cada um destes tipos possui um menu especí- sar seu site. Esses links são o que os usuários digitam ou fico dentro do Painel de Controle do Wordpress para rápi- colam na barra de pesquisa do navegador e também são da adição, exclusão e administração. usados ​p​ elos mecanismos de pesquisa para criar um link • Editor: Também conhecido como editor de blocos, o edi- para o seu site. O WordPress oferece diversas opções para tor do WordPress foi lançado no fim de 2018. Ele fornece configurar a exibição desses links, desde sequências nu- a experiência de edição mais avançada e flexível do Wor- méricas, datas, nomes dos posts, até mesmo estruturas dPress, além de ser usado por milhões de proprietários de totalmente customizadas. sites em todo o mundo. Todos os elementos do site, como imagens, textos, vídeos e cabeçalhos, são adicionados por Instalação meio de blocos. Cada bloco é um elemento estrutural dis- tinto que permite isolar áreas de conteúdo para edição. O WordPress é bastante amigável para iniciantes. Ele é famoso • Shortcodes: Um shortcode é um código específico do por sua instalação de 5 minutos que não exige nenhum conhe- WordPress que lhe permite incluir novos elementos com cimento técnico! Muitas hospedagens de sites possuem insta- muito pouco esforço. Os shortcodes podem incorporar ladores automáticos para tornar o processo de instalação do arquivos ou criar, em apenas uma linha, objetos que nor- WordPress o mais simples possível. Usando instaladores auto- malmente exigiriam muita codificação complicada. máticos, os usuários não precisam mais lidar com a criação de • Imagem Destacada: Uma imagem destacada representa o bancos de dados ou o upload de arquivos. conteúdo, o humor ou o tema de um post ou uma página. Posts e páginas podem ter uma única imagem destacada, Antes de prosseguir com a instalação do WordPress, você preci- que muitos temas e ferramentas podem usar para melho- sará decidir como deseja acessar seu site. Prefere o WordPress rar a apresentação do site. em sua raiz de nome de domínio (exemplo.com), subpasta • Usuários: Seu site pode ter vários administradores, edito- (exemplo.com/blog) ou nome de subdomínio (blog.exemplo. res, autores e colaboradores, para que você não precise com)? Somente se você deseja configurar o WordPress em um gerenciá-lo sozinho. Fazer isso mantém também a segu- nome de subdomínio, precisará executar uma etapa adicional rança de sua conta, proporcionando a você uma forma de e criar o nome desse subdomínio. Centro de Educação Tecnológica 45

Em hosts de site, geralmente, você pode fazer isso pelo cPanel. Você precisará de uma hospedagem profissional que dê su- porte a WordPress, ou seja, que dê suporte a PHP e banco de 1. Acesse o painel de controle da hospedagem de sites. dados MySQL. 2. Localize o Instalador Automático e abra-o. 3. Digite WordPress no campo de pesquisa e clique no ícone Primeiro, baixe a versão mais recente do WordPress no seu site oficial – WordPress.org -, salve na pasta de Download do de busca. seu computador e faça a extração da pasta no mesmo diretó- 4. Preencha os detalhes do site: rio. Depois, ela será enviada para o serviço de host que você escolheu, portanto, tenha em mãos os seus dados de login da • URL: é o URL em que o WordPress deve ser instalado. Se hospedagem (usuário e senha). você deseja instalá-lo no nome de domínio raiz (exemplo. com), deixe em branco. Acesse o link de acesso da sua hospedagem e insira seus dados de login para acessar a página inicial do painel de controle. Em • Idioma: vai determinar tanto o idioma visualizado pelos seguida, procure a opção de Databases (Bancos de dados) e seus visitantes quanto o idioma da área de administração clique na opção MySQL Databases (Bancos de Dados MySQL). (o back-end) do seu site. Uma nova sessão chamada Create a New DataBase (Criar um novo banco de dados) será aberta e você precisará inserir um • Nome de usuário do administrador: você o usará para nome para a sua base de dado. acessar a área de administração do WordPress. Geralmente, são utilizados apenas caracteres alfanuméricos e • Senha do administrador: você a usará para acessar a área underline, além disso, a primeira letra sempre deve ser minús- de administração do WordPress. cula e não deve ser um número. Depois, clique na opção Crea- te (Criar); em seguida, você receberá uma mensagem dizendo • E-mail do administrador: digite seu endereço de e-mail. que a base de dados foi adicionada. • Título do site: é o título do seu site WordPress. • Tagline do site: é uma frase curta – ou slogan – explicando Na sessão de banco de dados, você deverá procurar pela op- ção de “adicionar um usuário na base de dados”. A escolha sobre o que é o seu site. deve ser do usuário da instalação e da base que já foi criada, o • Finalizar: pressione o botão instalar. Se você deseja (ou precisa) instalar o WordPress de forma ma- nual, também é possível. O processo é direto e semelhante a instalação de outros softwares. Porém, exige um pouco mais de atenção e configurações que a instalação automática. 46 Inglês Instrumental e Webdesign

que irá lhe redirecionar para a tela de gerenciamento de “pri- Para subir a pasta com o nome de wordpress.zip – a que foi vilégios usuário”. Escolha a opção de ALL Privileges (Todos os compactada – você precisará acessar o painel de controle e Privilégios, em português) para que assim o seu usuário não acessar Files > File Manager. Outra opção é utilizar um clien- tenha restrições para realizar qualquer tipo de operação na te de FTP, como mencionamos antes. Ao clicar sobre a opção base que foi criada, como por exemplo, criar, fazer alterações de fazer upload o arquivo já se encontrará no diretório raiz. até mesmo deletar tabelas. Depois, selecione a pasta zipada faça sua descompactação no mesmo diretório. Para salvar as mudanças, clique na opção Make Changes (Sal- var mudanças) e depois volte para o painel ao clicar em Go back (Voltar). Confira se o usuário foi adicionado a base de da- dos e depois retorne para o painel principal ao clicar em Home. Com a base de dados criada e com um usuário pronto para administrá-la, já é possível fazer a criação do arquivo de confi- guração do WordPress, que é chamado de wp-config. No dire- tório da pasta wordpress existe um arquivo chamado “wp-con- fig-sample”. Você precisará copiar e colar o arquivo no mesmo diretório, renomeando a cópia como “wp-config-sample-co- pia”. Utilizando o editor que você preferir (pode ser o Bloco de No- tas), abra o arquivo wp-config.php e informe os parâmetros de configuração referentes ao usuário e a base de dados que já foram criados. Com o arquivo wp-config.php criado já é ne- cessário fazer a compactação da pasta wordpress para que ela seja enviada para o servidor. Vale deixar claro que o painel de controle só aceita o upload de pastas que possuem a extensão .zip. Portanto, clique com o botão direito do mouse na pasta e escolha a opção de enviar para a pasta compactada. Centro de Educação Tecnológica 47

48 Inglês Instrumental e Webdesign

Centro de Educação Tecnológica 49

Se o WordPress não conseguir encontrar o arquivo wp-config.php, ele vai se oferecer para tentar criar e editar o arquivo para você. A seguinte tela aparecerá: 50 Inglês Instrumental e Webdesign