HTML: special entity codes

Tweet

How would you write β in your web page? Can you do it? And this †?

If your web page is mainly in one language, you might need to add special characters some times. To do so, you need to use the special entity codes. The main reason why you should use them, is because - as usual - target browsers may get a little bit confused if a special character is found. That is why it is better to write entities than to write symbols directly. Your HTML code should always be written in ASCII, just to avoid strange results in your text.

CSS: float!

Tweet

The float property is not really new. It has been used a lot, especially in blogs and online magazine. The most common use is when we need to put an image in a container and make the text surround it. Like this:

Lorem ipsum dolor sit amet, imperdiet in massa risus ultricies, nulla neque commodo quisque, varius vitae odio, urna mi massa semper pellentesque faucibus turpis, a sodales sit. Nullam ut dui tincidunt dui sodales, et eget ultricies cras ac mauris, et in sollicitudin quis et cum lacinia. Eget quis platea est pretium magna vitae, rhoncus luctus nulla vehicula pretium explicabo, turpis placerat. In ut posuere magna tortor non architecto, nisl cras eu lacus curabitur cras mauris. 

I believe you have seen the above effect everywhere. It is actually very easy to achieve and in this short article, we will see how to do it.

ASP: FPDF MultiCell with multiple lines and positioning

Tweet

As described in another post (ASP: Create PDF with FPDF), FPDF allows to create PDF files dynamically. I described how to create text boxes using MultiCell. I assume you already know how to do it, and I believe you might have encountered a little problem with the cells positioning. Let me explain it.

The positioning

When we position a multicell, we use a code like:

pdf.SetXY 8,156
pdf.setfillcolor 197,198,200
pdf.MultiCell 40,4,"Hello!",0,0,1

The above snippet is taken from the aforementioned article. Basically we set the X and Y position of the multicell, the background colour and then we place the multicell using different parameters (width, height, text, border etc.)

jQuery: flexible text with FitText and BigText

Tweet

Following my posts about the new mobile generation and the consequent need to create web site compatible with mobile devices like tablets and smartphones, I would like to introduce two smart jQuery plug-ins that will handle font size.
FitText can be used with fluid layouts and it can scale headlines that fill the width of a parent element.

Web Design: the golden ratio

Tweet

If you are a fan of Lost (the tv series) you may know everything about Fibonacci and his sequence. You may have explored everything about the golden ratio and its relation with things in nature. You may now wonder what has the golden ratio to do with and how it is related to web design. Well, I won't get into a complete mathematical explanation of the golden ratio because it is not the reason why I wrote this post. The main point here is that the golden ratio has been and still is used and applied to achieve rational proportions and create pleasing aesthetics. The golden ratio has been and is used in architecture, painting, music and industrial design, you can find it in nature, and it has been used even in finance. With that in mind, it is easy to think that we can apply it to web design, in order to achieve pleasant layouts with the help of maths (because sometimes maths is beautiful).

Web Design: fluid, fixed or mixed layout?

Tweet

When starting a new web site or application, the very first thing that I think about is if I will use a fluid, a fixed or a mixed layout. It's always been a debated issue: there are experienced web designers who think that a fixed layout is best, others who think that a fluid one has a more professional look, and the debate goes on. I don't know what you think - and I'd really like to, so please use the comment section below after reading this post - but I would like to share my thoughts about it, in any case.

The web safe area

There are different pros and cons about every single solution. And I believe there are very good articles around the web that explain them thoroughly. In my opinion, the main point is - to put it simply - understanding which is the layout that will be the best for any visitor. As you know, every single user might have a different browser and a different operating system. That means every one of them might experience a web site in a completely different way. Thus the web safe area comes into play: for each possible combination of browser and operating system, it is possible to determine which is the safe area to use in your web design. Designers Toolbox has a page which analyses every of those possible combinations, however let me summarise it for you in the following table:

jQuery: CSS manipulation

Tweet

In this very short article, we will see how to manipulate CSS properties using jQuery. The main reason why, we should consider jQuery to change applied CSS styles to an object, is because we can do it on the fly, and thus basically change the appearance of an object according to some predefined event.
I assume you know a little about jQuery and how to develop functions on events. We will just see jQuery css method which has two basic usage:
1) retrieve the property of an object;
2) change the property of an object.

What's a property?

The css method has a simple syntax:

$('selector').css('css-property-name');

With the above syntax, we can determine a property for a specific div:

$("#example").html($('#example').css('background-color'));

In the above example, we are retrieving the background-color value of a div with id = "example":

<div id="example" style="width:100px;height:100px;background:blue"></div>