HTML » OpenAlfa Blog

How to reduce the load time of a web page with asynchronous CSS

HTML, Server Administration No Responses »

Mar 272015

We have already stressed in previous posts the importance of the time it takes for a web page to be fully loaded in the client browser: users will get a better impression of the site if the content is “snappy”. Besides, the page load time is a factor that the major search engines, including Google, take into account in their ranking algorithms.

Downloading and processing external resources is often one of the main contributions to the total page load time. Among these resources, external javascript libraries and CSS stylesheets are most often the main contributors to this.

We have already covered in our previous post on “How to reduce the page load time with asynchronous javascript” the way to load javascript resources in parallel with the main HTML document, so as not to block the rendering of the above-the-fold content.

This post continues the series on web site optimization techniques, explaining how to load asynchronously external CSS stylesheets.

Improving the look of HTML Tables with some CSS

HTML No Responses »

Mar 102015

In the HTML language, tables are the natural way to display information structured as as set of records composed of several fields.

But the default look used by browsers to render HTML tables is not very appealing.

This post explains how to improve the look of HTML tables with just a few CSS rules.

How to implement a signup/login form for registered users in PHP

HTML, PHP No Responses »

Nov 162014

A web site that is going to offer a customized service for registered users need to implement a signup and login procedure. Validated users can then be granted access to functionalities that could eventually make use of specific user data, not available for anonymous users.

This post explains a possible implementation of this signup and login procedure in PHP

How to add a table of contents to a web page

HTML No Responses »

Aug 312014

If the amount of content in a web page is large, its readability can be improved structuring the content in sections and subsections. In this case, a Table of contents (TOC) is an element that can improve substantially the usability of the page.

This post goes through the steps involved in adding a TOC to a web page.

How to add a WYSIWYG content editor to a web site with TinyMCE

HTML No Responses »

Aug 292014

The specifications of a web site under development might include a requirement to provide users with a means to enter formatted content, including images, text in different sizes, colors and fonts, etc.

To this purpose WYSIWYG editors (What You See Is What You Get) are best suited to end users, as the result of the changes made by the user is immediately visible while the content in being edited. Among the available WYSIWYG editors, one of the most popular is TinyMCE, used by the most widespread CMS such as WordPress.

But TinyMCE is a standalone package, that can be incorporated easily in other developments. This post explains the steps to add the content editing functionality implemented in TinyMCE to a web application.

How to group entries in a HTML form dropdown

HTML, Javascript No Responses »

May 262014

In some HTML forms we may find dropdown (<select>) elements with a high number of entries. To make the dropdown more user friendly, the entries might be grouped by some relevant criteria.

How to draw with the mouse in a HTML5 canvas

HTML, Javascript 3 Responses »

Jul 052012

In this post we will show how to set up in our web page a drawing area where the user can draw using the mouse. The drawing can then be uploaded to the server to be stored as an image file (default to png format), or processed as desired.

We will make use of this functionality in our diccionario mandarín-español. The user will be able to enter the hanzi symbol to be looked up by drawing it with the mouse. This will also require an OCR (Optical character recognition) software with support for simplified chinese. This topic will be subject of a later post in this blog.