Social Network for Web Professionals

Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive

There isn’t exactly complete list of features in HTML5 as the language is still in development phase which is known to complete somewhere around 2014.  Right now this is living technology which is going through major changes and new features; however there is wide support from latest web and mobile browsers. HTML5 is intended to subsume not only HTML 4, but XHTML 1 and DOM Level 2 HTML as well.  Here we will list some of the stable features of HTML5.  

The Semantic Layout

HTML5 Semantic LayoutSounds complicated but actually it isn’t, semantic layout is group of tags that make coding easier to understand and edit, for example these are logically grouped tags web page headers and footers can be wrapped in <header> and <footer> tags; navigation can use <nav> tags; sections are enclosed in <section>; and actual  article content is written within <article> tags.

New User Interface Tags

WHATWG has deprecated older HTML tags that have become obsolete or were implemented in CSS. Tags like <center>, <frame>, <font>, <strike>, and <u> are now ignored. Instead of this, HTML5 introduces a few user interface (UI) tags that you can be used to make browsing website a better experience. New features incorporate <figure> and <figcaption> for providing new details to images, <mark> for highlighting and <meter> and <progress> to display a moving and static progress bar.

CSS3 Visual Enhancements

CSS permit to modify any HTML element’s dimensions, font, colors, image, alignment, and layout. With CSS3, there are actually simpler methods to find and isolate specific tags to apply these customized styles in a website. You can also create 2D and 3D transformations, transitions, and even animations.

Flexible Box Model and Multi-Column Layout

Two new methods allow developing “table like” layouts in HTML5 and CCS3. The Flexible Box Model allows you to arrange website page data into multiple rows or columns inside a new display: box object. The multi-column layout allows you to construct data into multiple columns of variable height and width.

Intelligent Form Inputs

Form input fields enable your users to submit data back to your website. In HTML5, is not possible to instruct the web browser to restrict input fields to specific formats. For instance, enforcing numbers only, email addresses, URLs, etc.  You can even specify custom pattern-matching rules for obscure format restrictions. In HTML 4.01 and earlier this was a tough call, you had to sanitize data inputs in JavaScript or with web server code and in some cases the only way to do that is through regular expression.

jQuery, Browser Events, and Custom Data Attributes

In HTML5 is possible to alter web browser events, use custom data attributes, and dynamically hide and display entire sections of HTML code, excellent way to produce a dynamic user experience. jQuery is well suited for simplifying the flow of HTML5 events and custom data attributes within JavaScript, as JavaScript might be affected because of the browser.

Canvas Graphics

The Canvas API gives you full control over every single pixel, animation, color, and user interaction with the web browser; it is practically a blank canvas to develop anything.  The Canvas API was developed to compete directly with Adobe Flash, providing all logic inside the trusted and open confines of JavaScript. Practically Canvas API is complete replaced of Flash suitable for mobile web and applications. The Canvas API is restricted to 2D graphics and plotting, however HTML5 does have an experimental specification called WebGL that can generate enhanced 3D graphics

Audio/Video Support

The new audio and video support built into HTML5 replaces Flash movies and multimedia. However, different HTML5 web browsers support different file encoding formats or/and codec — it is possible easily create content and convert it into the needed formats to reach the widest-possible HTML5 viewers.

Drag-and-Drop Events

Implementing a mixture of HTML5 events, CSS and JavaScript, you can have interaction with the user in ways only encountered directly on the desktop. With drag-and-drop interface, it is possible to allow users to use their mouse or touch-screen to visually interact with website or application.  Eventually, by pairing drag-and-drop events, video, audio and the Canvas API, you have everything you require to develop HTML5 web apps and even games.

Storage Databases

Since the dawn of web, cookies have been used as a method to keep information on the user’s internet browser. Simply because a cookie is composed of only simple key/value data bits, web developers have had to work with smart methods so that they could manage more complex data structures. HTML5 re-implements cookies as the Web Storage API; it is going to another level by presenting the Web SQL and IndexedDB APIs as relational databases.

Offline Detection and Synchronization

HTML5 gives you the ability to develop a web application that will identify if it is connected on-line and or else, instruct the internet browser to get access to website from its internal app cache. While the user returns online, all data that is new on the cache may be instantly submitted and resynchronized with your web server application. This successfully creates the feeling that web app is constantly accessible, no matter of whether or not the internet is on or off. This can be very useful option for HTML5 games.

Geolocation

Latest smart phones comes with build-in mobile web browser that supports HTML5, it is possible to leverage the Geolocation API and present information and direction based on the user’s physical location. These details can easily be associated with other third-party services, such as Google Maps and Bing Maps, to deliver an immediate overhead map of the surrounding area.

Web Workers

JavaScript is a synchronous, single-threaded environment. Only one script can run at the same time on your web page. Web Workers are a new way to produce various threads with the JavaScript runtime environment, all running as independent scripts asynchronously. Every thread has the functionality to communicate to the others inside the JavaScript stack, allowing you to offload a CPU process in the background but keep user interface free and responsive.

WebSockets

Ajax is a technology that put together an asynchronous XML request towards the server over the HTTP protocol; WebSockets are intended to be extremely effective, utilizing their own dedicated channel and protocol. WebSockets were created to be low-level continual connection channels between a web server and web browser.

Notifications API

The Notifications API allows to pop-up simple screen notification messages outside of the web browser. This Notifications API originated from Google for the goal of displaying new email notifications from Gmail. This API exists only in WebKit-based internet browsers, such as Chrome and Chromium. Dissimilar to pop-up windows, that has seriously affected the Internet; this feature is off by default and can be enabled only if requested on a per-domain basis.

Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive

What is HTML5?

Everybody is talking about HTML5, but what exactly is HTML5? Ha-ha, well it is Hypertext Markup Language version 5. Everybody knows that and this is the biggest update every, actually the previous update of HTML was a decade ago! Describing it this way doesn’t throw enough light as HTML4.01 doesn’t seems to look every close in terms of features, I am talking about interactivity, multimedia support,  smarter forms, and better semantic markup are present

What is new in HTML5?

For web developers that already know, let me say that we already have lost the exact meaning, probably because this new standard is very far from its completion.

HTML Development Timeline

General idea staying behind HTML5 is to extend the way we use to build web pages/sites and to offer richer and superior support for web and mobile applications. Targeting functionality directly into web browser and becoming more like programming language than tagging language.

Compared to HTML 4.01 (if there can be any possible comparison) HTML5 not only define number of markup elements, but as well define exactly how markup “code” should be parsed.  Version 5 clearly definite parsing markup, major difference than the previous one, as before every different browser build its internal DOM representation and many errors can occur and make webpage looks different in Mozilla and IE for example. With HTML5 even invalid markup will be interpreted in completely same way for all web browsers. 

In our blog you can find some HTML5 tools that can simplify HTML5 coding as well as some useful HTML5 Resources.

 

Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive

Web DevelopmentWelcome to web development section of WebmaisterPro, ultimate resource including web design, web content development, client liaison, client-side/server-side scripting, web server and network security configuration, and e-commerce development. However, among web professionals, "web development" usually refers to the main non-design or SEO aspects of building web sites: writing markup and programing. Guide from simplest HTML page of plain text to the most complex web-based internet applications, electronic businesses, or social network services.

Web development can be divided in few main branches Client Side Coding, Server Side Coding, Client Side plus Server Side and Database development.

 

Client Side Coding

Server Side Coding

Client Side + Server Side

Database

  • Ajax Asynchronous JavaScript provides new methods of using JavaScript, and other languages to improve the user experience.
  • Flash Adobe Flash Player is an ubiquitous browser plugin ready for RIAs. Flex 2 is also deployed to the Flash Player (version 9+).
  • JavaScript Formally called ECMAScript, JavaScript is a ubiquitous client side platform for creating and delivering rich Web applications that can also run across a wide variety of devices. Including client libraries like JQuerry, MooTools, etc.
  • Microsoft Silverlight Microsoft's browser plugin that enables animation, vector graphics and high-definition video playback, programmed using XAML and .NET programming languages.
  • Real Studio Web Edition is a rapid application development environment for the web. The language is object oriented and is similar to both VB and Java. Applications are uniquely compiled to binary code.
  • HTML5 and CSS3 Latest HTML proposed standard combined with the latest proposed standard for CSS natively supports much of the client-side functionality provided by other frameworks such as Flash and Silverlight
  • ASP (Microsoft proprietary)
  • CSP, Server-Side ANSI C
  • ColdFusion (Adobe proprietary,formerly Macromedia, formerly Allaire)
  • CGI and/or Perl (open source)
  • Groovy (programming language) Grails (framework)
  • Java, e.g. Java EE or WebObjects
  • Lotus Domino
  • PHP (open source)
  • Python, e.g. Django (web framework) (open source)
  • Real Studio Web Edition
  • Ruby, e.g. Ruby on Rails (open source)
  • Smalltalk e.g. Seaside, AIDA/Web
  • SSJS Server-Side JavaScript, e.g. Aptana Jaxer, Mozilla Rhino
  • Websphere (IBM proprietary)
  • .NET and .NET MVC Frameworks (Microsoft proprietary)
  • Google Web Toolkit provides tools to create and maintain complex JavaScript front-end applications in Java.
  • Pyjamas is a tool and framework for developing Ajax applications and Rich Internet Applications in python.
  • Tersus is a platform for the development of rich web applications by visually defining user interface, client side behavior and server side processing. (open source)
  • Apache Derby
  • DB2 (IBM proprietary)
  • Firebird
  • Microsoft SQL Server
  • MySQL
  • Oracle
  • PostgreSQL
  • SQLite
  • Sybase

You can also take a look at our web design and development category at our webmaster blog or ask a question in our web development forum.

Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive

Quick reference guide for PHP, with functions references, a regular expression syntax guide and a reference for PHP's date formatting functions.

Click to Enlarge

 

Subcategories

Useful source code for web developers. Working examples and fragments.