© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Advanced Workflows for Mobile Web Design and De...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Our interpretation of “Advanced” for today§ Ad...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Today’s topics§ Installing Edge Inspect CC§ N...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Installing Edge Inspect CC§ Start with the Cre...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Network configuration§ Corporate networks can ...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.UI tour§ Managing Devices§ Synchronous Browsi...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Chrome Extension Options§ Advanced Settings§ ...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Custom weinre server§ Install node.js - http:/...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Why use a custom weinre server?§ You are devel...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Testing sites with Authentication§ Using HTTP ...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.URL Monitoring§ Edge Inspect listens for URL c...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.HTTPS§ You can use unsigned SSL certificates d...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Edge Tools integration§ Demos§ Edge Reflow CC...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Group reviews/testing§ Edge Inspect is useful ...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Local development§ Localhost§ http://localhos...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Locally Installed WordPress§ WordPress uses ab...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Virtual hosts§ Similar to the problem with Wor...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Web fonts§ Edge Web Fonts§ 500+ high quality,...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.JS Bin§ Translate JS Bin URLs to only send the...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.LiveReload and CodeKit§ Synchronous browsing w...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Open Device Labs§ Free to the public§ Local i...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Q&A22Friday, May 3, 13
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Resources§ Edge Inspect CC Team Blog http://bl...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Adobe Edge Tools & Services§ Optimized for cre...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thank you! Now, please take the SESSION SURVEY ...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Friday, May 3, 13This is the Adobe that is help...
Upcoming SlideShare
Loading in...5
×

Advanced workflows for mobile web design and development

850
-1

Published on

