Dicas para desenvolvimento da Avaliação Prática de DW-II

Avaliação prática de Desenvolvimento Web 2
Acesse aqui a avaliação.

Segue alguns links úteis para o desenvolvimento da nossa Avaliação Prática.

Leia e/ou assista atentamente as dicas abaixo:

Validação de formulário com o plugin jquery.
Vídeo aula de validação com o plugin validate

Leia e/ou assista as dicas dos links abaixo para fazer o calendário para o campo data de nascimento:
Calendário com o jqueryUI (datepicker)

Leia e/ou assista as dicas dos links abaixo para fazer o slide:

Slide com o jquery cycle
Vídeo-aula de criação de Slide

Código para botões

html (colocar na div topo ou banner)
<a href="#" id="next"><img src="img/seta.png"/></a>
<a href="#" id="prev"><img src="img/seta1.png"/></a>

css (colocar no seu aquivo de folha de estilo abaixo do id banner ou topo )
#banner a{
    position: relative;
    float: right;
    top: -50px;
    z-index:150;
    margin: 0 15px 0 0;
    text-decoration: none;
}

Desenvolvimento da Atividade Prática 4

Assista o vídeo abaixo e desenvolva a sua atividade prática.

Atividade Prática 4

Boa sorte!

Exemplos da aula 19

HTML

<!-- EXEMPLOS DAS FUNÇÕES SHOW, HIDE, TOOGLE  -->

<p>Deseja responder nossa enquete?</p>

<button id="bot">Responder</button><br><br>

<div id="divForm" style="display: none">
<p>Quantas horas de estudo você realiza por dia?</p>
<form name="form" action="#" method="GET">
<input type="radio" name="escHoras" value="hora1"> Pelo menos 1 hora
<br>
<input type="radio" name="escHoras" value="hora2"> Pelo menos 2 horas
<br>
<input type="radio" name="escHoras" value="hora3"> Pelo menos 3 hora
<br>
<input type="radio" name="escHoras" value="horaMais"> Mais de 3 horas
<br><br>
<input type="submit" name="botao" value="Enviar">
<br><br>
<button id="voltar">Voltar</button>
</form>
</div>

<!-- EXEMPLO DA FUNÇÃO DELAY  -->
<button id="b1">Conteudo 1</button>
<button id="b2">Conteudo 2</button>

<div id="conteudo1" style="display:none">
<h2>Titulo 1</h2>
<p>
Texto para conteúdo 1 Texto para conteúdo 1<br>
Texto para conteúdo 1 Texto para conteúdo 1<br>
Texto para conteúdo 1 Texto para conteúdo 1<br>
Texto para conteúdo 1 Texto para conteúdo 1<br>
Texto para conteúdo 1 Texto para conteúdo 1<br>
Texto para conteúdo 1 Texto para conteúdo 1<br>
Texto para conteúdo 1 Texto para conteúdo 1<br>

</p>
</div>

<div id="conteudo2" style="display:none">
<h2>Titulo 2</h2>
<p>
Texto para conteúdo 2 Texto para conteúdo 2<br>
Texto para conteúdo 2 Texto para conteúdo 2<br>
Texto para conteúdo 2 Texto para conteúdo 2<br>
Texto para conteúdo 2 Texto para conteúdo 2<br>
Texto para conteúdo 2 Texto para conteúdo 2<br>
Texto para conteúdo 2 Texto para conteúdo 2<br>
Texto para conteúdo 2 Texto para conteúdo 2<br>
</p>
</div>

<br><br>

<!--EXEMPLO DAS FUNÇÕES FADEIN E FADEOUT-->
<input type="button" name="bot1" value="Anterior">
<input type="button" name="bot2" value="Próximo">
<br>
<img id="img1" src="img/img1.jpg"  width="400" height="200" style="position: absolute">
<img id="img1" src="img/img2.jpg"  width="400"  height="200" style="display: none; position: absolute">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<!--EXEMPLO DAS FUNÇÕES FADETO-->
<div class="divLight">
Conteúdo em texto na camada divLight
</div>

Opacidade:
<input type="text" name="opacidade" size="5">%<br><br>
<input type="button" name="bot" value="Alterar Opacidade">

<!--EXEMPLO DAS FUNÇÕES FADETOGGLE-->
<p>Qual a função básica do jQuery?<a href=""> Ver resposta</a></p>
<p id="resposta" style="display: none">
Jquery foi feito para tornar mais simples a navegação<br>
do documento HTML, a seleção de elementos DOM e <br>
criar animações.
</p>

CSS

<style type="text/css">
.divLight {
width: 200px;
height: 200px;
background-color: gray;
margin-bottom: 10px;
}

</style>

JQUERY

/*AULA 19 - FUNÇÕES JQUERY 1*/

/*Função .show() e hide(): mostra um determinado elemento com o
comando .show() ou ocultá-lo com o comando .hide().*/

$(document).ready (
function() {
$("#bot").click(
function() {
$("p").hide();
$("#divForm").show();
});

$("#voltar").click(
function() {
$("p").show();
$("#divForm").hide();
});
});

/*Função .toggle(): realiza as mesmas funções dos comandos anteriores, mas
permite analisar se o elemento está visível ou não. Ela ainda permite os
mesmos parâmetros dos comandos anteriores.
*/

ocult = true;
$(document).ready (
function() {
$("#bot").click(
function() {
$("p").toggle("slow");
$("#divForm").toggle("slow");
if (ocult) {
document.getElementById('bot').innerHTML = 'Ocultar';
ocult = false;
} else {
document.getElementById('bot').innerHTML = 'Responder';
ocult = true;
}
});
});

/*Função .delay(): Programa par cada evento um tempo de espera
estimado em milessegundos como parâmetro. Pode ser combinada com outras funções.
*/


$(document).ready (
function() {
$("#b1").click(
function() {
$('div').add('p').hide();
$('#conteudo1').show('slow');
$('#conteudo1 p').show('slow');
});

$("#b2").click(
function() {
$('div').add('p').hide();
$('#conteudo2').show('slow');
$('#conteudo2 p').delay(1500).show('slow');
});


});

/*FUNÇÕES DE OPACIDADE: Podemos controlar a opacidade dos elementos tonando-o
totalmente opaco ou invisível, assim como o nível de opacidade com os comandos
.fadeIn, .fadeOut(), .fadeTo(), fadeToggle*/

$(document).ready (
function() {
$('input[name="bot1"]').click(
function() {
$("img").fadeOut('slow');
$("#img1").fadeIn('slow');
});

$('input[name="bot2"]').click(
function() {
$("img").fadeOut('slow');
$("#img2").fadeIn('slow');
});
});

/*Função fadeTo(): controla o nível de opacidade do elemento html*/

$(document).ready (
function() {
$('input[name="bot"]').click(
function() {
var valor = $('input[name="opacidade"]').val();
valor = valor/100;
$(".divLight").fadeTo("slow", valor);
});
});

/*Fadetoggle(): altera o modo de visibilidade de um elemento voltando a
seu estado origignal quando atividade novamente.
Sintaxe:
$("elemento").fadeToggle(velocidade);*/

$(document).ready (
function() {
$("a").hover(
function() {
$("#resposta").fadeToggle();
});
});

Desenvolvimento da Atividade Prática 3 - DWII

Segue o link para a Atividade Prática 3:

Atividade prática 3

Algumas dicas para o desenvolvimento do mesma:

Estrutura HTML:

<html>
<head>
<title>Atividade prática 3 - JQUERY </title>
<link href="css/estilo.css" rel="stylesheet" type="text/css"></link>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/myjquery.js" type="text/JavaScript"></script>
</head>

<body> 
<div id="pcores">
<div class="tam" id="cor1"> </div>
                <div class="tam" id="cor2"> </div>
                <div class="tam" id="cor3"> </div>
                <div class="tam" id="cor4"> </div>
        </div>
</body>
</html>

Estrutura CSS:

body {
 background-color: #008B8B;
}

#pcores {
 background-color: #FFF;
 width: 250px;
 height: 70px;
 float: right;
}

.tam {
 width: 40px;
 height: 40px;
 background-color: red;
 display: inline;
 float: left;
 margin: 11 11 11 11;
}

#cor1 {
 background-color: #008B8B;
 }

#cor2 {
 background-color: #F0E68C;
 }

#cor3 {
 background-color: #4682B4;
 }

#cor4 {
 background-color: #8B008B;
 }

Estrutura jQuery (ideia inicial, desenvolva o restante):

$(document).ready (
function() {
$("#cor1").click(
function() {
$("body").css("backgroundColor","#008B8B");
});
});

Observações:

• Crie a estrutura de pastas que vocês já conhecem;
• Não esqueçam de incluir dentro da pasta js o aquivo (código fonte) do jQuery.
• Lembre-se de que para cada uma das estruturas acima é criado um arquivo;  

Boa sorte!

Desenvolvimento da Atividade Prática 2

Atividade pŕatica 2

Desenvolver um script em javascript de validação de dados de um formulário html com os seguintes campos:

Nome: (type: text)
Sobrenome: (type: text)
Email: (type: text)
Senha: (type: text)

O script irá validar os campos se nenhum dessas condições forem verdadeira: Caso um deles seja vazio, se o campo de email não tiver pelo menos um "@" e um (.) e o campo de senha não houver pelo menos 6 digitos.

Segue os link de apoio para desenvolvimento da atividade prática 2:
Validação de formulário