DIVIDINDO PARA SOMAR 2.

0
REFORMULAO DE SITE

dps2

Thabata Guerreiro Nascimento de Moraes

dps2

DECLARAO DE DIREITOS AUTORAIS

Declaro, segundo a Lei n 9.610 de 19 de fevereiro de 1998, que esta obra foi totalmente
criada e editada por mim, Thabata Guerreiro Nascimento de Moraes, portadora do RG
35.267.258-4 e CPF 419.087.148-67, e que estou ciente que esta obra no possui existncia
de plgio - quaisquer textos extrados possuem referncias bibliogrficas que sero
citadas no final do relatrio; caso comprove o plgio, estou ciente que serei penalizada
pelo ocorrido.
O projeto Dividindo para Somar 2.0 uma proposta de reformulao do site de mesmo
nome, j existente. Alguns detalhes do site, como logotipo, cores e fontes foram
autorizados pelo dono do site, Professor Alexandre Sobrino.

__________________________________________
Thabata Guerreiro Nascimento de Moraes
RG: 35.267.258-4 / CPF: 419.087.148-67

SUMRIO
APRESENTAO ----------------------------------------------------- 5
OBJETIVO ------------------------------------------------------------ 6
PBLICO ------------------------------------------------------------- 7
MERCADO ----------------------------------------------------------- 8
JUSTIFICATIVAS ----------------------------------------------------- 13
DEFINIES --------------------------------------------------------- 15
PESQUISA ----------------------------------------------------------- 22
DESENVOLVIMENTO ------------------------------------------------ 28
CODIFICAO ----------------------------------------------------- 48
CONCLUSO ------------------------------------------------------- 64
REFERNCIAS BIBLIOGRFICAS ----------------------------------- 66

APRESENTAO

O Trabalho de Final de Curso - TFC - Dividindo para Somar 2.0 , ou simplesmente,

dps2.0 um projeto de reformulao do site atual, criado a partir de um trabalho de final de curso em 2009, pelos, ento alunos, Edson Issao Abe e Jos Renato dos Santos Silva.

O programa Dividindo para Somar, existente desde 1999, administrado pelo pro-

fessor Alexandre Sobrino, com parceria com a Universidade Santa Ceclia, pratica o voluntariado com a promoo de palestras, eventos (como a Semana de Produo Multimdia - SAMBA) e mini-cursos, e, a partir da doao de alimentos no-perecveis, vrias
entidades no-assistenciais da Baixada Santista recebem estes alimentos.

O projeto, focado a web, remodela o site para uma plataforma responsiva, fican-

do mais fcil de ser lido em dispositivos como celulares e tablets. A base feita a partir
de um framework de front-end, ou, um conjunto de ferramentas HTML e CSS pr-moldadas, chamado Bootstrap, em sua ltima verso (Alpha 4) . Apesar do site j ser fcil de
ser compreendido em sua verso atual, alguns elementos como sees e fontes, esto
pequenos e apertados demais, precisando aumentar o tamanho e disponibilizar para a
largura total da tela.

Contudo, o logotipo do site e as cores originais mantiveram-se os mesmos, em aco-

do com o professor Sobrino. No era necessrio que tudo fosse mudado, apenas a inferface do site, de modo a manter o estilo clean, simples, para que as pessoas no tenham
dificuldade de ler o site, ou no torn-lo cansativo, sem-graa, e assim, continuar com a
melhora da divulgao do programa, sincronizando-o com a pgina do Facebook, em
que tambm tem presena forte. Em adio, ser criada uma galeria de fotos onde sero
colocados vrios lbuns, de todos os eventos - se possvel - que o programa j promoveu.
O recurso mais utilizado no Facebook, ento vamos dar mais uma finalidade existncia
do site, pois as imagens ajudaro na divulgao do prprio.

Junto com o novo site, tambm estaro propostas de design para corpo de email,

com banners para divulgao para cadastrados. Quanto a parte tcnica, sero aplicados alguns detalhes, como por exemplo, sistema de FAQ (dvidas) e de eventos anteriores - agrupado por ano - organizado em acordeo (collapse) e na lista de entidades, se
houver link, dar acesso ao site de cada entidade.

OBJETIVO

O objeito do dps2.0 de manter o legado do programa, proporcionando o novo

site a um novo layout, uma nova forma de manter a clareza e simplicidade da verso anterior, obedecendo o seu estilo, sua identidade visual, mas trazer uma leitura mais fcil de
ser lida, mais moderna.

Os cdigos HTML, CSS e Javascript evoluem com os tempos, e novas formas de har-

monizar um website, mesmo com ou sem o uso de frameworks, melhoram a aparncia

e a funcionalidade do site, e dependendo de como os cdigos sero trabalhados, eles
podem deixar o site pesado, logo, o novo site do Dividindo para Somar no deve exagerar em detalhes e transies de pgina. Com o Bootstrap, o site poder ser otimizado,
melhorando em qualidade e em velocidade.

O website receber novos atributos, como interface responsiva, galeria de fotos,

interao com a pgina do facebook e outros. Uma janela modal ser aberta toda vez
que o usurio acessa a pgina incial do site, facilitando a ideia do usurio de se cadastrar
para receber notcias dos prximos eventos. Poder ter mais interaes com as entidades,
caso tenha maior participao do programa no local da instituio, disponibilizando fotos
e, se possvel, o site oficial.

As ferramentas de otimizao de pgina, vulgo SEO, sero analisadas e levadas em

conta na criao do modelo oficial. O website deve ter um bom ranqueamento dos buscadores, como o Google, para se manter mais visvel, ao pesquisarmos sobre o programa.

PBLICO

