Translate

JAVA - Applets 1


Applets – Princípios Gerais


A popularidade do Java deve-se sobretudo, à sua utilização no âmbito da World Wide Web. Desde o aparecimento dos primeiros browsers com capacidade de interpretação Java, que a comunidade Internet aderiu de forma entusiástica à linguagem.
Applets são pequenos programas que são executados em páginas Web, com capacidades gráficas e interativas bastante fortes aliada ao facto de ser uma das formas mais seguras de executar localmente, programas distribuídos através da Web.
Ao ser realizado o acesso a uma página com tendo uma applet, é carregado o ficheiro binário que contém essa applet, sendo em seguida executado na máquina onde reside o browser, as applets não têm acesso de escrita ao sistema de ficheiros da máquina local e nem podem executar programas ou carregar bibliotecas residentes nesta.

Criar uma applet


Para criar um applet, é criada uma subclasse de uma classe existente na biblioteca “java.applet”, chamada “java.applet.Applet”. nesta classe está definido o comportamento desta e a capacidade de reagir perante o rato e o teclado.
Na criação de applets não existe o método main() logo existe um conjunto de métodos que representam as fases mais importante da vida de um applet, o código só será executado quando a applet estiver no estado correspondente:
·       Inicialização – Fase em que a applet é pela primeira vez carregada. Nesta fase podem ser realizadas acções, tais como: criação de objetos, inicialização de variáveis, etc. O método correspondente a este estado é o init(). Uma applet passa por este estado apenas uma vez.

·       Começar – Ocorre logo a seguir ao anterior ou depois da applet ter sofrido uma paragem. Ao contrário da fase anterior, uma applet pode passar várias vezes por esta fase. O método correspondente é o start().

·       Parar – Esta fase implica uma paragem na execução da applet. É muitas vezes utilizada em conjunto com o estado começar, para certos tipos de comportamentos. O método correspondente é o stop().

·       Destruir – Este é o Estado terminal de uma applet. O método correspondente é o destroy().

Para criar comportamentos, é necessário reescrever os métodos (Override).  Para tal basta declarar os métodos no interior das applets, tendo o cuidado de os declarar como public, por exemplo para declarar o comportamento inicial de uma applet:
public void init() {
/* código de definição de comportamento
. . .
}

Applets e páginas Web


Dentro de uma página Web, a declaração de uma applet inicia-se com a tag <applet>, acrescentada ao HTML e assim permitir a incorporação de objetos Java.
Dentro desta está um parâmetro code (que vai conter o nome do ficheiro “.class” correspondente à applet). E podem estar alguns parâmetros que definem particularidades acerca do comportamento da applet na página Web. Exemplos desses parâmetros são widht (Largura em pixels) e height (Largura em pixels) da área ocupada pela applet na página.
 Os parâmetros a passar para o interior da applet são fixados com a tag <param>, que aceita com argumentos o nome dos parâmetros (name) e o seu valor (value).
Exemplo de integração de uma applet dentro de HTML:
<html>
<head>
<title>A minha applet</title>
</head>
<body>
<applet code = “teste1.class” widht=”250” height”50” allign=left”>
</applet>
</body>
</html>


Parâmetros passados às applets
Os parâmetros passados às applets são identificados por um nome e por um valor, a sintaxe é a seguinte:
<applet . . .>
<param var1 value =”valor1”>
<param var1 value =”valor2”>
. . .
<param var1 value =”valor1”>
</applet>

O valor passado é recebido pela applet, no interior do método init(), sendo para tal chamado pelo método getParameter(), que aceita como argumento o nome da variável a passar (sempre uma string)
Vejamos o exemplo de uma applet com passagem de parâmetros:
import java.awt.Graphics;
public class Teste2 extendes java.applet.Applet {
String frase;
/* obter a linha a passar para o ecrã */
public void init() {
frase= getParameter(“texto”);
}
public void paint (Graphics g) {
g.drawstring(frase,10,25);
}
}

A string a enviar para o ecrã é passada por intermédio da variável frase, que toma o valor do parâmetro de nome texto por execução do método getParameter().
Eis o respectivo código HTML:
<html>
<head>
<title>Applet com parâmetros</title>
</head>
<body>
<applet code = “Teste2.class” widht=”200” height”50” >
<param name=”texto” value =”Esta applet recebe e mostra esta string”>
</applet>
</body>
</html>

Construção de applets


Vejamos o exemplo de uma applet que permita mostrar os diversos estados de uma applet. Para tal vamos reescrever os principais métodos da classe “Applet” e observar como ocorrem as transições entre eles.
/* Applet de demonstração dos estados applet*/

import java.awt.Graphics;
import java.applet.Applet;

public class Estados extends Applet {

StringBuffer estado = new StringBuffer();

/* Método acrescentar estado */
  public void acrescenta (String frase) {
  estado.append(frase);
  }

  /* estado init */
  public void init() {
  acrescenta("inicializa ...");
  }

/* estado start */ 
  public void start() {
  acrescenta("começa ...");      
  }

  /* estado stop */
  public void stop() {
  acrescenta("para ...");
  }

  /* estado destroy */
  public void destroy() {
  acrescenta("termina ...");
  }

  /* método paint */
  public void paint (Graphics g) {
  g.drawString(estado.toString(),5,15);
  }

}

Tutorial HTML - Parte 2


 

Formatação e Aspecto

 

Todas os sites que vemos na net têm algo mais que texto corrido e monótono. Vamos ver alguns desses aspectos analisando o código seguinte:
<HTML><HEAD><TITLE>Página com cor</TITLE></HEAD>
<BODY BGCOLOR="#FFFF00" TEXT="#0000FF" LINK="#FF0000">
Texto normal<BR><A HREF="outra.htm">Texto com link</A>
</BODY>
</HTML>


Este será o resultado:


Foram acrescentados três parâmetros adicionais ao ‘tag’ <BODY>:

  • BGCOLOR define a cor de fundo da página,  
  • TEXT a cor por defeito do texto
  • LINK a cor de uma hiper-ligação.

Existem ainda os parâmetros adicionais ALINK e VLINK que definem, respectivamente, a cor de uma ligação activa (quando se clica sobre ela) e a cor de uma ligação que já foi visitada.
Os parâmetros passados para dentro destas tags estão em hexadécimla, ficam alguns exemplos de cores para usar na tabela seguinte:
Branco: #FFFFFF
Amarelo: #FFFF00
Preto: #000000
Magenta: #FF00FF
Vermelho: #FF0000
Laranja: #FF6600
Cinza: #999999
Azul Claro: #00FFFF
Verde: #00FF00
Verde Escuro: #006600
Azul: #0000FF
Azul Escuro: #000066

O código hexadecimal é dividido em 3 partes RGB (Red, Green, Blue), em que os 2 primeiros números equivalem à quantidade de Vermelho, os 2 seguintes à quantidade de Verde, e os 2 últimos à quantidade de Azul.
Por exemplo para obtermos o vermelho  #FF0000, temos O valor de R no valor máximo, e G e B no mínimo. 
No entanto, muitas vezes muito mais importante que as cores, é o alinhamento dos elementos da página. Por defeito tudo fica alinhado à esquerda, mas é possível mudar isso:

<BODY>
<DIV ALIGN="CENTER">TEXTO CENTRADO</DIV>
<DIV ALIGN="RIGHT">TEXTO À DIREITA</DIV>
Texto à esquerda
</BODY>
O texto em maiúsculas tem o seu alinhamento alterado, a utilização do ‘tag’ <DIV> também provoca quebras de linha, esse código provocará o seguinte:


O ‘tag’ <P> é utilizado para a definição de parágrafos, como o seguinte exemplo o demonstra: 

<BODY>
<P>Bloco de texto</P>
<P>Outro bloco de texto<BR>com mudança de linha</P>
</BODY>
Existe uma diferença clara entre o espaçamento introduzido por uma mudança de parágrafo e aquele que surge através do ‘tag’ <BR>, de quebra de linha:
 
Além do aspecto global do texto, podemos também escolher o tipo de letra que utilizamos. Antes de mais, temos os ‘tags’ <B>, <I> e <U>, respectivamente para letra carregada, em itálico e sublinhada:
<BODY>
Normal<BR>
<B>Carregado</B><BR>
<I>Italico</I><BR>
<U>Sublinhado</U><BR>
<B><I>Carregado e Italico</I></B>
</BODY>
Além disto, também podemos escolher a fonte, o seu tamanho e cor com <FONT>:
<BODY>
<P>Letra normal</P>
<P><FONT FACE="Arial">Letra com a fonte Arial</FONT></P>
<FONT FACE="Arial">
<P><FONT SIZE="5">Tamanho 5</FONT></P>
<P><FONT SIZE="2">Tamanho 2</FONT></P>

<FONT SIZE="5">
<P><FONT COLOR="#0000FF">Azul T.5</FONT></P>
<P><FONT COLOR="#FF0000">Vermelho T.5</FONT></P>
</FONT>

</FONT>
<P><FONT FACE="Times New Roman" SIZE="7" COLOR="#006633">
Podemos combinar vários parâmetros </FONT></P>
</BODY>
Obtemos este resultado:


O parâmetro COLOR, que já vimos aplicado no ‘tag’ <BODY>, contém a cor do texto no seu código hexadecimal. O parâmetro SIZE contém o tamanho do tipo de letra, que é um algarismo entre 1 (mais pequeno) e 7 (maior). Finalmente, FACE contém o nome do tipo de letra a utilizar.    

Apesar de existirem inúmeros tipos de letra, é aconselhável que uma página apenas utilize o Arial ou o Times New Roman, visto que com outros existe uma grande possibilidade que quem vai visitar a página não tenha essa fonte instalada no seu computador.
 
Veja a 1ª parte, Tutorial HTML - Parte1

Adsense


O Google Adsense é  um programa de afiliados, no qual os donos de websites ou blogs podem se inscrever de forma gratuita e ganhar dinheiro com inclusão de anúncios de banners publicitários, mas para que isso aconteça, não basta colocar os anúncios nos nossos sites, é preciso que os internautas se interessem por estes e cliquem nos mesmos.

Para se poder inscrever no programa tem que possuir uma conta de gmail, preencher o formulário, enviar para a Google e esperar que a sua conta seja aprovada (não esquecer ler o contrato).

Depois de aprovada a conta, você pode configurar quais os anúncios que quer utilizar e a forma como melhor se adaptam, aqui fica um resumo do que está disponível:

  • Blocos de Anúncios
Os anúncios existentes obedecem a formatos predefinidos, onde podemos escolher aquele que melhor se enquadra na nossa página, personaliza-lo escolhendo temas e cores etc, veja aqui quais são os formatos disponíveis. Estes surgiram nas páginas segundo o contexto ou os temas nela tratados, brevemente, irei dedicar um post acerca dos temas mais bem pagos no Adsense, aqueles que de fato fazem a diferença.

  •  Feeds
Um feed é um resumo atualizado de conteúdo de um site, que inclui links para versões completas desse mesmo conteúdo, dessa forma, ao se inscrever no feed de determinada página web, você recebe informações sobre as páginas em que estiver inscrito.

  •  Pesquisa
Permite incluir nos site uma pesquisa personalizada, desta forma os visitantes do seu site, poderão fazer pesquisas sem sair da sua página.

Ao usar o Adense existem algumas coisas que você não deve fazer NUNCA ou verá a sua conta cancelada:
  • Não clique nos seus anúncios;
  • Não incentive os outros a clicar;
  • Não Faça um site apenas com publicidade;
  • Não coloque anúncios em páginas com conteúdo proibido;
  • Não prejudique a navegação do utilizadores, não os tente enganar. 
Entre milhões e milhões de sites existentes na internet, a tarefa seguinte, e para além de tratar dos conteúdo, será tratar de conseguir tráfego, pois só desta forma aumentamos a probailidade de alguém, por aí, clicar no sítio certo (tema a desenvolver num próximo post).

Colocar imagem no título da mensagem

As definições do Layout de um blog estão definidas em CSS, para ver o código do template vá em Layout --> Editar HTML.

Importante: Faça uma cópia de segurança antes de editar o código do Layout.


O Título das mensagens geralmente é definido nas propriedades .post3 ou h3.post-title


Deve alterar o bloco existente para que seja um dos seguintes:

.post h3 {
background:transparent url("URL da IMAGEM") no-repeat left top;
margin:.25em 0 0;
padding:10px 0 8px 10px;
font-size:180%;
line-height:1.4em;
}
 
Ou
 
h3.post-title {
background:transparent url("
URL da IMAGEM") no-repeat left top;
margin:.25em 0 0;
padding:10px 0 8px 10px;
font-size:180%;
line-height:1.4em;

 
Agora tou utilizando esta:
 





  • A linha a vermelho,  define o fundo do título do post, onde você pode colocar o URL da imagem.
  • no-repeat, Indica que a imagem não irá se repetir;
  • left, imagem alinhada ao centro, pode alinhar sua imagem onde quiser, usando left ou right;
  • top → imagem alinhada no topo.
  • A linha verde, define as margens internas do texto, e devem ser usadas na ordem seguinte:
padding: 10px (superior) 0(direita) 8px(inferior) 10px (esquerda);
Guarde o seu template e veja o resultado.

Favicon



Favicon, é o pequeno ícone com 16x16 pixels que aparece na barra de endereços de um browser e nos seus separadores, e que é o "b" por defeito no blogger ou para ser mais correcto do Google blogs, vamos ver como proceder para personalizar o pormenor:

No Design do blog clique em à esquerda do layout em:

Até aqui muito simples, mas depois é pedido um ficheiro do tipo .ico...

Existem na internet inúmeras páginas e ferramentas que nos podem ajudar a gerar esse ficheiro, ficam algumas páginas que podem fazer este trabalho por nós, eis alguns exemplos:


Ou experimente fazer a sua pesquisa:


Escolha, desenhe ou carregue uma imagem para que o favicon seja gerado, e faça o download do ficheiro, poderá depois, dentro do blog carregar o ficheiro pretendido.

Limpe o histórico do seu browser para conseguir ver a alteração do ícone surtir efeito.

Tutorial HTML - Parte 1



Para construir um blog, não é necessário utilizar HTML, mas por vezes é necessário ter algum conhecimento sobre a matéria, especialmente se pretendermos aprimorar o blog ou saber encaixar  todas as peças do puzzle que existem hoje na web, tal como referi no post anterior sobre indexação.

Para não assustar os leitores, com pavor de linguagens de programação, em primeiro lugar o HTML não é uma linguagem de programação, é uma linguagem de formatação e em segundo lugar não é necessário conhecer a linguagem de forma  aprofundada, mas sim, conhecer a sua estrutura básica e começar a dar os primeiros passos.


O HTML consiste em texto formatado por ‘tags’ ou etiquetas, que obedecem a regras simples:

  • Todas os ‘tags’ são inseridas entre o sinal de menor e maior
      <tag>


  •  À excepção das que representam a posição de um objecto como seja uma imagem, todas as ‘tags’ de formatação devem ser abertas e fechadas
      <tag> </tag>


  • Obedecem a uma hierarquia, como no seguinte exemplo:
      <a> <b> <c> </c> </b> </a>
       O primeiro a abrir é o último a fechar, e vice-versa.


  • É indiferente utilizar maiúsculas ou minúsculas nos ‘tags’.

  • Todas as páginas em HTML são identificadas pelo ‘tag’ <HTML>, que terá obrigatóriamente que estar no início. Obviamente, qualquer página irá acabar com </HTML>.
       <HTML>
       .       
       .
       </HTML>


  • Todas as páginas em HTML contêm duas partes: Aquela definida por <HEAD>, e que contém todas as informações do cabeçalho da página; Outra parte definida por <BODY>, que contém o que irá surigir na página.
       <HTML>
       <HEAD>
       .
       .
       </HEAD>
       <BODY>
       .
       .
       </BODY>
       </HTML>



Podemos neste momento criar uma primeira página (copie o texto para o bloco de notas ou um outro qualquer editor de texto e guarde com a extensão .htm ou .html):

<HTML>
<HEAD>
<TITLE>A primeira página em HTML</TITLE>
</HEAD>
<BODY>
Olá mundo!
</BODY>
</HTML>

Basicamente o exemplo colocará no título do browser o texto "A minha página em HTML" e na página aparecerá o texto "Olá mundo".

Pequenos conceitos que dá para perceber a mecânica da coisa.

veja a segunda parte, Tutorial HTML - Parte 2

Indexar Blog

Fundamental é dar visibilidade ao blog e conseguir que ele fique bem posicionado para as palavras chave mais importantes dentro dos motores de busca mais importantes, vou analisar com detalhe simples como proceder para o conseguir.
  1. Enviar o link do blog diretamente para o sistema da Google, utilize uma das opções:

     2.  Criar um Sitemap


Segundo a Google:
“Um Sitemap é uma lista das páginas do seu site. Criar e enviar um Sitemap ajuda a garantir que o Google tenha conhecimento de todas as páginas do seu site, incluindo URLs que não seriam normalmente encontrados através do processo normal de rastreamento do Google.”
(sobre os Sitemaps)
Crie o seu Sitemap no link http://www.google.com/webmasters/tools/ entre com a sua conta do google, convém ser a mesma que utiliza no blog.


      3.  Meta Tags

Meta Tags ou etiquetas são linhas de código HTML, que entre outras coisas, descrevem o conteúdo de um site ou blog . É nelas que inserimos palavras-chave que facilitarão a procura dos utilizadores.

Procure no código fonte do blog no Blogger (Blogspot) as duas linhas de código:

<b:include data=’blog’ name=’all-head-content’/>
esta linha diz ao Google o que deve ser indexado
<title><data:blog.pageTitle/></title>
 define como será o título da página

 
Estas duas linha nunca poderão ser excluídas ou apagadas, mas sim melhoradas, substitua-as pelo seguinte código:

<b:if cond='data:blog.pageType == "index"'>
<b:include data='blog' name='all-head-content'/>
<meta content='DESCRIÇÃO DO BLOG de até 140 caracteres' name='description'/>
<meta content='PALAVRAS-CHAVE, SEPARADAS POR VÍRGULA' name='keywords'/>
<meta content='AUTOR DO BLOG' name='author'/>
<b:else/>
<b:include data='blog' name='all-head-content'/>
<meta content='PALAVRAS-CHAVE, SEPARADAS POR VÍRGULA' name='keywords'/>
<meta content='SEU NOME AUTOR DO BLOG' name='author'/>
</b:if>

<b:if cond='data:blog.pageType == "index"'>
<title>NOME do BLOG | Pequena descrição de até 80 caracteres</title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>


Guarde as alterações ao modelo e de seguida faça um teste ao código www.seocentro.com/tools/search-engines/metatag-analyzer

Importante: Faça uma cópia de segurança antes de editar o código.


A Escolha Acertada

 

Ganhar dinheiro na net, 2.220.000 de páginas encontradas numa pesquisa feita no google, muitas de faco, mas para um tema sem duvida sedutor (aquele que tem que despertar paixões).
Mas nestas coisas nada como uma boa ideia, um bom nome, apelativo e que faça a diferença no meio do infinito.
Depois de criado o blog resta esperar que os motores de busca façam a sua indexação e apontem para o meu blog, a partir daí tenho a certeza que o nome que escolhi vai saltar à vista quando alguém fizer uma pesquisa similar.
Portanto e em jeito de conclusão, depois do tema, é de vital importância escolher um nome sonante, que faça pensar os internautas e que os consiga cativar, fazendo a relação de semelhança entre objectos diferentes  "o clique de midas..."
Se Precisar de um nome eu posso ajudar...