Mauro Pirrone | Blog

Click here to visit website

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 ]

A new real estate website has been launched. More info regarding this website coming soon. Any comments are more than welcome

[ www.rsb.com.mt ]

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/

A new website about the engineer Joe Spiteri Sargent is coming soon! It’s all about the award winning Spiteri Water Pump (SWP), which is an innovative machine used for the generation of electricity. It makes use of a new type of Renewable Energy Source (RES) with huge upward potential of economic and ecological benefits.

In the mean time, you may read more about this here:

• Water pressure energy transfer
• Maltese energy invention wins international award
• Google for more…

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!

A web service is a software program identified by a URI which can be accessed through internet. It consists of well-defined, re-usable, software components that perform specific, encapsulated tasks via standardised web-oriented mechanisms.

Web services can be used with any programming language such as PHP or ASP.NET. With little code and some XML, you can include some of Google’s or Yahoo’s functionality in your own website!

But what’s exactly XML? XML is simply a mark-up language that defines other languages and protocols:

• WSDL - Web Service Description Language
• UDDI - Universal Description, Discovery and Integration
• SOAP – Simple Object Access Protocol

Image courtesy of Wikipedia

If you are new to XML, I suggest taking a tutorial here.

In PHP it is very easy to use a web service. It’s a matter of few lines of code!
http://www.php.net/soap_soapclient_soapcall

And one last thing…here are a list of web services which you might use in your website or web app.
http://www.programmableweb.com/apis/directory/1?sort=mashups

In the near future I will be publishing an article how you can create an ajaxed site search using a web service. As always, feel free to send your comments!

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