Learn to build a sexy website!

Learn to code

I am going to be co-teaching a course soon, titled “Learn to build a sexy website” with Andrei Pop. It’s going to be offered online, on Matygo and it’s going to be kick-ass.

 

So why am I teaching a course despite the hecticness of my imminent move to New York

  • Matygo is an awesome company run by awesome people. I think that their model is definitely going to be step in the right direction for education and I want to be a part of that.
  • Programming is not a mystical force, it’s just a skill that can be learnt and the world will be better off if more people understood it.
  • I’m tired of making websites for people who are smart enough to make them for themselves :P.
  • I spend so much time mouthing off about better ways of teaching and learning that it really is time I put my money where my mouth is and do some teaching myself.

 

The next question I guess is what is this going to look like?

The course will run for 6 weeks. It will be taught in Matygo, which has some elements of an LMS (without many of the downsides). It will be limited to 9 participants, as the live, interactive parts will happen on Google Hangouts.

Hangouts will happen at  7:30 to 9:00 PM on Tuesday evenings starting on October 27th.

 

After the 6 weeks, if you complete all the course material that you will be able to build a great website in WordPress and have a deeper understand of how the internet works and be able to write and hack basic programs.

 

So if you want to learn to code (and hang out with me online over the next 6 weeks) go check out the course page!

Guest post: We help you learn better

I wrote earlier about how one of my projects for the summer is to improve the UBC Learning Commons website. Sam Wempe, one of the brilliant students on my team wrote a post about what we are trying to achieve, where we have come and what we still have left to do.

Below is the article that he wrote, originally published on the Learning Commons site:

[divider_padding]

This summer, myself and a team from the Chapman Learning Commons have been working on an epic endeavor; nothing short of a website that helps students learn better. As with any website, the first hurdle is actually getting users to your site, followed by the equal challenge of providing information in a way that is not only engaging but useful.

The current site is a goldmine of resources thats has grown enormously over the years; however, student feedback has shown that this growth has made many of these resources hard to locate or take advantage of. Based on these responses, we focused on three inter-related issues.

Navigation

so many menus! so many layers!
so many menus! so many layers!

As a result of the large amount growth the site experienced over the years in an attempt to become a one-stop shop on campus, the content outgrew the organizational structure. Due to the challenges that existed in making a website 5-6 years ago, this made perfect sense as there was very little UBC content online. Luckily, by May of this year, many of our partners have developed quality websites themselves, giving us the ability to concentrate on building a solid site centered on the student academic experience.

Remedies

  • 2 clicks or less intuitive navigation: done through condensing and renaming menus, reducing the amount of potential pathways down to just a few, very logical ones. The design aspect below was also crucial to this.
  • Trim the fat: cut out as much content as possible that does not relate to improving your academic life. For example, if someone happened to be interested in abroad opportunities, they would be referred to Go Global’s own website; as opposed to trying to maintain this content ourselves. This makes the site leaner and more efficient.

[divider_padding]

Visual

One should also know the point of a website by just glancing at it. If a user likes a site’s main feature, they are more likely to stick around and look into other resources; something seriously lacking in the current site. Text-heavy pages scare away users, overly busy sidebars distract and constrain the content and providing users as many navigational options as possible created too many moving parts and points for confusion – all these needed to be refreshed for 2011 and beyond.

concept of new learning commons site

Remedies

  • Break up content pages: elimination of large blocks of text and utilization of ample forms of digital media, such as youtube videos, slideshare presentations, podcasts, etc.
  • Dropped the sidebar: to free up more digital real estate on the page for content and moved any crucial bits to the bottom.
  • App-Like carousel and landing pages: use the front page carousel to highlight the most common reasons someone would visit the website. Currently this is used to highlight current or upcoming events (which confused the mission of the site, according to student feedback); this has been moved to blog-like feed just below the ‘Welcome to the Learning Commons Banner.’ While the landing pages act as visual launchpad to the various resources within the heading.

[clearboth]

[divider_padding]

Engaging and Interactive Content

There are incredibly valuable resources on the site which took an immense amount of work and research to put together. The problem revealed through the navigation and visual aspect, was that this content was both hard to find and hard to get through. Reading lots of text is no fun, but try getting a stressed, time-pressed student to read five pages on time management; much less find the time to do so! Yet, the transfer of these skills is precisely what the site is about, striving to make exceptional accessible content for all students, by students.

prototype for time management toolkit

Remedies

  • Vegetables hidden in the dessert: ‘toolkits’ were designed to be interactive, self-reflective, do-at-your-own-pace tools to learn skills, figure out an action plan and provide connection points to the variety of in-person resources, such as peer-academic coaching or the writing centre.
  • Accessible to all students: provide resources that are useful for all types of learners by including relevant videos, podcasts, software, print-outs and interactive activities.

PLEASE HELP US!!

Current Websitehttp://learningcommons.ubc.ca/

Prototype Website: http://learningcommons-redesign.sites.olt.ubc.ca/

The Learning Commons is meant to be an evolving project, grounded in feedback from our partners and students alike; we need your help! A few issues in particular we are struggling with:

General Navigation:

how do you find it moving between pages, not just navigation from the home page? Does it seem intuitive or confusing?

Headings and Categories:

We have three main categories that most of our content now resides in. Naming has been one of the biggest hangups, as the more popular headers tend to cause the most confusion about what content exists under them.

What we offer, for services and resources available to students, especially those available in the CLC. This has come across as the most solid heading.

Student toolkits for the interactive skill-building tools. Other options include:

  1. Become a Better Student
  2. Strategies for Students
  3. Learning Strategies
  4. Learning Secrets

Which option are you drawn to? The issue here as that this needs to come across as helpful without sounding remedial. Meanwhile, it has to be narrow enough of a definition to not confuse users as to where content should exist.

Beyond the Classroom as our main referral page to academically enriching opportunities, such as studying abroad, service learning, student directed seminars, etc. Other options include:

  1. Involvement
  2. Enhance your degree

Do these names and definitions makes sense? Particularly, are these headings so broad that you would have trouble placing what goes where and is there too much potential overlap?

Building pages around content, not fitting content into pages: this is where the raw information on the site exists. Using the wider pages offered by dropping the sidebar, we have tried to divide up the content that would make the most sense for the subject; instead of a standardized layout across all content pages.

  1. Take a look at a few different content pages (link, link link). does the idea of breaking up content make information easier to find or understand? Or would more standardization in layout be better?
  2. Consider how are current site lays out this content (link & link).
  3. The end result could be more of a hybrid, selecting one way of dividing up content (question 1), but using that layout arrangement for all the content pages.

Toolkits: go through our prototype time management toolkit. Tip, be sure to hit the print button after you’ve filled in the questions!

  1. Do you know where to start?
  2. Is the rest of the content on the page below the slideshow / reflective questions useful or necessary?
  3. Do you find the toolkit useful? Is this something that could help you manage your time better?

Glaring absences:

is anything missing from our previous site or from what you would expect to be here?

Any and all feedback is welcome in the comments section, on twitter, facebook or by email (peer.assistants@gmail.com)

Themes – A personal journey

Twenty hand

My site has gone through a lot of them changes over it’s history. Even though one of the bloggers that I admire most (at least before he went off the deep end) disagrees with theme changes, I feel that creating and changing my themes has allowed me to flesh out my ideas around aesthetics as well as my sense of self and personal style. I started university believing that I had no artistic talent whatsoever and have slowly come to realize that I just never spent any time developing it.  I treat my theme as a personal journey, it showcases my knowledge, ability and feelings at a given point in time and allows me to show everyone in a visual way when those things change by updating my theme.

So although I’ve lost a few of the steps along the way, here is a subset of the themes I’ve hacked along the way…

New Theme: twenty-hand

I’ve been unhappy with my theme for the page few months and not had the time to change it. I’ve finally got around to doing so and at the same time have played around with some WordPress 3.0 goodness. Here are some of the features:

  1. It’s a child theme of the new WordPress theme twentyTen.
  2. It’s much cleaner than my old theme.
  3. It uses the new wp_nav_menu system. The 7 menus that I add are the 7 menu items at the top.

Continue reading “New Theme: twenty-hand”

Theme Update

FINALLY. Wow, that took me way to long to get done. So, as I promised in this post here, after many late nights, I have implemented some major changes to the theme of this blog. So for all those behind the feed readers… leave the reader for a bit and click around. Let me know what you think. I spent a lot of time on various elements (including some that I ripped out due to lack of patience) so any feedback would be awesome. Below is a picture of the old home page for comparison (click to see fullscreen):

Screenshot of old theme
Screenshot of old theme

