responsive web designresponsive web design •strony zaprojektowane jako responsywne dostosowują...

Aplikacje mobilne

RESPONSIVE WEB DESIGN

(CSS)

MOTYWACJE – JAK DOPASOWAĆ WIDOK

STRONY WWW DO WYŚWIETLACZA? Na rynku dostępne są:

• urządzenia o najróżniejszych parametrach wyświetlaczy,

• urządzenia umożliwiające wyświetlanie w pionie i w poziomie.

HTML – JĘZYK TWORZENIA STRON WWW

• HTML (ang. HyperText Markup Language) - hipertekstowy

język znaczników, podstawowy język tworzenia stron

internetowych.

• Pierwsza, publicznie dostępna, specyfikacja języka HTML,

nazwana HTML Tags, została zamieszczona w Internecie

przez Bernersa-Lee w 1991. Zawierała 22 znaczniki, tworzące

początkowy, prosty szkielet HTML-a.

<html>

</html>

<head>

<p> </p>

</head>

</title> <title>

<body>

</body>

<b> </b> pogrubiony To jest tekst

Pierwsza strona

HTML

• Pierwsza strona - Europejska Organizacja Badań Jądrowych - CERN,

6 Sierpnia 1991 r.

CSS – NARZĘDZIE DO OKREŚLANIA SPOSOBU

WYŚWIETLANIA DOKUMENTU HTML

• Kaskadowe arkusze stylów (ang. Cascading Style Sheets, CSS) to język służący

do opisu formy prezentacji (wyświetlania) stron WWW.

• CSS został opracowany przez organizację W3C (World Wide Web Consortium)

w1996 r.

• CSS to lista dyrektyw (tzw. reguł) ustalających w jaki sposób ma zostać

wyświetlana przez przeglądarkę internetową zawartość wybranego elementu (lub

elementów) HTML

body {background-color:#d0e4fe;}

h1{ color:orange; text-align:center;}

p{font-family:"Times New Roman";font-size:20px;}

REGUŁY CSS

• Reguła składa się z dwóch części

• selektora (np. H1)

• deklaracji (np. color:blue)

• Deklaracja również składa się z dwóch części

• właściwości (np. color)

• wartości (np. blue)

JAK UŻYWAĆ CSS? INTERNAL STYLE SHEET

• Bezpośrednio w dokumencie – sekcja head

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>Moja strona domowa</TITLE>

<STYLE type="text/css">

H1 { color: red }

P { color: blue }

</STYLE>

</HEAD>

<BODY>

<H1>Moja fantastyczna strona domowa</H1>

<P>Tutaj zobaczycie to, czego nigdzie indziej...

</BODY>

</HTML>

JAK UŻYWAĆ CSS? EXTERNAL STYLE SHEET

• Poprzez odwołanie do innego dokumentu


<HTML>

<HEAD>


<LINK rel="StyleSheet" type="text/css"

href="mojstyl.css" >

</HEAD>

<BODY>


<P>Tutaj zobaczycie to, czego nigdzie indziej...

</BODY>

</HTML>

JAK UŻYWAĆ CSS? INLINE STYLES

• Styl użyty do konkretnego elementu na stronie


<HTML>

<HEAD>


</HEAD>

<BODY>


<P style="color: sienna; margin-left: 20px">

Oto mój tekścik

</P>

</BODY>

</HTML>

RESPONSYWNE STRONY WEBOWE

• Tym terminem określa się najczęściej strony WWW, które są automatycznie optymalizowane do różnych urządzeń, na których są wyświetlane, bez względu na rozmiar wyświetlacza urządzenia.

• Do ich realizacji wykorzystuje się koncepcje:

• Mobile first

• Responsive web design

• Adaptive web design

PODSTAWOWE IDEE – CHRONOLOGICZNIE

PO PIERWSZE – MOBILE! (MOBILE FIRST)

Mobilny interfejs strony powinien leżeć u podstaw całej

strategii rozwijania aplikacji internetowej przeznaczonej

na różne urządzenia.

PO PIERWSZE - MOBILE!

• Strony należy zacząć projektować niejako od “końca” – od wersji dla urządzeń mobilnych, o małych wyświetlaczach, których używa się inaczej niż dla standardowych desktopów.

• Ważny jest nie tylko wygląd strony ale przede wszystkim wygoda użytkowania.

• Większość smartfonów i tabletów ma już wyłącznie ekrany dotykowe.

• Nie należy umieszczać wszystkiego, co ma znaleźć się na stronie „desktopowej” w jej mobilnym odpowiedniku – należy zacząć od prawidłowej hierarchizacji danych.

• Na urządzeniach mobilnych powinny wyświetlać się niezbędne, nierozpraszające elementy, które w sposób prosty i szybki pozwolą wykonać użytkownikowi czynność lub dotrzeć do potrzebnych informacji


RESPONSIVE WEB DESIGN

Termin Responsive Web

Design (RWD) pojawił się

w artykule Ethana

Marcotte w maju 2010 roku.

RESPONSIVE WEB

DESIGN

• Strony zaprojektowane jako responsywne dostosowują

rozmiar i rozmieszczenie elementów w reakcji na zmianę

rozmiarów okna przeglądarki, w celu jak najlepszego

zagospodarowania dostępnej przestrzeni.


ADAPTIVE WEB DESIGN

• Termin Adaptive Web Design wprowadził w 2011 Aaron

Gustafson w książce Adaptive Web Design: Crafting

Rich Experiences With Progressive Enhancement.

• Autor używa również terminu progressive

enhancement of a website (stopniowe ulepszanie

strony internetowej).

ADAPTIVE WEB DESIGN

• W koncepcji adaptive web design opracowuje się kilka stałych

projektów interfejsu strony webowej. Kiedy serwer rozpozna

rozmiar ekranu, na którym ma być wyświetlona strona, odsyła ją

do przeglądarki w najbardziej odpowiedniej wersji.

• Mobilne wersje stron można rozpoznać po adresie URL.

• Zmiana rozmiaru okna przeglądarki nie wpływa już na

rozmieszczenie elementów na stronie webowej.

IDEA RESPONSIVE A ADAPTIVE

Aktualnie strony WWW projektowane są najczęściej tak,

że wykorzystuje się naraz wszystkie trzy koncepcje

(mobile first, responsive i adaptive) i taką stronę określa

się jako responsywną

FLUID LAYOUT - REALIZACJA

• Fluid layout – projekt wyglądu strony, w którym rozmiary

poszczególnych elementów wyrażone są w jednostkach

względnych (najczęściej %).

• Rozmiary elementów zmieniają się więc dynamicznie wraz ze

zmianą rozmiaru okna przeglądarki.

• Fluid layout umożliwia efektywne wykorzystanie przestrzeni

dostępnych w danym oknie przeglądarki internetowej przy

określonej rozdzielczości ekranu.

• Podejście preferowane przez projektantów, którzy dużo

informacji, muszą zmieścić na niewielkiej powierzchni.

FLUID LAYOUT - PRZYKŁAD

FLUID IMAGES

• Jak dostosować obrazy do wielkości wyświetlacza?

• Skalowanie obrazów.

• Wyświetlanie dedykowanych wersji (rozmiarów) obrazów

• Ukrywanie/odkrywanie części obrazu.

img { max-width: 100%; }

FLUID IMAGES – POKAZYWANIE CZĘŚCI

OBRAZU

Restauracja Stylowa

Restauracja Stylowa

Przeskalowany

napis

Obraz

obcięty

FLUID LAYOUT?

• Koncepcja fluid layout nie wystarczy!

• Projektując/wdrażając fluid layout najczęściej robi się to z nastawieniem na

stronę, która będzie przeglądana na tradycyjnym monitorze komputera.

• Nie bierze się pod uwagę tego, że strona na smartfonie powinna mieć

dostosowany do typu urządzenia/wyświetlacza layout i dostosowany do

ekranów dotykowych sposób nawigowania.

MOBILNY INTERFEJS

• Strona responsywna powinna:

• mieć nawigację przystosowaną do rozmiaru ekranu,

• być czytelna,

• na ekranach „wąskich” mieć przewijanie ograniczone do jednej osi: góra-dół,

• zapewniać użytkowanie, które jest komfortowe i intuicyjne.

PRZYKŁAD

• Stopka pewnej instytucji zmienia się w zależności od rozdzielczości urządzenia,

na którym jest wyświetlana strona. Na komputerze czy nawet tablecie w celu

skontaktowania się z instytucją należy wypełnić odpowiedni formularz

kontaktowy.

Imię i nazwisko

Adres e-mail

Nr telefonu

Wiadomość

Wyślij

Zwiń stopkę

PRZYKŁAD,C.D.

• Na małym ekranie bez fizycznej klawiatury wypełnianie formularza jest

uciążliwe. Zamiast formularza kontaktowego, wyświetla się wielki numer

telefonu, bo przecież podstawową funkcją smartfona jest dzwonienie!

Zwiń stopkę

+48 606

801

755

BIURO[AT]INSTYTUCJA.PL

JAK STWORZYĆ STRONĘ RESPONSYWNĄ?

HTML+ CSS3 (MediaQueries)!

Ustala się pewną liczbę zakresów wielkości/rozdzielczości okna

przeglądarki i dla każdego z nich ustawia się odrębny wygląd za

pomocą arkuszy stylów CSS (ang. Cascading Style Sheet )

HTML - METATAG VIEWPORT

• Metatag viewport określa sposób wyświetlania strony na urządzeniach mobilnych – pozwala ustawić opcje skalowania, w tym także domyślne przybliżenie.

• Znacznik ten, podobnie inne meta-znaczniki musi znajdować się w sekcji head dokumentu HTML, a jego składnia wygląda następująco:

• Wartością atrybutu content powinna być lista par dyrektywa-wartość określających sposób wyświetlania strony na urządzeniach mobilnych. W polu tym możemy wpisać wiele różnych dyrektyw, oddzielając je przecinkami.

<meta name="viewport" content="...">

DOSTĘPNE ATRYBUTY DLA VIEWPORT

• width, height – określają szerokość i wysokość wyświetlanego obszaru strony. Można podać wartość liczbową (w pikselach), np.

• Dla atrybutu 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 )

