Archive for the ‘ Html ’ Category

NodeJS Loopback

Looks very promising, I think I will give it a try these days.

Wonderful new world of nodejs!

About LoopBack.IO

  • Use the CLI to generate REST APIs
  • Connect devices and browsers to data and services
  • Open Source and extensible

Set up models and create REST APIs in minutes

  • Easy-to-use CLI wizard
  • Create models based on your schema if you have one
  • Create dynamic models if you don’t
  • Built-in API Explorer

Model relation support

  • Define hasMany, belongsTo, hasAndBelongsToMany relationships
  • Automatically generates corresponding REST endpoints

Easy authentication and authorization setup

  • Built-in role-based access controls
  • oAuth user and registration models baked in
  • Add custom policies using CLI or JSON
  • Browser support (JSONP and CORS)

MIT open-source license

Client SDKs

Native Mobile and Browser SDKs

  • Easily persist data with a database API on the client
  • Store files, send push notifications, and call custom server-side code
  • Android / Java
  • iOS
  • Browser JavaScript (Angular)


Connect to backend data stores

  • MySQL, Oracle, MongoDB, and others
  • Other REST services
  • Discovery APIs for Oracle and MySQL

Run ad-hoc queries

  • Run dynamic queries on devices, browsers and the server
  • Support for NoSQL-style queries against relational databases

Mobile Services

Send push notifications

  • Backend push system with simple API calls
  • Supports both Android and iOS


  • Validate and store geolocations
  • Find nearby results with geo filters

ProgressBar div

This little snippet is to demonstrate how easy it is to insert and to control a progress bar in your html code:


33 %

Resting 77% !!

Styles css:

.container {
	position: relative;
	height: 20px;
	width: 550px;
.bar-container {
	position: relative;
	float: left;
	height: 15px;
	width: 300px;
	border: solid 1px #AAA;
	background: #EEE;
	overlow: hidden;
.progress-bar {
	position: absolute;
	height: 100%;
	width: 33%;
	background: #F60;
.progress-label {
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 11px;
	font-family: Helvetica,Arial;
	font-weight: bold;
	padding-top: 1px;
.text-info {
	position: relative;
	float: left;
	height: 15px;
	width: 202px;
	left: 20px;
	font-size: 15px;
	font-family: Helvetica,Arial;
	font-weight: bold;
	padding-top: 1px;

The structure of the html elements:

<input type="button" value="less" onclick="doLess()"/>
<input type="button" value="more" onclick="doMore()"/>
<select id="stepper">
<option value="1">1</option>
<option value="2">2</option>
<option value="5">5</option>
<option value="10" selected="true">10</option>
<option value="20">20</option>
<div class="container">
	<div class="bar-container">
		<div class="progress-bar" id="progress_bar">
		<div class="progress-label" id="progress_label">33 %
	<div class="text-info" id="text_info">Resting 77% !!

The javascript to animate the progress bar:

initial_progress = 33;
stepper = 10;
document.getElementById('progress_bar').style.width = initial_progress + "%";
function actualizeStepper() {
	stepper = document.getElementById('stepper').value;
	stepper = parseInt(stepper);
function actualizeNumbers() {
	document.getElementById('progress_bar').style.width = initial_progress + "%";
	document.getElementById('progress_label').innerHTML = initial_progress + "%";
	document.getElementById('text_info').innerHTML = "Resting: " + initial_progress + "%!! ";
function doMore() {
	if ((initial_progress + stepper) <= 100) {
		initial_progress += stepper;
function doLess() {
	if ((initial_progress - stepper) >= 0) {
		initial_progress -= stepper;

Embeded WMP

This is to make the little player working, which is on my page to descibe how to integrate the Windows Madia Player to a html page!

<object ID="MediaPlayer1" width=165 height=48 
        standby="Loading Microsoft® Windows® Media Player components..." 
  <param NAME="AutoStart" VALUE="True">	
  <param NAME="FileName" VALUE="1.mp3">
  <param NAME="ShowControls" VALUE="true">
  <param NAME="ShowStatusBar" VALUE="true">
  <embed type="application/x-mplayer2" 
	pluginspage =""