szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:hálózat|< Hálózat]]

====== Böngészés ======


  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2011, 2013, 2014, 2015
  * Licenc: GNU Free Documentation License 1.3
  * Web: http://szit.hu

===== Bevezetés =====

Manapság a legnépszerűbb Internetes szolgáltatás a web. A népszerűségének köszönhetően,
persze van aki nem is tudja, hogy ez nem egyenlő az Internettel, a weben kívül is nagyon
sok szolgáltatás van. Az Interneten az első évtizedekben nyoma sem volt a webnek. Csak 1990-ben
találta ki Tim Berners Lee a webes megjelenést és a hozzátartozó infrastruktúrát. 

A webes tartalmat http protokollon szolgálják ki számunkra a
webszerverek. A webszerver a 80-as porton várja a böngészők kéréseit. 
Ha titkosított csatornát használunk, az elérés SSL/TLS protokollon
keresztül történik. A http adatforgalmat ilyenkor egy titkosított csatornán 
keresztül folytatjuk. Ekkor egyszerűen https protokollról beszélünk. 


===== Fogalmak =====


  - web
    - HTML oldalak összessége
  - webhely
    - egy tárhelyen, az összetartozó HTML oldalak
  - port
    - egy számítógépen egy szolgáltatás, egy folyamat azonosítószáma
  - protokoll
    - a hálózati átvitel szabályai
  - http
    - a weboldalak kiszolgálására ezen a protokollon keresztül történik.
  - SSL
    - Secure Socket Layer - Titkosíthatunk vele bármilyen hálózati forgalmat
  - TLS
    - Transport Layer Security - Titkosíthatunk vele bármilyen hálózati forgalmat, az SSL forkja
  - https 
    - Ha a HTTP forgalmat SSL-en keresztül biztosítjuk akkor szokás HTTPS-ről beszélni.
  - Magnet URI
    - A tartalmat nem az elérési út alapján érjük el. Helyett egy kriptográfiai hash függvénnyel gyártott URL-t használunk.


===== Böngészők =====

Az első böngésző, amit Tim Berners-Lee létrehozott a WorldWideWeb nevű
program volt. Ezt később átkeresztelték Nexus névre. A programot
Objective-C nyelven készítette.

A következő ábrán a népszerűbb böngészőket helyezhetjük időrendi sorrendbe.


{{:oktatas:hálózat:bongeszok_tortenet.png|}}



^   Böngésző  ^  Első kiadás  ^  Alapja  ^  Programozási nyelv  ^  Platform  ^
|  [[https://www.mozilla.org/hu/firefox/|Firefox]]  |  2002  |  Mozilla  |  C++, JavaScript, C, CSS, XUL, XBL | Windows, OS X, Linux, Android, \\ iOS, Firefox OS \\ (nem hivatalos BSDs, \\ solaris/Open Solaris, IBM AIX, \\ HP-UX & UnixWare  |
|  [[https://www.google.com/chrome/|Chrome]]  |  2008  | |  C++  |  Android, iOS, \\ Linux, OS X, Windows  |
|  [[https://www.chromium.org/|Chromium]]  |  2008  |  Chrome  |  C++  |  cross  |
|  Internet Exploler |  |  Mosaic  |  C++  |
|  [[http://www.opera.com/|Opera]]  |  1995  |  |  C++  |  Windows, OS X, Linux  |
|  [[https://www.vivaldi.com/|Vivaldi]]  |  2015  |  Opera  |  C++  |  Windows, OS X, Linux  |
|  [[http://www.palemoon.org/|Pale Moon]]  |  2009  |  Firefox  |  C, C++  |  Windows, Linux, OS X |
|  [[http://w3m.sourceforge.net/|w3m]] (konzolos)  |  1995  |  |  C  |  OS/2, Unix & Unix-like \\ (Solaris, SunOS, HP-UX, \\ Linux, FreeBSD and EWS-UX \\ (EWS-4800), Windows  |
|  [[http://links.twibright.com/|links]] (konzolos)  |  1999  |  |  C  | Windows, OS X, \\ OS/2, Unix-like, \\ OpenVMS, DOS  |
|  [[http://lynx.isc.org/|lynx]] (konzolos)  |  1992  |  |  C  |
|  [[http://www.konqueror.org/|Konqueror]]  |  1996  |  |  C++  | Unix szerű és Win  |
|  [[https://browser.comodo.com/|Comodo Dragon]]  |  |  Chromium  |  |  Windows  |
|  Safari  |  2003  |  Konqueror  |  C++, Objective-C  |  OS X, iOS  |
|  [[https://wiki.gnome.org/Apps/Web|Web]] (korábban Epiphany)  |  2003  |  |  C  |  Linux  |
|  [[https://github.com/Eloston/ungoogled-chromium|Ungoogled-Chromium]]  |  2012  |  Chromium  |  |  |

===== Könyvjelző =====

Könyvjelzőbe vagy kedvencekbe azokat a linkeket tehetjük, amelyeket
később is megszeretnénk látogatni, így szeretnénk ezeket a linkeket tárolni.

==== Firefox ====

Hozzáadás a könyvjelzőhöz:
| Könyvjelzők | -> | Oldal hozzáadása a könyvjelzőkhöz |


Könyvjelzők exportálása:
| Könyvjelzők | -> | Minden könyvjelző megjelenítése | -> | Importálás és mentés | -> | Könyvjelzők exportálása HTML-be... |

==== Chrome ====

Hozzáadás a könyvjelzőhöz:
| A címsorban lévő ikonok közül az utolsó csillag alakúra kattintok.  |


Könyvjelzők exportálása:
| A címsor után, az utolsó ikonra (Beállítások) kattintok  |

A legördülő menüben:
|  Könyvjelzők | -> | Könyvjelző-kezelő |

Az előugró felületen:
| Rendezés | -> | Könyvjelzők exportálása HTML-fájlba... |

===== Felhasználói stílus =====

Létre kell hozni a chrome könyvtárat a Firefox profilkönyvtárban.

Linux alatt: 
  ~/.mozilla/firefox/mwad0hks.default/chrome

A css fájlt nevezzük el a következő néven:
  * userContent.css
 
Indítsuk újra a Firefoxot.


==== CSS tartományhoz ====


<code css>
userContent.css
@-moz-document domain(tatomanynev.toplevelnev) {

  /* ide jönnek a beállítások*/
}
</code>

Példa:
<code css>
@-moz-document domain(valahol.hu) {
body { 
    font-size: 44px; 
}
}
</code>

További lehetőségek

<code css>
@-moz-document domain(valahol.hu) {
#navigation ul.ajs-menu-bar:hover {
  opacity: 1.0 !important;
}
#navigation ul.ajs-menu-bar {
  opacity: 0.6 !important;
}
#browse-menu-link {
  opacity: 0.6 !important;
}
#browse-menu-link:hover {
  opacity: 1 !important;
}
.page-metadata {
  opacity: 0.6 !important;
}
.page-metadata:hover {
  opacity: 1.0 !important;
}
}
</code>

===== Interaktív weblapok =====

Interaktív weblapról beszélünk ha a webszerver is valamilyen információkat
vár a böngésző használójától. Az ilyen információt jellemzően úgynevezett 
űrlapon keresztül kérik be a weblapok. Ilyen űrlapra példa, amikor felhasználónevet
és jelszót kérünk be. 



<html>
<div id="interaktwebl1" style="border-color: navy; border-style: solid; border-width: 1px; padding: 10px; display: inline; margin: 2%;">
<form>
Felhasználónév: <input type="text" />
Jelszó: <input type="passwd" />
<input type="submit" value="Bejelentkezés" />
</form>
</div>
</html>


Vagy regisztrációhoz bekérünk adatokat:

<html>

<div id="interaktivwebl2" style="border-color: navy; border-style: solid; border-width: 1px; padding: 10px; margin: 2%; float:left;">

<form>

<table>
<tr><td>Teljesnév:</td><td> <input type="text" /></td></tr>
<tr><td>Település:</td><td> <input type="text" /></td></tr>
<tr><td>Cím:</td><td> <input type="text" /></td></tr>
<tr><td>Telefonszám:</td><td><input type="text" /></td></tr>
</table>
<input type="submit" value="Regisztrál" />

</form>
</div>

</html>

===== Captcha =====

Kiejtve [ˈkæptʃə]

Egy teszt, amelynek célja, hogy megkülönböztessük az embert a számítógéptől. 

A **C**ompletely **A**utomated **P**ublic **T**uring test to tell **C**omputers and **H**umans **A**part
rövdítése, amely így fordítható:Teljesen automatizált nyilvános Turing-teszt
a számítógép és az ember megkülönböztetésére.

A számítógép generál egy feladványt, amelyet az ember képes csak megfejteni,
de ő maga le tudja ellenőrizni a helyességét. 

Általában valamilyen eltorzított szöveget kell elolvasni, amely a számítógépek
segítségével elég nehéz lehet egy jól megrajzolt captcha kódnál.


{{http://upload.wikimedia.org/wikipedia/commons/b/b6/Modern-captcha.jpg}}


Hasznos lehet, ha szeretnénk elérni, hogy egy regisztrációs felületen ne legyen
képes regisztrálni egy program (bot), csak élő ember. 

A reCAPTCHA egy Google captcha megoldása, ahol a csak egyet kell kattintani. 
A reCAPTCHA pedig azt figyeli, hogy az emberre jellemző egér, billentyűzet, stb.
események voltak-e. Ha igen, akkor elfogadjuk.

===== Sütik =====

Süti vagy Cookie. A webprogramozók néha sütiket helyeznek
a felhasználó böngészőjében. A sütikben különböző információk 
nyilvántartása lehetséges.

Sütik megtekintése Firefoxban:
  * Beállítások -> Adatvédelem -> eltávolítani az egyes sütiket

===== Hatékony beállítások =====

Firefox:
  about:config
Chrome:
  chrome://flags/
Opera:
  opera:config
Vivaldi:
  vivaldi://flags


===== HTTP protokoll =====

<code>
telnet egressy.eu 80
Trying 195.228.1.150...
Connected to egressy.eu.
Escape character is '^]'.
GET / HTTP/1.0<Enter>
<Enter>
</code>
Ez után megkapjuk a weblapot.


A szerver eldobja a kapcsolatot ha tétlenek vagyunk egy ideig:
<code>
Connection closed by foreign host.
</code>


Csak a fejléc lekérése:
<code>
HEAD / HTTP/1.0

HTTP/1.1 200 OK
Date: Fri, 10 May 2013 05:38:56 GMT
Server: Apache/2.2.15 (Red Hat)
X-Powered-By: PHP/5.3.3
Connection: close
Content-Type: text/html; charset=utf-8

</code>

===== Keresődomainek kikapcsolása =====

Csak Firefox:

  about:config


Keressük meg a következő tulajdonságot:
  privacy.trackingprotection.enabled > true

Állítsuk true értékre.


A Firefox megakadályozza, hogy egy weblap meglátogatásakor az ismert
keresődomainekhez is kapcsolódjon egyben. 

===== Fordító =====

A Google fordító hasznos dolog. Az ImTranslator viszont a böngészőben 
kijelölt szöveget egyetlen kattintásra fordítja. A ImTranslator
tulajdonképpen egy böngésző plugin. 

  * http://imtranslator.net/

Firefox és Chrome böngészőkben is használható. Ha szavak fordításához használjuk,
praktikus tanulói eszköz. Ha egész szövegrészeket jelölünk ki, akkor
gyors segítség az értelmezéshez.
===== Fb törlés =====

  * http://www.hogyankell.hu/Facebook-fi%C3%B3kot_t%C3%B6r%C3%B6lni
===== SSL =====

Ha a protokoll, amit használunk https, akkor valójában a HTTP forgalom SSL protokollon 
keresztül működik. Adataink titkosítva vannak.

A weboldal rendelkezk egy X.509-es digitális tanúsítvánnyal, amelynek
érvényességét a böngészőnk figyeli. 

Az OCSP protokoll az Online Certificate Status Protocol rövidítése. 
Segítségével lekérdezhető egy X.509 digitális tanúsítvány állapota. 

===== Google Chrome =====

A Google Chrome belső feladatkezelője, weblap-kezelője:
  * Google Chrome vezérlő ikon -> További eszközök -> Feladatkezelő
  * Shift + Esc
===== Reklám blokkolók =====

  * uBlock Origin
  * uMatrix


===== Linkek =====

  * https://upload.wikimedia.org/wikipedia/commons/7/74/Timeline_of_web_browsers.svg (Böngészők)
  * https://en.wikipedia.org/wiki/Web_browser
  * [[https://upload.wikimedia.org/wikipedia/commons/8/86/Usage_share_of_web_browsers_%28Source_StatCounter%29.svg|Böngészőhasználat]]
  * https://www.youtube.com/watch?v=jtBlvutR9cU (Böngészőhasználat videó)
  * http://www.blooberry.com/indexdot/history/browsers.htm
  * https://hu.wikipedia.org/wiki/B%C3%B6ng%C3%A9sz%C5%91motorok_list%C3%A1ja (Böngészőmotorok)
  * https://github.com/Eloston/ungoogled-chromium
    * https://ungoogled-software.github.io/ungoogled-chromium-binaries/