Веб-разработка и дизайн 101

web_development_101Хотите знать основы веб-разработки и дизайна? Потрясающие…


Но есть проблема с этим типом мышления, или рядом из них на самом деле …

  • Какова цель наличия веб-сайта? Всем ли он нужен??
  • Если да, то как вы создаете качественный сайт?? Или, другими словами, как вы изучаете основы веб-разработки и дизайна, которые позволили бы вам создать этот качественный сайт самостоятельно?
  • Что еще более важно, вы можете создать качественный веб-сайт с первой попытки? Или вам нужен многолетний опыт позади, прежде чем вы сможете надеяться на какой-либо результат выше ужасного?

Давайте ответим на все это в этом руководство для начинающих по веб-разработке и дизайну.

[Осторожно, спойлеры. Да, вы можете создать качественный сайт с первой попытки.]

Contents

Что описано в этом руководстве?

Хорошо, обо всем по порядку, мы рады, что вы продолжили читать и решили попробовать веб-разработку! Вот как это будет разыгрываться:

Главы представлены в очень простой форме, с основным содержанием слева, а выполнимые элементы – справа. Вот так:

Руководство введение: глава 1

Теперь, как поступить:

  • В то время как на вашем первом чтении: Мы рекомендуем вам прочитать все это сверху вниз. Это даст вам хороший обзор темы на 10 000 футов и поможет понять самые важные ее части. Он также предоставит вам основные инструменты и методы для решения отдельных задач..
  • Пока на 2й читаю и дальшеИспользуйте TOC и переходите к той части, которая вас интересует больше всего. Кроме того, не стесняйтесь использовать кнопки «Поделиться» рядом с каждой главой и отправлять ссылки себе или своим друзьям / подписчикам, которые могут быть заинтересованы.

Готов? Давайте перейдем к главе 1.

Для кого это руководство?

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

Кроме того, вам не нужны никакие предварительные технические знания для начала работы (кроме базовых «веб-навыков»). Весь смысл этого руководства в том, чтобы стать своего рода курсом «101» для всех, кто интересуется созданием сайтов и обучением веб-разработке..

Вот несколько общих причин, почему вы можете быть заинтересованы:

  • 1. Вам нужен сайт для вашего бизнеса (и вы хотите посмотреть, сможете ли вы построить его самостоятельно).
  • 2. Вы хотите научиться веб-разработке из страсти или временного интереса (ничего плохого в этом нет).
  • 3. Вам нужен сайт для школы.
  • 4. Вы ПОМОГАЕТЕ другу или члену семьи, чтобы получить их веб-сайт в Интернете.

Основная идея, которая будет направлять нас

Это важно! И, пожалуйста, не сердитесь на нас, если вы продвинутый веб-разработчик, читающий это, но основная идея, которая будет направлять нас на протяжении всего этого ресурса по веб-разработке и дизайну 101:

«Подход наименьшего сопротивления»

Вот три принципа подхода наименьшего сопротивления:

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

ГЛАВА 1: План

Ваша идея, тип сайта, доменное имя и хостинг.

Прежде чем настраивать веб-сайт, вам нужен план

Как это ни парадоксально – хит-шоу 80-х «The A-Team» научило нас, хороший план – это ключ к успеху.

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

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

Но…

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

Вместо этого подумайте о следующем:

  1. Отделяйте себя от любых технических целей, которые у вас могут быть. Как, например, цель изучения технологий веб-сайта или определенного программного обеспечения веб-сайта.
  2. Задайте себе один главный вопрос: «Для чего мне нужен сайт?»

Это не о вас, это о цели сайта.

Вопросы, которые вы должны задать себе, прежде чем настроить свой веб-сайт

  1. Для чего предназначен сайт?
  2. Что будет главной «вещью», представленной на сайте? (например, ваш бизнес, продукт, ваши сообщения в блоге и т. д.)
  3. Будет ли сайт иметь какое-то специальное назначение? (например, интернет-магазин, портфолио фотографа и т. д.)
  4. Кто целевая аудитория?
  5. Почему их интересует тема сайта?
  6. Какую боль решает сайт для отдельных пользователей??

Об этих последних 3 вопросах давайте поговорим аудиторию на минуту …

