Rodapé fixo na base do site

Olá galera do bem!!

Hoje vou passar um truque que é muito útil em sites em que ocupam apenas a tela do monitor, sem que usem a barra de rolagem: "Um rodapé fixo na base do site."


Já vou falar um inconveniente que deve-se presta atenção:

Não crie botões lincando para uma página na internet ou do próprio projeto, pois irá carregar dentro do rodapé. Pode-se criar botões abrindo popup como explicado nesta postagem



Mãos a obra:

O primeiro passo é se criar uma "página" no Webacappella com a mesma largura usada nas outras páginas. Dê um nome para essa página de rodape por exemplo.

Lembre-se a mesma largura das outras páginas do seu projeto. No caso do exemplo 1024px. e a altura desejada de acordo com o tamanho do rodapé. Caso seu rodapé for ter menos de 100px, não se preocupe, configure com 100px pois o WebAcappella não permite que seja menor do que isso. Mas logo em frente vamos contornar esta situação.

Configure também a cor do fundo que você deseja para seu rodapé definindo a cor do plano de fundo da página.

No caso eu configure a cor laranja no exemplo.

Aproveite e pegue o código da cor, pois vai precisar de utilizar mais pra frente.

Dê um nome para sua página no browser. No caso do exemplo será rodape.html, marque para ignorar a página nos mecanismos de busca.

Agora preste atenção, se seu rodapé for ter a altura menor que 100px, Coloque uma marca na altura que você vai utilizar. Neste exemplo o meu rodapé vai ter 50px de altura. Veja na imagem abaixo como fiz a marcação:

Portanto se meu rodapé terá 50px de altura eu só vou trabalhar na parte superior da linha.

Fiz um exemplo de como editei meu rodapé bem simples para terem uma ideia, veja abaixo:

Agora copiem o código abaixo e cole no head das propriedades da página do seu rodapé.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Balance 2004 - SEJA BEM VINDO !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<body style="overflow-y: hidden;overflow-x: hidden;">

Clique em OK

Agora vamos utilizar o seguinte código para configurar nosso rodapé 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
        #rodape /*rodapé do sistema */
        {

            background-color: códigocor;          
            width:100%;
    text-align: center;
            position:fixed;
            bottom:0px;
            left:0px;
        }
    </style>

<form id="form1" runat="server">
    <div id="rodape">
<html>
     <iframe width='largura' height='altura' frameborder='0' src='urlrodape'></iframe>  
</html>
    </div>
</form>


Você vai alterar somente os trechos de vermelho no código da seguinte maneira:

códigocor : Utilize o mesmo código da cor utilizada para o fundo da sua página definida como rodapé. No case deste exemplo foi #f5621d
largura: Utilize o mesmo valor que usou para largura da sua página rodapé. No caso do exemplo foi 1024

altura: Agora você vai usar o valor que você deseja para altura do rodapé, NÃO é o valor configurado para altura da sua página no caso do seu rodapé for menor que 100px. No caso deste exemplo é 50px.

urlrodape: Substitua pela url da página do seu rodapé (Ex: http://www.seudominio.com.br/rodape.html -> se a página se chamar rodape)


O código do exemplo ficou assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
#rodape /*rodapé do sistema */
{

background-color: #f5621d;
width:100%;
text-align: center;
position:fixed;
bottom:0px;
left:0px;
}
</style>

<form id="form1" runat="server">
<div id="rodape">
<html>
<iframe width='1024px' height='50px' frameborder='0' src='http://www.webacappellashow.com.br/templates/tatuador/rodape.html'></iframe>
</html>
</div>

</form>


Para finalizar na página que você deseja que o rodapé apareça use a opção do Webacappella INSERIR>> CÓDIGO HTML e insira seu código já alterado.

Publique seu site.

** Em caso de páginas em que apresentam barra de rolagem o rodapé se mantém fixo e a página rola por baixo dele.



Clique abaixo para ver um exemplo on line:

Fundo tela inteira sem utilizar plugin, somente códigos

Olá turma do bem,

Essa é hoje é rapidinha, pois é colocar um fundo tela inteira sem necessidade de Plugins. 



CÓDIGO A SER UTILIZADO:

<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->

<!--[if IE 7 ]>    <html class="ie ie7 no-js" lang="en"> <![endif]-->

<!--[if IE 8 ]>    <html class="ie ie8 no-js" lang="en"> <![endif]-->

<!--[if IE 9 ]>    <html class="ie ie9 no-js" lang="en"> <![endif]-->

<!--[if gt IE 9]><!--><html class="no-js" lang="pt"><!--<![endif]-->

<style type="text/css">

#full-screen-background-image {

  z-index: -999;

  min-height: 386px;

  min-width: 100%;

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

}

</style>

  <img  src="IMAGEMDOFUNDO.JPG" id="full-screen-background-image" />

APLICAÇÕES

UTILIZANDO COM FUNDO ÚNICO EM TODO SITE

No WebAcappella vai em SITE>>PROPRIEDADES DO SITE clique na catraca e cole o código acima no campo do head

ALTERE O TRECHO IMAGEMDOFUNDO.JPG pelo nome da sua imagem que deve estar postada no mesmo diretório do site

** Caso deseja um fundo para cada página diferente basta em vez de colocar o código nas propriedades do site,  faça o mesmo inserido o código nas propriedades da página de cada página alterando o trecho IMAGEMDOFUNDO.JPG pelo nome da imagem a ser utilizada para cada página.

Nada de novo, só para alimentar nossa biblioteca mesmo. 

Menu simples com Jq -> Multinível

Olá turma do bem, baum d+ da conta?

Passeando pelos bastidores da internet encontrei um plugin de um menu em jq  (Multinível) para alimentar nossa biblioteca Webacappella on line.

Muito fácil de usar.

Primeiro baixe os arquivos necessários clicando aqui.

Descompacte o arquivo baixado em uma pasta. Para configurar as opções do menu você precisará editar o arquivo index.html. Eu sugerio utilizar o notepad++, para baixá-lo gratuitamente clique aqui


Para configura é muito fácil basta substituir o nome do Menu no arquivo index.html pelo nome desejado e substituir o "#" localizado logo na frente do nome do menu pela url desejada.

Caso você desejar um submenu para alguma opção do menu basta  adicionar  as linhas abaixo logo abaixo da linha da opção desejada:

<ul>
        <li><a href="#">Sub opção 2.1</a></li>
        <li><a href="#">Sub opção 2.2</a></li>
        <li><a href="#">Sub opção 2.3</a> </li>
</ul>

Se  você não quiser um submenu onde existir basta apagar as linhas

Para alterar o tamanho da fonte edite a linha 17
Para alterar a fonte de letra utilizada edite a linha 18


Para um melhor entendimento irei fazer um exemplo bem reduzido.

Terei no exemplo as seguintes opções principais no menu

Home
Sobre
Suporte

O menu suporte terá um outro menu com as seguintes opções

Tickets
Contato


E o menu Tickets terá as seguintes opções

Novo Ticket
Consultar Ticket


Alterei o tamanho da fonte para 14px



Então editando o arquivo index.html ficou assim:

Causando o seguinte resultado

Agora vou inserir os links para cada opção:

Agora no WebAcappella eu crio minhas páginas e nomeio cada uma com seu respectivo nome html.

Exemplo vou criar a página Sobre e no WebAcappella em PÁGINAS/MATRIZES>>PROPRIEDADES DA PÁGINA clico em SEO  e no campo "Nome da sua página no navegador internet" eu coloco sobre

Depois de todas minhas páginas criadas eu vou agora inserir o código no meu site.


Para isto você tem duas opções.

OPÇÃO 1:

No Webacappella vá na opção SITE>>PROPRIEDADE DO SITE clica na catraca insira o código no primeiro campo:

OPÇÃO 2:

Crie uma matriz e nesta matriz pela opção do Webacappella INSERIR>>CÓDIGO HTML insira no campo o código.

Posicione no site onde vai querer o menu
Lembre que todas as páginas tem que utilizar a matriz como fundo



Eu particularmente prefiro a OPÇÃO 2.


Para alterar as cores você edita o arquivo jqsimplemenu.css dentro da pasta CSS

Sendo :
Linha 27: Cor da letra do menu principal
Linha 34: Cor do fundo do menu Selecionado no menu principal
Linha 60: Cor do fundo do menu selecionado no menu principal
Linha 77: Cor do fundo dos sub menus
Linha 88: Cor da letra dos submenus

Com as alterações nas cores que apliquei ficou assim:

Agora você copia as pastas CSS, IMAGES, JS para a sua hospedagem e publique o site.

Prontinho..

Mini Gerenciador de arquivos direto no Site WebAcappella

Olá turma do bem..

Ando bastante ocupado, graças a Deus!! Mas este é o motivo de ter diminuído o fluxo das postagens..

Então a forma que encontrei no momento de continuar postando sem paralisar o blog foi disponibilizar algo em que esteja trabalhando. Não exatamente o que eu esteja, mas adaptando de uma forma a ser útil em vários tipos de projetos.

Um cliente em que trabalha com manutenção de computadores, me pediu uma forma de poder sempre estar postando aplicativos úteis ao seu trabalho no seu site. Onde ele pudesse ao estar em um atendimento a domicílio por exemplo; entrasse em uma área restrita e baixasse certo aplicativo. Nesta área ela gostaria também de poder fazer upload de novos aplicativos e ou arquivos.

Então mãos a obra, hoje vou disponibilizar um mini gerenciador de arquivos para ser usado em um projeto WebAcappella.

Este script foi baixado na internet e eu apenas fiz alguns ajustes para se usar melhor em projetos WebAcappella. Vide licença no final do artigo.


Este script é útil em várias situações, tipo enviar músicas para um player (basta configurar as extenções aceitáveis), uma biblioteca de apostilas .... enfim.. basta usar a criatividade.


Função do script: No script o usuário tem opção de fazer upload de arquivos , quanto visualizar os arquivos hospedados em uma pasta, fazer download e deletar. O script detecta se o arquivo já existe e envia um aviso e não permite sobrescrever. Oferece enviar o arquivo renomeando o mesmo.

Para ver o exemplo on line clique aqui e utilize a senha "senha"


Baixe os arquivos necessários clicando aqui.


Descompacte o arquivo upload.rar , vai criar uma pasta chamada upload. Basta agora postar a pasta no public_html da sua hospedagem.

Para testar acesse o caminho seudominio/upload


Aplicando no WebAcappela

Muito simples. Como a maioria dos programas ADM vamos inserir um frame com o mesmo endereço usado para testes.

No Webacappella utilizando a função INSERIR>>FRAME marque a caixa de verificação "Ativar a pré-visualização" , na caixa abaixo escolha "Link para um endereço na internet" e no campo da url digite o mesmo caminho usado para o teste:

Ajuste as dimensões e posicionamento e pronto.

Lá está seu Mini Gerenciador



Personalização
( Para as personalizações abaixo edite o arquivo upload.css)

Uma referência on line para código de cores html >> http://html-color-codes.info/Codigos-de-Cores-HTML/

Personalizar a cor do fundo fora da área do script:
Linha: 05 (altere o valor da cor)

Largura da área do script (local do mini gerenciador)
Linha: 10 (altere o valor em px)

Cor do fundo da área do script (área ocupada pelo mini gerenciador)
Linha: 12 (altere o valor da acor)


Altura da linha dos títulos ( arquivo | data | tamanho | tipo | deletar )
Linha: 114 (altere o valor em px)


** Citei algumas personalizações mais básicas, mas outras podem ser alteradas no arquivo upload.css se tiver o conhecimento para isso.


IMAGENS

As imagens você pode alterar substituindo os arquivos com a de sua preferência
 (lembre de manter os mesmos nomes dos arquivos)

Os arquivos estão na pasta images

Para a opção  delete substitua o arquivo delete.gif  por uma de sua preferência.
Para a opção de download substitua o arquivo download_arrow.fig  por uma de sua preferência.

ÍCONES

Para as imagens dos ícones, substitua da mesma forma dita acima pela a do ícone desejado dentro da pasta images/icons.

Caso queira incluir alguma não existente a uma extensão determinada, inclua a imagem nesta pasta nomeando ela na seguinte estrutura: extensão.GIF

Exemplo. Se for para uma extensão de um arquivo psd nomeie como psd.gif



Configuração

O arquivo já está configurado de uma forma trabalhar bem em vários tipos de hospedagens. A documentação está em português, mas sugiro não mexer muito se não tiver o nível de conhecimento adequado.

Linhas que poderão ser configuradas sem risco da falha no funcionamento:

Linha 10:  substitua a palavra "arquivos" pelo nome da pasta a qual serão armazenados os arquivos do upload

Linha 12: Nesta linha você determina o tamanho máximo de cada arquivo para upload, tamanho em megabytes e poderá variar de acordo com as limitações do servidor de hospedagem.

Linha 14: Nesta linha você determina qual tipo de arquivo será aceito






Possíveis erros:

• Caso ao postar os arquivos e aparecer ERRO 500

Alguma configuração do servidor não deve suportar o arquivo htaccess. Apague este arquivo

Importante citar:

Este script está licenciada sob uma Licença Creative Commons http://creativecommons.org/licenses/by-nc-sa/3.0/

Ele permite que você usar e modificar o script apenas para fins não comerciais.
Para uso comercial, fazer uma doação justa de, pelo menos, € 10 ou mais, especialmente se você usá-lo em vários domínios ou para um trabalho de contrato.

Nada mais do que justo.


DICA AOS DESENVOLVEDORES DE ADM

Que tal um módulo de um gerenciador de arquivos tipo este hein? Módulo muito utilizado no Wordpress. Fica a dica.