Here’s a great video introduction to Adobe Creative Cloud. I strongly recommend taking a moment to watch it if you have any questions about Creative Cloud, even if you’re already are a member. It’s only two and a half minutes, so it won’t take much of your time.
Enjoy!
Amongst the big announcements last week, you may not have noticed that the Adobe Edge Web Fonts got a huge upgrade too! It’s now easier than ever to browse web fonts and include them into your own HTML experiences. All for free, with no Creative Cloud membership required!
Adobe Edge Web Fonts
Check out the video below to see the new interface in action:
Also shown in the video is Adobe Edge Code for live editing/previewing HTML in the browser.
Enjoy!
Another exciting announcement from the Adobe MAX first day keynote was Adobe’s explorations into cloud enabled hardware for creative processes. Adobe announced two exciting new pieces of creative hardware: Project Mighty and Project Napoleon.
Project Mighty is a pressure sensitive pen that enables expressive drawing. However, it’s not *just* a pressure sensitive stylus/pen. Project Mighty knows who you are, and is connected to Creative Cloud to enables quick access to your personalized Kuler themes, and a cloud-clipboard for copying assets across devices.
Project Napoleon is a tool designed to complement Project Mighty by bringing an analog experience back to the digital creation process. Project Napoleon is a drawing aid that enables the experience of a T-square or Triangle in the digital/tablet world.
You can check out both of these tools in action in this excerpt from the Adobe MAX day-one keynote:
I strongly suggest checking out the Adobe Featured Blog to learn more about both Project Mighty and Project Napoleon. You can also sign up to be notified and learn more about Adobe’s explorations into cloud enabled hardware at http://xdce.adobe.com/mighty/
The keynotes and many of the session videos form Adobe MAX are now available online at tv.adobe.com/show/max-2013/, and are free for everyone to view. Keep in mind, not all videos are up yet, but will be added soon.
Thanks to Ray for sharing on twitter!
The first-day keynote focuses on Adobe’s evolution of Creative Cloud and various product updates. The second day keynote focuses upon inspiration – do not miss this one. I especially liked Erik Johansson and Rob Legatto’s segments.
About This Episode: The process of where and how we create is dramatically changing thanks to major advancements in technology, and there has never been a more exciting time. Join Adobe CEO Shantanu Narayen, Adobe’s SVP and GM of Digital Media David Wadhwani, and a collection of Adobe visionaries across digital photography, web design, illustration, video and more as we unveil brand new creative workflows and capabilities. We’ll take a look at the present and set our sights on the endless possibilities in our creative future.
About This Episode: Join David Wadhwani, Adobe’s SVP and GM of Digital Media, as he welcomes four incredibly creative minds to explore how they foster creativity and approach their work. You will hear from Rob Legato, an Oscar winning visual effects supervisor; Paula Scher, an iconic graphic designer and illustrator; Erik Johansson, an up and coming photographer and retouch artist; and Phil Hansen, a constraint-based artist that believes limitations drive creativity. We think you’ll leave with more than a few new ideas to incorporate in your next creative project.
You can view all Adobe MAX 2013 session recordings online at: http://tv.adobe.com/show/max-2013/ (Keep in mind, not all videos are up yet, but will be added soon).
Update: Videos of MAX Sneaks also available via the Adobe Creative Cloud Youtube Channel.
If you haven’t already heard of Adobe Edge Code or Brackets, it is a new HTML/CSS/JS code editor that enables a rapid development cycle by connecting directly to your browser for automatic real-time updates to the HTML content running inside the browser. This promotes rapid development, and allows you to focus on writing your code rather than worrying about all the steps required to switch between your editor and browser and step through development and debugging iterations.
In most contexts we talk about the live HTML/JS/CSS development perspective on the client side, but I’d also like to highlight that Adobe Edge Code and/or Brackets can be used to rapidly develop dynamic server-side web code too. Check out the screencast below to see live editing of dynamically generated HTML content using the latest Brackets release (Sprint 23).
This streamlined workflow can be incredibly powerful, especially for rapid prototyping scenarios. You just focus on writing code and creating an experience. Let the edtior offload the work of updating the live content in your browser to keep you focused on the task at hand.
To enable the Edge Code/Brackets preview on a server, just go into “File->Project Settings”, and then specify a “Preview Base URL” string. The preview base URL will be prefixed to the name of the file that you are editing, and will be used for the browser’s URL in the live connection. So, if you are editing “index.html” with a preview base URL of http://tricedesigns.com, brackets will launch the live connection with the URL “http://tricedesigns.com/index.html”.
However, keep in mind that Edge Code & Brackets’ primary use case is editing HTML/JS/CSS, not server-side languages. The editor won’t have code hinting for your server-side code, unless you are using an extension that enables code hinting (with the exception of NodeJS because JavaScript is supported). The current build of Brackets also changes the live preview URL when you change files. So, if you are editing “index.cfm”, and switch to “content.cfm” in the editor, the live preview will follow, and switch to “http://{urlprefix}/content.cfm”. If the files are intended to be separate, this works great. However, if content.cfm isn’t a standalone file, the live preview won’t be as valuable. Meaning: if content.cfm is actually an included file inside of index.cfm, the live preview of content.cfm may not work the way you want it to. In either case, this can still be a very valuable tool with rapid prototyping.
Speaking of extensions… Edge Code/Brackets is built with an extensible plugin architecture. Since the editor itself and all of the extensions are written with HTML/JS, you can easily extend and customize the tool to add any functionality that you want.
if you’re wondering about the difference between the names Adobe Edge Code and Brackets, Adobe Edge Code is Adobe’s distribution of the Brackets editor. Adobe Edge Code has scheduled releases, and includes useful extensions and tie-ins to other Adobe services (for example, Adobe Web Fonts and more). Brackets is the open source project for the core editor itself. Brackets is on a 2-3 week sprint cycle, and is rapidly evolving. Essentially, Brackets is the “engine” that powers Adobe Edge Code.
I chose a simple ColdFusion demonstration because I already had an existing code sample I could reuse, however this will work with PHP, NodeJS, or other server-side scripting libraries. The latest builds of Brackets even have NodeJS built directly into it.
The code that I used in this example is available as a gist for download. This was based on my existing US Census Browser sample PhoneGap application.
Enjoy!