Blog - JoomlaWorks - JoomlaWorks

Simple Image Gallery Pro version 3 and a new design approach for our components

nospam@joomlaworks.net (Fotis Evangelou) — Thu, 07 Mar 2013 19:12:38 +0200

2013 is bringing a lot of new cool things from the JoomlaWorks labs. New extensions that we hope will redefine essential functionality within any Joomla! site and lots of updates to our existing line of extensions, like K2, Frontpage Slideshow and Simple Image Gallery Pro. The latter will now become a "component based" extension (from just a plugin) to allow content managers to easily create and edit image galleries and their captions for K2 and any other extension within Joomla!.

We've always put user friendlyness and ease of use above all when building our extensions. At least up to what's possible for any type of extension. Simple Image Gallery Pro was great (and still is) as a plugin that allows you to zip a bunch of files and quickly transform them to an image gallery grid. It's no wonder why the free version is one of the most popular extensions in the Joomla! Extensions Directory for many years now. People hate to use tools that take more time to deal with than the actual content they're producing. If it takes you more time to upload a gallery than shooting the actual pictures, then there's a problem. And unfortunately, many gallery components in the Joomla!sphere simply fail to deliver what they promise.

In the upcoming version 3 of Simple Image Gallery Pro (due out in a few weeks) we aim to redefine "simplicity" once more, but this time offering a lot more control. People want to be able to just drag and drop a bunch of images to their browser (instead of zipping them), quickly add some captions (labels) and publish their gallery into a K2 item, Joomla! article, Virtuemart/redShop product or other extension. And that's what the new Simple Image Gallery Pro delivers, while still maintaining full manual control over your galleries via FTP. Sounds great? Well... it is!

What you'll also notice in the screenshots below is that Simple Image Gallery Pro's backend is very different from traditional Joomla! component backend design. That's because with the launch of Simple Image Gallery Pro version 3, we're also launching our new design approach for our components. More usable, faster to work with, more productive. It's true that Joomla!'s backend design hasn't really evolved much, even with the launch of Joomla! 3. And building components that work on Joomla! 2.5, 3.0 and future versions or even older ones like 1.5, means you end up with products that look a lot different. This is bad in many aspects, but it's also becoming boring for us and our customers to use. Yes, Joomla! is a bit boring in terms of user interface and it's definitely not the best in terms of user friendlyness. We aim to change that.

As you'll notice in the screenshots below, we simply *don't* want the user (newbie or experienced) to think too much before using any of our components. We want the user to sense a "user interface familiarity" and start working in a matter of seconds. We also don't want to have dull/boring designs anymore. We work with Joomla! daily and the tools we use should be functionaly and aesthetically pleasing. People managing some of the biggest Joomla! websites in the world usually work on K2 for 8 or more staight hours a day. Can we make K2 more functional and more pleasing to the eye, so the whole process of actual "content management" becomes more enjoyable?

Of course we can. We just have to divert a bit from the current "Joomla! UI guidelines".

For starters, we don't need to show the user buttons that they simply cannot click without first selecting at least 1 item in a classic row of data. Why should we always show the "move" button (e.g. for K2 items) when a user would only need to see this button if he clicked one or more items? Likewise, we can organize filters that have 2 possible values only (e.g. sort a list by date created ascending/descending) altogether, saving lots of space for the content the user sees and manages. As you may have noticed already, device screens are shrinking, instead of growing. Tablets are now selling more than PCs. So by providing more "real estate" for our content, we make managing that content a lot easier.

Our components' new backend design will be responsive by default, even on Joomla! 2.5's backend which is not responsive...

Additionally, we've re-thought elements like the component's menu. Does it really have to divide each backend view controls for the actual content? See how browsers changed the placement of their tabs (above everything).

We'll provide more insight for our new design approach as we release updates and new extensions throughout the year.

SocialConnect - a new Joomla! extension for better social reach & user engagement

nospam@joomlaworks.net (Fotis Evangelou) — Tue, 19 Feb 2013 15:25:47 +0200

