Documentacao APS CC1P52

Prévia do material em texto

Ciência da Computação
Atividades Práticas Supervisionadas - 1º Semestre
“DESENVOLVIMENTO DE UM SITE EM XHTML"
		Décio Lemes de Mattos			R.A.: B78JFB-2
		Gustavo Luiz Lavezzo 			R.A.: B772BJ-1
		Marco Aurelio Goulart Dourado 		R.A.: B775AD-4
		Rubens Vechiato Junior			R.A.: B61ACH-0
		Yuri Felipe Malaquias			R.A.: B6973J-0
Araraquara, 18 de abril de 2013
1 - Objetivo do Trabalho
	Nosso objetivo é criar um site informativo, com conteúdo de fácil entendimento que mostre a realidade da doença em nossa região. O site contem todas as informações importantes da doença como:
O que é?;
Tipos;
Como Evitar;
Sintomas;
Estatísticas e Gráficos.
	Essas informações estão separadas por tópicos, para que seja objetiva a escolha do usuário ao pesquisar alguma informação em nosso site. Nós sabemos da importância do cuidado e da prevenção dessa doença, não só em nossa região, mas em todo o Brasil, em nosso site colocamos gráficos e dados baseados em dados reais e extraídos de fontes seguras com informações concretas.
	Outro objetivo do nosso grupo foi por em pratica as matérias dadas em sala de aula para que seja compreendida realmente para o que serve cada tópico e cada código ensinado. Utilizamos recursos de design para desenhar a tela e deixa - lá com uma fácil visualização, todos participamos de sua criação e opinamos cada um com seu ponto de vista e chegando a uma conclusão lógica de cada ponto e formato que o site deveria ter.
	
	Em um primeiro momento acreditamos que foi uma ótima experiência para a turma poder por em pratica o que ficaria somente na teoria, nosso trabalho foi bem focado e objetivo, foi um ótimo projeto e um excelente resultado.
2 - Tema Escolhido
	Nosso tema escolhido foi a Doença: Dengue.
	Escolhemos esse tema porque não é a primeira vez que está nas capas de revistas e em destaques nos jornais da cidade e do Brasil. Esse tema é bastante amplo e cai em várias discussões, mas procuramos ser objetivos e mostrar os cuidados que devemos ter para combatê-los e prevenir a doença que é o mais importante, porque, depois de contaminado precisar ter todos os cuidados ao extremo e chega a ser cerca de 1 a 2 semana de repouso em tratamento.
	Existe levantamentos feitos pelos centros de pesquisa das cidade que divulgam os casos encontrados, casos de suspeita, casos confirmados e até óbitos. No site de Araraquara (www.araraquara.com) existe um infográfico que mostra a evolução dos casos por períodos (anos) na cidade e mostra a diferença pelos anos, por exemplo em 2011 que a cidade enfrentou uma epidemia (Considera-se epidemia quando é registrado 300 casos para 100mil Habitantes), o numero de casos para Araraquara entrar em epidemia é de 600 casos. Os cuidados tem que ser feitos a todo tempo, podemos ver pela diferença que apresenta no ano de 2011 para 2012 em que os casos foram muito baixos, porem, passado esse período os cidadãos esqueceram da doença e os casos voltaram a aumentar como base no dia 01/05/2013 o site Araraquara.com informou que foi quadruplicado o numero de casos registrados na cidade contabilizando 362 casos com aumento de 370% referente ao ano passado. 
	No dia 21/05/2013 foi divulgado no site Araraquara.com que a cidade de Araraquara estava com 452 casos registrados em um estado de pré-epidemia. Em seguida estava um infográfico com os dados da doença.
	O que faz a gente pensar num bom cuidado com a cidade e a participação de todos, pois, é muito importante para o cuidado contra a doença, porque é em pequenos detalhes que ela acaba se proliferando. Nesse ano tivemos muitas chuvas e poucos cuidados por parte da prefeitura municipal em questão aos alagamentos e pontos de alagamentos em nossa cidade, podendo ser sim um reflexo de todos esses pontos o aumento da dengue na cidade, na minha visão, os cidadãos já estão conscientes e sabem do seu papel, mas será que o mesmo é feito pelos órgãos de proteção ambiental e municipal? Esses são alguns dos pontos que podemos enfrentar de acordo com o nosso tema.
 Neste mesmo gráficos divulgados temos a divisão que separa casos por homens e mulheres, onde os casos em mulheres superam os casos enfrentados pelos homens. O que nos assusta, pois, os casos em mulheres são grandes e se alguma gestante se contaminar com a doença pode ser fatal, pois, expõe a gestante ao extremo do que seu corpo pode agüentar, na maioria dos casos o bebe não é afetado, mas, já existem registros de bebes que nasceram com alguma anomalia ou apresentaram a doença.
	Esse é o gráfico informado no texto com os dados mencionados, podemos questionar até mesmo o porque existe essa diferença absurda entre os bairros, quais as diferenças em cuidados e o que pode ser feito para melhorar essa estatística. Nesse bairro existem muitas escolas e é chamado de um outro centro comercial da cidade com muitas lojas e opções diversas de comercio. 
	
	Essas estatísticas podem não para por ai, por exemplo, na cidade de Matão que é referência em industrias de agronegócios e maquinas agrícolas, temos muitos casos também, a cidade fica a 36km de Araraquara (cerca de 40 minutos de viagem), está com casos 780 casos confirmados e ainda temos 1,3 mil casos aguardando confirmação. A cidade possui cerca de 80 mil habitantes ou seja, já ultrapassa em 3 vezes o parâmetro de epidemia .
	Temos um caso em especial que se faz diferente da nossa região. Em Tupã - SP, foi preciso criar uma liminar - "É uma ordem judicial provisória, destinada a proteção de um direito, ou processo principal em razão da provável veracidade dos fundamentos invocados e da possibilidade de ocorrer dano grave ou irreparável" - para o combate a dengue. Nessa cidade em questão muitos dos moradores não deixavam os agentes de saúde fazerem a Nebulização, que é a aplicação de veneno para o combate do mosquito Aedes Aegypti, esse veneno elimina a possibilidade de o mosquito que contem o vetor (hospedeiro intermediário) do vírus pique uma pessoa infectada em outras localidades e transmita para uma pessoa saudável, essa liminar foi aprovada pelo juiz da 3ª Vara civil da cidade de Tupã e poderá ser preso em flagrante delito por crime de resistência e desobediência civil.
	No dia 04/06/2013 foi destacado pelo site G1 (g1.globo.com) o caso dito a cima e divulgado os casos da cidade, estando confirmados 1,4 mil casos com cerca de 63 mil habitantes e bateu o recorde de epidemia da própria cidade que em 2010 contabilizou 1,3mil casos. As medidas são extremas na cidade, foram implantadas câmeras de segurança em frente a terrenos baldios nos pontos mais críticos da cidade para coibir a população de despejar entulhos e lixos nesses terrenos. Até então 2 equipamentos já foram instalados e 1 pessoa foi notificada.
	Não para por ai, no Brasil já temos muitos casos de morte no Rio de Janeiro já somam 28, os dados foram divulgados dia 28/05/2013 pelo site G1. Existem 178.765 casos entre Janeiro e Maio. O site ainda destaca: "Há duas semanas o total de mortes era 22."
	Outra cidade bem próxima a nossa e uma das maiores da região é Ribeirão Preto, um centro econômico muito forte e referencia de cidade em nosso estado, também enfrenta a dengue, porem, enfrentam outra epidemia da doença que já ultrapassa 3.409 casos confirmados com 15mil suspeitas da doença de janeiro a março desse ano.
	Existe um projeto realizado pela radio globo em que você pode marcar algum foco da dengue em um mapa, muito interessante, porem é pouco conhecido.
	Esse é o mapa do Brasil e os focos destacados pela população.
	Esse é o zoom do mapa com foco no Estado de São Paulo.
Você pode acrescentar focos da dengue por esse link. Seja consciente e adicione somente se existir o caso.
http://radioglobo.globoradio.globo.com/mapa-da-dengue/MAPA-DA-DENGUE.htm
3 - Dissertação
	Nosso grupo é formado por 5 integrantes em que na escolha do tema cada um deu sua opinião como, o crescimento da tecnologia na nossa região, dengue, que foi o tema escolhido para nosso trabalho, dentro desse tema tivemos que escolherquais os assuntos que seriam abordados, como seriam abordados, disponibilidades de conteúdos, imagens e fontes de confiança para que fossem encontrados os dados para serem disponibilizados em nosso site informativo. 
	Em primeiro momento focamos a estrutura do site, pois, nosso conteúdo é de bastante leitura que não cansasse o leitor e lhe daria uma boa leitura do texto. Foram selecionados apenas os dados mais importantes para o conteúdo do site e informações com números e estatísticas reais da nossa região para que mesmo um site apenas informativo seja impactante e que os leitores se sintam tocados pelo conteúdo fazendo a nossa parte, que é a conscientização.
	Nos encontramos em vários momentos para debatermos o tema, temos pesquisas de todos os tipos e de várias fontes diferentes. Foram separados os dados mais importantes e estes estão disponíveis no nosso site.
	Na maioria dos nossos encontros foram feitas mudanças no site, em questão de design, recursos utilizados, o que seria melhor para colocar no site. Em primeiro momentos tivemos um projeto release, criado em 12/05/2013, e a partir dele começaram nossos esforços para que nosso objetivo de ter um site com conteúdo e simples navegação fosse criado.
	Diante das necessidades conversamos muito entre nos para poder acertar os detalhes, que são esses que fazem de um projeto algo concreto que possa ser utilizado e divulgado com reconhecimento e uma boa repercussão. Empenhados em fazer um bom trabalho mantivemos os contatos e as pesquisas de conteúdo também continuaram.
	Fomos atrás de imagens que fossem de impacto para o conteúdo, objetivas, são essas as fotos legendas, que já dizem por si mesmo sobre o que será apresentado em conteúdos. Criamos o logo do site com o símbolo da dengue que é o mosquito transmissor e uma frase baseada no conteúdo.
	
								Logo do site
	Encontramos na rede Social Facebook (www.facebook.com) um projeto de divulgação contra a dengue - Dengue - O combate está em suas mãos - já tendo uma boa repercussão nós resolvemos vincular eles ao nosso projeto, eles já possuem 1020 curtidas e 651 estão falando sobre esse assunto. Nesse projeto eles estimulam os cuidados contra a dengue e sempre postam imagens de impacto para a população.
	Outro ponto que pensamos também que seria que no nosso Home (pagina principal), teria que ter informações importante que instigassem as pessoas a navegar em nosso site, informações básicas mas que precisassem do restante do conteúdo para fazer o sentido correto das frases.
	Este é um exemplo do banner que nosso Home possui, ele traz as informações básicas da conteúdo que foi descrito no projeto. Essa era nossa preocupação, fazer um site que seja atrativo para os conteúdos, fazendo com que as pessoas se interessassem em continuar navegando e visualizassem todo o conteúdo publicado. O banner criado foi a nossa principal ferramenta para que isso desse certo.
	Os banners são chamativos e trazem o que as pessoas querem saber, fazendo com que elas continuem a leitura de forma automática, sem que tenha que ficar procurando pelo o que precisa. A pessoa visualiza a imagem e clica para ver as outras estatísticas informadas, isso é feito de modo intuitivo.
	Tivemos a preocupação em registrar todas as alterações e discussões que tivemos ao passar do tempo em relação ao projeto. Desde o primeiro dia de trabalho estamos focados em fazer o melhor para que o projeto seja perfeito de acordo com as nossas expectativas e o que esteja dentro do nossos planos, tanto para conteúdo quanto para estruturação. 
	Foram testadas varias formas para nosso site até encontrarmos a ideal, que é perfeita para nosso projeto, separando os tópicos sem perder o assunto. Isso foi pensado de acordo com os debates que tivemos, criamos um site com um padrão como se fosse uma cartilha de leitura em que pode se passar a pagina para frente e para traz e continuar a leitura sem prejudicar o entendimento do mesmo.
	
	Em todos os nossos encontros ficou bem claro que estávamos todos dispostos a fazer o nosso melhor e um ajudar ao outro, empenhados e focados no projeto. Cada um ficou responsável por uma parte do projeto na questão das pesquisa e nos encontros juntávamos todos os dados e as idéias para formar uma estrutura boa para todos, agradando aos olhos dos integrantes do grupo. 
	Em todos eles saímos confiantes e preparados para fazer o melhor, com idéias novas na cabeça para inovar na criação e com inspiração para fazer de cada pagina a melhor. Isso foi dado a união do grupo que mesmo com a distancia conseguiu criar um vinculo e a confiança em que a cada encontro teríamos novas surpresas boas. Melhor do que fazer uma boa pagina é saber que o companheiro de grupo tem uma idéia para melhorar a sua pagina, com isso alem de cada um ser responsável pela sua parte, num todo, preocupávamos em fazer alguma coisa nova para que o site todo tivesse uma boa aparência e uma estrutura ideal para o nosso objetivo, para atingir o publico de maneira eficaz.
	 Isso quer dizer que ao longo desse semestre aprendemos juntos e nos unimos ainda mais para concretizar um projeto que não se dá só ao nosso interesse e sim a um interesse publico e da nossa cidade, e toda a região. Aprendemos não só em questão ao projeto em si, como programação, diagramação, estruturação, design, busca por conteúdos. Aprendemos sobre o tema relatado e vimos que é muito sério o assunto abordado, ficamos em estado de choque em alguns momentos com as matérias encontradas e os números relatados. Alem disso aprendemos a trabalhar em grupo, a respeitar as opiniões e sugestões dos companheiros e aceitar as idéias vindas do grupo, assim se ajudando a fazer o melhor não para si mesmo, mas, para o grupo todo.
	As mudanças que foram surgindo de acordo com o tempo foram essenciais para o final do projeto. Todos nós concordamos que o nosso projeto ficou como queríamos e do jeito que pensamos, sabendo que o que foi feito é o melhor modo para apresentarmos o tema que foi escolhido e da maneira que queríamos, enfrentando as dificuldades, nós seguimos e entregamos agora o projeto final.
	Foi uma ótima experiência para o grupo, com isso, poderemos fazer os demais trabalhos e com essa experiência poderemos fazer o melhor para nós mesmo usando o trabalho em grupo para talvez na empresa em que trabalhamos ou em novos projetos que virão.
	Agradecemos ao apoio dos professores que tiraram algumas duvidas e deram algumas idéias de como melhorar em alguma outra forma de trabalhar o nosso projeto. Foram essenciais para o bom desenvolvimento do trabalho.
4 - Projeto do Site
	Nosso projeto teve inicio com esboços em folha de caderno para definirmos o layout do site. O layout escolhido foi de página principal um Hotsite com as informações básicas que linkariam para as páginas de conteúdos completos. 
	Nosso primeiro site foi criado no dia 12/05/2013 com uma estrutura básica de como tínhamos conversado. 
	
	Essa é a primeira versão do site, porém ela sofreu alterações com o tempo de acordo com as necessidades. Em primeiro momento alteramos o tamanho do cabeçalho da página, deixando apenas a logo e o menu em um espaço melhor para que pudéssemos trabalhar melhor o conteúdo em texto dentro do nosso site.
	Em seguida adicionamos um banner que faz a rotação dos conteúdos do site e cada imagem tem um link para a continuação do texto. Algumas cores foram adicionadas ao fundo do projeto para escolher a que melhor se adaptasse ao site. Então surge a primeira release do site em funcionamento com essa aparência. 
	Esse então é nosso Hotsite ou página principal que é o link para o restante do conteúdo.
	
	Logo em seguida surgiu a necessidade de adicionar o conteúdo de forma a facilitar a leitura, não queríamos um site com barras de rolagem e que não fosse necessário abrir muitas paginas para apenas um conteúdo, utilizamos então Abas ao que facilita a leitura, ela não precisa ser interrompida e nem aquela espera para carregar o próximo texto.
	E por fim chegou a realeasefinal da página principal e dos conteúdos com um design Clean e um ótimo aproveitamento de espaços, facilidade para leitura e que não demora para carregar.
	Data
	O que foi feito
	18/04
	Escolha do tema, definição do layout do site, Separação de tarefas
	21/04
	Inicio dos primeiros passos da APS e das pesquisas.
	09/05
	Reunião, criado um documento com a estruturação do projeto.
	12/05
	Primeira realese do site . Apenas layout
	22/05
	Coletada imagens, alteração no layout dos rodapes e inserção da pagina de contatos.
	23/05
	Segunda Realese do site
	01/06
	Realese da versão completa.
	02/06
	Alterações em pequenos erros. Site completo.
