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>

HTML5 & CSS3: compatibility issues

Tweet

In the past weeks, I have posted different articles about HTML5 and CSS3. In almost every one of them, we ended up describing the possible compatibility issues we might face implementing new features and solutions offered by the two standards. As a start, I would like to share some thoughts about the use of HTML5 and CSS3.

a) Do we really need them?  What I am saying is that we do not really want to use new features just because they are cool and they make us great web designers. We need to understand when new stuff really serves our purposes. If it’s only a matter of style – believe me – it is not worth it.
b) Are we ready for possible non standard solutions? In the past when HTML or CSS couldn’t help us with a specific effect, we looked for help with JavaScript. Today it is the same: Modernizr, CSS3 PIE or Selectivzr can really help us in dealing with compatibility issues. That might affect site speed and usability.
c) Are HTML5 and CSS3 the future? Well, this is difficult to answer. It is my personal opinion that they will be. It is decided – someway.
d) Are HTML5 and CSS3 really helping us? Before the (slow) introduction of the new standards, we were used to find alternative solutions (as said just before). HTML5 and CSS3 were conceived to help us in creating astonishing new web site in an easier way. With compatibility issues, we are actually back to square one: we need possibly more workarounds to ensure that – almost – every possible user will be able to use our web site the way it was meant to. That means more work just for possibly not necessary embellishments.

Blogger in draft and Windows Live Writer

Tweet

After the introduction of the new Blogger in draft, I would like to share my thoughts about it. While the new interface is quite interesting and complete there are a few things that are still not working as expected. At the same time there are few information on workarounds, tricks and tips. Personally I’ve contacted Google directly with my feedback and I will see what they will do about it.
What are the problems? Well, I’ve just noticed one thing that makes me quite unhappy: in the old Blogger in draft there was the possibility to directly edit the blog template through Design/Edit HTML. Now it seems that the feature is gone. I believe that’s a limitation I could accept for the moment, however most of the tricks and solution to Blogger issues are related to the direct edit of template. Are those solution now gone for good? We will see…
Another issue is related to post editing. And this is bad, specifically for a blog like The Web Thought. Basically inserting snippets example, I use html tags like:

<div>this is a div</div>

The above box is what I use to highlight code portions. Usually I write the post using the “compose” view. After writing all the post, I check the “HTML” view for small problems. With the new Blogger in draft, every time you switch between the two views, the text formatting gets messed up. In addition to that, if you insert an HTML tag (like a did above), the tag is interpreted. Just to replicate the issue, if you insert <zzz> in the post body and switch to HTM view, you will see the text interpreted as <zzz></zzz> and obviously gone in the “compose” view.
That is a big problem, as I write a lot of code.

Possible solutions

We have to wait and see if Google finds a solution to the issue. I definitely can’t use the post editor that way. It’s an awful waste of time, and frankly  I have to check the text formatting more than once, just to be sure you see the post the way I wanted. And talking about it, I do apologize if the recent post are not properly formatted.
Another viable solution is to use Windows Live Writer.  The Microsoft software lets you compose post in a simple and effective way, it can connect to the blog, it retrieves old posts for editing, and it has everything you might need for post publishing. I actually have written this very article with it. The first impression is positive, but I would like to test it further and see how it goes.

Another solution is to remove the check near the "Make Blogger in Draft my defaul" and get back to  http://blogger.com/home
 
I will keep you posted on new findings.

CSS: @media (are you ready for the new mobile users generation?)

Tweet

As said before, 2011 and 2012 will be the tablets years. Recently we have witnessed the wide spread of new generation devices increasingly used to surf the web. Because of that, web developers have been aware of possible restyling of old web sites needed to satisfy the new mobile users. It's really a matter of determining your audience. Is people visiting your site using mobile devices? Are you really interested in developing a new look for your site just to satisfy that portion of your audience?
That is quite an interesting point. I suspect that before jumping to conclusions, we need to analyse our audience, know who they are, what they want, what they expect from our web site, and how they want to browse the web site. Basically we need to know if we really need to make those changes to the structure of the site and if it's worth working on it, after all.

At-Rules

I don't know if you already have used CSS at-rules. Basically they enclose a set of CSS rules and apply them to a specific item. We have talked about one of them in the @font-face article. The at-rules are quite interesting and become handy when dealing with different medias. The usual scenario was when we needed to create a specific style for printing pages. However the @media rule can be used to style pages according to different situation.

Is the web a good resource for web developers?

Tweet

I know that the question has been raised in the past a lot of times. The number of web sites claiming to help web developers and designers is incredible. When we search for help for example with Google, we are undoubtedly easily misled and the answer we think will solve our initial issue, might end up being completely wrong. In fact, if the provided solution is not working at all, we can immediately understand it was wrong. However, if it works, we are utterly convinced that the wonderful snippet we have found is pure gold. We happily insert it in our web page and we think we have learnt something new. That's not always true.

RSS Feed: How to create custom feeds (part 2)

Tweet

In the previous part we have introduced the basics for the creation of custom RSS feeds. We ended the article creating the xml object and we were ready to write down the feed itself. Please, before going on here, see the first article if you haven't, otherwise you won't understand the following explanations.

The  Feed

First of all, we start creating the head of the feed. Just for explanatory purpose, let me say that a feed needs some basic elements:
1) a version;
2) a title;
3) a ttl (time to live);
4) a language;
5) if you like, a copyright statement;
6) a publishing date.

RSS Feed: How to create custom feeds (part 1)

Tweet

This is the first of a two parts article about creating custom RSS feeds. It might be a complex task in terms of coding, however the logic behind it is not that difficult to understand. I decided to divide it in two, so that I can explain it in depth.

Some assumptions must be made before starting with the creation of the page.
1) We have a database from which we fetch data for the feed. We assume the resulting recordset is called RS (as we always do in our examples).
2) In the root directory of our web site, there's a folder called "rss" where we are going to write the feed (xml file). The folder must have read and write permissions.
3) The page used to create the feed is an asp page with VBScript as programming language.
4) The feed is generated by opening the above asp page. Thus the creation of the feed is not automatic. Anyway, it could be integrated at the end of a data inserting process, so that every time a new item is inserted or updated in the database, the asp page is run (and the related xml file created).