Mauro Pirrone | Blog

Some new websites have been launched during the last few months. These include:

Damcar Properties - A website for a startup real-estate business.
DigiMalta - Website for Microsoft’s local digital heritage competition.
Giuseppe Picture Framing - Small website which aims to serve as an online gallery for picture frames, picture mouldings and art.

Blog.com.mt is a totally free service offered for those users that wish to start blogging. It’s totally free, there are no hidden charges and that’s what makes Blog.com.mt popular among the Maltese Bloggers.

Stand out from the crowd and get noticed by blogging on Blog.com.mt! You are a few clicks away from having your own Blog Online.

Small but informative website about Joe Spiteri Sargent has been launched. The purpose of this website is to promote award winning Spiteri Water Pump (SWP).

[ www.joespiterisargent.com ]

The Inspiring Minds website (www.inspireyourmind.com) has won a web design award from DesignFirms. The website achieved the following points and scores:

• 30 points for Creativity & Design
• 33 points for Programming & Compatibily
• 30 points for Ease of use & Effectiveness

The website received a score of 93 out of a possible 99 points

The website can be found in the Award Winner Archive:
http://www.designfirms.org/awards/web/archive/2008/04/

TAT2Clinic.com has been a successful website with constant traffic and frequent updates where being done. It now includes a new zoom feature in the portfolio section. This allows the user to see tattoos in detail. Additional updates were also carried out including the newly designed background image, background music and some minor tweaks. More updates also coming soon!

In this tutorial I’m going to show you how you can take advantage of the “ul” tag in HTML to create a CSS-based menu.

The menu…

http://www.labs.mauropirrone.com/css/css-vertical-menu.html

Step 1

Create an unordered list. Place the unordered list inside a div tag with class "menu".

Make sure that all list items have a link. For this example I’ve used # which indicates a nowhere link.

<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Directions</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Step 2

Create a class style named ".menu" and set rules which apply to the menu in general such as font-family, font-size, width and so on.

.menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
width: 8em;
}

Step 3

Create a style for ".menu ul". Such style will effect the unordered list contained within the div tag with class "menu" only. Set padding and margin to 0 as well as list-style-type to none.

.menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}

Step 4

Craete a style for ".menu a". One important setting here is to set display to block. This makes the "a" tag occupy the entire parent object; in this case the "li" tag.

.menu a {
color: #000000;
background-color: #CADDF0;
border: solid 1px #333333;
display: block;
padding: 5px;
text-decoration: none;
}

Step 5

Create a style for ".menu a:hover". This will effect the hover state of the menu item. Change background colours, font colours…be creative!

.menu a:hover {
background-color: #FFCC00;
color: #000000;
}

That’s all it takes to create CSS-based menu

Flickr is an image and video hosting website. Luckily enough, they provide a web service to access your photos and use them in any way you want. To get you into perspective, here’s the Flickr photoset which I am using, and here are the customised photo gallaries which I created using PHP:

• Photo gallery using Lightbox
• Photo gallery using PostCardViewer

Although I’m showing you how to integrate Flickr with Lightbox and PostCardViewer, this technique works with any photo gallery including the commercial one SlideShowPro.

Step 1

Downlaod the phpFlicker library from http://phpflickr.com/

Download Lightbox or PostCardViewer (or any other photo gallery).

Step 2

To access Flickr using a web service, you need an API key. You may get one from http://www.flickr.com/services/api/keys

Step 3

Get the photoset ID. In this case I am using photoset id ‘72157605353756648′. Note that the photoset id is part of the URL. For example, http://www.flickr.com/photos/26262208@N07/sets/72157605353756648/

Step 3

Step up your php script.

require_once("phpFlickr/phpFlickr.php");
$f = new phpFlickr("your api key");
$photoset_id = '72157605353756648';
$photos = $f->photosets_getPhotos($photoset_id);

Step 4

Loop through each photo in the photoset and you’re done! The following example uses the Lightbox photo gallery.

<ul>
<?php foreach ($photos['photo'] as $photo): ?>
<li><a rel=”lightbox[roadtrip]” href=”<?= $f->buildPhotoURL($photo, ‘medium’) ?>” title=”<?= $photo['title'] ?>”><img src=”<?= $f->buildPhotoURL($photo, ’square’) ?>” alt=”<?= $photo['title'] ?>” title=”<?= $photo['title'] ?>” /></a></li>
<?php endforeach; ?>
</ul>

Notes

• You may easily change the file size by specifying either square, thumbnail, small, medium, large or original. For example: $f->buildPhotoURL($photo, ‘large’)
• You may programmatically get the photoset ids by using the API call photoset.getList (or photoset_getList method)
• You may also use API calls to get comments, upload photos, and so on
• For the complete API documentation visit here

Source Code Download

• Lightbox Example
• PostCardViewer Example

A photo speaks a thousand words. With Lightbox you can simply make your images stand out! It is basically a JavaScript library used to display large images without having to leave the current web page (this functionality is known as modal). The modal is automatically resized according to the size of the image by using a gliding animation.

One of the main advantages of Lightbox is that if a particular browser simply does not support Lightbox, the image will simply load as a separate file.

Its simplicity makes it even more elegant and encouraging to use it. For step-by-step tutorial how to use it click here.

Note that there many alternatives:

• Slimbox
• Lightview
• and many variations of Lightbox…click here

Still wondering how to come up with a Picasso colour scheme? Adobe’s kuler may solve your problem. It’s all about sharing harmonious colour schemes for the web!

http://kuler.adobe.com/

I’d like to thank Matthew who shared with me this website If you know about any other useful websites, feel free to share them with me by leaving a comment.

In summer besides redesigning my own website, I’m planning to launch a new website (www.pirronedesign.com). The idea behind this website is simply to promote professional web design!

And here’s the logo…

I would greatly appreciate if you send me your comments about my new logo!