Webové prohlížeče

Vzhled webových stránek ve zvolených prohlížečích (veřejné statistiky) si můžete nechat zkontrolovat automaticky pomocí on-line služeb. Bližší informace o nástrojích na testování a kontrolu webových stránek viz Mobilní zařízení.

Implementaci webových standardů v internetových prohlížečích je možné zkontrolovat pomocí Acid Tests a HTML5 test.

Mozilla FireFox ( )

• neumožňuje ukládat hesla mimo prohlížeč
• náročný na operační paměť
• podrobnější informace viz FireFox

Google Chrome ( )

• neumožňuje ukládat hesla mimo prohlížeč
• založeno na jádře QtWebKit
• rychlý prohlížeč (zejména JavaScript)
• nízké systémové nároky
• velká pracovní plocha
• inteligentní adresní řádek
• Ctrl+Shift+N nové okno v "anonymním módu"
• samostatné procesy pro jednotlivé záložky
  • vyšší bezpečnost (odcizení session ID)
  • možnost být v jednom prohlížeči přihlášený i nepřihlášený uživatel (testování webů)
• nástroje pro tvůrce webu
• nelze zakázat odesílání informací o způsobu používání prohlížeče
• i při ukončení prohlížeče neustále na pozadí běží proces "Google update"
• nejde vypnout JavaScript
• nepodporuje RSS
• nástroje pro vývojáře
  • mobilní zařízení
  • experimentální nástroje:
    1. do URL napište: chrome://flags/#enable-devtools-experiments
    2. zvolte Nastavení, Experimenty
    3. stiskněte 6x Shift (zpřístupnění "skrytých" experimentálních nástrojů)
    4. povolte: Filmstrip in Network and Timeline Panel
       • v sekci Network se zobrazí ikona "kamery"
       • v horní části sekce Network zaškrtněte: Disable cache
       • znovu načtěte stránku (CTRL + R)
• rozšíření
  • Lorem Ipsum – generátor náhodného textu
  • Type-ahead-find
  • Emmet Re:view
  • Auto-Translate
    • v nastavení odškrtněte volbu "Use price comparison and coupons..."
  • TransOver | Instant Translate | 1 Click Translator | Dynamic Language Tool | Google Dictionary | Překladač Google | Right Click and Translate
  • IP Whois & Flags Chrome & Websites Rating | RozšířeníIP Address and Domain Information
  • HTML5 Outliner
  • Full Page Screen Capture
  • LivePage | Tincr
  • Wappalyzer
  • Web Developer | Developer Tools
  • Window Resizer
  • User CSS
  • ColorZilla
  • The Great Suspender
  • Firebug Lite for Google Chrome
  • Drupal for Chrome
  • Drupal Template Helper
• Spuštěním aplikace s parametrem --purge-memory-buttonse v Task Manažeru zobrazí tlačítko na ruční vyprázdnění paměti 

Nastevení

• Chromium Možnosti
  • Základy
    • Při spuštění, Znovu otevřít stránky, které byly otevřené naposledy
  • Pod pokličkou
    • Nastavení obsahu, Soubory Cookie, Při zavření prohlížeče vymazat soubory cookie a jiná data webů
    • Stahování, Před stažením se vždy zeptat na místo uložení každého souboru

Opera ( )

• neumožňuje ukládat hesla mimo prohlížeč
  • hesla jsou uložena v nečitelné formě v souboru wand ale je možné je zobrazit např. pomocí aplikace OperaPassView 
• nejpropracovanější gesta myší
• uzavřenost
• výkon
• bezpečnost
• rozšíření nejsou od "neznámých" autorů a 3. stran
• integrovaný e-mailový klient
• kontrola pravopisu (čeština, slovenština)
• "Turbo" režim komprimující obsah stránek na pomalejších linkách
• Developer console (CSS, show rules) – nástroje pro vývojáře webu
• uložená stránka je opravdu kompletní včetně obrázků připojených pomocí CSS 

Arora ( )

• neumožňuje ukládat hesla vůbec 
• založeno na jádře QtWebKit
• inteligentní adresní řádek
• soukromý mód
• WebInspector – nástroje pro vývojáře webu

Internet Explorer

• je součástí operačního systému Windows
• neumožňuje ukládat hesla mimo prohlížeč 
• Rozšíření IE Developer Toolbar
• Různé verze IE současně v jednom operačním systému:
  • IETester (IE5.5 až IE9)
  • Internet Explorer Collection (IE1 až IE8)
  • Multiple versions of IE (IE3 až IE6)
    • vývoj projektu skončil v roce 2006
• IE8
  • soukromý mód (služba InPrivate)
  • inteligentní adresní řádek
  • barevné seskupování záložek
  • akcelerátory
    • slovník pro překlad označeného textu
    • zeměpisné údaje – zobrazení polohy na mapě
  • antiphisingový a antimalwarový filter
  • Developer Tools (F12)
• Google Chrome Frame (podpora jen do ledna 2014) – zpřístupňuje otevřené webové technologie např. HTML5
  • příklad zpřístupnění posledního dostupného Internet Explorer módu, případně Google Chrom Frame
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    • hodnota IE=edge není IE týmem doporučena a může v budoucnu způsobit neočekávané chování
    • hodnota chrome=1 "inicializuje" Google Chrome Frame (pokud je nainstalován) – podpora jen do ledna 2014 !!!

Konqueror ( )

• umožňuje ukládat hesla do šifrované peněženky
• podrobnější informace viz Konqueror

Apple Safari ( )

• umožňuje ukládat hesla do šifrované peněženky
• uložení a obnova záložek
  • příkaz History, Reopen All Windows from Last Session
• nástroje pro webové vývojáře
• Safari Features (en)
• rozšíření:
  • Glims
    • psaním vyhledávat text na stránce (Type-ahead searching, Find-as-you-type)
    • obnova záložek a oken prohlížeče
    • Tabs Misc.
      • Set minimum tab labels size to favicon size
      • Position New Tab: at the right of the current tab
  • Safari Tab Reloader – automatická obnova obsahu záložky
  • Type-To-Navigate - psaním vyhledávat text na stránce (Type-ahead searching, Find-as-you-type)
  • Invisible Status Bar – zobrazení URL pouze při najetí myší na odkaz
  • Saft
    • cena 15 $ 
    • psaním vyhledávat text na stránce (Type-ahead searching, Find-as-you-type)
    • obnova záložek a oken prohlížeče
  • SafariStand
    • obnova záložek a oken prohlížeče (neobnovuje jejich velikost a polohu)
    • editace HTML zdroje
    • ukládání YouTube videa
  • SafariRestore – obnova záložek a oken prohlížeče
  • SafariTabs
    • obnova záložek a oken prohlížeče (neobnovuje jejich velikost a polohu)
  • SafariRestore
    • obnova záložek a oken prohlížeče (neobnovuje jejich velikost a polohu)
  • Tabs
    • obnova záložek a oken prohlížeče (neobnovuje jejich velikost a polohu)
  • Acid Search
    • psaním vyhledávat text na stránce (Type-ahead searching, Find-as-you-type)
  • Fiwt
    • psaním vyhledávat text na stránce (Type-ahead searching, Find-as-you-type)

Camino ()

Maxthon

FlashPeak

Flock

Avant

GreenBrowser

Sleipnir

K-Meleon

Netscape

• podpora ukončena 1. 3. 2008

 

Mobilní zařízení

Vzhled webových stránek je vhodné otestovat i v mobilních zařízeních. Pro testy je možné využít např.:

• vanamco.com/ghostlab (49 $) – synchronized testing for web and mobile enlightened
• crossbrowsertesting.com (30 $/mo) – cross browser test your website in dozens of browsers with instant results
• browserstack.com (39 $/mo) – Live, Web-Based Browser Testing
  • browserstack.com/screenshots (zdarma) 
  • browserstack.com/responsive (zdarma) 
• testiphone.com (mezerník přepíná mezi horizontálním a vertikálním zobrazením viz Tips and Options na stránce Test iPhone)
• mattkersley.com/responsive – Responsive Design Testing
• responsinator.com – rychlý náhled (iPhone, Crappy Android, Samsung Galaxy, iPad, Kindle)
• browsershots.org – náhledy
• Google Chrome
  • Plugin Window Resizer
• Firefox
  • Web Developer, Velikost Okna, Zobrazit responzivní layouty
  • Plugin Web Developer Toolbar Button (pložka menu: Responzivní design) - nemění velikost okna prohlížeče 

Retina displej

Možnosti jak testovat "Retina web ready" bez Retina displeje:

• Opera Mobile Emulator (Mac, Linux, Windows) 
• Součástí aplikace XCode je nástroj Quartz Debug a iOS Simulator (Mac)
• Firefox
  • V "about:config" najděte "layout.css.devPixelsPerPx" a změnte na hodnotu "1" (normal), "2" (retina) atd.
    • výhoda: reaguje na Media Queries
• Do CSS přidejte (Safari, Chrome, Firefox, IE???)

  • body {
      zoom: 200%;
      -moz-transform: scale(2);
      -moz-transform-origin: 0 0;
    }

  • nevýhoda: v Media Queries je nutné dočasně přepnout "pixel ratio" na 1
• Použijte JavaScript Web Retina Emulator
  • nevýhoda: nespouští Media Queries

Bezpečnost

• Postup na vyčištění napadených webových stránek
• Sucuri SiteCheck – Free Website Malware Scanner