Arquivo da tag: Web

Dicas, Web

Dicas – Fix do bug no IE 8 para divs dinâmicos (ou JQuery accordion)

Bug do Internet Explorer 8 - Ah vá!

…eu podia “estar fazendo” algo mais bacana, como por exemplo, falando sobre uma nova especificação do W3C para o HTML5, como a API vibration que saiu a pouco tempo, ou qualquer outra coisa. Mas não, o IE tinha que atazanar a vida com seus bugs. (:

Brincadeiras a parte, dessa nem o jQuery escapa. Se você tem uma div que é redimensionada dinamicamente, principalmente se ela aumentra de tamanho, ela vai dar problema no IE8. Quando ela aumentar, vai passar por cima de outras divs ou o que quer que esteja no caminho.

E sim, o problema acontece só no IE8. Se ativar o modo de compatibilidade (aquele botão do mal que fica do lado da barra de endereços), o bug não ocorre.

Não adianta apelar para CSS, overflow, height: 100%. Não vai. O que resolve horrendamente o problema é a adição da seguinte tag na head do seu HTML:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Simples. Essa tag força o IE8 a abrir em mode de compatibilidade mesmo que você não queira. Foi a solução mais aplicável, apesar de ter consequências relativamente desastrosas, já que você está forçando o usuário a voltar no tempo. Tudo que requeira uma versão do Internet Explorer mais nova, não mais terá efeito.

Encontrei a solução em diversos sites, mas a que teve a explicação mais clara foi aqui:

http://stackoverflow.com/questions/3089357/jquery-accordion-bug-in-ie-8-workaround

Bom proveito e… boa sorte!

Dicas, Tecnologia, Web

Dica – Palestra Colaboração Humana, Inovação Coletiva e Crowdsourcing

palestra gil locaweb

Tinha parado um pouco de replicar notícias que via por aí, mas como essa me fez pensar. Tem um tempo que ando ligado nos conceitos de mídias sociais. Estou longe de ser um bom conhecedor, mas estou naquele momento de “encantamento”.

Entre outros nomes que sigo por aí (Twitter, Facebook, RSS, etc), estava de olho no Encontro Locaweb que aconteceu recentemente. Seguindo a própria, vi que uma das palestras foi intensamente retweetada por ter sido aplaudida de pé. O palestrante? Gil Giardelli. Enfim, ela foi ao ar ontem:

http://www.eventials.com/14elw/recorded/M2UzZTJkMzY2MzdiNTg2NTUxNWM1MzI3NWY1YjRhMzYjIzEwODU_3D

Depois de ver um pequeno trecho, fiz questão de assistir com atenção, na sala de casa, quase como um filme (só faltou a pipoca).

Para ter uma idéia da temperatura da palestra, vão algumas máximas que nela foram citadas:

“De cada emprego fechado pela ruptura digital, 3 novos se abrem”

“Diplomas tem prazo de validade. O dia seguinte em que você se forma”

“Antes você comprava uma TV e virava um consumidor. Hoje você compra um computador e vira um produtor”

“Globalmente nunca foi tão fácil perder um emprego, mas também nunca foi tão fácil criar um”

“Em 2014, 98% dos conteúdo da web serão em vídeos”

“Quem está desempregado é porque está procurando serviço no lugar errado”

“A matéria prima do século XXI são os sonhos”

“Não usem velhos mapas para descobrir novas terras”

Claro, fora exemplos em vídeo de ações de mídias sociais e sua ação sendo potencializada pela internet. Na minha opinião, sublime.  Pelo menos a mim, abriu bastante a mente. Agora, é colocar em prática!

Boa viagem!

Tecnologia, Web

Web – Coloque qualquer fonte em seu site, mesmo que o usuário não a tenha instalada

CSS
CSS

Desenvolvedores Web e Web Designers normalmente lidam com o fato de não poder usar qualquer tipo de fonte em seus layouts, já que não há a garantia que a fonte esteja instalada no computador que acessa o site, o que é necessário para sua renderização (ou seu usuário verá aquele texto lindo em Arial ou Verdana).

Ok, existem alguns truques para saber isso, mas nada saudáveis para a aplicação e muito menos recomendáveis.

A solução inevitável é produzir o texto com a fonte não padrão como uma imagem. Uma saída efetiva, mas não viável. Há porém uma solução desde o nascimento do CSS 2.0, mas que pouco vi ser utilizada.

Com a tag font-face, você pode declarar uma nova fonte que pode ser utilizado no seu CSS, e também, qual o arquivo de fonte respectivo. Por exemplo, o código abaixo declara a fonte Rugged Ride e aponta para um endereço do servidor onde ela está intalada:

@font-face {
    font-family: "Rugged Ride";
    src: url("http://www.tomasvasquez.com.br/fonts/Rugged Ride.ttf") format("truetype");
}

Depois dessa declaração, é possível fazer o seguinte:

<h1 style="font-family: 'Rugged Ride'">Texto com a Fonte Rugged Ride</h1>

Abaixo segue o HTML respectivo:

Texto com a Fonte Rugged Ride

Como é uma fonte pouco comum, existe uma grande chance de não tê-la instalada em seu computador, mas ela aparece corretamente. Lembrando que seu navegador precisa ter suporte a CSS 2.0, ou essa técnica não funcionará.

Claro que nem tudo são vantagens. Na primeira vez que o usuário acessar o site, ele vai precisar fazer o download da fonte. A depender de seu tamanho, o texto pode aparecer sem fonte até que ela seja baixada totalmente.

Agora é aproveitar essa vantagem de desenhar seus sites!

Abraços!

Desenvolvimento, Web

Web – Resolvendo conflitos no jQuery

O jQuery é uma biblioteca tão bacana que é usada intensamente por desenvolvedores e web designers.

Isso é ótimo por um lado, pois além de todas as vantagens, traz certa uniformidade para o desenvolvimento, e impede que um dos dois suje demais o código.

O lado péssimo é que, se desenvolvedores e designers não se conversam, o que é comum, cada um acaba por usar versões diferentes do jQuery, o que pode gerar conflitos. Algumas vezes nem dá para chegar em um acordo, pois a depender a implementação, a dependência gerada de uma determinada biblioteca pode tornar inevitável o uso de duas versões. O erro mais comum é passar a não encontrar determinadas funções, mesmo as padrões do jQuery, obtendo resultados como:

$(“#datepicker”).datepicker() is not a function

Isso acontece porque, com mais de uma versão do jQuery, cada uma tenta declarar a variável “$”. Na segunda tentativa de usá-la, o erro acima aparece. A solução? Veja o código abaixo:

var $j = jQuery.noConflict();
$j("#datepicker").datepicker();

O que isso faz? Cria um novo contexto para o jQuery, permitindo que você trabalhe com ele a partir desta nova variável. Uma explicação melhor do que o método noConflict() faz pode ser vista no link abaixo:

http://api.jquery.com/jQuery.noConflict/

Pronto! Seu jQuery voltará a funcionar.

Referências

http://stackoverflow.com/questions/1212696/jquery-ui-datepicker-datepicker-is-not-a-function