Your SlideShare is downloading. ×
Drupal in the Jungle
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Drupal in the Jungle

2,880
views

Published on

Redesigning a Web site for a Remote Wellness Retreat, On Site!

Redesigning a Web site for a Remote Wellness Retreat, On Site!

Published in: Art & Photos

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • [T] GIT set up attempt - got SSH enabled; lots of back and forth with Hostgator over 4 days, at which a Sr. Engineer told me we needed to upgrade our plan in order to host a repo. Original Kalani site developer said otherwise, but by this time, I just wanted to move on. (Tried Gitolite later, but also gave up)- abandoned - whoever takes over site will probably not be able to use anyway. [T] Set up local and remote installs of drupal 7 (using Hostgator shared hosting, business account) [T] got beta-kalani.com url on new account, because client is apprehensive about giving me access to live site server to set up sub domain
  • install and test media elements html5 video solution - research for mobile: Video module might work better, but needs zencoder config - Video module plus JS Player not working; not sure why need video wysiwig solution: install and config Media module
  • I researched a bunch of responsive base themes. I’ve heard all the arguments for and against Omega – this site is pretty simple, so it seemed like a good choice.
  • Delta allows you, via the Context module to make duplicates of your theme settings for any context on your site. This gives you the ability for alternative layouts as a reaction in Context... </awesomesauce>
  • Transcript

    • 1. Drupal in the jungleRedesigning a Web site for aRemote Wellness Retreat, On Site! By Malcolm van Delst
    • 2. Talk Map1. Intro2. Who I am3. Project, intro4. Process a. Research, project and site orientation, project planning b. Design and development i. Setting up development environment ii. Upgrade from 6 to 7 iii. Design and development5. Key modules and other tools6. Workshop content type7. Glossary
    • 3. 1. IntroAloha! Ive just spent 6 months at a remote Hawaiian wellness retreat redesigning andupdating the retreats Drupal 6 web site. I will present a case study of this project thatcovers:•upgrading a fairly simple but large site from Drupal 6 to 7•including • new architecture and • new design • mobile device compatibility • different home pages for local and remote audiences • building a class calendar with options for cancellations and changes on a per day basis, that is easy for a non-technical administrator to use • module upgrading • encrypted forms to accept credit cards•working from loose specification and design documents.•I will discuss some of the challenges presented by the environment, like spotty internetconnections, moist and salt-permeated air, and working with a volunteer team whosmembers change continually, and whos members have varying degrees of technicalknowledge and experience.
    • 4. 2. Who am I? •I makecommunication tools for awesome clients. •Mainlyfreelance since about 2000, though maybe not anymore. •Consulting,design, direction and development. •I work forpeople and projects I support. This usually means creative, challengingwork and/or projects that are good for humans and their environment. •RegardingDrupal, I’ve worked with the software since 2005. My first project washelping port GranvilleIsland.com, with Agentic. •I’m often aone-lady show, or, working on small teams in a loose front-end devcapacity.
    • 5. 3. Project, intro •Craigslist ad •My pre-project status:• Wellable.ca (Wordpress farm – templated sites- for the wellness industry).• past client, Massage Therapy Assoc. of BC, asked me if I wanted to provide low cost sites for their members. I thought doing a Wordpress farm would be perfect and continue the good times we had. I was wrong!• Building a business is haarrrdddd work!• Hawaii for 3 months to rebuild a Drupal site for a wellness retreat: "perfect!” •client hadgraphic designer, content writer/editor and php guy to help •Drupal 6 site •new site wasdesigned
    • 6. 3. Project, intro (cont.)Project (cont.)•*Home page, and the Workshop display page were designed • only had paper and low res pdf versions of these designs due to a computer crash • Architecture *changed several times throughout the project - is this something everyone experiences? *Menus/architecture have to be malleable. - Malcolm, make note of this and keep in mind on next project!•PHP guy was also the centre’s (Visual Basic) database programmer. Hehad made a navigation block prior to my arrival. We used that, but hewas mainly preoccupied with his own work and didn’t have a lot of timeto help with web site tasks. (…c0nt.)
    • 7. 3. Project, intro (cont.)Project (cont.)•The centre was in the midst of organization rehaul, • founder/ED stepping aside and a new ED stepping in • Accounting systems (and database) being overhauled • Shift to a more business-like mode of existence, while remaining a US registered non-profit.Web sites:•http://kalani.com - existing•http://beta-kalani.com - new
    • 8. 4. Processa. Research, project and site orientation, project planningb. Design and development i. setting up development environment ii. upgrade iii. design and development
    • 9. 4. Processa. Research, project and site orientation, project planning• [TECHNICAL] Review/research: • existing sites modules to see if they have been upgraded for D7 • how to upgrade • twitter was great - DUG was great - Dale and Renee suggest installing and setting up D7 site, then migrating content, using Migrate module, into new site; also talked to original site developers • mobile and mobile tourism sites - want to do mobile first - twitter and Gregory Heller • existing site and client notes with regard to possible structure and content presentation improvements; ie. views, grids for room display, weekly calendar, etc. • sales stats with regard to target market • 33/33/33 split between guests, workshop participants and (including payment and labour provided) volunteers • Google Analytics data • interesting that there was such heavy Mac/Safari usage: • Browser use, across mobile and desktop • 35% of visitors use Safari • 21% IE (mainly IE 8 and 9; 10% 7) • 22% Firefox • 18% Chrome
    • 10. 4. Process (cont.)a. Research, project and site orientation, project planning (cont.)• (set up Wordpress site for Puna Music Festival)• [T] GIT set up attempt• [T] Set up local and remote installs of drupal 7 to familiarize myself with the processes - I had never worked with Hostgator nor D7 before• [T] got beta-kalani.com url on new account – 2 accounts under the kalani.com url made it difficult to set up beta.kalani.com on newest, development account.• [DESIGN AND ARCHITECTURE] Review site architecture with Marketing Coordinator• [PROJECT ORGANIZATION] Write project plan• [DA] Create site map (tree structure) from flip chart
    • 11. 4. Process (cont.)a. Research, project and site orientation, project planning (cont.) • [PO] discussion with client - doesnt want to do mobile first because desktop site is most necessary • [T] Review migrate module • [T] Watch screencast re. technical aspects of d6 to 7 migration • [T] Using the migrate module seemed difficult and unnecessary for this site, which, though largish, was pretty straightforward so instead chose to copy live site to dev server, and upgrade that to D7.
    • 12. 4. Process b. Design and developmenti. Setting up development environment 1. [T] Pull down existing d6 site to laptop (localhost); db with phpmyadmin - cannot install because its "too big"; download and install back up and migrate – doesn’t work either 2. [T] troubleshoot mysql errors • On Mac, use Applications/Utilities/Console 1. [T] complete db import on laptop 2. [T] review d6 install 3. [T] move localhost install to remote: • move files (ie. Sites/name-of-folder-drupal-install-lives-in) - via ftp or cpanel • export/import db, • adjust settings.php file,
    • 13. 4. Process b. Design and developmenti. Setting up development environment (cont.)6.[T] move files from kalani.com to beta-kalani.com • search and replace file paths on sql file • back up existing db before uploading new one • error message "Notice: unserialize() [function.unserialize]: Error at offset 2 of 131 bytes in variable_initialize() (line 943 of /home/kalani/public_html/beta-kalani.com/includes/bootstrap.inc)." - research error - no solution - restore old db and start again, • contact hostgator re. php globals – they had to turn on • reverse db, clear caches, run update.php, re-upload db with paths reset, • install variablecheck module (update.php, clear caches) and use to address variables error - success!, finish removing "kalani6" from paths in db and upload,
    • 14. 4. Process b. Design and developmentiii. Upgrade from 6 to 7On localhost:1.[T] upgrade all modules to most recent d6 versions2.[T] turn off modules3.[T] upgrade core from 6 to 74.[T] upgrade modules • troubleshoot xml sitemap upgrade errors • search and replace "/drupal/sites/default" with "/kalani6/sites/default" on db and reload • update views - add fields which havent imported with the upgrade, adjust filters - press and events views • images not showing up in press view - review D7 image handling1.[T] review pages, menu by menu, for issues after upgrade
    • 15. 4. Process b. Design and developmentiv. Design and development1.[PO] redo architecture per marketing coordinator, Drew2.[T] install Omega and create sub theme3.[T] review Omega functions4.[T] download and install modules on local site,5.[PO] site description document • decide to use design mockup and existing site as site description document. Maybe not the best decision, but writing those documents is just not my thing.1.[DA] update site architecture doc2.[T] remove migrate module3.[T] install node sym links (to create duplicate menu items withdifferent page aliases)
    • 16. 4. Process b. Design and developmentiv. Design and development (cont.)9.[DA] design secondary pages, using graphic designer, Jais home pagedesign10.[DA] research how to turn Jais design into a mobile version11.[T] add content from Cameron, content writers, docs12.[DA] work out path strategy - path auto still has issues -http://t.co/Se8taFWp, so set paths to be only 2 menu levels deep - in theend, we just used page titles as paths instead of menu based paths13.[DA] [T] adjust blog categories per Cameron - used Term Mergemodule14.[T] create glossary content type and view (using Drupals defaultglossary view, and sorting alphabetically)
    • 17. 4. Process b. Design and developmentiv. Design and development (cont.)15.[T] set up delta/contexts (templates) for local and distant homepages,16.[T] install and configure ip reading (ip geolocation and smart ip) modules– to serve local or distance home page - register for key and input,17.[T] push work to remote site • major issues - Administration menu bar disappeared, Omega sub theme stopped working, links to images stopped working, seems that permissions for images changed so that going directly to image in url gives a Forbidden, research "Forbidden" message - server issue? - check apache log - apache is denying drupal access to many files • apache error “[client ::1] client denied by server configuration:... “ returned after updating to OS 10.7.4. • Fixed by changing the “Allow from 127.0.0.1” I added to the sites/.htaccess file to resolve the issue the first time, to “Allow from localhost”.15.[T] convo with Pathauto creator re. menu paths for path auto - install DEVversion, and set menu path
    • 18. 4. Process b. Design and developmentiv. Design and development (cont.)19.[T] theme headers and home page • home page slideshow: • taxonomy to tag content for home page • add block to home page, • add 2 dummy slides, configure fade, enable and test controls to see what can be rethemed to create numbers at bottom of images, • add "Slideshow Order" field to Workshop content type; add sorting via this field to Featured Programs (slideshow) view, • trying out video slideshow extras – don’t use • configure pagers • install exclude node title module to remove home page title,19.[T] research mac not opening .gz (site back up files) • attempt to use Unarchiver (install and test) - end up changing backup and migrate settings to ".zip" instead of .gz19.[T] Recent posts block - how to deal with images - review how they are added andoptions for displaying inline images smaller20.[T] setting up Upcoming Workshops - troubleshooting Views paths not working - findworkaround; update Workshop path aliases
    • 19. 4. Process b. Design and developmentiv. Design and development (cont.)23.[T] create custom date format and setting up grouping of UpcomingWorkshops view • *after making a custom date format (admin/config/regional/date-time/formats/add – it’s easy via http://www.php.net/manual/en/function.date.php!), dont forget to add it to your system at admin/config/regional/date-time23.[T] home page quotations: views-block and content type24.[T] menu: client wanted exact functionality - PHP guy had already built amodule to do it. I did some basic research re. doing what client wanted with menuviews; menu minipanels and om maximenus - both White Screened the site ,though the white-screening proved to be the result of a php/server error; not theresult of either of the modules - tried Suckerfish menu - same as Nice Menus - triedContext - sort of getting there - back to Nice Menus and jquery rollovers, reviewjquery options - left to finish rest of site25.[T] left sidebar features: create taxonomy tags and view, create imagecrop/resize dimensions and functions (at admin/config/media/image-styles), addSidebar Tall fields to content types
    • 20. 4. Process b. Design and developmentiv. Design and development (cont.)27.[T] Workshop pages - context? Go with simple cck blocks - wsod upon enabling • increase php limit in php.ini to 192mb, uninstall d6 modules (dormant modules)- getting lots of errors, unzip d6 cck modules, uninstall others, check error logs, create my.cnf file and up max packet size - doesnt fix - google, attempt to install coder module and address dead cck modules, thinking they might be reason - cannot install coder - google - uninstall Quotations module - allows me to install cck blocks module, but stii cannot install panels - google, http:// bogdan.org.ua/2008/12/25/how-to-fix-mysql-server-has-gone-away-error-2006.html • drupal 7 wsod upon enabling module, removing modules from sites/all/modules and running update.php brings site back – CREATED my.cnf file in MAMP/conf/my.cnf. Set permissions to read only (otherwise MAMP will ignore it), add “[mysqld] max_allowed_packet = 128M”. Increase until error goes away. Can also try adding “wait_timeout = 600” and increasing until error goes away, if you need. • Changing parameters in my.cnf file - quit Mamp, instead of just stopping/restarting servers - file not being read because permissions allow "everyone" to write to it - change permissions - re-enable modules - problem solved • set up sidebar blocks for workshop pages - enable cck blocks, adjust workshop fields, add pic field, adjust displays to move fields to sidebar blocks, add blocks and configure - facilitator fields need to be grouped AND editor must be allowed to add several facilitators to a workshop - install field collection module, set up field collections and blocks for left sidebars of workshops, • create page-room-teaser tpl file to add Learn More link to rooms grid • use "Integer" field type in room field collection, so I can add $ prefix
    • 21. 4. Process b. Design and developmentiv. Design and development (cont.)28.[T] set up Weekly Calendar view- "Calendar plugin is missing" - need to set upspecialized date fields for D7- add specialized field to Event content type and test view,add filters,- block working on non-templated view, but filter is not; filter working ontemplated view but block is not -29.[T] theme workshops pages, add facilitator names to main page area - cannot parseout names from facilitator field collection - • research, find module patch & apply- adjust field display to show only facilitator names, finish less framework setup, theme workshops page,28.[T] theme home page - site is squished in IE - research - adjust settings from "Narrow"to "Normal", set up Footer map and theme,29.[T] footer menu: try a variety of things, but none look good nor allow for easy theming- menu mini-panels, footer site map, Site Map, - settle on footer map module30.[DA] [T] sketched out plan for Accommodations page as it relates to Workshop pricinggrid, looked at Relations and node reference (references for D7) modules, create list offields for Room content type,31.[T] create Room content type, fields and field display,32.[DA] [T] add room reference field to Workshop and configure, look at existingworkshops to see what kind of options they need,
    • 22. 4. Process b. Design and developmentiv. Design and development (cont.)35.[T] adjust fields for Workshop and display of fields - create field collection for Rooms andpricing, create template file and adjust for teaser view of Room content type, theme,36.[DA] [T] design and theme Workshop Workshop Fees section, adjust template file and css,change text on Read More link, • per Marketing Coordinator, add Double/Single Occupancy and pre/post table comments and style,35.[T] make rooms and theme36.[T] grid layout for Rooms on Workshops pages: field collection, node reference37.[DA] [T] create and design workshops listings page
    • 23. 4. Process b. Design and developmentiv. Design and development (cont.)40.[T] Weekly Schedule - how to create it? Create Class content type, withdefault fields and "Cancellations and Changes" fields to overwrite defaultfields, if they are present•Class content type: add date type • max timeout error on repeating date field - repeating dates still buggy in D7 • look at using Google calendar, but client wants class schedule to look like site - doesnt like look of Google calendar • research contextual filters • more timeout errors • try date repeat instance module but it breaks site • try to add popups, but wonky - cannot access controls with Rubik theme and admin menu for popups throws errors - abandon•theme Weekly calendar
    • 24. 4. Process b. Design and developmentiv. Design and development (cont.)41.[DA] [T] organize Resource Centre (blog), following structure ofanother popular wellness retreat’s resource centre section • create view that uses taxonomy, not content • design and theme section home page, sub-section home pages and blog post pages41.[T] research ways to import/export content only -node exportmodule is buggy; could only get it to export/import one node at atime - *someone suggested RSS feeds, but noted that they are notsimple to set up42.[T] theme pager for resource centre (blog) pages43.[T] checking user permissions for editors - * did I remake or didthey come over with import? (they came over)44.[DA] [T] design and theme resource centre pages45.[T] set up context for resource centre
    • 25. 4. Process b. Design and developmentiv. Design and development (cont.)47.[T] SEO modules: Seo Compliance Checker, SEO Tools andSEO checklist; add AddThis code to a block and add to pages (way fasterthan using AddThis module);48.[T] install Boost to help with site speed/Weekly calendar issues49.[T] install Path Redirect Import module to help bring over all pathsfrom old site to new, grab csv files from live site for path redirects andurl aliases - compare paths to new site, adjust new sites menu systemand paths to architecture-v4 document50.[T] review all pages and notate path issues on spreadsheet51.[T] review url aliases and paths and map to new site via spreadsheet,test import ability - it works!52.[DA] [T] create Access Denied page and add login block to page,remove Add This links on Page not Found and Access Denied pages,
    • 26. 4. Process b. Design and developmentiv. Design and development (cont.)53.[T] check rest of wysiwig styles and adjust,54.theme accommodations and rooms pages55.[T] update Reservation form with encrypted fields, add encryptedcredit card fields to Application form and theme, set up ssl certificateper Hostgator (we got it free with business acct; otherwise, you mighthave to pay),56.[T] create contexts to put sidebar menus on different sections57.[DA] [[T] review Workshop forms, adjust and add descriptions, makefield groupings collapsible, to reduce clutter/aid usability,58.[T] install secure pages and apply core patches to support securepages - backup site beforehand - backup and migrate not working -research error - update back up and migrate to most recent version,works - back up site - getting redirect errors - contact hostgator,
    • 27. 4. Process b. Design and developmentiv. Design and development (cont.)59.[T] test reservation and volunteer application forms, down/uploadvolunteer forms to beta-kalani.com60.[T] troubleshooting path auto issues to no avail61.[T] adjust Workshops rooms grid for IE62.[T] remove legacy (no longer in use) pricing fields from Workshopsadmin pages63.[T] issue with php globals and inability to run update.php - contacthostgator - they fix64.[T] turn off management and navigation blocks for editors,65.[DA] [[T] design sidebar menus: add contexts for each section • design and theme sidebar menus • Adjust background image for charitable programming section which uses both one menu and two menus in places,
    • 28. 4. Process b. Design and developmentiv. Design and development (cont.)67.[DA] [[T] adjust colours and size of leaf background on sidebar menus,68.research navigation best practices, • make top 3 nav items clickable, • add Contact and Reservations to top header, • sit with Jim as he navigates site and make notes, • [DA] [T] go through top menu and add pages, • fix broken links and • make names of pages consistent with menu items,67.[T] review site in IE - menu adjustments for IE, themeContact/Reservations in header,68.[T] adding menus to individual blog pages • detangle conflicts between community section and resource center contexts blocks
    • 29. 5. Highlighted modules and other tools
    • 30. 6. Workshop Content type7. Glossary[T] Technical[DA] Design and architecture[PO] Project organization