Adobe Shadow - Amsterdam Adobe Camp
•Descargar como PPTX, PDF•
2 recomendaciones•926 vistas
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Adobe Shadow - Amsterdam Adobe Camp
Similar a Adobe Shadow - Amsterdam Adobe Camp (20)
Más de Mihai Corlan
Más de Mihai Corlan (7)
Último
Último (20)
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
Notas del editor
- 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.