Tableless.com.br - Web Standards com Arroz e Feijão

Podcast #2 – Acessibilidade

diego@tableless.com.br (Tableless.com.br) — Fri, 01 Jun 2012 12:35:59 +0000

Falamos um pouco sobre Acessibilidade. Quais podem ser suas atitudes para melhorar seu projeto e tornar a web um pouco mais acessível. Falamos sobre o que e por que fazer um código acessível e mesmo assim achamos que este podcast ficou um pouco superficial. Estamos planejando fazer outro sobre o mesmo assunto, alguma hora. Enjoy!

Participação do @diegoeis, @alyssonfranklin, @reinaldoferraz e @paulorodriguesw

Download do Arquivo.

Posts Relacionados

“HTTP Archive” Ferramenta para performance

diego@tableless.com.br (Tableless.com.br) — Wed, 30 May 2012 14:50:32 +0000

Este é o primeiro post sobre um tema que ainda não temos falado muito aqui no tableless, mas é um tema muito importante tanto para nós Front-end quanto para Back-end’s que é a performance. Hoje mostrarei uma ferramenta para analisar a performance do seu projeto web.

A ferramenta HTTP Archive

Este projeto iniciou-se no começo de novembro de 2010, através de análises de Urls e armazenamento de suas informações (subresource URLs, HTTP headers, sizes, etc.) em banco de dados. Falando em resumo do que se trata essa ferramenta: ela grava os dados de seu site e retorna toda uma lista com esses dados tais como Page Speed, Requests, status entre outros. Ele também gera esses dados para download, facilitando a analize. O mais legal é o Filmstrip de video, onde é gerado thumbs, mostrando o que o usuario está vendo a cada segundo que seu site esta sendo carregado. Ele mostra também uma trend do seu HTML, CSS, JS que esta sendo carregado com um gráfico.

Essas são umas das opções que ele dispões e vale a pena o uso da ferramenta. Ajuda muito para aqueles que querem ter uma analize sobre o seu projeto, isso pode ser que para alguns não é util como para site institucionais onde o cliente pouco importa com isso, mas para aqueles que se importam ou trabalham em algum portal ou sistema grande.

Missão do HTTP Archive

Instituições bem sucedidas reconhecem a necessidade de registrar sua história – isso fornece uma maneira de rever o passado. Em 1996, Brewster Kahle percebeu o significado “cultural” da internet e a necessidade de registrar sua história. Como resultado ele fundou o Internet Archive que coleta e armazena permanentemente conteúdo digitalizado da web.

Além do conteúdo das páginas web, é importante registrar como esse conteúdo digitalizado é construido e servido. O HTTP Archive fornece esse registro.

Em novembro de 2011 o HTTP Archive começou a aumentar os registros de Urls de 10k para 25k, 50k, 75k, e agora neste mês chegaram a 100 mil, o objetivo do HTTP Archive é arquivar 1 milhão de Urls até final de 2012.

Como usar? Como funciona?

Bom é bem simples de usar e com pouco tempo “brincando” com a ferramenta é possível ter uma análise legal do seu site.

Para usar a ferramenta você precisa entrar no HTTP Archive e adicionar a URL do site que deseja analisar, você deve esperar uns 5 dias para que o site seja adicionado e depois ele será incluindo nos próximos rastreamento.

Estou fazendo alguns testes no site onde trabalho (Peixe Urbano), então vou colocar o link para que você de uma olhada nos dados que ele retorna. Veja aqui os dados do Peixe Urbano no HTTP Archive.

Mais comentados

Eventos Front-end que você não pode perder em 2012

diego@tableless.com.br (Tableless.com.br) — Wed, 30 May 2012 11:38:04 +0000

Esse tem sido um ano bem agitado para comunidade de desenvolvimento front-end por todo o nosso país. A popularidade que o JavaScript alcançou graças a iniciativas como HTML5 e NodeJS foi simplesmente assustadora, despertando o interesse de empresas e desenvolvedores para o assunto.

