Consistent website design using Bootstrap

Bootstrap offers wide range on different components that can be used to get a consistence design.
Bootstrap also offers you the possibility to change your Theme. So you can get a complete different colour- schema with some easy and fast steps
Information about Bootstrap:

To include Bootstrap into your web application. The developer just downloads the Bootstrap CSS stylesheet and includes a link in the HTML file.
If the developer wants to use the JavaScript components, they must be referenced along with the jQuery library in the HTML document.

a simple example of defining a drop down menu can be viewed in the attachment (DropDown_code_Example.png)
The figure in the attachment presents the presentation of the example before (DropDown_Example.png)

If you would like to customise Bootstrap you can also with this link:
define which components will be included in your style sheet or to change the appearance of your components.

How to get a consistent website design using Bootstrap

If your are new to CSS and HTML designing your website can be a hard and time consuming activity. To create a site that is easy to use and also looks nice you can spend hour on styling your different object and components.

Information Extraction Process for News Websites in Ruby

In order to extract and save the information that is according to the challenge we need to follow these high level steps that will be covered in detail in the following:

  1. Analyze website's source code and identify proper tags that need to be extracted
  2. In our Ruby code, use a XML/HTML parser that is able to extract information based on proper selectors (either XPath or CSS selectors)
  3. Save extracted information in a data storage

In the following we will apply these steps to the news website:

1. Analyse source code, Identify tags
Looking at the source code of our example page, we can quickly identify that all news items share the same class, namely: .entry-teaser

Following this, we can extract the child elements of this top element with class '.entry-teaser'.
The title is in the h2 element with class '.entry-title' and the short description is in all the underlying p elements.

2. Extract Information based tag identifcation in step 1

For this we use the library Nokigiri[1] for Ruby - it is an HTML, XML, SAX, and Reader parser. Among Nokogiri’s many features is the ability to search documents via XPath or CSS3 selectors. In this particular example, we will use CSS3 selectors:

(Beware: indentation is not properly adjusted in this view)

require 'nokogiri'
require 'open-uri'
url = ''
image_url_prefix = ''
doc = Nokogiri::HTML(open(url))
doc.css(".entry-teaser").each do |item|
link = item.at_css('.image').at_css('a')
href = link[:href]
image_url = image_url_prefix + link.at_css('img')[:src]
title = item.at_css('h2.entry-title').text
short_description = item.at_css('p a').text.strip

3. Save extraction information in database

For this we create a new model class[2] News (title, image_url, short_description, external_url, source)

We also extend our code example from before to save our new news item to the database:

news =
news.title = title
news.image_url = image_url
news.short_description = short_description
news.external_url = href
news.source = url!

[2] This model class uses the Ruby Gem for Active Record:


Extracting information from a website in Ruby

We want to integrate news items from third party news web sites into the news feed of our own web site (with proper attribution of the source, of course) and link them to the original source. For this we need to save at least the following attributes of an item: <ul> <li>Title</li> <li>Short Description</li> <li>Link to the original source</li> <li>(optional) Image</li> </ul> This information extraction should be done in Ruby. The process should be explained for every generic news website, but for a first solution the news website suffices.

solution CRUD operations example using Spring, MVC, Hybernate and Maven

CRUD operations example using Spring, MVC, Hybernate and Maven

I need an example to better understand of how to operate with these technologies. The interface will be HTML-based. The application will support all CRUD operations: create, read, update, delete. MySQL was used for the database.

Testing JavaScript with various frameworks and sharing them

This tool gives a very easy way to test around with many JS libraries and sharing online with your collegs or to provide help in forms:


Testing JavaScript with various frameworks and sharing them

In an experimental state of your new solution there is often a phase where you don't know how to solve a problem in JS/HTML in the best way. The set up that is required localy is often complicated because of including of all necessary libraries and the testing is often a very monotonous repeating of adding of files.

Install the Firebug plugin

Install the Firebug, a Firefox plugin, which displays on the bottom of the page, the html format of the element over which the cursor is hold.

Inspect HTML for Web-page description

When we are doing usability analysis of a web page, it is often convenient if not necessary to know what is the html and css form of the visual elements displayed on the page. This could be done by checking the page source code, but this solution is time consuming, since we have to do a logical match between the code and the element.


Subscribe to html