PHP e Javascript – Parte III

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.

web_01

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:

clip_image002

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;
	}
}

clip_image004

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.

Deep Shot – O fim das fronteiras entre equipamentos

Deep Shot – O fim das fronteiras entre equipamentos

Criado por Pedro Simões em 18 de Junho de 2011 | 5 comentários

Hoje em dia é cada vez mais frequente termos vários equipamentos e todos eles ligados à Internet. Estamos sempre contactáveis e com uma presença web muito activa. Conseguimos saltar entre os nossos diferentes equipamentos sem que os nossos contactos dêem por isso. Esta facilidade ainda não é perfeita e nem completa. O problema actualmente é conseguirmos passar do browser do Computador para o browser do dispositivo móvel. Existem já algumas ferramentas, nomeadamente o Firefox, que conseguem que sincronizemos os separadores que estamos a usar num equipamento e transpô-lo para o outro, mas ainda não permitem que partilhemos páginas com outros utilizadores.

A solução para este problema está mais próxima de ser uma realidade com a apresentação que foi feita por um estudante do MIT, Tsung-Hsiang Chang, e um elemento da equipa da Google, Yang Li. O Deep Shot promete ser a solução para a passagem de páginas entre os nossos diversos equipamentos.

O Deep Shot permite que um dispositivo móvel reconheça a página que está a ser acedida no computador e que este aceda a esse mesmo endereço ou informação. O caso mais demonstrado é a passagem de uma informação contida numa página do serviço Google Maps para o Maps do Android.

Segundo Tsung-Hsiang Chang , o Deep Shot pode ser extremamente útil pois irá retirar a necessidade de todos os elementos de ligação entre o computador e o dispositivo móvel e eliminar todo o processo de passagem de informação entre os dois equipamentos

People are used to using heavy tools to transfer data or synchronize two devices. You have to plug in a USB cable and maybe open iTunes and synchronize a bunch of data at the same time. But sometimes you just want to send a tiny bit of information, or a single piece of information.

Esta passagem de informação é apenas possível graças ao reconhecimento de informação que está a ser apresentada na página que o browser está a visitar. Através do reconhecimento do URI que está a ser acedido é possível ao Deep Shot passar essa informação para a aplicação do Android.

Da mesma forma que o dispositivo móvel recolhe a página que está a ser visitada, é também possível a este passar essa informação para o PC. O processo é ligeiramente diferente pois o Deep Shot identifica o computador para onde pretendemos enviar a informação e esta é passada para o local certo.

Esta aplicação foi criada no verão passado, quando Tsung-Hsiang Chang estava na Google a fazer um estágio. Uma vez que foi desenvolvida dentro da Google, os direitos desta são propriedade da empresa de Mountain View. Ainda não existem planos concretos para a sua disponibilização e a Google não fez qualquer apresentação da mesma.

Actualmente o Deep Shot funciona em alguns sites, tais como o Google Maps ou o Yelp. Segundo os seus criadores será extremamente simples colocá-lo a funcionar em qualquer outro site que apresentem o seu estado através de URI’s. Uma vez que o Deep Shot está assente em URI’s, será possível que este sirva também para fazer a ponte entre diferentes aplicações que partilhem informação desta forma. Falamos por exemplo de aplicações de mapas que estejam num computador e num dispositivo móvel.

Vejam abaixo a forma simples como o Deep Shot funciona, quer no sentido do computador para o dispositivo móvel e no sentido inverso.

Este tipo de software vai permitir que dentro em breve as fronteiras entre os diversos equipamento que temos em nosso poder desapareçam. Vamos poder passar informação entre estes equipamento com um simples apontar de uma câmara para o ecrã.

Homepage: Deep Shot: A Framework for Migrating Tasks Across Devices Using Mobile Phone Cameras