Em relao ao pblico que visita o site do Dividindo para Somar, muitos procuram

para saber mais a respeito dos eventos que o programa promove, e outros visualizam o
que cada mini-curso oferece quando promovido. A faixa etria bem diversificada, e
com o apoio da Universidade Santa Ceclia, vrios alunos tm mais contato com o projeto.

Os minicursos so mais especficos para pessoas amantes da tecnologia, logo, nor-

mal que os alunos da rea de Produo Multimdia, Tecnologia da Informao e Cincias

da Computao estejam em maior tamanho. Em alguns casos, os cursos so fechados
para alunos da Unisanta, outros so abertos ao pblico, como de oratria, na qual muitos
que tem dificuldade de se expressar, seja em poca de apresentao de TCC ou at em
uma reunio.

J as palestras, na qual so abertas ao pblico, possuem um pblico mais misto.

Jovens, adultos e idosos assistem a vrios temas, como sonhos - o mais procurado deste
ento - experincia quase-morte e reencarnao, ufologia, mercado de trabalho, entre
outros.

Como este trabalho voltado mais para a nova interface do site, o pblico que

acessa deve entender o que est escrito com clareza, a fonte deve ter um tamanho
mais agradvel, e cada cor no deve prejudicar a leitura. Para isso, foram feitas duas
pesquisas, uma a respeito do contedo do site, onde ainda pode gerar concorrncia
com outras entidades; outra por influncia de uma interface prxima a que pode ser feita
no Bootstrap, com a comparao de vrios templates. As duas pesquisas foram unidas, e
mostradas nas pginas a seguir.

MERCADO

Assim como o Trabalho de Criao de Logotipo e do primeiro Website do Programa

Dividindo para Somar, a ONG Banco de Alimentos foi citada em suas referncias. A ONG
contribui para ajudar entidades carentes, promovendo oficinas, workshops e palestras relacionadas a nutrio e aproveitamento de alimentos. O site tem uma estrutura parecida
com a que procuramos no novo site, indicado ao lado.

O site apresenta uma interface sinestsica, e os efeitos de giz e rasgos tornam o site

com um estilo mais jovial, alegre e divertido, junto com a paleta de cores, iconografia e
harmonia.

A pgina inicial indica quase todas as funes da ONG, em estatsticas (destaques

para os nmeros de quanto j foi doado, quantas famlias e entidades foram ajudadas,
quantas empresas esto ajudando) e ainda um sistema de vendas de produtos da prpria
organizao, em que a venda arrecadada para a continuao do trabalho da ONG.

MERCADO

MERCADO

A rede de supermercados Walmart possui um programa chamado Boas Aes, que

incentivam clientes e funcionrios arrecadao de produtos em campanhas solidrias,

e dentre estas campanhas, a doao de produtos fora dos padres de comercializao,
porm adequados para consumo, para bancos de alimentos.

O Walmart tambm promove debates sobre o combate ao desperdcio de alimen-

tos, entre seminrios e palestras.

O site do Walmart tem um perfil mais geomtrico, comparado com o caso da ONG

Banco de Alimentos. No mximo, so duas colunas divididas em texto e imagem, mostrando os outros projetos da rede Walmart. O slider ou carossel de pgina, largura total, destacando o real motivo do projeto - a entrega de alimentos - e indicaes de redes sociais.

Domina-se as cores do Walmart - azul e branco; o laranja usado em alguns cones

- um azul-escuro utilizado para destacar a rea de redes sociais, e para dar uma impresso de modernidade, fotos de consumidores e funcionrios no fundo.

A pgina - nica, pertencente ao site do Walmart Brasil - est representada, a se-

guir.

10

MERCADO

11

MERCADO

12

JUSTIFICATIVAS

Os motivos para a reformulao de pgina do Dividindo para Somar so vrios, en-

tre eles:

Inovao e acessibilidade:

A tecnologia avana com o tempo, e novas exigncias so feitas pelo pblico que

acessa qualquer site: as pessoas esto em movimento, sempre com o celular na mo.
necessrio um modelo responsivo para que as pessoas tenham uma opo de acesso
legvel no dispositivo.

No s a janela do site deve diminuir, como a fonte deve acompanhar e ter um

tamanho ideal para ser visualizado, e o site no deve utilizar vrios recursos em exagero,
como animaes e carrosis.

O uso do framework facilita para a organizao dos cdigos, em que so determi-

nados os aspectos da pgina no prprio HTML, atravs de classes (pode-se definir cores,
largura, comprimento, detalhes de formulrio, alinhamento de textos e imagens, e outros).
Alguns detalhes, infelizmente, dependem da configurao na folha de estilos. O tempo
de produo menor, e o resultado, mais limpo.

Continuidade:

O projeto mantm-se ativo, e a quantidade de alimentos doados aumenta cada

vez mais. Os nmeros provam um aumento de quase 25 vezes, se compararmos o total

de arrecadaes em 1999 (100 quilos) ao de 2015 (aproximadamente 2,47 toneladas). A
expectativa que estes nmeros se mantenham ou aumentem com o tempo, logo, a divulgao do programa deve-se manter forte.

A inteno que o novo site, mais leve e com forte conexo com as redes sociais,

no caso, com o Facebook, possa melhorar em divulgao. Temos que manter a palavra
ativa, pois difcil, ainda, encontrar vrios programas ou entidades na web que possam
fazer um trabalho igual, ou parecido, de responsabilidade social. Com o conjunto completo, o projeto ter mais destaque, dentro e fora da web.

13

JUSTIFICATIVAS

Alexandre Sobrino:

Como o programa Divindindo para Somar de autoria do professor Alexandre So-

