jatin002

[jatin002]

Why and how to make the website responsive?

In the old days the websites used to be opened only on the computer screens. Hence, they were designed for that devices. But now a days there are various sizes of screens available and all websites are required to be properly scaled on every screen like on mobile phone, desktop and tablet. This is the reason why the responsiveness of website should be there. Responsive website include the use of HTML and CSS to automatically enlarge, or shrink, hide and resize a website to make it compatible to all size of screens. Till now we only got to know that what is the meaning of responsive website. Now, we have to see how to achieve the responsive on any webpage. On the initial stage we have add some “meta” tags(<meta name="viewport" content="width=device-width, initial-scale=1.0">) to all the web pages. These tags are to give the instructions to the browser to se the dimension and scaling of the webpage and set the viewport of the webpage. For the entire website to be responsive, text and image should be resize automatically and in addition media queries are also used. Images are set to max-width so that on reducing the size of browser the size of image can be reduced.  With the media queries different styles can be used for different browser sizes.  For example, to change the list of div elements from horizontal to vertical with the variation of browser size, media queries are used.

[jatin002]

What is a Wireframe?

Wireframe is basic skeleton of any web page which reflects the layout of that webpage. It is created by talking to the client according to his/her convenience. It helps the designer to get an idea that what kind of appearance is needed by the client and it also give and idea to the client that how  the final website will look like. As the name suggests wire frame wire frame is simply a drawing of thin lines. Is has different different boxes used for the placement of icon and images. Creating the website and then make changes to its structure is a very difficult and time consuming task. That’s why the wireframe become more necessary here. The commencement of the software of website development starts from the wireframe structure. This is also the way of communication between the designing team to finalise the layout of website or software. Wireframes look very simple and a classic thing. There is a logic behind it. This is because I give a sense that it is not the final design. Very less number of colours are used so that one can focus on the structure of the wireframe. It appearance conveys a massage that it is all up for the discussion. We have got to know how important wireframe is, now the question arises here how to create a wire frame. So there are two answer of it. First one is, simplest one, by using pen and paper. The second method of drawing the wireframe is doing it digitally. There are many tools like Lucidchart, Webflow, Figma, Framer, Mockplus, etc.

[jatin002]

What is a server?

The general meaning of sever is something is providing something useful when asked.

In our field of work, server is simply a computer which provides the data asked by the other computers through the browser. Our desktop can also work as the sever but at a small scale and it need to remain switched on for 24*7.  Here, we are talking about the server which act as a gateway between other computers to communicate, share messages, documents. It can be used to host websites and store data. According to the size of network the size and power requirements of server varies i.e. if it is need for an institution to serve and store data locally or if it is needed to serve and store data for the users present on the “world wide web”(www). Some examples of server are:-

Database server

Mail server

Server software

File server

Web server

Game server

Think of a business, its IT stack would be incomplete without servers. These are the powerful computers which assist the business to analyse and manage devices, network data and the other data like emails and the internet.

Different types of servers are as follows:-

Mail server

It allows us to send emails to anyone, anywhere, instantly. Many of us don’t know but our email has to pass through many servers before its delivery to receiver.

Virtual server     

It is like a physical server which provide the storage for data for office on cloud. Its benefit is that it would not take office space.

Physical server

Rack, tower and blades are the three main physical servers. These servers differ by their chasis, weight, size, computing power,etc.

[jatin002]

Publishing The Website Online

Once the coding is finished and website’s content is ready, it is needed to be published to make it accessible for everyone on internet. In this blog we will talk about the process and different options to publish our website online.

It is a complex process of publishing the website because it can be done by many ways. But here in this blog we will talk about how to do it by hosting and domain name.

Getting hosting and domain name

First of all we should have a host for our website and a domain name. For having more control on the appearance many people prefer this method of publishing website. The meaning of webhosting is to get some file space from a server to store the data so that it will be available to the website users when they put query. Domain name be taken on rent from domain registrar. It is the address where people can find your website for example http://www.mozilla.org or http://www.bbc.co.uk .

Additionally we need a File Transfer Protocol(FTP) program to transfer our file to the server. We have to connect it to the server using the details given by our host(username, password, hostname). Our internet service provider may provide us limited hosting but it can only work for a small website only. For the initial experiment it could be a good idea.  Many companies provide hosting and domain name but there are some free platforms like Wordpress, Neocities, Google Sites and Blogger.

[jatin002]

API

The full form of this term is “application programming interface. It act as a communicator or more precisely a security guard between various applications. For instance Ola, Uber and Zomato need to contact the Google maps for enabling there user to access to location of their order or the delivery boy. Here the connection is not direct but they are connected through the API. The basic work of the API is to make accessible the pre existing data for the applications without any compromise to the privacy. In the current example Zomato will not ask directly to the Google Maps but the API of the Google Maps and that API will ask to Google Maps for that information. If the application provides that information, it will be visible to the user and if denied the error will be shown on user’s screen. Similarly, when we install new application and try to sign up there are already options present, sign in with Google or Facebook. By doing this they do not have to check the credentials of the users itself it is done by Google and Facebook beforehand. If the user found valid then he or she will get entry into the app and if not found it will be denied by Facebook and Google. Now the question of security arises, can the data found by the app from the source app misused? The answer is no. because the security and monitoring of the data is ensured by the API keys. A code is given to the web developer by the system which act as the source of data.

[jatin002]

WordPress is software that is used to create your own website, blog and publish it on the internet to make it accessible to everyone on internet. It is content management system which is used by most of people working the field. It was created in 2003, initially it was a blog publishing platform but with time improvement were made time to time and now it is most popular website publishing platform.  Another similar kind of platforms are JOOMLA, DROOPAL, SQURESPACE etc. WordPress provide its services to around 60% of the market. It is a free to use and a open source software, hence thousands of software engineers are out there to make it working better and better. Its beauty is that there are thousands of theme present there to use. Those are just template layouts which can be used to style and give look to your website. Here you can use different different  fonts, colour, buttons, heading, etc. You can add images, videos. You can open an online store, start a blog, newsletter, open gallery and much more. All that can be done from anywhere there internet is accessible. Now the question is that how WordPress works? Before this websites were built only by the HTML,CSS and JaveScript by coding and this coding was interpreted by web browser and shown. But after the invention of wordPress there is no need to do coding. We just have to select our theme, colour, font etc. and the all the is done by wordPress itself according to that.

[jatin002]

In the previous blog we came across a n accessory for the front end web developers called “Bootsrap”. Today we are going to understand what is it and how we can use it in our coding to make our work productive. It as world most popular front-end open-source toolkit, featuring sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins. Making the entire webpage just by HTML, CSS and JavaScript is very difficult and lenthy process. So the bootsrap play a roll here to make that process easy by such a way that it has various readymade components like header, nav bar, footer, aside, main including the styling and buttons. We just have to copy the required coding from there and put into desired place. There are other frameworks like Materialize CSS, Foundation, Sementic, etc. which can also be used for this purpose but the Bootsrap is most popular one.

To understand the whole scenario, let us take the example of styling the webpage through bootsrap.  First of all we have to go to the official website of the bootstrap and then download the pre built CSS stylesheet and link it in  our HTML coding of  website. It contains the code of thousand of lines having thousands of classes. After that we simply need to choose the desired component from the Bootsrap website for example we chose the navbar. After our selection the website will show the various styles of the  nav bar and the coding including classes for that particular style of nav bar. Here we can change the content and the classes just by altering some specific keywords. It means from the thousands of classes of the stylesheet of bootstrap we are using some specific classes for our requirement.

[jatin002]

Front End and Back End of website

As we all know, the website is a collection of web pages. In each webpage there is a part which is visible to us on the display of computer mobile etc. and another part which contain some background processes, database and server. The first one which user interact is called the front end and the second mentioned above part is called the back end of the website.

 Front end deal with the coding of the structure of website, its appearance or styling  and the layout i.e. which item should be where on the display. The  languages used in the front end are basically HTML, CSS and java script. HTML and CSS we have discussed in the previous blogs so now we are only discussing the java script.  As HTML give structure and CSS give styling to the website, java script is used to add some advanced interactive  features into the webpage like live video games, buttons, dropdown menus, animations, pop-ups, chat widgets etc. All these things take your website to the next level. Front end  coders use frameworks and library like Bootstrap, JQuery, AngulerJS, EmberJS. Frameworks are used to ensure that the content appears on all the devices correctly and the libraries helps to code smarter and faster hence save time.

Back end of the website deal with the server side. It ensures the functionality of the website. The back end developers creates site’s operations, database and application programming interface(API). They do all these tasks using the server side programming language like Java(to add dynamics into website), Python( used to write data structure algoriths)  and Ruby(used to build data server and data processing).

All the new and complex technical terms will be discussed in detail in the coming blogs.

[jatin002]

Page flow and Box modal of CSS

we all know that element is means to get printed something on web page. And CSS is applied on elements to decorate that printed content. Now we should know, where our element is going to be displayed on webpage and how much space it is going to occupy or what is the extent of an element so that we can alter that area according to our convenience. This complex thing can be understood by “Box modal”. There are four boxes one inside the another which collectively decide where our content is placed and how it is separated from the neighbouring content. These are as follows from inside out:

1.Content box

2.Padding  box

3. Border box

4. Margin box

Now, let’s understand these all boxes one by one. Content box as it name suggests wraps the text of a particular element inside it. The second one is padding which is the empty space surrounds the content box, gives convenience to reader. Its size is decided by the property called “padding”. Border box surrounds the padding and its value is given by property called “border” in units px, rem and %. Border works as the fencing to wrap up the content. It have different different styles and colours. Margin is the outer most box The value of all sides(top, right, bottom and left) can be given separately by writing four properties or collectively in one property in a fix order of top, right,bottom,left. It may happen that the margins of two content overlap each other, this is called the margin collapsing. In that case higher value of both of them will be shown on the screen.  

[jatin002]

What actually CSS is?

The full form of CSS is “cascading style sheet”. General meaning of cascading is “to pour” hence, collectively we can say that though CSS we can pour the style to our html web page. Styling is done by using attractive fonts, coloured text, background image and background colour, size of text, distance between text. It is generally said that  HTML is the skeleton of webpage and the CSS is its skin, makeup and attire which gives stylish appearance to the webpage. Now the question is how to embed styling in any html document using CSS. The answere is – it can be done by three ways .  one is inline method- applying styling attribute within element, second embedded method- by using a separate  styling element in an html document, in the third method we have to make a separate file name as “style.css” and link  it with the with the html file by a hyper-reference in head element. The third one is most used and smart technique of applying css on a webpage, through is we can give the same appearance to multiple webpages just by linking them to this externally created css file. If we talk more about external css file there are three hierarcial level in the complete process they are “selector“, “property” and the “value”. Selector is the name of place where we want to add styling, property is the type of thing we want to change like text, colour, background or margin and the value is the change in that property e.g. if it colour then what colour, if it is margin then how much margin, font-family then what font family.

[jatin002]

WEBSITE

A website is a group of web pages, each of them are designed by html, css and JavaScript. The website looks very simple have complex coding behind. When we write a query on search engine,It goes to the server and server match the keywords with the various websites and provides us the matching results. The data of all the websites is being stored in the data centres in huge hard disks and always remain ready to be accessed on something called “cloud”.

HTML

It is the basic skeleton of any webpage The full form of html is hyper text markup language. It is a language readable by the browser and used to make a website. We have to insert our content in html coding which we are willing to show on internet. The basic entity of html is the “element” which have two parts named “<starting tag>” and “</ending tag>”. Whatever we write Inbetween  these tags is going to display on the browser. Elements varies depending on the type of content we want to be displayed by browser for example, text(heading, paragraph), image, hyperlink, lists of items etc.  there are some elements used to spacialize the text like <i>, <strong>, <b> etc. For some additional information, attributes are used which are placed in the starting element just after the name of element. The common mistakes while coding in html are, not closing(/) the element and saving with wrong extension. Once the coding is done saved with ".html" extension. Then it can be run on any of the browser. 

[jatin002]

Early webpages

It was quite exiting for me to see the very first web page. It was designed by Tim Berners Lee, a British scientist working in CERN laboratory.  Actually he was the inventor of world wide web(www) initially it was designed for the communication among the scientists in CERN laboratory and they work in the different parts of world. The first web server and browser were installed at CERN. The coding  was done in NeXT computer. He developed the setup in1990. The layout was pretty simple and has all necessary information required by officials of CERN because it was designed only for them. There were no any search engine at that time hence the search facility relied on keywords. The name of very first browser was “world  wide web” and it can only be accessed in NeXT computers. Latter on in 1992 a line   mode browser was developed which could be installed on many other computers. The whole web page is designed only by html and structure was added by tables. Tables were used to keep the data aligned.

In 1993 the first search engine named “ALIWEB” was developed , it was used to provide important links to the users to get information. Its background was colored and important links were highlighted so that to grab the attention of users. Design started becoming much more complex after 1994, when”Hotwire” Added advertisement poster onto the website and gave imphasis to the styling then text. The internet started booming after that and thousands of websites were developed. The limitation of satatic HTML was overcame by javascript which further caused the excessive load to the current page lead the slow loading of the page.