SlideShare a Scribd company logo
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
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/project/single_page_website
  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

More Related Content

What's hot

Html, WordPress & evolving forms of publishing
Html, WordPress & evolving forms of publishingHtml, WordPress & evolving forms of publishing
Html, WordPress & evolving forms of publishing
crondeau
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first course
Vlad Posea
 
Preventing Drupal Headaches: Establishing Flexible File Paths From The Start
Preventing Drupal Headaches: Establishing Flexible File Paths From The StartPreventing Drupal Headaches: Establishing Flexible File Paths From The Start
Preventing Drupal Headaches: Establishing Flexible File Paths From The Start
Acquia
 
PoP - “Platform of Platforms”: Framework for building Single-Page Application...
PoP - “Platform of Platforms”: Framework for building Single-Page Application...PoP - “Platform of Platforms”: Framework for building Single-Page Application...
PoP - “Platform of Platforms”: Framework for building Single-Page Application...
Leonardo Losoviz
 
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Emma Jane Hogbin Westby
 
Develop Basic joomla! MVC component for version 3
Develop Basic joomla! MVC component for version 3Develop Basic joomla! MVC component for version 3
Develop Basic joomla! MVC component for version 3
Gunjan Patel
 
Anatomy of a Wordpress theme
Anatomy of a Wordpress themeAnatomy of a Wordpress theme
Anatomy of a Wordpress theme
Dave Wallace
 
Content Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme developmentContent Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme development
Dave Wallace
 
Media handling in Drupal (Drupalcamp Leuven 2013)
Media handling in Drupal (Drupalcamp Leuven 2013)Media handling in Drupal (Drupalcamp Leuven 2013)
Media handling in Drupal (Drupalcamp Leuven 2013)
Pure Sign
 
There's a Module for That, MIMA Summit 2010
There's a Module for That, MIMA Summit 2010There's a Module for That, MIMA Summit 2010
There's a Module for That, MIMA Summit 2010
Emma Jane Hogbin Westby
 
Drupal for Libraries 05/28/09
Drupal for Libraries 05/28/09Drupal for Libraries 05/28/09
Drupal for Libraries 05/28/09
Mikael Jacobsen
 
Make Your IBM Connections Deployment Your Own: Customize It!
Make Your IBM Connections Deployment Your Own: Customize It!Make Your IBM Connections Deployment Your Own: Customize It!
Make Your IBM Connections Deployment Your Own: Customize It!
Klaus Bild
 
Installing wordpress
Installing wordpressInstalling wordpress
Installing wordpress
Dave Wallace
 
Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Cms & wordpress theme development 2011
Cms & wordpress theme development 2011
Dave Wallace
 
5 Important Tools for Drupal Development
5 Important Tools for Drupal Development5 Important Tools for Drupal Development
5 Important Tools for Drupal Development
jcarrig
 
Design to Theme @ CMSExpo
Design to Theme @ CMSExpoDesign to Theme @ CMSExpo
Design to Theme @ CMSExpo
Emma Jane Hogbin Westby
 
Rapid site production with Drupal
Rapid site production with DrupalRapid site production with Drupal
Rapid site production with Drupal
Rob Sawyer
 
Top 20 Drupal Mistakes newbies make
Top 20 Drupal Mistakes newbies makeTop 20 Drupal Mistakes newbies make
Top 20 Drupal Mistakes newbies make
Iztok Smolic
 
Part1 learn thelingo
Part1 learn thelingoPart1 learn thelingo
Part1 learn thelingo
Taneya Koonce
 
Best Practice Checklist for Building a Drupal Website
Best Practice Checklist for Building a Drupal WebsiteBest Practice Checklist for Building a Drupal Website
Best Practice Checklist for Building a Drupal Website
Acquia
 

What's hot (20)

Html, WordPress & evolving forms of publishing
Html, WordPress & evolving forms of publishingHtml, WordPress & evolving forms of publishing
Html, WordPress & evolving forms of publishing
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first course
 
Preventing Drupal Headaches: Establishing Flexible File Paths From The Start
Preventing Drupal Headaches: Establishing Flexible File Paths From The StartPreventing Drupal Headaches: Establishing Flexible File Paths From The Start
Preventing Drupal Headaches: Establishing Flexible File Paths From The Start
 
PoP - “Platform of Platforms”: Framework for building Single-Page Application...
PoP - “Platform of Platforms”: Framework for building Single-Page Application...PoP - “Platform of Platforms”: Framework for building Single-Page Application...
PoP - “Platform of Platforms”: Framework for building Single-Page Application...
 
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010
 
Develop Basic joomla! MVC component for version 3
Develop Basic joomla! MVC component for version 3Develop Basic joomla! MVC component for version 3
Develop Basic joomla! MVC component for version 3
 
Anatomy of a Wordpress theme
Anatomy of a Wordpress themeAnatomy of a Wordpress theme
Anatomy of a Wordpress theme
 
Content Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme developmentContent Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme development
 
Media handling in Drupal (Drupalcamp Leuven 2013)
Media handling in Drupal (Drupalcamp Leuven 2013)Media handling in Drupal (Drupalcamp Leuven 2013)
Media handling in Drupal (Drupalcamp Leuven 2013)
 
There's a Module for That, MIMA Summit 2010
There's a Module for That, MIMA Summit 2010There's a Module for That, MIMA Summit 2010
There's a Module for That, MIMA Summit 2010
 
Drupal for Libraries 05/28/09
Drupal for Libraries 05/28/09Drupal for Libraries 05/28/09
Drupal for Libraries 05/28/09
 
Make Your IBM Connections Deployment Your Own: Customize It!
Make Your IBM Connections Deployment Your Own: Customize It!Make Your IBM Connections Deployment Your Own: Customize It!
Make Your IBM Connections Deployment Your Own: Customize It!
 
Installing wordpress
Installing wordpressInstalling wordpress
Installing wordpress
 
Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Cms & wordpress theme development 2011
Cms & wordpress theme development 2011
 
5 Important Tools for Drupal Development
5 Important Tools for Drupal Development5 Important Tools for Drupal Development
5 Important Tools for Drupal Development
 
Design to Theme @ CMSExpo
Design to Theme @ CMSExpoDesign to Theme @ CMSExpo
Design to Theme @ CMSExpo
 
Rapid site production with Drupal
Rapid site production with DrupalRapid site production with Drupal
Rapid site production with Drupal
 
Top 20 Drupal Mistakes newbies make
Top 20 Drupal Mistakes newbies makeTop 20 Drupal Mistakes newbies make
Top 20 Drupal Mistakes newbies make
 
Part1 learn thelingo
Part1 learn thelingoPart1 learn thelingo
Part1 learn thelingo
 
Best Practice Checklist for Building a Drupal Website
Best Practice Checklist for Building a Drupal WebsiteBest Practice Checklist for Building a Drupal Website
Best Practice Checklist for Building a Drupal Website
 

Viewers also liked

Single Page Apps with Drupal 8
Single Page Apps with Drupal 8Single Page Apps with Drupal 8
Single Page Apps with Drupal 8
Chris Tankersley
 
A Match Made In The Cloud
A Match Made In The CloudA Match Made In The Cloud
A Match Made In The Cloud
Chapter Three
 
Contributing to drupal
Contributing to drupalContributing to drupal
Contributing to drupal
Christian López Espínola
 
Alfresco from an agile framework perspective
Alfresco from an agile framework perspectiveAlfresco from an agile framework perspective
Alfresco from an agile framework perspective
Jeff Potts
 
Workflow Initiative
Workflow InitiativeWorkflow Initiative
Workflow Initiative
timmillwood
 
More better core profiles
More better core profilesMore better core profiles
More better core profilesRoy Scholten
 
Using Empathy Maps to Better Understand your Jury - Drupal Camp London 2015
Using Empathy Maps to Better Understand your Jury - Drupal Camp London 2015Using Empathy Maps to Better Understand your Jury - Drupal Camp London 2015
Using Empathy Maps to Better Understand your Jury - Drupal Camp London 2015
Kubair Shirazee
 
Multilenguaje en Drupal 8
Multilenguaje en Drupal 8Multilenguaje en Drupal 8
Multilenguaje en Drupal 8
Christian López Espínola
 
Contribuir en Drupal: Por dónde empiezo?
Contribuir en Drupal: Por dónde empiezo?Contribuir en Drupal: Por dónde empiezo?
Contribuir en Drupal: Por dónde empiezo?
Christian López Espínola
 
Faster Drupal sites using Queue API
Faster Drupal sites using Queue APIFaster Drupal sites using Queue API
Faster Drupal sites using Queue API
OSInet
 
Life after the hack
Life after the hackLife after the hack
Life after the hack
OSInet
 
Drupal and Devops , the Survey Results
Drupal and Devops , the Survey ResultsDrupal and Devops , the Survey Results
Drupal and Devops , the Survey Results
Kris Buytaert
 
Crowds and Creativity
Crowds and CreativityCrowds and Creativity
Crowds and Creativity
Mike Krieger
 
Better understanding your prospects, clients, stakeholders and end users usin...
Better understanding your prospects, clients, stakeholders and end users usin...Better understanding your prospects, clients, stakeholders and end users usin...
Better understanding your prospects, clients, stakeholders and end users usin...
Kubair Shirazee
 
Introducing Assetic: Asset Management for PHP 5.3
Introducing Assetic: Asset Management for PHP 5.3Introducing Assetic: Asset Management for PHP 5.3
Introducing Assetic: Asset Management for PHP 5.3
Kris Wallsmith
 

Viewers also liked (15)

Single Page Apps with Drupal 8
Single Page Apps with Drupal 8Single Page Apps with Drupal 8
Single Page Apps with Drupal 8
 
A Match Made In The Cloud
A Match Made In The CloudA Match Made In The Cloud
A Match Made In The Cloud
 
Contributing to drupal
Contributing to drupalContributing to drupal
Contributing to drupal
 
Alfresco from an agile framework perspective
Alfresco from an agile framework perspectiveAlfresco from an agile framework perspective
Alfresco from an agile framework perspective
 
Workflow Initiative
Workflow InitiativeWorkflow Initiative
Workflow Initiative
 
More better core profiles
More better core profilesMore better core profiles
More better core profiles
 
Using Empathy Maps to Better Understand your Jury - Drupal Camp London 2015
Using Empathy Maps to Better Understand your Jury - Drupal Camp London 2015Using Empathy Maps to Better Understand your Jury - Drupal Camp London 2015
Using Empathy Maps to Better Understand your Jury - Drupal Camp London 2015
 
Multilenguaje en Drupal 8
Multilenguaje en Drupal 8Multilenguaje en Drupal 8
Multilenguaje en Drupal 8
 
Contribuir en Drupal: Por dónde empiezo?
Contribuir en Drupal: Por dónde empiezo?Contribuir en Drupal: Por dónde empiezo?
Contribuir en Drupal: Por dónde empiezo?
 
Faster Drupal sites using Queue API
Faster Drupal sites using Queue APIFaster Drupal sites using Queue API
Faster Drupal sites using Queue API
 
Life after the hack
Life after the hackLife after the hack
Life after the hack
 
Drupal and Devops , the Survey Results
Drupal and Devops , the Survey ResultsDrupal and Devops , the Survey Results
Drupal and Devops , the Survey Results
 
Crowds and Creativity
Crowds and CreativityCrowds and Creativity
Crowds and Creativity
 
Better understanding your prospects, clients, stakeholders and end users usin...
Better understanding your prospects, clients, stakeholders and end users usin...Better understanding your prospects, clients, stakeholders and end users usin...
Better understanding your prospects, clients, stakeholders and end users usin...
 
Introducing Assetic: Asset Management for PHP 5.3
Introducing Assetic: Asset Management for PHP 5.3Introducing Assetic: Asset Management for PHP 5.3
Introducing Assetic: Asset Management for PHP 5.3
 

Similar to Drupal Single Page Website

Wordpress as a CMS
Wordpress as a CMSWordpress as a CMS
Wordpress as a CMS
Michael Hammel
 
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Artur Cistov
 
Wordpress as a CMS - WordCampNOLA
Wordpress as a CMS - WordCampNOLAWordpress as a CMS - WordCampNOLA
Wordpress as a CMS - WordCampNOLA
Marc Juneau
 
"Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ...
"Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ..."Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ...
"Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ...
DrupalCamp Kyiv
 
Front-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsFront-end optimisation & jQuery Internals
Front-end optimisation & jQuery Internals
Artur Cistov
 
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme DevelopmentDrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
ultimike
 
Develop Engaging and High Performance Portal Themes That Power Exceptional Di...
Develop Engaging and High Performance Portal Themes That Power Exceptional Di...Develop Engaging and High Performance Portal Themes That Power Exceptional Di...
Develop Engaging and High Performance Portal Themes That Power Exceptional Di...
shesmer
 
Theme development essentials columbus oh word camp 2012
Theme development essentials   columbus oh word camp 2012Theme development essentials   columbus oh word camp 2012
Theme development essentials columbus oh word camp 2012
Joe Querin
 
Hello Drupal
Hello DrupalHello Drupal
Hello Drupal
hellodrupal
 
What is the WordPress Loop?
What is the WordPress Loop?What is the WordPress Loop?
What is the WordPress Loop?
webdesigncom
 
Wordpress Beyond A Blog Word Camp Toronto08
Wordpress Beyond A Blog Word Camp Toronto08Wordpress Beyond A Blog Word Camp Toronto08
Wordpress Beyond A Blog Word Camp Toronto08
Jamie Oastler
 
Wordpress Tech Talk at Atlogys
Wordpress Tech Talk at AtlogysWordpress Tech Talk at Atlogys
Wordpress Tech Talk at Atlogys
Ritika Garga
 
Wordpress Tech Talk
Wordpress Tech Talk Wordpress Tech Talk
Wordpress Tech Talk
Atlogys Technical Consulting
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
openchamp
 
Drupal: an Overview
Drupal: an OverviewDrupal: an Overview
Drupal: an Overview
Matt Weaver
 
Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011
Ryan Price
 
Pluggable patterns
Pluggable patternsPluggable patterns
Pluggable patterns
Corey Oordt
 
Hacking MediaWiki (For Users)
Hacking MediaWiki (For Users)Hacking MediaWiki (For Users)
Hacking MediaWiki (For Users)
Brianna Laugher
 
web development
web developmentweb development
web development
Sevajothi Crafts
 
Unic - frontend development-in-complex-projects
Unic - frontend development-in-complex-projectsUnic - frontend development-in-complex-projects
Unic - frontend development-in-complex-projects
Unic
 

Similar to Drupal Single Page Website (20)

Wordpress as a CMS
Wordpress as a CMSWordpress as a CMS
Wordpress as a CMS
 
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
 
Wordpress as a CMS - WordCampNOLA
Wordpress as a CMS - WordCampNOLAWordpress as a CMS - WordCampNOLA
Wordpress as a CMS - WordCampNOLA
 
"Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ...
"Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ..."Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ...
"Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ...
 
Front-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsFront-end optimisation & jQuery Internals
Front-end optimisation & jQuery Internals
 
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme DevelopmentDrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
 
Develop Engaging and High Performance Portal Themes That Power Exceptional Di...
Develop Engaging and High Performance Portal Themes That Power Exceptional Di...Develop Engaging and High Performance Portal Themes That Power Exceptional Di...
Develop Engaging and High Performance Portal Themes That Power Exceptional Di...
 
Theme development essentials columbus oh word camp 2012
Theme development essentials   columbus oh word camp 2012Theme development essentials   columbus oh word camp 2012
Theme development essentials columbus oh word camp 2012
 
Hello Drupal
Hello DrupalHello Drupal
Hello Drupal
 
What is the WordPress Loop?
What is the WordPress Loop?What is the WordPress Loop?
What is the WordPress Loop?
 
Wordpress Beyond A Blog Word Camp Toronto08
Wordpress Beyond A Blog Word Camp Toronto08Wordpress Beyond A Blog Word Camp Toronto08
Wordpress Beyond A Blog Word Camp Toronto08
 
Wordpress Tech Talk at Atlogys
Wordpress Tech Talk at AtlogysWordpress Tech Talk at Atlogys
Wordpress Tech Talk at Atlogys
 
Wordpress Tech Talk
Wordpress Tech Talk Wordpress Tech Talk
Wordpress Tech Talk
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
 
Drupal: an Overview
Drupal: an OverviewDrupal: an Overview
Drupal: an Overview
 
Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011
 
Pluggable patterns
Pluggable patternsPluggable patterns
Pluggable patterns
 
Hacking MediaWiki (For Users)
Hacking MediaWiki (For Users)Hacking MediaWiki (For Users)
Hacking MediaWiki (For Users)
 
web development
web developmentweb development
web development
 
Unic - frontend development-in-complex-projects
Unic - frontend development-in-complex-projectsUnic - frontend development-in-complex-projects
Unic - frontend development-in-complex-projects
 

Recently uploaded

UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
GOWSIKRAJA PALANISAMY
 
Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1
Decomart Studio
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
7sd8fier
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
lunaemel03
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
9a93xvy
 
Revolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in IndiaRevolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in India
amrsoftec1
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
ameli25062005
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
eloprejohn333
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
7sd8fier
 
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
n0tivyq
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
184804
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
peuce
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
asuzyq
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
Techno Merch
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
ameli25062005
 
Branding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdfBranding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdf
PabloMartelLpez
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
pmgdscunsri
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
garcese
 

Recently uploaded (20)

UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
 
Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
 
Revolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in IndiaRevolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in India
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
 
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
 
Branding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdfBranding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdf
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
 

Drupal Single Page Website

  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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