Categorias
AMP Accelerated mobile pages

Criando primeira página AMP

Novo curso em meu canal do YouTube sobre AMP já está no ar:

Nos primeiros vídeos e posts eu fiz a apresentação do nosso projeto. Agora vamos aprender a criar nossa primeira página AMP e vez quais os requisitos básicos para publicar nossa primeira página AMP.

Requisitos básicos

  1. Primeiro precisamos sinalizar que temos conteúdo amp através de um emoji de raio ou adicionando a palavra AMP em nossa tag HTML
  2. Carregar o script do AMP
  3. Utilizar ferramentas como AMP validador para deixar nossa página 100% compatível

AMP validator

AMP validator é importante por duas razões:

  1. Manter a qualidade do seu código como acessibilidade e performance
  2. Somente conteúdo válido AMP será entregue pelo AMP cache
  3. Não fique desmotivado caso tenho uma série de erros de validação isso é um sinal que você terá uma série de melhorias em seu código

Para utilizar o AMP validator você pode utilizar 4 versões:

Vamos utilizar um simples código HTML para fazer nossa primeira conversão, para ativar o validator precisamos adicionar o atributo amp na tag Para validator reconhecer o conteúdo adicionamos em nossa tag HTML o parâmetro amp:

<!DOCTYPE html>
<html amp>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <meta name="description" content="nossa primeira página amp">
  <head>
    <title>Como validar uma página AMP</title>
  </head>
  <body>
    Olá AMP
  </body>
</html>

Quando testamos o código acima no validator web temos o seguinte retorno:

web amp validator

No caso esteja utilizando a extensão Chrome o retorno será através de um ícone no topo superior direito.

AMP Cache

AMP cache é utilizado por mecanismos de busca como Bing e Google eles realizam o preload da primeira página de sua aplicação assim realizando o carregamento quase que instantâneo de sua aplicação.

AMP cache realiza optimização automática de sua aplicação com:

  • Cache images e fonts
  • Comprime images
  • Converte images em formatos como Webp caso o browser suporte
  • Limpeza do HTML para prevenir ataques XSS

Anatomia de uma página AMP

Todas as páginas AMP iniciam com o mesmo código base com requisitos obrigatórios:

  • Atributo AMP na tag html
  • viewport tag
  • Chamada para AMP JavaScript
  • Boilerplate CSS

Esse código é chamado de AMP boilerplate, podemos gerar o nosso código boilerplate através da página amp.dev/boilerplate lá podemos realizar uma série de configurações em nosso código base, chamada de fontes, suporte a service worker, SEO e Google Analytics:

Tela de configuração do amp boilerplate

Como vimos na validação anterior apenas um markup básico não é suficiente para criar uma página válida AMP. Aplicando as regras que vimos anteriormente a nossa estrutura básica ficará da seguinte forma:

<!DOCTYPE html>
<html amp>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <meta name="description" content="Este é um Boilerplate AMP.">
    <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Como validar uma página AMP</title>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <link rel="canonical" href=".">
  </head>
  <body>
    Olá AMP
  </body>
</html>

Agora temos uma versão válida AMP, como qualquer arquivo HTML uma página AMP precisa de uma tag head e tag body. Mas com uma atenção a três items. A script tag que carrega o script do AMP, canonical tag que iremos entrar em detalhes posteriormente e uma tag stile com o CSS boilerplate do AMP. Com isso temos o seguinte resultado:

Canonical tag

Um dos pré requisitos para ter uma página AMP válida é a tag canonical ela é responsável por informar se conteúdo carregado possui uma versão não AMP, para o mecanismos de busca não identificar sua página AMP como conteúdo duplicado. Caso possua apenas a versão AMP aponte para própria página. em nosso caso na linha 11 definimos nossa propriedade com “.”

Viewport meta responsável por definir como sua aplicação vai responder visualmente a múltiplos devices. Na linha 10 temos o CSS responsável por esconder o conteúdo da página enquanto a aplicação é processada pelo JavaScript do AMP. Você não precisa editar esse arquivo mantenha do jeito que copiar.

Por fim temos o carregamento do JS do AMP, a primeira tag “link” na linha 7 é responsável por realizar o preload do script e na linha seguinte tag “script” realiza o carregamento detalhe para async dentro da tag ele determina que nosso script será carregado de forma assíncrona.