Desde o início do ano já tivemos diversos eventos focados apenas em front-end e que fizeram um maior sucesso por aí. Logo em janeiro rolou o BeagaJS em Minas Gerais, depois veio o RSJS que rolou em março na cidade de Porto Alegre. Ainda no mês de março teve o SampaJS na capital paulista e em abril tivemos o PernambucoJS em Recife, isso sem contar nos encontros mensais do Rio.js.

Rolou de tudo, muito aprendizado, troca de experiências e networking, mas se você perdeu algum e/ou quer ficar ligado nos próximos que vão acontecer por aí, fica ligado nessa agenda com as melhores dicas que preparamos pra você.

Front in Rio – 02/06

Pra começar tem o Front in Rio, que chega na sua segunda edição com nomes de destaque no mercado.

Bernardo Heynemann (@heynemann) vai desmistificar alguns mitos sobre Responsive Design e ainda contar sua experiência na implementação dessa técnica na home da Globo.com. Destaque também para o Leo Balter (@leobalter), representante da Mozilla, que vai falar sobre o novo cinto de utilidades do desenvolvedor JavaScript. Entre outros caras muito bons.

As inscrições já se esgotaram e o público estimado é de aproximadamente 150 pessoas. Já o endereço é o mesmo da edição passada, a Universidade Federal do Estado do Rio de Janeiro – UNIRIO, sempre com aquele visual feio, bem aos pés do Pão de Açúcar.

Mais informações: frontinrio.com.br

Front in Curitiba – 23 e 24/06

Pela primeira vez na capital paranaense chega um evento focado apenas em front-end, é o Front in Curitiba comandado pelos mesmo organizadores do Front in Londrina que rolou ano passado.

O evento traz para palestrar nomes como Reinaldo Ferraz (@reinaldoferraz) da W3C e Talita Pagani (@talitapagani) editora aqui do Tableless. E ainda vai rolar mini cursos com o professor Horácio Soares (@horaciosoares), Alysson Franklin (@alyssonfranklin) da IBM, entre outros.

O evento acontece na UTFPR e as inscrições ainda não foram abertas, mas o preço deve girar em torno de R$ 60,00.

Mais informações: frontincuritiba.com.br

Front in BH – 14/07

Em julho tem o Front in BH, que chega na sua segunda edição com um passado de sucesso. A estimativa para esse ano é de cerca de 300 participantes e a grade vem novamente recheada com grandes profissionais.

Vai ter a presença ilustre de Alex Tabor, co-fundador e CTO do Peixe Urbano, Alexandre Gaigalas (@alganet) do Yahoo, Bernard de Luna (@bernarddeluna) da Melt e muitos outros.

Corre lá que as inscrições já estão abertas e giram em torno de R$ 45,00.

Mais informações: frontinbh.com.br

BrazilJS – 30 e 31/08

Já em agosto, se prepare para a maior conferência de JavaScript do universo!

É o BrazilJS que chega em Porto Alegre, depois de uma primeira edição sensacional que rolou em Fortaleza. Para esse ano os organizadores Felipe Moura (@felipenmoura) e Jaydson (@jaydson) estão preparando uma estrutura gigantesca para comportar cerca de 1.000 participantes.

As inscrições ainda não foram abertas e a grade de palestrantes também não foi divulgada. Mesmo assim, espere uma lista repleta de palestrantes internacionais e vá separando seu final de agosto para esse evento, porque eu tenho certeza de que vai ser incrível.

Mais informações: braziljs.com.br

E ainda…

Não acabou amigo, tem muito mais por vir.

A equipe do Tableless está preparando um evento bem legal em São Paulo. O nome ainda não está definido, mas o evento deve rolar em agosto e a estimativa de público é de cerca de 150 participantes, já a inscrição custará em torno de R$ 250,00. Mais detalhes em breve.

Também em agosto e também em Sampa, vai rolar a QCon, conferência relevante no cenário de desenvolvimento de software por todo o mundo. A trilha de web promete, com nomes como Eduardo Shiota (@shiota) e Loiane Groner (@loiane). A inscrição custa cerca de R$ 600,00.

Em julho o TDC (The developer’s conference) inicia seus trabalhos em São Paulo, passando depois em Floripa em setembro e Goiânia em outubro. A trilha de front-end ainda não foi definida, mas sabendo que essa missão está nas mãos do Daniel Filho (@danielfilho), pode ter certeza que vem coisa boa por aí.

Mais informações: thedevelopersconference.com.br

Já em dezembro tem o Front in Londrina, ainda sem definição exata de dia, local ou palestrantes, mas que também promete.

Mais informações: frontinlondrina.com.br

Também em dezembro começa o FEEC (Front-end Engineering Creative Convention) em Recife, já em 2013 visita cidades como Fortaleza e Salvador. Ainda não há informações concretas sobre o evento.

Mais informações: facebook.com/feecbr

E é isso!

Qual desses eventos você vai participar? Esqueci de mencionar algum? Interaja nos comentários!

Nos esbarramos por lá

Mais comentados

JavaScript com café, parte 2

diego@tableless.com.br (Tableless.com.br) — Tue, 29 May 2012 12:00:53 +0000

No artigo anterior vimos as funcionalidades básicas da linguagem CoffeeScript. Falamos sobre variáveis, funções, objetos, condicionais, loops e integração com jQuery. Neste artigo, veremos algumas implementações mais avançadas, com destaque para o conceito de classes.

Splats

Uma função em CoffeeScript pode receber um ou mais parâmetros definidos em sua especificação. Através de splats (…) podemos definir também parâmetros variáveis, ou seja, você pode passar quantos parâmetros quiser. Estes parâmetros serão convertidos pelo compilador CoffeeScript em um array:

1
2
3

lista_autores = (site, autores…) ->
$("#nome-site").text site
$("#autores").text autores.join("," )

O código acima resulta no seguinte JavaScript:

1
2
3
4
5
6
7
8

var lista_autores,
__slice = [].slice;
lista_autores = function() {
var autores, site;
site = arguments[0], autores = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
$("#nome-site").text(site);
return $("#autores").text(autores.join(","));
};

Poderíamos, então, chamar a função lista_autores passando n autores nos argumentos:

1 2	lista_autores "Tableless", "Davi Ferreira", "Diego Eis", "Zeno Rocha" lista_autores "DaviFerreira.com", "DaviFerreira", "Chico Stallone"

Classes

Em JavaScript, classes e objetos são uma coisa só. Um objeto não é uma instância de uma classe, como em outras linguagens. Podemos dizer que tudo é um objeto e existem prototypes. Um prototype é um objeto que possui suas propriedades compartilhadas por outros objetos. CoffeeScript faz uso deste recurso para criar Classes e Objetos.

Vejamos a declaração de uma classe:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

class Jogador
constructor: (nome, time) ->
@nome = nome
@time = time
@jogos = []
Jogador.total_jogadores++

total_jogos: ->
console.log @jogos.length

adiciona_jogo: (jogo) ->
@jogos.push(jogo)

@total_jogadores = 0

Desconstruindo o código, o constructor da classe, compilado em JavaScript, vira uma função com o mesmo nome do objeto. Os métodos total_jogos e adiciona_jogo são prototypes do objeto Jogador. E, por fim, a variável total_jogadores faz referência à classe Jogador, ou seja, ao objeto original que dá origem às instâncias de jogadores. Por exemplo:

1
2
3
4
5
6
7
8
9

j1 = new Jogador "Zico", "Flamengo"
j1.nome # "Zico"
j1.time # "Flamengo"
Jogador.total_jogadores # 1

j2 = new Jogador "Roberto Dinamite", "Vasco"
j2.nome # "Roberto Dinamite"
j2.time # "Vasco"
Jogador.total_jogadores # 2

