---
title: Adobe Edge
authors: Diego Eis
type: post
date: 2012-09-26
excerpt: 'Adobe Edge - uma suíte que reúne diversas aplicações para ajudar os desenvolvedores web.'
url: /adobe-edge/
tweetbackscheck:
  - 1356471664
shorturls:
  - 'a:3:{s:9:"permalink";s:31:"https://tableless.com.br/?p=6971";s:7:"tinyurl";s:26:"https://tinyurl.com/8oftcxd";s:4:"isgd";s:19:"https://is.gd/5CbbO7";}'
twittercomments:
  - 'a:0:{}'
dsq_thread_id: 859517875
categories:
  - Código
  - CSS3
  - HTML
  - HTML5
  - Javascript
  - JQuery
  - Notícias
tags:
  - 2012
  - adobe
  - CSS
  - desenvolvimento web
  - Javascript
  - padroes web

---
A [Adobe tem ajudado demais][1] o mercado de desenvolvimento web nos últimos tempos. Ela entendeu que a perda do mercado do Flash não foi uma derrota, pelo contrário. Com esse cenário ela criou o Edge, uma suite de desenvolvimento que reúne diversas soluções que ajudam o desenvolvedor web a produzir serviços e websites utilizando as últimas novidades dos padrões web. Como diz parte da Missão descrito no site deles:

> Adobe makes tools that enable designers and developers to share their creativity with the world. The advent of sophisticated graphical and interactive features has made it possible for the web to deliver highly engaging experiences. For Adobe, that means the need for new creative tools and services.

 <img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2012/09/edge_reflow_hero-300x164.png" alt="" title="edge_reflow_hero" width="300" height="164" class="alignleft size-medium wp-image-6972" srcset="uploads/2012/09/edge_reflow_hero-300x164.png 300w, uploads/2012/09/edge_reflow_hero.png 900w" sizes="(max-width: 300px) 100vw, 300px" />O novo <a href="https://html.adobe.com/edge/" title="Ferramentas para Desenvolvedores Web" target="_blank">Adobe Edge</a> inclue ferramentas como o <a href="https://html.adobe.com/edge/animate/" title="Animações com CSS e Javascript" target="_blank">Edge Animate 1.0</a>, uma ferramenta que cria animações baseadas em HTML, CSS e Javascript. Há também o <a href="https://html.adobe.com/edge/inspect/" title="Teste seu código" target="_blank">Edge Inspect</a>, conhecido como Adobe Shadow, que permite testar seus sites em diversos dispositivos de uma vez. Há também o <a href="https://html.adobe.com/edge/code/" target="_blank">Edge Code</a>, um fork do editor de código <a href="https://github.com/adobe/brackets" target="_blank">Brackets</a>.

Há também o glorioso [Edge Web Fonts][2], uma espécie de Google Fonts que a Adobe criou que te dá acesso a uma biblioteca gigante de fonts feitas com contribuições da Adobe, Google e diversos designers do mundo todo. **De graça**. Vale um post apenas para este serviço, já está no forno.

A Adobe também anunciou o <a href="https://html.adobe.com/edge/reflow/" target="_blank">Edge Reflow</a>, uma nova ferramenta para trabalhar com layouts baseados em RWD. O Edge Reflow é uma boa idéia para marcar breakpoints e planejar um layout responsive, mesmo assim eu não me vejo utilizando algumas features como modificar fundos, imagens e cores como mostra no vídeo abaixo, mesmo assim eu quer experimentá-lo quando estiver disponível.



Acho que o meu favorito foi o Edge Animate. Existem algumas coisa no CSS 3 que não são necessárias fazer sempre na mão, como gradientes, por exemplo. Eu utilizo ferramentas como <a href="https://www.colorzilla.com/gradient-editor/" target="_blank">sistema de criação de gradientes do ColorZilla.com</a> sem dó. É simples, rápido e indolor. Um sistema bem feito para criar animações baseadas em padrões web é tudo o que um refugiado do Flash gostaria de ter hoje em dia. O Edge Animate vem para resolver essa necessidade. Ele ainda não faz animações baseadas em SVG ou Canvas, mas utiliza um motor Javascript baseado em JQuery para produzir animações customizáveis em qualquer editor de texto, como <a href="https://html.adobe.com/edge/animate/faq.html" target="_blank">informa o FAQ</a>.

> Edge Animate implements animations and imported graphics using a JavaScript animation library that is built on the popular jQuery Core framework. Animations and graphics created in Edge Animate are unobtrusive (they are attached to the HTML at runtime by JavaScript), which makes it easy to integrate Edge Animate compositions with larger web pages and sites.

O problema é que a Adobe tem que ganhar dinheiro de alguma forma, né? Ou você acha que ela é o papai noel? O Edge Animate pode ser seu pela bagatela de USD$499 ou USD$14.99 mensais. Por um tempo limitado ele será disponibilizado de graça dentro do Creative Cloud (mais detalhes sobre o Creative Cloud em um post posterior).

Para falar a verdade eu gostei das iniciativas da Adobe e com certeza ela vai ganhar muitos adeptos que se foram durante o tempo e também, talvez, quem sabe, recuperará a má fama adquirida por muitos desenvolvedores web nos últimos anos.

 [1]: https://tableless.com.br/adobe-e-os-padroes-web/
 [2]: https://html.adobe.com/edge/webfonts/