Transforme o seu browser num notepad

02 Fev 2013 · High Tech 17 Comentários

Cada vez mais passamos o tempo a usar os nossos browsers e a fazer deles as nossas ferramentas principais de trabalho. Podemos usá-los para aceder a outras máquinas, para aceder a suites de produtividades, para ver televisão ou até, na sua forma mais básica, para navegar na Internet e aceder a tudo o que ela nos pode oferecer.

Com esta realidade cada vez mais enraizada, algumas pessoas tentam trazer para esta ferramenta tudo o que têm no computador e que necessitam de ter no seu browser.

Foi precisamente isso que fez Jose Jesus Perez Aguinaga, por necessitar de ter uma forma de tomar pequenas notas e pensamentos. Tornou o seu browser numa ferramenta para tomar notas.

A motivação de Jose Jesus Perez Aguinaga era muito simples. Precisava de um local ou de uma forma onde colocar todos os seus pensamentos ou notas, sem que tivesse para isso de sair do seu ambiente natural, o browser.

Claro que dispensava todos os serviços onde é necessário o registo e a abertura de uma página específica. Queria a forma mais simples e rápida de tomar as suas notas e de despejar num folha branca todas as suas ideias.

A solução estava mesmo à frente dos seus olhos. O browser, pelo menos os mais modernos, permitem que coloquemos na barra de endereço elementos html e que estes sejam de imediato interpretados.

Esta capacidade advém do suporte para data URI, que está presente na maioria dos brwosers mais recentes e que devem ter instalados.

Percebida a forma de fazer esse seu bloco de notas faltava apenas o endereço certo, o que também não foi nada difícil. Com uma simples linha de código chegou ao seu objectivo.

O código que Jose Jesus Perez Aguinaga usa agora para o seu bloco de notas virtual pode ser encontrado abaixo:

data:text/html, &lt;html contenteditable&gt;

Basta que o coloquem na barra de endereço do vosso browser e vão de imediato começar a poder escrever e a tomar as vossas notas.

Claro que podem pretender guardar as vossas notas e isso é possível. Mas a melhor parte é que podem voltar mais tarde abrir esses mesmos ficheiros que guardaram e continuar a editar as vossas notas.

Ao publicar esta informação no seu blogue, depressa começaram a chegar comentários com melhorias e alterações a esta sua ideia minimalista.

Algumas são muito interessantes e revelam bastante criatividade. Conseguem tirar de uma simples linha, a ser colada na barra de endereço, capacidades que não nos pareceriam óbvias para o nosso browser.

Deixamos aqui apenas um exemplo do que foi apresentado nos comentários:

[pre] data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><style type="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }</style><script >window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true; clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head> <body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;"> [/pre]

Colem no vosso browser esta linha e vejam, à medida que vão escrevendo, a cor do fundo do browser a ser alterada.

Algumas ideias tornaram-se mais práticas e estão já disponíveis na Internet para todos usarem. A página a5.gg permite que coloquem os vossos texto e ao retornarem, mais tarde e noutro separador, estes estejam disponíveis tal como os deixaram, sem que tenham de registar qualquer serviço ou deixar esses textos num qualquer servidor. Faz uso da cache local e funciona em modo offline.

Alguma ideia onde se poderá usar esta característica? E como alterariam este simples código?

Homepage: Jose Jesus Perez Aguinaga

Este artigo tem mais de um ano

Acompanhe o Pplware no Google Notícias

Propor Revisão Proponha uma correção, faça uma sugestão

Autor: Pedro Simões

Tags: apontamentos bloco de notas browser código HTML5 Notas truque

Comentários17

Dogzilla says:

3 de Fevereiro de 2013 às 00:46

Compreendo que possa dar jeito, mas não me vejo a utilizar esta dica. Isto porque (e no meu caso) é igualmente simples clicar na tecla do Windows, escrever [i]notepad[/i] e alternar entre o browser e o Bloco de Notas com o Alt+Tab.

Responder
YouAndMe says:

3 de Fevereiro de 2013 às 01:11

Está engraçado este:

data:text/html;charset=utf-8, TextEditor body { background: -webkit-linear-gradient(#f0f0f0, #fff); padding: 3%; height: 94%; } .paper { font: normal 12px/1.5 “Lucida Grande”, arial, sans-serif; width: 50%; height: 80%; margin: 0 auto; padding: 6px 5px 4px 42px; position: relative; color: #444; line-height: 20px; border: 1px solid #d2d2d2; background: #fff; background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px; background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; -webkit-background-size: 100% 20px; -moz-background-size: 100% 20px; -ms-background-size: 100% 20px; -o-background-size: 100% 20px; background-size: 100% 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07); box-shadow: 0 1px 2px rgba(0,0,0,0.07); } .paper::before { content: ”; position: absolute; width: 4px; top: 0; left: 30px; bottom: 0; border: 1px solid; border-color: transparent #efe4e4; } textarea { display: block; width:94%; margin:0 auto; padding:3.8% 3%; border: none; outline: none; height: 94%; background: transparent; line-height: 20px; }”>Text Editor

Responder
YouAndMe says:

3 de Fevereiro de 2013 às 01:22

O codigo é este, apaguem o outro comentário.
data:text/html;charset=utf-8, TextEditor

body {
background: -webkit-linear-gradient(#f0f0f0, #fff);
padding: 3%;
height: 94%;

}

.paper {
font: normal 12px/1.5 “Lucida Grande”, arial, sans-serif;
width: 50%;
height: 80%;
margin: 0 auto;
padding: 6px 5px 4px 42px;
position: relative;
color: #444;
line-height: 20px;
border: 1px solid #d2d2d2;
background: #fff;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
-webkit-background-size: 100% 20px;
-moz-background-size: 100% 20px;
-ms-background-size: 100% 20px;
-o-background-size: 100% 20px;
background-size: 100% 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}

.paper::before {
content: ”;
position: absolute;
width: 4px;
top: 0;
left: 30px;
bottom: 0;
border: 1px solid;
border-color: transparent #efe4e4;
}

textarea {
display: block;
width:94%;
margin:0 auto;
padding:3.8% 3%;
border: none;
outline: none;
height: 94%;
background: transparent;
line-height: 20px;
}”>Text Editor

Responder
Roke says:

3 de Fevereiro de 2013 às 09:39

Eu tenho uma melhor.

Abrir um documento google doc; escrever como título “task”. Fichar a tab “task” e prontos!

Estará sempre pronta quando abrirem o navegador e guarda automaticamente.

Eu ainda pus a página de amarelo e fiz duas colunas onde uma são coisas importantes e outras coisas menos importantes.

Responder
- Alexandre says:
  
  3 de Fevereiro de 2013 às 20:12
  
  Obrigado pela dica Roke.
  
  Responder
  - Roke says:
    
    3 de Fevereiro de 2013 às 20:24
    
    De nada. É para isso os blogs… Dar dicas…
    
    Já agora há um erro na minha resposta.
    
    Fixar em vez de fichar… (enfim…)
    
    Responder
Tiago says:

3 de Fevereiro de 2013 às 12:53

O opera já tem bloco de notas incorporado há muitos anos, aliás é uma das funções pela ainda me faz usar o opera. É mesmo prático, em qualquer linha de texto podemos fazer com o direito do rato “copiar para nota”, e além de apontar a notar, ainda memoriza o site da qual foi tirada. Permite ainda inserir a nota em qualquer campo que se possa inserir texto em qualquer site, o que se torna muito prático para inserir por exemplo um email ou qualquer outra informação, basta clicar na caixa e carregar na seta para baixo, é mesmo prático. E esta sempre acessível, barra de favoritos etc. Admira-me como outros browsers ainda não “copiaram” esta função do Opera como já fizeram com muitas outras!

Responder
- kendimen says:
  
  16 de Julho de 2013 às 18:03
  
  Também uso o bloco de notas do Opera! Até acho estranho ter no artigo o logótipo do Opera e não referirem isso!
  Acrescento ainda ao que o Tiago escreveu, o que o Opera Link sincroniza automaticamente as notas para estarem disponíveis em todas as máquinas onde se tenha o Opera instalado!!! 😉
  
  Responder
- Rio Dande says:
  
  5 de Maio de 2014 às 08:46
  
  Tiago, as versões mais recentes do Opera não disponibilizam o Bloco de Notas. Erro de download ou má atualização do próprio Opera?
  
  Responder
Pena says:

3 de Fevereiro de 2013 às 23:56

Sem efeito no IE9

Responder
- Alex says:
  
  4 de Fevereiro de 2013 às 12:26
  
  No título diz “browsers”. O IE9 não é um browser. É um software que serve apenas para descarregar o browser ou browsers favoritos.
  
  Responder
  - Frederico Santos says:
    
    5 de Fevereiro de 2013 às 20:28
    
    Não é um browser para ti… eu uso-o diariamente.
    
    Responder
    - Alex says:
      
      6 de Fevereiro de 2013 às 09:58
      
      Sim, eu compreendo. A minha avó e a tia dela também.
      
      Responder
    - RRS says:
      
      6 de Fevereiro de 2013 às 10:03
      
      Como consegues? Não sentes falta de um q não bloqueie, não desformate paginas, que tenha funcionalidades, etc..?
      
      Responder
João Tavares says:

16 de Julho de 2013 às 15:21

Programação = Seca! Hate it!

Responder
- Ruaben says:
  
  16 de Julho de 2013 às 20:58
  
  poe o teu pc no lixo então, tudo lá foi programado
  
  Responder
CC says:

16 de Julho de 2013 às 15:43

Eu uso o http://www.a5.gg sempre que quero copiar links de interesse e coisas assim

Responder

Deixe um comentário Cancelar Resposta

Aviso: Todo e qualquer texto publicado na internet através deste sistema não reflete, necessariamente, a opinião deste site ou do(s) seu(s) autor(es). Os comentários publicados através deste sistema são de exclusiva e integral responsabilidade e autoria dos leitores que dele fizerem uso. A administração deste site reserva-se, desde já, no direito de excluir comentários e textos que julgar ofensivos, difamatórios, caluniosos, preconceituosos ou de alguma forma prejudiciais a terceiros. Textos de caráter promocional ou inseridos no sistema sem a devida identificação do seu autor (nome completo e endereço válido de email) também poderão ser excluídos.