Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Fredson Nunes Jr.

Sobre Data URI scheme

Por , em Desenvolvimento frontend

Recommended Posts

Fredson Nunes Jr.    0

Fredson Nunes Jr.
Postado

Vamos as dúvidas, não sei se este é o fórum correto para postar esse tipo de coisa.

 

Um tempo atrás eu vi um ReadMe do hook de um amigo, achei bem legal o ReadMe, uma das coisas que me encantaram foi o tal código que vi: "data:imagem...", ele mostrava a logo da comunidade, comecei a me questionar pois nunca vi aquela URL ou sequer algo do tipo. Pensei em perguntar pra ele, mas acabei por desistir e fui procurar eu mesmo. Achei na wikipédia e na internet artigos, mas nada ensinando a criar... Passado um tempo achei um programa que cria, acabei utilizando e vi que funcionou. Agora veio umas dúvidas na mente.

 

É possível criar páginas da web utilizando só Data URI? (Sei que há incompatibilidade com alguns navegadores)

Se eu gero uma imagem Data URI, ela aparece nos computadores dos outros? Eu fiz o teste, um disse que não deu nada, o outro também, mas passou um tempo, ele acessou novamente e apareceu. Aí fica as dúvidas, como realmente funciona isso.

Compartilhar este post

Link para o post
Compartilhar em outros sites

mangakah    217

mangakah
Postado

Você já leu o artigo sobre data uri na Wikipédia em inglês?

:seta: http://en.wikipedia.org/wiki/Data_URI_scheme

(tem informações detalhadas sobre data-uri)

 

Uma dica: você precisa encodar o conteúdo da imagem em base64. Você pode fazer isso usando várias linguagens de programação (no artigo da Wikipédia há vários exemplos em linguagens distintas) ou usar uma ferramenta online como esta:

:seta: http://www.motobit.com/util/base64-decoder-encoder.asp

 

Compatibilidade

Basicamente todos os navegadores suportam, mas no IE, apenas a partir da versão 8. Há um hack para fazer data-uri funcionar também nas versões 6 e 7:

:seta: http://www.phpied.com/the-proper-mhtml-syntax/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fredson Nunes Jr.    0

Fredson Nunes Jr.
Postado

Li sim, falei isso no tópico.

 

Consegui um programa como já disse também, mas obrigado por esse site, vou utilizá-lo também hehehehe.

 

Valeu por esse hacker, vai ser útil um dia.

 

É possível criar páginas da web utilizando só Data URI?

 

Se eu gero uma imagem Data URI, ela aparece nos computadores dos outros?

Só isso que eu queria que fosse respondido.

Compartilhar este post

Link para o post
Compartilhar em outros sites

mangakah    217

mangakah
Postado

Ok... vou tentar responder:

 

1 - Sim. No artigo da Wikipédia mesmo há um exemplo de uma janela pop-up o com conteúdo todo na URL usando Javascript.

 

Mas isso não é recomendável, pois o endereço fica muito grande e alguns navegadores podem não entender a data-uri. Data-URIs são usadas geralmente para imagens encodadas em base64. Você pode criar uma página web com todas as imagens embutidas no código através de Data-URI. Você também pode colocar as imagens em arquivos CSS (no atributo 'background').

 

 

Um exemplo com PHP:

$html = "<!doctype html>
<html>
 <head>
   <title>Data URI</title>
 </head>
 <body>
   <p>Olá, este é um exemplo de HTML em data-uri!</p>
 </body>
</html>";

echo '<a href="data:text/html;charset=utf-8,' . rawurlencode($html) . '">Clique aqui</a>';

 

Retorna:

<a href="data:text/html;charset=utf-8,%3C%21doctype%20html%3E%0D%0A%3Chtml%3E%0D%0A%20%20%3Chead%3E%0D%0A%20%20%20%20%3Ctitle%3EData%20URI%3C%2Ftitle%3E%0D%0A%20%20%3C%2Fhead%3E%0D%0A%20%20%3Cbody%3E%0D%0A%20%20%20%20%3Cp%3EOl%C3%A1%2C%20este%20%C3%A9%20um%20exemplo%20de%20HTML%20em%20data-uri%21%3C%2Fp%3E%0D%0A%20%20%3C%2Fbody%3E%0D%0A%3C%2Fhtml%3E">Clique aqui</a>

 

Ao clicar no link "Clique aqui", é exibida a página HTML com o código que está na URL.

 

2 - Sim, desde que eles estejam usando um navegador que tenha suporte a Data-URI. Mas se você quer dizer se a imagem é exibida fora do navegador, a resposta é não. Data-URIs foram criadas especificamente para páginas da web.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito