Вредоносное ПО (malware) - это назойливые или опасные программы,...
В прошлой статье мы сделали каркас нашего HTML шаблона , который готов к его заполнению и оформлению. Сегодня я расскажу как красиво сделать шапку сайта (верхнюю часть) и простенькое меню. Также сегодня внесем немного изменений в стили других блоков.
Итак, что мы имеем на данный момент? Сейчас у нас вот такие стили:
Html, body { height:100%; color: #000; background: #FFFFFF; word-wrap: break-word; font-size: 12px; font-family: Verdana, Arial, Sans-Serif; } #wrapper { height:auto !important; height:100%; min-height:100%; } #header { height:100px; } #container { min-width:800px; } #center { margin:0px 200px 0px 200px; } #left { float:left; width:200px; } #right { float:right; width:200px; } #footer { height:100px; margin-top:-100px; } .clear { clear:both; } #space { height:100px; }
И вот такой код самого шаблона:
название сайта
Первым делом внесем немного изменений в стиль обволакивающего блока wrapper:
#wrapper { height:auto !important; height:100%; min-height:100%; width: 1024px; margin: 0 auto; text-align: left; }
Я поставил фиксированную ширину - width блока, размером 1024 пикселя, выровнял сам блок по центру, а текст в нем по левому краю с помощью text-align:left. Выровнять блок по центру мы можем с помощью стиля margin, задав величину отступа сверху и снизу 0, а по ширине auto. К сожалению, это не всегда работает в Internet Explorer 6, поэтому в body я прописал text-align: center; и именно поэтому мне пришлось выравнивать текст в обволакивающем блоке и подвале по левому краю. Также в body я указал margin:0, тем самым задав отступы от краев 0 пикселей. В итоге у Body получились вот такие стили:
Html, body { height:100%; color: #000; background: #FFFFFF; word-wrap: break-word; font-size: 12px; font-family: Verdana, Arial, Sans-Serif; margin: 0; text-align: center; }
Также я внес изменения и в подвал:
#footer { width: 1024px; margin: 0 auto; text-align: left; height:100px; margin-top:-100px; background: #4a90d9; }
Тут все аналогично блоку wrapper: установил ширину 1024px, выровнял блок по центру, а текст по левому краю. Также добавил в container отступ от шапки margin-top: 20px; и убрал минимальную ширину, так как у нас фиксированная ширина обволакивающего.
Ну что ж, шаблон мы подготовили, пора перейти и к шапке сайта. Стили будут такими:
#header { height:140px; background: #fff; padding-top: 40px; }
Высота блока 140px, фон белый, а величина отступа от верхнего края 40 пикселей. Вот и все изменения в стилях шапки.
Что? Это всё? И в честь этого названа целая статья?
Конечно, нет. Шапка сайта будет состоять из других элементов: логотипа и меню, которые будут оформлены отдельно.
Пропишем в код HTML шаблона
внутри блока header вот такую строчку:
По сути это ссылка на главную страницу без текста, однако ей присвоен класс class="logo". Теперь нужно его оформить в стилях css.
Logo { display:block; height: 104px; width: 390px; background: url("image/logo.png") no-repeat; }
Я сделал элемент блочным, задал ему ширину и высоту, а также сделал фоном картинку-логотип, которую положил в директорию image. В этой директории будут располагаться все картинки шаблона. Размер картинки 388*100 пикселей, почему же тогда размер блока немного отличается? Высоту я сделал 104 пикселя, чтобы был отступ от картинки-логотипа внизу между будущим меню и логотипом, а ширину взял на два пикселя больше на всякий случай, так как сталкивался пару раз с тем, что Mozilla неправильно определяла размер картинки и немного её обрезала. Все, с логотипом закончили. Меню в
Итак, продолжаем разговор. В прошлом посте я вам рассказала о том, зачем нам, собственно, нужен фидбек, и что это такое. В этом - познакомлю вас с правилами фидбека, и поговорю немного о том, как и где его применять.
9 принципов фидбека.
Итак, перед вами 9 принципов фидбека. Я их, конечно, не придумала, но собрала за годы работы, и сформулировала очень простым и понятным языком - я считаю, что такая полезная информация должна быть доступна и ясна всем, без лишних терминов и сложноподчинённых предложений.
К каждому из принципов я дам пример - тоже очень простой, но, я надеюсь, он сделает принципы более понятными. Кроме этого, разбавлю своими мыслями. Поехали!
1. Фидбек - это важнейший инструмент во всех сферах жизни, и тем более в общественной деятельности и в работе с людьми. Пользуйтесь им!
Про важность фидбека я писала в прошлом посте, здесь я хочу написать про его использование. Я считаю, что чем больше людей будут знакомы с фидбеком и его принципами, тем легче всем нам будет жить. Он применим в работе, в ежeдневном общении с людьми, в семье. Но! Очень важно с ним не переборщить. Моя преподавательница на курсах ведения групп раз сказала:"Я поняла, что мне нужно взять отпуск, когда я начала давать фидбек мужу и детям, чётко слeдуя его принципам." Мне очень запало в душу это её высказывание. Поймите меня правильно, я уверена, что фидбек мужу, детям, маме и тёще может идти только на пользу. Но не стоит забывать, что семья - это наше безопасное место, и там должно быть пространство для необъяснимых эмоций, глупых высказываний, бесцельных проявлений любви, странностям, наконец. В семье очень важно найти баланс между фидбеком и обычными человеческими эмоциями. Это важно везде, но в семье - особенно.
2. Фидбек даётся из желания помочь, улучшить, поддержать и направить человека.
Этот принцип крайне важен. Перед тем, как давать фидбек, остановитесь на секунду и подумайте, зачем вы хотите его сказать. Ваша подруга хочет идти на первое свидание в юбке, которая очень портит её прекрасную внешность, а вам хочется, чтобы её свидание прошло хорошо, вы за неё волнуетесь? Говорите. Вас раздражает запах духов вашей коллеги, и она сама, и у вас уже месяц чешется язык высказать ей всё, что вы думаете о её удушливом аромате? Это не фидбек, друзья. Тут, наверное, лучше промолчать.
3. В процессе фидбека ваша задача приводить конкретные примеры и факты, а не абстрактные и эмоциональные высказывания.
Тут всё просто. "Вася, блин, ты козёл, ну что за хрень ты тут мне написал!" - это не фидбек, и он вряд ли пойдёт кому-то на пользу. "Вася, ты не прав. Я тебя просил написать мне список всех клиентов с фамилиями из трёх букв, а ты мне написал список работников с фамилиями из четырёх букв. Мне будет гораздо легче, если ты будешь более внимательно слушать мои просьбы." Это фидбек. Вася, может, и козёл, но после первого предложения он козлом о останется. После фидбека же есть шанс, что в следующий раз вы получите от него то, что вам нужно.
4. Выбор правильных слов и формулировок крайне важен в процессе фидбека - помните, что перед вами сидит человек, который вам важен, или же вам важна интеракция с ним (это на работе, как правило)
.
Этот пункт напрямую вытекает из предыдущего. Перед тем, как давать фидбек, ПОДУМАЙТЕ, что именно вы хотите сказать, и чего им добиться. Существует так называемый "принцип сендвича", я к нему довольно равнодушна, но многие находят его полезным, почему нет. Он гласит о том, что в фидбеке нужно располагать аргументы, как хлеб и сыр в бутерброде. Начинаем с положительного (хлеб), продолжаем отрицательным (сыр), и заканчиваем снова положительным. Я думаю, это излишняя отточенность, но если вам нравится - берите и пользуйтесь.
5. Желательно не использовать слово "но" в фидбеке (всё мне понравилось, но...). Оно отменяет и перечёркивает то, что было сказано до него.
Если ваш фидбек содержит и положительные и отрицательные моменты, то просто разделите их, скажите их в разных предложениях. Ведь они не зависят друг от друга, и не отменяют друг друга. Ваша подруга, пришедшая к вам советоваться относительно новых одёжек, скорее расcтроится, если вы ей скажете "Юбка-то ничего, но туфли абсолютно дурацкие". Зато если вы скажете "Мне нравится эта юбка, она отлично на тебе сидит, стройнит и цвет твой. Туфли мне не нравятся, мне кажется, это не твой стиль, да и цвет неудачный". Это к слову о "правде в глаза". Фидбек позволяет нам говорить эту правду, не рискуя обидеть друзей, или рассориться с коллегами. Конечно, у меня есть подруги и члены семьи, с которыми прокатит и "дурацкая юбка" и даже "ноги кривые", но таких людей у нас всех мало, поэтому см. пункт 1.
6. Помните, что хороший фидбек это тот фидбек, который даст возможность человеку, его получающему, что-то улучшить. Помните также, что никто не обязан соглашаться с вашим фидбеком и его принимать - ведь вы всегда субъективны.
Вот это, друзья, крайне важный момент. Давайте не забывать, что подруга с дурацкими туфлями, скорее всего, продолжит в них ходить. И наше мнение - это не есть мнение в последней инстанции. В лучшем случае мы можем надеяться, что оно будет учтено в той или иной мере. В другом же случае - наше мнение может так и остаться только нашим, и это НОРМАЛЬНО. Ведь мы сами далеко не всегда принимаем мнение дающего нам фидбек, будь он трижды лауреат Нобелевской премии или родная мама. Так что оставляем решение - принимать или не принимать фидбек у офидбеченной стороны.
7. В фидбеке не должно быть осуждения, а должно быть отражение ТОЛЬКО ваших мыслей и ощущений по поводу получателя фидбека в конкретной ситуации.
Да-да, как только мы осуждаем, наш фидбек теряет свою ценность, мне кажется, тут даже пример не нужен, и так всё ясно.
8. Если вы являетесь получателем фидбека, не забудьте поблагодарить того, кто вам этот фидбек даёт. С полученными знаниями нужно проделать работу, отделить зёрна от плевел и постараться их применить. Фидбек - это ценный подарок!
Сложно, правда? Но уметь получать фидбек не менее важно, чем его давать, я думаю.
9. Очень важно в процессе фидбека не потерять фидбек положительный - он не менее важен, чем фидбек отрицательный!
Есть у многих из нас такая установочка - чтобы человек учился, нужно его ругать. Такой пережиток совка. Ну так вот - фигня это, знаете ли. Мы обязаны помнить, что фидбек это не только конструктивный и аккуратный перечень недочётов, но и непременное обозначение плюсов и поиски хорошего. Вы ведь говорите мужу не только "Дорогой, ты пересолил суп!", но и "Милый, какие вкусные булочки ты испёк!" :) Ведь если муж будет слышать всё время только про пригоревшие котлеты и про пересоленный суп, довольно быстро он перестанет готовить. Так и в других сферах - не забывайте хорошее, а лучше - начинайте именно с поисков его.
Я хочу привести вам пример очень важного фидбека, который я получила. Пример очень личный, но мне важно рассказать вам об этом опыте, что бы показать реальное действие этого инструмента не только на абстрактных Васях Пупкиных из моих примеров.
Примерно год назад моя ближайшая подруга позвала меня в кафе. Илану, моему сыну, было 3 месяца, я только-только начала вылезать в мир из подгузников и колясок. Я думала, мы будем болтать о нашей тёткинской фигне. А она сказала, что ей надо поговорить со мной о наболевшем. Она мне рассказала, что ей очень не хватает меня. Что в последние полгода я совершенно погрузилась в себя и в семью, что я нe говорю с ней по телефону, не рассказываю ей ничего ни про беременность, ни про сына, не слушаю её проблемы и радости. Она сказала, что очень по мне соскучилась, и не знает, что будет дальше с нашими отношениями, так как мы отдаляемся, и я абсолютно не в курсе её новостей. Она добавила, что у неё в жизни очень непростой период, и ей очень нужнa моя поддержка.
Это был настоящий фидбек. Она говорила о своих чувствах, приводя примеры конкретных ситуаций. Она не осуждала меня за моё погружение в семью, она говорила о том, чего бы ей хотелось от наших отношений, и как этого можно достичь. Было видно, что она говорит это не только для себя, но и для меня.
А для меня это было абсолютной новостью! Я настолько погрузилась в новорожденного сына, а до того - в беременность, что не заметила, как отдалила от себя самых близких и очень важных мне людей! Я до сегодняшнего дня в шоке от того, насколько я не осознавала своё поведение.
Что было бы, если бы она не поговорила тогда со мной? Скорее всего, череда обид: "почему ты мне не звонишь?" "сто лет опять не виделись" "тебя не интересует моя жизнь" и т.д.
Что было на самом деле? Я "проснулась". Я чётко сказала ей, что я никуда не хочу деваться, что люблю её, и что я возвращаюсь. Я взяла себя в руки, и мы назначили сразу несколько "свиданий" на ближайшие месяцы. Я стала чаще звонить, и стараться брать трубку, когда звонила она. А ещё - ещё я поехала в гости к другой подруге, которой сложнее давать такого рода фидбеки, и задала ей вопрос уже сама. И оказалось, что и она чувствует себя так, как первая - представляете? Представляете, как много хорошего вышло из одного фидбека? Я сохранила отношения с двумя очень важными мне людьми. И очень моей подруге благодарна за тот разговор.
В завершение я хочу сказать, что в жизни есть не только фидбек. В ней существуют ссоры, секс, глупости, споры, баловство, юмор, обиды, любовь, комплименты, смех и ещё много всего другого. И всё это имеет право на существование - как разные аспекты межличностного общения. А с фидбеком просто чуть легче жить.
На этом уроке мы познакомимся с функцией mail () , на примере создания формы обратной связи на PHP с последующей отправкой полученных данных на почту.
Для этого создадим два файла - forma.php и mail.php . В первом файлике будет находиться только форма с полями для ввода пользователем данных. Внутри тега form - кнопка "Отправить" и атрибут action , который ссылается на обработчик - mail.php , именно к нему обращаются данные из формы при нажатии кнопки "Отправить" . В нашем примере данные формы отправляются на веб-страницу с названием «/mail.php» . На этой странице прописан скрипт на PHP , который обрабатывает данные формы:
Данные формы отправляются методом POST (обрабатывается как $ _POST ). $ _POST - это массив переменных, переданных текущему скрипту через метод POST .
Ниже вы видите содержимое файла forma.php , поля которой заполняет сам пользователь на каком-нибудь веб-сайте. Все поля для ввода данных обязательно должны иметь атрибут name , значения мы прописываем сами, исходя из логики.
Форма обратной связи на PHP с отправкой на почту
Форма обратной связи на PHP
Оставьте сообщение:
Ваше имя:
E-mail:
Номер телефона:
Сообщение:
Текстовая область может содержать неограниченное количество символов-->
Так форма визуально выглядет в браузере.
Далее пишем код для файла mail.php . Придумываем сами имена для переменных. В PHP переменная начинается со знака $ , а затем имя переменной. Текстовое значение переменной заключается в кавычки. С помощью переменных на емайл администратора передается содержимое формы, просто подставив в квадратные скобки имя элемента формы - значение name .
Таким образом данные из массива $_POST будут переданы соответствующим переменным и отправлены на почту при помощи функции mail . Давайте заполним нашу форму и нажмем кнопку отправить. Не забудьте указать ваш е-майл. Письмо пришло моментально.
Привет, Друзья! Хочу представить вашему вниманию универсальный скрипт отправки данных из форм на email . Скрипт идеально подойдет для сайтов типа Landing Page , сайтов визиток и т.д. Наш скрипт Формы обратной связи выделяется среди массы остальных скриптов в интернете тем, что имеет возможность подключения неограниченного количества форм с разными полями на одной странице и способен отправлять письма нескольким получателям .
Итак. Давайте приступим. Начнем пожалуй с возможностей скрипта.
Скрипт работает на основе библиотеки , поэтому первое что нам необходимо сделать это подключить ее. Для этого рекомендую воспользоваться Google Hosted Libraries.
О остальных файлах давайте подробнее:
feedback.js
- основной файл скрипта, отвечает за AJAX отправку формы
.
jquery.arcticmodal.js,
jquery.arcticmodal.
- обеспечивают возможность вывода форм в модальном окне.
jquery.jgrowl.js,
jquery.jgrowl.css
- позволяют выводить уведомления на странице (блоки в верхнем углу страницы).
Обязательным атрибутом для всех элементов формы является атрибут name="" - необходим для последующей настройки формы.
Для кнопки (type=«button») обязательно нужно указать class=«feedback» . Так же хочу обратить ваше внимание на то, что в качестве кнопки может выступать любой html тег с классом «feedback».Вызов формы в модальном окнеДля вызова формы в модальном окне сперва нужно определить действие по нажатию на какой либо тег, например div с классом modal_btn
Вызов формы в модальном окне $(document).ready(function() { $(document).on("click", ".modal_btn", function(){ $("#small-modal").arcticmodal(); }); });
Так как форма должна быть видна только в модальном окне ее нужно скрыть, поместив в div с атрибутом style=«display: none;», а также для стилизации модального окна обернуть в парочку стандартных дивов.
x
Вот мы и разобрались с основными настройками подключения нашего скрипта отправки форм на E-mail. Давайте теперь заглянем во внутрь и разберемся с настройкой полей, уведомлений да и всего остального, что там есть.
Пример настроек для одной формыНастройки всех форм хранятся в файле feedback\index.php$form["form-1"] = array("fields" => array("name" => array("title" => "Имя", "validate" => array("preg" => "%%", "minlength" => "3", "maxlength" => "35",), "messages" => array("preg" => "Поле [ %1$s ] возможно содержит ошибку", "minlength" => "Минимальная длинна поля [ %1$s ] меньше допустимой - %2$s", "maxlength" => "Максимальная длинна поля [ %1$s ] превышает допустимую - %2$s",)), "tell" => array("title" => "Телефон", "validate" => array("preg" => "/^((8|\+)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{5,10}$/", "minlength" => "5",), "messages" => array("preg" => "Поле [ %1$s ] возможно содержит ошибку", "minlength" => "Минимальная длинна поля [ %1$s ] меньше допустимой - %2$s",)),), "cfg" => array("charset" => "utf-8", "subject" => "Тема письма", "title" => "Заголовок в теле письма", "ajax" => true, "validate" => true, "from_email" => "[email protected]", "from_name" => "noreply", "to_email" => "[email protected], [email protected]", "to_name" => "noreply1, noreply2", "geoip" => true, "referer" => true, "type" => "html", "tpl" => true, "antispam" => "email77", "antispamjs" => "address77", "okay" => "Сообщение отправлено - OK", "fuck" => "Сообщение отправлено - ERROR", "spam" => "Cпам робот", "notify" => "color-modal-textbox", "usepresuf" => false)); // Следующая форма $form["form-2"] = array("fields" => array(.....
Для добавления настроек новой формы, нужно по примеру массива $form["form-1"] создать новый массив $form[""]
Помните я говорил о обязательном атрибуте name=""
?
Так вот пришло время рассказать для чего же он все таки нужен.
name="" - это буквенно-цифровой ключ для массива, должен быть уникальным для массива $form[""]
Пример html кода для наглядности
Теперь давайте разберемся с массивами и для чего они нужны.
$form["form-1"] = array();
$form["form-2"] = array();
и т.д.
Это основные массивы для каждой новой формы, содержат в себе:
- "name" => array();
- Массив настроек элемента формы (например input name=«name» type=«text»
) который имеет ряд настроек.
- "title" => "Ваше имя" - название элемента формы, будет выводится при ошибках или в шаблоне
- "validate" => array();
- массив, содержит правила валидации элемента формы
- "preg" => "%%" - регулярное выражение
- "minlength" => "3" - минимальный размер поля
- "maxlength" => "35" - максимальный размер поля
- "substr" => "35" - всегда обрезать до N символов
- "messages" => array();
- массив, содержит сообщения валидации, а именно:
- "preg" => "Элемент формы не соответствует регулярному выражению"
- "minlength" => "Минимальная длинна поля [ %1$s ] меньше допустимой - %2$s" - ошибка валидации, ключ(preg) не соответствие ключу валидации
- "maxlength" => "Максимальная длинна поля [ %1$s ] превышает допустимую - %2$s" - ошибка валидации, ключ(preg) не соответствие ключу валидации
- "charset" => "utf-8" - кодировка
- "subject" => "Тема письма", - Тема письма
- "title" => "Заголовок в теле письма", - Заголовок в теле письма
- "ajax" => true, - это аякс форма TODO (если не нужно, поставить - false)
- "validate" => true, - (true) если хотим валидацию формы на сервере, заменяет js валидацию при "ajax" => true. Когда выкл(false) то можно не задавать настройки validate полей. TODO
- "from_email" => "myemail", - отправитель, указать имя поля(name=«myemail»), а если не нужно email от пользователя, тогда заглушку [email protected]
- "from_name" => "myname", - отправитель, указать имя поля(name=«myname»), а если не нужно имени пользователя, тогда заглушку No-reply
- "to_email" => "[email protected]", - email получателя. Для отправки на несколько адресов перечислить их через запятую. Пример ("to_email" => "[email protected], [email protected], [email protected]",)
- "to_name" => "noreply1", - Имя получателя. При отправке на несколько адресов через запятую перечислить имена получателей. Пример ("to_name" => "noreply1, noreply2, noreply3",)
- "geoip" => true, - узнать местоположение по типу TODO
- "referer" => false, - добавлять URL страницы с которой была отправлена форма
- "type" => "plain", - тип письма - plain, html (если используются html теги)
- "tpl" => false, - использовать шаблон письма. Если true, то будет подключен файл шаблона, в соответствии с именем формы (name=«form-1»), из папки и обработан файл (feedback/tpl/form-1.tpl), в противном случае будет отправлено все как есть, каждое поле с новой строки
- "antispam" => "email77", - Анти спам, метод основан на скрытом (display:none) поле, которое автоматом заполняет только робот, тем самым выдает себя.
- "antispamjs" => "address77", - Анти спам, метод основан на скрытом (display:none) поле, изначально заполненное, которое автоматически очищает javascript при загрузке страницы, даже умный робот не может это предвидеть, и тогда он блокируется.
- "okay" => "Сообщение пользователю", - Сообщение пользователю, выводится при условии успешно отправленной формы, можно использовать html теги.
- "fuck" => "Сообщение пользователю", - Сообщение пользователю, выводится при возникновении ошибки отправки формы, можно использовать html теги.
- "spam" => "Сообщение пользователю", - Сообщение пользователю, выводится при подозрении на спам робот, можно использовать html теги.
- "notify" => "color-modal", - какой тип уведомлений показывать, textbox - блоки в верхнем углу страницы, color - цветная подсветка в форме, modal - модальное окно в центре страницы, none - отключить. Можно совмещать, пример: color-modal - ошибки заполнения подсветкой полей, а текстовый статус отправки в модальном окне TODO
- "usepresuf" => false - Используется ли кастомное добавление к теме либо к заголовку письма, на случай не большого изменения можно указать например %%cfg.title.suffix%%, для этого в форме должно быть скрытое поле, подробнее, см. ф-цю presuf()
Во-первых, для того, что-бы форма была отправлена в шаблоне, в настройках формы нужно включить использование файла шаблона - "tpl" => true ,
Во-вторых, нужно создать файл шаблона с расширением *.tpl в папке (feedback/tpl/ ), в соответствии с именем формы (name=«form-1» ).
Пример: (feedback/tpl/form-1.tpl
)
| Заголовок в теле письма | |
| %%name.title%% | %%name.value%% |
| %%tell.title%% | %%tell.value%% |
name
, tell
и т.д. - Это атрибуты (name="") полей которые заполняет пользователь.
title
- Название элемента формы, которое задается в массиве настроек элементов формы.
value
- Значение элемента формы.
На сегодня пока все, но скрипт конечно же не идеален, так что комментарии и описания багов приветствуются и в следующих версиях будут исправлены.
P.S. Скрипт разработан командой