brino, ele sempre est aberto para receber ajuda de outras pessoas, incluindo alunos da
Unisanta. Durante as aulas de Web Design, ele sugeriu que o site precisaria de um novo
formato, agora para a gerao mobile: um site responsivo com melhor clareza, que
pudesse ter elementos que antes, ainda no foram colocados em prtica, como por exemplo, uma galeria de fotos, um link para o Facebook visvel, entre outros.

Como eu procurava seguir o rumo do Web Design, a ideia seria interessante para

melhorar minhas habilidades na rea, como tambm ajudar em um projeto de responsabilidade social, algo que sempre acompanho, pessoalmente ou pela internet, logo, o plano
perfeito.

14

DEFINIES
Programa Dividindo para Somar:

O programa, que continua ativo desde julho de 1999, um projeto criado pelo

professor Alexandre Sobrino, e tem como parceira e sede a Universidade Santa Ceclia,
ou Unisanta, e seu objetivo prinicpal a promoo e realizao de minicursos, palestras e
contribuio em eventos, com finalidade beneficente, incentivando o voluntariado.

Este incentivo resulta na arrecadao de alimentos para vrias instituies da Baixa-

da Santista - mais de 80, e este nmero cresce cada vez mais, com a opo do prprio
internauta enviar sugestes de instituies no to conhecidas, para receber assistncias
futuras.

Em sua 91 Edio, a mais recente, o programa apresentou a palestra Como falar

em pblico, com o professor Ari Brito, que obteve uma tima demanda de alimentos..

Logotipo atual do Programa Dividindo para Somar

Tanto o logotipo acima, quanto o website atual foram resultados de um Trabalho de

Final de Curso em 2009, feitos por Edson Issao Abe e Jos Renato dos Santos Silva. O programa precisava aperfeioar em divulgao e claro, ter uma identidade visual prpria,
um meio de deixar a sua marca, seu conceito, a vista para todos. E com o website, uma
nova forma de trazer interessados a conhecer o projeto, os eventos e sua finalidade.

15

DEFINIES

Bootstrap:

O framework, utilizado para a criao de layouts de sites a partir de um sistema pr

moldado contendo pginas HTML, folha de estilos CSS e funes Javascript, em que:

O cdigo HTML (Linguagem de Marcao de Hipertexto) trabalha na parte

principal do site mostrando o que deve ser exibido, desenvolvendo tabelas, textos e aplicando imagens e afins;

A folha de estilos CSS (Folha de Estilo em Cascata) define toda a aparncia

do website, desde as cores, at a fonte e o espaamento. Tambm na folha de estilos

que as configuraes para um modelo responsivo so feitas - mais especificamente, esta
parte chamada de Media Queries, em que so adequadas estas configuraes conforme a configurao de tela do dispositivo a ser exibido;

A funo Javascript comporta todos os elementos da pgina. Ele pode pro-

porcionar animaes e efeitos maravilhosos, porm seu uso deve ser sbio. O uso excessivo pode fazer com que a pgina demore para carregar, logo, alguns frameworks feitos
para Javascript so muito utilizados - como o Jquery, que um conjunto de funes que
o web-designer pode aplicar, com poucas linhas de cdigo. Alguns efeitos podem at ser
feitos sem o uso de Jquery, apenas com funes em CSS.

Logotipos HTML5, CSS3 e JS - ltimas verses de cada tipo de cdigo.

16

DEFINIES

Com isso em conta, podemos ir mais a fundo sobre o que o Bootstrap pode fazer

para a criao de um site de forma mais rpida e fcil:

O sistema do Bootstrap feito a partir de uma Grid com 12 colunas, e cada colu-

na pode representar a diviso de uma pgina. Trs colunas, quatro divises; duas colunas,
seis divises; etc. Com o cdigo j preparado, no tem necessidade de configurar uma
diviso para ficar uma do lado da outra, e, se elas esto posicionadas em linhas diferentes,
voc tambm pode configuar para que estejam separadas.

Exemplo de Grid - Base de 12 colunas

No exemplo acima, temos trs linhas: a primeira com 12 divises, com a largura de

uma coluna cada; a segunda, com 6 divises de duas colunas cada; e a ltima, com trs
divises de quatro colunas. Por cdigo, a situao seria assim:

17

DEFINIES

<div class=container>
<div class=row>

<div class=col-lg-1>

12 divises - 1 coluna

</div>
<div class=col-lg-2>

6 divises - 2 colunas

</div>

<div class=col-lg-3>

4 divises - 3 colunas

</div>
</div>
</div>

Nota-se no cdigo a classe row , em que classifica uma linha, e col, uma colu-

na. Quanto a -lg, direciona ao tamanho da tela a ser exibida. No caso da verso 4 do
Bootstrap, estaremos trabalhando com cinco tamanhos:

Sistema de Tamanhos no Bootstrap 4

-xl

-lg

-md

-sm

-xs

>1200px

>992px

>768px

>544px

<544px

Computadores
com tela wide
(extra-larga)

Computadores
com tela larga

tablets

celulares em
modo paisagem

celulares em
modo retrato

18

DEFINIES

Alm do diferencial do Grid, o Bootstrap j possui em seu pacote:

Botes prontos: a classe btn ligada a alguma funo j direciona o taman-

ho e a cor do boto.

Exemplos de boto. No Bootstrap 4, h a incluso de botes com borda colorida btn-outline

Fontes elsticas: O Bootstrap j oferece, para tags de texto, como pargrafos

(<p>) e cabealhos (de <h1> a <h6>) a unidade rem ou em para tamanho de fonte,
muito utilizada para sites responsivos. Com a nova verso, as fontes aumentaram de tamanho, de 14 px a 16 px (valor de referncia, em pixels).

Cards e destaques: Cada card representa uma janela onde pode ser colo-

cada um destaque, uma observao, um aviso para um modal (janela que aparece na
frente do website), entre outros. Possui uma borda que separa texto de imagem, ou ttulo
de texto, e destaca o card.

19

DEFINIES

Alinhamento: O Bootstrap possui uma classe prpria para alinhar elementos,

para a direita ou para a esquerda, ou at, para o centro (margem vertical zero e horizontal automtica, em que se aplica um valor igual para os lados esquerdo e direito).
pull-tamanho-left

pull-tamanho-right

Observao: Os tamanhos esto escritos na pgina 18.

Slider prprio: Ao invs de depender de um carrossel externo (slick, entre out-

ros), o Bootstrap j possui em suas configuraes um prprio, com controles e possibilidade

de aplicar uma legenda. A classe correspondente .carousel.

Exemplo de slider - Controle manual pelas setas na horizontal

20

DEFINIES

Collapse: Efeito em acordeo que organiza uma lista de subitens e no

deixa que a pgina fique muito grande. Seu uso grande em FAQs, eventos por ordem
alfabtica ou cronolgica, e outros. As imagens abaixo mostram sua utilidade:
Item nmero 1
Item nmero 2
Item nmero 3
Exemplo de acordeo - Fechado

Item nmero 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet nunc
in nisi commodo placerat. Suspendisse et justo quis purus tincidunt pharetra. Proin
sit amet tempor libero, tristique lobortis ex. Duis suscipit augue leo, at eleifend eros
tempor egestas. Cras ut ante interdum, facilisis sapien ac, vestibulum dui.

Item nmero 2
Item nmero 3
Exemplo de acordeo - Ativado pelo clique. Um item por vez ativado; o prximo, ao ser clicado, abre, e o anterior, fecha.

Estes foram os recursos mais utilizados durante a produo do site. O Bootstrap pos-

sui vrios recursos, mas, vamos resumir apenas aos mais importantes. Com toda a base
mostrada nesta seo, podemos iniciar nossa pesquisa e criao do novo site.

21

PESQUISA

Para a pesquisa, primeiramente foi feita uma anlise da pgina original, e ver quais

o que poderia ser modificado ou no, e o que poderia adicionar na pgina. Eis a pgina
original abaixo.

Com o site como base, primeiro fizemos as anlises do que poderia estar faltan-

do. Em alguns momentos, conversei com o professor Sobrino, e conversamos sobre o que
poderia aproveitar no site, o que deve ser aplicado, o que poderia tirar por estar obsoleto,
entre outros. Foi feita uma separao em setores: Header, Menu, Slider, Destaques, Contedo e Footer. A separao feita da seguinte maneira:

22

PESQUISA

Menu

Header

Slider

Destaques

Contedo

Footer

23

PESQUISA

Header:

Presena e adequao de tamanho do Logotipo do Dividindo para Somar;

Menu responsivo, com cones inteligentes.

Menu:

Menu nico, organizado;

Feito na horizontal em desktop, em vertical em smartphones;

Trigger button - ativa o menu em verso responsiva;

Dropdown (submenus)

Slider:

Largura total da pgina;

Prximos eventos e notcias; Galeria de fotos;

Controles horizontais e legenda.

Destaques:

Entre 2 a 4 destaques;

Apresentao do projeto, eventos realizados, entidades assistidas;

Efeitos na janela do destaque.

Contedo:

Cada evento passado, informando data, local e tema;

Quantidade arrecadada, entidade que foi assistida, apoio;

Imagem para ilustrar, link para album de fotos daquele evento.

Footer:

Mapa do site detalhado com logotipo, menor;

Frase de copyright;

Likebox do Facebook.

24

PESQUISA

Comentrios do Professor:

Segundo o professor Sobrino, alguns detalhes devem ser adicionados ao site, tais

como:

Uso de Modal automtico para chamada de cadastro de emails;

Cdigo php para include em banco de dados para registro de emails;

Redes sociais - Mecanismos de curtir/compartilhar do Facebook;

Nmeros na home, como quantidade de quilos acumulados e nmero de enti-

dades assistidas;
Zoom, transition, animation (Efeitos de passagem do mouse em links e imagens);
Galeria de Imagens com legenda (Local - Data - Evento);
Botes grandes;
Fontes Elsticas (em em);

Logotipo deve ser grande, a esquerda;

Meio de contato via cabealho;

Com tudo isso em mos, pesquisei em vrios sites envolvendo templates de Boot-

strap, para se ter uma idia do que o novo website poderia ter uma forma. Lembrando
que ele deve ser aperfeioado para o Bootstrap 4, logo, o modelo seria feito manualmente, no por template pronto. Apesar do Bootstrap ser mais utilizado para site de pgina nica, ele tambm tem um bom comportamento em multi-pgina.

Exemplos como nos sites Start Bootstrap e Bootstrap Zero mostraram alguns exem-

plos de harmonia de pgina.

25

PESQUISA

Modelo Modern Business - Disponvel no Start Bootstrap

26

PESQUISA

Modelo Influx - Disponvel no Template Garden

27

DESENVOLVIMENTO - DISCIPLINAS MAIS RELACIONADAS

Web Design:
Como o prprio objetivo dita, um site seria a base de tudo. Com as aulas de web, aprendia-se desde o bsico (HTML e CSS), podendo ir at em um patamar grande (ranqueamento em SEO / Bootstrap). Todo conhecimento para aplicar neste website, desde a estrutura, quanto seu diagrama de arquitetura, formao de layout e navegabilidade, assim
como o uso no modo mobile, foram tudo aprendidos por aqui.

Laboratrio de Representao Eletrnica:

Quanto a alguns retoques quanto tamanho do logotipo, barras coloridas, proposta de
email marketing e outros detalhes que foram adicionados ao novo site, o uso do Adobe
Illustrator foi necessrio para a montagem: o tempo de produo foi curto, e ainda de
fcil manuseio. Este relatrio foi feito em Adobe Indesign, e interessante, j pensando
em outras ligaes com o programa Dividindo para Somar, para a criao de itens como
folders, panfletos, calendrios e afins; o programa ideal para deixar os arquivos no tamanho ideal, sem erros no corte quando imprimir.

Design Grfico e Criatividade / Tecnologia:

Por trs de um bom site, h uma identidade visual que d sua marca, perante toda a
criao e desenvolvimento do site. No caso, a identidade visual existe h 7 anos atrs,
mas a partir dela, obtemos uma variao mais moderna e limpa. O estudo das cores do
site tambm foi necessrio, usar os tons de azul e laranja incorretos podiam dar uma cara
mais morta, mais velha. O programa srio, mas deve apresentar doses de alegria e jovialidade em sua paleta de cor.

tica e Gesto:
Apesar de ser um trabalho solo, era importante todos os passos de planejamento deste
trabalho, desde o briefing com as ideias a serem discutidas, dando progresso a cada
pedao do site concludo, do mais fcil at o mais difcil.

28

DESENVOLVIMENTO - PROGRAMAS UTILIZADOS

Brackets:
Programa de edio HTML. A base de todo site.

Adobe Illustrator:
Programa de criao e edio vetorial. Usado para a criao de artes grficas, tais como
o fundo em barra colorida, ou o logotipo do site em tamanho menor. Vetores, quando
produzidos, nunca perdem a qualidade.

DESENVOLVIMENTO - TECNOLOGIAS UTILIZADAS

HTML 5:
Linguagem de produo principal do site. a que define todos os blocos e detalhes, ordem de cada elemento; os navegadores intepretam o cdigo e tudo exibido na web.
Exemplo de HTML - Card de evento:
<div class=col-xl-4 col-md-12 col-sm-12>
<div class=card>
<img class=card-img-top img-fluid rounded src=img/
palestras-samba-2016.jpg alt=Card image cap>
<div class=card-block>
<a href=#caiu2 data-toggle=collapse><h4
class=card-title>Oficinas e palestras da Semana de Produo Multimdia
(SAMBA 2016) - 04.04.16 a 09.04.16</h4></a>
alimentos</h5>

<h5> 89a. edio - Arrecadao: 420,230 quilos de

<div id=caiu2 class=collapse>

<p class=card-text>Evento do curso de Produo

Multimdia da Unisanta. Entidades assistidas: Cruzada das Senhoras
Catlicas</p></div>
</div>
</div>
</div>

29

DESENVOLVIMENTO - TECNOLOGIAS UTILIZADAS

Resultado:

CSS3:
Linguagem que define a aparncia do site. Pode-se definir cor, tamanho de fonte, posio
de imagem, tamanho da janela, definio para dispositivos como smartphones e tablets
(via Media Queries). Como o Bootstrap possui sua prpria folha de estilos, fazemos uma
folha externa para que podemos aplicar nossas configuraes sem que interfira na folha
original.
Nota: Sempre se deve aplicar a folha de estilos customizada por ltimo, para que as configuraes tenham efeito. O mesmo vale para funes de Javascript.

30

DESENVOLVIMENTO - TECNOLOGIAS UTILIZADAS

Exemplo de CSS - Personalizao do Modal
.modal-body

