Bugfix da função Popout do Livezilla versão 4.x - Extra Oficial

Unofficial Bugfix Popout from overlay not working for multiservers:

     O Fabricante do Livezilla já lançou sua nova versão baseada em 5.x e com ela diversas melhorias estão sendo implementadas como função de atendimento direto no navegador e suporte aos dispositivos móbile para os sistemas operacionais da Apple, Microsoft e Google. Na lista das mudanças da nova versão constam uma serie de correções de bug que não serão liberada para os pagantes da versão baseada em 4.x e muito menos para os usuários das versões Free baseado em 3.x. 

     Penso que as correções deveriam sim ser liberadas para quem pagou pela versão 4.x, existem bugs muito simples de serem resolvidos e que afetam diretamente a usabilidade de funções importantes para quem quer usar a ferramenta comercialmente na versão multi-server (multi-web-site).

     O fato é que se você configurar o livezilla para ser usado com vários bancos de dados, separando assim as informações, você não ira conseguir usar completamente a função que permite ao cliente conversar com operador diretamente da pagina web (sem precisar abrir uma nova janela), pois caso não haja operadores online, e você desejar que o visitante seja direcionado para o formulário em outra janela, ou ainda se você ativar a função PopOut, o que o cliente vai ver quando clicar será uma nova janela de login normalmente, mas para o perfil errado que pertence ao site master (root) do servidor (aquele que você deve criar na instalação, mas que não é usado na versão multi-site, servindo apenas para configurações).

     Muita gente está tendo problema com isso e muitas vezes nem fica sabendo, pois o cliente envia a mensagem e se não houver configuração de enviar a copia pro e-mail ninguém irá ver essas mensagens.

     A boa noticia foi que como eu precisei ativar essa opção para a minha central de chat  chamada Chat Central, eu desenvolvi uma solução muito simples de ser implementada, a qual eu disponibilizo para vocês abaixo. (Se for útil pra você deixe um comentário, compartilhe ou marque +1 no google plus)

> Acesse o ftp e baixe o arquivo a seguir do servidor:

/Pasta_do_livezilla/templates/overlays/chat/jscript/jsextern.tpl

>> Abra o arquivo no seu editor de texto / html preferido e localize a linha 25, você deve ver algo como:
--------------------------------------------------------------------
if(_click && lz_tickets_external)
{
void(window.open(lz_poll_server + 'chat.php?acid=1&'+ lz_get_parameters,'','width='+lz_window_width+',height='+lz_window_height+',left=100,top=100,resizable=yes,menubar=no,location=no,status=yes,scrollbars=yes'))
return;
}
--------------------------------------------------------------------

>>> substitua todo o texto acima por:
--------------------------------------------------------------------
if(_click && lz_tickets_external)
{       var website = lz_user_website;
void(window.open(lz_poll_server + 'chat.php?acid=1&ws='+ website +'&'+ lz_get_parameters,'','width='+lz_window_width+',height='+lz_window_height+',left=100,top=100,resizable=yes,menubar=no,location=no,status=yes,scrollbars=yes'))
return;
}
--------------------------------------------------------------------

>>>> Salve e envie o arquivo de volta para a mesma pasta no servidor (substitua)

>>>>> Repita o processo anterior com outro arquivo quase igual mas com final .js:

/Pasta_do_livezilla/templates/overlays/chat/jscript/jsextern.js

>>>>>> Ache a linha 81, você vai ver algo como:
------------------------------------------------------------------
lz_chat_change_state(true,true);
var group = (lz_operator != null) ? ("&intgroup="+lz_global_base64_url_encode(lz_operator.Group)) : "";
var operator = (lz_desired_operator != null) ? ("&intid="+lz_global_base64_url_encode(lz_desired_operator)) : "";
var name = (lz_external.Username != "") ? lz_external.Username : lz_guest_name;
void(window.open(lz_poll_server + lz_poll_file_chat + '?acid='+lz_global_base64_url_encode(lz_chat_id)+'&livezilla='+lz_global_base64_url_encode(lz_session.UserId)+'&en='+lz_global_base64_url_encode(name) + operator + group + add + "&" + lz_get_parameters,'LiveZilla','width='+lz_window_width+',height='+lz_window_height+',left=0,top=0,resizable=yes,menubar=no,location=no,status=yes,slidebars=no'));
}
------------------------------------------------------------------
>>>>>>> substitua todo o texto acima por:
--------------------------------------------------------------------

lz_chat_change_state(true,true);
var website = lz_user_website;
var group = (lz_operator != null) ? ("&intgroup="+lz_global_base64_url_encode(lz_operator.Group)) : "";
var operator = (lz_desired_operator != null) ? ("&intid="+lz_global_base64_url_encode(lz_desired_operator)) : "";
var name = (lz_external.Username != "") ? lz_external.Username : lz_guest_name;
void(window.open(lz_poll_server + lz_poll_file_chat + '?acid='+lz_global_base64_url_encode(lz_chat_id)+'&ws='+website+'&livezilla='+lz_global_base64_url_encode(lz_session.UserId)+'&en='+lz_global_base64_url_encode(name) + operator + group + add + "&" + lz_get_parameters,'LiveZilla','width='+lz_window_width+',height='+lz_window_height+',left=0,top=0,resizable=yes,menubar=no,location=no,status=yes,slidebars=no'));
}
--------------------------------------------------------------------

>>>>>>>> Salve e envie o arquivo de volta para a mesma pasta no servidor (substitua)

>>>>>>>>> Pronto a função de PopOut agora irá funcionar perfeitamente  com a configuração multi-server (multi web site) nas versões 4.x.x.x do Livezilla


Veja abaixo a lista completa dos bug fix da versão 4.x para a 5.x do LiveZilla

* Bugfix (General): Operator/Bot profile pictures can not be changed through the admin panel (Status: Done)
* Bugfix (General): Encoding problems with vcards (Status: Done)
* Bugfix (General): Decembers months statistics in years report is incorrect (Status: Done)
* Bugfix (General):Chat transcript email shows two different times (Status: Done)
* Bugfix (General):Operator filter permission setting does not have an effect (Status: Done)
* Bugfix (General):Personal Email link is not working (Status: Done)
* Bugfix (General):No max length for chat inputs on overlay chat (Status: Done)
* Bugfix (General):Ratings cannot be deleted from local computer (Status: Done)
* Bugfix (General):Custom fields will not be shown the in the column editor form (Status: Done)
* Bugfix (General):Client throws error not enough memory. (Status: Done)
* Bugfix (General):Archived chats / Chat transcripts will be shown incorrectly when using a search query (Status: Done)
* Bugfix (General):Call back feature will not work correctly when "Auto accept chats" setting is activated (Status: Done)
* Bugfix (General):Using "<" causes problems with the formatting of the autoresponder email (Status: Done)
* Bugfix (General):Popout from overlay not working for multiservers (Status: Done)
* Bugfix (General):Problems when using overlay/on-site chats along with a custom leave message site, bug report(Status: Done)

***  Solução provida pelo SuperDidata Israel Fagundes, não há garantias que vá funcionar para todos, mas na instalação do Chat Central funcionou perfeitamente, comentários são bem vindos, já viu o anuncio?

Para ver o overlay chat em funcionamento acesse o site imobiliário Morar no Rio

----- EDITADO -----
Um plus pra quem ainda vai aguardar até 2014, origa o cliente a inserir dados

Linha 184 dentro de function lz_chat_message()  !none
if(lz_operator && lz_chat_last_poster != lz_external.Id && lz_external.Email.length < 7){
document.getElementById("lz_chat_overlay_options_box").style.display = "none";
}

Manipulando imagens com PHP com a classe Wide Image

É uma classe super simples de se usar, e ao mesmo tempo se mostra ser uma ferramenta completa para manipular imagens diretamente no servidor atravez do php. Fica facil manipular milhares de imagens com uma classe completa como essa, o material de apoio bem como o download podem ser adquiridos diretamente da pagina do desenvolvedor no site sourceforge. Recortar exatamente, redimencionar, girar e aplicar filtros de cor são exemplos do que pode ser feito com a Classe Wide Image.  Veja abaixo um exemplo simples da sua utilização (em inglês):

A simple gallery example

In this typical gallery example, I’ll show how you load an image from an uploaded file, resize to two different sizes, and apply watermark to them.
First, load an image directly from an uploaded file, presented in an input file field named “pic”.

1. try
2. {
3. $image = WideImage::load('pic');
4. }
5. catch (Exception $e)
6. {
7. echo "Image isn't valid";
8. }

Then, resize the image to a decent size, so that you avoid too large images.

1. $image = $image->resize(1600, 1200);

Crop a 300×300 rectangle from the middle, resize to 100×100, and save a thumb.

1. $image->crop('center', 'center', 300, 300)->
2. resize(100, 100)->saveToFile('image-thumg.png');

Sharpen the image up a bit, and apply watermark to the bottom-right corner of the image.

1. $logo = WideImage::load('logo.png');
2. $large = $image->unsharp(80, 0.5, 3)->merge($logo, 'right', 'bottom');

Show the image size and save the image.

1. echo $large->getWidth() . 'x' . $large->getHeight();
2. $large->saveToFile('image-large.png');

That is all. 

Solução para problema de rolagem do LiveZilla no Google Chrome

Depois da ultima atualização do Google Chrome (normalmente atualizado automaticamente) os usuários do livezilla estão tendo problemas ao conversar com um operador através do navegador da Google, o fabricante atualizou a sua última versão (paga) mas também liberou um passo a passo para resolver o problema, segundo eles isso resolve o problema em qualquer versão que apresente o problema, mesmo a baseada em 3.x  que é gratuita.

Veja abaixo o passo a passo:

Since the latest update of Google's Chrome Browser (which installs automatically - you are usually not being asked), you might experience that the visitor side chat window is not longer scrolling down automatically (after receiving a new message from the operator).

The fastest way to fix this for all versions of LiveZilla is described below.

How to fix scrolling problems in Google Chrome (all LiveZilla Versions):

1.) Connect to your webserver through FTP

2.) Switch to the folder %LIVEZILLA_FOLDER% / templates / jscript

3.) Open/Edit: jschat.tpl

4.) Search for:

.scroll(0,1000000000)

5.) Replace with:

.scrollTo(0,10000000)

6.) Save the file (and re-upload if needed).

Mascara data, telefone e texto "marca d'aguá" para input html

Uma boa opção para que procura mascarar algum input como uma data ou um telefone é usar as ferramentas do http://www.digitalbush.com/projects

São elas:

 masked-input-plugin

Com esse .js mais a biblioteca jquery é possível criar suas próprias mascaras para campos como telefone e data

Ex.

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>

jQuery(function($){
   $("#date").mask("99/99/9999");
   $("#phone").mask("(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");
});

watermark-input-plugin

 Com esse .js é possivel criar um texto padrão dentro de cada input de forma personalizada para cada campo que se queira, o texto aparece com cor mais suave que o texto digitado pelo usuário, e uma ves que o usuário clique para escrever esse texto some,  caso o usuário digite algo no input o texto fica com sua cor normal e permanece, caso não digite ao tirar o foco do input o texto padrão volta a aparecer.

Ex.

<script src="jquery.watermarkinput.js" type="text/javascript"></script>

jQuery(function($){
   $("#email").Watermark("Digite seu email);
   $("#telefone").Watermark("digite seu telefone");

Em caso de duvida deixe seu comentário, obrigado

JOGO SUJO - LiveZilla o Maior e mais completo software Gratuito de live chat resolve cobrar licença cara por cada usuário na nova versão 4.X.X.X

A empresa do Software após atraso de mais de 2 meses na entrega da versão 3.4.0.0 final resolve então mudar a versão do Livezilla para 4.0.0.0 (4.0.1.0)  e agora quem quiser usar mais que 15 dias o programa, terá que pagar uma licença por cada usuário cadastrado no sistema que tiver que ficar on-line ao mesmo tempo que outros, cada usuário pode custar até  €uro 69.90 cerca de R$175,00.  Isso para um software que acabou de sair do status de FREEWARE é um ROUBO.  É lamentável tal postura por parte do fabricante, que nem mesmo avisou aos usuários que aguardavam ansiosos a nova versão do Software Livezilla que a epoca se chamaria 3.4.0.0

Existiu uma versão do LiveZilla 3.4.0.0 beta  do Livezilla que tinha algumas das funções vistas na nova versão,  a mesma expirou dia 01/09/2011, mesmo tendo inúmeros BUG’s  eu acredito que valha a pena estudar os mesmos e tentar corrigir no php. A boa noticia é que eles liberaram por menos de 24 horas no site uma versão do Livezilla 3.4.0.0 Beta desbloqueada que funciona perfeitamente até hoje. Vamos falar muito sobre essa “Sacanagem” do fabricante que fez seu nome usando o artifício de ser gratuito, tempo onde conquistou inúmeros clientes, coisa que agora seria INVIÁVEL devido ao alto custo das licenças....

@livezilla Jogada suja de marketing  

PS.: Quem quiser essa versão do Livezilla Beta 3.4.0.0 é só postar o email ai embaixo que eu mando um link

Se for pra pagar o http://www.woopra.com/ me parece uma melhor opção

Configuração padrão da Vivo, claro, Tim e Oi + link para procedimentos desbloqueio modem 3g da tim oficia

Abaixo vocês encontram o link dos procedimentos pós venda dos funcionários da TIM para o desbloqueio SIM Lock dos modems comercializados pela Tim, e também informações de como proceder nos modems não bloqueados para configurar a discagem APN nome de usuário e senhas da nova operadora.

Deixo antes os dados padrão para conectar nas 4 maiores operadoras brasileiras de telecomunicação, a VIVO; TIM; CLARO; e OI

Configure o modem de acordo com sua operadora móvel 3g usando o número, APN, usuário e senha abaixo:


Ex. CLARO 3g
numero: *99***1#
Usuário: claro
Senha: claro
APN: bandalarga.claro.com.br

Ex. TIM 3g
numero: *99***1#
Usuário: tim
Senha: tim
APN: tim.br

Ex. VIVO INTERNET 3g
numero: *99***1#
Usuário: vivo
Senha: vivo
APN: zap.vivo.com.br

Ex. OI ?
numero:*99#
Usuário: oi
Senha: oi
APN: ?? ( tente marcar dinâmica)

ps. na OI deixamos o numero do 2g pq 3g na oi é complicado, ou seja para conectar 3g o numero é *99***1# e para conexão 2g (antiga) *99#


Veja o link do site da Tim com mais instruções para essa operadora:

Suporte ao desbloqueio de todos os modens vendidos pela TIM, pagina oficial da OPERADORA TIM 

CSS SPRITES - Para alguns casos uma ótima idéia!

:: CSS Sprites ::

• Home Page
• Portfolio
• Equipe tecnica
• Parceiros
• Album de fotos
• Fale conosco

Aos links do menu de navegação mostrado ao lado foi adicionado o efeito rollover de imagens com uso da pseudoclasse CSS :hover. Passe o mouse sobre os links para verificar o efeito. O menu não é funcional, pois destina-se apenas a servir de meio auxiliar para o entendimento do termo CSS Sprites.

Os primeiros efeitos rollover desenvolvidos com CSS adotavam a técnica de criar uma imagem para ser adicionada como fundo do elemento link em seu estado de repouso e obter o efeito fazendo a mudança para outra imagem a ser mostrada no estado over, ou seja, quando o usuário passa o mouse sobre a área do elemento que contém o link

Uma imagem para o estado em repouso e outra imagem para o estado over, como mostrado a seguir.

link-menu.gif - imagem no estado do link em repouso. (3k)

link-menu-over.gif - imagem no estado over do link. (7K)

E as regras CSS para obter o efeito

view source

print?

1.#menu li a {

2....

3.background:url(imagens/link-menu.gif) 0 0 no-repeat;

4.}

5.#menu li a:hover {

6....

7.background: url(imagens/link-menu-over.gif) 0 0 no-repeat;

8.}

O navegador do usuário precisa estar com as duas imagens disponíveis para o efeito funcionar, ou melhor dizendo, as duas imagens devem ter sido baixadas do servidor, sob pena de haver um atraso no efeito motivado pelo fato da imagem para o estado em repouso já ter sido baixada e aquela para o efeito over ainda não.

Além disso, a cada imagem na página uma requisição HTTP é feita ao servidor. Por essas razões a técnica mostrada para obtenção do efeito rollover com CSS está ultrapassada e atualmente usa-se construir uma só imagem contendo as duas e usar a propriedadebackground-position para controlar a exibição de parte da imagem única.

Observe a imagem a seguir e as regras CSS modificadas para obter o mesmo efeito.

menu.gif - imagem no estado do link em repouso. (10k)

E as regras CSS para obter o efeito

view source

print?

01.#menu li a {

02....

03.background-image: url(imagens/menu.gif);

04.background-position: 0 0;

05.background-repeat: no-repeat;

06.}

07.#menu li a:hover {

08....

09.background-position: 0 -60px

10.}

Ou a forma abreviada para declarações de background.

view source

print?

1.#menu li a {

2....

3.background: url(imagens/menu.gif) 0 0 no-repeat;

4.}

5.#menu li a:hover {

6....

7.background-position: 0 -60px;

8.}

Essa técnica de construção de uma imagem para dois estados do link é também usada para conter o estado do link visitado e do link corrente, ou uma combinação dos quatro estados conforme a necessidade específica de cada projeto. No menu da navegação principal do meu blog usei uma só imagem para os estados dos links em repouso, over e corrente. A imagem usada é mostrada a seguir.

Mas afinal o que tudo isso tem a ver com CSS Sprites?

CSS Sprites é uma generalização dessa técnica e consiste em se colocar as várias imagens de fundo usadas no template do site em um arquivo único e com a declaração CSS background-position mostrar em cada elemento que recebe uma imagem de fundo uma parte da imagem.

Conclui-se de imediato que imagens de fundo que se repetem em ambos os eixos x e y não podem ser usadas com a técnica CSS Sprites. Imagens que se repetem em apenas um dos eixos podem ser inseridas na imagem única desde que essa seja convenientemente criada.

A ferramenta on-line SpriteMe

Existe uma ferramente on-line denominada SpriteMe que se destina a examinar uma página aberta no navegador e analisá-la para aplicação da técnica CSS Sprite.

A ferramenta analisa as imagens de fundo existentes na página e apresenta ao desenvolvedor uma lista daquelas que, segundo os critérios da ferramenta, poderiam ser reunidas em uma imagem única. Apresenta também uma lista daquelas que, segundo os critérios da ferramenta, não são indicadas para compor a imagem única.

O desenvolvedor deverá analisar as sugestões da ferramenta e escolher, segundo seus critérios, as imagens que deverão ser reunidas em uma só imagem, arrastando-as de cada uma das lista para um box. Feito isso clicar um botão para acionar a ferramenta que retornará um endereço para a imagem única e as regras CSS para posicionar as imagens na página.

Observe a seguir alguns screenshots da ferramenta e uma explicação mais detalhada do seu funcionamento.

A ferramenta SpriteMe é um bookmarklet (ver definição na Wikipedia), para instalar abra o site da ferramentaclique e arraste o link SpriteMe para a barra de favoritos do seu navegador ou clique com o botão direito do mouse no link e adicione o URL do link nos Favoritos.

Uma vez "instalada" a ferramenta ela está pronta para o uso.

Abra uma página web e clique no link SpriteMe instalado como mostrado na figura anterior ou vá ao menu de favoritos e abra SpriteMe se optou pela instalação nos Favoritos. Feito isso abre-se uma janela pop-up da ferramenta no canto superior direito da página conforme mostrado na figura a seguir.

Na figura mostrada abrimos a home page do site do Maujor e acionamos a ferramenta. Acompanhe as explicações pelos números na figura.

1. A ferramenta informa quantos conjuntos de imagens ela sugere para Sprite na página. Clicar o link "share your savings" autoriza a ferramenta a ferramenta a colocar para visualização pública o resultado da sua utilização em um log que pode ser visualizado no link "Savings" do menu principal da ferramenta (não mostrado nas figuras). Ver o link Savings da ferramenta.
2. Box contendo o endereço das imagens para o Sprite sugerido. Caso a ferramenta sugira mais de um grupo de imagens aparecerão tantos boxes quantos forem os grupos sugeridos.
   Clicar o sinal + que precede cada endereço da imagem mostra em qual elemento HTML a imagem está aplicada e qual a regra background para ela.
   Passar o mouse sobre o endereço das imagens faz com que abra uma janela pop-up à direita mostrando a imagem.
3. Clicar o botão "make sprite" faz com que a ferramenta crie uma imagem única contendo as imagens que estão no box e gere as regras CSS necessárias para posicionar as imagens na página. Na figura a seguir mostramos o resultado do clique nesse botão.
4. Box contendo o endereço das imagens de fundo sugeridas como não candidatas à Sprite.
5. Quando houver mais de um grupo de imagens sugeridas para sprite, clicar o botão "make all" equivale a "make sprite" para todos os grupos de uma só vez.
6. Clicar o botão "new sprite" abre um box vazio para que o desenvolvedor em não concordando com as sugestões da ferramenta possa criar seu próprio grupo de imagens para Sprite. Basta arrastar e soltar o endereço das imagens contidas nos boxes das sugestões da ferramenta para esse novo box vazio que foi aberto e criar sua prórpia lista de imagens para Sprite. 
   Além disso você pode arrastar e soltar imagens entre os boxes iniciais sugeridos pela ferramenta, sem necessidade de abrir novo box vazio.
7. Clicar o botão "export CSS" abre uma página contendo o endereço da imagem única e as novas regras CSS conforme mostrado na segunda figura a seguir.

Observe na figura a seguir o resultado do clique no botão "make sprite".

Nessa figura informa-se o número de requisições HTTP eliminadas com o Sprite e quantos Kb a mais ou a menos a imagem única difere das imagens individuais.

Observe na figura a seguir o resultado do clique no botão "export CSS".

A ferramenta mostra o link para a imagem única gerada. Abra a imagem, salve e hospede no seu domínio, não use o endereço fornecido para linkar à sua CSS pois ele é temporário. Além do link as novas regras CSS para posicionar as imagens de fundo são fornecidas. Copie as regras e substitua as antigas (aparecem riscadas). Não esqueça de trocar o endereço da imagem para aquele no qual você hospedou a imagem no seu servidor.

É isso. Agora você sabe o que é CSS Sprite, conhece a ferramenta MakeSprite e está em condições de otimizar seus sites para imagens de fundo. Bom proveito!