Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru




          Vasily Yaremchuk

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

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


  Single Page Website

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

How to do Single Page Site in Drupal ...
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru


      How to get content of the diff...
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 Point...
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru

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

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

Promoting sandbox project to full pro...
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 s...
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru


 Limited list of themes: final solut...
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru


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


           How to change active them...
Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru

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

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

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

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


          Please, ask your Questions...
Upcoming SlideShare
Loading in …5
×

of

Drupal Single Page Website Slide 1 Drupal Single Page Website Slide 2 Drupal Single Page Website Slide 3 Drupal Single Page Website Slide 4 Drupal Single Page Website Slide 5 Drupal Single Page Website Slide 6 Drupal Single Page Website Slide 7 Drupal Single Page Website Slide 8 Drupal Single Page Website Slide 9 Drupal Single Page Website Slide 10 Drupal Single Page Website Slide 11 Drupal Single Page Website Slide 12 Drupal Single Page Website Slide 13 Drupal Single Page Website Slide 14 Drupal Single Page Website Slide 15 Drupal Single Page Website Slide 16 Drupal Single Page Website Slide 17 Drupal Single Page Website Slide 18 Drupal Single Page Website Slide 19 Drupal Single Page Website Slide 20
Upcoming SlideShare
Single Page Apps with Drupal 8
Next

7 Likes

Share

Drupal Single Page Website

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Drupal Single Page Website

  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. 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
  3. 3. 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 :-)
  4. 4. 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
  5. 5. 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()
  6. 6. 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
  7. 7. 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).
  8. 8. 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
  9. 9. 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:
  10. 10. 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.)
  11. 11. 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)
  12. 12. 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
  13. 13. 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
  14. 14. 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)
  15. 15. 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');
  16. 16. 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);
  17. 17. 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
  18. 18. 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
  19. 19. 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/project/single_page_website Single Page Website project page
  20. 20. 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
  • warenchua7

    Oct. 2, 2014
  • smagic39

    Mar. 6, 2014
  • SuyashRanade

    Jan. 12, 2014
  • trftky

    Jun. 25, 2013
  • weichengchiang

    Apr. 9, 2013
  • charlesc

    Apr. 9, 2013
  • krdesign

    Feb. 11, 2013

Views

Total views

9,631

On Slideshare

0

From embeds

0

Number of embeds

139

Actions

Downloads

0

Shares

0

Comments

0

Likes

7

×