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


C. M.
This flashcard set covers advanced topics in internet technology at the university level, focusing on web protocols, server-client interactions, and application development. It delves into concepts like MVC architecture, templating, and the differences between frameworks and libraries, while also addressing security concerns such as SQL injection and broken authentication. The flashcards are particularly useful for computer science students and professionals aiming to deepen their understanding of web technologies and best practices in secure coding and application design.
Cartes-fiches
130
Utilisateurs
2
Langue
Anglais
Catégorie
Informatique
Niveau
Université
Créé / Mis à jour
20.09.2021 / 11.01.2024

Cartes-fiches

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

<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?

  • 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?

  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

How could you write "Welcome" in Java script?

document.write('Welcome");
document is the object
dot is the member operator

and write() is the method this the sting as argument

How do you add JavaScript to a page?

The code in your web document is generally loaded and executed in the order it appears on the page. if JS loads and tries to run before the HTML and CSS it is affecting has been loaded, errors can occur

There are three main ways:

  • Internal JS is ok, comes before </body>
  • External JS - best
  • inline JS handlers - NO, bad practice

are usually loaded or inserted inside the head

What are the most common rules when naming variables in java script?

  1. must begin with a letter, $ or _, must not start with a number
  2. name can contain letters, numbers, $,_ must not use - or . in a variable name
  3. cannot use keywords or reserved words
  4. all variables are case sensitive. 
  5. if name is made up of more than one word, use camel case

how do you declare a function in js?

function sayHello() {document.write('Hello');}

Describe the main feature of the browser object model in js

window.innerHeight

window.innerWidth

window.screenX

window.screenY

window.print()

  • Window
    • Document
    • History
    • Location
    • Navigator
    • Screen

Describe the document object model

document.title

document.lastModified

document.write()

document.getElementById()

  • document
    • html
      • head
        • title
      • body
        • div

how do you use comparison operators  in js?

  • == compares two values to see if they are the same
  • != compares two values to see if they are not the same
  • === is preferable to == as it compares two values to check both the data type and the value are same
  • !== is preferable to != as it compares two values to check both the data type and the value are not same

What is an anonymous function in js?

a function without a name. used for code that only needs to run once within a task, rather than repeatedly being called by other parts of the script. 
can also be used as a function expression and stored in a variable or immediately invoked function jus start with (function...)

 

setTimeout(function() {
console.log('execute later after 1 second')
},1000);

Étudier