Gustavo Ribeiro - Desenvolvedor frontend

Regex para identificar bandeiras do cartão de crédito

Wed, 24 Jul 2019 07:00:00 -0300

Criando um ambiente de desenvolvimento com Vagrant.

Sun, 23 Oct 2016 19:00:00 -0200

Alguns desenvolvedores já conhecem o Vagrant e os benefícios de que eles nos traz para o desenvolvimento em geral, como:

diminuir o tempo de configuração dos ambientes
ambientes leves e portáteis
ambiente idêntico para todos da equipe (versões, configurações, dependências)
e muito mais

Para começarmos, precisamos instalar o Vagrant e o VirtualBox (gratuito e disponível para a maioria das plataformas).

Configurando nosso primeiro ambiente

Para vocês terem ideia do quão simples é montar um ambiente no Vagrant, bastam duas linhas e pronto! Já temos nosso ambiente rodando.
No Mac OS X e no Windows, o comando vagrant é adicionado automaticamente em seu PATH. Nos demais sistemas operacionais precisaremos adicionar /opt/vagrant/bin ao seu PATH.

$ vagrant init

Sempre que iniciamos um novo ambiente com o comando vagrant init, é criado um arquivo de configuração, chamado Vagrantfile, no diretório raiz do projeto e é usado para configurar e definir todo o comportamento de nossa máquina virtual.

Não precisamos entender todas essas configurações agora, por isso iremos apagar tudo e deixar apenas as linhas abaixo

Vagrant.configure(2) do |config|
    # ...
end

O 2, na primeira linha, representa a versão de configuração do objeto config que será usada.

Atualmente existem apenas duas versões: 1 e 2. A versão 1 são configurações utilizadas no Vagrant 1.0.x e a versão 2 para 1.1+ até 2.0.x.

Continuando com nosso arquivo de configuração, vamos dizer ao vagrant qual sistema operacional queremos instalar e que sincronize toda a pasta do projeto com uma pasta em nosso ambiente local. No exemplo, quero fazer o sync do projeto que está em /home/vagrant com a minha pasta em /Users/gustavo/www.

Vagrant.configure(2) do |config|
    config.vm.box = "ubuntu/trusty64"
    config.vm.synced_folder "/Users/gustavo/www", "/home/vagrant"
 end

Nesse exemplo estou utilizando uma máquina com o Ubuntu 14.04 LTS.
O sistema a ser instalado vai da preferência de cada um. Você pode ver uma lista das boxes disponíveis publicamente em https://atlas.hashicorp.com/boxes/search.

Configurações feitas! Agora precisamos subir o ambiente.
Para isso, vamos voltar ao terminal e digitar o comando abaixo:

$ vagrant up

Pronto! Temos nosso ambiente funcionando e sem muito trabalho. :)

Agora podemos instalar o que for necessário em nosso ambiente (php, mysql etc), acessando por SSH, utilizando os comandos habituais do linux.

$ vagrant ssh

Fique atento!

Se você tem o costume de versionar seus projetos, o Vagrantfile é um arquivo que deve ser versionado.
Dessa forma, qualquer pessoa que trabalhe nesse mesmo projeto pode se beneficiar do ambiente sem perder tempo configurando uma nova máquina virtual.

Utilizando as listas: ul, ol e dl.

Wed, 27 Jul 2011 06:00:00 -0300

Estarei começando hoje uma série de, podemos dizer tutoriais, explicações sobre o uso de cada tag xHTML e CSS. Cada tópico terá uma nomeclatura bastante direta sobre o assunto abordado, então vamos ao que interessa realmente.

Para iniciar a sequencia dos tutoriais, resolvi falar sobre listas de ordenação e explicar um pouco mais sobre o uso e cada uma e o porque isso é importante na hora de se desenvolver um site dentro dos padrões w3c.

Listas desordenadas: <ul>

As listas desordenadas são, comumente, as mais utilizadas por todos nós desenvolvedores quando resolvemos criar menus. E porque utilizamos as ul na criação de menus? Simples! Porque, semânticamente, os menus são itens correspondentes a uma lista sem ordenação não se encaixando em qualquer outra tag, semânticamente, a não ser a ul.

Listas ordenadas: <ol>

Idêntica as ul, porém nela temos a obrigação de ordernarmos os itens, seja eles por ordem alfabética, numérica, crescente ou decrescente. Devemos utilizá-las quando queremos criar, por exemplo, um passo-a-passo, uma receita ou até mesmo uma lista de categorias do seu blog.

Listas de definição: <dl>

As listas de definição são as menos utilizadas e pouco entendidas por muitos. Uma maneira bastante fácil e simples para o entendimento da dl é pensarmos em um glossário. Todo glossário possui termos e, cada termos, suas descrições. Para os termos utilizamos dt e para as descrições dd. Uma coisa muito importante na dl é que: nunca termos, em hipótese alguma, um termo repetido com descrições diferentes. Cada termo tem sua descrição única, caso contrário o mesmo não poderá ser um dl, e sim uma ul ou uma ol.

Em tempo, basta sabermos o nome de cada tag para qu possamos entender o seu uso.

Formulários acessíveis utilizando “Label” e o atributo “For”.

Wed, 08 Jun 2011 06:00:00 -0300

Quem nunca ficou irado ao ter que preencher um formulário e só conseguir clicar em cima da bolinha – radio button – de cada opção para fazer sua escolha? Sim, isso realmente irrita. Para isso que existe o atributo for para os nossos form label. Ok, o que seria esse tal de for.

Quando criamos um formulário temos que ficar atentos a, no mínimo, três tags fundamentais para a marcação correta do form, são elas: form, label e a nossa famosa input.

form indicará o início e fim do nosso formulário;
label irá conter todo o respectivo texto de cada campo do formulário;
input nosso formulário em si (campo texto, radio buttons etc).

<form action="/">
    <p>
        <label for="txtNome">Nome</label>
        <input type="text" id="txtNome" />
    </p>
    <p>
        <label for="txtEmail">Nome</label>
        <input type="text" id="txtEmail" />
    </p>
    <p>
        <input type="submit" value="Enviar" />
    </p>
</form>

Reparem que, para cada label, temos um for e, para cada input, temos uma id, ambas com o mesmo valor. Cada id representa uma identificação para cada campo do formulário enquanto cada for representa uma ligação do label com o campo.

Pronto! Já temos todas as ligações feitas, agora é só clicar no texto para que, automaticamente, o campo texto seja selecionado. O mesmo acontece com os demais objetos de um formulário (radio button, checkboxes etc).

Criando formulários acessíveis.

Wed, 01 Jun 2011 06:00:00 -0300

Falar sobre formulários acessíveis se tornou meio difícil por ser um assunto que cada um poderá interpretar de uma maneira diferente. Alguns dizem que o correto é criarmos o formulário utilizando listas desordenadas ul, outros já falam que o correto seria utilizarmos parágrafos p. Utilizar p ou ul? Escolha um e seja feliz.

Para que um formulário seja realmente acessível, precisamos estar cientes da existência de algumas tags básicas e para que elas servem. Vamos a elas:

form cria uma área para a entrada de dados podendo conter campos de texto, checkboxes, radio-buttons etc.
fieldset utilizado para agrupar elementos no formulário. ex: dados pessoais, dados profissionais etc.
legend define um nome para cada fieldset criado.
label define um label para um determinado controle.
input, checkbox e radiobutton elementos de um form.

Conhecida as principais tags, vamos a criação do formulário. Primeiro criaremos a área válida do form:

<form action="/">
    aqui iremos montar nosso form
</form>

Dentro da área criada pela tag form, iremos dividir as informações em Dados Pessoais e Dados Profissionais utilizando as tags fieldset e legend para então adicionarmos os campos a serems preenchidos:

<fieldset>
    <legend>Dados Pessoais</legend>
    <p><label for="txtNome">Nome <input type="text" id="txtNome" value="" /></label></p>
    <p><label for="txtEmail">Email <input type="text" id="txtEmail" value="" /></label></p>
</fieldset>
<fieldset>
    <legend>Dados Pessoais</legend>
    <p><label for="txtNome">Nome <input type="text" id="txtNome" value="" /></label></p>
    <p><label for="txtEmail">Email <input type="text" id="txtEmail" value="" /></label></p>
</fieldset>

Para finalizar, um botão para o envio dessas informações:

<p><input type="submit" value="Enviar" /></p>

Abreviações em xHTML.

Wed, 25 May 2011 06:00:00 -0300

Abreviação já se auto-explica o que é então vou ser rápido e explicar a diferença entre abreviações e acrônimos.

Para muitos, ou até para a maioria, usuários internet tudo é abreviação mas na realidade não é a verdade. Acrônimos são palavras formadas por letras ou sílabas iniciais de uma locução – Ex.: CSS = Cascading Style Sheets – enquanto abreviação é uma forma curta da palavra excrita – Ex.: Av. = Avenida.

No xHTML, a utilização da tag abrr se dá na seguinte forma:

<abbr></abbr>

Para cada abbr gerado, é altamente recomendável, no meu ponto de vista obrigatório, o uso da propriedade title ao qual, com ela, podemos visualizar o significado daquele abreviação ao passarmos o mouse por cima da palavra.

<abbr title="Avenida">Av.</abbr>

Fazendo isso, estaremos ajudando a quem não tem o conhecimento de certas abreviações e faremos nossos sites mais acessíveis e de acordo com os padrões w3c.

[update]

Uma ótima pedida é mudarmos o cursor do mouse, ao passarmos por cima do abbr, para o ícone de help (ajuda).

abbr {cursor: help;}

Criando tabelas acessíveis.

Wed, 27 Apr 2011 06:00:00 -0300

Nosso assunto de hoje, dando sequencia ao tutorial xhtml, será sobre tabelas. Vamos falar um pouco sobre tabelas e como tornar nossa tabela acessível.

Muita gente tem horror a tabelas quando o assunto é tableless, dizem que tabela não deve mais ser utilizadas etc, mas poucos sabem que tabelas devem sim ser utilizadas, porém, com o seu real objetivo que é de mostrar, apenas, dados tabulares e não para criação de layouts.

Para se montar uma tabela em html – xhtml, devemos conhecer suas tags e para que cada uma delas servem.

Conheça as tags:

table delimitador de uma tabela. é com ele que iremos indicar aonde começa e termina nossa tabela. é dentro dela que iremos adicionar título, cabeçalho, rodapé, células e linhas;
caption inserida imediatamente após a <table>, define um título para a tabela correspondente;
thead agrupa linhas de uma tabela definindo o cabeçalho. inserida sempre após a tag caption;
tfoot agrupa linhas de uma tabela definindo o rodapé. inserida sempre após a tag thead;
tbody também agrupa linhas de uma tabela, porém, define seu conteúdo. inserida sempre após a tag tfoot;
tr cria uma linha na tabela;
td cria uma coluna na tabela;
th define uma coluna de cabeçalho na tabela.

Vejamos como fica nossa tabela implementada com as tags acima:

<table>
    <caption>Criando Tabelas Acessíveis</caption>
    <thead>
        <tr>
            <th>Nome</th>
            <th>Site</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Nome</td>
            <td>Site</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Fulano 01</td>
            <td>Site do Fulano 01</td>
        </tr>
        <tr>
            <td>Fulano 02</td>
            <td>Site do Fulano 02</td>
        </tr>
        <tr>
            <td>Fulano 03</td>
            <td>Site do Fulano 03</td>
        </tr>
    </tbody>
</table>

Dessa forma, teremos uma tabela acessível a todos, principalmente quando for utilizado um leitor de tela – jaws por exemplo – e sem sermos confundidos de que coluna vem o dado lido.

Não esqueça de deixar o seu comentário dizendo o que achou desse tutorial.

Interpretando arquivos XML com jQuery.

Thu, 05 Aug 2010 06:00:00 -0300

A alguns dias atrás estive a procura de soluções simples e práticas para se ler as informações de um arquivo xml a partir do jQuery. Sabendo da dificuldade de se achar conteúdos relevantes em nossa lingua nativa para os que não entendem lhufas de inglês, resolvi escrever esse artigo em prol de facilitar o entendimento de todos, então chega de conversa e vamos ao que interessa.

Para início de conversa, nada do que eu escrever abaixo irá funcionar se você, caro usuário, não importar a biblioteca do jQuery em seu código e a melhor maneira para se fazer é pela API do Google.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Feito o passo acima, vamos agora para o xml.

Iremos criar um xml bem simples para que possamos entender o seu funcionamento. Se você não esta familiarizado com xml, veja um artigo sobre as regras de syntax de um xml.

<?xml version="1.0" encoding="iso-8859-1"?>
<sites>
    <site>
        <nome>Site do fulano</nome>
        <url>http://sitedofulano.com.br</url>
    </site>
    <site>
        <nome>Site do ciclano</nome>
        <url>http://sitedociclano.com.br</url>
    </site>
</sites>

Agora que já importamos a biblioteca do jQuery em nossa página e temos conhecimento do xml gerado, podemos iniciar as instruções em jQuery.

Primeiro passo é iniciar o jQuery

$(function() {

});

A partir de agora é onde tudo faz sentido, iniciaremos a requisição ajax do jQuery para ler o arquivo xml. A requisição em ajax possui 4 parâmetro: type, url, dataType e success, sendo o mais importante deles o parâmetro success onde iremos ‘setar’ uma função para receber os dados do xml.

$.ajax({
    type: 'GET',
    url: 'sites.xml',
    dataType: 'xml',
    success: function(xml) {

    }
});

A diversão começa aqui! Agora que já estamos acessando o arquivo xml, é preciso encontrar os dados gravados nele e fazer alguma coisa. Começamos pela leitura dos dados retornados e usando o método find para obter todos os nós que correspondem ao texto que fornecemos (neste caso, ‘site’), e depois usar a função de loop para localizar os nós.

$(xml).find('site').each(function() {

});

Tudo o que resta é fazer com que os dados a partir desse seja impresso na página, para isso utilizaremos a função find para encontrar e obter o texto dos nós. Para o exemplo, irei simplificar retornando apenas os dados do usuário e do conteúdo do twit.

var nome = $(xml).find('nome').text();
var url = $(xml).find('url').text();
$('<p></p>').html(nome+'<br />'+url).appendTo('#wrap');

Pronto! Nosso código final, completo, deve ser algo como o abaixo:

$(function() {
    $.ajax({
        type: 'GET',
        url: 'sites.xml',
        dataType: 'xml',
        success: function(xml) {
            $(xml).find('site').each(function() {
                var nome = $(xml).find('nome').text();
                var url = $(xml).find('url').text();
                $('<p></p>').html(nome+'<br />'+url).appendTo('#wrap');
            });
        }
    });
});