Your SlideShare is downloading. ×
0
Drupaling a
             Development Plan


Jon Skulski
Drupal Architect, Chapter Three
http://twitter.com/jonskulski
Hello, 7x7.
Hello, Development Plan
Plan. Organize. Structure.
        •   Discover the hard parts, know your
            enemies.

        •   Identify repea...
Hello, Home Page.
Home Page.
       Top Region




Main Region         Right Region
Dev Plan: Layout


• 3 region, 2 column ‘stacked’ layout
Home Page.
      Logo, Menu, Search


 Blog carousel               Ad


                     Newsletter
                  ...
Dev Plan: Pages
  • •Homepage
       Front page of the site: /home
   •   2-column ‘stacked’ layout
   •   Top: logo, menu...
Top: Logo, Menu, Search

    •   Drupal menu

    •   Search.module or apachesolr

    •   Theme the menu to include logo
...
Dev Plan:
Custom Block/Pane


• Logo, Menu, Search
Main: Blog Carousel



  •   Views + Views Carousel

  •   Filter by ‘blog’ type and sort by
      random or most viewed

...
Modules
•   node
•   wysiwyg
•   cck
    •     textarea
    •     userreference


•
    •     imagefield
    imagecache (re...
Dev Plan:Views

• Front Page Carousel
 • Filter by ‘blog’ type
 • Sort by nodequeue
Main: All Blog Entries


           •   Views

           •   Filter by type ‘blog’

           •   Sort by most recent
Dev Plan:Views

• Main Page Blog List
 • all blog entries, sorted by most
        recent
    • use pager after 10
•   Fron...
Right: Advertisement




  •   Custom or contributed integration
      with embedded ads service (TBD!)
Dev Plan:
Custom Block/Pane

• Advertisement integration (tbd,
    possible contrib module)
•   Logo, Menu, Search
Right: Newsletter



 •   Constant Contact module provides
     integration and block.

 •   If the form is not themable e...
Right: ShareThis



•   ShareThis module provides a block
    and very themable.
Modules
•   node
•   wysiwyg
•   cck
    •     textarea
    •     userreference


•
    •     imagefield
    imagecache (re...
Right: Most Popular




  •   View + statistics

  •   Filtered by all ‘blog’ posts

  •   Sorted by most views
Modules
•   node
•   wysiwyg
•   cck
    •
                                 • statistics (core)
          textarea
    •  ...
Dev Plan:Views
•   Most Popular Blog Entries list
    •   all blog entries, sorted by most viewed
    •   limit to 5, no p...
Home Page.
      Logo, Menu, Search


 Blog carousel               Ad


                     Newsletter
                  ...
Hello, Panels.
Hello, Home Page.
Hello, Blog Entry.
Blog Entry, simplified.
Title

Image
(specific width)


Image caption
(html capable)


Body
Content Types

• Blog Entry
 • Title (node)
 • Body (node)
 • Image (cck, imagefield, imagecache)
 • Image caption w/ html ...
Blog Entry, continued.


Body
(html capable)




Categories
(tags)
Content Types

• Blog Entry
 • Title (node)
 • Body w/ html (node, wysiwyg, tinymce)
 • Image (cck, imagefield, imagecache)...
Dev Plan: Modules
•   node
•   wysiwyg
•   cck
    •     textarea
    •     userreference
    •     imagefield
•   imagecac...
Taxonomies

• Free tags
• Category
 •   Eat & Drink

 •   Lifestyle

 •   Arts & Entertainment

 •   Fashion
Rinse & Repeat.
For every distinct group of content.
Hello, Website.
Thank you!


Jon Skulski
Drupal Architect, Chapter Three
http://twitter.com/jonskulski
Upcoming SlideShare
Loading in...5
×

Drupaling a Devleopment Plan

2,486

Published on

Thinking about a composition in terms of drupal development. Creating a development plan with drupal in mind.

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

No Downloads
Views
Total Views
2,486
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
38
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Introduction.

    Today going to talk about building a drupal development plan. After talking with clients about what want, and going through a design phase (often w/o drupal in mind) how do we plan to build that out in drupal.

    This is a large part of my job, ‘digesting’ a composition into a complete list of steps that a developer can take and implement. Dividing and conquering.
  • Today we are going to be working with a comp from the SF mag 7x7.

    7x7 is a SF culture magazine focusing on food, fashion and events. It’s a good idea of a ‘drupal kill zone’ site - blog content centric with some bells and wistles to make it interesting.


  • We create a document with the goal that this could be handed to a developer or shop and be turned into a website by following the steps.

    You should do this for every site. I even did it for my personal blog site informal way.
  • going through this mental exercise will let you...,

    - know where the hard parts, know where you are going to spend a lot of your time. and get an idea how you are going to solve them.

    - know how to solve problems once once. know what you can generalize to give greater control to the user

    - give yourself time to explore the contrib modules. sometimes a referral to a module comes out of small talk at user groups, etc. if you have it the back of your mind, someone might make a random comment how to solve your problem.

    - clients like to know 1) that you’ll solve their problem and 2) how you are going to solve it (even if you they don’t understand.) It will also help you when you need to work with other developers.

    - you are writing yourself a to-do list. it’ll keep you focused.

  • Let’s take a look at the front page comp to get started.

    - iterative process, and you’ll want to understand every comp you get so that you can recognize all the connections the website can have. (This page references the Article entry, this search box shows up on all pages, etc). but we’ll step through serially so we’re not here.

  • Our first cut. Notice the layout.

    Since this site is rather simple, all pages share the same layout.


  • (stacked means there that section at the top)

  • Take a look at your page, and divide it up.

    What are the independent elements? What elements will appear on other pages of the site?

  • So write it down.

    before we start building each of these blocks, we keep hearing a word “blog”, let’s figure out what that is.

  • So write it down.

    before we start building each of these blocks, we keep hearing a word “blog”, let’s figure out what that is.
  • - nodequeue allows administrators to create a orderable list of nodes and allows views to use it
  • Usual ones on the left, we add our new ones on the right
  • So write it down.

    before we start building each of these blocks, we keep hearing a word “blog”, let’s figure out what that is.

  • Add to dev plan
  • Depending on the client’s pick, we would integrate or use a contributed module
  • So write it down.

    before we start building each of these blocks, we keep hearing a word “blog”, let’s figure out what that is.
  • Custom drupal form could be used to integrate with other services
  • Custom drupal form could be used to integrate with other services
  • Usual ones on the left, we add our new ones on the right
  • node.statistics will give you rudimentary node view statistics.

    also google analytics is a possible solution
  • Usual ones on the left, we add our new ones on the right
  • Add to dev plan
  • Take a look at your page, and divide it up.

    What are the independent elements? What elements will appear on other pages of the site?

  • Now there are a lot of ways you can glue things together in drupal. I’m particular to the module panels. Provides this interface:

    - reflective of the the actual layout, more intuitive to admins
    - see it looks like the layout
    - each one of those boxes are pieces of content (i.e. “most popular” is the view created)
  • Let’s take a look at the front page comp to get started.

    - iterative process, and you’ll want to understand every comp you get so that you can recognize all the connections the website can have. (This page references the Article entry, this search box shows up on all pages, etc). but we’ll step through serially so we’re not here.

  • Now lets talk about this 'blog' entry we were talking about.

    We’ll start with the central idea of the 7x7 site, the blog entry. This is the design for the view for a single entry ‘when you’re reading one’.

    So now we start to dissect the composition-




  • We'll strip it down so that we ignroe all the extra pieces. (we can build those like


  • So we simply write these down into our plan.

    Title, body come from node.
    CCK (content construction kit) is a module to allow us to tell Drupal the type of stuff we are saying here. “I want to have a content type called Article with an image, title and body. I want to be able to enter URLs. I want to reference other Articles”.
    CCK will be on every site you build you build in drupal 6. it’s called ‘fields’ in drupal 7.

    We use a cck text area because we can easily imagine a long caption. Also, in the comp, we can use html. Text areas are better suited for that.
  • Looking over the comp more, we see the body needs to have to able to accept some html.

    We also know (from our talks with them) that they would like to be able to specify the author for a blog entry. They also want to be able to link to their user page bio. The best solution for us is to use a cck user reference field and a theme preprocess to place.

    We also see that they want to categorize their blog entries. Again, from our talks they would liek a free tagging vocabulary.

    Let’s update our dev plan


  • So we update out content type dev plan.

    But we can also distill more information
  • Contributed modules. These are the ones we’ll depend on for the blog entry view.
  • We have two types of categories for each blog entry, free tagging which can be anything and a category which was specified by the client.
  • Now we rinse and repeat.


  • So now we have to begin to put this together.



  • Introduction.

    Today going to talk about building a drupal development plan. After talking with clients about what want, and going through a design phase (often w/o drupal in mind) how do we plan to build that out in drupal.

    This is a large part of my job, ‘digesting’ a composition into a complete list of steps that a developer can take and implement. Dividing and conquering.
  • Transcript of "Drupaling a Devleopment Plan"

    1. 1. Drupaling a Development Plan Jon Skulski Drupal Architect, Chapter Three http://twitter.com/jonskulski
    2. 2. Hello, 7x7.
    3. 3. Hello, Development Plan
    4. 4. Plan. Organize. Structure. • Discover the hard parts, know your enemies. • Identify repeated patterns, solve problems once. • Explore contributed modules, don’t write code if you don’t have to. • Communicate your methods, clients and developers like it. • Determine your approach, create a to-do list.
    5. 5. Hello, Home Page.
    6. 6. Home Page. Top Region Main Region Right Region
    7. 7. Dev Plan: Layout • 3 region, 2 column ‘stacked’ layout
    8. 8. Home Page. Logo, Menu, Search Blog carousel Ad Newsletter subscription Sharing Blog entries (all) List of most popular blog entries
    9. 9. Dev Plan: Pages • •Homepage Front page of the site: /home • 2-column ‘stacked’ layout • Top: logo, menu and search pane • Main: • Blog carousel • All Blog entries • Right: • Ad • Newsletter • Share this • Most Popular view
    10. 10. Top: Logo, Menu, Search • Drupal menu • Search.module or apachesolr • Theme the menu to include logo • Since this is on every page, do a custom block or panel pane.
    11. 11. Dev Plan: Custom Block/Pane • Logo, Menu, Search
    12. 12. Main: Blog Carousel • Views + Views Carousel • Filter by ‘blog’ type and sort by random or most viewed • Potential editorial control with nodequeue
    13. 13. Modules • node • wysiwyg • cck • textarea • userreference • • imagefield imagecache (resizes images • views_carousel • nodequeue dynamically) • taxonomy • taxonomy_menu • search • views • panels • ctools
    14. 14. Dev Plan:Views • Front Page Carousel • Filter by ‘blog’ type • Sort by nodequeue
    15. 15. Main: All Blog Entries • Views • Filter by type ‘blog’ • Sort by most recent
    16. 16. Dev Plan:Views • Main Page Blog List • all blog entries, sorted by most recent • use pager after 10 • Front Page Carousel • Filter by ‘blog’ type, sort by nodequeue
    17. 17. Right: Advertisement • Custom or contributed integration with embedded ads service (TBD!)
    18. 18. Dev Plan: Custom Block/Pane • Advertisement integration (tbd, possible contrib module) • Logo, Menu, Search
    19. 19. Right: Newsletter • Constant Contact module provides integration and block. • If the form is not themable enough, we’ll have to write a custom form.
    20. 20. Right: ShareThis • ShareThis module provides a block and very themable.
    21. 21. Modules • node • wysiwyg • cck • textarea • userreference • • imagefield imagecache (resizes images • constant_contact • dynamically) taxonomy • share_this • taxonomy_menu • search • panels • ctools
    22. 22. Right: Most Popular • View + statistics • Filtered by all ‘blog’ posts • Sorted by most views
    23. 23. Modules • node • wysiwyg • cck • • statistics (core) textarea • userreference • imagefield • imagecache (resizes images dynamically) • constant_contact • • taxonomy taxonomy_menu • share_this • search • panels • ctools
    24. 24. Dev Plan:Views • Most Popular Blog Entries list • all blog entries, sorted by most viewed • limit to 5, no pager • use statistics.module for ‘most viewed’ metric • Main Page Blog List • all blog entries, sorted by most recent • use pager after 10 • Front Page Carousel • Filter by ‘blog’ type, sort by nodequeue
    25. 25. Home Page. Logo, Menu, Search Blog carousel Ad Newsletter subscription Sharing Blog entries (all) List of most popular blog entries
    26. 26. Hello, Panels.
    27. 27. Hello, Home Page.
    28. 28. Hello, Blog Entry.
    29. 29. Blog Entry, simplified. Title Image (specific width) Image caption (html capable) Body
    30. 30. Content Types • Blog Entry • Title (node) • Body (node) • Image (cck, imagefield, imagecache) • Image caption w/ html (cck, textarea)
    31. 31. Blog Entry, continued. Body (html capable) Categories (tags)
    32. 32. Content Types • Blog Entry • Title (node) • Body w/ html (node, wysiwyg, tinymce) • Image (cck, imagefield, imagecache) • Image caption w/ html (cck, textarea) • Category and Free tagging (taxonomy)
    33. 33. Dev Plan: Modules • node • wysiwyg • cck • textarea • userreference • imagefield • imagecache (resizes images dynamically) • taxonomy • taxonomy_menu • search
    34. 34. Taxonomies • Free tags • Category • Eat & Drink • Lifestyle • Arts & Entertainment • Fashion
    35. 35. Rinse & Repeat. For every distinct group of content.
    36. 36. Hello, Website.
    37. 37. Thank you! Jon Skulski Drupal Architect, Chapter Three http://twitter.com/jonskulski
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×