webkeepers, создание сайта

webkeepers


WebKeepers

Создание сайта и его продвижение


Epica Awards 2012
webkeepers, создание сайта
webkeepers
После "epic fail" на Webby Awards выдвигаемся на Epica Awards!!! ))

Microsoft обновила логотип!
webkeepers, создание сайта
webkeepers
Мастдайщики решили перелатать свой логотип:


Кока-Кола!
webkeepers, создание сайта
webkeepers
Приступили к работе над проектом для Coca-Cola! Будет жарко))

Дизайн своего собственного блога (руководство для новичков)
webkeepers, создание сайта
webkeepers
Дизайн — это второе по важности условие (после контента) для успешного существования блога. Если вы начнете зарабатывать деньги на блогосфере, хороший веб-дизайн будет приносить только огромную пользу. При этом странно, что многие не уделяют этому должного внимания. Наверное, это происходит из-за того, что не все понимают значение слова «дизайн». Типичное мнение: «Сайт может быть некрасивым, главное — его наполнение». Но ведь и хороший дизайн никогда никому еще не мешал, это как хорошая закуска к напитку! Согласитесь, блог с интересным контентом и хорошим дизайном привлечет больше посетителей, чем просто с интересными постами.

Прежде чем продолжить, нужно разрушить один распространенный миф: дизайн - это не красивенькие финтифлюшки на вашем блоге. Дизайн — это главная часть юзабилити, т.е. та вещь, которая делает блог удобным для посетителей. Возьмем цитату с wikipedia.org: "Дизайн в смысле разумного устройства сайта значительно важнее, чем его визуальная красота".

Ну ладно, приступим... Вот, что нам понадобится: карандаш, бумага и графический редактор (что-нибудь типа Photoshop, Illustrator, Freehand или Gimp).

Начнем со сбора информации. Понятно, что вам хочется сразу открыть графический редактор и начать творить, но это не самое удачное решение. И вы скоро поймете - почему.

Итак, мы будем создавать дизайн для вымышленного блоггера. Предположим, он (назовем его Иваном) будет словоблудить о смартфонах.

Шаг №1: определяем цель блога (Чего вы пытаетесь достичь с его помощью? Как это сделать?)

Будем создавать такой дизайн, который повысит прибыль Ивана. Проще всего сделать гибкий каркас, который позволит экспериментировать с размещением рекламы. Чтобы привлекать больше внимания посетителей, которые попадают на сайт впервые. Сделать блог визуально запоминающимся и дать посетителям больше шансов увидеть такую рекламу, на которую им захочется кликнуть, которая им нужна.

Шаг №2: определяем свою аудиторию (Какова она? Откуда появляется?)

Аудитория блога собирается из двух групп людей: отъявленных "мобильных" маньяков, которые читают Ванькины заметки в поисках новинок в мире смартфонов и прочих событиях тусовки; и обычных людей, которые просто хотят купить смартфон и зашли на сайт узнать мнение экспертов по разным моделям.

Шаг №3: определяем специфические особенности (Какие функции необходимы сайту, чтобы быстрее достичь цели?)

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

Также необходимо повысить «запоминаемость» сайта для посетителей. Для этого создаём список «Любимых сообщений», а внизу каждого сообщения «полезные ссылки».

Не забываем создавать категории для своих сообщений, ведь это позволит пользователям исследовать ваш блог более интуитивно. Ну, а для потерявшихся обязательно нужен поиск, особенно, если посетитель ищет какую-то определенную модель смартфона. Конечно, следует предусмотреть возможность оставлять комментарии к каждому сообщению, постоянные посетители Ванькиного блога будут вести милые перебранки.

Шаг №4: рисуем черновик (Черновой набросок, чтобы поэкспериментировать с расположением на странице различных элементов)

Наконец-то начинается самое интересное! Например, используем для этого замечательную программу OmniGraffle, возрадуйтесь — она работает только на Mac'ах)) Как только во мне просыпается сильное желание вставить в дизайн как можно больше графических элементов, я стараюсь держаться подальше от графического редактора. Надо подавлять в себе такие желания. Конечно, блог должен быть привлекательным, но достигаться это должно малой кровью.

Что же мы делаем? Создаем основу, на которую будут нанизываться все элементы Ванькиного блога в дальнейшем. Самая большая ошибка начинающих дизайнеров — пропуск этого шага.

На листе бумаги (перенеся потом это в графический редактор) рисуем оптимальное расположение различных блоков для нашего блога (некий скетч). Мы располагаем их по важности, решая, что более, а что менее важно; что наши посетители увидят в первую, а что — во вторую очередь.

