Tematyka tworzenia stron internetowych nie skupia się tylko na projektowaniu wyglądu, przenoszeniu go do języka HTML, a potem wrzucenia plików na serwer.

W tym artykule pokażę Ci jak może wyglądać tworzenie strony przez firmę lub samodzielną osobę (freelancera). Zazwyczaj jest kilka czynności, które się powtarzają i być może będziesz chciał je sprawdzić w praktyce.

Zebranie informacji od klienta

Na samym początku musimy wiedzieć dla kogo będziemy tworzyć stronę internetową. Warto więc zadać dla klienta podstawowe pytania, takie jak:

  • Czy ma jakieś propozycje odnośnie ułożenia treści, kolorystyki albo funkcjonalności?
  • Czy chce się na czymś wzorować? Może na innej stronie internetowej?
  • Czy ma już jakieś własne materiały, które chciałby umieścić na stronie?

Takie informacje pozwolą nam nieco bardziej dopasować stronę pod klienta, by potem uniknąć wielu poprawek w projekcie.

 

Jak stworzyć stronę internetową? Projekt, kodowanie, trendy 1

​Chcesz ​nauczyć ​się ​czegoś ​nowego?​

​Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron i aplikacji ​- kursy dla początkujących i zaawansowanych

 

Szkic lub projekt graficzny

Nawet jeśli mamy już w głowie ogólny wygląd naszej nowej strony, warto przenieść go na kartkę papieru lub zaprojektować w Photoshopie. Oba rozwiązania mają zalety i wady.

Korzystanie z Photoshopa wymaga wiedzy i doświadczenia w korzystaniu z tego programu, aby nasza praca przebiegała płynnie i byśmy nie musieli co chwilę szukać potrzebnego narzędzia.

Projekt stworzony w Photoshopie charakteryzuje się tym, że jest zbliżony do prawdziwego wyglądu strony, jednak rzadko kiedy w trakcie przenoszenia strony do języka HTML zachowamy idealnie ten sam wygląd.

Szkic natomiast to świetna metoda, by szybko przenieść swoje pomysły na papier. Jeżeli bowiem nie znasz Photoshopa, to pewnie nie uda Ci się przenieść pomysłu na tyle szybko, by go nie zapomnieć. Weź więc kolorowe długopisy, ołówek oraz gumkę i działaj – sam często szkicuję i jak najbardziej polecam.

Szkic - projekt graficzny strony, mockup

Przenoszenie projektu do HTML5 i CSS3

Gdy mamy gotowy wygląd naszej strony (lub chociaż odpowiednio przemyślany), zaczynamy przenosić ją do HTML5 i CSS3. Tutaj warto jeszcze przemyśleć czy stronę będziemy tworzyć w czystym HTMLu, czy też wykorzystamy jakiś framework, jak na przykład Bootstrap (zobacz co nowego w HTML5).

Co do sposobu kodowania: warto stosować komentarze w kodzie, bo w późniejszym czasie, gdy będą potrzebne jakieś poprawki, ułatwi Ci to poruszanie się i wprowadzanie poprawek.

Jako że korzystamy tutaj ze stylów CSS w wersji 3, mamy do dyspozycji wiele ułatwień względem poprzednika. Teraz nie musisz uruchamiać Photoshopa by ustawić sobie zaokrąglone rogi – wystarczy, że użyjesz właściwości border-radius i na żywo stworzysz sobie takie zaokrąglenie, jakie będzie Ci potrzebne.

Podczas tworzenia strony internetowej warto pamiętać o tym, by cały projekt nie był duży objętościowo (czyli dużo obrazków, wtyczek itd.) – strona będzie się ładować szybciej, co na urządzeniach mobilnych może mieć szczególne znaczenie. Tutaj też wychodzą zalety stosowania HTML5 i CSS3.

Jakie są trendy?

Tworzenie stron internetowych sporo się zmieniło przez te kilka lat popularności Internetu. Widać, że odchodzi się od skomplikowanych projektów, a częściej stosuje się przede wszystkim prostotę, funkcjonalność i minimalizm.

Rzadko kiedy spotkasz na stronie całą paletę barw – często dominują 3, 4 kolory, czasem połączone ze stylem flat design (styl płaski, podobny do kafelków) oraz dobrze dobrane zdjęcia.

Koniec Photoshopa

Coraz częściej spotyka się osoby, które zamiast Photoshopa czy GIMPa wykorzystują frameworki (czyli zestawy gotowych elementów) do projektowania swoich stron bezpośrednio w przeglądarce. Jest sporo zalet, bo klient od razu widzi swój projekt i może po nim „poklikać”.

Zobacz też: Bootstrap 3 – gotowa responsywna strona.

CSS3 – nowe możliwości

Technologia, która zmieniła oblicze tworzenia stron internetowych i przyczyniła się do unikania Photoshopa. Dlaczego tak się dzieje? Style CSS w wersji 3 pozwalają uzyskać w szybki sposób takie efekty, które wcześniej trzeba było tworzyć za pomocą JavaScriptu.

Za pomocą kilku linijek kodu otrzymasz przezroczystość, stworzysz cień dla tekstu czy dla całego elementu, zaokrąglisz rogi albo uruchomisz animację. Kto jeszcze używa JS do tego typu spraw?

Responsive Design

Razem z CSS3 przyszły strony responsywne, czyli dopasowujące się do urządzenia, na którym są wyświetlane. Dzięki media query, znaczniku prosto z nowej wersji arkuszów stylów, dostosowanie strony do tabletu, telefonu czy smartphona. stało się naprawdę proste.

Jeżeli nie chcesz wyświetlać slidera czy sidebara na smartphonach, wystarczy kilka linijek kodu i po kłopocie. Ciągle jednak wiele witryn nie jest do tego przystosowanych i właściciele tabletu widzą dokładnie to samo, co użytkownik wielkiego ekranu.

Na koniec każdego projektu

Zostaw na chwilę gotową stronę i zrób coś innego. Po kilku minutach spójrz na nią jeszcze raz – może coś byś poprawił, ulepszył?

Jeśli już dałeś z siebie wszystko, to i tak bądź przygotowany na ewentualne poprawki – nie każdemu wszystko się podoba i nie każdy ma taki gust, jak Twój – szczególnie klient, dla którego tworzysz. Trzeba to zrozumieć.

Warto więc co jakiś czas pokazywać stronę dla klienta, co pozwoli uniknąć nadmiernych poprawek.

Gdy już wszystko ustalone, założenia zrealizowane, treści wprowadzone – projekt możemy zakończyć.

A może system zarządzania treścią?

Gdy do tej pory tworzyłeś tylko strony statyczne, czyli HTML, CSS, ewentualnie JavaScript i na tym koniec, polecam zainteresować się systemami zarządzania treścią (zobacz: Kurs WordPress).

Pozwalają one zarządzać stroną poprzez panel administracyjny, a wszystko to jest wygodne w użyciu i np. żeby zmienić treść jakiegoś artykułu, możesz zrobić to bezpośrednio ze strony – nie musisz wchodzić przez serwer i szukać odpowiednich plików.

Jednym z CMSów jest WordPress, którego popularność jest ogromna, a instalacja całkiem prosta.

Oczywiście nie jest on tutaj sam – Joomla, Drupal i inne, mniej znane CMSy też potrafią zmienić zwykłą stronę w wielki, rozbudowany portal, jednak dokumentacja WordPressa i wsparcie społeczności potrafią zachęcić do zapoznania się z nim i stworzenia swojego pierwszego szablonu.

A Ty w jaki sposób tworzysz swoje strony internetowe? Z jakich technologii/CMSów korzystasz?

Jak stworzyć stronę internetową? Projekt, kodowanie, trendy 1

​Chcesz ​nauczyć ​się ​czegoś ​nowego?​

​Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron i aplikacji ​- kursy dla początkujących i zaawansowanych

Jakub Jurkian

Pracuję jako Front End Developer w Londynie. Od ponad 11 lat jestem programistą-pasjonatem, a strony (i wszystko co z nimi związane) tworzę od 6 lat. Jestem też autorem kursów wideo - od 2013 roku prowadzę kanał na YouTube i tego bloga. Zaczynałem od pisania artykułów dla jednego z czołowych polskich portali IT - benchmark.pl. Prywatnie od 10 lat jestem związany z kulturą hip-hop (głównie taniec breakdance).

  • Czesc właśnie dodalem jakubjurkian.pl do swoich ulubionych, strona ciekawa, ale muszę ci powiedzieć, że jest slabo widoczna w wyszukiwarkach. Zasługuje na większy ruch. Jest coś co ci się napewno przyda, poszukaj sobie w google – niezbędnik dla każdego webmastera – dzieki temu wypozycjonujesz swój blog w google, a oprócz tego Jest tam opisany bardzo ciekawy sposob na zarabianie w necie

  • >