Pythonthusiast Redesigned: New Logo and Bootstrap UI

 

http://pythonthusiast.pythonblogs.com/gallery/230/previews-med/logo.png

I never forget the enthusiasm thrilling I get, when reading "Tuntunan Praktis Pemrograman C++ by Tjendry Heriyanto" book with reading position depicted in the above image. It was the most thrilling experience I had, back in my intermediate school in 1997. Yeah, the good 'ol day


 

Actually, I started this week by creating an article about what makes programming in Python different through the eye of a Java programmer. But as I browse through the content of this site, I realize that this site still lack of a better way of navigating the site. It still is a LifeType blog. And the truth is, I never like the default navigation experience brought by a blog: the usual orderly post layout, category/tag list, calendar with count of published article and so on. So, I took the courage to do thing that I am most frightened of: designing a web. Yeah, I never assess myself as a great web designer. It always suck my brain out!

But thanks to Bootstrap (mostly its 12-grids system), the process is much more easier than I previously imagined. With plenty of resources there available in the internet, finally I can come up with a web design that is not as pathetic as I think I will come up with. And thought to share it, as I know designing is an entirely different beast than coding.

Let's have a look!

PS: Foreword warning, please be aware that there will be some PHP/Smarty tags scattered in this article

Where do we start?

As with my previous Flask Biography Application, I start the design process with the bootstrap starter template as seen below:

This is the easiest Bootstrap that you can come up with, but still convey its overall easiness and completeness in designing a web application interface

The easiest Bootstrap application that you can come up with, but still convey its overall easiness and completeness in designing a web application interface

 

You can compare this design with the current one in Pythonthusiast, that I only modify several elements, detailed in the subsections below.

Adding Logo

I had trouble actually, when trying to add image with text in navbar-brand element. In FireFox it's aligned as shown in this current design, while in Chrome the image and text got splitted into different lines. So, I simply create a new image that already filled with "Pythonthusiast" text. And here is the code:

 

1
2
3
4
5
6
7
8
9
<div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>        
  <a class="navbar-brand" href="{$url->blogLink()}"><img class="img-responsive" src="{$url->getTemplateFile("img/pythonthusiast.png")}"></img></a>        
    </div>

And if you wondering where do I get this cool logo, you can directly download MetroStudio from Syncfusion here. It's a desktop application that shipped with over 2500 metro style application, and a very effective icon editing studio. I will be greatly dependent on this tool for now on for all of my application icon needs.

Another things worth mentioning about this logo is, it really reminds me of the day when I first learning OOP paradigm using C++ (keyword: changing paradigm!).  It's an Indonesian book called  Tuntunan Praktis Pemrograman C++/Practical Guide to C++ Programming by Tjendry Heriyanto. I am not sure how, but back at that time, I was so thrilled that makes me unable to put down the book! And I read it in that particular reading position. Totally absorbed! It feels like reading comic book: you were really amazed and stunned by its graphical (or ideas) given.

I do have intention that you will also be absorbed to my tutorials/articles too! And I hope my intention are realized. Smile

Dropdown Menu

You can easily create dropdown for bootstrap navigation, with this code:

1
2
3
4
5
6
7
8
9
10
<div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">        
            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact Me<b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a title="Email" href="mailto:swdev.bali@gmail.com">Email</a></li>
                <li><a title="Github" href="https://github.com/pythonthusiast">Github</a></li>
                </ul>
            </li>                
    </ul>
</div>

It create this effective dropdown menu:

Bootstrap effective dropdown menu

Bootstrap effective dropdown menu

Search Input

You can use the following code, given by someone from StackOverflow page (sorry, I can't find the link!) 

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="col-sm-3 col-md-3 pull-right">
            <form class="navbar-form" role="search" method="get" action="{$url->getIndexUrl()}">
                <input type="hidden" name="op" value="Search" />
                <input type="hidden" name="blogId" value="{$blog->getId()}"/>   
                
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search" name="searchTerms" id="searchTerms"></input>
                    <div class="input-group-btn">
                        <button class="btn btn-success" type="submit"><span class="glyphicon glyphicon-search"></span></button>
                    </div>
                </div>
            </form>
        </div>

Below is the result, although I found it to be still having a glitch:

Search box in Bootstrap header, but still contains glitch

Search box in Bootstrap header, but still contains UI glitch (any help?)

 

 

Bootstrap Blog Template

After looking for bootstrap template specifically targeted toward blog design, I found this resource to be helpful.

A simple yet useful bootstrap template for blog

A simple yet useful bootstrap template for blog

You can see that I use its tags and comment element.

A Friendlier "Time Ago" Element

Do you see that in this blog post, you can see text like, "Last comment in about 6 hours ago" ? I use timeago jquery plugin that can be use freely from this github page. It gives reader a better bird eye view about the activity of articles in this blog.

Finally, A "Social Share" Element

I missed this important element in my previous web design. And finding the appropriate solution is not that trivial. At first, I stumble with 3rd party social share services like : ShareThis and AddThis. But those services tend to slow down the web loading a little bit: they will need several round trip to their own site to connect to its API (I think mostly finding share count number). As I don't need advance sharing feature, I think I just go with the simplest approach of displaying a social share button, linked to its specific share URL. I found this resource to be very helpful in implementing it. I modify it a bit to move the share buttons to be inside of a navbar dropdown box.

Collections of social share buttons!

Collections of social share buttons!

There is no magic in social sharing. The buttons is a hyperlinked to predefined URL for the given social services. Codes from its original source are shown below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!-- I got these buttons from simplesharebuttons.com -->
<div id="share-buttons">
 
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=http://www.simplesharebuttons.com" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" /></a>
 
<!-- Twitter -->
<a href="http://twitter.com/share?url=http://www.simplesharebuttons.com&text=Simple Share Buttons" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" /></a>
 
<!-- Google+ -->
<a href="https://plus.google.com/share?url=http://www.simplesharebuttons.com" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/google.png" alt="Google" /></a>
 
<!-- Digg -->
<a href="http://www.digg.com/submit?url=http://www.simplesharebuttons.com" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/diggit.png" alt="Digg" /></a>
 
<!-- Reddit -->
<a href="http://reddit.com/submit?url=http://www.simplesharebuttons.com&title=Simple Share Buttons" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/reddit.png" alt="Reddit" /></a>
 
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?mini=true&url=http://www.simplesharebuttons.com" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/linkedin.png" alt="LinkedIn" /></a>
 
<!-- Pinterest -->
<a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());"><img src="http://www.simplesharebuttons.com/images/somacro/pinterest.png" alt="Pinterest" /></a>
 
<!-- StumbleUpon-->
<a href="http://www.stumbleupon.com/submit?url=http://www.simplesharebuttons.com&title=Simple Share Buttons" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/stumbleupon.png" alt="StumbleUpon" /></a>
 
<!-- Email -->
<a href="mailto:?Subject=Simple Share Buttons&Body=I%20saw%20this%20and%20thought%20of%20you!%20 http://www.simplesharebuttons.com"><img src="http://www.simplesharebuttons.com/images/somacro/email.png" alt="Email" /></a>
 
</div>

You just have to modify its image and URL to point to your own page.

Conclusion

If you were wondering how to design your web application using Bootstrap, this article may give you some insight on how to do just that. There are more features I want to implement in this site, but at the given time, the current design is good enough. So, I think I will stay with this design a little longer, and continue with new article posts.

If you are interested with this site template, you can follow its Github repository here : pythonthusiast/zen.

Or download its latest zip here : pythonthusiast.zip. Mind you, that this is a LifeType template. But still, how Bootstrap was used in this template may help you in your own Python powered web application or regular HTML web site.

Stay tuned for my next articles!

 

 

 

 

 




Leave comments

authimage

Copyright(c) 2014 - PythonBlogs.com
By using this website, you signify your acceptance of Terms and Conditions and Privacy Policy
All rights reserved