Wordcamp Dublin 2017

Hi all, last year I arrived in Dublin and had a chance to participate on three Wordcamps in Europe. London, Vienna, and Belfast. The last one I did a presentation, was crazy because I replace a speaker 12 hours before the presentation. But in the end was nice the support that the community gives me, and I did my first presentation in Europe.

And this year I was selected to do a presentation on WordCamp Dublin 2017 will be my first WordCamp this year, Dublin is special because is a huge IT polo and Europe and a WordCamp here has a special meaning.  The event happens during two days  14 and 15 of October, two days talking about: Theme development, Boilerplating, Accelerated Mobile Pages, Content, SEO, Workflow, and E-commerce. You can check the schedule here:

Schedule

Who knows the WordCamp, know the price is so low compared other events. The tickets are priced at  €35.

Tickets

So have a look and see you there!

Almost one year…

On January I arrived in Ireland as an employee, arrived during the winter something that I already experienced here. But was different than the first time here. My friends the big part came back to Brazil, my flatmate changed a bit. The new routine was an intensive learning time.

After 6 months my connections with Brazil started to be more memories, my life move and the life of my friends also move. I tried to make more connections here in Ireland, connect my life with that new place, a and started to look for some social activity and I found the Coder Dojo was the best thing that I discovered to do on my free time.

The summer arrived and I went for the first time to a beach in Dublin, was I nice experience, a perfect sunny day it is a big event in Dublin, but the best thing is to see that everybody changes, some of them took a day off just to chill out in the sun. Some Irishes with red faces, wearing summer clothes and with a big smile.

I bought my first bike in Ireland, start to cycling to work a big part of the path close to the sea, really relaxing activity before work. I really love to do it. The problem has energy to cycling 28km every day(14km each way). My English is better but I have a long path to few comfortable with that. A work routine changes a lot and now I have more non-Brazilian friends this let me speak more English, this helps a lot.

It’s fall again new cycle start and now I few more prepared for that.

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:

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():

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

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

 

Microdata

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