Tag Archives: html

jQuery: what about this.title?

javascript, micro tutorial, , , , , ,

In my last post I was talking about the short way to access the id attribute:

this.id;
this.attr('id'); // this is the same but slower

Beside the most important thing that this is the slower notation, you get also larger notation, which in JavaScript is really pain.

What’s interesting is that you can access almost every attribute of an element with that notation. Take a look at the following example:

<img src="image.jpg" title="test" />

and than

$('element').title

This is much faster and quite nice in place of

$('element').attr('title');

HTML Tag Semantics. STRONG vs. B!

web development, , , , , , , , , , , ,

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?

html tags. Label vs Span
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.

Bold vs Strong HTML tags

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!

micro tutorial, web development, , , , , , , , , , , , ,

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.

Twitter for mobile

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>

PHP if-else-endif Statements

PHP, , , , , , , , , , , , , , ,

PHP: if

A typical web developer knows exactly how a PHP if statement looks like:

   if ( expression ) {
      // if the expression was true proceed here
   } else {
      // there was a false expression
  }

HTML mess with PHP

When it comes to merge PHP and HTML the things are becoming ugly. Indeed most of the template systems as Smarty are improved and developed to overcome this issue, however when working with a native PHP code with no template system or with template system where the PHP code is allowed the things are really bad.

Let me show this in a breve example. Image you have to show different formatted HTML depending on a PHP expression. Something like that

<?php if (expression) { ?>
<div class="message">OK. Your registration is successful</div>
<?php } else { ?>
<div class="error">Something went wrong! Please try again later! </div>
<?php } ?>

Now you can see how difficult to maintain this code is when it doesn’t make use of only one code of HTML markup. Imaging you’ve to print differently formatted tables! Indeed the PHP curly brackets are different to follow.

PHP: the different IF syntax

So there is a PHP syntax that tries to help you manage this. You can write more human readable code like this:

<?php if ( expression ) : ?>
<div>message goes here</div>
<?php endif ?>

Thus you get the ENDIF instead of only one curly bracket. That’s indeed readable enough. In fact you can use this syntax with any conditional or loop statement in PHP:

<?php foreach($array as $key => $val) : ?>
<div class="message"><?php echo $val ?></div><br />
<?php endforeach ?>

To return in the previous example the code above should be transformed in that:

<?php if ( expression ) : ?>
<div class="message">some message here!</div>
<?php else : ?>
<div class="error">some error here!</div>
<?php endif ?>

HTML5 video support. Detecting, playing and progressive enhancement!

web development, , , , , ,

HTML5 video

HTML5 is mentioned as entirely new “thing” out in the web, but what it actually means is rather a collection of new, unknown for the current HTML version, features. One of the most interesting and used things in HTML5 are the support of a video in a entirely new “video” tag. Until now the playing of a video was either with Flash player or with Quick Time. But in both cases it relied on a third party plugins. Of course normally the question about performance was inevitable. Which is faster? But imagine we didn’t have the IMG tag? This give you the answer – using third party plugins always slows down the page, and today most of the web is based on video sharing and therefore the browsers become slower!

Performance of HTML5 video tag against Flash video players

As I mentioned above the performance of HTML5 video should be way better than the performance of any Flash video player. To be more precise I’ll reference an article from ajaxian.com, where the author points on his turn an interesting presentation. Indeed the performance of HTML5 video was way, way better:

But sometimes this doesn’t resolves all the problems. Normally with this “new” technique of putting a video into the page, come some additional issues.

First of all there are many codecs that the browser should support and almost always there is something “your” browser don’t support. That makes the task bigger. Now you should support more and more video file formats for the different browsers. And yet another problem is the detection of this codec support.

Detection and integration

Lucky enough, I found a great article and tutorial describing how to integrate HTML5 video with progressive enhancement. First of all you can check for it’s support than downgrade to Quick Time and Flash and if the client doesn’t support even that – render an image.

You can find the source here.

Thanks to this technique you can fully integrate new video tag into your page. Remember that most of the clients for sure will be happy to watch video in a more user friendly manner.