Últimas Postagens

Segunda parte do estudo de json, formas de usos no Blogger.
Nessa parte vamos ver, segundo a tradução, como liga de volta: "callback".
Eu quero que ligue de volta numa função javascript, posso dar qualquer nome para essa função, por exemplo "vbtlist" como que 'listando verbratec' e no script fica assim:
<script src="https://www.verbratec.com.br/feeds/posts/default?alt=json-in-script&amp;callback=vbtlist" type="text/javascript">    
</script>

E você é esperto e acaba de perceber que a forma de chamada é a mesma que usamos para requisitar o uso de uma biblioteca "JQuery" ou "FontAwesome" por exemplo, ou seja, tudo muito simples, quando entendemos como funciona.

 Agora vamos escrever o script do tipo javascript:

<script type="text/javascript">      
function vbtlist(json) {       
for (var i = 0; i < json.feed.entry.length; i++)       
{       
var TotalPosts = json.feed.openSearch$totalResults.$t;       
  }

    var listing = "Total = " +TotalPosts+ " Posts" ;       
document.write(listing);       
}       
</script>
Então juntando as duas partes, temos abaixo o resultado em verde.




Como pode perceber, se você usa F12 no FireFox por exemplo, observa o resultado do script, como vemos na imagem.


Prosseguindo com o estudo, temos:
https://www.meublog.blogspot.com.br/feeds/posts/default?alt=json-in-script&callback=minhaFunctionJs
E então adicionamos mais parâmetros:
https://www.meublog.blogspot.com.br/feeds/posts/default?alt=json-in-script&callback=minhaFunctionJs&max-results=1000&start-index=1
E max-results e start-index, como você deve saber, instruem a plataforma Blogger a retornar um número máximo de feeds de 1000 (neste exemplo de URL), a partir do primeiro feed disponível ordenado pelo último publicado. Nos vários exemplos sobre o mesmo tópico, você pode encontrar praticamente todos os valores máximos para um número como 999999 para ter todos os feeds retornados em uma chamada. No entanto, googling ao redor, parece que há o suspeito Google definir um limite máximo de feeds é possível entrar em uma única chamada. Como de costume, esse limite "oficial" é indocumentado do que, apenas para evitar problemas, neste exemplo, vou escolher extrair os feeds com etapas de 1000, você pode aumentar esse valor se quiser. Fonte completa de código javascript:
 
<script type="text/javascript">
    var StartIndex = 1;
    var MaxResults = 1000;
   function minhaFunctionJs(BlogData) {
        var Feed, i;
     for (Feed = BlogData.feed, i = 0; i < Feed.entry.length; i++) {
            var PostUrl, ImgUrl, Entry, Content, Title, x;
            Entry = Feed.entry[i];
            Content = Feed.entry[i].content.$t;
            Title = Feed.entry[i].title.$t;
            ImgUrl = PostUrl = '';
            if (typeof Feed.entry[i].media$thumbnail !== 'undefined') {
            ImgUrl = Feed.entry[i].media$thumbnail.url;
            }
           for (x = 0; x < Entry.link.length; x++) {
                if (Entry.link[x].rel == 'alternate') {
                    PostUrl = Entry.link[x].href;
                    break;
                }
            }
            // Aqui você tem todos os dados básicos do post, use como quiser   
        }
        if (i < MaxResults) {
            //Todos os feeds foram extraídos
        } else {
            var ScriptObj = document.createElement('script');

            var FeedsUrl = 'https://www.meublog.blogspot.com.br/feeds/posts/

default?alt=json-in-script&callback=minhaFunctionJs&max-results=' + MaxResults + 

'&start-index=';
            StartIndex = (StartIndex + MaxResults);
           ScriptObj.src = (FeedsUrl + StartIndex);
            document.body.appendChild(ScriptObj);
        }
    }
    function StartFeedsExtraction() {
        var ScriptObj = document.createElement('script');

        var FeedsUrl = 'https://www.meublog.blogspot.com.br/feeds/posts/

default?alt=json-in-script&callback=minhaFunctionJs&max-results=' + MaxResults +

 '&start-index=';
ScriptObj.src = (FeedsUrl + StartIndex);
        document.body.appendChild(ScriptObj); }
