Introduction to Adobe Shadow
•Download as PPTX, PDF•
1 like•1,268 views
The document discusses Adobe Shadow, an innovative solution that streamlines website development for mobile devices. Adobe Shadow allows developers to connect mobile devices to a computer and browse websites synchronously. It also enables inspecting DOM, CSS, and JavaScript across devices. The solution works by installing apps on the computer and connected mobile devices, which then synchronize browsing over WiFi. Adobe Shadow is currently free and available for download in beta.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Introduction to Adobe Shadow
Similar to Introduction to Adobe Shadow (20)
More from Mihai Corlan
Recently uploaded
Recently uploaded (20)
Introduction to Adobe Shadow
- 1. Adobe Shadow Mihai Corlan | Web Developer Evangelist | Adobe
- 2. About Me Mihai Corlan Adobe Developer Evangelist Blog: http://corlan.org Twitter: mcorlan Email: mcorlan@adobe.com © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2
- 3. Transylvania
- 4. Agenda Adobe Shadow is an innovative solution that streamlines website development for mobile devices. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 5. The Problem You develop on a desktop/laptop This is where you spend most of your time, testing included © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 6. The Problem Desktop Devices … © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 7. Solution: Adobe Shadow Adobe Shadow allows developers to connect their mobile devices to a computer and do “synchronized browsing” Each connected mobile device will display the same URL as the computer’s browser and it will stay in synch as you change the URL on your computer Computer Mobile Devices URL © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 8. 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.
- 9. How does Adobe Shadow work? Install the Adobe Shadow app and the Adobe Shadow Chrome extension on your computer Install the Adobe Shadow mobile app on your mobile devices Connect all the devices to the same Wi-Fi © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 10. Demo Time
- 11. Adobe Shadow supports Windows and Mac OS You have to use Chrome on your computer/laptop iOS and Android devices Support for localhost/127.0.0.1 URLs Support for HTTP Authentication Support for one page apps (URL fragments/#) Integration with Adobe Edge Refresh Gesture for loading the latest assets Works with LiveReload © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 12. Where can I get Adobe Shadow and how much does it cost? Adobe Shadow is in beta now and it is free 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.
- 13. Adobe Creative Cloud Membership Membership Annual Plan Month-to-Month Plan Adobe Creative Cloud $49.99 per month $74.99 ACC Student & Teacher $29.99 per month - ACC Current CS Customers (CS3 or $29.99 per month - newer) ACC = Adobe Creative Cloud © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 14. Thank You! Question & Answers Time! http://corlan.org http://twitter.com/mcorlan http://github.com/mcorlan mcorlan@adobe.com
Editor's Notes
- My name is Mihai Corlan and I am a developer evangelist for Adobe. You can find more about what I’m doing on my blog at corlan.orgI am based in Europe
- Actually my boss says that the coolest thing about me is the fact I am from … Transylvania. You know Dracula’s home. This is true. I mean it is true that I am from Transylvania but I hope it is not the only interesting thing someone can say about me.Anyway,today I will talk about Adobe Shadow
- Who here knows what Adobe Shadow is? And who used Adobe Shadow? Ok then, you are attending the perfect session :D
- Let’s see what problem Shadow solves. Obviously, when you develop websites or web applications you use your laptop or desktop a lot. You use tools like developer tools or FireBug together with your trusted desktop browser and text editor or IDE.
- Now, although you work a lot on your desktop, when you build stuff for mobile there is no substitute to mobile testing. So after you change something on your computer and maybe upload the new files to a webserver you’ll test the changes on mobile devices. Sometimes lots of them. And you know the drill: lots of fun with tiny keyboards and so forth. And most likely you will do it again and again…
- This is where Shadow comes to rescue. It allows you to pair your mobile devices with your desktop Chrome browser and do Synchronized browsing. Basically, as you change the URL on your computer all the connected devices will stay in synch.
- 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.
- Recentley we announced Adobe Creative Cloud Membership. This is an affordable way to get your hands on all the great tools we have for creating digital content plus additional services.
- We still have some time for questions. Anyone?