SlideShare a Scribd company logo
DrupalCon 2011
     Chicago, IL
Keynote - Dries Buytaert
Keynote - Dries Buytaert
Keynote - Dries Buytaert

• References

 • http://chicago2011.drupal.org/keynote-
   dries-buytaert
Free and Open Source Tools for
  Integrating Web Accessibility
     into the Design Process
• Web Accessibility Evaluation Tool

   • WebAIM Wave (http://wave.webaim.org/)

   • Run Fae (http://fae.cita.illinois.edu/)

   • Accessibility Evaluator for Firefox (https://addons.mozilla.org/en-US/firefox/addon/
     accessibility-evaluation-toolb/)

   • Accessibility Inspector for Firebug (http://code.google.com/p/ainspector)

• iCITA Web Accessibility Best Practices. (http://presentations.cita.illinois.edu/2011-03-
  drupalcon/2011-03-druplecon8.html)

• Online Course on Designing Accessible Web Forms (http://
  presentations.cita.illinois.edu/2011-03-drupalcon/2011-03-druplecon14.html)
Free and Open Source Tools for
  Integrating Web Accessibility
     into the Design Process
• References

  • http://presentations.cita.illinois.edu/2011-03-drupalcon/

  • http://chicago2011.drupal.org/sessions/free-and-open-source-tools-
    integrating-web-accessibility-design-process
Rockin’ HTML5 with Drupal
Form




<label for=”fovarite-cms”>Your Favorite CMS
</label>

<input id=”favorite-cms” name=”favorite-cms”
type=”text” placeholder=”Drupal. What else?” /
>
Rockin’ HTML5 with Drupal


<input type=”text”>    <input type=”time”>
<input type=”email”>   <input type=”color”>
<input type=”url”>     <input type=”tel”>
<input type=”date”>    <input type=”week”>
Rockin’ HTML5 with Drupal
Rockin’ HTML5 with Drupal
• HTML5 demo (http://formalize.me/
  jquery_demo.html)

• HTML5 Tools module (http://drupal.org/project/
  html5_tools)

• Html5 Base Theme (http://drupal.org/project/
  html5_base)
Rockin’ HTML5 with Drupal
VIDEO AUDIO GAME


<video>
<audio>
<canvas>

Demo (http://9elements.com/io/projects/html5/
canvas/)
Rockin’ HTML5 with Drupal
WEB STORAGE
Web SQL




Demo (http://project.mahemoff.com/sql.html)
Rockin’ HTML5 with Drupal
WEB STORAGE
IndexedDB

Demo (http://hacks.mozilla.org/2010/06/
comparing-indexeddb-and-webdatabase/)
Rockin’ HTML5 with Drupal

• Geolocation

• Drag & drop

• Web socket

 • Bidirectional communication / messenger

• Backward compatibility
Rockin’ HTML5 with Drupal

• References

 • http://jensimmons.com/presentations/rockin-
   html5-drupal/drupalcon-chicago

 • http://extras.jensimmons.com/
   drupalconchicago2011/
   drupalconchicago_html5drupal_jensimmons
   .pdf
Webform 3
        The Survey Tool for Drupal
• Changes in Webform 3

 • Conditional Fields

 • Save drafts and resume later

 • Enable any content type

 • Basic views module support

 • Edit own submission field

 • Form Builder Integration
Webform 3
         The Survey Tool for Drupal
• New API

  • Module-provide components

  • Hooks for save, insert, update, delete

  • Multiform dynamic in webform3

• Integration

  • Pay module

  • Mollum
Webform 3
      The Survey Tool for Drupal

• References

 • http://chicago2011.drupal.org/sessions/
   webform-3-survey-tool-drupal
Drupal on the go with
         jQuery Mobile

• Support IOS and Android

• Demo (http://tha.cm/jqm-demo)

• Code (http://tha.cm/jqm-projects)
Drupal on the go with
        jQuery Mobile
• References

 • http://chicago2011.drupal.org/sessions/
   drupal-go-jquery-mobile
Developing Apps for iPhone/
  iPad/Android using drupal as
         Base System
• Frontend

 • Appcelerator (Thaitanium API to Build
   Native App). jQuery

• Backend

 • Services module (with JSON,XMLRPC
   module)
Developing Apps for iPhone/
  iPad/Android using drupal as
         Base System

• References

 • http://chicago2011.drupal.org/sessions/
   developing-apps-iphone-ipad-android-
   using-drupal-base-system

 • http://developer.appcelerator.com/
   get_started
Failure to Launch
 Drupal Performance Tuning
• Cache

  • Database caching

  • Opcode cache (APC)

  • Object cache (memcache)

  • Static file cache (boost module)

  • Reverse proxies (Varnish, Squid, NGINX)



• Pressflow & Varnish

  • Pressflow - A performance optimized distribution of Drupal (eg. create a
    header for vanish, DB Slave, New Setting)
Failure to Launch
 Drupal Performance Tuning
• Other technique

  • Syslog faster than dblog

  • Use InnoDB engine

• Testing

  • JMeter for load testing

• Analytic

  • Piwik

  • Google Analytic
Failure to Launch
Drupal Performance Tuning
• References

 • http://chicago2011.drupal.org/sessions/failure-
   launch-drupal-performance-tuning

 • http://devbee.com/opcode_cache_for_dummies

 • https://wiki.fourkitchens.com/display/PF/
   Comparison+-+Pressflow+versus+Drupal

 • http://groups.drupal.org/node/50408
Coder Module
     Easily Port Modules to Drupal 7
• Coder Review

  • Drupal Coding Standard

  • Security Review

  • Performance Review

• Coder Upgrade

  • Sourcecode

  • Patch

• Drush command

  • drush coder-review
Coder Module
   Easily Port Modules to Drupal 7

• References

 • http://upgrade.boombatower.com/

 • http://drupal.org/node/224333 (Checklist)

 • http://chicago2011.drupal.org/sessions/
   coder-module-easily-port-modules-drupal-7
Advanced Drush

• Drush 4

 • drush sql-cli

 • drush sql-connect
Advanced Drush

• References

 • http://chicago2011.drupal.org/sessions/
   advanced-drush
Workbench
    Managing Content Management


• Single-site

• Multi-site

• Organic Group

• Domain access
Workbench
     Managing Content Management
• Hierarchical permission inheritance by “Sections” not just content types

• Extensible workflow states

• Single repository for media management

• Modify live content without publishing changes immediately



• Workbench Modules

  • Workbench Access

  • Workbench File

  • Workbench Moderation
Faster Front End Performance

• YSlow

• Page Speed

• JSMin

• YUI Compressor

• Google Closure Compiler

• UglifyJS

• Throttling Proxy
Faster Front End Performance



• Smush it

• CSS sprite

• .htaccess to cache

• Web.config
Faster Front End Performance

• References

 • http://chicago2011.drupal.org/sessions/faster-front-
   end-performance

 • http://www.askapache.com/htaccess/speed-up-
   sites-with-htaccess-caching.html
Drupal 7 Theming Basics
• hide()

• render()
Drupal 7 Theming Basics

• Dealing with IE
Drupal 7 Theming Basics

• References

  • http://chicago2011.drupal.org/sessions/drupal-7-theming-basics

  • http://lb.cm/Zzo (Slide)

  • http://drupal.org/update/themes/6/7

  • http://drupal.org/project/devel_themer
Test, Tune, Tweak, Hack, Repeat:
 Industrial-strength Performance and
               Scalability
• Stack

 • FreeBSD 7        • Memcache

 • MySQL 5          • eAccelerator

 • Apache 2.0.x     • Akamai

 • PHP 5.2.x        • NetScaler

 • Pressflow 6.x
Test, Tune, Tweak, Hack, Repeat:
 Industrial-strength Performance and
               Scalability

• Dozen web servers

• 5 database server (1 master, 4 slave)

• 2 data centers

• N file server

• Sophisticated dev environment
Test, Tune, Tweak, Hack, Repeat:
 Industrial-strength Performance and
               Scalability

• The Cycle
Test, Tune, Tweak, Hack, Repeat:
Industrial-strength Performance and
              Scalability
Test, Tune, Tweak, Hack, Repeat:
 Industrial-strength Performance and
               Scalability
• References

 • http://chicago2011.drupal.org/sessions/test-
   tune-tweak-hack-repeat-industrial-strength-
   performance-and-scalability

 • http://css3pie.com/

More Related Content

DrupalCon 2011 Highlight

  • 1. DrupalCon 2011 Chicago, IL
  • 2. Keynote - Dries Buytaert
  • 3. Keynote - Dries Buytaert
  • 4. Keynote - Dries Buytaert • References • http://chicago2011.drupal.org/keynote- dries-buytaert
  • 5. Free and Open Source Tools for Integrating Web Accessibility into the Design Process • Web Accessibility Evaluation Tool • WebAIM Wave (http://wave.webaim.org/) • Run Fae (http://fae.cita.illinois.edu/) • Accessibility Evaluator for Firefox (https://addons.mozilla.org/en-US/firefox/addon/ accessibility-evaluation-toolb/) • Accessibility Inspector for Firebug (http://code.google.com/p/ainspector) • iCITA Web Accessibility Best Practices. (http://presentations.cita.illinois.edu/2011-03- drupalcon/2011-03-druplecon8.html) • Online Course on Designing Accessible Web Forms (http:// presentations.cita.illinois.edu/2011-03-drupalcon/2011-03-druplecon14.html)
  • 6. Free and Open Source Tools for Integrating Web Accessibility into the Design Process • References • http://presentations.cita.illinois.edu/2011-03-drupalcon/ • http://chicago2011.drupal.org/sessions/free-and-open-source-tools- integrating-web-accessibility-design-process
  • 7. Rockin’ HTML5 with Drupal Form <label for=”fovarite-cms”>Your Favorite CMS </label> <input id=”favorite-cms” name=”favorite-cms” type=”text” placeholder=”Drupal. What else?” / >
  • 8. Rockin’ HTML5 with Drupal <input type=”text”> <input type=”time”> <input type=”email”> <input type=”color”> <input type=”url”> <input type=”tel”> <input type=”date”> <input type=”week”>
  • 10. Rockin’ HTML5 with Drupal • HTML5 demo (http://formalize.me/ jquery_demo.html) • HTML5 Tools module (http://drupal.org/project/ html5_tools) • Html5 Base Theme (http://drupal.org/project/ html5_base)
  • 11. Rockin’ HTML5 with Drupal VIDEO AUDIO GAME <video> <audio> <canvas> Demo (http://9elements.com/io/projects/html5/ canvas/)
  • 12. Rockin’ HTML5 with Drupal WEB STORAGE Web SQL Demo (http://project.mahemoff.com/sql.html)
  • 13. Rockin’ HTML5 with Drupal WEB STORAGE IndexedDB Demo (http://hacks.mozilla.org/2010/06/ comparing-indexeddb-and-webdatabase/)
  • 14. Rockin’ HTML5 with Drupal • Geolocation • Drag & drop • Web socket • Bidirectional communication / messenger • Backward compatibility
  • 15. Rockin’ HTML5 with Drupal • References • http://jensimmons.com/presentations/rockin- html5-drupal/drupalcon-chicago • http://extras.jensimmons.com/ drupalconchicago2011/ drupalconchicago_html5drupal_jensimmons .pdf
  • 16. Webform 3 The Survey Tool for Drupal • Changes in Webform 3 • Conditional Fields • Save drafts and resume later • Enable any content type • Basic views module support • Edit own submission field • Form Builder Integration
  • 17. Webform 3 The Survey Tool for Drupal • New API • Module-provide components • Hooks for save, insert, update, delete • Multiform dynamic in webform3 • Integration • Pay module • Mollum
  • 18. Webform 3 The Survey Tool for Drupal • References • http://chicago2011.drupal.org/sessions/ webform-3-survey-tool-drupal
  • 19. Drupal on the go with jQuery Mobile • Support IOS and Android • Demo (http://tha.cm/jqm-demo) • Code (http://tha.cm/jqm-projects)
  • 20. Drupal on the go with jQuery Mobile • References • http://chicago2011.drupal.org/sessions/ drupal-go-jquery-mobile
  • 21. Developing Apps for iPhone/ iPad/Android using drupal as Base System • Frontend • Appcelerator (Thaitanium API to Build Native App). jQuery • Backend • Services module (with JSON,XMLRPC module)
  • 22. Developing Apps for iPhone/ iPad/Android using drupal as Base System • References • http://chicago2011.drupal.org/sessions/ developing-apps-iphone-ipad-android- using-drupal-base-system • http://developer.appcelerator.com/ get_started
  • 23. Failure to Launch Drupal Performance Tuning • Cache • Database caching • Opcode cache (APC) • Object cache (memcache) • Static file cache (boost module) • Reverse proxies (Varnish, Squid, NGINX) • Pressflow & Varnish • Pressflow - A performance optimized distribution of Drupal (eg. create a header for vanish, DB Slave, New Setting)
  • 24. Failure to Launch Drupal Performance Tuning • Other technique • Syslog faster than dblog • Use InnoDB engine • Testing • JMeter for load testing • Analytic • Piwik • Google Analytic
  • 25. Failure to Launch Drupal Performance Tuning • References • http://chicago2011.drupal.org/sessions/failure- launch-drupal-performance-tuning • http://devbee.com/opcode_cache_for_dummies • https://wiki.fourkitchens.com/display/PF/ Comparison+-+Pressflow+versus+Drupal • http://groups.drupal.org/node/50408
  • 26. Coder Module Easily Port Modules to Drupal 7 • Coder Review • Drupal Coding Standard • Security Review • Performance Review • Coder Upgrade • Sourcecode • Patch • Drush command • drush coder-review
  • 27. Coder Module Easily Port Modules to Drupal 7 • References • http://upgrade.boombatower.com/ • http://drupal.org/node/224333 (Checklist) • http://chicago2011.drupal.org/sessions/ coder-module-easily-port-modules-drupal-7
  • 28. Advanced Drush • Drush 4 • drush sql-cli • drush sql-connect
  • 29. Advanced Drush • References • http://chicago2011.drupal.org/sessions/ advanced-drush
  • 30. Workbench Managing Content Management • Single-site • Multi-site • Organic Group • Domain access
  • 31. Workbench Managing Content Management • Hierarchical permission inheritance by “Sections” not just content types • Extensible workflow states • Single repository for media management • Modify live content without publishing changes immediately • Workbench Modules • Workbench Access • Workbench File • Workbench Moderation
  • 32. Faster Front End Performance • YSlow • Page Speed • JSMin • YUI Compressor • Google Closure Compiler • UglifyJS • Throttling Proxy
  • 33. Faster Front End Performance • Smush it • CSS sprite • .htaccess to cache • Web.config
  • 34. Faster Front End Performance • References • http://chicago2011.drupal.org/sessions/faster-front- end-performance • http://www.askapache.com/htaccess/speed-up- sites-with-htaccess-caching.html
  • 35. Drupal 7 Theming Basics • hide() • render()
  • 36. Drupal 7 Theming Basics • Dealing with IE
  • 37. Drupal 7 Theming Basics • References • http://chicago2011.drupal.org/sessions/drupal-7-theming-basics • http://lb.cm/Zzo (Slide) • http://drupal.org/update/themes/6/7 • http://drupal.org/project/devel_themer
  • 38. Test, Tune, Tweak, Hack, Repeat: Industrial-strength Performance and Scalability • Stack • FreeBSD 7 • Memcache • MySQL 5 • eAccelerator • Apache 2.0.x • Akamai • PHP 5.2.x • NetScaler • Pressflow 6.x
  • 39. Test, Tune, Tweak, Hack, Repeat: Industrial-strength Performance and Scalability • Dozen web servers • 5 database server (1 master, 4 slave) • 2 data centers • N file server • Sophisticated dev environment
  • 40. Test, Tune, Tweak, Hack, Repeat: Industrial-strength Performance and Scalability • The Cycle
  • 41. Test, Tune, Tweak, Hack, Repeat: Industrial-strength Performance and Scalability
  • 42. Test, Tune, Tweak, Hack, Repeat: Industrial-strength Performance and Scalability • References • http://chicago2011.drupal.org/sessions/test- tune-tweak-hack-repeat-industrial-strength- performance-and-scalability • http://css3pie.com/

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. Turn off style sheet and read\n Toolbar extension firefox from wave\n
  6. Turn off style sheet and read\n Toolbar extension firefox from wave\n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. no more key value pair\nWEBSQL http://openbit.co.uk/?p=135\nIndexedDB is the alternative advocated by Mozilla, but it will only come in Firefox 4. Microsoft is interested and Chrome will support it as well. I know nothing of Apple&apos;s plans regarding IndexedDB.\n\n
  13. no more key value pair\nWEBSQL http://openbit.co.uk/?p=135\nIndexedDB is the alternative advocated by Mozilla, but it will only come in Firefox 4. Microsoft is interested and Chrome will support it as well. I know nothing of Apple&apos;s plans regarding IndexedDB.\n\n
  14. \n
  15. \n
  16. Basic views module (only based node content work in progress)\n Conditional Fields (Multiple page show \n
  17. Module-provide components\n Plugable field (drag and drop)\n Mollum (comment spam protection and CAPTCHA service)\n \n
  18. Plugable field (drag and drop)\n
  19. \n
  20. \n
  21. Thaitanium APi Javascript\n Camera API, Geolocation API\n
  22. Thaitanium APi Javascript\n
  23. Database Cachingpage cache, block cache, menu cacheAPC (Alternative PHP Cache)memcache (move cache to database cache)Vanish store web page in memoryPressflow only before D7\n
  24. \n
  25. \n
  26. Require php 5.3\n
  27. \n
  28. \n
  29. \n
  30. Domain access - centralize administration\n\nexample.com\none.example.com\ntwo.example.com\nmy.example.com\n
  31. Non-linear workflow\n\nWorkbench Access\nWorkbench Access provide the hierarchical permissions across &quot;Sections&quot; of your web site. You can use menus, taxonomy, or create your own hierarchical structure for controlling access to a piece of content.\nWorkbench Moderation\nTo provide editorial workflow, you want to install Workbench Moderation. It is a flexible system which provides default workflow states like Drafts, Needs Review, and Published. You can also change these states to suit your orgnizations needs.\nWorkbench Files\nInitially, Workbench Files provides an easy way to see what files have been uploaded and where they are used on the site. We have features we want to add to help this module become a way to manage all assets.\nWorkbench Media\nThe Media module has been integrated with Workbench too. The goal was to include a workflow for creating media just like you would any other content.\n
  32. JSMin The JavaScript Minifier\nYUI JavaScript minifier and CSS\nGoogle Closure Compiler It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what&apos;s left.\n UglifyJS JS Compress\n Bandwidth Throttle/Proxy to simulate dial-up\n\n
  33. \nYahoo Smush.it uses optimization techniques specific to image format\n .htaccess to cache\n
  34. \n
  35. \n
  36. \n
  37. \n
  38. eAccelerator opcode cache\nWeb Application Accelerator\nnetscaler load balancing\n\n
  39. \n
  40. \n
  41. \n
  42. \n