Como eu vivo estudando mais e mais, resolvi escrever um post para citar todos os slides de Front-end do OlhóSEO, vamos lá.

Primeiro dia

Eduardo Shiota – Front-end para Ecommerce

Sérgio Lopes – Design Responsivo por uma Web única

Diego Eis – O papel do desenvolvedor Front-end

Almir Filho – Web Audio Hero

Segundo dia

Priscilla Albuquerque – Desenvolvimento em tempos de UX – Como projetar para usuários exigentes

Guga Alves – Otimização Front-end para WordPress

Caio Gondim – HTML5 Sensitivo: Seu browser no plano astral

Bernard de Luna – Modularização CSS

Nando Vieira – Organizando o JavaScript (Redux)

Zeno Rocha – Como Perder Peso (no browser)

O post Slides de Front-end do OlhóSEO apareceu primeiro em Tutsmais.

Programas que você precisa ter instalados

Pra fazer esse Custom Build do jQuery você precisa ter instalado:

• Nodejs.org
• git-scm.com
• gruntjs.com

Tenha certeza que esses programas estão instalados corretamente antes de continuar os passos deste post.

Clone o repositório do jQuery


git clone git://github.com/jquery/jquery.git


Em seguida vá para a pasta jquery que foi criada, e rode o comando:


npm install

Nota: Dependendo do seu sistema operacional, você precisará usar um sudo antes do npm install

Este comando irá instalar todas as dependências do projeto, isso pode demorar alguns minutos dependendo da velocidade da sua conexão.

Depois de todas as depêndencias instaladas você vai ter uma estrutura parecidade com essa aqui:

Agora que já aprendemos como clonar e instalar as dependências do jQuery, vamos fazer nosso primeiro build.

Fazendo o primeiro build do jQuery

Para fazer um build do jQuery apenas rode em seu terminal:

grunt custom


Com este comando várias tarefas serão executadas e finalmente quando terminar, teremos a ultima versão do jQuery pronta para ser usada. Você poderá conferir que uma pasta chamada dist foi criada, essa pasta contém o resultado do build, terá um arquivo chamado jquery.js e outro chamado jquery.min.js com seu jQuery devidamente minificado.

Não é difícil né? Então vamos pro próximo passo

Navegue por diferentes versões do jQuery

Caso você não queira a ultima versão do jQuery, você pode fazer um checkout em uma outra versão do jQuery e fazer um build dela.

Para ver todas as versões do jQuery execute:

git tag


Este comando mostrará uma lista de todas as tags(versões) do jQuery, uma lista semelhante a essa:

Por exemplo se você precisa da versão 1.9.1 do jQuery basta executar:

git checkout 1.9.1

E em seguida:

grunt custom


Assim que as tarefas serem concluídas, você já terá seu jQuery 1.9.1 recém tirado do forno disponível na pasta dist

Fazendo um build passando parâmetros

É neste build que realmente fazemos um “Custom Build” do jQuery. Cada parâmetro que passamos, corresponde a um modulo do jQuery que não será incluído no build, por exemplo se você precisa de uma versão do jQuery sem nenhum método que manipule o CSS, basta executar o comando grunt custom passando -css como parâmetro:


grunt custom:-css


Sem os métodos que manipulam o CSS, nossa versão do jQuery 1.9.1 fica com 76kb, já é bem menos comparado aos 93kb que tem a versão completa.

Algo que você tem que ter em mente, é que quando você coloca um parâmetro ao build, o build também irá retirar todos os modulos que dependem do modulo que você passou como parâmetro. Por exemplo o -css vai retirar também o modulos -effects que contem os métodos .animate(), .slideUp() etc..

Pra você passar mais de um parâmetro é só ir separando por virgula, por exemplo uma versão do jQuery sem os métodos que manipulam CSS e sem métodos que ajudam a trabalhar com Ajax:

grunt custom:-css,-ajax


Essa versão do jQuery ficou com apenas 67kb, bom né?

Conhecendo os modulos que existem

Todos os nomes dos modulos, são atalhos para o código que esta na pasta /src assim temos:

• css: remove o método .css() e .animate() entre outros;
• event-alias: remove atalhos para eventos como .click(), mousemove() entre outros;
• ajax: remove todos os métodos que trabalham com ajax, como .post(), .getJSON() entre outros e também eventos como .ajaxStart()
• ajax/script: depende de: ajax remove a capacidade de carregar scripts via tag script;
• ajax/jsonp: depende de: ajax e ajax/script, remove a cabacidade de carregar scripts de outros domínios;
• ajax/xhr: depende de: ajax retira apenas o XMLHTTPRequest
• effects: depende de: css remove o .animate() e atalhos par ele como .slideUp(), .slideDown() etc…
• offset: depende de: css remove os métodos .offset(), .position(), .offsetParent(), .scrollLeft(), e .scrollTop();
• dimensions: depende de: css Remove os métodos .width(), .height() e as variações de .innerWidth() e .outerWidth();
• deprecated: remove todos os métodos que estão para sair das próximas atualizações do jQuery mas que ainda não foram retirados;
• wrap: remove os métodos .wrap(), .wrapAll(), .wrapInner(), e .unwrap();
• sizzle: remove a Sizzle selector engine do jQuery. Quando este modulo é excluído, é usado outra engine mais simples.

Conclusão

Usar um custom build é muito útil, pra quer usar todo o jQuery se você quer apenas 1 coisa Esperoq que este post tenha sido útil pra você, mais informações sobre este assunto você pode ver no readme do repositório do jQuery.
Até mais.

O post Como fazer um build customizado do jQuery apareceu primeiro em Tutsmais.

Quais funções de cores existem?

Vamos ver algumas funções interessantes:

lighten($color, $quantidade);

