Primeiros passos em jQuery

Programação Web é a Quinta-Feira

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

Por Pedro Peixoto para o PPLWARE

Primeiros passos em JQuery

Nos últimos artigos temos vindo a falar da integração do Javascript nas aplicações PHP. Na última semana aumentámos um pouco mais a complexidade dos scripts, percebendo que, embora não estivéssemos a fazer nada de muito admirável, eram já necessárias algumas linhas de código. De facto o Javascript é uma linguagem completa e flexível mas pouco produtiva. Para combater este entrave surgiram bibliotecas que vieram facilitar o trabalho dos programadores. Estas bibliotecas permitem um acesso mais rápido a funcionalidades muito requeridas em aplicações WEB, para além de facilitarem o acesso à estrutura DOM e principalmente simplificarem a utilização de AJAX. Vamos por isso, aprender hoje a utilizar o JQuery.

web_01

Mas o que é o jQuery?

“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.”

clip_image002

De facto o lema do jQuery é “Escreva menos, faça mais!”, e podemos assegurar que ambas as afirmações são verdadeiras. O Javascript foi ganhando ultimamente o seu merecido lugar de destaque, a evolução nos motores JS dos browsers, a impossibilidade do FLASH correr nos iDevices da moda, e a eminente emancipação do HTML5 muito contribuíram para isso. No entanto, existiam três pontos negativos em relação ao Javascript:

  • Em primeiro lugar é uma linguagem interpretada pelos browsers, e infelizmente nem sempre interpretada da mesma forma pelos diferentes navegadores. Nenhum programador se esquece das dores de cabeça que o já sepultado (felizmente) IE6 nos dava.
  • Outro dos problemas era o facto de o Javascript não possuir certas funcionalidades directas que a grande parte dos sites necessita. Para fazer um fadeout ou uma caixa de diálogo eram necessárias algumas linhas de código, ou até algumas funções, sendo já habito os programadores desenvolverem ficheiros .JS que permitiam funcionalidades deste tipo.
  • Por último o JS não permitia de forma fácil uma interacção imediata com as bases de dados e scripts PHP até ao aparecimento do AJAX, no entanto o AJAX também era demasiado complicado de ser usado.

Pretendia-se uma maneira fácil, rápida e bonita de programar certas funcionalidades, componentes e efeitos, para além de uniformizar a forma como os ficheiros .JS poderiam ser usados e adaptados de forma a tornarem-se autênticos PLUGINS. Surgiu então o jQuery, de facto muitos programadores WEB consideram hoje esta biblioteca uma autêntica preciosidade. Mas como “um Hello World vale mais do que mil palavras”… J … vamos ao que interessa.

Vamos como é hábito criar um ficheiro HTML com a estrutura básica já definida.

	<html>     
	<head>     	
	<title>Exemplo jQuery</title>     
	</head>          
	<body>      
	</body> 
</html>

O jQuery não é mais do que um ficheiro .JS que é necessário incluir na nossa página HTML. É possível baixar o jQuery através do próprio site:

Mas no nosso caso vamos fazer o include ficheiro directo, que está alojado no mesmo sítio:

Para incluir o ficheiro na nossa página adicionamos no head a seguinte linha de código:

http://code.jquery.com/jquery-1.6.1.min.js

E pronto estamos prontos para usar o jQuery, fácil não é? Vai ser ainda necessário uma “div” para exemplificar o funcionamento da biblioteca, e um botão para executar o código. Vamos começar por colocar o texto “Hello World!” dentro da div quando o botão Executar é clicado. Para isso basta adicionar o seguinte código ao evento click do botão:

$('#teste').html('Hello World!');

<=”” p=””>

<html>     
	<head>     	
		<title>Exemplo jQuery</title>         
		http://code.jquery.com/jquery-1.6.1.min.js     
	</head>          
	<body>     	
		
<br/> <input type="button" value="Executar" onClick="$('#teste').html('Hello World!')"> </body> </html>

E o resultado:

clip_image004

Como se pode perceber, para aceder a um elemento utilizamos a estrutura $(idouclass), com javascript simples para aceder à div teste teríamos:

Document.getElementById(‘teste’);

Com jQuery:

