InfoAjuda

Mensagens Recentes

Páginas: 1 [2]
11
Geral / Atualizações/Manutenções do Forum
« Última Mensagem: por DiegoB. Online Outubro 11, 2017, 05:40:26 pm »
Todas as alterações, atualizações e correções do forum serão informadas por meio deste tópico.

18/10/2017 - + ChatBox, + Organização das Seçoes.
  • Adicionado Chat no forum
  • Adicionado botão do whats app
  • Atualização de versão dos arquivos do forum
  • Organização do layout das seções (seguindo o padrão do AVA)


11/10/2017 - Adicionado Video do Youtube\Facebook e logins usando redes sociais.
  • Agora é possível inserir videos do youtube\facebook apenas colocando um link no tópico, o fórum identifica automaticamente o vídeo e insere um player
  • Agora é possível fazer login usando Facebook ou uma conta do Google

10/10/2017 - Adicionado Sistema de TAGS
  • Com esse sistema melhora a organização e localização de post com o assunto desejado

12
Módulo de Desenvolvimento para Web / Visualg Atividade Soma e Produto
« Última Mensagem: por d1martins Online Outubro 09, 2017, 07:45:17 pm »
Código: [Selecionar]
algoritmo "MANIPULACAO-DE-DADOS"

var
   numero1, numero2, numero3, numero4: inteiro
   soma, produto: inteiro

inicio
// Seção de Comandos
   escreva ("Informe o primeiro número inteiro: ")
   leia(numero1)
   escreva ("Informe o segundo número inteiro: ")
   leia(numero2)
   escreva ("Informe o terceiro número inteiro: ")
   leia(numero3)
   escreva ("Informe o quarto número inteiro: ")
   leia(numero4)
   soma := numero1 + numero3
   produto := numero2 * numero4
   escreva ("Resultado da soma do primeiro com o terceiro número: ")
   escreval (soma)
   escreva ("Resultado do produto do segundo com o quarto número: ")
   escreval (produto)

fimalgoritmo
13
Desafios / Desafio - Case da vida real
« Última Mensagem: por wandersondantas Online Setembro 04, 2017, 11:37:11 am »
O desafio será criar uma página para uma agência chamada Webpaint, a empresa nos enviou o layout com as seguintes especificações:

O site deverá ser criado utilizando o Bootstrap (Versão 3 ou 4);

Especificações gerais para todas as páginas:
A fonte utilizada no site é uma webfont gratuita do google da família "Lato" - https://fonts.google.com/specimen/Lato (Esse é o nosso primeiro desafio, integrar essa fonte ao nosso site);
Todas as imagens necessárias para o desenvolvimento encontram-se na pasta “images”;
A área da Logo e menu tem um fundo de cor: #262626;
Menu, fonte em negrito, tamanho 13px, todas as letras maiúsculas em tom de cinza (#d9d9d9), quando o mouse passar por cima do link, mudar a cor para vermelho (#ff6760). A página que o usuário estiver acessando, o link deverá ficar marcado no mesmo tom de vermelho;
Cada página tem um arquivo em Jpg para verificar se está ficando de acordo com o layout desejado;
O conteúdo central da página possui um tamanho fixo de 1110px e deverá ser centralizado;
O Rodapé das páginas serão todos iguais e estão divididos em duas partes:
Contato rápido: Possui um título que deverá ter o tamanho de 30px, negrito e na cor #e0e0e0; o subtítulo, tamanho 20px, letra fina (light) e cor #bebebe; Endereço e telefone tamanho 14px, letra normal e cor #bebebe; Toda seção com fundo na cor #313131;
Os links de redes sociais deverão ser abertos em uma nova aba;
Copyright: tamanho 14px, letra normal e cor #bebebe; Fundo da seção: #2c2c2c;

Página Inicial (“Home”):
Primeira seção possui um título de tamanho 60px e cor #d9d9d9 e apenas o nome da empresa em negrito; um subtítulo de tamanho 40px com a mesma cor do título, com letra fina e um detalhe em itálico; e um botão linkado para a página do portfólio tamanho da letra 14px em negrito e cor branca, fundo na cor #ff6760 com bordas arredondadas; Para o fundo dessa seção deverá ser escolhida uma imagem e coloca-la em escala de cinza;
Segunda seção - serviços, temos um ícone, um título de tamanho 18px em negrito e na cor #616161; e uma descrição de tamanho 14px e na mesma cor do título; O fundo dessa seção é #f8f8f8;
Terceira seção - portfolio, temos um título de tamanho 30px, em negrito e na cor #616161; um subtítulo de tamanho 20px, letra fina e mesma cor do título; as imagens que compõem o portfolio deverão ter um efeito de, ao passar o mouse, a imagem fica com uma opacidade de 40 - 50% e aparecerá o título da imagem centralizada no tamanho 25px, negrito e totalmente preto.

Página “Portfólio”
Área do título com o tamanho 60px, negrito e na cor #d9d9d9; O fundo da seção deverá ser uma imagem em escala de cinza que represente a página;
As imagens tem a mesma especificação da página inicial

Página “About”
Área do título com o tamanho 60px, negrito e na cor #d9d9d9; O fundo da seção deverá ser uma imagem em escala de cinza que represente a página;
Texto no tamanho 20px e na cor #616161;
Área de serviços igual a página inicial;

Página “Contact”
Área do título com o tamanho 60px, negrito e na cor #d9d9d9; O fundo da seção deverá ser uma imagem em escala de cinza que represente a página;
Os campos do formulário deverão ter altura de 50px com borda de 3px na cor #ea6660; O texto no tamanho 20 px, em negrito e na mesma cor da borda do campo; e bordas arredondadas;
O botão deverá ter a fonte no tamanho 14px, em negrito e na cor branca; Fundo na cor #ea6660 e com bordas arredondadas;

Finalizando o desafio:
Ao finalizar, seu projeto deverá ser colocado em um servidor web gratuito - http://000webhostapp.com/

Prazo de entrega: 18/09/2017

Link de acesso as imagens do projeto: https://drive.google.com/drive/folders/0BwnjKw1yTCnWT0ZNNnh4aGZOWkU?usp=sharing
14
Módulo de Web Design / Projeto 6 Bootstrap (exemplo de pagina)
« Última Mensagem: por DiegoB. Online Agosto 31, 2017, 09:41:50 pm »
segue exemplo de pagina criada utilizando a tecnologia bootstrap.

Creditos Wanderson Dantas por fornecer o codigo.
Versão Online

Código: [Selecionar]
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap Template Para o Projeto</title>

    <!-- Bootstrap -->
    <!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>

    <nav class="navbar navbar-default">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Wanderson Dantas</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Item Menu 1</a></li>
            <li><a href="#">Item Menu 2</a></li>
            <li><a href="#">Item Menu 3</a></li>
            <li><a href="#">Item Menu 4</a></li>
            <li><a href="#">Item Menu 5</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <div class="container">
      <div class="jumbotron">
        <h1>Página de Exemplo!</h1>
        <p>Essa é a página de exemplo solicitada no projeto 6 do curso Técnico em Informática, EAD.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Link legal!</a></p>
      </div>

      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Painel com Formulário</h3>
        </div>
        <div class="panel-body">
          <form>
            <div class="form-group">
              <label for="exampleInputEmail1">Login</label>
              <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Login">
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Senha</label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Senha">
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox"> Salvar senha?
              </label>
            </div>
            <button type="submit" class="btn btn-default">Enviar</button>
          </form>
        </div>
      </div>

      <table class="table table-hover">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td><td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--<script src="js/bootstrap.min.js"></script>-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
      </body>
      </html>
15
Módulo de Web Design / Exemplo Animação JQuery (projeto5)
« Última Mensagem: por DiegoB. Online Agosto 29, 2017, 06:00:10 pm »
Segue aexemplo de animação JQuery:


exemplo com animação encadeada:
Código: [Selecionar]
$("#ret1").fadeOut(3000, function(){
$(this).show(500).hide(500).show(500).fadeTo(3000, 0.1).fadeTo(1000, 1);
});

Nesse exemplo todas as animações sao iniciadas em sequencia, as animações são concatenadas usando o ponto final "." apos o comando anterior;



Exemplo com animação em CallBack:
Código: [Selecionar]
$("#ret1").fadeOut(3000, function(){
       $(this).fadeIn(3000, function(){
$(this).fadeTo(3000, 0.1);
});
});
Nesse exemplo cada codigo é executado após o termino do codigo anterior, no modo callback pode ser executado outras funções que não sejam animações.

16
Módulo de Web Design / Re:Projeto 2 - Calendario em Javascript (web design avançado)
« Última Mensagem: por d1martins Online Agosto 26, 2017, 12:04:24 pm »
Segue meu código .js para montagem do calendário.
Ele é genérico, serve para qualquer data que você colocar no HTML:

Código: [Selecionar]
var data, diaDaSemana, novaData;
var split;
var mes; //ARMAZENA A QUANTIDADE DE DIAS DO MÊS, PARA SABER ATÉ ONDE DEVE SER O PREENCHIMENTO DA TABELA

function executar(){
document.getElementById("nome").innerHTML="DIEGO JOSÉ DE OLIVEIRA FÉLIX MARTINS";
var nascimento = document.getElementById("data").innerHTML="10 de janeiro de 1986";

var tabela = document.getElementById("calendario"); //RECEBE A TABELA
var linhas = document.getElementById("exemplo"); //RECEBE O VETOR LINHA CONTENDO OS 0's

//DESCOBRINDO O DIA DA SEMANA DA DATA DE NASCIMENTO
descobrirDiaSemana(nascimento);

//LIMPANDO OS VALORES DA TABELA
limparTabela(linhas);

var dia = 1;

//PERCORRE AS LINHAS PREENCHENDO OS DADOS - começa do 1. 0 é o cabeçalho.
for(i = 1; dia <= mes; i++){
//PERCORRE AS COLUNAS PREENCHENDO OS DADOS
for(var j = 0; j < 7; j++){
if(i==1 && j < diaDaSemana)
tabela.rows[i].cells[j].innerHTML="";
else
tabela.rows[i].cells[j].innerHTML=dia++;
if(dia > mes) break;
}
if(dia <= mes) addLinha(tabela);
}
}

// ########## FUNÇÕES ##########
function descobrirDiaSemana(nascimento){
split = nascimento.split(" ");
split[2] = converterMes(split);
//COLOCANDO O PRIMEIRO DIA DO MÊS DA DATA DE NASCIMENTO COMO REFERENCIA PARA INSERÇÃO DOS DIAS NA TABELA.
novaData = split[2] + " " + 1 + "," +split[4];
data = new Date(novaData);
//PEGA O DIA DA SEMANA EM QUE OCORREU O PRIMEIRO DIA DO MÊS DE ANIVERSÁRIO
diaDaSemana = data.getDay();
}

function converterMes(split){
//CONVERTE O MÊS PARA O PADRÃO AMERICANO
if (!split[2].localeCompare("janeiro") || !split[2].localeCompare("Janeiro")) {mes = 31; return "january";}
else if(!split[2].localeCompare("fevereiro")|| !split[2].localeCompare("Fevereiro")) {mes = bissexto(split); return "february";}
else if(!split[2].localeCompare("março") || !split[2].localeCompare("Março")) {mes = 31; return "march";}
else if(!split[2].localeCompare("abril") || !split[2].localeCompare("Abril")) {mes = 30; return "april";}
else if(!split[2].localeCompare("maio") || !split[2].localeCompare("Maio")) {mes = 31; return "may";}
else if(!split[2].localeCompare("junho") || !split[2].localeCompare("Junho")) {mes = 30; return "june";}
else if(!split[2].localeCompare("julho") || !split[2].localeCompare("Julho")) {mes = 31; return "july";}
else if(!split[2].localeCompare("agosto") || !split[2].localeCompare("Agosto")) {mes = 31; return "august";}
else if(!split[2].localeCompare("setembro") || !split[2].localeCompare("Setembro")) {mes = 30; return "september";}
else if(!split[2].localeCompare("outubro") || !split[2].localeCompare("Outubro")) {mes = 31; return "octuber";}
else if(!split[2].localeCompare("novembro") || !split[2].localeCompare("Novembro")) {mes = 30; return "november";}
else if(!split[2].localeCompare("dezembro") || !split[2].localeCompare("Dezembro")) {mes = 31; return "december";}
else return "MÊS DIGITADO É INVÁLIDO";
}

function bissexto(split){
var ano = parseInt(split[4]);
if(((ano % 4 == 0) && (ano % 100 != 0)) || (ano % 400 == 0))
return 29;
return 28;
}

function limparTabela(linhas){
for(var k = 0; k < 7; k++){
linhas.cells[k].innerHTML="";
}
}

function addLinha(tabela){
var numDeLinhas = tabela.rows.length; //CAPTURA O NÚMERO DE LINHAS DA TABELA
var numDeColunas = tabela.rows[numDeLinhas-1].cells.length; //CAPTURA O NÚMERO DE COLUNAS DA TABELA DISPOSTAS NA ÚLTIMA LINHA. Mantém o padrão.
var novaLinha = tabela.insertRow(numDeLinhas); //INSERE NOVA LINHA

//CRIANDO AS COLUNAS
for(var k = 0; k < numDeColunas; k++){
var novaCelula = novaLinha.insertCell(k);
}
}
17
Tutoriais / Mini Curso da CodeCademy - Jquery
« Última Mensagem: por DiegoB. Online Agosto 25, 2017, 06:47:30 pm »
segue link, curso interativo muito bom para melhorar o aprendizado e fixar melhor a sintaxe do JQuery.

Aula JQuery
18
Módulo de Web Design / Projeto 2 - Calendario em Javascript (web design avançado)
« Última Mensagem: por DiegoB. Online Agosto 25, 2017, 06:26:59 pm »
segue projeto ultilizado na competência 2.

Link para visualização online
Calendario

abaixo codigo do sistema:
<html>
Código: [Selecionar]
<!DOCTYPE html>
<html>
<head>
<style>
#retangulo {width: 610px; margin:auto; border: 1px solid black; padding: 10px;
background-color: #999; text-align: center; }
table {width:100%; margin:auto;}
th, td {width: 50px; height: 50px; border: 1px solid black; background-color: white; }
th {background-color:orange;}
</style>
<script src="atividade.js"></script>
</head>
<body>
<div id="retangulo" class="linha">
<div id="titulo" class="dentro">
<h3 id="nome">Nome do Aluno</h3>
<p id="data">Dia mês e ano do nascimento do aluno</p>
</div>
<table id="calendario">
<tr id="cabecalho">
<th>domingo</th><th>segunda</th><th>terça</th><th>quarta</th><th>quinta</th><th>sexta</th><th>sábado</th>
</tr>
<tr id="exemplo">
<td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
</tr>

</table>
<div id="controle" class="linha"><p><button id="acao" onclick="executar()">Ação</button></p></div>
</div>

</body>
</html>


<Javascript>
Código: [Selecionar]
function executar() {

var $aluno = "..Diego Barbosa dos Santos.."; //Nome do Aluno =)
var $data = new Date();
$data.setFullYear(1988, 6, 26); // ANO, MêS e Dia (data de nascimento)
var $meses = ["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"];
var $pega_mes = $data.getMonth();
var $mes_prox = $pega_mes+1;
var $mes_ant = $pega_mes -1;
var $ano = $data.getFullYear();
var $calendario ="";
var $dia_i = 1;



var $prox_data = new Date($mes_prox +' 1 ,'+$ano);
var $dia_semana= $prox_data.getDay();
var $dia_semana2 = $dia_semana;

while ($dia_semana>0){
$calendario += "<td></td>";
$dia_semana--;
}

while ($dia_i <= 31){
if ($dia_semana2 > 6){
$dia_semana2 = 0;
$calendario += "</tr><tr>";
}
$calendario +="<td>"+$dia_i+"</td>";
$dia_semana2++;
$dia_i++;
}
 
var $montar_calendario = "<table><th>domingo</th><th>segunda</th><th>terça</th><th>quarta</th><th>quinta</th><th>sexta</th><th>sábado</th>";
$montar_calendario += "<tr>";
$montar_calendario += $calendario;
$montar_calendario += "</tr></table>";

// escreve o nome do aluno no HTML
document.getElementById("nome").innerHTML = $aluno;

// Escreve a data de nascimento no HTML
document.getElementById("data").innerHTML = $data.getDate() + " de "  + $meses[$data.getMonth()] + " de " + $data.getFullYear() ;

//Monta o Calendario na div HTML
document.getElementById("calendario").innerHTML=$montar_calendario;




}
19
Módulo de Web Design / Exemplo paginas linkadas (projeto2) (introdução web design)
« Última Mensagem: por DiegoB. Online Agosto 25, 2017, 06:10:57 pm »
Introdução a Web Design (INF) 2017.1
Projeto 2



Esqueleto para estudos relacionados ao projeto da 2 competencia, paginas linkadas com menus.

ps: projeto está somente o esqueleto sem conteudo.

Bons estudos.

segue link para download
Download

abaixo todos os codigos:

index.html
Código: [Selecionar]
<!DOCTYPE html>

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title> Projeto</title>
 </head>

 <body>
 
 <div id="menu">
 <a href="index.html" >Inicio</a>|
 <a href="lista.html" >Lista</a>|
 <a href="tabela.html" >Tabela</a>|
 <a href="form.html" >Formulario</a>
 
 </div>
 
 
 
 <div>
 <h2><br>Titulo da pagina</h2>
 <p>inserir conteudo bla bla bla bla. </p>
 </div>

 </body>

</html>

form.html
Código: [Selecionar]
<!DOCTYPE html>

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title> Projeto </title>
 
 </head>

 <body>
 
 <div id="menu">
 <a href="index.html" >Inicio</a>|
 <a href="lista.html" >Lista</a>|
 <a href="tabela.html" >Tabela</a>|
 <a href="form.html" >Formulario</a>
 
 </div>
 
 
 
 <div id="conteudo">
 <h2><br>Contato</h2>
 <form action="#" method="POST">
 
 <p> Nome:<br />
 <input type="text" name="nome">
 </p>
 
 <p> Email:<br />
 <input type="email" name="email">
 </p>
 
 <p>Menssagem:<br>
 <textarea rows="10" cols="32" /></textarea>
 </p>
 
 <p>
 <input type="submit" name="Enviar" value="Enviar">
 </p>
 </div>

 </body>

</html>

lista.html
Código: [Selecionar]
<!DOCTYPE html>

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title> Projeto </title>
 
 </head>

 <body>
 
 <div id="menu">
 <a href="index.html" >Inicio</a>|
 <a href="lista.html" >Lista</a>|
 <a href="tabela.html" >Tabela</a>|
 <a href="form.html" >Formulario</a>
 
 </div>
 
 
 
 <div id="conteudo">
 <h2><br>Lista Nao ordenada</h2>
 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 </ul>
 
 
 
 
 <h2><br>Lista ordenada</h2>
 
 <ol>
 <li>Item 1</li>
 
 <li>Item 2</li>
 
 </ol>
 
 
 </div>

 </body>

</html>

tabela.html
Código: [Selecionar]
<!DOCTYPE html>

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title> Projeto </title>
 
 </head>

 <body>
 
 <div id="menu">
 <a href="index.html" >Inicio</a>|
 <a href="lista.html" >Lista</a>|
 <a href="tabela.html" >Tabela</a>|
 <a href="form.html" >Formulario</a>
 
 </div>
 
 
 
 <div id="conteudo">
 
 <h2><br>Titulo</h2>
 
 <table border="1" >
 
 <tr>
 <td>conteudo1   </td>
 <td> conteudo2</td>
 <td> conteudo3 </td>
 </tr>

 

 </table>
 
 </div>

 </body>

</html>
20
Geral / Bem Vindo!!!
« Última Mensagem: por DiegoB. Online Agosto 24, 2017, 09:30:24 pm »
Tópico de exemplo... :-*
Páginas: 1 [2]