Linda Martins, 18, Salvador. Livros (os que leio e os que escrevo), minimalismo, estudos aleatórios e comida definem minha vida. Em constante evolução. Se você for suficientemente observador, verá que esta bio é diferente da bio do ano passado.

ENTREVISTA
Rudson Xaulin

RESENHA
Um beijo inesquecível

AUTORAIS
Baed

10.5.17

Aprendendo html #09 - Tags e outras peculiaridades do blogger

Durante meu processo de aprendizagem e adaptação na plataforma Blogger - onde o Carpecult está hospedado, óbvio - eu me deparei com alguns problemas na compreensão de tags próprias do site, e apesar da página oficial do Google fornecer explicações para cada uma delas - link no final do post, vale a pena conferir -, eu nunca vi nenhuma publicação detalhada sobre a estrutura dos códigos de layout do blogger. Para quem não sabe, os templates que dão cor e design ao blog não são criados do zero, mas construídos com o uso dos layouts oficiais da plataforma como base.

Para fazer isso, eu tive que aprender, na marra, o funcionamento das tags do blogger, e a partir deste post, o primeiro de uma longa série, eu vou tentar fazer o post super explicativo que eu não tive. A postagem de hoje tratará das primeiras linhas do código que fica no <body>, até o header, e a dinâmica entre as tags próprias do blogger, e as div's, unidade própria do html. 

Eis a primeira tag apresentada: 

<b:section>
Essa é uma tag constantemente vista durante todo o código, por equivaler a uma sessão, partes que formam o design da página. As sessões estão em blocos, na página "Layout". 

PRIMEIRA SESSÃO NO LAYOUT PADRÃO DO BLOGGER: 

NAVBAR

Corresponde à barra superior, situada logo abaixo do "favicon" - a caixa onde se define o ícone que aparece ao lado do nome do seu site, na janela do navegador, como mostra a imagem abaixo:


Código de abertura da sessão "navbar":

<b:section class='navbar' id='navbar' maxwidgets='1' name='Navbar' showaddelement='no'>

  • Os trechos "class" e "id" seguem a mesma lógica das divs, apresentadas no post #07;
  • A propriedade "maxwidgets" define a quantidade de widgets, ou "gadgets" que aquela sessão vai te permitir inserir. Neste caso, a sessão navbar comporta apenas um único widget. 
  • A propriedade "showaddelement", como o próprio nome diz, define se a sessão vai permitir que você incluia widgets fora daqueles pré-definidos no código, como mostra a imagem abaixo: 



           Nota-se que essa opção não aparece na sessão navbar, mostrada acima. Isso porque a propriedade supracitada possui valor "no". Se este valor fosse "yes", a opção de adição de gadget seria mostrada.

A tag de fechamento da sessão é </b:section>.



INTERVALO ENTRE AS "SECTIONS":

<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
      <meta expr:content='data:blog.title' itemprop='name'/>
      <b:if cond='data:blog.metaDescription'>
        <meta expr:content='data:blog.metaDescription' itemprop='description'/>
      </b:if>
    </div>
  </b:if>

Segunda tag apresentada: 

<b:if>
Esta tag é usada quando se trata de dados específicos de um site ou de seu layout, referente a um conteúdo que ora se aplicará em uma situação, ora não se aplicará em outra. A explicação se torna mais clara analisando parte por parte do código:

<b:if cond=
Esse "cond", que acompanha a tag, se refere à condição em que os dados especificados dentro da tag devem aparecer. No caso do código padrão acima, temos duas <b:if> abertas, com duas condições:

<b:if cond='data:blog.pageType
<b:if cond='data:blog.metaDescription 

A primeira condição, "data:blog.pageType" é a condição mais genérica, podendo abrigar qualquer tipo de elemento e dado dentro de sua tag. Como essa condição não indica um dado específico, o "poder de decisão" da tag recai por inteiro em seus operadores.

Tipos de operadores e suas funções:

  • ==; igual. Indica em qual página ou em qual situação aquela condição se aplicará. 
  • != ; diferente. Indica em qual página/situação aquela condição não se aplicará. 
No código: 

<b:if cond='data:blog.pageType=="index"'>

O operador indica que a condição "genérica" desta tag, e portanto, os dados postos dentro dela, serão executados apenas na página inicial (index). Estes são os dados que estão sob essas condições, e se referem às informações de XML do "head", lá no início do código html:

    <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
      <meta expr:content='data:blog.title' itemprop='name'/>
 Informações do head
 

<b:if cond='data:blog.metaDescription'>
Uma coisa interessante nesta segunda tag: não há operadores aqui. Isso porque, determinadas condições já possuem, implícitas, as situações onde se aplicam ou não se aplicam. Essa condição se refere a um tipo de meta, elemento do html citado no post #02 desta série. Se você ler o post, entenderá porque as situações estão implícitas.


  • Sites que ajudaram na construção deste post e serão fontes de pesquisa para você: 

https://support.google.com/blogger/answer/46995?hl=pt-BR&ref_topic=6321969 - TAGS DE WIDGET PARA LAYOUTS - Google
https://support.google.com/blogger/answer/46888?hl=pt-BR&ref_topic=6321969 - TAGS DE ELEMENTO DE PÁGINA PARA LAYOUTS - Google
https://www.gerenciandoblog.com.br/2014/05/como-utilizar-as-condicionais-do-blogger.html - COMO UTILIZAR AS CONDICIONAIS DO BLOGGER - Gerenciando Blog
https://schema.org/ - SCHEMA
http://www.flexdocs.com.br/guiaNFe/funcao.XML.schemas.html - O QUE É UM SCHEMA XML? - Guia de uso da Nfe_ [...] - FlexDocs
https://pt.wikipedia.org/wiki/XML_Schema - XML SCHEMA - Wikipédia