Создание веб-интерфейсов: с чего начать

Реклама

Компьютерный код и пиксели - это больше, чем просто кирпичи, - основа экономики XXI века. Если вы когда-либо просматривали «Источник страницы» или «Инструменты разработчика» в своем браузере, вы, скорее всего, столкнулись с беспорядком текста и удивились, как это работает на веб-странице.

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

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

Веб-дизайн против фронт-энда

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

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

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

Интерфейс Интернета: разметка, таблица стилей и языки программирования

Большинство веб-страниц построены с использованием трех технологий: языка разметки гипертекста (HTML), каскадных таблиц стилей (CSS) и JavaScript (JS):

• Языки разметки как HTML пометить документ теги. Теги разграничивают семантическое содержание и структурируют документ. Структурированные документы могут быть стиль.
• CSS это язык таблиц стилей и потомок инструкций в стиле печати к компоновщику страниц (который создает окончательное печатное изображение для печатного станка); в Интернете CSS диктует представление контента, такого как типография и верстка в целом, а также размещение графики.
• JavaScript, в отличие от предыдущих двух, является язык программирования. JS управляет взаимодействием и пользовательским вводом и фокусируется на событиях, которые производит пользователь. Чтобы заполнить картину немного больше, противоположность парадигме, управляемой событиями, - это та, где программирование выполняется независимо от пользовательского ввода.

HTML

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

Зачем тебе это нужно

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

,

Анатомия элемента HTML

Элементы HTML, как минимум, являются парами открывающие и закрывающие тегикаждый тег заключен в такой тэг абзаца, ниже по циан. Элементы могут взять атрибутыкак показано ниже в пурпурном, например, «класс», который сделает элемент членом группы, на которую могут влиять HTML и JS. стиль Атрибут, содержимое которого написано красным ниже, на самом деле является способом создания одноразового правила CSS только для этого элемента. (CSS лучше всего писать на уровне сайта или страницы, о чем мы поговорим ниже.)

Результат этой разметки:

Обычный текст абзаца здесь.

Дополнительный кредит (продвинутый)

Разработчики всех видов одержимы скоростью выполнения. Для этого они сами оптимизируют языки для скорости написания и создания читаемых строк. Это называется синтаксическое сахарное покрытие. Сообщество HTML произвело несколько таких попыток.

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

• Haml (Язык разметки абстракции HTML) | требует Рубин (о чем мы вдумчиво писали раньше 3 интерактивных, веселых и бесплатных способа начать изучать язык программирования RubyRuby - это выразительный язык сценариев очень высокого уровня. Он используется в Интернете в основном как часть среды веб-разработки Ruby on Rails, но также и автономно. Если вам интересно, что такое Ruby (не ... Прочитайте больше ) Скомпилировать
• Джейд [сломанный URL удален] | требует Node.js (вы найдете здесь введение Что такое узел JS и почему я должен заботиться? [Веб-разработка]JavaScript - это просто клиентский язык программирования, который работает в браузере, верно? Уже нет. Node.js - это способ запуска JavaScript на сервере; но это намного больше. Если... Прочитайте больше ) Скомпилировать
• Стройное | Требуется Ruby для компиляции (как указано выше)

CSS

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

Зачем тебе это нужно

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

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

Анатомия правила CSS

Правила CSS написаны в одном из трех мест: а) внутри элемента, б) путем создания

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

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

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

Дополнительный кредит (продвинутый)

Как и HTML, CSS имеет свои оптимизации для тех, кто хочет достичь большего и быстрее.

• SASS (и SCSS) | Требуется Ruby, как указано выше
• Меньше | Требуется Node.js, как указано выше

JavaScript

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

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

Зачем тебе это нужно

Зачем учить JavaScript? Как отмечает мой коллега, в JavaScript есть свои чемпионы и недоброжелатели 6 самых простых языков программирования для начинающихОбучение программированию - это поиск правильного языка так же, как и процесс назидания. Вот шесть самых простых языков программирования для начинающих. Прочитайте больше особенно в случае его пригодности для начинающих учеников. это возможно самый популярный язык программирования сегодня. Хотя это не дает прочной основы для понимания остального царства кодирования, есть хороший аргумент для изучения JS наряду с Ruby или PHP.

Тем не менее, vanilla JS не заходит слишком далеко - фреймворки отвечают за веб-страницы сегодня.

Популярные рамки

• Angular, Google JS Framework для веб-приложений, таких как GMail и другие.
• JQuery Создание веб-интерактивности: введение в jQueryjQuery - это библиотека сценариев на стороне клиента, которую использует почти каждый современный веб-сайт - она ​​делает веб-сайты интерактивными. Это не единственная библиотека Javascript, но она наиболее развита, наиболее поддерживается и наиболее широко используется ... Прочитайте больше , MUO уже охвачено здесь Создание веб-интерактивности: введение в jQueryjQuery - это библиотека сценариев на стороне клиента, которую использует почти каждый современный веб-сайт - она ​​делает веб-сайты интерактивными. Это не единственная библиотека Javascript, но она наиболее развита, наиболее поддерживается и наиболее широко используется ... Прочитайте больше , который работает WordPress среди других приложений.
• реагировать, созданный техническими легионами Facebook, создан для создания пользовательских интерфейсов.

Дополнительный кредит (продвинутый)

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

• CoffeeScript | Требуется Node.js, как указано выше
• Машинопись | Требуется Node.js, как указано выше

С чего начать обучение

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

• Coursera (Paid)
  Coursera собирает онлайн-курсы от университетов и учебных заведений. Диапазон цен падает от 50-250 долларов США за курс, но они рекламируют высокий уровень знаний и результаты высокой компетентности.
• Генеральная Ассамблея Dash (Свободно)
  Генеральная Ассамблея является популярным вариантом платного профессионального образования. Dash является их бесплатным предложением и охватывает HTML / CSS / JS.
• MakeUseOf.com - пакет «Учись кодировать 2017» (Платный, подключи)
  Пожизненный доступ к 10 классам, охватывающим всю гамму веб-разработки на передней и задней части, всего за 20 долларов США.
• Сеть разработчиков Mozilla (Свободно)
  MDN является авторитетным, но больше походит на стиль документации, чем на обучение в стиле классной комнаты или игровые предложения только для онлайн.
• Дом на дереве (Paid)
  Еще одно онлайн предложение, платное за месяц, а не за курс. Это происходит по рекомендации Карен Х Ченг в ее вирусном издании Medium «Как устроиться на работу дизайнером, не посещая школу дизайна.”
• Учебные пособия по веб-дизайну от Envato Tuts + (Смешанный бесплатный и платный контент равного качества)
  Набор из одноразовых статей и многокомпонентных серий высококачественной, конкретной и целевой информации, обычно по одному предмету.

Начиная

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

• Текстовые редакторы, такие как Git's Atom текстовый редактор, Возвышенный текст (оплачено) или Код VS от Microsoft
• Браузеры, такие как Mozilla Firefox или Гугл Хром
• Полезно, но за рамками этой статьи, иметь хостинг или локальный сервер (такой как XAMPP) настроить.

Более удобными, но менее постоянными альтернативами являются живые веб-редакторы, такие как:

• Codepen.io
• JSbin.com

Короткие сокращения

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

• начальная загрузкаПервоначально разработанный Twitter, содержит шаблоны HTML, CSS и JS, которые сегодня широко распространены в Интернете. Bootstrap это почти лингва франка в начале веб-разработки.
• Фонд считается самой передовой платформой в мире и построена с акцентом на малый размер и скорость.

Справочный материал

• Список отдельно - A-list публикация «Для людей, которые делают сайты»
• Могу ли я использовать - «Поддержка таблиц для HTML5, CSS3 и т. Д.»
• CSS-Tricks - Центр для сообщества CSS и источник знаний о лучших практиках и совместимости
• HTML Living Standard Документация - «Стандарт жизни - издание для веб-разработчика»
• HTML5 пожалуйста - «Используйте новые и блестящие ответственно»
• Smashing Magazine - «Для профессиональных веб-дизайнеров и разработчиков»

Вывод

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

Разработчики: Что у вас в стеке переднего плана?

Начинающие: Что еще мы могли бы включить, чтобы сориентировать вас?