Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original
APS – Atividades Práticas Supervisionadas -Construção de uma Landing Page para a promoção da TI verde e Sustentabilidade - Universidade Paulista (UNIP) – Curso de Ciência da Computação – Campus Paulista Paulo Henrique Neres Sousa Viana N4278G-5 Lucca Scarano de Oliveira N4588J-2 Vitor Hugo Samelo Santos da Costa N4563C-6 Francisco (completa o nome e o RA) 1.Índice: APS – Atividades Práticas Supervisionadas -Construção de uma Landing Page para a promoção da TI verde e Sustentabilidade - Universidade Paulista (UNIP) – Curso de Ciência da Computação – Campus Paulista 1 1.Índice: 2 2.Objetivo: 2 3.Introdução: 3 4.Fundamentação teórica: 4 4.1 HTML: 4 4.2 Bootstrap: 4 4.3 CSS: 5 5. Projeto de layout: 5 6. Contextualização: 6 7. Desenvolvimento da Landing Page: 6 8. Linhas de Código: 7 9. Referências: 7 2.Objetivo: Nosso objetivo por meio deste trabalho é desenvolver uma Landing Page voltada para o engajamento de pessoas interessadas em assuntos relacionados a TI verde. A partir da pesquisa sobre o tema foram estabelecidas dicas e conteúdos úteis, além de simples de serem postos em prática pelo público-alvo. Após a pesquisa do conteúdo a página foi construída levando em conta os ensinamentos dados em aula e os nossos próprios estudos individuais, a junção dos dois nos deu o que precisávamos para concluirmos este trabalho. Buscamos motivação com as conversas entre nós sobre a importância do assunto, além de encararmos isso como uma ótima oportunidade de pormos em prática tudo que aprendemos e também de percebemos quais as dificuldades e desafios de se criar uma Landing Page. 3.Introdução: Este Trabalho integra as Atividades Práticas Supervisionadas (APS), que se configura como uma atividade proposta por professores aos alunos para testar e supervisionar os ensinamentos dados ao longo desse semestre. Nos foi dado a tarefa de desenvolver uma landing page que faça com que pessoas comuns se interessem por assuntos relacionados a TI verde e sustentabilidade; além de também promover um conteúdo único que será distribuído em troca do cadastramento do e-mail da pessoa. Uma Landing Page, em resumo, se trata de uma página voltada à conversão dos visitantes em potenciais clientes de um produto ou serviço disponibilizado por eles, em sua maioria essas páginas costumas ser utilizadas em campanhas de Marketing Digital, por causa de sua alta taxa de conversão do público. O termo Landing Page significa literalmente páginas de aterrissagem, termo esse que originalmente definia toda página que algum individuo acessava para adentrar algum site. Para o contexto do Marketing Digital essas páginas contêm muito menos elementos e links do que alguma homepage normal, sendo feito de forma proposital, pois, depois de conseguir atrair o visitante ao seu site o único objetivo com ele é conseguir manter sua atenção até que se consiga a sua conversão. Para tal, se usa de artifícios visuais que buscam prender a atenção do usuário e que o façam ver uma necessidade prática para o que for oferecido. 4.Fundamentação teórica: 4.1 HTML: Sendo uma linguagem de marcação muito simples, o HTML é composto de elementos que podem ser aplicados a pedaços de texto para lhes atribuir significados diferentes em um documento, além de estruturar ele em seções lógicas e incorporar imagens, vídeos ou áudios em uma página. Para que um documento HTML seja válido, ele necessita que seja estruturado pelas tags <html>, <head> e <body>. Sendo a tag <html> a principal delas, ela define ao navegador que o arquivo foi escrito na linguagem HTML, todos os elementos estarão dentro dela sendo a primeira tag a se abrir e última a se fechar. A tag <head> é responsável por carregar toda a parte do documento que não é mostrada no navegador, nela estará contida informações como título, links para CSS, links para favicons e metadados. Por último a tag <body>, ela está responsável por conter todo o conteúdo que será mostrado para o visitante pelo navegador. O HTML foi a primeira linguagem a se propagar a nível mundial, porém não foi a única, existem várias outras linguagens destinadas a criação de páginas web, porém a única que ainda prevalece é a HTML. Um dos diversos avanços implementados com o passar do tempo é a integração de outras linguagens á criação da página web. 4.2 Bootstrap: O Bootstrap é um framework usado na construção do front-end que agiliza o desenvolvimento de uma página web, oferecendo vários padrões, baseados em HTML, Javascript e CSS, que podem ser aplicados diretamente em páginas. Desenvolvido por volta do ano de 2011, por Jacob Thorton em parceria com Mark Otto, na época engenheiros que trabalhavam para o Twitter. Seu propósito naquele momento era resolver problemas de incompatibilidade que ocorriam no desenvolvimento das aplicações web dentro de suas equipes. Eles estavam em busca de otimizar o tempo gasto através da adoção de uma estrutura única, que reduziria as inconsistências entre as várias formas de se programar. Já houve mais de vinte atualizações em sua biblioteca, incluindo dois grandes reescritos, com o Bootstrap 2 por exemplo, foram adicionados várias funcionalidades, entre elas a responsividade em todas as estruturas como uma folha de estilo opcional. 4.3 CSS: O CSS ou folha de estilo em cascata, é utilizado para se estilizar e criar layouts de páginas web. Há muitos tipos de propriedade CSS para se levar em consideração, desde valores para se colorir, até funções que realizarão certas ações, como embutir uma animação para rotacionar algum elemento ou adicionar alguma imagem de plano de fundo. Existem alguns que dependem de valores exatos para especificar o que eles estão apresentando, um exemplo disso é a textbox. Sua criação foi em 1996 com o CSS 1, desenvolvida por uma equipe liderada por Håkon Wium Lie e Bert Bos, que naquela época viram o problema de implementação dos Browsers, que dificultavam a visualização dos sites e traziam menos controle na navegação pela web. 5. Projeto de layout: Nosso layout buscou ser o mais sóbrio e simples possível, destacando o conteúdo da página e reduzindo os estímulos visuais desnecessários. Consideramos que o leitor deveria se identificar com nossa causa pelos textos e dicas apresentados, sendo assim o uso de cores não foi ampliado, para as imagens usamos como inspirações nossas pesquisas sobre o assunto, em cima delas foram desenvolvidas ícones que servem como auxílio no entendimento do trecho que as acompanha. Sobre o uso dos textos da página, a intenção foi atiçar a curiosidade do usuário sem que ele perdesse o interesse, por causa disso usamos de uma linguagem simples e autoexplicativa. 6. Contextualização: Para contextualizarmos nossa Landing Page ao assunto proposto criamos uma empresa fictícia com nome de SOS-TECH, sendo ela uma ONG com um apelo voltado para o público mais jovem, usando uma linguagem mais informal, mas, ao mesmo tempo, que busca atrair a atenção de outros públicos interessados sobre o assunto da TI verde. A ONG busca oferecer uma newsletter com dicas de sustentabilidade e relatórios sobre as ações em prática na sociedade, mantendo sempre um contato próximo com os assinantes que cadastrarem o e-mail em nosso sistema. Buscamos acima de tudo motivar os usuários que acessam a Landing Page a notarem novamente a importância da sustentabilidade em nossas vidas e que isso se torne cada vez mais uma parte essencial. 7. Desenvolvimento da Landing Page: Nossa página foi desenvolvida em conjunto com o Bootstrap, que nos auxiliou com a otimização do tempo de produção do site e na facilitação da implementação dos recursos visuais. Além dele usamos tags como <div> e <center> do HTML para podermos organizar o layout da melhor forma que conseguimos e <li> para uma melhor apresentação do conteúdo. As imagens foram distribuídas pela página a fim de não causar uma impressão de poluição visual e preservar o visual limpo. Já para os textos, tags como <footer> e <article> foram implantadas com objetivo de melhor representar trechos alguns trechos da página. Usamos o CSS na página para complementarmos a formatação de alguns elementos do <div> e das fontes. A busca pelo design mais responsivo possível também esteve entre nossas preocupações, por isso todos os elementos dispostos nessa Landing Page tem sua formatação flexível, para acesso em outros dispositivos além do computador. 8. Linhas de Código: 9. Referências: https://resultadosdigitais.com.br/especiais/landing-page/ https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML https://www.caelum.com.br/apostila-html-css-javascript/introducao-a-html-e-css/#tags-html https://lrodrigo.sgs.lncc.br/wp/dicas/bootstrap-introducao/ https://blocodenotasfatec.wordpress.com/tag/significado-das-tags-html/ https://developer.mozilla.org/pt-BR/docs/Aprender/CSS/Introduction_to_CSS https://guilhermemuller.com.br/ead/html-css-na-pratica/introducao-css https://www.infoescola.com/informatica/html/ https://getbootstrap.com.br/docs/4.1/about/overview/ https://tableless.com.br/uma-breve-historia-do-css/
Continue navegando
Materiais relacionados
Perguntas relacionadas
