Jimma University Web Design and Programming PDF

Jimma University Faculty of Computing and Informatics Software Engineering Program Web Design and Programming Jimma, Ethiopia.  Chapter One Introduction to the Internet and the World W...

Jimma University Faculty of Computing and Informatics Software Engineering Program Web Design and Programming Jimma, Ethiopia.  Chapter One Introduction to the Internet and the World Wide Web  Concept of the internet, historical background of the internet and standards & protocols  Comprehend the web, web terminology, and HTTP protocol architecture.  State and understand what the is Client-Server Model.  Differentiate the difference between Backend and Front-end web development  Understanding of Programming and Scripting language  Recognize universal addressing(TCP/IP, DNS) and universal protocol(HTTP, URL, HTML FTP) 2  The Internet  Internet is network of networks that use the Internet protocol suite to link billions of devices worldwide  The Internet is a global system of interconnected computer networks  Consists of millions of private, public, academic, business, government networks  A network is a group of two or more computers connected to one another for communication.  When connected to the Internet people can access services such as online shopping, listening to radio and TV broadcasts, chatting, and sending mail, accessing information, reading newspapers, and so on. 3  Cont...  Internet is an internetwork of Wide Area Networks  with gateways between them  based upon common use of TCP/IP protocols  supporting standard application services - DNS, e-mail, web  The Internet is organized by IETF, ICANN(Internet Corporation for Assigned Names and Numbers) and ISOC(Internet Society).  Internet has no central operations room or global operations manager.  Each Internet host has an IP address e.g. 137.195.13.48.  Some Internet hosts have a domain name e.g. www.macs.hw.ac.uk. 4  Cont...  Fundamental suit of communication protocol used for the internet.  TCP/IP Networks can be viewed as 4 layer structure: Layer Functionality Examples of protocols on these Internet Applicatio Interfaces directly with n user applications or users layers are: End to end (un)reliable Application: SMTP, HTTP, DNS, FTP Transport delivery of TCP or UDP packets Transport: TCP, UDP IP datagram delivery, Network Network: IP, ICMP, IPsec, IGMP addressing, routing Delivers frames, handles Link: Ethernet, 802.11, ARP, PPP Link errors, drives physical 5 transfers  Brief history of Internet  Began as a US Department of Defense network called Advanced Research Project Agency Network (ARPANET) (1960s-70s)  APRPANET main idea was to  Support packet switching–allowing multiple users to use the same communication path and  Use TCP to ensure the message is properly passed from sender to receiver  The basic purpose of ARPANET was to provide communication among the various bodies of government.[UCLA, Stanford research institution, US santa, Univeristy of Utah.]  Initial services: electronic mail, file transfer between military base, university, gov.t body.  Opened to commercial interests and most universities in the late 80s  WWW created in 1989-91 by Tim Berners-Lee  Early web browsers released: Mosaic 1992, Netscape 1994, Internet Explorer 1995 6  Amazon.com opens in 1995; Google January 1996  Brief history of Internet (Cont’d)  In 1989, Tim Berners-Lee of CERN (the European Organization for Nuclear Research) began to develop a technology for sharing information via hyperlinked text documents.  He also wrote communication protocols (Hypertext Transfer Protocol(HTTP)) to form the backbone of his new information system, which he called the World Wide Web.  The objective behind the invention of WWW was to merge the evolving technologies of computers, data networks, and hypertext into a powerful and easy-to-use global information system. 7  Brief history of Internet (Cont’d)  By Christmas 1990, Berners-Lee had defined the Web’s basic concepts, that make it possible for users to locate and share information through the Internet.  HTML (Hyper Text Markup Language): The markup (formatting) language for the web.  HTTP (Hypertext Transfer Protocol): A set of rules for transferring data across the Web (between a server and a client).  URL (Uniform Resource Locator): A kind of “address” that is unique and used to identify to each resource on the web. 8  Brief history of Internet (Cont’d)  In 1990, he had written the first browser/editor (“WorldWideWeb.app”) and Server Software.  info.cern.ch was the address of the world's first web server, running on a NeXT computer at CERN.  By the end of 1990, the first web page was served on the open internet: http://info.cern.ch/hypertext/WWW/TheProject.html  The world's first web page address provided information about the World Wide Web project.  In 1991, people outside of CERN were invited to join this new web community.  On 30 April 1993, CERN issued a statement putting the Web into the public domain, ensuring that it would act as an open standard. The move had an immediate effect on the spread of the web. 9  Brief history of Internet (Cont’d)  In 1993, a team at the University of Illinois’ National Center for Supercomputing Applications released Mosaic, the first Web browser to become popular with the general public.  In 1994, Tim BL founded the World Wide Web Consortium (W3C), an organization that brings together representatives from many different technology companies to work together on the creation of web technology specifications. The aim was to standardize and develop the Web further.  By the end of 1994, the Web had 10,000 servers - of which 2000 were commercial - and 10 million users.  The next few years saw the launch of websites such as Yahoo (1994), Amazon (1995), eBay (1995) and Google (1998). 10  Web Terminology  World-Wide-Web (WWW): Tim Berners-Lee, a physicist in Switzerland, invented the World Wide Web in 1992 as a way to organize and access information on the Internet.  Web browser: is a program that runs on users' computers and allows them to view and interact with the web pages on the World Wide Web.  The most common web browsers are called Internet Explorer and Google Chrome.  Hypertext: is a text document that contains links to other text documents  It allows a user to move from one web page to another by using a mouse to click on special hypertext links. 11  Web Terminology (Cont’d)  Webpage: is a single document that may contain text, graphics, and icon.  They are created using HTML.  Web site: It is a group of well-structured and interlinked webpages.  Uniform Resource Locator (URL): To visit a Web site, users type the URL, which is the site's address, into the web browser. 12  Web Terminology (Cont’d)  Web server: is a computer that stores a website, and is responsible for checking requests for viewing that website.  Internet Service Provider (ISP): A company that provides Internet connections to customers.  Protocol: It is a set of rules that govern communication.  Hypertext Transfer Protocol (HTTP/HTTPS): It is a communications protocol.  It defines the mechanism for communication between the browser and the web server.  It is also called request and response protocol because the communication between browser and server takes place in request and response pairs. 13  Web Terminology (Cont’d)  Hypertext Markup Language (HTML): It is the language used to write web pages on the WWW.  Extensible Markup Language (XML): It is an alternative language for writing web pages.  HTML pages describe the format of the data’s presentation, whereas, pages written in XML describe only how the data is structured.  World Wide Web Consortium (W3C): It is a group of experts who meet regularly to develop common protocols for the evolution of the WWW 14  World Wide Web  The Web (World Wide Web) consists of information organized into Web pages containing text and graphic images.  It contains hypertext links or highlighted keywords and images that lead to related information.  A collection of linked Web pages that has a common theme or focus is called a Web site  The World Wide Web is a combination of all resources and users on the Internet that are using the Hypertext Transfer Protocol (HTTP).  A broader definition comes from the World Wide Web Consortium (W3C)  “The World Wide Web is the universe of network-accessible information” 15  World Wide Web (cont...)  The original and still very common document type is a web page formatted in Hypertext Markup Language (HTML)  This markup language supports plain text, images, embedded video and audio contents, and scripts (short programs) that implement complex user interaction.  The HTML language also supports hyperlinks (embedded URLs) which provide immediate access to other web resources. Web navigation is the common practice of following such hyperlinks across multiple websites.  Web applications are web pages that function as application software. The information on the web is transferred across the Internet using the Hypertext Transfer Protocol 16 (HTTP).  World Wide Web(cont...)  Berners-Lee created WWW by bringing together three technologies that were already in development at the time:  Markup Language – a system of instructions and formatting codes embedded in the text. Or it is the language used to describe the insides of web documents.  Hypertext – a means of embedding links to other documents, images, and other elements in a document. Or it is the language used to describe how these documents are sent over the internet.  Internet – a global network of computers where clients request service and servers provide services  Tim Berners-Lee developed HTTP as a networking protocol for distributing documents and wrote the first web browser.  HTTP is a simple request/response protocol in which a Web browser asks for a document, and the Web server returns the document in the form of an HTML data stream preceded by a few descriptive headers. 17  Client-server architecture  Client-Server Architecture is a computing model in which the server hosts, delivers, and manages most of the resources and services to be consumed by the client.  This type of architecture has one or more client computers connected to a central server over a network or internet connection.  It is also known as a networking computing model or client/server network because all the requests and services are delivered over a network. 19  Cont’d  Clients are the typical web user's internet-connected devices and web-accessing software available on those devices.  The client is capable of receiving information or using a particular service from the service providers (Servers).  Server is a remote computer that provides information (data) or access to particular services.  It stores webpages, sites, or apps. It provides services like file transfer, web service, email service, DNS, Dynamic host configuration, and database.  When a client device wants to access a webpage, a copy of the webpage is downloaded from the server onto the client machine to be displayed in the user's web browser. 20  Cont’d  Client computers that provide an interface to allow a computer user to request services of the server and to display the results the server returns.  Servers wait for requests to arrive from clients and then respond to them. 21  Cont...  Web applications are software programs that run on web servers and are accessed through web browsers over the internet.  Web-based applications provide the advantage of accessibility across different devices and operating systems without the need for installation or updates.  Web-based applications are often multi-tier applications (sometimes referred to as n-tier applications) that divide functionality into separate tiers (i.e., logical groupings of functionality) 22  Multi tier…  The bottom tier (also called the data tier or the information tier) maintains the application’s data.  This tier typically stores data in a relational database management system (RDBMS).  The middle tier implements controller logic, presentation logic and business logic to control interactions between the application’s clients and its data.  The middle-tier controller logic processes client requests (such as requests to view a product catalog) and retrieves data from the database.  The middle-tier presentation logic then processes data from the information tier and presents the content to the client. Web applications typically present data to clients as HTML documents.  Business logic in the middle tier enforces business rules and ensures that data is reliable before the application updates a database or presents data to users.  Business rules dictate how clients access data and how applications process data.  The top tier, or client tier, is the application’s user interface, which gathers input and displays 23 output.  Request response procedure  At its most basic level, the request/response process consists of a web browser asking the webserver to send it a web page and the server sending back the page.  The browser then takes care of displaying the page 24  Request response…  For dynamic web pages, the procedure is a little more involved, because it may bring both PHP and MySQL into the mix. 26  HTTP Architecture  Defines a set of commands understood by a web server and sent from a browser  HTTP is the method computers and servers use to request and send information.  For instance, when someone navigates to cloudflare.com on their laptop, their web browser sends an HTTP request to the Cloudflare servers for the content that appears on the page.  Then, Cloudflare servers send HTTP responses with the text, images, and formatting that the browser displays to the user.  Some HTTP commands (your browser sends these internally)  GET resource -- requests data from a specified resource  POST resource -- submits data to be processed to a specified resource  PUT resource -- uploads a representation of the specified URL  DELETE resource -- deletes the specified resource  It is a protocol that enables communication between the browser and the web server 28  Cont...  HTTP is a stateless protocol  Each request a browser sends to a web server is independent of any other request.  HTTP conversation involves the exchange of HTTP messages.  Is either a request from the client to the server or a response from the server to the client  Messages are composed of:  A message body (optional)  A startline: describing the requests to be implemented and their status of whether successful or a failure. This start-line is always a single line.  One or more header fields  An empty line – indicating the end of the header fields 29  Cont... Messages Body: Start line  HTTP requests are messages sent by the client to  HTTP messages are how data is exchanged initiate an action on the server. between a server and a client.  Their start-line contains three elements:  Used to carry an entity-body  An HTTP method like GET, PUT, POST,  May be divided into chunks and sent HEAD, or OPTIONS), that describes the action to  Optional i.e. messages are not required to have be performed. a message body  The request-target, usually a URL, or the  Some messages cannot even have a absolute path of the protocol, port, and domain are usually characterized by the request context. message body  The HTTP version, which defines the structure of the remaining message, acting as an indicator 30 of the expected version to use for the response  Cont... HTTP Header General Header:  All header fields follow the same generic format Used to specify properties of the transfer  Each header field consists of a name followed by and colon process (:) and a value: Examples:  Header-name: value Connection: close – the client wants to  The order of the header field is insignificant close the connection when the first response is complete  The header fields can be: Cache-control – the client can specify  General headers additional properties if the requested  Request headers resource is cached (e.x. age) Date  Response headers Transfer-Encoding  Entity headers 31  Cont... Request Headers Response Headers Add additional information about the request  More information, in addition to the status line May include information about the client/sender,  May contain information about the server or including client capability resource Examples:  Accept - acceptable media types for response  Examples:  Accept-Charset – acceptable character set  Age – an estimate of time since the response  User-Agent – client browser was generated …  Location – used to redirect to a different location (URI)  Proxy-Authenticate – proxy authentication challenge  Server – information about the web server software 32  …  Cont... Entity Headers HTTP Request  Give meta-information about the entity-  The request line contains three parts: body (message body) being transferred  Request method, Request URI, HTTP Version  Apply only if a message body exists  Request method  GET (or retrieve) information from the server  Examples:  POST (information) back to the server  Content-Encoding – indicates the type  HEAD – like GET but only returns meta information of content encodings applied (e.x.  PUT (information) at the server zipped)  DELETE (information) from the server  Content-Language – the language of the  HTTP Version intended audience  Used by the sender to notify the receiver of its  Content-Length – size of the entity-body abilities (message body)  Included in the first line of the message  Expires  Format: HTTP/. E.x. HTTP/1.1 33  …  Request URI  Cont... HTTP Response  200 OK – request has succeeded and  The response line contains:  202 Accepted – request accepted but not processed  HTTP version  3xx – further action must be taken to complete the request  Status code  302 Found – resource found but temporarily moved  Status code description  4xx – client error or invalid request HTTP version  400 Bad Request – couldn’t understand the request E.x. HTTP/1.1 200 ok  401 Unauthorized – request requires authorization Status code  403 Forbidden – a client may not have access to the resource  Has 5 categories  1xx – request received, processing continues  5xx – server error occurred  E.x. 100 Continue – tells client to continue  500 Internal Server Error – server encountered an with a request unexpected error (error/bug with a server-side script)  2xx – success, the action was successfully  505 HTTP Version Not Supported – server doesn’t support 34 received, understood, and accepted the HTTP version  Example of HTTP Request and response header 35 https://developer.mozilla.org/en-US/docs/Web/HTTP/Message s Client-Side VS Server- Side Programming 36  Client-Side VS Server-Side Programming Frontend Backend Runs on the user computer Runs on the server Interfacing Processing Collection of user input, interfacing Processes data, doing transactions, and with the server complex computetion Fully Visible Invisible Scripts can be viewed by the user Scripts are not open to users. Less Secure More Secure Generally less secure as users can see Alot more secure as users don’t see the and mess with the scripts source code, and they usually can not interrupt the process. HTML, CSS, JavaScript, VBScript PHP, ASP, Pyton, Ruby, C#, Java 37  Front End & Back End Development  The main difference between front and back end development is the particular area of focus.  The front end is concerned with a website’s appearance, look and feel; while the back end focuses on functionality on a website’s server-side, including all communications between the browser and the database.  To build a website, a front end developer takes care of the theme, including the presentation, images and style.  The back end developer takes care of the database, security, site performance and users.  Each side needs to communicate and operate effectively with the other as a single unit to improve the website’s functionality. 38  Front End Development  The part of a website that user interacts with directly is termed as front end.  It is also referred to as the ‘client side’ of the application.  It includes everything that users experience directly:  colors and styles,  images,  graphs and tables,  buttons,  navigation menu and etc. 39  Front End Development (Cont’d)  The structure, design, behavior, and content of everything seen on the browser screen when websites, web applications, or mobile apps are opened up, is implemented by frontend developers  Responsiveness and performance are two main objectives of the frontend.  The developer must ensure that the site is responsive i.e. it appears correctly on devices of all sizes no part of the website should behave abnormally irrespective of the size of the screen.  How quickly site content loads and renders in a web browser. Front End Languages Front End Frameworks and HTML Libraries CSS AngularJS and React.js JavaScript and VBScript Bootstrap 40 jQuery  Back End Development  The backend is the server side of the website.  It is the part of the website that you cannot see and directly interact with.  The parts and characteristics developed by backend designers are indirectly accessed by users through a front-end application.  It stores and arranges data, and also makes sure everything on the client-side of the website works fine.  Activities, like writing APIs, creating libraries, and working with system components without user interfaces or even systems of scientific programming, are also included in the backend. 49  Back End Development ( Cont’d)  Server-side programming must deal with dynamic content. Most web pages are not static since they deal with searching databases.  Server-side Uses  It processes the user input Frameworks PHP  Displays the requested pages ASP.NET Python  Interaction with servers/storage Ruby  Interaction with databases C#  Querying the database Node.js  Encoding of data into HTML  Operations over databases like delete, and update. 50  Static vs Dynamic Web Pages  The most basic type of Web page is a completely static, text-based one, written entirely in HTML.  The contents of the HTML file on the server are exactly the same as the source code of the page on the client.  If the user reloads a static website, they would see the exact same content every time.  Its content was written directly by an author, and when the user goes to the site, that code is downloaded into a browser and interpreted.  In contrast to a static website, a dynamic website is one whose content is regenerated every time a user visits or reloads the site.  If you display the current date and time on a page, for example, the content will change and thus will be dynamic. 57  Static vs Dynamic Web Pages...  There are two ways to generate dynamic content.  One method is to use scripting languages.  Popular server-side scripting languages are:  PHP  Servlet  Active Server Pages  The other method is to use CGI(Common Gateway Interface). 58  Website Development Process 59  Web Development Principles  Good website design needs a wide range of professionals having expertise in different areas.  Their collective efforts need to be put in when there is a critical decision to take place.  Some essential principles of good website design that must be considered while developing a website.  These design principles will definitely help web designers to develop awe-inspiring designs and to enhance the usability of a website.  Simple is the best: Over-designed website may not work.  Putting too many elements on the page may lead to distracting visitors from the main purpose of your website. Simplicity always works in an effective web page design.  A clean and fresh design of your website not only makes the website appealing but also help user to navigate from one page to another seamlessly. 60  Cont...  Consistency: Consistency in website design matters a lot.  Give your attention to matching design elements throughout each of the pages.  It can be understood that your fonts, sizes, headings, sub-headings, and button styles must be the same throughout the website.  Typography & Readability: No matter how good your design is text still rules the website as it provides users the desired information.  You should keep your typography visually appealing and readable for visitors, along with tricky use of keywords and meta-data. easier to read  Consider using fonts that are easier to read. Not easier to read 61  Cont...  Mobile compatibility: Keeping in mind the ever-growing usage of smartphones, tablets, and phablets, web design must be effective for various screens.  If your website design doesn’t support all screen sizes, the chance is that you’ll lose the battle to your competitors.  Color palette and imagery: A perfect color combination attracts users while a poor combination can lead to distraction.  Easy loading: No one likes a website that takes too much time to load.  So take care of it by optimizing image sizes, and combing code into a central CSS or JavaScript file as it reduces HTTP requests. Also, compress HTML, JavaScript, and CSS for enhanced loading speed. 62  Cont...  Easy Navigation: shows that visitors spend more time on websites that have easy navigation.  For effective navigation, you may consider creating a logical page hierarchy by designing clickable buttons.  Communication: The ultimate purpose of the visitors is to get information, and if your website is able to communicate with your visitors efficiently, most probably they would spend more time on your website. 63  Tools Sublime Text Notepad++ Visual studio code 64  Reading assignment Programming Vs scripting language Recognize universal addressing(TCP/IP, DNS) Universal protocol(HTTP, URL, HTML FTP) 65  The End !! 66