vasily yaremchuk.single page website.drupalcamp kiev 2011
DESCRIPTION
TRANSCRIPT
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
vasilyyaremchuk
Contacts: