Notas e Presenças

7 julho, 2009 (15:41) | Sem categoria | Por: admin

Pessoal,

Disponíveis notas e presenças finais abaixo. Por favor, confiram problemas no lançamento. No retorno das férias corrijo qualquer problema encontrado.

Por favor, muitos ainda não escolheram os temas de sua preferência na apresentação, faça isso no máximo até hoje!

Amanhã pela manhã deixarei no site o temas de cada um.

PRESENÇAS:

http://spreadsheets.google.com/ccc?key=0AqQ2GvdPZmGjcEQ1eGlGS0U5b2ozempwVXk4azk0T3c&hl=pt_BR

NOTAS:

http://spreadsheets.google.com/ccc?key=0AqQ2GvdPZmGjcEQ1eGlGS0U5b2owdFhXSVhKeHR5Smc&hl=pt_BR

Exercício F08 – Apresentação – Turma U2 – Para 27/julho!

1 julho, 2009 (16:24) | Sem categoria | Por: admin

Neste exercício você deverá desenvolver seu primeiro Web Site para aplicar, na prática o que vimos até agora na disciplina. Este Web Site será no formato de apresentação, como se fosse um arquivo PowerPoint. Você deverá criar 5 páginas  para este web site.

O Tema

O tema será escolhido dentre as opções listadas na planilha a seguir.

Corra! Quem escolher primeiro seu tema terá prioridade! Até o dia 4/7 enviarei o tema de cada um conforme a sua escolha preferencial.

Escolha seu tema no link abaixo:

http://spreadsheets.google.com/viewform?formkey=clhabmY4UXFVNWdwYTAzZ3hTWUZrbWc6MA..

Formato da Apresentação

Cada página será exibida por 30 segundos. Automaticamente, após a passagem de 30 segundos, a próxima página será exibida. Ao fim de sua apresentação, imediatamente começa a apresentação de seu colega.

Cada página de sua apresentação deverá ter, necessariamente, os nomes:

  • pagina1.html
  • pagina2.html
  • pagina3.html
  • pagina4.html
  • pagina5.html

Dicas para a apresentação

  • Pouco texto em cada página;
  • Textos grandes, para a projeção em sala;
  • Use e abuse de imagens para ilustrar os conceitos;
  • Explique com suas palavras, não leia as páginas;
  • Não é necessária a criação de links entre as páginas, a navegação será automática;

Conteúdo

O objetivo da apresentação será que vocês conheçam mais algumas tags do HTML e compartilhem este conhecimento com seus colegas. Usem sua criatividade na apresentação, mas, pelo menos, gostaria que tivesse o seguinte conteúdo:

  • Seu nome e o tema;
  • O que é a tag e qual é seu objetivo, para que serve;
  • Qual é a versão do HTML (4 ou 5);
  • Browsers que suportam a tag;
  • Um ou mais exemplos de código, preferencialmente situações reais e com CSS;
  • Exemplos de sites que utilizam (imagem e link);
  • Indicar se a tag deve ou não ser usada;
  • Atributos da tag.

Critérios de correção

  • Qualidade da apresentação;
  • Uso correto das tags;
  • CSS organizado em um arquivo separado e compartilhado entre as páginas;
  • Uso correto das tags;
  • Ausência de código CSS intrusivo (atributo style).

Data da entrega

27/07/2009

Data da apresentação

29/07/2009

Exercício F08 – Apresentação – Turma U1 – Para 27/julho!

1 julho, 2009 (16:15) | Sem categoria | Por: admin

Neste exercício você deverá desenvolver seu primeiro Web Site para aplicar, na prática o que vimos até agora na disciplina. Este Web Site será no formato de apresentação, como se fosse um arquivo PowerPoint. Você deverá criar 5 páginas  para este web site.

O Tema

O tema será escolhido dentre as opções listadas na planilha a seguir.

Corra! Quem escolher primeiro seu tema terá prioridade! Até o dia 4/7 enviarei o tema de cada um conforme a sua escolha preferencial.

Escolha seu tema no link abaixo:

http://spreadsheets.google.com/viewform?formkey=clV1M1NGSFdZbF9UdzhKWU94RkM3bEE6MA..

Formato da Apresentação

Cada página será exibida por 30 segundos. Automaticamente, após a passagem de 30 segundos, a próxima página será exibida. Ao fim de sua apresentação, imediatamente começa a apresentação de seu colega.

Cada página de sua apresentação deverá ter, necessariamente, os nomes:

  • pagina1.html
  • pagina2.html
  • pagina3.html
  • pagina4.html
  • pagina5.html

Dicas para a apresentação

  • Pouco texto em cada página;
  • Textos grandes, para a projeção em sala;
  • Use e abuse de imagens para ilustrar os conceitos;
  • Explique com suas palavras, não leia as páginas;
  • Não é necessária a criação de links entre as páginas, a navegação será automática;

Conteúdo

O objetivo da apresentação será que vocês conheçam mais algumas tags do HTML e compartilhem este conhecimento com seus colegas. Usem sua criatividade na apresentação, mas, pelo menos, gostaria que tivesse o seguinte conteúdo:

  • Seu nome e o tema;
  • O que é a tag e qual é seu objetivo, para que serve;
  • Qual é a versão do HTML (4 ou 5);
  • Browsers que suportam a tag;
  • Um ou mais exemplos de código, preferencialmente situações reais e com CSS;
  • Exemplos de sites que utilizam (imagem e link);
  • Indicar se a tag deve ou não ser usada;
  • Atributos da tag.

Critérios de correção

  • Qualidade da apresentação;
  • Uso correto das tags;
  • CSS organizado em um arquivo separado e compartilhado entre as páginas;
  • Uso correto das tags;
  • Ausência de código CSS intrusivo (atributo style).

Data da entrega

27/07/2009

Data da apresentação

29/07/2009

Exercício F08 – Apresentação – Turma V – Para 27/julho!

23 junho, 2009 (20:27) | Sem categoria | Por: admin

Neste exercício você deverá desenvolver seu primeiro Web Site para aplicar, na prática o que vimos até agora na disciplina. Este Web Site será no formato de apresentação, como se fosse um arquivo PowerPoint. Você deverá criar 5 páginas  para este web site.

O Tema

O tema será escolhido dentre as opções listadas na planilha a seguir.

Corra! Quem escolher primeiro seu tema terá prioridade! Até o dia 30/6 enviarei o tema de cada um conforme a sua escolha preferencial.

Escolha seu tema no link abaixo:

http://spreadsheets.google.com/viewform?formkey=cnhUQVBMUXIzR3VKLTF1TmF1WDhVbGc6MA..

Formato da Apresentação

Cada página será exibida por 30 segundos. Automaticamente, após a passagem de 30 segundos, a próxima página será exibida. Ao fim de sua apresentação, imediatamente começa a apresentação de seu colega.

Cada página de sua apresentação deverá ter, necessariamente, os nomes:

  • pagina1.html
  • pagina2.html
  • pagina3.html
  • pagina4.html
  • pagina5.html

Dicas para a apresentação

  • Pouco texto em cada página;
  • Textos grandes, para a projeção em sala;
  • Use e abuse de imagens para ilustrar os conceitos;
  • Explique com suas palavras, não leia as páginas;
  • Não é necessária a criação de links entre as páginas, a navegação será automática;

Conteúdo

O objetivo da apresentação será que vocês conheçam mais algumas tags do HTML e compartilhem este conhecimento com seus colegas. Usem sua criatividade na apresentação, mas, pelo menos, gostaria que tivesse o seguinte conteúdo:

  • Seu nome e o tema;
  • O que é a tag e qual é seu objetivo, para que serve;
  • Qual é a versão do HTML (4 ou 5);
  • Browsers que suportam a tag;
  • Um ou mais exemplos de código, preferencialmente situações reais e com CSS;
  • Exemplos de sites que utilizam (imagem e link);
  • Indicar se a tag deve ou não ser usada;
  • Atributos da tag.

Critérios de correção

  • Qualidade da apresentação;
  • Uso correto das tags;
  • CSS organizado em um arquivo separado e compartilhado entre as páginas;
  • Uso correto das tags;
  • Ausência de código CSS intrusivo (atributo style).

Data da entrega

27/07/2009

Data da apresentação

28/07/2009

Exercício F07 – CSS Sprite

16 junho, 2009 (19:54) | exercícios | Por: admin

CSS Sprite é uma técnica comum para a criação de menus, botões e montagem em geral de sua interface.
Dois exemplos da técnica vão a seguir:

A) Crie um botão em HTML/CSS utilizando a imagem em anexo.
Observe que o botão possui 3 estados: normal, visitado e quando o mouse passa sobre ele.
Para realizar este exercício você deve usar o código de aluno disponível na lista de alunos.

B) Crie uma composição qualquer utilizando os sprites disponíveis na imagem. Utilize, pelo menos, 25 sprites e 4 tipos de sprite diferentes.

Responder em: http://spreadsheets.google.com/viewform?formkey=cmhXMmxRSmpfWGV5c2wwbEp6MTdhYVE6MA..

Aula 12 – Box Model – Elementos em bloco

16 junho, 2009 (16:08) | aulas | Por: admin

O Box Model é a maneira que o CSS representa as dimensões e espaçamentos dos elementos da tela. Esta aula é sobre este modelo. As principais propriedades relacionadas ao box model são:

  • margin-top, margin-right, margin-bottom, margin-left, margin: determina a margem de um elemento;
  • padding-top, padding-right, padding-bottom, padding-left, padding: determina o “enchimento” (espaçamento) de um elemento.
  • border-top-color, border-top-style, border-top-width, border-top, border-right-color, border-right-style, border-right-width, border-right, border-bottom-color, border-bottom-style, border-bottom-width, border-bottom, border-left-color, border-left-style, border-left-width, border-left, border-color, border-style, border-width, border: modifica a borda de um elemento.
  • outline-color, outline-style, outline-width, outline: determina a linha de contorno ao redor de um elemento;
  • height: modifica a altura da área de conteúdo de um elemento;
  • min-height: altura mínima de um elemento;
  • max-height: altura máxima de um elemento;
  • width: largura da área de conteúdo de um elemento;
  • min-width: largura mínima da área de conteúdo de um bloco;
  • max-width: largura máxima da área de conteúdo de um bloco;

Seguem os exemplos associados à aula:

Imagens usadas durante a aula:

rollover

Apresentação referente à aula (no link).

Leia mais »

Off topic: Slideshow em JavaScript

10 junho, 2009 (22:06) | outros | Por: admin

Pedido por alguns alunos no fim da aula de 10/6:
http://www.electricprism.com/aeron/slideshow/

Exercício F06 – Cores, Fontes, Textos e Fundos

9 junho, 2009 (19:40) | Sem categoria | Por: admin

Aula 11 – Cores em CSS

9 junho, 2009 (16:32) | Sem categoria | Por: admin

Aula 11 – Propriedade CSS Texto

9 junho, 2009 (16:29) | aulas | Por: admin

O objetivo agora é trabalhar com as propriedades de alteração de texto em CSS.
Algumas destas propriedades são:

Os exemplos referentes à aula são:

Download da apresentação

Leia mais »

Exercício F05 – Parte 2 da competição

26 maio, 2009 (20:09) | exercícios | Por: admin

Exercício F05 – Competição!

26 maio, 2009 (19:48) | exercícios | Por: admin

Aula 10 – Propriedades CSS – Fonte

26 maio, 2009 (18:47) | aulas | Por: admin

Nas últimas semanas, conhecemos os seletores do CSS 1.0 e CSS 2.1. Voltaremos, futuramente, a lidar com os seletores do CSS 3.0. Hoje, começaremos a aplicar, na prática, os seletores aprendidos com as diferentes propriedades do CSS.

O objetivo da aula de hoje é trabalhar com as propriedades do CSS referentes a tipografia, ou seja, que permitem a alteração de fontes.

Exemplos da aula:

Sobre a “personalidade” diferente de cada fonte, sugiro os vídeos (humor, em inglês):

Download da aula

Discover Simple, Private Sharing at Drop.io

Exercício O05 – Turma V e U1

19 maio, 2009 (20:23) | Sem categoria | Por: admin

Aula 09 – Seletores do CSS 2.1

19 maio, 2009 (13:52) | aulas | Por: admin

Após a exposição acerca dos seletores do CSS 1.0 na aula passada, nosso objetivo hoje é continuar o trabalho com linguagem de seletores.
Desta vez, os seletores que trabalharemos serão os seletores do CSS 2.1.
Tais seletores são aceitos pela maior parte dos navegadores do mercado. Destaca-se, porém, que o Internet Explorer 6 (ie6) não os suporta e existem alguns problemas de compatibilidade em relação ao Internet Explorer 7 (ie7). Felizmente, o ie8 adota o CSS 2.1 como um padrão permitindo, portanto, um uso mais extensivo deste conjunto de seletores.

Assim, uma prática solução que podemos usar para implementar os seletores do CSS 2.1 no Ie6 e resolver alguns problemas do ie7 é o uso de uma biblioteca de “emulação” de recursos como, por exemplo, a ie7-js .Esta biblioteca exige que se use a linguagem JavaScript, desta forma, não é aplicável em todos os cenários.

Para “transformar” seu ie6 em ie7, cole o seguinte fragmento de código no início da página:

<!–[if lt IE 7]>
<script
src=”http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js”

type=”text/javascript“></script>
<![
endif]–>

Se precisar “transformar” seu ie6 e 8 em ie8, cole o seguinte fragmento de código no início da página.

<!–[if lt IE 8]>
<script
src=”http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js” type=”text/javascript“></script>
<![
endif]–>

Independente do uso de qualquer biblioteca,verifique a tabela de compatibilidade para cada seletor em relação aos navegadores.

Segue, a seguir, os exemplos referentes à aula.

A seguir, faça o download da apresentação referente a aula (mirror).
Leia mais »

Divulgação: BrGames 2009 (data limite: 25/6/2009)

18 maio, 2009 (11:11) | outros | Por: admin

brgames

brgames

Adaptado de: http://www.brgames2009.com.br/

O BRGAMES é um Programa da Secretaria do Audiovisual do Ministério da Cultura, Secretaria de Políticas Culturais do Ministério da Cultura e Sociedade Brasileira para Promoção da Exportação de Software – SOFTEX, que tem o apoio institucional do Festival Internacional de Linguagem Eletrônica – FILE e da Associação Brasileira das Desenvolvedoras de Jogos Eletrônicos – Abragames.

O BRGAMES oferece oportunidade de inscrição para pessoas físicas e jurídicas em dois tipos de categoria:

Pessoas físicas: Deve ser o autor de 1 (um) PROJETO INÉDITO E ORIGINAL de demo jogável (cada pessoa física poderá inscrever-se somente com um projeto) e possuir, no mínimo, 18 (dezoito) anos de idade; devem também ter residência comprovada no Brasil há pelo menos 02 (dois) anos. Os contemplados deverão associar-se a uma empresa produtora, que será apresentada / considerada co-produtora do projeto de demo jogável selecionado.

Empresas Estruturadas: Devem ser empresas brasileiras de desenvolvimento de jogos eletrônicos que já tenham publicado comercialmente, no mínimo, 01 (um) jogo eletrônico. Cada empresa poderá inscrever-se somente com 1 (um) projeto.

Quantos participantes serão premiados:

  • 07 (sete) PESSOAS FÍSICAS desenvolvedoras de jogos eletrônicos em co-produção com empresas desenvolvedoras de jogos eletrônicos;
  • 03 (três) EMPRESAS ESTRUTURADAS de desenvolvimento de jogos eletrônicos.

Quais serão os prêmios:

Cada PESSOA FÍSICA premiada ganhará um contrato de co-produção no valor de R$ 70.000,00 (setenta mil reais).

Cada EMPRESA ESTRUTURADA ganhará um contrato de co-produção no valor de R$ 140.000,00 (cento e quarenta mil reais).

Desenvolvido na aula de CSS 1.0 seletores – Turma U1

13 maio, 2009 (20:03) | aulas | Por: admin


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
			p, div { background: red;	}
			.c1 { color: yellow; }
			#p2 {font-size: xx-large;}
			p em { background: green; } /* todos os em dentro de p*/
			a:link { font-size: xx-small; background: orange; }
			a:visited { font-size: xx-large; background: white; }
			a:active { font-size: medium; background: black;}
			p:first-letter { font-size: 60px;  }
			p:first-line { font-style: italic; }
			div a:link {  }
		</style>
	</head>
	<body>
		<p class="c1" id="p1"><a href="#a">Lorem</a> ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mi. </p>
		<p id="p2">Lorem <em>psum</em> dolor sit amet, consectetur adipiscing elit. Maecenas mi. </p>
		<p id="p3">Lorem <a href="#b">ipsum</a> dolor sit amet, consectetur adipiscing elit. Maecenas mi. </p>
		<p id="p4"><em>Lorem ipsum</em> dolor sit amet, consectetur adipiscing elit. Maecenas mi. </p>
		<p id="p5" class="c1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mi. </p>
		<div>Lorem <em>ipsum dolor</em> <a href="#c">sit</a> amet, consectetur adipiscing elit. Maecenas mi. </Div>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin tristique lacinia. Nulla sit amet nibh dui. Donec quis justo eget eros dictum placerat. Aenean et tortor in ipsum condimentum ornare ut et enim. Aliquam blandit nisl a nulla dapibus sed fermentum mauris tempor. Ut lobortis ultrices turpis, et ornare velit fermentum at. Vivamus aliquet molestie ipsum a feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum blandit nisi eu ipsum rutrum adipiscing sit amet id sem. Donec semper dui at dolor venenatis in volutpat enim tincidunt. Integer et felis ac nulla rutrum pharetra nec suscipit odio. Quisque adipiscing lacus vitae lectus facilisis auctor at ac velit. Duis aliquet, quam id hendrerit condimentum, sapien nibh porttitor sem, in varius magna urna quis quam.