CSS

Ok, temos nosso markup básico mas caso queiramos carregar um arquivo CSS teremos um seguinte erro no validator:

Mensagem não ajuda muito mas isso significa que a tag link com AMP só é válida para fonts e além disso para um set específico de fontes:

  • Fonts.com: https://fast.fonts.net
  • Google Fonts: https://fonts.googleapis.com
  • Font Awesome: https://maxcdn.bootstrapcdn.com
  • Typekithttps://use.typekit.net/

No caso do style customizado teremos que adicionar de forma Inline, isso é um requisito para reduzir o número de requisições e também ajudar no cache de sua aplicação. Além disso ele precisa ser adicionado em uma tag <style amp-custom> e os requisitos são os seguintes

  • 50kb por tag
  • Somente uma tag por página
  • O uso de !important é totalmente proibido
  • Seletores CSS não podem começar com ‘-amp-‘

O projeto usado no curso está no repositório: https://github.com/fellyph/the-best-caipirinha/ as aulas serão separadas por branches, no próximo post vamos ver como trabalhar com imagens e AMP.

Categorias
Geral Tutoriais Web

Pensando em React

Um dos pontos importantes na hora de aprender React é trabalhar no modo que ele espera a “componentização” do conteúdo, esse processo inicia a partir da construção dos mocks.

Passo 1 – Iniciando como um mock

Imagine que você tem a seguinte tela:

Como criaríamos componentes com esse mock?

No caso acima temos uma coleção de portfólio, um componente job, com: foto, descrição, url, empresa, Design, e tecnologias. Vamos considerar que toda esta coleção está em um JSON:

[{"nome": "job 1", "url": "http://fellyph.com.br/", "empresa": "Empresa 1", "designer": "Artista 1", "tecnologias": ["HTML", "CSS", "JS"]},
{"nome": "job 2", "url": "http://fellyph.com.br/", "empresa": "Empresa 2", "designer": "Artista 2", "tecnologias": ["HTML", "CSS", "JS"]},
{"nome": "job 3", "url": "http://fellyph.com.br/", "empresa": "Empresa 3", "designer": "Artista 3", "tecnologias": ["HTML", "CSS", "JS"]},
{"nome": "job 4", "url": "http://fellyph.com.br/", "empresa": "Empresa 4", "designer": "Artista 4", "tecnologias": ["HTML", "CSS", "JS"]},
{"nome": "job 5", "url": "http://fellyph.com.br/", "empresa": "Empresa 5", "designer": "Artista 5", "tecnologias": ["HTML", "CSS", "JS"]},
{"nome": "job 6", "url": "http://fellyph.com.br/", "empresa": "Empresa 6", "designer": "Artista 6", "tecnologias": ["HTML", "CSS", "JS"]}]

E o nosso componente básico é o seguinte:

Seguindo essa estrutura inicialmente nosso componentes com suas hierarquias serão os seguintes:

  • PortifolioList
    • PortifolioItem

Por que falamos em hierarquias? No caso podemos ter componentes que carregam outros componentes, mas isso não impede de outros elementos carregarem o mesmo componente.

Passo 2 – Construindo uma versão estática com React

No post anterior, trabalhamos com “React.createClass” nesse tutorial vamos utilizar um cara chamado “React.Component” ele trabalha de uma forma diferente com ele criamos um classe que estendem de React.Component lembrando que para trabalhar com classes precisamos do babel para rodar o nosso ECMAScript 2015 e o React. Vamos começar pelo item mais básico o PortfolioItem, primeiramente considerando o mock que construímos o seguinte HTML:

<article class="job">
  <h4 class="title">Blog elo7</h4>
  <ul class="fetures">
    <li><a href="#" target="_blank" alt="site">linkdosite.com.br</a></li>
    <li>Empresa: Elo7</li>
    <li>Tecnologias: HTML5, CSS3, WordPress</li>
  </ul>
</article>

Agora vamos passar o nosso HTML para o um componente:

class PortfolioItem extends React.Component {
  render() {
    return (
      <article className="job">
        <h4 className="title">Blog elo7</h4>
        <ul className="fetures">
          <li><a href="#" target="_blank" alt="site">linkdosite.com.br</a></li>
          <li>Empresa: Elo7</li>
          <li>Tecnologias: HTML5, CSS3, WordPress</li>
        </ul>
      </article>
    )
  }
}

Apenas adicionei o PortfolioItem com HTML estático só para mostrar como funciona o React.Component, notem que trocamos a propriedade class por className isso é necessário para não termos conflitos com a palavra reservada class, mas as informações estão estáticas precisamos carregar as informações dinamicamente, a cada chamada do componente ele precisa ter uma informação diferente, então vamos lá:

class PortfolioItem extends React.Component {
  render() {
    return (
      <article class="job">
        <h4 class="title">{this.props.nome}}</h4>
        <ul class="fetures">
          <li><a href="#" target="_blank" alt="site">{this.props.site}</a></li>
          <li>Empresa: {this.props.empresa}</li>
          <li>Tecnologias: {this.props.tecnologias}</li>
        </ul>
      </article>
    )
  }
}

No código acima utilizamos o “{}” para especificar que é uma variável dinâmica this.props. acessa os parâmetros que foram passado para o componente, nesse caso chamamos o componente da seguinte forma:

<PortfolioItem nome={job.nome} site={job.site} empresa={job.empresa} tecnologias={job.tecnologias} />

Assim o atributo nome passado no componente acessamos dentro do componente {this.props.nome}, nosso exemplo completo com PortfolioItem e PortfolioList fica da seguinte forma:

class PortfolioItem extends React.Component {
  render() {
    return (
      <article class="job">
        <h4 class="title">{this.props.nome}}</h4>
        <ul class="fetures">
          <li><a href="#" target="_blank" alt="site">{this.props.site}</a></li>
          <li>Empresa: {this.props.empresa}</li>
          <li>Tecnologias: {this.props.tecnologias}</li>
        </ul>
      </article>
    )
  }
}

class PortfolioList extends React.Component {
  render() {
    const jobsList = [],
          data = [
          {"nome": "job 1", "site": "http://fellyph.com.br/", "empresa": "Empresa 1", "tecnologias": ["HTML", "CSS", "JS"]},
          {"nome": "job 2", "site": "http://fellyph.com.br/", "empresa": "Empresa 2", "tecnologias": ["HTML", "CSS", "JS"]},
          {"nome": "job 3", "site": "http://fellyph.com.br/", "empresa": "Empresa 3", "tecnologias": ["HTML", "CSS", "JS"]},
          {"nome": "job 4", "site": "http://fellyph.com.br/", "empresa": "Empresa 4", "tecnologias": ["HTML", "CSS", "JS"]}];

    data.forEach( function(job) {
      jobsList.push(<PortfolioItem nome={job.nome} site={job.site} empresa={job.empresa} tecnologias={job.tecnologias} />);
    });

    return (
      <div className="jobs">
        {jobsList}
      </div>
    );
  }
}

ReactDOM.render(
  <PortfolioList />, document.getElementById('portfolio')
);

No código acima adicionei o JSON como uma constante do nosso componente o ideal que essas dados venha de alguma API. Na sequência leio o JSON e crio um array com componentes PortfolioItem e no render eu apenas passo o array que montamos {jobsList}. Por fim chamamos o ReactDOM.render passando o PortfolioList como o elemento que iremos adicionar o componente.

O nosso HTML fica da seguinte forma:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Pensando em React</title>
  </head>
  <body>
    <h3>Portfolio</h3>
    <div id="portfolio"></div>
    <script src="https://fb.me/react-15.1.0.js"></script>
    <script src="https://fb.me/react-dom-15.1.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script type="text/babel" src="src/js/components.js"></script>
  </body>
</html>

Podemos organizar melhor o nosso componente PortfolioList, podemos adicionar funções para organizar o seu comportamento, como no código abaixo:

class PortfolioList extends React.Component {
  _getJobs () {
    const var jobsList = [
      {"nome": "job 1", "site": "http://fellyph.com.br/", "empresa": "Empresa 1", "tecnologias": ["HTML", "CSS", "JS"]},
      {"nome": "job 2", "site": "http://fellyph.com.br/", "empresa": "Empresa 2", "tecnologias": ["HTML", "CSS", "JS"]},
      {"nome": "job 3", "site": "http://fellyph.com.br/", "empresa": "Empresa 3", "tecnologias": ["HTML", "CSS", "JS"]},
      {"nome": "job 4", "site": "http://fellyph.com.br/", "empresa": "Empresa 4", "tecnologias": ["HTML", "CSS", "JS"]}
    ];

    return jobsList.map((job) => {
      return (<PortfolioItem nome={job.nome} site={job.site} empresa={job.empresa} tecnologias={job.tecnologias} />);
    })
  }

  render() {
    const jobs = this._getJobs();
    return (
      <h3>Portfolio</h3>
      <div className="jobs">
        {jobs}
      </div>
    )
  }
}

Na atualização do componente adicionamos uma função “_getJobs” responsável para carregar os trabalhos, separamos a lógica de ler os dados da lógica de renderizar os dados. Também usei alguns recursos novos do ECMAScript2015.

Podemos evoluir esse post, mas pretendo ir evoluindo estes exemplos em outros posts, por isso adicionei um repositório no git: https://github.com/fellyph/react-tutorial

Categorias
HTML5 Tutoriais

Chame o card de SMS ou o card de discagem com um simples link

Você sabia que é possível preparar um envio de uma SMS via tag <a>. Isso é um recurso bem antigo(início de 2010) dos primórdios do HTML Mobile e podemos usar este recurso bem útil e otimizar a experiência do usuário, imagine uma listagem de lojas o usuário deseja ligar para uma loja específica, se não utilizar a tag <a> o usuário precisa copiar o texto, sair do browser e colar no discador. Mas para resolver isso com apenas um clique é bem simples:

<a href="sms:1234567?body=Hello BB10">Enviar um SMS via link</a>

Como podemos ver no código acima na propriedade href do nosso link iniciamos com “sms:” para indicar que vamos enviar um sms e o número na sequência 1234567 é o número o qual você quer enviar a mensagem. Depois utilizamos uma “?” para passar um segundo parâmetro o corpo da mensagem.

 

Outra opção é usar a tag <a> ligar para algum número específico, isso é possível com o seguinte código:

<a href="tel:1234567">Ligue já!</a>

Quando o usuário clicar no link, caso possua o Skype ele será invocado para fazer a ligação.

Caso queira baixo esses exemplos, eles estão no meu gitbub no link: https://github.com/fellyph/Tutorial-bbUI/tree/master/link/www

Categorias
Eventos WordPress

FEEC Brasil 2012

No dia 01 de dezembro em Recife acontece o FEEC Brasil 2012, um evento especial com grandes nomes relacionados a TI como: Stoyan Stefanov, engenheiro de software do Facebook e o autor de livros Javascript Patterns(faz parte da minha biblioteca) e Object-Oriented JavaScript. Além disso, é o criador do smush.it ferramenta de otimização de imagens. Resumindo o cara é fod* de verdade.

Outro nome forte no evento (que também vem de fora) é Caridy Patino: front end engineer da Yahoo! e especialista em SSJS / NodeJS e plataforma Cocktails Yahoo!. Caridy fará uma palestra sobre os desafios para se construir aplicações HTML5 para dispositivos móveis.

Além dos “pratas da casa” : Fabio Akita (Codeminer 42), Paulo Melo (C.E.S.A.R – SP), Nelson Glauber (C.E.S.A.R | Unibratec), Virgínia Chalegre (C.E.S.A.R Recife), Gustavo Guanabara(Tuiuiú Comunicação – RJ), Pedro Rogério (Ambulance-SP), Felipe Furtado(C.E.S.A.R Recife), Fred Vasconcelos(Joy Street – PE). Os palestrantes que acabei de citar, fazem parte das palestras do salão principal.

Mas as palestras não acabam por ai, entre uma palestra e outra no salão principal, acontecem light talks que eu vou ter o prazer de fazer parte! Vou falar sobre underscores o starter theme criado pela a equipe da Automattic.

