Monday, May 9, 2011
Happy Birthday Survah
Sunday, January 23, 2011
How to make HTML5 work on IE
The significant difference between HTML5 and HTML4/XHTML1 is that we can use custom tags in HTML5. Tags like <header>, <footer>, <section>, <nav> and so many others work in HTML5. A simple syntax for a HTML5 page is as follows:
<!DOCTYPE html> <html> <head> <title>HTML5 on IE</title> <style> red { color: red; } </style> </head> <body> <section> <red>This should be red in color</red> </section> </body> </html>Notice that in this code, we have included a custom tag named 'red'. A style has been added to this tag. If this page is viewed on a HTML5 supporting browser (like Safari), then the text in the 'red' tag should be displayed as red in colour.
On Safari4, it would be displayed as:
whereas if the same page is viewed on Internet Explorer (even on IE8), the style would not be reflected and the text will be displayed simply as:
The fix is as follows:
The reason of the issue is that IE is unable to understand our custom tag 'red'. So to make IE understand our tag, we have to use a simple javascript as follows:
document.createElement('red');
In this simple line of code we have created a new element named 'red'. Now the 'red' can be used as a tag name in our HTML code. So, the code becomes:
<!DOCTYPE html> <html> <head> <title>HTML5 on IE</title> <style> red { color: red; } </style> <script> document.createElement('red'); </script> </head> <body> <section> <red>This should be red in color</red> </section> </body> </html>
...and it is displayed perfectly on IE as:
This solution is a good deal, if you have very few number of custom tags. Simply add this JavaScript line for each of the custom tag and you are good to go. But, then what is the use of HTML5 if we are going to use very few custom tags? The real power of HTML5 lies in it's custom tags.
Fortunately, we have a solution for that too. Remy Sharp has put a great effort in creating a javascript file which can be used to solve this problem. Simply include this javascript and you don't have to create elements for each of the custom tags.
This javascript is also hosted on Google Codes and thus, it can simply be included as:
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Happy coding!
Sunday, December 19, 2010
How to align a checkbox with its label?
Creating a simple checkbox is a piece of cake. Just put an input with type="checkbox" in your HTML and it is done. The issue of vertical alignment arises when you have to use a separate label element in front of this checkbox.
The situation is like this. You have a checkbox and a label with small font size just next to it as shown in the code below:
<input type="checkbox" />
<label style="font-size: 10px;">This is the label</label>
This will be displayed as:
Notice that the text is not vertically in the middle of the checkbox, instead it is dropped down a bit. To make it vertically aligned to the middle of the checkbox we can add following style to the label
position: relative; top:-2px;
Now the code becomes:
<input type="checkbox" />
<label style="font-size: 10px;position: relative;top: -2px;">This is the label</label>
and it will be displayed as:
Now see that the text is vertically aligned to the checkbox.
Adjust the value of top according to the font size and you are good to go.
Short and simple.
Thursday, June 3, 2010
Survah delivers it's first project
Pharmasecure took the decision to completely change their website. Pharmasecure is a company which is working with a deep sense of urgency to eradicate the market of counterfeit drugs. Their mission is to provide everybody with 'Authentic drugs'. Know more about Pharmasecure here.
They put faith in us and assigned to Survah, the job of converting their static old looking site to a new dynamic one. The new Pharmasecure website is now built using the famous content management system known as Wordpress.To name a few of the challenges, which we faced for this particular design were the two different templates for landing page and the pages within; Also, there were different categories of posts; Displaying page content as well as the post contents on the same page; Dynamic Dropdown menu; Dynamic Sidebar and many more. The achievement is that the website has a very new crisp look now. The website is completely dynamic. No programming experience is required now to update the website. Last but not the least, the project is delivered in time with all the modifications requested by the client.
We've decided to post some tutorials in the near future explaining the techniques which we used to overcome some of these issues. This could definitely help some of the designers or web-developers out there. In the meantime you can visit Pharmasecure’s new website here.
Tuesday, May 4, 2010
Web 2.0 Revolution: Power to the People
Web 2.0 is one of those elusive Web terms that is used to describe many disparate threads of change. However, there are some shared underlying principles of Web 2.0 companies and platforms, which we'll discuss later.
For a definition of Web 2.0, we can turn to Wikipedia, the free encyclopedia that is itself a shining example of the potential for the new approach to the Web:
"The term Web 2.0 refers to a second generation of services available on the World Wide Web that lets people collaborate and share information online. In contrast to the first generation, Web 2.0 gives users an experience closer to desktop applications than the traditional static Web pages...The concept may include blogs and wikis."
To understand Web 2.0, we must appreciate its origins and roots. Some of you may not realize that there was even a Web 1.0, so it probably makes sense to start at the beginning.
Weaving history
When the World Wide Web (WWW) was first defined, it consisted almost entirely of static Web pages that each contained hyperlinks. A destination Web presence might have been a university, institution or company with an interlinking series of pages. Web directories such as Yahoo were established to categorize and provide search functionality for these sites. Web 1.0 was an exciting frontier for the pioneer Web surfer, and one that was easily mastered.
Once established, the WWW underwent almost continuous evolution, which was driven by the introduction of a variety of more dynamic technologies (Java, Shockwave and Flash, dynamic HTML, etc.). Web pages were dynamically created from a database, and the database could be customized for each user. For example, Yahoo evolved into My Yahoo for many users—a highly customized, dynamic portal of information and services that met the needs of each individual.
This newer Web is referred to by some as Web 1.5 and encompasses much of the Web as we experience it today. Web 1.5 linked bricks and mortar with the Web, leading to a major shift in the way we get our news; buy our clothing, electronic "toys," and books; and obtain information. It was built on the framework of Web 1.0 but added a variety of tools and an evolving sense of style and design.
Web 2.0 also builds upon the foundations of all that has come before it but takes some radical departures. The idea of tying together a group of disparate new Web applications and platforms was developed by two conference organizers (O'Reilly Media and MediaLive International) when brainstorming a conference concept. Web 2.0 was defined, more or less, by example: Companies that were old school (i.e., Web 1.0) and those that were new school (i.e., Web 2.0).
Before identifying unifying concepts, let's look at a few examples of Web 2.0 concepts.
Newer arrivals
The Wikipedia (www.wikipedia.com). An astounding example of the power of the commons, Wikipedia serves as a gigantic and very current encyclopedia that is created and maintained by its users. In contrast to a Web 1.0 encyclopedia (Britannica Online, for example), Wikipedia is completely dependent on users to create, update, and provide quality control for the content of its articles. The technology itself is very simple, open source software, but the power of the Wikipedia is the vast database of very detailed information on almost any topic, far exceeding most online encyclopedias in terms of detail and, often, quality of information.
Of course, since anybody can edit a Wikipedia article, some controversial topics can become battlegrounds for ideology. However, Wikipedia users are hopefully sophisticated enough to understand this and to take it into account when using the information.
Blogs (www.blogger.com, for example). The blogging revolution is in full force, powered by an enormous collection of dedicated people who create "Web logs" (otherwise known as blogs) on almost any topic, from politics to rock music.
Blogging software sites allow an unsophisticated user to set up an aesthetically pleasing blog in minutes and begin publishing on a topic of their choice almost immediately. The result has created citizen journalists, armchair political pundits, scientific commentators, and movie critics who are widely read and followed.
Each blog "advertises" other blogs by linking references to them, creating a huge interwoven tapestry of information that is completely separate from traditional information and media. The Web 1.0 equivalent of the blog was the personal Web page—a drastically different and static concept. The whole "blogosphere" can be searched through sites such as Technorati (http://www.technorati.com).
LinkedIn (www.linkedin.com). Web 2.0 emphasizes community and the power of the commons. A powerful example of this is LinkedIn, a Web community composed of professionals who wish to network.
When you join LinkedIn, you create a public profile that lists your previous positions and companies. When you invite friends to join, they become permanent "first degree" links to you. If they are already a member of the community, you become linked to their contacts through them.
The real value of LinkedIn is that it allows a user to search for and contact many people with whom they have no other connection. The site allows you to identify a chain of people who can connect you with the person you want to contact. A user can send a message through this chain that is passed along from person to person until it gets to the individual they want to contact. Remarkably, the concept works very effectively. The power of LinkedIn is in the community it creates.
Familiar concepts & uses
You are likely already familiar with aspects of Web 2.0 applications, which have been included on some Web sites for many years. For example, the ability to write and publish a book review on Amazon.com is a Web 2.0 concept, as is the ability for any user to rate the review. Similarly, the rating system used for buyers and sellers on Ebay is classic Web 2.0.
Interestingly, Web 2.0 concepts aren't restricted to the Web. Tim O'Reilly of the O'Reilly Network that developed the Web 2.0 concept points out that iTunes and TIVO are two examples of Web 2.0 applications, both integrating aspects of the Web with devices.
While the community aspects of iTunes and TIVO aren't significant, their devices use the Web to provide the user with a service (music downloads and television program recording, respectively) through a seamless experience of a device interacting with a large database.
2.0 principles
In my formulation, the organizing principles of Web 2.0 are:
Promising value
Web 2.0 isn't just about fun sites; it is being put to work in corporate settings, even within the pharmaceutical industry. A company called TrueTrials appears to be putting together a Web 2.0-like service and community in which both sites and sponsors can participate. Investigative sites establish a presence and allow sponsors to contribute to their reputation by rating their performance in clinical trials. Through this rating system, the company can create a valuable database of rated sites for sponsors and provide new opportunities for highly rated sites.
Web 2.0 has been around for a few years and is based on technology and concepts that have existed since the bursting of the first dotcom bubble. Some predict that the value and activities created with Web 2.0 may be greater than the initial Internet revolution. The value that Web 2.0 brings to clinical trials and technology will depend mostly on the creativity, imagination, and participation of you—the end user.
Tuesday, March 23, 2010
Survah a registered company
We are more than excited to pursue technology challenges and render services to our esteemed clients.
For any inquiries please mail us at info@survah.com.