Мисля, че тази фраза е известна на изключително голям кръг от хора, но има една много малка и важна подробност. Правилното изображение е равно на 1000 правилни думи. В нашето все по забързано ежедневие нямаме право да кажем на посетителите си 1000 грешни думи, нали?

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

Stock Podium. Сайт за миро-сток фотографии и илюстрации.

Мисля да разделя това представяне на две част от една страна ще разгледаме сайта като дизайн и архитектура, а от друга страна като функционално и потребителско преживяване.

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

Дизайн и архитектура.

Още със зареждане на първа страница попадаме на голям и функционален хедър, което аз лично страшно много харесвам и използвам в моите проекти. Големия и функционален хедър има за цел да реши няколко основни проблема за всеки уеб сайт. Първо да покаже на всеки нов посетител бързо и без съмнение за както става дума в дадения проект или казано по друг начин да отговори на простия потребителски въпрос: “За какво е този сайт?”. Също така решава проблема с привличане на вниманието върху себе си.

Голяма търсачка в центъра на изображението дава бърз и лесен достъп по основната функция на сайта, а именно търсенето на снимки.

Няколко допълнителни и взаимно свързани с основната снимка разширяват вариантите потребителя бързо да си избере, ако това, което вижда, е това от което има нужда. Добре са реализирани белите бордери на снимките под търсачката, които създават вид на рамкирани снимки.Чрез CSS3 технология е постигната ротация, която се коригира, при минаване с мишката.

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

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

Като цяло дизайна е семпъл и фокусиран върху бързото намиране на това което търсим. Има добра йерархия, четимост и визуален фокус, а големите call-2-action бутони дават визуална насока за бързо търсене и закупуване на снимките, което е и основната цел на този сайт.

Функционалност и потребителско преживяване.

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

Както споменах по-горе добре отделение функционални (call-2-action) бутони много бързо ме ориентираха как мога да се регистрирам. Регистрацията е бърза и лесна, двете най-важни определения за регистрационна форма.

Търсенето е лесно и бързо, снимките се сортират и филтрират много лесно. Харесват ми филтрите за ориентираност на снимката. За мен като уеб дизайнер е голямо улеснение това, защото често ми се налага да търся снимки с конкретна ориентираност (холизонтална, вертикална и т.н. )

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

За повечето колеги, които изработват уеб сайтове искам да дам пример как основната функционалност на този сайт, а именно търсенето на подобни снимки по примерна снимка, може да им спести много време и нерви.

Този пример разработих конкретно за това представяне.

Да кажем, че правите уеб сайт на фирма, чиито корпоративни цветове са черно, сиво и синьо. Фирмата се занимава със продажба не едно на спорни стоки и в процеса на уточнение от какво има нужда клиента, той ви е предоставил примерни снимки на това как си представя сайта. Сега, би било идеално, ако можете да ползвате снимките, които са ви дали, но за съжаление не можете, защото нямате права върху тях.

Тук на по помощ идва сканиращият софтуер на Stock Podium. . Просто вземате снимката качвате я в сайта и системата ви вади подобни резултати.

В моя пример използвам следната примерна фотография, която свалих от google images.

Аз имам нужда от няколко подобни фотография, които да използвам, за да подсиля написания текст на страницата с предлаганите от фирмата услуги.

Качваме снимката и резултатите излизат. След един бърз филтър и преглед на 4-5 страници намирам достатъчно снимки, които ще ми свършат идеална работа. Цената им за интернет размери (400х336/72dpi) е само един кредит, което е средно 1.46 лв. За съответната страница ми трябват 3 снимки, което е по-малко от 5лв. като стойност.

Въпреки, че не е 100% точен алгоритъма дава достатъчно точни резултати, за да мога да намеря снимки много близки до това, което търся.

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

Харесва ми, че софтуера разпознава както цветовете в дадена снимка, така и композициите, лица и други обекти и дава много прилични резултати от търсене.

Също може да ви е полезен, ако правите уеб сайт с по-специфична цветова гама. Това можете да използвате следния трик. Експортвате си дизайна на .jpg файл и го пускате за търсене така ще получите много снимки в цветовата гама на проекта, няколко филтъра след това и сте си решили проблема, какво да се сложи на страницата с контакти или на страницата “За Нас”.

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

Ще се радвам да го разгледате и да споделите вашето мнение и виждане в коментарите по-долу. Надявам се да съм ви бил полезен.

Това е фраза, която колкото по-рано осъзнаете, толкова повече успехи ще имате в бизнесa си.Независимо от естеството му.

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

Когато влезнах видях следното нещо:

Хотел Севтополис

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

Зачетох се. Разгледах снимките и цените … и се оказа, че това е доста луксозен хотел с много услуги, минерални басейни, балнео процедури и дизайнерски обзаведени стаи.

Помислих си, как би трябвало да покажем на хората точно за какво става дума…и ето какво се получи:

Хотел Севтополис

“Луксозните хотели имат нужда от луксозни уеб сайтове!”

Разгледайте целия проект на официалният му адрес: http://www.sevtopolishotel.com

За това и създадох следния уеб дизайн:

Хотел Севтополис

Проектирах го така, че фокуса да падне на няколко основни и йерархично структурирани елемента, а именно:

• Визията на самия хотел – фасадата
• Басейна с минерални води
• Ресторанта
• Стаите

след това основната информация в 4 подточки: хотела, стаите, ресторанта и балнео и спа процедурите.
След, което са подредени видео презентацията и разбира се локацията на самия хотел.

Логиката, която е следвана в информационната структура е:

1. Това е хотел,
2. Той е красив и луксозен,
3. Предлага различни услуги,
4. Намира се там,
5. Запази стая. (бутон на действие)

Вътрешните страници съм проектирал водейки се от следното: Потребителя не обича да чете и да обича, няма време да го прави.

Хотел Севтополис

За това ги проектирах така, че да има много кратък, хващаш вниманието текст с основна снимка, която да кореспондира с него.Галерия със снимки и след това цялата допълнителна информация за по-любопитните.

Хотел Севтополис

Като цяло сайта е много добре зареден с информация. Кратка, ясна и добре структурирана.

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

Разгледайте целия проект на официалният му адрес: http://www.sevtopolishotel.com

Ще се радвам да чуя мненията ви.

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

Използвах три колонен дизайн за картините, за да може посетителя да придобие бързо по-ясна представа за тях. Три колонния дизайн ми разреши да използвам по-големи прегледни на снимките за тази страница.

А прегледа на картините изкарах в отделна страница.

Можете да прегледате целия уеб сайт тук.

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

Ще започна с положителните страни на събитието. Най-големия плюс – ЕДНА ТЕМА. GO MOBILE! Решения за мобилен уеб, апликации, тенденции само в тази сфера. Друг голям плюс беше, по-сериозното присъствие на доказали се чуждестранни лектори.

DesignDay 2011- Ревю

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

Създаде се една много ясна граница (даже болезнено ясна) между българските и чуждестранните лектори, която според мен е ясното отражение на бранша тук и във Великобритания. За какво говоря?

Всички чужденци бяха изключително добре подготвени, със силни, добре оформени и интересни презентации.Личеше си, че са обиграни в изнасянето на техните идеи. Точно така идеи. Всички лекции на Antoni Ribot (@ribot), Giles Colborn (@gilescolborne) u Jason Cale (@jasoncale) предлагаха идеи, вдъхновения и методи за реализирането им.

Даваха примери как са стихнали до дадени решения, защото в мобилния свят (а и не само) “красотата е в простотата” и най-трудно се правят най-семплите сайтове/апликации. Защото, за да можем да предложим на клиента нещо семпло и лесно за употреба, то ние трябва да минем през дълъг процес на работа и вземане на решения, тестове и преработки, докато изчистим всичко до най-малкия детайл. Точно тези процеси бяха презентирани. Честно казано, аз съм изключително доволен от техните 3 лекции. Презентациите им ще са достъпни на официалния сайт на събитието след няколко дни.

Сега нека се върнем на “родна земя”. Честно казано, ще кажа същото, което казах и миналата година. В България няма лектори! Всички бяха там, за да си рекламират мобилните версии на сайтовете им. Колегите от Грабо, дори не си бяха направили труда да си научат презентацията, което за мен е адско неуважение към всички присъстващи. “Да дойдем, само защото са ни поканили да отбием номера”. Слушахме 40 мин реклама на cloud хостинг и 5 мин за възможността да го управляваме от мобилно устройство. Показаха ни мобилната версия на сайта на Нисан, който може и сами да го видим, ако желаем, без дори да споменат как са го реализирали и с какви проблеми са се сблъскали. Просто реклама на сайта на Нисан изнесена от маркетинга на фирмата, която го е направила. Просто от българските лектори не научихме НИЩО, абсолютно НИЩО! Разочароващо.

Ето тук е разликата, за която споменах по-горе. Всички български колеги просто разказваха, какво могат техните сайтове. Какви услуги предлагат. Не се коментираше работния процес, защо тези сайтове са направени. С какво те са по-различни от основния сайт, какви проблеми са имали и съответно как са ги преодолели, за да сме наясно и да внимаваме да не допуснем техните грешки…

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

Ето и малко снимки от събитието:

фото: П. Гайтански/ Г. Ангелов.

Ако искате да свалите презентациите на тримата лектори от Англия, можете да го направите от тук:

Giles Colborne – Sample & Usable
Antony Ribot – Inclusive Design
Jason Cale – Agile Design

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

Тази година с гордост мога да кажа, че списание .NET ме поканиха за техен дизайн партньор. Какво ще рече това?

Бях натоварен със задачата да разработя цялостна визия, както на уеб сайта, така и за електронния им бюлетин, групата във фейсбук и брандиране на събитието за различни сайтове т.н.

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

Запитах се:” Каква е основната тема на сайта?” – “Go Mobile!”  Фокус на сайтове за мобилни устройства. Не само за телефони, смартфони и т.н. , но и за таблети и всички други преносими устройства, които можете да си закупите сега.

Сайтовете вече не се преглеждат само на компютри, а на все по-голям диапазон от различни преносими устройства с различни характеристики и взаимодействие с ползвателите им.

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

Технически погледнат сайта е базиран на WordPress система, което беше изрично изискване на организаторите от .NET. Аз създадох цялостна тема за WP специлано за самото събитие кръстих я DESIGNDAY 11 – v1 (логично).

Нека кажем и няколко думи за самото събитие.

Не знам дали заради моите коментари и статията, която написах след миналогодишното събитие или по стечение на обстоятелствата, но тази година ще има само една тема МОБИЛЕН УЕБ ДИЗАЙН и всички свързано с него, както предложих миналата година. Това честно казано много ме радва, понеже темата е много актуална, даже за пръв път дискутираме нещо от, което ще имаме нужда, а не нещо, от което вече имаме нужда. Или казано по друг начин изпреварваме (макар и с малко и само за България) събитията.

Ето какво казват и организаторите за самото събитие:

С развитието на технологиите и улесняване на достъпността до мрежата все повече хора ползват интернет през мобилни устройства. Вече всеки сайт е задължително да има мобилна версия. Налага да разработваме и приложения за мобилни устройства.

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

Целта ни отново е да съберем уеб дизайнери и разработчици, маркетолози и интернет предприемачи, за да ви запознаем с най-новото, тенденциите и предизвикателствата в реализацията на уеб проекти за мобилни устройства.

Ще се радвам да чуя коментарите ви и да се срещнем на самото събитие.

Как  ще изглежда уеб сайта ни на екрана на един смарфон, а на друг? Ами на все по-модерните таблети? Като се замислим как  би изглеждал на новите iMac 27″ монитори?

Трябва ли да правим различни версии на дизайна си, за да може винаги да е “скроен” по мярката на резолюцията, която ни посещава или трябва да ползвам java script, за да проверяваме каква резолюция ни посещава и тогава да зареждаме съответния CSS файл?

Отговора е: НЕ!

С навлизането на новите технологии вече разполагаме с интелигентно решение, което ни позволява да създаваме атрактивни и адаптивни уеб сайтове.

В този урок ще разгърна едно модерно и много добро решение за справяне с тази мулти-резюлюционната загадка.

Разработил съм една HTML 5 / CSS 3 страница, която безпроблемно се справя с многото и различни резолюции с помощта на @Media Queries.

Виж ДЕМО \ Свали работните файлове

Оразмерете екрана в различни резолюции, за да видите адаптацията на дизайна или просто заредете тази страница от мобилния си телефон.

Нека започнем със създаването на html 5 структура на сайта.

HTML 5 Структура на уеб сайта.

Стартираме със създаването на една стандартна  и семантична структура на HTML 5:
<header>
<nav>
<article>
<article>
<article>
<aside>
<section>
<section>
<footer>

Забележка: Фокуса на тази статия е върху адаптивния дизайн, за това няма да изпадам в подробности върху HTML 5 кода, ако имате въпроси по тази част от урока пишете коментари.

HTML 5 решения за по-старите браузъри (IE 6/7 )

Важно е да знаете, че HTML 5 синтаксиса не се поддържа от по-старите браузери, за това използваме java script , които ще “помогне” за разчитането им.  Зареждаме html5.js директно от Google.

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

След като сме изградили HTML 5 страницата е време да започнем да изграждаме дизайна и.

CSS

Включваме основния CSS файл с дизайна:

<link href="style.css" rel="stylesheet" type="text/css">

Дизайна е прост, стандартен двуколонен дизайн с обща ширина 980px, основна колона #content  {width:600px; } и лява колона #sidebar {280px;}. Няма да навлизам в повече детайли тук, целия код можете да видите, като свалите работните файлове.

Ако стопирате работата до тук и тествате сайта ще видите, че дизайна не е адаптивен, а при различното оразмеряване на екрана ви се получава стандартен долен скрол.

Сега, нека направим този дизайн да се адаптира правилно към всяка резолюция

@Media Queries

<link href="media-queries.css" rel="stylesheet" type="text/css">

Зареждаме  само @media screen дефинициите за различните резолюции и промените, които трябва да настъпят в зависимост от това каква е резолюцията, която посещава сайта ни.

В CSS файла освен стандартните неща трябва да дефинираме всички HTML 5 елементи като display:block;

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}

Основният синтаксис на използване на @media screen е следния:

@media screen and  (max-width: 600px) {
.class {
Въвеждаме нужните ни изменения в кода;
Например: width:50%; padding:0; margin:0;
}
}

По този начин казваме ,че,  ако екрана е ПОД 600px да се чете този CSS, ако екрана е НАД 600 ще се чете основния CSS. Ако искаме правилото да се приложи за НАД определена стойност тогава използваме:

@media screen and (min-width:1382 px) {
.class {
background:#000;
}
}

В конкретния пример съм предвидил 4 различни параметъра:

Резолюция по-голяма от 1680 px за всички с големи монитори.
Резолюция по-малка от 980 px за всички с по-малки от стандартните монитори.
Резолюция по-малка от 650 px за по-модерните мобилни телефони.
Резолюция под 560 px за по-старите  или мобилните телефони с по-малки екрани.

Резолюции над 1680 px

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

@media screen and (min-width: 1680px) {

body {

           font-size:0.9em;
           line-height:1.6em;
}
#main-wapper {

           width:95%;
}

#content {

          width:60%;
}

#sidebar {

         width:40%;
         float:right;
         font-size:120%;
         padding:0;
         margin:0;
}

.video iframe {

         width:853px;
         min-height:510px;

}
}

За резолюциите под 980px

правим дизайна флуиден/ адаптивен.

@media screen and (max-width: 980px) {

#main-wapper {
        width: 95%;
}

#content {
        width: 70%;
}

#sidebar {

      width: 25%;
      float:right;
      padding:0;
      margin:0;

}
#nav {

      position: static;

}
#nav li{

      padding:5px;
      margin-left:2px;

}
#sidebar section {

     padding: 8% 7%;
     margin-bottom: 10px;

}
.video iframe {

     width: 100%;
     height: auto;
     min-height: 300px;
}
}

Тук е важно да сменим позицията на основната навигация на position:static;

Променяме ширините на основните елементи в процентни стойности.

За резолюция по-малка от 650 px

трябва дизайна ми да стане едноколонен, за да запазим лесната четимост и големина на снимките.

@media screen and (max-width: 650px) {
#header {
height: auto;
}
#header h1 {
font-size:24px;
}
#header h2 {
font-size:12px;
letter-spacing:1px;
}

#nav {
position: static;
}
#nav li {
margin-left:5px;
padding:2px;
}
#content {
width: auto;
float: none;
margin: 20px 0;
}

#sidebar {
width: 100%;
margin: 0;
float: none;
}

#sidebar section {
padding: 3% 4%;
margin: 0 0 10px;
}
video embed,
.video object,
.video iframe {
min-height: 250px;
}
}

Тук е важно да сменим позиционирането от float:left към float:none; по този начин правим дизайна едноколонен.

Важно е стойностите да се задават в проценти, за да може да се запази аспекта на дизайна и отстоянията, както са предвидени в дизайна.

Адаптивни размери на снимките

За да направите снимките да се оразмеряват в зависимост от резолюцията на екрана използвайте стандартните дефиниции на класа.Важно е само да се отбележи, че те НЕ работят при IE8 , за това добавяме и  width:auto\9;

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */</code>
}

Адаптивни размери на видеото

В случая аз използвам видео от YouTube.com, като го слагам в страницата посредствмо iframe, но ако ползвате object просто го добавете и него.

video iframe {
width: 100%;
height: auto;
min-height: 300px;
}

Автоматично оразмеряване на текста при мобилните телефони.

Използвайте следния код, за да изключите автоматичното настройване на размера на текста.

html {
-webkit-text-size-adjust: none;
}

Initial Scale Meta Tag

По подразбиране iPhone Safari (а след тестовете забелязах и Opera Mobile 10) оразмеряват уеб сайт, така че да се събере на екрана. Този meta tag казва на браузера да използва ширината на устройството като основна ширина на уеб сайта  и да изключи оразмеряването зададено по подразбиране.

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Сега нека добавим малко стил към адаптивния уеб дизайн.

Вече всичко работи и се адаптира правилно към съответната резолюция, но  за да добавим малко стил към цялата страница със следния код:

#nav, #sidebar, article, h1, img { transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; }

Той ще направи смяната на размерите, цветовете и големината на шрифта по-плавен и приятен за окото.

На практика можете да добавите transition на всеки елемент, важно е, обаче да знаете, че това натоварва процесора и не трябва да се прекалява много с него.

Заключение

Разгледахме как новите технологии ще направят живота ни по-лесен, като премахнат досадните технически ограничения и дадат път на креативността ни.

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

В статията съм ползвал вдъхновение и технически параметри от:

http://webdesignerwall.com/tutorials/css3-media-queries
http://elliotjaystocks.com/blog/css-transitions-media-queries/

Полезни връзки свързани с тази статия.

Повече за специфичните тагове можете да прочетете в блога на Мартин Методиев
http://martinmetodiev.com/my-web/apple-specific-meta-tags/

LESS Framework 4 – Стартирайте лесно вашия адаптивен дизайн
320 and up – Още един framework, с който можете лесно да стартирате адаптивен дизайн

http://www.dotnetperls.com/iphone
http://code.google.com/p/html5shiv/
https://chrome.google.com/webstore/detail/idhfcdbheobinplaamokffboaccidbal

@ 2011 Георги Ангелов

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

Темплейта One

Този уеб сайт е от вида ” One page portfolio” , подходящ за персонални сайтове на графични дизайнери, фотографи, художници, изобщо хора, които създават визуални изкуства. Цялата информация се намира на една страница, като преминаване през различните категории става с приятен и плавен слайд на страницата.

Виж ДЕМО ВЕРСИЯТА

Какво получавате?

Уеб сайта е напълно готов за ползване, кодиран е html/css, само е нужно да сложите вашите снимки и информация и да го качите на сървъра си.

В .zip файла, които ще свалите ще намерите:

• 3 .psd файла – Изключително добре организирани. Работния дизайн на самия проект, Дизайна на всички бутони (със запазени стилове за лесна корекция), както и файл за slideshow на първа страница със запазен маски за лесна и бърза промяна.
• HTML/CSS/JS файлове – Това реално е готовия уеб сайт.
• Лиценз за ползването му – лиценза е напълно свободен. Можете да го прегледате тук.
• Преглед на целия уеб сайта в .jpg

формат.

Помощ от автора

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

Всички файлове са в един .zip архив. Ще се радвам да харесате проекта и да го споделите с всички, които имат нужда от него.

Ако имате други въпроси, използвайте формата за коментари.

Да! Говоря именно за Google Web Font – лабораторията за шрифтове на Google, която до скоро имаше само 3-4 кирилизирани шрифта, сега вече са 15.

В този кратък урок ще ви покажа как да ги използвате, техните предимства и някои недостатъци.

Адреса на шрифтовата лаборатория на Google е : http://www.google.com/webfonts

Заредете адреса, след което изберете от филтъра кирилизирани шрифтове.

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

Инсталиране на кирилизиран шрифт.

Google Web Fonts дава възможността да ползвате шрифта директно от техния сървър, което е изключително удобно, защото не ви се налага да правите никакви настройки, да качвате файлове или каквото и да било, просто копирате следния линк:

<link  href="http://fonts.googleapis.com/css?family=Lobster:regular&subset=cyrillic,latin" rel="stylesheet" type="text/css" >

в тага <head></head> и това е всичко по инсталирането на шрифта.

За по-напредналите разработчици системата позволява голяма свобода, като да импортирате шрифта директно в CSS файла си с функцията @import :

@import url(http://fonts.googleapis.com/css?family=Tenor+Sans&subset=cyrillic,latin);

или директно да се заровите в Java Scripta:
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Tenor Sans' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>

Използване на инсталирания шрифт

След като го инсталирате кирилизирания шрифт се използва както всяка една font-family.

Пример: h1 { font-family: 'Tenor Sans', arial, serif; }

В конкретния пример инсталирах шрифта Lobster, за това и кода, които трябва да въведа в CSS файла си е:
body {
font-family: 'Lobster', serif;
}
можете да променяте настройките от Font Previewer програмата докато стигнете до желания резултат, след което копирайте генерирания код и го поставете в CSS файла си. В повечето случай той изглежда така:

body {
font-family: 'Lobster', serif;
font-size: 36px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;
}

Малък съвет: Използвайте кода, който генерира самият Font Prewiver, защото шрифта изглежда изключително по добре, ако е зададен по начина, по който е генериран. Има огромна разлика в тези шрифтове, ако, например зададете тежестта на шрифта font-weight:bold; и font-weight:800; визуализацията е различна.

Преглед на кирилизиран шрифт. Font Previewer

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

Поиграйте си с настройките докато получите нужния ви резултат. После просто копирайте кода в CSS файла си и сте готови!

Това е.

Важно

Винаги слагайте по един web safe шрифт към фамилията, за да сте 100% сигурни, че всичко ще работи нормално и при по екстремни условия.

Допълнения и разширения.

Уеб сайта дава възможност да свалите файла с кирилизирания шрифт и да го инсталирате на вашия компютър. Така можете да използвате шрифта с PhotoShop докато разработвате самия проект.

Ето и един удобен инструмент, ако ползвате Google Chrome. След като сте реализирали проекта си, но се двоумете между един или няколко шрифта следното малко разширение ще ви е от изключителна полза:

https://chrome.google.com/webstore/detail/engndlnldodigdjamndkplafgmkkencc
Това разширение ви дава възможност да сменяте шрифта на всяка страница с друг от каталога на Google WebFonts.

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

Предимства и недостатъци

Предимствата са много, и очевидни. Свобода, лесно и бързо инсталиране, поддръжка на всички браузъри (което за мен е най-големия плюс) в случая няма да се съобразяваме, дали конкретен браузър поддържа или не @font-face класа.

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

Още статии за кирилизирани шрифтове

10 модерни, безплатни кирилизирани шрифта
Безплатни шрифтове е MyFonts.com

Ново лого

Вече имам и нова версия на логото си. Основната ми идея беше да прилича малко на амбиаграма, защото ми харесва идеята за баланса. Логото е нарисувано от моя колега и приятел Петър Карагяуров.

Обновления по уеб сайта

Уеб сайта вече ще се намира на адрес www.angeloff.net ,а не на /blog както беше преди и без това блога и портфолиото ми са слети от много време, за това реших да е на основния си домейн. Флаш сайта ще си го оставя архивен, все пак толкова години ми е служил няма да го пенсионирам сега .

Angeloff.net v2.1

Пренаписах изцяло темата и обнових wordpress до най-новата версия (благодаря на хакерчето, което ми беше хакнало някакъв експлоит ), но трябва да сме в крак с модата. Включих разумно количество нови технологии, като css3 псевдо-класове, малко транзакции, border-radius и т.н.Направих “пролетно” почистване на портфолиото с уеб сайтове, все пак, кой го интересува какво е правено преди 3 години или пък сайтове, които вече не са активни, сайтове, които не поддържам аз, а някоя секретарка и нямат нищо общо с моята работа. Мисля, че е добре човек да се представя с актуалната си работа. Мислех да направя 1 категория – Архив, но не съм сигурен. Ще се радвам да чуя мнения по този въпрос.Като цяло дизайна не е много променен, но потребителското преживяване е изключително подобрено, типографията също, коригирах йерархията, махнах е всичко излишно, за да може посетителя да се фокусира върху важните неща, а именно последните проекти, които съм реализирал и статиите, които пиша.

Log > Angeloff.net v 2

Angeloff.net/blog v1

Ето я и първата версия на блога от 2006 година.