Overview

• Week 7
  • Briefing Project CMS
• Week 8
  • D8 Interesting modules
  • Using Drush
• Week 9
  • D8 Views: a detailed look

Overview

• Week 10
  • D8 Views: a detailed look cont.
• Week 11
  • D8 Best practices for a good UI/QOL
• Week 12
  • Prep field trip
  • Help w/ project

Not happy with menu?

If you feel there are certain aspects you are missing in this course, then bring it to my attention and I will try to make room for it in a following class.

Puntenverdeling

Portfolio site - Project

• 13 out of 20 points (65%)

• Deadline 8/01/2018

FIeld trip Intracto

• 1 out of 20 points (5%)

• Date: 18/12/2017

Oral exam

• 6 out of 20 points (30%)

• Date: TBD

Puntenverdeling

https://docs.google.com/document/d/1WEQW8Lc25wrzKKSCe7Hz4pIjqQ1fkNIRXhtemx7iv4I/edit?usp=sharing

Briefing PE

Limited briefing on next slides

Full briefing & specs

https://docs.google.com/document/d/1yaPbCe8mR9wXZ8U8efq1TwYKpZBYup6PDDPcWMBIk9I/edit?usp=sharing

The document on google drive might get updated. If it does this will be announced in class. The document is the definitive source, if the slides don't match, follow the document.

What?

A portfolio website!

Showcasing your skills & work

Goal

• Make a small site showcasing your skills and work using Drupal 8

• Use content types in a sensible way to create structure

• Use simple and advanced modules such as pathauto & webform

• Use some advanced techniques such as webforms & contextual views

General parts

General

Header

• Simple logo

  • Use what you have,

  • don’t spend 20 hours making your own

  • KISS)

• Navigation    

General

Footer

• Small simple footer

  • © Notice

• Social icons?

• Basic contact information?

Page descriptions

Home

• Create an enticing home page. For example:

  • Add small section with CTA-button to About-me page

  • Show a few Blog post teasers and add a CTA-button to the Blog page

  • Show some portfolio items and add a CTA-button to the Portfolio page

  • Add small section with CTA-button to Contact page

About me

• Page about yourself and your skills

• Add some visuals and logos to reference skills & known tools (content-types)

Blog

• Filterable view of blog posts

  • Categories

  • Tags

  • Date

• Each Blog post links to a detail page

Blog post

• Detail page for each item

• Shows post text with visuals

• Show breadcrumbs

Portfolio

• Filterable view of portfolio items

  • Categories (F.e.: Course)

  • Tags (F.e.: used technologies)

• Each Portfolio Item links to a detail page

Portfolio items

• Detail page for each item

• Show some text describing the item

• Add some visuals

• Show breadcrumbs

• Bonus: Add a system to create unique layouts for each item

Contact

• Show contact information (email, twitter, linkedin, etc)

• Add a contact form (using webforms)

Req. Features

Req. Features

• Site must have minimal styling

  • Everything should look OK. Treat this as a project you would want to use as a showcase for your friends/family.

• Site must have minimal responsiveness

  • no text should break out of bounds

  • columns should reduce to single on small sizes

Req. Features

• Webmaster role

  • Add a webmaster role that can only add/update new/existing content

  • This user should not be able to change modules settings or make structural changes to the configuration.

• Metatags

  • Add basic meta tags to your pages

Req. Features

• Each page must have an automatic URL alias

• Add Social icons

  • Gebruik AddThis of ShareThis of ...

  • Share buttons to share site content

  • Like my page buttons

    1. (Can point to thomas-more page)

• Contact form made with webforms

  • This form should send an email to the site owner and to the submitter of the form.

Other

Important stuff

1. Each student must make & submit his own website

   1. Collaboration is encouraged, but no direct copying!

2. Site must be hosted when deadline passes

3. Create an admin user for teacher

   1. Send notification mail to pieter.mathys@thomasmore.be

   2. VERY IMPORTANT: If i can’t login to your site then I can’t grade your work.

4. Make sure there is enough (demo) content to get a good view of the site

   1. 20+ blog post, 20+ portfolio items

   2. Create a few curated posts/items that showcase your features/styling

   3. Use devel_generate to add the rest

Bonus points

Not required extras

Bonus points

• Tune Interface for usability

  1. Add description/helper text

  2. Add custom text-editors for special text input:

     • like if you want to make a field for embed codes, create a profile to disable WYSIWYG/Tag stripping/etc and limit the field to that profile (allowed_formats)

  3. Other: there are many ways to improve the UI. Do some research, add something cool and let me know during the oral exam.

Bonus points

• Add some modules that improve the QOL when working on the site

• Add some cool JS/CSS

• Reference skills & tools to blog/portfolio-items

  • Skills & tools should then be clickable to show a view of Portfolio-items/Blog-posts with that have this reference

  • Ask for more info if you are interested in doing this

Example Mockups

Mockups

These are examples. The site needs not be created exactly as these mockups show. Use some creativity and make these pages your own.

Balsamic Mockups .bmpr file

https://drive.google.com/open?id=0B6acZAtKWgSwcHMtUFNCMGFZeEk

PDF Export

https://drive.google.com/open?id=0B6acZAtKWgSwTG5yN2JyY3d3NDA

Deadline

& Turn in

Deadline

=

8/01/2018

Location

=

Toledo

What?

=

Upload a ZIP file containing the following:

• Full Drupal site code backup (entire site)

• Database backup file

• Text file with link to live-site: livesite-url.txt

Important!

1. Site needs to be hosted

2. Teacher must have unique login with admin rights

3. All code & database must be submitted by upload