Vývojové prostředí | SWO
Správa webového obsahu – CMS

Úspěšný web

Desktop Vývojové prostředí

Přehled doporučených aplikací a nástrojů

Webový prohlížeč

Stitistiky: gs.statcounter.com, ranking.gemius.com/cz, browserl.ist.

  1. Google Chrome
    • Privacy Badger – ochrana soukromí
    • TransOver – překladač
    • Emmet Re:view – kontrola responzivního vzhledu
    • Checkbot: SEO, Web Speed & Security Tester – kontrola webu
    • Lighthouse – analýza stránky
    • CSS Peeper – přehled pro návrháře (font, barvy, export)
    • IP Whois & Flags Chrome & Websites Rating – síťové informace
    • Wappalyzer – identifikace použitých technologií
    • WhatFont – detekce fontu
    • Snímek celé stránky:
    • Kontrola zarovnání prvků:
      • Settings (Ozubené kolečko) -> Elements
        • Show rules on hover: Ano
      • Na kartě Elements zvolte požadovaný prvek (zobrazí se kolem prvku vodítka a pravítka)
    • Detekce nepoužívaných CSS/JS:
      1. Na záložce Sources zvolte požadovaný CSS/JS soubor
      2. Stisknutím Esc zobrazte ve spodní části Drawer
        1. V nabídce 3 tečky aktivujte záložku Coverage
        2. Obnovte stránku příslušným tlačítkem nebo klávesou F5
        3. Zvolte požadovaný soubor (v horní části uvidíte červeně zvýrazněné nepoužívané CSS/JS)
    • Ladění tiskového výstupu:
      • DevTool -> More tools -> Rendering -> Emulate CSS media -> Print
    • Kontrola kvality:
      • DevTool -> Audits
  2. Safari (macOS)
  3. Mozilla Firefox
  4. Internet Explorer (Windows)
  5. Edge (Windows)

Editor

Aplikace určená k vytváření webových stránek, poskytující řadu podpůrných nástrojů a funkcí usnadňující tvorbu webu.

Textový editor (editor prostého textu):

  • Vi (Linux)
  • Vim (Linux)
  • Notepad (Windows)
  • Notepad++ (Windows)
  • PSPad (Windows)
  • Brackets (zdarma, multiplatformní)
    • České prostředí
    • Vzhled (denní/noční režim)
    • Rychlá editace barev a CSS Ctrl+E
    • Hromadná editace
    • Živý náhled se zpětnou vazbou
    • Automatické cesty k adresářům a souborům
    • Rychlý náhled souboru bez nutnosti jeho otevření k úpravám
    • Rozšíření:
      • Emmet - Dokumentace
      • Beautify
      • Interactive Linter (HTMLHint, CSSLint
      • Todo
      • Brackets Exclude Indexing FileTree
      • SVG Preview
      • Guidelines
      • White Space Sanitizer
      • Special Html Characters
  • Visual Studio Code (zdarma, multiplatformní)
    • Vzhled (denní/noční režim)
    • Hromadná editace
    • Automatické cesty k adresářům a souborům
    • Rychlý náhled souboru bez nutnosti jeho otevření k úpravám
    • Emmet - Dokumentace
      • html:5
      • lorem lorem3 p*2>lorem5 ul>li*3>lorem2
      • p*3
      • table>tr*2>td*3
    • Rozšíření:
      • Live Server
      • SVG Viewer
      • IntelliJ IDEA keybindings
      • Czech Language Pack
      • HTMLHint
      • Code Spell Checker
      • Czech - Code Spell Checker
        • File -> Preferences -> Settings:
          • C Spell Language: en,cs
      • IntelliSense for CSS class names in HTML
      • GitLens | Git Graph | Git History
      • ESLint
      • Minify
      • EditorConfig for VS Code
      • Svelte for VS Code
      • Svelte 3 Snippets
    • Tipy:
      • Kontextová nabídka -> Formátovat dokument
      • F1 zobrazit nabídku příkazů
      • Ctrl +/- zvětšení/zmenšení
      • Vícenásobný kurzor:
        • Alt + click nespojitý výběr
        • Wheel + click spojitý výběr
  • Apache Netbeans IDE (zdarma, multiplatformní)
  • XCode (zdarma, macOS)
  • Eclipse
  • WebStorm – kompletní IDE prostředí (komerční, multiplatformní)
  • PhpStorm – kompletní IDE prostředí (komerční, multiplatformní)
  • RubyMine (komerční, multiplatformní)
  • Visual Studio (komerční, Windows)
  • codeanywhere.com (komerční, cloudové řešení)

WYSIWYG editor

Správce souborů

Terminál s SSH klientem

  • Terminál (Windows, Linux, macOS)
  • Příkazový řádek nebo PowerShell + PuTTY (Windows)

Webový server

Distribuce:

Virtualizace:

Licence Další