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:
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.
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>
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.
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:
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:
Não é necessário digitar os números.
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:
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>
Indicar o endereço de um local:
<address>Este é meu endereço</address>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 ). 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 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>
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.
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.
Para textos subscritos (subscribed) e sobrescritos (supercribed), temos respectivamente os tags ’sub’ e ’sup’:
H<sub>2</sub>SO<sub>4</sub> : H2S04.
a<sup>2</sup>= b<sup>2</sup>+c<sup>2</sup> : a2=b2+c2
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.
Estudar o padrão do W3c:
Cuidado: não considerar os tags e atributos marcados como DEPRECATED.
Dúvidas? vá para o fórum.
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 WebO 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.
Este é um documento mínimo codificado em Xhtml 1.0 padrão:
1 <!DOCTYPE html
2 PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
3 “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
4 <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pt-br” lang=”pt-br”>
5 <head>
6 <title>Um título</title>
7 <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
8 </head>
9 <body>
10 </body>
11 </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: 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.
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)
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.
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.
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:


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.
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.
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:
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.
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.
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 no Fórum: Fórum do Curso..
Inscreva-se diretamente no Fórum.
Sejam bem vindos para o curso Programação para Web.
Antes de mais nada, quem sou eu: Professor Luís Eduardo, 33 anos, à 10 anos 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 à 10 anos 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.
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:
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 vamos desenvolver isso aos poucos, com uma lição por semana. Este é o 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.
Inscreva-se diretamente no Fórum. As aulas serão postadas todas as terças-feiras.
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.
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
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
Arquivos
| Índice | Arquivo |
| Contato |