Интернет - это почти 3,5 миллиарда пользователей и свыше миллиарда сайтов. Стремительное развитие информационных технологий привело к появлению профессий, о которых 10 лет назад никто даже не думал. Верхние строчки в рейтингах самых востребованных и высокооплачиваемых IT-специальностей занимает профессия .
В мире более 11 миллионов веб-разработчиков разного профиля и уровня. Однако, по данным CMS Magazine и «Рейтинга Рунета», 62% компаний и веб-студий остро ощущают нехватку кадров. Вот как они ответили на вопрос о дефиците сотрудников в сфере веб-разработки.
На сегодняшний день только четверть всех веб-студий устраивает количество их штатных сотрудников. Получается, программистов много, но всё равно не хватает. Почему?
Причин несколько:
- 15,9% работодателей считают, что уровень образования потенциальных сотрудников не соответствует требованиям рынка (нет достойного портфолио, отсутствует опыт командной работы).
- 15% компаний полагают, что на рынке в принципе мало квалифицированных веб-программистов, способных разрабатывать сложные проекты (особенно в регионах).
- 7,3% компаний замечают, что многие специалисты веб-разработки предпочитают фриланс работе в штате.
- 6,3% веб-студий полагают, что сотрудничества не получается из-за несовпадения зарплатных ожиданий соискателей с возможностями работодателей.
Таким образом, крутых, то есть знающих весь цикл создания веб-проекта и способных тут же показать себя в деле, разработчиков действительно мало. Тех, что есть, уже разобрали крупные веб-студии, либо они ушли в фриланс, так как понимают, что на сдельной основе заработок больше, чем оклад в какой-нибудь небольшой фирме.
Взгляните, например, вот на этот график «Рейтинга Рунета».
Из статьи «Рынок веб-разработки остаётся рынком „ручного“ труда»
Разработчики-фрилансеры занимают довольно крупную нишу в дорогих проектах. Им достаётся 6% проектов стоимостью от 100 до 300 тысяч рублей и 8,3% проектов дороже 300 тысяч рублей.
Требуется веб-разработчикУбедиться в востребованности профессии веб-программиста легко. Достаточно зайти на любой онлайн-сервис по трудоустройству.
Только в Москве почти полторы тысячи вакансий. Среди IT-компаний и веб-студий за хороших разработчиков идёт нешуточная борьба.
28,4% компаний ищут сотрудников с помощью job-ресурсов, 21,4% - через социальные сети и по рекомендациям, 16,2% признают достаточно эффективным раздел с вакансиями на собственном сайте и 12,7% хантят сотрудников «со школьной скамьи», то есть приглашают на стажировку талантливых студентов, отслеживают медалистов и олимпиадников, устраивают конкурсы для студентов и так далее.
Последний путь - самый тернистый. По мнению экспертов, академическое образование инертно и не успевает за новыми динамичными индустриями.
Уровень подготовки большинства после вуза очень низкий. Пугает даже не то, что с программистских специальностей люди толком не умеют программировать. Пугает слабость системного мышления.
Владимир Завертайлов, основатель и руководитель интернет-студии «Сибирикс»Поэтому, чтобы стать тем самым крутым веб-разработчиком, за которого будут драться компании, не нужен диплом - нужны знания.
КвалификацияПод веб-разработчиком работодатель обычно понимает универсального специалиста full-stack.
Full-stack состоит из front-end- и back-end-разработки. Разработчики front-end обеспечивают создание внешнего вида сайта (портала, проекта). Back-end-разработка включает в себя теневую сторону ресурса, то, чего не видно пользователю, изнанку сайта. Но, независимо от специализации, веб-программист должен знать полный цикл. Без этого невозможно представить, как тот кусок задачи, который ты реализуешь, будет интегрироваться с общим проектом.
На сегодняшний день стандартом веб-разработки (full-stack) является следующий комплекс знаний.
Вёрстка + браузерный язык программирования + серверный язык + язык для работы с базами данных + фреймворк(и).Получить такой комплекс знаний можно на . Это образовательная площадка, где собраны лекции и вебинары для тех, кто хочет изучать программирование. Специализация «веб-разработчик» рассчитана на 11 месяцев (плюс стажировка) и состоит из нескольких курсов.
Полноценный кейс для портфолио можно составить во время двухмесячной стажировки от GeekBrains. На ней выпускники проходят весь путь от генерации идеи до реализации проекта и учатся взаимодействовать с командой. Также всегда есть шанс попасть на оплачиваемую стажировку с последующим трудоустройством в одну из компаний-партнёров GeekBrains или найти единомышленников для стартапа.
СливкиИ в конце о самом приятном - о деньгах. Ведь, как упоминалось вначале, профессия универсального веб-разработчика не только востребованная, но и высокооплачиваемая.
По данным агентства «Тэглайн», веб-программисты получают в 1,8 раза большую зарплату, чем среднестатистический житель России.
Средняя зарплата веб-разработчика по стране - 60 310 рублей, в Москве - 75 270 рублей, в регионах - 46 790 рублей.У этой профессии нет карьерного потолка, с её помощью можно обеспечить себе безбедную старость. Усердно работая и успешно реализуя крупные проекты, можно стать начальником информационно-технологического отдела или даже IT-директором. Также веб-разработчики довольно часто выбирают фриланс и ни от кого не зависят. А ещё данная специальность является отличной платформой для открытия собственного бизнеса в интернете.
В мире веба все меняется очень быстро: то, что было модным вчера, сегодня кажется безнадежно устаревшим, поэтому хороший веб-дизайнер должен ориентироваться в новинках и трендах. Это, если хотите, производственная необходимость. Думаете, нельзя знать и уметь абсолютно все? Согласны, никому не объять необъятного, но есть вещи, без которых точно не обойтись.
Мы выбрали пять критично важных в наше время навыков и советуем вам их освоить - чтобы чувствовать себя уверенно и делать красивые и современные сайты.
01. Не забывайте про мобильные версииВсе больше и больше людей пользуется смартфонами и планшетами. Это нужно учитывать и владельцам бизнеса, и веб-дизайнерам, и SEO-специалистам. В последнем году компания Google , что если у сайта есть мобильная версия, ему отдается приоритет в поисковой выдаче. Дизайнерам сегодня необходимо перестраиваться и делать такие сайты, которые без проблем откроются на любом устройстве.
Имейте в виду следующее: если человек выходит в интернет со смартфона, он, скорее всего, делает это на ходу. У него не так много времени, а перед глазами - маленький экран. Он не собирается неспешно просматривать сайт, он хочет быстро найти конкретную информацию. Значит, мобильная версия должна быть удобной, продуманной и без излишеств. Другими словами - контактные данные должны быть доступнее текста «О нас».
02. Экономьте время и деньги - пользуйтесь WixВ отличие от некоторых других конструкторов, дает полную свободу действий. Это очень удобно, особенно если вы хотите делать сайты для малого бизнеса - несложные и не слишком дорогие. Можно выбрать и сделать все с нуля, можно воспользоваться и немножко его доработать.
Наш редактор очень простой и понятный, поэтому создание сайта - дело нескольких часов. Если вы работаете хорошо и быстро, к вам обращается больше заказчиков, и ваше портфолио растет. Кроме удобного редактора у нас есть , а в нем - масса полезных приложений для продвижения и всего остального. Вы можете не просто сделать сайт, но и дополнить его всем, что душа пожелает.
03. Разберитесь с SEOЕсли вы работаете с предпринимателями, они наверняка захотят, чтобы их сайт находился поисковиками. Для этого вам нужно знать . Экспертом быть необязательно, достаточно понимать, от чего зависят позиции в поисковой выдаче. Google и Яндекс «предпочитают» популярные, информативные и удобные сайты. Ресурсы, не соответствующие этим критериям, могут вообще не попасть в результаты поиска. Хотите заслужить расположение поисковиков - уделяйте внимание и дизайну, и контенту.
Советуем также разобраться с и понять, как ими пользоваться. Поговорите с заказчиком, подумайте, по каким запросам люди попадают на его сайт, и добавьте эти словосочетания в заголовки и тексты. Не забудьте оптимизировать изображения с помощью . Если сделанный вами сайт поднимется в результатах поиска, ваш заказчик будет по-настоящему счастлив.
04. Учитесь работать с видеоНет, мы не собираемся отправлять вас на курсы операторов и монтажеров, мы просто хотим, чтобы вы знали и умели самое основное. Популярность не утихает, многие компании заводят собственные каналы и просят добавить их на сайт. Кроме этого, спросом пользуются лендинги с видео и .
К счастью, хороших видеоредакторов сегодня много, выбрать подходящий - не проблема. Лично нам очень нравится WeVideo . Это облачный сервис, идеальный для совместной работы. Здесь можно монтировать ролики и делать эффектные слайд-шоу.
Начать свой путь к карьере программиста стоит с ответа на вопрос, нужно ли вам программирование вообще? Этот вопрос не относится к тем, кто учится или учился по специальности, близкой к программированию. Если вам в школе математика давалась лучше, чем гуманитарные науки, если вам нравится проводить много времени за компьютером, если вам хочется изучать что-то новое, тогда программирование вам подойдёт.
С чего начатьЕсть несколько вариантов развития событий, в результате которых человек становится программистом. Первый - родители-программисты, которые всему научили своих детей. Таким детям даже не нужно идти в университет. Второй вариант - модная профессия программиста. После школы нужно было выбрать, куда пойти учиться, и выбрали модное направление IT, вроде бы понравилось. И последний вариант - хобби, которое переросло в работу.
Если с вами ничего из вышеперечисленного не произошло, значит, у вас есть выбор из четырёх вариантов:
- Самообразование . Этот вариант можно использовать как самостоятельно, так и в паре с другими методами. В интернете полно , и приложений , которые помогают изучать различные языки программирования и технологии. Но это самый тяжёлый путь для начинающих.
- Университет . Если вы оканчиваете школу и хотите быть программистом, тогда идите в университет. Если не за знаниями, тогда за корочкой. Она может послужить бонусом при устройстве на работу. Хотя и какие-то знания вы тоже получите. Но не забывайте заниматься и самообучением. К выбору вуза стоит подойти очень ответственно. Внимательно изучите программы обучения и выбирайте лучшие технические вузы.
- Ментор . Будет очень неплохо, если вы найдёте человека, который согласится помочь вам и направит вас в правильную сторону. Он подскажет подходящие книги и ресурсы, проверит ваш код, даст полезные советы. Кстати, мы уже писали о , где вы сможете найти ментора. Наставника можно искать среди знакомых программистов, на IT-тусовках и конференциях, на онлайн-форумах и так далее.
- Специализированные практические курсы . Попробуйте поискать в своём городе курсы, где вас обучат какому-нибудь языку программирования или технологии. Я был приятно удивлён количеством таких курсов в Киеве, в том числе бесплатных и с последующим трудоустройством.
Когда вы станете программистом, через годик-другой будете вольны выбирать любой язык, который вам нравится. Но при выборе первого языка программирования новичок должен учитывать следующие критерии:
- Наличие на рынке вакансий . Конечная цель этого пути - найти работу программистом. А это будет трудно сделать, если на рынке вакансий никто не будет искать разработчиков на вашем языке программирования. Проверьте сайты с вакансиями, посмотрите, кого больше ищут, выпишите десяток языков. И переходите к следующему критерию.
- Низкий уровень вхождения . Если вам придётся потратить длительное время на изучение языка, это может отбить у вас охоту к программированию вообще. Почитайте о тех языках, которые вы выбрали выше. Просмотрите литературу, которую нужно будет прочитать, чтобы изучить эти языки. И выберите те, о которых пишут, что они лёгкие, или которые вам показались лёгкими. Такими языками могут оказаться PHP, Ruby, Python.
- Кайф от процесса . Если вам не нравится писать код на выбранном языке, вы не будете получать удовольствия от этого процесса, от работы и от жизни. А оно вам надо? Делайте правильный выбор.
Также вам придётся определиться с направлением программирования. Мобильное, десктопное, игры, веб, низкоуровневое программирование и так далее. Самые популярные и относительно лёгкие отрасли - разработка под веб, мобильные и десктопные клиенты. Под каждое направление может подходить один язык и совсем не подходить другой. То есть при выборе языка программирования также стоит отталкиваться и от этого фактора.
В любом случае изучите веб-технологии. Это язык разметки , стили и , который позволит сделать вашу страницу динамической. На следующем этапе изучите серверный язык (Python, PHP, Ruby и другие) и подходящие для него веб-фреймворки. Изучите базы данных: практически в каждой вакансии программиста это упоминается.
Как получить начальный опытБез опыта вы не получите работу. Без работы вы не получите опыт. Замкнутый круг реальной жизни. Но ничего страшного, мы из него выберемся.
Во-первых, не стоит ждать, пока вы прочитаете все книги по выбранному языку программирования. Начинайте писать свои первые строки кода уже после второй главы книги. Выполняйте все задания из книг, перепечатывайте примеры, разбирайтесь в них. Усложняйте примеры и задания из книг своими идеями. Создавайте свои задачи к пройденному материалу. Решайте эти задачи.
Во-вторых, вам нужно найти свои первые проекты. Это, наверное, самый сложный вариант, но рабочий. Вам придётся самому искать заказы, выполнять их, заморачиваться с оплатой. Для новичка это архисложно, но зато затем все остальные варианты покажутся плёвым делом. Выполненные проекты можно будет записать в опыт и показать вашему будущему работодателю. Реальные проекты являются большим плюсом в вашем резюме.
Если вы знаете английский язык, регистрируйтесь лучше на англоязычных биржах. Рынок там больше. Если не знаете английского, учите его. А пока что вам доступны русскоязычные биржи фриланса. Ищите небольшие проекты, которые соответствуют вашему уровню знаний или чуть выше него. Подайте заявку на пару десятков таких заданий. И приготовьтесь получить море отказов. Но если одна-две заявки выстрелят, у вас будет шанс получить реальный опыт.
Ещё одним неплохим вариантом для получения реального опыта является open source. Таким проектам всегда нужны новые люди, пусть даже и новички. Вы можете поискать в проекте баги или посмотреть в баг-трекере и предложить методы их решения. Найти такие проекты легко на GitHub или . Не стесняйтесь задавать там вопросы.
Четвёртый вариант получения опыта - помощь знакомым программистам. Попросите их передать вам маленькие и несложные задания. Если что-то не будет получаться, у вас всегда будет к кому обратиться. И при этом вы будете участвовать в реальном проекте.
Последний способ - собственные проекты, различные хакатоны или работа в коворкинге. Свои проекты сложно начинать самому, лучше поискать знакомых или друзей.
Почему стоит выбрать PythonДавайте немного подробнее поговорим о выборе первого языка программирования. Первый язык должен быть простым и популярным на рынке. Таким языком является Python . Я очень советую выбрать именно его в качестве первого языка программирования.
Код программы на Python читабелен. Вам даже не нужно быть программистом, чтобы в общих чертах понять, что происходит в программе. Из-за несложного синтаксиса Python вам понадобится меньше времени для написания программы, чем, например, на Java. Огромная база библиотек, которая сэкономит вам кучу сил, нервов и времени. Python является высокоуровневым языком. А значит, вам не нужно особо думать о ячейках памяти и о том, что там разместить. Python - язык широкого назначения. И он такой простой, что даже дети могут его выучить.
Справедливости ради стоит упомянуть и о других языках программирования. Java может стать неплохим выбором для новичка. Этот язык популярнее, чем Python, но и немного сложнее. Зато инструменты для разработки гораздо лучше проработаны. Стоит только сравнить Eclipse и IDLE. После Java вам будет проще перейти к работе с низкоуровневыми языками программирования.
PHP - ещё один очень популярный язык. И, мне кажется, он даже проще, чем Python. Очень легко найти себе ментора или решение какой-нибудь проблемы на форуме. Всё потому, что в мире существует огромное количество PHP-программистов разного уровня. В PHP нет нормального импорта, есть множество вариантов решения одной и той же задачи. А это усложняет обучение. И PHP заточен исключительно под веб.
Языки C и C# очень сложны для новичка. Ruby - хороший выбор в качестве второго языка, но не первого. JavaScript - очень простой язык, но ничему хорошему он вас не научит. А задача первого языка программирования всё-таки научить вас чему-то правильному, задать какую-то логику.
Важен ли английский языкВажен! Не знаете? Учите. Знаете? Совершенствуйте. Учитесь читать, писать, слушать и говорить на английском. Делайте упор на техническую литературу. Слушайте англоязычные подкасты. Читайте англоязычные учебники по программированию.
Что нужно знать, кроме языка программированияКонечно же, кроме языка программирования и английского, нужно знать что-то ещё. А вот что - зависит от направления, которое вы выберете. Веб-программист обязан знать HTML, CSS, JavaScript. Десктоп-программист учит API операционной системы и различные фреймворки. Разработчик мобильных приложений учит фреймворки Android, iOS или Windows Phone.
Всем нужно выучить алгоритмы. Попробуйте пройти курс на Coursera или найти подходящую для себя книгу по алгоритмам. Кроме этого, нужно знать одну из баз данных, паттерны программирования, структуры данных. Стоит также познакомиться с репозиториями кода. Хотя бы с одним. Обязательно знание систем версионного контроля. Выбирайте Git, он самый популярный. Вам нужно знать инструменты, с которыми вы работаете, операционную систему и среду разработки. И главный навык программиста - уметь гуглить. Без этого вы не проживёте.
Последние шагиВам нужно подготовить резюме. Не просто резюме, а . Не стоит писать там , но и умалчивать о своих умениях тоже не нужно. После того как вас пригласят на интервью, вы должны к нему подготовиться. Пройдитесь по материалу, который указан в вашем резюме. Вы должны быть уверены в своих знаниях. Просмотрите проекты, над которыми вы работали, вспомните технологии, которые вы применяли. И вперёд - к светлому будущему с новой профессией программиста.
Я вновь приветствую вас на своем блоге и сегодня попробую ответить на вопрос, как стать веб-программистом с нуля максимально быстро? Сразу скажу, что это возможно, в принципе, для любого человека, не вижу в этом плане никаких ограничений. Самое важное — ваше желание и упорство.
Во-первых, вам нужно определиться с тем, какова цель вашего обучения? Для себя или для работы в престижной компании с большой зарплатой и карьерным ростом? Каким бы ни был ответ, вам наверняка захочется начать с бесплатных уроков. И далее я приведу несколько сайтов, где можно получить обучение почти бесплатно, но до определенного уровня.
Конечно, на теории дело не закончится, все полученные знания нужно пару десятков раз применить на практике — тогда они вобьются в вашу голову намного лучше, так что, даже есть после этого разбудить вас ночью, и спросить: «а как работает в css @keyframes?» — вы все подробно расскажете.
Итак, этот самый первый шаг заключается в том, чтобы узнать, что вам нужно. Для этого рекомендую перейти на очень популярный ИТ-портал — Geekbrains . Там, немного прокрутив страницу, вы можете увидеть, по каким направлением обучают на портале. Нас интересует профессия веб-разработчик — это и есть веб-программист, по сути.
Тут в самом низу вы можете увидеть то, что будете изучать, если оплатите обучение.
Я специально обрезал этот скриншот немного, чтобы показать вам, какие технологии вам нужны в первую очередь.
Итак, как видите, это:
Но это лишь самый базовый уровень, на деле же, если вы хотите становиться профессионалом, вам придется изучать так или иначе десятки технологий. Вот их неполный список:
В моем понимании есть 3 основных способа обучаться на веб-программиста:
Хорошими площадками для получения базовых знаний по html, css, php и js будут Magisters.org , HtmlAcademy.ru и премиум раздел Web4myself.com (хоть он и платный, но доступ в него всего 500+ рублей в месяц, а уроков там тьма).
Ну а наилучшим вариантом я вижу тот же Geekbrains
— потому что здесь все платно и по серьезному, вас доводят до реальных результатов в виде созданных вашими руками сайтов, а не просто дают голую устаревшую теорию. Плюс там можно получить консультации реального наставника.
Как видите, обучение на веб-разработчика стоит 6-8 тысяч рублей в месяц и продолжается аж 11 месяцев, после чего, если вы не халтурили, вы становитесь действительно востребованным специалистом. Я понимаю, что это может быть дорого для большинства из вас, но это самый короткий путь к тому, чтобы стать профи в этой профессии.
По итогу можно получить такое приличное резюме:
И такие навыки:
Если вы решите учиться самостоятельно, то сможете значительно сэкономить, да и результата тоже можно добиться относительно неплохого. Единственный минус — вам придется собирать знания и курсы по разным технологиям буквально по частичкам.
Например, за одиннадцать месяцев Geekbrains обещает вас обучить таким технологиям: HTML/CSS, PHP, JS, NodeJS, AngularJS, Yii . С другой стороны, для того, чтобы найти простую работу или начать делать сайты для себя, вам необязательно знать все это. Я уже говорил, что является базой. Это html, css, php, javascript. Но дело в том, что с каждым годом требования к веб-разработчикам растут и если вы хотите серьезных результатов, так или иначе придется изучать современные технологии и тенденции.
Курсы по PHP и фреймворкам
На данный момент есть замечательный курс PHP7 и MySQL с нуля до гуру
, который я прошел лично и даже написал о нем отдельный отзыв. Я считаю этот курс замечательным, в нем дается большая база по современному php.
Книги тоже имеют право на жизнь. Для расширения своих знаний в любой сфере читать их полезно. И по php почитать можно много чего. Например, такое.
Необязательно знать всеЕсли вы изучили только javascript (а php — нет), то сможете работать front-end разработчиком, а если наоборот — попробуете свои силы в back-end . В общем-то, даже имея небольшие знания, уже можно что-то заработать на сайтостроении, но чем больше вы будете знать, тем больше ваш потенциал.
Профессия веб-разработчика - одна из самых востребованных на IT-рынке. Давайте разберемся, как прийти в нее, выясним, как работают и взаимодействуют между собой технологии веб-разработки, и на практическом примере попробуем создать свою первую страницу.
Текст подготовлен на основе вебинара с участием Михаила Овчинникова из компании Badoo.
Запись вебинара
Экономия времени
Ситуация на рынкеРассматривая общую картину рынка, можно выделить наиболее востребованные направления в IT-сфере:
1. Frontend - самая «громкая» и быстроразвивающаяся отрасль, в которой постоянно меняются тренды. Опирается на язык программирования JavaScript и его фреймворки, такие как Angular.js, React.js, Vue.js и другие, а также язык разметки гипертекста HTML и таблицы стилей CSS.
2. Web-development, а именно backend-разработка с использованием различных языков, например, PHP, Ruby и Python.
3. Android/iOS-development - разработка под мобильные устройства на языках Java, Swift, Objective-C, C# (Xamarin), JavaScript (React Native) и других.
4. .NET-development - разработка как десктопных приложений под операционную систему Windows на языке C#, так и серверных программ, в том числе веб-сайтов, с использованием технологии ASP.NET.
5. Java-development - разработка кросс-платформенных приложений на языке Java, а также крупных высокопроизводительных систем с использованием технологии Java EE. Ее выбирают, когда нужны надежность, масштабируемость и гибкость.
6. Game development - разработка игр под различные платформы.
7. UI/UX - проектирование пользовательских интерфейсов.
8. QA - обеспечение качества программного обеспечения и его тестирование.
9. Embedded development - разработка программного обеспечения под «железо»: автомобили, бытовую технику и различные устройства с использованием низкоуровневых языков, таких как C и C++ со вставками ассемблера соответствующего процессора.
Почему стоит идти в вебСейчас веб-разработка - настолько быстро развивающаяся отрасль, что стоит изучить одну технологию либо фреймворк и начать с ними работать, как через два-три месяца на рынке появится что-то совершенно новое и все начнут использовать именно это.
Веб-разработка постоянно пополняется молодыми специалистами. Senior-программистов с десятью годами стажа можно встретить довольно редко: либо из них успевают вырасти управленцы, либо им приходится осваивать новые языки. Этот бурный рост отрасли формирует широкое информационное поле и крепкое сообщество.
Поэтому, если вы молоды, полны энергии, имеете чувство вкуса, да еще и с любовью относитесь к программированию, веб-разработка - для вас.
Сколько зарабатывает веб-разработчикИзучив сайты поиска работы, можно увидеть весь диапазон зарплат веб-разработчиков. Новичок, у которого меньше полугода опыта, может зарабатывать от30 000 до60 000 рублей. Средний специалист с хорошим стажем получает80 000–150000 рублей. Доход профессионала составляет150 000–250000 рублей. Вдобавок, многое зависит от страны, региона, выбранного языка и компании, предлагающей вакансию.
Зарплаты frontend-разработчика от сервиса зарплат компании «Мой круг » на сайте habrahabr.ru (конец2017 года)
Что нужно знать веб-разработчикуПро веб-разработку и программирование бытует множество слухов и стереотипов. Мы поговорим в том числе и о них.
Что веб-разработчику не требуется:Для начала давайте выясним что такое сайт и из чего он состоит.
Технически, сайт - просто набор текстовых файлов, имеющих определенные расширения, хранящихся в одном каталоге на компьютере или сервере. Кроме них в структуру каталога могут входить подпапки с изображениями, шрифтами и дополнительными библиотеками, использующимися на нем. В зависимости от назначения и формата файлов их сортируют по соответствующим папкам. Главная страница сайта, как правило, лежит в корне каталога и называется index.html.
Например, если бы наш сайт имел домен mysite123.com, то и папка, в которой он лежит, называлась бы так же и имела примерно такую структуру:
Структура каталога сайта
Когда в адресной строке браузера мы вводим адрес, например, yandex.ru, браузер обращается к серверу соответствующего сайта. Это то, с чего начинается взаимодействие с любой страницей в сети.
В ответ на этот запрос на сервере yandex.ru начинают работать backend-технологии, например, PHP и MySQL. Они делают свою «серверную магию» и в ответ на запрос «покажи мне главную страницу» отдают обратно браузеру искомую страницу в виде HTML, CSS и JavaScript-кода. Браузер умеет распознавать этот код и в результате выводит в своем окне красивую, работающую «Главную».
Ресурсы и инструменты для веб-разработкиДля качественного и продуктивного освоения веб-разработки познакомимся с наиболее популярными источниками информации, а также некоторыми инструментами.
HTML и CSS:- htmlbook.ru - самоучитель по HTML4, а также введение в HTML5, самоучитель CSS, введение в CSS3;
- htmlacademy.ru - интерактивный курс по HTML5, основы CSS, множество бесплатных уроков;
- webref.ru - самоучитель HTML, основы CSS, блочная модель CSS, текст в CSS, позиционирование в CSS, продвинутый CSS;
- «Погружение в HTML5» Марка Пилгрима.
- learn.javascript.ru - самый современный самоучитель по JavaScript;
- Дэвида Флэнагана.
После освоения этих технологий рекомендуется также изучить JQuery - самую популярную библиотеку JavaScript. В дальнейшем стоит познакомиться и с такими полезными библиотеками, как Slick, Owl Carousel, Magniffic Popup, Velosity.js, Tree.js и другими.
Для ускорения написания кода и удобной работы с ним советуем использовать текстовые редакторы, такие как Sublime Text с плагином Emmet, редактором Notepad++, Brackets, IDE WEBStorm, PHPStorm и другими полезными инструментами.
Для ускорения написания CSS-кода полезно будет научиться работать с препроцессорами CSS, такими как Scss, Sass, Less.
Создаем простую веб-страницуКак вы уже узнали,веб-страница - это файл с расширением.html, в которой содержится HTML-код. Он представляет собой набор определенных тегов, заключенных с обеих сторон в угловые скобки. Теги бывают закрывающие и незакрывающие.
Воспользуемся текстовым редактором Sublime Text3 и создадим в нем новый файл index.html.
Файл index.html
Теперь у нас есть стандартная структура HTML-документа. Откры созданную страницу в браузере, вы увидите пустой белый фон. Все содержимое страницы, которое выводится в браузере, помещается между открывающим и закрывающим тегами и - а пока что у нее есть только title, отображаемый во вкладке браузера, но нет никакого наполнения.
Добавим несколько элементов. Для каждого из них есть свой тег. Для начала создадим заголовок и дополним его текстом и кнопкой.
Для добавления заголовка используется тег , для параграфа текста - тег
А для кнопки - тег . Поместим эти элементы внутри блока с тегом .
Моя первая страница
Это моя первая страница
Программирование - это просто!
Показать
Теперь обновим страницу. Как видите, элементы появились в окне браузера.
Язык HTML, который мы использовали до сих пор, отвечает лишь за создание структуры страницы. Давайте попробуем немного стилизовать наши элементы: поменяем цвета заголовка и фона кнопки, а для текста параграфа изменим размер шрифта.
Для изменения стиля элементов необходимо применить к ним CSS-правила. CSS-правила можно записать внутри блока с тегом .
Нужный нам код выглядит так:
h1 {color: violet;}
p {font-size: 30px; }
button {background-color: yellow;}
Разместить его следует между тегами . Как вы могли заметить, названия свойств говорят сами за себя. Это простые английские слова, записанные согласно определенному синтаксису, свойственному языку программирования. Снова обновим страницу и посмотрим, что получилось.
Отлично. Теперь установим фон, а кнопку сделаем более заметной. Добавим следующие правила для кнопки и фона:
background-color: orange;
font-size: 30px;
body {background-color: lightgray;}
Пора дополнить все это великолепие картинкой. Добавим к существующим элементам тег , который и отвечает за отображение изображений на странице. Он включает такой атрибут, как src (от англ. source - источник), который указывает на путь к картинке. Наша картинка лежит на диске D.
Так можно создавать множество элементов на странице, а затем с помощью CSS-правил придавать им нужные вид и расположение.
Давайте сделаем так, чтобы при наведении курсора на кнопку она становилась белой, а текст внутри нее - оранжевым. За состояние элемента при наведении на него курсора в CSS отвечает псевдокласс hover. Добавим несколько правил для нашей кнопки и после этого попробуем навести на нее курсор.
button:hover {background-color: white; color: orange;}
Все сработало! Кнопка поменяла свой вид.
Теперь попробуем сделать нашу картинку по умолчанию невидимой и устроим все так, чтобы она появлялась только по нажатию на кнопку. За видимость объектов отвечает CSS-свойство visibility. Установим ему значение hidden.
img {visibility: hidden;}
Как видите, картинка исчезла.
Вернем нашу картинку и нажмем на кнопку «Показать». Ничего не произошло? Все потому, что мы еще не запрограммировали кнопку на выполнение действия. Здесь мы уже можем применить JavaScript.
Зачем нужен JavaScriptСейчас мы имеем статическую страницу, которая содержит простой контент. Для того чтобы назначить какое-то событие в качестве реакции для нажатия на кнопку, и нужен язык JavaScript. Вообще любая интерактивность на сайте, любое взаимодействие с пользователем - это JavaScript. Код JavaScript, как и CSS, записывается в определенном теге - .
Обычно скрипты, кстати, как и CSS-правила, принято выносить в отдельный файл с расширением.js (для CSS - .css), а затем подключать этот файл к странице. Но в нашем примере мы вставим скрипт в раздел , точно так же, как делали это с CSS.
Чтобы выполнить действие только с определенным элементом, в нашем случае с картинкой, зададим ей уникальный идентификатор с произвольным именем, например, cat.
После чего создадим с помощью JavaScript функцию, которая будет возвращать картинку на экран, и дадим ей имя show. Вставим этот кусок кода в раздел .
function show(){ document.getElementById("cat").style.visibility="visible";}
Также необходимо явно указать кнопке, что она должна реагировать на какое-то событие. В нашем случае это одиночный клик. То есть при клике по кнопке должна выполниться ранее созданная функция show.
Показать
Теперь конструкция document.getElementById("cat") выполняет обращение к элементу по идентификатору cat, который прикреплен к нашей картинке. Укажем, что обращаемся к стилю элемента, а конкретно - к свойству visibility, и устанавливаем через знак «=» значение visible в кавычках.
Если вы хотите, чтобы при нажатии на кнопку менялся и фон страницы, добавьте в функцию и этот код:
document.body.style.background = "green";
Как видите, и правда просто.
Вместо того чтобы вручную менять свойства объектов в коде, JavaScript это сделал за нас.
Как сайты хранят данныеСам сайт данные не хранит. Он лишь отображает их на своих страницах. Профили пользователей, списки товаров и услуг, а с ними и прочая информация лежат в базе данных на сервере. На новостном сайте все новости также хранятся в базе данных.
Представьте себе, если бы каждый раз, когда какой-нибудь онлайн-магазин пополняет свой список товаров, приходилось вручную вставлять блоки с информацией о них в HTML-код страницы. Сложно представить, насколько рутинным было бы это занятие. Вместо человека этот процесс должен выполняться программой.
Для таких целей и существуют серверные языки, например PHP. Скрипты, написанные на PHP, умеют работать с базой данных в автоматическом режиме. Типовая задача, которую решает PHP-код, - это получить какой-то запрос от пользователя, обработать его, сходить в базу данных, забрать нужные и вывести их пользователю.
Существует много других языков для этих целей, но PHP в связке с MySQL - системой управления базой данных (СУБД) - считаются наиболее простым вариантом для освоения новичком.
Для того чтобы постоянно пополнять сайт новым контентом, существуют системы управления контентом (CMS), или так называемые движки. Кстати, одна из наиболее популярных CMS, Wordpress, как раз написана на языке PHP.
Подводя итог, можно сказать, что для того, чтобы сделать сайт «живым», необходимо овладеть как минимум вышеперечисленными технологиями.
ЗаключениеСегодня мы поговорили о том, какой стек знаний должен иметь начинающий программист. Разобрались с основами сайтостроения и попробовали создать свою первую веб-страницу. Еще раз перечислим основные навыки веб-разработчика:
И, пожалуй, самое важное - это постоянная практика и стремление к изучению чего-то нового. Всему этому (и многому другому) вы сможете научиться, пройдя курс , включающий в себя множество тестовых и практических задач, большой объем коммуникаций с профессиональными программистами и даже создание своего первого рабочего проекта.
