Силата и красотата на HTML5 и CSS3 събрани на едно място

Когато работата се превърне в повече от работа и дори в повече от хоби, човек започва все по-трудно да се впечатлява или поне при мен е така. Колегите по цял свят бълват проект след проект, всеки един от които е от много добър до чисто съвършенство, но въпреки това аз не оставам с отворена уста от видяното. След прекарани хиляди часове в разработката на проекти, когато видя нещо имам най-малкото обща представа как е направено, а това че не съм го направил аз е въпрос на липсата на идея (малко реклама).

Причината да пиша този пост е, защото най-сетне се намери проект, който меко казано ме впечатли. HTML5 и CSS3 отдавна са нещо повече от блян сред разработчиците и започнаха масово да се налагат като техники, на които може да се разчита. Създателите на The Expressive Web са направили чудеса и са съчетали каймака на двете технологии и са направили брилянтен начин за презентацията им. Приветствам всеки, който иска да научи “какво ново”, а и всеки, който иска да направи кратка справка, да посети експеримента.


Текущото състояние на HTML5 forms

HTML5 се опитва да категоризира най-често използваните имплементации на уеб формите. Избор на дата чрез интерактивен календар е едва ли не стандарт за повечето форми в наши дни. Но за да се постигне тази интерактивност се изискват допълнителни JavaScript библиотеки и CSS файлове. Те добавят освен желания ефект и извънредно количество трафик и забавяне на зареждането на страницата. Какво би било ако съвременните браузъри поддържат такъв календар по подразбиране? Точно това прави HTML5 групата, но внедряването на работните версии в браузърите е трудна задача, която се протаква с години.

Специализираният сайт за изработка на уеб форми Wufoo е изработил чудесна таблична извадка за текущото състояния на поддръжка в различните браузъри както и информация за отделните атрибути и предлага JS полифили за постигане на същият ефект в по-старите версии.

Силата на HTML 5 – Експерименти с Google Chrome

Силен шамар от страна на Google и набиращият сила HTML 5 срещу Flash. Един много пресен експеримент (всъщност над 100) с новите възможности на Canvas тага и Java Script. Някои от демотата са спиращи дъха – уеб и преживяването наречено "уеб" вече няма да са същите. Вижте за какво говоря – Chrome Experiments.

Vbox7 HTML5 видео player (alpha1)

В началото на тази година така популярният сайт за видео обмен YouTube публикува експериментална HTML 5 версия на своят сайт. Тя се изразяваше в използването на новия video таг, който от своя страна позволява гледането на видео клипове без нуждата от инсталиран Adobe Flash Player. И докато за YouTube е нормално да експериментират с нови технологии, които да улеснят техните потребители, то българският видео портал Vbox7 изостава. И то много сериозно!

Но тази статия не е с цел критикуване на пичовете от Vbox7, а с цел да покаже че и техният player може да бъде направен единствено и само с помощта на HTML 5, CSS3 и малко Java Script.

Разработеният от мен player е в изключително начален стадий (работил съм не повече от 5, 6 часа) и в следващите няколко дена ще го подобрявам и обновявам. Част от функциите към момента са:

  1. Play/Pause
  2. Показване на колко време е изминало от началото на клипа
  3. Преместване на slider-а за seek на клипа

Какво НЕ може да прави? Всичко останало :) и най-вече да показва клипове от сайта на Vbox7 (за сега!).

Важно е да отбележа, че започнах разработката с идеалната цел да науча по-добре за новите възможности на CSS3 и HTML 5 и не целя да подронвам авторитета на Vbox7 по какъвто и да е начин.

Към момента има добра поддръжка за Firefox 3.6.7, Chrome 5.0.375 и Safari 4.0.5. IE-тата не подлежат на коментар (за сега!)

Следете блога. Скоро ще публикувам следващата версия, с включени повече опции като контрол на звука, свободен seek, цял екран и fallback за по-старите браузъри. Също така съм предвил и подробна статия за работа с видео контрола.

ВИЖТЕ ДЕМОТО