$(“#teste”)

O jQuery permite também aceder a elementos de uma determinada classe através do “.” em vez do “#” (como em css). Existem muitos mais selectors, podendo utilizar mesmo a navegação através da estrutura DOM à semelhança do JS mas de uma forma muito mais rápida. Aqui ficam alguns exemplos:

  • $(“p”) //aceder a todos os elementos “p”
  • $(“#pid”) //aceder ao elemento com o id “pid”
  • $(“.p”) //aceder a todos os elementos com a classe “p”
  • $(“table > tbody > tr”) //aceder a todas as linhas da tabela
  • $(“#t1 > tbody > tr”) // aceder a todas as linhas da tabela com id “#t1”
  • $(“input[type=’text’]“) // aceder aos inputs do tipo texto

Quando seleccionamos mais do que um elemento podemos usar a função each para percorrer elemento a elemento e aplicar uma acção ou então podemos usar filtros como o :first, :last e a função filter.

Em conclusão, o jQuery facilita a agiliza a programação com Javascript sendo por isso uma biblioteca indispensável. Este foi apenas um “cheirinho” para perceberem que não é de forma alguma complicado usarem esta poderosa biblioteca. Nos próximos artigos continuaremos a explorar o jQuery e também introduziremos jQuery UI de forma a aprendermos como criar aplicações/sites WEB mais atractivos e amigos do utilizador. Vamos ainda aprender a usar o jQuery em conjunto com o PHP, principalmente recorrendo ao AJAX e a funções do jQuery que tornam este recursos

Artigos relacionados

Homepage: JQuery

Vamos dar uns toques de SQL? V

Vamos dar uns toques de SQL? V

Criado por Pedro Pinto em 25 de Junho de 2011 | 7 comentários

Por Pedro Gaspar para o PPLWARE

Depois de termos aprendido algumas das funções mais básicas de sql, esta semana vamos aprender a agrupar resultados utilizando o DISTINCT e o GROUP, alem disso também vamos aprender a contar os resultados obtidos com recurso ao COUNTsql_00

Para apresentar alguns exemplos utilizei a tabela que temos vindo a usar nas ultimas semanas com os seguintes dados:

sql_01
Por vezes temos dados repetidos na nossa tabela e queremos que eles apareçam apenas uma vez na listagem, pois esta semana vamos aprender duas formas de o fazer
Começando pelo DISTINCT

Sintaxe de Utilização

SELECT DISTINCT nome_coluna(s)    
FROM nome_tabela

O DISTINCT é a forma mais simples de o fazer, mas também podemos utilizar o GROUP
Sintaxe de Utilização

SELECT nome_coluna(s)
FROM nome_tabela
GROUP BY coluna1 [, coluna2, coluna3]

Nada melhor para explicar todo o conceito do que utilizar alguns exemplos:

EXEMPLO1
Objectivo: Apresentar a lista de cores de cabelo
Query utilizando o DISTINCT:

SELECT DISTINCT cor_cabelo
FROM `tbl_ppware`

Query utilizando o GROUP:

SELECT cor_cabelo
FROM `tbl_ppware`
GROUP BY cor_cabelo

Resultado:

sql_ex1
Apesar de as duas funções apresentarem o mesmo resultado o seu funcionamento e totalmente diferente, sendo que com o GROUP conseguimos fazer queries muito mais complexas do que com o DISTINCT.

Vamos agora aprender a função COUNT para mais à frente utiliza-la em conjunto com o DISTINCT e o GROUP
O COUNT permite-nos contar o numero de registos de uma determinada coluna.

Sintaxe de utilização

SELECT COUNT(nome_coluna)
FROM nome_tabela

EXEMPLO2
Objectivo:
Apresentar o numero de registos que estão na tabela tbl_pplware
Query:

SELECT COUNT( * )
FROM `tbl_ppware`

(como não queremos seleccionar nenhum campo em particular podemos utilizar o ‘*’, mas poderíamos ter utilizado um campo qualquer para o efeito)
Resultado:

sql_ex2
Para não aparecer ‘COUNT(*)’ no nome do campo da query que acabamos de fazer podemos utilizar o AS de forma a dar o nome que quisermos ao campo, vejamos o mesmo exemplo mas utilizando o AS
Query:

SELECT COUNT( * ) AS total
FROM `tbl_ppware`

Resultado:

sql_ex3

EXEMPLO3
Objectivo: Apresentar o numero das diferentes cores de cabelo existentes
Query:

SELECT COUNT( DISTINCT cor_cabelo ) AS cores
FROM `tbl_ppware`

Resultado:

EXEMPLO4
Agora vamos juntar tudo o que aprendemos até este ponto.
Objectivo: Apresentar as cores de cabelo existentes e ao mesmo tempo mostrar quantas vezes existe cada uma
Query:

SELECT cor_cabelo, COUNT( * ) AS total
FROM `tbl_ppware`
GROUP BY cor_cabelo

Resultado:

sql_ex4
Espero que tenham gostado da explicação sobre sql desta semana, para a semana há mais.

Algumas considerações sobre o Totoloto & o Euromilhões

Algumas considerações sobre o Totoloto & o Euromilhões

Autor:  Albino Linhares

Apesar de o euromilhões ser um concurso que se realiza em vários países europeus, logo com um número muito elevado de apostadores e um ainda maior número de apostas, é bastante frequente haver jackpots alguns dos quais sucessivos ( que fazem disparar o interesse dos apostadores e, consequentemente, o número de apostas).
Se ocorrem tantos jackpots é porque deve ser muito difícil acertar na chave ( conjunto formado por 5 números e 2 estrelas ) sorteada, isto é, o número de chaves possíveis é muito elevado porque, caso contrário, com tantas apostas registadas alguém teria a chave correcta.
Intuitivamente parece ser mais fácil acertar no euromilhões que no totoloto pois no euromilhões “apenas” temos que acertar 5 números entre 50 enquanto que no totoloto temos que acertar 6 em 49. O problema surge com as estrelas que, como só temos que acertar duas em 9, induzem uma falsa ideia de pouca importância na definição da chave. Essa ideia é reforçada pelo facto de muitos apostadores já terem acertado nas duas estrelas e terem obtido prémios muito baixos. Então o que importa são os números – esses é que são o diabo! -.
No entanto, a intuição é imediatamente posta em causa pelo que se passa na realidade, bastando para tal verificar o número de jackpots registados no euromilhões e no totoloto. Apesar do totoloto ter menos apostadores (só são aceites apostas registadas em Portugal) tem também (comparativamente) menos jackpots. Isto “demonstra” que é mais fácil acertar no primeiro prémio do totoloto do que no primeiro prémio do euromilhões

Quantas chaves possíveis há no euromilhões?
Como já foi escrito anteriormente, uma chave do euromilhões é composta por 5 números e por duas estrelas.
Total de combinações numéricas:
Como os 5 números que fazem parte da chave premiada estão entre 50 números, o total de combinações numéricas possíveis pode ser calculado recorrendo ao cálculo combinatório e é dado pela expressão,

Temos então 2118760 possíveis chaves numéricas.

Total de combinações das estrelas:
Quanto às duas estrelas que farão parte da chave premiada elas estão entre as nove estrelas disponíveis. O total de combinações das estrelas é dado pela expressão,

Atendendo ao reduzido número de possibilidades estas podem facilmente ser aqui apresentadas:
1+2; 1+3; 1+4; 1+5; 1+6; 1+7; 1+8; 1+9; 2+3; 2+4; 2+5; 2+6; 2+7; 2+8; 2+9; 3+4; 3+5; 3+6; 3+7; 3+8; 3+9; 4+5; 4+6; 4+7; 4+8; 4+9; 5+6; 5+7; 5+8; 5+9; 6+7; 6+8; 6+9; 7+8; 7+9; 8+9.
Total de chaves do euromilhões:
Por cada uma das 2118760 combinações de números há 36 possibilidades quanto às estrelas. Então, o número total de chaves do euromilhões é,

Um apostador pode fazer, no mínimo, uma aposta, a sua probabilidade de acertar no primeiro prémio com essa aposta é:   

Quantas chaves possíveis há no totoloto?
No totoloto são sorteados 6 números de 49 possíveis. O número total de chaves é dado pela expressão,

Um apostador que registe 2 apostas ( o mínimo permitido ) tem a seguinte probabilidade de acertar na chave correcta:

Euromilhões vs Totoloto
Para melhor comparar as possibilidades de ganhar o primeiro prémio nos dois concursos podemos determinar o quociente entre o total de chaves de cada um deles.

Isto é, com o mesmo número de apostas, é cerca de 5 vezes e meia mais “fácil” acertar no totoloto do que no euromilhões.

Outro aspecto importante a ter em conta é o custo de cada aposta. No euromilhões o custo de cada aposta é 2 €, enquanto que no totoloto, o custo de cada aposta é 0,35€. Assim, com o mesmo número de apostas, o apostador do totoloto tem cerca de 5,5 vezes mais hipótese de acertar no primeiro prémio e paga apenas 17,5% do que pagaria se jogasse no euromilhões!

Popularidade do Euromilhões
Apesar das desvantagens anteriormente apontadas, o euromilhões, em pouco tempo, conquistou os apostadores portugueses. São várias as razões desse sucesso:
1 – O primeiro prémio do euromilhões é muito mais elevado do que o do totoloto e, regra geral, há menos apostadores a acertar, logo quem acerta arrecada quantias fabulosas.
2 – A probabilidade de obter o último prémio no euromilhões é maior do que a probabilidade de obter o último prémio no totoloto e, de uma forma geral, o valor do último prémio no totoloto é mais baixo. Assim, quem joga habitualmente no euromilhões lá vai arrecadando pequenas quantias de vez em quando, o que motiva novas apostas na semana seguinte.
3 – O euromilhões é mais favorável ao apostador na medida em que a percentagem da receita arrecadada que vai para os prémios é maior do que no totoloto. Vejamos os quadros seguintes:

Como se pode observar no euromilhões temos uma receita global de 60 906 072,00 € da qual saem 30 453 036,00 € para prémios, isto é, da receita arrecadada vai para prémios.
Observando o quadro do totoloto temos uma receita global de 4 036 249,70 € dos quais saem para prémios 1 311 781,15 €, isto é,

O euromilhões é um jogo mais “justo” para o apostador uma vez que “devolve” metade do dinheiro em prémios enquanto que o totoloto só “devolve” cerca da terça parte do dinheiro arrecadado.
4 – Outra boa razão para apostar no euromilhões relaciona-se com a possibilidade de obter o terceiro prémio ( cinco números e zero estrelas).
A probabilidade de acertar nos cinco números com uma aposta é de 1 para 2 118 760, isto é, 6,6 vezes mais “fácil” do que acertar nos 6 números do totoloto e, o terceiro prémio do euromilhões tem garantido quantias bastante significativas (ver quadro acima)
Resumindo, se verificarmos o prémio de 5 números certos sem nenhuma estrela já é muito considerável e as combinações de 50, 5 a 5 cujo valor é 2118760, são 6,6 vezes menos do que as combinações de 49, 6 a 6!!!

Probabilidades dos vários prémios

Euromilhões

1º Prémio ( 5 N + 2 E )

1 em 76 275 360

2º Prémio ( 5 N + 1 E )

Cerca de

1 em 5 448 240

3º Prémio ( 5 N + 0 E )

Cerca de

1 em 3 632 160

4º Prémio ( 4 N + 2 E )

Cerca de

1 em  339 002

5º Prémio ( 4 N + 1 E )

Cerca de

1 em  24 214

6º Prémio ( 4 N + 0 E )

Cerca de

1 em 16 143

7º Prémio ( 3 N + 2 E )

Cerca de

1 em 7 705

8º Prémio ( 3 N + 1 E )

Cerca de

1 em 550

9º Prémio ( 2 N + 2 E )

Cerca de

1 em 538

10º Prémio ( 3 N + 0 E )

Cerca de

1 em 367

11º Prémio ( 1 N + 2 E )

Cerca de

1 em 102

12º Prémio ( 2 N + 1 E )

Cerca de

1 em 38

Totoloto

1º Prémio ( 6 N)

1 em 13 983 816

2º Prémio ( 5 N + 1 Sup )

1 em 2 330 636

3º Prémio ( 5 N )

Cerca de

1 em 54 201

4º Prémio ( 4 N)

Cerca de

1 em  1 032

5º Prémio ( 3 N)

Cerca de

1 em  57

Probabilidade de obter algum prémio no totoloto
Qual será a probabilidade de, com uma só aposta, ganhar algum prémio no totoloto?
A probabilidade de obter algum prémio é igual à diferença entre 1 e a probabilidade de não ganhar nada ( “ganhar algum prémio” e “não ganhar nada” são acontecimentos contrários), isto é,

No totoloto não se obtém prémio se: acertar apenas em dois números; acertar apenas num número; não acertar em qualquer número. Então,

Cerca de 1 em cada 53 apostas.

Probabilidade de obter algum prémio no euromilhões
Seguindo um processo análogo ao anterior, e sabendo que no euromilhões não se obtém qualquer prémio se acertar em: 2 N+0 E; 0N+2E; 1N+1E; 1N+0E; 0N+1E; 0N+0E temos,

Cerca de 1 em cada 24 apostas.

IPNetInfo – Saiba informações sobre o seu IP

IPNetInfo – Saiba informações sobre o seu IP

Criado por Pedro Simões em 25 de Junho de 2011 | 6 comentários

Sempre que nos ligamos à Internet, seja para navegar ou para receber/enviar um email estamos a ligar-nos a um endereço IP. Normalmente não temos de saber muita informação sobre estes endereço, mas existem situações em que necessitamos de saber o toda a informação possível sobre esse endereço.

A forma de o fazer é através de um WHOIS, que nos devolve toda a informação que está disponível sobre esse endereço. O Windows não tem nativamente esta ferramenta para que a possamos usar, mas felizmente existem algumas ferramentas que permitem dotá-lo da capacidade de fazer estas querys. O IPNetInfo permite obter essa informação de forma muito simples.

O WHOIS é a forma mais simples de obter a informação sobre um endereço IP. A informação aí apresentada permite que identifiquemos quem são as entidades responsáveis por esses endereços, a que redes esse endereço pertence e muito mais informação.

Eis a definição que a Wiki apresenta sobre o Whois:

WHOIS é um protocolo TCP (porta 43) específico para consultar informações de contato e DNS sobre entidades na internet.

Uma entidade na internet pode ser um nome de domínio, um endereço IP ou um AS (Sistema Autónomo).

O protocolo WHOIS apresenta três tipos de contactos para uma entidade: Contacto Administrativo (Admin Contact), Contacto Técnico (Technical Contact) e Contacto de Cobrança (Registrant Contact). Estes contactos são informações de responsabilidade do provedor de internet, que as nomeia de acordo com as políticas internas de sua rede.

O IPNetInfo é um cliente de WHOIS para Windows que podemos usar de forma muito simples e rápida. Basta que lhe indiquemos os endereços sobre os quais pretendemos saber informações.

Para cada um dos IP’s que colocarem no IPNetInfo é apresentada toda a informação que está disponível na base de dados do RIPE. A informação é apresentada em formato de texto, o que facilita a cópia dessa informação para onde pretenderem.

O IPNetInfo tem a capacidade de recolher informação para os dois formatos de endereços IP actualmente em uso, o IPV4 e o IPV6.

A forma de usarem o IPNetInfo é simples, basta que indiquem que pretendem fazer nova pesquisa e, na janela que for aberta, devem colocar todos os endereços ou nomes que pretenderem. De seguida devem verificar as opções disponíveis e ajustarem-nas para o que pretendem.

A informação que o IPNetInfo vos disponibiliza pode ser muito útil se pretenderem saber informações sobre um determinado IP, quer seja para terem noção a que rede pertence ou para que possam efectuar uma queixa caso tenha havido um qualquer problema.

O IPNetInfo é completamente portátil e pode ser colocado em qualquer pen para utilização em qualquer altura. Caso prefiram, existe uma versão de instalação. Dotem o Windows com a capacidade de fazer querys WHOIS de forma simples e sem complicações.

Licença: Freeware
Sistemas Operativos: Windows XP/ Vista/ 7
Download: IPNetInfo 1.35 Portable
Download: IPNetInfo 1.35
Homepage: IPNetInfo

Aprenda a programar para Android – Parte II

Aprenda a programar para Android – Parte II

Criado por Pedro Pinto em 21 de Junho de 2011 | 19 comentários

Programação da aplicação calculadora em Java (continuação do artigo anterior aqui)

Na semana passada ensinamos como criar de uma forma simples layouts em XML para as aplicações a desenvolver para Android. O processo é relativamente simples e caso ainda existam dúvidas não hesitem em perguntar. Depois de criada a interface (layout) e definidos todos os widgets (componentes) é hora de passar a programação da aplicação propriamente dita.

Vamos então ensinar como somar dois números através de uma aplicação para Android.

droid_00

No artigo anterior (ver aqui), definimos os nomes de cada widget através da propriedade id tendo ficado definido da seguinte forma:

  • EditText – @id/edt_num1
  • EditText – @id/edt_num2
  • Button –    @id/btn_somar

droid_01

Vamos agora  começar na programação. Para isso vamos abrir o ficheiro calculadora.java (que se encontra dentro do projecto criado, em src—>pt.pplware).

droid_02

O próximo passo é aceder ao widgets que foram definidos durante a criação do layout.Vamos começar então por fazer uso da classe EditText e definir num1 e num2 como sendo desse tipo. Para o botão fazemos uso da classe Button e definimos btn_somar desse tipo. Devemos também incluir os respectivos imports das classes Button e EditText.

Nas últimas três linhas (marcadas na imagem seguinte) vamos associar as variáveis num1, num2 e btn_somar aos widgets que definimos durante a criação do interface. O método findViewById permite “encontrar” um widget por id (definido durante a criação do interface) que se encontra definido na classe R (que se encontra em gen—>pt.pplware—>R.java).

droid_05

O próximo passo é programar um evento para o botão btn_somar. Basicamente pretende-se que quando o utilizador carregar no botão, seja apresentada a soma entre o valor inserido na edt_num1 e edt_num2.

Começamos por criar um listener para o evento Onclick e nesse momento “apanhamos” os valores das EditTexts. De seguida calculamos a soma dos valores e apresentamos o resultado através de um componente do tipo AlertDialog.droid_06

Resultado

Depois de programarem correctamente a aplicação, basta executar a mesma e testar.

droid_resultado

Código Completo (calculadora.java)
package pt.pplware;
import android.app.Activity;
import android.app.AlertDialog;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;   public class calculadora extends Activity {   EditText num1, num2;
 Button btn_somar;
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);   num1 = (EditText) findViewById(R.id.edt_num1);
 num2 = (EditText) findViewById(R.id.edt_num2);
 btn_somar = (Button) findViewById(R.id.btn_somar);   btn_somar.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View v) {   //Obtem valor da EditText1 e EditText2
 double val1 = Double.parseDouble(num1.getText().toString());
 double val2 = Double.parseDouble(num2.getText().toString());   //Calcula soma dos numeros
 double soma = val1+val2;   // Apresenta resultados
 AlertDialog.Builder infoResultado = new AlertDialog.Builder(calculadora.this);
 infoResultado.setTitle("Resultado");
 infoResultado.setMessage("A Soma é: "+soma);
 infoResultado.setNeutralButton("Ok",null);
 infoResultado.show();
 }
 });
 }
}

Esperamos que este pequeno artigo vos incentive a entrarem no mundo da programação para Android. Tal como tive a oportunidade de referir a alguns leitores, estes são artigos de iniciação que têm como objectivo ensinar a dar os primeiros na programação para dispositivos móveis com Android.

Agradeço desde já que coloquem todas as vossas duvidas em comentário para que eu e leitores mais experientes possamos dar uma ajuda. Lembrem-se que este é um espaço de partilha de know how e experiências. Começar a programar para Android não é difícil…é preciso é força de vontade e claro que umas dicas dão sempre jeito.
Como trabalho para casa (TPC), podem tentar implementar a função de subtrair, multiplicar e dividir. Depois se pretenderem ver publicado o vosso trabalho enviem-me o mesmo para o e-mail (prometo que não disponibilizo no market Android :) ).

Artigos relacionados

Download: calculadora_android

Swype 3.0 beta – O teclado fantástico para Android

Swype 3.0 beta – O teclado fantástico para Android

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

A alternativa mais popular ao teclado tradicional do Android está disponível para download. Aproveitem !!!

Muito se tem falado nos métodos de interacção (input de dados) entre o utilizador e os gadgets, e o certo é que nos últimos tempos têm aparecidos muitos projectos interessante para tentar ultrapassar esta barreira.

Já falamos dos projectos The 8pen, SlideIT Keyboard e hoje é a vez de apresentar o tão procurado Swype.

swype_00

Como todos sabemos, uma das barreiras entre a interacção do utilizador com um smartphone é sem dúvida a introdução de dados (ex. escrita de um e-mail, SMS, texto, etc). A adaptação dos teclados QWERTY tradicionais aos smartphones é apenas uma solução de recursos e é hora de inventar novas soluções.

A empresa responsável pelo swype decidiu abrir de novo abrir as portas ao utilizadores do Android e disponibilizar gratuitamente o swype.

swype_01

Criado por Randy Marsden e Cliff Kushler (co-criador do T9) o Swype é um projecto que implementa uma nova forma de escrever em qualquer gadget com um ecrã táctil, como é cada vez mais comum em telemóveis, tablets, etc. Com o Swype é possível escrever de forma rápida e fácil deslizando apenas os dedos.

Veja o Swype 3.0 em acção

Tal como podemos ver no vídeo, Brian Yee, director do Swype apresenta a principal melhoria designada de  “predictive tap“, que garante melhor precisão na escrita de palavras (escrevendo ou deslizando sobre o teclado). Além do predictive tap, o Swype 3.0 beta traz novas a funcionalidades para tablets com o Android Honeycomb.

Podem conferir todas as novidades e instalar o Swype 3 a partir daqui .

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.