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 WordPress

Segundo Wordtalks DRC

No dia 29 de setembro rolou o primeiro Wordtalks DRC, por conta do calendário não deu para realizar o segundo encontro no mês de outubro assim o segundo Wordtalks DRC ficou marcado para o dia 10 de novembro.

Para quem ainda não conhece o Wordtalks é um evento organizado por (ex)alunos da DRC com o objetivo de compartilhar experiências. Cada participante tem 20 minutos para realizar sua apresentação e 10 minutos para debate. Cada encontro terá no máximo 5 apresentações de alunos, professores e convidados. Os Temas das palestras precisam ter alguma relação com WordPress, projetos, fluxo de trabalho, tecnologias ou técnicas.

Estou abrindo um formulário para envio de propostas, qualquer pessoa pode mandar proposta para apresentação. As proposta serão avaliadas e dia 30 será divulgada a programação do encontro. Dessa vez para assistir as palestra terá que ser feito um cadastro pelo site da DRC. Mas não se preocupe o evento é gratuito.

[contact-form subject=”Proposta para apresentação do Wordtalks” to=”fellyph.cintra@gmail.com”] [contact-field label=”Nome” type=”name” required=”true” /] [contact-field label=”Email” type=”email” required=”true” /] [contact-field label=”Site” type=”text” /] [contact-field label=”Assunto da apresentação” type=”text” required=”true” /] [contact-field label=”Resumo da apresentação” type=”textarea” /] [/contact-form]

O evento é realizado no auditório da DRC :

Exibir mapa ampliado

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

Categorias
Geral Web

Curso de JavaScript DRC

No mês passado tive a oportunidade de fazer um curso agora como aluno na DRC, participei da turma de JavaScript com o professor Moacyr Minero. Ultimamente estava tendo muito contato com Javascript e como professor da DRC tinha acesso aos cursos. Fiz a união do útil ao agradável e participei do curso de js.

Aqui o programa do curso :


Curso drc Javascript e jQuery

Curti bastante o curso como JavaScript tem base ECMA-262 mesma base para o ActionScript. São liguagens quase idênticas, mas claro com plataformas diferentes. Hoje o Javascript ressurgiu  e ganhou força com a nova onda dos dipositivos móveis. O Javascript hoje roda nos principáis dispositivos sem restrição.

Hoje existem vários frameworks para a linguagem ,por exemplo, jQuery, mootools e prototype.

Para quem já programa em ActionScript, aprender Javascript é um pulo, existe muita coisa similar entre as duas linguagens, como podemos ver abaixo:

Função que retorna valor randômico em ActionScript:

function retornaRandom():int{

var  valor:int= Math.round(Math.random() * 10);

return valor;

}

Função que retorna valor randômico em JavaScript:

  function retornaRandom(){

    var  valor = Math.round(Math.random() * 10);

    return valor;

  }

Claro o que define uma linguagem é algo mais do que 3 linhas de código. Além dessas existem várias particularidades.

Uma boa referência é o w3cschool.

Uma conta legal no twitter é o @del_javascript

Bons estudos para que quiser se aventurar no Javascript.

Categorias
Web

Novo Curso de desenvolvimento WordPress na DRC

17 de Janeiro começa o curso de desenvolvimento WordPress na DRC com o FRONT-END especialista em WordPress Leonardo Maciel.

Desenvolvimento com WordPress
WordPress é um CMS (Content Management System) para Blogs e Sites, ou seja, ele é uma forma de administrar o seu site/blog de uma forma fácil. Feito em PHP, o WordPress é uma das ferramentas de conteúdo mais usadas por desenvolvedores web.

Objetivos
O treinamento Desenvolvimento com WordPress tem como objetivo capacitar o profissional de web para criar sites utilizando o CMS WordPress,  com o desenvolvimento de temas e utilização de plugins, para que o resultado final seja um site totalmente dinâmico e administrável.

Pré-requisito
Ter cursado o treinamento de Webdesign fundamental ou ter conhecimento equivalente nas linguagens HTML e CSS.

Conteúdo Programático do Curso “Desenvolvimento com WordPress”

Aula 1 – Introdução ao WordPress

  • Apresentação dos alunos, conhecer qual é a história de cada um;
  • Introdução ao WordPress explicando um pouco o que ele é, e o que pode fazer;
  • Instalar um banco de dados localmente, e em seguida instalar uma instância do WordPress;
  • Mostrar 2 formas de fazer Upgrade de versão: Via FTP e via administrador;
  • Visão Geral dos itens do WordPress (Post, Página, Media, Links, Configurações, etc)

Aula 2 – Introdução ao Desenvolvimento de Temas

  • Apresentação de Estrutura de Pastas do WordPress;
  • Apresentação da Estrutura de Pastas de Temas do WordPress;
  • Apresentação da Documentação (Codex) do WordPress;
  • Instalação de um tema;

Aula 3 – Início da Produção de um Tema

  • Introdução as Template Tags;
  • Metodologia de Desenvolvimento do Tema (início, meio e fim);
  • Explicação de Sidebars e Widgets;

Aula 4 – O Loop

  • O Loop é usado no WordPress para exibir as postagens, é uma das partes mais importantes.
  • É nesse passo que o aluno aprende a exibir o conteúdo de forma correta, podendo formatá-lo de acordo
  • com seus critéros, utilizando as template tags;

Aula 5 – Template Tags

  • the_title;
  • the_time e the_date;
  • the_category;
  • the_permalink;
  • the_content;
  • the_excerpt;
  • the_author;

Aula 6 – Arquivos (Header, Index, Footer)

  • get_header;
  • Extrutura do arquivo header.php;
  • Chamada de arquivos externos;
  • Aplicação do loop;
  • Inserção do Footer;
  • Exercício de montagem da home;


Aula 7 – Arquivos (Sidebar, Page, Single)

  • Explicar como funciona a sidebar;
  • Como usar mais de uma sidebar;
  • O que são e como funcionam os widgets;
  • Como montar uma Page;
  • Diferença de uma Page para a Single;
  • Extrutura de um Single Post;
  • Aplicação da tag comments_template;

Aula 8 – Arquivos (Archive , Comments, Search)

  • Customizando o arquivo  comments.php;
  • Entendendo a página Archive;
  • Aplicação de arquivos específicos;
  • Entendendo a página de Busca (Search);

Aula 9 – Criando páginas customizadas (Query Posts)

  • Criar uma Template Page;
  • Entender o que é um Query Post;
  • Aplicar o Query Post para suas páginas customizadas;
  • Exercicio: Criar uma página que traga uma única categoria;

Aula 10 – Utilização de Plugins e Scripts externos

  • Diretório de Plugins;
  • Instalando Plugins;
  • Configurando Plugins;
  • Criando páginas para aplicação de Plugins;
  • Utilizar Scripts externos;
  • Entender as tags: wp_head e wp_footer;
  • Exercicio: Colocar o Script do jQuery para funcionar;

Mais informações ligue : Tel.: 11 3168 2123 reserve sua vaga.

A DRC fica na Rua Joaquim Floriano, 733, 8.º Andar Itaim Bibi São Paulo

Atenção essa grade foi criada em 2010, para acessar a grade atualizada visite: 

WordPress Básico:
http://drc.com.br/cursos/wordpress

WordPress Avançado:
http://drc.com.br/cursos/wordpress_avancado

Categorias
Web

Curso de Flex 3.0 – iMedia Recife

Sempre é bom divulgar curso nessa área, bastante carente de cursos. O iMedia, centro de treinamento autorizado da Adobe em Recife está realizando o Treinamento de Flex 3.0 com Eric Cavalcanti @ericoc para quem quer entrar no mundo do Flex vale a pena.

Mais informações sobre o curso :

Descrição
A Formação Flex 3.0 é uma das inovadoras do mercado. O aluno matriculado, obterá um conhecimento amplo no desenvolvimento de projetos de Rich Internet Application.

Razão para fazer
O domínio da tecnologia Adobe Flex 3.0, abre muitas portas para desenvolvedores em grandes empresas, com projetos de alto valor agregado.

Pequena Descrição
Curso Flex 3: Developing Rich Client Applications
O curso ensina como desenvolver aplicações ricas com o uso prático de exercícios usando Flex. É um curso que abrange todas as características iniciais do Flex e na criação de front-end de aplicações RIA.

Curso Flex 3: Data and Communication
Flex 3 Data and Communication tem como objetivo ensinar como conectar uma aplicação RIA com dados remotos usando componentes e web services, permitindo a comunicação com uma aplicação. Este curso também aborda como manipular e formatar dados recebidos.