HTML i JavaScript

5/5 - (1 vote)

HTML jest standardowym językiem hipertekstowym do przygotowania stron WWW i ma kilka różnych wersji. Wiele przeglądarek stron WWW rozumie wersję języka HTML 2, a większość nowszych wersji także HTML 3.  Strony WWW mogą być tworzone i edytowane za pomocą edytora tekstowego, procesora tekstowego lub przeglądarki WWW.

Systemy komputerowe zawierają mikroprocesory, które sterują działaniem komputera. Mikroprocesor rozpoznaje tylko informacje przekazywane dwójkowo i działa na podstawie sekwencji rozkazów, nazywanych kodem maszynowym. Pisanie długich programów w kodzie maszynowym jest niezmiernie trudne, więc zamiast niego do programowania stosowane są języki wyższego poziomu. Język niskiego poziomu jest w pewnym stopniu podobny do kodu maszynowego, ale używa się w nim makropoleceń w postaci słów kluczowych (instrukcji), zastępujących sekwencje rozkazów kodu maszynowego. Języki wyższego poziomu mają składnię opartą na języku angielskim, co powoduje, że programy są łatwe w czytaniu i modyfikacji. W większości programów rzeczywiste działanie sprzętu (hardware) jest niewidoczne dla programisty. Kompilator zmienia zapis w języku wyższego poziomu na kod maszynowy. Szeroko stosowanymi językami wyższego poziomu są: C/C++, BASIC, COBOL, FORTRAN i Pascal, natomiast przykładem języka niskiego poziomu jest np. Assembler procesora 80486.

Java jest językiem wyższego poziomu, który został specjalnie opracowany do opisywania stron WWW i jest dobrze dostosowany do tworzenia aplikacji sieciowych. Jest oparty na języku C++ (ale prostszy i łatwiejszy od niego) i początkowo był rozwijany przez firmę Sun Microsystem. Obecnie większość przeglądarek stron WWW nowszej wersji współpracuje z Javą i ma interfejsy do tego języka. Oto kilka głównych cech języka Java:

  • programy w języku Java mogą być uruchamiane autonomicznie lub przez przeglądarki Web, wtedy zwane są apletami.
  • Java jest językiem „przenośnym” i aplety mogą być uruchamiane na komputerach z dowolnym typem mikroprocesora.
  • Aplety Javy są niezależne od zastosowanego sprzętu (hardware’u) i systemu operacyjnego. Na przykład sam program nie musi mieć bezpośredniego interfejsu do takich urządzeń komputerowych jak karta video lub myszka. Typowe języki wyższego poziomu, takie jak C/C++ i Pascal, dają po kompilacji kod maszynowy (wynikowy) zależny od sprzętu przeznaczenia, który z tego powodu może być wykonywany tylko na komputerze określonego typu i przy określonym systemie operacyjnym.
  • Przy konfiguracji klient/serwer Java pozwala na taką współpracę, w której aplety mogą być uruchamiane na odległym komputerze (serwerze), który w ten sposób odciążą lokalny komputer (zwykle komputery odległe są wielozdaniowymi komputerami o dużej mocy obliczeniowej i zaawansowanej technologicznie architekturze).
  • Kompilator języka Java tworzy autonomiczne programy lub aplety. Wiele przeglądarek nowszych wersji ma zintegrowany kompilator języka Java.

Za pomocą typowego programu w C++ można uzyskać dostęp do twardego dysku. Byłoby to ryzykowne w Internecie, gdyż jakiś zamówiony włamywacz (hacker) lub nowicjusz mogliby spowodować zniszczenie zbiorów na dysku serwera internetowego. Aby temu zapobiec w Javie nie zastosowano żadnych mechanizmów obsługi zbiorów wejścia/wyjścia. Java umożliwia odczytywanie z serwera plików w standardowych formatach (takich jak GIF, JPG), ale nie pozwala na zapisywanie jakichkolwiek zmian na dysku serwera internetowego.

JavaScript

Programy pisane w językach wyższego poziomu mogą być kompilowane do postaci wykonywalnej lub na bieżąco interpretowane po uruchomieniu programu interpretera. Java jest językiem programowania, który wymaga kompilacji przed użyciem napisanego w nim programu. Nie może być więc zatem użyty, jeżeli programista nie ma odpowiedniego kompilatora. Z drugiej strony, JavaScript jest językiem, który może być interpretowany przez przeglądarkę. Jest on pod wieloma względami podobny do Javy i pozwala programiście wprowadzić opis w tym języku (skrypt) do dokumentu HTML opisującego stronę WWW. JavaScript ma niewielką liczbę typów danych numerycznych, logicznych i łańcuchowych, akceptowanych przez większość współczesnych przeglądarek, takich jak Microsoft Internet Explorer i Netscape. HTML jest użyteczny wtedy, gdy opisywane strony są krótkie i nie zawierają wyrażeń, pętli lub nie ma potrzeby dokonywania wyborów. JavaScript jest najbardziej dogodnym, spośród języków wyższego poziomu do przygotowania aplikacji internetowych, tak dla serwerów, jak i użytkowników. Może być wykorzystywany do odpowiedzi (zareagowania) na działania użytkownika, takie jak kliknięcie przyciskiem myszki, wprowadzenie formularza i przeglądanie stron.

Ważną zaletą jaką ma JavaScript w porównaniu z HTML jest to, że umożliwia stosowanie funkcji bez jakichkolwiek szczególnych wymagań deklaracyjnych. Łatwiej też z niego korzystać niż z Javy, ponieważ ma prostszą składnię, wbudowaną specjalizowaną funkcjonalność i minimalne wymagania przy tworzeniu obiektów.

Ważnymi elementami koncepcyjnymi w Javie i w JavaScript są obiekty. Obiekty są w zasadzie zasobnikami dla różnych wartości liczbowych. Główne różnice między Javą a JavaScript to:

¨     Program w JavaScript jest interpretowany przez komputer lokalny, natomiast program w języku Java jest, przed jego wykonaniem, kompilowany na serwerze.

¨     Programy w JavaScript są wbudowane w opis strony HTML, podczas gdy aplety w języku Java nie wchodzą do opisu stron w HTML (są odrębnymi dokumentami), a są tylko dostępne ze stron HTML.

¨     W JavaScript zmienne można przyjmować dowolnie (swobodnie przypisywanie wartości – to oznacza, że typ danych dla zmiennych nie musi być deklarowany), natomiast w Javie nie można tak swobodnie stosować zmiennych (typ danych dla zmiennych musi być zawsze deklarowany przed ich użyciem).

¨     JavaScript ma dynamiczne powiązania, przy których odwołania obiektowe są sprawdzane w czasie wykonania programu, natomiast w Javie są powiązania statyczne, przy których odwołania obiektowe są ustalone w czasie kompilacji programu.

Java

5/5 - (1 vote)

Java ma ogromną przewagę nad konwencjonalnymi językami programowania w tym, że daje kody wynikowe nie zorientowane sprzętowo (jej kod wynikowy nie jest zależny od sprzętu). Dzieje się tak, ponieważ otrzymany po kompilacji kod, nazywany kodem bajtowym (bytecode), jest interpretowany przez przeglądarkę WWW. Niestety, prowadzi to do wolniejszego wykonywania programu, ale tak dużo czasu zajmuje wykonywanie graficznych programów interfejsowych użytkownika uaktualniających grafikę, że ta strata czasu na kompilację, w stosunku do czasu zajmowanego przez sam program użytkownika nie jest krytyczna.

Przewaga języka Java nad konwencjonalnymi językami programowania może być scharakteryzowana w następujących punktach:

  • Jest on bardziej rozwojowym językiem niż C++ i Pascal i został opracowany tak, aby można go było dostosować do rozwijającego się środowiska. Można go niezmiernie łatwo modyfikować, dodając nowe metody i dodatkowe biblioteki, bez wpływu na istniejące aplety. Zastosowany w Internecie wspiera większość standardowych postaci formatów audio i video.
  • Ma wbudowane w język udogodnienia obsługi sieci (wsparcie dla gniazd TCP/IP, adresów i datagramów URL i IP).
  • Chociaż Java jest oparta na języku C i C++, to omija niektóre trudne obszary kodu C/C++.
  • Wspiera aplikacje klient/serwer, w których aplety Java są uruchamiane na serwerze, a klient przyjmuje uaktualniające informacje graficzne. W najbardziej skrajnych przypadkach, klient może być po prostu terminalem graficznym, który uruchamia aplety Javy poza siecią. Małe, sieciowe komputery „black-box” są jednymi z podstawowych zasad Javy i można spodziewać się, że w przyszłości małe komputery oparte o Javę mogą zastąpić złożone komputery PC czy stacje robocze w zastosowaniach ogólnego przeznaczenia, jak dostępność Internetu lub zabawa w gry sieciowe.

Strony WWW

Oceń tę pracę

Podstawowym składnikiem wszystkich witryn WWW są strony – dokumenty HTML, które możemy oglądać za pomocą przeglądarki. Strony WWW są plikami tekstowymi, w których zapisywane są informacje wyświetlane przez przeglądarki oraz etykiety HTML – polecenia interpretowane przez przeglądarkę, służące do określenia wyglądu strony.

Język HTML nie jest skomplikowany – ilość jego etykiet nie jest zbyt wielka, a sposób ich użycia jest prosty. Dzięki temu, że strony zapisywane są jako normalne pliki tekstowe, można je tworzyć nawet za pomocą najzwyklejszego edytora tekstowego, takiego jak program Notepad. Jednakże największym minusem takiego tworzenia stron WWW jest to, iż nie widzimy ostatecznej postaci strony, która czasami może się różnić od tego, co zaplanowaliśmy. Właśnie w tym miejscu można w pełni docenić pomoc jaką są programy wspomagające tworzenie stron WWW – nie tylko oddzielają one twórców od języka HTML i jego etykiet, lecz także od razu pozwalają na zobaczenie efektów pracy.

Tworzenie pierwszej witryny WWW

Możliwości projektowania witryny WWW:

Określenie zawartości witryny – pierwszym krokiem przy tworzeniu każdej witryny WWW jest jej zaplanowanie. Tu znajduje się omówienie określenia treści, trafienia do odpowiednich odbiorców i tego, czy używać zaawansowanych technologii, takich jak Java i ActiveX.

Wybór efektownego wyglądu – wpływ wyglądu witryny na odwiedzających. Wrażenie wizualne i odczucia są tak samo ważne, jak łatwość poruszania się po witrynie.

Importowanie istniejącej witryny – jeśli zaczęło się już budować witrynę WWW za pomocą innych narzędzi, można wykorzystać to jako punkt startowy dla nowej witryny WWW tworzonej za pomocą FrontPage 'a,

Rozpoczynanie od kreatora lub szablonu – tworzenie nowej witryny można rozpocząć bardzo szybko za pomocą niektórych kreatorów i szablonów, jakie udostępnia FrontPage.

Budowanie witryny WWW od podstaw – rozpoczynanie tworzenia witryny WWW od zera.

Edycja stron WWW

Dzięki temu, iż kod źródłowy stron WWW zapisywany jest jako normalny tekst, istnieje możliwość ich edycji za pomocą najprostszego nawet edytora tekstowego (Notepad). Tworzenie stron w taki sposób posiada wiele wad – niewątpliwie największymi są: konieczność znajomości języka HTML oraz duży nakład pracy niezbędny do stworzenia strony i nadania jej odpowiedniego wyglądu.

Zupełnie inaczej wygląda tworzenie dokumentów HTML za pomocą takich programów, jak FrontPage Editor. W programach tego typu praca jest znacznie  szybsza i efektywniejsza – wiele czynności, takich jak wyrównywanie tekstu, określanie jego kolorów, wielkości czcionki czy też stylów, wymaga jedynie kilku kliknięć myszką. Wykonywanie innych czynności, jak na przykład tworzenie tablic, formularzy, map graficznych, formatowanie wszelkich elementów stron, czy też dodawanie do nich różnego typu elementów aktywnych, jest w znacznym stopniu ułatwione poprzez okna dialogowe, które w całości oddzielają twórców stron od języka HTML, jego etykiet i parametrów.

