Busca por voz no site

busca por voz 300x219 Busca por voz no site

busca por voz

 

Voce já deve ter visto alguns sites, principalmente versões mobile, utilizando a busca por voz no site para facilitar a usabilidade.

O conceito é bem facil de entender, basta voce adicionar um parametro x-webkit-speech no seu input e já estará apto a utilizar este recurso.

 

Exemplo:

Onde era:

 input type="text" name="busca"

Incluindo o x-webkit-speech ficará assim:
 
input type="text" name="busca" x-webkit-speech="x-webkit-speech"
 

E pronto, aparecerá um box, aguardando o texto, ao terminar de falar a frase, ela automaticamente irá aparecer no box.

Vale lembrar que é para webkit e não testei em todos os browsers.

Outro detalhe que percebi é que a busca é baseada na linguagem do site, portugues, ingles, etc.. neste exemplo aqui, deixei sem especificar o idioma do blog e ele adotou ingles, no www.ecamisetas.com.br que especifica o portugues como idioma, ele adota termos em portugues.

facebook Busca por voz no site twitter Busca por voz no site email Busca por voz no site

Google Tag Manager Data Layer e-Commerce Tag

Google Tag Manager Data Layer para sites de Comércio Eletrônico

Google Tag Manager 300x261 Google Tag Manager Data Layer e Commerce Tag

Google Tag Manager

O Google Tag Manager é um serviço do Google que tem como principal objetivo unificar em uma única interface todas as tags que você precisa publicar em seu site sem a necessidade de mexer no código fonte. Aqui irei falar sobre o Google Tag Manager data layer, para ajudar na configuração de um site de comércio eletrônico.

Saiba mais em https://www.google.com/tagmanager

Você só precisa fazer a chamada ao script e depois isso, pilota tudo pela interface. É possível inserir tags de AdWords, Remarketing, Analytics dentre outras infinitas opções.

Comércio Eletrônico

Para configurar as tags de e-commerce do Google Analytics com o Google Tag Manager é bem simples.

Você só precisa popular o dataLayer na tela de parabéns do seu e-commerce com os seguintes dados:

 

Configurando o data layer

Primeiro vamos popular uma variável com todos os produtos contidos no pedido:

Exemplo:

gtm_products = [];
gtm_products.push({ ‘name’: ‘Produto’, ‘sku’: ‘SKU123′, ‘category’: ‘Grupo’, ‘price’: 35.99, ‘quantity’: 10 });

 

Após isso, vamos popular o dataLayer com os dados da transação e incluir os dados do pedido e dos produtos.

dataLayer = [{

'pageType': 'Parabens',

'visitorID': '45545',

'visitorLoginState': '',

'visitorType': '',

'visitorCountry': 'BR',

'visitorState': 'SP',

'visitorCity': 'São Paulo',

'visitorSource': '',

'visitorCampaign': '',

'productId': 'produto1',

'productName': 'Teste',

'productSKU': 'SKU123',

'productCategory': 'teste',

'productSalePrice': '39.44',

'productPrice': '39.44',

'transactionId': '42354543543543teste',

'transactionDate': '30-07-2013',

'transactionType': '',

'transactionAffiliation': 'Loja',

'transactionCurrency': '',

'transactionTotal': '39,44',

'transactionDiscount': '',

'transactionInstallments': '',

'transactionPaymentType': 'BOLETO',

'transactionCCFlag': '',

'transactionPromoCode': '',

'transactionProductsPurchased': gtm_products,

'transactionProductsCarted': gtm_products,

'transactionProducts': gtm_products

}];

E logo após isso, faça a chamada ao Google Tag Manager

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-5X75"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5X75');</script>
<!-- End Google Tag Manager -->

 

É isso, se fizer tudo certo, em pouco tempo seu analytics já começará a ser populado e você terá muito mais flexibilidade para adicionar / remover / modificar qualquer tag em seu site.

Você já usa o serviço? Compartilhe sua experiência!

Google Tag Manager

Avalição GTM

