javascript – Hom Digitalis

Qual a sua velocidade de acesso à Internet? O Chrome pode responder

Publicado em 18/02/201917/02/2020 por homdigitalis

A Google tem no Chrome uma das suas maiores montras de tecnologia. Tudo o que seja relacionado com a Internet está neste browser e disponível a todos.

Uma das mais recentes novidades que surgiram, de forma muito discreta, foi a possibilidade de ser medida a velocidade de acesso à Internet. Veja como pode ter acesso a essa informação.

Para muitos utilizadores é importante saberem a sua velocidade de acesso à Internet. Por norma esta informação surge com o recurso a apps ou a serviços externos, mas a Google resolveu embeber no Chrome a capacidade de medir e apresentar esta informação.

Está acessível através de uma API que os sites podem consultar, mas qualquer utilizador pode ter acesso a ela, de 2 formas simples e rápidas. Vamos ver como pode saber a sua velocidade de acesso à Internet usando o browser da Google.

A velocidade de acesso à Internet pela consola do Chrome

A primeira forma é das duas a mais localizada no Chrome. Recorrendo à consola do browser tem acesso a ela. Basta por isso abrir a consola do Chrome, recorrendo à tecla F12 no Windows ou ao menu e depois a Mais ferramentas -> Ferramentas de programador.

Ai dentro só precisam de escolher o separador Consola e colocar o comando navigator.connection, seguido de um enter. De imediato é apresentada a informação pretendida.

A velocidade de acesso à Internet por uma API do Chrome

Se preferirem, e porque esta informação está nativamente presente no browser, só precisam de aceder a um site que chame a API do Chrome. A título de exemplo fica o site da Google no GitHub.

Na página Network Information API Sample podem ver e registar o histórico da velocidade de acesso à Internet. Presente está também informação sobre como podem implementar esta API num serviço. Devem ter o Chrome 65 para a poderem usar.

Como podem ver, o Chrome consegue ser uma verdadeira caixa de surpresas e dar ao utilizador ferramentas que normalmente teria de aceder através de serviços externos ou apps. Aqui, para além da informação da velocidade de acesso, têm ainda o tipo de ligação e o RTT.

Want to learn JavaScript in 2015?

Publicado em 18/09/201518/09/2015 por homdigitalis

Uma excelente história de Vincent O que durante um ano, focou-se a aprender Javascript, e hoje trabalha nessa área.

Para contar esta história, Vincent utilizou o serviço Medium, website onde podemos contar as nossas histórias num layout simples e amigável.

This is a walk-through of the steps I personally took in a single year, to begin learning JavaScript. My goal was to be able to get a job…

Fonte: Want to learn JavaScript in 2015? — Medium

Dart – A alternativa ao Javascript, criada pela Google

Publicado em 12/10/201111/09/2015 por homdigitalis

Dart – A alternativa ao Javascript, criada pela Google

Criado por Pedro Pinto em 11 de Outubro de 2011 | 21 comentários

O Javascript é uma das linguagens de scripting mais usadas na Internet, uma vez que consegue oferecer a interactividade que é necessária na visualização de conteúdos WEB, pois é processado pelo browser do utilizador. Além disto, é uma linguagem orientada a eventos o que possibilita associar determinado código a uma determinada acção do cliente.

Recentemente a gigante Google apresentou uma linguagem alternativa ao JavaScript e à qual deu nome Dart. Será que a moda vai pegar?

Muito se tinha especulado sobre o nome da linguagem criada pela Google, em alternativa ao Javascript. Em Outubro de 2010, um documento interno da própria empresa anunciava que a linguagem se iria chamar Dash (ver aqui). No entanto, a Google anunciou recentemente que tinha sido alterado para Dart – Designed as an object-oriented.

Dart é uma linguagem de programação flexível e estruturada e bastante similar ao Java ou ao C++, com muitas vantagens adquiridas das linguagens de scripting como é o caso do javascript.

Segundo Lars Bak da Google, Dart é uma linguagem class-based, direccionada para o desenvolvimento de aplicações Web e com suporte para projectos de larga escala. É simples, eficiente, escalável e poderosa.

“Developed with the goals of simplicity, efficiency, and scalability, the Dart language combines powerful new language features with familiar language constructs into a clear, readable syntax.”

Além da simplicidade ao nível da estrutura de programação da aplicações, a linguagem Dart é também simples ao nível de debug. A linguagem permite que o programador adicione variáveis sem a necessidade de definir o tipo de dado e resolve alguns problemas de escalabilidade que normalmente acontecem quando se usa Javascript.

Actualmente nenhum browser tem suporte para esta linguagem, mas está previsto o suporte para a mesma no Chrome. O código pode ser executado sobre uma máquina virtual Dart nativa ou então sobre o próprio motor javascript (recorrendo a um compilador que consegue traduzir o código Dart em Javascript).

A Google disponibilizou também um IDE de programação e alguns scripts de exemplo para que os programadores comecem a desenvolver algumas aplicações com base na sua linguagem de programação.

Download: Dart – IDE

Homepage: Dart – Googles Programming Language

PHP e Javascript – Parte III

Publicado em 18/06/201112/09/2015 por homdigitalis

PHP e Javascript – Parte III

Criado por Pedro Pinto em 16 de Junho de 2011 | 22 comentários

PHP e Javascript Parte III

por Pedro Peixoto

Como vimos nos dois últimos artigos, o Javascript vem trazer às nossas aplicações WEB a interacção e flexibilidade que uma linguagem server-side como o PHP não consegue oferecer. Nesse sentido, decidimos mudar o nome da rubrica “PHP é a quinta-feira” para “Programação WEB é à Quinta-feira! “. Esta semana continuamos a explorar esta linguagem que se tem assumido como a principal linguagem WEB, para além de aumentar um pouco o grau de complexidade da nossa programação vamos também perceber como fazer a integração do JS com o PHP.

No último artigo aprendemos o que são eventos, funções e os conceitos básicos da programação com JS. O Javascript ao contrário do que muita gente pensa, é uma linguagem muito completa, para além das funções básicas que todas as linguagens de programação “tem” de oferecer, existem funções para tratamento de strings, cálculos matemáticos, arrays, entre muitas outras. Além disso, existem inúmeras bibliotecas que facilitam e expandem o uso do Javascript. Não há limites, é dar asas à imaginação, a interacção e personalização podem ser levadas ao extremo!

Hoje vamos fazer um pequeno exemplo prático onde usaremos eventos, funções, estruturas de controlo, variáveis, inputs e outputs. Será um pouco de tudo o que é necessário para qualquer funcionalidade JS. Vamos então aprender a apresentar conteúdo diferente nos nossos formulários após uma escolha do utilizador.

Antes de mais vamos criar a página HTML com os componentes necessários.

<html>
	<head>
	</head>
	<body
		Que sistema usa?</br>
		<select>
			<option value="1">iPhone</option>
			<option value="2">Android</option>
			<option value="3">Windows Mobile</option>
			<option value="4">Outro</option>
		</select>
		<span id="comentario"></span>
	</body>
</html>

Colocámos um elemento <select> que permite ao utilizador efectuar uma escolha entre as diferentes opções, de seguida inserimos um <span> que vai permitir apresentar conteúdo de acordo com a escolha do utilizador. Falta agora o código Javascript. A estratégia é usar o evento onChange (accionado quando o utilizador altera o valor do select) para chamar uma função passando o valor seleccionado. Dentro da função colocaremos um switch/case, que dependendo da escolha coloca conteúdo diferente no <span>.

<html>
	<head>
		
			function apresentaConteudo(escolha)
			{
				var elemento=document.getElementById('comentario');
				switch(escolha)
				{   case '1': elemento.innerHTML='Viva a Apple!'; break;
					case '2': elemento.innerHTML='Bem-vindo google fan!'; break;
					case '3': elemento.innerHTML='Wiiinnnndddowwwssss!!!'; break;
					case '4': elemento.innerHTML='Qual?'; break;   }
			}
		
	</head>
	<body
		Que sistema usa?</br>
		<select onChange="apresentaConteudo(this.value)" id=”dispositivo”>
			<option value="1">iPhone</option>
			<option value="2">Android</option>
			<option value="3">Windows Mobile</option>
			<option value="4">Outro</option>
		</select>
		<span id="comentario"></span>
	</body>
</html>

O resultado é o esperado:

Podemos ainda mudar a função de maneira a apresentar mais um elemento <select> no caso do utilizador escolher “Outro”:

function apresentaConteudo(escolha)
{
var elemento=document.getElementById('comentario');
	switch(escolha)
		{
		case '1': elemento.innerHTML='Viva a Apple!'; break;
		case '2': elemento.innerHTML='Bem-vindo google fan!'; break;
		case '3': elemento.innerHTML='Wiiinnnndddowwwssss!!!'; break;
		case '4': elemento.innerHTML='Qual?
<br />
<select><option selected>Bada</option><option>Symbian</option></select>'; break;
	}
}

Poderíamos também ter obtido o valor seleccionado dentro da própria função para isso teríamos de usar:

“document.getElementById(‘dispositivo’).value”

Como facilmente se conclui, o atributo innerHTML permite aceder ao código HTML que está dentro do elemento, por sua vez, o atribuo value permite aceder ao valor se um componente. Existem inúmeraspropriedades que nos possibilitam interagir totalmente com os elementos de uma página HTM, por sua vez os elementos também podem ser acedidos querem directamente (através do ID, classe), quer indirectamente usando a estrutura DOM.

