Categorias
AMP Accelerated mobile pages

Ouvindo eventos com AMP e trabalhando com amp-sidebar

Para esse post iremos implementar um menu slider, com isso precisar aprender dois itens importantes o primeiro é interação com eventos e o segundo é o componente amp-sidebar, para nosso exercício iremos aplicar em nosso projeto the best caipirinha o menu atualmente se encontra sempre visível no modo desktop não temos problemas mas nas versões mobile temos os menu sempre cobrindo o nosso conteúdo, como podemos ver na imagem abaixo:

nosso menu se comporta na versão mobile

Como solução para o nosso problema iremos exibir o menu apenas quando o usuário clicar no botão menu. Para isso precisamos acompanhar o evento de click do usuário. Como fazemos isso com AMP? Com JavaScript ouvimos os eventos através do addEventListener mas com AMP iremos utilizar o atributo on.

atributo “on”

Com AMP para acompanhar eventos com tap, cliques de mouse interações com o teclado. Esses eventos nos componentes AMP são acompanhados pelo atributo on além de acompanhar os eventos podemos definir ações específicas chamadas de actions, por exemplo:

<button on="tap:menu.hide">

No código acima temos um botão que está acompanhando a ação de tap e quando realizado o elemento com id “menu” onde será realizada a ação de “hide” para esse código funcionar precisamos de elemento com o id menu exemplo:

<div id="menu">Meu menu</div>
<button on="tap:menu.hide">Fechar o menu</button>

Ações

No exemplo acima utilizamos a ação hide ele faz parte de um grupo de ações genéricas disponíveis para todos componentes AMP e elementos HTML que são elas:

  • hide
  • show
  • toggleVisibility
  • toggleClass
  • scrollTo
  • focus

Alguns componentes possuem ações e eventos específicos, por exemplo, o amp-carousel possui a ação goToSlide onde podemos exibir um slide específico e o evento slideChange que com ele podemos acompanhar esse evento e determinar alguma ação quando necessário.

amp-sidebar

Agora que temos uma introdução a eventos e ações com AMP vamos implementar esses novos recursos a nossa aplicação, primeiramente vamos adicionar o component amp-sidebar em nossa aplicação ele irá necessitar um script extra:

<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>

O componente amp-sidebar oculta o conteúdo destinado a uma acesso temporário exemplo, links de navegação, botões, menus. O componente pode ser controlado por botões.

amp-sidebar possui um comportamento bem específico:

  • O conteúdo irá aparecer sempre da direita ou esquerda da página dependendo de qual valor definido pela propriedade side.
  • amp-sidebar deve conter um componente HTML válido.
  • layout nodisplay é obrigatório
  • É recomendado que o componente amp-sidebar seja um filho direto da tag body para preservar a ordem lógica do DOM especialmente para leitores de tela.
  • A ação de zoom é desabilitada para preservar o seu funcionamento.
  • A largura da sidebar pode ser ajustado via CSS mas respeitando uma largura mínima de 45px.

Depois da introdução ao componente vamos a sua utilização:

  <button class="recipe__header__menuBtn" on='tap:sidebar-menu.toggle'>Menu</button>    
  <amp-sidebar id="sidebar-menu" side="left" layout="nodisplay">
          <nav class="recipe__navigation nav">
            <ul class="recipe__navigation__menu">
              <li class="recipe__navigation__item">
                <a href="#about">About</a>
              </li>
              <li class="recipe__navigation__item">
                <a href="#ingredients">Ingredients</a>
              </li>
              <li class="recipe__navigation__item">
                <a href="#steps">Steps to Make It</a>
              </li>
            </ul>
          </nav>
        </amp-sidebar>

No código acima temos um botão responsável por invocar a exibição da nossa sidebar, inicialmente ela estará no estado nodisplay, acompanhamos o evento de tap e quando pressionado ele irá realizar ação de toggle em nosso amp-sidebar com id sidebar-menu, todo o efeito de animação já será definido pelo componente e depois que o código é aplicado em nossa aplicação o resultado será o seguinte:

Assim temos a solução para o nosso menu tanto para desktop quanto mobile

No código acima é uma parte da nossa solução para ver a solução completa só acessa o repositório no github vamos fechando esse tutorial por aqui. Caso tenha alguma dúvida só deixar um comentário.

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
JavaScript Tutoriais

Introdução ao AMP

AMP ou Accelerated mobile pages surgiu para solucionar um problema antigo das aplicações web relacionado a performance, o fato que muitas das aplicações web são desenvolvidas nos grandes centro onde as empresas e usuários tem facilmente acesso a conexão rápida. Quando as aplicações são testadas nos grandes centros não levam em conta o tempo de carregamento da aplicação em uma conexão lenta, e um dos dos objetivos do AMP foi solucionar este problema e e entregar essa informação priorizando performance.

Sabemos conexões rápidas não se aplica ao resto do planeta muitas regiões ao redor do globo continuam tendo dificuldade de acessar conteúdo online. Como podemos promover a inclusão desses grupos preocupado com esse problema o time do Google criou o projeto open source chamado Accelerated Mobile Pages posteriormente chamado apenas de AMP.

Mas esse problema também afeta os grandes centros usuários mobile com conectividade limitada também tem sua experiência prejudicada, todos esses problemas aumentam o tempo de carregamento e na exibição de elementos na tela. Além do fato que aplicações de alta performance ajudam na taxa de conversão usuários, que tais usuários estão cada vez mais utilizando aplicações web através de dispositivos moveis.

AMP permite a criação de sua aplicação em um curto espaço de tempo, isso através de componentes criando um ambiente de fácil manutenção além promover melhores praticas como:

  • Performance
  • Acessibilidade
  • Confiabilidade
  • Design responsivo

Além disso AMP reduz a complexidade do seu código, mas sem perder o controle de sua aplicação você continua com a capacidade de adicionar código CSS para customizar sua aplicação. O set de componentes já existentes ajudam na agilidade na criação de novas aplicações presando a performance. AMP é um projeto open source a comunidade sem está criando novos componentes e novas versões da aplicação e a base do seu código sempre será atualizada

Como AMP funciona

AMP possui três pilares:

  • AMP HTML extende HTML básico criando novas tags criando novas features, por trás das cortinas ele trabalha com web components
  • AMP JS controla a execução de javascript também adicionando melhorias de performance como tree shaking.
  • AMP Cache armazena o conteúdo da aplicação.

A performance dentro de projetos AMP é possível por conta de alguns pontos chaves que iremos listar a seguir.

JavaScript assíncrono

com javascript podemos modificar todos os aspectos de uma página, mas também bloquear o seu processamento caso não especificarmos que o seu carregamento não afete a renderização da página. Nesse caso todo o carregamento de JavaScript em AMP é feito de forma assíncrona para não afetar a entrega do conteúdo.

Por isso AMP restringe o carregamento de JavaScript escrita pelo autor nesse caso temos que utilizar tags especiais para incluir interação com o usuário.

Evita que extensões de terceiros bloqueiem a renderização

AMP não permite que extensões como, lightboxes, instagram, embers, tweets bloqueiem a renderização do seu conteúdo. Muitos desses items enquanto fazem requisições para suas respectivas APIs bloqueiam a renderização da sua aplicação, mas isso não significa que que você não poderá utilizar esses recursos AMP tem uma série de componentes para interagir com outras plataformas.

Tamanho de todos os recursos estaticamente

Recursos como imagens, iframes ou anúncios, precisam informar seu tamanho no HTML, de modo que AMP possa determinar o tamanho e a posição de cada elemento antes que os recursos sejam baixados. AMP carrega o layout da página sem esperar o download de nenhum recurso.

AMP separa o layout HTML dos recursos externos, isso para priorizar a entregar com conteúdo mais rápido possível. Apenas uma solicitação HTTP é necessária para o todo o layout do documento (+ fontes). Como AMP é otimizado para evitar recálculos de estilo no seu navegador, não haverá nenhum novo layout após a ultima requisição.

Gerenciamento de Javascript de terceiros

AMP mantém todos os scripts de terceiros fora do caminho crítico da renderização das páginas. JS de terceiros gostam de usar carregamento síncrono para executar suas tarefas para garantir sua execução mas isso acaba aumentando o tempo de carregamento da aplicação.

Páginas AMP permitem o carregamento de scripts de terceiros mas apenas em iframes. Com isso o carregamento fica isolado e não afeta o processamento principal de nossas páginas. Mesmo que eles afetem o estilo da página o impacto será mínimo.

Atualizando o post enquanto estava escrevendo este post

CSS inline e com tamanho limitado

O CSS externo como sabemos bloqueia a renderização de nossa página, nas páginas AMP somente estilos inline são permitidos, com isso temos uma requisição a menos em nossa aplicação e uma renderização crítica de nossa aplicação web.

Além disso a folha de estilo in-line é limitada para um máximo de 50kb. Embora esse tamanho seja grande o suficiente para páginas muito sofisticadas, ele ainda exige que o autor mantenha o CSS limpo.

Carregamento eficiente de fontes

As fontes web são uma parte visual importante das nossas aplicações web, portanto, a otimização de fontes é um ponto crucial de nossa aplicação algumas web fonts são bem pesadas aumentando o tamanho total da nossa aplicação. AMP realiza optimização no carregamento de fontes e realiza o preload nossas fontes.

Animações somente utilizando a GPU

O único modo de ter uma aplicação de alta performance é realizado o uso eficiente dos recursos e utilização da GPU é um recurso importante para isso. Todas as animações com AMP são executadas pela GPU assim liberando a thread principal para processamento crítico de nossa aplicação.

Priorização do carregamento dos recursos

AMP controla o carregamento de todos recursos: com isso os recursos serão carregados quando realmente necessários utilizando técnicas como lazy-load e prefetch.

Além disso AMP possui uma lista de prioridade exemplo, imagens estão no topo da lista enquanto ads estão no final dessa lista. Outro fator importante para priorização é quais os recursos estão sendo exibidos para o usuário.

Utilização de novas API para reduzir o tempo de carregamento

A nova API preconnet API é usada intensamente para garantir as solicitações HTTP sejam feitas o mais rápido possível. Com isso a página pode ser pre carregada em background, por isso algumas vezes quando clicamos nos primeiros resultados de uma busca no Google temos o carregamento instantâneo.

Embora o pré-processamento possa ser aplicado a todo o conteúdo da web, ele também ajuda na largura de banda e o uso de CPU.

Web Components

Com AMP HTML temos a possibilidade de utilizar uma variedade de componentes web, utilizando somente elementos nativos da plataforma o framework disponibiliza uma série de componentes reutilizáveis para entregarmos uma aplicação interativa.

Esse são alguns dos items relevantes na plataforma a lista completa você pode encontrar na documentação em amp.dev. Em meu canal do youtube estarei rodando um curso sobre o framework onde você pode conferir a playlist do curso aqui: https://www.youtube.com/playlist?list=PLmIA3VZysEqQxsVcZ7u2ZHOnh78eIOKON

Também confira mais posts na página da categoria AMP.

Categorias
Eventos Mobile Dev Group São Paulo

Conferência web.br 2103 – Dia 01

Nos dias 18 e 19 de novembro de 2013 aconteceu em São Paulo a Web.br 2013, 5º edição conferência organizada pela W3C Brasil, o evento reuniu os principais nomes do desenvolvimento Web no Brasil. O evento aguardados por muitos, no ano passado tive a oportunidade de participar como ouvinte, com 4 trilhas durante os dois dias, cada seção com nomes bem peculiares, header, section, canvas e input. No início de cada dia, contava com um keynote principal. No primeiro dia contou com Fernanda Weiden(Facebook), falando sobre:A evolução dos sistemas de informática e Web no Brasil.

Após o Keynote principal tive a oportunidade de representar a BlackBerry com a palestra Criando aplicações de alta performance em HTML5 . A palestra foi baseada na apresentação do Demian Borba no Brazil JS, onde falei sobre o trabalho que a BlackBerry vem fazendo junto aos Tech Centers, projeto que faço parte e listei 20 dicas sobre performance para aplicações em HTML5.

Palestra de Fellyph Cintra – Foto: Peu Robles/W3C Brasil

Após a minha palestra foi a vez da Talita Pagani entrar no palco canvas, com a palestra sobre Jogos com HTML5, foi uma palestra esclarecedora para quem deseja entrar no mercado de games e utilizar HTML5 como ferramenta, falou um pouco sobre o cenário atual do mercado, sobre suas experiências no dia-a-dia de como é trabalhar com HTML5 para jogos, listou as novas features que se encaixam como uma luva no desenvolvimento de jogos e alguns frameworks que ajudam bastante no desenvolvimento de jogos.

Os slides da apresentação da Talita você confere aqui:

A primeira palestra que tive oportunidade do conferir após o almoço foi com Bruno Azevedo, com o tema Responsivo na prática. O palestrante trabalhou um bom tempo no terra, hoje encara o desafio de empreender a frente da empresa Marimbondo. A palestra teve o foco na web responsiva, o tema é coisa séria não é simplesmente moda. “Entregar a melhor experiência possível ao teu usuário, independente do seu dispositivo” essa foi uma citação que resume o nosso cenário atual. Com o terreno preparado o Bruno entrou na parte técnica da coisa e os slides da apresentação você pode conferir aqui:

 

Talita Pagani falando sobre jogos em HTML5 – Foto: Peu Robles/W3C Brasil

A segunda palestra da tarde foi com Diego Eis e Deivid Marques falaram sobre WAI-ARIA.

A palestra começou com uma introdução sobre as novas tags do HTML5 e seu significado semântico, tema até abordado na palestra do Diego Eis no webbr 2012, mas é sempre bom relembrar. Após a introdução sobre semântica foi a vez de abordar o tema principal WAI-ARIA, segundo um resumo da palestra do Diego:

“A WAI-ARIA serve para estender o significado das interações do seu site. Quando as tags do HTML5 vieram, elas já começaram um trabalho importante de dar significado às estruturas do layout. Você consegue marcar agora o que é um menu de navegação, uma sidebar, um header, um footer etc. Esse trabalho é muito importante por que ajuda a definir a importância dos elementos que cada elemento contém.”

Isso estamos em uma época de muita interação online e como adaptar isso para os usuários que necessitam de acessibilidade? O Diego levantou alguns tópicos sobre o assunto algumas features e em seguida o Deivid mostrou a parte prática como implementar e como testar. Durante a palestra um deficiente visual comentou sobre a qualidade dos leitores de tela disponíveis no mercado, e falou um pouco sobre a experiência de acessar conteúdo na web hoje.

Após a palestra Diego rolou um coffee break momento para encontrar alguns amigos. Depois de recarregar as baterias com o coffee foi a vez da dobradinha da galera do loop infinito Caio Gondim e Almir Filho. Primeiro a se apresentar foi o Caio Gondim com a palestra com HTML5 Sensitivo: Seu browser no plano astral. As duas palestras foram temas em outros front ins esse ano, mas particularmente ainda não tinha visto as duas palestras, o loop infinito sempre levam apresentações bem acabas, com o assuntos bem amarrado e experimentos que deixa a galera impressionada. A palestra abordou o uso dos sensores do seu browser e como criar uma nova experiência do usuário, ou seja, não tenho muito o que comentar é ver para crer.

 

A última palestra que conferir no primeiro dia foi com Almir Filho, Com a palestra CSS Layout: ontem, o hoje e o depois.. A apresentação mostrou toda a história de como os layout eram montados, o processo de “destabelização” da web para uma pseudo “tabelização” com div’s fatiando o layout em forma de tabelas. E os novos recursos do CSS3 e o futuro do CSS3. Os novos recurso otimizam bastante a programação da amostragem do conteúdo na tela. Como dividir a informações em colunas ou porcentagens, de uma forma inteligente. Muito recurso bom já está implementado e muita coisa boa estar por vir. A palestra focou bastante nas features do CSS3 mostrando planejar e aplicar esses novos recursos, a palestra do Almir filho você confere aqui:

 

CSS Layout: o ontem, o hoje e o depois com Almir Filho – Foto: Luíza Troina / W3C Brasil

Muita gente veio de longe conferir o evento, exemplo, Qaiq Alves estudante da UFMG deu o seguinte depoimento:

“A organização do evento está realmente de parabéns pois conseguiram fazer com houvessem diversas dúvidas sobre qual palestra assistir. Com tanto conteúdo de qualidade e palestrantes daquele gabarito não tinha como ser diferente. Foi fantástico!“

Qaid Alves estudante da UFMG veio de BH conferir o evento

O primeiro dia foi bem intenso todas as palestras foram de alto nível, a W3C criou uma grade perfeita, queria muito ter acompanhado todas as palestras. Espero que role alguma gravação para ver as demais apresentações.

fotos do evento você confere aqui: http://www.flickr.com/photos/nicbr/sets/72157637797171915/

Categorias
Eventos Web WordPress

Pós Wordcamp São Paulo 2012

8:30 da manhã estava na puc, procurando o pessoal da organização do evento. Pessoas que nunca tinha visto na vida me apresentei aos organizadores “Olá meu nome é Fellyph” olharam pra mim e perguntaram “ah você quer ajudar?”. Perguntei como poderia ajudar, Guilherme olhou pra mim que é esse cara e respondeu você pode ajudar a separar as camisas. Falar a verdade não sei o nome de todo mundo.

Comecei a separar as camisas e batendo o papo com o pessoal falei que meu nome era Fellyph com dois ll, um y e um ph, logo lembraram do meu nome na lista da organização. Longe de ser uma peça que ajudou efetivamente na organização, mas em alguns momentos acompanhava a discussão e dava algumas opiniões sobre alguns casos. Mas foi legal ver o corre do pessoal e ver a dificuldade que é organizar alguns eventos. Ajudei em outros eventos como iSeminar(apenas na divulgação e planejamento), mas nunca tinha visto a dor de cabeça de arrumar um local para o evento correr atrás de patrocinador entre outras coisas que realmente isso é osso.

Depois das 9:00 fiquei no credenciamento, distribuindo camisas e passando algumas informações para os participantes. Entre conhecidos e desconhecidos cumprimentava cada um e via em alguns a ansiedade de cada um em começar o evento. Alguns palestrantes e participantes chegavam com suas malas, vindo de longe Minas Gerais , Goiás, Ceará, Rio de Janeiro e Rio Grande. Esse foram os estados que identifiquei. Uma responsabilidade muito grande em atender as expectativas de quem vinha de tão longe.

As 9:30 começou o evento ainda estava no meio do credenciamento, não tive a oportunidade de acompanhar. Depois que diminuiu o fluxo no credenciamento fui dar uma olhada no coffee e que senhor coffee, fornecido pela UOL(Agradecendo aqui o apoio ao evento). No meio do coffee encontro amigos e ex-alunos(também amigos) sempre bom reencontrar a galera, principalmente ver a evolução dos alunos depois que saíram do curso os caminhos que tomaram.

Coffee fornecido pela UOL

Mas qual é o porque desse pequeno relato, falei um pouco da minha mini contribuição do evento. Por que é sempre bom contribuir e apoiar eventos com esse objetivo, sem objetivo financeiro apenas apoiar e fortalecer a comunidade WordPress. Se você tem uma ideia de criar um wordcamp em sua região corra atrás porque vale super a pena desenvolver eventos desse porte.

Por volta das 11:20 começou a palestra Matías Ventura, tive a oportunidade de acompanhar rapidamente. Depois teve uma pausa para o almoço foi a hora de trocar os cartões(vergonha eu não tenho cartão de visita).

Resultado do almoço

No inicio da segunda parte do evento rolou o light talks pra mim foi um dos melhores momentos, palestras rápidas com boas informações. Duas dicas muito boas foram os plugins desenvolvidos pela galera um é o get post image : http://vinicius.soylocoporti.org.br/get-post-image-wordpress-plugin/ desenvolvido pelo Vinicius, a funcionalidade básica dele é a seguinte ele associa tamanho de imagens a tipo de posts, ajudando bastante a diminuir a quantidade de imagens, quando você criar tamanhos personalizados. Outro plugin interessante é o Mapa de vista plugin desenvolvido pela equipe do hacklab http://mapasdevista.hacklab.com.br/ a funcionalidade básica desse plugin é associar um post a uma geolocalização em um map. Esses dois plugins podem gerar conteúdo para um post

Depois do lightalks fui acompanhar a palestra do Felipe Coelho falou um pouco sobre o processo de desenvolvimento de temas para WordPress, teve dois pontos que para mim foi interessante. Por sempre desenvolver temas comerciais para empresa nunca fui atento a dois pontos. A questão da localização ou internacionalização do seu tema, ou seja, deixa o tema com suporte para outros idiomas exemplo o tweenty eleven usa esse recurso e o outro ponto fazer a validação do tema. Os links a seguir foram mencionados pelo Felipe sobre validação e teste de temas:

http://codex.wordpress.org/Theme_Unit_Test
http://wordpress.org/extend/plugins/theme-check/

Ás 15:15 acompanhei a palestra do Diogenes sobre alta performance com wordpress, não sou um cara especialista em infra mas curti bastante a palestra. Por fim rolou a palestra sobre Malware e Segurança em WordPress com Bruno Borges, passou várias dicas de segurança tipos de ataques, chamou a atenção para uma questão no caso hoje em dia até o nosso Smartphone está vulnerável a ataques. Um dos links que ele compartilhou foi teste de segurança para sites wordpress : http://sitecheck.sucuri.net

Antes de publicar o post saiu o link palestra do Bruno Borges : http://blog.sucuri.net/2012/08/wordpress-security-presentation-in-portuguese.html

Infelizmente devido a correria acompanhei muito pouco as palestras mas posso falar do pouco que vi curti bastante. Fiz poucos comentários sobre as palestras confesso que estou aguardando os vídeos para acompanhar com mais calma.

Aviso quem participou do evento em breve será enviado um e-mail com o link para gerar o certificado de participação.

Finalizo aqui meu depoimento e gostaria de parabenizar os organizadores pelo evento estão de parabéns.