Syncdocs – Os seus Google Docs no PC e vice-versa

Syncdocs – Os seus Google Docs no PC e vice-versa

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

O Google Docs veio para ficar e revolucionar a forma como criamos documentos e os partilhamos com toda a nossa comunidade. Permite que criemos e editemos os nossos documentos na Internet com extrema facilidade. Esta característica requer que alteremos a forma como trabalhamos e como interagimos com os nossos colegas ou com outras pessoas.

O facto de abraçarmos essa forma de trabalhar obriga-nos a estar ligados constantemente à Internet pois só assim conseguimos aceder a esses documentos. Outro problema que pode existir é a resistência natural que existe à mudança e a vontade de querermos trabalhar com as ferramentas de sempre. O Syncdocs vem resolver estes e outros problemas com uma simples solução.

Os cenários que o Syncdocs permite implementar são diversos. Não existe uma função base que possa ser identificada, existe sim um conjunto de funções que podem ser usadas e aproveitadas, por forma a serem mais produtivos.

O Syncdocs permite que sincronizem uma ou mais contas do Google Docs com o vosso PC. Com este sincronismo vamos conseguir ter no nosso PC todos os documentos, imagens ou outros ficheiros que estejam na vossa conta.

Para além de conseguirmos sincronizar no sentido da Google para o PC, o Syncdocs permite que sincronizem também no sentido do PC para a Google. Tudo se processa numa pasta a ser indicada pelo utilizador e tudo o que aí estiver dentro será sempre sincronizado. Está assim definida uma forma simples de fazerem backup de todos os documentos que têm no Google Docs, ou o oposto.

Se quiserem abdicar completamente de todos os diferentes Offices que possam ter no vosso PC, podem ainda usar o Syncdocs para definir o Google Docs como o vosso editor de documentos a ser usado no vosso PC. Dessa forma sempre que abrirem um documento, este vai ser importado e aberto no browser.

Tudo começa com a instalação do Syncdocs. Depois disso existe a necessidade de uma primeira configuração, para que ele possa iniciar as suas funções. Definam o local de configuração, que vem por omissão numa pasta dos vossos documentos. Escolham que tipos de documentos que pretendem sincronizar, se pretendem converter os documentos e qual a integração com o Windows.

A velocidade com o que o processo de sincronismo decorre depende da quantidade de ficheiros que têm na vossa conta. Sempre que editarem e alterarem um ficheiro que esteja dentro da pasta que está a ser sincronizada, esta será actualizada na Google. O mesmo processo decorre se editarem um documento na interface do Google Docs.

Sempre que pretenderem aceder ao Syncdocs, podem faze-lo através do ícone que vai ficar residente na Área de Notificação. Ao clicarem com o botão direito do rato nesse ícone, vão ter à vossa disponibilidade um conjunto de opções e de informação útil. Podem em qualquer altura alterar as configurações do Syncdocs através dessa interface.

O Syncdocs adiciona ainda ao menu de contexto dos ficheiros a opção de o abrir dentro do Google Docs. Basta escolherem o ficheiro em causa e seleccionarem a opção View in Google Docs no menu que activam com o botão direito do rato.

O vídeo abaixo apresenta de forma muito completa tudo o que podem fazer com o Syncdocs e a forma de o fazerem. Assistam e vejam tudo o que o Syncdocs é capaz:

Com o Syncdocs vão poder ter todos os vossos documentos salvaguardados e sincronizados entre o PC e o Google Docs. Podem também escolher a plataforma que mais se adapta ás vossas necessidades e adoptar o Google Docs como o editor de documentos ou uma das muitas suites Office que estão disponíveis.

Integra-se muito bem com o Windows e integra-o com o Google Docs. É uma ferramenta com muitas utilidades e que pode ser usada para vos facilitar a vida. Decidam se pretendem adoptar o Google Docs como editor padrão, usem o Syncdocs para o definir.

Licença: Freeware
Sistemas Operativos: Windows XP/ Vista/ 7
Download: Syncdocs 0.51 [1.96MB]
Homepage: Syncdocs

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

Primeira aplicação em Android

Primeira aplicação em Android – Parabéns PPLWARE

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

Aproveitando que hoje é um dia muito importante para o pplware, decidimos “inaugurar” a nossa rubrica de programação para dispositivos móveis com Android. Como normalmente refiro, programar em Android não é diferente de programar em outras linguagens de programação, no entanto é necessário perceber como se interligam os layouts em XML, com as classes em Java e por aí fora.

Vamos lá então começar com o tradicional “Hello World” e aproveitamos para dar os parabéns ao pplware pelo sexto aniversário.

android_10

Há uma lenda que diz o seguinte “Se vais começar na programação e a tua primeira aplicação não é o Hello World, nunca vais ser bom programador !!!!” :) .

Depois de prepararem o vosso ambiente de trabalho Eclipse + SDK (ver aqui), vamos abrir o Eclipse e seguir os seguintes passos:

Passo 1 – Criar um novo projecto Android. Para tal, no Eclipse, escolhemos File—>New—>Other e depois escolhemos Android Project e carregamos em Next.

android_00

Passo 2 – Em seguida vamos indicar os parâmetros do nosso projecto

  • Project name – Nome a atribuir ao projecto
  • Built Target – Requisito mínimo a nível de versão  Android para correr a nossa aplicação
  • Application name: Nome da aplicação
  • Package name: Namespace do pacote a criar ( No mínimo dois nomes).
  • Create Activiy: (Opcional) Nome a associar classe default.
  • Min SKD Version: versão mínima do SDK (Podem ver o número a associar no Built Target)

android_01

Para finalizar carregamos em Finish. Depois de definido os parâmetros anteriores, a aplicação está pronta a funcionar. Vamos apenas dar uma vista de olhos na estrutura do projecto.

Passo 3 – De um modo geral, um projecto para Android é constituído por classes .java (que estão no directório src), layouts baseados em .xml (que estão normalmente dentro da pasta res/layouts), ficheiros em .xml que podem guardar valores de variáveis e mais um conjunto de directórios que servem de suporte ao projecto (para incluir imagens, ficheiros de áudio, etc).

android_02

Passo 4 – Abrindo o ficheiro HelloWorld.java, podemos verificar que foi  uma classe que deriva da classe Activity e que possui um método onCreate que invoca o método setContentView, que invoca o layout main.

android_03

Passo 5 – Vamos agora dar uma espreitadela ao ficheiro main.xml que se encontra dentro da pasta res/layout. Como podemos verificar, é exibido um preview do layout e apresentado o texto “Hello Word, HelloWord” através de uma textview.

android_04

Passo 6 – Acedendo às propriedades da textview, podemos verificar que o texto a apresentar vem da variávelhello que é do tipo String.

android_05

Passo 7 – A informação dessa variável encontra-se no ficheiro strings.xml, que se encontra em res/values.

android_06

Passo 8 – Vamos agora correr a aplicação e ver o resultado. para tal, convém seleccionar a classe principal (neste caso HelloWorld.java) e carregar no botão Run

android_07

Passo 9 – Depois escolhemos a opção Android Application e deixamos o emulador correr.

android_08

Passo 10 – E está feita a vossa primeira aplicação para Android. Caso tenham o smartphone com Android ligado ao PC, podem escolher que a mesma corre directamente no equipamento.

android_09

Trabalho de casa

Agora que começaram a dar os primeiros passos na programação para Android, experimentem fazer o seguinte: em vez de apresentar o Hello World, a aplicação deverá apresentar o texto PARABENS PPLWARE pelo teu 6º Aniversário!!!!, tal como é apresentado na primeira imagem. Deixo uma dica, lembram-se da String hello? Vejam o Passo 6.

Considerações finais

Este é o nosso primeiro artigo sobre programação para Android e esperamos que tenham compreendido. Nos próximos artigos desta rubrica abordaremos mais algumas características e pormenores. A fase inicial (fase de adaptação) é sempre a mais difícil e por isso é importante saber a vossa opinião, as vossas duvidas, as vossas sugestões.

Download: HelloWorld