Szybki start

Chcę być on-line już dziś, strona niech powoli nabiera barw.

Tu i teraz nie są synonimami dobrze zrobionej strony internetowej. Im ma być lepsza, tym więcej pracy trzeba w nią włożyć. Nawet budowana na gotowych rozwiązaniach nigdy nie jest w stu procentach bezbłędna, nie wspominając o nadchodzących aktualizacjach wszystkiego, na czym jest budowana dziś. Jednak nie wszystkie projekty trzeba ukrywać do ostatniego momentu podgrzewając atmosferę, aż do wyznaczonej 9:30, gdy wreszcie mogą wtargnąć tłumy wykupując zapowiedziany cud techniki sadowniczej, kto pierwszy, ten lepszy. Jeśli na celu nie ma zarobku w tak specyficzny sposób, strona w formie bardzo podstawowej może stanąć prawie od razu. Nie trzeba jej wcale robić w domowym zaciszu z sąsiadem remontującym mieszkanie i naszą smogosferę, aż klient zacznie nas budzić wczesną porą około 11, by sprawdzić postępy w pracy. Pierwszy etap z zadatkiem zmobilizuje twórcę, bo praca będzie widoczna na co dzień przez wszystkich zainteresowanych, oraz zleceniodawcę, który nie zobaczy nic, poza tym, co zdoła zebrać i przesłać front-end deweloperowi.

Wczesny etap powstawania strony

W kilku słowach, co następuje:

  • wybranie nazwy domeny (np. over40.pl),
  • zakup i aktywacja domeny (tak do 48 godzin, a często wcześniej),
  • zakup hostingu (proponuję 20% zniżki na LH.pl),
  • instalacja WordPress,
  • wstępna konfiguracja z umieszczeniem bardzo wymaganych danych, jak:
    • nazwa serwisu (np. firmowe strony internetowe),
    • jego opis (wyjaśniający cel strony np. tworzenie stron www dla organizacji i biznesu),
    • logo,
    • kolory (3 główne kolory dopasowane do logo, ewentualnie głównego zdjęcia),
    • wybrane czcionki (2 kroje, z księgi znaku, jeśli posiadana),
    • zdjęcia (np. siedziba firmy, aspekt pracy, kojarzone z działalnością i celem),
  • pierwszy artykuł (o firmie, działalności, ze słowami kluczowymi pod SEO),
  • ikona, tzw. favicon, którą widać na zakładce po lewej w przeglądarce internetowej (mini logo),
  • nazwy firmy, czy instytucji,
  • adres,
  • telefon,
  • e-mail (najlepiej z zakupionej domeny np. kontakt@over40.pl),
  • imiona do kontaktu (a nawet mini zdjęcie).

Bez niektórych informacji wstyd zaczynać, więc nie zaniedbujmy klientów.

Taka mini wersja przyszłości musi być responsywna. Noworodek jest małym człowiekiem, który będzie tylko rósł, piękniał umysłowo i fizycznie, nawet gdy jest jeszcze bez włosów i zębów. Strona z niewielką ilością informacji też może kompletnie wyglądać, a nawet powinna, bo wtedy łatwiej jest ją rozwijać. [Przykład umieszczę wkrótce].

Tytułowy szybki start, to rodzaj podejścia do projektowania strony w czasie jej budowania. Trzeba mieć na uwadze, że wszelkie zmiany są sumowanymi kosztami, czyli gdy ostatecznie wybrana zostanie np. trzecia wersja z pięciu, to zapłacić będzie trzeba za wszystkie, ponieważ były tworzone, jak prototypy, tylko finalnie nie weszły do produkcji, a koszty zostały poniesione na ich stworzenie i tak. Opłaty też są pobierane etapowo, bo produkt istnieje (domena, hosting, zainstalowany i skonfigurowany WordPress), a tylko się go rozwija.

Przy pisaniu kodu do przygotowanej przez grafika makiety, oczywiście zaakceptowanej przez klienta, jest inaczej, ponieważ zmiany są dopiero brane pod uwagę po pełnym zakodowaniu. Przynajmniej teoretycznie, ponieważ wszystko tu zależy od budżetu klienta.

Zadatek, który jest znaczną częścią opłaty za stronę, to pokrycie nie tylko pracy do pewnego etapu, ale przede wszystkim zwrot kosztów za stosowane przez developera narzędzia. To rozwiązanie pozwala zatrzymać pracę na jakiś czas, gdy rozliczony zostanie kolejny etap. Strona będzie działać, choć niedokończona, bo bez optymalizacji i bez wsparcia. Natomiast jej rozwój może być kontynuowany po czasie, albo przez kogoś innego wliczając w to pracowników firmy zlecającej. Korzyścią dla twórcy, poza na pewno mniejszym zarobkiem, jest brak zobowiązania do jakichkolwiek nieodpłatnych poprawek, lub całkowita z nich rezygnacja.

Rozpoczęcie od zaraz jest dobrym wyborem, gdy trudno określić zlecającemu, czy będzie w stanie dostarczyć potrzebne materiały w racjonalnie krótkim czasie. Wtenczas rozłożenie tworzenia strony na zamknięte etapy oddzielone w czasie mimo, że w sumie kosztowniejsze dają obu stroną perspektywę, której zawsze brakuje w kompletnych projektach.

Trudno mówić o szybkim starcie, jako rozwiązaniu dla sklepu internetowego. W biznesie wszystko musi być zapięte na ostatni guzik. Natomiast strony tematyczne, gdzie zdjęcia i artykuły będą pojawiać się przesz cały rok mogą skorzystać z takiego modelu, nie koniecznie godząc się na kilkumiesięczne przerwy budowaniu, gdy jest to dopiero szkielet strony.

Wybór jak zawsze należy do klienta.

Języki w skrócie

Strona Internetowa to HTML, reszta jest dodatkiem, acz bardzo ważnym, bez którego nowoczesne dzisiejsze strony nie są w stanie się obejść. Myślę tu o CSS, czyli opisywaniu głównie wyglądu i rozmieszczenia każdego elementu. Kolejnym jest język JavaScript (JS), dzięki któremu i jego wielu bibliotekom jesteśmy dziś w stanie budować złożone zależności wszystkich elementów i interakcji z użytkownikami. Są jeszcze języki biorące udział w zarządzaniu samym kodem strony, jak PHP używany w WordPressie, który montuje plik strony html z wielu fragmentów w tym pobranych z baz danych, obsługiwanych w WordPress przez kolejny język zwany SQL. Główne języki są kompilowane w przeglądarce, a ich supersety (jak np. TypeScript dla JS, czy SASS dla CSS) nie, ale pomagają je usystematyzować i wygenerować przed załączeniem do strony. Jest jeszcze wiele języków, które w zamyśle nie mają nic wspólnego z technologiami webowymi, a dostały możliwość swojego zaistnienia w tym infosystemie dzięki WebAssembly.

HTML

Akronim z angielskiego Hyper Text Markup Language, to właśnie ten główny język od stron internetowych. Nie można go niczym zastąpić.* Jakich by narzędzi nie używać, zawsze musi być do przeglądarki internetowej wysłany dokument html. Na jego podstawie budowany jest model strony tzw. DOM, czyli Document Object Model. To nim manipuluje JavaScript, np. poprzez bibliotekę jQuery. Są w niej odwołania do wykonania różnych funkcji po załadowaniu DOM. Wtedy pisząc wywołanie używamy konstrukcji:

// JavaScript kod

$(document).ready(function(){ //a tu umieszczamy cały potrzebny kod });

HTML jest językiem znaczników. To, co widzi się w edytorze tekstu, aby zaistniało na stronie trzeba opisać, żeby przeglądarka wiedziała, jak ma traktować poszczególne elementy. I tak, na przykład słowa tworzące tytuł artykułu, aby zostały odczytany jako tytuł muszą trafić między znaczniki, w poniższym przykładzie h2, i tekście akapitu p.

<!-- HTML kod -->

<h2>Języki programowania stron WWW</h2>

<p>Strona Internetowa to HTML, reszta jest dodatkiem, acz bardzo ważnym...</p>

Dopiero wtedy wiadomo, że składają się one na tytuł, a kolejne na akapit. Więcej o języku można znaleźć pod tym odnośnikiem: MDN.

CSS

Kontynuując przykład, można się spodziewać, że tytuł wyświetli się zgodnie z naszymi oczekiwaniami. Najprawdopodobniej w osobnej linii i o większej czcionce od następującego po nim tekstu. Tak też jest, ale tylko za sprawą predefiniowanych styli w przeglądarkach, które jednak różnią się między sobą w tej kwestii.

Aby sprostać sztuce prezentowania słowa pisanego należy odpowiednio opisywać znaczniki html. H1, czyli nagłówek (ang. header) najwyższego poziomu, odpowiada głównemu tytułowi strony, a w odniesieniu do książki, jej tytułowi. H2 tytułom stron, artykułów, rozdziałów książek, a h3 ich podrozdziałom, podtytułem itd. H5 może być stosowane np. do nagłówków list. Należy pamiętać, żeby na stronie nagłówki występowały w logicznej kolejności. Numery przy H oznaczają ważność nagłówka, a nie jego wielkość, chociaż można odnieść takie wrażenie, ponieważ domyślnie każde H o większym numerze, jest mniejsze od poprzedniego. Bez zrozumienia tego do powiększania czcionki nagłówka wybierzemy nagłówek o mniejszym numerze i nie świadomie zaburzymy strukturę, która jest wykorzystywana przez czytniki dla osób niedowidzących, oraz roboty indeksujące pod SEO. Wielkość i inne cechy nagłówków, czy innych znaczników opisuje się w stylach. Przykład stylu dla nagłówka tej strony poniżej.

/* CSS kod */

h2 {
  font-family: 'PT Serif';
  font-weight: 700;
  font-size: 62px;
  line-height: 1;
  color: #252B31;
}

Stylizowanie znaczników koduje się najczęściej w osobno zapisywanych plikach z rozszerzeniem css, czyli w kaskadowych arkuszach stylów.

Kaskadowe odnosi się do hierarchii ważności stylizowania tego samego elementu kilka razy. Każdy później wczytany arkusz ma większe uprawnienie do nadpisania wcześniejszego stylu, o ile tamten nie ma nadanego jeszcze innego, specjalnego atrybutu, którego kolejny arkusz nie może znieść zwykłym ujęciem stylu znacznika. Ta hierarchia jest wyliczana w tzw. specyfikacji, gdzie znaczniki dostają też rangi ze względu na opis stylu przypisanego do nich identyfikatora i klas. Na koniec muszę wspomnieć o wyjątku zapisywanym jako !important, który podnosi rangę wybranego stylu. Więcej, tym razem po angielsku: MDN.

envelopephone-handset