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.

Artigos Similares:

• Aula 9: Introdução a Java
• Asp.net Vídeo Aulas | Aula 3: Hello World Asp.Net
• Android SDK disponível para Download
• Aula 14: O modelo MVC
• Aula 15: Oracle e Hibernate, fazendo uma busca

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.

Artigos Similares:

• Oitava Aula: Diagramação Css
• Sétima Aula: Blocos, Trechos e pouca Diagramação
• Sexta Aula: texto, fontes e seletores Css.
• Asp.net Aulas | Aula 5: xHtml e Css
• Quinta aula: Introdução a Css

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.

Artigos Similares:

• Sétima Aula: Blocos, Trechos e pouca Diagramação
• Oitava Aula: Diagramação Css
• Sexta Aula: texto, fontes e seletores Css.
• Aula 16: Sistema de busca última parte: Jsp e Struts
• Quinta aula: Introdução a Css

Sejam bem vindos, esta é a sexta 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 o que é e como utilizar Css de acordo com o Web Standard. Hoje vamos ver muitas possibilidades de formatação com textos e fontes.

Parâmetros Text

Vamos colocar nosso texto sob controle? Similar à formatação de Parágrafo do Word, vamos começar vendo uma lista de parâmetros que modificam a aparência do texto:

• direction: direção do texto.
  Valores: ltr e rtl, respectivamente esquerda para direita e direita para esquerda
• line-height: distância entre linhas.
  Valores: “normal”, numérico, ou porcentagem
• letter-spacing: espaço entre caracteres.
  Valores: “normal” e numérico.
• text-align: alinhamento texto.
  Valores: left, right, center e justify.
• text-decoration: Modificadores para “decoração”.
  Valores: none (não apresenta decoração), underline (sobrelinha), overline (uma linha acima), line-through (texto riscado) e blink (piscante, use com moderação)
• text-indent: identação da primeira linha do bloco.
  Valores: numérico e porcentagem.
• text-transform: coloca texto em maiúscula ou minúscula.
  Valores: none, capitalize (primeira letra maiúscula e restante minúscula), uppercase (maiúscula) e lowercase (minúscula)
• white-space: define como o espaço entre as palavras dentro de um bloco é gerenciado.
  Valores: “normal” (padrão do xhtml), pre (permite repetir espaços e respeita enter e outros), nowrap (não quebra a linha automaticamente)
• word-spacing: aumenta ou diminui o espaço entre palavras.
  Valores: “normal” ou numérico.

Exemplos:

p {
text-indent: 20px; /* 20pixels */
}

h1,h2,h3,h4 {
word-spacing: 1.4em; /* 1,4 vezes a largura de uma letra */
letter-spacing: 0.3em; /* metade da largura de uma letra */
text-align: center;
}

Parâmetros Font

• color: Cor da fonte. Veja como definir as cores abaixo em aprofundando.
• font-family: definir uma lista com o nome da fonte utilizado ou um nome de família genérica.
  Valores:
  • nome da fonte. Usar aspas em caso de nomes compostos “lucida console”.
  • nome de uma família genérica: serif, sans-serif, cursive,fantasy e monospace.
• font-size: tamanho da fonte
  Valores: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, numérico e porcentagem.
• font-style: estilos da fonte
  Valores: normal, italic, oblique.
• font-weight: Define a força do negrito.
  Valores: “normal”, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
• font-variant: define as letras em maiúsculo.
  Valores: small-caps;
• *font: define vários dos elementos acima ao mesmo tempo, veja o exemplo “h1″.

Exemplos:

body {
font-family: courier, serif;
color: black;
}

p {
font-family: arial, "lucida console", sans-serif;
font-weight: bold;
font-style: italic;
font-size: 12px;
}

h1{
font: italic 900 22px arial,"lucida console",sans-serif;
}

Seletores

Até agora nós indicamos que é possível modificar o comportamento de qualquer tag padrão xhtml.

Indicamos exemplos de como modificar todo o conteúdo da página (usando body), os parágrafos (usando p) e os títulos (usando h1, h2, etc).

Porém existem situações que desejamos modificar um único parágrafo, um título apenas da página, ou um grupo de parágrafos. Para executar esta tarefa existem dois parâmetros que podemos incluir nos tags xHtml: id e class.

• id: identificar de um elemento único na página. É como um Rg de um elemento de página, e justamente por isso não pode ser repetido.

<table id="Receitas">
...
</table>

<table id="Despesas">
...
</table>

• class: identificador de pertença a um grupo de elementos. É usado para classificar um tag como pertencente a um grupo. Um tag pode ser identificado como parte de um único grupo de elementos.

<p>Parágrafo comum</p>
<p class="pergunta">Este é um parágrafo com uma pergunta</p>
<p class="resposta">Este é um parágrafo com uma resposta</p>
<p class="pergunta">Este é um parágrafo com outra pergunta</p>
<p class="resposta">Este é um parágrafo com outra resposta</p>

Uma vez definido a “class” ou “id” é posível aplicar um Css diretamente a eles. Para class use o caracter “.”:

.pergunta {
color: #ccc;
word-spacing: 1.2em;
}

.resposta {
background-color:#ccc;
color: #fff;
}

E para id usamos o caracter “#”:

#receitas {
color:#fff;
background-color:#000;
}

#despesas {
color:#OOO;
background-color:#FFF;
}

Eventualmente o mesmo tag pode ser identificado por um id e fazer parte de um class:

<p id="principal" class="resposta">Esta é a "principal" resposta.</p>

Neste caso os Css de #principal e .resposta serão aplicados, com prioridade para #principal.

Exercícios

• Retomar os exercícios da última aula, aplicando os novos conceitos.

Aprofundando

• Estude como definir qualquer cores nos links: http://erikasarti.net/html/tabela_de_cores_web_safe.htm e http://infowester.com/coreshtml.php
• Faça uso do ambiente de teste do w3cschools em: w3schools.com

Na Sequência

• Blocos, trechos e Diagramação.

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

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

Artigos Similares:

• Sexta Aula: texto, fontes e seletores Css.
• Sétima Aula: Blocos, Trechos e pouca Diagramação
• Quinta aula: Introdução a Css
• Oitava Aula: Diagramação Css
• Aula 10: Java Essencial

Esta é a primeira avaliação do curso CPWJ: Curso de Programação Web em Java , para saber mais comece em Curso de Programação Web em Java – CPWJ.

Conforme artigo “Preparando a primeira Avaliação CPWJ“, estou publicando hoje a primeira prova. A previsão é em torno de 5 provas no total. No artigo acima eu explico as motivações da prova, e quem deverá fazê-la.

Orientações

Copie o texto da prova, preencha as respostas e os dados, salve em um arquivo TXT e envie anexado para o endereço “prova arroba tecnoclasta ponto com”. Você deverá receber um email automático confirmando o recebimento da prova. Não use este email para se comunicar comigo, o fórum foi criado com esta utilidade.

Somente as provas com todos os dados preenchidos serão corrigidas e estarão armazenadas para o cálculo da nota final e o envio do certificado.

Não utilize o validador do W3C para corrigir a prova, antes de me enviar. A honestidade é consigo mesmo, não comigo. Eu não vou ser enganado se você não estiver aprendendo, afinal o certificado é apenas algo informal, o que vale é o seu conhecimento.

Para o aluno com o melhor resultado estou preparando uma surpresa no final do curso.

