K_E_V_in » Верстка http://webkev.com Создание сайтов, продвижение, СЕО, раскрутка. ДАО Интернета Wed, 28 Jul 2010 06:24:34 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Как создать веб-форму для сайта http://webkev.com/2010/03/17/kak-sozdat-veb-formu-dlya-sajta/ http://webkev.com/2010/03/17/kak-sozdat-veb-formu-dlya-sajta/#comments Wed, 17 Mar 2010 10:22:48 +0000 K_E_V_in http://webkev.com/?p=588 Если при создании сайта, возникает необходимость в добавлении веб-форм на интернет страницу (например форм обратной связи, регистрационных форм, контактных форм, онлайн заказа и т.д.). Если Вы решили сделать такую форму, то лучший вариант – это использования онлайн сервиса MyTaskHelper.

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

Итак, онлайн конструктор веб-форм MyTaskHelper  представляет собой сайт, на котором Вы без особых проблем создадите любую веб-форму. Пройдя  регистрацию, Вы сможете создавать проекты. Проект может содержать любое количество форм. Введите название формы и добавьте поля. Выбрав нужный проект, зайдите в меню Формы и заполните форму полями на Ваш выбор. В MyTaskHelper доступен широкий выбор типов полей, что позволит создать веб-форму для всех случаев, которые только можно придумать. Например поля для ввода однострочного или многострочного текста, указания даты, времени, места проживания и т.д, Вы можете ознакомиться со всеми типами полей на страницах блога MyTaskHelper. После того как Вы добавите поля на веб-форму, приступайте к настройке параметров  ее полей. Исходя из тех задач, что должна выполнять Ваша форма, настройте нужную функциональность. Чаще всего используют следующие опции для настройки полей веб-формы. Установите тот размер поля (в пикселях) который Вам нужен. Чтобы проверять вводимые данные используйте свойство валидации полей. Подробно об одном из основных свойств всех веб-форм читайте в статье «Валидация данных в системе MyTaskHelper». Кроме этих опций в системе доступны следующие:

  • авто-дополнение;
  • по умолчанию;
  • описание (небольшие инструкции для юзеров, будут появляться в отдельном окне при наведении курсора на поле).

Далее, после настройки всех параметров полей формы, можно приступать к дизайну (редактируем такие параметры – цвета самой формы и текста, размер формы, тип шрифтов и т.д.). Перейдите в меню Виджеты, чтобы изменить указанные выше параметры. Во вкладке Виджет формы Вы найдете ряд опций также связанных с функционированием веб-формы:

  • Возможность менять надпись на кнопке формы;
  • Изменять текст сообщения, которое выплывает после нажатия на кнопку;
  • Чтобы защититься от спамеров Вы можете добавить на веб-форму капчу.
  • Настройка отправки сообщения юзерам, заполнившим форму (емейл подтверждение);
  • редирект на указанную веб-страницу после субмита формы;

Чтобы Ваша веб-форма появилась на сайте используйте код для вставки (просто разместите его на нужной веб-странице).

Готово! MyTaskHelper один из лучших онлайн инструментов для создания веб-форм. Потратив 5 минут, Вы сможете установить на Вашу веб-страницу функциональную веб-форму с необходимым дизайном.

]]> http://webkev.com/2010/03/17/kak-sozdat-veb-formu-dlya-sajta/feed/ 2 Cufón – используйте шрифты, какие душа пожелает http://webkev.com/2010/03/09/cufon-%e2%80%93-ispolzujte-shrifty-kakie-dusha-pozhelaet/ http://webkev.com/2010/03/09/cufon-%e2%80%93-ispolzujte-shrifty-kakie-dusha-pozhelaet/#comments Tue, 09 Mar 2010 16:44:57 +0000 K_E_V_in http://webkev.com/?p=577 Если стоит задача использовать в проекте нестандартный шрифт, то есть возможность пойти несколькими путями:

  1. Ъ-метод – не использовать нестандартные шрифты, достаточно в сказать body {font-family: sans-serif;} и не морочить себе голову.
  2. Быдло-метод – нарезать из ЖПЕГов, картинок с заголовками, ужать посильнее, что б появилась размытость и вставлять вместо текста картинки. Достаточно популярный на наших просторах метод.
  3. W3C-метод – используем
    1
    @font-family

    и наслаждаемся красивыми шрифтами без всяких заморочек. Пока этот метод не рассматривают, как рабочий, по причине слабой поддержи со стороны браузера.

  4. sIFR – клевая вещь, наиболее употребляемая на сегодняшний день, но как недостаток – требует наличия Flash-плагина. Хотя это трудно назвать недостатком, но если есть инструмент, позволяющий обойтись без плагинов, то это не может не радовать.
  5. Cufón – самое то. Относительно новый метод, который показывает превосходные результаты. Он и есть герой этой статьи.


Для любознательных: есть еще один способ, практически полный аналог куфона — typefaces.js, но сегодня мы будем говорить не о нем.

Что за куфон?

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

  1. Не требовать плагинов, шмагинов – используются только средства, нативно поддерживаемые браузером (из этих средств, используются Javascript, SVG и <canvas> для нормальных, VML для )
  2. Совместимость – должен работать в всех распространенных браузерах.
  3. Простота использования – минимум приготовлений и конфигурации.
  4. Скорость – она должна быть достаточно большой, даже для объемных текстов.

Как работает

Cufón состоит из двух независимых частей – генератора шрифта, который преобразовывает стандартный шрифт (в форматах, TTF, OTF) в некоторый промежуточный формат, который будет использоваться далее. Вторая часть – движок рендеринга на Javascript.

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

Попробуем

Попробуем все это на деле. Для начала возьмем файл со шрифтом, у меня есть для примера шрифт Rokwell, в обычном и жирном начертании. Идем по адресу cufon.shoqolate.com/generate/ и пихаем в форму имеющиеся у нас файлы. Далее, по желанию, отмечаем некие дополнительные настройки и получаем файл, в моем случае это был Rockwell_400-Rockwell_700.font.js Название нам показывается, что файл содержит наш шрифт в двух начертаниях, наглядно, но как-то долго такое в тег скрипт прописывать…

Следующим шагом будет скачивание собственно дистрибутива Cufón, который в сжатом виде занимает каких-то 14 КБ. cufon.shoqolate.com/js/cufon-yui.js

Подключаем оба этих файла в наш документ, как самый обычный Javascript.

<script type="text/javascript" src="./js/cufon-yui.js"></script>
<script type="text/javascript" src="./js/Rockwell_400-Rockwell_700.font.js"></script>

Теперь выбираем, какие именно элементы страницы мы хотим прорисовать нашим красивым шрифтом. Для примера все заголовки H1, нет проблем:

<script type="text/javascript">
    Cufon.replace("h1");
</script>

Да и это все, что от нас требуется. Цвет, размер и другие параметры для прорисовки берутся из правил . Если они конечно заданы.

Если мы хотим заменять не только H1, но и какие нибудь «ul.menu>li.active>a», то нам потребуется сторонняя библиотека, которая умеет делать выборку по селекторам. Дело в том, что сейчас мало кто обходится без таких Javascript библиотек, как Prototype, jQuery, MooTools или Dojo, а потому создатели решили не делать свою библиотечку избыточной и предлагают нам воспользоваться сторонней. Правильно предлагают! Итак, при использовании одной из вышеприведенных библиотек, нам просто надо подключать их в документе раньше чем Cufón, тогда он сам разберется что к чему и можно начинать использовать более сложные запросы.

Особая заметка для людей, которые пекутся о пользователях . Разработчики рекомендуют вставлять следующий код, сразу перед </body>, либо перед вызовом любого внешнего скрипта, например Google Analytics:

<script type="text/javascript"> Cufon.now(); </script>

Это должно избавить от некоторой задержки в прорисовке шрифтов.

Использование нескольких шрифтов.

<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Frutiger_LT_Std_400.font.js" type="text/javascript"></script>
<script src="Myriad_Pro_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
    Cufon.replace('h1', { fontFamily: 'Frutiger LT Std' });
    Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
</script>

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

И еще все страницы, где используется Cufón – должны быть в кодировке UTF-8, либо обратно совместимые с ней, например US-ASCII. А если ваши страницы все еще в CP1251 – ваши проблемы.
UPD: пользователь pgg демонстрирует, что CP1251 — поддерживается!

Тонкости

Если при вызове рендера мы хотим указать для текста какие-то дополнительные визуальные настройки, то это следует делать так:

Cufon.replace("ul.menu li.active a", {color:'#000000'});

Это может понадобится например в следующем случае:

1
2
Cufon.replace("ul.menu li a");
Cufon.replace("ul.menu li.active a", {color:'#000000'});

При вызове первого рендерера, Cufón правильно определит цвет для всех ссылок в меню, согласно правилам , однако он не будет ходить дальше и выяснять, есть ли у нас дальше какие-то отличия, потому одна из ссылок может быть показана белым цветом на белом фоне. Для исправления подобной ситуации и служит вызов второго рендерера.

Подобным образом можно прописывать не только цвет, а и практически все свойства , относящиеся к тексту. Кроме того, есть возможность заполнить текст градиентом, но это непонятно зачем нужно, а кому очень уж хочется, отсылаю к странице руководства, где это хорошо описано. wiki.github.com/sorccu/cufon/styling

Еще стоит обратить внимание на тот момент, что замена шрифтов происходит только в момент вызова рендерера:

Cufon.replace("h1.alala");

Произведет замену для всех элементов h1 с классом alala, если вы в дальнейшем с помощью скрипта присвоите класс alala, для другого h1, то там замена текста не произойдет! Так что не забывайте после манипуляций производить вызов рендерера.

Пример

Было:
cb
Стало:
ca

Спасибо хабрахабру!

]]> http://webkev.com/2010/03/09/cufon-%e2%80%93-ispolzujte-shrifty-kakie-dusha-pozhelaet/feed/ 0 Нестандартные шрифты на сайте http://webkev.com/2010/03/09/nestandartnye-shrifty-na-sajte/ http://webkev.com/2010/03/09/nestandartnye-shrifty-na-sajte/#comments Tue, 09 Mar 2010 16:43:44 +0000 K_E_V_in http://webkev.com/?p=576 Сам я не рекомендую использовать нестандартные шрифты на сайтах, но иногда приходится. Для подключения их к сайту использовать можно следующий -код:

1
2
3
4
5
6
7
8
@font-face {
font-family: "myfont";
src: url('../fonts/font.eot');
src: url('../fonts/font.otf') format('opentype'), url('../fonts/font') format('svg'), url('../fonts/font.ttf') format('truetype');
}
p {
font-family: myfont;
}
]]> http://webkev.com/2010/03/09/nestandartnye-shrifty-na-sajte/feed/ 0 горизонтальные линии hr http://webkev.com/2010/03/01/gorizontalnye-linii-hr/ http://webkev.com/2010/03/01/gorizontalnye-linii-hr/#comments Mon, 01 Mar 2010 11:46:29 +0000 K_E_V_in http://webkev.com/?p=553 Вот примерчик горизонтальной линии. Пишу больше для себя, чтобы было откуда брать готовый код для своих проектов.

Итак: толщина 1 пиксель без рамки (это именно то, что используется наиболее часто)

1
2
3
4
color:#000;
background-color:#000;
height: 1px;
border-width:0px;
]]> http://webkev.com/2010/03/01/gorizontalnye-linii-hr/feed/ 0 Стандартные шрифты для сайта http://webkev.com/2010/02/18/standartnye-shrifty-dlya-sajta/ http://webkev.com/2010/02/18/standartnye-shrifty-dlya-sajta/#comments Wed, 17 Feb 2010 21:53:51 +0000 K_E_V_in http://webkev.com/?p=551 Данная заметка скорее для меня самого. Но может кому также понадобится.

Вот список шрифтов, которые рекомендуется использовать для сайтов:

1. Arial
2. Verdana
3. Times
4. Times New Roman
5. Georgia
6. Trebuchet MS
7. Sans
8. Sans
9. Comic Sans MS
10. Courier New
11. Webdings
12. Garamond
13. Helvetica
]]> http://webkev.com/2010/02/18/standartnye-shrifty-dlya-sajta/feed/ 0 Футер внизу страницы. Мытарства закончены http://webkev.com/2010/02/13/futer-vnizu-stranicy-mytarstva-zakoncheny/ http://webkev.com/2010/02/13/futer-vnizu-stranicy-mytarstva-zakoncheny/#comments Fri, 12 Feb 2010 21:50:32 +0000 K_E_V_in http://webkev.com/?p=545 Итак, классическая для последнего времени проблема: необходимо прицепить блок футера вниз страницы таким образом, чтобы при количестве контента меньше высоты экрана он был внизу, а при увеличении контента скатывался под него.

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

Итак, вот кроссбраузерный валидный результат, позволяющий цеплять футер в самый низ страницы.

Для начала файл с комментариями

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Подвал должен быть внизу</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="ie6.css" rel="stylesheet" type="text/css" />
< ![endif]-->

</head>

<body>

<div id="wrapper">

    <div id="content">
        CONTENT HERE
    </div>
   
    <div id="footer">
        <div id="footer_content">
            FOOTER HERE
        </div>
    </div>

</div>

</body>
</html>

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

А вот и

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
* {margin:0; padding:0}
</p><p style="text-align: justify">html {height:100%;}</p>

<p style="text-align: justify">body {
margin:0;
padding:0;
height:100%;
}

#wrapper {
min-height:100%;
position:relative;
}

#content{padding-bottom:145px;}

#footer {
height:145px;
width:100%;
position:absolute;
bottom:0;
background: #ccc;
left:0; //без этой штуки опера отказывается опускать футер вниз
}

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

]]> http://webkev.com/2010/02/13/futer-vnizu-stranicy-mytarstva-zakoncheny/feed/ 2 Убираем полосу прокрутки из textarea http://webkev.com/2010/01/25/ubiraem-polosu-prokrutki-iz-textarea/ http://webkev.com/2010/01/25/ubiraem-polosu-prokrutki-iz-textarea/#comments Mon, 25 Jan 2010 09:57:45 +0000 K_E_V_in http://webkev.com/?p=528 Сегодня предлагаю вам простой метод, позволяющий убрать ненужный правый скроллбар в текстовых полях формы. Не думаю, что нужно объяснять для чего это делается. Всё и так предельно ясно.

Итак, имеется следующая стандартная конструкция:

1
<textarea cols="20" rows="20"></textarea>

Чтобы убрать правый скроллбар вставляем следующее:

1
<textarea style="overflow:hidden" cols="20" rows="20"></textarea>

Всё, можете пользоваться!

]]> http://webkev.com/2010/01/25/ubiraem-polosu-prokrutki-iz-textarea/feed/ 0 Используем list-style-image http://webkev.com/2010/01/20/ispolzuem-list-style-image/ http://webkev.com/2010/01/20/ispolzuem-list-style-image/#comments Tue, 19 Jan 2010 21:43:55 +0000 K_E_V_in http://webkev.com/?p=527 В своем очередном проекте по созданию сайта столкнулся с интересной задачей: необходимо маркер списка задать рисунком. Оказывается, есть такая фича, как list-style-image, которая именно это и делает.

list-style-image работает корректно во всех браузерах и на ура проходит валидацию. А валидация в деле создания сайтов – вещь далеко не последняя.

Буквально только что обнаружил одну интересную особенность, которая заключается во взаимосвязи тегов ul и li. Если задать list-style-image для ul, то первый элемент будет как бы пустым, а всё остальные нормально отобразятся. Пофиксим эту штуку

Итак, вот небольшой пример по использованию ():

1
2
ul {list-style:none}
li {list-style-image:url(../images/list_line.gif);}

Используя этот простой метод, можно заставить свои списки выглядеть более привлекательно, а сайты – более современно.

  • Отличный портал о xoops. Будет полезно разработчикам на этой КМС-ке.
]]> http://webkev.com/2010/01/20/ispolzuem-list-style-image/feed/ 0 Имя класса с пробелом. Копаем вглубь http://webkev.com/2010/01/19/imya-klassa-s-probelom-kopaem-vglub/ http://webkev.com/2010/01/19/imya-klassa-s-probelom-kopaem-vglub/#comments Tue, 19 Jan 2010 09:38:05 +0000 K_E_V_in http://webkev.com/?p=525 Часто при создании сайтов сталкиваюсь с ситуацией, когда в имени класса присутствуют пробелы, например:

1
class="myclass field12"

Как же добраться к этому классу из ? Чаще всего нет возможности влезть в CMS, чтобы изменить эти поля, да и многие функции могут перестать работать. Что же делать с подобной организацией -классов?

Оказывается, что всё очень просто и понятно: необходимо обращаться к надклассу, а затем можно получить доступ и к внутреннему. В нашем примере это будет выглядеть примерно так:

1
.myclass .field12 {color:white}

Пользуйтесь.

  • Мне тут предложили авиабилеты в Дрезден по низким ценам. Знаю, что там проходят конференции как раз по моей тематике. Если начальство оплатит – полечу!
]]> http://webkev.com/2010/01/19/imya-klassa-s-probelom-kopaem-vglub/feed/ 0 DIV: резина + фиксированная верстка http://webkev.com/2009/12/25/div-rezina-fiksirovannaya-verstka/ http://webkev.com/2009/12/25/div-rezina-fiksirovannaya-verstka/#comments Fri, 25 Dec 2009 20:55:32 +0000 K_E_V_in http://webkev.com/?p=520 Задача в принципе стоит простая: есть три колонки. Первая привязана к левому краю и имеет фиксированную ширину, вторая привязана к правому краю и имеет фиксированную ширину, третья располагается между первыми двумя и занимает всё оставшееся место. Согласитесь, создание сайтов с такой структурой довольно часто встречается. Я сам написал сайт недорого по такой структурке.

Давайте разбираться. Создадим страничку со следующей структурой:

1
2
3
4
5
<div id="header">
<div id="logo"></div>
<div id="zapoln"><div>
<div id="rightblock"></div>
</div>

Для этой странички прописываем следующий -код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#header {
height:95px;
padding-left:492px;
padding-right:146px;
}
#logo {
width:492px;
height:95px;
float:left;
background:url(../images/logo.png) no-repeat left;
margin-left:-492px;
}
#zapoln {
background:url(../images/fon_header.png) repeat-x;
float:left;
height:95px;
width:100%;
}
#rightblock {
width:146px;
height:95px;
background:url(../images/rightblock.png) no-repeat right top;
float:left;
margin-right:-146px;
}

Думаю, комментарии тут излишни для тех, кто давно занимается созданием сайтов. Новичков, которые только начинают осваивать  технологию сайтостроения и пока что пишут сайты недорого жду в комментариях. Что неясно, спрашивайте.

  • Огромная барахолка мобильных. Только там я нашел новые версии нокиа в два раза дешевле
  • Моя давняя страсть – рыбалка. Только на речке можно отлично отдохнуть в тишине
]]> http://webkev.com/2009/12/25/div-rezina-fiksirovannaya-verstka/feed/ 0