19 de mar de 2014

Big Tutorial: Criando uma Skin part.1: Entendendo Códigos

Olá anjinhos! ~ Sentiram saudades da tia Cronya? Eu senti e fiquei do lado da Orling enquanto o Diogo enrolava com o lay por que já estava doida para postar, e mesmo na pressa esse lay ficou incrível, me apaixonei por ele. Eu já entrei na fase dos testes e das provas, em outras palavras, já estou quase implorando por férias, que ótima aluna eu sou, não? Enfim, deixem quieto. Hoje eu vou começar um big tutorial de como fazer skins do zero e é incrivelmente simples, mais do que editar com uma base do blogger, por que, do meu ponto de vista: na skin é tudo seu, você entende o código, foi você que o criou, só parece mesmo um bicho de sete cabeças, mas não é.


Introdução
Skin é o termo que se dá para um html feito no zero, sem nenhuma base sequer. O blogger só oferece essa opção quando nós ativamos o 'modelo clássico' no desing. Outra coisa que preciso deixar claro é que não há 'layout' nas skins, quer dizer, aquela página onde você ajeitava os gadgets. Os 'gadgets' são postos diretamente no html, pode ser estranho, mas se acostuma :3 ~

Começando...
Para entender como tudo funciona, precisa entender esses estruturas:
<html>
<head>
<title></title>
<style>
</style>
</head>
<body>
</body>
</html>
html - é o que define o início e o fim do código de html;
head - é a parte que não aparece na página, é aonde fica as instruções para o browser;
title - a nome da aba que fica no browser, apenas;
style - não necessariamente nesse lugar e nessa ordem, é o que indica o começo e o fim do css;
body - vai ser o que ficará disponível no browser.

Fácil viu?

Uma pequena observação antes de continuar, alguns blogueiros confundem o html com o css, então vou deixar claro, html é o código da página na web, o css é o que vai personaliza-lo, um trabalha com o outro. O 'style' pode aparecer mais que uma vez no html, mas eu gosto de deixar tudo junto ~fresca, depois irei falar mais sobre como o css trabalha com html, me lembrem, tá?

Outras Construções
Essas que vou mostrar agora são mais comuns em blogs mesmo, eu sempre uso algo parecido com isso e não costumo mudar os nomes, pois já é algo tão comum, que fica mais fácil para todos entenderem, sabe? Acredito que já conheceçam essas estruturas, então nem vão estranhar -qq
....
<body>
<div id="content">
<div id="header">
</div>
<div id="main">
</div>
<div id="sidebar">
</div>
<div id="footer">
</div>
</div>
</body>
.....
Content - é o que vai englobar tudo, mas as vezes eu uso apenas para deixar a sidebar e o main junto, tiro o footer e o header e deixo eles independentes, mas ai vária de skin para skin e gosto para gosto;
Header - cabeçalho;
Main - conhecido como a nossa famosa 'área de postagens';
Sidebar - o nome já diz, certo? É a barra lateral onde fica os gadgets;
Footer - O espaço sozinho lá embaixo onde você normalmente encontra alguma coisa extra, também vai variar, eu as vezes, por exemplo, nem uso.

Essas estruturas não são obrigatórias, você pode mudar e explorar elas a vontade, mas esta é a mais comum do blogger. Acredito que algumas pessoas ainda estarão confusas, então vou mostrar uma base que eu utilizo quando eu vou fazer qualquer - repetindo, qualquer - skin. Eu mesma criei por que eu praticamente sempre fazia a mesma coisa, e sempre demorava para acertar os números, lembrar dos nomes dos códigos, já que a minha memória é totalmente 'funcional'. Eu vou deixar que usem para construir uma skin, mas só aviso que é bem simples mesmo, quero que creditem a mim e ao blog e se redistribuírem eu estarei esperando vocês debaixo de suas camas com a minha voz maravilhosamente rouca. Sério, não façam isso, okay? ~

Preview // Código

Não vou por para baixar por que nem vejo necessidade, é só salvar num arquivo .txt ou .html. Nele dá para perceber todas as estruturas que eu falei. Bem pessoal, já estou de saída, vou tentar trazer o próximo tutorial o mais rápido possível, devem com certeza ser no mínimo cinco deles, então devo demorar algumas semanas para acabar, mas tenho certeza que se tudo der certo eu acabo o mais rápido possível. Eu não vi muita necessidade em imagens neste tutorial, mas nos próximos eu devo trazer sim para não deixar a postagem quilométrica. Até depois, me desejem sorte para a prova de biologia amanhã por que eu vou precisar ~ ヾ(,,• ω •,,)ノ スキッ ♡ ~

11 comentários:

  1. Muito interessante, tentarei fazer quando eu tiver tempo :3

    O layout ficou lindo mesmo ♥ Boa sorte com as provas, também já entrei na fase T^T

    Beijos ~
    garotas-cupcakes

    ResponderExcluir
  2. Ainda não estou nessa fase de provas e testes,pois minha aulas começaram semana passada.Mas boa sorte :3
    Eu amei o tutorial,muito bem explicadinho. E estou mesmo achando que será mais fácil,tomara que dê certo,pois vou tentar fazer T.T

    Kiss~ | its-time-i.blogspot.com.br

    ResponderExcluir
  3. Minhas aulas começaram dia 24 e já tive dois feriados de três dias, mal tenho conteúdo ainda e você já tem provas HSAUHSA' Somos duas loucas que queriam logo postar, realmente q
    Do tutorial, eu gostei, vai ajudar a mim e a várias pessoas acho que com o tempo vou pegando tudo e talvez fazendo minhas próprias bases? o.o
    Beijos ~

    ResponderExcluir
    Respostas
    1. Realmente²
      Quem sabe? aushuahsuashua'

      Excluir
  4. Venho procurando um tutorial assim a anos, muito obrigada por postar. A postagem ficou maravilhosa, entendi tudo e espero que todos entendam.

    ResponderExcluir
  5. Ainda estou nessa fase.
    Vou tentar quando as minhas provas acabarem <3.
    Ficou lindo o layout.
    Adorei o novo layout, a cor é perfeita *U* Eu já tinha visto ele e-e Eu sem querer cliquei no seu perfil e tinha um blog com ele e ''Pufft '' me apaixonei q :33
    Nem vou me afiliar, pois vou zerar meus afiliados :/
    A vacina do HPV? Eu tomei , só doeu quando tiraram do meu braço.... Mas depois não doeu nada <3 Melhoras.
    querendo-voar.blogspot.com.br || Querendo Voar ~ (Beijão <3 )

    ResponderExcluir
    Respostas
    1. SUHUASHAUS, está falando da conta do Diogo?
      Vou até mostrar isso para ele depois.
      Obrigada c:

      Excluir
  6. Bem estranho mesmo me lembra até o html do tumblr que nunca consegui me acostumar.
    amei o lay (:
    xoxo Um Dia Qualquer

    ResponderExcluir