🗊 Презентация HTML. XML. Вэб-технологии

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
HTML. XML. Вэб-технологии, слайд №1 HTML. XML. Вэб-технологии, слайд №2 HTML. XML. Вэб-технологии, слайд №3 HTML. XML. Вэб-технологии, слайд №4 HTML. XML. Вэб-технологии, слайд №5 HTML. XML. Вэб-технологии, слайд №6 HTML. XML. Вэб-технологии, слайд №7 HTML. XML. Вэб-технологии, слайд №8 HTML. XML. Вэб-технологии, слайд №9 HTML. XML. Вэб-технологии, слайд №10 HTML. XML. Вэб-технологии, слайд №11 HTML. XML. Вэб-технологии, слайд №12 HTML. XML. Вэб-технологии, слайд №13 HTML. XML. Вэб-технологии, слайд №14 HTML. XML. Вэб-технологии, слайд №15 HTML. XML. Вэб-технологии, слайд №16 HTML. XML. Вэб-технологии, слайд №17 HTML. XML. Вэб-технологии, слайд №18 HTML. XML. Вэб-технологии, слайд №19 HTML. XML. Вэб-технологии, слайд №20 HTML. XML. Вэб-технологии, слайд №21 HTML. XML. Вэб-технологии, слайд №22 HTML. XML. Вэб-технологии, слайд №23 HTML. XML. Вэб-технологии, слайд №24 HTML. XML. Вэб-технологии, слайд №25 HTML. XML. Вэб-технологии, слайд №26 HTML. XML. Вэб-технологии, слайд №27 HTML. XML. Вэб-технологии, слайд №28 HTML. XML. Вэб-технологии, слайд №29 HTML. XML. Вэб-технологии, слайд №30 HTML. XML. Вэб-технологии, слайд №31 HTML. XML. Вэб-технологии, слайд №32 HTML. XML. Вэб-технологии, слайд №33 HTML. XML. Вэб-технологии, слайд №34 HTML. XML. Вэб-технологии, слайд №35 HTML. XML. Вэб-технологии, слайд №36 HTML. XML. Вэб-технологии, слайд №37 HTML. XML. Вэб-технологии, слайд №38 HTML. XML. Вэб-технологии, слайд №39 HTML. XML. Вэб-технологии, слайд №40 HTML. XML. Вэб-технологии, слайд №41 HTML. XML. Вэб-технологии, слайд №42 HTML. XML. Вэб-технологии, слайд №43 HTML. XML. Вэб-технологии, слайд №44 HTML. XML. Вэб-технологии, слайд №45 HTML. XML. Вэб-технологии, слайд №46 HTML. XML. Вэб-технологии, слайд №47 HTML. XML. Вэб-технологии, слайд №48 HTML. XML. Вэб-технологии, слайд №49 HTML. XML. Вэб-технологии, слайд №50 HTML. XML. Вэб-технологии, слайд №51 HTML. XML. Вэб-технологии, слайд №52 HTML. XML. Вэб-технологии, слайд №53 HTML. XML. Вэб-технологии, слайд №54 HTML. XML. Вэб-технологии, слайд №55 HTML. XML. Вэб-технологии, слайд №56 HTML. XML. Вэб-технологии, слайд №57 HTML. XML. Вэб-технологии, слайд №58 HTML. XML. Вэб-технологии, слайд №59 HTML. XML. Вэб-технологии, слайд №60 HTML. XML. Вэб-технологии, слайд №61 HTML. XML. Вэб-технологии, слайд №62 HTML. XML. Вэб-технологии, слайд №63 HTML. XML. Вэб-технологии, слайд №64 HTML. XML. Вэб-технологии, слайд №65 HTML. XML. Вэб-технологии, слайд №66 HTML. XML. Вэб-технологии, слайд №67 HTML. XML. Вэб-технологии, слайд №68 HTML. XML. Вэб-технологии, слайд №69 HTML. XML. Вэб-технологии, слайд №70 HTML. XML. Вэб-технологии, слайд №71 HTML. XML. Вэб-технологии, слайд №72 HTML. XML. Вэб-технологии, слайд №73 HTML. XML. Вэб-технологии, слайд №74 HTML. XML. Вэб-технологии, слайд №75 HTML. XML. Вэб-технологии, слайд №76 HTML. XML. Вэб-технологии, слайд №77 HTML. XML. Вэб-технологии, слайд №78 HTML. XML. Вэб-технологии, слайд №79 HTML. XML. Вэб-технологии, слайд №80 HTML. XML. Вэб-технологии, слайд №81 HTML. XML. Вэб-технологии, слайд №82 HTML. XML. Вэб-технологии, слайд №83 HTML. XML. Вэб-технологии, слайд №84 HTML. XML. Вэб-технологии, слайд №85 HTML. XML. Вэб-технологии, слайд №86 HTML. XML. Вэб-технологии, слайд №87 HTML. XML. Вэб-технологии, слайд №88 HTML. XML. Вэб-технологии, слайд №89 HTML. XML. Вэб-технологии, слайд №90 HTML. XML. Вэб-технологии, слайд №91 HTML. XML. Вэб-технологии, слайд №92 HTML. XML. Вэб-технологии, слайд №93 HTML. XML. Вэб-технологии, слайд №94 HTML. XML. Вэб-технологии, слайд №95 HTML. XML. Вэб-технологии, слайд №96 HTML. XML. Вэб-технологии, слайд №97 HTML. XML. Вэб-технологии, слайд №98 HTML. XML. Вэб-технологии, слайд №99 HTML. XML. Вэб-технологии, слайд №100 HTML. XML. Вэб-технологии, слайд №101 HTML. XML. Вэб-технологии, слайд №102 HTML. XML. Вэб-технологии, слайд №103 HTML. XML. Вэб-технологии, слайд №104 HTML. XML. Вэб-технологии, слайд №105 HTML. XML. Вэб-технологии, слайд №106 HTML. XML. Вэб-технологии, слайд №107 HTML. XML. Вэб-технологии, слайд №108 HTML. XML. Вэб-технологии, слайд №109 HTML. XML. Вэб-технологии, слайд №110 HTML. XML. Вэб-технологии, слайд №111 HTML. XML. Вэб-технологии, слайд №112 HTML. XML. Вэб-технологии, слайд №113 HTML. XML. Вэб-технологии, слайд №114 HTML. XML. Вэб-технологии, слайд №115 HTML. XML. Вэб-технологии, слайд №116 HTML. XML. Вэб-технологии, слайд №117 HTML. XML. Вэб-технологии, слайд №118 HTML. XML. Вэб-технологии, слайд №119 HTML. XML. Вэб-технологии, слайд №120 HTML. XML. Вэб-технологии, слайд №121 HTML. XML. Вэб-технологии, слайд №122 HTML. XML. Вэб-технологии, слайд №123 HTML. XML. Вэб-технологии, слайд №124 HTML. XML. Вэб-технологии, слайд №125 HTML. XML. Вэб-технологии, слайд №126 HTML. XML. Вэб-технологии, слайд №127 HTML. XML. Вэб-технологии, слайд №128 HTML. XML. Вэб-технологии, слайд №129 HTML. XML. Вэб-технологии, слайд №130 HTML. XML. Вэб-технологии, слайд №131 HTML. XML. Вэб-технологии, слайд №132 HTML. XML. Вэб-технологии, слайд №133 HTML. XML. Вэб-технологии, слайд №134 HTML. XML. Вэб-технологии, слайд №135 HTML. XML. Вэб-технологии, слайд №136 HTML. XML. Вэб-технологии, слайд №137 HTML. XML. Вэб-технологии, слайд №138 HTML. XML. Вэб-технологии, слайд №139 HTML. XML. Вэб-технологии, слайд №140 HTML. XML. Вэб-технологии, слайд №141 HTML. XML. Вэб-технологии, слайд №142 HTML. XML. Вэб-технологии, слайд №143 HTML. XML. Вэб-технологии, слайд №144 HTML. XML. Вэб-технологии, слайд №145 HTML. XML. Вэб-технологии, слайд №146 HTML. XML. Вэб-технологии, слайд №147 HTML. XML. Вэб-технологии, слайд №148 HTML. XML. Вэб-технологии, слайд №149 HTML. XML. Вэб-технологии, слайд №150 HTML. XML. Вэб-технологии, слайд №151 HTML. XML. Вэб-технологии, слайд №152 HTML. XML. Вэб-технологии, слайд №153 HTML. XML. Вэб-технологии, слайд №154 HTML. XML. Вэб-технологии, слайд №155 HTML. XML. Вэб-технологии, слайд №156 HTML. XML. Вэб-технологии, слайд №157 HTML. XML. Вэб-технологии, слайд №158 HTML. XML. Вэб-технологии, слайд №159 HTML. XML. Вэб-технологии, слайд №160 HTML. XML. Вэб-технологии, слайд №161 HTML. XML. Вэб-технологии, слайд №162 HTML. XML. Вэб-технологии, слайд №163 HTML. XML. Вэб-технологии, слайд №164 HTML. XML. Вэб-технологии, слайд №165 HTML. XML. Вэб-технологии, слайд №166 HTML. XML. Вэб-технологии, слайд №167 HTML. XML. Вэб-технологии, слайд №168 HTML. XML. Вэб-технологии, слайд №169 HTML. XML. Вэб-технологии, слайд №170 HTML. XML. Вэб-технологии, слайд №171 HTML. XML. Вэб-технологии, слайд №172 HTML. XML. Вэб-технологии, слайд №173 HTML. XML. Вэб-технологии, слайд №174 HTML. XML. Вэб-технологии, слайд №175 HTML. XML. Вэб-технологии, слайд №176 HTML. XML. Вэб-технологии, слайд №177 HTML. XML. Вэб-технологии, слайд №178 HTML. XML. Вэб-технологии, слайд №179 HTML. XML. Вэб-технологии, слайд №180 HTML. XML. Вэб-технологии, слайд №181 HTML. XML. Вэб-технологии, слайд №182 HTML. XML. Вэб-технологии, слайд №183 HTML. XML. Вэб-технологии, слайд №184 HTML. XML. Вэб-технологии, слайд №185 HTML. XML. Вэб-технологии, слайд №186 HTML. XML. Вэб-технологии, слайд №187 HTML. XML. Вэб-технологии, слайд №188 HTML. XML. Вэб-технологии, слайд №189 HTML. XML. Вэб-технологии, слайд №190 HTML. XML. Вэб-технологии, слайд №191 HTML. XML. Вэб-технологии, слайд №192 HTML. XML. Вэб-технологии, слайд №193 HTML. XML. Вэб-технологии, слайд №194 HTML. XML. Вэб-технологии, слайд №195 HTML. XML. Вэб-технологии, слайд №196 HTML. XML. Вэб-технологии, слайд №197 HTML. XML. Вэб-технологии, слайд №198 HTML. XML. Вэб-технологии, слайд №199 HTML. XML. Вэб-технологии, слайд №200 HTML. XML. Вэб-технологии, слайд №201 HTML. XML. Вэб-технологии, слайд №202 HTML. XML. Вэб-технологии, слайд №203 HTML. XML. Вэб-технологии, слайд №204 HTML. XML. Вэб-технологии, слайд №205 HTML. XML. Вэб-технологии, слайд №206 HTML. XML. Вэб-технологии, слайд №207 HTML. XML. Вэб-технологии, слайд №208 HTML. XML. Вэб-технологии, слайд №209 HTML. XML. Вэб-технологии, слайд №210 HTML. XML. Вэб-технологии, слайд №211 HTML. XML. Вэб-технологии, слайд №212 HTML. XML. Вэб-технологии, слайд №213 HTML. XML. Вэб-технологии, слайд №214 HTML. XML. Вэб-технологии, слайд №215 HTML. XML. Вэб-технологии, слайд №216 HTML. XML. Вэб-технологии, слайд №217 HTML. XML. Вэб-технологии, слайд №218 HTML. XML. Вэб-технологии, слайд №219 HTML. XML. Вэб-технологии, слайд №220 HTML. XML. Вэб-технологии, слайд №221 HTML. XML. Вэб-технологии, слайд №222 HTML. XML. Вэб-технологии, слайд №223 HTML. XML. Вэб-технологии, слайд №224 HTML. XML. Вэб-технологии, слайд №225 HTML. XML. Вэб-технологии, слайд №226 HTML. XML. Вэб-технологии, слайд №227 HTML. XML. Вэб-технологии, слайд №228 HTML. XML. Вэб-технологии, слайд №229 HTML. XML. Вэб-технологии, слайд №230 HTML. XML. Вэб-технологии, слайд №231 HTML. XML. Вэб-технологии, слайд №232 HTML. XML. Вэб-технологии, слайд №233
Скачать

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему HTML. XML. Вэб-технологии. Доклад-сообщение содержит 233 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


HTML. XML. Вэб-технологии, слайд №1
Описание слайда:

Слайд 2


HTML. XML. Вэб-технологии, слайд №2
Описание слайда:

Слайд 3


HTML. XML. Вэб-технологии, слайд №3
Описание слайда:

Слайд 4


HTML. XML. Вэб-технологии, слайд №4
Описание слайда:

Слайд 5


HTML. XML. Вэб-технологии, слайд №5
Описание слайда:

Слайд 6


HTML. XML. Вэб-технологии, слайд №6
Описание слайда:

Слайд 7


HTML. XML. Вэб-технологии, слайд №7
Описание слайда:

Слайд 8


HTML. XML. Вэб-технологии, слайд №8
Описание слайда:

Слайд 9


HTML. XML. Вэб-технологии, слайд №9
Описание слайда:

Слайд 10


HTML. XML. Вэб-технологии, слайд №10
Описание слайда:

Слайд 11


HTML. XML. Вэб-технологии, слайд №11
Описание слайда:

Слайд 12


HTML. XML. Вэб-технологии, слайд №12
Описание слайда:

Слайд 13


HTML. XML. Вэб-технологии, слайд №13
Описание слайда:

Слайд 14


HTML. XML. Вэб-технологии, слайд №14
Описание слайда:

Слайд 15


