APS - Sustentabilidade Energetica - UNIP

Prévia do material em texto

UNIVERSIDADE PAULISTA
CIÊNCIA DA COMPUTAÇÃO
MURILO CESAR MENDES CASTANHO - C19AHI5
RICARDO FERNANDES SOUTO - C13CHI5
WANDERSON MARTINS OLIVEIRA - C202754
YURY RODRIGUES ANUNCIAÇÃO - C203360
DESENVOLVIMENTO DE UM SITE EM XHTML: 
Sustentabilidade Energética
SÃO PAULO
2014
SUMÁRIO
1 INTRODUÇÃO...........................................................................................................2
2 OBJETIVOS...............................................................................................................3
2.1 Geral........................................................................................................................3
2.2 Específicos.............................................................................................................3
3 SUSTENTABILIDADE ENERGÉTICA.......................................................................4
3.1 Eficiência energética.............................................................................................5
3.2 Energias renováveis.............................................................................................6
4 CONTRIBUIÇÃO DO TRABALHO NA NOSSA FORMAÇÃO.................................8
4.1 Interdisciplinaridade envolvida...........................................................................9
4.2 Organização da equipe.......................................................................................11
5 PROJETO DO SITE.................................................................................................13
6 RELATÓRIO COM AS LINHAS DE CÓDIGO DO SITE.........................................17
6.1 layout......... ...........................................................................................................17
6.2 main.css...............................................................................................................20
7 APRESENTAÇÃO DO SITE EM FUNCIONAMENTO EM UM COMPUTADOR....27
REFERÊNCIAS...........................................................................................................34
2
1 INTRODUÇÃO
Vivemos em um planeta com recursos finitos e uma população mundial cada
vez maior. Saber utilizar os recursos energéticos com eficiência, conseguindo
satisfazer as necessidades da atual geração sem prejudicar as próximas é de
grande importância. 
Iniciativas que ajudam a diminuir os impactos do homem sobre a natureza
e/ou que transmitam informações sobre sustentabilidade energética e principalmente
eficiência energética de forma clara e simples para a população, são de vital
importância para conseguirmos atingir a sustentabilidade energética.
Este trabalho foi realizado tendo dois objetivos principais. O primeiro é
dissertar sobre sustentabilidade energética e seus dois pilares, eficiência energética
e energias sustentáveis. O segundo é desenvolver um site com base nas
dissertações. Apresentando atitudes que pessoas comuns podem ter no dia a dia
para utilizar de maneira racional os recursos energéticos.
3
2 OBJETIVOS
2.1 Geral
Pesquisar e dissertar sobre sustentabilidade energética e elaborar um site em
XHTML sobre o tema.
2.2 Específicos
São objetivos específicos deste trabalho: 
• Pesquisar e dissertar sobre sustentabilidade energética;
• Pesquisar e dissertar sobre eficiência energética;
• Pesquisar e dissertar sobre energias sustentáveis;
• Elaborar um site com base nas dissertações utilizando XHTML e CSS.
4
3 SUSTENTABILIDADE ENERGÉTICA
Sustentabilidade energética é a utilização dos recursos energéticos de modo
que satisfaça as necessidades da atual geração sem prejudicar as próximas.
Utilizando os recursos energéticos sem causar grandes impactos no meio ambiente
e de maneira sustentável.
As sociedades precisam dos recursos naturais para continuar desenvolvendo-
se e melhorando a qualidade de vida de sua população. Não se pode parar com a
utilização destes recursos, pois isto acarretaria uma degradação da sociedade,
voltando, em termos tecnológicos e de qualidade de vida, para séculos passados.
O planeta tem uma quantidade limitada de recursos naturais disponíveis para
o ser humano utilizar. Esta quantidade foi mais que suficiente para atender a
demanda das gerações passadas. Mas, neste atual estágio da humanidade, com
seus mais de 7 bilhões de pessoas, alguns destes recursos começam a dar sinais
de que estão chegando ao fim. 
Utilizá-los para não só manter, mas continuar evoluindo a tecnologia e a
cultura da sociedade é extremamente importante. No entanto, muito mais importante
é conseguir garantir que os nossos filhos e os filhos destes tenham recursos que
possam satisfazer suas necessidades. Pois de nada adianta toda a evolução que
tivemos e continuamos a ter, se as próximas gerações não terão uma qualidade de
vida no mínimo igual a nossa e que permita a utilização destas tecnologias.
Para conseguir a sustentabilidade energética é preciso a união entre a
sociedade, a economia e o meio ambiente. A sociedade, porque se não respeitamos
e cuidados de nós mesmos não podemos cuidar do meio ambiente. Além disto o ser
humano está integrado ao planeta, precisa dos recursos naturais para sobreviver, e
portanto, é a parte principal desta equação.
A economia é dependente dos recursos, principalmente os energéticos. Sem
os recursos energéticas a economia não continua crescendo e desenvolvendo-se.
Se não desenvolve, a qualidade de vida da população tem um regresso. E se isto
acontece, deixamos de lado a busca pela sustentabilidade e passamos a perseguir a
qualidade de vida outrora tivemos. Para haver sustentabilidade é preciso que os
recursos energéticos continuem a fornecer a energia necessária para movimentar a
economia. Portanto, buscar a sustentabilidade energética deve ser um dos principais
objetivos, se quisermos ter sustentabilidade.
5
Preservar o meio ambiente, como ficou bem claro, é preservar a espécie
humana. Somos seres integrados e dependentes da natureza. Se os recursos
naturais ficam escassos ou acabam, o tempo de vida da população como um todo
diminui. Saber utilizar os recursos naturais, e dentre eles, principalmente os
energéticos, é de extrema importância para a sobrevivência do ser humano.
3.1 Eficiência energética
Eficiência energética é a relação entre a quantidade consumida de energia
para determinado aparelho funcionar, e o quanto de energia que realmente foi
utilizada por ele para realizar sua função. Ou seja, quanto menos energia for
utilizada para que um equipamento funcione, mais eficiente ele é.
Em toda atividade que envolva energia elétrica, ocorre uma perda da energia,
que não é utilizada efetivamente para realizar a atividade que se deseja. Por
exemplo, uma lâmpada incandescente tem como função iluminar o local onde se
encontra. Ela deveria transformar toda a energia fornecida em luz. Mas, isto não
ocorre. A lâmpada incandescente transforma apenas 8% da energia em luz. O
restante vira calor. Ou seja, sua eficiência é de apenas 8%.
Já a lâmpada fluorescente tem uma eficiência de 32%. Se comparada a
lampada incandescente ela é muito superior em termos de eficiência energética.
Pode parecer pouco, 32%, mas já é uma grande economia de energia e de dinheiro
para o utilizador. Somando-se todas as casas e industrias que utilizam a lâmpada
fluorescente no planeta, teremos um grande redução no consumo de energia e uma
grande eficiência energética.
Este princípio, consumir menos energia tendo o mesmo resultado, pode ser
aplicado a qualquer aparelho e qualquer atividade que desempenhamos. Pensando
em incentivar as empresas a fabricarem produtos mais eficientes, foi criado no Brasil
o selo Procel, do Programa Nacional de Conservação de Energia Elétrica, em1993.
Este selo classifica os eletrodomésticos de acordo com sua eficiência energética. O
que ajuda e influência o consumidor na hora de decidir qual aparelho comprar. E
como consequência, estimula as fabricantes a desenvolverem produtos cada vez
mais eficientes.
Os aparelhos não são os únicos onde devemos aplicar a eficiência
energética. Ela deve ser aplicada também nas atividades que realizamos, seja elas
6
do dia a dia ou não. Este conceito é chamado de “Utilização Racional da Energia”
(URE). Se cada um, por exemplo, apagar as lâmpadas quando deixar o local onde
se encontra, estará utilizando a energia de forma racional.
O desperdício de energia não é somente causado pelos aparelhos, mas
também pelo uso que fazemos deles. Toda pessoa deve ter consciência de como
está utilizando a energia e ter atitudes que ajudam a consumir menos. Atitudes
simples, feitas no decorrer do dia, tem um impacto muito grande quando levamos
em conta toda a população do planeta.
Divulgar para a população manerias de ter maior eficiência energética é de
fundamental importância para atingirmos a sustentabilidade energética. Informando
quais produtos são mais eficientes, como já feito pelo programa Procel, mas
expandindo o selo para outros eletrodomésticos; listando quais aparelhos de uma
casa consome mais energia, ajudando a diminuir seu uso e a utilizá-los de modo
racional; e principalmente, divulgando atitudes simples que cada pessoa pode ter no
dia a dia, mas que são muito importantes para preservar os recursos naturais.
O primeiro pilar da sustentabilidade energética é a eficiência energética. O
segundo são as fontes renováveis de energia. Enquanto o primeiro foca na utilização
eficiente da energia, o segundo diz respeito a forma como será produzida esta
energia.
As energias renováveis têm como fonte os recursos naturais que são
reabastecidos naturalmente pelo planeta, sem precisar da intervenção humana. As
mais conhecidas e divulgadas, são a eólica, solar e hidráulica. Mas existem muitas
outras, como as de biomassas, geotérmicas e mareomotriz.
Cada uma delas tem uma vantagem específica se comparada as demais. E
cabe a cada país, empresa e indivíduo escolher a melhor, dependendo de diversos
fatores para esta escolha, como o local a ser instalada, a quantidade de energia que
deve ser produzida, os gastos na implementação, entre outros. Não existe uma
melhor em todos os sentidos, existe aquela que é adequada a cada caso.
Existem diversas vantagens que as fontes de energias renováveis
apresentam se comparadas as demais. A primeira delas, e a mais conhecida, é a de
suprir com qualidade e eficiência grande parte da dependência que existe
3.2 Energias renováveis
7
atualmente dos combustíveis fósseis, como o petróleo. E como consequência
aumenta a independência energética do país, que já não precisa importar em grande
quantidade os combustíveis fósseis. 
Reduzem as emissões de CO2, melhorando a qualidade do ar e da vida no
planeta. Além disto não têm um risco tão alto quanto o da energia nuclear. E se
comparadas as outras fontes de energia, causam um pequeno impacto no meio
ambiente, como o desmatamento (no caso das hidrelétricas) e a poluição (no caso
das biomassas). Mesmo que ainda emitam certa quantidade de poluição, são muito
menores que as das energias não renováveis.
A grande quantidade de vantagens das energias renováveis é responsável
pelo crescimento de sua utilização em diversos países. O Brasil está entre os países
que mais adotam essas fontes de energia. Em outubro de 2003, segundo
levantamento da ANEEL (Agência Nacional de Energia Elétrica), as energias
renováveis contribuíram com 83% da energia elétrica utilizada no país. Desta
porcentagem, 79% vieram das usinas hidrelétricas, como já era esperado. Outras
fontes de energias como a eólica, solar e biomassas contribuíram com 4%.
A implementação das energias renováveis em larga escala é um caminho
inevitável e sem volta. Elas, junto com a eficiência energética, serão responsáveis
por conseguirmos atingir cada vez mais a sustentabilidade energética. Melhorando a
qualidade de vida da atual geração e suprindo suas necessidades, sem prejudicar as
futuras gerações.
8
4 CONTRIBUIÇÃO DO TRABALHO NA NOSSA FORMAÇÃO
Escolhemos sustentabilidade energética como tema do trabalho, pois é um
dos assuntos mais importantes deste século. Não envolve apenas os governos dos
países, empresas e empresários, envolve toda a sociedade mundial, não importando
a classe social nem a escolaridade dos indivíduos da mesma.
A sustentabilidade energética tem que ser aplicada por todo cidadão que
deseja um mundo melhor, não somente para ele como para seus descendentes.
Este trabalho nos propiciou termos um estudo mais aprofundado sobre este tema,
sobre seu significado, sua importância, sua relação com a sociedade e o meio
ambiente, em fim, um tema que mudou nossa maneira de encarar as fontes de
energias e sua utilização.
Se antes não dávamos tanto importância para a energia, tendo ela como uma
coisa comum e normal da sociedade, que não valeria a pena parar e pensar sobre
ela, agora temos uma outra postura sobre este mesmo assunto. Antes a energia
somente importava quando a conta de energia chegava, e quando tínhamos que
reduzir o consumo e gasto da mesma (quando vinha muito auto o valor a ser pago).
Pesquisar e refletir sobre as fontes deste bem tão precioso para a sociedade,
que permitiu saltos tecnológicos gigantescos, desde sua invenção, acreditamos,
agora, ser algo que todo cidadão deveria fazer. O conhecimento adquirido e o tempo
empregado no estudo, nunca foi nem nunca será um desperdício nem perda de
tempo. Será utilizado pelo resto de nossas vidas e transmitiremos este
conhecimento para nossos descendentes.
Do ponto de vista do cidadão comum, como é o nosso caso, conhecer as
fontes renováveis de energia e a eficiência energética é extremamente importante,
principalmente a última. As energias renováveis podem ser utilizadas por todo
cidadão da sociedade, os casos mais comuns é da energia solar (utilizadas na
maioria das vezes no telhado das casas) e a energia eólica (principalmente nas
áreas rurais ou com amplo espaço aberto).
A implementação da energia solar está cada vez mais barata, e saber suas
vantagens é de grande importância, pois pode-se planejar a construção de uma
casa que utilize esta fonte de energia ou adaptar uma casa já construída. Além de
economizar energia e na conta, ajuda o meio ambiente. A possibilidade de
utilizarmos a energia solar em nossas casas, no futuro, é muito alta.
9
A eficiência energética é um tema muito rico e interessante, sendo o que
apresenta a maior quantidade de soluções práticas que contribuem para a
sustentabilidade energética. A pesquisa e discussão sobre este assunto foi de
grande importância, não só para o trabalho, mas para nossas vidas. Algumas
práticas já aplicávamos no dia a dia, outras foram novas para nós.
Aplicaremos os conceitos apreendidos no decorrer deste trabalho durante
toda a nossa vida. Conceitos simples, mas de fundamental importância para
conseguirmos preservar os recursos energéticos e o futuro das próximas gerações.
4.1 Interdisciplinaridade envolvida
Este trabalho, embora simples, envolveu diversas disciplinas que estudamos
durante o decorrer do curso de Ciência da Computação. Aplicamos na prática os
conceitos estudados em sala de aula, e entendemos o porque de termos estas
disciplinas na grade curricular.
Eletricidade e Óptica, embora não tenha sido empregada da mesma maneira
que as demais, ainda assim estava presente neste trabalho. Quando pesquisamos e
estudamos as fontes deenergias renováveis, a eletricidade e seus conceitos, como
não poderia deixar de ser, estavam presentes. Saber, mesmo que de forma básica
como funciona a geração de energia, permitiu entender de forma mais clara os
conceitos de cada energia renovável.
Tópicos de Matemática Aplicada, também estava presente, principalmente na
eficiência energética. Na hora de calcular a eficiência energética dos diversos
modelos de lâmpadas; qual combustível é mais vantajoso, o etanol ou a gasolina, e
quando escolher um ou outro; o controle do tempo empregado na construção do site
e no desenvolvimento do trabalho; e em muitas outras atividades. A matemática
sempre esteve sempre estará ligada ao ser humano Em praticamente todas as
atividades ela está envolvida, conhecer seus conceitos, portanto, é fundamental.
A disciplina de Homem e Sociedade estava envolvida quando pensamos na
relação do ser humano com o meio ambiente e com sua própria espécie. Cuidar do
meio ambiente é muito importante, mas cuidar do ser humano é mais importante
ainda. Não adianta buscar a sustentabilidade energética sem, ao mesmo tempo,
buscar melhorar as condições de vida dos membros da sociedade. Além disto, todas
as pequisas e descobertas na área de sustentabilidade, e todas as práticas de
10
eficiência energética, são passadas de geração para geração. E quanto mais
ensinamos aos nossos descendentes estes conceitos, mas empregados na
sociedade e no seu modo de vida eles estarão, e em poucas décadas, eles farão
parte da cultura da sociedade.
Noções de Direito foi aplicada no trabalho desde o início do mesmo. Durante
a pesquisa, o desenvolvimento do trabalho e a elaboração do site, tivemos sempre o
cuidado de não copiar, plagiar, o trabalho de outra pessoa. Para todo texto retirado
de sites, blogs, ebooks e demais meios de informação, foram citados os autores na
bibliografia e na página do site em que foi inserido. O plágio não é errado somente
por atribuir para si o trabalho de outra pessoa, é errado também por descartar todo o
esforço e dedicação que o verdadeiro autor teve ao criar sua obra, é não dá crédito
e agradecer a ele por ter nos ajudado a entender os assuntos pesquisados, adquirir
novos conhecimentos e desenvolver nosso trabalho.
A disciplina de Interpretação e Produção de Texto foi a mais utilizada. Os
conceitos e técnicas adquiridos em sala de aula, principalmente sobre gêneros
textuais e elaboração de textos coerentes e coesos, foram de extrema importância
para redigir textos claros e eficientes em transmitir as informações que pretendíamos
passar aos leitores do site que desenvolvemos e ao redigir este trabalho.
Tópicos em Ambiente Web forneceu a base teórica que precisávamos para
elaborar o site sobre sustentabilidade energética. Aplicamos os conceitos mais
importantes da disciplina, entre eles podemos citar: a estratégia para
desenvolvimento de um site; qual o público alvo; o conteúdo que seria inserido no
site; técnicas de design; proximidade e alinhamento dos elementos; equilíbrio,
proporção e simetria; contrastes, cores e branco; e muitos outros conceitos;
A última disciplina da grade curricular do curso, e como não poderia deixar de
ser, também foi utilizada neste trabalho. Os conceitos e técnicas da disciplina de
Desenvolvimento em Ambiente Web foram aplicados na criação do site, desde sua
estrutura até o conteúdo inserido no mesmo. A Linguagem de Marcação de
Hipertexto, HTML, foi empregada na base do site, na espinha dorsal. Sendo
responsável, efetivamente, pelos elementos apresentados no navegador.
Todas as disciplinas e seus conteúdos foram utilizadas na elaboração do
trabalho e no desenvolvimento do site. Verificamos, portanto, que nenhuma delas
está sendo ensinada no curso de Ciência da Computação sem motivo. Elas estão
intrinsecamente ligadas as profissões que seguiremos quando terminar a graduação.
11
Estudá-las com afinco, motivação e entusiasmo é primordial para termos sucesso
tanto no decorrer do curso quanto na área de TI que decidirmos seguir.
4.2 Organização da equipe
Uma das partes fundamentais deste trabalho foi a organização da equipe e da
divisão de tarefas. Para todos os membros, foi novidade a elaboração de um site em
grupo. Demorou algum tempo até conseguirmos um entrosamento ideal para
desenvolver o trabalho sem complicações.
Primeiramente foi preciso entender e conhecer os pontos fortes e fracos de
cada membro, além de seu tempo disponível para dedicar ao trabalho. Sem estas
informações seria impossível termos um excelente resultado e uma boa
organização. Com base nisto, definimos a quem caberia determinada tarefa.
O próximo passo foi estabelecer prazos para a conclusão de cada uma das
tarefas. Prazos estes, já estabelecidos de acordo com o tempo disponível de cada
membro. Ocorreu dos prazos serem extrapolados algumas vezes. Mas mesmo
assim nos mantivemos dentro do cronograma.
Assim que cada etapa era concluída, o trabalho de cada membro era
compartilhado com os demais, para todos avaliarem e discutirem sobre os mesmos.
Desta forma sempre estávamos corrigindo erros, sugerindo alterações ou refazendo
a tarefa, quando o resultado não era o ideal.
Outro ponto importante durante o desenvolvimento do site, foi o estudo sobre
CSS (Cascading Style Sheets, quem em português significa folhas de estilo em
cascata) que alguns membros tiveram que realizar, para poderem acompanhar o
trabalho dos demais.
Nem todos os membros conheciam e sabiam utilizar CSS. No entanto, foi
importante utilizar esta linguagem de folhas de estilos, pois agiliza o
desenvolvimento do site, sua manutenção e apresenta um resultado mais refinado e
profissional quando comparado ao HTML puro.
Estes conjuntos de etapas para o desenvolvimento do site foram
extremamente importantes para nossa formação. Aprendemos na prática como
funciona o gerenciamento de equipes para elaboração e conclusão de projetos.
Além de alguns membros terem sidos estimulados a aprenderem novas tecnologias,
novas habilidades, de forma autodidata, sem depender somente dos conteúdos
12
ensinados em sala de aula.
Na área de TI, principalmente, ser autodidata é extremamente fundamental
para conseguir manter-se no mercado de trabalho. A tecnologia avança em um ritmo
acelerado, e quem não consegue acompanhar este ritmo fica desatualizado. Estar
sempre acompanhando as novidades e novas tecnologias, e estudando por conta
própria, será essencial para qualquer profissional que desejar ser bem sucedido
profissionalmente.
Este projeto da APS contribuiu de muitas outras maneiras na nossa formação,
podemos citar principalmente: instigando nosso desejo pelo conhecimento,
forçando-nos a aprender novas tecnologias, nos impelindo a ter disciplina, e a
entender que não podemos ficar parados esperando que tudo vai se resolver
facilmente. Tivemos o prazer de sentir parte da “emoção” que sentiremos no
decorrer do curso e como profissional de TI.
13
O primeiro passo que tomamos para desenvolver o site foi escolher a marca
dele. O tema do trabalho é sustentabilidade energética, e o site teria um foco
especial na eficiência energética. Portanto achamos ideal deixar isto claro no nome
do site. Dentre os diversos nomes que criamos, preferimos Portal da Eficiência
Energética, para quem quer lê intuitivamente já saber o foco do site.
Com o nome escolhido passamos para a criação da logomarca. Pensamos
em deixar bem destacada a palavra Eficiência Energética, e as cores escolhidas
para a logomarca foram as que remete ao selo Procel, um degradê que vai do
vermelho ao verde. O nome “Portal da”, deixamos de fora da imagemda logomarca,
preferimos escrevê-lo em HTML em cor branca. Além disto adicionamos um raio no
centro da marca, para simbolizar a eletricidade. Finalizada (Figura 1), a logomarca
ficou perfeita para o tema do site.
 
 Figura 1 – Eficiência Energética
 
Fonte: Elaborada pelos autores
Com a logomarca terminada, demos inicio a definição da paleta de cores que
seriam utilizadas no site. As cores escolhidas foram retiradas da logomarca, para
deixar o site harmônico e consistente. Optamos por tons de laranja, amarelo, verde e
vermelho.
Escolhemos as cores verdes para os menus e rodapé. O laranja escuro para
os títulos e subtítulos das páginas. O vermelho escuro para os links dentro dos
textos. E a cor amarelo escuro para balões de informações e dicas. A única exceção
foi na homepage, que optamos por utilizar a cor laranja escuro para caixas de textos
com links apontado para páginas internas.
Utilizamos uma tonalidade de cinza escuro como plano de fundo para o topo
do site, antes do menu horizontal. Esta foi a única cor que combinou perfeitamente
com a logomarca e destacou a mesma. Preferimos também deixar somente a
logomarca no topo, para ter um design simples, limpo, e que chame a atenção para
o nome do site.
5 PROJETO DO SITE
14
Antes de darmos inicio a criação do design do site, preferimos definir o
público-alvo a qual ele se destina. Para assim, poder escolher de forma precisa os
elementos que seriam adicionados ao layout. Com todos os membros da equipe
reunidos, decidimos focar o site nas pessoas comuns, que não tem conhecimentos
técnicos nem tem interesse de aprofundar-se no assunto.
O próximo passo foi definir quais páginas o site teria. A linguagem dos textos
teria que ser simples e direta. As páginas não poderiam ter assuntos profundamente
técnicos, para que o público-alvo consiga entender com clareza a mensagem que
estamos tentando passar.
Optamos então por colocar somente os assuntos principais ligados a
sustentabilidade energética. Definimos então as páginas que o site deveria ter:
• Home: a página de entrada do usuário. Nela seria colocado os links para as
páginas internas;
• Uso consciente: seria inserido textos com dicas de como utilizar a energia de
forma racional, ajudando o meio ambiente e diminuindo a conta de energia.
Acreditamos que seria uma das páginas mais acessadas, por causa de seu
conteúdo;
• Sustentabilidade: transmitiria de forma simples e direta o que é
sustentabilidade energética;
• Eficiência Energética: conteria um texto escrito de forma clara explicando o
que é eficiência energética, onde ela pode ser utilizada e o que é o Uso
Racional da Energia (URE);
• Energias renováveis: uma página explicando o conceito de energias
renováveis e descrevendo algumas das fontes de energias renováveis mais
utilizadas atualmente;
• Os melhores carros flex de 2014: esta página conteria um texto listando os
carros flex comercializados no começo de 2014 e que eram mais eficientes
quando abastecidos com etanol do que com gasolina;
• Materiais para estudo: nesta página seria disponibilizado ebooks que os
usuários poderiam baixar para aprofundar seus conhecimentos sobre
sustentabilidade energética e eficiência energética.
Com as páginas definidas, alguns membros da equipe ficaram responsáveis
por redigir os textos que seriam colocados nelas. Os demais membros ficaram
15
encarregados de desenvolver o site.
Iniciamos a produção do site desenvolvendo uma página genérica que serviria
de modelo para as demais páginas. Decidimos criar um layout simples, utilizando
apenas XHTML e CSS: um topo com a logomarca; um menu horizontal abaixo do
topo, contendo links para as páginas principais do site; um rodapé com os links
principais do site; e abaixo do rodapé um texto informando o copyright do site;
O cor de fundo do topo ficou em cinza escuro, o menu horizontal abaixo dele
em verde escuro, a parte central do site que conteria o conteúdo das páginas ficou
em branco, e o rodapé e a parte de copyright em verde escuro(na mesma tonalidade
do menu horizontal superior).
No rodapé, além dos links para as páginas principais do site, decidimos
colocar links para sites com conteúdos excelentes sobre sustentabilidade e
eficiência energética. Para que os usuários tenham acesso a estes conteúdos e
possam adquirir novos conhecimentos.
Em todas as páginas, com exceção da home page, foi colocada duas caixas
do lado direito do texto central, imitando um menu vertical. Uma das caixas contém
um link para a página de “uso consciente” e a outra para “materiais de estudo”.
Desta forma, influencia os usuários a visitarem estas páginas específicas e a
aprofundarem seus conhecimentos.
A estrutura do site, depois de finalizado, ficou como na Figura 2:
16
Figura 2 – Estrutura do site
Fonte: Elaborada pelos autores
6.1 layout
17
 RELATÓRIO COM AS LINHAS DE CÓDIGO DO SITE
Como todas as páginas têm a mesma estrutura, mudando apenas o conteúdo
central de cada uma delas, será incluído neste trabalho apenas o código do layout
do site e o arquivo CSS responsável pela aparência de todas as páginas. Preferimos
desta maneira para o código encaixar em exatamente 10 páginas.
6 6 
1 <!DOCTYPE html>
2 <html lang="pt-br">
3 <head>
4 <meta charset="utf-8">
5 <title>Portal da Eficiência Energética</title>
6 <link rel="stylesheet" type="text/css" 
href="styles/main.css">
7 </head>
8 <body>
9 <div id="header">
10 <div class="header">
11 <div id="logo-marca"> 
12 <p>Portal da </p>
13 <img src="img/logo-raio-2.png" title="Portal 
da Eficiência Energética" alt="Portal da Eficiência Energética" 
/>
14 </div> 
15 </div>
16 </div>
17 <div id="menu-topo">
18 <div class="menu-topo">
19 <ul>
20 <li class="menu-topo-home">
21 <a href="index.html" class="menu-topo-
active">Home</a>
22 </li>
23 <li>
24 <a href="uso-consciente/index.html">Uso 
consciênte</a>
25 </li>
26 <li>
27 <a 
href="sustentabilidade/index.html">Sustentabilidade</a>
28 </li>
29 <li>
30 <a href="eficiencia-
energetica/index.html">Eficiência Energética</a>
31 </li>
32 <li>
33 <a href="energias-
renovaveis/index.html">Energias Renováveis</a>
34 </li>
35 <li>
36 <a href="ebooks/index.html">Ebooks</a>
37 </li>
38 </ul>
39 </div>
40 </div>
41
42 <div id="content">
43 <div class="content"> 
44 
45 <!-- Conteúdo das páginas -->
46 
47
 </div>
48 </div>
49 <div id="footer">
18
50 <div class="footer">
51 <div class="links-internos">
52 Portal da Eficiência Energética
53 <ul>
54 <li>
55 <a href="uso-
consciente/index.html">Uso consciênte</a>
56 </li>
57 <li>
58 <a 
href="sustentabilidade/index.html">Sustentabilidade 
Energética</a>
59 </li>
60 <li>
61 <a href="eficiencia-energetica/index.html">Eficiência Energética</a>
62 </li>
63 <li>
64 <a href="energias-
renovaveis/index.html">Energias Renováveis</a>
65 </li>
66 <li>
67 <a href="melhores-carros-
flex/index.html">Os melhores carros flex de 2014</a>
68 </li>
69 <li>
70 <a 
href="ebooks/index.html">Materiais para estudo</a>
71 </li>
72 <li>
73 <a href="contato/index.html">Entre 
em Contato</a>
74 </li>
75 </ul>
76 </div>
77 <div class="links-importantes">
78 Sites recomendados
79 <ul>
80 <li>
81 <a 
href="http://www.inee.org.br">INEE - Instituto Nacional de 
Eficiência Energética</a>
82 </li>
83 <li>
84 <a 
href="http://www.mma.gov.br/clima/energia/eficiencia-
energetica">MMA - Ministério do Meio Ambiente</a>
85 </li>
86 <li>
87 <a href="http://www.rge-
rs.com.br">Rio Grande Energia - Eficiência Energética</a>
88 </li>
89 <li>
90 <a 
href="http://www.abve.org.br/">ABVE - Associação Brasileira do 
Veículo Elétrico</a>
91 </li>
92
19
6.2 main.css
 <li>