Nulla in varius erat. Vivamus eu condimentum felis. Nulla tincidunt pellentesque est id rutrum. Vestibulum molestie imperdiet justo, at aliquam purus porttitor suscipit. Proin nec massa neque, non ultrices lacus. Suspendisse ac hendrerit urna. Sed metus turpis, ornare nec viverra eget, fermentum nec mauris. Cras mauris ipsum, ultrices a convallis pretium, mattis id magna. Pellentesque a felis velit. Morbi pharetra, magna ut pharetra vestibulum, ligula dolor ultricies nisl, elementum tristique leo elit feugiat nulla. Sed non elementum ante. Ut sollicitudin augue vitae turpis dictum rhoncus. Nam vitae imperdiet nibh. Nunc vestibulum varius felis, eget molestie leo adipiscing sed. Integer id tellus a nisl lacinia tincidunt.

Pellentesque condimentum auctor accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin non vestibulum nisl. Duis suscipit dapibus ligula id faucibus. Vivamus vitae velit in massa gravida viverra nec eu purus. Vestibulum rhoncus, leo id sodales bibendum, urna lacus tincidunt tortor, eu porta urna orci ac arcu. Quisque tincidunt volutpat turpis. Aliquam erat volutpat. Vestibulum blandit lacus a orci malesuada interdum. Suspendisse elementum interdum nisi, accumsan congue dui varius ut. Curabitur vitae erat velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus eu eleifend nisi.

Phasellus eu massa non dui elementum tempus. Sed molestie, dui sit amet ultricies commodo, justo eros facilisis diam, nec cursus tellus nibh et magna. Curabitur ac elementum diam. Cras iaculis imperdiet neque sagittis imperdiet. Donec odio nulla, volutpat ut interdum id, semper sed enim. Suspendisse potenti. Sed ac leo eget magna dapibus dapibus. Maecenas condimentum mauris ac dui pellentesque tempor vehicula tellus aliquam. Morbi lacus ante, laoreet in dictum quis, fermentum ac metus. Ut dictum, turpis et ultricies tincidunt, urna nulla dignissim diam, a tincidunt ligula libero commodo neque. Curabitur consequat dui ut ligula eleifend vel fringilla lacus fringilla. Etiam quam est, mollis ut congue non, vestibulum ut ante. Maecenas lobortis hendrerit molestie. Maecenas sollicitudin vulputate neque, ut luctus sapien pretium eget. Curabitur dapibus, mi vitae gravida interdum, nisi diam bibendum quam, eu ultrices velit odio non neque. Etiam semper massa sit amet nisi lobortis vitae euismod turpis vestibulum. Sed eros leo, adipiscing at fermentum ac, gravida facilisis tellus. Vivamus posuere lacus quis elit condimentum mattis.

Vestibulum eget neque metus. Nulla scelerisque blandit pulvinar. Nam sit amet ante est. Suspendisse vel erat velit. Donec at lectus sed velit pretium iaculis sed sed nisl. Nam et velit sapien. Maecenas eu nibh ac lacus tincidunt vehicula. Suspendisse eu odio ipsum. Proin sit amet nisl nec eros tristique aliquet vel vel augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer elementum sapien nec nisi consequat vehicula. Vivamus purus dui, consequat ut ultrices eget, molestie eu dolor. Quisque consequat porttitor pretium. In blandit, tellus a facilisis porta, arcu odio laoreet mi, ut elementum diam ipsum a nibh. Nullam in nulla leo. Nullam iaculis, dui aliquet malesuada dignissim, ipsum justo condimentum velit, in ultrices massa arcu id risus.

Duis et augue urna. Sed ac malesuada velit. Integer ultrices nulla et ligula tempor adipiscing. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse rhoncus aliquet eros, in varius elit ultricies at. Nulla ac sodales justo. Mauris ipsum nibh, porttitor in dignissim quis, scelerisque id lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ac erat ac arcu fermentum imperdiet in sit amet massa. Proin consequat viverra diam quis feugiat. Nulla facilisi. Quisque quis sapien vel sapien fermentum mattis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. In dictum placerat convallis. Duis sed consequat quam. Fusce sed ante magna, eget sollicitudin sapien. Donec facilisis, odio id sagittis fermentum, ante ipsum eleifend massa, ut cursus diam erat a ante. Cras molestie pulvinar lectus, ut luctus purus rutrum vel. Ut adipiscing, libero eu egestas pharetra, massa ipsum tristique nibh, et egestas urna diam ut sapien. Nulla ultricies congue scelerisque. Nulla egestas imperdiet mi non eleifend. Aliquam dictum, diam sit amet bibendum fermentum, urna nulla adipiscing nulla, vitae porttitor odio nunc at lorem. Proin at diam tellus, in blandit odio. Maecenas vel purus nisl, eget euismod massa. In sagittis, libero sit amet posuere tempus, nibh lacus congue nisi, sed aliquet arcu augue nec urna. Sed ullamcorper odio at ligula ultricies lobortis. Quisque porttitor adipiscing eros non commodo.

Maecenas suscipit facilisis massa, id semper justo convallis in. Proin ut sapien neque, euismod tincidunt eros. Duis mattis erat eget augue viverra iaculis. Nunc et mi velit. In hac habitasse platea dictumst. Phasellus quis mi massa, ac porttitor ligula. Maecenas venenatis odio posuere tortor faucibus vel lacinia turpis egestas. Pellentesque nec rhoncus erat. Nunc ornare pharetra auctor. Donec ornare fermentum augue vitae auctor. Aliquam vitae urna dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi posuere sem quis lacus pellentesque rutrum. Mauris eu eros enim. Fusce hendrerit ornare ipsum, nec scelerisque neque scelerisque vel. Integer id est sapien. Nulla mauris justo, varius ac suscipit eget, commodo quis velit. Etiam blandit tempus lacus at varius. Integer cursus est eget urna dictum mollis.

Donec lobortis mauris eu arcu sodales eget tempor augue semper. Ut pretium, eros in pulvinar pretium, enim odio cursus lorem, egestas gravida magna leo scelerisque magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed tristique posuere metus vel sodales. Curabitur convallis interdum mollis. Suspendisse potenti. Sed a massa at elit dapibus ullamcorper sit amet ut mi. Nulla ante magna, vestibulum non mollis at, lacinia id sapien. Ut non vestibulum urna. Fusce adipiscing, felis ac mattis sodales, nibh metus consequat velit, vulputate venenatis justo eros a nisl. Proin sit amet velit nisl, in elementum odio.

Sed vitae leo quam. Cras malesuada facilisis magna in imperdiet. Aliquam fermentum tempor quam, nec feugiat mauris sagittis eu. Integer sodales eleifend augue, tempus pellentesque magna auctor vitae. Mauris id diam lorem. Etiam lorem metus, dignissim eget fringilla eget, volutpat eget ante. Phasellus adipiscing, neque in molestie feugiat, magna sapien condimentum sem, in suscipit dolor libero ut enim. Nam lobortis nisi sit amet nulla vulputate eleifend. Curabitur tincidunt orci id sem feugiat euismod. Sed iaculis egestas ipsum, sit amet volutpat lorem tempus adipiscing. Aenean semper malesuada elit, blandit ornare leo congue placerat. </p>
	</body>
</html>

Exemplo trabalhado em Sala Turma V – Seletores

12 maio, 2009 (20:13) | aulas | Por: admin


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
			/* Seletor Elemento */
			p, div {
				color: red;
				background: white;
			}
			.c1 { color: green; background: yellow; }
			#p1 { font-size:xx-large; }
			/* altere todos os em filhos (dentro) de #p1 */
			#p1 em { background: white; }
			/* link quando a pagina eh visitada e o link
			 * não foi clicado ainda!
			 */
			a:link { background:red; color: yellow; }
			/* Altera a cor do link visitado */
			a:visited { background: yellow; color: green;}
			/* Altera a cor do link no clique */
			a:active { font-size: xx-large; }
			p:first-letter {
				font-size: xx-large;
				color: blue;
			}
			p:first-line {
				background: blue;
			}
		</style>
	</head>
	<body>
		<p id="p1">
			Lorem <em>ipsum</em> dolor sit amet, consectetur adipiscing elit. Proin volutpat.
		</p>
		<p class="c1" id="p2">
			<em>Lorem</em> ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat.
		</p>
		<p class="c1" id="p3">
			Lorem ipsum <em>dolor</em> sit amet, consectetur adipiscing elit. Proin volutpat.
		</p>
		<div>
			<a href="#a1">Link 1</a>
			<a href="#a2">Link 2</a>
			<a href="#a3">Link3</a>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat. </div>

		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan vestibulum accumsan. Integer convallis fringilla lorem. Praesent eu erat pretium nibh hendrerit consequat ut eleifend turpis. In ante ante, rutrum quis blandit non, convallis a tellus. Phasellus diam mauris, consectetur id molestie a, consequat quis magna. Integer nec augue in nibh ornare accumsan a quis nibh. Morbi semper, turpis in semper pellentesque, magna orci vulputate nunc, eu sodales nibh dui eu dui. Nulla arcu ante, consectetur ultricies auctor id, aliquet sit amet felis. Suspendisse et egestas tortor. Sed sit amet nulla ac dolor dignissim tristique. Vestibulum placerat erat ac odio porta et dictum tellus auctor. Pellentesque tellus dui, commodo pharetra eleifend et, posuere nec diam. In tempor sapien nec tellus luctus a blandit mauris suscipit. Praesent ornare fringilla eros, quis cursus lectus luctus in.

