Formulário de contato totalmente responsivo

Um formulário de contato padrão

Um formulário de contato típico consta de: três campos de input para texto: nome, e-mail e assunto; um campo textarea para o texto da mensagem; um input tipo botão para envio da mensagem.

Primeiramente segue o código Html do formulário, que já tem as classes certas para utilizarmos para estilizá-lo depois com Css.

 <div class="pgContato">  
    <div class="contato">  
       <div class="formContato">  
          <form action="contato" class="" id="formContato" method="post" tabindex="1">  
             <input autofocus="" id="nome" name="nome" placeholder="Nome *" required=""    title="Digite o seu nome" type="text" value="" />  
             <input id="email" name="email" placeholder="Email *" required="" title="Digite seu e-mail" type="text" value="" />  
             <input id="site" name="site" placeholder="Telefone (Opcional)" title="Digite seu telefone, site, pode ser facebook, twitter, youtube, algo para o localizarmos" type="text" value="" />  
             <textarea id="conteudo" name="conteudo" placeholder="Deixe uma mensagem *" required="" title="Deixe uma mensagem *"></textarea>  
             <button class="botaoContato" name="botaoContato" title="Clique para enviar seu contato" type="submit">Enviar</button>  
          </form>  
       </div>  
    </div>  
 </div>  

Agora vamos utilizar o Css para estilizarmos o nosso formulário de contato, lembrando que o formulário será responsivo, ou seja, irá se ajustar a qualquer dispositivo, seja desktop, tablet ou celular. O visual que fiz é apenas um exemplo, você pode alterá-lo facilmente, basta apenas mudar o Css, seja a cor, a altura e etc.

Segue o código Css abaixo.

.formContato {
      width: 100%;
  }

  .formContato input {
      width: 90%;
      margin-left: 10px;
      margin-right: 10px;
  }

  .formContato textarea {
      width: 90%;
      margin-left: 10px;
      margin-right: 10px;
  }

  .botaoContato {
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 1px;
  }

  .pgContato input {
      padding-left: 20px;
      color: #292929;
      font-size: 18px;
      background-color: #E9E9E9;
      border: 1px solid #E9E9E9;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      height: 40px;
      width: 100%;
      float: left;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
      border-left: 1px solid #ccc;
  }

  .pgContato textarea {
      padding-left: 20px;
      color: #292929;
      font-size: 18px;
      background-color: #E9E9E9;
      border: 1px solid #E9E9E9;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      height: 200px;
      width: 100%;
      float: left;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
      border-left: 1px solid #ccc; 
  }

  .botaoContato {
      border-radius: 4px;
      color: #fff;
      padding: 2px 40px;
      height: 40px;
      margin-top: 18px;
      opacity: 0.9;
      margin-bottom: 20px;
      cursor: pointer;
      background: rgb(162,27,27);
      background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
      background: -moz-linear-gradient(top, rgb(162,27,27) 0%, rgb(162,27,27) 20%, rgb(162,27,27) 93%, rgb(162,27,27) 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(162,27,27)), color-stop(20%,rgb(162,27,27)), color-stop(93%,rgb(162,27,27)), color-stop(100%,rgb(162,27,27)));
      background: -webkit-linear-gradient(top, rgb(162,27,27) 0%,rgb(162,27,27) 20%,rgb(162,27,27) 93%,rgb(162,27,27) 100%);
      background: -o-linear-gradient(top, rgb(162,27,27) 0%,rgb(162,27,27) 20%,rgb(162,27,27) 93%,rgb(162,27,27) 100%);
      background: -ms-linear-gradient(top, rgb(162,27,27) 0%,rgb(162,27,27) 20%,rgb(162,27,27) 93%,rgb(162,27,27) 100%);
      background: linear-gradient(to bottom, rgb(162,27,27) 0%,rgb(162,27,27) 20%,rgb(162,27,27) 93%,rgb(162,27,27) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a21b1b', endColorstr='#a21b1b',GradientType=0 );
      display: inline-block;
      border: none;
      border-bottom: 1px solid #500707;
      border-right: 1px solid #500707;
  }

  .botaoContato:hover {
      opacity: 1.0;
      transition: 1s;
  }

E está ai seu formulário de contato, simples, bonito e responsivo.

Ordenar vetor em números par e números impar em Java

Começamos inicializando os vetores. Serão 3 vetores, o original, o que colocaremos os números pares e outro com os números impares.

Depois preencheremos o vetor com números randômicos.

Logo após separaremos os números do vetor, em pares em impares.

E em seguida, vamos mostrar na telas os três vetores, o original, o com os números pares e o com os números impares.

Segue o código abaixo.

import java.util.Scanner;
public class Pratica4 {
 public static void main(String args[]){
 //declara as variáveis necessárias
 int[] vet = new int[50];
 int[] vetP = new int[50];
 int[] vetI = new int[50];
 int ind1 = 0;
 int ind2 = 0;
 int ind3 = 0;
 Scanner leia = new Scanner(System.in);
 //inicializa o vetor
 while (ind1 < 50){
   vet[ind1] = (int)(Math.random()*100)+1;
   ind1++;
 }
 //transfere para o vetP somente os valores pares e para vetI somente os valores ímpares
 ind1 = 0;
 while (ind1 < 50){
   if (vet[ind1] % 2 == 0) {
     vetP[ind2] = vet[ind1];
     ind2++;
   } else {
     vetI[ind3] = vet[ind1];
     ind3++;
   }
   ind1++;
 }
 //imprime o vetor e o resultado final
 System.out.printf("VETOR ORIGINAL:");
 ind1 = 0;
 while (ind1 < 50) {
   System.out.printf("\nÍndice: "+ind1+" - Elemento: "+vet[ind1]);
   ind1++;
 }
 System.out.printf("\n\nVETOR PAR:");
 ind1 = 0;
 while (ind1 < ind2) {
   System.out.printf("\nÍndice: "+ind1+" - Elemento: "+vetP[ind1]);
   ind1++;
 }
 System.out.printf("\n\nVETOR ÍMPAR:");
 ind1 = 0;
 while (ind1 < ind3) {
   System.out.printf("\nÍndice: "+ind1+" - Elemento: "+vetI[ind1]);
   ind1++;
 }
 }
}

Ordenando vetor em ordem crescente em Java

Primeiramente começamos inicializando o vetor e imprimindo o vetor original.

Depois chamamos a função bubbleSort e passamos o vetor que inicializamos anteriormente por parâmetro.

A função recebe o vetor e ordena ele em ordem crescente. Logo após é mostrada o vetor ordenado.

Confira no código abaixo.

 
public class BubbleSort {  
  public static void main(String[] args) {  
    int vet[] = {5,90,35,45,150,3};  
    int i;  
    System.out.println("---VETOR INICIAL---");  
    for(i = 0; i < vet.length; i++){  
      System.out.print(vet[i]+" ");  
    }  
    bubbleSort(vet);  
    System.out.println("\n\nAplicando o BUBBLE SORT...\n");  
    System.out.println("---VETOR ORDENADO---");  
    for(i = 0; i < vet.length; i++){  
      System.out.print(vet[i]+" ");  
    }  
  }  
  
public static void bubbleSort(int [] v) {  
  int i, j;  
  int n = v.length;  
  int temp = 0;  
  for(i = 0; i < n; i++){  
    for(j = 1; j < (n - i); j++){  
      if(v [j - 1] > v [j]){  
        temp = v [j - 1];  
        v [j - 1] = v [j];  
        v [j] = temp;  
      }  
    }  
   }  
  }  
 }  

Movendo e deletando arquivos em PHP

Primeiramente vamos deletar um arquivo, é simples e fácil. Basta você informar a função (unlink) e colocar o caminho do arquivo que será excluído.

Veja como fica o código:

 <?php  
 unlink("pasta/arquivo.extensao");  
 ?>  

Agora vamos mover o arquivo para uma outra pasta e excluir ele da pasta de origem, para mover usamos a função (copy).

Veja como fica o código:

 <?php  
 $origem = 'exemplo.txt';  
 $destino = 'pasta/example.txt';  
 copy($origem, $destino);  
 unlink($origem);  
 ?>  

E é isso, simples.

Negrito e Itálico em HTML5 - As tags < strong > e < em >

Neste post de HTML5 vamos aprender, como usar de maneira correta o negrito e itálico em HTML5, em textos, através das tags <strong> e <em>.
Também vamos estudar qual as diferenças destas tags para as tags <b> e <i>.

Negrito em HTML5 - A tag <strong>

O antigo HTML, era mais focado em formatação pura e simples de texto, como faz um editor de textos.
O negrito em HTML5 não quer dizer somente que aquele texto está mais espesso (grosso), quer dizer que ele está em destaque, mais visível e semanticamente forte.
A tag para o uso do negrito é a strong, que em inglês significa (forte).
Assim, a sintaxe para usar o negrito em HTML5 é:

 <strong>Negrito em HTML5</strong>  

Diferença entre <b> e <strong>

Visualmente não muda nada.

 <strong>Negrito em HTML5</strong>  
 <b>Negrito em HTML5</b>  

A tag <strong> serve para dizer ao Google "Hey, esse trecho é importante, quer dizer muito a respeito desta página", ajudando inclusive em termos de SEO.

Assim, quando você quiser enfatizar um texto (a keyword principal que você quer rankear), use a <strong>.

Itálico em HTML5 - A tag <em>

Temos o <i> e o <em>, para lidarmos com textos em itálico.

O nome em vem de emphatic stress, e serve para sinalizar que aquele trecho deve ser lido com uma enfatização maior.

A sintaxe da tag <em> em HTML5 é:

 <em>Itálico em HTML5</em>  

A diferença desta tag <em> para a tag <i>, é que a <i> simplesmente inclina o texto.
Já a tag <em>, tem um significado por trás da formatação do trecho, que é ser lido de maneira mais enfática, com a mudança de língua.