Categorias
Geral

Headers com video no WordPress

Sites com videos de apresentação ou como background é um recurso muito utilizado em vários sites atualmente, com a versão 4.7 do WordPress agora e possível adicionar um video no custom header(cabeçalho), essa opção já tinha a possibilidade de adicionar imagens ao header. A seguir vamos ver como habilitar esse recurso no seu tema:

Adicionando o suporte

Primeiramente precisamos fazer os passos normais de adicionar um custom header em nosso tema. precisamos ir no nosso function.php e adicionar a seguinte linda:

add_theme_support('custom-header', array(
'video' => true,
));

Isto irá habilitar o suporte de envio de videos, caso já esteja utilizando o recurso de custom header você precisa achar a linha que adiciona suporte ao custom header e adicionar o atributo ‘video’ => true,  na tela de customização a função irar mudar de “Header Image” para “Header Media como na imagem abaixo”:

Exibindo o header

Nas versões anteriores para exibir o header nos utilizávamos a função the_header_image_tag(), nesta nova versão do WordPress utilizamos the_custom_header_markup() esta função tem suporte para videos e imagens.

Este recurso vai adicionar o markup com o video e também carregar o script wp-custom-header.js, com isso o WordPress irá carregar um markup de um player. Caso queira customizar seu markup o WordPress da uma série de funções para adicionar video ao seu tema.

Customizando

  • has_header_video() – verifica se o site possui um video para ser exibido.
  • is_header_video_active() – verifica se a funcionalidade está disponível no tema.
  • get_header_video_url() – resgata o valor que contem a url do video.
  • the_header_video_url() – imprime o endereco da url do video.
  • get_custom_header_markup() – resgata o markup mas no imprime o conteudo.

Vamos realizar um exemplo utilizando the_header_video_url():

<?php if(has_header_video()): ?>
  <video class="bgvid" playsinline autoplay muted>
    <source src="<?php the_header_video_url() ?>" type="video/mp4">
  </video>
<?php endif; ?>

No exemplo acima verificamos se o tema possui algum video cadastrado com a função has_header_video(), em seguida adicionamos o markup da tag video com o source carregando o endereco do video com a função the_header_video_url().

Nesse exemplo só cadastramos e carregamos o video, desse ponto precisamos de um tratamento com css para exibir o video de forma customizada.

Quer saber mais sobre wp criação de temas tem um curso online no Imediabrasil.com.brhttps://www.imediabrasil.com.br/cursos/curso-wordpress-temas.cfm

Categorias
Dublin Geral

First month again

Here I’m again, my second first month in Dublin. The first time as a student, eight months living in Dublin was a great experience. Broke some concepts and rebuilt me again, an exchange after 30 years was a great experience. One day I told to a friend “we don’t travel abroad, we travel internally in ourselves”. Get out of the comfort zone make us look for ourselves in a pure state, we are abroad without family, friends and masks that we were building during years trying to be someone that we want to be, but sometimes not exactly who we are.

Now it’s a new time, After two months waiting for my visa, I  started to work in a digital agency Inspiration Marketing. Now I already know the city, understand how the city works, how the seasons works here, we are like old friends. But now I have a different feeling, the relationship between Dublin and me have another meaning. I have the possibility to make real plans, with a job it’s possible to make plans for a long time.

Every day wake up at 6:45 AM, prepare my lunch, take the DART to my job, work the whole day and back top home. The classes are substituted for normal work days, but I still learn the routine with native speakers are totally different than students. My team is so patient they know “I’m not a native speaker.”

During the first days; I figured out that I didn’t see so much the city like when was a student, the time for entertainment it’s more restrict, but It’s not so bad I have more time to planning my trips and my routine in Ireland.

It’s just a begin, I’m happy about everything and waiting the whole new experiences that will come.

Categorias
Eventos Geral

WordCamp Europa

No final de junho entre os dias 24 e 26 acontece o WordCamp Europa o principal WordCamp na região com mais de 2 mil participantes esse ano o evento acontece em Viena capital da Áustria. Esse será o meu segundo WordCamp na europa já que meu primeiro foi em Londres logo nos primeiros meses que cheguei aqui.

Foi legal ver outras comunidades e notar que a comunidade brasileira é bem forte e com um alto nível técnico comparada as palestras que eu vi. A única diferença que eu ví no WordCamp Londres é o números de empresas que investem no evento. Isso deixa mais fácil você montar uma super estrutura com: legendas em tempo real, quatro auditórios, buffet ultra organizado com opções vegana, happy hour. Mas esse detalhe me da mais orgulho porque conseguimos fazer WordCamps de qualidade em diferentes estados.

Mas vamos falar o que interessa, logo quando cheguei fiquei de olho nos WordCamps selecionei alguns que poderia participar, fiz um levantamento sobre custo, grade e país que queria muito visitar. Não sei se todo mundo sabe mas estou passando por uma fase de estudante/mochileiro então meus recursos são limitados. Não posso sair viajando toda a europa então a escolha tem que ser feita a dedo.

É claro que o principal evento não poderia ficar de fora dessa lista. Primeira barreira foi a inscrição, estamos falando do principal evento  da Europa, ou seja, as inscrições acabaram em segundos. Entrei em contato com a organização, contei toda a história que sempre participo e palestro em WordCamps, ajudei na organização do WordCamp São Paulo por 3 anos e gostaria muito participar. A resposta foi melhor que esperava fui convidado para participar como voluntário.

Agora é só aguardar e fazer as malas, já foram passadas as primeiras instruções precisamos chegar um dias antes para alinhar as informações nada diferente que fazemos no Brasil, a única diferença é a quantidade de participantes de diferentes países.

O WordCamp Europa serão 3 dias de muito conhecimento com palestras divididas nos seguintes temas comunidade, desenvolvimento, negócios, design e conteúdo. Nos dias 24 e 25 serão o dia dedicado a palestras no dia 26 é o contributor Day, um dia reservado para contribuição com a plataforma.

Agenda Completa aqui: https://2016.europe.wordcamp.org/schedule/

Quer acompanhar o evento? Ainda restam vagas para assistir o LiveStreaming:https://2016.europe.wordcamp.org/tickets/

Vou postar coisas no meu twitter(@fellyph) e snapchat(fellyphc) no dia do evento só acompanhar lá.

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
Geral

Um mês de Dublin

E lá se vão 30 dias após minha chegada em Dublin, tempo passa muito rápido e ao mesmo tempo devagar. Rápido parece que pouca coisa andou por aqui e devagar parece que faz muito tempo que não vejo os meus amigos. Vou pontuar algumas coisas sobre a cidade e a rotina em Dublin. Primeira mês foi bem movimentado: primeira visão sobre a cidade, criando uma rotina, Saint Patrick’s Day, procurando apartamento, tentando abrir conta no banco, inglês e Brasileiros.

Primeira impressões

Dublin é uma ótima cidade com um clima bem louco. Eu achava que São Paulo era louco, mas aqui é bem mais. Aqui é possível fazer sol, chover e nevar ao mesmo dia. A cidade é pequena, comparada a São Paulo. Por exemplo: nos primeiros 15 dias fiz todos os meus compromissos andando. A cidade é plana, assim fica fácil de andar nas primeiras semanas ficava na região norte a 3.5km da minha escola ia andando todos os dias (tive sorte de não chover nesse período). Sobre a culinária, ainda não tive tempo de desfrutar. De volta a vida de estudante, estou fazendo todas as refeições em casa. Mas olhando os preços nos restaurantes, vão de 5 a 20 euros dependendo do lugar, sempre olho os preços e penso com 20 euros posso fazer 6 refeições boas refeições em casa, sem precisar comer porcaria.

Saint Patrick’s Day

É o principal evento, a cidade para fica cheia de turistas e boa parte da população vai ver a Parada que acontece pelas ruas da cidade. As escolas, universidades, polícia, bombeiro e todos os grupos possíveis, desfilam pelas cidades. O desfile vai até o final da tarde e após a parada, todos vão para os pubs beber – foi minha primeira experiência com pubs na Irlanda sai com um grupo de amigos Brasileiros eles decidiram ir na Living Room fica em Dublin 1, muito rock e cerveja.

A parte mais engraçada quando começava uma corrida de cavalo no telão a música parava e todos olhavam aficionados para o telão, dai descobri o primeiro costumo do Irlandês: eles adoram apostar. Depois dessa experiência, sai para andar na região do Temple Bar. Muitos jovens bêbados, o que no começo é engraçado, mas depois fica tudo a mesma coisa e perde a graça quando está sóbrio.

Quando decidi vir para Irlanda meus amigos falaram cara você precisa ir na semana antes do Saint Patrick’s Day e realmente é uma experiência única. Foi legal ver toda a festa, mas existe o outro lado: por ser uma cidade pequena, durante esse período é a pior época para se encontrar apartamento. Mas por que?  Além dos turistas que visitam a cidade, os intercambistas tem 8 meses de visto então ou eles tentam voltar depois do Saint Patrick’s ou chegar antes.

Isso cria uma bolha imobiliária de duas semanas vou falar um pouco na sequência.

Procurando apartamento

