Iniciando a construção de um Website

Com os fundamentos aprendidos até o momento, creio que você já deve estar pronto para colocar a mão na massa. Então, neste capítulo, vamos iniciar a construção de um simples Website.

Antes de começarmos a programar, precisamos inicialmente definir quais serão os objetivos do Website, realizar uma busca na Web por sites semelhantes (é claro que não queremos plagiá-los, mas precisamos de inspiração), desenhar os primeiros esboços (wireframe), desenhar uma versão mais sofisticada com cores definidas (mockup) e por fim construir um protótipo. Ainda não deixaremos o site funcional. Neste capítulo trabalharemos apenas a parte HTML + CSS.

Objetivos do Website

Como esse site que estamos criando deve ser apenas um modelo para guiá-lo na construção de seu próprio site, decidi escolher um tema a qual eu trabalho: enzimas beta-glicosidases. Essas enzimas têm uma grande importância na produção de biocombustíveis de segunda geração.

Meu site não apenas exibirá informações, como fará buscas em uma base de dados, retornará resultados (para isso faremos a integração com a ferramenta BLAST) e exibirá os resultados em uma página própria. Para reduzir o número de páginas criadas podemos utilizar o componente “modal” do Bootstrap. Vamos construir uma base de buscas tanto de sequências quanto de estruturas tridimensionais. Logo, percebam que meu site deixará de ser apenas um website comum que transmite informações, e se tornará um site dinâmico, além de uma ferramenta completa (mas ainda não implementaremos tais ações).

O que nosso site modelo precisa ter?

• Uma página inicial
  • Logo
    • Menu
    • Ajuda
    • Uma breve explicação do site
    • Link para funcionalidades
    • Rodapé
  • Uma página de “quem somos”
  • Uma página que lista todos os itens
  • Uma página de resultados

Após definirmos o que nosso site precisa ter precisamos escolher quais ferramentas vamos usar para desenvolvê-lo:

• Editor: Sublime text 2
• Servidor Web: Apache (XAMPP)
• Editor de imagens: Photoshop/GIMP/Paint
• Framework CSS/JavaScript: Bootstrap
• Framework PHP: nenhum

Agora que fizemos essas definições básicas, vamos começar a desenhar o nosso site. O primeiro passo é realizar um esboço.

Wireframe

Wireframe é um esboço bem rústico de seu site. Ele deve ser feito a mão. Nele você define o posicionamento dos principais elementos de sua página. É importante focar no posicionamento de cada seção e nos tamanhos estimados para cada. Segue a seguir um esboço de nosso projeto:

Note que inicialmente reservamos um espaço para o menu e o logo. A seguir, uma seção apresenta alguns conceitos básicos do site. Exploramos o uso do componente carousel do Bootstrap. A seguir, delimitamos espaço para três seções distintas. Ainda não tenho certeza de qual será o conteúdo delas, mas creio que serão de grande importância. Por fim, um espaço dedicado ao rodapé é reservado. Não se preocupe com as margens laterais, pois Bootstrap fará os ajustes necessários.

No próximo tópico, vamos aperfeiçoar nosso projeto, melhorando o desenho com uma ferramenta de edição de imagens.

Mockup

O mockup é uma representação quase fiel da sua página. Você pode criá-lo usando um programa de edição de imagens, como por exemplo, Photoshop, GIMP ou até mesmo o Paint.

Opcionalmente você pode utilizar um grid para visualizar. Recomendamos o download do framework 960gs. Esse framework possui um pacote de templates com guias. Você pode baixá-lo em: <https://960.gs>. Para o exemplo a seguir, usaremos o sistema de grids com 12 colunas. Estamos utilizando a versão para Photoshop (960_grid_12_col.psd). Antes de começar a fazer a página, construí algumas imagens usando a ferramenta de edição de imagens. Para construção dessas imagens, obtive imagens em sites gratuito (marcadas com direitos de reutilização com modificações) e as combinei para formar imagens únicas. Você pode conseguir essas imagens no material suplementar.

Abaixo, o logo construído do site (decidi chamá-lo de betabase):

Desenhei também três imagens para explicar todo o processo:

Nome	Imagem
j1.jpg
j2.jpg
j3.jpg

Além disso, três imagens para a seção do meio:

Nome	Imagem
f1.jpg
f2.jpg
f3.jpg

Para cor do menu, podemos utilizar a cor nativa do Bootstrap. Para isso, invoque a classe “navbar-inverse”. Defini um tom de verde para os links: #9bbd46.

Na seção abaixo do menu decidi utilizar um efeito degradê no plano de fundo. O efeito gradiente vai da cor #35b8b0 até a cor #1c799d, com um ângulo de inclinação de 135º.

background: linear-gradient(135deg, #35b8b0 0%,#1c799d 100%);

c5_s35.html | https://goo.gl/jTfzRx

Tanto o menu quanto o background da seção abaixo, que decidi chamar de “main”, foram geradas via código HTML. A seguir, usei a função print screen para transferir a imagem criada para o editor de imagens e, assim, finalizar o leiaute.

A seguir usei algumas informações sobre alocação de imagens no sistema de grid obtidas diretamente na documentação do Bootstrap. Isso facilitou a construção do setor inferior.

Por fim, foi construída a região do rodapé. Reinseri o logo no começo do rodapé, repeti o menu principal, e abaixo inseri uma mensagem referente aos direitos autorais.

Abaixo vemos como ficou o mockup do site (com as linhas de grid inseridas pelo 960gs):

Com o desenho da aplicação construído fica mais fácil construir um protótipo em HTML do Website. Além disso, algumas das partes do mockup foram construídas com base em códigos HTML previamente construídos.

Agora observe uma comparação entre o rascunho construído (wireframe) e o desenho da aplicação (mockup):

Wireframe	Mockup

Para construção do protótipo deve-se levar em conta que criamos apenas o mockup da página inicial. Ainda há outras páginas que não foram criadas, como por exemplo, a página de “quem somos”, a lista de itens da nossa base de dados e a página de resultado de buscas. Podemos utilizar modais para setores de ajuda.

Apesar desses problemas, podemos importar a maior parte desse template para outras páginas. Por exemplo, menus e rodapés são constantes. O meio das páginas pode importar os sistemas de cores. Logo, talvez não seja necessário construir um mockup para cada página, uma vez que desenhá-las via HTML pode ser mais rápido.

Protótipo

Agora vamos construir o código-fonte. Vamos começar com o “estilo.css”. Não vamos explicar os detalhes, por enquanto. Então, apenas copie o código a seguir:

/* estilo.css */
* { margin:0; padding: 0; }
footer { background-color: #222; min-height: 180px; color:#999; padding:40px; }
header { background-color: #000; }
nav { min-height: 90px; margin-bottom: 0 !important;  }

#main { padding: 50px; background: linear-gradient(135deg, #35b8b0 0%,#1c799d 100%);  }
#main img  { max-height: 400px; }
#middle { margin: 50px 0; }
#logo { margin:20px 0; }

.lista_footer { margin-top:35px; }
.link_menu { margin-top:20px; }
.link_menu a{ color:#9bbd46 !important; padding:10px;  }
.link_menu a:hover{ background-color:#9bbd46 !important; color:#111 !important; }
.center { text-align: center }

c6_s2.css | https://goo.gl/MIdWfh

Agora crie o arquivo “index.html”. A seguir vamos construir o cabeçalho de nossa página (head). Nossa página se chamará “betabase”, deve ter suporte ao charset utf-8, Bootstrap, folha de estilos própria (que, aliás, já criamos) e viewport preparado para smartphones.

<!DOCTYPE html>
<html>
<head>
    <title>betabase</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" href="img/favicon.png" sizes="32x32" type="image/png">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

c6_s3.html | https://goo.gl/uYs18v

Crie uma pasta chamada “css”. Insira as folhas de estilo do Bootstrap nesse diretório. Insira também o arquivo “estilo.css” onde estarão os seus estilos personalizados. Não se esqueça de que ele deve ser carregado após as folhas de estilo do Bootstrap. Observe que inserimos um link do tipo “shortcut icon”. Essa imagem é uma figura reduzida de 32px por 32px do nosso ícone, que ficará ao lado do título no navegador. Chamamos isso de “favicon”.

Agora vamos fazer o topo de nossa página:

<body>
    <header>
        <nav class="navbar navbar-inverse navbar-fixed">
            <div class="container">
                <div class="navbar-header">
                    <!-- LOGO -->
                    <a href="#" alt="betabase - home" title="Home"><img id="logo" src="img/logo.svg"></a>
                    <!-- SMARTPHONE -->
                    <button type="button" style="margin-top:25px" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu_lista" aria-expanded="false">
                        <span style="background-color:#9bbd46" class="icon-bar"></span>
                        <span style="background-color:#9bbd46" class="icon-bar"></span>
                        <span style="background-color:#9bbd46" class="icon-bar"></span>
                    </button>   
                </div>
                <div class="collapse navbar-collapse" id="menu_lista">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="link_menu"><a href="#">Sobre</a></li>
                        <li class="link_menu"><a href="#">Listar</a></li>
                        <li class="link_menu"><a href="#">Projetos</a></li>
                        <li class="link_menu"><a href="#">Ajuda</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

c6_s4.html | https://goo.gl/5TSq3W

É importante ressaltar que nosso topo herda várias características nativas do Bootstrap, entretanto algumas modificações foram feitas. Por exemplo, aplicamos a cor preta (background-color: #000) no header para remover detalhes indesejados das bordas da navbar, que também recebe uma altura mínima de 90px (min-height: 90px) e uma margem inferior de 0px (margin-bottom: 0 !important;). Note que a altura mínima permite que o menu se expanda ao ser usado em smartphones, além disso ao usar a opção !important garantimos que o Bootstrap não irá inserir margens indesejadas após a navbar.

Observe que criamos uma classe para os itens <li> de nosso menu (.link_menu). Inicialmente ela recebe uma margem superior (margin-top:20px). Depois aplicamos uma regra a todos os links presentes nela: cor verde (color:#9bbd46 !important) e margem interna (padding:10px;). Os links, ao serem sobrepostos (a:hover), ganham nova aparência: passam a ter cor preta (color:#111 !important) e fundo verde (color:#9bbd46 !important). Ao final, nosso topo da página ficará assim. Neste exemplo, o botão ajuda está sobreposto.

Vamos criar uma nova div, que chamei de “main”. Inicialmente observe que após a div main ser declarada, inserimos uma div “container”. Isso é importante, pois indica que main será uma div infinita, mas seu conteúdo será contido por container. Observe também como as classes do tipo “col” são descritas, por exemplo, a div que armazena o carousel com tamanho “col-md-5 col-xs-12”. Isso indica que em um dispositivo de tela média, essa coluna ocupa 5 das 12 partes da tela, enquanto em um smartphone ele deverá ocupar toda a tela (12/12). Não entrarei em detalhes nesse código, pois você já o conhece.

<div id="main">
    <div class="container">
        <div class="row">
            <div class="col-md-5 col-xs-12">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

                    <!-- PONTOS REPRESENTATIVOS DE IMAGENS -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>

                    <!-- IMAGENS -->
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="img/j1.jpg" class="img-thumbnail center" alt="beta-glicosidases">
                            <div class="carousel-caption">
                                Enzimas usadas na produção de <strong>biocombustíveis</strong>.
                            </div>
                        </div>
                        
                        <div class="item">
                            <img src="img/j2.jpg" class="img-thumbnail"  alt="agem em parceria com endo- e exoglucanases.">
                            <div class="carousel-caption">
                                Agem em parceria com endo e exoglucanases para converter celulose em glicose fermentável.
                            </div>
                        </div>

                        <div class="item">
                            <img src="img/j3.jpg" class="img-thumbnail"  alt="...">
                            <div class="carousel-caption">
                                São altamente inibidas pelo próprio produto. Entretanto, algumas são resistentes.
                            </div>
                        </div>
                    </div>

                    <!-- CONTROLES -->
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Anterior</span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Próximo</span>
                    </a>
                </div>
            </div>

            <div class="col-md-7 col-xs-12">
                <h1>Hello, world!</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet risus ligula. Mauris pretium magna nec porttitor vulputate. Maecenas nisi massa, imperdiet at viverra sed, gravida id quam. Vestibulum diam est, efficitur in libero ut, maximus dictum tellus. In a leo dolor. Nam nec dictum magna. Donec interdum dolor vel nulla placerat, at tincidunt orci viverra. Curabitur vel lacus enim. Morbi iaculis ipsum et mi pretium ultricies. Duis ut metus quis sapien dictum euismod. Vestibulum leo odio, porttitor eget ultricies eu, dignissim id tortor.</p>
                <p><a class="btn btn-primary btn-lg" href="#" role="button">Leia mais</a></p>
            </div>
        </div>
    </div>
</div>

c6_s5.html | https://goo.gl/1X4pQG

Após o carousel, é inserida uma div com tamanho de colunas “col-md-7 col-xs-12” (ocupa 7/12 na tela comum e 12/12 no celular). Nessa div inseri um texto “Lorem Ipsum”: um texto em latim que serve simplesmente para simulação de textos (você pode encontrar centenas de sites com esses textos numa simples busca no Google). Usei por fim um botão azul (classe btn-primary).

Observe que para construir a div main inseri algumas regras para melhorar a visualização, como por exemplo, inserir margens internas de 50px no topo e ropapé, e apliquei um efeito de cor gradiente no background “linear-gradient(135deg, #35b8b0 0%,#1c799d 100%)”. Veja como ficou:

A div middle deveria abrigar três colunas que fariam a chamada pra três funcionalidades do site. Ela é seguida por uma div container e uma div row. Dentro dessa div há três colunas. Cada coluna tem tamanho 4 (classe col-md-4). As imagens foram criadas com um grande tamanho, para caso fossem reajustadas não perdessem qualidade. Em cada imagem acrescentamos a classe “img-thumbnail” para que uma borda melhorasse sua visualização. Vamos inserir três temas na div middle: SOBRE (mostrará informações sobre o site), NAVEGAR (listará todas as proteínas) e BLAST (que permitirá fazer buscas usando o algoritmo do BLAST).

<div id="middle">
    <div class="container">
        <div class="row"> 
            <div class="col-md-4"> 
                <div class="thumbnail"> 
                    <img src="img/f1.jpg" class="img-thumbnail"> 

                    <div class="caption"> 
                        <h3>Sobre</h3> 
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet risus ligula. Mauris pretium magna nec porttitor vulputate.</p> 
                        <p><a href="#" class="btn btn-primary" role="button">Botão</a> 
                        </div> 
                    </div> 
                </div> 

                <div class="col-md-4"> 
                    <div class="thumbnail"> 
                        <img src="img/f2.jpg" class="img-thumbnail"> 
                        <div class="caption"> 
                            <h3>Navegar</h3> 
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet risus ligula. Mauris pretium magna nec porttitor vulputate.</p> <p><a href="#" class="btn btn-primary" role="button">Botão</a>
                        </div> 
                    </div> 
                </div> 
                
                <div class="col-md-4"> 
                    <div class="thumbnail"> 
                        <img src="img/f3.jpg" class="img-thumbnail"> 
                        <div class="caption"> 
                            <h3>BLAST</h3> 
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet risus ligula. Mauris pretium magna nec porttitor vulputate.</p> <p><a href="#" class="btn btn-primary" role="button">Botão</a>
                        </div> 
                    </div> 
                </div> 
            </div>
        </div>
    </div>

c6_s6.html | https://goo.gl/feCp1B

No rodapé inseri novamente o logo, e repeti links importantes para a página. No rodapé fiz ainda o carregamento dos scripts do jQuery e do bootstrap.min.js. Mais tarde adicionarei outros scripts, como 3Dmol.

<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-2"><a href="#"><img id="logo" src="img/logo.svg"></a></div>
            <div class="col-md-1 lista_footer"><a href="#">Sobre</a></div>
            <div class="col-md-1 lista_footer"><a href="#">Listar</a></div>
            <div class="col-md-1 lista_footer"><a href="#">Buscar</a></div>
            <div class="col-md-1 lista_footer"><a href="#">Ajuda</a></div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <p>© 2017 betabase | Todos os direitos reservados. Construido por <a href="#">Diego Mariano</a>.</p>
            </div>
        </div>
    </div>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</footer>
</body>
</html>

c6_s7.html | https://goo.gl/AzhqEn

Essa é a visão inicial que teremos do nosso rodapé:

Até o momento seu site deverá ter esta estrutura organizacional de pastas:

Não se preocupe com a pasta “fonts”. Ela é nativa do Bootstrap e serve para, por exemplo, permitir a inserção dos ícones personalizados. Outras páginas podem herdar parte desse leiaute (não estranhe essa palavra: é uma tradução já aceita para layout), mas para isso precisamos aprender a como construir páginas dinâmicas. Neste livro, abordaremos o uso da linguagem PHP.

Quer aprender mais? Conheça nossos cursos profissionalizantes à partir de R$19,99: