= Technical description =
[[PageOutline]]
# Technical requirements #
## Google tag manager (GTM) ##
Free tag management through which we manage Google Analytics and other scripts.
Please add the following directly under the on every page (please make sure it's the very first element under the body tag)
{{{
}}}
## All site pages on https ##
## Hidden "trafficsource" field to in the user registration forms ##
It is a field where I store marketing data per user, that should be stored in the database once the user is registered. Should be added as a hidden field on the registration form, with a unique ID/class value (name it with "tds-registration") and then will be dynamically populated with data. It will be a string of different values, max 512 chars.
## Use the open graph protocol ##
(http://ogp.me/) for good presentation on social media. These fields' values should be dynamically populated (so, no user input here), based on the existing content of the page (meta title, featured image and etc.)
## Don’t forget the favicon: http://css-tricks.com/favicon-quiz/ ##
## RSS feed for new courses ##
We should have a feed for new courses that are online. See the most recent guidelines of Google:
http://googlewebmastercentral.blogspot.nl/2014/10/best-practices-for-xml-sitemaps-rssatom.html
(By the way it should be only for courses. once we have a blog, the blog will have its own RSS feed for blog posts)
## Direct URL to filtered view ##
To design the course catalogue so we can provide a URL to a user that will direct him to a filtered view. (when the filtered view is reached, the relevant filter button should be “turned on”.)
Use case: I would like to link to the course catalogue when only the water management courses are displayed, or, for example, to display only free courses, sorted by the start date.
[http://www.bever.nl/index.cfm?fuseaction=products.list&query=fh_view_size%3D24%26fh_refview%3Dlister%26fh_refpath%3Dfacet_7%26fh_reffacet%3Dbrand%26fh_location%3D%252f%252fcatalog01%252fnl_NL%252fcategories%253c%257bcatalog01_c439%257d%252fcategories%253c%257bcatalog01_c439_c455%257d%252fcategories%253c%257bcatalog01_c439_c455_c522%257d%252fbrand%253e%257blowa%253bsal%257d%252f134%2E0%253cproduct_colour_selling_price_0592%253c270%2E0 See example.]
# SEO #
## Page level robots ##
Add a meta like
{{{
}}}
With drop down values: 1) index, follow 2) noindex, nofollow 3) index, no follow 4) noindex, follow
## Meta title ##
User input for meta title.
## Meta description ##
User input for meta description.
## Canonical field ##
User input for
{{{
}}}
Important: If the input field isn't field by the user, then this field shouldn't be rendered.
## Friendly URLs ##
Ability to change the url, but with keeping the hierarchy of the pages.
Note: Let's discuss it f2f.
## HTTP Code 301 redirection Management ##
Ability to point one old URL to another, through 301 redirect. (I'd rather not do it by manually editing htaccess, but on the application level).
## 404 page ##
Create HTTP Code 404 page sending a valid 404 response error. It should be a customizable page on our CMS.
## Templates requirements ##
* No frames
* no iframes for content
* no table for layout
* no flash.
* HTML5 markup template
* no flash.
* Responsive videos and lightboxes.
* Add rel="home" to the clickable logo.
* Efficient responsive rendering - on mobile view, to render and load elements as needed (in contrast to display:hide)
## Semantics (correct headings) ##
We should discuss what would be the h1, h2, h3, h4 before we cut the HTML.
## Img alt ##
User input for the alt value:
{{{
}}}
## Optimization ##
[[https://developers.google.com/speed/pagespeed/ Google PageSpeed optimization techniques and recommendations]]
(Minifiy CSS/JS, browser/server caching, sprites, 3rd party delivery, prioritize visible content, SPDY and etc…)
* Consider uploading and serving assets on another sub.subdomain (media.des.tudelft.nl) for faster media serving.
## Files upload via ftp ##
* Robots.txt
* webmastertools verification
## Search engine friendly Breadcrumbs markup ##
See https://schema.org/breadcrumb
This is additional markup in the element, for better indexing by search engines.
[rutger] It's probably better to use the version google then schema.org:
# Rich snippets - Breadcrumbs
see: https://support.google.com/webmasters/answer/185417?hl=en
## No-www with www redirection (if not on subdomain) ##
(Not sure it's still relevant)
## XML Sitemap ##
We should put sitemap.xml file on the root domain.
See instructions [https://support.google.com/webmasters/answer/183668?hl=en&ref_topic=6080646&rd=1 here].
We would like to have sitemap that includes both page and videos.
## “Semantic” IDs and Classes for in tags for better event management via !GoogleTagManager. ##
For example, if we have a "register now" button on the sidebar, please add like the following:
{{{
Register now
}}}
So I'll be able to target individual elements with GTM.
## Ability to inject third party code at the top of the ##
I will need to add a JS code for A/B testing, at the top of the section. This should be added on the page level.
(this cannot be done using google tag manager). This is needed for A/B testing software.
## Connecting to Youtube API ##
Requirement for the next development round (after January). For better event tracking.
= New Items November 17 =
## CMS Requirements ##
* Post revisions (revert to an old version), with info about date/time and users per revision
* To make a Draft version, that is not published but can be reviewed
* To unpublish/hide item, but keep it in the CMS
* Media library/repository, where all changes are done from one place
* Rich text editor
* Duplicate pages.
* Images should scale into their container.
* User management and permissions (for now, just few admins)
* Easy overview of all content items on a list on admin pages. The list should have title, category, date of publication. Fields should be sorted according to either date or ABC. The list should be filtered according to a search term, a category (dropdown), or published/unpublished.
* Customize navigation on the admin pages.
* Sidebar editing - to be discussed when the design is ready.
* Automated image scaling - image fits itself to the container (even if the image size is larger than the container).
## Search ##
The search bar will be an autocomplete search field. That results will be prioritized according to (in this order):
* Tag match (of courses)
* Text match
In the first stage, the course catalogue will be the search result page. At the second development page, we will have a dedicated search results page.
= New Items December 1 =
## URL structure ##
'''Content pages'''
* top level pages: ''/about''
* topic based landing pages: ''/discover/water-management''
'''Content Types | ''/content type/content title'''''
* '''Course:''' ''/courses/introduction-aeronautical-engineering''
* '''Bundle:''' ''/specialized-programs/helicopters-maintenance''
* '''Msc:''' ''/msc-programs/msc-aerospace-engineering''
* '''Profed:''' ''/professional-education/rottors-expert''
* '''Instructor:''' ''/instructors/alexander-de-haan''
In the long run, I would prefer to have the slug parent (such as “/courses/”) to be generated automatically, based on specific content type (course, bundle, msc, profed, instructor), with ability to change it manually by admins/superusers. (These are the only users we have now, but I’d like to emphasize the “editor” shouldn’t have the permission to change the slug parent in the future).
)
Please leave room to change the basic slug later (for example, “professional-education” isn’t final yet).
}}}
## Optimization ##
[[https://developers.google.com/speed/pagespeed/ Google PageSpeed optimization techniques and recommendations]]
(Minifiy CSS/JS, browser/server caching, sprites, 3rd party delivery, prioritize visible content, SPDY and etc…)
* Consider uploading and serving assets on another sub.subdomain (media.des.tudelft.nl) for faster media serving.
## Files upload via ftp ##
* Robots.txt
* webmastertools verification
## Search engine friendly Breadcrumbs markup ##
See https://schema.org/breadcrumb
This is additional markup in the element, for better indexing by search engines.
[rutger] It's probably better to use the version google then schema.org:
# Rich snippets - Breadcrumbs
see: https://support.google.com/webmasters/answer/185417?hl=en
## No-www with www redirection (if not on subdomain) ##
(Not sure it's still relevant)
## XML Sitemap ##
We should put sitemap.xml file on the root domain.
See instructions [https://support.google.com/webmasters/answer/183668?hl=en&ref_topic=6080646&rd=1 here].
We would like to have sitemap that includes both page and videos.
## “Semantic” IDs and Classes for in tags for better event management via !GoogleTagManager. ##
For example, if we have a "register now" button on the sidebar, please add like the following:
{{{
Register now
}}}
So I'll be able to target individual elements with GTM.
## Ability to inject third party code at the top of the ##
I will need to add a JS code for A/B testing, at the top of the section. This should be added on the page level.
(this cannot be done using google tag manager). This is needed for A/B testing software.
## Connecting to Youtube API ##
Requirement for the next development round (after January). For better event tracking.
= New Items November 17 =
## CMS Requirements ##
* Post revisions (revert to an old version), with info about date/time and users per revision
* To make a Draft version, that is not published but can be reviewed
* To unpublish/hide item, but keep it in the CMS
* Media library/repository, where all changes are done from one place
* Rich text editor
* Duplicate pages.
* Images should scale into their container.
* User management and permissions (for now, just few admins)
* Easy overview of all content items on a list on admin pages. The list should have title, category, date of publication. Fields should be sorted according to either date or ABC. The list should be filtered according to a search term, a category (dropdown), or published/unpublished.
* Customize navigation on the admin pages.
* Sidebar editing - to be discussed when the design is ready.
* Automated image scaling - image fits itself to the container (even if the image size is larger than the container).
## Search ##
The search bar will be an autocomplete search field. That results will be prioritized according to (in this order):
* Tag match (of courses)
* Text match
In the first stage, the course catalogue will be the search result page. At the second development page, we will have a dedicated search results page.
= New Items December 1 =
## URL structure ##
'''Content pages'''
* top level pages: ''/about''
* topic based landing pages: ''/discover/water-management''
'''Content Types | ''/content type/content title'''''
* '''Course:''' ''/courses/introduction-aeronautical-engineering''
* '''Bundle:''' ''/specialized-programs/helicopters-maintenance''
* '''Msc:''' ''/msc-programs/msc-aerospace-engineering''
* '''Profed:''' ''/professional-education/rottors-expert''
* '''Instructor:''' ''/instructors/alexander-de-haan''
In the long run, I would prefer to have the slug parent (such as “/courses/”) to be generated automatically, based on specific content type (course, bundle, msc, profed, instructor), with ability to change it manually by admins/superusers. (These are the only users we have now, but I’d like to emphasize the “editor” shouldn’t have the permission to change the slug parent in the future).
)
Please leave room to change the basic slug later (for example, “professional-education” isn’t final yet).