HTML. XML. Вэб-технологии, слайд №15
Описание слайда:

Слайд 16


HTML. XML. Вэб-технологии, слайд №16
Описание слайда:

Слайд 17


HTML. XML. Вэб-технологии, слайд №17
Описание слайда:

Слайд 18


HTML. XML. Вэб-технологии, слайд №18
Описание слайда:

Слайд 19


HTML. XML. Вэб-технологии, слайд №19
Описание слайда:

Слайд 20


HTML. XML. Вэб-технологии, слайд №20
Описание слайда:

Слайд 21


HTML. XML. Вэб-технологии, слайд №21
Описание слайда:

Слайд 22


HTML. XML. Вэб-технологии, слайд №22
Описание слайда:

Слайд 23


XML
Описание слайда:
XML

Слайд 24


HTML. XML. Вэб-технологии, слайд №24
Описание слайда:

Слайд 25


HTML. XML. Вэб-технологии, слайд №25
Описание слайда:

Слайд 26


HTML. XML. Вэб-технологии, слайд №26
Описание слайда:

Слайд 27


HTML. XML. Вэб-технологии, слайд №27
Описание слайда:

Слайд 28


HTML. XML. Вэб-технологии, слайд №28
Описание слайда:

Слайд 29


HTML. XML. Вэб-технологии, слайд №29
Описание слайда:

Слайд 30


HTML. XML. Вэб-технологии, слайд №30
Описание слайда:

Слайд 31


HTML. XML. Вэб-технологии, слайд №31
Описание слайда:

Слайд 32


HTML. XML. Вэб-технологии, слайд №32
Описание слайда:

Слайд 33


HTML. XML. Вэб-технологии, слайд №33
Описание слайда:

Слайд 34


HTML. XML. Вэб-технологии, слайд №34
Описание слайда:

Слайд 35


HTML. XML. Вэб-технологии, слайд №35
Описание слайда:

Слайд 36


HTML. XML. Вэб-технологии, слайд №36
Описание слайда:

Слайд 37


HTML. XML. Вэб-технологии, слайд №37
Описание слайда:

Слайд 38


HTML. XML. Вэб-технологии, слайд №38
Описание слайда:

Слайд 39


HTML. XML. Вэб-технологии, слайд №39
Описание слайда:

Слайд 40


HTML. XML. Вэб-технологии, слайд №40
Описание слайда:

Слайд 41


HTML. XML. Вэб-технологии, слайд №41
Описание слайда:

Слайд 42


HTML. XML. Вэб-технологии, слайд №42
Описание слайда:

Слайд 43


HTML. XML. Вэб-технологии, слайд №43
Описание слайда:

Слайд 44


HTML. XML. Вэб-технологии, слайд №44
Описание слайда:

Слайд 45


HTML. XML. Вэб-технологии, слайд №45
Описание слайда:

Слайд 46


HTML. XML. Вэб-технологии, слайд №46
Описание слайда:

Слайд 47


HTML. XML. Вэб-технологии, слайд №47
Описание слайда:

Слайд 48


HTML. XML. Вэб-технологии, слайд №48
Описание слайда:

Слайд 49


HTML. XML. Вэб-технологии, слайд №49
Описание слайда:

Слайд 50


HTML. XML. Вэб-технологии, слайд №50
Описание слайда:

Слайд 51


HTML. XML. Вэб-технологии, слайд №51
Описание слайда:

Слайд 52


HTML. XML. Вэб-технологии, слайд №52
Описание слайда:

Слайд 53


HTML. XML. Вэб-технологии, слайд №53
Описание слайда:

Слайд 54


HTML. XML. Вэб-технологии, слайд №54
Описание слайда:

Слайд 55


HTML. XML. Вэб-технологии, слайд №55
Описание слайда:

Слайд 56


HTML. XML. Вэб-технологии, слайд №56
Описание слайда:

Слайд 57


HTML. XML. Вэб-технологии, слайд №57
Описание слайда:

Слайд 58


HTML. XML. Вэб-технологии, слайд №58
Описание слайда:

Слайд 59


HTML. XML. Вэб-технологии, слайд №59
Описание слайда:

Слайд 60


HTML. XML. Вэб-технологии, слайд №60
Описание слайда:

Слайд 61


HTML. XML. Вэб-технологии, слайд №61
Описание слайда:

Слайд 62


HTML. XML. Вэб-технологии, слайд №62
Описание слайда:

Слайд 63


HTML. XML. Вэб-технологии, слайд №63
Описание слайда:

Слайд 64


HTML. XML. Вэб-технологии, слайд №64
Описание слайда:

Слайд 65


HTML. XML. Вэб-технологии, слайд №65
Описание слайда:

Слайд 66


HTML. XML. Вэб-технологии, слайд №66
Описание слайда:

Слайд 67


HTML. XML. Вэб-технологии, слайд №67
Описание слайда:

Слайд 68


HTML. XML. Вэб-технологии, слайд №68
Описание слайда:

Слайд 69


HTML. XML. Вэб-технологии, слайд №69
Описание слайда:

Слайд 70


HTML. XML. Вэб-технологии, слайд №70
Описание слайда:

Слайд 71


HTML. XML. Вэб-технологии, слайд №71
Описание слайда:

Слайд 72


HTML. XML. Вэб-технологии, слайд №72
Описание слайда:

Слайд 73


HTML. XML. Вэб-технологии, слайд №73
Описание слайда:

Слайд 74


Создание адаптивных сайтов Адаптивная верстка
Описание слайда:
Создание адаптивных сайтов Адаптивная верстка

Слайд 75


Что такое адаптивный веб дизайн? Адаптивный веб-дизайн (англ. Responsive Web Design) — дизайн веб-страниц, обеспечивающий корректное отображение...
Описание слайда:
Что такое адаптивный веб дизайн? Адаптивный веб-дизайн (англ. Responsive Web Design) — дизайн веб-страниц, обеспечивающий корректное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера.

Слайд 76


Схема адаптивного дизайна
Описание слайда:
Схема адаптивного дизайна

Слайд 77


Responsive Design
Описание слайда:
Responsive Design

Слайд 78


Progressive enhancement или Graceful degradation? Graceful degradation –противоположный к Progressive enhancement, верстка начинается с самых новых...
Описание слайда:
Progressive enhancement или Graceful degradation? Graceful degradation –противоположный к Progressive enhancement, верстка начинается с самых новых браузеров, и урезается в зависимости от вида на старых браузерах.

Слайд 79


Этапы Progressive Enhancement
Описание слайда:
Этапы Progressive Enhancement

Слайд 80


Что такое Mobile first ? Проектирование начинается с адаптивной версии веб-сайта для мобильных устройств. На этом этапе дизайнеры стремятся правильно...
Описание слайда:
Что такое Mobile first ? Проектирование начинается с адаптивной версии веб-сайта для мобильных устройств. На этом этапе дизайнеры стремятся правильно передать смысл и основные идеи с использованием небольшого экрана и всего одной колонки. Содержимое при необходимости сокращают, удаляя второстепенные информационные блоки и оставляя самое важное

Слайд 81


Создание адаптивных сайтов Как перевести статичную разметку в гибкую.
Описание слайда:
Создание адаптивных сайтов Как перевести статичную разметку в гибкую.

Слайд 82


Разметка для адаптивных сайтов
Описание слайда:
Разметка для адаптивных сайтов

Слайд 83


Мета тэг “viewport” отвечает за отображение на мобильных устройствах Мета тэг “viewport” отвечает за отображение на мобильных устройствах
Описание слайда:
Мета тэг “viewport” отвечает за отображение на мобильных устройствах Мета тэг “viewport” отвечает за отображение на мобильных устройствах

Слайд 84


Предположим у нас есть обычный css. Предположим у нас есть обычный css.
Описание слайда:
Предположим у нас есть обычный css. Предположим у нас есть обычный css.

Слайд 85


HTML. XML. Вэб-технологии, слайд №85
Описание слайда:

Слайд 86


Как сделать сайт адаптивным? Для начала нам нужно убрать все константы размеров, что бы величина то ли фрейма, то ли контейнера зависела от других...
Описание слайда:
Как сделать сайт адаптивным? Для начала нам нужно убрать все константы размеров, что бы величина то ли фрейма, то ли контейнера зависела от других чисел Сделаем ширину контейнера не статической

Слайд 87


Так как за основу мы брали 960 px, это и будет наш контекст. Так как за основу мы брали 960 px, это и будет наш контекст. section : (650px / 960px) *...
Описание слайда:
Так как за основу мы брали 960 px, это и будет наш контекст. Так как за основу мы брали 960 px, это и будет наш контекст. section : (650px / 960px) * 100 = 67.7 % aside : (300px / 960px) * 100 = 31.25 %

Слайд 88


Видим результат :
Описание слайда:
Видим результат :

Слайд 89


Что на счет шрифтов? Для расчета размеров шрифтов мы используем такую формулу :
Описание слайда:
Что на счет шрифтов? Для расчета размеров шрифтов мы используем такую формулу :

Слайд 90


Гибридная верстка
Описание слайда:
Гибридная верстка

Слайд 91


Что такое гибридная верстка? Гибридная верстка – комбинирование статической верстки с адаптивной(резиновой)
Описание слайда:
Что такое гибридная верстка? Гибридная верстка – комбинирование статической верстки с адаптивной(резиновой)

Слайд 92


HTML. XML. Вэб-технологии, слайд №92
Описание слайда:

Слайд 93


Как решить эту проблему? У табличной верстки есть одно положительное свойство : Ячейки таблиц принимают ширину контента который задается внутри этой...
Описание слайда:
Как решить эту проблему? У табличной верстки есть одно положительное свойство : Ячейки таблиц принимают ширину контента который задается внутри этой ячейки

Слайд 94


С помощью свойства дисплей добавляем такие свойства : С помощью свойства дисплей добавляем такие свойства :
Описание слайда:
С помощью свойства дисплей добавляем такие свойства : С помощью свойства дисплей добавляем такие свойства :

Слайд 95


HTML. XML. Вэб-технологии, слайд №95
Описание слайда:

Слайд 96


Но как мы видим, это далеко не идеальный вариант, так как : Но как мы видим, это далеко не идеальный вариант, так как :
Описание слайда:
Но как мы видим, это далеко не идеальный вариант, так как : Но как мы видим, это далеко не идеальный вариант, так как :

Слайд 97


Гибкая сетка
Описание слайда:
Гибкая сетка

Слайд 98


Что такое гибкая сетка?
Описание слайда:
Что такое гибкая сетка?

Слайд 99


HTML. XML. Вэб-технологии, слайд №99
Описание слайда:

Слайд 100


HTML. XML. Вэб-технологии, слайд №100
Описание слайда:

Слайд 101


Что такое гибкая сетка?
Описание слайда:
Что такое гибкая сетка?

Слайд 102


HTML. XML. Вэб-технологии, слайд №102
Описание слайда:

Слайд 103


HTML. XML. Вэб-технологии, слайд №103
Описание слайда:

Слайд 104


HTML. XML. Вэб-технологии, слайд №104
Описание слайда:

Слайд 105


Методы для создания гибкой сетки? Несколько макетов(для разных экранов), и вы верстаете конкретно по макетам. Но это не вкладывается в основные...
Описание слайда:
Методы для создания гибкой сетки? Несколько макетов(для разных экранов), и вы верстаете конкретно по макетам. Но это не вкладывается в основные положения адаптивной верстки Mobile First, где верстка и дизайн тесно пересекаются. Изначально строятся прототипы, с помощью специальных программ(пример – Balsamiq)

Слайд 106


Программы создания адаптивной верстки Для того что бы понимать как работает гибкая сетка, нужно сделать ее самому.
Описание слайда:
Программы создания адаптивной верстки Для того что бы понимать как работает гибкая сетка, нужно сделать ее самому.

Слайд 107


HTML. XML. Вэб-технологии, слайд №107
Описание слайда:

Слайд 108


Так как мы будем делать обычную стандартную гибкую сетку на 12 столбцов, нам нужно узнать сколько места будет занимать каждый столбец. В процентном...
Описание слайда:
Так как мы будем делать обычную стандартную гибкую сетку на 12 столбцов, нам нужно узнать сколько места будет занимать каждый столбец. В процентном соотношении это : Так как мы будем делать обычную стандартную гибкую сетку на 12 столбцов, нам нужно узнать сколько места будет занимать каждый столбец. В процентном соотношении это : 100 % / 12 = 8.3333 % Далее в css файле создаем колонки :

Слайд 109


Создав все 12 столбцов(число столбцов может быть различное, и их процентное соотношение, естественно тоже) получаем : Создав все 12 столбцов(число...
Описание слайда:
Создав все 12 столбцов(число столбцов может быть различное, и их процентное соотношение, естественно тоже) получаем : Создав все 12 столбцов(число столбцов может быть различное, и их процентное соотношение, естественно тоже) получаем :

Слайд 110


HTML. XML. Вэб-технологии, слайд №110
Описание слайда:

Слайд 111


HTML. XML. Вэб-технологии, слайд №111
Описание слайда:

Слайд 112


HTML. XML. Вэб-технологии, слайд №112
Описание слайда:

Слайд 113


HTML. XML. Вэб-технологии, слайд №113
Описание слайда:

Слайд 114


HTML. XML. Вэб-технологии, слайд №114
Описание слайда:

Слайд 115


HTML. XML. Вэб-технологии, слайд №115
Описание слайда:

Слайд 116


HTML. XML. Вэб-технологии, слайд №116
Описание слайда:

Слайд 117


HTML. XML. Вэб-технологии, слайд №117
Описание слайда:

Слайд 118


HTML. XML. Вэб-технологии, слайд №118
Описание слайда:

Слайд 119


Media queries
Описание слайда:
Media queries

Слайд 120


В css 2.0 появилось такое понятия как @media
Описание слайда:
В css 2.0 появилось такое понятия как @media

Слайд 121


Например для того что бы использовать особый стиль для «файла на печать» используем Например для того что бы использовать особый стиль для «файла на...
Описание слайда:
Например для того что бы использовать особый стиль для «файла на печать» используем Например для того что бы использовать особый стиль для «файла на печать» используем

Слайд 122


Почему media queries? Тип media handheld должен обрабатывать мобильные устройства, но оно не совершенно в современном мире, в связи с большим...
Описание слайда:
Почему media queries? Тип media handheld должен обрабатывать мобильные устройства, но оно не совершенно в современном мире, в связи с большим количеством устройств. Для этого и нужны media queries

Слайд 123


Для всех экранов с шириной не больше 320 px сделаем определенный стиль
Описание слайда:
Для всех экранов с шириной не больше 320 px сделаем определенный стиль

Слайд 124


Логические операторы Существует четыре основных оператора в правилах media AND COMMA NOT ONLY
Описание слайда:
Логические операторы Существует четыре основных оператора в правилах media AND COMMA NOT ONLY

Слайд 125


Используя cетку изученную ранее сделаем ранее сделаем простую верстку Используя cетку изученную ранее сделаем ранее сделаем простую верстку
Описание слайда:
Используя cетку изученную ранее сделаем ранее сделаем простую верстку Используя cетку изученную ранее сделаем ранее сделаем простую верстку

Слайд 126


Видим что дизайн отзывчивый, но при моменте когда ширина равна мобильному девайсу, выглядит не очень. Что бы решить эту проблему нам и нужны media...
Описание слайда:
Видим что дизайн отзывчивый, но при моменте когда ширина равна мобильному девайсу, выглядит не очень. Что бы решить эту проблему нам и нужны media queries Видим что дизайн отзывчивый, но при моменте когда ширина равна мобильному девайсу, выглядит не очень. Что бы решить эту проблему нам и нужны media queries

Слайд 127


Обозначим стиль для этого правила, и посмотрим на результат : Обозначим стиль для этого правила, и посмотрим на результат :
Описание слайда:
Обозначим стиль для этого правила, и посмотрим на результат : Обозначим стиль для этого правила, и посмотрим на результат :

Слайд 128


HTML. XML. Вэб-технологии, слайд №128
Описание слайда:

Слайд 129


Mobile first версия выглядит так : (321 пиксель, не опечатка)
Описание слайда:
Mobile first версия выглядит так : (321 пиксель, не опечатка)

Слайд 130


Flexible media
Описание слайда:
Flexible media

Слайд 131


Для начала имеем стандартную гибкую разметку + стили, все то же самое что мы учили до этого. Для начала имеем стандартную гибкую разметку + стили,...
Описание слайда:
Для начала имеем стандартную гибкую разметку + стили, все то же самое что мы учили до этого. Для начала имеем стандартную гибкую разметку + стили, все то же самое что мы учили до этого. Так же приводим все новые HTML 5 теги к блочным элементам

Слайд 132


Попробуем вставить эту media в стандартную верстку : Попробуем вставить эту media в стандартную верстку :
Описание слайда:
Попробуем вставить эту media в стандартную верстку : Попробуем вставить эту media в стандартную верстку :

Слайд 133


Результат : Результат :
Описание слайда:
Результат : Результат :

Слайд 134


Оптимизация изображений Для этого создается несколько картинок из оригинала, в которых выделяется самый важный контент из оригинала для определенных...
Описание слайда:
Оптимизация изображений Для этого создается несколько картинок из оригинала, в которых выделяется самый важный контент из оригинала для определенных размеров

Слайд 135


Пример Так будет выглядеть разметка с уже оптимизированными картинками разных размеров
Описание слайда:
Пример Так будет выглядеть разметка с уже оптимизированными картинками разных размеров

Слайд 136


Результат : Результат :
Описание слайда:
Результат : Результат :

Слайд 137


Картинка для фона А что если мы хотим добавить изображение как фон окна? То есть на background? Рассмотрим такой случай:
Описание слайда:
Картинка для фона А что если мы хотим добавить изображение как фон окна? То есть на background? Рассмотрим такой случай:

Слайд 138


HTML. XML. Вэб-технологии, слайд №138
Описание слайда:

Слайд 139


Media Queries Cделаем это с помощью media queries
Описание слайда:
Media Queries Cделаем это с помощью media queries

Слайд 140


HTML. XML. Вэб-технологии, слайд №140
Описание слайда:

Слайд 141


Картинки для Retina Теперь давайте рассмотрим то, как делать все то же самое для Retina display Во первых, размер картинки должен быть не 320 а 640...
Описание слайда:
Картинки для Retina Теперь давайте рассмотрим то, как делать все то же самое для Retina display Во первых, размер картинки должен быть не 320 а 640 (детальнее читайте про Retina)

Слайд 142


Тестирование
Описание слайда:
Тестирование

Слайд 143


Проблема с заголовком По результат прошлых лекций, мы получили макет гибкой адаптивной верстки. Мы видим тут есть небольшая проблема с заголовками....
Описание слайда:
Проблема с заголовком По результат прошлых лекций, мы получили макет гибкой адаптивной верстки. Мы видим тут есть небольшая проблема с заголовками. Решим ее

Слайд 144


Так как стандарты размеров меняются с каждым днем, следить за ними лучше всего в реальном времени и часто перепроверять Так как стандарты размеров...
Описание слайда:
Так как стандарты размеров меняются с каждым днем, следить за ними лучше всего в реальном времени и часто перепроверять Так как стандарты размеров меняются с каждым днем, следить за ними лучше всего в реальном времени и часто перепроверять Именно по этому четко привязываться к каким либо цифрам/размерам не стоит

Слайд 145


Developer tools Переходи в developers tools в Chrome, для того что бы видеть размер текущего окна. И экспериментально смотрим
Описание слайда:
Developer tools Переходи в developers tools в Chrome, для того что бы видеть размер текущего окна. И экспериментально смотрим

Слайд 146


Statements(инструкции), Expressions(выражения), Operators(операторы)
Описание слайда:
Statements(инструкции), Expressions(выражения), Operators(операторы)

Слайд 147


Statements(инструкции) Statements(команды/инструкции) – в Javascript это так званые «инструкции» которые веб браузер будет выполнять. Одним из правил...
Описание слайда:
Statements(инструкции) Statements(команды/инструкции) – в Javascript это так званые «инструкции» которые веб браузер будет выполнять. Одним из правил «хорошего кода» является то, что бы писать каждый statement с новой строки

Слайд 148


Expressions(выражения) Парсер – переводит код вашей программы в саму программу. Так званый переводчик между машинным языком и человеческим....
Описание слайда:
Expressions(выражения) Парсер – переводит код вашей программы в саму программу. Так званый переводчик между машинным языком и человеческим. Посмотреть работу парсера можно в консоле браузера на следущем слайде. Expression(выражение) – это то, что парсер должен обработать что бы вернуть результат Literal(литерал) - это выражение, которое не требует работы парсера для обработки

Слайд 149


Пример
Описание слайда:
Пример

Слайд 150


Operators
Описание слайда:
Operators

Слайд 151


Арифметические операторы Обычные операторы, те же что и в калькуляторе + оператор модуля Арифметические операторы имеют точно такие же приоритеты как...
Описание слайда:
Арифметические операторы Обычные операторы, те же что и в калькуляторе + оператор модуля Арифметические операторы имеют точно такие же приоритеты как и в математике

Слайд 152


MDN Operator percidence Но так как операторов в программировании намного больше, для того что бы точно знать как будет работать ваш код, можете...
Описание слайда:
MDN Operator percidence Но так как операторов в программировании намного больше, для того что бы точно знать как будет работать ваш код, можете воспользоваться таблицей по ссылке

Слайд 153


Так же к арифметическим(основным) оператором относятся операторы присвоения(=), инкримента(++), декримента(--) Так же к арифметическим(основным)...
Описание слайда:
Так же к арифметическим(основным) оператором относятся операторы присвоения(=), инкримента(++), декримента(--) Так же к арифметическим(основным) оператором относятся операторы присвоения(=), инкримента(++), декримента(--)

Слайд 154


Формы инкремента :
Описание слайда:
Формы инкремента :

Слайд 155


Пример выполнения:
Описание слайда:
Пример выполнения:

Слайд 156


Оператор “,” Пример применения Используется когда в одной строке нужно сделать несколько действий
Описание слайда:
Оператор “,” Пример применения Используется когда в одной строке нужно сделать несколько действий

Слайд 157


Операторы сравнения Возвращают эти операторы логический ответ (true or false) Пример :
Описание слайда:
Операторы сравнения Возвращают эти операторы логический ответ (true or false) Пример :

Слайд 158


Операторы сравнения и неравенства не воспринимают типы данных, то есть : Операторы сравнения и неравенства не воспринимают типы данных, то есть :
Описание слайда:
Операторы сравнения и неравенства не воспринимают типы данных, то есть : Операторы сравнения и неравенства не воспринимают типы данных, то есть :

Слайд 159


Условные и логические операторы
Описание слайда:
Условные и логические операторы

Слайд 160


Оператор условия if Простой пример применения :
Описание слайда:
Оператор условия if Простой пример применения :

Слайд 161


Обработка результатов. Блок else
Описание слайда:
Обработка результатов. Блок else

Слайд 162


Расширеная форма else if
Описание слайда:
Расширеная форма else if

Слайд 163


Оператор условия “?”
Описание слайда:
Оператор условия “?”

Слайд 164


Логические операторы Используются в основном в условиях, например : if (age !== 20 || age < 20) { alert(‘YOUR AGE IS UNDER 20’)}
Описание слайда:
Логические операторы Используются в основном в условиях, например : if (age !== 20 || age < 20) { alert(‘YOUR AGE IS UNDER 20’)}

Слайд 165


Числа
Описание слайда:
Числа

Слайд 166


Методы с числами Создадим простое число
Описание слайда:
Методы с числами Создадим простое число

Слайд 167


Более сложные операции из модуля MATH
Описание слайда:
Более сложные операции из модуля MATH

Слайд 168


NaN и Infinity NaN(Not a Number – вывод,тогда, когда число невозможно высчитать Например :
Описание слайда:
NaN и Infinity NaN(Not a Number – вывод,тогда, когда число невозможно высчитать Например :

Слайд 169


Проверка на NAN
Описание слайда:
Проверка на NAN

Слайд 170


Infinity Infinity – бесконечное число Например :
Описание слайда:
Infinity Infinity – бесконечное число Например :

Слайд 171


Cтроки
Описание слайда:
Cтроки

Слайд 172


Простой пример обьявления переменной типа string: Простой пример обьявления переменной типа string:
Описание слайда:
Простой пример обьявления переменной типа string: Простой пример обьявления переменной типа string:

Слайд 173


Для того что бы избежать такой ситуации нужно использовать “экранирование” : Для того что бы избежать такой ситуации нужно использовать...
Описание слайда:
Для того что бы избежать такой ситуации нужно использовать “экранирование” : Для того что бы избежать такой ситуации нужно использовать “экранирование” :

Слайд 174


Символы внутри строк Перевод строки :
Описание слайда:
Символы внутри строк Перевод строки :

Слайд 175


Свойства и методы строк Length – количество символов в строке
Описание слайда:
Свойства и методы строк Length – количество символов в строке

Слайд 176


charAt(index)– символ по указаному индексу charAt(index)– символ по указаному индексу
Описание слайда:
charAt(index)– символ по указаному индексу charAt(index)– символ по указаному индексу

Слайд 177


slice(index)– получим строку начиная с index slice(index)– получим строку начиная с index
Описание слайда:
slice(index)– получим строку начиная с index slice(index)– получим строку начиная с index

Слайд 178


split(separator)– разделяет строку на массив split(separator)– разделяет строку на массив
Описание слайда:
split(separator)– разделяет строку на массив split(separator)– разделяет строку на массив

Слайд 179


indexOf(char)– показывает индекс определенного символа indexOf(char)– показывает индекс определенного символа
Описание слайда:
indexOf(char)– показывает индекс определенного символа indexOf(char)– показывает индекс определенного символа

Слайд 180


Boolean, null, undefined
Описание слайда:
Boolean, null, undefined

Слайд 181


Boolean В консоль выведется надпись «привет ребята, так как условие выполняется( ! – оператор не, инвертирует Boolean)
Описание слайда:
Boolean В консоль выведется надпись «привет ребята, так как условие выполняется( ! – оператор не, инвертирует Boolean)

Слайд 182


Все данные по умолчанию являются true, кроме ( в случае выполнения кода будет 5 значений false): Все данные по умолчанию являются true, кроме ( в...
Описание слайда:
Все данные по умолчанию являются true, кроме ( в случае выполнения кода будет 5 значений false): Все данные по умолчанию являются true, кроме ( в случае выполнения кода будет 5 значений false):

Слайд 183


Undefined, null Во-первых, они не равны NULL это не UNDEFINED
Описание слайда:
Undefined, null Во-первых, они не равны NULL это не UNDEFINED

Слайд 184


Пример Попробуем провести несколько операций с обьектом:
Описание слайда:
Пример Попробуем провести несколько операций с обьектом:

Слайд 185


Так же, если в функцию которая принимает параметр ничего не передать : Так же, если в функцию которая принимает параметр ничего не передать :
Описание слайда:
Так же, если в функцию которая принимает параметр ничего не передать : Так же, если в функцию которая принимает параметр ничего не передать :

Слайд 186


Конвертация типов данных
Описание слайда:
Конвертация типов данных

Слайд 187


Явные Все три преобразования выполнятся правильно!
Описание слайда:
Явные Все три преобразования выполнятся правильно!

Слайд 188


Быстро в строку Если к числу добавить пустую строку, то результатом будет строка
Описание слайда:
Быстро в строку Если к числу добавить пустую строку, то результатом будет строка

Слайд 189


Быстро в булевое значение Что бы перевести что либо в булевое, достаточно поставить перед переменной или значением знак “!!”
Описание слайда:
Быстро в булевое значение Что бы перевести что либо в булевое, достаточно поставить перед переменной или значением знак “!!”

Слайд 190


Быстро в число Что бы перевести что либо в число, достаточно поставить перед переменной или значением знак “+”
Описание слайда:
Быстро в число Что бы перевести что либо в число, достаточно поставить перед переменной или значением знак “+”

Слайд 191


Методы для перевода Самым стандартным является метод toString()
Описание слайда:
Методы для перевода Самым стандартным является метод toString()

Слайд 192


Обьекты
Описание слайда:
Обьекты

Слайд 193


Что такое обьект? Обьект, если обьяснять простым языком – контейнер ключей и свойств
Описание слайда:
Что такое обьект? Обьект, если обьяснять простым языком – контейнер ключей и свойств

Слайд 194


Зададим простой обьект c свойством и функцией: Зададим простой обьект c свойством и функцией:
Описание слайда:
Зададим простой обьект c свойством и функцией: Зададим простой обьект c свойством и функцией:

Слайд 195


К свойству можно достучаться двумя способами, каждый выберает тот который является более удобным. Первое это через точку: К свойству можно...
Описание слайда:
К свойству можно достучаться двумя способами, каждый выберает тот который является более удобным. Первое это через точку: К свойству можно достучаться двумя способами, каждый выберает тот который является более удобным. Первое это через точку:

Слайд 196


Бывают такие случаи когда нам нужно получать каждый раз разные свойства, тогда мы используем переменную. Тогда используется только квадратные скобки,...
Описание слайда:
Бывают такие случаи когда нам нужно получать каждый раз разные свойства, тогда мы используем переменную. Тогда используется только квадратные скобки, например : Бывают такие случаи когда нам нужно получать каждый раз разные свойства, тогда мы используем переменную. Тогда используется только квадратные скобки, например :

Слайд 197


Свойство по умолчанию
Описание слайда:
Свойство по умолчанию

Слайд 198


Что бы добавить свойство обьекту, достаточно просто присвоить не существующему свойство какое нибудь значение : Что бы добавить свойство обьекту,...
Описание слайда:
Что бы добавить свойство обьекту, достаточно просто присвоить не существующему свойство какое нибудь значение : Что бы добавить свойство обьекту, достаточно просто присвоить не существующему свойство какое нибудь значение :

Слайд 199


Обьекты всегда передаются по ссылкам, они никогда не копируются. Что это значит? Предположим у нас есть 3 обьекта, каждый раз это новый обьект:...
Описание слайда:
Обьекты всегда передаются по ссылкам, они никогда не копируются. Что это значит? Предположим у нас есть 3 обьекта, каждый раз это новый обьект: Обьекты всегда передаются по ссылкам, они никогда не копируются. Что это значит? Предположим у нас есть 3 обьекта, каждый раз это новый обьект:

Слайд 200


Удаление свойств
Описание слайда:
Удаление свойств

Слайд 201


Методы Метод – это функция которая является свойством обьекта
Описание слайда:
Методы Метод – это функция которая является свойством обьекта

Слайд 202


Ослабление глобальности Ослабление глобальности – это создание одного глобального обьекта в котором будут храниться все остальные, например :
Описание слайда:
Ослабление глобальности Ослабление глобальности – это создание одного глобального обьекта в котором будут храниться все остальные, например :

Слайд 203


HTML. XML. Вэб-технологии, слайд №203
Описание слайда:

Слайд 204


HTML. XML. Вэб-технологии, слайд №204
Описание слайда:

Слайд 205


HTML. XML. Вэб-технологии, слайд №205
Описание слайда:

Слайд 206


HTML. XML. Вэб-технологии, слайд №206
Описание слайда:

Слайд 207


HTML. XML. Вэб-технологии, слайд №207
Описание слайда:

Слайд 208


HTML. XML. Вэб-технологии, слайд №208
Описание слайда:

Слайд 209


HTML. XML. Вэб-технологии, слайд №209
Описание слайда:

Слайд 210


HTML. XML. Вэб-технологии, слайд №210
Описание слайда:

Слайд 211


HTML. XML. Вэб-технологии, слайд №211
Описание слайда:

Слайд 212


HTML. XML. Вэб-технологии, слайд №212
Описание слайда:

Слайд 213


HTML. XML. Вэб-технологии, слайд №213
Описание слайда:

Слайд 214


HTML. XML. Вэб-технологии, слайд №214
Описание слайда:

Слайд 215


HTML. XML. Вэб-технологии, слайд №215
Описание слайда:

Слайд 216


HTML. XML. Вэб-технологии, слайд №216
Описание слайда:

Слайд 217


HTML. XML. Вэб-технологии, слайд №217
Описание слайда:

Слайд 218


HTML. XML. Вэб-технологии, слайд №218
Описание слайда:

Слайд 219


HTML. XML. Вэб-технологии, слайд №219
Описание слайда:

Слайд 220


HTML. XML. Вэб-технологии, слайд №220
Описание слайда:

Слайд 221


HTML. XML. Вэб-технологии, слайд №221
Описание слайда:

Слайд 222


HTML. XML. Вэб-технологии, слайд №222
Описание слайда:

Слайд 223


HTML. XML. Вэб-технологии, слайд №223
Описание слайда:

Слайд 224


HTML. XML. Вэб-технологии, слайд №224
Описание слайда:

Слайд 225


HTML. XML. Вэб-технологии, слайд №225
Описание слайда:

Слайд 226


HTML. XML. Вэб-технологии, слайд №226
Описание слайда:

Слайд 227


HTML. XML. Вэб-технологии, слайд №227
Описание слайда:

Слайд 228


HTML. XML. Вэб-технологии, слайд №228
Описание слайда:

Слайд 229


HTML. XML. Вэб-технологии, слайд №229
Описание слайда:

Слайд 230


HTML. XML. Вэб-технологии, слайд №230
Описание слайда:

Слайд 231


HTML. XML. Вэб-технологии, слайд №231
Описание слайда:

Слайд 232


HTML. XML. Вэб-технологии, слайд №232
Описание слайда:

Слайд 233


HTML. XML. Вэб-технологии, слайд №233
Описание слайда:

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию