Category Archives: Web Design

HTML lists

Posted on by

Ordered list :

The <ol> tag defines an ordered list (with digits or characters). This tag is used together with <li> (the ordered item in the list)

Example :

<ol>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ol>

Unordered list :

The <ul> tag defines an unordered list (with bullets). This tag is used together with <li> (the ordered item in the list)

Example :

<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>

Definition list :

The <dl> tag defines a definition list. This tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list).

Example :

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

A useful tutorial about definition lists is available at the website of oneXtrapixel.

Modernizr

Posted on by

last update : 18 January 2012
Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies. These technologies are new features that stem from the ongoing HTML 5 and CSS 3 specifications. Many of these features are already implemented in at least one major browser. Modernizr tell you whether the current browser has this feature natively implemented or not.

  1. Modernizr tests for over 40 next-generation features, all in a matter of milliseconds;
  2. Modernizr creates a JavaScript object (named Modernizr) that contains the results of these tests as boolean properties;
  3. Modernizr adds classes to the html element that explain precisely what features are and are not natively supported. It allow you to target specific browser functionality in your stylesheet ( if-statements in your CSS ). You don’t actually need to write any Javascript to use it.

I started with version 1.6.  and experienced a problem with Chrome 9 (beta) which was also reported by other people. The current version  2 was released on 1st June 2011.

With the help of the Modernizr library, the website haz.io gives a quick overview of a browser’s support for recent technologies in the world of HTML, CSS and Javascript.

 

iWebKit, jQTouch and iUI

Posted on by

iWebKit is a file package designed to help you create your own iPhone, iPod Touch and iPad compatible website or webapp.

iWebKit has been specially made for Apple mobile devices. Specific iphone css and html rules compatible with safari’s engine called “webkit” are used. Most browsers won’t be able to open an iWebKit site correctly, currently only chrome and safari do on a desktop PC ( http://demo.iwebkit.net).

iUI and jQTouch are frameworks that include all the css, javascript and images needed to build native looking apps.

jQTouch is a jQuery library, it’s functionality is currently comparable to  jQuery UI.

!DOCTYPE HTML

Posted on by

The declaration <!DOCTYPE HTML> must be the very first thing in an HTML5 document, before the tag. The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

The doctype in HTML 4.01 required a reference to a DTD, because HTML 4.01 was based on SGML. HTML5 is not based on SGML, and does not require a reference to a DTD, but need the doctype for browsers to behave as they should.

HTML5 Test website

Posted on by

screen snap of the test results

A very useful HTML5 test tool has been created by Niels Leenheer. The goal is to show an indication of how well a browser supports the upcoming HTML5 standard and related specifications. The test tool was upgraded in June 2010 (see the blog).

The maximum score of the test is 300 points. The support of one or more codecs provides additional bonus points.

The results for my installed browsers are :

  • Chrome Canari (beta 10.0.614.0) : 244 points + 13 bonus points
  • Chrome 8.0.552.224 : 231 points + 13 bonus points
  • Safari 5.0.3 : 207 points + 7 bonus points
  • Firefox 4 beta 8 : 197 points + 9 bonus points
  • iPod Touch 4 (version 4.2.1  8C148) : 196 points + 7 bonus points
  • Firefox 3.6.13 : 139 points + 4 bonus points (no H264 support)
  • IE 9.0.7930 : 96 points + 5 bonus points
  • IE 8.0.6001 : 27 points, no bonus points
  • BlackBerry Bold 9000 (version 4.6.0.126) : 14 points, no bonus points

Niels Leenheer stated on his blog that there are problems with the HTML5 video codec detection in most browsers. Safari and Chrome report an answer “probably” with the javascript  canPlayType() command even if the codec indicated is a dummy. I experienced the same behavior in my test environment. Today it’s not possible to check what profile is supported in browsers implementing the MIME video/mp4.

The Web Standards Project’s operates also a test website called Acid Tests site.

W3C provides the mobileOK Checker (version 1.4.2). This work is part of the MobiWeb 2.0 project supported by the European Union’s 7th Research Framework Programme (FP7). The checker is based on the open source mobileOK checker library developed by the Mobile Web Best Practices working group.

Disable Flash in web browsers

Posted on by

To test new web applications, it’s sometimes useful to disable the Flash Plugin in web browsers. The procedures to do this are quite different in the latest versions of the common browsers :

  • IE 8 : Menu Tools > manage external modules > disable Flash
  • Firefox 3.6 : Menu Tools > Modules > Plugins > disable Flash
  • Safari 5 :  Menu Settings > Preferences > Security > disable external modules
  • Chrome 8 : enter about:plugins in address bar > disable Flash in plugin list

Native and Nextgen WordPress Gallery

Posted on by

last update : April 3, 2012

A native photo gallery feature and an image uploader was added to WordPress in version 2.5. The documentation for these features is poor.  A useful guide is available at the website yourbloghelper. The official wordpress guide is available at the WordPress Codex pages, informations about the gallery shorcodes are also listed.

To add additional management tools and to customize the presentations, you need a WordPress plugin. There are several great plugins available, the most reknowned is NextGEN Gallery.

Alex Rabe started in March 2007 the development of the Nextgen Gallery Plugin for WordPress. Version 0.33 was released on April 23th, 2007. Thomas Boley, the creator of the WordPress Plugin mygallery, stated in mid-2007 that the Nextgen Gallery plugin was a copy of his own plugin with a few new features.

Version 0.8 of the Nextgen Gallery Plugin was released in January 2008. Version 0.92 worked fine with the new WordPress version 2.5. In june 2008, the number of downloads of the plugin reached the level of 200.000. The release 1.00 of the Nextgen Gallery Plugin was announced on December 11, 2008. One year later, version 1.7.2 was published.

Several developers joined Alex Rabe to progress with the enhancement of the plugin or to create useful addons. A much requested feature of the Nextgen Gallery Plugin was a search function. A tutorial how to add this feature was written by Colophon. A working gallery with the search function is available at the website of Aengus Moran. An addon to the plugin implementing a gallery search feature (admin side) has been created by Marco Piccardo. Alex Rabe published a script to search for images in the Nextgen galleries.

Today, NextGEN Gallery is a full integrated Image Gallery plugin for WordPress with dozens of options and features downloaded by more than 5 million users. The current version is 1.9.3.

An extended tutorial about wordpress galleries and the NextGEN Gallery plugin has been published by Len De Groot at the website of the Knight Digital Media Center (kdmc), UC Berkeley Graduate School of Journalism.

NextGEN Gallery uses templates to customize the layout of the photos in WordPress. A built in template is carousel [nddgallery id=2 template=carousel]. Other templates can be added in the folder /wp-content/themes/mytheme/nggallery/gallery-mytemplate.php. Seven different style-sheets can be chosen to display the albums and galleries.

NextGEN Gallery has a built in image browser. To prevent page loading at every click, AJAX pagination can be enabled, but this works only in combination with the thumbnail javascript effect generator Shutter.

A second default thumbnail javascripts is Thickbox (not maintained any longer). Thickbox displays images with a thick white border over a sheer gray background. Shutter displays images similar but without a border.

The javascripts for Lightbox and Highslide can be added manually, customized code links can be manually integrated for other thumbnail javascript effects.

An built-in slideshow with different transition/fade effects, based on JQuery Cycle, can be replaced by the flash based JW Image Rotator created by Jeroen Wijering.

To get the ID of the saved media, hover the mouse about the name of the media in the gallery and look at the displayed url.

Tutorials about css decorative galleries are available at the WebDesignerWall. More informations about NextGEN Gallery are available at the following links :

Windows Desktop, Taskbar and Sidebar

Posted on by

Windows Desktop

The desktop is the main screen area that you see after you turn on your computer and log on to Windows.

The desktop includes the Taskbar and the Sidebar. The Taskbar sits at the bottom of the screen and shows which programs are running and to switch between them. It also contains the Start button.

There are many ways to customize the taskbar to suit your preferences. For example, you can make the taskbar larger, have Windows automatically hide it when you’re not using it, and add toolbars to it. To unlock the Taskbar, right-click on it to select the unlock option in the menu. To move the Taskbar, click an empty space on it and then hold down the mouse button as you drag the taskbar to one of the four edges of the desktop. When the taskbar is where you want it, release the mouse button.

The Taskbar includes a Quick Launch Toolbar at the left and a Notification Area at the right.

On the side of the screen, the Sidebar contains small programs called gadgets. To open Windows Sidebar, click the following items : Start button, All Programs, Accessories, Windows Sidebar.

More details are available at the Microsoft Website.

Image Slicing and CSS Sprites

Posted on by

Last update: December 29, 2011

It’s often discussed whether or not slicing  images  makes them load faster on the web. In the past images slicing was used to  benefit from human perception that makes it seem like the page is loading faster when small pieces are displayed in sequence.  In reality  load time is increased due to the additional simultaneous requests to the web server. The total file size of sliced images is reduced if each slice is compressed to optimal settings.

Today, the contrary of slicing  is done. Separate graphics are grouped in one large image collection. It’s far easier on the server to serve a single large image than many small ones and it’s faster for a web browser to load such an image.

Problems related to css sprites are :

  • No encapsulation: If you want to change one image, you have to change the sprite
  • Don’t degrade: If the browser don’t support CSS, you are in trouble
  • Memory footprint: When sprites get loaded into the browser, they are stored uncompressed and can take up a huge memory
  • read/maintain/modify your CSS. It can be difficult to remember the exact pixel offsets within the sprite

Here is a list with links to useful webpages about related topics :

CacheViewer add-on for Firefox browser

Posted on by

CacheViewer 0.6

CacheViewer 0.6

CacheViewer 0.6, developed by benki, is a GUI front-end of “about:cache”, an add-on for the Firefox browser.

This plugin allows searching and sorting memory and disk cache files. A very useful tool, I installed it today.

To clear the cache, select Clear Recent History… from the Tools menu in the Firefox browser, select the desired range from the Time range to clear drop-down menu (to clear your entire cache, select Everything), choose what history elements to clear from Details and click clear now.