5 - Relatório: Códigos do Site
Cabeçalho da página, o mesmo é utilizado por todas as páginas.
<body>
<div class="bg-header">
	<div class="header-content">
 <div class="logo">
 	<a title="Dengue - Home" href="base.html">
 	<img alt="Imagem do logo" src="imagens/logo.png" />
 </a>
 </div><!-- logo -->
 <div class="bloco-menu">
 	<div class="icones-sociais">
 	<a title="" href=""><img src="imagens/icone-facebook.png" /></a>
 <a title="" href=""><img src="imagens/icone-twitter.png" /></a>
 <a title="" href=""><img src="imagens/icone-instagram.png" /></a>
 <a title="" href=""><img class="right" src="imagens/icone-google+.png" /></a> 
 </div><!-- icones sociais-->
 <div class="clear"></div>
 <div class="menu">
 	<ul>
 	<li><a style="border-radius:8px 0 0 8px;" title="O que é dengue?" href="oquee.html">O que é dengue?</a></li>
 <li><a title="Sintomas" href="sintomas.html">Sintomas</a></li>
 <li><a title="Como evtiar" href="comoevitar.html">Como evtiar</a></li>
 <li><a title="Estatística" href="estatistica.html">Estatística</a></li> 
 <li><a style="border-radius:0 8px 8px 0;" title="Contato" href="contato.html">Contato</a></li> 
 </ul>
 </div><!-- menu -->
 </div><!-- bloco menu -->
 <div class="clear"></div>
 </div><!-- header content -->
 <div class="clear"></div>
</div><!-- bg header -->
Rodapé da página, o mesmo é utilizado em todas as páginas.
<div class="bg-footer">
	<div class="footer-content">
 	<div class="footer-bloco">
 	<h4>Links Uteis</h4>
 	<div class="footer-bloco-info"> 	
 <ul>
 	<li><a title="Oque é dengue?" href="">Oque é dengue?</a></li>
 <li><a title="Sintomas" href="">Sintomas</a></li>
 <li><a title="Como evtiar" href="">Como evtiar</a></li>
 <li><a title="Estatística" href="">Estatística</a></li>
 </ul>
 <ul class="right">
 	<li><a title="" href="Quem somos">Quem somos</a></li>
 <li><a title="" href="Contato">Contato</a></li>
 <li><a title="" href="Como ajudar">Como ajudar</a></li>
 </ul>
 		</div><!-- bloco info -->
 </div><!-- footer bloco -->
 <div class="footer-facebook">
 	<img src="imagens/facebook.png" usemap="#Map" title="Facebook" border="0" />
 <map name="Map" id="Map">
 <area shape="rect" coords="59,29,118,55" target="_blank" href="https://www.facebook.com/#!/dengueocombateestaemsuasmaos" />
 <area shape="rect" coords="62,11,331,28" target="_blank" href="https://www.facebook.com/#!/dengueocombateestaemsuasmaos" />
 <area shape="rect" coords="5,94,376,202" target="_blank" href="https://www.facebook.com/#!/dengueocombateestaemsuasmaos" />
 </map> 
 </div><!-- footer facebook -->
 <div class="clear"></div>
 </div><!-- footer content-->
 <div class="clear"></div>
Códigos de estilo CSS utilizados para personalização.
/*	Cabeçalho	*/	
.bg-header{width:100%; background-image:url(../imagens/0.png); background-repeat:repeat-x;	background-position: left;}
.header-content{width:960px; margin:0 auto; padding:20px 10px; background-image:url(../imagens/0.png); background-repeat:repeat-x;	background-position: left;}
.logo{width:200px; height:100px; float:left; }.bloco-menu{width:720px; height:100px; float:right;}
.icones-sociais{width:220px; float:right;}
.icones-sociais img{float:left; margin-right:20px; width:40px; height:40px;}
	/*	Menu	*/
.menu{width:100%; margin-top:20px;}	
.menu ul{width:607px; height:40px; border-radius:8px;}
/*@media screen and (-webkit-min-device-pixel-ratio:0) {
.menu ul{width:595px;} */
}
.menu ul li{float:left;}
.menu ul li a{display:block; padding:10px 20px; color:#F00; background-color:#CCC;}
.menu ul li a:hover{color:#FFF; background:#000;}
6 - Bibliografia
Os textos foram retirados de sites:
		http://www.combateadengue.com.br/
		www.araraquara.com
Estatísticas e dados também retirados de site:
		www.araraquara.com
		g1.globo.com
Link da rede social utilizado:
		https://www.facebook.com/dengueocombateestaemsuasmaos