NextGen Gallery com Fancybox

Essa extenção do plugin do WordPress NextGen Gallery permite que você, altere a forma de visualização padrão do [nggallery id=2], onde ele lista todas as imagens para uma interface mais usual.

Ao escolher a imagens que serão listadas.

Ele irá lista as imagens nesta  maneira. 

Ao clicar na imagem, ela será exibida com esse layout.

Com o Fancybox você pode melhorar a exibição de suas imagens.
A visualização  e navegação da sua lista de imagens se torna mais amigável ao usuário.

Para fazer a integração do NextGenGallery com o Fancybox você precisa:

Tenha no seu projeto WordPress os plugins nextgen-galery, e também inclua o pacote do fancybox

Dentro do diretório plugins/nextgen-gallery/view , abra o arquivo gallery.php.
Substitua o foreach do php por esse novo  foreach

<!– Thumbnails –>

<?php foreach ( $images as $image ) : ?>

<!– O rel=”" do link irá conter a informação de qual galeria pertence essa foto –>

<a href=”<?php echo $image->imageURL ?>” title=”<?php echo $image->description ?>” rel=”gallery-<?php echo $gallery->anchor; ?>” class=”molde-photo” >

<?php if ( !$image->hidden ) { ?>

<img title=”<?php echo $image->alttext ?>” alt=”<?php echo $image->alttext ?>” src=”<?php echo $image->thumbnailURL ?>” <?php echo $image->size ?> />

<?php } ?>
</a>

<?php if ( $image->hidden ) continue; ?>
<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?><br style=”clear: both” />
<?php } ?>

<?php endforeach; ?>

No final do arquivo acrescente o código

<script>
jQuery(document).ready(function(){

mostraPhoto(<?php echo ‘”a[rel=gallery-'.$gallery->anchor.']“‘;?>);
});

</script>

Essa função mostraPhoto contém o script para rodar o FancyBox

/**
* FancyBox
* @param obj referencia a imagem da galeria que foi clicada
*/

function mostraPhoto(obj){

jQuery(obj).fancybox({

‘transitionIn’ : ‘none’,

‘transitionOut’ : ‘none’,

‘titlePosition’ : ‘over’,

‘titleFormat’ : function(title, currentArray, currentIndex, currentOpts) {

return ‘<span id=”fancybox-title-over”>Image ‘ + (currentIndex + 1) + ‘ / ‘ + currentArray.length + (title.length ? ‘ &nbsp; ‘ + title : ”) + ‘</span>’;

}

});
}

Lembrando que a extenção do FancyBox deve ser incluidas nas páginas que o javascript será usado

<script type=”text/javascript” src=”<?php echo BASEURL;?>wp-content/plugins/fancybox/jquery.mousewheel-3.0.4.pack.js”></script>

<script type=”text/javascript” src=”<?php echo BASEURL;?>wp-content/plugins/fancybox/jquery.fancybox-1.3.4.pack.js”></script>

<link rel=”stylesheet” type=”text/css” href=”<?php echo BASEURL;?>wp-content/plugins/fancybox/jquery.fancybox-1.3.4.css” media=”screen” />

(Obs: a constante BASEURL se refere a minha URL do site) ;

Link para Download do Código

Shortcodes para WordPress

Aprenda a criar Shortecode no WordPress

Você já chegou a pensar que o CMS WordPress é limitado para desenvolver sites, bem somos 2, e para ampliar os seus horizontes eu resolvi escrever sobre os shortcodes do WordPress.

O shortcode é uma funcionalidade que possibilita você desenvolvedor, criar estruturas de códigos,  e chamando essas estruturas num simples [ macro ]  dentro de um post.

O Código php é inserido no arquivo functions.php, nele você atribui a programação necessária para a estrutura que você quer dar ao seu post.

