31,19 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
- Veröffentlichungsjahr: 2008
In Detail
Wikis are a great way to collaborate and share knowledge online. MediaWiki is a popular and powerful wiki engine, powering some of the biggest wiki sites in the world, including Wikipedia, the biggest and most famous wiki of all.
If you have a MediaWiki-based site and want to tailor its appearance, then this book is for you. MediaWiki Skins Design shows you how to fully customize the appearance and interface of your MediaWiki-based wiki. You will learn how to change every aspect of your wikii's appearance to produce a MediaWiki site fully tailored to your requirements.
The book provides full details of how MediaWiki skins work, and the necessary template and CSS customizations required to completely alter MediaWiki's appearance. Using this book, you will learn to develop rich, attractive, and friendly skins for MediaWiki.
This book will show the reader how to customize the appearance of their MediaWiki site by creating custom skins.
Approach
This book takes you step by step through customizing your MediaWiki skin. It is full of practical examples of MediaWiki skinning techniques, and clear explanations of how MediaWiki skinning works.
The early chapters go through each element of a MediaWiki design, showing the CSS and PHP tags necessary to customize MediaWiki's appearance. Later chapters look at ways to further enhance your design using extra graphics, JavaScript, AJAX, dynamic CSS, and more.
Who this book is for
This book is aimed at web designers or wiki administrators who want to customize the look of MediaWiki with custom skins.
The reader will already have a MediaWiki installation that they are targeting with their skin. It might be their own installation, or they might be a designer developing a custom look for a client. The book does not cover setting up or using MediaWiki, except features specifically related to skinning.
The book assumes that you are familiar with CSS and HTML, but no prior knowledge of PHP is required.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 209
Ähnliche
Table of Contents
MediaWiki Skins Design
Richard Carter
MediaWiki Skins Design
Copyright © 2008 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(s), Packt Publishing, nor its dealers or 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 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: August 2008
Production Reference: 1140808
Published by Packt Publishing Ltd.
32 Lincoln Road
Olton
Birmingham, B27 6PA, UK.
ISBN 978-1-847195-20-3
www.packtpub.com
Cover Image by Nilesh Mohite (<[email protected]>)
Credits
Author
Richard Carter
Reviewer
Peter De Decker
Senior Acquisition Editor
David Barnes
Development Editor
Swapna V. Verlekar
Technical Editor
Shilpa Dube
Copy Editor
Sneha Kulkarni
Editorial Team Leaders
Mithil Kulkarni
Akshara Aware
Project Manager
Abhijeet Deobhakta
Project Coordinator
Lata Basantani
Indexer
Rekha Nair
Proofreader
Dirk Manuel
Production Coordinator
Aparna Bhagat
Cover Work
Aparna Bhagat
About the Author
Richard Carter started as a freelance web designer in Leicestershire, UK, before moving to the North-East to study at Durham University, where he met his business partner. He is now Senior Partner of Peacock Carter (http://www.peacockcarter.co.uk), a Newcastle-based creative partnership offering website design and corporate identity development to small, medium, and large businesses in UK and further afield.
Richard's interests include tea-drinking, swimming, and periodically reorganizing the office furniture. He now lives in Durham, slightly too close to the Cathedral's bells.
Contact: <[email protected]>
Firstly, I'd like to thank David Barnes of Packt for helping to nurture the idea for this book, and to those behind the scenes at Packt - particularly Lata - for their help guiding me through their processes.
Michael, my business partner, is owed thanks too, for keeping the business running during those times I needed to concentrate on the book, as are Danni, my friends, and my family, all of whom were supportive throughout (and probably relieved that I had something to do with my time other than creating websites).
Additional thanks are due to Peter, the reviewer, who had plenty of useful and interesting suggestions for the book.
About the Reviewer
Peter De Decker is the author of a MediaWiki extension called IpbWiki which is an integration plugin that integrates the forum software Invision Power Board with the Mediawiki engine with the main purpose of giving the applications a unified look and login. During the ongoing creation of this extension he has become an expert in understanding the MediaWiki source code and layout.
As Peter had previously reviewed the MediaWiki Administrator book it was only logical to also use his MediaWiki expertise for this book on MediaWiki skinning.
During his day job Peter works as a Database Adminstrator for SQL Server in a company called Financial Architects, where he is part of the Core Development team. His main task there is to provide a solid product base which the other teams in the firm can use or expand up on. As a secondary profession, he sells software and services through his company called Global Soft. When he's not working he likes to exercise his hobbies: running, biking, collecting comics, and playing snooker.
Contact: <[email protected]>
Alternative Email: <[email protected]>
I'd like to thank Richard Carter for writing this book on skinning MediaWiki and hope that it will help to further spread the love for this wonderful wiki engine.
Preface
MediaWiki Skins Design takes you through the process of creating a new skin (design) for your wiki, from thinking about your wiki's audience and purpose, to adding social media features, and even styling the wiki for printing.
What This Book Covers
Chapter 1 takes a look at existing wikis on the web, and introduces the case study used throughout the book.
Chapter 2 goes through setting your new skin as the wiki's default skin, and styling the different views of the wiki's primary content that will be seen by your wiki's visitors.
Chapter 3 describes how the interface elements such as the navigation links and search feature can be styled, as well as how to customize the edit toolbar.
Chapter 4 takes a look at the <head> attributes in MediaWiki, and begins to structure the case study wiki in to a newer, more suitable layout.
Chapter 5 covers more in-depth PHP and MediaWiki functions you can use to enhance your new MediaWiki skin.
Chapter 6 describes how to design and create a visual hierarchy for your wiki's content.
Chapter 7 describes useful JavaScript code and CSS that you can use to enhance your wiki and its features.
Chapter 8 explains how to integrate your wiki with social networking sites, and how to use services such as YouTube and Twitter on your MediaWiki.
Chapter 9 takes a look at deploying your new MediaWiki skin, and the options you have when licensing your wiki's skin for others to use.
Chapter 10 explains how to style your wiki's content for printing.
In Appendix A, the different modes of interpretation such as Standards mode and Quirks mode are discussed.
What You Need for This Book
Access to a server, either available on your computer locally, or on the web, is useful to test your skin. Additionally, you will need to have installed MediaWiki, and have full permissions to edit the files associated with it. Other than this, a simple text editor or any HTML/CSS/PHP editor with syntax highlighting will be required.
Who is This Book For
This book is aimed at web designers or wiki administrators who want to customize the look of MediaWiki by using custom skins.
You will already have a MediaWiki installation that you are targeting with your skin. This might be your own installation, or you might be a designer developing a custom look for a client. The book does not cover setting up or using MediaWiki, except for features specifically related to skinning.
This book assumes that you are familiar with CSS and HTML, but no prior knowledge of PHP is required.
Conventions
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in the text are shown as follows: "We can include other contexts through the use of the include directive."
A block of code is shown as follows:
When we wish to draw your attention to a particular part of a code block, the relevant lines or items will be bold:
New terms and important words are introduced in a bold-type font. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Select the Skins tab and you will find your new skin is in the list of skins that are available on your wiki".
Note
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 may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply drop an email to <[email protected]>, making sure to mention the book title in the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or email <[email protected]>.
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 on 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.
Downloading the Example Code for the Book
Visit http://www.packtpub.com/files/code/5203_Code.zip to directly download the example code.
The downloadable files contain instructions on how to use them.
Errata
Although we have taken every care to ensure the accuracy of our contents, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in text or code—we would be grateful if you would report this to us. By doing this you can save other readers from frustration, and help to improve subsequent versions of this book. If you find any errata, report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the let us know link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata added to the list of existing errata (if any). Existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide the location address or website name immediately so we can pursue a remedy.
Please contact us at <[email protected]>with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
Questions
You can contact us at <[email protected]>if you are having a problem with some aspect of the book, and we will do our best to address it.
Chapter 1. Introduction
For some websites, wikis along with blogs (weblogs) have become an essential component in order to collaborate in online editing. MediaWiki is one of the most popular wikis in use, with features such as integration of YouTube videos. It also has plugins that allow forums such as Invision Power Board to integrate with MediaWiki.
By playing around with MediaWiki's PHP template files and Cascading Style Sheets (CSS), almost any design can be recreated in MediaWiki. The more complicated the design is, the more work will be involved in skinning MediaWiki to match it!
In this chapter, we will discuss the following:
For the purpose of this book, you should install MediaWiki and complete the basic configuration (refer to http://www.installationwiki.org). Then begin restyling your wiki. A basic working knowledge of eXtensible Hyper Text Markup Language (XHTML) and Cascading Style Sheets (CSS) is required. An understanding of PHP as well as MediaWiki (for example, being able to edit pages) will be a bonus.
Examples of MediaWiki Skins
There is little variation in the MediaWiki skins of each wiki, when we take their popularity into consideration. A few examples of existing wikis will give you an idea of what can be achieved. In particular, we will look at Wikipedia, which has become synonymous with wikis, AboutUs, and the WordPress Codex.
Wikipedia: The Monotony of MonoBook
Wikipedia, the "free encyclopedia that everyone can edit", is the most well-known example of a MediaWiki implementation. Wikipedia uses a slightly modified version of the "MonoBook" theme, the default MediaWiki skin that is supplied with the installation.
It is surprising that only a few webmasters redesign their wiki— the 'MonoBook' theme supplied with MediaWiki's installation and used on Wikipedia, is a very common sight on wikis. The logo is often the only element that is changed in the design. The problem with MonoBook is that Wikipedia has become so popular that the MonoBook theme is usually associated with Wikipedia rather than MediaWiki. Although a great change in the overall layout of components can cause visitors to the wiki to become disorientated, a reasonable amount of change can be made before this occurs, so this should not deter us too much.
MediaWiki comes with a selection of six themes: "Chick", "Classic", "Cologne Blue", "MonoBook", "Nostalgia", and "Simple". Another theme, "MySkin", allows you to specify the stylesheet to be used by creating a valid CSS file at User:YourUserName/myskin.css in your wiki's namespace. Apart from the "MonoBook" skin, the other MediaWiki themes are not used very frequently. This is because aesthetically, they are not very appealing.
As an online encyclopedia, Wikipedia's skin is under-stated. A too bright design would hinder the visitors' focus not only from the web page content, but also the most important aspects of the website. Let's face it: MonoBook is an ugly skin. It is grey, dull, and unappealing to new visitors. Wikipedia's saving grace is its content; but the supposed focus of each page's primarily monochrome content is lost to the plethora of blue links surrounding the content.
The use of a small font allows a lot of content to be displayed on the screen, and is ideal for an encyclopedia with long articles. But the amount of content on the screen makes it hard to read for a long period of time.
There is too much information on the screen, such as links to that versions of the page in different languages and log in and register links. Because of this, no single element on the page really stands out. This means the search box is unlikely to be used unless you are a frequent visitor to Wikipedia, and only those "in the know" will be aware of the ability to edit pages.
Bog Standard
MediaWiki's Standard skin is another one that is supplied with the installation.
Not surprisingly, there is nothing special about this skin. It displays the content in a plain, featureless way, which may be suitable for Wikipedia, but will not help you to differentiate your wiki from other wikis.
In Standard, the navigation, including the links to the page in different languages is split between the left-hand column and the top of the screen. This unnecessarily pushes the page's primary content even further down the page.
Nostalgia
Nostalgia is similar to MediaWiki's Standard skin. It is similar to Standard in placing various (probably infrequently used) links above the page's primary content. Unlike Standard, the Nostalgia skin aligns the wiki's logo to the right rather than the left, making it less of a focus on the page.
The location of the page's primary title makes it very clear as to what the content of the page is all about (in this case, Conway's Game of Life). It is good for search engines too, but the content related to this heading is far down the page.
Many of MediaWiki's characteristic links, such as "Edit this page" and "Discuss this page" are again included in this skin underneath the primary content.
MediaWiki is generally quite slow in presenting pages to the visitors, and the duplication of content in the Nostalgia skin does not prove to be helpful.
Modern
Modern is an improvement on these skins: it looks better-designed, and the muted grays and blues used in the header and navigation help to give the content a greater focus.
Notice the absence of the Wikipedia logo in this screenshot. Modern does not allow the space for it, which could present a problem if you want to use your wiki's logo with this skin.
Although the links are not underlined, the "blue" does suggest that visitors can interact with them. Also, the article's content is displayed in a clear manner.
However, but attempting to prove useful for every type of wiki you would want to create, this skin suffers from the same problems as its siblings do. Modern leaves very little to be desired in terms of distinguishing your wiki from other wikis on the Internet. As with MonoBook, Modern's search box is in the left-hand column, meaning it's not instantly recognizable as a search feature, which most users will expect to be at the top right of their screens.
Simple
MediaWiki's Simple skin lives up to its name. Again, the navigation and search features are located in the left-hand column in this skin. But unlike MonoBook and Modern, the "View" links are displayed in this column too, rather than at the top of the page.
This allows content in the Simple skin to be displayed at the full height of the visitor's browser, which is useful for wikis with long pages of content, such as Wikipedia.
Unlike MonoBook, Simple's category links are not styled so as to separate them from the rest of the content. Instead, they are styled in a similar way to the rest of the page's content, having the same font size but being in blue. This may not be as beneficial for the wiki's visitors, as the centrally-aligned text in the categories box is not as obvious after a long block of left-aligned text. See the following screenshot:
Cologne Blue
Cologne Blue follows a format similar to the other MediaWiki skins but has better features. The language links are colored green rather than blue, distinguishing them from the more useful links.
The skin is another dull blur of blue, gray, and blue-gray colors that are most suited to general use.
As we will see, it's useful to skin MediaWiki to help distinguish your wiki and make its useful features stand out.
Customized MediaWiki Skins
An easy option to brighten up your wiki is to change the color scheme of MonoBook. Memory Alpha (http://www.memory-alpha.org) is a good example of the MonoBook skin that uses a different color scheme, but the monotony of MonoBook is still noticeable. However, it does make skinning MediaWiki more rewarding.
Adobe Labs Wiki
The Adobe Labs wiki (http://labs.adobe.com/wiki/) provides information on upcoming technologies at Adobe. It allows the developers to evaluate them before they are fully launched, with information about the application's prerequisite requirements in both hardware and software.
The article content draws focus to itself due to its white background that contrasts with the gray color used in the background and in the column on the left. The article, discussion, view source or edit, and the history links also draw your focus.
In order to edit the articles, visitors must register and log in, as edits by anonymous editors are disabled. Interestingly, visitors can edit articles' discussion pages without the need to register, thus helping to preserve the content of the article with minimal poor quality edits.
