What are the basics in the web application for production environment?

 UX/UI Design:

       Every time you interact with users, and you have access to precious information. We can design a useful and usable system if you have a good understanding of the individuals and how they currently complete the given task. The user experience making the product or service easier to use and optimizing the experience of the user. Generally, UX work should support inside your organization. If the UX does not support the infrastructure in the enterprise, the harder you have an impact and influence on the design. If you are a UX designer, you need to think about the work more efficiently or have a larger impact on the organization. There are 3 fundamentals in good design. Those are,

   1. Affordance

   2. Signifiers

   3. Feedback

       The good designs are characterized by effective, efficient, and satisfying to the user. The interface is usable if the user can understand the input that will lead to the desired output. Affordance relates to the output of the user interface. It refers to the perceived and actual properties of things or the fundamental properties that determine the things that could possibly be used.  The affordance tells us what actions are possible and the signifier tells us where the action takes place. A signifier includes a textual label. Usable design requires the output of the user actions to be visible. So, it is related to the feedback. Feedback requires sending back the user information about what system input has occurred. So, we design and build to the people in 2 categories. Those are,

   1. Business to Business(B2B)

   2. Business to Consumers(B2C)

     B2B people are visiting the website to enable the business tasks and business activities. They use it for doing it during the day. So, when you are designing for B2B users, we want to know their job roles and daily responsibilities. The process and the issues that they encounter are matter to you. You need to figure out the specific process, tasks, or end goal and the problems or obstacles or inefficiencies they deal with.

    If the product is directly used by the consumer, then it is called as B2C. In B2C, we are not asking the daily work habits, company goals, and assignments. Those factors have less influence on their use of our website or purchasing decisions. We are not solving problems or suggest solutions. We need to figure out what it frustrates, tasks that puts-off, often visiting the website, and use the website. When you walk through their process and you can get the clue of something. So, when you do on your website that eliminates the use of their thing. 

Basics of  HTML:

     The user does not care about the HTML code. But, they are interested in the final Web Page. The web browser translates the HTML code to the web page. Different HTML versions take different actions in your browser. So, declare it as < ! DOCTYPE html> in the very first statement of the html file and should not leave any whitespace before it. But the version declaration of XHTML is complicated. There is Strict and Transitional version declaration in XHTML. You can get more information in the declaration document. There are 3 audiences in the HTML code. Browser translating our code to HTML page. The browser is the first audience and the website user is the second audience. Nowadays, website users are brought by search engines. So, SEO is the third audience. The meta tag carries the information of the search engine browser, and not for the website user. There are 2 types of meta tags,

                                     name META              eg.,  <meta name=' ' content=' ' />

  <meta/>{       

                                    http-equiv META      eg.,  <meta http-equiv=' ' content=' ' />

Both will work on the attribute of content. The name meta mainly provides the information to the search engine. There are 6 kinds of commonly used name meta. Those are,

   1. Keywords

   2. Description

   3. Author

   4. Copyright

   5. Generator

   6. Robot

The keywords and descriptions are used to describe the content of the web page and act as a name card. The search engine takes these meta tags into considerations when analyzing the web page. The ownership of the webpage described by the name Author and Copyright. The generator meta describes backend technology. For ex, if the website is powered by django, you can set the content attribute value to django. The robot meta is important to decide that the webpage is open for the search engine or not. We can set to "all" for the maximum SEO results and set to "none" for maximum privacy. The http-equiv META can be used to auto-renewal and redirecting the webpage. For ex, 

  <meta http-equiv='refresh' content=5;http://www.creativewebgraphic.com/>

This will redirect our web page to another website by 5 sec later.

Creating Web Pages: 

       The web pages display the 4 kinds of information like text, images, videos, and audios. Developing the complete website from top to bottom is the static website. But, the dynamic websites do not have real web pages. The web pages are generated from the back-end program. So, it does not require a complete web page. The way dynamic websites create their web pages is lots like filling the forms. Each form is an empty mini page template. Based on the user request, it will retrieve data from the database and put it into the corresponding mini template. In the end, all filled mini templates will be assembled in a pre-defined order. This is how dynamic web sites create their web pages. The front-end development for dynamic websites is mainly about creating many templates.

       The webpages are made up of 3 parts like header, footer, and main body. In the header, you can see the logo, navigation bar, and search box. If the website contains the registration and login system, the header has register and login button. The copyright declarations, contact us, the privacy policy is included in the footer area. Most of the information is displayed in the main area. The websites can have the sidebar for better navigation. The main area can also be divided into several mini templates. The use of the same mini template repeatedly is the typical characteristic of a dynamic website. So, we only need to develop one mini template irrespective of the information we need to present for dynamic websites.

Working on a Project:

    

             Before developing any project, it is important to analyze the page structure. To adopt a web page with different device screens, you must familiar with the structure. When you do the program analysis of the above page, there are 4 visible parts inside the container. The page elements are placed inside the container. The width of the header is designed by the parent DIV. But, the width of the Main, Sidebar, and Footer are fixed. These things need to take care of the media query. To display the main area, and sidebar in the same line, we need to float them. So, this won't generate the height for the parent element. It actually interacts with flow elements defined behind them. 

             Another property on the website is the carousel. Carousel is a window that switches the images. The carousel is made up of 3 parts. The image and the two buttons that are displayed on top of the image. As a programmer, you should identify the invisible part. The parent DIV holding the image with two buttons. So, the program blueprint is,

      * Create the parent DIV. then, put both the image and the two buttons into it.

      * The size of the parent DIV is the same as the image. So, the vertical center overlaps the image vertical center. Then, set the buttons to the absolute position, and the parent DIV to the relative position. 

     * Now, the parent DIV is the reference object to the two buttons. 

     * Finally, move two buttons to the vertical center of the parent DIV using TOP 50% and margin-top minus their half-height for final adjustment.

           If you see the menu structure, you can divide the parent and child div so that you can place the menu items appropriately. For the Registration and Login page. you need to create a complete static web page. It has the header, footer, and main area. So, you need some analysis and check out for how many levels/lines in the main area and figure out how to design our code. 

Modal Creation: 

          Modal is a half-transparent cover in the center that will usually be a login form or message board. By clicking the rest of the cover, it will disappear. The Login area DIV floated on top of all page elements or above the cover. Therefore, set its position to absolute and give the biggest index value and move it to the center of the browser window(top:50%; left:50%). Then, do the final adjustment of margin-top and margin-left for the correct position.

OTP System:

          One Time Password system is the concept to prevent spam and unwanted hack on websites or mobile applications. The OTP integrated website secures individual user data online. It is an automatically generated numeric or alphanumeric strings that help in authentication of a single transaction or session of a particular user. It always works according to its program. Mostly, it is used on the Registration/Login System of customer panel and other websites for payment transactions. There are 2 types of OTP system. Those are,

    1. Mobile Based OTP System

    2. Email Based OTP System

For a mobile-based OTP system, you need to buy bulk SMS service from the SMS service provider and this will cost you an amount. But, if you have a budget constraint, you can send OTP via email to your users for authentication of any transaction or session.