Venho falar de um projecto que terminei em Janeiro, e que foi bem interessante de desenvolver visto que foram optadas algumas práticas de desenvolvimento focadas em display’s TV / LCD.

O projecto trata-se de o desenvolvimento de uma plataforma de comunicação visual para apresentação publica em Televisores. Com certeza já passou num aeroporto, hotel, ginásio e viu alguns LCD’s espalhados por lá com as mais diversas informações, principalmente nos aeroportos com as chegadas / partidas, pois então, o projecto focou-se no desenvolvimento de uma plataforma dessas em Adobe AIR (Flex 4) que pudesse facilmente ser administrada pelo cliente, mas também que fosse facilmente personalizada para poder ser distribuída por vários clientes.

O sistema baseou-se me duas aplicações, uma front-end para distribuição pelos clientes, apenas com controlo de chaves (Numero de série gerado pela administração) e que carregará toda uma playlist de vários módulos, bem como toda a skin (cores e logo). A segunda aplicação consiste numa area administrativa onde o cliente pode gerir a sua playlist, noticias, videos, animações, aniversariantes, noticias manuais, etc’s. Esta area administrativa também permite no caso do login de Super Administrador de gerir todos os clientes, skins, e restantes informações.

As playlists são ilimitadas, pelo que podem criar uma playlist completa para o dia!

Todo o sistema do cliente, ao abrir-se  (na primeira apresentação pede a chave da aplicação) carrega todas as informações do servidor; Skin, playlist e logotipo e adapta-se em fullscreen ao ecrã. Dá-se então inicio ao processo de carregamento da playlists e seus elementos. Esta palylist consiste na apresentação de variados modulos e respectivas durações de apresentações.  (Vejam as imagens mais em baixo…)

Os módulos desenvolvidos foram os seguintes:

• Noticias; Vários modulos de noticias de varias categorias, quer com fonte num Feed RSS  ou na base de dados (Inserção manual). Categorias: Actualidade, Mundo, economia, tecnologia, inovação, desporto, cultura, saúde, país.
• Tempo; Previsão de tempo para o dia e próximos 3 dias com a possibilidade de 1 ou mais locais na area central, e com os display das temperaturas para todas as grandes cidades no topo;
• Informação financeira; Bolsa de valores (cotações em tempo real) e Cambios.
• Aniversariantes; Possibilidade de apresentar aniversariantes e suas fotos /departamentos na area central para os próximos 7 dias.
• Animações / Publicidade; Possibilidade de colocar animações em formato SWF para display apenas na area central ou em fullscreen.
• Videos / Publicidade; Apresentação de videos em streamming na area central ou em fullscreen.

As noticias na area central podem conter também fotografias vindas de um feed RSS ou da base de dados. A playlist pode ser organizada com varios destes elementos / módulos, e facilmente gerida via “drag&drop”.  O sistema ficou preparado para a qualquer hora poder criar um novo módulo e integra-lo na playlist; Novos módulos se adivinham como conferências, dicas, publicidade, classificações de jogos, programação de canais de televisão, etc’s…

O sistema ainda conta com auto-update para se actualizar sem necessidade de intervenção do administrador, tal como a própria aplicação procura actualizações de noticias, skins, imagens, videos, playlist de 15 em 15 minutos para que desta forma apresentar sempre conteúdo actualizado.

Se eu ao inicio tinha algumas duvidas se o consumo de memória e processador da aplicação no (…)
Leia o resto de Adobe Air; Comunicação visual via TV (311 palavras)

© msdevweb for TSW – That Should Work Blog, 2011. | Permalink |No comment | Add to del.icio.us

Post tags: Air, catalyst, Desktop, flash builder, flex4, illustrator, tv

Joao Neves fala sobre testes unitários de DBUnit. E o Eduardo (@eduardohorvath 08:01) continua sua Saga sobre o Flash Catalyst e o Eduardo continua sua série de posts sobre o Flash Catalyst (um verdadeiro treinamento da ferramenta para você e de graça aqui no blog da DClick).

Click to play

Clique aqui para fazer download deste Podcast.

São 4 screencasts que tratam da criação de uma skin simples.

Nessas aulas você vai aprender a criar um menu dropdown (ainda com função combo, futuramente teremos a finalização detalhada desse menu), com add interaction em subníveis, vai aprender a lidar com o smooth transition fazendo transições harmônicas.

.

Flash Catalyst CS5 – Menu DropDown 01 (Button + Datalist)

.

.

Flash Catalyst CS5 – Menu DropDown 02 – Smooth Transition

.

.

Flash Catalyst CS5 – Menu DropDown 03 + Form (text imput + button + check box)

.

.

Flash Catalyst CS5 – Menu DropDown 04 – Add Interaction (sub níveis) + Smooth Transition

.

.

Arquivos FXP e PSD

flashcatalyst_dropdown

_________________________________________

Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath

Gustavo fala sobre RabbitMQ, AMQP e Spring-AMQP e o Eduardo continua sua série de posts sobre o Flash Catalyst (um verdadeiro treinamento da ferramenta para você e de graça aqui no blog da DClick).

Click to play

Clique aqui para fazer download deste Podcast.

Na última aula ensinei a vocês como criar um Menu Wizard utilizando botões e um recurso “fake” para simular o down permanente (selected).

Nessa aula eu mostro como utilizar o ToggleButton para fazer o mesmo menu sem necessitar daquele layer Down em imagem separada.

No entanto vale lembrar que ambos tem suas funções, você deve aprender os dois jeitos pois perceberá o momento certo de usar cada um.

Bom galera, estamos continuando nossas aulas sobre Flash Catalyst, agora trago a vocês um componente bastante interessante, podemos chamá-lo de Wizard Button Menu, são botões que se comportam de acordo com um menu Wizard.

O que é um menu Wizard? São aqueles menus de etapas, muito comuns em e-commerce, o problema é que o comportamento de um botão nesse tipo de menu é diferente daquilo que o Catalyst por si só oferece, ou seja, você precisa de um down permanente, sem que ao retirar o mouse ele volte ao estado de on, logo, eu ensino uma técnica simples, porém um pouco trabalhosa para se fazer isso, mas é no meu ver a melhor técnica para criar esse tipo de componente já que, vamos navegar entre os states sem problema, desabilitar o botão que se encontra na etapa desejada deixando somente os demais ativos.

A primeira parte eu mostro como organizar os arquivos no Fireworks para você importar com maior facilidade para trabalhar no Catalyst, se você já sabe isso, pule essa etapa, mas… se tiver problemas para organizar depois, volte e veja esse vídeo.

A segunda parte eu ensino como organizar o menu no Catalyst, criar os botões e deixar pronto para fazermos o Wizard.

A terceira aula e última por fim eu termino o processo criando o menu.

Eu faço isso de maneira muito mais diferenciada e mais rápida, porém eu tive quase certeza que ia complicar a vida do iniciante, então fiz algumas etapas bem chatinhas mesmo para que aqueles não muito intimos do Catalyst pudessem acompanhar e entender os problemas.

Se você não fez a aula de botão, volte e faça, do contrário essa aula aqui será bastante complicada.

PS:  Meu Illustrator expirou, pois é, eu havia recentemente instalado o pacote pois o meu Mac é novo, logo, não pude mostrar um detalhe, prometo que na próxima aula o problema já estará corrigido rs, e mostrarei o detalhe que faltou, ah claro, não editei… você pode conferir….  []´s

PS2: O barulho de fundo na última aula desse menu é chuva, sabe como é, estou em Sampa hehe

Aspecto do nosso Menu.

.

Parte 1

.

.

Parte 2

.

.

Parte 3

.

.

_______________________
Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath

Nessa aula eu continuo a incrementar o nosso componente customizado ScrollPanel com Datalist, mostrando qual o local correto para inserir a interação ao objeto do Datalist a fim de navegar pelos States que foram instanciados adequadamente.

PS: Esqueci o arquivo, fico devendo, amanhã coloco e retiro esse comentário.

_______________________
Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath

Nessa quarta aula eu desconstruo nosso último componente, o ScrollPanel com texto, para então inserir um DataList, criando ele desde o zero e mostrando sua interação.

Para alguns são aulas simples, mas para outros são bases fundamentais para que você possa futuramente fazer com tranquilidade interfaces mais complexas. Já vi pessoas pularem essas etapas básicas sem treinar e ficarem perdidas com erros simples, como o demonstrado nesse vídeo, um dos erros mais comuns que acontece na criação de componentes.

Espero que você goste, dúvidas, críticas, sugestões, você já sabe, basta deixar o seu comentário ou me mande uma DM @eduardohorvath

Abaixo segue o arquivo para você fuçar a vontade:
datalist.fxp

O objetivo desse terceiro screencast sobre Catalyst é mostrar como criar um componente dentro de outro componente a fim de fazer componentes “complexos”, o processo é simples, e dará uma idéia de como funcionam muitos dos componentes customizados que são feitos no Catalyst.

No início você vai aprender a criar um scrollbar, vai inserir um texto e então finalizar com a criação do Scroll Panel. O vídeo tem 13 minutos e espero que você goste.

Arquivo para utilização:
scrollbar_ai_fxp

_________________________________________

Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath

Espero que tenham aprendido a usar a interface do Catalyst na primeira aula, e percebido como funciona a importação das artes. Nesse screencast eu importo o arquivo .ai de um button, converto ele em componente, aplico eventos nele e faço a navegação entre duas páginas, é bem simples e bem fácil, aproveitem.

_________________________________________

Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath