Assignments 1-3 Flashcards
What is a mobile platform? Give two examples.
A mobile platform refers to the combination of hardware, software, as well as middleware.
Examples: Android, iOS.
What do we mean by mobile web? Is that a separate web from the World Wide Web (WWW)?
Mobile web is the way of accessing and interacting with the WWW using mobile devices, e.g, smartphones and tablets. It is not a separate web from the WWW. Instead, the term emphasizes accessing the same WWW through smaller screens and touch-based interfaces on mobile devices.
What are some differences between developing web-based applications and services for mobile platforms versus desktop ones? Mention 5 items.
Developing for mobile platforms vs desktop:
1. Slower networks and higher latencies.
2. Slower hardware and less available memory.
3. Different browsing experience.
4. Different user contexts.
5. Different browser behavior (e.g., only the current tab is active and running effectively).
6. Mobile browsers’ heterogeneity.
What is an emulator? How can it be useful for mobile web programming?
An emulator is a piece of software that translates compiled code from an original architecture to the platform where it is running. It allows running an OS and its native applications on another OS.
In the context of mobile web development, emulator is a desktop application that emulates a mobile platform (device hardware and OS). The mobile browser and OS are not aware of the emulator. Hence, the same code can be executed. Emulators allow the testing of web applications and performance analysis in a cost-effective and fast manner since you do not need to deploy the app on actual platforms.
What is RESS? Discuss the two components in RESS focusing on improving mobile web development.
RESS stands for Responsive Web Design (RWD) and Server-Side Adaptation (RESS). It aims to provide the best of two worlds.
In this approach, our web application first decides on the server side about how to adapt to the client’s mobile platform (e.g., screen size). This is the server-side adaptation component.
Then it makes final adjustments on the client side. This is the client-side adaptation component to support RWD.
What are the meta tag and viewport? How can you use those in your HTML file to design a mobile-optimized site? Write a sample markup.
For mobile friendly websites, check the meta tags, such as the viewport meta tag.
The browser’s viewport is the area of the window in which web content can be seen.
<head>
meta
name="viewport" content="width=device-width, initial-scale=1" />
</head>
What are the main sections of an HTML document body? Discuss those sections.
- Header: The header should be as simple as possible, using an h1 title or a logo or company banner.
- Main navigation: The main navigation should consist of no more than 5 main links, ordered by likelihood of use in a mobile context.
- Content: Whatever you think is important and useful. Keep it concise.
- Footer: The footer should include very brief copyright information, a home link, a back link, and
optionally other related links (such as “go to top).
List the tags for creating a table in HTML.
<table> for the table
<tr> for the table’s rows
<td> for the data cells
<thead> for the table header
<tfoot> for the table footer
</tfoot></thead></td></tr></table>
How do you create a link to another web page in HTML? What is HTML fallback?
<a href=”http://www.example.com”>Example</a>
We should have a fallback mechanism for cases in which a client’s browser doesn’t support one of our (advanced) HTML tags, such as the progress tag. Browsers often ignore what they cannot understand or render.
<progress> 32%
<img></img>
Progress 32%
</progress>
If a browser supports the progress tag, it will ignore the child elements. However, if a browser does NOT support the progress tag, it will ignore the progress tag and only render the child elements
Write a sample HTML document to
show how to use the HTML Viewport meta tag to support mobile and desktop browsers.
Sample HTML document:
<!DOCTYPE html>
<html>
<head>
<meta></meta>
<title>Sample HTML Document</title>
</head>
<body>
<h1>Sample Page</h1>
<p>This is a paragraph</p>
</body>
</html>
Which one should be avoided as much as possible, vertical or horizontal scrolling?
Horizontal scrolling should be avoided because it negatively impacts the User Experience
Write a sample HTML document showing how to embed a video into your markup.
<!DOCTYPE html>
<html>
<head>
<title>Embedded Video</title>
</head>
<body>
<h1>Sample Embedded Video</h1>
<video>
<source></source>
Your browser does not support the video tag.
</video>
</body>
</html>
What is the first option for including CSS to enable styling for an HTML document?
- Style attributes inside of tags:
It should be avoided as far as possible since it is not an efficient and scalable way of managing
your styling.
Example:
<h1>This is a header</h1>
<p>This is a paragraph.</p>
What is the second option for including CSS to enable styling for an HTML document?
- Style tags inside of the (X)HTML markup
-Use if your website is a one-page HTML document or if your homepage is very different from your other pages.
- Include CSS in the <style> HTML tag inside of the <head> part (not <body>).
- Typically faster than having external CSS files.</style>
Example:
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}</style>What is the third option for including CSS to enable styling for an HTML document?
3.External stylesheet files (.css): In almost all other cases besides what we discussed above, this is the best option. In this case, you should reference the stylesheet (i.e., .css file) in the head part of your HTML document.
Example:
<head>
<link></link>
</head>
Put the following in mystyle.css:
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
Explain the use cases for the HTML media attribute and media queries. Which one is typically preferred?
- The HTML media attribute is used for changing the design and layout of a website on different devices. This allows for more than one stylesheet for the same HTML document or one stylesheet with different definitions on different types of media.
- Media queries are also used for changing the design and layout of a website on different devices. This introduces conditions about different properties, such as screen size and orientation.
- Media queries are preferred as media attributes, specifically the
media=”handheld” attribute, is deprecated on many modern devices.
Why do we need HTML for mobile web development?
- HTML (HyperText Markup Language) is the standard markup language for documents to be shown in a web browser. This way, we can specify the content that should be rendered by the web browser on the client’s side.
Why do we need CSS for mobile web development?
- CSS (Cascading Style Sheets) is the standard style sheet language for specifying the styling of HTML/XML pages.
How does AJAX help in mobile development?
- AJAX (Asynchronous JavaScript and XML), which currently often uses JSON instead of XML, is a set of client-set web technologies for asynchronous web pages and web applications. The asynchrony is achieved by decoupling the data interchange layer and the presentation later. Hence, reloading the entire page is unnecessary once something changes.
What is MIME Type?
- MIME (Multipurpose Internet Mail Extension) Type is a String sent by the server to inform the client’s browser about the format of the document. Examples include text/css, text/html, video/mp4, image/jpeg, etc.
What is DOCTYPE?
- DOCTYPE is the first line in the HTML file: <!DOCTYPE html> tag.
What is boilerplate?
- A Boilerplate is a template that contains sections of the code that will be (re)used in many places with little or no change.
Make code to include an image as a background in a CSS file.
<style>
.body {
background-image: url('img_girl.jpg');
}</style>Write a sample markup of using media queries.
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
What is XHTML?
Extensible HyperText Markup Language, extends versions of the widely used HyperText Markup Language
What is the World Wide Web (WWW)?
A global information system that allows content sharing based on the Hypertext Transfer Protocol (HTTP)
What is the name of the standard for the JavaScript language?
ECMAScript standard by ECMA International.
Name other scripting languages that conform to this standard.
JScript (Microsoft), ActionScript (Adobe).
