12 частых ошибок начинающих веб-разработчиков


Оглавление (нажмите, чтобы открыть):

12 ошибок начинающего веб-мастера

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

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

1. Выбор тематической ниши для сайта без ее детального анализа.

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

2. Некорректное имя домена.

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

3. Полное делегирование с самого начала.

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

4. Откладывание срока публикации сайта.

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

Просто переступаем через себя и стартуем!

5. Неуверенность в новом проекте.

Четкий план, нацеленность на результат – основа успеха.

6. Самостоятельное переделывание оплаченных работ.

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

7. Отсутствие контроля работы перед приемом текста и публикацией.

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

8. Ведение сайта без его монетизации.

Собственно, а зачем тогда запускать проект? Он ведь создается ради прибыли! Затраты должны компенсироваться, а денежки – течь в карман веб-мастера.

9. Неаккуратные тексты.

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

Кому будет интересно смотреть на сплошное полотно букв?

10. Излишние затраты времени на публикации контента.

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

11. Завышенная плата копирайтерам.

Выходить за рамки бюджета не нужно – к чему лишние траты? Поэтому, лучше проанализировать рынок и платить адекватную цену за работу.

12. Странная и нелогичная навигация.

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

Советы для начинающих веб-разработчиков

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

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

Мотивация

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

Будем с вами честны: мотивация на старте может очень быстро угаснуть и не заряжать вас энергией бесконечно. Как продлить силу действия мотивации? Знаете, есть такие зеленые бумажки, бывают даже других цветов, по-моему называются деньгами. Так вот, деньги — это расходный материал, который помогает нам с легкостью приобретать нужные нам вещи, делать то, что без них практически невозможно. К чему я это? К тому, что именно деньги могут быть отличной мотивацией.

Но откуда деньги, если вы даже не определились, чем будете заниматься? Вам должно хватить начальной мотивации на период, пока вы делаете первые шаги. На этой волне уже можно будет что-то продать. Вы наверное думаете, что это произойдет через 2-3 года, а может и вовсе лет через 5? Буду рад развеять ваши сомнения. Вы сможете продать что-то уже через 2-3 месяца. А через 2-3 года продажи значительно вырастут, как и ваша прибыль. Вы сможете тратить то же самое количество времени на более дорогие продукты. Теперь вы сможете выполнять работу качественно, быстро и профессионально, за счет чего и результат не заставит себя ждать (в том числе в виде приятно хрустящих купюр).

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

Возьмем, например, клиента, который любит рыбачить. Он работает инженером связи и получает среднюю зарплату. И вот он решил сделать себе сайт-блог о рыбалке. Во многих случаях подобные клиенты обладают ограниченным бюджетом и качество разработки для них не стоит на первом месте. Разумеется, он не будет кричать об этом, так как платить будет свои заработанные средства. И вот тут сделанный вами сайт, который будет на чистом HTML или на каком-то бесплатном движке, вполне может удовлетворить его потребности. Тут вы получаете свои первые 50$ (условно) и к вашей мотивации добавляется +50 очков. Этого хватит для продолжения обучения и разработки следующего заказа.

Какую специализацию выбрать?

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

Я приведу вам свой личный пример. В далеком детстве (года в 4-6) мне нравилось брать в руки паяльник, ковыряться в печатных платах, играться со светодиодами и батарейками. К 6-10 годам у меня был компьютер Atari. С ним в комплекте шел магнитофон, а на магнитной ленте кассеты были записаны игры. Да, я играл, безусловно, в 8 битные игры! Но у меня был приличный интерес к языку Basic, который имелся в этом Atari и можно было даже писать программы, которые в последствии выводили результат на экран. Тогда я даже не знал, что это программирование и это язык Basic. Я копировал код из книжки и смотрел на визуализации на экране. Далее начал экспериментировать. Менять цифры, команды и получал новые картинки и звуки. Это меня очень радовало. Далее, когда я был в школе, я наткнулся на фильм Матрица. Смотрел я его много-много раз и он до сих пор для меня один из лучших фильмов, опередивших свое время. В школе мне очень нравилась алгебра и геометрия. А также, у меня был некий «анти-учебник» внутри самого себя. Нам задавали уроки — я учил. Далее надо было писать контрольную, используя полученные материалы. Я знал как решить задачу, исходя из выученных данных, но я всегда старался «изобрести» что-то и решить задачу каким-то обходным путем. Подобное у меня появилось лет в 12. Всегда хотел делать не так, как нас учили, но в итоге придти к решению быстрее, аккуратнее и не так, как это делают все.

Теперь пришло время задать вопрос: «Кем я должен был стать?» Да, программистом, а скорее всего архитектором программного комплекса. Попытайтесь использовать мой подход и вы сможете понять, что будет вам действительно нравиться долгое-долгое время. Всего этого мне никто не говорил. И как бы я стал программистом, даже не думая обо всем этом. Но если бы я изначально думал именно в таком ключе, я бы смог определиться раньше. К слову, первые шаги в программировании начал делать с 13 лет на языке Pascal (не считая Atari в детстве). Но я уверен, что можно было начать и с 10 лет!

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

Хочу стать программистом. Какой язык выбрать?

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

HTML + CSS

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

Можете начать с этих двух учебников для базового понимания:
• Учебник HTML;
• Учебник CSS.

Имейте ввиду, в интернете очень много доступной информации. И первые 2-3 выдачи в Google по ключевым словам «Учебник HTML» будут вполне актуальными и релевантными. Изначально нужно настраивать себя на поиск ответов самостоятельно.

JavaScript

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

Далее переходим к более серьезным языкам. Рассмотрим PHP. Он является одним из лидеров среди языков для создания динамичных сайтов. Если вы хотите разрабатывать сайты, рекомендуем начать свой путь именно с него. В любой момент вы сможете выучить другие языки, но PHP поможет вам быстро освоить базовые понятия и начать продавать свое творение. При изучении PHP вы уже в полную начнете вникать в суть сайтостроений.

Разработан компанией Sun Microsystems. Java является классом на основе объектно-ориентированного языка программирования. Это супер популярный язык программирования, стандарт для корпоративного программного обеспечения, веб-контента, игр и мобильных приложений. А также язык программирования для OS Android. Java разработан таким образом, что может работать на нескольких программных платформах. В связи с чем, программа написанная на Mac OS X может работать и на Windows.

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

C++ является языком промежуточного уровня объектно-ориентированного программирования, изначально разработанный для улучшения языка C. На C++ созданы многие популярные программы, такие как Firefox, Winamp и Adobe. Он используется для разработки программного обеспечения систем, прикладного программного обеспечения, серверных и клиентских высокопроизводительных приложений, а также для создания видеоигр. Знать его отлично, но расчитывать на него, как на язык для создания сайтов, не стоит.

Python

Python является языком сценариев высокого уровня для веб-сайтов и мобильных приложений на стороне сервера. Он считается легко изучаемым языком, а также легко читаемым. Разработчики могут использовать меньше строк кода для достижения тех же задач на других языках программирования. На базе Python собраны многие сложные продукты: Instagram, Django, Rdio. Python также активно используется в продуктах Google, Yahoo и NASA. Для создания высоконагружаемых проектов вам подойдет Python, как один из языков, решающий вопрос нагрузки. Советуем изучать Python как второй или третий язык.

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


Никогда не верьте тренингам, типа «Как стать программистом за 24 часа». Нужно отнестись с пониманием к тому, что вы можете достигнуть высоких результатов только упорным трудом, практикой и только со временем. В среднем считается, что для того, чтобы стать хорошим программистом, нужно потратить минимум 10.000 часов на программирование. А это в среднем 5 лет, если учитывать, что в день будете тратить 4 часа. Да именно 4, а не 8, так как 8 часов чистого программирования будет приличной нагрузкой для мозга, что мешает концентрации и качественному освоению материала.

Какие качества развить в себе?

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

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

Сколько времени потребуется на обучение?

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

Всегда ищите метод сделать текущий проект лучше, чем предыдущий! Если у вас новый проект, идентичный которому вы уже делали полгода назад, не стоит использовать код 1 в 1 с этого проекта. Всегда старайтесь писать код заново и с каждым разом старайтесь писать его лучше чем вчера.

Бонус для вашей мотивации

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

Успеха в ваших начинаниях. Будьте настойчивыми, любите то что выбрали и все получится!

10 распространенных ошибок, которые совершают веб-разработчики

Дата публикации: 2015-09-14

От автора: существует бесконечное количество способов решить одну и ту же задачу – разработать сайт, который будет отлично работать в сегодняшнем современном интернете. Разработчики стоят перед выбором веб-хостинга, на чем писать HTML, CSS и JavaScript, какой дизайн использовать, а также какие JavaScript библиотеки/фреймворки подключить. После того, как вы сузили круг используемого инструментария, в сети можно найти кучу статей, форумов и шаблонов, которые помогут улучшить ваш сайт. И в независимости от того, какой путь был выбран, все разработчики ошибаются. Некоторые проблемы весьма специфичны, а другие имеют общий характер для всех веб-разработчиков. Итак, с помощью исследований, полученного опыта и последних наблюдений я хочу поделиться своим списком десяти общих ошибок, которые допускают веб-разработчики – и как их избегать.

1. Использование устаревшего HTML

Ошибка: Раньше в интернете было намного меньше решений по разметке, чем сейчас. Тем не менее, до сих пор олдфаги со своими старыми привычками и многие другие все еще пишут на HTML 20-го века. Пример – использование table для разметки макета, использование span или div там, где подойдут более семантические элементы, или теги, которые вообще исключены из стандарта типа center или font. Распространенная ошибка применение для добавления множественных отступов.

Последствия: HTML 10-ли летней давности может сильно усложнить разметку, и она будет вести себя противоречиво в разных браузерах. Это касается и последней версии браузера от Microsoft Edge и даже последних версий IE (11, 10, 9).

Как избегать: Прекратите использовать table для разметки контента и таблиц. Познакомьтесь, наконец, с передовыми тегами, как на whatwg.org. Используйте HTML для описания контента, а не для того, как это будет отображаться. Для отображения контента используйте CSS ( http://www.w3.org/Style/CSS/).

2. «В моем браузере все работает…»

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Как избегать: Тестировать сайт во всех браузерах и версиях во время разработки не очень практично. Но можно установить временные промежутки для проверки сайта во всех браузерах. Сейчас существует множество бесплатных сервисов для проверки: бесплатный VMs, сканеры сайтов. Сайты типа http://browsershots.org/ или https://www.browserstack.com показывают скриншот того, как определенная страница отрисовывается в различных браузерах/версиях/платформах. Инструменты как Visual Studio могут эмулировать работу некоторых браузеров при отображении страниц. При проектировании в CSS нужно сбросить все стили как на meyerweb.com.

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

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

3. Неправильные формы

Ошибка: Создание подсказок для всех полей формы (особенно для текстовых) и предположение, что пользователь введет то, что вы ожидаете.

Последствия: Все может пойти (и, скорее всего, пойдет) наперекосяк, если через чур доверять пользователю. Страницы могут упасть, если передать неверный тип данных или передать пустое поле. Еще более серьезной проблемой является умышленный взлом баз данных, возможно, через инъекции (см OWASP: Топ 10 2013-А1-инъекций).

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

4. Слишком долгое ожидание ответа от сервера

Ошибка: На странице полно графики в высоком разрешении, уменьшенной с помощью атрибутов width и height. Файлы CSS и JavaScript много весят. Исходный HTML код также излишне сложен и частично ненужнен.

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

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

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

Минимизируйте размер изображений с помощью инструментов Shrink O’Matic или RIOT.

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

Перед тем, как продолжить, хочу посоветовать вам, следить за новинками в HTML (см ошибку №1) и не забывайте про здравый смысл при использовании тегов style или script в верстке.

5. Написание кода, который «должен» работать

Ошибка: Будь то JavaScript код или серверный код, разработчик тестировал его на стадии разработки. Он проверил код и думает, что тот будет работать так же, после запуска сайта.

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

Мастер Йода рекомендует:  18 полезных библиотек для анализа данных в Python

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Как избегать: Человеку свойственно ошибаться, это нужно помнить и в программировании. Старайтесь с помощью JavaScript отлавливать ошибки. Хоть в статье и рассматривается JavaScript для приложений Windows, большинство тем также относятся и к веб-разработке, и тут много полезных советов! Еще один из способов создать надежный код, который можно будет легко модифицировать в будущем, это модульное тестирование.

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

6. Написание слишком обширного кода

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

Последствия: По мере появления новых версий браузеров, обслуживание и управление файлами кода становится громоздким и неудобным. Как и с ошибкой №1, это больше не нужно.

Как избегать: Используйте функцию обнаружения (техника Feature detection) в коде, а не обнаружение браузера/версии. Эта техника не только поможет радикально сократить ваш код, его станет намного легче читать и обслуживать. Библиотека Modernizr не только помогает с функцией обнаружения, но также автоматически делает фоллбэк старых версий браузеров, которые не поддерживают HTML5 или CSS3.

7. Неадаптивный дизайн

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

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

Как избегать: Мыслите адаптивно. Применяйте адаптивный дизайн для вашего сайта. Очень популярная библиотека, когда дело касается адаптивного дизайна Bootstrap.

8. Создание бессмысленных страниц

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

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

Как избегать: Используйте SEO (search engine optimizations) и всевозможные инструменты в HTML для повышения доступности страницы. Не забудьте добавить ключевые слова и описание. Все это отлично пояснено на About Tech. Для еще большей доступности используйте атрибут alt=»описание изображения» для каждого тега img или area. Конечно, это не все, и еще много можно прочесть на About Tech. Также совместимость веб-страниц с Section 508 можно проверить на сайте Cynthia Says.

9. Создание неинтерактивных сайтов

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

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


Как избегать: Нужно проверить, действительно ли нужно напрягать сервер при каждом взаимодействии. Например, можно использовать скрипт на стороне клиента. Также можно воспользоваться AJAX или пойти еще дальше и использовать одностраничные сайты «SPA». Существуют JavaScript библиотеки/фреймворки, облегчающие работу с интерактивными элементами, как JQuery, KnockoutJS, и AngularJS.

10. Работать слишком много

Ошибка: Разработчик тратит слишком много времени на создание контента. Много времени уходит на повторяющиеся задачи или на набор кода.

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

Как избегать: Посмотрите, что вы можете сделать. Решите, может, стоит заменить ПО или сменить подход для каждого этапа разработки. К примеру, какой текстовый редактор вы используете по сравнению с Sublime Text или Visual Studio? В независимости от того, какой редактор вы используете, вы точно хорошо его изучили? Может, стоит потратить немного времени на штудирование документации, и вы найдете способ сэкономить пару часов. Например, как расширение к Visual Studio может увеличить производительность веб-разработчиков в этой статье.

Посмотрите в интернете, может быть есть другие инструменты, которые могут вам помочь! Например, поищите на сайте dev.modern.ie (по всем платформам и устройствам).

Автоматизация процессов также поможет снизить время на разработку и уменьшить количество ошибок. Примером может послужить Grunt, таск раннер, который может автоматизировать такие вещи, как минификация файлов (см ошибку №4). Другой пример — Bower, поможет управлять библиотеками/фреймворками (см ошибку №9).

А как насчет самого сервера? С помощью таких сервисов как Microsoft Azure Web Apps можно быстро создавать виртуальные сайты любым способом, что облегчит ваш бизнес!

Обобщение

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

Автор: Michael Palermo

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Как стать веб-разработчиком за 5 месяцев: пошаговое руководство

Содержание

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

Каждую секунду на свет появляется от 3 до 5 сайтов, а каждую минуту – 80 новых интернет-пользователей. Всё это технологическое «цунами» управляется разумом и руками веб-разработчиков. Зарплата вполне соответствует важности работы. Даже начинающие программисты на отечественном рынке могут рассчитывать получать от 50000 рублей в месяц.

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

Где можно научиться веб-разработке

Перед теми, кто решил освоить специальность веб-программиста самостоятельно, встаёт непростой выбор – с чего же правильно начать. Конечно, всегда существует возможность получить полноценное IT-образование в одном из ведущих технических ВУЗов, ранга МГУ им. М. Ломоносова, МГТУ им. Н. Баумана, СПбГУ, МФТИ и ИТМО. Но подобный курс обойдётся в круглую сумму от 60 до 350 тысяч рублей в год. Существует и более быстрый и дешёвый вариант стать веб-разработчиком «с нуля» – полугодовые онлайн-курсы, вроде российского Yandex.Практикума или зарубежного агрегатора «Курсера».

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

Прочему надо начать с фронтенда

Сразу оговоримся, в этой статье мы расскажем лишь об обучении одному из двух основных видов профессии веб-программиста – о фронтенд-разработке (от англ. frontend, т. е. «внешний интерфейс»). Эти специалисты занимаются созданием и настройкой программного обеспечения для интернет-ресурсов в части, непосредственно взаимодействующей с пользователями. Фронтенд-разработчик создаёт «лицо» сайта. Он отвечает за всё, что мы видим и чем пользуемся – от цвета и расположения кнопок, до работы скриптов и их взаимодействия с браузерами.

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

Какими навыками полезно обладать фронтенд-разработчику

  • Активно интересоватьсяIT. А лучше, хотя бы на любительском уровне разбираться в современных интернет-технологиях.
  • Знать английский язык. Вся актуальная учебная литература и технические документации к IT-инструментарию изначально написана на нём. Английский — международный язык общения команд разработчиков из разных стран. Верный гугл-переводчик тут не спасёт.
  • Иметь навыки командной работы. Во-первых — это дисциплинирует. Во-вторых, в системе работы с версиями без этого умения никуда.
  • Обладать стрессоустойчивостью. Навык пригодиться, чтобы работать с многочисленными правками клиентов и оставаться хладнокровным при нахождении очередных багов.
  • Быть коммуникабельным. Успех в создании программного продукта часто зависит от умения нескольких работающих над ним специалистов находить общий язык.
  • Мыслить нестандартно. Пунктуальность, коммуникативность и умение анализировать информацию обязательны для хорошего программиста. Но, чтобы стать профессиональным веб-разработчиком, создающим прорывные веб-продукты, необходимо уметь выходить за рамки обыденного.

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

Месяц 1 — Изучаем HTML и CSS

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

Невозможно понять веб-разработку в отрыве от практики. Для того, чтобы получить минимально необходимый набор знаний по HTML и CSS, лучше всего воспользоваться одним из образовательных MOOC-сервисов, вроде HTML Academy, Нетология, Coursera, Code Academy или Codebra. Здесь можно одновременно получать теоретические знания и практически закреплять их на тестовых упражнениях. Первые занятия подобных курсов, содержащие необходимый для новичка минимум, обычно даются бесплатно. За более углублённые знания придётся заплатить.

Краткий веб-курс по созданию сайта от Code Academy научит азам HTML и CSS

Удобные по формату видеоуроки по основам HTML и CSS выложены в свободном доступе на сайте одного из крупнейших образовательных онлайн-ресурсов Khan Academy. Много полезной информации по спецификациям содержит англоязычный сайт Консорциума Всемирной паутины (W3C), отвечающего за разработку главных веб-стандартов.

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

Месяц 2 — Изучаем сеточную систему Bootstrap

На данный момент Bootstrap – один наиболее популярных и удобных CSS-фреймворков. Этот инструмент позволяет создавать визуальный вид веб-страниц при помощи таблицы стилей (CSS). В недавнем прошлом эту нишу занимали десктопные визуальные HTML-редакторы от Microsoft (Sharepoint Designer) и Adobe (Dreamweawer).

Изначально Bootstrap (под именем Twitter Blueprint) создавался компанией Twitter для внутренних нужд. Позже он был выложен в общий доступ и дополнен всеми компонентами, необходимыми для работы полноценного WEB-фреймворка. Сегодня в Bootstrap содержатся не только готовые стили CSS, но и скрипты HTML и JavaScript, а также собственный иконочный шрифт. Удобно и то, что фреймворк можно скачивать не полностью, а только необходимые элементы.

Работа с кодом в сеточной системе Bootstrap

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

Итогом двух первых стадий обучения фронтенд-разработке должно стать создание простейшего статического сайта без CMS. Он должен быть сверстан при помощи Bootstrap.

Месяц 3 — Изучаем JavaScript

Пришло время заняться изучением динамических скриптов, работающих на стороне клиента. Без подобного «живого» украшения не обходится ни один современный сайт. Главным помощником новичка в этом деле станет кроссплатформенный язык JavaScript (JS).

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

Изучение JavaScript начинается с основополагающих понятий — синтаксиса, переменных и архитектуры языка. После овладения основами, ученик переходит на расширенные возможности JS в рамках взаимодействия с браузером через интерфейсы клиентских Web API.

Нелишним будет затронуть тему JavaScript-фреймворков — библиотек, размещённых на открытых источниках, например, на GitHub), которые помогают упрощать решения сложных программных задач. Наиболее популярные из них — связка React + Redux/ Flux, Ember и Angular. Можно выбрать один наиболее удобный JS-фреймворк, который поможет понять основные механизмы веб-разработки в части динамических элементов сайта.

Для быстрого изучения JS отлично подходят бесплатные онлайн-курсы компаний Udacity, SnoopCode и Code Academy, а также веб-учебник от сообщества разработчиков Mozilla и его отечественный «собрат» js.ru. Для более углублённого погружения в тему можно воспользоваться книгами электронного формата, многие из которых можно без труда найти в свободном доступе. Единственный минус – большая часть подобной литературы доступна только на английским языке.

Популярная учебная литература по JavaScript

  • Серия книг «Вы не знаете JavaScript» (You Don’t Know JS);
  • Серия учебников MDN’s JavaScript Guide;
  • Эрик Эллиот «Программируем JavaScript-приложения» (Programming JavaScript Applications);

  • Марейн Хавербек «Выразительный Javascript» (Eloquent JavaScript);
  • Илья Кантор «Современный учебник JavaScript» (Modern JavaScript Tutorial);
  • Дэвид Макфарланд «JavaScript и jQuery. Исчерпывающее руководство» (Javascript & Jquery: The Missing Manual);
  • Хенрик Йоретег «Человеческий JavaScript» (Human JavaScript);
  • Аксель Раушмайер «Говорить на JavaScript» (Speaking JavaScript);
  • Эдди Османи «Изучаем шаблоны проектирования в JavaScript» (Learning JavaScript Design Pattern).

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

Месяц 4 — Дополняем сайт на CMS своими программными улучшениями

Научившись создавать статическое и динамическое наполнение веб-страниц, можно сделать новый шаг по пути веб-разработчика и научиться улучшать сайт на основе готового движка CMS. Система управления контентом сайта (Content Management System) — наиболее популярное решение для быстрого создания и дальнейшего администрирования современных сайтов. Работа с CMS даёт новичку в IT прямой путь к получению первого коммерческого заказа.

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

Русскую версию CMS WordPress можно в 1 клик скачать с официального сайта

Для свободного скачивания доступны десятки вариантов подобных CMS. Наиболее известные — Drupal, Joomla, Opencart, Magento. Но лидером по популярности среди них является WordPress (WP). Начать своё практическое знакомство с CMS мы рекомендуем именно с этого движка. На этой системе управления контентом сегодня находятся до 20 миллионов сайтов, среди которых порталы таких гигантов медиа-индустрии, как Reuters, The Wall Street Journal, Forbes, BBC America и Variety.

При помощи этой CMS можно опубликовать свой сайт буквально за 10 минут. Разумеется, при наличие хостинга и домена. Можно скачать и установить дистрибутив самому, но некоторые хостинг-провайдеры уже предлагают WP среди CMS для предустановки.

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

С помощью чего изучать WordPress «с нуля»

  • Курсы WPBeginner’s WordPress* и видеоканал WPBeginner.
  • Курс «Как создать, развивать и продвигать сайт»* от платформы Udemy.
  • Курс WordPress Quick Start* от платформы WP Apprentice.
  • Курс Customizing WordPress от платформы Level Up Tutorials.
  • Серия видеоуроков Let’s Build WordPress.
    * – Бесплатно после регистрации.

Месяц 5 — Создаем полноценный сайт при помощи HTML, CSS, Bootstrap и JavaScript

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

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

Обеспечить созданный сайт надёжным и доступным размещением в Сети поможет веб-хостинг с единоразовой оплатой от Eternalhost.

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

Сколько потребуется времени

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

Создание портфолио

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

GitHub – крупнейшая в мире платформа для веб-разработки

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

Не переставайте учиться

Нужно помнить, что профессия веб-разработчика основывается на постоянном совершенствовании знаний. Для того чтобы развиваться профессионально вовсе не обязательно записываться на дорогостоящие курсы или выписывать не менее дорогую специализированную литературу. Многие книги по программированию популярных издателей, типа Apress, O’Reilly и AW можно найти в официальном свободном доступе.

Не менее важным источником знаний о веб-разработке могут послужить крупные площадки типа Free Code Camp и StackOverflow, объединяющие IT-специалистов со всего мира. Множество руководств по конкретным вопросам разработки доступно в формате видео-инструкций на тематических каналах YouTube. Ну и конечно, не стоит забывать об официальной документации к программным продуктам. Она остаётся самым проверенным источников информации для веб-разработчиков.

Заключение

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

  1. HTML и CSS;
  2. JavaScript;
  3. Веб-фреймворк;
  4. Работа с шаблонами CMS;
  5. Вёрстка сайтов.

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

12 частых ошибок начинающих веб-разработчиков

Группа: Главные администраторы
Сообщений: 14349
Регистрация: 12.10.2007
Из: Twilight Zone
Пользователь №: 1

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

Использование старого HTML

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

для создания макета страницы; применяют или

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

Последствия: Использование HTML десятилетней «свежести» может привести к излишнему усложнению разметки страницы и, как следствие, к непредсказуемости её отображения в разных браузерах. И далеко не только в Internet Explorer.

Как избежать: Для начала перестаньте использовать

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

«У меня в браузере всё работает»

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

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

Как избежать: Конечно, тестировать свой сайт во всех существующих браузерах и их версиях было бы пыткой. Но нужно хотя бы периодически проверять, как ваш сайт выглядит в некоторых наиболее популярных браузерах. Сегодня для этого есть бесплатные инструменты: виртуальные машины, сканеры сайтов. Например, с помощью http://browsershots.org/ или https://www.browserstack.com/ можно сделать снэпшоты того, как будет рендериться конкретная страница на всевозможных платформах. Работая с CSS, убедитесь, что «сбросили» все значения по умолчанию.

Кстати, если вы используете какие-то специфические CSS-решения, заточенные под конкретные браузеры, то обратите внимание на характерные для разных вендоров префиксы вроде -webkit-, -moz- или -ms-. Чтобы быть в курсе текущих тенденций, можете изучить эти ссылки:

Там описывается, почему стоит отойти от использования подобных префиксов. Практические рекомендации, как работать без префиксов, можно найти здесь: http://davidwalsh.name/goodbye-vendor-prefixes.

Плохие формы ввода

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


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

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

Слишком большие ответы на сетевые запросы

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

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

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

  1. Спросите себя, действительно ли необходима вся используемая вами графика? Откажитесь от ненужных графических украшательств. Можно воспользоваться сетевыми инструментами, чтобы определить, какие изображения нуждаются в дополнительном сжатии.
  2. Уменьшите размер изображений. Например, с помощью Shrink O’Matic или RIOT.
  3. Используйте предзагрузку. Это не ускорит первичную загрузку, но зато даст преимущество при просмотре других страниц сайта. Подробности можно почерпнуть из статьи: https://perishablepress.com/3-ways-preload-. avascript-ajax/

Миницифируйте залинкованные CSS- и JS-файлы. Для этого есть множество инструментов, например, Minify CSS и Minify JS.

И наконец, старайтесь использовать наиболее современную версию HTML и внимательно используйте тэги и

Proofsite: ваш cайт должен продавать!

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

11 частых ошибок начинающего web-дизайнера

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

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

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

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

1. Ни малейшего представления об отрисовке макета в браузере

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

Верстальщик, получив макет, должен четко понимать — что происходит с макетом при измении размера. Как ведет себя сайт при изменении размера экрана? Растягивается ли фон? Какой из элементов шапки и подвала замещает собой пустое пространство? Каков будет размер у элементов при изменениях размера экрана? Ширина варьируется лишь в определенных пределах или дизайн полностью «резиновый»? Пока на эти вопросы не будет ответа — ни один нормальный верстальщик за макет не возьмется.

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

2. Фиксированная ширина и высота

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

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

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

3. Игнорирование пользовательских предпочтений

Если дизайнер безмерно горд своим 30″ монитором с разрешением 1920х1080, не стоит считать, что каждый пользователь обладает подобным же оборудованием. Причем многие новички, получив по поводу своего макета комментарий: «привести пропорции к среднестатистическим 1024х768» не находили ничего более умного, чем просто уменьшить макет с помощью «Image size». О том, что происходило с мелкими элементами, думаю, рассказывать не имеет смысла.

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

4. Субпиксельный макет

Большинство дизайнеров, пришедших (или точнее «вступивших» ) в web из полиграфии, очень удивляются, когда ровно через 30 секунд после отправки макета, получают комментарий — «переделать под 72 точки». А что тут трудного — когда тебе по почте приходит файл с макетом стартовой страницы размером в 30-50 мегабайт, догадаться о том сколько в нем DPI, не представляется чем-то из ряда вон выходящим.

5. Использование нестандартных шрифтов

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

С объяснений о несоответствии размера шрифта, межстрочных интервалов, кернинга и прочих атрибутов при равных значениях в Photoshop и в браузере (-ах), я начинаю обсуждение практически каждого макета, нарисованного новичком. А ответы типа «ну у меня же этот шрифт есть, он бесплатный, пусть и пользователь поставит!» уже практически перестали веселить.

6. Отсутствие знаний о принципах верстки

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

Типичный пример — заголовки, использующие фантастические шрифты и эффекты, которые можно реализовать только с помощью графики. Все замечательно, пока сайт состоит из 5-10 страниц. А что, если страниц будет порядка двух-трёх тысяч? Дизайнер очень быстро осознаёт свою ошибку, когда вынужден отрисовывать 50 уникальных заголовков ежедневно.

Однажды мне довелось присутствовать при «mortal combat» между дизайнером и разработчиком, в ходе которого первый, прочитав где-то о создании изображений средствами PHP и библиотеки GD, доказывал второму, что исключительно ограниченность и зашоренность его боевых товарищей не позволяют реализовать макет именно так, как запланировано его творцом. Чуть до рукоприкладства не дошло, но разработчик был крупнее, массивнее и явно злее — и, видимо, именно осознание этого факта удержало дизайнера от необдуманных поступков.

7. Последовательность в действиях

Еще одной замечательной особенностью новичков является любовь к так называемой «подгонке по месту». Если в макете стартовой страницы используются иконки размером 100х50 пикселей, не стоит в макете внутренних страниц менять их на 95х45, лишь для того, чтобы они удачно подходили под внутреннее наполнение.

8. «Ссылочная забывчивость»

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

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

Еще одним практически постоянным моим комментарием стал: «а как выглядят ссылки?». Большинство начинающих web-дизайнеров в принципе не задумывается над тем, что нужно каким-либо образом выделять ссылки на страницах, а в генераторах Lorem Ipsum подобный функционал не предусмотрен.

9. Непонятные эффекты или анимация

Одним из наихудших моментов макетов в Photoshop является тот факт, что они не содержат в себе CSS, Javascript, Ajax и прочий инструментарий, который призван реализовывать различного рода эффекты. Поэтому, необходимо всегда отрисовывать подобного рода элементы в различных состояниях — открытые/закрытые меню, раздвижные и разворачивающиеся элементы в различных положениях и т.д.

10. Нереализуемые формы

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

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

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

11. Рациональное использование технологий

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

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

Есть вещи, которые имеет смысл делать на Flash, поскольку с помощью HTML подобный функционал невозможно реализовать (хотя, HTML5, возможно, изменит положение вещей). А есть решения, которые можно сделать только на HTML и нельзя сделать на Flash. Но не стоит пытаться «впихнуть невпихуемое», в особенности не обсудив предварительно задачу с клиентом и разработчиком.

12. Потеря интереса к проекту

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

И вот именно здесь можно очень четко определить, сможет и захочет ли дизайнер работать «на два фронта» — полиграфический и web, или же просто решил срубить денег по-легкому и вернуться в привычную область А4. Профессионалов первой категории я обязательно «откладываю» для потенциальных предложений дальнейшей работы, а вторых — сразу же заношу в персональный blacklist.

artzonetlt советует: «начинающие дизайнеры используют фотошопное сглаживание шрифтов. заказчик потом негодует: «почему на макете так красиво, а на сайте шрифт другой?»

zmei советует: «хорошо если в макете учтено разное состояние ссылок. Кроме обычного как минимум — hover и visited.»


tumbr советует: «1. Я бы советовал всем дизайнерам и верстальщикам перебираться с Photoshop на Fireworks.

2. Перед созданием макета набросайте его прототип на листочке и продумайте функционал — сэкономите кучу времени.

3. При отрисовке макета всегда используйте сетку в 10 пикселей (или любой другой размер) + поставьте «прилипание» к этой сетке — сайт станет на порядок аккуратнее и гармоничнее.»

А с какими проблемами при работе с начинающими web-дизайнерами сталкивались вы?

Вебмастер самоучка Never Lex уже написал отзыв о первом месяце тренинга «Web-Гуру», который сейчас активно проходит. На тренинге он изучает веб программирование под присмотром профессиональных программистов.

Как развиваться начинающему web-разработчику?

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

Живой пример: Есть толковый фронтендер(или бекендер по JS) пишет морду сайта на JS Фреймворке. Есть гуру бэкенда пишет API сайта. В случае с фулстаком(образно) он пишет обе задачи сам, но заведомо понятно, что он пишет это дольше и не факт что по последнему слову будет сделано.

Что нужно для развития дальше:
— Читайте блоги зарубежных программистов, они делают отличные архитектуры как в самом коде, так и решения в DB.
— Фреймворки PHP и JS — чем больше их будет тем лучше. Все они ускоряют разработку. Все чаты, соц авторизации, регистрации,и прочие первоочередные задачи давно уже написаны. Вы можете концентрироваться на более важных задачах.
— ООП тут очень спорный вопрос, на определенных этапах разработки оно решает, но когда этот уровень появляется, чаще всего прибегают к другому языку программирования и переписывают проект в угоду скорости (С++, Java, Python). Понимать нужно, поскольку фреймворки построены на этих парадигмах, но самостоятельно придумывать вам гибкие решения вряд ли придется(по крайней мере до Senior-а точно).
— Не изобретайте велосипеды. Разбирайтесь в чужом коде(Этот навык очень ценен после «решить/найти решение любую задачу»). Любой магазин чаще всего будет написан в лучшем случае на фреймворке, в худшем на OpenCart, Woedpress — что просто идиотизм, это блоговая система БЛОГОВАЯ. из за тренда выкручивают яйца.
— Учить английский и работать не на СНГ, Укр или места постсоветского пространства. Искать фирмы зарубежных филиалов и работать там. Поскольку так или иначе там уже работают профессионалы и знакомы с западным рынком, европейским. Там пишутся интересные проекты и появляются интересные решения.

GrIZZIy: Я сам окончил институт по специальности автоматизации, а это хоть и программирование, но не проф курс ИТ специалиста и все же, даже заграницей инженерно-айтишная специальность открывает возможности, поскольку вы можете работать как инженер и как программист(это проверено мной). По поводу курсов. Конечно это индивидуально, но курсы вам не нужны(если вы уже разобрались как работает веб и пишете модули под них, что то сверх нового они не откроют), большинство из них пересказывают документацию. А нужен человек наставник, который объяснить тонкости — коллега на уровень выше, это то что нужно будет. Мне самому не жалко было бы денег за хорошие курсы, но таких увы нету. А отдавать 300-800$ за то что я и сам могу найти, ну я бы не стал =) Большая часть либо объясняет основы, либо скидывает уж совсем устаревший материал.

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

