4.5.13

Tutorial: Criando um Style para seu perfil do Animespirit | Social Spirit (Parte 1)



       Oi pessoal! Como vão?

       Me pediram pra fazer um tutorial de como criar um Style para o perfil pessoal do site Animespirit, e cá estou eu! Mas antes, vou fazer uma pequena introdução sobre como funciona a personalização do site, com a ajuda da minha apostila Criação de páginas web de Ana Laura Gomes.

       Já ouviram falar em HTML, certo? Sabiam que HTML e internet são coisas totalmente diferentes? A internet é o meio físico por onde trafega a web, como se a primeira fosse o corpo e a segunda a alma. A internet existe sem a web, mas a web não existe sem a internet. Mas nem é por isso que uma é menos que a outra, ao contrário. Na prática, uma não existe sem a outra.


       O HTML é uma das linguagens utilizadas para desenvolver páginas na internet. Simplificando melhor, é com ele que criamos a estrutura do site, geralmente separados em div - tag que define um elemento do tipo bloco (caixinhas com textos grandes e imagens).

       Vamos pegar o exemplo do seu perfil do Animespirit. O local onde aparecem suas informações pessoais, avatar e foto é uma div, o menu direito é outra, o bloco onde você coloca a sua descrição é uma terceira, e assim por diante.

       Mas onde o Style entra nisso?

       O Style na verdade é um arquivo CSS. O pessoal mais antigo do AS sabe do que eu tô falando! Esse arquivo é o estilo da página, ou seja, é com ele que colocamos cores, fontes, backgrounds e tudo o que você vê de diferente nos perfis dos usuários, assim como garantir melhor  acessibilidade para uma página. 

       E como funciona esse negócio de CSS?

       No HTML que os Administradores do site uparam para o servidor, há um código que permite que, quando o Style é adicionado, ele possa ser lido mesmo que não faça parte dos códigos. Este método é conhecido como Estilo Externo. Uma coisa importante ao qual você deve saber sobre o Style: Nunca mude o nome dele! Vamos saber agora por quê.


<link href="modelo.css" rel="stylesheet" type="text/css" />

       Este é o código que permite a leitura do seu Style. Sabe a parte destacada em vermelho? É o principal elemento de todos. Se você mudar o nome do seu arquivo, ele não irá ser lido, por que o nome está diferente do que está no HTML.

       Então onde o meu arquivo CSS vai parar?
       No servidor em que o Animespirit está hospedado.

       É a mesma coisa com os outros usuários que adicionam Styles para o site?
      Sim, a mesma coisa.

       Agora pare e pense em quanta coisa o servidor do Animespirit deve ter armazenado... Uau, são milhares de arquivos! Então se o site estiver lento, não será à toa, certo? Ou seja, não há motivo algum para xingar os Administradores do site que fazem o melhor para que o site seja sempre o melhor.

       Enfim, finalizo aqui a primeira parte do Tutorial. E então, o que acharam? Muito difícil? Qualquer dúvida, estou aqui para responder, é só fazer um comentário aqui em baixo ou lá na página do blog no Facebook. Farei a segunda parte o mais breve possível, prometo!

Até mais!

Um comentário:

Related Posts Plugin for WordPress, Blogger...