Simples e prático, facilita a organização e publicação de Tags em seu site.

Rating by Heric Tilly: 5.0 stars
starfull Google Tag Manager Data Layer e Commerce Tagstarfull Google Tag Manager Data Layer e Commerce Tagstarfull Google Tag Manager Data Layer e Commerce Tagstarfull Google Tag Manager Data Layer e Commerce Tagstarfull Google Tag Manager Data Layer e Commerce Tag

 

facebook Google Tag Manager Data Layer e Commerce Tag twitter Google Tag Manager Data Layer e Commerce Tag email Google Tag Manager Data Layer e Commerce Tag

Como fazer Tabela Zebrada CSS 3

Aprenda a criar uma Tabela Zebrada CSS 3

De maneira simples e rápida, segue um pequeno tutorial sobre como criar uma Tabela Zebrada CSS 3.

Basicamente para criar uma tabela zebrada com CSS 3 você só precisa criar um estilo que se aplique na tabela.

Neste exemplo, vou aplicar o estilo na tabela com o id “tabela-zebrada”

table#tabela-zebrada tbody tr:nth-child(odd) {
background-color: #666;
}

Já a tabela:

O resultado é esse:

Como fazer uma tabela Zebrada usando CSS 3?
O conceito é bem simples!
Monte sua tabela como de costume
E crie o estilo css para fazer o trabalho

tabela zebrada css 3 300x99 Como fazer Tabela Zebrada CSS 3

Tabela Zebrada CSS 3

Espero que o post tenha ajudado a criar a Tabela Zebrada com CSS 3

Caso tenha alguma dúvida, não deixe de ver o fórum da w3schools sobre Nth-child.

tabela zebrada css 3

Avaliação

Simples e eficaz para tabular dados de maneira rápida e com fácil leitura de linhas.

Rating by Heric Tilly: 5.0 stars
starfull Como fazer Tabela Zebrada CSS 3starfull Como fazer Tabela Zebrada CSS 3starfull Como fazer Tabela Zebrada CSS 3starfull Como fazer Tabela Zebrada CSS 3starfull Como fazer Tabela Zebrada CSS 3

facebook Como fazer Tabela Zebrada CSS 3 twitter Como fazer Tabela Zebrada CSS 3 email Como fazer Tabela Zebrada CSS 3

Cálculo de Frete Correios PHP – Cálculo de Frete Redundante

Com as últimas alterações feitas nos Correios para cálculo de frete através de WebService, várias Lojas Virtuais tiveram impacto e ocasionalmente perderam algumas vendas, pois os clientes não conseguiam finalizar a compra devido ao erro de cálculo de frete.

Como fazer o Cálculo de Frete Correios PHP?

Simples..

O que já venho fazendo há mais de 2 anos é bem simples, utilizei redundância na consulta de frete.

Primeiramente faço a chamada ao WebService dos Correios, onde passo diversas informações como contrato esedex, etc…

Caso essa chamada falhe por algum motivo, eu então faço a chamada de consulta ao WebService do Pagseguro, perdendo apenas o cálculo de e-sedex, porém garantindo que meu cliente consiga efetuar a compra.

Seguem alguns exemplos de chamadas em PHP.

Os códigos de serviço podem variar caso você tenha contrato com os Correios, aqui vai a lista de Código de Serviços

////41106
////PAC sem contrato
////40010
////SEDEX sem contrato
////40045
////SEDEX a Cobrar, sem contrato
////40215
////SEDEX 10, sem contrato
////40290
////SEDEX Hoje, sem contrato
////40096
////SEDEX com contrato
////40436
////SEDEX com contrato
////40444
////SEDEX com contrato
////81019
////e-SEDEX, com contrato

E a chamada ao WebService ficaria assim:

$url="http://ws.correios.com.br/calculador/CalcPrecoPrazo.aspx?sCepOrigem=11035181&sCepDestino=".$sCepDestino."&nVlPeso=".$nVlPeso."&nCdFormato=1&nVlComprimento=20&nVlAltura=20&nVlLargura=20&sCdMaoPropria=n&nVlValorDeclarado=0&sCdAvisoRecebimento=n&nCdServico=41106,40010,40215,81019,40096&nVlDiametro=0&StrRetorno=xml&nCdEmpresa=XXXXX&sDsSenha=YYYYYY";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_VERBOSE, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Expect:'));
curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
curl_setopt($ch, CURLOPT_POST, 0);
$result = curl_exec($ch);
$resultArray = curl_getinfo($ch);
curl_close($ch);

Para ver o retorno ( header )

if($resultArray['http_code'] == "200"){
	echo "Funcionou";
} else {
       echo "Erro: " . $resultArray;
}

Se der erro no resultado então faço a chamada a outro webservice, no caso o WebService do PagSeguro, se desejar pode adicionar outros quantos quiser, o importante aqui é você não perder a venda.

$url = "https://pagseguro.uol.com.br/desenvolvedor/simulador_de_frete_calcular.jhtml?postalCodeFrom={$sCepOrigem}&weight={$nVlPeso}&value={$Valor}&postalCodeTo={$sCepDestino}";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_VERBOSE, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Expect:'));
curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
curl_setopt($ch, CURLOPT_POST, 0);
$result = curl_exec($ch);
$resultArray = curl_getinfo($ch);
curl_close($ch);

Agora é só tratar o retorno dos WebServices, fazer as devidas validações e integrar com a sua aplicação de Loja Virtual.

No caso do retorno dos Correios:

$xml = @simplexml_load_string($result);
if($xml){
	foreach($xml->cServico as $tfrete){
		if($tfrete->Codigo==41106){
			$valordofretePAC = $tfrete->Valor;
			$prazodofretePAC = $tfrete->PrazoEntrega;
		}
		if($tfrete->Codigo==40010){
			$valordofreteSEDEX = $tfrete->Valor;
			$prazodofreteSEDEX = $tfrete->PrazoEntrega;
		}
		if($tfrete->Codigo==81019){
			$valordofreteESEDEX = $tfrete->Valor;
			$prazodofreteESEDEX = $tfrete->PrazoEntrega;
		}
		$erro = $tfrete->MsgErro;
	}
}

Em último caso se todas as chamadas falharem, você ainda pode optar por fazer um frete fixo, baseado na sua localidade e na região de destino. ( Estado / Capital | Interior ) fica a seu critério, como disse antes, o importante é não perder a venda por problemas técnicos.

Espero ter ajudado.

facebook Cálculo de Frete Correios PHP   Cálculo de Frete Redundante twitter Cálculo de Frete Correios PHP   Cálculo de Frete Redundante email Cálculo de Frete Correios PHP   Cálculo de Frete Redundante

Blog com interface para iPhone

Instalei aqui no blog o plugin wptouch que automaticamente detecta se o usuário esta acessando a partir de um iPhone/iPod e muda sua interface para se obter uma melhor experiência de interface.

Se você também deseja tornar seu blog wordpress “iPhone Blog com interface para iPhone Friendly”, basta seguir o roteiro abaixo.

A instalação é simples e dura poucos minutos.

Para iniciar o processo, abra a tela administrativa do seu wordpress, vá em Plugins e clique em “Adicionar Novo”.

Abrirá um tela com um campo de pesquisa onde você deve digitar “wptouch”. No resultado da pesquisa provavelmente aparecerá “WPtouch iPhone Theme”, clique em instalar.

Na proxima tela, clique em “Instalar Atualização Agora” e espere o processo ser concluído.

Se plugin não for ativado automaticamente, clique em “Ativar plugin” e pronto, agora seu blog já é compatível com iPhone.

E falando em iPhone, voce já pensou em personalizar uma capa de iphone?
No site ecamisetas isso é possível, confira as Capas de iPhone Personalizadas e depois comente aqui o que achou do serviço.

facebook Blog com interface para iPhone twitter Blog com interface para iPhone email Blog com interface para iPhone

Page optimized by generic for viagra joke cost viagra or cialis