SaaS

1. Architektura i Model Dostarczania Usług

Współczesne tworzenie stron to nie tylko kod, ale przede wszystkim wybór odpowiedniej infrastruktury.

• SaaS (Software as a Service): Model, w którym oprogramowanie jest przechowywane i uruchamiane na serwerach dostawcy (np. Google, Wix). Użytkownik uzyskuje do niego dostęp przez przeglądarkę. Nie musisz martwić się o instalację, aktualizacje ani bezpieczeństwo serwera.

• Chmura Obliczeniowa (Cloud Computing): Model dostarczania zasobów IT (mocy obliczeniowej, miejsca na dysku), w którym płacimy tylko za faktyczne zużycie, a fizyczna lokalizacja serwerów jest dla nas przezroczysta.

• Hosting: Usługa udostępniania miejsca na serwerze, który jest stale podłączony do internetu, aby pliki Twojej strony były dostępne dla użytkowników 24/7.

2. Metodyka Tworzenia Interfejsów

Zrozumienie, w jaki sposób "budujemy" stronę bez pisania kodu linijka po linijce.

• WYSIWYG (What You See Is What You Get): Dosłownie: "Dostajesz to, co widzisz". System edycji, w którym treść wyświetlana podczas tworzenia (np. w edytorze Google Sites) wygląda niemal identycznie jak efekt końcowy opublikowany w sieci.

• No-Code / Low-Code: Podejście do tworzenia oprogramowania i stron, które ogranicza lub całkowicie eliminuje konieczność pisania kodu. Zamiast instrukcji tekstowych używamy wizualnych interfejsów (drag-and-drop).

• Drag-and-Drop (Przeciągnij i upuść): Technika interakcji, w której użytkownik wybiera obiekt (np. obrazek, przycisk) i "przeciąga" go w żądane miejsce na stronie.

3. Elementy Systemów Zarządzania Treścią (CMS)

Nawet najprostszy kreator jak Google Sites posiada cechy systemów CMS.

• CMS (Content Management System): System zarządzania treścią. Oprogramowanie pozwalające na łatwe dodawanie, edytowanie i usuwanie treści na stronie bez znajomości technologii webowych.

• Szablon (Template / Theme): Gotowy układ graficzny strony. Definiuje on kolory, czcionki i rozmieszczenie elementów, zapewniając spójność wizualną całej witryny.

• Responsywność (RWD – Responsive Web Design): Technika projektowania, dzięki której strona automatycznie dopasowuje swój układ do rozmiaru ekranu urządzenia (smartfon, tablet, komputer).

4. Identyfikacja i Adresacja

Pojęcia, które często mylą się.

• Domena: Unikalny adres tekstowy strony (np. mojastrona.pl). To "czytelna dla człowieka" nazwa adresu IP serwera.

• Subdomena: Adres utworzony w ramach domeny głównej (np. projekt.sites.google.com). W Google Sites Twoja strona domyślnie istnieje jako subdomena w domenie Google.

• Adres URL (Uniform Resource Locator): Pełny adres wskazujący na konkretny zasób w sieci (np. https://sites.google.com/view/mojaprojekt/strona-glowna).

1. Przegląd najpopularniejszych rozwiązań

W świecie IT dobór narzędzia zależy od celu projektu, budżetu oraz wymaganego stopnia kontroli nad kodem.

• Google Sites (Witryny Google): Najprostsze narzędzie w rodzinie Google Workspace. Skupia się na błyskawicznym tworzeniu treści. Użytkownik operuje na gotowych sekcjach. Jest całkowicie darmowe, ale oferuje najmniejszą swobodę w modyfikowaniu wyglądu (tzw. "sztywne layouty").

• Wix / Squarespace: Klasyczne kreatory komercyjne. Pozwalają na przesuwanie elementów z dokładnością do jednego piksela. Oferują gotowe moduły e-commerce (sklepy), rezerwacje i bazy danych, ale generują bardzo dużo "nadmiarowego" kodu w tle.

• Webflow: Narzędzie typu "Low-Code" dla profesjonalistów. Zamiast prostego przeciągania, użytkownik operuje na właściwościach CSS (marginesy, pozycjonowanie, flexbox) w interfejsie graficznym. Pozwala na eksport czystego kodu HTML/CSS.

2. Mechanizm działania: Co dzieje się "pod maską"?

Programista musi rozumieć, że kreator jest tylko nakładką graficzną na kompilator.

• Abstrakcja warstwowa: Kiedy użytkownik wybiera opcję "Dodaj przycisk", skrypt kreatora w czasie rzeczywistym generuje strukturę DOM (Document Object Model). W Google Sites proces ten jest całkowicie ukryty przed użytkownikiem.

• System Siatki (Grid System): Większość kreatorów SaaS dzieli stronę na 12 niewidzialnych kolumn. Wszystkie elementy, które dodajemy, muszą się "przykleić" do tych kolumn. Dzięki temu system wie, jak zmienić układ strony, gdy otworzymy ją na smartfonie (automatyczne RWD).

3. Dlaczego programista powinien znać te narzędzia?

Mimo że programista zazwyczaj pisze kod ręcznie, narzędzia SaaS mają swoje miejsce w cyklu produkcji oprogramowania:

• Prototypowanie (Rapid Prototyping): Zamiast pisać kod przez tydzień, można w 2 godziny pokazać klientowi działający model strony w Google Sites, aby zebrać wstępny feedback.

• MVP (Minimum Viable Product): Tworzenie najprostszej wersji produktu, aby sprawdzić, czy pomysł biznesowy w ogóle działa, bez inwestowania dużych środków w development.

• Wewnętrzna dokumentacja: Programiści często używają Google Sites do tworzenia baz wiedzy (Wiki) dla swoich zespołów ze względu na łatwość edycji przez wiele osób jednocześnie.

4. Ograniczenia techniczne – Kiedy SaaS to za mało?

Należy pamiętać o granicach, których te systemy nie przekroczą:

• Brak dostępu do Backend-u: W Google Sites nie stworzysz własnego systemu logowania, bazy danych SQL ani zaawansowanego przetwarzania danych po stronie serwera.

• Vendor Lock-in: Jesteś uzależniony od dostawcy. Jeśli Google zdecyduje się zamknąć usługę, Twoja strona znika, a Ty nie masz możliwości przeniesienia jej "jeden do jednego" na inny serwer (bo nie posiadasz kodu źródłowego).

• Ograniczone SEO: Masz mały wpływ na optymalizację szybkości ładowania kodu czy specyficzne meta-tagi, co jest kluczowe przy pozycjonowaniu dużych portali.

Zadanie 1. Analiza definicji

Wyjaśnij własnymi słowami różnicę między modelem SaaS (Software as a Service) a tradycyjnym modelem instalowania oprogramowania na dysku twardym komputera. Podaj po jednym przykładzie dla każdego modelu z obszaru narzędzi biurowych.

Zadanie 2. Mechanizm WYSIWYG

Rozwiń akronim WYSIWYG i wyjaśnij, na czym polega ta koncepcja w kontekście edytora Google Sites. Jakie jest główne ryzyko związane z poleganiem wyłącznie na tym trybie podczas projektowania profesjonalnych stron?

Zadanie 3. Zależność od dostawcy (Vendor Lock-in)

Zdefiniuj pojęcie Vendor Lock-in. Wyjaśnij, dlaczego tworzenie zaawansowanego serwisu informacyjnego w Google Sites może być ryzykowne dla firmy w kontekście posiadania kodu źródłowego i możliwości przeniesienia strony na inny serwer.

Zadanie 4. Logika siatki (Grid System)

Większość kreatorów wizualnych wymusza układanie elementów wewnątrz pionowych kolumn. Odpowiedz, dlaczego takie podejście jest kluczowe dla zachowania responsywności (RWD) strony internetowej.

Zadanie 5. Porównanie technologii

Wymień trzy kluczowe różnice między kreatorem stron (np. Google Sites) a systemem CMS (np. WordPress). Skup się na kwestiach związanych z instalacją, bazami danych oraz zarządzaniem serwerem.

Zadanie 6. Adresacja i struktura

Wyjaśnij różnicę między domeną główną a subdomeną. Na konkretnym przykładzie adresu URL z Google Sites wskaż, która część adresu jest subdomeną i do kogo należy domena główna.

Zadanie 7. Rola programisty w świecie No-Code

Czy narzędzia typu No-Code (np. Google Sites) sprawią, że zawód programisty stanie się niepotrzebny? Uzasadnij swoją odpowiedź, wskazując na co najmniej dwa ograniczenia kreatorów, które wymagają interwencji programisty piszącego kod (np. JavaScript lub Python).

Zadanie 8. Optymalizacja i wydajność

Często mówi się, że kod generowany automatycznie przez edytory WYSIWYG jest "cięższy" niż kod pisany ręcznie. Wyjaśnij, co to oznacza dla użytkownika końcowego, który ma słabe połączenie internetowe.

Zadanie 9. Bezpieczeństwo w modelu SaaS

Kto odpowiada za aktualizacje bezpieczeństwa, certyfikaty SSL i ochronę przed atakami DDoS w przypadku korzystania z usługi Google Sites: użytkownik końcowy (twórca strony) czy dostawca usługi? Uzasadnij krótką notatką.

Zadanie 10. Architektura informacji

Zaprojektuj teoretyczną strukturę (drzewo stron) dla witryny "Kółko Informatyczne". Wymień co najmniej 4 podstrony i określ, które z nich powinny być widoczne w menu głównym, a które mogą być podstronami (dziećmi) innych sekcji.