belt and road responsive: drupal 8 website - … · 1.0 project overview p.4 section 1.1 thanks to...
Post on 20-Sep-2018
218 Views
Preview:
TRANSCRIPT
Belt and Road Responsive: Drupal 8 Website
Contents
1.0 Project Overview P.3
2.0 Project Challenges & Highlights P.4
3.0 Project Results P.5
4.0 Technical Specifications P.6
P.31.0 Project Overview
The Hong Kong Trade Development Council
(HKTDC) is a statutory body established in
1966 as the international marketing arm for
Hong Kong-based manufacturers, traders
and service providers. They are the trade
and development council for the city-state of Hong Kong, with
more than 40 offices around the world, including 13 on the
Chinese mainland.
The HKTDC wanted to create an unparalleled, robust and highly
scalable Portal, that provides various resources on the Belt and
Road Initiative (also known as “One Belt One Road” or the “Silk
Road”) spearheaded by the Chinese.
1.0 Project Overview
Section 1.1 Hong Kong Trade Development Council(HKTDC)
P.41.0 Project Overview
Section 1.1 Thanks to a proven track record in Drupal, a wealth of
experienced developers, designers and architects, not to
mention a superior Drupal 8 expertise, Appnovation were
selected to deliver the project, using their Hong Kong and UK
based teams in a global collaboration.
As a company that helps fund, and makes regular contributions
to the Drupal community, this project further fortifies their
burgeoning Drupal 8 portfolio.
Appnovation’s D8 experts were tasked with delivering the full
reimplementation of HKTDC’s Belt and Road portal, including a
complete rebranding of their website with new functionalities,
and migration of content from different sources.
Belt and Road Homepage
P.52.0 Project Challenges & Highlights
2.0 Project Challenges & Highlights
Section 2.1 The Belt and Road initiative is a development strategy and
framework launched by the Chinese Government that aims to
foster growth and development between China and the rest of
Eurasia.
This initiative encompasses around 60 countries, and has
been contrasted with trading agreements like the Trans-Pacific
Partnership. HKTDC’s Belt and Road website is one of the
earliest websites providing official information and resources on
this large-scale initiative.
Appnovation’s D8 experts delivered the reimplementation of
HKTDC’s Belt and Road portal, including complete rebranding of
their legacy website with new functionalities, and migration of
content from different sources including external web sources.
• Implemented new website with emphasis on Drupal 8’s core
functionalities
• Clean and simple site architecture
• Content migration of 9,000+ pieces of content in multiple
languages (English, simplified Chinese, traditional Chinese)
• Hosted on Acquia Cloud, allowing our team to push code
quickly (less than 5 minutes) without disrupting the live
website’s functionality
• Initial implementation completed within 3 weeks for initial
soft launch
P.63.0 Project Results
Section 3.1
3.0 Project Results
Appnovation’s D8 experts delivered the reimplementation of HK-
TDC’s Belt and Road portal, including complete rebranding of their
legacy website with new functionalities, and migration of content
from different sources including external web sources.
With the newly revitalized website, HKTDC’s brand was given a
more modern and clean design. Content that was previously spread
across different websites was centralized, creating clear, simple and
easy to use navigation, providing a positive user experience.
Belt and Road for Mobile Devices
P.74.0 Technical Specifications
• Drupal 8.3
• Acquia Cloud
• Atlassian JIRA
• Amazon Web Services
• Symfony DomCrawler, Filesystem and Serializer
• Guzzle
• admin_toolbar
• admin_toolbar_tools
• module_filter
• config_split
• country
• double_field
• video
• page_manager
• page_manager_ui
• mailsystem
• smtp
• imce
• pathauto
• persistent_login
• rabbit_hole
• rh_node
• r4032login
• twig_tweak
• ultimate_cron
• panels
• panels_ipe
• queue_ui
• search_api_db
• facets
• search_api
• simple_sitemap
• sharethis
• captcha
• views_data_export
• default_content
• default_content_extra
• csv_serialization
• webform
• webform_ui
4.0 Technical Specifications
Section 4.1
Section 4.2
Utilized Technologies and Platforms
Modules/Themes/Distribution
P.84.0 Technical Specifications
Admin Toolbar, Module Filterhttps://www.drupal.org/project/module_filter https://www.drupal.org/project/admin_toolbar
The reason we used Bootstrap can be summed up as:- “Sleek,
intuitive, and powerful mobile first front-end framework for faster
and easier web development.”.
Config Splithttps://www.drupal.org/project/config_split
We used config split module to handle segmentation of “feature”
config during the development cycles of the project. We only have
3 weeks effectively to create and push to production so things
had to be kept in order to ensure fast paced development, feature
completion cycles.
Ultimate Cronhttps://www.drupal.org/project/ultimate_cron
We needed to employ ultimate cron to ensure that our custom
cron jobs could run at certain times of the day as they were
imported content from an existing central CMS.
Section 4.2 Bootstraphttps://www.drupal.org/project/bootstrap
The reason we used Bootstrap can be summed up as:- “Sleek,
intuitive, and powerful mobile first front-end framework for faster
and easier web development.”.
P.94.0 Technical Specifications
Section 4.2 Search API, Facets and Search API DBhttps://www.drupal.org/project/search_api https://www.drupal.org/project/facets
Limited budget and time required us to use Search API with DB
but at least bring to the table facets and possibility of in the
future of moving into Solr or alike.
D8 Search Functionality
P.104.0 Technical Specifications
Section 4.2
Webformhttps://www.drupal.org/project/webform https://www.drupal.org/project/webform_ui
Webform module was key to providing various forms for com-
munication with HKTDC backend office staff. The capabilities of
webform allowed us to take existing hardcoded forms and revamp
to “dynamic” managed forms very easily and in 3 languages in-
cluding English, Simple and Traditional Chinese. With is powerful
config management; and plugin architecture would could extend
were necessary for additional feature handling easily.
A great module which will feature heavily in forms for future projects
Views Data Export, CSV Serialization https://www.drupal.org/project/csv_serialization https://www.drupal.org/project/views_data_export
It was necessary on this project to provide a mechanism for
exporting users to import into a in-house email marketing tool
and this was achieved easily using the views data export module.
Along side this we were required to provide CSV exports of
data of projects for user consumption; this feature was enabled
through implementation of the CSV serialization module which is
used by views data export anyway, savings us time to implement
on this feature.
P.114.0 Technical Specifications
Page Managerhttps://www.drupal.org/project/page_manager
Default content module was instrumental to us for being able to
manage “static” content, which could be pre-loaded into a freshly
built site or transported to various environments intact.
IMCEhttps://www.drupal.org/project/imce
At time of building the website, the media module was not quite
stable enough so we opted to move forward with IMCE for media,
file management solution. Editors are able to upload, find and
attached images to WYSIWYG fields which has served the solution
well thus far.
Section 4.2Default Contenthttps://www.drupal.org/project/default_content https://www.drupal.org/project/default_content_extra
Default content module was instrumental to us for being able to
manage “static” content, which could be pre-loaded into a freshly
built site or transported to various environments intact.
D8 Sign Up Page
top related