-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathevent.yml
412 lines (408 loc) · 19.5 KB
/
event.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
title: RWD
name: rwd
image: 'https://devmeetings.github.io/devmeeting-es6/gfx/es6.png'
baseSlide: 55795e83d91ce0413065802c
visible: true
removed: false
pin: 80085
liveLink: 'https://xplatform.org/live/es6-en'
iterations:
- title: Iteracja 1
tasks:
- title: Task 1.
url: 'https://devmeetings.github.io/devmeeting-rwd/pl_01.html'
noOfTasks: 6
materials:
- title: Intro
material: 55ee0dde6c1d543104d649c7
annotationsMergeWithAuto: true
annotations:
annotations:
- type: comment
description: 'Przygotowaliśmy dla Was prostą, nieresponsywną stronę.'
timestamp: 0.4
- type: comment
description: Dołączony `normalize.css` niweluje różnice między przeglądarkami.
timestamp: 6.2
- type: comment
description: W pliku `fonts.css` przygotowaliśmy definicje fontów.
timestamp: 15
- type: comment
description: Plik `icons.css` zawiera definicje ikon.
timestamp: 19
- type: comment
description: 'W tych plikach znajdują się style strony. Poświęć chwilę, żeby się z nimi zapoznać.'
timestamp: 23
- type: comment
description: Na stronie znajduje się między innymi logo.
timestamp: 31
- type: comment
description: 'Oraz nawigacja. Zwróc uwagę na konwencję nazewnictwa klas (BEM, block__element--modifier)'
timestamp: 35
- type: comment
description: Lewa część headera zawiera tytuł oraz podtytuł strony
timestamp: 36.3
- type: comment
description: Prawa część to teskt promocyjny oraz przycisk
timestamp: 38.3
- type: comment
description: Do strony dołączyliśmy także jQuery oraz plik ze skryptami
timestamp: 42
- type: comment
description: Po prawej stronie ekranu możesz przełączać się między podglądami strony na różnych urządzeniach
timestamp: 53.3
- type: pause
timestamp: 58
- title: Media Query
material: 55ee10f46c1d543104d64c39
annotations:
annotations:
- type: comment
description: Pierwszym krokiem do przystosowania strony do urządzeń mobilmych jest ustawienie odpowiedniego metatagu `viewport`
timestamp: 1.5
- type: comment
description: "Wartość\_`width=device-width` ustala szerokość\_strony na pełną szerokość ekranu\_urządzenia. `initial-scale=1` określa domyślny zoom."
timestamp: 38.7
- type: comment
description: 'Teraz możemy stosować `media query`: specjalną składnię pozwalającą na zmianę styli strony w zależności od właściwości urządzenia'
timestamp: 44.6
- type: comment
description: "Style wewnątrz `{ }` tego *media query* będą\_aplikowane tylko dla urządzeń o szerokości ekranu nie większej niż 1024px."
timestamp: 47.2
- type: comment
description: 'Ten styl pisania *media queries* to `desktop-first`, najczęściej stosowany, gdy istniejąca strona jest przystosowywana do potrzeb urządzeń mobilnych'
timestamp: 63.5
- type: comment
description: Obecny nagłówek jest zbyt duży dla małych ekranów. Zmieńmy jego wielkość.
timestamp: 77.2
- type: comment
description: Przetestuj działanie na różnych szerokościach ekranu.
timestamp: 104.2
- type: comment
description: "Drugie podejście to `mobile-first` - strona wyświetla się\_dobrze na urządzeniach mobilnych i trzeba zmienić style dla dużych ekranów."
timestamp: 109.9
- type: comment
description: 'Style wewnątrz tego *media query* będą aktywne dla ekranów o minimalnej szerokości 1025px (dodatkowy 1px, żeby określić ekrany większe niż 1024px)'
timestamp: 138.2
- type: comment
description: 'W tym podejściu musimy zmienić przygotowane style, tak by wyświetlały się poprawnie na mniejszych ekranach'
timestamp: 157.7
- type: comment
description: Wewnątrz media query dopiszemy style dla desktopu
timestamp: 165
- title: Materiały
deck:
deck: 55efdf6e1d83326e7d31becb
to: 55f0a0497c14e5e84baca37c
from: 55efdf781d83326e7d31becc
annotations: null
- title: Iteracja 2
tasks:
- title: Task 2.
url: 'https://devmeetings.github.io/devmeeting-rwd/pl_02.html'
noOfTasks: 5
materials:
- title: 'Jednostki - em, rem i %'
material: 55ee14a06c1d543104d64dda
annotationsMergeWithAuto: true
annotations:
annotations:
- type: comment
description: 'Najczęściej wykorzystywane w RWD jednostki to `em` i `rem`, które pozwalają wymiarować względem rozmiaru czcionki'
timestamp: 3
- type: comment
description: 'Rozmiar w `em` jest wyliczany na podstawie rozmiaru czcionki elementu nadrzędnego, na przykład: `2em = 2 * 16px`'
timestamp: 9
- type: comment
description: 'Rozmiar w `rem`, czyli `root em` jest wyliczany względem rozmiaru czcionki elemenu `html`'
timestamp: 17
- type: comment
description: 'Zmieńmy szerokości w `px` na ich odpowiedniki w `rem` - w tym przypadku `1120px/16px => 70rem`'
timestamp: 26.2
- type: comment
description: "Przy okazji: stała szerokość\_konternera to zły pomysł - lepiej dopasować ją\_do rozmiaru ekranu"
timestamp: 37.5
- type: comment
description: Zmieńmy resztę jednostek
timestamp: 57.4
- type: comment
description: Niektóre wymiary warto pozostawić w `px` - dobrym kandydatem może być `border-radius`
timestamp: 104.1
- type: comment
description: 'Określenie wartości w `%` również może być przydatne, szczególnie w przypadku układu kolumn'
timestamp: 184.3
- type: comment
description: "Proporcje tego układu możnaby wyliczyć bardziej dokładnie. W praktyce strony responsywne często przestają być\_\"pixel-perfect\"."
timestamp: 192.9
- type: comment
description: 'Wszystkie jednostki zostały skonwertowane, a wygląd strony pozostał ten sam. Dlaczego to zrobiliśmy?'
timestamp: 327.1
- type: comment
description: Zmiana jednej wartości - rozmiaru tekstu - pozwala proporcjonalnie przeskalować rozmiar wszystkich elementów strony
timestamp: 338.9
- type: comment
description: Zmieńmy tę podstawową wartość korzystając z `media query`
timestamp: 359.9
- title: 'Jednostki - vw, vh, vmin, vmax'
material: 55ee16116c1d543104d64e66
annotationsMergeWithAuto: true
annotations:
annotations:
- type: comment
description: "Do strony dodamy sekcję\_zawierającą nieco tekstu oraz obraz."
timestamp: 5.6
- type: comment
description: "Tekst jest nieco nieczytelny - kolumna jest zbyt szeroka. Należy dopasować\_rozmiar tekstu do wielkości ekranu."
timestamp: 12.4
- type: comment
description: "Możemy w tym celu wykorzystać\_jedstkę `vw` oznaczającą\_procent szerokości, czyli `1vw = 1% szerokości ekranu`."
timestamp: 16.6
- type: comment
description: 'Oprócz `vw` dostępne są jeszcze `vh` (procent wysokości), `vmin` (procent mniejszej z tych dwóch wartości), `vmax` (procent większej)'
timestamp: 21.4
- type: comment
description: 'Rozmiar tekstu w sekcji "About" będzie skalowany względem szerokości ekranu. Celem jest osiągnięcie optymalnej liczby 80 znaków w linii.'
timestamp: 31.4
- type: comment
description: 'Na małych ekranach liczba znaków w kolumnie zwykle będzie mniejsza. Użyjmy media query, żeby ograniczyć skalowanie do dużych ekranów.'
timestamp: 51.6
- title: Pokazywanie/ukrywanie zawartości
material: 55ee16956c1d543104d64ed4
annotationsMergeWithAuto: true
annotations:
annotations:
- type: comment
description: Jednym z zagadnień RWD jest zmiana wyświetlanych treści w zależności od urządzenia.
timestamp: 0.4
- type: comment
description: Często w tym celu tworzone są pomocnicze klasy.
timestamp: 5.2
- type: comment
description: Implementacja tej klasy to ćwiczenie z wykorzystania media query
timestamp: 22.4
- title: Formularz
material: 55ee18076c1d543104d64f30
annotationsMergeWithAuto: true
annotations:
annotations:
- type: comment
description: Do strony dodajmy formularz.
timestamp: 0.4
- type: comment
description: Najważniejszym aspektem jest odpowiednie ustawienie rodzajów pól.
timestamp: 19.1
- type: comment
description: "Dzięki temu urządzenia mobile wyświetlą\_odpowiednią\_klawiaturę/kontrolkę."
timestamp: 27
- title: Materiały
deck:
deck: 55efdf6e1d83326e7d31becb
to: 55f0cd227c14e5e84baca480
from: 55f0a0497c14e5e84baca37c
annotations: null
- title: Iteracja 3
tasks:
- title: Task 3.
url: 'https://devmeetings.github.io/devmeeting-rwd/pl_03.html'
noOfTasks: 5
materials:
- title: Obrazki
material: 55ee1f776c1d543104d653cc
annotationsMergeWithAuto: true
annotations:
annotations:
- type: comment
description: Responsywny obrazek zaimplementujemy używając elementu `picture`
timestamp: 1.22
- type: comment
description: 'Przeniesiemy istniejący tag `img` - będzie słuzył na wypadek, gdyby przeglądarka nie obsługiwala `picture`'
timestamp: 7.3
- type: comment
description: Znaczniki `source` służą do wskazania jakie obrazki powinny zostać wyświetlone w zależności od urządzenia
timestamp: 10.8
- type: comment
description: Opcjonalny atrybut `media` obsługuje taką samą składnię jak `media-query`
timestamp: 22
- type: comment
description: Atrybut `srcset` pozwala na zdefiniowanie ścieżki do obrazka -- umie też obsłużyć różne rozdzielczości
timestamp: 44
- type: comment
description: Tagi `2x` oraz `1x` służą do określenia gęstości ekranu dla jakich dany obrazek będzie pobrany
timestamp: 77.9
- type: comment
description: 'Element `picture` może zawierać więcej niż 1 srcset, obsługując w ten sposób wiele media-queries.'
timestamp: 88.1
- type: comment
description: Sprawdź działanie `picture` -- na tabletach oraz telefonach wyświetli się inny obrazek niż dotychczas
timestamp: 134.9
- type: comment
description: Ten obraz wyświetli się dla ekranów szerszych niż 1024px
timestamp: 152.1
- type: comment
description: Ten wyświetli się dla mniejszych urządzeń
timestamp: 156
- type: comment
description: 'Prosty tag `img` zostanie użyty, jeżeli przeglądarka nie wspiera tagu `picture`'
timestamp: 160.9
- type: comment
description: Zajmijmy się jeszcze obrazami w tle.
timestamp: 165.7
- type: comment
description: Właściwość `background-size` pozwala na określenie rozmiaru i sposobu dopasowania tła
timestamp: 175.6
- type: comment
description: 'Wartość `cover` sprawia, że obraz wypełni cały kontenter, zachowując proporcje. Część obrazu może zostać przycięta.'
timestamp: 184
- title: Materiały
deck:
deck: 55efdf6e1d83326e7d31becb
to: 55f0b1957c14e5e84baca459
from: 55f0cd227c14e5e84baca480
annotations: null
- title: Iteracja 4
tasks:
- title: Task 4.
url: 'https://devmeetings.github.io/devmeeting-rwd/pl_04.html'
noOfTasks: 5
materials:
- title: Grid
material: 55ee21736c1d543104d65573
annotationsMergeWithAuto: true
annotations:
annotations:
- type: comment
description: Prawdopodobnie najczęściej wykorzystywanym elementem RWD są implementacje układów kolumnowych (`grid`).
timestamp: 2
- type: comment
description: 'Dodajmy sekcję "Features", która posłuży za przykład dla prostego grida.'
timestamp: 5.2
- type: comment
description: Wszystkie elementy umieścimy w kontenerze `.grid`.
timestamp: 42.6
- type: comment
description: "Zwróc uwagę na klasy: `.grid__item--1-of-3` oznacza, że dany element zajmuje jedną\_kolumnę w układzie trójkolumnowym"
timestamp: 52.2
- type: comment
description: "Każdy z elementów siatki będzie miał tę\_samą klasę."
timestamp: 70.4
- type: comment
description: Grid zaimplementujemy w pliku `css/grid.css`.
timestamp: 99.2
- type: comment
description: 'Jest to nowy plik, więc trzeba dołączyć go do strony.'
timestamp: 121.6
- type: comment
description: W naszym przypadku kontener nie potrzebuje ostylowania.
timestamp: 144.7
- type: comment
description: Elementy siatki powinny zachowywyać odstęp od lewej i prawej strony.
timestamp: 182.4
- type: comment
description: 'Użyjmy `float`, żeby móc ustawić elementy obok siebie.'
timestamp: 214.3
- type: comment
description: '`float` popsuł flow dokumentu. Żeby to naprawić dodamy tzw. `clearfix` do klasy `.grid`.'
timestamp: 228.9
- type: comment
description: Więcej informacji o `clearfix` znajdziesz w dodatkowych materiałach.
timestamp: 276.1
- type: comment
description: "Układ 3-kolumnowy osiągniemy ustawiając pojedynczej kolumnie szerokość\_1/3 kontenera."
timestamp: 290.6
- type: comment
description: "To rozwiązanie nieźle sprawdza się\_na komputerze i tablecie, ale kolumny są zbyt wąskie dla telefonu."
timestamp: 329
- type: comment
description: "Przeniesiemy określenie szerokości kolumny do media query. Na telefonach układ zmieni się\_na jednokolumnowy."
timestamp: 344.3
- title: Grid - flexbox
material: 55ee26c76c1d543104d65c57
annotations:
annotations:
- type: comment
description: Alternatywą dla gridów bazujących na `float` są nowoczesne gridy oparte o `flexbox`.
timestamp: 0.4
- type: comment
description: 'Tak jak poprzednio, będziemy potrzebować kontenera.'
timestamp: 2.9
- type: comment
description: Przeniesiemy zawartość nagłówka do kontenera.
timestamp: 29.5
- type: comment
description: Klasy są analogiczne do tych z poprzedniego wykładu. Tym razem ostylujemy dwie szerokości kolumn.
timestamp: 35.7
- type: comment
description: '`.flex-grid` będzie zawierać definicję siatki. O działaniu poszczególnych właściwości przeczytasz w materiałach dodatkowych tej iteracji'
timestamp: 75.3
- type: comment
description: "`align-items: center` wyśrodkowuje zawartość\_kolumn w pionie."
timestamp: 126.4653445945946
- type: comment
description: 'Na początek założymy, że każdy z elementów siatki zajmuje 100% szerokości kontenera.'
timestamp: 152.4
- type: comment
description: 'Klasy określające szerokości kolumn napiszemy wewnątrz media-query - zależy nam, żeby na telefonach układ pozostał jednokolumnowy.'
timestamp: 179.7
- type: comment
description: "Nagłówek i opis aplikacji mają\_stare, niepotrzebne już style."
timestamp: 260
- type: comment
description: Dopiszmy też kilka reguł określających wygląd tych elementów na małych ekranach.
timestamp: 278
- type: comment
description: Przetestuj zachowanie tego grida na różnych urządzeniach.
timestamp: 370.3
- title: Materiały
deck:
deck: 55efdf6e1d83326e7d31becb
to: 55f0d6ad7c14e5e84baca49b
from: 55f0b1957c14e5e84baca459
annotations: null
- title: Iteracja 5
tasks:
- title: Task 5.
url: 'https://devmeetings.github.io/devmeeting-rwd/pl_05.html'
noOfTasks: 2
materials:
- title: Nawigacja
material: 55ee28f56c1d543104d65ef6
annotationsMergeWithAuto: true
annotations:
annotations:
- type: comment
description: Obecna nawigacja nie mieści się na małych ekranach
timestamp: 1
- type: comment
description: Jednym z najprostszych rozwiązań jest stworzenie dropdowna z listą linków
timestamp: 12.3
- type: comment
description: Jako `value` podany jest id sekcji.
timestamp: 53
- type: comment
description: Select powinien być widoczny tylko na urządzeniach mobilnych
timestamp: 105
- type: comment
description: Nawigacja będzie widoczna tylko na desktopie
timestamp: 115
- type: comment
description: Klasa ukrywająca zawartość na urządzeniach mobilnych jest już gotowa
timestamp: 135
- type: comment
description: Dopiszmy analogiczną klasę.
timestamp: 145
- type: comment
description: Należy ostylować selecta.
timestamp: 212.5
- type: comment
description: Używając jQuery obsłużymy wybór sekcji.
timestamp: 343
- type: comment
description: W tym przypadku najprostszym rozwiązaniem będzie kliknięcie w link o tym samym adresie.
timestamp: 385
- title: Materiały
deck:
deck: 55efdf6e1d83326e7d31becb
to: 55f0d3bc7c14e5e84baca498
from: 55f0d6ad7c14e5e84baca49b
annotations: null
links: []