Prova

1. Procure no código abaixo 4 erros de padronização xHtml Strict. Descreva o motivo de cada um dos problemas:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<title>Site do Prof. Luis Eduardo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Prof. Luis Eduardo" />
<meta name="keywords" content="site,xhtml,pagina" />
<meta name="date" content="2007-16-10T19:16:57+00:00" />
<LINK REL="stylesheet" TYPE="text/css" MEDIA="all" href="estilo.css" />
</head>
<body>
<h1>Este é o título</h1>
<p>Oi Mundo! Esta é minha primeira página XHTML padronizada e funcional</p>
<a href="http://www.tecnoclasta.com/">leia Tecnoclasta</a>
<ul>
<li>item 1
<li>item 2
<li>item 3
<li>item 4
</ul>

<img src="http://www.tecnoclasta.com/wp-content/uploads/2007/10/hubble.jpg" alt="tecnoclasta" />

</body>

</html>

Solução:
a.

b.

c.

d.

2. Utilizando o texto abaixo, contrua uma página xHtml Strict válida. Inclua no final do texto uma lista de links que você acha interessante e uma tabela de minicípios que você já visitou, com a data da visita e uma coluna indicando uma nota de satisfação com a visita. Incluir uma foto qualquer publicada na internet. (pode usar esta se quizer: “http://www.tecnoclasta.com/wp-content/uploads/2007/11/pouso.png”)

”
Preparando a primeira Avaliação CPWJ

Sejam bem vindos, este artigo faz parte do Curso Programação Web em Java, para saber mais comece em Curso de Programação Web em Java – CPWJ

Conforme escrevi no anúncio do curso, pretendo distribuir um certificado informal, para os alunos que fizerem este curso que está em andamento. É claro que um certificado indica que o aluno teve rendimento mínimo de aprendizado. E para aferir aprendizado, ainda não inventaram nada melhor que uma avalição.

Portanto, estou marcando para a próxima Sexta-Feira, 9 de novembro de 2007 a primeira avaliação de nosso curso. O conteúdo a ser avaliado é xHtml.

A prova será publicada aqui mesmo e a solução dos exercícios serão recebidos por email a ser divulgado no momento da prova. Irei corrigir as provas uma-a-uma, mas conto com a paciência, pois não terei muito tempo disponível para isso. Minha meta de prazo de correção máximo de uma prova será um semana após o envio. É muito, mas não tenho idéia quantos alunos irão realizá-las. O gabarito, e a nota do aluno será a resposta que o aluno irá receber por email.

Não irei publicar o gabarito no site e não tirarei dúvidas sobre os exercícios da prova no fórum. Lembre-se que o curso é aberto, se está chegando agora por aqui, não tem problema, estude o conteúdo das aulas, faça a prova, envie o email e aguarde a correção.

Somente os alunos que obterem resultados acima de 7 receberão o certificado. Acho que uma prova com consulta e sem tempo definido para realização deveria ter nota de corte ainda maior.

Então façam uma revisão do conteúdo, tirem dúvidas no fórum e boa sorte.

“

Resposta:

<coloque aqui o código html da página proposta>

3. Procure no material de referência indicado 2 tags não apresentados no conteúdo do curso (xHtml Strict). Explique a utilização e dê um exemplo de uso:

a.

b.

+++++++++++++++++++++++++++++++++++++++++++++++++++++++

Nome completo:

Identificação no Fórum:

Formação:

Cidade/Estado:

Como ficou sabendo do Curso:

Sugestões e observações:

++++++++++++++++++++++++++++++++++++++++++++++++++++++

As provas podem ser enviadas a qualquer momento. Mesmo que você tenha conhecido o curso bem depois desta data, não se preocupe, o curso é aberto e pode ser realizado a qualquer momento.

Boa sorte.

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

Artigos Similares:

• Primeira Avalição CPWJ
• Preparando a primeira Avaliação CPWJ
• Segunda Aula: Página mínima XHTML
• O Curso Web está indo de “Vento em Popa”
• Quarta Aula: Links, Âncoras, Tabelas e Imagens

Sejam bem vindos, este artigo faz parte do Curso Programação Web em Java, para saber mais comece em Curso de Programação Web em Java – CPWJ

Conforme escrevi no anúncio do curso, pretendo distribuir um certificado informal, para os alunos que fizerem este curso que está em andamento. É claro que um certificado indica que o aluno teve rendimento mínimo de aprendizado. E para aferir aprendizado, ainda não inventaram nada melhor que uma avalição.

Portanto, estou marcando para a próxima Sexta-Feira, 9 de novembro de 2007 a primeira avaliação de nosso curso. O conteúdo a ser avaliado é xHtml.

A prova será publicada aqui mesmo e a solução dos exercícios serão recebidos por email a ser divulgado no momento da prova. Irei corrigir as provas uma-a-uma, mas conto com a paciência, pois não terei muito tempo disponível para isso. Minha meta de prazo de correção máximo de uma prova será um semana após o envio. É muito, mas não tenho idéia quantos alunos irão realizá-las. O gabarito, e a nota do aluno será a resposta que o aluno irá receber por email.

Não irei publicar o gabarito no site e não tirarei dúvidas sobre os exercícios da prova no fórum. Lembre-se que o curso é aberto, se está chegando agora por aqui, não tem problema, estude o conteúdo das aulas, faça a prova, envie o email e aguarde a correção.

Somente os alunos que obterem resultados acima de 7 receberão o certificado. Acho que uma prova com consulta e sem tempo definido para realização deveria ter nota de corte ainda maior.

Então façam uma revisão do conteúdo, tirem dúvidas no fórum e boa sorte.

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

Artigos Similares:

• Preparando a primeira Avaliação CPWJ
• Primeira Avalição CPWJ
• Novas (vídeo) aulas de Programação para Web: desta vez ASP.NET
• Atraso na Aula do Curso Java e novidades
• O Curso Web está indo de “Vento em Popa”

Sejam bem vindos, esta é a quinta aula de Programação Web em Java, para saber mais sobre o curso, comece em Curso de Programação Web em Java – CPWJ

Na última aula estudamos a última parte de xHTML. Hoje vamos ver como podemos mudar o comportamento padrão dos tags xHtml, mudando a aparência das páginas.

Css é a segunda parte do curso. Significa Cascate Style Sheet, ou folhas de estilo em cascata. O objetivo é mudar a aparência padrão dos tags xHtml.

Para usar Css e manter a validação da página xHtml temos duas opções: usamos o tag ‘style’ no cabeçalho do xhtml, ou incluímos um arquivo *.css no cabeçalho.

Usando o tag Style

<style type=”text/css” title=”mystyles” media=”all”>
<!–

aqui colocar qualquer código css.

–>
</style>

Usando o tag ‘link’ para inclusão de página Css

Neste caso todo o código Css será digitado em um arquivo separado e na página xHtml colocaremos uma referência no ‘Head’ assim:

<link href=”estilos.css” rel=”stylesheet” type=”text/css” media=”all” />

Não é preciso argumentar muito que a segunda opção é a melhor escolha não é? Só tome cuidado com o cache do navegador. Quando estiver estudando CSS, desative o cache para evitar mudar CSS que está correto, porque o navegador poderá estar mostrando código antigo.

Pronto, agora já dá para começar a codificar, você já sabe onde colocar o código.Vamos ver como modificar a aparência do texto de uma página.
Para isso é necessário definir duas coisas: “O que” e “como”. Isso é, qual parte da página desejamos modificar a aparência e como será a modificação que desejamos.

A sintaxe de uma regra é a seguinte:

oque { como: assim; }
seletor { parâmetro: valor;}

No exemplo vamos modificar todos os textos da página, para usar uma fonte vermelha:

body { color: red; }

Body indica todo o documento. Color é o parâmetro de cor da fonte e Red é vermelho!

Este código deverá estar no arquivo estilo.css no mesmo diretório da página xhtml em que você incluiu o código link acima.

É possível mudar praticamente qualquer aparência. Por exemplo para a cor de fundo usa-se background-color:

body{
color: red;
background-color: green;
}

Aproveitei para mostrar que é possível mudar mais de um parâmetro de cada vês.

Mas nem sempre queremos todo o texto da página da mesma cor, quase sempre não. Então podemos aplicar mudanças para cada tag xHtml individualmente:

h1 { color: blue;}
h2, h3, h4, h5, h6 {color: gray; }

O segundo exemplo mostra que é possível aplicar a mesma modificação a vários seletores simultaneamente. Aqui indicamos que a fonte dos títulos H1 são azuis e dos outros títulos cinza. Observe que podemos fazer simultaneamente:

body { color: red; }
h1 { color: blue;}

Veja que aqui temos todos os textos em vermelho e os títulos em azul. O nome “Cascata” foi escolhido exatamente por esta característica: a cor azul do título ‘h1′ irá sobrepor a cor vermelha do ‘body’. Sempre a opção mais específica sobrepõe a mais genérica. Esta sobreposição permite escrever estilos mais ou menos específicos conforme a necessidade. O navegador irá resolver a sobreposição em cascata de forma previsível, ganhando sempre a característica aplicada ao indicador mais específico. Tocaremos neste assunto novamente em uma próxima aula.

Bom, esta aula foi bem curta devido ao feriado, o objetivo foi apenas mostrar rapidamente o que é o Css e para que serve, e como aplicar código Css em uma página xHtml padrão sem perder a validação.

Exercícios

Acerte a página da aula anterior, com cores de fonte e fundo diferentes. Esqueça o bom gosto e teste várias cores. Valide no w3c. Valide também a página Css em http://jigsaw.w3.org/css-validator/#validate-by-upload.

Aprofundando

O conteúdo da aula é uma introdução bem rápida e básica. Alunos que queiram saber tudo sobre Css uma referência obrigatória é o site do Maujor: http://www.maujor.com.

Próximas Aulas

• Seletores, blocos e trechos.
• Deixando as Fontes totalmente sobre nosso controle.

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

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

Artigos Similares:

• Quinta aula: Introdução a Css
• Sexta Aula: texto, fontes e seletores Css.
• Sétima Aula: Blocos, Trechos e pouca Diagramação
• Asp.net Aulas | Aula 5: xHtml e Css
• Terceira Aula: Classificando o conteúdo

Sejam bem vindos, esta é a quarta aula de Programação Web em Java, para saber mais sobre o curso, comece em Curso de Programação Web em Java – CPW

Na última aula estudamos um pouco com o que podemos preencher o conteúdo de uma página xHTML. Hoje vamos ver mais alguns detalhes. Vamos ver o que torna a Web uma Teia de Aranha, e como deixar uma página mais “quadradinha”.

Links e Âncoras

Direto ao primeiro assunto. O que torna a internet uma Teia de Aranha, são os links. Todo mundo que já navegou alguma vez na vida na internet sabe que todos estes textos com um sobrescrito embaixo e normalmente em azul, quando clicados te levam a um outro conteúdo da internet. Tudo automaticamente.

Fácil clicar, mas como fazer? Nada mais simples, quando se escreve uma página xHtml, para construir um link basta indicar para onde irá com o código abaixo:

<a href=”http://www.tecnoclasta.com/“>Ir para Tecnoclasta</a>

O texto em itálico indica o local que o navegador irá carregar no momento que o usuário clicar no link, em negrito está o texto que o usuário verá: Ir para Tecnoclasta.

Pode-se apontar para uma página específica de um site:

<a href=”http://www.tecnoclasta.com/category/aula-cpwj/“>Ir para o histórico das Aulas do CPWJ</a>

Na verdade é possível ir até uma posição específica da página. Por exemplo diretamente no formulário de contato da página de anúncio do Curso de Programação Web:

<a href=”http://www.tecnoclasta.com/2007/10/01 /curso-gratuito-de-programacao-para-web-em-java/#respond“>Comentários do Anúncio do Curso</a>

Observe que utilizamos o símbolo #respond para indicar uma posição dentro de outra página. Se a posição se referisse a algo dentro da própria página:

<a href=”#respond“>Comentários do Anúncio do Curso</a>

Na página de destino é preciso definir onde fica os comentários. Utilizamos uma âncora:

<a name=”respond”>Local onde se quer ir</a>

Nos casos em que a posição na página de destino é um título marcado com ‘hn’, ou mesmo um parágrafo ou qualquer objeto específico, pode-se usar o parâmetro ‘id’. Veja que no exemplo da página de anúncio a posição ‘respond’ está definida assim:

<h4 id=”respond”>Envie um comentário</h4>

Isso é o básico do básico de links e âncoras, voltaremos a apresentar mais detalhes conforme a necessidade do curso.

Aprofunde sobre links seguindo o padrão em: http://www.w3.org/TR/1999/REC-html401-19991224/struct/links.html

Tabelas

Tabelas já foi o único recurso para construir páginas html com aparência profissional. Para montar layout de páginas cada vez mais elaboradas e detalhadas ainda é uma ferramenta muito usada, embora não recomendada.
Porém hoje existem outros recursos mais avançados para isso (css). Se quizer se livrar das tabelas em layout de página, use e abuse de http://www.tableless.com.br.

Portanto, volto a insistir: xHtml é para conteúdo, não aparência. E Tabelas são somente para construir coisas assim:

Somente para isso, ok?

Para fazer basta o seguinte código:

<table>
<caption>Notas da Turma</caption>
<tr><th>Número</th><th>Nome</th><th>Notas</th></tr>
<tr><td>001</td><td>Maria</td><td>10,0</td></tr>
<tr><td>002</td><td>José</td><td>0,4</td></tr>
<tr><td>003</td><td>Carlos</td><td>0,8</td></tr>
<tr><td>004</td><td>Elaine</td><td>10,0</td></tr>
</table>

Vamos analisar cada pedaço do código:

<table> Indica início e fim da tabela
<caption> Um título para a Tabela.
<tr> Indica início e fim de cada linha. Observe que os dados de células ficam dentro de uma linha
<th> Uma Célula de Cabeçalho (head). O título de uma coluna, por padrão já vem em negrito e centralizado.
<td> Uma Célula de Dados. Delimita cada informação da tabela

Temos ainda os parâmetros rowspan e colspan, que são usados para gerar algo parecido com o “mesclar” células do Word e Excel. A diferença aqui é conceitual: duas células não são mescladas, mas uma célula é que é esticada.

Exemplos de usos semânticos para colspan:

Veja que a última linha da tabela temos somente 2 células: “Média da Turma” e “3,73″, sendo que a primeira célula nós esticamos para ocupar duas colunas. O código:

…
<td>Elaine</td>
<td>10,0</td>
</tr>
<tr>
<td colspan=”2″>Média da turma</td>
<td>3,73</td>
</tr>
</table>

Muito simples. Podemos fazer o mesmo com as linhas:

Neste caso nós incluímos uma nova célula na primeira linha e esticamos 6 linhas para baixo:

<table border=”1″ height=”109″ width=”304″>
<tr>
<th rowspan=”6″>Turma CPWJ</th>
<th>Número</th>
<th>Nome</th>
<th>Notas</th>
</tr>
<tr>
<td>001</td>
<td>Maria</td>…

Aprofunde sobre Tabelas seguindo o padrão em:
http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html

Imagens

A Web é rica em imagens. Para inserir imagem em um documento xHtml, é preciso que a imagem esteja disponível na internet através de um endereço:

http://www.tecnoclasta.com/wp-content/uploads/2007/10/harmony.jpg

Como estamos fazendo testes localmente as imagem devem ser colocadas no mesma pasta do arquivo xHtml em que será inserido. Depois é só incluir uma referência no xHtml:

<img src=”harmony.jpg” />

Em caso de referência em outro servidor ou em algo publicado na net, devemos usar o endereço completo:

<img src=” http://www.tecnoclasta.com/wp-content/uploads/2007/10/harmony.jpg” />

Imagens devem estar dentro de parágrafos ou outros blocos para serem validadas.

Dois parâmetros são altamente recomendados:

• alt – Define um texto alternativo caso o dispositivo não possa carregar a imagem (celulares ou navegadores texto). Usado pelo Internet Explorer como ajuda (hint) em amarelo quando paramos com o mouse sobre a imagem. Obrigatório para Strict.
• title – Define um título para a imagem. Usado pelo navegador para identificar a imagem. No firefox é usado como ‘hint’.

<img src=”imagem.jpg” alt=”Imagem de jacaré” title=”Imagem de jacaré” />
Aprofunde sobre imagens seguindo o padrão em:

http://www.w3.org/TR/1999/REC-html401-19991224/struct/objects.html#h-13.2

E é isso!

Já estamos encerrando o básico de xHtml. Na próxima aula iremos começar a ver CSS, que permite mudar o comportamento e aparência padrão dos tags que já vimos.

Vários outros tópicos de xHtml serão aprofundados junto com Css, Javascript, Jsp, conforme forem necessários. O objetivo até agora é escrever páginas xHtml com o conteúdo bem básico, usando links, tabelas e listas que sejam validadas no W3c validator.

Dica para alunos que conhecem Html ou usam outras fontes de referência. Para a validação xHtml Strict não é permitido o uso dos tags e parâmetros “Deprecated”. Uma lista completa de “Deprecated” você encontra no site do Maujor.

Exercícios

Vamos fazer um exercício bem completo desta vez. Copie o texto abaixo e faça uma página xHtml completa validada no W3c:

Lançamento: Discovery construindo a ISS <<Título de nível1

<<imagem: >>

http://www.tecnoclasta.com/wp-content/uploads/2007/10/sts120-s-001.thumbnail.jpg

Este artigo faz parte da cobertura de Tecnoclasta para a missão STS-120 do Ônibus Espacial Discovery.
Mais notícias em:

<<fazer uma lista não numerada>>
* Lançamento: Discovery construindo a ISS http://www.tecnoclasta.com/2007/10/24/lancamento-discovery-construindo-a-iss/
* Discovery: Casco checado, aproximando da ISS http://www.tecnoclasta.com/2007/10/25/discovery-casco-checado-aproximando-da-iss/
* Discovery: Docagem na Estação Espacial http://www.tecnoclasta.com/2007/10/25/discovery-docagem-na-estacao-espacial/
* Discovery: Curiosidades da missão STS-120 http://www.tecnoclasta.com/2007/10/26/discovery-curiosidades-da-missao-sts120/
* Harmony: já instalado na Estação Espacial http://www.tecnoclasta.com/2007/10/26/harmony-ja-instalado/

Foi executado com sucesso o lançamento da Discovery ontem dia 23/10/2007 às 13:38 horário de Brasília. Esta viagem tem como missão a continuidade da construção da Estação Espacial Internacional.

Chamada STS-120 é o vigéssimo terceiro vôo para construção da IIS e o 120º vôo de ônibus espaciais.

<<imagem: >>

http://www.tecnoclasta.com/wp-content/uploads/2007/10/sts120-s-011.jpg

Lançamento da Discovery para a Missão STS-120 em 23/10/2007

Será instalado o módulo Harmony de construção italiana, que será utilizado para interconectar os futuros módulos Japoneses e Europeus à estação. Também será reposicionado um painéis solares para a posição definitiva.

<<imagem: >>

http://www.tecnoclasta.com/wp-content/uploads/2007/10/harmony.jpg

<<imagem: >>

http://www.tecnoclasta.com/wp-content/uploads/2007/10/182721main_harmony_iss_small.jpg

Módulo Harmony: conectando os futuros módulos com a Estação Espacial

Veja o cronograma de atividades na missão STS-120:
<<fazer uma tabela>>
dia atividade
1 lançamento
2 verificação do escudo de proteção térmica
3 preparação para primeiro EVA
4 instalação do módulo Harmony na Estação
6 preparação para segunda EVA
5 desconecção da estrutura P6 de painéis solares
7 preparação para terceira EVA
8 reconeção da estrutura P6 de painéis solares na sua posição deficitiva

Conforme o andamento da missão teremos novos posts.

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

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

Artigos Similares:

• Quarta Aula: Links, Âncoras, Tabelas e Imagens
• Asp.net Aulas | Aula 5: xHtml e Css
• Primeira Avalição CPWJ
• Harmony: já instalado na Estação Espacial
• Agradecimento e desabafo

Hoje completamos 100 alunos cadastrados em nosso Curso de Programação Web em Java. Confesso que está superando todas as minhas expectativas.

Este artigo é para divulgar um resumo do perfil dos alunos que preencheram o questionário inicial do curso. Fiquei bastante contente com o nível geral dos alunos, e tenho certeza que o curso poderá seguir com bastante sucesso.

Os questionários respondidos me indicaram quatro perfis diferentes:

1. Web Designers. Profissionais extremamente competentes em codificação Html, Css e mesmo Flash. Estes alunos procuraram o curso para iniciar a parte de programação, permitindo desenvolver a parte dinâmica de seus sites e de seus clientes.
2. Programadores Web em PHP. Profissionais já tarimbados em programação para Web, porém utilizando PHP. Para estes o objetivo é usar Orientação ao Objeto em Java.
3. Programadores Java. Especialistas em Java para Desktop ou Móbile mas sem experiência em Programação Web.
4. Alunos que acabaram de chegar. Sem experiência anterior.

Identifiquei um ou dois alunos que são professores e desejam aprofundar ou diversificar o conhecimento ou conteúdo de aula. Estou muito contente com a presença de vocês.

Queria aproveitar o momento para dizer que todas as críticas, sugestões e idéias são bem vindas. Não sou o dono da verdade, e as correções nas matérias publicadas são importantíssimas. (keywords é no plural, obrigado Wagner)

Como disse no lançamento do curso: minha experiência é com sala de aulas, e com programas reais, esta é a primeira vez que leciono via web. Conto com a ajuda e compreensão de todos.

Obrigado de novo pela participação.

Se tem interesse em participar, as instruções estão em Curso de Programação Web em Java.

Artigos Similares:

• O Curso Web está indo de “Vento em Popa”
• Atraso na Aula do Curso Java e novidades
• Novas (vídeo) aulas de Programação para Web: desta vez ASP.NET
• Voltando de férias
• Preparando a primeira Avaliação CPWJ

Não precisa se inscrever, leia este artigo e começe as aulas que estão listadas no final do artigo.

Sejam bem vindos para o curso Programação para Web.

Quem sou eu

Antes de mais nada, quem sou eu: Professor Luís Eduardo, 33 anos, ex-professor na Etep Faculdades de São José dos Campos, uma das escolas técnicas mais conceituadas em meu município e região. E também 10 anos na Sabesp, na divisão de Informática do Vale do Paraíba. Eu sou Tecnoclasta.

Trabalho com Java desenvolvendo sistemas Web para a intranet da Sabesp. Começei com o “macarraônico” código JSP acessando diretamente o banco de dados Oracle, e agora, já evoluído, utilizo Struts mais Hibernate nos projetos novos. É claro que os primeiros projetos ainda estão em funcionamento e manutenção. Portanto lido com todo tipo de código jsp + oracle + struts + outros testes.

Objetivo do Curso

O objetivo deste curso é permitir alguém com boa vontade e dedicação desenvolver pequenos sites em Java. Apenas começar o desenvolvimento, o suficiente para conseguir acompanhar o material mais completo e técnico já presente em abundância na Internet. Será também o repositório de informações para meus alunos do curso presencial, que tem o mesmo conteúdo apresentado aqui.

O curso será dividido em oito partes:

• XHtml
• Css
• JavaScript
• Java
• Jsp
• Jstl
• Struts
• Hibernate

Uma sopa de letrinhas não é? Mas não se preocupe, iremos abordar cada um dos ítens devagar e da forma mais didática possível.

Um curso como este é desenvolvido em minha escola em 1 ano. São 6 meses com xhtml, css e javascript, e 6 meses para a parte dinâmica: jsp, jtsl, Struts e Hibernate. E em paralelo Java puro em 6 meses.

Infelizmente eu não tenho organizado comigo todo material com este conteúdo. Eu tenho tudo aqui na cabeça, com cada aula preparada e alguma coisa em anotações. Então vou desenvolver isso aos poucos, com uma lição por semana. Já terminei de postar todas as aulas, então faça seu próprio ritmo. Este é o meu plano de aulas: uma aula por semana, série de exercício e tira dúvidas direto no comentário das aulas. Quem quiser fazer isso a sério, é necessário uma dedicação de no mínimo 3 horas por semana.

As aulas serão totalmente práticas, então nada de ficar teorizando, e contando histórias, vamos direto ao assunto. Com exceção é claro da aula inicial que é muita teórica.

Inscrições

Nada de inscrições. Basta fazer as aulas. Porém eu ficaria feliz se deixasse um comentário neste artigo dizendo que fará as aulas. As aulas serão postadas todas as terças-feiras. Todas as aulas já estão disponíveis.

Material Didático:

Para início de conversa precisamos de uma máquina rodando Windows ou Linux, com acesso a internet e só.

Para o meio do curso vamos precisar também de um ambiente de desenvolvimento Java, mysql e gimp. Observe que é necessário tanto o Internet Explorer quanto o Firefox. Se ainda não usa, instale o Firefox o quanto antes, é um navegador excelente, e obrigatório para os testes de compatibilidade. Para o Firefox tem um download aqui ao lado direito. Para os usuários de Linux é muito interessante ter o Internet Explorer, para realizar testes de compatibilidade. Veja o ie4linux.

Os outros downloads você encontra aqui.

Para a próxima aula:

download killshot

• Preparar o material, instalar tudo e convidar os amigos para fazer o curso também.
• Leia: http://pt.wikipedia.org/wiki/Web. Aula dia 9 de outubro: Web como funciona. ( já publicado)

Guarde esta página em favoritos (teclas ctrl+d), para poder continuar o curso a partir da próxima aula.

Para os mais entendidos: feeds, ou assine por email

Conteúdo já publicado:

• Atalho para todas as aulas já publicadas
• Primeira Parte: xHtml e Css
  • Primeira Aula: 9 de outubro | Web: como Funciona
  • Segunda Aula: 16 de outubro | Página Mínima XHtml
  • Terceira Aula: 23 de outubro | Classificando o conteúdo
  • Quarta Aula: 30 de outubro | Links, Âncoras, Tabelas e Imagens
  • Quinta Aula: 6 de novembro | Introdução a Css.
  • Primeira Avaliação: 9 de novembro
  • Sexta Aula: 13 de novembro | Texto, fontes e seletores Css.
  • Sétima Aula: 20 de novembro | Blocos, Trechos e pouca Diagramação
  • Oitava Aula: 27 de novembro | Diagramação Css
• Segunda Parte: Java
  • Nona Aula: 4 de dezembro | Introdução a Java
  • Décima Aula: 11 de dezembro | Java Essencial
  • Décima Primeira Aula: 18 de dezembro | Classes, Interfaces e Polimorfismo
  • dia 25 de dezembro | Natal, folga do curso.
  • Décima Segunda Aula: 22 de janeiro | Coleções, Hashing e Comparadores.
  • Décima Terceira Aula: 29 de janeiro | Exceções e tratamento de erros
• Terceira Parte: Jsp, Struts, Hibernate: Web
  • Décima Quarta Aula: 14 de fevereiro | O modelo MVC
  • Décima Quinta Aula: 19 de fevereiro | Oracle e Hibernate, fazendo uma busca
  • Décima Sexta Aula: 25 de fevereiro | Sistema de busca última parte: Jsp e Struts
  • Décima Sétima Aula: 7 de março | Hibernate e Camada Model

    toy story dvd download

  • Encerrando o Curso de Programação para Web em Java.

Livros Recomendados:

Html, Xhtml, Css: Use a Cabeca Html Com Css e Xhtml – Elisabeth Freeman, Eric Freeman

Geral Sobre Java:Java como Programar, Deitel

Sobre JSP e Servlet:Use a Cabeça! Jsp – Brian Bashan, Kathy Sierra, Bert Bates

Outros livros:

Sobre Hibernate:Java e Hibernate

Sobre Struts:Java e Struts

Artigos Similares:

• Curso Gratuito de Programação para Web em Java
• Curso Gratuito de Programação Asp.Net (com vídeo Aulas)
• Asp.net Aulas | Aula 5: xHtml e Css
• Encerrando o Curso de Programação para Web em Java.
• Asp.net Vídeo Aulas | Aula 4: Componentes Básicos

Sejam bem vindos, esta é a terceira aula de Programação Web em Java, para saber mais sobre o curso, comece em Curso de Programação Web em Java – CPWJ

Na última aula estudamos como montar uma página Xhtml de acordo com o Web Standard. Hoje vamos ver o que podemos colocar no body, isso é, o que é permitido fazer no conteúdo da página.

>>>>Parênteses >>>>>>>>

Amigo Web Designer presente no curso: fique atento. Estamos utilizando o padrão Web, ou Web Standard. Existem muitas vantagens em utilizar o padrão diante de todos os recursos despadronizados presentes nos navegadores mais utilizados pelo mercado. A principal é a facilidade de portar o código para vários outros navegadores mais simples, como os presentes em celulares, e outros equipamentos. Falaremos também sobre Tableless, pode começar lendo um FAQ.As regras de utilização de xHTML de acordo com o padrão é muito mais restrita. Então atenção aos detalhes.

<<<< Fecha parênteses <<<<

Voltando ao conteúdo. Em primeiro lugar, os tags permitidas no bloco body tem por objetivo indicar o tipo de informação ali colocada. Repetindo: explicar o tipo da informação.

Desde a versão 4.01 do HTML a aparência não é objetivo do HTML. Então esqueçam da aparência do documento neste momento. O que vamos fazer no (x)HTML é indicar o que é um bloco de texto de forma semântica. Para aparência usaremos CSS.

Um bloco de texto na página Html pode ser uma porção de coisas:

• Um parágrafo
• Um título
• Uma lista, ou um ítem de uma lista
• Uma citação
• Um endereço
• Código de programação
• Texto predefinido
• Texto enfatizado
• etc.

Observe novamente, todos estes indicadores são nomes de coisas lógicas em uma página html. Não indicam nunca a aparência. É claro que uma lista na sua cabeça tem uma determinada aparência. Mas em Xhtml indicar que um bloco de texto é uma lista, tem exatamente este objetivo: indicar que é uma lista. A aparência é conseqüência.

Vamos começar com as coisas simples.

Parágrafos

Em xHtml todo o texto corrido como este que estou escrevendo deve ser delimitado com o tag ‘p’. Desta maneira:
<p>Este é o primeiro parágrafo. Veja que uma frase na mesma linha não deve ser delimitada. Um parágrafo é diferente de uma frase, ok?</p>

<p>Veja que este é o segundo parágrafo. A aparência padrão de parágrafos já coloca um pequeno espaço entre parágrafos. Isso é configurável via CSS, aliás toda a aparência é.</p>

Títulos

As páginas Web são recheadas de títulos. Como estes títulos aí em cima: “Parágrafo”, “Títulos”, “Terceira Aula: Classificando o conteúdo”. Observe que existem títulos e subtítulos. No caso deste artigo, “Parágrafo” é um subtítulo de “Terceira Aula….”

Para permitir a construção de títulos e subtítulos o xHtml permite a utilização de até 6 níveis de títulos: ‘h1′, ‘h2′, ‘h3′, ‘h4′, ‘h5′ e ‘h6′. O nível 1 é para os títulos mais importantes da página e ou os outros devem ser usados para caracterizar subtítulos.

Neste site Tecnoclasta (http://www.tecnoclasta.com), por exemplo, o nome do site no topo da página tem título de nível 1: <h1>Tecnoclasta</h1>, os títulos dos artigos tem título de nível 2: <h2>Terceira Aula: Classificando o conteúdo</h2>, os títulos das sessões a direita, nível 3: <h3>Assine Tecnoclasta</h3>, e por fim os subtítulos dentro de um artigo tem nível 4: <h4>Parágrafos</h4>.

Observe que a hierarquia de títulos é construída de acordo com a importância relativa de cada uma das informações, não tem nenhuma relação com aparência. De novo: esqueça a aparência por enquanto.

Listas

Outro tipo de informação comum em uma página web são as listas. Listas existem dois tipos: numeradas e não-numeradas. As lista não numeradas usam dois tags ‘ul’ (unordered list) e ‘li’ (list item), respectivamente para delimitar a lista, e o ítem da lista. Para cada ítem da lista ele coloca um marcador, que pode ser uma seta ou bolinha. Assim:

<ul> use este para o ínício

<li>primeiro item da lista</li>
<li>segundo item da lista</li>
<li>terceiro item da lista</li>

</ul> e este para o fim da lista

Resultado:

• primeiro item da lista
• segundo item da lista
• terceiro item da lista

As listas numeradas automaticamente incluem números antes de cada ítem da lista. Funcionam igual a lista não-numerada. No exemplo anterior trocando ‘ul’ por ‘ol’ (ordered list) obteríamos:

1. primeiro item da lista
2. segundo item da lista
3. terceiro item da lista

Não é necessário digitar os números.

Listas de Definição

Em várias situações precisamos construir uma lista de definições, como num dicionário. Em uma lista de definições nós temos os termos a serem definidos e temos cada uma de suas definições. Para construir uma lista de definição temos 3 tags:

‘dl’

De definition list, delimita o início e fim da lista

‘dt’

Delimita cada um dos termos da lista

‘dd’

Delimita cada defininição da lista

A própria lista acima foi construída em forma de lista de definição. Veja o código:

<dl>
<dt>’dl’</dt><dd>De definition list, delimita o início e fim da lista</dd>
<dt>’dt’</dt><dd>Delimita cada um dos termos da lista</dd>
<dt>’dd’</dt><dd>Delimita cada defininição da lista</dd>
</dl>

Endereços

Indicar o endereço de um local:

Citações

Quando citamos o texto de um livro, site ou mesmo uma frase de outro autor utilizamos a tag ‘cite’: <cite>Ser ou não ser, eis a questão.</cite>

Uma segunda maneira de fazer citações é utilizar o tag ‘q’ de quotation ou cotação. Este tag automaticamente <q>”coloca um texto entre aspas”</q>. Porém não é reconhecido pelo Internet Explorer (os testes do aluno Fábio Costa nem no IE7 funciona. Testes do aluno Cristian indicaram que no Ie8 está ok). Portanto dê preferência ao ‘cite’ e ao ‘blockquote’.

Para blocos de citações mais longas com parágrafos inteiros temos ainda o tag ‘blockquote’. Observe que ele exige um ou mais blocos dentro:

<blockquote><p>Esta citação inclue mais de um parágrafo</p>
<p>Este é o segundo parágrafo da citação</p></blockquote>

Sem os tags ‘p’ dentro do blockquote o código não é validado.

Para os tags ‘blockquote’ e ‘q’ é opcional indicar quem é o autor da citação. Use o parâmetro ‘cite’:
<q cite=”Einstein”>A velocidade da luz é igual para todos os referenciais inerciais.</q>

O texto em ‘cite’ não é mostrado, mas fica armazenado para o robô dos sistemas de busca.

Código

Código de programação é um dos tipos de informação mais comuns em sites. Este site mesmo está repleto de códigos. Para indicar que algo é código temos o tag ‘code’:
<code>
for(i=0;i<10;i++){
System.out.println('contar até 10: '+i);
}
</code>

Ênfase e ênfase forte

Para destacar uma frase ou palavra no meio de um parágrafo temos duas opções: utilizar de ênfase ou de ênfase forte. Os tags são, respectivamente, ‘em’ e ‘strong’:

<p>Isso é um parágrafo. Isso é <em>importante e deve ser destacado</em>. No entanto isso é <strong>ainda mais importante e deve ser ainda mais destacado.</strong></p>

Observe que a aparência padrão para ‘em’ é o itálico e ‘strong’ é o negrito. Mas isso é o padrão e podem ser modificados via CSS. Textos enfatizados devem fazer parte de um parágrafo, ou outro tipo de bloco, como code, cite, etc.

Texto pré-tabulado

Para entender este ‘tag’, temos que aprender a forma que o navegador lida com espaços, enter e tabs. Estes caracteres são descartados, desprezados pelos navegadores e substituídos por um espaço. Assim uma porção de espaços, tabs e enters, viram um espaço:

Uma tabela digitada assim (pontos são espaços):

Nome……..n1……n2……média<enter>
José……….4,0…..5,0….4,5<enter>

Seria apresentada pelo navegador assim:

Nome.n2.n2.média.José.4,0.5,0.4,5

Para colocar textos com tabulação definida por espaços, utilizamos o tag ‘pre’. Exemplo:

<pre>
nome……..n1……n2……média<enter>
José……….4,0…..5,0….4,5
</pre>

Desta maneira iria funcionar conforme o esperado. Isso é, com os espaços e retorno de linha apresentados.

Sobrescrito e Subscrito

Para textos subscritos (subscribed) e sobrescritos (supercribed), temos respectivamente os tags ‘sub’ e ‘sup’:

H₂SO₄ : H₂S0₄.
a²= b²+c² : a²=b²+c²

Por hoje é só. Na próxima aula vamos lidar com links, tabelas e blocos, e por incrível que pareça iremos terminar XHTML. Formulários vai ficar para um momento mais adequado do curso. (quando vermos javascript).

Quero lembrar que o curso não tem intenção de esgotar o assunto com todos os detalhes, mas dar o pontapé inicial, e indicar material para aprofundamento. Fazer o básico bem feito, para conseguir acompanhar o vasto material disponível na net, esta é a visão.

Exercitando

• Para exercitar a matéria apresentada, vamos treinar a codificação copiando todo o conteúdo deste artigo para um editor de texto comum e montando uma página Xhtml. Esqueça por enquanto os links. Validar no validator do W3C.
• Se você tem algum site de sua autoria, refaça uma das páginas utilizando unicamente os tags apresentados nesta aula, e outros definidos nos dois links apresentados em aprofundando. Valide.

Aprofundando

Estudar o padrão do W3c:

• http://www.w3.org/TR/html401/struct/text.html
• http://www.w3.org/TR/html401/struct/lists.html

Cuidado: não considerar os tags e atributos marcados como DEPRECATED.

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.

1

Artigos Similares:

• Terceira Aula: Classificando o conteúdo
• Sétima Aula: Blocos, Trechos e pouca Diagramação
• Quinta aula: Introdução a Css
• Sexta Aula: texto, fontes e seletores Css.
• Primeira Aula: Web Como funciona.

Sejam bem vindos, esta é a segunda aula de Programação Web em Java, para saber mais sobre o curso, começe em Curso de Programação Web
O conteúdo da Web precisa estar codificado segundo um padrão. A partir da aula de hoje vamos estudar o padrão mais atual para codificação Web: o XHTML.

killshot divx

Este é um documento mínimo codificado em Xhtml 1.0 padrão:

<!DOCTYPE html
      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
  <head>
  <title>Um título</title>
 <meta http-equiv="Content-Type"  content="text/html; charset=iso-8859-1" />
  </head>
  <body>
 </body>
 </html>

Vamos analisar as partes importantes:

1, 2, 3 doctype: indica a versão do padrão que estará utilizando. Existem várias possibilidades como Html4.1 transactional, strict e frameset, Xhtml1.0 transactional, strict e frameset e outros. No nosso caso usaremos o padrão Xhtml Strict 1.0. Teremos uma aula só para conhecer os outros padrões.

4 e 11 html: download toy story marcador (tag) que indica o início efetivo da página html. As propriedades xml:lang e lang indicam a língua em que o documento está escrito. Use “pt-br” para português do Brasil. “en” para inglês.

5 e 8 head: bloco de cabeçalho. Dentro deste bloco iremos colocar as informações importantes sobre a página. Estes dados ajudarão os navegadores montarem o conteúdo de maneira que foi planejada pelo programador. E os motores de busca do google e outros obter informações para posicionar sua página corretamente. Os conteúdos colocados aqui não serão mostrados diretamente na página do navegador.

6 title: títudo da página. Texto que será colocada na barra de título do navegador e usada pelos motores dos buscadores para nomear o conteúdo de sua página.

7 meta content-type: indica detalhes de codificação de caracter para o navegador.

9 e 10 body: corpo ou conteúdo da página. Tudo que você quizer mostrar na área principal do navegador estará dentro deste bloco.

Todos os ítens apresentados são obrigatórios em uma página Xhtml padrão.

Exemplo Prático

Vamos fazer um exemplo prático que realmente funciona?
Para isso utilize um editor de texto simples: gedit, kedit, bloco de notas, vi, etc. No exemplo falta preencher alguma coisa dentro do bloco body:

... (todo o cabeçalho igual ao exemplo acima)
<body>
<p>Olá Mundo! Esta é minha primeira página XHTML padronizada e funcional.</p>
</body>
</html>

Salve o documento com extensão *.html. E pronto.
-Tag <p> delimita um parágrafo do documento. Cada um dos parágrafos devem ser delimitados individualmente.

Para ver como ficou sua primeira página abrir o arquivo com os navegadores Firefox e Ie:

Ie:

Arquivo/Abrir/Procurar…
Localizar o arquivo criado e clicar Abrir.

Firefox:

Arquivo/Abrir Arquivo…
Localizar o arquivo criado e clicar Abrir.

Para ambos existe um atalho de teclado: CTRL+O. (que funciona melhor no Firefox)

Você deverá ver no navegador o texto digitado entre os tags <p> e </p>. Nossos exercícios em xhtml serão todos testados desta maneira.

Para verificar se você seguiu corretamente o padrão, existe uma ferramenta online que faz o teste de conformidade. Entre em validator.w3.org selecione o seu arquivo e clique em “Check”. Se tudo estiver certo verá a mensagem “Congratulations”. No caso de erro o sistema apresenta o que você fez de errado. Corrija o que ele pediu e tente novamente.
Guarde o endereço do “Validator” no seu favoritos. Será necessário durante todo o curso.

Algumas regras para conseguir a validação:
- Os caracteres maiúsculos e minúsculos são obrigatoriamente como apresentados. (HTML <> html)
- Cuidado com o final do tag meta: …harset=iso-8859-1″ /> Observe que depois das aspas usamos espaço, barra e maior. O espaço é obrigatório.
- Cuidado ao usar o Ctrl+c e Ctrl+v do navegador: verifique que todas as aspas ” estão trocadas por aspas inglesas. Apague e use a aspa dupla que fica próxima ao número 1 do teclado. Recomendo pelo menos uma vez você mesmo digitar todo o código para se acostumar. Isso ajuda muito na memorização.
- Todo o resto é obrigatório.

Dúvidas até aqui? Corra para o fórum. (eu estarei lá somente terça, mas tem os moderadores)

Mais dados no cabeçalho.

No cabeçalho ou Head podemos colocar uma série de informações sobre o documento. Com estes dados o navegador e os sistemas de busca podem entender melhor o conteúdo do documento. O título do documento é a principal informação do cabeçalho. Porém com o tag meta podemos definir uma série de outras informações úteis:

<meta name=”author” content=”Prof. Luís Eduardo” /> O autor do documento.
<meta name=”copyright” content=”© 1996 Indústria Ltda ” /> Questões de copyright
<meta name=”keywords” content=”trabalho,mudanças,java” /> Importantíssimo: palavras chave para o motor de busca do Google e Yahoo.
<meta name=”date” content=”1994-11-06T08:49:37+00:00″ /> Data de criação formatada conforme orientador [RFC2616 sessão 3.3]

<meta name=”description” content=”Roteiro da Aula número 2″ /> Descrição do conteúdo da página
… você utiliza outra meta que julga importante? divulgue no fórum.

>>> Corrigido: a meta keywords é no plural.

Exercícios:

• Monte uma página completa e validada no W3.org com o conteúdo pedido na última aula.
• Caso tenha alguma página html de sua autoria que esteja fora do padrão Xhtml, identifique os problemas usando o validador e corrija o cabeçalho. (Apague o conteúdo todo antes de tentar validar. Corrigir o conteúdo fica para outra aula, ok?)
• Faça o mesmo com uma página de algum site famoso. (que tal o Tecnoclasta?)

Aprofundando:

• Leia as sessões 7.3 e 7.4 do padrão. (em português aqui) Atenção: Os ítens marcados como “Deprecated” não são aceitos no padrão Xhtml Strict que estamos adotando neste curso.

Para a próxima aula:

• Planeje um texto bem completo com títulos, tabelas, listas. Vamos fazer tudo isso semana que vem. Ainda não escreva código html. Faremos após a próxima aula.

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

Artigos Similares:

• Segunda Aula: Página mínima XHTML
• Quinta aula: Introdução a Css
• Asp.net Aulas | Aula 5: xHtml e Css
• Primeira Avalição CPWJ
• Quarta Aula: Links, Âncoras, Tabelas e Imagens

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

Na aula de hoje iremos ver como funciona a Web, que é a plataforma de desenvolvimento de programas que iremos tratar neste curso.

A Internet

Antes de falar diretamente da Web, precisamos entender inicialmente como funciona a Internet.
Sob o ponto de vista de um programador podemos comparar a Internet com uma nuvem de conexões onde dados trafegam livremente de um computador para outro.

Teoricamente não existe nenhuma restrição entre a comunicação entre qualquer máquina na nuvem. É claro que na prática existem restrições dentro das empresas, por questão de segurança. Mas sob o ponto de vista do programador estas restrições simplesmente limitam o acesso ao sistema que ele vai desenvolver, não modificando em nada como o sistema será desenvolvido.

Cada nó na nuvem deve ser carimbado com um número de endereço de identificação único. Máquinas especiais podem ter nomes fáceis de se identificar:

Endereços IP e Nome de domínio.Uma máquina qualquer pode então, através do nome da máquina, ou do número fazer uma requisição de dados e receber a resposta:

Requisição e Resposta. Recebendo um email do servidor.

Os Serviços da Internet.

Todos que já acessaram a Internet fizeram uso de várias ferramentas para internet. As mais comuns são o Correio Eletrônico, Web e mensageiros instantâneos. Estas ferramentas vou chamar de serviços de Internet.

Cada um dos serviços se utiliza da nuvem de conexões da Internet para transmitir e receber dados entre as vários máquinas que fazem parte do serviço. No caso dos emails, por exemplo, temos a máquina que envia o email, servidores intermediários e a máquina de destino da mensagem.

Servidores e Clientes

Veja que temos dois níveis de programas envolvidos: os clientes de email e os servidores. Fique atento que uma mesma máquina pode ter programas clientes e servidores. O que distingue um do outro é a possibilidade dos servidores receberem requisições.

Uma Requisição (request) consiste em um pedido de dados realizado por um programa Cliente para um programa Servidor.
Uma Resposta (response) consiste em uma resposta devidamente formatada de acordo com um padrão para uma requisição.

Um programa servidor fica aguardando uma requisição, e no momento em que ela ocorre ele prepara uma resposta e envia de volta ao cliente.

O cliente por sua vez prepara uma requisição envia ao servidor, aguarda a resposta e à apresenta ao usuário do programa.

Os serviços em uma máquina devem ser numerados. Cada servidor deve apresentar um número único de identidade. Esta identificação é chamada de Porta. (port).
Quando um programa servidor é ligado em um computador uma porta de entrada é aberta, de modo que os programas clientes possam enviar requisições ao programa servidor através desta porta.

A WEB

O serviço mais conhecido e utilizado na Internet é a Web. Muitos usuários até confundem a internet com a Web, mas na verdade a internet já existia 15 anos antes da web.

Como todo Serviço de Internet, a web consiste em um sistema cliente e um servidor. A maioria das pessoas está familiarizada com os clientes: navegadores Internet Explorer, Firefox ou outro. Porém os servidores também são essenciais para o funcionamento da mesma. São chamados servidores de Web.
Estes servidores Web abrem por padrão a porta 80 para que os navegadores possam fazer as requisições.
A comunicação entre os clientes e servidores se dá através do protocolo HTTP:

1. Usuário digita um endereço de recurso na caixa de endereço ou clica em um link;
2. Navegador envia a requisição até o servidor de web;
3. Servidor de web envia o conteúdo requisitado para o navegador;
4. O Navegador apresenta a informação para o usuário.

Conteúdo

A resposta de uma requisição HTTP vem em um formato especial chamado HTML. Trata-se de um arquivo comum onde junto às informações de texto são apresentadas uma série de marcadores (tags) para indicar a apresentação daquele texto. Os marcadores indicam o que são listas, tabelas, títulos, formulários e etc.
O navegador utilizando estes marcadores constrói a aparência da página requisitada.

HTML e XHTML

Então para o motor da Web funcionar, é preciso que o conteúdo disponível esteja codificado pelo formato HTML. Esta é a primeira parte do curso. Vamos aprender como formatar um código em HTML.
Na verdade, o formato HTML evoluiu para um padrão mais moderno chamado XHTML. Para nosso curso rolar mais rapidamente e você não perder tempo com código não padronizado, iremos estudar diretamente código XHTML.

Resumo:

• Máquinas tem endereços únicos chamados endereço IP;
• Máquinas especiais na rede podem ter nomes para facilitar o usuário comum.
• A comunicação basicamente se dá por requisições e respostas.
• A Web funciona com dois tipos de programas: Servidores Web e Navegadores.
• Os servidores Web abrem a porta 80 para requisições.(por padrão)
• Os clientes se comunicam com servidores através do protocolo HTTP.
• As repostas são formatadas em HTML, ou o atual XHTML.

Para próxima Aula:

• Ler os textos de aprofundamento:
  • http://pt.wikipedia.org/wiki/Html
  • Melhor em inglês: http://en.wikipedia.org/wiki/HTML
  • http://pt.wikipedia.org/wiki/XHTML ou
  • Melhor em inglês: http://en.wikipedia.org/wiki/XHTML
  • Rever:http://pt.wikipedia.org/wiki/Web
  • Melhor em inglês: http://en.wikipedia.org/wiki/World_Wide_Web.
• Guardar http://www.w3schools.com/ no seus favoritos
• Guardar http://tableless.com.br/ no em favoritos
• Preparar um texto no bloco de notas com título e 10 parágrafos. Pode copiar o texto desta aula ou escrever por si mesmo.

A partir da próxima aula iremos começar a construir código HTML. Então prepare o Firefox e o Internet Explorer. Vamos precisar dos dois.

Dúvidas diretamente nos Comentários .

Procure os mais baratos Livros sobre a Web, Livros sobre Java, Livros HTML, Livros JSP, Brinquedos para seu Sobrinho ou Presentes para sua Sobrinha nas melhores lojas.

Artigos Similares:

• Primeira Aula: Web Como funciona.
• Aula 14: O modelo MVC
• Primeira Avalição CPWJ
• Firefox é maioria na Web. *
• Quarta Aula: Links, Âncoras, Tabelas e Imagens