Есть 2 основных правила для создания сайта. Вот правило № 1:

 Читатель / посетитель на первом месте. Это основной человек, который должен понравиться вашему сайту.

В некотором смысле, ваш сайт не ваш. Это их.

(Правило № 2 мы обсудим через минуту.)

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

«Тьфу! Люди просто не понимают, о чем этот сайт. Как они могут быть такими невежественными ?! – ты думаешь. Но, как оказалось, невежественным был ты.

Единственный способ избежать этого – создать свой сайт с вниманием читателя с самого начала..

Итак … возьми этот лист бумаги и ответь на все вопросы выше.

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

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

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

Доменные имена и веб-хостинг

Если вы хотите быть владельцем сайта, вам нужно доменное имя и веб-хостинг.

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

Итак, хост и домен …

Плохая новость в том, что они оба стоят денег.

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

Но давайте начнем с самого начала.

Веб-хосты:

  • Проще говоря, веб-хостинг – это место, где находится ваш сайт, и где ваши посетители могут его найти. В некотором смысле, веб-хостинги для веб-сайтов, как квартиры для людей. Под покровом веб-хостинга выступают компании, которые сдают в аренду свои серверы в обмен на деньги (… небольшие квартиры для ваших сайтов).
  • Для начала подойдет стандартный план виртуального хостинга. Вы можете получить их за все, начиная с $ 3 / месяц. Вот хорошее сравнение популярных веб-хостов. Проверьте это и решите, какая из этих компаний вам подходит. Однако наши рекомендации касаются SiteGround, A2 Hosting и Dreamhost..

Домены:

  • Если веб-хостингом является квартира, то доменом является адрес этой квартиры. Например, доменом этого сайта является hostingfacts.com.
  • Чтобы начать, выберите желаемое доменное имя, а затем купите его у регистратора. Вот полное руководство о том, как купить доменное имя, и вот список генераторов доменных имен.

 

Предложения и советы по выбору доменного имени

Итак, переход к регистратору доменов и фактическая покупка домена – это одно, а как правильно выбрать доменное имя??

Есть несколько школ:

  • Фирменные доменные имена. Это домены, состоящие из несуществующих слов. Подумайте, такие вещи, как Google.com или Yahoo.com. До появления этих компаний эти слова ничего не значили. Преимущество фирменного доменного имени в том, что оно… хорошо, очень брендовое, запоминающееся, и ваш сайт легко отличить от других..
  • Названия на основе ключевых слов. Они состоят из существующих слов, помещенных в последовательность, которая описывает цель сайта. Подумайте, такие вещи, как Pizza.com или StartBloggingOnline.com. С таким доменным именем ваши посетители смогут точно предсказать, какой веб-сайт они собираются посетить. Недостатком является то, что эти домены, как правило, менее брендовые.
  • Объединенные имена. Это фирменные домены и домены на основе ключевых слов, вместе взятые. Подумайте, Facebook.com или Copyblogger.com. Такие имена предлагают посетителям «некоторую» часть характера веб-сайта, но они по-прежнему очень брендовые.

Некоторые общие рекомендации, независимо от выбранного вами типа домена:

  • Сделайте домен легко запомнить.
  • Сделайте это коротким и простым. Чем длиннее домен, тем более запутанным.
  • Получить .com (если это возможно). .Com является основным доступным «доменом верхнего уровня». Не соглашайтесь ни на что другое.
  • Старайтесь избегать дефисов. Получите свое имя в виде одного блоба, например «cakerecipes.com» вместо «cake-recipes.com»

Что нужно подготовить после этой главы:

  • Доменное имя.
  • Веб-хостинг.
  • Ваш лист ответов – цели вашего сайта и как он будет обслуживать аудиторию.

Нужна дополнительная помощь? Вот дальнейшее чтение для вас:

  • Почему хостинг? Основные типы хостов по сравнению
  • 10 вещей, которые делают веб-хостинга хорошим
  • 12 правил выбора правильного доменного имени
  • Полное руководство по планированию сайта

ГЛАВА 2: Проектирование и каркас

Возьмите бумагу и ручку и поцарапайте структуру вашего сайта

