Frase interessante

O sucesso é uma consequência e não um objetivo.
Gustave Flaubert

Pdf.js: formato PDF implementado com javascript e html5

Projeto Pdf.js é mantido pela Mozzila labs e tem o objetivo de criar uma forma de visualizar o PDF direto do browser sem necessitar de plugins como adobe reader ou foxit pdf, é um projeto que está sendo muito visado pelas comunidades, e utiliza como base javascript e html5.

wiki do projeto:  https://wiki.mozilla.org/PDF.js

Mozzila Labs: http://mozillalabs.com/blog/2011/09/mozilla-labs-is-stepping-out-introducing-pdf-js-more-new-projects/

Tutorial Custom post types e custom taxonomy wordpress

Apresentação e tutorial muito útil para quem está procurando informações e aprendizado sobre custom post type e custom taxonomy do wordpress.
O Que são Custom post type?
Posts Personalizados do wordpress, por padrão o wordpress cria para inserção de conteúdo, posts e páginas, utilizando custom post type você pode deixar o wordpress com mais cara de gestor de conteúdo criando por exemplo uma sessão livros para uma biblioteca, ou produtos para um e-commerce…

Custom taxonomy são categorias personalizadas, supondo que você tenha criado  uma sessão em custom post type de produtos poderia criar uma categoria que iria reger as marcas… tudo muito simples…
esse tutorial ilustra mais facilmente o que quero dizer…

Como Utilizar os Códigos HTML e CSS do Rodapé Fixo

Como utilizar o Código do Rodapé Fixo

Existem muitos métodos de rodapés fixos encontrados no Google. Eu experimentei muitos deles e geralmente eles falham em algum ponto. O problema parece ser que alguns destes métodos são antigos e funcionavam em navegadores antigos, mas não nos novos. Pelo fato destas páginas serem antigas e ligadas ao passado, ainda são bem posicionadas no Google. Muitos webmasters procuram por uma solução de rodapé fixo e acabam coçando a cabeça enquanto tentam estes mesmos métodos antigos porque eles são os primeiros da lista na busca.

A solução do Ryan Fait’s é bem conhecida, e ainda funciona, mas requer uma <div> extra sem conteúdo, para dar um “empurrãozinho”. Alguns puristas em HTML podem achar isso uma blasfêmia (usar código não-semântico). Nossa solução evita a <div> extra.

A Solução de Rodapé Fixo apresentada aqui é baseada na informação encontrada no artigo Exploring Footers, da A List Apart assim como uma expansão do trabalho de Cameron Adams e este texto em lwis.net.

Numa versão anterior era aplicado um hack de clear fix para manter o rodapé embaixo no Google Chrome e outros navegadores onde ele ficaria flutuando quando a janela fosse redimensionada. Ao invés disso, depois de algum feedback, esta versão atualizada simplesmente usa overflow:auto, como sugerido por Joel Pittet, para fazer o mesmo trabalho. Paul O’Brian sugeriu a adição do display:table para IE8, assim como o artigo dele aqui tem uma boa sugestão de um conserto para Opera que também usamos aqui. Foi testado em amis de 50 navegadores e parece funcionar perfeitamente.

O Código HTML

Abaixo está uma estrutura básica do código HTML. Note como o <div> do rodapé está fora do <div> wrap.

<div id="wrap">

	<div id="main">

	</div>

</div>

<div id="footer">

</div>

Você coloca os elementos de conteúdo dentro do <div> main. Por exemplo, se estiver usando um layout de 2 colunas flutuantes (float) você terá isto;

<div id="wrap">

	<div id="main">

		<div id="content">

		</div>

		<div id="side">

		</div>

	</div>

</div>

<div id="footer">

</div>

Um cabeçalho pode ser inserido dentro do wrap, mas acima do main, assim;

<div id="wrap">

	<div id="header">

	</div>

	<div id="main">

	</div>

</div>

<div id="footer">

</div>

Se você quiser colocar qualquer elemento fora do wrap ou do footer, então você precisará usar posicionamento absoluto (position: absolute) caso contrário vai bagunçar o cálculo de 100% de altura.

O Código CSS

Abaixo está o código CSS que faz o seu rodapé de fato ficar no pé da página.

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {overflow:auto;
	padding-bottom: 150px;}  /* deve ter a mesma altura do rodapé */

#footer {position: relative;
	margin-top: -150px; /* valor negativo da altura do rodapé */
	height: 150px;
	clear:both;} 

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}

E a sua página html vai precisar desta condicional, direcionada ao IE8;

<!--[if  IE 8]>
	<style type="text/css">
		#wrap {display:table;}
	</style>
<![endif]-->

Note que a altura do rodapé é usada três veses. Isto é importante e deve ter o mesmo valor nas três instâncias. As propriedades de altura esticam a <div> wrap para a altura total da janela. A margem negativa do rodapé traz ele para o padding criado na <div> main. Uma vez que o main está dentro do wrap, a altura de padding faz parte dos 100%. ASsim o rodapé fica no pé da página.

O comentário condicional é necessário para permitir que o IE8 se expanda além da altura de 100%. O outro hack, é para o Opera.

Clearfix Hack Desnecessário!

Muitos designers CSS estão familizarizados com o Hack Clearfix, Ele soluciona uma série de problemas com elementos flutuantes (float). Uma versão anterior desta Solução de Rodapé Fixo a usava. Mas ao invés disso, uma solução de código mais moderna e fácil é a regra de overflow. Nós aplicamos ela à <div> main para ajudar o rodapé a ficar fixo no Chrome. Também resolve questões que aparecem quando se usa um layout em colunas, flutuando o conteúdo para um lado e a barra lateral para o outro. O Conteúdo de elementos flutuantes dentro da <div> main pode fazer com que o rodapé se desprenda em alguns navegadores.

