Wednesday 18 January 2012

The Definitive Guide To HTML5: 14 Predictions For 2012

An article was posted on Techcrunch highlighting HTML5. The article about HTML5 was written by Guest contributor Ben Savage and is his predictions for 2012.

Learn more about 2012 HTML5 predictions.

Read the full article at http://techcrunch.com/2011/12/21/guide-to-html5-14-predictions-2012/


Editor’s note: Guest contributor Ben Savage is the founder of Spaceport.io, a native Javascript and HTML5 platform for mobile game developers.


From tech titans like Zynga, Facebook, Microsoft, Google and Apple, to startups just launching, the battle lines of 2012 will be drawn across the landscape of HTML5. Below are 14 bold predictions for how HTML5 will evolve in 2012.

Welcome to a more interconnected web:
In 2012, HTML5 will be adding support for some really useful and cool APIs that allow one
website to connect to another.

For example, Zynga games on Facebook run inside of iframes. Using the new postMessage API these games will be able to communicate within the containing Facebook frame directly. Before HTML5, inter-window communication had to rely on a remote server – or use unreliable hacks.
Another exciting addition is CORS (Cross Origin Resource Sharing). This will make it much easier for different websites to share information with one another. For example, CORS will enable startups to create photo-editing services that download your photos from Facebook, let you modify them, and then re-upload them – again without having to resort to ugly hacks.
With all of the new semantic information (see Semantics and Microdata) available with HTML5, it will become much easier to create web tools that extract information from web pages. As a result, you can expect to see a plethora of new mashup services, as well as better browser modes (like readers and translators).

Web browsers will look more like iPhones
Everyone loves Apple’s iOS. Now it’s coming to the HTML5 web. In 2012 your browsers will start
sporting push notifications, geolocation, and offline capable applications. Some browsers will likely adopt a more iOS-like user interface that will make the comparison all the more apt.

More and more applications will just be built in HTML5 instead of downloadable apps
If you’re like me, you already use web apps for email, calendars, and photo-sharing, but in 2012 more classes of applications will be HTML5 enabled. Next up, you can expect to see content creation apps like Inkscape and Illustrator emerge for HTML5 and start to catch on.

Internet Explorer & Microsoft will dramatically improve in coolness.
Internet explorer’s reputation will stop being “the browser where nothing works right” and start being “the fast browser”. Microsoft has made major investments into improving HTML5 performance that will give IE 10 a huge performance lead over competing browsers. Its hardware accelerated “canvas” will blow away all the other browsers in any speed test. Microsoft is also adding interesting ways for the HTML5 web and the desktop to work together that will really spice up its operating system. Having good support from IE will be the impetus that will really turn the tide in favor of authoring HTML5 applications.

Browser manufacturers will get into the App Store business
Taking a cue from Apple, browser manufacturers will start to realize that they are missing out by not being in the app store business. Google Chrome already has an integrated app-store as its splash page. Expect many other browsers to follow. This is actually a good thing for HTML5 application developers – it means more distribution opportunities for apps, although platform specific payment systems and platform revenue-shares will follow later on.
At least one major console game released or re-released using WebGL
In 2012, at least one AAA console game company is going to make the leap and decide to launch a 3D title on the web using WebGL instead of (or in addition to) creating a downloadable client. It might be a re-release of a well-known title (Like “Team Fortress 2″ or “Assassins Creed”), or another way to play a popular MMO (like “Eve Online” or “World of Warcraft”), or it may be an entirely new title launching for the first time.

Many more applications will use offline cache and will work offline
The offline application cache will dramatically improve the usability and speed of HTML5 apps. Querying a local database will allow applications to avoid a round-trip to the server, eliminating that laggy web-app feel that makes us all prefer native apps today.
In 2012, expect to see a few issues arise from this extended usage. You’ll lose your work by clearing your cache at least once or twice. Also expect security vulnerabilities to keep showing up that allow malicious applications to access private files stored on your computer by another
website.

HTML5 ads will become prevalent and overtake Flash ads
Website owners keen to monetize the increasingly large amount of traffic coming from iOS devices will demand HTML5 ads (rather than Flash ads). Startups will emerge to serve this market. These startups will solve the sand boxing, security, and authoring tools issues that this new market will face. Now that HTML5 is capable of doing everything that flash ads commonly do, it’s just a matter of time before they take over.

JavaScript will get a lot faster with better memory management and typed arrays
JavaScript has gotten really, really fast – it’s already among the world’s fastest scripting languages – but there is room for improvement. Google Chrome has started pushing the envelope on better memory management and garbage collection algorithms. This, combined with typed arrays, will bring JavaScript performance closer to more mature languages like Java.

Canvas will get hardware acceleration in more browsers (but no major mobile browsers)
Other browser makers will follow Internet Explorer’s lead and add hardware acceleration to their canvas implementations. Those that don’t will suffer a severe loss in mind-share. Firefox is most at-risk in this regard. If Mozilla fails to accelerate their canvas it risks being portrayed as the new IE — slow and bloated and burdened down with legacy code.
However, in 2012, no major mobile browsers will successfully roll out a hardware-accelerated canvas. We will have to wait until 2013 to start seeing that catch on.

People will play popular HTML5 games on their mobile devices from Zynga and others, but they will be very simple games
You can expect to see your friends playing games like Zynga Poker, Words with Friends, and Mafia Wars on their mobile phones, running purely in HTML5. These games will be played on both destination websites and within native applications (like the Facebook app).
However, successful HTML5 games on mobile devices will be limited to menu-based games, card games, board games, turn-based multiplayer games, and avatar customizer games. More complex and visually intensive Zynga “Ville” style games with isometric worlds or hundreds of animating sprites will not yet strike gold in 2012.

Facebook will release improved HTML5-based APIs that allow for more seamless integration with external websites
In its continued quest to be the de facto social-graph of the web, Facebook Connect will grow and expand to take advantage of new HTML5 features. This will allow even deeper and richer integration of Facebook connect with external websites and services.

Facebook will get a lot more seamlessly integrated with your desktop
Think drag-and-drop, file system access, photo synching, and widgets on your desktop. All of these features (and more) will start to blur the line between desktop and browser, bringing your social graph more closely into contact with your traditional desktop experience.

Apple will NOT fix HTML5 sound in mobile Safari
HTML5 sound used to work well in mobile Safari, back in the days iOS3. However, Apple disabled most of the API in iOS 4 and 5. It just introduces competition for iTunes — both the music store, and the App Store. In its continued fight to maintain total control over the Apple ecosystem, they will refrain from fixing HTML5 sound in 2012.

Vertical align div

One of current CSS left outs is vertical align div. And before CSS 3 comes we have to use some tricks to solve this problem. I looked over for some solutions and it all comes up to defining it as table and using vertical align. The second one appears a lot and it’s a nice solution, but it has two faults, I’ll tell you later about them, here’s the code first.

Idea is to place absolute div 50% left and top and then to move margin left and top half if it’s size.

.wrapper {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}

Problem?
This works only with defined height and when div height is less then browser height so you can’t have scroll. Now you’ll ask why do anyone want vertical align when there’s a vertical scroll? Well for example you have container height 820px and you have it vertically centered in all larger resolutions, simple.

Solution
In this problem (when browser height is less than div height) at smaller resolutions 1/3 of div is not visible, it’s in negative top margin. So idea is to place some relative div that will prevent div to go into negative margin. Here is the code.

<div id="vert"/></div>
<div id="wrapper">
Content
</div>
 
html, body {
height: 100%;
margin: 0;
padding: 0;
}
 
* {
margin:0px auto;
padding:0;
}
 
div#vert {
visibility: hidden;
width: 100%;
height: 50%;
margin-top: -200px;
float: left;
}
 
div#wrapper {
width: 1000px;
height: 400px;
clear: both;
background:red;
position: relative;
top: -200px;
/* IE4ever Hack: Hide from IE4 **/
position: static;
/** end hack */
 
}
 
/* Hide from IE5mac \*//*/
div#vert {
display: none;
}
 
html, body {
height: auto;
}
/* end hack */
 
/* ]]> */





Tuesday 17 January 2012

Keep footers at the bottom of the page

When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it's not immediately obvious how this can be done.

When I first ditched tables for pure CSS layouts I tried to make the footer stay at the bottom but I just couldn't do it. Now, after a few years of practice I have finally figured out a neat way to do it. My method uses 100% valid CSS and it works in all standards compliant browsers. It also fails gracefully with older browsers so it's safe to use on any website.



 Features

Works in all modern, standards compliant browsers

100% valid CSS with no hacks

iPhone compatible

No JavaScript 

Free to download


Div structure

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>


CSS


html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}


And one simple CSS rule for IE 6 and IE 5.5:
#container {
   height:100%;
}


Download Now


Monday 16 January 2012

Google's free online language translation service

Google's free online language translation service instantly translates text and web pages. This translator supports: English, Afrikaans, Albanian, Arabic, Armenian, Azerbaijani, Basque, Belarusian, Bengali, Bulgarian, Catalan, Chinese, Croatian, Czech, Danish, Dutch, Estonian, Filipino, Finnish, and more...
 
translate.google.com/
 

Changing Table Background Colors on Mouse-over


If you're looking for a great way to spice up your HTML tables, this HTML mouseover code may be just what you're looking for. You can also change background color in this code.

<!-- This Script is Coded by: Umais Bin Sajjad-->
<TABLE BORDER="2" CELLPADDING="2" WIDTH="100%">
<TR onMouseover="this.bgColor='#EEEEEE'"onMouseout="this.bgColor='#FFFFFF'">
<TD>Your Table Data</TD>
</TR>
<TR onMouseover="this.bgColor='#EEEEEE'"onMouseout="this.bgColor='#FFFFFF'">
<TD>Your Table Data</TD>
</TR>
<TR onMouseover="this.bgColor='#EEEEEE'"onMouseout="this.bgColor='#FFFFFF'">
<TD>Your Table Data</TD>
</TR>
</TABLE> 


Demo
Your Table Data
Your Table Data
Your Table Data