Wahid bin Ahsan

When you get back – get back. Ignore each one who holds you back. Get back.

SUST, HSTU is on hold since February. KUET is looking up a safer date, BRUR is locked up with VC crisis. Looks like these so called political creatures have more important things to teach the students for the price of human blood than to let them learn UX for free – “Doom a Nation in six months for dummies”?

Want to save the country? Do not react, do not share anything. Do not let them trigger our emotions. This is the only way we can prevent those microscopic political organisms from entering into our body. Joy Human

If something bad happens to Bangladesh’s ready-made garments sector – I would really want to take the maximum blame upon ourselves. Most of us are liars and we fake our capability, capacity and sense of responsibility to the buyers. We’ve been doing a lot, and paying extremely big price for that. Now what? Blame the owners, blame the agents, blame the engineers, blame architects, blame police, blame army, blame political parties, blame doctors – now who are you going to blame when your child’s school will collapse and you cannot recognize your own face because its rotten – blame teachers?

Ya, I know it’s big. Someone has to take bigger than your biggest. Why can’t you?

I know people who actually have cut down their blogging hours, they don’t maintain their personal blogs the way they used to do.  So why do they did that? Is this because they are not feeling like doing it that much anymore? Question is what did they used to do in or with blogs? They wrote about things which they had have found in their research. They shared their experience of their work with people, and the blog readers used to leave comments as a reaction to what the blogger wrote about.

Enough talk – let’s find out what happened with them? Nothing happened them and they did gone anywhere, and they do exist here on the web, and keeping the habit of writing by updating status, posting photos, and sharing links of useful resources more often than they used to do in their personal blogs. In blogs, they would write huge as they needed to get hold of all knowledge and resources in one place to make the post good, helpful, and complete. So they needed that time to put things together.

Now that they are doing research, and they are doing that mostly on the web, they need to visit websites. If they think that resource is informative or inspiring, they just share that on social networks like Facebook, LinkedIn, or Google+. Sometime, while doing that they include their own thoughts and findings, and they get instant reaction from authentic people in real-time as the readers also go through the resource. The bloggers begin to love this process of group research and collective thought sharing in such a smooth way with so less of effort, and they keep doing that.

Concept of blogging is changing.

I do not intend to perform a promotion of advantages of social networks in our lives. It is the “Why” behind our actions, reactions, motivations, and eventually the “How” things become part of our lives.

Most important factor of a great design that actually works in people’s brain as it should be is how the user gets ultimate benefit of the product not only by using it, but also become used to use it. Making someone used to is the easier part of the story as the user does that by themselves for us. Harder thing is to make them work harder on that!

First thing first – there is no illusion. So to make you understand that I will defend and support the very statement that illusion doesn’t exist; if that did not, confusion does. What do you think?

Microsoft is better than anything else when it comes to build rich user experience. Whereas, Mr. Steve Jobs was putting together his brilliant secrets to success stories that spread to population with the knowledge to penetrate in the brains of humans, thus – ignite, revolution. They believe these are truths, and struggle to understand the reason why great numbers of people, including them, use Google products at such a higher rate on a regular basis. On the other side – Adobe develop software to build rich user experience element. What do stock performance statistics of those companies really mean to the regular people like you and I is not properly understood.

UX specialists  identity who is in the mood to fall in love with the particular brand, struggle to make them believe that they are being delivered the same quality of work with the fractions of marketing money of those. If not, the experts should be in a need to present their own pieces of ideas to induce further enforcement of power to the inception to feel and realize things, and deliberately understand, and  believe something they do not believe by their their own selves in the reality where illusion does not exist, but confusion and satisfaction do.

In our first and second post of CSS Article Box series,  we tried to figure out a CSS Article Box that can be put on a homepage or any parent page of a site.

Did that help you anyways? I knew it was boring!

Let’s go straight to the buffet table where awaits a delicious article template with social sharing widget by sharethis.com.

First thing, first!

The Markup

<div class="story-box">
<div class="inner-wrapper">
<div class="storybox-text"><div>
<div>
<div>
<h1>This is our Heading of the Story!</h1>
<h2>We may want to put up a second heading like this</h2>
<div>Wrote <em>A CSS Expert</em> on <em>24 August 2011</em></div>
<p><img src="images/image-original.jpg" alt="A story box image" /><strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Mauris lacinia tortor at dolor luctus ac imperdiet mauris placerat. <a href="" title="Maecenas">Maecenas</a> a luctus magna. Aenean et lorem magna, sed malesuada quam. Quisque commodo lacinia lobortis. Fusce laoreet, arcu in feugiat fermentum, dui leo dapibus nisi, at tempor quam libero in est. Nam quis purus libero. Donec vel augue nec ligula posuere sollicitudin. Vestibulum tincidunt lacinia erat at placerat. Maecenas molestie urna ut enim ultrices vitae <a href="" title="lobortis">lobortis</a> ante dignissim. Sed et elit sit amet dui suscipit mattis. Fusce sit amet augue nulla, at volutpat ipsum. Cras sed mauris ac augue tristique mattis. Duis eget lacus nec libero sollicitudin sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis porta elit metus, sit amet tempus massa. <em>Duis vestibulum tellus</em> id felis semper mollis. Sed vestibulum odio et urna egestas ut gravida lorem semper. Pellentesque at mattis magna. Ut a urna nibh, at pretium tortor. Vestibulum sapien tellus, varius vel rutrum ut, hendrerit nec sapien. Praesent at dui vitae metus ultricies mollis ac vel arcu. Pellentesque congue fringilla risus, in pharetra tellus congue ut. Nunc vel leo mauris. Cras ornare porttitor nisi non pellentesque. Proin bibendum neque sit amet lectus dignissim sed ornare ligula elementum. Donec sed massa est. </p>
</div>
<span  class='st_twitter_hcount' displayText='Tweet'></span><span  class='st_facebook_hcount' displayText='Facebook'></span><span  class='st_sharethis_hcount' displayText='ShareThis'></span><span  class='st_fblike_hcount' ></span><span  class='st_plusone_hcount' ></span></div>
</div><br class="heading" />

The CSS

<div>
<div>
<div>body {
font-family: 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
}
.story-box {
width:640px;
background-color:#fff;
border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
overflow: auto;
width: 640px;
border: 2px solid #B2B2AA;
}
.storybox-image {
float: left;
margin-bottom: 6px;
margin-right: 10px;
width: 252px;
}
.storybox-text {
float:left;
font-size:12px;
padding-bottom: 10px;
}
.story-box a {
color: #5F6339;
}
.story-box a:hover {
}
.read-more {
margin-bottom:10px;
}
.inner-wrapper {
padding:20px;
}
.heading {
font-size:20px;
}
.heading-info {
margin-top: 4px;
}
.social-share {
padding: 10px 0;
}
.story-box h1 {
color:#709133;
font-size: 40px;
font-weight: normal;
margin: 0;
padding: 0;
}
.story-box h2 {
font-weight: normal;
margin: 0;
padding: 0;
}

We’ll talk, and do  more on CSS based article presentations later. See you soon!

Hi There! We worked out an Article Box on CSS Article Box – Part 1 of this series, let’s optimize it a more here.

Missed the first post? You did the right thing! Let’s move on with the optimized one

This is how the first one looked

And, the code’s you are going to download for is this
[Optimized, detailed, rounded corners]

Looking good? Well, you can make it better!

The CSS

body {
font-family:Arial, Helvetica, sans-serif;
}
.story-box {
width:640px;
height:300px;
background-color:#f3f3f3;
border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
}
.storybox-image {
width:200px;
margin-right:20px;
float:left;
}
.storybox-text {
width:380px;
float:left;
font-size:12px;
}
.story-box a {
color: #5F6339;
}
.story-box a:hover {
}
.read-more {
}
.inner-wrapper {
padding:20px;
}
.heading {
font-size:20px;
}
.heading-info {
margin-top: 4px;
}

The Makrkup

<div>
<div> <img src="images/image.jpg" width="200" height="150" alt="a story box image" />
<div>
<div>This is our heading of the story</div>
<div>Wrote <em>A CSS Expert</em> on <em>24 August 2011</em></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia tortor at dolor luctus ac imperdiet mauris placerat. Maecenas a luctus magna. Aenean et lorem magna, sed malesuada quam. Quisque commodo lacinia lobortis. Fusce laoreet, arcu in feugiat fermentum, dui leo dapibus nisi, at tempor quam libero in est. Nam quis purus libero. Donec vel augue nec ligula posuere sollicitudin. Vestibulum tincidunt lacinia erat at placerat. Maecenas molestie urna ut enim ultrices vitae lobortis ante dignissim. Sed et elit sit amet dui suscipit mattis. Fusce sit amet augue nulla, at volutpat ipsum. Cras sed mauris ac augue tristique mattis. Duis eget lacus nec libero sollicitudin sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<a href=""> Read full Story</a> </div>
</div>

Let’s make it short with a download button

You might have been wondering what’s wrong with this guy writing CSS tutorial where thousands are already there on the web! Yes, there are loads of them, and there should be more! Right?

Let’s straighten our CSS learning curves with a few series of workouts! I will try to post on a regular basis so there is a flow. Please don’t hesitate to ask me any questions, as I don’t hesitate talking.

So, what does make your feel that you know CSS?

You have an image, and some text. You need to create an box where your image and text fits in like this:

The CSS

body {
font-family:Arial, Helvetica, sans-serif;
}
.story-box {
width:640px;
height:300px;
background-color:#f3f3f3;
}
.storybox-image {
width:200px;
margin-right:20px;
float:left;
}
.storybox-text {
width:380px;
float:left;
font-size:12px;
}
.inner-wrapper {
padding:20px;
}
.heading {
font-size:20px;
margin-bottom:20px;
}

The Makrkup

<div class="story-box">
<div class="inner-wrapper"> <img src="images/image.jpg" width="200" height="150" alt="a story box image" class="storybox-image" />
<div class="storybox-text">
<div class="heading">This is our heading of the story</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia tortor at dolor luctus ac imperdiet mauris placerat. Maecenas a luctus magna. Aenean et lorem magna, sed malesuada quam. Quisque commodo lacinia lobortis. Fusce laoreet, arcu in feugiat fermentum, dui leo dapibus nisi, at tempor quam libero in est. Nam quis purus libero. Donec vel augue nec ligula posuere sollicitudin. Vestibulum tincidunt lacinia erat at placerat. Maecenas molestie urna ut enim ultrices vitae lobortis ante dignissim. Sed et elit sit amet dui suscipit mattis. Fusce sit amet augue nulla, at volutpat ipsum. Cras sed mauris ac augue tristique mattis. Duis eget lacus nec libero sollicitudin sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
</div>

Now, download the source codes and play around!