Tworzenie i projektowanie stron internetowych 101

web_development_101Chcesz poznać podstawy programowania i projektowania stron internetowych? Niesamowite…


Ale istnieje problem z tym tokiem myślenia lub z wieloma z nich…

  • Jaki jest cel posiadania strony internetowej? Czy wszyscy naprawdę tego potrzebują??
  • Jeśli tak, to jak zbudować wysokiej jakości stronę internetową? Innymi słowy, w jaki sposób uczysz się podstaw projektowania i tworzenia stron internetowych, które pozwoliłyby Ci samodzielnie zbudować tę witrynę wysokiej jakości?
  • Co ważniejsze, możesz zbudować wysokiej jakości witrynę internetową przy swojej PIERWSZEJ próbie? A może potrzebujesz lat doświadczenia za sobą, zanim będziesz mógł liczyć na wynik ponad straszny?

Odpowiedzmy na to wszystko w tym przewodnik dla początkujących dotyczący tworzenia i projektowania stron internetowych.

[Ostrzeżenie spoilera. Tak, za pierwszym razem możesz zbudować wysokiej jakości stronę internetową.]

Co obejmuje ten przewodnik?

Dobra, po pierwsze, cieszymy się, że czytałeś dalej i zdecydowałeś się wypróbować tworzenie stron internetowych! Oto jak się to rozegra:

Rozdziały są przedstawione w bardzo prosty sposób, z główną treścią po lewej stronie, a elementy do akcji po prawej stronie. Tak jak:

Wprowadzenie do przewodnika: Rozdział 1

Teraz, jak postępować:

  • Podczas pierwszego czytania: Zalecamy przeczytanie całości od góry do dołu. To da ci dobry widok na 10 000 stóp i pomoże ci zrozumieć najważniejsze jego części. Zapewni również podstawowe narzędzia i metody radzenia sobie z poszczególnymi zadaniami.
  • Podczas drugiego czytania czytaj dalej: Użyj spisu treści i przeskocz do części, która najbardziej Cię interesuje. Ponadto możesz swobodnie korzystać z przycisków udostępniania obok każdego rozdziału i wysyłać linki do siebie lub do znajomych / obserwujących, którzy mogą być zainteresowani.

Gotowy? Przejdźmy do rozdziału 1.

Dla kogo jest ten przewodnik?

Jeśli chcesz nauczyć się podstaw programowania i tworzenia stron internetowych, ten przewodnik jest dla Ciebie. Jakąkolwiek masz motywację.

Na początek nie potrzebujesz też żadnej wiedzy technicznej (innej niż podstawowa „umiejętność korzystania z Internetu”). Cały ten przewodnik ma być rodzajem kursu „101” dla wszystkich zainteresowanych budowaniem stron internetowych i uczeniem się tworzenia stron internetowych.

Oto kilka typowych powodów, dla których możesz być zainteresowany:

  • 1. POTRZEBUJESZ strony internetowej dla swojej firmy (i chcesz sprawdzić, czy możesz sam go zbudować).
  • 2). Chcesz nauczyć się tworzenia stron internetowych z pasji lub chwilowego zainteresowania (nic złego w tym).
  • 3). POTRZEBUJESZ strony internetowej dla szkoły.
  • 4. POMAGAsz znajomemu lub członkowi rodziny, aby uzyskać dostęp do swojej witryny online.

Główna idea, która nas poprowadzi

To jest ważne! I nie wściekaj się na nas, jeśli czytasz to jako zaawansowany programista stron internetowych, ale główna idea, która poprowadzi nas przez cały zasób dotyczący projektowania i projektowania stron internetowych to:

„Podejście najmniejszego oporu”

Oto trzy zasady podejścia o najmniejszym oporze:

  • Byli nie rozkładając rzeczy na poziomie molekularnym. To znaczy. nie zajmiemy się do końca działaniem języków programowania ani działaniem serwera internetowego.
  • Byli nie wymyślać koła na nowo. To znaczy. jeśli ktoś już rozwiązał dany problem i udostępnił rozwiązanie, skorzystamy z niego.
  • Byli dzięki czemu proste rozwiązanie jest niesamowite, zamiast skomplikowanego i pozornie bardziej funkcjonalnego buggy rozwiązania i niezrozumiałe.

ROZDZIAŁ 1: Plan

Twój pomysł, typ strony internetowej, nazwa domeny i hosting.

Zanim utworzysz stronę internetową, potrzebujesz planu

Jak na ironię może to zabrzmieć – serial „The A-Team” z lat 80. nauczył nas, że dobry plan to klucz do sukcesu.

Jeśli już od jakiegoś czasu masz stronę internetową, na pewno jesteś podekscytowany jedynym pomysłem, by w końcu udostępnić ją innym do czytania i przeglądania.

Chcesz, aby Twoja strona była niesamowita. Prawdopodobnie wiesz, jak to będzie do pewnego stopnia wyglądać. A może masz przygotowane idealne logo.

Ale…

W tym miejscu nie powinno się zaczynać. Jeśli zaczniesz od wcześniej ustalonych oczekiwań, doprowadzi to tylko do wielu nieporozumień po drodze i wyniku poniżej normy.

Zamiast tego pomyśl o następujących kwestiach:

  1. Oddziel się od wszelkich technicznych celów, które możesz mieć. Na przykład cel nauki technologii stron internetowych lub niektórych programów internetowych.
  2. Zadaj sobie jedno główne pytanie: „Do czego potrzebuję strony?”

Tu nie chodzi o ciebie, chodzi o cel witryny.

Pytania, które musisz sobie zadać przed skonfigurowaniem witryny

  1. Co strona ma osiągnąć?
  2. Co będzie główną „rzeczą” prezentowaną na stronie? (np. Twoja firma, produkt, posty na blogu itp.)
  3. Czy strona będzie miała jakiś specjalny cel? (np. sklep eCommerce, portfolio fotografa itp.)
  4. Kto jest grupą docelową?
  5. Dlaczego są zainteresowani tematem strony?
  6. Jaki ból rozwiązuje witryna dla poszczególnych członków widowni?

O tych 3 ostatnich pytaniach porozmawiajmy przez chwilę z publicznością…

Istnieją 2 główne zasady tworzenia stron internetowych. Oto zasada nr 1:

 Czytelnik / odwiedzający jest najważniejszy. To oni są główną osobą, którą musi zadowolić Twoja witryna.

W pewnym sensie twoja strona nie jest twoja. To jest ich.

(Zasada nr 2 omówimy za chwilę.)

Zapomnienie o tych prostych wskazówkach może doprowadzić cię całkowicie w niewłaściwy sposób, nawet do momentu, w którym znajdziesz stronę internetową, która jest myląca dla wszystkich wokół, ale ty.

„Ugh! Ludzie po prostu nie rozumieją, o czym jest ta strona. Jak mogą być tak nieświadomi ?! ” – kończysz na myśleniu. Ale jak się okazuje, ignorantem byłeś ty.

Jedynym sposobem, aby tego uniknąć, jest zbudowanie witryny z myślą o czytelniku od samego początku.

Więc… weź ten kawałek papieru i odpowiedz na wszystkie powyższe pytania.

Gdy skończysz, będziesz mieć swój ostateczny zestaw wskazówek, które będziesz działał podczas pracy nad witryną.

Odpowiedzi te będą niezwykle skutecznym narzędziem w miarę postępów. Będziesz mógł do nich wrócić za każdym razem, gdy podejmiesz decyzję dotyczącą swojej witryny.

Czy powinieneś * to * czy * tamto? Przejdź do arkusza odpowiedzi i dowiedz się. Czy powinieneś używać szerokiego lub wąskiego paska bocznego? Przejdź do odpowiedzi, dowiedz się, który z większym prawdopodobieństwem rezonuje z docelowym czytnikiem. Itd.

Nazwy domen i hosting

Jeśli chcesz być właścicielem witryny, potrzebujesz nazwy domeny i hosta internetowego.

No cóż, technicznie rzecz biorąc, możesz zbudować testową stronę internetową na swoim komputerze, a następnie uruchomić ją z lokalnego serwera WWW (również zainstalowanego jako oprogramowanie na twoim komputerze), ale nie byłoby to użytecznym rozwiązaniem dla 99% przypadki, więc pomińmy to.

Host i domena…

Zła wiadomość jest taka, że ​​oba kosztują.

Dobra wiadomość… to nie tyle pieniędzy w wielkim systemie rzeczy. Ponadto w trakcie nauki możesz nawet uruchamiać wiele małych witryn pod jedną nazwą domeny i pod jednym hostem.

Ale zacznijmy od początku.

Hosty internetowe:

  • Mówiąc najprościej, hostem jest miejsce, w którym znajduje się Twoja witryna, i odwiedzający ją mogą znaleźć. W pewnym sensie hosty witryn internetowych są jak apartamenty dla ludzi. Pod maską hosty internetowe to firmy, które wynajmują swoje serwery w zamian za pieniądze (… małe mieszkania na twoje strony internetowe).
  • Na początek wystarczy standardowy plan hostingu współdzielonego. Możesz je zdobyć na wszystko, zaczynając od 3 USD / miesiąc. Oto ładne porównanie popularnych hostów internetowych. Sprawdź to i zdecyduj, która z tych firm wydaje się właśnie dla Ciebie. Nasze rekomendacje dotyczą jednak SiteGround, A2 Hosting i Dreamhost.

Domeny:

  • Jeśli hostem internetowym jest mieszkanie, wówczas domeną jest adres tego mieszkania. Na przykład domeną tej witryny jest hostingfacts.com.
  • Aby rozpocząć, wybierz żądaną nazwę domeny, a następnie kup ją od rejestratora. Oto obszerny przewodnik na temat kupowania nazwy domeny oraz lista generatorów nazw domen.

 

Sugestie i wskazówki dotyczące wyboru nazwy domeny

Dobra, więc pójście do jakiegoś rejestratora domen i faktyczne kupienie domeny to jedno, ale jak wybrać właściwą nazwę domeny?

