Category: Dicas Web

Dicas Web

Criando uma aplicação do zero com PHP+OO(DRY)+PDO+AJAX…

Jonas 2 Comments

Material excelente em forma de série que mostra todo o desenvolvimento de uma Aplicação Web, desde a idéia no papel até a implementação final, utilizando conceitos, técnicas e ferramentas modernas, como:

  • Linguagem: PHP
  • Programação Orientada a Objeto, com o conceito de programação DRY em mente (“Don’t Repeat Yourself”).
  • Implementação de segurança do lado do cliente e do servidor
  • Utilização de PHP Data Objects (PDO), como forma de garantir a segurança do Banco de Dados.
  • Uso de strip_tags (), para evitar que o usuário armazene dados maliciosos no Banco de Dados.
  • Compactação de bibliotecas JavaScripts, para carregamento mais rápido da aplicação.
  • e muito mais…

Com certeza um material que deve ser analisado por todos.

Navegação nos tópicos da série:

Link oficial: WebAppFromScratch
Outro legal: http://www.phpro.org/tutorials/Creating-A-PHP-Application.html

Comparação de CMS: WordPress, Joomla, Drupal e Plone

Jonas 2 Comments

A Idealware publicou um relatório de 60 páginas onde compara 4 sistemas de gerência de conteúdo opensource: Joomla, Plone, Drupal e WordPress.

Entre os itens avaliados estão:

  • facilidade de hospedagem e instalação;
  • facilidade de configuração para um site simples;
  • curva de aprendizado para construção de um site mais complexo;
  • facilidade de administração;
  • flexibilidade gráfica e estrutural;
  • roles e workflow;
  • funcionalidades de web 2.0 e criação de comunidades no software;
  • extensão e integração com outras ferramentas;
  • escalabilidade e segurança;
  • manutação e força da comunidade/suporte.

Download do documento:

Howto: Criando uma metodologia de publicação de popup com WordPress

Jonas 6 Comments

Olá pessoal, hoje iremos mostrar como fazer um sistema de publicação de banners em popups utilizando o WordPress, mas sem o uso de plugins.

É sei que muita gente odeia popup, e eu sou uma dessas pessoas, porém ao trabalhar para clientes que exigem a utilização desse recurso, torna-se necessário implementar no site.

Antigamente era comum a utilização da técnica de abrir uma janela via Javascript, porém os browsers já a algum tempo possuem mecanismos para bloquear esse tipo de publicidade.

O que se tem usado muito é a utilização de DIV´s, muito comum em sites de comércio eletrônico (aquelas janelinhas com propaganda, que obriga você clicar no fechar).

Vamos ao passo-a-passo, utilizando o WordPress:

1. Crie uma categoria no seu wp-admin, com o nome de popup.

2. Insira um post que será seu popup, faça a inserção da sua imagem normalmente no post, e crie dois campos personalizados logo abaixo do editor, com os nomes de Largura e Altura, e coloque o tamanho em pixel do seu popup.

3. Na sua header.php, você irá acrescentar um javascript, que irá fazer o popup ser fechado.

[js]

[/js]

4. Em sua home.php ou na sua index.php (depende de seu tema), você irá criar o seguinte trecho de código, logo no início, após o get_header():

[php]
< ? $popup=new WP_Query(); $popup->query(‘showposts=1&cat=5’);
while($popup->have_posts()):$popup->the_post();
?>
[/php]

[css]

[/css]

[php]

 

< ?php the_content()?>

< ?php endwhile;?>

[/php]

Explicando: no inicío deste código, criamos um laço do WordPress onde irá mostrar sempre o ultimo post da categoria popup (id=5).

No CSS, criamos uma DIV e configuramos que a sua largura e altura serão os informados no post, nos campos personalizados.

A classe dtopo, é a apenas para colocar um botão de fechar. Os demais são auto-explicativos.

6. Com isso, o laço irá exibir sempre o post publicado, caso não queira mais o popup, basta ir no wp-admin e despublicar o post, simples assim.

Rastreio

Jonas 1 Comment

Se você faz compras pela internet, tanto nacional como internacional, com certeza deve utilizar o serviço de rastreio de encomendas dos correios, porém indico dois sites que ajudam a monitorar seus pacotes transportados pelos Correios de forma bem mais completa, com notificação por email, feed RSS, twitter…. mostra até o caminho que seu pacote esta percorrendo utilizando o google maps, simplesmente perfeito.

  1. http://www.encontreseupacote.com.br
  2. http://www.muambator.com.br/

Howto: WordPress – Como retornar somente posts com a data de publicação igual a data atual?

Jonas Leave a comment

Veja o seguinte problema:

“Você cadastra vários posts, com data de publicação futuras, e quer exbir em uma página somente os posts cuja data de publicação seja igual a data atual (do Sistema Operacional).”

É bem simples, basta utilizar essa sintaxe em seu wp_query:

[php]
$hoje = getdate();
query_posts(‘year=’ .$hoje[year] .’monthnum=’ .$hoje[mon] .’day=’ .$hoje[mday] );
[/php]

em um loop, ficaria assim:

[php]
< ?php $hoje = getdate(); $dhoje = new WP_Query(); $dhoje->query(‘year=’.$hoje[year].’&monthnum=’.$hoje[mon].’&day=’.$hoje[mday].’&showposts=1&cat=12′ );
while($dhoje->have_posts()) : $dhoje->the_post();
global $more;
$more = 0;
?>

< ?php the_title(); ?>

< ?php the_content(); ?>

< ?php endwhile; ?>
[/php]

De boa né?

Howto: WordPress: Agrupando posts por mês

Jonas 1 Comment

Veja como fazer para puxar todos os posts de uma determinada categoria, exibindo em listas agrupadas por meses, assim:

Julho 2010

  • Titulo do post
  • Titulo do post

Junho 2010

  • Titulo do post
  • Titulo do post

Vejamos:

[sourcecode language=”php”]
< ?php $args=array( 'tag' => ‘tag1’,
‘posts_per_page’ => -1,
‘post_status’ => ‘publish’,
‘orderby’ => ‘date’,
‘order’ => ‘DESC’,
‘caller_get_posts’ =>1
);

$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
$ymdate = ”;
while ($my_query->have_posts()) : $my_query->the_post();
$ympost = mysql2date(“M Y”, $post->post_date);
if ( $ympost != $ymdate) {
$ymdate = $ympost;
echo ‘

Artigos do mes: ‘ . $ymdate . ‘

‘;
}
?>

< ?php the_time('F jS, Y') ?>


[/sourcecode]

[sourcecode language=”css”]

[/sourcecode]

[sourcecode language=”php”]

