SCRUM: The Story of an Agile Team | Nettuts+ | Recomm reading


 

BY 
Nettuts+

Scrum is one of the most heavily used agile techniques. It’s not about coding; instead, it focuses on organization and project management. If you have a few moments, let me tell you about the team I work with, and how we adopted Scrum techniques.


A Little History

Scrum’s roots actually extend beyond the Agile era.

Scrum’s roots actually extend beyond the Agile era. The first mention of this technique can be found in 1986, by Hirotaka Takeuchi and Ikujiro Nonaka, for commercial product development. The first official paper defining Scrum, written by Jeff Sutherland and Ken Schwaber, was presented in 1995.

Scrum’s popularity grew shortly after the 2001 publication of the Agile Manifesto, as well as the book Agile Software Development with Scrum, coauthored by Ken Schwaber and Mike Beedle.


A Few Facts

Scrum defines a set of recommendations, which teams are encouraged to follow. It also defines several actors – or roles, if you prefer that terminology – together with an iterative process of production and periodical planning. There are several tools, which accommodate the Scrum process. I will reference a few in this article, but the most powerful tools are the white board and sticky notes.

There is not, and never will be, a list of “Scrum Best Practices,” because team and project context trumps all other considerations. — Mike Cohn

The Roles

Everything starts with the pig and the chicken. The chicken asks the pig if he is interested in jointly opening a restaurant. The chicken says they could call it, “Ham-and-Eggs.” The pig answers, “No thanks. I’d be committed, but you’d only be involved!

That’s Scrum! It specifies a concrete set of roles, which are divided into two groups:

  • Committed – those directly responsible for production and delivery of the final product. These roles include the team as a whole, its members, the scrum master, and the product owner.
  • Involved – represents the other people interested in the project, but who aren’t taking an active or direct part in the production and delivery processes. These roles are typically stakeholders and managers.

This is How We Started

Everything depends on dedication and good will. If you want your team to be efficient, productive, and deliver on time, you need someone to embrace some form of Agile techniques. Scrum may or may not be ideal for you, but it is surely one of the best places to start. Find that someone on your team who is willing to help the others, or you, yourself, can take on the responsibility of introducing Scrum.

You may ask why you should care how another team, like mine, does Scrum. You should care because we all learn how to do Scrum better by hearing stories of how it has been done by others – especially those who are doing it well. – Mike Cohn

The talented team I work with already knew a lot about Agile. We switched from Waterfall development to a more agile process, and released quite frequently. We successfully managed to release every three to six months, having a decently low number of bugs after each release.

But, still, we were far from what we can achieve today. We missed the process, or rules, that would force us to change our perspective on the product and process. That was the moment when our team manager introduced us to Scrum, a term we, at that time, had never heard of.

This person took the role of the Scrum Master.

The Scrum Master Leer más “SCRUM: The Story of an Agile Team | Nettuts+ | Recomm reading”

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

Final Product What You’ll Be Creating
Download Source Files
Demo View It Online

Often used on e-commerce or large scale websites, mega menus are becoming more and more popular, as they offer an effective solution to displaying a lot of content while keeping a clean layout. In this tutorial, we’ll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features.

[Más…]
Step 1: Building the Navigation Bar

Let’s begin with a basic menu, built with an unordered list and some basic CSS styling.
view plaincopy to clipboardprint?

1.

Creating the Menu Container

We’ll now apply some basic CSS styling. For the menu container, we define a fixed width that we center by setting the left and right margins to “auto”.
view plaincopy to clipboardprint?

1. #menu {
2. list-style:none;
3. width:940px;
4. margin:30px auto 0px auto;
5. height:43px;
6. padding:0px 20px 0px 20px;
7. }

#menu {
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
}

Now, let’s see how we can improve it with some CSS3 features. We need to use different syntaxes for Webkit-based browsers (like Safari) and for Mozilla-based browsers (like Firefox).

For rounded corners, the syntax will be :
view plaincopy to clipboardprint?

1. -moz-border-radius: 10px
2. -webkit-border-radius: 10px;
3. border-radius: 10px;

-moz-border-radius: 10px
-webkit-border-radius: 10px;
border-radius: 10px;

For the background, we’ll use gradients and a fallback color for older browsers. To keep consistency when choosing colors, there is an awesome tool called Facade that helps you find lighter and darker tones of a basic color.
view plaincopy to clipboardprint?

1. background: #014464;
2. background: -moz-linear-gradient(top, #0272a7, #013953);
3. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

The first line applies a simple background color (for older browsers); the second and third lines create a gradient from the top to the bottom using two colors : #0272a7 and #013953.

We can now add a darker border and polish the design with a “fake” inset border created with the “box-shadow” feature. The syntax is the same for all compatible browsers: the first value is the horizontal offset, the second one is the vertical offset, the third one is the blur radius (a small value makes it sharper; it will be 1 pixel in our example). We set all offsets to 0 so the blur value will create a uniform light border :


Final Product What You’ll Be Creating

Often used on e-commerce or large scale websites, mega menus are becoming more and more popular, as they offer an effective solution to displaying a lot of content while keeping a clean layout. In this tutorial, we’ll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features.

Leer más “How to Build a Kick-Butt CSS3 Mega Drop-Down Menu”

5 Biggest Copyright Pitfalls for Web Designers

3. Platform Licensing

The days of static websites went out nearly a decade ago. Most sites today are built on top of a platform of some variety or another, be it WordPress, Joomla, Presta Shop or some other software. However, many of these tools have strict and/or unusual licensing requirements and it is easy for designers to run afoul of their terms when setting up a new site.

The most common mistake is installing a purchased application on too many sites; for example, by buying a one-domain license on ThemeForest for an application, but using it with multiple clients.

However, even open source applications carry risks as many designers, in an attempt to keep the site clean, remove attribution lines in the code and files on the server that are required as part of the license.

When using any software to build a site, take a moment to read thorough the license and understand what it means. Follow those terms closely. Developers are constantly becoming more savvy about tracking down those who violate their licenses and even authors that license under the GPL are becoming more aggressive about enforcing their terms.
4. Open Source Blunders

A related mistake comes when web designers use and publish works based on open source code, particularly GPLed code (which includes many WordPress themes) and forget to either retain the license information and/or fail to donate their modified code back to the GPL.

If you create a derivative work of a GPL-licensed one, such as making a GPL WordPress theme a different color, the new theme has to be licensed under the GPL.

If you are unsure of whether your new work meets the requirement for GPL “inheritance”, this 2001 article by Lawrence Rosen (http://www.sitepoint.com/article/public-license-explained/) explains it quite nicely.


5 Biggest Copyright Pitfalls for Web Designers

When it comes to design, copyright is often a very muddled gray area. Just as the lines between plagiarism and homage are often confusing, so too is the line between infringing and non-infringing use of copyrighted material. Since it is natural and even expected of Web designers to incorporate elements from other sites and other creations, it is important to understand the risks and hazards when it comes to copyright in Web design. As such, here are five of the most common copyright pitfalls Web designers face and how to best avoid them. Leer más “5 Biggest Copyright Pitfalls for Web Designers”

20 Excellent Coda Tips

I’ve been using Coda for a while now, and it’s become my web development application of choice. There are quite a few great web development applications out there (read “18 Wonderful IDEs for Windows, Mac, and Linux“) but if you’re a Mac user, Coda is easily one of the best.

Here are 20 excellent Coda tips to increase productivity that I’ve gathered during my use of Coda so far.
1. Set Your Preferences

There are a few things I had to change right away when I first started using Coda. These are all found in Coda’s preferences.

I never use a GUI CSS editor so I set Coda to always open CSS files with the text editor.


I’ve been using Coda for a while now, and it’s become my web development application of choice. There are quite a few great web development applications out there (read “18 Wonderful IDEs for Windows, Mac, and Linux“) but if you’re a Mac user, Coda is easily one of the best.

Here are 20 excellent Coda tips to increase productivity that I’ve gathered during my use of Coda so far.


1. Set Your Preferences

There are a few things I had to change right away when I first started using Coda. These are all found in Coda’s preferences.

I never use a GUI CSS editor so I set Coda to always open CSS files with the text editor.

Coda Preferences General Tab

Under the Editor tab I’ve check-marked “Show line numbers” and “Use tabs” for indenting. You can hide/show line numbers by pushing Command + Option + L as well.

Coda Preferences Editor Tab

Under the Colors tab I’ve check-marked “Highlight Current line” to make it easier to see where the cursor is when switching back and fourth between applications.

Under the files tab I set files to open when double clicked instead of a single click. You may also need to setup your external editors. Coda automatically used Photoshop for the image formats I use.

Coda Preferences Files Tab

This is how Coda’s navigation bar at the top is by default. This is just a waste of space in my opinion although it is pretty.

Coda Nav Bar Big

I’ve changed mine to display only text titles and as small as possible. Since I don’t use the buttons I have that section minimized most of the time anyway. Instead I use the shortcut keys which I’ll cover next.

Coda Nav Bar Small

Aside from these changes, I’ve left everything else at the default settings. I’ve played around with the color schemes a little but I didn’t find anything I was really happy with so I’ve kept the default color scheme.


2. Switching Modes

If you aren’t using shortcut keys to change modes, now is a good time to learn. Pushing Command + 1-6 changes the mode you’re in. You can switch between your sites, editor, preview, etc. modes very quickly this way.


3. Navigating Open Documents

Pushing Command + Shift + Left or Right Bracket will navigate through your open documents.


4. Line Indenting

Coda automatically indents certain markup for you by default but you’ll still find yourself using the Tab button pretty frequently. Instead of jumping to the front of a line to indent it you can push Command + Left or Right Bracket to indent the line the cursor is currently in.


5. Clips and Text Inserts

Pushing Command + Control + C will open up Coda’s clips. Clips is a place to store snippets of code for quickly inserting into documents. You can save snippets for use in all documents or just site specific clips.

Coda Clips General

You can assign tags to quickly insert clips. For example, I’ve set “htmltemp” to insert an HTML 4.01 Template when I start a new document. I would type “htmltemp” into the blank document and push Tab to insert the clip. You can also insert a selection placeholder if the cursor needs to go somewhere specific in the clip after being inserted.

Coda Clips General

Leer más “20 Excellent Coda Tips”

Creating a Web Poll with PHP


Creating a Web Poll with PHP

Polls are nearly ubiquitous on the web today, and there are plenty of services that will provide a drop-in poll for you. But what if you want to write one yourself? This tutorial will take you through the steps to create a simple PHP-based poll, including database setup, vote processing, and displaying the poll.

Tutorial Details

  • Technology: PHP5, HTML, CSS
  • Difficulty: Moderate
  • Estimated Completion Time: 40 Minutes

Files u need

Leer más “Creating a Web Poll with PHP”

Mastering the 960 Grid System

Introduction

A 960 Grid System Master—that’s what you’ll be after you’ve gone through this article. And, although we’re going to use the 24-column variant of 960gs, you’ll completely understand how the two older types (i.e., 12- and 16-columns) work too, by applying the same principles you’ll learn here. But first, take a good look at the 24-column demo in the 960gs site, as it’s all we’ll need in our leap towards mastery of this popular CSS framework.
A Look at the 24-Column Demo

We first need to check the HTML code of the demo, so view its source—if you’re using Chrome, Firefox, or Opera, just press ctrl+U; if you’re using Internet Explorer, change your browser! 🙂 (on the Mac, use cmd+U for Firefox and opt+cmd+U for Safari and Opera; Chrome only does the right-click option). Keep the HTML source code window on your desktop, as we’re going to refer to it from time to time.

Next, you’ll need to download the 960.gs files (if you haven’t done so yet), and open the uncompressed CSS file 960_24_col.css. We must do this because the demo’s CSS is compressed, and will be difficult to inspect. (If you’re the masochistic type, feel free to use the demo’s CSS instead.

That’s pretty much all we need to prepare, aside from a semi-functioning brain. Now you’ll find that the demo page holds the key to completely understanding the grid system, and we’ll start by examining its three sections.


A graphical despiction of a very simple html d...
Image via Wikipedia

Tutorial Details
  • Program: 960 Grid System
  • Topic: HTML / CSS Grids
  • Difficulty: Beginner to Intermediate
  • Estimated Completion Time: One hour


Introduction

A 960 Grid System Master—that’s what you’ll be after you’ve gone through this article. And, although we’re going to use the 24-column variant of 960gs, you’ll completely understand how the two older types (i.e., 12- and 16-columns) work too, by applying the same principles you’ll learn here. But first, take a good look at the 24-column demo in the 960gs site, as it’s all we’ll need in our leap towards mastery of this popular CSS framework.


A Look at the 24-Column Demo

We first need to check the HTML code of the demo, so view its source—if you’re using Chrome, Firefox, or Opera, just press ctrl+U; if you’re using Internet Explorer, change your browser! :) (on the Mac, use cmd+U for Firefox and opt+cmd+U for Safari and Opera; Chrome only does the right-click option). Keep the HTML source code window on your desktop, as we’re going to refer to it from time to time.

Next, you’ll need to download the 960.gs files (if you haven’t done so yet), and open the uncompressed CSS file 960_24_col.css. We must do this because the demo’s CSS is compressed, and will be difficult to inspect. (If you’re the masochistic type, feel free to use the demo’s CSS instead.

That’s pretty much all we need to prepare, aside from a semi-functioning brain. Now you’ll find that the demo page holds the key to completely understanding the grid system, and we’ll start by examining its three sections. Leer más “Mastering the 960 Grid System”

An Introduction to Split Testing in WordPress

Kirk Kaiser

Split testing is a way to experiment with a live site and find which headlines and text are the most effective. Amazon uses split testing to determine which versions of their site convert customers better. We’ll use WordPress and Google’s Website Optimizer to test two different headlines, and find which works best at capturing customer emails. [Más…]

Step 1: Decide on Your Experiment Type

First, we’ll need to decide what sort of an experiment we’d like to run. In Google’s Website Optimizer, we have two choices: Multivariate Testing or A/B Testing.

Multivariate testing is a good way to test a lot of things at once. Big online stores use multivariate testing to figure out which layouts and ad copies work best. For the purpose of this tutorial, however, we’ll use A/B testing.

A/B Testing is a way to test two different types of copy, and see which works best. We start with two different variations of the same page, send some traffic to the pages, and see which converts best statistically. For the purposes of our split test, we’ll want to have at least 100 conversions before deciding which page is the statistically significant winner.


Split testing is a way to experiment with a live site and find which headlines and text are the most effective. Amazon uses split testing to determine which versions of their site convert customers better. We’ll use WordPress and Google’s Website Optimizer to test two different headlines, and find which works best at capturing customer emails. Leer más “An Introduction to Split Testing in WordPress”