Na primeira semana até fiquei um pouco apreensivo em achar um apartamento, todos os anúncios que encontrei tinham um preço acima do que estava pesquisando meses antes, todas as visitas em apartamentos quando chegava no local tinham fila de interessados, as vezes parecia seleção de emprego em multinacional. E não é um problema só para estrangeiros como um vídeo do Foil Arms ang Hog brinca:

Depois muita procura, eu encontrei o apartamento!  Acompanhando os grupos com duas semanas depois as coisas “normalizaram”.

Mas claro tem um lado bom aqui não tem todo aquela questão de fiador ou seguro fiança comparado ao Brasil, você apenas precisa de um depósito de segurança e contrato de um ano ou 6 meses, devido a alta procura é super difícil de encontrar contratos de 6 meses atualmente.

Algumas dicas:

  • Venha dois mês antes do Saint Patrick’s ou um mês depois.
  • Inverno pode ser uma época mais fácil para achar apê, mas pode ser uma época mais difícil para adaptação se você não está acostumado com frio.
  • Pesquise nos grupos de “Classificados Dublin Imóveis” e “The Ideal Flatmate Dublin” no Facebook ou Daft.ie.
  • Tenha paciência porque essa será uma decisão que terá um grande impacto em sua viagem.

Abrindo conta no banco

Nossa pra mim está sendo o maior problema até agora, como funciona isso: 

  1. Você chega na Irlanda para estudar
  2. Para tirar o visto você precisa comprovar que tem os $3.000 euros
  3. Cada escola tem parceria com um banco para abri conta para estudantes, ela faz uma carta comprovando seu endereço
  4. Você leva a carta no banco e abre a conta
  5. Com a conta e os três mil euros você tira o visto e garante a permanência por 8 meses e consegue trabalhar 20h semanais.

Mas o banco que tem parceria o AIB com a escola ATC passou a não aceita a carta da escola, ou seja, você não consegue fazer nada. Estou a um mês esperando uma solução da escola + banco. Se uma conta no banco além de não tirar o visto e só ter permissão de passar 3 meses aqui, não posso ter um celular de conta, contratar internet para meu apartamento, muitos estabelecimentos só aceitam pagamento em débito em conta. O governo tentando resolver o problema mudou as regras a duas semanas atrás, mas a burocracia é tenta que escola e banco não chegaram a uma solução, não vejo o esforço da escola em resolver e o banco quer ditar suas regras. Tenho vários eventos marcados e amigos para visitar a instrução da imigração é que eu aguarde a resolução desse problema antes de sair do país. Sei que pessoas estão viajando sem visto mas não quero correr esse risco.  Agora é paciência e aguardar, o vídeo abaixo fala um pouco sobre o problema dos AIB especificamente.

Inglês e Português

Estou a um mês aqui juntando as horas que falei português é quase a mesma que falei inglês. Ainda não tive uma imersão no idioma na região central e nas escolas os brasileiros dominam. Inicialmente tentei alugar apartamentos com gringos, mas o problema da semana do Saint Patrick’s poderia escolher muito e a localização do apartamento foi decisivo na escolha estou a 10 min da escola.

Falando em escola a ATC, prometia um mix de nacionalidade um dos fatores que decidir estudar na escola, chegando lá apenas 90% da sala são brasileiros e todos foram em busca do mesmo diferencial. Um problema bem grave que você precisa decidir 8 meses da sua vida sem conhecer a escola. Quando chega na escola você tem duas opções: ou aceitar, ou pagar mais mil euros para solucionar o problema mudando de turno. O problema que com esse valor eu entraria numa escola melhor que escolhi, ou economizaria mais optado por uma mais barata que apresentava as mesmas atividades extras. Infelizmente se a escola promete um mix de nacionalidade não acredite, primeiro a escola não pode barrar um estudante por nacionalidade, se entrarem 8 estudantes brasileiros no mesmo nível na mesma época a escola tem que aceitar.

Outro ponto importante escola bem sua agência de viagens; muitas tentam resolver o problema se você não está satisfeito com a escola ou algo do tipo, a exemplo da minha, só tenho respostas prontas que a mais de um mês não ajudaram em nada. Boa parte das coisas estou resolvendo sozinho, então, o papel da agência(Global Study) nesse momento é zero. Por isso, procure saber mais sobre sua escola e até se ela tem escritório na cidade, pois isso também pode ajudar.

Mas esse problema do idioma estou resolvendo participando dos meetups e eventos, sempre o inglês é predominante e nos meetups de DEV você irá escutar todos os sotaques. Se você é da área de front-end alguns grupos legais que participo:

Meetup AWS User Group
Node.JS Dublin User Group