Web Design & Development

1,731 views

Published on

One of my guest speaker sessions at universities

Published in: Technology, Business
1 Comment
1 Like
Statistics
Notes
  • good work...thanx........ for uploading.keep it up
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,731
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
41
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Web Design & Development

  1. 1. Web Design & Development Asif Hussain 1Asif Hussain
  2. 2. Asif Hussain 2Asif Hussain • Project Manager & Lead Business Analyst Sapphire Consulting Services [www.sapphirecs.net] http://pk.linkedin.com/in/asifhossain Skype: aasifhussain • Bahria University [BE, Computer] • CBM (IoBM) [MBA, Marketing ] • PMP & Oracle Siebel CRM Certified • CRM , Online Stock Trading & Islamic Financial Consultant
  3. 3. Asif Hussain 3 Website Design & Development • What is HTML? • What is CSS? • How Do I Set Up a Web Host? • Website design process • What makes a website good? • Response Time
  4. 4. Web development • Web development is a broad term for the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network). • This can include – web design, – web content development, – client liaison, – client-side/server-side scripting, – web server – network security configuration, – e-commerce development. 4Asif Hussain
  5. 5. Web development • However, among web professionals, "web development" usually refers to the main non- design aspects of building web sites: writing markup and coding. • Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications, electronic businesses, or social network services. 5Asif Hussain
  6. 6. Client Side Coding • Ajax Asynchronous JavaScript provides new methods of using JavaScript, and other languages to improve the user experience. • Flash Adobe Flash Player is an browser plugin • JavaScript is a ubiquitous client side platform for creating and delivering rich Web applications that can also run across a wide variety of devices. • JQuery Cross-browser JavaScript library designed to simplify and speed up the client-side scripting of HTML. • Microsoft Silverlight Microsoft's browser plugin that enables animation, vector graphics and high-definition video playback, programmed using XAML and .NET programming languages. • Real Studio Web Edition is a rapid application development environment for the web. The language is object oriented and is similar to both VB and Java. Applications are uniquely compiled to binary code. • HTML5 and CSS3 Latest HTML proposed standard combined with the latest proposed standard for CSS natively supports much of the client-side functionality provided by other frameworks such as Flash and Silverlight 6Asif Hussain
  7. 7. Server Side Coding • ASP (Microsoft proprietary) • ColdFusion (Adobe proprietary, formerly Macromedia, formerly Allaire) • CGI • Java, e.g. Java EE or WebObjects • Perl (open source) • PHP (open source) • Python (open source) • Real Studio Web Edition • Ruby (open source) • Websphere (IBM proprietary) • .NET and .NET MVC Frameworks (Microsoft proprietary) 7Asif Hussain
  8. 8. Database Technology • Apache Derby • DB2 (IBM proprietary) • Firebird • Microsoft SQL Server • MySQL • Oracle • PostgreSQL • SQLite • Sybase 8Asif Hussain
  9. 9. What is HTML? • Hyper Text Markup Language. – This is the basic format for the scripting language that is used to construct the Web. – Here is an example of what the current HTML code would look like if you were adding an image. • <img src="image_name.jpg" width="251" height="143" /> 9Asif Hussain
  10. 10. What is CSS? • CSS stands for Cascading Style Sheets. • It is a style sheet language used to describe the design elements of the websites such as the layout, color, font size, etc. • It can allow multiple pages to share the same formatting. • This is what it would look if you wanted to define the height, width and background color of a specific div tag. .div_tag_name { background-color: #000000; width: 500px; height: 500px;10Asif Hussain
  11. 11. How Do I Set Up a Web Host? • A web hosting service is a type of Internet hosting service that allows individuals and organizations to make their own website accessible via the World Wide Web. 11Asif Hussain
  12. 12. Website Design Process Production Design Refinement Design Exploration Discovery … followed by implementation & maintenance [this set of slides from James Landay] 12Asif Hussain
  13. 13. Web Design Process 13Asif Hussain
  14. 14. Design Process: Discovery Assess needs * understand client’s expectations * determine scope of project * characteristics of users * evaluate existing site and/or competition Production Design Refinement Design Exploration Discovery 14Asif Hussain
  15. 15. Design Process: Design Exploration Production Design Refinement Design Exploration Discovery Generate multiple designs * visualize solutions to discovered issues * information & navigation design * early graphic design * select one design for development 15Asif Hussain
  16. 16. Design Process: Design Refinement Production Design Refinement Design Exploration Discovery Develop the design * increasing level of detail * heavy emphasis on graphic design * iterate on design 16Asif Hussain
  17. 17. Prepare design for handoff * create final deliverable * specifications, guidelines, and prototypes * as much detail as possible Design Process: Production Production Design Refinement Design Exploration Discovery 17Asif Hussain
  18. 18. Artifacts of Design Practice • Designers create representations of sites at multiple levels of detail • Web sites are iteratively refined at all levels of detail Site Maps Storyboards Schematics Mock-ups 18Asif Hussain
  19. 19. Site Maps • High-level, coarse-grained view of entire site 19Asif Hussain
  20. 20. Storyboards • Interaction sequence, minimal page level detail 20Asif Hussain
  21. 21. Schematics • Page structure with respect to information & navigation 21Asif Hussain
  22. 22. Mock-ups • High-fidelity, precise representation of page 22Asif Hussain
  23. 23. What makes a website good? • Graphic design? • Design criteria? • Subjective 23Asif Hussain
  24. 24. Response Times: The 3 Important Limits • 0.1 second is the limit for having user feel system is reacting instantaneously • 1.0 second is the limit for user’s flow of thought to stay uninterrupted (no feedback necessary, but user will lose feeling of operating directly on data) • 10 seconds is limit for keeping user’s attention focused on page (for longer delays, percent- done progress indicator should be used)[Nielsen 1997, Miller 1968, Card et al. 1991] 24Asif Hussain
  25. 25. Domain Registrar • A company that provides domain name registration services for a fee. • Maintain database which maps domain names to IP’s • Propagate new domain name/IP address information across the internet 25Asif Hussain
  26. 26. Creating a Web Site 1. Choose a domain name 2. Register with a Registrar 3. Choose a hosting service 4. Tell Registrar the IP address 5. Create web content 6. Store (publish) onto hosting server (FTP) 7. Submit new site to search engines 26Asif Hussain
  27. 27. 12 Principles of good web design 1. Visitor-centric, clear purpose 2. Progressive disclosure 3. Displays quickly 4. Browser compatible 5. Intuitive navigation 6. Spelling, grammar, writing 7. Secure (eCommerce) 8. Attractive design, easy to read 9. Cultural bias? (Regional? Domestic? International?) 10. No technical problems (broken links, buggy scripts) 11. Maintainable (separate content from style) 12. Search Engine Accessible 27Asif Hussain
  28. 28. Creating your Web Site Technologies & Tools • Markup Languages – HTML, DHTML, XML, XSLT, etc.... • Cascading Style Sheets (CSS) • Scripting languages – perl,javascript,php, etc.... • Web creation and editing software – Notepad, FrontPage, Coldfusion, Flash, Hotmetal, Site Builder, etc.. 28Asif Hussain
  29. 29. Markup Languages - HTML Derived from SGML (Standard Generalized Markup Language ) • HyperText Markup Language 29Asif Hussain
  30. 30. HTML Fundamentals • Clear text, case insensitive • Ignores white space • Comprised of tags <tag /> • Open tags and closed tags 30Asif Hussain
  31. 31. HTML - Fundamentals • Open tags – <name attributes/> – <hr/>, <br/> – <img src=“url” width=‘100px’ height=’60px’/> • Closed tags – <name attributes> stuff </name> – <b>text to be bolded</b> – <h1>level 1 heading text</h1> • Comments < ! - - comment text -- > 31Asif Hussain
  32. 32. HTML – Fundamentals Document Structure Header Body < / HTML> < HTML > 32Asif Hussain
  33. 33. HTML – Fundamentals Basic Structure <html> <head> <title> The title of your html page </title> <meta_tags/> </head> <body> <! - - your web page content and markup - -> </body> </html> 33Asif Hussain
  34. 34. HTML - Fundamentals header <body> Hello world </body> 34Asif Hussain
  35. 35. HTML - Fundamentals header <body> Mike Tyler PO Box 190387 Hungry Horse, Mt 59919 </body> 35Asif Hussain
  36. 36. HTML - Fundamentals header <body> <b>Mike Tyler</b><br> PO Box 190387<br> Hungry Horse, Mt 59919<br> </body> 36Asif Hussain
  37. 37. HTML - Fundamentals header <body> <font face=“Arial,Times,Courier” color=“red” size=“3”> <b>Mike Tyler</b><br> PO Box 190387<br> Hungry Horse, Mt 59919<br></font> </body> 37Asif Hussain
  38. 38. HTML - Fundamentals header <body> <p align=‘center’> <font face=“Arial,Lucida Sans” color=“red” size=“3”> <b>Mike Tyler</b><br> PO Box 190387<br> Hungry Horse, Mt 59919<br></font> </p> </body> 38Asif Hussain
  39. 39. HTML - Fundamentals header <body> <p align=‘center’> <font face=“Arial,Lucida Sans” color=“red” size=“3”> <b>Mike Tyler</b><br> PO Box 190387<br> Hungry Horse, Mt 59919<br></font> </p> <img src=‘http://www.myserver.com/images/mike.jpg’/> </body> 39Asif Hussain
  40. 40. HTML - Fundamentals header <body> <p align=‘center’> <font face=‘Arial,Lucida Sans’ color=‘red’ size=3> <b>Mike Tyler</b><br> PO Box 190387<br> Hungry Horse, Mt 59919<br></font> </p> <img src=‘http://www.domain.com/images/mike.jpg’> <a href=‘biopage.html’>Read my Bio</a> </body> 40Asif Hussain
  41. 41. HTML - Fundamentals 41Asif Hussain
  42. 42. HTML - Fundamentals ANCHORS (Hypertext Link) <A href=“url” attributes>Displayed text </A> Attributes • NAME = “text” • TITLE = "text" • TARGET = “frame_name|window_name” 42Asif Hussain
  43. 43. HTML – Fundamentals Hypertext links Click this link opens mywebpage.html in the window / frame named “window2” <a href=“mywebpage.html” target=“window2” >Click this link </a> window2 43Asif Hussain
  44. 44. HTML – Fundamentals Hyperlink Colors <BODY LINK=color, VLINK=color, ALINK=color > <BODY LINK=“blue”, VLINK=“purple”, ALINK=“red” > <BODY LINK=“#0000FF”, VLINK=“#FF00FF”, ALINK=“#FF0000” > 44Asif Hussain
  45. 45. HTML – Fundamentals Colors • Cathode Ray Tubes (CRT) 45Asif Hussain
  46. 46. HTML – Fundamentals Colors color = “red” (Browser compatibility issues) color = “#FF0000” values vary from 00 to FF (hexadecimal) 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f Red Green Blue #FF FF FF 46Asif Hussain
  47. 47. HTML – Fundamentals Headings • Renders text as a heading, the rendering depending on the level of heading selected. Headings should be automatically spaced from the body text. <h1>Heading 1 level text</h1> <h2>Heading 2 level text</h2> <h3>Heading 3 level text</h3> <h4>Heading 4 level text</h4> <h5>Heading 5 level text</h5> <h6>Heading 6 level text</h6> 47Asif Hussain
  48. 48. HTML – Fundamentals Lists Unordered list <ul> <li>apples</li> <li>bananas</li> <li>grapes</li> <li>strawberries</li> </ul> Ordered list <ol type=‘i’ start=‘2’> <li>apples</li> <li>bananas</li> <li>grapes</li> <li>strawberries</li> </ol> 48Asif Hussain
  49. 49. HTML – Fundamentals Lists Unordered list • apples • bananas • grapes • strawberries Ordered list II. apples III. bananas IV. grapes V. strawberries 49Asif Hussain
  50. 50. HTML – Fundamentals Tables <TABLE> <CAPTION ALIGN="bottom">Class Grades</CAPTION> <TR> <TH>Student</TH> <TH>Grade</TH> </TR> <TR> <TD>Tom</TD> <TD>B+</TD> </TR> <TR> <TD>Sue</TD> <TD>A-</TD> </TR> </TABLE> 50Asif Hussain
  51. 51. HTML – Fundamentals Tables 51Asif Hussain
  52. 52. HTML – Fundamentals Tables • BORDER=value • ALIGN=left|right|center • CELLSPACING=value • CELLPADDING=value • WIDTH=value|percent 52Asif Hussain
  53. 53. HTML – Fundamentals Tables <TABLE BORDER=1 WIDTH=“50%" CELLPADDING=“6” CELLSPACING=“2” ALIGN="RIGHT"> <CAPTION ALIGN="bottom">Class Grades</CAPTION> <TR> <TH>Student</TH> <TH>Grade</TH> </TR> <TR> <TD>Tom</TD> <TD>B+</TD> </TR> <TR> <TD>Sue</TD> <TD>A-</TD> </TR> </TABLE> 53Asif Hussain
  54. 54. HTML – Fundamentals Tables Student Grade Tom B- Sue A+ Class Grades 54Asif Hussain
  55. 55. HTML – Fundamentals Tables rowspan and colspan 55Asif Hussain
  56. 56. HTML – Fundamentals <TABLE BORDER=1 WIDTH="50%" CELLPADDING=5 ALIGN="center"> <TR> <TD colspan=2 align='center'> <font color="red"><b>Student Grades</b></font> </TD> </TR> <TR> <TD><b>Student</b></TD> <TD><b>Grade</b></TD> </TR> <TR> <TD>Tom</TD> <TD rowspan=2>A</TD> </TR> <TR> <TD>Sue</TD> </TR> </TABLE> 56Asif Hussain
  57. 57. HTML – Fundamentals Student Grades Student Grade Tom A Sue 57Asif Hussain
  58. 58. Screen Compatibility 1280 x 1024 1024 x 768 800 x 600 640 x 480 58Asif Hussain
  59. 59. HTML – Fundamentals Tables • Tables are frequently used to layout the basic web page design. 640 1280 59Asif Hussain
  60. 60. HTML – Fundamentals Frames • Basic Frames • Floating Frames (inline frames) • Picture in picture • Frames let you divide a screen into windows with each window viewing a different web page. 60Asif Hussain
  61. 61. Asif Hussain 61 HTML – Fundamentals Basic Frames Banner Menu Content Footer
  62. 62. Asif Hussain 62 HTML – Fundamentals Basic Frames Basic tags • <frameset> ..</frameset> • <frame /> • <noframes> .. </noframes> Basic attributes • cols = “values” • rows = “values” • name = “frame_name” • src = “frame_source(url)” • target = “frame_name”
  63. 63. Asif Hussain 63 HTML – Fundamentals Basic Frames Banner Menu Content Footer
  64. 64. HTML – Fundamentals Basic Frames <frameset rows=“80,*,80”> <frame src=“banner.html” /> <frameset cols = “25%,75%” > <frame src=“menu.html” /> <frame src=“content.html” /> </frameset> <frame src=“footer.html” /> </frameset> 64Asif Hussain
  65. 65. HTML – Fundamentals Basic Frames <frameset rows=“80,*,80”> <frame src=“banner.html” /> <frameset cols = “25%,75%” > <frame src=“menu.html” /> <frame src=“content.html” /> </frameset> <frame src=“footer.html” /> <noframes> <body> Welcome to my page. <A HREF="noframes.htm">Continue</A> to the frame-free version. </body> </noframes> </frameset> 65Asif Hussain
  66. 66. HTML – Fundamentals Basic Frames FRAMESET attributes • FRAMEBORDER="yes|no"|0 • BORDER=pixels • BORDERCOLOR="#hexcolor|colorname" < frameset rows="80,*,80" border=2 bordercolor=“red" > .. .. </frameset> 66Asif Hussain
  67. 67. HTML – Fundamentals Basic Frames Individual FRAME attributes • SCROLLING="yes|no|auto" • NORESIZE • MARGINWIDTH=pixels • MARGINHEIGHT="pixels" • BORDERCOLOR="color" • FRAMESPACING="pixels" • FRAMEBORDER="yes|no"|0 • NAME=“frame_name” 67Asif Hussain
  68. 68. HTML – Fundamentals Floating Frames • Floating frames allow you to create a frame within the boundaries of a page Basic Frames Floating Frames 68Asif Hussain
  69. 69. HTML – Fundamentals Floating Frames <IFRAME attributes ></IFRAME> Attributes • SRC=URL • HEIGHT=pixels|percent, • WIDTH=pixels|percent • HSPACE=pixels • VSPACE=pixels • ALIGN=left|right • FRAMEBORDER=0 69Asif Hussain
  70. 70. HTML – Fundamentals Floating Frames <IFRAME NAME=“frame_name” ALIGN="right" HSPACE=“40” VSPACE=“40” WIDTH="75%" HEIGHT=“150” FRAMEBORDER=0 SRC=http://www.mysite/mypage.htm > </IFRAME> 70Asif Hussain
  71. 71. HTML – Fundamentals Hypertext links <a href=“page.html” target=“blank” >Click this link </a> – Creates new window for the page <a href=“page.html” target=“parent” >Click this link </a> – Opens page in the parent frame/wind of this frame/window <a href=“page.html” target=“top” >Click this link </a> – Opens page in top most frame/window 71Asif Hussain
  72. 72. HTML – Fundamentals DIV and ILAYER • Allows you create a position-able block of content. Content positioned within this block 72Asif Hussain
  73. 73. HTML – Fundamentals DIV <div attributes> content </div> attributes • ID=“name” • STYLE = “style parameters re: CSS” 73Asif Hussain
  74. 74. HTML – Fundamentals DIV < DIV ID=“fred” STYLE = “POSITION:absolute|relative; VISIBILITY:visible:hidden; Z-INDEX:number; WIDTH:width in pixels; HEIGHT:height in pixels; TOP:pixels from top of page or block; LEFT:pixels from left edge of page or block; PADDING:margin in pixels; other style attributes; “ > content </DIV> 74Asif Hussain
  75. 75. HTML – Fundamentals DIV contentc content content content content content content 75Asif Hussain
  76. 76. <div style="position:absolute; left:100px; top:100px; width:100px; height:100px; background-color:#ffffff; "> HTML – Fundamentals DIV 76Asif Hussain
  77. 77. HTML – Fundamentals CASCADING STYLE SHEETS (CSS) • Styles enable you to define a consistent 'look' for your documents by describing once how headings, paragraphs, quotes, etc. should be displayed. • Style sheet syntax is made up of three parts: selector {property: value} selector = element.class 77Asif Hussain
  78. 78. HTML – Fundamentals CASCADING STYLE SHEETS (CSS) H1 {text-align: center; color: blue} A {color:green; font-familiy:arial,courier; font-weight:bold;} td { align:center; background-color:grey; border-color:red;} div {position:absolute; visibily:hidden; margin:10px } font {color:navy; font-size:2pt; font-face:trebuchet; } hr {color:#ff0000; width:80%; align:center; } table {width:80%; align:center; border:2px; padding:5px; } 78Asif Hussain
  79. 79. HTML – Fundamentals CASCADING STYLE SHEETS (CSS) H1 {text-align: center; color: blue} H1.widget {text-align: center; color: red; font-size:80%; } A {color:green; font-familiy:arial,courier; font-weight:bold;} A.menu {color:cyan; font-familiy:arial,courier; font-style:italics;} td { align:center; background-color:grey; border-color:red;} td.figure { align:right; background-color:white; border-color:black;} font {color:navy; font-size:2pt; font-face:trebuchet; } font.fred {color:blue; font-size:2pt; font-face:trebuchet; font-weight:bold; } element.class {property:value; } 79Asif Hussain
  80. 80. HTML – Fundamentals CASCADING STYLE SHEETS (CSS) Embedded <head> <title> My Page Title </title> <style TYPE="text/css > <! - - element.class { property:value; } element.class { property:value; } - - > </style> </head> 80Asif Hussain
  81. 81. HTML – Fundamentals CASCADING STYLE SHEETS (CSS) Linked Styles can be defined in a separate file <font style=“property:value; “> text </font> <font class=“fred”> text </font> mystyles.css <head> <LINK REL="stylesheet" HREF="mystyles.css“ TYPE="text/css"> </head> 81Asif Hussain
  82. 82. HTML – Fundamentals CASCADING STYLE SHEETS (CSS) /* Example style sheet file (note how this comment was created) */ BODY {background: #FFFFD8; margin-top: 20} A:link {color: #400080; background: #FFFFD8} H1 {font-weight: bold; text-align: center; color: #006000; background: #FFFFD8; font-family: Gill Sans, Arial, sans-serif; } font.caption {font-family: Gill Sans, Arial, sans-serif; font-style: italic; } /* End of example style sheet file */ 82Asif Hussain
  83. 83. HTML – Fundamentals CASCADING STYLE SHEETS (CSS) Inline Styles can be placed within individual elements <font style=“color:red; font-face:ariel;” > 83Asif Hussain
  84. 84. HTML – Fundamentals CASCADING STYLE SHEETS (CSS) Inline > Embedded > Linked Defining the style of your text • linked -> font-family:arial,georgia; • embedded -> color:navy; • inline -> font-size:2pt; 84Asif Hussain
  85. 85. HTML – Fundamentals CASCADING STYLE SHEETS (CSS) Using IDs • IDs enable you to define a unique style which you can apply to a number of elements. <STYLE> <!– #copyright {font-style:italic; font-size:smaller; } --> </STYLE> <p ID=“copyright”> Any textual content </p> 85Asif Hussain
  86. 86. HTML – Fundamentals Images <img src=“images/pic1.jpg” width=75px, height=50px /> <img class=“pics” src=“images/pic1.jpg” /> img.pics { width:75px; height:50px; border-width:3px } 86Asif Hussain
  87. 87. HTML – Fundamentals Using Images • Images take longer to download than text • The larger the image, the slower the page • Use optimization software • Use thumb nail images 87Asif Hussain
  88. 88. HTML – Fundamentals Other uses of Images • Page background (not recommended) – <body background-image = “url” > – <body class=“background”> – body.background { background-image:$url; } • Table background – <table background-image=“url”> – <table class=“background”> – table.background { backlground-image:url; } • DIV background – <div style={ background-image:url; } > 88Asif Hussain
  89. 89. 89Asif Hussain A Q

×