Уеб дизайн от Станислав Кирилов - Уеб дизайнер на свободна практика http://collapse.bg Уеб дизайн, изработка на уеб сайтове, онлайн магазини, фирмени сайтове и SEO оптимизация. Fri, 25 Jun 2010 16:41:36 +0000 en hourly 1 http://wordpress.org/?v=3.0 portfolio: Elegane http://collapse.bg/%d0%bf%d0%be%d1%80%d1%82%d1%84%d0%be%d0%bb%d0%b8%d0%be/portfolio-elegane/ http://collapse.bg/%d0%bf%d0%be%d1%80%d1%82%d1%84%d0%be%d0%bb%d0%b8%d0%be/portfolio-elegane/#comments Fri, 25 Jun 2010 16:41:20 +0000 Станислав http://collapse.bg/?p=795 Българска генеалогична федерация

Тип: 4 Colors, 7 Pages Template
Голям размер: виж
Предназначение: ThemeForest, deviantART

]]> http://collapse.bg/%d0%bf%d0%be%d1%80%d1%82%d1%84%d0%be%d0%bb%d0%b8%d0%be/portfolio-elegane/feed/ 0 SEO Оптимизация на уеб страница за търсачки http://collapse.bg/seo/seo-%d0%be%d0%bf%d1%82%d0%b8%d0%bc%d0%b8%d0%b7%d0%b0%d1%86%d0%b8%d1%8f-%d0%bd%d0%b0-%d1%83%d0%b5%d0%b1-%d1%81%d1%82%d1%80%d0%b0%d0%bd%d0%b8%d1%86%d0%b0/ http://collapse.bg/seo/seo-%d0%be%d0%bf%d1%82%d0%b8%d0%bc%d0%b8%d0%b7%d0%b0%d1%86%d0%b8%d1%8f-%d0%bd%d0%b0-%d1%83%d0%b5%d0%b1-%d1%81%d1%82%d1%80%d0%b0%d0%bd%d0%b8%d1%86%d0%b0/#comments Fri, 21 May 2010 15:35:02 +0000 Станислав http://collapse.bg/?p=777 Това е най-краткия, важен и ефикасен урок писан някога за SEO оптимизация (Оптимизиране за търсачки)! Всъщност го получих по мейла от една фирма(HubSpot) но за мен лично описва толкова точно и конкретно нещата, че задължително трябва да бъде прочетен. Много хора дават пари на малки фирмички, занимаващи се със SEO оптимизация за търсачки, а всъщност те не правят нищо по-различно от това, което ще прочетете тук.

1. Намерете ключови думи.

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

2. Сложете ключовите думи в заглавието.

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

3. Сложете ключовите думи в адреса на страницата.

Google и останалите търсачки също така използват и текста в URL адреса на страницата за да определят съдържанието и. Добре би било да използвате ключова дума или фраза в URL адреса на уеб страницата както и в папката/директорията в която се намира самата уеб страница(структурата).

4. Сложете ключовите думи в мета информацията.

Докато мета информацията(описание и ключови думи) не е толкова важно, то също се зачита от търсачките. Възползвайте се от тях като сложите вашата ключова дума(фраза) в тях. Описанието трябва да бъде разбираемо, да се чете добре и да има смисъл и за хората, не само за търсачки. Не прекалявайте с тяхната дължина – малко е повече!

5. Сложете ключовите думи в H1 таг.

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

6. Използвайте ключови думи в съдържанието.

Поставянето на ключовата дума в съдържанието на уеб страницата, показва на търсачките, че в действителност тази страница се отнася за тази ключова дума и трябва да бъде включена в резултатите от търсенето. Чували сме от „експерти“, че трябва да използвате ключовата дума от 4-6 пъти до 10-12 пъти в уеб страницата. Нашият съвет е просто да пишете текста по естествен начин.

7. Следете вашия ранк.

Дайте време на търсачките да направят техните си неща(няколко дни) и продължавате да проверявате вашия ранк и да следите прогреса на страницата си.

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

]]> http://collapse.bg/seo/seo-%d0%be%d0%bf%d1%82%d0%b8%d0%bc%d0%b8%d0%b7%d0%b0%d1%86%d0%b8%d1%8f-%d0%bd%d0%b0-%d1%83%d0%b5%d0%b1-%d1%81%d1%82%d1%80%d0%b0%d0%bd%d0%b8%d1%86%d0%b0/feed/ 3 portfolio: geneology-bg http://collapse.bg/%d0%bf%d0%be%d1%80%d1%82%d1%84%d0%be%d0%bb%d0%b8%d0%be/portfolio-geneology-bg/ http://collapse.bg/%d0%bf%d0%be%d1%80%d1%82%d1%84%d0%be%d0%bb%d0%b8%d0%be/portfolio-geneology-bg/#comments Tue, 18 May 2010 23:56:37 +0000 Станислав http://collapse.bg/?p=775 Българска генеалогична федерация

Клиент: Тодор Радев
Услуги: Дизайн, Markup, Joomla!
Адрес: Genealogy-bg.com

]]> http://collapse.bg/%d0%bf%d0%be%d1%80%d1%82%d1%84%d0%be%d0%bb%d0%b8%d0%be/portfolio-geneology-bg/feed/ 0 portfolio: water folio template http://collapse.bg/%d0%bf%d0%be%d1%80%d1%82%d1%84%d0%be%d0%bb%d0%b8%d0%be/waterfolio-template/ http://collapse.bg/%d0%bf%d0%be%d1%80%d1%82%d1%84%d0%be%d0%bb%d0%b8%d0%be/waterfolio-template/#comments Thu, 13 May 2010 17:44:31 +0000 Станислав http://collapse.bg/?p=771 Water Folio Template

Тип: Web Interface
Голям размер: виж
Предназначение: deviantART

]]> http://collapse.bg/%d0%bf%d0%be%d1%80%d1%82%d1%84%d0%be%d0%bb%d0%b8%d0%be/waterfolio-template/feed/ 0 portfolio: reptiles template http://collapse.bg/%d0%bf%d0%be%d1%80%d1%82%d1%84%d0%be%d0%bb%d0%b8%d0%be/portfolio-reptiles-template/ http://collapse.bg/%d0%bf%d0%be%d1%80%d1%82%d1%84%d0%be%d0%bb%d0%b8%d0%be/portfolio-reptiles-template/#comments Tue, 04 May 2010 13:38:56 +0000 Станислав http://collapse.bg/?p=758 Reptiles Template

Тип: Web Interface
Голям размер: виж
Предназначение: deviantART

]]> http://collapse.bg/%d0%bf%d0%be%d1%80%d1%82%d1%84%d0%be%d0%bb%d0%b8%d0%be/portfolio-reptiles-template/feed/ 0 Нововъведения в Adobe Photoshop CS5 http://collapse.bg/%d1%83%d0%b5%d0%b1-%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd/%d0%bd%d0%be%d0%b2%d0%be%d0%b2%d1%8a%d0%b2%d0%b5%d0%b4%d0%b5%d0%bd%d0%b8%d1%8f-adobe-photoshop-cs5/ http://collapse.bg/%d1%83%d0%b5%d0%b1-%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd/%d0%bd%d0%be%d0%b2%d0%be%d0%b2%d1%8a%d0%b2%d0%b5%d0%b4%d0%b5%d0%bd%d0%b8%d1%8f-adobe-photoshop-cs5/#comments Mon, 03 May 2010 15:18:24 +0000 Станислав http://collapse.bg/?p=718 Едва ли има уеб дизайнер, който не е чувал или не използва Adobe Flash, Fireworks, Dreamweaver, Illustrator или най-малкото Adobe Photoshop. Не може да се говори за уеб дизайн, без да се спомене поне един от тези продукти и едва ли уеб страниците биха изглеждали така, както в момента ако не бяха от Adobe(както и компанията Macromedia, за тези които си я спомнят).
Още средата на миналия месец Adobe направиха онлайн презентация на CS5 и края на месеца (на 30ти Април) продукта бе пуснат официално в продажба. Вече инсталирах пакета и ще се опитам да направя кратък преглед на любимите ми нови, интересни и полезни неща, които видях в Photoshop CS5.

Adobe Photoshop CS5 – Mini Bridge

Mini Bridge – за тези, които обичат да ползват Bridge за да преглеждат файловете си, сега вече могат да го правят директно във Фотошоп, с новия вграден Mini Bridge.

както виждате на скрийншота по-горе, Mini Bridge е като панел и може да бъде сложен навсякъде.

Adobe Photoshop CS5 – HDR Pro

Другото нещо, което бързам да споделя е HDR Pro(high dynamic range) който позволява отново във Фотошоп(тоест mini bridge) да правим обединяваме снимки в HDR. Разбира се това няма толкова общо с работата ни на уеб дизайнери, но на всеки му се е случвало да се налага да обработва снимки и понеже приятелката ми се занимава с фотография, намирам HDR Pro за нещо наистина невероятно.

Adobe Photoshop CS5 – Selection

Следващото невероятно нещо е, новия алгоритъм за селектиране на обект. Често се налага да изрязваме едно нещо и да го пренасяме на друго място, вижте как се работи с Edge Detection:

Adobe Photoshop CS5 – Запълване съдържанието

Edit -> Fill -> Content-Aware. Отново невероятно нововъведение от Adobe. Можете да си изберете някакво изображение, примерно човек на даден фон, да селектирате човека и с помощта на Content-Aware да накарате Фотошоп да пресметне как би изглеждало изображението ако в него не присъства селектирания обект. При ползването на Spot Healing Brust Tool също може да се избере Content-Aware. По-добре е да видите демонстрация, отколкото само обяснение.

Adobe Photoshop CS5 – Рисуване

Точно под добре познатата Brush Tool се намира и новата Mixed Brush Tool, която ни позволява да смесим два или повече цветове. Направо е нещо невероятно, ако нямате таблет, тази нова четка ще ви накара да си купите такъв. Пуснах я и за няколко минути успях да направя нещо толкова невероятно, което не съм предполагал дори че мога ;) Едно малко по-дълго филмче, но си заслужава да се изгледа, просто нещата които могат да се нарисуват с Фотошоп преминават на едно по-високо ниво. Гледайте:

Adobe Photoshop CS5 – Puppet Warp

Мен ако питате, само с помощта на Puppet Warp, може да се направи цяла анимация във Фотошоп. Това е един невероятен инструмент, с помощта на който може да се местят частите на обекти с предварително зададени точки по тях. Отново вижте демонстрацията:

Това е от мен, надявам се да ви е било интересно и полезно, и ако все още не сте се сдобили с новия Photoshop CS5, сега е момента да го направите!

]]> http://collapse.bg/%d1%83%d0%b5%d0%b1-%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd/%d0%bd%d0%be%d0%b2%d0%be%d0%b2%d1%8a%d0%b2%d0%b5%d0%b4%d0%b5%d0%bd%d0%b8%d1%8f-adobe-photoshop-cs5/feed/ 9 portfolio: gsmzamen http://collapse.bg/%d0%bf%d0%be%d1%80%d1%82%d1%84%d0%be%d0%bb%d0%b8%d0%be/portfolio-gsmzamen/ http://collapse.bg/%d0%bf%d0%be%d1%80%d1%82%d1%84%d0%be%d0%bb%d0%b8%d0%be/portfolio-gsmzamen/#comments Mon, 22 Mar 2010 17:58:11 +0000 Станислав http://collapse.bg/?p=674 Онлайн магазин за телефони

Клиент: Дарий Кутелов
Услуги: Дизайн, Markup, Magento
Адрес: GSMzaMen.com

]]> http://collapse.bg/%d0%bf%d0%be%d1%80%d1%82%d1%84%d0%be%d0%bb%d0%b8%d0%be/portfolio-gsmzamen/feed/ 0 portfolio: 31media http://collapse.bg/%d0%bf%d0%be%d1%80%d1%82%d1%84%d0%be%d0%bb%d0%b8%d0%be/portfolio-31media/ http://collapse.bg/%d0%bf%d0%be%d1%80%d1%82%d1%84%d0%be%d0%bb%d0%b8%d0%be/portfolio-31media/#comments Wed, 09 Dec 2009 16:44:46 +0000 Станислав http://collapse.bg/?p=672 Фирмен сайт

Клиент: 31 Медия
Услуги: Дизайн, Markup
Адрес: 31media.com

]]> http://collapse.bg/%d0%bf%d0%be%d1%80%d1%82%d1%84%d0%be%d0%bb%d0%b8%d0%be/portfolio-31media/feed/ 0 portfolio: buylaptop.bg http://collapse.bg/%d0%bf%d0%be%d1%80%d1%82%d1%84%d0%be%d0%bb%d0%b8%d0%be/portfolio-buylaptop-bg/ http://collapse.bg/%d0%bf%d0%be%d1%80%d1%82%d1%84%d0%be%d0%bb%d0%b8%d0%be/portfolio-buylaptop-bg/#comments Thu, 03 Dec 2009 10:02:34 +0000 Станислав http://collapse.bg/?p=667 Онлайн магазин за мобилни компютри

Клиент: Пиксел Компютърс ЕООД
Услуги: Дизайн, Markup, Magento
Адрес: buylaptop.bg

]]> http://collapse.bg/%d0%bf%d0%be%d1%80%d1%82%d1%84%d0%be%d0%bb%d0%b8%d0%be/portfolio-buylaptop-bg/feed/ 0 10 задължителни Firefox plugins за уеб дизайнери http://collapse.bg/%d1%83%d0%b5%d0%b1-%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd/10-%d0%b7%d0%b0%d0%b4%d1%8a%d0%bb%d0%b6%d0%b8%d1%82%d0%b5%d0%bb%d0%bd%d0%b8-firefox-plugins-%d0%b7%d0%b0-%d1%83%d0%b5%d0%b1-%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd%d0%b5%d1%80%d0%b8/ http://collapse.bg/%d1%83%d0%b5%d0%b1-%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd/10-%d0%b7%d0%b0%d0%b4%d1%8a%d0%bb%d0%b6%d0%b8%d1%82%d0%b5%d0%bb%d0%bd%d0%b8-firefox-plugins-%d0%b7%d0%b0-%d1%83%d0%b5%d0%b1-%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd%d0%b5%d1%80%d0%b8/#comments Thu, 29 Oct 2009 22:08:11 +0000 Станислав http://collapse.bg/?p=601 Firefox е най-популярния браузър за уеб дизайнерите, не само защото визуализира страниците по начина по който трябва да бъдат, но и защото неговите функционалности лесно могат да бъдат разширени. След като уеб дизайнерите прекарват по-голямата част от ежедневието си пред уеб браузъра, полезно ще бъде да разширят неговите функции и да могат лесно да валидират кода на страницата която пишат само с един клик или лесно да анализират нейното съдържание. Това са 10 от разширенията, които ще ви помогнат по-лесно да се справяте с работата си на уеб дизайнер.

1. Firebug

firebug-scr
Firebug служи за лесно анализиране на страниците, дебъгване на HTML, CSS и JavaScript и тяхното променяне директно в браузъра.

2. Web Developer

webdeveloper-scr
Web Developer добавя допълнителен toolbar в Firefox с множество опции. Едни от любимите ми са, че може да редактирам CSS кода директно в браузъра и да виждам резултата, както и да включа много други допълнителни атрибути.

3. Pixel Perfect

pixelperfect-scr
Pixel Perfec е добавка към Firebug която позволява лесно да се добави нещо най-отпред в сайта.

4. ColorZilla

colorzilla-scr
ColorZilla добавя пипетка към браузъра с която лесно може да изберете който и да било цвят и да вземете неговия код и да го сложите в която и да било друга програма или текстов редактор.

5. YSlow

yslow-scr
YSlow анализира защо дадена уеб страница се зарежда бавно.

6. IE Tab

ietab-scr
IE Tab позволява да видите как се визуализират страниците в Internet Explorer директно в Firefox.

7. MeasureIt

measureit-scr
MeasureIt може да сложи линия за да измерите височината и широчината на който и да е елемент.

8. Window Resizer

windowsresizer-scr
Window Resizer променя размера на браузъра в различни стандартни резолюции.

9. Extended Statusbar

extendedstatusbar-scr
Extended Statusba добавя допълнителна информация в статусбара на Firefox.

10. Live PageRank

livepagerank-scr
Live PageRank показва ранка на текущо заредената страница в Google.

]]> http://collapse.bg/%d1%83%d0%b5%d0%b1-%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd/10-%d0%b7%d0%b0%d0%b4%d1%8a%d0%bb%d0%b6%d0%b8%d1%82%d0%b5%d0%bb%d0%bd%d0%b8-firefox-plugins-%d0%b7%d0%b0-%d1%83%d0%b5%d0%b1-%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd%d0%b5%d1%80%d0%b8/feed/ 8