Agora existem duas opções de mecanismo de busca

Quem acompanhou os meus posts sabe que o verificador de ortografia pode ser adicionado como mecanismo de busca do navegador, porém agora ao tentar adicionar o Ortografa! você vai se deparar com duas opções: ortografia e conjugador. Veja na imagem abaixo.

Verificador de ortografia e conjugador como mecanismos de busca do navegador.

Sabendo disso, o processo de adição do mecanismo de busca continua o mesmo. Veja neste post mais detalhado.

Atualização 29/05/2011: Quem já havia adicionado o Ortografa! como mecanismo de busca anteriormente precisa remover a inscrição e refazer o processo do zero para poder visualizar as duas novas opções.

Internet Explorer 7/8 e Firefox

A primeira etapa do processo, seja qual for o seu navegador, é abrir o Ortografa!. Os próximos passos devem ser efetuados com a aba do Ortografa! ativa.

Os usuários de Internet Explorer 7 ou superior 8 devem clicar na pequena seta localizada exatamente no topo direito do navegador. Será aberta uma lista suspensa com a opção de busca “Ortografa!”. Esta opção torna o Ortografa! um mecanismo provisório de busca. Para adicioná-lo permanentemente na lista, é preciso clicar em “Adicionar Provedores de Pesquisa” (ainda na mesma lista suspensa) e assim escolher “Ortografa!”.

Ortografa! como mecanismo de busca no Internet Explorer.

Já os usuários de Firefox podem usar a seta à esquerda do campo de busca do navegador. No final da lista deve aparecer “Add ‘Ortografa!’” ou, em português, “Adicionar ‘Ortografa!’”.

Ortografa! como mecanismo de busca no Firefox.

Google Chrome, Safari, Internet Explorer 9 e demais navegadores

O Google Chrome e o Internet Explorer 9 também permitem adicionar mecanismos de busca personalizados, porém o passo a passo pode ser um pouco complicado para usuários leigos. Então, para facilitar a vida de todos, basta clicar no link abaixo para adicionar o Ortografa! nesses navegadores. O link também deve funcionar no Firefox e Internet Explorer 7/8.

Adicionar o Ortografa! como mecanismo de busca neste navegador.

Mais uma dica para o Google Chrome

Os mecanismos de busca do Chrome funcionam somente a partir de um atalho. Após adicionar um novo mecanismo de busca, você precisa definir um atalho para ele na caixa que é apresentada. Veja a imagem abaixo.

Alterando atalho do Ortografa! no Google Chrome.

Por padrão o Ortografa! aparece com o atalho ortografa.com.br, porém, para facilitar, sugiro que seja trocado apenas para ortografa.

Depois disso, fica muito fácil utilizar a busca do Ortografa! Basta digitar na barra de endereço ortografa + espaço + seu texto.

Ex.: ortografa idéia. Simples, não?

Ortografa! como mecanismo de busca no Google Chrome.

Atualização 22/03/2011: É uma pena, mas o Safari não permite adicionar mecanismos de busca. Uma das alternativas para sanar a deficiência é instalar uma extensão, como o PopSearch.

Atualização 01/04/2011: O comentário da Laah me fez descobrir que no Internet Explorer 9 não é possível adicionar o mecanismo de busca da mesma forma que no IE 7 e 8. O texto está atualizado.

Atualização 22/04/2011: A paula teve dificuldades em usar o mecanismo de busca no Ortografa! no Google Chrome, então eu atualizei o texto com um trecho explicando os passos.

Tela do novo Ortografa!

Principais mudanças

Além da grande mudança visual, o Ortografa! conta agora com mais um verificador. São sugestões que ajudam na correção de erros de grafia, como letras trocadas ou acentuação incorreta.

Uma mudança importante que precisou ser feita é a verificação através da URL, pois eu precisarei utilizar as rotas da raiz do projeto para outros fins. Então o que antes era verificado como:

http://www.ortografa.com.br/guarda-roupa

Agora deve ter um /c adicionado antes da palavra. O /c significa “correção” mesmo:

http://www.ortografa.com.br/c/guarda-roupa

E não é só isso!

Esse lançamento foi só o começo. Eu pretendo mudar drasticamente a forma como a ferramenta trabalha, trazendo muita interatividade para os usuários. Então, enquanto isso não acontece, gostaria muito de receber a opinião de vocês sobre o que foi feito até agora.

Abraço!

Este post não tem nenhuma relação comercial com a Hostnet. Quero apenas mostrar como foi bastante simples fazer do GitHub o repositório padrão dos meus deployments.

¹ – Para quem não sabe, o GitHub é um excelente hosting para compartilhamento de arquivos e monitoramento de projetos web. É baseado em Git, que talvez seja o melhor sistema de controle de versão da atualidade.

Foi tão simples que penso ser necessário apenas três passos.

1. Criando um projeto no GitHub

Crie um novo projeto através do seu menu de repositórios. Tendo o link de clone do projeto em mãos, será necessário seguir os passos que o GitHub descreve na primeira tela do seu projeto. Basicamente, é preciso instalar o Git na sua máquina (caso ele não esteja instalado) e configurar o seu ambiente².

² – O meu ambiente já tinha uma SSH Key configurada. Portanto, não me aterei a este detalhe. Veja o tutorial do próprio GitHub que explica como gerar a sua.

2. Configurando o ambiente

Crie a pasta do seu projeto (ou vá até o seu projeto existente) e digite os seguintes comandos:

1
2
3
4
5
6

$ git init
$ touch README
$ git add README
$ git commit -m 'first commit'
$ git remote add origin git@github.com:seu_usuario/seu_projeto.git
$ git push origin master

Seu branch master agora está pronto para receber os arquivos do projeto. No meu caso, o projeto já estava criado. Então, bastou que eu adicionasse todos os demais arquivos e fizesse um novo push.

3. Alterando a receita de deploy da Hostnet

Na página de tutoriais da Hostnet é possível encontrar um tutorial de como criar sua receita de deploy para Capistrano.

Para indicar que o GitHub era o novo repositório padrão, bastou incluir:

1
2
3
4
5
6
7
8
9

# ------------------------------------------------------------------------------
# Git config.
# ------------------------------------------------------------------------------
 
set :repository, "git@github.com:RamonPage/meu_novo_projeto.git"
set :scm, :git
set :scm_passphrase, ""
set :git_shallow_clone, 1
set :branch, "master"

Ou seja, basicamente indiquei o :scm como :git e adicionei alguns parâmetros que podem ser encontrados aqui. O :scm_passphrase não era necessário, então deixei em branco.

Após, comentei duas das linhas logo abaixo. No arquivo pede explicitamente para não alterar, mas era necessário :)

1
2
3
4
5
6

# ------------------------------------------------------------------------------
# Não alterar daqui pra baixo!
# ------------------------------------------------------------------------------
#set :scm, :none
set :deploy_via, :copy
#set :repository, File.expand_path( File.join(File.dirname(__FILE__), "/..") )

Linhas com o :scm e o :repository comentadas, já que o GitHub foi indicado como repositório padrão nas linhas acima.

Finalizando

1
2

$ cap deploy:setup
$ cap deploy

Se tudo der certo, seu projeto hospedado na Hostnet agora pode contar com o poder do Git :)

ATENÇÃO: Esta configuração ficou perfeita para o ambiente do meu projeto, porém não há garantias de que seja a adequada para o seu também. Faça as modificações por sua conta e risco. Não me responsabilizarei por elas. Boa sorte!

A sugestão é do Felipe Mesquita, que na época disse:

Acho que seria interessante que após fazermos uma consulta para ver como ficou uma palavra, tivessemos um link para a consulta. Assim, poderiamos passar esse link para qualquer pessoa.

Pois então, Felipe. Agora é possível. :)

Agora que a coisa ficou séria, eu mergulhei de vez neste projeto. Algumas novidades já estão no ar. Saiba quais.

Ordem do resultado

Descobri depois de alguns dias que o resultado das correções ficaria melhor aparencendo antes do formulário. Assim, quem tem uma resolução vertical (altura de tela) não muito ampla pode ver o resultado com mais facilidade

Tooltips para dicas!

Tooltips são os chamados “balões” que são muito usados em certos sites. Eles são apresentados quando passamos o mouse sobre determinada área. E no Ortografa! não é diferente. Passe o mouse sobre a correção marcada para ver uma dica. Adianto que, por enquanto, nem todas as correções possuem dica. Estou atualizando periodicamente.

Ah! O pessoal do iPhone pode ver a dica dando um “tapa” com o dedo na correção.

Agradecimentos

Quero agradecer a todos os e-mails que tenho recebido. Deixo aqui meu muito obrigado a todos que estão me ajudando neste projeto. Sugerindo, criticando e elogiando. A participação de vocês é muito importante.

Muitíssimo obrigado a todos! :D

O Ortografa! nasceu de uma súbita ideia quando o Acordo Ortográfico da Língua Portuguesa começou a ser adotado no início de 2009. A funcionalidade é simples: digite sua frase no campo acima que o sistema procurará trocar as palavras para a ortografia correta. Caso ele não consiga — certamente por haver alguma ressalva — ele mostrará uma dica para você se guiar nos seus textos.

O projeto

Ortografa! é um projeto simples que idealizei por volta do dia 02/01 deste ano. Queria desenvolver algo diferente que qualquer pessoa — principalmente as crianças — pudesse utilizar e entender o resultado, não sendo um serviço apenas para pessoas mais bem instruídas tecnologicamente.

O projeto é baseado em Expressões Regulares revestidas de jQuery. O serviço é leve e possui apenas 960kb de tamanho (arquivos, ícones e imagens).

Ah! Utilize o Ortografa! no seu iPhone também! :)

Considerações finais

Gostaria muito de receber as impressões sobre o projeto, principalmente em como melhorá-lo. Você professor, passe o Ortografa! aos seus alunos. Discuta com eles, difunda a colocação correta do nosso português.

No Brasil nós temos disto: só nos preocupamos com uma coisa quando ela começa a afetar a nós mesmos. Então, já que antes a grande massa não se importava tanto com a boa colocação do português a nova ortografia acabou chegando como um incentivo para a educação das pessoas (apesar de eu não concordar com ela).

Ontem, ao redigir o artigo sombra em imagem com DOM e CSS, percebi que o script de mostrar-esconder conteúdo poderia receber uma melhoria. Ao invés de procurar cada classe CSS que se referisse à outra língua (no meu caso o inglês), por que não utilizar o atributo lang inserido dentro das referidas tags?? Pois é, essa foi a sacada!

Novo código

1. var arrEls = new Array("h1","h2","h3","h4","h5","h6", "p","span","ul","ol","blockquote")
2.  
3. function getTextNodeByLangName(tag,eventNode) {
4.  
5. var els = document.getElementsByTagName(tag);
6.  
7. var idLink = 'showHideTextNode';
8. var messageShow = '[+] Show english content';
9. var messageHide = '[-] Hide english content';
10.  
11. var linkTextNode = document.getElementById(idLink);
12.  
13. for (i = 0; i < els.length; i++) {
14. var lang = els[i].getAttribute("lang");
15. if (lang == 'en') {
16. if (eventNode == 'hide') {
17. linkTextNode.innerHTML = messageShow;
18. linkTextNode.className = "link-show";
19. linkTextNode.onclick = function() {
20. for (j = 0; j < arrEls.length; j++) {
21. getTextNodeByLangName(arrEls[j],'show');
22. }
23. };
24. els[i].style.display = 'none';
25. } else if (eventNode == 'show') {
26. linkTextNode.innerHTML = messageHide;
27. linkTextNode.className = "link-hide";
28. linkTextNode.onclick = function() {
29. for (j = 0; j < arrEls.length; j++) {
30. getTextNodeByLangName(arrEls[j],'hide');
31. }
32. };
33. els[i].style.display = 'block';
34. }
35. }
36. }
37. }
38.  
39. function init_textNode() {
40. if (!document.getElementsByTagName) return
41. for (j = 0; j < arrEls.length; j++) {
42. getTextNodeByLangName(arrEls[j],'hide');
43. }
44. }
45.  
46. addLoadEvent(init_textNode);

A grande mudança está na localização do atributo lang, como a seguir:

1. var lang = els[i].getAttribute("lang");
2. if (lang == 'en') {

Agora, a classe que antes era responsável por esconder os conteúdos, agora ficou apenas com o trabalho de estilizar estas áreas. ;)

Inspirado pelos artigos do A List Apart, há um tempo venho pensando numa solução para criar sombras em imagens sem atrapalhar minha semântica, ou seja, com o mínimo de manipulação da marcação em torno da imagem. Depois de alguns estudos e testes, cheguei num resultado onde é necessário utilizar apenas uma classe para criar as sombras.

Inspired by two articles of A List Apart, I come thinking about a solution to create drop shadows on images without confuse my semantic, that is, with the minimum of manipulation in markup around the image. After some studies and tests, I arrived in a result where it’s necessary to use only one class to create the drop shadows.

Como funciona

How it works

O conceito da criação das sombras é o seguinte:

1. Adicionar um div, via DOM, em volta da imagem;
2. Setar este div com a mesma largura da imagem, para que a sombra fique proporcional à largura da mesma;
3. Inserir um background que simule uma sombra neste div via CSS;
4. Deslocar, levemente, a imagem para obter o tamanho de sombra desejado, também via CSS.
5. Pronto!

1. Insert a div, with DOM, around the image;
2. Set this div with the same width of the image;
3. Insert a shadow background on div with CSS;
4. Dislocate, lightly, the image to get the desired size of drop shadow, also with CSS.
5. That’s all!

Veja um exemplo:

Take a look:

1. <img src="../avatar-80x80.gif" class="shadow" />

Resulta em:

Results in:

Os códigos

The codes

Criando o container, via DOM, para receber a sombra da imagem.

1. setImageDropShadow = function (searchClass,tag) {
2.  
3. var browser=navigator.appName;
4. var agent = navigator.userAgent;
5. var b_version=navigator.appVersion;
6. var version=parseFloat(b_version);
7.  
8. var opera = false
9.  
10. if(agent.indexOf("Opera")!=-1){
11. var versionindex=agent.indexOf("Opera")+6;
12. if (parseInt(agent.charAt(versionindex))>=8)
13. opera = true;
14. }
15.  
16. var els = document.getElementsByTagName(tag);
17. var pattern = new RegExp("\\b"+searchClass+"\\b");
18. for (i = 0; i < els.length; i++) {
19. if ( pattern.test(els[i].className) ) {
20. var NewDiv = document.createElement('div');
21. NewDiv.className = "shadow-container";
22.  
23. if (((browser=="Microsoft Internet Explorer") && (version>=4) && (!agent.indexOf("MSIE 7") != -1)) || (opera)) { // Fix IE 6 and Opera width problem
24. NewDiv.style.width = (els[i].width - 4).toString() + "px";
25. } else {
26. NewDiv.style.width = (6 + els[i].width).toString() + "px";
27. }
28.  
29. var parentDiv = els[i].parentNode;
30. parentDiv.insertBefore(NewDiv, els[i]);
31. NewDiv.appendChild(els[i]);
32. }
33. }
34. }
35.  
36. window.onload = function() {
37. setImageDropShadow('shadow','img');
38. };

Estilizando a sombra.

1. .shadow-container {
2. position: relative;
3. background: url(bg-small-shadow.png);
4. }
5.  
6. .shadow-container img {
7. position: relative;
8. display: block;
9. top: -3px;
10. left: -3px;
11. margin: 0;
12. padding: 2px;
13. background: #fff;
14. border: 1px solid #e1e1e1;
15. }

Para criar a sombra, utilizei uma imagem de 20x20px, em tom de cinza claro (#d8d8d8) e 50% de transparência. A imagem pode ser vista aqui!

Get the drop shadow background here!

Detalhe importante! A parte em negrito, a seguir, é a que determina a distância da sombra em relação à imagem. Quanto menores os valores inseridos para top e left, maior será a distância da sombra em relação à imagem.

Important detail! The lines in boldface, below, are that determine the distance between the image and the drop shadow. Change the values for better use.

1. .shadow-container img {
2. position: relative;
3. display: block;
4. top: -3px;
5. left: -3px;
6. margin: 0;
7. padding: 2px;
8. background: #fff;
9. border: 1px solid #e1e1e1;
10. }

Tudo o que você precisa para usar sombras em suas imagens

All you need to work with it

• image-drop-shadow.js
• image-drop-shadow.css
• bg-small-shadow.png

Esta solução foi testada no Opera 9.x, Firefox 1.5.0.7, IE 6.0, IE 7.0 RC1 e Safari 2.0.4.

Reportes de erros, bugs, e, pricipalmente, sugestões são muito bem-vindos. ;)

Um dos requisitos que declarei para o meu site foi a possibilidade de inserir conteúdo em outras línguas para as minhas postagens, em especial em inglês. Depois de alguns estudos cheguei à estrutura que desejava e desenvolvi um script em DOM para implementá-la. Como este não era um requisito de prioridade alta, deixei sua implementação para uma data futura. Eis que esta data chegou!

O conceito do script é simples: defini uma classe para todos os elementos (tags) que eu gostaria de inserir em inglês e fiz uma função em javascript para localizar todas as instâncias desta e escondê-la. Clicando em um link específico, as áreas são apresentadas. Clicando novamente no mesmo link, as áreas são escondidas.

Exemplo escondido:

This is an example of show-hide english content on <p> element

• This is a list with english content
• Line example
• Line example

This is an <blockquote> element with english content.

Definindo os recursos da solução

O primeiro passo foi definir um link para esconder e mostrar as áreas. Inseri um ID para este link para poder trabalhá-lo via script.

1. <a href="#" id="showHideTextNode"></a>


Não inseri nenhum conteúdo no link para poder manipulá-lo via script, trocando o texto, via innerHTML, de acordo com o clique efetuado ([+] Show english content para mostrar o conteúdo e [-] Hide english content para esconder o conteúdo).

Após, apenas defini uma classe para cada elemento que tivesse conteúdo em inglês. A classe foi chamada de lang-eng.

Manipulando a classe lang-eng via javascript

O primeiro passo foi definir um Array para todos os elementos que poderiam receber a classe lang-eng.

1. var arrEls = new Array(“h1″,”h2″,”h3″,”h4″,”h5″,”h6″,”p”,”span”,”ul”,”blockquote”)

Após, foi preciso apenas uma função para localizar a classe lang-eng e efetuar as alterações nas páginas em que ela foi instanciada. Utilizei como base o script getElementByClass do Dustin Diaz. A partir daí, otimizei o script para chegar ao resultado que gostaria.

1. function getTextNodeByClassName(searchClass,tag,eventNode) {
2.  
3. var els = document.getElementsByTagName(tag);
4. var pattern = new RegExp("\\b"+searchClass+"\\b");
5.  
6. var idLink = 'showHideTextNode';
7. var messageShow = '[+] Show english content';
8. var messageHide = '[-] Hide english content';
9.  
10. var linkTextNode = document.getElementById(idLink);
11.  
12. for (i = 0; i < els.length; i++) {
13. if ( pattern.test(els[i].className) ) {
14. if (eventNode == 'hide') {
15. linkTextNode.innerHTML = messageShow;
16. linkTextNode.className = "link-show";
17. linkTextNode.onclick = function() {
18. for (j = 0; j < arrEls.length; j++) {
19. getTextNodeByClassName('lang-eng',arrEls[j],'show');
20. }
21. };
22. els[i].style.display = 'none';
23. } else if (eventNode == 'show') {
24. linkTextNode.innerHTML = messageHide;
25. linkTextNode.className = "link-hide";
26. linkTextNode.onclick = function() {
27. for (j = 0; j < arrEls.length; j++) {
28. getTextNodeByClassName('lang-eng',arrEls[j],'hide');
29. }
30. };
31. els[i].style.display = 'block';
32. }
33. }
34. }
35. }

Por fim, inseri uma função para esconder todos os elementos declarados com a classe lang-eng. Esta função é inicializada por um addLoadEvent.

1. function init_langEngNode() {
2. if (!document.getElementsByTagName) return
3. for (j = 0; j < arrEls.length; j++) {
4. getTextNodeByClassName('lang-eng',arrEls[j],'hide');
5. }
6. }
7.  
8. add_event(init_langEngNode);

Como tudo funciona

Pegando todas as tags inseridas como parâmetro e selecionando apenas a classe desejada para estas tags. Numa tag com class="lang-eng alignleft", por exemplo, apenas a lang-left seria selecionada.

1. function getTextNodeByClassName(searchClass,tag,eventNode) {
2.  
3. var els = document.getElementsByTagName(tag);
4. var pattern = new RegExp("\\b"+searchClass+"\\b");

Eu poderia setar "*" como tag para pegar todas as tags na página (vide linha "var els = document.getElementsByTagName(tag);"), inutilizando a necessidade de criação do Array de elementos, porém esta estrutura tiraria o controle que eu teria sobre os elementos que eu efetivamente gostaria de esconder.

O bom da história é que praticamente toda a aplicabilidade da solução está no script, portanto qualquer alteração futura fica totalmente mais prática. Minhas intenções estavam totalmente voltadas na manipulação do mínimo possível de marcação e trabalhar diretamente no javascript.

Continuando...

Definindo o ID para o link de manipulação e suas mensagens.

1. var idLink = 'showHideTextNode';
2. var messageShow = '[+] Show english content';
3. var messageHide = '[-] Hide english content';

Pegando o ID inserido no link da página.

1. var linkTextNode = document.getElementById(idLink);

Para os elementos encontrados, testar se cada um deles tem a classe escolhida como parâmetro.

1. for (i = 0; i < els.length; i++) {
2. if ( pattern.test(els[i].className) ) {

Foram definidos dois parâmetros para manipular as tags: show para mostrar os conteúdos e hide para escondê-los. Uma estrutura de if foi criada para testar em qual status a página está. Caso o evento seja hide o link de manipulação recebe a mensagem [+] Show english content. Caso seja show, recebe a mensagem [-] Hide english content.

Para o evento onclick do link é inserida uma função para voltar à mesma função e mostrar ou esconder o conteúdo. A forma de esconder é simples: o elemento encontrado recebe como atributo display o valor "none" (els[i].style.display = 'none';). Para mostrar, o atributo display recebe o valor "block" (els[i].style.display = 'block';).

1. if (eventNode == 'hide') {
2. linkTextNode.innerHTML = messageShow;
3. linkTextNode.className = "link-show";
4. linkTextNode.onclick = function() {
5. for (j = 0; j < arrEls.length; j++) {
6. getTextNodeByClassName('lang-eng',arrEls[j],'show');
7. }
8. };
9. els[i].style.display = 'none';
10. } else if (eventNode == 'show') {
11. linkTextNode.innerHTML = messageHide;
12. linkTextNode.className = "link-hide";
13. linkTextNode.onclick = function() {
14. for (j = 0; j < arrEls.length; j++) {
15. getTextNodeByClassName('lang-eng',arrEls[j],'hide');
16. }
17. };
18. els[i].style.display = 'block';
19. }
20. }
21. }
22. }

O último passo foi estilizar a classe lang-eng para separar as áreas apresentadas (português/ inglês), senão ficaria tudo uma coisa só, visualmente.

Esta solução pode ser utilizada em vários outros contextos. Basta ter criatividade. ;)

Atualização 2006-11-06: Versão 2.0 concluída, ver: Mostrar-esconder conteúdo via DOM V.2