Vasily Yaremchuk.Single page website.DrupalCamp Kiev 2011

Single Page Website

experience in the design of the module

Vasily Yaremchuk

Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru

Successful Development LP

Gold Sponsor ofDrupalCamp Kyiv 2011

Silver Sponsors ofDrupalCamp Kyiv 2011

Agenda What are the Single Page Sites? Background of Drupal module Discussion of the difficulties Drupal Sandbox as a storage of your custom module Different issues and changes in module settings approach Architecture of the module Roadmap Conclusion & Questions

Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru

Single Page Website

Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru

excellent example• http://www.volll.com

See more in Google :-)

How to do Single Page Site in Drupal Environment?

Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru

• Fixed Header and Footer

• Anchor links in Main menu

Header

Content area

Footer

Logo

Main menu

How to get content of the different pages to this page?

Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru

• AJAX request to the other pages

• Drupal API functions (node_load fore example)

• CURL or file_get_contents()

Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru

The following solution is proposed:Main menu:

#first

#second

#third

first second third

$(“#first").load(first_url+" "+content_selector);

$(“#third").load(third_url+" "+content_selector);

$(“#second").load(second_url+" "+content_selector);

Create wrappers for each “sub page” by module

Get content of each wrapper by AJAX

Weak PointsVasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru

• Drupal is runs many times

• There is no simple content amount limitation.

• Content is loaded asynchronously (AJAX).

Strong PointsVasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru

• We can show any page on the site, even to build by custom module without worrying about how it is created inside Drupal

• Page loads not all at once, but by parts.

But we must ensure that the upper sub-page is loaded faster than anyone else

Sandbox (experimental) projectsVasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru

The image below illustrate some differents of sandbox projects compare with full projects:

Promoting sandbox project to full project

Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru

• Create a new issue in the Project Applications queue

• You should be sure that your code corresponds to the Drupal coding standards

- Coder module (http://drupal.org/project/coder)

- Conventions (http://drupal.org/coding-standards#naming)

- hook_install and hook_uninstall, dependencies

- ScreenCast how to install and setup the module

- Try new module in different conditions (inst. prof.)

Layout issue (different themes) Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru

Different html structure and different names of selectors in each Drupal them

two ways to solve this issue:

1. Complex settings page

2. Limited number of supported themes (prepare list of presets for each allowed theme)

Header

Content area

Footer

Logo

Main menu

Complex settings way

Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru

Admin should have advansed level in HTML&CSS

The page of module settings

will be too difficult to fill

Admin should find out the IDs

of all necessary DOM selectors

by FireBug for example

Limited list of themes: final solution

• Module works only in allowed theme environment

• Now Bartik and Zen with sub-themes supported only

Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru

Overflow issue

Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru

Solutions:

- visible (show all content)

- hidden (cut content according window height)

- scroll (provide vertical scroll if overflow appeared)

How to change active theme?• hook_menu or hook_menu_alter:

$items['your_path'] = array( ... 'theme callback' => 'your_callback_func', 'theme arguments' => array(1), ... );

• You can use hook_custom_theme if the choice of theme doesn't depend on the path

This hook also should return the machine-readable name of the theme

• You can overwrite 'theme_default' Drupal system variable

variable_set('theme_default', 'your_theme_machine-readable_name');

Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru

Function your_callback_func() should return the machine-readable name of the theme, for example 'bartik'. You should be sure that the them exists and is enabled.

Scripts and Styles issuesVasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru

• When we get content of some HTML DOM selector of the other Drupal page we should be sure that there is no some specific JS or CSS added by drupal_add_js() and drupal_add_css() related to this part of page content.

• Also when we get content by AJAX some actions in JS that work when the document ready does not affected on content that we get by AJAX.

(function($){ $(document).ready(function(){ // code that is placed here can not work out for the content // that will get from the other pages by AJAX });})(jQuery);

Architecture of the moduleVasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru

Module are allowed to compile Single Page Website in Bartik theme and it’s sub-themes only at the current stage of the development

The following files included in module pack:single_page_website.info - dependencies[] = "menu"

single_page_website.module - hook_permission(), hook_menu()

single_page_website.install - hook_uninstall() - clear variables

single_page_website.admin.inc - module settings form

README.txt - user manual, useful links

js/scroll.js - them independent scrolling functions

js/bartik.js - some JS settings individual for Bartik theme

js/bartik.ini - DOM selector settings for Bartik theme

Roadmap Support more popular themes and it’s sub-

themes Testing with SimpleTest (create .test file in

the module package) Advanced settings tab on module settings page More different effects of switching pages

Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru

http://www.cooper.com/#about:booksThe Inmates Are Running the Asylum: Why High Tech Products Drive Us

Crazy and How to Restore the Sanity by Alan Cooper

http://drupal.org/coding-standards

http://drupal.org/node/1138960

The discursion with reviewers about Single Page Website module

http://drupal.org/sandbox/vasilyyaremchuk/1131866Single Page Website project page

Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru

Useful links

Please, ask your Questions!

Vasily Yaremchuk Successful Development LP

http://php.sfdev.com

Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru

www.yaremchuk.ru

vaso1977@gmail.com

vasilyyaremchuk

Contacts: