Embed Size (px)
Citation preview
AL JAZEERA
TIAN CHEN | MAI IRIESite Building Track
MEDIA
NETWORKA FUTURE-FOCUSED DIGITAL PLATFORM WITH DRUPAL 8
mirie
IRIEMAISOFTWARE ARCHITECT PHASE2
IRC, drupal.org
OVERVIEWGoals of the digital platform
Why Drupal 8?
Digital Strategy
Site functionality highlights
Perspective and Learnings
THE DIGITALLANDSCAPE
Al J
azee
ra M
edia
Net
wor
k:
A Fu
ture
-Foc
used
Dig
ital P
latfo
rm w
ith D
rupa
l 8 → 7 Live Broadcast Channels
→ 80+ Bureaus Worldwide
→ 90+MM Monthly Pageviews
→ 25+MM Monthly Active Users
→ 50+ Digital Products
→ 70+MM Followers
→ 5 Languages
AL J
AZEE
RA M
EDIA
NET
WO
RK:
A FU
TURE
-FO
CUSE
D DI
GITA
L PL
ATFO
RM W
ITH
DRU
PAL
8 Al Jazeera Digital OptimizationADO
In alignment with AJMN Digital Strategy, ADO is direct or indirect optimization of all processes, platforms, people, partners and other enablers that are pivotal to the success of AJMN’s digital presence.
PEOPLE
Stakeholders, MarCom Experts, Researchers, Editors, Platforms Producers, Architects, Analysts, Engineers, etc.
PROCESSES
Strategy, Policies, Planning, Workplace transformation, Convergence, Workflows, SDLC, Delivery, SLAs, Procurement, etc.
TECHNOLOGY
Platforms, CMS, DAM, APIS, Infrastructure, CDN, Cloud services, Social media, Ads management, Analytics, etc.
ADO
HD Live Streaming
Mobility Platforms
Social Engagement
Video Monitoring
Digital Asset Management
Digital Analytics
APIs, BaaS & M/ESB
Unified Content Management
Assessment Services
ADO TRACKS
CONTENT MANAGEMENT
TRACK
PLATFORMS & PRODUCTS
CONTENT
MEDIA
DISTRIBUTION
AUDIENCE
PARTNERS
INTEGRATION
PROCESS
ENABLERS
PEOPLE
→ Multiple CMS platforms
→ Overstretched support, operations and maintenance
→ Fragmented technology investments
→ Multi-skilled resource hunt
→ Difficult editor-exchange arrangements
→ Multilingual
CURRENT CHALLENGES Al Jazeera Content Management
AL J
AZEE
RA M
EDIA
NET
WO
RK:
A FU
TURE
-FO
CUSE
D DI
GITA
L PL
ATFO
RM W
ITH
DRU
PAL
8
REVIEWENGAGE DISTRIBUTEORGANIZECAPTUREDISCOVER
SourcesCorrespondentsChannels Wires Partners
FormatsText & imagesAudio, videos & live streamsEmbedsDucuments
DashboardContentMediaRecommendations
BusinessEditors/peopleWorkflows/processes
PlatformsWebMobileEmailAuto importers
Packaging Semantics & metadataTag & geo-tagRelate & packageContextualizeRecommendations
TypesNews & breaking newsPolls & galleriesInfographics & blogsTimelines & playlistsSchedules & EPGWeather & results
PlatformsWeb MobileConnected devicesAPIs
PartnersCommercialCloud services
PromoteAdvertiseCampaignsGeo-targeting
TechnologyDomain names/URLsInfrastructureCDN/Multi-CDNResponsive & W3C
SocialSharesRecommendationsLikes Comments
InteractionEngage PersonalizeAd click-throughFeedback
AnalyticsHistoricalReal-time
BIDrill downsTrendsComparisonsForecasts
THE PROCESS
Requirements:
→ A flexible platform
→ Control over all content streams
→ An architecture that accommodates structured content
→ An interface for multiple content editors
A UNIFIED CMS Across All Digital Properties
WHY
DRUPAL 8?
1 Acquia Lightning
2 Internationalization
3 Media Management
4 Editorial Workflow
5 Content Distribution
OF THE PLATFORM
KEY FEATURES
1ACQUIA LIGHTNING
Imag
e so
urce
: lig
htni
ng.a
cqui
a.co
m
• A lightweight Drupal distribution maintained by Acquia
• Serves as a starting point
• Covers 20% of the baseline functionality typically needed on sites:
1. Page Layout2. Preview3. Editorial Workflow4. Asset management
Image source = https://www.drupal.org/project/lightning
WHAT IS LIGHTNING?
Image source: www.drupal.org/project/lightning
• Provided a great baseline for the platform:
– Page Layout– Content Workflow– Media Management
• Reliable and transparent roadmap:
Image source: www.drupal.org/project/lightning
WHY DID WE CHOOSE LIGHTNING?
drupal.org/node/2670686
AL J
AZEE
RA M
EDIA
NET
WO
RK:
A FU
TURE
-FO
CUSE
D DI
GITA
L PL
ATFO
RM W
ITH
DRU
PAL
8
THERE ARE THREE WAYS:
1. Install Lightning and just build from there.
2. Use an extend.yml file
● Example Implementation = Acme Lightning Extend
3. Use the patch for extending a profile.
HOW TO EXTEND LIGHTNING?
github.com/balsama/acme-lightning-extend
www.drupal.org/node/1356276
2INTERNATIONALIZATION
MULTILINGUAL CAPABILITIES
OF THE PLATFORMAl Jazeera produces content in 5 languages within its external web pages & admin interface. Fast, efficient multilingual functionality is crucial.
• So many modules needed!
– Not all of the modules work well together
– Inconsistent handling across modules
– Must apply patches in order to survive!
• Complex admin interfaces that required multiple clicks
• Manual process for updating locales
THE PAST
INTERNATIONALIZATION IN DRUPAL 7
AL J
AZEE
RA M
EDIA
NET
WO
RK:
A FU
TURE
-FO
CUSE
D DI
GITA
L PL
ATFO
RM W
ITH
DRU
PAL
8 As you can imagine...Im
age
sour
ce: w
ww
.qui
ckm
eme.
com
/mem
e/3t
im8v
INTERNATIONALIZATION IN DRUPAL 8 Thanks to the D8 Multiligual Initiative:
we’ve got lots of goodies in Core!
Imag
e so
urce
: tw
itter
.com
/d8m
i/med
ia
TODAY’S
AWESOMENESS:
PUTTING LANGUAGE FIRST
Image source: www.drupal8multilingual.org
LANGUAGE HANDLING• Natively install in 94 languages• Assign language to everything• Language dependent blocks
INTERFACE TRANSLATION• Automated downloads & updates• Protected local translations• English customizable/removable
SOME OF THE FEATURES OF D8MI
Image source: www.drupal8multilingual.org
CONTENT TRANSLATION• Field-level configurability• Applies to all content• Views integrated
CONFIGURATION• All translatable• Built-in translation interface• All shipped are pre-translatable
SOME OF THE FEATURES OF D8MI
Image/Tweet Source: twitter.com/d8mi/status/620944418493833216
“It is a world of difference. What would take 22 or more
modules in Drupal 7 you would do with 4 in Drupal 8. And all in core.”
Kristen Pol
• Groups.drupal.org: – groups.drupal.org/internationalization
– groups.drupal.org/translations
• IRC: #drupal-i18n
• Drupal.org docs: drupal.org/docs/8/multilingual
• D8MI:– drupal.org/project/multilingual_demo
– drupal8multilingual.org
• Twitter: @d8mi
For more information on the:
Image source: twitter.com/d8mi/media
MULTILINGUAL INITIATIVE
3MEDIA MANAGEMENT
Image source: www.acquia.com/product-services/acquia-lightning
MEDIA IN D7?HOW DID WE DEAL WITH
AL J
AZEE
RA M
EDIA
NET
WO
RK:
A FU
TURE
-FO
CUSE
D DI
GITA
L PL
ATFO
RM W
ITH
DRU
PAL
8 WELL…
MANY OF US RELIED ON THE MEDIA MODULE & FRIENDS
Image source: www.drupal.org/project/media
...Or maybe you used: → Scald→ Asset→ MediaBox
The good ol’ Media Browser!
30
FILE ENTITY MODULE− Make File entities fieldable− View modes for files
CTOOLS MODULE
VIEWS MODULE
− Stream wrappers− File Entities− File and image fields
MEDIA MODULE :− Field widgets− Media Browser− Views integration
MODULES THAT INTEGRATE WITH THE MEDIA MODULE
DRUPAL 7
MEDIA ENTITY
MORE INFORMATION ON DISCUSSION AT:
FILE ENTITY
vs
groups.drupal.org/node/384813
• Extends Drupal Core File Entity
• Provides an API and UI for:
– Configuring fields and their display on File types
– Managing the File entities (view, create, edit, delete)￫ /file/1￫ /file/1/edit￫ /file/1/delete
• File entity basically treats everything as a file. Works with custom stream wrappers to bring remote media to a Drupal siteFILE ENTITY
FILE ENTITY: drupal.org/project/file_entity
• Does not directly extend Drupal Core File Entity
• Non file-centric storage - does not assume that the media asset is a file, or even just a single asset
• Creates a new entity type: Media
MEDIA
ENTITY
MEDIA ENTITY: drupal.org/project/media_entity
MO
DULE
S EN
ABLE
D IN
LIG
HTN
ING
FOR
MED
IA
MO
DULE
S EN
ABLE
D IN
LIG
HTN
ING
FOR
MED
IA
36
Tweet Media bundle
EXAMPLE:
37
EXAMPLE:
Tweet Media bundle
38
EXAMPLE:
Tweet Media bundle
39
EXAMPLE:
Twitter Media bundle
40
EXAMPLE:
Tweet Media bundle
ENTITYEMBED
ENTITYBROWSER
+
• Allows you to browse, create and select entities on the system (not Media Entity-specific)
• Can be used in different contexts (for a field or with an Entity Embed button)
• Uses CTools form wizard for a multi-step workflow of selecting the image(s)
ENTITY
drupal.org/project/entity_browserBROWSER
Entity Browser Example
LIGHTNING:
LIGHTNING:
Entity Browser Example
LIGHTNING:
Entity Browser Example
LIGHTNING:
Entity Browser Example
LIGHTNING:
Entity Browser Example
LIGHTNING:
Entity Browser Example
LIGHTNING:
Entity Browser Example
LIGHTNING:
Entity Browser Example
LIGHTNING:
Entity Browser Example
• Allows any entity to be embedded within a text area using a WYSIWYG editor.
• Enable the entity-embed filter: Display embedded entities for the desired text formats
• If the Limit allowed HTML tags filter is enabled, add <drupal-entity data-*> to the Allowed HTML tags.
• To enable the WYSIWYG plugin, move the entity-embed E button into the Active toolbar for the desired text formats.
• Dependency on Embed module: drupal.org/project/embed
ENTITY
drupal.org/project/entity_embed EMBED
53
EXAMPLE:
Entity Embed Button
54
EXAMPLE:
Entity Embed Button
55
EXAMPLE:
Entity Embed Button
56
Entity Embed Example
LIGHTNING:
57
Entity Embed Example
LIGHTNING:
drupal.org/project/brightcove
Image source: drupal.org/project/brightcove
BRIGHTCOVE VIDEO CONNECT
MODULE
to Pronovix as well
Image source: pronovix.com
SHOUTOUT
Brightcove Video Connect for Drupal 8: Parts 1 – 4:pronovix.com/blog/brightcove-video-connect-drupal-8-part-1
-architecture-summary-and-technical-approach
Image source: www.acquia.com/product-services/acquia-lightning4EDITORIAL
WORKFLOW
LIGHTNING
WORKFLOW
AL J
AZEE
RA M
EDIA
NET
WO
RK:
A FU
TURE
-FO
CUSE
D DI
GITA
L PL
ATFO
RM W
ITH
DRU
PAL
8MODULES ENABLED IN LIGHTNING FOR WORKFLOW
CONTENT MODERATION FLOW
DRAFT NEEDS REVIEW PUBLISHED
ARCHIVED
RECALLED
AL J
AZEE
RA M
EDIA
NET
WO
RK:
A FU
TURE
-FO
CUSE
D DI
GITA
L PL
ATFO
RM W
ITH
DRU
PAL
8
AJMN WORKFLOW MODULE: MODERATION HISTORY TAB
Image source: docs.behat.org/en/v3.0
• Lightning comes with a ton of Behat tests!
• We also wrote some Behat tests for the platform. We targeted:
a. Workflow: new moderation state and transitions
b. User Permissions
BEHAT TESTS
5CONTENT
DISTRIBUTION
AL J
AZEE
RA M
EDIA
NET
WO
RK:
A FU
TURE
-FO
CUSE
D DI
GITA
L PL
ATFO
RM W
ITH
DRU
PAL
8
REVIEWENGAGE DISTRIBUTEORGANIZECAPTUREDISCOVER
DISTRIBUTING CONTENT FROM PLATFORM TO SITES
WWW
Recent Content from
ContentRepository
Recent Content (B)
My Recent Content (B)
Recent Content from
ContentRepository
Recent Content (A)
My Recent Content (A)
CMS A
CMS A Content-
CMS B Content
CONTENT REPOSITORY
CMS B
WHAT DOES THIS LOOK LIKE?
• We implemented a Panel Page that has 3 blocks listing recent content:
a. Recent content (current instance)b. My recent content (current instance)c. Recent content (Content Repository)
EDITOR DISCOVERY DASHBOARD
REVIEWENGAGE DISTRIBUTEORGANIZECAPTUREDISCOVER
• CMS instances pushed content on creation, update, and deletion to the Content Repository instance
• On connected CMS instances we have a custom block on the Editor Discovery Dashboard that displays recent content on the Content Repository:
a. Leverages Core Rest and Basic Authb. Connected to a View REST Export on the
Content Repository
CONTENT REPOSITORY
REVIEWENGAGE DISTRIBUTEORGANIZECAPTUREDISCOVER
Image source: drupaldeploy.orgDEPLOY
• Allows users to easily stage content from one Drupal site to another
• Use Multiversion and RELAXed Web Services to stage content from source to destination endpoints
• Involves
1. Multiversion2. Replication3. Workspace4. RELAXed Web Services
WHAT IS DEPLOY?
Image source: drupaldeploy.org
REVISIONS & REPLICATION OF
CONTENT
Image source: drupaldeploy.org
MULTIVERSION● Converts all content entities (nodes, terms,
comments, blocks, users, etc) to be revisionable.
● Deleted content can be restored.
REPLICATIONReplicate content between workspaces:
● On a single site (with the Workspace module)● Across different sites (with the RELAXed Web
Services module)
WORKSPACE
● You can have different versions of your site (with Multiversion) – these are workspaces
● Replicate content with Deploy and RELAXed Web Services across external sites
RELAXED Web Services
● Provides a REST API for sharing and replicating content
● API uses same protocol as CouchDB
VERSIONING AND REST API
Image source: drupaldeploy.org
Again, another great baseline solution for the platform:
• Ability to restore deleted content
• Push changes from a CMS instance to the Content Repository
• Many of these pieces are moving into Core as part of the Workflow Initiative
Image source: drupaldeploy.org
WHY DID WE CHOOSE DEPLOY?
A RECAP OF THE SETUP USING DEPLOY SUITECMS A
Multiversion Replication
RELAXed Web Services
Workspaces
Workspace A
MultiversionReplication
RELAXed Web Services
Workspaces
Workspace A
CONTENT REPOSITORY
THE WORKFLOW
INITIATIVEImprove content workflow, preview and content staging by extending and improving Entity API
Takes inspiration from Entity, Multiversion, Workspace, Deploy, and Workbench Moderation
Workflow Initiative drupal.org/node/2721129
Improving Drupal's content workflowbuytaert.net/improving-drupal-content-workflow
Core conversation from DrupalCon New Orleansyoutube.com/watch?v=_rAB8DJnc8Y
Kanban boardcontribkanban.com/sprint/WorkflowInitiative
MORE INFORMATION
AL J
AZEE
RA M
EDIA
NET
WO
RK:
A FU
TURE
-FO
CUSE
D DI
GITA
L PL
ATFO
RM W
ITH
DRU
PAL
8
Extending the functionality :
● Taxonomy Manager
● Mobile specific features
● PersonalizationNEXT STEPS
PERSPECTIVE
& LESSONS LEARNED
JOIN US FORCONTRIBUTION SPRINTS
First Time Sprinter Workshop - 9:00-12:00 - Room Wicklow2AMentored Core Sprint - 9:00-18:00 - Wicklow Hall 2BGeneral Sprints - 9:00 - 18:00 - Wicklow Hall 2A
TIME FOR SOME
Q&AEVALUATE THIS SESSION:
events.drupal.org/dublin2016/schedule
AL J
AZEE
RA M
EDIA
NET
WO
RK:
A FU
TURE
-FO
CUSE
D DI
GITA
L PL
ATFO
RM W
ITH
DRU
PAL
8
THANK
YOU!
