19 de ago. de 2011

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

:: CSS Sprites ::

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?

#menu li a {
...
background:url(imagens/link-menu.gif) 0 0 no-repeat;
}
#menu li a:hover {
...
background: url(imagens/link-menu-over.gif) 0 0 no-repeat;
}

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?

#menu li a {
...
background-image: url(imagens/menu.gif);
background-position: 0 0;
background-repeat: no-repeat;
}
#menu li a:hover {
...
background-position: 0 -60px
}

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

view source
print?

#menu li a {
...
background: url(imagens/menu.gif) 0 0 no-repeat;
}
#menu li a:hover {
...
background-position: 0 -60px;
}

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.

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.
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.
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.
Box contendo o endereço das imagens de fundo sugeridas como não candidatas à Sprite.
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.
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.
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!

3 de ago. de 2011

Diferença Historica entre HTML e XHTML

Conceito:
HTML e XHTML são as linguagens utilizadas na apresentação de páginas de internet. Basicamente, todas as páginas na web são na sua forma fundamental escritas em uma destas duas linguagens.
HTML (do inglês Hyper Text Markup Language) foi desenvolvido no início da década de 90 por engenheiros do laboratório CERN. Nos anos seguintes, houveram diversas atualizações da linguagem sendo a última especificação oficial a de versão 4.01, lançada no ano 2000.
XHTML (do inglês Extensible Hyper Text Markup Language) é considerado uma evolução do HTML por englobar todos os elementos da linguagem HTML, com algumas adições. A primeira versão da linguagem XHTML foi lançada 2000 sendo a última atualização a de versão 1.1 proposta em 2001. Por definição, XHTML possui as mesmas características de documentos XML.
Estas linguagens consitem de tags ou elementos envolvidos pelos caracteres '<' (menor que) e '>' (maior que) que modificam ou agregam propriedades do seu conteúdo. Em geral cada tag possui um finalizador consistindo do nome da tag precedido por uma '/' (barra). Por exemplo:

<strong>Texto em Negrito</strong>
Onde:

<strong> é a tag que caracteriza o texto a seguir como devendo ser apresentado em negrito

Texto em Negrito: é o texto a ser afetado pela tag

</strong> é o terminador da tag, indicando onde as características de formatação terminam.

Note que nem todas as tags possuem um terminador. Em casos assim, na linguagem XHTML estas tags devem terminar com a '/' (barra) dentro da própria tag, por exemplo:

<br />
<br /> (quebra de linha) não possui um terminador, portanto a '/' (barra) é inserida dentro da própria tag inicial.
Esta mesma tag em linguagem HTML é simplesmente <br>.
Tags também podem ter atributos e cada atributo pode possuir diversos valores, alguns específicos, alguns definidos pelo autor da página. Por exemplo:

<p align="right">Texto justificado à direita</p>
onde:

<p> é a tag padrão para indicar o início de um parágrafo

align="right" é um atributo que indica que a tag <p> representa um parágrafo justificado à direita

'Texto justificado à direita' é o texto a ser apresentado e justificado (alinhado) à direita

</p> é o terminador da tag

Uma outra diferença entre HTML e XHTML é que em HTML as tags, atributos e valores podem ser escritos em letras maiúsculas ou minúsculas. Na linguagem XHTML todas as tags, atributos e valores devem ser escritas em letras minúsculas e todos os valores devem ser envolvidos por haspas (").
Declaração:
Para caracterizar um documento como sendo HTML ou XHTML, a página de internet deve conter uma declaração do tipo de documento logo no início de seu código. Isto é feito através de uma tag especial chamada <!DOCTYPE>. Há também três tipos diferentes de variações de cada uma das duas linguagens, a saber:

DTD Strict (Estrito): A página de internet pode conter apenas tags sem nenhum atributo de formatação. A página também não pode conter nenhuma tag marcada como obsoleta pela W3C (World Wide Web Consortium - entidade que regulamenta a linguagem HTML e XHTML). Neste tipo de página a formatação é obtida unicamente através de folhas de estilo em cascata (CSS).

DTD Transitional (Transicional): A página de internet pode conter atributos de formatação bem como tags consideradas obsoletas.

DTD Frameset: Trata-se de um tipo similar à DTD Transitional, sendo a principal diferença que páginas de internet neste formato se utilizam de frames no lugar da estrutura <body>.

DTD significa Document Type Definition (Documento de Definição de Tipo) e se refere a um arquivo onde cada uma das tags das linguagens HTML e XHTML são definidas. Na declaração da tag <!DOCTYPE>, um caminho para este arquivo deve ser especificado.
Compatibilidade:
Todos os navegadores modernos são compatíveis com as linguagens HTML e XHTML, no entanto a organização W3C recomenda que novas páginas de internet sejam criadas utilizando-se a linguagem XHTML Strict.

Fonte de Pesquisa

8 de jul. de 2011

Dica como configurar a Conversão do Google AdWordas no LiveZilla (atendimento online)

Recentemente precisei configurar a conversão de alguns campanha para operar junto ao sistema LiveZilla, o que é um pouquinho chato visto que o código e feito para confundir. Achei uma boa solução que me atendeu bem, o mesmo processo pode ser usado para as métricas de conversão do Google Analytics GA.

Ex. para Conversões do Google Adwords:

// o código deve ser incluído imediatamente antes da linha que contem o texto "unloadDataProvider();" (no final o arquivo chat.php)

// o código deve aparecer em um dos frames do chat (chat.php?template=lz_chat_frame.4.1)

Veja um exemplo do código abaixo:

$html = str_replace("</html>","",$html); // inserir essa linha para retirar o </html> que será incluso após o código do google

$html = $html . '

/* <![CDATA[ */

var google_conversion_id = xxxxxxXXXxxx;

var google_conversion_language = "pt";

var google_conversion_format = "3";

var google_conversion_color = "ffffff";

var google_conversion_label = "xxxxxxxxxxxxxx";

var google_conversion_value = 0;

/* ]]> */

</script>

</script>

</div>

</noscript> </html>'; // <<<< recolocamos a tag </html> apos o codigo do google

// o código acima deve ser incluído imediatamente antes da linha que contem o texto abaixo (no final o arquivo chat.php)

// o código deve aparecer em um dos frames do chat (chat.php?template=lz_chat_frame.4.1)

// foi testado na versão 3.3.2.2, insira o código antes da linha abaixo:

unloadDataProvider();

4 de jun. de 2011

Nova versão do Chat em PHP LiveZilla 3.4.0.0 vaza antes do lançamento oficial

Nova versão do LiveZilla 3.4 ja pode ser baixada no site oficial, apesar de não terem divulgado um link para o download, a empresa mantêm uma nomenclatura única nos seus links de download, sendo assim após o primeiro teste já foi possível baixar o dito cujo. deixo o link para os entusiastas que queiram testar a nova versão 3.4.0.0 do Live Zilla chat:

(( Click here to download the latest version LiveZilla 3.4.0.0 ))

http://www.livezilla.net/downloads/pubfiles/LiveZilla_3.4.0.0_Full.exe
Não preciso lembrá-los que essa provavelmente não é a versão final / estável do livezilla 3.4.0.0. O uso dessa versão antes do lançamento deve ser somente para testes das novidades, pois é de se esperar mudanças no código fonte em quanto não é lançada oficialmente a versão 3.4 do aplicativo.

Veja baixo as novas funcionalidades do programa, e faça um comentário

LiveZilla 3.4.0.0 Preview
2011-6-?
* New: Forward chats to groups
* New: Operator display can be sorted by operators or groups
* New: Set priority for chats
* New: Assign target group/operator for chats
* New: Group chats with customer
* New: Invite other operators to join chat with customer
* New: Clickable search phrase in visitor view
* New: HTML source can be edited in canned resource window
* New: Full chat listing (see all chats on the server) with detailed information
* New: Administrators can join chats in invisible mode
* New: Optimize MySQL tables function
* New: Server requires HTTPS (optional setting)
* New: External event action: overlay element for HTML/URL
* New: Shadow and background for chat invitations
* New: Question (topic) will be shown during chat
* New: Pass thru parameter: Language (preselect a language for the customer chat window)
* New: Different custom Chat Login Input elements (CheckBox, ComboBox, Text, TextArea)
* New: Custom Input values will be shown in chat transcript / offline messsage emails
* New: Chat / Offline Message custom text (displayed above login form)
* New: Different user status for different user groups
* Change: Scrollbars will be shown if needed on login page (chat & offline messages)
* Change: "Representative is typing" text on customer side chat window instead of an icon
* Bugfix: Search phrases from baidu.com are not being saved correctly
* Bugfix: JPG/JPEG files are not working as Chat Button Images
* Bugfix: Opening hours are not being applied on Sundays
* Bugfix: Automatic update fails
* Bugfix: Chat Floating Button not displayed correctly in IE6
* Bugfix: Links stop working on report page after recalculation
* Bugfix: Line breaks are being removed from signature when replying to offline messages
* Bugfix: Client shows same title for all visitors

=========== =========== EDITADO 20/09/2011 =========== ===========
Livezilla 3.4 só foi até a versão Beta, o fabricante após muitos atrasos resolveu mudar o nome da versão para 4.0.0.0 e ira incluir novos recursos, fiz algumas sugestões, agora é aguardar pra ver, mas sem pressa porque a versão 3.4.0.0 final iria sair dia 1 de agosto de 2011, depois foi adiado para 1 de setembro de 2011 e agora depois da mudança não se falou mais em prazo. Ainda rolou outro inconveniente,o fabricante distribuiu a versão beta com um prazo para expirar dia 1 de setembro de 2011 e quem resolveu arriscar a usar a versão beta em produção quase ficou na mão, mas o suporte foi bacana e liberou a versão do programa desbloqueada na pagina, mas a alegria não durou muito, pois o link e as postagens sobre o assunto simplesmente sumiram do fórum, eu consegui uma cópia dessa raridade , quem quiser posta o email / msn

27 de abr. de 2011

Blap! Sistema interliga duas linhas telefônicas, através da web

Uma ferramenta realmente "bacana" que interliga duas linhas telefonicas a nivel nacional. Esse sistema é útil para empresas que tem seu negocio na internet. Em termos de custo a que se avaliar a visitação do site, pois em cotação feita para um site de imóveis o valor a pagar mensalmente era R$120,00 , *sem limite de uso, uma tarifação que não me agradou muito.

No próprio site da empresa é possível pedir uma ligação, seu telefone toca e é encaminhado a uma atendente deles. O curioso foi que no dia em que tentei contato eles estavam com problemas técnicos, a chamada completava mais caia com +- 1 minuto de conversa, liguei 5 vezes. Ainda vou ligar novamente para saber se funciona direitinho, mas é uma excelente oportunidade para quem trabalha com vendas a nível de Brasil. Outra empresa que presta um serviço similar é a http://www.tesatelecom.com/

13 de nov. de 2010

Dreamweaver 8 crashes while browsing files (Windows Vista)

Dreamweaver 8 travar enquanto navegando arquivos (Windows Vista)Produtos afetados

Dreamweaver 8 pode falhar quando ele executa ações arquivo navegando no Microsoft Windows Vista. Alguns exemplos incluem:

•Usando o File> Open para procurar o disco rígido para abrir um arquivo.
•Como inserir uma imagem e usar o navegador de arquivos para selecionar a imagem.
•Criando um hiperlink e usando o navegador de arquivos para selecionar o arquivo de destino.
•Criar uma definição de site e usando o navegador de arquivos para selecionar a pasta raiz local ou pasta remota.
comportamento relatado adicionais incluem:

•Bater ocorre quando uma caixa de diálogo de navegação de arquivos é exibida.
•Bater ocorre quando a visitar duas ou mais pastas de distância.
•Bater ocorre após a inserção de quatro imagens.
•Bater ocorre quando você deixar o arquivo de caixa de diálogo de navegação aberta por um período de tempo.
Razão
O problema parece ser um conflito entre o Dreamweaver 8 eo componente de Groove do Microsoft Office 2007 no Microsoft Windows Vista. Microsoft Office Groove 2007 é apenas em conjunto com o MS Office Ultimate 2007 e Microsoft Office Enterprise 2007.

Solução:

Desinstalar Grove Microsoft 2007.

Desinstalar o Microsoft Grove 2007 irá remover o recurso do seu sistema. Se você precisar de MS Grove 2007 consulte a outra solução.

1.Selecione Iniciar> Painel de Controle.
2.Dê um duplo clique em Programas e Recursos e selecione Microsoft Office Ultimate 2007.

Nota: Escolha Modo de Exibição Clássico no painel esquerdo, se os programas e recursos não está disponível.

3.Clique em Alterar.
4.Selecione Adicionar ou Remover Recursos do assistente de instalação do Office.
5.Clique no menu drop-down ao lado de Microsoft Office Groove e escolha Não disponível.
6.Siga as instruções na tela para desinstalar o Groove 2007.

1 de out. de 2010

Aprenda a fazer um site bem estruturado com as video aulas do pessoal do Mx Masters

Validação de CSS com XHTML – Parte 1

* * * * * 4 votos

Fala Pessoal!
Nessa video aula, vou falar um pouco sobre XHTML 1.0 Strict, uma maneira mais “rígida” de se estruturar um website, respeitando os Padrões Web.
Na próxima aula, ensinarei como formatar textos, cabeçalhos e a inserir um vídeo em flash que respeite as validações W3C.
Abraços a todos!

Superdidata - Como, com que, por onde, funciona, aprenda!