На самом деле, это отдельная большая тема для обсуждения. Выделим только основное. В сущности, мы совершаем всего два действия, когда попадаем на сайт: поиск и подробный просмотр. Поиск подразумевает под собой какой-то элемент на странице, который останавливает наш блуждающий взгляд и заставляет подробнее к себе присмотреться. Вот эти элементы, расположенные по степени привлечения внимания:

Движение, действие.
Размер.
Изображение.
Цвет.
Стиль текста (шрифт и его размер).
Расположение.


Если мы решили, ОТКУДА можем начать читать, то можем и решить, ЧТО будем читать, всего лишь подробнее присмотревшись к странице. Обращаем внимание на группы объектов, их соответствие тематике — чтобы определить, что же важнее прочитать первым.

Зная все это, мы можем расположить информацию на своём блоге как можно выгоднее, чтобы ничего важного не скрылось от взгляда посетителей.

Шаг №5: делайте архив настроения (коллекции изображений, цветов, шрифтов — всего, что вам нравится)

Мы всегда просматриваем журналы (особенно журналы мод — золотая жила), книги, интернет в поисках новых цветов, текстур, изображений. Мы буквально кромсаем ножницами журналы или сканируем их, если видим какое-то необычное сочетание цветов или оригинальную картинку. Таким образом у нас накапливается коллекция, из которой потом легко выуживать идеи для дизайна.

Для небольших сайтов мы поступаем так: создаем в Photoshop новый документ и копируем туда все изображения, которые нам понравятся в данные момент. Получившийся коллаж является отправной точкой для создания дизайна.

Возможно, идея кажется сумасшедшей, но все-таки рекомендую вам её попробовать. Вы удивитесь, как это помогает в работе над дизайном.

Шаг №6: визуальный дизайн

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

Самая большая ошибка начинающих дизайнеров — не оставлять достаточно места вокруг элементов дизайна. Это называется «white space». Но оно не обязательно должно быть белым, просто должно быть свободным от других элементов.

Именно поэтому, вы должны быть очень внимательны, создавая собственный дизайн. Ну, а мы тут пойдем задизайним корп. блог для одной нефтедобывающей компании...))

16th Annual Webby Awards: без наград...
webkeepers, создание сайта
webkeepers
В этом году Webby пролетела мимо нас... В общем, epic fail...))
Ну ничего, в следующий раз точно всем задницу надерем! ;)
Но зато можем поздравить наших сингапурских друзей из Кинетик (http://www.kinetic.com.sg )! Ребята молодцы - знают как вынести мозг!))

Диз твиттера для MTV!
webkeepers, создание сайта
webkeepers
MTV утвердили наш дизайн для их твиттер-аккаунта ( http://twitter.com/#!/MTV )! Сделали в готичном стиле, получилось немного дарковато и похоже на нашу страничку ( http://twitter.com/#!/Webkeepers_Team ), но MTV'шникам понравилось!

p.s. Видимо, все-таки давняя любовь к этом каналу дает свои плоды! :)



Вырезаем меню на табах
webkeepers, создание сайта
webkeepers

Сегодня будем "резать" красивые табы с помощью CSS и JQuery. Табы очень полезны для сайта, т.к. они позволяют существенно сэкономить место на странице. Их можно разместить где вашей душе угодно - в сайдбаре, в контенте и даже в "подвале". А если еще это сделать красиво, то будет вообще просто сказка! Тем более, что табы не грузят ни сервак, ни клиента. Итак, начнем...

Сперва построим обычный список и привяжем его к дивам:

<ul id="tabs">
    <li><a href="#" title="tab1">Один</a></li> 
    <li><a href="#" title="tab2">Два</a></li> 
    <li><a href="#" title="tab3">Три</a></li> 
    <li><a href="#" title="tab4">Четыре</a></li> 
</ul> 
<div id="content"> 
    <div id="tab1">Один контент</div> 
    <div id="tab2">Второй контент</div> 
    <div id="tab3">Третий контент</div> 
    <div id="tab4">Четвёртый контент</div> 
</div>

Присваиваем айдишки для списка и дивов. В блоке "tabs" мы прописываем заголовки наших табов, а в "content" - содержимое будущего меню.

Теперь перейдем к стилям (цвета и размер можете выбирать на свое усмотрение):

#tabs
{
  overflow: auto;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

#tabs li
{
    margin: 0;
    padding: 0;
    float: left;
}

#tabs a
{
    -moz-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    background: #ad1c1c;
    background:    -moz-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background:    -webkit-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background:     -ms-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background:      -o-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background:         linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    color: #fff;
    float: left;
    font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
    height: 35px;
    padding: 0 30px;
    text-decoration: none;
}

#tabs a:hover
{
    background: #c93434;
    background:    -moz-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background:    -webkit-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background:     -ms-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background:      -o-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background:         linear-gradient(220deg, transparent 10px, #c93434 10px);
}

#tabs a:focus
{
    outline: 0;
}

#tabs #current a
{
    background: #fff;
    background:    -moz-linear-gradient(220deg, transparent 10px, #fff 10px);
    background:    -webkit-linear-gradient(220deg, transparent 10px, #fff 10px);
    background:     -ms-linear-gradient(220deg, transparent 10px, #fff 10px);
    background:      -o-linear-gradient(220deg, transparent 10px, #fff 10px);
    background:         linear-gradient(220deg, transparent 10px, #fff 10px);
    text-shadow: none;
    color: #333;
}

#content
{
    background-color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
    background-image: -webkit-linear-gradient(top, #fff, #ddd);
    background-image:    -moz-linear-gradient(top, #fff, #ddd);
    background-image:     -ms-linear-gradient(top, #fff, #ddd);
    background-image:      -o-linear-gradient(top, #fff, #ddd);
    background-image:         linear-gradient(top, #fff, #ddd);
    -moz-border-radius: 0 2px 2px 2px;
    -webkit-border-radius: 0 2px 2px 2px;
    border-radius: 0 2px 2px 2px;
    -moz-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    -webkit-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    padding: 30px;
}

#content div
{
    height: 220px;
}

Ну и, конечно же, подключаем jQuery:

$(document).ready(function() {
        $("#content div").hide(); // Скрытое содержимое
        $("#tabs li:first").attr("id","current"); // Какой таб показать первым
        $("#content div:first").fadeIn(); // Показ первого контента таба

    $('#tabs a').click(function(e) {
        e.preventDefault();
        $("#content div").hide(); //Скрыть всё содержимое
        $("#tabs li").attr("id",""); //Сброс идентификаторов
        $(this).parent().attr("id","current"); // Активация идентификаторов
        $('#' + $(this).attr('title')).fadeIn(); // Показать содержимое текущей вкладки
    });
})();

RGBa и браузеры
webkeepers, создание сайта
webkeepers

RGBa (red green blue alpha- это цветовая модель, которая используется в CSS для определения цвета с альфа-каналом. А выглядит она так:

div{
 background: rgba(200, 54, 54, 0.5);
}

С помощью неё можно заполнить какую-либо область полупрозрачным цветом. Многие знают, что есть очень похожее свойство opacity, но оно применяется ко всем дочерним элементам, а обходится это только при использовании хаков. С помощью же RGBa, мы можем сделать полупрозрачным только один элемент, не применяя это свойство к дочерним.
Но, к сожалению, не все браузеры поддерживают RGBa. Поэтому, если диз позволяет, то необходимо объявлять альтернативный цвет. Если его не объявить, то браузер не будет применять цвет для этого элемента вообще. Но даже этот способ не работает, в действительно древних браузерах.

div {
 background: rgb(200, 54, 54); /* Альтернативный цвет */
 background: rgba(200, 54, 54, 0.5);
}

 Поддержка браузерами RGBa.



Для IE мы можем испльзовать фильтр CSS от Microsoft. Этот фильтр даёт точно такой же результат:

<!--[if IE]>
 <style type="text/css">
  .color-block {
   background : transparent;
   filter  : progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
   zoom  : 1;
  }
 </style>
<![endif]-->


7 отличных css приемов
webkeepers, создание сайта
webkeepers
Сегодня мы опишем семь css приемов, которые обязательно пригодятся вам для качественной и оптимальной верстки сайта. Итак, начнем:

1. Количество классов на один тег:

Обычно свойства элемента описаны в одном классе, но можно использовать несколько классов в одном теге. Таким образом можно разделить, к примеру, стили для текста (class="text") и стили для расположения (class="side") контейнера в разные классы.

<div class= "text side">
...
</div>

2. Однолинейное описание:

Для перечисления и описания параметров стиля более выгодным считается однолинейный метод, т.к. он значительно уменьшает размер файла css. Хотя, если вам удобно применять мультилинейный вариант, то пожалуйста, никто вас не заставляет :)

3. Вертикальное центрирование с помощью css:

В то время когда табличная верстка была очень популярной, с вертикальным центрированием не было проблем. Чтоб отцентрировать элемент по вертикали использовался vertical-align:middle для ячейки таблицы. К сожалению при использовании css верстки, тоесть использование <div> в качестве контейнера вертикальное центрирование с помощью vertical-align:middle работать не будет и содержание контейнера будет располагатся вверху. Как же добится того, чтоб содержимое контейнера <div> располагалось по центру? Все очень просто! В этом нам поможет css свойство line-height. Чтоб содержимое контейнера было отцентрировано вертикально нужно установить line-height этого содержимого равному высоте контейнера.

4. Сокращение записи css свойства font:

div{
font-family:tahoma;
font-size:1.01em;
line-height:1.5em;
font-weight:bold;
font-style:italic;
}
Такая запись стилей шрифта не очень удобна, и очень громоздкая. Более компактна и эстетична следующая сокращенная запись стилей шрифта.
div{
font-family:1.01em/1.5em tahoma bold italic;
}

5. !important:

Обычно в css наибольший приоритет имеет запись которая идет последней.
С помощью !important можно установить найвысший приоритет любому параметру css, независимо от его места расположения. Эта параметр работает во всех браузерах. Это свойство может быть очень полезным, если есть различия в IE и других браузерах, так как с помощью !important можно добится одинакового отображения в IE и других браузерах.
div{
font-family:tahoma !important;
font-family:arial;
}
Используя эту запись можна добится эффекта, что в браузере IE семейство шрифта будет arial, а в других браузерах tahoma.

6. Размещение по блока по центру:

Все web-мастера когда либо сталкивались с проблеммой размещения своего сайта фиксированной ширины по центру экрана. Для этого есть очень хороший и кроссбраузерный способ:
div{
width:100px;
margin:0 auto;
}

Данный способ является кроссбраузерным и без каких либо ошибок.

7. Значение border по умолчанию:

Создавая свойства для границ (border) элементов обычно определяют цвет толщину и стиль. Например запись border:3px solid #000 создает черную сплошную границу. Однако единственная ценность в этой записи это стиль границы. Но если вы в описании упустите какой то из атрибутов, то он будет использоваться по умолчанию. Поэтому старайтесь не забывать указывать все атрибуты в описании границ, чтоб не было не предвиденных результатов в разных браузерах.



 


Неразрывный пробел
webkeepers, создание сайта
webkeepers

Сегодня, мы рассмотрим вопрос о расстановке неразрывных пробелов. Последовательность символов &nbsp; расшифровывается как NoBackSPace и интерпре­тируется браузером как пробел, не позволяющий разорвать в этом месте строку, и помимо применения в качестве визуального разделителя должна использоваться для предотвращения неблагозвучных или затрудняющих чтение переносов. Неразрывный пробел рекомендуется ставить в следующих случаях:

• между двумя инициалами и между инициалами и фами­лией: И.&nbsp;С.&nbsp;Иванов;

• между сокращенными обращениями и фамилией: г-н&nbsp;Иванов, а также после географических со­кращений типа г.&nbsp;Москва или о-в&nbsp;Крым;

• внутри сокращений «и т. д.», «и т. п.», «т. е.», «ж. д.» и им подобных (хотя английские «e.g.» и «i.e.» пробелами обычно не разделяются);

• между внутритекстовыми пунктами, такими как «а)», «б)» или «1.», «2.», и следующим за ними текстом;

• между знаками номера (№) и параграфа (§) и относящи­мися к ним числами;

• между числами и относящимися к ним единицами измерения: 200&nbsp;кг; это же относится и к указаниям дат: XVIII&nbsp;b., 2010&nbsp;г.;

• между классами многозначных чисел, начиная с пяти­значных: l&nbsp;302&nbsp;569;

• перед длинным тире в середине предложения (таким образом, этот знак препинания отделяется пробелами с двух сторон — неразрывным слева и обычным справа);

• перед номерами версий программных продуктов и частями их названий, состоящими из цифр или сокращений: Windows&nbsp;7, Windows&nbsp;XP, Windows&nbsp;Vista;

• после однобуквенных предлогов и союзов, особенно в начале предложения или в заголовке.

В других языках существуют свои специфические правила. Так, во французском неразрывными пробелами отбивают­ся от предшествующего текста двоеточие, точка с запятой, вопросительный и восклицательный знаки; кавычки «елоч­кой» также отделяются от заключенного в них текста. В английском и немецком можно ставить &nbsp; наряду с обычным пробелом в конце предложения, чтобы визуаль­но удвоить отбивку между предложениями, хотя сейчас эта типографская традиция многими считается устаревшей.


?

Log in

No account? Create an account