Features
This is the Pancake of Your Wet Dreams.
Google “pancake recipe” and you get nearly 3 million results. How do you sort through the mess, if you’re just lusting after a syrup-sodden flapjack of joy?
Enter MyStack. This is an entirely fictional Pancake Search Engine – the Google of pancake recipes – that allows you to delicately tweak ingredients, mix-ins, calories, and costs. It even calculates whether a pancake is qualitatively “sweet” “hearty” or “fluffy” using ingredient ratios.
Its backend, if it were ever built, would feature a hell of a lot of data parsing, web scraping, and hopefully tap into existing recipe database APIs, should they be made available.
Again, this website does not actually exist. I drew up this mockup in Photoshop (in a record 1.5 hours) for my CS171 Data Visualization class.
The Pancake Challenge prompt:
Mon Feb 7 – The Pancake Recipe Challenge
Google the words “pancake recipe,” and you will get more than 1 million hits. Looking more closely, there are actually many ways to make such a simple thing as pancakes.
In this exercise, we want each breakout group to pick some tasks that have to do with the variety of pancake recipes and to sketch a visualization that supports as many of these tasks as possible. The list of possible tasks includes, among others:
- I have some ingredients at home, which pancake recipe can I make?
- Which is the most diet friendly recipe?
- What recipe will require the least amount of money?
- How will pancakes turn out for the difference recipes? Taste? Texture?
- To what extent do recipes vary? How much deviation is in the various quantities?
- I am making pancakes — I wonder what recipe my friends recommend?
You can also come up with your own tasks. Note that the data is many pancake recipes and not just one, so your interface should scale to billions of pancake recipes (just kidding – but you get the point). At the end, you will present your design to the class and explain how the visual elements and possible user interactions are supporting the tasks you chose.
Unfortunately, I’m going to be out of town on Monday when the project is due.
This probably the one time I’ve ever wanted to present my homework… but I figured I’d let it into the wilds of the Internet, in case anyone wants to build the mythical MyStack and turn it into syrupy reality. (Slice and dice the full size mockup here.) What the hell, let’s throw in a handful of blueberries and add “tortilla” to the database.
Welcome to Themeology!
Themeology is perfect for business sites, photography blogs, photoblogs, and portfolios! This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts like this one or sub-pages as you like and manage all of your content inside of WordPress. The entire theme includes non-obtrusive JQuery tricks too, so the theme will be as slick any any website you’ve ever used!
Theme Typography
While custom control panels and plugins are great, one of the strongest points of Themeology is it’s meticulous attention to details in the area of typography. Every major type element has been addressed; You can even change both the Title Fonts and Body Fonts with the flip of a switch in the dashboard; Heck, you can even disable the title-font-replacement if you feeling like straight forward web-fonts instead of the flashy new stuff.
[left_col]
Custom Title Fonts
The theme comes pre-packaged with a very special version of the Mido Font, complete with ALL characters (including the funky stuff like $^*#@). That’s not all though, you can quickly switch to one of the other 5 font-styles included or turn font-replacement off altogether.
[/left_col]
[right_col]
Custom Body Fonts
This brand new option in the control panel allows you to quickly flip between a “Serif” and a “Sans-Serif” font stack so that you have exactly what you need for your project. Additional tweaks can be made easily using a little CSS and the Firebug plugin if you so choose.
[/right_col]
[clear]
Superquotes
[superquote]
95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.
[/superquote]
Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic balance. Organizing blocks of text and combining them with pictures, isn’t that what graphic designers, usability specialists, information architects do? So why is it such a neglected topic?
Back in 1969, Emil Ruder, a famous Swiss typographer, wrote on behalf of his contemporary print materials what we could easily say about our contemporary websites:
Standard Blockquotes
Today we are inundated with such an immense flood of printed matter that the value of the individual work has depreciated, for our harassed contemporaries simply cannot take everything that is printed today. It is the typographer’s task to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him.
With some imagination (replace print with online) this sounds like the job description of an information designer. It is the information designer’s task “to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him”.
Macro-typography (overall text-structure) in contrast to micro typography (detailed aspects of type and spacing) covers many aspects of what we nowadays call “information design”. So to speak, information designers nowadays do the job that typographers did 30 years ago:
Integrated Shortcodes
Themeology comes jam packed with useful features, like shortcodes, custom admin options, several custom page templates, and more! This page will walk you through the basic shortcodes that come pre-installed and ready for action:
Shortcodes
Shortcodes are a cool feature in WordPress that essentially allows you to do some pretty incredible things by just inserting a “shortcode” into a page or post. Using Shortcodes is a breeze, just insert one where you want the relevant content to show up and, whallah!, it works like magic. Here’s a list of just a few of the shortcodes included in Themeology. Remember to replace any squiggly brackets “{” with square brackets “[", and for the shortcodes that require customization (like the donation shortcode), edit the information in functions/shortcodes.php. Enjoy these!
1. Related Posts
Related posts are an easy way to get your visitors staying longer on your blog. There’s tons of plugins to display them, but you can also use this simple shortcode and be in business in mere seconds!
{related_posts}
Source: http://blue-anvil.com/archives/8-fun-useful-shortcode-functions-for-wordpress
2. Multiple Column Content on a Post or Page
Just wrap the following shortcodes around a "left" and "right" column of content and the Theme will do the rest - whallah, 2 columns on one page or post!
{left_col}Your Left Column{/left_col}
{right_col}Your RightColumn{/right_col}
[left_col]
This is the Left Column
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
[/left_col]
[right_col]
This is the Right Column
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
[/right_col]
3. Google Charts
Including Google Charts into your posts and pages has never been easier. Just use this shortcode and fill out your own particular details and the chart will be posted automatically, like in this example:
{chart data="41.52,37.79,20.67,0.03" bg="F7F9FA" labels="Reffering+sites|Search+Engines|Direct+traffic|Other" colors="058DC7,50B432,ED561B,EDEF00" size="488x200" title="Traffic Sources" type="pie"}
[chart data="41.52,37.79,20.67,0.03" bg="F7F9FA" labels="Reffering+sites|Search+Engines|Direct+traffic|Other" colors="058DC7,50B432,ED561B,EDEF00" size="488x200" title="Traffic Sources" type="pie"]
Source: http://blue-anvil.com/archives/8-fun-useful-shortcode-functions-for-wordpress
4. Google Adsense Integration
Use this simple little shortcode to include Google Adsense directly into your pages and posts!
{adsense}
[adsense]
Source: http://www.wprecipes.com/how-to-embed-adsense-anywhere-on-your-posts
5. Premium Content for Members Only
You can offer premium content for registered visitors by using this shortcode on the premium content pages and posts!
{access capability="switch_themes"}
Source: http://justintadlock.com/archives/2009/05/09/using-shortcodes-to-show-members-only-content
6. Remove WordPress automatic formatting
Use this shortcode to display code snippets on your blog and remove that pesky WordPress automatic formatting on certain portions of text.
{raw}This is some unformatted text{raw}
Source: http://wordpress.org/support/topic/280732
7. Add administrative notes
Use this shortcode to leave messages on posts that can only be seen by other admins. The blog owner can now, for instance, make editorial notes on a post.
{note}This is an editorial note - only visible to admins!{/note}
[note]This is a personal note that only admins can see![/note]
Source: http://www.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/
8. Grab the last image in a post
Use this shortcode to display the last image in any particular page or post!
{postimage}
[postimage]
Source: http://www.wprecipes.com/wordpress-shortcode-easily-display-the-last-image-attached-to-post
9. Create a Send To Twitter button
Use this shortcode to send posts to Twitter, automajically!
{twitter}
Source: http://www.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/
10. Embed an RSS Feed
Use this shortcode to display an RSS feed directly in your posts and pages.
{rss feed="http://feeds.feedburner.com/MakeDesignNotWar" num="5"}
Source: http://www.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/
11. Embed an RSS Button
Use this shortcode to display an RSS button directly in your posts and pages.
{subscribe}
[subscribe]
Source: http://www.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/
12. Display your blog stats using shortcodes
Display all sorts of awesome information about your blog by installing this plugin and using these shortcodes:
{pagerank}
{feedburner_subscribers}
{alexa_rank}
{technorati_authority}
{technorati_rank}
{user_count}
{post_count}
{page_count}
{comment_count}
{trackback_count}
{avg_comments_per_post}
{category_count}
{tag_count}
{link_count}
{google_backlinks}
{yahoo_backlinks}
{delicious_bookmarks}
Source: http://www.improvingtheweb.com/wordpress-plugins/blog-stats/
13. Add a Donation Button
Replace the default ‘account’ with your paypal email address, and output using [donate]. Remember you can override the default ‘text’ too in the shortcode. You can style this link with css (as ive done) easily.
{donate}
[donate]
Source: http://blue-anvil.com/archives/8-fun-useful-shortcode-functions-for-wordpress