In mattis, leo in vehicula dictum, quam odio ultricies ipsum, a rhoncus tortor enim sit amet orci. Sed auctor quam in sem laoreet sed pellentesque enim facilisis. Donec magna turpis, ultricies a dignissim id, egestas eget urna. Curabitur est massa, imperdiet sed fringilla vel, adipiscing eu erat. Curabitur posuere dolor at leo ultrices quis consequat leo porta. Aenean a dolor nec eros imperdiet vehicula at et nisi. Nunc blandit varius felis a euismod. Mauris turpis arcu, semper id sollicitudin mattis, sagittis vitae orci. Mauris sit amet interdum tortor. Etiam nisi magna, rhoncus ut ornare ultrices, accumsan et erat. Suspendisse dignissim aliquet erat, id viverra nibh sodales ut.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras vulputate sollicitudin lacus nec condimentum. Ut et ultricies nunc. Proin congue fermentum turpis, vitae condimentum risus tristique nec. Nam velit leo, laoreet in pretium in, lobortis eget ante. In sollicitudin augue mattis augue laoreet fringilla. Nunc non arcu id massa bibendum convallis ut quis tortor. Vivamus at fermentum massa. Sed vestibulum cursus mattis. Praesent mauris risus, tristique nec ultrices vitae, vulputate non turpis. Sed tempus, ligula ultrices tempus porta, ligula sem vehicula mauris, et hendrerit velit mauris sed purus. Donec ut leo ante. In hac habitasse platea dictumst. Vestibulum arcu eros, placerat eu pharetra quis, luctus sollicitudin lacus. Aliquam placerat volutpat dui non eleifend. Vivamus sit amet lacus mi, a congue velit. Nam orci magna, vestibulum sed tempor vitae, pellentesque quis turpis. Maecenas venenatis pharetra ipsum, ut adipiscing enim eleifend vitae. Mauris a orci sed leo viverra ullamcorper. Mauris scelerisque massa non dui cursus pharetra.

Fusce eu leo vel purus semper porttitor. Cras sit amet augue orci. Integer ornare malesuada mauris ac bibendum. Sed est arcu, ornare sit amet consectetur id, cursus sit amet diam. Pellentesque eget dui quam. Fusce enim magna, rhoncus vel volutpat at, semper nec lacus. Aliquam accumsan gravida sollicitudin. Morbi eu tellus non orci commodo volutpat sed quis eros. Cras bibendum mi sed mi adipiscing non pulvinar lacus rhoncus. Maecenas quis risus purus. Sed in risus vitae lacus ultricies pharetra vel eu erat. Proin convallis arcu eget elit ornare varius. Quisque ipsum dolor, blandit quis auctor ut, accumsan ac nisi. Curabitur condimentum, felis eu pharetra aliquet, libero nulla gravida ipsum, at vehicula augue felis vitae eros.

Aenean ipsum tellus, molestie nec mattis a, fringilla at urna. Sed ut est a justo fermentum suscipit. Maecenas vel elit eu erat commodo volutpat. Phasellus volutpat condimentum tempus. Ut pulvinar fermentum metus id aliquet. Integer sollicitudin nulla in odio luctus commodo. Vivamus elementum vehicula adipiscing. Phasellus ut mi vitae ipsum viverra consectetur ac vitae turpis. Aliquam erat volutpat. Pellentesque at augue sed sapien pellentesque pulvinar vel eget nisi. Maecenas neque ante, congue vel pretium vel, dapibus at magna.

Ut quis mi ac libero ornare condimentum. In nulla leo, iaculis a mattis rhoncus, blandit eget neque. Aliquam sagittis, augue et ornare lacinia, sem arcu cursus massa, nec vulputate leo tortor eget nisl. In hendrerit luctus eros sed ultrices. Donec fermentum lectus at ipsum facilisis pulvinar. Proin vel leo vel leo lacinia viverra id sit amet nisl. Aliquam nec enim vel nunc vestibulum mollis sed vel massa. Aliquam mi tortor, varius in fringilla a, pretium eu est. Fusce laoreet fermentum libero rhoncus varius. Suspendisse mattis, elit auctor auctor eleifend, sapien nisl tempus purus, non elementum mauris mauris ac augue.

Phasellus aliquet fringilla dui, id lacinia augue sodales quis. Vivamus ut aliquam quam. Ut tempus sodales consectetur. Mauris suscipit ante et est interdum lacinia lacinia felis egestas. Nulla dictum, ante in ultricies molestie, velit metus malesuada orci, sagittis eleifend neque massa ac purus. Nam ipsum metus, auctor eu elementum ac, laoreet sed sem. Sed posuere, turpis at convallis aliquam, est leo lobortis turpis, in viverra turpis ipsum non risus. Curabitur turpis eros, porta eu egestas et, pellentesque vel quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris pretium nunc non velit tempor quis viverra velit rhoncus. Aliquam lobortis auctor porta. Praesent pellentesque quam ut tellus scelerisque dignissim. Curabitur ut lacus ut sem aliquet faucibus in non libero.

Cras a libero risus. Pellentesque nec nunc felis, elementum gravida felis. Etiam eu justo justo. Suspendisse ut consectetur lorem. Vestibulum congue rhoncus quam, ac ultrices arcu mattis sit amet. Ut sit amet turpis mi. Morbi erat velit, porttitor eget ullamcorper ac, aliquam at risus. Integer porttitor, turpis quis iaculis varius, enim urna dapibus purus, et hendrerit urna nunc nec massa. Cras lacinia, felis non luctus tempus, diam dolor laoreet nibh, eget vehicula eros urna eu urna. Pellentesque ornare gravida sem, vel dignissim nisl faucibus et. Morbi mauris lectus, vulputate vel cursus in, volutpat ac urna. Nam vulputate dignissim mauris, eget laoreet magna pharetra quis. Ut felis lacus, porttitor sit amet tempus lacinia, viverra eu tortor. Nulla luctus sollicitudin ultrices.

Nam eget nulla nec tellus suscipit gravida. Pellentesque facilisis purus sit amet elit iaculis pharetra sit amet quis nisl. Fusce pretium tempor eros, nec fringilla dolor tempus a. Quisque ac lectus felis, quis cursus eros. Pellentesque pharetra magna et arcu blandit vulputate. Nullam euismod fermentum mauris nec lacinia. Quisque ut tortor faucibus arcu porta convallis et sit amet enim. Quisque suscipit nulla non odio pulvinar eu aliquam massa pharetra. Nam vitae risus non enim interdum aliquam eget sit amet risus. Fusce diam quam, vestibulum sed convallis vel, mattis id lorem. Pellentesque in neque ante. Donec molestie mi eget leo malesuada egestas in vel ligula. Phasellus molestie metus at lectus varius vitae condimentum risus ornare. In sagittis bibendum turpis ultricies laoreet. Curabitur bibendum aliquet massa a fermentum. Mauris tincidunt neque quis velit molestie mattis.

Sed pulvinar iaculis volutpat. Proin aliquet rhoncus volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam adipiscing auctor nisi, quis imperdiet tortor sollicitudin ac. Vestibulum facilisis ultricies luctus. Duis tortor ipsum, tincidunt ut mollis non, ullamcorper vel sapien. Donec sollicitudin dui interdum mauris aliquet ut consectetur ante sollicitudin. In a nunc quis odio molestie ornare. Praesent felis metus, congue tristique sagittis ac, gravida bibendum magna. Aliquam ac eros a massa porttitor congue. Mauris ante justo, placerat a pretium non, pulvinar at mauris. Ut tempor varius neque, ac iaculis dolor molestie at. Maecenas luctus orci dictum orci faucibus nec interdum tellus elementum. Aliquam vestibulum dolor sed nisl luctus vel consequat nisi gravida. Cras sit amet risus eget velit hendrerit malesuada. Aliquam erat volutpat. Suspendisse convallis sem sed neque ullamcorper adipiscing. Aliquam eget mi nisi, a congue dolor. </p>
	</body>
</html>

Exercício O04 – Seletores do CSS 1.0

12 maio, 2009 (20:08) | exercícios | Por: admin

O objetivo deste exercício é o treino dos seletores que aprendeu na aula de hoje.

Para a resolução destes exercícios você trabalhará apenas com o arquivo exercicio_css.html, disponibilizado no link.
Em momento algum você alterará esse arquivo, mexendo apenas dentro da seção marcada no código:
<style type=”text/css”>
/* Alterar apenas aqui o seu arquivo */
</style>

Na entrega de seu exercício objserve que cada resposta é independente entre si a não ser se informado em contrário! Ou seja: não coloque a resposta do A junto com a resposta do B, etc.

Entregue seu exercício via formulário do Google, colando apenas a regra ou as regras geradas, sem colocar a tag <style>!

A) Usando apenas uma regra e sem utilizar agrupamento de seletores, altere a cor e o fundo de todos os parágrafos contidos no texto;

B) Usando apenas uma regra e sem utilizar agrupamento de seletores, altere a cor e o fundo de todos os cabeçalhos contidos no texto;

C) Usando apenas uma regra e sem utilizar agrupamento de seletores, altere a cor e o fundo de todos os links que fazem parte de listas numeradas;

D) Usando apenas uma regra e sem utilizar agrupamento de seletores, altere a cor e o fundo de todos os links que fazem parte de listas numeradas e de listas não numeradas;

E) Usando apenas uma regra, altere a cor e o fundo de todos os links que fazem parte de qualquer tipo de lista;

F) Usando apenas uma regra e sem utilizar agrupamento de seletores, altere a cor, o fundo e a fonte de todas as abreviaturas que estiverem dentro de um elemento de classe igual a texto;

G) Usando apenas uma regra e sem utilizar agrupamento de seletores, altere a cor e o fundo de todos os links que fazem parte de listas numeradas após serem visitados;

H) Usando apenas uma regra e sem utilizar agrupamento de seletores, altere a cor e o fundo de todos os links que fazem parte de listas de definição após serem visitados;

I) Usando apenas uma regra e sem utilizar agrupamento de seletores, altere a cor e o fundo de todos os links que fazem parte de listas não numerada ao serem clicados;

J) Altere a fonte da primeira letra de todos os parágrafos;

K) Altere a cor da primeira letra de todos os parágrafos da classe texto;

Entrega do exercício (opcional):
http://spreadsheets.google.com/viewform?formkey=cm55WTg5NzY5OVlseGh4dFlvOF9sMnc6MA..

Aula 08 – Seletores do CSS 1.0

12 maio, 2009 (16:00) | aulas | Por: admin

Na aula de hoje, começaremos nosso trabalho com a linguagem CSS. Um dos componentes principais desta linguagem e que permite sua ligação com os elementos de uma página HTML é a linguagem de seletores.
Nosso objetivo será conhecer esta linguagem de seletores nesta e nas próximas aulas.
Destaca-se que a linguagem de seletores não está integrada apenas com o CSS. Há bibliotecas que permitem o seu uso dentro da linguagem de programação JavaScript.

Exemplos da aula:

Segue a seguir e no link a apresentação referente à aula.

Leia mais »

Presenças – Favor verificar

11 maio, 2009 (11:00) | presenças | Por: admin

Pessoal,

No menu à esquerda, e abaixo, segue planilha com as presenças de vocês até agora.
Cada um de nossos encontros é formado por duas aulas.
Verifiquem e reportem possíveis problemas via Correio do Eureka com o título “Verificar Presenças”.

Link: http://spreadsheets.google.com/ccc?key=pD5xiFKE9oj3zjpUy8k94Ow

Notas – Favor verificar (2o aviso)

11 maio, 2009 (10:47) | notas | Por: admin

Pessoal,

Coloquei no menu à esquerda e abaixo as notas do 1o Bimestre.
Qualquer problema, entre em contato via Correio do Eureka com o título “Verificar Nota”.

Turma V:
Creio que quase todos já verificaram suas notas comigo.
Quem ainda não o fez, no fim da aula de terça ainda há tempo. Observem que farei o lançamento no iger até o fim desta semana.

Turma U:
Já fiz as correções solicitadas. Favor verificar. Na quarta-feira vocês terão a oportunidade de verificar suas notas se desejarem.

Link: http://spreadsheets.google.com/pub?key=pD5xiFKE9oj0tXWIXJxtyJg