Na strony WWW składa się wiele elementów. Jest to przede wszystkim tekst, który użytkownik będzie mógł przeczytać na stronie, umieszczona na niej grafika, elementy multimedialne, formularze itp. Sam tekst można organizować w różny sposób – w akapity, tabele czy też różnego typu listy.

Formatowanie stron WWW

O ile wpisywanie tekstu strony WWW nie jest zazwyczaj specjalnym problemem, o tyle może przysporzyć wielu trudności. Formatowanie tekstu obejmuje całość czynności służących do nakładania stronie WWW zamierzonej postaci. Określanie postaci może dotyczyć całej strony WWW, jak i poszczególnych jej elementów: paragrafów, tabel, hiperłączy czy też list.

W zasadzie  wszystkie operacje dotyczące określenia postaci tekstu wykonać można za pomocą przycisków dostępnych na pasku narzędzi Format.

FrontPage Editor udostępnia system okien dialogowych pozwalających na bardzo szybkie i wygodne określenie właściwości wyglądu wszystkich możliwych elementów , które mogą być umieszczane na stronach WWW. Okna te wyświetlane są poprzez wybranie odpowiedniej opcji z menu kontekstowego. Opcje dostępne w tym menu zależą bezpośrednio od miejsca strony WWW, w którym menu zostało wywołane.

Dodawanie elementów stron

Opisywane do tej pory czynności służyły bądź to zarządzaniu witrynami (w przypadku FrontPage Explorera), bądź tworzeniu lub formatowaniu stron WWW. Oprócz przedstawienia metod wpisywania tekstu – dodawania akapitów można umieszczać na stronach WWW elementy (listy, tablice, obrazki, czy też różnego typu elementy aktywne), które decydują o atrakcyjności tworzonych stron.

FrontPage Editor udostępnia narzędzia, które umożliwiają nie tylko dodawanie, lecz także określenie wyglądu i właściwości bardzo dużej ilości różnego typu elementów. Poczynając od pojedyńczych znaków, na stronach WWW możemy tworzyć listy, hiperłączy, dodawać obrazy lub inne pliki multimedialne, tabele, elementy aktywne – takie jak skrypty, obiekty ActiveX, aplety Javy; możemy także tworzyć dynamiczne strony prezentujące informacje zapisane w bazach danych.

Sposób umieszczania na stronach WWW poziomej linii lub wybranego symbolu jest bardzo prosty – wystarczy w tym celu wybrać jedną opcję lub podać dane w oknie dialogowym. Jednakże takie zagadnienia, jak tworzenie hiperłączy łączących poszczególne strony witryny i pozwalających na przemieszczanie się do innych stron WWW, znajdujących się w dowolnym miejscu Internetu, tworzenie skryptów lub korzystanie z innych elementów aktywnych – są znacznie bardziej skomplikowane i wymagają szerszego przedstawienia.

Listy

Wiele jest elementów decydujących o atrakcyjności strony WWW. Przede wszystkim jest to na pewno ogólna jej kompozycja, dobór tła, kolorów, elementów graficznych. Elementem takim jest także sposób prezentacji informacji znajdujących się na stronie. Tekst umieszczać możemy na stronach WWW w postaci akapitów, w tabelach lub też w formie list.

Listy nie są żadnym elementem stron WWW – są one jedynie stylem prezentacji umieszczonego na nich tekstu. W polu Change Style na pasku narzędzi Format, znajdują się takie opcje, jak: Bulleted List, Directory List, Numbered List, Menu, Definition. Są to właśnie style, których można użyć do tworzenia list.

Listy mogą posłużyć do prezentowania różnego typu informacji. Na przykład lista numerowana (Numbered List) doskonale nadaje się do przedstawienia sekwencji czynności, w których istotna jest kolejność; natomiast lista punktowa (Bulleted List) jest lepsza do zaprezentowania grupy informacji związanych ze sobą tematycznie, lecz których kolejność nie odgrywa roli. Directory (katalog) przedstawia ciąg krótkich określeń.  FrontPage Editor pozwala także na tworzenie list o strukturze zagłębionej – list w listach, oraz na określenie sposobów numerowania i znakowania list.

Hiperłącza i znaczniki

Jednymi z najważniejszych elementów, jakie można umieszczać na stronach WWW, są hiperłącza. Dzięki nim możemy przechodzić do innych stron WWW – zarówno do tych, które wchodzą w skład tej samej witryny, jak i tych, które znajdują się w zupełnie innych witrynach WWW. Hiperłącza nie muszą zresztą wskazywać na strony WWW – mogą prowadzić do plików dowolnego typu. Dzięki temu możemy na przykład pozwolić użytkownikowi na skopiowanie wybranego pliku. Zazwyczaj jednak hiperłącza używane są do przemieszczania się pomiędzy stronami WWW.

Hiperłącza mogą mieć różne postaci – może to być fragment tekstu oznaczony w specjalny sposób, obrazek lub specjalna mapa graficzna – obrazek zawierający kilka obszarów, których kliknięcie powoduje przejście do różnych stron WWW.

Każde hiperłącze, niezależnie od swojego wyglądu, musi mieć adres docelowy – adres strony, która zostanie wyświetlona w przeglądarce po użyciu danego hiperłącza. Istnieją dwa podstawowe rodzaje adresów: bezwzględne i względne. Adres bezwzględny składa się z protokołu, adresu serwera oraz ścieżki dostępu do strony na serwerze – czyli nazwy pliku i kartoteki, w której jest on umieszczony. Adresów bezwzględnych używamy wtedy, gdy chcemy stworzyć hiperłącze ze stroną znajdującą się w dowolnej innej witrynie WWW. Natomiast połączeń względnych używamy wówczas, gdy chcemy stworzyć połączenie ze stroną wchodzącą w skład witryny. W adresie tego typu umieszczamy jedynie ścieżkę dostępu do pliku w którym zapisana jest strona.

Tabele

Tabele są bardzo ważnymi i niesłychanie przydatnymi elementami stron WWW. Mogą być wykorzystywane do wielu celów – począwszy od prostego wypisywania tekstu w formie kilkukolumnowej tabelki, poprzez tworzenie estetycznie wyglądających formularzy, na określaniu struktury całej strony skończywszy.

Tworzenie tabeli może mieć różną skalę trudności i jest zależne od tego, do czego chcemy użyć tabeli oraz jaki efekt planujemy osiągnąć. O ile stworzenie tabeli nie nastręcza problemów, to jednak nadanie jej odpowiedniego wyglądu nie jest już zadaniem zbyt łatwym. Pierwszym problemem może się okazać duża ilość dostępnych możliwości; na przykład możemy określać sposób podawania wielkości tabeli, szerokości jej ramek, wielkości obszaru pomiędzy zawartością komórki a jej ramką, sposób wyrównywania tekstu, możemy także łączyć komórki sąsiadujących wierszy czy też kolumn itp. Drugim problemem jest fakt, iż ostateczny kształt i wielkość tabeli zależą od zawartości wszystkich jej komórek; dzieje się tak dlatego, że wielkość komórki jest również zależna od jej zawartości.

Tabele nie muszą służyć jedynie do prezentowania tekstów; można w nich także umieścić elementy graficzne lub pola formularzy. Są one bardzo często używane także do określenia kształtu całej strony WWW. Za ich pomocą w bardzo wygony sposób można umieszczać wszystkie elementy strony w odpowiednich miejscach.

Narzędzia dostępne w menu Table FrontPage Edytora pozwalają na bardzo szybkie i wygodne tworzenie oraz określenie wyglądu tabel, bez jakiejkolwiek ingerencji w kod źródłowy HTML.

Interfejsy w e-commerce: produkty szyte na miarę

Oceń tę pracę

Dzisiaj mam jakiś napad inicjatyw prosumenckich…

Rano przeczytałem w AdMagazine wpis nt. Nokia Build, czyli nowej oferty firmy Nokia, dającej możliwość przez stronę WWW dowolnie spersonalizować wygląd swojego telefonu (konkretnie – modelu 7310 Supernova). Na podobnych zasadach jak wcześniej firma Nike powołała swoją inicjatywę NikeID.

Później, przeglądając materiały z tegorocznej edycji WUD w Berlinie, „Usability im Web 2.0”, w prezentacji Franka Hohenschuh trafiłem na slajd, w którym przedstawia akcję „My Müsli: custom-mixed cereals”, a tuż obok zrzut interfejsu ze znanego sklepu, w którym każdy może sobie stworzyć wzór koszulki – Spread Shirt, a sklep ten (czy raczej sieć sklepów, bo można tam także założyć swój sklep i zarabiać na sprzedaży), wydrukuje specjalnie dla Ciebie ten konkretny wzór. Tak jak książkę można wydrukować na zamówienie (w Helion, ale i w PWN), a już niebawem – jak głosi wieść – będzie można kupić w Amazon.com wydrukowane kilka stron z konkretnej książki, miast kupować ją całą.

I co najciekawsze wydaje się być w tej całej prosumenckiej inicjatywie, to rozwój interfejsów, które by tą ideę Szycia na Miarę mogły obsłużyć – by użytkownik się nie spocił zanadto i do FAQ-a zbyt często nie zaglądał, a wyrzeźbił swoje cacko takie, co by od razu zechciał ich karton kupić i, zadowolony, do znajomych linki porozsyłał (najlepiej jeszcze przy tym korzystając z – nomen omen – interfejsu „Eksportuj kontakty z poczty e-mail”). W tym sensie rację miał Gates, gdy na przełomie lipca / sierpnia ubiegłego roku stwierdził, że najbliższe czasy w technologiach będą należały do rozwoju interfejsów (a mamy też rozkwit interfejsów hardware’owych – multitouch w Apple Air (pisałem o tym), Wii, czy w końcu rezygnacja z klawiatury na rzecz touchscreen w telefonii jako takiej.

Poniżej kilka interfejsów z wymienionych wyżej inicjatyw prosumenckich. Warto się zastanowić czy aby i Twój biznes nie jest już gotowy do tego typu rozwiązań. Pytanie tym bardziej zasadne, że coraz częściej – pracując dla moich klientów – natrafiam na przypadki, gdzie klasyczne rozwiązania umożliwiające dotarcie do produktu, albo jego skonfigurowanie, już nie wystarczają.

I żeby pokazać coś z rodzimego podwórka – interfejs ze sklepu FajneUpominki.pl. Tysz fajny 😉

Aktualizacja: i jeszcze z innej prezentacji z WUD z Berlina (Steffena Hück), znalazłem stronę, na której, w ramach firmy jubilerskiej Swarovski, udostępniono klientom interfejs do zaprojektowania swojej biżuterii! Świetna rzecz. Nasz W. Kruk by mógł coś takiego wystawić 🙂

Grid: Boskie proporcje (teoria)

Oceń tę pracę

Siatki (ang. grids) to niezbyt popularny temat w krajowym środowisku projektowym, a który pojawia się czasem w dyskusjach, niekoniecznie oddając swój sens (zdarzyło mi się już kilkukrotnie słyszeć od klienta, bym mu poprawił siatki, mając na uwadze, że rozchodziło mu się o architekturę informacji).

Architekturę informacji – ale i layout – można opierać o siatki, ale nie jest to niezbędne dla czytelnej prezentacji danych (toczyłem zresztą w swoim czasie spór o to z jednym grafikiem). Podstawową przesłanką projektowania w oparciu o siatki jest teoria wywodząca się ze szkoły Pitagorejskiej (bliskiej mojej umysłowości), wg której u podstaw świata stały liczby i związki między nimi.

By pozwolić zrozumieć podstawy teorii siatki, spróbuję dokonać rekonstrukcji mojej wiedzy z zakresu studiów z filozofii 🙂

Elementy teorii piękna

Pitagorejczycy wierzyli, że najwyższym dobrem w świecie jest ład, który określali mianem harmonii (wcześniej ten termin nie istniał i to właśnie Pitagorejczycy nadali mu sens). Harmonia była wyrazem stosunków między poszczególnymi bytami, w tym stosunków w ramach elementów bytów. Teoria ta dotyczyła całej wiedzy na temat świata – zarówno spraw związanych z metafizyką jak i natury piękna, która jest przedmiotem estetyki. Wedle teorii tej by móc stwierdzić, czy dane dzieło jest piękne, należało zbadać stosunek poszczególnych części dzieła określanych mianem modułów. Dotyczyło to tak architektury, jak i sztuki sakralnej i użytkowej.

***

Na marginesie: na podstawie teorii piękna opartej o badanie stosunków modułów do siebie, powstał kanon (zapożyczony zresztą ze sztuki starożytnego Egiptu), w tym słynny kanon Leonarda da Vinci, zilustrowany jako mężczyzna z rozłożonymi ramionami, wpisany w kwadrat i koło.

***

Dążąc do określenia podziału idealnego, Pitagorejczycy odkryli liczbę φ (fi), wyznaczającą złote – czy też boskie – proporcje:

boska proporcja (łac. sectio aurea) – podział odcinka na dwie części tak, by stosunek długości dłuższej z nich do krótszej był taki sam, jak całego odcinka do części dłuższej (stosunek ten nazywa się złotą liczbą i oznacza grecką literą φ).”

Liczba ta odegrała kolosalne znaczenie w architekturze, wyznaczając m.in. ślimaczycę głowicy jońskiej (na rysunku poniżej).

Na jej bazie wzniesiono także m.in. Partenon (studium proporcji), wyrzeźbiono słynne posągi – Apolla Belwederskiego (studium proporcji) czy Afrodytę z Milo. Ma także ona znaczenie w ramach tego co wiemy z zakresu teorii widzenia: otóż oko ludzkie ulega wielu złudzeniom optycznym i tak na przykład, by uniknąć deformacji widzianej ludzkim okiem kolumny, leciutko pogrubia się ją w 1/3 wysokości.

Teoria siatki

W formie uproszczonej złote proporcje oddaje się w ramach trójpodziału, dzieląc płaszczyznę na trzy części, w celu wydzielenia ram dla kompozycji: 2/3 + 1/3 (poniżej).

Jak widać na powyższych rysunkach, stosując zasadę trójpodziału tworzymy coś w rodzaju siatki, na bazie której będziemy mogli zakomponować podstawowe bloki treści (zdjęcia, video, tekst), określić ich szerokości, odstępy między nimi, a czasem nawet i wysokości tak, że w ten sposób powstała kompozycja będzie spełniała warunki harmonii (w sensie teorii Pitagorejczyków rzecz jasna).

W malarstwie sztukę opartą o studium siatek rozpropagował holenderski malarz, Piet Mondrian.

Oczywiście nie wszystkie siatki zbudowane są o zasady złotego podziału. Czasem efektem końcowym ma być dynamiczna kompozycja, albo taka, która wywołuje w widzu rozdrażnienie, a nie poczucie harmonii.

Metoda kompozycji na bazie siatek przyjęła się także w ramach składu prasy, książek i drukowanych produktów reklamowych (rysunek poniżej). Jeśli zaś chodzi o WWW, to pierwszą bodajże stroną internetową zbudowaną w oparciu o siatkę była witryna New York Times. Ale o tym będzie już w osobnym wpisie, poświęconym praktyce stosowania siatek.

Polecam uwadze knigi:

  • L. Roberts, Grids: Creative Solutions for Graphic Design, Wiley, 2008.
  • G. Ambrose, P. Harris, Basics Design: Grids, AVA Publishing, 2008.
  • T. Samara, Making and Breaking the Grid: A Graphic Design Layout Workshop, Rockport Publishers, 2005.
  • K. Elam, Grid Systems: Principles of Organizing Type, Princeton Architectural Press, 2004.
  • B. Tondreau, Layout Essentials: 100 Design Principles for Using Grids, Rockport Publishers, 2009.

W języku polskim chociażby:

  • G. Ambrose, P. Harris, Twórcze projektowanie, PWN, 2007 (chociaż generalnie dość średnia to pozycja).