Um Protótipo de Editor de Imagens via Web

Transcrição

1 Um Protótipo de Editor de Imagens via Web Thiago Silva Borges 1, Jackson Gomes de Souza 1 1 Sistemas de Informação Centro Universitário Luterano de Palmas (CEULP/ULBRA) Palmas TO Brasil {thiago,jgomes}@ulbra-to.br Resumo. O gerenciamento de conteúdo de um web site é geralmente realizado através de ferramentas específicas para esse fim, chamadas de Content Management Systems CMS (Sistemas Gerenciadores de Conteúdo). A finalidade principal destes sistemas é o controle de conteúdo das páginas do web site, seja tal conteúdo somente texto ou mídias diversas, como imagens e vídeos. Entretanto, quando estes conteúdos estão relacionados com imagens as funcionalidades existentes são limitadas. O presente trabalho tem como objetivo pesquisar as funcionalidades dos CMS s existentes, pesquisar as definições e conceitos de computação gráfica e processamento digital de imagens em relação às operações sobre imagens, e construir uma ferramenta on-line que permita a edição de imagens. 1. Introdução. Desde os primórdios, as imagens são utilizadas para representar informações, sentimentos, emoções, histórias; situações vividas que eram desenhadas para serem conhecidas por gerações futuras. Esse sistema de representação com o passar do tempo se expandiu e abrange atualmente várias áreas da sociedade. Um dos principais responsáveis por esta expansão foi a Internet. Um meio de comunicação no qual estas informações são disponibilizadas para reuso em outros campos e atividades. A internet é composta por inúmeros documentos, ou páginas, que agregam as mais variadas informações em diversos campos de estudo, nos quais, o conjunto destas informações é chamado de conteúdo. O conteúdo é formado por mídias que se caracterizam por textos, vídeos, sons e imagens. Os textos são caracterizados pelas seqüências de parágrafos, frases e palavras que denotam um sentido em algum contexto de forma descritiva como, por exemplo, uma notícia, uma carta, um verso, um poema. Por outro lado, os sons, vídeos e imagens representam uma arte como, por exemplo, uma música, uma foto, um vídeo de família; situações diversas vividas. Com o volume crescente de informações sendo gerado dia-a-dia, houve a necessidade de construção de uma ferramenta que automatizasse o processo de gerenciamento destas informações, que é denominada CMS, ou Sistemas Gerenciadores de Conteúdo. Apesar dos sistemas gerenciadores de conteúdo possuírem mecanismos para o gerenciamento de informações textuais, os mesmos, em sua maioria, não

2 possuem mecanismos para o gerenciamento, mais especificamente a edição, de imagens. A edição de imagens é muito importante tendo em vista que as imagens são utilizadas na internet ora para a criação de interface para o usuário, ora para a induzirem este a ações específicas dentro de um sistema. Com isso, uma mesma imagem pode ter diferentes representatividades em contextos distintos. Logo, o tratamento e a manipulação de imagens em um contexto deve ser planejado cuidadosamente, dado ao fato de que o usuário é um indivíduo único e a má interpretação da imagem pode levá-lo a ações indesejáveis. Sendo assim, para esta edição de imagens é necessária a utilização de um software que permita, através de várias funcionalidades, esta edição. Entretanto, esta edição, em geral, não pode atualmente ser realizada sem o auxílio de uma ferramenta externa, ou seja, ferramenta desktop. Essas ferramentas são, em sua maioria, sistemas proprietários, que por sua vez, só permitem a utilização dos mesmos a partir da aquisição de uma licença paga. Aliado a isso, há a necessidade da instalação do sistema em um computador do usuário, consumindo muitos recursos do mesmo como, por exemplo, memória, espaço em disco, CPU; o que, conseqüentemente, acarretará em perca de desempenho do sistema. É baseado nesta problemática que o presente trabalho foi desenvolvido com o objetivo de proporcionar funcionalidades que permitam a edição de imagens on-line, sem auxílio de ferramentas de terceiros. Com a construção de um sistema de edição de imagens on-line, o usuário não mais necessita executar todos esses passos para editar suas imagens, bastando somente acessar o endereço no qual o sistema on-line está registrado. Desta forma, o presente trabalho irá apresentar uma proposta de construção de um editor de imagens via web, as etapas e o embasamento teórico necessário para a construção desta. O presente trabalho está divido em seções que abordarão alguns dos conceitos relevantes ao domínio deste trabalho. Na seção 2 será apresentado conceitos e definições de CMS, citado anteriormente. Na seção 3 será apresentado conceitos e definições de Ajax e Ajax.Net, apresentando as vantagens na utilização desta tecnologia para desenvolvimento de sistemas mais otimizados. Na seção 4 o projeto como todo, dando uma breve visão da ferramenta proposta, apresentando e comentando algumas das funcionalidades disponíveis. E na seção 6 será apresentado algum dos resultados esperados com o desenvolvimento deste projeto, levantando alguns pontos importantes a serem ressaltados no seu desenvolvimento. 2. CMS (Content Management Systems) A disseminação de informação de modo digital e on-line é o motivo principal para o qual a Internet foi criada. A Internet se tornou uma plataforma universal mais rápido do que qualquer outra tecnologia na história. O volume de informação aumenta progressivamente, e cresce cada vez mais a necessidade de uma administração competente e funcional do conteúdo oferecido na rede, dado que estes sistemas cresceram, e evoluíram e mesmo equipes profissionais têm tido dificuldades em manter controle de toda esta informação.