Jest kilka szkół:

  • Markowe nazwy domen. Są to domeny złożone z nieistniejących słów. Pomyśl takie rzeczy jak Google.com lub Yahoo.com. Zanim pojawiły się te firmy, słowa te nic nie znaczyły. Zaletą markowej nazwy domeny jest to, że jest… cóż, bardzo godna uwagi, niezapomniana i łatwo odróżnić Twoją witrynę od innych.
  • Nazwy oparte na słowach kluczowych. Składają się one z istniejących słów, ułożonych w sekwencji opisującej przeznaczenie witryny. Pomyśl o takich rzeczach jak Pizza.com lub StartBloggingOnline.com. Dzięki takiej nazwie domeny odwiedzający będą mogli dokładnie przewidzieć, jaką stronę internetową zamierzają odwiedzić. Minusem jest to, że domeny te są ogólnie mniej markowe.
  • Połączone nazwy. Są to połączone markowe domeny i domeny oparte na słowach kluczowych. Pomyśl, Facebook.com lub Copyblogger.com. Takie nazwy sugerują odwiedzającym „pewną” część charakteru witryny, ale nadal są bardzo markowe.

Kilka ogólnych wskazówek niezależnie od wybranego typu domeny:

  • Uczyń domenę łatwą do zapamiętania.
  • Zrób to krótko i prosto. Im dłuższa jest domena, tym bardziej niejasna.
  • Uzyskaj .com (jeśli to możliwe). .Com jest główną dostępną „domeną najwyższego poziomu”. Nie zadowalaj się niczym innym.
  • Staraj się unikać łączników. Uzyskaj swoje imię w formie pojedynczego obiektu blob, np. „Cakerecipes.com” zamiast „cake-recipes.com”

Rzeczy, które należy przygotować po tym rozdziale:

  • Nazwa domeny.
  • Hosting.
  • Twój arkusz odpowiedzi – cele Twojej witryny i sposób, w jaki ma ona służyć odbiorcom.

Potrzebujesz więcej pomocy? Oto dalsze informacje dla Ciebie:

  • Dlaczego hosting dzielony? Porównywane główne typy hostów
  • 10 rzeczy, które sprawiają, że hosting jest dobry
  • 12 zasad wyboru właściwej nazwy domeny
  • Kompleksowy przewodnik planowania strony internetowej

ROZDZIAŁ 2: Projektowanie i szkieletowanie

Weź papier i długopis i zarysuj razem ze strukturą witryny

OK, wejdźmy w fazę projektowania.

Po pierwsze, oto etyka pracy, którą będziemy przestrzegać:

  • Używamy długopisu i papieru tak długo, jak to możliwe, i dopiero wtedy przełączamy się na komputer. Uwierz nam, każda minuta spędzona na pracy nad projektem na papierze to godzina zaoszczędzona po rozpoczęciu dostrajania rzeczy na komputerze.
  • Wykonujemy prace iteracyjne… Wykonujemy »sprawdzamy wyniki» poprawiamy »sprawdzamy wyniki» powtarzamy do końca.

W rozdziale 1 wspomnieliśmy o czymś, co nazwaliśmy zasadą nr 1 tworzenia stron internetowych. Teraz jest czas na zasadę nr 2:

Zasada 2 budowania strony internetowej:

Najpierw pomyśl o treści.

Zawartość ma znaczenie na stronie internetowej. Nie projekt. Zadowolony.

Ludzie przychodzą po treść. Nie przychodzą po projekt. Projekt jest tylko pojazdem do dostarczania treści.

Nigdy nie zaczynaj od wyglądu witryny. Zacznij od treści. Zadowolony. Zadowolony. Zadowolony.

Co rozumiemy przez „treść”? Krótko mówiąc, to jest coś, co ludzie chcą uzyskać z Twojej witryny. Wpisy na blogu, produkty w sklepie, wątki na forum, jeśli tworzysz forum, artykuły z wiadomościami, oferta firmy itp.

“Naprawdę? Wygląd naprawdę nie ma znaczenia? ” – Ty pytasz.

Zamiast nas pokonać, sprawdź tę stronę:

Prosta strona internetowa

Ta prosta strona internetowa jest zdecydowanie najlepszym wyjaśnieniem tego, czym jest projekt i do czego służy on-line.

Pamiętaj więc, najpierw treść!

Treść i struktura witryny

Ok, więc ponieważ treść jest najważniejsza, musisz wcześniej (w większości) ją przygotować. A przynajmniej musisz mieć dobre pojęcie o tym, ile treści będzie i w jakiej formie.

Uwaga. Wiemy, że ta część może być trudna. Rozpoczynanie od treści wydaje się dość nienaturalne w projektowaniu stron internetowych, ale naprawdę jest to najlepszy sposób na uzyskanie doskonałego wyniku. Pomyśl więc o treści, którą chcesz udostępnić czytelnikowi i jak chcesz ją zaprezentować.

Następnym krokiem jest wyróżnienie poszczególnych rodzajów stron, które będą potrzebne (np. Strona główna, strona produktu, strona kategorii, strona o stronie, strona kontaktowa, główna strona sprzedaży, strona docelowa subskrypcji biuletynu, główna lista blogów, pojedyncze posty, być może sklep i cokolwiek innego, co wydaje się potrzebne).

Pomyśl, jaki jest najbardziej efektywny sposób organizowania treści w witrynie?

Zrób to wszystko na papierze. Prawdopodobnie będzie to dla ciebie łatwiejsze i szybsze niż nauka oprogramowania do tworzenia wykresów na miejscu.

Przykład:

struktura treści

Zarysuj szkielet

Model szkieletowy w projektowaniu stron internetowych jest po prostu schematem strony lub planem – wizualnym przewodnikiem reprezentującym ramy strony internetowej (Wikipedia mówi nam).

Modele szkieletowe są niesamowite! Używamy ich do większości naszych działań, które mają pojawić się w Internecie. Oto na przykład szkielet tego przewodnika:

Zarysuj szkielet

Jak widać, to znowu na papierze. Mimo że istnieje wiele aplikacji do tego rodzaju pracy, nie zalecamy ich używania. Mogą być świetne dla projektantów, ale początkujący lub średnio zaawansowany stracą tylko czas na naukę ich, a ostatecznie nie uzyskają znacznej poprawy w porównaniu z tym, co osiągną za pomocą pióra i papieru.

Jak więc szkieletować?

Cóż, są dwa podejścia, jeśli jesteś początkujący:

  • Idź z prądem, jeśli czujesz się silny, i po prostu odsuń się (nie zawsze idealne rozwiązanie).
  • Uzyskaj szybką wiedzę na temat prawidłowego modelowania szkieletu (zwykle lepiej).

Dla tych drugich przejdź tutaj – świetny przewodnik.

(Pamiętaj, aby utworzyć szkielet każdej ważnej strony wymienionej w poprzednim kroku).

Rzeczy, które należy przygotować po tym rozdziale:

  • Większość treści witryny lub przynajmniej większość z nich jest przewidywana (na przykład jeśli polegasz na treściach generowanych przez użytkowników, trudno jest ją wcześniej uzyskać).
  • Struktura treści witryny przygotowana jako wykres.
  • Model szkieletowy poszczególnych typów stron, których będziesz potrzebować.

Dalsza lektura:

  • 9 kroków do planowania zawartości strony internetowej
  • Nowy w projektowaniu stron internetowych? Zacznij tutaj.

ROZDZIAŁ 3: UX i UI

Nigdy nie lekceważ znaczenia doświadczenia użytkownika i interfejsu użytkownika

Jak w User Experience i interfejs użytkownika.

WebDesignerDepot podaje nam raczej poetycką definicję dwóch:

Interfejs użytkownika to siodło, strzemiona i króluje.

UX to uczucie, że możesz jeździć konno i sznurować swoje bydło.

Bardziej praktyczna definicja:

  • Interfejs użytkownika jest tym, co widzi użytkownik, gdy patrzy na Twoją witrynę.
  • UX jest ich zdaniem.

Para i sposób jej wykonania w zasadzie określa użyteczność witryny dla użytkownika końcowego / użytkownika.

Zarówno projektowanie interfejsu użytkownika, jak i interfejsu użytkownika są same w sobie dużymi tematami i istnieje wiele mniejszych elementów, które odgrywają rolę w końcowym wyniku.

Krótko mówiąc, jest wiele do nauczenia się, jeśli dopiero zaczynasz swoją podróż.

Więc zamiast próbować tutaj przerobić cały kurs projektowania interfejsu użytkownika i interfejsu użytkownika, po prostu wskażmy garść ważnych elementów, a następnie wyślemy cię gdzieś indziej do dalszego czytania.

Cele użytkownika

UX dotyczy celów użytkownika… Nie tyle twoich celów… Celów użytkownika.

OK, co to znaczy? Przede wszystkim wróć do celu swojej witryny – nad czym pracowałeś w poprzednich rozdziałach. Powód, dla którego budujesz witrynę i jak pomaga ona użytkownikowi / odwiedzającemu.

Jak to się przekłada na cel odwiedzającego? … Co jest jedyną rzeczą, którą odwiedzający chce uzyskać lub osiągnąć, gdy wejdzie na Twoją stronę? To jest ich cel.

Jak łatwe są te cele do osiągnięcia?

Następnie skup się na następującym pytaniu:

  • Czy odwiedzający może łatwo osiągnąć swój cel? – Czy mogą dotrzeć do dokładnych informacji, które przyszli w prosty sposób?

Aby odpowiedzieć na to pytanie, musisz wrócić do szkieletu, struktury treści i dokładnie sprawdzić rzeczy.

Upewnij się, że struktura treści i strony, które wymyśliłeś, mają sens z punktu widzenia użytkownika. Upewnij się, że mogą swobodnie poruszać się między ważnymi stronami w niezauważalny sposób.

Zasadniczo upewniamy się, że witryna zapewnia użytkownikom wartość.

Trudno to wszystko rozgryźć, prawda??

Zdecydowanie zalecamy sprawdzenie zasobów wymienionych w sekcji „dalsze czytanie” tego rozdziału… ale możesz też spróbować „włamania”.

Mianowicie, pomyśl o tym, co Cię frustruje, gdy odwiedzasz witryny podobne do tej, którą chcesz zbudować? Być może są jakieś trudne do zdobycia informacje lub element interfejsu, który powoduje, że strona jest myląca.

Rób notatki, wyciągaj wnioski, nie popełniaj tych samych błędów w swojej witrynie.

Używanie emocji jako narzędzia

Podczas pracy nad interfejsem użytkownika i interfejsem użytkownika witryny zasadniczo dążysz do wywołania pewnej emocji w odwiedzającym.

Chcesz, aby poczuli się w określony sposób, a następnie przekonają ich do działania w określony sposób. W ten sposób uczynienie witryny naprawdę pomocną.

Jednym z najlepszych narzędzi do pracy nad emocjonalną częścią pracy jest kolor.

Kolory mają różne znaczenia w różnych kulturach. Zrozumienie tych różnic może znacznie ułatwić Ci pracę. Oto niezły ściągawka.

Gdy już znajdziesz się w polu, jakiego koloru chcesz (prawdopodobnie) użyć, oto kilka ogólnych wskazówek dotyczących pracy z kolorem:

  • Wybierz jeden główny schemat kolorów składający się z kilku kolorów, które dobrze do siebie pasują. Oto świetny generator schematów kolorów.
  • Wybierz jeden kolor, który będzie twoim akcentem – kolor, który będzie używany w przyciskach akcji, przyciskach zakupu itp. Zasadniczo wszystko, co wymaga uwagi użytkownika.

Typografia

W wielu przypadkach typografia to miejsce, w którym wygrywasz (lub przegrywasz) grę polegającą na tworzeniu stron internetowych.

Bardzo łatwo jest całkowicie zapomnieć o typografii i po prostu użyć Arial do wszystkiego.

Niepolecane.

Obecnie praca z niestandardowymi czcionkami jest niezwykle łatwa i nie musisz robić nic technicznego, aby włączyć te niestandardowe czcionki w swojej witrynie.

Duża, wielka typografia jest obecnie bardzo modna, a także znacznie ułatwia pracę projektanta – zwłaszcza pracę początkującego projektanta -.

Sprawdź tę stronę, na przykład:

bonobo

Zauważyłeś coś? Tak, czcionki są ogromne i świetnie wyglądają!

Oto jak nad tym pracować:

  • Ogólnie rzecz biorąc, każdy projekt strony internetowej wymaga dwóch rodzajów tekstu: nagłówki i akapity. W większości przypadków wystarczy jedna czcionka.
  • Przejdź do Google Fonts – własnej biblioteki darmowych czcionek Google, których możesz używać w swojej witrynie – i poszukaj czcionki, którą naprawdę lubisz.
  • Następnie weź nazwę tej czcionki i poszukaj jej w Pary czcionek – jest to biblioteka gotowych par czcionek, które dobrze do siebie pasują.
  • Wybierz parowanie, które wygląda niesamowicie.
  • Zanotuj nazwy obu czcionek, będziesz ich później potrzebować.

Zrobienie tego w ten sposób przyspieszy twój proces i nadal zapewni ci świetny wynik.

Przykład: w Google Fonts znaleźliśmy czcionkę o nazwie Bree Serif, którą bardzo lubimy:

Bree-Serif

Następnie przenieśliśmy go do Font Pair, a strona sugerowała, że ​​Bree Serif pasuje do Open Sans. Doskonały:

Bree-Serif-open-sans

Ostateczna struktura

Wreszcie ostatni krok!

Cały ten rozdział dotyczy lądowania na ostatecznym układzie / strukturze, której zamierzasz użyć w swojej witrynie. W tym momencie powinieneś być prawie pewien, co chcesz zrobić ze swoim projektem i interfejsem użytkownika.

Rzeczy, które należy przygotować po tym rozdziale:

  • Twoje cele użytkowników są wyraźnie wymienione.
  • Twoja struktura szkieletowa została dwukrotnie sprawdzona, aby upewnić się, że te cele nie są mylące.
  • Wybrany schemat kolorów.
  • Zrozumiała typografia.
  • Cały układ / struktura / organizacja witryny.

Dalsza lektura: 

  • Magazyn UX
  • Stoisko UX
  • Psychologia i emocje związane z kolorem w projektowaniu stron internetowych
  • Co to jest projektowanie interfejsu użytkownika? Przegląd, narzędzia i zasoby
  • Ustalanie inteligentnych celów biznesowych dla witryny internetowej
  • 8 zasad tworzenia skutecznej typografii

ROZDZIAŁ 4: WordPress, HTML lub szablony?

Zdecyduj, którą drogę wybrać – systemy zarządzania treścią lub koduj ją od zera

Tutaj zaczyna się prawdziwa, brudna w dotyku praca pod maską!

Jest to prawdopodobnie najstraszniejsza część procesu (przyznaj to!).

Tym razem nadszedł właściwy czas, aby odłożyć długopis i papier na bok i rozpocząć pracę z jakimś oprogramowaniem.

A zaraz za bramą jest mnóstwo pytań …

  • Czy powinienem nauczyć się HTML?
  • Co z CSS?
  • Czy gotowe szablony stron HTML zrobią to za mnie?
  • Czy muszę nauczyć się języka programowania, takiego jak PHP?
  • Słyszałem, że WordPress jest obecnie sposobem na zbudowanie strony.
  • Widziałem reklamę Squarespace Super Bowl. O co chodzi?
  • Jak nazywa się Joomla? Lub Drupal?
  • i tak dalej i dalej i dalej.

Odpowiedź na wszystkie z nich brzmi „tak”.

Tak, jak w tym przypadku, możesz wykonać jedną lub wszystkie z tych rzeczy i tylko od Ciebie zależy, którą ścieżkę wybrać.

Staramy się powiedzieć, że nie ma tutaj najlepszego podejścia. Wszystko zależy od tego, jak bardzo chcesz zaangażować się w tworzenie stron internetowych, ile podstaw tworzenia stron internetowych chcesz się nauczyć, jak szybko potrzebujesz wysokiej jakości strony i jak ją później dostosować..

Oto jak przejdziemy od tego rozdziału do przodu. Pierwszy, wybierz osobę, która najlepiej Cię określa:

  • za) Chcę dowiedzieć się, na czym polega tworzenie stron internetowych, wszystkie podstawy, wszystkie wewnętrzne działania strony internetowej i wszystkie mechanizmy, które sprawiają, że strona działa.
  • b) Chcę się nauczyć, jak korzystać z niezawodnego narzędzia do tworzenia witryn, które poradzi sobie z większością ciężkich operacji podnoszenia.
  • do) Nie wiem co robić. Chcę tylko stronę internetową, którą mogę zbudować i która będzie działała poprawnie.

Odpowiedzi a)? Przejdź do rozdziału 5.

Odpowiedzi b)? Przejdź do rozdziału 6.

Odpowiedzi c)? Zapoznaj się z tym artykułem, a następnie wróć (powinien pomóc Ci wybrać idealną ścieżkę):

  • Sprawdzono 8 najlepszych platform do blogowania i tworzenia stron internetowych… Każda platforma jest opisana wraz z jej zaletami i wadami, a zasób sugeruje również najlepszy dostępny wybór (Wix lub SB) dla twoich konkretnych potrzeb.

Czytałeś to? Świetny! Które z wyżej wymienionych osób najlepiej Cię opisują – a lub B)?

Narzędzia, które mogą się przydać:

  • Grafika: Paint.NET, Gimp, Pixlr.
  • Pisanie kodu: Notepad ++, TextWrangler, SublimeText.
  • Zarządzanie pracą: Trello.
  • Projekt: schematy kolorów, czcionki Google, narzędzia stąd.
  • Fotografia: Unsplash, AllTheFreeStock

ROZDZIAŁ 5: Wprowadzenie do HTML, CSS & JavaScript

Jak strony internetowe są wbudowaną rzeczywistością

W tym rozdziale przedstawimy podstawowe zasady tworzenia stron internetowych, wyjaśnimy najważniejsze terminy, a następnie prześlemy Cię do określonych zasobów, w których możesz pogłębić swoją wiedzę i umiejętności.

HTML

HTML jest językiem stron internetowych. Każda strona internetowa jest w pewnym momencie budowana lub konwertowana na HTML.

Na przykład, aby zobaczyć strukturę HTML tego przewodnika, który tutaj czytasz, po prostu naciśnij „Ctrl + U” na klawiaturze.

HTML określa każdy blok, który widzisz na stronie internetowej. Na koniec dnia, aby wyświetlić cokolwiek na stronie, należy przekonwertować ją na HTML.

Aby skutecznie uczyć się HTML, zalecamy zapisanie się na jeden z (bezpłatnych lub płatnych) kursów dostępnych w Internecie. Niektóre z najlepszych można znaleźć w Codeacademy lub Treehouse.

Na przykład, tutaj jest konkretna sekcja na Codeacademy o HTML i CSS.

Strona główna CodeCademy

To jest kompleksowe podejście do HTML.

CSS

CSS – aby pominąć nudne szczegóły techniczne – odpowiada za stylizację wszystkiego, co jest widoczne na stronie internetowej.

CSS pobiera tagi HTML, a następnie porządkuje i dodaje do nich styl. Rzeczy takie jak: pogrubienie tekstu, dostosowanie kolorów, cienie, układy, a nawet animacje, są teraz wykonywane głównie za pomocą CSS.

Aby lepiej zrozumieć, jak to dokładnie działa, przejdź do tego szybkiego kursu w Codeacademy.

Aby uzyskać bardziej dogłębną naukę, sprawdź także sekcje CSS w Codeacademy lub Treehouse.

JavaScript, jQuery, Bootstrap itp.

JavaScript to język programowania, który pozwala wprowadzać dynamiczne działania na swojej stronie. Na przykład możesz wykonywać czynności takie jak sprawdzanie poprawności formularzy internetowych lub interakcję z użytkownikiem w bardziej usprawniony sposób bez konieczności ponownego ładowania strony, na której się znajdują. Oto fajny samouczek autorstwa w3schools.

Mając to na uwadze, jQuery to biblioteka JavaScript, która pozwala tworzyć zaawansowane rzeczy przy mniejszym kodowaniu. Bardzo przydatny dla programisty. Dowiedz się więcej tutaj.

Wreszcie, Bootstrap to bardzo interesujący wynalazek. Pierwotnie wprowadzone przez Twittera, jest to w zasadzie środowisko front-end, które przyspiesza proces budowy strony internetowej, dostarczając większość typowych elementów strony, które zostały już wcześniej zbudowane. Brzmi skomplikowanie, prawda??

Ale tak nie jest. Po prostu sprawdź ten kurs dla początkujących w Codeacademy (tak przy okazji, tak nauczyliśmy się Bootstrap).

Rzeczy, które należy przygotować po tym rozdziale:

  • Zasadniczo pierwszy szkic witryny HTML / CSS został całkowicie zbudowany. Stamtąd możesz rozpocząć iterację i poprawić końcowy wynik.

ROZDZIAŁ 6: Platformy do tworzenia stron internetowych

Konfigurujesz swoją pierwszą stronę? Wypróbuj bezpłatne platformy internetowe, takie jak WordPress, Joomla lub Drupal

Rozdział 6: Platformy do tworzenia stron internetowych

  • SquareSpace
  • WordPress
  • Joomla & Drupal

Istnieje więcej twórców stron internetowych, niż można potrząsnąć. (Jeśli jesteś osobą, która potrząsa patykami).

Okej, żarty na bok.

Oczywiście, jeśli nie chcesz nauczyć się kodować rzeczy ręcznie, to na pewno jest wiele rozwiązań, które mogą ci pomóc.

Uwaga. Należy pamiętać, że wszystko, co omówiliśmy w rozdziałach 1-4, nadal obowiązuje tutaj. Nawet jeśli korzystasz z rozwiązania do tworzenia witryn, które jest swego rodzaju bezproblemowe, musisz zachować ostrożność, aby produkt końcowy był przyjazny dla użytkowników i zgodny z celami wszystkich osób. Te narzędzia do budowania witryny to właśnie… narzędzia.

Począwszy od tych, które są najłatwiejsze do zrozumienia:

SquareSpace

Jedyna platforma internetowa, która reklamuje się podczas Super Bowl.

Krótko mówiąc, bardzo przydatne rozwiązanie, z którego może korzystać każdy. Nie wymaga się wcześniejszych umiejętności.

Pozwala budować klasyczne strony internetowe, blogi, a nawet sklepy eCommerce, o których napisaliśmy nawet recenzje. Interfejs i cały proces jego używania są dość łatwe do zrozumienia, a chłopaki Squarespace zapewniają wiele interesujących samouczków. Sprawdź je tutaj.

WordPress

Szczerze, kochamy WordPress.

W większości przypadków jest to idealna platforma do budowy witryny. Ma idealną równowagę między złożonością i łatwością użycia, i można go w zasadzie nieskończenie dostosowywać.

Animacja WordPress

Ponadto jest to obecnie najpopularniejsza platforma internetowa ze wszystkich. Jak twierdzi twórca WordPress – Matt Mullenweg – WordPress obsługuje teraz 25% całego Internetu. Czy wszyscy ci ludzie mogą się mylić??

Ok, więc aby zacząć korzystać z WordPress, potrzebujesz tylko swojej domeny i hostingu. Samo oprogramowanie WordPress jest całkowicie bezpłatne.

Na początek możesz iść jedną z tych ścieżek:

a) „Ścieżka szybkiego startu”

  • Przejdź tutaj, aby dowiedzieć się, jak uprościć instalację WordPressa i uruchomienie witryny po południu.
  • Wybierz darmowy motyw z oficjalnego katalogu – upewnij się, że jest on zgodny z celami Twojej witryny i że układ / projekt nie jest daleko od pożądanej struktury (zamierzasz go nieco dostosować).
    • Sprawdź te dwa zasoby, aby dowiedzieć się, jak dostosować istniejący motyw.
    • Alternatywnie możesz wybrać uniwersalny motyw premium, który można dostosować za pomocą wygodnego interfejsu użytkownika (bez kodowania). Motyw X jest dobrym przykładem takiej rzeczy.
  • Zainstaluj niektóre z najpopularniejszych i najlepszych wtyczek, aby uzyskać dodatkowe funkcje.

b) „Ścieżka dogłębna”

  • Zacznij od nauki WordPress poprzez kurs online. Treehouse oferuje niesamowity.
  • Wybierz motyw i wtyczki jak wyżej. Alternatywnie zbuduj od podstaw własny motyw.

Ostatecznie WordPress jest prawdopodobnie najbardziej wszechstronną platformą internetową na rynku. Dzięki niemu możesz zbudować praktycznie każdy rodzaj strony internetowej, nie tylko blogi lub proste witryny biznesowe. Oto lista 47 (!) Różnych sposobów korzystania z WordPress, tylko po to, abyś zaczął myśleć.

Joomla i Drupal

Chociaż nieco różnią się od siebie, Joomla i Drupal są doskonałymi systemami zarządzania treścią dla bardziej zaawansowanych projektów internetowych.

Nie są tak mocne pod względem projektowym, ale można je łatwo dostosować i są w stanie obsłużyć każdą stronę internetową, którą możesz mieć w planie.

Czasami, w zależności od złożoności projektu, opanowanie go może wymagać dużo więcej czasu i wysiłku.

Aby uzyskać bardziej szczegółowe szkolenie, na stronie Lynda.com dostępne są niesamowite kursy, zarówno dla Joomla, jak i Drupal.

Rzeczy, które należy przygotować po tym rozdziale:

  • Pierwszy szkic Twojej witryny został całkowicie zbudowany, bez względu na to, czy zdecydowałeś się skorzystać z WordPressa lub innej platformy.
  • Upewnij się, że jest on zgodny z twoimi początkowymi celami, docelowymi odbiorcami i że zapewnia dobry UX.

ROZDZIAŁ 7: Mobilne projektowanie responsywne

Ponad 60% osób korzysta z telefonów komórkowych i tabletów do przeglądania Internetu

Reakcja na urządzenia mobilne jest obecnie bardzo ważnym aspektem tworzenia stron internetowych, prawdopodobnie bardziej niż kiedykolwiek wcześniej.

Oto o co chodzi w tym problemie:

Zasadniczo teraz jest więcej osób korzystających z urządzeń mobilnych w celu uzyskania dostępu do sieci niż kiedykolwiek wcześniej. Szacuje się, że obecnie jest więcej użytkowników internetu mobilnego niż stacjonarnego (75,1% vs 52,7%).

Ale jest problem.

Nie każdy projekt strony internetowej zostanie zoptymalizowany do wyświetlania na urządzeniach mobilnych od samego początku.

Niektóre typowe problemy to:

  • czcionki są za małe,
  • sam układ w ogóle nie dostosowuje się do mniejszego ekranu,
  • lub technologia użyta do zbudowania witryny niedostępna na urządzeniach mobilnych.

To tutaj pojawia się idea responsywności mobilnej.

Responsywna witryna reaguje na środowisko, w którym jest oglądana. Jeśli jest to komputer stacjonarny, witryna renderuje się w określony sposób. Jeśli jest to telefon komórkowy, renderuje w inny sposób.

Oto lepsze wytłumaczenie: Czym do cholery jest responsywne projektowanie stron internetowych?

Tak więc teraz należy sprawdzić i upewnić się, że witryna działa na urządzeniach mobilnych. Sprawdź to na własnych urządzeniach, ale wypróbuj również test mobilny Google lub przeskocz do narzędzia takiego jak Responsive Design Tester.

Jeśli występują problemy, musisz je naprawić.

Niektóre rozwiązania:

  • Responsive Web Design – jak to zrobić
  • Jak sprawić, by strona reagowała w ciągu około 15 minut

ROZDZIAŁ 8: Wszystko razem

Znasz podstawy, teraz twoja kolej

Poczekaj, już prawie jesteśmy!

To ostatni rozdział naszej dość długiej podróży.

W tym momencie powinieneś zbudować swoją pierwszą stronę internetową… Czy to przy pomocy WordPress, ręcznie zbudowanego HTML / CSS, jakiegoś narzędzia do tworzenia stron internetowych lub innych narzędzi wybranych do pracy.

W skrócie, gratulacje! Ale wciąż jest kilka rzeczy, które warto zrobić:

  • Sprawdź dokładnie to, co omówiliśmy w rozdziałach 1 i 2. Upewnij się, że cele rzeczywiście działają dla użytkownika końcowego i że witryna nie jest myląca.
  • Sprawdź poprawność struktury kodu za pomocą usługi weryfikacji znaczników W3C.
  • Sprawdź, czy nie ma żadnych problemów z bezpieczeństwem w witrynie. Użyj do tego skanera Sucuri.
  • Uzyskaj opinie od społeczności. Sprawdź, co inni ludzie myślą o twojej pracy. Fora w Sitepoint mogą być do tego odpowiednie.

Jeśli po raz pierwszy przeczytasz ten zasób, naprawdę zachęcamy Cię, aby wrócić do niego kilka razy i potraktować go jako plik referencyjny do dalszej edukacji.

Jak powiedzieliśmy na początku, możesz swobodnie korzystać ze spisu treści i przechodzić od rozdziału do rozdziału oraz od zasobu do zasobu według własnego uznania.

Wreszcie, jesteśmy ciekawi … jakie jest twoje największe wyzwanie, jeśli chodzi o tworzenie stron internetowych, tworzenie stron internetowych lub projektowanie? Udostępnij w komentarzach lub za pośrednictwem Twittera. Wszyscy jesteśmy uszami!

Dzięki za przeczytanie, jesteś niesamowity!

  • Razem116
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map