Portanto, existem três diferentes tipos de propriedades em uma classe CoffeeScript: 1) o constructor da classe, 2) métodos (prototypes) e propriedades referentes à uma instância da classe e 3) métodos e propriedades referentes ao objeto “pai” da classe.

Herança

Em JavaScript, a herança entre classes é feita através do encadeamento de prototypes. Esse encadeamento pode ser bem confuso quando falamos de muitos objetos. A linguagem CoffeeScript resolve esse problema implementando o recurso extends.

1
2
3
4
5
6
7
8
9
10
11
12
13

class Goleiro extends Jogador
constructor: (nome, time) ->
super nome, time
@gols_sofridos = []
Goleiro.total_goleiros++

adiciona_gol_sofrido: (gol) ->
@gols_sofridos.push(gol)

total_gols_sofridos: ->
console.log @gols_sofridos.length

@total_goleiros = 0

Notem a chamada especial super, que invoca o método constructor da classe Jogador. Um objeto Goleiro herda todos os métodos da classe pai (Jogador) e pode ainda sobrescrever e/ou ter seus próprios métodos e propriedades.

Escopo

É comum uma aplicação CoffeeScript vir separada em módulos. Cada módulo, como vimos no artigo anterior, está encapsulado em uma função anônima autoexecutável. E se quisermos compartilhar variáveis e funções entre os módulos?

Para isso, precisamos definir um escopo global, criando um elemento root, por exemplo.

1
2
3
4
5

root = global ? window

root.site = "Tableless"
root.lista_autores = (autores) ->
console.log autores.join(", ")

Dessa forma, qualquer módulo tem acesso à variável site e à função lista_autores.

Switches

Assim como outros exemplos, um switch em CoffeeScript é infinitamente mais bonito e legível do que sua parte original em JavaScript. Como em Ruby, um switch CoffeeScript aceita múltiplos argumentos em um caso:

1
2
3
4

switch time
when "Flamengo" then console.log "Primeira Divisão"
when "Vasco", "Botafogo" then console.log "Segunda Divisão"
when "Fluminense" then console.log "Terceira Divisão"

O resultado em JavaScript:

1
2
3
4
5
6
7
8
9
10
11

switch (time) {
case "Flamengo":
console.log("Primeira Divisão");
break;
case "Vasco":
case "Botafogo":
console.log("Segunda Divisão");
break;
case "Fluminense":
console.log("Terceira Divisão");
}

Operador existencial

Mais uma vez inspirada em Ruby, CoffeeScript implementa o operador existencial “?”. Este operador retorna true exceto se a variável testada for null ou undefined.

1	time = "Flamengo" if primeira_divisao? and campeao_mundial?

Em JavaScript:

1
2
3
4
5

var time;

if ((typeof primeira_divisao !== "undefined" && primeira_divisao !== null) && (typeof campeao_mundial !== "undefined" && campeao_mundial !== null)) {
time = "Flamengo";
}

Como vimos acima ela também pode ser utilizada para definir variáveis. O exemplo abaixo define a variável site com root.site se essa última existir, caso contrário utiliza o valor “Tableless”.

1	site = root.site ? "Tableless"

O operador condicional pode também ser utilizado para evitar uma quebra em encadeamento de métodos. Por exemplo:

1	autor = artigo.retorna_autor?().total_artigos?.nome

Em JavaScript:

1
2
3

var autor, _ref;

autor = typeof artigo.retorna_autor === "function" ? (_ref = artigo.retorna_autor().total_artigos) != null ? _ref.nome : void 0 : void 0;

Desse modo, ao invés de TypeError, o código acima retornaria undefined quando qualquer um dos métodos da cadeia for null ou undefined.

Ferramentas

Através do console podemos executar todas as operações do compilador e gerar nosso código JavaScript. No entanto, algumas ferramentas facilitam esse trabalho através de interfaces gráficas:

LiveReload

Meu favorito é o Live Reload, disponível como uma app para Mac e Windows e um comando para Linux. Além de compilar CoffeeScript, o LiveReload utiliza extensões para os navegadores e recarrega a página quando qualquer alteração é realizada no código (não apenas CoffeeScript).

CodeKit

Lançado recentemente, o aplicativo CodeKit, disponível apenas para Mac, é um concorrente do LiveReload e, além de monitar alterações e recarregar páginas no navegador, conta também com integrações com frameworks, otimização de imagens e validação (lint) de código.

CoffeeConsole

Outra ferramenta interessante é a extensão CoffeeConsole, para Chrome. Esta extensão adiciona um novo painel ao Chrome Developer Tools, possibilitando a execução de códigos CoffeeScript, similar ao console JavaScript já integrado na ferramenta.

Mais CoffeeScript

Essa foi uma visão geral da linguagem CoffeeScript que, recentemente, entrou para o ranking das dez linguagens mais populares no GitHub, desbancando ObjectC.

Finalizando, para aprender mais sobre CoffeeScript, indico os seguintes recursos:

The Little Book on CoffeeScript – Livro disponível na íntegra online e em versões impressa, PDF e para Kindle via O’Reilly.
A sip of CoffeeScript – Curso interativo do pessoal da CodeSchool com vídeos e exercícios online. Bem legal!
Smooth CoffeeScript – Outro livro disponível de graça online e também em PDF. Possui ainda uma versão interativa em HTML5.

Posts Relacionados

Documentos poliglotas com XHTML5

diego@tableless.com.br (Tableless.com.br) — Wed, 16 May 2012 13:35:51 +0000

Quando se começou a falar massivamente a respeito do HTML5, em 2009, muitos desenvolvedores (inclusive eu) torceram o nariz para o fato de poder voltar a utilizar a sintaxe tolerante do HTML, ou seja, tags em uppercase ou sem fechamento, valores de atributos sem aspas, fechar tags em ordem incorreta, entre outros. Inclusive, comentei especificamente sobre isso em um outro artigo.

Grande parte dos desenvolvedores aprenderam e se habituaram a utilizar a sintaxe do XHTML, que segue as diretrizes do XML para documentos bem formados e que apresentariam erros de renderização caso essas diretrizes são fossem seguidas. Isto nos permitia códigos mais limpos e bem estruturados. Porém, no HTML5, a escolha é sua e você não será punido por não fechar tags.

Com toda essa preocupação, no mesmo ano começou a ideia do XHTML5, uma tentativa de contornar o problema, adicionando as restrições de marcação do XML a documentos escritos em HTML5. Podemos dizer que seria uma tentativa de unir o melhor de cada especificação. O artigo escrito por Bruce Lawson para o HTML5 Doctor (com versão traduzida no Pinceladas da Web) foi um dos primeiros a comentar sobre o tema.

Durante cerca de 1 ano isto era uma forma, digamos, marginalizada de tratar essa questão, por não ser algo reconhecido pelo WHATWG / HTML WG. Mas em 2010 surgiu o primeiro draft com a proposta de nortear o uso do HTML5 com a sintaxe do XML/XHTML. O W3C denominou essa metodologia de marcação poliglota.

O que é um documento com marcação poliglota?

Um documento com marcação poliglota é um documento escrito em HTML5 que pode ser processado tanto como HTML quanto como XML dentro de um conjunto de restrições definidas, porém, ainda seguindo a especificação do HTML5. Eles são compatíveis com o HTML e XHTML.

Significa que você pode utilizar todo o poder do HTML5 dentro do padrão de marcação bem formada do XML. É importante ressaltar que isto não afeta as tags que você pode utilizar. Por exemplo, elementos que são considerados deprecated em XHTML mas válidos no HTML5 continuam a ser válidos. Uma exceção é com relação a algumas tags que são excluídas de documentos poliglotas por não serem possível de serem replicadas em um parser XML (como é o caso da tag