Código gerado em sala na aula sobre Formulários (Turma U2)

6 maio, 2009 (21:56) | aulas | Por: admin


<form method="POST"
		action="http://www.brunocampagnolo.com/2009li/tools/forms/testform.php">
			<fieldset>
				<legend>Obrigatorio</legend>
				<label for="txtNome">Nome:</label>
				<input type="text" value="Jamanta"
				id="nome" accesskey="N" name="nome">

				<input type="radio" id="rbMasculino" name="sexo"
				value="M">
				<label for="rbMasculino">Masculino</label>
				<input type="radio" id="rbFeminino" name="sexo"
				value="F">
				<label for="rbFeminino">Feminino</label>
			</fieldset>
			<fieldset>
				<legend>Opcional</legend>
			</fieldset>
			<input type="submit" value="Ok!">
		</form>

Código gerado em sala na aula sobre Formulários (Turma U1)

6 maio, 2009 (20:10) | aulas | Por: admin


<form method="POST"
		action="http://www.brunocampagnolo.com/2009li/tools/forms/testform.php">
			<fieldset>
				<legend>Obrigatorio</legend>
				<label for="nome">Nome:</label>
				<input type="text" id="nome" name="nome"
				accesskey="N">
				<input type="radio" id="masc" name="sexo"
				value="M">
				<label for="masc">Masculino</label>
				<input type="radio" id="fem" name="sexo"
				value="F">
				<label for="fem">Feminino</label>
			</fieldset>
			<fieldset>
				<legend>Opcional</legend>
			</fieldset>
			<input type="submit" value="Ok!">
		</form>

Exercício F04 – Formulários

5 maio, 2009 (20:01) | exercícios | Por: admin

Neste exercício você deverá gerar uma interface para um formulário. O objetivo é que você conheça os principais componentes de formulário.

1) Obtenha o seu código de aluno a partir do link a seguir. Este código é numérico e está ao lado de seu nome.
http://spreadsheets.google.com/pub?key=pD5xiFKE9oj3zjpUy8k94Ow&gid=1
2) Clique no botão abaixo para gerar seu exercício. Você deverá digitar o código obtido acima.
Caso contrário, seu exercício será desconsiderado!
Você deverá gerar uma interface de formulário o mais semelhante possível à interface gerada. Incluindo a lista de explicação do exercício.
executar no firefox

3) Entregue seu exercício no link abaixo:
http://spreadsheets.google.com/viewform?formkey=cnZxbGZHT1JNc1BYWHU3LUN6T25kNlE6MA..

Entrega até o dia anterior à sua aula: 11 ou 12 de maio.

Exemplo da aula – 5/5

5 maio, 2009 (20:00) | Sem categoria | Por: admin


<form method="post"
		action="http://www.brunocampagnolo.com/2009li/tools/forms/testform.php">
			<fieldset>
				<legend>Obrigatorio</legend>
				<label for="nome">Nome:</label>
				<input type="text" id="nome" name="nome"
				accesskey="N">
			</fieldset>
			<fieldset>
				<legend>Opcional</legend>
			</fieldset>
			<input type="submit" name="enviar" value="Ok!">
		</form>

Aula 07 – Formulários

5 maio, 2009 (19:10) | aulas | Por: admin

A aula de hoje tratará de um dos assuntos mais importantes para o desenvolvedor web: a criação de formulários.

A linguagem HTML possui um conjunto de tags que permite a interação com o usuário de um site tanto com o JavaScript quanto com o Servidor Web.

Sobre este tema, a leitura mais recomendada é a própria tradução da seção sobre formulários da recomendação para o HTML 4.01.

Abaixo, os exemplos tratados na aula:

A apresentação referente à aula vai em anexo (mirror).

Além desta apresentação, também use como consulta o documento anexo, que detalha cada um dos diferentes tipos de item de formulário disponíveis.

Leia mais »

Notas da Turma U e Aula de Hoje

29 abril, 2009 (14:06) | outros | Por: admin

Pessoal,

As notas da turma U (inclusive já com atividade de recuperação) estarão disponíveis até Quarta (6/5).

Além disso, confirmo que a aula de hoje (29/4) será com o Professor Emerson.

Notas (Turma V!)

28 abril, 2009 (19:26) | Sem categoria | Por: admin

Divulgação: Arena Info de Software (inscrições até 20 de maio)

17 abril, 2009 (13:05) | Sem categoria | Por: admin

Pessoal,

Considero uma oportunidade bastante interessante o concurso de desenvolvimento a seguir.

Pensem com carinho na possibilidade de participação e de criação de uma equipe na turma ou, até mesmo, com alunos de outros cursos. Observem que a linguagem é livre e os temas são genéricos, podendo, portanto, encaixar qualquer projeto de vocês nos temas: iPhone, Android, Game, Inteligência Artificial, Widget e Aplicativo Online.

Retirado de: http://info.abril.com.br/blog/arena/20090219_listar.shtml

Mais informações em: http://info.abril.com.br/blog/arena/

Se você é fera em programação é hora de mostrar seu talento e ganhar uma viagem a Nova York

Esta é a oportunidade de você colocar em prática suas melhores idéias em desenvolvimento de software. Junte os amigos e prepare seu projeto para a Arena INFO de Software. A competição vai colocá-lo no mapa dos melhores programadores do país e a equipe campeã ainda vai ganhar uma viagem de uma semana para Nova York.

A Arena INFO de Software terá seis categorias: iPhone, Android, Game, Inteligência Artificial, Widget e Aplicativo Online. Para entrar na competição, forme um grupo com até cinco estudantes de graduação ou pós. Quanto mais original, bem elaborado e útil for seu programa, melhor. As inscrições vão de 1º de março a 20 de maio.

arenainfo