Web Technologies and Programming Introduction to Web Technologies

CourseIntroductionPREFACEThe key objective of the policies is to create a set of defined rules between teacher and students, so that there will be consistency and professional learning environment will be maintained.Course decorum and University quality policy can also be achieved by adopting these policies.3Course InformationPrerequisites: Fundamentals of Computer ProgrammingCourse Title: WEB TECHNOLOGIES & PROGRAMMINGCourse Code: CSC-536Couse Credit Hours: 3 (3 0) There will be 32 lectures for the course excluding exams.4Course EvaluationAssignments – 10% (4 Assignments will be Conducted) Quizzes – 10% (4 Quizez will be Conducted)Graded Discussions Topics – 05% (4 discussion will be conducted) Sessional – 1 : 10% Sessional – 2 : 15% Final - 50% (All Course will be included) 5Submit Soft form. No late Assignments SubmissionIdea is to initiate research oriented writing not “cut-copy-paste”Plaragism checked will be performed if found greater then 20% will loose marks. Understanding and preparing Assignment will make you exam preparation comprehensive. 6Assignments PoliciesQuizzes will be conceptual and will require sound preparationQuizzes will be Objective based (MCQS)Quizzes have to be solved in allocated time span. 7Quizez PoliciesExam will be 80% conceptual and 20% theoreticalObjective (MCQS, Fill the blanks, True False, Match columns, short questions etc)Subjective (Definitions, Differentiations, explanations, diagrams, reasoning, justifications etc)All Assignments, Lecture notes, Slides, Text Book chapters will ne included.Exam will require thorough studies” and usually no choices given in the exam.8Exam PoliciesHow to get good marks?RequirementsAttention for video lectures Do your homework assignment independently (don’t use “google” more)Things to Avoid (Cut-Copy-Paste Culture, Carelessness)Things to do (Innovation, Confidence, Work Attitude)Sense of Maturity and continuous learning9Online ResourcesWikipedia; https://en.wikipedia.org/wiki/World_Wide_WebBASIC HTML & CSS for NON-WEB DESIGNERS: Tutorial: Tutorial: Tutorial: Web Development Technologies: Usability and Web Design - Jakob Nielsen: Books: PHP and MySQL Web Development, Welling, L. & Thomson, L., 5th Edition (2015). Addison-Wesley.Reference books:The Modern Web: Multi-Device Web Development with HTML5, CSS3, and JavaScript, Gasston, P., 1st Edition (2013). No Starch Press.Pressman, R. (2008). Web Engineering: A Practitioner's Approach. McGraw-Hill Higher Education11Contacttehseenriazabbasi@gmail.com tehseen.abbasi@comsats.edu.pk 12Web Technologies and ProgrammingIntroduction to Web Technologies13OutlineIntroduction to the CourseWhat is web?Web applicationsThe case for web engineeringCategories of web applicationsCharacteristics of web applications141. Introduction to the CourseThis course aims: to introduce the methods and techniques used in Web-based application development to develop practical web applications151.1 Web engineering methods and techniques This modules includes the following topics:Web application development approachesProcess models “A set of activities whose goal is the development or evolution of software”.Generic activities in all software processes are:SpecificationDevelopmentValidationEvolution16RequirementsOperation andMaintenanceImplementationDesignFeasibility andPlanning171.1 Web engineering methods and techniques The Process (Simplified)1.1 Web engineering methods and techniques This modules includes the following topics:Product developmentRequirement engineeringWeb application modelingWeb application architecturesTechnologies and toolsTesting web applicationsMaintenance Quality Aspects:Security181.2 Web application developmentBrowser interprets user’s selection and makes request from appropriate serverServer accepts and processes request from browser4. Server sends requested files to browser to be interpreted1. User sends requestUser receives file displayed by the browserBrowser191.2 Web application development Hyper-text Markup Language (HTML)Cascading Style-sheets (CSS)Client-side Scripting Language (JavaScript)Serve-side Scripting Language (PHP)Database Language (MySQL)202. Web engineeringSoftware engineering is an engineering discipline that is concerned with all aspects of software production Software Engineering is the science and art of building significant software systems that are:on timeon budgetwith acceptable performancewith correct operation212. Web engineeringWeb engineering is the study of the process, used to create high quality Web-based applications Web engineering draws heavily on the principles and management activities found in software engineering processesWeb engineering extends Software Engineering to Web applicationsWeb technology provides a platform for effective communication among different users and devices on a computer network.222. Web engineeringThe application of systematic and quantifiable approaches to cost-effective analysis, design, implementation, testing, operation, and maintenance of high-quality web applications232. Web technology Web technology is the establishment and use of mechanisms that make it possible for different computers to communicate and share resources243. Web applicationsWWW(World Wide Web) has massive and permanent influence on our livesEconomy, Industry, education, healthcare, entertainmentWhy? global and permanentComfortable and uniform access253. Web applicationsWWW started as an informational mediumEvolved into application mediumInteractive, data intensive servicesDistinguishing factorsHow it is used?Technologies and standards for development263. Web applicationsA Web application is a system that utilizes W3C (World Wide Web Consortium ) standards & technologies to deliver web-specific resources to clients (typically) through a browserTechnology + interaction274. The case for web engineeringApplication development on the Web remains largely ad hocunplanned, one-time eventsIndividual experienceLittle or no documentation for code/designShort-term savings lead to long-term problems in operation, maintenance, usability, etc.lack of performance, reliability, user-freindliness and scalability 284. The case for web engineeringRoot Causes of poor design:Development as an authoring activityCommunication GapConsidered Development is “easy”Techniques that should not be used are misappliedTechniques that should be used are not applied294. The case for web engineeringTop project drawbacks 84% - Failure to meet business objectives79% - Project schedule delays63% - Budget overrun53% - Lack of functionalityWeb Engineering’s solution:Clearly defined goals & objectivesSystematic, phased developmentCareful planningIterative & continuous auditing of the entire process305. Categories of web applicationsDocument-centric webInteractive and transactional web applicationsWorkflow-based web applicationsCollaborative and social web applicationsPortal-oriented web applicationsUbiquitous web applications315.1 Document-centric web sitesoriginator to Web applicationsStatic HTML documentsManual updatesProsSimple, stable, short response timesConsHigh management costs for frequent updates & large collectionsMore prone to inconsistent/redundant infoExample: static home pages325.2 Interactive & transactionalNot only read-only content but also allow content modificationCome with the introduction of HTML formsSimple interactivityDynamic page creationWeb pages and links to other pages generated dynamically based on user input335.2 Interactive & transactionalContent updates -> TransactionsDatabase connectivityIncreased complexityExamples: news sites, booking systems, online banking345.3 Workflow-based applicationsDesigned to handle business processes across departments, organizations and enterprisesAutomates processes consisting of series of stepsBusiness logic defines the structureHigh complexity; autonomous entities Examples: B2B and e-Government355.4 Collaborative & social webUnstructured, cooperative environmentsSupport shared information workspaces to create, edit and manage shared informationInterpersonal communication is paramountClassic example: WikisThe Social WebUnrecognizability traditionally characterized WWWMoving towards communities of interestExamples: Blogs, facebook, twitter etc.365.5 Web portalsOne specially-designed at a website which brings information together from diverse sources in a uniform wayEach information source gets its dedicated areaSpecialized portalsBusiness portals Marketplace portals Community portals375.6 Ubiquitous web applicationsCustomized services delivered anywhere via multiple devicesStill an emerging field385.7 Categories of Web Applications (development history vs complexity)Doc-CentricInteractiveTransactionalWorkflowBased Social WebCollaborativeUbiquitousPortalOrientedDevelopment HistoryComplexity396. Characteristics of Web ApplicationsHow do Web applications differ from traditional applications?3 dimensions Product-basedUsage-basedDevelopment-based406.1 Product-based characteristicsProduct-related characteristics constitute the “building blocks” of a Web applicationContent:Document character & multimediaQuality demands: current, exact, consistent, reliable416.1 Product-based characteristicsNavigation Structure (Hypertext):Non-linearityPotential problems: Disorientation & cognitive overloadUser interface (Presentation):Appearance Self-explanation426.2 Usage-based characteristics Much greater diversity compared to traditional non-Web applicationsUsers vary in numbers, cultural background, devices, h/w, s/w, location etcSocial Context (Users):Spontaneity - scalabilityHeterogeneous groups436.2 Usage-based characteristics Technical Context (Network & Devices)Quality-of-ServiceNatural Context (Place & Time):GlobalityAvailability446.3 Development-based characteristicsThe Development Team:Multidisciplinary – print publishing, s/w development, marketing & computing, art & technologyTechnical Infrastructure:Lack of control on the client side456.3 Development-based characteristicsIntegration:Internal: with existing legacy systemsExternal: with Web servicesIntegration issues: correct interaction, guaranteed QoS46SummaryWeb engineering extends Software Engineering to Web applicationsWhy web engineering?Web applicationsCategories and characteristics of web applications47THANK YOU