Seorabeol Grand Leisure Hotel Site

Leave a comment

I did another site redesign. This time it’s for Seorabeol Grand Leisure Hotel. Known for being a premier luxury hotel in Subic Bay, I used black and gold combination which I think makes websites look elegant. The added high quality images of the hotel complemented the color scheme. See the screenshots below.

For comments and suggestions, please feel free to email me at aenguillo[at]gmail[dot]com. I’d really love to elevate my works (designs/concepts/methods) and constructive criticisms are valuable to me to be able to do that.

Click this link if you want to know more about Seorabeol Grand Leisure Hotel… Your home and event venue in Subic Bay!

ACLEA Website

Leave a comment

The admins of Academic Center for Learning Excellence Abroad (ACLEA) asked me to update their site. It was a flash-based site so I thought of  re-creating their website using HTML5 and CSS3. Here are some screenshots:

It’s a 13-page site that now uses jQuery for the sliding images and gallery and a working contact us page. I used blue and white as its primary colors (i did retain the blue color) for a clean look which let’s visitors focus on the content.

Create a Horizontal RSS Feed Ticker

1 Comment

We have added an article ticker on the school’s website that shows the latest posts from our blog site. jQuery tickers are always a plus if you’re promoting your blog.

Brent Review Ticker

Brent Review Ticker

On this tutorial, I will show you how to create a horizontally scrolling news/article ticker that will load content from a feed. I’m assuming that you are a website admin and has control/access on your host (ftp or ssh).

To be able to load feeds from our blog site, we’ll use SimplePie. It’s a free code library that you can download from here. After downloading and unzipping SimplePie, create server-writable “php” and “cache” folders on your web host’s root directory (where your index or home page is located). Upload “simplepie.inc” to the “php” folder you created. Edit your home page and add these lines before the DocType declaration:

<?php
require_once(‘path/to/simplepie.inc’);
$feed = new SimplePie();
$feed->set_feed_url(http://website.url/feed/&#8217;);
$feed->init();
$feed->handle_content_type();
?>

Create a div that will contain your feed and add these lines that will fetch the article titles.

<!– some codes here –>
<div>

<?php foreach ($feed->get_items() as $item) : ?>
<a target=“_blank” href=<?php echo $item->get_permalink(); ?>><?php echo $item->get_title(); ?></a>
<?php endforeach; ?>
</div>
<!– more codes here –> 

Save your index page as a php file (index.php). Once you open your index page, you should be able to see your article titles.

We’ll now download two files from the liScroll website – jquery.li-scroller.1.0.js and li-scroller.css. Upload the files to their respective directories (usually js and css) and add these lines inside your index page’s head tag:

<head>
<!– other codes here –>
<link
href=“css/li-scroller.css” rel=“stylesheet” type=“text/css” media=“screen” /> 
<script type=“text/javascript” src=“js/jquery.li-scroller.1.0.js”></script> 

<script type=“text/javascript”>
$(function(){
$(“ul#ticker01”).liScroll({travelocity:0.1});
});
</script>
</head> 

The first two lines pointed where our jQuery code and css files are contained. The chunk of code after that called the liScroll() function. “Travelocity” specifies the scrolling speed. And finally, we’ll wrap our feeds inside an unordered list tag and add “ticker01” id. 

<!– some codes here –>
<div>
<ul id=“ticker01”>

<?php foreach ($feed->get_items() as $item) : ?>
<li><a target=“_blank” href=<?php echo $item->get_permalink(); ?>><?php echo $item->get_title(); ?></a></li>
<?php endforeach; ?>
</ul>
</div> 

This will create a list of your feeds and liScroll will do its task of scrolling them horizontally. liScroll works with jQuery 1.4+.

Update

You may download the source files (feedticker_src.zip) from here. Unzip the file and upload them on your personal/test server (WAMP, MAMP, XAMPP, etc) and open index.php using your browser.

Older Entries

%d bloggers like this: