Привет, друзья!
Хорошее дело — удаленная работа. Прибыльное, полезное и очень удобное. Особенно для тех, кто так же, как и я, любит путешествовать. Недавно только понял лишний раз, что не смотря на все возможные минусы, совершенно не хочется все это менять на стены офисов.
Особенно, когда в понедельник ранним утром едешь по пустой и прямой трассе на мотоцикле в стороне Бангалора и понимаешь, что именно сейчас твои знакомые и коллеги трутся спинами в пробках по дороге на службу.
С чего можно начать фрилансерствовать я уже писал. Сегодня же коснусь самой близкой для себя темы (и крайне полезной для читателей), а именно: как научиться создавать сайты с нуля и зарабатывать на этом деньги.
Ибо, так уж сложилось, что именно о сайтах и их создании мне очень часто задают вопросы как на вебинарах, так и в личку. Что ж, будем раскрывать карты.
Что нужно знать для создания сайтов, с чего начать?
Вообще, веб-строительство (или веб-мастеринг, как его называю я) — достаточно обширная ниша, куда входят специалисты самого разного уровня: от тех, кто педалит простые одностраничники в lpgenerator до могущественных фронт-энд разработчиков Ruby on Rails и Python. Я, как обычно, остановлюсь посередине и расскажу о том, какие делаю сайты я и что для этого необходимо знать.
В данное время я занимаюсь разработкой WordPress-сайтов под ключ.
Для их создания необходимо следующее:
- Основы профессии веб-дизайнера и базовые знания типографики. Сочетание цветов, умение находить комбинации форм и шрифтов. Наверное, это самая-самая нужная база для создания сайтов с нуля.
- Понимание работы веб-серверов, хостингов и вообще сети интернет. Тут вообще без маньячного красноглазия сисадминства обходится плохо. Но на начальном этапе с этим можно не заморачиваться.
- Умение работать с хостингами. Хотя бы чтоб залить-исправить Ваш шедевр через интернет.
- Знание хотя бы на уровне определений таких понятий, как FTP, HTTP, IP-адрес, CMS, Javascript, HTML, CSS. Не пугайтесь — все намного проще, чем вам кажется. На начальном этапе достаточно будет изучить, что такое FTP (чтобы заливать сайты на хостинг), CMS (чтобы управлять наполнением) и IP (чтобы знать как этот FTP настроить).
- Желательно уметь разбираться в HTML и CSS и хоть немного понимать, как сайты верстать.
- и, пожалуй, все!
Не заметили, какого одного не хватает пункта, о котором многие говорят? Правильно — «программирования»! Как так — спросите Вы? А вот…
Как Вам такая красота? Пугает?
Для того, чтобы на базовом самому научиться делать сайты, Вам совершенно не нужно знать таких страшных вещей, как PHP, MySQL, Javascript и .NET. Однако (чтобы меня не закидали помидорами супер-корифеи) подчеркну: со знанием программирования Ваши возможности увеличиваются в разы, следовательно сложность разрабатываемых сайтов повышается колоссально, а вместе с ней и возможная оплата труда.
Понятие «писать сайты» осталось актуальным только для систем, в которых крайне важна разработка с нуля и где предъявляются самые крутые требования к безопасности, скорости и чистоте кода. Хотя, есть такие фанаты, которые даже простые сайты-визитки предпочитают писать ручками.
Чуть позже в статье я расскажу, где можно научиться создавать хорошие сайты без глубокого знания программирования.
А пока о структуре работы.
Информационные сайты: цели и особенности
Информационный сайт — это интернет-ресурс, на котором размещаются материалы информационного характера, ориентированные на читателя; средств и источник информации, цель которого раскрыть конкретную тематику, проблематику или вопрос, донести информацию до аудитории, держать читателя в курсе новостей определенной тематики или тематик.
Как правило, информационники достаточно объемные сайты, стабильно наполняются уникальным контентом, имеют продуманную, удобную навигацию и сложную иерархическую структуру, т.к. состоят из большого количества разделов, подразделов, категорий и подкатегорий.
Как происходит создание сайта?
Создание — это всегда процесс творческий, однако и он (в целях удобства) подвергается достаточно жесткой структуризации. Ранее, этот этап мне казался лишним. Мол, чего тратить время?
Сейчас же я понимаю, что более скрупулезное внимание к процессу разработки сайта на каждом из этапов круто сокращает время во время его завершения и исправления ошибок.
Поэтому, не важно: будете ли Вы создавать свой сайт с нуля самостоятельно или заказывать его у фрилансеров — всегда в этом процессе должен быть этап прототипирования.
Создание прототипа будущего сайта.
Тщательно продумайте последовательность блоков и размещение графически-текстовых элементов на странице. Старайтесь по-максимуму работать с задачей. Выявляйте на этом этапе все функциональные блоки, которые должны присутствовать на сайте: где расположить форму, где буллеты, где галерею товаров.
Если уж творить, то только так
Если Вы фрилансер, то приступайте к следующему этапу разработки только после принятия заказчиком прототипа! Если есть тексты и изображения — разместите их в макете. Если нет — вставляйте «текст-рыбу» и произвольные картинки.
Что можно использовать для создания прототипа:
- обычный листок А4 и цветные ручки (обожаю аналоговые инструменты и скрип пера по бумаге)
- Word, Excel или их аналоги
- Обычный Paint
- Photoshop
- Adobe Muse
Не важно, какой инструмент выберите Вы. Главное, чтобы он максимально эффективно решал задачу — создание прототипа. Я, к примеру, люблю рисовать все на бумаге. И даже в путешествиях вожу с собой блокнот А4. Не совсем удобно с точки зрения переноса тяжестей, но такой кайф — рисовать цветными ручками и по максимуму задействовать свой творческий потенциал.
Создание дизайна проекта по готовому макету
После того, как реализовали макет — приступайте к дизайну. Рисуйте, камлайте, придумывайте цветовую гамму и художественные приемы. Именно на этом этапе Вам крайне необходимо знание основ веб-дизайна. Если на воображение Вам, как на ухо, наступил медведь, отдавайте макет веб-дизайнеру с тем уговором, что готовый макет дизайна сайта верстать будете Вы.
Веб-дизайнерское камлание выглядит примерно так
У меня, к примеру, нет художественного образования или образования дизайнера. Я выезжаю на выработанном с детства хорошем художественном вкусе и куче изученной самостоятельно литературы. Однако, если моим заказчикам нужен совсем уж изощренный вариант, я прибегаю к услугам супер-профи в рисовании и photoshop.
Верстка дизайна
Верстка — это перенос дизайна из картинки в код HTML, чтобы браузер понял, как этот самый сайт отображать. Самый интересный этап, который отпугивает большинство новичков, ибо именно здесь, как нигде, знания html, css и jquery становятся актуальными.
И если исторически раньше верстальщик весь код писал ручками и ненавидел свою работу чуть больше, чем полностью, то сейчас его адский труд круто облегчили готовые фреймворки и целые системы для визуального проектирования сайтов.
В последних всю работу по верстку Вы производите путем расстановки блоков на экране, без написания кода.
Казалось бы, халява, но знать принципы использования блочной верстки — крайне желательно, чтобы процесс работы оставался осмысленным и ничего никуда не разъезжалось.
Настройка CMS и наполнение
После того, как Ваш первоначальный макет был сверстан, необходимо к нему подключить WordPress (или любую другую систему управления контентом, она же CMS). Для этого в готовый сверстанный шаблон вставляются команды уже самой CMS, чтобы показать ей, что вот это — шапка сайта, а вот это — логотип.
На самом деле, этот этап используется далеко не всегда. И часто бывает, что заказчик требует только html-версию. Однако же, если вы хотите на создании сайтов зарабатывать хорошие деньги, учитесь работать с CMS. Как раз дальше я расскажу, где этому научиться.
Создаём свою первую веб-страницу
В голове созрело решение сделать сайт самому? Поздравляю: вы стоите на пороге нового хобби, которое принесёт неплохую прибыль, если всё делать правильно. Однако, не будем заглядывать в будущее. Поговорим о ключевых тегах и структуре веб-страницы.
Создание сайта начинается с основных элементов. Рассмотрим каждый из них по отдельности.
DOCTYPE и
Без них ни один браузер не сможет точно распознать веб-страницу и определить её тип. Обратите внимание: в большинстве теги являются парными, поэтому нужно поставить не только в начале, но и в конце кода, «закрыв» его при помощи косой черты —
. и
Эти теги предназначены для хранения служебной информации, которую считывают поисковые системы или браузеры. Здесь вы можете указать кодировку или подключить внешний файл CSS со стилями. В
Всё, что вы видите в данный момент на моём блоге, находится в пределах парного тега. Изображения, текст, ссылки — эти элементы сайта отображаются благодаря
, который должен закрываться в конце html-документа.
Где учиться делать сайты быстро?
И вот теперь самое интересное! Времена, когда для создания сайтов с нуля Вам требовались глубокие знания программирования, прошли. Однако, поборников халявы я сразу предупреждаю: все дальнейшие сервисы и курсы — платные. И если Вы ищете что-то совсем уж бесплатное, обратитесь лучше в гугл и на сайт htmlbook.ru.
Мы так устроены, что бесплатное нами не цениться, поэтому я продолжаю всячески призывать людей не бояться вкладывать деньги в себя. Потому что в противном случае Вам придется вкладывать время, которое в отличие от денег, никогда не восполняется.
Да и вообще, обучение у профессионалов — это самой прямой, самый быстрый и самый эффективный путь. Без долгих прогулок по полям с граблями и скрупулезных изобретений трехколесных велосипедов (с бибикалкой, ага).
Самому, безусловно, можно тоже обучаться. Но не проще ли отдать какую-то сумму, чтобы профессионал провел Вас мимо заблуждений и откровенных ям на пути? Рецепт — стар как мир: учимся и развиваемся.
Обучение заработку на сайтостроении
Есть хороший парень, который обучает тому, как на разработке сайтов можно зарабатывать. На мой взгляд, подобный подход сразу дает Вам два крыла: техническую базу специалиста и маркетинговую база продавца. Без последней во фрилансе очень грустно.
Вот несколько предложений от его центра:
- БЕСПЛАТНАЯ ИНСТРУКЦИЯ по заработку на веб-строительстве
- БЕСПЛАТНАЯ КНИГА «Создание сайта от начала до конца» В ней автор на наглядном примере показывает весь процесс разработки сайта, который Вы будете делать самостоятельно.
Вообще, я противник шоковой терапии. И всерьез считаю, что развитие должно идти не рывками, а поступательно, без нарушения законов гармонии.
Конечно, всеми описанными выше курсами обучение созданию сайтов не ограничивается. Сейчас вообще каждый третий в интернете начинает запускать свои псевдо-курсы, поэтому насыщенность рынка — просто жуткая. И разобраться в многообразии предложений бывает порой совершенно невозможно. Именно поэтому я и выступаю в роли некоего санитара, стараясь отделять котлет от мух и рекомендовать только то, что опробовал сам.
Конструктор сайтов
– это онлайн-сервис для создания сайтов, который работает из коробки – изначально идет в комплекте с хостингом, готовыми шаблонами и, собственно, самим «конструктором» для управления и редактирования сайта.
Конструкторы диктуют совершенно иной, значительно упрощенный, подход к работе по сравнению с CMS. Они избавляют от необходимости настройки хостинга, установки CMS, создания баз данных MySQL, работы с FTP, необходимости подключения модулей, плагинов и не требуют навыков программирования. Пользователь получаете очищенную от многих технических сложностей среду для разработки сайтов.
Оба варианта имеют свои плюсы и минусы в зависимости от точки зрения оценивающего их человека. Отметим лишь, что CMS как класс инструментов для создания сайтов появились значительно раньше облачных конструкторов. Последние стали результатом эволюции и адаптации сложных систем под нужды массового пользователя. Со временем сайтбилдеры обзавелись интуитивным интерфейсом и визуальным редактором (WYSIWYG — «What You See Is What You Get» – «что видишь, то и получишь»). Лучшие из них уже работают на базе ИИ (искусственного интеллекта) и по возможностям превосходят некоторые CMS.
Как зарабатывать на создании сайтов?
Следующий шаг после обучения ремеслу — заработок на нем. Это хорошая мотивация, когда за интересное хобби ты начинаешь получать деньги. Именно так это вышло у меня.
Делается это в двух словах так:
- Ты даешь информацию своим друзьям-знакомым о том, чем ты теперь занимаешься
- Ставишь минимальный ценник для наработки опыта и портфолио
- После — идешь на биржи фриланса
- Получаешь заказы, обрастаешь нужными связями и опытом
- Развиваешься и становишься профессионалом экстра-класса
- Покупаешь себе Геленваген и дачу на Бали
6 очевидных шагов, которые иногда очень тяжело даются.
Как открыть косметологический кабинет
Опубликовано: 02.10.2020
В современном мире есть возможности начать строить свой бизнес в разных сферах, от торговых точек и до информационных услуг. Если у вас есть тяга именно к косметологии, а ещё лучше, образование мастера-косметолога, вполне реально открыть собственный косметологический кабинет. Он может… Читать далее
Сколько времени нужно для того, чтобы научиться делать сайты?
Иногда мне задают вопросы: сколько нужно времени чтобы освоить создание сайтов. Ответить на него тяжело, ибо не совсем понятен «пункт прибытия». Т.е. какой момент будет считаться точкой, где ты «уже умеешь». У меня этот процесс длится уже 8 лет и чем дальше, тем я кажусь себе все менее компетентным:)
Однако, за 2-3 месяца можно неплохо поднатаскаться, чтобы уверенно делать что-то несложное на заказ. Когда я начал осваивать более продвинутую верстку, взял заказ через 2 недели после начала обучения. Наделал кучу ошибок, но свои первые фрилансерские 900 рублей заработал. Радости предела не было)
Поэтому, скажу так: учитесь и как почувствуете под ногами опору сделать что-то простое — беритесь! И не бойтесь допустить ошибку.
Как правильно выбрать столешницу для кухни
Опубликовано: 14.08.2020
Многие стремятся к обновлению: занимаются танцами, йогой, ходят на курсы иностранных языков и даже осваивают укулеле. Самые приятные и радующие взгляд обновления происходят в собственной квартире: новые шторы, пледы, полочки под излюбленные собрания сочинений Чехова. Одним из таких качественных обновлений… Читать далее
Шаблон и структура информационного сайта
Выбрав удачную тематику и CMS для своего информационного сайта, вам остается выбрать качественный шаблон. Его можно заказать у веб-дизайнера или воспользоваться уже готовыми шаблонами, которые подойдут для вашей CMS. Например, WordPress содержит большую базу бесплатных шаблонов, которые можно скачать и активировать не выходя из панели управления сайтом.
Итак, давайте пройдемся детально по всем пунктам.
Шаблон
Должен быть адаптивным и функциональным. Адаптивность — одно из главных требований и условий для современного сайта. Это способность корректно отображаться на дисплеях различного разрешения, в разных браузерах и на разных устройствах. Шаблон должен быть гибким и функциональным, обладать способностью выводить информацию в несколько колонок, иметь соответствующее количество позиций для инфоблоков (блоки вывода новостей, рекламные блоки, CTA-блоки и др.).
Дизайн
Информационные сайты должны иметь визуально привлекательный, запоминающийся концепт-дизайн. Используйте приятные для глаз — шрифт и тона. Подобрать правильное сочетание цветов для сайта помогут сервисы Color Scheme Designer 3 и Adobe Color CC.
Структура
Структура сайта — это логическая схема, которая распределяет страницы по категориям, подкатегориям и разделам. Грамотная и качественно спроектированная семантическая структура сайта улучшает удобство поиска информации и поведенческие факторы, а поисковые боты без труда обходят сайт, не тратя впустую краулинговый бюджет. У хорошо спроектированного сайта новые страницы могут попадать в индекс практически через день после публикации.
Как сформировать SEO структуру?
- Собрать семантику из всех источников: Yandex Wordstat, Google AdWords, Подсказки поисковых систем.
- Сформировать семантическое ядро и кластеризовать его. Кластеризация - это информационный фундамент структуры сайта, которая учитывает выдачу поисковых систем и отвечает запросам пользователей.
- Распределить полученные кластеры по посадочным страницам сайта.
Кластеризованное семантическое ядро в Rush Analytics
Полезные сервисы и программы для визуализации структуры сайта: FlowMapp, Dynomapper, Visual Sitemap Generator, Xmind.
Sims 4
В серии игр Симс игрок может делать практически все, что творится в нашей жизни, это любовь, семья, работа и обустройство собственного дома.
С самого начала игры вы сами создаете персонажа, выбрав пол, внешность и характер.
Также вы можете увеличить денежное состояние персонажа и добавить жену, детей, дальних родственников.
Дальше все будет зависеть от вас, пойдете ли вы работать или займетесь воспитанием семьи.
По мере прохождения длительного времени ваши герои взрослеют, стареют и впоследствии умирают, а на их смену приходят дети.
Конца игры нет, все зависит от вас. Из минусов стоит отметить излишнюю миролюбивость игры, здесь практически нет убийств, а все ссоры выглядят не серьезно.
Но все это не удивительно ведь Симс в первую очередь создавался для симуляции семьи и отношений, а не для войн и крови.
Sims 4
А смогу ли я заниматься веб-разработкой?
Очень многие люди в начале своего пути изучения языков программирования, библиотек, паттернов и других технологий задают себе эти вопросы: «А смогу ли я? А стоит ли вообще начинать?».
Здесь я могу сказать только одно, пока не попробуете – не поймете. В добавок к этому в IT-сфере одну попытку нельзя назвать полноценной. Эта область знаний очень обширна и относительно новая. С каждым годом она пополняется новыми технологиями, открытиями и алгоритмами. Поэтому не бойтесь начать и пытаться программировать, пробовать что-то новое!
Безусловно, IT-сфера требует от ее представителей множество знаний, умений и логического мышления. Однако все это достижимо, если работать и стараться. К тому же не все отрасли являются тяжелыми для изучения. Как, например, сайтостроение.
Зная только основы html – языка гипертекстовой разметки, и css – каскадных стилевых таблиц – можно создать приличный лендинг (одностраничный сайт, который обычно используют как визитку, портфолио и т.д.), информационные сервисы, новостные ресурсы и т.д.
На страницах моего блога вы сможете найти множество обучающих статей для новичков с конкретными примерами кода и пошаговыми инструкциями. Если этого вам будет мало, то в интернете в свободном доступе выложено огромное количество книг, курсов, видеоуроков на ютубе и примеров.
Внедрите призывы к действию
Важный момент для коммерческих проектов. Задумайтесь: когда пользователи переходят на ваш сайт, знают ли они что им делать дальше? CTA-элементы (Call To Action – призыв к действию) являются теми самыми направляющими и указывают на следующий шаг, который пользователь должен сделать на странице.
Вот несколько примеров:
Не стоит ожидать, что посетители вашего сайта сами выполнят те действия, которые вам нужны. Прямо им это предложите! Те, кому это не нужно, все равно подобные призывы проигнорируют, а вот по заинтересованным пользователям показатель конверсии вырастет.
Это отличная возможность получить больше продаж, лидов или просто просмотров страниц. А главное – эффект от подобных действий несложно отследить, и путем регулярных экспериментов можно найти оптимальное для себя решение.
А как насчет дизайна?
Думаете, дизайн не важен? Попробуйте тогда продать элитный шоколад, обернув его вместо яркой обложки в рулон туалетной бумаги. Тот самый момент, когда люди судить будут именно по одежке, не заморачиваясь над тем, чтобы проверить содержание.
Чтобы вывести сайт на следующий уровень, не обязательно даже запускать маховик глобального редизайна. Можно внести ряд изменений, которые способны существенно улучшить его в эстетическом плане:
- добавьте качественные изображения там, где они уместны, но отсутствуют, и замените там, где они явно устаревшие и плохие;
- поэкспериментируйте со шрифтами и их параметрами – удачно подобранный шрифт может оказать глубокое влияние на внешний вид ресурса;
- используйте яркие визуальные элементы, например, значки и разного рода CTA (призывы к действию);
- также значки можно использовать вместо слов, изобразить пользователям, что нужно сделать или что их ждет;
- поэкспериментируйте с цветовыми схемами – иногда добавление нескольких ярких оттенков способно эффективно «освежить» сайт.
В целом, дизайн относится к вопросам, которые нужно рассматривать индивидуально. Иногда можно обойтись косметическими правками, а иногда дешевле будет просто переделать все с нуля.
В чем же можно писать код?
На самом деле для простых примеров или при отсутствии специальных визуальных редакторов, можно воспользоваться обычными текстовыми. Скажу вам даже больше. Программировать можно и в «Блокноте». Просто под конец работы документ стоит сохранить в определенной кодировке и с указанным выше расширением. Если вам интересно, как это делается, то найдите на моем блоге статью о редакторах кода.
Более профессиональными и удобными программами считаются Notepad++, Sublime Text 3. Это популярные продукты для редактирования и проверки кода, которые обладают рядом преимуществ:
- Подсвечивают переменные, функции, теги и другие элементы разными цветами, что увеличивает читабельность и восприятие кода, а также способствует быстрому нахождению ошибок;
- Проверяют код на ошибки и подсвечивают их в случае обнаружения;
- Проводят валидацию;
- Позволяют проводить быстрый поиск по тексту.
Однако здесь стоит выделить Sublime Text 3, так как это не все его возможности.
Sublime Text 3 очень мощный кроссплатформенный текстовый редактор, который поддерживает всевозможные плагины на языке программирования Python.
Помимо этого, продукт различает и поддерживает множество языков, что не свойственно для редакторов. К ним относятся: C-подобные, перечисленные выше, Java, всевозможные веб-языки, SQL, Haskell, R, Ruby, MATLAB, D и другие.
Если вы хотите прочувствовать всю прелесть программирования в профессиональной среде, то скачайте описанный редактор. А про его настройку прочитайте на моем блоге.
