bootstrap for extension developers jwc 2012
DESCRIPTION
How to take advantage of the bootstrap framework in your Joomla 3.x extension so you can leave the designing to the designers.TRANSCRIPT
Bootstrap for Extension DevelopersAndrea TarrMetaScale / Sears HoldingsNovember 2012
Outline• Introduction to
Bootstrap• Using Bootstrap
in Joomla extensions• Examples in
Joomla
Novem
ber
20
12
Boots
trap f
or
Exte
nsi
on
Develo
pers
• A
ndre
a T
arr
•
Joom
la W
orl
d C
onfe
rence
2
Bootstrap Introduction• What problem is Joomla trying to solve?• What is Bootstrap?• How does it work?• Exploring Bootstrap N
ovem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
3
The Problem• The need for a consistent style sheet for
extensions• Core extension are the current de facto style
sheet• 3pd & custom extensions make up what they
need that isn't in core – and they all do it differently
• Templates have to code for specific extensions to maintain the look and feel of the web site
• Result is that many extensions look like iframes unrelated to the site
• This is the case in both the frontend and the backend
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
4
What is Bootstrap?• Basic set of CSS for layout• CSS styles for UI elements such as menus &
buttons• CSS styles for responsive design• Integrated JavaScript widgets (jQuery) for UI
elements such as accordions • A set of icons that can be used• Minified versions of the CSS & JS available• Includes the ability to use LESS files to create the
CSS• Can work with different HTML markup• Has docs showing HTML code, but the better code
is in the actual examples folder
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
5
Novem
ber
20
12
How does it work?<!DOCTYPE html><html lang="en"> <head> <title>My Web Site</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <h1>My Web Site</h1> <p>This is a paragraph</p> </body></html>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
6
Exploring Bootstrap• To see examples online• http://twitter.github.com/bootstrap/
• To download Bootstrap to your computer• Download button at twitter.github.com/bootstrap• Full source at https://github.com/twitter/bootstrap
• Call the docs folder in browser
• To see mockup examples for Joomla• http://kyleledbetter.com/jui
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
7
Using Bootstrap inJoomla Extensions• CSS Class names have changed• jQuery is available• Grid System• Classes• Navigation• Tables• Forms
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
8
Grid System - Static
<div class="row"> <div class="span4">...</div> <div class="offset2 span6">...</div></div>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
9
Grid System – Static Nesting• Children add up to the parent<div class="row"> <div class="span4"> <div class="row">
<div class="span1">...</div> <div class="span3">...</div> </div> </div> <div class="offset2 span6">...</div></div>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
10
Grid System - Fluid
<div class="row-fluid"> <div class="span4">...</div> <div class="offset2 span6">...</div></div>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
11
Grid System – Fluid Nesting• Children add up to 12<div class="row-fluid"> <div class="span4"> <div class="row-fluid">
<div class="span3">...</div> <div class="span9">...</div> </div> </div> <div class="offset2 span6">...</div></div>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
12
Boots
trap f
or
Develo
pers
• J
oom
la W
orl
d C
onfe
rence
• A
ndre
a T
arr
Grid System in Joomla• Backend leftnav/list views• span2/span10• Example: Article Manager
• Backend edit views• span10/span2• Example: Article Edit
• Dashboards• span2/span6/span4• Example: Control Panel
Novem
ber
20
12
13
Boots
trap f
or
Develo
pers
• J
oom
la W
orl
d C
onfe
rence
• A
ndre
a T
arr
Responsive classes
Novem
ber
20
12
14
Special Text Designations<p class="muted">Fusce dapibus, mauris nibh.</p><p class="text-warning">Etiam porta euismod.</p><p class="text-error">Donec auctor fringilla.</p><p class="text-info">Aenean eu leo quam. </p><p class="text-success">Duis erat porttitor ligula.</p>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
15
Other Useful Classes• <div class="pull-right">...</div>• <div class="pull-left">...</div>• Clear with clearfix class• (JUI) Hide labels with element-invisible class N
ovem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
16
Tables
All Tables• <table class="table">
Additional table classes to add• .table-striped• .table-condensed• .table-border• .table-hover
Standard Admin tables• class="adminlist table table-striped"
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
17
Tables: Row Classes• .success• .error• .warning• .info N
ovem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
18
Forms• Bootstrap standard with left-adjusted, label above• Optional classes for different types of forms• Inline form• .form-inline
• Horizontal form (normal Joomla backend)• .form-horizontal• wrap label/control in .control-group• .control-label on label• wrap controls in .controls• wrap multiple actions in .form-actions to show
horizontally
• Use input types
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
19
Forms: Radio/Checkbox• Add class .radio or .checkbox on the label for the
control• Use the type of radio or checkbox on the input• To display radio/checkbox label inline• Add class .inline to the label
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
20
Yes/No Radio Button XML<fieldname="link_titles"type="radio"class="btn-group"label="JGLOBAL_LINKED_TITLES_LABEL"description="JGLOBAL_LINKED_TITLES_DESC"labelclass="control-label"> <option value="">JGLOBAL_USE_GLOBAL</option> <optionvalue="0">JNO</option> <option value="1">JYES</option></field>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
21
Forms: Addons• To add text or a button before or after the input
<div class="input-prepend"> <span class="add-on">@</span> <input class="span2" id="prependedInput" size="16" type="text" placeholder="Username"></div><div class="input-append"> <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span></div>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
22
Forms: Addon Buttons• Use button with class .btn instead of the span to
attach a button to a control
<div class="input-append"> <input class="span2" id="appendedInputButton" size="16" type="text"> <button class="btn" type="button">Go!</button></div>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
23
Forms: Sizing• Add class to inputs for relative sizing• .input-mini• .input-small• .input-medium• .input-large• .input-xlarge• .input-xxlarge
• You can also use the span classes• .span1, .span4, .span6, etc.• If using multiple spans on multiple lines, wrap each
row in .control-row.
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
24
Forms: Misc• To make an input read only• Add the disabled attribute (not a class)• <input id="thisInput" type="text" disabled
placeholder="Disabled input here...">
• Show read only text as if it is a form element• .uneditable-input• <span class="input-xlarge uneditable-input">Some
value here</span
• Help text• .help-inline• .help-block• <input type="text"><span class="help-
inline">Inline help text</span>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
25
Buttons
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
26
Buttons: Sizing• Optional: Add a sizing button class• .btn-large• .btn-small• .btn-mini• .btn-block
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
27
Navigation• http://twitter.github.com/bootstrap/
components.html#navs
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
28
Examples in Joomla• Some changes• Manager Example• Chosen select dropdowns• Sidebar• Filters• Sorting• Drag & Drop
• Edit Example• Tabbing Content
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
29
Administrator Changes• JHtml::_('behavior.tooltip'); becomes
JHtml::_('bootstrap.tooltip');• For dropdowns, use JHtml::_('formbehavior.chosen', 'select'); N
ovem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
30
Manager Example
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
31
Set up the Managerdefined('_JEXEC') or die;
JHtml::addIncludePath(JPATH_COMPONENT.'/helpers/html');JHtml::_('bootstrap.tooltip');JHtml::_('behavior.multiselect');JHtml::_('formbehavior.chosen', 'select');
$user = JFactory::getUser();$userId = $user->get('id');
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
32
Drag & Drop Ordering$listOrder = $this->escape($this->state->get('list.ordering'));$listDirn = $this->escape($this->state->get('list.direction'));$canOrder = $user->authorise('core.edit.state', 'com_mycomponent.category');$saveOrder = $listOrder == 'a.ordering';if ($saveOrder) { $saveOrderingUrl = 'index.php?option=com_mycomponent &task=mycomponent.saveOrderAjax&tmpl=component'; JHtml::_('sortablelist.sortable', 'mycomponentList', 'adminForm', strtolower($listDirn), $saveOrderingUrl);}$sortFields = $this->getSortFields();
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
33
Sorting: Script<script type="text/javascript"> Joomla.orderTable = function() { table = document.getElementById("sortTable"); direction = document.getElementById("directionTable"); order = table.options[table.selectedIndex].value; if (order != '<?php echo $listOrder; ?>') { dirn = 'asc'; } else { dirn = direction.options[direction.selectedIndex].value; } Joomla.tableOrdering(order, dirn, ''); }</script>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
34
Sidebar & Start Main Div<form action="url here" method="post" name="adminForm" id="adminForm">
<!-- if there is is a side bar, display the sidebar as span2 and start the main-container as span10. Otherwise, just start the main-container, which will default to the the full span12. -->
<?php if(!empty( $this->sidebar)): ?> <div id="j-sidebar-container" class="span2"> <?php echo $this->sidebar; ?> </div> <div id="j-main-container" class="span10"><?php else : ?> <div id="j-main-container"><?php endif;?>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
35
Searching<!-- The main container for the component starts with the Search & Sorting across the top (Orange should be JText strings) -->
<div id="filter-bar" class="btn-toolbar"> <div class="filter-search btn-group pull-left"> <label for="filter_search" class="element-invisible">Search</label> <input type="text" name="filter_search" id="filter_search" placeholder="Search" value="<?php echo $this->escape($this->state->get('filter.search')); ?>" title="Search" /> </div>
<div class="btn-group pull-left"> <button class="btn hasTooltip" type="submit" title="Submit"><i class="icon-search"></i></button> <button class="btn hasTooltip" type="button" title="Clear" onclick="document.id('filter_search').value='';this.form.submit();"><i class="icon-remove"></i></button> </div>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
36
Sort Filter & Display #<div class="btn-group pull-right hidden-phone"> <label for="limit" class="element-invisible">Label</label> <?php echo $this->pagination->getLimitBox(); ?></div><div class="btn-group pull-right hidden-phone"> <label for="directionTable" class="element-invisible">Label</label> <select name="directionTable" id="directionTable" class="input-medium" onchange="Joomla.orderTable()"> <option value="">Order desc</option> <option value="asc" <?php if ($listDirn == 'asc') echo 'selected="selected"'; ?>>Asc</option> <option value="desc" <?php if ($listDirn == 'desc') echo 'selected="selected"'; ?>>Desc</option> </select></div>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
37
Sort Filter & Display #<div class="btn-group pull-right"> <label for="sortTable" class="element-invisible">Sort by</label> <select name="sortTable" id="sortTable" class="input-medium" onchange="Joomla.orderTable()"> <option value="">Sort by..</option> <?php echo JHtml::_('select.options', $sortFields, 'value', 'text', $listOrder);?> </select></div></div><!-- End Filter bar --><div class="clearfix"> </div>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
38
Manager Table• <table class="adminlist"> becomes<table class="table table-striped" id="xxxxxxList">• Use class="adminlist table table-striped" if you
want backward compatibility• If you want to hide columns on a phone add class
hidden-phone
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
39
Order Field: Field<tr class="row<?php echo $i % 2; ?>" sortable-group-id="<?php echo $item->catid?>"><td class="order nowrap center hidden-phone"> <?php if ($canChange) : $disableClassName = ''; $disabledLabel = ''; if (!$saveOrder) : $disabledLabel = JText::_('JORDERINGDISABLED'); $disableClassName = 'inactive tip-top'; endif; ?> (do something here if you can edit and reorder) <?php else : ?> <span class="sortable-handler inactive" > <i class="icon-menu"></i> </span> <?php endif; ?></td>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
40
Doing the something<span class="sortable-handler hasTooltip <?php echo $disableClassName?>" title="<?php echo $disabledLabel?>"> <i class="icon-menu"></i> </span> <input type="text" style="display:none" name="order[]" size="5" value="<?php echo $item->ordering;?>" class="width-20 text-area-order " />
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
41
Batch Modal Sub-layout$published = $this->state->get('filter.state');?><div class="modal hide fade" id="collapseModal"> <div class="modal-header"> <button type="button" role="presentation" class="close" data-dismiss="modal">x</button> <h3><?php echo JText::_('COM_MYCOMPONENT_BATCH_OPTIONS');?></h3> </div> <div class="modal-body"> (form control-groups go here) </div>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
42
Modal footer<div class="modal-footer"> <button class="btn" type="button" onclick ="document.id('batch-category-id').value ='';document.id('batch-access').value ='';document.id('batch-language-id').value =''" data-dismiss="modal"> <?php echo JText::_('JCANCEL'); ?> </button> <button class="btn btn-primary" type="submit" onclick="Joomla.submitbutton('mycomponent.batch');"> <?php echo JText::_('JGLOBAL_BATCH_PROCESS'); ?> </button></div></div><!-- End collapseModal -->
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
43
Creating $sidebar in view.html.php$this->addToolbar();$this->sidebar = JHtmlSidebar::render();parent::display($tpl);
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
44
Example Edit Screen
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
45
Overview• Simplified example of an edit form in the backend• Set up as tabbed content in a span10 section on
the left with a span2 sidebar that remains constant on the right. N
ovem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
46
Set up the form<!--simplified edit layout --><form action="url here" method="post" name="adminForm" id="mycomponent-form" class="form-validate">
<div class="row-fluid"><!-- Begin Main --><div class="span10 form-horizontal">
<fieldset>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
47
List the tab navigation<!-- List of Tabs --><ul class="nav nav-tabs">
<li class="active"><a href="#details" data-toggle="tab">Details</a></li>
<li><a href="#publishing" data-toggle="tab">Publishing</a></li>
<li>...</li></ul>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
48
List Content in Each Tab<div class="tab-content"> <div class="tab-pane active" id="details"> <div class="control-group"> <div class="control-label"><?php echo $this->form->getLabel('title'); ?></div>
<div class="controls"><?php echo $this->form->getInput('title'); ?></div>
</div> <div class="control-group"> <div class="control-label"><?php echo $this->form->getLabel('url'); ?></div>
<div class="controls"><?php echo $this->form->getInput('url'); ?></div>
</div> <div class="control-group"> ... </div> </div>
<div class="tab-pane" id="publishing"> ... </div>
additional tab-pane divs ....
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
49
Tab Content in sub-layouts<?php echo $this->loadTemplate('params'); ?><?php echo $this->loadTemplate('metadata'); ?>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
50
Hidden inputs and end divs
<input type="hidden" name="task" value="" />
<?php echo JHtml::_('form.token'); ?></div><!-- end tab-content --></div><!-- end span10 -->
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
51
Right sidebar<!-- Begin Sidebar --><div class="span2">
<h4>Details</h4><hr /><fieldset class="form-vertical">
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
52
Form Controls Groups<div class="control-group"> <div class="controls"> <?php echo $this->form->getValue('title'); ?> </div></div><div class="control-group"> <div class="control-label"> <?php echo $this->form->getLabel('state'); ?> </div> <div class="controls"> <?php echo $this->form->getInput('state'); ?> </div></div><div class="control-group"> ...</div>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
53
End the sidebar & form </fieldset> </div><!-- End Sidebar --></form>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
54
Detail on using sub-layouts for tab contents• You can use sub-layouts for tab pane content• Examples: edit_metadata & edit_params• Add a foreach loop to the tab navigation• Add a load to the layouts in the tab content N
ovem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
55
Tab Nav <li> Loop<?php$fieldSets = $this->form->getFieldsets('params');foreach ($fieldSets as $name => $fieldSet) : ?> <li> <a href="#params-<?php echo $name;?>" data-toggle=
"tab"><?php echo JText::_($fieldSet->label);?></a> </li><?php endforeach; ?>
<?php$fieldSets = $this->form->getFieldsets('metadata');foreach ($fieldSets as $name => $fieldSet) : ?> <li> <a href="#metadata-<?php echo $name;?>" data-toggle= "tab"><?php echo JText::_($fieldSet->label);?></a> </li><?php endforeach; ?>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
56
Sub-layout tab pane<div class="tab-pane" id="publishing"> ...</div>
<?php echo $this->loadTemplate('params'); ?><?php echo $this->loadTemplate('metadata'); ?>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
57
Sub-layout<?php$fieldSets = $this->form->getFieldsets('params');foreach ($fieldSets as $name => $fieldSet) :?> <div class="tab-pane" id="params-<?php echo $name;?>">
<?php if (isset($fieldSet->description) && trim($fieldSet->description)) : echo '<p class="alert alert-info">'.$this->escape(JText::_($fieldSet-> description)).'</p>'; endif; ?> <?php foreach ($this->form->getFieldset($name) as $field) : ?> <div class="control-group"> <div class="control-label"><?php echo $field->label; ?></div> <div class="controls"><?php echo $field->input; ?></div> </div> <?php endforeach; ?>
</div><!-- end tab-pane --><?php endforeach; ?>
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
58
Resources• Download basic bootstrap• http://twitter.github.com/bootstrap/
• The full bootstrap source• https://github.com/twitter/bootstrap
• Tutorials• http://webdesign.tutsplus.com/series/twitter-
bootstrap-101/
• Tutorials on YouTube• http://www.youtube.com/watch?v=DgwtRpf60xI
• Joomla JUI• http://kyleledbetter.com/jui
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
59
Novem
ber
20
12
Questions ?
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
60
Credits• Background photo by the_tahoe_guy
Novem
ber
20
12
Boots
trap f
or
Develo
pers
•
Joom
la W
orl
d C
onfe
rence
•
Andre
a T
arr
61