Web Technologies and Programming Lecture 31

1Web Technologies and ProgrammingLecture 312Summary of Lecture 1 - 153OutlineIntroduction to Web TechnologiesThe web application development processWeb Project ManagementRequirement Engineering Modeling web applicationsImplementing and testing web applicationsWeb application architecture4OutlineIntroduction to HTMLHTML Links and navigationAdding Image, audio and video files to web pages Tables in HTMLHTML FORMSHTML 5 Form elments5OutlineIntroduction to Cascading Style-sheets (CSS)Page Layout CSS PropertiesCSS 361. Introduction to Web TechnologiesWhat is web?Web applicationsThe case for web engineeringCategories of web applicationsDocument-centric webInteractive and transactional web applicationsWorkflow-based web applicationsCollaborative and social web applicationsPortal-oriented web applicationsUbiquitous web applicationsCharacteristics of web applications(Product, Usage, Development)71. Introduction to Web TechnologiesWeb engineering extends Software Engineering to Web applicationsWhy web engineering?Web applicationsIntegration:Internal: with existing legacy systemsExternal: with Web servicesIntegration issues: correct interaction82. The web application development processDevelopment Process modelsoftware development process activitiesRequirement for a web development process modelRational unified process model (RUP)A modern process model derived from the work on the UML and associated process.RUP is a heavyweight, phase oriented, incremental and iterative processsuitability for web application development92. The web application development processSoftware specification: The functionality of the software and constraints on its operation must be definedcritical stage (can lead to problems in design and implementation)Activities:Feasibility studyRequirement elicitation and analysisRequirement specificationRequirement validation103. Web Project ManagementProject management is the process of planning, organizing, motivating and controlling resources and procedures to develop a software/web projectProjects need to be managedto ensure budget and time constraintsProject manager: tasks/responsibilitiesTraditional vs. web project management113. Web Project ManagementProject Managers TasksProject planningRisk managementPeople managementReportingProposal writing124. Requirement Engineering Requirements Engineering: the principles, methods, & tools for drawing, describing, validating, and managing project goals and needsIt may range from a high-level abstract statement of a service or of a system constraint to a detailed mathematical functional specification.The processes used for RE vary widely depending on the application domain, the people involved and the organisation developing the requirements.Functional requirementsNon-functional requirementsHowever, there are a number of generic activities common to all processesRequirements elicitation;Requirements analysis;Requirements validation;Requirements management134. Requirement Engineering 14The requirements engineering process5. Modeling web applicationsProcess of developing abstract models of a systemRepresenting system using graphical notation - UML Requirement modelinguse-case diagramactivity diagramContent modelingclass diagramNavigational modelingto model nodes and navigational structure among themPresentation modelingmodel user interface, page-layout155. Modeling web applications16>User registration page>Logo>logo>title>>name>password>email>submitPresentation Modelling6. Implementing and testing web applicationsWhen we have decided the ‘What’ of the web application i.e.requirements are definedsystem architecture is decidedsystem model and design is readyWe are ready for ‘how’ i.e. to implementation phase176. Implementing and testing web applicationsTesting is an activity conducted to evaluate the quality of a product and to improve it by identifying defects and problemsIf we run a program with the intent to find errors, then we talk about testingBy testing we determine the quality state of the systemwhich provides a basis for improvement186. Implementing and testing web applicationsTechnologies for web developmentProtocolclient-side technologiesserver-side technologiesTesting web applicationsObjectivesLevelsWeb application specificschallenges197. Web application architectureSoftware system architectureThe architecture of a computer system is the high-level (most general) design on which the system is basedArchitectural features include:Components (a Component is a part of a program)It contains one or several routinesConnectors (how components communicate)Collaborations (how components interact)207. 1 Components of a web application architecture21ClientBrowserPlug -InFirewallproxyWeb-serverHTML, XML CGI supportDatabase serverApplication serverLegacy applicationMedia server7. Web application architectureSpecifics of web application architectureLayered web architecture2-layered architecture3-layered architectureN-layered architecture228. Introduction to HTMLIntroduction to HTMLHTML – Hyper-Text Markup Language – The Language of Web Pages on the World Wide WebHypertext:Allows for non-linear linking to other documentsMarkup Language:Content is “marked up” or tagged to tell the browser how to display it238. HTML Links and navigationBasic Structure of a HTML page24Basic Structure of HTML pageBody tag attributesText formatting tagsLists258. HTML 9. HTML Links and navigationHow to link between pages of your site (internal links)Anything between the opening tag and the closing tag becomes part of the link that users can click in a browserA Local link uses a page name (including sub-directories if needed) as the target. It is “local” to the current server.269. Introduction to Web TechnologiesHow to link to other sites (external)To link the page of another website, again the href attribute of opening tag of is used the value of the href attribute is the full web address for the page you want to link to rather than just the filename Click here 2710. Adding Image, audio and video files to web pages Use the HTML  element (inside ) to use an image as a linkImages can be added as followsWe can add an image by2810. Adding Image, audio and video files to web pages The tag is used to add a video to a web pageThis tag is provided in HTML5The src attribute of the tag is used to indicate the source of the videoWe can add a video to our page as2910. Adding Image, audio and video files to web pages The tab is used to add a audio to a web pageThis tag is provided in HTML5The src attribute of the tag is used to indicate the source of the audioWe can add a audio to our page as3011. Tables in HTMLTables display information in rows and columnsTables are commonly used to display all manner of data that fits in a grid such as train schedules, television listings, financial reports etc.311. Creating HTML tablesAn HTML table consists of the element and one or more elements likeTables are divided into table rows with the  tag.Table rows are divided into table data with the  tag.A table row can also be divided into table headings with the  tag.Table level attributesRow level attributesCell level attributes3211. Page Layout using TablesLayout using Table3312. HTML FormHTML forms are used to collect user input.HTML forms contain form elements.Form elements are different types of input elements, checkboxes, radio buttons, submit buttons, and more.The  element defines an HTML form:.form elements.3412. HTML FormForms provide a means of submitting information from the client to the serverHTML supports tags for creating forms, however, it does not process the informationUse server-side script to process form informationServer-side script runs on the Web server and receives data from a form and uses it to perform a set of tasks3512. HTML FORMSCommon Form Attributes:action - gives the URL of the application that is to receive and process the forms datamethod - sets the HTTP method that the browser uses to send the form's data to the server for processing; Either POST or GETname – name of the form3613. HTML 5 Form elementsNew AttributesRequiredPlaceholderAutocompletePatternDisableRead only3713. HTML 5 Form elementsHTML ElementsTextbox Password FieldHidden FieldCheckboxRadio ButtonText AreaSelect ListSubmit ButtonReset ButtonNew ElementsEmail elementDate elementNumber elementColor element3813. HTML 5 Form elementsXHTMLEXtensible HyperText Markup LanguageXHTML is almost identical to HTMLStricter version than HTMLXHTML is HTML defined as an XML applicationXHTML is supported by all major browsers3914. Introduction to Cascading Style-sheets (CSS) Understand the basics of CSSCSS ( Cascading Style Sheets ) is a style sheet language that describes the presentation style of an HTML Page.It describes how HTML elements must be rendered/displayed on screen.Enforce standards and uniformityCreate dynamic effectsWorks by allowing you to specify rules4014. Introduction to Cascading Style-sheets (CSS)Understand the differences among inline, internal and external style sheetsUnderstand the difference between ids and classes.Understand how to declare a style.4114. CSS - Font propertiesCommon font properties:font-familyfont-sizefont-weightfont-stylefont-variant4215. Page Layout Group related information/sectionsHome page: login form, registration formUser page: user’s information, recent messagesInbox: Received messagesOutbox: Sent messagesSend a message: Send message formLiquid vs Fixed designThe Div tagCoding the design4315. Page Layout Create site map44Home pageUser pageInboxOutboxSend a message16. CSS PropertiesTo control the presentation of an element, you need to know the corresponding propertiesProperties with related functionalities are grouped togetherExample:Properties to control the presentation of text4516. CSS PropertiesAllows for scalable fontsMonitors vary in size of display and screen resolutionSpecifying a relative unit ensures a uniform viewing experience across the variety of monitors rendering your pageAs a scalable font:body {font-size: 150%}Use descriptive keywords: xx-small through xx-large:b {font-size: xx-large}4617. CSS 3Introduction to CSS3.CSS3 Properties.Rounded Corners, Box Shadows.CSS3 Transformations.CSS3 Media Queries.4717. CSS3CSS3 is split up into "modules". Some of the most important CSS3 modules are Selectors Box Model Backgrounds and Borders Text Effects 2D/3D Transformations Animations Multiple Column Layout User Interface4817. CSS 3A media query consists of a media type and can contain one or more expressions, which resolve to either true or false.Media queries can be used to check many things, such as:width and height of the viewportwidth and height of the deviceorientation (is the tablet/phone in landscape or portrait mode?)resolution49SummaryIntroduction to Web TechnologiesThe web application development processWeb Project ManagementRequirement Engineering Modeling web applicationsImplementing and testing web applicationsWeb application architecture50SummaryIntroduction to HTMLHTML Links and navigationAdding Image, audio and video files to web pages Tables in HTMLHTML FORMSHTML 5 Form elments51SummaryIntroduction to Cascading Style-sheets (CSS)Page Layout CSS PropertiesCSS 352THANK YOU53