// Shortcode para inserir no post 
//[listar_posts category="11" limit="5"]
/*
* A Função vai receber os atributos
* no array $atts['category'=>"11", 'limit'=>"5"]
* Esse exemplo ele cria uma lista de post's
* dessa mesma categoria, dentro de outro post ou página
*/
function listar_post_func( $atts ) {
	extract( shortcode_atts( 
            array('category' => '','limit' => ''), $atts ) );
global $post; // pego os dados post ou da página acessada

echo '<ul>';
$args = array( 'numberposts' => $limit, 'category' => $category );
$myposts = get_posts( $args );
foreach( $myposts as $post ) :	setup_postdata($post); 
	echo '<li><a href="'.the_permalink().'">'.the_title().'</a></li>';
 endforeach; 
echo '</ul>';
}
// registrando o shortcode
add_shortcode( 'listar_post', 'listar_post_func' );

No exemplo acima eu mandei escrever o html direto, más poderia ser feito o armazenamento do html  numa variável , depois dando um return  $variavel;
A função add_shortcode () ela é usada para registrar o manipulador do shortcode podendo passar dois parâmetros:

  1. o nome shortcode (o texto usado em um corpo post),
  2. o nome da função manipulador.

A função de manipulador shortcode, no nosso exemplo listar_post_func() deve aceitar 1-3 argumentos:

  • $ Atts , um array associativo de atributos
  • $ Content , o conteúdo fechado (se o shortcode é usado em sua forma delimitador)
  • $ Code , o nome shortcode (somente quando ela corresponde ao nome de callback;)

Um pouco do HTML5 ?

Logo do HTML5

No começo de 2011 a empresa W3C fundadora do HTML lança a logomarca do esperado Html 5, para os desenvolvedores web essa nova estrutura do Html é muito feliz em aplicações que podemos chamar talvez de Web 3.0.

Uma era na qual os códigos semânticos serão estruturados de forma que elevará o nível de acessibilidade dos websites, junto com RDFa, microdados, e microformatos, estão a permitir uma mais útil, Web orientada a dados para ambos os programas e seus usuários.

As Apps HTML5 podem começar mais rápido no seu funcionamento, mesmo se não houver conexão com a Internet, graças ao cache do App, armazenamento local, DB cadastradas, e as APIs do Arquivo.

Localização geográfica, uma funcionalidade muito legal do HTML5 junto com o JS , isso ajudará aplicativos para dispositivos de acesso fora do seu navegador e conectado ao seu computador. Inclui suporte para localizá-lo com base nas informações WiFi usando o Google Location Services.

Na transação entre o Firefox 3.5 e o Google, os dados são trocados, incluindo Access Point Wi-Fi, uma chave de acesso (semelhante a um cookie de 2 semanas ), e IP do usuário o endereço.

WebGL traz gráficos 3D para a web através da introdução de uma API que  está de acordo com o OpenGL ES 2.0, que pode ser usado em HTML5 lona elementos.

“o monstro JS ” – CANVAS

<canvas> elemento (ainda) é parte da especificação do HTML5 , mas o desenho 2D API foi movido em um documento separado (no caso de você ir à procura e não consegue encontrá-lo).

Algumas de suas características:

  • desenho de formas,
  • preenchimento de cores,
  • criação de gradientes e padrões,
  • processamento de texto,
  • cópia das imagens, os quadros de vídeo, e outras telas,
  • manipulação de pixels, e
  • exportar o conteúdo de um <canvas> para um arquivo estático.

Uma Palestra show de bola de Andrew Andrade sobre html 5 que teve na Campus Party 2011

Html5 Campus party 2011

HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage

Os números de 2010

Os duendes das estatísticas do WordPress.com analisaram o desempenho deste blog em 2010 e apresentam-lhe aqui um resumo de alto nível da saúde do seu blog:

Healthy blog!

O Blog-Health-o-Meter™ indica: Minty-Fresh™.

Números apetitosos

Imagem de destaque

A Torre de Pisa tem umas escadas com 296 degraus até ao topo. Este blog foi visitado cerca de 1,100 vezes em 2010. Se cada visita fosse um degrau, já teria subido a Torre de Pisa 4 vezes

 

Em 2010, escreveu 3 novo artigo, aumentando o arquivo total do seu blog para 4 artigos. Fez upload de 25 imagens, ocupando um total de 23mb. Isso equivale a cerca de 2 imagens por mês.

O seu dia mais activo do ano foi 13 de Setembro com 38 visitas. O artigo mais popular desse dia foi hire me!.

