What is Social Media
Its facebook, LinkedIn, and Twitter right? That is the goto answer most people will give you if you.. and yes that is correct. However, this definition can be dramatically expanded. One term definition coined from author Chris Brogan (Social Media: 101) that I became quite fond of; Social media is the “Two-way web.” In other words, social media is when we create interaction and/or discussion around some piece content. It doesn’t matter if this content is based in the virtual world (blog posts, links, videos, etc ) or real life happenings (facebook status update about how great your friends day is). Once we expand our definition, we are talking about hundreds if not thousands of social outlets.

Why is there so much hype to use social media to market

1. Its cheap, the ROI (return on investment) is dramatically higher

• Very little upfront cost when compared to tv advertising, and even www display advertising
• It can be targeted to a very specific group, behavior, or demographic

2. A potentially much higher impact

• Pushes content in a much ‘friendlier way’
• Pushes content to those whom care about it
• Interaction and discussion is an active experience vs a passive one (E.g. tv ad)

3. More human

• Since the big corporation/bank bailouts, trust for big companies is at an all time low
• Social marketing is often about getting potential influencers on board, getting rid of the cold corporate identity and giving it a human face

Everyone hates the word blog
Blog contributors automatically become influencers of sort, expert or not. Being an influencer is a great way to get exposure, even if it is to the lightest degree. Starting a blog (shout out to wordpress) is one of the easiest possible things you can do to bump up your web presence. This includes a huge bump in your indexing by google, always a good thing.

The problem is.. for some reason the word blog has all these negative connotations. I’m not sure why. I’m not sure if its from the paparazzi star bashing blogs or what.. but for whatever reason, people hate the word.

What is a blog though? It’s a collection of posts/articles by one or multiple authors. Each post can have comments, tags and categories… that’s it. A Blog can be synonymous with news, updates, articles, journal, and even portfolio. So why wouldn’t you want to create a web presence with company/brand news with the most minute level of effort?

Moral of the story, it’s a great place to start. Don’t be scared!

Dear Google Apps Administrator,

We are contacting you to let you know you important changes in Google Apps browser support and recommended steps to take.

Beginning on August 1, 2011, Google Apps support for the following browsers versions will be DISCONTINUED:

- Microsoft Internet Explorer 7
- Mozilla Firefox 3.5
- Apple Safari 3

After August 1, you may have trouble using certain features in Gmail, Google Calendar, Google Talk, Google Docs and Google Sites with these older browsers, and eventually these apps may stop working entirely.

WHY THE CHANGE?
To give users the best experience with Google Apps, we need the capabilities of modern browsers to deliver features such as desktop notifications for Gmail and drag-and-drop file upload in Google Docs.

For this reason, beginning August 1, 2011, Google Apps will support the current and previous major releases of Chrome, Firefox, Internet Explorer and Safari on a rolling basis. Each time a new version is released, we’ll begin supporting that version and stop supporting the third-oldest version.

ACTIONS TO TAKE NOW
For the best experience and support from Google, we encourage you to update to the latest version of your favorite browser now. There are many to choose from:

- Google Chrome
- Mozilla Firefox
- Microsoft Internet Explorer
- Apple Safari

Note: Gmail offline requires either Firefox 3.6 or Internet Explorer 8. Read more about supported browsers for Google Apps in the Help Center:

http://www.google.com/support/a/bin/answer.py?hl=en&answer=33864

Sincerely,

The Google Apps Team

You have received this mandatory email service announcement to update you about important changes to your Google Enterprise product or account.

Google Inc. 1600 Amphitheatre Parkway, Mountain View, CA 94043.
©2011 Google and the Google logo are registered trademarks of Google Inc.

At the same time, it needed to look good on the iPad. This of course, brought up a completely different discussion since the existing site looked and functioned quite nicely using the iPad safari browser. The only downside, from the clients perspective (and potential users), it didn’t give the feeling of an Ipad app, which in itself, gives the website a substantial amount of value (real or illusional). So the solution; allow the user to easily switch between the mobile and full version of the site. I foresee this becoming a standard practice. ESPN.com does an excellent job of executing this with a nice splash screen prompting the user to choose either mobile or standard.

Anyway, back to making it feel like a mobile app/experience without creating a drastically different version of the site. Yall ready know what it is, Jquery Mobile. Jquery, surely becoming one of those buzz words which can be thrown around vicariously with absolutely no knowledge of what-the-heck it is. It’s cool. I get it. I appreciate the effort. Jquery mobile, however, is a slightly different can of worms.

I’ll let http://jquerymobile.com/ explain it best:

“A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.”

I gotta say, the setup was a breeze. The only modifications we made to the html were adding a few html 5 attributes such as:

‘data-role=”page” data-role=”listview” data-theme=”c”

Jquery Mobile takes care of the rest.

The majority of the work lies in rethinking the way your users will interact with the site now that it’s displayed with ¼ of the screen real estate. In addition, users interacting with your site on a mobile browser are more likely to be looking for a very specific snippet of information and they will want to find it fast. In other words, you need to remove all the fluff. Once you get the whole ux dilemma resolved, your 90% of the way there.

Of course, it’s always good to specify your own mobile css overrides for certain scenarios. One good example is; the CMS required the contact information be editable in one large CK editor rich text block. The contact information was formatted in tables (oh no). For the mobile devices these tables where too wide to fit the smaller screen size effectively without zooming. So, throw in a lil:

table.contact td {display: block !important;}

BAM! We are good.

There is one caveat. Jquery mobile, it’s in alpha release (ughh). A little bit of risk, very little, but based of our testing with multiple mobile platforms, there have been no glaring issues. So Jquery Mobile, I’m an official fan.

‘StatCounter, which tracks Internet data, said that IE’s share of the browser market fell to 49.9% in September. More people still use IE than any other single browser, but the combined market share of non-Microsoft browsers now outpaces IE.’

Full article here: CNNMoney.com

Everyone has their own little tweaks to their function. Isn’t there a built in function to do something so trivial ?

Yes, it’s the NumberFormatter class, Why does nobody talk about how to use the NumberFormatter class that has been around since Flash 9/CS3 Era ?

I’m not sure, but if you don’t want to roll your own here is some example code to get you started.

Adobe’s website gives you instructions on how to use it in a more flex style manner, if you want a pure as3 example.

// Import the class

import mx.formatters.NumberFormatter;

function somefunction(value:Number):void

{

  // Initialize the NumberFormatter Object

  var fmt:NumberFormatter = new NumberFormatter();

  var formattedString:String;

  // Set some of the options available

  fmt.precision = 2;
  fmt.useThousandsSeparator = true;

  // Format our value and return a formatted string

  formattedString = fmt.format(value);

  // Do something with our newly formatted string

  someobject.sometextfield.text = formattedString;

}

Works like a champ.

The area will be undergoing some heavy construction and right now all the shops are closed and boarded up. The new window graphics really help to get rid of the eyesore of broken glass and plywood.

While I was shooting these pictures there were a lot of people walking buy checking out the pictures and trying to fugure out where all these new shops will go.

My favorite shot is the old Taco Bell where we used to get delicious Chaluppas.

Great job to the designer Davina and Bill our officer of collaboration!

Here at no.inc we try to keep things fresh, support new technologies and devices. So recently we have a client who wants some videos on their site, and we decide to make it work with both PC’s and mobile devices (and specifically the iPhone and iPad).

The Approach

Well, since flash 9.0.115 flash supports h.264 video encoding, the iPhone and iPad support html5 and the <video> tag, and also support h.264 encoding. So the idea is to encode the videos in h.264, detect some mobile devices (iPad, iPhone) and serve up the same file in 2 different ‘players’. Now I know what you’re saying, most modern browsers also support html5 and the <video> tag, so we could just deliver it like that. Well … IE9 isn’t out yet, and IE8 and below don’t support it, besides, I’m not quite sure html5 and video have become a standard and gotten all the kinks out, so we’re sticking with flash for the PC.

First Round Success

This round was easy, basically encode our videos to h264, write a flash video player in as3, have it take the video file as a flashvar argument and serve it up, swfObject to embed it.

<?php
 /* if $iphone is false, insert the swfObject code that will replace the div with our flash player */
 if(!$iphone):
 ?>
<script type="text/javascript">
 var flashvars =
 {
  auto: 0,
  preview: "/images/<?=$brand?>/vid-pre-<?=$vidId?>.jpg",
  skindir: "swfs%2f",
  video: "<?=("/videos/$brand/$vidId.mp4")?>",
  width: "640",
  height: "360",
  type: "mp4"
 };

 var params =
 {
  menu: "false",
  wmode: "transparent"
 };

 var attributes =
 {
  id: "aVid",
  name: "aVid"
 };

 swfobject.embedSWF("/swfs/player.swf", "player", "502", (282 + 40), "9.0.115", "/swfs/expressInstall.swf", flashvars, params, attributes);
 </script>
<?php
 endif;
 ?>

Now we just need to detect a mobile device, and serve up different content pointing to the same video:

<?php
/* this goes in the header */
$agent = $_SERVER['HTTP_USER_AGENT'];
$iphone =
 ( (strpos($agent, 'iPhone') != false) ||
 (strpos($agent, 'iPad') != false) ||
 ((strpos($agent, 'AppleWebKit') != false) && (strpos($agent, 'Mobile') != false)) ||
 ((strpos($agent, 'AppleWebKit') != false) && (strpos($agent, 'webOS') != false)) ||
 (isset($_GET['iphone']))
 ) ? 1:0;
?>

<?php
 if($iphone):
 ?>
 <video id="aVid" width="502" height="282" controls="controls" poster="images/<?php echo"$brand"; ?>/vid-pre-<?=$vidId?>.jpg">
 <source src="videos/<?=$brand?>/<?=$vidId?>.mp4" type="video/mp4"></source>
 </video>
 <?php
 else:
 ?>
 <div id="player">
 <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
 </div>
 <?php
 endif;
 ?>

So what we’re looking at above is, we added the code to give us a true or false statement in the variable $iphone if we detect a mobile browser that can do html5 and the video tag.  If $iphone is true, we output the video tag code pointing to our ${vidId}.mp4, otherwise we output the div that swfobject will replace (and inside the div is the info to get your flash player if you don’t have it).

and we’ll change the doctype too if we’re serving up html5:

<?php
if ($iphone):
?>
<!DOCTYPE html>
<?php
else:
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?php
endif;
?>

So this works, like a champ… for the most part.

* First of all, the iPhone doesn’t appear to even fetch the file if  file extension is not .mp4.  Flash wants to make its h264 file extension as .f4v, but its ok with them named .flv, or .mov, or probably anything!

* Second, encoding a video using adobe’s h264 encoder doesn’t mean it works with the iPhone, however, encoding a video for the iPhone works with flash.  I recommend using handbrake with the iPhone setting and ‘Web Optimized’ checked.

This setup works and we’re happy with it.  But here’s where the headache comes in.

The headache

First let me explain the problem:  While testing the iPhone, and the PC everything seemed fine.  Then while thinking we are done, we notice the iPad is behaving irregular.  Basically with this setup the iPad has some odd race condition or something, the <video> tag loads in the video, and the poster comes in and shows a preview of the movie, but the play button is gone.  It’s not related to the controls argument on the video tag, its not the actual poster, something was just messed up.

Upon diagnosis of adding/removing/changing things around we found that removing the included external javascript files caused it to work properly.  Well that doesn’t make sense really, so we changed the js files, changed the contents of the js, replaced the js with empty files… basically if the js files were included (and external js), it would hide the play button.  It doesn’t matter WHAT the js is, if its garbage, jQuery, an alert… if you include external js, you lose play.

We found that moving the <javascript> tags to the bottom of the file (we were thinking race condition, or socket limitation or something), this fixed it… the js was there, the js worked, the play button was there, the video plays! YAY! ….

That is until we went back to the iPhone.  Now this is where things got really weird.  The newly discovered iPhone bug was some how related to the change of the iPad code, but it made less sense than the iPad bug.  Now the iPad’s bug was it would hide the play button.  The iPhone bug would give the ‘invalid video codec’ symbol.  What ?  Invalid codec ?  You just played this file earlier…  While checking the webserver logs, the iPhone doesn’t even attempt to fetch the .mp4 file and check its codec, it just says invalid codec, and you get none.

Trying to figure out the culprit of this one took about 2 days of headaches.  We stripped the html down and found it’s somehow related to the stylesheet…. not the contents of the stylesheet, the inclusion of an external stylesheet.

Let me give you an example.

<link rel="stylesheet" href="css/all.css" type="text/css" media="all" />

You can remove type and media arguments without any difference.  If you change the rel or remove it, it suddenly works again!, if you remove the href, it suddenly works again!, if you point the href to a empty file, or just put in ‘fisdanfois’ gibberish, it doesn’t work… the file doesn’t have to be valid it can be a 404, it just simply won’t work if you have that link tag.  We ended up with a small test file… that consisted of nothing really, as plain as below:

<!DOCTYPE HTML>
<html>
<head>
 <link rel='stylesheet' href='css/all.css'/>
</head>
<body>
 <video controls>
 <source src='vidoes/video.mp4'></source>
 </video>
</body>
</html>

That html above, does not work.  If you remove the <link> tag, it works, if you change rel= to something it works…

So after these 2 long days of debugging, we didn’t put 2 and 2 together until we backtracked far enough to undo the iPad fix.  Undoing the iPad fix made it work again, but we were puzzled because the <link> tag was there, and it worked! … so it must have been directly related to the <javascript> tag movement.  Now it’s not that the iPhone doesn’t like <javascript> placed somewhere, it simply doesn’t want to have a <link> tag in the header, without a <javascript> tag pointing to an external file….

I can’t explain it, all I know is what I seen.  Sure, it makes no sense, it has to be some bug with the iPhone, and iPad for that matter, different bugs, both related to something in the <head>.  We already spent too much time on this fiasco, so the only solution was to specifically look for the iPad’s agent string, and move the js if its an iPad.  I know, it’s lame but I have to move on.

// in the top of the php file, after the $iphone detect
$ipad = strpos($agent, 'iPad') != false;

// in the head
<?php if(!$ipad): ?>
<javascript includes>
<?php endif; ?>

// at the bottom of the file
<?php if($ipad): ?>
<javascript includes>
<?php endif; ?>

Well there you go, I hope apple fixes this bug, but until then feel free to just do what we did, maybe you can save a few hairs from falling out.

APR 14, 2010 2:47 PM
As the retail real estate industry moves into the era of smart phones and tablet PCs, some traditional ways of doing business seem awfully outdated. For example, many leasing professionals still lug heavy folders with property information and marketing materials to meetings with prospective tenants. In addition to being a pain to deal with, these paper documents cost a fortune to produce, even though they have to be tossed whenever a property’s tenant roster or site plan changes.

More here: http://bit.ly/dj4bBs

Recently we had trouble with a flash piece for a client.  The swf’s we made would not load and just show the loading progress bar.  Upon further investigation it turns out we changed the swf to wmode transparent.  Now I know from past experiences that flash’s internal timing changes with transparent and normally I recommend it be avoided at all costs, but this is a simple piece, just a little image gallery with some tweens, not a game where fps and timing are important.

Being stuck at the preloader lead me to believe something with the preloader is not acting right in wmode transparent.  It turns out the ProgressEvent.PROGRESS event’s are not firing.  Why ?  I can’t say, but I think Adobe needs to look into wmode transparent as this isn’t the only odd thing that happens.

The fix is to simply use an Event.ENTER_FRAME event to check the preload status rather than a ProgressEvent.PROGRESS, since Event.ENTER_FRAME event’s still fire flawlessly.

Normal preloader code:

this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, loading);

var pct:Number = 0;

function loading(event:ProgressEvent):void
{
 pct = event.bytesLoaded / event.bytesTotal;
 loading.loadedBar.scaleX = pct;
 trace(pct);
 if(pct >= 1)
 {
   this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, loading);
   gotoAndPlay(2);
 }
}

wmode = transparent preloader:

this.addEventListener(Event.ENTER_FRAME, loading);

var pct:Number = 0;

function loading(event:Event)
{
 pct = this.loaderInfo.bytesLoaded / this.loaderInfo.bytesTotal
 loading.loadedBar.scaleX = pct;

 trace(pct);

 if(pct >= 1)
 {
  this.removeEventListener(Event.ENTER_FRAME, loading);
  gotoAndPlay(2);
 }
}

**** UPDATE 7/26/2010 By Paul ****

I haven't tested it, but looking through the changelog for 10.1 flash player I noticed:
"[FP-1585] loaderInfo Event.COMPLETE not dispatched if wmode is "transparent" or "opaque". (2345794)"
This may be related to the progress bug as well, makes sense, there's just an event dispatch problem in wmode transparent.

Adobe _MAY_ have fixed this bug.  That doesn't help the stragglers using old flash versions, but its better then nothing.

Its about time some of the bigger names starting phasing out support of IE6. Even Microsoft would much prefer users upgrade to IE7. From a html/css perspective, including support for decade-old IE6 always adds a fair amount of additional debugging time.

My latest trend has been to ‘coax’ users to upgrade. I try to keep all functionally intact but almost purposely cut back on some of the eye candy and additional interactivity. For instance, If I have a nice little png drop shadow or hover effect on a div.. IE6, no drop shadow for you!  Everything works, but.. you want an upgraded experience, upgrade your browser, please.

Read the full story here at BBC NEWS: http://news.bbc.co.uk/2/hi/technology/8488751.stm