TidBits

Com os pseudo-elementos de CSS first-letter e first-line, fica bem fácil customizar o seu texto, tornando mais bonito (claro, também precisa de um pouco de bom gosto – mas pra isso não existe tutorial). Leia mais »

Assim com o exemplo de :first-child e :last-child, para usar min-height e max-height é necessário css condicional.

Na verdade é bem simples, vamos supor que temos uma div que tem que ter uma altura mínima pra não “quebrar o layout”

<div class="post">
	Lorem Ipsum Fusce rutrum nibh.
</div>

E agora o CSS para ficar no mínimo com 200px por exemplo:

div.post {
    height: expression(this.scrollHeight <= "200" ? "200" : "auto");
    min-height: 200px; /* para ff, safari, chrome, etc */
}

E se fosse max-height seria assim :

div.post {
    height: expression(this.scrollHeight >= "200" ? "200" : "auto");
    max-height: 200px; /* para ff, safari, chrome, etc */
}

Isso resolve também alguns problemas com float e position absolute onde a div não calcula automaticamente a altura do elemento com float dentro da div.

Há uns posts atrás, quando o Danilo fez aqui no blog o resumo do Google Search Masters, ele falou sobre o Google Custom Engine, que é uma ferramenta que permite adicionar a busca do Google, de maneira bastante customizável ao seu site, podendo restringir a busca ao seu conteúdo, a sites relacionados ao seu tema de interesse ou mesmo a toda a web.

O Sikbox faz mais ou menos isso, só que com um diferencial: ele utiliza como base um recurso de Jquery e a API de busca do Yahoo! para oferecer uma busca onde os resultados aparecem estilo “autocomplete” abaixo da barrinha de busca. Para implementar isso no seu blog ou site, você não vai precisar digitar uma linha de código.

Só é necessário entrar em sikbox.com, colocar o endereço de seu site/blog, e apertar “Get the code”. Depois é só customizar o CSS (que pode ser um dos oferecidos pelo site, ou o CSS próprio), e definir quantos resultados para busca.

Aí é só copiar a linha de código gerada, e colar onde você quiser no código do seu site. Bem simples, funcional, e rápido de instalar.

A locaweb, no seu canal de web cast (locawebcast) disponibilizou uma série de vídeos, todos com boa resolução (1024×768) com duração de uma hora cada um. Eu assisti do WebCast sobre Ruby On Rails e sobre Scrum, gostei bastante.

ASP.NET MVC – Carlos Mendonça, engenheiro de tecnologia, apresenta este novo framework da Microsoft que alia os benefícios das tecnologias modernas de desenvolvimento para a web com a robustez e flexibilidade da plataforma .NET.

Windows 2008 – Davi Iglesias, analista de produtos, falará sobre os principais diferenciais deste novo Sistema Operacional.

Segurança – Melhores práticas na Web – André Muraro, gerente de infra-estrutura, dá dicas sobre como evitar as principais ameaças na WEB.

Rails on Locaweb – Fabio Akita, gerente de produtos Rails, mostrará na prática como utilizar o RAILS na Locaweb.

Email Marketing – Conquistando e Fidelizando Clientes – Davi Iglesias, analista de produtos, mostra todo o poder deste serviço que transforma o seu mailing numa base confiável e transforme simles mensagens em oportunidades. Entenda e aumente o resultado de suas campanhas Mail Marketing.

Apresentando Ruby on Rails – Parte 2 – Nesta 2ª parte, Akita mostra na prática e em detalhes como escrever aplicações web com Rails.

Apresentando Ruby on Rails – Parte 1 – Fabio Akita, gerente de produtos Rails, apresenta a 1ª parte deste assunto e mostra na prática as vantagens deste poderoso framework que está simplificando e agilizando o desenvolvimento web.

Programação eXtrema -
Daniel Cukier, líder de desenvolvimento da equipe Telecom, fala sobre os principais benefícios desta metodologia nas equipes de desenvolvimento de software.

Metodologias Ágeis e Scrum – Elson Barbosa, gerente de projetos, fala sobre a utilização de Metodologias Ágeis e Scrum no desenvolvimento de Software.

$eja um Provedor de Ho$pedagem! – Bruno Henrique, orientador do suporte, mostra na prática como é fácil se tornar um provedor de hospedagem através deste poderoso serviço na Locaweb.

Simplificando o Comércio Eletrônico – Reinaldo Santos, gerente de produtos de E-commerce, desmistifica o tema mostrando na prática as principais vantagens e facilidades deste serviço na Locaweb. Veja como é simples ter o seu negócio na Web.

PABX Virtual – Dov Bigio, gerente de produtos Telecom, falará sobre as principais vantagens e benefícios deste serviço que vai muito além da simples redução de custos nas ligações telefônicas.

Todos os vídeos estão disponíveis no site da locawebcast e também estão disponíveis os próximos temas que vão virar webcast. É possível participar ao vivo.

A Net Aplications disponibiliza mensalmente relatórios com estatísticas (ou curiosidades) para todos nós, desenvolvedores ou até mesmo clientes.

Os relatórios são muitos, sempre em participação, sendo assim. Qual a participação de cada navegador, de cada sistema operacional, cada buscador, resoluções de tela, etc.

Os dados do mundo todo, sendo assim, se fosse só pro Brasil, teria diferenças. O IE6 é muito mais usado no Brasil do que na média mundial, assim como o Google.

Confira os gráficos:

Navegadores

Apesar da participação do Firefox e Safari estarem crescendo, o IE ainda é a grande massa da Internet.

Navegadores por versão

Infelizmente 24,6% das pessoas ainda usam o IE6, e nós desenvolvedores de interface vamos ter que continuar a usar velhos truques durante um bom tempo.

Sistemas Operacionais

Mac vem subindo bastante, mas o que chama a atenção é que usuários de Iphone que logo logo devem ultrapassar usuários de Linux.

Buscadores

Essa é uma pesquisa que no Brasil a realidade é outra, o Google atinge 98% aqui.

Resoluções de Tela

Aqui o que chama atenção, é que o 800×600 vem crescendo, porque? Usuários de Iphone, e mini notebooks (eee-pc).

Todos os dados são referentes ao último mês (Setembro de 2008).

Essa é uma galeria é Hoverbox Image Gallery, desenvolvida pelo Nathan Smith, e é uma idéia muito legal para se fazer uma galeria de fotos sem usar Flash ou Javascript.

É bem simples de fazer e funciona em todos os browsers. Veja o exemplo:

Para fazer igual, é só utilizar a mesma estrutura do html:

<div id="galeria">
<ul class="hoverbook>
<li><img src="#" alt="#" /><img src="#" alt="#" class="preview" /></a></li>
</ul>
</div>

A mesma imagem precisa ser invocada duas vezes (uma sem class definido, e outra com a class “preview” e para cada imagem da galeria, é só acrescentar um item li na lista.

Já o CSS, vai ficar assim:

#galeria{width:450px;}
.hoverbox{cursor:default; list-style:none;}
.hoverbox a{cursor:default; position:relative;}
.hoverbox a .preview{display:none;}
.hoverbox a:hover{font-size:100%; z-index:1;}
.hoverbox a:hover .preview{display:block; position:absolute; top:-33px; left:-45px; z-index:1;}
.hoverbox img{background:#fff; border-color:#aaa #ccc #ddd #bbb; border-style:solid; border-width:1px; color:inherit; padding:2px; vertical-align:top; width:80px; height:50px;}
.hoverbox li{background:#eee; border-color:#ddd #bbb #aaa #ccc; border-style:solid; border-width:1px; color:inherit; display:inline; float:left; margin:3px; padding:5px; position:static;}
.hoverbox .preview {border-color:#000; width:200px; height:150px;}

Em #galeria, é só definir a largura da galeria, enquanto o tamanho do thumb você configura em .hoverbox img . A largura da imagem quando aberta, fica na propriedade .hoverbox .preview mas a dica é se for aumentar o tamanho do preview, não se esqueça de aumentar o padding / margin entre os thumbs, do contrário a imagem ampliada vai obstruir o acesso à outras imagens da galeria.

Clique aqui para baixar o exemplo da Hoverbook Image Gallery.