c2b_default

Internet Technology (AS21)

Internet technology module at FHNW 2021, major in BIT by Devid Montecciari

Internet technology module at FHNW 2021, major in BIT by Devid Montecciari

130
0.0 (0)

Set of flashcards Details

Flashcards 130
Language English
Category Computer Science
Level University
Created / Updated 20.09.2021 / 11.01.2024
Weblink
https://card2brain.ch/box/20210920_internet_technology_as21
Embed
<iframe src="https://card2brain.ch/box/20210920_internet_technology_as21/embed" width="780" height="150" scrolling="no" frameborder="0"></iframe>
Study

What is an API?

API = application Programming Interface. An API is a set of functions used by information systems to access services and data from other information systems. 

application/client -> API Requests -> Server/ Data Source -> API Response

they serve as digital glues between apps, web, analytics and the stored data/channel partners

What kind of APIs are in the new Enterprise?

Log in to view images.

What is HTML

HTML stands for Hyper text markup language and is the standard markup language for creating web pages. it describes the structure of a web page. HTML is not case sensitive

What does the DOCTYPE declaration stand for in HTML?

<!DOCTYPE html> defines that this document is a HTML5 document

what are the following html tags?

  1. <HTML>
  2. <head>
  3. <title>
  4. <body>
  5. <h1>
  6. <p>

  1. <html> root element of an HTML page
  2. <head> contains meta information about the HTML page
  3. <title> specifies a title for the HTML page (browser title/page tab)
  4. <body> defines the docuemnt's body structure and is a container for all visible contents
  5. <h1> is a heading
  6. <p> is a paragraph

What are the default options of a HTML Link tag, describe also the target options

<a href="https//google.com" target="_blank"> link </a>

by default a link will appear as:

  • an unvisited link is underlined and blue
  • a visited link is underlined and purple
  • an active link is underlined and red

The target specifies where to open the linked document:

  • _self - Default. opens the document in the same window/tab as it was clicked
  • _blank -opens the document in a new window or tab
  • _parent - opens the document in the parent frame
  • _top - opens the document in the full body of the window

 

Describe the required fields of a image tag

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages.

The <img> tag creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The <img> tag has two required attributes:

src - Specifies the path to the image

alt - Specifies an alternate text for the image

<img src="url" alt="alternatetext">

how do you build a table in HTML? -> what elements are needed

Use the HTML <table> element to define a table

Use the HTML <tr> element to define a table row

Use the HTML <td> element to define a table data

Use the HTML <th> element to define a table heading

Use the HTML <caption> element to define a table caption

Use the colspan attribute to make a cell span many columns

Use the rowspan attribute to make a cell span many rows

Use the id attribute to uniquely define one table

What html list types are there?

  1. <ul> unordered list
  2. <ol> ordered list
  3. <li> list item
  4. <dl> description list
  5. <dt> a term in a description list
  6. <dd> the term in a description list

What is the difference between a HTML BLock and inline element?

Every HTML element has a default display value, depending on what type of element it is.

There are two display values: block and inline.

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

An inline element does not start on a new line and it only takes up as much width as necessary.

Div and Span both define a section in a document.

what are div and span elements?

the div element is often used as a container for other HTML elements, has no required attributes but style, class and id are common. 

the span element is an inline container used to mark up a part of a text, or a part of a document. no required attributes but style, class, and id are common. 

What html elements belong into the head tag?

The <head> element is a container for metadata (data about data)

The <head> element is placed between the <html> tag and the <body> tag

The <title> element is required and it defines the title of the document

The <style> element is used to define style information for a single document

The <link> tag is most often used to link to external style sheets

The <meta> element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings

The <script> element is used to define client-side JavaScripts

The <base> element specifies the base URL and/or target for all relative URLs in a page

What is SEO

Search engine optimization is a methodology of strategies, techniques and tactics used to increase the amount of visitors (traffic) to a website by obtaining a high-ranking placement in the search results page of a search engine (SERP) - including google, bing, yahoo and other search engines

what layout options are there for html tags

Log in to view images.

<header> - Defines a header for a document or a section

<nav> - Defines a set of navigation links

<section> - Defines a section in a document

<article> - Defines an independent, self-contained content

<aside> - Defines content aside from the content (like a sidebar)

<footer> - Defines a footer for a document or a section

<details> - Defines additional details that the user can open and close on demand

<summary> - Defines a heading for the <details> element

what input type options are there? give a few examples

input type="text">  Displays a single-line text input field

<input type="radio">  Displays a radio button (for selecting one of many choices)

<input type="checkbox">  Displays a checkbox (for selecting zero or more of many choices)

<input type="submit">  Displays a submit button (for submitting the form)

<input type="button">  Displays a clickable button

what does CSS mean?

Cascading style sheets. describes how html elements are to be displayed. 

p {color:red;} -> for tags nothing but the tag name

.className {color:red;} -> for classes dot and the class name

#id {color:red;} -> for id use the hashtag

can be defined with the "style" tag in the HTMLtag itself(inline) or an external link in header <link rel="stylesheet" href="stylesheet.css"> or internal by using a <style> element in the head section

describe the CSS box model from the inside to the outside

  • content- the content of the box where text and images appear
  • padding - clears an area around the content, padding is transparent
  • broader  a border goes around the padding and content
  • margin- clears an area outside the border. margin is transparent

What is Bootstrap?

Bootstrap is a free front-end-framework for faster and easier web development. it includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels as well as optional JavaScript plugins. 

Gives the possibility to easily create responsive design

What is SEO and why is it needed?

SEO is a marketing tool for brands to increase the no. of people visiting the website, thus increasing the opportunity to acquire a new customers.

  • Visibility and Ranking
    • SEO helps a webpage appear at a higher ranking in search results
    • Higher ranking results are more visible to the users
  • Web Traffic
    • No. of visitors to the page are increased
    • chances of sales are increased
  • Trust
    • higher ranked results are trusted more by the users
    • users tend to consider the top recommendations of a search engine
  • User Experience
    • leads to a well-designed and user-centric website
    • search engines can retrieve information easily
  • Growth 
    • results in increased growth

How does a search engine work? name two important components of it

Crawling 

  • internet is a network of web pages, images, videos or other files accessible through links
  • Crawling is a way to find the best path to reach these links
  • can be automatically performed through robots called crawlers/spiders
  • Stored in huge databases to be used later for providing search results

Providing most relevant results through Indexing

  • Indexing is a way to organize information such that search engines can retrieve results very fast
  • indexing makes pages available to crawlers and also provides information regarding the relevance
  • Search engines provide answers to search queries which contain keywords
  • higher the relevance of a web page to the search keywords, higher is its ranking in the search result

What are the limitations of search engines?

  1. Problems in crawling and indexing
    1. cannot complete online forms, content in forms remains hidden
    2. duplicate pages pose a problem in srawling
    3. error on websites
    4. unclear link structure in a web page
    5. content that is not text is difficult to reach
  2. problems in matching search queries to the content of the page
    1. using less common terms on web pages
    2. region-specific terms and spellings e.g. color/colour
    3. mismatch between content language and the target location of the audience
    4. mismatch between content and title of an article

Why is it so important to choose the right keywords when configuring your website?

Log in to view images.

  • Ranking for the right keywords can make or break a company's website
  • keyword research helps you to find phrases and topics which are most relevant to a business, have sufficiently high search volume, have low competition
  • the majority of keyword phrases will be less-frequent, long-tail keywords
  • the "long tail" of keyword research refers to the 80/20 rule
  • only about 20% of the keywords people search for will be popular "fat head" terms

You need to discover valuable keyword phrases and topics, find keywords with sufficient search volume (using google AdWords, google trends, ...). Then you also need to find keywords you can actually rank for, find those with high demand and low competition i.e. high search volume but less difficult for ranking. Last but not least you need to craft a complete content strategy from keyword research finding main topics and child topics, find what content users expect when searching for keyword phrases, finding which phrases lead to a purchase

What are the to dos to create a search engine friendly design and development?

  1. Use browser guidelines - Webmaster guidelines
  2. Indexable content
  3. Crawlable Link Structure
  4. Resolvable URLs
  5. Pages with a huge number of links
  6. Canonical or Duplicate Versions
  7. Keyword usage

Describe the to do to create a search engine friendly design and development for the usage of browser guidelines?

  1. Use browser guidelines - Webmaster guidelines
    1. Google, user-centric design of web pages, clear hierarchy and text links, meaningful description in <title> and ALT attributes, and human-friendly URL using keywords or keyword phrases
    2. Bing Webmaster guidelines, clean URL structure with several keywords, content and links not hidden behind rich media like Adobe Flash, Javascript and Ajax. content matching and periodically refreshed to user search and text to be indexed should not be in images

Describe the to do to create a search engine friendly design and development for the usage of indexable content?

  1. Indexable content
    1. assign all images with ALT attribute
    2. add navigation and crawlable links to search boxes
    3. Add supporting text to pages that have Flash or Java plug-ins
    4. Add transcript to audio or video content

Describe the to do to create a search engine friendly design and development for the usage of crawlable link structure?

  1. Crawlable Link Structure
    1. Lets crawler browse through the content of a website
    2. problematic when no direct links exist for pages

Describe the to do to create a search engine friendly design and development for the usage of resolvable URLs?

  1. Resolvable URLs
    1. use proper <a> tags with href attribute (href should be an actual web address)
    2. e.g. google priority of keyword placement Domain>subdomain>folder>path/page
    3. SEO tips are: use subdomains carefully. separate path&page keywords with hyphens, anchors may help (#top), keyword effectiveness in URLs decreases as URL length and keywords position increases

Describe the to do to create a search engine friendly design and development for the usage of pages with a huge number of links?

  1. Pages with a huge number of links
    1. use rel="nofollow" if a page has a huge number of links
    2. tells the search engine that a particular link should not be interpreted
    3. do not have the same weight as normal links 
    4. <a href="https://example.com" rel="nofollow">some text </a>

Describe the to do to create a search engine friendly design and development for the usage of canonical or duplicate versions?

  1. Canonical or Duplicate Versions
    1. canonicalization is a practice of organizing duplicate content such that it can be separate from the original content. 
      1. use 301(permanent)/302(temporary) redirect to the correct URL - using JavaScript or similar such redirect code. 
      2. use rel="canonical" for duplicate pages, e.g., pages created for testing. All duplicate pages have a canonical link to original page A as follows: 
      3. <head><link rel="www.widgets.com/A/" rel="canonical"/></head>
      4. configuration in google search console. 

Describe the to do to create a search engine friendly design and development for the usage of keyword usage?

  1. Keyword usage
    1. crawlable content should contain the search keyword
    2. order of words, spelling, punctuation and capitalization of keywords matter when ranking pages
    3. use <title> tag to provide a concise, accurate description of a page, it appears as clickable headline of the search results
    4. use <meta description="..."> tag to provide description of the web page
    5. avoid keyword abuse i.e., over-usage of specific keywords without relevant content
    6. avoid keyword cannibalization i.e., using keywords in link anchor text pointing to other pages on the website. 

What are Sitemaps?

  1. An easy way for webmasters to inform search engines about pages on their sites that are available for crawling
  2. Provide additional metadata about each URL (when it was last updated, how often it usually changes, and how important it is, relative to other URLs in the site)
  3. Does not guarantee that web pages are included in search engines, but provides hints for web crawlers to do a better job of crawling your site
  4. Can be defined in 3 formats:
    1. XML – Extensible Markup Language (recommended)
      • Easy for search engines to parse
      • Relatively large file size due to opening and closing tags for every element, hence sometimes compressed
    2. RSS – Really Simple Syndication or Rich site summary. 
      • Easy to maintain as can be coded to automatically update when new content is added.
      • Difficult to manage compared to XML due to its auto-updating property
    3. Txt – Text
      • Easiest to write and maintain, mention one URL per line
      • Metadata like a priority, last modified etc. cannot be added

What are must haves when you want to use sitemaps in your page?

Log in to view images.

  1. Sitemaps must:
    1.  Begin with an opening tag and end with a closing tag.
    2. Specify the namespace (protocol standard) within the tag.
    3. Include a entry for each URL, as a parent XML tag.
    4. Include a child entry for each parent tag.
  2. May use sitemap index file to group multiple sitemap files
  3. XML sitemaps can be generated using an online generator - https://www.xml -sitemaps.com/

What is a Robots.txt?

  1. A product of the Robots Exclusion Protocol, is a file stored on a website's root directory
  2. Using this file webmasters can indicate to search engines
    1. areas of a site to disallow bots from crawling
    2. locations of sitemap files
    3. crawl-delay parameters
  3. Pattern-matching using regular expressions can create complex rules to allow/disallow URLs
    1.  * is a wildcard that represents any sequence of characters
    2. $ matches the end of the URL
  4. Should not include URLs corresponding to admin or private information as robots.txt is publicly accessible

How can you use a Robots.txt?

The basic format for a complete robots.txt file (name is case-sensitive):

User-agent: [user-agend name]

Disallow: [URL string not to be crawled - only one line for each url]

Allow: [only applicable for googlebot]

Crawl-delay: [how many milliseconds to wait before loading and crawling page content]

sitemap: [used to call out the location of any XML sitemaps associated with this URL]

E.g

User-agent: Googlebot

Crawl-delay: 4

Disallow: /

Dissalow: /*.xml$

What are the robots meta tags and parameters in HTML?

head section- creates page-level instructions for search engine bots, the robot name can bei either "robots" for all robots or the user-agent of a specific crawler 

<meta name="robots" content="[PARAMETER]">

Parameter for the meta tag are

  • noindex - tells search engine not to index a page
  • index - default
  • follow - even if the page isn't indexed, the crawler should follow all the links on a page
  • nofollow - tells crawler to not follow any links on a page
  • none - equivalent to using both the noindex and nofollow tags simultaneously

How to you measure traffic on a web page?

You measure with Analytics

  1. What to measure - Metrics:
    1. Which source contributes the most traffic - direct navigation, referral links, search engine
    2. Search engine referrals – no. of search engine visits in a month
    3. Visits referred by keywords in a search engine – top referring phrases
    4. Finding keywords that converts visitors to paying customers – search query referral conversion rate
    5. Which pages receive the most traffic from at least one search engine – no. of pages receiving referrals from
  2. How to measure - Analytics softwares:
    1. Google Analytics
    2. Moz Analytics
    3. Yahoo! Web Analytics
  3. Investigate based on the results of the analytics and take appropriate measures

What is a script?

A script is a series of instructions that a computer can follow to achieve a goal

A scripting language like JavaScript provides mechanisms to manipulate information in a web browser through object-orientation

What are Objects?

Objects are the representation of real-world data and use properties, events and methods

What are properties

Properties are the characteristics of an object. e.g object hotel, properties, name, rating, rooms, bookings, gym, pool....

How are web pages interpeted?

  1. Browser receives a web page
  2. Browser creates a model and stores it in memory -> document-html-head-body....
  3. browser shows the page on screen using a rendering engine

Study