HTML 5 Support to Drupal 7

Proposal Link: https://groups.drupal.org/node/62878 

Overview:

There are basically five major tasks to complete which will be covered by my proposal as well as my timeline of two months, of the Summer of Code. All of these features are majorly inter-related and will help in the incorporation of the exciting new features of HTML 5 within Drupal 7.

At the end of the task Drupal will be more user friendly, interactive, as well as provide higher level of flexibility and more features. The major features of HTML 5 involve:

  • The development of exciting new elements <canvas><video><audio>
  • The <datagrid> tag which would be useful to create table directly from values obtained from databases.
  • Support of new form types like Email, Range, datetime etc.
  • Creation and use of context menus in web application
  • Asynchronous loading of javascripts jsut by one single attribute.

The Media Module would be providing us the features like:

  • Add media of all types (Images, Audio, Video, Documents) into any textarea (requires WYSIWYG module)
  • Images can have captions, Audio files can have genres, Video can have bitrate, etc built into them via the entity API
  • Plugins to use remote media from sites like youtube, flickr, etc
  • Flexible display filters to do on-the-fly image manipulation, flash based players for A/V, etc

My proposal will bring alterations in this Media module using the exciting new features of HTML 5.

Description:

Converting Drupal to HTML 5 will require a few changes in the doctype, that is defined at the top of page.tpl.php template(s). My Proposal includes the following main points, which will require changes in the editor, Media module as well as the registration module.

  • Any sort of Video and Audio can be embedded in the main body via the <video> and the <audio> tags of HTML 5. Most browsers like Firefox 3.1 as well as Safari, Opera and Konqueror support HTML5. It would be really useful to be able to switch Drupal site to HTML5, as all these browsers together account for about 80% of my visitors. For visitors who still use a browser with no support, I will add a link to the VLC website and the video file.
  • Using the <canvas> tag interesting new graphical applications can be incorporated. RGraph, HTML5 canvas graph library will be used. It uses HTML5 features to produce a wide variety of graph types. Because it moves the creation of graphs from the server to the client, it can significantly reduce the load on your server and your bandwidth usage.The direct profit will be towards websites which wish to create graphs from financial information on the fly. This entire system will be available jsut on one click of a special button made in the editor.
  • Another important part would be inserting a table of information withing the body of the page using the data which will be retrieved directly from a database, connection information for which will be asked. This will again help to insert huge chunks of financial data directly from a database file using HTML5 <datagrid> element. There would jsut another button in this case in the editor which on clicked will carry out these functions.
  • Developing the ability to drag and drop files from the desktop into the media browser. The Media module provides a file browser for your web site that allows editors to easily access and seamlessly insert local files and remote streams into fields and text areas.
  • Improving the registration module using the new form elements of Email, datetime etc.

Also an API will be created so that the HTML5 features which are effectively harnessed to increase the functionality of Media Module can also be utilized without much effort towards the improvement of other modules too.

Profits for Drupal:

  • Will bring the Web 3.0 functionality to Drupal.
  • Major points of my proposal aim at helping websites dealing with huge financial data and based on Drupal.

Success Criteria:

  • The functionality has to work in all widely used browsers which support HTML 5. If the enhancements don’t work in a browser, they degrade gracefully. For those which donot support HTML % there must be viable alternatives created.

RoadMap:

  • Publish my goals to the Drupal community and try to get some feedback and suggestions on my plans. I will get familiar with the specific Drupal internals and Media Module, that I require for my work.
  • Implement the features dealing with the Media Module initially.
  • Develop the interactive functioning of the RGraph HTML5 Library by changes in the WYSIWYG editor.
  • Changes in the Registration Module.
  • Testing of all features with the help of the Drupal community. This will begin as soon as one component is finished.

Timeline:

  • May 24 – 31st – Get familiar with Drupal code base, Media Module, RGraph Library, CVS practices etc
  • June 1 – June 21 – Develop the embedding feature of video, audio in any page through WYSIWYG editor using HTML5 tags. Implement Drag and Drop functionality for Media Browser.
  • June 21- July 12 – Changes in The Registration Module using functionality of new field types of HTML5
  • July 12 – Midterm Submission
  • July 15 – August 5 – Effective usage of RGraph HTML5 library to develop new features of embedding and creating financial charts, as well as creating the functionality to directly obtain and publish data from a database into any table as required by any administrator of the Drupal website, just by a click of button in the editor.
  • August 7 – August 15 – Development of API for usage of the functionality in creation of other modules.
  • August 16- August 20 – Testing and Completion of Project. Report Submission

Biography:

I am 20 year old student studying currently at Indian Institute of Technology, Kharagpur. Since about three years, I’m in dynamic web application coding, especially with PHP and MySQL. I am familiar with web standards and I’m also a bit interested in design and typography. I have developed an AJAX based CMS for Kshitij, The Annual Techno-Management Symposium of our Institute (http://www.ktj.in) for which I had served as the Web Team Head in 2010. I have also created a Stock exchange based ticker for the Annual Game – Woodstock (http://bazaar.ktj.in)

I have done a lot of research based on Data Mining and Informatics, and have also developed a Java based – SAS integrated software for Competitive Intelligence, dealing on Opinion Mining, Clustering and Decision Making.

I think I have quite some understanding of how Drupal works. I am following the discussions on the Development mailing list since about half a year. I have also developed many websites on a freelance basis using Drupal.

Mentors:

Sumit Kataria, Aaron Winborn

Contact Details :

Student email: kamdarmax@gmail.com