Home > Tags > Flash
Page 1

SEO and Web Development: Pros and Cons of Sitemap.xml

Miscellaneous SEO Oct 2, 2012    3 comments

When designing the architecture and navigational structure of a web site, a sitemap can be extremely helpful. A sitemap can keep the navigation links organized by category, predict how any dynamic links will function, and keep the framework under control. Web developers are not the only parties involved in the process who can benefit from a well-structured sitemap. Many search engines, including Googlebot, can crawl through an XML file that contains the sitemap data to crawl and index the site’s content.

What is sitemap.xml?

A sitemap.xml file contains the URL of each page within a site, as well as data on all the files within that page.

Sitemap.xml Example Here is an example of a simple page with a single image and video file:

<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"> <url> <loc>http://www.example.com/cutekitty.html</loc> <lastmod>2012-09-09</lastmod> <changefreq>daily</changefreq> <priority>1.0</priority> <image:image> <image:loc>http://example.com/image.jpg</image:loc> </image:image> <video:video> <video:content_loc>http://www.example.com/cutekitty.flv</video:content_loc> <video:player_loc allow_embed="yes" autoplay="ap=1">http://www.example.com/videoplayer.swf?video=123</video:player_loc>...
more →
Rajesh Kanjani says: Sitemap is the list of all the URLs appearing in your website. An XML sitemap is a fairly simple XML file that contains...

Creating First Animations With CSS3 Using Keyframes

CSS Apr 23, 2012    5 comments

One of the main reasons the emergence of CSS3 has been so hotly anticipated is the fact that, in combination with HTML5, it will pose a genuine alternative to technologies such as Flash. With CSS3 and HTML5, you will ultimately be able to create animated, interactive multimedia applications that will be accessible to users regardless of whether Flash is supported in their environment – great news if you’re developing Web apps for iOS or for mobile users in general. In this tutorial we will create a simple first animation using CSS3 keyframes.

Our animation is going to feature a childish cartoon bus moving along the X axis, speeding up in the middle before slowing down again. The bus and wheels will be separate images, with the wheels spinning as the bus moves. These are our image files:

Here is a screenshot from the final animation:

Create a Web Page

Let’s create an HTML5 page as follows:

<!DOCTYPE html> <html> <head> <style type="text/css"> </style> </head> <body> </body> </html>

Add the image elements to the body section of your page, including the bus and two copies of the wheel:

<div> <img class="bus" src="bus.png"/> <img class="b_wheel" src="wheel.png"/> <img class="f_wheel" src="wheel.png"/> </div>

We will use the class attributes to apply styling to the image elements.

Apply Default Styling

Start your CSS3 code by adding style properties for the container “div” as follows:

/*background element*/ div { width:600px; height:220px; background: linear-gradient(top, blue, green); background: -moz-linear-gradient(top, blue, green); background: -webkit-linear-gradient(top, blue, green); }

Here we simply apply a gradient background together with dimensions. Notice that the prefixes we are using only include the default syntax plus versions for Mozilla and Webkit (Safari and Chrome). Internet Explorer and Opera do not yet support the techniques we will be using in this tutorial so we will not be targeting them.

Now add properties for the initial style of your wheel images:

/*initial properties*/ .f_wheel { position:absolute; top:160px; left:190px; } .b_wheel { position:absolute; top:160px; left:50px; }

We use absolute positioning to make sure the wheels and bus are displayed correctly and will move together. Add the initial styling for the bus image:

/*bus properties*/ .bus { position:absolute; top:50px; left:30px; /*animations*/ }

We are going to add more properties in this block, indicating the animations we want to apply to the bus element.

Indicate the Animations

Our bus moving and wheel spinning animations are going to be specified using CSS3 keyframes. We will define the animations in dedicated keyframes sections, but we also need to tell the browser to apply these animations to particular elements. Add the following to your existing “.bus” declarations:

animation: moveBus 5s ease-in-out forwards;...
more →
FeliciaCorrine says: So finally animation is possible using CSS3. It will surely eliminate the extra cost associated with using third party services....

SEO for Web Developers Part 2

Miscellaneous Jan 20, 2012    11 comments

Some experts say search only drives 30 percent of a website’s traffic.

While that may seem insignificant, that 30 percent often makes up visitors who are looking for the products, services or information specific to your company so losing them could have a significant impact on how well an organization performs.

In part one of this series we looked at some things that web developers need to consider when it comes to search engine optimization, but now it’s time to step up to the plate. Let’s roll up our sleeves and really see what it is we can do to help our site compete in the search engine results page.

While we know that our objective is to rank high, we need to understand what it is that prevents a site from achieving that goal, from a developer’s standpoint.

As a developer, the number one thing we need to consider is can a search engine spider crawl my web site? Because quite honestly, if the pages of the site can’t be crawled nothing else really matters.

So what prevents a spider program from finding the right information on our websites?

Frames

In the past spiders were not able to read frames, but now almost all the major spiders can read them. If you do need to solve a problem for a particular spider, the quick solution is to utilize your “No Frames” tag content to optimize your page. It is also advisable to make sure that you use a base href tag in your header to help search engines understand better.

Password Protected Pages

These are pages you probably don’t want indexed anyway. Just be aware that like a human, the spider cannot enter any area that is protected by a password.

If you have content behind these pages that you want people to find via the search engines, consider using a teaser with some of the content that can be indexed and protect the rest.

Flash Sites

Flash looks cool, it adds interactivity to your site but most of the time it give the search engine spiders some trouble. Recently, Google is reading, indexing and ranking Flash pages based on the text content used in the Flash code. However this is not optimal optimization.

One solution would be to use an entrance page that is keyword rich, create a two frame frameset where one frame is only one pixel in height and use the No Frames area, or to alternate the use of Flash and static HTML.

Image Maps

These are funny because they can be read by some spiders but not by others. If you plan to use an image map, make sure there are other links on the page (perhaps on the bottom) that link to your other pages or better still to a site map that links to all your pages with good anchor text.

PDF Files

These are a popular way to share content but they present a major stumbling block to most spiders. Some engines (specifically Google) are now, however, beginning to index this kind of pages.

Dynamic Pages

Some search engine spiders have problems with dynamic pages which contain variables in the URL. This is most often seen with dynamic pages that use CGI, ASP, or Cold Fusion. Google for instance will not index pages shower URL contains id= followed by more than ten characters or if there are too many variables in the URL. If you are having problems with dynamically generated pages you should consider using the rewrite module of the Apache server to rewrite those dynamic urls into static looking URL or using a similar add on if hosted on a Windows server. There are also PHP scripts which can be implemented which will change the address into a readable page.

...
more →
Ryan Keefer says: This is a pretty dated sounding article. Who uses frames and image maps in modern day sites. A lot of SEO is common sense, and...

Developing With The HTML5 Element

HTML5 JavaScript Nov 23, 2011    2 comments

Videos have been a great way to attract viewers to a website long before YouTube launched back in 2005.  But it wasn’t until the release of HTML5 that web developers have had a lightweight solution to playing the video.  In the past, displaying a video on your site meant your viewer was required to have a Flash or Java-based player installed on their system in order to watch the video.  This was one more thing that would weigh down your site, causing pages to load slower, and be one more thing you’d have to trust the viewer to download and install.

Handling a video with HTML5 can be as simple as this.

<video src=”videos/myMovie.mp4” controls></video>

You’ve got the source and have added the browsers native controls.  That’s approximately 41 less lines of code than a site I recently worked on that was using a Flash player, not to mention the player itself had a fairly bulky file size.

Flash and Java Video Players

One big advantage that Flash and Java video players have over the new HTML5 video element is that they’re able to stream live video.  The HTML5 video element is still in its infancy and as of now is not able to stream any sort of live video feed.  Another major advantage that a Flash of Java video player has over HTML5 is that they can handle 3D effects.  This could be a major factor in preventing HTML5 video players from taking away a large amount of market share from Flash and Java players.  As we’re seeing an influx of films coming out in 3D, as well as major sporting events being broadcast in 3D, the ability to handle 3D and streaming content is becoming a more crucial requirement for a video player.  Add the growing number of people who choose to stream movies or TV shows from sites like Netflix, Hulu, or YouTube, and the demand for a powerful, robust video player grows even more.

One of the downsides to having a Flash video player, aside from file sizes and it being an add-on that the viewer must install, is that Flash is not compatible with Apple tablets and mobile devices.  With Net Applications announcing iOS grew to owning 61.6% of the mobile market share in the month of October, that appears to be a big down side.  Especially when you consider more people opt to browse websites from their mobile device or tablets instead of using their computer.

Java players gain their biggest edge over Flash players by being compatible with the iPhone, iPad, and iPod touch. The reason behind Apple’s decision not to support Flash stems from Flash being a “closed” system, meaning that Adobe Flash products are only available from Adobe and Adobe controls the future of the product in regards to upgrades and pricing.  This is opposed to Java, which is an “open” programming language.  Downsides to a Java video player are very similar to that of Flash as well, larger file sizes, and the need for the viewer to install a plug-in for their browser to display the video.

HTML5 Video Element

We’ve already established that an HTML5 video player can mean you have a substantially smaller file size, but as with Flash and Java, HTML5 has its advantages and disadvantages.  An HTML5 video player will also be cross-browser friendly and work on Apple products.  However, just because you’ve implemented an HTML5 video player on your site does not mean that the video will play on an Apple product.  This is an issue I pointed out with a recent client; they wanted to switch their site from a Flash video player to HTML5 so that it would play on an iPhone or iPad.  It was at this point I had to point out that their video formats were in FLV, a video compressed with Flash.

To accommodate anyone who might be viewing your site from an Apple mobile device or tablet there are some video compression guidelines you will want to follow.  An iPhone will play MPEG-4 videos or QuickTime videos that were compressed with MPEG-4, meaning H.264 video and AAC audio.  It’s also worth noting that the iPhone does not support B-Frames.  If you’re given the option of encoding your video in a multi-pass or single-pass mode, choose single, even though you will most likely be encouraged to do multi-pass for best quality.  I’ve found that 480×360 dimensions is a nice median to accommodate full screen on a computer without distorting the image too much, and not ending up with a file so large it takes too long to load on an iPhone.

HTML5 will also allow you to name multiple video sources, OGG, MPEG-4, and WebM.  OGG is compatible with Firefox 3.5+, Opera 10.5+, and Chrome 5.0+, but not IE or Safari.  MPEG-4 is supported by IE 9.0+, Chrome 5.0+, and Safari 3.0+, but not Firefox, or Opera.  While WebM is supported by Firefox 4.0+, Opera 10.6+, and Chrome 6.0+, but not IE or Safari.  Being able to point to multiple sources will ensure that your video is able to play on any major browser, with the only downside being you to have multiple formats of your video.

Pointing to multiple video sources is as easy as one might think, “just include the source for each”.

<video controls> <source src=”videos/myMovie.mp4” type=”video/mp4” /> <source src=”videos/myMovie.ogg” type=”video/ogg” /> <source src=”videos/myMovie.webm” type=”video/webm” /> </video>

Moving Forward With <video>

Some might say that the <video> element is too little too late, but using HTML5 to display a simple static video on your site is a perfect way to ensure viewers to your site will be able to see it, whether it’s on a mobile device or a desktop computer.  It’s lightweight and requires no additional plug-in to work.  As with all new technologies you have to start somewhere, and from there you begin to see areas in which it can be improved.  Being someone who strives to develop as lightweight of sites as possible, I am excited to see what direction the new HTML5 video element goes.

...
more →
UK Logo Design says: Very well shared, this is nice to read this article. i am learning web designing and development, so this element will be more...
Hot deals See all deals →
20 One-Page Responsive Templates with Parallax Effect - only $19!
1000+ Royalty Free Vectors + 50 Free Textures - only $17!
3,000 Items! MEGA Design Bundle (worth over $1,000) - only $49!
Beautiful Solomon Font Family (12 fonts) - only $9!