Design, Geek stuff, LaTeX, Tutorials

Creating UML Sequence Diagrams with TikZ in LaTeX

I’ve been working on my LaTeX skills for some time. The goal is to move towards an all-latex solution for writing research papers, slide sets and other documents. I’m almost there. An important goal was to be able to create all sorts of figures within LaTeX. (Well, originally, the goal was to use open source softwares to create them but it turns out that LaTeX is really good at this stuff.) The package that I’m using for graphics creation is TikZ. Here we’ll cover how we can create sequence diagrams using TikZ and a plugin package.

Here’s what we’re planning on creating.

Sequence Diagram using TikZ (click to enlarge)

Continue reading “Creating UML Sequence Diagrams with TikZ in LaTeX”

Design, resources, Tutorials

How to Create a Beamer Template — A Newbie’s Tutorial

I started switching full-time to Ubuntu (once again) a couple of weeks ago. Turns out, it’s in much better condition than when I last tried it. Anyway, one of the problems was finding a replacement for Powerpoint. I hate creating presentations for classes — in fact, I think they’re counter-productive — but I have no choice for the moment. So, I decided to give LibreOffice Impress a chance. That was an hour of my life down the drain. Finally, I returned to beamer. Of course, I had to write my own theme because I couldn’t use the same theme used by all the rest of the world. To cut this long and boring story short, I tried very hard to find a tutorial on writing beamer themes, couldn’t do so, learned it through experiment and decided to write the tutorial myself. Here is that tutorial.

Continue reading “How to Create a Beamer Template — A Newbie’s Tutorial”

Design, Geek stuff

Site Re-design

New Site Design

Last time I did a custom re-design for my site was way back during my blogspot time. That was in 2006 — five years have passed but I still like the design. When I moved to, I didn’t have a way of creating my own design so I stuck with the best design I could find. I moved to my own host here at CSRDU last year but didn’t really feel the need to create a custom design. The result, even with the great theming mechanism provided by WordPress, I never wrote a custom theme for my site. I always stuck with existing freely-available themes that always left me wanting more in one department or another. Either the typography wasn’t up to par or I didn’t like the comments layout. So, I always had to settle with whatever I could find.

That changed a couple of days ago when I came across a typography post on some blog which inspired me to begin my own wordpress theme. I had one clear goal in mind — improve readability. People come to my site mostly to read the tutorials. It’s not fair if I give text secondary importance focusing on the layout. So, I started customizing the sandbox wordpress theme. It has the cleanest markup and I was able to make all the changes simply through a custom CSS. I went with a fairly large serif font (Georgia) for the content with a sans-serif (Open Sans) font coming from Google Webfonts for the post titles. I also have a slight text shadow effect but it wont’ be visible if you’re using IE. There’s only around 5 images in the whole theme plus two fonts. So, the overall result is a fairly lean page with clear fonts and layout.

As always, all comments and criticism is most welcome.


Web Typography

An important but neglected aspect of designing for the web — and in many places, for print — is typography. It’s really important part of presentation. Here’s an presentation describing typography for web. It has audio/transcript of the talk in the conference too.
Web Typography Sucks | Slides and notes from SxSW 2007

Also, here’s a nice article giving brief tips on getting your type right.

5 Simple Steps to Better Typography

Articles, Design, Tutorials, Typography, Web

CSS Layout

I wrote this article back when I was learning to cope with CSS layout. It’s not the best one around but it’s certainly the simplest. It assumes you’ve been working with CSS for font styles and colours and are comfortable with designing layouts using tables. I uploaded it on my old site but that site is no longer there, so this is an update post.

Title: CSS Layout

Tables are a powerful way of creating complex page layouts. That’s why many people simply refuse to let them go. Now, CSS designs have come a long way and have the same sort of power. Let go of your tables and come see how powerful CSS has become. The main problem I faced when I started learning CSS designs was how to get some of those DIVs floating to the right position while still keeping others in their place. HTML tables made it so easy but they have their drawbacks. I decided to redo my weblog template and write a small article in the meantime. There are a lot of CSS tutorials out there. I’m not going to go into the details of CSS. I’ll just take a design and implement it with precise values to show you just how it’s done. Having said that, be forewarned, this tutorial is not for the faint of heart.

Source in .zip