Essa função tem como objetivo clariar uma cor, recebe dois parametros o primeiro é a cor a ser manipulada e o segundo é a quantidade de clareamento em porcentagem de 0% a 100%. Por exemplo lighten(#000, 50%); o Sass retorna a cor gray, e se eu por 100% ele retorna a cor white.

darken($color, $quantidade);

Essa função tem como objetivo escurecer uma cor, recebe dois parametros o primeiro é a cor a ser manipulada e o segundo é a quantidade de escurecimento em porcentagem de 0% a 100%. Por exemplo darken(#fff, 50%); o Sass retorna a cor gray, e se eu por 100% ele retorna a cor black

saturate($color, $quantidade);

Essa função tem como objetivo tornar uma cor menos saturada em outras palavras com menos cinza e mais cor, aumentando a luminosidade dela. Recebe dois parametros o primeiro é a cor a ser manipulada e o segundo é a quantidade da ‘desaturação’ de 0% a 100%. Por exemplo saturate(#d14836, 100%) o Sass retorna #ff2508 que é a cor #d14836 sem o cinza.

desaturate($color, $quantidade);

Essa função tem como objetivo tornar uma cor mais saturada em outras palavras torna-la em escala de cinza, recebe dois parametros o primeiro é a cor a ser manipulada e o segundo é a quantidade de saturãção de 0% a 100%. Por exemplo desaturate(red, 100%) o Sass retorna gray e se por 50% ele retorna o meio termo entre red e gray, então retorna #bf4040

invert($color)

Essa função tem como objetivo retorna a cor inversa da cor informada. Recebe apenas um parametro que é a cor que será manipulada. Por exemplo, invert(white) o Sass retorna black e invert(blue) O Sass retorna yellow.

Uma lista completa de funções que manipulam cores você ve na documentação de Funções do Sass.

Tem algumas funções interessante por exemplo red(#bf4040) o Sass retorna o RED do RGB da cor, que no exemplo retornou 191, também tem as funções green($color), blue($color) e muitas outras.

Para que essas funções do Sass serão úteis para meu dia-a-dia?

Pensando em como essas funções podem me ajudar, eu descobri que tem gente que precisa usa-las, e tem gente que não tem a minima necessidade de usa-las.

Por exemplo se você é uma cara que trabalha em uma agência web, onde o desenvolvimento rápido e eficiente para a entrega rápida e de qualidade do projeto é o principal foco, provavelmente você não precisará usar as funções mostradas aqui. Mas se você for um cara que esta desenvolvendo um template de WordPress ou e-commerce ou template de qualquer tipo de website, provavelmente essas funções lhe serão muito úteis por que gerar um novo template, a partir de apenas 1 cor, será extremamente mais rápido!

Para demostrar essa velocidade em gerar templates utilizando apenas uma cor como base, usando o Sass, eu criei um HTML que representa a minha página pessoal no Facebook, confira aqui. e criei algumas outras versões como magenta, verde, e verde marinho.

Para conseguir encontrar as cores que eu precisava, usei essa ferramenta que não é muito boa mas ajudou bastante.

Para você ver as funções que eu usei para criar as variações de cores, acesso o código fonte de um CTRL+F procure por “tenta alcan” que você vai ver cada lugar onde eu usei as funções.

ultima questão

Se você viu que essa funções de cores são fantásticas, talvez esteja se perguntando se também pode gerar imagens adequadas com as cores do novo template. Eu sai a busca de como gerar imagens com Sass e Compass e encontri um plugin chamado compass-magick que permite criar imagens até com degradê, mas para o que eu julgo util para o template, como por exemplo alterar a cor dos ícones de notificações no topo do Facebook isso eu ainda não consegui fazer. Quando eu conseguir eu escrevo um post explicando.

Conclusão

Bom, essas funções são muito bacanas de usar e espero que você tenham gostado do post. Deixe sua opinião ou dúvida nos comentários.

O post Como usar as funções de manipulação de cor do Sass para criar template a partir de apenas uma cor apareceu primeiro em Tutsmais.

if (!('webkitSpeechRecognition' in window)) {
	console.log('Esse browser não suporta');
}

O segundo passo para usa-la(o primeiro passo é testar o suporte) é criar uma instancia do objeto webkitSpeechRecognition, assim:

var recognition = new webkitSpeechRecognition();

Se você testar a nossa variável recognition com console.log, vai ver algumas propriedades e eventos interessantes.

para usarmos a API reconhecendo a fala continuamente e com uma prévia do que esta sendo reconhecido temos que setar as propriedades continuous e interimResults como true:

recognition.continuous = true;
recognition.interimResults = true;

Também temos a opção de setar o idioma do reconhecimento de fala, caso você não informe um idioma a API usará o idioma padrão. Então se você estiver em um ambiente em inglês e querer testar a API em português, basta setar a propriedade lang para pt-BR assim:

recognition.lang = 'pt-BR';

A API tem alguns eventos bem intuitivos como:

recognition.onstart = function() { ... };
recognition.onresult = function(event) { ... };
recognition.onerror = function(event) { ... };
recognition.onend = function() { ... };

e também alguns métodos como start e stop para parar e começar o reconhecimento de fala. Se nós executarmos o método start:

recognition.start();

O browser vai mostrar uma barrinha pedindo permissão para usar o reconhecimento de fala, e assim que você começar a falar a API vai começar a disparar o evento onresult, esse evento nos passa alguns dados interessantes e os dados principais que precisamos esta nas propriedades results e resultsIndex, para acessamos o resultado do reconhecimendo de fala basta fazer o seguinte:

recognition.onresult = function(event) {
	console.log(event.results);
	// event.resultsIndex
};

A propriedade results, é um array com objetos em que cada item do array contem um possível resultado do reconhecimento de fala, podemos verificar se já é um resultado final ou não através da propriedade isFinal que é booleana.

Uma característica dessa API que você deve manter em mente é que ela inicia com a propriedade results vazia, e a cada resultado bem sucedido é adicionado um item a ela, por isso que a propriedade resultsIndex é importante, para evitar usar o resultado de uma outra fala, em uma fala atual.

Então se você pretende usar essa API para escrever em um textarea por exemplo poderá fazer mais ou menos assim:

	recognition.onresult = function(event) {

	    for (var i = event.resultIndex; i < event.results.length; ++i) {

	      if (event.results[i].isFinal) {

	      	// Resultado final
	        resultadoFinal += event.results[i][0].transcript;

	      } else {
			
			// Resultado provisório
			event.results[i][0].transcript;
	      }
	    }
	};

Basicamente a Web Speech API é isso, se você esta louco para ver uma demonstração, Glen Shires desenvolveu uma demonstração que você escreve emails com essa API e Brandom Nicholls desenvolveu um joguinho de perguntas e respostas bem legal. A API esta evoluindo, acredito que logo teremos demonstrações inspiradas no Googles Glasses, com comandos de voz fantásticos.

Se você quiser ficar ligado nas novidades dessa API e outras APIs, participe do grupo Chromium HTML5 e de uma olhada na lista de discussão da W3C

O post Introdução a Web Speech API apareceu primeiro em Tutsmais.

Primeiro entenda o que é um Static Server

Um Static Server, é um servidor que trabalha apenas com arquivos estáticos, arquivos estáticos são arquivos que não ‘compilados/executados’ no servidor, então HTML, CSS e JS são arquivos estáticos assim como imagens, XML e deve ter outros linguagens. Um arquivo PHP por exemplo não é um arquivo estático, por que ele é ‘compilado’ no servidor e depois servido para o client.

Basicamente um Servidor Estático é um servidor apenas com um protocolo HTTP e nada mais.

Vamos instala-lo é muito fácil.

Instale o Node.JS

Se você não tem o Node.JS instalado acesse nodejs.org/download/ baixe e instale, tem para Windows, Mac, Linux e até outros =s A instalação é muito simples, e se tiver problemas tem muita coisa no Google que fala sobre isso.

Depois que você instalar o Node.js você terá no seu Terminal ou CMD o comando npm e a maioria das coisas que você instala com o npm install ficará disponível para você usar como um comando, assim como no exemplo que você vai ver abaixo

Instale o pacote http-server do Node.JS

Temos que instalar o pacote http-server do Node.JS, para instala-lo apenas rode em seu terminal.

npm install http-server -g

Se tiver algum problema na instalação tente usar o sudo.

Como usar

Acesse a pasta que esta os arquivos de sua aplicação, por exemplo:

cd /var/www/como-usar-um-static-server/

É onde esta o index.html, seus arquivos CSS e JavaScript, em seguida inicie o http-server com o comando:

http-server ./

Agora basta acessar localhost:8080 que sua aplicação estará rodando perfeitamente ;D

Na parte ./ você deve especificar o caminho da pasta que será a raiz do servidor, no caso ./ significa que a pasta que você esta, será a pasta raiz. Então se você rodar:

http-server /var/www/como-usar-um-static-server/

Funcionará maravilhosamente bem

Conclusão

Bom pessoal é isso, espero que isso seja útil para vocês e que ajude a vocês testarem coisas muito mais rápido, para saber mais sobre o http-server acesse a página em npmjs.org/package/http-server/.

Até o próximo.

O post Como testar suas aplicações com HTML, CSS e JS de forma rápida e fácil com o http-server do Node.js apareceu primeiro em Tutsmais.

O Redesign ficou fantástico e avale a observação que é apenas um protótipo, ou seja, os links e formulários nada funciona.

Antes:

Depois:

Minha opinião é que inovar é preciso, ainda mais um site com tanta gente acessando e amando como este, por que deixar um visual grotesco, mesmo que o visual não importe, o conteúdo é fantástico, por que não apresantar esse conteúdo fantástico de uma maneira fantástica, não?

O twitter do cabloco que fez essa obra de arte é @lensco e se você quiser acessar o redesign dele basta acessar caniuse.lensco.be/

O post Redesign do Can I Use apareceu primeiro em Tutsmais.

A comunidade do GIT, traduziu todo o livro PRO GIT em português do Brasil, e isso é muito bom por que todos nós agora poderemos aprender a usar o GIT diretamente da fonte e em português.

Para começar a ler o livro do GIT, acesse http://git-scm.com/book/pt-br e torne-se um ninja no GIT.

Isso é muito melhor que um tutorial, um tutorial é uma coisa básica, com o livro do GIT você vai simplesmente aprender tudo sobre o GIT por que o livro diz tudo sobre o git, não é como um simples tutorial. Se bem que em alguns casos os tutoriais ajudam muito né? rs

=D

O post Como aprender a usar o GIT? apareceu primeiro em Tutsmais.

Que o Firefox OS esta ai todos já sabem, mas por que você ainda esta com um pé atrás com o Firefox OS? Bom isso eu não sei, mas aqui vou citar 4 razões que me fazem amar o Firefox OS e que provavelmente vai te encantar também(ou não). Vamos ao primeiro fato que torna o Firefox OS tão incrível.

1 – Os aplicativos são desenvolvidos com HTML, CSS, JavaScript

Ou se você preferir, HTML5, CSS3 e JavaScript é isso mesmo querido leitor(a). A intenção é que todos os Apps sejam desenvolvidos com essas tecnologias, hoje já conseguimos desenvolver para o iOS e Android usando HTML, CSS e JavaScript, mas temos que usar um empacotador como o PhoneGap, para o App funcionar no iOS e Android e outros sistemas, já o Firefox OS você vai desenvolver em HTML, CSS e JavaScript e pronto essa é a linguagem nativa.

No futuro poderemos desenvolver para qualquer dispositivo(se ainda existir a limitação do dispositivo) usando uma só linguagem, uma linguagem livre e aberta(sabe qual né?), sem precisar fazer o que acontece hoje, que é ter 10 dispositivos e ter que criar do zero 10 vezes o mesmo app em 10 linguagens diferentes.

2 – O Firefox OS é feito com HTML, CSS e JavaScript

Se você estava achando fantástico a ideia de desenvolver Apps para o Firefox OS em HTML5, pasmem! Toda a interface do Firefox OS é desenvolvida com HTML5, o sistema é muito simples, segundo a Wikipédia, no Firefox OS existem 3 camadas, a mais baixa que é um Kernel Linux que faz a comunicação com o Hardware, depois vem uma segunda camada que é o Gecko que responsável pelo funcionamento o HTML, CSS e JavaScript, e a terceira camada é o Gaia, que é toda a interface gráfica do Firefox OS, tudo desde a tela de desbloqueio até a tela que você digita o número para ligar pra alguém é o Gaia, e é tudo desenvolvido com HTML5.

3 – Os aparelhos com Firefox OS serão baratos

Se você acha caro um Smartphone decente por mais de 1500R$ no Brasil, o terceiro(talvez o primeiro) motivo segundo minhas fontes(Google) que me deixou (loucamente)apaixonado pelo Firefox OS, é que os caras querem atingir o povão, li que os primeiros Smartphones com Firefox OS estariam saindo por pouco mais de 300R$ e que a intenção é ser barato mesmo, sabe o que isso significa? Na minha opinião significa adesão em massa, quando um cara compraria 1 iPhone 5(que hoje esta por 2300 na Tim), ele poderia comprar até 7 Smartphones com Firefox OS, então o povão vai comprar mesmo, vai ter consumidor e a coisa vai crescer. Em alguns blogs diz que os primeiros Smartphones com Firefox OS serão vendido no inicio de 2013, vamos torcer pra que isso aconteça.

4 – Já esta pronto pra você desenvolver aplicativos

“Como assim nem foi lançado ainda, então quando for lançando o meu aplicativo será o primeiro”. Isso mesmo, imagina você sendo o pioneiro em algo, imagina as oportunidades que isso vai oferecer, é fantástico, talvez seja este um dos motivos pra eu estar as 4:10 da manhã escrevendo este post, o site da Marktplace é este aqui e já tem vários aplicativos lá que podem ser testados em qualquer Android através do Firefox Aurora disponível pra download no mesmo site, caraca estou fascinado, olha só estes prints marotos que eu tirei.

Clique nas imagens pra ver em tamanho completo, e atenção que abre em uma nova aba.

Conclusão

Bom acho que já foi exitante de mais as palavras anteriores, vou finalizar com uma frase “Vamos botar pra quebrar” e passar pra vocês uma lista de links que provavelmente vocês gostarão de ver:

• Conheça de verdade o Boot2Gecko (ou FirefoxOS)
• Firefox OS
• Build and distribute cross-platform HTML5 apps
• Projete, construa e publique seu aplicativo
• Marktplace

Qualquer observação deixe nos comentários, até mais.

Fonte: Google. As imagens prints meus e reproduções do site Firefox OS

O post 4 motivos para amar o Firefox OS apareceu primeiro em Tutsmais.

Todo Front-end que se preze conhece os comentários condicionais que detecta as versões do Internet Explorer, isso acontece no IE6, IE7, IE8, IE9 e acaba sendo muito simples escrever um CSS especifico para todas as versões visto que o IE tem vários problemas de compatibilidade. Bom, o problema é que o Internet Explorer 10 não tem suporte a esses comentários condicionais, eu sei você esta afim de dar um chute na bunda do Bill Gates mas vamos manter a calma, pra começo de conversa o Internet Explorer 10 vai ter um bom suporte pra um monte de features do HTML5, será maravilhosamente fantástico comparado com o IE9, mas comparado a um Chrome e Firefox, continuará sendo um lixo, e pode ser que você vá precisar escrever CSS só para ele então, chega de papo e vamos ao que interessa.

1º – Media Queries -ms-high-contrast

O Internet Explorer 10 tem uma Media que só ele tem, ai fica fácil escrever CSS só pro Internet Explorer 10 e sem depender de JavaScript pra isso, o snippet fica assim:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* CSS especifico para o IE10 aqui */
} 

E isso funciona perfeitamente, sem bugs, sem brechas.

2º – Testar o -ms-high-contrast por JavaScript

Uma segunda abordagem pra aproveitar essa feature das Media Queries do Internet Explorer 10, é testar por JavaScript e colocar uma classe na tag HTML, o snippet fica assim:

if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {
    document.documentElement.className += "ie10";
}

No CSS você continua fazendo da mesma forma, assim:

.ie10 seletor {
    /* CSS Especifico para o IE10 aqui */
}

Assim você tem um final feliz sempre =D

Conclusão

Acredito que o Internet Explorer 10 será bom o suficiente pra que não precisemos usar essas magias negras, mas se precisarmos vamos usar né? O problema é que não sei se isso vai sempre funciona, e não sei se o Internet Explorer 10 vai ter uma atualização surpresa removendo esse Hack, enfim. Quando sair a versão final do IE10 ai poderemos julgar definitivamente, por hora isso resolve nossos problemas.

Eu sei que existem outros tipos de Hacks pra identificar o IE10, mas este foi método mais eficiente, curto e grosso que eu identifiquei, não vou perder o meu tempo escrevendo algo que não será útil pra você =D Haaa antes que eu me esqueça, este hacks eu encontrei aqui.

É isso ai, espero feedbacks nos comentários, até mais.

O post Como escrever CSS só para o Internet Explorer 10 apareceu primeiro em Tutsmais.

Reprodução de Usabilidoido

De quem é a ideia

A ideia é de um cara chamado Ian Devlin(será que o nome tem algo a ver com development line? Morreremos sem saber) e ele postou toda a ideia que ele teve aqui, este post não é nada a mais que uma reprodução da ideia dele.

Qual a ideia?

Bom, quando colocamos audio e vídeo no HTML, nós definimos os sources de cada uma certo? Quando a pagina é carregada acontece uma especie de seleção, em que o browser define qual será o source que ele usará, então não importa quantas tags source você usa nas tags audio e video, ele apenas irá carregar o que tem de ser carregado, pode ter 14 tags source com 14 formatos de videos ou audio diferentes que ele só carregará um deles, que é o que ele precisa.

Essas tags source aceitam um atributo chamado media, “responsivelmente” falando, todos que estão lendo este post sabem que o que são media queries certo? Se você não sabe o que é, leia este post e assista este Webinar sobre design responsivo do DevCast e depois volte a ler este post(ou simplesmente ignore as dicas). Usando este atributo media na tag source é possível carregar um determinado tipo de audio ou video, conforme as condições da tela detectadas, então se detectar uma tela enorme com mais de 1200px eu posso servir um video com tamanho maior, e se for uma tela pequena tipo menos de 400px eu posso servir um video com tamanho menor.

Bom, mas o que as tags de audio e video tem a ver com detecção nativa para imagens responsivas? Tudo, a verdade é que com video e audio já temos como detectar nativamente e servir um conteúdo mais adequado, para o dispositivo que o usuário esta usando, mas com imagens não! Ai você pode pensar, audio e um tipo de midia, video é um tipo de midia e imagens, bom, até onde eu sei imagens também são um tipo de mídia , logo seria justo eu poder usa-las da mesma forma(ou semelhante) que audio e video, mas isso não acontece.

A gambiarra que funciona que Ian bolou

Visto que com videos o atributo media funciona perfeitamente, ele decidiu tentar converter uma imagem em um video e então colocar uma imagem-video em uma tag video, claro que isso é uma gambiarra mas é só pra provar que é uma boa ideia.

Então, ele encontrou um web site que faz essa conversão, que é este aqui e gerou algo assim:

<video> 
   <source type="video/webm" src="african-elephant-small.webm" media="all and (max-width:36em)"> 
   <source type="video/webm" src="african-elephant-med.webm" media="all and (max-width:48em)"> 
   <source type="video/webm" src="african-elephant-large.webm"> 
</video>

Ele também colocou este exemplo online pra vocês testarem, vejam aqui, haa este exemplo ele fez apenas com formato “.webm” e para você testar, redimensione o seu browser e atualize a pagina, se você apenas redimensionar nada vai acontecer, a magica acontece apenas assim que a pagina é carregada.

Conclusão

Novamente vou explicar que o teste que ele fez colocando uma imagem como video foi só em caráter de teste, é claro que não faremos assim, mas acredito que essa ideia tem potencial, por que não né? Alias é bem simples, já que estamos acostumados com a sintaxe para inserir audio e video por que será diferente para imagens?

Qual sua opinião sobre isso?

O post Imagens responsivas nativas apareceu primeiro em Tutsmais.