С пускането си Firefox 4 и Internet Explorer 9 определено раздвижиха пазара и вече няма оправдание да не се използват активно HTML5 и CSS3, като, разбира се не забравяме съвсем и потребителите с по-стари браузъри. За това реших в този урок да поговорим предимно за section-елементите (някой да се сеща за по-добро име?), които ни предоставя новият стандарт.

Преди време бяхме пуснали статия за основите на HTML5, която няма да е зле да прочетете преди тази. Някои от нещата ще ги повторя и тук, но все пак е хубаво да се запознаете малко повече.

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

  • Facebook
  • Twitter

Що е то DOCTYPE?

Знам, че на някои хора тази тема може да им се стори смешна за разискване, но като се замисля, напоследък малко пренебрегнахме уроците за начинаещи. Последните няколко статии първо, че са доста дълги и второ, че са насочени към по-опитните потребители. Днес обаче ще направим обратен завой към статия за абсолютно начинаещи и ще поговорим за това какво е то DOCTYPE.

Това разбира се не означава, че трябва да отбягвате статията, защото съм сигурен, че и по-опитните от вас не са на 100% сигурни за някои особености около DOCTYPE, поради простата причина, че понякога от знание се пренебрегват елементарните неща. Статията не е дълга, а е интересна и пълна с примери, така че я препоръчвам на "малки и големи".

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

  • Facebook
  • Twitter

HTML5 Canvas

Елементът canvas, за който ще говорим днес, е част от навлизащия HTML5 и рано или късно масовата му употреба ще стане факт. С днешния урок ще се опитам да ви въведа в основите му, за да разберете всъщност колко универсален може да бъде той. Честно казано заявката за тази статия дойде от нашия редовен читател Digital и се надявам тя да оправдае очакванията му.

Какво представлява canvas на практика? Думата в директен превод от английски означава "платно", "платно за рисуване". Само по себе си платното е място, на което художникът вдъхва живот на идеите си, като единственото ограничение е фантазията. Платно може да бъде всичко - лист хартия, стена, улица или екранът ви на Photoshop. В случая платното е HTML5 елемент, който ви оставя свободата да изпълните белите му пространства с вашите идеи. Повярвайте, ще успеете да реализирате повечето от тях, тъй като canvas притежава богато API и все пак главното му предназначение е да рисува. По-надолу ще дам няколко основни примера, за да се запознаете по-добре с възможностите му.

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

  • Facebook
  • Twitter

В днешния, на пръв поглед лесен урок, ще разгледаме техника, от която все още доста хора се боят (и с право). Обикновено причината за това са лошите отношения между CSS3 и IE x.x заедно с нестихващата му популярност. Но всички знаем, че с навлизането на CSS3 стана модерно повечето елементи в дизайна да са облички, независимо дали има нужда. В такъв случай как би се вписала ръбата таблица във вашия "гладък" дизайн? Неееее... абсурд, няма да се излагаме я. За това със следващите редове ще разгледаме един от вариантите за заобляне на ъглите й.

В случая аз съм избрал варианта, в който ползваме само CSS и никакъв JS. Той ни предоставя доста добър резултат под всички браузъри, с изключение на IE. Там таблицата ще изглежда съвсем стандартно, но като се има предвид, че вероятно сте ползвали CSS3 и на други елементи в дизайна ви, то това едва ли би било проблем. Универсално решение е използването на JS, като например jQuery Corner плъгина или нещо собственоръчно написано. Естествено не това е целта на урока, напротив - както винаги ние ще се опитаме да направим нещата по най-лесния начин и по-важното - ще вземем поука за какво още би ни била полезна тази техника. Приятно четене!

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

  • Facebook
  • Twitter

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

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

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

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

  • Facebook
  • Twitter

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

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

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

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

  • Facebook
  • Twitter

Диаграми с CSS3

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

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

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

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

  • Facebook
  • Twitter

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

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

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

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

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

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

  • Facebook
  • Twitter

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

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

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

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

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