I considered  to make some kinda custom post type or by doing with custom fields on the page in order to style the A and the Q differently, but it all seemed a bit overkill for a simple list.

So in the end I ended up doing it by using CSS nth:child. Knowing that the Q’s and A’s would just be a list this seemed like the obvious choice.

The HTML is a simple list

<h1>FAQ</h1>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem Ipsum</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem Ipsum?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem Ipsum</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem Ipsum</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>

Some basic styling on the <li> elements just to remove the bullets and positions them relative – which will make sense in a second.

ul li{
list-style:none;
position: relative;
}

And the styling of the odd and even list items – the odd ones will be our Q’s and the even our A’s. For both Q’s and A’s I have added the :before pseudo element containing a ‘?’ or an ‘!’ with a bit of styling and pushing them of to the right with absolute positioning – which is why I gave the list items a position relative earlier.

ul li:nth-child(2n+1){
font-weight: bold;
margin-bottom: 5px;
}

ul li:nth-child(2n+1):before{
background-color: #e3e3e3;
border: 2px solid #ccc;
-moz-border-radius:3px;
border-radius:3px;
content:'?';
display: block;
font-weight: bold;
font-size: 16px;
height: 16px;
line-height: 16px;
position: absolute;
left:-25px; top:-2px;
text-align: center;
width: 16px;
}

ul li:nth-child(2n+2){
margin-bottom: 13px;
}
ul li:nth-child(2n+2):before{
background-color: #e3e3e3;
border: 2px solid #ccc;
-moz-border-radius:3px;
border-radius:3px;
content:'!';
display: block;
font-weight: bold;
font-size: 16px;
height: 16px;
line-height: 16px;
position: absolute;
left:-25px; top:0px;
text-align: center;
width: 16px;
}

You could put in an image instead f the ‘?’ and ‘!’ if you wanna spice it up a bit.

Se a demo page here

So, a update on bakaCMS. We’d like to introduce Micro Apps. Small independent apps which fits in like normal content fields which mean you can add, delete and rearrange.

So far we have to micro apps a Like layer, since it is meant for facebook and an image slider – we use Nivo slider.

See the video for more details.

The Scrumboard consist of four main parts:

1. A huge touch screen
2. A camera
3. A 3D-projecter (here’s where I get a little out there…)
4. Speakers.

Lets do the obvious components fist: Camera and speakers a self explaining.  Point is to record for streaming images and projections to other locations as well as the for video and audio documentation. Speakers a bi to get the highest possible quality – I probably overdid a tad…

For the screen – the actual scrum board – it can be seen as a huge iPad, you interact by touch. This will make it possible to give it the traditional whiteboard-feel, just with digital enhancements. I’ll make this the next post, to keep this one short.

Stay tuned.

Aloha-editor and Codeigniter

The code I use is mostly taking from the PHP-example at Aloha editor.org where they save your text to a session. What I – and I think most other people – need is to store it in a database using mySQL. So here’s what I did.

<script type="text/javascript">
    	function saveEditable(event, eventProperties) {
    	  var content = eventProperties.editable.getContents();
    	  var id = eventProperties.editable.getId();
          var fields = id.split(/-/);
          var id = fields[1];
    		$.post("site/update_text",
                { content: eventProperties.editable.getContents(),
                id: id } );
    	}

    	GENTICS.Aloha.settings = {
    		"i18n": {"current": "en"},
    		"ribbon": false,
    		"plugins": {
    			"com.gentics.aloha.plugins.GCN": {
    				"enabled": false
    			},
    		 	"com.gentics.aloha.plugins.Format": {
    				config : [ 'b', 'i','u','del','sub',
                                 'sup', 'p', 'title', 'h1', 'h2', 'h3',
                                 'h4', 'h5', 'h6', 'pre',
                                 'removeFormat'],
    			}
    	 	}
    	};

    	$(document).ready(function() {
    		$('.content').aloha();
    	});

    	GENTICS.Aloha.EventRegistry.subscribe(GENTICS.Aloha,
                              "editableDeactivated", saveEditable);

    </script>

The only thing I changed to get it to work, was this part

var id = eventProperties.editable.getId();
          var fields = id.split(/-/);
          var id = fields[1];

My id’s on the editable div’s is called id=”content-1″,  id=”content-2″ ect. which is generated from an unique ID in the database for each field which is attached to ‘content-’. The thing is when Aloha-editor takes the div’s ID’s by the getId()-function, you’ll get ont ony the numbers of the field ( == to the ID in the database for the content) you get ‘content-1′. So I used a it of javascript to split the ‘content-’ from the ‘id’ and could then pars the id and the corresponding content of the div to be injected in the database – which I’m sure you know how to do.

The post adress is site/update_text due to update_text -function in the site controller.

And thats pretty much it. Oh, one other thing about Aloha-editor I didn’t get right away was the lack of ‘bold’ and ‘italic’ -formatting not working. Right until I realized you have to declare it in your css.

b{ font-weight:bold;}

i{font-style:italic;}

I hope this helped someone and feel free to ask in the comments.

When you’re hold the role of admin of a page, the ‘Plus’ icon shows in the upper right corner. From here you add new text and image fields.

Fields are ‘boxes with content’, text or images. Text can be edited inline by using the Aloha-editor and images ny a not yet implemented technology.

Fields can be resized as well as sorted, so you can control the structure of your content. Everything without ever leaving your page.

bakaCMS is a bigger and better version of simpleBaka, I made earlier this year. I’m gonna put it back up in the near future , until then you can see the demo video at Vimeo.

Each genre is made as a category, so it’s something about looping through each category – of a certain parent category – and then display the posts. AND then put it all together in an accordion. For some a simple task but it took me a while to get it right. So, I’d like to share what I came up with in case someone else wanna do something similar.

The WordPress code

First the code for getting the categories and the posts:

div id="newlyAddedMovies">
<?php
$cat_args = array(
'parent' => 9,
'orderby' => 'name',
'order' => 'ASC',
'child_of' => 0
);
$categories = get_categories($cat_args);
foreach($categories as $category) { ?>
<h4 class="acc_trigger"><a href="#" alt="View all <?php echo $category->name; ?>"><?php echo $category->name; ?></a></h4>
<div class="acc_container">
<?php
$post_args = array(
'numberposts' => 5,
'category' => $category->term_id);
$posts = get_posts($post_args);
foreach($posts as $post) {
?>
<div class="newlyAddedMovie">
<?php the_post_thumbnail(); ?>
<p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
</div><!-- .newlyAddedMovie -->
<?php }?>
</div><!-- end acc_container-->
<?php
}
wp_reset_query();
?>
</div><!-- #newlyAddedMovies -->

The CSS

The accordion is originally made by Soh Tanaka – find him at www.sohtanaka.com – and to use his style:

h2.acc_trigger {
padding: 0; margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px; line-height: 46px;
width: 500px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.acc_trigger a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 0 0 50px;
}
h2.acc_trigger a:hover {
color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
background: #f0f0f0;
border: 1px solid #d6d6d6;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.acc_container .block {
padding: 20px;
}

Not much to say, I personally like the design, but alter to your flavor.

The jQuery

And finally a bit of jQuery to do the magic

//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all "active" state and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add "active" state to clicked trigger and slide down the immediate next container
}
return false; //Prevent the browser jump to the link anchor
});

It’s actually the same accordion on the BakaDesign homepage, but here is just displaying the latest post and I have a category logo showing next to title. To show the icons make a folder named category-icons in your content folder  paste in the following piece of code where you have your accordion.

<!-- Display catagory icons-->
<?php foreach((get_the_category()) as $cat){
$catname =$cat->category_nicename;
echo "<img src='/wordpress/wp-content/category-icons/";
echo $catname;
echo ".png' alt='$catname category image' width='25px' height='25px' />";
}?>

We have a door between the stairwell into the hallway. The door has one design problem, when opened quickly into the hallway it’s likely you might slam into someone on the other side. To solve the problem a sign was put on the door reading “Please open slowly” – not the most effective solution. If we build a socially translucent system into the door by putting a glass window it’s obvious it will have the desired effect of people not slamming doors into each other.

• As humans we rely on our ability to see – we react on the preset of other people.
• Through the glass I see the person on the other side, hence as a normal human being I don’t slam the door into you.
• And the ‘I know that you know I know’-reason from the earlier post: You know I can see you through the glass so if I for one reason or another choose to slam the door into you, you will know i did it deliberately – hence I get into trouble.

As discussed one of the key elements when working with scrum is the sharing of information, not only related to  a specific task but everything you communicate on a daily basis with the people around you. It’s all the ‘Hey, is this colour to bright?’ or ‘Can you remember how to make jQuery do this?’. But for now let’s stick to the information that’s directly linked to tasks in the project – in other words knowledge sharing and collective interaction.

Let’s divide or scrum process into three main situations we’ll look into in this post.

1. The sprint
2. The Daily Stand up
3. The Sprint Meeting

The three situations have different things to take into account but on the other hand share a lot of the same challenges. Lets go into further detail.

3. The Sprint Meeting

If we start fra the back – 3. the sprint meeting – in the case I’m looking at it’s the only part that’s held face to face. Team members and the product owner is present as well as the scrum master. I covered this in the post on scrum so for now I’ll keep it at that.

2.  The Daily Stand Up

How do we support the daily stand up? It’s not just a ‘I did, I do and I’m gonna do.’, it’s more complex than so. It’s about letting others know where you are in your process of getting the tasks done in order for them to act accordingly. And vice versa. And furthermore for you to know that they know – and no, it’s not a quote from some comedy. We can take this concept to our final point nr. 1.

At the daily stand up the team gather around the scrum board to get the big picture on how far they have come with the tasks they committed to in the sprint. Post its – or similar – describing each task it moved from todo -> in progress -> in test -> done as the task it self moves through this process. The scrum board gives a simple and visually easy to understand ‘progress bar’  as well as informing all team members on where their collogues are and what they do. When distributed  the team looses the advantages of having this meeting face to face. When mediated through technology like text messaging, phone or conference information gets lost. Not only task related information but all the (ore or less) subtle signals you catch from your colleagues during a face to face meeting.

1. The Sprint

During the sprint team members need to communicate, tasks are send back and forth and knowledge needs to bare shared within the team. When describing and discussing technology later on I’ll go much further into why and how it’s so crucial to virtual teams to share this information.

So, this would be the frame for our groupware technology for distributed scrum teams.

If you’re dying to know more about scrum check out the following links:

• Hamid Shojaee video about scurm on Youtube
• All knowing Wikipedia

Scrum in practical use

Scrum is a framework providing some work practices and artifacts to support the process and is implemented differently in different companies and teams. I’m gonna skip the theoretical discussion on where it’s used “right” and wrong” and just present how the process is being carried out in the context of this project.

It will look something like his.

To run through the steps quickly:

1. Some workshops to determine what it is we’re making.
2. If possible a small pilot project.
3. Specifications written as user stories
4. Test and fail fast – better and cheaper to fail now than later
5. Sprints and sprint meetings – as may as you need
6. Feature Freeze – no more new features
7. Code Freeze – no more coding…in theory
8. Performance test – may lead to more coding.
9. Grand opening of the project
10. Hypercare – users will break it!
11. Let’s see how e can improve in the next phase

In this project I’m gonna focus on the sprints and how to facilitate the work process when the team is geographically distributed. Scrum is made for in-house teams sitting next to each other being able ti communicate whenever they need. This is ont possible to the same extend when distributed.

What this project is about is how we can facilitate the daily stand up meetings through IT-system(s) and how to incorporate artifacts like the scrum board and the burndown charts. It’s about knowledge sharing, about bing up to date on other team members and about keeping them in the loop.