A few days ago we launched SocialConnect, a new kind of social extension for Joomla! which we plan to extend over time to become the no. 1 integration hub for social networks for your Joomla! site.

It's part of our "masterplan" to redefine what we consider basic functionality for any Joomla! site. It started with K2 and now it's moving deeper into more specialized areas. SocialConnect is an extension that -as with all things made by JoomlaWorks- came out from a real need. And it was tested extensively for more than a year on the K2 Community, before being publicly released.

In this first version of SocialConnect we wanted to redefine the entire user engagement process.

Let's face it, the user login/logout process in Joomla! is problematic. It's not problematic in the sense that it doesn't work. It's problematic for a "user experience" aspect. These user forms are the ones that always require the most "inventiveness" from the web designer. You can have a website that spans across 1000 or more pixels and yet your user login page, a page which should give incentives or explain a couple of things to your potentials users on why they should join your eshop or forum or whatever community is just 2 input fields and a submit button in the middle of the page.

We believe this can be improved in 4 ways: a) Allow the site administrator to display brief notes on why someone should join their site and what benefits they get (if any), b) provide clear options to login or sign-up, c) allow a visitor to use their favorite social network to instantly login and become a member of your site without the need to remember one more set of login credentials and d) give your user a dashboard, a starting point for your site's activities or services.

These may seem trivial to some, but various UI/UX studies and reports have shown that many websites lose members/customers on "hello". By combining common sense with a clear/minimal and easy to adapt on any template user login/logout/dashboard layout, we hit 4 birds with 1 stone. And to make it even easier for web designers, we already provide 3 different layouts for your login page and 2 for your user module. These layouts are built to be generic so in 95% of websites, you probably won't even have to adapt the CSS overrides of the extension.

In version 1.0.0 of SocialConnect we also integrated social login for the top networks worldwide: Facebook, Twitter, LinkedIn, Google (and therefore Google+) and Ning. If you haven't heard of Ning, that because it's a "white-label" Facebook. You can't tell a community runs on Ning unless you view the community's HTML source code. But Ning currently powers hundreds of thousands of communities worldwide and it's provided as a cheap hosted service for what it offers. If you never opted for a self-hosted solution for your community or forum for various reasons (from spam to server performance and so on), Ning is a great platform to build your community on. And with SocialConnect you can easily authenticate your Ning community's users to your site.

In order to integrate these social capabilities to your Joomla! site via SocialConnect, all you need to do is create an "app" on each social network that is actually your site. That way you get the required authentication keys which you then enter into SocialConnect's component parameters. You don't need to activate all social login options. But the more you provide, the more you open your site to potential users from these social networks. For details on setting up each network, just download the PDF document we prepared for SocialConnect on our documentation section.

Any Joomla! site that uses SocialConnect can now allow its users to log in using some of these popular social networks. Wouldn't it be great to also see who's logging in and from which social network? This is where the SocialConnect backend module comes in. It not only provides you with detailed login details per network (and Joomla!) but it also provides true "working" counters on the maximun number of people browsing your site at the time. So you not only get to see who's logged in and from where, but you also get a complete view of how busy your site is at a given moment.

So what's next?

The initial response was very overwhelming. In fact we sold a lot more licenses than we initially anticipated. Which is a good starting point :)

Our plans for the coming updates of SocialConnect expand to more than just a better user engagement. Of course we want to add more social login options (Yahoo!, Github and possibly Wordpress.com) and more 3rd party integrations (one-way login from SMF or phpBB forums - yes, you can forget about weird bridges between your forum software and Joomla!). But we also want to provide the integration of various important social widgets, e.g. Disqus & Facebook comments for K2, Joomla! articles and other extensions. Twitter feeds which you can actually blend with your design - now that Twitter is killing its public API and moving to closed "app" like widgets only. Or "auto post" features for K2, Joomla! articles and other extensions, so you can share on your social networks a blog post or product when it's created in the Joomla! backend (no more RSS to social sharing services). And actual "user pages" (much like what K2 does now) but integrated with other Joomla! extensions. E.g. a user page with their latest K2 items and Kunena forum posts (we love Kunena as you might have guessed!)...

We've already had requests for passing some of the social details we retrieve to other extensions like Kunena (it's already on our to-do list), JomSocial (still evaluating due to recent ownership changes), Community Builder or even e-commerce extensions like Virtuemart and redShop. Or ways to migrate from JFBConnect to SocialConnect. We're evaluating all these requests and we'll keep our users posted as we release new updates for SocialConnect.

Our goal is to make SocialConnect the integration hub for "everything social". So you don't waste time setting up various online services here and there just to maximize your site's "social reach". Just bring everything inside Joomla!.

Resizing the disk space on Ubuntu Server VMs running on VMware ESXi 5

nospam@joomlaworks.net (Fotis Evangelou) — Sun, 09 Sep 2012 14:37:00 +0300

We generally do both dedicated and VPS hosting for our websites, apps and some premium projects we run for others.

When we choose to have VPS servers (aka virtual machines or VMs for short) instead of dedicated servers, we usually opt for VMware's free ESXi 5 and install Ubuntu Server as the OS for the VPSs we create on top of ESXi 5. It may not be as friendly as some VPS providers like Amazon, Rackspace etc. but you got more control and it's on YOUR hardware (pretty important actually!)...

Now, when you build a VPS on VMware, you start with say 40GBs of hard disk space. You install the OS, setup the server, move the sites on this new server and you're on. But what happens when there's no more room on the server for your site or sites and you need to add more disk space?

The process is quite simple:

a) Connect to the VMware ESXi 5 server using the vShpere Client. Edit the VM's properties to increase the hard disk size (VM has to be off) - I won't get into details on that, if you have the experience on managing ESXi you know what to do... I'm assuming the process is the same for ESXi 4. Now restart the VM.

b) Login via SSH to the VM and follow this process.

- First list all partitions:
$ ls -al /dev/sda*

- Create new partition using fdisk:
$ fdisk /dev/sda
Then:
    type p - to list all your partitions
    type n - to create a new partition
    type l - for "logical"
    then give it a number (e.g. if you got 2 partitions listed as /dev/sda1 & /dev/sda2, for the new partition simply type "3" to create /dev/sda3)
    type t - to change the partition type to "Linux LVM"
    provide the partition number you previously created
    type 8e - for the "Linux LVM" type
    type p - to list the new partition table
    type w - to write changes and exit

- Reboot server:
$ reboot

- Assuming you created partition /dev/sda3, let's now create the physical volume in that partition:
$ pvcreate /dev/sda3

- Now let's extend the server's Volume Group to that physical volume.
$ vgdisplay
This will give you the info on your current Volume Group. Note down the entry next to "VG Name". That's your Volume Group name.

$ vgextend EnterVolumeGroupNameHere /dev/sda3

=== IMPORTANT NOTE [start] ===
If you get a message saying /dev/sda3 could not be added to your Volume Group, you need to remove the physical volume and recreate it. Metadata might have gotten corrupt and thus the volume cannot be added to your Volume Group. So just do:
$ pvremove /dev/sda3
And then again:
$ pvcreate /dev/sda3
=== IMPORTANT NOTE [end] ===

- Since we're (essentially) extending the main logical volume, let's get the name of that:
$ lvdisplay
and note down the entry next to "LV Name". This is your logical volume's name (e.g. /dev/srv/root), which you'll now extend to the newly added partition/physical volume.

- Extend the logical volume by X GBs:
$ lvextend -L +XG yourLogicalVolumeName

Make sure you replace X above with the actual number of GBs you've added in your VM's settings. So if you increased your VM by 20GBs, the command becomes:
$ lvextend -L +20G yourLogicalVolumeName

- Finally, let's resize the file system to the new allocated space:
$ resize2fs yourLogicalVolumeName
(this may take some time depending on number of GBs added to the file system.

- Check the new file system sizes:
$ df -hT

You should now see an increased disk space for your primary logical volume.

- Reboot and you're set :)

How to create a zip file of all Google Web Fonts on a Mac

nospam@joomlaworks.net (Fotis Evangelou) — Thu, 16 Aug 2012 20:24:00 +0300

As you may know by now, Google does not offer one simple way to download all the fonts from the Google Web Fonts website.

If you got a Mac (or Linux box) the process is quite easy. And here it goes...

STEP 1
Install Mercurial for Mac. Grab the latest package from http://mercurial.berkwood.com/
For Linux, installing Mercurial depends on your Linux flavour. For example, on Ubuntu it's a matter or running "sudo apt-get install mercurial".

STEP 2
Open the terminal app and execute the following:

$ cd ~/
$ mkdir GoogleWebFonts
$ cd ~/GoogleWebFonts

The above commands will create a folder called "GoogleWebFonts" at the user's folder.

STEP 3
Let's grab the initial repo (do this only the first time you setup this whole process). Still in the terminal, execute the following:

$ hg clone https://googlefontdirectory.googlecode.com/hg/googlefontdirectory

This command will retrieve the entire Google Web Fonts repository (around 2GBs at the time of writing) inside this "GoogleWebFonts" folder we previously created. It may take from a few minutes to over an hour to download these files depending on network activity and your internet connection speed.

STEP 4
Now let's grab any font updates and zip everything to a handy, clean of irrelevant files, date-marked zip file. At the terminal app, execute the following:

$ cd ~/GoogleWebFonts/googlefontdirectory
$ hg pull --update
$ cd ..
$ find . -iname *.ttf -print | grep -v "src" | zip GoogleWebFonts_$(date +"%Y%m%d").zip -@

The above process will create a file called e.g. GoogleWebFonts_20120816.zip (if we run this process on Aug 16th 2012). The file generated at the time of writing this tutorial was around 70 MBs.

Now you can just drag and drop the fonts directly to the Mac "Font Book" app or to make it dead-simple (and cooler of course) extract this zip files inside your ~/Library/Fonts/ folder using this command (if the produced zip file was GoogleWebFonts_20120816.zip):

$ mv ~/GoogleWebFonts/GoogleWebFonts_20120816.zip ~/Library/Fonts/
$ cd ~/Library/Fonts/
$ unzip GoogleWebFonts_20120816.zip

Enjoy!

Joomla! forks you may have never heard of

nospam@joomlaworks.net (Fotis Evangelou) — Sat, 01 Oct 2011 19:08:00 +0300

As I was cleaning up my bookmarks today (they've reached around 5MBs!), along with some Joomla! gems and memories, I found a list of Joomla! forks I kept...

I bet you never know those existed. Some are still active, some are dead. Check them out...

And in case you don't know where this all started, check Mambo.

Cloud.com, recently acquired by Citrix for $250m is running on Joomla! & K2

nospam@joomlaworks.net (Fotis Evangelou) — Tue, 12 Jul 2011 17:53:00 +0300

I'm really proud today for our K2 project.

I'm proud for 2 reasons. First of all, K2 is used by one more big company. And it's not just any company. Citrix/Cloud.com are top at what they do. Secondly, it's because Cloud.com just got acquired by Citrix for a whopping $250 million deal.

It's probably the first ever acquisition deal we've ever heard of that magnitude that one way or another involves Joomla! in. And not just that, K2 is at the heart of Cloud.com :)

Check out their site: http://cloud.com

"Getting serious" with Google Analytics event tracking - know your users' behavior

nospam@joomlaworks.net (Fotis Evangelou) — Fri, 03 Jun 2011 18:11:00 +0300

A couple of months ago I stumbled upon a website in which the source code included some funky tracking events of Google Analytics (GA) inside the site's links... To be honest, I didn't know at that point Google Analytics could be extended like that, so I dug deeper to learn more.

If you're not an SEO expert using buzzwords like ROI, SEM, CPR etc., you're probably using GA for browsing page views, visitor count, browser percentages etc. Turns out, GA offers at a "basic level" the option to track unique events on your website, e.g. a click on a link or a file download. Which makes statistics viewing way more interesting...

Consider this simple example: getk2.org has around 20 links that rarely change. I wanted to know how many people download K2 from this particular website (and not some third party source), how many people click on the documentation, how many get the SVN version of K2 and so on...

Having read the manual over at GA help, I came down to some basic event tracking usage with GA on getk2.org. The goal was to see for the first time how users "behave" inside getk2.org and not just how many come in. GA event tracking organizes results in this manner: Categories, actions, labels. That translates to specific "pages" (or some entire section in your site, e.g. Sports news), things that we anticipate users to do (e.g. click on a link or download a file) and finally, names of the actual links being clicked (e.g. "K2 main file download"). If you're not lost, bare with me for a sec...

First off, I only wanted to track the K2 homepage (getk2.org) so I used 1 "category" in my events: "K2 Homepage"

Secondly, I divided my anticipated "behaviors" (the "actions" in GA lingo) into just 2: visit (for links) and download (for file downloads).

Thirdly, I labeled all links to be tracked in a way that makes sense to me... So the K2 download button is labelled as "Stable release". I don't need to mark it as "Stable release download", because I've already assigned to that link the right "action" (Download).

So I prepare these "onclick" JS events, to add them into my homepage links... well, the most important ones... And I let GA track those event for around 2 monts...

To give you an example of such an event:

1	<a href="http://domain.com/about.html" onClick="_gaq.push(['_trackEvent', 'My homepage', 'Visit', 'About Us']);">About Us</a>

Now I come back to GA and go (on the left sidebar) to Content >> Event Tracking and I can see how my visitors behaved... Well, here's a surprise! I didn't know so many people where downloading the SVN release! Needless to say, the results where very encouraging! I won't go into detail, but it's worth trying this on your own.

If you want a solution that hooks up GA tracking events in Joomla, I can't say I know any specific... If you do, please let everyone know in the comments.

But it should not be difficult to implement these events, e.g. in K2 attachment downloads or in other components... Maybe a plugin could also attach such events using JS automatically onto any link that is a file (e.g. PDF, ODF etc.). Or a combination of JS and Joomla PHP to use e.g. the "title" of the link to create the "label", the file extension in links to determine the "action" and the current page (by Joomla) to assign the "Category".

I hope you enjoyed this small introduction into GA tracking events. You can see how to attach these events by examining the source code in: http://getk2.org

JoomlaDay Greece 2011 a success!

nospam@joomlaworks.net (Fotis Evangelou) — Tue, 31 May 2011 01:20:00 +0300

More than 600 hundred people came past the doors of Danaos in Athens, the weekend of 28 and 29 May, 2011.

Thanks to all the visitors, the speakers and the #jd11gr sponsors for making JoomlaDay Greece 2011 (the first ever JoomlaDay in Greece!) such a successful event!

See you all in JoomlaDay Greece 2012!

F*ck you, pay me - a must see for professionals in web design

nospam@joomlaworks.net (Fotis Evangelou) — Sun, 10 Apr 2011 02:38:00 +0300

2011/03 Mike Monteiro | F*ck You. Pay Me. from SanFrancisco/CreativeMornings on Vimeo.

JoomlaDay Greece 2011 - May 28-29, 2011

nospam@joomlaworks.net (Fotis Evangelou) — Wed, 06 Apr 2011 15:45:00 +0300

The first (ever) official JoomlaDay Greece 2011 event is coming May 28-29, 2011.

2 days, 30 presentations, great foreign and domestic speakers such as Johan Janssens (Nooku), Alex Kempkens (JoomFish), Max Milbers (Virtuemart), Nick Dionysopoulos and many more (inc. yours truly) in a unique Joomla! event!

More soon on http://joomladay.gr