Мундариҷа
- Манфиатҳо барои тарроҳӣ бо рамз
- Аввал маълумот
- Некии мобилӣ ройгон
- Дарёфти забони умумӣ
- Тезтар омӯзед
- Такрори сареъ
- Вақти зудтар барои оғоз
- Чаро HTML5?
- Атрибутҳои ҷодугарӣ
- CSS3 - ин Photoshop нав аст
- Sass + Compass: ҷодугарӣ лазиз аст
- jQuery: оҳ, ҳа шумо метавонед
- Чорчӯбаҳо
- Фикрҳои ниҳоӣ
Ин мақола бори аввал дар шумораи 235 маҷаллаи .net - серхаридортарин маҷаллаи ҷаҳон барои тарроҳон ва таҳиягарони веб пайдо шуд.
Ман ҳеҷ гоҳ як мухлиси ашаддии коре накардаам, ки аз ҳад зиёд ниёз доштам. Ман майл дорам, ки усулҳо ва воситаҳоро аз рӯи қобилияти онҳо барои самараноктар кардани ман ё дастаи ман арзёбӣ мекунам. Чӣ гуна онҳо моро ба маҳсулоти корӣ мерасонанд? Онҳо то чӣ андоза муошират мекунанд? Оё онҳо аз роҳи мо дур мешаванд?
Дар тӯли солҳо, ман раванди тарроҳӣ ва асбобҳои худро танзим кардам. Ман тасаввур мекунам, ки ин корро идома медиҳам. Ин хусусияти тарҳрезии технология ва веб мебошад. Ин соҳа доимо рушд мекунад; раванд ва асбобҳои мо низ бояд рушд кунанд.
HTML5 ва CSS3 гузаришро аз болои раванди тарроҳӣ дар болооб осонтар мекунанд - аз Photoshop ва бештар ба тарҳи зиндагии нафаскашӣ. Асбобҳо, ба монанди Foundation, Bootstrap ва jQuery, ҳаракат кардани раванди тарроҳии шуморо бештар ба коди дастрастар мекунанд.
Манфиатҳо барои тарроҳӣ бо рамз
Аввалан, ман тарафдори тарки Photoshop ё ягон муҳаррири дигари тарроҳии визуалӣ аз ҷараёни кори шумо нестам. Ба ҷои ин, ман диққати худро ба бартариҳои кӯчонидани он тарроҳӣ ба кодекси зудтар равона мекунам.
Аввал маълумот
Чизе, ки ман ҳамеша дар бораи тарроҳӣ бо HTML дӯст медоштам, он аст, ки он аз нуқтаи назари аввал маълумотро ташвиқ мекунад. Баръакс, бо истифодаи барномаҳои расмкашӣ, ба монанди Illustrator, OmniGraffle ё Balsamiq, шумо аз як қуттӣ оғоз намуда, онро бо маълумотҳо пур мекунед.
Дар HTML шумо DOM (модели объекти ҳуҷҷат) месозед, ба монанди сохтани ҷадвал. Ин бозгашт ба тарҳи иттилооти ҳақиқӣ бо иерархияҳои пурмазмун аст. HTML5 онро бо илова кардани унсурҳои нави маъноӣ: мақола, қисмат, сарлавҳа, канор, поён ва ғайра як қадам пеш мегирад. Ин усули аввалини маълумот бо тарҳҳои аввалини мобилӣ ва ҷавобгӯ хуб омехта мешавад.
Некии мобилӣ ройгон
Агар шумо инро хонед, эҳтимолан барои мобилӣ тарҳрезӣ мекунед. Ва эҳтимол дорад, ки шумо бояд як ё ду шакл таҳия кунед. Бо HTML5, шумо хушбахтед. Пеш аз HTML5, намудҳои вуруди шумо тақрибан майдони матн ё парол буданд. HTML5 як қатор намудҳои иловагии вурудро ҷорӣ кард, аз ҷумла:
навъи вуруд = "почтаи электронӣ"> навъи вуруд = "тел"> навъи вуруд = "url"> навъи вуруд = "дата"> навъи вуруд = "санаи вақт">
Чӣ воқеан аҷиб аст дар бораи ин намудҳои иловагии беназири вуруд ин аст, ки браузерҳои мобилӣ дар iOS ва Android онҳоро эътироф мекунанд ва ба тариқи худкор клавиатураи аз ҷиҳати контекстӣ огоҳро иваз мекунанд - бе плагинҳои махсуси jQuery ё хакҳо талаб карда намешавад. Оҳ, ва агар браузери шумо намедонад, ки чӣ навъи вуруд = "почтаи электронӣ"> аст, пас он танҳо бо вуруди матн бо нобаёнӣ.
Дарёфти забони умумӣ
"Аҷоиб аст, ки чӣ гуна тарроҳон ва таҳиягарони мо метавонанд бо як забон кор кунанд" - Ҷон Драго, таҳиягари барномаҳо дар Inflection.
Бубинед, ки оё ин ба шумо шинос аст. Ман дар як толори конфронс бо даҳҳо барномаи dev-сервер, ки метавонанд доираҳои атрофи маро дар Ruby, Python, Java ё .NET рамзгузорӣ кунанд. Ман ягона тарроҳ ҳастам. Чанде аз пешниҳодҳои ман дар аввал рад карда шуданд, зеро онҳо барои татбиқ хеле душворанд. Ман ба тахтаи сафед қадам мезанам ва дар навиштани баъзе HTML ва CSS шурӯъ мекунам, ки тарҳро чӣ гуна иҷро кардан мумкин аст. Ногаҳон оҳанги гуфтугӯ иваз мешавад ва яке аз таҳиягарон бо дили нохоҳам мегӯяд: "Хуб, ҳа - агар мо ин тавр кор кунем, он метавонад кор кунад."
Ба код гузаштан бештар аз раванди тарроҳии ман гуфтугӯро бо таҳиягарон беҳтар кард. Як қабати эҳтироми иловагӣ бо донистани тарҳҳои худро дар код ба даст оварда шудааст. Барои ба даст овардани ин эҳтиром шумо набояд мутахассис бошед. Гарчанде ки малакаҳои HTML ва CSS-и ман сахт ҳастанд, малакаҳои JavaScript-и ман дар ҳадди аксар миёнаҳоланд. Ва ман шарм надорам, ки инро эътироф кунам. Бо вуҷуди ин, ҳангоми кор бо таҳиягарони фронт ё тарафи сервер, далели он, ки мо бо забони умумӣ сӯҳбат карда метавонем ё дар нимароҳ мулоқот мекунем, бартарии калон дорад.
Тезтар омӯзед
Гарчанде симкортҳо ва композитҳои визуалӣ метавонанд дар банақшагирӣ кӯмак кунанд, ин ашёҳои статикӣ назариявӣ мебошанд. Чанд маротиба шумо кӯшиш кардед, ки ҳамкориҳоро ба касе фаҳмонед, танҳо барои он ки онҳо ҷавоб диҳанд: "Ба гумонам, ман инро бояд бубинам." Ҳар қадаре ки шумо ба прототип бирасед, чизе ки одамон метавонанд бо онҳо ҳамкорӣ кунанд, ҳамон қадар зудтар шумо метавонед тарроҳиро эҳсос кунед ва бубинед, ки оё идеяҳо кор мекунанд
Такрори сареъ
Кай бори охир тарҳи ниҳоӣ, ки ба истеҳсолот фиристода шудааст, ба Photoshop comp-и шумо комилан мувофиқат кард? Қариб ҳеҷ гоҳ. Бо тарроҳии рақамии маҳсулот тағирот доимо ба амал меояд. Ғайр аз он, тағиротҳо, ба монанди зиёд кардани ҳаҷми сарлавҳаҳои худ аз 22pt то 24pt дар якчанд даҳҳо экран, метавонанд дар Photoshop соатҳо тӯл кашанд. Объектҳои интеллектуалӣ дар Photoshop ба шумо як дараҷаи тарроҳии объект нигаронида шудаанд. Мутаассифона, аксари тарроҳони визуалии ман медонам, ки Объектҳои Smart -ро ба қадри кофӣ истифода намебаранд. Бо CSS, зеро он муносибати муназзамро дар тарроҳӣ ташвиқ мекунад, тағироти типографӣ ба ҷои соатҳо дақиқаҳоро мегирад.
Дар бораи тағир додани градиентҳои хаттӣ дар ҳамаи тугмаҳои шумо чӣ гуфтан мумкин аст? Ё андозаи марз? Дар бораи тағир додан аз кунҷҳои чоркунҷа ба кунҷҳои мудаввар 2px чӣ гуфтан мумкин аст? Дар Photoshop, ин метавонад соатҳо тӯл кашад ва шумо бояд онро рамзгузорӣ кунед. Қобилияти тарроҳӣ дар код барои пешгирӣ аз сафари даврӣ ба Photoshop барои такрори тарҳи визуалӣ кӯмак мекунад. Вақте ки шумо ин тағиротҳоро дар сатҳи боло ба рамз интиқол медиҳед, бо истифода аз CSS3 ва Sass (ки баъдтар дар ин мақола муҳокима мекунам), онҳо метавонанд дар вақти воқеӣ рӯй диҳанд ва танҳо якчанд дақиқа вақтро мегиранд.
Вақти зудтар барои оғоз
Дар тӯли солҳо, вақте ки ман бештар аз ҷараёни кории тарроҳии худро ба код гузаронидам, ман воқеан такмил ёфтам - тақрибан аз 20 то 30 фоиз кам кардани вақт ба бозор. Чӣ қадаре ки ман ин корро кунам, ҳамон қадар вақти зиёдро барои такрори кӯшишҳо сарф мекунам. Ман камтар аз давраҳоро ба Photoshop ё Fireworks ворид мекунам ва сипас корро бо рамз такрор мекунам.
Дар баъзе мавридҳо, тарроҳ бояд бо ягон намуди пуштибонӣ интерфейс кунад, хоҳ он CMS, барномаи Rails ё чизи дигар. Азбаски аксарияти корҳои тарроҳии ман дар код аст, ҳамгироӣ дертар ба амал меояд. Якчанд сол пеш, яке аз муштариёни ман, PointRoll, дар тӯли панҷ рӯз аз прототип ба истеҳсолот гузашт.
Чаро HTML5?
HTML5 нисбат ба версияҳои қаблии HTML осонтар аст. Масалан, эъломияи намуди ҳуҷҷатҳоро гиред. Дар версияҳои қаблии HTML, DOCTYPE ба назар чунин намуд:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "" http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd ">
Ва шаш версияи гуногун вуҷуд доштанд. Хушбахтона HTML5 DOCTYPE чунин менамояд:
! DOCTYPE HTML>
Ҷиддӣ. Ана тамом. Ҳайратовар оддӣ.
Ҳангоми эҷоди як сафҳаи стандартии HTML, як қатор унсурҳои маъмул мавҷуданд, ба монанди сарлавҳа, майдони асосии мундариҷа, панели паҳлӯ ва поён. Боварӣ дорам, ки шумо қаблан чунин чизро дидаед:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
Дар он ҷо ҳеҷ чизи ғайриоддӣ нест. Аммо пас аз пур кардани мундариҷа, ин шаблон ба шӯрбо мубаддал мешавад. Баръакс, бо унсурҳои нави семантикии HTML5 шумо скан кардани чизи хеле содда ва осонро ба даст меоред, ба монанди ин:
сарлавҳа> nav> / nav> / header> мақола> як тараф> / як тараф> / мақола> footer> / footer>
Инро бинед. Чизе, ки маъно дорад.
Атрибутҳои ҷодугарӣ
HTML5 бо як қалмоқаи дигари олиҷаноб ҳамроҳ карда шудааст, ки ба шумо имкон медиҳад, ки маънои маъноии худро таҳия намоед маълумот. Пештар, агар шумо хоҳед, ки ягон чизи пурмазмунеро барои унсури DOM таъин кунед, шумо танҳо бо ID, дарсҳо ва нақшҳо маҳдуд будед.
Мутаассифона, ID бояд беназир бошад. Синфҳо универсалӣ мебошанд (yippee!), Аммо истифодаи онҳо зуд метавонад ба бесарусомонӣ табдил ёбад. Нақшҳо дороии истифода нашудаанд, ки барои АРИА маънои назаррас доранд. Ба наздикӣ, ман маълумотҳоро барои платформаи таҳлили чорабиниҳо истифода мекардам, ки мо дар Inflection таҳия карда истодаем.Мо мухлисони бузурги санҷиши тарҳҳои худ ҳастем. Ҳангоми кор дар замимаҳо ё саҳифаҳое, ки интерактивии зиёд доранд, мо мехоҳем дар бораи саҳмгирии муштариён дар саҳифа маълумоти бештар гирем.
Ворид кунед маълумот. Бо он шумо метавонед як модели маънои 'худро муайян кунед' -ро таъин кунед, гузаред ва пайваст кунед. Пас, масалан, шумо инро карда метавонед:
навъи вуруд = "button" data-id = "facebook" dataregion = "main" data-event = "register"> type input = "button" data-id = "twitter" dataregion = "main" data-event = "registr "> input type =" button "data-id =" linkedin "dataregion =" main "data-event =" register ">
Мо метавонем як шунавандаро бо саҳифаи JavaScript ба сафҳа зам кунем ва вақте ки муштарӣ ҳаракат кунад ё ин кнопкаро пахш кунад, мо метавонем ин фаъолиятро пайгирӣ кунем. Ба ҷои он ки танҳо тавонистем пайгирӣ кардани он, ки касе тавассути OAuth бо Twitter сабти ном шудааст, мо мебинем, ки онҳо дар болои Facebook, пас Twitter, пас LinkedIn гаштанд ва дар ниҳоят тасмим гирифтанд, ки Twitter-ро барои модели OAuth интихоб кунанд.
Тасаввур кунед, ки инро ба сайте, ба монанди Pinterest ё тарҳи нави Myspace, ки муштариён сафолҳоро кашида партофта, онҳоро дар асоси фоизҳо аз нав танзим мекунанд, паҳн кунед. Ё эҳтимолан пинҳон кардани сафолҳои ба онҳо манфиатдор нест маълумот атрибут ба шумо имкон медиҳад, ки ба чизҳое, ки шумо метавонед муайян кунед, як қабати иловагии маъноӣ илова кунед. Барои сайтҳо ва барномаҳое, ки ба Ajax такя мекунанд, имкониятҳои бепоёнро фароҳам меорад.
CSS3 - ин Photoshop нав аст
CSS3 сатҳи нави тарроҳии намуди зоҳириро ба бор овард, ки қаблан тасвирҳои замина, буррҳо ва техникаи машҳури ‘дарҳои чархакдорро талаб мекарданд. Хушбахтона, ин ҳама чизи гузашта аст.
Биёед дида бароем, ки тугмаи зебо бо градиенти хаттӣ, кунҷҳои мудаввар, сояи матн, ки ба он таъсири хуби ҳарфро медиҳад ва тобиши тобон Омӯзиши ин усулҳо роҳи дарозеро тай мекунад. Ҳар яки онҳоро мустақилона ё дар таркибҳои гуногун истифода бурдан мумкин аст, то тақрибан ҳама гуна гармии визуалии ҳозира, ки имрӯз дар интернет паҳн шудааст.
Аввалан, биёед якчанд тасҳеҳи пешфарзро тағир диҳем тугма> ва навъи вуруд = "submit"> унсурҳо. Фарз мекунем, ки шумо яке аз стандартҳои барқароркунии CSS-ро истифода мебаред, мо танҳо як ҳуҷраи андоза ва нафаскашии каме илова мекунем.
/ * Тугмаҳои тугмаҳо, ки тугмаҳо аз они онҳо мебошанд. ========================================= * * / тугма, вуруд [type = "submit"] {баландӣ: 2.7em; болопӯш: .4em .7em; баландии хат: 1.9; }
Протип: Тугмаҳо ва вурудоте, ки пешниҳод карда мешаванд, метавонанд барои барқарор кардани ҳилла душвор бошанд. Ман бо роҳи танзими баландии сатр ба 1,6 ё калонтар ёфтам, шумо метавонед аз рахна кардани див ё изофаи иловагӣ дар дохили тугма> барчасп
Ҳоло мо масъалаи тугмаи худро "ислоҳ" кардем, мо метавонем .btn синф, ки ба мо тугмаи тозаи хубе бо кунҷҳои ҳамаҷониба, градиенти хаттӣ, контурӣ ва намуди чопи чопӣ диҳад.
.btn {намоиш: inline-block; сарҳад: 1px solid # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; радиуси сарҳад: 4px; болопӯш: .4em .7em; замина: # edeff2; замина: -webkit-градиент (хаттӣ, 0% 0%, 0% 100%, аз (#fefefe), color-stop (0.55, # edeff2), ба (# e4e6e9)); замина: -moz-lineer-градиент (боло боло, #fefefe, # edeff2 55%, # e4e6e9); -moz-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; -webkit-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; сояи қуттӣ: rgba (160,172,187, .7) 0 0 .2em 0; ранг: # 6c7786; андозаи ҳарф: 1.1em; сояи матн: #fefefe 1px 0 1px; баландии хат: 1.375em; курсор: нишоннамо; }
Ва он гоҳ, ки таъсири хуби чолокона бо дурахшони нозук бо истифода аз сояи қуттӣ усул:
.btn: hover, .btn: focus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-соя: # 129ceb 0 0 2px; сояи қуттӣ: # 129ceb 0 0 2px; замина: # e6e9eb; замина: -webkit-градиент (хаттӣ, 0% 0%, 0% 100%, from (# f7f7f7), color-stop (0.55, # f6f6f7), to (# e6e9eb)); замина: -moz-lineargradient (боло боло, # f7f7f7, # f6f6f7 55%, # e6e9eb); ранг: # 45484b; матни соя: rgb (255,255,255) 1px 1px 0; ҳошияи ранг: # c9c9c0; }
Ҳоло, ман як мухлиси ашаддии навиштани рамзи градиенти хаттӣ нестам. Ин дароз ва печида аст. Тавре ки шумо мебинед, ман танҳо версияи онро барои он дохил кардам -moz, -webkit, ва модели стандартӣ. Агар шумо хоҳед, ки версияҳои -o ва -ms -ро дохил кунед, ба шумо лозим меояд, ки рамзро дучанд кунед.
Ду варианти дигар мавҷуданд. Яке генератори CSS3 мебошад; дар интернет якчанд мавҷуданд, аз ҷумла ColorZilla. Аммо агар шумо хоҳед, ки бозии худро каме тақвият диҳед, ғаввосиро ба Sass баррасӣ кунед: дар якҷоягӣ бо Compass, ин як амри худост.
Sass + Compass: ҷодугарӣ лазиз аст
Шумо метавонед умедро барои нашри unicorn CSS4 бас кунед. Ин дар ин ҷо аст ва онро Sass + Compass меноманд. Sass маънои стилҳои синтаксисии олӣ дорад: шумо ҳамаи бартариҳои анъанавии CSS3-ро бо шодии иловагии тағирёбандаҳо, миксинҳо, васеъкунандагон ва чизҳои дигар мерос мегиред.
Ман ба наздикӣ файли CSS-и 5000-сатриро азнавсозӣ кардам, ки дар як сояи кабуд зиёда аз 30 вариант дошт. Бо Sass, ман ҳама вариантҳоро бо ин рамз иваз кардам:
ранг: $ кабуд;
Бо муайян кардан $ кабуд дар ман _variables.scss файл, ман метавонам як ранги пешфарзро эҷод кунам, ки ҳар файли CSS ё SCSS метавонад онро истинод кунад. Ҳар касе, ки CSS менависад, метавонад истифода барад $ кабуд ва набояд аз истифодаи чашмпӯш, ёфтани рамзи шонздаҳӣ ё ранги RGB, RGBA ё HSL хавотир шавед.
Он рамзи градиенти хатиро дар хотир доред? Ба ҷои навиштани якчанд сатри код, чӣ гуна дар бораи ин:
@include background (хати градиент (# b1cfdc, # 7a9cac));
Бигзор Sass ва Compass бори вазнинро иҷро кунанд ва барои шумо синтаксиси дурустро эҷод кунанд: анҷом дода шудааст. Биёед бигӯем, ки шумо версияи тира ва ё сабуктари рангро мехоҳед. Шумо метавонед чашмпӯшро дар Photoshop ҳаракат диҳед ё танҳо фармонҳои сабук / тира карданро дар Sass истифода баред:
@include background (хати градиент (тира ($ litegray, 2%), тира ($ off-сафед, 5%)));
Ин градиенти хатиро бо 2% торик эҷод мекунад $ хокистарранг ва 5% торик шуданд аз сафед. Вой! Шумо ҳатто ба рамзҳои HEX ё RGB ниёз надоред.
jQuery: оҳ, ҳа шумо метавонед
Ман иқрор мекунам, ки бигӯям. JavaScript барои тарсондани ман истифода мешуд. Пас аз он ман jQuery ёфтам. Ман даъво нахоҳам кард, ки як гуру JavaScript бошам, аммо ман боварии комил дорам, ки ман метавонам тақрибан ҳама гуна гузариш ё функсияеро, ки барои истифодаи jQuery ниёз дорам, кашида гирам.
Масалан, қобилияти нишон додани вуруди рақами телефони дуюмдараҷаро дар экран бо зер кардани истиноди Иловаи рақами нав гиред. Бо истифода аз jQuery, шумо инро танҳо менависед:
// - ошкоркунии прогрессивӣ - // $ (’. Рақами нав '). Клик кунед (function () {$ (’. Alt-number ’). FadeIn (’ fast ’);});
Дар ҷустуҷӯи чизи пешрафтае ҳастед? Шояд барои он плагин ҳаст. Рафтори оддӣ осон ва мураккаб бо jQuery дастрас аст.
Чорчӯбаҳо
Ду чаҳорчӯби боэътимоди имрӯза Foundation ва Bootstrap мебошанд. Ҳоло, пеш аз он ки шумо чаҳорчӯбаи CSS-ро бекор кунед, иҷозат диҳед аз шумо чизе бипурсам. Шумо jQuery -ро истифода мебаред? Руби дар Релс? Джанго? Ҳама чорчӯбаҳо.
Мисли jQuery ва RoR, Foundation ва Bootstrap аз он эътироф карда шуданд, ки шумораи одилонаи корҳое, ки мо такрор ба такрор мекунем (ба монанди барқароркуниҳо, типография, шабакаҳо, формаҳо, тугмаҳо, нав ва рӯйхатҳо). Foundation ва Bootstrap ҳам барои тарҳҳои ҷавобгӯ тавассути истифодаи дарсҳои ёвар кӯмак пешниҳод мекунанд. Ҳардуи онҳо ҳуҷҷатҳои хуб доранд ва дар роҳ санҷида шудаанд, бинобар ин шумо метавонед онҳоро бо боварӣ истифода баред.
Як фарқияти калидии байни ҳарду: Bootstrap ба системаи LESS барои коркарди CSS асос ёфтааст, дар ҳоле, ки Бунёд ба Sass асос ёфтааст. Ман аз ҳисоби имкониятҳои иловагии худ Sass-ро аз КАМА афзал медонам, аммо ҳам Sass ва LESS CSS-и анъанавиро пора-пора мекунанд.
Охирин фикр дар бораи чаҳорчӯбаҳо. Барои онҳое, ки намехоҳанд дабдабаноки иловагии чаҳорчӯби каси дигарро мерос гиранд, фикр кунед, ки мавҷудбуда ва то устухонҳои луч кашидан ё гелос аз чанд нафаре, ки худатонро печонед. Дар ҳар сурат, воқеан ҳеҷ сабабе барои сар аз сифр ҳар дафъа вуҷуд надорад.
Фикрҳои ниҳоӣ
Мехоҳед назорати бештарро дар бораи он ки тарҳи шумо дар ниҳоят рӯй медиҳад, мехоҳед? Равандҳои бештарро дар болои канал ба код ҳаракат кунед. HTML5 дар ниҳоят ба DOM маъно меорад. Мазҳакаи хуб ба бемаънӣ DOCTYPEс ва дивит. CSS3 - ин Photoshop-и нав: градиентҳои хаттӣ, borderradius ва box-сояҳои FTW! Ва бо асбобҳо, ба монанди Bootstrap, Foundation, Sass ва jQuery, ҳаракат кардани тарроҳии боло ба код ҳеҷ гоҳ осон набуд.
Дар Creative Bloq 55 намунаи аҷиби HTML5-ро кашф кунед.
