stoimen.com/blog
web developing
Archive for the ‘web development’ Category
HTML Tag Semantics. STRONG vs. B!
Author: Stoimen11 Mar
Do You Use LABEL?
Have you ever mentioned the existence of the LABEL tag? Have you ever used it? I guess the majority of us don’t. Let’s take a look of the following chunk of code:
<label>username:</label> <input type="text" name="username" />
It looks familiar to every web developer, but the most common usage in web forms is:
<div>username:</div>
or
<span>username:</span>
How Looks a LABEL Tag?
In fact if you use LABEL for the form instead of DIV or SPAN you’ll get the exactly same result as layout, beside that most common usage is a DIV or SPAN in place of the forgotten LABEL?! Why is that?
Can you see the difference between LABEL and SPAN?
For me the usage of DIV has become critically enormous. It may sound strange that there is a debate about the usage of one or another HTML tag, but don’t you think every little text label in a web project is surrounded by a DIV. Actually that makes clear that if you’d like to be semantically correct, than you should use LABEL.
The funny thing is that almost every project is loading its labels in a PHP array or object or whatever and there they are called “Labels”, but when it comes to HTML they are put into a DIVs.
Why Semantics Matters?
In fact this is important because this is really good for web robots. If this is not important for the human eye it is for a machine “eye”. That’s why there are two tags for bold text.
STRONG vs. B
You can see that most of the browsers display both tags exactly the same by default.
Why’s that? Because STRONG is semantically more important than <B>.
So if you want to make a text simply looking bold, wrap it in <B>, but if you want to make it important both for the human eye and for the machines, than use STRONG.
Source: complete demo.
Change the Viewport, be Ready for the iPhone!
Author: Stoimen10 Mar
Sites for mobile
Have you ever noticed that once you start designing a site for mobile, as iPhone and Nexus One from Google are, the site is looking really ugly! These two devices in particular, as may other using Opera Mini for instance, scale the site, because only than you can view the entire layout and than zoom to a particular part of the page.
This is nice because news sites as cnn.com or lemonde.fr are full of text & image information and once zoomed in they fit the screen – very nice feature of the browsers. However if you’d like to design a site for mobile the bad part comes here. Yeah you know how to detect the browser, that was a topic of one of my previous posts, but even than you fully functional, but less decorated site is scaled again and looks more ugly than the full version of the site.
How to make a site visible in mobile …
Look at the http://mobile.twitter.com – the problem is that if you open this link with a normal browser, not from mobile, you’ll get redirected to the twitter.com and you cannot see the difference.
You can see how it’s made on …
The digg’s mobile version. Look at http://m.digg.com. This time you can see the different approach just by looking at the source code. Pay attention to meta tag in the head – it simply says – “don’t scale”. Nice thing to notice!
Don’t scale my site anymore:
<html> <head> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> </head> ... </html>
Video sites must use … mp4 and only mp4!
Author: Stoimen5 Mar
H.264
Yes it may sound strange, but now with the upcoming HTML5 features every browser again is playing its own game. Firefox and Opera support only OGG Theora, Chrome and Safari only MP4 and what about IE .. it doesn’t support anything. Than why should we convert to mp4 with h.264 codec?
Because everybody is playing flash
And that’s again very sad but at least the flash players are playing mp4 with this encoding, which is good because this file will be playable under most of the mobiles. And if you have a large video site to support why don’t you convert to mp4 and play it with a Flash Player and give the opportunity to play mp4 on mobile.
Only one file under the sky
Thus you gain to keep only one file – playable under every device?
YouTube and FLV
Now I wonder why YouTube have both FLV and MP4 formats?
Of course if you’d like to be perfect …
Convert every video to MP4, FLV and OGG, but that means 3 files for every video?!
Does Firefox play mp4 h.264 within the HTML5 video tag?
Author: Stoimen4 Mar
As Firefox has declared it will play only open formats within the HTML5 video tag support. But however is there any way to play video with the mp4 h.264 codec under FF with no plugin support?
That is the question.
Fast way to manage the Arabic version of a web form
Author: Stoimen2 Mar
Left to Right vs. Right to Left
As you may know the Arabic language is written from right to left in reverse of Latin and Cyrillic languages and in the web that means you must change the look of the page for that subset of users coming to your site.
One of the main problems are with web forms. Usually we use something like label:input pairs:
label: <input type="text" />
but when it comes to Arabic version it should be turned into:
<input type="text" /> : label
and that’s quite tricky!
The easiest way for me!
Well I simply wrap that chunk of code into a table. That helps me manage the direction with the CSS direction:rtl like so:
1 2 3 4 5 6 | <table> <tr> <td>Label:</td> <td><input type="text" /></td> </tr> </table> |
When it comes to the Arabic version it can be translated with the simple:
1 2 3 4 5 6 | <table style="direction:rtl;"> <tr> <td>Label:</td> <td><input type="text" /></td> </tr> </table> |
