Sejam bem vindos, esta é a décima aula de Programação Web em Java, para saber mais sobre o curso, começe em Curso de Programação Web em Java - CPWJ.

Na última aula fizemos uma introdução ao ambiente Java, incluindo a instalação do ambiente de desenvolvimento NetBeans. Hoje, vamos fazer uma viagem sobre a linguagem vendo o que ela tem de essencial.

Em minha opinião esta é a mais importante aula do curso até agora.

Java é uma linguagem Orientada a Objeto

A programação em java consiste em manipulação e criação de objetos.

Objeto

Em programação, objetos são representações computacionais de entidades reais, ou abstratas. Eles representas pessoas, entidades. Ou mesmo coisas mais ou menos abstratas, como uma música, ou uma conta bancária.

Todos objetos tem estados: uma pessoa tem nome, idade, Rg, etc. Uma música tem título, interprete, etc. Uma conta bancária tem seu saldo, seu número de identificação, titular da conta, etc.

Programadores podem chamar métodos ou ações no objeto para realizar computações que podem potencialmente modificar o estado do objeto:

• Programador: Quantos anos você tem ? <<método
• Objeto: Eu tenho 10. <<valor de retorno do método
• Programador: Hoje é seu aniversário! <<outro método
• Objeto: Eu tenho que somar 1 à minha idade. <<provocou mudança

• Programador: Qual seu saldo?
• Objeto Conta Bancária: Saldo igual a R$ 2940,00
• Programador: Sacar 100 reais
• Objeto: Eu tenho que atualizar o saldo para R$ 2840,00

Um programa em Java:

package ola;
import java.util.System;
class OlaMundo {
String minhaString;
void vaiLa() {
minhaString = new String(”Olá, Mundo!“);
System.out.println(minhaString);
}
public static void main(String[] args) {
AloMundo meuAloMundo = new AloMundo();
meuAloMundo.vaiLa();
}
}

Devido às limitações do Wordpress, utilizado na publicação deste curso, os código java não são formatados corretamente. Para você ver o código com mais legibilidade copie para uma janela do Netbeans e use as teclas Alt+Shift+F, fazendo o código ser identado com o padrão Java.

Classes

Classes por sua vez são modelos para fazer Objetos. Programar em Java consiste em escrever classes. Todo o código de Java está dentro de classes.

class HelloWorld { //nome da classe
… <toda a programação> …
}

Campos

Campos também chamados variáveis, são usadas para armazenar o estado do Objeto.

class Pessoa {

int idade;

}
<classe do objeto> <nome da variável/campo>;

Construindo Objetos

Pessoa luis = new Pessoa();

Para a construção de um objeto usa-se o código “new” conforme o exemplo acima. Objetos são criados a partir de uma classe, são instâncias das classes. O código “new Pessoa()” cria um objeto na memória do computador, especificamente no Heap do Java.

No código acima luis é um ponteiro para o objeto. Isto é, o Objeto que foi criado é armazenado em uma área de memória do computador, a variável luis armazena o endereço desta posição de memória.

O código acima “luis = ” atribui o endereço do objeto na memória para a variável luis.

<tipo> <nome da variável> = new <nome da classe>();

Usando objetos

Depois de criado, um objeto pode ser usado assim:

Pessoa luis = new Pessoa();
luis.idade=33; //use “.” para acessar os campos
Pessoa elaine = new Pessoa();
elaine.idade=32;
System.out.println(luis.idade); // imprime 33 na tela
System.out.println(elaine.idade); //imprime 32 na tela

Tipos Primitivos

Em Java nem tudo são objetos. Algumas coisas são tão simples, que não compensa usar objetos para representá-los: boolean, byte, short, int, long, double, float, char. São respectivamente tipo lógico, número, inteiro curto, inteiro, inteiro longo, número ponto flutuante duplo, ponto flutuante simples, caracter.

boolean

Um valor verdadeiro ou falso.

byte

Valor numérico inteiro com sinal de 8 bits

short

Valor numérico inteiro com sinal de 16 bits

char

Caracter unicode de 16 bits

int

Valor numérico inteiro com sinal de 32 bits

long

Valor numérico inteiro com sinal de 64 bits

float

Valor numérico de ponto flutuante padrão IEEE754 de 32 bits

double

Valor numérico de ponto flutuante padrão IEEE754 de 64 bits

Para armazenar texto, não usamos um tipo primitivo, temos uma classe String:
String nome=new String(”José das Couves”);

Métodos

São ações que podemos realizar sobre os objetos, que podem mudar seu estado.

<tipo do retorno> <nome do método>(<parâmetros>) {
<corpo do método>
}

No exemplo AloMundo no inicio da aula temos dois métodos definidos: vaiLa e main:

meuAloMundo.vaiLa();
// use ‘.’ para acessar o método

Construtores

Construtores são tipos especiais de métodos que não retornam valores, usados para iniciar campos, aceitam parâmetros e tem corpo de método normal. Tem o mesmo nome da classe, inclusive iniciando com letra maiúscula:

class Pessoa{
int idade;

Pessoa(){ //início do contrutor

idade=18; // ao criar um objeto do tipo Pessoa a idade será iniciada
// com 18 anos em todos os objetos;

} //fim do construtor
}

Corpo do Método

String primeiroNome(String nomeCompleto) {
int espaco = nomeCompleto.indexOf(“ ”); //posição onde está o espaço String palavra = nomeCompleto.substring(0, espaco);
return palavra;
}

Pode-se definir qualquer número de parâmetros, separando por vírgula (no exemplo nomeCompleto). Pode-se declarar variáveis locais(espaco, palavra). Deve sempre retornar alguma coisa (String palavra). No caso de um método não necessitar retorno usa-se void no tipo de retorno (void=nada).

void seuAniversario(){ >>exemplo de método void para a classe Pessoa
idade++;
}

Controle de Fluxo

O comando “if” permite controle sobre ações que devem ser realizadas de acordo com as situações do programa:

if(luis.idade<18){
System.out.println(”Proibido para menores”);
}else if(luis.temCartaoCredito(){
System.out.println(”Seja bem vindo!”);
}else {
System.out.println(”Sai fora, tá pensando que é de graça?”);
}
if(condição 1){
…
} else if (condição2) {
…
} else if (condiçãoN) {
…
}else { … }

Condições

As condições do “if” são expressões que são booleanas, valem Verdadeiro ou Falso. Para construir usar os operadores:

• < menor
• > maior
• == igual
• <= menor ou igual
• >= maior ou igual
• ! negação

Exemplos:

caixa.isVazia();
caixa.numeroLivros()==0
!(caixa.numeroLivros()>1) negação: número de livros na caixa NÃO é maior que 1)
caixa.numeroLivros!=MAX_NUMBER_BOOKS
caixa.numeroLivros%2==0 //verifica se o resto da divisão por 2 é zero (isso é, se o número de livros é par)

Repetição For (loops)

Repete um trecho de código, controlando por uma variável:

for (int i = 0; i < 3; i++) {
System.out.println(i); // imprime 0 1 2
}

for (<inicialização> ; <condição> ; <incremento>) {
…. // trecho de código que repete

}

Inicialização é executado uma única vez antes do trecho repetido. A condição é verificada após a inicialização e antes de repetir o trecho. Incremento é realizado todas as vezes após o trecho repetido.

Para de repetir quando a condição passa a ser falsa.

Repetição While

Repetição de um trecho de código enquanto (while) uma condição for verdadeira.

int i = 0;
while(i<3) {
System.out.println(i); //imprime 0 1 2
}

while (<condição>) {
…
}

Combinando Condições

Quando temos mais de uma condição para testar usamos “&&”: E lógico ou “||”: OU lógico.

• luis.idade>=18 && luis.temCartaoCredito()
• alguem.nome.equals(”Luis”)||alguem.nome.equals(”Lima”)
• (!true || false)&& true (resposta=false)

Matrizes ou arrays

Lista de objetos identificados com um único nome, mais números de ordem.

String[] animais = new String[2]; // dois objetos String
animais[0] = new String(”Rex”);
animais[1] = “Lulu”; // forma simples de criar String

String[] animais= new String[] {”Rex”,”Lulu”};
System.out.println(animais.length); // 2 ítens na matriz

Objetos wrapper dos tipos Primitivos

Os tipos primitivos em algumas situações são interessantes serem manipulados como objetos. A biblioteca Java possui classes que representam cada tipo de variável primitiva: Integer para int, Float para float, Double para double, Boolean para boolean, etc.

Usando os wrappers

Integer a= new Integer(3); // cria objeto Integer e inicia com valor 3;
Integer sum = a.add(5); // cria objeto Integer com o valor de a+5;

Wrappers em Arrays

Integer notas= new Integer[50]; // 50 objetos Integer

Cuidado ao usar Objetos

• Não tentar acessar array fora de faixa
  animais[5] >> excessão ArrayOutOfBoundsException;
• Acessar variável sem criar objeto correspondente
  String[] str;
  str.length >> NullPointerException
• Erros de interpretação de uso
  Integer a = new Integer(3); //a=>3
  a.add(5); //calcular a+5, não muda valor de a=>3
  a=a.add(5); //agora sim: a=>8

Resumo

• Variáveis
  • Variáveis apontam para objetos;
  • Variáveis apontam objetos de uma classe em particular;
  • Integer x; Declara uma variável;
• Objetos
  • Classes definem objetos
  • Objetos são instâncias de uma classe em particular;
  • new Integer(3); Constrói um objeto;

Representação Objeto vs Variáveis

Um exemplo visual de objetos e variáveis durante a execução de um programa java:

Temos dois objetos da classe Integer com o valor 3 armazenado. E temos 4 variáveis: num, x, y e z. As variáveis num e x apontam para o mesmo objeto. A variável z não aponta para nenhum objeto.

Null

Variáveis sem objetos relacionados apontam para null. null não é um objeto, é apenas uma indicação para a não existência de objeto relacionado com uma variável.

Utilizar uma variável com valor Null para verificar um campo de um objeto irá causar um erro (NullPointerException):

Pessoa joao;
joao.idade=10; // NullPointerException, não existe objeto relacionado à variável joao, portanto não existe o campo idade.

Mudando um objeto através das variáveis

Para atribuir um objeto à uma variável, utilize o operador “=”. Com isso é possível fazer mais de uma variável apontar para o mesmo objeto. Este recurso pode provocar um efeito chamado mutação de objetos compartilhados:

public class MutationExample {
public static void main(String[] args) {
List<String> a = new ArrayList<String>();
List<String> b;
b= a; // b e a compartilham a lista
a.add(“Alo, Mundo!”);
System.out.println(b); // imprime “Alô, Mundo!”
}
}

No exemplo, a e b são variáveis apontando para a mesma lista. Usando “a.add(…” modificamos o objeto lista. Quando imprimimos “b”, a variável aponta para o mesmo objeto modificado, e portanto mostra o valor “Alô, Mundo!”.

Campos e Métodos Estáticos e Não estáticos

Campos e métodos também são chamados membros de uma classe. Por padrão são não estáticos.

Membros estáticos são aqueles que são compartilhados entre cada Instância/Objeto da classe.

Um campo estático, compartilha seu valor entre cada objeto da classe.

Campos não Estáticos

public class Livro {
public int livroCounter = 0;
public Livro() {
livroCounter++;
}
public static void main(String[] args) {
new Livro(); new Livro();
Livro biblia = new Livro();
System.out.println(biblia.livroCounter); // Imprime 1
}
}

Campos Estáticos

public class Livro {
public static int livroCounter = 0;
public Livro() {
livroCounter++;
}
public static void main(String[] args) {
new Livro(); new Livro(); new Livro();
System.out.println(Livro.livroCounter); // Imprime “3”
}
}

Campos Estáticos devem ser chamados a partir do nome da Classe. São únicos para todos os objetos da classe.

Métodos Não Estáticos

public class livro {
private boolean lido = false;
public void leiaLivro() {
lido = true;
}
public static void main(String[] args) {
Livro livro = new Livro();
livro.leiaLivro(); // Invocado através do objeto
}
}

Métodos Estáticos

public class Livro {
private boolean lido = false;
public static void leiaLivro(Livro livro) {
livro.lido = true;
}
public static void main(String[] args) {
Livro livro = new Livro();
Livro.leiaLivro(livro); // método invocado através da classe
// “livro.leiaLivro(livro);” válido mas desaconselhado!
}
}

Objetos passados por referência

Parâmetros de métodos podem ser por referência ou valor. Objetos por padrão são passados por referência. Isso é, mudanças no objeto dentro da função se propagam para fora da mesma.

public static <T> void removePrimeiro(List<T> lista) {
lista.remove(0);
}

public static void main(String[] args) {
List<String> minhaLista = new ArrayList<String>();
minhaLista.add(“Gato”); minhaListaadd(“Cachorro”);
removePrimeiro(minhaLista);
System.out.println(minhaLista); // imprime [Cachorro]
}

Tanto a variável “minhaLista” no método “main” e a variável “lista” no método “removePrimeiro” se referem ao mesmo objeto na memória (veja a e b em “Mudando um objeto através das variáveis” acima)

Escopo

Escopo de variáveis está relacionado à que partes do programa podem acessar uma variável. Dependendo de onde a variável está definida seu escopo muda.

As Chaves {…} definem uma área de escopo. Quando uma variável é definida dentro de uma área de escopo, é somente visível dentro desta área. Ao final da execução de uma área de escopo, as variáveis internas são automaticamente destruídas.

O escopo dos campos das classes são todos os métodos da classe. Isso é, um campo de um objeto da classe é acessível por todos os métodos daquele objeto.

Os parâmetros de um método, funcionam exatamente como uma variável do método. Existe até o fim da execução do método.

Exemplos de Escopo

Alguns toques:

• Atribução: variáveis apontam objetos. Cuidado com ponteiros nulos;
• Static: não invocar métodos estáticos pelos objetos
• Passagem por referência: faça uma cópia se quizer se prevenir de uma mudança acidental;
• Escopo: minimize o escopo das variáveis o mais possível. Não faça tudo global

Como você pode ver, esta é a aula mais pesada do curso. Não deixe as dúvidas acumularem. Faça os exercícios. Tire suas dúvidas no Fórum, é para isso que está disponível. Não se acanhe. O curso só melhora com a participação de vocês.

Aprofundando

• Procure no Java Tutorial da Sun, os tópicos abordados nesta aula.
• Faça um estudo de operadores Java.
• Faça um estudo da classe java.lang.Math.
• Faça um estudo da classe java.lang.String.
• Qualquer dúvida vá ao fórum.

Exercícios

• Faça um programa para mostrar os números pares de 1 a até 100;
• Faça um método que verifique se um número é primo; (chamado isPrimo)
• Faça um programa para mostrar os números primos de 1 a 50;
• Transforme o método isPrimo em um método estático;
• Refaça o programa para usar o método estático;
• Faça uma função que verifique os números primos de uma lista e exclua todos os números não primos da mesma.

Na Seqüência

• dia 18 de dezembro: Classes, Interfaces e Polimorfismo.
• dia 25 de dezembro: folga é Natal. Entraremos em recesso com o curso, estaremos de volta dia 22 de janeiro, ao final de minhas férias.
• dia 22 de janeiro: Coleções, Hashing e Comparadores.

Dúvidas? vá para o fórum.

Procure os mais baratos Livros sobre a Web, Livros sobre Java, Livros HTML ou Livros CSS nas melhores lojas do Brasil.

Desde o lançamento do curso de programação para Web, esta será a primeira vez que não poderemos publicar a aula de hoje nesta terça-feira, como de costume.

A aula já está pronta para publicação, porém devido a problemas de logística, só iremos publicá-la amanhã ainda pela manhã.

Peço desculpas para os alunos que estão esperando, mas peço também compreenção. Afinal, se até os engenheiros da Nasa podem adiar algo planejado, por que não posso eu?

Brincadeiras a parte, amanhã nos veremos. Prepare uma boa dose de café, a aula está bem pesada e longa.

Sejam bem vindos, esta é a nona aula de Programação Web em Java, para saber mais sobre o curso, começe em Curso de Programação Web em Java - CPWJ.

Acabou a parte mais fácil do curso, vamos agora começar a programar. Mas antes disso uma introdução teórica de Java é interessante. Vamos a ela:

Java foi iniciado pela Sun no ano de 1990. James Gosling coordenou a equipe que a desenvolveu inicialmente. No início dos trabalhos o objetivo era desenvolver software para uso em eletrônicos de consumo.
Antes do lançamento os projetistas descobriram que Java era ótimo para a Internet. Tiveram a idéia de utilizar um recurso chamado Applet Java, que permitia que programas funcionassem inseridos (Embed) em páginas Web. Lançada em 1995, rapidamente a linguagem ganhou força como a linguagem para uso com a Internet.

Embora o uso de Applets parecesse interessante, a banda larga não era tão difundida como é hoje, e os links lentos impediam a carga dos programas com uma velocidade aceitável. Hoje em dia, estes Applets são usados para validação de senhas em alguns bancos. Veja que a segurança é um dos pontos extremamente fortes do ambiente Java.

Java acabou se transformando na linguagem mais badalada com a introdução do Jsp-Java Server Page, e dos frameworks como Struts, Hibernate e outros. e do J2ee. Isso permitiu que Java fosse realmente utilizado pelas grandes corporações desenvolver softwares de peso nesta linguagem que inicialmente era despretensiosa.

O principal diferencial de Java para as outras linguagens é sua independência de plataforma, embora seja compilada. Utilizando uma máquina virtual diferente em cada plataforma onde funciona, os programas em si depois de compilados podem ser transportados de um ambiente para outro sem modificações. E para ambientes diferentes eu quero dizer:

• Processadores diferentes: x86, Sparcs, PowerPC, etc
• Sistemas Operacionais diferentes: Windows, Linux, MacOs, Solaris, etc

Assim podemos desenvolver um programa para Windows que funciona em Linux, MacOs, etc.

Mas outras características importantes ainda estão presentes:

• Orientação a Objeto
• Alto nível
• Tipos de dados Estáticos
• Multithreaded
• Extensível
• Bem estruturada
• Acesso a banco de dados

Em Java escrevemos o código em um editor de texto sem formatação, como o bloco de notas do Windows e salvamos o arquivo com a extenção *.java. Usamos o compilador javac para obter o programa executável *.class. Os arquivos .class não possuem código executável (bytecode) para o processador do ambiente de desenvolvimento, como acontece com os arquivos executáveis de outras linguagens. Os códigos são bytecodes para uma Máquina Virtual Java (JVM). Para executá-lo usamos o lançador de programas java que aciona a Máquina Virtual para executar o programa.
O JVM por sua vez traduz os bytecodes java para o processador específico onde está sendo executado o programa.

A plataforma Java inclui além da Linguagem de Programação e da Java Virtual Machine JVM, a API – Biblioteca de Classes.
Esta biblioteca possui um grande conjunto de Classes que implementam várias ferramentas necessárias para os programadores. A maior parte das implementação do Java estão na biblioteca.
O aprendizado da linguagem Java é extremamente rápida, mas devido à amplitude da biblioteca, é necessário muita pesquisa para não tentar reinventar a roda a cada programa desenvolvido.

Na próxima aula iremos começar realmente a programar em Java, escrevendo muito código.

Antes de terminar esta aula no entanto instale o seu ambiente de desenvolvimento Netbeans que eu recomendo para as aulas seguintes. É necessário uma máquina razoável (>1Ghz) e 512Mb de memória para ficar confortável. Porém já vi funcionando com menos.

E vamos fazer um teste para ver se está funcionando:

• Abrir o Netbeans e acionar o menu Arquivo/Novo Projeto;
• Uma janela chamada “Novo Projeto” abrirá. No canto esquerdo tem a identificação do passo em que estamos;
• No passo 1: Selecionar Geral / Aplicação Java , clicar no botão Próximo ;
• Passo 2: Definir o nome da aplicação. Use “AppAloMundo”. (maiúscula e minúscula é importante em Java, nunca se esqueça disso). Defina a pasta onde vai salvar a aplicação e o nome da classe principal: “appalomundo.AloMundo” e clique em finalizar; Faça exatamente como eu estou pedindo a primeira vez, depois se quiser repetir é por sua conta;
• Automaticamente o Netbeans irá criar os diretórios necessários e arquivos para sua aplicação;

Com o projeto pronto para uso, modificar o código de AloMundo.java para:

public class AloMundo {

public static void main(String[] argv){

AloMundo objeto=new AloMundo();

}

/** Creates a new instance of AloMundo */
public AloMundo() {

System.out.println(”Alô mundo!”);

}

}

Salve o arquivo e execute a classe com a tecla <F6> ou com o menu Executar/Executar Projeto Principal.

O resultado, se tudo der certo, será uma aba conforme a imagem abaixo:

Veja após a saída “run:” o resultado da execução do seu programa. Simplesmente Alô Mundo!

Não deixe para depois, antes da próxima aula consiga com todas as suas energias chegar a este ponto de funcionamento do Netbeans (ou de sua ferramenta escolhida). A próxima aula iremos fazer muitos testes e será altamente recomendado que esteja tudo de acordo.

Na Seqüência

• dia 11 de dezembro: todos os fundamentos, rápido e direto!
• dia 18 de dezembro: orientação ao objeto.

Dúvidas? vá para o fórum.

Como o curso terminou a primeira fase, gostaria de saber quem ainda esta acompanhando a aulas. Em uma espécie de chamada deixem um recado no comentário desta mensagem. Agradeço de antemão.

Procure os mais baratos Livros sobre a Web, Livros sobre Java, Livros HTML ou Livros CSS nas melhores lojas do Brasil.

Sejam bem vindos, esta é a oitava aula de Programação Web em Java, para saber mais sobre o curso, começe em Curso de Programação Web em Java - CPWJ.

Na última aula estudamos como lidar com blocos e trechos xHtml e com bordas, margens e preenchimento. Hoje iremos ver o uso de background, ou pano de fundo e como usar tudo isso para diagramação de sua página.

Background

Os parâmetros background permitem definir como será o comportamento do fundo de um bloco. O fundo inclui a área de conteúdo e o preenchimento (padding). É possível definir uma cor para o fundo, ou preencher o fundo com uma figura. Esta figura pode ser repetida por toda a área ou de outras maneiras. Vamos definir um bloco para realizar os testes:

…
<body>
<p>este é o bloco de teste</p>
</body>
</html>

E em style definir algumas características:

<style type=”text/css”>
p {
padding: 40px;
margin: 50px;
heigth: 200px;
width: 300px; }
</style>

Pronto assim teremos uma caixa para aplicar os padrões de fundo. Vamos testar primeiro a cor de fundo:

p{
background-color: #ccc; /* cor de fundo cinza */
}

Nada mais simples. Agora vamos usar uma figura de fundo. Arrume uma imagem *.gif ou *.jpg e copie para o mesmo diretório do arquivo Css. É possível aplicar um padrão repetido por todo o bloco usando:

p{
background-image: url(“nome do arquivo.jpg”);
}

Se quizer controlar como será a repetição

background-repeat: no-repeat; /* a imagem somente uma vez */
background-repeat: repeat-y; /* a imagem repete na vertical */
background-repeat: repeat-x; /* a imagem repete na horizontal */
background-repeat: repeat; /* a imagem repete na vertical e horizontal (padrão) */

Um efeito interessante é manter o fundo fixo quando rolamos a página:

background-attachment: fixed;
background-attachment: scroll; /* rola de forma padrão */

Quando não repetimos a imagem por todo o fundo, podemos posicionar o local onde a imagem irá se apresentar:

background-position: x-pos y-pos ; x-% y-% ; top left ; top center ; top right ; center left ;
center center ; center right ; bottom left ; bottom center ; bottom right ;

Exemplos

Para mostrar uma imagem de fundo exatamente no meio do bloco de modo:

p{
background-image: url(“nomearquivo.gif”);
background-repeat: no-repeat;
background-position: center center;
}

Como os outros parâmetros podemos escrever um grupo de opções de uma vêz só:

p{
background: url(“nomearquivo.gif”) no-repeat center center fixed;
}

As opções podem vir em qualquer ordem e pode-se omitir qualquer uma delas.

Parâmetro Float

Os blocos ‘div’ se comportam exatamente como os parágrafos ‘p’. Quando colocamos um parágrafo na página e definimos uma largura menor que a largura da página é evidente que sobrará espaço a direita do bloco. Veja a figura abaixo:

Digamos que o bloco em azul claro é o fundo do navegador, e os blocos amarelo e verde são dois parágrafos. Usamos Css para definir o parágrafo amarelo e o bloco verde com largura 100px:

#paragrafoamarelo, #paragrafoverde { width:100px; }

Mesmo existindo espaço para os dois parágrafos ficarem lado a lado, como são blocos eles terminam com quebra de linha e o bloco verde continua abaixo.
O parâmetro float permite que um parágrafo simplesmente não quebre a linha no final. O comportamento é de flutuação. O bloco pode ser colocado a esquerda e o restante vai contornar conforme a figura:

Aqui o bloco amarelo possui os seguintes parâmetros:

#paragrafoamarelo{
width: 100px;
float: left; /* flutuando a esquerda */
}

e o verde:

#paragrafoverde{
width:100%; /* parágrafo verde ocupando toda a largura da página */
}

Para colocar os dois parágrafos um ao lado do outro:

#paragrafoamarelo{
width: 100px;
float: left; /* flutuando a esquerda */
}

e o verde:

#paragrafoverde{
width:100px;
float:left; /* flutuando a esquerda */
}

Diagramação com Css

Vamos falar um pouco sobre diagramação com Css. Como exemplo vamos tomar o código xHtml proposto na última aula com algumas modificações:

…
<body>
<div id=”tudo”>

<div id=”titulopagina”>
<h1>Título da Página</h1>
<h2>Descrição da página parte do título</h2>
<p>Autor: Luís Eduardo. Também parte do título</p>
</div> <!– fechando titulopagina –>

<div id=”menu”>
<h2>Menu de opções:</h2>
<ul >
<li class=”impar”>Opção 1</li>
<li>Opção 2</li>
<li class=”impar”>Opção 3</li>
<li>Opção 4</li>
<li class=”impar”>Opção 5</li>
</ul>
</div> <!– fechando menu –>

<div id=”conteudo”>
<h2>Conteúdo principal da página</h2>
…
</div> <!– fechando conteúdo –>

<div id=”rodape”>
<h2>Feito por Luís Eduardo</h2>
…
</div> <!– fechando rodapé –>

</div> <!– fechando tudo –>

</body>

E vamos planejar um modelo de diagramação desejado:

Como já expliquei várias vezes, o conteúdo do curso é uma apresentação sobre os assuntos. Material detalhado está na web, e já indiquei vários lugares. Vamos fazer esta diagramação acima explicando cada detalhe e depois é por conta de vocês.

Vamos considerar algumas escolhas:

• A largura total da página será fixa e com 758px. (exato para não aparecer a barra de rolagem inferior em tela com resolução 800×600)
• A altura dependerá do conteúdo.
• A barra lateral em amarelo terá 250px
• O título com altura de 200px;
• O rodapé terá altura 40px;

Vamos lá Css com as medidas:

#tudo {
width : 758px;
background-color: #ffcccc;
}#titulopagina {
height : 200px;
background-color: #00ff00;
}

#menu {
width : 250px;
margin: 2px;
background-color:yellow;
}

#conteudo {
width : 498px; /* 758px- 250px -10px (margens dos blocos) */
margin: 2px;
background-color: orange;
}

#rodape {
height : 40px;
background-color: red;
}

Isso fará com que todos os blocos estejam na medida correta, porém um abaixo do outro. Para acertar os blocos no lugar iremos acrescentar o float no conteúdo e no menu:

#menu { …
float:left;
…
} e
#conteudo {…
float:right;
…
}

Isso colocará os blocos menu e conteúdo lado a lado. Porém o comportamento do rodapé ainda será errado. Teste no Firefox e no Iexplorer e veja por si mesmo. Para corrigir isso utilize o parâmetro Clear, que proíbe qualquer conteúdo ao lado de um bloco:

#rodape {…
clear: both; /*proíbe conteúdo a direita e a esquerda do rodapé, fazendo ele ir para baixo */
…
}

Ainda temos alguns probleminhas como ajustes de padding dos blocos e as cores de fundo que não se espandem para baixo no menu e conteúdo, eliminar os pontinhos no menu, centralizar o layout, etc.

body {
margin : 0px 0px;
text-align:center;
}

#tudo {
text-align : left;
…
}

#menu *, #conteudo * {
padding: 0 6px;
}

#menu ul li {
list-style-type:none;
}

Acabou a primeira parte do curso gente, cansei de falar de html, css. Agora fiquem com os especialistas desta área: o Diego Eis do http://www.tableless.com.br e Maurício Samy do http://www.maujor.com. E claro, os cursos web mais completos (infelizmente em inglês) em http://w3schools.com/.

Na próxima aula iremos falar de Java. Uma aula bem teórica, mas é importante saber com o que estaremos lidando.

Aprofundando

Estude alguns outros modelos de layout em:

• http://www.maujor.com/tutorial/lay2col-faux-colunm.php
• http://www.maujor.com/tutorial/qqer-ordem-3colunas.php
• http://tableless.com.br/artigos/tutorial/

Na Seqüência

• dia 4 de dezembro: Vamos falar de Java, aula introdutória.
• dia 11 de dezembro: todos os fundamentos, rápido e direto!
• dia 18 de dezembro: orientação ao objeto.

Dúvidas? vá para o fórum.

Procure os mais baratos Livros sobre a Web, Livros sobre Java, Livros HTML ou Livros CSS nas melhores lojas do Brasil.

Sejam bem vindos, esta é a sétima aula de Programação Web em Java, para saber mais sobre o curso, começe em Curso de Programação Web em Java - CPWJ.

Na última aula estudamos as muitas possibilidades de formatação com textos e fontes, e nesta aula iremos aprender sobre blocos e trechos em xHtml e como usá-los para implementar diagramação Css.

Tags de Bloco e de Trechos (block e inline).

Quanto à diagramação, existem dois tipos de tags disponíveis: tags de blocos e tags de trechos. (block e inline)

• Os tags de blocos tem o comportamento de parágrafos. Possui implícito uma quebra de linha ao final e pode ser usado diretamente no corpo do documento ‘body’. (desde que não seja parte de uma lista ou tabela)

Alguns exemplos de tags de bloco: p, ul, ol, li, table, tr, td, tr, th, etc.

• Os tags de trechos (em inglês inline) devem estar definidos dentro de um bloco necessariamente. Tem o comportamento de uma parte de parágrafo, como uma palavra ou frase e não executam uma quebra de linha.

Alguns tags inline: i, strong, em, img, etc.

Margens, espaçamento, larguras e bordas

Cada bloco definido por um par de tags (<p>… </p>, ou <img… />) tem um conjunto de opções de aparência de bloco customisáveis com Css: marging, padding, height, width, border.

Vejamos a figura abaixo:

Neste bloco as medidas referem-se a :

• A Margin: Margem transparente com a separação de um bloco e o bloco vizinho.
• B Padding: preenchimento ou espaçamento interno do bloco. Espaço entre o conteúdo do bloco, no caso o parágrafo e a borda.
• C Border: Largura da borda.

Além destas medidas, temos ainda a altura (height) e a largura (width), medidas dentro da área com texto na figura. Isso é, a área em azul menos o espaço sem texto (padding). Portanto a largura total visível do bloco é width+2*padding+2*border. O Internet Explorer 6 quando o doctype é Html transitional apresenta a largura de forma incorreta, use sempre Html Strict para evitar problemas. As versões mais antigas devem ser substituídas!

Todas estas opções são configuráveis para cada um dos 4 lados do bloco individualmente: top, left, bottom, right. Assim:

p{ margin-top: 15px; margin-right: 10px; margin-bottom: 20px; margin-left: 12px;
padding-top: 10px; padding-right: 12px; padding-…
border-width-top: 10px; border-width-left: 12px;
… etc
}

Pode-se também configurar em conjunto:

p{
margin: 15px 10px 20px 12px; // define na següência: topo, direita, base, esquerda, no sentido do relógio.
padding: 10px 12px; // define topo e base como 10px e laterais como 12px
border-width: 20px; // toda borda com 20px de largura
}

Para as bordas temos ainda estilo e cor:

p {
border-width: 10px 12px; //borda 10px de largura no topo e base e 12px nas laterais
border-style: solid; // borda cheia para todos os lados.
border-color: red;
}

As opções para estilo de borda são:

• dotted – série de pontos,
• dashed – tracejados,
• solid – linha contínua,
• double – duas linhas sólidas,
• groove – uma linha em baixo relevo
• ridge – uma linha em alto relevo
• inset – simula o bloco todo inserindo na tela
• outset – simula o bloco todo saltando para fora da tela

Recomento testar todas as opções para que você veja o efeito de cada uma delas.

Já para a largura da borda (width) além das medidas em pixels (px) ou caracteres (em), temos as opções abaixo:

• thin: fina
• medium: média
• thick: grossa

As opções das bordas podem ser definidas em conjunto:
seletor { border: cor estilo largura;}

h1{
border: black solid thick;
}

Blocos

Com estas opções, podemos controlar a aparência de qualquer bloco de xhtml. No entanto em algumas situações queremos definir blocos lógicos formados por vários parágrafos e outros objetos.

Para isso existe o tag ‘div’. Com o comportamento padrão exatamente igual a um parágrafo, gerando uma quebra de linha após o ‘/div’.

O principal uso é delimitar os pedaços da página definindo blocos lógicos semânticos:

…
<body>
<div id=”titulopagina”>
<h1>Título da Página</h1>
<h2>Descrição da página parte do título</h2>
<p>Autor: Luís Eduardo. Também parte do título</p>
</div>
<div id=”menu”>
<h2>Menu de opções:</h2>
<ul >
<li class=”impar”>Opção 1</li>
<li>Opção 2</li>
<li class=”impar”>Opção 3</li>
<li>Opção 4</li>
<li class=”impar”>Opção 5</li>
</ul>
</div>
<div id=”conteudo”>
<h2>Conteúdo principal da página</h2>
…
</div>
</body>

É praticamente obrigatório o uso da propriedade ‘id’ no tag ‘div’, pois só assim é possível modificar alguma aparência em CSS.

#menu {
margin: 10px, 20px;
padding: 5px, 10px;
border: dotted 3px #FCC;
}

Para mudar o comportamento de um tag somente para um dos blocos, basta combinar o id do bloco com o tag a ser modificado:

#menu h2 { font-size: 20px;
color: red; } // define cor vermelha e tamanho 20px para título 2 no bloco menu

#titulopagina h1 { color: blue } //define cor azul para título 1 no bloco titulo pagina

#titulopagina h2 { font-size: 20px;
color: red; } // define cor vermelha e tamanho 20px para título 2 no bloco menu, desta forma o h2 no bloco ‘menu’ será diferente do h2 no bloco ‘titulopagina’.

E aqui algo mais complicado, usando a mesma lógica:
#menu li { color: #000000; } //define cor preto para ítem de lista no menu.
#menu li.impar { color: #cccccc; } //define cor cinza para ítem de lista de classe impar no menu.

Trechos (spam)

Assim como usamos ‘div’ para definir blocos, usamos ’spam’ para definir trechos internos aos bloco.

Este tag é usado principalmente para definir um destaque diferente para um trecho de código interno a um parágrafo.

<p>Este é um parágrafo como outro qualquer. O custo de produção foi <span class=”dinheiro”>R$ 100,00</span>. Embora seja um bom valor, melhor ainda foi o lucro de <span class=”dinheiro”>R$95,00</span>.</p>

Definido assim podemos escolher uma aparência para o “dinheiro”:

.dinheiro {
font-weight: bolder;
color: #eee;
}

Normalmente usamos ’span’ com o parâmetro ‘class’ e ‘div’ com o parâmetro ‘id’.

Diagramação

A aula está ficando muito longa, vou deixar a diagramação para semana que vem.

Aprofundando

• Estude o Box Model no w3c: http://www.w3.org/TR/REC-CSS2/box.html

• Estude todo o conteúdo de Fundamentos Css em http://www.maujor.com

Na Seqüência

• dia 27 de novembro: Mais Diagramação e mais detalhes Css.
• dia 4 de dezembro: Vamos falar de Java, finalmente!

Dúvidas? vá para o fórum.

Procure os mais baratos Livros sobre a Web, Livros sobre Java, Livros HTML ou Livros JSP nas melhores lojas do Brasil.