Веб программирование с чего начать

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

И мы видим, как бизнес реагирует на эти изменения:

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

Такое развитие веб-пространства порождает закономерное желание «влиться» в этот процесс и научиться создавать сайты самостоятельно.

Уроки HTML и CSS

Если Вы загорелись желанием сделать свой сайт или хотите стать веб-программистом, но не знаете с чего начать – не беда: существуют специальные курсы «HTML и CSS. Основы создания сайта», которые разработаны специально чтобы помочь Вам в этом. Можно пойти и другим путём: взять толстенную книжку под названием «Уроки HTML для чайников» и начать усиленно штудировать, но в этом случае потребуется значительно больше времени, поскольку искать ответы на возникающие вопросы Вам придётся самостоятельно.

Хотим создать свой сайт, но не знаем зачем нужен HTML?

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

Представьте, как вы едете на автомобиле известной престижной марки по родному городу. Наслаждаетесь плавностью движения, удобством управления, комфортом салона. Останавливаясь на светофоре, вы, как в голливудских фильмах 80-х, спускаете на переносицу тёмные очки и подмигиваете стоящим на перекрёстке девушкам… вот только они не реагируют. Их ваша «крутая» машина совершенно не впечатлила. А всё потому, что у неё нет кузова, есть только мотор, колёса, руль и пара сидений. В такой ситуации среднестатистическая девушка и не поймёт, что вы на дорогом автомобиле, для неё вы просто чудик на развалюхе. Точно так же, если создать гениальный по функциональности сайт, но забыть о его внешнем оформлении, то его ждёт столь же печальная участь. То есть Вы конечно же можете заняться веб-программированием и сделать отличный сайт, но если не озаботитесь созданием для него удобной и понятной «оболочки» на HTML, то станете для жителей Рунета чудиком на развалюхе.

С чего начать создание сайта.

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

  • какова тематика ресурса?
  • кто будет посещать его?

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

Дизайн

Когда вы определитесь с тем, для кого будет сайт, нужно продумать его структуру и зарисовать основные страницы, проще всего это сделать на бумаге. Эскизы основных страниц готовы? Тогда пришло время отдать своё детище веб-дизайнеру, он придаст вашим наброскам «товарный вид». Если дизайнера нет – не беда: можно поискать в интернете подходящие сайты и заимствовать их элементы дизайна. В идеале к концу этого этапа у Вас должны появиться дизайн-макеты в виде графических файлов (как правило Photoshop) с внешним видом для всех основных страниц.

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

Создание HTML страниц (вёрстка)

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

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

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

Web-программирование

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

Веб программирование делится на два вида:серверное (бэкенд) и клиентское (фронтенд).

Серверное web-программирование – это создание логики на стороне сервера: обработка запросов с клиентов, динамическое формирование HTML-страниц, взаимодействие с базой данных и т.д. Существует множество языков программирования для бэкенда: PHP, Python, Perl, Ruby… Самым распространённым из них является PHP, во многом за счёт своей простоты и функциональности, для его изучения, рекомендуем вам пройти курсы «Основы PHP»

Клиентское web-программирование – это создание логики на стороне браузера: отправка Ajax-запросов серверу и динамическое изменение страницы без перезагрузки, сохранение данных пользователя в браузере и их обработка. По умолчанию в браузерах присутствует один язык программирования – JavaScript, поэтому он лидирует по понятным причинам. Если вы всерьёз решили заняться web-программированием на форнтенде, то рекомендуем Вам посетить курс «JavaScript Базовый» для быстрого старта.

Учитесь новому, не останавливайтесь на достигнутом и ваш сайт будет развиваться вместе с Вами!

Раскрутка

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

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

С чего начать в веб-разработке

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

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

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

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

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

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

Второй аспект связан со структурой самого кода. Любое новое бизнес-правило, добавленное в нашу программу, увеличивает его сложность. И любая программа со временем становится только сложнее. Все, что мы можем этому противопоставить, это использовать те инструменты, языки и парадигмы, которые позволят нам максимально замедлить рост сложности. С ростом программы на первое место выходят такие аспекты, как создание мощных и грамотных абстракций, повторное использование кода, композиция. Развитию этих навыков способствует декларативная парадигма, код написанный в этом стиле отвечает на вопрос что и позволяет описывать решение задачи в виде спецификации, выполнение которой и является ответом на поставленный вопрос. Яркий пример декларативного стиля это и регулярные выражения, а так же все функциональные языки и языки логического программирования ().

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

По частям

Командная строка

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

Замечание про windows

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

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

Как временное решение, в можно использовать https://www.cygwin.com/. Это слой совместимости с . Еще одно решение — это полностью перейти на -совместимую операционную систему, такую как или . Либо в качестве промежуточного варианта использовать виртуализацию, например, VirtualBox.

Среда разработки

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

Среди текстовых редакторов в последнее время большую популярность получил бесплатный https://atom.io/.

Особняком стоят два текстовых редактора. Это emacs и vim. Вокруг них сложилась особая культура, и принципы работы с этими редакторами сильно отличаются от привычных подходов. Они появились раньше всех современных и, судя по всему, переживут их 😉

Системы контроля версий

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

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

Язык

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

К счастью, в большинстве языков программирования стандарты кодирования 1) описаны, 2) автоматически поддерживаются редакторами (не всегда), 3) проверяются специальными дополнениями, называемыми .

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

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

Кроме этого, любой язык это не только исходный код и компилятор/интерпретатор, но еще и экосистема. Для разных языков она включает разные компоненты, но некоторые являются обязательной частью любого стека:

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

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

Базы данных

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

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

В целом, изучение SQL можно разделить на две части: создание, наполнение базы и запросы в базу. На Хекслете доступно два курса, покрывающие эти темы — Базы данных: SQL DDL/DML и Базы данных: SQL DQL.

Про веб

DNS

Когда вы делаете запрос к сайту , то, на самом деле, ваш компьютер подключается к удаленному компьютеру и дальше происходит обмен данными между ними. Но как браузер узнает к какому серверу подключиться? Получение адреса по доменному имени работает благодаря (Domain Name System — система доменных имён). Это один из краеугольных камней в работе современного веба. На хабре есть детальная статья объясняющая как работает .

Протоколы (tcp/ip, http, webdav, websockets)

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

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

Хостинг

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

Фронтенд

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

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

Клиентский со временем становится более интегрированным с . Стандартом де-факто стала система сборки . А наиболее перспективным фреймворком — , который перевернул взгяд на разработку клиентских приложений со сложной логикой.

Безопасность

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

А дальше что?

А дальше выбирайте стек который вам по душе и вливайтесь!


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

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

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

Структура и базовый контент.

Основой любого сайта является контент. Именно за ним придет посетитель.

Определитесь и напишите в любом текстовом редакторе список всех страниц на будущем сайте.

Если их получилось много, более 5-10, разбейте их на группы по схожим признакам. Если нужно сделайте разделы и подразделы.

Это важный этап в технологии создания сайта и начинающие его пропускают как ненужный.

Когда вы продумываете структуру и делаете наброски будущего контента, сайт обретает «скелет», который потом обрастет дизайном и интерфейсом.

Дизайн сайта

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

В Yandex или Google можно найди много сайтов с бесплатными исходниками для фотошопа в формате psd. Можно выбрать на любой вкус и подправить под свои нужды перед тем как приступить к верстке и наполнению.

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

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

Выбор платформы или CMS сайта

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

Верстка сайта

Когда и с платформой определитесь смело можно переходить к верстке дизайна для выбранной CMS. Помогут в этом разделы «Создание сайта на Jomla», «Как сделать сайт HTML в блокноте», «Создание сайта бесплатно».

Наполнение контентом

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

Публикация в интернете

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

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

 


Создан: 15.03.2015 10:14 | Отредактирован: 15.03.2015 10:14

Предлагаю список ТИПОВЫХ минимальных знаний web-технологий и смежных с ними, которые должен знать и которыми должен уверенно владеть специалист, претендующий на создание веб-сайта по полному циклу (понимаю, что такое встречается редко, но даже если ты работаешь в команде и специализируешься на чем-то одном, то знать весь спектр и уметь работать в нем — обязан):

— Уверенный пользователь ПК и офисных программ

— Основы TCP/IP сетей

— HTML 4.0

— CSS 2.0

— SQL 92

— JavaScript1.3

— XML 1.0

— Протоколы HTTP/1.0, HTTP/1.1

— Администрирование Apache 1.x, 2.x

— Администрирование MySQL 4.x

— Основы администрирования ОС Windows, UNIX

— PHP 4 (очень желательно ООП, PEAR, в частности как минимум PEAR:DB, Smarty, ext/MySQL, а то очень будет — тяжело и мучительно работать над большими проектами, в идеале вообще PHP5 + Zend Framework)

— Регулярные выражения

— Основы SEO

— Минимальные навыки работы с графическими программами

— Основы веб-дизайна, usability

Вот такой неслабый список минимальных требований получается…

Есть возражения или дополнения?

P.S. А к чему я это затеял? Буду в должности преподавателя веб-курсов долгое время слышал один и тот же вопрос – что надо учить, чтобы получить работу по данному направлению и чтобы добиться успеха в этой области? А сейчас настало время занести это на бумагу и обсудить всенародно.

Да, и главное – всегда считал и тут повторюсь – какие именно программные средства разработчика изучать и использовать (имею ввиду Dreamweaver, FrontPage, Zend Studio) – не имеет значение вообще!!! Это все удобные инструменты-помошники для хорошо работающей головы. Но они ее не заменяют!!! Кто считает, что я тут не прав – представьте себе аналогичный вопрос на курсах по изобразительному искусству: «Какой кисточкой мне рисовать, чтобы получилось так же, как у Дали»?

Опубликовано: 06.04.2006Категория: Web-технологииКомментарии: 14

.

Добавить комментарий

Закрыть меню