Бесплатные уроки программирования | уроки адаптивной верстки сайта |seo уроки

Что такое адаптивная вёрстка и каковы её задачи Михаил Русаков

00:00
в этом уроке мы с вами будем разбирать
00:01
что такое верстка и каково общее и
00:03
задачи и так верстка это процесс
00:07
преобразования дизайна в вебстраницу
00:10
другими словами допусти вот у нас есть
00:14
некая картинка которую нам нарисовал
00:17
дизайнер он подписал что где-то будет
00:20
нас логотип ту какие-нибудь там хлебные
00:23
крошки тут нас например а верхнее меню
00:27
там тут контент основной подвал то есть
00:31
все все все он там нарисовал все блоки
00:33
все тени все различные там закругленные
00:37
углы то есть и какой шрифт размер о
00:40
стопы то есть все все все кровать именно
00:42
картинка
00:42
но эта картинка невозможно пользу с

00:46
точки зрения вот юзабилити то есть
00:48
нельзя кликать по ссылке то есть да они
00:50
будут нарисованы но они будут не рабочие
00:53
так вот задача верстальщик вот это вот
00:55
все преобразовать по сути в то же самое
00:58
то есть точно такой же внешний вид но
01:00
при этом что все стал интерактивным то
01:02
есть ссылки стали рабочими чтобы текста
01:08
можно было банально выделить скопировать
01:11
чтобы тут всякие дополнительные
01:16
анимационные эффекты появились например
01:18
что там при наведении курсора мыши на
01:20
кнопку кнопка меняла свой внешний вид
01:22
вот такие киты вещи и это и есть процесс
01:26
верстки составе таких вот вещей то есть
01:28
у нас взошел все вы ведь точно также как
01:30
и в дизайне но это в идеале конечно но
01:33
при этом при этом чтоб это все стал
01:35
интерактивным то и чтоб и и получился
01:38
именно веб-страница то есть не картинка
01:40
просто какая-то
01:41
а именно веб-страниц вот это вот верстка
01:45
каковы вообще главная задача весен
01:48
давайте сначала первую основную самую
01:51
важную
01:51
а потом и сами перейдём уже к критериям
01:54
качества верстки то есть газ задача
01:56
стоит том чтобы
02:00
веб-страница одинаково хорошо смотрелась
02:03
на самых разных устройствах и самых
02:05
разных разрешениях монитора ну и либо
02:08
сцена экрана
02:11
задачи точно сложно я сразу могу сказать
02:14
то есть раньше например когда не было
02:17
таких мобильных устройств достаточно
02:18
просто были там мониторы 800 на 600 и
02:21
все под них перестали потом появились
02:24
1024 на 768 то есть и под них северсталь
02:27
теперь же соответственно появились
02:29
всякие смартфон и планшет и и появились
02:32
мониторы по 40 дюймов это и
02:34
соответственно нужно уже делает так чтоб
02:36
верстка смотрелось везде хорошо
02:38
безусловно бы смотреться везде по
02:39
разному но нужно погрелась везде хорошо
02:41
и задачи верстальщика
02:45
сделать так чтобы это было именно хорошо
02:52
но при этом чтобы было максимально
02:56
приближенный вариант к тому что
02:58
нарисовал дизайнер то есть стопроцентный
03:00
копии дизайна вы вряд ли добьетесь даже
03:03
в таких средних по сложности верстка
03:06
безусловно простых еще можно обеспечить
03:09
вам точную копию дизайна но в средних и
03:12
уж тем более сложных все равно будут
03:14
какие-то определенные отличие нюансы в
03:17
цвета передачах то есть в разных
03:19
браузерах будет по-другому цвет мишку
03:21
отображаться то есть определенные
03:23
небольшое отличие все равно будет это
03:24
все допустимо то есть и никто не заметит
03:27
что там например у вас например там дать
03:31
представлена пусть вот есть два блока
03:33
допустим дизайнер там поставил 5
03:36
пикселей примеру тут между ними отступ 5
03:38
пикселей а если вы например но случайно
03:42
там или специально извините чуть-чуть
03:44
например 4 300 перми шо-то вас там не
03:47
помещается в этих блоках и вас они
03:49
начинают сваливаться то есть друг по
03:51
другу то есть не помещаются на одном
03:53
экране то есть они идут под поднесут
03:55
друг друга ответственно берете стать и
03:57
четыре пикселя как вы думы
03:59
изменится ли скажем так картинка общее
04:03
ну я думаю что вы понимать что конечно
04:06
же нет никто из пользователи этого даже
04:08
не заметят 5 пикселей там или четыре
04:10
пикселя или два пикселя или шесть
04:12
пикселей то есть все все равно
04:13
поэтому я и говорю что определенно
04:16
клодене допустим и если это необходимо
04:20
тебя с вами поговорим о критериев
04:22
критериях качества верстки так первый
04:25
важнейший критерий это адаптация под
04:28
разные браузеры по сути это одна из
04:33
важнейших задач
04:34
горских которые столько сейчас говорили
04:37
и вот тут я привел вам статистику
04:40
деспотически данные за сентябрь 17 года
04:43
соответственно есть ссылка вот на
04:45
источник вы можете зайти поставить любые
04:47
момент зайти сейчас популярны браузер и
04:50
так вот когда я только читал верстать
04:52
это был какой-то муж-то десятый год 9 8
04:56
что такой что-то очень не помнить это
04:58
наверное девятый десятый год вот тогда
05:02
был очень большой разнобой то есть не
05:04
было ни одного браузера который был бы
05:06
явным лидером был там explorer 6 7 8
05:10
потом появился были
05:13
firefox было опера google chrome это
05:16
партнер даже не знал то есть и сейчас
05:18
все стало гораздо проще сейчас мы сразу
05:21
видим что нас есть явный лидер google
05:24
chrome у которого 56 процентов доли
05:28
рынка и это на самом деле очень и очень
05:30
нам ситуацию облегчает то муж на самом
05:32
деле я щас немножко забегая вперед ну
05:37
просто скажу что браузер на самом деле в
05:40
браузерах хоть и много их очень много но
05:43
большинство из них используют один и тот
05:45
же движок как правило красота от гугла
05:48
друг поэтому соответственно если у вас
05:51
google chrome отображается сайт хорошо
05:53
то на какому нибудь там другом браузере
05:56
который использует движок он также будет
05:59
отображаться хорошо поэтому мое мнение
06:02
что нужно сейчас адаптировать в первую
06:05
очередь под google chrome и в принципе в
06:07
принципе можно еще под firefox почему
06:10
firebox потому что многие браузеры тоже
06:12
использует его движок то есть mozilla
06:15
firefox и google chrome все все
06:18
остальные в принципе уже
06:19
explorer и даже самые последние они уже
06:22
принципе не нужны удачно это графике
06:26
видны что история 11 18 процентов а
06:28
microsoft edge это как бы
06:31
следующий после explorer пошел
06:33
всего лишь один процент нас некому эти
06:35
браузер уже не нужны эти все из после в
06:37
мобильные браузеры вот мобайла сафари и
06:40
android browser либо вот настольный
06:43
google chrome и все поэтому в и так в
06:47
этом плане стала в верстать гораздо
06:48
гораздо проще
06:50
второе что нужно делать нужно уметь
06:53
адаптировать под разные разрешения
06:55
экрана то есть через горюч и раньше
06:57
можно было высот на 600 там письма с 478
07:00
были разрешения самые популярные сейчас
07:03
уже конечно если 4к уже даже появляются
07:07
вроде как 8к монитор и при этом у нас
07:09
есть смартфон у которых там например 480
07:13
пикселей ширина экрана то есть ну
07:15
понимаете вот и под все это представьте
07:17
дал вам нужно все это адаптировать
07:20
раньше да прими как можно было раньше
07:22
если мой мир сталей резиновой версткой
07:24
мы могли эта резиновая верстка
07:26
адаптировать вообще вот под любые экраны
07:28
которые тогда были там лет 5-6 назад 7 а
07:31
сейчас же к сожалению 1 резиновая
07:35
верстка вы не ограничитесь то есть вам
07:37
уже нужно бы так или иначе применять
07:39
адаптивную верстку и ответственно под
07:41
разные устройства рисовать по сути свою
07:44
верстку это конечно усложняет но тоже
07:47
время принципе сами мне всему этому
07:49
учиться всему этому научу тут можете
07:52
быть спокойны третье валидность кода
07:55
очень важно чтобы это было мало кто
07:58
соблюдает
07:59
даже такие сайты как google yandex
08:03
у них если посмотреть то у них код не
08:05
валидный что начни вали
08:07
значит что он имеет определенные ошибки
08:08
который никак не влияет на отображение
08:10
сайта то есть абсолютно нормально
08:12
отображается но это происходит не потому
08:15
что они такие умные а потому что браузер
08:19
хороший который умеет даже криворукий
08:20
код отлично отображать и он его
08:23
отображает но это опять же необходимо
08:26
вечность при разработке движка браузера
08:28
конечно же это учитывают что малакии
08:31
страницы будут иметь валидный код
08:33
но почему должен быть код год быть валит
08:35
и потому что чем-нибудь валидный то
08:37
браузер будет его быстрее обрабатывать
08:39
таким образом он будет быстрее
08:41
отображаться на странице пусть на
08:44
какие-то вообще и миллисекунды там
08:46
но все-таки тем не менее надо учитывать
08:49
плюс валидным сайтом поисковая система
08:53
относится лучше потому что его первых и
08:55
легче их парсить эти сайты индексировать
08:59
другими словами а во-вторых во вторых
09:03
простоит остается уже сразу отношении
09:04
что этим сайтом занимались профессионалы
09:06
скорей всего что у них и контент тоже
09:09
хороший не будет какой-то там левый ужас
09:12
непонятный то есть это такой один там из
09:15
многое многих сотен критериев по которым
09:16
еще поисковой системы ранжирует сайта но
09:19
тем ни менее такой маленький нюанс но
09:21
его нужно учитывать
09:23
добиться валидности очень просто то есть
09:26
еще сложены в этом нету сочна просто
09:28
грамотно писать и вот я буду в этом
09:30
курсе
09:31
безусловно писать только валидный код
09:33
никакого там недоразумение здесь не
09:36
будет то есть опыт полина
09:38
все мы с вами проверки все будем
09:40
проходить на валидности 4 легкая
09:46
модификация данных на веб-странице что
09:50
это значит вот смотрите допустим вот у
09:53
нас есть опять же конец страниц на ней
09:57
есть таблица и допустим тут со с
10:01
русскими услуги нашей компании тут
10:03
например у цены за эти услуги и вот
10:06
хитрый верстальщик чтоб ему побыстрее
10:09
все это сделать не возиться берет кто-то
10:12
су штуку всю таблицу вырезает ее виде
10:15
кантом и же по картинке там или png
10:18
картинки и тупо тупо не скажешь
10:22
вставляет ее на веб-страницу в виде
10:24
картинки как это выглядит это прекрасно
10:29
потому что мы точно с гарантированной
10:32
все цвета передаем все шрифты у нас
10:34
точно будут совпадать там уж просто мы
10:36
картинка вырезали если кафе квот хорошем
10:39
качестве ведь она там вообще все будет
10:41
прекрасно смотреться но как только мы
10:44
захотим например там до батьку это еще
10:46
услугу или например поменять цену за
10:48
какую-то существующую услугу мы
10:50
облажаемся потому что нам придется
10:52
заходить в исходник дизайна photoshop
10:55
файл зайти сходняк photoshop и другие
10:59
на фпс расширение файла photoshop он уже
11:05
будет файл открывать фотошопе
11:07
заходить тут тут переправлять затем за
11:10
навязать картин куда вставлять на сайт
11:12
обратно то есть но это вообще это просто
11:15
дикость
11:15
то есть я таких и вёрстах видел свою
11:17
жизнь точно много в ужас может не
11:20
приходить и конечно же вы такими быть не
11:24
должны то есть ситуация когда конечно же
11:26
надо картинкой выполнять например sant
11:29
pere кто реально карте кто мы как
11:30
картинку и вставляем на web-страницу
11:32
либо например бывает что какой-нибудь
11:34
там логотип который вроде как и текста
11:37
но каким-то непонятным шрифтом какие-то
11:40
там все это там это разные вот и понятно
11:42
что логотип не будет меняться там к
11:46
каждый там два дня ли каждый месяц даже
11:48
хоть хайбара за пять лет поменялся
11:50
логотип поэтому безустанно логотип
11:52
какими-то такие картинки которые я да не
11:55
будут меняться никогда или очень-очень
11:57
редко их конечно же можно и нужно делать
12:00
уже виде изображений not текст
12:04
представьте например даже тот же самый
12:05
текст
12:06
взяли там картинкой ставлю как вы
12:08
измените поэтому безусловно нужно уметь
12:12
верстать так чтобы потом можно было
12:14
легко изменять вашу верстку в плане
12:17
содержимого то изменить текст добавить
12:19
что-то еще убавить кто это было легко и
12:23
без использования файлов photoshop
12:28
следующий критерий это высокая
12:30
производительность это такое начинать
12:33
наиболее такое неважный с точки зрения
12:38
качества верстки но тем не менее на то
12:40
есть например вот раньше было
12:45
табличная верстка от ее почему многие
12:48
отказались потому что она плохо
12:51
загружалась то есть она там буквально
12:53
например у тральщик как были либо блоки
12:56
дифф они при сейчас остались мы тоже
12:58
будем во всех использовать div а был так
13:01
ты был так вот особенно при том что udev
13:04
у нас подгружается подгружается и
13:06
выводится постепенно ты был нас вы
13:08
востоку сразу вся таблица соответствия
13:10
таблица не прогрузится стро
13:12
с у нас этот кусочек не не мог
13:14
загрузиться и открыться это уже не очень
13:17
актуально во первых уже табличной
13:19
верстки
13:19
никто просто можно и найти хотя можно
13:22
еще сыскать привет плюс еще с еще и
13:27
интернет ускорился компьютеру ускорились
13:29
браузер и в углах робочий очень хороший
13:32
быстрый браузер то соответственно в эту
13:35
же особой заметьте но тем не менее то
13:36
есть какие-то определенные нюансы те же
13:38
самые картинки например у какой смысл
13:42
там например снос какая маленькая
13:45
маленькое изображение ца зачем его
13:48
загружать формате там не знаю в 4 как
13:51
примерно до 4к которая также будет
13:53
весить там 2 3 мегабайта ну зачем и
13:56
допустим таких картинок у вас он будет
13:58
20 штук а нибудь все маленькие маленькие
14:02
кто особенности том что маленький значит
14:04
то что пусть даже они будут там 100 на
14:06
200 или допустим там 2000 до 4000 к
14:12
примеру изображение
14:13
все равно разницы пользователь не
14:15
заметят в качестве этой картинке
14:17
до тех пор kh пока он там не будет
14:19
кровати и в полном экране поэтому когда
14:22
будут вас маленькие изображения нужно
14:24
понимать что нужно делать их маленькими
14:26
не нужна высокая качество подставлять
14:28
должна сначала получится 20 за брожений
14:31
каждая по 2 мегабайта 40 мегабайт
14:33
страница
14:34
это ну вообще за все рамки и нормально
14:37
просто а вот этот файлик будет весит там
14:40
20-30 килобайт такой файлик что
14:42
понимаете вот вот такие вещи нужно
14:44
учитывать на 5 с вами будем учить
14:46
обязательно это тоже не беспокойтесь
14:49
этом я вас научу но общий принцип час
14:51
уже показал то есть нужно стараться
14:53
экономить и трафик и вообще чтобы
14:56
быстрее страница загружается это очень
14:57
важно даже с точки зрения поисковых
14:59
систем опять же чем быстрее ваш страница
15:01
будет загружаться тем больше
15:03
предпочтения поисковик будет отдавать
15:05
вашему сайту и будет равна более высокие
15:08
места оставить по определенным ключевым
15:10
запросам это как последний пункт
15:14
критерий качества верстки это общая
15:16
грамотность
15:16
то есть это означает что у вас должно
15:18
быть аккуратно выровнена из рубрики там
15:21
развалов там перевалов и все опять же
15:24
понимаешь что когда вот и примеру
15:26
чайки уже php программы вас конечно же
15:29
странице может поплыть в ну в плане от
15:31
исходного кода рост вы платится подать
15:34
там еще что то это все уже нормально но
15:36
когда вот вы просто утверждаете то есть
15:39
именно сам шаблон определенный пусть там
15:42
даже для того же php поток который вот
15:44
обрабатываться вот он должен быть
15:45
читабельный читабельно он не для обычных
15:48
пользователей еще раз говорю то есть он
15:49
для обычных пользователей потом когда
15:51
пройдет через php
15:52
если у нас эти сайты идет с в
15:56
программировании то все равно там потом
15:58
исходный код здесь попортится серьезно
16:00
срочно можешь попортится его красота вот
16:04
но это никому не нужно важно именно
16:06
шаблон исходной которые всегда и
16:08
правится и наше он был грамоту все
16:10
отступы что были там было все прописать
16:13
четко и понятность например у мы с вами
16:15
будем проходить например классы
16:17
там и а селекторе айди атрибуты айди и
16:21
например у нас есть кроме там блок дать
16:24
взаймы во артикул статья вот это вот
16:31
надо нормально название как как называют
16:33
обычно новички войди равно 100 и а вот
16:39
понимать и до вот такого быть не должно
16:42
это абсолютно никак не повлияет на
16:44
качество верстки самой но когда мы это
16:47
видим понимаешь тут наверстал не очень
16:49
грамотный потому что традиционно нужно
16:52
использовать английский язык то есть все
16:54
разве что эти классы там название
16:56
селекторов есть только английским языком
16:58
если примерно не знать как это будет
17:00
слова на английском языке там 100 статья
17:02
там отзывы
17:03
реклама там подвал там еще что-нибудь
17:07
то просто зайдите там в куль переводчик
17:10
и переведите это слово с русского на
17:12
английский вот и все но чтоб такого
17:15
просто будет нибудь там или кроме там
17:16
отзывы
17:18
вот тогда пишет такого быть просто быть
17:21
reviews
17:23
отзывы
17:26
вот поэтому это тоже очень важно помнить
17:30
на опять же в я с вами буду верстать
17:32
только лишь грамотно старались себе
17:33
стать грамотно и вы на этом все спасибо
17:37
вам за внимание до следующего урока