Posts com a Tag ‘java’

Primeira Avalição CPWJ

sexta-feira, 9 de novembro de 2007

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.

Preparando a primeira Avaliação CPWJ

quarta-feira, 7 de novembro de 2007

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.

Quinta aula: Introdução a Css

terça-feira, 6 de novembro de 2007

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.

Quarta Aula: Links, Âncoras, Tabelas e Imagens

terça-feira, 30 de outubro de 2007

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:

Notas da Turma
Número Nome Notas
001 Maria 10,0
002 José 0,4
003 Carlos 0,8
004 Elaine 10,0

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:

Notas da Turma
Número Nome Notas
001 Maria 10,0
002 José 0,4
003 Carlos 0,8
004 Elaine 10,0
Média da turma 3,73

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:

Notas da Turma
Turma CPWJ Número Nome Notas
001 Maria 10,0
002 José 0,4
003 Carlos 0,8
004 Elaine 10,0
Média da turma 3,73

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.