Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00168 008574 13446910 na godz. na dobę w sumie
Nowoczesne strony WWW. HTML5, CSS3, Adobe Muse, Wordpress - ebook/pdf
Nowoczesne strony WWW. HTML5, CSS3, Adobe Muse, Wordpress - ebook/pdf
Autor: Liczba stron:
Wydawca: Psychoskok Język publikacji: polski
ISBN: 978-83-8119-294-1 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo
Porównaj ceny (książka, ebook, audiobook).


'Nowoczesne strony WWW' Krzysztofa Wołka to podręcznik do samodzielnego tworzenia własnej wizytówki w Internecie, a nawet czegoś więcej – kreowania swojej obecności w sieci. Koniec ze zlecaniem tego typu prac. Koniec z „czarną magią”, która – jak każda magia – okazała się do perfekcji doprowadzoną umiejętnością jak każda inna.

Projektowanie własnej strony, które jeszcze nie tak dawno wydawało się przedsięwzięciem zarezerwowanym dla wtajemniczonych (programistów) stało się teraz dziecinnie proste, intuicyjne jak obsługa smartfona. Wystarczy skorzystać z istniejących szablonów, tzn. wybrać sobie taki, który najbardziej się spodoba, i dopasować go do swoich potrzeb. Nie znaczy to wcale, że strona ma wyglądać jak miliony czy miliardy innych (jak w Facebooku). Inwencja zawsze pozostanie w cenie, a chęć wyróżnienia się z tłumu chyba jest wpisana w ludzkie DNA.

Już na podstawie spisu treści przewodnika ułożonego w stylu „krok po kroku” łatwo się zorientować w tematyce, której wcale nie trzeba ogarniać (tzn. rozumieć), a wystarczy ją po prostu zastosować zgodnie z instrukcją.

Autor nie poprzestaje na przekazaniu podstawowych wiadomości, jak to ma miejsce zwykle w podręcznikach, ale przedstawia czytelnikom narzędzia, dzięki którym – jeśli tylko chcą – mogą wspiąć się na sam szczyt.

Kiedyś mówiono, że co niezapisane, nie istnieje. Później, że nie istnieje ten, kto nie ma własnej strony WWW albo konta na Facebooku. Nie wszyscy jednak chcą być znalezieni. Ci mogą sobie darować lekturę książki Wołka. Ci natomiast, którym zależy na własnym wizerunku, a tym bardziej ci, którzy wykorzystują Internet jako narzędzie pracy – sposób na życie, środek do realizacji swoich pragnień, poznawania świata czy nawet zarabiania – powinni sięgnąć po 'Nowoczesne strony WWW', by posiąść wiedzę oraz umiejętności umożliwiające realizację zamierzeń.

Tym bardziej że autor nie poprzestał na standardowych stronach internetowych, ale część swojej pracy poświęcił na przedstawienie ich dopełnienia, jakim z pewnością są blogi umożliwiające przekazywanie opinii, poglądów, a także szybkie interakcje z czytelnikami/użytkownikami. Skupił się przede wszystkim na darmowym systemie blogowym WordPress, ale nie pominął opcji płatnych, ekskluzywnych, stwarzających użytkownikom więcej możliwości.

Jeśli nawet nie ma się wrażenia, że świat tradycyjnych mediów (prasy, radia, telewizji) przeminął, Internet – który jeszcze ich nie zastąpił – zmienił i wciąż zmienia ten świat. A nade wszystko jest bardziej egalitarny. Jak w Hyde Parku każdy może siebie wyrazić, jeśli chce i potrafi. A jeśli ma co wyrazić (coś ciekawego), ktoś może się tym zainteresować.

Dopełnieniem tego podręcznika jest druga książka Krzysztofa Wołka – 'Rzeczywistość wirtualna dla każdego', która zawiera sporą część informacji z Nowoczesnych stron, stanowiących podstawę i wprowadzenie do „wyższego wtajemniczenia”, jakim jest niewątpliwie kreowanie VR i korzystanie z urządzeń VR.

Warto więc wobec zainteresowania tematem obie pozycje wziąć pod uwagę.

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

WERSJA DEMONSTRACYJNA Wydawnictwo Psychoskok Konin 2018 Krzysztof Wołk „Nowoczesne strony WWW. HTML 5, CSS3, Adobe Muse, Wordpress” Copyright © by Krzysztof Wołk, 2018 Copyright © by Wydawnictwo Psychoskok Sp. z o.o. 2018 Wszelkie prawa zastrzeżone. Żadna część niniejszej publikacji nie może być reprodukowana, powielana i udostępniana w jakiejkolwiek formie bez pisemnej zgody wydawcy. Projekt okładki: Krzysztof Wołk Korekta: Bogusław Jusiak Skład epub, mobi i pdf: Kamil Skitek Krzysztof Wołk - www.wolk.pl ISBN: 978-83-8119-294-1 Wydawnictwo Psychoskok Sp. z o.o. ul. Spółdzielców 3, pok. 325, 62-510 Konin tel. (63) 242 02 02, kom. 695-943-706 http://www.psychoskok.pl/ http://wydawnictwo.psychoskok.pl/ e-mail:wydawnictwo@psychoskok.pl Spis treści Wstęp 1. Struktura HTML 1.1. Definiowanie struktury strony 1.2. Stworzenie podstawowej struktury strony 1.3. Podstawowe elementy blokowe 1.4. Podstawowe elementy liniowe 2. Znaczniki semantyczne 2.1. Wstęp do znaczników HTML 5 Metadata kontent Sectioning kontent Heading kontent Phrasing kontent Embedded kontent Interactive kontent 2.2. Elementy tworzące sekcje 2.3. Elementy nietworzące sekcji 2.4. HTML 5 outline 3. Cięcie techniczne – wstęp do CSS 3.1. Cięcie techniczne Zadanie 3.2. Tworzenie dokumentu CSS Zadanie Zadanie Zadanie Zadanie 4. Elementy blokowe i opływanie 4.1. Elementy blokowe Zadanie 4.2. Opływanie Zadanie: Pozycjonowanie elementów w nagłówku Zasada 1. Zasada 2. Zadanie: Opływanie pozostałych elementów 5. Nowe selektory i pozycjonowanie CSS Zadanie: Stylowanie menu Zadanie: Stylowanie aside Zadanie: Stylowanie boksu ustawień Zadanie: Stylowanie nowości Zadanie: Boksy reklamowe Zadanie: Stopka Zadanie dodatkow 6. Responsywny układ elementów HTML 7. Strona internetowa portfolio z formularzem kontaktowym 8. HTML 5 Pokaz Slajdów/Galeria WWW 9. Adobe Muse – WWW bez linii kodu 9.1. Nowy projekt – New Site 9.2. Widok Planowania 9.3. Tryb projektowania strony – Design 9.4. Wstęp do Parallax Scroll 9.5. Narzędzie tekstowe – wprowadzanie tekstu 9.6. Wstawianie grafik 9.7. Formularze kontaktowe 9.8. Wstawianie linków – Hyperlinks 9.9. Widgety 9.10. Zadanie 9.11. Responsywność na stronie 9.11.1. Responsywny tekst 9.11.2. Kotwice Zadanie 9.12. Efekt Parallax Scroll 9.12.1. Przykładowy projekt logo dla strony. Zadanie 1. 9.12.2. Logo z przesuwającym się tłem. Zadanie 2. 9.12.3. Zmiana obrazu – przesuwanie logo Zadanie 3. 9.12.4. Wyostrzenie rozmycia Zadanie 4. 9.12.5. Parallax we wszystkie kierunki Zadanie 5. Zadanie 6. 9.13. Większa strona z Parallaxą 9.13.1. Import elementów stworzonych w Adobe Edge Animate 9.13.2. Parallax 9.13.3. Kotwice 9.13.4. Dodanie Menu 9.13.5. Górne Menu przesuwane wraz ze stroną 9.13.6. Element zatrzymuje się i nie wyjeżdża 9.13.7. Wideo automatycznie zapętlone z pliku 9.13.8. Wideo pochodzące z YouTube. 9.13.9. Przysłonięcie wideo maską w formacie PNG 9.13.10. Formularze kontaktowe. 9.13.11. Formularz kontaktowy w Lightbox 9.14. Horyzontalny efekt Parallax Scroll Zadanie 1. 9.14.1. Widgety 9.14.1.1. Widget o nazwie Fullscreen Video Background. Zadanie 2. 9.14.1.2. Widget Interactive Split Comparison Zadanie 3. Zadanie 4. 10. Wordpress jako darmowy system blogowy – wordpress.com Wstęp Z lektury niniejszej publikacji dowiesz się w sposób bardzo praktyczny, oparty na ciekawych przykładach prosto z życia wziętych, jak możesz stworzyć od podstaw swoją pierwszą stronę internetową, korzystając z najnowszych technologii. Będzie to HTML 5, CSS 3, Wordpress oraz aplikacje Adobe Dreamweaver oraz Adobe Muse. Aplikacja Dreamweaver nie jest wymagana, wystarczy dowolny edytor tekstowy, np. Notepad++, który posiada kolorowanie składni. Dzięki lekturze stworzysz strony WWW, które będą responsywne oraz będą posiadały efekt paralaksy. Nauczysz się ręcznie z poziomu kodu modyfikować strony tworzone w generatorach. 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ż folderu utworzonego wcześniej miejsce „wypasionastrona”. położenia 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 lecz pliki „wypasionastrona”, tworzyć bezpośrednio w środowisku Dreamweavera. Będą one zapisywane właśnie w tym katalogu. foldery możesz i 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 foldery o następujących nazwach: folder. Stwórz cztery 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 dodatkowych metainformacji, umieszczania dla wyszukiwarek internetowych. Stronę można podejrzeć, otwierając ją w przeglądarce internetowej, rozwijając ikonkę np. 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ść 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. znaczników posiada znaczniki 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: takiej prostej strony można przedstawić 9. Strukturę następująco: 10. Oczywiście jest to najbardziej podstawowa struktura, serwis jednak każdy, nawet najbardziej internetowy można przedstawić w ten sposób. rozbudowany, 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 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. informacje 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 elementem jest h1 idzie – wyświetlany (np. najważniejszym, a co za tym największą czcionką. artykułu). nagłówek jest 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 wygenerować stronie przykładowy tekst „lorem ipsum”, aby wstawić go na stronę. http://pl.lipsum.com/ możesz 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 ; d. Czy to, co wpiszesz lub umieścisz pomiędzy elementami a i /a , będzie klikalne i odnosiło do tego, co napiszesz w parametrze href. 3. Spraw, aby wszystkie elementy w listach były odnośnikami. Póki nie mamy gotowej witryny, w miejsce href wstawiaj hash (znak „#”). 4. Następnie zaraz po elemencie p w odpowiednim miejscu (według podglądu) wstaw odnośnik „więcej”. 5. Element b pogrubia tekst, a element i robi z niego kursywę, choć tak naprawdę wygląd elementów, jak np. pogrubienie czy kursywa, powinno się uzyskiwać za pomocą arkuszy stylów, o których będzie mowa w następnych zajęciach. W HTML 5 często stosuje się dodatkowe znaczniki semantyczne, a więc takie, które nie mówią nic o tym, jak element ma wyglądać, ale o tym, co on oznacza. W HTML 5 substytutami b oraz i są elementy strong oraz em . Oznaczają one, że pewien fragment jest „istotny”. Większość przeglądarek wyświetla takie „istotne” fragmenty jako pogrubienie i kursywę, jednak nie musi tak być. Standard się rozwija i w przyszłości strong nie musi być pisany boldem, tylko np. większą czcionką w innym kolorze. 6. Zastosuj do wybranych fragmentów tekstu elementy strong , em i a . 2. Znaczniki semantyczne 1. do omawiania Zanim przejdziemy znaczników semantycznych, uzupełnijmy stronę o pozostałe elementy, aby kontent „wypasionej” strony był adekwatny do tego, co widać na screenie „opisana struktura.jpg” w katalogu „_assets”. 2. Otwórz w Dreamweaverze witrynę „cw 03 – start”. W tym ćwiczenie się poprawnie wykonane katalogu znajduje z poprzednich zajęć. 3. Na naszej stronie brakuje sekcji „Dołącz do nas” widocznej na screenie. Napisz ją zaraz pod nagłówkiem h1 Wypasiona strona /h1 : a. Napis „Dołącz do nas!” powinien być nagłówkiem h2 . b. Napis „jesteśmy na:” powinien być paragrafem p . c. Ikonki social media powinny być odnośnikami. 4. Jeśli porównasz to, co zrobiliśmy na poprzednich zajęciach, z tym, co jest na screenie, zauważysz, że brakuje jeszcze pola wyszukiwarki. Wyszukiwarka jest bardzo prostym formularzem. W HTML formularze definiuje się przy pomocy znacznika form . To, co jest pomiędzy znacznikami form , definiuje zawartość tego formularza. W szczególności może to być pole do wprowadzania danych – znacznik input . Przepisz zaraz za elementem /ul definiującym strukturę menu poniższy kod dla wyszukiwarki: ludziom, jak i maszynom Znaczniki semantyczne to takie, które nadają znaczenie zarówno (przeglądarkom internetowym). Znaczniki semantyczne służą właśnie do nadawania znaczenia poszczególnym elementom strony. Na początku wybór odpowiednich znaczników może być dość trudny. Weźmy dla przykładu nagłówki, których jest sześć: h1 , h2 … h6 . W przeglądarce h1 jest największy, a h6 najmniejszy. Zawartość h1 powinna być bardziej istotna niż np. zawartość h3 . Z drugiej strony istnieje możliwość zmiany ich wielkości wyświetlania. Bez problemu można uczynić znacznik h3 większym od h1 . Z perspektywy przeglądarki internetowej nie stanowi to różnicy, ale jeśli człowiek spojrzy na kod, za pierwszym razem może być zaskoczony i zmylony – element h3 nie powinien być większy niż h1 . Po lewej stronie jest zaprezentowana symbolicznie strona w XHTML, a po prawej w HTML 5. 2.1. Wstęp do znaczników HTML 5 Możesz myśleć o znacznikach HTML 5, że są zorganizowane według takich kategorii: • Metadata kontent • Flow kontent • Sectioning kontent • Heading kontent • Phrasing kontent • Embedded kontent • Interactive kontent Metadata kontent Zawartość, która ustanawia zachowanie całej zawartości strony. Używa się jej do połączenia dokumentu HTML z innymi dokumentami, np. CSS. Np. element meta lub elementy style lub scripts . Elementy metadata kontent są zlokalizowane w sekcji head . Sectioning kontent Ta kategoria jest nowa w HTML 5 i zawiera takie elementy, jak: article , aside , nav czy section . W3C wyjaśnia sectioning kontent jako „defining the scope of headings and footers”, czyli że mogą zawierać nagłówki i stopki (może być ich więcej na stronie). KONIEC WERSJI DEMONSTRACYJNEJ Dziękujemy za skorzystanie z oferty naszego wydawnictwa i życzymy miło spędzonych chwil przy kolejnych naszych publikacjach. Wydawnictwo Psychoskok
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Nowoczesne strony WWW. HTML5, CSS3, Adobe Muse, Wordpress
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: