Vamos começar a programar para Android?

Vamos começar a programar para Android?

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

Por Carlos Rodrigues e José Afonso para o PPLWARE

Aprenda a instalar o SDK 3.0 Android no Eclipse para preparar o ambiente de programação

O Android é o sistema operativo do momento. São muitos os  dispositivos móveis equipados com esta plataforma da Google e o mercado das aplicações tem crescido de dia para dia. Os programadores “apontam baterias” para este segmento pois, através do market, nem precisam de sair de casa para apresentar/vender os seus projectos ao mundo.

Este artigo visa mostrar os passos para instalar/configurar um ambiente para o desenvolvimento de aplicações Android usando o SDK 3.0 e o Eclipse IDE (provavelmente o IDE mais usado para programação em Android).

android_00

Requisitos:

  • Eclipse 3.4 (Ganymede) ou mais recente
  • Eclipse JDT plugin (incluído na maior parte das distribuições Eclipse IDE (Para descarregar e instalar ou actualizar o Eclipse: http://www.eclipse.org/downloads/)
  • Existem vários pacotes do Eclipse disponíveis para cada plataforma. Para desenvolver aplicações Android recomendam-se os seguintes pacotes:
    • Eclipse IDE for Java Developers
    • Eclipse Classic (versão 3.5.1 ou mais recentes)
    • Eclipse IDE for Java EE Developers
  • JDK 5 or JDK 6
  • Android Development Tools plugin

Vamos então apresentar como integrar o SDK com o Eclipse. Para tal devem seguir os seguintes passos.

Passo 1: É necessário fazer download do Android SDK e do Eclipse IDE. Basta descompactá-los para uma directoria específica (ex: c:\dev\ )

Passo 2: Iniciar o Eclipse, abrir o menu Help > Install new software

clip_image001
Adicionar esta localização https://dl-ssl.google.com/android/eclipse/ (para o Eclipse 3.5 Galileo ou 3.6 Helios)

clip_image002
Na caixa de diálogo Available Software , seleccione a checkbox Developer Tools e clique seguinte:

clip_image003
Na janela seguinte, será possível ver uma lista de ferramentas para ser descarregadas. Clique seguinte e aceite as licenças e clique Finish. Quando a  instalação terminar, reinicie o Eclipse.

Passo 3: Vá agora ao menu  Window> Preferences e escolha a opção Android. Clique no botão Browse.. e localize a pasta para onde extraiu o Android SDK ( c:\dev) e clique em Apply e depois Ok.

clip_image005
Passo 4: Clique no botão clip_image007 e instale os pacotes disponíveis.

clip_image009

Depois disso é necessário criar um dispositivo virtual Android (Android Virtual Device ou AVD) que irá correr as aplicações que desenvolvermos sem necessidade de possuirmos um equipamento Android.

clip_image011

Agora é necessário escolher o nome e  alvo (target).

Um Target define qual a API apropriada para o tipo de software que se pretende desenvolver, neste caso será a versão 3.0. É também necessário escolher a quantidade de memória disponível para o dispositivo virtual, se terá cartão de memória (neste caso 1024Mb) e o hardware que se quer emular (GPS, acelerómetro, trackball, GPS, bluetooth, ..).

Clicar em Finish.

De seguida, ir ao menu New > Project > Android para criar um, novo projecto.

clip_image013

De uma forma rápida fica o que é necessário preencher em cada campo.

– Project Name:
Nome do projecto Android e também da directoria que irá conter os ficheiros do projecto.

– Application Name:
Nome da aplicação. Este é o nome que irá aparecer no dispositivo Android (neste caso helloMobileStone).

– Package Name:

Este é o namespace do pacote e segue as regras de naming do Java. É também o namespace onde a Activity (explicada a seguir) será criada. O nome do package deve ser único, para evitar conflitos nos nomes das classes (neste caso tst.mobilestone.net, é o nosso namespace reservado para testes). Ao desenvolver as suas aplicações deverá utilizar um namespace próprio que o identifique a si ou à empresa onde trabalha.

Create Activity:
Este é o nome da classe gerada pelo plugin. Esta classe é uma extensão (ver polimorfismo) da classe Activity do Android.

Uma Activity  é uma classe que pode ser executada. Pode ser usada para criar interfaces (mas não é obrigatório que o faça). Como a checkbox sugere, é opcional, mas uma Activity é quase sempre usada como base para uma aplicação.

Min SDK Version:
Este valor especifica a versão mínima da API requerida para executar a aplicação.

O nosso projecto Android está quase pronto para entrar em Acção. Escolha no painel do lado direito o ficheiro MobileStone.java e insira o seguinte código:

package net.mobilestone.tst;
 import android.app.Activity;
 import android.os.Bundle;
 import android.widget.TextView;
 public class MobileStone extends Activity {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 TextView tv = new TextView(this);
 tv.setText("Hello, Android");
 setContentView(tv);
 }
 }

Execute a aplicação:
O plugin ADT torna tudo isto bastante fácil: Escolha o menu Run > Run. Seleccione  ”Android Application”.
Finalmente o Eclipse ADT arranca a aplicação dentro do virtual device mostrando o seguinte resultado:

clip_image015

clip_image017

Espero que tenham gostado. Até breve

PHP é a Quinta-Feira – Gráficos em PHP com pChart

PHP é a Quinta-Feira – Gráficos em PHP com pChart

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

Por Pedro Peixoto para o PPLWARE

Nos dias correntes, e com a necessidade de melhorar o conteúdo das nossas páginas, é cada vez mais frequente apresentar dados na forma como melhor se entendem: em gráficos. Existem várias ferramentas que servem este propósito, umas pagas outras gratuitas, umas mais simples outras mais complexas, com animações ou sem animações. Hoje vamos conhecer o pChart, uma classe PHP que nos permite gerar gráficos de forma rápida, fácil e gratuita.

Para este exemplo vamos fazer um gráfico em pilha com dados fictícios das visitas do PPLWARE blog e PPLWARE fórum.

pchart_00

Preparação

Depois de fazer download da classe é necessário fazer os includes:

include("pChart/class/pData.class.php");
include("pChart/class/pDraw.class.php");
include("pChart/class/pImage.class.php");

De seguida vamos inicializar objecto que armazenará os dados:

MyData = new pData();

Para adicionar séries usa-se a função addPoints que recebe um array de dados e o nome da série:

$MyData->addPoints(array(7,8,15,20,18,12,8,19,9,16,20,8),"PPLWARE Blog");
$MyData->addPoints(array(19,0,8,8,8,12,19,10,5,12,20,8),"PPLWARE Forum");
$MyData->addPoints(array('JAN','FEB','MAR','ABR','MAI','JUN','JUL','AGO','SET','OUT','NOV','DEZ'),"Mes");

Como no nosso caso, queremos que uma das series seja o eixo das abcissas devemos indica-lo através da função setAbscissa:

$MyData->setAbscissa("Mes");

De seguida vamos indicar o texto a apresentar nos eixos, como uma das series vai ser o eixo dos xx, basta indicarmos o texto para o eixo dos yy, usamos a função setAxisName:

$MyData->setAxisName(0,"Visitantes únicos");

Uma vez que os dados que temos estão em milhares, vamos indicar a unidade usando a função setAxisUnit, no fundo esta função acrescenta à frente dos valores/eixos/legendas o texto indicado no segundo parâmetro, o primeiro parâmetro é o id do eixo, neste caso yy:

$MyData->setAxisUnit(0,”000″); ou $MyData->setAxisUnit(0,”k”);

Desenho

Agora que já temos os nossos dados preparados vamos desenhar o gráfico.

Em primeiro lugar temos de criar um objecto gráfico:

$myPicture = new pImage(1199,230,$MyData);

De seguida indicamos as dimensões usando a função setGraphArea:

$myPicture->setGraphArea(60,30,950,190);

Temos ainda de escolher a fonte a usar para a representação de texto através da função setFontProperties:

$myPicture->setFontProperties(array("FontName"=>"pChart/fonts/pf_arma_five.ttf","FontSize"=>6));

Falta apenas configurar a escala, neste capítulo há muitas opções disponíveis, neste caso queremos apenas uma escala simples com os yy entre 0 e 50, para isso usamos o drawScale.

$AxisBoundaries = array(0=>array("Min"=>0,"Max"=>50));
$myPicture->drawScale(array("Mode"=>SCALE_MODE_MANUAL,"ManualScale"=>$AxisBoundaries));

Estamos prontos para, finalmente, gerar o gráfico, como queremos um gráfico em pilha, usamos a funçãodrawStackedBarChart, mas esta classe oferece muitos outros. Vamos então gerar um gráfico em pilha, com valores nas próprias colunas, cor automática, efeito de cor gradiente e contorno:

$myPicture->drawStackedBarChart(array("DisplayValues"=>TRUE,"DisplayColor"=>DISPLAY_AUTO,"Gradient"=>TRUE,"Surrounding"=>60));

Podemos adicionalmente colocar uma legenda, que neste caso é muito útil, usando a função drawLegend, indicado a sua disposição:

$myPicture->drawLegend(570,212,array("Style"=>LEGEND_NOBORDER,"Mode"=>LEGEND_HORIZONTAL));

Por fim, temos de fazer o output. Esta classe possibilita que uma imagem seja guardada em ficheiro ou mostrada directamente na própria página que é o que vamos fazer usando a função stroke:

$myPicture->stroke();

Eis o resultado final:

php_00

Sandbox

Existe ainda uma ferramenta chamada sandbox para a construção de gráficos através de um interface gráfico, para o caso de o utilizador não querer estar a escrever código.

clip_image004

Conclusão

O pChart é uma classe poderosa para a construção de gráficos que tanto pode ser usada para a construção de simples gráficos, como para os gráficos mais complexos. Possui muitas opções, parâmetros e funções que nos permitem fazer qualquer gráfico imaginável, pelo que não podemos deixar de lhe dar algum destaque.

A inclusão de javascript permite ainda implementar algumas funcionalidades de interacção, embora o facto de trabalhar com imagens estáticas o limite um pouco neste capítulo.

O pChart é muito mais do que uma simples classe para gerar gráficos, podendo por exemplo:

– Gerar códigos de barra

php_01

– Diagramas, Esquemas ou até mesmo simples imagens.

php_02

php_03

php_04

Por tudo o pChart isto é uma classe bastante útil que pode ser útil em qualquer altura. A ferramenta “Sandbox” disponibiliza ainda uma forma mais fácil de gerar gráficos, tornando esta classe uma das melhores entre tantas outras semelhantes, e o melhor de tudo: é grátis!

KeePassDroid – As suas passwords seguras no Android

KeePassDroid – As suas passwords seguras no Android

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

Como utilizadores de vários serviços disponíveis na Internet (e não só), necessitamos normalmente de credenciais de acesso (utilizador/password). É a conta do facebook, é a conta de e-mail, é o site das finanças, do banco, da escola….enfim um conjunto de serviços para os quais, devemos tentar sempre ter credenciais de acesso diferentes (por questões de segurança).

Apesar de não ser uma boa política de segurança escrever todas as passwords que possuímos, o certo é que com tantas passwords torna-se difícil a qualquer ser humano manter essa informação apenas em memória. Para ultrapassar esta questão, vamos conhecer o KeePassDroid para Android.

keepass_droid_02

O KeePassDroid é uma versão para Android do popular Keepass, uma aplicação gratuita open-source que permite gerir as suas passwords de forma segura ( recorrendo ao algoritmo Rijndael também conhecido por AES) e longe de olhares alheios.

keepass_droid_01

O KeePassDroid partilha muita das funcionalidades do Keepass e no sentido de manterem sincronizadas as passwords entre o Keepass instalado no PC e o KeePassDroid instalado no smartphone com Android, podem sempre ao fantástico Dropbox. Para tal, apenas necessitam de colocar a base de dados do Keepass/KeePassDroid  partilhada via Dropbox.

A segurança é baseada em pessoas, e as pessoas cometem às vezes cometem erros logo “ A Segurança Perfeita é um Mito!”

Como instalar o KeePassDroid no Android?

Caso queiram experimentar esta aplicação, basta que apontem o vosso leitor de códigos QR para a imagem abaixo, e serão encaminhados para a aplicação no Android Market.

droid_pass_qr

O KeePassDroid é uma aplicação que recomendo guardar as suas passwords uma vez que garante um nível de segurança elevado. No entanto muita da segurança depende do utilizador. Como se diz na gíria “O computador mais seguro do mundo teria de estar num cofre, desligado, no fundo do oceano… Guardado por tubarões, exércitos e porta-aviões… E mesmo assim seria possível convencer alguém que o estivesse a guardar para o ir ligar….

Artigos relacionados

Homepage: keepassdroid

A melhor forma de partilha entre o PC e o Android!

A melhor forma de partilha entre o PC e o Android!

Criado por Hugo Cura em 25 de Abril de 2011 | 14 comentários

Já fez mais de um ano que o Pedro Simões deu a conhecer a aplicação WebSharing File/Media Sync. Esta aplicação facilita a troca de todo o tipo de ficheiros entre o computador e Android. O método usado é com recurso ao browser do computador.

Relativamente à versão paga, a versão Lite (gratuita) tem algumas limitações como o não suporte de transferência de múltiplos ficheiros ou pastas inteiras, stream de música, visualizar fotos e vídeos e WebDAV Server. Mas que funcionalidade é esta de WebDAV?

E que tal se fosse possível, a partir do gestor de ficheiros do seu computador, aceder ao cartão SD do Android da mesma forma que acede a uma simples pasta ou unidade? O WebDAV permite-o, e tudo via Wi-Fi!

Necessito muitas vezes de recorrer à troca de ficheiros entre PC e Android, principalmente para copiar fotos, vídeos e capturas do ecrã. A ligação de um cabo físico deixou de ser cómoda há muito, até porque “nunca está onde eu o deixei”, mas a rede Wi-Fi está sempre ao alcance e pronta a usar.

Para tal basta pegar no Android e iniciar a aplicação WebSharing. No gestor de ficheiros do PC basta abrir a pasta configurada previamente e todo o conteúdo está imediatamente ao dispor, quer seja em Windows, Linux ou Mac OS X.

Configuração de WebDAV no Windows Vista ou 7
  • Certificar que a opção WebDAV está activada nas configurações do WebSharing;
  • Iniciar o WebSharing no Android;
  • Abrir o Explorador do Windows (tecla win+E ou Iniciar > Computador) e no topo da janela escolher “Mapear Unidade de Rede”;
  • Clicar em “Ligar a um Web site que possa utilizar para armazenar os seus documentos e imagens”, no fundo a azul;
  • Aparecerá um assistente de configuração. Clicar em Seguinte para iniciar e novamente Seguinte para escolher uma localização de rede personalizada;
  • Basta colocar o endereço IP:porta fornecido pelo WebSharing (no meu caso éhttp://192.168.178.23:2112/) e clicar em Seguinte;
  • Atribuir um nome ao local de rede, nome que aparecerá no Explorador do Windows juntamente com as outras partições. No meu caso escolhi “Android”;
  • Certificar que o campo “Abrir este local da rede quando eu clicar em concluir” e clicar em Concluir;
  • Assim que esse local de rede é aberto pela primeira vez, é necessário introduzir o Nome de Utilizador ePalavra-passe. Pode usar o nome de utilizador “owner” ou “guest”, conforme use uma palavra-passe fixa ou aleatória, gerada pelo WebSharing. No caso de usar palavra-passe fixa e o computador não seja partilhado, será bastante útil assinalar o campo “Memorizar minhas credenciais”;
  • Feito. Desfrute!

Nas próximas vezes que seja necessário trocar ficheiros, basta iniciar a aplicação WebSharing, abrir a respectiva pasta no Explorador do Windows e confirmar as credenciais. Simples e rápido!


Se é utilizador de Linux (nomeadamente Ubuntu) ou Mac OS X basta seguir as instruções descritas abaixo. Estas instruções podem ser encontradas no Help do WebSharing.

Para quem necessita de trocar frequentemente conteúdo entre o Android e o computador esta é sem dúvida amelhor e mais rápida forma de o fazer. Certamente que dessa forma, o valor que esta aplicação custa será bastante bem empregue. Desde que uso a funcionalidade WebDAV nunca mais necessitei de interagir com a interface do browser.

Na aplicação e nos seus detalhes está descrito que a funcionalidade WebDAV é beta. Não entanto nunca tive qualquer problema relacionado com essa funcionalidade, funcionou sempre muito bem. Note-se que para ficheiros grandes, pelo menos maiores que 200MB, este método não concluiu a transferência com sucesso, pelo menos no meu caso. Esta aplicação não é actualizada pelos seus programadores desde 2 de Junho de 2010.

Licença: Pago (~€ 2.05)
Sistemas Operativos: Android 1.5+
Download:

Homepage: NextApp

O que esconde o Android? Conheça alguns códigos secretos

O que esconde o Android? Conheça alguns códigos secretos

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

Há uns anos atrás, era comum introduzir nos telefones “código secretos” que davam ao utilizador algumas informações escondidas do equipamento e alguns códigos até davam para desbloquear o equipamento.

Recentemente descobri que também há “códigos secretos” para a plataforma Android. Vamos conhecer quais são e o que fazem.

codes_00

Para experimentar os código secretos que apresentamos a seguir, o utilizador apenas deve colocar o telefone em modo de ligação e digitar os mesmos. Antes de os aplicarem, devem ler atentamente qual a sua função.

Códigos secretos para Android

Para aceder a informações “secretas” sobre o :

  • Telefone
  • Bateria
  • Histórico da bateria
  • Estatísticas de utilização
  • Informações sobre a placa wireless

*#*#4636#*#*

code_01

Fazer reset ao telefone e repor os parâmetros de fábrica.

*#*#7780#*#*

Será removida a seguinte informação:

  • Conta do Google e definições
  • Informação das aplicações e sistema
  • Aplicações instaladas

Não será removido:

  • O software que vem de fábrica com o equipamento
  • Fotos, musica e outros ficheiros que estejam no cartão SD

Informações sobre a câmara do equipamento:

*#*#34971539#*#*

Trocar a acção do botão “End Call e Power”

*#*#7594#*#*

Para realizar vários testes a interface Wifi, GPS e Bluetooth podem usar os seguintes comandos:

*#*#232339#*#* ou *#*#526#*#* ou *#*#528#*#*

*#*#232338#*#* – Apresenta o MacAddress da interface Wifi

*#*#1472365#*#* – Teste ao GPS

*#*#1575#*#* – Outro teste ao GPS

*#*#232331#*#* – Teste ao Bluetooth

*#*#232337#*# – Endereço do Bluetooth

Apresentar informações sobre o Gtalk

*#*#8255#*#*

Informações sobre versão do firmware

*#*#4986*2650468#*#* – PDA, Phone, H/W, RFCallDate

*#*#1234#*#* – PDA e Telefone

*#*#1111#*#* – Versão FTA SW

*#*#2222#*#* – Versão FTA HW

*#*#44336#*#* – PDA, Phone, CSC, Build Time, Changelist number

Códigos para realização de vários testes

*#*#0283#*#* – Packet Loopback

*#*#0*#*#* – Teste LCD

*#*#0673#*#* ou *#*#0289#*#* – Teste melodia

*#*#0842#*#* – Teste ao equipamento  (vibração e backlight)

*#*#2663#*#* – Versão do Touch screen

*#*#2664#*#* – Teste ao Touch screen

*#*#0588#*#* – Teste ao sensor de proximidade

*#*#3264#*#* – Versão da RAM

O Pplware e o autor deste artigo não se responsabilizam por quaisquer danos causados por instruções, inerentes ao artigo ou aos comentários, que possam resultar na perda da garantia do equipamento.”

Alguns dos comandos foram testados com sucesso no A1 e outros não funcionaram.

Homepage: Android Hidden Secret Codes

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

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.

light_00

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

light_01

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>

light_02

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

Homepage: LightBox2

PHP é à quinta-feira – Apresentação de imagens

PHP é à quinta-feira – Apresentação de imagens

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

Por Pedro Peixoto para o PPLWARE
Como o último artigo despertou bastante interesse, apesar do seu grau de simplicidade, vamos, esta semana, continuar na mesma linha e aprender a trabalhar com o elemento <img>. Neste artigo poderemos ver como fazer output de imagens nas páginas geradas em PHP, armazenando os seu endereços na base de dados.

php1

Uma imagem tem dois atributos importantes:

  • Src – Url da imagem
  • Alt – Texto alternativo

São estes dois atributos que podemos armazenar numa tabela, e ao contrário do que muitos pensam, a imagem física não fica na própria base de dados mas sim no servidor, apenas o seu endereço é guardado.

Para este exercício vamos usar uma imagem chamada ‘pplware.png’.

clip_image002

Para apresentar a imagem através do PHP, podemos usar o seguinte código.

<?php   $src='pplware.png';   $alt='Logotipo PPLWARE';   echo '<img src="' . $src . '" alt="' . $alt . '"/>';   ?>

Ao abrir esta página teremos o seguinte resultado:

clip_image004

A informação das variáveis $alt e $src poderiam ser introduzidas numa base de dados como a da imagem seguinte:

clip_image006

Agora vamos modificar o código:

<

?php   //ligação DB   mysql_connect('localhost','root','mysql');   mysql_select_db('PPLWARE');   //consulta   $query="Select * from Galeria where ID=1";   $resultado=mysql_query($query);   $linha=mysql_fetch_array($resultado);   //output imagem   $src=$linha['URL'];   $alt=$linha['DESCRICAO'];   echo '<img src="' . $src . '" alt="' . $alt . '"/>';   ?>

O resultado é exactamente o mesmo:

clip_image008

Posto isto, e visto que o script já está completamente dinâmico, podemos incluir um ciclo while e fazer uma mini galeria para todas as imagens da base de dados (não esquecer de retirar a cláusula where da query:

<?php   mysql_connect('localhost','root','mysql');   mysql_select_db('PPLWARE');   $query="Select * from Galeria";   $resultado=mysql_query($query);   while($linha=mysql_fetch_array($resultado))   {   $src=$linha['URL'];   $alt=$linha['DESCRICAO'];   echo '<img src="' . $src . '" alt="' . $alt . '"/>';   }   ?>

Falta agora adicionar à base de dados mais imagens e não esquecer de as colocar fisicamente no servidor, este processo também poderia ser feito através do PHP, mas “upload de ficheiros” é um tema para um próximo artigo.

Como o campo URL é um caminho para uma imagem, também podemos colocar um caminho da WEB, é indiferente:

clip_image010

E o resultado final:

clip_image012