www.Kursy.Grafoteka.pl

CorelDRAW, Photoshop – kursy i tutoriale dla grafików

Sprawdź kursy dla grafików Kursy grafiki komputerowejWideotutoriale CorelDRAW i Photoshop Blog dla grafikaNapisz lub zadzwoń do nas Kontakt

Kurs został dodany do koszyka.

Kurs został dodany do koszyka.
Złóż zamówienie

Kurs został usunięty z koszyka.

Kurs został usunięty z koszyka.

Powstał błąd podczas działania koszyka. Przepraszamy.

Powstał błąd podczas wysyłania formularza zamówienia.


Ten kurs znajduje się już w Twoim koszyku.

Ten kurs znajduje się już w Twoim koszyku.
Złóż zamówienie

Koszyk jest pusty.

Koszyk jest pusty, nie można wysłać zamówienia.
Dodaj kurs do koszyka

Projektuj banery WWW
Wstecz
Grafika komputerowa KURSY DLA GRAFIKÓW Projektowanie stron internetowych Projektuj strony WWW z Corelem Tutoriale Photoshop Tutoriale Photoshop Tutoriale CorelDRAW Tutoriale CorelDRAW Tips Photoshop WideoPorady Kurs Adobe Photoshop Bezpłatny kurs Photoshopa Grafika komputerowa. Blog Newsletter
Projektowanie stron internetowych

Przegląd programów do tworzenia stron WWW

Webdesign. Kolorowanie składni

Webdesign Czym jest i do czego służy edytor HTML

Podstawowa strona internetowa zbudowana jest z obrazków przygotowanych w dowolnym programie graficznym oraz kodu w języku HTML.

Znaczniki HTML, to polecenia rozumiane przez przeglądarki internetowe, dzięki czemu możliwe jest zinterpretowanie kodu i wyświetlenie strony WWW.

Strona internetowa, to właściwie zwykły dokument tekstowy, więc od strony technicznej wystarczy nam nawet najprostszy edytor tekstu typu Notatnik. Jednak specjalistyczne programy naprawdę ułatwiają pracę, a do tego są często darmowe.
Jakie to ułatwienia?
Kolorowanie kodu, podpowiedzi do znaczników HTML, automatyczne zamykanie cudzysłowów i tagów, zaawansowana praca z tekstem, tzw. snippety i makra. Choć możliwości zależą również od konkretnego edytora; i jeszcze kilku ciekawym opcjom przyjrzymy się podczas omawiania wybranych programów.



Webdesign. Podpowiedzi do znaczników

Webdesign Rodzaje edytorów HTML

Oprogramowanie do pracy z kodem można podzielić na dwie główne grupy:
— Edytory WYSIWYG.
— Edytory tekstowe.

Edytory WYSIWYG (What You See Is What You Get, czyli masz to, co widzisz), pozwalają tworzyć strony WWW bez znajomości kodu HTML. Pracujemy nad elementami witryny w przybliżeniu tak, jak będą one wyglądały w oknie przeglądarki.
Edytory tekstowe służą do pracy ze znacznikami języka HTML (PHP, ASP, JavaScript) i arkuszami stylów.



Większość edytorów WYSIWYG przeznaczona jest dla osób, które zamierzają zajmować się projektowaniem stron sporadycznie.
Bez znajomości kodowania możemy natknąć się na problemy z projektem, których z braku wiedzy nie rozwiążemy. Z drugiej strony bardziej wprawni webmasterzy nie lubią tracić czasu na poruszanie się po interfejsie edytora, biorąc ponadto pod uwagę kilka ciekawych propozycji ułatwiających pracę z kodem, takich jak Zen Coding czy Emmet.

Jeśli chodzi o edytory tekstowe, to coraz rzadziej można spotkać programy przeznaczone wyłącznie do projektowania stron internetowych. Najczęściej mamy do czynienia z edytorami, które pozwalają tworzyć w wielu językach programowania, w tym w języku HTML czy PHP. Ta granica pomiędzy edytorem HTML a edytorem dla programistów coraz bardziej się zaciera.

A w przypadku złożonych projektów warto ponadto pomyśleć nad oprogramowaniem typu IDE (zintegrowane środowisko programistyczne). Programy tego typu pozwalają nie tylko na tworzenie, ale także na tzw. debugowanie, kompilację i testowanie kodu.



Webdesign Jakie cechy powinien mieć dobry edytor HTML?

To w dużej mierze sprawa indywidualna. Dlatego warto zacząć od programów bezpłatnych i przekonać się, czego naprawdę potrzebujemy, i co jest dla nas najważniejsze.

Jakimi edytorami NIE będziemy się zajmować?
— Edytorami dla systemów innych niż Windows.
— Edytorami, które nie są już rozwijane (Nvu, EdHTML, HateML Pro i wiele, wiele innych).
— Edytorami WYSIWYG ponieważ nie sprzyjają nauce HTMLa, a to właśnie nauka kodowania powinna być dla początkującego projektanta stron najważniejsza (inna sprawa, że edytory typu WYSIWYG są najczęściej płatne i równie często są to programy średniej jakości).
— Edytorami, które cenowo nie są skierowane do początkujących (np. PhpStorm to rewelacyjny edytor dla programistów, w tym także do tworzenia stron internetowych, jednak kosztuje prawie 1000 zł, to samo dotyczy jeszcze droższego Dreamweavera).
Warto najpierw sprawdzić czy projektowanie stron, to coś czym chcielibyśmy się zajmować, a dopiero potem pomyśleć o narzędziach z innej półki. Choć darmowe programy także oferują naprawdę sporo (wielu profesjonalnych programistów korzysta z programu Notepad++).
— Nie będziemy się zajmować także edytorami, którymi nie warto się zajmować z różnych innych względów, są np. niedopracowane i niestabilne.

Webdesign. Walidacja kodu Jakim więc edytorom poświęcimy uwagę?

Nie ma edytora idealnego i prawie zawsze konieczny będzie kompromis, dlatego warto ustalić, jakie cechy programu są dla nas najważniejsze.
Spośród bardzo wielu dostępnych na rynku edytorów wybrałem pięć, a zwracałem uwagę na następujące cechy:
— Czy edytor jest bezpłatny.
— Czy edytor spolonizowany.
— Jaką pomoc oferuje początkującym (kolorowanie kodu, podpowiedzi do znaczników).
— Czy oferuje użyteczne narzędzia do pracy z tekstem np. definiowanie własnych fragmentów kodu (snippet).
— Czy oferuje możliwość sprawdzania (walidacji) poprawności kodu HTML.

Tak, jak wspomnieliśmy na początku, nie ma edytora, który spełnia wszystkie te wymagania.
WebMatrix oferuje znakomite podpowiedzi do znaczników i sprawdzanie poprawności kodu. RJ TextEd jest świetnie spolonizowany i zadziwia możliwościami.
Choć warto też zwrócić uwagę na coś, czego nie da się opisać: to subiektywne odczucia podczas pracy. Edytor musi nam po prostu „leżeć” inaczej i tak nie wykorzystamy jego możliwości.

Zapraszam na krótki przegląd kilku wartościowych edytorów, a poniżej znajdują się odnośniki, do prawie 30 innych programów, które także warto przetestować w poszukiwaniu edytora dla siebie.



Edytor WebMatrix Edytor RJ TextEd
Pobierz darmowy edytor WebMatrix
Pobierz darmowy edytor RJ TextEd



Edytor PSPad Edytor Bluefish Instalacja CorelDRAW X6
Pobierz darmowy edytor PSPad
Pobierz darmowy edytor Bluefish
Pobierz dormowy edytor Notepad++
Pobierz plugin Color picker



Webdesign Linki do innych edytorów

Zaproponowane programy, to wybór subiektywny i oczywiście nie wyczerpuje oferty dostępnych na rynku edytorów.
Poniżej jeszcze kilka propozycji, choć to nadal tylko część programów, które można znaleźć w internecie.
Kryteria wyboru takie same jak wcześniej: nie brałem pod uwagę edytorów przestarzałych, zbyt drogich i niefunkcjonalnych. Pominąłem również edytory obsługiwane z pomocą przeglądarki internetowej.


Edytory HTML
Brackets. „Świeży” z ciekawym podejściem do pracy z kodem edytor HTML. Nastawiony przede wszystkim na obsługę z pomocą skrótów klawiaturowych.
Czy tak będą wyglądały edytory przyszłości? Najprawdopodobniej tak; Brackets wraz z edytorem Sublime Text wyznaczają pewne standardy (choć ścieżki przetarły Vim oraz E-TextEditor).
Potencjał programu jest nieco ukryty, ale warto poświęcić mu więcej uwagi. Jego możliwości można ponadto zwiększyć, dzięki dostępnym dodatkom.
To młody projekt rozwijany przez firmę Adobe i myślę, że będzie zyskiwał na popularności. Warto mieć go na oku.
Edytor jest darmowy.
JTHTML. Bardzo udany, prosty, polski edytor kodu HTML oferujący wsparcie dla tworzących w HTML5. Całkiem sprawnie działa walidacja kodu z wykorzystaniem programu Tidy. Darmowy.
TopStyle. Potężny i nowoczesny edytor HTML. Płatny.
CoffeeCup. Wygodny i prosty edytor HTML, skupiający się na projektowaniu stron (w przeciwieństwie do wielu edytorów, które oferują wsparcie podczas pracy z różnymi językami programowania). Płatny.
HTML-Kit. Ciekawy edytor HTML, wyróżniający się nieco innym interfejsem niż pozostałe programy. Sporo interesujących rozwiązań, także podczas pracy z kodem. Warto obserwować, jak HTML-Kit będzie się rozwijał, ponieważ na tą chwilę jest jeszcze troszkę niedopracowany. Płatny.
CSE HTML Validator. Ten program, nie jest typowym edytorem, choć umożliwia pracę nad kodem w ciekawy sposób. CSE HTML Validator, to narzędzie wyspecjalizowane w analizowaniu gotowego kodu i znakomicie wyłapuje wszelkie błędy. Program płatny, cena zależy od wersji (Standard lub Professional).
CSE HTML Validator Lite. Bezpłatna wersja programu CSE HTML Validator.


Edytory dla programistów
Sublime Text. To chyba najbardziej oryginalny z edytorów, zadziwiający możliwościami i pomysłowością rozwiązań. Jego obsługa opiera się głównie na klawiaturze (skróty i wpisywane polecenia), więc opanowanie go może wymagać nieco czasu. Program absolutnie rewelacyjny, choć przeznaczony dla programistów i ci skorzystają tu najwięcej. Płatny, jednak wersja testowa dostępna na stronie autora nie ma żadnych ograniczeń.
Intype. Edytor dla programistów nieco zbliżony filozofią pracy do Sublime Text. Płatny.
phpDesigner. Jeden z najlepszych edytorów dla programistów, choć wykorzystując program wyłącznie do projektowania stron wykorzystamy jedynie ułamek jego możliwości. Płatny.
Tea. Edytor dla programistów o naprawdę dużych możliwościach. Darmowy.
EditBone. Lekki i prosty edytor dla programistów w ciekawy sposób podkreślający błędy w kodzie, również w kodzie HTML. Darmowy.
Geany. Bardzo dobry, dopracowany i oferujący sporo ciekawych narzędzi edytor dla programistów. Darmowy.
EditPlus. Bardzo dobry edytor tekstowy dla programistów. Płatny.
WeBulilder. Edytor tekstowy dla programistów. Nowoczesny, o dużych możliwościach; oferuje sporo, zwłaszcza jeśli chodzi o sprawdzanie poprawności kodu (HTML i nie tylko). W ofercie jest także podobny edytor, ale wzbogacony o obsługę JavaScript HTMLPad. Oba programy są płatne.
CoreEditor. To obecnie chyba najlepszy, komercyjny, polski edytor dla programistów. Ogromne możliwości, również jeśli chodzi o projektowanie stron WWW, jak większość programów, także nie pozbawiony wad.
Program płatny, ale od czasu do czasu pojawia się, jako dodatek do czasopism komputerowych (Komputer Świat 01/2013).
Pajączek. Legenda, jeśli chodzi o polskie edytory. Program przeznaczony typowo do projektowania stron internetowych. Mnóstwo opcji, ale też sporo wad. Płatny.


IDE — środowiska programistyczne
Aptana. Środowisko programistyczne, ale z naciskiem na projektowanie stron internetowych. Wspiera HTML5. Program darmowy.
Komodo Edit. To okrojona wersja rozbudowanego środowiska Komodo IDE. Program darmowy.
NetBeans IDE. Środowisko programistyczne przeznaczone głównie do pracy z językiem Java i również napisany w Javie, choć oferuje także sporo możliwości projektantom stron WWW. Również wspiera HTML5. Program darmowy, dostępny w kilku różnych wersjach.


Edytory WYSIWYG
SharePoint Designer 2007 Mieliśmy nie wspominać o programach, które nie są już rozwijane, ale SharePoint Designer to wciąż jedno z najlepszych narzędzi w swojej klasie. Przewyższa możliwościami i wygodą pracy wiele, nawet komercyjnych, dostępnych obecnie na rynku edytorów. Oferuje mnóstwo ułatwień dla początkujących.
Edytor ten wykorzystany został w kursie „Kompendium projektanta stron internetowych”.
Na stronie ze spisem treści tego kursu, znajduje się także obszerne omówienie możliwości edytora od Microsoftu.
Bluegriffon. Udany edytor WYSIWYG, choć wymaga jeszcze dopracowania. Warto jednak śledzić jego rozwój. Program bezpłatny, ale dodatki zwiększające możliwości edytora są płatne.
Amaya. Edytor WYSIWYG firmowany przez Konsorcjum W3. Troszkę wolno rozwijany, ale za to darmowy.
Corel Website Creator X6. Ciekawy edytor WYSIWYG od Corela. Płatny, ale za darmo dodawany jest do pakietu CorelDRAW Graphics Suite X6.
WebsitePainter.Prosty i nowoczesny edytor WYSIWYG. Płatny.
Website Realizer. Kolejny prosty edytor WYSIWYG. Także Płatny.
Fresh HTML. Największa zaleta tego edytora WYSIWYG, to fakt, że jest darmowy.


Kurs projektowania stron internetowych

www.grafoteka.pl