Welcome again to the WebRTC series of ” Design WebRTC App “. This is the part 3 of the WebRTC Programming tutorial. I hope you might gone through the previous post of WebRTC. Through this post , i want to help you to design your first WebRTC app.
If you are new to this WebRTC App series, Please go though the previous post
- Part 1 – Design and approach for your first app
- part 2 – How to Create a server for your app
If you are completely beginner in webRTC and you want to know what is webRTC ,then go through the previous post about WebRTC technology.
- What is webRTC ? – Introduction to WebRTC
- WebRTC protocols and Api’s – WebRTC protocols , webRTC GetUserMedia API , WebRTC RTCPeerConnection API
- Why we need signaling server in webRTC ? – Signaling server in WebRTC
Let us move to start our App design. This post is completely for the client side implementation of WebRTC App. Here , I am using HTML5 with Bootstrap for the front end logic (Web page) and Javascript for back end logic.
Client side requirements
HTML5 – It is a mark up language used for designing and describing the content of world wide web (www) .
CSS – It is a style sheet rules used to style ourHTML contents .
Bootstrap – It is free and open source framework for designing the website and web applications .
Javascript – It is scripting or programming language used in web site to implement the complex logics .
Client side Implementation of WebRTC App
Now create a HTML file , let’s name it as login.html . In our Design , we have a login page with unique user name. If it’s a unique user page, user can go to webRTC home page . So now we have to create 2 HTML pages. Let’s name it as login.html and home.html.
If you want a standard HTML design, you can get free HTML templates from internet . Here i am using a template with manually writing HTML , CSS and bootstrap on top of it.
How to Include Bootstrap in HTML page ?
The following syntax is the basic HTML format for any webpages.
<html> <head> <!-- Include header files --> </head> <body> <!-- HTML body contents --> </body> </html>
What is bootstrap ? Bootstrap is a free and open source framework to design the website pages with more responsive. This is a combination of javascript ,CSS and HTML frameworks . You can check bootstrap official website for more information.
We can also use Bootstrap API’s in HTML page or in javascript pages by including their components (Bootstrap CSS , Bootstrap Javascript , jQuery etc..).
We can easily include their files inside <head></head> tag of our HTML page by using following.
<head> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head>
Here i have included jQuery plugins also . Some of the components of the bootstrap using jQuery functions.
Design your Login page for your first App
Now we can design our login page with the help of CSS and bootstrap.
I have written a small login page with the help of HTML ,CSS and bootstrap below. You can check this HTML file or you can manually write your own page if you required any additional requirements.
login.html
<html>
<head>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="loginstyle.css"/>
</head>
<body id="LoginForm">
<div class="container">
<div class="login-form">
<div class="main-div">
<div class="panel">
<h2>WebRTC App Login</h2>
<p>Please enter your unique username</p>
</div>
<form id="Login">
<div class="form-group">
<input type="username" class="form-control" id="inputUsername" placeholder="User name">
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
<p class="botto-text"> Designed by Engineering Semester</p>
</div></div>
</body>
</html>
Here for example <class=”btn btn-primary”> tag is used by bootstrap framework. When we include bootstrap CSS file package , then we can see the design of this class. Bootstrap framework providing their own design for button, textbox forms etc.
If you want to add your own styles for the HTML page, you can link your css style sheet. I have added a loginstyle.css file for the HTML page. This “CSS” page you can link same as bootstrap in <head> section of the HTML page .
loginstyle.css
body#LoginForm{ background-color: #212529;background-repeat:no-repeat;
background-position:center; background-size:cover; padding:10px;}
.form-heading { color:#fff; font-size:23px;}
.panel h2{ color:#444444; font-size:18px; margin:0 0 8px 0;}
.panel p { color:#777777; font-size:14px; margin-bottom:30px; line-height:24px;}
.login-form .form-control {
background: #f7f7f7 none repeat scroll 0 0;
border: 1px solid #d4d4d4;
border-radius: 4px;
font-size: 14px;
height: 50px;
line-height: 50px;
}
.main-div {
background: #ffffff none repeat scroll 0 0;
border-radius: 2px;
margin: 10px auto 30px;
max-width: 38%;
padding: 50px 70px 70px 71px;
}
.login-form .form-group {
margin-bottom:10px;
}
.login-form{ text-align:center;}
.login-form .btn.btn-primary {
background: #f0ad4e none repeat scroll 0 0;
border-color: #f0ad4e;
color: #ffffff;
font-size: 14px;
width: 100%;
height: 50px;
line-height: 50px;
padding: 0;
}
.botto-text {
color: #ffffff;
font-size: 14px;
margin: auto;
}
.login-form .btn.btn-primary.reset {
background: #ff9900 none repeat scroll 0 0;
}
.back { text-align: left; margin-top:10px;}
.back a {color: #444444; font-size: 13px;text-decoration: none;}
Great !! . You have designed your login page now. Next we have to add some logics for the button event handler , forms etc . We can use javascript functions for that. We can see those logics in upcoming post.
Conclusion
In this post we have discussed what is HTML file and what is bootstrap framework . I hope from this post you can understand how to write a simple HTML file and design your own HTML page. See you again !!
Recommended Posts
Leave a Reply