Breve será realizado outro FiboDojo

Fonte: O Velho

Em ambas sessões, foi exposto o seguinte problema:

Problema

O objetivo do problema era simular uma partida de tênis simples com apenas um jogo, onde os jogadores poderiam pontuar e trocar vantagens até o fim do jogo. As regras do jogo eram:

• Todos os jogadores podem pontuar, a ordem de pontuação é 0, 15, 30, 40 pontos.
• Um jogador com 40 pontos, ganha o jogo sem precisar de vantagem caso marque mais um ponto e seu oponente tenha menos de 40 pontos.
• Um jogador ganha a vantagem caso marque ponto e seu oponente possua 40 pontos.
• Um jogador perde a vantagem caso seu oponente pontue.
• Se um jogador com vantagem pontuar, ganha o jogo.

As regras do Fibo Dojo

Durante uma rodada

A pessoa que está no computador é o piloto e a que está o ajudando é o co-piloto. Quando a rodada acabar, o piloto vai ceder seu lugar ao co-piloto e voltará para a platéia, enquanto isso, uma pessoa da platéia irá assumir o posto de co-piloto.

Processo

O Coding Dojo é dividido em rodadas e sessões, uma sessão é comspota por várias rodadas. A rodada terá duração de 7 minutos e a sessão em torno de 1h30min.

Tempos da sessão

• 10 minutos: Explicação dos detalhes do exercício que irá ser aplicado.
• 25-30 minutos: retrospectiva rápida da sessão anterior, o que correu bem, o que foi interessante, o que foi frustrante.
• 7 minutos: Tempo de cada rodada, ou seja, o tempo em que cada pessoa irá ficar no computador.
• 5-10 minutos: Esse tempo é para ser usando entre uma sessão e outra para discutir como as coisas estão indo.

Abaixo estão os links para os projetos das duas sessões:

ProjetoSessao1, ProjetoSessao2

Se quiser saber como foi o comportamento dos participantes(pela visão de Thyago Roberto do ilogg.net) clique aqui.

Achei muito legal essa tirinha do nerdson, porque acontece demais isso. =D

Cansado dos sustos quando você altera um código que nem sabia o que fazia?

Quer se tornar num mestre na codificação e ter conhecimento das boas práticas de codificação?

Então venha para:

Clique aqui e cadastre-se

Isso ocorre quando existe algum código JavaScript modificando o DOM antes do término do carregamento da página. Para resolver esse problema basta colocar no head ou no body:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
	//insira seu código javascript aqui
});
</script>

Baixe o jQuery

Está você fazendo o seu layout (provavelmente no Firefox), e em algum lugar você definiu um tamanho para um elemento e quando você vai verificar no IE… BOOM! No danado do IE (para não dizer outras palavras que dependendo da pessoa vai usá-las para amaldiçoar o browser), viu-se que o tamanho está maior. E agora? o que você fez de errado? Nada! na verdade o IE possui grande erros de interpretação de tamanho ou espaçamento ou margem(algumas desses erros são inexplicáveis). Bem para resolver esse tipo de problema usa-se hacks ( ufa!).

Abaixo exemplos de alguns hacks. Como não sei os nomes originais vou definir os nomes.
* Esses hacks não reconhecidos apenas pelo IE os outros browser irão ignorar a linha

• Hack do underline ( _ )

body{
background:#FFF;
_background:#000;
}

Esta hack é usado no IE 6, IE 7 e IE 8. Como podem ver ao terminar de carregar a página no IE irá mostrar a cor preto como cor de fundo da página, nos outros browser vai mostrar branco. O underline pode ser colocado antes de qualquer atributo.

• Hack do asterisco ( * )

body{
background:#FFF;
*background:#000;
}

É a mesma coisa do underliner ( _ ). Alguns dizem que o underline ( _ ) não funciona no IE7, no meu funcionou usando IE7 no Window xp. Caso não funcione no seu uso o *

• Hack * html