3 Desta dificuldade surge a necessidade de uma ferramenta que seja responsável pela administração de todo esse conteúdo, sendo importante ressaltar que conteúdo, neste contexto, é um conjunto de informações agregadas ao website que deverão ser geridas de um modo eficiente e funcional (BRAITLING, 2004), criando estruturas, organizando, padronizando e, principalmente, automatizando todo um processo que não admite falhas e precisa ser feito no menor espaço de tempo possível (DYNAMIX, 2004). Daí surge a importância do gerenciamento deste conteúdo, e faz-se necessária a utilização de uma ferramenta que permita essa gestão. Estas ferramentas específicas são chamadas de CMS, cujo principal objetivo é o controle do conteúdo das páginas do website. O CMS é um ambiente no qual os desenvolvedores podem criar, armazenar, reutilizar, gerenciar e consultar rapidamente textos ou mídias necessários para construir o conteúdo dos websites. Os CMS são usados para armazenar e recuperar grandes quantidades de dados (ALFAMAIS, 2005). Resumindo, os CMS s automatizam, organizam e facilitam o processo de criação, edição e publicação de conteúdos em ambiente de rede, eles são requisitos fundamentais para a administração e distribuição da peça-chave do mundo atual: a informação (DYNAMIX, 2004). A Tabela 1 apresenta os CMS s mais conhecidos e utilizados atualmente. Tabela 1 Os CMS s mais conhecidos e utilizados atualmente. CMS URL TIPO NOTITIA PROPRIETÁRIO CHILLI CMS PROPRIETÁRIO WEBCENTER PROPRIETÁRIO OPENCMS OPENSOURCE MAMBOSERVER PROPRIETÁRIO PUBLIQUE PROPRIETÁRIO PHPNUKE OPENSOURCE MULTIMEDIA CAFÉ PROPRIETÁRIO Como apresentado na Tabela 1, a maioria dos CMS s existente são sistemas legados ou proprietários, fator este prejudicial para a expansão/utilização do CMS não só em setores de desenvolvimento web, mas também para diversos setores que manipulam uma quantidade de informações significativas para os mesmos sem um tratamento e armazenamento adequado. Na Tabela 2, são apresentadas as funcionalidades encontradas nos CMS s, funcionalidades estas identificadas a partir de uma análise dos CMS s que disponibilizam versões demo (para teste) ou versões completas dos seus sistemas.

4 Tabela 2 As funcionalidades existentes nos CMS s FUNCIONALIDADE DESCRIÇÃO UPLOAD VISUALIZAR Funcionalidade que permite o envio do arquivo de imagem ao servidor web Funcionalidade que permite a visualização da imagem no servidor web Como apresentado na Tabela 2, as funcionalidades comumente encontradas nos CMS s são Upload e Visualização de imagens. Estas funcionalidades são mínimas e irrisórias quanto às funcionalidades reais para o tratamento e manipulação de imagens como será mostrado na Tabela 3. Tabela 3 As funcionalidades reais para o tratamento e manipulação de imagens. FUNCIONALIDADE DESCRIÇÃO TRANSLAÇÃO ESCALA ROTAÇÃO ESPELHAMENTO (FLIP) ZOOM WARPING FILTROS OPERAÇÕES LÓGICAS Funcionalidade que permite o deslocamento linear de uma imagem tanto na horizontal quanto na vertical, sendo assim, é possível mover uma imagem para diferentes posições em uma área. Funcionalidade que permite o redimensionamento de uma imagem em vários tamanhos sendo que este redimensionamento pode ser com perca ou não da qualidade do aspecto visual da imagem original. Funcionalidade que permite a rotação de uma imagem em vários ângulos podendo ser tanto no sentido horário quanto no sentido antihorário. Funcionalidade que permite o espelhamento de uma imagem nos sentido horizontal e vertical, sendo assim, é possível espelhar uma imagem em um ângulo inverso. Funcionalidade que permite a ampliação ou redução de uma imagem, chamado de Zoom In e Zoom Out. Funcionalidade que permite a alteração de relação espacial entre seus objetos de uma imagem. Funcionalidade que permite entre vários recursos, realçar e suavizar uma imagem. Funcionalidade que permite a execução das operações lógicas AND, OR, NOT e XOR em uma imagem. OPERAÇÕES ARITMÉTICAS Funcionalidade que permite a execução das operações aritméticas ADIÇÃO, SUBTRAÇÃO, MULTIPLICAÇÃO E DIVISÃO em uma imagem. Como apresentado na Tabela 3, as funcionalidades para o tratamento e manipulação de imagens são diversas, sendo que só as funcionalidades mais básicas

5 foram apresentadas na Tabela 3. E é baseado nisso que se verifica a importância do presente trabalho que tende a minimizar a discrepância existente entre as funcionalidades existentes e funcionalidades reais para o tratamento e manipulação de imagens. 3. Ajax e Ajax.NET Um dos grandes, e talvez se possa dizer o principal responsável pela concretização do WebPaint.NET, em sua interface com o usuário, é denominado Ajax.NET, que implementa o conceito de Ajax. Isso está relacionado à tecnologia utilizada para a comunicação e transferência de dados entre cliente e servidor. Ajax não é uma única tecnologia, mas sim, a união de diversas tecnologias que juntas mudaram, de forma revolucionária, a forma de comunicação entre cliente e servidor, quebrando o conceito tradicional de comunicação síncrona (GARRETT, 2005). E Ajax.NET é uma API disponível para plataforma.net que implementa este conceito. O modelo de comunicação adotado atualmente pela Internet é o modelo sincronizado em que a comunicação com o servidor é realizada a partir de uma ação do cliente; após a requisição do cliente, o servidor faz o processamento da requisição e retorna a resposta, geralmente, no formato de uma página HTML. Essa ação do cliente tem como efeito primário a atualização da página web, mais conhecido como Refresh, o qual ocasiona um incessante download, ou reenvio das informações da página do servidor para o cliente a cada requisição, como ilustra a Figura 1. Partindo desse modelo, não se têm formas viáveis de possibilitar a manipulação das imagens pelo WebPaint.NET, dado o fato de que o tempo levado para a realização de cada operação (em relação ao processamento de imagens), considerando o tempo de envio da requisição mais o tempo da resposta do servidor, é relativamente grande. Assim, tem-se que a cada ação do cliente o servidor precisa realizar duas ações: o processamento da tarefa de processamento de imagens e envio da resposta em HTML. Mais especificamente, pode-se dizer que o modelo clássico de comunicação da internet dificulta a execução de operações sobre imagens, exceto no caso em que as operações sejam tão simples que o tempo de processamento sobre a mesma seja muito pequeno. Entretanto não é este o caso, já que as operações necessárias para a manipulação de imagens demandam um maior tempo de processamento e, conseqüentemente, levam a um maior retardo na resposta do servidor para o cliente. Sendo este um dos principais problemas encontrados no modelo clássico de comunicação, foi desenvolvido um conjunto de tecnologias que mudasse esse conceito de sincronismo os quais formam o Ajax, conceito que representa um grupo de tecnologias que deu origem ao modelo assíncrono de comunicação entre cliente e servidor, no qual a requisição do cliente é realizada internamente. Como encontrado em (GARRETT, 2005), a tecnologia Ajax incorpora: Padronização da apresentação baseado em XHTML e CSS; Exposição e interação dinâmicas usando Document Object Model ; Intercâmbio e manipulação dos dados usando XML e XSLT; Recuperação de dados assíncronos usando XMLHTTPRequest;

6 Ajax E o Javascript que faz a integração dos anteriores. As Figuras 1 apresenta o comparativo entre o modelo clássico e o modelo do Figura 1 Modelo Tradicional x Modelo do Ajax (GARRETT, 2005). Como visto, o servidor, no modelo do Ajax.NET, não precisa se preocupar com a construção da página HTML para o cliente reduzindo o tempo de resposta, isso ainda, aliado ao grande benefício de transferência de dados no formato XML que torna esta transmissão mais eficiente, tendo em vista que o arquivo de resposta do servidor é muito pequeno, esse é um dos grandes benefícios do XML, que produz arquivos relativamente pequenos, e que diminui o tempo de transferências dos dados entre cliente e servidor. 4. Projeto e Implementação. O WebPaint.NET permite aplicações de diversas funcionalidades, que serão mostradas mais adiante, básicas para a manipulação de imagens via web. Nos tópicos a seguir serão mostradas as funcionalidades e a arquitetura da API. A Figura 2 ilustra o visual do WebPaint.NET que utiliza os recursos disponíveis na API base, para as devidas aplicações das funcionalidades. Figura 2 WebPaint.NET.

7 A interface do WebPaint.NET, como apresentado na Figura 2, é dividida em seções específicas para facilitar o entendimento das responsabilidades das mesmas, sendo elas: Seção dos Menus, Seção dos Atalhos, Seção das Funcionalidades, Seção da Janela de Visualização, Seção de Propriedades e Seção de Thumbnails. Assim, cada seção tem suas responsabilidades para o bom funcionamento do sistema. O sistema foi divido a priori em seis seções básicas; na seção 1, estão os menus que são responsáveis por permitir acesso aos menus de todas as operações de manipulação de imagens disponíveis no sistema; na seção 2, os atalhos, que são responsáveis por facilitar a execução de algumas operações básicas de manipulação de imagens disponíveis no sistema; na seção 3, as funcionalidades adicionais para edição de imagens disponíveis no sistema; na seção 4, a janela de visualização, que é responsável pela interação direta entre sistema, usuário e imagem, permitindo desde a edição da imagem até sua visualização; na seção 5, o painel de propriedades, que é responsável pelo gerenciamento da entrada de dados para a execução da algumas operações específicas por parte do usuário; na seção 6, o thumbnails, que é responsável pela visualização de todas as imagens geradas pelo sistema na sessão atual. Logo, o WebPaint.NET utiliza-se do conceito de simplicidade, na forma de visualização e manipulação, e eficiência na execução das funcionalidades. A Figura 3 apresenta as funcionalidades básicas disponíveis. Figura 3 Funcionalidades do WebPaint.NET. A Figura 4 apresenta a estrutura da API do WebPaint.NET com as respectivas classes, ou objetos disponíveis.

8 Figura 4 Arquitetura da API do WebPaint.NET. A API do WebPaint.NET foi dividida em módulos que encapsulam as responsabilidades e ainda proporcionam uma melhor organização da mesma, fator este que contribui para a fácil manipulação de suas classes ou objetos. A API foi divida em sete módulos bases que dão suporte à execução das funcionalidades propostas, sendo eles: AjaxOperations, Collections, Controllers, Interfaces, Objects, Operations e Util. Entre todos os módulos, três deles merecem uma atenção especial, sendo eles AjaxOperations, Operations e Objects. O módulo, ou pacote Objects contém a classe central do sistema: Image. A classe Image é a responsável pelo mapeamento da imagem armazenada em disco para o sistema. Através dela é possível acessar as propriedades da imagem em disco, propriedades estas como pixels e dimensões. Ainda há os módulos AjaxOperations e Operations. Ambos possuem nomenclaturas e objetos semelhantes. Isso por que os objetos contidos no módulo AjaxOperations são os responsáveis pelo mapeamento dos objetos contidos no módulo Operations, ou seja, como será visto em seções adiante, a tecnologia Ajax.NET permite o mapeamento dos objetos do servidor para o cliente, viabilizando o acesso direto aos mesmos, assim os objetos do módulo AjaxOperations estão no formato requerido pela Ajax.NET para que na execução da aplicação a Ajax.NET possa criar estes objetos correspondentes em Javascript para o cliente. Assim será possível, pelo cliente, utilizar estes objetos e, conseqüentemente, acessar seus métodos.a Figura 5 ilustra o funcionamento da ferramenta na execução de umas dessas operações. Figura 5 Exemplo de Rotação com Janela de Visualização Completa. Na Figura 5 é apresentada uma transformação geométrica conhecida como Rotação. Como visto na seção da Revisão de Literatura, essa transformação é uma das mais complexas das transformações geométricas. Sabendo que uma imagem é visualizada a partir de uma janela e que o processo de transformações geométricas leva à alteração da posição espacial dos pixels de uma imagem, um ponto importante deve ser observado. O processo de visualização, da janela de visualização, corresponde à

9 região disponível para a visualização da imagem. Logo, uma transformação qualquer pode resultar num objeto que esteja fora da janela de visualização. Duas estratégias podem ser adotadas para a solução do problema: aumentar a janela de visualização fazendo com que independente da transformação aplicada a imagem resultante seja visualizada por completo, ou eliminar os pixels que estejam fora da janela de visualização, que conseqüentemente ocasionará na visualização parcial da respectiva imagem. Assim, como visto na Figura 5, a estratégia adotada pela WebPaint.NET foi a de aumentar a janela de visualização permitindo que a imagem seja sempre visualizada por completo, independente da transformação aplicada ou da dimensão da imagem. 5. Conclusão Um dos pontos positivos do trabalho foi o estudo sobre os CMS s existentes. A partir disso, foram identificadas as características positivas e negativas, e as deficiências quanto o tratamento e quanto à manipulação de imagens. Esse estudo proporcionou uma visão geral de como são utilizados os CMS s, quais as funcionalidades mais relevantes para a realização de trabalhos de uma forma geral. E ainda, e mais importante, foi possível a compreensão da necessidade de utilização dos CMS s, qual a sua importância e como este contribui para amenizar várias das atividades que ainda são realizadas manualmente. Chega-se à conclusão de que a utilização dos CMS s para a gestão de conteúdo é um fator imprescindível para o bom gerenciamento das informações. Conseqüentemente esse é um diferencial característico de empresas e instituições que o utilizam como a central de gerenciamento de suas informações. Outro resultado positivo do trabalho foi o estudo sobre os conceitos básicos da Computação Gráfica. A partir desse estudo, foram identificados conceitos relevantes para a construção da ferramenta. Isso por que Processamento Digital de Imagens (ou manipulação de imagens) é uma subárea da Computação Gráfica, logo, os conceitos proporcionaram uma visão da relação dos elementos da Computação Gráfica com a manipulação de imagens, como eles afetam e influenciam no desenvolvimento de aplicações (por exemplo, o WebPaint.NET). Os resultados obtidos a partir da construção da ferramenta denominada WebPaint.NET formam o foco principal do trabalho. A construção deste editor de imagens via web confirmou a viabilidade do tratamento e manipulação de imagens online. Esse desafio comprovou que embora existam grandes barreiras para a manipulação de imagens e alguns fatores ainda preocupantes como, por exemplo, o tempo gasto na execução de operações mais complexas, as soluções adotadas no presente trabalho possibilitaram que as funcionalidades para o tratamento e manipulação de imagens pudessem ser implementadas e conseqüentemente disponibilizadas pela ferramenta. Vale ressaltar que os resultados obtidos, relacionados às funcionalidades disponíveis, foram alcançados através da tecnologia adotada pelo sistema, Ajax.NET, que minimizou o trabalho de comunicação entre o cliente e servidor. Chega-se então à conclusão final deste trabalho, de que todo o estudo feito e todas as informações obtidas proporcionaram, além da construção da ferramenta, uma relevante experiência no desenvolvimento de ambientes que trabalham, simultaneamente, com manipulação de imagens e a web.

10 6. Referências (ALFAMAIS, 2005) Glossário EAD. Disponível em < Ultimo acesso em: 07 de abril de (BRAITLING, 2004) Sistemas de Gestão de Conteúdo. Disponível em < Ultimo acesso em: 07 de abril de (DYNAMIX, 2004) Princípios do Gerenciamento de Conteúdo Web. Disponível em < Ultimo acesso em: 21 de abril de (GARRETT, 2005) GARRETT, Jesse James Ajax: A New Approach to Web Applications. Disponível em < Ultimo acesso em: 01 de julho de 2005