Agora que o Internet Explorer 8 morreu, e o número de usuários do Internet Explorer 9 é quase insignificante, há uma porção de recursos do CSS que finalmente podemos usar.

Essa é a primeira palestra de uma série, que inclui outros recursos do CSS, HTML5, SVG e Javascript. Em breve publicarei as outras, incluindo vídeos. Enquanto isso, veja os vídeos que publiquei recentemente:

• Introdução ao Terminal do Linux para Programadores
• Criando um script Linux de otimização de imagens para a web
• Curso de introdução ao Vim

O post Yes we can! Minha apresentação no TDC 2015. apareceu primeiro em Elcio Ferreira.

Plugin de Acessibilidade para Twitter Bootstrap. Plugin de código aberto, no GitHub. Promete tornar acessíveis uma porção de componentes Javascript do Bootstrap e, até onde eu consegui conferir, funciona muito bem.

Considere incluir em seu próximo projeto. Considere incluir nos seus projetos antigos baseados em Bootstrap 3. Considere incluir sempre.

O post Acessibilidade para Twitter Bootstrap apareceu primeiro em Elcio Ferreira.

Apresentei hoje cedo uma palestra no GAiN, um encontro de profissionais de comunicação e internet da minha igreja. Há um tempo que venho falando às pessoas que trabalham com internet na igreja sobre os padrões do W3C. Mas hoje tive a oportunidade de falar para gente que trabalha com isso de toda a América do Sul, de uma vez.

Muito obrigado aos organizadores pelo convite. Quem quiser conferir minha palestra no GAiN, sobre as tendências para o futuro próximo da web, pode encontrar a apresentação aqui: aqui.

Não sei se minha palestra foi gravada. Se eles publicarem lá, aviso por aqui.

O post Minha palestra no GAiN apareceu primeiro em Elcio Ferreira.

“There are a lot of very clever responsive table solutions available now. There are solutions that flip the table on it’s side, convert it to a pie chart, gradually reduce the columns, allow users to determine columns, and even allow partial scrolling across the table. All of them are very clever.”

Leia mais: http://www.maxdesign.com.au/2013/03/22/simple-responsive-table/

O post Artigo recomendado: A simple (and very rough) responsive table solution apareceu primeiro em Elcio Ferreira.

Dá uma olhada nesse exemplo. Exibe o código fonte e você vai ver que isso aí foi feito com umas 300 linhas de javascript.

Qual o segredo?

SVG é um formato de XML para a descrição de gráficos vetoriais. O que significa que, diferente do que acontece com canvas, com SVG os objetos que você exibe na tela são de fato objetos, nós do DOM, na árvore do seu documento. Então dá uma olhada nesse outro exemplo. A animação do logo em cima e o gráfico interativo em baixo, tudo isso tem umas 35 linhas de Javascript apenas.

Então fica a dica: estude SVG. Tenho certeza que vai ser útil.

O post Aprenda SVG! apareceu primeiro em Elcio Ferreira.

Veja, por exemplo, a questão da validação do W3C. Algumas páginas do site da Visie não passam na validação do W3C. E a gente não está nem aí para isso. Entenda bem, nós acreditamos na importância dos padrões web. A empresa se chama “Visie Padrões Web”. Mas acreditamos que padrões web são importantes porque tornam seu site acessível, compatível, rápido e indexável. Também são importantes porque formam um excelente conjunto de tecnologias para o desenvolvimento. Desenvolver direito com padrões web é a melhor relação custo X benefício.

Nada disso tem a ver com estar “certo”, politicamente correto, ou com conseguir ganhar um selinho. Tem a ver apenas com encontrar a melhor maneira de deixar meus usuários satisfeitos. Ponto.

O validador é uma ferramenta e tanto. Principalmente para quem está aprendendo HTML ou precisa corrigir um problema misterioso num site. Eu uso muito o validador em treinamentos. Mas ele não é um juiz, um crivo obrigatório sem o qual seu site não deveria nem ser publicado.

Javascript

Javascript é uma linguagem muito flexível, que permite muitas escolhas diferentes de modelagem, de técnica de codificação e até de estilo do código. E isso é um terreno muito fértil para os inventores de regras. Existem mil maneiras de preparar Neston. Nenhuma é mais “certa” do que a outra, o que define o que é certo são seus objetivos.

Não, não estou falando sobre a polêmica dos ponto-e-vírgula no código. Embora esse seja um assunto interessante, não é tão importante. Estou falando de algo mais.

Leia, por exemplo, o excelente artigo do Willian Bruno sobre orientação a objetos. Antes de criticá-lo, preciso dizer que o Willian usou uma abordagem muito didática, e escreveu código impecável. Vale a pena a leitura. A única coisa que eu recomendo ao leitor é que entenda que a abordagem usada não é a única correta.

Começando com o estilo de código para orientação a objetos. Tem gente que escreve construtores de objetos literais, como o Willian fez. Tem gente que escreve funções construtoras, para ser chamadas com new, e atribuem propriedades e valores dentro do construtor. Tem gente que escreve funções construtoras e atribui propriedades e métodos ao seu prototype. Há grandes diferenças de sintaxe e ligeiras diferenças nos resultados obtidos ao usar cada técnica. O ponto é: não escolha as regras de alguém como as suas sem entender primeiro os porquês.

Outro ponto tem mais a ver com a modelagem do que com estilo de código. O Willian usa um pattern bastante popular hoje em Javascript, o Module. E faz com ele controle de visibilidade, fazendo com que apenas um método seja visível fora do módulo. Esse estilo de modelagem, embora bastante popular, está longe de ser o único correto. Embora programadores Java e C sejam incentivados a se preocupar muito com isso, a maioria dos programadores Ruby usa com muita parcimônia o controle de visibilidade e a comunidade Python tem vivido muito bem sem esse recurso. Você pode escrever módulos com excelente nível de encapsulamento sem controle de visibilidade.

A mesma coisa se aplica a quase qualquer escolha em tecnologia. NoSQL não é a bala de prata que vai salvar a próxima geração de ERPs, mas vale a pena conhecer. Os novos recursos do HTML5 não vão tornar a jQuery desnecessária, mas você precisa conhecê-los. O Sublime Text não me fez largar o Vim, mas valeu muito a pena gastar um tempinho para ter uma segunda opção.

Moderação. Não é futebol. Não é religião. É só técnica.

O post Escolha com cuidado suas regras apareceu primeiro em Elcio Ferreira.

Por que esperar?

O HTML5 foi construído de maneira modular. Não é preciso esperar que toda a documentação esteja escrita para começar a trabalhar com ele. Você pode usar agora mesmo o que já está pronto.

Pensando nisso, preparamos este Workshop sobre as APIs do HTML5 e como construir a nova geração de aplicações web. Veja o programa.

O post HTML5: Desenvolvendo agora as aplicações web de amanhã apareceu primeiro em Elcio Ferreira.

O post Site Recomendado: TidBits apareceu primeiro em Elcio Ferreira.

Por que a maioria dos exemplos de site em HTML5 brasileiros, dois anos depois de começarmos a usar esse treco, ainda são um mark-up levemente vitaminado e canvas?

Onde estão nossas aplicações offline? Web sockets? Drag-and-drop? Geolocation? Micro-data? Device orientation? Novos campos de formulário? SVG? History API?

Mas não tem demanda…

Você pode se desculpar por estar usando os mesmos velhos recursos de sempre, dizendo que os clientes da agência ou produtora onde você trabalha não querem os recursos novos, que seu chefe não quer saber dessas coisas, que tem trabalho pra caramba pra simplesmente recortar os layouts que recebe e não quer arrumar sarna pra se coçar…

Você vai mesmo querer passar o resto da vida recortando layouts? O mundo vai mudar, e você vai ser extinto, dinossauro. Se não tem demanda, crie a demanda. Comece a desenvolver projetos pessoais com o que você acha que seus clientes deveriam estar usando. Em seguida, mostre para todo mundo. Você vai ver se a demanda não aparece.

Todo mundo tem celular conectado. Todos os navegadores (até o IE) estão se esforçando para funcionar direito. É um momento mágico. É uma oportunidade que você não quer deixar passar. Um pouquinho de esforço aí, galera.

O post HTML5 é mais que canvas apareceu primeiro em Elcio Ferreira.

Palestra apresentada na TDC 2011. Tentei separar os recursos do HTML5 em quatro grupos:

1. O que você já pode usar hoje;
2. O que você já pode usar hoje, mas oferecendo alternativas Javascript para navegadores sem suporte;
3. O que você já pode usar hoje, mas só para plataformas específicas;
4. O que não sabemos ainda quando poderá ser usado.

O post HTML5: um ano depois apareceu primeiro em Elcio Ferreira.

Semana passada participei de um curso sobre HTML5 ministrado pela w3c Brasil. Nesse curso o Elcio Ferreira foi o instrutor, eu fiquei com uma duvida e fiz uma pergunta para ele sobre a necessidade de incluir a extensão do arquivo na tag <video> para que o mesmo funcione no firefox. Ele me mostrou uma forma utilizando PHP mas infelizmente não consegui obter o codigo.

Os servidores web, quando servem um arquivo, enviam ao navegador a informação de tipo de conteúdo. O header enviado do servidor, para um arquivo Ogg Vorbis, deve ser:

Content-type: application/ogg

Se o servidor não enviar esse header, o vídeo não vai tocar no Firefox. O Apache sabe fazer sozinho, basta que esteja configurado para isso. No Ubuntu, por exemplo, ele já vem configurado para servir ogg.

A saída de scripts PHP é servida com outro tipo de conteúdo. Geralmente “text/html”. Se você serve seu vídeo do PHP, precisa enviar um header no início do script avisando o navegador que esse conteúdo é vídeo. Você pode fazer:

<?php
header('Content-type: application/ogg');
?>

Já se você serve os vídeos como arquivos estáticos, não deve usar PHP para processá-los só para que sejam servidor com o tipo correto. O jeito certo é configurar corretamente o servidor. Se for um hosting compartilhado, eu tentaria um chamado ao suporte pedindo para que configurem isso corretamente antes de fazer com PHP. Ou estudaria mudar de hosting

O post Servindo vídeos Ogg Teora com o Content Type correto apareceu primeiro em Elcio Ferreira.

Nós e o pessoal da Agência Click vamos mostrar um pouco do que já estamos fazendo com HTML5, e você pode assistir ao streaming ao vivo, cujo link será disponibilizado na hora.

Para tuitar, use a tag #cafecombrowser.

O post Amanhã, Café com Browser sobre HTML5 apareceu primeiro em Elcio Ferreira.