Rzeczywistość wirtualna (VR) dla każdego – Aframe i HTML 5 E-Book

Krzysztof Wołk

• Herausgeber: Wydawnictwo Psychoskok
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Polnisch
• Veröffentlichungsjahr: 2018

Beschreibung

Do rzeczywistości wirtualnej jedni mają bliżej, inni dalej, tak jak do Twin Peaks. Ale nie o to chodzi, czy agent Dale Cooper miał bliżej niż agenci Dana Scully i Fox Mulder. Wszyscy oni byli bowiem i pozostali elementami tej rzeczywistości – bohaterami filmów i seriali telewizyjnych (różnych). Rzeczywistość wirtualna, która była czymś „zewnętrznym”, do oglądania, zmienia się może jeszcze nie całkiem w coś „wewnętrznego”, ale na tyle interesującego, że można wypróbować ją już samemu. Dosłownie. Zresztą nie tylko wypróbować – dzięki urządzeniom i aplikacjom VR – ale również samemu tworzyć. "Rzeczywistość wirtualna dla każdego" Krzysztofa Wołka jest podręcznikiem dającym podstawy samodzielnego kreowania elementów VR z wykorzystaniem platformy A-Frame. Stanowi niejako dopełnienie innego podręcznika tego autora, pt. "Nowoczesne strony WWW", który można potraktować jako wprowadzenie do świata wirtualnej rzeczywistości, tym bardziej że elementem wspólnym obu pozycji jest część poświęcona projektowaniu stron internetowych. Czytelnik dowie się w sposób bardzo przystępny, oparty na ciekawych przykładach prosto z życia, jak zaprogramować swoją stronę internetową, korzystając z najnowszych technologii – HTML 5, CSS 3 – oraz aplikacji Adobe Dreamwever, a nawet dowolnego edytora tekstu, np. Notepad++. Dzięki informacjom zawartym w książce każda osoba będzie mogła stworzyć responsywne strony internetowe z efektem paralaksy. Nauczy się także modyfikować strony tworzone w generatorach. Co więcej, dowie się również, jak z przy użyciu wspomnianego HTML 5 oraz zestawu bibliotek A-Frame w bardzo łatwy sposób stworzyć aplikacje działające w wirtualnej rzeczywistości. Będą one bez problemu współpracowały z profesjonalnymi zestawami VR, takimi jak Oculus i HTC Vive, a także aplikacjami na telefony komórkowe, takimi jak Google Cardboard. Jak w każdej sytuacji czytelnicy mają do wyboru przynajmniej dwa wyjścia: albo czekać na to, co się stanie, i ewentualnie to obserwować, albo brać w tym udział, tworzyć. Nie przesądzając o tym, które rozwiązanie jest lepsze, "Rzeczywistość wirtualna…" Krzysztofa Wołka może zainteresować zwolenników jednego i drugiego.

Leseprobe

Wstęp

Z lektury niniejszej publikacji dowiesz się w sposób bardzo praktyczny, oparty na ciekawych przykładach prosto z życia, jak zaprogramować swoją stronę internetową, korzystając z najnowszych technologii – HTML 5, CSS 3 oraz aplikacji Adobe Dreamwever.

Aplikacja Dreamweaver nie jest wymagana, gdyż wystarczy dowolny edytor tekstowy, np. Notepad++, który pozwala na kolorowanie składni.

Dzięki informacjom zawartym w niniejszej książce stworzysz strony WWW, które będą responsywne i będą posiadały efekt paralaxy. Nauczysz się ręcznie z poziomu kodu modyfikować strony tworzone w generatorach. Co więcej, dowiesz się także, jak z przy użyciu HTML 5 oraz zestawu bibliotek Aframe (aframe.io) w bardzo łatwy sposób stworzyć aplikacje działające w wirtualnej rzeczywistości. Będą one bez problemu współpracowały z profesjonalnymi zestawami VR, takimi jak Oculus i HTC Vive, a także tanimi nakładkami na telefony komórkowe, takimi jak Google Cardboard.

Materiały znajdziesz pod adresem:https://goo.gl/8aBNQ2.

1. Struktura HTML

1.1. Definiowanie struktury strony

1. Utwórz na dysku katalog „wypasionastrona”.

2. Otwórz program Adobe Dreamweaver CS6 i z menu Site wybierz New Site.

3. W wyświetlonym okienku wpisz nazwę witryny oraz wskaż miejsce położenia wcześniej utworzonego folderu „wypasionastrona”. 

4. Kliknij w „Save”.

5. Zlokalizuj panel Files w Adobe Dreamweaver. Będzie on pokazywał wszystkie pliki i katalogi, które umieścisz w folderze „wypasionastrona”, lecz pliki i foldery możesz tworzyć bezpośrednio w środowisku Dreamweavera. Będą one zapisywane właśnie w tym katalogu.

6. Utwórz pierwszą czystą stronę HTML o nazwie „index.html”. Z menu File wybierz New. W wyświetlonym okienku zaznacz opcje jak niżej. 

7. Zauważ, że w panelu Files pojawił się plik „index.html”. Będzie to nasza strona główna. Zawsze pierwszą stronę należy nazwać „index.html”.

8. Stwórz dodatkowe foldery na przyszłe dodatkowe pliki. Klikając w panelu Files prawym przyciskiem myszy w nazwę witryny, wybierz New folder. Stwórz cztery foldery o następujących nazwach:

a. „_assets”,

b. „_css”,

c. „_images”,

d. „_scripts”.

9. W tym momencie panel Files powinien wyglądać podobnie do tego poniżej. 

10. Sprawdź na dysku folder „wypasionastrona” – struktura odpowiada tej stworzonej w programie Dreamweaver.

11. Do poszczególnych folderów przekopiuj pliki znajdujące się w materiałach.

12. Po przekopiowaniu kliknij prawym przyciskiem myszy w nazwę witryny i wybierz Refresh. Powinieneś zobaczyć wszystkie pliki w panelu Files w odpowiednich katalogach.

1.2. Stworzenie podstawowej struktury strony

1. Kliknij dwukrotnie w „index.html”, aby otworzyć go do edycji.

2. W Dreamweaverze pracuj póki co w trybie Split z podglądem Live. 

3. Zobaczysz podstawową strukturę swojej strony HTML:  

4. Napisz coś pomiędzy znacznikiem otwierającym <body> a znacznikiem zamykającym </body>.

5. Po napisaniu fragmentu tekstu kliknij w okno podglądu po prawej stronie. Powinieneś zobaczyć swój tekst na stronie internetowej. Wszystko, co napiszesz w znacznikach <body>, jest widoczne w oknie przeglądarki. Sekcja <head> służy do umieszczania dodatkowych metainformacji, np. dla wyszukiwarek internetowych. Stronę można podejrzeć, otwierając ją w przeglądarce internetowej, rozwijając ikonkę i wybierając Preview in Firefox. Mogą tam pojawić się inne nazwy przeglądarek, w zależności od konfiguracji komputera, lecz rekomendowanymi przeglądarkami do pracy nad stronami są Firefox lub Google Chrome.

6. Dokument HTML składa się z zagnieżdżonych znaczników HTML. Każdy znacznik ma swoją nazwę i jest umieszczony pomiędzy znakami „<” oraz „>”, np. znacznik <body> lub <html>. Większość znaczników określa pewien zakres informacji, które są objęte tymi znacznikami. Z tego powodu większość znaczników posiada znaczniki otwierające i zamykające. Znaczniki zamykające są tak samo zbudowane jak otwierające, z tą różnicą że wstawiany jest znak „/” zaraz po „<”, czyli np. znacznik otwierający <body> posiada swój znacznik zamykający </body>. Wszystko, co znajdzie się pomiędzy tymi dwoma znacznikami, będzie należało do „body” – tak jak wcześniej napisany przykładowy tekst.

7. Skoro pewne elementy są zagnieżdżone w sobie, warto tę strukturę wizualizować w postaci wcięć w kodzie. Pamiętaj, że jest to istotne z punktu widzenia przyszłego rozbudowywania serwisu. Wcięcia możesz robić, zaznaczając jakiś blok kodu i wciskając klawisz Tab (tabulator). Jeśli wciśniesz go wraz z klawiszem Shift, wcięcia będą się robiły w odwrotną stronę (usuwasz wcięcia).

8. Zrób wcięcia tak, aby było widać, które elementy i w jakich są zagnieżdżone. 

Powinno to wyglądać mniej więcej tak:

9. Strukturę takiej prostej strony można przedstawić następująco:

10. Oczywiście jest to najbardziej podstawowa struktura, jednak każdy, nawet najbardziej rozbudowany, serwis internetowy można przedstawić w ten sposób.

11. Pomiędzy „<” a „>”, oprócz nazwy znacznika, mogą znaleźć się dodatkowe parametry tego znacznika, np. powyżej znacznik <meta> ma dodatkowy parametr charset o wartości utf-8. Zapisuje się to tak: <meta charset=”utf-8”>, a więc nazwy znaczników oraz nazwy parametrów piszemy bez cudzysłowów. Natomiast wartości parametrów zawsze starajmy się umieszczać w cudzysłowie.

12.  Da się zauważyć, że nie wszystkie znaczniki mają znaczniki zamykające. W powyższym przykładzie znacznik <meta> nie ma znacznika </meta>. Chodzi o to, że wszystkie niezbędne informacje zostały przekazane bezpośrednio w samym znaczniku w postaci parametrów. W tym przypadku chodziło o przekazanie, w jakim standardzie strona jest zakodowana – charset=utf-8.

13.  Ciekawostka: znaczniki, które nie wymagają domknięcia, w HTML 4 trzeba było domykać same w sobie, czyli np. dodając znak „/” na samym końcu: 

<meta charset=”utf-8” />. HTML 5 jest tolerancyjny – jeśli tego nie dodamy, nie będzie błędu.

14. Na koniec zmodyfikuj znacznik <title>. Definiuje on to, co pokazuje się w górnym pasku przeglądarki. Sprawdź, wciskając klawisz F12. Twoja strona powinna wyświetlić się w domyślnej przeglądarce internetowej.

1.3. Podstawowe elementy blokowe

1. Elementy blokowe to takie, które „rozpychają” się na całą szerokość elementu nadrzędnego – w naszym przypadku na całą szerokość okna przeglądarki. Wszystko, co jest po elementach blokowych, wyświetlane jest pod nimi.

2. Znaczniki <h1>, <h2>… </h6> definiują nagłówki strony (np. nagłówek artykułu). <h1> jest elementem najważniejszym, a co za tym idzie – wyświetlany jest największą czcionką.

3. Otwórz z FTP plik „cw01 – podglad.jpg”. Jest to podgląd całego ćwiczenia – jak powinno ono wyglądać na koniec tej lekcji. W podglądzie na czerwono zaznaczone są na czerwono typy znaczników, którymi zostały wykonane dane elementy.

4. Skonstruuj wszystkie znaczniki nagłówkowe (<h1>, <h2>, <h3>) znajdujące się w dokumencie.

5.  Element <p> definiuje paragraf tekstu. Na stronie http://pl.lipsum.com/ możesz wygenerować przykładowy tekst „lorem ipsum”, aby wstawić go na stronę.

6. Zdefiniuj w odpowiednich miejscach paragrafy tekstu, posługując się przykładowym „lorem ipsum”.

7.  Element <img> musi zawsze posiadać następujące parametry:

• src=”ścieżka dostępu do obrazka JPG, GIF lub PNG”;

• alt=”napis który pojawia się w momencie ładowania obrazka lub po przytrzymaniu kursora myszy nad obrazkiem”.

Przykład wstawienia obrazka może wyglądać tak:

<img src=”_images/foto.jpg” alt=”obrazek z wakacji”>.

8. Wstaw w dokumencie w odpowiednich miejscach obrazki – tak jak pokazano na podglądzie. 

9.  Podczas pisania znacznika img w Dreamweaverze program podpowiada fragmenty kodu. Gdy postawisz pierwszy cudzysłów po src=, możesz wybrać 

  i wskazać element w dowolnym katalogu w strukturze strony. Ważne, aby to był katalog należący do witryny!

10. Takie elementy listy, jak np.:

• pierwszy,

• drugi,

• trzeci,

definiuje się przy pomocy znacznika <ul>, a następnie poszczególne elementy przy pomocy znacznika <li>. Taka przykładowa lista mogłaby wyglądać następująco:

<ul>

<li>pierwszy</li>

<li>drugi</li>

<li>trzeci</li>

</ul>.

11. Stwórz listy w odpowiednim miejscu – tak jak na podglądzie.

12.  Na podglądzie elementy listy są w kolorze fioletowym i podkreślone. Ponadto w podglądzie występuje napis „więcej” i również jest podkreślony. Są to linki odsyłające do innych stron, lecz w tym przypadku są to już elementy liniowe, o których mowa w następnym rozdziale.

1.4. Podstawowe elementy liniowe

1. Elementy blokowe układają się jeden na drugim. Czasami jednak chcemy np. wyróżnić fragment tekstu lub wstawić w tekście odnośnik i nie chcemy, aby elementy spadały niżej, lecz były wyświetlane w tej samej linii.

2. Element <a> jest odnośnikiem do innej strony, innej witryny bądź innego miejsca na tej samej stronie. Może przyjmować takie parametry:

a. href=”adres strony lub witryny do, której linkujemy”;

b. target=”_blank” – link otworzy się w nowej karcie przeglądarki. Jeśli nie wstawisz tego parametru, link otworzy się domyślnie w tym samym oknie;

c. Przykład odnośnika linkującego do strony wp.pl może wyglądać następująco:

<a href=http://www.wp.pl target=”_blank”>kliknij tutaj aby przejść do wp.pl</a>;