Cyber Security Technology

–––––––

WEB DESIGNING

InNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT ISKD Mobile:8979066357,9027669947 WEB:www.iskd.in www.facebook.com/iskddoon INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 7

1 WEB DESIGNING

INDEX

Sr Topic Page No No 1 Introduction 2 Typography 3 Aesthetics 4 Cross browser compatibility 5 Web 2.0 6 Web Typography 7 Web Site Wire Frame 8 Desktop Publishing 9 Web Design and Development I 10 Web Site Designing 11 Web site Security Consideration 12 Search Engine Optimization(SEO) 13 Web Site Monetization 14 WWW Overview 15 Web Page 16 Web Browser 17 Web Server 18 Search Engine 19 Internet Collaboration Overview 20 Usernet 21 Online Education 22 Social Networking 23 Internet Security INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 1

2 WEB DESIGNING

24 Date Encryption 25 Digital Signature 26 FireWall Security 27 Internet Technology :Quick Reference Guide-  Internet  Internet Reference Model  Website Designing

 Website Hosting  World Wide Web  Web Browser  Web Server

 Internet Collaboration  Instant Messaging  Mailing List  Usernet

 Online Education  Social Networking  Internet Security  HTML

 CSS  JAVA Script  PHP

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 2

3 WEB DESIGNING

WEB DESIGNING Introduction: Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; interface design; authoring, including standardised code and proprietary software; user experience design; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term web design is normally used to describe the design process relating to the front-end (client side) design of a website including writing markup. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and if their role involves creating markup then they are also expected to be up to date with web accessibility guidelines.

HOW CREATIVE WEB DESIGNING WORLD….see

Search exoplanet-explorer.space

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 3

4 WEB DESIGNING

History

Web design books in a store 1988–2001 Although web design has a fairly recent history, it can be linked to other areas such as graphic design. However, web design can also be seen from a technological standpoint. It has become a large part of people’s everyday lives. It is hard to imagine the Internet without animated graphics, different styles of typography, background, and music. The start of the web and web design In 1989, whilst working at CERN Tim Berners-Lee proposed to create a global hypertext project, which later became known as the World Wide Web. During 1991 to 1993 the World Wide Web was born. Text-only pages could be viewed using a simple line-mode browser. In 1993 Marc Andreessen and Eric Bina, created the Mosaic browser. At the time there were multiple browsers, however the majority of them were Unix-based and naturally text heavy. There had been no integrated approach to graphic design elements such as images or sounds. The Mosaic browser broke this mould. The W3Cwas created in October 1994 to "lead the World Wide Web to its full potential by developing common protocols that promote its evolution and

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 4

5 WEB DESIGNING ensure its interoperability."This discouraged any one company from monopolizing a propriety browser and programming language, which could have altered the effect of the World Wide Web as a whole. The W3C continues to set standards, which can today be seen with JavaScript. In 1994 Andreessen formed Communications Corp. that later became known as Netscape Communications, the Netscape 0.9 browser. Netscape created its own HTML tags without regard to the traditional standards process. For example, Netscape 1.1 included tags for changing background colours and formatting text with tables on web pages. Throughout 1996 to 1999 the browser wars began, as Microsoft and Netscape fought for ultimate browser dominance. During this time there were many new technologies in the field, notably Cascading Style Sheets, JavaScript, and Dynamic HTML. On the whole, the browser competition did lead to many positive creations and helped web design evolve at a rapid pace.

Evolution of web design In 1996, Microsoft released its first competitive browser, which was complete with its own features and tags. It was also the first browser to support style sheets, which at the time was seen as an obscure authoring technique. The HTML markup for tableswas originally intended for displaying tabular data. However designers quickly realized the potential of using HTML tables for creating the complex, multi-column layouts that were otherwise not possible. At this time, as design and good aesthetics seemed to take precedence over good mark-up structure, and little attention was paid to semantics and web accessibility. HTML sites were limited in their design options, even more so with earlier versions of HTML. To create complex INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 5

6 WEB DESIGNING designs, many web designers had to use complicated table structures or even use blank spacer .GIF images to stop empty table cells from collapsing. CSS was introduced in December 1996 by the W3C to support presentation and layout. This allowed HTMLcode to be semantic rather than both semantic and presentational, and improved web accessibility, see tableless web design. In 1996, Flash (originally known as FutureSplash) was developed. At the time, the Flash content development tool was relatively simple compared to now, using basic layout and drawing tools, a limited precursor to ActionScript, and a timeline, but it enabled web designers to go beyond the point of HTML, animated GIFs and JavaScript. However, because Flash required a plug-in, many web developers avoided using it for fear of limiting their market share due to lack of compatibility. Instead, designers reverted to gif animations (if they didn't forego using motion graphics altogether) and JavaScript for widgets. But the benefits of Flash made it popular enough among specific target markets to eventually work its way to the vast majority of browsers, and powerful enough to be used to develop entire sites.

End of the first browser wars During 1998 Netscape released Netscape Communicator code under an open source licence, enabling thousands of developers to participate in improving the software. However, they decided to start from the beginning, which guided the development of the open source browser and soon expanded to a complete application platform. The Web Standards Project was formed and promoted browser compliance with HTMLand CSS standards by creating Acid1, Acid2, INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 6

7 WEB DESIGNING and Acid3 tests. 2000 was a big year for Microsoft. Internet Explorer was released for Mac; this was significant as it was the first browser that fully supported HTML 4.01 and CSS 1, raising the bar in terms of standards compliance. It was also the first browser to fully support the PNG image format. During this time Netscape was sold to AOL and this was seen as Netscape’s official loss to Microsoft in the browser wars. 2001–2012 Since the start of the 21st century the web has become more and more integrated into peoples lives. As this has happened the technology of the web has also moved on. There have also been significant changes in the way people use and access the web, and this has changed how sites are designed. Since the end of the browsers wars[when?] new browsers have been released. Many of these are open source meaning that they tend to have faster development and are more supportive of new standards. The new options are considered by many[weasel words] to be better than Microsoft's Internet Explorer. The W3C has released new standards for HTML (HTML5) and CSS (CSS3), as well as new JavaScript API's, each as a new but individual standard.[when?] While the term HTML5 is only used to refer to the new version of HTML and some of the JavaScript API's, it has become common to use it to refer to the entire suite of new standards (HTML5, CSS3 and JavaScript)

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 7

8 WEB DESIGNING

Tools and technologies Web designers use a variety of different tools depending on what part of the production process they are involved in. These tools are updated over time by newer standards and software but the principles behind them remain the same. Web designers use both vector and raster graphics editors to create web-formatted imagery or design prototypes. Technologies used to create websites include W3C standards like HTML and CSS, which can be hand-coded or generated by WYSIWYG editing software. Other tools web designers might use include mark up validators and other testing tools for usability and accessibility to ensure their websites meet web accessibility guidelines.

Skills and techniques Marketing and communication design Marketing and communication design on a website may identify what works for its target market. This can be an age group or particular strand of culture; thus the designer may understand the trends of its audience. Designers may also understand the type of website they are designing, meaning, for example, that (B2B) business-to-businesswebsite design considerations might differ greatly from a consumer targeted website such as a retail or entertainment website. Careful consideration might be made to ensure that the aesthetics or overall design of a site do not clash with the clarity and accuracy of the content or the ease of web navigation, especially on a B2B website. Designers may also consider the reputation of the owner or business the site is representing to make sure they are portrayed favourably.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 8

9 WEB DESIGNING

User experience design and interactive design User understanding of the content of a website often depends on user understanding of how the website works. This is part of the user experience design. User experience is related to layout, clear instructions and labeling on a website. How well a user understands how they can interact on a site may also depend on the interactive design of the site. If a user perceives the usefulness of the website, they are more likely to continue using it. Users who are skilled and well versed with website use may find a more distinctive, yet less intuitive or less user- friendly website interface useful nonetheless. However, users with less experience are less likely to see the advantages or usefulness of a less intuitive website interface. This drives the trend for a more universal user experience and ease of access to accommodate as many users as possible regardless of user skill. Much of the user experience design and interactive design are considered in the user interface design. Advanced interactive functions may require plug-ins if not advanced coding language skills. Choosing whether or not to use interactivity that requires plug-ins is a critical decision in user experience design. If the plug-in doesn't come pre-installed with most browsers, there's a risk that the user will have neither the know how or the patience to install a plug-in just to access the content. If the function requires advanced coding language skills, it may be too costly in either time or money to code compared to the amount of enhancement the function will add to the user experience. There's also a risk that advanced interactivity may be incompatible with older browsers or hardware configurations. Publishing a function that doesn't work reliably is potentially worse for the user experience than making INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 9

10 WEB DESIGNING no attempt. It depends on the target audience if it's likely to be needed or worth any risks.

Page layout Part of the user interface design is affected by the quality of the page layout. For example, a designer may consider whether the site's page layout should remain consistent on different pages when designing the layout. Page pixel width may also be considered vital for aligning objects in the layout design. The most popular fixed-width websites generally have the same set width to match the current most popular browser window, at the current most popular screen resolution, on the current most popular monitor size. Most pages are also center-aligned for concerns of aestheticson larger screens.

Fluid layouts increased in popularity around 2000 as an alternative to HTML-table-based layouts and grid-based design in both page layout design principle and in coding technique, but were very slow to be adopted.[note 1] This was due to considerations of screen reading devices and varying windows sizes which designers have no control over. Accordingly, a design may be broken down into units (sidebars, content blocks, embedded advertising areas, navigation areas) that are sent to the browser and which will be fitted into the display window by the browser, as best it can. As the browser does recognize the details of the reader's screen (window size, font size relative to window etc.) the browser can make user- specific layout adjustments to fluid layouts, but not fixed-width layouts. Although such a display may often change the relative INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 10

11 WEB DESIGNING position of major content units, sidebars may be displaced below body text rather than to the side of it. This is a more flexible display than a hard-coded grid-based layout that doesn't fit the device window. In particular, the relative position of content blocks may change while leaving the content within the block unaffected. This also minimizes the user's need to horizontally scroll the page. Responsive Web Design is a newer approach, based on CSS3, and a deeper level of per-device specification within the page's stylesheet through an enhanced use of the CSS @media rule. In March 2018 Google announced they would be rolling out mobile-first indexing.Sites using responsive design are well placed to ensure they meet this new approach.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 11

12 WEB DESIGNING

Typography Web designers may choose to limit the variety of website typefaces to only a few which are of a similar style, instead of using a wide range of typefaces or type styles. Most browsers recognize a specific number of safe fonts, which designers mainly use in order to avoid complications. Typography

A specimen sheet of the Trajantypeface, which is based on the letter forms of capitalis monumentalis or Roman square capitals used for the inscription at the base of Trajan's Column, from which the typeface takes its name

Movable type being assembled on a composing stick using pieces that are stored in the type case shown below it

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 12

13 WEB DESIGNING

Typography is the art and technique of arranging type to make written languagelegible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing(tracking), and adjusting the space between pairs of letters (kerning). The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process. Type design is a closely related craft, sometimes considered part of typography; most typographers do not design typefaces, and some type designers do not consider themselves typographers. Typography also may be used as a decorative device, unrelated to communication of information. Typography is the work of typesetters (also known as compositors), typographers, graphic designers, art directors, manga artists, comic book artists, graffiti artists, and, now, anyone who arranges words, letters, numbers, and symbols for publication, display, or distribution, from clerical workers and newsletter writers to anyone self-publishing materials. Until the Digital Age, typography was a specialized occupation. Digitization opened up typography to new generations of previously unrelated designers and lay users. As the capability to create typography has become ubiquitous, the application of principles and best practices developed over generations of skilled workers and professionals has diminished. So at a time when scientific techniques can support the proven traditions (e.g., greater legibility with the use of serifs, upper and lower case, contrast, etc.) through understanding the limitations of human vision, typography as often encountered may fail to achieve its principal objective: effective communication

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 13

14 WEB DESIGNING

Font downloading was later included in the CSS3 fonts module and has since been implemented in Safari 3.1, Opera 10 and Mozilla Firefox 3.5. This has subsequently increased interest in web typography, as well as the usage of font downloading. Most site layouts incorporate negative space to break the text up into paragraphs and also avoid center-aligned text. Motion graphics The page layout and user interface may also be affected by the use of motion graphics. The choice of whether or not to use motion graphics may depend on the target market for the website. Motion graphics may be expected or at least better received with an entertainment-oriented website. However, a website target audience with a more serious or formal interest (such as business, community, or government) might find animations unnecessary and distracting if only for entertainment or decoration purposes. This doesn't mean that more serious content couldn't be enhanced with animated or video presentations that is relevant to the content. In either case, motion graphic design may make the difference between more effective visuals or distracting visuals.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 14

15 WEB DESIGNING

Motion graphics that are not initiated by the site visitor can produce accessibility issues. The World Wide Web consortium accessibility standards require that site visitors be able to disable the animations. Quality of code Website designers may consider it to be good practice to conform to standards. This is usually done via a description specifying what the element is doing. Failure to conform to standards may not make a website unusable or error prone, but standards can relate to the correct layout of pages for readability as well making sure coded elements are closed appropriately. This includes errors in code, more organized layout for code, and making sure IDs and classes are identified properly. Poorly- coded pages are sometimes colloquially called tag soup. Validating via W3C can only be done when a correct DOCTYPE declaration is made, which is used to highlight errors in code. The system identifies the errors and areas that do not conform to web design standards. This information can then be corrected by the user.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 15

16 WEB DESIGNING

Generated content There are two ways websites are generated: statically or dynamically. Static websites A static website stores a unique file for every page of a static website. Each time that page is requested, the same content is returned. This content is created once, during the design of the website. It is usually manually authored, although some sites use an automated creation process, similar to a dynamic website, whose results are stored long-term as completed pages. These automatically-created static sites became more popular around 2015, with generators such as Jekyll and Adobe Muse. The benefits of a static website are that they were simpler to host, as their server only needed to serve static content, not execute server-side scripts. This required less server administration and had less chance of exposing security holes. They could also serve pages more quickly, on low-cost server hardware. These advantage became less important as cheap web hosting expanded to also offer dynamic features, and virtual servers offered high performance for short intervals at low cost. Almost all websites have some static content, as supporting assets such as images and stylesheets are usually static, even on a website with highly dynamic pages.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 16

17 WEB DESIGNING

Dynamic websites Dynamic websites are generated on the fly and use server-side technology to generate webpages. They typically extract their content from one or more back-end databases: some are database queries across a relational database to query a catalogue or to summarise numeric information, others may use a document database such as MongoDBor NoSQL to store larger units of content, such as blog posts or wiki articles. In the design process, dynamic pages are often mocked-up or wireframed using static pages. The skillset needed to develop dynamic web pages is much broader than for a static pages, involving server-side and database coding as well as client-side interface design. Even medium-sized dynamic projects are thus almost always a team effort. When dynamic web pages first developed, they were typically coded directly in languages such as Perl, PHP or ASP. Some of these, notably PHP and ASP, used a 'template' approach where a server-side page resembled the structure of the completed client- side page and data was inserted into places defined by 'tags'. This was a quicker means of development than coding in a purely procedural coding language such as Perl. Both of these approaches have now been supplanted for many websites by higher-level application-focused tools such as content management systems. These build on top of general purpose coding platforms and assume that a website exists to offer content according to one of several well recognised models, such as a time-sequenced blog, a thematic magazine or news site, a wiki or a user forum. These tools make the implementation of such a site very easy, and a purely organisational and design-based task, without requiring any coding. INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 17

18 WEB DESIGNING

Editing the content itself (as well as the template page) can be done both by means of the site itself, and with the use of third- party software. The ability to edit all pages is provided only to a specific category of users (for example, administrators, or registered users). In some cases, anonymous users are allowed to edit certain web content, which is less frequent (for example, on forums - adding messages). An example of a site with an anonymous change is Wikipedia.

Homepage design Usability experts, including Jakob Nielsen and Kyle Soucy, have often emphasised homepage design for website success and asserted that the homepage is the most important page on a website. However practitioners into the 2000s were starting to find that a growing number of website traffic was bypassing the homepage, going directly to internal content pages through search engines, e-newsletters and RSS feeds. Leading many practitioners to argue that homepages are less important than most people think. Jared Spool argued in 2007 that a site's homepage was actually the least important page on a website. In 2012 and 2013, carousels (also called 'sliders' and 'rotating banners') have become an extremely popular design element on homepages, often used to showcase featured or recent content in a confined space. Many practitioners argue that carousels are an ineffective design element and hurt a website's search engine optimisation and usability.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 18

19 WEB DESIGNING

Occupations There are two primary jobs involved in creating a website: the web designer and web developer, who often work closely together on a website.[30] The web designers are responsible for the visual aspect, which includes the layout, coloring and typography of a web page. Web designers will also have a working knowledge of markup languagessuch as HTML and CSS, although the extent of their knowledge will differ from one web designer to another. Particularly in smaller organizations, one person will need the necessary skills for designing and programming the full web page, while larger organizations may have a web designer responsible for the visual aspect alone.

Further jobs which may become involved in the creation of a website include:

 Graphic designers to create visuals for the site such as logos, layouts and buttons  Internet marketing specialists to help maintain web presence through strategic solutions on targeting viewers to the site, by using marketing and promotional techniques on the internet

 SEO writers to research and recommend the correct words to be incorporated into a particular website and make the website more accessible and found on numerous search engines  Internet copywriter to create the written content of the page to appeal to the targeted viewers of the site  User experience (UX) designer incorporates aspects of user- focused design considerations which include information architecture, user-centered design, user testing, interaction design, and occasionally visual design.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 19

20 WEB DESIGNING

Aesthetics "Aesthetic" redirects here. For the 19th century art movement, see Aestheticism. For the cosmetology term, see Cosmetology § Esthetician. For the music genre, see Vaporwave. Aesthetics (/ɛsˈθɛtɪks, iːs-, æs-/) is a branch of philosophy that deals with the nature of art, beauty and taste and with the creation or appreciation of beauty. In its more technical epistemologicalperspective, it is defined as the study of subjective and sensori-emotional values, or sometimes called judgments of sentimentand taste. Aesthetics studies how artists imagine, create and perform works of art; how people use, enjoy, and criticize art; and what happens in their minds when they look at paintings, listen to music, or read poetry, and understand what they see and hear. It also studies how they feel about art—why they like some works and not others, and how art can affect their moods, beliefs, and attitude toward life. The phrase was coined in English in the 18th century. More broadly, scholars in the field define aesthetics as "critical reflection on art, culture and nature". In modern English, the term aesthetic can also refer to a set of principles underlying the works of a particular art movement or theory: one speaks, for example, of the Cubist aesthetic.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 20

21 WEB DESIGNING

Color theory In the visual arts, color theory or colour theory is a body of practical guidance to colormixing and the visual effects of a specific color combination. There are also definitions (or categories) of colors based on the color wheel: primary color, secondary color, and tertiary color. Although color theory principles first appeared in the writings of Leone Battista Alberti (c. 1435) and the notebooks of Leonardo da Vinci (c. 1490), a tradition of "colory theory" began in the 18th century, initially within a partisan controversy over Isaac Newton's theory of color (Opticks, 1704) and the nature of primary colors. From there it developed as an independent artistic tradition with only superficial reference to colorimetryand vision science.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 21

22 WEB DESIGNING

Composition (visual arts)

The Art of Painting by Jan Vermeer In the visual arts, composition is the placement or arrangement of visual elements or 'ingredients' in a work of art, as distinct from the subject. It can also be thought of as the organization of the elements of artaccording to the principles of art. The composition of a picture is different from its subject, what is depicted, whether a moment from a story, a person or a place. Many subjects, for example Saint George and the Dragon, are often portrayed in art, but using a great range of compositions even though the two figures are typically the only ones shown. The term composition means 'putting together' and can apply to any work of art, from music to writing to photography, that is arranged using conscious thought. In the visual arts, composition is often used interchangeably with various terms such as design, form, visual ordering, or formal structure, depending on the

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 22

23 WEB DESIGNING context. In graphic design for press and desktop publishing, composition is commonly referred to as page layout.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 23

24 WEB DESIGNING

Cross-browser compatibility Cross-browser compatibility is the ability of a website or web .application to function across different browsers and degrade gracefullywhen browser features are absent or lacking.

Design education Design education is the teaching of theory and application in the design of products, services and environments. It encompasses various disciplines of design, such as concept design, architecture, landscape architecture, graphic design, user interface design, web design, packaging design, industrial design, fashion design, information design, interior design, sustainable design, transgenerational design, and universal design. The values and attitudes which underlie modern design schools differ among the different design schools. Design is about problem solving. Design education is learning how to apply practical methods, prior knowledge, and natural talent to solve new problems. It is also referred to as Creative Education. Having a complete design education can lead to professions such as architect, graphic designer, UX designer, creative director, art director, content strategist, web designer, web developer, illustrator, information architect, interior designer, visual designer, service designer, UI designer and wireframe architect. In 1970, in Japan, South Korea, and Singapore there were no design schools. However, as of the early 2000s there are more than 23 design schools within the three Asia countries.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 24

25 WEB DESIGNING

Visual design elements and principles Visual design elements and principlesdescribe fundamental ideas about the practice of visual design. The best designers sometimes disregard the principles of design. When they do so, however, there is usually some compensating merit attained at the cost of the violation. Unless you are certain of doing as well, it is best to abide by the principles.

Drawing

Leonardo da Vinci, The Vitruvian Man(c. 1485) Accademia, Venice

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 25

26 WEB DESIGNING

Albrecht Dürer, Self-Portrait at the Age of 13 Drawing is a form of visual art in which a person uses various drawing instruments to mark paper or another two- dimensionalmedium. Instruments include graphite pencils, pen and ink, various kinds of paints, inkedbrushes, colored pencils, crayons, charcoal, chalk, pastels, various kinds of erasers, markers, styluses, and various metals (such as silverpoint). Digital drawing is the act of using a computer to draw. Common methods of digital drawing include a stylus or finger on a touchscreen device, stylus- or finger-to-touchpad, or in some cases, a mouse. There are many digital art programs and devices. A drawing instrument releases a small amount of material onto a surface, leaving a visible mark. The most common support for drawing is paper, although other materials, such as cardboard, wood, plastic, leather, canvas, and board, may be used. Temporary drawings may be made on a blackboard or whiteboard or indeed almost anything. The medium has been a popular and fundamental means of public INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 26

27 WEB DESIGNING expression throughout human history. It is one of the simplest and most efficient means of communicating visual ideas. The wide availability of drawing instruments makes drawing one of the most common artistic activities. In addition to its more artistic forms, drawing is frequently used incommercial illustration, animation, architecture, engineering a nd technical drawing. A quick, freehand drawing, usually not intended as a finished work, is sometimes called a sketch. An artist who practices or works in technical drawing may be called a drafter, draftsman or a draughtsman.

Dark pattern A dark pattern is "a user interface that has been carefully crafted to trick users into doing things, such as buying insurance with their purchase or signing up for recurring bills." The neologism dark pattern was coined by Harry Brignull on July 28, 2010 with the registration of darkpatterns.org, a "pattern library with the specific goal of naming and shaming deceptive user interfaces."

European Design Award The European Design Awards, also known as the ED-Awards, are annual awards presented to European designers for outstanding work in the communication design field. The ED- Awards is a joint initiative of design magazines from across Europe and endorsed by the International Council of Design. The ED-Awards are judged by a panel of representatives (journalists and design critics) from fifteen European design magazines, while the winning submissions are featured in the ED-Awards Catalogue. INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 27

28 WEB DESIGNING

First Things First 2000 manifesto The First Things First 2000 manifesto, launched by Adbusters magazine in 1999, was an updated version of the earlier First Things First manifesto written and published in 1964 by Ken Garland, a British designer. The 2000 manifesto was signed by a group of 33 figures from the international graphic design community, many of them well known, and simultaneously published in Adbusters(Canada), Emigre (Issue 51) and AIGAJournal of Graphic Design (United States), Eyemagazine no. 33 vol. 8, Autumn 1999,Blueprint (Britain) and Items (Netherlands). The manifesto was subsequently published in many other magazines and books around the world, sometimes in translation. Its aim was to generate discussion about the graphic design profession's priorities in the design press and at design schools. Some designers welcomed this attempt to reopen the debate, while others rejected the manifesto. The question of value-free design has been continually contested in the graphic design community between those who are concerned about the need for values in design and those who believe it should be value-free. Those who believe that design can be free from values reject the idea that graphic designers should concern themselves with underlying political questions. Those who are concerned about values believe that designers should be critical and take a stand in their choice of work, for instance by not promoting industries and products perceived to be harmful. Examples of projects that might be classified as unacceptable include many forms of advertising and designs for cigarette manufacturers, arms companies and so on. Adbusters has been a significant outlet for these ideas,

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 28

29 WEB DESIGNING especially in its commitment to detournement and culture jamming.

Graphic art software

A screenshot of Karbon14 vector graphic software running on an AegeanLinux desktop.

A screenshot of the GIMP 2.2.8 raster graphic software. Graphic art software is a subclass of application software used for graphic design, multimedia development, stylized image development, technical illustration, general image editing, or simply to access graphic files. Art software uses either raster or vectorgraphic reading and editing methods to create, edit, and view art. Many artists and other creative professionals today use personal computers rather than traditional media. Using graphic art

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 29

30 WEB DESIGNING software may be more efficient than rendering using traditional media by requiring less hand–eye coordination, requiring less mental imagingskill, and utilizing the computer's quicker (sometimes more accurate) automated rendering functions to create images. However, advanced level computer styles, effects and editing methods may require a steeper learning curve of computer technical skills than what was required to learn traditional hand rendering and mental imaging skills. The potential of the software to enhance or hinder creativity may depend on the intuitiveness of the interface . Graphic design occupations Graphic design careers include creative director, art director, art production manager, brand identity developer, illustrator and layout artist.

Graphics Graphics (from Greek γραφικός graphikos, "belonging to drawing") are visual images or designs on some surface, such as a wall, canvas, screen, paper, or stone to inform, illustrate, or entertain. In contemporary usage, it includes a pictorial representation of data, as in computer-aided design and manufacture, in typesetting and the graphic arts, and in educational and recreational software. Images that are generated by a computer are called computer graphics. Examples are photographs, drawings, Line art, graphs, diagrams, typography, numbers, symbols, geometric designs, maps, engineering drawings, or other images. Graphics often combine text, illustration, and color. Graphic design may consist of the deliberate selection, creation,

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 30

31 WEB DESIGNING or arrangementof typography alone, as in a brochure, flyer, poster, web site, or book without any other element. Clarity or effective communication may be the objective, association with other cultural elements may be sought, or merely, the creation of a distinctive style. Graphics can be functional or artistic. The latter can be a recorded version, such as a photograph, or interpretation by a scientist to highlight essential features, or an artist, in which case the distinction with imaginary graphics may become blurred. It can also be used for architecture.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 31

32 WEB DESIGNING

Infographic

A Washington Metro subway map Infographics (a clipped compound of "information" and "graphics") are graphic visual representations of information, data or knowledge intended to present information quickly and clearly. They can improve cognition by utilizing graphics to enhance the human visual system's ability to see patterns and trends. Similar pursuits are information visualization, data visualization, statistical graphics, information design, or information architecture. Infographics have evolved in recent years to be for mass communication, and thus are designed with fewer assumptions about the readers' knowledge base than other types of visualizations. Isotypes are an early example of infographics conveying information quickly and easily to the masses.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 32

33 WEB DESIGNING

Graphic design schools  Subcategories This category has the following 3 subcategories, out of 3 total. A  ► Arts University Bournemouth (1 C, 3 P) R  ► Royal College of Art (1 C, 8 P) U  ► Graphic design schools in the United States (5 C, 38 P) Pages in category "Graphic design schools" The following 22 pages are in this category, out of 22 total. This list may not reflect recent changes (learn more). A  Alberta University of the Arts  Apeejay Institute of Design  École Supérieure de Réalisation Audiovisuelle  Academy of Design Australia B  Bergen Academy of Art and Design C  Central Saint Martins D  Design School Kolding

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 33

34 WEB DESIGNING

E  Escola d'Art i Superior de Disseny d'Olot I  IID (Imperial Institute of Design)  INSAS (film school) K  Konstfack L  Libera Accademia di Belle Arti  London College of Communication N  Nuova Accademia di Belle Arti  National Institute of Design  National Institute of Design, Kurukshetra  National Institute of Electronics & Information Technology, Kurukshetra R  RMIT School of Architecture and Design  Royal College of Art S  Sessions College for Professional Design U  University of Kansas School of Architecture, Design, and Planning

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 34

35 WEB DESIGNING

Z  Zurich University of the Arts Logo

Three logos: LibreOffice, IBM by Paul Rand and the International Bureau of Weights and Measures.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 35

36 WEB DESIGNING

Bronze doit of the Dutch East India Company (VOC), depicting its date of production and the Company's monogram logo. The VOC's logo was possibly in fact the first globally recognized corporate logo. It is considered by many to be a well- designed logo that ensured its success at a time when the concept of the corporate identity was virtually unknown.

Coat of arms of the Chiswick Press A logo (abbreviation of logotype, from Greek: λόγος, romanized: logos, lit. 'word' and Greek: τύπος, romanized: typos, lit. 'imprint') is a graphic mark, emblem, or symbol used to aid and promote public identification and recognition. It may be of an abstract or

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 36

37 WEB DESIGNING figurative design or include the text of the name it represents as in a wordmark. In the days of hot metal typesetting, a logotype was one word cast as a single piece of type (e.g. "The" in ATF Garamond), as opposed to a ligature, which is two or more letters joined, but not forming a word. By extension, the term was also used for a uniquely set and arranged typeface or colophon. At the level of mass communication and in common usage, a company's logo is today often synonymous with its trademark or brand. Progressive enhancement

Progressive enhancement is a strategy for web design that emphasizes core webpage content first. This strategy then progressively adds more nuanced and technically rigorous layers of presentation and features on top of the content as the end- user's browser/internet connection allow. The proposed benefits of this strategy are that it allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing an enhanced version of the page to those with more advanced browser software or greater bandwidth.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 37

38 WEB DESIGNING

Style guide A style guide or manual of style is a set of standards for the writing, formatting and design of documents. It is often called a style sheet, although that term may have other meanings. These standards can be applied either for general use, or be required usage for an individual publication, a particular organization, or a specific field. A style guide establishes standard stylerequirements to improve communication by ensuring consistency both within a document, and across multiple documents. Because practices vary, a style guide may set out standards to be used in areas such as punctuation, capitalization, citing sources, formatting of numbers and dates, table appearance and other areas. The style guide may require certain best practices in usage, language composition, visual composition, orthography and typography. For academicand technical documents, a guide may also enforce the best practice in ethics (such as authorship, research ethics, and disclosure), pedagogy (such as exposition and clarity), and compliance (technical and regulatory). Style guides are specialized in a variety of ways, from the general use of a broad public audience, to a wide variety of specialized uses, such as for students and scholars of various academic disciplines, medicine, journalism, the law, government, business in general, and specific industries. The term house style refers to the individual style manual of a particular publisher or organization.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 38

39 WEB DESIGNING

Web 2.0

A tag cloud (a typical Web 2.0 phenomenon in itself) presenting Web 2.0 themes Web 2.0 (also known as Participative (or Participatory) and Social Web) refers to websites that emphasize on user-generated content, ease of use, participatory culture and interoperability (i.e., compatible with other products, systems, and devices) for end users. The term was invented by Darcy DiNucci in 1999 and later popularized by Tim O'Reilly and Dale Dougherty at the O'Reilly Media Web 2.0 Conference in late 2004. The Web 2.0 framework only specifies the design and use of websites and does not place any technical demands or specifications on designers. The transition was gradual and, therefore, no precise date for when this change happened has been given.[which?] A Web 2.0 website allows users to interact and collaborate with each other through social media dialogue as creators of user- generated content in a virtual community. This contrasts the first generation of Web 1.0-era websites where people were limited to viewing content in a passive manner. Examples of Web 2.0 features include social networking sites or social media sites (e.g., Facebook), blogs, wikis, folksonomies("tagging" INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 39

40 WEB DESIGNING keywords on websites and links), video sharing sites (e.g., YouTube), hosted services, Web applications ("apps"), collaborative consumption platforms, and mashup applications. Whether Web 2.0 is substantially different from prior Web technologies has been challenged by World Wide Web inventor Tim Berners-Lee, who describes the term as jargon. His original vision of the Web was "a collaborative medium, a place where we [could] all meet and read and write." On the other hand, the term Semantic Web(sometimes referred to as Web 3.0) was coined by Berners-Lee to refer to a web of content where the meaning can be processed by machines.

Web colors Web colors are colors used in displaying web pages on the World Wide Web, and the methods for describing and specifying those colors. Colors may be specified as an RGBtriplet or in hexadecimal format (a hex triplet) or according to their common English names in some cases. A color tool or other graphics software is often used to generate color values. In some uses, hexadecimal color codes are specified with notation using a leading number sign (#). A color is specified according to the intensity of its red, green and blue components, each represented by eight bits. Thus, there are 24 bits used to specify a web color within the sRGB gamut, and 16,777,216 colors that may be so specified. Colors outside the sRGB gamut can be specified in Cascading Style Sheets by making one or more of the red, green and blue INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 40

41 WEB DESIGNING components negative or greater than 100%, so the color space is theoretically an unbounded extrapolation of sRGB similar to scRGB. Specifying a non-sRGB color this way requires the RGB() function call; it is impossible with the hexadecimal syntax (and thus impossible in legacy HTML documents that do not use CSS). The first versions of Mosaic and Netscape Navigator used the X11 color names as the basis for their color lists, as both started as X Window System applications. Web colors have an unambiguous colorimetric definition, sRGB, which relates the chromaticities of a particular phosphor set, a given transfer curve, adaptive whitepoint, and viewing conditions. These have been chosen to be similar to many real-world monitors and viewing conditions, in order to allow rendering to be fairly close to the specified values even without color management. User agents vary in the fidelity with which they represent the specified colors. More advanced user agents use color management to provide better color fidelity; this is particularly important for Web-to-print applications.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 41

42 WEB DESIGNING

Web typography

Web fonts allow Web designers to use fonts that are not installed on the viewer's computer. Web typography refers to the use of fonts on the World Wide Web. When HTML was first created, font faces and styles were controlled exclusively by the settings of each web browser. There was no mechanism for individual Web pages to control font display until Netscape introduced the tag in 1995, which was then standardized in the HTML 3.2 specification. However, the font specified by the tag had to be installed on the user's computer or a fallback font, such as a browser's default sans-serif or monospacefont, would be used. The first Cascading Style Sheets specification was published in 1996 and provided the same capabilities. The CSS2 specification was released in 1998 and attempted to improve the font selection process by adding font matching, synthesis and download. These techniques did not gain much use, and were removed in the CSS2.1 specification. However, Internet Exploreradded support for the font downloading feature in version 4.0, released in 1997. Font downloading was later included in the CSS3 fonts module, and has since been implemented in Safari 3.1, Opera 10 and Mozilla

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 42

43 WEB DESIGNING

Firefox 3.5. This has subsequently increased interest in Web typography, as well as the usage of font downloading.

Web usability:

Web usability website. Some broad goals of usability are the presentation of information and choices in a clear and concise way, a lack of ambiguity and the placement of important items in appropriate areas. Another important element of web usability is ensuring that the content works on various devices and browsers.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 43

44 WEB DESIGNING

Web framework A web framework (WF) or web application framework (WAF) is a software frameworkthat is designed to support the development of web applications including web services, web resources, and web APIs. Web frameworks provide a standard way to build and deploy web applications on the World Wide Web. Web frameworks aim to automatethe overhead associated with common activities performed in web development. For example, many web frameworks provide libraries for database access, templatingframeworks, and session management, and they often promote code reuse. Although they often target development of dynamic web sites, they are also applicable to static websites.

Website builder Website builders are tools that typically allow the construction of websites without manual code editing. They fall into two categories:  online proprietary tools provided by web hosting companies. These are typically intended for users to build their private site. Some companies allow the site owner to install alternative tools (commercial or open source) — the more complex of these may also be described as Content Management Systems.  offline software which runs on a computer, creating pages and which can then publish these pages on any host. (These are often considered to be "website design software", rather than "website builders".)

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 44

45 WEB DESIGNING

Website wireframe

A wireframe document for a person profile view A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.:166 Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together.:131 The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content.:167 In other words, it focuses on what a screen does, not what it looks like.:168 Wireframes can be pencil drawings or sketches on a whiteboard, or they can be produced by means of a broad array of free or commercial software applications. Wireframes are generally created by business analysts, user experience designers, developers, visual designers, and by those with expertise in interaction design, information architecture and user research.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 45

46 WEB DESIGNING

Wireframes focus on:

 The range of functions available

 The relative priorities of the information and functions

 The rules for displaying certain kinds of information :  The effect of different scenarios on the display 169 The website wireframe connects the underlying conceptual structure, or information architecture, to the surface, or visual design of the website.:131 Wireframes help establish functionality and the relationships between different screen templates of a website. An iterative process, creating wireframes is an effective way to make rapid prototypes of pages, while measuring the practicality of a design concept. Wireframing typically begins between “high-level structural work—like flowcharts or site maps—and screen designs.”:167 Within the process of building a website, wireframing is where thinking becomes tangible.:186 Aside from websites, wireframes are utilized for the prototyping of mobile sites, computer applications, or other screen-based products that involve human-computer interaction

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 46

47 WEB DESIGNING

Communication design Communication design is a mixed discipline between design and information-development which is concerned with how mediaintervention such as printed, crafted, electronic media or presentationscommunicate with people. A communication design approach is not only concerned with developing the message aside from the aesthetics in media, but also with creating new media channels to ensure the message reaches the target audience. Some designers use graphic design and communication design interchangeably due to overlapping skills. Communication design can also refer to a systems-based approach, in which the totality of media and messages within a culture or organization are designed as a single integrated process rather than a series of discrete efforts. This is done through communication channels that aim to inform and attract the attention of the people one are focusing one's skills on. Design skills must be tailored to fit to different cultures of people, while maintaining pleasurable visual design. These are all important pieces of information to add to a media communications kit to get the best results. Within the discipline of Communication, a framework for Communication as Design has emerged that focuses on redesigning interactivity and shaping communication affordances. Software and applications create opportunities for and place constraints on communication. Recently, Guth and Brabham examined the way that ideas compete within a crowdsourcing platform, providing a model about the relationships among design ideas, communication, and platform. The same authors have interviewed technology INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 47

48 WEB DESIGNING company founders about the democratic ideals they build into the design of e-government applications and technologies. Interest in the Communication as Design framework is growing among researchers.

Copywriting Copywriting is the act of writing text for the purpose of advertising or other forms of marketing. The product, called copy, is written content that aims to increase brand awareness and ultimately persuade a person or group to take a particular action. Copywriters help create billboards, brochures, catalogs, jingle lyrics, magazine an d newspaper advertisements, sales letters and other direct mail, scripts for television or radiocommercials, taglines, white papers, social media posts, and other marketing communications.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 48

49 WEB DESIGNING

Desktop publishing

Scribus, an open source desktop publishing application Desktop publishing (DTP) is the creation of documents using page layout software on a personal ("desktop") computer. It was first used almost exclusively for print publications, but now it also assists in the creation of various forms of online content. Desktop publishing software can generate layouts and produce typographic-quality text and images comparable to traditional typography and printing. Desktop publishing is also the main reference for digital typography. This technology allows individuals, businesses, and other organizations to self- publish a wide variety of content, from menus to magazines to books, without the expense of commercial printing. Desktop publishing requires the use of a personal computer and WYSIWYG page layout software to create documents for either large-scale publishing or small-scale local multifunction peripheral output and distribution. Desktop publishing methods provide more control over design, layout, and typography than word processing. However, word processing software has evolved to include some, though by no means all, capabilities previously available only with professional printing or desktop publishing.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 49

50 WEB DESIGNING

The same DTP skills and software used for common paper and book publishing are sometimes used to create graphics for point of sale displays, promotional items, trade show exhibits, retail package designs and outdoor signs.[citation needed] Although what is classified as "DTP software" is usually limited to print and PDF publications, DTP isn't limited to print. The content produced by desktop publishers may also be exported and used for electronic media. The job descriptions that include "DTP," such as DTP artist, often require skills using software for producing e-books, web content, and web pages, which may involve web design or user interface designfor any graphical user interface

. Digital illustration

A digital illustration depicting a tree in autumn, drawn using Facebook's "graffiti" app Computer illustration or digital illustration is the use of digital tools to produce images under the direct manipulation of the artist, usually through a pointing device such as a tablet or a mouse. It is distinguished from computer-generated art, which is produced by a computer using mathematical models created by the artist. It is also distinct from digital manipulation of

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 50

51 WEB DESIGNING photographs, in that it is an original construction "from scratch". (Photographic elements may be incorporated into such works, but they are not necessarily the primary basis.

Graphic design

Graphic symbols are often functionalist and anonymous, as these pictographs from the US National Park Service illustrate. Graphic design is the process of visual communication and problem-solving through the use of typography, photography, and illustration. The field is considered a subset of visual communication and communication design, but sometimes the term "graphic design" is used synonymously. Graphic designers create and combine symbols, images and text to form visual representations of ideas and messages. They use typography, visual arts, and page layouttechniques to create visual compositions. Common uses of graphic design include corporate design (logos and branding), editorial design (magazines, newspapers and books), wayfinding or environmental design, advertising, web design, communication design, product packaging, and signage.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 51

52 WEB DESIGNING

Interaction design Interaction design, often abbreviated as IxD, is "the practice of designing interactive digital products, environments, systems, and services.":xxxi,1 Beyond the digital aspect, interaction design is also useful when creating physical (non-digital) products, exploring how a user might interact with it. Common topics of interaction design include design, human–computer interaction, and software development. While interaction design has an interest in form (similar to other design fields), its main area of focus rests on behavior.:1 Rather than analyzing how things are, interaction design synthesizes and imagines things as they could be. This element of interaction design is what characterizes IxD as a design field as opposed to a science or engineering field.:xviii While disciplines such as software engineering have a heavy focus on designing for technical stakeholders, interaction design is geared toward satisfying the majority of users

Information design Information design is the practice of presenting information in a way that fosters efficient and effective understanding of it. The term has come to be used specifically for graphic design for displaying information effectively, rather than just attractively or for artistic expression. Information design is closely related to the field of data visualization and is often taught as part of graphic design courses. Information design is explanation design. It explains facts of the universe and leads to knowledge and informed action.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 52

53 WEB DESIGNING

Light-on-dark color scheme GNOME Shell with some GNOME apps: Clocks, Evince, gThumb and GNOME Files in Dark mode (2016, 09) Light-on-dark color scheme, also called dark mode, dark theme or night mode, is a color scheme that uses light-colored text, icons, and graphical user interface elements on a dark background and is often discussed in terms of computer user interface design and web design. Originally, computer user interfaces were formed on CRTs. The phosphor was normally a very dark color, and lit up brightly when the electron beam hit it, appearing to be green or amber on black, depending on phosphors applied on a monochrome screen. RGBscreens continued along a similar vein, using all the beams set to "on" to form white. With the advent of teletext, research was done into which primary and secondary light colors and combinations worked best for this new medium.[citation needed] Cyan or yellow on black was typically found to be optimal from a palette of black, red, green, yellow, blue, magenta, cyan and white. The opposite color scheme, dark-on-light color scheme, was originally introduced in WYSIWYG word processors, to simulate ink on paper. Whether it is easier or healthier to read text on a dark background was disputed by vision and perception researchers; there was similar dispute between users.[citation needed] However, a recent article by Popular Science suggests that "Dark mode is easier on the eyes and battery" and max white uses roughly six times as much power as max black on a Google Pixel (with an OLED, not an LCD).

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 53

54 WEB DESIGNING

Marketing communications Marketing communications (MC, marcom(s), marcomm(s)) uses different marketing channels and tools in combination:Marketing communication channels focus on any way a business communicates a message to its desired market, or the market in general. A marketing communication tool can be anything from: advertising, personal selling, direct marketing, sponsorship, communication, and promotion to public relations. MC are made up of the marketing mix which is made up of 4P's: Price, Promotion, Place and Product, for a business selling goods, and made up of 7P's: Price, Promotion, Place, Product, People, Physical evidence and Process, for a service based business.

Motion graphic design Motion graphic design is a subset of graphic design in that it uses graphic design principles in a filmmaking or video productioncontext (or other temporally evolving visual medium) through the use of animation or filmic techniques. Examples include the kinetic typography and graphics used in film and television opening sequences, and the spinning, three- dimensional station identification logos of some television channels. The art form has been around for decades, and has advanced in technical sophistication over time. A motion graphic designer may be a person trained in traditional graphic design who has learned to integrate additional elements into their existing skill set of design knowledge, though motion designers can also come from filmmaking or animation backgrounds, and may use tools or training from those fields as well. INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 54

55 WEB DESIGNING

Popular use of motion graphic design is used in the film industry. Openings to movies, television shows, and news programs can use photography, typography, and motion graphics to make the introduction more entertaining. The graphics used in television show introductions will usually represent the tone of the program. For example, high action television shows will contain fast-paced and bold graphics in the openings.

New media New media are forms of media that are native to computers, computational and relying on computers for redistribution. Some examples of new media are telephones, computers, virtual worlds, single media, website games, human-computer interface, computer animation and interactive computer installations. New media are often contrasted to "old media", such as television, radio, and print media, although scholars in communication and media studies have criticised rigid distinctions based on oldness and novelty. New media does not include television programs (only analog broadcast), feature films, magazines, books, – unless they contain technologies that enable digital generative or interactive processes. Wikipedia, an online encyclopedia, is a good example of New Media, combining Internetaccessible digital text, images and video with web-links, creative participation of contributors, interactive feedback of users and formation of a participant community of editors and donors for the benefit of non-

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 55

56 WEB DESIGNING community readers. Facebook is another type of New Media, belonging to the category of social media model, in which most users are also participants. Another type of New Media is Twitter which also belongs to the social media category, through which users interact with one another and make announcements to which the public receive. Both Facebook and Twitter have risen in usage in recent years and have become an online resource for acquiring information.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 56

57 WEB DESIGNING

Search engine optimization  Search engine optimization (SEO) is the process of increasing the quality and quantity of website traffic, increasing visibility of a website or a web page to users of a web search engine.[citation needed] The term refers to the improvement of unpaid results (known as "natural" or "organic" results), and excludes the purchase of paid placement. SEO may target different kinds of search, including image search, video search, academic search, news search, and industry-specific vertical search engines. Optimizing a website may involve editing its content, adding content, modifying HTML, and associated coding to both increase its relevance to specific keywords and to remove barriers to the indexing activities of search engines.[citation needed] Promoting a site to increase the number of backlinks, or inbound links, is another SEO tactic. By May 2015, mobile search had surpassed desktop search. As an Internet marketing strategy, SEO considers how search engines work, the computer programmed algorithms which dictate search engine behavior, what people search for, the actual search terms or keywords typed into search engines, and which search engines are preferred by their targeted audience. SEO is performed because a website will receive more visitors from a search engine the higher the website ranks in the search engine results page (SERP). These visitors can then be converted into customers. SEO differs from local search engine optimization in that the latter is focused on optimizing a business' online presence so that its web pages will be displayed by search engines when a user enters a local search for its products or services. The former instead is more focused on national or international searches. INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 57

58 WEB DESIGNING

Technical writer A technical writer is a professional information communicator whose task is to transfer information (knowledge) between two or more parties, through any medium that best facilitates the transfer and comprehension of the information. Technical writers research and create information through a variety of delivery mediums (electronic, printed, audio-visual and even touch). Example types of information include online help, manuals, white papers, design specifications, project plans, software test plans, etc. With the rise of e-learning, technical writers are increasingly becoming involved with creating online training material. According to the Society for Technical Communication (STC): Technical writing is sometimes defined as simplifying the complex. Inherent in such a concise and deceptively simple definition is a whole range of skills and characteristics that address nearly every field of human endeavor at some level. A significant subset of the broader field of technical communication, technical writing involves communicating complex information to those who need it to accomplish some task or goal. In other words, technical writers take advanced technical concepts and communicate them as clearly, accurately, and comprehensively as possible to their intended audience, ensuring that the work is accessible to its users. Kurt Vonnegut described technical writers as: ...trained to reveal almost nothing about themselves in their writing. This makes them freaks in the world of writers, since

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 58

59 WEB DESIGNING almost all of the other ink-stained wretches in that world reveal a lot about themselves to the reader. Engineers, scientists, and other professionals may also be involved in technical writing(developmental editing, proofreading, etc), but are more likely to employ professional technical writers to develop, edit and format material, and advise the best means of information delivery to their audiences.

User experience User experience (UX) refers to a person's emotions and attitudes about using a particular product, system or service. It includes the practical, experiential, affective, meaningful and valuable aspects of human–computer interaction and product ownership. Additionally, it includes a person’s perceptions of system aspects such as utility, ease of use and efficiency. User experience may be considered subjective in nature to the degree that it is about individual perception and thought with respect to the system. User experience is dynamic as it is constantly modified over time due to changing usage circumstances and changes to individual systems as well as the wider usage context in which they can be found. In the end, user experience is about how the user interacts with and experiences the product.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 59

60 WEB DESIGNING

User interface design

The graphical user interface is presented (displayed) on the computer screen. It is the result of processed user input and usually the primary interface for human-machine interaction. The touch user interfaces popular on small mobile devices are an overlay of the visual output to the visual input. User interface design (UI) or user interface engineering is the design of user interfacesfor machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience. The goal of user interface design is to make the user's interaction as simple and efficient as possible, in terms of accomplishing user goals (user- centered design). Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself. Graphic design and typography are utilized to support its usability, influencing how the user performs certain interactions and improving the aesthetic appeal of the design; design aesthetics may enhance or detract from the ability of users to use the functions of the interface. The design process must balance technical functionality and visual elements (e.g., mental model)

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 60

61 WEB DESIGNING to create a system that is not only operational but also usable and adaptable to changing user needs. Interface design is involved in a wide range of projects from computer systems, to cars, to commercial planes; all of these projects involve much of the same basic human interactions yet also require some unique skills and knowledge. As a result, designers tend to specialize in certain types of projects and have skills centered on their expertise, whether that be software design, user research, web design, or industrial design.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 61

62 WEB DESIGNING

Web development Web development is the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing a simple single static page of plain text to complex web- based internet applications (web apps), electronic businesses, and social network services. A more comprehensive list of tasks to which web development commonly refers, may include web engineering, web design, web content development, client liaison, client-side/server-side scripting, web server and network security configuration, and e-commerce development. Among web professionals, "web development" usually refers to the main non-design aspects of building web sites: writing markup and coding. Web development may use content management systems (CMS) to make content changes easier and available with basic technical skills. For larger organizations and businesses, web development teams can consist of hundreds of people (web developers) and follow standard methods like Agile methodologieswhile developing websites. Smaller organizations may only require a single permanent or contracting developer, or secondary assignment to related job positions such as a graphic designer or information systems technician. Web development may be a collaborative effort between departments rather than the domain of a designated department. There are three kinds of web developer specialization: front-end developer, back-end developer, and full-stack developer. Front-end developers responsible for behavior and visuals that run in the user browser, while back- end developers deal with the servers.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 62

63 WEB DESIGNING

Web Design & Development I The Web Design & Development I curriculum was updated in 2012, and continues to be updated with new content and features in 2013. Please see version 2.0 for the updated version. You are currently reading the home page of the previous version of the curriculum, which was last updated in August 2009. You are encouraged to switch to the new version whenever feasible. We are no longer updating or supporting this earlier version, and it will be discontinued in July 2014. Instructors who registered to access the Instructor Version, your same login information will continue to work for the new version. Introduction The Web Design & Development I course curriculum is a project-based introduction to web design developed for use in secondary schools, grades 9-12. The curriculum emphasizes standards-based and accessible design, is cross-platform and vendor-neutral, and is freely available for teachers to use in their own classrooms. The curriculum was designed by a team of high school web design teachers in Bellingham, Washington, working in collaboration with the National Center on Accessible Information Technology in Education (AccessIT), with input from web design teachers nationwide, as well as from professionals working in careers related to the design and development of web content. Course Description The Web Design & Development I curriculum is an introduction to the design, creation, and maintenance of web

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 63

64 WEB DESIGNING

pages and websites. Students learn how to critically evaluate website quality, learn how to create and maintain quality web pages, learn about web design standards and why they're important, and learn to create and manipulate images. The course progresses from introductory work on web design to a culminating project in which students design and develop websites for local community organizations. Course Objectives

 Students will gain the skills and project-based experience needed for entry into web design and development careers.  Students will be able to use a variety of strategies and tools to create websites.  Students will develop awareness and appreciation of the myriad ways that people access the web and will be able to create standards-based websites that are accessible and usable by a full spectrum of users. Guiding Principles Guiding principles for Web Design & Development I are that the curriculum 1. emphasizes standards-based and accessible design; 2. begins by building a foundation of design theory principles, and all web design techniques are taught with these principles in mind; 3. is project-based; 4. is cross-platform, and not linked to any specific software manufacturer;

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 64

65 WEB DESIGNING

5. includes soft skill elements (i.e., organizational skills and the ability to communicate effectively with team members and clients); 6. provides students with an opportunity for "real world" experience designing and developing websites for local community organizations. Course Structure The curriculum begins by establishing a foundation of design theory principles that are revisited regularly throughout the course. Students apply these principles in building a rubric by which all of their web design projects are measured. Once this foundation is established, the curriculum teaches the basics of Hypertext Markup Language (HTML), emphasizing document structure and content. Only after a document's structure and content are in place do students manipulate the appearance of the content using Cascading Styles Sheets (CSS) and images. Unit 4 provides a variety of basic skills in graphic design, and subsequent units explore site management, server-side and scripting technologies, and effective use of web authoring tools. The final unit outlines a culminating project in which students are partnered with local community organizations to design and develop websites on their behalf. On Standards The present curriculum teaches standards-compliant web design and is itself grounded in national industry skills standards and national education standards. Each of these is described below. National Skill Standards This course curriculum is grounded in the Skill Standards for Information Technology, developed by the National Workforce

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 65

66 WEB DESIGNING

Center for Emerging Technologies (NWCET). NWCET first identified IT skill standards in 1996, and have worked extensively to validate and build upon these standards. The NWCET skill standards identify those skills that United States industry has agreed upon as being critical for success in particular areas of IT known as career clusters. The standards are used widely in education as a basis for curriculum development and in industry as a basis for job descriptions and career pathways. In developing this curriculum, the authors utilized the 2003 Edition of the Skills Standards, and focused particularly on the Web Development and Administration career cluster. A list of skills standards, and how this curriculum addresses each, is provided on our Information Technology Skills Standards page. The curriculum was further shaped by hands-on experience in the workplace and via discussions with web developers, web and IT managers and administrators, and IT policy makers at local, state, and federal levels. National Education Standards The leading organization in facilitating development of standards related to technology in education is the International Society for Technology in Education (ISTE). ISTE has led the development of the widely adopted National Educational Technology Standards (NETS), standards which guide educational leaders in recognizing and addressing the essential conditions for effective use of technology to support Pre K-12 education. Included within the NETs are Technology Foundation Standards for Students, which describe what students should know about technology and be able to do with technology. More information about these standards, and how

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 66

67 WEB DESIGNING

the current curriculum supports them, is available on our Curriculum and Content Area Standards page. Web Design Standards Web standards play an increasingly integral role in the web's realizing its full potential as a global interactive medium. Web users are becoming increasingly diverse, and their diversity is manifested in the technologies they use to access the web. For example, a growing number of people use non-traditional devices such as wireless phones and handheld computers. Also, many individuals with disabilities use interfaces that differ, sometimes significantly, from the traditional combination of monitor, keyboard, and mouse. In order for web designers to deliver web content that is perceivable, operable, and usable by all users, they must design in accordance with web standards, particularly those developed by the World Wide Web Consortium (W3C). Prior to the present curriculum, very little web design taught in secondary schools has stressed standards compliance. Instead, secondary students have been learning web design techniques that result in web pages that are accessible only to a narrow audience. By learning to design and develop accessible, standards-based websites, students not only learn highly marketable technical skills but also learn to consider the role of technology in society and to appreciate human diversity. Using This Curriculum The Student Edition includes all lesson material, plus links to short videos that introduce each of the first six units. The Teacher Edition includes supplemental information and tips for delivering each lesson. Both the student and Instructor Editions

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 67

68 WEB DESIGNING

can be accessed online, or can be downloaded for use on local computers. Links to all versions of both editions appear in the sidebar on this page. The curriculum includes many hyperlinks and is best accessed from a web browser. However, if you prefer printing lessons or other materials, a custom style sheet has been developed that supports print media so if printed, the logo and navigational buttons will not appear at the top of the page. Teachers are encouraged to supplement these materials with additional activities, including guest speakers from the local web design community and visits to relevant local businesses. These connections with the real world of web design help to introduce students to the IT workplace and related employment opportunities. The curriculum design process has included multiple test runs in the authors' classrooms, and the authors' personalized tips are provided for delivering each lesson. Credits and Copyright This course curriculum was designed for use in secondary classrooms, and can be freely copied, downloaded, and/or used for educational, noncommercial purposes provided the source is acknowledged. This course is an update of curriculum developed in 2000-2001 as part of the Whatcom Tech Prep Consortium's (WTPC) Industry Skills Standards/IT Career Pathway project, a project funded by Washington State's School-to-Work Transition grant through the Office of Superintendent of Public Instruction (OSPI). The original curriculum was developed by Joe McAuliffe, Don Helling, and Karll Rusch, all web design

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 68

69 WEB DESIGNING

instructors in the Bellingham School District, Bellingham, Washington. The updated curriculum was developed by original author Joe McAuliffe, with assistance from original author Don Helling, plus Terry Thompson and Jason Myers of AccessIT at the University of Washington. Funding was provided by the National Institute on Disability and Rehabilitation Research of the U.S. Department of Education (grant #H133D010306). The curriculum is currently maintained by the AccessComputing project with support from the National Science Foundation as part of the Broadening Participation in Computing (BPC) program of the Directorate for Computer and Information Sciences and Engineering (CISE) (grant #CNS-0540615,CNS-0837508, and CNS- 1042260). The contents do not necessarily represent the policies of the U.S. federal government, and you should not assume their endorsement

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 69

70 WEB DESIGNING

Website Designing Web designing has direct link to visual aspect of a web site. Effective web design is necessary to communicate ideas effectively.

Web desinging is subset of web development. However these terms are used interchangeably. Key Points Design Plan should include the following:

 Details about information architecture.

 Planned structure of site.

 A site map of pages

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 70

71 WEB DESIGNING

Wireframe Wireframe refers to a visual guide to appearance of web pages. It helps to define structre of web site, linking between web pages and layout of visual elements. Following things are included in a wireframe:

 Boxes of primary graphical elements

 Placement of headlines and sub headings

 Simple layout structure

 Calls to action

 Text blocks Wireframe can be created using program like Visio but you can also use a pen and paper.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 71

72 WEB DESIGNING

Web Designing Tools Here is the list of tools that can be used to make effective web designs: Coda 2 Coda 2 is a powerful web development & designing tool, comes with better user interface, text editing, file management, clips, sites, design and better Mysql support.OmniGraffle OmmniGraffle is mainly used for wireframing. The downside of this tool is that It doesnot have interactive prototyping and It is available only for Mac.Pen and Paper Pen and paper can be used to draw the appearance of the how the web site will look like.Vim Vim is great web desiging tool.It supports full customizable auto-intending of code, multiple buffers for storing cut/copied code, and recording of actions for automated repetition.

S.N. Tool Description

1. Photoshop CC This is a great web designing tool provided by Adobe. The latest Photoshop CC 2014 supports many new features such as smart objects, layer comps, smart guides, Typekit integration, font search, and workflow enhancements.

2. Illustrator CC Illustrator CC is also a web designing tool comes with

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 72

73 WEB DESIGNING

powerful features like AutoCad libraries, white overprint, fill and stroke proxy swap for text, automatic corner generation, unembed images and touch type tools etc.

3. Sublime Text Sublime Text is a source code editor with Python application programming interface. It's functionality can be extended using plugins.

4. Imageoptim It is basically used for optimizing images on a website in order to load them faster by finding best compression parameters and by removing unnecessary comments.

5. Sketch 3 Sketch 3 is a web desiging tool developed specifically for designing interfaces, websites, icons etc.

6. Heroku It is also a great web development tool which supports Ruby, Node.js, Python, java and PHP.

7. Axure It supports prototyping, documentation, and wireframing tools for making interactive website design.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 73

74 WEB DESIGNING

8. Hype 2 The Hype 2 offers: Easiest way to Animate & add interactivity, Hardness the power of HTML5, Mobile responsiveness, and WYSIWYG features.

9. Image Alpha This tool helps to reduce file sizes of 24-bit PNG files. It does so by applying lossy compression and convert it to PNG8+alpha format which more efficient.

10. Hammer This tool is suitable for non programmers and good only for small projects.

11. JPEGmini Lite It is an image optimizing tool and supports photos in any resolution up to 28 Megapixels.

12. BugHerd This tool helps to see how the projects is going and what everyone is working on. It also helps to identify issues in development.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 74

75 WEB DESIGNING

Web Page Anatomy A web site includes the following components: Containing Block Container can be in the form of page’s body tag, an all containing div tag. Without container there would be no place to put the contents of a web page. Logo Logo refers to the identity of a website and is used across a company’s various forms of marketing such as business cards, letterhead, brouchers and so on. Naviagation The site’s navigation system should be easy to find and use. Oftenly the anvigation is placed rigth at the top of the page. Content The content on a web site should be relevant to the purpose of the web site. Footer Footer is located at the bottom of the page. It usually contains copyright, contract and legal information as well as few links to the main sections of the site. Whitespace It is also called as negative space and refers to any area of page that is not covered by type or illustrations.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 75

76 WEB DESIGNING

Web design Mistakes One should be aware of the following common mistakes should always keep in mind:

 Website not working in any other browser other internet explorer.

 Using cutting edge technology for no good reason

 Sound or video that starts automatically

 Hidden or disguised navigation

 100% flash content.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 76

77 WEB DESIGNING

Web development Web development refers to building website and deploying on the web. Web development requires use of scripting languages both at the server end as well as at client end.

Before developing a web site once should keep several aspects in mind like:

 What to put on the web site?

 Who will host it?

 How to make it interactive?

 How to code it?

 How to create search engine friendly web site?

 How to secure the source code frequently?

 Will the web site design display well in different browsers?

 Will the navigation menus be easy to use?

 Will the web site loads quickly?

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 77

78 WEB DESIGNING

 How easily will the site pages print?

 How easily will visitors find important details specific to the web site?

 How effectively the style sheets be used on your web sites? Web Development Process Web development process includes all the steps that are good to take to build an attractive, effective and responsive website. These steps are shown in the following diagram:

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 78

79 WEB DESIGNING

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 79

80 WEB DESIGNING

Web development tools Web development tools helps the developer to test and debug the web sites. Now a days the web development tooll come with the web browsers as add-ons. All web browsers have built in tools for this purpose. Thsese tools allow the web developer to use HTML, CSS and JavaScript etc.. These are accessed by hovering over an item on a web page and selecting the “Inspect Element” from the context menu. Featues Following are the common featuers that every web development tool exhibits: HTML AND THE DOM HTML and DOM viewer allows you to see the DOM as it was rendered. It also allows to make changes to HTML and DOM and see the changes reflected in the page after the change is made. WEB PAGE ASSESTS, RESOURCES, AND NETWORK INFORMATION Web development tools also helps to inspect the resources that are loaded and available on the web page. PROFIING AND AUDITING Profiling refers to get information about the performance of a web page or web application and Auditing provides developers suggestions, after analyzing a page, for optimizations to decerease page load time and increase responsiveness.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 80

81 WEB DESIGNING

Skills Required For being a successful web developer, one should possess the following skills:

 Understanding of client and server side scripting.

 Creating, editing and modifying templates for a CMS or web development framework.

 Testing cross browser inconsistencies.

 Conducting observational user testing.

 Testing for compliance to specified standards such as accessibility standards in the client region.

 Programming interaction with javaScript, PHP, and Jquery etc. Websites Publishing

Website publishing is the process of uploading content on the internet. It includes:

 uploading files

 updating web pages

 posting blogs Website is published by uploading files on the remote server which is provided by the hosting company. Prerequisites for Website Publishing In order to publish your site, you need the following things:

 Web development software

 Internet Connection

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 81

82 WEB DESIGNING

 Web Server Web development software It is used for building web pages for your web site. Dreamweaver and WordPress are example of web development softwares. Internet Connection Internet connection is required to connect to a remotely located web server. Web Server Web server is the actual location where your website resides on. A web server may host single or multiple sites depending on what hosting service you have paid for. Websites URL Registration

A domain name is the part of your Internet address that comes after "www". For example, in www.tutorialspoint.com the domain name is tutorialspoint.com. A domain name becomes your Business Address so care should be taken to select a domain name. Your domain name should be easy to remember and easy to type. Domain Extensions The final letter at end of internet address is known as top level domain names. They are called top level because they are read from right to left, and the part after the dot is the highest in a hierarchy.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 82

83 WEB DESIGNING

The following table shows the Generic Top-Level Domain names: Domain Meaning

.com Commercial Business

.edu Education

.gov U.S. government agency

.int International Entity

.mil U.S. military

.net Networking organization

.org Non profit organization

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 83

84 WEB DESIGNING

Registering Domain Name Registering a Domain Name is very simple. You can take following step to get your desired domain name registered:

 Think of a name that justifies your business need. To find out the available names you can enter a name at commercial domain name registrar such as GoDaddy.

 If the domain name entered by you is available, then select that particular domain name.

 Now it will ask you for other additional services such as Email inbox, hosting etc. that host also provides. You may choose what’s best for you.

 Now they will ask you for your personal information which is stored in WHOIS database.

 It will then ask for payment information. Pay for the purchase you have made. Make sure you enter the correct payment information.

 Once you are done with all above steps, you are ready to use their tools to upload your stuff to your site.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 84

85 WEB DESIGNING

Domain Name Registrar There are a number of domain name registrars available in the market.The following table contains some of popular domain name registrars: S.N. Domain Name Registrar

1 Address Creation, LLC

2 Addressonthe web, LLC

3 101domains, INC

4 Atomicdomainnames, LLC

5 BigRock Solutions Ltd

6 Black Ice Domain, Inc

7 Block Host LLC

8 Domain Monkeys, LLC

9 Domain Mantra, Inc.

10 DomainName, Inc.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 85

86 WEB DESIGNING

11 Dot Holding Inc.

12 DotMedia Ltd

13 Extend Names, Inc.

14 Extremely Wild

15 Fast Domain Inc.

16 Google Inc

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 86

87 WEB DESIGNING

Website Security Consideration

Websites are always to prone to security risks. Cyber crime impacts your business by hacking your website. Your website is then used for hacking assaults that install malicious software or malware on your visitor’s computer. Hackers may also steal important customer data such as credit card information, destroy your business and propagate illegal content to your users. Security Considerations Updated Software It is mandatory to keep you software updated. It plays vital role in keeping your website secure. SQL Injection It is an attempt by the hackers to manipulate your database. It is easy to insert rogue code into your query that can be used to manipulate your database such as change tables, get information or delete data. Cross Site Scripting (XSS) It allows the attackers to inject client side script into web pages. Therefore, while creating a form It is good to endure that you check the data being submitted and encode or strip out any HTML. Error Messages You need to be careful about how much information to be given in the error messages. For example, if the user fails to log in the

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 87

88 WEB DESIGNING error message should not let the user know which field is incorrect: username or password. Validation of Data The validation should be performed on both server side and client side. Passwords It is good to enforce password requirements such as of minimum of eight characters, including upper case, lower case and special character. It will help to protect user’s information in long run. Upload files The file uploaded by the user may contain a script that when executed on the server opens up your website. SSL It is good practice to use SSL protocol while passing personal information between website and web server or database.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 88

89 WEB DESIGNING

Search Engine Optimization

What is SEO Search Engine Optimization refers to set of activities that are performed to increase number of desirable visitors who come to your site via search engine. These activities may include thing you do to your site itself, such as making changes to your text and HTML code, formatting text or document to communicate directly to the search engine.

Types of SEO SEO can be classified into two types: White Hat SEO and Black Hat or Spamdexing WHITE HAT SEO An SEO tactic, technique or method is considered as White Hat if it follows the followings

 If it conforms to the search engine's guidelines.

 If it does not involves any deception.

 It ensures that the content a search engine indexes and

 subsequently ranks is the same content a user will see.

 It ensures that a Web Page content should have been created for the users and not just for the search engines.

 It ensures the good quality of the web pages.

 It ensures the useful content available on the web pages.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 89

90 WEB DESIGNING

Always follow a White Hat SEO tactic and don't try to fool your site visitors. Be honest and definitely you will get something more. BLACK HAT OR SPAMDEXING: An SEO tactic, technique or method is considered as Black Hat or Spamdexing if it follows the followings:

 Try to improve rankings that are disapproved of by the search engines and/or involve deception.

 Redirecting users from a page that is built for search engines to one that is more human friendly.

 Redirecting users to a page that was different from the page the search engine ranked.

 Serving one version of a page to search engine spiders/bots and another version to human visitors. This is called Cloaking SEO tactic.

 Using Hidden or invisible text or with the page background color, using a tiny font size or hiding them within the HTML code such as "no frame" sections.

 Repeating keywords in the Meta tags, and using keywords that are unrelated to the site's content. This is called Meta tag stuffing.

 Calculated placement of keywords within a page to raise the keyword count, variety, and density of the page. This is called Keyword stuffing.

 Creating low-quality web pages that contain very little content but are instead stuffed with very similar key words

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 90

91 WEB DESIGNING

and phrases. These pages are called Doorwayor Gateway Pages

 Mirror web sites by hosting multiple web sites all with conceptually similar content but using different URLs.

 Mirror web sites by hosting multiple web sites all with conceptually similar content but using different URLs.

 Creating a rogue copy of a popular web site which shows contents similar to the original to a web crawler, but redirects web surfers to unrelated or malicious web sites. This is called Page hijacking.

Key Elements to ethical SEO Keyword research It allows you to see which keywords users actually employ to find products and services within your chosen market, instead of making guesses at the keywords you believe are the most popular. Content development Content development involves:

 Navigational flow and menu structure

 Site copy or articles

 Headings and sections Web development Web development involves:

 Text-based site development wherever possible.

 Clean and logical site structure.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 91

92 WEB DESIGNING

 Proper markup of key page elements. Link Building Building links will make up about 60% of your work. There are ways to automate this process using shortcuts, workarounds, and submission services. Internal linking is also very important. Treat the way you link to your own content same as you would link from an external site. Webmaster Tools Webmaster dashboard is provided by both Googleand Bing that gives insight into activity by the search engine on any site that has been registered and verified via dashboard. Dashboards offer a number of tools which allow us to understand how the search engine sees your site. These are the only way to identify crawling, indexing, and the ranking issue with your site. SEO Do’s and Do’nts DO's There are various other tips which can help you to optimize your web site for many Search Engines:

 Create logs of pages and each page should however contain a minimum of about 200 visible words of text to maximize relevance with Google.

 Create a Sitemap, Help, FAQ, About Us, Link to Us, Copyright, Disclaimer, andPrivacy Policy pages on mandatory basis.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 92

93 WEB DESIGNING

 Create a home page link to each and every web page and provide easy navigation through all the pages.

 Pay attention to your dynamic page URLs. Google can crawl and index dynamic pages as long as you don't have more than 2 parameters in the URL.

 Check your complete site for broken links. Broken links will reduce your other pages rank as well. Do'nts Here is the list of Do'nts that one should keep in mind all the times:

 Don't keep hidden text on your web pages.

 Don't create alt image spamming by putting wrong keywords.

 Don't use Meta tags stuffing.

 Don't use frames and flash on your site.

 Don't exchange your links with black listed sites.

 Don't try to fool your site visitors by using miss spelled keywords.

 Don't send spam emails to thousand of email IDs.

 Don't use too much graphics on your site.

 Don't create too many doorway pages.

 Don't try to create duplicate content of pages.

 Don't submit your website many times in a single search engine.

 Don't use sub-directory depth more than 1-2.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 93

94 WEB DESIGNING

 Don't create too many dynamic pages. Try to convert them into static pages.

 Don't bloat your pages with code.

 Don't nest your pages

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 94

95 WEB DESIGNING

Website Monetization

Website monetization refers to making money from the website. It is done by converting existing traffic to a particular website into revenue. Methods of Monetization Display Advertising It refers to the banners and text ads. This method is good for the websites that have significant traffic, valuable audience, relevant and active advertisers. Affiliate Marketing It refers to steering the visitors to products and services of a third party merchant. It is good for the websites that are product centric and have easy integration into content. Lead generation It refers to capturing the customer information and selling it to a third party. Email rental It refers to renting out your email lists to third parties. In this you will send an email on their behalf to your distribution list

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 95

96 WEB DESIGNING

WWW Overview

Overview WWW stands for World Wide Web. A technical definition of the World Wide Web is : all the resources and users on the Internet that are using the Hypertext Transfer Protocol (HTTP). A broader definition comes from the organization that Web inventor Tim Berners-Lee helped found, the World Wide Web Consortium (W3C). The World Wide Web is the universe of network-accessible information, an embodiment of human knowledge. In simple terms, The World Wide Web is a way of exchanging information between computers on the Internet, tying them together into a vast collection of interactive multimedia resources. Internet and Web is not the same thing: Web uses internet to pass over the information.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 96

97 WEB DESIGNING

Evolution World Wide Web was created by Timothy Berners Lee in 1989 at CERN in Geneva. World Wide Web came into existence as a proposal by him, to allow researchers to work together effectively and efficiently at CERN. Eventually it became World Wide Web. The following diagram briefly defines evolution of World Wide Web:

WWW Architecture WWW architecture is divided into several layers as shown in the following diagram:

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 97

98 WEB DESIGNING

Identifiers and Character Set Uniform Resource Identifier (URI) is used to uniquely identify resources on the web and UNICODE makes it possible to built web pages that can be read and write in human languages. Syntax XML (Extensible Markup Language) helps to define common syntax in semantic web.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 98

99 WEB DESIGNING

Data Interchange Resource Description Framework (RDF) framework helps in defining core representation of data for web. RDF represents data about resource in graph form. Taxonomies RDF Schema (RDFS) allows more standardized description of taxonomies and other ontologicalconstructs. Ontologies Web Ontology Language (OWL) offers more constructs over RDFS. It comes in following three versions:

 OWL Lite for taxonomies and simple constraints.

 OWL DL for full description logic support.

 OWL for more syntactic freedom of RDF Rules RIF and SWRL offers rules beyond the constructs that are available from RDFs and OWL. Simple Protocol and RDF Query Language (SPARQL) is SQL like language used for querying RDF data and OWL Ontologies. Proof All semantic and rules that are executed at layers below Proof and their result will be used to prove deductions. Cryptography Cryptography means such as digital signature for verification of the origin of sources is used. User Interface and Applications On the top of layer User interface and Applicationslayer is built for user interaction.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 99

100 WEB DESIGNING

WWW Operation WWW works on client- server approach. Following steps explains how the web works: 1. User enters the URL (say, http://www.tutorialspoint.com) of the web page in the address bar of web browser. 2. Then browser requests the Domain Name Server for the IP address corresponding to www.tutorialspoint.com. 3. After receiving IP address, browser sends the request for web page to the web server using HTTP protocol which specifies the way the browser and web server communicates. 4. Then web server receives request using HTTP protocol and checks its search for the requested web page. If found it returns it back to the web browser and close the HTTP connection. 5. Now the web browser receives the web page, It interprets it and display the contents of web page in web browser’s window.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 100

101 WEB DESIGNING

Future There had been a rapid development in field of web. It has its impact in almost every area such as education, research, technology, commerce, marketing etc. So the future of web is almost unpredictable. Apart from huge development in field of WWW, there are also some technical issues that W3 consortium has to cope up with. User Interface Work on higher quality presentation of 3-D information is under deveopment. The W3 Consortium is also looking forward to enhance the web to full fill requirements of global communities which would include all regional languages and writing systems. Technology Work on privacy and security is under way. This would include hiding information, accounting, access control, integrity and risk management. Architecture There has been huge growth in field of web which may lead to overload the internet and degrade its performance. Hence more better protocol are required to be developed

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 101

102 WEB DESIGNING

Web Page web page is a document available on world wide web. Web Pages are stored on web server and can be viewed using a web browser. A web page can cotain huge information including text, graphics, audio, video and hyper links. These hyper links are the link to other web pages. Collection of linked web pages on a web server is known as website. There is unique Uniform Resource Locator (URL)is associated with each web page. Static Web page Static web pages are also known as flat or stationary web page. They are loaded on the client’s browser as exactly they are stored on the web server. Such web pages contain only static information. User can only read the information but can’t do any modification or interact with the information. Static web pages are created using only HTML. Static web pages are only used when the information is no more required to be modified.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 102

103 WEB DESIGNING

Dynamic Web page Dynamic web page shows different information at different point of time. It is possible to change a portaion of a web page without loading the entire web page. It has been made possible using Ajaxtechnology. SERVER-SIDE DYNAMIC WEB PAGE It is created by using server-side scripting. There are server-side scripting parameters that determine how to assemble a new web page which also include setting up of more client-side processing. CLIENT-SIDE DYNAMIC WEB PAGE It is processed using client side scripting such as JavaScript. And then passed in to Document Object Model (DOM).

Scripting Laguages Scripting languages are like programming languages that allow us to write programs in form of script. These scripts are interpreted not compiled and executed line by line. Scripting language is used to create dynamic web pages.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 103

104 WEB DESIGNING

Client-side Scripting Client-side scripting refers to the programs that are executed on client-side. Client-side scripts contains the instruction for the browser to be executed in response to certain user’s action. Client-side scripting programs can be embedded into HTML files or also can be kept as separate files.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 104

105 WEB DESIGNING

Following table describes commonly used Client-Side scripting languages: S.N. Scripting Language Description

1. JavaScript It is a prototype based scripting language. It inherits its naming conventions from java. All java script files are stored in file having .jsextension.

2. ActionScriptIt is an object oriented programming language used for the development of websites and software targeting Adobe flash player.

3. Dart It is an open source web programming language developed by Google. It relies on source-to-source compiler to JavaScript.

4. VBScript It is an open source web programming language developed by Microsoft. It is superset of JavaScript and adds optional static typing class-based object oriented programming.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 105

106 WEB DESIGNING

Server-side Scripting Sever-side scripting acts as an interface for the client and also limit the user access the resources on web server. It can also collects the user’s characteristics in order to customize response.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 106

107 WEB DESIGNING

Following table describes commonly used Server-Side scripting languages: S.N. Scripting Language Description

1. ASP Active Server Pages (ASP)is server-side script engine to create dynamic web pages. It supports Component Object Model (COM)which enables ASP web sites to access functionality of libraries such as DLL.

2. ActiveVFP It is similar to PHP and also used for creating dynamic web pages. It uses native Visual Foxpro language and database.

3. ASP.net It is used to develop dynamic websites, web applications, and web services.

4. Java Java Server Pages are used for creating dynamic web applications. The Java code is compiled into byte code and run by Java Virtual Machine (JVM).

5. Python It supports multiple programming paradigms such as object- oriented, and functional programming. It can also be used as

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 107

108 WEB DESIGNING

non-scripting language using third party tools such as Py2exe or Pyinstaller.

6. WebDNA It is also a server-side scripting language with an embedded database system.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 108

109 WEB DESIGNING

Web Browser web Browser is an application software that allows us to view and explore information on the web. User can request for any web page by just entering a URL into address bar. Web browser can show text, audio, video, animation and more. It is the responsibility of a web browser to interpret text and commands contained in the web page. Earlier the web browsers were text-based while now a days graphical-based or voice-based web browsers are also available. Following are the most common web browser available today: Browser Vendor

Internet Microsoft Explorer

Google Google Chrome

Mozilla Mozilla Firefox

Netscape Netscape Communications Corp. Navigator

Opera Opera Software

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 109

110 WEB DESIGNING

Safari Apple

Sea Mozilla Foundation Monkey

K-meleon K-meleon

Architecture There are a lot of web browser available in the market. All of them interpret and display information on the screen however their capabilities and structure varies depending upon implementation. But the most basic component that all web browser must exhibit are listed below:

 Controller/Dispatcher

 Interpreter

 Client Programs Controller works as a control unit in CPU. It takes input from the keyboard or mouse, interpret it and make other services to work on the basis of input it receives. Interpreter receives the information from the controller and execute the instruction line by line. Some interpreter are mandatory while some are optional For example, HTML interpreter program is mandatory and java interpreter is optional.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 110

111 WEB DESIGNING

Client Program describes the specific protocol that will be used to access a particular service. Following are the client programs tat are commonly used:

 HTTP

 SMTP

 FTP

 NNTP

 POP

Starting Internet Explorer Internet explorer is a web browser developed by Microsoft. It is installed by default with the windows operating system howerver, it can be downloaded and be upgraded. To start internet explorer, follow the following steps:

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 111

112 WEB DESIGNING

 Go to Start button and click Internet Explorer.

The Internet Explorer window will appear as shown in the following diagram:

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 112

113 WEB DESIGNING

Accessing Web Page Accessing web page is very simple. Just enter the URL in the address bar as shown the following diagram:

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 113

114 WEB DESIGNING

Navigation A web page may contain hyperlinks. When we click on these links other web page is opened. These hyperlinks can be in form of text or image. When we take the mouse over an hyperlink, pointer change its shape to hand.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 114

115 WEB DESIGNING

Key Points

 In case, you have accessed many web pages and willing to see the previous webpage then just click back button.

 You can open a new web page in the same tab, or different tab or in a new window. Saving Webpage You can save web page to use in future. In order to save a webpage, follow the steps given below:

 Click File > Save As. Save Webpage dialog box appears.

 Choose the location where you want to save your webpage from save in: list box. Then choose the folder where you want to save the webpage.

 Specify the file name in the File name box.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 115

116 WEB DESIGNING

 Select the type from Save as type list box.

o Webpage, complete

o Web Archive

o Webpage HTML only

o Text File

 From the encoding list box, choose the character set which will be used with your webpage. By default, Western European is selected.

 Click save button and the webpage is saved. Saving Web Elements Web elements are the pictures, links etc. In order to save these elements follow the steps given below:

 Right click on the webpage element you want to save. Menu options will appear. These options may vary depending on the element you want to save.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 116

117 WEB DESIGNING

Save Picture As: This option let you save the picture at specific location with its name. When you click this option, a dialog box is opened where you can sepcify its name and location. Favourites The Favourites option helps to save addresses of the webpages you visited oftenly. Hence you need not to remember long and complex address of websites you visit often. In order to open any webpage, you just need to double click on the webpage that you have marked from bookmarks list. ADDING A WEB PAGE TO YOUR FAVOURITES In ordered to add website to your favourite list, follow the steps given below:

 Open webpage that you want to add to your favourite.

 Click on favourite menu and then click on Add to Favourites opton. Addfavouritesdialog box appears. You can also click Favourites button available in the toolbar. Favourites panel will open in the left corner of the internet explorer window. Click add button, AddFavourites dialog box will apppear.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 117

118 WEB DESIGNING

 In AddFavourites dialog box, the Name:text box will contains the name of the web page that you want to add to favourites.

 Click the Create in button, Favoutites folder will appear. Move to the folder where you want to store the favourites by clicking on the folder name.

 Now click OK button to save the favourites. OPENING FAVOURITES In order to open favourites, follow the steps given below:

 In the Favourite Panel, take the mouse over the site that you want to open. Now click on the address to open that site.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 118

119 WEB DESIGNING

 Favourite can also be opened from the Favourites menu by selecting the appropriate one.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 119

120 WEB DESIGNING

ORGANIZING FAVOURITES Favourites can be organized by categorizing web pages, creating folder for each category and then storing web pages into them. In order to organize favourites, follow the steps given below:

 Click Favourites menu > Organize Favourites. Organize favourites dialog box will appears.

 In order to organize the webpages, drag the individual webpage to the respective folder. Similarly to delete a favourite, Click on delete button.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 120

121 WEB DESIGNING

Web Server

Overview Web server is a computer where the web content is stored. Basically web server is used to host the web sites but there exists other web servers also such as gaming, storage, FTP, email etc. Web site is collection of web pages whileweb server is a software that respond to the request for web resources. Web Server Working Web server respond to the client request in either of the following two ways:

 Sending the file to the client associated with the requested URL.

 Generating response by invoking a script and communicating with database

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 121

122 WEB DESIGNING

Key Points

 When client sends request for a web page, the web server search for the requested page if requested page is found then it will send it to client with an HTTP response.

 If the requested web page is not found, web server will the send an HTTP response:Error 404 Not found.

 If client has requested for some other resources then the web server will contact to the application server and data store to construct the HTTP response. Architecture Web Server Architecture follows the following two approaches: 1. Concurrent Approach 2. Single-Process-Event-Driven Approach. Concurrent Approach Concurrent approach allows the web server to handle multiple client requests at the same time. It can be achieved by following methods:

 Multi-process

 Multi-threaded

 Hybrid method. Multi-processing In this a single process (parent process) initiates several single- threaded child processes and distribute incoming requests to these child processes. Each of the child processes are responsible for handling single request.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 122

123 WEB DESIGNING

It is the responsibility of parent process to monitor the load and decide if processes should be killed or forked. Multi-threaded Unlike Multi-process, it creates multiple single-threaded process. Hybrid It is combination of above two approaches. In this approach multiple process are created and each process initiates multiple threads. Each of the threads handles one connection. Using multiple threads in single process results in less load on system resources. Examples Following table describes the most leading web servers available today: S.N. Web Server Descriptino

1 Apache HTTP Server This is the most popular web server in the world developed by the Apache Software Foundation. Apache web server is an open source software and can be installed on almost all operating systems including Linux, UNIX, Windows, FreeBSD, Mac OS X and more. About 60% of the web server machines run the Apache Web Server.

2. Internet Information Services (IIS) The Internet Information Server (IIS) is a high performance Web Server from Microsoft. This web server runs on

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 123

124 WEB DESIGNING

Windows NT/2000 and 2003 platforms (and may be on upcoming new Windows version also). IIS comes bundled with Windows NT/2000 and 2003; Because IIS is tightly integrated with the operating system so it is relatively easy to administer it.

3. Lighttpd The lighttpd, pronounced lighty is also a free web server that is distributed with the FreeBSD operating system. This open source web server is fast, secure and consumes much less CPU power. Lighttpd can also run on Windows, Mac OS X, Linux and Solaris operating systems.

4. Sun Java System Web Server This web server from Sun Microsystems is suited for medium and large web sites. Though the server is free it is not open source. It however, runs on Windows, Linux and UNIX platforms. The Sun Java System web server supports various languages, scripts and technologies required for Web 2.0 such as JSP, Java Servlets, PHP, Perl, Python, and Ruby on Rails, ASP and Coldfusion etc.

5. Jigsaw Server Jigsaw (W3C's Server) comes from the World Wide Web Consortium. It is open source and free and can run on various platforms like Linux, UNIX, Windows, and Mac OS X Free BSD etc. Jigsaw has been written in Java and can run CGI

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 124

125 WEB DESIGNING

scripts and PHP programs.

Proxy Server

Overview Proxy server is an intermediary server between client and the internet. Proxy servers offers the following basic functionalities:

 Firewall and network data filtering.

 Network connection sharing

 Data caching Proxy servers allow to hide, conceal and make your network id anonymous by hiding your IP address. Purpose of Proxy Servers Following are the reasons to use proxy servers:

 Monitoring and Filtering

 Improving performance

 Translation

 Accessing services anonymously

 Security Monitoring and Filtering Proxy servers allow us to do several kind of filtering such as:

 Content Filtering

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 125

126 WEB DESIGNING

 Filtering encrypted data

 Bypass filters

 Logging and eavesdropping Improving performance It fasten the service by process of retrieving content from the cache which was saved when previous request was made by the client. Translation It helps to customize the source site for local users by excluding source content or substituting source content with original local content. In this the traffic from the global users is routed to the source website through Translation proxy. Accessing services anonymously In this the destination server receives the request from the anonymzing proxy server and thus does not receive information about the end user. Security Since the proxy server hides the identity of the user hence it protects from spam and the hacker attacks. Type of Proxies Following table briefly describes the type of proxies: Forward Proxies In this the client requests its internal network server to forward to the internet.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 126

127 WEB DESIGNING

Open Proxies Open Proxies helps the clients to conceal their IP address while browsing the web.

Reverse Proxies In this the requests are forwarded to one or more proxy servers and the response from the proxy server is retrieved as if it came directly from the original Server.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 127

128 WEB DESIGNING

Architecture The proxy server architecture is divided into several modules as shown in the following diagram:

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 128

129 WEB DESIGNING

Proxy user interface This module controls and manages the user interface and provides an easy to use graphical interface, window and a menu to the end user. This menu offers the following functionalities:

 Start proxy

 Stop proxy

 Exit

 Blocking URL

 Blocking client

 Manage log

 Manage cache

 Modify configuration Proxy server listener It is the port where new request from the client browser is listened. This module also performs blocking of clients from the list given by the user. Connection Manager It contains the main functionality of the proxy server. It performs the following functions:

 It contains the main functionality of the proxy server. It performs the following functions:

 Read request from header of the client.

 Parse the URL and determine whether the URL is blocked or not.

 Generate connection to the web server.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 129

130 WEB DESIGNING

 Read the reply from the web server.

 If no copy of page is found in the cache then download the page from web server else will check its last modified date from the reply header and accordingly will read from the cache or server from the web.

 Then it will also check whether caching is allowed or not and accordingly will cache the page. Cache Manager This module is responsible for storing, deleting, clearing and searching of web pages in the cache. Log Manager This module is responsible for viewing, clearing and updating the logs. Configuration This module helps to create configuration settings which in turn let other modules to perform desired configurations such as caching.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 130

131 WEB DESIGNING

Search Engines Introduction Search Engine refers to a huge database of internet resources such as web pages, newsgroups, programs, images etc. It helps to locate information on World Wide Web. User can search for any information by passing query in form of keywords or phrase. It then searches for relevant information in its database and return to the user.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 131

132 WEB DESIGNING

Search Engine Components Generally there are three basic components of a search engine as listed below: 1. Web Crawler 2. Database 3. Search Interfaces Web crawler It is also known as spider or bots. It is a software component that traverses the web to gather information. Database All the information on the web is stored in database. It consists of huge web resources. Search Interfaces This component is an interface between user and the database. It helps the user to search through the database. Search Engine Working Web crawler, database and the search interface are the major component of a search engine that actually makes search engine to work. Search engines make use of Boolean expression AND, OR, NOT to restrict and widen the results of a search. Following are the steps that are performed by the search engine:

 The search engine looks for the keyword in the index for predefined database instead of going directly to the web to search for the keyword.

 It then uses software to search for the information in the database. This software component is known as web crawler.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 132

133 WEB DESIGNING

 Once web crawler finds the pages, the search engine then shows the relevant web pages as a result. These retrieved web pages generally include title of page, size of text portion, first several sentences etc. These search criteria may vary from one search engine to the other. The retrieved information is ranked according to various factors such as frequency of keywords, relevancy of information, links etc.

 User can click on any of the search results to open it. Architecture The search engine architecture comprises of the three basic layers listed below:

 Content collection and refinement.

 Search core

 User and application interfaces

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 133

134 WEB DESIGNING

Search Engine Processing Indexing Process Indexing process comprises of the following three tasks:

 Text acquisition

 Text transformation

 Index creation TEXT ACQUISITION It identifies and stores documents for indexing. TEXT TRANSFORMATION It transforms document into index terms or features. INDEX CREATION It takes index terms created by text transformations and create data structures to suport fast searching.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 134

135 WEB DESIGNING

Query Process Query process comprises of the following three tasks:

 User interaction

 Ranking

 Evaluation USER INTERACTION It supporst creation and refinement of user query and displays the results. RANKING It uses query and indexes to create ranked list of documents. EVALUATION It monitors and measures the effectiveness and efficiency. It is done offline. Examples Following are the several search engines available today: Search Description Engine

Google It was originally called BackRub. It is the most popular search engine globally.

Bing It was launched in 2009 by Microsoft.It is the latest web-based search engine that also delivers Yahoo’s results.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 135

136 WEB DESIGNING

Ask It was launched in 1996 and was originally known as Ask Jeeves. It includes support for match, dictionary, and conversation question.

AltaVista It was launched by Digital Equipment Corporation in 1995. Since 2003, it is powered by Yahoo technology.

AOL.Search It is powered by Google.

LYCOS It is top 5 internet portal and 13th largest online property according to Media Matrix.

Alexa It is subsidiary of Amazon and used for providing website traffic information.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 136

137 WEB DESIGNING

Internet Collaboration Overview

Online Chatting Online chatting is a text-based communication between two or more people over the network. In this, the text message is delivered in real time and people get immediate response. Talkomatic was the world first online chat system. It was developed by Doug Brown and David R. Woolley in 1973. Chat Etiquette Chat etiquette defines rules that are supposed to be followed while online chatting:

 Avoid chat slang

 Try to spell all words correctly.

 Don’t write all the words in capital.

 Don’t send other chat users private messages without asking them.

 Abide by the rules created by those running the chat.

 Use emoticons to let other person know your feelings and expressions.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 137

138 WEB DESIGNING

Web Based Chat Services Following web sites offers browser based chat services: Website Description

Facebook It was founded by Mark Zuckerbergwith his college roommates at Harvard university. Facebook lets the user to create personal profile, post status & photos, and receive notifications. eBuddy It is an instant messaging service. It supports multiprotocol instant messaging clients.

Convore It offers real time web based chat system.

MeBeam It offers video based chat between the clients to create video conferencing rooms for up to 16 people.

Yahoo! It offers PC-PC, PC-phone, Phone-to-PC, file transfer, Messenger webcam hosting, text messaging service etc.

WhatsApp It is an instant messaging service application available on smart phones.

Gmail It offers instant chatting, sending and receiving mails, and video calling services.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 138

139 WEB DESIGNING

Instant Messaging (IM) Instant messaging is a software utility that allows IM users to communicate by sending text messages, files, and images. Some of the IMs also support voice and video calls. Application Description

Nimbuzz It is native iPhone app. It supports voice and video chats, file sharing, and group chats with panache. eBuddy eBuddy IM helps to have all your buddies from multiple IM accounts in one single list.

Imo.in It has capability to link all your IM accounts together. You can log on to all of your IM accounts by just logging into imo.in.

MeBeam It offers video based chat between the clients to create video conferencing rooms for up to 16 people.

Yahoo! It offers PC-PC, PC-phone, Phone-to-PC, file Messenger transfer, webcam hosting, text messaging service etc.

GoogleTalk It is an IM by Google and one of the most widely used.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 139

140 WEB DESIGNING

Lync Lync is an IM developed by Microsoft. It is widely used in corporate sector for internal and external communication as well.

Internet Relay Chat (IRC) Internet Relay Chat is a protocol developed by Oikarinen in August 1988. It defines set of rules for communication between client and server by some communication mechanism such as chat rooms, over the internet. IRC consist of separate networks of IRC servers and machines. These allow IRC clients to connect to IRC. IRC client runs a program client to connect to a server on one of the IRC nets. After connecting to IRC server on IRC network, user can join with one or more channels and converse over there. IRC Commands Following commands are used while connected to an IRC server. Almost of the below commands will work with most of IRC clients and servers. Command Description

/away Leaves a message let the others know why you are (message) gone.

/clear Clears the text from current window.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 140

141 WEB DESIGNING

/clearall Clears all the text from all of the opened windows.

/dcc chat Opens a chat window with the username that you (username) specify.

/help Brings up a list of all the commands or the help window.

/ignore Allows you to ignore or not ignore a user. (on/of) (username)

/ignore (+/-) Alternative to ignore or not ignore a user. (username)

/join Joins a particular chat group. (#channel)

/nick Changes the username (username)

/part Leaves specified channel. (channel)

/ping Pings a specified user and it let you know how far

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 141

142 WEB DESIGNING

(username) they are in seconds

/whowas Shows information about specified user that was in (username) earlier.

/ping Pings all users in specified channel. (channel)

Video Conferencing Video conferencing or Video teleconferencing is a method of communicating by two-way video and audio transmission with help of telecommunication technologies. Modes of Video Conferencing POINT-TO-POINT This mode of conferencing connects two locations only.

MULTI-POINT This mode of conferencing connects more than two locations through Multi-point Control Unit (MCU).

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 142

143 WEB DESIGNING

Video Sharing Video sharing is an IP Multimedia System (IMS)service that allows user to switch voice calls to unidirectional video streaming session. The video streaming session can be initiated by any of the parties. Moreover, the video source can be the camera or the pre-recorded video clip.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 143

144 WEB DESIGNING

Mailing List In order to send same email to a group of people, an electron list is created which is know as Mailing List. It is the list server which receives and distributes postings and automatically manages subscriptions. Mailing list offers a forum, where users from all over the globe can answer questions and have them answered by others with shared interests. Types of Mailing List Following are the various types of mailing lists: RESPONSE LIST It contains the group of people who have responsed to an offer in some way. These people are the customers who have shown interest in specific product or service. COMPILED LIST The compiled list is prepared by collecting information from various sources such as surveys, telemarketing etc. ANNOUNCEMENTS These lists are created for sending out coupans , new product announcements and other offers to the customers. DISCUSSION LIST This list is created for sharing views on a specific topic suchas computer, environment , healt, education etc. How does mailing list work? Before joining a mailing list, it is mandatory to subscribe to it. Once you are subscribed, your message will be sent to all the persons who have subscribed to the list. Similarly if any

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 144

145 WEB DESIGNING subscriber posts a message, then it will be received by all subscribers of the list.

Finding Mailing List There are a number of websites are available to maintain database of publically accessible mailing list. Some of these are:

 http://tile.net./lists

 http://lists.com

 http://topica.com

 http://isoft.com/lists/list-q.html Mailing lists can also be found using Google website. In Google, move to directory and the follow: Computers > Internet >Mailing List > Directories. Subscribing to Mailing List To subscribe to a list, you need to send an email message to the administrative address mailing list containing one or more commands. For example, if you want to subscribe to Harry Potter list in gurus.com where name of the list server us

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 145

146 WEB DESIGNING

Majordomo, then you have to send email to [email protected] containing the text, Subscribe harry potter in its body. After sending the email, you will receive a confirmation email for your subscription. This email will include list of commands that will help you to perform various operations such as unsubscribing, receiving acknowledgement, and find out what list you are subscribed to. There are many list servers available, each having its own commands for subscribing to the list. Some of them are described in the following table: List Command Example Server

LISTSERV subscribe subscribe commdhtml rahul listname yourname

Majordomo subscribe subscribe commdhtml listname

ListProc subscribe subscribe commdhtml Rahul listname yourname

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 146

147 WEB DESIGNING

Usenet Newsgroup Usenet (USEr NETwork) Like mailing lists Usenet is also a way of sharing information. It was started by Tom Truscott and Jim Ellis in 1979. Initially it was limited to two sites but today there are thousands of Usenet sites involving millions of people. Usenet is a kind of discussion group where people can share views on topic of their interest. The article posted to a newsgroup becomes available to all readers of the newsgroup. Newsgroup Classification There exist a number of newsgroups distributed all around the world. These are identified using a hierarchical naming system in which each newsgroup is assigned a unique name that consists of alphabetic strings separated by periods. The leftmost portion of the name represents the top-level category of the newsgroup followed by subtopic. The subtopic can further be subdivided and subdivided even further (if needed).

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 147

148 WEB DESIGNING

For example, the newsgroup comp.lang.C++contains discussion on C++ language. The leftmost part comp classifies the newsgroup as one that contains discussion of computer related topics. The second part identifies one of the subtopic langthat related to computer languages. The third part identifirs one of the computer languages, in this case C++.

The following table shows the top-level hierarchies of Usenet Newsgroup:

Comp.* Computer Comp.lang.java.beans related topics Comp.database.oracle including computer hardware, software, languages etc.

News.* Newsgroup News.software.nntp and Usenet topics

Rec.* Artistic Rec.arts.animation activities, hobbies, or

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 148

149 WEB DESIGNING

recreational activities such as books, movies etc.

Sci.* Scientific Sci.bio.botany topics

Soc.* Social issues Soc.culture.india and various culture

Talk.* Conventional Soc.politics.india subjects such as religion, politics etc.

Humanities.* Art, literature, Humanities.classics philosophy and culture

Misc.* Miscellaneous Misc.answers topics i.e. Misc.books.technical issues tat may not fit into other

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 149

150 WEB DESIGNING

categories

Working of Usenet Newsgroup When a newsreader such as outlook express connects to a news server, it downloads all the new messages posted in the subscribed newsgroup. We can either reply a message after reading or post a news article to the news server. The article posted to a news server is appended to the file maintained for that newsgroup Then the news server shares article with other news servers that are connected to it. Then each news server compares if both carry the same newsgroup. If yes, then by comparing the files it checks that if there are any new articles in the file, if so they are appended to the file. The updated file of the news servers is then sent to other news servers connected to it. This process is continues until all of the news servers have updated information.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 150

151 WEB DESIGNING

Reading Articles If user wants to read article, user has to connect to the news server using the newsreader. The newsreader will then display a list of newsgroups available on the news server where user can subscribe to any of the news group. After subscription the newsreader will automatically download articles from the newsgroup. After reading the article user can either post a reply to newsgroup or reply to sender by email. The newwsreader saves information about the subscribed newsgroups and articles read by the user in each group. Posting an Article In order to send new article to a newsgroup, user first need to compose an article and specify the names of the newsgroup to whom he/she wants to send. An article can be sent to one or

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 151

152 WEB DESIGNING more newsgroup at a time provided all the newsgroups are on same news server. It is also possible to cancel the article that you have posted but if someone has downloaded an article before cancellation then that person will be able to read the article. Replying an Article After reading the article user can either post a reply to newsgroup or reply to sender by email. There are two options available Reply and Reply group. Using Reply, the reply mail will be sent to the autor of the article while Reply group will send a reply to whole of the newsgroup. Cancelling an Article To cancle an article after it is sent, select the message and click Message > Cancel message. It will cancle the message from the news server. But if someone has downloaded an article before cancellation then that person will be able to read the article. Usenet netiquette While posting an article on a newsgroup, one should follow some rules of netiquette as listed below:

 Spend some time in understanding a newsgroup when you join it for first time.

 Article posted by you should be easy to read, concise and grammatically correct.

 Information should be relevant to the article title.

 Don’t post same article to multiple newsgroups.

 Avoid providing your business email address while subscribing to a newsgroup as may be used by spammers.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 152

153 WEB DESIGNING

 Avoid using capital letters as someone may interpret as shouting.

 Prefer to use plain text wherever possible in your article.

Mailing list vs. Newsgroup S.N. Mailing Newsgroup List

1. Messages Messages are not posted to individual are mailboxes but can be viewed by anyone who delivered to has subscribed to that newsgroup. individual mailboxes of subscribed member of group.

2. Working Working with a particular newsgroup requires with mailing proper knowledge of that newsgroup. list is easier than newsgroup. It is easy to compose and receive

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 153

154 WEB DESIGNING

emails.

3. In order to It requires a newsgroup reader. send or receive mails, you required an email program.

4. Messages Messages are available to public. are delivered to certain group of people.

5. Mailing list Newsgroup supports threaded discussion. does not support threaded discussion.

6. Messages Article posted on a newsgroup can be delivered to cancelled. listed subscribers

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 154

155 WEB DESIGNING

can not be cancelled.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 155

156 WEB DESIGNING

Online Education Online Training Online Training is a form of distance learning in which educational information is delivered through internet. There are many online applications. These applications vary from simple downloadable content to structured programs. Benefits Online Training has prooved to be very effective in corporate world. The benefits of Online Training are described below:

 It is cost effective and saves time.

 It is available 24/7 anywhere.

 It is easy to track progress of the course.

 It offers user-friendly and interactive interface. Online certification It is also possible to do online certification on specialized courses which add value to your qualification. Many companies offer online certification on a number of technologies. There are three types of online certification as listed below:

 Corporate

 Product-specific

 Profession-wide Corporate certifications are made by small organizations for internal purposes. Product-specific certifications target at developing and recognizing adeptness with regard to particular product.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 156

157 WEB DESIGNING

Profession wide certification aims at recognizing expertise in particular profession. Online Seminar Online seminar is the one which is conducted over the internet. It is a live seminar and allows the attendees to ask questions via Q&A panel onscreen. Online seminar just requires a computer with internet connection, headphones, speakers, and authorization to attend it. Benefits Online Seminar has prooved to be very effective in corporate and Academic world. The benefits of Online Seminar are described below:

 Online seminars are short, sharp and to the point.

 They always tend to deal with a specific subject in detail.

 Since the user participates online therefore manuals are provided via. Pdf.

 Online seminars are cost effective and convenient. Webinar Webinar is a web based seminar or workshop in which presentation is delivered over the web using conferencing software. The audio part of webinar is delivered through teleconferencing. Conferencing Online conferencing is also a kind of online seminar in which two or more people are involved. It is also performed over the internet. It allows the business persons to do meeting online.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 157

158 WEB DESIGNING

Benefits Online Webinar has prooved to be very effective in corporate and Academic world. The benefits of Online Webinar are described below:

 It is cheaper and convenient.

 It can be accessed 24/7 anywhere.

 It allows high level of participation.

 There is permanent record of proceeding

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 158

159 WEB DESIGNING

Social Networking

Introduction Social Networking refers to grouping of individuals and organizations together via some medium, in order to share thoughts, interests, and activities. There are several web based social network services are available such as facebook, twitter, linkedin, Google+ etc. which offer easy to use and interactive interface to connect with people with in the country an overseas as well. There are also several mobile based social networking services in for of apps such as Whatsapp, hike, Line etc.

Available Social networking Services The following table describes some of the famous social networking services provided over web and mobile: S.N. Service Description

1. Facebook Allows to share text, photos, video etc. It also offers interesting online games.

2. Google+ It is pronounced as Google Plus. It is owned and operated by

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 159

160 WEB DESIGNING

Google.

3. Twitter Twitter allows the user to send and reply messages in form of tweets. These tweets are the small messages, generally include 140+ characters.

4. Faceparty Faceparty is a UK based social networking site. It allows the users to create profiles and interact with each other using forums messages.

5. Linkedin Linkedin is a business and professional networking site.

6. Flickr Flickr offers image hosting and video hosting.

7. Ibibo Ibibo is a talent based social networking site. It allows the users to promote one’s self and also discover new talent.

8. Whatsapp It is a mobile based messaging app. It allows to send text, video, and audio messages

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 160

161 WEB DESIGNING

9. Line It is same as whatsapp. Allows to make free calls and messages.

10. Hike It is also mobile based messager allows to send messages and exciting emoticons.

Where Social Networking Helps Following are the areas where social networking has become most popular: Online Marketing Website like facebook allows us to create a page for specific product, community or firm and promiting over the web. Online Jobs Website like linkedin allows us to create connection with professionals and helps to find the suitable job based on one’s specific skills set. Online News On social networking sites, people also post daily news which helps us to keep us updated. Chatting Social networking allows us to keep in contact with friends and family. We can communicate with them via messages. Share Picture, Audio and video One can share picture, audio and video using social networking sites

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 161

162 WEB DESIGNING

Internet Security

Introduction Internet security refers to securing communication over the internet. It includes specific security protocols such as:

 Internet Security Protocol (IPSec)

 Secure Socket Layer (SSL) Internet Security Protocol (IPSec) It consists of a set of protocols designed by Internet Engineering Task Force (IETF). It provides security at network level and helps to create authenticated and confidential packets for IP layer. Secure Socket Layer (SSL) It is a security protocol developed by Netscape Communications Corporation. ). It provides security at transport layer. It addresses the following security issues:

 Privacy

 Integrity

 Authentication Threats Internet security threats impact the network, data security and other internet connected systems. Cyber criminals have evolved several techniques to threat privacy and integrity of bank accounts, businesses, and organizations. Following are some of the internet security threats:

 Mobile worms

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 162

163 WEB DESIGNING

 Malware

 PC and Mobile ransomware

 Large scale attacks like Stuxnet that attempts to destroy infrastructure.

 Hacking as a Service

 Spam

 Phishing Email Phishing Email phishing is an activity of sending emails to a user claiming to be a legitimate enterprise. Its main purpose is to steal sensitive information such as usernames, passwords, and credit card details. Such emails contains link to websites that are infected with malware and direct the user to enter details at a fake website whose look and feels are same to legitimate one. What a phishing email may contain? Following are the symptoms of a phishing email: SPELLING AND BAD GRAMMAR Most often such emails contain grammatically incorrect text. Ignore such emails, since it can be a spam. BEWARE OF LINKS IN EMAIL Don’t click on any links in suspicious emails. THREATS Such emails contain threat like “your account will be closed if you didn’t respond to an email message”.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 163

164 WEB DESIGNING

SPOOFING POPULAR WEBSITES OR COMPANIES These emails contain graphics that appear to be connected to legitimate website but they actually are connected to fake websites.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 164

165 WEB DESIGNING

Data Encryption

Introduction Encryption is a security method in which information is encoded in such a way that only authorized user can read it. It uses encryption algorithm to generate ciphertext that can only be read if decrypted. Types of Encryption There are two types of encryptions schemes as listed below:

 Symmetric Key encryption

 Public Key encryption SYMMETRIC KEY ENCRYPTION Symmetric key encryption algorithm uses same cryptographic keys for both encryption and decryption of cipher text.

PUBLIC KEY ENCRYPTION Public key encryption algorithm uses pair of keys, one of which is a secret key and one of which is public. These two keys are mathematically linked with each other.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 165

166 WEB DESIGNING

Hashing In terms of security, hashing is a technique used to encrypt data and generate unpredictable hash values. It is the hash function that generates the hash code, which helps to protect the security of transmission from unauthorized users. Hash function algorithms Hashing algorithm provides a way to verify that the message received is the same as the message sent. It can take a plain text message as input and then computes a value based on that message. Key Points

 The length of computed value is much shorter than the original message.

 It is possible that different plain text messages could generate the same value. Here we will discuss a sample hashing algorithm in which we will multiply the number of a’s, e’s and h’s in the message and will then add the number of o’s to this value. For example, the message is “ the combination to the safe is two, seven, thirty-five”. The hash of this message, using our simple hashing algorithm is as follows: 2 x 6 x 3 ) + 4 = 40

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 166

167 WEB DESIGNING

The hash of this message is sent to John with cipher text. After he decrypts the message, he computes its hash value using the agreed upon hashing algorithm. If the hash value sent by Bob doesn’t match the hash value of decrypted message, John will know that the message has been altered. For example, John received a hash value of 17 and decrypted a message Bob has sent as “You are being followed, use backroads, hurry” He could conclude the message had been altered, this is because the hash value of the message he received is: (3x4x1)+4 = 16 This is different from then value 17 that Bob sent.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 167

168 WEB DESIGNING

Digital Signature

Digital Signature Digital signatures allow us to verify the author, date and time of signatures, authenticate the message contents. It also includes authentication function for additional capabilities.

A digital signature should not only be tied to the signing user, but also to the message. Applications There are several reasons to implement digital signatures to communications: Authentication Digital signatures help to authenticate the sources of messages. For example, if a bank’s branch office sends a message to central office, requesting for change in balance of an account. If

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 168

169 WEB DESIGNING the central office could not authenticate that message is sent from an authorized source, acting of such request could be a grave mistake. Integrity Once the message is signed, any change in the message would invalidate the signature. Non-repudiation By this property, any entity that has signed some information cannot at a later time deny having signed it.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 169

170 WEB DESIGNING

Firewall Security

Firewall is a barrier between Local Area Network (LAN) and the Internet. It allows keeping private resources confidential and minimizes the security risks. It controls network traffic, in both directions. The following diagram depicts a sample firewall between LAN and the internet. The connection between the two is the point of vulnerability. Both hardware and the software can be used at this point to filter network traffic.

There are two types of Firewall system: One works by using filters at the network layer and the other works by using proxy servers at the user, application, or network layer.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 170

171 WEB DESIGNING

Key Points

 Firewall management must be addressed by both system managers and the network managers.

 The amount of filtering a firewall varies. For the same firewall, the amount of filtering may be different in different directions.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 171

172 WEB DESIGNING

Internet Technologies - Quick Reference Guide

Internet  Internet is a world-wide global system of interconnected computer networks.

 Internet uses the standard Internet Protocol (TCP/IP).

 Every computer in internet is identified by a unique IP address.

 IP Address is a unique set of numbers (such as 110.22.33.114) which identifies a computer location.

 A special computer DNS (Domain Name Server) is used to give name to the IP Address so that user can locate a computer by a name.

 For example, a DNS server will resolve a name http://www.tutorialspoint.com to a particular IP address to uniquely identify the computer on which this website is hosted.

 Internet is accessible to every user all over the world.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 172

173 WEB DESIGNING

Internet Evoloution The concept of Internet was originated in 1969 and has undergone several technological & Infrastructural changes as discussed below:

 The origin of Internet devised from the concept of Advanced Research Project Agency Network (ARPANET).

 ARPANET was developed by United States Department of Defense.

 Basic purpose of ARPANET was to provide communication among the various bodies of government.

 Initially, there were only four nodes, formally called Hosts.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 173

174 WEB DESIGNING

 In 1972, the ARPANET spread over the globe with 23 nodes located at different countries and thus became known as Internet.

 By the time, with invention of new technologies such as TCP/IP protocols, DNS, WWW, browsers, scripting languages etc.,Internet provided a medium to publish and access information over the web. Internet Advantages Internet covers almost every aspect of life, one can think of. Here, we will discuss some of the advantages of Internet:

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 174

175 WEB DESIGNING

Internet Disadvantages

Extranet Extranet refers to network within an organization, using internet to connect to the outsiders in controlled manner. It helps to connect businesses with their customers and suppliers and therefore allows working in a collaborative manner.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 175

176 WEB DESIGNING

Extranet Benefits Extranet proves to be a successful model for all kind of businesses whether small or big. Here are some of the advantages of extranet for employees, suppliers, business partners, and customers:

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 176

177 WEB DESIGNING

Extranet Issues Apart for advantages there are also some issues associated with extranet. These issues are discussed below: Hosting Where the extranet pages will be held i.e. who will host the extranet pages. In this context there are two choices:

 Host it on your own server.

 Host it with an Internet Service Provider (ISP) in the same way as web pages. But hosting extranet pages on your own server requires high bandwidth internet connection which is very costly.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 177

178 WEB DESIGNING

Security Additional firewall security is required if you host extranet pages on your own server which result in a complex security mechanism and increase work load. Accessing Issues Information can not be accessed without internet connection. However, information can be accessed in Intranet without internet connection. Decreased Interaction It decreases the face to face interaction in the business which results in lack of communication among customers, business partners and suppliers. Extranet vs. Intranet The following table shows differences between Extranet and Intranet: Extranet Intranet

Internal network Internal network that can not be accessed that can be externally. accessed externally.

Extranet is Only limited users of a company. extension of company's Intranet.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 178

179 WEB DESIGNING

For limited Only for communication within a company. external communication between customers, suppliers and business partners.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 179

180 WEB DESIGNING

Internet Reference Models OSI Reference Model OSI is acronym of Open System Interface. This model is developed by the International organization of Standardization (ISO) and therefore also referred as ISO- OSI Model. The OSI model consists of seven layers as shown in the following diagram. Each layer has a specific function, however each layer provide services to the layer above.

PHYSICAL LAYER The Physical layer is responsible for the following activities:

 Activating, maintaining and deactivating the physical connection.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 180

181 WEB DESIGNING

 Defining voltages and data rates needed for transmission.

 Converting digital bits into electrical signal.

 Deciding whether the connection is simplex, half duplex or full duplex. DATA LINK LAYER The data link layer performs the following functions:

 Performs synchronization and error control for the information which is to be transmitted over the physical link.

 Enables error detection, and adds error detection bits to the data which are to be transmitted. NETWORK LAYER Following are the functions of Network Layer:

 To route the signals through various channels to the other end.

 To act as the network controller by deciding which route data should take.

 To divide the outgoing messages into packets and to assemble incoming packets into messages for higher levels. TRANSPORT LAYER The Transport layer performs the following functions:

 It decides if the data transmission should take place on parallel paths or single path.

 It performs multiplexing, splitting on the data.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 181

182 WEB DESIGNING

 It breaks the data groups into smaller units so that they are handled more efficiently by the network layer. The Transport Layer guarantees transmission of data from one end to other end. SESSION LAYER The Session layer performs the following functions:

 Manages the messages and synchronizes conversations between two different applications.

 It controls logging on and off, user identification, billing and session management. PRESENTATION LAYER The Presentation layer performs the following functions: <="" ul="" style="box-sizing: border-box; color: rgb(49, 49, 49); font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text- align: start; text-indent: 0px; text-transform: none; white- space: normal; widows: 2; word-spacing: 0px; -webkit-text- stroke-width: 0px; text-decoration-style: initial; text- decoration-color: initial;">

 This layer makes it sure that the information is delivered in such a form that the receiving system will understand and use it. APPLICATION LAYER The Application layer performs the following functions:

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 182

183 WEB DESIGNING

 It provides different services such as manipulation of information in several ways, retransferring the files of information, distributing the results etc.

 The functions such as LOGIN or password checking are also performed by the application layer. TCP/IP Reference Model TCP/IP model is practical model and is used in the Internet. TCP/IP is acronym of Transmission Control Protocol and Internet Protocol. The TCP/IP model combines the two layers (Physical and Data link layer) into one layer i.e. Host-to-Network layer. The following diagram shows the various layers of TCP/IP model:

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 183

184 WEB DESIGNING

APPLICATION LAYER This layer is same as that of the OSI model and performs the following functions:

 It provides different services such as manipulation of information in several ways, retransferring the files of information, distributing the results etc.

 The functions such as LOGIN or password checking are also performed by the application layer. Protocols used: TELNET, FTP, SMTP, DN, HTTP, NNTP are the protocols employed in this layer. TRANSPORT LAYER It does the same functions as that of transport layer in OSI model. Here are the key points regarding transport layer:

 It uses TCP and UDP protocol for end to end transmission.

 TCP is reliable and connection oriented protocol.

 TCP also handles flow control.

 The UDP is not reliable and a connection less protocol also does not perform flow control. Protocols used: TCP/IP and UDPprotocols are employed in this layer. INTERNET LAYER The function of this layer is to allow the host to insert packets into network and then make them travel independently to the destination. However, the order of receiving the packet can be different from the sequence they were sent.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 184

185 WEB DESIGNING

Protocols used: Internet Protocol (IP) is employed in Internet layer. HOST-TO-NETWORK LAYER This is the lowest layer in TCP/IP model. The host has to connect to network using some protocol, so that it can send IP packets over it. This protocol varies from host to host and network to network. Protocols used: ARPANET, SATNET, LAN, packet radio are the protocols which are used in this layer. Domain Name System Architecture The Domain name system comprises of Domain Names, Domain Name Space, Name Server that have been described below: Domain Names Domain Name is a symbolic string associated with an IP address. There are several domain names available; some of them are generic such as com, edu, gov, net etc, while some country level domain names such as au, in, za, us etc. The following table shows the Generic Top-Level Domain names:

Domain Meaning Name

Com Commercial business

Edu Education

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 185

186 WEB DESIGNING

Gov U.S. government agency

Int International entity

Mil U.S. military

Net Networking organization

Org Non profit organization

The following table shows the Country top-leveldomain names: Domain Name Meaning au Australia in India cl Chile fr France us United States

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 186

187 WEB DESIGNING za South Africa uk United Kingdom jp Japan es Spain de Germany ca Canada ee Estonia hk Hong Kong

Domain Name Space The domain name space refers a hierarchy in the internet naming structure. This hierarchy has multiple levels (from 0 to 127), with a root at the top. The following diagram shows the domain name space hierarchy:

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 187

188 WEB DESIGNING

In the above diagram each subtree represents a domain. Each domain can be partitioned into sub domains and these can be further partitioned and so on. Name Server Name server contains the DNS database. This database comprises of various names and their corresponding IP addresses. Since it is not possible for a single server to maintain entire DNS database, therefore, the information is distributed among many DNS servers.

 Hierarchy of server is same as hierarchy of names.

 The entire name space is divided into the zones Zones Zone is collection of nodes (sub domains) under the main domain. The server maintains a database called zone file for every zone.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 188

189 WEB DESIGNING

If the domain is not further divided into sub domains then domain and zone refers to the same thing. The information about the nodes in the sub domain is stored in the servers at the lower levels however; the original server keeps reference to these lower levels of servers. TYPES OF NAME SERVERS Following are the three categories of Name Servers that manages the entire Domain Name System:

 Root Server

 Primary Server

 Secondary Server

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 189

190 WEB DESIGNING

ROOT SERVER Root Server is the top level server which consists of the entire DNS tree. It does not contain the information about domains but delegates the authority to the other server PRIMARY SERVERS Primary Server stores a file about its zone. It has authority to create, maintain, and update the zone file. SECONDARY SERVER Secondary Server transfers complete information about a zone from another server which may be primary or secondary server. The secondary server does not have authority to create or update a zone file. DNS Working DNS translates the domain name into IP address automatically. Following steps will take you through the steps included in domain resolution process:

 When we type www.tutorialspoint.cominto the browser, it asks the local DNS Server for its IP address. Here the local DNS is at ISP end.

 When the local DNS does not find the IP address of requested domain name, it forwards the request to the root DNS server and again enquires about IP address of it.

 The root DNS server replies with delegation that I do not know the IP address of www.tutorialspoint.com but know the IP address of DNS Server.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 190

191 WEB DESIGNING

 The local DNS server then asks the com DNS Server the same question.

 The com DNS Server replies the same that it does not know the IP address of www.tutorialspont.com but knows the address of tutorialspoint.com.

 Then the local DNS asks the tutorialspoint.com DNS server the same question.

 Then tutorialspoint.com DNS server replies with IP address of www.tutorialspoint.com.

 Now, the local DNS sends the IP address of www.tutorialspoint.com to the computer that sends the request.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 191

192 WEB DESIGNING

Internet Services Communication Services There are various Communication Services available that offer exchange of information with individuals or groups. The following table gives a brief introduction to these services: S.N. Service Description

1 Electronic Mail Used to send electronic message over the internet.

2 Telnet Used to log on to a remote computer that is attached to internet.

3 Newsgroup Offers a forum for people to discuss topics of common interests.

4 Internet Relay Chat (IRC) Allows the people from all over the world to communicate in real time.

5 Mailing Lists Used to organize group of internet users to share common information through e-mail.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 192

193 WEB DESIGNING

6 Internet Telephony (VoIP) Allows the internet users to talk across internet to any PC equipped to receive the call.

7 Instant Messaging Offers real time chat between individuals and group of people. Eg. Yahoo messenger, MSN messenger.

Information Retrieval Services There exist several Information retrieval services offering easy access to information present on the internet. The following table gives a brief introduction to these services: S.N. Service Description

1 File Transfer Protocol (FTP) Enable the users to transfer files.

2 Archie It’s updated database of public FTP sites and their content. It helps to search a file by its name.

3 Gopher Used to search, retrieve, and display documents on remote sites.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 193

194 WEB DESIGNING

4 Very Easy Rodent Oriented Netwide Index to Computer Achieved (VERONICA) VERONICA is gopher based resource. It allows access to the information resource stored on gopher’s servers.

Web Services Web services allow exchange of information between applications on the web. Using web services, applications can easily interact with each other. The web services are offered using concept of Utility Computing. World Wide Web (WWW) WWW is also known as W3. It offers a way to access documents spread over the several servers over the internet. These documents may contain texts, graphics, audio, video, hyperlinks. The hyperlinks allow the users to navigate between the documents. Video Conferencing Video conferencing or Video teleconferencing is a method of communicating by two-way video and audio transmission with help of telecommunication technologies. MODES OF VIDEO CONFERENCING POINT-TO-POINT This mode of conferencing connects two locations only.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 194

195 WEB DESIGNING

MULTI-POINT This mode of conferencing connects more than two locations through Multi-point Control Unit (MCU).

Internet Protocols Transmission Control Protocol (TCP)  Transmission Control Protocol (TCP) corresponds to the Transport Layer of OSI Model.

 TCP is a reliable and connection oriented protocol.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 195

196 WEB DESIGNING

 TCP offers:

o Stream Data Transfer.

o Reliability.

o Efficient Flow Control

o Full-duplex operation.

o Multiplexing.

 TCP offers connection oriented end-to-end packet delivery.

 TCP ensures reliability by sequencing bytes with a forwarding acknowledgement number that indicates to the destination the next byte the source expect to receive.

 It retransmits the bytes not acknowledged with in specified time period. Internet Protocol (IP) Internet Protocol is connectionless and unreliableprotocol. It ensures no guarantee of successfully transmission of data. In order to make it reliable, it must be paired with reliable protocol such as TCP at the transport layer. Internet protocol transmits the data in form of a datagram as shown in the following diagram:

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 196

197 WEB DESIGNING

User Datagram Protocol (UDP) Like IP, UDP is connectionless and unreliable protocol. It doesn’t require making a connection with the host to exchange data. Since UDP is unreliable protocol, there is no mechanism for ensuring that data sent is received. UDP transmits the data in form of a datagram. The UDP datagram consists of five parts as shown in the following diagram:

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 197

198 WEB DESIGNING

File Transfer Protocol (FTP) FTP is used to copy files from one host to another. FTP offers the mechanism for the same in following manner:

 FTP creates two processes such as Control Process and Data Transfer Process at both ends i.e. at client as well as at server.

 FTP establishes two different connections: one is for data transfer and other is for control information.

 Control connection is made between control processes while Data Connectionis made between<="" b="" style="box-sizing: border-box;">

 FTP uses port 21 for the control connection and Port 20 for the data connection.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 198

199 WEB DESIGNING

Trivial File Transfer Protocol (TFTP) Trivial File Transfer Protocol is also used to transfer the files but it transfers the files without authentication. Unlike FTP, TFTP does not separate control and data information. Since there is no authentication exists, TFTP lacks in security features therefore it is not recommended to use TFTP. Key points

 TFTP makes use of UDP for data transport. Each TFTP message is carried in separate UDP datagram.

 The first two bytes of a TFTP message specify the type of message.

 The TFTP session is initiated when a TFTP client sends a request to upload or download a file.

 The request is sent from an ephemeral UDP port to the UDP port 69 of an TFTP server. Telnet Telnet is a protocol used to log in to remote computer on the internet. There are a number of Telnet clients having user friendly user interface. The following diagram shows a person is logged in to computer A, and from there, he remote logged into computer B.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 199

200 WEB DESIGNING

Hyper Text Transfer Protocol (HTTP) HTTP is a communication protocol. It defines mechanism for communication between 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. HTTP REQUEST HTTP request comprises of lines which contains:

 Request line

 Header Fields

 Message body Key Points

 The first line i.e. the Request line specifies the request method i.e. Get or Post.

 The second line specifies the header which indicates the domain name of the server from where index.htm is retrieved. HTTP RESPONSE Like HTTP request, HTTP response also has certain structure. HTTP response contains:

 Status line

 Headers

 Message body Email Email is a service which allows us to send the message in electronic mode over the internet. It offers an efficient,

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 200

201 WEB DESIGNING inexpensive and real time mean of distributing information among people. E-mail Protocols SMPTP SMTP stands for Simple Mail Transfer Protocol. It was first proposed in 1982. It is a standard protocol used for sending e- mail efficiently and reliably over the internet. Key Points:

 SMTP is application level protocol.

 SMTP is connection oriented protocol.

 SMTP is text based protocol.

 It handles exchange of messages between e-mail servers over TCP/IP network.

 Apart from transferring e-mail, SMPT also provides notification regarding incoming mail.

 When you send e-mail, your e-mail client sends it to your e-mail server which further contacts the recipient mail server using SMTP client.

 These SMTP commands specify the sender’s and receiver’s e-mail address, along with the message to be send.

 The exchange of commands between servers is carried out without intervention of any user.

 In case, message cannot be delivered, an error report is sent to the sender which makes SMTP a reliable protocol.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 201

202 WEB DESIGNING

IMAP IMAP stands for Internet Mail Access Protocol. It was first proposed in 1986. There exist five versions of IMAP as follows:

 Original IMAP

 IMAP2

 IMAP3

 IMAP2bis

 IMAP4 Key Points:

 IMAP allows the client program to manipulate the e-mail message on the server without downloading them on the local computer.

 The e-mail is hold and maintained by the remote server.

 It enables us to take any action such as downloading, delete the mail without reading the mail.It enables us to create, manipulate and delete remote message folders called mail boxes.

 IMAP enables the users to search the e-mails.

 It allows concurrent access to multiple mailboxes on multiple mail servers. POP POP stands for Post Office Protocol. It is generally used to support a single client. There are several versions of POP but the POP 3 is the current standard. Key Points

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 202

203 WEB DESIGNING

 POP is an application layer internet standard protocol.

 Since POP supports offline access to the messages, thus requires less internet usage time.

 POP does not allow search facility.

 In order to access the messaged, it is necessary to download them.

 It allows only one mailbox to be created on server.

 It is not suitable for accessing non mail data.

 POP commands are generally abbreviated into codes of three or four letters. Eg. STAT. E-mail Working Email working follows the client server approach. In this client is the mailer i.e. the mail application or mail program and server is a device that manages emails. Following example will take you through the basic steps involved in sending and receiving emails and will give you a better understanding of working of email system:

 Suppose person A wants to send an email message to person B.

 Person A composes the messages using a mailer program i.e. mail client and then select Send option.

 The message is routed to Simple Mail Transfer Protocol to person B’s mail server.

 The mail server stores the email message on disk in an area designated for person B. The disk space area on mail server is called mail spool.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 203

204 WEB DESIGNING

 Now, suppose person B is running a POP client and knows how to communicate with B’s mail server.

 It will periodically poll the POP server to check if any new email has arrived for B.As in this case, person B has sent an email for person B, so email is forwarded over the network to B’s PC. This is message is now stored on person B’s PC. The following diagram gives pictorial representation of the steps discussed above:

E-mail Operations CREATING EMAIL ACCOUNT There are various email service provider available such as Gmail, hotmail, ymail, rediff mail etc. Here we will learn how to create an account using Gmail.

 Open gmail.com and click create an account.

 Now a form will appear. Fill your details here and click Next Step.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 204

205 WEB DESIGNING

 This step allows you to add your picture. If you don’t want to upload now, you can do it later. Click Next Step.

 Now a welcome window appears. Click Continue to Gmail.

 Wow!! You are done with creating your email account with Gmail. It’s that easy. Isn’t it?

 Now you will see your Gmail account as shown in the following image:

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 205

206 WEB DESIGNING

Key Points:

 Gmail manages the mail into three categories namely Primary, Social and Promotions.

 Compose option is given at the right to compose an email message.

 Inbox, Starred, Sent mail, Drafts options are available on the left pane which allows you to keep track of your emails. COMPOSING AND SENDING EMAIL Before sending an email, we need to compose a message. When we are composing an email message, we specify the following things:

 Sender’s address in To field

 Cc (if required)

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 206

207 WEB DESIGNING

 Bcc (if required)

 Subject of email message

 Text

 Signature You should specify the correct email address; otherwise it will send an error back to the sender. Once you have specified all the above parameters, It’s time to send the email. The mailer program provides a Send button to send email, when you click Send, it is sent to the mail server and a message mail sent successfully is shown at the above. READING EMAIL Every email program offers you an interface to access email messages. Like in Gmail, emails are stored under different tabs such as primary, social, and promotion. When you click one of tab, it displays a list of emails under that tab. In order to read an email, you just have to click on that email. Once you click a particular email, it gets opened. The opened email may have some file attached with it. The attachments are shown at the bottom of the opened email with an option called download attachment. REPLYING EMAIL After reading an email, you may have to reply that email. To reply an email, click Reply option shown at the bottom of the opened email. Once you click on Reply, it will automatically copy the sender’s address in to the To field. Below the To field, there is a text box where you can type the message.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 207

208 WEB DESIGNING

Once you are done with entering message, click Send button. It’s that easy. Your email is sent. FORWARDING EMAIL It is also possible to send a copy of the message that you have received along with your own comments if you want. This can be done using forward button available in mail client software. The difference between replying and forwarding an email is that when you reply a message to a person who has send the mail but while forwarding you can send it to anyone. When you receive a forwarded message, the message is marked with a > character in front of each line and Subject: field is prefixed with Fw. DELETING EMAIL If you don’t want to keep email into your inbox, you can delete it by simply selecting the message from the message list and clicking delete or pressing the appropriate command. Some mail clients offers the deleted mails to be stored in a folder called deleted items or trash from where you can recover a deleted email. E-mail Security E-MAIL HACKING Email hacking can be done in any of the following ways:

 Spam

 Virus

 Phishing

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 208

209 WEB DESIGNING

SPAM E-mail spamming is an act of sending Unsolicited Bulk E- mails (UBI) which one has not asked for. Email spams are the junk mails sent by commercial companies as an advertisement of their products and services. VIRUS Some emails may incorporate with files containing malicious script which when run on your computer may lead to destroy your important data. PHISHING Email phishing is an activity of sending emails to a user claiming to be a legitimate enterprise. Its main purpose is to steal sensitive information such as usernames, passwords, and credit card details. Such emails contains link to websites that are infected with malware and direct the user to enter details at a fake website whose look and feels are same to legitimate one. E-MAIL SPAMMING AND JUNK MAILS Email spamming is an act of sending Unsolicited Bulk E-mails (UBI) which one has not asked for. Email spams are the junk mails sent by commercial companies as an advertisement of their products and services. Spams may cause the following problems:

 It floods your e-mail account with unwanted e-mails, which may result in loss of important e-mails if inbox is full.

 Time and energy is wasted in reviewing and deleting junk emails or spams.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 209

210 WEB DESIGNING

 It consumes the bandwidth that slows the speed with which mails are delivered.

 Some unsolicited email may contain virus that can cause harm to your computer. BLOCKING SPAMS Following ways will help you to reduce spams:

 While posting letters to newsgroups or mailing list, use a separate e-mail address than the one you used for your personal e-mails.

 Don’t give your email address on the websites as it can easily be spammed.

 Avoid replying to emails which you have received from unknown persons.

 Never buy anything in response to a spam that advertises a product. E-MAIL CLEANUP AND ARCHIVING In order to have light weighted Inbox, it’s good to archive your inbox from time to time. Here I will discuss the steps to clean up and archive your Outlook inbox.

 Select File tab on the mail pane.

 Select Cleanup Tools button on account information screen.

 Select Archive from cleanup tools drop down menu.

 Select Archive this folder and all subfolders option and then click on the folder that you want to archive. Select the date from the Archive items older than:list.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 210

211 WEB DESIGNING

Click Browse to create new .pst file name and location. Click OK. E-mail Providers There are several email service providers available in the market with their enabled features such as sending, receiving, drafting, storing an email and much more. The following table shows the popular email service providers: S.N. Service and Description

1. Gmail Gmail is an email service that allows users to collect all the messages. It also offers approx 7 GB of free storage.

2. Hotmail Hotmail offers free email and practically unlimited storage accessible on web.

3. Yahoo Mail Yahoo Mail offers unlimited storage, SMS texting, social networking and instant messaging to boot.

4. iCloud Mail iCloud Mail offers ample storage, IMAP access, and an elegantly functional web application.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 211

212 WEB DESIGNING

5. ATM Mail ATM Mail is a free email service with good spam protection.

6. Mail.com and GMX Mail Mail.com and GMX Mail offers reliable mail service with unlimited online storage.

7. Shortmail Shortmail offers easy and fast email service but with limited 500 characters per message.

8. Inbox.com Inbox.com offers 5 GB of free online storage. IMAP is not supported by Inbox.com

9. Facebook Messages Facebook Messages includes the message conversation.

10. My Way Mail My Way Mail offers clean and fast free email service but lacks in secure messaging.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 212

213 WEB DESIGNING

Website Designing Web designing has direct link to visual aspect of a web site. Effective web design is necessary to communicate ideas effectively.

Web desinging is subset of web development. However these terms are used interchangeably. Key Points Design Plan should include the following:

 Details about information architecture.

 Planned structure of site.

 A site map of pages

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 213

214 WEB DESIGNING

Wireframe Wireframe refers to a visual guide to appearance of web pages. It helps to define structre of web site, linking between web pages and layout of visual elements. Following things are included in a wireframe:

 Boxes of primary graphical elements

 Placement of headlines and sub headings

 Simple layout structure

 Calls to action

 Text blocks Wireframe can be created using program like Visio but you can also use a pen and paper. Web Designing Tools Here is the list of tools that can be used to make effective web designs:

 Photoshop CC

 Illustrator CC

 Coda 2

 OmniGraffle

 Sublime Text

 GitHub

 Pen and Parer

 Vim

 Imageoptim

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 214

215 WEB DESIGNING

 Sketch 3

 Heroku

 Axure

 Hype 2

 Slicy

 Framer.js

 Image Alpha

 Emmet LiveStyle

 Hammer

 Icon Slate

 JPEGmini Lite

 BugHerd Web Page Anatomy A web site includes the following components: Containing Block Container can be in the form of page’s body tag, an all containing div tag. Without container there would be no place to put the contents of a web page. Logo Logo refers to the identity of a website and is used across a company’s various forms of marketing such as business cards, letterhead, brouchers and so on. Naviagation The site’s navigation system should be easy to find and use. Oftenly the anvigation is placed rigth at the top of the page.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 215

216 WEB DESIGNING

Content The content on a web site should be relevant to the purpose of the web site. Footer Footer is located at the bottom of the page. It usually contains copyright, contract and legal information as well as few links to the main sections of the site. Whitespace It is also called as negative space and refers to any area of page that is not covered by type or illustrations.

Web design Mistakes One should be aware of the following common mistakes should always keep in mind: INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 216

217 WEB DESIGNING

 Website not working in any other browser other internet explorer.

 Using cutting edge technology for no good reason

 Sound or video that starts automatically

 Hidden or disguised navigation

 100% flash content. Web development Web development refers to building website and deploying on the web. Web development requires use of scripting languages both at the server end as well as at client end.

Before developing a web site once should keep several aspects in mind like:

 What to put on the web site?

 Who will host it?

 How to make it interactive?

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 217

218 WEB DESIGNING

 How to code it?

 How to create search engine friendly web site?

 How to secure the source code frequently?

 Will the web site design display well in different browsers?

 Will the navigation menus be easy to use?

 Will the web site loads quickly?

 How easily will the site pages print?

 How easily will visitors find important details specific to the web site?

 How effectively the style sheets be used on your web sites? Web Development Process Web development process includes all the steps that are good to take to build an attractive, effective and responsive website. These steps are shown in the following diagram:

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 218

219 WEB DESIGNING

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 219

220 WEB DESIGNING

Web development tools Web development tools helps the developer to test and debug the web sites. Now a days the web development tooll come with the web browsers as add-ons. All web browsers have built in tools for this purpose. Thsese tools allow the web developer to use HTML, CSS and JavaScript etc.. These are accessed by hovering over an item on a web page and selecting the “Inspect Element” from the context menu. FEATUES Following are the common featuers that every web development tool exhibits: HTML AND THE DOM HTML and DOM viewer allows you to see the DOM as it was rendered. It also allows to make changes to HTML and DOM and see the changes reflected in the page after the change is made. WEB PAGE ASSESTS, RESOURCES, AND NETWORK INFORMATION Web development tools also helps to inspect the resources that are loaded and available on the web page. PROFIING AND AUDITING Profiling refers to get information about the performance of a web page or web application and Auditing provides developers suggestions, after analyzing a page, for optimizations to decerease page load time and increase responsiveness.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 220

221 WEB DESIGNING

Skills Required For being a successful web developer, one should possess the following skills:

 Understanding of client and server side scripting.

 Creating, editing and modifying templates for a CMS or web development framework.

 Testing cross browser inconsistencies.

 Conducting observational user testing.

 Testing for compliance to specified standards such as accessibility standards in the client region.

 Programming interaction with javaScript, PHP, and Jquery etc.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 221

222 WEB DESIGNING

Websites Hosting Web hosting is a service of providing online space for storage of web pages. These web pages are made available via World Wide Web. The companies which offer website hosting are known as Web hosts. The servers on which web site is hosted remain switched on 24 x7. These servers are run by web hosting companies. Each server has its own IP address. Since IP addresses are difficult to remember therefore, webmaster points their domain name to the IP address of the server their website is stored on. It is not possible to host your website on your local computer, to do so you would have to leave your computer on 24 hours a day. This is not practical and cheaper as well. This is where web hosting companies comes in. Types of Hosting The following table describes different types of hosting that can be availed as per the need: S.N. Hosting Description

1. Shared Hosting In shared hosting, the hosting company puts thousand of website on the same physical server. Each customer has their own allocation of physical web space and a set of bandwidth limit. As all websites share same physical memory, MYSQL server and Apache server, one website on the server experiencing high traffic load will affect performance of all websites on the server.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 222

223 WEB DESIGNING

2. Virtual Private Server (VPS) It is also known as Virtual Dedicated Server. It is a server which is partitioned into smaller servers. In this customer is given their own partition, which is installed with its own operating system. Unlike shared hosting, VPS doesn’t share memory or processor time rather it allocates certain amount of memory and CPU to use which means that any problem on a VPS partition on the same drive will not affect other VPS customers.

3. Dedicated Server In this kind of hosting, single dedicated server is setup for just one customer. It is commonly used by the businesses that need the power, control and security that a dedicated server offers.

4. Reseller Hosting A reseller acts as a middle man and sells hosting space of someone else’s server.

5. Grid Hosting Instead of utilizing one server, Grid Hosting spreads resources over a large number of servers. It is quite stable and flexible. The servers can be added or taken away from the grid without crashing the system.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 223

224 WEB DESIGNING

Web Hosting Companies Following are the several companies offering web hosting service: S.N. Hosting Company

1. Blue Host

2. Go Daddy

3. Host Gator

4. just Host

5. Laughing Squid

6. Hivelocity

7. liquid Web

8. Media TempleServInt

9. Wired Tree

10. Wild West Domains

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 224

225 WEB DESIGNING

11. Wix

12. WIPL

13. Big Rock

Website Security Considerations Websites are always to prone to security risks. Cyber crime impacts your business by hacking your website. Your website is then used for hacking assaults that install malicious software or malware on your visitor’s computer. Hackers may also steal important customer data such as credit card information, destroy your business and propagate illegal content to your users. Security Considerations UPDATED SOFTWARE It is mandatory to keep you software updated. It plays vital role in keeping your website secure. SQL INJECTION It is an attempt by the hackers to manipulate your database. It is easy to insert rogue code into your query that can be used to manipulate your database such as change tables, get information or delete data. CROSS SITE SCRIPTING (XSS) It allows the attackers to inject client side script into web pages. Therefore, while creating a form It is good to endure that you

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 225

226 WEB DESIGNING check the data being submitted and encode or strip out any HTML. ERROR MESSAGES You need to be careful about how much information to be given in the error messages. For example, if the user fails to log in the error message should not let the user know which field is incorrect: username or password. VALIDATION OF DATA The validation should be performed on both server side and client side. PASSWORDS It is good to enforce password requirements such as of minimum of eight characters, including upper case, lower case and special character. It will help to protect user’s information in long run. UPLOAD FILES The file uploaded by the user may contain a script that when executed on the server opens up your website. SSL It is good practice to use SSL protocol while passing personal information between website and web server or database.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 226

227 WEB DESIGNING

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 227

228 WEB DESIGNING

World Wide Web A technical definition of the World Wide Web is : all the resources and users on the Internet that are using the Hypertext Transfer Protocol (HTTP). A broader definition comes from the organization that Web inventor Tim Berners-Lee helped found, the World Wide Web Consortium (W3C). The World Wide Web is the universe of network-accessible information, an embodiment of human knowledge. In simple terms, The World Wide Web is a way of exchanging information between computers on the Internet, tying them together into a vast collection of interactive multimedia resources. Internet and Web is not the same thing: Web uses internet to pass over the information.

WWW Evolution World Wide Web was created by Timothy Berners Lee in 1989 at CERN in Geneva. World Wide Web came into INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 228

229 WEB DESIGNING existence as a proposal by him, to allow researchers to work together effectively and efficiently at CERN. Eventually it became World Wide Web. The following diagram briefly defines evolution of World Wide Web:

WWW Architecture WWW architecture is divided into several layers as shown in the following diagram:

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 229

230 WEB DESIGNING

IDENTIFIERS AND CHARACTER SET Uniform Resource Identifier (URI) is used to uniquely identify resources on the web and UNICODE makes it possible to built web pages that can be read and write in human languages. SYNTAX XML (Extensible Markup Language) helps to define common syntax in semantic web.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 230

231 WEB DESIGNING

DATA INTERCHANGE Resource Description Framework (RDF) framework helps in defining core representation of data for web. RDF represents data about resource in graph form. TAXONOMIES RDF Schema (RDFS) allows more standardized description of taxonomies and other ontologicalconstructs. ONTOLOGIES Web Ontology Language (OWL) offers more constructs over RDFS. It comes in following three versions:

 OWL Lite for taxonomies and simple constraints.

 OWL DL for full description logic support.

 OWL for more syntactic freedom of RDF RULES RIF and SWRL offers rules beyond the constructs that are available from RDFs and OWL. Simple Protocol and RDF Query Language (SPARQL) is SQL like language used for querying RDF data and OWL Ontologies. PROOF All semantic and rules that are executed at layers below Proof and their result will be used to prove deductions. CRYPTOGRAPHY Cryptography means such as digital signature for verification of the origin of sources is used. USER INTERFACE AND APPLICATIONS On the top of layer User interface and Applicationslayer is built for user interaction.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 231

232 WEB DESIGNING

WWW Operation WWW works on client- server approach. Following steps explains how the web works: 1. User enters the URL (say, http://www.tutorialspoint.com) of the web page in the address bar of web browser. 2. Then browser requests the Domain Name Server for the IP address corresponding to www.tutorialspoint.com. 3. After receiving IP address, browser sends the request for web page to the web server using HTTP protocol which specifies the way the browser and web server communicates. 4. Then web server receives request using HTTP protocol and checks its search for the requested web page. If found it returns it back to the web browser and close the HTTP connection. 5. Now the web browser receives the web page, It interprets it and display the contents of web page in web browser’s window.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 232

233 WEB DESIGNING

WWW Future There had been a rapid development in field of web. It has its impact in almost every area such as education, research, technology, commerce, marketing etc. So the future of web is almost unpredictable. Apart from huge development in field of WWW, there are also some technical issues that W3 consortium has to cope up with. USER INTERFACE Work on higher quality presentation of 3-D information is under deveopment. The W3 Consortium is also looking forward to enhance the web to full fill requirements of global communities which would include all regional languages and writing systems. TECHNOLOGY Work on privacy and security is under way. This would include hiding information, accounting, access control, integrity and risk management. ARCHITECTURE There has been huge growth in field of web which may lead to overload the internet and degrade its performance. Hence more better protocol are required to be developed.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 233

234 WEB DESIGNING

Web Browsers web Browser is an application software that allows us to view and explore information on the web. User can request for any web page by just entering a URL into address bar. Web browser can show text, audio, video, animation and more. It is the responsibility of a web browser to interpret text and commands contained in the web page. Earlier the web browsers were text-based while now a days graphical-based or voice-based web browsers are also available. Following are the most common web browser available today: Browser Vendor

Internet Microsoft Explorer

Google Google Chrome

Mozilla Mozilla Firefox

Netscape Netscape Communications Corp. Navigator

Opera Opera Software

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 234

235 WEB DESIGNING

Safari Apple

Sea Mozilla Foundation Monkey

K-meleon K-meleon

Architecture There are a lot of web browser available in the market. All of them interpret and display information on the screen however their capabilities and structure varies depending upon implementation. But the most basic component that all web browser must exhibit are listed below:

 Controller/Dispatcher

 Interpreter

 Client Programs Controller works as a control unit in CPU. It takes input from the keyboard or mouse, interpret it and make other services to work on the basis of input it receives. Interpreter receives the information from the controller and execute the instruction line by line. Some interpreter are mandatory while some are optional For example, HTML interpreter program is mandatory and java interpreter is optional. Client Program describes the specific protocol that will be used to access a particular service. Following are the client programs tat are commonly used:

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 235

236 WEB DESIGNING

 HTTP

 SMTP

 FTP

 NNTP

 POP

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 236

237 WEB DESIGNING

Web Server Web server is a computer where the web content is stored. Basically web server is used to host the web sites but there exists other web servers also such as gaming, storage, FTP, email etc. Web site is collection of web pages whileweb server is a software that respond to the request for web resources. Web Server Working Web server respond to the client request in either of the following two ways:

 Sending the file to the client associated with the requested URL.

 Generating response by invoking a script and communicating with database

Key Points

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 237

238 WEB DESIGNING

 When client sends request for a web page, the web server search for the requested page if requested page is found then it will send it to client with an HTTP response.

 If the requested web page is not found, web server will the send an HTTP response:Error 404 Not found.

 If client has requested for some other resources then the web server will contact to the application server and data store to construct the HTTP response. Architecture Web Server Architecture follows the following two approaches:

 Concurrent Approach

 Single-Process-Event-Driven Approach. CONCURRENT APPROACH Concurrent approach allows the web server to handle multiple client requests at the same time. It can be achieved by following methods:

 Multi-process

 Multi-threaded

 Hybrid method. MULTI-PROCESSING In this a single process (parent process) initiates several single- threaded child processes and distribute incoming requests to these child processes. Each of the child processes are responsible for handling single request. It is the responsibility of parent process to monitor the load and decide if processes should be killed or forked.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 238

239 WEB DESIGNING

MULTI-THREADED Unlike Multi-process, it creates multiple single-threaded process. HYBRID It is combination of above two approaches. In this approach multiple process are created and each process initiates multiple threads. Each of the threads handles one connection. Using multiple threads in single process results in less load on system resources.

Examples Following table describes the most leading web servers available today: S.N. Web Server Descriptino

1 Apache HTTP Server This is the most popular web server in the world developed by the Apache Software Foundation. Apache web server is an open source software and can be installed on almost all operating systems including Linux, UNIX, Windows, FreeBSD, Mac OS X and more. About 60% of the web server machines run the Apache Web Server.

2. Internet Information Services (IIS) The Internet Information Server (IIS) is a high performance

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 239

240 WEB DESIGNING

Web Server from Microsoft. This web server runs on Windows NT/2000 and 2003 platforms (and may be on upcoming new Windows version also). IIS comes bundled with Windows NT/2000 and 2003; Because IIS is tightly integrated with the operating system so it is relatively easy to administer it.

3. Lighttpd The lighttpd, pronounced lighty is also a free web server that is distributed with the FreeBSD operating system. This open source web server is fast, secure and consumes much less CPU power. Lighttpd can also run on Windows, Mac OS X, Linux and Solaris operating systems.

4. Sun Java System Web Server This web server from Sun Microsystems is suited for medium and large web sites. Though the server is free it is not open source. It however, runs on Windows, Linux and UNIX platforms. The Sun Java System web server supports various languages, scripts and technologies required for Web 2.0 such as JSP, Java Servlets, PHP, Perl, Python, and Ruby on Rails, ASP and Coldfusion etc.

5. Jigsaw Server Jigsaw (W3C's Server) comes from the World Wide Web Consortium. It is open source and free and can run on various platforms like Linux, UNIX, Windows, and Mac OS X Free

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 240

241 WEB DESIGNING

BSD etc. Jigsaw has been written in Java and can run CGI scripts and PHP programs.

Proxy Server Proxy server is an intermediary server between client and the internet. Proxy servers offers the following basic functionalities:

 Firewall and network data filtering.

 Network connection sharing

 Data caching Proxy servers allow to hide, conceal and make your network id anonymous by hiding your IP address. Purpose of Proxy Servers Following are the reasons to use proxy servers:

 Monitoring and Filtering

 Improving performance

 Translation

 Accessing services anonymously

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 241

242 WEB DESIGNING

 Security Type of Proxies Following table briefly describes the type of proxies: FORWARD PROXIES In this the client requests its internal network server to forward to the internet.

OPEN PROXIES Open Proxies helps the clients to conceal their IP address while browsing the web.

REVERSE PROXIES In this the requests are forwarded to one or more proxy servers and the response from the proxy server is retrieved as if it came directly from the original Server.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 242

243 WEB DESIGNING

Architecture The proxy server architecture is divided into several modules as shown in the following diagram:

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 243

244 WEB DESIGNING

PROXY USER INTERFACE This module controls and manages the user interface and provides an easy to use graphical interface, window and a menu to the end user. This menu offers the following functionalities:

 Start proxy

 Stop proxy INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 244

245 WEB DESIGNING

 Exit

 Blocking URL

 Blocking client

 Manage log

 Manage cache

 Modify configuration PROXY SERVER LISTENER It is the port where new request from the client browser is listened. This module also performs blocking of clients from the list given by the user. CONNECTION MANAGER It contains the main functionality of the proxy server. It performs the following functions:

 It contains the main functionality of the proxy server. It performs the following functions:

 Read request from header of the client.

 Parse the URL and determine whether the URL is blocked or not.

 Generate connection to the web server.

 Read the reply from the web server.

 If no copy of page is found in the cache then download the page from web server else will check its last modified date from the reply header and accordingly will read from the cache or server from the web.

 Then it will also check whether caching is allowed or not and accordingly will cache the page.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 245

246 WEB DESIGNING

CACHE MANAGER This module is responsible for storing, deleting, clearing and searching of web pages in the cache. LOG MANAGER This module is responsible for viewing, clearing and updating the logs. CONFIGURATION This module helps to create configuration settings which in turn let other modules to perform desired configurations such as caching. Search Engines Search Engine refers to a huge database of internet resources such as web pages, newsgroups, programs, images etc. It helps to locate information on World Wide Web. User can search for any information by passing query in form of keywords or phrase. It then searches for relevant information in its database and return to the user.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 246

247 WEB DESIGNING

Search Engine Components Generally there are three basic components of a search engine as listed below: 1. Web Crawler 2. Database 3. Search Interfaces WEB CRAWLER It is also known as spider or bots. It is a software component that traverses the web to gather information.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 247

248 WEB DESIGNING

DATABASE All the information on the web is stored in database. It consists of huge web resources. SEARCH INTERFACES This component is an interface between user and the database. It helps the user to search through the database. Search Engine Working Web crawler, database and the search interface are the major component of a search engine that actually makes search engine to work. Search engines make use of Boolean expression AND, OR, NOT to restrict and widen the results of a search. Following are the steps that are performed by the search engine:

 The search engine looks for the keyword in the index for predefined database instead of going directly to the web to search for the keyword.

 It then uses software to search for the information in the database. This software component is known as web crawler.

 Once web crawler finds the pages, the search engine then shows the relevant web pages as a result. These retrieved web pages generally include title of page, size of text portion, first several sentences etc. These search criteria may vary from one search engine to the other. The retrieved information is ranked according to various factors such as frequency of keywords, relevancy of information, links etc.

 User can click on any of the search results to open it.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 248

249 WEB DESIGNING

Architecture The search engine architecture comprises of the three basic layers listed below:

 Content collection and refinement.

 Search core

 User and application interfaces

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 249

250 WEB DESIGNING

Internet Collaboration Online Chatting Online chatting is a text-based communication between two or more people over the network. In this, the text message is delivered in real time and people get immediate response. Talkomatic was the world first online chat system. It was developed by Doug Brown and David R. Woolley in 1973. CHAT ETIQUETTE Chat etiquette defines rules that are supposed to be followed while online chatting:

 Avoid chat slang

 Try to spell all words correctly.

 Don’t write all the words in capital.

 Don’t send other chat users private messages without asking them.

 Abide by the rules created by those running the chat.

 Use emoticons to let other person know your feelings and expressions. WEB BASED CHAT SERVICES Following web sites offers browser based chat services: Website Description

Facebook It was founded by Mark Zuckerbergwith his college roommates at Harvard university. Facebook lets the user to create personal profile, post status & photos,

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 250

251 WEB DESIGNING

and receive notifications. eBuddy It is an instant messaging service. It supports multiprotocol instant messaging clients.

Convore It offers real time web based chat system.

MeBeam It offers video based chat between the clients to create video conferencing rooms for up to 16 people.

Yahoo! It offers PC-PC, PC-phone, Phone-to-PC, file transfer, Messenger webcam hosting, text messaging service etc.

WhatsApp It is an instant messaging service application available on smart phones.

Gmail It offers instant chatting, sending and receiving mails, and video calling services.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 251

252 WEB DESIGNING

Instant Messaging (IM) Instant messaging is a software utility that allows IM users to communicate by sending text messages, files, and images. Some of the IMs also support voice and video calls. Application Description

Nimbuzz It is native iPhone app. It supports voice and video chats, file sharing, and group chats with panache. eBuddy eBuddy IM helps to have all your buddies from multiple IM accounts in one single list.

Imo.in It has capability to link all your IM accounts together. You can log on to all of your IM accounts by just logging into imo.in.

MeBeam It offers video based chat between the clients to create video conferencing rooms for up to 16 people.

Yahoo! It offers PC-PC, PC-phone, Phone-to-PC, file Messenger transfer, webcam hosting, text messaging service etc.

GoogleTalk It is an IM by Google and one of the most widely used.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 252

253 WEB DESIGNING

Lync Lync is an IM developed by Microsoft. It is widely used in corporate sector for internal and external communication as well.

Internet Relay Chat (IRC) Internet Relay Chat is a protocol developed by Oikarinen in August 1988. It defines set of rules for communication between client and server by some communication mechanism such as chat rooms, over the internet. IRC consist of separate networks of IRC servers and machines. These allow IRC clients to connect to IRC. IRC client runs a program client to connect to a server on one of the IRC nets. After connecting to IRC server on IRC network, user can join with one or more channels and converse over there. Video Conferencing Video conferencing or Video teleconferencing is a method of communicating by two-way video and audio transmission with help of telecommunication technologies. MODES OF VIDEO CONFERENCING POINT-TO-POINT This mode of conferencing connects two locations only.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 253

254 WEB DESIGNING

MULTI-POINT This mode of conferencing connects more than two locations through Multi-point Control Unit (MCU).

Video Sharing Video sharing is an IP Multimedia System (IMS)service that allows user to switch voice calls to unidirectional video streaming session. The video streaming session can be initiated by any of the parties. Moreover, the video source can be the camera or the pre-recorded video clip.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 254

255 WEB DESIGNING

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 255

256 WEB DESIGNING

Mailing List In order to send same email to a group of people, an electron list is created which is know as Mailing List. It is the list server which receives and distributes postings and automatically manages subscriptions. Mailing list offers a forum, where users from all over the globe can answer questions and have them answered by others with shared interests. Types of Mailing List Following are the various types of mailing lists: RESPONSE LIST It contains the group of people who have responsed to an offer in some way. These people are the customers who have shown interest in specific product or service. COMPILED LIST The compiled list is prepared by collecting information from various sources such as surveys, telemarketing etc. ANNOUNCEMENTS These lists are created for sending out coupans , new product announcements and other offers to the customers. DISCUSSION LIST This list is created for sharing views on a specific topic suchas computer, environment , healt, education etc. How does mailing list work? Before joining a mailing list, it is mandatory to subscribe to it. Once you are subscribed, your message will be sent to all the persons who have subscribed to the list. Similarly if any

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 256

257 WEB DESIGNING subscriber posts a message, then it will be received by all subscribers of the list.

Finding Mailing List There are a number of websites are available to maintain database of publically accessible mailing list. Some of these are:

 http://tile.net./lists

 http://lists.com

 http://topica.com

 http://isoft.com/lists/list-q.html Mailing lists can also be found using Google website. In Google, move to directory and the follow: Computers > Internet >Mailing List > Directories. Subscribing to Mailing List To subscribe to a list, you need to send an email message to the administrative address mailing list containing one or more commands. For example, if you want to subscribe to Harry Potter list in gurus.com where name of the list server us

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 257

258 WEB DESIGNING

Majordomo, then you have to send email to [email protected] containing the text, Subscribe harry potter in its body. After sending the email, you will receive a confirmation email for your subscription. This email will include list of commands that will help you to perform various operations such as unsubscribing, receiving acknowledgement, and find out what list you are subscribed to. There are many list servers available, each having its own commands for subscribing to the list. Some of them are described in the following table: List Command Example Server

LISTSERV subscribe subscribe commdhtml Rahul listname yourname

Majordomo subscribe subscribe commdhtml listname

ListProc subscribe subscribe commdhtml Rahul listname yourname

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 258

259 WEB DESIGNING

Usenet (USEr NETwork) Like mailing lists Usenet is also a way of sharing information. It was started by Tom Truscott and Jim Ellis in 1979. Initially it was limited to two sites but today there are thousands of Usenet sites involving millions of people. Usenet is a kind of discussion group where people can share views on topic of their interest. The article posted to a newsgroup becomes available to all readers of the newsgroup. Mailing list vs. Newsgroup S.N. Mailing Newsgroup List

1. Messages Messages are not posted to individual are mailboxes but can be viewed by anyone who delivered to has subscribed to that newsgroup. individual mailboxes of subscribed member of group.

2. Working Working with a particular newsgroup requires with mailing proper knowledge of that newsgroup. list is easier than newsgroup.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 259

260 WEB DESIGNING

It is easy to compose and receive emails.

3. In order to It requires a newsgroup reader. send or receive mails, you required an email program.

4. Messages Messages are available to public. are delivered to certain group of people.

5. Mailing list Newsgroup supports threaded discussion. does not support threaded discussion.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 260

261 WEB DESIGNING

6. Messages Article posted on a newsgroup can be cancelled. delivered to listed subscribers can not be cancelled.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 261

262 WEB DESIGNING

Online Education There are several forms of online education available as discussed below: Online Training Online Training is a form of distance learning in which educational information is delivered through internet. There are many online applications. These applications vary from simple downloadable content to structured programs. Online certification It is also possible to do online certification on specialized courses which add value to your qualification. Many companies offer online certification on a number of technologies. There are three types of online certification as listed below:

 Corporate

 Product-specific

 Profession-wide Corporate certifications are made by small organizations for internal purposes. Product-specific certifications target at developing and recognizing adeptness with regard to particular product. Profession wide certification aims at recognizing expertise in particular profession. Online Seminar Online seminar is the one which is conducted over the internet. It is a live seminar and allows the attendees to ask questions via Q&A panel onscreen.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 262

263 WEB DESIGNING

Online seminar just requires a computer with internet connection, headphones, speakers, and authorization to attend it. Webinar Webinar is a web based seminar or workshop in which presentation is delivered over the web using conferencing software. The audio part of webinar is delivered through teleconferencing. Conferencing Online conferencing is also a kind of online seminar in which two or more people are involved. It is also performed over the internet. It allows the business persons to do meeting online.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 263

264 WEB DESIGNING

Social Networking Social Networking refers to grouping of individuals and organizations together via some medium, in order to share thoughts, interests, and activities. There are several web based social network services are available such as facebook, twitter, linkedin, Google+ etc. which offer easy to use and interactive interface to connect with people with in the country an overseas as well. There are also several mobile based social networking services in for of apps such as Whatsapp, hike, Line etc. Available Social networking Services The following table describes some of the famous social networking services provided over web and mobile: S.N. Service Description

1. Facebook Allows to share text, photos, video etc. It also offers interesting online games.

2. Google+ It is pronounced as Google Plus. It is owned and operated by Google.

3. Twitter Twitter allows the user to send and reply messages in form of tweets. These tweets are the small messages, generally

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 264

265 WEB DESIGNING

include 140+ characters.

4. Faceparty Faceparty is a UK based social networking site. It allows the users to create profiles and interact with each other using forums messages.

5. Linkedin Linkedin is a business and professional networking site.

6. Flickr Flickr offers image hosting and video hosting.

7. Ibibo Ibibo is a talent based social networking site. It allows the users to promote one’s self and also discover new talent.

8. Whatsapp It is a mobile based messaging app. It allows to send text, video, and audio messages

9. Line It is same as whatsapp. Allows to make free calls and messages.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 265

266 WEB DESIGNING

10. Hike It is also mobile based messager allows to send messages and exciting emoticons.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 266

267 WEB DESIGNING

Internet Security Internet security refers to securing communication over the internet. It includes specific security protocols such as:

 Internet Security Protocol (IPSec)

 Secure Socket Layer (SSL) Threats Internet security threats impact the network, data security and other internet connected systems. Cyber criminals have evolved several techniques to threat privacy and integrity of bank accounts, businesses, and organizations. Following are some of the internet security threats:

 Mobile worms

 Malware

 PC and Mobile ransomware

 Large scale attacks like Stuxnet that attempts to destroy infrastructure.

 Hacking as a Service

 Spam

 Phishing Email Phishing Email phishing is an activity of sending emails to a user claiming to be a legitimate enterprise. Its main purpose is to steal sensitive information such as usernames, passwords, and credit card details.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 267

268 WEB DESIGNING

Such emails contains link to websites that are infected with malware and direct the user to enter details at a fake website whose look and feels are same to legitimate one. WHAT A PHISHING EMAIL MAY CONTAIN? Following are the symptoms of a phishing email: SPELLING AND BAD GRAMMAR Most often such emails contain grammatically incorrect text. Ignore such emails, since it can be a spam. BEWARE OF LINKS IN EMAIL Don’t click on any links in suspicious emails. THREATS Such emails contain threat like “your account will be closed if you didn’t respond to an email message”. SPOOFING POPULAR WEBSITES OR COMPANIES These emails contain graphics that appear to be connected to legitimate website but they actually are connected to fake websites.

Digital Signature Digital signatures allow us to verify the author, date and time of signatures, authenticate the message contents. It also includes authentication function for additional capabilities.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 268

269 WEB DESIGNING

A digital signature should not only be tied to the signing user, but also to the message. Applications There are several reasons to implement digital signatures to communications: AUTHENTICATION Digital signatures help to authenticate the sources of messages. For example, if a bank’s branch office sends a message to central office, requesting for change in balance of an account. If the central office could not authenticate that message is sent from an authorized source, acting of such request could be a grave mistake. INTEGRITY Once the message is signed, any change in the message would invalidate the signature.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 269

270 WEB DESIGNING

NON-REPUDIATION By this property, any entity that has signed some information cannot at a later time deny having signed it.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 270

271 WEB DESIGNING

Firewall Security Firewall is a barrier between Local Area Network (LAN) and the Internet. It allows keeping private resources confidential and minimizes the security risks. It controls network traffic, in both directions. The following diagram depicts a sample firewall between LAN and the internet. The connection between the two is the point of vulnerability. Both hardware and the software can be used at this point to filter network traffic.

There are two types of Firewall system: One works by using filters at the network layer and the other works by using proxy servers at the user, application, or network layer. Key Points

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 271

272 WEB DESIGNING

 Firewall management must be addressed by both system managers and the network managers.

 The amount of filtering a firewall varies. For the same firewall, the amount of filtering may be different in different directions.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 272

273 WEB DESIGNING

HTML HTML stands for Hyper Text Markup Language. It is a formatting language used to define the appearance and contents of a web page. It allows us to organize text, graphics, audio, and video on a web page. Key Points:

 The word Hypertext refers to the text which acts as a link.

 The word markup refers to the symbols that are used to define structure of the text. The markup symbols tells the browser how to display the text and are often called tags.

 The word Language refers to the syntax that is similar to any other language. HTML was created by Tim Berners-Leeat CERN. HTML Versions The following table shows the various versions of HTML: Version Year

HTML 1.0 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.0 1999

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 273

274 WEB DESIGNING

XHTML 2000

HTML5 2012

HTML Tags Tag is a command that tells the web browser how to display the text, audio, graphics or video on a web page. Key Points:

 Tags are indicated with pair of angle brackets.

 They start with a less than (<) character and end with a greater than (>) character.

 The tag name is specified between the angle brackets.

 Most of the tags usually occur in pair: the start tag and the closing tag.

 The start tag is simply the tag name is enclosed in angle bracket whereas the closing tag is specified including a forward slash (/).

 Some tags are the empty i.e. they don’t have the closing tag.

 Tags are not case sensitive.

 The starting and closing tag name must be the same. For example hello is invalid as both are different.

 If you don’t specify the angle brackets (<>) for a tag, the browser will treat the tag name as a simple text.

 The tag can also have attributes to provide additional information about the tag to the browser.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 274

275 WEB DESIGNING

Basic tags The following table shows the Basic HTML tags that define the basic web page: Tag Description

Specifies the document as a web page.

Specifies the descriptive information about the web documents.

Specifies the body of a web document.

The following code shows how to use basic tags.

Heading goes here… Body goes here…

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 275

276 WEB DESIGNING

Formatting Tags The following table shows the HTML tags used for formatting the text: Tag Description

Specifies the text as bold. Eg. this is bold text

It is a phrase text. It specifies the emphasized text. Eg. Emphasized text

It is a phrase tag. It specifies an important text. Eg. this is strong text

The content of italic tag is displayed in italic. Eg. Italic text

_{Specifies the subscripted text. Eg. X1}

^{Defines the superscripted text. Eg. X2}

Specifies the inserted text. Eg. The price of pen is now 15.

Specifies the deleted text. Eg. The price of pen is

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 276

277 WEB DESIGNING

now 15.

Specifies the marked text. Eg. It is raining

Table Tags Following table describe the commonaly used table tags: Tag Description

Specifies a table.

Specifies a row in the table.

Specifies header cell in the table.

Specifies the data in an cell of the table.

Specifies the table caption.

Specifies a group of columns in a table for formatting.

List tags Following table describe the commonaly used list tags:

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 277

278 WEB DESIGNING

Tag Description

Specifies an unordered list.

Specifies an ordered list.

Specifies a list item.

Specifies a description list.

Specifies the term in a description list.

Specifies description of term in a description list.

Frames Frames help us to divide the browser’s window into multiple rectangular regions. Each region contains separate html web page and each of them work independently. A set of frames in the entire browser is known as frameset. It tells the browser how to divide browser window into frames and the web pages that each has to load. INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 278

279 WEB DESIGNING

The following table describes the various tags used for creating frames: Tag Description

It is replacement of the tag. It doesn’t contain the tags that are normally used in element; instead it contains the element used to add each frame.

Specifies the content of different frames in a web page.

It is used to set the default target frame in any page that contains links whose contents are displayed in another frame.

Forms Forms are used to input the values. These values are sent to the server for processing. Forms uses input elements such as text fields, check boxes, radio buttons, lists, submit buttons etc. to enter the data into it. The following table describes the commonly used tags while creating a form: Tag Description

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 279

280 WEB DESIGNING

It is used to create HTML form.

Specifies the input field.

Specifies a text area control that allows to enter multi- line text.

Specifies the label for an input element.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 280

281 WEB DESIGNING

CSS CSS is acronym of Cascading Style Sheets. It helps to define the presentation of HTML elements as a separate file known as CSS file having .cssextension. CSS helps to change formatting of any HTML element by just making changes at one place. All changes made would be reflected automatically to all of the web pages of the website in which that element appeared. Embedding CSS into HTML Following are the four methods to add CSS to HTML documents.

 Inline Style Sheets

 Embedded Style Sheets

 External Style Sheets

 Imported Style Sheets INLINE STYLE SHEETS Inline Style Sheets are included with HTML element i.e. they are placed inline with the element. To add inline CSS, we have to declare style attribute which can contain any CSS property. Syntax:

…. Let’s consider the following example using Inline Style Sheets:

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 281

282 WEB DESIGNING

Inline Style Sheets are included with HTML element i.e. they are placed inline with the element. To add inline CSS, we have to declare style attribute which can contain any CSS property.

EMBEDDED STYLE SHEETS Embedded Style Sheets are used to apply same appearance to all occurrence of a specific element. These are defined in element by using the EXTERNAL STYLE SHEETS External Style Sheets are the separate .css files that contain the CSS rules. These files can be linked to any HTML documents using tag with rel attribute. Syntax:

url of css file”> In order to create external css and link it to HTML document, follow the following steps:

 First of all create a CSS file and define all CSS rules for several HTML elements. Let’s name this file as external.css. p { Color: orange; text-align: left; font-size: 10pt; } h1 { Color: orange; font-weight: bold; }

 Now create HTML document and name it as externaldemo.html.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 283

284 WEB DESIGNING

External Style Sheets

External Style Sheets are the separate .css files that contain the CSS rules.

IMPORTED STYLE SHEETS Imported Style Sheets allow us to import style rules from other style sheets. To import CSS rules we have to use @import before all the rules in a style sheet. Syntax:

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 284

285 WEB DESIGNING

Let’s consider the following example using Inline Style Sheets:

External Style Sheets

External Style Sheets are the separate .css files that contain the CSS rules.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 285

286 WEB DESIGNING

JavaScript JavaScript is a lightweight, interpreted programming language with object-oriented capabilities that allows you to build interactivity into otherwise static HTML pages. JavaScript code is not compiled but translated by the translator. This translator is embedded into the browser and is responsible for translating javascript code. JavaScript is:

 Lightweight, interpreted programming language.

 Designed for creating network-centric applications.

 Complementary to and integrated with Java.

 Complementary to and integrated with HTML

 Open and cross-platform JavaScript Statements JavaScript statements are the commands to tell the browser to what action to perform. Statements are separated by semicolon (;). JavaScript statement constitutes the JavaScript code which is translated by the browser line by line. Example of JavaScript statement: document.getElementById("demo").innerHTML = "Welcome"; Following table shows the various JavaScript Statements: S.N. Statement Description

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 286

287 WEB DESIGNING

1. switch A block of statements in which execution of code case depends upon different cases. The interpreter checks each case against the value of the expression until a match is found. If nothing matches, a default condition will be used.

2. If else The if statement is the fundamental control statement that allows JavaScript to make decisions and execute statements conditionally.

3. While The purpose of a while loop is to execute a statement or code block repeatedly as long as expression is true. Once expression becomes false, the loop will be exited.

4. do while Block of statements that are executed at least once and continues to be executed while condition is true.

5. for Same as while but initialization, condition and increment/decrement is done in the same line.

6. for in This loop is used to loop through an object's properties.

7. continue The continue statement tells the interpreter to

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 287

288 WEB DESIGNING

immediately start the next iteration of the loop and skip remaining code block.

8. break The break statement is used to exit a loop early, breaking out of the enclosing curly braces.

9. function A function is a group of reusable code which can be called anywhere in your programme. The keyword function is used to declare a function.

10. return Return statement is used to return a value from a function.

11. var Used to declare a variable.

12. try A block of statements on which error handling is implemented.

13. catch A block of statements that are executed when an error occur.

14. throw Used to throw an error.

JavaScript Comments JavaScript supports both C-style and C++-style comments, thus:

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 288

289 WEB DESIGNING

 Any text between a // and the end of a line is treated as a comment and is ignored by JavaScript.

 Any text between the characters /* and */ is treated as a comment. This may span multiple lines.

 JavaScript also recognizes the HTML comment opening sequence

 The HTML comment closing sequence --> is not recognized by JavaScript so it should be written as //-->. Example:

Variables can be initialized at time of declaration or after declaration as follows:

Javascript Data Type There are two kinds of data types as mentioned below:

 Primitive Data Type

 Non Primitive Data Type Primitive Data Types are shown in the following table: S.N. Datatype Description

1. String Can contain groups of character as single value. It is represented in double quotes.E.g. var x= “tutorial”.

2. Numbers Contains the numbers with or without decimal. E.g. var x=44, y=44.56;

3. Booleans Contain only two values either true or false. E.g. var x=true,

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 291

292 WEB DESIGNING

y= false.

4. Undefined Variable with no value is called Undefined. E.g. var x;

5. Null If we assign null to a variable, it becomes empty. E.g. var x=null;

Following table contains Non primitive Data Types:

S.N. Datatype Description

Array 1. Can contain groups of values of same type. E.g. var x={1,2,3,55};

Objects 2. Objects are stored in property and value pair. E.g. var rectangle = { length: 5, breadth: 3}; JavaScript Functions Function is a group of reusable statements (Code) that can be called any where in a program. In javascript function keyword is used to declare or define a function. Key Points:

 To define a function use function keyword followed by functionname, followed by parentheses ().

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 292

293 WEB DESIGNING

 In parenthesis, we define parameters or attributes.

 The group of reusabe statements (code) is enclosed in curly braces {}. This code is executed whenever function is called. Syntax: function functionname (p1, p2) { function coding… } JavaScript Operators Operators are used to perform operation on one, two or more operands. Operator is represented by a symbol such as +, =, *, % etc. Following are the operators supported by javascript:

 Arithmetic Operators

 Comparison Operators

 Logical (or Relational) Operators

 Assignment Operators

 Conditional (or ternary) Operators

 Arithmetic Operators Control Structure Control structure actually controls the flow of execution of a program. Following are the several control structure supported by javascript. 1. if … else 2. switch case

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 293

294 WEB DESIGNING

3. do while loop 4. while loop 5. for loop

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 294

295 WEB DESIGNING

PHP PHP is acronym of Hypertext Preprocessor (PHP)is a programming language that allows web developers to create dynamic content that interacts with databases.PHP is basically used for developing web based software applications. PHP started out as a small open source project that evolved as more and more people found out how useful it was. Rasmus Lerdorf unleashed the first version of PHP way back in 1994. Key Points

 PHP is a recursive acronym for "PHP: Hypertext Preprocessor".

 PHP is a server side scripting language that is embedded in HTML. It is used to manage dynamic content, databases, session tracking, even build entire e-commerce sites.

 It is integrated with a number of popular databases, including MySQL, PostgreSQL, Oracle, Sybase, Informix, and Microsoft SQL Server.

 PHP is pleasingly zippy in its execution, especially when compiled as an Apache module on the Unix side. The MySQL server, once started, executes even very complex queries with huge result sets in record-setting time.

 PHP supports a large number of major protocols such as POP3, IMAP, and LDAP. PHP4 added support for Java and distributed object architectures (COM and CORBA), making n-tier development a possibility for the first time. Uses of PHP  PHP performs system functions, i.e. from files on a system it can create, open, read, write, and close them.

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 295

296 WEB DESIGNING

 PHP can handle forms, i.e. gather data from files, save data to a file, through email you can send data, return data to the user.

 You add, delete, modify elements within your database through PHP.

 Access cookies variables and set cookies.

 Using PHP, you can restrict users to access some pages of your website.

 It can encrypt data. Characteristics Five important characteristics make PHP's practical nature possible:

 Simplicity

 Efficiency

 Security

 Flexibility

 Familiarity "Hello World" Script in PHP: To get a feel for PHP, first start with simple PHP scripts. Since "Hello, World!" is an essential example, first we will create a friendly little "Hello, World!" script. As mentioned earlier, PHP is embedded in HTML. That means that in amongst your normal HTML (or XHTML if you're cutting-edge) you'll have PHP statements like this:

INNOVATIVE SKILLS AND KNOWLEDGE DEVELOPMENT 296

297 WEB DESIGNING

It will produce following result: Hello, World! If you examine the HTML output of the above example, you'll notice that the PHP code is not present in the file sent from the server to your Web browser. All of the PHP present in the Web page is processed and stripped from the page; the only thing returned to the client from the Web server is pure HTML output. All PHP code must be included inside one of the three special markup tags ate are recognised by the PHP Parser.