Archive for September, 2010

Future-Proofing Your Passion: Using Tech to Stay Profitable

Sunday, September 26th, 2010

Individuals, companies, and even industries get obsolete and wither away like clockwork. And it’s almost always by not adapting to new technology. If you want to future-proof your passion, you need to not get left in the tech dust.

Using the latest tech to stay profitable with your passion – forehead-smacking obviousness, right? Of course you need to stay relevant and even be ahead of the curve if you want to keep making money with your work you’re passionate about. But some people do indeed get caught up in how they do their work, rather than just doing their work – all the while thinking they’re “ahead of the curve” when in actuality they’re simply investing time in getting good in a technique that’ll become outdated.

They focus on getting good at some technique or mastering a platform (ex. “Twitter ninjas”), when they should be simply getting better at what they do, being curious as to what’s next out there, and then using that to further expand their reach (ex. people who do amazing work and use the latest tech to get it out there in ways that are cheap and convenient to folks).

When that technique and platform becomes obsolete (ex. MySpace), all they have to show for it is mastery of something that’s outdated. In other words, nothing useful. But you know what never gets outdated? Truly great work.

So you don’t want to become reliant on just technology or platform, or get good at using just a single specific one. You want to be amazing at what you do, be passionate (again, no surprises here), and then use tech to stay independent and relevant. And especially using the new tech that’s on the edges – the stuff that seems almost impossible now but will be commonplace in the near future.

Every new generation is defined by what seemed impossible in the previous generation. What seemed impossible before self-published media platforms such as Woork Up, bands recording and selling by themselves, one-person developer and filmmaker outfits is now commonplace. And the individuals that were there years before others are some of the most independent and profitable in their field now. The popular blogs that started early are a huge example of this.

Writer/speaker Merlin Mann stresses the importance of being curious, soaking in the weird tech stuff that’s currently at the edges, and focusing on your talent, not your modus operandi. He says: “What‚ out there right now that‚ about to stop being impossible? Where will it happen? Who will (most loudly and erroneously) declare it‚ total bullshit? Who will mostly get it right‚ possibly too early? Who will out what it means to our grandkids? Who will out how to put it in everyone‚ front pocket for a quarter?”

Okay, so what am I trying to say with all of this? Focus on your great work, be curious about what’s going on at the edges of tech, and use that to stay profitable with your passion.

Try to learn from others’ mistakes rather than your own – look at all the individuals, businesses, and even industries that withered by the wayside because they got good at one tech, platform, or model, stuck with it and refused to explore, and eventually become obsolete and lose money.

Auto Refreshing News System With Built-In HTML Search

Friday, September 24th, 2010
Have you ever developed a web Project that needed an auto refreshing data all the time?


If not you will probably have to soon.

By Luiz Eduardo – Nowadays many companies are going web. I particularly work at a company developing a big web-based system which needs this kind of data all the time. It’s really important to give the right information at the right time.
I will show you now how the basic code works, and then we will create an simple auto refreshing news system with built-in HTML search. This is just an example to you understand how it works then use your imagination and see the endless possibilities with this script.
The following image illustrates how this script works:
HTML Code – All you have to create in your HTML is a simple div to receive the data.

JavaScript Code – We will create a function that’s called repeatedly in a 20000ms (20 sec) interval right after his execution.

PHP Code – The PHP code really doesn’t matter. It actually may be almost anything: another HTML, a Class, function or any script you may want to run.

Still quite simple, isn’t it? One more time I’m showing you just one example that came to my mind but don’t forget to just allow your imagination to do the job!

Why Record Labels and Traditional Media Still Matter

Thursday, September 23rd, 2010

The role of record labels, magazines, and other traditional outlets as a distributor is obsolete, yes. Anyone can deliver digital content now. But their roles as editors is more important than ever. And that’s why record labels and traditional media still matter – to be quality filters in an over-saturated world. Think about it: if you’re really honest with yourself, you usually tend to gravitate towards content from “established” outlets. Whether that’s music on some record label rather than some dude posting MP3s on his site, or an article from a bigger site or, dare I say it, traditional outlet like New York Times or Wired rather than some chick’s blog.

It’s human nature – in this internet age, we’re overwhelmed by choice, so we look to filters that do the finding of quality content work for us. If you know a record label is great, then you’ll trust their latest releases to be worth checking out.

That’s not to say it’s always the case – of course there are widely-read individuals like Seth Godin and John Gruber who have one-person blogs with no traditional outlet interference (well, Seth had book publishers, but the blog was separate from those). And amongst all the crap out there you no doubt have found a golden nugget or two that you passionately follow. I know I do – Seth and John being 2 examples, as are countless electronic labels like Warp, BPitch Control, Kompakt, and Hyperdub.

But those are rare exceptions for the most part. 99% of DIY (do it yourself) stuff out there is crap. So what’s an individual artist (writer, musician, entrepreneur, whatever) to do? Either start passionately building a consistent-high-quality-output platform to become your outlet, or affiliate yourself with existing quality outlets, at least until your own name and brand is built up.

And that’s where record labels and traditional media come into play. They’re not needed to get music, writing, videos, and other content out to consumers anymore. But they are needed to keep consumers’ lives sane by being quality filters. And it’s your job as the individual content creator to use these outlets to your advantage.

Music writer Jacob Wright summed it up great on the electronic music site Resident Advisor: I think that as the quantity of music being produced continues to increase, editing is more important than ever. Nobody wants to check on hundreds of albums every month, we need shortcuts. We need labels like BPitch to stand for quality and to do this it important not to put out albums when EPs would be better. That why, even though labels as a round piece of paper and a facilitator of distribution are becoming obsolete, the role of the label is has never been more significant.

E-Waste: The Dark Side of Technology

Wednesday, September 22nd, 2010
GUIYU, China – The wastes arrive here by sea transport, mainly from North America, Japan and South Korea.
They sail across the Pacific Ocean in huge colorful containers and reach Hong Kong where they are moved into the storage areas of the largest commercial harbor in China, waiting before proceeding with their journey toward the Chinese hinterland.
During the day, along the terminal area leading to the dock, there is a constant coming and going of trucks commuting between the city and the rural areas of the Guangdong province.

That’s the place where dozens of millions of tons of electronic junk (e-waste) from all over the world are taken: computers, phones, televisions, printers, refrigerators and an infinite row of other obsolete devices destined to disposal or recovery of the precious metals inside their circuits.

Guiyu is a small town situated a few hours from Hong Kong. As soon as you leave the main road that cuts through the countryside and arrive in town, you can find yourself in a post-apocalyptic scenario where the only signs of civilization that remain are huge mountains of rubble made of tubes, plastic and silicon.

Guiyu is the largest electronic garbage collector in the world. Each year about 100,000 workers, including many children, are involved in the disposal operations and recovery of over 1.5 million tons of materials coming from the consumer technology industry, a quantity that is around 80% of the e-waste produced in a year by the entire China.

The processing of materials is performed using techniques that are not adequate and that over two decades have transformed this small plot of land located in the heart of China in one of the most polluted and unlivable areas of the planet.

In Guiyu the air you breathe leaves the taste of acid fumes in your mouth, resulting from uncontrolled combustion of plastics and metals. The water is not drinkable. The level of poisoning of groundwater has forced the authorities to prohibit even agricultural use. The incidence on the population of serious blood disorders and cancer is among the highest in the whole world.

Guiyu is just the most notorious example, but similar sites, according to a recent Greenpeace report, are located, in a more or less official way, in many other developing areas such as Pakistan, India and Nigeria. These are the landfills of the world, the places where every technologically obsolete device ends its life, and where all means are legitimate.

For the more developed countries they represent nothing more than an investment with a very low cost, a mere matter of economic convenience that also lowers internal environmental impact. The sum of shipping costs and the entire process of disposal is by far less than what it would take to deal with the same materials in their places of origin.

For the countries that do import such wastes, e-waste is merely a business opportunity that feeds a gloomy total market value estimated at millions of dollars every year and causing untold damage to the environment and the quality of life of the people involved.

Some years ago PlanetFunk shot the video of their popular song “Stop Me” in Guiyu. With this data in our hands, maybe it’s time to say “Please, stop”.

Author: Antonio Lupetti @woork
© 2010 Woork Up

How Apple Is Getting You to Pay More for an iPod Touch

Monday, September 20th, 2010

Apple’s lowest-priced iPod Touch for 2010 is now $229, but they’re using a tactic that will get you to pay $299 instead. Here’s how.

Prior to 2010, Apple’s lowest-priced iPod Touch was $199, and the next most expensive one was $299. The $199 model was reasonable, and a good amount of people bought that one. But Apple wants people to go for the $299 model, so for 2010 they’re attempting to sway people by implementing the decoy effect.

The decoy effect is basically placing less-desirable option A next to a more reasonable option B, to make B much more attractive as a result. You’re not meant to buy option A, but instead see it and be much more likely to go for the better (and pricier) option B.

In Apple’s case, they’re placing a slightly cheaper but significantly weaker option A ($229 8GB iPod Touch) next to option B (the $299 32GB one). By seeing that you can get 4 times the storage for a measly $70 extra, a lot more people will now get the more desirable $299 iPod Touch. The fact that the 64GB one (only twice the storage) is $100 more at $399 just makes the $299 32GB model all the more attractive and the likely purchase of a shopper.

Now don’t get me wrong: Apple is in no way doing anything wrong or shady. The $299 iPod Touch is indeed the best deal, and Apple is simply using an effective tactic to make that more evident. The decoy effect is a very effective pricing strategy that you can use for your own business, freelance offerings, products, and services to get more people to pay for the higher-priced items.

For proof that the decoy effect works, we can look at The Economist‘s subscription offer that Dan Ariely laid out in his book Predictably Irrational. Offer A was an internet-only subscription for $59, Offer B was a print-only subscription for $125, and Offer C was both print and internet subscription for $125. You read that right: Offer B and C are the same price.

Offer B is the decoy subscription offer meant to make Offer C (the one The Economist wants to people to sign up for) incredibly attractive. And sure enough, a big percentage of people signed up for the best deal that was Offer C for $125. Had Offer B not been there, a lot more people would’ve simply been okay with an internet-only subscription for $59.

Useful Tools for Web App Development

Sunday, September 19th, 2010

When developing a Web App, there are some steps on the functional and technological side you can (and must) consider before starting.

Know Your Ground

Spend some time researching: are there alternatives that would do the same thing you want to develop? What are their flaws? Who’s their audience? Is there exclusive content you can offer? What’s your value proposition compared to your competitors? Here are some directories that will help you out:

Mockup and Prototype

There are several tools that can help you in the process of creating useful mockups. Many people suggest pen and paper and that’s perfectly fine if you’re all in the same room. If you’re not, you can start with some prototyping tools. My favorite is definitely Mockingbird for its simplicity (be sure to read the launch details). The only issue I have with it is that you can’t have collaborative editing (you can share an account, but it doesn’t track revisions). But it’s fine if you’re using it just to share ideas. For an even more robust tool, you can try Balsamiq, which however looks a little more cluttered.

Server Side Tech

Ask yourself a question first: do you really need a server side backend? By using specific online APIs you can effectively remove the need for a backend.
Here’s an example: you want to parse some RSS feed in your app. Typically, the first step would be to build a PHP proxy to get the XML feed as a JSON object. Instead of doing that, you can use Google Ajax Libraries or Yahoo’s YQL, relying on a much more robust server to get the job done.
Moreover, remember you can easily cache everything by using some HTML5 local storage. While you can’t store images or videos, you can store strings, and this could solve many of your issues. You can store text, your application state, even json objects (thanks to this simple trick). And with additional tools like JAML and JSONPath, you can easily traverse any JSON object and create useful templates that let you write clean code. While we’re still in the preliminary stages of having a functional client-side relational database (see the Web SQL project page), we can start seeing the light at the end of the tunnel.

Images

Images are important, however you should have heard about CSS3 by now. Long story short, with CSS3 you can manipulate lots of parameters that can help you in streamlining your app and reduce significantly the need for images. Gradients, shadows, font-embedding are only a few examples of the underlying potential.
The downside is that you may need to target specific browsers to see all the effects working properly. The good news is that the CSS3 specific properties gracefully degrade against older engines, so your users will simply see a less attractive page. Just make sure that key features and key interaction spots do not depend strictly on CSS3 properties.
As I’m usually not the creative guy, here are some useful tools from a programmer perspective: PrimerCSS lets you create a css file from markup, while CSSDesk lets you play with styling in order to quickly come up with some functional css. Then you can use ProCSSor to minify and deploy. If you need placeholders, you can use Placehold.it.

Videos

If your application contains videos, you may want to read this guide about HTML5 video. Once again, this would let you support a wide variety of platforms and all the major browsers. The only issue is that you definitely would need movies with different encodings. The best way to go is to choose the correct video player framework: do you want to be platform-specific? Do you need to target different browsers? Videos require storage, bandwidth and CPU power for transcoding. It’s important to take into account all of these things.
Once again, the best solution is an HTML video framework with integrated fallback. There are some out there and I’m currently testing a couple of them for a super-secret project.

Conclusion

While this is not a strict tutorial or walkthrough, it may open some suggestions on how you could approach your next project. The wonderful thing is that there are many resources on the web that make development easier and more enjoyable and if you’re just starting out you might find priceless help if you just take the time to look around. Are you using any of these resources? Where are you looking for development support? Let us know!

Why the iPad Isn’t a True Creation Device (Yet)

Tuesday, September 14th, 2010

Apple’s iPad and the touch interface is set to be the next great creation device for music, graphics, and video – but there’s a reason it’s not that yet.

There’s no denying that the iPad, along with the iPhone, popularized the next great user interface for computing – touch. It’s easier than ever to get around the web, media, apps, documents, whatever. That list should also include creation applications. And while that’s true for basic drawing, video, and audio creation tasks, there are two reasons why the iPad isn’t a true creation device – yet. Two reasons, actually.

The iPad lacks a precision tool. Ask any professional film editor, music producer, or graphic designer, and there’s a reason a mouse or digital pen exists – to do ultra-precise edits. It’s the equivalent of reaching for the low-tech hammer when you need to precisely hit a nail in, despite fancier technology letting you slam that sucker into the wall faster and easier. Now granted, not every single artist needs that level of precision. But most professional creative types do at some point or another. And a finger is not that precision tool. I can’t imagine making nano-edits during my electronic music creation without a mouse, digital pen, or some not-yet-created precision tool.

The iPad needs to sync files in most cases. This reason isn’t as critical, but it still limits the iPad to a secondary device rather than a sole creation device. In order for the iPad to really be a true creation device, it needs independent computer-like functionality without needing to sync. This is so you can always create, edit, copy, render, and upload all of your work without needing to sync to a computer somewhere.

One specific iPad creation example shows promise. One creation example does show the iPad as a true creation device: writing. Writing is true creation on the iPad. You have the precision tool (a keyboard, both soft and hard) and independent functionality (iWork and notes apps, saving and uploading of text and pdfs).

Let’s hope that the iPad becomes a true creation device for film, audio, and graphics professionals sooner than later. Because I really want to switch my portable music studio onto that glorious device.

How-To Create Your Own Instant Search

