Linguagem PHP: 2ª Parte (Gerando o PDF) – Gerar um documento em PDF usando a biblioteca FPDF.


Olá pessoal, dando início a 2ª parte que é a criação do script PHP para gerar a página em PDF. Vamos utilizar a biblioteca FPDF, uma das mais conhecidas e usadas, para configurar a página PDF. As ferramentas utilizadas foram: O IDE Netbeans 6.9 (Oracle) e servidor web XAMPP (Apache) para testar e rodar as páginas. Hoje, poderíamos dizer que há mais pessoas usando o NetBeans do que qualquer outro IDE, a comunidade está prosperando, melhorando e crescendo de maneira vertiginosa e sempre com grande adesão por parte dos desenvolvedores. O Apache é um servidor web extremamente robusto, configurável e de alto desempenho, é também o mais bem sucedido servidor livre. Use as ferramentas que achar melhor ou tiver domínio.

Gosto de fazer as coisas bem organizadas, então para começar crie um projeto (pasta) com o nome GerarPdf, adicione os arquivos MetasTags, index.php e estilo.css que foram mostrados no post passado, 1ª parte. Nesse tutorial utilizei 3 imagens, são elas:

Baixe as imagens do tutorial aqui

Agora vamos dar início ao script chamado PaginaPdf.php. Precisará baixar a biblioteca FPDF, click aqui para baixar. Abra um arquivo PHP insira os códigos de abertura , insira um comentário breve sobre título, autor, e-mail e data. Para fazer comentário de múltiplas linhas utilize /**/, por exemplo:

/*
 *******************************************************************************
 *     JBWEBMASTER - Gerar um documento em PDF usando a biblioteca FPDF        *
 *                AUTOR: JOAO BATISTA DANTAS BEZERRA JUNIOR                    *
 *                E-MAIL: jbtrab@gmail.com                                     *
 *                        DATA: 28/09/2010                                     *
 * *****************************************************************************
 */

Depois de baixar a biblioteca coloque-a no mesmo projeto (pasta) GerarPdf, como ela está em arquivo zip, extraia para a pasta GerarPdf, agora na página PHP insira a biblioteca usando require ‘BibliotecaFPDF/fpdf.php’; , o require é idêntico ao “include” exceto em caso de falha que irá produzir um nível de erro e irá parar o script. Feito isso defina a fonte, define (‘FPDF_FONTPATH’, ‘BibliotecaFPDF/font/’); , se o arquivo que corresponde à fonte solicitada não existir, o erro “Could not include font metric file” (não foi possível incluir o arquivo de fonte) é DISPARADO, para que isso não ocorra defina o caminho a fonte e não esqueça de colocar a barra no final é obrigatória “/”.

Agora vamos capturar os valores do formulário, declare a variável e faça-a receber o conteúdo de $_POST assim:

//numero do processo
//exemplo do numero do processo 08664-001098/2010-09
$numProcesso = $_POST["numeroProcesso"];

Onde $numProcesso é a variável e numeroProcesso é o correspondente valor de “name” no HTML, mais dois exemplos:

//numero da nota fiscal
$numNotaFiscal = $_POST["notaFiscal"];
//nome da <span class="hiddenGrammarError" pre="da ">empresa
$empresa</span> = $_POST["nomeEmpresa"];

No final disponibilizarei o código completo.

Em seguida instanciamos a classe FPDF chamando seu construtor, $pdf = new FPDF (“P”, “mm”, “A4”); , FPDF é o construtor da classe e permite que seja definido o formato da página P=Retrato ou L= Paisagem, mm = tipo de medida utilizada no casso milímetros e tipo de folha = A4, para outras informações acesse o manual FPDF. Agora definimos as margens com a função SetMargins, define as margens esquerda, superior e direita. Por padrão elas são iguais a 1 cm sendo assim chame este método para alterá-las, $pdf->SetMargins(30, 20, 30); , como a medida está em milímetros então usei 30, 20 e 30. Função SetFont define a fonte que será usada para imprimir os caracteres do texto, é obrigatório chamar esse método ao menos uma vez ou o documento resultante não será válido.  A fonte será mantida de uma página para outra, agora sempre que quiser mudar a fonte chame esse método novamente, dessa forma pode mudar a fonte a qualquer momento. Procure usar as fontes padrão ou adicione uma através do método AddFont(). Definindo a fonte a ser usada, estilo e tamanho $pdf->SetFont(‘arial’, ”, 12);. Agora definimos o assunto $pdf->SetSubject(“Gerar PDF com FPDF”);. $pdf->SetY(“-1”); define a abscissa da posição corrente e se o valor passado for negativo, ele será relativo à margem direita da página.  $pdf->SetX(“10”); move a abscissa atual de volta para margem esquerda e define a ordenada. Se o valor passado for negativo, ele será relativo à margem inferior da página.

Exemplo das funções mencionadas até aqui:

$pdf = new FPDF("P", "mm", "A4");
$pdf->SetMargins(30, 20, 30);
$pdf->SetFont('arial', '', 12);
$pdf->SetTitle("Gerar PDF com FPDF");
$pdf->SetSubject("Gerar PDF com FPDF");
$pdf->SetY("-1");

Construindo o cabeçalho:

Pensando em várias páginas, resolvi fazer o cabeçalho em outra página chamada cabeçalho.php. Outras funções usadas: Image coloca uma imagem na página, $pdf->Image(“brasao.gif”); , função Line, que desenha uma linha entre dois pontos, $pdf->Line(70, 48, 70, 23); e MultiCell, função que permite imprimir um texto com quebras de linha, podendo ser alinhado, centralizado ou justificado, $pdf->MultiCell(90, 5, utf8_decode($textoCabecalho), 0, “L”); , largura 90, altura 5, texto e nesse caso utilizei o utf8_decode() para que fosse interpretado os caracteres e acentos, borda 0 que por padrão já é e alinhado a esquerda “L”. Defini o texto que ficará abaixo da imagem e usei o valor da variável nome da empresa, $textoImg = “BRASÃO da {$empresa}”; e adicionei o texto do cabeçalho:

$textoCabecalho = "DESENVOLVIDO POR \n";
$textoCabecalho .= "João Batista Dantas Bezerra Júnior ";
$textoCabecalho .= "JBWEBMASTER - Analista de Sistemas \n";
$textoCabecalho .= "Documento da {$empresa} \n";
$textoCabecalho .= "Processo n° {$numProcesso}";

OBS: “.=” serve para concatenar, juntando todas essas frases.

Dessa forma, usando as funções mostradas até aqui, o cabeçalho já pode ser feito ficando assim:

Nomeie essa página como: Cabecalho.php

<?php
/* 
 * CABECALHO DA PAGINA
 */

//CONFIGURACAO DA IMAGEM - IMAGEM 1
//posiciona horizontal 37mm da imagem
$pdf->SetX("37");
//gerando a imagem na pagina
$pdf->Image("brasao.gif");
//Definir a fonte e o tamanho 6 para o texto da imagem
$pdf->SetFont('arial', '', 6);
//posiciona horizontal 35mm do texto da imagem
$pdf->SetX("35");
//TEXTO DO IMAGEM
$textoImg = "BRASAO da {$empresa}";
/*
 * imprimir um texto com quebras de linhas
 * a largura 26.
 * a altura foi definida como 5 - dando um expasamento entre as linas,
 * vai depender de quanto vai precisar de espaco entre elas.
 * Para resolver o problema de acentuacao e/ou caracteres que serao
 * usados no pdf e aconselhavel usar utf8_decode() na saida do texto.
 */
$pdf->MultiCell(26, 5, utf8_decode($textoImg), 0, "L");

//TEXTO DO CABECALHO
$textoCabecalho = "DESENVOLVIDO POR \n";
$textoCabecalho .= "João Batista Dantas Bezerra Júnior ";
$textoCabecalho .= "JBWEBMASTER - Analista de Sistemas \n";
$textoCabecalho .= "Documento da {$empresa} \n";
$textoCabecalho .= "Processo nº {$numProcesso}";
//posiciona verticalmente
$pdf->SetY("23");
//posiciona horizontalmente
$pdf->SetX("70");
/*
 * Desenha uma linha entre dois pontos.
 * cordenadas do ponto 1 e 2 para a linha
 */
$pdf->Line(70, 48, 70, 23);
//Definir a fonte e o tamanho 12 para o texto do cabeCalho
$pdf->SetFont('arial', '', 12);
$pdf->MultiCell(90, 5, utf8_decode($textoCabecalho), 0, "L");
?>

Agora insira o cabeçalho na página usando o include ‘Cabecalho.php’;

Bem, mais quatro funções e você será capaz de desenvolver qualquer página em PDF usando a biblioteca FPDF. Função Cell(), AddPage(), Output() e Ln(). A função Cell imprime uma célula (área retangular) com bordas opcionais, cor de fundo e texto. AddPage(), adiciona uma página nova ao documento, função Output() que envia o documento para o destino informado: string, arquivo local ou browser, nesse tutorial escolhemos enviar para o  browser e a função Ln() que realiza uma quebra de linha.

OBS1: Perceba no código fonte final do script que foi chamada a função setFont algumas vezes, isso acontece pelo fato de que quando você define uma fonte para o cabeçalho essa fonte se estende para todo o script então se precisar de um tamanho de fonte menor precisar chama-lo mais uma vez antes de mandar imprimir o texto que quer. Por exemplo:

//Nesse caso foi dado o tamanho 12 para o texto do documento
$pdf->SetFont('arial', '', 12);
//texto principal do documento
// "x .= x" usado para concatenar e tem a mesma funçao que x = x.x
$texto .= "               Juntei ao processo n° $numProcesso a nota fiscal n° $numNotaFiscal da empresa $empresa, e os ";
$texto .= "termos de recebimento provisório e definitivo, passando a compor as folhas ";
$texto .= "de n° $folhas.";
$texto .= "";

OBS2: Veja que já coloquei as variáveis aonde eu queria no texto que quero imprimir, como no caso “processo n° $numProcesso”.

OBS3: Para realizar as quebras de linhas não esqueça de usar o Ln().

OBS4: Usando a função MultiCell, não é necessário quebrar as linhas essa função já faz, ao indicar sua largura com 0 por padrão irá até o limite da margem direita, já a altura precisará ser indicada e vai ser ela a responsável pelo espaçamento entre as linhas do texto.

OBS5: Acesse o Manual FPDF para saber mais sobre as funções mencionadas aqui e outras.

Bom, com toda essa explicação e com os comentários das linhas de código que estão no código fonte, será capaz de entender, construir e aperfeiçoar sua página PDF. O código fonte do script PaginaPdf.php segue abaixo:

Nomeie essa página como: PaginaPdf.php

<?php

/*
 *******************************************************************************
 *     JBWEBMASTER - Gerar um documento em PDF usando a biblioteca FPDF        *
 *                AUTOR: JOAO BATISTA DANTAS BEZERRA JUNIOR                    *
 *                E-MAIL: jbtrab@gmail.com                                     *
 *                        DATA: 28/09/2010                                     *
 * *****************************************************************************
 */


require 'BibliotecaFPDF/fpdf.php';
define('FPDF_FONTPATH', 'BibliotecaFPDF/font/');

/*
 * CONFIGURANDO A PAGINA
 */

//RECEBENDO VALORES DO FORMULARIO:
//numero do processo
//exemplo do numero do processo 08664-001098/2010-09
$numProcesso = $_POST["numeroProcesso"];
//numero da nota fiscal
$numNotaFiscal = $_POST["notaFiscal"];
//nome da empresa
$empresa = $_POST["nomeEmpresa"];
//numero das folhas
$folhas = $_POST["numeroFolhas"];
//Data do documento
$dataDoc = $_POST["dataDoc"];
//Nome do responsavel pelo documento
$responsavelDoc = $_POST["nomeResponsavel"];
//Tipo do responsavel
$tipoResponsavelDoc = $_POST["TipoResponsavel"];
//Matricula do responsavel
$matriculaResponsavel = $_POST["matricula"];

/*
 * construtor da classe, que permite que seja definido o formato da pagina
 * P=Retrato, mm =tipo de medida utilizada no casso milimetros,
 * tipo de folha = A4
 */
$pdf = new FPDF("P", "mm", "A4");
//Define as margens esquerda, superior e direita.
$pdf->SetMargins(30, 20, 30);
//define a fonte a ser usada, estilo e tamanho
$pdf->SetFont('arial', '', 12);
//define o titulo
$pdf->SetTitle("Gerar PDF com FPDF");
//assunto
$pdf->SetSubject("Gerar PDF com FPDF");
// posicao vertical no caso -1.. e o limite da margem
$pdf->SetY("-1");

//inserir o cabecalho da pagina
include 'Cabecalho.php';

//espacamento
$pdf->Ln(30);
//define a fonte a ser usada, estilo e tamanho
//Nesse caso foi dado o tamanho 14 ao ti­tulo do documento
$pdf->SetFont('arial', '', 14);
//variavel que recebe o texto
$titulo = "Gerar um documento em PDF usando a biblioteca FPDF.";
//imprimi o texto em uma celula
$pdf->Cell(0, 10, $titulo, 0, 0, 'C');
//define a fonte a ser usada, estilo e tamanho
//Nesse caso foi dado o tamanho 12 para o texto do documento
$pdf->SetFont('arial', '', 12);

//texto principal do documento
// "x .= x" usado para concatenar e tem a mesma funcao que x = x.x
$texto .= "               Juntei ao processo nº $numProcesso a nota fiscal nº $numNotaFiscal da empresa $empresa, e os ";
$texto .= "termos de recebimento provisório e definitivo, passando a compor as folhas ";
$texto .= "de nº $folhas.";
$texto .= "";

//margens do texto principal
//medidas das margens
$pdf->SetMargins(30, 20, 30);
//posiciona verticalmente 41mm
$pdf->SetY("41");
//posiciona horizontalmente 10mm
$pdf->SetX("10");
//espacamento
$pdf->Ln(70);
/*
 * imprimir um texto com quebras de linhas
 * a largura sendo 0, serao extendidas ate a margem direita da pagina.
 * a altura foi definida como 7 - dando um expacamento entre as linas,
 * vai depender de quanto vai precisar de espaco entre elas.
 * Para resolver o problema de acentuacao e/ou caracteres que serao
 * usados no pdf e aconselhavel usar utf8_decode() na saida do texto.
 */
$pdf->MultiCell(0, 7, utf8_decode($texto));
//espacamento
$pdf->Ln(5);
//data do documento
$textoData = "Em {$dataDoc}.";
/*
 * celular de largura 94, altura 10, texto ja¡ com utf8_decode(), bordas 0,
 * posicionar a direita, texto alinha ao centro
 */
$pdf->Cell(94, 10, $textoData, 0, 0, 'C');
//espacamento
$pdf->Ln(15);
//data do documento
$rodape = "$responsavelDoc\n";
$rodape .= "$tipoResponsavelDoc\n";
$rodape .= "Mat. " . $matriculaResponsavel;
//rodape
//posiciona verticalmente 190mm
$pdf->SetY("190");
//posiciona horizontalmente 60mm
$pdf->SetX("60");
/*
 * imprimir um texto com quebras de linhas
 * a largura de 90.
 * a altura foi definida como 7 - dando um expacamento entre as linas,
 * borda 0 - sem bordas, no caso de nao informar o padrao e 0 (zero)
 * vai depender de quanto vai precisar de espaco entre elas.
 * Para resolver o problema de acentuacao e/ou caracteres que serao
 * usados no pdf e aconselhavel usar utf8_decode() na saida do texto.
 */
$pdf->MultiCell(90, 7, utf8_decode($rodape), 0, "C");

/*
 * IMPRIMIR A SAIDA DO ARQUIVO
 * nome do arquivo
 * I: envia o arquivo diretamente para o browser,
 * Se o plug-in estiver instalado ele serao usado.
 * mais opcoes no final do artigo ou visite o manual fpdf.
 */
$pdf->Output("PaginaPdf", "I");
?>

Com isso termino esse tutorial, espero que tenha ajudado e até a próxima.

Exemplo das funções mencionadas até aqui:

Linguagem PHP: 1ª Parte (Formulário) – Gerar um documento em PDF usando a biblioteca FPDF.


Jbwebmaster – João Batista Dantas Bezerra Júnior

Olá pessoal, hoje vamos aprender como gerar um documento em PDF usando a biblioteca FPDF, uma das mais utilizadas em PHP, será dividido em  2 partes. Na 1ª parte, para ficar mais completo, desenvolvi uma página em PHP + HTML  contendo um formulário que vai ser o responsável por enviar os dados para a outra página em PHP que ficará responsável por gerar o arquivo em PDF no navegador, você também verá que pode optar por: envia para o browser e forçar o download do arquivo e por salvar em um arquivo local. O objetivo é a criação do PDF através de parâmetros fornecidos pelo formulário mostrado nessa 1ª parte, portanto os detalhes ficam a cargo do script PHP que virá na 2ª parte deste artigo. Esse formulário envia os dados pelo método do tipo POST, um formulário simples. Também desenvolvi o CSS dessa página, os códigos seguem abaixo:

MetasTags.php

Metas Tags, que são etiquetas que descrevem o conteúdo do seu site para os buscadores. Poderá baixar o arquivo no link: MetasTags.php. As Metas Tags usadas foram:
– A meta tag (meta http-equiv=”content-language” content=”pt-br”), serve para referenciar a linguagem do conteúdo da página.
– A meta tag (meta http-equiv=”content-type” content=”text/html; charset=UTF-8″), serve para informar o conjunto de caracteres dentro da página.
– A meta tag (meta name=”title” content=”Gerar um documento em PDF usando a biblioteca FPDF.”), informa o título do documento.
– A meta tag (meta name=”author” content=”Joao Batista Dantas Bezerra Junior”), informa o autor da página.
– A meta tag (meta name=”robots” content=”index,follow” ), essa meta tag é muito importante, pois será responsável por dizer se seu site ficará visível nos sites de busca ou não.
– A meta tag (meta name=”generator” content=”NetBeans IDE 6.9” ), informa qual Software foi utilizado para a construção da página. Conheça mais sobre metas tags.
OBS: Perceba que no código fonte existe uma contra barra (\) antes de cada aspa (“), esse é o caracter de controle e serve para escapar as aspas, interpretando como uma string.

Código Fonte:

<?php
echo "  <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
        <meta http-equiv=\"content-language\" content=\"pt\" />
        <meta name=\"title\" content=\"Gerar um documento em PDF usando a biblioteca FPDF.\" />
        <meta name=\"author\" content=\"Joao Batista Dantas Bezerra Junior\" />
        <meta name=\"robots\" content=\"index,follow\" />
        <meta name=\"generator\" content=\"NetBeans IDE6.9\" />
";
?>

Página index.php

Essa página será responsável por enviar os parâmetros ou dados para a página PHP que gera o PDF, servindo de suporte aqueles que queiram saber como fazer para enviar os dados através do formulário. Poderá baixar o arquivo no link: index.php. Bem, com essa página você poderá usar como base para a sua, não perdendo mais tempo, como já disse anteriormento não entrarei em detalhes na construção do formulário, orientação das DIVs e etc, pois esse não é o objetivo desse post. O HTML já foi validado pela W3C.

Código Fonte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <!--
    *******************************************************************************
    *     JBWEBMASTER - Gerar um documento em PDF usando a biblioteca FPDF        *
    *                AUTOR: JOAO BATISTA DANTAS BEZERRA JUNIOR                    *
    *                E-MAIL: jbtrab@gmail.com                                     *
    *                        DATA: 28/09/2010                                     *
    *******************************************************************************
    -->
    <head>
        <?php include_once 'MetasTags.php'; ?>
        <title>Gerar um documento em PDF usando a biblioteca FPDF.</title>
        <!--ESTILO DA PAGINA FORMULARIO-->
        <link href="estilo.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="cabecalho">
            <h2>Gerar um documento em PDF usando a biblioteca FPDF.</h2>
            <div class="contato"><a href="https://jbwebmaster.wordpress.com/" title="Voltar para P&aacute;gina inicial">
                    Natal/RN 2010 - Desenvolvido por: Jo&atilde;o Batista Dantas B. J&uacute;nior - JBWEBMASTER -
                    CONTATO/D&Uacute;VIDAS: jbtrab@gmail.com</a></div>
        </div>
        <div class="central">
            <div class="frmManut">
                <form method="post" action="PaginaPdf.php" name="frmLista" target="blank">

                    <div class="titulo">Documento da Empresa X</div>
                    <div class="colunaUmLinhaUm">
                        <p>
                            <label for="numeroProcesso">N&uacute;mero do Processo:</label>
                            <br />
                            <input type="text" name="numeroProcesso" value="" />
                        </p>
                        <p>
                            <label for="notaFiscal">N&uacute;mero Nota Fiscal:</label>
                            <br />
                            <input type="text" name="notaFiscal" value="" />
                        </p>
                        <p>
                            <label for="nomeEmpresa">Nome da Empresa:</label>
                            <br />
                            <input type="text" class="nomeEmpresa" name="nomeEmpresa" value="" />
                        </p>
                    </div>
                    <div class="colunaDoisLinhaUm">
                        <p>
                            <label for="numeroFolhas">N&uacute;mero das Folhas:</label>
                            <br />
                            <input type="text" name="numeroFolhas" value="" />
                        </p>
                        <p>
                            <label for="dataDoc">Data do Documento:</label>
                            <br />
                            <input type="text" class="dataDoc" name="dataDoc" value="" />
                        </p>
                        <p>
                            <label for="nomeResponsavel">Nome do Respons&aacute;vel:</label>
                            <br />
                            <input type="text" class="nomeResponsavel" name="nomeResponsavel" value="" />
                        </p>
                    </div>
                    <div class="colunaTresLinhaUm">
                        <p>
                            <label for="TipoResponsavel">Tipo do Respons&aacute;vel:</label>
                            <br />
                            <select name="TipoResponsavel">
                                <option>Estagi&aacute;rio</option>
                                <option>Contratado</option>
                            </select>
                        </p>
                        <p>
                            <label for="matricula">Matr&iacute;cula:</label>
                            <br />
                            <input type="text" class="matricula" name="matricula" value="" />
                        </p>
                    </div>
                    <p>
                        <span><input type="submit" value="Gerar o Documento em PDF" name="enviar" /></span>
                    </p>
                </form>
            </div>
        </div>
        <div class="rodape">
           Natal/RN 2010 - Desenvolvido por: Jo&atilde;o Batista Dantas B. J&uacute;nior - JBWEBMASTER - CONTATO/D&Uacute;VIDAS: jbtrab@gmail.com
        </div>
    </body>
</html>

Página estilo.css

Página de estilo responsável por toda configuração da página index.php. Poderá baixar o arquivo no link: estilo.css.

Código Fonte:

@charset "utf-8";
/* 
    Document: CSS 
    Created on: 16/10/2010, 10:44:03
    Author: Joao Batista Dantas B. Júnior
    Contato: jbtrab@gmail.com
*/
* {
    margin:0px;
    padding:0px;
    top:0px;
    left:0px;
    position: relative;
    text-align:center;
}
body{
    background-image:url(fundo.PNG);
    background-color:#C0C0C0;
    background-repeat:repeat;
    background-attachment:fixed;
    padding-top:5px;
    padding-bottom:5px;
    font-weight: bolder;
    color: #000000;
    font: 80% Arial, Helvetica, sans-serif;
}

.cabecalho{
    background-image: url(novoLay2.png);
    background-repeat:repeat-x;
    margin: auto;
    width: 100%;
    height: 140px;
}

.contato{
    font-size: 100%;
    font-family: verdana;
    font-weight: bolder;
    margin-top:6px;
    width: 100%;
    height: auto;
    position: absolute;
    color: white;
}
.contato a:link{
    text-decoration: none;
    color: #000000;
}
.contato a:hover{
    text-decoration: none;
    color: #000099;
}
.contato a:visited{
    text-decoration: none;
    color: #000000;
}
.cabecalho h2{
    font-size: 180%;
    font-family: verdana;
    font-weight: bolder;
    margin-top:50px;
    width: 100%;
    height: auto;
    position: absolute;
    color: white;
}
.central{
    background-color: #C0C0C0;
    padding-top:20px;
    padding-bottom:20px;
    margin: auto;
    margin-top: 50px;
    margin-bottom: 50px;
    width:900px;
    height:auto;
}

/*Formulario de manutencao*/
div.frmManut{
    width:auto;
    height:auto;
    margin:auto;
    font-size: 95%;
    font-weight:bolder;
    text-align:left;
}
div.frmManut .numero{
    width: 100px;
}
div.frmManut form input{
    text-align:left;
    border-left-style:solid;
    border-left-color:gray;
    border-top-style:solid;
    border-top-color:gray;
    text-align:left;
    width: 200px;
}
div.frmManut form select{
    text-align:left;
    border-left-style:solid;
    border-left-color:gray;
    border-top-style:solid;
    border-top-color:gray;
    text-align:left;
    width: 200px;
}
div.frmManut span input{
    padding: 10px;
    margin: auto;
    margin-top: 90px;
    margin-left: 75px;
    background-color:#000099;
    color:white;
    text-align:center;
    font-size:110%;
    font-weight:bolder;
    border-style: outset;
    border-width: 4px;
    border-color: white;
    cursor:pointer;
    width: auto;
}
div.frmManut form p{
    padding-bottom:10px;
    text-align:justify;
}
/*PAGINA UM DO TERMO*/
div.frmManut form .titulo{
    background-color: #ccccaf;
    padding-top: 15px;
    padding-bottom: 15px;
    width: auto;
    height: auto;
    text-align:center;
    font-size: 140%;
    color:#000099;
}
div.frmManut form .colunaUmLinhaUm {
    margin-top: 10px;
    margin-left:75px;
    position:relative;
    width: 250px;
    height: auto;
}
div.frmManut form .colunaDoisLinhaUm {
    margin-top: -131px;
    margin-left:345px;
    position:relative;
    width: 250px;
    height: auto;
}
div.frmManut form .colunaTresLinhaUm {
    margin-top: -133px;
    margin-left:605px;
    position:relative;
    width: 250px;
    height: auto;
}

/************   RODAPE   *************/

div.rodape{
    padding-bottom: 6px;
    padding-top: 6px;
    cursor: text;
    font-weight:bolder;
    margin:auto;
    width: 100%;
    height: auto;
    background-color:#fff34f;

}

Novidade: O3D – Deixando de ser um plugin e se tornando uma biblioteca JavaScript rodando em cima de WebGL


Jbwebmaster – João Batista Dantas Bezerra Júnior

Criada pelo Google , a mais de um ano, para a criação interativa de aplicações 3D que rode em navegador Web ou em uma janela XUL aplicação desktop, o O3D é open source e com ele podem ser criados para uso em qualquer área de aplicação, no entanto, é voltada para jogos, propagandas, os telespectadores modelo 3D, demonstrações de produtos, simulações, aplicações de engenharia, sistemas de controle e monitoramento ou mundos virtuais. O O3D está atualmente em Laboratório de incubação do Google e implantado como plugin experimental no navegador.

Escrito em linguagem C, O3D é visto como a ponte entre o 3D do desktop baseado em aplicativos gráficos de forma acelerada e navegadores da Web em formato HTML, seus defensores afirmam que a criação de um completo mecanismo de gráficos 3D que pode ser baixado e executado através de navegadores web, pode eliminar a necessidade de instalar aplicativos grandes em um computador local. Além disso, o O3D usa um plug-in que permite a arquitetura baseada em 3 desenvolvedores para integrar a funcionalidade personalizada, como efeitos de renderização pré e pós, sistemas de partículas e / ou motores de física. Esse seria o primeiro passo rumo à internet em terceira dimensão, segundo o Google, que deve começar pela criação de games mais realistas na web, substituindo os jogos em Flash, com a ideia de atrair um público de jogadores casuais.

Hoje o projeto O3D está mudando de direção, evoluindo de um plug-in para uma biblioteca JavaScript que roda em cima do WebGL., os usuários e desenvolvedores poderão ainda fazer o download do plug-in O3D e código-fonte  pelo  período um ano, mas que não seja uma versão de manutenção, o Google planeja parar de desenvolver O3D como um plug-in e se concentrar em melhorar WebGL e O3D como biblioteca JavaScript.

A execução de JavaScript O3D está ainda no início, mas você pode encontrar uma cópia dele no site do projeto O3D e ver algumas das amostras O3D WebGL a partir de um navegador. Como falta a alguns navegadores funcionalidades necessárias como o carregamento de comprimidos ativos, nem todas as características de O3D pode ser implementada puramente em JavaScript. Pretende-se trabalhar para dar essa funcionalidade ao navegador, e todas as capacidades necessárias para a entrega de alta qualidade de conteúdo 3D.

Vídeo de demonstração da nova tecnologia:

Para executar o game em browser, o Google utiliza o WebGL, a API do Canvas e elementos de áudio do HTML 5, uma API de armazenamento local e WebSockets para demonstrar as possibilidades das aplicações web para os novos navegadores.

Vídeo de demonstração da nova tecnologia:

Baseado no projeto Jake2, compilado para Javascript usando o Google Web Toolkit (GWT). Jake 2 é uma porta de Java de código fonte original do Quake II, que tem seu código aberto pela id Software.

 

FONTES: