Hoje eu reencontrei um site muito útil que eu já havia visto algum tempo atrás mas havia perdido o link. O site se chama “When can I use…” e contém diversas tabelas comparativas mostrando o suporte dos principais browsers ? s novidades de CSS, HTML5, SVG, Javascript e outros.

Clicando nos links das funcionalidades é possível ver as tabelas comparativas de suporte dos browsers e também é possível mudar os filtros para exibir outras funcionalidades.

As tabelas de comparação contam também com alguns browsers de smartphone, mas o Windows Phone não consta na lista (tem apenas iOS, Android, Opera Mini e Opera Mobile). Mas isso não é um problema pois o IE do Windows Phone usa a mesma engine de renderização do desktop, com a única diferença de que não suporta plug-ins, então basta olhar a versão do IE normal na lista para ver se suporta a funcionalidade desejada. O IE do Windows Phone 7.0 (versão lançada na Europa e EUA em 2010) usa a engine do IE 7 e o Windows Phone 7.1 (Mango, lançado em 2011, inclusive no Brasil) usa a engine do IE 9.

Se você estiver trabalhando em um projeto usando HTML5, este site com certeza será muito útil para ajudar a identificar os pontos críticos do projeto do ponto de vista de suporte e portabilidade entre plataformas.

O jQuery é uma biblioteca JavaScript poderosa que está quase se tornando quase “sinônimo” do próprio JavaScript.

A apresentação de slides a seguir é de uma palestra introdutória do jQuery, que destaca praticamente todos os seus recursos e que mostra algumas modificações na versão mais recente da biblioteca (1.7).

E para quem quiser se aprofundar no assunto, o último slide aponta para um livro gratuito de jQuery: jqfundamentals.com.

(Registro aqui o agradecimento ao Erko Bridee por compartilhar esse conteúdo)

Posts relacionados

• Livro: Google Android“>Livro: Google Android (0)
• Instalando sua aplicação Rails/RestfulX (e as gems) na DreamHost Installing your Rails/RestfulX app (and its gems) at Dreamhost“>Instalando sua aplicação Rails/RestfulX (e as gems) na DreamHost Installing your Rails/RestfulX app (and its gems) at Dreamhost (2)
• CRUD com o RestfulX – aplicação funcionandoCRUD with RestfulX – live application“>CRUD com o RestfulX – aplicação funcionandoCRUD with RestfulX – live application (2)
• CRUD com o RestfulX: Parte 1/2 – RetrieveCRUD with RestfulX: Part 1/2 – Retrieve“>CRUD com o RestfulX: Parte 1/2 – RetrieveCRUD with RestfulX: Part 1/2 – Retrieve (7)
• Protesto: falha em sistema da Orizon expõe dados sigilosos de pacientes“>Protesto: falha em sistema da Orizon expõe dados sigilosos de pacientes (0)
• Balsamiq Mockups: solução entre protótipos de alta e baixa fidelidade“>Balsamiq Mockups: solução entre protótipos de alta e baixa fidelidade (8)
• Erro “bad line length character” no Git“>Erro “bad line length character” no Git (1)
• Windows e Office: novidades da Microsoft“>Windows e Office: novidades da Microsoft (4)
• Firefox Plugin – visualizar trace de SWFs“>Firefox Plugin – visualizar trace de SWFs (2)

© Elvis for Elvis Fernandes, 2011. |
Permalink |
Nenhum comentário |
Adicione ao
del.icio.us


Tags: AJAX, Desenvolvimento, JavaScript, jQuery, web

Veja também:

• Tutorial : JDJ : Adobe Flex & Java
• Voltando ao mundo HTML+JS e agora?
• [Flexmania 2011] Planejando e projetando – Dashboad : Flex + Java
• Lady Java
• [ Java Desktop ] Processamento de Imagens Digitais

O in?cio

O conceito de segmenta??o comportamental, conhecido como Behavioral Targeting (BT), surgiu nos Estados Unidos dentre os profissionais de marketing direto como uma estrat?gia dirigida a conquistar uma parcela maior de vendas dentro um subgrupo espec?fico, ao inv?s de buscar uma participa??o mais limitada de compras por usu?rios de todas as categorias.

Mas afinal, o que ? segmenta??o “comportamental”?

Segmenta??o comportalmental n?o diz respeito ? aquela segmenta??o por regi?o, por perfil preenchido em cadastros, ou por IP, etc. O diferencial est? no foco dado aos h?bitos de navega??o e consumo dos usu?rios. Essa ? a novidade!

Qual ? a vantagem em se utilizar BT em campanhas online?

Individualizar o p?blico-alvo. O simples fato de conhecer previamente as atitudes de um usu?rio permite que o anunciante crie pe?as com linguagem direcionada a ele, demonstrando conhecimento de seus interesses.

Veja também:

• [Canvas vs. Flash] Butterfly 3D (Canvas + JavaScript)
• [Adobe Flex] Definindo o foco na aplicação
• Moto elétrica da Mavizen atinge 210 Km/h e vem equipada com Linux e WiFi
• Elly Tran Ha, sexy blogger do Vietnã
• FontStruct : precisa de uma fonte diferente?

Fala pessoal! Fiz um screencast no Blog da DClick onde eu demonstro uma arquitetura de serviços RestFull simples com saídas em XML, JSON e – a novidade – AMF para clientes Flex/Flash.
A idéia é construir um back-end híbrido que sirva tanto a front-ends HTML/JS quanto front-ends Flash/Flex.

Visitem o link aqui:
http://blog.dclick.com.br/2011/11/13/amfrestfull-um-back-end-para-qualquer-front-end/pt/

Abraços!

Twitter!

Olá pessoal, tudo bom?

Primeiro que estou contente por esse ser meu primeiro post no blog da DClick.
Segundo que este é o meu primeiro screencast da carreira. Ainda preciso melhorar muito, mas espero que gostem.

Pensem em um back-end Java que independa de front-end. Em uma arquitetura de serviços: RestFull.
Até então, nada de novidade, já que RestFull é algo ‘antigo’ quando se usa outputs em XML ou JSON. Mas e outputs em AMF??? Isso sim é novidade, e é isso que estarei demonstrando para vocês:

E então, alguém sabe os dois grandes problemas em usar/manter isso em um projeto “pra valer”?
Não percam a continuidade aqui!

Código fonte do projeto Java/Flex:
https://github.com/mariojunior/amf-restfull

Abraços galera!

Twitter!

Profiles e Environments no novo Spring 3.1

A SrpingSource adotou a estratégia de soltar mais versões do Spring com mais velocidade e escopos de funcionalidades menores.
Seguindo tal estratégia acabou de sair do forno o primeiro release candidate da versão 3.1 do framework.
Para uma estratégia de escopos menores, até que tiveram bastante trabalho e adicionaram várias novidades. Vamos cobrir as novidades aos poucos, começando com uma muito interessante: Profiles e Environments.

Especificando Profiles nos Beans

A idéia de um profile é simples. Um profile define um escopo, envirnmente como é chamado no framework, em que certos beans estarão disponíveis e outros não.
Imagine que você precisa de uma conexão com o banco de dados de testes, que é diferente do banco de dados de desenvolvimento. Com profiles podemos definir um data source do profile de desenvolvimento, e outro do profile de testes, instanciando o correto de acordo com o ambiente que a aplicação irá rodar.

Anotações

Para especificar um profile no seu bean, basta adicionar a anotação @Profile com o nome do profile correspondente. Lembrando que este é o caso em que seus Beans estão sendo criados pelo component-scan usando package scan. Vamos criar um exemplo pra ficar mais claro o que acontece.
Vamos criar uma interface comum para nossos beans:

Agora vamos criar dois profiles e dois beans diferentes para a mesma interface. Um é o bean de desenvolvimento (dev) e o outro de testes (qa).

Repare que já anotei os beans com @Profile respeitando os profiles específicos de cada bean.
Agora criamos o arquivo de beans do spring, dei o nome de spring31-test-beans.xml:

Feito isso, vamos criar um teste para verificar a lógica de criação dos beans. estou usando JUnit 4.8.1.

Algumas coisas diferentes estão acontecendo nesse teste.
Estou instanciando um GenericXmlApplicationContext para carregar meus arquivos de beans, isso porque esse application context me disponibiliza um método que é importante para nosso teste: getEnvironment(). Com isso conseguimos acessar o environment do application context, e mais do que isso, conseguimos setar os profiles que estão ativos usando setActiveProfiles. Repare que é possível de setar mais de um profile como ativo, e que os beans podem precisar de mais de um profile para serem instanciados.
Outro fato importante, é que este environment que está disponível, é uma instância de ConfigurableEnvironment. Se você tentar acessar o profile diretamtente em ApplicationContext, você estará acessando um Environment o qual não permite ativar e desativar profiles. Fica a dica.


Após ativar o profile que queremos, basta chamar o load no contexto seguido do refresh para que os beans sejam criados.
Uma vez que o bean foi criado, basta recuperá-lo e executar o teste para se certificaro que se trata do bean que estamos esperando. Note que o nome dos dois beans é o mesmo, e que apenas um deles existe no application context, pois o outro profile não está ativo.

Nested Beans

Outra maneira de definir profiles nos beans é diretamente no XML do spring. Para que isso seja possível foi necessário permitir nested beans nos arquivos de beans, ou seja, definições de beans dentro de outra definição.
Além de possibilitar a definição de diferentes profiles, essa nova funcionalidade permite que sejam definidos alguns padrões de comportamento para os beans que só se apliquem no conjunto de beans que está nested. Mas isto veremos em um próximo post.
Para testar a definição de profiles direto no XML, vamos criar um outro XML chamado spring31-test-nested-beans.xml:

Feito isso, vamos criar um novo teste que é idêntico ao primeiro, com exceção do arquivo de beans especificado, afinal o comportamento deve ser o mesmo em ambos os casos:

Sua barra do JUnit vai ficar verde e você vai ficar feliz com essa brincadeira rápida com profiles.

Ativando Profiles de outras maneiras

Ativa os profiles no código funciona muito bem no caso dos testes, mas o que realmente se aplica a vida real é poder ativar tais profiles de maneira independente da aplicação e do código propriamente dito. Por isso podemos ativar os profiles setando uma variável global chamada spring.profiles.active.
Podemos ativar tal variável de diversas maneiras, dentre elas no próprio web.xml como um parâmetro da sua Servlet do Spring:

Podemos usar também JNDI, ou até mesmo uma variável de ambiente da VM Java. Se você preferir também pode ativar profiles diretamente no maven:

Fazendo Download

Se você usa o maven, basta adicionar o seguinte no seu pom:

Caso você queira baixar diretamente do site, acesse o site do spring.

Espero ter sido útil, qualquer pergunta basta enviar nos comentários.

Por @Gust4v0_H4xx0r

Twitter!

Como Html 5 é algo novo para mim e acredito que para muita gente que visita o blog, os meus exemplos irão se limitar a coisas simples, mostrando novidades básicas. No exemplo do post de hoje vou falar sobre duas novidades, a edição de conteúdo e o Web Storage.

Your browser does not support iframes.

Edição de conteúdo nada mais é do que colocar o Html da sua aplicação em modo de design, deixando que o usuário final possa editá-lo como um simples editor de texto, porém sem conhecer nada sobre Html. Essa funcionalidade parece ser algo inútil a primeira vista, porém ela pode se tornar poderosa se formos discutir sobre aplicações html5 offline.

Web Storage tem a função de persistir uma informação dentro de um escopo definido, com um espaço de armazenamento maior do que um cookie (bem maior), e que pudesse ser acessível em qualquer página a qualquer momento sem a necessidade de carregar essa informação de página por página. Essa API é dividida em 2 itens, sessionStorage e localStorage.

sessionStorage
Esse item da API serve para armazenar informação na sessão do cliente que está acessando sua aplicação. É interessante utilizar esse tipo de storage quando o usuário tem informações específicas para a sessão como por exemplo, você deseja abrir 2 janelas da sua aplicação e em uma janela fazer a configuração A e na segunda janela, fazer a configuração B sem que elas tenham interferência uma na outra. Esse tipo de storage também não é persistido, ou seja, quando a sessão fechar, todas as informações são perdidas

localStorage
Esse item da API serve para manter uma informação guardada por tempo indeterminado, ou seja, se o usuário fechar o browser e desligar a máquina e no dia seguinte acessar sua aplicação, ela poderá recuperar qualquer informação que tenha sido armazenada no storage. Para o pessoal que conhece Flex, essa função é idêntica ao SharedObject, pelo pouco que pude testar.

Utilização
A api é bem simples, todo armazenamento é baseado em CHAVE=VALOR e agora vou comentar sobre 3 métodos básicos para sua utilização:

1. setItem(key, value)
Utilizado para adicionar um item ao storage.
localStorage.setItem(‘nome’, ‘DClick’);

2. getItem(key)
Utilizado para recuperar o valor de uma key.
alert(localStorage.getItem(‘nome’)); //resultado ‘DClick’

3. removeItem(key)
Utilizado para deletar o registro referente a key.
localStorage.remoteItem(‘nome’);

Gostaria de ressaltar que os conceitos mostrados aqui são bem simples, apenas como algo introdutório ao assunto. Espero que estejam gostando!

Twitter!

Antes de mais nada, meu enorme agradecimento a diretoria da DClick, Rafael Martinelli, Rogério Martinelli, e Eduardo Melendez, os quais estavam comigo nesse evento da MAX de 2011.

Como alguns aqui já sabem, fui para a MAX porque ganhei a primeira Season do Agon, nossa rede social interna na DClick.

E claro, estou aqui para trazer as minhas primeiras impressões sobre o evento.
Começo dizendo que de infraestrutura não deixa nada a desejar, é um evento de grande porte, muito bacana, e com uma produção de dar inveja. A abertura do evento possui toda a pirotecnia possível, mas vamos deixar essa parte de lado (que você pode conferir facilmente no youtube) para comentar sobre o conteúdo do evento, que é o mais importante.

Sempre reforço que Design é uma matéria que pertence a UX, e não o inverso, tal como outras demais matérias fazem parte do resultado final que é a Experiência do Usuário, e reforçando o que Rafael Martinelli comentou no seu post, a tecnologia é o meio, e ? no Design não é diferente… ? você pode desenvolver uma User Interface com qualquer ferramenta, e para qualquer estrutura, ou seja, qualquer linguagem, Flex, HMTL5, Android, iOS, etc etc… e claro, a ferramenta gráfica mais poderosa do mercado continua sendo o imbatível Photoshop, na minha humilde opinião… Eu sinceramente estava bastante curioso para ver o que a MAX iria trazer nesse sentido, na área de Interfaces, portanto me escrevi nas diversas Sessions de Photoshop, também na de ROX (Return of Experience, ROI pensando no Usuário) e claro, em uma palestra de Flash Catalyst….

Vou começar falando minha impressão sobre as palestras sobre Photoshop, o que vi foi que não se falou muito, ou quase nada de User Interface, e sim foi mostrado técnicas para fotógrafos e outros designers que visam o tratamento de imagem, ou ainda, a produção de imagens detalhadas com 3D e outros efeitos. Confesso que como AppDesigner que sou, me senti meio orfão, mas não é de se admirar, não há profissionais muito empenhados nesse segmento, nem mesmo lá fora, certamente a Adobe fez uma pesquisa do que seria mais atrativo aos participantes da MAX, e acertou em cheio nas palestras voltadas a tratamento de imagens, pois acaba agradando a todos, mesmo AppDesigners como eu se interessam também pelo assunto, pois também utilizamos tais recursos.

Sobre UI não vi nada de novo, nada que eu já não conheça, mas sobre tratamento de imagens, não exatamente no Photoshop, mas por exemplo no Camera Raw e Adobe Bridge, vi recursos que podem ajudar-nos no dia a dia a sermos mais produtivos, sim, muito mais produtivos.. ? e vou abordar as técnicas que vi em posts futuros. Resta dizer ainda, meio que reforçando os comentários do Rafael, que me surpreendi um tempo e vi um pouco de descaso ao Flash, ao Flex nem se fala, praticamente só ouvi falar do mesmo na Session de Catalyst, mas sobre o Flash, depois seu logo apareceu estampado no telão da general session… ? mas o foco era outro, percebi o que não é novidade para ninguém o quanto a plataforma está voltada para games. E claro, o quanto os games estão voltados para o social.

Mas se teve algo que foi comentado em grande escala em todos os eventos, quer seja a general session ou os eventos segmentados, foi sem dúvida o tão badalado nome do momento: HTML5. Acho que você tanto quanto eu sabe as implicações dessa tecnologia, do que ela depende, etc… mas não cabe aqui discutir isso, e sim que o mercado está aceitando o nome, como uma grife, como algo que as pessoas querem estampar. Eu me lembro do termo Web2.0, baladíssimo, as pessoas citam os termos mas não sabem do que se trata realmente.

Agora chega de blá blá blá e vamos a um resumo da situação.

Photoshop:

A MAX trouxe profissionais que falaram de muitas novidades, não dentro do software, mas extensões, aquele tipo de ferramenta que te ajuda no dia a dia. Se teve algo de novo para mim no Photoshop foi sobre uma palestra de compactação de arquivo JPG, confesso que ouvi coisas que me surpreenderam, e é de uma utilidade absurda. Futuro Post

UX:

Nada de novo, mas o óbvio, que avaliar as possibilidades do estudo centrado no usuário pode trazer um retorno muito maior ao investimento feito nos projetos. Não é novo, mas a maioria das empresas não aplica essa estratégia… ? UX também é um termo que está já meio que saturado, todo mundo fala, ninguém sabe o que é, mas é bonito de se citar… ? Não é bem assim que deveria ser, mas ao que parece, a Adobe também está fazendo o seu papel em educar os seus profissionais e evangelistas sobre esse termo, o que é, e o quanto é importante nos projetos. Logo, foi positivo ver esse posicionamento da empresa sobre o assunto. ROX, Futuro post

Design:

A MAX não é o que podemos dizer de um evento propriamente voltado a esse segmento, para isso existe um evento só sobre Photoshop, onde além de se tratar do software em si, se fala sobre os diversos aspectos do Design. Mas resta dizer que estava impecável o tratamento e cuidado com a matéria, quer seja nos games que vi, aplicações, ou citações nas palestras.

Novidade:

A Adobe trouxe alguns tipos de apps para mobile (Tablet mesmo), que pasmem (até parece.. rs) são para Androids primeiramente, e em breve vão sair para iOS.
Você pode encontrá-las aqui: http://www.adobe.com/products/touchapps.html

Aos poucos estarei trazendo as novidades referente aos temas que abordei em posts ou screencasts. Acompanhem o Blog!!!