SOPA, PIPA, ACTA, Financial institutions, credit rating agencies, corrupted politics…
This post is for you all who despise what those things and bastards (quoted above) represent…
In summary, that’s the kind of mood I’m in these days….

On top of that, it’s an ace video (made by 555Johnyboy666), with a great RATM tune. Viewed by too few many. Hope you’ll like it as much as I do.

Peace,… ps: We don’t need the key, we’ll break in!

Click here to view the video on YouTube.

Giving back has always been very important to me. Ever since I have been old enough to live my life on my own terms.

In a world controlled by markets and credit rating agencies, at a time of uncontrollable financial and economic crisis, political non-sense, and ever-growing greed, what better time than now to give back and help others through their journey.

It is with extreme pride and joy that I can announce i will be working pro bono for Delhi-based non-governmental organization Torch these next few months.
Torch’s primary mission is to send the children of pavement dwellers of Delhi (aged from 4 to 8 ) to school, while providing access to basics needs such as lunch, washing and change of clothes. 20 of the Torch children are already going to school. Hopefully, the online footprint I will provide them with in the new year, will help Torch and its staff develop its program to a larger scale.

“To give without any reward, or any notice, has a special quality of its own.”
Anne Morrow Lindbergh.

ACTA (the Anti-Counterfeiting Trade Agreement) is a threat to Internet users’ fundamental freedoms and to EU Internet companies’ competitiveness and free competition. The European Parliament will soon decide whether to give its consent to ACTA, or to reject it once and for all.

Every citizen can help defeat ACTA by spreading this video across the Internet, urging their fellow citizens to mobilize, and contacting their elected representatives.

Learn more about this dangerous agreement at http://lqdn.fr/acta.

Click here to view the video on YouTube.

Twitter have just rolled out a new and cool feature, with the announcement of the now-available image galleries.

The feature allows you to display the pictures you have added to your tweets in an aggregated manner, simply using the grid and slideshow url (see below). The new feature displays up to 100 of your mot recently tweeted images in chronological order.

Without surprise, all big image sharing partners such as Instagram, yFrog, and TwitPic are supported.

Check out your media grid by replacing ‘username’ by your twitter id:

https://twitter.com/#!/username/media/grid

https://twitter.com/#!/username/media/slideshow

This is obviously a great wee tool if you tend to take a lot of pictures, especially if you are on the go, like a long trip, like my friend (and Travel Photograph) Ken Kaminesky here…

I’m a real sucker for all productivity tools out there, cool little add-ons, GTD apps, to do lists, you name it. And let’s be honest, they are a real help when it comes down to working effectively on various projects at the same time, as it takes quite a bit of organisation and discipline to get those goals tackled in time.

This post is going to be about a few tools I have started using in the last few months. If I have decided to talk about them today, it’s because they have made a real difference to my daily approach to workload, readings, and overall organisation. Hopefully, you won’t know too much about those few apps and you will test & love them as much as i do.

Let me start this post by touching the subject of information collection. I’m a big fan of the “less is more” concept, especially when it comes down to white space and web design, but this certainly doesn’t apply to my readings. I am hungry for both general and web design-related news & information, tips, tutorials, advices, opinions. My curiosity and hunger for new things have no limit some days. The problem is: if you ever wanted to read all this during your working day, you’d never stop and end up doing bugger all.

1. Read it Later


http://readitlaterlist.com/

 

Let’s kill a myth: Yes, you are allowed to keep your eyes (and ears) open during your work. I ain’t a big fan of this ‘Turn everything off while you’re working’. How the hell would normal people function through urgencies, semi-urgent requests, inquiries if they were to turn off their email/phone/wifi everytime they had to add border radiusus to a div. It might be your way of working but it’s absolutely non sense to me. Unless I’m on very complex coding duties requiring nothing but my full and dedicated attention, i keep all my information channels open, and I often see interesting news/turorials while looking for material on google/twitter.

