Пост добавлен 13 Июля 2009 года в категорию « Архив».
Я уже говорил о том, что флаеры говно. Решил немного развить тему, но уже в совершенно другом направлении.
Что если бы флаеры раздавали бы не как обычные говнобумажки, а как прикольные и интересные вещи. К примеру флаер-кубик рубик. Было бы круто. Человек бы, во-первых, хер бы его выкинул, во-вторых, обязательно все бы прочитал, в-третьих, показал бы друзьям и оставил бы себе навсегда. Почему? Потому что кубик рубик — это круто. Но вещь очень рискованная. Создать одну бумажку в разы дешевле, чем создать один такой кубик рубик, но, с другой стороны. Кубик рубик (возможно) будет в разы эффективней куска туалетной бумаги. Так что тут о выгоде еще стоит подумать.
А можно еще выйти за рамки и скинуть на город с самолетов триллиарды флаеров этих. Посадят, нахер, разумеется, но реклама очень эффективная. Ну это уже так...
пост пока что не комментировали, но прочитали 1364 раза
Пост добавлен 10 Июля 2009 года в категорию « Архив».
Дача это круто! Поехал ка я на дачу ^_^
пост пока что не комментировали, но прочитали 1209 раз
Пост добавлен 10 Июля 2009 года в категорию « Архив».
Часто ли вы что-либо делаете по дому? Моете ли посуду, пол, унитаз, ванну, стены (о_О), окна? Протираете ли пыль? Чините ли сломанные телевизоры, посудомоечные и стиральныее машины, музыкальные, центы, компьютеры? Меняете лампочи? Стираете вещи? В общем, что и как часто вы делаете по дому?
пост пока что не комментировали, но прочитали 1377 раз
Пост добавлен 09 Июля 2009 года в категорию « Архив».
Решил я плотно поработать с разными CMS. Посмотреть за этим вы можете не сайте shugich.net. Этот пост пока что будет всегда сверху. Здесь я буду вести лог действий.
- Установлен WordPress.
- Пока что ничего не сделано :/ Но устанавливается WordPress.
пост пока что не комментировали, но прочитали 1217 раз
Пост добавлен 09 Июля 2009 года в категорию « Архив».
Долго думал и все таки решил купить себе домен в зоне COM. Теперь я счастливый обладатель shugich.com.
Ну да ладно. Редирект сюда я пока что делать не тороплюсь. Для начала я хочу попробовать себя в CMS вордпресс (Толпа — «Он дебил, нах ему два блога!»). И возникает у меня такой вопрос к люду... Как хост лучше брать? И еще кто-нибудь может чего-нибудь сказать про хостинг от SiteU?
пост пока что не комментировали, но прочитали 1524 раза
Пост добавлен 09 Июля 2009 года в категорию « Архив».
Ну вот и пришло время третьей части уроков верстки в которой мы продолжим верстать наш шаблон (подробнее читайте первую часть). В этот раз сделаем горизонтальное меню и шапку.
Опять же сначала зададим размер и фон для горизонтального меню. Так как фон градиентный мы вырежем полоску градиента и будем ее растягивать по горизонтали. Высота будет 32 пикселя, назовем мы ее «hmenu_bg.png». Кроме того пока что мы уберем все отступы, дабы не увеличивался размер блока, позже мы их пересчитаем и добавим по-новой.
Code #h_menu {height: 32px; background: url('./img/hmenu_bg.png') repeat-x;} Сделали. Меню, как вы уже, наверное, догадались будем делать при помощи списка.
Code <div id="h_menu"> <ul> <li><a href="#">mayor’s office</a></li> <li><a href="#">city agencies</a></li> <li><a href="#">services</a></li> <li><a href="#">news and features</a></li> <li><a href="#">city life</a></li> <li><a href="#">contact us</a></li> <li><a href="#">search</a></li> </ul> </div> В макете нестандартный шрифт, который вряд ли будет отображаться у многих пользователей, поэтому используем Arial, добавим отступы и сделаем горизонтальный вывод. Так же не забудем к id «h_menu» добавить overflow: hidden; дабы не схлопывался блок.
Code #h_menu {height: 32px; background: url('./img/hmenu_bg.png') repeat-x; overflow: hidden;}
#h_menu ul {list-style: none;}
#h_menu li {float: left; padding: 5px 6px 0px 6px;}
#h_menu a {font: small-caps 15px 'Arial',sans; color: #fff; text-decoration: none;}
#h_menu a:hover {text-decoration: underline;} Теперь нам осталось только добавить разделители. Сделаем мы их при помощи фоновой картинки для тега LI. Растягиваться она будет по правому краю. Картинка будет растягиваться по вертикали ширина 2 пикселя. Назовем ее «hmenu_line.png». Кроме того мы добавим 2 пикселя в правый отступ, дабы сохранить визуальные размеры отступов.
Code #h_menu li {float: left; padding: 5px 8px 0px 6px; background: url('./img/hmenu_line.png') repeat-y right;} О боже! Разделитель не достает до низа горизонтального меню! Происходит это потому что высота LI меньше высоты горизонтального меню. Чтобы исправить этот косяк просто зададим такую же высоту LI, но только вычтем из нее 5 пикселей, дабы текст не ушел ниже.
Code #h_menu li {float: left; padding: 5px 8px 0px 6px; background: url('./img/hmenu_line.png') repeat-y right; height: 27px;} Шикарно! Меню на месте. Теперь перейдем к шапке. В принципе фон и размер шапки мы уже сделали в первом уроке. Сейчас нам нужно только сделать логотип кликабельным. Делается это просто. Берется прозрачная картинка размером пиксель на пиксель («blank.png») и делается ссылкой. При этом размеры картинки в теге IMG мы указываем такие же, как размер лого. А после при помощи позиционирования подгоняем эту ссылку ровно под лого.
Code <div id="header"><a href="#"><img src="./img/blank.png" alt="City Portal" class="logo" /></a></div> Code #header {width: 780px; height: 117px; background: url('./img/header.png') no-repeat;}
.logo {width: 205px; height: 44px; position: relative; top: 32px; left: 17px;} Готово. Сайт по-малу начинает приобретать нужный вид, что очень радует. Ну да ладно. В следующей части мы будем оформлять левый блок. А сейчас вопрос-ответ-обсуждение.
пост пока что не комментировали, но прочитали 4719 раз
Пост добавлен 08 Июля 2009 года в категорию « Архив».
Начнем вторую часть. Сейчас мы будем верстать верхнюю часть сайта.
А это часы и меню. Сначала сделаем нормальный фон. Зададим высоту верхней части в 47 пикселей. Фон будет белого цвета, а вниз, как вы, наверное, заметили — градиент. Высота у него 19 пикселей. Дабы поберечь трафик людей мы не будем резать и растягивать всю высоту верхушки. Вырежем только градиентную полоску 1х19 пикселей (название «top_bg.png»), растянем по горизонтали и опустим вниз, а фон зададим цветом.
Code
#top {height: 47px; background: url('./img/top_bg.png') repeat-x bottom #fff;}
Ну вот, фон готов. Теперь сделаем часы. Сначала пропишем в HTML время, указанное в макете и настроим шрифт, цвет и отступы, т.к. шрифт в макете не стандартный (что не правильно), мы будем использовать другой. Я решил, что подойдет Tahoma.
Code
#watch {float: left; padding: 13px 0px 0px 18px; font: 10px 'Tahoma',sans; color: #30322e;}
Теперь нам нужно добавить пиктограмму с часами (название «watch.png», размер 15х15 пикселей). Ее мы сделаем фоном. Для этого нужно заключить время в тег P.
Code
<div id="watch"><p>March 17, 2003 - 11:49 am</p></div>
Сделали. Немного посчитаем. Отступ между пиктограммой и датой/временем 6 пикселей, сама пиктограмма шириной в 15 пикселей, итого будет 21 пиксель. Возвращаемся в CSS. Добавляем отступ и ставим пикстограмму, выравниваем по центру. Зачем нужен отступ? Попробуйте без него и увидите.
Code
#watch {float: left; padding: 13px 0px 0px 18px; font: 10px 'Tahoma',sans; color: #30322e;}
#watch p {padding-left: 21px; background: url('./img/watch.png') no-repeat left center;}
Что-то не то, пиктограммка обрезается. Посмотрел я, не влезает 3 пикселя. Исправим это при помощи паддингов.
Code
#watch {float: left; padding: 13px 0px 0px 18px; font: 10px 'Tahoma',sans; color: #30322e;}
#watch p {padding: 2px 0px 1px 21px; background: url('./img/watch.png') no-repeat left center;}
Ну вот и все. Часы готовы, теперь займемся меню. Сделаем мы его при помощи списка.
Code
<div id="top_menu">
<ul>
<li><a href="#">register</a></li>
<li><a href="#">sign in</a></li>
<li><a href="#">tour</a></li>
<li><a href="#">help</a></li>
</ul>
</div>
Теперь сделаем горизонтальное отображение и настроим цвет и оступы. Шрифт там опять же нестандартный, мы будем использовать Arial.
Code
#top_menu {float: right; padding: 7px 12px 0px 0px;}
#top_menu ul {list-style: none;}
#top_menu li {float: left; padding: 0px 6px;}
#top_menu a {font: small-caps 12px 'Arial',sans; color: #636a72; text-decoration: none;}
#top_menu a:hover {color: #000; text-decoration: underline;}
Ну вот и красота. Ан нет... Не хватает горизонтальных разделителей. Добавим, это всего лишь правая граница. Но весь высад в том, что их мы не можем добавить к LI, ведь LI у нас четыре, а разделителя только три, как мы выкрутимся? Добавим к первым трем LI класс и уже ему зададим границы.
Code
<div id="top_menu">
<ul>
<li class="top_menu_divider"><a href="#">register</a></li>
<li class="top_menu_divider"><a href="#">sign in</a></li>
<li class="top_menu_divider"><a href="#">tour</a></li>
<li><a href="#">help</a></li>
</ul>
</div>
Code
#top_menu {float: right; padding: 7px 12px 0px 0px;}
#top_menu ul {list-style: none;}
#top_menu li {float: left; padding: 0px 6px;}
#top_menu a {font: small-caps 12px 'Arial',sans; color: #636a72; text-decoration: none;}
#top_menu a:hover {color: #000; text-decoration: underline;}
.top_menu_divider {border-right: 1px solid #d0d2d4;}
Не правильно отображается... Как исправить? Высота разделителя 31 пиксель. Значит зададим LI высоту в 31 пикселей, но тогда будет текст выше чем нужно. Его мы опустим с помощью паддинга на 5 пикселей. При этом нужно вычесть из высоты LI 5 пикселей, ибо паддинг добавляет 5 пикселей к высоте.
Code
#top_menu {float: right; padding: 7px 12px 0px 0px;}
#top_menu ul {list-style: none;}
#top_menu li {float: left; padding: 5px 6px 0px 6px; height: 26px;}
#top_menu a {font: small-caps 12px 'Arial',sans; color: #636a72; text-decoration: none;}
#top_menu a:hover {color: #000; text-decoration: underline;}
.top_menu_divider {border-right: 1px solid #d0d2d4;}
Ура! Все работает как надо! Ну вот и все. Сегодня закончим на этом. В следующий раз будем делать горизонтальное меню и шапку.
пост пока что не комментировали, но прочитали 3313 раз
Пост добавлен 07 Июля 2009 года в категорию « Архив».
Многие покупают рё и опыт через SMS только потому что не задумываются о том, что это не выгодно. С Яндекс.Деньгами или WebMoney покупка получается в два раза дешевле и это факт. Почему так? Потому что компания, которая предоставляет возможность оплаты через SMS берет не хилую комиссию. По сути мы прилично скинула цены на SMS, иначе было бы даже малость не выгодно. А это значит, что в бюджет Наруто Клана поступает меньше средств. Поэтому советую пользоваться Web Money и Яндекс.Деньгами. Тогда и рекламы больше будет, а, следовательно и посетителей.
Ну да закончу вступление и перейду к описанию. Для начала расскажу вам о системе Яндекс.Деньги.
Для того, чтобы зарегистрироваться там нужно проделать несколько не сложных действий.
- Создать паспорт в системе Яндекс.Деньги
- Зарегистрироваться в системе Яндекс.Деньги. Очень осторожно заполняйте поле «Платежный пароль» и «Пароль восстановления». Это мега-важно.
- Войдите по своим логином в систему Яндекс.Деньги.
- Положите деньги на счет. Я советую платежные терминалы. Только ими пользуюсь.
- Переведите деньги на нужны кошелек. Под назначением платежа галку ставьте на «перевод на счет»
Вуаля. Как все оказывается просто. Теперь разберем систему Web Money. Тут малость сложнее. Эта система очень сильно заботится о своей безопасности, так что к проверке каких-либо данных и доступу к кошелькам особый подход. Но, с другой стороны. Регистрация тут описана отлично, так что, думаю разберетесь сами. Советую использовать WebMoney Keeper Classic. Как только вы зарегистрируетесь нужно будет создать кошельки. Для этого во вкладке «Кошельки» есть кнопочка «Создать». Создаете себе кошельки с нужными вам валютами. После чего пополняете счет (вкладка «Мои WebMoney», в первой же строке находим «пополнить кошелек») и отправляете деньги на нужный кошелек (Вкладка «Кошельки», кнопочка «Передать WM».
Я советую вам использовать Яндекс.Деньги, ибо это в разы проще, но WebMoney универсальней, ибо работает в большем количестве стран. Кроме того, если вы потеряете контроль над WebMoney, то восстановить его очень сложно, в случае с Яндекс.Деньгами наоборот. А, вообще, выбор за вами.
Для тех, кто так и будет пользоваться SMS хочу напомнить. Не забывайте, как «свой текст» писать свой точный ник, а так же проверьте правильность написания всех цифр в сообщении, а так же в номере отправления.
Кажись все, если родятся вопросы, то готов на них ответить.
пост пока что не комментировали, но прочитали 6463 раза
Пост добавлен 06 Июля 2009 года в категорию « Архив».
Решил я начать цикл постов о верстке. Для тех, кто этим занимается в достаточной степени — тому это совершенно не пригодится. Так же я не советую читать это тем, кто абсолютно не знает такие вещи, как HTML и CSS. Банальнейшие вещи я тут описывать не хочу и не буду. Лень, так сказать, да и в интернете это все можно найти. Чему можно будет научиться? Блочной кроссбраузерной верстке и написанию валидного кода. Но, опять же, какие-то сложные задачи я рассматривать не буду, ибо нет толку. К каждой задаче свой индивидуальный подход и всего не разобрать. Кроме того я ни слова не скажу о том, как нужно нарезать макет. Базовыми знаниями фотошопа, думаю, овладеете вы сами. Ну да ладно.
Теперь качаем макет (я нашел на одном из сайтов с бесплатными макетами) и приступаем.
Перед началом верстки нужно визуально разбить весь дизайн на блоки, дабы иметь представление, как все это верстать. Выразить мыслями это сложно, поэтому вот вам картинка:
Будет что-то примерно вроде этого. Ну, т.к. мы знаем что будет и где, то можем подготовить место под содержимое, т.е. сначала сверстаем каркас всего этого. Значит создаем папочку «City Portal», в ней создаем папку «img», файл «index.html» и «style.css». И начинаем заполнять файл «index.html»
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>City Portal</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="StyleSheet" type="text/css" href="./style.css" /> </head> <body> <div id="all"> <div id="top"> <div id="watch">Время</div> <div id="top_menu">Верхнее меню</div> </div> <div id="h_menu">Горизонтальное меню</div> <div id="header">Шапка</div> <div id="container"> <div id="sidebar">Левый блок</div> <div id="content">Контент</div> </div> <div id="b_menu">Нижнее меню</div> <div id="footer">Подвал</div> </div> </body> </html> Сделали мы вот такую разметку и получилась у нас следующая вещь. Не густо, верно, просто набор надписей в столбик. Теперь мы будем задавать всему этому делу стили, дабы все располагалось так, как мы хотим. Кстати, хочу заметить, что шабон у нас фиксированный с шириной 780 пикселей. Поэтому я засунул код в див (с id="all"), дабы все выровнять по центру и задать ширину. Для наглядности я задам цвет фона серым, а блока с дизайном белым.
Code /* Сброс */
* {margin: 0px; padding: 0px;} /* Убираем абсолютно все отступы. */
img {border: 0px} /* Теперь у картинки по умолчанию нет рамки. */
/* Основые стили */
html, body {background: #ccc;}
#all {width: 780px; margin: 0px auto; background: #fff;}
Теперь обработаем верх. Зададим пока что высоту в 50 пикселей, расположим часы по левому краю, а меню справа при помощи float. А так же зададим отступы от краев.
Code /* Верх */
#top {height: 50px;}
#watch {float: left; padding: 10px 0px 0px 10px;}
#top_menu {float: right; padding: 10px 10px 0px 0px;}
Теперь горизонтальное меню. Там зададим высоту и отступы.
Code /* Горизонтальное меню */
#h_menu {height: 30px; padding: 5px 0px 0px 5px;}
Далее шака. Ее, я думаю, мы вырежем сразу и поставим на место. Шапку обзываем «header.png».
Code /* Шапка */
#header {width: 780px; height: 117px; background: url('./img/header.png') no-repeat;}
Левый блок и контентую часть мы раскидаем направо и налево не так как верхнее меню. Делаю я это сейчас резиново. Никак не агрументирую это. Просто привычка. Можно делать точно так же, как и верхнее меню, но нужно не забывать тогда задавать ширину левого блока и контента.
Code /*** Основная часть***/
#container {overflow: hidden;} /* Это нужно для того, чтобы контейнер не схлопывался. */
/* Левый блок */
#sidebar {float: left; width: 233px;}
/* Контент */
#content {margin-left: 233px;}
Нижнему меню и подвалу зададим ширину и выроняем по центру.
Code
/* Нижее меню */
#b_menu {height: 20px; text-align: center;}
/* Подвал */
#footer {height: 25px; text-align: center;}
Ну вот и все. Теперь у нас есть основная структура. Сейчас нужно будет нужно резать, подгонять по размеру и так далее и тому подобное. Но это будет в следующей части.
Теперь будет некое добавление. Во-первых, прошу оценить полезность этого цикла ответив на банальный вопрос Нужно ли это вам?. Во-вторых, задаем вопросы-получаем ответы. В-третьих, объявляю конкурс на создание дизайна. Тот дизайн, который к концу описания верстки этого макет, будет содержать максимум трудностей для верстальщика будет сверстан мной бесплатно (а так же еще один любой дизайн), но все тут тоже не просто так. Описание верстки будет выложено у меня в блоге, как урок для других.
Ну вот и все, спасибо за внимание. С вами был DJ Псих на радио Шугич ФМ.
пост пока что не комментировали, но прочитали 8667 раз
Пост добавлен 06 Июля 2009 года в категорию « Архив».
Мне кажется, что мой блог стал много лучше с момента редизайна. Вроде глобально так ничего не делал, но зато обработал кучу мелочей, на которые все вряд ли обращают внимания (но тем не менее, которые играют свою роль в оценке сайта в целом). Я раздул некоторые разделы, некоторые добавил и стало вообще круто. Вот сегодня добавил нормальный фотоальбом. Теперь можно будет смотреть фотки (там наверное треть моих архивов залита, я все комментить пока что не стал, но еще успею). И тем не менее в голове идеи по поводу того чтобы поделать у меня еще есть. Думаю, что с этого момента теперь это уже не будет называться «Некий блог безликого психа». Вернее так будет называться только блог, сайт же называется будет «Безликий в сети». На днях переименую.
С удивлением заметил, что за полтора месяца я написал столько же постов, сколько до этого писал за предыдущие три месяца. Это значит начал писать я намного больше. Но, с другой стороны до сих пор самые просматриваемые и обсуждаемые посты были наисаны давно. А это значит, что писать я начал менее качественно. Удручает, верно.
Так что сделаю вывод. С момента создания блог стал лучше, но деградировал. Прискорбный вывод, но против фактов не попрешь ^_^
пост пока что не комментировали, но прочитали 1378 раз
|