Thursday, September 30, 2010

Helpful hints in creating a custom facebook FBML page

Five Helpful hints when making an FBML facebook page. Hopefully this will save you some time in creating your own custom fan landing page.

Facebook page Icons: 200x200 pixels in size max. Different sizes get cropped unexpectedly so trial and error is the only way to determine what to do.

1. When the tiny icon is made, a 200x200 image gets cropped to around 165x165 then shrunk to the icon size. If you want a border around your subject, you need to make the subject smaller than 160x160 to preserve it.

2. Image artifacting. Any background color but black and white seems to cause artifacts around detailed edges. If you have text or fine

detailed vector graphics on a background, keep the background either black or white..or really busy so the artifacts look like part of the image. It also seems to preserve smoothing, so you can really blur the image if you want by setting smoothing to 8 (photoshop/fireworks)

3. a bunch of weird crap happens with IE that isnt testable outside of facebook:
-stylesheets have to be external or IE wont read them (use <link rel="stylesheet" href="http://www.mywebsite.com/myStyles.css?v=1.0" type="text/css"/>[/code] at the top of the facebook page)
-div tags cause spacing problems in tables, so if you create a table use span tags, not div tags. For some reason the div spacing issues cant be overcome with setting padding/margin/border to zero. Technically divs add a linefeed and spans dont...so perhaps thats it. Divs work fine in IE, Chrome, Safari, and Firefox outside of facebook, but not in a facebook page.

4. You cant link directly to a youtube .flv anymore (easily) so to embed youtube videos you need to link to the .swf file.

<span class="videoWindow">
<table width="240" height="145" border="0" cellpadding="0" cellspacing="0">
<tr> <td><fb:swf swfbgcolor="000000" imgstyle="border-width:0px;" swfsrc='http://www.youtube.com/v/VIDEO_ID_GOES_HERE?autoplay=1&egm=0&border=0&showsearch=0&showinfo=0&iv_load_policy=3&rel=0&color1=0x111111&color2=0x000000' imgsrc='http://www.mySite.com/images/videoLanchGraphic.png' width='240' height='145' /></td> </tr>
</table>
</span>

This will provide a simple youtube player. There are arguments you can pass are documented here:

http://code.google.com/apis/youtube/player_parameters.html#ExampleUsage
To hide the annotations and stuff, rel=0 is the most important, some of the other ones like iv_load_policy dont work without that.

4. as with all style sheets, make absolutely sure the final semi colon is at the end, any code written after it will be ignored
<style>
.myRef1{
}
.myRef2{
};
.myRef3{
}
</style>
In this case myRef3 class is ignored.


5. In the page editor, sometimes if you have code that exceeds the size of the browser window (unavoidable) after a save the window gets small and there are no scroll bars to get to the rest of your code. in firefox you can press Ctrl+a to select all and this enlarges the window to accomodate all your code.

Monday, September 20, 2010

Moble internet has sent us back to the stone age

Up until about 2006 when internet technology was advancing extremely fast in terms of what an RIA was capable of, we were introduced to what I would characterize as several speedbumps.

1. Facebook (in a big way, not its actual inception)
2. the iPod touch/apps/iPhone etc.
3. Google

These two massive developments effectively ended the progression towards faster, better, more elaborate technologies and set us back about 10 years in terms of what one could do with modern technology and the internet.

Facebook represented a highly simplistic html based interface with technology that had been around for 20 or 30 years. In terms of capabilities, it was not much more advanced than, say, compuserve or AOL was in 1995. Sure, the standard FBML was more open to developers, and it introduced more user friendly tools, but it fundamentally wasnt much different.

On the other hand, up to the real boom of facebook, online gaming technology like World of Warcraft, and before that Myst URU Live, and of course Second Life were pushing the boundaries of both the display engines, physics simulations, reality engines, and really appeared to be the next logical step from the 2d but fast paced and impressive flash revolution.

When HTML dominated the internet, it was largely text, tabs, scrolling, and hyperlinks. Eventually people could interact with databases via HTML form pages, and the simple form/submit/variables were born. Some java apps enabled more elaborate connectivity, but when Flash came along, eventually the graphic designer was able to directly make use of the power of database connectivity without forcing an "install" procedure. A person could simply navigate to a flash application and start "playing" then could leave, and wouldnt have to "uninstall" the specific app thanks to the flash player.

