RESPONSIVE WEB DESIGN

699 views

Published on

RESPONSIVE WEB DESIGN

Published in: Technology
  • Be the first to comment

RESPONSIVE WEB DESIGN

  1. 1. RESPONSIVE WEB DESIGN Kerimhanov R. rkerimhanov@codemastersintl.com
  2. 2. Оглавление: • • • • • • • • • Знакомство с  HTML5,  CSS3  адаптивным  и  веб-дизайном Медиазапросы: поддержка  разных  областей  просмотра Использование «резиновых»  макетов HTML5 для  адаптивных  веб-дизайнов CSS3:  селекторы,  типографика  цветовые  и  режимы Великолепная эстетика  использованием  с  CSS3 CSS3-переходы,  трансформации  анимации и  Покорение форм  помощью  с  HTML5  CSS3 и  Решение кросс-браузерных  проблем  адаптивностью с 
  3. 3. Знакомство с  HTML5,  CSS3  адаптивным  и  веб-дизайном Итан Маркотт – разносторонний дизайнер-разработчик. Его работы – это сочетание качественного кода и захватывающего дизайна. Среди его клиентов – New York Magazine, Стэнфордский университет, Кинофестиваль «Сандэнс» и «Консорциум Всемирной паутины» (World Wide Web Consortium, W3C). Он ведет блог unstoppablerobotninja.com и постоянно зависает в Твиттере (@beep). Итан – автор и технический редактор журнала A List Apart – издания для людей, делающих веб-сайты. Вместе с основателем компании Happy Cog, самым известным веб-дизайнером в мире Джеффри Зельдманом, Итан работал над третьей редакцией книги «Web-дизайн по стандартам», которая занимает почетное место на книжных полках каждого опытного дизайнера.
  4. 4. Преимущества HTML5 • Упрощение разметки • Новые семантически значимые элементы тегов • Новые атрибуты Преимущества CSS3 • Новые свойства • Media queries • Применение css3 не приведет к каким-либо нарушениям
  5. 5. Можно ли реализовать потенциал HTML5 и CSS3 уже сегодня? • Хочет  ли  заказчик  охватить  максимально  широкий  круг  интернет -пользователей,  количество  которых  постоянно  растет?  • Хочет  ли  заказчик  получить  максимально  чистую,  наиболее  быст ро  работающую  самую  и  удобную  сопровождении  в  кодовую  базу?  • Понимает  ли  заказчик,  что  взаимодействие  может  должно  и  сл егка  отличаться  при  использовании  разных  браузеров?  • Хочет  ли  заказчик,  чтобы  нужный  ему  дизайн  выглядел  одина
  6. 6. Медиазапросы: поддержка разных областей просмотра Медиазапросы можно использовать уже сегодня • • • • • • • Firefox 3.6+ Safary 4+ Chrome 4+ Opera 9+ IE 9+ Safari 3.2+ в IOS Android 2.1 + Синтаксис медиазапросов @media screen and (max-width: 960px) <link rel="stylesheet" media="screen and (max-width: 960px) " href="800wide-portrait-screen.css" />
  7. 7. Что позволяют проверить медиазапросы • • • • • • • • • • • • • Width Height Device-width Device-height Orientation Aspect-ratio Device-aspect-ratio Color Color-index Monochrome Resolution Scan Grid
  8. 8. Использование «резиновых» макетов ШИРИНА ДОЧЕРНЕГО ЭЛЕМЕНТА __________________________________ * ШИРИНА РОДИТЕЛЬСКОГО ЭЛЕМЕНАТА 100 = РЕЗУЛЬТАТ
  9. 9. Резиновые изображения
  10. 10. Сеточные системы CSS • • • • • • • Semantic (http://semantic.gs/) Skeleton (http://www.getskeleton.com/) Less Framework (http://lessframework.com/) 1140 Css Grid (http://cssgrid.net/) Clumnal (http://www.columnal.com/) Foundation (http://foundation.zurb.com) Twitter Bootstrap (http://getbootstrap.com/)
  11. 11. HTML5 для адаптивных веб-дизайнов
  12. 12. CSS3 типографика: селекторы и цветовые режимы
  13. 13. Новые цветовые форматы CSS3 и альфа-прозрачность • RGB • HEX • HSL
  14. 14. Великолепная эстетика  использованием  с  CSS3 • Текст с тенью text-shadow: 0px 1px #ffffff,4px 4px 0px #dad7d7; • Тени блочных элементов box-shadow:inset 0 0 40px #000000; • Линейные фоновые градиенты background: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%, #ffffff 100%); • Радиальные фоновые градиенты background: radial-gradient(center, ellipse farthest-corner, #ffffff 72%, #dddddd 100%); • Повторяющиеся градиенты
  15. 15. background: repeating-linear-gradient(90deg, #ffffff 0px, hsla(0, 1%, 50%,0.1) 5px); background: repeating-radial-gradient(2px 2px, ellipse, hsla(0,0%,100%,1) 2px, hsla(0,0%,95%,1) 10px, hsla(0,0%,93%,1) 15px, hsla(0,0%,100%,1) 20px);
  16. 16. body { background-color:white; background-image: radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px), repeating-radial-radient(hsla(0, 0%, 87%, 0.31) 0, hsla(0, 0%, 87%, 0.31) 4px, transparent 5px, transparent 20px, hsla(0, 0%, 87%, 0.31) 21px, hsla(0, 0%, 87%, 0.31) 25px, transparent 26px, transparent 50px); background-size: 30px 30px, 90px 90px; background-position: 0 0; } http://lea.verou.me/ Рис. 6.18. Для страницы задан фон в виде узора
  17. 17. CSS препроцессоры • http://sass-lang.com/ • http://www.lesscss.org/ Масштабируемые значки • http://fico.lensco.be/#see • http://icomoon.io/
  18. 18. CSS3-переходы,  трансформации  анимации и  • Переходы • • • • transition-property transition-duration transition-timing-function transition-delay
  19. 19. • Трансформации • 2D • scale • translate • rotate • Skew • matrix • 3D • perspective • rotateX & rotateY
  20. 20. Анимация с помощью CSS3 @keyframes warning { 0% { text-shadow: 0px 0px 4px #000000; } 50% { text-shadow: 0 0 20px #000000; } 100% { text-shadow: 0px 0px 4px #000000; } } animation: warning 1.5s infinite ease-in;
  21. 21. Покорение форм  помощью  с  HTML5  CSS3 и  • Атрибуты • • • • • placeholder required autofocus autocomplete list & datalist • Типы полей ввода • email • number • url • tel • search • pattern • color • date, time, month,week e.t.c • range
  22. 22. Решение кросс-браузерных  проблем  адаптивностью с  • Плавное сокращение возможностей • Прогрессивное улучшение Modernizr — «швейцарский армейский нож» разработчика клиентских приложений <html class=" js flexbox geolocation postmessage indexeddb history websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio localStorage sessionstorage applicationcache" lang="en">
  23. 23. Выводы, вопросы и дополнения? • Используйте html5 и css3 где возможно • Не забывайте про владельцев мобильных систем – используйте адаптивную верстку • Используйте полизаполнения • Используйте готовые фреймворки • Используйте css препроцессоры

×