Today I was cruising my twitter feed and it dawned on me that the next step in the evolution of the whole micro-blogging stream, is substreams.

Let me explain – twitter is an all or nothing deal, when you subscribe to someones twitter feed you see everything they are publishing. As of right now there is no way to filter the information easily. I know you can create a specific search on the client side of things, but I’m talking of this kind of functionality on the server side. Users can also create different twitter accounts for the different kinds of information you want to post. A great example would be TravelAlerts which is a travel deals website that has multiple twitter accounts for different cities in Canada; one for Toronto, one for Montreal and so on.

What if there was a way to create 1 twitter account – TravelAlerts, then in there was the ability to subscribe to multiple substreams users can Follow, TravelAlters[Toronto], TravelAlerts[Montreal]. I would imagine that you could subscribe to either the full stream from TravelAlters if you’d want to see all tweets from all their substreams, or alternatively you can pick and choose which substream to subscribe in a-la cart style.

The admin wouldn’t be very hard at all either, as your tweeting I would imagine a drop down to select which substream you’d want to target the tweet, if you don’t select one then it would just be a global tweet all main stream and substream subscribers would get. For example I want to announce there is a contest coming up for TravelAletrs and it is Canada wide, and I want to reach all my followers, not just Toronto, Montreal etc followers. I would write the tweet with no specific substream target, and because it has no target, the tweet would go out to everyone, regardless of their substream following. With this model it would be very easy to get the attention of all followers, while maintaining 1 consistent account and targeting multiple users specific needs as well.

This seems to me like the next step for twitter, and I am sure many people would love to cut down the amount of accounts they would need to maintain. On top of that, you can have multiple substreams but still have the ability to call out to all of them with global messages. Some examples of services that could use this substream idea would be GameSpot [Ps3, Xbox, Reviews etc], Real Estate [250-300k in Toronto, 300-450k in Montreal etc..] and BestBuy [TV, Music etc..], they could leverage the multiple streams to target the people they want, on top of that you could get some Return On Investment on the data returned – seeing how many people subscribe to a certain substream, and catering ads to those people.

This week – Reset!

A lot of the time, Blend will set margins and odd settings automatically when you are doing edits on properties (width, height) or when you are dragging objects around the Artboard. A quick and easy way to see what’s going on is by looking at the little square that is next to every property.

A blank square will denote that there is nothing set for that property, a white square means there is a property set, an orange square means there is a Binding set, and a green square means there is a Local Resource set.

Any who, an easy way to get rid of that pesky setting is to simply do a Reset, we can do that by clicking on the white square, and selecting Reset. It’s a good way to get rid of annoying margins, weird alignments, odd heights/widths and so on.

That about wraps it up, tune in next week for another crazy tip?

The Basics

Let’s start with the most common and basic CSS attributes, width and height. Once you assign a class to an element you are free to style it any way you want. We will be using this code snipet and styling it as examples.

1
2
3

<div class="test">
  <p>Hello</p>
</div>

You can now assign height and width values, like this. Take special note that after each attribute, we add a ; to tell the browser to move to the next attribute.

1
2
3
4

.test{
  width:200px;
  height:200px;
}

Which would look like. Take note I added a background color so you could see the dimensions of the <div>.

We can also apply different colors to text and backgrounds. When applying colors to backgrounds of fonts, you can use color names like Red, Blue, Green (the full list can be seen here), hex values (#000000, #FFFFFF) or the RGB value (rgb(0,0,0)). To recap, to change the color of a font, we use color, and to change the color of a background we use background-color. This is how it would look.

1
2
3
4

.test{
  color:Pink;
  background-color:Blue;
}

Which would look like this.

There are many font modifiers was have available to us as well. Here are a few.

• font-family – Defines a either a certain font (Times New Roman) or a font type (San-Serif)
• font-weight – Defines if the font will be bold or not.
• font-size – Defines the size of the font either in pixels(px), points(pt), multiply(em)

The CSS would be something like this.

1
2
3
4
5

.test{
  font-family:Georgia, "Times New Roman", Times, serif;
  font-size:24px;
  font-weight:bold;
}

And it would look like this.

Moving Forward

Now that you have a good footing on CSS syntax, lets step it up a notch and introduce the float. Firs we’ll take a little history lesson. Traditionally, if you ever wanted a 2 column layout done in HTML, you would have to resort the tables, which looked something like this.

1
2
3
4
5
6

<table width="100%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>

While it doesn’t look so bad now, tables are a nightmare and most importantly, they are not semantic. Why this is an issue is because tables were made for 1 thing, to display tabular information. This is a problem when Google or Yahoo are indexing your page, it thinks that your whole page is actually a table of information and treats it differently than it would if you have the information in a <div>. So how do we get around this? We use CSS of course.

First you must understand the difference between a Block Element and an Inline Element. A Block Element, like a <div>, is an element that will take up all available horizontal space. Lets take a look at an example. I’m going to use a <div> (Block Element) and a <span> (Inline Element). I’m going to apply a background-color to each one so you can really see what space they take up.

1
2
3
4

<div class="test4">
  <div>Block Div</div>
  <span>Inline Span</span>
</div>

With no styles applied, the defualt behavior of each element is as follows.

Do you see the difference? The Block Element fills up all the horizontal space it can, where the Inline Element only takes up the space its needs. So then I bet your asking yourself how do we make Block Elements sit next to each other horizontally? We use the magic of Floats. Unfortunately that will take a full tutorial. Stay tuned for the next one =).

So here’s the deal, I’ve been learning web development for a while now, picking up tidbits from all over the web, books and friends helping me out. Then I started thinking, the web has been so great for helping me, I feel like I should do the same, which is why I am writing the first of a long series or how to articles, tutorials and information. I’ll be covering everything sequentially, so first part will be something along the lines of intro to the web in general, HTML and CSS. The subsequent parts will cover things like advanced CSS, WordPress integration, PHP/MySQL, Javascript and more. Enough of this, lets get to it, after the jump!

I suppose the most logical place to start would be introducing the concept of HTML and CSS to you.

HTML

HTML is a markup language, not to be confused with actual coding. I’m going to assume that you know absolutely nothing about HTML and start from the very beginning. All HTML tags start with a <tag> and end with a </tag>, this for example would be valid markup.

1

<p>hello</p>

Here is a list of the most common tags:

• <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> – These are the most important to the least important header tags
• <p> – This is a paragraph tag, it is generally a good idea to put all your body text into one of these tags
• <a> – This is a link tag, use this to link to off site pages or in-site pages
• <div> – This is a container generally used to arrange content in an organized fashion

There are many more tags for many different uses, to see all of them described go here.

So now we have a basic idea of what HTML tags look like, now lets go through some of the theory that goes behind coding HTML. HTML is a very linear language, where the further down in the code you are, the further down in the page you should technically be. Lets take a look at how some typical HTML should look.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<head>
<title>Example 1</title>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/scripts/script.js"></script>
</head>
 
<html>
<body>
 
<div>
  <h1>Hi I'm a header</h1>
  <p>And I'm a paragraph of text</p>
</div>
 
</body>
</html>

Lets break it down, line by line. First we have the <head> tag. Anything put in between the opening <head> tag and closing </head> tag will NOT be rendered in your browser. The <head> tag is used to load in things that are needed to make your web page work, things like your CSS style sheet, and Javascript. It is also where you define the title of your page, descriptions and keywords which we will get to in a bit.

1

<head></head>

Now lets take a closer look at some of the items we can have in the head tag.
The <title> tag is used to define the title of the web page.

2

<title>Example 1</title>

The <link> tag is used to link to an external file. Notice in the <link> tag there is are “type” and “rel” identifiers. “Type” and “Rel” combined tell the browser how to handle the file it is linking to. In this instance we are linking to a CSS style sheet which literally styles the entire page.

3

<link href="/css/style.css" rel="stylesheet" type="text/css" />

This <script> tag is used to link to a Javascript file that contains code to modify your web page. We will discuss Javascript later on, but its good to know how to link to it properly. Notice again that we have a “type” identifier, to tell the browser how to handle the file.

4

<script type="text/javascript" src="/scripts/script.js"></script>

Next we have the <html> and <body> tags. These are ESSENTIAL for your web page to work. They tell the browser that the actual HTML code starts and stops!

6
7
8
9
10
11
12
13
14
15

<html>
<body>
 
<div>
  <h1>Hi I'm a header</h1>
  <p>And I'm a paragraph of text</p>
</div>
 
</body>
</html>

Next take a look at the <div> tag, its wrapping the <h1> and the<p> tags in a box.

9
10
11
12

<div>
  <h1>Hi I'm a header</h1>
  <p>And I'm a paragraph of text</p>
</div>

This is useful because you can think of HTML as a collection of boxes stacked one on top of another, and that way its very easy to move things around if they are sectioned off in their own little boxes.

CSS

Now lets move on to CSS, the reason the web looks so cool now-a-days. CSS stands for Cascading Style Sheet. CSS is basically a separate file that defines your HTML tags (remember – <h1>, <p> etc.). By default every tag has a style already applied to it, that can be useful but I generally don’t like this, so I use a style sheet reset, which re-defines every HTML tag to have no style at all. You can get that reset here.

Now that we have a completely clean slate lets stay learning what CSS does and how its suppose to be written. CSS is based on ‘Classes’. Classes are a way of targeting specific tags to be styled a certain way.

First lets take a look at how to include a CSS file in your web page. You must include a .css file in the head of your HTML page, and the link is relative to where the HTML page is. Take a look at the example below, the style.css file is located in a folder called css.

1
2
3
4

<head>
<title>Example 2</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

Now lets take a look at what a Class looks like.

5
6
7
8
9
10
11
12
13

<html>
<body>
 
<div class="header">
  <p>This is a paragraph</p>
</div>
 
</html>
</body>

And then in the CSS stylesheet, we define the Class like this.

1
2
3
4
5
6

.header {
  background-color:red;
  color:white;
  width:100px;
  height:40px;
}

Take special note of the period . before the Class Name, that tells the browser reading the CSS style sheet that what you’re designating is indeed a Class.

This is how our code would look in a browser.

You can pretty much do anything once you have assigned an element (<p class="text" > etc..) a Class, for the full specifications of what attributes you can give a Class, refer to the W3C Schools.

This concludes Part 1 of What I’ve learned about Web Development, in Part 2, I’ll be diving much more in depth about CSS, tricks and tips.

Cheers!