All aboutweb


Published on

Web Programming & Designing

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

All aboutweb

  1. 1. S.K.Ahsan 1
  2. 2.  The Web, is a system of interlinked hypertext documents contained on the Internet. With a web browser, one can view web pages that may contain  text, images, videos, and other multimedia and navigate between them using hyperlinks.S.K.Ahsan 2
  3. 3. Introduction History HTML(Hyper Text Mark Up Language) Medium Web Application Content Management System(CMS) Search Engines Web Design Development Tools ConclusionS.K.Ahsan 3
  4. 4.  The Web, is a system of interlinked hypertext documents contained on the Internet.  With a web browser, one can view web pages that may contain text, images, videos, and other multimedia and navigate between them using hyperlinks.S.K.Ahsan 4
  5. 5. S.K.Ahsan 5
  6. 6. Web 1.0 Web 2.0 Web Web 5.0 Web 4.0 3.0S.K.Ahsan 6
  7. 7. Web 3.0 Web 2.0 The web 3.0 will be known as Semantic Web 1.0 Dynamic user- It will be fully generated content implemented in Static pages instead pages. 2015. of dynamic user- Multimedia of all Massively online generated content. types can be gaming and fully Online guestbook’s. presented over the functional virtual HTML forms sent inter net world via email. Cross platform GIF buttons, issues are reduced typically 88x31 Introduction to E- Business. pixelsS.K.Ahsan 7
  8. 8. What is web application? Why we need web application? A web application is an application We need web application to that is accessed via a web browser create communication between over a network such as the Internet or an intranet. users and organizations to share resources via internet.S.K.Ahsan 8
  9. 9. S.K.Ahsan 9
  10. 10. Inventor of world wide web(www) Tim Berners-Lee On 25 December 1990 with the help of Robert Cailliau and a young student at CERN, he implemented the first successful communication between an HTTP client and server via the Internet.S.K.Ahsan 10
  11. 11. 1 2 3 The Standard SGML descended from •The SGML Declaration Generalized Markup IBMs Generalized •The instance itself, Language (ISO Markup Language (GML) containing the top-most 8879:1986 SGML) is an that Charles Goldfarb, element and its contents. ISO-standard technology Edward Mosher, and •The Prolog, containing a for defining generalized Raymond Lorie DOCTYPE declaration markup languages for developed in the 1960s. which is known as documents. Document Type Definition (DTD).S.K.Ahsan 11
  12. 12. Server Network Client Web Server The network includes describes the Client is hardware and various concerned with software as connectivity the web browser well as elements and its supported programming utilized to technologies, such elements and deliver the as HTML, CSS built in Web sites to and Java Script. technologies. the user.S.K.Ahsan 12
  13. 13.  A webpage is a single HTML document.  A website is a collection of related web pages.  Designing a good website requires more than just putting together a few pagesS.K.Ahsan 13
  14. 14. S.K.Ahsan 14
  15. 15.  HTML is a language for describing web pages.  HTML stands for Hyper Text Markup Language  HTML is not a programming language, it is a markup language  A markup language is a set of markup tags  HTML uses markup tags to describe web pagesS.K.Ahsan 15
  17. 17. HTML Document Object Document Type Model(DOM) Definition (DTD) The DOM is a W3C The set of markup specification that gives a declarations that define common way for a document type for programs to access a SGML-family markup document as a set of languages (SGML, objects. XML, HTML)S.K.Ahsan 17
  18. 18.  XML is a markup language much like HTML  XML was designed to carry data, not to display data  XML tags are not predefined. You must define your own tags  XML is designed to be self-descriptive  XML is a W3C Recommendation.S.K.Ahsan 18
  19. 19. S.K.Ahsan 19
  20. 20. S.K.Ahsan 20
  21. 21.  WEB DESIGN is the process of planning and creating a website.  Text, images, digital media and interactive elements are used by web designers to produce the page seen on the web browser. Web designers utilize markup language, most notably HTML for structure and CSS for presentation as well as JavaScript to add interactivity to develop pages that can be read by web browsers.S.K.Ahsan 21
  22. 22. S.K.Ahsan 22
  23. 23.  The History of Web Designing has evolved over a matter of one and a half decades as of now.  After the initial hype over the website media and a confused phase of both developers and clients, web communication today has evolved as one of the most diversified and successful medium of advertisement and knowledge outsourcing.  However, the history of web designing germinated from CERN, a renowned physics institute, where Tim Berners Lee was working. The credit of development of the WWW goes to this man.S.K.Ahsan 23
  24. 24.  It was because of the need to circulate Lees research papers among the concerned people that he decided to work on HTML and browser software.  That was the year 1993 when Mosaic web browser had become the platform for sharing information among the scientists of CERN.  Web page development as we know it today was still unknown and graphical image representation did not happen.S.K.Ahsan 24
  25. 25.  In 1994 the W3C decides upon the rules and standards of web development language of HTML. Thus HTML 2, 3, and 4 was developed.  As a whole, the process of web design can include conceptualization, planning, producing, post-production, research, advertising.  The site itself can be divided up into pages. The site is navigated by using hyperlinks, which are commonly blue and underlined but can be made to look like anything the designer wishes.S.K.Ahsan 25
  26. 26.  Process of developing.  Need of web designing?S.K.Ahsan 26
  27. 27.  HTML  CSS  Php  Java script  Mysql  Jquerry  Java  Ajax  Xml  AspS.K.Ahsan 27
  28. 28. S.K.Ahsan 28
  29. 29.  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added to HTML 4.0 to solve a problem  External Style Sheets can save a lot of work  External Style Sheets are stored in CSS filesS.K.Ahsan 29
  30. 30. Style Sheets XSL(Extensible Style Sheet Language) XML CSS(Cascading Style Applied on Sheets) Unique Tags HTML Describe the Style Advance data Rules of web pages storing Simple Syntax Reusability Advance designS.K.Ahsan 30
  31. 31. CSS 3 CSS 2 Currently under development CSS 1 May 1998 Rounded Corner Superset of CSS1 Text Shadow December 1996 Flexible Layouts Border Image Font properties and it used Layer Using Any Color of text and designing (DIV Custom Font backgrounds based). Multiple Text attributes Introduction to Backgrounds Alignment of text, Selectors and images through Tables classes.S.K.Ahsan 31
  32. 32. S.K.Ahsan 32
  33. 33.  JavaScript was designed to add interactivity to HTML pages  JavaScript is a scripting language  A scripting language is a lightweight programming language  JavaScript is usually embedded directly into HTML pages  JavaScript is an interpreted language (means that scripts execute without preliminary compilation)  Everyone can use JavaScript without purchasing a licenseS.K.Ahsan 33
  34. 34. Java script VBScript JavaScript was created by VBScript was introduced in Netscape in 1995. 1996 by Microsoft. Simple multimedia effects like Expert behavior in forums development for websites. image rollovers or add Cross web browser issues. relatively sophisticated tools. Not preferred by Java Script can be written Web developers. directly in HTML.S.K.Ahsan 34
  35. 35.  jQuery is a library of JavaScript Functions.  jQuery is a lightweight "write less, do more" JavaScript library.  The jQuery library contains the following features:  HTML element selections  HTML element manipulation  CSS manipulation  HTML event functions  JavaScript Effects and animations  HTML DOM traversal and modification  AJAX  UtilitiesS.K.Ahsan 35
  36. 36.  AJAX = Asynchronous JavaScript and XML.  AJAX is a technique for creating fast and dynamic web pages.  AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.  Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.  Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabsS.K.Ahsan 36
  37. 37. S.K.Ahsan 37
  38. 38.  ASP is a powerful tool for making dynamic and interactive Web pages.  ASP stands for Active Server Pages  ASP is a Microsoft Technology  ASP is a program that runs inside IIS  IIS stands for Internet Information Services  IIS comes as a free component with Windows 2000  IIS is also a part of the Windows NT 4.0 Option Pack  The Option Pack can be downloaded from Microsoft  PWS is a smaller - but fully functional - version of IIS  PWS can be found on your Windows 95/98 CDS.K.Ahsan 38
  39. 39.  PHP stands for PHP: Hypertext Preprocessor  PHP is a server-side scripting language, like ASP  PHP scripts are executed on the server  PHP supports many databases (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, etc.)  PHP is an open source software  PHP is free to download and useS.K.Ahsan 39
  40. 40. PHP ASP.NET Hypertext Preprocessor Developed The initial prototype was called by Rasmus Lerdorf. "XSP“ but it became afterwards This was written in C language Active Server Pages (ASP) influenced by PERL 1994. technology. Open Source Language. It is built on the Common It is a CGI(Common Gateway Language Runtime (CLR). Interface ) scripting Language. Abnormal Behavior with HTML+CSS.S.K.Ahsan 40
  41. 41. S.K.Ahsan 41
  42. 42. What is web browser? A Web browser is a software An information resource is identified by a Uniform Resource Identifier (URI) application for retrieving, presenting, and may be a web page, image, video, or and traversing information resources on other piece of content. a Uniform the World Wide Web. Resource Locator (URL) is a subset of the Uniform Resource Identifier (URI).S.K.Ahsan 42
  43. 43. Web Browser First Browser was Mosaic by NCSA(National Center for Supercomputing Applications). oReleased on 22 April 1993. oUnix 2.6 , Windows 3.0 Mac OS. oCross-platform oWritten in CS.K.Ahsan 43
  44. 44. S.K.Ahsan Mr.Khan 44
  45. 45. large number of people to contribute A Content Management System to and share stored (CMS) is a collection of procedures data used to manage work flow in a Improve communication collaborative environment. These Aid in easy storage procedures can be manual or and retrieval of data computer-based.  Reduce repetitive duplicate input Improve the ease of report writingS.K.Ahsan 45
  46. 46. CMS Document Management Enterprise System Mobile Web CMS CMS CMS ECMS WCMS DMS MCMSS.K.Ahsan 46
  47. 47.  Test it in-house.  Test it on a sample audience.S.K.Ahsan 47
  48. 48.  Layout of web pages is very important  Poor layout makes for -  Difficult navigation  Hard to locate information on page  Visually unappealingS.K.Ahsan 48
  49. 49.  Use tables to lay out your pages!  Make the table borders invisible  A 2x2 table works wellS.K.Ahsan Mr.Khan 49
  50. 50. logo Header  Content MenuS.K.Ahsan 50
  51. 51. Graphics attract more user. 51
  52. 52.  Dates need to be correct  Services need to be up-to-date  Hours must be correct  People’s names, email addresses & phone numbers need to be correct  Prices need to be correct  Explore new technologies & encourage innovationS.K.Ahsan 52
  53. 53.  Well-organized  Easy to navigate  Attractive  Useful  Up-to-dateS.K.Ahsan 53
  54. 54. This document is “living” …in the past. 54
  55. 55. An example of a very unattractive site (best viewed online). 55
  56. 56. Avoid backgrounds that wash out your text. 56
  57. 57.  If you are unique, you’re already useful!  If you are not unique, how do you differ from similar Web sites?  Is your content unique?  Is your approach unique?  Is your audience unique?  Are you more up to date?  Are you better organized?  Are you more comprehensive?S.K.Ahsan 57
  58. 58.  Hierarchical organization  Image maps  Tables  FramesS.K.Ahsan 58
  59. 59.  Menus in progressive order of most general to more specific  Pros  always gives impression of organization  Cons  Not really necessary unless you have a collection of something  Makes user travel through a number of levels to get to their informationS.K.Ahsan 59
  60. 60. Imagemaps can provide easy means of navigation. 60
  61. 61.  Standard text, images or links are arranged in tabular format with or without borders  Pros  Allows creator to place items on a page  Looks neat  Cons  Can be tricky, but tables are amazingly useful to the designer.S.K.Ahsan 61
  62. 62.  Use in a site that rarely, if ever, goes out to other links on the World Wide Web.  Use a frame to hold a static banner at the top or bottom.  Use a frame to hold a navigation bar at the top, side or bottom of your Web site.S.K.Ahsan 62
  63. 63. Test text colors against background colors. 63
  64. 64.  Avoid having more than one spinning, whirling, clicking, moving icon or graphic on a page.  Make hyperlinks intuitive so as to avoid the click here text..S.K.Ahsan 64
  65. 65.  For example…  Provide white space for easy readability  Limit font usage and typeface usage  Limit text column width  Balance graphics and text on a page  Use complimentary colors with contrast  Standardize on a heading font and text font  Balance the page layout with top/bottom and right/left marginsS.K.Ahsan 65
  66. 66.  Banner graphics  Signature icons  Links to local home pagesS.K.Ahsan 66
  67. 67. S.K.Ahsan 67
  68. 68. Search Engine How a Search Engine work ? A web search engine is a tool designed Web search engines work by storing to search for information on the World information about many web pages, which Wide Web. The search results are they retrieve from the html itself.. The contents of each page are then analyzed to usually presented in a list of results and are commonly called hits. determine how it should be indexed.S.K.Ahsan 68
  69. 69. 1993 1998 2003 2009S.K.Ahsan 69
  70. 70. Markup Style sheet languages languages Database Web DesignMangement Cycle Client-side scripting Server-side scripting 70
  71. 71. S.K.Ahsan 71
  72. 72. Adobe Dreamweaver CS6 Visual Studio 2008/2010 JoomlaS.K.Ahsan 72
  73. 73. 73
  74. 74. S.K.Ahsan 74