Что надо сделать для создания. Полезные программы для начинающих вебмастеров
В конце августа в вузе, где я преподаю "разработку электронного портала" началась сессия у заочников. Один из студентов на занятии мне задал вопрос - "А какими навыками должен обладать вебмастер? Сейчас столько всяких языков и технологий веб-программирования - неужели ими всеми надо владеть?" Признаюсь честно, я сам никогда до этого не задумывался над этим вопросом - просто делал свое дело, используя свои знания в области программирования и навыки работы с CMS, иногда спрашивая Яндекс или Гугл, как реализовать на сайте ту или иную функцию. Но что же все-таки главнее? Развернутый ответ я постараюсь дать в этой статье.
В творческом и профессиональном пути веб-мастера я бы условно выделил несколько уровней - опять же, оглядываясь на свой опыт.
"Нулевой уровень". Основы HTML
HTML - язык разметки гипертекста, использующий теги для выделения тех или иных объектов и конструкций. Именно благодаря этому языку на веб-страницах страницах появляются ссылки, картинки, таблицы, списки и т.д.
Владея базовыми сведениями о языке HTML, можно сделать свою первую простейшую веб-страничку - такие были популярны в конце 90-х, начале 2000-х годов. Вот главная страничка моего первого сайта:
По нынешним временам страница выглядит как динозавр, но она наглядно иллюстрирует, что такое Web 1.0 - концепция веб-дизайна конца девяностых-начала нулевых годов. Графические кнопки с "рукописными" объемными надписями, фон с незамысловатым зацикленным узором, текст прямо по фону подложки страницы. Еще в то время типичной была надпись - "данный сайт оптимизирован под Netscape Navigator" (сейчас многие, наверно, даже не знают, что это такое!) Правилами "хорошего тона" считалось прилепить сбоку какую-нибудь анимированную картинку, например вращающийся череп в 3D, информер погоды, ссылку на любимый сайт с анекдотами и прочую ерунду.
Для создания подобных страниц вполне можно обойтись обычным блокнотом. Некоторые "ленивые" пользователи используют для создания подобных веб-страниц специальные визуальные редакторы или даже Microsoft Word (на мой взгляд, это тупиковый путь!).
Второй уровень. Освоение "табличной" верстки
Благодаря табличной верстке появляется возможность делить страницу на несколько колонок - этот формат представления был, есть и будет "классикой жанра".
Колонки страницы вписаны в ячейки таблицы, границы этих ячеек, как правило, бесцветные. Вот одна из боле поздних версия моего сайта, выполненная с использованием табличной верстки:
Согласитесь, выглядит уже не так убого, как первый пример, хотя, дизайн по современным меркам явно устаревший - еще бы, это сайт 2002 года! Причем, по тем временам выглядел весьма неплохо для личной странички.
Третий уровень. Композиция, колористика
Когда мы уже научились худо-бедно верстать веб-страницы, нам следует посмотреть на проблему со стороны эстетики и восприятия. Неплохо бы знать, что далеко не все цвета сочетаются друг с другом и "ярко и цветасто" - далеко не всегда хорошо.
Наверняка, не каждый начинающий веб-дизайнер может на глаз подобрать сочетающиеся друг с другом цвета. В этом случае очень полезным может оказаться следующий сервис: http://colorscheme.ru
Какие бы смелые эксперименты с цветовой гаммой сайта не проводились, постепенно почти все приходят к выводу, что лушей является та схема, в которой основной текст страницы - черный на белом фоне.
Композиции веб-страницы - это взаимное расположение объектов и их визуальное взаимодействие. Когда на странице слишком много объектов, она выглядит перегруженной и начинает напрягать. Когда, наоборот, один монотонный текст - страница выглядит скучно.
Главная задача на данном этапе - научиться подбирать цветовую гамму сайта и расположение его ключевых элементов.
Четвертый уровень. Знакомство с CMS.
CMS - система управения содержимым, например, Wordpress или Joomla. Это "движок" сайта, который раз установил, настроил внешний вид и все что нужно дальше делать - наполнять сайт материалами. Делается это с помощью редактора, похожего на Microsoft Word, но работающего в окне браузера. По сравнению с ручной разметкой каждой страницы на HTML, система управления содержимиым - это огромный шаг вперед в плане продуктивности работы. Ваша задача - писать тексты, движок сам "облачит" их в нужное оформление в соответствии с выбранным шаблоном.
У CMS есть и недостаток, точнее особенность. Ее нельзя просто так скачать и запустить (как инсталлятор для Windows-приложения). По сути дела, это набор скриптов, написанных на языке PHP, для работы которых нужно определенное серверное программное обеспечение - веб-сервер, сервер базы данных MySQL, почтовый сервер. Это тот самый базовый минимум, на котором обеспечится более-менее полноценная работа CMS.
Если речь идет об установке CMS на коммерческий хостинг, как правило, это можно сделать за пару кликов мышки - в админке хостинга почти всегда есть раздел "Установка CMS", в котором предлагается много разных вариантов движков. Если же хостинга пока нет, то его можно создать на домашнем компьютере. Прпоще всего для этого воспользоваться бесплатной сборкой серверного софта, которая называется Denwer (джентльменский набор веб-разработчика). Скачать ее можно с официального сайта абсолютно бесплатно - укажите свой email и вам придет ссылка для скачивания (не забудьте снять галочку "получать новости").
На сайте Денвера есть видеоруководство по установке системы на домашний компьютер. Ничего там сложного нет - нужно ответить на несколько простых вопросов, после чего на нашем компьютере будет "поднят" практически полноценный веб-сервер.
После этого на Денвер устанавливается сама CMS. Не буду здесь расписывать, как это делается. Введите в Яндекс запрос "установка Joomla на Denwer" и получите огромное количество инструкций, в том числе и видео. Я рекомендую продукт моего брата Дмитрия Кашканова - Создание сайта на Joomla 3 день за днем . Курс платный, но в расписано все в подробностях и, что ценно, доступным языком, буквально на пальцах!
Пятый уровень. Изучение CSS, "ковыряние" шаблона
Как бы ни хороша была Joomla или Wordpress, но штатные шаблоны не отличаются красотой и изысканнстью. Сайты, сделанные на стандартных шаблонах чем-то похожи на дома-хрущовки - вроде функцию свою выполняют, но все на одно лицо. Почти всегда возникает задача раскрасить цвета в "фирменные" цвета, поменять шрифты, изменить цвет ссылок, сделать картинкам закругленные уголки и так далее. Все это делается при помощи правки файла стиля - как правило, он называется style.css или template.css.
С первого этапа мы помним, за что какие теги отвечают - как вставить ссылку, картинку, табличку и т.д. В CSS-файле прописывается стиль этих элементов - цвет, фон, прозрачность, размеры и отступы, выравнивание, реакция на наведение мышки. При помощи CSS можно до неузнаваемости изменить "штатный" шаблон и сделать дизайн сайта уникальным и красивым. Лично я пошел именно по этому пути - взял за основу стандартный Jooml-овский шаблон Protostar и правлю его как мне нужно. При помощи него было сделано множество уникальных сайтов, совершенно не похожих друг на друга.
Шестой уровень. Блочная верстка, основы адаптивности.
Блочная верстка при помощи тегов
С табличной версткой такие фокусы не проходят - при уменьшении ширины экрана колонки будут сжиматься по ширине и расти в высоту, количество колонок останется прежним. Сайт при этом на мобильных устройствах будет выглядеть некрасиво и пользоваться им будет неудобно.
Практически все современные шаблоны для CMS построены с использованием блочной верстки и почти всегда адаптивные. Чтобы как-то уникализировать дизайн сайта нужно хотя бы немного разбираться, как эта блочная верстка работает.
Освоение блочной верстки подразумевает углубленное изучение CSS - нужно уверенно оперировать с такими свойствами как позиционирование, обтекание, отступы, размеры блока, а также предусмматривать, что он может отображаться по-другому, если сайт смотрят на смартфоне. В общем, чем дальше, тем интереснее!
Можно пойти и другим путем - использовать готовое решение. Например, фреймворк Bootstrap - набор CSS + Javascript, которые подключаются парой строк кода и работают практически "из коробки" - нужно только изучить названия основных стилей. При помощи Bootstrap легко реализовать на сайте многоколоночную адаптивную верстку, всплывающие формы, выпадающие меню, слайдеры, табы и много чего еще.
Недостаток Bootstrap - его "типовой" внешний вид, без изюминки, но его вполне можно разбавить своими CSS-элементами. Bootstrap очень удобен для построения "бэкэнда", простым языком - для создания админки сайта. Не нужно придумывать внешний вид элементов, все уже есть готовое. А дизайнерские фишки для бэкэнда вовсе не обязательны.
Седьмой уровень. Javascript и jQuery.
На этом уровне вебмастер начинает потихоньку переквалифицироваться в веб-программиста. Как правило, знакомство с веб-программированием начинается с языка Javascript.
Javascript - это язык программирования, на котором пишутся сценарии на странице. Эти сценарии выполняются на стороне клиента, то есть, в пределах браузера. Большинство интерактивных элементов на страницах создаются с использованием Javascript. Простейший пример такого сценария - смена картинки при наведении на нее мышки. При помощи Javascript делаются всплывающие окна на полупрозрачном фоне, всякие слайд-шоу, кнопка плавной прокрутки в начало страницы и многое другое.
С точки зрения Javascript веб-страница представляет собой набор объектов (DOM - "объектная модель документа"), у каждого из которых есть свой набор свойств и функций. Объектом является любой блок, любая ссылка или картинка на странице. У объекта есть свой уникальный ID, который прописывается в параметрах тега - примерно
Как правило, Javascript тесно взаимодействует с CSS-стилем элементов страницы, меняя их свойства - положение, угол поворота, прозрачность и так далее. На основе этого взаимодействия строится анимация на страницах (не Flash!). Для облегчения работы веб-программистов существуют уже готовые библиотеки функций, среди которых наиболее известен фреймворк jQuery. Благодаря ему веб-программист освобождается от большого количества рутинной работы по ручному написанию Javascript-кода для решения типовых задач по созданию интерактивных элементов на странице. Синтаксис скриптов на jQuery выглядит несколько иначе, чем традиционный код Javascript, но к этому синтаксису легко привыкнуть.
Как показала практика, научиться работать с JQuery может даже тот, кто никогда не писал на "чистом" Javascript.
Главное ограничение Javascript и jQuery - сценарии выполняются только в браузере. Javascript не может создавать файлов на сервере, он не может напрямую общаться с базой данных. Более того, он не может даже создать файл на вашем компьютере, а может просто скачать его с сервера по ссылке.
Кстати говоря, JQuery - не единственная полезная вещь, основанная на Javascript. Есть и другие JS-фреймворки - Angular, Backbone, Ember и многое другое. Они активно используются профессиональными фронтэнд-разработчиками.
Восьмой уровень. PHP и MySQL.
PHP - язык веб-программирования, на котором написаны большинство CMS, в том числе Joomla. В противоположность Javascript, сценарии PHP выполняются на стороне сервера, то есть при помощи них можно создавать файлы (на сервере), вносить изменения в базу данных, если таковая существует. Благодаря взаимодействию сценариев PHP и СУБД MySQL работают все, что имеет отношение к обратной связи с пользователем - формы обратной связи, фотогалереи с возможностью загрузки фотографий через браузер, движки сайтов и все остальное.
MySQL - система управления базой данных. У большинства систем управления содержимым вся полезная информация содержится не в файлах на сервере, а в базе данных. Это учетные записи пользователей, структура разделов сайта, навигация, полезный контент, и большое количество служебной информации. Обращение к базе данных происходит при помощи специальных функций языка PHP (mysql_query(...), mysql_fetch_object(...) и т.п.), база данных возвращает результаты запроса в виде массива или объекта. Обработчик PHP формирует из полученных данных HTML-код, который отправляется в браузер.
В отличие от Javascript PHP-сценарий не может непосредственно управлять браузером, так как он выполняется на стороне сервера. Однако, можно организовать взаимодействие между скриптами Javascript и PHP при помощи технологии AJAX.
Девятый уровень. AJAX.
AJAX - это подход к построению веб-приложений, основанный на взаимодействии серверных (PHP) и клиентских (Javascript) сценариев. На практике примером применения AJAX может служить интерактивная форма ввода вашего почтового адреса. Сначала на странице выпадающий список со странами. Выбираем "Россия", появляется второй выпадающий список с городами. Выбираем свой город, после чего появляется третий список с улицами конкретно этого города, потом - список домов. И все это происходит без перезагрузки страницы.
AJAX имеет массу преимуществ перед построением форм на "обычном" PHP, поскольку, во-первых, экономит трафик (не нужно каждый раз перезагружать страницу, новая информация подгружается по мере надобности), во-вторых это удобно для пользователя.
Основная сложность AJAX - достаточно большое количество программной "писанины" для создания обработчика событий. Однако, в Интернет полно готовых решений, которые можно использовать "как есть" или немного "доработав напильником".
И тут нам опять приходит на помощь фреймворк jQuery - при помощи него наладить работу скриптов через Ajax намного проще, чем делать это на "чистом" Javascript.
Десятый уровень. PHP-фреймворки.
Не стоит тешить себя надеждой, что если мы прошли все 10 уровней, то вы сразу достигните просветления. Технологии веб-программирования развиваются, и то что было актуально сейчас, через год уже может оказаться устаревшим.
Особенно интересная ситуация возникает, когда требуется создать какой-то нетипичный проект, для которого нет готовых решений ни для одной CMS. Тогда возникает прямая потребность в создании проекта "с нуля" на PHP. Для облегчения этой задачи существуют специальные фреймворки - Laravel, Symfony 2, Codeigniter, Zend и т.д.
По большому счету, PHP-фреймворк - это набор "кирпичиков" для построения своей собственной CMS, причем сложность и изощренность проекта ничем не ограничена. Чтобы разобраться с фреймворком (хотя бы с основами работы с ним), нужно более-менее уверенно знать PHP, уметь составлять SQL-запросы, понимать суть объектно-ориентированного программирования. Далее следует разобраться, что такое MVC. Лично для меня было большой проблемой перестроить свое программерское мышление с обычного функционального программирования на использование паттерна M odel-V iew-C ontroller. Сначала все казалось настолько сложным и запутанным, что я бросил это дело, но потом спустя полгода снова собрал волю в кулак и все-таки "въехал", как оно работает - и не пожалел!
Сейчас я активно занимаюсь освоением фреймворка Laravel и моему восторгу нет предела. Конечно, далеко не все пока понятно, тем не менее, когда я создал один реально работающий проект (правда, для внутреннего использования), желания возвращаться к программированию "по-старинке" у меня уже нет никакого. Ну разве что, при работе с небольшими и несложными проектами я пишу на "обыкновенном" PHP.
И что интересно, чем больше я погружаюсь в веб-программирование, тем яснее понимаю насколько мало я пока знаю! До пресловутого "80 level"а" еще ой как далеко...
Что дальше?
Тут уже сложно выделить основные направления дальнейшего развития, все зависит от решаемых прикладных задач. Наверно уместно будет акцентировать внимание на технологиях и протоколах межсерверного взаимодействия. На этом этапе приходит осознание, что веб-программирование не ограничивается разработкой какого-то одного сервиса, пусть даже и навороченного.
Рано или поздно возникает задача по работе с различными API, интеграция с теми или иными сервисами - социальными сетями, поисковыми системами, почтовыми серверами, SMS-шлюзами, сервисами онлайн-оплаты, банковскими серверами.
Еще одно интересное и востребованное направление - разработка мобильных приложений, работающих с веб-сервисами. Это еще одна огромная область, в которой простора для творчества непочатый край!
Почти всегда эти задачи подразумевают глубокое изучение протоколов HTTP, FTP, SMTP и всего остального, с чем раньше мы работали на уровне пользователей и даже не задумывались о том, какая информация действительно передается между клиентским приложением и сервером, чтобы отобразить на экране фразу "Hello, World". До этого я пока не дошел... Когда дойду, обязательно поделюсь впечатлениями:)
Итоги
Те 10 уровней перечисленые выше - это путь к веб-программированию, по которому идут далеко не все. Многие вебмастера выбирают другую тропу - оптимизация, продвижение, маркетинг, продажи. Это не менее востребованные и интересные направления! Замечательно, если над проектом одновременно работают программист, контент-менеджер и "продвиженец", при этом каждый выполняет свои задачи - в этом случае шанс того, что проект "выстрелит" весьма высоки.
Здравствуй, Дорогой Друг! Непреодолимое желание создать что-то новое, самореализоваться или попробовать себя в роли разработчика сайтов привели тебя на эту страницу. Многие утверждают, что запустить свой сайт – это элементарно и просто. И знаете что? Они правы, но, к сожалению, не в полной мере. Существует знаменитая китайская мудрость, которая гласит, что дорога в 1000 шагов начинается с первого шага. Чем же необходимо обладать и что нужно для создания сайта?
Идея!
Интернет с каждым годом превращается в общемировую площадку для связи, ведения бизнеса, развлечений, обучения, познания. Конечно, наиболее частыми причинами создания интернет ресурсов остаются поиск источника дохода или желание самореализоваться. От того, какие вы преследуете цели, зависит и стратегия воплощения вашей мечты в реальность, будь вы начинающий предприниматель или фанат какой-либо игры, желающий обзавестись друзьями.
Для успешного запуска интернет сайта информация должна быть:
- Полезной, а значит востребованной.
- Уникальной, а значит интересной.
- Структурированной, а значит простой в восприятии.
Не помешает насытить ваши странички графикой, яркими картинками, фото, видеоматериалами, модной сегодня инфографикой или даже Flash-анимацией. Сайт должен обладать функциональностью на таком уровне, чтобы пользователи просто и без заморочек получали информацию, которую искали.
Без цели, детального плана и четких требований к будущему продукту у вас вряд ли получится популярный у людей сервис. Помните, что кораблю, который не имеет пункта назначения не обрести попутного ветра. Эта глубокая мысль поможет структурировать и формализировать ваши идеи, интересные фишки, придуманные функции. Очень часто молодые и неопытные разработчики наступают на эти грабли.
Потратьте несколько часов своего времени, возьмите лист бумаги, ручку и в удобной для вас форме опишите будущий продукт. Каким он будет? Для кого он? Что должен получать пользователь? И какие цели преследуете вы? На основании полученной информации уже можно будет планировать бюджет, составлять план будущих работ и сверять полученные результаты с главными целями проекта.
Выбор стратегии
Когда вы точно знаете, что хотите получить, можно выбрать одну из нескольких стратегий достижения вашего будущего успеха:
Нельзя определенно сказать, какой из предложенных вариантов оптимальный, поскольку каждый преследует свои цели при создании сайтов. Однако если вы хотите научиться, вложить свой труд и получить закономерный результат – смело пробуйте создавать сайты самостоятельно.
Как создать?
Хочешь научиться писать статьи и зарабатывать в интернете? Как раз сейчас у меня идет набор на бесплатное обучение по авторской методике.ЗАПИСАТЬСЯ К ПАВЛУ ЯМБУ
На самом деле, чтобы создать сайт нужно потратить 5 минут. Простейшие сайты можно создать в Word, конструкторах или даже в Блокноте. Конечно, подобный продукт не принесет вам миллионы прибыли, не сделает вас популярным. Одним из простейших способов на сегодняшний день быстрого и не дорого запуска интернет проекта – использовать CMS WordPress.
Дело в том, что сайт – это не просто текст и картинки. Это базы данных, системы контроля доступа, обновления и добавления информации, сложные программные функции, которые требуют соответствующей среды. Именно в WordPress есть необходимый задел для запуска малых, средних или даже крупных проектов. Существует мнение, что необходимо разрабатывать собственный движок сайта, при достижении посещаемости на уровне от 2000 пользователей в сутки. На самом деле:
- для некоторых задач такая посещаемость не всегда нужна,
- в WordPress удачно реализована система установки плагинов, которая расширяет функциональные возможности и безопасность;
- если у вас будет такая посещаемость и будет объективная необходимость перехода на свой движок – это не займет много времени.
Ресурсы
Главный ресурс, который вам потребуется, чтобы запустить свой сайт – это время, даже при условии, что ваш проект будет воплощать в жизнь группа программистов. Вам нужно будет быть постоянно в курсе новых тенденций, разработок, выхода программных продуктов, вы вынуждены будете тратить время на написание статей, наполнение контентом сайта. Без этого невозможно привлечь новых пользователей, раскрутить сайт в поисковых системах и в конечном итоге нельзя заработать. Необходимо будет пройти весь путь разработчика, от «ламера», который не отличает HTML от PHP, до продвинутого гуру, создающего востребованный и неповторимый ресурс. Нельзя определенно сказать, сколько вы потратите времени в общем, однако, чем больше внимания сможете уделить проекту – тем выше шансы достичь успеха.
Деньги
Помимо затрат на хостинг, покупку домена, вам понадобится:
- Оплата раскрутки – сео-оптимизации, покупки ссылок, копирайтинг, создание уникального контента. Оплата доработки функционала сайта – даже используя лучшие шаблоны, или пользуясь услугами программистов, со временем понадобятся доработки сайта. Это нормально, вы развиваетесь!
- Покупка шаблона в WordPress – если бесплатные версии вам не по душе.
- Консультации от программистов.
- Дополнительные вложения в рекламу.
Это все вы можете совершать и самостоятельно если найдете время и обладаете необходимыми навыками и знаниями
Навыки и знания
Чтобы создавать конкурентоспособный продукт необходимо будет планомерно изучать технологии, с помощью которых достигается ваша цель. Это может быть изучение систем управления базами данных, необходимость чтения книг об HTML, PHP, JAVA и многом другом.
Любую сложную задачу легче решить, если разбить ее на несколько простых. Шаг за шагом, путем проб и ошибок, набивая шишки и достигая новых вершин, вы сможете создать такой продукт, за который получите ожидаемый результат, приправленный гордостью, самоудовлетворением и финансовыми выгодами. Хороших вам сайтов, с вами беседовал Павел Ямб.
У многих директоров при осуществлении процесса создания сайтов возникает вопрос, который касается правильного распределения квалифицированных работников, которые временно или всегда будут осуществлять процесс надзора за сайтом, добавлять новый материал, исправлять ошибки и так далее. Но как правильно выбрать исполнителя? И какой специалист занимается, каким вопросом и что решает? Именно в этих вопросах нам предстоит разобраться. После прочтения данной статьи мы сможем дать ответ на данные вопросы и будем знать, какие специалисты крайне необходимы для ведения сайта и чем занимается каждый из них.
Менеджер проекта. Этот человек является специалистом, который будет осуществлять общее управление и руководство в области организации рабочего процесса проекта. В его обязанностями являются задачи формировать и контролировать рабочую группу проекта, составлять график проведения работ, осуществлять контроль над качеством и над соблюдением сроков выполнения работ. Также данный человек, имеющий аттестат, занимается управлением бюджетом проектов и рисками. Этот человек курирует как создание сайтов, так и их последующую работу.
Арт-директор. Этот человек является специалистом, который осуществляет общее руководство и управление именно творческими процессами. Данный специалист разрабатывает вместе с дизайнерами общие концепции дизайна проекта, на нем Документация в области ГО и ЧС . В его обязанности также входит контроль над качеством исполняемой работы, проверка качества работ, которые осуществляют дизайнеры и верстальщики.
Технический директор. Это человек, который является специалистом, отвечающим за программные стороны проекта и осуществляющим общий контроль над осуществлением работы техническими специалистами html-верстальщиками, программистами, техническими дизайнерами, тестировщиками. Такой человек незаменим при создании сайтов.
Специалист по оптимизации и юзабилити. Данный специалист отвечает за разработку удобного и понятного для пользователей структурного построения сайта, а также рекомендует те или иные требования к правильному и соответствующему нормам написанию информационного блока, а именно названий разделов, название и состав заголовков, структура гиперссылок.
Дизайнер. Этот специалист, занимается разработкой креативную концепции дизайнерской оболочки сайта, а также различного рода графических элементов, присутствующих практически на любом сайте, например иллюстрации, иконки, визуальные образы.
Технический дизайнер. Данный человек является специалистом, отвечающим за разработку типового строения страниц сайта на уровне утвержденных концепций сайта.
HTML-верстальщик. Этот человек осуществляет верстку html-страниц на сайте.
Программист. Данный специалист, отвечает за внедрение и интеграцию систем управления, за разработку различного рода скриптов, за проектировку баз данных и за принятие решений по многим другим задачам, связанным с программированием.
Кроме того, если купить диплом Техникума , то при осуществлении и разработки проекта могут принимать участие и другие специалисты, такие как: менеджеры по продажам, тестировщики, flash-дизайнеры и flash-программисты, контент-менеджеры, маркетологи, копирайтеры. В маленьких веб-студиях в роли нескольких специалистов очень часто выступает один человек. Так, например, в роли технических дизайнеров и верстальщиков может выступать один и тот же специалист.