Advanced workflows for mobile web design and development

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Advanced Workflows for Mobile Web Design and Development
Bruce Bowman, @brucebowman, Sr. Product Manager, Edge Tools & Services
Duane O’Brien, @duaneobrien, Sr. Computer Scientist, Edge Tools & Services
1
Friday, May 3, 13
We’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 the
meantime 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 building
great tools for the open web.

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 eﬃciently 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 - 409A
2
Friday, May 3, 13
We’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 you
work more eﬃciently.

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 community
3
Friday, May 3, 13
In the beginning we’re going to be talking a lot about Edge Inspect, then we’re going to get into workﬂows with other front-end tools, and cover typical issues that you might
encounter.

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 devices
4
Friday, May 3, 13
It 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 very
hard to try and make this easy and smooth, and we hope you’ll be delighted with the experience.

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 localhost
5
Friday, May 3, 13
We 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 get
everything connected. and working.

UI tour
§ Managing Devices
§ Synchronous Browsing
§ Remote Inspection
§ Screenshots
§ Cache Management
§ Toggle UI
§ Mobile client features
6
Friday, May 3, 13
Here, 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, where
you grant access for it to also connect to your computer.

Chrome Extension Options
§ Advanced Settings
§ Screenshots directory
§ Custom weinre server
7
Friday, May 3, 13
There 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.

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?
8
Friday, May 3, 13
Installing 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 go
through 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.

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 use
the Remote Inspection feature
§ The pages you’re developing are under NDA or have other IP concerns and cannot be exposed outside of
your internal network
§ For some unknown reason one or more of your devices just don’t seem to be able to reliably connect to
the default weinre server
§ You need better performance than you’re able to get using the default weinre server
§ You want to use a diﬀerent version of weinre than we provide
9
Friday, May 3, 13
The most common reason people want this is that they have some policies that prevent them from using a weinre server on the internet.

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 - manually
10
Friday, May 3, 13

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 sites
11
Friday, May 3, 13
Ask audience if anyone is still maintaining/creating m.dot sites

HTTPS
§ You can use unsigned SSL certificates during development
§ Each Edge Inspect device will be asked to accept the certificate (once)
12
Friday, May 3, 13

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...
13
Friday, May 3, 13
We’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 I
can 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 and
workflows.
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 write
browser extensions for other browsers, or perhaps do a custom Edge Inspect integration into their continuous integration build system.

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/
14
Friday, May 3, 13
In 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.

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 Help
15
Friday, May 3, 13
If 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 Edge
Inspect team blog.

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/
16
Friday, May 3, 13
For 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 it
possible to have a great workflow on your local environment while previewing it all live on devices too.

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/
17
Friday, May 3, 13
xip.io is the answer here - start with it, and read our blogs on the topic.

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#4896599
18
Friday, May 3, 13
Hosted web fonts can seem like they’re not working, but these tips will get you going quickly. xip.io again saves the day.

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/
19
this is dave ^^
Friday, May 3, 13
Thanks 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.

LiveReload and CodeKit
§ Synchronous browsing with devices
and desktop browsers
§ http://livereload.com
§ http://incident57.com/codekit/
§ SASS & Pre-Processing
§ Asset pipeline and build
automation
20
Friday, May 3, 13
Excellent front-end workflow tools, that are even better with Edge Inspect.

Open Device Labs
§ Free to the public
§ Local in your cities
§ Start one!
§ Lab Up! http://lab-up.org/
§ .net AWARDS 2013 “Game
Changer of the Year” finalist
21
Friday, May 3, 13
A 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 you
can’t start an ODL in your area, consider donating devices. These are all non-proﬁt ODLs, and your donation helps the entire web community.

Q&A
22
Friday, May 3, 13

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/EdgeInspect
23
Friday, May 3, 13
All of these are linked to from our Edge Inspect team blog, so if you only remember one URL, that’s the one.

Adobe Edge Tools & Services
§ Optimized for creating mobile-ready web content and apps
§ Focused on a specific task
§ Improve productivity without hiding the underlying web
technologies
24
Friday, May 3, 13
Be 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 shape
them - get involved!

Thank you! Now, please take the SESSION SURVEY on the MAX COMPANION app
25
…for your chance to WIN one of these e-books from Adobe Press
Every survey you submit enters your name to win the daily grand prize -
an Apple® iPod Nano®.
Friday, May 3, 13
We 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 our
sessions.
Thank you!

Friday, May 3, 13
This is the Adobe that is helping to build a better open web. . .

Advanced workflows for mobile web design and development

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Advanced workflows for mobile web design and development

Semelhante a Advanced workflows for mobile web design and development (20)

Último

Último (20)

Advanced workflows for mobile web design and development