Javascript, PHP and Other Programming Languages to Bring to Life the Design Files
Total Page:16
File Type:pdf, Size:1020Kb
IT3052: WEB TECHNOLOGY Credits: 4 Teaching Scheme:-Theory: 3 Hours / Week Lab: 2 Hours / Week Prof. R. B. Diwate Department of Information Technology & MCA VIT,Pune www.rahuldiwate.com Introduction to web technology Web technology refers to the means by which computers communicate with each other using markup languages and multimedia packages. It gives us a way to interact with hosted information, like websites. Web technology involves the use of hypertext markup language (HTML) and cascading style sheets (CSS) internet and WWW The Internet is a global network of networks while the Web, also referred formally as World Wide Web (www) is collection of information which is accessed via the Internet. Another way to look at this difference is; the Internet is infrastructure while the Web is service on top of that infrastructure. Web Design vs. Web Development In essence, web design refers to both the aesthetic portion of the website and it’s usability. Web designers use various design programs such as Adobe Photoshop to create the layout and other visual elements of the website. Web Developers on the other hand, take a website design and actually make a functioning website from it. Web developers use HTML, CSS, Javascript, PHP and other programming languages to bring to life the design files. Web Design vs. Web Development Small- and medium-sized companies looking for a website or a re-design of their existing website may be confused by the blurred lines surrounding the terms “Web Design” and “Web Development.” Although there are individuals that are able to do both, many companies have dedicated designers which create the website layout and then hand the design files over to a programmer who completes the development stage. most common problems in website design Here are some of the most common problems in website design: There's no clear path. You want to extend a warm welcome to your visitors. Give them an easy way in and through. Too much competition for attention is a turn off. When you provide too many options, the functional result is no options. Outdated design. Your site was state of the art in 2009. It's got a header, a couple of sidebars, and a big chunk of information running down the center. Guess what? It looks like it's nearly a decade old. Because it is. Time to refresh with current design thinking. The layout of a page has evolved over the past decade. These days the best sites break up content into smaller, digestible bits. Overused stock images and icons. If visitors see the same image on multiple sites, it erodes trust. That picture of people sitting around the conference table? They sure get around to a lot of offices! Too many textures and colors. You are trying to add interest, but you just add clutter. Limit colors and fonts. Maintain a thematic color scheme. For professional sites, try to limit the variety of fonts to three or fewer. most common problems in website design Design for the wrong reasons. Always begin by identifying your target audience and customizing design and content. You may want your site to look "modern" or like another site you've seen, but if you haven't checked in with what your audience needs and wants, you can fail. Cute that doesn't cut it. When your links have adorable, witty names, the experience gets tired fast. Links that don't make much sense are not user friendly and won't ingratiate you with your visitors. Be practical and basic when naming links. Make it easy for people. Design for multiple visits. A rotating banner is cool the first time, and maybe the second, but at some point it's just a stale eyesore. Monotonous calls to action. Your site isn't optimized for mobile. You shouldn't need to be reminded of this, but numbers don't lie. Mobile is overtaking desktop. It's increasingly likely that your visitors see your site on a tiny screen. If they have to pinch and stretch to read, they'll find a better source of information. Be sure to test your site on smartphone and tablet. You play hard to get. If you want customers to find you, make sure your address, phone number and hours of operation are easily accessible on your site. Too often, that information is hidden or completely absent. structure of html document HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML describes the structure of a Web page HTML consists of a series of elements HTML elements tell the browser how to display the content HTML elements are represented by tags HTML tags label pieces of content such as "heading", "paragraph", "table", and so on Browsers do not display the HTML tags, but use them to render the content of the page structure of html document The <!DOCTYPE html> declaration defines this document to be HTML5 The <html> element is the root element of an HTML page The <head> element contains meta information about the document The <title> element specifies a title for the document The <body> element contains the visible page content The <h1> element defines a large heading The <p> element defines a paragraph Document structure tags Web pages have two basic containers: the head and the body: the <head> tag, which contains information, or metadata, about the web page, such as a title for the page, javascripts, styles (CSS), meta information, and more. Whatever is inside the <head> tag does not display on the web page itself. the <body> tag, containing the content that actually displays in a browser Page Structure Tags <p>...</p> paragraph: starts a new line with an empty line inserted <br /> line break: starts a new line with no extra line inserted; a "self-closing" tag Also (for use with CSS, or cascading stylesheets): <div>...</div> division: enables you do designate sections of text for styling; will insert an extra line <span>...</span> span: enables you to designate sections of text for styling without inserting any extra space. Headings If you want to divide your web page into clearly labeled sections, you might use a heading tag (e.g., <h1>, <h2>, etc.) By default, heading tags bold the text, begin on a new line and leave a space above and below. The headings on this page are <h3>. For example: <h1>h1 size heading</h1> = h1 size heading h2 size heading Headings 3 through 5 grow proportionally smaller, until: h6, which is the smallest heading CSS & Bootstrap CSS is a language that describes the style of an HTML document. CSS describes how HTML elements should be displayed. Bootstrap is essentially a front-end Framework that makes designing webpages and the general development easier. Bootstrap uses CSS, however it's different to writing your own CSS as it's all pre done so you just add a class to a HTML element and then it will use that CSS. So for example adding the class "img-responsive" to will use the pre made img-responsive class which is in the external Bootstrap CSS file. Bootstrap Example Links for JavaScript https://www.cs.sfu.ca/~ggbaker/zju/web/js.html http://www.cs.kent.edu/~svirdi/Ebook/wdp/ch09.pdf Client Side Technologies : overview of JavaScript What is JavaScript ? JavaScript is a dynamic computer programming language. It is lightweight and most commonly used as a part of web pages, whose implementations allow client-side script to interact with the user and make dynamic pages. It is an interpreted programming language with object- oriented capabilities. JavaScript is an object-based scripting language, which is very popular and used to create dynamic and interactive web pages. Javascript is an interpreted language that is usually used with HTML, and programs written in JavaScript are called scripts which are lightweight. Where is JavaScript being used JavaScript can Interact with HTML DOM elements (Document Object Model)and dynamically control the webpage. You can perform client-side validation using Javascript. Using JavaScript, you can create drop-down menus, pop-up windows and dialog boxes. JavaScript can be used to load asynchronous data without refreshing the webpage. JavaScript can be used in game development. Advantages of JavaScript The merits of using JavaScript are − Less server interaction − You can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server. Immediate feedback to the visitors − They don't have to wait for a page reload to see if they have forgotten to enter something. Increased interactivity − You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard. Richer interfaces − You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors. Limitations of JavaScript We cannot treat JavaScript as a full-fledged programming language. It lacks the following important features − Client-side JavaScript does not allow the reading or writing of files. This has been kept for security reason. JavaScript cannot be used for networking applications because there is no such support available. JavaScript doesn't have any multi-threading or multiprocessor capabilities. Once again, JavaScript is a lightweight, interpreted programming language that allows you to build interactivity into otherwise static HTML pages. Data types Every variable has a data type. Data type indicates what kind of data the variable holds. In JavaScript, the type of data variable hold can be grouped into two categories: primitive types composite types Primitive types in JavaScript JavaScript supports five primitive data types: numbers strings Booleans undefined and null Composite types in JavaScript A composite type can consist of numbers, strings, Booleans, undefined and null values.