Ite212 Web Systems and Technologies PDF

COLLEGE OF ENGINEERING AND INDUSTRIAL TECHNOLOGY INFORMATION TECHNOLOGY DEPARTMENT ユサ ジヂ ITE212 | Web Systems and Technologies ンコ...

COLLEGE OF ENGINEERING AND INDUSTRIAL TECHNOLOGY INFORMATION TECHNOLOGY DEPARTMENT ユサ ジヂ ITE212 | Web Systems and Technologies ンコ ン ITE212 | Web Systems and Technologies ユサ LECTURE 01 ジヂ INTRODUCTION TO WEB SYSTEMS AND TECHNOLOGIES ンコ ン INTERNET AND ITS HISTORY ▪ A collection of computer networks that use a protocol to exchange data ▪ Began as a US Department of Defense network called ARPANET (1960s-70s) ▪ Packet switching (in the 60s) ▪ E-mail is born on 1971 ▪ TCP/IP beginning on 1974 (Vinton Cerf) ▪ USENET (1979) ▪ By 1987: Internet includes nearly 30,000 hosts ▪ WWW created in 1989-91 by Tim Berners-Lee ▪ Popular web browsers released: Netscape 1994, IE 1995 ▪ Amazon.com opens in 1995 ▪ Google January 1996 ▪ Wikipedia launched in 2001 ▪ MySpace opens in 2003 ▪ Facebook February 2004  History of the Internet (Video Clip) credits: picolsigns https://www.youtube.com/watch?v=9hIQjrMHTv4  There is no modern world without Internet (Video Clip) credits: nbc news https://www.youtube.com/watch?v=-yqI6W8Ihes WEB TECHNOLOGY refers to the various tools and techniques that are utilized in the process of communication between different types of devices over the internet. WEB BROWSER is used to access web pages. Web browsers can be defined as programs that display text, data, pictures, animation, and video on the Internet. HYPERLINK Are resources on the World Wide Web can be accessed using software interfaces provided by Web browsers. WORLD WIDE WEB (WWW) The World Wide Web is based on several different technologies : Web browsers, Hypertext Markup Language (HTML) and Hypertext Transfer Protocol (HTTP). WEB SERVER Web server is a program which processes the network requests of the users and serves them with files that create web pages. This exchange takes place using Hypertext Transfer Protocol (HTTP). WEB PAGES A webpage is a digital document that is linked to the World Wide Web and viewable by anyone connected to the internet has a web browser. WEB DEVELOPMENT Web development refers to the building, creating, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. WEB DEVELOPMENT CAN BE CLASSIFIED INTO TWO WAYS: FRONTEND DEVELOPMENT The part of a website that the user interacts directly is termed as front end. It is also referred to as the ‘client side’ of the application. WEB DEVELOPMENT CAN BE CLASSIFIED INTO TWO WAYS: BACKEND DEVELOPMENT Backend is the server side of a website. It is the part of the website that users cannot see and interact. It is the portion of software that does not come in direct contact with the users. It is used to store and arrange data. FRONT-END LANGUAGES HTML stands for Hypertext Markup Language. It is used to design the front-end portion of web pages using a markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. The markup language is used to define the text documentation within the tag which defines the structure of web pages. CSS Cascading Style Sheets fondly referred to as CSS is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page. FRONT-END LANGUAGES JavaScript JavaScript is a famous scripting language used to create magic on the sites to make the site interactive for the user. It is used to enhancing the functionality of a website to running cool games and web-based software. AJAX Ajax is an acronym for Asynchronous Javascript and XML. It is used to communicate with the server without refreshing the web page and thus increasing the user experience and better performance. There are many other languages through which one can do front-end development depending upon the framework for example Flutter user Dart, React uses JavaScript and Django uses Python, and much more. FRONT-END FRAMEWORKS AND LIBRARIES HTML JavaScript ReactJS JavaScript Technology ▪ Next.js CSS ▪ ES6 ▪ Ant Design CSS Frameworks ▪ TypeScript ▪ React Desktop ▪ Bootstrap ▪ React Rebass ▪ Tailwind CSS JavaScript Frameworks ▪ React Bootstrap ▪ Bulma AngularJS ▪ React Reactstrap ▪ Foundation ▪ Angular ngx Bootstrap ▪ Blueprint.js ▪ Primer CSS ▪ Angular PrimeNG ▪ React Suite ▪ Spectre CSS ▪ Angular Material UI ▪ React.js Evergreen ▪ Materialize CSS ▪ React Material UI ▪ Onsen UI VueJS P5.js ▪ Semantic UI ▪ Nuxt.js Fabric.js ▪ Blaze UI script.aculo.us D3.js ▪ Pure CSS Collect.js ▪ Tachyons JavaScript Libraries Underscore.js jQuery Lodash CSS Preprocessors ▪ jQuery UI TensorFlow.js ▪ SASS ▪ jQuery Mobile ▪ LESS ▪ jQWidgets ▪ jQuery EasyUI BACK-END LANGUAGES PHP is a server-side scripting language designed specifically for web development. Since PHP code executed on the server-side, so it is called a server-side scripting language. Node.js is an open-source and cross-platform runtime environment for executing JavaScript code outside a browser. You need to remember that NodeJS is not a framework, and it’s not a programming language. Most people are confused and understand it’s a framework or a programming language. We often use Node.js for building back-end services like APIs like Web App or Mobile App. It’s used in production by large companies such as Paypal, Uber, Netflix, Wallmart, and so on. Python Python is a programming language that lets you work quickly and integrate systems more efficiently. BACK-END LANGUAGES Ruby is a dynamic, reflective, object-oriented, general-purpose programming language. Ruby is a pure Object-Oriented language developed by Yukihiro Matsumoto. Everything in Ruby is an object except the blocks but there are replacements too for it i.e procs and lambda. The objective of Ruby’s development was to make it act as a sensible buffer between human programmers and the underlying computing machinery. Java is one of the most popular and widely used programming languages and platforms. It is highly scalable. Java components are easily available. JavaScript can be used as both (front end and back end) programming. BACK-END LANGUAGES Golang Golang is a procedural and statically typed programming language having the syntax similar to C programming language. Sometimes it is termed as Go Programming Language. C# is a general-purpose, modern and object-oriented programming language pronounced as “C sharp”. DBMS The software which is used to manage database is called Database Management System (DBMS). BACK-END FRAMEWORKS AND LIBRARIES PHP Java Framework: Laravel Framework: Spring, Hibernate CMS: WordPress C#: NodeJS Framework:.NET Framework: Express Database: Python Relation Database: Framework: Django Postgre SQL Package Manager: Python PIP MariaDB MySQL Ruby NoSql Database: Framework: Ruby on Rails MongoDB Data Format Format of data is used by web applications to communicate with each other. It is light weight text based data interchange format which means, it is simpler to read and write. Below are two common data formats used in web development. XML Extensible Markup Language (XML) is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine readable. JSON JSON or JavaScript Object Notation is a format for structuring data. API API is an abbreviation for Application Programming Interface which is a collection of communication protocols and subroutines used by various programs to communicate between them. Web Protocols Web protocols are set of rules followed by everyone communicating over the web. HTTP The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients and servers. HTTP works as a request-response protocol between a client and server. A web browser may be the client, and an application on a computer that hosts a website may be the server. Other Protocols ▪ TCP/IP Model Transmission Control Protocol / Internet Protocol ▪ UDP User Datagram Protocol ▪ FTP File Transfer Protocol ▪ SMTP Simple Mail Transfer Protocol ▪ SOAP Simple Object Access Protocol GRAPHICS Graphical elements are one of the key feature of any webpage. They can be used to convey important points better than text does and beautify the webpage. Canvas The HTML “canvas” element is used to draw graphics via JavaScript. SVG SVG stands for Scalable Vector Graphics. It basically defines vector-based graphics in XML format. COLLEGE OF ENGINEERING AND INDUSTRIAL TECHNOLOGY INFORMATION TECHNOLOGY DEPARTMENT ITE212 | Web Systems and Technologies ITE212 | Web Systems and Technologies LESSON 02 WEB PAGE DEVELOPMENT USING HTML OBJECTIVES § To understand the basic HTML concepts. § To discover how web pages are developed using HTML § To identify the different HTML tags and how each tag is used in an HTML document. What can you do with HTML? What type of pages would you like to build? Hyper Text Markup Language (HTML) § The most widely used language for developing web pages § The standard markup language for creating web pages § The set of markup symbols or codes used to display on the Internet. § The primary language standard used to organize and format web pages and other documents on the World Wide Web. § It defines the structure of websites and formats web pages. § It uses tags and attributes to describe the structure and formatting of a web page. § HTML is a markup language behind the appearance of documents on the World Wide Web. § HTML allows elements such as text, images, multimedia, and other files to be bought together and presented as a collection. § HTML is not case sensitive, therefore it can accept both uppercase and lowercase and title case letters. What can you do with HTML? E-commerce/Online store designed to sell products or services online, often with the ability to process payments and manage inventory. Business websites promote a specific company, its products, or its services. Portfolio sites showcase the work of an individual or company, usually in a creative industry. Personal blogs express the views and opinions of an individual, usually through blogs or other forms of personal content. Membership sites offer exclusive access to content, products, or services to registered users who have paid a fee or subscription. Educational websites provide educational resources and information to students and teachers, often with interactive features and multimedia content. News and Media websites deliver news and current events to readers, often in a timely and engaging manner. Non-profit websites promote a specific cause or mission and solicit donations or volunteers from the public. Basic HTML Document This is document title This is a heading Document content goes here..... Basic HTML Document OUTPUT This is document title This is a heading Document content goes here..... HTML TAGS § TAGS are used to denote the various elements in an HTML document. § HTML Tags consist of a left angle bracket () § Tags are usually paired to start and end the tag instruction. § The end tag looks just like the start tag except for a slash (/) that precedes the text within the brackets. § Start and end tags are also called opening tags and closing tags, respectively. Example: content HTML TAGS § Not all HTML tags have close tags such as the and tags. § Some elements may include an attribute, which is additional information that is included inside the start tag. § The attribute is a way of describing the element’s properties. Example: this text would be blue HTML ELEMENTS § HTML element is everything between the start tag and the end tag, including the tags. paragraph HTML ELEMENT SYNTAX § An HTML element starts with a start tag/opening tag § An HTML element ends with an end tag/closing tag § Some HTML elements have empty content § Empty elements are closed in the start tag § Most HTML elements can have attributes HTML elements with no contents are called empty elements is an empty element without a closing tag tag defines a line break Adding a slash inside the start tag, like , is the proper way of closing empty elements HTML ATTRIBUTES § Attributes provide additional information about HTML elements. ü HTML elements can have attributes ü Attributes provide additional information about an element ü Attributes are always specified in the start tag ü Attributes come in name/value pairs like: name="value" § Always Quote Attribute Values § Attribute values should always be enclosed in quotes. § Double style quotes are the most common, but single style quotes are also allowed. In some rare situations, when the attribute value itself contains quotes, it is necessary to use single quotes example: name=‘Stephen “Baby Faced Assassin” Curry’ Use lower case attributes Attribute names and attribute values are case-insensitive HTML Page Structure § Below is a visualization of an HTML page structure HTML TAGS HTML § The first page structure tag in every HTML page is the tag. § The element represents the root (top-level element) of an HTML document also called the document element as it defines the whole HTML document. § All other elements must be descendants of this element. § All the text and HTML commands in your HTML page should go within the beginning and ending HTML tags.....your web page.... HTML TAGS HEAD § The tag specifies that the lines within the beginning and ending points of the tag are the prologue to the rest of the file. Your Page Title...your page content… HTML TAGS BODY § The remainder of your HTML page, including all the text and other content (links, pictures, and so on) is enclosed within a TAG. § The HTML element represents the content of an HTML document. § There can be only one element in a document. My Page Title...your page content… HTML TAGS Tag Attributes 1. BACKGROUND – sets a background image to your page There is an exclamation point after the opening bracket, but not before the closing bracket. HTML Line Breaks § Use the