January 2008

In the last article of this series (see Resources for links), I explained the importance of having regularly updated content on your site. In that same vain, we looked at how that content must be clear, authoritative and more importantly, relevant to your niche. Additionally, I talk about how crucial making your content available through RSS is become with the advance and development of the decentralized information movement. In this article, I’ll discuss two more fundamental characteristic of the ideal Web 2.0 site, and that is that your site must be search engine and user friendly.

The Internet is free source of news and opinions. This is a wonderful thing from a buyer and shopper point of view however, for you the publisher of information, so much information in such variety of media equals lots of competition. Things that were heavily relied upon in the past for Ranking, such as meta tag keyword and description information are being deprecated and may not always prove so fruitful. Nowadays, technology is diving distribution and forcing the search engines landscape to evolve more quickly. So how do you build a search engine and user friendly website?

As I’m sure you may have already heard, at the center of all this there’s a lot of technology: JavaScript, HTML and XHTML, a bit of dynamic HTML, Ajax, and even some XML (Extensible Markup Language). Don’t worry if you don’t understand all of this (or any of this for that matter) you don’t have to. What I’m about to teach you through this series of articles does not require any knowledge in programming. Anyone can do this and I don’t care if you are selling garbage bags, bartending, teaching disco dancing or working retail. These are all very easy and inexpensive techniques anyone can use to launch their very own Web 2.0 ready site and it can be done in a matter of just minutes.

Building a site with SEO in mind goes Hand-in-Hand with having a site that is user friendly too, in fact you can’t work towards the one without the other. Search engines love feeding web users lots of relevant content, so the more authoritative and relevant your content is, the more likely it will eventually be served. Consequently the better the users experience the better your Ranking. In other words, make pages for users, not for search engines. Hence, you need to figure out your niche and be carefully defined within that niche. In addition you must updated your content regularly and that content must be authoritative.

Now that we understand the significance of having the right content lets talk about the sites structure. First, you must take common-sense steps to ensure that your site helps users find their content easily. For example, is your content organized in an easy-to-read hierarchical layout? Are you using HTML links on every page, and does each page provide internal links in the text to help the search engine crawler find its way around? Does your site offer a site map and do you include a link to the site map somewhere on each page? And last but certainly not least. Do your pages contain relevant information that clearly and accurately describe your content and is that text clear, crisp and legible?

Remember, optimizing your site structure has to be an integral part of the design process and must enhance the overall user experience. Furthermore, pages that are simple to navigate and don’t require much thinking on the end users part, will also be pages that are easy to crawl and index. In reality, SEO is pretty simple, avoid using overzealous SEO practices and think about what’s best for the user. The ideal search engines and user friendly site is all about providing the user with content–rich relevant information and getting them to that information as soon and as easily as possible.

And there you have it. Two more fundamental ingredients of the ideal Web 2.0 ready site; is your site search engine and users friendly? In the upcoming weeks we will be continuing this discussion, as promised, and show you how you can launch your very own ready-built Web 2.0 site. If there’s anything you wish to add on the subject of search engine and users friendly websites please feel free to share your thoughts and comments and keep checking back for more updates.

Resources:
How Can Interactivity Increase Conversions & Make You Money?
How to Analyze, Optimize, Publicize, Monetize and Troubleshotize the Ideal Web 2.0 Site in a Nutshell.

Share This

This tutorial will show you how to include an external XML text file into Flash using external Cascading Style Sheet (CSS) to get crisp, clean and elegantly styled text within your text boxes. The latter serves two primary advantages over any other approach… (1) XML allows you to populate Flash content-driven applications with data from a simple text file. This is perfect for designing reusable application where’s nobody has to come into the Flash file again; all they have to do is add new entries to the XML file. (2) Cascading Style Sheets can be used to group style rules, which can be applied to XML elements allowing you to format all of your text boxes quickly and easily by editing just one single text file.

Not long ago, editing text in Flash left little to be desired. Any formatting and updating of the text boxes had to be done within the FLA file, so a Flash designer would have to be called on for even the slightest modification – you would have to reopen the source file, go through the whole movie editing text boxes one at a time, recompile the new SWF file, then maybe, if blessed with the worlds nicest client you might get lucky and not have to redo it over and over again. Not to mention Flash’s anti-aliasing feature, which tends to hinder rather than serve any purpose at all. This became further complicated and even more of chore when in the process fonts would come out of focus (because of positioning). I’ve seen people try all sorts of ways to get rid of that blurriness and end up ripping their hair out, because all they get is what you see bellow.

So before you go bold, refer back to this article and try some of this code. To write my XML, I generally use Notepad++, which it’s just a nicer version of the typical Notepad that comes with Windows; but you can use any text editor doesn’t have to be this one. Here’s the XML file we start with.

It looks like plain old HTML doesn’t it? Absolutely, XML is very similar in many ways to traditional HTML - the difference being is that you are no longer restricted by a predefined list of tags; you can actually makeup the tag names yourself. Nevertheless don’t get too carried away, there are certain rules to naming your tags, such as not including spaces in the names, keeping your names short, simple, descriptive and all lower case. And always remembering to close your tags, every opening tag must have a matching closing tag.

The above XML reads as follow - the first line in any XML file is this XML declaration, HTML also has something like this and it’s basically just saying that this is an XML document and it should be treated as such. This is generally required but technically Flash will work either way. The next line is the root element or parent node, node is just another word for element, again this is very similar to the html tag in HTML in that every other tag will have to be nested between these two tags.

I will explain about the stylesheet in a minute, for now lets save this as “rhymes.xml” and head on over to Flash and create the code and visual elements needed to read our XML document. Open a new movie (.fla) - add two layers an Actions layers and a Visuals layer. Highlight the first frame in the Visuals layer then selects the text tool in the tools bar and drag it along the stage to create your text filed. Finally, in the text Property inspector (Ctrl F3 to access), resize it to about 400*350 pixels and set the follow options:

1. Select “Dynamic Text” from the Text Type drop-down menu. 2. In the Instance Name text box of the Property inspector, give it an instance name of “content_txt”. 3. For Line Type, select “Multiline” to ensure the text wraps correctly. 4. Select “Render text as HTML” and “Selectable” from the Properties inspector

With that out of the way, select the first frame on your Actions layer and opening the Actions panel (F9 to access) paste this code.

What the hell? Right lets go over this. What we’ve done is, create an instance of the StyleSheet class, load our stylesheet using the ‘load’ method and then associate it with our text field. Also, load our XML into Flash using the XML object and call our loadXML function to determine if our XML file loaded successfully. It seems now is a good time, or as good time as any to write our loadXML function so, open the Actions panel again and enter the following.

That’s it! Make sure to save your .fla file in the same folder as the rhymes.xml file and press Ctrl+Enter to test your movie, if you’ve followed the instructions correctly you should see some thing like this.

By George, I think we’ve got it! Though the text still seems a little dull and out of focus. Lets cut to the chase, shall we? I’m hoping you know something about stylesheets already, hopefully from working with HTML and stylesheets (CSS). If not, it’s no biggie. CSS in ActionScript is somewhat limited. The properties listed bellow are all you have access to.

To make this a bit easier for you. I’ve already created the stylesheet for you. Feel free to use it or create your own.

Save the stylesheet as “crisp_styles.css” in the same folder as your other files and, switch back to Flash to display the movie.

Not bad! But, how about adding a little more text between our XML tags to see what a real paragraph might look like. Heck, lets also add an image while we’re at it and amend the stylesheet by adding a class to give emphasis to special words within the paragraph then, we’ll return to the XML document and apply our new class to any word withing our tags as follows.

(1) Open the XML file and add this.

(2) Go to the stylesheet and paste this chunk of code.

(3) Return to the XML to apply our new class.

Needless to say you’ll need to make your own image, also I should point out that the Flash Player does not support progressive JPEG files. Now, if all is well the Flash should look like this.

That’s basically it-it might seem like a lot at first but it really isn’t all that difficult. If you still find this hard to understand, leave a reply.

Share This

Recently I have been talking a lot about Web 2.0 and the far reaching effects it is had through the whole social media phenomenon. Hugely popular sites and services like (Digg, Blogger and YouTube) attract enormous amounts of audiences by delivering the once impossible, now inevitable opportunity to rant to anyone clear across the world or, discuss your special expertise in a particular niche with those who share a similar interests.

In this series of articles (See Resources for links) I will explain how to apply these new trends and new technologies using very inexpensive techniques and services that do not involve tinkering with the HTML code of your pages themselves so you too can be well informed and able to make every effort to take full advantage of the social media era.

First and foremost, stay fresh! Having just a simple digital brochure (e.g. an online bulletin board of your services, contact page etc) simply doesn’t work anymore. Your site has to have regularly updated content. Nobody likes stale news; similarly, your sites content needs to stay fresh in order to continually hook and delight your primary audience. Moreover as a publisher of information people will want to do business with you if they trust you and one of the best ways to build that trust is to provide the users with relevant clear authoritative content.

This involves coming up with a strategy to keep people coming back for the latest and greatest. For example, you could plan to keep up with the latest trends in the home load industry, such as mortgage rate trends, refinancing etcetera. Or you could feature relevant news articles, special promos, tips or tutorials that draw attention to your particular niche. In addition, your plan should provide a checklist with specifics “to do” items essentially saying that you are going to do this many blogs this week, this many podcasts this month, this many videos and keep a regular publishing schedule (remember we’re talking long-term strategy here) so your subscribers will become used to hearing from you and, you’ll be able to gain their trust. So again, your site has to have regularly updated content.

Secondly your content should be made available through RSS (formally “RDF Site Summary”, commonly known as “Really Simple Syndication”) or RSS feed. You don’t need to understand the ins and outs of the RSS protocol (I promised you no tinkering, didn’t I? Though if you want to know more, here is a good place to start), all you need to know is why RSS is becoming so popular and how important it is to make your content available through RSS. Basically, what’s so attractive about RSS (versus bookmarks or even email) is it allows the subscriber to control the delivery of information. In other words, unlike with email, subscribers can limit what they receive to exactly what they want.

If you’ve ever opened your inbox and seen something that looked like spam, walked like spam or quacked like spam I think you can certainly appreciate this. Since users can be counted on to be a little lazy (or would most likely prefer avoiding going all over the place for new information), they’ll just use sites and services like myYahoo or Google Reader that can constantly checks their favorite news sites and blogs for new content. Consequently, as the web becomes more and more decentralized placing media control in users’ hands and allowing them to experience what they want, when they want, your site needs to adjust to this decentralize nature and be present wherever your target market is looking. So, whether you are posting up article regularly, video blogging or podcasting, whatever the case maybe, you need to be positioned to allow syndication on your site and that means making your content available through an RSS feed.

In the upcoming weeks I will be talking more about these new Web 2.0 trends and also show you the easiest way to launch your own ready-built web 2.0 site. Likewise, please feel free to share your thoughts and comments and make sure to check back for more updates.

Resources:
Is Your Site Search Engine & User Friendly?
How Can Interactivity Increase Conversions & Make You Money?

Share This

This is an opportunity to share some tips with beginning to intermediate Flashers who want a quick, friendly way to get that Flash on. The code samples in here are actual working chunks of code. I assume you already know something about ActionScript and Flash (or Cut and Paste, if you know what I mean). If you don’t know what trace() is, point that cursor away before you hurt somebody. I’m not kidding. Right now!

10- Q: How can I make my Flash site display current time and date?

A: You can do it with the help of the Date() class available in Action Script. This class has all the necessary methods to retrieve full information about the current time. Before using these methods you need to create a date “object” in the class, this is because the methods are not static and they can only be applied to a single object. To create a Date object please, use the following syntax:

After that you can use different methods for this object getDate(), getDay(), getFullYear(), getHours(), getMilliseconds(), getMonth() and so on). Use Flash Help documentation to learn more about the Date() class and its methods.
For example:

Note: You can retrieve both your operating system time and universal time - UTC (known before as GMT Greenwich mean time). To display UTC time you should use the methods that have “UTC” in their names (getUTCDate(), getUTCDay(), getUTCFullYear(), getUTCHours(), getUTCMilliseconds(), getUTCMonth() and so on)

See also:

How to set up the current time and date demo movie

Here’s the code used in the demo movie:

9- Q: How do I edit images on Flash?

A: Open your source “FLA” file in Adobe Flash and press “F11″ to launch symbols library. To perform search of a needed image symbol will be easier if you sort them “by kind” simply by pressing “kind” tab at the top of symbols list. You’ll see that all bitmap symbols are grouped now at the top of the whole symbols library.

Browse these symbols to find symbol your want to substitute. You can see symbols preview at the top of symbols library. When you have found necessary bitmap symbol double click the icon on the left of it as to see the symbol properties window.

You’ll see image preview and options there. Check the image size. It looks like 284 x 423 pixels at 32 bits per pixel. To make your image fit the original effects and animation the best way your image must be exactly the same size as in the original image.

You can resize or crop your image using Adobe Photoshop. Open your image in it using “File/Open…” from the top menu. To resize or crop choose “Image/Image Size…” or “Image/Canvas Size…” accordingly. Then save image using “File/Save As…”, for using it in flash choose one of the following image formats: “JPEG”, “GIF” or “PNG”.

Press “Import” button on the left and browse to location of your image file.

At the bitmap symbols properties window you can change the image quality. Make it lower to reduce published file size.

Now you should publish your flash movie.

8- Q: Can you give me a step by step explanation on how to publish my Flash site?

A: You may want to modify the publish settings to reduce the download time or increase the image quality. To do so, please, choose “File/Publish Settings…” from top menu. In “Publish Settings” window choose “Flash” tab. The main options that have significantly influenced the published “SWF” movie file size are Jpeg Quality, Audio Stream and Audio Event.

To change jpeg image compression ratio move “Jpeg Quality” slider or type it in the input box at the right of it. Low quality (high compression) extremely reduces download time by flash looses its professional look. Try to experiment with quality to get optimal size/quality balance.

Another way to affect movie size is to change Audio Stream and Event options. Press “Set” button on the right to change music quality options.

Quick Tip! Actually, you can publish your movie directly from “Publish Settings” window, see “Publish” button at the bottom. Or you can publish it from every point of Adobe Flash by pressing “SHIFT+F12″ hotkey.

Published “SWF” file will appear in the folder were corresponding “FLA” file is located.

Replace old “SWF” file in “yourwebsite.com/flash” folder with a new one. Now it’s time to check modifications you’ve made. Go to the page on your website were you have embedded the movie and launch it to see the changes.

7- Q: How can I add a flash page to Favorites?

A: You should use the following Java script to bookmark the page:

You can apply this script to any button (text, image). It should work.

6- Q: How can I can make a certain number of images display randomly?

A: In Flash (as well as in JavaScript) you can use the Math.random() function which generates pseudo-random numbers. This function can help you in making a slideshow when you need to use a large amount of images. You only have to store these images in the Flash library, convert them to slideshows, and give them names (that include the various numbers assigned to each slide). After that apply a code similar to the one shown in the following demonstration: How to make images display randomly demo movie

5- Q: How do I link a button to an Adobe PDF document?

A: In Flash MX as well as flash MX 2004 and Flash 8, a hyperlink is created through the getURL() command. The getURL() command provides a means for the browser to jump from one page to the other. The getURL() command can also be used to open an executable application like a PDF document. Click “Window” and choose “Actions” or press “F9″ on your keyboard to access the Actions panel. You should type the following action script provided below into the white space to open up an executable PDF file:

