grav cms for educators

Grav CMS for Educators

Paul D Hibbitts

Flipping the LMS with anOpen + Collaborative Web Platform

EDUCATOR AND EXPERIENCE DESIGN CONSULTANT

@hibbittsdesignhibbittsdesign.org

Workshop resources: bit.ly/1PDs3N8

Hello, Grav(Workshop I)

What is a Modern Flat-file CMS?Getting Grav Up and RunningThe Basics of Grav

What is a ModernFlat-file CMS?

What makes a CMS “Modern”?Modern PHP code (i.e. reliability, speed, extensibility, etc.)Use of current standards (i.e. Markdown, Twig, YAML, etc.)Modular/customizable content chunks (i.e. reuse of content)Further separation of content (i.e. files) from presentation

What makes a CMS “Flat-file”?No database means less (or no) IT involvement neededContent stored in text files rather than in a databaseTakes full advantage of the collaborative ecosystem nowavailable (i.e. GitHub)Increased portability, as moving a site now only requiressimply copying files to another locationAll template and content files are 100% version controllable

Getting GravUp and Running

RequirementsA Webserver (Apache, Nginx, LiteSpeed, etc.)PHP 5.5.9 or higher (7.0 recommended, 2X faster!)

Installation (Server only)

1. Download Grav Workshop Demo Site ( )2. Unzip the package onto your desktop3. Copy the entire Grav folder to your Web server4. Point your browser at the Web server folder5. Create your site administrator account6. And you're done!

bit.ly/1ZZjstZ

Installation (Local Desktop)

1. Download and install MAMP ( )2. Download/unzip Grav Workshop Demo Site ( )3. Unzip the downloaded Grav package onto your desktop4. Copy the entire Grav folder into the MAMP 'htdocs' folder5. Launch MAMP and press the MAMP 'Start Servers' button6. Enter 'localhost:8888' in Web Browser and choose Grav folder7. Create your site administrator account8. And you're done!

mamp.infobit.ly/1ZZjstZ

The Basics of GravAdmin Panel

Admin Panel OverviewThe 'Admin Panel' provides the ability to easily manage

your site, modify content, and perform updates

The Basics of GravWorking with Files

(instead of Admin Panel)

Your Content and GravAll of your site content is stored in the 'user/pages' folder

Pages

Each page within Grav is stored as a folder, and within each folderthe text and other elements of a page are stored

Page Folders

The numeric prefixes of a page folder name (i.e. '01') are used todetermine the position of that page within a site navigation bar

Page Folders

To prevent a page from being included within the site navigation bardo not prefix the folder name with a number (i.e. 'sidebar)

The Basics of GravPage Content

Page Editing

Within a page folder a text file with the suffix '.md' (markdown)contains the content for that page

Recommended Text Editors

(shown in these slides) (my preferred text/markdown editor)

Adobe BracketsAtom

Page Names

The name of the file within a page folder determines the templateused to display it (i.e. page 'item.md' would use the template 'item')

Page ContentHeaders

Page Headers

Each page within Grav contains two main parts; a header(starting and ending with three dashes ('---'),

with the content of the page below

Page ContentMarkdown

Markdown

Markdown is a syntax to format the display of content storedas plain text - similar but simpler than HTML formating

Markdown ExamplesH1 # Your Header Text HereH2 ## Your Header Text HereH3 ### Your Header Text HereItalics _your italic text here_bold **your bold text here**unordered list item * your item hereordered list item 1. your item herelink [link title](www.google.com)

Tip: To ensure a new paragraph after text in markdown,put two spaces after the end of the line

Page ContentLinking Pages

Linking Pages

To included a link to one of your site's Grav pages you wouldgenerally use the following format: '[your link text](../path/page)'

Note: '../' indicates moving up the file directory

Page ContentEmbeding Media

Embedding Media

To embed an image you would use the following format:''

Note: the above assumes media is stored within folder of page

Things to Explore Next...Learn about more optionsReview a Try out some open source Grav and Use the built-in functionality

Page HeaderMarkdown tutorial

themes pluginsmedia manipulation

Thank you! Questions?Contact Info

Blog: Email: Twitter: LinkedIn:

Grav ResourcesWebsite: Twitter: Documentation: (built with Grav itself)

hibbittsdesign.orgpaul@paulhibbitts.com

@hibbittsdesignlinkedin.com/in/paulhibbitts

getgrav.org@getgrav

learn.getgrav.org

Flip Your LMS with Grav(Workshop II)

Flipping your LMSAn Open and Collaborative WorkflowCourse Companion Skeleton Package

Flipping your LMS

What is a Flipped LMS?“A flipped LMS approach is where an open platform,

in the control of course participants, serves as an alternative front-end to the institutional LMS. ”

Why “Flip” the LMS?To support pedagogical goals unmet by the current LMSTo deliver a better student (and facilitator) experienceTo increase capability of access, sharing and collaboration

Experience Design GoalsFor Students

EngagingOrganizedRelevantConvenientEnjoyable

For Facilitator(s)Controllable (i.e. manageable)Pliable (i.e. flexible)EfficientEnjoyable (hey, instructors arepeople too...)

Why Grav?The best modern flat-file CMS currently available (to me)Due to it's flat-file nature, Grav also fully supports...

An Open+ Collaborative Workflow

Recommended ToolsetMAMPGit service (e.g. GitHub, GitLab Gogs, etc.)GitHub DesktopAutomatic deployment service (e.g. Deploy or Buddy)

What Skills are Required?Basic User Skills, Level I (Web-server Only)

Text file editingCopying/pasting/editing URLsMarkdown or simple HTML formattingWeb server access (i.e. FTP)

Basic User Skills, Level II (supports an open andcollaborative workflow, which is also very efficient!)

Setting up a GitHub accountConfiguring GitHub Desktop appSetting up a GitHub to FTP server service (e.g. Deploy)

So, what does that workflowlook like?

How long would thatupdate take?

~ 30 Seconds(your mileage may vary)

Setting up An Open andCollaborative Workflow - Part I

1. Download/unzip Grav Course Hub Skeleton ( )2. Create a folder 'MAMP Websites' in your 'Documents' folder3. Copy the entire Grav folder into the 'MAMP Websites' folder4. Download, install, and launch 5. Launch MAMP6. Change the 'Document Root' MAMP preferences setting to the

'MAMP Websites' folder (within 'Documents')7. Press the MAMP 'Start Servers' button8. Enter 'localhost:8888' as the URL in your Web Browser9. Choose the displayed Grav folder name

10. Create your site administrator account

Want more details?

bit.ly/1QQsJ7z

MAMP

Running Grav Locally with MAMP

Setting up An Open andCollaborative Workflow - Part II1. Setup a account2. Download and configure 3. Using GitHub Desktop, create a new repository of your

locally running Grav installation4. Commit your entire site to your repository5. Setup an automatic deployment service (can be done later) Want more details?

GitHubGitHub Desktop

Using Grav with GitHub Desktop

Course HubSkeleton Package

Course Hub HighlightsA complete ready-to-run Grav Skeleton Package (open source)Blog-format, with 'featured' (sticky) postsImportant reminders & class preparations areasAdditional site pages can be easily addedImage header area above site navbarSidebar is a simple markdown file, which can also contain HTMLURL flag to only display page content (for display within LMS )External links are automatically opened in a new Tab/WindowBuilt-in support for entire site to be maintained on GitHubSince everything is built with Grav it can be entirely customized

Want more information? Explore the online demo at Download the Course Hub skeleton at

github.com/hibbitts-designdemo.hibbittsdesign.org

bit.ly/1QQsJ7z

Things to Explore Next... icons (included)

Modular content using plugin (included) plugin

(included with Course Hub BootstrapAdditional

Font awesomePage Inject

Gravstrap Shortcodes

theme customizations

Thank you! Questions?Contact Info

Blog: Email: Twitter: LinkedIn:

Grav ResourcesWebsite: Twitter: Documentation: (built with Grav itself)

Course Hub Grav Course Hub Getting Started Guide:

EDUCAUSE Next Gen LMS paper (“NGDLE”):

hibbittsdesign.orgpaul@paulhibbitts.com

@hibbittsdesignlinkedin.com/in/paulhibbitts

getgrav.org@getgrav

learn.getgrav.org

http://hibbittsdesign.org/blog/getting-started

http://net.educause.edu/ir/library/pdf/eli3035.pdf