Blog Maurício Luís
Gadget de simples implementação em páginas HTML, totalmente customizável (CSS) e com diversos recursos (vÃdeo, voz, histórico, compartilhamentos) de chat disponibilizado pela Google.
Este gadget, foi testado pelo fabricante nos seguintes navegadores:
- IE 5.5+ (Windows)
- Firefox 0.8+ (Windows, Mac, Linux)
- Safari 1.2.4+ (Mac)
- Netscape 7.1+ (Windows, Mac, Linux)
- Mozilla 1.4+ (Windows, Mac, Linux)
- Opera 8+ (Windows, Mac, Linux)
Permite que você realize as seguintes atividades:
- Chat tradicional entre pessoas
- Chats em grupo
- Conversação por voz (apenas se o programa do Google Talk for instalado no computador do usuário)
- Exibição e compartilhamento de slideshow e vÃdeos
- Histórico do chat
Código HTML de inclusão do gadget:
<iframe src=”http://talkgadget.google.com/talkgadget/client?css=URL_encoded_value“ scrolling=”no” frameborder=”0″ style=”overflow:hidden; width: 300px; height: 446px;”>Repare que o parâmetro “css” e o seu valor, destacado em vermelho, é um recurso adicional deste Gadget, que lhe permite indicar o caminho do arquivo CSS que deseja utilizar para customizar o Gadget.
O arquivo CSS, deve conter a seguinte estrutura:
| SELECTOR / ID DA CLASSE | PROPRIEDADE |
| body | background-color |
| color | |
| hr | background-color |
| #popout | color |
| #tab-frame | background-colors |
| background-alpha | |
| .client | background-color |
| .tab | background-color |
| color | |
| icon-color | |
| .tab:selected | background-color |
| color | |
| .tab:highlight | background-color |
| color | |
| .link .link:rollover |
color |
| .contact .contact:highlight |
background-color |
| .name | color |
| .name:highlight | color |
| .status .status:highlight |
color |
| .email .email:rollover |
color |
| .dropdown | icon-color |
| .frame .frame:rollover |
border-color |
| .list:rollover .list:selected .list:highlight |
background-color |
| .notice | background-color |
| .input | background-color |
| border-color | |
| color | |
| .input:setFocus | background-color |
| border-color | |
| color | |
| .footer | color |
| icon-color | |
| .footer:rollover .footer:press .footer:disabled |
color |
| .dialog | background-color |
| color | |
| .menu .menu:rollover .menu:press .menu:disabled |
color |
| .status-changer | color |
| .status-changer:rollover | background-color |
| border-color | |
| .avatar-menu | background-color |
| color | |
| .avatar-menu:rollover | background-color |
| color | |
| .pager | background-color |
| border-color | |
| icon-color | |
| .pager-frame | background-color |
Caso opte por não utilizar um arquivo CSS personalizado, você pode não utilizar este recurso, retirando do código anterior, o parâmetro “css”, ficando da seguinte maneira:
<iframe src=”http://talkgadget.google.com/talkgadget/client“ scrolling=”no” frameborder=”0″ style=”overflow:hidden; width: 300px; height: 446px;”>Neste caso, a aparência do Gadget, ficará parecida com a ilustração abaixo:
Resumo / Exemplificação de Pop-Up
Na prática, você precisa apenas que o seu browser acesse a seguinte URL:
http://talkgadget.google.com/talkgadget/client