Incorporando documentos PDF e apresentações eletronicas em paginas HTML

Introdução

Os documentos PDF (Portable Document Format), e as apresentações eletrônicas(Documentos gerados pelo OpenOffice Impress e MicroSoft PowerPoint) são documentos em formato digital que podem ser incorporados em paginas que comportam a codificação HTML, e isto inclui uma gama de variações, como JSP, PHP, Servlets, e por aí a fora.

Exemplo de documentos incorporados:
Apresentação eletrônica:
http://brito.blog.incolume.com.br/2011/06/pesca.html
PDF:
http://brito.blog.incolume.com.br/2011/10/varnish.html


como fazer

Para incorporar o documento, acrescenta-se a tag iframe, que cria uma área subalterna na codificação HTML, exemplo:
<iframe frameborder="0" src="caminhoDocumento" style="height: 700px; width: 510px;"> &lt;p&gt;&amp;amp;lt;br /&amp;amp;gt; &lt;/p&gt;
</iframe>
  • O frameborder="0", configura a não apresentação de borda;
  • O src="caminhoDocumento", configura o caminho onde será encontrado o documento, se o documento estiver no mesmo servidor, o caminhoDocumento, será o path do arquivo, que pode ser relativo ou absoluto, como anexos/documento.pdf; ou se o documento estiver na web, será a url do arquivo;
  • O style="height: 700px; width: 510px;", configura as dimensões da subjanela iframe no estilo css, que neste caso é 700 pixels de altura e 510 pixels de largura;


O modelo acima cria uma subjanela em formato retrato, para configuração em formato paisagem, pode utilizar-se do seguinte código:
<iframe width="100%" height="500px" frameborder="0" src="caminhoDocumento"></iframe>


Observe que este segundo modelo, as dimensões não foram configuradas por estilo CSS, e apenas foi reduzido a altura da apresentação de 700px para 500px (height="500px"), e fixado a largura em 100%(width="100%") da área disponível.

Outra alternativa é utilizar a API do Google para exibir os teus Documentos Eletrônicos, a qual traz um Gadget com diversos recursos, como paginação, controle de zoom e abrir em nova Janela.
<iframe style="WIDTH: 100%; HEIGHT: 700px" src="http://docs.google.com/gview?url=caminhoDocumento&embedded=true" frameBorder=0> </iframe>
  • Note que em src="http://docs.google.com/gview?url=caminhoDocumento&embedded=true", possui a URI da API do Google, que permite agregar o Gadget, em qualquer página HTML;


extras

Para quem não está familiarizado, os códigos &gt; &lt; &amp; são representação de caracteres em HTML, que podem ser aprofundados no documento abaixo:

conclusão

Atualmente que a informação está na Web, e a nova geração de computadores pessoais são diskless, os quais não possuem disco ou possuem muito pouco espaço para armazenamento de informação, como os netbooks, tablets e smartfones, é essencial que quem publica conteúdo possa se adequar e possibilitar acesso as novas modalidades de conexão web, na busca de conhecimento.

Atualizações

16/10/2011; 19/10/2011

Comentários