PROJEKTOWANIE STRON WWW

Transkrypt

1 Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015/2016, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW dr inż. Robert Banasiak PROJEKTOWANIE STRON WWW RESPONSIVE WEB DESIGN

2 Odnośniki Responsywny układ elementów HTML, czyli taki który będzie zmieniał swoje właściwości CSS w zależności od pewnych czynników.

3 @media Dzięki oraz dodatkowym zapisom dla tych reguł, jakie pojawiły się wraz z rozwojem specyfikacji CSS3, możemy tworzyć reguły CSS, które zostaną aktywowane tylko w określonych przez nas sytuacjach.

4 @media Oznaczenie all aural braille embossed handheld print projection screen tty tv Przeznaczenie dla wszystkich typów urządzeń dla syntezatorów mowy i dźwięku dla urządzeń przeznaczonych dla niewidomych, które umożliwiają czytanie dla drukarek brailla bezprzewodowe urządzenia ręczne dla podglądu wydruku oraz materiałów, które zostaną wydrukowane dla prezentacji projektorowych dla komputerów z kolorowym ekranem dla dalekopisów, terminali albo przenośnych urządzeń z ograniczonymi możliwościami wyświetlania dla telewizora

5 @media przykład <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>darmowy Kurs CSS</title> <style> div { background-color:red; } </style> </head> <body> <div>to jest przykładowy element - div</div> </body> </html>

6 @media przykład (w kodzie HTML) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>darmowy Kurs CSS</title> screen { div { background-color:red; } } </style> </head> <body> <div>to jest przykładowy element - div</div> </body> </html>

7 @media (w stylach CSS) div { background-color:gold; handheld, tv { div { background-color:red; } }

8 @media (w stylach CSS) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>darmowy Kurs CSS</title> <style media="handheld, tv"> div { background-color:red; } </style> </head> <body> <div>to jest przykładowy element - div</div> </body> </html>

9 @media (w stylach CSS) Oznaczenie width height device-width device-height color color-index aspect-ratio device-aspectratio grid monochrome orientation resolution scan Przeznaczenie określenie wartości szerokości okna przeglądarki internetowej określenie wartości wysokości okna przeglądarki internetowej określenie wartości rozdzielczości ekranu urządzenia (szerokość) określenie wartości rozdzielczości ekranu urządzenia (wysokość) określenie liczby bitów na kolor lub określenie czy urządzenie posiada kolorowy ekran określenie wartości głębi kolorów, które obsługuje dane urządzenie określenie wartości proporcji szerokości do wysokości okna przeglądarki internetowej określenie wartości proporcji szerokości do wysokości rozdzielczości ekranu urządzenia określenie urządzenia z ograniczonymi możliwościami wyświetlania określenie liczby bitów na piksel w urządzeniach monochromatycznych, jednokolorowych określenie orientacji pionowej lub poziomej urządzenia określenie wartości gęstości pikseli dla danego urządzenia określenie czy urządzenie posiada skanowanie obrazu progresywne czy międzyliniowe

10 @media (w stylach CSS) Oznaczenie and przecinek not only Przeznaczenie operator " i ", służy do tworzenia bardziej precyzyjnych warunków w operator " lub ", służy do tworzenia bardziej precyzyjnych warunków w operator " negacji ", służy do tworzenia bardziej precyzyjnych warunków w operator przeznaczony dla starszych przeglądarek all and (min-width:480px) and (max-width:800px) { div { background-color:red; } }

11 @media (w stylach all and (min-width:480px) and (max-width:800px) { div { background-color:red; } } all and (min-width:480px) and (maxwidth:800px) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość szerokości okna przeglądarki internetowej będzie większa niż 480 pikseli oraz (and) będzie mniejsza niż 800 pikseli, tyczy się to wszystkich urządzeń (all), w jakich zostanie wyświetlona nasza strona internetowa.

12 Poćwiczmy screen and (min-width:1600px) { } all and (max-width:900px) and (min-width:300px) { } all and (min-color:8) { } screen and (aspect-ratio:4/3) { } all and (orientation:portrait) { } handheld, tv and (min-width:300px) and (min-color:8) { }

13 Rozdzielczości

14 Viewport i dyrektywy <meta name="viewport" content="width=device-width, initial-scale=1"> Znacznik viewport określa sposób wyświetlania strony na urządzeniach mobilnych pozwala ustawić opcje skalowania, w tym także domyślne przybliżenie.

15 Viewport i dyrektywy width, height określają szerokość i wysokość wyświetlanego obszaru strony. Dla dyrektywy width możemy również podać specjalną wartość device-width, której użycie powoduje, że szerokość obszaru wyświetlania jest równa szerokości ekranu urządzenia (tzn. strona jest rozciągnięta w 100% na ekranie urządzenia). <meta name="viewport" content="width=320, height=480">

16 Viewport i dyrektywy initial-scale w dyrektywie tej ustawiamy domyślne przybliżenie (zoom) dla strony. Wartość ta jest zazwyczaj zależna od przeglądarki, lecz możemy wymusić by nasza mobilna wersja strony domyślnie wyświetlała się w 10-krotnym przybliżeniu: <meta name="viewport" content="initialscale=10"> <meta name="viewport" content="initialscale=1">

17 Viewport i dyrektywy initial-scale w dyrektywie tej ustawiamy domyślne przybliżenie (zoom) dla strony. Wartość ta jest zazwyczaj zależna od przeglądarki, lecz możemy wymusić by nasza mobilna wersja strony domyślnie wyświetlała się w 10-krotnym przybliżeniu: <meta name="viewport" content="initialscale=10"> <meta name="viewport" content="initialscale=1">

18 Viewport i dyrektywy jak używać? Znacznik ten mówi o tym, jak strona powinna być wyświetlana na urządzeniu mobilnym. Zatem jeśli Twoja strona nie jest dostosowana do urządzeń mobilnych, możesz całkowicie pominąć użycie meta-tagu viewport. Jeśli jednak jest inaczej to: <meta name="viewport" content="width=devicewidth, initial-scale=1"> W ten sposób strona zostanie rozciągnięta do 100% szerokości obszaru ekranu oraz pozostanie w skali 1:1 z możliwością skalowania.

19 Nowe elementy HTML 5: <article>...</article> Artykuł reprezentuje samodzielną część dokumentu lub aplikacji, która potencjalnie mogłaby być opublikowana niezależnie od pozostałej treści na stronie (np. w kanale RSS). Może to być np.: wiadomość wysłana na forum dyskusyjnym, wpis na blogu, komentarz użytkownika pod artykułem, interaktywny widget. W pojedynczym dokumencie może być więcej niż jeden element ARTICLE. Znaczniki te można również zagnieżdżać (umieszczać jeden w drugim).

20 <article> <h1>mój pierwszy wpis na blogu</h1> <p>stało się. Postanowiłem założyć własnego bloga. Nie wiem, czy będę miał czas, aby regularnie go aktualizować, ale zrobię co w mojej mocy.</p> <section> <h2>komentarze</h2> <article> <p>życzę powodzenia.</p> </article> <article> <p>nareszcie. Bardzo się cieszę.</p> </article> </section> </article>

21 Nowe elementy HTML 5: <section>...</section> Sekcja dokumentu lub aplikacji to tematyczna grupa treści, zwykle zawierająca nagłówek. Przykładami sekcji mogą być: rozdziały książki lub pracy badawczej, przełączane zakładki okna dialogowego. Strona domowa może zostać podzielona na przykładowe sekcje: wprowadzenie, lista nowości, informacje kontaktowe. <section id="moja-sekcja"> <h1>moja sekcja</h1>... </section> (...) Przejdź do: <a href="#moja-sekcja">moja sekcja</a>

22 Nowe elementy HTML 5: <section>...</section> Sekcja dokumentu lub aplikacji to tematyczna grupa treści, zwykle zawierająca nagłówek. Przykładami sekcji mogą być: rozdziały książki lub pracy badawczej, przełączane zakładki okna dialogowego. Strona domowa może zostać podzielona na przykładowe sekcje: wprowadzenie, lista nowości, informacje kontaktowe. <section id="moja-sekcja"> <h1>moja sekcja</h1>... </section> (...) Przejdź do: <a href="#moja-sekcja">moja sekcja</a>

23 Nowe elementy HTML 5: <section>...</section> <section> <h2>komputer stacjonarny</h2> <p>najlepszy wybór dla osób, które korzystają z komputera w jednym miejscu. Wymaga stabilnego biurka i wolnej przestrzeni. W zamian oferuje bardzo dobre osiągi sprzętowe i ergonomiczną pracę.</p> </section> <section> <h2>laptop</h2> <p>zwany również notebookiem. Przydatny dla osób, które komputera używają głównie do pisania, a przy tym czasami pracują w różnych miejscach albo nie mają zbyt dużo wolnego miejsca w pomieszczeniu. Zapewnia przyzwoite osiągi sprzętowe.</p> </section>

24 Nowe elementy HTML 5: <aside>...</aside> Wstawka reprezentuje sekcję na stronie, która jest tylko nieznacznie powiązana tematycznie z treścią elementu, w którym się znajduje. Jednocześnie gdybyśmy usunęli taką sekcję z dokumentu, zarówno sam artykuł jaki i wyrwana z kontekstu sekcja nie utracą sensu ani swojej wewnętrznej kompletności. Typowe przeznaczenie: cytaty umieszczone w treści artykułu w postaci osobno wyróżnionych bloków, bannery reklamowe, grupy linków nawigacyjnych.

25 <article> <h1>komputery</h1> <p>w dzisiejszych czasach komputery towarzyszą człowiekowi na każdym kroku. Używamy ich w codziennej pracy, jak również szukając odprężenia po trudnym dniu. Sterują zarówno naszymi samochodami, jak i statkami kosmicznymi.</p> <aside> <h1>laptop</h1> <p>ten przenośny rodzaj komputera, ze względu na liczne zalety, szybko przyjął się wśród użytkowników.</p> </aside> <article>

26 <article> <h1>szczególna teoria względności</h1> <p>ta teoria fizyczna, stworzona w 1905 roku, zrewolucjonizowała sposób pojmowania otaczającej nas rzeczywistości. Zgodnie z nią czas nie musi płynąć liniowo, ale zależy od względnej prędkości obserwatora. Twórcą teorii względności jest Albert Einstein.</p> <aside> <q>dwie rzeczy nie mają granic: wszechświat i ludzka głupota, chociaż co do pierwszego nie mam pewności.</q> </aside> <p>albert Einstein był jednym z najwybitniejszych fizyków-teoretyków. Laureat nagrody Nobla.</p> </article>

27 Nowe elementy HTML 5: <header>...</header> Reprezentuje grupę wprowadzającą albo ułatwienia nawigacyjne. Zwykle zawiera nagłówek sekcji (H1, H2, H3, H4, H5, H6) ale nie jest to absolutnie konieczne. Może zawierać również: spis treści, formularz wyszukiwania, logo. <header> <p>witam na zajęciach p> <h1>projektowanie stron WWW</h1> </header> <header> <h1>sekcja 1</h1> <p>akapit sekcji 1</p> <h2>podsekcja 1.1</h2> </header> <p>akapit podsekcji 1.1</p> <h2>podsekcja 1.2</h2> <p>akapit podsekcji 1.2</p>

28 Nowe elementy HTML 5: <footer>...</footer> Stanowi stopkę dla zawierającego ją elementu sekcji (ARTICLE, ASIDE NAV, SECTION). Stopka przechowuje zwykle informacje na temat sekcji - np.: autor, linki do powiązanych dokumentów, prawa autorskie itp. Stopka może również zawierać w sobie znaczniki sekcji. W takim przypadku stosuje się ją do oznaczania: załączników, skorowidzów (alfabetycznych indeksów haseł), kolofonów (opisów na zakończenie książki), szczegółowych praw autorskich itp.

29 <article> <h1>mój artykuł</h1> <p>to jest mój artykuł...</p> <footer> Autor: <address>jan Kowalski <p>wszelkie prawa zastrzeżone</p> </footer> </article>

30 Nowe elementy HTML 5: <nav>...</nav> Reprezentuje sekcję strony, która zawiera odnośniki nawigacyjne do innych stron albo do określonych fragmentów na tej samej stronie. Nie wszystkie linki na stronie powinny być umieszczane w tym znaczniku. Został on przewidziany przede wszystkim do oznaczania nim podstawowej nawigacji witryny. Często w stopce serwisu znajdują się linki takie jak: kontakt, regulamin, prawa autorskie. Choć teoretycznie można je objąć znacznikiem NAV, zwykle bardziej właściwy do tego będzie element FOOTER.

31 <nav> <ul> <li><a href="index.html">strona główna</a></li> <li><a href="contents.html">spis treści</a></li> </ul> </nav> <article> <h1>mój artykuł</h1> <nav> <ul> <li><a href="#sec1">rozdział 1</a></li> <li><a href="#sec2">rozdział 2</a></li> </ul> </nav> <h2 id="sec1">rozdział 1</h2> <p>treść rozdział 1...</p> <h2 id="sec2">rozdział 2</h2> <p>treść rozdział 2...</p> </article>

32 Zapraszam na ćwiczenia