Some features to note are:

  • Snazzy JavaScript slider. Why? Lets me show pictures without taking up too much space. One of my goals for this year is to learn to actually draw well in Illustrator and as is obvious, I have a long way to go and need a place/reason to practice.
  • Proper archives page using the awesome wp_archives plugin. I can’t think of a better way to browse archives (aside from tags maybe). The default WordPress way of dates is stupid… they just have no context. One way in which I might change this page in future is modify the plugin so that I can annotate dates around important events in my life.
  • Social Networks page. This has snippets from other places around the web that I haunt. I’m considering changing it in the future to be a bit of a life-stream, but am holding out for someone to come up with an exceptional plugin to make that happen.
  • Better fonts.
  • More pictures!

Again, let me know what you think in the comments below, any feedback is always welcome.

Reblog this post [with Zemanta]

New content

So I finally got around to adding the stuff that I had planned to include on this site months ago (even though I probably have less time to do it now than ever)! The sections that previously said unknown now include a sparkly new resume and a mathematically challenging contact form. About time.

TiddlyRésumé
Creative Commons License photo credit: psd

Swurl, get your act together!

I really, really want Swurl to be something useful. For those who do not know what Swurl is,  is a lifestreaming app that does a beautiful job of displaying all of your internet activity in one place. The timeline view of Swurl is facinating, it really does a great job of visually representing your online life in a pretty calendar. I find myself taking pictures and uploading them, just to make my Swurl look prettier. Not only does Swurl do a good job of displaying your life, but it also discovers your friends in other social networks and keeps a list of them for you to view their activity… zero work is needed on your part.

So what is the problem?

Swurl doesn’t give you a way to take things out of Swurl. Yes there is an RSS feed… but any lifestreaming app has that. What makes Swurl brilliant is not its ability  to aggregate your life… it is Swurl’s ability to make it visually stunning. Swurl provides no mechanism for taking that great visual feast and putting it in your own space. I guess their intension is for you to turn your Swurl into your primary web presence… but for those with established blogs (which is something that is highly likely for their primary audience of early adopters) the idea is laughable. 

I think that in order for Swurl to not get lost in the infinity that is the Internet it needs to provide a way for users to bring their beautful Swurl content into their own spaces, through embed code, or badges… or anything that works really.

Until that day comes though I guess I will have to be happy with links and being the only person who ever really sees my Swurl.

My Swurl: http://andremalan.swurl.com/timeline
swurl.JPG

WordPress as a CMS… Advanced Navigation

Wordpress
Creative Commons License photo credit: drustar

One of the things that is starting to happen at OLT is that we are creating an increasing number of WordPress based websites. Using WordPress as a content management system is not a new idea at all, there are a ton of examples out there of WordPress blogs out there that have been turned into sites. There is however, a dearth of information out there on how to do it (there are some out there… including some in amazing detail from Alan Levine).

One of the things that I couldn’t find was a stable way to create a second level navigation that stays constant for every top level section. The problem with most of the solutions on the forums and sites around is that as soon as you drill down to the third level of navigation the second level disappears. As you can see at aboriginal.ubc.ca I was able to come up with a way to keep the navigation constant. Here is the loop that I had to create:

<?php
$secondAncestor = count($post->ancestors) -1; //figure out what level of navigation we are on, subtract one because we don't want to consider the top-level
if($post->post_parent!=0) //if the page is not a top-level category
{
echo '<h2 class="widgettitle">In this section:</h2><li class="sidebarlist">';
//the following lists children of second level ancestor of the current page.
wp_list_pages("title_li=&child_of=".$post->ancestors[$secondAncestor]."&    sort_column=menu_order&echo=1");
echo '</li>';
}
else //if the page is a top-level category
{
//listing only the child pages of the current section
$children= wp_list_pages("title_li=&child_of=".$post->ID."&  sort_column=menu_order&echo=0");
if($children) //this will stop it from displaying a section heading if there are   no elements in the section (for example on the home page)
{
echo '<h2 class="widgettitle">In this section:</h2><li>';
echo $children;

echo '</li>';

}
}
?>


This is the first time I’ve blogged code, I’m not even sure if it is readable… but here’s hoping. Basically I figure out what level of navigation the user is on and then list the pages of the current page’s ancestor… that many levels up (subtracting one for the top level navigation.

I am currently doing a lot of work on using WordPress as a content management system including coming up with plugins and modifications for using WordPress MU as a multi-site manager used purely for websites and not for blogs. Will blog it all once everything is stable and working.

Zemanta Pixie