Вы находитесь на странице: 1из 6

HTML5 tools and semantic elements analyzed and explained

The buzz of late in the world of Web design is HTML5. But when developers look around, it isn't as easy
as one might think to find out exactly what HTML5 is. This is because it is both a new standard in HTML
and a label for a collection of tools and technologies for the future of Web and mobile development. Before
delving into HTML5 tools, developers need to understand some of the new features in HTML technology.

Semantic elements
HTML5 still largely uses the existing HTML, as developers would expect. However, release 5 incorporates
some new tags referred to as semantic elements. For the most part, these elements are specialized
versions of the <div> tag and are geared toward making developers' content friendlier to both cascading
style sheet (CSS) webpages and to Web crawlers like Googlebot.
In the past, if developers wanted to define some portion of their webpage as a panel containing all of their
navigation elements (buttons, links, etc.), they might have created a <div> tag and given it the identification
(ID) ofnav. This would work perfectly well, and many Web developers did precisely this.
That is how the new <nav> tag came into existence. A survey was done of thousands of websites, and the
pattern emerged that <div> tags with an ID of nav or navigation were abundant.
What does that mean for IT people? Not a lot, on the surface of it, but when one explores the world of
search engine optimization, one discovers that as far as a Web robot is concerned, a <div> is a <div> is a
<div>, but a <nav> tells the Web robot something it might not have easily understood before. It is exactly
this kind of understanding that improves a website's overall rating and placement in search engine results.
Following this logic, a host of other new tags emerge, such as <header>, <footer>, <section>, <article>,
<figure>, <figcaption> and <aside>. These too are simply new versions of <div> tags, but now they exist
as ways of arranging content that a Web crawler can more easily categorize. Thus, a company's Web
rating improves.
Add to these tags a series of other elements, which are designed to improve what webpages can do
overall by helping a browser understand audio, video, geolocation and animated content, and one has the
heart and soul of the new HTML5 semantic elements.

The rest of HTML5


A lot of confusion arises from the idea that HTML5 is not just HTML but is also an umbrella term that
enfolds CSS3, Javascript and PHP technologies. Developers need to understand that these new semantic
elements exist to simplify coding a webpage and that the use of CSS3 is to bring a visually appealing
design.
Javascript is a way to add behaviors on the webpage, but with the new elements <audio>, <video> and
<canvas> and with application program interface elements like geolocation, Javascript now has simplified
ways to handle this content for a webpage.
Even more interesting is that designing applications for mobile devices follows the same paradigms as
designing webpages. Each screen in a mobile application is analogous to a webpage in terms of following
a markup language design system.
So, HTML5 comes into its own.

HTML5 tools
Now comes the fun part. What tools do developers use to tap into this realm of technologies? HTML5 tools
should bring these technologies together in a way that makes sense for novices and experts.

Let's take a quick look at DaVinci Studio, Embarcadero HTML5 Builder and Google Web Designer (Beta),
which represent a good cross-section of the tool types and features that developers should use to find the
tool that works best for them.

DaVinci Studio

DaVinci Studio started as a plug-in for the Eclipse development platform. It became its own environment
as its popularity grew. Eclipse is a widely used product. Familiarity with it across so many development
organizations makes DaVinci Studio a viable tool for both developers experienced with and developers
new to the world of HTML5.
The limitation of DaVinci Studio is that it is directly geared toward creating mobile content. However, since
DaVinci Studio is built on the Eclipse framework, it does have the ability to switch among multiple
development perspectives, allowing developers to create whatever they need. This is great for developers
who are already used to the Eclipse paradigm, but new developers can get lost switching among
perspectives or trying to figure out what additional tools they might need to install.
DaVinci Studio also offers a visual designer with many drag-and-drop components and editing capabilities
for designing the screens in question. The code for these designs is automatically written to files in Eclipse,
but there is not an easy way of going from the designer to Eclipse and back again. Changes are reflected
in both the designer and Eclipse, depending on where developers do their editing, but the user interface
feels clunky.

Embarcadero HTML5 Builder


Embarcadero HTML5 Builder

Embarcadero technology has many similarities to Borland, in part because the former bought the software
tools division of the latter in 2008. One of the features of Borland products was two-way tools, or tools that
would respond to either visual designing or direct-code editing. This design idea grew, took hold and has
been something Borland has always excelled at.
So, it should be no surprise that with HTML5 Builder, this two-way paradigm continues and is extremely
well-integrated into the nature of the product. The Borland products refined the process of visually
designing applications and content, then switching over and editing the code for an even finer level of
control -- a process that other companies have copied ever since.
What is perhaps the beauty of HTML5 Builder, though, is that from the beginning it helps developers
organize what they are doing. It also configures itself to the task at hand. For example, if a development
team is building a client-side Web application, HTML5 Builder gives them the correct set of client-side tools
and hides the things they don't need or can't use. HTML5 Builder also will configure itself when developers
are building something to run on a server, mobile client or mobile server.
Building Web content without data access is often a fool's errand these days, so HTML5 Builder is set up
to help developers get to their data. Visual components that can be added to webpages or mobile Web
content give the developer an easy way to create the necessary data connections and retrieve the datadriven content they want with only a few clicks. HTML5 Builder generates all the code developers need.
Given how complicated working with data on the Web can sometimes be, especially for new developers,
having a tool that makes it easy to do and understand can make all the difference between a good website
and a great one.

Google Web Designer (Beta)

Let's face it, Google owns the Internet -- if not in reality, then certainly in identity. We don't "Bing" things, we
"Google" them, even when we use Bing to do it. Google is shaping the Internet, so when it brings out a
new product -- even one in beta -- it is worth the time to pay attention and find out more.
Google has a whole new vision for the future, a new design methodology it's calling Material Design. The
newGoogle Web Designer is a big part of that. Developers should learn about it as early as possible.
Material Design is not worth explaining at this point because by the time it has been defined, it's likely to
have changed. This entire concept is still evolving. Developers should check it out for themselves and
keep an eye on where Google is going with it.
In the meantime, one of the first things developers can do is download the Google Web Designer
Beta product and start playing with it. But be forewarned, this product is very definitely still a beta product.
There are things missing, and the user interface is a bit challenging to deal with at first. It seems to be
rough around the edges and not as robust as one might expect. Nevertheless, it holds great promise.
As with other tools, Google Web Designer is a visual designer and generates code on the fly. It responds
as a well-integrated, two-way tool. It is entirely focused on the creation of HTML and CSS code, though it
does make room for creating Javascript as well. Also, its focus currently is more on creating ads that work
with Google services.
A rather amazing feature of Google Web Designer is its built-in ability to create animations in a timelinebased methodology very similar to Flash. The resulting animations are created using CSS code, so
developers don't need special plug-ins or animation engines in order to get the same kinds of animation
results.
Other than still being a beta product, the Google product's main limitation is that the code generated relies
onWebKit. A lot. This means that the resulting Web content created by Google Web Designer won't work

as well in Firefox or Internet Explorer. This limitation is a significant one because HTML5 standards are not
yet completely set. Locking itself into one particular technology could be a bad move for Google.
Still, to stress it again, this is a beta product, but Google is pretty smart. It may not be too long before
releases of this product provide the kind of flexibility to make this tool a serious contender.

Final analysis
In the end, the tool developers choose is the one that gets the job done for their company. The real secret
to choosing an HTML5 tool is spending the time to analyze the company's needs first. Take the time to
think it through. Don't just be dazzled by all the amazing bells and whistles that any given product offers.
Once developers have answered the questions and done their research, they can find the tool that best fits
their needs. One question developers might overlook in their rush to find the perfect tool is, "What makes
the process easiest for you to understand?"
Learning any new development environment is a challenge. Developers come to any new tool set with
preconceived notions of how things are supposed to work based on their understanding of the
environments they came from. HTML5 is not just a new set of terms and tags to be used with any other
HTML, it is an emerging paradigm that combines a number of technologies many have been involved with
for years.

Tim Converse
With the right set of HTML5 tools and a clear idea of how this new world is supposed to fit together,
developers can actually make the Web and mobile content experience the game changer everyone has
been calling for.
Tim Converse is the director of software quality assurance and technical support operations at SiO2 Corp.
With over 20 years of experience in the software industry, Tim has worked with companies like Borland,
Electronic Data Systems and HP in a wide variety of roles, from technical support and quality assurance to
application and Web development. Never satisfied with what he knows, he is currently expanding his
horizons with security and mobile development technologies. Tim specializes in quality assurance
technologies and is an advocate for test-driven development.
14 Aug 2014

Digg This
Stumble
Delicious
Google Fusion

RELATED CONTENT

Java Development Tools

HTML5 now rules the desktop, but shortcomings make it a hard sell for mobile

HTML5 tools and semantic elements analyzed and explained

Aggregating big data from embedded devices is changing the analytics world

Top 5 Java based tools for capturing business intelligence (BI)

An introduction to template building with Facelets, CSS, HTML and JSF 2.2

Freezer: Putting object relational mapping (ORM) tools to the test

Lambda and Java 8 with Joonas Lehtinen

When did Gradle get so hot? A look at what is trending on the Java tools landscape

Software architecture: Five things every developer should know

RELATED RESOURCES

2020software.com, trial software downloads for accounting software, ERP software, CRM
software and Business Software Systems

Search Bitpipe.com for the latest white papers and business webcasts

Whatis.com, the online computer dictionary


DISCLAIMER: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and
to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of
information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that
your use of the Ask The Expert services and your reliance on any questions, answers, information or other
materials received through this Web site is at your own risk.

Вам также может понравиться