93 <a 
href="http://www.cogenrio.com.br/">COGENRIO - Associação 
Fluminense de Cogeração de Energia</a>
94 </li>
95 </ul>
96 </div> 
97 </div>
98 </div>
99 <div id="footer-copyright">
100 <div class="footer-copyright">
101 2014 &copy PEE - Portal da Eficiência 
Energética. Todos os direitos reservados
102 </div>
103 </div>
104 </body>
105 </html>
20
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquo
te,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q
,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,
ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,
th,td,article,aside,canvas,details,embed,figure,figcaption,footer,he
ader,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,vid
eo{border:0;font-size:100%;font:inherit;vertical-
align:baseline;margin:0;padding:0}article,aside,details,figcaption,f
igure,footer,header,hgroup,menu,nav,section{display:block}body{line-
height:1}ol,ul{list-
style:none}blockquote,q{quotes:none}blockquote:before,blockquote:aft
er,q:before,q:after{content:none}table{border-
collapse:collapse;border-spacing:0}
/* Fim do reste */
body {
 font-family: Arial, Verdana;
 line-height: 1.6;
 font-size: 15px;
 color: #3333333;
 background: #F1F1F1;
}
strong {
 font-weight: bold;
}
/* Header */
#header {
 height: 100px;
 background: #333;
}
.header {
 margin: auto;
 padding: 29px 0 0 10px;
 position: relative;
 width: 1014px;
 height: 100px;
 background: #333333;
}
#logo-marca p {
 position: absolute;
 top: 17px;
 margin-right: 5px;
 color: #DEDEDE;
 text-transform: uppercase;
 font-size: 15px;
}
/* Menu */
#menu-topo {
 width: 100%;
 text-align: center;
 background: #2f8a0a;
}
.menu-topo {
 margin: auto;
 padding: 0;
 position: relative;
 width: 1024px;
21
 height: 40px;
 background: #2f8a0a;
 text-align: center;
 overflow: hidden;
}
.menu-topo ul li {
 float: left;
 height: 40px;
 min-width: 150px;
 padding: 0;
 line-height: 3.5; 
 border-right: 1px solid #258000;
 color: #E9E9E9;
 font-size: 12px;
 text-transform: uppercase;
}
.menu-topo ul li a:hover, .menu-topo ul li a {
 display: block;
 padding: 0 31px 0 31px;
 text-decoration: none; 
 color: #FFFFFF;
}
.menu-topo ul li a:hover, .menu-topo .menu-topo-active {
 background: #73a811;
}
.menu-topo-home {
 min-width: 100px !important;
 width: 100px !important;
}
/* Content */
#content {
 width: 100%;
 background: #F1F1F1;
 padding-top: 15px;
 padding-bottom: 15px;
}
.content {
 margin: auto;
 padding: 15px 15px 60px 15px;
 position: relative;
 width: 994px;
 background: #FFFFFF;
 border-radius: 5px;
 overflow: hidden;
}
/* Footer */
#footer {
 width: 100%;
 text-align: center;
 background: #2F8A0A;
}
.footer {
 margin: auto;
 position: relative;
 width: 974px;
 height: 205px;
 background: #2F8A0A;
22
 padding: 25px 0 0 50px;
}
#footer-copyright {
 width: 100%;
 text-align: center;
 background: #206F00;
}
.footer-copyright {
 margin: auto;
 position: relative;
 width: 996px;
 height: 18px;
 background: #206F00;
 padding: 14px;
 color: #B7B7B7;
 font-size: 12px;
}
.links-internos, .links-importantes {
 float: left;
 width: 480px;
 height: 150px;
 color: #F1F1F1;
 font-size: 17px;
 font-weight: bold;
 text-align: left;
 line-height: 1.2;
}
.links-internos ul, .links-importantes ul {
 list-style: none;
 margin-top: 7px;
}
.links-internos a:link , .links-importantes a:link, .links-internos 
a:visited , .links-importantes a:visited, .links-internos a:active , 
.links-importantes a:active {
 color: #FFFFFF;
 font-size: 12px;
 font-weight: normal;
 text-decoration: none;
}
.links-internos a:hover , .links-importantes a:hover {
 text-decoration: underline;
}
/********** Páginas ***********/
.content h1, .content h2 {
 margin-top: 28px;
 text-transform: uppercase;
 font-weight: bold;
 color: #f38b1c;
}
.content h1 {
 font-size: 22px;
}
.content h2 {
 font-size: 20px; 
}
.content .h1-first {
 margin-top: 0px;
23
}
.content p {
 margin-top: 15px;
 line-height: 1.6;
 color: #333333;
 text-align: justify;
}
.content img {
 margin-top: 15px;
}
#content-page {
 float: left;
 width: 765px;
}
#menu-right-content {
 width: 190px;
 height: 100%;
 float: left;
 margin-top: 0px;
 margin-left: 39px;
}
#menu-right-box {
 margin: 0 0 18px 0;
 background: #ECECEC;
 border: 2px solid #FFFFFF;
 border-radius: 5px;
}
#menu-right-box:hover {
 border: 2px solid #ecc037;
}
#menu-right-box:hover .menu-right-box-title {
 border-radius: 0px;
}
#menu-right-box .menu-right-box-title {
 background: #ecc037;
 border-radius: 5px;
 padding: 8px;
 font-size: 14px;
 font-weight: bold;
 color: #FFFFFF;
}
#menu-right-box .menu-right-box-text {
 padding: 8px 10px 10px 9px;
 color: #333333;
 font-size: 14px;
 text-align: justify;
}
a.link-menu-right-box:link, a.link-menu-right-box:visited, a.link-
menu-right-box:hover, a.link-menu-right-box:active {
 text-decoration: none;
 color: red;
}
/* Imagem grande das páginas */
.img-big-page {
 width: 1024px;
 height: 215px;
 position: relative;
24
 margin: auto;
 padding: 0;
 border-radius: 5px 5px 0 0;
 overflow: hidden;
}
.img-big-page div {
 position: absolute;
 width: auto;
 top: 85px;
 padding: 12px;
 background: rgba(255, 255, 255, 0.9);
 border-radius: 0 5px 5px 0;
 font-size: 22px;
 font-weight: lighter;
 color: #2c464a;
}
/* Home */
.home-box-links {
 float: left;
 margin: 15px 24px 30px 23px;
 width: 280px;
 height: auto;
 background: #ECECEC;
 border-radius: 5px;
 padding: 0 0 10px 0;
 color: #333333;
 min-height: 123px;
 border: 2px solid #FFFFFF;
}
.home-box-links .box-title {
 background: #F38B1C;
 padding: 9px;
 border-radius: 5px 5px 0 0;
 color: #FFFFFF;
 font-size: 14px;
 font-weight: bold;
 line-height: 1.3;
 text-transform:uppercase;
 text-align: center;
}
.home-box-links .box-info {
 padding: 15px;
 font-size: 14px;
 line-height: 1.4;
 text-align: justify;
}
.links-home-box a:link, .links-home-box a:visited, .links-home-box 
a:hover, .links-home-box a:active{
 text-decoration: none;
}
.home-box-links:hover {
 border: 2px solid #ffa500;
}
.home-box-links:hover .box-title {
 border-radius: 0px;
}
/* Comuns */
25
.lo-button-orange {
 float: left;
 clear: both;
 min-width: 21px;
 margin: 0 8px 15px 0;
 padding: 15px 20px 15px 20px;
 background: #ffa500;
 border-radius: 10px;
 color: #FFFFFF !important;
 font-weight: bold;
 font-size: 18px;
 text-align: center !important;
}
.lo-button-text {
 float:left;
 width: 695px;
}
a.link-red:link, a.link-red:visited, a.link-red:active {
 text-decoration: none;
 color: #cf171f;
 font-weight: bold;
}
a.fonte-texto-link:link, a.fonte-texto-link:visited, a.fonte-texto-
link:active {
 text-decoration: none;
 color: #666666;
}
a.link-red:hover, a.fonte-texto-link:hover {
 text-decoration: underline;
}
.fonte-texto {
 font-weight: bold;
 color: #666666;
}
/* Materiais para estudo */
.ebook-icon {
 background: url("../img/icon_pdf.gif") 0 4px no-repeat;
 padding: 0 0 0 20px;
}
26
7 APRESENTAÇÃO DO SITE EM FUNCIONAMENTO EM UM COMPUTADOR
27
28
29
30
31
32
33
34
REFERÊNCIAS
ADENE - AGÊNCIA PARA A ENERGIA. Guia da Eficiência Energética. Disponível 
em: <http://www.adene.pt/sites/default/files/guiaee_v1310.pdf>. Acesso em: 29 de 
maio de 2014.
CELPE. O que é Eficiência Energética. Disponível em: 
<http://www.celpe.com.br/Pages/Efici%C3%AAncia%20Energ%C3%A9tica/o-que-e-
ef-energetica.aspx>. Acesso em: 29 de maio de 2014.
CIDADES ENERGETICAMENTE SUSTENTÁVEIS. Sustentabilidade energética. 
Disponível em: <http://sustentabilidade-
energetica.blogspot.com.br/2009/01/sustentabilidade-energtica.html>. Acesso em: 29
de maio de 2014.
EDP - ENERGIAS DE PORTUGAL. Guia prático da Eficiência Energética: o que 
saber & fazer para sustentar o futuro. Disponível em: 
<http://ws.cgd.pt/blog/pdf/guia_edp.pdf>. Acesso em: 29 de maio de 2014.
EDP - ENERGIAS DE PORTUGAL. Dicas de Eficiência Energética: viva a sua 
casa com uma energia mais sustentável. Disponível em: 
<http://www.edp.pt/pt/particulares/bemvindoaedp/Guia%20Eficiencia
%20Energetica/Guia%20da%20Efici%C3%AAncia%20Energ%C3%A9tica.pdf>. 
Acesso em: 29 de maio de 2014.
FARIA, Caroline Conceição. Eficiência Energética. Disponível em: 
<http://www.infoescola.com/ecologia/eficiencia-energetica/>. Acesso em: 29 de maio 
de 2014.
GALP ENERGIA. A sustentabilidade explicada. Disponível em: 
<http://www.galpenergia.com/PT/sustentabilidade/responsabilidade-corporativa/uma-
atividade-sustentavel/Paginas/a-sustentabilidade-explicada.aspx>. Acesso em: 29 de
maio de 2014.
INSTITUTO IDEAL. Eletricidade Solar. Disponível em: 
<http://www.americadosol.org/wp-
content/uploads/2012/04/CARTILHA_FINAL_web.pdf>. Acesso em: 29 de maio de 
2014.
INSTITUTO NACIONAL DE EFICIÊNCIA ENERGÉTICA. O que é eficiência 
energética?. Disponível em: <http://www.inee.org.br/eficiencia_o_que_eh.asp?
Cat=eficiencia>. Acesso em: 29 de maio de 2014.
INSTITUTO NACIONAL DE EFICIÊNCIA ENERGÉTICA. Uso eficiente do etanol. 
Disponível em: <http://www.inee.org.br/etanol_hidratado.asp?Cat=etanol>. Acesso 
em: 29 de maio de 2014.
INSTITUTO NACIONAL DE EFICIÊNCIA ENERGÉTICA. Flex eficientes com 
etanol. Disponível em: <http://www.inee.org.br/etanol_flex_eficientes.asp?
35
Cat=etanol>. Acesso em: 29 de maio de 2014.
INSTITUTO NACIONAL DE EFICIÊNCIA ENERGÉTICA. Consumo: medições de 
campo. Disponível em: <http://www.inee.org.br/etanol_medidas_campo.asp?
Cat=etanol>. Acesso em: 29 de maio de 2014.
MINISTÉRIO DO MEIO AMBIENTE. Eficiência Energética e Conservação de 
Energia. Disponível em: <http://www.mma.gov.br/clima/energia/eficiencia-
energetica>. Acesso em: 29 de maio de 2014.
PETROBRAS MAGAZINE. Eficiência Energética. Disponível em: 
<http://www.hotsitespetrobras.com.br/petrobrasmagazine/edicoes/edicao55/pt/eficien
ciaenergetica/eficienciaenergetica.html>. Acesso em: 29 de maio de 2014.
RGE – PORTAL EFICIÊNCIA ENERGÉTICA. Dicas de consumo. Disponível em: 
<http://www.rge-rs.com.br/eficienciaRGE/dicasconsumo.aspx>. Acesso em: 29 de 
maio de 2014.
RGE – PORTAL EFICIÊNCIA ENERGÉTICA. Como usar. Disponível em: 
<http://www.rge-rs.com.br/eficienciaRGE/comousar.aspx>. Acesso em: 29 de maio 
de 2014.
SEBRAE. Eficiência Energética. Disponível em: 
<http://www.sustentabilidade.sebrae.com.br/Sustentabilidade/Cartilhas/Efici
%C3%AAncia-Energ%C3%A9tica>. Acesso em: 29 de maio de 2014.
SUA PESQUISA. Energia sustentável. Disponível em: 
<http://www.suapesquisa.com/energia/energia_sustentavel.htm>. Acesso em: 29 de 
maio de 2014.
SUA PESQUISA. Energia Renovável. Disponível em: 
<http://www.suapesquisa.com/o_que_e/energia_renovavel.htm>. Acesso em: 29 de 
maio de 2014.
SUA PESQUISA. Fontes de Energia. Disponível em: 
<http://www.suapesquisa.com/cienciastecnologia/fontes_energia.htm>. Acesso em: 
29 de maio de 2014.
	1 Introdução
	2 OBJETIVOS
	2.1 Geral
	2.2 Específicos
	3 sustentabilidade energética
	3.1 Eficiência energética
	3.2 Energias renováveis
	4 contribuição do trabalho na nossa formação
	4.1 Interdisciplinaridade envolvida
	4.2 Organização da equipe
	5 Projeto do site
	6 Relatório com as linhas de código do site
	6.1 layout.html
	6.2 main.css
	7 Apresentação do site em funcionamento em um computador
	Referências