Notas

Heights e Margins

Usar margens de top e bottom dentro de alguns elementos podem empurrar o seu rodapé para além da altura de margem, talvez num cabeçalho ou na wrap ou main. Ao invés, use padding para criar espaço dentro do elemento. Você vai notar que isto está acontecendo se a sua página tiver pouco conteúdo, então o rodapé estará no pé da página mas você terá uma barra de rolagem lateral, indicando que ele está abaixo da altura da janela. Encontre as margens de top ou bottom ofensivas e as altere para padding.

Tenha cuidado ao declarar padding na <div> main em outra parte do seu arquivo CSS. Se você quiser adicionar algo assim: padding:0 10px 0 10px; você acabará sobreescrevendo o padding de baixo, que precisa ter a mesma altura do seu rodapé. Isso vai fazer com que o seu rodapé fique por cima do seu conteúdo nas páginas mais longas (no Google Chrome).

Cuidado se você estiver usando bordas no seu rodapé. Se você adicionar uma borda de 1px no seu rodapé de 200px, use 201px como o valor de margem negativa no #footer e 201px como o seu padding de baixo no main para compensar este 1 pixel extra.

Tamanhos de Fontes

Quando definir tamanhos de fontes no seu CSS, se estiver usando tamanhos relativos fique atento que alguns usuários podem ter as suas definições de monitor para fontes maiores. Em alguns elementos, como o rodapé, isso pode quebrar a altura e criar um vazio abaixo do rodapé, caso exista espaço suficiente para o texto se expandir para baixo. Então procure usar tamanhos absolutos, com px ou em. Ou deixe bastante espaço de expansão previstos no seu rodapé.

fonte: Como Utiliar os Códigos HTML e CSS do Rodapé Fixo.

DataTables – estrutura ajax para tabelas utilizando jquery

DataTables é um plugin jquery com o intuito de facilitar e otimizar a criação de tables, ordenação dinâmica, paginação, busca, geração de pdf e csv… entre outras características.

é uma ferramenta muito interessante para quem busca algo assim

Acesse http://datatables.net/usage/ e veja mais informações.

Outra ferramenta bastante interessante que tem praticamente os mesmos recursos mais mas simples é o tablesorter.
também conta com ordenação dinâmica, paginação entre outras características; vale a pena dar uma estudada.

http://tablesorter.com/docs/index.html#Examples

Meio Mask um plugin Jquery leve e funcional

Meiomask é um plugin Jquery desenvolvido pela equipe Meio Código é leve, fácil de usar e totalmente funcional.



(function($){
// call setMask function on the document.ready event
$(function(){
$('input:text').setMask();
}
);
})(jQuery);

Tem várias máscaras pré-determinadas e você ainda pode personalizar como achar melhor

$.mask.masks : {
'phone' : { mask : '(99) 9999-9999' },
'phone-us' : { mask : '(999) 9999-9999' },
'cpf' : { mask : '999.999.999-99' },
'cnpj' : { mask : '99.999.999/9999-99' },
'date' : { mask : '39/19/9999' }, //uk date
'date-us' : { mask : '19/39/9999' },
'cep' : { mask : '99999-999' },
'time' : { mask : '29:69' },
'cc' : { mask : '9999 9999 9999 9999' }, //credit card mask
'integer' : { mask : '999.999.999.999', type : 'reverse' },
'decimal' : { mask : '99,999.999.999.999', type : 'reverse', defaultValue: '000' },
'decimal-us' : { mask : '99.999,999,999,999', type : 'reverse', defaultValue: '000' },
'signed-decimal' : { mask : '99,999.999.999.999', type : 'reverse', defaultValue : '+000' },
'signed-decimal-us' : { mask : '99,999.999.999.999', type : 'reverse', defaultValue : '+000' }
}

Download meioMask 1.1.3

Download meioMask compressed 1.1.3 (YUI Compressor)

Demo

Licença e mais Informações

Novidade: Agora é possível casar sem um padre, lançamento de máquina de casamento…

Esqueça os longos votos, as cerimônias cansativas e até mesmo o padre. Com a máquina automática de casamento AutoWed, nada disso será necessário.

A máquina, desenvolvida pela Concept Shed, exige apenas que os noivos digitem seus nomes em um teclado e, a seguir, acompanhem as instruções para, em questão de minutos, estarem casados. As alianças são por conta da máquina, que também emite um certificado comprovando o matrimônio.

O vídeo abaixo, em inglês, mostra como é uma cerimônia realizada pelo AutoWed.

fonte: Olhar Digital / video: Vimeo

Google lança +1 globalmente

Uso da internet no Brasil cresce 15% em 2010

Google Lança GOOGLE+ para competir com Facebook

Apresentação Projeto Google +

Link para a rede Social

Apresentando o Projeto Google+:

O compartilhamento da vida real na perspectiva da web

A necessidade de se conectar com os outros é um dos instintos mais básicos dos seres humanos. Com um sorriso, uma risada ou com um aceno nos conectamos com os outros todos os dias.

Hoje, cada vez mais, as conexões entre as pessoas acontecem on-line. Apesar disso, as nuances e a essência das interações do mundo real são perdidos na rigidez das nossas ferramentas on-line.

Desta forma básica e humana, o compartilhamento on-line é inadequado. Ou até mesmo quebrado. E queremos consertá-lo.

Gostaríamos de trazer as nuances e a riqueza do compartilhamento da vida real para o software. Queremos incluir você, seus relacionamentos e seus interesses, e fazer o Google melhor. E assim começa o Projeto Google+:

Agora precisamos dar tempo ao tempo para ver se vai vingar como Gmail, Docs… ou se vai ser um fracasso como o Buzz…