Enviar pesquisa
Carregar
Advanced workflows for mobile web design and development
•
3 gostaram
•
1,351 visualizações
B
brucebowman
Seguir
From my Adobe MAX 2013 session "Advanced workflows for mobile web design and development"
Leia menos
Leia mais
Tecnologia
Negócios
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 26
Baixar agora
Baixar para ler offline
Recomendados
Measuring Web Performance (HighEdWeb FL Edition)
Measuring Web Performance (HighEdWeb FL Edition)
Dave Olsen
Unobtrusive javascript
Unobtrusive javascript
Lee Jordan
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
Christian Heilmann
Vodafone Widget Camp
Vodafone Widget Camp
Peter-Paul Koch
Frontend SPOF
Frontend SPOF
Patrick Meenan
Øredev 2014
Øredev 2014
olataube
Progressive Web App Challenges
Progressive Web App Challenges
Jason Grigsby
New Rules of The Responsive Web
New Rules of The Responsive Web
Matt Carver
Recomendados
Measuring Web Performance (HighEdWeb FL Edition)
Measuring Web Performance (HighEdWeb FL Edition)
Dave Olsen
Unobtrusive javascript
Unobtrusive javascript
Lee Jordan
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
Christian Heilmann
Vodafone Widget Camp
Vodafone Widget Camp
Peter-Paul Koch
Frontend SPOF
Frontend SPOF
Patrick Meenan
Øredev 2014
Øredev 2014
olataube
Progressive Web App Challenges
Progressive Web App Challenges
Jason Grigsby
New Rules of The Responsive Web
New Rules of The Responsive Web
Matt Carver
Word campktm speed-security
Word campktm speed-security
Digamber Pradhan
@media - Even Faster Web Sites
@media - Even Faster Web Sites
Steve Souders
Beyond Responsive [18F 2015]
Beyond Responsive [18F 2015]
Aaron Gustafson
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
Walter Ebert
Planning Adaptive Interfaces [RWD Summit 2016]
Planning Adaptive Interfaces [RWD Summit 2016]
Aaron Gustafson
Website performance optimisation
Website performance optimisation
Webstock
Web 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web Sites
Steve Souders
Html5 Fit: Get Rid of Love Handles
Html5 Fit: Get Rid of Love Handles
Chris Love
Planning Your Progressive Web App
Planning Your Progressive Web App
Jason Grigsby
State of the resource timing api
State of the resource timing api
Aaron Peters
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
David Kaneda
Performance.now() fast but not furious
Performance.now() fast but not furious
Anna Migas
Make JavaScript Faster
Make JavaScript Faster
Steve Souders
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
Chris Love
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Francesco Fullone
eCommerce performance, what is it costing you and what can you do about it?
eCommerce performance, what is it costing you and what can you do about it?
Peter Holditch
Predictability for the Web
Predictability for the Web
Robert Nyman
Optimizing your WordPress website
Optimizing your WordPress website
mwfordesigns
Intro to Web Development
Intro to Web Development
Vinay Shriyan, Certified ScrumMaster® (CSM)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Adam Dunford
Mastering Mobile Web with 8 Key Rules
Mastering Mobile Web with 8 Key Rules
Mobile Labs
Modern Web Applications
Modern Web Applications
Ömer Göktuğ Poyraz
Mais conteúdo relacionado
Mais procurados
Word campktm speed-security
Word campktm speed-security
Digamber Pradhan
@media - Even Faster Web Sites
@media - Even Faster Web Sites
Steve Souders
Beyond Responsive [18F 2015]
Beyond Responsive [18F 2015]
Aaron Gustafson
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
Walter Ebert
Planning Adaptive Interfaces [RWD Summit 2016]
Planning Adaptive Interfaces [RWD Summit 2016]
Aaron Gustafson
Website performance optimisation
Website performance optimisation
Webstock
Web 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web Sites
Steve Souders
Html5 Fit: Get Rid of Love Handles
Html5 Fit: Get Rid of Love Handles
Chris Love
Planning Your Progressive Web App
Planning Your Progressive Web App
Jason Grigsby
State of the resource timing api
State of the resource timing api
Aaron Peters
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
David Kaneda
Performance.now() fast but not furious
Performance.now() fast but not furious
Anna Migas
Make JavaScript Faster
Make JavaScript Faster
Steve Souders
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
Chris Love
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
Francesco Fullone
eCommerce performance, what is it costing you and what can you do about it?
eCommerce performance, what is it costing you and what can you do about it?
Peter Holditch
Predictability for the Web
Predictability for the Web
Robert Nyman
Optimizing your WordPress website
Optimizing your WordPress website
mwfordesigns
Intro to Web Development
Intro to Web Development
Vinay Shriyan, Certified ScrumMaster® (CSM)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Adam Dunford
Mais procurados
(20)
Word campktm speed-security
Word campktm speed-security
@media - Even Faster Web Sites
@media - Even Faster Web Sites
Beyond Responsive [18F 2015]
Beyond Responsive [18F 2015]
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
Planning Adaptive Interfaces [RWD Summit 2016]
Planning Adaptive Interfaces [RWD Summit 2016]
Website performance optimisation
Website performance optimisation
Web 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web Sites
Html5 Fit: Get Rid of Love Handles
Html5 Fit: Get Rid of Love Handles
Planning Your Progressive Web App
Planning Your Progressive Web App
State of the resource timing api
State of the resource timing api
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
Performance.now() fast but not furious
Performance.now() fast but not furious
Make JavaScript Faster
Make JavaScript Faster
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
Please, dont touch the slow parts v.3.6 @webtechcon
Please, dont touch the slow parts v.3.6 @webtechcon
eCommerce performance, what is it costing you and what can you do about it?
eCommerce performance, what is it costing you and what can you do about it?
Predictability for the Web
Predictability for the Web
Optimizing your WordPress website
Optimizing your WordPress website
Intro to Web Development
Intro to Web Development
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Semelhante a Advanced workflows for mobile web design and development
Mastering Mobile Web with 8 Key Rules
Mastering Mobile Web with 8 Key Rules
Mobile Labs
Modern Web Applications
Modern Web Applications
Ömer Göktuğ Poyraz
Performance Optimization for Mobile Web | Fresh Tilled Soil
Performance Optimization for Mobile Web | Fresh Tilled Soil
Fresh Tilled Soil
Validating Session Isolation for Web Crawling to Provide Data Integrity
Validating Session Isolation for Web Crawling to Provide Data Integrity
Giacomo Zecchini
Compatibility Testing of Your Web Apps - Tips and Tricks for Debugging Locall...
Compatibility Testing of Your Web Apps - Tips and Tricks for Debugging Locall...
Coveros, Inc.
Compatibility Testing of Your Web Apps - Tips and Tricks for Debugging Locall...
Compatibility Testing of Your Web Apps - Tips and Tricks for Debugging Locall...
Sauce Labs
AWS Webcast - Accelerating Application Performance Using In-Memory Caching in...
AWS Webcast - Accelerating Application Performance Using In-Memory Caching in...
Amazon Web Services
Web topic 26 browser compatibilty and security
Web topic 26 browser compatibilty and security
CK Yang
Test at Scale within your Internal Networks with BrowserStack Local Testing
Test at Scale within your Internal Networks with BrowserStack Local Testing
BrowserStack
Securing web applications
Securing web applications
Supreme O
How to Build a DevOps Toolchain
How to Build a DevOps Toolchain
IBM UrbanCode Products
20181023 progressive web_apps_are_here_sfcampua
20181023 progressive web_apps_are_here_sfcampua
Юлия Коваленко
Progressive Web Apps are here!
Progressive Web Apps are here!
Antonio Peric-Mazar
Integration Testing in AEM
Integration Testing in AEM
connectwebex
bqurious Test Automation & Management Suite
bqurious Test Automation & Management Suite
Abhay Goel
Sauce Labs+Applitools - Automated Visual Testing in the Cloud
Sauce Labs+Applitools - Automated Visual Testing in the Cloud
Sauce Labs
Responsive Web Design: Tips and Tricks
Responsive Web Design: Tips and Tricks
Gautam Krishnan
11 Tested Ways On How To Build A Mobile Optimized Website.pdf
11 Tested Ways On How To Build A Mobile Optimized Website.pdf
Seo board
Angular js mobile jsday 2014 - Verona 14 may
Angular js mobile jsday 2014 - Verona 14 may
Luciano Amodio
Future of Mobile Web - Coldfront conf
Future of Mobile Web - Coldfront conf
Paul Kinlan
Semelhante a Advanced workflows for mobile web design and development
(20)
Mastering Mobile Web with 8 Key Rules
Mastering Mobile Web with 8 Key Rules
Modern Web Applications
Modern Web Applications
Performance Optimization for Mobile Web | Fresh Tilled Soil
Performance Optimization for Mobile Web | Fresh Tilled Soil
Validating Session Isolation for Web Crawling to Provide Data Integrity
Validating Session Isolation for Web Crawling to Provide Data Integrity
Compatibility Testing of Your Web Apps - Tips and Tricks for Debugging Locall...
Compatibility Testing of Your Web Apps - Tips and Tricks for Debugging Locall...
Compatibility Testing of Your Web Apps - Tips and Tricks for Debugging Locall...
Compatibility Testing of Your Web Apps - Tips and Tricks for Debugging Locall...
AWS Webcast - Accelerating Application Performance Using In-Memory Caching in...
AWS Webcast - Accelerating Application Performance Using In-Memory Caching in...
Web topic 26 browser compatibilty and security
Web topic 26 browser compatibilty and security
Test at Scale within your Internal Networks with BrowserStack Local Testing
Test at Scale within your Internal Networks with BrowserStack Local Testing
Securing web applications
Securing web applications
How to Build a DevOps Toolchain
How to Build a DevOps Toolchain
20181023 progressive web_apps_are_here_sfcampua
20181023 progressive web_apps_are_here_sfcampua
Progressive Web Apps are here!
Progressive Web Apps are here!
Integration Testing in AEM
Integration Testing in AEM
bqurious Test Automation & Management Suite
bqurious Test Automation & Management Suite
Sauce Labs+Applitools - Automated Visual Testing in the Cloud
Sauce Labs+Applitools - Automated Visual Testing in the Cloud
Responsive Web Design: Tips and Tricks
Responsive Web Design: Tips and Tricks
11 Tested Ways On How To Build A Mobile Optimized Website.pdf
11 Tested Ways On How To Build A Mobile Optimized Website.pdf
Angular js mobile jsday 2014 - Verona 14 may
Angular js mobile jsday 2014 - Verona 14 may
Future of Mobile Web - Coldfront conf
Future of Mobile Web - Coldfront conf
Último
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
Scott Keck-Warren
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Safe Software
Key Features Of Token Development (1).pptx
Key Features Of Token Development (1).pptx
LBM Solutions
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
shyamraj55
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
Sinan KOZAK
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
2toLead Limited
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
BookNet Canada
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
Allon Mureinik
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
naman860154
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
Padma Pradeep
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
Neo4j
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
BookNet Canada
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Delhi Call girls
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
Mark Billinghurst
Último
(20)
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Key Features Of Token Development (1).pptx
Key Features Of Token Development (1).pptx
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
Advanced workflows for mobile web design and development
1.
© 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.
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 - 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 efficiently.
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 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 workflows with other front-end tools, and cover typical issues that you might encounter.
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 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.
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 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.
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 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.
7.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 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.
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? 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.
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 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 different 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.
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 - manually 10 Friday, May 3, 13
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 sites 11 Friday, May 3, 13 Ask audience if anyone is still maintaining/creating m.dot sites
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) 12 Friday, May 3, 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... 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.
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/ 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.
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 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.
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/ 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.
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/ 17 Friday, May 3, 13 xip.io is the answer here - start with it, and read our blogs on the topic.
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#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.
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/ 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.
20.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 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.
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 “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-profit ODLs, and your donation helps the entire web community.
22.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. Q&A 22 Friday, May 3, 13
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/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.
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 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!
25.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. 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!
26.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential. Friday, May 3, 13 This is the Adobe that is helping to build a better open web. . .
Baixar agora