Making beautiful business applications

In the previous article we looked into the basics of a table. In this article we will discuss the box model. This is one of the more challenging things to discuss, so I have my coffee ready. yay!

The coffeecup

So, you are a stylish person and love awesomely shaped things. You get hold of these amazing coffeecups from a store online. They do all that a coffeecup does and more! They are pretty and functional, and you get the see the coffee through the edge of the border.

HTML box model is similar in this regard. Your normal layout that you see does not do justice to the complexity underneath.

Looking at the image on the right, you are able to see the content in the middle. This is like the coffee itself. The container/cup is made for containing/ holding coffee. Edging on the coffee, is padding – this allows for a bit of breathing space around the edges and is normally specified in pixels (for advanced magical people, you can use things like em’s and points, but why would you do that, except to show off?!).

We also have a border. This is the edge of the cup – the end of the thing. But we are able in HTML to add a colour, border width and style to an element.

REMEMBER! If you set the width of an element, it sets it only of the content!

Having these options allows for people like us – developers and web designers to create beautiful designs with just the right amount of spacing and borders to make any design ‘pop’.

The table is one of those things designers love – you can work with it like you would in word or excel – create a lot of blocks, and add stuff in there. If you are working with a developer, avoid using tables for layout – as the developer might stab you to death or jump off a cliff – having to redesign the whole layout.

When to use tables:

Looking at what the magical people from the powers that be says about tables:

So, the rule of thumb is when you have data that you want to display – a menu with details/data about the type of coffee, description and price (depending on the size). You could try add this into paragraphs and headers, but note that people will point and laugh! It would be almost like you are trying to make tea using a coffeegrinder… #awkward.

Think of a table as a set of information.

Table structure and explanation:

A table has a few elements and a few odd things you need to consider:

<table></table>

This is the basic table element. It tells IE/Chrome/Safari/Firefox that that inside these tags you can expect a table with data.

<tr></tr>

A table contains columns and rows. For me, as a designer I was thinking the people were nuts – why in heaven’s name would they want to group the stuff by row.

<td></td>

Initially I wanted to style the “Grande Sized Price” column only! These sinners in the initial web world decided to use a coding standard – the way that the data was saved – to dictate the UI. They created cells inside of the table rows. These you are able to style and add the price of your coffee in. In a later post I will discuss how we can only style the totals columns. #cry

<th></th>

If you have headers in your data (e.g. “coffee type:”, “small:”, “medium:”, “large:”), you can add this in a table header. Note the structure for this is within a table row. So each column can have a header giving more info about what data it contains.

You are lazy and prefer to code rather than spend 10 minutes to prepare your coffee.

Some people reach a point in their lives where they want to explore coffee that is more exotic and hand crafted. They have done the instant coffee and filter coffee, but have a craving for the finer art of the barista and coffee connoisseur.

Fonts, typography and text layout is like the upgrade from instant coffee to a full choice of the barista menu: with coffee you can choose between americano, cafe latte, cappuccino, espresso and so forth, and with HTML text related tags you can choose between headers, paragraphs, breaks, horizontal rules, to name a few.

Understanding that people would like a visual aide to understanding these, I would like to group these into three distinct sections:

Text layout

In Html, these tags are used for telling the browser what is seen as a header, a paragraph and quote. Google is also most interested in this, because it tells them what is the thing that it is reading.

As in the image on the right, we use an “h” to say this is a header, and a “p” to show it’s a paragraph. as noted in the previous blog post here, we use opening and closing tags.

<h1>This is a heading. Big coffee bean</h1>
<p>This is a paragraph. many small ideas/coffeebeans</p>

<p>This is a paragraph. many other small ideas/coffeebeans</p>

Result:

This is a heading. Big coffee bean

This is a paragraph. many small ideas/coffeebeans

This is a paragraph. many other small ideas/coffeebeans

You can use up to 6 header tags: h1, h2, h3,h4, h5,h6, but only the one p.

Note that the output is exactly the same for now. Once we have some knowledge on styling we can make that piece green!

Text formatting

Spans

Okay, so what’s up with the green bean? Sometimes in a paragraph, we would want to style something differently – but only one word. Or we want to add an image or an icon inside of the text. This happens quite often! Incoming – the SPAN. the span is a really cool way for catering for small changes in a paragraph or header. If you are an Adobe InDesign user, think of it as paragraph styles and character styles. The following does make perfect sense:

<h1>This is a heading. Big coffee bean</h1>
<p><span>This</span> is a paragraph. many small ideas/coffeebeans</p>

<p>This is a paragraph. many other small ideas/coffeebeans</p>

Result:

This is a heading. Big coffee bean

This is a paragraph. many small ideas/coffeebeans

This is a paragraph. many other small ideas/coffeebeans

We would still be required from time to time to make some enhancements to our layout – things like bold, italics, top and bottom scripts: superscript, subscript: subscript.

<i>i stands for italic</i>

<b>b stands for bold</b>

coffee<sub>sub coffee</sub>

coffee<sup>sup coffee</sup>

Result:

i stands for italic

b stands for bold

coffeesub coffee

coffeesup coffee

these would be used in a normal paragraph:

Text spacing

This sections is about sections – sometimes you want a bit more spacing in your text, or all a line to split different sets of content. You can do this with elements like break tags and horizontal rules.

these are difficult to explain. So here goes: the break tag is like the shift + enter button on your keyboard. It breaks to a new line, but doesn’t create a new paragraph altogether. Sometimes in paragraphs you want it to be part of the same paragraph.

the horizontal rule adds a line to split content. Say, you are ranting about Arabica coffee, and you want to now rant about Robusta coffee. It might make sense to not to add a new header.

Result:

If you want to learn about HTML, you need to understand some core concepts about the language. I will here discuss a few, using some pictures I have found online.

HTML is a layout language – it consists of tags, like so:

<coffeecup></coffeecup>

This would correspond in coffee terms to something like the big image here =>

You need to think of HTML as a set of containers. These containers will make magical things happen to anything that is on the inside. For now, it could make things italic, bold, explain to the code and the browser that it is a paragraph or a header.

Most tags require you to close it. Think about it – if your coffee cup does not know where to start and end, where will your coffee end…? Quite possibly at a restaurant with bottomless coffee!

Nesting: coffeecups in coffeecups and coffee in coffeecups

But on a more serious note – most layout containers need you to specify the end and the start. There’s a select few that does not have start and end tags, as it would be a bit silly – these will be discussed in a future blog post.

I do want to explain something here about layout though:

Does this picture look awkward? It seems like the coffee had some bad experience in Photoshop! It seems like someone tried to merge these coffees into each other, but the cup containers’ start and ends got messed up. In Html, this is very important: you cannot have a situation like this:

These are allowed. Remember – HTML is all about layout. You want to define what goes into what – coffee goes into the coffeecup, coffeebeans could go into the cup for the photo, but also into the coffee grinder. Now that you understand the basics of HTML layout, you’re ready to go make another delicious cup of coffee.

I have recently been helping a friend of mine with learning the basics of code. I think the main problem recently has been the issue of where to start. Let’s be honest – coding is difficult to learn. On face value it looks like quick magic – yet the people that think this is magic loves to use the final product. As long as it works, they are happy.

My friend I am teaching has a (graphic) design background, as do I. There’s a few things in the thinking that hinders and helps us to come to a point of understanding.

Just a friendly note – there’s no single interpretation of these job titles, and I am explaining it in my experience.

Graphic design thinking vs front end HTML designer thinking

Graphic design thinking is an iterative explorational thinking. Think of it like loads of coffees – like LOADS of coffees

Graphic designers tend to think about things like this: if one solution is not working, scrap everything and start over. It’s similar to making coffee – if they tried the espresso,, but they cannot seem to get it right, maybe the latte will do. Both of them will give the same caffeine outcome, right? This way of thinking is important in doing general design. You sometimes need to explore, until you find a few solutions to show to the client. On the original solution, they will then start building the brand identity, corporate identity and brand applications.

Front end developers look at it a bit different –

A web designer understands the limitations of the web browser (they understand HTML and CSS – some layout coding). They are the people bridging the gap between the graphic designer and the developer. They understand that the web is simply the cup in which the coffee goes. The flavour and colour of the coffee might be different, but it’s still coffee. The process that web designers work is a lot more step-driven. Think of it like making coffee. They understand what is needed, and have a formula to get the desired layout – even if the layout is different everytime.

Web designers need to understand how web layout works.

To move from graphic design to web design, there’s a few concepts you want to explore. In my next blog post, I will look into coffee and coding structures – Specifically Html and Css structures.

I recently went to the developer usergroup at Microsoft in Bryanston, Johannesburg. Joshua Lewis (twitter account here, blog here). He was talking about a model in which we think about how to improve a system that is working. Continue reading →

Defining open source

…denoting software for which the original source code is made freely available and may be redistributed and modified.

The idea here is that the source code is open, and anyone can go in and change it, or look what is going on inside. It DOESN’T mean free though, but many are free,

Open source concerns

Some of the concerns from the dev community has been things like:

we are telling students from universities to write code and give it away for free – thus we are giving away jobs and intelectual property.

But I want to do such a simple task, and now i need to reinvent the wheel.

But i need that component

And this is where the issue kicks in. The problem is that we ‘need’ to get that thing. And it is free when i hack it. Or, on the other hand, the component with the sourcecode is available for ‘free’ online.

It all sounds good and well, but we should not forget who owns the code, or what license if comes with. There has been quite a few cases where we have seen we need to be exceptionally careful on what code we use where.

As mentioned by slashdata.co:

n the Sitecom case (2004) Welte identified his own source code in the binaries for Sitecom´s Network routers, which Welte had licensed under the GNU GPL v2.0 but Sitecom had not made the source code available or referenced the GNU GPL v2.0, both of which are a requirements of the License. The District Court of Munich granted Welte an injunction against Sitecom Deutschland GmbH whereby Sitecom was prohibited to distribute the products, until they were compliant with the GPL terms. Sitecom appealed but lost and posted the terms for GPL on their Web FAQ for the router.

Some cases were reported where companies had to open source ALL their code for violating the terms and conditions of the source code!

Here are some information on the most common licenses:

A summary of some licenses

GNU General Public License GNU General Public License

Copy it as many times as you like, on as many machines as you like

If you want to SELL your software, you need to give the clients a copy of the license, saying they can find the open source piece somewhere else for free.

If you modify the open source code, go ahead! BUT the code needs to be RELEASED UNDER THE SAME LICENSE

An example would be if we use a dropdown with this license, that we give clients a link to the license, and tell them they are able to get the dropdown somewhere else for free – but obviously our software is not ALL free! But hold on, you also need to open source your code here! So be careful if you use a control code with this license.

GNU LESSER GENERAL PUBLIC LICENSE

This license is like the previous one, but allows people to use these libraries in proprietary

With this license you are able to use your dropdown comercially and in proprietary software… remember to let your client know that you are using it and give them the license (even if it is through a link)!

BSD

You can only attribute the contributers by explicit permission

The BSD license is similar to the GPL, but you need to make sure that the copyright notices are still in the final product.

MIT Licenses

Sell it, rent it, sub-license it, or do whatever with it

Change and modify it

Include the copyright license agreement of the MIT license

More reading

I recently went to the developer usergroup at Microsoft in Bryanston, Johannesburg. Joshua Lewis (twitter account here, blog here). He was talking about a model in which we think about how to improve a system that is working. Hold on, if the thing is working, why do we need to improve it?

I personally see how behaviour driven development can help in making developers not do unecessary things the client or business do not require.

Defining the outcomes

The question is actually, is it working as expected?

The main question on this is: What do we expect?

What is it suppose to do?

Sometimes nobody actually knows how the thing should work in the first place.

It becomes important in pinning down what exactly this is. Once you know what the system should be doing, we can look at outcomes – what we expect.

An example:

I am currently busy with a a piece of code that needs the user to type in information. This is then saved and used as a contract of sorts between the parties involved.

I need to consider the following outcomes:

The user’s information is saved

The user is able to retrieve the information

Defining the process

The system can be seen as something like this:

Interaction > System > desired output

Meaning: I do something, the system does something, then i get a result.

An example:

The user clicks to see an existing contract > insert magic here > The user is able to retrieve the information

Other factors

But it is never this simple, right? Sometimes we have other factors that could play a role. One of these is the state of the software. This means that the system might react differently depending on what it is busy with in some way.

An example:

A great example of this would be logged in permissions – someone is only able to see/edit/change/delete certain things at certain times. Yet this does complicate the scenario a bit, but following this model, we should have a good overview of all the things that our system needs to cover.

Scenario Name

State

Interaction

Outcome

The user clicks the save button

Have permission

Attempts to save

The user’s information is saved

The user clicks the save button

Doesnt have full permission

Attempts to save

Error

The user clicks to see an existing contrac

Have permission

Attempts to get information

The user clicks to see an existing contract

Have limited permissions

Attempts to get information

User can see only certain areas that they have access to – these needs to be specified and used as new inputs here

The user clicks to see an existing contract

Doesnt have permission

Attempts to get information

Error, redirects to homepage

The user clicks to see an existing contract

Have full permission

Attempts to get information

Sees everything

The user sees only things he has access to

The user logs in and goes to the page to setup the contract > insert magic here > The user sees only things he has access to