Základné nástroje pre webový dizajn

Ak chcete začať ako webový vývojár, nepotrebujete veľa softvéru

ObsahRozbaliť

• Textový/HTML editor
• webové prehliadače
• Grafický editor
• FTP klient

Okrem počítača a internetového pripojenia je väčšina nástrojov, ktoré potrebujete na vytvorenie webovej stránky softvérové ​​programy , z ktorých niektoré už môžu byť vo vašom počítači. Na nahrávanie súborov na webový server potrebujete textový alebo HTML editor, grafický editor, webové prehliadače a FTP klienta.

Výber základného textového alebo HTML editora

HTML môžete písať v obyčajnom textovom editore ako napr Poznámkový blok v systéme Windows 10, TextEdit a Sublime Text na Mac, alebo Vi alebo Emacs v Linuxe. Vytvoríte kód HTML pre stránku, uložíte dokument ako webový súbor a otvoríte ho v prehliadači, aby ste sa uistili, že vyzerá tak, ako má.

Ak chcete viac funkcií, než ponúka editor obyčajného textu, použite radšej HTML editor. HTML editory rozpoznávajú kód a sú schopné identifikovať chyby kódovania pred spustením súboru. Môžu tiež pridať uzatváracie štítky, ktoré zabudnete, a zvýrazniť rozbité odkazy . Rozpoznávajú a prispôsobujú sa iným kódovacím jazykom, ako sú CSS, PHP a JavaScript.

Množstvo editorov HTML na trhu sa líši od základnej až po profesionálnu úroveň. Ak ste novým písaním webových stránok, jeden z WYSIWYG Editori (What You See Is What You Get) môžu byť pre vás najvhodnejšie. Niektoré editory zobrazujú iba kód, ale niektoré umožňujú prepínať medzi zobrazeniami kódovania a vizuálnymi zobrazeniami. Tu je niekoľko z mnohých dostupných webových editorov HTML:

Komodo IDEAa jeho užívateľsky prívetivé rozhranie sú vhodné pre začínajúcich aj pokročilých webových vývojárov. Funkcia automatického dopĺňania Komodo IDE je obzvlášť užitočná pri písaní kódu pre bežné prvky, ako sú odkazy. Softvér podporuje farebné kódovanie rôznych kódovacích jazykov, ako sú HTML, CSS a mnoho ďalších. Komodo IDE beží na Windows, Mac a Linux .

Lifewire

HTML editor CoffeeCupje obzvlášť užitočný pre nových vývojárov, ktorí sa viac zaujímajú o učenie sa kódovania ako o vizuálne rozhranie. Tento robustný editor sa dodáva so šablónami a má overovacie kontroly, ktoré vám pomôžu udržať váš kód bez chýb. Zahŕňa dokončenie kódu a podporuje ďalšie kódovacie jazyky môžete použiť v spojení s HTML. Softvér zvýrazní chyby, vysvetlí, prečo sa objavili, a povie vám, ako ich opraviť. CoffeeCup HTML Editor beží na Windows.

Lifewire

Mobiriseje HTML editor pre ľudí, ktorí sa nechcú zapodievať kódom. Všetko je to o výbere a tému a potom pretiahnutím prvkov na stránku. Pridajte text rovnako ako v bežnom textovom editore a vložte obrázky, videá alebo ikony – to všetko bez písania akéhokoľvek kódu; Mobirise to urobí za vás. Mobirise je k dispozícii pre Windows a Mac a je zadarmo.

Lifewire

webové prehliadače

Webové stránky môžu v jednotlivých prehliadačoch vyzerať inak, takže testovanie webových stránok, aby ste sa uistili, že vyzerajú a fungujú tak, ako majú, je kľúčové. Chrome, Firefox, Safari (Mac), Opera a Edge (Windows) sú najobľúbenejšie prehliadače.

Svoj vzhľad a funkčnosť musíte otestovať aj v mobilných prehliadačoch. Väčšina prehliadačov pre stolné počítače ponúka možnosť prezerania webových stránok v oknách rôznej veľkosti. V prehliadači Google Chrome je napríklad k dispozícii množstvo testovacích nástrojov na adrese vyhliadka > Vývojár > Nástroje pre vývojárov . Výberom ikony smartfónu v ľavom hornom rohu okna vývojára zobrazíte ľubovoľnú stránku v oknách rôznych veľkostí a mobilných operačných systémoch.

Lifewire

Grafický editor

Typ grafického editora, ktorý potrebujete, závisí od vašej webovej stránky. Adobe Photoshop je zlatým štandardom, ale možno nebudete potrebovať toľko energie – navyše možno budete potrebovať vektorový grafický program na prácu s logom a ilustráciami. Niekoľko grafických editorov, na ktoré sa treba pozrieť pri základnom vývoji webu, zahŕňa:

GIMPje bezplatný program na úpravu fotografií s otvoreným zdrojovým kódom, ktorý poskytuje mnoho funkcií svojich drahších konkurentov. Ako softvér s otvoreným zdrojovým kódom , je k dispozícii pre Windows, Mac a Linux.

Lifewire

Photoshop Elementspre Mac a PC je odľahčenou verziou svojho menovca, ale má množstvo funkcií.Corel PaintShop Profor PCs má takmer všetky nástroje, ktoré nájdete vo Photoshope, v ľahko použiteľnom rozhraní.Inkscapepre Windows, Mac a Linux je bezplatný editor vektorovej grafiky. Táto alternatíva k drahšiemu Adobe Illustratoru má viac než dostatok možností pre jednoduché dizajnérske práce a webovú grafiku.

FTP klient

Na prenos súborov HTML a podporných obrázkov a grafiky na váš webový server potrebujete klienta FTP (protokol na prenos súborov). FTP je k dispozícii cez príkazový riadok v systémoch Windows, Macintosh a Linux, ale špeciálny FTP klient sa používa oveľa jednoduchšie. Vrch FTP klienti zahŕňajú:

FileZilla(zadarmo) je k dispozícii pre Windows, Mac a Linux. Podporuje prenosy súborov drag-and-drop a má funkciu pozastavenia a obnovenia na nahrávanie veľkých súborov.

Lifewire / Richard Saville

Cyberduckje bezplatný multiplatformový softvér s otvoreným zdrojom známy svojou bezproblémovou integráciou s externými editormi a atraktívnym používateľským rozhraním.FTP zadarmoa Priamy FTP vyrába tá istá spoločnosť. Free FTP je minimalistický klient, ktorý spĺňa základné potreby prenosu súborov. Direct FTP je prémiová verzia, ktorá ponúka pokročilé funkcie. Obe verzie sú podporované systémami Windows 7, 8 a Vista, ale pre Windows 10 je vhodný iba Direct FTP.

Lifewire

Preniesťje prémiový FTP klient iba pre Mac. Uľahčuje nezvyčajne rýchle prenosy a podporuje Amazon CloudFront.Roztomilé FTPje výkonný prémiový FTP klient, ktorý môžete použiť na uskutočnenie až 100 prenosov súčasne. Je považovaný za jedného z najbezpečnejších dostupných FTP klientov.