СПОДЕЛИ

Просечниот посетител можеби нема да ги забележи во завршениот продукт, но за еден веб програмер, овие мали делови на HTML и CSS код се се што го сочинува финалниот приказ. HTML5 и CSS3 обезбедуваат дури и повеќе алатки со кои програмерот и дизајнерот може да се изразат себе си. Еве краток преглед на некои од алатките со кои може да креирате врвни веб страници.

Таг за навигација

Ова е дел од HTML5 кој често се превидува. На кратко, секогаш мора да се обидете да употребувате соодветни линкови во таговите за навигација (“<nav>”). Навигацијата доаѓа во сопствен елемент,  особено ако ги земате во предвид SEO изгледите на вашата веб страница.

navSEO (оптимизација на пребарувач) се однесува на можноста вашата веб страница да се најде на листите на најпознатите пребарувачи, особено Google. Колку повисоко вашата страница се покажува на листата, толку е поголема веројатноста да добиете повеќе online посети, а со тоа и да очекувате поголем обем на работа.

Google ги прелистува внатрешните линкови за да открие по кои прашалници за пребарување треба да ве најде. Линковите во вашата навигација се одлична индикација за пребарувачите на веб, а употребувајќи таг за навигација вие експлицитно ги посочувате  најважните линкови на вашата веб страница и им помагате да разберат за што впрочем е таа. Не значи дека ќе бидете казнети доколку не го употребувате тагот за навигација, меѓутоа вашата задача како дизајнер, покрај се останато, е да ги направите сите напори за да им помогнете на веб пребарувачите.

Заглавје и Подножје

Овие тагови се многу едноставни, но имаат важна цел. Заглавјата и подножјата (“<header>” и “<footer>”) одлично работат со SEO. Таговите ги одвојуваат заглавјето и подножјето од главната содржина.

headerfooterОвие два тага многу се разликуваат од  <div> тагот, бидејќи самиот факт што се означени како различни им помага на  пребарувачите да направат разликува помеѓу информациите во нив и остатокот од содржината и според тоа да ја рангираат вашата веб страница.

Тагови за видео, аудио и излез (output)

Мултимедиата станува се попопуларна кај корисниците, а со тоа деновите кога информациите можеа да се добијат исклучиво во форма на текст се минато. Таговите за видео ( “<video>”) и аудио (“<audio>”) лесно се имплементираат. Дополнително HTML5 ви дозволува целосна прилагодливост со JavaScript и најразличните кодери, со што многу лесно може да направите целата содржина да функционира на начин кој вам ви е потребен.

videoСлично како и со претходните два тага, HTML5 го искористува и тагот за излез (“<output>”) за да ви овозможи поголеми можности за прилагодување. Со  излез во JavaScript, може полесно да ги уредувате и менувате сите JavaScript елементи на вашата страница без истото да мора да го правите преку HTML. Едноставно е и го олеснува целиот процес.

audio

Таг за напис (текст)

Ако сакате да ги привлечете сите различни типови на клиенти тогаш мора да им понудите можност на корисниците да го изберат начинот на кој ќе ја конзумираат вашата содржина.  За сите оние кои сакаат добри текстови, сервирајте им ја содржината во тагот за напис (“<article>”).

Програмерите може да го употребуваат овој таг за да означат индивидуални парчиња содржина како пост на блог и воедно да го намалат бројот на div тагови во својот код. Одделувањето на текстот на веб страницата кој доаѓа по заглавјето, а пред подножје со таг за напис обезбедува почист код и оптимизација за пребарувачите.

Овој таг е најверојатно и еден од најкорисните во однос на SEO. Иако се уште не е правило, сепак се очекува пребарувачите на веб да ги употребуваат овие тагови за да ја разберат содржината на вашата страница и според тоа да ја обработат во алгоритамот. Google сака содржина, па со тагот за напис вие му давате до знаење дека на вашата страница има содржина, а со тоа си обезбедувате и повисоко рангирање. Ако ставите текст со клучен збор во овој таг, тој ќе тежи повеќе од клучните зборови надвор од тагот, бидејќи со тоа им кажувате на пребарувачите дека имате напишано одредена содржина за тој збор на пребарување. Дополнително може да го подобрите вашето SEO додавајќи атрибут за име (“<title>”).

articleТаг за канвас

Тагот за канвас (“<canvas>”) е модернизирана опција на HTML 5 и истиот го употребувате за да вметнете различни графики. Ви обезбедува поголема прилагодливост во дизајнот бидејќи може да ставите специфични тагови на местата со графики, слики и дијаграми и да добиете почист дизајн и порастеретен код.

canvasТаг за слика и таг за опис на слика

Овие два тага одат рака под рака и го скратуваат долгиот процес.Со тагот за слика (“<figure>”)  вие може да изолирате графика или слика, додека пак со тагот за опис на слика (“<figcaption>”) обезбедувате информативен текст за одредената слика. Со ова се олеснува процесот на комбинирање на релевантен текст со слика, бидејќи таговите за опис одредуваат каде треба да биде текстот (во близина на сликата, се разбира)

figandfigcaptionОвие тагови, за исти цели, може да се употребат во заглавја, подножја, написи и секции.

Таг за детали

Доколку сеуште не сте чуле за ова, станува збор за нова опција која се почесто се употребува. На кратко, тагот за детали (“<details>”) ви дозволува да вклучите паѓачки текст.

Паѓачкиот текст нуди многу предности. Прво, ги растеретува страниците, па може да ги задржите само релевантните информации на страницата. Второ, може да видите колку корисници барале повеќе информации преку  JavaScript и според тие податоци да го прилагодите вашиот план за маркетинг.

Искористување на CSS3

Каскадните листи со стилови (Cascading Style Sheets) или CSS, е јазик со листи на стилови кој може да се употреби заедно со HTML5. Светскиот веб конзорциум W3c, организацијата која ги ратификува најдобрите кодови, во моментов го употребува CSS2. Последната стабилна состојба во нивниот развој беше во 2010. Во моментов тие работат на одобрување на CSS3, а некои од неговите модули се веќе добро прифатени.

CSS3 ви дозволува да се фокусирате повеќе на презентациската страна на вашата веб страница, оставајќи му ја основната структура на HTML5. Со него ги добивате најновите подобрувања на опциите за фонт, боја, позадина и рабови.

Меѓутоа, мора да имаме на ум дека прелистувачите сеуште не се компатибилни со CSS3. Некои од нив функционираат со одредени модули, а некои не. На пример, Firefox во моментов не поддржува рефлексија, а од друга страна пак, Safari и Chrome ја поддржуваат, но не поддржуваат друг модул.

На дното од листата за поддршка е Internet Explorer, бидејќи кај него функционира само мал дел од модулите, иако во последните верзии се гледа напредок. Еве детална табела за поддршката на прелистувачите за новите модули на  CSS3.

Селектор на псеудо-класи и селектор на атрибути

Селекторите на псеудо-класи може да се употребат за да додадат повеќе информации за карактеристиките во таговите и разделувањата. Тие се лесно препознатливи бидејќи пред нив секогаш стои знакот за набројување – две точки (:).  На пример, ховер е селектор со кој може да додадете прикажување на текст само кога со глувчето ќе се помине врз одреден таг.

Во CSS3, може да дефинирате матичен елемент во документот со ( “:root:”). Во HTML, ова отсекогаш било “<html>” меѓутоа во CSS3 оваа опција е многу поразвиена. Дополнителните селектори за класи дозволуваат поголема контрола на совпаѓање помеѓу елементите од ист родител елемент. Сето ова доаѓа во комбинација со поголема флексибилност, која обезбедува подобри функции помеѓу поврзаните елементи. Целиот процес станува поинтуитивен и поповрзан од внатре, а резултатот е импресивен.

psuedoselector1-600x211psuedoselector2Слично на она погоре, новите селектори на атрибути ви даваат поголема контрола врз различните посебности на вашите елементи. Може да побарате совпаѓања со други елементи или да доделите атрибути  за да го креирате овој ефект. Ова е форматот за селектирање на атрибути: “element[att^=val]”

Вистински пример би изгледал вака:

attributeselector1attributeselector2Овој селектор го наоѓа секој пасус (“<p>”) со атрибут име (“<title>”) кој почнува со (“^”) SEO (“”SEO””) и ја менува бојата на текстот во сина (“color:blue;”)

Селектори за совпаѓање на атрибути по низи

Моќта на  CSS3 е во овие атрибути. Селекторот за совпаѓањето на низата со која почнува атрибутот (“^”) или “почнува со” селектор, селекторот за совпаѓање според низата со која завршува (“$”)  или “завршува со” селектор и селекторот за совпаѓање на низа која ја содржи (“*”) или “содржи” селектор ви помагаат дополнително да го стесните изборот на атрибути на кои сакате да им нанесете стил.

attributeselector3

Ти се допадна овој напис?
Се согласувам моите податоци да бидат префлени на MailChimp ( повеќе информации )
Стани член на клубот на веб професионалци Еверест и прв добивај информации кои можат да ти помогнат за твојот натамошен професионален развој.
И ние како и ти ги мразиме спамерите. Твојата email адреса никогаш нема да биде (про)дадена некому. Чесен збор.