• Like
RESPONSIVE WEB DESIGN
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

RESPONSIVE WEB DESIGN

  • 202 views
Published

RESPONSIVE WEB DESIGN …

RESPONSIVE WEB DESIGN

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
202
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. RESPONSIVE WEB DESIGN Kerimhanov R. rkerimhanov@codemastersintl.com
  • 2. Оглавление: • • • • • • • • • Знакомство с  HTML5,  CSS3  адаптивным  и  веб-дизайном Медиазапросы: поддержка  разных  областей  просмотра Использование «резиновых»  макетов HTML5 для  адаптивных  веб-дизайнов CSS3:  селекторы,  типографика  цветовые  и  режимы Великолепная эстетика  использованием  с  CSS3 CSS3-переходы,  трансформации  анимации и  Покорение форм  помощью  с  HTML5  CSS3 и  Решение кросс-браузерных  проблем  адаптивностью с 
  • 3. Знакомство с  HTML5,  CSS3  адаптивным  и  веб-дизайном Итан Маркотт – разносторонний дизайнер-разработчик. Его работы – это сочетание качественного кода и захватывающего дизайна. Среди его клиентов – New York Magazine, Стэнфордский университет, Кинофестиваль «Сандэнс» и «Консорциум Всемирной паутины» (World Wide Web Consortium, W3C). Он ведет блог unstoppablerobotninja.com и постоянно зависает в Твиттере (@beep). Итан – автор и технический редактор журнала A List Apart – издания для людей, делающих веб-сайты. Вместе с основателем компании Happy Cog, самым известным веб-дизайнером в мире Джеффри Зельдманом, Итан работал над третьей редакцией книги «Web-дизайн по стандартам», которая занимает почетное место на книжных полках каждого опытного дизайнера.
  • 4. Преимущества HTML5 • Упрощение разметки • Новые семантически значимые элементы тегов • Новые атрибуты Преимущества CSS3 • Новые свойства • Media queries • Применение css3 не приведет к каким-либо нарушениям
  • 5. Можно ли реализовать потенциал HTML5 и CSS3 уже сегодня? • Хочет  ли  заказчик  охватить  максимально  широкий  круг  интернет -пользователей,  количество  которых  постоянно  растет?  • Хочет  ли  заказчик  получить  максимально  чистую,  наиболее  быст ро  работающую  самую  и  удобную  сопровождении  в  кодовую  базу?  • Понимает  ли  заказчик,  что  взаимодействие  может  должно  и  сл егка  отличаться  при  использовании  разных  браузеров?  • Хочет  ли  заказчик,  чтобы  нужный  ему  дизайн  выглядел  одина
  • 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. Что позволяют проверить медиазапросы • • • • • • • • • • • • • Width Height Device-width Device-height Orientation Aspect-ratio Device-aspect-ratio Color Color-index Monochrome Resolution Scan Grid
  • 8. Использование «резиновых» макетов ШИРИНА ДОЧЕРНЕГО ЭЛЕМЕНТА __________________________________ * ШИРИНА РОДИТЕЛЬСКОГО ЭЛЕМЕНАТА 100 = РЕЗУЛЬТАТ
  • 9. Резиновые изображения
  • 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. HTML5 для адаптивных веб-дизайнов
  • 12. CSS3 типографика: селекторы и цветовые режимы
  • 13. Новые цветовые форматы CSS3 и альфа-прозрачность • RGB • HEX • HSL
  • 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. 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. 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. CSS препроцессоры • http://sass-lang.com/ • http://www.lesscss.org/ Масштабируемые значки • http://fico.lensco.be/#see • http://icomoon.io/
  • 18. CSS3-переходы,  трансформации  анимации и  • Переходы • • • • transition-property transition-duration transition-timing-function transition-delay
  • 19. • Трансформации • 2D • scale • translate • rotate • Skew • matrix • 3D • perspective • rotateX & rotateY
  • 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. Покорение форм  помощью  с  HTML5  CSS3 и  • Атрибуты • • • • • placeholder required autofocus autocomplete list & datalist • Типы полей ввода • email • number • url • tel • search • pattern • color • date, time, month,week e.t.c • range
  • 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. Выводы, вопросы и дополнения? • Используйте html5 и css3 где возможно • Не забывайте про владельцев мобильных систем – используйте адаптивную верстку • Используйте полизаполнения • Используйте готовые фреймворки • Используйте css препроцессоры