Como inserir descrição nos módulos do Joomla

Imagine um site com diversos módulos, tudo sem identificação, e um leigo ou até uma pessoa com conhecimento, no primeiro momento vai se perder um pouco.

A melhor coisa a se fazer é identificar com uma descrição cada módulo, assim fica fácil pra qualquer administrador.

Neste exemplo colocamos a descrição "Menu principal".

Você pode fazer com todos os módulos deixando bem organizado.

Agora vamos ao trabalho.

Primeiramente Vá em Extensões > Gerenciar módulos; Depois clique para editar o módulo escolhido;

Note que aparece um campo chamado NOTA;

Insira uma pequena descrição neste campo e salve a alteração.

Pronto, simples e muito útil!

Colocar Rodapé fixo no fim da página

Esse é um problema clássico que todos nós desenvolvedores já passamos. Aprenda a criar um rodapé fixo no final do navegador. É uma solução que funciona bem em todos os navegadores.

O PROBLEMA

Como vemos na imagem acima, o rodapé do site seguindo uma estrutura normal de HTML ficaria logo após a div do conteúdo.

A SOLUÇÃO

Como vemos na imagem acima, esse é o resultado final que queremos.

O código HTML

 <div class="tudo">  
   <div class="topo"></div>  
   <div class="conteudo"></div>  
   <div class="rodape"></div>  
 </div>  

O código CSS

html,  
 body {  
   margin:0;  
   padding:0;  
   height:100%;  
 }  
 .tudo {  
   min-height:100%;  
   position:relative;  
 }  
 .topo {  
   background:#ff0;  
   padding:10px;  
 }  
 .conteudo {  
   padding:10px;  
   padding-bottom:60px;  /* Mesma Altura do Rodapé */  
 }  
 .rodape {  
   position:absolute;  
   bottom:0;  
   width:100%;  
   height:60px;  /* Mesma Altura do Rodapé */  
   background:#6cf;  
 }  

Funciona em praticamente todos os browsers (menos em IE 6).

Ativar o cache do Joomla

Uma ótima forma de otimizar seu site em joomla, é ativando o cache do mesmo.

Para ativar o cache do joomla é muito simples, vamos ao passos que se deve fazer.

Primeiramente entre na parte administrativa de seu site e, vá em Configurações Globais -> Sistema e procure por Configurações de Cache, e configure-as como na imagem abaixo.

Agora está quase pronto, basta apenas ativarmos o plugin, veja na imagem abaixo.

O Sistema - Cache vai estar com o x vermelhor, ou seja inativo, basta clicar ali, e ativá-lo.

Pronto, o cache do seu site está ativado.

Como remover index.php da url do Joomla

Um dos principais erros que iniciantes mais cometem no Joomla, é esquecer desse detalhe básico que afeta diretamente o SEO do site. Então, vamos tentar de uma vez por todas, resolver esse problema tão simples que não só diz respeito a SEO, mas a estética do site, pois as vezes essa url é de doer na vista. 
No administrator, vá no menu: Sistema -> Configuração Global
Habilite as opções “URLs Amigáveis” e “Usar mod_rewrite do Apache”, ficando como a imagem abaixo:

Pronto? Só isso? Resolvido o problema? Não!

É justamente isso que a maioria faz, acha que basta habilitar nas configurações e pronto!

Repare na imagem abaixo. 

Esse é o ponto! Para que a “mágica” funcione é preciso que na raiz/pasta do Joomla, você renomeie o htaccess.txt para .htaccess.

Caso não consiga e seu Windows não deixe, basta usar um editor HTML qualquer e renomear por ele.

Utilizando CSS Media Queries

As Media Queries definem condições para que o CSS seja utilizado em cenários específicos. Se essas condições forem aprovadas, ou seja, se o dispositivo de adequar a todas as condições estabelecidas na sua Media Querie, o CSS será aplicado.
Geralmente usamos as Media Queries dentro código CSS, que é bem mais organizado. Você linka seu CSS normalmente no HEAD do seu documento:

<link rel="stylesheet" href="estilo.css">

E dentro do código CSS, você vai separar os famosos **breakpoints**, que são as condições da largura das telas do dispositivos, que definem quando cada bloco de CSS será utilizado. Veja o código abaixo:

/* Código geral, que será herdado por qualquer dispositivos.
   nesse caso, seria o código usado no desktop.   
*/
a {
   color: blue;
  }
 
/* 
 Pra dispositivos que tem uma largura mínima de 768 pixels. Tablets, por exemplo.
*/
@media screen and (min-width: 768px) {
  a {
     color: yellow;
    }
}
 
/* 
 Com uma largura mínima de 992 pixels. Monitores por exemplo.
*/
@media screen and (min-width: 992px) {
  a {
     color: green;
    }
}
 
/* 
 Dispositivos com largura mínima de 1200 pixels. Por exemplo TVs.
*/
@media screen and (min-width: 1200px) {
  a {
     color: black;
    }
}

E assim você vai escrevendo seu CSS e alterando o layout de acordo com dispositivo desejado.

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.

Utilizando CSS Sprite

O que é?

Pra quem não conhece, essa é uma técnica que se baseia em combinar diversas imagens em uma só, com o intuito de diminuir o número de requisições HTTP para o servidor. Com isso, tornando seu projeto mais otimizado, ganhando alguns pontinhos com o google.

Veja esta imagem. 

Para não por uma imagem para cada ícone, colocamos uma imagem com todos os ícones e utilizamos aí o css sprite.

Pimeiramente começamos com o html. Mas ao invés de utilizarmos a tag img, aplicamos uma classe para cada um dos itens.

 <div class="icones">    
       <div class="sprite face"></div>    
       <div class="sprite tt"></div>  
       <div class="sprite youtube"></div>  
       <div class="sprite orkut"></div>  
 </div>  

 Agora vamos para o css, o responsável pela "mágica".

.sprite {  
   background: url('img/icones.png') no-repeat 0 0;  
 }  
 .sprite.face {  
   background-position: 0 0;  
 }  
 .sprite.tt {  
   background-position: -35px 0;  
 }  
 .sprite.youtube {  
   background-position: -70px 0;  
 }  
 .sprite.orkut {  
   background-position: -100px 0;  
 }  

Aí basta apenas você ajustar o background-position de acordo com sua imagem.

Menu Drop Down simples com CSS

Neste post vou mostrar como fazer um simples menu CSS com sub-menus, sem qualquer necessidade de usar JavaScript.

HTML

 <ul class="menu">    
   <li>    
    <a href="#">Home</a>    
   </li>    
   <li><a href="#">Empresa</a>   
    <ul class="sub-menu">    
     <li>    
      <a href="#">Empresa 1</a>    
     </li>    
     <li>    
      <a href="#">Empresa 2</a>    
     </li>    
     <li>    
      <a href="#">Empresa 3</a>    
     </li>    
     <li>    
      <a href="#">Empresa 4</a>    
     </li>    
    </ul>    
   </li>    
   <li><a href="#">Sobre</a>   
   </li>    
   <li><a href="#">Noticias</a>   
    <ul class="sub-menu">    
     <li>    
      <a href="#">Noticias 1</a>    
     </li>    
     <li>    
      <a href="#">Noticias 2</a>    
     </li>    
     <li>    
      <a href="#">Noticias 3</a>    
     </li>    
     <li>    
      <a href="#">Noticias 4</a>    
     </li>    
    </ul>    
   </li>    
   <li>    
    <a href="#">Contato</a>    
   </li>    
  </ul>   

CSS

 ul.menu, ul.menu ul.sub-menu {  
   padding:0;  
   margin: 0;  
 }  
 ul.menu li, ul.menu ul.sub-menu li {  
   list-style-type: none;  
   display: inline-block;  
 }  
 ul.menu li a, ul.menu li ul.sub-menu li a {  
   text-decoration: none;  
   color: #fff;  
   background: #666;  
   padding: 5px;  
   display:inline-block;  
 }  
 ul.menu li {  
   position: relative;  
 }  
 /*sub menu*/  
 ul.menu li ul.sub-menu {  
   display:none;  
   position: absolute;  
   top: 30px;  
   left: 0;  
   width: 100px;  
 }  
 ul.menu li:hover ul.sub-menu {  
   display:block;  
 }  

Por padrão, o sub-menu é escondido usando display: none e mostrado apenas quando o cursor é passado sobre o item da lista principal (:hover).