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

Если раньше для поддержки мобильных устройств владельцам сайтов предлагалось разработать отдельный проект для мобильных устройств, например на поддомене m.example.com, то сегодня все решается благодаря адаптивной верстке, использование которой стало возможно, с внедрением media query (rules) в CSS3.

Данные медиа запросы/правила — это определенный набор стилей, которые написаны специально под мобильное устройство, имеющее определенный размер (разрешение) экрана. Принцип правил следующий: если устройство имеет размер экрана, подходящее под описанные верстальщиком условия, то применяются соответствующие символы.

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

Как же все таки проверить сайт на наличие адаптивной верстки? Все проще чем кажется: достаточно просто изменить размер окна бразуера и проверить как сайт себя поведет. Пример адаптивной верстки вы изображен на анимированном рисунке ниже (для просмотра кликните по изображению).

Как вы можете заметить, сайт подстраивается под любой размер экрана, и минимальной шириной, которую обычно поддерживают устройства — 320 пикселей. Однако, как показывает мой опыт, нередко можно встретить сайт, который подстроен под мобильные устройства, однако при изменении размера окна он не адаптируется до тех пор, пока размер окна не станет размером менее чем размер окна мобильного устройства.

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

Вот например на этом сайте мобильная версия «включается» поздно, и кнопка «Contact» закрывает собой пункты меню. В данном случае, было бы уместно дописать еще десяток строк CSS-кода для решения данной проблемы (для просмотра кликните по изображению). (сайты были найдены случайным образом, автор не пытается обидеть или оскорбить владельцев или разработчиков сайтов, представленных ниже в виде наглядных примеров)

В следующем примере вообще решили избавится от прокрутки (скроллов), в связи с чем абсолютно невозможно будет пользоваться сайтом на устройствах с маленьким разрешением экрана (для просмотра кликните по изображению):

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

Почему нельзя проработать адаптивность для всех размеров? Почему только мобильные, совсем маленькие устройства? (для просмотра кликните по изображению)

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

Создание темы для WordPress’a достаточно простая задача, ведь принцип работы WordPress достаточно простой и ясный: присутствуют сущности (post и page), и соответственно циклы для вывода ленты постов. Дальше — дело вашей фантазии. И я никогда не понимал людей, которые используют чужие шаблоны и имеют много неудобств с этим, ведь проще сделать самому!

Структура и основные файлы шаблона

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

Как видно на схеме, представленной в предыдущей статье, существует 7 основных типов вывода контента:

1. страница архива;
2. одиночная запись;
3. главная страница;
4. главная страница блога;
5. всплывающие комментарии;
6. страница 404 ошибки;
7. страница поиска.

Все эти типы страниц могут иметь свой вывод (шаблон) согласно иерархии шаблонов WordPress, и основным файлом (шаблоном) темы является файл index.php, к которому будет произведено обращение, в случае отсутствия иных файлов в теме, или будет использован стандартный вывод (шаблон): если к примеру у вас нет в файлах темы шаблона для вывода комментариев (comments.php), то будет использован шаблон по-умолчанию, встроенный в WordPress.

Каждый шаблон в WordPress имеет свое название, описание, имя автора, версию и иные параметры, которые выводятся в административной части и указываются во втором по значению файле style.css, который, если не ошибаюсь, автоматически подключается при его наличии в папке с темой.

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

/*

Theme Name: Nikita_Sp Blog
Theme URI: http://nikita-sp.com.ua/
Description: Nikita_Sp Blog Theme
Author: Nikita_Sp
Author URI: http://nikita-sp.com.ua
*/

Как видно на изображении, в моих данных не указана версия шаблона, и выводится только надпись «версия». Также я не писал описание и прочие данные, которые вы можете добавить к данным темы, т.к. они мне не особо нужны. Ниже представлен полный список данных, которые вы можете использовать при описании темы:

/*

Theme Name: Имя вашего шаблона
Theme URI: http://адрес-где-можно-ознакомиться.com/скачать-тему.html
Author: Собственно Автор
Author URI: http://адрес-автора.com
Description: Тут описание.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

*/

Таким образом, имея минимум два файла index.php и style.css, мы можем смело заявить о созданном WordPress шаблоне. Однако на этом мы не можем останавливаться, т.к. нам нужен очень красивый шаблон, который будет хоть как-то кастомизирован под нас.

Второстепенные файлы WordPress шаблона

Следующим этапом необходимо выделить следующие блоки нашей темы:

• comments.php
• comments-popup.php
• footer.php
• header.php
• sidebar.php

Разбор начнем, как и положено с нашей «шапки», т.е. с файла header.php. В данном файле вы создаете «шапку» сайта, т.е. начинаете свой документ. У данного файла есть определенные «правила хорошего тона»:

• Открывающий тег <html> должен содержать вызов функции language_attributes().
• Тег кодировки <meta> должен находится перед остальными тегами, включая тег <title>.
• Вызывайте функцию bloginfo() чтобы вывести <meta> теги кодировки и описаний.
• Используйте wp_title() чтобы установить заголовок <title>.
• Вызывайте get_stylesheet_uri() чтобы подключить файл style.css текущей темы.
• Добавьте вызов wp_head() перед закрывающимся тегом </head>, для того чтобы плагины могли подключать свои стили, скрипты и т.п.

Пример простого файла header.php приведен ниже:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo( 'charset' ); ?>" />
        <title><?php wp_title(); ?></title>
        <link rel="profile" href="http://gmpg.org/xfn/11" />
        <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
        <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
        <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
        <?php wp_head(); ?>
    </head>
    <body>

Также сюда добавляете начало вашего сайта, а именно основной контейнер, «шапочку», верхнее меню и любой другой контент, который вы считаете необходимым.

Для вызова файла header.php в (давайте их назовем, «теловых») файлах, файлах, которые выводят непосредственно сам контент страницы, вам необходимо использовать функцию get_header().

В файле footer.php также нет ничего сложного, тут мы закрываем все наши открытые контейнеры в файле header.php и добавляем вызов <?php wp_footer(); ?> для вывода администраторского меню при посещении сайта в соответствующем статусе, для работы плагинов и пр.

Пример простого кода файла footer.php приведен ниже:

<?php wp_footer(); ?>
</body>
</html>

Не забываем, также как и для файла header.php, подключить наш футер в «теловые» файлы используя get_footer().

Когда шапка и низ (футер) нашего сайта готовы, перейдем к созданию боковой колонки (сайдбара), за вывод которого отвечает файл sidebar.php. Сам файл сайдбара может быть пустым и содержать только контейнер самого сайдбара и вызов динамического сайдбара, где будут размещаться виджеты, настроенные из административной части.

Внимание! Для того чтобы пользоваться динамическим сайдбаром его необходимо еще зарегистрировать в файле functions.php!

Ниже вы можете ознакомиться с примером кода файла шаблона сайдбара с пояснениями:

<aside class="sidebar" role="complementary">
<?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar')){ ?>
<p>Тут контент, на случай если мы не добавили виджетов в наш сайдбар или просто пустота</p>
<?php } ?>
</aside>

Сайдбар подключается также как и файлы header.php и footer.php с помощью функции get_sidebar(). в каждом файле, где это необходимо. Регистрацию динамического сайдбара и подключение разных сайдбаров на разные страницы мы рассмотрим в следующей статье.

Теперь у нас есть вполне себе полноценный каркас нашего будущего шаблона под WordPress и мы смело можем приступать к верстке основных частей нашего сайта — шапки и футера. Дальше — интересней, подписывайтесь и следите за новыми статьями!

Очень часто работу дизайнера представляют как некую «аферу». Вроде работник ничего не делает, сидит себе, рисует, а деньги требует! Как это? За что? Мы же и сами можем справиться, зачем нам дизайнер? Но на самом деле не так все просто.

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

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

Прежде чем что-то делать — нужен план!

Слово «Design» заимствовано из английского, перевод которого может иметь несколько значений: дизайн, конструкция, проект, проектирование, рисунок, расчет, план, эскиз, чертеж.

К любой работе, как и к любому проекту, необходимо подходить основательно, например как к строительству дома. И перед тем как создавать сайт, или строить дом всегда производят подготовительные работы: делают расчеты, чертят план.

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

Встречают по одежке

Все прекрасно знают пословицу «Встречают по одежке, а провожают по уму», однако не все ей следуют, во всяком случае в интернет бизнесе, а зря. Ведь когда посетитель заходит на ваш сайт и видит нечто неопрятное, то первые мысли пользователя — закрыть вкладку.

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

Вопрос доверия

Многие сайты не имеют и 20% от возможной конверсии (конверсия — соотношение числа посетителей, выполнивших определенные действия на сайте, к общему числу). Почему? Да все просто — это вопрос психологии.

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

При всем при этом в общении оба одинаково любезны, стоимость и сроки выполнения услуги в их исполнении одинакова. К кому вы обратитесь?

Не забывайте, конкурент не дремлет, и каждый посетитель, ушедший от вас — ушел к вашему конкуренту!

Бренд и узнаваемость

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

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

В моем случае ответ был прост: просто удалите ресурс с Google Analytics и потом снова его добавьте! Получите новый код и установите на сайт. После переходим в режим реального времени, и вуаля! Все заработало!

QAndA

Задать вопрос

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

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

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

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

Если заказываете создание сайта, то Вам необходимо указать тип заказываемого сайта, какие функции реализовать на этом сайте, пожелания по дизайну и т.п.

Если Вас интересует раскрутка и продвижение сайта, то Вам необходимо указать какой сайт, по каким ключевым словам его необходимо раскрутить и т.п.

Во время создания сайта, не надо просить «дописать пару строк» и прикрутить, к примеру, еще подключение к Интерполу (утрирую :)) или еще что-то в этом роде. Необходимо сразу продумывать ТЗ (техническое задание), дабы потом не вышло казусов.

Вот в принципе и все рекомендации. Возможно я где-то не прав, но тем не менее, я думаю что у каждого разработчика были описанные моменты.

Создание сайтов Харьков, создание сайтов Украина, Создание сайтов Киев… Их так много! Выбор действительно не прост. И человеку, которому необходимо создать сайт придется его сделать.

Польза от сайта достаточно ощутима, и в связи с этим, сегодня, каждый человек, подключившийся к интернету, стремится себе сделать сайт. Стараясь обеспечить себя некой прибылью, получаемой от сайта. Естественно, практически себя не утруждая. Тем не менее, многие (приблизительно 90%) не добиваются долгожданного результата.

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

Следующим шагом будет выбор доменного имени. Доменное имя, а чаще называют его кратко «домен», — это Ваш адрес в интернете, по которому в будущем будет расположен созданный сайт. И так же выбор тарифного плана и заказ хостинга. Хостинг — виртуальное пространство, где именно будет храниться ваш сайт, с доступом интернет 24/7.

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

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

Определите целевую аудиторию.
Для того чтобы создать сайт, вы должны сначала определить целевую аудиторию, которая будет заходить на ваш сайт. Т.е. это те люди, которые будут изо дня в день посещать ваш сайт в поисках новой информации. Или же это те люди, которые интересуются вашим продуктом, и хотят его приобрести.

Удобность и юзабильность.
Следующим этапом в создании сайта является разработка концепции сайта. Как он будет выглядеть, структура, информация. «Юзабильность» вашего проекта — один из важнейших аспектов в создании сайта. Под юзабильностью подразумевается его удобство, легко-доступность информации, скорость загрузки страниц.

Вы можете провести аналогию на себя. Когда вы заходите на сайт, на которых ничего сразу не понятно, на которых страницы грузятся по минутам(!), что вы делаете? Конечно! Вы закрываете вкладку с этим сайтом и идете дальше по списку гугла!

Информативность.
Людям должно быть интересно заходить ваш сайт. Для этого их необходимо заинтересовать чем-то. Информативность — тоже достаточно важный аспект. Если на вашем сайте будет мало информации, или она будет неактуальна, то люди так же «сбегут» от вас.

Вывод:
Определите круг людей, интересующихся вашим сайтом. Делайте сайт приятным и легким к восприниманию. Заполняйте его актуальной и нужной информацией.

Как ты делаешь сайты? Ну, в какой программе?

Честно сказать, меня на самом деле раздражали такие вопросы, с одной стороны, но с другой, мне было приятно, но больше всего наверное раздражали :). Раздражали они меня наверное из-за того, что все те, кто задает такой вопрос, думают, что создать сайт — это понты. Открыл программу, «написал там чет и все! Готово, епт!». (Вспомнился мультик «Вовочка в тридевятом государстве», где главный герой говорит, запихивая бочку теста в печку, «ииии таааак сойдет!»). Ну а приятно, наверное, из-за того что было чувство, что я умею нечто особенное, чего мои сверстники еще не умеют.

В чем создаются сайты?
Ну, да ладно обо мне, да обо мне. Поговорим о создании сайтов. Я сейчас разгоню мысли людей, которые думают, что разработать сайт — это открыть программу и «писнуть» пару строк. Создаются сайты в обычном блокноте. Вы удивлены? Да-да, я не описался, в блокноте. Ну, я еще использую Php Expert Editor. Очень интересная программулина. Использую я ее по трем причинам:

1. Подсветка кода и отображение положения скобок в функциях;
2. Изменение кодировки файла между ANSI и UTF-8;
3. Она бесплатна для всех жителей России, Украины и бывших стран СНГ. (Так держать, разработчики!)

Для разработки сайта необходимы знания хотябы html (css так же приветствуется) ну и собственно наличие блокнота или другого текстового редактора.

Я создал первый сайт!
Если вы сейчас полезли в гугл за учебником по html и запустили блокнот, и планируете создать мего-портал всея web’a, то не спешите. Да, вы напишите там какой-то сайт (в интернете продвинутые разработчики называют сайты новичков «говно-сайтами»), и что дальше? Могу сразу, не глядя на ваш «шедевр» отметить на нем несколько нюансов, которые выделяют ваш «сайт» из ряда хороших web-сайтов:

• Отсутствие дизайна как такового (для хорошего и красивого сайта необходим дизайнер, или хотя бы наличие зачаточных данных по дизайну у вас, для обыденного сайта);
• Необходимость. Ну создали вы свой сайт, и что дальше? Никто туда не будет заходить кроме ваших друзей, или знакомых. Сайты создают себе фирмы, компании, частные предприниматели, люди, которым есть либо что показать, либо что рассказать. А что есть у вас на сайте, интересного другим людям?

Но это не значит что не нужно пробовать и заниматься, учиться, т.к. ни один web-разработчик не был таковым с рождения.

Вывод.
Снова повторюсь, учите, пишите, пробуйте. Но! Не надо хвастаться или просить на форумах чтобы люди «оценили мой сайт».  Просто работайте над собой. Смотрите другие сайты в интернете, и совершенствуйтесь, пытаясь им подражать, а может и «обскакать» их.

WAP-сайт, Siemens A62, не знание дела, 2005г.
Итак, все мы рождаемся обычными людьми, «чистыми» как лист бумаги. Но в течении жизни каждый заполняет свой «лист» тем, что ему нравится, чем он интересуется, тем, что вокруг человека.

Мне в свое время, а это был где-то 7 класс (2005 год), один одноклассник показал конструктор wap-сайтов (kmx.ru). И нас почему-то потянуло на создание сайта на этом конструкторе.

По началу, было как-то все не понятно. Какие-то коды (html-теги), опции. Непонятно. Мне стало неинтересно, и я забросил это дело почти на пол года-год.

Спустя некоторое время меня снова потянуло на создание сайта. Было это в Июне 2006. На моем том сайте (до сих пор еще висит, не удалили ) видно что

Администратор — Nikita
Сайт создан 15.06.2006
г.Харьков

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

Народ.ру, html+javascript, компьютер, потуги разобраться, 2006-2007г.
Позже, у меня появилась возможность выходить в интернет с компьютера. Тут я зашел на народ.ру. И что я там увидел? Создание сайтов! Отлично, регистрируемся, так…начинаем создавать! Но тут мне понадобилось все редактировать. А как? Открываю html код, а там одни символы. Просто набор непонятных символов! Что делать? Я начал искать закономерности, пытаться разобраться, но к сожалению ничего не вышло в ближайшее время.

Позже, ближе к 2007, я скачал себе html учебник и начал читать. На изучение html у меня ушло меньше недели. А может и вообще пару вечеров, не помню. Но смысл в том, что я начал разбираться что значат все эти непонятные иероглифы.

Освоив html, я начал понемногу косить в сторону javascript (далее ‘js’). Я начал пихать потихоньку js на свой сайт на народе. Вскоре сайт был настолько забит js’aми, что в глазах рябило. Но к тому времени мне уже был не интересен народ.

Бесплатный хостинг, php, разбираемся, набираем опыт, 2007-2008г.
Летом 2006 или 2007 года, отдыхая в лагере, мне посчастливилось попасть в комнату с одним мальчиком, который как и я занимался «разработкой сайтов«. Мы с ним общались, поддерживали контакт. Мне было чему у него учиться. Он шел всегда на шаг впереди меня, возможно из-за разницы в возрасте у него был приоритет. И вот я ему показываю свой «супер сайт», перегруженный js. И он мне говорит:

А ты знаешь, что вообще есть такие «движки», которые ты просто устанавливаешь и потом через администраторскую панель и визуальный редактор изменяешь весь сайт! И это ведь много страниц, тебе не надо по одной редактировать!

И он мне показал мой первый движок PHP-FUSION. Я перешел на php. И тут уже народ.ру был уже не актуален, т.к. он не поддерживает php. Что ж, пришлось искать бесплатные хостинги. К тому времени я со своим одноклассником скооперировался и мы решили вместе «работать».

Остановились мы на холм.ру. Там было все что нам нужно, единственным изъяном была реклама. Но тогда, двух, ослепленных желанием разобраться и научиться, школьников она особо не раздражала. Мы поставили движок и начали «создавать» варез-портал.

Естественно идея не увенчалась успехом. Тем не менее, в ходе попыток воплотить идею в реальность, к нам приходил опыт. Мы начинали разбирать коды, ставить модули, плагины.

Вывод. С чего начать учить создание сайтов?
Итак, подведем итоги. Для того чтобы начать создавать сайты необходимо:

• желание и тяга к самостоятельному обучению и усовершенствованию;
• изучать связку html и css;
• изучать javascript;

Продолжение истории и самой статьи читайте в следующей статье «Первый сайт на заказ»