De onde vieram?

Os sites que mais tráfego lhe enviaram em 2010 foram twitter.com, mail.live.com, facebook.com, networkedblogs.com e r1rk9np7bpcsfoeekl0khkd2juj27q3o.a.friendconnect.gmodules.com

Alguns visitantes vieram dos motores de busca, sobretudo por layout, heverex, heverson damasceno, limão e menta

Atracções em 2010

Estes são os artigos e páginas mais visitados em 2010.

1

hire me! Julho, 2010

2

Web Sites Setembro, 2010
1 “Like” no WordPress.com,

3

Como ficar em primeiro no Google? Julho, 2010
1 “Like” no WordPress.com,

4

Banner e Logo – CopyFalls Janeiro, 2010

5

Banners Novembro, 2009

By heverson Posted in Sem categoria

Como ficar em primeiro no Google?

Otimização de Sites

Essa é uma pergunta que muitos empresários, que  sonham obter uma conversão de seu produto  através  de buscadores costumam fazer, más a verdade é que esse objetivo exige muita paciência e muito trabalho, poderiamos melhorar essa pergunta para “Como faço para aparecer no google?”, seria o primeiro passo!

O fator posicionamento é um objetivo a ser conquistado, como resultado de um ótimo trabalho de SEO.

Primeiro faça um estudo de palavras relevântes, dentro  do nicho de seu  mercado.
A partir disso, defina seus objetivos e qual vai ser público alvo.

Use ferramentas para análise:
Google Insights
Google Adwords

Ultilize um domínio que tenha a palavra-chave.

Faça uma divulgação da sua página, usando o poder das Mídias Sociais como Twitter, Facebook, Orkut.

torne seu website popular !

social media SEO

Defina as métricas as ser aplicada no web site.

O próprio google disponibiliza um arquivo PDF , mostrando algumas diretrizes básicas a serem seguidas
Guia de Otimização – Google PDF

Ao montar seu website leve em conta o carregamento da página, faça uma boa estruturação das tags HTML/Tableless
o desenvolvimento de um código semântico, facilitará a leitura e identificação das tags pelos crawlers
sigua os padrões de validação da W3C http://www.w3.org/

Exemplo de Otimização perfeita . by  @SEOmoz

Otimização perfeita

CSS/ Javascript

Faça um bom uso dos arquivos CSS e JS, caso o CSS seja apenas para uma página específica o uso interno do CSS facilitará o carregamento, caso o mesmo CSS usado em mais de uma página ultilize em CSS externo.
Dica: use as ferramentas de CSS e JS compress

Crie um Sitemap.xml

Exemplo de um Sitemap em XML (formato Google)

<?xml version=”1.0″ encoding=”UTF-8″?>

<?xml-stylesheet type=”text/xsl” href=”gss.xsl”?>

<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″ xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”

xsi:schemaLocation=”http://www.google.com/schemas/sitemap/0.84 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd”>

<url>

<loc>http://www.homehost.com.br/</loc>

<lastmod>2006-12-06T22:34:03+00:00</lastmod>

<changefreq>daily</changefreq>

<priority>1.00</priority>

</url>

<url>

<loc>http://www.homehost.com.br/suporte.php</loc>

<lastmod>2006-12-06T22:34:05+00:00</lastmod>

<changefreq>monthly</changefreq>

<priority>0.50</priority>

</url>

<url>

<loc>http://www.homehost.com.br/empresa.php</loc>

<lastmod>2006-12-06T22:34:06+00:00</lastmod>

<changefreq>monthly</changefreq>

<priority>0.50</priority>

</url>

</urlset>

Submeta o Sitemap.xml no Google  Webmaster

A criação de um sitemap, ajudará o crawler a indexar suas URLS com mais rapidez.
Um Sitemap é um arquivo que contem uma lista das URLs do seu site. menor espaço de tempo

Monitore o desempenho do site

Instale o Google Anlytics , acompanhe o conjunto de informações que essa ferramenta lhe oferece, o monitoramento facilitará em futuras manutenções e ajustes para a otimização do site.

web analytics

Google analytics