Drupal 8 on your Apple TV

Transcript

1. #DrupalCampSP

2. PRESENTED BY Rafael Silva - Senior Drupal Developer Myplanet Nov

   25, 2017 A prototype on how to take Drupal into Apple TV Drupal 8 on your Apple TV

3. WHAT’S INSIDE Intro to Myplanet 3 Why did we do

   this? 7 Building a live prototype 24

4. WHO WE ARE Cara Tsang User Researcher
 & Interaction Designer

   
 PhD, Cognitive Psych Rafael Silva Senior 
 Drupal Developer

5. About us Senior Drupal Developer. I have more than 13

   years of experience with web development. I’m the creator of Drupal Brasil and a passionate contributor of both open source and Drupal. 5 WHO WE ARE Rafael Silva Senior 
 Drupal Developer @rfsbsb

6. WE’RE HIRING! If you are interested in work for a

   young and vibrant company with many talented software developers, come and talk to me! Digital first, from consumers to employees. We’re a software studio. We make smarter interfaces to empower your employees and engage your customers. 6 WHAT WE DO

7. Key Stats: • 90 designers, product managers & engineers globally

   • Expertise in open source custom applications, Drupal, mobile applications & browser-based, video solutions, chatbot, and personalization • Strategic partnerships with IBM & Acquia Our Team

8. A little background on our experiment. Why did we do

   this?

9. In recent years we’ve seen a plethora of new interfaces

   emerging. Nowadays Alexa, Google Home, Apple TV, Chromecast, Roku are taking over the market. Drupal site owners and managers will need to have their content delivered to those devices. The world is changing More and more we see new interfaces taking over. 9 WHY DID WE DO THIS?

10. Why should we care about TV? WHY TELEVISION TV is

    a huge part of our lives • Avg Canadian watches 3h 45mins TV per day • 70% of Canadians watch TV when they eat • Quality time? (UK survey) • 62% think watching TV s a way to relax as a family • ~50% of moms think TV brings the family together • A more social, interactive digital experience

11. But why the Apple TV? APPLE TV Over The Top

    streaming + Apple TV’s accessibility • OTT streaming services are now in over 64% of US households with TVs • Apple TV offers: • Relatively consistent layout and design • A lot of built-in accessibility features • New Siri commands offer great value for accessibility

12. Making it intuitive,
 making it accessible. Designing 
 the App

13. How do we design good 10-ft UI experiences? Think about

    scale. Bigger screen, but the user is also sitting further back. Amp up text and image sizing, make sure focus indicators are obvious enough. Think about context. Users are more likely to be in “relaxation” mode, maybe with lots of distractions. Keep things simple and clear, with low information density. Think about navigation. No mouse + keyboard, so less precision and flexibility. Arrange elements in a grid that’s logical for D-PAD usage. 13 DESIGNING THE APP

14. RESEARCH We looked at… • Apple’s tvOS Human Interface guidelines

    • Apple TV’s accessibility features, best practices • Other Apple TV apps

15. DESIGN PROCESS Next… • Design studio - lots of ideas,

    rough sketches • High fidelity mockups • Test it out at scale: project it on TVs

16. Making it work, 
 checking it twice. Building a 


    Live Prototype

17. Some modules we used Video. In this prototype it was

    used to store the video uploads. Image Raw Formatter. Return the image as URL, instead of formatted data. 17 SECTION Views. Used to select the data we want to export to the user. RESTful web services. Supports exporting the data as a web service. Serialization. Combined with RESTful web services it helps format your data to be served. + Custom module

18. Spoiler alert: NO! Now we are going to create an

    App that consumes REST right? REST amiright?

19. Apple TV makes it pretty easy. TVML Traditional apps are

    divided into 2 parts: client- and server- side. On Apple TV, part of the client is also processed on server, so you must have both the screens and logic on the same server. Client app then fetches the 2 and renders the application. Quick learning curve Analogy for web development: app is the “browser” and TVML files (Javascript & XML) is the “web”. Javascript and XML are well known, devs can more easily pick up developing for Apple TV. Accessible templates Apple offers a full set of templates and accessibility is natively implemented on those templates. Stick to the templates and you get accessibility features without much additional effort. Website integration Integrating app to existing website using TVML is quick and easy, since Javascript is ubiquitous. 19 DEVELOPING FOR APPLE TV

20. You gotta go live. 20 LIVE PROTOTYPE Building & testing

    out accessibility features • Apple also provides thorough documentation for tvOS developers • 2 options: use Swift or use TV Markup Language (TVML; recommended) • Many visual and functional templates from Apple • TVML apps will run on your server, can change functionality and visuals without redeploying to the Apple Store • Easy to implement designs
21. None

22. DEMO TIME 22 DEMO TIME

23. Try it out! Getting from concept to prototype only took

    a couple of weeks, and was fairly painless, especially if relevant content is already on a website. Demonstrate to stakeholders that ease and value of developing accessible TV apps! Thank you! @rfsbsb @TwittyCara @myplanet @myplanethq @myplanet Psst: we’re hiring! Find Myplanet on Glassdoor or LinkedIn!
24. None