Flash took the web from simple text and static graphics to a new era of video, animation, games and sophisticated RIA's for business that could replace boring, ugly apps developed by nerds with no graphic experience or animation expertise. The visuals now took front seat while the functionality often became a side note (much to the chagrin of tech purists like Jakob Nielson, who saw technology exclusively a pragmatic object, and not a creative expression.

The flash revolution completely changed the way people saw the web.

Then Google came along, and since google was designed primarily around the idea of "webpages" which was a throwback to the flash generation which instead was developing a world of sophisticated, intelligent apps in place of "webpages", google could not understand them. The concept of websites got a breath of fresh air, and became revitalized and we saw resurgence of CSS and HTML, and the HTML format was again considered the "permanent grand master" and flash was seen again as a small quirky, strange thing often warned against with misinformation and mistrust, similar to "witchcraft" in medieval times.


Then along came facebook, which looked old fashioned and grossly simplistic to the creative developers at the time (myself included) who dismissed it at first. The hook, however, which proved to be more important than pragmatism OR creative expression was the end users ability to assert themselves. Up to the facebook revolution, creative and technological elitists had reserved the right to produce content for large audiences much like television broadcasters had reserved that right for themselves in the channel. The "broadcast" world became the "conversation world", and the "audience" became far more interested in each other than the content being shoveled at them by anonymous "experts".

This perplexed both the google/html experts and the flash experts, and to survive, both had to learn to play facebook's way or be left behind. Google continues to struggle with this and may actually be forced to completely change, reinvent itself, or simply become obselete as facebook search replaces it entirely - relegating it to a plugin for wikipedia and other large information repositories.

Up to this point, both facebook and google's technology pushed the state of the art backwards in terms of sophisticated application development...google with its HTML dependent design, and facebook with its proprietary but largely HTML centric design. Savvy flash developers have managed to integrate the technology into facebook in things like Farmville, but flash is not really being taken advantage of or pushed to new levels, its actually working to be compatible with legacy, dated technologies offered by Facebook and Google.

Enter Second Life. When Second Life came along, as a flash developer, I was honestly intimidated. It seemed that it could run circles around flash by simulating not only 2d animation, but 3d animation, sophisticated artwork, creativity, and reality engines. The true state of the art exhibited previously in stand along video games now in an open engine, available to developers. Things like HTML and Flash on a prim surface made those two technologies seem laughable, and its API put it in the next logical step toward the "holodeck" along with its interchangeable physics engine, developer tools, and scripting engine.

At the time of Second Life's peak, it was in the news almost daily, and one could fart in second life and it would make front page of CNN. It seemed unchallenged and unbeatable in terms of potentially taking the RIA to the next level.

(I'm ignoring the concept of cloud computing here because the concept, while important as a fundamental shift in app management, is grossly overhyped - its important like the standard voltage of electricity in homes is important, but not really worthy of news or discussion per se as its not particularly innovative anymore, its just a natural progression)


Then along comes the iPod touch. These tiny devices were extremely revolutionary ONLY in that they made what was already technically available more "inviting" and popular thanks to Apple's branding and clever marketing. They are the coca cola of technology. Fizzy sugar water had been around for many years prior to coca cola, but coke packaged it and made it viable into what is still one of the most popular non-nutritionally valuable foods ever.

The iPod touch was particularly important because it took available processor capabilities at a small size, stripped off all the least popular features on hand held PC's, and made the interface elegant and easy to use. This changed everything, and because technologies like flash and second life were not capable of displaying on such low-power devices, they took a second seat to the "revolution" of the mobile app.

Mobile apps, in truth, are grossly inferior to the state of the art of the RIA on a desktop or laptop computer, but are more popular largely due to the fact that they are available on the terms of the consumer rather than the content distributor.

I dont, for example, want to play internet checkers while I'm sitting at my desktop, but I do when I'm about to go to bed, or riding in a long bus or cab ride to help pass the time.

I would love to play second life in that time, but it just isn't feasable. The display is too small, cant handle the processor speeds, and is too hard to manipulate while I'm holding the little thing.

So in effect, between facebook, google and Apple, the entire move towards progress in display technology has been put on hold while a new "revolution" of getting people to integrate these devices and platforms into their lives occurs.

The future prediction that follows is once the public is on board with these devices and rather simple technology, content will become king once more as consumers become "bored" with facebook, google, and iPhones/ipads/ipods etc. That, you can count on.