INTRODUCTION & OVERVIEW COURSE: SOFTWARE DESIGN & DEVELOPMENT LECTURE : 1 LECTURER : Mr. MARWAN A. LARDHI COLLEGE: COMPUTERS & INFORMATION TECHNOLOGY DEPARTMENT: CS & IT LEVEL: 3 RD SOFTWARE Computer programs and associated documentation. Software products may be developed for a particular customer or may be developed for a general market. SOFTWARE DEVELOPMENT LIFE CYCLE SOFTWARE DESIGN • Software design is a process to transform user requirements into some suitable form, which helps the programmer in software coding and implementation. • Software design phase is the first step in SDLC (Software Design Life Cycle), which moves the concentration from the problem domain to the solution domain. SOFTWARE DEVELOPMENT Software development is a process of writing and maintaining the source code. Can be say, it includes all that is involved between the conception of the desired software through to the final manifestation of the software. OVERVIEW OF WEB TECHNOLOGY HOW WEB AND HTTP WORK? CLIENT SIDE VS. SERVER SIDE SCRIPTING CLIENT SIDE VS. SERVER SIDE SCRIPTING (CONT.) CLIENT SIDE SERVER SIDE • HTML • ASP.NET (C# or Visual Basic) • CSS • PHP • JavaScript • C++ • AJAX • Java & JSP • jQuery & ect. • Python • Ruby on Rails and so on. CLIENT SIDE SCRIPTING HTML • HTML stands for Hypertext Markup Language. • Hypertext refers to the way in which Web pages (HTML documents) are linked together. • Markup Language which means you use HTML to simply "mark-up" a text document with tags that tell a Web browser how to structure it to display. • HTML is comprised of “elements” and “tags” • HTML Begins with <html> and ends with </html> • An HTML file must have an .htm or .html file extension HTML (STRUCTURE FORMAT) <!DOCTYPE html> <html> <head> <title>This is document title</title> </head> <body> <h1>This is a heading</h1> <p>Document content goes here.....</p> </body> </html> HTML (DOCUMENT STRUCTURES) HTML 5 • New Elements • New semantic elements like <header>, <footer>, <article>, and <section>. • New attributes of form elements like number, date, time, calendar, and range. • New graphic elements: <svg> and <canvas>. • New multimedia elements: <audio> and <video>. • New HTML5 API's (Application Programming Interfaces) • • • • • HTML Geolocation HTML Drag and Drop HTML Local Storage HTML Application Cache HTML Web Workers HTML 5 HTML ELEMENTS & TAGS (BASICS HTML) HTML ELEMENTS & TAGS (FORMATTING) HTML ELEMENTS & TAGS (FORMATTING) HTML ELEMENTS & TAGS (FORMATTING) HTML ELEMENTS & TAGS (FORMS AND INPUT) HTML ELEMENTS & TAGS (IMAGES) HTML ELEMENTS & TAGS (AUDIO / VIDEO) HTML ELEMENTS & TAGS (LINKS) HTML ELEMENTS & TAGS (LISTS) HTML ELEMENTS & TAGS (TABLES) HTML ELEMENTS & TAGS (STYLES AND SEMANTICS) HTML ELEMENTS & TAGS (META INFO) HTML ELEMENTS & TAGS (PROGRAMMING)
