Дизайн и вёрстка Факультет Интернета МФПУ СИНЕРГИЯ Курс «Веб-разработка» Илья Ершов. - презентация

1 Дизайн и вёрстка Факультет Интернета МФПУ СИНЕРГИЯ Курс «Веб-разработка» Илья Ершов

2 Дизайн Графический Программируемый

3 Графический дизайн Приемущества Недостатки Полная свобода дизайнера Можно внедрять всякие «завитушки» Старая школа Для создания адаптивного дизайна нужно прорисовывать отдельный макет Сложно точно воспроизвести градиенты, тени

4 Программируемый дизайн Приемущества Недостатки Легко переносится в CSS свойства Можно импортировать как SVG Удобно создавать адаптивные сайты Удобно анимировать Ограничение творческого потенциала дизайнера

5 Технологии Старая школа Макет в.PSD Язык разметки текста HTML5 Таблицы стилей CSS3 JQuery Новая школа, Hard режим Макет в.AI,.EPS,.PDF Язык разметки текста HTML5 CSS3, SASS, LESS JavaScript + фреймворки JQuery, Bootstrap, GSAP и другие Node.js, bower, gulp, yo Система контроля версий Git

6 Важна ли адаптивность?

7 Принцип: HTML HTML код:

8 Принцип: стили CSS код:

9 Принцип: Фреймворк Bootstrap HTML код:

10 Растровые картинки vs правила CSS

11

12

13

14 Растровая картинка: 300 байт (со сжатием)

15 CSS правило: 53 байта В этом примере эффективность выше в 6 раз. Это значит, что страница сайта будет загружаться в 6 раз быстрее

16 Дизайн-макет

17

18

19 Вёрстка

20 Результат вёрстки Набор файлов: HTML, CSS, JS

21 Результат вёрстки

22 Илья Ершов Веб-разработчик, руководитель интернет-проектов Skype: ershov.ilya Ссылки и дополнительные материалы на странице:

23 Спасибо за внимание