HTML5 figures and captions

The good old HTML img element has not been forgot by the HTML5 implementors who actually enhanced it with two new semantic elements, namely figure and figcaption. The former is a container for images, while the latter is the actual caption provided to the image itself. It's worth saying that the figure element accepts only inline elements as its children, so if you were accustomed to get the final result of an image with caption by using nested divs or other block-level elements, it's time to radically rethink your coding style. wink

Removing outlines from CSS links

In CSS, links can have several states, including a normal state, a visited state, an hover state, a focus state and an active state. Each of these states depends on the user interaction with links. When a user moves the pointer on a link, the hover state is triggered. Conversely, when such a user clicks on a link or activate it using the keyboard, the active state is triggered. And so on. Normally, browsers apply their default style rules only to the normal and visited states, that is, a:link and a:visited. The classical styles for such states are a blue color for the normal state and a purple color for the visited state, plus a text decoration. But there are browsers that may apply other styles to other link states.

HTML5 and Wordpress: theme design

I'm currently planning to run a couple of extended tests on Wordpress themes using my local web server to build my own themes and run them on a testing site. Today I realized that much of my efforts should be put in creating brand new HTML5 themes for Wordpress. This just after working on a client's web site that makes use of an HTML5-compliant theme which really impressed me for its final design and flexibility. However, there are some potential problems that I'd like to discuss with you. As always, if someone has found a good solution to one of these problems, please let me know.

CSS: styling blockquote

Block-level quotations in HTML are marked up by the blockquote element. Technically speaking, the semantics of this elements says that a block-level quotation should be used for long quotations, whereas an inline-level quotation (namely the q element) should be used for short quotations (e.g. sentences). Block-level quotations are all rendered in browsers with some default styles. Generally, for this kind of elements are used margins:

CSS and the HTML5 time element

The time element is a brand new HTML5 element used to specify date and times within a document. It's basically a flow element and has two attributes: datetime and pubdate. The first attribute is used to define the date and time format in the element it's attached to. As W3Schools specifies, "This attribute is used if no date or time is specified in the element's content." The format of dates and times is the same as that used for the XHTML ins and del elements. So 2011-02-26 and 2011-02-26T24:00:00Z are both valid values for this element.

jQuery: social icons with tooltips

Today social icons are a must for every good web site. In this post I'm going to show you how to create dynamic tooltips to be displayed together with such icons by using jQuery and CSS. First of all, we need an unordered HTML list that will contain our social icons. These icons will be set as background images for each link contained in our list. Our HTML is as follows:

jQuery: dynamic video caption

Adding a dynamic caption to a video is quite easy with jQuery. All you need is a video to work with, an HTML container, some CSS styles and, of course, jQuery. For this post I've chosen a free video from Wikimedia representing a cute robin while it's feeding. This video lasts only 30 seconds or so, but it's approximately 16 Mb in size so it may take a while to view it. The original video was in Theora format, but I've converted it in MP4 format using Miro converter. Now, let's start with our HTML:

HTML5, CSS3 and the actual future of the web

The future of the web will be HTML5 and CSS3 according to what Google developers say in this conference. Talking about the future is always risky: in the sci-fi movies of the '60s and '70s the XXI century was depicted with flying cars and robots. So we have to be realist: use these standards now but without a sense of prediction and use them as they come in browsers. Otherwise, you might end up by realizing that flying cars have not been invented yet. wink

CSS: inline navigation menu

Inline navigation menus are one of the several alternatives you have when you want to turn an unordered HTML list into a navigation system. This video tutorial covers the basics behind this process. Bear in mind, however, that in order to succeed you should also remove the space between list items and the default indentation of the list. For the first task, simply make sure that your list items are without spaces in the source. For the second task, instead, reset both margins and padding of the unordered list. And don't forget IE 7 and lower: these browsers need a dimension for the containers.. as always. sad

PHP: accessing protected and private members with __get

As their name says, protected and private members in PHP are not directly accessible from outside a given class. When you define such members, usually you should set a getter to retrieve their values or just to access them even outside a class definition. The problem with getters is that you should define a getter for each member you want to access. Fortunately, PHP provides the magic method called __get() for that purpose.

CSS3 transitions tutorial

The first thing you have to learn on CSS3 Transitions is the concept of CSS states. A CSS state is the condition that determines how an element is rendered within a particular time span. For example, when you have a link which changes its background color on hover, you actually have two states: the :link state and the :hover state. What happens between these two states, that is, in the time span when our link changes its background color? This is when CSS3 transitions come into play.

CSS3 rounded corners in Dreamweaver

This video tutorial is really useful for those who use Dreamweaver as their default editor for CSS and, more generally, for web development. Just a caveat here: to make sure that your CSS will validate, you should avoid the vendor prefixes approach and use the standard border-radius property. In this case, however, make sure that your CSS will be validated as CSS3, because the W3C validator defaults to the CSS 2.1 specification. Just use the keyword profile in your validator URL and you're done (of course you have to use the css3 value wink).

CSS: sticky blog dates

In this post I'm going to show you how to create sticky dates for your blog with CSS. Sticky dates are always placed in a certain position just next the post they're attached to and they don't move, they always stay in the place assigned to them. To accomplish this task, we're going to use absolute positioning with a newly created context to be used with CSS positioning. Let's start with our markup structure:

JavaScript: private classes

The concept behind the implementation of private classes in JavaScript is the same as the actual implementation of private members. JavaScript has no concept of the traditional OOP visibility keywords but honors the scope visibility. So if you have a class created with the traditional constructor pattern containing some variables inside, then those variable won't be accessible from outside the class. If you want to get their values, you have to declare a getter:

PHP: abstract class example

Abstract classes are useful when you want to keep a certain level of separation between your application components. Suppose that you have to work with multiple databases. In one project, you have a MySQL database and in another a PostgreSQL one. However, certain database operation are the same, such as connect and disconnect to and from a database. Basically, you need an abstract class which contains such common operations and a concrete one that extends the base abstract class. In this post, I'm going to show you how to accomplish this task.

CSS3 animations: getting started

This video tutorial shows very clearly how to start using CSS3 animations by testing them in those browsers that support this feature. Although a CSS animation is really useful because it spares authors the burden of using a JavaScript framework to accomplish the same task, it should never be overused due to accessibility reasons. The risk is simply turning your pages into a garden-variety magic show. Are you sure that this is exactly what you want? wink

CSS: auto-resizing background image

The technique presented in this video tutorial is pretty interesting and its final effect impressive. It basically makes use of the automatic layout of the CSS table model to make an image scale along the screen dimensions. Actually, the image and the table are both inserted in the markup, but this flaw can be easily fixed using JavaScript. Also, a style element put in the body element is clearly an error, but I think the author of this video was too excited for the final result to think about it (I've been there myself wink).

From signs to logos: a web designer perspective

Signs are everywhere: we see them on the streets, inside buildings, on packagings and in a lot of other common places. But what is (or what has been) their impact on the design of logos? This is quite a stimulating question from a web design perspective. First a truism: signs came before logos. If we go back in history, we will probably notice the abundance of signs throughout the entire human history. Probably the best example of signs is represented by the ancient Egyptian writing, a complex system made up of hundreds of signs that were only later translated by Champollion back in the early of XIX century.

CSS: styling Google AdSense

Google Adsense poses some problems when it comes to stylize this kind of advertisements with CSS. First of all, you have to bear in mind that Google allows its users to choose a set of styles before inserting the ads box into the page. Once these styles have been chosen, they're inserted into the ads page which will be later fetched through an iframe element. If you take a look at the inner structure of a Google ads box with a developer tool, such as Firebug or another DOM/HTML console, you will probably see a main container, some scripts and then an iframe which, in turn, contains an entire, separate HTML page with all the ads.

jQuery: creating a CSV file

This post will show you how to create a downloadable CSV file from an HTML table using jQuery. To make everything work, we also need a server-side script that will receive our input to turn it into a CSV file. First, we need to create a jQuery plugin to retrieve all the relevant information from an HTML table and format them accordingly. Our plugin should not assume that the target table uses a proper and semantic structure but only that table headers must be present (the th element). So here's our plugin:

CSS: specificity table

CSS specifications provide a way to calculate the actual specificity of a selector by providing some numerical values as reference. Although this is a very useful method, it's somewhat difficult to remember, especially when dealing with multiple CSS selectors on large CSS files. For that reason, in this post I'm going to try to summarize the most common combinations of selectors in order to provide a visual memo that could be used later as a reminder.

Embedding HTML5 videos from YouTube

Trying to embed a YouTube video using the HTML5 video element doesn't produce the desired result. The point is that the URL provided by YouTube to embed a video works only with the iframe element. Why so? Because you're actually fetching a Flash video on a page, not the actual file. Since browsers don't support Flash videos when included in an HTML5 video element, everything fails silently. This is due to the fact that browsers accept only a few video formats in HTML5, for example the Theora format or MP4 files. Flash videos are not included in their list. Another important thing to keep in mind is that the feature detection performed by YouTube in order to check whether your browser supports HTML5 videos seems to work only on YouTube and not remotely.

CSS and object element styles

I made several tests on the object element since 2008. The results of these tests are not changed very much during the last two years, even though browsers are changed very much. smile The first thing to understand is simple: an object element is an inline-block element. As such, is displayed by default as an image, that is, on the same line of other inline content. But this element also accepts a width and an height, just as images do. The second thing is that this object is a replaced element. In other words, the actual content of object is rendered using an external source, for example a file.

jsAnim and jQuery advanced animations

jsAnim is a little but incredibly powerful JavaScript library entirely devoted to JavaScript animations. After taking a look at the demo page and the online documentation, I decided to try to combine jQuery animations with jsAnim animations to avoid the use of several jQuery plugins to accomplish the same tasks. jsAnim doesn't use any wrapper nor shortcuts and it's extremely easy to use when you get the habit of thinking in a sequential way. In fact, jsAnim animations can actually be split into several steps and, what's more important, you have the total control over these steps even within an animation in progress.

jQuery: the fx object

The jQuery's fx object forms the core of all jQuery effects. In its essence, this object handles CSS styles and timers used during jQuery's effects. In fact, all jQuery's effects are basically a combination of CSS properties and timers. When you have to create an effect, you have to keep track both of the current style property and the interval when your style change occurs. jQuery handles this task with steps. A step is a fragment of an effect. Each effect can be actually broken down into several steps. For example, when you call the hide() method, the CSS display property is set to none. If you don't use steps, this effect will be immediate. Instead, with steps you can add a certain delay to this transition, for example by specifying slow as the first parameter of this method.

Electronics with jQuery and CSS

My smart father is an electronics expert, having studied
electonics on his own for so many years now. Yesterday he came up with a challenge to me. He basically asked me to draw a simple schematic with CSS to be
animated with JavaScript. So he sketched something on his notebook and I took a look at it. Actually, I don't know what it was, but this maorning I managed
to reproduce it using CSS and jQuery. If you know what it is, please let me know because I'm a total ignorant in this field. lol

PHP: walking the DOM

In this post I'm going to show you how to walk the DOM of an HTML document with PHP. First of all, a caveat: at the moment of this writing, the PHP's DOM implementation doesn't recognize HTML5 documents. If you try to load such files, some core DOM methods such as getElementById() will return null. sad The best thing you can do is always providing a validated XHTML document. In fact, another source of errors are non valid documents. Let's see how to accomplish our task:

jQuery: dividing image effect

Adding a dividing effect to an image is almost easy with jQuery, provided that you undestand that jQuery is not Flash, so you don't have to expect some stunning effect, but just some nice touch when it's needed wink. Anyway, to accomplish this task, we start with a basic image contained within a block-level element. We want the containing block of the image to be divided in four smaller blocks with a semi-transparent content inside.

PHP: why the Zend coding style

In my PHP projects I strictly follow the Zend coding standard style. This is not because I want to jump on another web bandwagon, but simply because this coding style provides the best thing that a web developer can get from his/her code: consistency. There's nothing worse than a PHP code that first follows a coding convention and then switches to another one just in the middle of a component or routine. But there's even something worse than this bad habit: certain frameworks or CMS use a coding convention that makes life harder for a developer.

jQuery: sliding drop-down menu

In this post I'm going to show you how to create a sliding drop-down menu using jQuery animations. Our menu is made up of two components: the initial CSS styles that hide the sub-menu and the jQuery code that hides and reveals it after certain user actions. As you will see, the most difficult part in this code is surely the CSS part. In fact, we need first to understand a simple thing: to get the effect of a menu that slides from top to bottom, you have to initially set its height to 0 and then restore this height to a certain value. To prevent browsers from showing the contents of this sub-menu, we have to use the overflow property with a value of hidden.