Google’s new tool for designers SWF to HTML 5

6 Oct
Flash file Icon

Image via Wikipedia

Guys, there were the times when you thought of having a tool which could convert your fancy .swf file to the alternate content for browsers/devices which are able to show that content, however I already mentioned in my other post “Show alternate content for swf”. The trick is to use some JS code for alternate content.

This another and very successful tool is from google. The name google developer have given to it is “SWIFY“. This is a competitor of product from Adobe, Wallaby. Both are the giants of digital world in their fields. But there are some goods and bads with both the tools. According to my experience of using both the tools I would prefer swiffy for all the reasons.

for Swiffy you could just upoad your file online and it will instantly convert it to HTML5 which is always condensed in a single file but when you want to approach same with Wallaby you must download the software from Adobe(click here). After qquick instalation procvess browse your .fla file(source file is very required for conversion) aand then convert it to HTML5. So for copyrights issues google warns before conversion but Adobe forces you to have .fla.

Swiffy seems to do quite a decent job of converting SWF files. It’s also able to deal with embeddeded/nested movie clips, which is quite good and allows for complex animations that would otherwise be a struggle to create using HTML5’s canvas element. File sizes also seem to be very small; perhaps because of the plain text nature of HTML5.

Google says that Adobe is pleased to see the Flash platform extended to devices which don’t support the Flash player. The result is that anyone creating rich or interactive ads can continue to get all the authoring benefits of Flash Pro and have the flexibility to run the ad in the Flash Player or HTML depending on what’s available on the system. Google and Adobe look forward to close collaboration around efforts like these.

You could look at some examples below which have been converted with Swiffy

Gallery

  • File sizes (gzipped): SWF: 34.2 KB, HTML: 38.8 KB
    Google Chrome ad using various SWF features such as vector graphics, embedded fonts, animation and drop shadow and blur filters.
  • File sizes (gzipped): SWF: 29.0 KB, HTML: 29.7 KB
    An example using masks and a drop shadow filter.
  • File sizes (gzipped): SWF: 5.0 KB, HTML: 5.9 KB
    A simple AcionScript 2.0 game with support for keyboard and mouse input.
  • File sizes (gzipped): SWF: 1.1 KB, HTML: 1.9 KB
    Another simple game supporting mouse and touch input.
Related articles

Tags: , ,

Twitter? should have or should not have

4 Oct
A segment of a social network

Image via Wikipedia

I hope you might already have an account on Facebook by the time. You also have the option to create your brand new Google+ account. There is another thing in the air. Anoher website which you might have heard of either from the TV anchor reading news of some big face or some newpaper, whatever!!!. Did you guess what I’m talking about?………… Yes, you are right as I mentioned in the article title, I am going to explain WHAT SHOULD BE DONE WITH THE POWER WORDS YOU HEAR ABOUT TWITTER.

To understand better, let me tell you what it is in actual?

Twitter is a free social messaging utility for staying connected in real-time.

According to wikipedia,

Twitter is an online social networking and microblogging service that enables its users to send and read text-based posts of up to 140 characters, informally known as “tweets”.

and according to topb.com

One of the most popular social networks built around a follower/following system rather than friends, and limited to 140 characters (think micro-blog meets SMS).

Yes, its true. When we talk about Twitter the first thing strikes in mind is just 140 characters? When you hear this you will come to know by self that Twitter is not made for every individual. when we go in a bit depth.

Facebook is people you met in your life – who you don’t really want to talk to.

Twitter is people you don’t know – who you want to talk to.

-credits “http://alphonseha.com“

That’s said, Facebook has many advantages over twitter and vice-versa but with low short impact & high leading impact. I tell you how? When in day to day life you meet some one you wish to take his/her picture and details in mind, for that you either ask his contact info or just FB Id, doesn’t matter he is of your field or not? Here comes the FB. all you want is just to sty in touch in this digital world and who connects people better than FB? Once you log into FB to find that guy you met down the road you may come to an FB profile who seems to be your friend after exploring his connections. you may think to send an invitation to connect with him. So, all what you doing is enlarging your social network but to the people in whom you have interest.

Reluctantly, Titter works based on follower/following system. Twitter is for the people who are used to let people connect with them and they also connect to, based on their interests. Said well, The posts from twitter are called tweets and every tweet is a bird chirp which boasts “what you are upto?” When you log into your Twitter account, you add people with similar interest. but because its focus on  follower/following system people share it for their business benefit. People follow you when they think that you are of their interest and you don’t have any clue about them. To become socially active and grow your social network you allow them and share their tweets with people. You explore them in detail and you both come on FB to have fun/grow personal-social-network if you find it comfortable.

For that reason, Twitter brings people together because it is mainly interest based. Whereas Facebook is based on social encounters.

So its totally based on what your taste bud says? Explore a bit more on google, and leave feedback here.

Related articles

Tags:

Google+ hacks

3 Oct

Everyone’s talking about Google+. Those who have yet to get an invite want one, and those who are members are still trying to figure out what the heck it’s all about. According to Hitwise, visits to Google+ climbed up to 15 million U.S. visits, from 1.1 Million the week before. That’s an astonishing 1269% increase! Google+ user Simon Laustsen, an electronics technician from Denmark, has created a handy cheat sheet for those of us still trying to get the hang of Google+. It’s already been shared more than 1,000 times via Google+, and the Laustsen has translated it into several languages.

Google Plus Cheat Sheet

Tags: ,

Social Media Marketing : PART 1

3 Oct

In today’s world when businesses are growing with rapid speed, contacts are the sources what everybody needs. With the technological advancements every now and then there are some tricks which a real marketing professional may wish to conquer and would use it to market its product. We frequently hear the old adage, It’s such a small world when coincidences occur or common acquaintances are discovered. Today we are going to look how Facebook has emerged as a STRONG MARKETING CATALYST for businesses.

The internet provides the marketing industry a new, low-cost platform to distribute information on a global scale in a variety of formats – video, still images, audio, text, interactive games, and more. With just a few click you create your community, post discounts/sales schemes to your FAN BASE and you get responses soon after your posts on your wall. yes, that is the power of facebook. Today I’m going to discuss how FACEBOOK FAN PAGE could be used to better market your base products.

Without any effort or expense, Facebook’s search feature will yield your fan page as being a hunt result and people who share your interest will quickly find you. To help have more website visitors to your fan page with no cost, you can spread the news about your new page to your current client database and Facebook connections. Considering that the particular average Facebook user has 130 friends & Facebook is the second most visited site in whole wide world, there exists nearly endless potential for attracting new people to your page simply by attaining out to those you currently know and asking them to help you make connections. Naturally, you also will want to be certain to promote your fan page on your website, and the other way around. If your business doesn’t have a Fan Page yet, you better be asking yourself why you don’t. These specialized Facebook pages offer a gaggle of benefits that would turn any entrepreneur, large business, or corporation’s head:

1. Search Engine Optimization: So this is a very first stage of getting the benefits of creating a Fan Page. This gives you more footing in search ranking. By publishing backlinks to your business’ pages as well as having a Facebook Fan Page with your name in the title, your business will be receiving some big bonus points in the SEO department.

2. Price: It’s completely free. All of the posting/advertising(don’t consider paid advertisements in FB) are just free of cost. Google would find your page and you don’t need to even make it searchable.  You could have one up and running in just a smidge of time.

3. Communication: Communication is a very important part of the business world.  You have a variety of customization options when choosing to communicate with your fan base. You can send an update that appears as notifications on homepages, and you can target your message to match a specific age, gender, and location. You’re also able to communicate messages and posts directly into your fans’ homepages.

4. Community Building: The Fan Page is a great platform for your loyal followers to come together for your product or service by utilizing the Wall feature or other available modular applications. Users can submit text testimonials, post pictures, create and upload video, hold discussions with each other – all supporting the growth of your online community.

5. Dashboards: Facebook Fan Pages are nicely equipped with a good amount of analytics tools accessible by page owners. You’ll be able to track the number of interactions your page has with fans, view key demographics like sex, age, and location, and more.

Mouth publicity is the strongest and unavoidable pillar of your market base and Facebook is fast becoming the common element that connects people across the globe. As friends connect on Facebook, they naturally share information about products and services they normally use and love. That is where Facebook fan pages as well as its great prospects for business proprietor come into play. Increasing your global exposure along with a fan page for your product or service programs a simple option for people to hook up with you and also tell their friends about you. The beauty of the Facebook fan page is that the benefits are accessible to even the smallest business as well as takes nothing more than passion and purpose to attract fans and begin to reap the entire benefits Facebook fan pages have to offer.

So here the time for you. Create a good looking FB page for your business or for yourself and gain access to the market. Reveal more, learn more, grow a lill’ more…

Tags: , ,

Make Divs be treated as Tables

2 Oct

Hey you folks!
Have you ever thought of using <div> </div>s instead of using your old companion <table> </table>. Its always good to have DIV focused layouts instead of TABLEs ’cause DIVs have many advantages TABLEs. read my post DIVs vs TABLEs.

Today I’ll show you how to make DIVs work like Tables as in your flaunt 2 column layout, 3 column layout and other handy layouts. This approach is very easy and intuitive. You can design your layouts using just a little piece of HTML and CSS. Here is an example to approach quick 3 column layout.

A Quick 3 Column Layout Approach Example

XHTML

<body>

<div id="header"><!-- begin header -->
	<h1>This is the header</h1>
</div><!-- end header -->

<div id="wrapper1"><!-- sets background to white and creates full length leftcol-->

	<div id="wrapper2"><!-- sets background to white and creates full length rightcol-->

		<div id="maincol"><!-- begin main content area -->

			<div id="leftcol"><!-- begin leftcol -->
				<p>This is the left column</p>
			</div><!-- end leftcol -->

			<div id="rightcol"><!-- begin rightcol -->
				<p>This is the right column</p>
			</div><!-- end righttcol -->

			<div id="centercol"><!-- begin centercol -->
				<p>This is the center column </p>
			</div><!-- end centercol -->

		</div><!-- end main content area -->

		<div id="footer"><!-- begin footer -->
			<p>This is the footer</p>
		</div><!-- end footer -->

	</div><!-- end wrapper1 -->

</div><!-- end wrapper2 -->

</body>

CSS

body {
/* customize however you may wish*/
	background:#9343B9;
	text-align:center;
	margin:20px;
	padding:0;
	font:normal 0.8em/1.2em verdana,aria,sans-serif;
	color:#666;
	}
a {
	color:#FFF;
	text-decoration:none;
	border-bottom:1px dotted;
	}
a:hover {
	border-bottom:1px solid;
	color:#9343B9;
	}
#wrapper1 {
	position:relative;
	text-align:left;
	width:100%;
	background:#FFF url("../images/rightcolor_bg.gif") repeat-y top right;
	}
#wrapper2 {
	position:relative;
	text-align:left;
	width:100%;
	background:url("../images/leftcolor_bg.gif") repeat-y top left;
	}
#header {
	background:#BB62AB;
	padding:10px;
	margin:0;
	text-align:center;
	color:#FFF;
	}
#header h1 {
	font-size:200%;
	}
#header a:hover {
	color:#7A2875;
	}
#maincol {
	position:relative;
	margin:0;
	padding:10px;
	}
#leftcol {
	position:relative;
	top:-10px;
	left:-10px;
	float:left;
	width:220px;  /* for IE5/WIN */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:200px; /* actual value */
	margin:0 0 -10px 0;
	padding:10px;
	background:#ECB9E8;
	z-index:100;
	}
#rightcol {
	position:relative;
	top:-10px;
	right:-10px;
	float:right;
	width:220px;  /* for IE5/WIN */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:200px; /* actual value */
	margin:0 0 -10px 0;
	padding:10px;
	background:#D7C4FA;
	z-index:99;
	}
#centercol {
	position:relative;
	padding:0 240px;
	}
#centercol a {
	color:#666;
	}
#centercol a:hover {
	border-bottom:1px solid;
	color:#9343B9;
	}
#footer {
	position:relative;
	top:1px;
	background:#7A2875;
	width:100%;
	clear:both;
	margin:0;
	padding:1% 0;
	text-align:center;
	color:#CCC;
	}

More layouts

 Designing 2 column layout

 
#content {
	float: left;
	padding: 10px;
	margin: 20px;
	background: #666;
	border: 5px solid #ccc;
	width: 300px;
	/* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 270px;
	}
#content2 {
	float: left;
	padding: 10px;
	margin: 20px;
	background: #666;
	border: 5px solid #ccc;
	width: 300px;
	/* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 270px;
	}
html>body #content {
	width: 270px;
	/* ie5win fudge ends */
	}
html>body #content2 {
	width: 270px;
	/* ie5win fudge ends */
	}

 Designing sliding 2 column layout

#content {
	float: left;
	padding: 10px 2% 10px 2%;
	margin: 0px;
	border: 0px;
	background: #666;
	width: 50%; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 46%;
	}
#content2 {
	float: right; /* Opera5.02 will show a
	space at right when there is no scroll bar */
	padding: 10px 2% 10px 2%;
	margin: 0px;
	border: 0px;
	background: #666;
	width: 50%; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 46%;
	}
html>body #content {
	width: 46%; /* ie5win fudge ends */
	}
html>body #content2 {
	width: 46%; /* ie5win fudge ends */
	}

 Designing sliding 3 column layout

#left {
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 10px;
	border: 0px;
	background: #666;
	width: 190px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 170px;
	}
html>body #left {
	width: 170px; /* ie5win fudge ends */
	}
#middle {
	padding: 10px;
	border: 0px;
	background: #666;
	/* ie5win fudge begins */
	margin: -20px 190px 0px 190px;
	voice-family: "\"}\"";
	voice-family:inherit;
	margin-top: 0px;
	}
html>body #middle {
	margin-top: 0px; /* ie5win fudge ends */
	}
#right {
	position: absolute;
	top: 0px;
	right: 0px; /* Opera5.02 will show a space at right
	when there is no scroll bar */
	margin: 0px;
	padding: 10px;
	border: 0px;
	background: #666;
	width: 190px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 170px;
	}
html>body #right {
	width: 170px; /* ie5win fudge ends */
	}

 Designing a complete 3 column layout

 
#left {
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 10px;
	border: 0px;
	background: #666;
	width: 190px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 170px;
	}
html>body #left {
	width: 170px; /* ie5win fudge ends */
	}
#middle {
	padding: 10px;
	border: 0px;
	background: #666;
	/* ie5win fudge begins */
	margin: -20px 190px 0px 190px;
	voice-family: "\"}\"";
	voice-family:inherit;
	margin-top: 0px;
	}
html>body #middle {
	margin-top: 0px; /* ie5win fudge ends */
	}
#right {
	position: absolute;
	top: 0px;
	right: 0px; /* Opera5.02 will show a space at right
	when there is no scroll bar */
	margin: 0px;
	padding: 10px;
	border: 0px;
	background: #666;
	width: 190px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 170px;
	}
html>body #right {
	width: 170px; /* ie5win fudge ends */
	}

Tags: , , ,

IE hacks ●●● Different CSS for different tastes FOR ie6, ie7, ie8 & ie9

28 Sep

Browser, Browsers and many many Browsers! Had Netscape thought ever for Chrome in future? Had Microsoft brainstormed for even a second that IE will be beaten by not only Firefox but Firfox will be beaten by Chrome.  There is an obvious question “Who is next in the race?” It’s totally unpredictable.

As many browsers are there in the market to slightly become your preferred browser, you might still face face problems with the website rendering. As a designer One has to be always answerable for all its Browser compatibility.

As the technology grew Microsoft has tried to make IE not just a monopoly but providing designers a way to mend the look and feel of the website. We will discuss today the hacks IE has in its bag for designers to make websites all-browser-compatible.

IE8 and Below

The key to targeting Internet Explorer 8 and below, with a hack, is to append “\9″ to the end of your style. For example:

  1. body {
  2.  color: red; /* all browsers, of course */
  3.  color : green\9; /* IE8 and below */
  4. }

It’s important to note that it must be “\9″. Unfortunately you can’t replace this with something along the lines of “\IE”, like I attempted to do so. Even “\8″ won’t work; it must be “\9″.

IE7 and Below

As we learned in the quick tip from January, we can use the * symbol to target IE7 and below, like so:

  1. body {
  2.  color: red; /* all browsers, of course */
  3.  color : green\9; /* IE8 and below */
  4.  *color : yellow; /* IE7 and below */
  5. }

IE6

Lastly, we have the underscore hack, which most designers are familiar with by now. Rather than the * symbol, we use the underscore. This will target only Internet Explorer 6.

  1. body {
  2.  color: red; /* all browsers, of course */
  3.  color : green\9; /* IE8 and below */
  4.  *color : yellow; /* IE7 and below */
  5.  _color : orange; /* IE6 */
  6. }

Pros & Cons

It’s preferable to avoid the use of hacks in your style sheets in any way. On the contrary, you should almost always use conditional comments. However, that doesn’t mean that it isn’t helpful to know what you could technically do with all the things you stuck with and looking for a solution. :)  

Tags: , , ,

Follow

Get every new post delivered to your Inbox.