SlideShare a Scribd company logo
1 of 11
#CreateTheWeb



         Adobe Shadow




Mihai Corlan / Adobe Web Evangelist / @mcorlan
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.
                                                                              #CreateTheWeb
The Problem


                             Desktop                                                          Devices



                                                                                   …




© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
                                                                              #CreateTheWeb
Solution: Adobe Shadow

  Synchronized browsing




                                   Computer                                                         Mobile Devices




                                                                                              URL




© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
                                                                              #CreateTheWeb
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

More Related Content

What's hot

Phone gap
Phone gapPhone gap
Phone gap
caviare
 

What's hot (20)

Skip the IDE with PhoneGap Build
Skip the IDE with PhoneGap BuildSkip the IDE with PhoneGap Build
Skip the IDE with PhoneGap Build
 
Introduction to PhoneGap
Introduction to PhoneGapIntroduction to PhoneGap
Introduction to PhoneGap
 
Adobe and Modern Web Development
Adobe and Modern Web DevelopmentAdobe and Modern Web Development
Adobe and Modern Web Development
 
Introduction to PhoneGap
Introduction to PhoneGapIntroduction to PhoneGap
Introduction to PhoneGap
 
PhoneGap: Building Mobile Applications with HTML/JS
PhoneGap: Building Mobile Applications with HTML/JSPhoneGap: Building Mobile Applications with HTML/JS
PhoneGap: Building Mobile Applications with HTML/JS
 
dotFes KYOTO - スマホ開発にAIR & PhoneGapを勧める5つの理由
dotFes KYOTO - スマホ開発にAIR & PhoneGapを勧める5つの理由dotFes KYOTO - スマホ開発にAIR & PhoneGapを勧める5つの理由
dotFes KYOTO - スマホ開発にAIR & PhoneGapを勧める5つの理由
 
From mobile browser to mobile app
From mobile browser to mobile appFrom mobile browser to mobile app
From mobile browser to mobile app
 
Mobile Development with Adobe AIR
Mobile Development with Adobe AIRMobile Development with Adobe AIR
Mobile Development with Adobe AIR
 
Multiscreen Development with Adobe Air
Multiscreen Development with Adobe AirMultiscreen Development with Adobe Air
Multiscreen Development with Adobe Air
 
Developing with Phonegap - Adobe Refresh 2012
Developing with Phonegap - Adobe Refresh 2012Developing with Phonegap - Adobe Refresh 2012
Developing with Phonegap - Adobe Refresh 2012
 
Building Hybrid Applications using PhoneGap
Building Hybrid Applications using PhoneGapBuilding Hybrid Applications using PhoneGap
Building Hybrid Applications using PhoneGap
 
Building a mobile app connected to WordPress with WP-AppKit
Building a mobile app connected to WordPress with WP-AppKitBuilding a mobile app connected to WordPress with WP-AppKit
Building a mobile app connected to WordPress with WP-AppKit
 
Debugging and deploying with phone gap
Debugging and deploying with phone gapDebugging and deploying with phone gap
Debugging and deploying with phone gap
 
Phone gap
Phone gapPhone gap
Phone gap
 
WebDU Keynote
WebDU KeynoteWebDU Keynote
WebDU Keynote
 
All About Phonegap
All About Phonegap All About Phonegap
All About Phonegap
 
The Future of HTML5 Motion Design
The Future of HTML5 Motion DesignThe Future of HTML5 Motion Design
The Future of HTML5 Motion Design
 
Building mobile apps using Phonegap
Building mobile apps using PhonegapBuilding mobile apps using Phonegap
Building mobile apps using Phonegap
 
GENERATE PDF OF A WEB PAGE
GENERATE PDF OF A WEB PAGEGENERATE PDF OF A WEB PAGE
GENERATE PDF OF A WEB PAGE
 
Flash: A call for sanity
Flash: A call for sanityFlash: A call for sanity
Flash: A call for sanity
 

Similar to Adobe Shadow - Amsterdam Adobe Camp

Adobe Gaming Solutions by Tom Krcha
Adobe Gaming Solutions by Tom KrchaAdobe Gaming Solutions by Tom Krcha
Adobe Gaming Solutions by Tom Krcha
mochimedia
 
Development mobile app cross device
Development mobile app cross deviceDevelopment mobile app cross device
Development mobile app cross device
Phuong Nguyen
 
Flash Applications For Mobile
Flash Applications For MobileFlash Applications For Mobile
Flash Applications For Mobile
Serge Jespers
 
Mobile HTML5 Web Apps - Codemotion 2012
Mobile HTML5 Web Apps - Codemotion 2012Mobile HTML5 Web Apps - Codemotion 2012
Mobile HTML5 Web Apps - Codemotion 2012
marcocasario
 
Flash Platform for Devices
Flash Platform for DevicesFlash Platform for Devices
Flash Platform for Devices
Serge Jespers
 
Adobe flash platform java
Adobe flash platform javaAdobe flash platform java
Adobe flash platform java
Ch'ti JUG
 

Similar to Adobe Shadow - Amsterdam Adobe Camp (20)

Creating Flash Content for Mobile Devices
Creating Flash Content for Mobile DevicesCreating Flash Content for Mobile Devices
Creating Flash Content for Mobile Devices
 
Adobe Gaming Solutions by Tom Krcha
Adobe Gaming Solutions by Tom KrchaAdobe Gaming Solutions by Tom Krcha
Adobe Gaming Solutions by Tom Krcha
 
Over the air 2.5 - Adobe AIR for Android
Over the air 2.5 - Adobe AIR for AndroidOver the air 2.5 - Adobe AIR for Android
Over the air 2.5 - Adobe AIR for Android
 
Adobe Flash platform の法人利用
Adobe Flash platform の法人利用Adobe Flash platform の法人利用
Adobe Flash platform の法人利用
 
Development mobile app cross device
Development mobile app cross deviceDevelopment mobile app cross device
Development mobile app cross device
 
Tom Krcha: Building Games with Adobe Technologies
Tom Krcha: Building Games with Adobe TechnologiesTom Krcha: Building Games with Adobe Technologies
Tom Krcha: Building Games with Adobe Technologies
 
Best practices for Flash applications on mobile devices
Best practices for Flash applications on mobile devicesBest practices for Flash applications on mobile devices
Best practices for Flash applications on mobile devices
 
MMT 28: Adobe »Edge to the Flash«
MMT 28: Adobe »Edge to the Flash«MMT 28: Adobe »Edge to the Flash«
MMT 28: Adobe »Edge to the Flash«
 
Starting mobile development
Starting mobile developmentStarting mobile development
Starting mobile development
 
Flash Applications For Mobile
Flash Applications For MobileFlash Applications For Mobile
Flash Applications For Mobile
 
Oop2012 keynote Design Driven Development
Oop2012 keynote Design Driven DevelopmentOop2012 keynote Design Driven Development
Oop2012 keynote Design Driven Development
 
Creating Mobile Content Using Flash
Creating Mobile Content Using FlashCreating Mobile Content Using Flash
Creating Mobile Content Using Flash
 
Adobe Summit EMEA 2012 : 16706 Optimise Mobile Experience
Adobe Summit EMEA 2012 : 16706 Optimise Mobile ExperienceAdobe Summit EMEA 2012 : 16706 Optimise Mobile Experience
Adobe Summit EMEA 2012 : 16706 Optimise Mobile Experience
 
Xebia adobe flash mobile applications
Xebia adobe flash mobile applicationsXebia adobe flash mobile applications
Xebia adobe flash mobile applications
 
Innovation and the Adobe Flash Platform
Innovation and the Adobe Flash PlatformInnovation and the Adobe Flash Platform
Innovation and the Adobe Flash Platform
 
Mobile HTML5 Web Apps - Codemotion 2012
Mobile HTML5 Web Apps - Codemotion 2012Mobile HTML5 Web Apps - Codemotion 2012
Mobile HTML5 Web Apps - Codemotion 2012
 
Flash Platform for Devices
Flash Platform for DevicesFlash Platform for Devices
Flash Platform for Devices
 
Flex mobile for JUG
Flex mobile for JUGFlex mobile for JUG
Flex mobile for JUG
 
Devoxx 2010: Develop mobile applications with Flex
Devoxx 2010: Develop mobile applications with FlexDevoxx 2010: Develop mobile applications with Flex
Devoxx 2010: Develop mobile applications with Flex
 
Adobe flash platform java
Adobe flash platform javaAdobe flash platform java
Adobe flash platform java
 

More from Mihai Corlan (7)

Getting started with PhoneGap
Getting started with PhoneGapGetting started with PhoneGap
Getting started with PhoneGap
 
Mobile Development With Flash Platform
Mobile Development With Flash PlatformMobile Development With Flash Platform
Mobile Development With Flash Platform
 
Getting started with flash mobile development
Getting started with flash mobile developmentGetting started with flash mobile development
Getting started with flash mobile development
 
Flash Builder for PHP and Mobile development
Flash Builder for PHP and Mobile developmentFlash Builder for PHP and Mobile development
Flash Builder for PHP and Mobile development
 
Android Development with Flash Platform
Android Development with Flash PlatformAndroid Development with Flash Platform
Android Development with Flash Platform
 
Adobe AIR - Mobile Performance – Tips & Tricks
Adobe AIR - Mobile Performance – Tips & TricksAdobe AIR - Mobile Performance – Tips & Tricks
Adobe AIR - Mobile Performance – Tips & Tricks
 
Adobe AIR Mobile development for Android and PlayBook
Adobe AIR Mobile development for Android and PlayBookAdobe AIR Mobile development for Android and PlayBook
Adobe AIR Mobile development for Android and PlayBook
 

Recently uploaded

Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 

Adobe Shadow - Amsterdam Adobe Camp

  • 1. #CreateTheWeb Adobe Shadow Mihai Corlan / Adobe Web Evangelist / @mcorlan
  • 2. 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. #CreateTheWeb
  • 3. The Problem Desktop Devices … © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. #CreateTheWeb
  • 4. Solution: Adobe Shadow Synchronized browsing Computer Mobile Devices URL © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. #CreateTheWeb
  • 5. 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
  • 6. 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
  • 7. 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
  • 9. 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
  • 10. 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
  • 11. Questions & Answers! Thank you! Mihai Corlan @mcorlan http://corlan.org #CreateTheWeb

Editor's Notes

  1. IntroductionWhois a mobile developer?Who knowswhatAdoe Shadow is?Who used Shadow?
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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
  8. 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.
  9. Finally make sure you check these resources if you want to get the product. For now it is beta and it is free.