Monday, September 13th, 2010
Google recenlty launched a new way to search the web called Google Instant, which can save several seconds per search.
Google instant involves a lot of high technology, including a new and smarter predicting system.
This technology is not available for every webmaster in your own page yet, however, we can get really good results with php and jQuery, allowing everyone to create your own version of instant search.
We are going to create now the simplest code, in order to learn how it works.
This way anyone may learn easily and recreate it, fitting it perfectly with your own project.
The following image illustrates how the instant search works.
Create a link to jQuery in the head tag of the page. Than create a simple search field using a form with an input field in a HTML page. Below the form add a layer which will contain search results.
Search results will appear immediately into the result’s container while you write a string to search into the input field using a combination of PHP and JavaScript code.
The HTML code is really simple: just a form with a layer which contains search results.
<html>
    <head>
        <title>Instant Search</title>
        <script type=”text/javascript” src=”../jquery.js”></script>
</head>
    <body>

       //Form
        <form method=”get” action=”">
            <input type=”text” id=”q” name=”q” />
            <input type=”submit” value=”Search” />
        </form>

        //Result’s Container
       <div id=”results”></div>

    </body>
</html>

Here is the JavaScript code:
<script type="text/javascript">
    var runningRequest = false;
    var request;

   //Identify the typing action
    $('input#q').keyup(function(e){
        e.preventDefault();
        var $q = $(this);

        if($q.val() == ''){
            $('div#results').html('');
            return false;
        }

        //Abort opened requests to speed it up
        if(runningRequest){
            request.abort();
        }

        runningRequest=true;
        request = $.getJSON('search.php',{
            q:$q.val()
        },function(data){           
            showResults(data,$q.val());
            runningRequest=false;
        });

//Create HTML structure for the results and insert it on the result div
function showResults(data, highlight){
           var resultHtml = '';
            $.each(data, function(i,item){
                resultHtml+='<div class="result">';
                resultHtml+='<h2><a href="#">'+item.title+'</a></h2>';
                resultHtml+='<p>'+item.post.replace(highlight, '<span class="highlight">'+highlight+'</span>')+'</p>';
                resultHtml+='<a href="#" class="readMore">Read more..</a>'
                resultHtml+='</div>';
            });

            $('div#results').html(resultHtml);
        }

        $('form').submit(function(e){
            e.preventDefault();
        });
    });
</script>

Here is the PHP code:
<?php
if(!empty($_GET['q'])) {
    search();
}

function search() {
    $con = mysql_connect('localhost','root', '');
    mysql_select_db('mydb', $con);

    $q = mysql_real_escape_string($_GET['q'], $con);
    $sql = mysql_query("
        SELECT
            p.title, SUBSTR(p.post,1,300) as post
        FROM Posts p
        WHERE p.title LIKE '%{$q}%' OR p.post LIKE '%{$q}%'
        ");

    //Create an array with the results
    $results=array();
    while($v = mysql_fetch_object($sql)){
        $results[] = array(
          'title'=>$v->title,
          'post'=>$v->post
        );
    }

    //using JSON to encode the array
    echo json_encode($results);
}

Here is an example for the CSS code:
form{
      margin:15px;
      padding:5px;
      border-bottom:1px solid #ddd;
    }

      form input[type=submit]{display:none;}

      div#results{
        padding:10px 0px 0px 15px;
       }

      div#results div.result{
           padding:10px 0px;
           margin:10px 0px 10px;
       }

      div#results div.result a.readMore{color:green;}

      div#results div.result h2{
       font-size:19px;
       margin:0px 0px 5px;
       padding:0px;
       color:#1111CC;
       font-weight:normal;
       }

      div#results div.result h2 a{
        text-decoration:none;
       border-bottom:1px solid #1111cc;
      }

      div#results div.result p{
       margin:0;
      padding:0;
}

      span.highlight{
       background:#FCFFA3;
       padding:3px;
       font-weight:bold;
}

And this is all you have to do. Note: Your project doesn’t need to have an specific page to this search. You may use CSS to hide and set absolute position to the results div. This way the instant search will work in every section!

Tags: ,
Posted in Web Design | 112 Comments »