SWUFE Drupal

Free Learning, Free Resource, Freedom in Open Source

2012-03-24T00:00:00-07:00

Free Learning, Free Resource, Freedom in Open Source

24 March 2012 - Chengdu, China

I'm a big believer in open source software. Most of the code I write, projects I create and ideas that I'm conceptualized are contributed back somewhere online. I like to give back because I'm able to start with so much that's already been give by others. I mostly work with Drupal so most of this sharing are contributions back to Drupal: my Drupal contributions.

Yet, open source remains largely underused and highly misunderstood in China. I'd like to discuss some of the benefits of embracing open source as opposed to China's current "tradition" of pirated software and pirated learning resources.

Everything Online is (Already) Free in China

While it is true that any decent computer user can pretty much get all of their music and movies and even software for free online, this is especially easy in China. Someone outside of China who is looking for free stuff will likely be scouring the torrent space. Recent events have been made this somewhat more legally dubious but many people continue to get their sitcoms and mp3s freely online.

In China, free movies, MP3s and even software are even easier to get. No need for torrents. Just head over to China largest and most used search engine Baidu.com and you are already one or two clicks away from free music or movies.

Baidu MP3 provides a free search engine for finding music from which you can either listen to the songs via their player or download them to your computers.

Baidu Video lets you search for videos like you would from Google, except that it also links you to tons of free movies and TV shows. So instead of having to pay to view, you can just search and watch online.

(Note: China also has a thriving market on the streets or in various shops for buying pirated DVDs and CDs but in my experience, these are being pirated from these online websites.)

"Pirated for Free" Doesn't Equal Open Source Goodness

I think part of the reason why open source software is under utilized in China is the fact that since everything is already free, people don't really see the benefit in open source. For example, why would I use something that is free to everyone when I can use propretary software that is developed and supported by a large corporation like Microsoft?

It is interesting to note that when you buy a computer in China you are most likely getting a pirated version of Windows as well as pirated version of Word, Powerpoint and Excel. It is also worth noting that many servers in China use Windows (pirated, of course!) as opposed to Linux. Microsoft Windows is truly King in China.

One of the funniest things you'll see in China are the Apple Computers that use Windows. Chinese users want their various programs for watching free movies and in fact are much more used to using Windows, so they end up buying a MacBook Pro for the case since many end up installing Windows instead. Oh tragedy of tragedies...

For me, "Open Source Goodness" lies in the fact that if I want or need, I can peal open the inside of program or process and see what's happening. This is huge beneficial if you want to learn or tweak or just mess around.

The other aspect of open source that many people miss is that closed source, while on the outside appears safer since you can't see what it is doing, also means less people are watching. Closed source tends to be safe through obscurity as opposed to open source code which benefits from having more people watching. Open source code is more secure. It is safer because people are invested in the product as users, creators and business owners.

Free Learning, Free Resource: Freedom in Open Source

There is a lot more that could be added on this topic, but I think I'd like to end with a few tidbits of why Open Source makes me free-er:

Free Resources:

Open Source provides a ton of resources that Chinese users have yet to get. Open Office is one of many that can improve how we do things. Other examples include editing software like GIMP.

I find it saddening that Chinese users tend to think first about getting the free pirated version without once thinking about the various tools that exist in the open source space.

In my web design class, many people have turned to Dreamweaver when in fact there are dozens of free and open source that provide the same functionality.

Free Learning:

Once you've embraced software and languages that are open source, you'll notice that a surprising amount of learning resources are free too. It's still true that there are proprietary books and videos too, but most times you can find the information you need just as easily as paid resources.

-Mark

Building A Simple HTML Site with Github.com

2011-11-12T00:00:00-08:00

Building A Simple HTML Site with Github.com

12 November 2011 - Chengdu, China

I've got several Drupal 7-related lessons that need to be converted and added to our open source Github.com pages. I've been teaching Drupal 7 since September and using Drupal 7 since July but more heavily for the last two or three weeks. While there are still some lingering issues and bugs compared to the maturity of Drupal 6, I'm starting to see the power and increased flexibility that has come with Drupal 7. Anyways, this isn't a post about Drupal 7, but about how to create a simple HTML site via Gitub.com

While it is possible to get your own server and easily create an HTML / CSS site, it's fairly unlikely that anyone today would get a server just for those purposes. As I wrote in a previous post, Github provides you with a simple way to create primarily HTML sites. I'd like to briefly explain how to do just that.

Step 1: Getting Setup.

You'll need to have GIT working on your system and created and account on Github.com. If you're not sure what to do, read this previous post on getting GIT and Github.com set up.

You'll need to start by creating some HTML files, including an HTML file called index.html and another called 404.html. index.html will be the default page that loads when they go to the domain root like http://yoursite.com and 404.html will be what loads when someone goes to a page or URL that doesn't exist.

Hopefully you've spent some time creating and building some HTML files locally. If you need some starter files, checkout the repo on HTML and CSS Basics where you can clone and edit some basic files.

Now that you have 1.) GIT on your computer, 2.) a Github.com account, and 3.) some html files, let's create a simple HTML site with these files via Github.com's Pages.

Why not just use a simple http server? Why use Github.com for HTML pages?

It's obvious that this approach isn't for everyone, and requires you to learn a bit about GIT and Github.

There are a few special features to GIT pages, and it might be a good idea to read Github.com's official tutorial on how Github.com Pages work. For example, it's possible to create a organization or username site like you see with SWUFE Drupal at http://swufedrupal.github.com.

For our purposes, we are going to simply convert your github username and the repo into a live HTML site. So for example if your username is superman and you have a github repository name super-power-html, it will create a live site called: http://superman.github.com/super-power-html/.

The advantage of this approach over setting up a separate server and using FTP to upload is that it's free and frankly a lot easier!

Anyways...back to work...

Step 2: Push Your Code so it is displayed via Github.com Pages.

Now that we have everything we need, there are only a few additional steps to having a live HTML site.

ADAPT FROM HERE: http://pages.github.com/

-Mark

Geting Setup on GIT and Github.com

2011-11-06T00:00:00-07:00

Geting Setup on GIT and Github.com

06 November 2011 - Chengdu, China

As I wrote in a previous post, GIT is one of the most powerful version control systems today. It was originally created by and for Linux, but through sites like Github.com and several major open source projects moving to GIT, GIT version control is increasingly becoming one of the most used today.

I'd like to go over basic setup and basic GIT usage.

Getting Setup with GIT

Getting setup on GIT is relatively simple, but setup varies from system to system. Github.com has some great tutorials on getting setup on GIT and how to use Github.com for your version control:

I recommend following the above tutorials, but to repeat, there are basically only a few steps:

Install GIT
Generate your public SSH Key (this is how you verify who you are between your computer and your GIT repositories)
Add your public SSH Key to Github.com (or whatever GIT system you are using)
Create a test Github repository and follow the directions to test if it's working.
Profit!

Set Up Your Info

It's recommended to configure your personal name, username and email with your GIT on your computer so all your commits are connected with who you are!

Go onto your command line tool, Terminal and run these commands: $ git config --global user.name "Firstname Lastname" $ git config --global user.email "your_email@youremail.com"

Make sure you use your name and your email with the above commands.

Beyond the Basics: What is GIT? What are the basic commands?

GIT is version control system for managing files over time with a group. Basically, every time you commit changes to your files, GIT takes a snapshot of your files. These files are tracked over time and you can see what's changed. Files and programs manageed with GIT are easy to be fork (split into different branches) in order for you to make stable, staging, testing and development work with your files. Read more: http://progit.org/book/ch1-3.html.

Basic Commands:

$ git init // this initiates a directory as a git repository.
$ git status // this will check the change and commit status of files in your directory
$ git add filename // this adds a file to a git repository
$ git add . // this will add all files to staging
$ git commit -m 'commit message' // this will commit files and add a message.
$ git remote add origin git.xyz.com:xyz.git // this add a remote repository linked with your repository
$ git push origin master // pushes your committed changes from your master branch to the origin repository.

-Mark

Adding Favicon Icons on your website

2011-11-06T00:00:00-07:00

Adding Favicon Icons on your website

06 November 2011 - Chengdu, China

While a CMS like Drupal makes it easy to integrate lots of common website features, it's good to know how certain basic html functions are done. In this short, I'd like to present what a favicon is, how to create one and how to add favicons to a basic html page.

What is a favicon?

Basically, a favicon is a small icon you see in browser's tab when visiting a website.

"A favicon (short for favorites icon), also known as a shortcut icon, Web site icon, URL icon, or bookmark icon, is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page." Source: Wikipedia

Each browser handles the display of favicons slightly differently.

How to create a favicon

While there are multiple sites for download favicons, it's generally considered best to crate a custom favicon to match your site's logo. Depending on the complexity of your site's logo, it might be in impossible to exactly create a small sized version.

It's possible to create favicons using an editor like PhotoShop, but there are also multiple sites for helping you create one too.

One of my favorite websites for creating a favicon from an existing image or logo is: http://www.favicon.cc/.

Adding a favicon on your website

There a couple ways to add a favicon to your website, including just adding the file as favicon.ico in the root of your website directory. The most common way to add though is in the header of your html page, above the body tags. You add in the same you would add css or javascript.

Here is the code for adding a favicon:

So once you've added your favicon in the root or whatever directory, just make reference to it in the header in the href.

I hope this helps you make a million dollars!

-Mark

Adding Website Analytics from Google

2011-11-03T00:00:00-07:00

Adding Website Analytics from Google

03 November 2011 - Chengdu, China

For the first two posts, I went over some basics about GIT and Github and a web service called Disqus for adding comments to your site. In this brief post, I'd like to explain how to start collecting visitor analytics to your site using Google Analytics.

While we may worry about the benevolence of it/their actions, Google provides an amazing amount of web services for the Net today. From search to email to YouTube videos, it's almost scary how much of the internet flows through Google's pipes. One of the most basic tools for any website builder or web developer is site analytics.

What is Website Analytics?

Website analytics are all the numbers related to people coming and going on your website. It's all the statistics about how visitors got to your site, how long they stayed, what pages they stayed on the longest and even specific info about the visitors themselves (their location, computer or device and language). This data is important in building and learning about what works and what doesn't on your site or project.

And frankly, it's really cool from time to time to see who's going to your site and which pages they like the most.

How to Add Website Analytics with Google

While there are other options for website analytics, Google provides arguably the best service.

So, to add Google Analytics tracking to your site, head over to the main site and sign in with your Google account.

Once you are signed into your Google Analytics account, create a Google Analytics profile for your site. Then copy the entire code that it gives you and copy into the footer of your site.

Then site back and enjoy all the wonderful data that will hopefully be arriving soon.

Don't it's not stalking, it's studying your "users!"

-Mark

Adding Easy Comments with Disqus to Github pages

2011-11-02T00:00:00-07:00

Adding Easy Comments with Disqus to Github pages

02 November 2011 - Chengdu, China

In my first post, I wrote about how great GIT and Github.com were as resources as well as how the fact that I was using the Github Pages functionality to create a simple yet dynamic site. More or less, this entire setup uses fairly simple html and css as well as a couple adapted tweaks to provide a list of our github.com repos.

Since this site doesn't use a database, the real engine from the dynamic rendering the site's content is Jekyll, which is, to quote, "a simple, blog aware, static site generator." Quite simply it is a simple Ruby Gem that takes the site's template directory (in our case /_layouts) and runs it through Markdown and converts it to static web content.

Markdown: Clean, Readable Text + text-to-html filter

If didn't know already, Markdown Syntax is a simple text format that is "intended to be as easy-to-read and easy-to-write as is feasible." HTML is quite clunky with all the tags and formats. It's effective for building the framework of a site, which is essentially what the template layer is, but html is very nice to use when you just want to write. It's also quite ugly to ready.

At the same time, a full WYSIWYG editor with a program like Word or a javascript embedded editor like CKEditor is really convenient either. While they provide fully decorated text, they either create large files (=Word) or clutter and unreadable HTML (=javascript WYSIWYG editors). Markdown is basically clean text. The .mdown or .md files are really easy to read in any text editor, even without any styles added. Writing with markdown is easy too (and a bit addictive in a way). On teh technology side, the markdown processor basically converts line breaks and a few simple punctuations into basic html via a text-to-html filter.

This basic HTML output can then be stylized with css, which hopefully this site has by now. But depending on when you are reading this or how lazy or busy I am, it's quite possible that the current site isn't particularly beautiful (yet!). I do teach web development and design so I should be working on that.

Disqus: Using a third-party commenting system

The only problem with this blogging setup is that it doesn't provide a way to add comments. Fortunately there are several web services that let you use their system for adding comments. The other bonus is that your site doesn't have to worry about handling logins, since these comment services let you have a single login or shared login from sites like Facebook or Google. Anyways, one of the best and most commonly seen on the Net is called Disqus.

After creating a site-specific account, Disqus gives you a bit of javascript to embed and suddenly all those dynamically rendering but static html pages can now have comments. Whoa!

While there are still some tweaks to figure out (like how can I better add photos) with this setup, it's a pretty amazing, developer-oriented way of doing things. Github rock on!

-Mark

P.S. -- If you looking for some extra homework, add a feed for your site via http://feedburner.com by linking to your atom.xml's location.

Building Our Github.com Pages for SWUFE Drupal

2011-11-01T00:00:00-07:00

Building Our Github.com Pages for SWUFE Drupal

01 November 2011 - Chengdu, China

Today I decided our Drupal Github Organization needed some Github Pages!

Next week I'll be giving a lesson on GIT and Github.com to my Drupal students. Github.com has been one of those amazing coding discoveries during my last year or so learning to build, code and program with Drupal 6 and now Drupal 7.

Github.com is an amazing social space for sharing your code! There are now several major open source projects that use Github.com for their work.

As Linux developers figured out, previous version control systems were limiting in the way they handled code and changes. GIT was created to be the answer to making coding easier and better together. While GIT has several advantages over other systems (let's save those details for later!), initially GIT was mainly just for Linux development. It was Github.com (and a few other other free GIT sites) and its creators who were the initiators in growing the use and popularity of GIT version control.

Basically, Github.com offers free GIT repos for any free and open source project. It's just GIT version control, but teyond that, Github looks cool and works extremely well and has added several usability additions like wiki pages and issue queue.

One of the most powerful Github.com features is how easy it is to fork a project, make changes and then, if the changes are important ones, send a "pull request" back to the original repo. If those changes are good ones, BAM! the maintainers of the main project can accept your changes into the main repo. WOW! Social coding just got better.

Today, while I was doing some work on other projects for my Drupal class, I took a look at one feature I hadn't tried before: Github.com Pages. Basically, it's a git repo that you can convert into an html site. Or, if you want, use Jekyll to create a dynamic site or blog like this one!

-Mark