Pular para o conteúdo principal

Postagens

Do it yourself: Não é tão difícil assim #2



Ei, pessoal! Tudo bem?

Um pouquinho atrasado, mas hoje temos a segunda parte do tutorial de como fazer o seu próprio layout. Resolvi continuar explicação pelo mesmo jeito que sempre faço os meus. Sempre edito pela ordem que vai aparecendo no Template Mínima. Acho mais fácil de localizar tudo e manter a organização na hora de editar tudo. Lembrando que o tutorial é extenso e será explicado de forma muito (muito mesmo) fácil. Então vamos em frente.

Atributo Body
O body é o elemento responsável por ser o container de tudo que é conteúdo do site. Ou seja, o que está dentro do <body> é o que fica ou ficará disponível para visualização do visitante. Vale lembrar: o body é uma tag HTML e como tal, aceita atributos. Por isso, se você quer definir um padrão para o site, pode colocar os atributos nessa tag.

1. Background
A parte mais fácil de fazer no template é adicionar o background, pois o mesmo só poderá ser uma cor ou uma imagem.

background: $bgcolor;

Onde o $bgcolor é o atributo padrão do template mínima, basta altera-lo para o código da cor que deseja. Se você quiser adicionar o link basta usar:

background: url(link-da-sua-imagem-aqui);

O atributo background tem vários características e você pode encontra-las de forma detalhada nesta página aqui.

2. Links
Seguindo do body, temos os atributos para os links em geral. Um link visitado, não visitado, ativo ou no estado hover pode assumir aspectos diferentes (cores, fundos, etc...). Para não ficar extenso, você pode ver suas propriedades aqui.

Header: o cabeçalho do layout
O cabeçalho por padrão fica dentro do #outer-wrapper. Ali também contém a área da postagem, a sidebar e footer. Por isso, se você aumentar o tamanho do #header-wrapper ele vai ficar com uma parte "escondida" por não caber no valor declarado no #outer-wrapper. Ou seja, a forma mais simples de resolver é você lembrar de alterar o valor atribuído lá também.

#header: é o cabeçalho do blog, onde costuma ficar o título do blog. É o topo do blog. Geralmente fazem parte do trecho de cabeçalho as seguintes variáveis:
#header-wrapper: corresponde a toda a área do cabeçalho.
#header-inner
#header: corresponde a coluna dentro do cabeçalho.
#header h1: corresponde ao nome do cabeçalho (título do blog).
#header a: corresponde ao link do nome do cabeçalho.
#header .description: corresponde a descrição do blog que fica dentro do cabeçalho.
Designer de modelo:
.header-outer: área do cabeçalho
.header h1: título do blog
.header h1 a: link do nome do cabeçalho
.header .description: descrição do blog

Outer wrapper
Seguindo o template, vem o #Outer-Wrapper que, assim como foi dito mais acima, é a área total das colunas. Geralmente abrange toda a área do cabeçalho, coluna de postagens, sidebar e footer. Sendo assim, qualquer alteração que você fizer com realação a largura dos atributos citados, vai ser necessário alterar a largura do #outer-wrapper. Se você aumentar a largura do post e da sidebar, mas não alterar a largura do #outer-wrapper, o seu layout vai ficar todo desalinhado. Muito confuso? Veja o exemplo:


Note que, na versão original, a soma do width (largura) do Main e da Sidebar é menor do que o valor do Outer. Já na versão alterada, a soma ultrapassa o valor. Se você fizer o teste, vai perceber que o seu layout vai ficar todo desajustado. Por isso é importante lembrar de manter a largura do Outer igual ou superior a soma do Main e da Sidebar.

Observação: Isso também serve para o Footer. A largura total dele deve ser igual ou menor que a largura do Outer.


É isso. Na próxima semana tem mais.
Beijos

Bienal 2014: Mais uma edição do Encontro de Blogueiros!


Ei, pessoal! Tudo bem?

Antes de qualquer coisa, eu sei que a Bienal do Livro em São Paulo é só em agosto, mas nada melhor do que começar a preparar tudo bem cedinho, não é? Assim como em 2012, a Bianca do Hello Star está organizando mais um encontro de blogueiros. Para quem não participou na última edição, o encontro tem como objetivo promover o encontro entre os amantes da leitura de uma forma bem divertida.

Neste ano, a Bianca disponibilizou um site para o evento onde cada participando poderá realizar sua inscrição e também dar uma olhadinha no que rolou no encontro de 2012.

O encontro será nos dias 23 e 30 de agosto.



O que rolou em 2012...


Beijos!

Do it yourself: não é tão difícil assim #1

Algumas vezes recebo e-mails de leitores pedindo para que eu faça um passo-a-passo de como criar o próprio layout. Por ser um tutorial extenso, nunca pensei em postar nada do tipo aqui no blog, porque não é algo que possa ser resumido em uma única postagem. Então, para ajudar um pouquinho, vou fazer uma sequência de postagens explicando alguns conceitos básicos para quem não quer depender mais de layouts prontos e precisa de um pouquinho mais de noção de HTML e CSS para conseguir editar sozinho.

Um conselho muito útil para quem está começando é: use uma base pronta! O próprio blogger disponibiliza vários templates básicos que depois de editados diminui (e muito) o seu trabalho. Já testei a maioria das versões do blogger, mas a versão mais fácil de usar é o Template Mínima. Por isso todos os tutoriais que vou postar aqui o terão como base. (Para fazer o download basta clicar aqui)

Primeiro passo: Conheça a base que você está usando.
Logo no começo do código você vai encontrar as definições básicas das variáveis (Variable definitions). Recomenda-se que não apague, pois alguns recursos do código já estão pré-definidos nesta parte. Isso não impede que você altere os estilos mais para frente no código. Em seguida virão as variáveis utilizados na construção do layout.

Segundo passo: Conheça a estrutura do template.

Header: O cabeçalho do layout é representado por: #header-wrapper e #header.
Outer-wrapper (a parte cinza da imagem): Basicamente é parte que abriga todo o layout, representada por #other-wrapper.
Sidebar: A coluna lateral é representada por: #sidebar-wrapper.
Main: A coluna da postagem é representada por: #main-wrapper.
Footer: O rodapé do layout é representado por #footer-wrapper.

Terceiro passo: Nunca altere o código sem ter um backup!
Tudo bem, pode parecer redundante, mas por experiência própria: não corra o risco de perder tudo. O blogger, ou qualquer outra ferramenta, pode falhar de vez em quando e se isso acontecer você vai agradecer muito por ter feito um backup das suas informações. Então sempre que você terminar de alterar o código, baixe a última versão. Isso será útil até se na hora de editar o código você apagar algo que não deveria. ;)

É isso! Semana que vem tem a próxima postagem do tutorial. Aproveitem e mandem por e-mail o que vocês querem ver por aqui.

Beijos!

Histórias de uma (quase) formanda: Reta Final #5

Tudo começa no dia que antecede a apresentação. A angústia, o medo e a empolgação. Tudo de uma vez só. Ao mesmo tempo em que você deseja que esse dia não passe, você também quer que termine logo e o mais rápido possível. Sem demora. Mas ao repassar mentalmente tudo o que ainda precisa ser feito e tudo o que você precisa apresentar, bate aquela insegurança de novo. Até parece que isso nunca vai acabar. Quando você olha o relógio percebe que só passaram duas horas desde a última vez que você o consultou. Já em casa, você tenta dormir, mas uma enxurrada de pensamentos começa a vir à tona. É tarde mais. O sono vai todo embora. Sempre que você tenta parar de pensar no bendito trabalho, mas as horas demoram a passar. Você resolve fazer algumas alterações na apresentação, só para ter certeza que estava melhor antes. E sabe aquela história de que é melhor descansar, dormir bem, para que você fique bem na hora da apresentação? É... isso não existe. Principalmente se você for uma pessoa ansiosa. Tudo o que importa é o que vai acontecer. É só nisso que você consegue pensar. Até que no fim, quando a sua cabeça esgotou todas as energias, você dorme. Então o despertador toca.

Enfim chegou o dia.



Beijos *-*

Do it yourself — 3 sites para deixar nos favoritos

Oii, pessoal!

Sempre recebo vários e-mails pedindo para que eu poste algumas dicas para blogueiros que querem aprender a fazer o próprio layout ou dicas de sites que eu uso para buscar os materiais para blog. Então resolvi dar maior atenção para essas dicas aqui. A partir de hoje, teremos um coluna semanal com dicas para quem quer colocar a mão na massa e não depender mais de layouts free ou encomendados.

Antes de mais nada, por favor não se desesperem! No começo, principalmente para quem nunca mexeu com com HTML e CSS, pode parecer um bicho de sete cabeças, mas para tudo damos um jeitinho.

E para começar com o pé direito e não assustar ninguém, hoje vou indicar três sites que nunca deixo fora dos meus favoritos e sempre salvam todos os layouts que eu faço. Espero que vocês gostem das dicas e aproveitem bastante!

1. Freepik
Freepik é um motor de busca que ajuda designers gráficos e desenvolvedores de web a localizar fotos de alta qualidade, vetores, ícones, ilustrações e arquivos PSD para seus projetos criativos.
É uma ferramenta incrível que rastreia e localiza conteúdo gráfico gratuito na Internet e mostra os resultados em um plano ordenado para fácil acesso. Você também encontrará muito conteúdo gratuito e exclusivo, de alta qualidade, desenhado pela equipe Freepik e atualizado diariamente.
Muitos já conhecem, mas o Freepik é o melhor site para encontrar vetores incrível para usar nos seus layouts.

2. Flaticon
Com mais de 46 mil ícones criados diretamente no Photoshop, o Flaticon é uma das melhores escolhas do mercado. O modo para encontrar os ícones que você pretende é muito simples: basta pesquisar na barra de pesquisa e aparecem todas as opções. Ao todo, já mais de 80 mil designers utilizaram este plugin. Depois de escolher o ícone tem possibilidade de customiza-lo conforme as suas necessidades.

3. Des1gn ON
O Des1gn ON surgiu com o intuito de ajudar nesse quesito, sempre com matérias quentes e criativas, assuntos desde curiosidades, eventos, até dicas, freebies, entre outros. Des1gn ON é o blog sempre ligado nas novidades do mundo do design, é o blog para sua inspiração diária!

Bônus: para guardar nos favoritos e no coração


O Canva é um software de design gráfico gratuito, fácil de usar e completamente online. E já está fazendo bastante sucesso entre seus usuários! O Canva existe há menos de 5 anos e conta com 11,4 milhões de usuários em 179 países.

Para acessar o site, clique aqui.

Para quem não quer o trabalho de ter que instalar um programa e ainda assim deixar o blog lindo, precisa conhecer esse site!


Beijos!