> А нужен человек наставник, который объяснить тонкости — коллега на уровень выше, это то что нужно будет.

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

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

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

Послушай человека, у которого 4 года опыта управления веб-студией.

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

Помимо программистских советов есть еще чисто практичные и зачастую они решают, например, ты любишь делать законченный продукт или ковыряться в старом коде? Все эти басни и бредни про фреймворки, пойми, эти люди, которые до тебя писали код на твоей будущей работе, мозгами намного хуже тех же программистов, которые создали тот же WordPress, зато они позволяют себе хаять его. Так вот ты придешь и будешь за таким человеком искать ЕГО баги 4-х летней давности. А представь, что баги эти от кривой архитектуры.

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

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

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

Потом, не забывай еще главное, мы живем в стране, где даже автомобиль нормальный сделать не могут, качество разработки здесь абсолютно такое же, то есть никакое, люди они одинаковые, что в АВТОВАЗЕ, что в Яндексе, поэтому на весь этот флёр вокруг каких-то там разработчиков клади болт.

Я тебе расскажу, как это работает с точки зрения бизнеса в России, а не со стороны парняги в свитере и очёчках:
1) Есть богатый дядя, который наворовал в своё время денег, у него есть сын, сын начитался хабра и бизнес молодости, взял у бати своего миллионов 50-100 и пошел пилить абсолютно никому не нужный стартап, нанял 30 человек, поставил компы, вот сюда нужно знать не столько сами технологии, сколько МОДНЫЕ технологии, смотришь модные тренды и их учишь или просишься джуниором, вауаля, и вот ты в струе.
Делали делали, сыночке надоело пилить стартап, у него пати на мальдивах, свадьба, дети и тд — все разбежались.
2) Есть государство или крупная контора, которая так или иначе, принадлежит кому-то из власть имущих, им нужно какой-то проект, они этот проект отдают фирме (то есть сыну, брату, свату), у которой сайт визитка. Эта фирма отдаёт это другой фирме, та отдает это еще двум-пяти фирмам. Где-то там в конце сидишь ты за компом и делаешь то, что тебе написали в ТЗ. Чтобы тебе что-то изменить в этом ТЗ, это должно пройти через 8 ртов и кучу согласований, и ты вообще лучше сиди и поменьше высовывайся. В таких конторах будешь пилить и пилить какую-нибудь хрень, в которой уже запутались все вокруг, но ты как-то делай, ведь скоро сдача. А потом они за два дня до сдачи, всей аравой посредников и программистов собираются в одном месте и наконец-то звонят главному заказчику и спрашивают, а как надо делать, то есть то, что ты спрашивал месяц назад. Иногда этот брейншторм помогает, иногда нет. Как туда устроиться? Опять таки, иди джуном.
Примечательно, что качество продукта таких контор обычно хуже самой захудалой Джумлы, зато там все хаят CMS, но чтобы им в продукте прикрутить голосовалку, им нужно напрячь 8 ртов, распилить бюджет в тысяч 180-400, через кучу согласований сделать всё через жопу, но через ООП и какую-нибудь Symfony. Круто.
3) Компании типа Яндекса, каких-нибудь банков. В таких компаниях обычно умные люди только на самом верху — это основатели компании, усмотреть за всеми аспектами фирмы им технически невозможно, поэтому часть продукта у них хорошая, основная, например, как поиск у гугла, а 90% других сервисов полное говно (посмотрите, что сделали эти «умы» из яндекса, вроде, с кинопоиском). Зато ЧСВ у каждого там Васи на уровне основателя компании. Вот эти Васи и делают там 90% продуктов, которые, как-бы второстепенны. Чтобы туда попасть надо не технологии учить, а изучать тренды какого-нибудь хабра, что там сейчас ценятся, какие авторы зарубежные: «Мега алгоритмическое программирование Алана Коуэла» и тд, таких книжек прочитать штук 10, выучить всё азы чистого программирования без фреймворков, одеться как мудак, чтобы выглядеть еще мудачее того гика, который тебя будет собеседовать, а то они ранимые и завистливые и опять таки, устроиться джуном.
4) Компании локальные по созданию сайтов и прочего программирования. В таких фирмах свободы намного больше, чем в первых трёх, но нет столько денег, зато сразу видно продукт, который делаешь. Тут тебе пригодится и вордпресс и битрикс. Туда тоже лучше идти джуном. В таких компаниях шанс того, что ты потом запустишь боком собственный проект намного выше, т.к. у тебя будет опыт создания веб-сервисов, сайтов за Реальные сроки и ты будешь видеть ход их развития. Но с точки зрения денег, редкий случай, когда они тебе могут предложить даже столько, сколько в стартапе.
Поэтому, если для души программировать, получать удовольствие, то варианты 1 и 4. Если хочется работы, от которой многие воют, то 2, 3.

5) Есть еще компании, которые работают на запад, денег сейчас там в теории, может быть столько же, сколько и в стартапе у богатого буратино, там тебе сильно повезет, если будете делать пункт 4, если 2-3, то можешь брать веревку и мыло.
Стартапы таким компаниям дают мало когда, ведь хипстеру миллионеру нужна атмосфера, нужны работнички перед глазами, а не на аутсорце. А вот латать баги в 6 летнем коде по цене продавщицы в ларьке Нью-Йорка — это запросто, это аутсорц. Текучка в таких местах дикая, поэтому они, отчаявшись, ищут негров за рубежом, никто вменяемый этим заниматься не хочет у них на родине. Поэтому если на аутсорце будет создание сайтов или каких-нибудь новых систем, это большая удача.
Туда тоже нужно идти джуниором. Еще они почти всегда требуют английский, а если у тебя есть английский, зачем тебе они?

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

Есть еще лайфхак, берешь абонемент в дорогой фитнес центр и знакомишься там с парнями, когда-нибудь тебе повезет и выйдешь на кого-нибудь богатого из чиновничков или олигаршьих родственников. Всем говори, что ты программист и у тебя есть «команда». Этого хватит, у богатых всегда «куча идей» куда бы просрать бабки (стартап) или наоборот где-то «намутить денег» (пункт 2). Они тебе сами предложат «тему», если ты обмолвишься, что ты программист. Всё, что у тебя будет к тому моменту, это сайт визитка, понимаешь к чему я клоню? Пункт 2, но ты будешь сверху, вторым ртом. Если повезет, будет и пункт 1, но ты будешь ко-фаундерем, ты посмотришь модные технологии и будешь под смузи составлять вакансии с reactJS, Angular, high load и еще кучу умных слов. А на биржах заказы пусть обычные люди ищут, которые за деревьями леса не видят. Или идут через жопу в пункт 2, когда надо заходить с другой стороны. Think different.
Тот, кто на основании выше написанного лайфхака понял, что он ходил по кругу, а ключик в другом месте открывается, может мне скинуть денег за совет на кошелек R738086405346
Точнее, это даже не совет, это инструкция, которая действительно рабочая.

Как самостоятельно изучить веб-программирование

Автор: Сергей Никонов

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

Почему так важен план обучения

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

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

И вот новичок делает запрос в гугл “Курсы программирования” и перед ним открывается несколько десятков тысяч результатов с курсами.

Курсов программирования по созданию сайтов существует огромное количество: Курсы PHP, курсы HTML и CSS, курсы по Javascript, курсы по Yii2, курсы по MySQL и многие другие.

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

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

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

Кто-то не зная основ объектно-ориентированного программирования, сразу скачивает курсы по Паттернам проектирования или не зная основы Javascript, пытается изучать курсы по Angular JS.

А иногда, не понимая что, Javascript и Java — это совсем разные языки и имеют разные предназначения, начинает смотреть курсы онлайн по Java. И на этом этапе у них совсем руки опускаются и они оставляют идею стать программистом или откладывают ее в “долгий” ящик, думая что научиться создавать веб-сайты для них слишком сложно.

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

Шесть шагов как стать веб-программистом

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

Шаг первый. Научитесь верстать.

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

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

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

Обязательно нужно тренироваться. С помощью HTML и CSS попробуйте создать 10 — 20 страниц вашего будущего веб-сайта.

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

Вы можете скачать курс по технологиям HTML и CSS в интернете или вы можете посмотреть наш курс бесплатно онлайн в личном кабинете

Шаг второй. Фреймворк Bootstrap.

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

Изучайте Bootstrap только после того, как в полной мере освоили предыдущий шаг HTML и CSS.

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

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

Официальную документацию для самостоятельного изучения Bootstrap вы можете найти по адресу http://getbootstrap.com/ или можете смотреть наш курс по данному фреймворку в FructCode.

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

Шаг третий. Программирование.

После того, как вы поймете основы верстки и создадите несколько своих сайтов-прототипов, переходите к программированию. Можете начать с языка PHP. Он невероятно простой и понятный.


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

Изучение PHP начните с процедурного процедурного подхода в программировании. Изучите основные понятия любого высокоуровневого языка программирования: Переменные, Типы переменных, Массивы, Циклы, Функции и другое. Именно в такой последовательности.

Напишите с помощью процедурного подхода несколько простых программ, например, калькулятор или светофор.

Когда разберетесь более-менее с процедурным программированием на PHP, изучайте Объектно-ориентированное программирование (ООП).

ООП очень популярная парадигма программирования. Ее используют как минимум 90% всех софтверных компаний по всему миру, начиная от разработки простых сайтов, заканчивая разработкой огромных социальных сетей, например Facebook или VK и даже игр.

Системы написанные с помощью объектно-ориентированного программирования можно масштабировать и расширять до гигантских систем.

Когда изучите основы ООП на языке PHP, перепишите созданные ваши скрипты на процедурном подходе к программированию, в объектно-ориентированном стиле.

Шаг четвертый. База данных MySQL и CRUD.

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

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

С помощью языка запросов SQL, вы сможете “создавать”, “получать”, “обновлять”, “удалять” информацию из базы данных. Так вы перейдете к CRUD. Эти четыре буквы с английского языка расшифровываются как CREATE(создавать) — READ(читать) — UPDATE(обновлять) — DELETE(удалять).

Основы по языку запросов и администрированию MYSQL вы можете прочитать здесь

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

Когда вы напишите несколько CRUD приложений, можно двигаться дальше к пятому и самому интересному шагу.

Полный и интерактивный курс по PHP и MySQL вы можете пройти здесь

Шаг пятый. MVC фреймворк.

Изучите простой php фреймворк, например Codeigniter. На этом шаге вам нужно будет перенести верстку вашего сайта, созданную на предыдущих этапах, в фреймворк. Основная задача — это понять паттерн MVC. Расшифровывается MVC как MODEL(модель) — VIEW(вид) — CONTROLLER(контроллер).

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

Создайте на простом PHP фреймворке и на паттерне MVC, сначала CRUD приложение, а затем и ваш первый веб-сайт.

Курс по фреймворку CodeIgniter доступен на сайте FructCode

После этого, создайте еще 3 — 5 веб-сайтов для себя, друзей, коллег, родственников. Это прибавит вам опыта и эти сайты пригодятся вам в качестве портфолио, когда вы решите, что готовы попробовать создавать сайты за деньги.

Шаг шестой. Изучение других технологий.

После того, как вы получили начальный опыт в программировании и возможно стали уже получать первые деньги за создание веб-сайтов, изучайте Composer, GIT, основы Linux, Javascript.

Затем переходите к более сложные фреймворки, такие как Yii2 или Laravel.

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

И не пытайтесь пройти все шаги за месяц. Это невозможно. Информация должна усваиваться естественным образом.

Рассчитывайте прохождение данных шагов минимум на 6 — 12 месяцев.

По всем технологиям вы можете гуглить, например: Что такое MVC php.

Заключение

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

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

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

И здесь вам поможет наставник.

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

Вы разберетесь в терминологиях ООП, такие как объекты, классы, инкапсуляция, полиморфизм, создадите профессиональный веб-сайт КИНОМОНСТЕР и в момент, когда вы захотите все бросить, получите “волшебный мотивационный пинок” 🙂

И если вы будете выполнять все домашние задания и проходить тестирования, результат вас точно не разочарует!

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

Как стать веб-разработчиком – руководство для начинающих

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

Кто такой веб-разработчик?

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

Обязанности и требования к веб-разработчикам:

  • Создание веб-страниц с помощью различных языков разметки;
  • Создание качественных макетов и прототипов;
  • Создание сайтов на WordPress с нуля;
  • Понимание HTML и CMS ;
  • Понимание UI и UX ;
  • Разработка функционала и дизайна сайтов и веб-приложений;
  • Обслуживание и улучшение сайта.

Если говорить о специализации web программистов, то выделяют три основных направления:

  • Разработка front-end . « Front-end » означает элементы на сайте, которые вы видите и с которым взаимодействуете, например, меню, выпадающие списки и т. д.;
  • Разработка back-end . « Back-end » похож на подводную часть айсберга. Без него сайт не может функционировать. Back-end связан с такими вещами, как серверы, приложения и базы данных;
  • Разработка полного стека . Это комбинация разработки back-end и fron-tend .

Зачем становиться веб-разработчиком?

Веб-разработка — это отрасль, которая точно не умрет в ближайшее время. Бюро статистики трудовых ресурсов США предсказало 27% рост количества рабочих мест в сфере веб-разработки к 2024 году.

Вот пять основных причин стать web программистом и обучиться с нуля:

  1. Вы можете работать удаленно;
  2. Вы можете работать самостоятельно. Заниматься фрилансом или начинать свой бизнес;
  3. Вы выходите на прибыльный технологичный рынок. Веб-разработка — это билет в мир высоких технологий. У большинства технологичных стартапов есть потребность в веб-разработчиках, поэтому это может быть ваш путь к успеху.

Как стать веб-разработчиком

  1. Изучите основы HTML, CSS и Javascript

Это гайки и болты любого сайта, с ними вы будете работать ежедневно.

  • HTML задает структуру;
  • CSS делает ее визуально привлекательной;
  • Javascript заставляет ее функционировать.


Перед тем, как стать web программистом, рассмотрим каждый из этих аспектов.

HTML

HTML означает Hypertext MarkUp Language . Это один из основных компонентов любого сайта и один из так называемых front-end языков. Он формирует базовую структуру сайта, делается это в основном с помощью тегов.

Ниже приведены некоторые базовые HTML-теги , с которыми вам следует ознакомиться:

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

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

CSS

CSS — это каскадные таблицы стилей и то, что должен знать web программист обязательно.

Они задают стиль HTML-структуры . В принципе без CSS , HTML будет скучным, а в результате и веб-страница будет скучной.

Вот как они сочетаются: в HTML-коде вы ссылаетесь на таблицу стилей CSS .

Ниже приводится пример того, как выглядит CSS в действии:

Пример CSS

Javascript

Javascript — это язык программирования, который позволяет реализовать интерактивные элементы на веб-страницах. Например, интерактивные карты, 2D / 3D-графика и многое другое, что знает даже web программист стажер.

  1. Изучите руководства по WordPress

Чтобы стать веб-разработчиком, вам нужно будет ознакомиться с WordPress . 25% всех сайтов в интернете работают на этом движке.

  1. Изучите основы UI и UX

UI ( пользовательский интерфейс ) и UX ( опыт взаимодействия пользователя ) — это основа разработки пользовательского интерфейса.

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

Чтобы узнать больше об основах проектирования сайта, рекомендую изучить Adobe Creative Suite . Photoshop должен быть первым, за что вы возьметесь, так как он подходит для самых серьезных дизайнеров. Если junior web программисту не нравится Adobe , можно также изучить Sketch , который является восходящей звездой.

  1. Изучите SQL и PHP (более продвинутые навыки)

SQL — это система управления базами данных. А PHP — это язык « скриптов », который помещает или извлекает данные из базы.

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

PHP — это то, что делает любой WordPress-сайт динамичным, взаимодействуя с этими элементами, и обновляя базу данных по мере развития сайта.

Узнав больше о том, как работают SQL и PHP , вы сможете досконально освоить разработку сайтов на базе WordPress . Этот вид услуг востребован.

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

SEO — это поисковая оптимизация. Процесс улучшения ранжирования сайтов в поисковых системах, таких как Google . Это один из самых важных навыков в онлайн-бизнесе.

В SEO структура и код сайта также играют определенную роль. Например, тэги тайтлов ( HTML ) чрезвычайно важны. Они сообщают поисковым системам, что действительно важно на сайте.

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

Вот несколько советов по SEO для веб-разработчиков :

  • Оптимизируйте метатеги. В поисковой выдаче метатеги сообщают браузерам, о чем ваш сайт;
  • Убедитесь, что теги заголовков находятся в определенном порядке. H1 должен быть основным заголовком, а затем необходимо опускаться вниз по иерархии заголовков ( то есть H2, H3, H4 и т. д .). Это упрощает поисковым системам сканирование сайта;
  • Убедитесь, что тег тайтла правильно описывает веб-страницу.

Посвятите хотя бы 3-5 часов изучению основ SEO . Это позволит эффективнее разрабатывать сайты и позитивно отразится на зарплате web программиста.

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

Как найти своего первого клиента на веб-разработку (или стать фрилансером)

Теперь, у вас как у веб-разработчика, есть два варианта. Вы можете: 1) попытаться получить постоянную работу в компании или 2) пойти путем фриланса и искать заказы онлайн.

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

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

В этом разделе мы сосредоточимся на том, как web программисту стажеру получить свой первый фриланс-заказ…

  1. Используйте биржи вакансий

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

Качество клиентов там может варьироваться. Некоторые могут быть замечательными. Другие — нет.

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

Сильная зависимость от бирж не оставит вам возможности начать создавать свой собственный бренд. Привлечение «входящего» внимания к вашей работе в конечном итоге даст лучших ( и самых платежеспособных ) клиентов.

Но это неплохой вариант для начала.

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

Также довольно легко начать работу на досках объявлений… Ниже приведен скриншот поиска по UpWork :

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

Вот несколько советов по созданию сайта-портфолио:

  • Используйте отзывы от своих предыдущих и текущих клиентов . Это даст посетителям уверенность в том, что вы отлично работали в прошлом и что другие были рады работать с вами.
  • Подчеркните свои преимущества . В чем вы хороши, что отличает вас от других?
  • Опубликуйте важные данные о себе — имя, короткую версию истории о том, как и почему вы стали веб-разработчиком.
  • Ответьте на вопрос «Что веб-разработка значит для меня?» . Опишите преимущества работы с вами.
  1. Нетворкинг

Старайтесь каждый месяц посещать, по крайней мере, 2-3 мероприятия. Если вы живете недалеко от большого города, это не должно составить труда.

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

Заключение

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

Данная публикация представляет собой перевод статьи « How to Become a Web Developer » , подготовленной дружной командой проекта Интернет-технологии.ру

Парсер Хабра

Вас тоже достает, когда автор переносит топик в черновик?

пятница, 25 сентября 2015 г.

[Перевод] 10 частых ошибок начинающих веб-разработчиков

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

Использование старого HTML

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

для создания макета страницы; применяют или

Последствия: Использование HTML десятилетней «свежести» может привести к излишнему усложнению разметки страницы и, как следствие, к непредсказуемости её отображения в разных браузерах. И далеко не только в Internet Explorer.

Как избежать: Для начала перестаньте использовать

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

«У меня в браузере всё работает»

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

Как избежать: Конечно, тестировать свой сайт во всех существующих браузерах и их версиях было бы пыткой. Но нужно хотя бы периодически проверять, как ваш сайт выглядит в некоторых наиболее популярных браузерах. Сегодня для этого есть бесплатные инструменты: виртуальные машины, сканеры сайтов. Например, с помощью http://ift.tt/erh8O7 или http://ift.tt/1re4nXr можно сделать снэпшоты того, как будет рендериться конкретная страница на всевозможных платформах. Работая с CSS, убедитесь, что «сбросили» все значения по умолчанию.

Кстати, если вы используете какие-то специфические CSS-решения, заточенные под конкретные браузеры, то обратите внимание на характерные для разных вендоров префиксы вроде -webkit- , -moz- или -ms- . Чтобы быть в курсе текущих тенденций, можете изучить эти ссылки:

Там описывается, почему стоит отойти от использования подобных префиксов. Практические рекомендации, как работать без префиксов, можно найти здесь: http://ift.tt/1KgeNgt.

Плохие формы ввода

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

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

Слишком большие ответы на сетевые запросы

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

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

  1. Спросите себя, действительно ли необходима вся используемая вами графика? Откажитесь от ненужных графических украшательств. Можно воспользоваться сетевыми инструментами, чтобы определить, какие изображения нуждаются в дополнительном сжатии.
  2. Уменьшите размер изображений. Например, с помощью Shrink O’Matic или RIOT.
  3. Используйте предзагрузку. Это не ускорит первичную загрузку, но зато даст преимущество при просмотре других страниц сайта. Подробности можно почерпнуть из статьи: http://ift.tt/1SvBQHY

Миницифируйте залинкованные CSS- и JS-файлы. Для этого есть множество инструментов, например, Minify CSS и Minify JS.

И наконец, старайтесь использовать наиболее современную версию HTML и внимательно используйте тэги и

Мастер Йода рекомендует:  10 советов по ускорению Ubuntu Linux
Добавить комментарий