Както ви споделихме преди няколко седмици, изминалият месец беше доста тежък за нас, но въпреки това успяхме да поддържаме някакво темпо с новото съдържание на FridayCode и същевременно да поработим над FryPlayer. Резултатът е налице - преди няколко дни пуснахме втора версия на плейъра, в която няма кой знае колко промени, но важното е, че е стъпка напред. Промените, както може да разберете от сайта са:
коригиран бъг с Mute On/Off
коригиран бъг при появата на контекстно меню
възможност за поставяне на собствено Logo/Watermark
дребни оптимизации
Накратко, пооправени дребни бъгчета, лека оптимизация и едно нововъведение - възможност за поставяне на watermark. Процесът е уникално улеснен, така че ако имате готова картинка, може да я поставите и позиционирате за броени секунди. Освен това сме оставили и възможност за промяна на нейната прозрачност, така че да не ви се налага да я сейфате сто пъти, докато нацелите правилната стойност. Пътят до самата картинка също може лесно да се променя и по този начин може да имате няколко различни плейъра на една страница и всеки един от тях да бъде с различно лого. Яко, а?
Това обаче не е всичко. Тези промени могат да се причислят към първата част от ъпдейта, който спретнахме. Останалата работа бе по самия сайт! Вече можем да се похвалим с английска версия, но докато се занимавахме с нея, открихме, че системата за коментари и по-точно начинът й на работа не пасва много на изискванията ни. Трябваше и това да се преработи, което допълнително забави нещата. Все пак написахме супер елементарна и лека системка, която вече е активна и от сега нататък ще се грижи за вашите коментари. В сайта добавихме и секция, която да ви информира за последните промени, както и възможност за сваляне на по-стари версии, в случай, че има критичен бъг в новите или просто ако някой го удари носталгията. Накрая решихме да сменим и изгледа на секцията "начин на употреба" и по-точно изобразяването на сорс кода. Старият метод бе направен в бързината и не предлагаше кой знае каква гъвкавост при работа, което ни накара да започнем да използваме популярната системка SyntaxHighlighter.
Като цяло виждате, че всъщност ъпдейта е доста масивен и за това пристигна до вас по-бавно от очакваното. Важното е, че промените са налице и ние сме отперили поглед към версия 0.3, която много вероятно също ще бъде придружена с промени по сайта, макар и не толкова градивни. През това време, ако имате предложения, препоръки или забележки, не забравяйте, че винаги може да оставите коментар или да се свържете с нас по мейл.
Изключително сме радостни да ви представим първия самостоятелен проект, маркиран с логото на FridayCode. Както вече сте разбрали от заглавието, става дума за HTML5 видеоплейър, носещ името FryPlayer. Идеята за него се роди преди около 3 месеца, когато усърдно ровичкахме онлайн медиите за новости в HTML5 и CSS3. Първоначално беше само идея, постепенно се роди статията за HTML5 video или как да създадем видеоплейър, а накрая лека полека започнахме да човъркаме и самия плейър. Честно казано бяхме провокирани и от факта, че все още на хоризонта няма перфектен плейър и спокойно можем да се наместим в Топ 20. Разгледахме голям процент от плейърите, които може да намерите из мрежата и ги анализирахме известно време. Положихме основите на нашия плейър, като се стремяхме да не повтаряме техните грешки. Така започна работата по FryPlayer.
Ако сте чели въпросната статия за това как да си направим видеоплейър, то вероятно ще сте наясно с фактите - всеки браузър има свой собствен дизайн на контролите. Първата цел е те да бъдат уеднаквени, но това не означава просто да смените една картинка, а да пренапишете цялата функционалност. Решихме отново да се възползваме от възможностите на jQuery. В момента на започване на работа по FryPlayer, на сцената имаше само един плейър, който разчиташе на jQuery и по-специално jQuery UI. В момента са няколко и спокойно можем да кажем, че ги превъзхождаме по доста параграфи.
Първоначално ни беше трудно да схванем логиката на определени функционалности и дори в момента изпитваме затруднения с някои, най-вече заради проблемите под различните браузъри (този път войната е FF vs Webkit). Все пак след доста безсънни нощи, версия 0.1 на FryPlayer е факт и наистина сме горди от постигнатото, защото през цялото това време продължихме да пишем уроци и работихме по сайта на самия плейър. Но преди да поговорим за FryPlayer, искаме да кажем няколко думи за сайта му. Целяхме да бъде изключително семпъл, но и малко по-открит, по-отворен. Също така искахме информацията да бъде структурирана смислово и да следва нормалните реакции на всеки потребител. Анимираната навигацията е подобрена версия на този урок. Като цяло ние сме доволни, надяваме се и вие да останете такива.
Сега е време да си поговорим и за самия плейър. Вероятно вече сте разгледали фийчърите му и може би се питате на 100% ли са изпълнени, каква е разликата им с конкурентните плейъри и т.н. Отговорите пристиггат! Като за начало плейърът е изключително лек и това може да проверите, като отворите този линк, пуснат от нашия потребител ReXTaN във форума и направите сравнение с някои от предложенията там. Не сме номер 1, но със сигурност FryPlayer е доста по-бърз дори от някой от най-популярните конкуренти. Лесен за употреба? Разбира се! В описанието на сайта се вижда че са ви необходими само три неща, за да подкарате плейъра при вас - да го свалите и да копирате малко файлове плюс няколко реда код. Останалото са настройки. Следващият голям плюс са скиновете, които поддържа плейъра. Отворете CSS-а и разгледайте как са направени двата скина, които вървят с версия 0.1. Нужно е просто да кръстите и да описвате новия скин с клас, чието име после да заместите при извикването на плейъра. Лесно, а? Друга полезна фунцкия е видеото на цял екран. То не е съвсем на цял екран, както при desktop плейърите, но това е проблем на HTML5. Гъзарията е че, когато сте във full screen mode и рисайзвате прозорецът на браузъра, заедно с него се рисайзва и самият плейър. FryPlayer поддържа и визуализация на буфериране. Тя е в доста ранна фаза, тъй като по принцип не е развита напълно и абсолютно всички плейъри имат проблем с нея. Все пак, очаквайте подобрения в следващата версия. На последно място искам да спомена и интуитивните клавиши - разполагате с ESC за изход от цял екран, SPACE BAR за Play/Pause (засега само във Full Screen Mode), както и двоен клик на мишока за цял екран и изход от него. Планираме още няколко хоткийя, които да ви накарат да си помислите, че това е десктоп приложение. Като цяло това са нещата, с които можем да се похвалим засега и честно казано в момента те правят FryPlayer напълно пълноценен и готов за ползване. Вероятно се питате защо плейърът е с криптиран javascript, след като е напълно свободен за ползване? Причината е, че ние обичаме да докарваме нещата до край (питайте мацките) и обичаме да го правим професионално. Ето защо решихме, че на този етап е по-добре кодът да остане заключен, за да може да го усъвършенстваме и евентуално в някоя от бъдещите версии да пуснем FryPlayer като open-source. Не е ясно това кога ще се случи, тъй като сме си направили списък с фийчъри до версия 0.5 и отделно ще има да чистим бъгове.
FryPlayer се поддържа от актуалните версии (препоръчително) на Firefox, Opera, Chrome и Safari, както и от всички знайни и незнайни HTML5 съвместими браузъри (скоро ще видим IE9 какво ще каже). Поддържаните кодеци са H.264, Theora и VP8 (WebM), като отново за повече информация ще ви препоръчаме да прочетете изчерпателния урок за създаване на HTML5 плейър.
Надяваме се с тази кратка презентация да сме успели да грабнем вниманието ви. Далеч сме от мисълта, че това е най-прекрасният плейър на света, но ще се опитаме да го направим такъв. На този етап вероятно ще има доста бъгове, тъй като си нямаме бета тестери, но точно поради тази причина ще сме ви благодарни, ако оставяте коментари или тук или в сайта на плейъра. Ще се опитаме да ги отстраним колкото се може по-бързо и съответно да извадим версия 0.2 в най-скоро време. В бъдещите версии ще наблегнем и на мобилната поддръжка, въпреки че там е по-голяма манджа и от настолните еквиваленти.
Но предполагам вече започва да ви доскучава и за това ви представям самия FryPlayer в целия си блясък! Междувременно се насладете и на прекрасния трейлър на Sucker Punch! Нищо не се разбира, но е радост за окото. Решили сме да правим рокади на трейлърите с цел свежо съдържание на сайта, така че ще обновяваме с нови, ако се появят достатъчно готини.
Създаването на конкурентоспособни уеб базирани приложения в днешно време означава да се създаде нещо, което потребителят може да контролира сам. Едно от тези неща е динамичното добавяне и премахване на елементи. В примера днес ще разгледаме една базова формичка за добавяне на потребители. Тя изисква да се попълват полета с различна информация, както е показано на картинката.
Често срещан проблем, с който се сблъскваме при подобни ситуации е, че не знаем от колко полета има нужда потребителят, който използва нашето приложение. В такива случаи го караме да изброи параметрите, които иска в едно поле и да ги раздели със запетаи или други символи. Дори понякога се опитваме да прогнозираме колко е максималният брой неща, които той може да въведе и създаваме определен брой полета. Както се досещате това са доста примитивни методи. В тази статия ще ви покажа как с малко jQuery може да направите малко по-лесен живота на потребителите.
Ако намирате използването на jQuery за удобно, лесно и практично, тогава със сигурност сте готови да направите свой собствен плъгин. Както става ясно от предните статии за jQuery (jQuery за начинаещи, jQuery - полезни съвети част 1 и част 2) това е много удобна JavaScript библиотека. Тя предлага механизъм за добавяне на методите и функциите, пакетирани като плъгин. Сигурно се питате защо да превръщам част от простия код в плъгин. Най-добрата причина е възможността да се поддържа един код лесно и да се използва в различни проекти.
След няколко часа размисли реших примерът с който ще си отговорим на въпроса "Как да си направим jQuery плъгин?" да бъде простичък Tooltip.
На всички ни е ясно, че на неописуемо голямата интернет сцена нещата от край време се развиват светкавично бързо. Разбира се, това води и до постоянното развитие на хората, които стоят зад всичко това - дизайнери, девелъпъри, администратори и т.н. Но за да вървиш ръка за ръка със света около теб, трябва да се следят последните тенденции в технолгиите. В конкретния пример ние ще се фокусираме върху моментното състояние на една от най-популярните JavaScript библотеки - jQuery.
Ако не съм ви го казвал досега - обичам простичките неща. Защо? Защото, колкото по-просто е направено дадено нещо, то вероятността да се развали/счупи/спре да работи е по-малка. Другата причина е, че обикновено сложните неща са съставени от прости, т.е. за да схванете логиката трябва да се почне от А и Б. Днешният урок е типичен пример за това как с един наглед простичък метод, може да се постигне доста приятен краен резултат.
Както всички добре знаем, без HTML нищо от това, което четете в момена няма да бъде реалност. Всичко от най-семплия до най-препълнения с модерни технологии сайт е зависимо от HTML. "Бащата" на езика, британският физик Тим Бърнърс-Лий, днес е директор на консорциума W3C. По времето, когато е работил в ЦЕРН той е получил задача да улесни работата на своите колеги, като измисли по-лесен начин за достъп и обработка на информацията от провеждащите се научни изследвания. Един вид трябвало им страхотна документация, за да извличат максимума от работата си. Така се ражда и HTML, който първоначално имал доста ограничени възможности, но заради лесната употреба и възможността да бъде четен от множество потребители той свършил прекрасна работа.
И след този кратък урок по история предполагам вече сте се досетили, че днес ще си говорим за това как да направим една документация, една книга или защо не един цял сайт по-удобен за навигиране.
В залеза на своето съществуване, Internet Explorer 6 (IE6) все още държи позиции и гордо върви редом до едни от най-популярните браузъри в момента. Краят му не е дошъл още и вероятно това ще стане с излизането на IE9 и следващия Windows. Дотогава обаче, колкото и да го мразим, трябва малко или много да се съобразяваме с него. Това ще бъде един от малкото уроци, посветени изцяло на проблем под IE6, така че може би хората, които зависят от този браузър ще наострят уши.
Всички знаете, че IE6 поддържа псевдо-класа :hover само на <a> елемент, което в доста от случаите е проблем, защото орязва не само визията, но понякога и ползваемостта. Точно за това нашата задача е да намерим най-простото решение.
Това е втора част на статията "jQuery - полезни съвети". Ако случайно сте пропуснали първата, може да я намерите тук. Сега следват още пет нови съвета, които се надявам да ви бъдат полезни. Наслаждавайте се!
От доста дълго време Гошето (Георги Калайджиев) ме кара да седна и да напиша урок за такъв слайдър и ето че той вече е факт. Разбира се има много подобни слайдъри или carousels (въртележки) в мрежата, но рядко се среща нещо, което да ти свърши работа на 100% и хем да е удобно, хем да е малко като код и т.н. Надявам се сами се досещате, че това не е най-великият скрипт, но със сигурност ще свърши работа на някой от вас.
Надявам се всичко надолу да е ясно, но ако имате въпроси не се притеснявайте да питате.
JQuery е лекa cross-browser JavaScript библиотека, която набляга на взаимодействието между JavaScript и HTML.
Именно това изречение ме накара да обърна по-специално внимание на jQuery. Тъй като съм front-end developer, който не разбираше нищо от програмиране, често ми се налагаше да решавам дребни проблеми изцяло с HTML и CSS, както и доста често орязвах функционалността на даден проект, тъй като всяка дребна манипулация на HTML-а беше свързана с висенето при някой колега Developer, който решаваше тези проблеми или с лекота (заради добре написан HTML и CSS от мен), или с големи мъки (не добре написан HTML било то от мен или от самия него в стремежа си да не ме занимава излишно). За първи път имах възможността да се сблъскам с jQuery преди около две години, когато кръстосвайки интернет на длъж и на шир, попаднах на интересни jQuery скриптове, които ми направиха добро впечатление. Въпреки, че ми хареса още от пръв поглед не му обърнах голямо внимание и остана някъде в моите bookmarks. Преди около половин година в една петъчна вечер докато висях пред компютъра реших, че е време за крачка към нещо различно от HTML и CSS. Сетих се за jQuery, зачетох се и толкова ми допадна, че цяла вечер се мъчих да пиша скриптове и се възхищавах на простотата и яснотата с която правиш елементарни DOM манипулации. И така чак до неделя сутринта когато просто имах нужда да сънувам малко код и няколко скрипта, които ще ви покажа в някои от следващите статии.
