Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru          Vasily Yaremchuk         Sing...
Gold Sponsor ofDrupalCamp Kyiv 2011
Silver Sponsors ofDrupalCamp Kyiv 2011
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru                                Agenda ...
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru  Single Page Website  excellent exampl...
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ruHow to do Single Page Site in Drupal En...
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru      How to get content of the differe...
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru  The following solution is proposed:  ...
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru                           Weak Points ...
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru                          Strong Points...
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru    Sandbox (experimental) projects  Th...
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ruPromoting sandbox project to full proje...
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru     Layout issue (different themes)   ...
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru     Complex settings way   Admin shoul...
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ruLimited list of themes: final solution•...
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           How to change active theme?•...
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru             Scripts and Styles issues•...
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru               Architecture of the modu...
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru                              Roadmap  ...
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru                           Useful links...
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru          Please, ask your Questions!  ...
Upcoming SlideShare
Loading in …5
×

Vasily Yaremchuk.Single page website.DrupalCamp Kiev 2011

1,988 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,988
On SlideShare
0
From Embeds
0
Number of Embeds
1,109
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Vasily Yaremchuk.Single page website.DrupalCamp Kiev 2011

  1. 1. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru Vasily Yaremchuk Single Page Website experience in the design of the module Successful Development LP
  2. 2. Gold Sponsor ofDrupalCamp Kyiv 2011
  3. 3. Silver Sponsors ofDrupalCamp Kyiv 2011
  4. 4. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru 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
  5. 5. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru Single Page Website excellent example • http://www.volll.com See more in Google :-)
  6. 6. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ruHow to do Single Page Site in Drupal Environment? • Fixed Header and Footer Logo Header Main menu • Anchor links in Main menu Content area Footer
  7. 7. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru How to get content of the different pages to this page? • AJAX request to the other pages • Drupal API functions (node_load fore example) • CURL or file_get_contents()
  8. 8. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru The following solution is proposed: Main menu: first second third Create wrappers for each “sub page” by module #first $(“#first").load(first_url+" "+content_selector); #second $(“#second").load(second_url+" "+content_selector); #third $(“#third").load(third_url+" "+content_selector); Get content of each wrapper by AJAX
  9. 9. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru Weak Points • Drupal is runs many times • There is no simple content amount limitation. • Content is loaded asynchronously (AJAX).
  10. 10. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru Strong Points • 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
  11. 11. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru Sandbox (experimental) projects The image below illustrate some differents of sandbox projects compare with full projects:
  12. 12. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ruPromoting sandbox project to full project • 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.)
  13. 13. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru Layout issue (different themes) Different html structure and Logo Header different names of selectors Main menu in each Drupal them two ways to solve this issue: Content area 1. Complex settings page Footer 2. Limited number of supported themes (prepare list of presets for each allowed theme)
  14. 14. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru Complex settings way 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
  15. 15. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ruLimited list of themes: final solution• Module works only in allowed theme environment• Now Bartik and Zen with sub-themes supported only
  16. 16. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru Overflow issue Solutions: - visible (show all content) - hidden (cut content according window height) - scroll (provide vertical scroll if overflow appeared)
  17. 17. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru How to change active theme?• hook_menu or hook_menu_alter: $items[your_path] = array( Function your_callback_func() ... should return the machine-readable theme callback => your_callback_func, name of the theme, theme arguments => array(1), for example bartik. ... You should be sure that ); the them exists and is enabled.• You can use hook_custom_theme if the choice of theme doesnt depend on the pathThis hook also should return the machine-readable name of the theme• You can overwrite theme_default Drupal system variablevariable_set(theme_default, your_theme_machine-readable_name);
  18. 18. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru Scripts and Styles issues• 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);
  19. 19. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru Architecture of the moduleModule are allowed to compile Single Page Website in Bartik theme and it’s sub-themes only at the current stage of the developmentThe 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 variablessingle_page_website.admin.inc - module settings formREADME.txt - user manual, useful linksjs/scroll.js - them independent scrolling functionsjs/bartik.js - some JS settings individual for Bartik themejs/bartik.ini - DOM selector settings for Bartik theme
  20. 20. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru 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
  21. 21. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru Useful links http://www.cooper.com/#about:books The 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/1131866 Single Page Website project page
  22. 22. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru Please, ask your Questions! Vasily Yaremchuk Successful Development LP http://php.sfdev.com Contacts: www.yaremchuk.ru vaso1977@gmail.com vasilyyaremchuk

×