Email
Like
Liked ×
Save
Private Content
Embed
Loading embed code…
We have emailed the verification/download link to "".
Login to your email and click the link to download the file directly.

To request the link at a different email address, update it here. Close
Validation messages. Success message. Fail message.

Check your bulk/spam folders if you can't find our mail.
Loading

+ Follow

Adobe Shadow - Amsterdam Adobe Camp

by Mihai Corlan on Aug 23, 2012

713 views

Accessibility

View text version

Upload Details

Uploaded via SlideShare as Microsoft PowerPoint

Usage Rights

File a copyright complaint

2 Embeds 3

https://si0.twimg.com	2
https://twitter.com	1

Statistics

Likes: 2
Downloads: 6
Comments: 0
Embed Views: 3
Views on SlideShare: 710
Total Views: 713

IntroductionWhois a mobile developer?Who knowswhatAdoe Shadow is?Who used Shadow?
So what is Adobe Shadow?I will actually answer this question by telling you the problems it solves. So when you develop mobile websites you are still doing this on your laptop or desktop. Right? So you will be using your favorite text editor or IDE, your favorite browser and developer tools or firebug and so forth.
But at some point you have to test the page on mobile devices. And this is where the “fun” part starts. So you pull out your first device and using the tiny keyboard you start typing the URL. Sometimes this URL is not short – you may use a local server so part of the URL is your computer’s IP address. Then you test on your second and third device. So more fun.Then maybe you change something in the code and you are not sure if the browsers from the device are using the cache or the latest assets.How about screenshots? You may need screenshots for documentation or design and in truth it is a pain in the ass to take screenshots on mobile devices. Like on iOS you have to email it to yourself an so forth.What about debugging the code that runs on the device?Now, it may look that I am over exagerating but my point is that all these stuff takes time and it shouldn’t. You should spend this time developing and not trying to get to the point when you can actually test.What are the solutions? To some extent weinre and Chrome for Adroid alleviate some of these issues but not all of them.
And this is what Shadow brings to the table. It streamlines the whole process and gives you back this lost time. How?First of all it offers something called synchronized browsing. Once you installed the product and paired your mobile devices with your computer, all you have to do to test a page is to type in the URL on your computer and your mobile devices will magically display the same URL without you doing anything. As you navigate on your computer, the devices will be kept in synch displaying the same URL as your computer.
But this is not all. Shadow supports remote web inspector sessions. You can start a session with any of the connected mobile devices, one at a time. So the web inspector running on your computer is connected to the mobile browser. And you can check the DOM, CSS properties, or use the JavaScript Console.
How it works? Adobe Shadow have three different parts. First there is the desktop application that acts like server between the mobile devices and the desktop Chrome browser. Then there is the Chrome extension. And finally the mobile Shadow apps.
Let’s see Adobe Shadow in action. Script:Pairing a device.Loading a remote website and navigate to different URLs. Bostonglob maybe?Loading a localhost website localhost/atabsplitter/Refresh GestureDebugg session
Shadow works on Windows and Mac OS. It works for iOS and Android devices. Here are some of the features and want to highlght the support for LiveReload, HTTP authentication, and one page apps.
Finally make sure you check these resources if you want to get the product. For now it is beta and it is free.

2 Likes

teiichi ota, business development manager at adobe 9 months ago
Takeshi Watanabe 9 months ago

Adobe Shadow - Amsterdam Adobe Camp Presentation Transcript

#CreateTheWeb Adobe ShadowMihai Corlan / Adobe Web Evangelist / @mcorlan
Boring … is this all? Support for remote Web Inspector sessions: inspect the DOM, check the CSS properties, JavaScript Console …© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. #CreateTheWeb
Boring … is this all?  Support for taking screenshots  Cache management - refresh Gesture for loading the latest assets  Support for HTTP Authentication  Support for one page apps (URL fragments/#)  Support for SSL  Integration with Adobe Edge  Works with LiveReload© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. #CreateTheWeb
How does Adobe Shadow work? 1. Install the Adobe Shadow app and the Adobe Shadow Chrome extension on your computer 2. Install the Adobe Shadow mobile app on your mobile devices 3. Connect all devices to the same Wi-Fi network© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. #CreateTheWeb
Demo Time#CreateTheWeb
Adobe Shadow supports  Windows and Mac OS  You have to use Chrome on your computer/laptop  iOS (4.2+) and Android (2.1+) devices (including Kindle Fire)© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. #CreateTheWeb
Where can I get Adobe Shadow and how much does it cost?  Adobe Shadow is in beta now and it is free  Later this year: included in CCM and sold separately too as a subscription  You can download it from http://labs.adobe.com/technologies/shadow/  Shadow Team blog: http://blogs.adobe.com/shadow/  Shadow Home Page: http://html.adobe.com/toolsandservices/shadow/  Twitter: @adobeshadow© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. #CreateTheWeb
Questions & Answers! Thank you! Mihai Corlan @mcorlan http://corlan.org #CreateTheWeb

Adobe Shadow - Amsterdam Adobe Camp

by Mihai Corlan on Aug 23, 2012

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 3

Statistics

Adobe Shadow - Amsterdam Adobe Camp Presentation Transcript