Web & Application Layout Design – Pack #1

(Clique para ver a preview completa)

Bom, decidi finalmente terminar o pack que anteriormente tinha falado e coloca-lo à vossa disposição quase gratuitamente… então, o que devem fazer? Simples… em baixo vão encontrar um botão para fazer uma doaçao no paypal, o valor minimo é de 4.5 € / 6.5 $USD / 9.98 BRL. Assim que a doação for feita envio o arquivo photoshop. (PSD) para o email de onde veio a doação.

Este projeto contém:

1 window layout, header, area de notificação e notificação, 6 controlos de janela, 5 scrollbars + 2 scroll parts alternativas, 1 Tab Panel (+ 1 Inside button + 1 Tooltip + 1 Image layout), 3 Progress bars (+ 1 small tooltip), 3 Tooltips, 1 Alert / popup / overlay box ( + 2 botões + 1 botão fechar), 1 Text Area, 1 Text Input, 1 Text Area + 1 Extra scroll, 1 List layout / menu / combo, 1 Combo box, 3 Extended tooltips / info box, 1 Menu bar (+ 1 selected + 1 over skins), 3 radio buttons (selected, disabled, active), 3 Checkbox’s (active, selected, disabled), 4 Butões com icons, 2 Butões, 1 Accordion.

 

O arquivo PSD está todo ele elaborado em shapes, formas vetoriais que permitem a alteração de tamanhos sem perder qualidade. Todos os elementos são criados 100% vetorialmente, o que quer dizer que podem alterar tudo por completo. Segue a pré-visualização completa de tudo que é disponibilizado no PSD.

A doação pode ser feita clicando no botão que se segue:


Qualquer duvida, sugestão ou crítica é só avisar! Se quiser efetuar uma doação de valor maior, use o icon paypal ao fundo deste blog.

 

p.s. Se desejar uso exclusivo do layout (por exemplo para um cliente) me informe pois posso propor outro valor para a doação que vai dar-lhe unicamente a si o layout. Depois disso ele será retirado do blog e passará a ser propriedade sua.

Abraço.

9 Comentarios

Este já foi, agora que venha 2011!!!

Bom, caros amigos, depois de um ano bem intenso, chegou a hora do descanso, que apesar de dever ser mais tempo apenas vou conseguir esquecer por completo o flex, flash, php, java, as3, red5 e derivados durante apenas uns dias.

Amanhã estou de partida para um dos países que já por 3 vezes estive para visitar, mas que só agora vou finalmente… falo-vos da Suiça. Vai valer descanso, descoberta e acima de tudo o recarregar de baterias para o novo ano.

Neste novo ano que vai começar já bem envolvente com trabalho, mas é para isso que cá estamos!! ;)

Bom, no ano passado defini alguns objectivos para este ano que está a acabar, e o principal deles foi iniciar-me no java, coisa que finalmente consegui…então para este ano novo, quero aperfeiçoar-me em java, mas não só, quero também dar hipótese a algumas tecnologias / ambientes diferentes como postgress, oracle, java, FMS, c#,  etc’s… e claro, continuar a sério com o flex 4 que também conto em tirar a certificação da adobe.

Agora só me resta desejar-vos um novo ano cheio de sucesso, trabalho, saúde e alegria!!

Que venha 2011!!

Abraço!!

Sem Comentarios

Red5, Flex, Java Audio & Video Streams

Bom, já aqui tinha falado do red5, que tinha iniciado a minha luta com o servidor de streaming 100% Open Source, mas hoje venho falar um pouco mais do que encontrei quando tive que meter mãos à obra!.

O que é o red5?

O Red5 é um servidor de media, de entre algumas características, pauta-se pelo stream de audio e video com bastantes formatos suportados como FLV, MP3, MP4, F4V, AAC, M4A, gravação de streams do cliente em formato FLV, shared objects, e remoting. O servidor em si passa por grandes semelhanças do tomcat, escrito totalmente em java e com aproximadamente a mesma estrutura de pastas. As aplicações também são colocadas na pasta webapps e em tudo a sua construção se parece como uma aplicaçâo qualquer java preparada para remoting.

Configurações e Aplicações

A grande e principal diferença é no entanto a obrigatoriedade de criação de uma Classe Application que extenda o ApplicationAdapter do package disponibilizado pelo red5. (red5.jar).  A partir daqui basta implementar uns quantas funções como appStart(), appStop(), appConnect() e appDisconnect() para termos a nossa aplicação funcional. A nivel de configurações de arquivos ele diferencia-se um pouco de uma típica aplicação tipo blazeDS.

Existem apenas 3 arquivos de configurações, o web.xml o red5-web.xml e red5-web.properties. Ambos têm as suas funções, mas pouco temos que configurar para ter a nossa aplicação completamente funcional.

O Arquivo web.xml, é o arquivo tipico das aplicações blazeDS, aqui apenas temos que configurar o displayName da nossa aplicação, o param-name e o param-value para informar ao servidor como a nossa aplicação será acedidada.

Segue-se o arquivo red5-web.xml, que apenas temos que informar a nossa classe principal, trata-se de um arquivo padrão que pode ser usado sem alterações na grande maioria das aplicações variando apenas na identificação do bean da aplicação principal: bean id=”web.handler” class=”minha.class.Application”.

Por final o arquivo red5-properties que informa o caminho, host e portas da  nossa aplicação. Aqui tambem pouco há a fazer.

Criem a pasta com o devido nome no webapps do red5, copiem a pasta WEB-INF para lá e re-iniciem. O Vosso servidor está operacional com a vosso aplicação disponibilizada.

Mas então o que permite o red5?

Permite muitas possibilidades, mesmo muitas… por exemplo, num projecto no qual estou a participar foi criada de raiz uma playlist de diversos arquivos flv no servidor red5, que ao iniciar vai criar um stream no servidor e carrega essa playlist nele. Por exemplo, no caso de videos (pode ser playlist de audio, videos ou até mista) a playlist carrega o primeiro video, quando este acaba passa para o segundo  e por aí além… chegando leia mais »

4 Comentarios |Tags: , , , , , , , ,

O papel do design nas aplicações web

Ou, o factor visual em aplicações RIA

Segundo a Theresa Neil, co-autora com o Bill Scott do livro Designing Web Interfaces, o design duma aplicação deve saber responder bem a estes 4 princípios:
  1. Application Structure
  2. Screen Design
  3. UI Controls
  4. Interaction Design

Ela fala em maior detalhe sobre estes princípios no artigo da UXmag. Eu não quero competir com ela porque comparado com estes gigantes eu só posso oferecer a minha perspectiva como um humilde curioso nestas matérias, analisando as coisas do lado de fora.

Existem muitas Rich Internet Applications, ou aplicações web, uma que eu uso é o Evernote. É listado pela Theresa Neil como estando numa lista das 50 RIAs com melhor usabilidade. Uso mais a aplicação do Evernote de desktop para lhe acessar mais fácilmente, mas uma vez ou outra já tive de ir ao site e ter a experiência em primeira mão de não só poder maravilhar os olhos com o bom aspecto da interface, como ao mesmo tempo conseguir aceder ou fazer aquilo que quero estando lá.

Os cães quando nascem, têm os olhos e as orelhas fechadas. Ao fim de um dia ou outro as orelhas abrem-se e podem começar a ouvir, e ao fim de uma semana é que finalmente abrem os olhos para ver o mundo. Mas logo desde que nascem já têm o nariz aberto e estão sempre a snifar. O nariz é o sentido mais poderoso que eles têm. O nosso é a visão.

Nós temos uma série de sentidos, o visual, o auditivo, olfactivo, gustativo e táctil. O ser humano funciona muito à base do visual, dos olhos e daquilo que vemos. É por isso que jogos com bons gráficos normalmente vendem bem, as raparigas jeitosas levam com olhares prolongados e as aplicações web conseguem-se tornar uma potencial boa experiência.

Se o design for bonito mas a usabilidade for péssima, estamos mal. Se o design for mau e a usabilidade for boa, estamos também mal. Não há desculpa, uma boa aplicação tem de ter um bom design. Se eu estiver em qualquer aplicação web/RIA e, ou não gostar do layout/design, ou não conseguir fazer aquilo que eu quero, vou ficar igualmente frustrado. Na primeira, porque a aplicação é feia e não me cativa (mesmo que consiga fazer as coisas), e na segunda, porque pode ser bonito mas depois não consigo encontrar aquela opção que está escondida sabe-se lá aonde.

Os 2 componentes leia mais »

Sem Comentarios |Tags: , , , ,

Tutorial Flex4 + BlazeDS + Java do zero #1

Como já tinha falado antes, entrei numa nova fase de alargar um pouco mais os meus conhecimentos; Quem conhece o blog sabe que o meu principal foco sempre foi o desenvolvimento em flash / flex com php / mysql. Tudo tecnologias completamente gratuitas, mas decidi entrar no mundo do java principalmente devido a um projeto no qual estou envolvido e que tive que criar uma aplicação de playlists em Java para o servidor de streaming Red5. Para aqueles que desconhecem o red5, ele é um servidor de streaming e remoting feito em java (baseado em grande parte no tomcat) com funcionalidades especificas para streamming.

Depois de muitas cabeçadas la consegui fazer o que se pedia e mais, ainda ganhei o tal bichinho do Java. Foi aqui que tudo começou!

Nesta primeira parte vou falar do que mais me deu voltas à cabeça a quando de isolar por completo o red5 e começar do zero no java com o flex. Acreditem que as configurações podem ser a maior dor de cabeça a quando de iniciar no java, principalmente no remoting.

Todos os passos que aqui vou apresentar com certeza serão alvo de criticas, desagrado, más interpretações e até maus hábitos, no entanto esta foi a forma que consegui, por isso se acharem que não está correto eu até agradeço que me informem da forma correta de o fazer. Então aqui vamos nós deste a instalação, configuração, primeira app java, primeira app flex e comunicação entre elas!

#1 . Requesitos

São necessários alguns procedimentos antes de iniciarmos a integração entres estas tecnologias, pelo que o primeiro passo é fazer o download de:

  • Eclipse IDE for java Developers, Pagina de download aqui.
  • Java Development Kit, Versão Atual JDK6, Pagina de download aqui.
  • Adobe Flhas Builder 4 Trial, Pagina de download aqui. Versão Stand Alone.
  • BlazeDS Turnkey, Pagina de download aqui. (Necessita uma conta gratuita na adobe). Download da versão “BlazeDS turnkey” de 47 MB que já traz consigo o servidor tomcat, desta forma não necessitamos de o configurar à parte.
  • No meu caso eu uso o Windows 7 32 bits, mas funcionará em qualquer versão do windows 32bits, no entanto se for 64bits devem fazer atenção nos downloads e escolherem a versão correta pro vosso sistema.

#2. Instalação e Configuração do JDK6

Bom, o ficheiro que vai terminar o seu download primeiro, é provavelmente o JDK, e é por esse mesmo que vamos começar. Abram o arquivo, siga os passos de instalação normais (clicando duas ou 3 vezes no Next / Seguitne). A instalação do java far-se-à automaticamente nas pastas por defeito e com as opções por defeito, aqui nada precisamos de alterar. (Deixem o caminho por defeito: C:\Program Files\Java\jre6) ou então mais tarde lembrem-se de usarem os caminhos corretos da vossa instalação.

No final precisamos de confirmar duas variaveis do sistema, o JAVA_HOME e o PATH que pode parecer complicado mas não o é. O JAVA_HOME aponta para a localização do Java no sistema operativo e o PATH para a localização do executàvel da maquina virtual do java.

leia mais »

17 Comentarios |Tags: , , , , , , ,

OpenSUSE Linux + Dropbox Shell Backup Script

Vou aqui deixar um pequeno script que fiz para linux para fazer o backup diário de algumas bases de dados criticas inicialmente para o Dropbox (que sem duvida é a melhor forma de backup e sincronização de dados; dropbox.com) e depois para um disco externo. Um dos maiores problemas mesmo foi conseguir montar um disco de rede (PackardBell Netstore 3500) no openSUSE. A coisa ficou feia e apenas o consegui montar via ftp com a ajuda do curlftpfs (http://curlftpfs.sourceforge.net/), um pequeno software que me fez matar a charada e me permitiu montar o ftp como uma pasta no linux e a partir daí aceder a ela como se fizesse parte do proprio linux.

Bom, tive que recorrer a um pouco do que estudei sobre linux, e a algumas dicas que encontrei pela net e discuti com amigos, até que cheguei a um script bem simples mas que me permite fazer sem rodeios o que eu precisava. (Backup de algumas bases de dados mysql e de algumas pastas no servidor).

#!/bin/sh
# Simple backup script
# Backups mysql databases and folders to dropbox and external disk
# by Mário Santos - msdevstudio.com
# admin [ at ] msdevstudio.com
# --------------------------------------
mkdir /root/Dropbox/Backups > /dev/null 2>&1
mkdir /root/Dropbox/Backups/`date +%Y%m%d` > /dev/null 2>&1
echo Backup Started `date` >> ~/backuplog
echo Backing up db_1 @ `date` >> ~/backuplog
mysqldump --user=root --password=mypass --lock-tables=false db_1 > /root/Dropbox/Backups/`date +%Y%m%d`/db_1.sql
echo Backing up db_1 Complete @ `date` >> ~/backuplog
echo MySql Backup Completed @ `date` >> ~/backuplog
 
echo Trying to copy to network disk  @`date` >> ~/backuplog
cp -r /root/Dropbox/Backups/`date +%Y%m%d` /home/net-backup/PUBLIC/Backups > /dev/null 2>&1
echo Copy to network disk done @ `date` >> ~/backuplog
 
# Using dates to delete the 3 days ago backup. Leave only 3 backups!
threeDaysAgo=`(date --date='3 days ago' '+%Y%m%d')`
threeDaysAgoPath=/home/net-backup/PUBLIC/Backups/$threeDaysAgo
 
echo Backing up folders @ `date` >> ~/backuplog
mkdir /home/net-backup/PUBLIC/Backups/`date +%Y%m%d`/Files > /dev/null 2>&1
cp -r /home/folder1 /home/net-backup/PUBLIC/Backups/`date +%Y%m%d`/Files > /dev/null 2>&1
cp -r /home/folder2 /home/net-backup/PUBLIC/Backups/`date +%Y%m%d`/Files > /dev/null 2>&1
echo Backing up folders complete @ `date` >> ~/backuplog
echo Removing old backup files @ `date` >> ~/backuplog
rm -r $threeDaysAgoPath > /dev/null 2>&1
echo Removing old backup files complete @ `date` >> ~/backuplog
echo Backing Complete @ `date` >> ~/backuplog

E voila! Gravem como .sh e criem um cron job para fazer correr este script!

Reparem que apenas copiei os backups das bases de dados para o Dropbox, porque como devem imaginar copiar pastas do sistema (que no meu caso poderiam chegar a 50GB ) não é boa ideia, a não ser que tenha a opção paga do dropbox!

Simples e eficaz. Claro que não dispensa por completo o uso de um software de backups, no entanto para certos casos é mais do que suficiente ;)

Talvez ajude alguem! :)
Abraço.

Sem Comentarios |Tags: , , , , , , ,

Photoshop Application Layout Toolkit. Ria’s & Web

Bom, este toolkit trata-se de uma segunda alternativa para o layout visual de um projecto que me foi pedido, como não foi aceite posso divulga-la publicamente. O layout apresentado é de uma interface e de todos os controlos que seriam usados nela, são cerca de 50 elementos visuais.

O resultado final que comporta um unico ficheiro PSD prontinho a ser usado nas suas aplicações, completamente separado por layers, grupos e muito tem identificado. Com o poder do Flash Catalyst já devem supor que será simplesmente muito facil importa-lo para as vossas aplicações flex…

Segue a preview (cliquem para ver em maior):

Como não foi aprovado, mas no entanto está 100% funcional, ainda estou meio indeciso se o coloco à venda no graphicriver, se o vou utilizar para um futuro cliente ou o disponibilizo gratuitamente aqui no blog para download…

Que dizem?

Abraço.

5 Comentarios |Tags: , , , ,

Flex 4, AS3, Java, Red5, C#, Fluorine

Eis a minha nova fase de estudos!

Flex 4, AS3, Java, Red5, C#, Fluorine!

Alem de estar a realmente enfiar a cara no Flex4, estou a levar muito na cabeça… olhem que a transição do flex 3 pro 4 não é nada facil (estou a falar-vos como Flex 3 Certified Expert), alem de milhares de mudanças no “core”, há os novos namespaces, componentes, hierarquias, separação de componentes, etc’s… mas é uma agradavel surpresa encontrar muitos elementos corrigidos e melhorados, a melhor notici é sem duvida a enorme (ja era grande) facilidade com que criamos os nossos componentes, embora agora tenhamos que os construir passo a passo: Base, Skin, Scrollers, Actions, Etc’s… mas com certeza vão surgir componentes fantasticos. Eu proprio ja tive que criar alguns, de entre eles um a que chamei de spark datagrid. (quem ja vasculhou no flex 4 a datagrid foi extinta no spark). E erram ao pensar que me levou muito tempo… foi até muito simples com os novos containers/elementos do flex4.

Alem de muito flex 4, um dos meus planos do ano passado para este ano era aprender Java, e acho que desta vai. (Ja fiz até o meu primeiro CRUD :p ), acabei por me envolver num projecto que requeria o uso do red5 como servidor de video/audio/sharedobjects. Ao principio hesitei, mas foi-me dada a liberdade de poder ao mesmo tempo que desenvolvia, podes estudar um pouco do red5 e suas app’s em java. Das app’s pro red5 até às simples app’s java o caminho é quase inexistente, visto que ambos usam java… foi então que dei uso à minha vontade de aprendizagem e começei a estudar um pouco de java e acabei desenvolvendo  o meu primeiro crud. Ainda existem muitas duvidas na minha cabeça, principalmente na hora de criar uma app java e na hora do seu leia mais »

Sem Comentarios |Tags: , , , , , , ,

Portfolio: Segue mais um (WordPress)

Como tinha falado anteriormente, ando meio ausente do blog devido à falta de tempo para escrever conteudo. Tudo isto principalmente devido a alguns projectos que me roubam algum tempo… mais um deles foi o projecto hausing ( http://goo.gl/Ae9B ). Trata-se de mais uma implementação no wordpress, com o remake por completo do template.

A pagina inicial apresenta o ultimo projecto desenvolvido, imagem e o link para o pdf de informações que foi enviado junto ao artigo,  foram tambem criados alguns templates de entre eles 2 templates de pagina para a apresentação do Projects e do Inspiration, e ainda um de blog (em breve). Todo o sistema conta com a implementação do WMPL em 3 linguas (em breve mais uma).  É um facto que a personalização levou bastante trabalho a fazer e a passar por varios testes, mas é certo que fiquei bem agradado com o resultado final, tal como o cliente.

De resto o design simples e limpo torna o site de facil navegação e leitura, ótimo para o public alvo do site.

Como podem reparar, este é um dos casos em que a utilização do wordpress torna-se quase “invisivel”. Este é um dos pontos que tornam o wordpress tão versatil e poderoso.

Para visitar o projecto clique aqui.

Alguma duvida, critica ou sugestão?? Manda vir!!

2 Comentarios |Tags: , , ,

Portfolio – Novo Projecto

O titulo deste artigo poderia ser Novos Projectos, mas como estou a acabar 1 a 1, vou então apresenta-los individualmente.
Sei que ando bastante ausente, mas simplesmente porque não tenho muito tempo livre, e o que tenho é a cuidar da minha filhota linda e tambem da familia. Depois de 1 mes ausente de férias, arranquei o “novo ano” de trabalho (até às novas férias) com bastantes projectos. Alguns muito promissores e que estou bastante envolvido. Mas bom, hoje venho falar do site que terminei em agosto ainda em cima das férias ;)

O site em causa é o tectone (clique para visitar):

Depois de ter sido analisado, sofreu algumas alterações como a passagem das informações visuais para a primeira pagina, apresentando de imediato os seus produtos, servindo até como showcase dos mesmos tornando o resto do site secundário. leia mais »

3 Comentarios |Tags: , , ,