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
Eventos

Jornada Adobe 2014

Olá Pessoal, no mês de janeiro estarei em Maceió e João Pessoal para ministrar 3 treinamentos na Jornada Adobe 2014, para mim é uma honra participar desse evento que já contou com grandes nomes em suas edições anteriores. Volto a cidade de Maceió após o Adobe Camp para mim é um prazer voltar a cidade onde sou tão bem recebido. Em Maceió vou ministrar dois Cursos Mobile Impact(20/01, 21/01 e 22/01) e  WordPress Impact(23/01, 24/01 e 25/01). Em João Pessoal será a minha primeira vez como “MC”, lá estive presente a muito tempo atrás para um evento da SBC, lá eu vou ministrar o treinamento Mobile Impact(27/01, 28/01 e 29/01). Estou bastante ansioso para voltar para “Jampa”.

O Curso WordPress Impact tem a seguinte grade:

Primeiro dia

  • Preparando seu ambiente local de desenvolvimento
  • Estrutura de pastas e organização de arquivos
  • Requisitando informações do blog
  • Entendendo o loop
  • Filtrando o conteúdo do loop com query_posts, WP_Query
  • Integrando o tema com framework front-end

Segundo dia

  • Controla a Paginação
  • Menus dinâmicos(wp_nav_menu)
  • Filtros(Hooks)
  • Administrando sidebars(dynamic_sidebar)
  • Template Page
  • Post Thumbnail

Terceiro dia

  • Campos personalizados
  • Criando formulário para cadastro de campos personalizados
  • Post_types
  • Criando nova taxinomia
  • Integrando WordPress com libs javascript(jQuery ou Zepto)

Este treinamento acontecerá somente na cidade de Maceió, o treinamento Mobile Impact acontece em Maceió e João Pessoa tem a seguinte grade:

Primeiro Dia

  • Input Types
    • Numeric
    • Tel
    • Date
    • Hour
    • Email
  • Input Attributes
    • Validate elements
    • Required elements
  • CSS tips
      • Multiple Backgrounds
      • Transitions
      • Transforms
      • 3D transforms
      • Gradients
      • Background-size
      • Opacity

    <liAnimation

    • Media queries

Segundo Dia

  • Trabalhando com áudio
  • Trabalhando com vídeo
  • Canvas
  • Geolocation
  • API Drag and Drop API
  • Custom Data Attribute
  • LocalStorage
  • Microdata
  • WebSQL
  • Websockets

Terceiro Dia

  • Hammer.js
  • Cloud Service with Parse
  • Projeto Final
    • Colocando tudo em prática
    • Preparando ambiente Instalando o PhoneGap
    • Publicando seu app

Ficou Interessado só se inscrever no link: http://www.jornadaadobe.com/inscricoes

Categorias
Mobile Dev Group São Paulo

Primeiras impressões sobre Cascades

Tive a oportunidade de conferir o treinamento de Cascades com Rodrigo Peixoto na Universidade Católica de Pernambuco encontro organizado pelo Group Dev de Recife no dia 30 de novembro. Além de ter a oportunidade de conhecer um grupo de outro estado foi o meu primeiro contato com Cascades e fiquei bastante impressionado com o framework que é extremamente fácil e com sua agilidade de desenvolvimento.

O treinamento abordou pontos importantes da plataforma e mostrou alguns exemplos práticos, foi um ótimo “start” que tive com a Cascades. A linguagem utilizada é QML ela é baseada em JavaScript e que parece bastante com um json. Para quem desenvolve em ActionScript, JavaScript, Java ou C++ vai se sentir em casa. Outro ponto importante que junto com o SDK do BlackBerry 10 vem a IDE Momentics baseada no Eclipse, uma das mais populares do mercado.

Após o curso, fiquei super empolgado com o treinamento e a primeira coisa que eu fiz quando cheguei em casa foi deixar tudo redondo para fazer meus primeiros aplicativos. Se você que ainda não baixou o SDK do BlackBerry 10, pode obter todas as informações para desenvolver seu primeiro aplicativo no portal de desenvolvedores da BlackBerry. Além de ter informações sobre Cascades, lá você tem tudo para criar apps em HTML5, C++ Nativo, AIR e Java.

Mas se você pretende iniciar desenvolvimento mobile hoje, eu indico Cascades. Por conta da sua facilidade e desempenho. A documentação detalhada, toda a sua api, seção de downloads e exemplos, você vai encontrar no eguinte link: https://developer.blackberry.com/cascades/

Para começar a desenvolver e simular o resultado em sua máquina, você precisa de 3 passos básicos:

  1. Baixar o BlackBerry 10 Native SDK
  2. Instalar alguma VM(no site ele dá algumas sugestões)
  3. Instalar o Simulador

O BlackBerry 10 Native SDK e Simulador você pode baixar aqui. Meu sistema operacional é Mac OS e a sua instalação foi muito tranquila. Acredito que como a maioria eu também estou começando agora a desenvolver nessa plataforma. Espero contribuir e aprender bastante com todos da comunidade. Então comece já a desenvolver nessa fantástica plataforma e se surpreenda-se também.

Categorias
Eventos Web WordPress

Palestra – WordPress: Mais que um blog

Quer conhecer um pouco sobre WordPress? Amanhã dia 11 de janeiro estarei palestrando sobre WordPress ma drc treinamentos. Mostrando seu ambiente e algumas questões básicas mostrando que o wordpress não se resume apenas ao formato de blog.

A apresentação está organizada da seguinte forma:

– Ambiente necessário para se trabalhar com WordPress
– Novidades da versão 3.3
– Estrutura padrão do wordpress
– Cases de até onde podemos ir com o WordPress

Data: 11/01/2012
Horário: 19:30 às 21:00
Local: Rua Joaquim Floriano, 733, 8.º Andar – Itaim Bibi – São Paulo

Mais informações

Categorias
Eventos Flash

Grupo de Estudo de actionScript AS3Devs

Olá pessoal com o intuito de desenvolver a comunidade de desenvolvedores AS3Devs, iniciará o grupo de estudo sobre ActionScript 3.0 Aprender os conceitos básicos sobre a linguagem. Os encontros serão presenciais(mensal) e online(semanal). É um grupo aberto sem restrição sobre formação, o requisito básico é a vontade de aprender.

Encontros onlines serão todas as quartas-feiras, e os encontros presenciais serão realizados mensalmente.

O primeiro encontro presencial será realizado em 3 cidades: São Paulo, Rio de Janeiro, Salvador e Espirito Santo nas respectivas escolas DRC , INFNET , BR MULTIMIDIA e SIMBIONTE no dia 18 de março de 2011 as 20h.

Inscrições inicialmente não estava utilizando nenhum cadastro simplesmente chegar e levar seu notebook. Para ficar por dentro das palestras futuras só seguir o perfil do @asdevs no twitter ou acompanhar o blog www.as3dev.com.br. Você também pode se registrar em http://asdevs.groups.adobe.com/ e receba um aviso por e-mail antes de todas as reuniões.

Dinâmica das reuniões
– Cada reunião terá um tema previamente definido e um dos participantes do grupo será responsável por passar o conteúdo.
– Em cada reunião, haverá um “monitor” que acompanhará a explicação para ter certeza de que o conteúdo está sendo passado corretamente.
– A definição do próximo tema e do participante que explicará o assunto será sempre definida ao final da reunião.

O melhor de tudo, além de aprender mais sobre actionScript, aumentar o seu network, você ainda concorre a brindes, agora claro não é chegar e ganhar os ganhadores serão definidos pelo o número e nível de participação no grupo. Os brindes vão desde canetas a licenças de software da Adobe.

Primeira aula dia 18/03 às 20h: Introdução ao Actionscript com Fábio Flatchart

Sobre : Fábio Flatschart

Consultor das áreas de Internet e Computação Gráfica da Gerência de Desenvolvimento (GD2) do SENAC-SP na produção de eventos, novas parcerias e desenvolvimento de cursos livres, de nível médio, superior e de pós-graduação. Consultor Educacional da Adobe Systems do Brasil.

blog : http://quadrodosbemois.com.br/
twitter : @fabioflat

Essa aula será presencial no Rio de Janeiro (Instituto Infnet), São Paulo (DRC), Salvador (BR Multimídia) e também online.

Online: http://experts.adobeconnect.com/ge1_introducao_ao_actionscript/

DRC – São Paulo
drc.com.br
Rua Joaquim Floriano, 733, 8.º Andar Itaim Bibi

View Larger Map

Infnet – Rio de Janeiro
infnet.com.br
Rua São José, 90 – Centro do Rio
2 piso, Rio de Janeiro – RJ, 20010-020

View Larger Map

BR Multimídia – Salvador
brmultimidia.com.br
Centro Empresarial Iguatemi: Av Tancredo Neves 274, Bloco B, Sala 308 – Cam. das Árvores

View Larger Map

Simbionte – Espírito Santo
Rua 15 de Novembro, 678 – Praia da Costa

Reuniões presenciais em outros estados/cidades
Quem desejar manter uma reunião presencial das reuniões do Grupo de Estudos do ASDevs, entre em contato com filipe.cunha@gmail.com com o assunto “Reuniões Presenciais Grupo de Estudos“