Categorias
Tutoriais Web WordPress

Feeding Google Search – Structure data

Content is one of the keys to the success on the internet, categorizing your content makes it more visible to the search engines and structure data will be your best friend to do it. This simple action could make you a step forward in the competitive market.  On 2011, Google, Bing and Yahoo launched an initiative called Schema.org, this project’s objective is to create and support schemas for structured data. And now this information start to be more relevant to the search engines, Google especially, uses the structure date to shows the content in a special format called Rich cards. Actually, Google.

Now, this information starts to be more relevant to the search engines, Google especially, uses the structure date to shows the content in a special format called Rich cards.

Actually, Google gives to us these options to pages enhancements: 

  • Breadcrumbs
  • Corporate contact information
  • Carousels for sequential results
  • Logos
  • Sitelinks Search box
  • Social profile links

Content types:

  • Articles
  • Books
  • Courses
  • Events
  • Job postings
  • Local businesses
  • Music
  • Products
  • Recipes
  • Tv and movies
  • Videos

For each situation, needs some required information, for example, recipes we will need to specify, numbers of calories, ingredients, and time to cook. Google uses the structure data to display these categories in a different layout in the search result, in that way help the users find the right content and increase the click rate for the websites that show the content with more quality.

Ok, what about the code?

There are three different formats JSON-LD(Recommended by google), Microdata and RDFa. For a long time, I used Microdata but now I’m working with different projects again and different markups the JSON-LD makes the changes simple.

Code examples:

JSON-LD

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://google.com/article"
  },
  "headline": "Article headline",
  "image": {
    "@type": "ImageObject",
    "url": "https://google.com/thumbnail1.jpg",
    "height": 800,
    "width": 800
  },
  "datePublished": "2015-02-05T08:00:00+08:00",
  "dateModified": "2015-02-05T09:20:00+08:00",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  },
   "publisher": {
    "@type": "Organization",
    "name": "Google",
    "logo": {
      "@type": "ImageObject",
      "url": "https://google.com/logo.jpg",
      "width": 600,
      "height": 60
    }
  },
  "description": "A most wonderful article"
}
</script>

 

Microdata

<div itemscope itemtype="http://schema.org/NewsArticle">
  <meta itemscope itemprop="mainEntityOfPage"  itemType="https://schema.org/WebPage" itemid="https://google.com/article"/>
  <h2 itemprop="headline">Article headline</h2>
  <h3 itemprop="author" itemscope itemtype="https://schema.org/Person">
    By <span itemprop="name">John Doe</span>
  </h3>
  <span itemprop="description">A most wonderful article</span>
  <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
    <img src="https://google.com/thumbnail1.jpg"/>
    <meta itemprop="url" content="https://google.com/thumbnail1.jpg">
    <meta itemprop="width" content="800">
    <meta itemprop="height" content="800">
  </div>
  <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
    <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
      <img src="https://google.com/logo.jpg"/>
      <meta itemprop="url" content="https://google.com/logo.jpg">
      <meta itemprop="width" content="600">
      <meta itemprop="height" content="60">
    </div>
    <meta itemprop="name" content="Google">
  </div>
  <meta itemprop="datePublished" content="2015-02-05T08:00:00+08:00"/>
  <meta itemprop="dateModified" content="2015-02-05T09:20:00+08:00"/>
</div>

As we can see above, JSON-LD we create a structure independent from the content. But we need write the same information twice. Microdata the advantage is we just need to write the content once but the information is totally markup dependent. Especially for articles, we have two different rich cards, one for pages that support AMP and other for Non-AMP pages.

Search result without AMP

Search result with AMP

After adding this information to your content we need to validate it, for that we use the Structured Data Testing Tool

If you are using WordPress there are many different plugins to use Structure data in your Website: https://wordpress.org/plugins/tags/structured-data/

Categorias
Tutoriais Web

Eventos com React

Nesse post iremos ver como trabalhar eventos com react. Se você tem um background JavaScript. Quando trabalhamos com vanilla JavaScript temos várias formas de trabalhar com eventos, adicionando atributos no nosso elemento html, definindo o atributo no JavaScript ou adicionando um listener, direto no elemento HMTL seria da seguinte forma:

<button onclick="doSomething">Clique Aqui</button>

Este método trás muitos problemas, por exemplo, manutenção e gerenciamento de eventos. Outro formato adicionando um listener:

<script> document.getElementById('me').addEventListener('click', function(){ alert('hello') }); </script>

React tem seu próprio gerenciamento de evento por uma série de razoes, por exemplo, um diferente esquema de gerenciamento do DOM o virtualDOM, React tenta deixar o gerenciamento de eventos mais consistente. Todo evento retorna um SyntheticEvent, ele tem uma série de atributos:

