Web Design Principles Manageability

 Web design includes the following principles:  Administration and control of the hardware and
Availability, Performance, Reliability, Scalability, software used on the website. There are a
Manageability and Cost. variety of monitoring and analysis tools that
report usage, missing links and files, and
Availability and Accessibility
performance, all of which keep the site intact
 Server uptime – It's important to make sure
and running smoothly.
your visitors don't get an error trying to load
your site. Invest in the right hosting. Invest in Cost
the right hosting. We're never going to cut  May involve the entire process and duration of
corners here, get a good web host that you can the website development.
depend on.
Web Applications Core Components
 Broken links – Double check that there are no
The following are the Core Components of Web
dead links to your site. SEO tools like Ahrefs and Applications:
Screaming Frog will crawl through your site to  UI (Front End (DOM, Framework))
find all the broken links.  Request Layer (Web API)
 Mobile responsiveness – Make sure that your  Back End (Database, Logic)
site can handle different screen sizes and slow
connections. Google has also moved to the Front End Development (UI)
"mobile-first" index, which means that the  manages everything users see visually first in
mobile versions of the sites are indexed. So a their browser or application. Front end
great mobile site is going to help you get better developers are responsible for the site's look
search results. and feel. As a front end developer, you are
responsible for looking, feeling and ultimately
Performance designing the site. This is the course focus.
 Is the objective assessment and perceived user
experience of a web site or program. This Request Layer
includes the following major areas: Reducing  is the software intermediary that allows two
overall load time: How long does it take the files applications to talk to each other. Each time you
required to render the web site to download on use an app like Facebook, send an instant
to the user's computer? message, or check the weather on your phone,
an intermediary request layer is used, i.e APIs.
Reliability
 Information on the Internet with the author is Back End
one indication of a credible website. The fact  refers to any part of a website or software
that the author is willing to stand behind the program that users do not see. It contrasts with
information presented (and, in some cases, to the frontend, which refers to a program's or
include his or her contact information) is a good website's user interface. Everything that
indication that the information is reliable. happens before the page is displayed in a web
browser is part of the backend.
Scalability
 The ability of a system, network, or process to Front End Languages
cope with increased workload when adding  HTML/CSS
resources (usually hardware). Scalability can be  Javascript
assessed by the ratio of the increase in system  Java (applets)
performance to the increase in resources used.  Javascript/HTML/CSS is the only real option for
Ability to handle concurrent users. front-end native languages and is basically the
standard. But there are many variations on
JavaScript that are used.
The Document Object Model (DOM) Types of Frameworks
 is a programming interface for web documents.  Server Side: Django, Ruby on Rails
It represents the page so that programs can  Client Side: Angular, React, Vue
change the document structure, style, and
Javascript Frameworks
content. The DOM represents the document as
 AngularJS/Angular 2
nodes and objects; that way, programming
 ASP.net
languages can interact with the page.
 React
 The DOM makes every addressable item in a
web application an OBJECT that can be  Polymer 1.0
manipulated for color, transparency, position,  Ember.js
sound and behaviors. Every HTML Tag is a DOM  Vue.js
object. The Model-View-Controller (MVC) framework
 A funnel may perfectly described the definition  is an architectural pattern that separates an
of a DOM. application into three main logical components
Web page Model, View, and Controller. MVC separates
 is a document that can be either displayed in the business logic and presentation layer from
the browser window or as the HTML source. In each other.
both cases, it is the same document but the The MVC is a Web Application Development
Document Object Model (DOM) representation Framework.
allows it to be manipulated. As an object- Model (M):
oriented representation of the web page, it can  Where the data for the DOM is stored and
be modified with a scripting language such as handled)
JavaScript.  This is where the backend connects
Web Frameworks Basics View (V):
What is a Web Framework?  Think of this like a page which is a single DOM
 is a software framework designed to help  Where changes to the page are rendered and
developers create web applications such as web displayed
services, web resources, and web APIs. Web
frameworks provide a standard way to build Control (C): This handles user input and interactions
and deploy web applications on the World Wide  Buttons
Web. Web frameworks seek to automate the  Forms
overhead associated with common web  General Interface
development activities. MVC Execution
Types of Framework Architectures  The execution of an MVC application takes
 Model-View-Controller (MVC) place when there is a certain request from the
 Push vs Pull Based client. The following diagram illustrates the flow
using Angular.
Most MVC Frameworks user push-based architecture
“action based” (Django, Ruby on Rails, Symfony, Stripes)

Three Tier Organization