Now test your movie by pressing “CTRL+ENTER“.

4- Q: I would like to open new windows with just the images in them and certain options like no scrollbars, no toolbars, specific height and width, etc. Please, advise.

A: You can use Java script to do this.

In flash it should be assigned to the button (image, text etc.)

In index.html that relates to this flash you should write in the following java script, like this (don’t change anything):

Put it between tags in index.html. Then add the following part to < embed> tag:

It will work.

3- Q: How do I duplicate symbols?

A: Duplicating a symbol lets you use an existing symbol as a starting point for creating a symbol. Open your source “FLA” file in Adobe Flash and press “F11″ to launch symbols library. From library, what we need to do is right-click (Windows) or Control-click (Macintosh) the symbol, select Duplicate Symbol and give the duplicate symbol it’s name.

Next, drag the symbol unto the stage and give it an instance name. Note an instance name and a symbol name are tow totally different things. Meaning, that while there may be two or more instances of the same symbol with the same name “symbol 1”, each instance must have assigned a unique identifier (e.g. instance name) for all ActionScrip reference purposes.

To edit the symbol, you simply double click the symbol to access it in the Main Area. Then double click the text area and enter your own slogan. Once you edit a symbol, Flash updates all the instances of that symbol in your document. You can customize all other Flash elements by repeating these simple steps.

2- Q: Does Google index sites that use Adobe Flash and How do I use SEO for my flash website?

A: Yes, Google indexes pages that use Adobe Flash. However, their crawlers may experience problems indexing Flash pages. If you’re concerned that Flash content on your pages may be inhibiting Google’s ability to crawl your site, you may want to consider using a text browser such as Lynx to examine your site. If features such as Flash keep you from seeing all of your site in a text browser, then search engine spiders may have trouble crawling your site.

You may want to consider creating HTML copies of these Flash pages for the crawler. If you create HTML copies, please be sure to include a robots.txt file that disallows the Flash pages in order to ensure that their crawler doesn’t recognize these pages as duplicate content. A hybrid site such as this, works especially well, if your navigation uses traditional HTML links. You can use cascading style sheets to give the appearance of flash text links. This type of hybrid site will always rank better than an all Flash site - all other factors being equal. It’s also important to have your HTML page title correct, regardless of anything else. Several search engines look at meta titles first. In addition to the page title, you can add meta tags to the head of the file.

Outside of the actual HTML page, off page factors are important. One-way links (sometimes called inbound link) pointing to your site from highly relevant and high ranking pages will increase your page rank. In addition links from prominent directories, such as Yahoo and Business.com, placed in the most relevant categories will help. One-way inbound links from relevant sites is still the best way to increase your ranking with or without Flash.

Quick Tip! You might also want to consider creating and submitting a detailed site map of your pages using Sitemaps. Sitemaps are an easy way for you to submit all your URLs to the Google index and get detailed reports about the visibility of your pages on Google. With Sitemaps, you can automatically keep them informed of all of your current pages and of any updates you make to those pages.

To learn more about Google and how to optimize Flash for higher ranking, got to http://www.google.com/webmasters/

1 - Q: Does anyone know a free, easy way to create Flash for my website or to create a flash website?

A: Flash animation is a very attractive element of your website. You can easily created using Flash templates.

A Flash template is a complete site design that can be opened with Adobe Flash, filled with content and edited to suit particular needs. Flash templates will give your website a professional look with a minimal time and money expense.

Quick Tip! Most quality template shops will provide you with a free flash template so you can evaluate the quality of the product and try your skills before you buy.

How to create a Flash form to send email without any knowledge of ASP, PHP or any other programing languages?

A: If you have been searching around trying to figure out what is the easiest way to make a Flash contact form work, check out this post.

If you guys find these answers useful please make sure to give it a digg by clicking the digg button…. we really appreciate it! Also let us know what other questions you might have or any tutorials you think might be useful. Basically, help us help you.

Share This