Construindo um mini site estático

Esse tutorial faz parte de uma série de tutorias que pretendo escrever sobre desenvolvimento Front-end. E para iniciar resolvi começar com algo simples, nível “comecei agora”. Nada mais prático do que um pequeno site sobre você mesmo. Como disse, ele vai ser simples. No entanto vamos chegar ao ponto de publicar ele na internet. No final ele vai ficar assim.

Para começar vamos utilizar um framework chamado Skeleton. Você pode encontrar várias informações dele no site, mas vou dar um breve resumo. Pra quem não sabe o que é um framework lá vai uma breve explicação.

“ Framework é um conjunto de classes que colaboram para realizar uma responsabilidade para um domínio de um subsistema da aplicação. ” — Fayad e Schmidt.

Então eu posso dizer que um framework é um conjunto de códigos agregados de maneira organizada para suprir uma determinada necessidade. É código pronto pra reuso por finalidade existencial. Não queremos perder tempo rescrevendo coisas que estão prontas e de fácil acesso. Sem entrar na questão da importância do fazer do zero por conhecimento e experiência. Agora vamos falar do Skeleton. Precisamos de um sistema de grid para nosso mini site. Poderíamos fazer do zero, mas quero ganhar tempo. Utilizo o Skeleton em muitos projetos por achar ele limpo e fácil de usar. Baixe nesse link o arquivo .rar que contém os css’s de nosso interesse.

Vamos começar! Espero que já tenha um editor de texto em mão. Eu particularmente utilizo o Sublime Text. Extraia o arquivo .rar e abra o index.html no seu navegador. Pronto esse é um exemplo da utilização do framework. Se você olhar o código no seu editor verá que é muito simples utilizar o sistema de grids dele. No decorrer do tutorial vamos conhecer mais sobre como trabalhar com ele.

Onde tiver o código a seguir.

Substitua por esse aqui. Perceba que esse style é o que está fazendo nosso texto ficar no meio da página. Vamos tirar isso, queremos que fique em cima.

Outra coisa que mudamos foi conteúdo de class. Agora o texto vai ocupar todas as 12 colunas disponíveis da página. Encontre um link de uma imagem na internet. O ideal é que essa foto seja uma sua. Antes do h4 coloque o código a seguir. Vamos por uma imagem no topo da nossa página. No lugar do endereço que está ai coloque o endereço de uma imagem sua.

Dentro de h4 coloque seu nome. E dentro de p coloque um pequeno texto que fala um pouco sobre você. Como estou escrevendo esse tutorial agora, peguei um texto do Wikipédia que fala sobre o Capitão Pirata Jack Sparrow. Salve o arquivo, atualize a página no navegador e veja como ficou. Até agora está estranho, vamos centralizar essa imagem e esse h4 para ficar mais interessante. Também precisamos fazer com que essa imagem fique um pouco mais longe do topo. Para isso precisamos criar alguns estilos no css. Apesar de ser poucos estilos, gosto de criá-los fora do html. Para isso vamos criar um arquivo novo chamado layout.css na pasta css. Feito isso precisamos adicionar uma nova linha no nosso header. Temos que importar o arquivo criado pela gente. Segue um exemplo de como deve ficar.

Agora vamos escrever o css que disse que faríamos. Adicione ele em layout.css.

Só isso vai mudar algumas coisa no nosso mini site. Veja que nossa imagem está centralizada. Isso foi possível através do primeiro margin. E aqui a ordem importa.

Adicionando a minha timeline do twitter no meu mini site. É isso mesmo. Não é tão difícil fazer isso. Só precisa se cadastrar no twitter, caso já tenha uma conta siga em frente comigo. Hêhê! Vá em https://twitter.com/settings/widgets e clique em create new. Precisamos criar um Widget. E nele você pode colocar o termo de pesquisa que quiser. Pode ser sua timeline, ou os últimos tweets sobre futebol ou Dota. Lá embaixo do site tem o botão create widget. Confirme, ele vai dar um código pra você. Copie e cole na sua página. Logo após o p. Seu index deve estar parecido com isso.

Ok! Agora quero que minha timeline do twitter fique do lado do texto que fiz, como faço? Pra isso vamos usar a grid do Skeleton. Vou colocar as estruturas das divs com o Skeleton, irei ocultar algumas informações para ficar mais limpo.

Veja que podemos ter no máximo em cada row 12 colunas. Como ali já tinha 12 tive que criar outra row para por nosso texto e minha timeline. Pra finalizar o projeto antes de publicar vou adicionar um pequeno css para a tag p e um hr depois do h4. Adicione o css em layout.css.

Eu gosto bastante do divshot.io. Sempre uso ele para publicar sites estáticos para testes. O processo é simples e você pode até utilizar o cli deles. Crie uma conta lá e vamos que vamos. Ao entrar você vai para a página onde ele listará todos os seus apps. Clique em create app. Dê um nome e continue. Lá em baixo você verá três opções. Development, stanging e production. Você pode subir uma versão diferente do seu site para cada uma dessas opções. É bastante útil. Vamos logo para production, vai ter a opção upload. Transforme os arquivos do seu projeto em um único arquivo zip e suba para o divshot. Depois disso ele vai carregar e você poderá visitar seu app e compartilhar o link com o seus amigos. Lembrando que tem que clicar em VISIT APP para isso.

Esse é o link do meu mini site.

Esse tutorial fica por aqui. Espero que eu possa ter ajudado pelo menos um pouco alguém. Até a próxima!