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
Gold Sponsor of
DrupalCamp Kyiv 2011
Silver Sponsors of
DrupalCamp Kyiv 2011
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
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 :-)
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru

How to do Single Page Site in Drupal Environment?


 • Fixed Header and Footer                         Logo
                                                              Header
                                                                Main menu


 • Anchor links in Main menu
                                                           Content area




                                                              Footer
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()
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
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).
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
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:
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru

Promoting 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.)
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)
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
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru


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
    Solutions:
    - visible (show all content)
    - hidden (cut content
    according window height)
    - scroll (provide vertical
    scroll if overflow appeared)
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
        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


             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);
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru


               Architecture of the module
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
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
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
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

Vasily Yaremchuk.Single page website.DrupalCamp Kiev 2011

  • 1.
    Vasily Yaremchuk: SinglePage Website. Try out a demonstration: http://yaremchuk.ru Vasily Yaremchuk Single Page Website experience in the design of the module Successful Development LP
  • 2.
  • 3.
  • 4.
    Vasily Yaremchuk: SinglePage 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.
    Vasily Yaremchuk: SinglePage Website. Try out a demonstration: http://yaremchuk.ru Single Page Website excellent example • http://www.volll.com See more in Google :-)
  • 6.
    Vasily Yaremchuk: SinglePage Website. Try out a demonstration: http://yaremchuk.ru How 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.
    Vasily Yaremchuk: SinglePage 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.
    Vasily Yaremchuk: SinglePage 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.
    Vasily Yaremchuk: SinglePage 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.
    Vasily Yaremchuk: SinglePage 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.
    Vasily Yaremchuk: SinglePage 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.
    Vasily Yaremchuk: SinglePage Website. Try out a demonstration: http://yaremchuk.ru Promoting 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.
    Vasily Yaremchuk: SinglePage 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.
    Vasily Yaremchuk: SinglePage 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.
    Vasily Yaremchuk: SinglePage Website. Try out a demonstration: http://yaremchuk.ru Limited list of themes: final solution • Module works only in allowed theme environment • Now Bartik and Zen with sub-themes supported only
  • 16.
    Vasily Yaremchuk: SinglePage 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.
    Vasily Yaremchuk: SinglePage 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 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');
  • 18.
    Vasily Yaremchuk: SinglePage 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.
    Vasily Yaremchuk: SinglePage Website. Try out a demonstration: http://yaremchuk.ru Architecture of the module 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
  • 20.
    Vasily Yaremchuk: SinglePage 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.
    Vasily Yaremchuk: SinglePage 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.
    Vasily Yaremchuk: SinglePage 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