Posts tagged as:
css
Flash Technology Enhances Search Results (I Don’t Think So!)
Up till now search engines (Google, Yahoo! etc) weren’t ever able to crawl Flash files and when they did end up indexing some it was never completely free from error. So if you wanted to built a website and actually have people find it, then it made sense to do without the Flash. Nonetheless Flash still became very trendy among developers because of its knack for, shall we say, overlooking the obvious and putting together very unusual websites.
Adobe also says it’s “providing optimized Adobe® Flash® Player technology to Google and Yahoo! to enhance search engine indexing of the Flash file format (SWF) and uncover information that is currently UNDISCOVERABLE by search engines.”
Sweet! Now that Adobe has finally admitted (despite arguments to the contrary) that SWF format has never been properly index by anyone of the search engines (or that its always been pretty much crap) that should finally shut up all you evangelical Flash pushers and feens clamming Flash is the holy grail of the Internet. Shouldn’t?
So has Adobe really done what its says its done? Frankly I’m not sure. Adobe claims that this stuff will provide more relevant search results and rankings for RIA content. And in a separate blog post, Google also seems to affirm that claim stating that they’ve already launched a “Flash indexing algorithm”, which will result in better search results. Well, before you all start heading to Starbucks and buying each other those skinny soy decaf lattes, the real questions is, how much better is this as opposed to plain old static HTML text and what are the confines?
They say that in the land of the blind the one eyed man is king, similarly if up till now flash files were not being indexed whatsoever, then the fact that there’s been a little progress may indeed be called “better”, but Flash indexing algorithm or not there’s still a lot of reasons why you should never go for a 100% flash-based website.
Yes Google can now discover and index text content in SWF files of all kinds etcetera, etcetera, but there’s some limitations. For example, Googlebot does not execute some types of JavaScript. Which means that if your webpage uses JavaScript to load a Flash file. Guess what? They may not be able to discover and index the contents of that file.
Google has also admitted they “can’t attach content from external resources that are loaded by your Flash files.” In other words so if your Flash file loads another file - such as an HTML file, an XML file, or another SWF file – what their saying is that they might index the contents of those files, but they won’t consider that content to be part of the content in your Flash files. That doesn’t sound very impressive, does it? What then? The Flash indexing algorithm does exactly what it sounds like it does NOTHING, other than the rendering of incomplete documents and the dramatic equivalent of inaccessibility.
Generally speaking when designing sites for my clients, I tend to make my content driven Flash applications run off of external XML files that are read at runtime. That way even a novice web developer with no understanding of Flash can have the functionality of editing their website’s content in notepad, and not have to recompile the swf file. Are you seriously suggesting not attaching the contents of those files to the rest of my Flash file? Seriously? Are you kidding? What the f$#@ are you talking about!
Does Adobe really expect us to believe that this will provide more relevant organic search rankings? Listen, I want my Flash files to be indexed just as much as the next guy and while this is a welcomed and important step in the right direction on the part of Adobe there’s still a lot of work to do.
So, if you do decide to use Flash (God help us all), do it in moderation and remember while Google can index the content of Flash files, other search engines wont. On that note, don’t forget to provide text equivalents of these files to help other search engines crawl and index your content.
{ 0 comments }
Web Design Wisdom
If reading big thick books just isn’t your thing, see if you can master some of the idiosyncrasies of Flash with ready made website templates. By now most of you already know that website templates can save you a lot of time and effort, but did you know they can also be wonderful as a gentle introduction to the world of web design? Think about it, by having access to the website templates source files we’re actually being given the opportunity to be taught and inspired by the combine efforts of many very skilled developers.
This is perfect for designing reusable apps such as pre-loaders, image galleries and contact forms where’s with the website templates you don’t need to reinvent the wheel anymore. CSS templates can be used to study two to three column layouts and style rules, which you can later apply to any project. Another good example are scalable layouts templates, commonly knows as liquid templates or stretched templates, with one of these ready made liquid templates you’ll be able to master the art of getting around varied screen sizes and resolutions. My personal favorite templates are XML Flash templates because of their unique feature which allows the content to be loaded onto the Flash templates via any text file – a function to keep handy if your ever around Flash.
Yeah, you could spend hundreds of hour reading tutorials on all sorts of topics by rhetorical experts peddling everything from color schemes to grid design, however most of that is either to technical or just isn’t practical in the real world where clients demand more professionalism. The great thing about premium templates is that they are created by professional web designers using the latest technology. In other words these ready-made website templates are made by people that understand typography, layout things like that; skills one could only wish to achieve after years of practice as a graphics designer and or programmer.
Where were website templates 10 years ago, when I first got into Flash? Anyway, these are just some of the benefits of website templates, I’m sure there are many more so please feel free to leave me your thoughts, comments and or experiences you may have had using templates. Also, mustn’t forget to mention that most premium templates shops will even give you a website template free so you can evaluate the quality of the product and try your skill before you buy.
{ 0 comments }
How to beat Internet explorer when it comes to CSS and stop its regime of terror when using the net!
I am guessing an article on this subject has been posted prior to this one, I should hope a few have! However I hope this will provide a refreshing angle on the subject and branch to some other interesting bits of stuff.
I am sure that anyone who has taken even only a few steps into web development has come across the gigantic force that is Microsoft’s Internet Explorer. Even for the most experienced coders, the most popular browser of this age has always been a prominent foot across the path of our websites technological progression and the possibilities of which the internet is yet to yield. Maybe not crushing ideas, but certainly making it a lot harder to bring these ideas from paper to browser.
However, although IE, wielding its scathing weapon the Microsoft corp. and therefore for-fronting the battle as the windows default has dominated the market; we have weapons which allow us the fight back! I think I’ll cut the metaphors here and get back to business… Well, how can we fight back? And more importantly, what can be done to keep our designs looking slick in the interim… Yeah before the proper browsers take over!
I’ll start with the fighting back. Personally my favorite method would be to utilize a conditional comment and tell people what they should be doing! Something like this…
Realistically I wouldn’t try this method though, probably not the most tactful way when it gets down to it. You could however place a banner showing your support of these less buggy browsers such as firefox. This websites great for this promoting firefox business, very nice banners right here: http://www.spreadfirefox.com/?q=affiliates/homepage
Conditionals are pretty clever little buggers though, for general use they can become quite useful. And you’re not just limited to
. The comments understand other operators as well; you’ve got the NOT operator which is an ‘!’. So “if not IE” would be
.
In addition to this there are “greater than” = ‘gt’, “greater than or equal to” = ‘gte’, “less then” = ‘lt’ and “less than or equal to” = ‘lte’. These can be used when referring to browser versions, so
could be used to warn users about a feature unavailable to them when browsing your site with IE version 5.0 and below.
But we are not here to help out the Internet explorer users; we’re here to convert them! Doing your bit locally can make all the difference. If you are round at a friends and he/she happens to log on to the internet using IE (boooooo), make it your concern that the very first thing that is done is the downloading of firefox (sorry Opera etc I’m a bit biased to the mighty fox.) Of course if the loging on to the internet part does not occur in the general flow of things it must also be your concern to make sure it does!… “Umm, you mind if I check the train times?” Okay I’m getting a bit carried away here, although very important to the advancement of the human race, you need not devote your life to spreading firefox.
The great progression in the internet and its uses over the last few years has meant that the look and the feel of a site has come under a lot more scrutiny, especially with ever rising amounts of traffic as more and more people connect to the internet. Complicated uses of graphics and CSS mean that when it come to interpretation by different browsers, everything can go wrong. The Browser that is renowned for taking perfect code and screwing with the end results is of course Internet explorer. It is so tempting just to say screw it and ignore the IE users and their browser, but with over 58% still using a version of IE this really isn’t plausible solution.
So okay we’ve got to fix the problem. Where to start?
Well firstly it is a must to make sure your code is valid. Just from an incorrectly written Doctype or wrongly phrased line of css can through internet explorer into all sorts of funny modes where anything can happen. Make sure you get a green light here http://validator.w3.org/ and here http://htmlhelp.com .
Good stuff, that’s one step in the right direction if anything. Now if the problem still exists, what now?
Most of IE’s rendering blips are caused by bugs, which can be worked around with quick alterations or what are called hacks. Chances are your problem has been experienced by people before you and a fix has been fabricated already.
So what’s going wrong? I will list a few of the most common bugs, some which I myself have experienced and a link to some relevant articles explaining in depth the fixes.
My borders have gone crazy! - fix…
http://www.positioniseverything.net
Margins doubled, pushing my content down and generally mucking stuff up - fix…
http://www.positioniseverything.net
Contents there one minute gone the next, the peekaboo bug - fix…
http://www.positioniseverything.net
You may have noticed that all those fixes above are at one website. Basically “Big John” and co of Position is Everything .net have done a fantastic job among some other geniuses out there, so why don’t I just give you guys a link to his site, the chances are you’ll be able to find a fix there… http://www.positioniseverything.net
You’ve now with a bit of time and effort (it sucks doesn’t it, and it really is unnecessary effort!) probably been able to fixed up your site. But what if something still purists, what can you do!? Well here is what I do…
Firstly if you know something which could be causing the inconsistencies in your site when rendered by different browsers, try just experimenting with this particular element of the code. Say the content part of your page is being pushed below your side navigation and you recon that IE is playing with your margin values but it’s not the double margin bug. Just adjusting the values of margins can bring results. This is a good time to introduce an excellent piece of free software called CssVista. If you know css well it can also be an excellent tool when in depth analysing your code when looking for problems. Check it out here
http://litmusapp.com/cssvista/
If you can still find no joy using this experimentation method I’m afraid the best hope is now to do what I really find annoying especially since if browser bugs didn’t exist it probably wouldn’t be necessary. We’re going to have to start again. Now don’t panic we’re not going to redesign your site from scratch, we’re going to make a mock up page of your current design, testing for rendering problems all the way.
Okay, well your average website nowadays is divs inside divs inside divs. So first step is to create you’re outermost div and in your css give it all the position you want and a background-color so that you can see it. Now add the divs that are contained with-in this one and do the same thing, giving them all nice bright colours so you know exactly where they are. Now test it like crazy, anything going wrong so far? Basically keep going like this, until something starts to look weird, then think why it doing this? What have I just done to make it go weird? Google and other free recourses can be come very useful now. Yahoo answers is fantastic for everything so it is always worth a try at http://answers.yahoo.com.
That’s about it really; Give that a try and well, good luck!
So, we’ve had a quick look at how to rid the world of Internet Explorer and how to get by in the time being. I’m not a fan of Microsoft attempt at an internet browser but not really in the league of this guy http://toastytech.com/evil/index.html.
Basically guys have fun and make sure you’re not supporting the IE domination by using it!
Pete Taylour is co-owner of the fast growing ebook site http://www.liqiuidebooks.com the only place to go for your cheap and free ebooks. With strong interests in a huge amount of different music styles Pete and friend are soon to embark on some crazy mix submission site for upcoming DJs across the globe, be sure to keep your eyes peeled for that and make sure you check out Liquid Ebooks at http://www.liquidebooks.com
About the Author
Pete Taylour is co-owner of the fast growing ebook site http://www.liqiuidebooks.com the only place to go for your cheap and free ebooks. With strong interests in a huge amount of different music styles Pete and friend are soon to embark on some crazy mix submission site for upcoming DJs across the globe, be sure to keep your eyes peeled for that and make sure you check out Liquid Ebooks at http://www.liquidebooks.com
{ 0 comments }
Stylesheets, Flash and XML for Dummies
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.
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.
<mynursery_rhymes>
<itsybitsy>The Itsy Bitsy Spider</itsybitsy>
<foofoo>Little Bunny Foo Foo</foofoo>
<littlelamb>Mary had a little lamb</littlelamb>
</mynursery_rhymes>
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.
var format = new TextField.StyleSheet();
var path = "crisp_styles.css";
format.load(path);
content_txt.styleSheet = format;
// Load XML source
xmlData = new XML();
// ignore any white spaces in the XML content
xmlData.ignoreWhite = true;
// load our XML file into our XMl object
xmlData.load("rhymes.xml");
// check that the XML file has been loaded successfully
xmlData.onLoad = loadXML;
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.
if (loaded) {
content_txt.condenseWhite = true;
content_txt.htmlText = xmlData;
} else {
content_txt.text = "Error while loading XML document";
}
}
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.
display;
font-family;
font-size;
margin-left;
margin-right;
text-align;
text-decoration;
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.
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #689891;
display: inline;
}
foofoo {
font-family:arial, lucida console, sans-serif;
font-size: 11px;
color: #C1C6E3;
display: inline;
}
littlelamb {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
display: inline;
}
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.
<mynursery_rhymes>
<itsybitsy><img align="left" src="rhymes.jpg" width="156" height="165" hspace="10" vspace="10"/>The Itsy Bitsy Spider
Climed up the water spout;
Down came the rain
And washed poor the Spider out</itsybitsy>
<foofoo>Little Bunny Foo Foo
hoppin’ through the forest,
scoopin’ up the field mice
and boppin’ em on the head.</foofoo>
<littlelamb>Mary had a little lamb,
little lamb, little lamb,
Mary had a little lamb, its fleece was white as snow.</littlelamb>
</mynursery_rhymes>
(2) Go to the stylesheet and paste this chunk of code.
color: #FCB6B8;
}
(3) Return to the XML to apply our new class.
<mynursery_rhymes>
<itsybitsy><img align="left" src="rhymes.jpg" width="156" height="165" hspace="10" vspace="10"/>The Itsy Bitsy Spider
Climed up the water spout;
Down came the rain
And <span class="note">washed</span> the Spider out</itsybitsy>
<foofoo>Little Bunny Foo Foo
hoppin’ through the forest,
scoopin’ up the field mice
and <span class="note">boppin</span>‘ em on the head.</foofoo>
<littlelamb>Mary had a little lamb,
little lamb, little lamb,
Mary had a little lamb, its fleece was <span class="note">white</span> as snow.</littlelamb>
</mynursery_rhymes>
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.
{ 10 comments }