• Dla dyrektywy height możemy użyć analogicznej wartości, device-height

• initial-scale – w atrybucie tym 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ę np. w 10-krotnym przybliżeniu:

Możemy ją również pokazać w całej swej okazałości, bez skalowania:

<meta name="viewport" content="initial-scale=10">

<meta name="viewport" content="width=320, height=480">

<meta name="viewport" content="initial-scale=1">

DOSTĘPNE ATRYBUTY DLA VIEWPORT

• minimum-scale, maximum-scale – atrybuty te określają minimalne

i maksymalne przybliżenie/oddalenie strony w obszarze przeglądarki. Minimalny

współczynnik skalowania nie może być mniejszy niż 0, natomiast maksymalny

nie może być większy niż 10. Prosty przykład użycia:

• user-scalable – pozwala włączyć, bądź też wyłączyć możliwość

skalowania strony przez użytkownika. Jako wartość przyjmuje

anglojęzyczne yes lub no.

<meta name="viewport" content="user-scalable=yes">

<meta name="viewport" content="minimum-scale=1,

maximum-scale=5">

KIEDY UŻYWAĆ METATAGU VIEWPORT?

• Znacznik ten mówi o tym, jak strona powinna być wyświetlana na urządzeniu

mobilnym. Zatem jeśli strona nie jest dostosowana do urządzeń mobilnych, można całkowicie pominąć użycie meta-tagu viewport.

• Jeśli strona jest dostosowana do urządzeń mobilnych, należy użyć:

<meta name="viewport" content="width=device-width, initial-

scale=1">

KIEDY UŻYWAĆ METATAGU VIEWPORT?

Strona mobilna bez metatagu viewport

Strona mobilna z metatagiem viewport

html,body{ background... font…}

p, blockquote, pre, code, ol, ul{}

/* Elementy strukturalne */

#blok-gl{

width: 80%; margin: 0 auto;

background: #fff; padding: 20px; }

#blok-zaw{

width: 54%; float: left;

margin-right: 3%; }

#kolumna-lewa{

width: 20%; float: left;

margin-right: 3%; }

#kolumna-prawa{

width: 20%; float: left; }

TEMAT 1

Lorem Ipsum jest tekstem stosowanym jako

przykładowy wypełniacz w przemyśle poligraficznym.

Został po raz pierwszy użyty w XV w. przez nieznanego

drukarza do wypełnienia tekstem próbnej książki. Pięć

wieków później zaczął być używany przemyśle

elektronicznym, pozostając praktycznie niezmienionym.

Spopularyzował się w latach 60. XX w. wraz z publikacją

arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum,

druków na komputerach osobistych, jak Aldus PageMaker.

Ogólnie znana teza głosi, iż użytkownika może

rozpraszać zrozumiała zawartość strony, kiedy ten chce

zobaczyć sam jej wygląd. Jedną z mocnych stron używania

Lorem Ipsum jest to, że ma wiele różnych „kombinacji”

zdań, słów i akapitów, w przeciwieństwie do zwykłego:

„tekst, tekst, tekst”, sprawiającego, że wygląda to „zbyt

czytelnie” po polsku.

Temat 2

Lorem Ipsum jest tekstem

stosowanym jako przykładowy

wypełniacz w przemyśle

poligraficznym. Został po raz

pierwszy użyty w XV w. przez

nieznanego enionym.

Spopularyzował się w latach

60. XX w. wraz z publikacją

arkuszy Letrasetu,

zawierających fragmenty Lorem

Ipsum, druków na komputerach

osobistych, jak Aldus PageM

zrozumiała zawartość strony,

kiedy ten chce zobaczyć sam

jej wygląd. Jedną z mocnych

stron używania Lorem Ipsum

jest to, że ma wiele różnych

„kombinacji” zdań, słów i

akapitów, w przeciwieństwie do

zwykłego: „tekst, tekst, tekst”,

sprawiającego, że wygląda to

„zbyt czytelnie” po polsku.

Temat 3


stosowanym jako

przykładowy wypełniacz w

przemyśle poligraficznym.

Został po raz pierwszy użyty

w XV w. przez nieznanego

enionym. Spopularyzował się

w latach 60. XX w. wraz z

publikacją arkuszy Letrasetu,

zawierających fragmenty

Lorem Ipsum, druków na

komputerach osobistych, jak

Aldus PageM zrozumiała

zawartość strony, kiedy ten

chce zobaczyć sam jej

wygląd. Jedną z mocnych




akapitów, w przeciwieństwie

do zwykłego:.

…

<div id="blok-gl">

<div id="blok-zaw">

<h2>TEMAT 1</h2> …

</div>

<div id="kolumna-lewa">

<h2>Temat 2</h2> …

</div>

<div id="kolumna-prawa">

<h2>Temat 3</h2> …

</div>

</div>

…

Fragment pliku HTML:

Fragment pliku CSS:

Więcej o float na stronie:

http://kurs.browsehappy.pl/CSS/Float

Zmiana struktury dokumentu

– widok standardowy

WŁAŚCIWOŚĆ FLOAT

• Za pomocą właściwości float możemy sprawić, że interesujący nas element HTML stanie

się pływającym w obszarze zawartości swojego elementu rodzica elementem HTML .

• Każdy pływający element HTML zazwyczaj zachowuje cechy podobne do cech elementu

HTML typu block, dzięki czemu między innymi wiemy, na jakie właściwości CSS może

reagować dany element HTML

• Treść do wyświetlenia występująca w kodzie HTML po pływającym elemencie HTML może

opływać ten pływający element HTML, ale tylko w sytuacji, gdy wystarczy miejsca w

danym obszarze zawartości

• Pływający element HTML występuje w obszarze zawartości swojego elementu rodzica,

lecz pływający element HTML nie może bezpośrednio powiększać swoim rozmiarem

rozmiaru swojego elementu rodzica

• Domyślnie element HTML nie jest pływającym w obszarze zawartości swojego elementu

rodzica elementem HTML.

FLOAT: LEFT

• Za pomocą wartości left właściwości float możemy sprawić, że interesujący

nas element HTML stanie się pływającym w obszarze zawartości swojego

elementu rodzica elementem HTML.

• Element HTML będzie pływał w obszaru zawartości swojego elementu

rodzica w kierunku lewej krawędzi liniowej swojego elementu rodzica.

PRZYKŁAD FLOAT: LEFT

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>Przykład float</title>

</head>

<body>

<div id="rodzic">

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

<div id="dziecko">div#dziecko</div>

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

</div>

</body>

</html>

html { font-size:16px;}

#rodzic { font-size:1.3em;}

#dziecko {

float:left;

height:100px;

background-color:red;

}

AAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAA







div#dziecko

FLOAT: RIGHT

• Za pomocą wartości right właściwości float możemy sprawić, że interesujący

nas element HTML stanie się pływającym w obszarze zawartości swojego

elementu rodzica elementem HTML.

• Element HTML będzie pływał w kierunku prawej krawędzi liniowej swojego

elementu rodzica.

PRZYKŁAD FLOAT: RIGHT

<!DOCTYPE HTML>

<html>

<head>



</head>

<body>

<div id="rodzic">


<div id="dziecko">div#dziecko</div>

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

</div>

</body>

</html>

html { font-size:16px;}

#rodzic { font-size:1.3em;}

#dziecko {

float:right;

height:100px;

background-color:red;

}









div#dziecko

TEMAT 1

Lorem Ipsum jest tekstem stosowanym jako przykładowy

wypełniacz w przemyśle poligraficznym. Został po raz pierwszy

użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem

próbnej książki. Pięć wieków później zaczął być używany

przemyśle elektronicznym, pozostając praktycznie niezmienionym.

Spopularyzował się w latach 60. XX w. .

Ogólnie znana teza głosi, iż użytkownika może rozpraszać

zrozumiała zawartość strony, kiedy ten chce zobaczyć sam jej

wygląd. Jedną z mocnych stron używania Lorem Ipsum jest to, że

ma wiele różnych „kombinacji” zdań, słów i akapitów, w

przeciwieństwie do zwykłego: „tekst, tekst, tekst”, sprawiająceg

wygląda to „zbyt czytelnie” po polsku.

Temat 2

Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w

przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez

nieznanego enionym. Spopularyzował się w latach 60. XX w. wraz z

publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, druków

na komputerach osobistych, jak Aldus PageM zrozumiała zawartość strony,

kiedy ten chce zobaczyć sam jej wygląd. Jedną z mocnych stron uż

Temat 3

Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w

przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez

nieznanego enionym. Spopularyzował się w latach 60. XX w. wraz z

publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, druków

na komputedfgsdfg drfgesrge

#blok-gl{ width: 90%; }

#blok-zaw{ width: 100%; }

#kolumna-lewa{

width: 100%; clear: both;

}

#kolumna-prawa{

width: 100%; clear: both;

}

…

<div id="blok-gl">

<div id="blok-zaw">

<h2>TEMAT 1</h2> …

</div>


<h2>Temat 2</h2> …

</div>


<h2>Temat 3</h2> …

</div>

</div>

…

Zmiana struktury dokumentu

– widok mobilny


Fragment pliku CSS:

Więcej o clear na stronie:

http://kurs.browsehappy.pl/CSS/Float

WŁAŚCIWOŚĆ CLEAR

• Za pomocą właściwości clear możemy określić czy interesujący nas element

HTML może opływać pływający element HTML.

CLEAR: NONE

• Wartość none jest domyślną wartością właściwości clear.

• Domyślnie element HTML może opływać pływający element HTML.

PRZYKŁAD CLEAR: NONE

html {font-size:16px;}

#rodzic {font-size:1.3em;}

#dziecko-1 {float:left;

height:500px;

background-color:blue;}

#dziecko-2 {float:right;

height:400px;

background-color:red;}

#dziecko-3 {background-color:green;}

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBBBBBBBBB

BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB

BBBBBBBBBBBBBBBBBBBBBBBBBBB

BBBBBBBBBBBBBBB

CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC


CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC

div#dziecko-3

div#dziecko

-2

float:right

div#dziecko-

1

float:left

<!DOCTYPE HTML>

<html>

<head>



</head>

<body>

<div id="rodzic">


<div id="dziecko-1">

div#dziecko-1<br>float:left;</div>


div#dziecko-2<br>float:right;</div>

BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB

<div id="dziecko-3">div#dziecko-3</div>


</div>

</body>

</html>

CLEAR: LEFT

• Za pomocą wartości left właściwości clear możemy sprawić, że interesujący

nas element HTML nie będzie mógł opływać elementu HTML posiadającego

właściwość float wraz z wartością left.

PRZYKŁAD CLEAR: LEFT

<!DOCTYPE HTML>

<html>

<head>



</head>

<body>

<div id="rodzic">






BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB



</div>

</body>

</html>




height:500px;



height:400px;


#dziecko-3 {clear:left;

background-color:green;}




AAAAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBBBBBB


BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB

BBBBBBBBBBBBBBB



div#dziecko-3

div#dziecko

-2

float:right

div#dziecko-

1

float:left

CLEAR: RIGHT

• Za pomocą wartości right właściwości clear możemy sprawić, że interesujący

nas element HTML nie będzie mógł opływać elementu HTML posiadającego

właściwość float wraz z wartością right.

PRZYKŁAD CLEAR: RIGHT

<!DOCTYPE HTML>

<html>

<head>



</head>

<body>

<div id="rodzic">






BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB


CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC

</div>

</body>

</html>




height:500px;



height:400px;


#dziecko-3 {clear:right;




AAAAAAAAAAAAAAAAAAAAABBBBBBBBBBBBBBBBBBB




BBBBBBBBBBBBBBBBBBBBBB

BBBBBB





div#dziecko-3

div#dziecko

-2

float:right

div#dziecko-

1

float:left

CLEAR: BOTH

• Za pomocą wartości both właściwości clear możemy sprawić, że interesujący

nas element HTML nie będzie mógł opływać żadnego pływającego elementu

HTML.

PRZYKŁAD CLEAR: BOTH

<!DOCTYPE HTML>

<html>

<head>



</head>

<body>

<div id="rodzic">






BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB


CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC

</div>

</body>

</html>




height:500px;



height:400px;


#dziecko-3 {clear:both;



AAAAAAAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBBB





BBBBBBBBBBBBBBBBBBBBBBB

AAAAAAAAAAAAAAA




div#dziecko-3

div#dziecko

-2

float:right

div#dziecko-

1

float:left

<p class="pasek">

<a href="#">Lewa kolumna</a> |

<a href="#">Prawa kolumna</a>

</p>

<div id="blok-zaw">

<h2>TEMAT 1</h2>

</div>


<h2>Temat 2</h2>

</div>


<h2>Temat 3</h2>

</div>

TEMAT 1

Lorem Ipsum jest tekstem stosowanym jako

przykładowy wypełniacz w przemyśle poligraficznym.

Został po raz pierwszy użyty w XV w. przez nieznanego

drukarza do wypełnienia tekstem próbnej książki. Pięć

wieków później zaczął być używany przemyśle

elektronicznym, pozostając praktycznie niezmienionym.

Spopularyzował się w latach 60. XX w. wraz z publikacją

arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum,

druków na komputerach osobistych, jak Aldus PageMaker.

Ogólnie znana teza głosi, iż użytkownika może

rozpraszać zrozumiała zawartość strony, kiedy ten chce

zobaczyć sam jej wygląd. Jedną z mocnych stron używania

Lorem Ipsum jest to, że ma wiele różnych „kombinacji”

zdań, słów i akapitów, w przeciwieństwie do zwykłego:

„tekst, tekst, tekst”, sprawiającego, że wygląda to „zbyt

czytelnie” po polsku.

Temat 2


stosowanym jako przykładowy

wypełniacz w przemyśle

poligraficznym. Został po raz

pierwszy użyty w XV w. przez

nieznanego enionym.

Spopularyzował się w latach

60. XX w. wraz z publikacją

arkuszy Letrasetu,

zawierających fragmenty Lorem

Ipsum, druków na komputerach

osobistych, jak Aldus PageM

zrozumiała zawartość strony,

kiedy ten chce zobaczyć sam

jej wygląd. Jedną z mocnych




akapitów, w przeciwieństwie do

zwykłego: „tekst, tekst, tekst”,

sprawiającego, że wygląda to

„zbyt czytelnie” po polsku.

Temat 3


stosowanym jako

przykładowy wypełniacz w

przemyśle poligraficznym.

Został po raz pierwszy użyty

w XV w. przez nieznanego

enionym. Spopularyzował się

w latach 60. XX w. wraz z

publikacją arkuszy Letrasetu,

zawierających fragmenty

Lorem Ipsum, druków na

komputerach osobistych, jak

Aldus PageM zrozumiała

zawartość strony, kiedy ten

chce zobaczyć sam jej

wygląd. Jedną z mocnych




akapitów, w przeciwieństwie

do zwykłego:.

#blok-zaw{

width: 54%;

float: left;

margin-right: 3%; }

#kolumna-lewa{

width: 20%;

float: left;

margin-right: 3%; }

#kolumna-prawa{

width: 20%;

float: left; }

.pasek{display: none;}

Ukrywanie zawartości

– widok standardowy


Fragment pliku CSS:

<p class="pasek">

<a href="#">Lewa kolumna</a> |

<a href="#">Prawa kolumna</a>

</p>

<div id="blok-zaw">

<h2>TEMAT 1</h2>

</div>


<h2>Temat 2</h2>

</div>


<h2>Temat 3</h2>

</div>

#blok-zaw{

width: 100%; }

#kolumna-lewa{

display: none; }

#kolumna-prawa{

display: none; }

.pasek {display: inline;}

TEMAT 1

Lorem Ipsum jest tekstem stosowanym jako przykładowy

wypełniacz w przemyśle poligraficznym. Został po raz pierwszy

użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem

próbnej książki. Pięć wieków później zaczął być używany

przemyśle elektronicznym, pozostając praktycznie niezmienionym.

Spopularyzował się w latach 60. XX w. .

Ogólnie znana teza głosi, iż użytkownika może rozpraszać

zrozumiała zawartość strony, kiedy ten chce zobaczyć sam jej

wygląd. Jedną z mocnych stron używania Lorem Ipsum jest to, że

ma wiele różnych „kombinacji” zdań, słów i akapitów, w

przeciwieństwie do zwykłego: „tekst, tekst, tekst”, sprawiająceg

wygląda to „zbyt czytelnie” po polsku.

Lewa kolumna | Prawa kolumna

Ukrywanie zawartości

– widok mobilny


Fragment pliku CSS:

JAK AUTOMATYCZNIE DOSTOSOWAĆ

LAYOUT STRONY DO URZĄDZENIA?

CSS3 I MEDIA QUERIES!

• W CSS3 dodano zapytania mediów (ang. media queries), co umożliwiło

tworzenie stron www pod kątem różnych rozmiarów okna przeglądarki.

• Media queries pozwalają precyzyjnie dopasować arkusz CSS nie tylko do typu

czy grupy mediów, ale przede wszystkim do możliwości wyświetlacza

urządzenia.

MEDIA QUERY W CSS2

• Media Query – w CSS2 to nic innego jak wybór medium, dla którego ma być

serwowany bieżący plik CSS. Czyli możemy zdecydować, które pliki wyświetlać

w wersji do druku, a które dla np. odbiorników telewizyjnych.

• Typy mediów:

• all - dla wszystkich urządzeń

• aural - syntezatory mowy (słuchowe arkusze stylów)

• braille - urządzenia do czytania braillem (dla niewidomych)

• embossed - drukarki brailla

• handheld - urządzenia ręczne (zwykle mały ekran, czarno-białe)

• print -materiały drukowane nieprzezroczyste i podgląd wydruku

• projection - prezentacje projektorowe lub nadruki na folii rzutnikowej

• screen - kolorowy ekran komputerowy

• tv – odbiorniki telewizyjne

• …

MEDIA QUERY CSS2– GDZIE?

Media Query w pliku CSS:

• wykorzystuje się dyrektywę @media

Media Query w pliku HTML: • wykorzystuje się atrybut media elementu LINK wskazujący zewnętrzny plik

arkusza stylów dla konkretnego typu medium

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>

<link rel="stylesheet" type="text/css" media="print" href="arkusz.css" />

</head>

<body>

<p>Ciało dokumentu...</p>

</body>

</html>

@media print { /* style dla drukarek a aktualnym pliku*/ }

MEDIA QUERY W CSS3

• Wraz z nadejściem CSS3 rozszerzono możliwości Media

Queries.

• W CSS3 można oprócz wskazania typu mediów dodatkowo

decydować o dołączaniu odpowiedniego pliku/kodu CSS na

podstawie rozdzielczości ekranu, orientacji wyświetlacza,

kolorów, etc.

MEDIA QUERY (CSS3) W PLIKU HTML

Interpretacja:

Ustawiony jest warunek, by załadować plik normal.css tylko, gdy:

• stronę otworzono z urządzenia posiadającego ekran

• minimalna szerokość ekranu wynosi 800 pikseli

• minimalna wysokość ekranu wynosi 600 pikseli

Jeśli urządzenie, na którym strona została otworzona nie spełnia powyższych

kryteriów, wtedy plik normal.css nie zostanie załadowany.

Oczywiście takich warunków może być więcej!

<link rel="stylesheet" media="screen and (min-width: 800px) and (min-height: 600px)"

href="normal.css">

MEDIA QUERY (CSS3) W PLIKU CSS

Ten sam przykład:

• stronę otworzono z urządzenia posiadającego ekran

• minimalna szerokość ekranu wynosi 800 pikseli

• minimalna wysokość ekranu wynosi 600 pikseli

a) z dedykowanymi stylami od razu w pliku CSS:

b) z dedykowanymi stylami w pliku zewnętrznym (normal.css):

@media screen and (min-width: 800px) and (min-height: 600px) {

/* zawartość pliku normal.css */

}

@import url(normal.css) screen and (min-width: 800px) and (min-height:

600px);}

NOWE WARUNKI W CSS3 – WYMIARY

EKRANU • Można zadecydować, na ekranach o jakiej rozdzielczości wczytywać nasz kod CSS.

Do wyboru jest oczywiście długość i szerokość ekranu (mowa o rozdzielczości).

• Możemy określać zarówno minimalne, jak i maksymalne wielkości, a atrybuty za to odpowiedzialne to: min-width, max-width, min-height, max-

height.

• Nie trzeba kierować się wyłącznie rozdzielczością ekranu. Często bywa tak, że

użytkownik ma dużo mniejszy obszar „widoczności” strony WWW, aniżeli

rozdzielczość ekranu. Wynika to z faktu, iż różne programy mogą pojawiać się jako

toolbar po prawej lub lewej stronie ekranu.

• W tym celu powstały kolejne atrybuty dla Media Queries pozwalające rozpoznać „prawdziwą” szerokość/wysokość wyświetlanej strony, tj. device-width,

device-height, min-device-width, max-device-width,

min-device-height oraz max-device-height.

NOWE WARUNKI W CSS3 – ORIENTACJA

EKRANU

Dla orientacji ekranu mamy do wyboru dwa atrybuty:

• orientation: portrait – orientacja pionowa

• orientation: landscape – orientacja pozioma

NOWE WARUNKI W CSS3 – ASPECT RATIO

Aspect Ratio jest to stosunek wysokości do szerokości ekranu (lub obszaru aktualnie wyświetlonej strony).

Przykład, w którym szerokość ekranu jest dwa razy większa od wysokości „widocznego” obszaru roboczego strony:

Przy wyborze Aspect Ratio mamy do dyspozycji następujące atrybuty: aspect-ratio oraz device-aspect-ratio.

@media all and (device-aspect-ratio: 32/16) { … }

NOWE WARUNKI W CSS3 – KOLORY

Można też warunkowo korzystać ze stylów CSS w zależności od

kolorów, jakie obsługuje urządzenie użytkownika. Do dyspozycji są następujące atrybuty : color, min-color, max-color,

color-index, min-color-index, max-color-

index, monochrome, min-monochrome, max-

monochrome.

Kilka praktycznych przykładów użycia:.

@media (color) { /* urządzenie obsługuje kolory */ }

@media (min-color-index: 256) { /* głębia kolorów -

minimum 256 kolorów */ }

@media (monochrome) { /* urządzenie jest

monochromatyczne - składa się jedynie z barw prostych */

}

RESPONSYWNY ROZMIAR TEKSTU

• Rozmiar tekstu można ustawiać za pomocą jednostki "vw", która oznacza "viewport

width".

• Viewport to rozmiar okna przeglądarki. 1vw = 1% szerokości viewport. Jeśli viewport jest

szeroki na 50cm, 1vw oznacza 0.5cm.

• Przykład:

<h1 style="font-size:10vw">Hello World</h1>

MEDIA QUERY – GDZIE? W CSS!

/* Smartfony (portrait i

landscape) ----------- */

@media screen and (max-width:

600px)

{

/* Style */

}

/* Smartfony (landscape) ------

----- */

@media screen and

(min-width: 600px) and

(orientation:landscape)

{

/* Style */

}

/* Smartfony (portrait) -------

---- */

@media screen and

(min-width: 600px) and

(orientation:portrait)

{

/* Style */

}

<html xmlns="http://www.w3.org/1999/xhtml"

xml:lang="pl" lang="pl">

<head>

<link

rel="Stylesheet"

type="text/css"

href="arkusz.css" /> </head>

<body>


</body>

</html>

arkusz.css

TYPOWE MEDIA QUERY DLA RWD W PLIKU CSS

/* Smartfony małe(portrait i landscape) ----------- */

@media screen and (max-width: 600px){

/* Style */

}

/* Smartfony duże(landscape) ----------- */

@media screen and (min-width: 600px) and

(orientation:landscape) {

/* Style */

}

/* Smartfony duże(portrait) ----------- */

@media screen and (min-width:600px) and

(orientation:portrait) {

/* Style */

}

Jeden plik CSS dla różnych urządzeń/wyświetlaczy

MEDIA QUERY – GDZIE? W HTML!

/* Style dla smartfonów

(portrait i landscape) --------

--- */

<html xmlns="http://www.w3.org/1999/xhtml"

xml:lang="pl" lang="pl">

<head>

<link rel="stylesheet"

media="screen

and (max-width: 600px)"

href="small.css" />


media="screen

and (min-width: 600px)

and (orientation:landscape)"

href="large_land.css" />


media="screen

and (min-width:600px)

and (orientation:portrait)"

href="large_port.css" />

</head>

<body>


</body>

</html>

small.css

/* Smartfony (landscape) ------

----- */

/* Smartfony (portrait) -------

---- */

large_land.css

large_port.css

TYPOWE MEDIA QUERY DLA RWD W PLIKU

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>

<link rel="stylesheet" media="screen and (max-width: 600px)"

href="small.css" />

<link rel="stylesheet" media="screen and (min-width: 600px) and

(orientation:landscape)" href="large_land.css" />

<link rel="stylesheet" media="screen and (min-width:600px) and

(orientation:portrait)" href="larg_port.css" /> </head>

<body>


</body>

</html>

Plik HTML ze wskazaniami na różne pliki CSS dla różnych urządzeń/wyświetlaczy:

PODMIANA GRAFIKI, ZNACZNIK <PICTURE>

• <picture> umożliwia łatwe określenie źródła grafiki

• Zamiast skalować pojedynczy obraz do dostępnej powierzchni, można

przygotować wiele plików z grafiką o odpowiednim rozmiarze.

• Element <picture> zawiera znaczniki <source> (jeden lub więcej) i jeden

znacznik <img>.

• Element <source> ma następujące atrybuty::

• srcset (wymagany) - określa URL obrazu, który ma być wyświetlany

• media – zawiera poprawne media query normalnie definiowane w CSS

• sizes – określa pojedynczą wartość width

• type – definuje typ MIME

https://www.w3schools.com/tags/tag_source.asp

https://www.w3schools.com/tags/tag_img.asp



PODMIANA GRAFIKI, ZNACZNIK <PICTURE>

• Przeglądarka użyje pierwszego pasującego do wartości atrybutu media

elementu <source> i zignoruje następne.

• Element <img> jest wymagany jako ostatni element potomny znacznika

<picture>. Znacznik <img> został zachowany: dla wstecznej kompatybilności

z przeglądarkami, które nie obsługują elementu <picture> lub w przypadku,

gdy nie dopasuje się żaden z elementów <source>.

PODMIANA GRAFIKI, PRZYKŁAD

<picture>

<source media="(min-width: 680px)" srcset="img_duzy.jpg">

<source media="(min-width: 460px)" srcset="img_maly.jpg">

<img src="img_duzy.jpg" alt=„Jakis obrazek" style="width:auto;">

</picture>

STRONY RESPONSYWNE – DOBRE PRAKTYKI

Należy:

• unikać popupów i otwierania linków w nowej zakładce na stronie w wersji dla małych

rozdzielczości (smartfony);

• pisać kod strony poprawnie i zgodnie ze standardami - trzymanie się wytycznych daje

gwarancję, że strona będzie się poprawnie wyświetlać w bardzo różnych i egzotycznych

przeglądarkach;

• ostrożnie używać skryptów JavaScript - nie każdy skrypt zadziała w każdej mobilnej

przeglądarce;

• unikać stosowania stylu position: fixed - nie działa w większości mobilnych przeglądarek.

responsive web designresponsive web design •strony zaprojektowane jako responsywne dostosowują...

Documents