< ?php $args=array( 'cat' => ’12’,
‘posts_per_page’ => -1,
‘post_status’ => ‘publish’,
‘orderby’ => ‘date’,
‘order’ => ‘ASC’,
‘caller_get_posts’ =>1
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
$ymdate = ”;
while ($my_query->have_posts()) : $my_query->the_post();
$ympost = mysql2date(“F Y”, $post->post_date);
if ( $ympost != $ymdate) {
$ymdate = $ympost;
echo ‘

‘.$ymdate.’

‘;
echo ‘

‘;
} wp_reset_query();
?>
[/sourcecode]

Perfeito!!!

Como criar interatividade com Jquery sem saber nada de JavaScript?

Jonas 3 Comments

IxEdit é um framework que gera automaticamente o código JavaScript a partir dos parâmetros que especificou diretamente no browser, on-the-fly….  O código JavaScript gerado é projetado para executar com jQuery e jQuery UI, e apresenta interações poderosíssimas, sem a necessidade de se preocupar com as diferenças entre navegadores.

Qualquer pessoa com conhecimento básico de HTML e CSS pode criar interações em interfaces apenas marcando os elementos e selecionando as ações desejadas, no final é gerado que deve ser inserido diretamente no HEAD da página, veja o vídeo abaixo e entenda o que o IxEdit é capaz de fazer:

[youtube]http://www.youtube.com/watch?v=CcjZnwpBLBU[/youtube]

Integrando o SlideShowPro ao WordPress

Jonas Leave a comment

Sei que muitos irão falar que não faz sentido usar o Slideshow Pro, por ele ser um produto pago, e gerar Feature Content em Flash, e também devido ao fato de existir inúmeras outras alternativas, tanto em Jquery como em MooTools e blá, blá, blá….

Porém, eu já utilizo o SlidShow Pro a um bom tempo, e o acho muito simples e de fácil manipulação, a grande chatice era ter que editar manualmente um arquivo XML com as informações dos imagens e URL de feature. Pois bem, este howto, irá explicar como você pode integrar ele ao WordPress, de forma que cada usuário possa inserir as imagens diretamente no post, semelhante ao conhecido Featured Content Gallery. Existe um produto comercial com essa mesma idéia, só que em forma de plugin, o  SlidePress. Vamos lá…

( 1 ) Consiga uma versão paga ou “alternativa” dos arquivos:
slideshow.fla, slideshow.html e slideshow.swf
obs: você irá precisar do Adobe Flash CS4 ou maior para editar o slideshow.fla

( 2 ) Abrindo o slideshow.fla, em seu Adobe Flash, você verá uma imagem que você terá que editar e deixar do tamanho que deseja carregar em seu projeto, no exemplo anexo a este post, o SWF será exportado no tamanho de 470×215. Então, assumindo que você tenha o mínimo de conhecimento de Flash, é só editar na aba Position and Size.

( 3 ) Ainda no Flash, você clicando no Scene 1, irá surgir a aba Component Parameters, o qual possui diversos parâmetros que podem ser configurados, porém o mais importante é a penúltima opção, XML File Path, onde é informado o nome do arquivo XML que irá ser carregado, pode deixar como esta. Essa versão não permite que seja inserido um XML remoto, como uma URL. Ao terminar de editar os parâmetros, basta dar um publish, para gerar um novo slideshow.swf, e coloque ele diretamente na pasta de seu tema (wp-content/themes/seutema).

( 4 ) No WordPress você pode criar uma categoria que irá receber todos os posts de destaque, que irá utilizar o slideshow. Faça também uma alteração, na aba Configurações/Diversas, na opção: Armazenar arquivos enviados nesta pasta, pode-se deixar a padrão: wp-content/uploads e desmaque o checkbox Organizar arquivos enviados em pastas baseadas no mês e ano.

( 5 ) Crie diretamente em seu tema uma página com template personalizado, através da tag, Template Name, com o seguinte código:

[php]
< ?php /* Template Name: Destaque */ /* header('Content-Type: text/xml'); header('Cache-Control: no-store'); echo '‘;
echo ‘

‘;

query_posts(‘cat=3’);
if ( have_posts() ) : while ( have_posts() ) : the_post();

echo ‘\r\n”;
$xml .= “\r\n”;
$xml .= “\r\n”;

query_posts(‘cat=3’);
if( have_posts() ) : while( have_posts() ) : the_post();
$xml .= “ID, ‘destaque’, true).”\” link=\”” .get_permalink(). “\” target=\”_self\”/>\r\n”;
endwhile; endif;
$xml .= “\r\n”;
$xml .= “\r\n”;
$file= fopen(“$path”, “w+”);
fwrite($file, $xml);
fclose($file);
?>
[/php]

Com o mínimo de conhecimento, você pode notar que este código é responsável por gerar um XML com os posts da categoria 3, que no caso é o ID da categoria que criei no WordPress, e que irá receber todos os posts destacados.

O primeiro bloco comentado, é para visualizar o XML na tela, que não é nosso objetivo, mas sim gravar diretamente na pasta do nosso tema ($path) um arquivo chamado output.xml, que é o mesmo nome que você viu na edição do slideshow.fla.

Não perca o ID dessa página, você irá precisa dele adiante.

( 6 ) Instale o plugin kimili que auxiliará na hora de postar o SWF diretamente na página ou post desejado. O uso deste plugin é opcional, pois você pode inserir o slideshow.swf diretamente em uma página personalizada.

( 7 ) Adicione alguns posts, dentro da categoria criada (Destaque). Insira a imagem no post, através da opção Upload/Insert (add image) :

Após inserir sua imagem (para o tamanho do .fla configurado acima, é de 477×215), você verá essa tela:

Copie o nome do arquivo inserido, no caso acima: 1.jpg e pode fechar essa janela de upload de imagem.

Nos campos personalizados, logo abaixo da edição dos posts, cole o nome do arquivo, no campo valor, e adicione como nome destaque:

( 8 ) Com o plugin kimili ativado, crie um novo post ou uma nova página que irá exibir o slideshow, e adicione o seguinte trecho de código:

Claro, trocando o id da página do iframe e a URL do slideshow.swf, para o seu caso.

Pronto, com isso você pode exibir essa página que irá mostrar o slideshow de acordo com os posts inseridos.

OBS, a pasta de seu tema, tem que ter privilégio de escrita.

http://www.featuredcontentgallery.com/

Exemplo do SlideShow funcionando: http://www.tjac.jus.br