div{ background:#FFF; }
* html div { background:#000; }

Esta hack é usado no IE 6, IE 7 e IE 8. Novamente quando terminar de carregar a página a cor de fundo no IE será preto e nos demais branco. Esse hack pode ser aplica a um elemento (div), id (#) e class (.).

• Hack * html

div{ background:#FFF; }
* html div { background:#000; }

• Hack *>

div{ background: #fff; }
*>div { background: #000; }

Este hack já faz é não mostrar no IE, ou seja, quando a página carregar no IE a cor de fundo será branco e nos demais browser será preto.

Dica importante: Se você perceber que está usando muitos hacks use o comentários condicionais.

Inclui para todas as versões de IE
<!--[if IE]><link rel="stylesheet" href="ie-hack.css" type="text/css" /><![endif]-->
Inclui se for IE 5(5.0 ou 5.5)
<!--[if IE 5]><link rel="stylesheet" href="ie5-hack.css" type="text/css" /><![endif]-->
Inclui se for IE 5.0
<!--[if IE 5.0]><link rel="stylesheet" href="ie50-hack.css" type="text/css" /><![endif]-->
Inclui se for IE 5.5
<!--[if IE 5.5]><link rel="stylesheet" href="ie55-hack.css" type="text/css" /><![endif]-->
Inclui se for IE 6
<!--[if IE 6]><link rel="stylesheet" href="ie55-hack.css" type="text/css" /><![endif]-->
Inclui se for IE 5 ou maior
<!--[if gte IE 5]><link rel="stylesheet" href="ie5gte-hack.css" type="text/css" /><![endif]-->
Inclui se for menor IE 6
<!--[if lt IE 6]><link rel="stylesheet" href="ie6lt-hack.css" type="text/css" /><![endif]-->
Inclui se for IE 5.5 ou menor
<!--[if lte IE 5.5]><link rel="stylesheet" href="ie55lte-hack.css" type="text/css" /><![endif]-->

Em resumo hacks não são legais de usar, é mais para uma pog para arrumar problemas de incompatibilidade do IE quem vem acompanhando ao longo de suas versões e que agora a microsoft está convergindo para os padrões da W3C. Tente fazer seu layout com maior compatibilidade possível, evite uso de hacks (só use em caso que não tenha outra saída). Não pense também que o comentário condicional será sua salvação, pois com ele você acaba criando mais arquivos css o que torna difícil a manutenção do layout.

Se você estiver fazendo um layout, sempre teste no máximo de browser que puder (pelo menos nos mais conhecidos como IE 8, 7 e 6, Firefox, Chrome e Safari). Assim fica mais fácil e mais rápido detectar possíveis erros no layout, logo, mais fácil de corrigi-los.

Leia mais sobre hack no site do Maujor

Centralizando elemento horizontalmente

<html>
	<head>
		<style>
		/* Centralização necessária para o IE(ou div que conterá o div a ser centralizado) */
		body{
			text-align: center;
		}
		/* Elemento que será centralizado */
		div{
			text-align: left; /* Corrige o alinhamento do texto */
			width: 700px; /* Tem que definir um tamanho se não, não funciona. */
			margin: 0 auto; /* Aqui que acontece a mágica */
			background: #768;
		}
		</style>
	</head>
	<body>
		<div>Teste</div>
	</body>
</html>

Essa mágica acontece pelo seguinte fato, quando uma tamanho é definido(width: 700px)
e colocado uma margem automática(margin: 0 auto) o browser pega o tamanho definido no elemento e subtrai do tamanho da tela, o resto ele divide por dois e joga na margem esquerda e na margem direita(por isso do auto, o 0(zero) é só para zera o margin-top e o margin-botton).

Testado no Windows 7, usando: Firefox 3.5, IE 8, Chrome 4.0, Safari 4.0.4

link de exemplo 1

Centralizando elemento no centro da página.

No código abaixo mostra como centralizar um elemento no centro dá página.

<html>
	<head>
		<style>
		div{
		    width: 270px; /* Tamanho do div */
		    height: 180px; /* Altura do div */
		    position: absolute;
		    left: 50%;
		    top: 50%;
		    margin-left: -135px; /* Tamanho do div divido por 2 */
		    margin-top: -90px; /* Altura do div divido por 2 */
 		    background: #678;
		}
		</style>
	</head>
	<body>
		<div>
			<div>No centro da página</div>
		</div>
	</body>
</html>

Veja que no exemplo foi definido uma altura e uma largura. No atributo margin-left tem que ser colocado a metade negativa (no exemplo margin-left: -135px) do valor configurado no width (no exemplo width: 270px) e no atributo margin-top tem que colocar metade negativa (no exemplo margin-top: -90px) do valor configurado no height (no exemplo height: 180px).
Esse exemplo tem um pequeno problema. Quando a janela do browser é redimensionada para um tamanho menor que o tamanho (por exemplo) da largura, o elemento começa a sumir do lado esquerdo. É um problema que ainda não tive um tempo para descobrir porquer ele acontece e como resolver. Se alguém souber, por favor, me avise!

Testado no Windows 7, usando: Firefox 3.5, IE 8, Chrome 4.0, Safari 4.0.4

link de exemplo 2

Ná férias, terei tempo e assim colocarei várias dicas.

Muitas Dicas sobre Javascript, Css, PHP, Java, Maven, Scrum.

=D

Sejam todos Bem-vindos!