HTML5 e иднината во вебот, но популарниот JavaScript конечно мора да почнеме да ги менуваме нашите навики и да го користиме на правилен начин и само таму кај што треба, вели програмерот Ванчо Стојков кој победи на последниот No JavaScript Challenge на Mozilla.
Oвoj предизвик, кој се одржа во јули, е дел од месечното Dev Derby натпреварување за различни теми во рамките на отворените веб стандарди. Целта на Mozilla е да ги промовира веб стандардите преку своите продукти. Слични натпреварувања организираат и Google Chrome и Internet Explorer тимовите, и сите натпревари се отворени за секој да учествува, објаснува Ванчо.
Kако се чувствуваш по победата? Што значи таа за тебе?
Прекрасно, целото искуство е навистина прекрасно. Единствено објавувањето на резултатите беше малку задоцнето – вообичаено за секој натпревар резултатите ги објавуваат околу 20ти наредниот месец, за јули резултатите беа објавени на 3ти септември. Меѓутоа, ова беше навистина популарно натпреварување и бројот на натпреварувачките презентации беше 70 што е е за речиси двапати повеќе од досегашното најпопуларно месечно натпреварување.
Беше навистина забавно и, она што е веројатно поважно, едукативно. Некои од презентациите на https://developer.mozilla.org/en-US/demos/ се навистина импресивни, од нив можат да се научат навистина многу работи и да се искористат и во комерцијални проекти. Речиси сите модерни веб прелистувачи веќе целосно или во голем дел ги имаат имплементирано стандардите. А HTML5 и CSS3 имаат многу нови работи кои сеуште не сме навикнати да ги користиме – вака човек едноставно мора да почне ги користи.
Објасни ни ја твојата игра Honey Pursuit: Yet Another Love Saga?
Приказната е класична љубовна сага, клише коешто ми се чинеше идеално за презентација на вакво нешто. Базирана е на три карактери (пчели): добриот, лошиот и убавата. Лошата пчела ја има киднапирано убавата пчела која е девојка на добриот. Така, добриот тргнува во потрага по љубената и во борба со лошиот. Патем, јунакот треба да ги собира теглите мед кои пролетуваат низ екранот. Самата игра навистина и нема некоја натпреварувачка енергија или поента (цел), и можеби би била интересна за помали деца и луѓе коишто интересот би го нашле во техничките аспекти на играта, меѓутоа мислам дека е идеална основа за презенатација на овие отворени веб стандарди без да се користи JavaScript.
Изгледот на карактерите и графичките детали во играта се навистина прекрасни и веројатно ја прават играта визуелно привлечна за сите, но за тоа во најголем дел е заслужен Ване Костуранов, мојот колега од Работилница, и во оваа прилика би сакал да ја искажам мојата огромна благодарност до него за насоките и помошта во дизајнерскиот (уметничкиот) момент од играта без којшто крајниот резултат воопшто немаше да биде ист.
[youtube]oHAjJKbHmIo[/youtube]
Kако ја направи, oбјасни ни го концептот како може да се изведе ова без JavaScript?
Ограничувањето (No JavaScript) ги сведува можностите на користење само на декларативно програмирање (HTML и CSS), и воедно го прави предизвикот поголем. Меѓутоа, тоа е идеална прилика за користење на CSS анимации и CSS транзиции, кои што се сржта на играта.
Единствено со нив статичките HTML елементи може да добијат живост и да се размрдаат низ екранот без ни една линија JavaScript, и затоа многу се користат овде. Најголемиот проблем во нивното користење, посебно кога се користат „на големо“ и се меѓусебно зависни една од друга, е нивната синхронизација и времетраење. Тука, на пример, би можеле да ги разделиме работите на 3 главни дела – вовед, по којшто започнува и трае играта, и завршен дел кој треба да започне по завршувањето на играта. Многу е битно да се разделат како посебни и самофункционирачки делови за да може на секој од нив да се работи посебно инаку би било невозможно или пак целиот процес на развој би траел премногу: на пример, за да направиме и најмала промена во завршниот дел би требало да ги проследиме воведот и главниот дел од играта чекајќи да стигнеме до завршниот дел и да ја анализираме направената промена. Друг сличен проблем се деталите со времетраењето на поединечните делови. Меѓутоа, користејќи PHP сите овие и слични проблеми можат да се контролираат преку контролни променливи, бројачи, циклуси итн., иако на крај сепак добиваме само HTML и CSS.
Можноста за корисничка интеракција во играта е овозможена преку користење на CSS псевдо класи, како и најразлични трикови со невидливи елементи. На пример, со користење на невидлив Checkbox елемент асоциран со видлив Label елемент на кој корисникот може да кликне, можно е да се контролира одредена состојба и презентација (вклучено/исклучено) преку “:checked” CSS псевдо класа. Врз целата страна се наоѓа невидливо мноштво од “div” елементи распоредени низ табела, и со помош на “:hover” на овие елементи јунакот може да се движи (позиционира).
Што мислиш за HTML5 стандардите и Вебот без JavaScript?
Во HTML5 e иднината на вебот, сега веќе и дефинитивно кога Flash-от речиси целосно е изолиран, и сите модерни веб прелистувачи во голем дел ги имаат имплементирано новите стандарди. Но се разбира никако без JavaScript – заедно со HTML и CSS, JavaScript е дел од светото тројство и иднината на вебот. Таа е врската и портата до прекрасните можности на HTML5: WebGL, Canvas, Audio, Video, Multi-Touch, Drag and Drop, Web Workers… Меѓутоа, JavaScript е веројатно и најпогрешно употребуваниот програмски јазик на сите времиња и во целиот универзум, и конечно мора да почнеме да ги менуваме нашите навики и да го користеме овој моќен, а кога станува збор за веб апликации и неопходен јазик, на правилен начин и само таму кај што треба. Новите стандарди во потполност ни обезбедуваат основа врз која моќта на прелистувачите доаѓа до полн израз, заменувајќи дел од „тешките“ употреби на JavaScript функционалности со едноставни декларативни методи и техники вградени во фунционирањето на самите прелистувачи.
Ти посакуваме уште победи Ванчо!
Стани премиум член и доби пристап до сите содржини, специјален попуст на над 2.200 производи во ИТ маркет, верификуван профил и можност за огласување на ИТ Огласник. Плус ќе го поддржиш медиумот кој го градиме цели 16 години!
Доколку веќе имаш премиум членство, најави се тука.
Symphony Solutions 
Браво. Ова е навистина тешко да се направи со тие ограничувања. Еве еден CSS поздрав за победникот:
#vanchoStojkov:after {
content: " e car!";
position: absolute /* #1 */ !important;
}
:-)