Showcases slider

Many of the sites I make use JavaScript. The last years JavaScript is being used more then Flash, because it loads faster, it is supported by more browsers (for example, by the browsers on the iPad or iPhone) and it’s more easy to maintain.

On the main page of the company-site we use JQuery to create a nice slideshow with some of our projects. The HTML of the showcases is created with PHP, the css makes sure the HTML blocks are visualized the correct way and the JavaScript finally adds the animation.

The script is activated by pressing on either the “next” or “previous” button, and JQuery UI makes sure the animation goes smooth. The script also shows a bouncing animation when there are no more showcases to show. You can try this by entering our website (link below in my bio).

Here is the script that makes the animation possible:

function homeBottomSlider(to) { var bloque = $ (‘#bloque_powered_by_home’); var step = 740;

var item = 0; if (bloque.attr(‘_current’)) { item = parseInt(bloque.attr(‘_current’),10); } if (to == ‘next’) { item++; } else { item–; } var margin_new = item * step;

if (item<0) { bloque.animate({‘margin-left’:’50px’}, {duration: 100, queue: false, complete: function() { bloque.animate({‘margin-left’:’0px’}, {duration: 500, easing: ‘easeOutBounce’, queue: false}); }}); return false; }else if (margin_new >= bloque.width()) { var bounce_start = ((item-1) * step) + 50; var bounce_end = bounce_start – 50; bloque.animate({‘margin-left’: ‘-’+ bounce_start + ‘px’}, {duration: 100, queue: false, complete: function() { bloque.animate({‘margin-left’: ‘-’+ bounce_end + ‘px’}, {duration: 500, easing: ‘easeOutBounce’, queue: false}); }}); return false; } bloque.attr({‘_current’: item}); bloque.animate({‘margin-left’: ‘-’+ margin_new + ‘px’}, {duration: 1000, easing: ‘easeInOutSine’, queue: false});}

Make sure to include the JQuery and JQuery UI scripts too. You can download these scripts at the official site of JQuery. A quick search in Google will tell you the url.

One note. When JavaScript is deactivated the site will still show the showcases, but it will not be possible to start the animation. And when there is no JavaScript and CSS available, all the showcases will be visible together as plain text (with the rest of the plain text of the site). This JavaScript solution is an accessible solution. Both for browsers for blind people and for spiders of search engines.

And, as an extra effect, we´ve attached a “fancyzoom” animation (a JQuery plugin) when a user clicks on one of the images of the showcases. This script asynchronously loads the main image and shows it in the centre of the browser.</0)>

Use and distribution of this article is subject to our Publisher Guidelines
whereby the original author’s information and copyright must be included.

SEO: Get Ready For HTML5

HTML5, the new HTML standard is something every SEO should be learning. As HTML can be considered the most important way that search engines crawl content and index web pages.

Although it is still under construction, the day it becomes completed all SEO’s must be able to optimise websites according to the new rules and to stay ahead of the competition.

HTML5 introduces many new changes, that for an SEO expert will be interesting to implement at a future date. By developing an understanding for the new changes will help give yourself an advantage once the release date is upon us. Being able to implement the changes first could bring the best results.

Here are the new changes being introduced, and why it may impact SEO:

Page Segmentation

Improvements to page segmentation will result in increased visibility, showing what content goes where and it’s importance. The new elements that can be used are:

headerarticleasidefooter

Currently, the only way to segment a web page is by using div elements. Unfortunately, the div element does not apply semantic value to what’s inside each element. But the new proposed elements such as header and footer allows web pages to be segmented with meaning.

From an SEO point of view, the increased use of semantic mark-up can allow for increased importance on specific content that is placed within article, whilst placing information that is not required from an SEO perspective elsewhere.

The header element can help display the location of navigation and logo etc…

Schema.org

Schema.org is an initiative created by Google, Yahoo and Bing. The goal is to “create and support a common vocabulary for structured data mark-up on web pages”.

The main highlight is on structured data, giving relationships between items that can now be read in a ‘machine-readable format’. By using microdata, semantic information can be placed into code of existing web pages.

The benefit of using microdata is that it’s the only recognised ‘vocabulary’ by HTML5, meaning both microformats and RDFa will not benefit the same way microdata will. Also, allowing webmasters the chance to enhance how their site looks and appears in search engine results pages for the three major search engines.

Other benefits microdata has brought can be seen within the SERPs, with the rise of rich snippets that have helped improve the user experience.

An important aspect of HTML5 is that it can help improve search engines index a website. At the moment there is little change that has been introduced to the daily activities for SEOs. But the future looks promising. With little belief that it’s introduction will increase rankings but will certainly create a new standard for seo web design. And help improve a web pages conversion rates with the addition of microdata. Along with the new changes listed there is much more being introduced. By carrying out in depth research there is a wealth of information regarding HTML5 and how it can impact SEO.

Using HTML5 Slots and Casino Play on iPad Tablet for Complete Gambling Enjoyment

Apple iPads are amongst the newest revolutions of modern technology offering unequalled leisure to most of the people in terms of gambling. These kind of electronics are loved by quite a few simply because besides the truth that they fulfill and fulfill the satisfaction of a person, they are also some examples of convenience. The size and small structure of iPad Tablets will not seem to bother their holder wherever he prefers to spend time with it, not forgetting its long lasting power supply potential.

iPads may be used with many applications, including games. Among the usually mounted online games are iPad slots and gaming adventures that include Royal Vegas, Jackpot City, and Virgin Casino. They are surely unlike approach game titles that ask you to reckon for solutions to puzzles series after progression, and considerably more distinct to RPG or roleplaying games among others, which need the usage of many adjustments and hand routines. iPad Apple slots are tricky and amusing games in a significantly less traumatic method in which actually permits its competitors to have chances of having huge amounts of money.

Grabbing fantastic prices of funds returns is indeed much probable when you join in iPad slots and gambling games. Evidently, on the internet slots and casinos are less expensive to maintain as compared to regular casinos. Because of this, nearly all of the dollars in web-based casinos would go to their rewards. Apple iPad slots ties many to greater than a thousand slot devices together that allows the gamers from virtually any area of the world to engage and obtain the chance to gain the raising jackpot. To make it briefer, the further you use slots and casino games with your iPad Tablet, the further your winnings can be.

Playing iPad Apple slots and casino games, most especially Jackpot City, happen to be best experienced when you use HTML5 solution. Since no download gambling games make use of Flash or maybe Java to perform, HTML5 slots elevate this employing latest prospects in visuals, harmony, and the complete browser games encounter also. Having no more need to bother about the web browser you have because the technological know-how is appropriate to virtually any kind. With HTML5 slots, there is no more waiting for time-consuming downloads because everything is fast and better! Moreover, you get to convey more options of web games.

Any individual who has tried HTML5 slots and gambling video games on Apple iPad could state that it is a complete video gaming enjoyment. Only through HTML5 will you get to appreciate the majority of iPad Apple slots and casino video games from the primary spin up to the jackpot reward.

Find The Best HTML Tutorial For Beginners

Article by mariyam jatela

Looking for HTML tutorial for beginners? Interested in learning HTML fast and simple? Read this article and you’ll have the basic idea about HTML. Hypertext markup language (HTML) is the building block of all websites. Therefore, a good HTML coding tutorial can allow you to create interactive forms. You can also set headings, paragraphs, lists, links, quotes and other items. It can embed scripts in languages such as JavaScript which affect the behavior of HTML webpages. HTML is not a programming language, it is a markup language. A markup language is a set of markup tags. HTML uses these tags to define web pages.

Moreover, getting started with HTML is also very simple. All you need is a computer having a text editor to write HTML and a step by step HTML coding tutorial. It can be learnt through Windows, Macintosh, and Linux computers as well as smartphones and tablets. A good HTML tutorial for beginners can make you understand the mark up tags. These markup tags instruct a web browser to display the page and its content, just the way you want. They usually come with a start tag and an end tag, with the element content in between the tags.

A simple HTML tutorial for beginners will also help you understand the format of an HTML document. Mainly, there are two sections to an HTML document. It is a head tag and a body tag. This type of HTML coding tutorial will help you in learning the different uses of both the head tag and the body tag. The head tag comes first. It generally includes only non-content code such as Meta tags and Link tags. Meta tags, provides metadata about a web page. This metadata helps in improving a website’s page rank by helping search engine robot to locate and list that website. Link tags are used to link the page to other files.

A good HTML tutorial for beginners will help you learn the uses of the body tag. The body tag always comes after the head tag and it includes all the content code. The content code controls all the content actually displayed in the browser window. A good HTML coding tutorial will also make it very simple for you to learn HTML tags. They have a very simple and very logical format. It reads like you do, from top to bottom, and left to right. An HTML tag always begins with a less than sign and ends with a greater than sign. The HTML opening tag begins the operation you wish to perform. In order to end the underlining, you must use a closing tag. A closing tag will be the same as the opening tag, but will have a forward slash before the command.

So, if you are looking for a HTML tutorial for beginners, start searching in the Internet for the HTML coding tutorial you want. Remember, don’t just find any HTML coding tutorial but the best HTML tutorial for beginners only.

About the Author

Welcome to Tutorials Wire – Get Tutorials, tutorial, jquery tutorials for beginners, javascript tutorials for beginners, html tutorial for beginners, css tutorials for beginners, java script tutorial, jquery ajax tutorial. Need of more information Visit our website: http://www.tutorialswire.com

Use and distribution of this article is subject to our Publisher Guidelines
whereby the original author’s information and copyright must be included.

Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally. Here’s what it takes to get going: load the typeface.js library and some typeface.js fonts, then proceed like normal.

Along with HTML5 Boilerplate’s rock solid commitment to cross-browser consistency, H5BP brings you delicious documentation, a site optimizing build script, and a custom boilerplate builder. In addition to this, we now support lighttpd, Google App Engine, and NodeJS with optimized server configurations (along with Apache, Nginx, and IIS) and we’ve reduced the overall size of the published boilerplate by 50%.

• Combines and minifies javascript (via yui compressor)
• Combines and minifies CSS
• Optimizes JPGs and PNGs (with jpegtran & optipng), saving 15-50% of page weight
• Removes development only code (any remaining console.log files, profiling, test suite)

• Basic to aggressive html minification (via htmlcompressor)
• Revises the file names of your assets so that you can use heavy caching (1 year expires) without cache conflicts.
• Upgrades the .htaccess to use heavier caching
• Updates your HTML to reference these new hyper-optimized CSS + JS files
• Updates your HTML to use the minified jQuery instead of the development version
• Remove unneeded references from HTML (like a root folder favicon)
• build according to what environment you want: production, test or development

Mootools/Javascript Form Helper – Allows inline help for form input fields.
Script here.

Learn how to recreate the Facebook footer admin panel with CSS and jQuery.
Script here.

The Draggable Tab widget allows tabs to be dragged (and dropped)
Script here.

Google officially unveiled its Chrome Web Store yesterday, and with it, a veritable treasure trove of highly optimized web apps that use technologies like JavaScript and HTML5 to create optimized experiences that blur the lines between web and desktop apps.

We’ve already profiled some of those apps, most of which work on any modern browser, not just Google Chrome.

A few months ago, we talked about how the iPad is transforming web design. We dubbed this phenomenon the “iPadification of the web.” As much as the iPad has had an influence on web design, its influence over this next wave of web applications is even more apparent.

Looking through the Google Web Store, we couldn’t help but notice the similarities — in some cases perfect facsimiles — that some of these apps share with their iPad counterparts or with the general trend of iPad apps and iPad websites. Let’s look at some examples.

—————————————————– 1. USA Today —————————————————–

The USA Today app [iTunes link] for the iPad is extremely well done. It offers a reading experience that is really optimized for the size of the iPad’s screen, is touch friendly and has built-in social sharing features.

The new optimus.usatoday.com) is a near carbon copy of the iPad app. In fact, we feel confident in saying that save for a few iPad-specific optimizations (mostly dealing with navigation), this is the iPad app.

That’s not a bad thing by any stretch; we think this offers a superior reading and browsing experience over the standard USA Today website.

—————————————————– 2. NPR —————————————————–

Another news app that has significantly borrowed from its iPad counterpart is NPR for Chrome.

We’re big fans of the NPR apps for iPhone and iPad, and we’re adding its Chrome app, which is also accessible in other browsers at npr.org/webapp, to our list.

The HTML5 framework SproutCore was used to create an earlier demo of the NPR app, and we feel certain elements of that exercise have been used in the new web version.

Not only is the interface extremely usable and attractive, it creates a consistent experience between platforms.

—————————————————– 3. Flixster —————————————————–

The flixster.rottentomatoes.com very much mirrors the layout of its iPad app.

Consider the lack of scrollbar on the left column — this scrolls independently of the main column, just as it does on the iPad app.

The buttons and navigation points on the two implementations do have some differences. The iPad app uses the bottom of the screen (which is common parlance in iPad UI design); the web app uses the top.

The web app also has a fixed width of just under 1,000 pixels. In landscape mode, the iPad is 1024×768. To be fair, the resolution on many netbooks is 1024×600, but we still find it interesting that the elements were designed for such a fixed size.

—————————————————– 4. Amazon Windowshop —————————————————–

The windowshop.com, but that doesn’t mean that as a web app, it isn’t impressive.

The app matches the layout of its iPad counterpart perfectly.

The only difference — and this is significant — is that a scroll control has been added to the lower right of the web app, enabling users to scroll up, down, left and right within the app or the various sections.

To us, this makes it clear that the app was designed first and foremost for touch, and then adapted for the mouse and keyboard.

—————————————————– 5. Weather Underground —————————————————–

The chrome.wunderground.com is not the same as the Weather Underground app for the iPad.

However, the Chrome app, which offers a very attractive way to view and search for weather conditions, does share some striking similarities with some other iPad weather apps.

For example, Weather HD [iTunes link] takes a very similar approach to showcasing weather conditions. Weather HD uses animated images (something Weather Underground might want to consider aping) and can also show hourly conditions, but the overall layout of the two apps is similar.

—————————————————– 6.Blurring the Lines Between HTML5 and Native Apps —————————————————–

Google’s official line might be that Android is for tablets and Chrome OS is for netbooks, but in practice, it looks like more and more web developers are designing their web apps with the tablet form factor and features, like multi-touch, in mind. And why not? As we can see from the above examples, many iPad apps are in large part, just HTML5 apps, inside a wrapper. Sure, there are some benefits to creating a native app for platforms like iOS or Android — even if that app is largely just built using HTML5 — but the fact that HTML5 and JavaScript are becoming the building blocks for these kinds of applications means that porting them to other platforms or devices is significantly less challenging.

Last week, the Netflix engineers blogged about the company’s decision to use HTML5 in many of its new apps.

Clearly, many other companies are also seeing these benefits. We think that design cues from the iPad and future Android tablets will continue to influence web design and development in the traditional web browser.

The true convergence of these types of devices — the desktop and the tablet — might still be a few years off, but users will start to see similar user interfaces, application experiences and features across their various computing platforms.