Adobe призна: Apple победиха, свършено е с Flash за мобилни устройства, HTML5 е бъдещето
Reply
Category Archives: Работа
Силата и красотата на HTML5 и CSS3 събрани на едно място
Когато работата се превърне в повече от работа и дори в повече от хоби, човек започва все по-трудно да се впечатлява или поне при мен е така. Колегите по цял свят бълват проект след проект, всеки един от които е от много добър до чисто съвършенство, но въпреки това аз не оставам с отворена уста от видяното. След прекарани хиляди часове в разработката на проекти, когато видя нещо имам най-малкото обща представа как е направено, а това че не съм го направил аз е въпрос на липсата на идея (малко реклама).
Причината да пиша този пост е, защото най-сетне се намери проект, който меко казано ме впечатли. HTML5 и CSS3 отдавна са нещо повече от блян сред разработчиците и започнаха масово да се налагат като техники, на които може да се разчита. Създателите на The Expressive Web са направили чудеса и са съчетали каймака на двете технологии и са направили брилянтен начин за презентацията им. Приветствам всеки, който иска да научи “какво ново”, а и всеки, който иска да направи кратка справка, да посети експеримента.
Сигурни начини за прехващане на Internet Explorer *
Въпреки че на Internet Explorer 6 главата беше отрязана (от Google, Facebook, WordPress, а и от самите Microsoft), тялото му продължава да се движи в агония и ще е трън в очите на разработчиците до края на годината. Но дори и когато “тялото” му бъде заровено и цветята (ако има изобщо опечалени) бъдат разнесени от вятъра, идва поредния проблем – с неговите по-големи братя. Последните години критиките бяха насочени предимно към 6-ицата, а липсите и пропуските в 7 и 8 останаха пренебрегнати.
И тъй като няма как с вълшебна пръчица да накараме големите корпорации да използват по-модерни браузъри (Google Chrome, Mozilla Firefox, Opera или Internet Explorer 9) ще трябва да се съобразяваме с потребителите. Защото в края на деня, най-важното е потребителят / клиентът да са доволни от продукта.
От друга страна не може да се съобразяваме вечно с по-слабите и да ги бутаме напред, защото така няма да се види края скоро. Единият от начините да се съчетаят модерното с корпоративното е прогресивното подобряване. (б.а. прогресивно подобряване е термин, който обединява редица технологии, с чиято помощ потребителите на по-модерни браузъри получават по-добър продукт, докато се запазва използваемостта за браузърите, които не поддържат нужните технологии). Ето защо белгийският колега Mathias Bynens е направил чудесен подбор на най-популярните и най-стабилните начини за таргетиране / прихващане на Internet Explorer в статия наречена “В защита на CSS хаковете – представяване на “безопасни” хакове“.
Аз предпочитам използването на отделени CSS правила за конкретната версия на Internet Explorer (conditional comments), но само при крайна нужда! Ако основният markup и css код са написани по стандартите, то остава малко до почти никаква допълнителна поддръжка. Имайте го това предвид!
epay.bg – услуга на ниво!
Редовно в моето ежедневие се сблъсквам с какви ли не услуги – мобилни, интернет, транспортни, банкови. Без изключение винаги е имало проблеми с тях или както сме свикнали да казваме: “българска работа”. Скоро време ще пусна и малко по-подробен пост с премеждията и проблемите, които съм имал и как съм ги решил, но този пост не е за хулене, а точно за обратното.
Ако има услуга, от която да съм много доволен, то това е epay.bg. Ползвам ги от години за разплащания и до сега не съм имал проблеми (поне не и такива, за които да си спомням в момента). Поддържат повечето (ако не и всички) банки в България и техните карти (с изключение на Банка ДСК и ОББ, които имат лимитиран достъп). Имат голям списък с битови сметки: електрозахранване, мобилни оператори, интернет и кабелни доставчици, кредитни дружества – the whole nine yards!
Като разработчик съм изключително развълнуван от факта, че интегрирането на тяхната разплащателна система е много лесно. Имат демо сървър, на който да се извършват тестове, а превключването към реалния сървър е безболезнено. Както казах – много съм доволен. PayPal имат същата процедура, но при тях е далеч по-тромава!
Keep the good work!
Текущото състояние на HTML5 forms
HTML5 се опитва да категоризира най-често използваните имплементации на уеб формите. Избор на дата чрез интерактивен календар е едва ли не стандарт за повечето форми в наши дни. Но за да се постигне тази интерактивност се изискват допълнителни JavaScript библиотеки и CSS файлове. Те добавят освен желания ефект и извънредно количество трафик и забавяне на зареждането на страницата. Какво би било ако съвременните браузъри поддържат такъв календар по подразбиране? Точно това прави HTML5 групата, но внедряването на работните версии в браузърите е трудна задача, която се протаква с години.
Специализираният сайт за изработка на уеб форми Wufoo е изработил чудесна таблична извадка за текущото състояния на поддръжка в различните браузъри както и информация за отделните атрибути и предлага JS полифили за постигане на същият ефект в по-старите версии.
Документация на капризите (quirks) в JavaScript
JavaScript Garden е колекция от документации за най-капризните моменти в работата с JavaScript. Съдържа насоки как да се избегнат най-честите грешки, трудни за хващане бъгове, както и проблеми с производителността, които могат да бъдат избегнати.
Силата на 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 часа) и в следващите няколко дена ще го подобрявам и обновявам. Част от функциите към момента са:
- Play/Pause
- Показване на колко време е изминало от началото на клипа
- Преместване на slider-а за seek на клипа
Какво НЕ може да прави? Всичко останало 
и най-вече да показва клипове от сайта на Vbox7 (за сега!).
Важно е да отбележа, че започнах разработката с идеалната цел да науча по-добре за новите възможности на CSS3 и HTML 5 и не целя да подронвам авторитета на Vbox7 по какъвто и да е начин.
Към момента има добра поддръжка за Firefox 3.6.7, Chrome 5.0.375 и Safari 4.0.5. IE-тата не подлежат на коментар (за сега!)
Следете блога. Скоро ще публикувам следващата версия, с включени повече опции като контрол на звука, свободен seek, цял екран и fallback за по-старите браузъри. Също така съм предвил и подробна статия за работа с видео контрола.
CSS3 липсващите свойства
Все повече и повече CSS3 навлиза в Интернет пространството. Предлагат ни се нови и все необходими свойства като text-shadow, box-shadow, border-radius, transforms и още и още.
Но колкото повече свойства изискват, толкова повече си задаваме въпроса: “Какво друго може да ни се предложи?”. Ето част от моите хрумвания по въпроса.
- Избирателна повторяемост на фона
Винаги съм искал да вкарам всичко в една картинка или така нареченият “sprite”. Когато елемента, на който трябва да се сложи фон, е с точно определена ширина и височина всичко е ОК. Но ако трябва една картинка да се разпростре по цялата дължина или височина на елемента трябва да се прави отделен sprite или отделна картинка. Чудесено би било ако можеше да указваме от коя картинка да се отреже, какво да е името на сектора (за да може да се обръщаме към него и занапред), откъде да се отреже и с какви размери. Ако въпросният сектор се и кешира за следващо използване всичко би било на шест. Ето един пример как би изглеждала подобна директива.background-crop: url( ‘/path/to/sprite.jpg’ ), name( ‘footerbg’ ), from( 10px 20px ), size( 5px 10px );
background: use( ‘footerbg’ ) repeat-x top left
За: Намаляват се броя на заявките към сървъра. В най-добрият случай ще трябва само едно сваляне.
Против: Това временно отрязване на картинката ще бави рендването на страницата. - Константи!
В общия случай не е толкова фрапантна липсата на константи в CSS. Може да се направят множествени селекти на елементите, които трябват да имат еднакъв цвят, фон или рамка. Но какво ще стане ако искаме елементите от header-а да имат определен цвят (на текста), който да е същият както border-а на footer елементите? Трябва два пъти да дефинираме този цвят – един път за border-а и един път за color-а. А какво става когато този цвят трябва се замени. Find and replace? Може би. Но защо не е по-културно решение с константа? Пример:
/* Define a simple constant */
constant {
name: ‘mainColor’;
value: ‘#FF00FF’;
}/* Usage */
#header {
background-color: $mainColor;
}Прекрасно, нали?
За: По-добре поддържан код.
Против: Ако се вкарат константи, някой ще поиска и условни конструкции и CSS от описателен език, ще се превърне в изпълним. И тук пак идва проблема с производителността. - Еднаквост на размерите на два и повече елемента.
Най-баналният пример за това свойство е многоколоннта решетка. Две колони – лява и дясна, като дясната трябва винаги да е с височината на лявата. Въпреки че има добри решения на този проблем и сега, би било далеч по-лесно ако се добави правило за уеднаквяване на размерите на избраните елементи. Пример:
#leftColumn, #rightColumn {
eq-height: true;
}
#header, #footer {
eq-width: true;
}
За: Изграждането на колонни и грид структури ще бъде много по-лесно.
Против: Е, тук нещо против тази директива не мога да се сетя
Ако и вие се сещате за подобни добри идеи, споделете ги в коментарите. А на мен ако ми дойдат още идеи и аз ще ги споделя.
Забележка: Това не са валидни CSS правила!
Cross browser тестове или как да изглеждаме еднакво навсякъде
При наличието на тооолкова много browser-а на разположение на разглезения потребител, за разработчиците става доста трудна задачата да направят максимален контингент от хора да виждат едно и също. Нека бъдем честни – не може да бъдат задоволени всички! Но когато злия мениджър дойде и каже “искам” какво ни остава на нас освен да “направим”.
Първо – трябва задължително да се пише по стандартите. Въпреки, че това изобщо не е гаранция, че ще успеем да накраме Internet Explorer и Firefox да заговорят на общ език, това ни дава по-голяма възможност да намерим решение на проблема с няколко търсения в Google. Ако всички пишем по наши или фирмени стандарти – оправия няма.
Второ – използвайте нулиращи CSS файлове. Помагат много! Тяхната цел е да премахнат всички свойства, които browser-ите задават по подразбиране. Дали отклонението при едни е 1 пиксел, а при други 2 – проблема си е проблем и ще си спестите много нерви, ако просто нулирате всичко. Може да ползвате нулиращия CSS скрипт на Yahoo , а също така и решението на Ерик Майер. Ползвал съм и двете, но съм повече доволен от предложението на Yahoo.
Трето – тестове, тестове и пак тестове. Не може да се провери всеки един браузер, който някой пиян студент е написал 5 минути преди крайния срок за предаване на дипломна работа, но поне трябва да се прегледат основните мастодонти. Не е държавна тайна кои са те – Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Firefox 3, Chrome, Safari, Opera и Netscape. Повече за това кой и до каква степен ни причинява нерви може да прочетете в Wikipedia и в страницата на Net Applications. Изброените от мен 8 browser-а заемат 98.65 процентен дял от пазара ( към моментан на писане на статията ). За всеки един от тях си има изградени методи и практики за обичайните им проблеми. Тук няма да се спирам на тяхното решение.
Как обаче да направим толкова много тестове? Ще ви разочеровам – има един начин и това е трудния начин. Инсталирате ги, подреждате ги в редичка и почвате да преглеждате всяка страница. И докато с Opera, Chrome, Safari и Firefox няма да срещнете проблем при инсталацията, то при Internet Explorer ( ха! ) ще се сблъскате с проблема, че не може да имате по-ниска версия едновременно. И тук пак има десетки програми, които ги комбинират, но от моя опит мога смело да заявя, че те … не стават! Най-доброто решение, което съм намерил аз е следното. Имам Internet Explorer 8, който има backward compatibility с Internet Explorer 7 ( с малки изключения ). Отделна от това съм си свалил Microsoft Virtual Machine с XP Mode и на него държа чисто копие на Internet Explorer 6.
Това обаче не е достатъчно. Ами MAC потребителите? Ами Linux потребителите? Освен, че има разлика между два различни браузъра, има разлика и между еднакви брандове, на различни операционни системи ( OMG!!! ). И затова има решение Тъй като намирам инсталирането на допълнителни виртуални и не толкова виртуални машини, за да разбера как точно ще изглежда нещо на Konqueror, за напълни излишно, аз съм се спрял на няколко сайта, които вършат тази работа вместо мен ( Cheater ).
- Adobe Browser Lab
- Browsershots
- Browser Sandbox
- Browsrcamp – Mac OS X тестове
Повече техническа информация може да намерите при котките, които кодват.
Търси се: Уеб програмист, самоубиец.
Търся уеб програмист, който поради някакви причини ( любовни, финасови, семейни … ) иска да се самоубие. Ако ти си такъв, моля те, сложи в предсмъртно си писмо и текст, че го правиш, защото не можеш да търпиш повече своеволията на Microsoft и в частност, че Outlook 2010 рендва HTML-а с Word.
Приемам Internet Explorer ( IE ) 6 предизвикателства!
Всеки е на ясно за какъв трън в задника става на въпрос. Едно от “революционните” деца на Microsoft. Не поддържа много от готините неща – hover на всички елементи, alpha прозрачност, има объркан box модел, има свое виждане за големината на нещата.
Много колеги го ненавиждат, а други ( Facebook ) презират и изобщо не се занимват с неговата ползваемост. Лошото е, че все още е с лъвски пай сред използваните browser-и, най-вече, защото върви по подразбиране с Windows XP. И докато има над 5% ( в момента са 17% ) ползваемост, аз няма да спра да правя шаблоните си, така че да работят 1:0.99 с IE6. Това, което правих последните два дена, показва ясно, че с малко трикове може да се докара резултат, който да е ОК.
Именно това, че при него се използват алтернативни начини за показването на исканият от вас резултат е предизвикателство. И аз отправям към хората, които четат блога ми – дайте ми шаблон, който вие не можете да направите да работи при IE6 и аз ще направя всичко възможно, за да може. Правя го за удоволствие, но всякакви материални стимули са добре дошли
Драгомир Драганов и Епизод
Покрай грандиозните концерти, които ни очакват, май ще изпуснем и две по-малки като мащаби събития, но поне едното от тях е уникално за българската рок музика.
На 11-ти април, в клуб “Три Уши”, гр. София, рок група Епизод, ще изнесат поредното си представление пред родна публика. Всики знаем, кои са Епизод, и какво са направили и дали на рок музиката в България, така че няма какво повече да ги рекламирам. Началото е от 22:00 часа. Ако Soto е свършил до тогава, ще отскоча да ги видя за пореден път. “Цар Иван Шишман” нема да умре
По-интересното, от чисто музикална гледна точка, е събитието, което ще се проведе на 8-ми май в клуб Blue Box. Драгомир Драганов, лидерът и китарист на споменатите по-горе юнаци от Епизод, ще представи своят първи самостоятелен албум, “Alter Ego“. Ще чуете изключителна смесица от лирични мелодии и агресивни китарни сола, по малко Yngwie Malmsteen и по малко Joe Satriani. Някои от приятелите ми не харесват музиката на Епизод и няма как като се чуе “Драго от Епизод”, да не се направи връзката, но всъщност Драгомир Драганов се е разграничил доста добре от миналите си изпъленения, работил е изключително здраво ( до колкото знам целият албум е записан изцяло от него ) и на 8-ми май ще видим поредният опит на гениален български творец да пробие през мъглата наречена “български шоубизнес”. Пожелавам успех на Драго в това негово смело начинание.
Придадох малко личен привкус на последният абзац, затова посетете сайтът на Драгомир Драганов, за повече информация за билети и за да чуете каквото всъщност ще чуете
Безопасни шрифтове ( web safe fonts )
След кратък спор с дизайнера ми дали може да се използва определен шрифт, реших да проверя колко и какви са шрифовете, които могат да се използват безопасно т.е. кои са най-широко разпространените в операционните системи. Най-често до сега съм използвал Verdana и Arial, но се оказа, че има приличен избор.
Не забравяайте, че за заглавия и за по-малки количества от текст, може спокойно да използвате и javascript алтернативи, като Facelift и sIFR.
Как се извиква JavaScript функция от Flash.
Наистина е много просто. Основният проблем е, че ако се използват неправилните методи или няма да работи при всички browser-и ( fscommand ) или ще иска потвърждение ( getURL ).
Има метод, който работи без посочените горе проблеми. Метода се нарича ExternalInterface, а в посочената по долу таблица е описано, в кои browser-и работи.
| Browser | Operating System | |
|---|---|---|
| Internet Explorer 5.0 and higher | Windows | |
| Netscape 8.0 and higher | Windows | Macintosh |
| Mozilla 1.7.5 and higher | Windows | Macintosh |
| Firefox 1.0 and higher | Windows | Macintosh |
| Safari 1.3 and higher | Macintosh | |
Както вече споменах, метода се казва ExternalInterface и можете да прочетете повече за него, на официалната документация на Adobe.
С няколко думи за какво служи и как работи.
Предполагам, че на всеки, който се е занимавал малко или много с Flash му се е искало да използва регулярни изрази, но ActionScript не ги поддържа. Или искате да разберете какво се случва по страница, чрез ваша си собствена JavaScript функция? Или чисто и просто имате по-добри JavaScript отколкото ActionScript такива.
Които и отгорените случаи да имате ето какво трябва да направите.
Във actions панела, където описването събитията, импортирайте external библиотеката.
import flash.external.*;
Във следващият ред става магията:
ExternalInterface.call( “JavaScript функцията, която ви вълнува”, “Параметри разни” );
Трябва разбира се и във HTML документа да напишете функцията и какво точно ще прави, но това е бял кахър Публикувате си флаша и е готово.
В следващата статия ще разкажа и как се прави обратното, а именно да се извика ActionScript функция от JavaScript. Готино, нали?