HTML5 Support for Drupal 7

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
maulik.kamdar's picture

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 HTML5 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 be just 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 5 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:

Aaron Winborn has agreed to Co-Mentor the project, but I am still on search for another mentor


Contact Details :

Student email: kamdarmax@gmail.com


Difficulty:

Hard

Comments

This is quite interest idea,

heshanlk's picture

This is quite interest idea, we know currently HTML 5 videos also very famous with iPad an iPhone

Senior Drupal Developer at DrupalConnect

+1

lelizondo's picture

+1

Luis

For you can probably can

rpfilomeno's picture

For you can probably can hook this into the media module as an extension as a tick box option and i would recommend adding the html5 rich editor to wysiwyg module since it does already support multiple wysiwyg implementation.

html5 and accessibility

Everett Zufelt's picture

I'm really happy to see that the HTML5 proposal was accepted. I would like to offer whatever guidance that I can to ensure that the html5 markup is accessible to persons with disabilities. Please feel free to contact me throughout the project and I will do my best to answer questions and point you toward useful resources.

Accessibility Consultant & Web Developer - Zufelt.ca
@ezufelt on Twitter | LinkedIn profile

maulik.kamdar's picture

I will surely ask out for your help suppose I get stuck out somewhere. I would be beginning to work understanding the Media Module and the extent of variations possible with HTML 5

Extended Roadmap posted by Maulik

Goals of this project

dipen chaudhary's picture

Hi,

Where can I read the goals of the project? I did read the doc sumit has linked to, but rather than a unified goal I see ad-hoc tasks and feel that you are trying to do too much. I have written down my comments here - http://docs.google.com/Doc?id=ddz38x2d_143c9v363d9 I dont have ur e mail address so couldn't invite u to the doc, I have invited sumit and hopefully he would send you the invite.

Few points from my comments:

1> Like I said I think you are trying to do too much, specially with contemplating a new WYSIWYG editor (which should be discussed in WYSIWYG API issue queue) and the plotting features.
2> It would be more useful to get integration of semantic tags in drupal, not sure if the changes can be incorporated in Drupal 7, but creating a contributed theme just for html5 is always an option.
3> Focus on media is nice.
4> If you really wanna bring canvas into drupal, it would be better suited to bring in canvas development framework into drupal and then integrating with charts etc if you have time left.
5> I didnt quite understand ur plan with drag and drop? Its a novel and cheesy functionality but we need to identify use cases and best places to integrate into. I think dashboard module, panels etc are nice places to start. Not sure what do u mean by firefogg API integration of DnD.

Cheers


Dipen Chaudhary
Founder, QED42 http://www.qed42.com Drupal development

Re: Extended Work Plan

maulik.kamdar's picture

Hello Dipen,
Thanks for the valuable comments and ideas. There were a few clarifications and queries which I had in mind:
1) The idea related to development of new WYSIWYG editor was misplaced. Actually I would be creating a plugin for the WYSIWYG editor for the RGraph Module like the way Media Module creates an interactive Media Browser plugin. Only a few steps of configuration would be required for enabling it.
2) Currently videos are stored in SWFObject format in the Media browser and one of the goal of my project was to move to the new video tag of HTML 5 removing the dependency of Flash. Now video tag necessitates the source video format to be .ogg format. For it to be created to .ogg on the fly needs the integrationg of the Firefogg api. That is the user will upload any video in any format (.avi, .mov etc.) and it will be automatically converted to .ogg and then me viewed in the HTML 5 container of video. Something like http://videobin.org/
3) Related to Drap and Drop API, One goal of the project was for the DRag and DRop functionality to be created so that user can just drag a file from file browser and upload it by dropping it in the media browser, which would then display in the html5 format of video.
4) I understand your concerns about modifications of the Form API. MOreover the new field formats of the form are not supported in most browsers so it is not something of a priority. But on a later case when most browsers would support them, it would be nice to make Drupal 7 having the functionality.

Thanks for clarification!

dipen chaudhary's picture

Maulik,

Thanks for the clarification and from what you have written I get the feeling that most of the proposed HTML5 work would be done in context of the Media Module which is great and I certainly feel media module is the future of multimedia coming drupal 7, is my assumption correct about your proposed work being in context of media module only? Or there are other modules you would be bringing HTML5 love to? All I am saying is, its not clear that what are the tasks, which modules would it affect and improve. Replying point wise:

1> Rgraph plugin for Wysiwyg: I am assuming this would be a separate module or would integrate with one of the charting modules? I dont see compelling use case of integrating it with media module but would be useful to check with Jacob and Aaron.

2> Video Formats and markup: This would enhance media module right? The best place to work here would be styles module and file styles module.

3> Drag and Drop: Again this is limited to media module right or u plan to bring Drag and Drop to other parts of drupal as well? I would strongly recommend you to look at File Api of html5 and also look at http://hacks.mozilla.org/2009/12/uploading-files-with-xmlhttprequest/ and http://hacks.mozilla.org/category/fileapi/ . Here It would be cool to give drag n drop straight from desktop to drupal like the new gmail feature.

4> Form API mods would not be feasable now.

So yeah my whole objective is to ensure that everyone understands what would u be achieving and in what contexts (new modules, enhancing existing modules) as bringing HTML5 to drupal is a huge task but would be fruitful too for drupal to remain ahead like it has always been.

Let me know if I can help you in any way.


Dipen Chaudhary
Founder, QED42 http://www.qed42.com Drupal development

Please move this roadmap to a g.d.o. wiki

Alex UA's picture

@sumitk & @maulik.kamdar - this project needs a wiki on groups.drupal.org and a drupal.org project page ASAP. Please see Dmitri's post as well as the wiki template for more information.

Alex Urevick-Ackelsberg
ZivTech: Illuminating Technology

Re: Clarification

maulik.kamdar's picture

Hello Dipen,
The Project could well be divided into two main parts:

Creation of the RGraph Module using the Canvas Development Framework
This would be completely a separate module altogether and its plugin will be provided for usage under WYSIWYG. I did not understand your point about its integration to Media Module. It would not be integrated with any charting modules or so. Will be using Canvas to display the plots unlike the other charting modules which are working on SWFObjects or Google ExCanvas API

Modifications to the Media Module ranging from bringing the Drag & Drop functionality (Similar to Gmail), On the Fly conversion of any uploaded video to OGG format for usage under the video tag of HTML 5. (As mentioned would be using the Firefogg API)
The conversion feature of the uploaded video to OGG format can well be provided for other modules to be implemented. (I had a discussion related this on my original Proposal Page on the GSoC website as well as the IRC channel. Apparently there are various modules which deal with uploading of videos, as well as wish to implement the new audio and video formats of HTML5 replacing the traditional flash. I have not thought in this regard but the Firefogg API can well be extended from the Media Module to use in such Modules. This needs a bit of brainstorming and can only be done if time permits.)

It isnt necessary to change the semantics of drupal 7 for html 5 compatibility though a cleaner doctype( for HTML5) and meta tags can be done. But I understand it would not be accepted considering the Beta release is just on the way.
Same goes for Form API. I could have undertaken the modifications but it would not be accepted at this point of time and as most browsers still not support them (except Opera, IPhone and Android), they are not necessary.

I have changed my schedule a bit deviating from my original proposal.
The first half would be concentrating on development of RGraph Module now, and the second half towards the Modifications of Media Module.

Clearer now!

dipen chaudhary's picture

Thanks Maulik,

Its much more clearer now as to what are the objectives of the project, though I am a bit iffy on utility of Rgraph plugin (Its good to have but not must have imo) it would have been much better if we worked towards bringing other cool html5 stuff to drupal/media module. Thats just my opinion!! I am sure some would see Rgraph v imp.

About doctype and semantic tag changes, I think you can always demo that by creating a custom html5 ready theme (need not be in core) this would mostly serve as demonstration on the markup changes that have come to html5, its highly unlikely that it would go in core, but creating a contrib theme is not a bad idea either and should not take more than couple of days. This I think u can cover in User and developer documentation period.

About Video and Html5: Again just my opinion but I think it would be more useful if you can also work on webm conversion ( http://webmproject.org ) in line with vision of media module than client side conversion which is again a good to have but not must have.

I really would advice you to start discussing stuff in the media group or the issue queue as you would get many great ideas.

Cheers


Dipen Chaudhary
Founder, QED42 http://www.qed42.com Drupal development

Bit late on discussion!!

dipen chaudhary's picture

Also I understand that I am bit late in the discussion and the project goals and specs are more or less frozen but just giving out pointers on what can be done if you've got some time left.

Also would be nice to crosspost it html 5 group - http://groups.drupal.org/html-5


Dipen Chaudhary
Founder, QED42 http://www.qed42.com Drupal development

New Wiki Page

maulik.kamdar's picture

I have created a Wiki Page http://groups.drupal.org/node/72058 and would be publishing my reports as well as status there itself now.
The project page for RGraph Module will be created sooner, maybe at the end of this week. Please note the updated schedule.

Further Updates

maulik.kamdar's picture

I have Updated my Wiki Page. Please Find the relevant updates at http://groups.drupal.org/node/72058 .

Google Summer of Code 2010

Group organizers

Group categories

Important Announcement

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: