quarta-feira, 1 de setembro de 2010

Como deixar o menu selecionado - php e codeigniter

Olá, hoje vou mostrar como fazer com que o link da página atual do site fique diferente, ou seja aplicar uma classe CSS para que o usuário perceba que está na página daquele link.

Vamos usar a class URI do Codeigniter.

Essa classe não é necessário ser chamada pelo controller ou pelo autoload, ela é carregada automaticamente.

A principal função a ser usada será $this->uri->segment(n).  Onde "n" corresponde ao número do segmento.

Vou aproveitar e ir mais profundo na questão dos links e vou fazer a função funcionar com sublinks. Vamos Lá:

Uma hierarquia da seguinte forma:

  1. Criação de sites
    1. Dinâmico
    2. Estático
  2. Web Marketing 
    1. SEO
    2. SEM

Primeiramente teríamos que criar 2 controllers, um para criação de sites com o nome "criacao" e para web marketing "webmarketing"

Se não houver parâmetros nas funções ficaria assim:

Controller criacao:

class Criacao extends Controller{

function Criacao()
       {
            parent::Controller();
       }

function Index(){
      $this->load->view("nome_da_view");
      }


function site_dinamico(){
      $this->load->view("nome_da_view");
      }

function site_estatico(){
      $this->load->view("nome_da_view");
      }

}

---------------------------------------------------------------------------

Controller webmarketing:

class Webmarketing extends Controller{

function webmarkting()
       {
            parent::Controller();
       }

function Index(){
      $this->load->view("nome_da_view");
      }


function seo(){
      $this->load->view("nome_da_view");
      }

function sem(){
      $this->load->view("nome_da_view");
      }

}



OK. Depois dos controllers, vamos agora para o menu em HTML, que de preferência seria um include, que é chamado através da página da seguinte forma:

 


Esse arquivo seria "menu.php", vamos para ele com o print em Web Marketing:


Vamos as explicações... Antes de mais nada, foi definida uma variável $sel = ""; no topo do include.
Ela servirá para fazer a verificação das páginas e definir uma class do css nomeada de "select" caso estejamos nela.

Normalmente o $this->uri->segment(1) pega o nome do controller o $this->uri->segment(2) pega o nome da função  e respectivamente os demais números pegarão os argumentos das funções. No nosso caso, sem argumento.

Existe um Link "Web Marketing"  e os sublinks Práticas SEO e SEM. No link a verificação é um pouco mais complexa, pois temos que saber a quantidades de segmentos que existe na URL e consequentemente evitar que o link e sunlinks fiquem selecionados.


O if da linha 82, verifica se o controller é webmarketing e se existe apenas 1 segmento na URL, ou seja o Index do controller. Caso seja o controller e apenas 1 segmento, é aplicado o valor com o nome da class CSS na variável, se não, a variável fica em branco.

Nos sublinks a verificação é mais simples, a condição é apenas no o segmento 2, ou seja, a função, correspondente a página.


Lembrando que nessa estrutura a index.php da URL já foi removida. Caso queria saber como remover veja http://imarlus.blogspot.com/2009/12/como-remover-o-indexphp-da-url-no.html

Qualquer dúvida ou melhora do código... estamos aqui!


 

CMS Sistema de gestão de Conteúdos

Já a algum tempo venho estudando outras maneiras de se criar site. O principal objetivo é ganhar tempo e desenvolver algo de qualidade. Nesses estudos descobrir plataformas bem eficazis e hoje em dia utilizo elas em sites instiucionais ou até mesmo alguns dinâmicos onde os CMS disponibilizavam plugins, como para Imobiliárias, galeria de imagens, entre outros, inclusive e-commerce.

Todo o sistema pode ser gerenciado online, ou seja, de qualquer lugar que possua conexão com a internet. Para manipular os conteúdos como notícias, eventos, imagens, entre outros, não é necessário conhecimento em HTML, linguagem de programação, ou termos técnicos, basta apenas ser familiarizado com os editores de texto comum (Microsoft Word, por exemplo).

Os layouts, conhecidos também como "Templates", podem ser inseridos e alterados com muita facilidade. Porém o ideal é uma customização de cores e padrões de acordo com a marca, ou seja, a identidade visual de sua empresa.

A maioria deles também tem poderosas ferramentas para SEO (search engine optimized), e podem ajudar em muito nas indexções para o Google.

Existem vários CMS muito bons, alguns que se destacam é o wordpress, Joomla e blogger.

Quanto mais estudos sobre o assunto, mais opções temos para desenvolvermos algo.

segunda-feira, 30 de agosto de 2010

SEO - Search Engine Optimization

Olá.

Através de várias leituras na internet sobre SEO (Search Engine Optimization), vou expressar um pouco do que aprendi e o que pratiquei sobre esse termo que está sendo cada vez mais importante para os sites.

Antes de mais nada, SEO significa otimizar o site e suas devidas páginas nos mecanismos de busca, na minha opinião, otimizar o site para o Google. Todos sabemos que exitem outros mecanismos (Yahoo, Bing...), porém na minha opnião, o Google é o principal foco, tanto por qualidade quanto por resultados.

Em breve vou escrever algumas táticas e experiências que obtive com  o SEO.

Grande abraço a todos.

T+.

terça-feira, 24 de agosto de 2010

Guia do usuário codeigniter em português

Olá pessoal.

Sei que é facil encontrar, mas para quem queira ter uma referência, segue o guia do codeigntier traduzido para português.


Sei que ainda existe alguns tópicos em inglês, mas o pessoal está aos poucos concluindo.

T+.

terça-feira, 6 de abril de 2010

Galeria de foto simples com jquery

Hoje vou mostrar como fazer uma galeria de imagens simples com jquery. Basicamente vamos apenas alterar o SRC da imagem e transporlá-la para outra imagem.

Existem várias formas diferentes para trabalhar com o 'SRC' das imagens. Caso esteja chamando as imagens através de um banco de dados, onde existe a imagem original e a miniatura, podemos colocar o caminho da imagem original em um input hidden para que esse input seja enviado para o 'SRC', além de colocar ou no atributo 'title' ou no 'alt' o id da imagem. Caso seja apenas um imagem (sem miniatura) fica ainda mais fácil, pois pegamos o 'SRC' da imagem clicada e enviamos para ser mostrada maior e alimentamos o 'alt' ou 'title' com os valores manuais.

Obs: as linha em laranja serão usadas apenas em caso de miniatura/amplianda, no caso uma imagem maior e outra menor, caso usem a mesma imagem tanto em miniatura quanto a ampliada, desconsiderem essas linhas.

Vamos para o HTML:

<img src='primeira-a-ser-exibida.jpg' id='foto_ampliada'  >

<img src='caminho' class='mini' alt='1' title='1' >
 <input type="hidden" size="1" value="caminho-da-imagem-grande" id="mini1" />
<img src='caminho' class='mini' alt='2' title='2' > 
<input type="hidden" size="1" value="caminho-da-imagem-grande" id="mini2" /> 
<img src='caminho' class='mini' alt='3' title='3' >  
<input type="hidden" size="1" value="caminho-da-imagem-grande" id="mini3" /> 
<img src='caminho' class='mini' alt='4' title='4' > 
<input type="hidden" size="1" value="caminho-da-imagem-grande" id="mini4" />  


Vamos para o Jquery

$(document).ready(function(){
                           $(".mini").click(function(){
                                                   

                                                     var cam = $(this).attr('src');
                                                    

                                                     var id = $(this).attr('alt');
                                                     var cam = $("#mini"+id).val();

                                                     $("#foto_ampliada").attr('src',cam);                                                     
                                                     })
}) // x ready


Após chamar a função ready (padrão), vamos as funções:

A as miniaturas vão conter a classe 'mini' que ao serem clicadas, caso seja através do banco de dados será pego o valor do atributo 'alt' e através dele vamos pegar o valor do input hidden.

Simples não?

Através desse princípio podemos ir mais fundo nessa função.


Podemos colocar um preload em jquery para que enquanto o 'SRC' é alterado informar algo para o usuário.

Grande Abraço!

quarta-feira, 24 de março de 2010

Validação simples de formulário com Jquery utilizando classes do CSS

Olá pessoal.

Confesso que uma das piores etápas que considero para fazer formulário é a validação. Após alguns estudos desenvolvi uma maneira bem simples de evitar que os campos não sejão enviados em branco.

Vou mostrar um maneira bem simples de validar (fazer com que os campos não sejam enviados em branco) formulário em jquery.

Vamos começar pelo formulário:











Reparem que coloquei um id na tag form, isso para aproveitá-lo atrevés do jquery.
Nos campos que serão obrigatórios é necessário definir o atributo 'title', que será usado no alert caso o campo esteja em branco e a class 'val', na qual o jquery irá varrer para a validação.

Vamos agora analisar o arquivo js:


Depois das funções básica do ready, vamos usar o id configurado no formulário para após submeter o formulário ele fazer as verificações.
Na linha 6 defino a variável que irá contar quantas classes 'val' existem no formulário. Através dela crio um laço 'for' para varrer uma por uma.
Na linha 9 a variável 'len' é responsável por verificar a quantidade de caracteres no input. para quem não conhece a função eq() do jquery, é como se os elementos definidos por ela se tornacem um array. Por exemplo: dentro de uma div(class='prg') existem duas tags P. Para selecionar a primeira tag utilizamos

$(".prg p").eq(1).html(); // esse exemplo pegaria o html dentro da 1º tag p da class prg;

Na linha 10, como citei, é reponsável por pegar o title do input para mostrar no alert caso esteja em branco.
Após a verificação através do if e ocorrer tudo certo, o formulário é enviado.

Espero que ajude no corre-corre do dia-dia.

;D

terça-feira, 23 de março de 2010

PHP - Enviar email de 'indique a um amigo' no formato HTML. com jquery e Codeigniter

Olá pessoal!
Hoje vou mostrar como se enviar um email em php (codeigniter) no formato de HTML. Vou utilizar o exemplo de um formulário de indicar um artigo para um amigo. Já que não vejo necessidade de abrir uma nova página, vou utilizar o jquery para enviar via post sem dar um refresh na página.

No decorrer da explicação haverá alguns detalhes importantes para ser usados em outras ocasiões.

Vamos começar pela VIEW:




O action do formulário na verdade não vai ser utilizado, pois o envio será feito via jquery, porém, o caminho especificado nele é o que será usado no método $.post().

Repare que existem 2 inputs hidden. Eles serão responsáveis por preencher tanto o link quanto o título do artigo, que por sua vez será enviado para o email do convidado.

Um detelhezinho que sempre utilizo em sistemas de notícias e artigos, além de inserir o título do artigo na URL, que por sua vez  ajuda muito no SEO eu removo os espaços e alguns caracteres não recomendados. Essa prática está localizada no input hidden com id ="lk". Utilizo o ereg_replace para tal função. Nesse caso removi apenas os espaços em branco e interrogações, trocando pelo hífen (-). Como citei em outro artigo URL dinâmicas.



O CONTROLLER é bem simples, apenas irá puchar a função do MODEL.








 O MODEL será responsável em pegar os POSTS, criar e enviar o email para o amigo: artigos_model.php








Nas primeiras linhas vamos pegar os posts, em seguida vamos chamar a library email do codeigniter. Criamos uma variável para guardar o conteúdo do email, consequentemente trabalhando junto com os posts. Na criação dessa variável podemos utilizar as tags de HTML comuns, ou seja, as que os servidores de email suportam. Não é recomendado usar tags de formulário, iframe, entre outras.
Em relação ao CSS, é recomendado usar o método inline, tanto criando classes antes do head quanto usando os styles nas próprisa Tags. Já tentei chamar alguns CSSs na tag link mas não deram certo.


A linha $config['mailtype'] = 'html' é fundamental para que tudo funcione corretamente. Caso os emails não sejam enviados, altere a linha $config['mailpath'] para 'mail'.


 Como se deve imaginar as funções de email já dizem tudo:
->from = Email do remetente
->to = Email de quem vai receber
->subject = Assunto do email
-> message = Utilizamos a variável que guardarmos o conteúdo do email.

no final do código existe uma linha com comentário. Ela poderá ser usada caso queiram dar um feedback do envio. Nesse caso iríamos alterar a função $.post para $().get. Isso será visto Agora:

JQUERY

vamos criar um arquivo para configurar o envio do formulário. Vou chamá-lo de artigos.js




Lembrando que temos que puchar a função definindo um ID para o formulário (view). A partir dele chamamos a função submit(); Fazemos uma pequena validação (em breve vou postar um modo bem simples de validar com classes) dos campos para não irem em branco. Depois utilizamos a função $.post e utilizo um callback para enviar um alert que foi enviado.

Lembrando que na view onde está o formulário o arquivo jquery tem que ser chamado, e antes do artigos.js.
Não informei o nome do controller, pois vai depender de cada um a definição.

Qualquer dúvida é só mandar. Vamos evoluir juntos.