{"id":2408,"date":"2018-07-31T14:03:48","date_gmt":"2018-07-31T14:03:48","guid":{"rendered":"http:\/\/govinddas.com\/?p=2408"},"modified":"2018-07-26T12:14:46","modified_gmt":"2018-07-26T12:14:46","slug":"building-website-tools-trade","status":"publish","type":"post","link":"https:\/\/govinddas.com\/index.php\/building-website-tools-trade\/","title":{"rendered":"Building your own website -THE TOOLS OF THE TRADE"},"content":{"rendered":"<p>For those new to web development, the idea of creating your own web page can be daunting. But if you break down your require- ments to the bare minimum, it\u2019s easy to see that to create a bare bones static webpage with minimum styling, all you need to know is HTML and CSS. As you start building up on your website and decide to incorporate a few frills, starting with forms and pop-ups and ending with complex web application-like behaviour, you\u2019ll most likely use Javascript and its dependent frameworks. In addition, if your website would be handling large amounts of data and will need to store, update\/modify and delete said data, you\u2019ll need to incorporate custom functionality for your database. This is where server-side languages such as PHP and MySQL and frameworks such as ASP.NET come in.<\/p>\n<p><strong>HTML:<\/strong><\/p>\n<p>HTML, an abbreviation for Hypertext Markup Language, forms the back- bone of any webpage. If you open any website, right click on any point and hit \u201cView Source\u201d, you\u2019re going to see a complex jumble of HTML code, which is responsible for defining the use and designation of each element on the page, and quite often, their positioning as well. This \u201cdesignation\u201d of sorts is done with the help of commands, or tags, that tell your browser how you want your document displayed. This is pretty much what marking up your document means. It\u2019s also a basic reminder for beginners that HTML- formatted documents aren\u2019t that far removed from documents created by a word processing program, which are also basically text. So instead of man- ually typesetting certain parts of text in paragraphs, and dictating to your processor which elements you\u2019d like in bold and which in italics, you\u2019re telling your browser to do the same using a markup language called HTML. Since the early days of web design, HTML has been the standard for pro- fessional websites. It stands for Hypertext Markup Language. HTML is the language, or code, used to edit and position the text, images, frames and other web page elements. If you go to your web browser and select View and then Source \u2013 the code used to design that website is available for anyone to see.<\/p>\n<p>You can see there isn\u2019t much to the code. HTML\u00a0 syntax\u00a0 is nested, i.e, your content must be enclosed in a tag that indicates what its function is. Headings are enclosed in &lt;hx&gt;&lt;\/hx&gt; tags, where the x can range from 1 to 6, depending on the size of the text, with 1 being the largest. The head and body of the document are enclosed within corresponding brackets, as you can see. And this is just the beginning. A few more tags, and a designer can create an extremely simple webpage. The more complex the HTML, the more you can do with a site. As we\u2019ll see in the next article, there are a ton of online engines that allow people with no prior knowledge of HTML to create their own website. They allow you to create a webpage without using code and the editor assumes what HTML you need and does the work for you.<\/p>\n<p>&nbsp;<\/p>\n<h4>CSS:<\/h4>\n<p>If HTML is in charge of layout and positioning, CSS is what gives elements their styling and look. Seeing as how a lot of computer languages aim to bring modularity and clear demarcation in functioning, the main aim of CSS was to separate the positioning from the presentation, including colours, fonts and layout. This separation improves content accessibility, provides more flexibility and control in the specification of presentation characteristics and most importantly, enables multiple HTML pages to share formatting by specifying the relevant CSS in a separate .css file. This allows developers to specify rules in one place, and makes modification in larger codebases even easier. The CSS specification describes a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities (or weights) are calculated and assigned to rules, so that the results are predictable.<\/p>\n<p>In the example provided above, the earlier rule that was followed was the usage of inline CSS &#8211; all the presentational attributes of the HTML were specified within the HTML markup. More often than not, it lead to repeated description of font colours, backgrounds, borders, sizes and ele- ment alignments for similar elements. CSS allows authors to move much of that information to another file, the stylesheet, resulting in considerably simpler HTML. We can see that, though the end effect is similar, it\u2019s much easier to apply a constant effect across multiple tags, rather than doing the same in inline CSS, which leads to a tremendous amount of repetition and extreme inconvenience with a larger codebase.<\/p>\n<h4>Javascript:<\/h4>\n<p>Though in the last several years, JavaScript is been increasingly used in server side scripting and software applications, going as far as iOS and Android apps, its primary use is that of a client-side scripting language designed for use in web browsers. Initially, its uses were mostly limited to interacting with forms, giving feedback to the user and detecting when they do certain things. alert() was used to notify the user of something, confirm() to ask if something is OK to do or not and either prompt() or a form field to get user input. But it was only after browsers started supporting the Document Object Model (DOM) that Javascript began to take shape into its present form.<\/p>\n<p>The Mozilla Foundation documents define the DOM as \u201ca programming interface for HTML and XML documents. It provides a representation of the document as a structured group of nodes and objects that have properties and method\u201d. In a very abstract definition, this model was created to provide a convenient structure for programs to change document structure, style and content, with the program being a script in most cases.<\/p>\n<p>Javascript is slightly tougher to master, compared to HTML and CSS. While using frameworks like JQuery allows you to hide behind a layer of abstraction and achieve certain effects in just a few lines of code, you\u2019ll most likely end up with a very limited knowledge of Javascript. You\u2019ll be able to perform simple rollovers and slideshows, but run into big problems once real DOM manipula- tion comes into play. But if your primary aim is not to get into webpage\/webapp development, but to simply get your page up and running with minimal external effects, you can understands the basics of JQuery and get away with it. But it is best to understand what tool you\u2019re using, so as to avoid getting entangled in a massive mess of callbacks and slow page load speed.<\/p>\n<h5><strong>Javascript libraries and frameworks:<\/strong><\/h5>\n<p>Though most people start off with understanding JQuery and similar libraries\/frameworks and then try to master Javascript, it\u2019s always recom- mended to get a tight grasp on JS concepts before moving on to these frame- works. To start off, you\u2019ll have to get the basic difference between these two. Current Javascript libraries like JQuery, MooTools and YUI, are basically entire toolkits which abstract different layers, like browsers \/ DOM models \/ etc. On the other hand, frameworks such as Angular JS, BackboneJS, describe a given structure of \u201chow\u201d you should present your code, generally keeping in line with patterns such as MVC, MVP and MVVM.<\/p>\n<p>&nbsp;<\/p>\n<h4>PHP:<\/h4>\n<p>PHP is a general-purpose scripting language which is most commonly used in server-side web development, in which case PHP generally runs on a web server. Its role is to facilitate the transfer of data from an input, which is generally a file or stream or PHP instructions, to an output, which is mostly HTML, though it could be JSON, XML or binary data. Any PHP code in a requested file is executed by the PHP runtime, usually to create dynamic web page content or dynamic images used on websites or else- where. PHP is used in conjunction with a relational database management system (RDBMS). This has led to a LAMP architecture or its variants. PHP is commonly used as the \u2018P\u2019 in LAMP alongside Linux, Apache and MySQL.<\/p>\n<p>Most web hosting providers sup- port PHP for use by their clients. You can get a basic idea of PHP\u2019s popularity by noting that, as of February 2014, almost 82% of the world\u2019s websites used PHP as their server side language. With companies such as Yahoo! On its side, PHP is a pretty strong winner. But due to security, scalability and open-source development concerns, people have started turning to alternatives like Django and Ruby on Rails.<\/p>\n<p>&nbsp;<\/p>\n<h4>Django (Python):<\/h4>\n<p>Django is a high-level Python Web framework, that according to its website, \u201cencourages rapid development and clean, pragmatic design\u201d. So if you think your website will need to handle large amounts of data, Django would be an ideal choice, considering it\u2019s meant for complex, database-driven websites. Considering the point of a web framework is to avoid having to reinvent the wheel, Django takes care of that by providing user authen- tication, content administration, site-maps, RSS feeds, and other features right out of the box. And the framework has been created in such a way that updating or replacing provided code with your own custom codebase is pretty simple. If you\u2019re still unsure of how scalable or popular Django is, it would be helpful to know Google uses a variation of Django (closer to Python than Django) for its search engine. Other websites like Pinterest, Instagram ,Mozilla and The Washington Times make use of it as well.<\/p>\n<h4>Ruby on Rails:<\/h4>\n<p>Ruby on Rails (RoR) is a framework for building websites. As such, Rails establishes conventions for easier collaboration and maintenance. Considering that one of key princi- ples of RoR development is conven- tion over configuration (which basi- cally means that the programmer does not have to spend a lot of time configuring files in order to get setup since Rails comes with a set of conventions which help speed up development), it\u2019s a pretty great framework to get started with when you have lesser time to chalk out decisions methodically and need a prototype up and running in a short span of time. And while there have been concerns regarding the scalability and speed of RoR applications, there are plenty of high profile websites such as AirBnB, Channel 5 and Groupon which use RoR to power their websites, proving that Rails is a pretty good option for anyone looking for a beginning application.<\/p>\n<p><!--nextpage--><\/p>\n<h4>ASP.NET:<\/h4>\n<p>ASP.NET is a Microsoft developed open-source server-side web applica- tion framework designed for web development to produce dynamic web pages. ASP.NET Web pages, known officially as Web Forms, are the main building blocks for application development in <em>ASP.NET.\u00a0 .NET\u00a0 <\/em>is\u00a0 very big and very powerful. It is used to build large corporate applications. This power comes with an overhead though. For most websites, this is the equivalent of a supercomputer being used to perform simple arithmetic on two numbers. Moreover, ASP.NET was developed in early 2002, meaning it isn\u2019t particularly suited to modern web development, which is about agile and iterative development <em>cycles. .NET <\/em>is particularly rigid and makes rapid development much harder, which is code for longer development cycles, overblown budgets and overdue projects.<\/p>\n<p>There are two basic methodologies for Web Forms, a web application format and a web site format. Web applications need to be compiled before deployment, while web sites structures allows the user to copy the files directly to the server without prior compilation. Web forms are contained in files with a \u201c.aspx\u201d extension; these files typically contain static (X) HTML markup or component markup. The component markup can include server-side Web Controls and User Controls that have been defined in the framework or the web page.<\/p>\n<p>&nbsp;<\/p>\n<h4>Databases:<\/h4>\n<p>Any dynamic website that needs to manipulate data would require integra- tion with a database software. The most popular databases in the world operate on a relational model, and are hence called relational databases. Virtually all relational database systems use SQL (Structured Query Lan- guage) as the language for querying and maintaining the database. Oracle Database (commonly referred to as Oracle RDBMS or simply as Oracle) is an object-relational database management system, which is also the most widely used RDBMS in the world, followed by MySQL.<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p id=\"pvc_stats_2408\" class=\"pvc_stats all  \" data-element-id=\"2408\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> <img loading=\"lazy\" decoding=\"async\" width=\"16\" height=\"16\" alt=\"Loading\" src=\"https:\/\/govinddas.com\/wp-content\/plugins\/page-views-count\/ajax-loader-2x.gif\" border=0 \/><\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>For those new to web development, the idea of creating your own web page can be daunting. But if you break down your require- ments to the bare minimum, it\u2019s easy to see that to create a bare bones static webpage with minimum styling, all you need to know is HTML and CSS. As you start building up on your website and decide to incorporate a few frills, starting with forms and pop-ups and ending with complex web application-like behaviour,&#8230;<\/p>\n<p class=\"read-more\"><a class=\"btn btn-default\" href=\"https:\/\/govinddas.com\/index.php\/building-website-tools-trade\/\"> Read More<span class=\"screen-reader-text\">  Read More<\/span><\/a><\/p>\n<div class=\"pvc_clear\"><\/div>\n<p id=\"pvc_stats_2408\" class=\"pvc_stats all  \" data-element-id=\"2408\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> <img loading=\"lazy\" decoding=\"async\" width=\"16\" height=\"16\" alt=\"Loading\" src=\"https:\/\/govinddas.com\/wp-content\/plugins\/page-views-count\/ajax-loader-2x.gif\" border=0 \/><\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"aside","meta":{"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[2],"tags":[],"class_list":["post-2408","post","type-post","status-publish","format-aside","hentry","category-general-discussion","post_format-post-format-aside"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/govinddas.com\/index.php\/wp-json\/wp\/v2\/posts\/2408","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/govinddas.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/govinddas.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/govinddas.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/govinddas.com\/index.php\/wp-json\/wp\/v2\/comments?post=2408"}],"version-history":[{"count":0,"href":"https:\/\/govinddas.com\/index.php\/wp-json\/wp\/v2\/posts\/2408\/revisions"}],"wp:attachment":[{"href":"https:\/\/govinddas.com\/index.php\/wp-json\/wp\/v2\/media?parent=2408"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/govinddas.com\/index.php\/wp-json\/wp\/v2\/categories?post=2408"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/govinddas.com\/index.php\/wp-json\/wp\/v2\/tags?post=2408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}