Статьи об основах создания сайтов


Содержание

Архив тега: статьи про создание сайтов

На странице собраны все публикации по метке «статьи про создание сайтов»

Почему именно WordPress стал так популярен и активно развивается?

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

Сервис WPGang — подборки профессиональных шаблонов и не только

Не секрет, что абсолютно все владельцы сайтов стремятся сделать их максимально красивым и удобными своим пользователям. К сожалению, не всегда люди, имеющие свои проекты в онлайне, хорошо разбираются в программировании и создании/верстке макетов. Как вариант, можно использовать системы по типу WordPress, что предлагают достаточно хороший выбор уже готовых дизайнов. Дабы подобрать для себя подходящую тему на помощь приходит сервис WPGang WordPress Themes о котором сегодня и пойдет…

Где взять уникальный контент для своего сайта?

Уникальный контент является самой значимой частью в процессе продвижения сайтов. Однако, первый вопрос, который задаст практически каждый начинающий вебмастер или блоггер: «где найти уникальный контент для своего сайта?». Способов добычи уникального контента существует достаточно много. В этой статье будут подробно описаны все основные способы получения уникального контента для своего сайта.

Продвижение сайта в блогах

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

Основы вёрстки сайтов: язык разметки и структура

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

Характеристики сайта

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

С чего начинать создание сайта

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

Базовые технологии: SOAP, связывания HTTP, заголовок HTTP SOAPAction

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

Создание дизайна сайта

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

Меню «Внешний вид» в WordPress

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

Отличия сайта от блога

Попытаемся перечислить главные признаки, по которым блог отличается от простого сайта. 1. График обновлений Как правило, блоги гораздо чаще обновляются (появляются новые статьи и заметки). Во многом из-за этого они лучше индексируются поисковиками, а главное – быстрее индексируются. Вести собственный блог – это регулярно публиковать интересные и увлекательные материалы, какие-то новости, личные занимательные истории, свои рассуждения и мысли по поводу чего-либо. Сайт может не обновляться…

Создание сайта на CMS Drupal

CMS Drupal — является популярной CMS (системой управления контентом). С ее помощью легко и достачно быстро создать любой сайт, от простого до сложного. К примеру, персональный блог или сайт, социальную сеть, корпоративный портал. Web-мастер может быть ограничен только собственным воображением и временем, которое потратится на освоение и создание сайта.

CMS и типы сайтов

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

Как создать свой сайт бесплатно своими руками – пошаговая инструкция

Как создать сайт бесплатно и самостоятельно с полного нуля не имея технических знаний? Что такое «домен» и «хостинг» и зачем они нужны? Что такое «HTML-сайт», «CMS-система» и «конструктор сайтов» и в чем их ключевые отличия друг от друга?

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

С чего начинается любой сайт?

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

С какой целью может быть создан сайт?

На самом деле, все цели создания нового сайта можно разделить на две основные категории:

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

Итак, коммерческой целью создания сайта может быть:

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

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

Определение задач перед создаваем сайта

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

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

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

Технические аспекты создания сайта

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

  • с помощью конструкторов сайтов ;
  • с помощью CMS-систем ;
  • путем самостоятельного написания исходного кода сайта.

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

Конструкторы сайтов

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

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

Наиболее популярные конструкторы сайтов

  • Wix – один из наиболее популярных конструктов сайтов, который позволяет быстро и просто создавать интернет-ресурсы действительно высокого качества. На нашем сайте вы найдете подробный обзор этого конструктора, а также пошаговое руководство по работе с ним. Рекомендуем!
  • UKit – конструктор, который позволяет создавать современные сайты, а затем успешно заниматься их SEO-продвижением. Он имеет простой в освоении и интуитивно понятный пользовательский интерфейс, а также включает в себя продвинутую систему аналитики. Специально для читателей нашего сайта мы подготовили пошаговое руководство по работе с этим конструктором.
  • Nethouse – конструктор, который отлично подойдет для создания сайтов-визиток, сайтов-портфолио, интернет-магазинов. Он достаточно прост в первичном освоении и дальнейшем использовании. Мы подготовили его подробный обзор, а также пошаговое руководство.
  • UMI – еще один простой в освоении и использовании конструктор сайтов. Прочтите наш подробный обзор, а также пошаговое руководство по работе с ним.

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

Простой пример создания сайта

Давайте вкратце пробежимся по этапам создания сайта в конструкторе Wix . Он отлично подойдет для деловых людей, кто не желает погружаться в тонкости создания сайтов и избавит их от необходимости делать свой первый ресурс на « голом » HTML или разбираться с особенностями работы CMS.

Сам процесс состоит из нескольких понятных и простых шагов, о которых чуть ниже!

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

Шаг второй – выбираем базовый шаблон дизайна для будущего сайта.
Конструктор предоставляет в распоряжение пользователей коллекцию из более 500 уникальных бесплатных шаблонов! Такого выбора нет нигде!

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

Шаг третий – оформляем и персонализируем сайт.
В первую очередь необходимо дать создаваемому ресурсу уникальное название. Стоит отметить, что в случае необходимости присвоенное на этом шаге название сайта можно будет изменить в любой момент.
По умолчанию, вы получаете домен третьего уровня (вида вашлогин.wix.com/вашсайт ), но вы легко можете подключить своей домен 2го уровня.

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

В частности можно:

  • Добавлять на сайт необходимые страницы и наполнять их контентом .
  • Фотогалереи и видеоролики .
  • Разнообразные функциональные элементы, такие как формы, кнопки и меню .
  • Кнопки социальных сетей .
  • Функционал для ведения блога компании .
  • Реализовать полноценный интернет-магазин .
  • Активировать SEO-инструменты для продвижения создаваемого сайта.
  • Добавить красочный favicon .
  • Разнообразные счетчики и метрики для отслеживания важных параметров и характеристик сайта.
  • И еще множество и множество самых разных модулей под разные назначения.

Шаг четвертый – финальные штрихи и запуск.

  • Просмотрите мобильную версию, убедитесь, что вас все устраивает.
  • Подтвердите ранее введенные контактные данные.
  • Обязательно сделайте « Предпросмотр » перед запуском сайта.
  • И наконец, нажмите кнопку « Публикация », чтобы созданный вами сайт стал частью всемирной паутины и был доступен всем пользователям.

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

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

CMS-системы

Термин CMS происходит от английского выражения Content Management System и используется для обозначения так называемых « систем управления контентом » ( сайтом ). Эти же системы зачастую называют « движками » для сайтов. На сегодняшний день любая CMS-система позволяет управлять всем содержимым сайта с помощью простого и наглядного интерфейса.

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

Топ бесплатных CMS-систем

  • WordPress – отлично подходит для создания блогов, сайтов-визиток, корпоративных сайтов. Кстати, сайт, который вы сейчас читаете, работает на базе именно этой CMS. И мы уже опубликовали руководство, в котором рассказывается о том, как создать сайт на WordPress.
  • Joomla – еще одна многофункциональная CMS-система, которая позволяет создать как простой сайт-визитку или корпоративный сайт, так и полноценный интернет-магазин. Обязательно прочитайте наше руководство, посвященное тому, как создать сайт на Joomla.
  • InstantCms – в первую очередь, этот движок предназначен для создания социальных сетей, городских порталов, а также сайтов знакомств и онлайн-клубов;
  • Drupal — ещё одна популярная CMS-система, которая отлично подходит для создания корпоративных сайтов, сайтов-визиток, а также сайтов-портфолио, социальных сетей и интернет-магазинов;
  • OpenCart –данная CMS-система предназначена, прежде всего, для создания интернет-магазинов. Вместе с тем стоит учитывать, что она проста в использовании, но при этом достаточно сложна в плане разработки. Как показывает практика, для разработки полноценного интернет-магазина на основе этого движка требуется привлечение опытного PHP-программиста.
  • phpBB – отличная CMS-система, предназначенная для создания форумов.

Топ платных CMS-систем

  • « 1С-Битрикс » — мощная и многофункциональная система управления сайтами. Она позволяет создавать и поддерживать интернет-ресурсы практически любого типа. В качестве ключевых особенностей стоит выделить простоту управления созданным сайтом, высокую производительность, интеграцию с 1С ( это очень важный момент для российских интернет-магазинов ), а также обширные возможности мобильного администрирования.
  • UMI.CMS – еще один достойный представитель платных CMS-систем. Девиз его разработчиков — « удобство для людей ». Специально для этого движка было создано 500 уникальных шаблонов, которые подойдут практически для любого сайта и при этом предоставят возможность доработки под каждый конкретный проект. А 2500 разработчиков будут рады помочь вам в создании сайта на основе UMI.CMS и его « затачивании » именно под ваши цели.
  • osCommerce — платная CMS-система, предназначенная для создания современных интернет-магазинов и обладающая богатейшими функциональными возможностями .

Самостоятельное создание сайта

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

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

Создание HTML-сайта

В качестве первого примера мы создадим простой HTML-сайт , который будет состоять всего из одной страницы. HTML ( HyperText Markup Language — язык разметки гипертекстов ) – универсальный язык, предназначенный для описания веб-страниц. Его задача заключается в том, чтобы указать браузеру, что и как нужно отображать при загрузке страницы в браузере пользователя. Каждый из его тегов описывает фрагмент страницы.

Ниже приводится исходный код простейшей HTML-страницы :

Скопируйте этот код в новый текстовый файл и сохраните его на своем компьютере. Задайте для сохраняемого файла имя index.html . Затем откройте этот файл в любом браузере и посмотрите на результат.

Обратите внимание, что по умолчанию любой веб-сервер пытается выдать браузеру именно страницу с названием index.html . Поэтому в 99% случаев исходный код главной страницы сайта сохраняется в файле под таким названием и это считается хорошим тоном.

Полную версию этого простейшего HTML-сайта вы можете скачать в виде архива ( 10,8Mb) . После распаковки архива запускаем html/index.html .

Ключевые этапы создания сайта

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

  • Создание макета сайта . Именно на этом этапе появляется четкое визуальное представление, как будет выглядеть создаваемый интернет-ресурс. Чаще всего используется Adobe Photoshop или другие растровые редакторы.
  • Верстка сайта . На этом этапе приступают к верстке сайта из макета .psd , мобильной адаптации и тестированию на корректное отображение в различных браузерах.
  • Внедрение PHP . На этом этапе сайт превращается из статичного в динамический.

Давайте разберемся со всеми этими этапами более подробно.

Создание макета сайта

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

Создаем новый документ в Adobe Photoshop . Задаем ему имя – MySite .

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

Выбираем разрешение 72 пикселя на дюйм и RGB-цвет . Эти установки делаем обязательно, так как именно они отвечают за корректное отображение веб-страницы.

Затем устанавливаем цвет фона F7F7C5 в шестнадцатеричном формате или выбираем его с помощью палитры цветов.

После этого выбираем пункт меню « Просмотр » – « Направляющие » и активируем отображение линеек и направляющих.

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

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

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

Затем с помощью инструмента « Формы » создаем прямоугольник с закруглёнными краями ( радиус – 8 точек ) и с его помощью обозначаем место под изображение, которое будет располагаться в шапке сайта.

Теперь пришло время вставить изображение в шапку сайта.

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

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

Для заголовка в тексте используем черный шрифт. Для навигационного меню – белый.

Перемещая правую границу основного текстового блока, вставляем изображение в текст страницы ( справа от текста ).

Используя инструмент « Формы » — « Прямая » , проводим заключительную линию под текстом страницы.

C помощью инструмента « Текст » ( шрифт Arial ) размещаем копирайт в подвале страницы ( под линией ).

Нарезаем необходимые для вёрстки сайта фрагменты изображений с помощью инструмента « Раскройка » ( мы выделили основную картинку в шапке и картинку в тексте страницы ).

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

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

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

Макет страницы создан, необходимые фрагменты получены, можно переходить к верстке.

Верстка сайта

Прежде всего, необходимо создать новый текстовой файл и сохранить его под названием index.html .

Первая строка этого файла должна выглядеть следующим образом:

Она сообщит браузеру, как именно обрабатывать содержимое страницы. Далее следует набор тегов:

Пара тегов … говорит о том, что внутри содержится HTML-код .

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

Технологии создания сайта

Вступление

В статье «Интернет технологии это…» я отмечал, что существующие интернет технологии, кроме всего прочего, позволяют создавать веб-сайты. Эволюция Интернета сделала сайт основной единицей информационного пространства сети. На момент написания статьи мировой счетчик сайтов «Total number of Websites» показывал цифру приближающуюся к 2-м миллиардам.

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

Два подхода к созданию сайта для себя

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

1. Первый подход, это сделать всё своими руками. Для создания сайта своими руками, ранее обязательно нужно было изучать языки программирования и верстать сайт с нуля. На сегодня, большое количество интерфейсных CMS (систем управления контентом) и конструкторов SAAS (например, WIX) позволяют создавать сайт без знания языков программирования.

2. Второй подход к создания сайта для себя, это наём программиста или веб-студии или покупка готового сайта.

Общие технологии создания сайта

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

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

Технологические этапы в создании сайта с таким подходом, можно описать таким образом:

Этап 1. Структура и дизайн сайта. На этом этапе необходимо продумать навигационную структуру сайта и его будущий дизайн.

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

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

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

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

Этап 2. Программирование. Самый сложный этап технологии создания сайта, если вы делаете сайт с нуля своими силами.

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

Это самый сложный этап создания сайта с нуля. Для его осуществления, действительно, нужно изучить языки программирования HTML, PHP, JavaScript, Python, Perl, Angel Script. Наиболее востребованы первые три HTML, PHP и JavaScript. Обязательно потребуется знание языка табличных стилей CSS.

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

Наиболее просты в использовании, так называемые системы управления содержимым (CMS). Например, WordPress, Joomla, Drupal, 1-С Битрикс, OpenCart. Их достаточно легко освоить без особых знаний программирования.

Этап 3. Верстка сайта. Это этап сборки, всего запланированного.

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

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

Этап 4. База данных.

Создание сайта невозможно без базы данных. Поэтому в довесок к языкам программирования придется изучить работу с базами данных и структурированный язык запросов SQL.

Этап 5. Наполнение сайта.

Этот этап мало относится к интернет технологиям, но не менее важен, чем все предыдущие этапы. Готовый сайт, который вы делаете для себя, нужно наполнить материалами, фото и другой информацией. Но это уже другая история.

Локальный сервер

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

Самый простой локальный сервер это сборка LAMP, включающая Linux, Apache, MySQL и PHP, собранная и запущенная на локальном компьютере.

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

  • Open Server: open-server.ru
  • Xampp: www.apachefriends.org/ru/index.html
  • WampServer: www.wampserver.com/ru/
  • AMPPS: www.ampps.com

Вывод

Современные технологии создания сайта позволяют без особых знаний языков программирования создать сайт, воспользовавшись готовым скриптом типа WordPress, Joomla, Drupal, 1-С Битрикс, OpenCart.

Желание сделать всё своими силами, потребует серьёзного изучения языков программирования, как минимум HTML, PHP, JavaScript и CSS. А также знаний в создании и управлении базами данных, языка SQL и умения работать с локальными серверами.

Создание интернет-сайта Текст научной статьи по специальности « Экономика и экономические науки»

Аннотация научной статьи по экономике и экономическим наукам, автор научной работы — Беляева Н. А.

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

Похожие темы научных работ по экономике и экономическим наукам , автор научной работы — Беляева Н.А.,

Текст научной работы на тему «Создание интернет-сайта»

Н.А. БЕЛЯЕВА, консультант по налогам ЗАО «BKR-Интерком-Аудит»

Организации пользуются Интернетом, как правило, в целях получения той или иной информации, для общения с клиентами, а также для рекламы собственной продукции. Разместить информацию в Интернете о деятельности организации, о выпускаемой продукции, а также рекламу производимых товаров (работ, услуг) можно двумя способами: создав web-страницу или web-сайт.

Web-страница — это одна страница (в одном окне).

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

Страница может быть частью сайта, а сайт, в свою очередь, может состоять из одной страницы.

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

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

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

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

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

Следует обратить внимание на то, что интернет-сайт представляет собой объект авторского права, причем это как минимум совокупность двух объектов авторского права:

— программы для ЭВМ, обеспечивающей его функционирование;

— графического решения (дизайна).

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

Имущественные права на сайт. Согласно Закону РФ от 09.07.1993 № 5351-1 «Об авторском праве и смежных правах» (далее — Закон об авторском праве) в отношении объектов авторского права автору принадлежат личные неимущественные и имущественные права.

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

Имущественные права на объект интеллектуальной собственности могут быть переданы только по авторскому договору, что установлено ст. 30 Закона об авторском праве. В рамках данного закона на практике вопрос о передаче имущественных прав на создаваемый сайт можно решить, заключив со специализированной организацией авторский договор заказа.

В договоре должны быть указаны конкретные имущественные права, которые организация получает. В п. 2 ст. 31 Закона об авторском праве есть такая формулировка: «прямо не переданные права по авторскому договору считаются не переданными». А в п. 1 ст. 31 Закона об авторском праве сказано, что в разделе договора, посвященном передаче имущественных прав, обязательно должны быть указаны срок и территория использования, на которые эти права передаются. Иначе договор считается заключенным на пять лет, а территорией использования прав будет являться только территория РФ. Причем в договоре целесообразно указывать, что переданные права используются без ограничения территории. Тогда предоставление возможности загрузки и открытия сайта пользователям, находящимся за границей, будет правомерным. Что же касается срока, на который передаются права, то он может быть неограниченным.


Исключительные (неисключительные) права на элементы сайта. Если автор (а ему принадлежат исключительные права на использование его разработки в любом виде) передает организации исключительные права, это означает, что только она одна может ими пользоваться и имеет право запрещать их использование другим лицам, в том числе и самому автору. Об этом сказано в п. 2 ст. 31 Закона об авторском праве. Если же переданы неисключительные права, то ими могут пользоваться и организация-заказчик, и другие лица, которым автор (обладатель исключительных прав) передал такие же неисключительные права, и сам автор. Это разрешено ст. 31 Закона об авторском праве.

О том, какие права передаются — исключительные или неисключительные, — должно быть обязательно сказано в договоре. Если такого указания нет, переданные права будут считаться неисключительными. Это установлено в п. 4 ст. 30 Закона об авторском праве.

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

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

Функционирование сайта обеспечивает программа для ЭВМ. Именно она является основным элементом, от которого зависит учет сайта в целом.

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

Илон Маск рекомендует:  Зебра в таблице

Бухгалтерский учет расходов на создание сайта в сети Интернет. Учет затрат на создание web-сайта зависит от того, получает организация исключительные права на эти объекты интеллектуальной собственности (программы для ЭВМ) или нет.

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

Если к организации перешли исключительные права на использование программного продукта и актив соответствует критериям, установленным в п. 3 ПБУ 14/2000, утвержденного приказом Минфина России от 16.10.2000 № 91н, то она учитывает созданный сайт в бухгалтерском учете как нематериальные активы (далее — НМА). Причем это не

зависит от того, кто разработал сайт — сотрудники организации или специализированная фирма.

Затраты по созданию web-сайта определяют первоначальную стоимость этого НМА. К расходам по созданию сайта относятся использованные материалы и трудовые ресурсы, услуги сторонних организаций и т. п. Суммы НДС в первоначальную стоимость не включаются (п. 6 ПБУ 14/2000).

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

Если срок полезного использования сайта определить невозможно, то согласно п. 17 ПБУ 14/2000 он принимается равным 20 годам, но не более срока деятельности организации.

В бухгалтерском учете амортизация по сайту начисляется с 1-го числа месяца, следующего за месяцем, в котором он принят к бухгалтерскому учету как НМА (п. 18 ПБУ 14/2000).

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

Организация в связи с созданием сайта осуществила следующие расходы:

— заработная плата программистов за весь период создания сайта — 25 000 руб.;

— начисленный с заработной платы программистов ЕСН — 5 333 руб.;

— страховые взносы на обязательное пенсионное страхование — 3 500 руб.;

— взносы на обязательное социальное страхование от несчастных случаев на производстве — 100 руб.;

— амортизация основных средств, задействованных в разработке сайта, — 3 000 руб.;

— материальные расходы — 1 500 руб. (без НДС).

В бухгалтерском учете операции по созданию сайта отражены следующим образом:

Д-т сч. 08-5К-т сч. 70 — 25 000руб. — отражены затраты на создание сайта (заработная плата программистов);

Д-т сч. 08-5 К-т сч. 69 — 8 933руб. — отражены затраты на создание сайта (ЕСН, начисленный с заработной платы программистов, страховые взносы на обязательное пенсионное страхование, взносы на

обязательное социальное страхование от несчастных случаев на производстве);

Д-т сч. 08-5К-т сч. 02 — 3 000руб. — отражены затраты на создание сайта (амортизация основных средств, задействованных в разработке сайта);

Д-т сч. 08-5 К-т сч. 10 — 1 500 руб. — отражены затраты на создание сайта (материальные расходы);

Д-т сч. 04 К-т сч. 08-5— 38 433руб. — отражен сайт в составе НМА;

Д-т сч. 44 К-т сч. 05 — 640,55руб. — начислена амортизация по сайту (38 433руб. / 60мес.).

Если организация не получает исключительных авторских прав на сайт, в бухгалтерском учете осуществленные затраты она должна учитывать по аналогии с расходами на приобретение неисключительных прав на использование программного продукта. То есть в качестве расходов по обычным видам деятельности в соответствии с п. 5 ПБУ 10/99 как прочие затраты.

Однако в соответствии с п. 18 ПБУ 10/99, которым в бухгалтерском учете закреплен принцип временной определенности фактов хозяйственной деятельности, рассматриваемые затраты должны быть включены в состав расходов будущих периодов.

Согласно Плану счетов бухгалтерского учета первоначально затраты на создание сайта включаются в состав расходов будущих периодов с отражением на счете 97 «Расходы будущих периодов». На затраты такие расходы могут списываться равномерно, пропорционально объему изготовленной или реализованной продукции и другими способами в течение срока, к которому они относятся (п. 65 приказа Минфина России от29.07.1998 № 34н). В данном случае они включаются в состав расходов по обычным видам деятельности в течение срока использования программного продукта, указанного в договоре с поставщиком, либо (если в договоре такое указание отсутствует или программный продукт создан самой организацией) в течение срока, который устанавливается приказом руководителя организации.

Порядок списания расходов будущих периодов отражается в учетной политике организации.

Учет затрат на сайт осуществляется на счете 44 «Расходы на продажу».

Пример 2. Организация ООО «Вектор» заключила авторский договор со специализированной фирмой ЗАО «Программист» на создание интернет-сайта. За разработку дизайна ООО «Вектор» заплатило 21 240руб. (в том числе НДС — 3 240руб.), за программное обеспечение, использованное для сайта, — 24 780руб. (в том числе НДС — 3 780руб.).

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

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

Бухгалтеру ООО «Вектор» необходимо сделать следующие записи:

Д-т сч. 08 — 5 К-т сч. 60 — 18 000руб. — отражены расходы на создание НМА;

Д-т сч. 19 К-т сч. 60 — 3 240руб. — учтен НДС за разработку дизайна;

Д-т сч. 04 К-т сч. 08 — 18 000руб. — отражено исключительное право на дизайн в составе НМА;

Д-т сч. 68 К-т сч. 19 — 3 240руб. — принят к вычету НДС;

Д-т сч. 97К-т сч. 60 — 21000руб. — отражены в составе расходов будущих периодов затраты на создание сайта;

Д-т сч. 19 К-т сч. 60 — 3 780руб. — учтен НДС со стоимости работ по созданию программного обеспечения сайта;

Д-т сч. 68 К-т сч. 19 — 3 780руб. — принят к вычету НДС;

Д-т сч. 60 К-т сч. 51 — 46 020руб. — отражена стоимость работ ЗАО «Программист».

Далее ежемесячно в течение пяти лет бухгалтер ООО «Вектор» делает следующие записи:

Д-т сч. 04 К-т сч. 05 — 300 руб. — начислена амортизация НМА (18 000руб. / 60 мес.);

Д-т сч. 44К-т сч. 97— 350руб. — учтена в составе затрат 1/60 стоимости программного обеспечения.

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

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

Согласно договору с компанией, выполняющейрабо-ты по обновлению сайта, стоимость работ составила 12 000руб. (в том числе НДС 18 % — 1831 руб.).

Бухгалтеру организации необходимо сделать следующие записи:

Д-т сч. 44 К-т сч. 60 — 10169руб. — отражены расходы организации на обновление сайта организации (12 000руб. — 1 831 руб.);

Д-т сч. 19 К-т сч. 60 — 1 831руб. — учтен НДС со стоимости работ по обновлению сайта;

Д-т сч. 68 К-т сч. 19 — 1 831 руб. — принят к вычету НДС со стоимости работ по обновлению сайта;

Д-т сч. 60 К-т сч. 51 — 12 000руб. — оплачены работы по обновлению сайта.

Налоговый учет расходов на создание сайта в сети Интернет. Если к организации перешли исключительные права на использование программного продукта, то организация учитывает созданный сайт в налоговом учете как НМА.

Согласно п. 3 ст. 257 НК РФ в целях налогообложения прибыли НМА признаются приобретенные и (или) созданные налогоплательщиком результаты интеллектуальной деятельности и иные объекты интеллектуальной собственности (исключительные права на них), используемые в производстве продукции (выполнении работ, оказании услуг) или для управленческих нужд организации в течение длительного времени (продолжительностью свыше 12 месяцев).

Таким образом, чтобы учесть созданный web-сайт как НМА, у организации должны быть документы, подтверждающие существование самого НМА и исключительного права на него, а сам сайт должен способствовать получению дохода, его стоимость должна превышать 10 000 руб. и срок эксплуатации должен быть свыше 12 месяцев.

Для целей налогообложения прибыли первоначальная стоимость сайта как НМА определяется из фактических расходов на его приобретение (создание) и доведение до состояния, пригодного для использования, за исключением НДС и акцизов, кроме случаев, предусмотренных НК РФ.

В п. 5 ст. 270 НК РФ говорится, что расходы по приобретению и (или) созданию амортизируемого имущества не учитываются при определении налоговой базы по налогу на прибыль организаций. Учесть расходы, связанные с созданием сайта, можно путем начисления амортизации на стоимость НМА.

Срок полезного использования сайта в налоговом учете определяется исходя из срока использования, указанного в договоре. Если срок полезного использования определить невозможно, то согласно п. 2 ст. 25 8 НК РФ срок полезного использования принимается равным 10 годам, но не более срока деятельности самой организации.

Расходы организации по созданию сайта, посредством которого она реализует свои товары (работы, услуги), соответствуют требованиям ст. 252 НК РФ — они экономически обоснованны и направлены на получение дохода. Для целей нало-

гообложения они признаются по мере начисления амортизации.

Организации, применяющие метод начисления, признают амортизацию в качестве расхода ежемесячно согласно п. 3 ст. 272 НК РФ:

«Амортизация признается в качестве расхода ежемесячно исходя из суммы начисленной амортизации, рассчитываемой в соответствии с порядком, установленным статьями 259 и 322 настоящего Кодекса».

Организации, применяющие кассовый метод — в суммах, начисленных за отчетный (налоговый) период только по оплаченному амортизируемому имуществу (подп. 2 п. 3 ст. 273 НК РФ):

«амортизация учитывается в составе расходов в суммах, начисленных за отчетный (налоговый) период. При этом допускается амортизация только оплаченного налогоплательщиком амортизируемого имущества, используемого в производстве. Аналогичный порядок применяется в отношении капитализируемых расходов, предусмотренных статьями 261, 262 настоящего Кодекса».

Согласно п. 2 ст. 258 НК РФ амортизация по сайту начисляется с 1 -го числа месяца, следующего за месяцем, в котором он введен в эксплуатацию. При этом моментом ввода в эксплуатацию сайта считается момент его размещения в сети Интернет.

Если сайт не признается НМА, то затраты на его создание для целей налогообложения прибыли учитываются в составе прочих расходов единовременно (подп. 26 п. 1 ст. 264 НК РФ). Причем необходимо разделять расходы, учитываемые единовременно (создание сайта), и расходы, которые следует учитывать в течение срока действия договора (поддержка сайта).

Тем не менее в письме от 12.03.2006 № 03-0304/2/54 Минфин РФ разъяснил, что создание сайта в Интернете, на котором размещена информация об организации и выпускаемой ею продукции, все расходы по созданию сайта и его поддержке относятся к рекламным расходам как расходы на рекламу (п. 4 ст. 264 НК РФ). Но эта позиция оспаривается в печати и сотрудниками налоговых органов и финансового ведомства.

Регистрация доменного имени. Остановимся подробнее на вопросах учета затрат, связанных с присвоением доменного имени.

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

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

Это имя должно быть уникальным. Автономная некоммерческая организация «Региональный Сетевой Информационный Центр» осуществляет обязательную регистрацию доменного имени. Регистрация доменного имени — это занесение информации о домене и его администраторе в центральную базу данных для обеспечения уникальности использования домена.

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

Порядок регистрации и использования доменного имени закреплен в Законе РФ от 23.09.1992 № 3520-1 «О товарных знаках, знаках обслуживания и наименованиях мест происхождения товаров».

Статьей 4 указанного Закона введен запрет на использование другими лицами товарного знака в сети Интернет, в частности, доменного имени. Этим закон решает правовую проблему, которая приводила к многочисленным судебным спорам.

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

Как уже отмечалось ранее, те, кто хочет создать свой сайт в Интернете, должны зарегистрировать доменное имя в автономной некоммерческой организации «Региональный Сетевой Информационный Центр». При регистрации имя проверяется на уникальность в базе уже присвоенных имен. До сих пор проверка на схожесть регистрируемого доменного имени с каким-либо товарным знаком не проводилась. Ведь в российском законодательстве не было таких ограничений на выбор имени.

В результате часто в качестве доменных имен регистрировались чужие товарные знаки (постановления ФАС Московского округа от 31.05.2004 № КГ-А40/4075-04-П, Уральского округа от 08.07.2004 №Ф09-2072/2004-ГК).

Решить эту проблему попытался ВАС РФ (постановление Президиума ВАС РФ от 16.01.2001 № 1192/00). В своем постановлении судьи отметили, что на сегодняшний день доменные имена фактически выполняют роль товарного знака, позволяющего отличать товары или услуги одних субъектов хозяйственной деятельности от однородных товаров или услуг других субъектов. Поэтому умышленная регистрация в качестве доменных имен известных марок, не содержащих средство индивидуализации субъекта как участника экономического оборота, ведет по своей сути к нарушению прав собственника товарного знака.

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

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

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

Основной целью создания доменов в Интернете является установление отличия разных областей информационного пространства.

Доменное имя также не является продуктом интеллектуальной деятельности. Соответственно расходы на регистрацию доменного имени нельзя признать расходами на приобретение объекта НМА, так как они не соответствуют условиям, поименованным в п. 3 ПБУ 14/2000.

Указанные расходы, по мнению автора, следует отнести к расходам по обычным видам деятельности в соответствии с п. 5 ПБУ 10/99 в качестве прочих затрат, которые первоначально следует учесть в качестве расходов будущих периодов, а затем (в течение действия срока регистрации домена, который, как правило, составляет календарный год) равномерно списывать на расходы по обычным видам деятельности.

Следует заметить, что аналогичная точка зрения отражена и в письме Минфина России от 26.03.2002 № 16-00-14/107 «О фактических расходах, связанных с регистрацией доменного имени в РосНИИРОС»:

«В связи с письмом Департамент методологии бухгалтерского учета и отчетности сообщает, что согласно требованиям Положения по бухгалтерскому учету «Учет нематериальных активов» ПБУ 14/2000, утвержденного приказом Министерства финансов Российской Федерации от 16 октября 2000 года № 91н, зарегистрированное доменное имя не от -носится к нематериальным активам. Фактические расходы, связанные с регистрацией доменного имени в РосНИИРОС, для целей бухгалтерского учета признаются затратами организации».

Для целей налогообложения расходы на регистрацию доменного имени, на взгляд автора, следует отнести к расходам, связанным с производством и реализацией в качестве расходов на услуги информационных систем (СВИФТ, Интернет и другие аналогичные системы) согласно подп. 25 п. 1 ст. 264 НК РФ.

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

Таким образом, само по себе зарегистрированное доменное имя не может быть отражено в учете как отдельный объект НМА, поскольку не является результатом интеллектуальной деятельности, как того требуют при определении принадлежности к НМА п. 3 ст. 257 НК РФ и ПБУ 14/2000.

В данной ситуации возможны два варианта:

1) если интернет-сайт только открыт, получил регистрационные документы как программный продукт и произведена первичная регистрация доменного имени.

В этом случае все расходы, связанные с присвоением и регистрацией доменного имени, будут включены в первоначальную стоимость сайта как объекта НМА.

Без доменного имени ни организация, ни сторонние пользователи не смогут пользоваться сайтом. В соответствии со ст. 257 НК РФ в первоначальную стоимость амортизируемых НМА включаются все расходы на их приобретение и доведение до состояния, в котором они пригодны для использования. Поэтому расходы на первичную регистрацию доменного имени, без которого сайт не может функционировать, учитываются в первоначальной стоимости НМА.

Пример 4. Организация создала сайт в Интернете. За разработку сайта по договору специализированной организации оплачено 29 500руб., в том числе НДС 18 % — 4 500руб.

За первичную регистрацию домена на год организация заплатила компании-регистратору 1180руб., в том числе НДС — 180руб.

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

В бухгалтерском учете организации будут сделаны записи:

Д-т сч. 60 К-т сч. 51 — 29 500руб. — оплачена разработка сайта;

Д-т сч. 08-5К-т сч. 60 — 25 000руб. — отражены расходы на разработку сайта;

Д-т сч. 19 К-т сч. 60 — 4 500 руб. — учтен НДС;

Д-т сч. 60 К-т сч. 51 — 1 180 руб. — оплачена регистрация доменного имени;

Д-т сч. 08-5 К-т сч. 60 — 1 000руб. — учтены расходы на первичную регистрацию домена;

Д-т сч. 19-2 К-т сч. 60 — 180руб. — учтен НДС;

Д-т сч. 04 К-т сч. 08-5 — 26 000руб. — введен в эксплуатацию сайт;

Д-т сч. 68 К-т сч. 19 — 4 680руб. — принят к вычету НДС;

2) если происходит перерегистрация доменного имени.

Расходы на перерегистрацию доменного имени признаются текущими затратами организации. Перерегистрация доменного имени осуществляется ежегодно. Она обеспечивает организации возможность сохранения именно за ней определенного имени своего сайта в Интернете. Перерегистрация доменного имени не приводит к изменению качественных характеристик Интернет-сайта и потому не влияет на его первоначальную стоимость.

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

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

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

Для целей бухгалтерского учета расходы на первичную регистрацию доменного имени учитываются в таком же порядке, как и в налоговом учете. Они включаются в первоначальную стоимость Интернет-сайта как НМА в соответствии с п. 6 ПБУ 14/2000.

Затраты на последующую перерегистрацию сайта в бухгалтерском учете включаются в состав расходов будущих периодов. Такие расходы в соответствии с п. 8 ПБУ 10/99 относятся к прочим затратам по обычным видам деятельности. Их следует ежемесячно списывать на счета учета затрат.

Пример 5. Организация оплатила перерегистрацию доменного имени на очередной срок (12месяцев) в сумме 708руб., в том числе НДС 18 % — 108руб.

В бухгалтерском учете организации будут сделаны следующие записи:

Д-т сч. 60 К-т сч. 51 — 708 руб. — оплачена регистрация доменного имени;

Д-т сч. 97 К-т сч. 60 — 600руб. — учтены расходы на перерегистрацию домена;

Д-т сч. 19 К-т сч. 60 — 108руб. — учтен НДС;

Д-т сч. 68 К-т сч. 19 — 108 руб. — принят к вычету НДС;

Д-т сч. 20К-т сч. 97— 50руб. — расходы на перерегистрацию домена отнесены на себестоимость.

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

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

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

Следует помнить, что организации, оказывающие услуги связи, руководствуются положениями гл. 39 ГК РФ «Возмездное оказание услуг».

Следовательно, предоставление услуг связи осуществляется провайдером в рамках договора оказания услуг, по которому в соответствии со ст. 779 ГК РФ исполнитель обязуется по заданию заказчика оказать услуги (совершить определенные действия или осуществить определенную деятельность), а заказчик обязуется оплатить эти услуги.

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

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

После заключения договора хостинга организацией ежемесячно перечисляется плата за услуги провайдеру, расходы по которой списываются на счет 44 «Расходы на продажу» в том месяце, за который оплачены услуги хостинга.

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

В соответствии с подп. 3 п. 7 ст. 272 НК РФ расходы на услуги хостинга признаются в налоговом учете на последний день отчетного (налогового) периода.

1. Налоговый кодекс РФ (часть вторая): Федеральный закон от 05.08.2000 № 117-ФЗ (в ред. от 03.06.2006).

2. Об авторском праве и смежных правах: Закон РФ от 09.07.1993 № 5351-1.

3. Об утверждении положения по бухгалтерскому учету «Учет нематериальных активов» ПБУ 14/2000: приказ Минфина России от 16.10.2000 № 91н.

4. О товарных знаках, знаках обслуживания и наименованиях мест происхождения товаров: Закон РФ от 23.09.1992 № 3520-1.

5. О фактических расходах, связанных с регистрацией доменного имени в РосНИИРОС: письмо Минфина России от 26.03.2002 № 1600-14/107.

Более подробно с вопросами, касающимися бухгалтерского учета и налогообложения операций по подключению к телефонной сети, в том числе когда оно сопряжено с капитальными вложениями, расходов на услуги интернет-провайдера, правильного оформления лицензии на предоставление услуг связи, можно ознакомиться в книге ЗАО «БКЯ-Интерком-Аудит» «Связь».

Как создавать сайты: 33+ обучающих статьи и видео

Время чтения: 11 минут Нет времени читать? Нет времени?

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

В подборке – 33+ статьи и видео для предпринимателей, дизайнеров, начинающих разработчиков и вебмастеров.

Готовы? Тогда поехали.

Этапы подготовки к созданию сайта

Нельзя просто взять и создать сайт. Сначала нужно:

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

В этом разделе – материалы, которые помогут в подготовке к созданию сайта.

В одной из рассылок Тимур Фехрайдинов, маркетолог «Текстерры», рассказал о 5 основных этапах подготовки к разработке сайта. Коротко и ясно, без особых подробностей.

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

Константин Ивлев, контент-стратег «Текстерры», объяснил пользу конкурентного анализа, разобрал ключевые ошибки и т. д. Имейте в виду: материал пригодится и перед созданием сайта, и в последующей работе.

По ссылке – видеозапись вебинара + презентация.

Статья Дмитрия Ковалева – для тех, у кого уже есть собственный сайт. Она поможет понять, пора менять его или еще нет.

Тест Дмитрия Дементия даст ответ на насущный вопрос – узнайте, какой инструмент подойдет именно вам. Затем – в зависимости от результата – переходите к третьему или четвертому разделу.

Если же вы решили не создавать сайт самостоятельно, а делегировать – читайте в нашем блоге о том, как составить Т. З. на разработку. Потом можете отправить техзадание нам :-)

Особенности выбора хостинга и домена

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

Статьи ниже – о премудростях выбора хостинга и домена.

На 1PS разъяснили, какие домены бывают, и дали ответы на часто задаваемые вопросы: о переносе, стоимости и т. д.

В «Пиксель Плюс» поделились, как правильно выбирать доменное имя и доменную зону с точки зрения SEO.

В блоге «Нетологии» – об основных видах хостинг-услуг и о критериях выбора хостинга.

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

Изучите, чтобы не потерять десятки и сотни тысяч рублей.

Обзоры конструкторов

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

Ольга Кочкина подробно разобрала возможности 8 лучших платформ-конструкторов, а также их плюсы и минусы. Если нужно определиться быстро – просто посмотрите в сравнительную таблицу (кстати, ее можно скачать на компьютер).

Если вам показалось, что в предыдущей статье мало сервисов – изучите подборку «Лайфхакера». Правда, там без подробностей: только краткие описания.

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

Гайды по CMS

Решили, что конструкторы вам не подходят, и – только CMS, только хардкор? Тогда вам в помощь наши руководства.

В разделе собраны гайды по Joomla, OpenCart, Drupal и, конечно, WordPress.

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

Дмитрий Дементий (да-да, тот самый) объясняет, почему WordPress – не только для блогов, плюс рассказывает о выборе и настройке темы, работе с плагинами и т. д.

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

Оказывается, интернет-магазин можно сделать не только на OpenCart. WordPress + WooCommerce – сила, и Дмитрий Дементий это доказал.

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

Подробная инструкция по созданию интернет-магазина на OpenCart. Автор объяснил и наглядно показал, как настраивать CMS, расширять ее функциональность с помощью модулей, редактировать контент и – само собой – отслеживать продажи.

Drupal – гибкая и многозадачная CMS, занимает третье место в мире по популярности (после WordPress и Joomla). Руководство поможет разобраться с установкой, настройкой, SEO-оптимизацией, обеспечением безопасности и управлением контентом с помощью «Друпала».

Если вы ошиблись при выборе CMS, затем внезапно осознали это – без паники. Дмитрий Дементий разобрался в особенностях работы с разными платформами и объяснил, как перенести сайт. Без потери денег, нервов и позиций в поисковой выдаче.

Нюансы разработки отдельных типов сайтов

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

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

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

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

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

В блоге 1PS отметили важные элементы, которые должны быть на сайте-портфолио. По каждому из элементов – реальные примеры.

Советы по дизайну и прототипированию

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

Держите три материала о дизайне, верстке и прототипировании – все из нашего блога.

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

По ссылке вы найдете видеозапись, презентацию и список полезных ресурсов.


Статья Дмитрия Дементия – для маркетологов, вебмастеров и будущих специалистов. Прочтите ее и узнайте, что такое HTML-верстка и зачем она нужна, где учиться на верстальщика и т. д.

В качестве бонуса – интервью с Алексеем Печенкиным, ныне программистом отдела бэкэнд-разработки «Текстерры».

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

Юзабилити- и SEO-оптимизация

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

Далее – статьи по инструментам и способам юзабилити- и SEO-оптимизации.

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

Можно жить так, но лучше ускориться – рекомендуем очередную мощь от Дмитрия Дементия. Внутри инструкции по настройке турбо-страниц «Яндекса», AMP от Google и Facebook Instant Articles. Все наглядно – скриншоты, гифки, видео.

Еще у нас есть руководства по Яндекс.Вебмастеру и Google Search Console. Оба понятны даже новичкам.

Даже если только начали наполнять сайт – руководство пригодится. Лучше сразу делать как надо, ведь без ссылок невозможно представить нормальное SEO-продвижение, увеличение глубины просмотра и т. д.

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

Дмитрий – наш почти бессменный автор в этой подборке – объясняет, какие типы редиректов бывают, где брать код, как настраивать и т. д.

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

  • Выбирать структуру URL.
  • Готовить контент для разных групп пользователей.
  • Обеспечить таргетинг.

Внутри – подробные инструкции, ссылки на плагины и сервисы, информативные скриншоты.

SEO из года в год хоронят, но оно живее всех живых. Так что чек-лист от Александра Агеева пригодится начинающим сеошникам и инхаус-маркетологам.

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

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

И – удачи в создании сайтов и их продвижении.

Тема 1. Основы сайтостроения. Современные технологии создания сайтов

Эта статья ориентирована на новичков в вопросе создания таких интернет ресурсов, как веб-сайты. Прежде чем читать далее, вы должны осознать, что создание сайта не ограничивается процессом выбора хостинг-провайдера и/или CMS системы. Большинство пособий для начинающих сразу переходят к конкретике, что, на мой взгляд, немного неправильно. Именно поэтому многие будущие веб-мастера начинают процесс освоения темы основы сайтостроения, например, с подбора и настройки хостинга (локального или удаленного), при этом возникает очень много вопросов, ответы на которые приходится искать в других источниках. Не имея общих представлений, будущий сайтостроитель теряет очень много времени на поиски «правды». Надеюсь, мой первый пост из серии посвященной созданию сайтов поможет вам сориентироваться и уже критически оценивать любую другую стороннюю информацию, эффективно изучать современные технологии создания сайтов.

В какой последовательности изучать основы сайтостроения

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

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

Контент — всему голова!

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

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

Организовать текстовую и мультимедийную информацию на сайте можно разными способами и при использовании самых разных технологий. Сайт сам по себе в минимальном варианте – это HTML страница/страницы, связанные между собой гиперссылками. Знаний языка разметки гипертекста (HTML) – вполне достаточно для создания сайта, а применение CSS и JavaScript могут придать вашему ресурсу больше «красивости» и функциональности.

Илон Маск рекомендует:  Что такое код asp ntauthenticationproviders

Современная технология создания сайтов WEB 2.0

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

Хостинг услуги становятся все доступнее, расширяется пропускная способность интернет каналов, дисковое пространство дешевеет, каждый день появляются бесплатные веб-ресурсы для применения в самых различных ситуациях, развиваются облачные технологии и т.д. Современные тенденции, заложенные в HTML5 позволяют упростить и лучше структурировать верстку макета сайта. В новой спецификации HTML учтены современные требования и заложены возможности, которые раньше приходилось решать с применением большого количества подключенных скриптов. Все больше появляется сайтов с минималистическим дизайном, основанном не на вставке изображений, а на новых возможностях CSS3. Существуют даже сайты с графическим оформлением, полностью выполненным на CSS.

В последнее время в корпоративном секторе набирает популярность метод продвижения товаров и услуг через так называемые Landing Pages или продающие страницы. Суть метода в том, что создается одностраничный сайт с оригинальным дизайном, контактными данными организации, небольшой справочной информацией и призывом к посетителю совершить какое-либо действие, этакий аналог сайта-визитки. Мне доводилось общаться с создателем одного подобного сайта. Этот веб-мастер организовал целую сеть раскрученных в социальных сетях страниц и групп, с которых осуществлялось большое количество переходов на домен с Landing Page. По результатом работы этого специалиста была достигнута посещаемость в 50 000 хостов в сутки, исключительно за счет трафика с социалок! Этот пример наиболее ярко демонстрирует ту роль, которую занимают социальные сети в современных методиках продвижения веб-сайта.

В рамках WEB 2.0 акценты смещаются в сторону клиентских языков то, что раньше исполнялось исключительно на стороне сервера переноситься на сторону клиента, то-есть браузер. Растет роль такого специалиста, как front-end разработчик. Но о таких вещах новичку еще рано задумываться, сперва нужно научиться ориентироваться в популярных технологических решениях для создания сайта.

Введение в технологии создания сайта

Не стоит обманываться в вопросах «внешности» сайта, потому что даже «навороченный» ресурс может быть исполнен на самых простых технологиях, а сайт со скромным дизайном обладать колоссальным функционалом и высокими качественными характеристиками – изящный программный код, безопасность, скорость работы, гибкость и расширяемость. Тут мы плавно переходим к такому понятию – как современные технологии для создания сайтов. Зачем столько «философии»? Дело в том, что многие, даже искушенные специалисты, часто экспериментируют и «ломают голову» над выбором подходящей технологии для создания конкретного веб-ресурса. Сложность выбора обусловлена огромным количеством факторов: задачи под которые создается сайт, нагрузка на ресурс, функционал, интеграция со сторонними приложениями (например 1С), предпочтения клиента и уровень компетенции человека, который будет заниматься наполнением сайта контентом. Мой следующий пост поможет постепенно разобраться в этих вопросах и расскажет о разнице между статическим и динамическим сайтом.

Создание веб-сайта. Курс молодого бойца

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

Условно процесс создания сайта (web-проекта) можно разделить на 3 этапа:

Планирование

Данный этап можно разделить на несколько подэтапов:

  • Создание идеи
  • Разработка структуры проекта
  • Проработка макета проекта

Создание идеи

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

Разработка структуры проекта

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

Проработка макета проекта

После того, как мы определились со структурой проекта можно составить макет проекта (схематично).

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

Основные элементы страницы

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

Содержащий блок (контейнер)

Роль контейнера на странице может выполнять непосредственно элемент body или же div. Ширина содержащего блока может быть резиновой (fluid), а может быть фиксированной (fixed).

Логотип

Текстовая или графическая составляющая проекта и выделяющая его среди других. Логотип чаще всего располагается в верхнем левом углу страницы или же посередине (в зависимости от идеи, макета).

Основная навигационная панель содержит ссылки на основные разделы сайта. Навигационная панель часто располагается в верхней части страницы (в независимости от того вертикально или горизонтально располагаются элементы навигации).

Контент

Контент – это основная составляющая веб-страницы. Он занимает главенствующую роль в дизайне страницы, поэтому занимает большее пространство, подкреплён, помимо текста, графикой.

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

Резиновый и фиксированный макет

Фиксированный макет

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

Резиновый макет

«Резиновый» макет подразумевает, что страница сайта будет стараться занять всё доступное ей пространство на экране пользователя, подстраиваясь под разрешение.

В данном контексте стоит уяснить такие понятия, как отзывчивый веб-дизайн (Responsive Web Design aka. RWD) и адаптивный веб-дизайн (Adaptive Web Desing aka. AWD). Первое понятие укладывается в концепцию «резинового» и означает, что при изменении размера экрана ваш сайт подстраивается под него, второе понятие подразумевает, что при разработке вы определяете основные разрешения (размеры экрана), под которые будет подстраиваться (адаптироваться) ваш контент. В обоих случаях следует разрабатывать не один, а несколько макетов, которые будут соответствовать разным разрешениям экрана. Часто создаётся 3 макета под разрешения iPhone (Android Phone), iPad (Android Tablet) и Desktop.

На данном изображении показаны оба подхода. Сверху блок «отзывается» на любые изменения размера контейнера, снизу «адаптируется» под определённую ширину

Полезные ссылки по теме:

Почему при «резиновом» дизайне создаётся несколько макетов, а не используется один?

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

Модульная сетка

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

Наиболее популярной системой является модульная сетка 960 Grid System (http://960.gs), которая максимально делит страницу на 12, 16 и 24 колонки. Максимум в ширине сетка имеет 960 пикселей. Данное решение основано на том, что большинство современных мониторов, на момент создания сетки, имели разрешение не меньше 1024 на 768 пикселей. Создание макета на основе данной сетки, в дальнейшем, поможет ускорить процесс разработки (вёрстки).

Так же стоит отметить, что при разработке «резинового» макета страницы существует понятие максимальной ширины. Данное утверждение основывается на удобстве восприятия информации. Если предположить, что наш сайт не имеет максимального значения по ширине, то на больших мониторах информация будет сильно растягиваться и её неудобно будет читать. Чаще всего ограничиваются шириной в 1280 пикселей.

Модульная сетка 960GS отвечает концепции «фиксированного» дизайна, для «резинового» дизайна можно обратить внимание на адаптацию этой же сетки на сайте http://www.designinfluences.com/fluid960gs/ или воспользоваться сеткой, которую предлагает фрэймворк Bootstrap (http://getbootstrap.com/css/#grid).

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

Модульная сетка, по сути, – это некая визуальная абстракция, визуальное деление страницы на равные по ширине столбцы с равными отступами между ними. Визуализировать данную модель можно посредствам направляющих или отдельного слоя, на котором будут изображены эти столбцы. Именно такое решение вы найдёте в шаблонах сетки 960gs.

Полезные ссылки и материалы:

Макеты веб-страниц

Среди всего многообразия составления макета веб-страницы можно выделить четыре наиболее распространённых:

    Навигация в левом столбце

Навигация в правом столбце

Навигация в трёх столбцах

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

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

Mobile First

С учётом тенденций последних лет данный подход плотно занимает свою нишу в разработке и дизайне сайтов. Тенденция такова, что практически около 60% пользователей интернета используют для доступа в сеть мобильные устройства, поэтому правилом хорошего тона становится разработка не только десктопной версии сайта, но и мобильной версии. При использовании данного подхода разработка макета сайта, дизайна и вёрстки начинается с мобильной версии, а затем уже прорабатываются макеты для других разрешений: добавляются блоки, баннеры, дополнительные элементы дизайна и пр.

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

Усвоив всё вышесказанное можно переходить к следующему этапу – Дизайн.

Дизайн

После создания макета проекта можно переходить непосредственно к созданию дизайн-макета. На данном этапе начать стоит с определения цветовой гаммы проекта.

Один из способов определения основного цвета в проекте – это составление mood board. Для этого необходимо выписать себе все синонимы, связанные с темой проекта, а затем каждый синоним набрать в поиске по картинкам Google или Yandex. На основе найденных изображений выписать себе цвета, которые чаще всего встречаются на них (каких цветов больше). Найденные цвета будут составлять визуальное восприятие нашего проекта и вызывать у пользователя соответствующие чувства.

Для работы с выбранным цветом и составлением палитры цветов нашего сайта можно использовать следующие инструменты:

    Color Scheme Designer 3 (http://colorschemedesigner.com/csd-3.5/). Помимо выбора цветовой схемы данный сервис позволяет посмотреть пример того, как выбранные цвета будут смотреться на сайте

Adobe Color CC (https://color.adobe.com/ru/). Данный ресурс, в отличие от Color Scheme Designer 3, позволяет создавать палитры ещё и на основе загруженных изображений (которые, например, могли появиться у нас на этапе составления mood board). Так же данный сервис обладает большим архивом палитр других пользователей.

  • COLORlovers (http://www.colourlovers.com/). Обширное сообщество, где можно подобрать различные палитры.
  • Важно отметить, что при подборе цветов для палитры всегда стоит выбирать как минимум 2 контрастирующих цвета. Достижение нужного контраста между цветами – необходимое условие для того, чтобы у вас получился хороший интерактивный дизайн.

    При работе над дизайном главной и внутренних страниц стоит помнить о некоторых основных принципах.

    Элементы Call to Action

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

    Данное понятие хорошо вписывается в принцип AIDA (Attraction Interest Desire Action).

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

    • Привлечение внимания
    • Интерес
    • Желание
    • Действие

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

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

    Схема просмотра страницы

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

    Визуальные направляющие

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

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

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

    Фрэймворки

    Стоит так же отметить, что иногда, при разработке дизайна страницы, используют фрэймворки Bootstrap, Foundation, Material Design Lite, которые, помимо готовых элементов дизайна (кнопки, формы ввода и пр.), предлагают свою модульную сетку, CSS сниппеты (часть кода, разметки, которая может неоднократно использоваться) для вставки элементов в страницу (тех же кнопок, элементов форм и пр.) и классы разметки, а так же JS скрипты для соответствующих интерактивных элементов.

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

    Готовые элементы дизайна из Bootstrap, Foundation и Material Design Lite (MDL)

    Трэнды

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

    Во-первых, стоит упомянуть о так называемых лэндинговых страницах, которые подразумевают под собой длинную страницу, разделённую на соответствующие секции и знакомящие пользователя с основным контентом сайта. Часто лэндинг является единственной страницей, на которой сразу удаётся показать всю необходимую информацию, не заставляя пользователя переходить по страницам. Лэндингам обычно сопутствует хороший дизайн, выверенная и продуманная подача информации, элементы call-to-action, интерактивность (счётчики, анимация и пр.).

    Стоит так же сказать о внешнем виде страниц и вспомнить такие понятия как скевоморфизм и плоский дизайн.

    Скевоморфизм

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

    Плоский дизайн

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

    Не маловажную роль на тренды в веб-дизайне оказало развитие мобильных операционных систем. Чаще всего двигателем прогресса становятся решения от компании Apple, которая в своих дизайн-решениях iOS сначала использовала имитацию реальных объектов, а затем всё упростила до плоского дизайна (Flat UI). Сейчас в вебе главенствует Flat дизайн и Material дизайн, который активно развивает Google.

    Неплохой сайт-сравнение двух концепций: http://www.flatvsrealism.com/

    По основам веб-дизайна и прототипированию неплохим подспорьем может стать данная книга: Джейсон Берд: Веб-дизайн. Руководство разработчика.

    Разработка

    Итак, процесс дизайна макета страницы плавно перетекает в процесс «оживления» сделанного на предыдущих этапах. Прежде чем сразу начинать писать HTML, CSS и JS стоит немного поговорить о редакторах кода и структуре проекта.

    Редакторы кода

    Из наиболее популярных редакторов кода на сегодня можно выделить три:

    От части, все эти редакторы похожи по принципу работы, когда при установке мы получаем редактор, в который затем можем «доставить» необходимые модули и плагины, так сказать, «редакторы на стероидах». Разница лишь в технологиях, которые были использованы при написании редакторов, если Sublime Text написан при помощи C++ и Python, то 2 других используют JavaScript, HTML, CSS (Less). За счёт этой разницы Sublime Text может работать чуть быстрее своих коллег.

    Существуют так же более продвинутые IDE (студии) такие, как Web Storm, PHP Storm и пр., но для вёрстки проекта вполне подойдёт редактор кода, а не целая студия (IDE).

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

    Обзоры текстовых редакторов:

    Структура проекта

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

    Лучше всего отдельные категории файлов помещать в свои папки: картинки в папку images или img, css в папку css, javascript в папку js. В корне будет лежать только index.html и страницы сайта, либо только index.html, а страницы в отдельной папке pages. Соблюдая эти правила вы никогда не запутаетесь в проекте.

    Так же стоит сказать и об именовании файлов проекта. Чаще всего применяются следующие имена: главная страница – это index.html, стили проекта styles.css, скрипты scripts.js или app.js, минимизированные версии файлов имеют префикс .min, картинки носят не пространные названия на русском языке или набора цифр, а отражают то, что на них изображено, например, button.png, download-icon.png, logo.png и т.д.

    Работа над проектом

    Итак, определившись с редактором кода, структурой мы можем приступать к разработке. Прежде всего стоит отметить, что вёрстка страницы делается поэтапно: сначала пишется HTML-структура (HTML-код), затем добавляются стили, а после, если необходимо, пишутся скрипты (JS), добавляются необходимые плагины и библиотеки.

    Учитывая вышесказанное, мы можем условно разделить работу над проектом на следующие этапы:

    Написание HTML

    Сейчас при написании HTML кода уже смело можно использовать тэги и элементы разметки, которые появились вместе с стандартом HTML5, если вам необходимо поддерживать старые браузеры, то можно использовать, например, плагин html5shiv (https://github.com/afarkas/html5shiv), который обеспечивает поддержку новых стандартов в старых браузерах или библиотеку Modernizr (https://modernizr.com/) (html5shiv входит в сборку Modernizr), которая определяет возможности браузера, с помощью которого просматривается сайт.

    При вёрстке сайтов в настоящее время, априори, используется блочный подход, никаких таблиц, iframe’ов и пр. Таблицы выполняют только свою прямую роль – представление информации в виде таблицы. В вёрстке таблицы используются лишь при работе с электронными письмами.

    На этапе написания HTML мы, как бы, создаём скелет страницы, её абстрактную модель при помощи тэгов (языка разметки HTML). Стоит отметить, что структуру может быть проще написать, если у нас есть прототип, составленный на первом этапе или же, если мы сами, глядя на дизайн-макет, на бумаге схематично разрисовали себе все блоки страницы.

    При написании разметки мы так же сразу можем прописывать элементам классы и идентификаторы.

    Правила именования классов

    В проекте во всём должен быть порядок: от структуры проекта до имен классов, разметки и написания кода. Если при разметке важно следить за типом информации и размещением её в соответствующих блоках (заголовок, список, ссылка, строчный элемент, параграф и пр.), то при именовании классов и идентификаторов важно соблюдать здравый смысл. Классы должны давать абстрактное понятие о блоке, к которому они относятся, чтобы код было легче читать, а затем и писать стили. В принципе здесь не должно быть ничего сложного, если мы размечаем меню, то логично содержащему блоку дать класс .nav или .navigation, если это блок с текстом, то можно дать ему класс .block-text и т.д.

    На сегодняшний день есть один популярный подход, который касается принципов построения проекта в целом, но на данном этапе нас интересует именно именование классов. Подход называется БЭМ и расшифровывается, как Блок Элемент Модификатор.

    Вкратце можно описать данный подход, как некое соглашение по именованию классов и представлению разметки страницы. Каждый элемент страницы являет собой сущность, которая может существовать независимо от контекста, тогда мы говорим о Блоке (.block) или же только в контексте другой сущности, тогда мы говорим об Элементе (.block__element). Каждый Блок или Элемент могут иметь различные модели представления: цвет, форму, прозрачность и пр. За подобные свойства будет отвечать Модификатор (.block__element_mod).

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

    Более полная информация о методологии: https://ru.bem.info/

    SMACSS

    Так же существует подход SMACSS (расшифровывается данный акроним как Scalable and Modular Architecture for CSS – Масштабируемая и Модульная Архитерктура для CSS), который разделяет понятие о классах и разметке на несколько уровней: базовый, макет, модуль, состояние, тема.

    • К базовому уровню будет относиться всё, что касается непосредственно тэгов html.
    • К уровню макета мы будем относить всё, что касается основных составляющих страницы: секции.
    • К уровню модуль мы будем относить всё, что касается переиспользуемых элементов страницы: баннеры, навигация, списки, блоки информации и пр.
    • Уровень Состояние описывает как будут выглядеть модули и секции в том или ином состоянии: отображаются или не отображаются, сжатые или раскрытые, активны или неактивны и пр.
    • Уровень темы чем-то схож с уровнем Состояния и отражает как модули или секции могут выглядеть.

    В данном подходе используются следующие соглашения по именованию. Уровни определяются при помощи префиксов и соответствующего буквенного обозначения:

    • Макет: .l- или .layout-
    • Так как модули составляют основную часть проекта именовать их, используя префикс module- избыточно. Поэтому для них используются имена как есть, например: .example <>, .afisha <> и пр.
    • Состояния имеют префикс .is-, например .is-hidden <>
    • Уровень Темы именуется подобно модулям.

    При данном подходе часто бывает удобно каждый уровень абстракции и его классы держать в отдельном файле.

    Информация о методологии и онлайн книга: https://smacss.com/
    Русскоязычный перевод книги по SMACSS: https://github.com/andrew—r/smacss

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

    Небольшой курс по основам HTML: Смотреть

    Написание CSS

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

    Стоит упомянуть о 2-х CSS файлах-дополнениях: normalize.css и reset.css.

    Reset.css

    Изначально в проектах повсеместно использовался reset.css, написанный Эриком Мейером. Цель данного свода правил – сбросить стили браузера, которые он по умолчанию использует для отображения элементов разметки. Таким образом при использовании reset.css нам не нужно переписывать стили браузера, по сути мы работаем с «чистым листом» и можем сосредоточиться на написании собственных стилей с нуля.

    Normalize.css

    Normalize.css наоборот, не сбрасывает все стили «в ноль», а нормализует их, приводит отображение стилей проекта к более-менее однообразию во всех современных браузерах.

    У обоих сводов правил есть свои плюсы и минусы, на данный момент популярен normalize.css. Популярность данного свода правил обусловлена ещё и тем, что вам не приходится при разработке заново прописывать основные свойства для базовых элементов страниц, а лишь модифицировать их по необходимости.

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

    Так же стоит отметить, что все размеры и отступы берутся непосредственно из дизайн-макета. Для получения данных значений нам необходимо использовать инструмент «линейка» и направляющие (речь про инcтрументарий Adobe Photoshop), а затем переносить полученные значения в код. Если мы работаем с фиксированным макетом, то значения переносятся в пикселях как есть, если же у нас «резиновый», то значения нужно переводить в проценты. Основная формула – это ширина элемента, делённая на ширину контекста (ширина содержащего блока). Например, если блок, содержащий текст и картинку имеет на макете ширину 400px, а блок с текстом в нём должен иметь ширину 340px, то в процентном выражении это будет (340 / 400) * 100%, то есть 85% будет занимать блок с текстом.

    Не стоит перегружать ваши стили чрезмерной специфичностью, например, если мы хотим, чтобы ссылка внутри списка имела красный цвет, то не обязательно записывать всю линейку классов и тэгов: .main –nav ul li a, достаточно просто указать .main-nav a. Слишком «специфичные» правила делают правила контекстно зависимым и заставляют вас писать лишний код, а так же влияют на скорость отрисовки страницы, так как при разборе правил CSS парсер читает их справа налево и ему сначала, если брать описанный выше пример, нужно взять все ссылки (a), затем отбросить все ссылки, которые не лежат в li и т.д. пока он не доберётся до содержащего класса.

    Специфичность кода, так же означает чрезмерную привязку к базовым тэгам. Например, если мы хотим, чтобы элемент внутри .block был синим и при разметке использовали элемент span (в правилах мы написали .block span ), то при замене его на div, например, нам нужно будет написать новое правило уже для div внутри .block. Таким образом наш код будет обрастать ненужными правилами, которые по сути дублируют друг друга. Гораздо проще определить всего лишь один класс (класс элемента), который при присвоении внутренним элементам будет приводить нас к желаемому результату.

    Ещё один пример контекстной зависимости кода – это использование имен тэгов вместе с именами классов, например, div.block . Если мы захотим тот же класс применить к span, то нам придётся написать опять span.block или span.block, div.block , что в любом случае приведёт к увеличению кода на лишнюю строчку.

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

    Если, вы используете правила, относящиеся к спецификации CSS3, то не поленитесь проверить необходимость использования браузерных префиксов на сайте http://caniuse.com.

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

    Полезные ссылки и материалы:

    Написание JS

    Итак, заключительным этапом является написание JS скриптов. При создании веб страниц стало, практически, стандартом использование библиотеки jQuery, которая позволяет с лёгкостью манипулировать элементами web-страницы (DOM узлами), навешивать прослушку событий, отправлять запросы на сервер, обрабатывать результат выполнения и пр. Но не стоит слепо доверять трендам, на сегодняшний день нативный JavaScript достиг такого уровня, что вам возможно уже не нужен jQuery. Поэтому, прежде чем слепо прикреплять jQuery, стоит задуматься, так ли он нужен для ваших задач и не достаточно ли встроенных возможностей языка JavaScript.

    Есть неплохой ресурс, который приводит альтернативы одних и тех же манипуляций на языке JavaScript и с помощью библиотеки jQuery: http://youmightnotneedjquery.com/, так же неплохим подспорьем является сайт https://developer.mozilla.org/ru/, на котором, помимо описания методов и свойств JavaScript, можно найти полифиллы для тех или иных методов (библиотека или часть кода, которая добавляет в старые браузеры поддержку возможностей современных функций и методов JavaScript).

    Важно отметить, что не рекомендуется использовать JavaScript для стилизации, то есть не стоит для того или иного объекта DOM (элемента страницы) добавлять портянку CSS свойств с помощью JavaScript, чтобы выделить его состояние и пр. Рекомендуется использовать классы, то есть заранее в CSS определить классы-состояния (активный, не активный, скрытый, использованный и пр.) и при манипуляции элементами просто добавлять или убирать соответствующие классы.

    Например, у нас есть элемент списка с классом .list__item, для того, чтобы показать активный элемент в данный момент (выбран пользователем) или нет, можно просто добавить класс (.list__item—active), а не прописывать все стили, присущие этому классу в JS:
    и т.д.
    Небольшой пример с возможными способами присваивания класса (присвоение модификатора происходит при нажатии на зелёный квадрат): http://jsbin.com/.


    Не рекомендуется решать задачи, которые явно относятся к уровню CSS с помощью JavaScript, пытаясь как-то выровнять объект или добавить ему стили при наведении и пр.

    Опять-таки, возвращаясь к теме Mobile First, нельзя не упомянуть о 2-х концепциях, которые коррелируют с данной техникой. Progressive Enhacement и Graceful Degradation, что переводится как прогрессивное улучшение и последовательное ухудшение. Данные принципы описывают 2 разных подхода к разработке: в первом случае мы разрабатываем наш сайт, пишем скрипты с учётом старых браузеров и систем или же определяем поведение при невозможности запуска скриптов, а затем постепенно улучшаем скрипт, вводя современные функции и методы, таким образом мы получаем сайт, который будет одинаково хорошо работать в старых и новых браузерах и средах (то же касается и css).

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

    Подход Mobile First чем-то схож с Progressive Enhacement.

    Проверка кода

    После написания html, css и js для нашей страницы необходимо проверить всё ли сделано верно. Для этого можно использовать online средства:

    • Для проверки html: https://validator.w3.org/
    • Для проверки CSS: http://jigsaw.w3.org/css-validator/
    • Для проверки JS: http://www.jslint.com/

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

    Статьи с рекомендациями по написанию JS, HTML и CSS:

    Средства автоматизации

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

    960GS

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

    Emmet

    Emmet – это средство работы с html и css (http://emmet.io/). Плагин для работы с данным средством можно установить, например, в Sublime Text, тогда у вас появляется возможность не писать громоздкие куски кода на html и css, а записывать их в строчку, раскрывая затем в полноценную разметку. Например, строка .block>ul.list>li.list__item*3, может быть раскрыта в полноценный код:

    Затем вам просто необходимо вписать текстовые значения в элементы списка. То же касается и css: строка w:100px+h:150px+bgc:#ff0 раскрывается в:

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

    Далее стоит упомянуть и о таком языке работе с шаблонами, как jade (http://jade-lang.com/). Опять-таки, с помощью jade писать html становится быстрее и удобнее, а так же появляется возможность создания переиспользуемых блоков кода и миксинов, передавая которым на вход те или иные параметры мы будет получать нужную нам разметку. Благодаря jade в проекте, касательно разметки и написания страниц, может поддерживаться модульность, а часто используемые названия и блоки кода могут выноситься в качестве переменных (названия, имена страниц и пр.) или миксинов в отдельные файлы настроек и файлы, соответственно. Для работы с jade, а точнее для преобразования написанного кода из jade в html, необходимо использовать командную строку, а так же установить на ваш компьютер платформу nodejs (https://nodejs.org/en/, http://nodejs.ru/).

    Командная строка

    Работа в командной строке так же может ускорить некоторые этапы работы над проектом, например, создание папок и файлов. Запустив консоль в директории проекта и набрав в ней всего лишь одну строку:

    Илон Маск рекомендует:  Что такое код destroymenu

    После нажатия enter мы получим папку project в которой будут находиться папки css, images, js, в папках css и js файлы styles.css и app.js, соответственно, а в корне project лежать файл index.html. Таким образом мы сэкономили время на создание папки, написание её названия, создание файлов и пр. Так же командная строка используется для работы с остальными средствами автоматизации.

    Далее стоит поговорить о таком языке как Sass (http://sass-lang.com/). Данный язык упрощает работу с css. Благодаря Sass можно записывать вложенные классы, проводить математические вычисления прямо в коде, выносить переиспользуемые величины в качестве переменных в отдельные файлы или в начало файла, что в значительной степени упрощает дальнейшую работу со стилями и упрощает изменение тех или иных величин, так как они все будут храниться в одном месте и не нужно будет «ходить» по всему проекту и вносить соответствующие правки. Так же, благодаря Sass в проекте можно придерживаться принципа модульности, храня части разметки в соответствующих файлах и подключать их все в основной, затем с помощью консольной команды можно собрать весь код в один css файл, так же поддерживается сборка результирующего файла на лету по мере написания стилей. Опять-таки для работы с Sass потребуется командная строка. Процесс установки пакета можно изучить здесь: http://sass-lang.com/install.

    HTML5Boilerplate

    HTML5Boilerplate (https://html5boilerplate.com/) представляет собой заранее скомпонованный проект, в котором уже есть index.html, normalize.css и пр. В index.html, например, уже заранее прописаны основные куски кода, которые необходимы при написании html страницы. Проект позволяет скачать архив со всеми файлами как есть или же использовать кастомную сборку: http://www.initializr.com/. Опять-таки, принцип прост: зачем тратить время на написание одних и тех же строк или на проделывание одних и тех же манипуляций, если мы сразу можем сосредоточиться непосредственно на работе с проектом.

    Gulp и Grunt

    Gulp (http://gulpjs.com/) и Grunt (http://gruntjs.com/) представляют собой сервисы запуска задач, которые описываются в основных файлах данных сервисов, выполняются с помощью совместимых модулей и запускаются на выполнение с помощью консоли.

    Данные сервисы помогают использовать в разработке, например, вышеописанные средства Jade и Sass, автоматически преобразовывать их в соответствующие файлы html и css, сжимать их, если необходимо, а так же проверять, например css свойства, на необходимость использования браузерных префиксов и подставлять их в автоматическом режиме.

    Оба сервиса используют различный подход в описании выполнения задач, но суть их работы одинакова. Полезным будет данное сравнение: http://frontender.info/gulp-grunt-whatever/

    Так же многие сервисы вроде autoprefixer (автоматическая простановка браузерных префиксов), jshint (проверка JS кода на валидность) могут быть установлены как сторонние плагины в текстовом редакторе (Sumblime Text, Atom, Brackets) и инициализированы при нажатии определённого сочетания клавиш.

    Bootrstrap, Foundation, Material Design Lite

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

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

    Со всеми возможностями и примерами можно ознакомиться на соответствующих сайтах:

    • Bootstrap: http://getbootstrap.com/
    • Foundation: http://foundation.zurb.com/
    • Material Design Lite: http://www.getmdl.io/

    Данное описание не является исчерпывающим и представляет собой лишь поверхностный взгляд на некоторые технологии. Но прежде чем пускаться во все тяжкие, используя средства автоматизации, библиотеки, framework’и, готовый код и прочее, стоит, всё-таки, изучить основы работы с html, css и js.

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

    Как создать свой сайт бесплатно своими руками – пошаговая инструкция

    Как создать сайт бесплатно и самостоятельно с полного нуля не имея технических знаний? Что такое «домен» и «хостинг» и зачем они нужны? Что такое «HTML-сайт», «CMS-система» и «конструктор сайтов» и в чем их ключевые отличия друг от друга?

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

    С чего начинается любой сайт?

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

    С какой целью может быть создан сайт?

    На самом деле, все цели создания нового сайта можно разделить на две основные категории:

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

    Итак, коммерческой целью создания сайта может быть:

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

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

    Определение задач перед создаваем сайта

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

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

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

    Технические аспекты создания сайта

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

    • с помощью конструкторов сайтов ;
    • с помощью CMS-систем ;
    • путем самостоятельного написания исходного кода сайта.

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

    Конструкторы сайтов

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

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

    Наиболее популярные конструкторы сайтов

    • Wix – один из наиболее популярных конструктов сайтов, который позволяет быстро и просто создавать интернет-ресурсы действительно высокого качества. На нашем сайте вы найдете подробный обзор этого конструктора, а также пошаговое руководство по работе с ним. Рекомендуем!
    • UKit – конструктор, который позволяет создавать современные сайты, а затем успешно заниматься их SEO-продвижением. Он имеет простой в освоении и интуитивно понятный пользовательский интерфейс, а также включает в себя продвинутую систему аналитики. Специально для читателей нашего сайта мы подготовили пошаговое руководство по работе с этим конструктором.
    • Nethouse – конструктор, который отлично подойдет для создания сайтов-визиток, сайтов-портфолио, интернет-магазинов. Он достаточно прост в первичном освоении и дальнейшем использовании. Мы подготовили его подробный обзор, а также пошаговое руководство.
    • UMI – еще один простой в освоении и использовании конструктор сайтов. Прочтите наш подробный обзор, а также пошаговое руководство по работе с ним.

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

    Простой пример создания сайта

    Давайте вкратце пробежимся по этапам создания сайта в конструкторе Wix . Он отлично подойдет для деловых людей, кто не желает погружаться в тонкости создания сайтов и избавит их от необходимости делать свой первый ресурс на « голом » HTML или разбираться с особенностями работы CMS.

    Сам процесс состоит из нескольких понятных и простых шагов, о которых чуть ниже!

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

    Шаг второй – выбираем базовый шаблон дизайна для будущего сайта.
    Конструктор предоставляет в распоряжение пользователей коллекцию из более 500 уникальных бесплатных шаблонов! Такого выбора нет нигде!

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

    Шаг третий – оформляем и персонализируем сайт.
    В первую очередь необходимо дать создаваемому ресурсу уникальное название. Стоит отметить, что в случае необходимости присвоенное на этом шаге название сайта можно будет изменить в любой момент.
    По умолчанию, вы получаете домен третьего уровня (вида вашлогин.wix.com/вашсайт ), но вы легко можете подключить своей домен 2го уровня.

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

    В частности можно:

    • Добавлять на сайт необходимые страницы и наполнять их контентом .
    • Фотогалереи и видеоролики .
    • Разнообразные функциональные элементы, такие как формы, кнопки и меню .
    • Кнопки социальных сетей .
    • Функционал для ведения блога компании .
    • Реализовать полноценный интернет-магазин .
    • Активировать SEO-инструменты для продвижения создаваемого сайта.
    • Добавить красочный favicon .
    • Разнообразные счетчики и метрики для отслеживания важных параметров и характеристик сайта.
    • И еще множество и множество самых разных модулей под разные назначения.

    Шаг четвертый – финальные штрихи и запуск.

    • Просмотрите мобильную версию, убедитесь, что вас все устраивает.
    • Подтвердите ранее введенные контактные данные.
    • Обязательно сделайте « Предпросмотр » перед запуском сайта.
    • И наконец, нажмите кнопку « Публикация », чтобы созданный вами сайт стал частью всемирной паутины и был доступен всем пользователям.

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

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

    CMS-системы

    Термин CMS происходит от английского выражения Content Management System и используется для обозначения так называемых « систем управления контентом » ( сайтом ). Эти же системы зачастую называют « движками » для сайтов. На сегодняшний день любая CMS-система позволяет управлять всем содержимым сайта с помощью простого и наглядного интерфейса.

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

    Топ бесплатных CMS-систем

    • WordPress – отлично подходит для создания блогов, сайтов-визиток, корпоративных сайтов. Кстати, сайт, который вы сейчас читаете, работает на базе именно этой CMS. И мы уже опубликовали руководство, в котором рассказывается о том, как создать сайт на WordPress.
    • Joomla – еще одна многофункциональная CMS-система, которая позволяет создать как простой сайт-визитку или корпоративный сайт, так и полноценный интернет-магазин. Обязательно прочитайте наше руководство, посвященное тому, как создать сайт на Joomla.
    • InstantCms – в первую очередь, этот движок предназначен для создания социальных сетей, городских порталов, а также сайтов знакомств и онлайн-клубов;
    • Drupal — ещё одна популярная CMS-система, которая отлично подходит для создания корпоративных сайтов, сайтов-визиток, а также сайтов-портфолио, социальных сетей и интернет-магазинов;
    • OpenCart –данная CMS-система предназначена, прежде всего, для создания интернет-магазинов. Вместе с тем стоит учитывать, что она проста в использовании, но при этом достаточно сложна в плане разработки. Как показывает практика, для разработки полноценного интернет-магазина на основе этого движка требуется привлечение опытного PHP-программиста.
    • phpBB – отличная CMS-система, предназначенная для создания форумов.

    Топ платных CMS-систем

    • « 1С-Битрикс » — мощная и многофункциональная система управления сайтами. Она позволяет создавать и поддерживать интернет-ресурсы практически любого типа. В качестве ключевых особенностей стоит выделить простоту управления созданным сайтом, высокую производительность, интеграцию с 1С ( это очень важный момент для российских интернет-магазинов ), а также обширные возможности мобильного администрирования.
    • UMI.CMS – еще один достойный представитель платных CMS-систем. Девиз его разработчиков — « удобство для людей ». Специально для этого движка было создано 500 уникальных шаблонов, которые подойдут практически для любого сайта и при этом предоставят возможность доработки под каждый конкретный проект. А 2500 разработчиков будут рады помочь вам в создании сайта на основе UMI.CMS и его « затачивании » именно под ваши цели.
    • osCommerce — платная CMS-система, предназначенная для создания современных интернет-магазинов и обладающая богатейшими функциональными возможностями .

    Самостоятельное создание сайта

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

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

    Создание HTML-сайта

    В качестве первого примера мы создадим простой HTML-сайт , который будет состоять всего из одной страницы. HTML ( HyperText Markup Language — язык разметки гипертекстов ) – универсальный язык, предназначенный для описания веб-страниц. Его задача заключается в том, чтобы указать браузеру, что и как нужно отображать при загрузке страницы в браузере пользователя. Каждый из его тегов описывает фрагмент страницы.

    Ниже приводится исходный код простейшей HTML-страницы :

    Скопируйте этот код в новый текстовый файл и сохраните его на своем компьютере. Задайте для сохраняемого файла имя index.html . Затем откройте этот файл в любом браузере и посмотрите на результат.

    Обратите внимание, что по умолчанию любой веб-сервер пытается выдать браузеру именно страницу с названием index.html . Поэтому в 99% случаев исходный код главной страницы сайта сохраняется в файле под таким названием и это считается хорошим тоном.

    Полную версию этого простейшего HTML-сайта вы можете скачать в виде архива ( 10,8Mb) . После распаковки архива запускаем html/index.html .

    Ключевые этапы создания сайта

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

    • Создание макета сайта . Именно на этом этапе появляется четкое визуальное представление, как будет выглядеть создаваемый интернет-ресурс. Чаще всего используется Adobe Photoshop или другие растровые редакторы.
    • Верстка сайта . На этом этапе приступают к верстке сайта из макета .psd , мобильной адаптации и тестированию на корректное отображение в различных браузерах.
    • Внедрение PHP . На этом этапе сайт превращается из статичного в динамический.

    Давайте разберемся со всеми этими этапами более подробно.

    Создание макета сайта

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

    Создаем новый документ в Adobe Photoshop . Задаем ему имя – MySite .

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

    Выбираем разрешение 72 пикселя на дюйм и RGB-цвет . Эти установки делаем обязательно, так как именно они отвечают за корректное отображение веб-страницы.

    Затем устанавливаем цвет фона F7F7C5 в шестнадцатеричном формате или выбираем его с помощью палитры цветов.

    После этого выбираем пункт меню « Просмотр » – « Направляющие » и активируем отображение линеек и направляющих.

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

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

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

    Затем с помощью инструмента « Формы » создаем прямоугольник с закруглёнными краями ( радиус – 8 точек ) и с его помощью обозначаем место под изображение, которое будет располагаться в шапке сайта.

    Теперь пришло время вставить изображение в шапку сайта.

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

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

    Для заголовка в тексте используем черный шрифт. Для навигационного меню – белый.

    Перемещая правую границу основного текстового блока, вставляем изображение в текст страницы ( справа от текста ).

    Используя инструмент « Формы » — « Прямая » , проводим заключительную линию под текстом страницы.

    C помощью инструмента « Текст » ( шрифт Arial ) размещаем копирайт в подвале страницы ( под линией ).

    Нарезаем необходимые для вёрстки сайта фрагменты изображений с помощью инструмента « Раскройка » ( мы выделили основную картинку в шапке и картинку в тексте страницы ).

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

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

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

    Макет страницы создан, необходимые фрагменты получены, можно переходить к верстке.

    Верстка сайта

    Прежде всего, необходимо создать новый текстовой файл и сохранить его под названием index.html .

    Первая строка этого файла должна выглядеть следующим образом:

    Она сообщит браузеру, как именно обрабатывать содержимое страницы. Далее следует набор тегов:

    Пара тегов … говорит о том, что внутри содержится HTML-код .

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

    Создать сайт в 2020 году

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

    Современное изготовление веб-сайтов на первый взгляд стало простым делом, близким и доступным для любителей интернета. С появлением конструкторов сайтов ушли обязательные знания CMS, HTML и CSS верстки, просто берёшь и мастеришь. Но с устранением причин затрудняющих сам процесс, родилась мысль, будто бы других знаний в этом деле вовсе ненужно, появился лозунг: «Вам нужен сайт? Сделайте его сами!». В итоге, наплодилось облако затерявшихся никому не нужных сайтов, и выяснилось что такое упрощение не даёт желаемых результатов их владельцам, ожидавшим популярности.

    Создать сайт бесплатно самому

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

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

    • сбор поисковых запросов и их кластеризация;
    • семантическое проектирование;
    • уникализация контента;
    • стратегия развития.

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

    Так как же правильно начинать создание сайта

    Начнём по порядку — с планирования, и прежде зададим себе ряд вопросов и дадим на них чёткие ответы. Без этого, будущий сайт будет продуктом эмоций, и с 100% вероятностью останется на задворках интернета, принося разочарование. Но давайте скорее переходить к этим вопросам:

    1. Зачем создаётся сайт
    2. Для кого, или как найти целевых посетителей
    3. Как сделать тематическую структуру сайта
    4. Какие инструменты использовать

    #1 Зачем создаётся сайт

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

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

    #2 Как найти целевого посетителя

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

    На этот случай, Яндекс, Google ведут подробную статистику и учёт поисковых запросов, обратимся к этим ресурсам. Этих целям соответствует Яндекс вордстат. Бесплатность, общедоступность и подробнейшая статистика делают этот инструмент поистине незаменимым.

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

    #3 Как и зачем создавать тематическую структуру сайта

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

    Главный этап создания сайта — построение структуры. Структура определяет расположение и взаимосвязь элементов ресурса: разделов, подразделов, страниц. Яндекс Вебмастер. Из курса: принципы оптимизации сайта.

    Часто веб-сайт представляет собой несвязанный массив несвязанной информации, без четкой центральной темы. Из-за этого такой сайт получает минусовой рейтинг поисковиков по востребованным поисковым запросам. Напротив, структурированный сайт с предметной тематичностью получает 100% рейтинг.

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

    Пример составления правильной и неправильной структуры

    Пример, в некоем сайте о растениях структурируем категорию “Злаковые”. Первое, сортируем запросы про злаковые растения на отдельные группы: “Пшеница”, “Рожь”, “Овёс”, “Рис”, “Кукуруза”, Ячмень”. Запросы о пшенице помещаются в подкатегорию “Пшеница”, и не смешиваются с другими группами. Каждое растение разделено с остальными.

    А теперь представьте себе, что получится, если не делать такую упорядоченную структуру, а свалить запросы в одну категорию “Злаковые”. Последующие статьи о пшенице, рисе, и т.д. будут помещаться в одно место. Такая структура будет отрицательно оценена Яндексом, и посетителями сайта. Нечто подобное происходит и с оценкой стоимости злаков. Например, ценность пшеницы определяется качеством сорта и чистотой сорта. Чем больше примесей, тем меньше цена сорта. Если смешать пшеницу с другими злаками, например, с ячменем и рожью, такая пшеница теряет ценность.

    #4 Какие инструменты использовать

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

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

    Движки интернет магазинов:

    • 1C Битрикс
    • OpenCart
    • PrestaShop
    • NetCat
    • CS-Cart
    • Shop-Script 7
    • Другие…

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

    Универсальные CMS:

    • WordPress
    • Joomla!
    • MODX
    • Drupal
    • DataLife Engine
    • Конструкторы сайтов
    • Другие…

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

    Движки форумов:

    • XenForo
    • vBulletin
    • SMF (Simple Machines Forum)
    • phpBB
    • bbPress
    • Другие…

    Проще говоря в 2020 году нет проблем с выбором инструментов. Хочу также заметить что есть разговоры, о том что якобы надо вернутся к природе, в контексте нашей темы возврат к созданию сайтов на «чистом» HTML, будто бы такие сайты лучше для поискового продвижения, быстро грузятся и так далее. Сегодня, и практика это подтвердила, этот подход не работает, и не важно какой инструмент использовать, главное чтобы было соответствие цели.

    Заключение

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

    Если Вы согласны или не согласны с содержанием данного материала, просим Вас оставить свой отзыв или проголосовать.

    Остались вопросы? Задайте его удобным для вас способом:

    С чего начать создание сайта

    Оглавление:

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

    Немного истории… Летом 2020-го года я увлекся сайтостроением и решил во что бы то ни стало создать свой собственный сайт. На тот момент, когда я только загорелся этой идеей, я не знал об этой науки практически ничего. Начинать пришлось с нуля. Было очень сложно, но я решил идти до конца. Раньше я думал, что создание сайта – это что-то из раздела «Магия», и это доступно только мозговитым программистам, которые достигли в своем деле небывалых высот. Поэтому все никак не решался взяться.

    Толчком к созданию собственного послужило следующее – мой знакомый фотограф похвастался собственным сайтом, сделанным на платформе Wix. Тогда-то я и узнал, что уже давно существуют конструкторы сайтов, где даже не особо разбирающиеся в сайтостроении люди могут за несколько вечером «слепить» собственный блог или страничку в Сети. Тогда же на том самом Wix я и попробовал создать свой первый сайт. Принцип стал понятен, появились кое-какие начальные знания, и я стал искать систему управления (движок), на которой можно было бы создать собственный сайт на платном хостинге.

    Тут мне помог коллега – он посоветовал хостинг BEGET и «движок» WordPress, а также порекомендовал доступный видеокурс. Дальше – дело техники. Просмотрев несколько видеоуроков и прочитав ворох статей, я сделал свой первый простенький блог со стандартной темой оформления и стал наполнять его содержимым. На тот момент я еще не знал языков программирования, и меня сильно удручало то, что я не могу элементарно изменить самые простые элементы дизайна на своем блоге.

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

    А дальше был четырехмесячный процесс обучения. Я искал самоучители и справочники по основным языкам программирования – HTML, CSS и PHP, перечитал несчетное количество статей и начал потихоньку писать свой сайт. Было много камней преткновения, побед и неудач, бессонных ночей и.т.п. Но, благо, в нынешний век цифровых и программных технологий, в интернете есть море информации по отдельным вопросам создания сайта, поэтому кажущиеся неразрешимыми задачи в итоге решались, и я двигался дальше. Но все это время мне не давала покоя одна мысль – почему в Сети нет такого сайта, где пошагово и подробно было бы разжевано для таких «чайников» как я, как создавать сайт с нуля. И в итоге я решил, что если смогу написать свой первый сайт, то непременно создам второй сайт, где попробую подробно и доступно рассказать новичкам про то, как создать свой сайт.

    Итак, с чего же начать создавать собственный сайт? Давайте по порядку. Каждому пункту после будет посвящена отдельная статья (а то и несколько), где подробно будет разжевано и рассказано, «что да как».

    А пока вкратце рассмотрим основные этапы создания сайта:

    1) Выбор хостинга и регистрация домена

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

    2) Установка на свой хостинг системы управления (движка) WordPress

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

    3) Установка на компьютер текстового редактора

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

    4) Изучение основ языков HTML и CSS

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

    5) Верстка сайта

    После того, как вы поймете основы HTML и CSS – можно приступать к верстке. На этом этапе мы с вами пошагово разберем, как полностью сверстать сайт на HTML и оформить его стилями с помощью языка CSS.

    6) Создание динамического сайта

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

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

    Это если вкратце

    Да, наверное у начинающего сайтостроителя уже волосы встали дымом от такого количества непонятных термином – HTML, CSS, PHP, динамический сайт, плагины, хостинг, домен и т.п. Не нужно пугаться, в процессе создания сайта мы подробно и дотошно разберем каждую мелочь и на примерах поймем, как делаются многие вещи. И в конечном итоге мы с вами создадим свой сайт, который потом будем учиться продвигать в Сети.

    Я не хотел делать структуру этого сайта сложной, хотел, чтобы все было предельно просто и ясно. В разделах «HTML», «CSS» и «РНР» я расскажу про основы каждого языка, особенностях и области применения. В рубрике «Основы» мы изучим основы создания сайта – покупка хостинга и регистрация домена, установка системы управления WordPress на хостинг, инструменты работы с сайтом. В рубрике «Wordpress» мы научимся делать сайт и оформление с применением стандартной темы Вордпресс. В разделе «Сайтостроение» (самом объемном и информативном) мы узнаем, как шаг за шагом создать свой сайт с нуля от первого до последнего тега. Раздел «Блоговедение» говорит сам за себя – здесь мы узнаем, как создавать и оформлять записи и страницы и все, что с этим связано. В разделе «SEO и продвижение» будем учиться оптимизировать контент и продвигать свой сайт в сети. В разделе «Заработок» узнаем о способах монетизации своего сайта.

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

    Думаю, для начала достаточно. Хватит слов, пора переходить к делу. В следующей статье «Инструменты для создания сайта» я расскажу об основных инструментах вебмастера. Поехали!

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL