Dreamweaver CC Mobile App Design with PhoneGap

February 2016

Software & Technologies

Dreamweaver CC 2015, HTML5, CSS, JavaScript, jQuery Mobile, PhoneGap, Mobile Design

Overview

Check out Dan’s latest course with Train Simple, where you’ll explore the world of PhoneGap, from a Dreamweaver user’s perspective. In this course, Dan guides you through developing an HTML5 mobile app in Adobe Dreamweaver using the PhoneGap framework. First, you’ll learn about the different forms of mobile development and the benefits of each. Next, Dan reviews all the features built into Dreamweaver for mobile development. Finally, you’ll build a mobile app from a Photoshop mockup (see Fig 1) and test the app on a mobile device.

photoshop-mockup

Fig 1: The Photoshop mockup for the project

Along the way, you’ll start your projects with template files generated with Adobe PhoneGap Desktop, then you’ll customize the template using jQuery Mobile widgets and JavaScript in Dreamweaver, and in the end you’ll package your app using Adobe PhoneGap Build. (4 hours)

Links

Recent Releases (Train Simple)
Dreamweaver CC Mobile App Design with PhoneGap

CSS Designer Tutorial for Adobe

February 2016

Software & Technologies

HTML5, CSS, Dreamweaver CC, CSS Designer, Selectors, Media Queries, Web Design

Overview

Dan’s most recent work with CC Learn revisits CSS Designer in Dreamweaver CC. This video shows you how CSS Designer works, and how easy it is to build a webpage using visual design. Navigate your code by viewing all selectors at once, or use context-sensitive editing to adjust styles attached to a selected element. Click the link below to learn how. (9 min)

adobe-screens1-new

Links

https://helpx.adobe.com/dreamweaver/how-to/style-web-page-css.html

What is Adobe Animate CC?

February 2016

Software & Technologies

Adobe Animate CC (Formerly Flash Pro), HTML5, Canvas, JavaScript, CreateJS, Interactive Games

Overview

Dan’s HTML5 puzzle game makes a brief appearance in the this overview of what you can do with the newly re-branded, Adobe Animate CC. Check out the video to see how you can use Animate CC to create a variety of animated content such as animated cartoons, advertisements, games, and other interactive content to publish on platforms such as HTML5 Canvas, Flash Player & Air, WebGL, or custom platforms such as Snap SVG. (3 min)

adobe-screens2

Links

https://helpx.adobe.com/animate/how-to/make-an-animation.html

Adobe Inspire Magazine Retired

December 2015

Overview

Adobe Inspire Magazine is retiring in December 2015, and is evolving to the new Adobe Create Magazine format. Dan had a good run producing several article series for Inspire between 2012 and 2014, exploring HTML5 technologies and Adobe product workflows. Although content and articles have been removed from the Adobe website, you can still check out Dan’s most recent Inspire article on SitePoint, and see related videos on Adobe TV.

adobe-screens3

Links

http://create.adobe.com/2015/11/9/inspire_is_now_adobe_create_magazine.html

Ree 2.1.1 with Syracuse University

November 2015

Software & Technologies

Xcode, Objective C, Swift, iOS Custom Keyboard, Messaging, Social Networking

Overview

Dan leads front end development and UX for the REE (Really Expressive Emojis!) app. REE is currently in the Apple Store in its second version. This update  includes new sticker sets in our partnership with Syracuse University sports teams, and the ability to send stickers to iMessage, Facebook, and Twitter directly in the Ree app. Updates to the UI make messaging and managing artwork easier than ever (see Fig 1).

ree-2-images

 Fig 1: The latest share features in the REE 2 app

Check out the latest stickers, and try the new messaging options.

Links

http://www.reestickers.com/
https://itunes.apple.com/us/app/ree-stickers-emoji-keyboard/

adobe-screens6

Fig 2: Syracuse University’s Otto the Orange

Check out Michael Borkowski‘s artwork (see Fig 2):
https://www.behance.net/gallery/33282525/Otto-the-Orange-Syracuse-stickersemojis

Premiere Pro Effect Plugin for RTi Studios

October 2015

Software & Technologies

Xcode, C++, OpenGL, OpenCL, Premiere Pro, Video Effects, Panoramic Video

Overview

Dan’s most recent work with RTI Studios dives into custom extension development for Premiere Pro.  The effect plugin includes features for dewarping panoramic video on GPU and CPU. The project started by porting code from an existing Finalcut Pro plugin written in OpenGL. Explorations in hardware acceleration led to solutions in OpenCL.

The extension appears in the Video Effects list, with custom parameters, and a live preview:

 rti-plugin-screen

This version was built for Mac, with an architecture ready to port to Windows. The extension is packaged into a ZXP file for easy installation with Adobe Extension Manager CC.

Links

http://www.rtistudios.com/

Responsive Design Course for Train Simple

September 2015

Software & Technologies

Dreamweaver CC 2015, Bootstrap 3, Components, Responsive Design, HTML5, CSS, Video Training

Description

Check out Dan’s first video training course with Train Simple. In this course, Dan guides you through developing a responsive website in Adobe Dreamweaver using the Bootstrap framework. First, you’ll learn about what responsive design is and its role in modern web design. Next, Dan reviews all the features built into Dreamweaver for working with Bootstrap. Finally, you’ll build a complete responsive website from a Photoshop mockup and test your site on various devices. (5 hours)

dw-bootstrap-screen

Links

Dreamweaver CC Responsive Design with Bootstrap

iOS 8: Ree 2 Released with Custom Keyboard

July 2015

Software & Technologies

Xcode, Objective C, Swift, iOS Custom Keyboard, Messaging, Social Networking

Client

Switch up your keyboard with REE (Really Expressive Emoji’s!), a new, fast, and fun way to express yourself! Choose from a variety of high quality images that are bigger, crisper, and far more expressive than typical Emoji stickers.

Overview

Dan leads front end development and UX for the REE (Really Expressive Emojis!) app. Version 2 of the Ree app provides a major upgrade to the sticker app, and the first official release. Ree 2 takes advantage of the iOS 8 custom keyboard extension features. The update includes a new user interface, a custom keyboard available in iMessage, and an expanded set of artwork by top animators and designers.

adobe-screens7jpg

Ree is built in Xcode, developed in the Apple Developer Program, and published through the Apple Store by MyWeb Software.

Links

http://www.reestickers.com/
https://itunes.apple.com/us/app/ree-stickers-emoji-keyboard/

Check out Valérie Morency’s artwork:
https://www.behance.net/gallery/19456499/ValMO-EMOJI

Check out Isabella Kung’s artwork:
http://isabellakung.com/portfolio.html

video-placeholder

Kayak Banners for Yahoo! and Europe

March 2015

Software & Technologies

ActionScript 3, Flash Pro, Flash Develop, Branded Web Banners, 3D Animation Engine

Overview

Dan developed a 3D animation engine used to dynamically build Kayak flip-board banners (2010-present). The project was first implemented on the Kayak “Make a Flippy” page, then packaged as a Flash component to support third-party distribution and ad banner production. Dan produced banners for Hotwire and Yahoo! (see Fig 1). He also created a standard collection of Kayak marketing banners at common industry sizes, and localized components and banners to 8+ European languages.

yahoo_kayak_dec262012

Fig 1. Flippy banners on Yahoo!

Dan provides ongoing banner development as needed. Recent work includes new banner size variations with standard Kayak branding.

Links

The animation engine can be seen here on the Make a Flippy page:

https://www.kayak.com/flippy

Hello Videos for Adobe CC Learn

February 2015

Software & Technologies

Dreamweaver CC, Photoshop CC, Creative Cloud, HTML5, CSS, Visual Coding, CSS Designer, Web Design, Extract, Assets Production

Overview

Dan recorded 6+ videos for Hello screens in Dreamweaver CC and Photoshop CC. He worked with product managers to define training goals, developed project files and tutorial assets, and designed tutorials for new technologies. Video tutorials focused on visual code design in Dreamweaver and assets production using Extract.

Links

Check out the following links to explore the video tutorial series:

adobe-screens8

Build from starter templates (4 min)
https://helpx.adobe.com/dreamweaver/how-to/build-from-website-templates.html

adobe-screens9

Navigate your HTML (6 min)
https://helpx.adobe.com/dreamweaver/how-to/view-modify-html-tree-structure.html

adobe-screens10

Create a portfolio gallery (3 min)
https://helpx.adobe.com/dreamweaver/how-to/make-web-portfolio.html

adobe-screens11

Extract Overview (2 min)
https://helpx.adobe.com/creative-cloud/how-to/extract-assets-browser-workflow.html

adobe-screens12

Extract Assets for the web (3 min)
https://helpx.adobe.com/photoshop/how-to/extract-psd-assets-browser.html

adobe-screens13

From PSD to HTML & CSS (4 min)
https://helpx.adobe.com/dreamweaver/how-to/extract-photoshop-design-code.html