boolean bubbles boolean cancelable DOMEventTarget currentTarget boolean defaultPrevented number eventPhase boolean isTrusted DOMEvent nativeEvent void preventDefault() boolean isDefaultPrevented() void stopPropagation() boolean isPropagationStopped() DOMEventTarget target number timeStamp string type

Outra questão importante eventos dentro de React sao passados como propriedade em camelCase onClick, ou onFocus, tambem podemos utilizar stopPropagation() ou preventDefault() como eventos nativos do JavaScript. O SyntheticEvent trabalha com o conceito de pooled, o objeto é limpo após o callback for invocado, por uma questão de performance.

  • Clipboard Events
  • Composition Events
  • Keyboard Events
  • Focus Events
  • Mouse Events
  • Selection Events
  • Touch Events
  • UI Events
  • Wheel Events
  • Media Events
  • Image Events
  • Animation Events
  • Transition Events

Antes de trabalhar com eventos precisamos entender é a questão de props e state, no exemplo abaixo quando publiquei este post(2 anos atrás) utilzei createClass formato utilizado com ES5 nessa versao vou utilizar ES6:

class ButtonComponent extends React.Component { constructor(props) { super(props); this.state = {active: true}; } toggle() { this.setState((prevStatus) => ({active: !prevStatus.active})); } render () { return <button onClick={() => this.toggle()}> Status:{this.state.active + ''} </button>; } } ReactDOM.render( <ButtonComponent />, document.getElementById('events') );

No exemplo acima crio um componente botão onde ele simplesmente faz o toggle de um atributo, poderia ser qualquer outro atributo ou interagir com outro elemento. O evento nos acionamos quando passamos o render do nosso componente neste caso onClick.

Lembrando todos os exemplos estão no meu github: https://github.com/fellyph/react-tutorial

Categorias
Tutoriais Web

Variáveis e funções com ECMAScript 2015

ECMAScript 2015 é nova especificação do JavaScript antes chamado de ECMAScript 6, por uma padrão de conversão e buscando implementações menores em pequeno prazo. Lembrando que esses recursos nem todos os browser rodam, o ideal é utilizar uma ferramenta para compilar seu código para browsers antigos, um dos mais utilizados é o Babel, ele possui um handbook em português que mostra instalação e como usar:

https://github.com/thejameskyle/babel-handbook/blob/master/translations/pt-BR/user-handbook.md

Boa parte dos exemplos eu rodei no Chrome sem precisar do babel, nesta página(ECMAScript 6 compatibility table) você tem uma tabela detalhada do suporte de cada browser. Para um projeto em produção é necessário o uso do babel. Agora voltando ao ECMAScript, ela vem com uma série de novidades, já mostrei alguns dos novos recursos nos posts sobre REACT, mas não entrei em detalhes neste post vou listar algumas das novidades.

Declarando variáveis

let

let é utilizado para declarar variáveis dentro de um escopo menor comparado ao var que tem um escopo global ou relacionado a funções, com o let o escopo pode ser limitado por blocos menores if, else, for e while.

const

const como em outras linguagens o permite nos criarmos variáveis read-only, constantes nos ajudam a criar códigos mais legíveis, exemplo quando lemos o seguinte código:

function doSomething(num) {
  if(num < 5) {
    //doSomething
  }

  for(var i = 0; i < 5; i++) {
    //doSomething
  }
}

Não temos idéia o que é o número 5, apenas um fator na condicional, se mudarmos para o seguinte código:

function doSomething(num) {
  const MAX_PRODUCTS = 5;
  
  if(num < MAX_PRODUCTS) {
    //doSomething
  }

  for(var i = 0; i < MAX_PRODUCTS; i++) {
    //doSomething
  }
}

Agora com as modificação batemos o olho sabemos que os loops estão limitados por um número máximo de produtos. Esse valor é escrito apenas uma vez, ele não pode ser alterado após ser definido. Por um padrão de escrita de código todas as constantes precisa ser escritas em uppercase.

Funções

Surgiram novas funcionalidades super úteis relacionadas a funções com ECMAScript 2015. A primeira delas, valores default na assinatura da funções. Um problema básico é acesso a variáveis undefined, temos um tratamento comum para isso da seguinte forma:

function listProducts(listOfProducts) {
  var products = typeof listOfProducts !== 'undefined' ? listOfProducts : [];
  var total = products.length;
  //do something
}

Com nova definição de EcmaScript 2015 podemos criar valores default sem precisar de um tratamento especial como a versão anterior da seguinte forma:

function listProducts(listOfProducts = []) {
  let total = listOfProducts.length;
  //do something
}

Nomeando parâmetros

Uma nova funcionalidade, agora é possível nomear parâmetros como isso é útil, no exemplo abaixo:

function setProduct(newProduct = {}) {
  product.name = newProduct.name;
  product.price = newProduct.price;
  product.category = newProduct.category;
}

Exemplo acima contornamos o problema do parâmetro “undefined” mas se os atributos não existirem nosso código irá disparar um erro.

function setProduct({name, price, category} = {}) {
  product.name = name;
  product.price = price;
  product.category = category;
}

Nomeando parâmetros, além do código ficar mais legível, não caímos nos problemas de atributos inválidos.

Rest Params

Outro novo recurso do ECMAScript 2015 é possível passar um array de parâmetros como argumento, como isso funciona, por exemplo, temos uma função de produtos relacionados onde podemos exibir, um, dois ou três produtos:

showRelacionados(“produto-1”);

showRelacionados(“produto-1”, “produto-2”, “produto-3”);

showRelacionados(“produto-1”, “produto-2”);

Você precisa passar um número x de argumentos que sempre variam, nunca é uma quantidade exata. Com parâmetros rest, permite definir que a função espera um array de argumentos.

function showRelated(...related) {
  for(let i in related ) {
    console.log(related[i]);
  }
}

showRelated("produto-1", "produto-2", "produto-3");

Além dos “…” na assinatura da função, podemos adicionar na chamada da função mas ela tem uma funcionalidade diferente quando acionamos a função, neste caso ela quebra os parâmetros do objeto em vários argumentos. Exemplo temos o objeto

produto.nome = “Prato”;
produto.preco = 20;
produto.categoria = “casa”;

adicionaProduto(…produto);

A função “adicionaProduto” irá receber 3 parâmetros(nome, preco e categoria).

Arrow function

Arrow function além de simplificar a escrita de funções ela mantém o escopo de quem invoca a função útil quando estamos tratando, também chamado de “lexical binding” ele cria um escopo de quem o define e não de onde ele roda, outro ponto a Arrow functions sempre são anônimas. Sua síntaxe é simples:

([parametro], [parametro]) => {
   //código que será executado na chamada da função
}

Exemplo temos um código sem arrow function:

var categorias =  ["casa", "jardim", "praia"];

categorias.map(function(prop) {
  console.log(prop);
});

Com arrow function ele fica da seguinte forma:

var categorias =  ["casa", "jardim", "praia"];

categorias.map(prop => {
  console.log(prop);
});

Apenas uma chamada mas imagine isso sendo repetido várias vezes no dia, mas outra vantagem é a questão do escopo um problema comum é perder o escopo quando você codando alguma funcionalidade exemplo:

function Clock() {
  this.time = 10; 
  
  setInterval(function count() {
    this.time++;
    console.log(this.time, this);
  }, 1000);
};

var c = new Clock();

Criamos um objeto tipo Clock, mas ele tem um problema quando usamos o console dentro do setInterval por exemplo o escopo do setInterval é global nesse momento o this não é o clock e sim o objeto Window. Claro que podemos resolver esse problema criando uma variável self para para o clock e guardar o this(clock) dentro dessa variável outra solução seria usar o arrow function:

function Clock() {
  this.time = 10; 
  
  setInterval( () => {
    console.log(++this.time, this);
  }, 1000);
};

var c = new Clock();

Vamos ficando por aqui o próximo post sobre ECMA irei falar sobre objetos e classes.

Categorias
Tutoriais Web

Stateless vs Stateful

Continuando a série sobre ReactJS. Vamos falar sobre um dos princípios básicos sobre estado(state). Os dois últimos posts, por exemplos, criamos componentes estáticos(ou stateless), mas atualmente boa parte das aplicações precisam ter algum tipo de interação com o usuário.

As informações precisam ser alteradas em tempo real. Uma das base do React é um conceito de estado, cada componente utilizado tem uma estado próprio quando estado muda o React reconstrói a UI sem o dev fazer nenhuma requisição para alterar o DOM.

Tudo que precisamos fazer é especificar onde os dados terão o estado “alterável”. Para isso utilizamos uma função this.setState() para manter os dados atualizados. Quando ele é chamando, Qualquer informação alterada no componente ele chama o método render() para atualizar a tela.

Criando o primeiro componente Stateful

Até o momento temos apenas um component Stateless, precisamos transforma-lo em um elemento Stateful. Vamos dar uma olhada neste exemplo:

var TextAreaCounter = React.createClass({
  propTypes: {
    text: React.PropTypes.string
  },
  render: function() {
    return React.DOM.div(null,
      React.DOM.textarea({
        defaultValue: this.props.text
      }),
      React.DOM.h3(null, this.props.text.length)
    );
  }
});

ReactDOM.render(
  React.createElement(TextAreaCounter, {text:"bob"}), document.getElementById('state')
);

No exemplo acima, nosso componente possuí uma textarea e um título que mostra o tamanho do nosso texto e ele ainda está stateless. Ele precisa do método ReactDOM.render, para atualizar as informações quando o usuário edita o valor da caixa de texto. Para isso precisamos manter os dados(estado) e saber quando eles serão alterados, vamos ver o exemplo atualizado:

var TextAreaCounter = React.createClass({
  propTypes: {
    text: React.PropTypes.string
  },

  getInitialState: function() {
    return {
      text: this.props.text,
    };
  },

  _textChange: function(ev) {
    this.setState({
      text: ev.target.value
    })
  },

  render: function() {
    return React.DOM.div(null,
      React.DOM.textarea({
        value: this.state.text,
        onChange: this._textChange
      }),
      React.DOM.h3(null, this.state.text.length)
    );
  }
});

ReactDOM.render(
  React.createElement(TextAreaCounter, {text:"bob"}), document.getElementById('state')
);

Primeiro passo é chamar o método getInitialState() ele é responsável por salvar o estado inicial do elemento, após adicionarmos o método getInitialState precisamos definir as ações que iremos tomar quando nosso componente sofre alguma alteração no seu estado, nesse caso adicionamos uma função “_textChange” ela simplesmente atualizar o estado do elemento com setState, quando ele for alterado.

No último bloco do nosso componente dois pontos importantes, agora no value do nosso textarea e do nosso h3 não acessamos os props do nosso componente e sim o estado “React.DOM.textarea({ value: this.state.text, …” e “React.DOM.h3(null, this.state.text.length)” outro ponto importante adicionamos um evento onChange para disparar a método _textChange.

Agora quando alteramos nosso componente ele atualiza os dados. Então o objetivo é fazer posts curtos com mais frequência, todos os tutoriais de react estão no meu git: https://github.com/fellyph/react-tutorial

Categorias
Web WordPress

Trabalhando com shortcodes no WordPress

Vamos falar sobre shortcode nesse post, mas antes vou contar uma história para vocês. Semana passada me deparei com um problemas, daqueles que você só enxerga em produção. Desenvolvendo um tema para um freela, tudo ok no ambiente de teste. Quando o site foi para produção nenhum vídeo carregava.

Entrei para verificar o conteúdo, nele tinha uma tag video.

quando bati o olho pensei duas coisas ou é um shortcode antigo ou é algo do jetpack. Primeiro passo, verificar os plugins se estão ativos, em seguida atualizar o WP, por fim atualizar o Jetpack. Resultado nada!

Você faz aquele exercício o que foi que eu fiz antes “desabilitei o tema anterior” quando fui olhar o código do tema antigo estava lá o shortcode video. Shortcode é um recurso muito útil para que está criando um tema ou plugin. Mas se está criando um short code para o tema ele deve ser totalmente vinculado ao tema, ou seja, um recurso que só faça sentido existir naquele tema ou plugin.

Exemplo, a tag vídeo estava presente em todos os posts mudou o tema, quebrou todo o site. Para alguns recursos hoje em dia não faz muito sentido, um caso é o youtube basta colar o link da url no editor visual que o WP já cria um embed. Optar por um recurso do WP independente do tem ou plugin a funcionalidade vai estar lá.

Ok, vamos para a parte legal. Como eu crio um shortcode?

Primeiro temos que adicionar em nosso function.php o seguinte hook:

add_shortcode( $tag , $func );

Ele espera dois parâmetros, nome da tag e a função que ele irá chamar na prática ele vai ficar da seguinte forma:

<?php  

function say_hello($atts) {
	return '<p> Olá meu nome é'.$atts['nome'].'</p> ';
}

add_shortcode('hello', 'say_hello');
?>

Exemplo acima criamos o shortcode “hello” quando a shortcode api encontrar a tag [hello] dentro do meu post saberá que tem que chamar a função say_hello, basicamente ela cria um html como o texto olá meu nome é “x”. Notem que concateno com um valor que passamos como parâmetro na função.

Ela espera que passamos um atributo nome, por exemplo, [hello nome="ze"]. Mas se caso o usuário não passar o valor o que vai acontecer ? ZICA!

Mas podemos definir um atributo default para resolver este problema:

<?php
function say_hello($atts) {
	$atts = shortcode_atts( array(
				'nome' => 'zezinho'
			), $atts, 'hello' );
	return '<p> Olá meu nome é'.$atts['nome'].'</p> ';
}

add_shortcode('hello', 'say_hello');
?>

No caso usei um exemplo simples só montar um texto p. Mas poderíamos montar um componente de share, um componente de sugestão de produtos, o componente de publicidade. Lembrando que o recurso fica atrelado ao tema ou plugin, quer saber mais? Também adicionei uma versão em português no codex do WordPress: https://codex.wordpress.org/pt-br:Function_Reference/add_shortcode