Posts in Category "HTML"

A beginner’s guide to Adobe Edge Tools & Services

If you, like me, have been keenly following the Create the Web Tour, you’d know all about Adobe Edge Tools & Services. But if you are one of those who heard the buzz about the Create the Web events, but missed out on the details. Despair not! Here’s a quick introduction to Adobe Edge Tools & Services to help you get started. Read on.

Introducing Adobe Edge Tools & Services

Adobe Edge Tools & Services are designed to help web designers and developers create beautiful websites, digital content, and mobile apps using the latest web technologies, including HTML5, CSS3, and JavaScript.

Adobe Edge Tools & Services include Edge Animate, Edge Reflow (sneak peek), Edge Code, Edge Inspect (formerly codenamed Adobe Shadow), Edge Web Fonts, Typekit, and PhoneGap Build. The Adobe Edge Tools and Services are available with a free or paid Creative Cloud membership. For more information, see http://adobe.ly/VxX0aN.

As you read on, you’ll know more about each product in the Edge family. But before that, watch the video recording of the Create The Web San Francisco Keynote (September 24th, 2012).

Getting to know the Adobe Edge family

 Now, let’s understand a bit more about each product in the Edge family, and who’s best suited to use these products.

Adobe Edge Animate 

Edge Animate is a new motion and interaction tool to create animated, interactive content using HTML, CSS, and JavaScript. Edge Animate is best suited for web designers, web developers, and interactive designers who want to enrich their web content with motion and interactivity.

 Watch this video from the Create the Web Keynote in San Francisco, where Adobe’s Danny Winokur and Paul Trani introduce Adobe Edge Animate.

You can get started with Edge Animate by going to http://html.adobe.com/edge/animate/.

Adobe Edge Inspect

Edge Inspect (formerly codenamed “Shadow”) is an application that lets you preview and inspect web designs on multiple devices. With Edge Inspect, you can easily pair multiple smartphones and tablets with your computer and preview and inspect websites for different form-factors in real time. Edge Inspect is ideal for web developers and designers who are working on mobile projects.

To watch Edge Inspect in action, see this video. You can download and get started with Edge Inspect at http://html.adobe.com/edge/inspect/.

 Adobe Edge Code (Preview) 

Edge Code (Preview) is a code editor for HTML, CSS, and JavaScript. Edge Code is helpful for web designers and developers who write HTML, CSS, and JavaScript.  You can watch this video to know more.

To get started with Edge Code (preview), visit http://html.adobe.com/edge/code/.

Adobe Edge Reflow (Sneak)

Edge Reflow is a new tool, with an HTML-based design interface, for creating responsive web designs using CSS. Edge Reflow is ideal for web designers and developers who want to create responsive layouts, images, and CSS visuals targeting modern browsers and mobile devices. You can watch a sneak peek of Adobe Reflow  in this video.

 To be notified when Edge Reflow becomes available, keep an eye on http://html.adobe.com/edge/reflow/.

 Adobe Edge Web Fonts and Adobe Typekit 

Edge Web Fonts is a new free web font service that gives you access to a vast web font library made possible by contributions from Adobe, Google, and designers around the world. To learn more, read this blog post, and to get started go to http://html.adobe.com/edge/webfonts/.

Adobe Typekit plans to provide access to hundreds of commercial and premium web fonts.  You can get started by checking out http://html.adobe.com/edge/typekit/.

Also, don’t miss watching this video, from Create the Web Keynote in San Francisco, for an overview of Adobe Typekit, and an announcement of new open source fonts from Adobe and the Adobe Edge Web Fonts.

Adobe PhoneGap Build

Adobe PhoneGap Build is a cloud-­based service built on top of the PhoneGap framework. Here’s a helpful list of FAQs that can provide you more information: https://build.phonegap.com/faq.

To get started with Adobe PhoneGap Build, go to http://html.adobe.com/edge/phonegap-build/.

Join the conversation

So, that was a quick introduction to the products in the Adobe Edge family. But, there’s lots more happening that you should not miss out on (it’s never too late!) —  do join the conversation on Twitter (@createtheweb), just remember to use the hashtag #CreateTheWeb.