С пускането си 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

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

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

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

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

  • Facebook
  • Twitter

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

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

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

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

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

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

  • Facebook
  • Twitter

Основи на HTML 5

От доста време се говори, че HTML 5 е следващата важна стъпка в уеб пространството. Все пак не можем да пренебрегнем и твърденията, че много малко сайтове го използват и плюсовете и минусите му остават до голяма степен неизследвани. Причината за това може би е, че повечето браузъри не поддържат новите структурни елементи, но по-голямата част от тях биха приели нормално всеки елемент/маркер, който създадете. Дори и IE 6 може да се справи с новите елементи, но ако искаме да прилагаме стилове чрез CSS, ще ни е нужна малко JavaScript помощ.

Единственото нещо, което трябва да имаме предвид, когато прилагаме стилове на новите елементи (тагове) е, че браузърите, за които те са неизвестни по подразбиране ги интерпретират като инлайн елементи. И тъй като повечето от новите HTML 5 елементи са от структурен характер, при всички положения ние ще искаме да се държат, като блокови елементи.

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

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

Content Switcher без JavaScript

Наскоро, докато писах Как да си направим Slider или Carousel с jQuery си припомних как се правеше подобен Content Switcher, преди да почна да се занимавам с JavaScript. В днешно време сайт без JavaScript е почти немислим заради всичката динамика от която се нуждае потребителя. Въпреки всичко обаче все още се срещат сайтове които са чисто информативни и които в самия си front-end нямат и ред JavaScript.

И защо един такъв сайт да няма приличен Content Switcher?

Content Switcher без JavaScript

И така, нека започнем!
Както обикновено първо да напишем малко HTML. За този пример съм използвал XHTML 1.0 Strict, но вие може да използвате Transitional.

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

  • Facebook
  • Twitter

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

Предполагам доста от вас ползват поне един от таговете <b>, <i>, <strong> и <em>, но е напълно възможно никога да не са се замисляли каква точно е разликата между тях. На пръв поглед, визуално тя е нулева - <b> и <strong> правят текста bold (удебелен), а <i> и <em> го правят italic (курсивен). Всъщност между тях има огромна разлика и точно за нея ще си поговорим в следващите редове.

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

  • Facebook
  • Twitter

Дали за удобство, дали за красота или просто, защото някой иска да покаже какво може, използването на табовете е доста разпространено напоследък. В този урок ще се опитам да ви покажа един от най-лесните начини за направата на такива табове с няколко реда xHTML, CSS и малко JavaScript. Надявам се техниката да е полезна не само за начинаещи, но и за напреднали.

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

  • Facebook
  • Twitter

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

На повечето от вас е ясно, че за да центрираме един елемент по хоризонтала (било то div, span, a, ul и пр.) е необходимо да му задаем ширина и margin: 0 auto. В някои по-специални ситуации, наложени от по-специални браузъри, трябва да добавим text-align: center и така нещата се получават, но в 99% от случаите ви е необходимо само margin: 0 auto. По-интересното е как да центрирате елемента по вертикалата, така че да стои винаги в средата на браузъра (или родителския елемент, ако пожелаете). Основният проблем идва от различните резолюции, на които се гледа сайтът. Точно за това ни трябва нещо универсално, което не е свързано с условности и изчисляване на безкрайни комбинации.

За примера днес ще направим нещо съвсем простичко, за да ви стане напълно ясно за какво говоря. Ще използваме един div, който ще центрираме спрямо екрана. Няма да пишем никакъв javascript. Изображения също не съм ползвал, тъй като, както казах се стремя да е максимално опростено.

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

  • Facebook
  • Twitter