Хорошо, давайте перейдем к стадии проектирования.

Перво-наперво, вот рабочая этика, которую мы собираемся пройти здесь:

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

В главе 1 мы упомянули то, что мы назвали правилом № 1 построения сайтов. Настало время для правила № 2:

Правило № 2 создания сайта:

Сначала думай о содержании.

Содержание – это то, что имеет значение на сайте. Не дизайн. содержание.

Люди приходят за содержанием. Они не приходят за дизайн. Дизайн – это только средство доставки контента..

Никогда не начинайте с того, как выглядит ваш сайт. Начните с контента. Содержание. Содержание. содержание.

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

“В самом деле? Внешность действительно не имеет значения? – Ты спрашиваешь.

Вместо того, чтобы побеждать нас, проверьте эту страницу:

Простой сайт

Эта простая веб-страница является лучшим объяснением того, что такое дизайн и для чего он предназначен в Интернете..

Итак, помните, содержание в первую очередь!

Содержание и структура сайта

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

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

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

Подумайте, как наиболее эффективно организовать свой контент на сайте??

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

Пример:

Содержание-структура

Скрести вместе каркас

Каркас в веб-дизайне – это просто схема страницы или проект – визуальное руководство, представляющее структуру веб-сайта (Wikipedia сообщает нам).

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

Скрести каркас

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

Итак, как сделать каркас?

Ну, есть два подхода, если вы новичок:

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

Для последнего, иди сюда – отличный гид.

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

Что нужно подготовить после этой главы:

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

Дальнейшее чтение:

  • 9 шагов к планированию контента сайта
  • Новое в веб-дизайне? Начните здесь.

ГЛАВА 3: UX и UI

Никогда не стоит недооценивать важность пользовательского опыта и пользовательского интерфейса

Как в, пользовательский опыт и пользовательский интерфейс.

WebDesignerDepot дает нам довольно поэтическое определение двух:

UI – это седло, стремена и царствование.

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

Для более практического определения:

  • Пользовательский интерфейс – это то, что пользователь видит, когда смотрит на ваш сайт..
  • UX, как они к этому относятся.

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

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

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

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

Цели пользователя

UX – это цели пользователя … Не так много ваших целей … Цели пользователя.

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

Как это переходит в цель посетителя? … Какую вещь посетитель хочет получить или достичь, когда он заходит на ваш сайт? Это их цель.

Насколько легко достичь этих целей??

Далее сосредоточимся на следующем вопросе:

  • Может ли посетитель легко достичь своей цели? – Могут ли они получить точную информацию, к которой они пришли, простым способом??

Чтобы ответить на этот вопрос, вам нужно вернуться к каркасу, структуре контента и перепроверить.

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

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

Трудно понять все это самостоятельно, не так ли??

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

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

Делайте заметки, делайте выводы, не допускайте ошибок на своем сайте..

Использование эмоций в качестве инструмента

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

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

Чтобы работать над эмоциональной частью работы, одним из лучших инструментов является цвет.

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

Как только вы узнаете, какие цвета вы хотите (возможно) использовать, вот несколько общих рекомендаций по работе с цветом:

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

Типография

Во многих случаях типография – это то, где вы выигрываете (или проигрываете) игру по созданию сайта..

Так легко забыть о типографии и просто использовать Arial для всего.

Не рекомендуется.

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

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

Проверьте этот сайт, например:

бонобо

Заметили что-нибудь? Да, шрифты огромные, и они выглядят великолепно!

Вот как поработать над этим:

  • В целом, каждый дизайн сайта требует два типа текста: заголовки а также пункты. В большинстве случаев достаточно одного шрифта для каждого.
  • Зайдите в Google Fonts – собственную библиотеку бесплатных шрифтов Google, которую вы можете использовать на своем сайте, – и найдите шрифт заголовка, который вам действительно нравится.
  • Затем возьмите имя этого шрифта и найдите его в Font Pair – это библиотека готовых пар шрифтов, которые хорошо сочетаются.
  • Выберите пару, которая выглядит потрясающе.
  • Запишите названия обоих шрифтов, они понадобятся вам позже.

Делать это таким образом ускорит ваш процесс и все же даст вам отличный результат.

Например, мы нашли шрифт Bree Serif в Google Fonts, который нам очень нравится:

Бри-Serif

Затем мы взяли его в Font Pair, и сайт предложил Bree Serif хорошо работать с Open Sans. Отлично:

Бри-Serif разомкнутого-Санс

Окончательная структура

Наконец, последний шаг!

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

Что нужно подготовить после этой главы:

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

Дальнейшее чтение: 

  • UX Magazine
  • UX Бут
  • Психология и эмоции за цветом в веб-дизайне
  • Что такое дизайн пользовательского опыта? Обзор, инструменты и ресурсы
  • Постановка умных бизнес-целей для сайта
  • 8 правил создания эффективной типографики

ГЛАВА 4: WordPress, HTML или шаблоны?

Решите, какой путь выбрать – системы управления контентом или код с нуля

Здесь начинается настоящая грязная работа под капотом!

Это также, вероятно, самая страшная часть процесса (признай это!).

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

И прямо у ворот есть куча вопросов …

  • Должен ли я изучать HTML?
  • Как насчет CSS?
  • Будут ли готовые готовые шаблоны сайтов HTML делать свое дело для меня?
  • Нужно ли изучать язык программирования, такой как PHP??
  • Я слышал, что WordPress – это способ создать сайт в наши дни..
  • Я видел эту рекламу Суперкубка Squarespace. Что с этим?
  • Что эта штука называется Joomla? Или Drupal?
  • и так далее.

Ответ на все это да.

Как и в случае, да, вы можете сделать одну или все эти вещи, и только вам решать, какой путь выбрать.

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

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

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

Ответил а)? Перейти к главе 5.

Ответил б)? Перейти к главе 6.

Ответил с)? Не стесняйтесь проверить эту статью, а затем вернуться (это должно помочь вам выбрать идеальный путь):

  • 8 лучших рассмотренных платформ для ведения блогов и создания веб-сайтов… Каждая платформа описана вместе со своими плюсами и минусами, а ресурс также предлагает лучший доступный выбор (Wix или SB) для ваших конкретных потребностей..

Вы читали его? Большой! Итак, кто из персонажей выше описывает вас лучше всего – а) или б)?

Инструменты, которые могут пригодиться на этом пути:

  • Графика: Paint.NET, Gimp, Pixlr.
  • Написание кода: Блокнот ++, TextWrangler, SublimeText.
  • Управление работой: Trello.
  • Дизайн: цветовые схемы, Google Fonts, инструменты отсюда.
  • Фотография: Unsplash, AllTheFreeStock

ГЛАВА 5: Введение в HTML, CSS & Javascript

Как веб-сайты являются встроенной реальностью

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

HTML

HTML это язык сайтов. Каждая веб-страница в какой-то момент создается или конвертируется в HTML.

Например, чтобы увидеть структуру HTML этого руководства, которое вы читаете здесь, просто нажмите «Ctrl + U» на клавиатуре..

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

Чтобы эффективно изучать HTML, мы советуем вам зарегистрироваться на один из (бесплатных или платных) курсов, доступных в Интернете. Некоторые из лучших можно найти в Codeacademy или Treehouse.

Например, вот специальный раздел о Codeacademy, посвященный HTML и CSS..

Домашняя страница CodeCademy

Так что это комплексный подход к HTML.

CSS

CSS – чтобы пропустить скучные технические детали – отвечает за стилизацию всего, что видно на веб-странице.

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

Чтобы лучше понять, как это работает, пройдите этот быстрый курс в Codeacademy..

Для более глубокого изучения также проверьте разделы CSS на Codeacademy или Treehouse.

JavaScript, JQuery, Bootstrap и т. Д..

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

Имея это в виду, jQuery – это библиотека JavaScript, которая позволяет создавать сложные вещи с меньшим количеством кода. Очень удобно для веб-разработчика. Узнайте больше здесь.

Наконец, Bootstrap – очень интересное изобретение. Первоначально представленный Twitter, это в основном интерфейсная среда, которая ускоряет процесс создания веб-сайта, предоставляя большинство стандартных элементов сайта, уже созданных ранее. Звучит сложно, не правда ли??

Но это не так. Просто ознакомьтесь с этим начальным курсом в Codeacademy (кстати, именно так мы и начали изучать Bootstrap).

Что нужно подготовить после этой главы:

  • По сути, первый проект вашего HTML / CSS сайта полностью построен. Оттуда вы можете начать итерацию и улучшить конечный результат.

ГЛАВА 6: Платформы для создания сайтов

Создаете свой первый сайт? Попробуйте бесплатные веб-платформы, такие как WordPress, Joomla или Drupal.

Глава 6: Платформы для создания сайтов

  • Squarespace
  • WordPress
  • Joomla & Drupal

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

Хорошо, шутки в сторону.

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

Запись. Пожалуйста, имейте в виду, что все остальное, что мы обсуждали в главах 1-4, все еще применимо здесь. Даже если вы используете решение для создания сайтов, которое является своего рода автоматом, вам все равно нужно быть осторожным, чтобы сделать конечный продукт удобным для пользователей и соответствовать целям каждого. Эти инструменты для создания сайтов – это именно те … инструменты.

Начиная с тех, которые легче всего понять:

Squarespace

Единственная платформа сайта, которая рекламирует во время Суперкубка.

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

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

WordPress

Честно говоря, мы любим WordPress.

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

WordPress анимация

Кроме того, в настоящее время это самая популярная веб-платформа из всех. По словам создателя WordPress – Мэтта Малленвега – WordPress теперь обеспечивает 25% всего Интернета. Могут ли все эти люди ошибаться??

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

Для начала, не стесняйтесь следовать одному из следующих путей:

а) «Быстрый старт»

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

б) «Углубленный путь»

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

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

Joomla и Drupal

Хотя Joomla и Drupal немного отличаются друг от друга, они являются отличными системами управления контентом для более продвинутых веб-проектов..

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

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

Для более углубленного обучения на Lynda.com есть отличные курсы, как для Joomla, так и для Drupal..

Что нужно подготовить после этой главы:

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

ГЛАВА 7: Мобильный Адаптивный Дизайн

Более 60% людей используют мобильные телефоны и планшеты для просмотра веб-страниц

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

Вот о чем весь вопрос:

По сути, сейчас больше людей используют мобильные устройства для доступа в Интернет, чем когда-либо прежде. На самом деле, по оценкам, в настоящее время пользователей мобильного Интернета стало больше, чем пользователей настольных компьютеров (75,1% против 52,7%)..

Но есть проблема.

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

Некоторые общие проблемы включают в себя:

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

Это где идея мобильного реагирования вступает в игру.

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

Вот лучшее объяснение: что, черт возьми, отзывчивый веб-дизайн?

Поэтому сейчас нужно проверить и убедиться, что ваш сайт работает на мобильных устройствах. Используйте свои собственные устройства, чтобы проверить это, но также попробуйте мобильное тестирование Google или попробуйте инструмент, такой как Responsive Design Tester..

Если есть проблемы, нужно их исправить.

Некоторые решения:

  • Отзывчивый веб-дизайн – как это сделать
  • Как сделать сайт отзывчивым примерно за 15 минут

ГЛАВА 8: Объединяем все вместе

Вы знаете основы, теперь ваша очередь

Держись, мы почти у цели!

Это последняя глава в нашем довольно долгом путешествии.

К этому моменту у вас должен быть свой первый веб-сайт… Будь то WordPress, созданный вручную HTML / CSS, какой-то конструктор сайтов или любые другие инструменты, которые вы выбрали для работы..

Короче, поздравляю! Но есть еще пара вещей, которые стоит сделать:

  • Дважды проверьте то, что мы обсуждали в главах 1 и 2. Убедитесь, что цели действительно работают для конечного пользователя и что веб-сайт не сбивает с толку.
  • Проверьте вашу структуру кода с помощью службы проверки разметки W3C.
  • Проверьте, нет ли проблем с безопасностью на сайте. Для этого используйте сканер Sucuri.
  • Получите обратную связь от сообщества. Проверьте, что другие люди думают о вашей работе. Форумы в Sitepoint могут быть хороши для этого.

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

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

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

Спасибо за чтение, ты потрясающий!

  • Total116
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector