Moodle Theme Development - Silvina Paola Hillar - E-Book

Moodle Theme Development E-Book

Silvina Paola Hillar

0,0
34,79 €

-100%
Sammeln Sie Punkte in unserem Gutscheinprogramm und kaufen Sie E-Books und Hörbücher mit bis zu 100% Rabatt.

Mehr erfahren.
Beschreibung

Theming is one of the main features of Moodle, and it can be used to customize your online courses and make them look exactly how you want them to,according to your target audience. If you have been looking for a book that will help you develop Moodle themes that you are proud of, and that your students will enjoy, then this is the book for you.
We start off by introducing Moodle 3 and explaining what it is, how it works, and what tools you might need to create a stunning Moodle theme. We then show you how to choose and change the pre-installed Moodle themes in detailed steps, and explain what Moodle themes are and how they work. Next, we show you how to change an existing theme and test the changes that you have made.
You can not only plan the customization of theme, but also tailor it using advanced Moodle theming processes; this book is your one-stop guide to creating your own personalized Moodle 3 theme.

Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:

EPUB
MOBI

Seitenzahl: 187

Veröffentlichungsjahr: 2016

Bewertungen
0,0
0
0
0
0
0
Mehr Informationen
Mehr Informationen
Legimi prüft nicht, ob Rezensionen von Nutzern stammen, die den betreffenden Titel tatsächlich gekauft oder gelesen/gehört haben. Wir entfernen aber gefälschte Rezensionen.



Table of Contents

Moodle Theme Development
Credits
About the Author
Acknowledgements
About the Reviewer
www.PacktPub.com
Why subscribe?
Dedication
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Errata
Piracy
Questions
1. An Introduction to Moodle 3 and MoodleCloud
Understanding what e-learning is
Learning about Virtual Learning Environments
Designing, creating, storing, accessing, and using course content
Delivering or sharing course content
Communicating, interacting, and collaborating with students and teachers
Assessing and personalizing the learning experience
Modularizing both activities and resources
Customizing the interface
Learning Moodle and MoodleCloud
Using Moodle on different devices
Sizing the screen resolution
Screen resolution chart
Calculating the aspect ratio
Learning about sharp and soft images
Learning about crisp and sharp text
Understanding what anti-aliasing is
Test your knowledge
Summary
2. Themes in Moodle 3 on-premises and MoodleCloud
Understanding what a Moodle theme is
Learning about Moodle themes in MoodleCloud
Using HTML tags to define colors
Customizing Moodle or MoodleCloud's theme More using HTML to define colors
Understanding types of Moodle and MoodleCloud themes
User themes
Course themes
Category themes
Locating the Moodle theme directory
Selecting and downloading a Moodle theme for Moodle 3 on-premises
Installing a Moodle theme
Test your knowledge
Summary
3. Setting Up Logos in Moodle Themes
Designing a logo
Adding the logo to MoodleCloud in the More theme
Adding the logo to the Essential theme in Moodle on-premises
Downloading a Favicon
Changing the Favicon in the Essential theme in Moodle on-premises
Adding a header background image in the Essential theme to Moodle on-premises
Test your knowledge
Summary
4. Customizing the Header and the Footer
Adding footnotes in MoodleCloud
Adding social networks to header
Customizing the footer in Moodle on-premises Essential theme
Editing front page area content
Creating a slide show in the front page area content
Test your knowledge
Summary
5. Customizing Elements with CSS
Customizing the height and width of an element with CSS
Setting the height and width of an image element with CSS
Locating the information of an image element
Customizing the height and width of an element in Moodle on-premises with CSS
Customizing the height and width of an element in MoodleCloud with CSS
Using Sublime Text to edit code
Locating the information of a title element
Customizing styles of elements using the enjoycss website
Editing the code to customize the style of elements
Testing the code
Changing the elements in Moodle on-premises
Test your knowledge
Summary
6. Locating, Editing, and Using New Icons
Locating the icons in our Moodle on-premises course
Locating the icon file in the server
Downloading Inkscape
Editing an SVG file
Converting SVG files to PNG files
Checking the properties of the PNG file
Replacing the SVG file
Replacing the PNG file
Testing the new icon in Moodle on-premises
Locating Add an activity or resource icons in our Moodle on-premises
Rendering parts of icons
Test your knowledge
Summary
7. Optimizing Themes for Mobile Devices
Downloading Google Chrome web browser
Enabling device mode
Editing an emulated device
Adding a custom device
Checking network throttling profiles
Emulating network connectivity
Test your knowledge
Summary
8. Exploring Layouts
Exploring themes suitable for academic use
Contemporary
Aardvark
Academi
Adaptable
eGuru
Pioneer
Dynamic
Eduhub
Snap
Sharp
Klass
Exploring themes suitable for corporations, companies, and professionals
Rocket
Shoehorn
Exploring themes for personal use
Sharp
Exploring two-column themes
Elegance
Exploring website themes
Crisp
Exploring miscellaneous themes
Archaius
Bootstrap
Roshnilite
Campus
Morecandy
Ulkit
Aigne
Flexibase
Decaf
Afterburner
Bootswatch
Cerulean
Splash
Serenity
Anomaly
Shoelace
Flexpage
Overlay
Comparing and contrasting all the themes
Test your knowledge
Summary
9. Course Formats
Creating a Moodle course
Exploring the topic course format
Changing a course format
Downloading a course format plugin
Selecting the Grid course format
Exploring plugin course formats
Collapsed topics
Socialwall format
Onetopic format
MindMap format
Periods format
Flexible sections format
Buttons format
Board (Grid and Blocks) format
Mansonry topics format
eTask topics format
Menutopic format
Flexpage format
GPS format
Columns format
Noticeboard format
Folder view format
NED tabs course format
Test your knowledge
Summary
10. Extending Moodle Theming to Specific Sections
Putting all the pieces together
Organizing course content
Adding blocks to enhance a theme
Uploading a logo in a description section
Social networks, headers, footers, and breadcrumb styles
Coding with CSS in Moodle
Logos, images, and icons
Dealing with different devices
Course formats and layouts
The result
Summary
A. Test Your Knowledge Answers
Chapter 1, An Introduction to Moodle 3 and MoodleCloud
Chapter 2, Themes in Moodle 3 on-premises and MoodleCloud
Chapter 3 Setting up Logos in Moodle Themes
Chapter 4, Customizing the Header and the Footer
Chapter 5, Customizing Elements with CSS
Chapter 6, Locating, Editing, and Using New Icons
Chapter 7, Optimizing Themes for Mobile Devices
Chapter 8, Exploring Layouts
Chapter 9, Course Formats

Moodle Theme Development

Moodle Theme Development

Copyright © 2016 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: December 2016

Production reference: 1021216

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham 

B3 2PB, UK.

ISBN 978-1-78646-321-0

www.packtpub.com

Credits

Author

Silvina Paola Hillar

Copy Editor

Safis Editing

Reviewer

Susan Smith Nash

Project Coordinator

Ulhas Kambali

Commissioning Editor

Amarabha Banerjee

Proofreader

Safis Editing

Acquisition Editor

Larissa Pinto

Indexer

Rekha Nair

Content Development Editor

Onkar Wani

Graphics

Abhinash Sahu

Technical Editor

Rashil Shah

Production Coordinator

Aparna Bhagat

About the Author

Silvina P. Hillar is Italian and has been teaching English since 1993. She has always had a great interest in teaching and has done a lot of research on teaching methodologies, management techniques and embed them into e-learning and teaching. She has also explored different types of e-learning combining them with Moodle. She also researches on multimedia assets that enhance teaching and learning through VLE platforms. She tries to embed the learning of students through new resources that are appealing and innovative for them. In this way, she ensures that multimedia stimulates different thinking skills as well as multiple types of intelligence.

She is an English teacher, a Certified Legal Translator (English/Spanish), and has a postgraduate degree in Education (graduated with honors).

She has worked at several schools and institutions with native English speaking students and students of English as a foreign language, and as an independent consultant for many international companies in the capacity of an Interpreter, Translator, and Virtual Learning Environment (VLE) Course Designer.

She has always had a passion for technological devices concerning education. Formerly, videos and cassettes were a must in her teaching lessons; the computer was, and still does, play a big role. Her brother, Gastón C. Hillar, designed some programs and games for her teaching. Lately, she has been teaching using Moodle and the Web. She believes that one of the most amazing challenges in education is bridging the gap between classic education and modern technologies.

She has authored: Moodle 1.9: The English Teacher's Cookbook, Moodle 2.0 Multimedia Cookbook, Moodle 2.5 Multimedia Cookbook second edition, Mind Mapping with FreeMind and Moodle 2.3 Multimedia Video Course.

When not tinkering with computers, she enjoys travelling with her son, Nico and her love, Jorge, with whom she spends wonderful time.

Acknowledgements

I’d like to thank all the team members at Packt Publishing, who worked with me as an incredibly helpful team; Larissa Pinto, who trusted me to work on this project--we worked together so that the idea came into this book--and Onkar Wani, who was very patient and helpful with time management. I would like to thank my technical reviewer, Rashil Shah; my reviewer Susan Nash; and proofreaders, for their thorough reviews and insightful comments.

The writing process of a book involves a great amount of lonely hours, therefore, I owe tremendous thanks to my wonderful son, Nico, who was very patient and supportive in the writing process of the book. He was on some occasions forced to be alone while I concentrated on my writing. Special thanks to my love Jorge, who was very supportive during the whole writing process.

My parents, Susana and Jose, who always stand by me and support my decisions. My brother, Gastón C. Hillar ,and his wife, Vanesa Olsen, and my nephews, Brandon and Kevin, with whom I spend unforgettable moments.

Last but not least, I would like to thank the Rivera and Dimuro families, with whom I share delicious asados.

I would also like to thank all my students, either virtual or real, who make it possible for me to be a teacher.

About the Reviewer

Susan Smith Nash has been designing and developing online courses and programs for more than 15 years for education, training, and personal development.

In addition to Moodle 3.x Teaching Techniques, Nash is the author of a number of Moodle books and training videos, including Moodle 3.x Course Design, Moodle Course Design Best Practices and Moodle for Training and Professional Development. She has also authored Video-Assisted Mobile Learning for Writing Courses (2016).

Thank you to my online students and also to Dr. Jeff Kissinger, Director of the Rollins College Instructional Design Certificate Program, and Don Tharp, Ashland University.

www.PacktPub.com

For support files and downloads related to your book, please visit www.PacktPub.com.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

https://www.packtpub.com/mapt

Get the most in-demand software skills with Mapt. Mapt gives you full access to all Packt books and video courses, as well as industry-leading tools to help you plan your personal development and advance your career.

Why subscribe?

Fully searchable across every book published by PacktCopy and paste, print, and bookmark contentOn demand and accessible via a web browser

Dedication

Dedicated to my beloved son Nico, my nephews Kevin and Brandon, my love Jorge, and his son Agus

Preface

A long time ago, we could specify the most appropriate resolution where your user can have a nice experience with the website when we designed themes for it. We could design our themes, considering that they will look great for a specific resolution and just include a notice indicating that unless the user displays the website with a resolution of 800-by-600 pixels, it was their fault if they have a horrible user experience. However, those times are over. Nowadays, we have to design themes that are capable of working with different resolutions, screen sizes, screen orientations, and pixel densities. Our themes must be responsive, and the users must be able to have a great user experience, no matter what device they use to access our website.

These requirements are extremely important when we design modern Moodle themes. We cannot use the same recipes that worked OK a few years ago. We need new recipes that consider the requirements for excellent user experiences with any devices. Smartphones, tablets, phablets, ultrabooks, all-in-one computers, retina displays, high-DPI displays, and smartTVs can access our Moodle courses. Our Moodle themes must be ready to provide an excellent user experience in all these displays. We cannot design themes for just a few screen resolutions anymore.

This book will teach you how to design themes, considering  all the requirements for what is known as the post-PC era.

When theming, we must bear in mind many items, because we may want to change completely the look and feel of our Moodle course, but first of all we need to organize how to do it. We need to start from some basic concepts to bear in mind before taking the first step. We need to focus on small targets and then on the general look of the course. Therefore, in this book we will cover several aspects that we need to know about theming. We will deal with the free version of MoodleCloud, which has another version that is paid and offers more possibilities than the free one. But throughout the book, when referring it to MoodleCloud, we will be making reference to the free and open source one. Bearing in mind that MoodleCloud is not the only cloud-hosted Moodle hosting, we need to know that there are many services that host Moodle, and so users can download Moodle 3 and install to their own server space and also select a Moodle hosting service--many of which allow one to select from dozens of themes--and the themes are customizable. Whereas in this book, when talking about Moodle we will deal with Moodle on-premises, and we will learn how to customize it.

Through the chapters of the book we will start a journey through the land of theming and we will learn some information that will help us to create, design, and improve the theming of our courses. We will deal with icons, images, screen resolutions, responsive themes, among other relevant items that enhance the Moodle themes. Furthermore, we cover different devices and emulate them in order to check what the theme looks like in them. We learn how to code basic HTML and CSS with the help of online editors that help and teach us how to do it. We learn where to find themes and layouts for the Moodle courses and we also explore how to customize at the MoodleCloud maximum level, taking into account that we deal only with the free and open source version. Last but not least, we put all the pieces together, and in the last chapter we recap everything that we have explored, and we can spice our Moodle Course, with some tips that let us theme our course, adding some blocks, for instance, in order to continue changing the look and feel of our course.

What this book covers

Chapter 1, An Introduction to Moodle 3 and MoodleCloud, covers most of what needs to be known about e-learning, VLEs, Moodle, and MoodleCloud. There is a slight difference in between Moodle and MoodleCloud, especially if you don’t have access to a Moodle course in the institution where you are working and want to design a Moodle course. Furthermore, Moodle is used on different devices, and there are several aspects to take into account when designing a course and building a Moodle theme for these devices. We have also dealt with screen resolution, aspect ratio, types of images, and texts and anti-aliasing effects.

Chapter 2, Themes in Moodle 3 on-premises and MoodleCloud, shows what themes are and how to find them in Moodle and in MoodleCloud. We also reveal a little about HTML code and how colors are named in this code. We customize the Moodle theme called More and find out where our Moodle themes are on our computer. We have search for, download, and install Moodle theme Essential. We deal with plenty of information relevant to Moodle themes and where to find it.

Chapter 3, Setting Up Logos in Moodle Themes, works with UI-based settings to tune our Moodle themes. We do not change specific files such as HTML files or CSS because we take advantage of a theme where we can design a logo using on online logo editor, upload a logo, Favicon, background image as a tiled style. Regarding MoodleCloud, we learn how to upload a logo that can be seen in the header of the front page and the header of the login page, which is allowed in the theme that we are working with, bearing in mind that MoodleCloud has some limitations.

Chapter 4, Customizing the Header and the Footer, explain how to add images and text to the footer and the header. Hence, we add hyperlinks to social networks in Moodle on-premises. Apart from that, we can add a slide show and modify the front page changing the look and feel of the Moodle course. We learn how to make some changes to MoodleCloud, taking into account its limitations. There are customizable areas, though.

Chapter 5, Customizing Elements with CSS, works with several online text editors so as to learn more about CSS and what we can do in order to change the look and feel of Moodle on-premises. We test the code before making any changes and avoid making mistakes when customizing the look and feel of the Moodle theme.

Chapter 6, Locating, Editing, and Using New Icons, works with icons, vector graphics, and bitmaps. We learn who to modify SVG and export them as PNG. We change the look and feel of the Moodle on-premises course and personalize the icon. We can also add more images to the icons or edit them in a different way, but we always have to follow the steps that we have taken. We need to make copies of files and replace the edited files with the originals. We may not like how the new icon looks in the Moodle course.

Chapter 7, Optimizing Themes for Mobile Devices, works with emulators for mobile devices; we also check Internet connectivity and learn how to modify, edit, and custom some of these options. We work with Google DevTools, which is an online emulator, and we can easily learn how to work with a mobile device from either our desktop or laptop. Moreover, we emulate network connectivity to check how the theme download in a mobile device. We can customize not only the device, but also its connectivity. Besides, when throttling the connectivity, we can see the speed.

Chapter 8, Exploring Layouts, deals with all the themes available for Moodle 3.1 and Moodle 3, which are free of charge and downloadable at https://moodle.org/plugins/browse.php?list=category&id=3. We change the look and feel of our Moodle course several times in order to show how it looks dressed in other themes.

Chapter 9, Course Formats, deals with course formats. There are default course formats and there is also a plugin for them. These course formats can be downloaded from the Moodle website and  can be installed in Moodle on-premises. We can also change the format of our courses in order to enhance them and make them a little bit different. We have to bear in mind what type of course we need to create in order to choose the right format.

Chapter 10, Extending Moodle Theming to Specific Sections, combines all the elements that we have learned throughout the chapters. We also add some ingredients in some cases that allow us to change the appearance of the Moodle course in order to customize it in the desired way.

Furthermore, we explore different ways in which we can simply change the look and feel of the course, since we can add just blocks, images, or make some small changes to the Moodle course that will allow us to see it in a different way.

Whenever we design an activity or add a resource, we must also bear in mind that we need to think how to organize them, due to the fact that the course will look tidier depending on how we organize the content.

What you need for this book

As requirements or prerequisites, readers need previous basic experience with Moodle 3 or earlier versions.

Who this book is for

If you are a Moodle administrator, developer, or designer and wish to enhance your Moodle site to make it visually attractive, then this book is for you. You should be familiar with basic web design techniques such as HTML and further experience with CSS would be helpful.

Conventions

In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "Change the number of pixels for the second element (image). Change from 120px (120 pixels) to 80px for both height and width."

A block of code is set as follows:

<!DOCTYPE html> <html>      <head>      <style>      div {      width: 500px;      height: 100px;      border: 3px solid #73AD21;      }

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "We click on Add an activity or resource and two options appear, resources and activities."

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book-what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of. To send us general feedback, simply e-mail [email protected], and mention the book's title in the subject of your message. If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Errata