Сайтостроение с нуля: просто о сложном

[Foxxy]

Здесь

Aurelia написала: «Было бы здорово, если бы кто нибудь статью про вебмастеринг написал», и восемь человек это лайкнули. Вот, по мотивам пожеланий решил написать свой взгляд на это дело – давно пером не баловался, решил оторваться, и дело полезное сделать заодно. Статья для совсем тех, кто ни разу не держал в руках ни одного тега, поэтому люди с опытом, вам лучше вообще не читать – умрете от скуки )) Все изложенное – исключительно мое личное мнение, не претендую на вселенскую истину.

Когда-то, пять лет назад, небезызвестный вам Romka невзначай обронил, что мне было бы неплохо попробовать свои силы в вебмастеринге (за этот невзначай я ему ооочень благодарен, он – мой крестный веб-отец). И я бы, может, пропустил это «меж ушей», но… Но не стал пропускать, и тут же взялся за этот вопрос.

У меня ушло порядка двух недель на то, чтобы абсолютно с нуля изучить азы написания сайтов и нашлепать более тридцати авторских статей (если будете строить сайт на копировании готовой инфы – он умрет на задворках сети). Так что написание простого сайта, не имея абсолютно никаких представлений об этом, процесс гораздо более легкий, чем кажется – речь не о годах учебы, и не о месяцах. Речь о днях. При одном условии: вам ОЧЕНЬ этого хочется. Да, сейчас этот первый мой сайт кажется мне внешне нелепым и смешным, однако, переверстывать его лениво, тем паче что инфа там местами уже, думаю, устаревшая. Но этот, «на лицо ужасный, но добрый внутри» сайт тем не менее пока делает свою работу – и финансовую, и общественно-полезную. Как минимум, приводит иногда сюда к Мэгги новых девочек. Что же такое простой HTML-сайт? Это обычная, просто нарисованная вами с помощью кода таблица, каждое поле которой отвечает за свое содержимое.

 

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

 

Справа от кода нарисован в Excel внешний вид сайта, соответствующего написанному нашим кодом каркасу.

 

Львиную долю времени отнимает наполнение этих ячеек: шапки, фона, менюшки, css-файла, написание текстов – иными словами, наполнение этих табличных ячеек чем-либо. Итак, на создание самой первой странички мы потратили немало времени. Неужели столько времени нужно тратить на каждую страницу? Нет. Взяли файл готовой первой страницы, создали копию, и переименовали эту копию нужным именем – теперь у вас две страницы с разными именами. Удалили текст с текстового блока, вставили туда нужный – теперь у вашего сайта две страницы. Уловили? Чтобы написать сайт, нужно создать всего ОДНУ страницу – шаблон, создание последующих страниц – минутное дело, если у вас есть какая-то инфа для новой страницы. Я бы рекомендовал научиться сперва именно строить таблицы (тем паче это очень быстро и очень несложно) – потому что это основа основ, без которой очень сложновато (на мой взгляд) будет понять дальнейшую эволюцию верстки. Кстати, обратите внимание: создание сайта и создание всего одной странички – по сути, задания, одинаковые по сложности в части кода.

В упомянутой в самом начале поста ссылке был какой-то спор навроде «Что круче – HTML, или PHP?». IMHO, если вам нужен простенький сайт – то изучать ради этого PHP все равно что, желая написать записку детям «Суп в холодильнике», вы пойдете покупать типографию и печатать эту записку на станке стоимостью 20000$... HTML здесь – за глаза. PHP вам понадобится, к примеру, для интернет-магазина, гостевой книги, форума, рандомной подмены содержимого (скажем, чтобы в случайном порядке на странице выводился каждый раз новый текст – разумеется, заранее составленный), для работы с БД (базами данных) и т.д.

Однажды (для другого сайта) мне встала нужда столкнуться с задачей блочной (модульной) верстки (на основе контейнеров DIV) – оные всегда внушали мне ужас своей непонятностью, но в табличках сделать нужное мне было невозможно. Пришлось читать, изучать. Оказалось, не такие уж они и страшные, эти модули - по-крайней мере, когда уже понимаешь принцип построения каркаса на таблицах. DIV-ы в своей сути – те же ячейки, только верстать ими проще (хотя тонкостей больше), но и возможностей у них больше. И снова за пару недель я с абсолютного нуля создал сайт на модульной верстке (не имея никаких первичных познаний в модулях). Он был внешне многократно привлекательнее моего первого сайта. И жил больше года, принося неплохую прибыль в реальных дензнаках, пока клиенты не начали как-то дружно делать замечания, что «Какой-то у вас сайт слишком простенький для вашего уровня». Но я думал, что для моих лузерских навыков это – венец творения, и круче мне не создать. Поэтому был найден наемный вебмастер, который сверстал за недорого (всего 20000 рупи – другие просили 60000) красивенькую штучку на легендарной адаптивной верстке (новый форум у Мэгги, я заметил, тоже стоит на адаптиве). Адаптив – это когда сайт по разному компонует свои каркасные модули в зависимости от параметров экрана: на мобилке – одно, на ноуте – другое, на огромном мониторе – третье. И если обычный сайт с мобилки нужно сперва увеличить, чтобы что-то прочесть – на адаптиве все будет изначально читабельно и без всяких манипуляций. Но вернемся к наемному вебмастеру. Увы, радость была недолгой. Красивенькая штучка после загона в Денвер грузилась как огромный бегемот – медленно-медленно… А я всегда старался делать сайты, которые шустро влетали бы в браузер даже на 3G мобильном интернете – что мне вполне удавалось. Дело усугублялось тем, что наши клиенты более чем в половине случаев заходят на сайт с мобильных устройств. И ведь человек ЗНАЛ это… Вот так я на радостях и лоханулся, не проверив товар на предмет шустрости и прочих нюансов – ну, он же шлепал коды в правках на моих глазах, оперируя языком без обращений к справочникам даже в очень сложных моментах – кто ж мог подумать, что это будет недовебмастер...

 

И я решился на подвиг. Я начал изучать то, что сотворил чудо-вебмастер. Там черт бы ногу сломил в кодах. CSS-файл состоял из 4000 (!) строк – просто здравый смысл подсказал мне, что так быть не должно… Вместо одного логически нужного контейнера в коде была целая пачка вложенных друг в друга – и снова здравый смысл шепнул: «А нафига так..?» И я понял, что попал. Потому что ЭТО не разобрать. Проще написать новый код, чем пытаться разобраться в этом. И снова две недели – на этот раз с утра до ночера. Мне удалось-таки создать - не просто создать, а сделать готовый отлаженный продукт - внешне ту же самую красивенькую адаптивную штучку (один-в-один), с CSS-файлом в 1000 строк (вместо 4000 изначальных), код на страницах стал простым и понятным, изображения довольно-таки без усилий смогли поджаться по весу в несколько раз без видимой потери качества, и вуаля – я своими руками, имея ноль представления об адаптивном дизайне (да, по образу и подобию, имея на руках пусть чудной и заморочный, но образец адаптива) создал сайт в адаптивной верстке, летавший на 3G-инете. Как всегда, в общем: хочешь сделать хорошо – изучи вопрос и сделай сам. Оказалось, не особо страшен и этот зверь – просто у страха глаза велики. Имея навык в табличках и модулях, было не особо сильно сложнее, чем в первые разы. Но, кстати: с самого начала лезть сразу в адаптив я бы вряд ли советовал – заблудитесь и сгинете.

 

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

 

Но продолжим.

CSS-файл – ооочень прикольная и интересная штучка, хотя поначалу она меня вводила в полный ступор просто своим названием. Дабы перестать бояться этого зверя, важно понять, что никакой новый язык здесь учить не придется. Это просто таблица стилей, или иными словами – набор шаблонов (почему таблица – до сих пор непонятно, так как это обычный перечень). Пример: вас не устраивает размер и цвет букв обычного «заводского» абзаца, и его межстрочный интервал. У вас два варианта. Первый: в каждом абзаце прописывать лишние строки указания размера шрифта, цвета, интервала и т.д. И второй: заменить в CSS «заводские» установки на свои. Теперь, создавая просто абзац, без указания дополнительных критериев, вы получите именно то, что нужно вам. Ну или создать свой личный абзац (или несколько), и просто указывать имя единожды прописанного в CSS стиля, из которого будет браться шаблон. С помощью CSS можно делать и такие вещи, которые другими способами вы не сможете сделать – тут уже без вариантов, они пишутся исключительно в CSS-файле. CSS-ом можно также делать всякие красивые кнопочки с анимированными эффектами нажатия. В общем, штука важная, крайне полезная, и совсем не сложная – главное, понять принцип работы. Она облегчает написание кода в разы, оптимизирует сайт, и вам самим же потом будет проще и удобнее ковыряться в своем сайте. Если у вас на сайте тысяча абзацев, и вы решили вдруг изменить цвет букв с черного на красный – либо вы ковыряете вручную эту тыщу абзацев, если писали все параметры вручную, либо… Если писали стили через CSS, то, поменяв всего несколько буковок в CSS-файле, вы одномоментно измените цвет всех абзацей сайта, в которых указан данный стиль.

JavaScript. Для чего он нужен? Честно? Я ХЗ ))) В смысле, у меня ни разу не встала необходимость читать про этого зверя. А сама необходимость в нем встала лишь дважды, когда мне понадобились красивая фотогалерея с прокруткой фото, и фотоальбом. Думаете, начал изучать JavaScript? Делать мне больше нечего… Я тупо скачал готовую бесплатную  JavaScript-фотогалерею с инструкцией по установке на сайт в комплекте и скрипт альбома. И все. Абсолютно и все. Клевая галерея, между прочим (как и альбом) – так что не все бесплатное плохО.

Да и с PHP та же история. Понадобился код для рандомного выбора файлов – загуглил, нашел. Да, потратил время, чтобы подпилить его к своей ситуации. Но это всяко меньше времени заняло, чем учение талмуда по PHP ради написания трех строчек кода. Понадобилась гостевая – скачал, поставил. Потратил время на подпиливание. Пилится все успешно методом тыка и логики – ведь сам код незнакомого языка менять не нужно, нужно заменить указанные в нем переменные на свои, и только. Если же вы удумали с нуля накалякать код гостевой – вам понадобится сперва неслабо изучить PHP, а потом написать на нем роман (код моей гостевой, к примеру, являет собой пару тысяч строк PHP-кода). Я до сих пор ни бельмеса в PHP, но на моих сайтах не единожды впилены в нужные ситуации PHP-блоки нужного кода, порой весьма-таки немаленькие. Да что там, у меня целый инет-магазин есть вайтлейбловый (партнерский), сплошняком написанный в PHP. И ничего, переобул его благополучно в свой дизайн и напихал ту инфу, которую считал нужной. По большому счету, кроме HTML, для простого сайта ничего знать наизусть и не нужно. Тег (команда) создания абзаца, заголовка, ссылки, вставки картинки – это все классические HTML-команды. Допускаю вероятность, что их можно создать и на других языках, но это уже стрельба из пушки по воробьям, ведь что может быть проще одной буквы? А именно из одной буквы и состоят большинство из названных команд.

Чуть не забыл упомянуть о конструкторах сайтов. Я пытался воспользоваться однажды Яндекс-конструктором, уже имея некоторые познания в HTML. Я искренне пытался разобраться с этим зверем целый вечер, но так его и не победил. Он начинает абзац от самого края, и ну никак ни на миллиметр не делается отступ. Картинка вклеивается вплотную к тексту – и ну никак ее от него не отлепить. Может, я и лузер… Но бросил я это дело, взял старый добрый NotePad++, и благополучно накалякал сайт в блокноте – в ручной верстке нет ничего невозможного, там все можно сделать именно так, как нужно, а не так, как получается. Больше я не лез в конструкторы. Лично мне шлепать код вручную в блокноте проще и понятнее. Учитывая, что сайтов на продажу я не делаю, конвейер мне не нужен, делаю только для себя и только при необходимости, и за пять лет создал лишь сайтов шесть.

 

Что еще… Доменное имя – адрес сайта (в случае данного форума - webmodelki.com) стоит порядка 1000 рублей в год. Это просто имя. Его можно просто купить, но не размещать в сети – но тогда его никто и не найдет. Чтобы найти его в сети, это имя должно где-то лежать. Сервер, на котором оно лежит, именуется хостинг. Цена вопроса – в районе 200 рублей в месяц. Бывает и дешевле, но обычно цена соответствует качеству. Мой старый хостинг систематически устраивал кратковременное «исчезновение» сайтов, сменил  хостинг-провайдера, и таких проблем не стало, хотя ценники у них и одинаковые. Так что ценник соответствует качеству лишь именно «обычно». Итого: содержание своего сайта обойдется в районе 3500 рублей в год.

 

Создание и отладку сайта можно, конечно, делать и прямо в сети, но удобнее и быстрее (и, главное – дешевле) делать это программным пакетом DENWER, распространяемым бесплатно. Правда, соединение с интернетом он почему-то все же требует, и без него работать не хочет, но де-факто все работает локально. Вы набираете в браузере адрес своего сайта, и, даже если у вас еще не куплен этот домен, вы увидите в браузере свой сайт по этому адресу (лишь бы этот домен был прописан вами в вашем Денвере). Через Денвер вы можете видеть в прямом эфире, как говорится, что являет собой ваш сайт на той или иной стадии создания – даже если у вашего сайта кроме шапки пока ничего нет. Поэтому Денвер и дешевле – какой смысл платить за хостинг сайта, находящегося в процессе создания? Закончив делать сайт, отсмотрите его со всех браузеров, которые только найдете на своей машине – в разных браузерах сайт может отображаться по-разному, и где-то очень даже некорректно. Если оно так – подправляйте коды. После выкладки сайта в сеть оттестите его всеми доступными устройствами и всеми их браузерами – ведь на Денвере вы можете работать лишь той машиной, на которой он установлен. Есть, конечно, программные пакеты, имитирующие различные устройства, но я предпочитаю видеть процесс вживую, а не так, как его запрограммировал НЕКТО в своем продукте, благо у меня в доме куча различных девайсов на любой вкус и цвет: от старого смарта 320*240 до огроменного FullHD ноута.

Ну, и остались мелочи: создать файл .htaccess, длиной в несколько строчек, файл robots.txt, зарегиться в метрике Яндекса и Гугла и получить от них коды счетчиков, которые воткнуть в код ваших страничек, чтобы видеть, кто и откуда заходит на ваш сайт, и по каким запросам. А также видеть кучу другой важной и полезной инфы по своему сайту.

 

Собственно, и все. Теперь вы можете за пару недель создать свой собственный сайт ))) А вот как его двигать вверх в поисковых машинах, делать его более посещаемым и популярным – этим занимается наука SEO. СЕО-копирайтинг – вообще, отдельная огромная тема, при этом неоднозначная – так как алгоритмы поисковых машин держатся в строжайшей коммерческой тайне. Эту штуку – да, читал, изучал. Факультативом, в свободное время. Но я обычно просто пишу. Пишу так, как считаю нужным. Так, как мне кажется, звучит лучше и понятнее. Так, как кажется интереснее. Для людей пишу. А потом добавляю несколько капелек своей личной СЕО – такой, какой ее представляю (ведь ее никто не видел, она ж засекречена, ее все могут лишь ПРЕДСТАВЛЯТЬ, хотя, конечно, есть и вполне объективно-очевидные моменты).

 

Ну, и инфа к размышлизму. Я давно использую комп исключительно для работы – статью вот эту написать, сайт написать или подредактировать. Весь серфинг своих бытовых, частных и рабочих нужд я веду с мобильных устройств, с произвольной точки пространства. 4G инет хорошо жрет батарейку, и для практических нужд мне не нужен – за глаза хватает 3G. Поэтому, независимо от того, какой у меня активен инет (3G или Wi-Fi), я никогда не жду дольше 5-7 секунд открытия какой-то страницы. Не открылась – это не моя страница, иду по выдаче Гугла дальше. Вылазят незапрошенные мной окошки – иду дальше по выдаче. Уважайте приходящих к вам, оптимизируйте объем кода, объем картинок и прочего. Даже гигант Runetki у меня без проблем открывается в 3G – я не верю, что в этом мире у кого-то сайт может весить больше этого монстра. Верю лишь в то, что бывают ленивые вебмастера. Если я ищу контору, которой хочу оставить хорошую сумму за те или иные услуги, а у них некорректно отображается сайт на моем девайсе – я по-возможности ищу другую контору, потому что люди, относящиеся небрежно к сайту (к своему интернет-лицу) высоковероятно могут отнестись небрежно и к своим клиентам. Все вышеперечисленные баги меня радуют лишь в одном случае - когда я вижу их у конкурентов.

P.S.: Это – не самодостаточный учебник. Я просто попытался «на пальцах» рассказать о теме. В сети есть различные учебники (я лично частенько использую htmlbook.ru, к примеру) и другая инфа – я физически не смог бы заменить одной статейкой написанные людьми книги и справочники. Встала задача вставить картинку – идете в Гугл с вопросом «html вставить изображение». И все остальное - по аналогии. Ищите, да обрящете. Главное, что вы теперь знаете, что создать в сети свою страничку - это очень просто. А потом и откопировать эту страничку под целый сайт. А ЛЮБОЙ сайт (и страничка) начинается с этого:

Создайте в Notepad++ пустой файл, сохраните как имя.php (имя на латинице) - теперь Notepad++ сможет выделять цветом элементы кода так, как показано на моих картинках. И пусть вас не смущает то, что html-страничку вы сохраняете как ".php" - вреда никакого, а в будущем может пригодиться.
 

Изменено 6 Февраля 2017 пользователем Foxxy
Добавление еще одного абзаца

[Eliza]

Спасибо за отличную тему! И я поделюсь опытом.

 

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

 

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

Я беру бесплатный шаблон на сайте http://www.oswd.org/designs/browse/ , тут можно выбрать цвет и количество колонок.

Если нужно шаблон посерьезнее - https://www.templatemonster.com/ru/, можно поискать в торрентах или купить у них за $50

 

Потом открываю в microsoft frontpage 2003 года (пробовала Adobe Dreamweaver - он прекрасен, но и frontpage справляется на ура) и переписываю страницу сайта под себя, и копированием создаю остальные страницы. Иногда бывают случаи, когда я залипаю над разбором какой-либо строчки кода, но это потому что я зануда-перфекционист))

 

Дальше регистрируюсь на http://jino.ru/, отключаю включенные по умолчанию услуги и оставляю только хостинг за 33 руб/месяц, там же покупаю доменное имя ru 600 руб или com 1000 руб в год. Итого сайт com кушает 1400 в год. Я пользуюсь jino более 12 лет, очень довольна сервисом.

 

Еще можно вставить блог от livejournal в сайт, если нужна лента новостей, активность и комментарии, это еще $20 в год за платный аккаунт.

А можно вообще не мучиться с дизайном и воспользоваться бесплатным движком WordPress с темами. (Но мне лично livejournal милее)

 

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

 

И про бизнес. Сейчас принято делать лендинг пейдж (целевая страница) - сайт без страниц, где все данные потенциальный клиент может найти на главной странице, прокручивая ее вниз (обычно с мобилы) У него мало времени на поиск инфы, а сайтов много. Лендинг страница говорит: "наша контора самая лучшая, вот отзывы, звоните, вот телефон" и показывает фотки из фотостока. Кто убедительнее напишет, того и клиент, ну и конечно же покупается реклама в поисковиках, чтоб попасть на 1 страницу, дальше второй никто не полезет )