Categorias
Tutoriais

Introdução ao npm

Estou começando uma série sobre desenvolvimento do blocos Gutenberg é um dos pré-requisitos para se trabalhar com Gutenberg e JavaScript moderno é a utilização de nodeJS e npm. Nesse post iremos realizar uma introdução ao npm e ver qual o seu papel no fluxo de desenvolvimento de blocos Gutenberg.

Se voce já desenvolveu aplicações em react, Vue e express. certamente voce fez o uso de npm para instalar as dependências de sua aplicação. O npm foi adquirido recentemente pela Microsoft/Github, mas como ele funciona funciona? Isso iremos ver a seguir:

npm

É um acrônimo da palavra node package manager em outras palavras gerenciador de pacotes node. Ele vem pre-instalado com NodeJS, quando instalado temos a capacidade de baixar dependências de nossa aplicação. Quando iniciamos um projeto node temos a criação de uma arquivo chamado package.json.

Nele irá conter a descrição e configuração onde iremos falar mais pra frente.

Onde essas dependências estão?

O diretórios de pacotes nodes ficam disponíveis na nuvem, eles podem ser públicos ou privados. Podemos encontrar os pacotes em diretório online no endereço npmjs.com

npm homepage

Temos uma caixa de busca onde podemos pesquisar por pacotes específicos. Por exemplo, se pesquisarmos por “@wordpress/blocks”, nesse caso o @wordpress é o escopo dos pacotes e o pacote em si é block, quando acionarmos a busca iremos achar a página do pacote @wordpress/blocks:

Pagina do pacote @wordpress/blocks

Geralmente na página do pacote vamos ter informações como:

  • Descrição
  • Código para instalação
  • Primeiros passos
  • Dependencias
  • Dependentes
  • Downloads semanais
  • Versões
  • tamanho
  • github page
  • colaboradores

npm CLI

Podemos dizer para desenvolvedores a interface de linha de comando é a parte mais importante do npm através de linha de comando conseguimos baixar instalar pacotes em nossa aplicação. A estrutura básica de um comando com npm e:

npm <comando> [argumentos]

Por exemplo pra instalar um pacote especifico executamos o seguinte código:

npm install webpack

No comando acima instalamos o pacote do webpack, se tudo ocorrer bem o npm irá criar uma pasta node modules com os módulos do webpack e suas dependências. Além disso podemos passar adicionar mais parâmetros para escolher uma versão especifica ou como iremos gravar a dependência.

Package.json

Funciona como uma mapa para sua aplicação nele iremos ter as configurações de dependências de nossas aplicação, organizadas por destino(dev ou produção) e versão. Com npm CLI temos um comando para iniciar um projeto node e criar um package.json.

npm init

Quando executado o comando teremos uma série de perguntas para criar o nosso arquivo package.json:

  • package name: preste atenção nesse valor caso queira publicar o seu projeto ele precisa conter um nome único
  • version: versão do seu projeto junto com o name ele é utilizado para identificar a aplicação.
  • description: descrição do projeto que será exibida quando os usuários buscarem por sua aplicação.
  • entry point: arquivo que será inicializado quando sua aplicação for executada.
  • test command: comando para executar testes
  • git repository
  • keywords: palavras chaves para a busca no repositório
  • author: o autor do pacote
  • license: tipo de licença do pacote

package-lock.json

package-lock.json é automaticamente gerado contendo informações de quando npm modifica o package.json e a árvore de dependências do projeto. É recomendado ter este arquivo listado no seu repositório pelas seguintes razões:

  • Permite aos usuários realizar uma viagem no tempo sobre o projeto.
  • Facilitar uma visibilidade maior sobre as mudanças do projeto
  • Otimiza o processo de instalação do npm evitando a duplicação de conteúdo.

Dependências

Essas são as informações que vem por padrão além disso quando instalamos dependências podemos definir se elas serão de produção ou não. Isso acontece que muitos casos temos dependências de desenvolvimento elas são utilizadas para criar testes ou “compilar” o nosso código como por exemplo babel.

As dependências são organizadas por nome e versão em um objeto:

{ "dependencies" : { "foo" : "1.0.0 - 2.9999.9999" , "bar" : ">=1.0.2 <2.1.2" , "baz" : ">1.0.2 <=2.3.4" , "boo" : "2.0.1" , "qux" : "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0" , "asd" : "http://asdf.com/asdf.tar.gz" , "til" : "~1.2" , "elf" : "~1.2.3" , "two" : "2.x" , "thr" : "3.3.x" , "lat" : "latest" , "dyl" : "file:../dyl" } }

Maioria dos casos trabalhamos com a versão exata, mas podemos ter uma série de regras para versões:

  • versão exata: “1.0.0”
  • versão maior que: “>1.0.0”
  • versão maior que ou igual: “>=1.0.0”
  • versão aproximadamente: “~1.1.0”
  • versão compatível: “1.2.x” pode ser 1.2.1… 1.2.3… 1.2.4…
  • url da versão
  • versão definidas por um range: “1.0.0 – 3.0.0” nesse caso maior

devDependencies

Se você tem planos para utilizar a dependência apenas para de desenvolvimento, nesse caso não queremos que o conteúdo dessa dependência vá para produção. para esse caso utilizamos o seguinte comando:

npm install [nome-do-pacote] --save-dev

Temos uma série de comandos para npm no meu canal do Youtube gravei dois vídeos falando mais sobre o assunto:

Parte 1

Parte 2

Vamos fechando essa introdução por aqui para mais tutoriais, acesse a página da categoria. Ou deixo uma sugestão sobre um assunto que você gostaria de ver no blog.

Categorias
AMP Accelerated mobile pages

Eventos com AMP e trabalhando com amp-sidebar

Veja a aula criando sidebar menu com amp

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. Mais posts sobre AMP você encontra na página da categoria e 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 e ver quais os requisitos básicos para publicar nossa primeira página válida.

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 da biblioteca
  3. Utilizar ferramentas como validador para deixar nossa página 100% compatível

AMP validator

O validator é importante por duas razões:

  1. Manter a qualidade do seu código como acessibilidade e performance
  2. Somente conteúdo válido 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 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 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.

O 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 o JavaScript da biblioteca
  • 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. 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, 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 da biblioteca, canonical tag que iremos entrar em detalhes posteriormente e uma tag stile com o CSS boilerplate. Com isso temos o seguinte resultado:

Canonical tag

Um dos pré requisitos para ter uma página 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. Você não precisa editar esse arquivo mantenha do jeito que copiar.

Por fim temos o carregamento do JS da biblioteca, 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.

Categorias
AMP Accelerated mobile pages 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/