Introduction to Adobe Shadow
Upcoming SlideShare
Loading in...5
×
 

Introduction to Adobe Shadow

on

  • 1,271 views

Learn how

Learn how

Statistics

Views

Total Views
1,271
Views on SlideShare
1,271
Embed Views
0

Actions

Likes
1
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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?

Introduction to Adobe Shadow Introduction to Adobe Shadow Presentation Transcript

  • Adobe ShadowMihai Corlan | Web Developer Evangelist | Adobe
  • 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
  • Transylvania
  • Agenda Adobe Shadow is an innovative solution that streamlines website development for mobile devices.© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  • 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.
  • The Problem Desktop Devices …© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  • 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.
  • 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.
  • 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.
  • Demo Time
  • 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.
  • 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.
  • 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.
  • Thank You! Question & Answers Time! http://corlan.org http://twitter.com/mcorlan http://github.com/mcorlan mcorlan@adobe.com