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

Some Useful Links for You to Get Started

It seems like you’re running a default WordPress website. Here are a few useful links to get you started:

Migration

General

Performance

Security

Email

Feeding Google Search – Structure data

Content is one of the keys to the success on the internet, categorizing your content makes it more visible to the search engines and structure data will be your best friend to do it. This simple action could make you a step forward in the competitive market.  On 2011, Google, Bing and Yahoo launched an initiative called Schema.org, this project’s objective is to create and support schemas for structured data. And now this information start to be more relevant to the search engines, Google especially, uses the structure date to shows the content in a special format called Rich cards. Actually, Google.

Now, this information starts to be more relevant to the search engines, Google especially, uses the structure date to shows the content in a special format called Rich cards.

Actually, Google gives to us these options to pages enhancements: 

  • Breadcrumbs
  • Corporate contact information
  • Carousels for sequential results
  • Logos
  • Sitelinks Search box
  • Social profile links

Content types:

  • Articles
  • Books
  • Courses
  • Events
  • Job postings
  • Local businesses
  • Music
  • Products
  • Recipes
  • Tv and movies
  • Videos

For each situation, needs some required information, for example, recipes we will need to specify, numbers of calories, ingredients, and time to cook. Google uses the structure data to display these categories in a different layout in the search result, in that way help the users find the right content and increase the click rate for the websites that show the content with more quality.

Ok, what about the code?

There are three different formats JSON-LD(Recommended by google), Microdata and RDFa. For a long time, I used Microdata but now I’m working with different projects again and different markups the JSON-LD makes the changes simple.

Code examples:

JSON-LD

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://google.com/article"
  },
  "headline": "Article headline",
  "image": {
    "@type": "ImageObject",
    "url": "https://google.com/thumbnail1.jpg",
    "height": 800,
    "width": 800
  },
  "datePublished": "2015-02-05T08:00:00+08:00",
  "dateModified": "2015-02-05T09:20:00+08:00",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  },
   "publisher": {
    "@type": "Organization",
    "name": "Google",
    "logo": {
      "@type": "ImageObject",
      "url": "https://google.com/logo.jpg",
      "width": 600,
      "height": 60
    }
  },
  "description": "A most wonderful article"
}
</script>

 

Microdata

<div itemscope itemtype="http://schema.org/NewsArticle">
  <meta itemscope itemprop="mainEntityOfPage"  itemType="https://schema.org/WebPage" itemid="https://google.com/article"/>
  <h2 itemprop="headline">Article headline</h2>
  <h3 itemprop="author" itemscope itemtype="https://schema.org/Person">
    By <span itemprop="name">John Doe</span>
  </h3>
  <span itemprop="description">A most wonderful article</span>
  <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
    <img src="https://google.com/thumbnail1.jpg"/>
    <meta itemprop="url" content="https://google.com/thumbnail1.jpg">
    <meta itemprop="width" content="800">
    <meta itemprop="height" content="800">
  </div>
  <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
    <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
      <img src="https://google.com/logo.jpg"/>
      <meta itemprop="url" content="https://google.com/logo.jpg">
      <meta itemprop="width" content="600">
      <meta itemprop="height" content="60">
    </div>
    <meta itemprop="name" content="Google">
  </div>
  <meta itemprop="datePublished" content="2015-02-05T08:00:00+08:00"/>
  <meta itemprop="dateModified" content="2015-02-05T09:20:00+08:00"/>
</div>

As we can see above, JSON-LD we create a structure independent from the content. But we need write the same information twice. Microdata the advantage is we just need to write the content once but the information is totally markup dependent. Especially for articles, we have two different rich cards, one for pages that support AMP and other for Non-AMP pages.

Search result without AMP

Search result with AMP

After adding this information to your content we need to validate it, for that we use the Structured Data Testing Tool

If you are using WordPress there are many different plugins to use Structure data in your Website: https://wordpress.org/plugins/tags/structured-data/

Vagas Front-end em SP junho – 2017

1 – Desenvolvedor .Front-end Pleno e Sênior – Bela Vista)

Local de Trabalho: Bela Vista
Horário: De segunda a sexta-feira 09h00 até 18h00
Regime de contratação: PJ – Projeto Indeterminado
Tempo de projeto: Indeterminado
Requisitos: Sólidos conhecimentos em AngularJS, NodeJS e com experiência em desenvolvimento de softwares com interfaces complexas, não apenas interações com aplicações e web, trabalhar com SASS e GIT.

2 – Desenvolvedor Front-end Sênior

Local de Trabalho: Morumbi
Horário: De segunda a sexta-feira
Regime de contratação: PJ – Projeto Indeterminado
Tempo de projeto: Indeterminado
Requisitos: Conhecimento avançado de conceitos de aplicações responsivas, arquitetura de componentes em CSS; Noções de UX para definir padrões para sistemas web internos e externos; Dominar tecnologias da web (HTML5 + CSS3); Desejável conhecimento em semântica, usabilidade e acessibilidade, Experiência com desenvolvimento de aplicações WEB de Front end, Exemplos de outras tecnologias necessárias: JavaScript, jQuery, Ajax, Bootstrap, Angular, HTML5, CSS3, Photoshop, Illustrator, Design Mobile; Conhecimento em controle de versão SVN e/ou Git; Facilidade para aprender novas tecnologias.

3 – Desenvolvedor Front-end Sênior

Local de Trabalho: Pinheiros
Horário: De segunda a sexta-feira
Regime de contratação: CLT + Vale refeição ou Alimentação, Seguro de Vida Sulamerica, Vale Transporte, Seguro Saude Sulamerica – para funcionarios não tem desconto, caso inclua algum dependente arca com o valor integral dos mesmos.
Tempo de projeto: Indeterminado
Requisitos: Conhecimento avançado de conceitos de aplicações responsivas, arquitetura de componentes em CSS; Noções de UX para definir padrões para sistemas web internos e externos; Dominar tecnologias da web (HTML5 + CSS3); Desejável conhecimento em semântica, usabilidade e acessibilidade, Experiência com desenvolvimento de aplicações WEB de Front end, Exemplos de outras tecnologias necessárias: JavaScript, jQuery, Ajax, Bootstrap, Angular, HTML5, CSS3, Photoshop, Illustrator, Design Mobile; Conhecimento em controle de versão SVN e/ou Git; Facilidade para aprender novas tecnologias.

4 – Desenvolvedor Front-end Sênior

Local de Trabalho: Faria Lima
Horário: De Segunda a Sexta-feira
Regime de Contratação: PJ – indeterminado
Requisitos: Experiência em desenvolvimento de aplicações web utilizando JavaScript e jQuery. Experiência na criação de páginas responsivas, web e mobile. CSS Avançado e CSS3 Experiência em suporte a browsers antigos (graceful degradation), Conhecimentos de Regex Domínio de protocolo (HTTP, HTTPS, cross domain).

5 – Desenvolvedor Front-end Sênior

Local de Trabalho: Campo Belo
Horário: De Segunda a Sexta-feira
Regime de Contratação: PJ – indeterminado
Requisitos:  Experiência com CSS, HTML e Javascript, – CSS, HTML, JavaScript, Jquery e AJAX.
Trabalho em Equipe e vontade de compartilhar conhecimento entre integrantes da Equipe é fundamental.
Analisar e discutir junto ao arquiteto de informação sobre as demandas para desenvolvimento.
Participar de reuniões no cliente, junto ao gestor e equipe técnica, quando necessário.

6 – Desenvolvedor Front-end Sênior

Local de Trabalho: Alphaville
Horário: De Segunda a Sexta-feira
Regime de Contratação: PJ – Indeterminado
Requisitos: Sólidos conhecimentos em HTML, Css, Javascript e frameworks de mercado (jquery, angular).
Preferencialmente HTML 5, Angular 2,Typescript,Angular.

7 – Desenvolvedor Front-end Sênior

Local de Trabalho: Alphaville
Horário: De Segunda a Sexta-feira
Regime de Contratação: PJ – Indeterminado
Requisitos: Conhecimento avançado em Node.js, javascript, HTML, CSS.
EXPERIENCIA COMPROVADA EM MAGENTO, Conhecimento básico em alguma linguagem de programação (Java, .Net, PHP, etc).

8 – Desenvolvedor Front-end Sênior

Local de Trabalho: Alphaville
Horário: De Segunda a Sexta-feira
Regime de Contratação: PJ – Indeterminado
Requisitos: Conhecimento intermediário ou avançado em HTML, CSS, Node.JS javascript; Conhecimento básico em alguma linguagem de programação (java, .net, php, etc).

Interessados, por favor, sinalizar a numeração da oportunidade, encaminhar CV com pretensão salarial para : heloisa.moraes[a]5a.com.br

WordPress 4.7.5 e o que vem por ai com a versão 4.8

Nos últimos dias tivemos vários anuncios importantes referentes ao WordPress 4.8 a nova versão que esta em beta e outros referente a segurança:

Primeiro anuncio a versão 4.8 do WordPress não dara mais suporte as versões 8, 9 , 10 do internet explorer, Matt anunciou em seu blog que o suporte a essas versões está travando o desenvolvimento da plataforma. Todos os fronts comemoram essa decisão.

Ainda sobre a nova versão grandes mudanças foram anunciadas novos recursos para widgets, agora a widget de texto possui  um editor visual por padrão, antes era possível com adição de plugin. Também foram anunciadas três widgets uma de vídeo, audio e imagens.

Core Widgets on Twenty Seventeen

Segundo anuncio, aproveitando o gancho dos últimos incidentes e o grande ataque realizado pelo #wannacry,  o WordPress está engajado na comunidade hackerone. Para quem não conhece hackerone é uma plataforma que os usuários reportam falhas de segurança e recebem bonificações dependendo do nível da falha. Em seu perfil oficial, serão discutidos outros projetos como: BuddyPress, bbPress, GlotPress e WP-CLI. Até o momento 3.700 dolares foram repassados para 7 diferentes reports.

Finalizando, essa semana saiu uma atualização de segurança do WordPress, a versão 4.7.5 ela contém  seis correções de segurança e segundo o WordPress está atualização deve ser  realizada imediatamente. Os updates estão relacionados a nova parceria com o hackerone, são falhas referente a XSS, Cross Site request Forgery e melhorias na XML-RPC API.

Referencias:

WordPress Is Now on HackerOne, Launches Bug Bounties

WordPress 4.7.5 Patches Six Security Issues, Immediate Update Recommended

 

What to Expect in WordPress 4.8

Target Browser Coverage

 

5 dicas para escolher um novo país para viver

No grupo do Front-end br começou discussão sobre morar fora do país, lá eu contei um pouco sobre minha mudança para fora do Brasil. Para quem não me acompanhar atualmente moro em Dublin desde 2016. Neste post vou dividir com vocês 5 pontos que visualizei antes e depois desse processo.

1 – Qual o objetivo desse mudança?

Primeiramente, você precisa ser perguntar quais são seus objetivos a curto e a longo prazo. E listar esses objetivos e tentar entender se a mudança realmente vai solucionar essas questões. Muitas vezes os objetivos de podem ser respondido no país em que você mora. No meu caso a curto prazo queria melhorar o meu inglês que na época era intermediário, isso era um ponto que me encomodava bastante, mas passado um ano morando fora descobri que esse é um quesito a longo prazo, pegar fluência em um idioma que não é seu exige tempo e esforço.

Outro ponto dentro desse curto prazo seria tirar um tempo pra mim, depois de quase 10 anos trabalhando na área eu precisava de um brake para repensar nos próximos anos.

Mesmo muito feliz com o elo7, a empresa que trabalhava antes de sair do Brasil foi no último ano eleita umas das melhores empresas pra se trabalhar:

Eu sentia que precisava de novos desafios, uma virada na carreira poderia ser um mindset para abrir novos horizontes, isso se encaixava na pergunta o que eu esperava a longo prazo, depois de anos trabalhando como funcionário eu queria algo que me motivasse a empreender ou criar um novo negócio. Conhecer outra cultura me visualizar de uma forma diferente em outro ambiente poderia ser um mindset para achar um gatilho para esse projeto.

Ter um objetivo a longo prazo ajuda vc traçar suas metas durante a sua caminhada onde quase todos os dias você irá se perguntar “o que eu estou fazendo aqui?”

2 – Busque informações sobre o local

Parece óbvio mas nem todo mundo tem a grana de visitar todos os lugares antes de decidir morar, o que eu fiz, passei meses assistindo vídeos no Youtube de quem morava nos lugares que pretendia ir:  Australia, Canadá e Dublin. Fiquei atento nos perfils dos youtubers como idade e interesses parecidos com os meus, assim eu tinha informações mais relevantes com meus objetivos.

Também buscava vídeos mais recentes porque eles retratavam um realidade mais próxima, pois 5 anos o panorama da cidade pode mudar bastante. Também procurei informações com amigos cada um da sua contribuição, as informações nesse caso eram bem validas diferente de um youtuber, eram amigos que entendia o seu perfil e as descrições dos lugares tinha um significado maior.

3 – Encontre uma cidade que se identifica com você ou não

A partir das informacões que reuni eu tinha um perfil de casa cidade, Dublin era uma cidade que estava próximo do que eu buscava. Qualidade de vida, um local com uma cultura muito rica, cidade com referência tecnologica, receptividade e integração. Eram os pontos que buscava numa cidade.

4 – A realidade vai diferente de tudo no final

Imaginar um lugar e viver nesse tal lugar exite um gap muito grande. Primeiro ponto reunir informações de outras pessoas não tras a sua realidade, cada pessoa enxerga o mundo de um jeito diferente e por mais informações que você irá reunir seu momento será totalmente diferente. Clima, momento da cidade, seu ciclo de amizades, seu  isso tudo é muito variável. A probabilidades são infinitas, é impossível de prever algo no final. Você pode te algo próximo do planejado, mas  claro depois que você chegar no lugar será sua experiência.

5 – Planeje-se

Todo esse movimento durou dois anos, pois todo custo da viagem eu que banquei. Fiz todas as contas possíveis e todas as cidades pretendidas morar, fiz uma planilha comparando diferentes cidades e diferentes tipos de custos, aluguel, escola, transporte público.

Mesmo com todos os dados levantados muitos custos sao imprevistos. O primeiro mês se gasta bastante você vai montar uma nova estrutura e um novo país. Outros valores que você esperava podem mudar em meses, por exemplo, o aluguel tinha a espectativa de gastar 700 euros num studio foi impossível achar algo nesse valor, quando tinha a concorrência era alta e as exigências eram uma lista infinita.

Em Dublin é uma luta achar um apartamento pra você morar sozinho, depois de dois meses procurando algo, aceitei que iria ter que dividir um ap com outras pessoas, que também é algo que demanda tempo. Esse foi um dos imprevistos, para isso você precisa ter uma segurança financeira.

Um site bastante útil é numbeo ele ajuda a comparar o custo de vida nas principais cidades no mundo. Com ele podemos comparar o custo entre cidades.

Por fim: Toda mudança necessita coragem

Meetups… Meetups… and Volunteer job

In 2013 I used for the first time meetup.com, I was in San Francisco for me was the best opportunity to visit some companies and practice my listening skills. Because the meetups are organized for companies like Google, Microsoft, Facebook, Github.  But my favorite meetups was the language exchange meetups, was the best experience meet people from different countries, was an opportunity to know I a little about different cultures.

2016 I arrived in Dublin and the platform still useful, but here in Dublin has some differences between San Francisco, the first thing the city are totally different, San Francisco has more Asians students, Dublin is full of Brazilians.

For me, the language exchange doesn’t work like San Francisco, because here in Dulin 90% of the group are Brazilians with a beginner or intermediate level. In San Francisco was common find an American trying to learn: Portuguese, Japanese or Spanish. Here is not common Irish engaged with this kind of event.

If you want to practice your conversation skill, try surf groups, running groups or dancing groups. These groups there are more native speakers than a language exchange group. Volunteer jobs also are a great opportunity to integrate with the local culture.

If you are a developer like me, there are more tips for you; the first some IT events need Volunteer, for example, WordCamps.

You can search for WordCamps next to you here:
https://central.wordcamp.org/schedule/

Social media week it is an event about marketing also is possible work as a volunteer:

Get Involved

One Month ago, I started a new volunteer as a teacher in a Coder Dojo in Dun Laoghaire:

https://zen.coderdojo.com/dojo/ie/dun-laoghaire/digital-dun-laoghaire

Basically, I’m teaching programming for children between 07 and 11 years old. It’s is a great opportunity to be integrated into the local community. There we use Scratch, It’s a drag-and-drop code tool, perfect for teaching children because is so visual.

During the Dojo, the children choose the challenge to code using a guide called sushi card.

http://kata.coderdojo.com/wiki/Scratch_Path

The coder dojo Dun Laoghaire happen every Monday at Starbucks Marine Road (beside Nando’s). For me it’s one the best activities during my week, the children are so nice and have the feeling that I’m contributing to something.

Actually, we need more mentors if you are interested just fill the form to be a volunteer: https://coderdojo.com/volunteer/