Nuvola Skin - Revision history

ThePlaz: remove Category:MediaWiki Extensions

2012-07-25T04:59:32Z

remove Category:MediaWiki Extensions

ThePlaz: Category:MediaWiki Category:MediaWiki Extensions

2012-07-25T04:59:06Z

Category:MediaWiki Category:MediaWiki Extensions

ThePlaz: add Category:MediaWiki Extensions

2012-07-25T04:57:50Z

add Category:MediaWiki Extensions

ThePlaz: add images

2012-01-30T03:59:35Z

add images

ThePlaz: edit intro

2012-01-30T03:43:24Z

edit intro

ThePlaz: add image

2012-01-30T03:39:53Z

add image

ThePlaz: add other cats

2012-01-22T05:21:11Z

add other cats

Anno1404: /* Drop Downs */

2011-11-28T08:36:21Z

‎Drop Downs

Anno1404: rewrote intro slightly

2011-11-28T08:33:08Z

rewrote intro slightly

ThePlaz at 22:18, 22 November 2010

2010-11-22T22:18:03Z

← Older revision		Revision as of 04:59, 25 July 2012
Line 66:		Line 66:
	[[Category:Sites]]		[[Category:Sites]]
	[[Category:MediaWiki]]		[[Category:MediaWiki]]
−	~~[[Category:MediaWiki Extensions]]~~

@@ Line 65: / Line 65: @@
 [[Category:Tech]]
 [[Category:Sites]]
 [[Category:MediaWiki Extensions]]

← Older revision		Revision as of 04:57, 25 July 2012
Line 65:		Line 65:
	[[Category:Tech]]		[[Category:Tech]]
	[[Category:Sites]]		[[Category:Sites]]
		+	[[Category:MediaWiki Extensions]]

@@ Line 11: / Line 11: @@
 ==Drop Downs==
-The [http://wiki.theplaz.com/ThePlaz.com%27s_Dropdowns_for_MediaWiki drop downs for MediaWiki] were the first things I ever really coded with CSS.  They were ugly and never really fit in with the site design.  In addition, they did not work well in all browsers (although I can not conclusively determine that the new ones work better or if the browser manufactures changed their code).  Also in the Mediawiki:Sitenotice drop downs, the HTML code appeared before the content.  On a text based browser, a visitor had to scroll though the drop down menus every time, and it was not an ideal design for search engines.  The new skin puts the drop downs at the bottom of the HTML code and the CSS makes it display at the top.  The drop downs also have icons and are spaced much nicer.
+[[File:Nuvola Top Bar.png|thumb|The Nuvola top bar makes it easy to find class materials]]
 The drop downs are now hard coded to speed up the site.  The old ones were dynamically created as the "sitenotice", and I think I could do that again except for IE8 which requires strict nesting adherence that MediaWiki did not do for me.
 ==Sidebar==
 Because I removed the old personal area and page tabs, a lot more items needed to go in the sidebar.  The challenge was to differentiate between the items to make them easy to scan.  I dropped some duplicate items, such as the link to the Main Page because people know to click on the logo to go home.  On browsers which support CSS print stylesheets (aka Not IE6), there is no print view icon.  I want people to break out of the habit of looking for the print view button.  I originally planned to put a notice saying "just hit print," but I decided against it.
@@ Line 27: / Line 29: @@
 ==Footer==
 I made the footer all about me.  Most of my visitors arrive from Google, so I want them to find out a bit about me and some of my projects.  I used to have a flickr widget and the MIT badge integrated in the sidebar, but that made the sidebar a mess of navigation and about me.  In addition, I wanted to highlight my friendfeed.  I had originally used the friendfeed widget code in my April 2009 homepage minor-redesign.  I use their widget code, but apply my custom CSS rules on top of it to style it so that it is more compact.  In the center column, I have my most recent 10 flickr sets.  The flickr JS widget I was using before showed 3 random photos from my photostream.  I organize using sets on flickr, so I wanted to highlight them.  I wrote some PHP backend code which called the flickr API.  It was surprisingly easy to do since the flickr API is so beautiful!  In the third column, I added some lines about me and all of my site logos, which used to be in the header and sidebar.    I really like the way the copyright statement turned out.
@@ Line 33: / Line 36: @@
 ==Extra Non-Skin Items==
 ===Google Search===
 I made some hacks to the internal pages for my site which makes it easier to use.  They are not part of a skin per say.  For search results, I display Google Custom Search results below MW search results in an iframe.  I was able to "hack" the Google results so that it would search the query the user had entered.  This is handy because the MW search is not the best and Google might have some results.  It also allowed me to remove the separate Google box I had before.
 ===Scribd iPaper===
 For documents, I have used the [http://www.scribd.com/developers Scribd iPaper plug in] JS to automatically display documents in the browser using Flash.  This is a big usability boost because the document is immediately visible.  Most users are looking to read, not edit the document.  This presents the document quickly.  A user does not need to hunt for a tiny download link.  Plus, of course, it helps users who do not have Microsoft Word.
@@ Line 51: / Line 56: @@
 ==Optimization==
 I used YSlow to do front-end optimization.  I combined most of the images into 2 "sprites".  It was the first time I ever used that technique.  I minified and combined CSS and JS pages.  I think that MediaWiki should have that feature since it would speed things up.  I also played with HTML headings, expires, and e-tags to maximize caching.  Right now, only the page and the Google Analytics code will load when you switch pages.  I still have some back-end work to do, so the site is not as speedy as I would like.
 [[Category:Summer]]
 [[Category:Tech]]
 [[Category:Sites]]

@@ Line 1: / Line 1: @@
 [[File:Nuvola Skin.png|thumb|ThePlaz.com Main Page in Nuvola]]
-In the summer of 2009, I created the Nuvola skin for MediaWiki.  I had originally started it in the summer of 2006 (less than a year after I had gotten my website.)
+I created a new skin for my website, the '''"Nuvola" skin''' for MediaWiki.  I created a new skin to give my site a improve usability, unique look, and to improve my CSS and design skills.
 The Nuvola icons are based on the Nuvola icon set for KDE 3 by [http://www.icon-king.com David Vignoni]
-The Mediawiki skin design is based on the [http://en.wikipedia.org/wiki/Wikipedia:WikiProject_Usability/Main_Page/Draft/Draft_5_Archive MediaWiki homepage design draft I adopted] for my homepage.  This design came from the Monobook skin, which is the MediaWiki default skin.  I kept the content area and layout, but  I wanted to create a new skin because all of the MediaWiki skins suck.  With Wordpress, everyone installs a new skin, and every site looks unique.  With MediaWiki, almost no one uses a new skin.
+The Mediawiki skin design is based on the [http://en.wikipedia.org/wiki/Wikipedia:WikiProject_Usability/Main_Page/Draft/Draft_5_Archive MediaWiki homepage design draft I adopted] for my homepage.  This design came from the "Monobook" skin, which is the old MediaWiki default skin.  (I created this before the new MediaWiki default skin, "Vector" was released.)  I kept the content area and layout, but I wanted to create a new skin because all of the MediaWiki skins suck.  With Wordpress, everyone installs a new skin, and every site looks unique.  With MediaWiki, almost no one uses a new skin.
-I did not get much done in 2006, except some new file icons and a start to the CSS.  I did do a full design on paper which I can not find anymore.  In 2009, I decided to finish the skin.
+I had originally started it in the summer of 2006 (less than a year after I had gotten my website.)   I did not get much done in 2006, except some new file icons and a start to the CSS.  I did do a full design on paper, which unfortunately I can not find anymore.  In [[summer]] 2009, I decided to finish the skin.
 This skin has 3 main elements: far better drop downs, a new sidebar, and a new footer.

← Older revision		Revision as of 03:39, 30 January 2012
Line 1:		Line 1:
		+	[[File:Nuvola Skin.png\|thumb\|ThePlaz.com Main Page in Nuvola]]
	In the summer of 2009, I created the Nuvola skin for MediaWiki. I had originally started it in the summer of 2006 (less than a year after I had gotten my website.)		In the summer of 2009, I created the Nuvola skin for MediaWiki. I had originally started it in the summer of 2006 (less than a year after I had gotten my website.)

← Older revision		Revision as of 05:21, 22 January 2012
Line 51:		Line 51:
	==Optimization==		==Optimization==
	I used YSlow to do front-end optimization. I combined most of the images into 2 "sprites". It was the first time I ever used that technique. I minified and combined CSS and JS pages. I think that MediaWiki should have that feature since it would speed things up. I also played with HTML headings, expires, and e-tags to maximize caching. Right now, only the page and the Google Analytics code will load when you switch pages. I still have some back-end work to do, so the site is not as speedy as I would like.		I used YSlow to do front-end optimization. I combined most of the images into 2 "sprites". It was the first time I ever used that technique. I minified and combined CSS and JS pages. I think that MediaWiki should have that feature since it would speed things up. I also played with HTML headings, expires, and e-tags to maximize caching. Right now, only the page and the Google Analytics code will load when you switch pages. I still have some back-end work to do, so the site is not as speedy as I would like.
		+
		+	[[Category:Summer]]
		+	[[Category:Tech]]
		+	[[Category:Sites]]