“Read it Later” certainly helps me save those interesting articles for a later time with just a click of a button.
Have a go a it. Get those extensions/addons installed, and enjoy reading what you are interested in, while commuting, or when you’re done with your work.

 

2. Readability


https://www.readability.com/
Firefox add-on
Chrome extension

 

Same subject, but different tool: “Readability” is another must-have app/plugin. I have it installed on my firefox and chrome browsers and I must say I have them working every day and all day long. How much rubbish do we have to endure while surfing the web?! Ads all over the place, links to places we dont want to go to. I just want to read my stuff and leave. Readability does that for you.

 

If you’ve been on my blog before, you’d know about this app, having already played around with some jquery to replicate the readability effects (see previous post). I’m a real fan of it… and I am far from the only one…


 

3. Producteev


http://www.producteev.com/

 

Producteev is the latest gtd/project management tool im using. And people, it’s a cracker! I have not used the app with third parties yet, having only been working on single-handed projects at the moment, but I advise you to check out their full features to find out how you and your team mates can take advantage of this app.

 

I am only going to focus on the free and personal approach of the tool. Firstly, they they have this great email to task feature, allowing you to quickly convert simple emails to a “to-be-done” item in no time. All you have to do is send an email to task@producteev.com, to convert any email sent to you into a task with a little tweak of the subject. This feature allows you to centralize all your activities without losing the full details of the requests/issues sent to you.


One important and great thing about Producteev is the ability to create an unlimited number of workspaces. This obviously gives you the opportunity to separate all your projects and to-do-lists in specific hence SEPARATE locations.

 

As described in the screenshot above, use hashtag to allocate your task to a specific project such as #myproject, schedule it with either dates (or even days) and time, and you have a fully scheduled activity which will come by email on the day/time of the event.


 

Check this video for more details…

This is it people. I hope you enjoyed this post. As mentionned at the beginning of today’s article, those 3 apps are definitely making my web designing life easier, and I can only hope they will do the same to you.
So long…

]]> http://shoogledesigns.com/blog/blog/2011/04/14/3-must-have-cool-apps-to-boost-your-productivity/feed/ 0 http://shoogledesigns.com/blog/blog/2011/02/07/increase-your-blogs-readability-with-temporary-removal-of-non-content-areas/ http://shoogledesigns.com/blog/blog/2011/02/07/increase-your-blogs-readability-with-temporary-removal-of-non-content-areas/#comments Mon, 07 Feb 2011 20:00:46 +0000 shoogledesigns http://shoogledesigns.com/blog/?p=614




If you’re an aficionado of the web community’s twitter feeds, you probably have seen Arc90 and the @readability crew officially launch their web & mobile app which ‘zaps online clutter and saves web articles in a comfortable reading view’. And If you have read my blog before, you will know my love for minimalism and clean design. Therefore you won’t be surprised if I openly admit I absolutely love that “Imagine a web designed for readers” concept the guys from readability have come up with.


The BAD

Hostile environment for reading is how those clever people have described the web as it stands today. And hostile it is indeed. Between the site’s natural navigation features, the “advertise here” spaces people tend to put everywhere on their pages (in a natural attempt to monetize their blog), the most innovative, sometimes funny, mostly boring & annoying advertising banners , and f**k knows what else, it gets hard to concentrate on what you are reading.

The GOOD

But it doesn’t have to be that way…indeed. There are alternatives. The use of RSS readers is certainly one of them, although the simplest (and free) ones tend to drop some of the content (like pictures, and other media). Readability, as stated above, is definitely another way, and I can only encourage you to sign up to this service. But here’s a post about something I have been thinking about, looking at this whole “clean my page to help me concentrate on what I’m reading” concept.

 

Wouldn’t it be clever if we could have our blog’s web pages designed to show all our valuable content, all the side advertising crap we need to keep to make sure our families have bread on the table, and other social network links, but allow our visitors to concentrate on what they are actually reading by giving them dynamically the possibility to switch to a cleaner and minimalistic view of the article.

 

Thinking of it, not only it does seem possible, but also it could be mega easy using jquery and a couple of functions and classes. Let’s get crackin’ then!

The UGLY

Here’s the kind of page I often find on designer’s blogs. To be honest, I don’t personally agree with that kind of design, but yet again, I don’t personally need advertising revenues today. Problem: It’s got way too much on it. Some ads in the middle of the post which personally make me want to throw the laptop through the window (ok maybe not), some moving banners, some flashing pictures, in summary it gets hard to read what looks like a decent article (in fact it’s just this article you’re reading lol).

 

Anyway, here’s a screenshot of what such a page would look like. Please note the red annotations covering areas having absolutely nothing to do with the blog article.

 



READ-ABILITY

OK, let’s apply something really simple: set the class of all the div elements not containing any relevant data from the article to “hide”. I used pictures to illustrate my advertising banners for this demo. Therefore, I applied the “hide” class to all my advertising img elements. But the very same can be done on a series of divs.

 

This done, create a couple of logos to trigger your readability feature. I created a couple of Content Only and Show all buttons, and place them respectively in two separate divs of class “Hide” and “Unhide”.

 



 

<div id="hide" class="hide">
    <a href="#"><img src="contentonly.png" border="0" /></a>
</div>
<div id="unhide">
    <a href="#"><img src="showall.png" border="0" /></a>
</div>

 

Now, let’s turn to jquery and make sure that all the elements of class ‘Hide’ are being hidden upon the click of the Content only button, and of vice-versa for the Unhide class and the Show all button. Make sure your CSS includes a display:none setting for the .unhide class.

 

<script>
$("#hide").click(function () {
	$('.hide').hide(2000);
	$("#unhide").show(2000);
});
$("#unhide").click(function () {
	$('.hide').show(2000);
	$("#unhide").hide(2000);
});
</script>

 

As you have may have noticed, I gave the effect a 200ms execution time to emphasize the resulting readbility effect. Hope you like it. I let you check out the demo now.

]]> http://shoogledesigns.com/blog/blog/2011/02/07/increase-your-blogs-readability-with-temporary-removal-of-non-content-areas/feed/ 6 http://shoogledesigns.com/blog/blog/2010/12/24/geolocalize-your-portfolio-to-emphasize-your-local-approach/ http://shoogledesigns.com/blog/blog/2010/12/24/geolocalize-your-portfolio-to-emphasize-your-local-approach/#comments Fri, 24 Dec 2010 11:06:42 +0000 shoogledesigns http://shoogledesigns.com/blog/?p=591




It only takes a glance at services such as Yahoo Local or Google Places to understand the potential benefits of promoting your business at a smaller and more local scale.

I strongly believe that web design is not any different from the rest of the industries out there. Just as people will tend to buy local food to ensure freshness, quality and enjoy the opportunity to meet farmers and other local artisans, some people will be looking for a more local approach when on the lookout for a web designer.


 

I have met many small business owners having the will to get their services online, and promote their brand and company to other potential customers, but the overpriced quotes usually accompanying the too-virtual approach of a lot of web agencies often give those business owners the cold feet.

 

Please do not consider this post as a manifesto against modern technology and the use of web conference tools. I am a huge fan of Skype and other online sharing applications on both private and professional fronts. I however believe that nothing will replace good old face-to-face meetings to get things done, especially when projects are about to kick in.

 

And giving your potential customers the chance to meet you in person, meet the people you did work for and ask for their opinions on your services/customer-focus mind/prices and hence relate to your previous projects by adding a local aspect to your marketing campaign can only push things the right way.

 

Today, I will then take this opportunity to talk to you about a new jQuery plugin I have only discovered a few days ago: MobilyMap, created by Warsaw-based web developer Marcin Dziewulski of Mobily Playground.

What Marcin came up with is an attractive and dynamic way to display items/places/or more on a map by tagging coordinates-defined points on a given support. I let you discover this plugin and its many options on Marcin’s site.

 

I will show you instead how I have used this plugin to demonstrate how you can display your portfolio using this local approach mentioned above.

Get local

First of all, let me reaffirm that it doesn’t take a genius to get this thing working the way you want it. Proof is I wouldn’t be able to use it myself.

X and Y coordinates are needed to define your markups. Simply measure with any of your favorite graphic tools the distance between top and left borders and the location of your first customer, as shown below…



…and report your coordinates on a div of class set to point, and id set to ”p-x coord-y coord”.

<div class="point"; id="p-788-173">

 

Instead of using Marcin’s google-like markups, I opted for more subtle thumbtacks markups giving my portfolio map a more design-ish look.

Repeat the above process as many times as you have items to appear on the map.

 

In terms of Javascript, as usual all is provided by the plugins called in the header:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/mobilymap.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>

The jQuery library first of all, Marcin’s mobilymap and an init.js script with the various initial state options that you will be able to modify as you wish.

 

The CSS settings having nothing spectacular, I let you define your own settings yourselves. I just went ahead with a tiny thumbnail of the site designed and some description text wrapped around it.

 

This is about it. I let you take a look at the demo, and see how you too could geolocalize your portfolio, and get those local businessmen attracted by your services.
Finally, i wish you all a Merry Xmas.

]]> http://shoogledesigns.com/blog/blog/2010/12/24/geolocalize-your-portfolio-to-emphasize-your-local-approach/feed/ 1 http://shoogledesigns.com/blog/blog/2010/12/10/create-a-movie-intro-with-basic-jquery-effects/ http://shoogledesigns.com/blog/blog/2010/12/10/create-a-movie-intro-with-basic-jquery-effects/#comments Fri, 10 Dec 2010 13:54:46 +0000 shoogledesigns http://shoogledesigns.com/blog/?p=575




There are many examples of people having a go at animations without the use of video editing techniques, or flash on the web. And recreational activities being part of my daily schedule, I decided to challenge myself with a little one of those animation attempts, hoping to be able to recreate the well-known James Bond Intro with nothing but:

• a bit of Photoshop
• some CSS
• a few basic jQuery effects (no extra plugin needed, but the standard library)



 

I pushed the challenge a bit further by restricting the number of jQuery effects to a mere 3, being:

• fade(In or Out)
• animate
• delay

As a side-comment, let me point out that people often underestimate the power the delay effect. I absolutely love it.

 

Anyway, cutting a long story short, and attempting not to bore you with unnecessary details, here’s how I proceded…

Photoshop

I created the pictures needed for my animation, being:

• a white dot for my pre-intro needs
• a “Shoogle designs presents” label
• a gun barrel inner view
• a james bond character
• and some blood layer with semi-opacity

All thrown on a piece of paper (do not mind the scales), it would look something like that:

 



CSS

Place a #video div in the middle, with overflow set to hidden…

#video {
	width: 560px;
	height: 300px;
	position:fixed;
	background-color:#000000;
	margin-top: 150px;
	overflow: hidden;
}

And set as many divs as you need for all your layers. Note that all my background images are set to PNG for opacity or see-through effects purposes.
All positions are set for the divs’ stating positions (before the jQuery takes over).

 



jQuery

As mentioned above, nothing but fade, animate and delay effects are permitted.
So we need a starting point, which is going to be the initial click on the toggle element (here the 007 gun, which will disappear once clicked by the way).
Then the animation and its sequence takes over.

 

Note that the sequence of events and effects is only timed by the delay feature. It doesn’t take much time to get it right if im honest with you. I let you go over the following code and its manual annotations yourselves, .

 



 

For your info, I used jPlayer for the background music. I’ve just realized that, for some reason, it doesn’t seem to be playing the tune when using IE8. Don’t have the time, nor the will to check out why. Let me rephrase, as this is only a wee game I’m playing, I don’t really give a f**k it doesn’t run best on IE, but if you know why, then don’t hesitate to leave me a comment.
For the rest of you’s (firefox, safari, chrome etc…users), it should work pretty good, and you should hear some james bond music playing. This obviously kicks in when you click on the icon, like the rest of the animation.

 

Also note that I had to modify the jPlayer settings so it pauses after having played the tune once:

.jPlayer("onSoundComplete", function() {
		this.element.jPlayer("pause");

 

This is it people, hope you enjoyed this little post of mine.
Leave a comment if you have. Follow me for more adventures in the future, and play the animation more than once, as it is a bit jumpy the first time round…

]]> http://shoogledesigns.com/blog/blog/2010/12/10/create-a-movie-intro-with-basic-jquery-effects/feed/ 10 http://shoogledesigns.com/blog/blog/2010/12/03/create-an-elegant-portfolio-with-jquery/ http://shoogledesigns.com/blog/blog/2010/12/03/create-an-elegant-portfolio-with-jquery/#comments Fri, 03 Dec 2010 20:06:30 +0000 shoogledesigns http://shoogledesigns.com/blog/?p=457




Portfolios are not only the (supposedly-frequently-updated!) collection of your achievements and skills. They are your best and cheapest salesperson ever. When a customer is looking for a designer, web or other as a matter of fact, he/she is more than likely to check out your work before making an appropriate judgment on your designing skills and his/her potential will to work with you.

 

Customers are bound to follow a number of sources in order to find you. Word of mouth, publications, effective social marketing campaigns, and other targeted advertisements should get you to the front stage, making you a noticeable service provider, but the chance is this may not be enough in striking deals if your portfolio is neither up to date, nor the most attractive one.


 

Well, today, we are going to take a look at a very efficient way of displaying your portfolio, in an elegant-ish modern, dynamic and appealing manner, with only a few lines of jQuery codes.

 

I would like to introduce you to a couple of tools I did stumble upon while browsing the latest jQuery plugins out there.

 

The first one is fancybox , and although you may not have used this specific tool, you may already be accustomed to those lightbox-looking plugins by now if you are a fan of jQuery attempts like I am.

 

The second tool is a 3d carousel designed by Professor Cloud which I find not only very appealing but so easy to customize to your real needs/requirements.

 

OK, let’s get cracking.
One step at the time. Let’s first deal with the 3d-carousel plugin.

3D Carousel

Include your js packages in the head of your document, with as usual, the latest jQuery library, the cloud-carousel plugin you will find on Professor Cloud’s website, and the jquery.mousewheel javascript which will allow your users to rotate the 3d carousel with the mouse wheel.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/JavaScript" src=" cloud-carousel.1.0.4.min.js"></script>
<script type="text/JavaScript" src="jquery.mousewheel.js"></script>

 

Two more pieces of code will be needed for your carousel to work…

 

1. Some HTML defining a div of id carousel1 to be placed on the page. Use this opportunity to test/adjust the width and height of the carousel.

Note the ALT and TITLE attributes which will be displayed in the following p elements (of id title-text and alt-text) when hovering over the rotating images.

<div id = "carousel1" style="width:940px; height:478px;overflow:scroll; border:none;">
            <img class = "cloudcarousel" src="images/image1.png" alt="some description" title="Title Image 1" border="none" />
<img class = "cloudcarousel" src="images/image2.png" alt="some description" title="Title Image 2" border="none" />
<img class = "cloudcarousel" src="images/image3.png" alt="some description" title="Title Image 3" border="none" />
<img class = "cloudcarousel" src="images/image4.png" alt="some description" title="Title Image 4" border="none" />
</div>
<p id="title-text"></p>
<p id="alt-text"></p>

 

2. and some Javascript function including the position of the first rotating picture (which should be defined once the carousel dimensions have been set), and various other mechanisms such as the mouseWheel feature mentioned above.

<script>
$(document).ready(function(){

	$("#carousel1").CloudCarousel(
		{
			xPos: 470,
			yPos: 107,
			buttonLeft: $("#left-but"),
			buttonRight: $("#right-but"),
			altBox: $("#alt-text"),
			titleBox: $("#title-text"),
			mouseWheel:true
		}
	);
});
</script>

Fancybox

The 3d-carousel setup now complete, we can now take a look at Fancybox.
Let’s take the same route, by defining first (in the head of our document) the necessary fancybox script and its css stylesheet.

<script type="text/javascript" src=" jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.fancybox-1.3.4.css" media="screen" />

 

And let’s now add a simple a href of id fancybox to each and every carousel image, to enable the visitor to click on the thumbnail and display a larger version of the picture lightbox-style.

<a id="fancybox" href="images/large_image1.jpg" ><img class = "cloudcarousel" src="images/image1.png" alt="some description" title="Title Image 1" border="none" /></a>
 

 

And we’re done.

 

Time to finish this up with a decent demo and a slight twist to this portfolio creation post, with the opportunity to pay tribute to some of my dear web acquaintances.
I present you with my 3D-friends-carousel featuring:

• Matt Ward aka @echoenduring
• Radu Chelariu aka @sickdesigner
• Becs Rivett aka @becskr
• Adham Dannaway aka @cre8ivecommando
• Michael Pehl aka @invocoes

Don’t forget to use your mouse wheel!

]]> http://shoogledesigns.com/blog/blog/2010/12/03/create-an-elegant-portfolio-with-jquery/feed/ 2 http://shoogledesigns.com/blog/blog/2010/11/11/help-your-visitors-focus-on-the-subject-with-jquery-script-pageslide/ http://shoogledesigns.com/blog/blog/2010/11/11/help-your-visitors-focus-on-the-subject-with-jquery-script-pageslide/#comments Thu, 11 Nov 2010 18:13:35 +0000 shoogledesigns http://shoogledesigns.com/blog/?p=525




As already stated during one of my previous posts (Push the minimalist approach one step further by hiding site navigation), I am (like many of you out there) a huge fan of the minimalism concept in web design, being convinced that too much information or content has a tendency to overwhelm our web site visitors to a point that they will lose interest, miss the point, and most likely turn around and never look back.


This approach has certainly proved to be a winning one in the marketing business, people in the high spheres of the sales industry very quickly understanding the power witty pictures could have in comparison to lengthy and boring sales proses.

 

And when it comes to online art display, I don’t see why those rules would not apply. Your work needs to be staged to be seen/inspected with attention. And very much like a designer would pick a frame, select his light to display a painting at its best, you need to make sure your visitors can see but more importantly can focus on what you want them to see.

 

And this implies the removal, at least on a temporary basis, of all the extra details, descriptions and other notes you may want to add to explain your work.

 

Well this PageSlide script I happened to find while taking a stroll along the jQuery plugin bay could bring you the chance to purify the display of your art piece before bringing in the valuable notes you want your visitors to be aware of. If you google this plugin, you will find out it comes in many shapes and pre-destined usages. The one I used for this example is Scott Robin’s.

 

Just download it and use it to your likings. You can add links so that the initial page shifts in every direction. I only set it up so it shifts to the left, but you get the idea.

Code your page

You will be needing 3 essentials pieces of coding to make this PageSlide script work.

 

Call the jQuery scripts in the header with the following:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="http://shoogledesigns.com/scripts/js/jquery.pageslide.js"></script>

 

A link triggering the shifting of the main content and the appearance of the hidden side panel.

<a href="_left.html" id="slide-left">- more about this -</a>

 

And the javascript command dictating the various shape and direction of the side panel.

<script type="text/javascript">
    $("#slide-left").pageSlide({ width: "550px", direction: "left" });
</script>

Finally you will be needing to code the side panel, in this case the page _left.html just like you would do with any other HTML page. This is it people, try it out. Open the demo and click on the -more about this – link below the picture to see the script in action. Click anywhere on the main content to go back to the page’s initial stage…

]]> http://shoogledesigns.com/blog/blog/2010/11/11/help-your-visitors-focus-on-the-subject-with-jquery-script-pageslide/feed/ 0