Por último, vamos aprender como integrar PHP e Javascript, é um processo muito rápido. No fundo o PHP, corrido no servidor, cria dinamicamente ou de forma estática o código Javascript. Para tal, é necessário que o nosso ficheiro tenha extensão PHP e seja aberto no servidor (para poder ser interpretado). O código JS é construído como qualquer outro código HTML, vulgarmente usando o comando “echo” do PHP.

<?php
	echo ‘Ano: <select onChange=”alert(\’Mudei!\’)”><option>’ . date(‘Y’) . ’</option><option>’ . (date(‘Y’)-1) . ’</option></select>’;
?>

No exemplo de cima podemos ver que quando escrevemos JS com PHP, no caso de estarmos a recorrer às plicas ou aspas para delimitar a string PHP, temos que usar a \ para de seguida podermos usar a plica ou aspa respectivamente.

Poderemos ainda usar PHP para popular elementos HTML usando JAVASCRIPT, sem ser necessário recarregar a página. De facto cada vez mais encontramos páginas onde as acções parecem instantâneas, como se a página estivesse em constante comunicação com o servidor. Para isso usamos AJAX que no fundo permite que a página, através de Javascript, faça um pedido http (que pode ser uma página gerada em PHP) sem ser recarregada. O AJAX assume por isso cada vez mais importância nas aplicações WEB PHP, no entanto devido à complexidade inútil do uso directo do AJAX, não avançaremos para esta fase sem a ajuda de bibliotecas que simplificam este processo.

Em conclusão, o Javascript é uma linguagem flexível, e corresponde às exigências vulgares de uma página WEB, é bastante completa no entanto, quando pretendemos fazer coisas mais elaboradas, principalmente ao nível de efeitos gráficos ou tratamento elaborado de dados, temos muito código para escrever sendo que o JS poderia e deveria ter funções que correspondessem directamente às necessidades mais comuns e particulares da programação WEB. Podemos “contornar” este problema recorrendo a bibliotecas. Desta forma vamos no próximo artigo aprender a fazer mais escrevendo menos, para tal recorremos ao jQuery. Esta biblioteca JS permitirá com simples linhas de código efectuar grande parte das tarefas comuns de uma página de Internet.

PHP é a quinta-feira – Introdução ao JavaScript (Parte II)

Publicado em 15/06/201112/09/2015 por homdigitalis

PHP é a quinta-feira – Introdução ao JavaScript (Parte II)

Criado por Pedro Pinto em 9 de Junho de 2011 | 16 comentários

Por Pedro Peixoto para o PPLWARE
Tal como prometido na última semana, hoje vamos perceber como pode uma aplicação ou um website desenvolvido em PHP tornar-se mais interactivo recorrendo ao Javascript, a linguagem clientside mais usada em ambientes web. O objectivo será, daqui a algumas rubricas, perceber a fórmula explosiva da união do PHP com jQuery, uma livraria indispensável a qualquer programador WEB. Mas como tudo tem que começar por baixo, vamos então, ver na prática como podemos usar o Javascript nos nossos websites/webapps.

Mas antes de começar, vamos “separar as águas”:

O javascript é incorporado nas páginas HTML e interpretado pelo browser do cliente que acede à nossa página, sendo uma linguagem orientada a eventos.
O PHP corre do lado do servidor, sendo que o cliente recebe uma página HTML que foi gerada através da programação PHP.

Assim, vulgarmente, nas nossas aplicações usamos o PHP para gerar conteúdo dinamicamente, ligar à base de dados e realizar operações pesadas ou que devem ocorrer num ambiente controlado. Já o Javascript pode ser usado para melhorar graficamente elementos HTML, criar efeitos agradáveis, melhorar a interacção do utilizador, etc…

Incorporar Javascript numa página HTML

Podemos colocar o nosso JS na própria página HTML ou então num ficheiro separado que depois será referenciado na página HTML. Por uma questão de facilidade, vamos começar por escrever o código JS na própria página HTLM. Para tal, comecem por criar um ficheiro vazio na pasta do servidor e alterar a extensão para .php por exemplo js.php.

Seguidamente abrimos o ficheiro num editor de texto (ex.: notepad ou notepad++), e criamos uma estrutura HTML:

<html>
<head>
</head>
<body>
</body>
</html>

O código JS pode colocar-se em qualquer parte, e escreve-se entre as tags .

Para vermos algum resultado vamos aprender desde já a mostrar uma Mensagem ao utilizador, para isso chamamos a função alert();.

<html>
<head>

alert("Ola PPLWARE!!!");

</head>
<body>
</body>
</html>

Se abrirmos a página no browser a mensagem surge normalmente:

Também podemos adicionar código javascript a eventos que disparam quando o utilizador realiza determinadas acções. Cada elemento javascript possui uma séria de eventos, como por exemplo:

