Question: Step 1. Analyze web programs in order to test, debug, and improve them

ID: 3812787 • Letter: Q

Question

Question:

Step 1. Analyze web programs in order to test, debug, and improve them

Forms

Pick the form controls you want to learn about. Visit JQueryUI (http://jqueryui.com/ (Links to an external site.)) For JQueryUI review one of the following components: Autocomplete, Datepicker, Checkboxradio, Controlgroup, Selectmenu, progressbar, slider, spinner and tooltip. Visit BootStrap (http://getbootstrap.com/components/ (Links to an external site.)). Review one of the Bootstrap components that are similar to the one you picked on JQueryUI. Compare and contrast how the two forms appeared in the browser, and the functionality.

Tables

Review 1 web sites that include tables. Cite the web sites you visited. Describe what content was displayed in the table and the design and layout of the table. Was the table visually appealing? Describe in detail how the web site use html attributes and style rules to configure the appearance and layout of the table, table rows, header cells and data cells.

Explanation / Answer

Selectmenu - JqueryUI

Duplicates and extends the functionality of a native HTML select element by which it overcomes the limitations of the basic HTML control.This Control transforms a <select> element into a themeable and customizable control which enhances the UI and makes it Responsive . The widget acts as a proxy to the original <select>; hence the state of the original element is maintained during form submission and serialization.

Selectmenu supports <optgroup> elements and custom markup to render specific presentations like multiple lines. The <select> and its options can be disabled by adding a disabled attribute to the element.

Dropdown-Bootstrap

Dropdown menus are more responsive controls as they are toggleable and provides options with contextual menus for displaying links in a list format. Using Javascript we can enrich interactiveness with the user. By using class=”.dropdown” in the element tag to make it dropdown.Dropdowns are automatically positioned using CSS within the normal flow of the document and it is custmizable.

Compare & Contrast

Property(Pros/Cons)

Bootstrap

Jquery UI

Appearance

Appears very professional

Appears to be outdated design

Compatibility

All latest browsers are compatible but some of the older versions of browser may not support.

Supports almost all browsers.

Updates

They often add new features and release updates

No frequent updates

Visit the following link to see the table with lots of features:http://www.nasdaqomxnordic.com/shares .

Th table clearly enables the user to search based on value in each columns,the columns are sortable either in the ascending /descending order or increasing/Decreasing order, highlights values with different colors,attach files to columns. Thus table holds all the information in easy understandable format.

Table is an excellent way to present your data, information about the data in easy understandable format with appealing layout .Not only for pricing sites, depending on the content/information you want to convey to the user, tables can be used to arrange many kinds of data with good clarity.

Tables are created using the table element which uses both a start and an end tag. The <table>...</table> tags are required to contain at least one set of <tr>...</tr> tags which themselves are required to contain at least one set of <td>...</td> tags. Each set of <tr>...</tr> tags creates one table row while each set of <td>...</td> tags creates one table data cell.

The rules attribute allows you to set borders (also called rules, surprise, surprise!) inside the table at the boundaries between cells.

Example:

<table rules="rows">
<tr>
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr>
    <td>January</td>
    <td>$100</td>
</tr>
</table>

The rules attribute specifies which parts of the inside borders that should be visible. The <table> rules attribute is not supported in HTML5. Use CSS instead.

HTML Table rule syntax :<table rules="value">

And using Javascript we can customize ,add sorting buttons, attach files to the column cells, highlight columns.