{padding-bottom: 10em;

height: 10em;}
.modal-content {border: 1em solid #65B8D0}
.modal-dialog {height:5em;}
.modal-form
{float:none;
margin:0.2em;}
.modal-i {color: deepskyblue;
margin: 0.1em 1em;}
.modal-a {color: deepskyblue;
margin:0.4em 0.15em;
padding:0.1em 0.1em;
width:20em;
float:left;}

Resultado

31

DESENVOLVIMENTO - TECNOLOGIAS UTILIZADAS

PHP:
Linguagem server-side que, junto com o HTML, organiza a pgina e define contedo
dinmico para web, como uso de banco de dados para cadastrados. No caso, usaramos
a incluso de arquivos em pginas, emails para cadastro ou mensagens de erro.

JS:
Linguagem que aplica efeitos e animaes em algum elemento da web. O Jquery a
biblioteca mais utilizada, pode rodar desde elementos mais simples, como fade-in / fadeout, como efeitos de arranque, pulo, e outros.
Exemplo de Jquery - Ativando modal:
$(document).ready(function(){
$(#myModal).modal(show);
});

Como j mostramos o modal na pgina anterior, mostraremos o efeito de arranque vertical em uma caixa de destaque:

32

DESENVOLVIMENTO - TECNOLOGIAS UTILIZADAS

Bootstrap (Verso 4)
Framework utilizado para aproveitar uma biblioteca de cdigos HTML, CSS e Jquery para,
a partir de um modelo pr programado, a criao de websites de forma rpida e fcil.

33

DESENVOLVIMENTO - CRIAO

O processo de criao comeou com o wireframe do site antigo. Com isso, defini-

mos os elementos para o novo menu, a partir de uma Arquitetura da Informao. Os detalhes e observaes entre os dois menus (horizontal e vertical) esto abaixo. Logo depois,
o menu final, com a arquitetura de informao definido.

34

DESENVOLVIMENTO - CRIAO

Menu definido:

Menu Principal
Projeto

Apresentao
FAQ

Arrecadaes

Eventos
Realizados
Entidades
Assistidas

Colabore

Sugira uma
entidade
Divulgue o
projeto
Indique para
um amigo

Contato

Formulrio
de Contato
Redes Sociais

O menu ter o logotipo, a esquerda e um espao para cadastro do email. Ter um

espao para um cone do Facebook, para redirecionar pgina do programa no Facebook. Ele possui um efeito que ao passar o mouse (hover), ele desliza pela diagonal, e isso
ser mostrado durante a finalizao do projeto.

35

DESENVOLVIMENTO - CRIAO

Alguns detalhes, como o Mapa do Site, estavam incompletos no site atual, revisa-

mos e aplicamos alguns detalhes. O Footer em si tambm foi analisado.

36

DESENVOLVIMENTO - CRIAO
Com isso, o footer, com o mapa do site incluso:
Projeto

Logotipo

Colabore

Apresentao

Sugira uma entidade

FAQ

Divulgue o projeto

Likebox

Facebook

Arrecadaes

Indique para um amigo

Contato

Eventos Realizados

Formulrio de Contato

Entidades Assistidas

Redes Sociais

O Mapa do Site completo aumenta a chance de ranqueamento no Google e em

outros buscadores, e caso a pessoa deseje visualizar todas as opes, ele pode estar acessando pelo Footer do site.

No site atual, tem banners animados em Flash, e como atualmente os navegadores

no aceitam o uso de Flash nos sites, por ser pesado e incompatvel com dispositivos mobile, no h boa indexao no Google nem boa campanha no Adwords, decidimos tirar
todos os banners animados, e qualquer animao presente no site, ser criada por cdigo CSS e Jquery.

Com trs colunas, o site fica pequeno em tamanho de fonte, pode ficar ilegvel para

quem quer acessar. Com isso, vamos manter uma coluna nica, com subdivises para
os destaques e cards. Ao invs de deixar o texto todo solto, ele organizado a partir de
headings/cabealhos e linhas horizontais.

Com o slider e os detalhes vistos acima, podemos ter uma noo do que poderia

ficar em questo o layout a partir das imagens abaixo.

37

DESENVOLVIMENTO - CRIAO

Modelo 1.0 - Parte 1

38

DESENVOLVIMENTO - CRIAO

Modelo 1.0 - Parte 2

39

DESENVOLVIMENTO - CRIAO

Modelo 1.0 - Parte 3

40

DESENVOLVIMENTO - CRIAO
Paleta de Cores:

Segundo conversa entre os professores Andr Reis, Mrcia Okida e Alexandre So-

brino, em pr-banca, as cores utilizadas no seriam ideiais com uma identidade visual j
definida, sem contar que a direo de arte estava muito fraca.

Com isso, um novo layout foi produzido, com uma paleta diferente, baseada nas

cores do gradiente do site, mas focando em sequncias chapadas e no em gradientes

lineares.

Nova Paleta de Cores:

41

#65B8D0

#B2D08B

#F3C672

#E99D61

#C74D24

J o novo layout, seria considerado o que mostra as imagens a seguir (feito a mo):

DESENVOLVIMENTO - CRIAO

Modelo 2.0 - Parte 1

42

DESENVOLVIMENTO - CRIAO

Modelo 2.0 - Parte

43

DESENVOLVIMENTO - CRIAO
Observaes:

Haviam poucos destaques para vrios detalhes. Aumentamos para seis destaques
no total, mas poderia considerar quatro como quantidade suficiente. O logotipo no meio
dava uma sensao de vazio, e precisaria aplicar algo a mais nele. O que poderia ser o
caso do menu ao lado do logotipo, a opo de cadastro e afins.

A segunda parte se manteve intacta, at a prxima edio, que pode ser considerada a oficial.

Com as alteraes, o layout seria o correspondente das prximas duas imagens.

44

DESENVOLVIMENTO - CRIAO

Modelo 3.0 - Parte 1

45

DESENVOLVIMENTO - CRIAO

Modelo 3.0 - Parte 2

46

DESENVOLVIMENTO - CRIAO
Observaes:

Esse layout mais prximo do resultado final. Com isto em mos, podemos ir para o
cdigo, e testarmos os detalhes do website a ser preparado.

Conforme citado, o programa Brackets foi o escolhido para a edio e preparao

do cdigo HTML, sendo index a pgina inicial e custom o nome da folha de estilos
personalizada. O Brackets fcil de manusear, ele autocompleta a tag a ser utilizada e o
parntese (), e organiza todos os arquivos por pasta, conforme a imagem abaixo.

Janela do Programa Brackets, utilizado para codificao.

47

CODIFICAO
Tipografia da pgina:

A princpio, usaramos a fonte Open Sans para toda a pgina, mas o perfil no

adequava com o estilo da pgina - alguns detalhes como Ttulos e Menu no ficariam to
bons com letras de mesma largura, principalmente de perfil mais quadrticos , e foi decidido usar dois tipos de fonte:

Fjalla One - Uma fonte condensada, para alguns cabealhos e menu;

Verdana - A fonte oficial do site atual, porm focada ao texto.

Fonte Open Sans, sans-serif

Fonte Fjalla One (Semelhante s fontes League Gothic e Bebas Neue)

48

CODIFICAO

Fonte Verdana, sans-serif

Especificaes da pgina:

Resoluo ideal: 1366 x 768.

Especificao para browsers:

Internet Explorer v 9-11 e Microsoft Edge;

Google Chrome 54.0.2840.59

Mozilla Firefox 49.0.2

Apple Safari 10.0.1

Especificao para mobile:

Android v5.0+
iOS 10

49

Windows Phone 10

CODIFICAO
Efeito do menu:

Como j foi mostrado o efeito da caixa de destaque durante a definio de Javas-

cript/Jquery, eu preferi explicar o que ocorre com o menu em separado.

O menu possui um elemento no css que puxa, a partir que passamos o mouse (con-

hecido como efeito de hover), a palavra na diagonal. O cdigo para esse feito este:
.btn-01{background-color: #B2D08B;
border-top: 0.2em solid #fff;

border-bottom: 0.2em solid #fff;

-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;

-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;}
.btn-01:hover {color: #B2D08B;
background-color: #fff;

border-top: 0.2em solid #B2D08B;

border-bottom: 0.2em solid #B2D08B;

opacity: 0.7;

-webkit-transform: translateY(-7px) translateX(6px);

-moz-transform: translateY(-7px) translateX(6px);
transform: translateY(-7px) translateX(6px);}

O que puxa para o lado a funo transform, que a partir de translateX e trans-

lateY, criam uma impresso de deslocamento. Opacity trabalha com a transparncia

do boto ao passar o mouse, e border para os detalhes em borda do boto. Webkit
e moz para correes dos efeitos.

50

CODIFICAO
Efeito do menu:

Na prtica, o menu ficaria com esse efeito:

Menu em condio normal.

Menu em efeito de hover.

Submenus em efeito dropdown

51

CODIFICAO
Prottipos

As imagens a seguir mostram os primeiros prottipos e as correes que foram feitas

ao longo do tempo.

Prottipo 1: Linhas simples deixavam o cenrio muito branco, muito sinestsico. As

linhas coloridas do menu estavam finas demais e o slider no correspondia a largura total.

52

CODIFICAO
Prottipos

Prottipo 2: Slider na largura total, footer prximo da ideia atual. Textos alternados,

mas no seriam bons para organizao em design responsivo. Linhas do menu mais grossas.

53

CODIFICAO
Prottipos

Com as consideraes feitas nos dois prottipos, mais a lista de detalhes a serem

adicionados da pgina 25, temos um novo prottipo de pgina inicial. Usamos mais cores,
baseados na nova paleta de cores.

O prottipo 3 tem uma impresso mais jovial, porm sria. O foco na cor azul para

algumas das sees facilita na leitura, por ser uma cor calma e fria. Nos destaques, 6
opes de espaos, mas que seriam muito alm do necessrio.

Os cards j possuem efeito acordeo, para que no fique um desnvel entre even-

tos; uns possuem poucas informaes, outros uma grande lista de apoiadores.

Um espao para cadastrar um email no cabealho, interessante para quem quer

ter alcance do assunto e poder contribuir futuramente. No rodap, um mapa do site mais
detalhado, com todas as opes.

Este layout mais prximo do que a identidade visual prope, e nas pgina inter-

nas, pode-se brincar com as fontes, utilizando em ttulos e subttulos.

54

CODIFICAO

55

CODIFICAO
Prottipo Final

Aps algumas correes em links e posio de elementos, mal deslocados, pode-se

ter um prottipo finalizado.

Esta verso j vem com os 4 destaques ideais: Galeria, Lista de eventos, de enti-

dades e a histria do Dividindo para Somar. O slider teve seu tamanho reajustado, com
cada banner medindo 1400 por 404 pixels, e as referncias so imagens que so colocadas na capa do Facebook do programa, quando se encerra uma palestra/mini-curso. Os
tamanhos dos logotipos (cabealho e rodap) tambm receberam reajustes. O colorido,
no cabealho, foi realocado de modo que ficasse paralelo ao menu; o branco, l no
rodap, teve seu tamanho diminudo para ficar proporcional ao likebox.

A galeria, novidade inclusa neste prottipo, uma pgina completamente difer-

ente do restante. Ela especfica para fazer lbuns de fotos de cada evento, e ao clicar,
a imagem aumenta, com controles na esquerda e direita para alternar. Ela exclusiva
seo dos destaques da pgina. O uso de tons de cinza atribui uma leitura mais fcil das
fotos, e no deixa o ttulo ficar com menos relevncia ao ver.

No momento que o evento mais atual for programado na pgina, ele ir para a

pgina inicial, e ficar por l at que os prximos trs eventos ocupem as posies. Logo,
seu local final a pgina de eventos anteriores. No so todas as entidades que possuem um link para acesso, logo, todas esto listadas, conforme o site anterior, e pode ser
uma ideia de modificao ps entrega deste TFC.

A maior dificuldade foi, claro, em fazer os ajustes para responsividade em tablets.

Nota-se que, ao redimensionar a pgina (via zoom ou modo responsivo do browser) que
o menu pode sumir, e o boto de trigger no aparea, e alguns elementos como os
cards, no estejam exatamente ajustados para esta configurao (Um problema que
talvez o pessoal do Bootstrap deve estar atento em sua prxima atualizao; sabemos
que existem pontos de quebra, mas no necessariamente precisamos criar vrios.) Contudo, a exibio em celulares ficou tima, e o boto de trigger aparece embaixo do
logotipo.

56

CODIFICAO - MODO DESKTOP

57

CODIFICAO - MODO RESPONSIVO

58

CODIFICAO - GALERIA DE FOTOS

59

CODIFICAO - EXEMPLO DE PGINA

Sobre as pginas internas:

Todas possuem a mesma frmula, um menu que no fixo, e no atrapalha a pas-

sagem dos elementos de contedo (imagens, textos, listas em acordeo, entre outros).
O ttulo, em tom avermelhado, o que mais se destaca dentre as cinco cores da paleta
atual, por isso foi mantido dentre todos os ttulos. O azul e laranja foram mais focados nos
textos e nas listas, com o cone de crculo do lado do ano (Eventos Realizados). Alguns textos so pequeninos, como o de redes sociais, logo, adicionamos alguns elementos como
boto de compartilhar, de curtir, e nos formulrios (Divulgue / Indique / Sugira) , o mesmo
padro de cor e borda, com o boto de confirmar laranja..

Alguns detalhes que podem ser adicionados mais para frente, que pode ser conver-

sado em um novo redesign ou adio de contedo:

Infogrfico do programa;

Vdeos a serem adicionados no prprio site;

Estatsticas de arrecadao;

Projetos interativos, como cursos ao vivo para cadastrados.

60

CODIFICAO - EXEMPLO DE PGINA

61

CODIFICAO - EXEMPLO DE PGINA

62

PROPOSTA DE EMAIL DESIGN

Foco nos banners dos prximos eventos, um cabealho com logotipo, imagens dan-

do relevncia ao palestrante, mas no deixar o restante chamar muito mais ateno do

que voc procura querer divulgar.

63

CONCLUSO

possivel melhorar e atualizar um site conforme os perfis atuais de web design. Desde que o produto tenha uma identidade visual, existente ou no, pode-se criar uma variedade de layouts que combinem com aquela marca, mas o feito pode gerar um produto
com sentimento ou finalidade alegre do que procuravam.

O site do Dividindo para Somar um exemplo. Cores mais neutras ou uma fonte
com serifa em excesso tirariam a impresso de alegria, energia, jovialidade. Exagero de
branco no site no torna moderno e clean, pode constituir um perfil sinestsico, porm
alguma cor deve ser usada para combinar em elementos como sees (ou sections) alternadas, imagens que possam servir de fundo em uma div, cones e at fontes - neste
caso, de boa legibilidade.

Com as ferramentas certas, como fontes elsticas, janelas ajustveis e menu inteligente, o site tem total capacidade de funcionar em celulares, mas devido atimosfera
do framework, que ainda est em fase alpha, alguns detalhes como tamanho de coluna
e parmetros de altura do diviso no so tao aceitveis em tablets.

A galeria possui um recurso chamado Mobirise, que faz um layout rpido e monta

o lbum de fotos em alguns cliques. Ela fcil de mexer e pode ser ajustado a qualquer
hora, e podendo combinar com outros padres de galeria de fotos ou carrossis, mas
pode no funcionar 100% em alguns navegadores, como o Safari.

Caso o projeto seja aprovado, ele ser disponibilizado nos servidores da Unisanta, e

poderei ajudar no que for para manter este site atualizado.

64

CONCLUSO

Quanto ao Bootstrap 4, ele ainda precisa ser melhorado em alguns detalhes, como
por exemplo, nos pontos de quebra para cada dispositivo. Apesar dos valores definidos j
satisfazerem toda a demanda, alguns dispositivos no possuem tamanhos idnticos - h
casos de dispositivos no aceitarem o proposto para cards, ou at pelo menu.

Nos smartphones e tablets, vrios efeitos tiveram que ser removidos para no pesar
ou prejudicar o site, mas no prejudicando sua aparncia..

Com o uso de palavras chave nas classes, certas definies como centralizar (na
qual utilizei com maior frequncia), criao de botes, correo do menu e outros. Este
um dos principais motivos na qual o uso do Bootstrap faz o que seja um dos melhores
amigos do web-designer. Mesmo com o Foundation e o Materialize (ambos frameworks),
o Bootstrap o framework mais usado no mundo, e ainda tem muito histria para contar.

65

REFERNCIAS BIBLIOGRFICAS
http://professores.unisanta.br/sobrino/dps/ - Site do Dividindo para Somar.
http://v4-alpha.getbootstrap.com/ - Base do bootstrap,feito na verso 4 alpha 2.
http://tympanus.net/Development/HoverEffectIdeas/ - Efeitos para os cards (destaques
da pgina) que deixaro com um toque mais alegre.
http://demo.geekslabs.com/materialize/v3.1/media-hover-effects.html#! Outro site
mostrando os mesmos efeitos para os cards, com algumas alteraes em fonte e tamanho.
https://color.adobe.com/ - Criao da nova paleta do site
http://stackoverflow.com/ - O motivo de ter colocado este site em sua homepage, foi
devido ao fato que muitas dvidas e dicas a respeito da montagem/programao do site
em bootstrap 4 foram encontradas aqui.
https://medium.com/wdstack/bootstrap-4-whats-new-visual-guide-c84dd81d8387#.jn5rnm6to Pesquisa do mecanismo do bootstrap 4.
https://scotch.io/bar-talk/whats-new-in-bootstrap-4 - Pesquisa do mecanismo do bootstrap 4.
Obs: Os dois ltimos sites demonstram as diferenas entre a nova verso do framework
quanto s anteriores.
https://mobirise.com/bootstrap-gallery/ - Mobirise
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-accordion.php
Como fazer efeito acordeo

http://www.bancodealimentos.org.br/ - ONG Banco de Alimentos

http://www.walmartbrasil.com.br/responsabilidade-corporativa/instituto-walmart/viver-melhor-comunidade/boas-acoes/ - Projeto Boas Aes do Walmart
https://startbootstrap.com/template-overviews/modern-business/- Modelo de multi-pgina com Bootstrap (Modern Busiess)
https://www.templategarden.com/preview/influx/template/index.html - Modelo de multipgina com Bootstrap (Influx)
http://tableless.github.io/iniciantes/- Explicaes bsicas sobre o que so cdigos HTML,
CSS e JS.
https://mailchimp.com/resources/email-design-guide/ - Inspirao para Email Design

66

dps2