HTML5 event in Rome

Today I will attend to the HTML5 event promoted by Html.it in Rome at 16:30 PM. There will be some introductory talks by Html.it developers on HTML5, plus the presentation of the HTML5 guide by HTML.it. It's an opportunity to meet all the people I know only by name and a great event for Italian HTML5 developers.

View Larger Map

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

CSS: height of input elements

Input elements are defined mostly by the default style sheet used by web browsers. These styles can be reset in our CSS, but to get consistent results across browsers we need to know that the input's height is not only set by explicitly defining a height on such elements, but also (and above all) by the current font size and family set on a given element.

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:

jQuery: dynamic lists

Plain HTML lists are pretty simple to animate using jQuery. They are basically a set of elements grouped together within ol or ul elements. What we want is to add some effects on the list items, for example making them contracting and expanding when the mouse is over them or making them disappear when a user clicks on each item. First of all, we need a list:

Origins of user interface colors

The color palette used in many user interfaces quite resembles
the one used on several signs that we can found in our everyday life. In this palette, colors convey a special meaning to the final message and they can actually grouped into three main groups: information, warning and errors. In this post I'm going to focus on several examples of colors found in these three groups.

HTML5 and CSS3 blog template

What follows is a really basic blog template entirely written in HTML5 and CSS3. Since Internet Explorer 8 and lower doesn't recognize HTML5 elements in its DOM structure, I've been forced to use the excellent enabling script by Remy Sharp and put it inside a conditional comment. The code is as follows:

jQuery: sliding and aligning panels

In this post I'm going to show you how to slide some panels into view and then align them with jQuery and a couple of CSS styles. First of all, the CSS float property doesn't work with jQuery animations. To accomplish this task, we're going to use the addClass() method instead. Let's start with a basic markup structure:

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 vertical slider

In this post I'm going to show you how to create a simple vertical slider with jQuery. To accomplish this task, we're going to use negative relative positioning on the top property of each element within our slider. This property will take each time the proper value for showing the affected element. We start with a basic markup like this:

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: self-processing AJAX request

In PHP, self-processing pages are those pages that are able to process the data passed along an HTTP URL in the form of a GET or POST request. In this post I'm going to show you what happens when we use these pages together with a jQuery AJAX request. The first thing we need to do is to set up our server-side code at the very top of our page, like so:

Debugging CSS menus in Internet Explorer

CSS support in Internet Explorer 6 and 7 is often buggy and incomplete. This turns out to be a real pain in the neck when we want to stylize CSS menus. This post is going to provide some useful rules to make everything work even in these browsers.

CSS: tabbed navigation menu

This video is full of details on this subject, but, nevertheless, lacks of CSS debugging in IE during the development process. Be always aware of that when you search for tutorials or, more generally, for CSS resources. Again, never, never test your layouts in the internal editor preview but always use browser preview. wink

CSS: horizontal drop-down menu

This video is extremely detailed, though it doesn't take into account specific IE's problems with this kind of menus. Also, you should never use the internal preview of your editor because it can't actually be as accurate and reliable as a browser preview. Bear in mind this when you want to implement something similar on your own. wink

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

JavaScript: the replace() function

The replace() function is a string utility function that belongs to the String object. This means that this function can be used on any string. However, this function is more powerful than you can imagine. Its purpose is to replace a portion of a string with a given string. Usually this function is used in this way:

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

CSS menu with gradients

This post will show you how to create a navigation menu stylized with CSS gradients. So far we've always used background images to accomplish this task, but now with this brand new CSS3 feature such workarounds are no longer needed.

CSS gradients tutorial

CSS gradients allow web developers to specify fading and transitional colors on their elements. Unfortunately, not all browsers support CSS gradients and those that support them use different syntaxes. In this post I'm going to show you how to use CSS gradients by tackling browser discrepancies.

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.

CSS menu with transitions

In the previous post I've briefly introduced CSS3 transitions. Now it's time to build an interesting example after knowing the basics. Let's say that we have a navigation menu and we want to apply some transition effect when a user hovers a link with the mouse. The effect should smoothly change the text color and the background color of each link. Here's the code:

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

Abstract and normal classes in PHP

Normal and abstract classes in PHP differ from each other for a simple fact: abstract classes can't be instantiated using the new operator as for normal classes. Generally speaking, abstract classes are used as a mould for other classes. An abstract class is always more generic than a normal class, and this is the main feature that describes abstract classes.

CSS: thead, tbody, tfoot and background images

Browsers return strange results when you try to apply background images to the thead, tbody and tfoot table elements. Basically, this behavior varies from browser to browser but eventually I managed to get some consistent result by changing the default display role of these elements.

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).

jQuery: animated slider

In this post I'm going to show you how to implement an animated slider with jQuery. To accomplish this task without using jQuery UI, we need to keep track of the mouse coordinates within a given element. Done that, we can move our target element horizontally using the animate() method. First of all, we need a basic HTML structure to work with and some CSS styles:

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.

jQuery: animated hide and slide toggle

This tutorial is exactly how I think a tutorial for beginners should be: clear, detailed and user-friendly. Follow this user on YouTube because it's really interesting what he say and how he says it. This is a great lesson of style I learned just now.smile

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.

The CSS box model concept

This is one of the few video tutorials on YouTube that combines the concept of box model properties with its dimensions, namely width and height. So you may ask: why the CSS specifications treats this topics in two different sections? Honestly, I don't know. smile

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.