onLoad – Dispara quando o utilizador abre a página
onUnload – Dispara quando o utilizador fecha a página
onFocus – Dispara quando o elemento é selecionado, por exemplo quando se coloca o cursor numa caixa de texto.
onBlur – Dispara quando o elemento deixa de estar selecionado.
onChange – Dispara quando o utilizador muda o valor do elemento
onMouseOver – Dispara quando o utilizador passa o cursor do rato por cima do elemento.
onMouseOut – Dispara quando o cursor do rato sai de cima do elemento
onClick – Dispara quando o utilizador clica no elemento.
E muitos mais…

Vamos de seguida criar um botão que emita um aviso em alguns destes eventos.

<html>
<head>

alert("Ola PPLWARE!!!");

</head>
<body onLoad="alert('Bem-vindo!');" onUnload="alert('Até já');"> <input type="button" value="Botao de teste de eventos" onClick="alert('clicaram-me');" onMouseOver="alert('rato em cima de mim');" onMouseOut="alert('rato saiu de cima de mim');"/>
</body>
</html>

De notar que nos eventos não necessitamos de colocar as tags . Colocámos também código para os eventos onLoad e onUnload no body.

Depois de guardar e abrir a página no browser podem brincar um pouco com os eventos que criámos.

Agora, vamos aprender a ler valores dos elementos. É possível fazer isso de mil e uma maneiras mas, para já, a mais fácil é através do ID do elemento.

Em primeiro lugar vamos criar uma caixa de texto:

De seguida, vamos alterar o código do botão:


alert("Ola PPLWARE!!!"); </head>
<body onLoad="alert('Bem-vindo!');" onUnload="alert('Atá já');"> <input type="text" id="caixadetexto"/> <input type="button" value="Botao de teste de eventos" onClick="alert(document.getElementById('caixadetexto').value);" /> </body>
</html>

Assim, podemos aceder ao valor da textbox através da função “getElementById()” que recebe por parâmetro o id do elemento a acessar. De entre as propriedades disponíveis num elemento, a propriedade “value” indica o valor actual. Desta forma, quando o botão for pressionado surge uma mensagem com o valor actual da caixa de texto. Eis o resultado:

No entanto percebe-se que o código ficou um pouco confuso, e como tal vamos simplificar usando para tal as “funções”.

<html>
<head>

alert("Ola PPLWARE!!!");
function mensagem()
{
alert(document.getElementById('caixadetexto').value);
}

</head>
<body onLoad="alert('Bem-vindo!');" onUnload="alert('Atá já');"> <input type="text" id="caixadetexto"/>
<input type="button" value="Botao de teste de eventos" onClick="mensagem();" />
</body>
</html>

O resultado é exactamente o mesmo.

E esta semana ficamos por aqui, já sabemos fazer output, inputs, funções e usar os eventos. Na próxima semana vamos aprender a integrar PHP com Javascript, e começar a fazer coisas mais complexas. O que acharam? Demasiado básico? Muito rápido para tanta coisa? Aguardo pelos vossos comentários.

PHP é a Quinta-Feira – Introdução ao JavaScript

Publicado em 28/05/201112/09/2015 por homdigitalis

PHP é a Quinta-Feira – Introdução ao JavaScript

Criado por Pedro Pinto em 26 de Maio de 2011 | 21 comentários

Por Pedro Peixoto para o PPLWARE

Como já vimos nos artigos anteriores, o PHP é uma linguagem server side, isto significa que é processado do lado do servidor, sendo que o utilizador que está a fazer o pedido ao servidor recebe uma página HTML já processada. Assim, e visto que à partida o servidor é controlado, apenas pessoas autorizadas acedem a todo o código PHP, ligações a bases de dados, sistemas de encriptação, o que o torna uma linguagem segura. No entanto, isto leva a perda de interactividade e flexibilidade, pois cada vez que é necessário executar código tem de se fazer um novo pedido ao servidor, e num ambiente WEB, os sistemas baseados em PHP perdiam muito em relação a tecnologias WEB como o Flash e o JAVA. Este problema foi soberbamente ultrapassado, recorrendo a uma linguagem de programação, que embora estivesse já solidamente integrada nos Browsers, não via aproveitados todos os seus atributos, falamos do JAVASCRIPT.

A partir de hoje vamos introduzir o Javascript nos nossos artigos, isto porque o PHP e esta linguagem andam sempre de mão dada. As duas acabam por se completar, o PHP pode processar rapidamente informação do lado do servidor, gerindo bases de dados, sessões, e conteúdos dinâmicos. O Javascript consegue oferecer a interactividade que é necessária na visualização de conteúdos WEB, pois é processado pelo browser do utilizador. Além disto, é uma linguagem orientada a eventos o que possibilita associar determinado código a uma determinada acção do cliente.

Para melhorar a associação PHP<->Javascript contribuiu muito o AJAX, mas este é um tema para um outro artigo que também terá espaço neste rúbrica.

Ultimamente os motores Javascript utilizados pelos Browsers têm tido desenvolvimentos consideráveis diminuindo o tempo e recursos de processamento, o que permitiu que o Javascript tivesse ganho a importância merecida.

Agora, com o surgimento do HTML5, põe-se em causa qual o rumo que o Javascript vai seguir, é certo que muitas das coisas que antes eram feitas com JS podem agora ser feitas directamente no HTML5, no entanto, o facto desta nova versão abrir as portas a novas funcionalidades, principalmente multimédia, acabam por dar uma importância acrescida ao Javascript.

Antes de terminar, não posso deixar de referir o jQuery, que será também abordado nos nossos artigos. O jQuery é uma biblioteca Javascript que facilita em muito a programação, uma vez que além de permitir realizar a maior parte das acções necessárias de forma simples, funciona em todos os browsers, e os plugins existentes oferecem uma variedade imensa de funcionalidades.

Em conclusão, e na minha opinião pessoal, o Javascript é uma linguagem com uma posição solidificada e com os seus propósitos bem definidos, está de boa saúde, em constante melhoria (processamento dos browsers), e com um futuro risonho à sua frente.

Na próxima semana iremos, então, ver na prática o bom funcionamento destas duas linguagens juntas. Mas como já percebi que vocês gostam de participar e complementar os artigos, deixo já alguns desafios básicos, para adiantar o próximo artigo.

Como se incorpora Javascript numa página HTML?
Como mostrar uma msgbox com informação ao utilizador?
Como redireccionar um utilizador através de Javascript?

Lightbox2 – Visualização de imagens com estilo no teu site

Publicado em 03/05/201112/09/2015 por homdigitalis

Lightbox2 – Visualização de imagens com estilo no teu site

Criado por Pedro Pinto em 27 de Abril de 2011 | 27 comentários

Agora com suporte para o IE9!

Em 2008 (uffff ja passaram 3 anos), apresentamos aqui o Lightbox que permite dar um toque profissional e moderno ao nosso site, disponibilizando um efeito especial para apresentação de imagens. Esse efeito é bastante usado aqui no pplware e podem confirmar carregando na imagem de introdução deste artigo. Recentemente foi disponibilizado o Lightbox v2.05.

Vamos aprender como colocar em funcionamento o Lightbox no vosso site.

Como usar o Lightbox2 no nosso site?

Para colocarem o lightbox2 a funcionar no vosso site, devem seguir os seguintes passos:

Passo 1 – Download do script aqui (lightbox2.05.zip)

Passo 2 – Descompactar e colocar na raiz do vosso site

Passo 3 – Editar a página que permitirá visualizar as imagens e colocar a seguir a <header> o seguinte código:

http://js/prototype.js
http://js/scriptaculous.js?load=effects,builder
http://js/lightbox.js

Passo 4 – (Imagem única) Criem um “thumbnail” da imagem original e coloquem um link na imagem do tipo:

<a href=”images/imagem1.jpg” rel=”lightbox” title=”Minha foto”>Carregue Aqui</a>

onde:

imagem1.jpg é o nome da imagem (em tamanho original). A imagem está dentro da pasta imagens.
title – Um título para a imagem

Passo 5 – (Grupo de imagens) Quem pretender disponibilizar um grupo de imagens, e incluir um menu de navegação devem usar o código seguinte em substituição do anterior:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

E está feito. Agora basta abrir a página que acabaram de desenvolver para observar se as imagens são apresentadas com estilo. Alguma duvida ou questão que tenham, podem colocar em comentário para vos podermos ajudar.

Alguém conhece outros scripts do género?

Artigos relacionados

Imagens no teu site com LightBox

Homepage: LightBox2

Dica: Recupere as suas passwords através do Bookmarks

Publicado em 22/09/201016/09/2015 por homdigitalis

Dica: Recupere as suas passwords de forma simples

Criado por Pedro Simões em 20 de Setembro de 2010 | 17 comentários

Uma das perguntas que me fazem de forma recorrente é como recuperar as passwords que estão memorizadas nos browsers. A funcionalidade de memorização que é disponibilizada aos utilizadores é sem dúvida muito útil e permite que não tenham de se preocupar em escrever todos os dias, e várias vezes, os nomes de utilizador e as passwords dos mais variados serviços. Basta carregar no botão de acesso pois os dados estão já previamente preenchidos.

O problema maior é quando pretendem aceder a esses mesmos serviços noutro browser ou noutro PC e já não se recordam por, habitualmente, não os escreverem. É possível aceder a esses dados através das configurações dos browsers, mas nem sempre é óbvio ou fácil esse caminho. Por forma a contornar esse problema vamos apresentar um script de java que permite aceder a esses dados de forma simples e com apenas o acesso a um marcador do vosso browser.

Imaginem a chatice que é quererem aceder ao vosso email (Gmail, Hotmail, Yhaoo Mail, etc) e perceberem que não se lembram da password. O processo de recuperação dessas passwords pode ser chato e nem sempre bem sucedido. No entanto, sabem que no outro PC que habitualmente utilizam essa password está memorizada, mas que vão ter de chatear alguem para vos explicar como aceder e ela pois não sabem como o fazer.

Passam a poder contar com um link que vos vai ajudar sempre que precisem de retirar as passwords que estão já preenchidas nas páginas web. E basta memorizarem um marcador no vosso browser.

Uma vez que é usado javacript e este vai olhar para os campos do form HTML presente na página, podem usá-lo em qualquer browser ou sistema operativo. Não têm de se preocupar com compatibilidade ou com locais de funcionamento.

Esse código, que apresentamos abaixo é extremamente útil e deve ser colocado num marcador. Sempre que o precisarem de usar, basta acederem à página do serviço e verificarem que o campo Password está preenchido. Depois disso basta então chamarem esse favorito.

javascript:(
  function()
  {
    var s,F,j,f,i; s = ""; F = document.forms;
    for(j=0; j<F.length; ++j)
    {
      f = F[j];
      for (i=0; i<f.length; ++i)
      {
        if (f[i].type.toLowerCase() == "password") s += f[i].value + "\n";
       }
    }
    if (s) alert("Passwords nos formulários desta página: \n\n" + s);
    else alert("Não existem passwords nesta página.");
  }
)
();

Sempre que se depararem com uma página com a password já preenchida chamam o marcador, ou copiam o código apresentado para a barra de endereço, e será apresentada uma caixa de diálogo com o texto “Passwords nos formulários desta página:” e a password abaixo. Se existirem vários campos de password nessa página web eles serão apresentados em linhas consecutivas.

Aproveitem e espalhem esta pequena pérola pelos vossos amigos. Mais dia, menos dia vão precisar dela. Ou vão estar na posição de quem vai ter de desenrascar o outro utilizador ou então vão ser vocês o enrascado.

Fica então aqui o link que podem adicionar aos vossos favoritos: Mostrar password’s.

Memorizem-no no vosso browser e utilizem-no sempre que precisarem de se lembrar da password que está atrás dos asteriscos ou dos pontos no campo Password.

Bookmark: Mostrar password’s

50 Fresh JavaScript Tools That Will Improve Your Workflow – Smashing Magazine

Publicado em 16/03/201017/09/2015 por homdigitalis

JavaScript is an integral part of the RIA revolution. JavaScript allows developers to create rich and interactive web interfaces and establish asynchronous communication with servers for constantly up-to-date data without a page refresh.

Many things that were once accomplished using Flash objects can now be built using JavaScript – with the added benefit that it is free, typically more web and mobile accessible under most circumstances using best practices for development techniques, and without the need to use proprietary software for development.

Though JavaScript has been around for a while, new tools, techniques, and information are constantly being pumped out to continually push the technology into greater heights. In this article, we wish to share with you a huge list of fresh and new tools and resources that JavaScript developers will find useful and informative.

Here are a few other posts that you might find interesting:

[By the way: The network tab (on the top of the page) is updated several times a day. It features manually selected articles from the best web design blogs!]

Useful JavaScript Tools

FireUnit
Unit testing is an integral part of building high-performance and efficient web applications. John Resig (creator of jQuery library) and Jan Odvarko have developed an excellent Firefox/Firebug extension called FireUnit which gives developers logging and testing capabilities via a simple JavaScript API. For those interested in the tool, you should also read Odvarko’s post detailing the usage of FireUnit.

Sugar Test
SugarTest makes it easy to write elegant and understandable JavaScript tests. Its API is inspired by both RSpec, Shoulda and jQuery. It works as a DSL running on top of JsUnitTest.

JS.Class: Ruby-style JavaScript
JS.Class is a library designed to facilitate object-oriented development in JavaScript. It implements Ruby’s core object, module and class system and some of its metaprogramming facilities, giving you a powerful base to build well-structured OO programs.

JSON Formatter and Validator
The JSON Formatter was created to help with debugging. As data expressed as JSON is often written without line breaks to save space, it became extremely difficult to actually read it. This tool hopes to solve the problem by formatting the JSON into data that is easily readable by human beings.

Faux Console: Simulating a Firebug, Safari or Opera debugging in IE
Browsers like Safari, Opera and Firefox use the Firebug extension that offers a developer a comfortable way to output debugging information using the console.log() command. Microsoft Internet Explorer does not support this though – Faux Console is a small JavaScript that you can embed in the document to have a basic debugging console in IE.

JS Bin
JS Bin is a web application for testing and debugging JavaScript and CSS collaboratively. You input your source code and save it to a publicly-accessible URL which you can then share to your fellow developers or in social networking outlets like Twitter or Facebook groups. Be sure to check out the video introduction to see JS Bin in action.

PHP.JS
PHP.JS is an open source project in which we try to port PHP functions to JavaScript. By including the PHP.JS library in your own projects, you can use your favorite PHP functions client-side.

Page Speed
Page Speed, released by Google, is a Firefox/Firebug extension very similar to YSlow that evaluates your web pages for performance. Read more about Page Speed best practices to see what aspects of a web page are being evaluated. YSlow and Page Speed are based off Steve Souder’s work (who worked for Yahoo! and now works for Google).

prettyPrint
prettyPrint is an in-browser JavaScript utility for dumping variable information, inspired by ColdFusion’s built-in cfdump utility function. Using prettyPrint on JS objects, variables, and arrays will give you a large array of information about them, which you can then use for debugging purposes or simply for gathering data about them for documentation.

Spket IDE
Spket is an excellent toolkit for JavaScript and XML development. It has a robust and intuitive GUI, and integrates with popular and powerful JavaScript/Ajax libraries such as Y!UI and jQuery. Its JavaScript Formatter feature gives you unparalleled control and standardization for you or your team’s JavaScript code formatting standards.

Obtrusive JavaScript Checker
Obtrusive JavaScript Checker, created by Robert Nyman, is a tool for finding inline JavaScript on web pages. It highlights elements that have inline JavaScript properties and provides a summary report when you mouse over them. The tool is available as a Firefox extension or a Greasemonkey script.

Highlight.js
Highlight.js highlights syntax in code examples on blogs, forums and other web pages. The tool works automatically: it finds blocks of code, detects a language and highlights it accordingly.

Javascript Compressor
Javascript Compressor is a web-based tool for compressing your JavaScript to reduce their file sizes. It works by removing unnecessary characters (such as extra tabs and spaces). Developers who use the tool to compress their code can also use the decoding feature to uncompress their source code. It also obfuscates your code, making it harder to read – which can be desirable if you want to delay prying eyes from analyzing your publicly-available code base.

Firediff
Firediff is a Firefox/Firebug extension that allows you to track changes in the DOM and CSS. By logging these changes, you can gain information about how web applications work, and what elements (and what properties) are being altered by way of DOM manipulation.

RockStar Web Profiler
RockStar Web Profiler (aka Razor) logs and profiles information about client-side performance. It provides developers with a console for analyzing the data gathered by the tool. Check out the RockStar Web Profiler presentation to get an overview of its many awesome features.

bookmarklet maker
This plain and simple web tool allows you to create JavaScript-based bookmarklets. Usage is simple: simply copy and paste your source code into it and it will output the processed code in the lower pane.

Tiny JS
Tiny JS is an online directory of small but powerful plugins for popular JavaScript/Ajax libraries (MooTools, jQuery, and YUI at the moment). Its aim is to hunt down and feature lightweight plugins that give you a lot of bang for the buck.

JSCharts
JS Charts is a free JavaScript based chart generator that requires little or no coding. With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting (i.e. performed by your web browser). No additional plugins or server modules are required. It’s enough to include the scripts, prepare your chart data in XML or JavaScript Array and your chart is ready.

Glimmer
Glimmer is an interactive design tool for incorporating slick JavaScript-based animation effects using the jQuery library. Glimmer comes with a wizard-style user interface which can reduce the amount of coding that you have to write manually.

JSSPec
A testing environment for JavaScript that runs on IE 6+, Firefox 2+ and Safari 3+. The tool shows differences between expected value and actual value, displays the failed line exactly and supports conditional execution. Released under GNU and available for free download.

CodeRun Code Search
CodeRun’s Code Search tool lets you search and view user-submitted Ajax, PHP, and .NET source code. Once you’ve found a script or project that you’re interested in, you can edit it via their web-based IDE without having to download the project locally.

BaseJS: A Mobile (Safari) Javascript Framework
a simple, lightweight framework created specifically for Mobile Safari (perfect for iPhone development).

MochaUI
MochaUI is a web-based tool for building web application interfaces built on top of the MooTools JavaScript framework. Jump right in by taking MochaUI for a spin in their demo page.

Utility Libraries and Components for JavaScript

narwhal
narwhal is a server-side JavaScript library following the ServerJS standard. Developers can create and share “packages” for website widgets, site features, programming patterns, in a similar fashion as PEAR for PHP.

uploadify
uploadify is a useful jQuery plugin for dealing with file uploads. It’s powered by a simple PHP script for handling the server-side stuff. Be sure to check out the uploadify demos to see the plugin in action.

Blackbird
Blackbird lets you log messages in JavaScript using a simple and intuitive JS-based API. The library also provides you with an attractive console GUI for viewing and analyzing messages. No more annoying alert() functions to see your objects’ contents (which can be frustrating for printing out array values) and for setting breakpoints.

Booklaylet
Booklaylet is a JS library for letting you easily deploy your bookmarklet applications. The implementation is dead simple: take the Booklaylet source and modify it to point to your app’s URL.

JavaScripTools
JavaScipTools is a collection of useful JS components, functions, and classes with the aim of addressing some of the more common web developer tasks such as parsing and formatting of data types (i.e. date and time). It also comes with a dynamic table function for creating sortable HTML tables.

Doodle.js
HTML 5’s Canvas element gives developers a way to draw stuff on web pages programmatically. Doodle.js is a utility library/framework for working with more complex and robust Canvas drawing processes. Check out Spiral Pattern demo and the Marbles in Space (3D simulation) demo in a browser that already supports Canvas to get a feel for how Doodle.js works.

liteAJaX
liteAJaX is a lightweight JavaScript class for working with AJAX. This library is perfect for projects that don’t use a JavaScript/Ajax framework or projects that don’t need a more robust and fully-featured framework.

Burst
Burst is a vector animation engine for HTML 5’s Canvas element. With it, you can create smooth, Flash-like animation effects for browsers that support Canvas.

JSTestDriver
JSTestDriver is a Java-based framework for creating unit test following Test-Driven Development philosophies and best practices. Be sure to check out this video demonstration of JSTestDriver in action.

jsPDF
This library allows you to create PDF’s using nothing else but JavaScript. See the jsPDF demo page to see the library in action.

Useful JavaScript Libraries

GlassBox
GlassBox is a beautiful and refreshing take on modal windows that creates an interesting feeling of transparency as if you were looking through a glass. Check out the example page to see different types of GlassBox implementations.

jQuery TOOLS
jQuery TOOLS is a toolbox that gives developers some of the most popular UI design patterns at their disposal in an easy-to-use manner. View some of the things you can do with jQuery TOOLS in the project’s demo page.

Moousture
Moosture is a JavaScript library for dealing with mouse gestures, written on top of the MooTools framework.

Tablecloth
Tablecloth is a lightweight and unobtrusive JavaScript library for styling and adding dynamic user interaction to HTML tables.

Unobtrusive Table Actions Script
This simple and lightweight library brings together a set of common and useful functions for dealing with HTML tables, such as zebra-striping rows, highlighting rows on mouse over, and column highlighting.

LivePipe
LivePipe is a set of widgets and controls for adding common user interaction components to web applications using the Prototype JavaScript framework.

JavaScript Graphical / Virtual Keyboard Interface
This JavaScript package adds a virtual keyboard interface into web pages.

Tipmage
Tipmage is a JavaScript class for handling tooltips and annotations on images, similar to annotated images on Flickr.

qGallery
qGallery is a simple but beautiful JavaScript for creating image galleries with smooth and slick animation effects.

Educational JavaScript Resources and Tutorials

Ajax Frameworks Decision Center
For large companies, committing to a JavaScript/Ajax framework such as Prototype, MooTools, or jQuery is a big decision because it affects a large amount of employees and will dictate the direction of the company’s client-side interaction and RIA development philosophies. Using the Ajax Frameworks Decision Center gives you an organized, quantitative, and thorough method for making a solid decision.

jQuery vs MooTools
This single-page site by MooTools Dev Team member Aaron Newton is a comparative look into jQuery versus MooTools.

Ajax Framework Analysis Results
This analysis of popular JavaScript/Ajax frameworks (Dojo, Ext JS, GWT, YUI) is a great resource for gathering research data for your own frameworks: the analysis matrix factors in criteria such as scalability, extensibility, quality and quantity of documentation, and much more. You can adapt this matrix, tweak their weights, and modify criterions to help you decide which JS framework to go with.

Sexy Drop Down Menu w/ jQuery & CSS
In this tutorial, you’ll learn how to create a multi-tiered drop down menu with the use of the jQuery library.

Easy Display Switch with CSS and jQuery
This tutorial outlines a method for using jQuery to smoothly-transition into different viewing modes, which can be helpful in image galleries.

Create a Slick and Accessible Slideshow Using jQuery
This is a step-by-step jQuery tutorial that I wrote for creating a simple and slick slideshow that can be adapted to display different content types. Check out the demo page to see the slideshow in action.

Learning Advanced JavaScript
John Resig has a slideshow-style, web-based tutorial on advanced JavaScript development. It is a wonderful stepping-stone for JavaScript developers ready to make the leap into RIA development using JavaScript.

JavaScript tests & Compatibility tables
This resource is a well-organized cheatsheet for JavaScript methods cross-browser compatibility backed by sample tests that you can run to see how they work (or don’t work) in your browser.

Code Conventions for the JavaScript
On this page, you can find suggested coding conventions for JavaScript. It is important to note that there is no one correct convention, but this is a great place to start developing your own.