Além da minha mini palestra irão participar: Gustavo Costa(EASY – Soluções Integradas), Lucas Cavalcanti(MGR Tecnologia), Nicholas Fazio(NicholasFF.Com), Socorro Macedo(Lefil), Danilo Torres(Mobiclub), Wilker Lúcio(Kajabi – EUA), Bartho Bernsmann(Microsoft Innovation Center – PE), Guilherme Farias(MGR Tecnologia)… Acho que não esqueci de ninguém. A programação completa você confere aqui : http://www.feecbr.com.br/pt/programacao.php?local=Recife

Estou ansioso pelo evento, primeira palestra em Recife cidade onde me formei. Reencontrar os amigos vai ser bem legal e conversar com os participantes do evento sempre é um estimulo para novas idéias. Um evento com 19 palestras um dia de overdose de TI. As inscrições ainda estão abertas então se você está pensando, não pense duas vezes o evento é daqui a uma semana.

Inscrições aqui!

O FEEC Brasil acontece no Hotel Golden Tulip Recife Palace que fica na Av. Boa Viagem número 4070. No dia 01 de Dezembro de 2012, mais informações sobre o evento aqui: http://www.feecbr.com.br/

Categorias
Eventos WordPress

Programação do 2º Wordtalks DRC

Dia 10 de novembro acontece o segundo Wordtalks é um encontro voltado para debater temas relacionados a desenvolvimento web e WordPress. Por ser um evento com a grade organizada por alunos tem o objetivo de apresentar e debater projetos ou técnicas que os alunos utilizam em seu dia-a-dia.

Cada palestrante tem 20 min para apresentar sua proposta e 10 min para debate. Além das apresentações dos alunos, cada encontro terá a participação de um convidado. O encontro começa as 10h e seu término é as 13h. Duas horas de muita informação e o melhor de tudo isso que você não paga nada.

No segundo encontro o nosso convidado será:

Leonardo Lima

Front-end Developer no portal UOL e responsável pelo projeto de reestruturação do portal UOL mobile. Atua como desenvolvedor web desde 2002, é preocupado com performance, padronização de projetos e reutilização de código. Curioso por novas tecnologias e ferramentas, estudante de Ciência da Computação no Mackenzie.

Leonardo  levará o seguinte tema para o encontro : Pré-processadores de CSS: SASS, LESS e Grid Frameworks.

Além do convidado teremos mais 3 palestras, a programação do encontro ficará da seguinte forma :

10h – Abertura

10:20 – Criando widgets em 20 min.
Palestrante: Fellyph Cintra.
Resumo da apresentação: Apresentação estilo “se vira nos 20”. Em 20 minutos mostrarei os Passos básicos para criar uma widget.

10:50 – Hospedando um site em WordPress
Palestrante: Luis Felipe Veiga Correa
Resumo da apresentação: Pontos importantes para considerar ao contratar um plano de hospedagem para um site em WordPress e as diferenças entre os tipos de servidores.
Site: www.dev2web.com.br

11:30 – SEO para WordPress
Palestrante: Rodrigo Simoni
Resumo da apresentação: O WordPress é um ótimo CMS para trabalhar com SEO. Porém, há uma série de técnicas de SEO On Page, além de alguns plugins que são essenciais e obrigatórios para que seu site possa ganhar visibilidade e conseguir bons posicionamentos nas Serps do Google. Sitemap, Robots, URL amigáveis, canonical tags, conteúdo relevante, long tails e outras técnicas e ferramentas que farão toda a diferença.

Site: www.brandweb.com.br

12:10 – Pré-processadores de CSS: SASS, LESS e Grid Frameworks.
Palestrante: Leonardo Lima
Resumo da apresentação: Cansado de reescrever o mesmo código de css a cada elemento novo de seu layout? De ter que mudar os padrões de tipografia e cores em diversas linhas do seu css? Então conheça e entenda mais sobre Pré-processadores de css, o que são, quais existem, como instalar e o principal: como usar!

Site: http://llaraujo.com/

Para participar do encontro basta fazer o cadastro no link : https://www.fellyph.com.br/blog/eventos/inscricao-para-o-segundo-wordtalks/.

O encontro ocorre no auditório da DRC que fica no seguinte endereço :

Rua Joaquim Floriano, 733 – 10º Andar
São Paulo, 04534-012


Exibir mapa ampliado