Какво е Friday Code?

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

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

Оптимизацията не винаги може да бъде на 100%, но с този урок ще се опитам да помогна на "прохождащите" писачи на CSS да изградят навици или просто да си харесат някоя завъртяна техника, с която да оптимизират своя CSS файл. Имайте едно на ум, че всъщност оптимизацията на CSS-а започва още със структурирането на HTML документа!

Ще се опитам да не бъда пристрастен и да сравня плюсовете и минусите на всеки метод, така че да откриете подходящия за вас. Трябва да знаете, че не винаги писането по един и същ начин е най-оптимално и точно поради тази причина е добре да комбинирате техниките за да получите желания резултат. Нека пристъпим към действие!

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

  • Facebook
  • Twitter
  • Digg

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

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

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

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

  • Facebook
  • Twitter
  • Digg

Диаграми с CSS3

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

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

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

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

  • Facebook
  • Twitter
  • Digg

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

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

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

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

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

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

  • Facebook
  • Twitter
  • Digg

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

Вероятно сте обърнали внимание на заглавието и се чудите защо е на английски. Ами това е така поради факта, че този термин е изключително труден за превод и поне аз не успях да се сетя за вариант по-къс от няколко изречения. Ето защо реших да оставя заглавието по този начин, който всъщност намирам за достатъчно разбираем. Но тъй като това е статия насочена към вас читателите, с няколко думи ще се опитам да обясня какво е "scalable full body background".

Предполагам сте виждали сайтове с огромни и сложни бекграунди, които изпълват целия ви екран. За жалост, повечето от тях са оптимизирани за определени резолюции, като веднага мога да дам пример с кофти бекграундите на cinefish.bg, когато правят промоция на филм. Нищо против сайта, просто могат да наблегнат малко повече на изображенията, които заемат голяма част от екрана. Все пак има и друг тип сайтове, които разполагат с бекграунди, оптимизирани за всякакви резолюции. Веднага давам още един български пример с kia.bg. Там използват метод, близък до единия от двата, за които смятам да пиша днес. И ако съм ви грабнал вниманието, четете надолу!

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

  • Facebook
  • Twitter
  • Digg

В наши дни всичко се развива със скорост еквивалентна на тази, с която 5-годишно хлапе разлиства първия си "Плейбой". В това число имам предвид естествено и уеб технологиите. Докато преди няколко месеца или максимум година CSS3 беше мит за повечето от нас, то в наши дни новият стандарт навлиза сериозно в употреба, естествено с леки въздръжки. Всеки професионалист, който пише CSS, би трябвало винаги да е в крак с новостите, за да улеснява това живота му. Точно за това прецених, че за аудиторията ни ще бъде полезно да прочетете нещо за CSS3 на нашите страници. Въпросното "нещо" реших да бъде небезизвестната таб-навигация, защото се среща на доста места и може да намери голямо приложение.

В този урок се опитах да внедря не една, а няколко интересни CSS3 глезотийки, които няма да ви спестят код, но ще елиминират нуждата, както от картинки, така и от javascript за по-обикновените ефекти. Общо взето ще научите как да направите заоблени ъгли, как да сложите сянка на елемент, как да направите градиент и гвоздеят на програмата - как да анимирате. Приятно четене!

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

  • Facebook
  • Twitter
  • Digg

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

Тъй като материята, за която ще поговорим днес има някои особености, аз си позволих да направя два примера, с които да ви илюстрирам по-добре какво имам предвид.

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

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

Ако не съм ви го казвал досега - обичам простичките неща. Защо? Защото, колкото по-просто е направено дадено нещо, то вероятността да се развали/счупи/спре да работи е по-малка. Другата причина е, че обикновено сложните неща са съставени от прости, т.е. за да схванете логиката трябва да се почне от А и Б. Днешният урок е типичен пример за това как с един наглед простичък метод, може да се постигне доста приятен краен резултат.

Както всички добре знаем, без HTML нищо от това, което четете в момена няма да бъде реалност. Всичко от най-семплия до най-препълнения с модерни технологии сайт е зависимо от HTML. "Бащата" на езика, британският физик Тим Бърнърс-Лий, днес е директор на консорциума W3C. По времето, когато е работил в ЦЕРН той е получил задача да улесни работата на своите колеги, като измисли по-лесен начин за достъп и обработка на информацията от провеждащите се научни изследвания. Един вид трябвало им страхотна документация, за да извличат максимума от работата си. Така се ражда и HTML, който първоначално имал доста ограничени възможности, но заради лесната употреба и възможността да бъде четен от множество потребители той свършил прекрасна работа.

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

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

  • Facebook
  • Twitter
  • Digg

В залеза на своето съществуване, Internet Explorer 6 (IE6) все още държи позиции и гордо върви редом до едни от най-популярните браузъри в момента. Краят му не е дошъл още и вероятно това ще стане с излизането на IE9 и следващия Windows. Дотогава обаче, колкото и да го мразим, трябва малко или много да се съобразяваме с него. Това ще бъде един от малкото уроци, посветени изцяло на проблем под IE6, така че може би хората, които зависят от този браузър ще наострят уши.

Всички знаете, че IE6 поддържа псевдо-класа :hover само на <a> елемент, което в доста от случаите е проблем, защото орязва не само визията, но понякога и ползваемостта. Точно за това нашата задача е да намерим най-простото решение.

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

  • Facebook
  • Twitter
  • Digg

Dialog Box с jQuery

В днешния урок ще си поговорим за това как бързо и лесно посредством jQuery да създадем приятнo изглеждаща кутийка, носеща послание до потребителите или иначе казано Dialog Box/Message Box/Modal Box. Не го обвързвам с име, защото по принцип могат да му се намерят много приложения.

За самия урок съм избрал варианта, в който ползваме кутийката като предупреждение за възрастта, т.е. подходяща е за сайтове със съдържание за възрастни. Вие може да решите да я ползвате за нещо съвсем друго, като например банер, логин и т.н.

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

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