16. RELATÓRIO
O projeto do site foi executado em etapas distintas, a saber: idealização, planejamento, execução e avaliação.
Na etapa inicial, debatemos como seria a elaboração do site, já que tínhamos decididos pelo tema da pesquisa, ou seja, qual a linguagem que utilizaríamos, qual o design apropriado para o público alvo e o conteúdo limitado conforme as especificações no manual de APS. Com esses questionamentos, chegamos ao consenso de que deveríamos seguir a ordem, ou seja:
1. O tema escolhido foi Desenvolvimento e Sustentabilidade – o impacto da ação humana na natureza;
2. Usaríamos a linguagem técnica, pois, para o tema escolhido era a linguagem mais apropriada;
3. O público alvo do nosso site são estudantes que pesquisam sobre o tema e pessoas que têm interesse nos assuntos abordados;
4. O conteúdo da pesquisa será usado em três formas distintas. No trabalho digitado será apresentado conforme a limitação estabelecida pelo manual de APS; no site o conteúdo será mais sucinto, porém, composto de links direcionados para a página específica no blog, onde terá mais conteúdo da pesquisa realizada e constarão vídeos com informações complementares.
5. Por ser um site mais informativo e voltado para a pesquisa; o layout foi elaborado para que a prioridade seja as informações; recursos simples e fáceis; evitamos uso de algum tipo de imagem que pudesse desviar a atenção do leitor.
O nosso planejamento foi seguido conforme as normas estabelecidas para que obtivéssemos êxito, então, descrevemos o passo a passo do planejamento: fazendo uso de conhecimentos prévios de cada integrante, agregados aos ensinamentos obtidos em sala de aula; fizemos rascunho do modelo do site e dos links específicos para cada assunto relacionado ao tema da pesquisa; buscamos material de estudos e pesquisas que nos auxiliassem nos conteúdos que utilizaríamos no trabalho; determinamos o prazo para cada tarefa e assim, evitar atrasos, levando em consideração ocorrências de algum fato imprevisto, o que facilitou nossa organização no trabalho.
A pesquisa foi realizada em três semanas; fizemos uso de apostilas e livros que acrescentassem informações e que corroborassem com os conteúdos pesquisados; mais interessante é que estivemos em eventos de Atividades Complementares que abordavam sobre a questão do meio ambiente e sustentabilidade, eles foram escolhidos aleatoriamente, ou seja, nada programado.
O site foi criado em uma semana, realizamos todos os testes de funcionalidade e o resultado foi satisfatório. Queríamos adotar uma imagem que representasse o tema do trabalho, já que trataríamos a questão do Meio Ambiente (natureza) e a necessidade da conscientização da humanidade em suas ações controladas para impedir a degradação dos sistemas, porque a eliminação de um, afeta diretamente nos demais, já que todos naturalmente são como um único. A imagem de um olho humano com parte do globo terrestre refletida na retina nos dá o entendimento dessa conscientização e da responsabilidade de cada um de nós na preservação da vida.
A avaliação foi o que tivemos mais tempo de dedicação, para revisão dos conteúdos da pesquisa no texto digitado e nas postagems no site e no blog. Fizemos correções necessárias para que fossem evitados os erros e até mesmo o plágio. Ficamos enaltecidos pela escolha do nosso tema, porque ele concentra todo processo de produção e interação dos sistemas humanos (econosfera e sociosfera) e natureza (ecosfera) e suas fontes de energia, que foram descritos nos trabalhos dos demais colegas, ou seja, usamos uma explicação científica para todos os temas apresentados.
16.1. Layout
O projeto do site foi executado em etapas distintas, a saber: idealização, planejamento, execução e avaliação.
Na etapa inicial, debatemos como seria a elaboração do site, já que tínhamos decididos pelo tema da pesquisa, ou seja, qual a linguagem que utilizaríamos, qual o design apropriado para o público alvo e o conteúdo limitado conforme as especificações no manual de APS. Com esses questionamentos, chegamos ao consenso de que deveríamos seguir a ordem, ou seja:
1. O tema escolhido foi Desenvolvimento e Sustentabilidade – o impacto da ação humana na natureza;
2. Usaríamos a linguagem técnica, pois, para o tema escolhido era a linguagem mais apropriada;
3. O público alvo do nosso site são estudantes que pesquisam sobre o tema e pessoas que têm interesse nos assuntos abordados;
4. O conteúdo da pesquisa será usado em três formas distintas. No trabalho digitado será apresentado conforme a limitação estabelecida pelo manual de APS; no site o conteúdo será mais sucinto, porém, composto de links direcionados para a página específica no blog, onde terá mais conteúdo da pesquisa realizada e constarão vídeos com informações complementares.
5. Por ser um site mais informativo e voltado para a pesquisa; o layout foi elaborado para que a prioridade seja as informações; recursos simples e fáceis; evitamos uso de algum tipo de imagem que pudesse desviar a atenção do leitor.
O nosso planejamento foi seguido conforme as normas estabelecidas para que obtivéssemos êxito, então, descrevemos o passo a passo do planejamento: fazendo uso de conhecimentos prévios de cada integrante, agregados aos ensinamentos obtidos em sala de aula; fizemos rascunho do modelo do site e dos links específicos para cada assunto relacionado ao tema da pesquisa; buscamos material de estudos e pesquisas que nos auxiliassem nos conteúdos que utilizaríamos no trabalho; determinamos o prazo para cada tarefa e assim, evitar atrasos, levando em consideração ocorrências de algum fato imprevisto, o que facilitou nossa organização no trabalho.
A pesquisa foi realizada em três semanas; fizemos uso de apostilas e livros que acrescentassem informações e que corroborassem com os conteúdos pesquisados; mais interessante é que estivemos em eventos de Atividades Complementares que abordavam sobre a questão do meio ambiente e sustentabilidade, eles foram escolhidos aleatoriamente, ou seja, nada programado.
O site foi criado em uma semana, realizamos todos os testes de funcionalidade e o resultado foi satisfatório. Queríamos adotar uma imagem que representasse o tema do trabalho, já que trataríamos a questão do Meio Ambiente (natureza) e a necessidade da conscientização da humanidade em suas ações controladas para impedir a degradação dos sistemas, porque a eliminação de um, afeta diretamente nos demais, já que todos naturalmente são como um único. A imagem de um olho humano com parte do globo terrestre refletida na retina nos dá o entendimento dessa conscientização e da responsabilidade de cada um de nós na preservação da vida.
A avaliação foi o que tivemos mais tempo de dedicação, para revisão dos conteúdos da pesquisa no texto digitado e nas postagems no site e no blog. Fizemos correções necessárias para que fossem evitados os erros e até mesmo o plágio. Ficamos enaltecidos pela escolha do nosso tema, porque ele concentra todo processo de produção e interação dos sistemas humanos (econosfera e sociosfera) e natureza (ecosfera) e suas fontes de energia, que foram descritos nos trabalhos dos demais colegas, ou seja, usamos uma explicação científica para todos os temas apresentados.
16.1. Layout
16.2. HTML.CSS
16.3. HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css" />
<title>Desenvolvimento e Sustentabilidade</title>
</head>
<body>
<div id="holder">
<!—Termos de uso. Não editar ou apagar essas linhas. Se editar ou apagar essas linhas uma mensagem surgirá sobre a página quando estiver on-line-->
<div id="footer_terms">
</div>
<!—Fim do termo de uso-->
<!-- HEADER -->
<div id="header"></div>
<!-- END HEADER -->
<div id="shadow">
<!-- MENU -->
<ul id="menu">
<li> <a href="index.html">Início</a> </li>
<li> | </li>
<li> <a href="link1.html">Pesquisa</a> </li>
<li> | </li>
<li> <a href="link2.html">Fotos</a> </li>
<li> | </li>
<li> <a href="http://aps1semestre.blogspot.com.br/" target="_blank">Blog</a> </li>
<li> | </li>
<li> <a href="https://plus.google.com/u/0/112910738179855564166/posts" target="_blank">Siga-nos</a> </li>
</ul>
<div class="clear"></div>
<!-- END MENU -->
<!-- EDITO -->
<div id="edito">
<h2> Visão de Mundo</h2>
<p align="justify">A perspectiva com a qual um indivíduo, a comunidade e a sociedade enxergam o mundo e seus problemas em um dado momento da história, reúne em si uma série de valores culturais e os conhecimentos adquiridos, portanto, necessita ter atitude para fazer valer a mudança. </p>
<a href="link3.html" id="button_edito">Pense sobre isso...</a>
</div>
<!-- END EDITO -->
<div id="toal"> </div>
<!-- CONTENT -->
<div id="content">
<!-- ABOUT ME -->
<div>
<a href="link4.html"><h1>Desenvolvimento e Sustentabilidade</h1></a>
<p align="justify"> <em>Satisfazer as necessidades do presente sem comprometer a capacidade das gerações futuras. </em></p>
<p align="justify">Para os cientistas e ativistas, a sustentabilidade será concretizada quando o desenvolvimento superar o crescimento, reconhecendo a natureza finita dos recursos do planeta.<br>
A capacidade de carga equivale ao número de indivíduos que podem ser suportados por uma área, sem ultrapassar os limites de seus recursos naturais e sem atenuar os capitais naturais, sociais e econômicos. <a href="link4.html"><font color="#6cc606"><b>Saiba mais!</b></font></a><br><br>
No vídeo abaixo o conceito de Desenvolvimento e Sustentabilidade de ativista.</p>
<a href="link7.html" class="content_button">Veja o vídeo</a>
</div>
<!-- END ABOUT ME -->
<!-- NEWS -->
<div id="vertical_barr">
<a href="link5.html"><h1>Engenharia e Meio Ambiente</h1></a>
<p align="justify"> <em>Para medir e avaliar os sistemas de fornecimento de energia, a engenharia considera o homem, a natureza e a economia. </em></p>
<p align="justify">Para manter a ordem para a humanidade e para a natureza é necessário refletir como se dar a adaptação da humanidade ao ambiente e a forma que a energia produz essa ordem. Promovendo as formas executáveis na produção de conhecimentos científicos e tecnológicos com desafios éticos e operacionais de se buscar desenvolvimento sustentável em todas as dimensões.<br>
Atentar-se a todos esses detalhes é possível oferecer soluções de engenharia econômicas e inteligentes que proporcionem sustentabilidade. <a href="link5.html"><font color="#6cc606"><b>Saiba mais!</b></font></a><br></p>
<a href="link8.html" class="content_button">Veja o vídeo</a>
</div>
<!-- END NEWS -->
<!-- SERVICES -->
<div>
<a href="link6.html"><h1>Modelos de Crescimento</h1></a>
<p align="justify"> <em>Os modelos representam os sistemas e suas complexidades. </em></p>
<p align="justify">Para criar um modelo precisa definir o sistema de interesse, fazer uso de símbolos que representam as influências externas e as partes internas do sistema, as linhas de conexão entre os símbolos, materiais e energia.<br>
As diferentes opções para o futuro depende da capacidade do meio ambiente fornecer materiais e energia e da capacidade dos seres humanos entenderem que o crescimento depende dos fluxos provenientes da natureza. <a href="link6.html"><font color="#6cc606"><b>Saiba mais!</b></font></a><br><br>
No vídeo abaixo o conceito de Desenvolvimento e Sustentabilidade da economia</p>
<a href="link9.html" class="content_button">Veja o vídeo</a>
</div>
<!-- END SERVICES -->
</div>
<!-- END CONTENT -->
<div class="clear"></div>
<!-- END SHADOW -->
</div>
<!-- FOOTER -->
<div id="footer">
<p>APS - Atividade Prática Supervisionada - Grupo Ciência da Computação - Unip 2016/1 </p>
</div>
<!-- END FOOTER -->
</div>
<!-- END HOLDER -->
</body>
</html>
16.4. CSS
@charset "UTF-8";
* {
margin: 0;
padding: 0;
font-family:Arial, Helvetica, sans-serif;
font-size: 1em;
color: #333333;
}
body {
width: 790px;
margin: 0 auto;
background: #0099CC url(images/bg_gradient.gif) repeat-x top;
position:relative;
}
.clear{
clear:both;
}
a:link, a:visited {
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline;
}
h2 {
font-size: 1.2em;
font-variant: small-caps;
color: #6cc606;
}
h1 {
font-variant: small-caps;
color: #0099CC;
}
p {
font-size: 0.8em;
}
em {
font-weight: bold;
font-style: normal;
color: #6cc606;
}
strong {
padding-left: 15px;
color: #333333;
}
/* HEADER */
#header {
padding: 15px 0px 15px 20px;
}
#header a img {
border: none;
}
/* END HEADER */
#shadow {
background: url(images/bg_content.gif) repeat-y;
height: auto;
padding: 0 5px 1px 5px;
}
/* MENU */
#menu {
height: 30px;
background: url(images/menu.gif) repeat-x;
}
#menu li {
float: left;
list-style-type: none;
padding-top: 5px;
color: #666666;
}
#menu li a:link, #menu li a:visited {
color: #FFFFFF;
font-size: 1.1em;
padding: 5px 43px 0 43px;
font-variant: small-caps;
font-weight: bold;
}
#menu li a:hover, #menu li a:active {
text-decoration: none;
color: #99CC00;
font-size: 1.1em;
padding: 5px 43px 0 43px;
font-variant: small-caps;
font-weight: bold;
}
/* END MENU */
/* CONTENT */
/* EDITO */
#edito {
background: url(images/img_edito.gif)top right no-repeat;
background-color: #E6E6E6 ;
}
#edito h2, #edito p {
padding-top: 20px;
padding-right: 100px;
padding-left: 20px;
}
#edito p {
width: 500px;
}
#edito a:link, #edito a:visited {
color: #FFFFFF;
font-size: 16px;
}
#edito a:hover, #edito a:active {
text-decoration: none;
color: #333333;
font-size: 16px;
}
#button_edito {
display: block;
height: 25px;
width: 150px;
background: url(images/large_button.gif) no-repeat;
text-align: center;
padding-top: 3px;
margin-left: 290px;
font-weight: bold;
margin-top:10px;
padding-bottom:10px;
}
/* END EDITO */
#toal {
height: 20px;
background: url(images/toal.gif) repeat-x;
}
/* CONTENT */
#content {
padding: 20px 0;
}
#vertical_barr {
border-left: #0099CC solid 1px;
border-right: #0099CC solid 1px;
}
#content div {
float:left;
width: 215px;
padding: 0 10px 0 30px;
}
#content div p {
padding-top: 10px;
}
#content div p a:link, #content div p a:visited, #content div p a:hover, #content div p a:active {
color: #333333;
}
#content div li a:link, #content div li a:visited, #content div li a:active, #content div li a:hover {
color: #6cc606;
font-weight: bold;
}
a.content_button:link, a.content_button:visited {
color: #FFFFFF;
}
a.content_button:hover, a.content_button:active {
text-decoration: none;
color: #333333;
}
.content_button {
display: block;
height: 15px;
width: 75px;
background: url(images/little_button.gif) no-repeat;
margin: 15px 0;
text-align: center;
font-weight: bold;
font-size: 0.7em;
}
#content div ul {
font-size: 0.8em;
margin-left: 20px;
}
#content div li {
padding: 8px 0 0 0;
}
#resol {
text-align:justfy;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:fixed;
-position:absolute;
font-size: 5px;
width:230px;
top:0px;
left:1280px;
margin:0 auto;
background:#bfc6d9;
text-align:center;
}
#resol h1 {
background:none;
font-size: 15px;
letter-spacing:3px;
padding:0px;
margin:0px;
border: 0px;
}
#resol h2 {
font-size:10px;
letter-spacing:3px;
padding:0px;
margin:0px;
border:0px;
background:none;
}
/* END CONTENT */
/* FOOTER */
#footer {
height: 70px;
background: url(images/botton_bg_content.gif) no-repeat;
padding: 0 5px;
margin-bottom: 20px;
}
#footer p {
color: #FFFFFF;
padding-top: 30px;
text-align: center;
}
#footer p a {
color: #FFFFFF;
}
#footer_terms {
width: 100%; bottom: 0px; left: 0px; position: absolute; height: 40px;
}
#footer_terms h1 {
padding: 60px 0px 0px 0px; color: #7aaec6;
text-align:right;
border:0px;
font-variant:normal;font-size: 0.8em;font-weight: normal;
text-decoration:none;background: none;
}
#footer_terms a { text-decoration: underline;}
#footer_terms strong,#footer_terms a {
color: #7aaec6;
font-weight: normal;
background: none;
}
#holder {
min-height: 100%; position: relative; margin:0 auto;
-position:absolute;
-background: #0099CC url(images/bg_gradient.gif) repeat-x top;
-overflow-x :hidden;
}
/* END FOOTER */