</script>
<script type="text/javascript">
    StartFeedsExtraction();
</script>


Esta chamada inicia o processo de extração de feeds. Basicamente, ele insere dinamicamente uma chamada em um URL formatado para obter os feeds do blog. Depois que o processo foi iniciado corretamente, o minhaFunctionJs() foi chamado automaticamente com o intervalo de dados dos feeds solicitados. O primeiro ciclo extrai as informações básicas do post, como conteúdo, título, URL do post e URL da imagem (se a imagem estiver presente, geralmente é a primeira imagem do post). Se você precisar de mais dados, examine a estrutura da árvore de postagens conforme descrito acima e leia as informações adicionais que deseja. A segunda condição if (i < MaxResults) verifica se todos os feeds foram extraídos. Como pedimos um número máximo de feeds de MaxResults (isto é, 1000 no nosso exemplo), se o número de feeds retornado não for menor para esse valor, provavelmente significa que há feeds adicionais disponíveis. Nesse caso, repita a operação para solicitar dinamicamente novos feeds aumentando o índice inicial para o próximo intervalo. Caso seja menor, significa que todos os feeds foram extraídos e a operação pode ser concluída.
Observe que a mesma operação pode ser feita extraindo feeds conectados apenas a alguns marcadores. Bastará alterar o URL assim:
https://www.meublog.blogspot.com/feeds/posts/default/-/meuMarcador/?alt=json-in-script&callback=minhaFunctionJs

Abraço e até a próxima!
Este estudo se guia pela publicação do Mohammad Mustafa Ahmedza em https://www.mybloggertricks.com/2015/10/introduction-to-blogger-json-feeds-and-blogger-data-api.html
Mohammad começou a blogar em agosto de 2008 logo após completar seu GCE A Level. Após uma desqualificação do visto dos EUA para estudos superiores, ele começou a escrever blogs para se livrar da crescente depressão e, em seguida, sua vida mudou drasticamente. Ele começou a ter interesse em ajustar os Modelos do Blogger ao ler detalhadamente artigos on-line. Sua sede de aprender e entender as últimas tecnologias da web, como HTML4, CSS3, PHP e JavaScript, o equipou com uma excelente arte de web design. Ele agora é um web designer e desenvolvedor web por todos os direitos sem ter feito qualquer treinamento profissional.

  Pensando em desenvolver seu próprio template, com seus widgets específicos, com aquelas funções que, só você teve a ideia exclusiva e não sabe por onde começar! Comece com json apiv3 Blogger. Você vai ficar muito contente com o que vai descobrir e fazer em seu blog.
API - Application Package Interface é o meio de comunicação para aplicativos permite interagir uns com os outros. Desenvolvedores de um aplicativo fornecem APIs para que outros desenvolvedores criem aplicativos e interajam com os seus próprios. Da mesma forma, a equipe do Blogger criou uma API própria(apiv3), que permite aos desenvolvedores externos interagir com o sistema de gerenciamento de conteúdo do Blogger.
Abra este link para ver de onde virão os dados de nosso blog aqui:
https://www.verbratec.com.br/feeds/posts/default?alt=json Você precisa saber um pouco de html, css e javascript para seguir em frente. Não é necessário um know-how avançado e você não precisa ser um programador qualificado para entender os conceitos. Vamos tentar o nosso melhor para tornar o mais fácil possível, nosso estudo aqui.
Você poderá criar seus widgets de comentários, galeria com imagens de seus posts, widgets resumos de postagens e muito mais. O céu é o limite.

JSON - JavaScript Object Notation é um formato leve de intercâmbio de dados fácil para humanos ler e escrever. É fácil para as máquinas analisar e gerar. Ele permite que o navegador interaja facilmente com seu servidor de blog e obtenha dados muito mais rápidos em comparação com o XML, que é muito mais lento neste caso.
O objeto feed é onde todos os dados do seu blog são armazenados como mostrado na imagem.
Tudo está dentro das chaves{}.
Observe o objeto title nome da variável $t: valor Verbratec.
Entre conchetes estão as arrays


Novatos como eu muitas vezes confundem o Blogger JSON API, com o Blogger JSON Feeds. Os feeds JSON são arquivos simples usados ​​para armazenar e/ou trocar dados, enquanto a JSON API é uma Interface de Pacote de Aplicativos que permite interagir com outras aplicações de terceiros.

Caso seu navegador não mostre json como vimos na imagem(árvore de dados), você pode acessar o site https://codebeautify.org/jsonviewer para ver sua árvore de dados.



Então temos na árvore de dados, os objetos entre chaves e arrays entre conchetes, agora vamos ver a lista:
 {}id - único identificador em cada postagem.
 {}published - data da publicação da postagem.
 {}update - data da última edição.
 {}category - mostra os marcadores da postagem
 {}title - mostra o texto título da postagem

Algumas coisas como por exemplo, openSearch$itemsPerPage dependem das configurações internas feitas no seu blog, eu configurei o meu blog para mostrar 50 postagens, os valores usuais são 10, 25, 50 e 100.
Já observei que no painel do Blogger a contagem inclui as postagens em rascunho.
Todos os dados das postagens estão em https://www.verbratec.com.br/feeds/posts/default?alt=json
Todos os comentários logicamente em https://www.verbratec.com.br/feeds/comments/default?alt=json
Então as páginas estáticas estarão em https://www.verbratec.com.br/feeds/pages/default?alt=json

Se você é como eu, gosta de aventura e copiar códigos de scripts como "slides", e já deve ter reparado nessa linha:
https://blogname.blogspot.com/feeds/posts/default?alt=json-in-script&callback=myFunc
Pessoas mais preguiçosas nem se dão ao trabalho de explorar e estudar, apenas copiam e usam, trocam o nome do blog e algumas nem isso fazem, claro que não funciona e vão reclamar, kkkkk.
Essa linha de código veio de onde afinal? Sim é a primeira linha das amostras, veja só: https://developers.google.com/gdata/samples/blogger_sample
Aproveita e dá uma boa olhada, mas volta hein!
Voltou que legal!
Como vimos json-in-script diz algo diferente ao Blogger, ou seja o Blogger devolve de de forma diferente as requisições feeds/posts/default?alt=json e feeds/posts/default?alt=json-in-script
Quando usamos json-in-script dizemos ao Blogger que queremos usar javascript e então obtemos uma função chamada: gdata.io.handleScriptLoaded.
Se você não percebeu isso, ainda está em tempo, abra os próximos dois links e observe o início da primeira linha de código retornada; link 1 com alt=json
Link 2 com alt=json-in-script e nossa função gdata.io.handleScriptLoaded como resultado.
Na próxima etapa vamos ver como javascript pega os dados.

Abraço e até a próxima!
Este estudo se guia pela publicação do Mohammad Mustafa Ahmedza em https://www.mybloggertricks.com/2015/10/introduction-to-blogger-json-feeds-and-blogger-data-api.html
Mohammad começou a blogar em agosto de 2008 logo após completar seu GCE A Level. Após uma desqualificação do visto dos EUA para estudos superiores, ele começou a escrever blogs para se livrar da crescente depressão e, em seguida, sua vida mudou drasticamente. Ele começou a ter interesse em ajustar os Modelos do Blogger ao ler detalhadamente artigos on-line. Sua sede de aprender e entender as últimas tecnologias da web, como HTML4, CSS3, PHP e JavaScript, o equipou com uma excelente arte de web design. Ele agora é um web designer e desenvolvedor web por todos os direitos sem ter feito qualquer treinamento profissional.

 Há muitos erros no blog, são umas quatro mil linhas de código e tem essa coisa de xml, html, css, javascript...
 Outro detalhe é a parte que não temos acesso(noreply@blogger.com), então não temos como resolver, as vezes nos resta apenas a alternativa de retirar quando se trata de um widget por exemplo.
 Os dados estruturados são um caso interessante e eu nem estava me importando muito com isso, mas aconteceu ao acaso, descobri uma ferramenta nova (para mim) do Google, que analisa essa parte e indica onde há problema, já a solução é por sua conta, kkkkk!



 Link para a ferramenta:
    https://search.google.com/structured-data/testing-tool

Para mim está um tanto confuso, devido aos inúmeros testes que fiz e adaptações, agora tenho aqui uma mistura de tipos de microdados, como:
hatom e application/ld+json.

Como estou sem erros pelo menos, não vou perder tempo com isso agora.
Meu template foi construído em vários anos e gosto um tanto dele, sei que seria melhor algo responsivo, mas só de pensar em mudar já fico triste.

Algo sugerido: https://json-ld.org/

Abraço!

  Você com certeza já sabe que criptografia nada mais é que codificar.
Agora que todos podem usar https no Blogger, resolvi pesquisar um pouco mais, daí descobri uma entidade americana que tem um plugin, uma extensão para o navegador, que faz justamente essa parte.
 O site é o https://www.eff.org/pt-br/https-everywhere




 Gostei da proposta e resolvi testar, para instalar no Chrome usei a loja: https://chrome.google.com/webstore/search/https-everywhere
 Mas não fiquei nisso, baixei e instalei também no Firefox.


Não muda quase nada para mim que tenho uma navegação bastante segura, mas já comecei a ter curiosidade sobre sites que acessam o meu site, será?
Fiz todos os procedimentos para deixar o site seguro, mas havia apenas o cadeado verde, agora com a extensão no navegador apareceu a palavra "seguro" ao lado do cadeado, hummmm!

Estou "enkukado" com isso!

Abraço!
Artigo sugerido: https://letsencrypt.org/docs/integration-guide/




HTTPS no meu blog! Sim.


  O Blogger disponibiliza para seus usuários o protocolo seguro.
  Para ativar o 'ssl' você só precisa fazer login por este link:
  https://draft.blogger.com/ e usar seu conhecido painel administrativo, escolha o blog, clique em configurações, role a página até HTTPS e diga sim para: Disponibilidade de HTTPS.
HTTPS Blogger ativado.

  Esta postagem é mais uma forma de esclarecer alguns detalhes técnicos que mudam em relação ao http.
  Para quem está iniciando um blog/site no Blogger agora, basta criar e configurar, sem maiores problemas.
  O problema maior é para que já possui um trabalho mais extenso, com muitos urls, sejam de links, imagens, scripts ou quaisquer outros, pois tudo deverá mudar para https, e o programa do Blogger não faz isso de forma automática, será preciso abrir as postagens para edição, de uma a uma e acrescentar o "s" no http.  Você encontrará algumas correções automatizadas, essas informações estão na ajuda do Google/Blogger.
Isso será feito em links, tags de imagem e scripts, principalmente, recomendo que tudo seja passado para https. Inclusive o template, então não esqueça de fazer o bom e velho download do seu arquivo template.xml ok?

  A próxima dica é sobre o código de pesquisa, pode ser que note algo errado, eu por exemplo uso action="https://www.verbratec.com.br/search" ou seja, apenas acrescentei o "s", porém tive problemas com retorno de nomes compostos (ainda não resolvido).
  Fique atento.
  Problemas na busca, no formulário de pesquisa com código:
expr:action='data:blog.searchUrl'
  Acrescente o https dessa forma:
 expr:action='data:blog.searchUrl.https'

 Você precisa editar o robots.txt arquivo em configurações, pesquisa e deixá-lo similar a este, lógico trocando pelo nome do seu blog:
User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search
Allow: /
Sitemap: https://www.verbratec.com.br/sitemap.xml

Se você tem algo em páginas estáticas e deseja indexar, então será preciso enviar também sitemap-pages.xml veja exemplo do url:
https://www.verbratec.com.br/sitemap-pages.xml


 Não perde tempo, acesse o seu painel searchconsole do Google e envie o novo sitemap agora com https.


 Agora penso que está tudo pronto então preciso confirmar, para isso acesse:
https://www.jitbit.com/sslcheck/ insira o url base do seu site e clique em verifique se há erros de SSL. Claro que um bom resultado dirá que não há erros, se houver o programa irá mostrar quais são e onde estão.
 Nenhum erro agora, então vamos prosseguir, acesse esta ferramenta https://www.missingpadlock.com , para obter resultado 0, eu disse "zero" em todos os aspectos.
 Todo o procedimento é simples, mas pode se tornar complexo, no momento em que for preciso se desfazer de alguns gadgets, ou reescrever scripts, realocar arquivos, etc. Precisando de ajuda entre em contato. Deixe sua opinião, dica ou crítica nos comentários dessa postagem.
 Abraço e até a próxima.

A forma mais simples de verificar se seu blog está no "padrão" e respondendo de forma segura é, requisitando todas as postagens no modo dinâmico, simplesmente https://www.verbratec.com.br/view/flipcard adicione: /view/flipcard ao url base do seu blog/site Blogger. Se estiver tudo certo o "cadeado" se manterá verde, se não após tudo carregado e haverá uma indicação junto ao mesmo.

Para localizar algum problema "pontual" você pode requisitar com script, pelo feed, de dez em dez postagens e isso facilita "muuiiito".


Visitei o blog conforme mostra a imagem abaixo, está tudo normal, talvez tenha lhe ocorrido algum problema temporário; quinta-feira 3 de novembro de 2022. O cadeado citado pode ser observado na imagem ao lado do nome de seu blog, na parte superior esquerda.




Abraço!


Ícones para substituir imagem e aliviar o peso de sua página. Muito mais fácil de usar.
Para facilitar o uso da font aqui os ícones e seu códigos com exemplo de uso.
Você pode ver muito mais no site do desenvolvedor https://fontawesome.com/ e conhecer o projeto no GitHub https://github.com/FortAwesome/Font-Awesome.
Estamos em 2018 e é nosso dever fazer uma web melhor para todos.
Creio que usar esses ícones é uma maneira de dizer o quanto da web. Assim é o código HTML para inserir o ícone, 'facinho' né!

A parte gráfica é assim:








O html é assim:

<i class="fa fa-camera"></i>
<i class="fa fa-1 fa-camera"></i>
<i class="fa fa-2 fa-camera"></i>
<i class="fa fa-3 fa-camera"></i>
<i class="fa fa-4 fa-camera"></i>
<i class="fa fa-5 fa-camera"></i>
<i class="fa fa-6 fa-camera"></i>
<i class="fa fa-2 fa-spinner fa-spin"></i>
<i class="fa fa-2 fa-refresh fa-spin"></i>
<i class="fa fa-2 fa-cog fa-spin"></i>

Novos ícones versão 4.0


fa-rub
fa-ruble
fa-rouble (alias)
fa-pagelines
fa-stack-exchange
fa-arrow-circle-o-right
fa-arrow-circle-o-left
fa-caret-square-o-left
fa-toggle-left (alias)
fa-dot-circle-o
fa-wheelchair
fa-vimeo-square
fa-try
fa-turkish-lira (alias)
fa-plus-square-o

Jair de Jesus

Estudante de música, guitarra clássica, HTML, CSS, json, Blogger e tal.{picture#https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_X8kjnFQ6gqz7mpAsGYmndUBnVFuhUwtt2T4rjn6FnitkZZUulhSIzmhVsYGWIHULCAqOObPV3xw9ru-dSPBPuWhT9PGtv-XEK1A5I6l8bJtjEjRsYYleMWoCvtjOtVhDRusviMdEFBU/s35/jair.jpg}{facebook#https://facebook.com/verbratecajuda}{youtube#https://youtube.com/@estudoviolaoclassico} {twitter#https://twitter.com/verbratecajuda}

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *