Tutorial 08
1. What are the main elements of client-side application components of distributed systems?
•Distributed systems use client-side elements for users to interact with •These client-side elements include
•Views – what users see (mainly GUIs)
•Controllers – contain event handlers for the Views
•Client-model – Business logic and data
2. Discuss the Views development technologies for the browser-based client-components of web-based applications
•Content – HTML
• Formatting – CSS
3. Discuss the Controller development technologies for the browser-based client-components of web-based applications
HTML, CSS, JavaScript and server-side technologies such as PHP, ASP,.Net, C#, Python, etc.
as well as a database to store and retrieve information from
(MySQL, Oracle, SQL
4. Discuss the client-Model development technologies for the browser-based clientcomponents of web-based applications
5. Explain different categories of elements in HTML, proving examples for their use
- Block Elements. Block elements appear on the screen as if they have a linebreak before and after them. ...
- Inline Elements. ...
- Grouping HTML Elements. ...
- The <div> tag. ...
- The <span> tag
- A text header, denoted using the <h1> , <h2> , <h3> , <h4> , <h5> , <h6> tags.
- A paragraph, denoted using the <p> tag.
- A horizontal ruler, denoted using the <hr> tag.
- A link, denoted using the <a> (anchor) tag.
- •Structural elements
- • header, footer, nav, aside, article
Text elements
- Headings
- Paragraph –
- Line break -
- Images
- Hyperlinks
Data representational elements (these elements use
nested structures)
nested structures)
- • Lists
- • Tables
- • Form elements
- • Input
- • Radio buttons, checkboxes
- • Buttons
6. Discuss the importance of CSS, indicating new features of CSS3
Cascading Style Sheets or CSS are an important way to control how your Web pages look. CSS can control the fonts, text, colors, backgrounds, margins, and layout. But it can be very difficult to learn CSS, and some people would rather not learn it.
Used to
• Decorate / Format content
•Advantages
• Reduce HTML formatting tags
• Easy modification
• Save a lot of work and time
• Faster loading
Some formatting categories
Positioning
Size
Alignment
Font / Text
Color / Background / Border
7. Compare and contrast the 3 main types of CSS selectors
•Element selector
•ID selector
•Class selector
8. Discuss the advanced CSS selectors, explaining the specificity
CSS is one of the most powerful tools that are available to web designers (if not the most powerful). With it, we can completely transform the look of a website in just a couple of minutes, and without even having to touch the markup. But despite the fact that we are all well aware of its usefulness, CSS selectors are still not used to their full potential and we sometimes have the tendency to litter our HTML with excessive and unnecessary classes and ids, divs and spans.
9. Explain the use for CSS media queries in responsive web development
Media query is a CSS technique introduced in CSS3.
It uses the rule
@media to include a block of CSS properties only if a certain condition is true.
example:
@media only screen and (max-width: 600px) {
body {background-color: lightblue;
}}
10. Identify the pros and cons of 3 ways of using CSS (inline, internal, external)
Internal CSS
Advantages of Internal CSS:
- Only one page is affected by stylesheet.
- Classes and IDs can be used by internal stylesheet.
- There is no need to upload multiple files. HTML and CSS can be in the same file.
Disadvantages of Internal CSS:
- Increased page loading time.
- It affects only one page – not useful if you want to use the same CSS on multiple documents
Advantages of External CSS:
- The smaller size of HTML pages and cleaner structure.
- Faster loading speed.
- Same .css file can be used on multiple pages.
Disadvantages of External CSS:
- Until external CSS is loaded, the page may not be rendered correctly.
Advantages of Inline CSS:
- Useful if you want to test and preview changes.
- Useful for quick-fixes.
- Lower HTTP requests.
Disadvantages of Inline CSS:
- Inline CSS must be applied to every element
11. Identify frameworks/libraries/plugins/tools to develop the Views/web pages, and discuss their similarities and differences
They dynamically generate HTML+CSS code
•In server and/or client-side
•May have JS-based advanced interactive features
• jQuery – A JS library, but can be seen a framework too. It
wraps the complexity of pure JS. There are lots of JS
frameworks, libraries, and plugins built using jQuery. Good for
DOM processing.
• jQuery UI – Focus on GUI development
• Bootstrap – to rapidly design and develop responsive web
pages and templates
• Angular – a JS framework/platform to build frontend
applications
• React – a JavaScript library for building user interfaces (and
the application, which uses that UI)
Pros:
- small distribution size
- the shallow learning curve, considerable online help
- concise syntax
- easy to extend
Cons:
- adds a speed overhead to native APIs
- less essential now that browser compatibility has improved
- usage has flat-lined
- some industry backlash against the unnecessary use
•Browser-based clients’ components comprise two main aspects
•Controllers
•Client-model
•The components of browser-based clients are developed using JS/JS-based frameworks, libraries, and plugins.
Main features of the client-side component
development tools
•DOM processing (dynamic content generation, change, removal)
•Data processing
•Data persistence
•Session management (cookies)
•Communicating (with server components)
13. Discuss the new features in JS version 6
- JavaScript
let - JavaScript
const - Exponentiation (
**) (EcmaScript 2016) - Default parameter values
Array.find()Array.findIndex()
14. Identify frameworks/libraries/plugins/tools to develop the client-side components of browser-based applications, and discuss their similarities and differences
No comments:
Post a Comment