Web Application Development - Coursework Example

WEB APPLICATION DEVELOPMENT Table of Contents Model View Controller 3 1 Benefits of MVC 3 2 Limitations of MVC 4 2. Responsive Web Design 6 2.1 Use of CSS Media Queries instead of JavaScript driven solutions 7 2.2 Use of Fluid Grids 8 2.2 Use of Discrete Widths 8 2.2 Use of Flexible Font Units 9 2.2 Using Adaptive Images 9 2.2 Using flexible margins and padding 10 1. Model View Controller Model view controller (MVC) is software development pattern for implementing user interfaces. It consists of a central component; the model that comprises of business logic and rules, functions and application data. It is also comprised of a view that gives data representation output as graphs, diagram or charts. Multiple views can also represent information as a bar chart and tabular. Thirdly, the controller gets inputs and changes them into commands for the views or model (Fournier, 1999). MVC also defines interactions between the model, view and controller. A view asks for information from the model in order to create an output representation. A controller sends commands to the model causing the model to change the model state or it can send commands to view to update on the view’s model representation (Dooley, 2011). On the other hand a model gives notice to views and controllers of any change that occur to its state. MVC has separated the sites core functionality from human computer interaction. The developer has separated the core functionality of the website from its behaviour. Some portions of the website model’s functionality are visible to the user through the controller. Implementation of change generation mechanism by providing procedures to permit views and controllers to support change generation mechanism. Once a change occurs, the model procedures that caused model’s state change calls the notify procedure. 1.1 Benefits of MVC The application of MVC to the development of the site has made several key benefits to the site. Creation of multiple views belonging to the same model. MVC clearly distinguishes the user interface components from the model. This has allowed the implementation of multiple views using a single model. During run time of the website multiple views open at the time while the views operate (are opened and closed) dynamically. The website employs synchronized views where the model change generation mechanism guarantees that changes to application data is relayed to all the attached observers. By so doing all the views and controllers that are dependent become synchronized. Views and controllers are ‘pluggable’, where the abstract separation nature of MVC gives the developer mandate to substitute objects (view and controller) of a model. This exchange is also extended to user interface objects at run time. Exchangeability. The website model is free from external control and constraint of user interface code making the migration of the MVC website to a different platform does not have an effect upon the functional core of the website. What is required is view and controller components for the new platforms. Framework potential to creation of dynamic view. The website allows makes it possible to dynamically open and close views. The site developer has provided a component for handling open views. It can also be used to close the application following the closure of the last view. 1.2 Limitations of MVC Despite the benefits of MVC evident in the website there are also liabilities that come in hand. The website is characterized by increased complexity. For simplicity, Model View Controller design does not provide the best method of creating an interactive website. Olsen(1998) present reasons and arguments that by using different models, controller and view components for simple text elements or menus bring about more complexity and unnecessarily sacrifice flexibility. The site has potential for excessive updates. The model does not skip unneeded change notifications resulting from user actions that trigger many updates. Not every change propagation is given attention by the views; for instance an iconized window view may not require an update till the window is returned to its original size. There is close relation between view and controller. The controller and view are two different components but are closely related (highly coupled). This hampers their reuse. It is very rare to use a view without its corresponding controller and the converse is also true except for read only views that use a common controller that dismisses all input. High coupling of controllers and views to the model. Direct calls are made to the model by the views and controllers implying that any alterations made on the model’s interfaces would most likely cause the breaking of both view and controller codes. This issues is amplified in the website due to the use of multiple views and controllers. The developer uses a means of indirection to try to address this issue. There is inefficient access of data in view. A view may require to make many calls to get all the needed display data. This is fully dependent on the model interface. Frequent updates undermines performance of the page and therefore unnecessary request for unaltered data from the model is not an option. Inevitable alteration of view and controller during porting. The view and controller contains all dependencies of the user interface platform. Regardless, both components hold code that is platform independent. Therefore an MVC system port dictates the detachment of platform-dependent code prior to rewriting. Due to large composition of the website and the MVC framework present more platform dependencies encapsulation is needed. Difficulty in utilizing MVC with advanced modern user-interface design tools. The use of MVC primarily targets portability of an application otherwise the utilisation of advanced user interface builders surpasses MVC. It is normally an expensive venture in retrofitting toolkit components or user interface layout output to MVC. This would require more wrapping so as to meet the minimum requirements. Most of the high level toolkits determine how to deal with events internally and set their own flow of control. Such events may include scrolling up and down a window or displaying a popup or drop down menu (Grove, 2010). On a final note a user interface platform implemented using a high level toolkit may interpret events differently and extend call-backs for each and every kind of user activity. These modern user interface toolkits incorporates most of controller functionality and therefore a separate component is not required. 2. Responsive Web Design Responsive Web design is a software design strategy that proposes that design and development of a website ought to respond to the behaviour and environment of the users on the basis of page orientation, platform and screen size (Peterson, 2013). Web design and development is trying to keep up with the seemingly unending new resolutions and devices. The creation of website versions for each new device and screen resolution is impractical hence the need for responsive Web design. According to Frain (2012), a responsive website is designed for orientation changes by use of CSS media query and HTML. The website should maintain a simple layout for the site by well-set body font size of 100% and use of basic HTML5 element and reset style sheet. The site’s developer has to clearly define the fundamental horizontal and vertical breakpoints supported by a site e.g. 480px, 768px, and 1024px for smartphones, tablets and desktop respectively (2012). A designer for responsive website centres the contents and thereby maintain a sense of balance for any screen or browser width. The design’s simplicity also makes it quick and easy to switch between the browsers and screens. The web pages are designed in a manner that the website can adapt to the different device display orientations (Sharkie and Fisher, 2013). Http://galotaibi.co.uk/cv/cv.html is a typical example of a responsive Web design. This website layout is dynamic; some content is dropped and rearranged and the font size also change. It automatically resizes all the images including the header and navigation images. The margins and padding are flexible giving a room for expansion and shrinkage. The website is composed of technical information that has been implemented to provide responsive design; a clear representation of web developers fine work. The web developer has used some of the best practices in responsive web development. These practices include: Use of CSS Media Queries instead of JavaScript driven solutions Media queries are important in page rendering as they allow exclusive use of CSS styles. The web designer has used Media Queries in designing the site giving a neatly formatted page printouts. The media query has allowed the developer to target specific device categories and carefully examine their physical characteristics. In addition the developer is not limited in incorporating media queries in links. They have been included in the CSS as a portion of media rule. Instead of targeting a certain version of browser the developer has surgically adjusted issues in the layout such that it scales outside its previous perfect resolution. However specifications for media query provides media features that go farther beyond screen resolution, exceedingly broadening the scope of what the developer can test with queries. Also the developer has tested multiple property values using a single query by connecting them into a chain using keyword ‘and’. The developer has successively created a fast layout with least possible repainting. Using CSS rules the developer has made it possible for the browser to adjust the content to fit to the new screen dimensions after rotating the computing device orientation. For JavaScript driven positioning events there will be multiple repaints leading to poor performance of the site. CSS is employed to prevent content or layout changes when the browser engine reflows. The reflow causes an orientation change. Use of Fluid Grids The Fluid Grid System for layout is well designed to correspond to responsive layout by floating the content and defining content as span elements. Each of the sections utilizes relative percentage width. Fluid grids allow page layouts to adjust to the dimensions of the client device view screen. Fluid grids comprise of ordered columns and rows that place the blocks of content on the webpage. The columns and rows determine the horizontal positions and relative vertical positions of content blocks respectively. The developer has used HTML5 to implement and manipulate grid in adapting to different sizes of viewport. Scaling the Grid. The developer has used grids in scaling content blocks in adapting to different screen view sizes. The content blocks only cover a certain number of columns. The page is implemented such that column widths become bigger or smaller to accommodate different screen view sizes, the content blocks width become either bigger or smaller accordingly. The implemented scaling supports all screen view sizes (large and medium sized) that are wide enough to accommodate the placement of content blocks. Repositioning of the Grid content. The grids are used to distribute the content blocks vertically instead of horizontally for the space limited viewports where content blocks size may be constrained by least possible width, beyond which scaling becomes ineffective. Using of Discrete Widths The developer makes use of constant width for the content blocks and static page width in each of the viewport widths intended. Breakpoints (distinct window widths that result when changes to content size happen) are clearly evident when users try to resize browse window manually. As a result the developer has strictly adhered to page designs hence focusing on attaining maximum user experience goals. The Blog post’s date changes with the browser width by moving to either side, depending on the space available. The width of the content area and the margin space on both sides also changes. Use of Flexible Font Units The developer has used and set body font size to 100%, this allows later utilization of ems in sizing the font. The site is implemented using em for font-size. Nearly all browsers set their default size to 16px. This is used to form a base for em calculation. The browser changes em to pixel internally. This brings about a compounding effect as it is relative to the parent font size. Using Adaptive Images The site is implemented such that the images are made responsive as much as possible. The images are contained within the container avoiding a scenario where images exceed the width of the container. The maximum width of the images is 100% and is set for both images and video. The background image is also made flexible by considering factors like background size and incomplete browser support for content rich and multi-resolution images. The site has utilized media queries in choosing image resources to be showed in the page. The media query simply establishes if the downloaded resource is to be displayed. The use of JavaScript to initiate the resource request brings about efficiency in selective download of resources. The developer has implemented this by adding the appropriate JavaScript libraries together with the needed HTML mark up. The site has delivered a static image implementation via cooperating image components and servlets in to providing images for the web page. Using flexible margins and padding The page developer has set flexible margins on the elements, by defining the width of the element’s container. Also a flexible padding on the elements is evident and it defines the widths of the elements. This is implemented through representing the padding relative to width of the box itself. Lastly has the page makes use of negative margins to aid in the positioning. Work cited 1) Dooley, J. (2011). Software development and professional practice. 1st ed. [New York, N.Y.]: Apress. Darie, C. (2006). AJAX and PHP. 1st ed. Birmingham, U.K.: Packt Pub 2) Firdaus, T. (2013). Responsive web design by example beginners guide. 1st ed. Birmingham: Packt Publishing Limited. 3) Fournier, R. (1999). A methodology for client/server and Web application development. 1st ed. Upper Saddle River, NJ: Yourdon Press. 4) Frain, B. (2012). Responsive web design with HTML5 and CSS3. 1st ed. Birmingham: Packt Publishing Ltd. 5) Grove, R. (2010). Web-based application development. 1st ed. Sudbury, Mass.: Jones and Bartlett Publishers. 6) Millett, S. (2010). Professional ASP.NET design patterns. 1st ed. Indianapolis, Ind.: Wiley Pub. 7) Olsen, D. (1998). Developing user interfaces. 1st ed. San Francisco, Calif.: Morgan Kaufmann Publishers. 8) Parsons, D. (2008). Dynamic web application development using XML and Java. 1st ed. London: Cengage Learning EMES. 9) Peterson, C. (2013). Learning responsive web design. 1st ed. [S.l.]: OReilly Media. 10) Sharkie, C. and Fisher, A. (2013). Jump Start responsive web design. 1st ed. VIC Australia: SitePoint Pty. Ltd. Read More