1.
Advanced Web Development Software Strategies for Online Applications Rob Stein, Charlie Moad, Ed Bachta The Indianapolis Museum of Art

2.
Purpose of Today’s Workshop <ul><li>You will leave today with tools and techniques for building their own online applications . </li></ul><ul><li>You will understand the overarching concepts and strategies behind building dynamic online applications and some shortcuts to accelerate your development </li></ul>

3.
Outline <ul><li>Web App or Web Page </li></ul><ul><li>Trends in Web Software Development </li></ul><ul><li>BYO API’s </li></ul><ul><li>Bite-sized Web Components </li></ul><ul><li>Collaborative Development </li></ul><ul><li>Drupal Bootcamp </li></ul><ul><li>More… </li></ul>

4.
Web Page or Web Application… What’s the Difference?

5.
Web Pages are Built by Producers <ul><li>They convey a set amount of information </li></ul><ul><li>The creator decides what the information is </li></ul><ul><li>Generally the user consumes the content once </li></ul>

6.
Web Apps are Driven by the User <ul><li>Information presented is dynamic and unknown before hand </li></ul><ul><li>The user decides the information they want to see </li></ul><ul><li>Web applications can be used many times by the same user. </li></ul>

7.
Web Page

8.
Web Application

9.
Web Page

10.
Web Application

11.
The More Things Change The More They Stay the Same…

25.
Attributes of a Web Application <ul><li>CORE COMPETENCIES OF WEB 2.0 COMPANIES: </li></ul><ul><li>Services, not packaged software, with cost-effective scalability </li></ul><ul><li>Control over unique, hard-to-recreate data sources that get richer as more people use them </li></ul><ul><li>Trusting users as co-developers </li></ul><ul><li>Harnessing collective intelligence </li></ul><ul><li>Leveraging the long tail through customer self-service </li></ul><ul><li>Software above the level of a single device </li></ul><ul><li>Lightweight user interfaces, development models, AND business models </li></ul>Tim O’Reilly – What is Web2.0

26.
So what are the keys to building great web applications?

27.
We’re in Luck! <ul><li>People have been building robust applications for over 30 years </li></ul><ul><li>They’ve figured out many smart strategies for building applications that are easy to grow and maintain. </li></ul><ul><li>We’ll be sharing those strategies and techniques with you today and applying them to building great web applications. </li></ul>

28.
Differences from Last Year <ul><li>Last year we spent a lot of time talking about the foundations of creating solid software applications… </li></ul><ul><li>This is still important when you are looking to provide access to your own controlled information to a larger audience </li></ul><ul><li>However… </li></ul>

29.
Differences from Last Year <ul><li>Since last year’s talk software services and API’s / SDK’s of web software has really taken hold in a serious way. </li></ul><ul><li>Building True Museum Applications from SAS Components is not so crazy anymore </li></ul><ul><ul><ul><li>Last year it would have seemed foolish to suggest that Flickr could be used as the basis for a digital asset management system… this year… not so much (Flickr-LOC, machine tags, geotag support and integration) </li></ul></ul></ul><ul><ul><ul><li>How crazy is it to think that we could combine Google Gears, Spreadsheets, Form Creator and Sites to create a simple collection management system? </li></ul></ul></ul>

30.
WebDev 2008 <ul><li>Today, web developers are more like a systems integrator than a hardware manufacturer. </li></ul>

31.
WebDev 2008 <ul><li>The craft of web development is now how you choose to use components to communicate about your content. </li></ul>

32.
WebDev 2008 <ul><li>Skills required are now more about knowing what’s out there and how to structure relationships between components and do the integration pieces needed to bring engaging content to users… </li></ul>

33.
X

36.
That Being Said… <ul><li>There are still many reasons why you should consider building your own API’s and application infrastructure. </li></ul>

37.
Reasons to build your own API’s <ul><li>If you have unique information that others are unlikely to support adequately </li></ul><ul><li>If you care about security of your data </li></ul><ul><li>If you wish to control the distribution of your information </li></ul><ul><li>If a guarantee of service is important </li></ul>

38.
Where’s the API for my data? <ul><li>Strategies for rapidly building an API </li></ul><ul><ul><li>Model-driven development </li></ul></ul><ul><ul><li>Last year == XMLSchema (still valid) </li></ul></ul><ul><ul><li>This year == database as your model </li></ul></ul><ul><ul><ul><li>You most likely already have this model </li></ul></ul></ul>

39.
Object Relational Mappers <ul><li>Object oriented access to a database </li></ul><ul><li>No SQL needed </li></ul><ul><li>Data model changes picked up automatically </li></ul><ul><li>Mostly database agnostic </li></ul>

40.
Object Relational Mappers <ul><li>ORMs have come a long way </li></ul><ul><ul><li>They understand you might want to execute queries directly </li></ul></ul><ul><ul><li>Allow custom method additions to objects </li></ul></ul>http://wiki.rubyonrails.org/rails/pages/ActiveRecord http://www.hibernate.org/ http://www.sqlalchemy.org/ http://propel.phpdb.org/trac/

41.
steve.museum <ul><li>Model Driven Development </li></ul><ul><ul><li>Class generation from database tables </li></ul></ul><ul><ul><li>Model changes are picked up automatically </li></ul></ul>**Auto-generated Code** Do Not Edit! /** * Entity representing the table: term * @package steve.core.data_objects * * @author tech-dudes <steve.tech@steve.museum> * @version 0.001alpha */ class Term extends Entity { function getTableName() { return &quot;steve_term&quot;;} function getKey() { return &quot;term_id&quot;;} var $termId; function getTermId() { return $this->termId; } function setTermId($term_id) { $this->termId = $term_id;} var $sessionId; function getSessionId() { return $this->sessionId; } function setSessionId($session_id) { $this->sessionId = $session_id;} … PHP

42.
steve.museum <ul><li>Formalized API </li></ul><ul><ul><li>Directs remote access </li></ul></ul><ul><ul><li>Explicit security </li></ul></ul>/** * @package steve.core.api * @author tech-dudes <steve.tech@steve.museum> * @version 0.001alpha */ interface iTermDAO { /** * Create a new term object * @param string $token the auth token * @param int $mimeId the image id to associate the term with * @param string $termText the text for the term * @return Term result * @throws termException * @secure authToken $token */ function createTerm($token, $mimeId, $termText); /** * Save an existing term into the database * @param string $token the auth token * @param Term $term the term to be saved * @throws termException * @secure authToken $token */ function saveTerm($token, $term); ...

43.
steve.museum <ul><li>Bringing it all together </li></ul><ul><ul><li>Implement interfaces </li></ul></ul><ul><ul><li>Code access to types </li></ul></ul>class TermDAO extends ADOHelper implements iTermDAO { /** * Create a new term object * @param string $token the auth token * @param int $mimeId the image id to associate the term with * @param string $termText the text for the term * @return Term result * @throws termException * @secure authToken $token */ function createTerm($token, $mimeId, $termText) { $termObject = new Term(); $termObject->setTerm($termText); $this->create($termObject); // makes new DB row return $termObject; } /** * Save an existing term into the database * @param string $token the auth token * @param Term $term the term to be saved * @throws termException * @secure authUserCheckId $token */ function saveTerm($token, $term) { $this->save($term); // issues a DB update return ; } ...

44.
Introducing Mercury <ul><li>Adaptive layer for the IMA Collection </li></ul>Collections Management Digital Asset Management User Generated Content Mercury www.imamuseum.org Exhibition Micro-sites In-Gallery Applications

45.
PHP Adapter Layer

46.
Adding a custom method Using the custom method

47.
<ul><li>Rich Client Platform </li></ul><ul><ul><li>Not (just) an IDE </li></ul></ul><ul><li>Support for virtually every programming language you will need </li></ul><ul><li>Cross platform </li></ul><ul><li>http://www.eclipse.org/ </li></ul>No! It’s not just for Java.

48.
Demo

49.
Search <ul><li>Users expect good search functionality </li></ul><ul><li>Full-text indexes to the rescue </li></ul><ul><ul><li>Index of terms that map to documents </li></ul></ul><ul><li>Many databases include FT support now </li></ul><ul><li>What if these don’t meet our needs… </li></ul><ul><ul><li>… then meet Lucene </li></ul></ul>http://gears.google.com/ http://lucene.apache.org/ http://drupal.org/

50.
<ul><li>Fast -- Low memory usage </li></ul><ul><li>Extensible </li></ul><ul><li>Tools built on Lucene </li></ul><ul><ul><li>Nutch - web crawler </li></ul></ul><ul><ul><li>Solr - they did the REST for you </li></ul></ul><ul><li>ranked searching -- best results returned first </li></ul><ul><li>many powerful query types: phrase queries, wildcard queries, proximity queries, range queries </li></ul><ul><li>fielded searching (e.g., title, author, contents) </li></ul><ul><li>date-range searching </li></ul><ul><li>sorting by any field </li></ul><ul><li>multiple-index searching with merged results </li></ul><ul><li>allows simultaneous update and searching </li></ul>

51.
Bite Sized Web Components <ul><li>Small, specialized software building blocks allow you to leverage someone else’s work w/o costly dev or debugging. </li></ul><ul><li>They key is staying abreast of what’s out there and ways of integrating these systems together… </li></ul>

52.
WebApp Toolbox

53.
Storage <ul><li>Amazon S3 http://aws.amazon.com/s3 </li></ul><ul><ul><li>$0.15 per GB/month storage </li></ul></ul><ul><ul><li>$0.10 per GB transfer IN </li></ul></ul><ul><ul><li>$0.18 per GB transfer OUT </li></ul></ul><ul><li>Nirvanix http://www.nirvanix.com </li></ul><ul><ul><li>$0.18 per GB/month storage </li></ul></ul><ul><ul><li>$0.18 per GB/month transfer IN/OUT </li></ul></ul><ul><li>XDrive http://www.xdrive.com </li></ul><ul><ul><li>$9.95 / month for 50GB (no transfer?) </li></ul></ul><ul><li>Box.net http://enabled.box.net </li></ul><ul><ul><li>$19.95 / month for 15GB (no transfer?) </li></ul></ul>

54.
Video <ul><li>YouTube ( http://code.google.com/apis/youtube/overview.html ) </li></ul><ul><ul><li>Search Videos, Control ratings, comments, Upload videos, control and customize Flash player </li></ul></ul><ul><ul><li>Interface via the Google Data protocols (HTTP and XML), Java and PHP </li></ul></ul><ul><li>Revver ( http://developer.revver.com/ ) </li></ul><ul><li>blip.tv ( http://blip.tv/about/api/ ) </li></ul>

55.
Images <ul><li>Flickr http:// www.flickr.com/services/api / </li></ul><ul><ul><li>Uploads, Tag, Search, Browse photos and users / groups, Machine Tags provide the ability to extend metadata arbitrarily. </li></ul></ul><ul><ul><li>Support for REST, XML_RPC, SOAP, serialized PHP, and JSON </li></ul></ul><ul><li>Picassa http:// code.google.com/apis/picasaweb/overview.html </li></ul><ul><ul><li>Also Uses the GData API’s like YouTube </li></ul></ul><ul><ul><li>Supports population and retrieval of several different types of metadata, creation of groups / albums, etc… </li></ul></ul>

56.
Compute <ul><li>Linux based Virtual Machines </li></ul><ul><ul><li>Defaults include fedora core +/- apache +/- mysql </li></ul></ul><ul><ul><li>Custom configuration of instances are supported </li></ul></ul><ul><ul><li>Instances are persistent, but billable based on use </li></ul></ul><ul><li>Amazon Elastic Compute Cloud </li></ul><ul><ul><li>http://aws.amazon.com/EC2 </li></ul></ul><ul><ul><li>$0.10 - $0.80 per instance/hour </li></ul></ul><ul><ul><li>$0.10 Trans IN, $0.80 Trans OUT </li></ul></ul><ul><li>3Tera APPLogic </li></ul><ul><ul><li>2-1024 CPU’s </li></ul></ul><ul><ul><li>2-2048 GB RAM </li></ul></ul><ul><ul><li>0.75 – 512 TB Disk </li></ul></ul>

57.
Web Hosting Setup <ul><li>Single Server Instance per Month </li></ul><ul><ul><li>$16.80 (small), $64.00 (large), $134.40 (xlarge) </li></ul></ul><ul><ul><li>$100 1TB per Month Transfer IN </li></ul></ul><ul><ul><li>$180 1TB per Month Transfer OUT </li></ul></ul><ul><li>Total Cost = $296 - $414 </li></ul><ul><li>Yearly Cost = $3500 - $5000 </li></ul><ul><ul><li>Server plus all power and bandwidth </li></ul></ul><ul><ul><li>High availability </li></ul></ul>

58.
Amazon Web Services <ul><li>Great Example: Monster Muck Mashup - Mass Video Conversion Using AWS </li></ul><ul><ul><li>Convert 500 videos to MPEG4 for iPod </li></ul></ul><ul><ul><li>Uses Amazon’s EC2, S3, and Simple Queue Web Service’s </li></ul></ul><ul><ul><li>Compute Time: 20min </li></ul></ul><ul><ul><li>Cost: $1.78 </li></ul></ul>

59.
Authentication Services <ul><li>OpenId – http://www.openid.net </li></ul><ul><ul><li>Currently supported by AOL, LiveJournal, WordPress, Ma.gnolia, Basecamp and Yahoo! </li></ul></ul><ul><ul><li>Allows you to uniquely identify yourself to service providers. </li></ul></ul><ul><li>OAuth – http://www.oauth.net </li></ul><ul><ul><li>Library support for all major programming languages </li></ul></ul><ul><ul><li>Enables you to grant access to your data to a third party. (i.e. giving a slideshow mashup permission to access your Flickr photos w/o giving that site your login information on flickr) </li></ul></ul>

60.
Social Computing <ul><li>Undoubtedly a force to consider when creating your web apps. </li></ul><ul><li>Future development scenarios are a bit uncertain. </li></ul><ul><li>Facebook /OpenSocial </li></ul><ul><ul><li>Winner is currently unknown </li></ul></ul><ul><ul><li>Best bet today… stick with the eyeballs and be ready to change. </li></ul></ul>

61.
Facebook API <ul><li>http://developers.facebook.com </li></ul><ul><li>3 components </li></ul><ul><ul><li>Interface API </li></ul></ul><ul><ul><li>Query Language (FQL) </li></ul></ul><ul><ul><li>FBML (Facebook Markup Language) </li></ul></ul>

62.
Interface API <ul><li>Interface API </li></ul><ul><ul><li>REST based API covering ways to manage / retrieve information about friends / users / applications / profiles and messaging </li></ul></ul><ul><ul><li>Yech! This is a whole lot of bother for a list of friends… </li></ul></ul>friends.get(api_key, session_key, call_id, secret_key_md5, version, [format], [callback], [flid]);

63.
Interface API <ul><li>Fortunately the Developer’s Platform comes with helper libraries that encapsulate the current facebook API </li></ul><ul><li>Much Simpler! </li></ul>friends.get([format], [callback], [flid]);

64.
friends.get() Response <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <friends_get_response xmlns= http://api.facebook.com/1.0/ xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot; xsi:schemaLocation=&quot;http://api.facebook.com/1.0/ http://api.facebook.com/1.0/facebook.xsd&quot; list=&quot;true&quot;> <uid>222333</uid> <uid>1240079</uid> </friends_get_response> [222333,1240079] XML JSON

65.
Query Language <ul><li>Query Language (FQL) </li></ul><ul><ul><li>SQL-like query language that provides an alternate way to query the system. </li></ul></ul><ul><ul><li>API methods cover 90% of what you need here by there are 10% of things that I don’t think you can do w/o making use of the Query language </li></ul></ul><ul><ul><li>FQL has some advantages </li></ul></ul><ul><ul><ul><li>Reduces the cost of parsing API’s more complicated XML structures </li></ul></ul></ul><ul><ul><ul><li>Potentially reduces the number of calls to the API (i.e. joins) </li></ul></ul></ul>SELECT uid2 FROM friend WHERE uid1=loggedInUid friends.get() in FQL

66.
FBML (Facebook Markup Lang) <ul><li>An Evolved Set of HTML Tags plus Facebook specific features </li></ul><ul><ul><li>All facebook content is passed through an FBML interpreter </li></ul></ul><ul><ul><li>Adds Security Controls and expanded interface features. </li></ul></ul><ul><ul><li>USE THIS WHENEVER POSSIBLE </li></ul></ul><ul><ul><li>It’s a great set of shortcuts and is maintained by someone else! </li></ul></ul>

67.
FBML Examples <fb:pronoun uid=123 useyou=‘true’ possessive=‘false’ reflexive=‘false’ objective=‘false’ usethey=‘true’capitalize=‘false’> Rob updated his profile. -possessive Charlie poked himself -reflexive You added Pat as a friend -useyou, usethey, capitalize and wrote on their wall <fb:friend-selector uid=&quot;123445&quot; name=&quot;uid&quot; idname=&quot;friend_sel&quot; />

68.
FBML Examples <fb:board xid=&quot;titans_board&quot; canpost=&quot;true&quot; candelete=&quot;false&quot; canmark=&quot;false&quot; cancreatetopic=&quot;true&quot; numtopics=&quot;5&quot; returnurl=&quot;http://apps.facebook.com/myapp/titans/&quot;> <fb:title>Discuss the Titans</fb:title> </fb:board>

69.
Facebook Application Model FB Data Store API Application Host

70.
Widget Frameworks <ul><li>Google Gadgets API </li></ul><ul><ul><li>http://code.google.com/apis/gadgets/docs/overview.html </li></ul></ul><ul><ul><li>Support for Widget Integration with OpenSocial, Google Maps, Finance, Ads and Calendar </li></ul></ul><ul><ul><li>Run widgets in iGoogle or on Any Webpage </li></ul></ul>

71.
Widget Frameworks <ul><li>Netvibes UWA </li></ul><ul><ul><li>Run widgets across many platforms including </li></ul></ul><ul><ul><ul><li>Netvibes, Mac Dashboard, iPhone, iGoogle, Opera, Vista, Windows Live and Yahoo! Widgets </li></ul></ul></ul><ul><ul><ul><li>XHTML for content and structure + css for style + javascript for interaction </li></ul></ul></ul>

72.
Is AIR a Widget Killer? <ul><li>Adobe AIR </li></ul><ul><ul><li>Flash-based runtime for Desktop applications </li></ul></ul><ul><ul><li>Web-based deployment across platforms </li></ul></ul><ul><ul><li>Can run as background proc’s </li></ul></ul><ul><ul><li>Can access desktop files, clipboard, drag n’ drop </li></ul></ul><ul><ul><li>Awesome graphics, styling and effects </li></ul></ul><ul><li>95% Market Penetration for Flash 9 (Dec 2007) </li></ul>

73.
Content Management – Back to Legos <ul><li>The CMS is the container for all these components. </li></ul><ul><li>A good CMS will allow you to quickly integrate these into a new site with a minimum of effort </li></ul><ul><li>CMS’s also enable easier internationalization </li></ul><ul><li>Some good CMS’s to start with </li></ul><ul><ul><li>Joomla, Wordpress, Drupal, Plone </li></ul></ul>

74.
A CMS Tour <ul><li>Joomla </li></ul><ul><ul><li>steve (www.steve.museum) </li></ul></ul><ul><ul><li>IMA Digital (ima-digital.org) </li></ul></ul><ul><li>WordPress </li></ul><ul><ul><li>The IMA Blog (imamuseum.org/blog) </li></ul></ul><ul><ul><li>walkerart.org </li></ul></ul><ul><li>Drupal </li></ul><ul><ul><li>The IMA Dashboard (dashboard.imamuseum.org) </li></ul></ul><ul><ul><li>The IMA Website (imamuseum.org) </li></ul></ul><ul><ul><li>breaking the mode, nhmc </li></ul></ul><ul><li>Show me the money! </li></ul><ul><ul><li>The Romans Are Coming : Estimated cost $Y </li></ul></ul><ul><ul><li>Breaking the Mode : Estimated cost $X </li></ul></ul>

75.
Team Troubles $total = 0; $entrance_data = array (); for ($i = 0; $i < $entRawRS->RecordCount(); $i++) { $entRawRS->Move($i); $entAdjRS->Move($i); $cnt = getDayCount($entRawRS->fields[ 'dateData' ], $entRawRS->fields[ 'raw' ], $entAdjRS->fields[ 'adj' ], 300); $entrance_data[] = $cnt; $total += $cnt; } $chart->addRow( 'Entrances' , $entrance_data); div#header h1#site-name { background-image: url(../gfx/ima_logo.gif); background-repeat: no-repeat; display: block; height: 67px; width: 174px; float: left; top: 46px; position: absolute; left: 18px; z-index: 0; } <div class=&quot;copyleft&quot;> <h3>Available Tours</h3> </div> <div class=&quot;copyright&quot;> <div id=&quot;anchors&quot;> <ul> <li>Spotlight a Collection </li> <li>Special Exhibition </li> <li>Lilly House Gardens of the IMA </li> </ul> </div> “ SELECT t.nid as task_nid FROM athena_project_task pt &quot; . &quot;INNER JOIN athena_task t ON t.nid = pt.task_nid &quot; . &quot;INNER JOIN node n ON n.nid = t.nid &quot; . &quot;WHERE pt.project_nid = %d AND t.state = %d &quot; . &quot;ORDER BY n.changed DESC, n.title&quot; var i = 0; var found_date = false; $('select').each(function(){ i ++; var words = this.id.split('-'); var last_word = words.pop(); switch(last_word) { case 'year' : $(this).addClass('split-date'); $($(this).parent()[0]).addClass('cal-form-item'); this.id = words.join('-'); found_date = true; break;

76.
Divide and Conquer <ul><li>Allow your team members to focus on their area of expertise </li></ul><ul><li>Minimize potential conflicts when editing files </li></ul><ul><li>Make it easier to swap out content or themes </li></ul>div#header h1#site-name { background-image: url(/gfx/ima_logo.gif); background-repeat: no-repeat; “ SELECT t.nid as task_nid FROM athena_project_task pt &quot; . &quot;INNER JOIN …

77.
MVC – An architectural basis <ul><li>View (user interface) </li></ul><ul><li>Renders content </li></ul><ul><li>Requests content updates </li></ul><ul><li>Sends user input to controller </li></ul><ul><li>Model (data management) </li></ul><ul><li>Manages persistent data </li></ul><ul><li>Responds to data queries </li></ul><ul><li>Notifies views of changes </li></ul><ul><li>Controller (interaction logic) </li></ul><ul><li>Defines behavior </li></ul><ul><li>Selects views </li></ul><ul><li>Updates the model based on user action </li></ul>user actions view selection model updates data requests change notification

78.
MVC – Applied to the web <ul><li>View (user interface) </li></ul><ul><li>Page components (HTML, XML) </li></ul><ul><li>Page style & layout (CSS, XSLT) </li></ul><ul><li>Effects (Javascript) </li></ul><ul><li>Model (content management) </li></ul><ul><li>Databases (MySQL) </li></ul><ul><li>Back-end logic (PHP) </li></ul><ul><li>Controller (interaction logic) </li></ul><ul><li>State & API handling (PHP, Javascript) </li></ul>user actions, navigation page & theme selection content updates and requests content requests (AJAX) Web Designer Web Programmer Web Programmer Content Creators Content

79.
How do we make use of MVC? <ul><li>We use content management systems </li></ul><ul><ul><li>Let it take care of the heavy lifting (model code) </li></ul></ul><ul><ul><li>Content creators will be happy </li></ul></ul><ul><li>We use templates </li></ul><ul><ul><li>Templates provide a boundary between controller and view </li></ul></ul><ul><ul><li>Think of templates as an interface, and design accordingly </li></ul></ul><ul><ul><li>Web Designers will be happy </li></ul></ul><ul><li>We have a process: Design, implement, evaluate, iterate </li></ul><ul><ul><li>First, plan out what you want to achieve in phase one </li></ul></ul><ul><ul><li>Divide the work based on skill sets </li></ul></ul><ul><ul><li>Implement and test as you go </li></ul></ul><ul><ul><li>Come together again as a team and evaluate your progress </li></ul></ul><ul><ul><li>Plan your next phase… </li></ul></ul>

80.
Subversion (SVN) <ul><li>An improvement on the concurrent versions system (CVS) </li></ul><ul><li>Allows multiple developers to work simultaneously without overwriting each other’s code </li></ul><ul><li>Basic operations: </li></ul><ul><ul><li>checkout </li></ul></ul><ul><ul><li>add & remove </li></ul></ul><ul><ul><li>update </li></ul></ul><ul><ul><li>commit </li></ul></ul><ul><li>Code developed or updated on a beta installation can </li></ul><ul><li>be quickly reflected in a deployment </li></ul><ul><li>It works for designers too! </li></ul><ul><li>Clients: Eclipse plugin, Tortoise SVN </li></ul>

81.
Bringing in non-technical members <ul><li>In the planning phase: </li></ul><ul><ul><li>Non-techies have great ideas too </li></ul></ul><ul><ul><li>They can also provide great insight for interface design </li></ul></ul><ul><li>In the evaluation phase: </li></ul><ul><ul><li>They will do things you hadn’t thought of </li></ul></ul><ul><ul><li>And they won’t be afraid to let you know… </li></ul></ul>Hey Ed, What if you leave a project you really wish you would have deleted? Is there any way to return to abandoned projects and delete them for the sake of tidying up? Or is it easier to create an automated process to delete projects with no files and active members? It would be interesting to put in a kind of drop down list by department where we could then just check off members, rather than typing them in. I don't know if this is possible, but for all that I know it's all magic and anything is possible.

82.
Drupal Boot Camp Drop and give me 20!

83.
Let’s get started… <ul><li>Make sure you have the required components </li></ul><ul><ul><li>Apache or IIS web server </li></ul></ul><ul><ul><li>PHP </li></ul></ul><ul><ul><li>MySQL </li></ul></ul><ul><li>Download Drupal from http://drupal.org </li></ul><ul><ul><li>We’re using 5.7 to demonstrate the CCK and Views modules </li></ul></ul><ul><li>Unzip/extract Drupal to disk </li></ul><ul><li>Configure your web server to serve the directory </li></ul>

84.
Set up the database

85.
That was quick!

86.
<ul><li>Create some content </li></ul><ul><li>Pick a new theme </li></ul><ul><li>Install some modules </li></ul><ul><li>Craft a custom content type </li></ul><ul><li>Organize content with views </li></ul><ul><li>Peek at user permissions </li></ul><ul><li>Look at where to put custom code </li></ul>Listen up! Here’s the game plan…

87.
Create some content

88.
Choose a new theme

89.
Content type creation with CCK <ul><li>CCK is the Content Construction Kit </li></ul><ul><li>Download CCK from http://drupal.org/project/cck </li></ul><ul><li>Extract the contents to sites/all/modules/cck </li></ul>

90.
Create a new Content Type

91.
Add a custom field

92.
Configure the field widget

93.
Create your content

94.
Take a peek at the result

95.
Organizing content with Views <ul><li>Download the Views module from http://drupal.org/project/views </li></ul><ul><li>Extract to sites/all/modules/views </li></ul><ul><li>Enable Views in Site Building </li></ul>

96.
Add a view

97.
Configure the view

98.
A quick look at menu items

99.
Add a link to the new view Change your front page in site information

100.
Behold, the new front page…

101.
and the Works of Art page

102.
For the ambitious <ul><li>Custom code should be added at sites/default </li></ul><ul><ul><li>Create a modules directory to contain custom modules </li></ul></ul><ul><ul><li>Create a themes directory to contain custom themes </li></ul></ul><ul><li>Eclipse users: </li></ul><ul><ul><li>Create a project at sites/default </li></ul></ul><ul><li>For team development: </li></ul><ul><ul><li>Create an SVN repository from sites/default </li></ul></ul><ul><ul><li>Install and configure each development site </li></ul></ul><ul><ul><li>Perform a check out from the project repository </li></ul></ul><ul><ul><li>on each workstation </li></ul></ul><ul><li>Note: Drupal 6.x has new theme customization features </li></ul>

103.
Recommended modules <ul><li>CCK & Views, as shown in previous slides (not yet available for Drupal 6.x) </li></ul><ul><li>ldapauth – Authenticate against existing LDAP systems </li></ul><ul><li>Image – Upload, resize, and render images </li></ul><ul><li>Image Cache – Easily define derivative image sizes </li></ul><ul><li>Devel – Extra tools for developers </li></ul><ul><li>jQuery Update – Utility to update Drupal’s jQuery library </li></ul><ul><li>reCAPTCHA – Allow visitors to add content without requiring a login </li></ul>

104.
Client Side Development The Customer is Always Right

105.
Client Interfaces <ul><li>The web is now a platform for hosting all kinds of online applications </li></ul><ul><li>So what are the basics of this application platform? </li></ul><ul><li>Let’s talk about the DOM… </li></ul>

106.
What about the DOM? <ul><li>What’s a DOM? </li></ul><ul><ul><li>Document Object Model </li></ul></ul><ul><ul><li>This is a platform and language neutral model of a web page </li></ul></ul><ul><ul><li>The DOM model applies to HTML and XML documents </li></ul></ul><ul><li>What’s in a DOM? </li></ul>

107.
Javascript <ul><li>Scripting language that web browsers can execute when user loads a page. </li></ul><ul><li>For adding interactivity to web pages both Javascript and Actionscript are used frequently. </li></ul><ul><ul><li>Mostly by modifying and manipulating the DOM </li></ul></ul><ul><li>They both also support OO techniques and models </li></ul><ul><li>Slick Effects and Interactive Features are a hallmark of what people think of web 2.0 </li></ul><ul><ul><li>Most of these effects can be accomplished using Javascript </li></ul></ul>

108.
Javascript Toolkits <ul><li>Making Javascript a little more OO </li></ul><ul><li>Why you need one… </li></ul><ul><ul><li>Avoid (some of) the cross browser problems </li></ul></ul><ul><ul><li>Rapid development </li></ul></ul>

109.
Javascript Toolkits <ul><li>A variety of toolkits have become available that make manipulating the DOM in Javascript easy </li></ul><ul><ul><li>Prototype: ( http:// www.prototypejs.org / ) </li></ul></ul><ul><ul><ul><li>Scriptaculous: ( http:// script.aculo.us / ) </li></ul></ul></ul><ul><ul><ul><li>Lightbox: ( http://www.huddletogether.com/projects/lightbox/ ) </li></ul></ul></ul><ul><ul><ul><ul><li>Greybox, Thickbox </li></ul></ul></ul></ul><ul><ul><li>jQuery (http:// jquery.com ) </li></ul></ul><ul><ul><li>Moo.tools (http:// mootools.net /) </li></ul></ul><ul><ul><ul><li>Moo.fx ( http://moofx.mad4milk.net/ ) </li></ul></ul></ul><ul><li>Yahoo User Interface Library </li></ul><ul><ul><li>http://developer.yahoo.com/yui/ </li></ul></ul><ul><li>Google Web Toolkit: </li></ul><ul><ul><li>http:// code.google.com/webtoolkit / </li></ul></ul>

110.
jQuery Example

111.
Interface Components <ul><li>Just like server side web components developers can also leverage reusable components for graphics design and layout. </li></ul>

112.
Back to the Toolbox <ul><li>Thickbox - http://jquery.com/demo/thickbox/ </li></ul>

113.
Back to the Toolbox <ul><li>reCAPTCHA - http://recaptcha.net/ </li></ul>

114.
Back to the Toolbox <ul><li>Image Carousels </li></ul>ImageFlow 0.9 http://www.prototype-ui.com

115.
Back to the Toolbox <ul><li>Rating Modules </li></ul>

116.
In Support of CSS Boilerplates <ul><li>Cross browser tweaking of CSS layouts can take a lot of effort. </li></ul><ul><li>Why not treat CSS layout like another software component of web design. </li></ul><ul><li>Where are the reusable components? </li></ul>

117.
http://www.intensivstation.ch http://www.thenoodleincident.com/

118.
Standardize Your CSS Usage <ul><li>Structured naming of <div> tags or <class>’s enables drop in use of server side content generation and JavaScript effects. </li></ul>

122.
Seek CSS Enlightenment Grasshopper <ul><li>OSWD </li></ul><ul><ul><li>http:// www.oswd.org </li></ul></ul><ul><li>CSS Zen Garden </li></ul><ul><ul><li>http:// www.csszengarden.com </li></ul></ul><ul><ul><li>http:// www.mezzoblue.com/zengarden/alldesigns / </li></ul></ul>

123.
XML in the Real World You mean people actually use this stuff?

124.
G.O. – Global Origins <ul><li>XML Driven Content </li></ul><ul><ul><li>Plugin to NASA’s WorldWind </li></ul></ul><ul><ul><li>Google Maps Mashup </li></ul></ul><ul><ul><li>Art Metadata, Imagery, Audio, App Settings, UI Components, etc … </li></ul></ul>

125.
G.O. – Global Origins One Ring XML Data Description to Rule Them All

126.
G.O. – Global Origins <ul><li>Config File is a Schema Instance </li></ul>XmlSerializer artobjSer = new XmlSerializer(typeof( GlobalExplorer )); goData = (GlobalExplorer)artobjSer.Deserialize(File.OpenRead(this.xmlFile));

127.
Useful Eclipse Plugins <ul><li>SVN Integration </li></ul><ul><ul><li>Subversive , Subclipse </li></ul></ul><ul><li>PHP </li></ul><ul><ul><li>PDT , PhpEclipse </li></ul></ul><ul><li>Hibernate Tools </li></ul><ul><li>WTP – WST </li></ul><ul><li>Ruby – RadRails </li></ul><ul><li>Python - PyDev </li></ul>

128.
Questions? <ul><li>Rob Stein </li></ul><ul><ul><li>[email_address] </li></ul></ul><ul><li>Ed Bachta </li></ul><ul><ul><li>[email_address] </li></ul></ul><ul><li>Charles Moad </li></ul><ul><ul><li>[email_address] </li></ul></ul><ul><li>Slideshare of this talk </li></ul><ul><ul><li>http://www.slideshare.com/..... </li></ul></ul>