Емо Соколов

Аз лично, не пишех CSS до скоро, но сега се налага. За това, спокойно мога да се определя като начинаещ. Съвсем начинаещ. В момента, всеки път, когато ми се налага да направя нещо ново свързано с CSS, откривам по една купчина неща, които улесняват живота ми в последствие .
Има някои полезни неща, които научих от уроци из нет-а или от приятели програмисти (Валери Бучински), и които искам да споделя тук, за останалите прохождащи в писането на CSS. Ето някои от тях:

1. Задайте размера на текста , без да използвате пиксели

Ако се чудите, как някои уеб дизайнери, успешно прилагат em като мярка вместо пиксели, не се чудете повече а продължете да четете. Има един начин да ресетнете размерите на фонтовете за целия сайт, в който случай ще се получи, че 1.0em се равнява на 10px.
body { font-size: 62.5% } Просто добавете font-size: 62.5% в body стила и сте готови. Сега като размер можете да използвате em-ове (хаха) като размер, вместо пиксели. Ето например как изглежда един параграф използвайки em:
p { font-size: 1.3em; line-height: 1.2em; } Може би вече сте си задали въпроса, защо пък да има значение, по какъв начин декларирам размера на фонтовете в сайта ми (даге)?. „Достъпен за всички възрасти“ или по-просто казано, за да направите сайта си, удобен за максимална част от аудиоторията ви. Объркахте се още повече ? :) хехе и аз така, тоя не можа да го напише с малко побългарени примери :) Идеята е, че сайта трябва да остане четлив, когато се използва вграденото в повечето браузери увеличаване на сайта. Възрастните хора или хората с нарушено зрение, често използват тази функция и ако сте сложили абсолютни стойности на шрифтовете, крайния резултат ще бъде неадекватно изглеждащи текстове (Това си е малко преувеличено, но съм съгласен , че ем вече се е наложило като стандарт в задаването на големината на текстовете в CSS за това и включих това във статията ми).

2. Направете кода си лесен за четене.

Когато съм се натъквал последните месеци на CSS, писан от някой от колегите ми, винаги ми е правило впечатление, как приятно за окото си разделят heading таговете (и не само тях разбира се, но с това ще дам пример). Мисля че изглеждаше такa:
h1 {}
    h1#logo { font-size: 2em; color: #000; }
h2 {}
    h2.title { font-size: 1.8em; font-weight: normal; }Това се е много удобно, ако искате бързо да намерите точно този heading , който ви трябва точно сега, на момента, без да се налага да изчетете половината си CSS. Също така, е полезно, и ако работите върху по-голям проект, където използвате един и същ heading таг (да кажем h2) на много места в сайта, защото както знаем (или не!), можем да му даваме различни стойности в отделните класове, всеки път, когото го използваме, без да се притесняваме, че ще вземе стойности от първоначалното му деклариране. Аз лично използвам такова подреждане и за параграф таговете, Anchor таговете и всички останали тагове, които изискват различни класове, за да изглеждат както трябва във даден случай.

3.Подреждайте кода си на секции

Аз до скоро не го правех. И много други програмисти уеб дизайнери също не го правят. Защо? Мм… ми честно казано незнам., но е факт, че ако искаме да редактираме някакъв код след няколко месеца или години, ще бъде много, ама много по-лесно да намирате класове и елементи, които искате да редактирате в същия този код.
Ето как аз структорирам моя код:
/* Structure */Тук слагам основните дивове и класове
/* Typography */Тук описвам параграфите, Headings и другите дребни неща свързани с форматирането на текста, като strong, code и други.
/* Links */Това си говори само за себе си ( не, че другите не го правят де, но това си е класика ). Тук слагам всички anchor тагове.
/* Lists, images, etc. */ Тук слагам стиловете за картинки, списъци и всички останали елементи които не се вписват в останалите секции. Ако например обаче имам неподреден списък за менюто на сайта ми, ще си направя съвсем нова секция (/* Navigation*/ примерно) и ще сложа всички елементи, които са свързани по някакъв начин с тази част от кода в нея. По този начин ако след време ми се наложи да преправя само навигацията на сайта ми, ще ми бъде много по-лесно да го направя.

4. Не използвайте div-вове за щяло и нещяло

Аз лично, нямам нищо против използването на повече div елементи, но само, когато е обоснована нуждата от такива. Всеки път ми идва да се напия, да си разкъсам ризата и да се махна от тоя живот, когато видя някой, който задава стил на заглавиятa на своите статии, използвайки div елемент. Опитвайте се, когато е възможно, да изпозвате по често span или някакъв друг подходящ за случая елемент примерно, вместо div. Не бързайте, просто обмисляйте всяко свое действие. Това може да ви донесе само плюсове.

5. Задайте стил само веднъж

Не че много се замислям по принцип, но напоследък забелязах, че пиша „margin:0; padding:0″ във почти всеки елемент. Наскоро открих как колегата ми Елин е разрешил този си проблем, използвайки *, за да зададе дадена стойност, на всички елементи по страницата наведнъж. Първото нещо което ми дойде на ум, беше, че е безсмислено да пиша margin и pading с едни и същи параметри във всеки таг, след като мога да ги задам за всички тагове, само веднъж:
* { margin: 0; padding: 0; } Сега вече използвам margin и padding, само в случаите, когато се налага .
Надявам се, че съм бил полезен за някой.

За никого не е тайна, че използването на CSS за прозрачност на картинки, е едно от нещата, което не се възприема по един и същ начин от различните браузери. За да успеете да го направите съвмeстимо с всички браузери, трябва да използвате специфични за тези браузери CSS атрибути. За щастие, те не си пречат помежду си, и за това могат да се сложат под един калпак, и така използвайки един и същ клас, когато искате да добавите прозрачност, ще сте сигурни че работи под всички браузери. Ето един примерен клас със прозрачност зададена за 70%:

А ето и, за какво точно, са тези CSS атрибути:

• opacity: 0.7; Това е „На-важния“ атрибут, защото това е CSS стандарта в момента. Използвайки този атрибут, прозрачноста, ще „работи“ при почти всички версии на Firefox, Safari, и Opera. По-принцип, това щеше да е всичко, от което, ще имате нужда при използване на прозрачност с CSS, но само ако всички браузери поддържаха текущия стандарт. За съжелние това не е така в момента, точно за това е и тази статия :)
• filter:alpha(opacity=70); Единствено по този начин, можете да накарате „Негово Нищожество“ Internet Explorer да ви послуша.
• -moz-opacity:0.7; Този атрибут ви трябва, за да подържате наистина старите браузери от семейството на Mozzila (Netscape Navigator).
• -khtml-opacity: 0.7; А това е за също много стара версия на Safari (1.x)

И не на последно място, искам да препоръчам на всички, никога да не използват прозрачност, директно на картинката, а да сложат класа в див-а, който съдържа картинката. Всичко това е за съвместим и оптимизиран код :)

Ето няколко причини които да ви помогнат да решите дали искате да използвате Google’s Webmaster tools или не:

1. Карта на сайта

Sitemap е много добър инструмент, чрез който можете да кажете на Google, кои точно страници на вашият сайт искате да бъдат индексирани. По-принцип, Google ще индексира целия сайт, независимо дали имате Sitemap или нямате, но с този инструмент, ще насочите Google да индексира точно тези страници, които вие желаете. Можете да изключите някоя и друга страница ако искате, но по-добре да използвате генератор за XML форматиран Sitemap файл.Ето няколко генератора:

• DMXZone предлага разширение за Dreamweaver, което ще генерира карта на сайта в коректният формат – www.dmxzone.com
• Google предлага дълъг списък тук – code.google.com

2. Анализ на съдържанието

Едно нещо което Google наистина не обича е повтарящо се съдържание в сайта, и още повече не харесва повтарящи се Titles и Descriptions(Това са най-важните мета тагове). Webmaster Tools ще ви позволи да видите ако наоколо се размотават повтарящи се Titles ili Descriptions. Това е важен инструмент, който ще помогне на сайта ви да не бъде толкова презиран от Google.

3. Диагностика на сканирането на сайта ви от ботовете

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

4. Външни линкове

Чрез този инструмент можете да разберете, колко и кои са линковете, към вашия сайт от други сайтове в инернет пространството. Най-якото в това е , че от дясно, можете да видите всичките линкове като бройка.
(Бележка: Това не означава, че ще ви бъде показано всяко едно споменаване сайта ви, а само местата където потребителя може да кликне на линк който води до вашият сайт).  Най-общо казано, колкото повече входящи линкове към сайта си имате, толкова по добре.

5. Geographic Targeting

Това е малко по-сложно и ще засегне по-малък малък брой хора. Една от основните промени на Google в представянето на резултатите при търсене е предварителното филтриране което той прави, когато потърсите нещо. Google филтрира резултата, независино дали искате или не искате.
Пример: Ако направите търсене за дадена тема, и НЕ ИЗБЕРЕТЕ „Страници от България“ примерно, Google въпреки всичко ще се опита да подреди резултатите според местоположението на което той смята че вие се намирате. От друга страна ако изберете опцията „Страници от България“ , ще получите резултати които Goole мисли, че са свързани с България.

Как Google прави това?

Много просто. Google показва страници които са с разширение .bg или страници които са хостнати в България. Ако между другото имате сайт с разширение .com и не е хостнат в България, то той няма да бъде показан в резултатите при търсене с включена опция „Страници от България“. Точно тук идва и ролята на Geographic Target инструмента, чрез който, вие можете да кажете на Google, коя държава е конкретната цел на вашият сайт (Възможно е да се избере само една държава). Има и много други инструменти включващи ключови думи, фрази и др.

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

Когато започнах със този блог неотдавна, казах, че целта ми е да се получи нещо полезно, нещо което евентуално ще помогне да някого да усъвършенства собствените си проекти по някакъв начин. Почти всеки ден, докато се ровичкам в разни сайтове с подозрително-неопределана цел, често попадам на неща от сорта на “ 50 спиращи дъха уеб дизайна“ или “ 25 невероятни темплейта за WordPress“. Аз, който се изживявам като уеб дизайнер, често губя музата си и се налага да потърся малко вдъхновение тук-там като внимавам да не открадна твърде много от един единствен източник. Винаги съм харесвал постове като тези които споменах, защото всъщност от там са и сайтовете които ме вдъхновяват в трудни моменти. През последната година успях да събера значително количество от сайтове, посветени на тази „вдъхновяваща“ тема, адреси които ми се прииска сега да споделя с потребителите на блога ми ( което в момента включва само мен, но както вече  казах аз също имам нужда от тези сайтове), така че и други хора да се възползват по някакъв начин от колекционерската ми страст. Сега, без повече излишни глупости, тъй като този пост няма нужда от повече контент ето ги и тях,

10-те ми любими сайта, които ми помагат в момент на творческа криза:

• One pixel army
• Designflavr
• CSS zen garden
• Designer source
• CSS beauty
• Smashing magazine
• Web creme
• CSS uber clean
• Beautifully-webdesign
• Screenalicious

И като бонус към 10-те, ето и моят наистина на любим сайт:

• Deviantart

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

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

1 – Заглавие (Title)

Това поле трябва да бъде кратко ( 55-60 символа) и трябва да описва основната тема, предназначението или съдържанието на сайта. Каквото напишете в заглавието (Title tag), това ще се изписва в горния ляв ъгъл на браузера, когато вашият сайт е зареден. Също така, това е текстът, който ще бъде показан в резултатите от търсенето в интернет търсачка.
Важно е да опишете съдържанието са сайта по начин, по който интернет търсачката няма да си направи грешни заключение за съдържанието на сайта, което съответно няма да е в интерес на неговата  популярноста или пък той може въобще да не излиза в резултатите при търсене .

2 – Използване на ключови думи

Използването на ключови думи в съдържанието на сайта е много важно. Причинат аза това е за да може той да бъде по-лесно достъпен за интернет търсачките. Тези ключови думи играят ролята на пътеводител за сканиращите техники (crowlers, spiders) на търсачките, когато ровят из сайта за специфично съдържание. Ако ключовите думи на сайта не са в темата на останалото съдържание , той рискува да получи ниска оценка от интернет търсачките и да бъде изпратен в по-задни позиции в резултатите при търсене или пък да не получи никаква оценка въобще.
Избирането на ключовите думи задължително трябва да бъде свързано със съдържанието на сайта. Също така, намерете време да изследвате популярноста на избраните от вас ключови думи, защото колкото по-популярни са те, толкова повече трафик ще донесат на сайта, а и ще вдигнат популярноста му в интернет .

3 – Баланс на ключовите думи

След като веднъж сте избрали ключовите думи за вашият сайт, трябва да ги използвате в съдържанито по-начин, по-който те ще изглеждат съвсем естествено там. Но във никакъв случай не прекалявайте с изплозването на тези ключови думи или фрази, защото няма да изглежда нормално за потребителите които четът съдържанието на сайта. Това може да рефлектира по най-нежелания начин за сайта спрямо интернет търсачките, като ви донесе наказание за ‘keyword stuffing’ (незнам как да го преведа това) водейки до изпращане на сайта в много по задни позиции при търсене. Най-добре е да балансирате около 2%-3% ключови думи в съдържанието.

4 – Линкове към сайта от други сайтове

Тези линкове, най-общо казано са индикатор за качеството, което съдържанието на вашият сайт може да има за останалите сайтове (тези които слагат линк към вашият сайт). Гледайте на това, като на онлайн лист с препоръки към вашят сайт, по един недвусмислен начин.

Тези връзки, ще се появят с времето или пък, като резултат на определени маркетингови техники, които евентуално ще използвате. Social tagging, article marketing или активно участие във форуми и блогове, ще допренесе до увеличаването на линковете към вашият сайт . Колото повече линкове към вашият сайт имате, толкова по-добра оценка, ще получите от интернет търсачките и съответно прогресивно изкачване в резултатите при търсене.

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

Автор: 4 Key Components to Search Engine Optimization