Какво е Friday Code?

Това е място за хора, които считат писането на код същевременно за изкуство и част от ежедневието. Това е място, където можем да се съберем и да обсъждаме всичко без задръжки, тъй като всички тук сме равни. Това е място, където информацията и придобитите знания са безценни. Всичко от нас се прави за удоволствие! Ако искате да се свържете с екипа за предложение, запитване или критика, може да използвате контактите.

Code is poetry.

С края на лятото почивките лека-полека започват да приключват, улиците на София да се пълнят и наред с това е време за нашия месечен "отчет". Питахме ви кой е любимият ви редактор за код, като се опитахме да включим повечето по-популярни. Челната тройка се окопира от Notepad++, NetBeans и Dreamweaver, съответно заемащи първо, второ и трето място. Наистина това са едни от най-известните редактори за Windows и логично хората ги ползват. Notepad++ се слави като най-добрия безплатен и опростен редактор и е предпочитан от мен. За сметка на това колегите му по медал NetBeans и DW са далеч от думата семпъл, но и тяхното предназначение е маааалко по-различно. Разбира се, не можем да минем и без злобно изречение относно Dreamweaver, чието име обикновено предизвиква подигравателни усмивки по лицата на старите кучета. Нооооо... без лоши чувства - DW е приятен софт, стига да не се ползват 100% от автоматизираните му опции. Но честно казано има голямо значение на какъв редактор се учи човек, защото в повечето случаи той или му става любим, защото е свикнал с него и му се струва най-удобен, или го удря на носталгия при опит да го смени.

Да се върнем обаче на анкетата. Веднага след Windows-ките редактори, представителни позиции са окупирали тези за Mac - Coda и TextMate. Това е радващ факт, тъй като знаем, че Mac-овете не са по бюджета на средностатистическия българин и обикновено да притежаваш подобна машина означава, че си професионалист, който си вади хляба с нея или харчиш нечии пари (обикновено роднински). Надолу в класацията остават редактори за Linux и някои по-неизвестни за Win. Разбираемо е, тъй като аудиторията ни е такава.

Теглейки дебелата черта, където обикновено споделяме нашето мнение под формата на мъдрост или тотална глупост, се оказва, че не е важно на какво пише човек, а дали може да го прави. Може да се пише, както на "гигантските" Eclipse и Aptana, така и на по-скромни редактори тип Notepad++, UltraEdit, дори чист Notepad. Може да се пише и на салфетка или тоалетна хартия (ако ви дойде музата за някое гениално парче код, но няма да давам идеи с какво ще пишете...). Важното е да пишем правилен, логичен, семантичен и прочие -ичен код. Това става най-лесно, когато нямате хиляди опции под носа, т.е. най-добре е да използвате малки, спретнати и безплатни редактори. За по-напредналите потребители те също са от полза, макар че тогава понякога се налага използването на по-сложни софтуери или така наречените среди за програмиране. В крайна сметка всеки сам решава и избира според собствените си нужди и знания.

Сега е време за новия въпрос, който ще краси дясната колона през септември - "С каква операционна система е вашият мобилен телефон?". Зад въпроса отново се крие едно от нашите "полезни проучвания", тъй като мислим в следващите версии на FryPlayer да наблегнем и на този фронт, а освен това имаме и няколко идеи за уроци за мобилни устройства. Гласувайте на воля, а между другото може да не сте обърнали внимание, но във футъра от месец насам имаме линкове към BulgarianTOP и BGtop. Ако имате желание и искате да ни подкрепите, гласувайте ежедневно на посочените линкчета. Оценяваме го и благодарим предварително!

  • Facebook
  • Twitter
  • Digg

Здравейте, здравейте!

Изключително сме радостни да ви представим първия самостоятелен проект, маркиран с логото на 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! Нищо не се разбира, но е радост за окото. Решили сме да правим рокади на трейлърите с цел свежо съдържание на сайта, така че ще обновяваме с нови, ако се появят достатъчно готини.

[ Официален сайт ] [ Свали FryPlayer ]

  • Facebook
  • Twitter
  • Digg

Създаването на конкурентоспособни уеб базирани приложения в днешно време означава да се създаде нещо, което потребителят може да контролира сам. Едно от тези неща е динамичното добавяне и премахване на елементи. В примера днес ще разгледаме една базова формичка за добавяне на потребители. Тя изисква да се попълват полета с различна информация, както е показано на картинката.

Често срещан проблем, с който се сблъскваме при подобни ситуации е, че не знаем от колко полета има нужда потребителят, който използва нашето приложение. В такива случаи го караме да изброи параметрите, които иска в едно поле и да ги раздели със запетаи или други символи. Дори понякога се опитваме да прогнозираме колко е максималният брой неща, които той може да въведе и създаваме определен брой полета. Както се досещате това са доста примитивни методи. В тази статия ще ви покажа как с малко jQuery може да направите малко по-лесен живота на потребителите.

научи повече...

  • Facebook
  • Twitter
  • Digg
Тагове:

На всички хора, които са решили да се занимават с HTML горещо им препоръчвам да сядат и четат всякакви документации, до които се докопат. Тези от вас, които вече са поели по този път, вероятно са обърнали внимание, че доста се говори за въпросните блокови (Block-level) и инлайн (Inline/Text-level) елементи.

От голямо значение е да имаме правилно структуриран HTML код, защото това помага при SEO, при възпроизвеждането на сайта под различни браузъри, при работата с CSS впоследствие и много други. Казвам го, защото въпросните блокови и инлайн елементи лежат в основата на HTML структурата, а както знаем усъвършенстването в каквото и да е, преминава през стабилно изучаване на основите.

Всъщност какво представляват блоковите и инлайн елементите? Реално това са всички HTML елементи (body, p, span, div и т.н.), разделени в две групи.

научи повече...

  • Facebook
  • Twitter
  • Digg

Ако намирате използването на jQuery за удобно, лесно и практично, тогава със сигурност сте готови да направите свой собствен плъгин. Както става ясно от предните статии за jQuery (jQuery за начинаещи, jQuery - полезни съвети част 1 и част 2) това е много удобна JavaScript библиотека. Тя предлага механизъм за добавяне на методите и функциите, пакетирани като плъгин. Сигурно се питате защо да превръщам част от простия код в плъгин. Най-добрата причина е възможността да се поддържа един код лесно и да се използва в различни проекти.

След няколко часа размисли реших примерът с който ще си отговорим на въпроса "Как да си направим jQuery плъгин?" да бъде простичък Tooltip.

научи повече...

  • Facebook
  • Twitter
  • Digg

HTML5 и CSS3 в ежедневието?

Явно сезонът на отпуските не е започнал и този месец нашата анкета отново се радваше на висока активност. Може би това се дължи на факта, че въпросът "Налагате ли използването на HTML5 и CSS3 в своите проекти?" е доста актуален за по-голямата част от кодърите. Това е добре, защото говорим за таймсейвъри, които освен време, пестят и нерви. Освен това подобни ключови думички, подплатени с малко впечатляваща информация към тях, карат клиентите да се усмихват доволно. Но наистина ли ще можем на този етап да изпълним всичките си обещания? Истината е, че по-скоро не. Докато HTML5 си проправя път все повече и повече, и поне някои негови страни се разбират добре с популярните браузъри, неговото другарче CSS3 изпитва сериозни трудности. Проблемите му се проявяват най-вече при чифтосване с IE. В тези случаи трябва да имате резервен вариант, което малко или много обезмисля логиката и оптимизацията на целия проект. Сега може би се чудите защо постоянно лансираме новите стандарти и пускаме статии за тях? Отговорът е прост - предварителната подготовка е много важна. Казвали сме го неведнъж и може би ще го чувате пак. Ако сте подготвен за дадено изпитание, то ще се справите с него по-лесно. Същото е и тук. Пишейки статии и обсъждайки за проблемите, ние разнищваме лека полека материята, така че когато дойде моментът, да бъдем подготвени. В момента получаваме информацията на парченца и е много по-лесно да асимилираме случващото се. Освен това докато се занимаваме, тестваме, пробваме стари методи с нови и т.н., ние всъщност копаем все по-надълбоко и това в повечето случаи ни води до собствени открития. Вика му се самообучение и е в основата на успеха във всяко начинание. Мисля, че причините по-горе са достатъчни да продължим с бълването на материали за HTML5 и CSS3. Някои от тях може да са ви от полза, някои могат да провокират сивото ви вещество и да тръгнете към свои собствени разсъжения по темата, а някои могат изобщо да не ви помогнат. Всично е възможно...

Анкетата ни този месец обаче показва, че въпреки трудностите, повечето от хората се опитват да наложат използването на новите стандарти. Дванадесет човека са отговорили с "Да, усилено" и 22-ма с "Опитвам се, но където мога". На противоположната страна имаме 23-ма, които за момента стоят настрана и са оставили своя глас за "Все още не". Освен тях, HTML5 и CSS3 открито пречат в работата с клиенти на двама гласували. Като цяло, както виждате нещата са 50/50 и това е напълно нормален резултат, за прехода, в който се намираме. И все пак нашето крайно решение е да подкрепяме използването на "новите модели", независимо колко трудно е това.

Сега нека обърнем темата на 180 градуса и преминем към новия въпрос за този месец - "Любим едитор?". Разбира се, става въпрос за текстови, сорс код и т.н. едитори, а не за графичните тип "снимащ магазин". Възможно е да сме пропуснали някой предпочитан от вас, за което предварително се извиняваме.

От екипа с пожелания за успешен и слънчев август!

  • Facebook
  • Twitter
  • Digg

Диаграми с CSS3

Предполагам доста от вас вече са се уверили в могъщите способности на CSS3. Въпреки рехавата поддържка, новият стандарт усилено се налага в ежедневието на разработчиците и съответно потребителите, като за последните в повечето случаи е трудно да усетят някаква разлика. Не това е важното обаче. Ние от FridayCode осъзнаваме колко ценен е CSS3 и как може да удължи живота ви с няколко бири повече. Това е и благородната причина, поради която споделяме този урок с вас.

Любопитната тема, на която сме се спряли днес има вероятност да ви повлече към отворилата се носталгична яма. Защо намесвам спомените ли? Както вече сте разбрали ще говорим за графики, диаграми и пр. Интересното е, че докато правих урока, в главата ми се въртяха добрите стари Excel-ски чартове. През 90-те години те си бяха сериозна гъзария и дори да не им се намираше голямо приложение сред дечурлигата, самият факт че можеш да ги правиш ти вдигаше health-a с 50 единици.

Сега, за жалост, олдскул ръбатите графики са заменени от супер-дупер красиви, мазни и ефектни диаграми, които обикновено са дело на Flash. Ние обаче за момент ще игнорираме тази технология и ще си поговорим за чартовете само с CSS3.

научи повече...

  • Facebook
  • Twitter
  • Digg

jQuery за начинаещи

На всички ни е ясно, че на неописуемо голямата интернет сцена нещата от край време се развиват светкавично бързо. Разбира се, това води и до постоянното развитие на хората, които стоят зад всичко това - дизайнери, девелъпъри, администратори и т.н. Но за да вървиш ръка за ръка със света около теб, трябва да се следят последните тенденции в технолгиите. В конкретния пример ние ще се фокусираме върху моментното състояние на една от най-популярните JavaScript библотеки - jQuery.

научи повече...

  • Facebook
  • Twitter
  • Digg

В днешно време средностатистическият интернет потребител трудно би си представил мрежата без видео. В голям процент от случаите, търсеният от вас резултат ви предоставя видео, независимо дали го желаете или не. Четете новини? Много вероятно да попаднете на видеорепортаж. Търсите музика? Ще ви се предложи видеоклип. Четете ревю на игра? Сто процента ще видите, както скрийншоти от нея, така и трейлър. Готварство, риболов, туризъм, мода, автомобили... навсякъде имаме видеоматериали, които само чакат да бъдат изгледани. Точно поради тази причина видеото в интернет отдавна се е утвърдило, като незаменима част от него.

Досега представянето на видео ставаше основно по един начин - чрез flash video player (затварям си очите за QuickTime). Доскоро това не пречеше на никой, но напоследък, особено след разгорещилите се страсти между между Apple и Adobe, въпросът започна да се повдига много често. Apple и техните "ай" продукти, ограничават достъпа на потребителите до флаш и по този начин те не могат да се наслаждават на сайтовете, които го използват, а повярвайте те са доста. Това си има разумна причина и може да прочетете страхотните думи на Стийв Джобс тук.

И точно както Камерън и неговият Аватар поставиха началото на нова 3D ера в киното, така и г-н Джобс с iPad/Phone/Pod са на път да ускорят процеса на преминаване към ново поколение видео плейъри. С други думи, този своеобразен монопол наложен от Adobe е на път да се пречупи, тъй като на хоризонта се задава силуетът на друг каубой. Да, познахте - това е HTML5, препускащ на своя жребец. За жалост въпреки устрема му, този галоп ще продължи известно време, така че все още нашият каубой денем ще се лута в пуснията, а нощем ще седи край огъня с консерва боб в ръка.

Разбира се, както казах в някои от предишните статии, това че новите технологии все още не са във финалната си фаза, не означава, че не можем да ги ползваме и по този начин да движим целия процес към успешен завършек. Това е причината да пишем втория урок за HTML5. Ако сте пропуснали Основи на HTML5, в който добре е обяснена логиката на новия стандарти и основните тагове, то може да хвърлите едно бързо око.

Но стига толкова общи приказки, представям на вашето внимание, негово величество <video>! В тази статия ще се опитам да подбера и сортирам не само най-важното и ценното за новия таг, но и за това как да си направим базов видеоплейър с HTML5. Естествено всичко това ще го представя по колкото се може по-разбираем начин.

научи повече...

  • Facebook
  • Twitter
  • Digg

FridayCode Форум!

Здравейте! Предполагам тези дни, някои от вас са изпитвали затруднения с достъпа до сайта. Причината да сложим този симпатичен пейдж, известяващ скорошното ни завръщане е, че дойде време за промени. Teзи промени ще се случват на етапи и се надяваме отново да отнемат само ден за интеграция.

Първата новина е, че вече сме на нов хостинг. Да чукнем на дърво никога не сме имали проблеми с него, така че смяната не е в резултат на кофти ъптайм, а чисто и просто за удобство.

Втората добра новина е, че ъпгрейднахме към WordPress 3.0. Няма как, трябва да сме последния писък на модата. Не знам дали се забелязва, но сайтът работи една идея по-бързо.

На последно място е най-важната промяна или по-точно добавка към нашия сайт - форумът. От край време сайтът се активизира, събра редовни посетители и нашите статии започнаха да се появяват насам-натам. Разбира се, дискусията не винаги бива свързана конкретно с тях и ето защо решихме да създадем място, в което всеки спокойно ще може да коментира, да пита, да получава отговори и т.н. За момента празничкият форум вероятно няма да е много активен, но се надяваме с ваша помощ това да се промени. Все пак хубавите работи стават бавно, а ние няма за къде да бързаме. Разбира се, не искаме това нововъведение по някакъв начин да повлияе на коментарите под статиите, тъй като те са най-ценни за всички именно там. Форумът 100% ще претърпи някои промени, но какви ще бъдат те зависи от вас. Ако имате предложения, съвети или критики, може да ги отправите тук. Подготвяме няколко изненади свързани с него, но те ще ви станат ясни, след като се популяризира.

Като цяло гледаме напред в бъдещето и искрено ви благодарим за подкрепата, която оказвате вече няколко месеца!

  • Facebook
  • Twitter
  • Digg
  • Страница 1 от 4
  • 1
  • 2
  • 3
  • 4
  • >