From my Adobe MAX 2013 session "Advanced workflows for mobile web design and development"

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
850
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Advanced workflows for mobile web design and development

  1. 1. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Advanced Workflows for Mobile Web Design and DevelopmentBruce Bowman, @brucebowman, Sr. Product Manager, Edge Tools & ServicesDuane O’Brien, @duaneobrien, Sr. Computer Scientist, Edge Tools & Services1Friday, May 3, 13We’re from the Edge Inspect team, and also work on other exciting new projects. If you’re not sure what Edge Tools and Services are, we’ll tell you in a few minutes, but in themeantime you can think of them as Adobe’s next generation of web tools and services built for today’s modern web designers and developers. We’re 100% focused on buildinggreat tools for the open web.
  2. 2. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Our interpretation of “Advanced” for today§ Advanced Workflows for Mobile Web Design and Development§ Test!§ Test early and often§ Test on real devices§ Test collaboratively and in groups§ Work efficiently by using remote control and automation§ Testing CAN be fun...§ Related courses at MAX§ S8405 Tamagotchi Galore: Wrangling 7,000-Plus Devices - Tuesday 4:00 PM - 504§ Get hands-on with Edge Inspect§ BL8573 Working Faster and Smarter with Edge Inspect - Tuesday 8:00 AM - 403B§ L8188 Working with Edge Inspect - Wednesday 1:30 PM - 409A2Friday, May 3, 13We’re going to cover lots of tools that will be very helpful for front end designers and developers. We’re going to cover workflows using Edge Inspect, but many other tools that will help youwork more efficiently.
  3. 3. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Today’s topics§ Installing Edge Inspect CC§ Network configuration§ UI tour§ Chrome Extension Options§ Sites with authentication§ URL Monitoring§ HTTPS§ Edge Tools integration§ Group reviews/testing§ Local development§ Virtual hosts§ Web fonts§ JS Bin§ LiveReload/CodeKit§ Bandwidth Throttling§ Your local community3Friday, May 3, 13In the beginning we’re going to be talking a lot about Edge Inspect, then we’re going to get into workflows with other front-end tools, and cover typical issues that you mightencounter.
  4. 4. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Installing Edge Inspect CC§ Start with the Creative Cloud - http://creative.adobe.com§ Get a free membership§ Install Edge Inspect CC on your computer§ Install the Chrome Extension§ Install on devices4Friday, May 3, 13It might seem complex because there are multiple pieces of software to install, but you’ll be pleasantly surprised how easy and quick it is to get everything going. In fact, we’ve worked veryhard to try and make this easy and smooth, and we hope you’ll be delighted with the experience.
  5. 5. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Network configuration§ Corporate networks can be a challenge!§ Devices and computer must be on the same network§ Consider a separate wireless access point§ A good rule of thumb§ If your device cannot already see your computer, Edge Inspect CC will not work for you§ Quick test: if you have a local development server...§ Try entering your computer’s IP address in your device to hit the computer’s localhost5Friday, May 3, 13We have to tell you about this issue, because it will bite you if you aren’t aware of it. In most cases, you’ll find that you can easily work around the issues and do what you need to do to geteverything connected. and working.
  6. 6. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.UI tour§ Managing Devices§ Synchronous Browsing§ Remote Inspection§ Screenshots§ Cache Management§ Toggle UI§ Mobile client features6Friday, May 3, 13Here, you see an example scenario where there are two devices already connecting and browsing synchronously with our computer. You also see another device in the pairing stage, whereyou grant access for it to also connect to your computer.
  7. 7. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Chrome Extension Options§ Advanced Settings§ Screenshots directory§ Custom weinre server7Friday, May 3, 13There are more advanced options, but nice to know about as they provide some flexibility and if you need these settings, you’ll be so happy to know about this.
  8. 8. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Custom weinre server§ Install node.js - http://nodejs.org/§ Install weinre via npm: sudo npm install -g weinre§ Run weinre: weinre --boundHost -all-§ Switch the weinre server in the extension§ Cool, but why?8Friday, May 3, 13Installing node.js and weinre takes just a couple of minutes, and even if you’re not familiar with the command line, you can handle this.If you’re not a command line user, here’s a good tip to know: once you’ve done this one, your commands are remembered in the Terminal window - just use Up and Down arrow to gothrough them until you see the one you want, and press Return/Enter. (not sure about the Windows command line, but I think it does the same thing). Also, you can use your mouse to selct,then copy and paste the URL that weinre tells you it is using. Super easy.Even if you’re not using Edge Inspect, weinre might be a useful tool to know about.
  9. 9. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Why use a custom weinre server?§ You are developing and testing on a wireless network that doesn’t have Internet access, so you can’t usethe Remote Inspection feature§ The pages you’re developing are under NDA or have other IP concerns and cannot be exposed outside ofyour internal network§ For some unknown reason one or more of your devices just don’t seem to be able to reliably connect tothe default weinre server§ You need better performance than you’re able to get using the default weinre server§ You want to use a different version of weinre than we provide9Friday, May 3, 13The most common reason people want this is that they have some policies that prevent them from using a weinre server on the internet.
  10. 10. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Testing sites with Authentication§ Using HTTP authentication in URLs - https://myUserID:myPa55wurd@secret.mydomain.com§ Edge Inspect passes this whole URL to devices§ Other authentication - manually10Friday, May 3, 13
  11. 11. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.URL Monitoring§ Edge Inspect listens for URL changes§ Sends the new URL to devices§ Single Page App state changes§ Using # anchors§ Using URL parameters§ What doesn’t cause devices to change:§ Scrolling§ JavaScript interactions§ Form data entry§ CSS transitions and animations§ Other considerations§ m.dot sites11Friday, May 3, 13Ask audience if anyone is still maintaining/creating m.dot sites
  12. 12. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.HTTPS§ You can use unsigned SSL certificates during development§ Each Edge Inspect device will be asked to accept the certificate (once)12Friday, May 3, 13
  13. 13. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Edge Tools integration§ Demos§ Edge Reflow CC§ Edge Code CC§ Edge Animate CC§ Other tools§ Preview in (Chrome) browser§ More on other tools coming up...13Friday, May 3, 13We’re integrating Edge Inspect tightly into our other Edge tools. This allows you to preview your work on devices directly, even if you’re not also previewing in the browser. The integration Ican demo today is awesome, but not all features of Edge Inspect are supported yet. We will be continuing to improve this integration, and also integrating Edge Inspect into other tools andworkflows.We are also putting the finishing touches on some of our Edge Inspect APIs, and will be releasing those soon under a very liberal Apache 2 license. With the API, someone could writebrowser extensions for other browsers, or perhaps do a custom Edge Inspect integration into their continuous integration build system.
  14. 14. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Group reviews/testing§ Edge Inspect is useful when you get a group together§ Connect devices§ Load a URL§ Each person interacts with the device§ Good for§ Dev team reviews and testing§ Design reviews§ Client reviews§ http://blogs.adobe.com/edgeinspect/2013/04/15/how-starwood-hotels-resorts-uses-adobe-edge-inspect/14Friday, May 3, 13In this picture, we had over 30 devices connected to one computer, synchronously browsing through Edge Inspect.Our free version of Edge Inspect allows one concurrent connection, but the full version does not limit the number of devices that can be concurrently connected.
  15. 15. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Local development§ Localhost§ http://localhost or http://localhost:8888/§ http://127.0.0.1/§ http://machine.local/ on OSX§ Local servers§ XAMP - Apache, MySQL and PHP§ OSX - MAMP/MAMP Pro - http://www.mamp.info§ Win - WampServer - http://www.wampserver.com§ OSX Web Sharing (UI removed in 10.8)§ Windows Personal Web Server§ Node, PHP CLI, NGINX, lighttpd, BOA, Resin, etc, etc...§ If Your Device Can’t See It, Edge Inspect Can’t Help15Friday, May 3, 13If you do any local development, this is super critical for you. We have a solid workflow for local and virtual host development. We’ve blogged quite a bit about these topics on the EdgeInspect team blog.
  16. 16. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Locally Installed WordPress§ WordPress uses absolute URLs§ “style.css” becomes “http://localhost/blogdirectory/wp-content/themes/sometheme/style.css”§ Edge Inspect turns “localhost” into “your.machine.ip.address” on URLs it broadcasts§ “http://localhost/index.php” becomes “http://10.58.22.63/index.php”§ index.php: <link href=”http://localhost/blogdirectorywp-content/themes/sometheme/style.css” ... >§ What does the device think “localhost” is?§ Can fix in Settings, but there’s an easier way§ Root Relative URLs plugin§ http://wordpress.org/extend/plugins/root-relative-urls/16Friday, May 3, 13For a local WordPress install, you also need the local development server, and PHP and MySQL, which is why we prefer s simple setup using MAMP or WAMP. This extra plugin makes itpossible to have a great workflow on your local environment while previewing it all live on devices too.
  17. 17. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Virtual hosts§ Similar to the problem with WordPress, Localhost and your Device§ Edit Hosts file on your machine§ Alias a domain to an IP address, bypassing DNS lookup§ example: 127.0.0.1 my.awesome.dev.domain.edu§ Where will the device look for DNS information?§ Solutions:§ xip.io - http://xip.io/§ Charles Proxy - http://www.charlesproxy.com/§ Edge Inspect Team Blog - Workflow post series§ http://blogs.adobe.com/edgeinspect/category/workflow-enhancements/17Friday, May 3, 13xip.io is the answer here - start with it, and read our blogs on the topic.
  18. 18. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Web fonts§ Edge Web Fonts§ 500+ high quality, free and open source web fonts§ Cool New Font Viewer - http://edgewebfonts.adobe.com§ Typekit§ Because you have to list the domains, and IP addresses change, this can be a repetitive chore§ Have to add IP address to your kit and update every time it changes§ Solution§ Back to xip.io§ Other Dynamic DNS Workarounds - http://forums.adobe.com/message/4896599#489659918Friday, May 3, 13Hosted web fonts can seem like they’re not working, but these tips will get you going quickly. xip.io again saves the day.
  19. 19. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.JS Bin§ Translate JS Bin URLs to only send the output panel§ Useful if you want to do JS testing or prototyping across devices§ Great for playing with code you’re not sure about, or getting help from someone§ Demo - http://jsbin.com/welcome/1/edit§ What’s Wrong With Dave?§ Edge Inspect Team Blog - Workflow post series§ http://blogs.adobe.com/edgeinspect/category/workflow-enhancements/19this is dave ^^Friday, May 3, 13Thanks and a shout out to Remy Sharp, the creator of JS Bin for working with our team to make this possible. This is seriously cool.
  20. 20. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.LiveReload and CodeKit§ Synchronous browsing with devicesand desktop browsers§ http://livereload.com§ http://incident57.com/codekit/§ SASS & Pre-Processing§ Asset pipeline and buildautomation20Friday, May 3, 13Excellent front-end workflow tools, that are even better with Edge Inspect.
  21. 21. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Open Device Labs§ Free to the public§ Local in your cities§ Start one!§ Lab Up! http://lab-up.org/§ .net AWARDS 2013 “GameChanger of the Year” finalist21Friday, May 3, 13A little side project that I’ve been working on with Jay Meissner. We’re so pleased with how this is taking off. We have over 60 ODLs opening in cities all over the world. If youcan’t start an ODL in your area, consider donating devices. These are all non-profit ODLs, and your donation helps the entire web community.
  22. 22. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Q&A22Friday, May 3, 13
  23. 23. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Resources§ Edge Inspect CC Team Blog http://blogs.adobe.com/edgeinspect§ Edge Inspect CC Community Forums: http://adobe.com/go/edgeinspect_support§ Open Device Labs: http://opendevicelab.com§ Lab Up!: http://lab-up.org§ Twitter:§ @EdgeInspect§ Bruce Bowman, @brucebowman§ Duane O’Brien, @duaneobrien§ Andre JAY Meissner, @klickass§ Open Device Labs, @odl§ Lab Up!, @LabUpOrg§ Facebook: https://www.facebook.com/EdgeInspect23Friday, May 3, 13All of these are linked to from our Edge Inspect team blog, so if you only remember one URL, that’s the one.
  24. 24. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Adobe Edge Tools & Services§ Optimized for creating mobile-ready web content and apps§ Focused on a specific task§ Improve productivity without hiding the underlying webtechnologies24Friday, May 3, 13Be sure to check out the other Edge Tools and Services. We’re developing these very transparently, and taking feedback form the community as they are in development. You can shapethem - get involved!
  25. 25. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thank you! Now, please take the SESSION SURVEY on the MAX COMPANION app25…for your chance to WIN one of these e-books from Adobe PressEvery survey you submit enters your name to win the daily grand prize -an Apple® iPod Nano®.Friday, May 3, 13We really appreciate your interest in our session, and hope you’ll provide feedback so we can measure how we did. We take that feedback seriously and work to improve oursessions.Thank you!
  26. 26. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Friday, May 3, 13This is the Adobe that is helping to build a better open web. . .
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×