Хотите создать веб-интерфейс, с чего начать?

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

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

1. Как отличить Front-End, Back-End и Full Stack?

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

Хотите создать веб-интерфейс, с чего начать?

1. Веб-дизайн и Front-end разработка
   1. Языки маркировки, стиля и программирования в интерфейсе
2. HTML
   1. Причина, по которой вам это нужно
   2. Структура HTML-элемента
   3. Передовой
3. CSS
   1. Причина, по которой вам это нужно
   2. Структура правила CSS
   3. Передовой
4. JavaScript
   1. Причина, по которой вам это нужно
   2. Популярные фреймворки
   3. Передовой
5. С чего начать учиться?
   1. Начинать
   2. Резюме
   3. Рекомендации

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

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

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

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

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

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

1. Языки маркировки, такие как HTML, помечают документы тегами (тегами). Тег, разграничивающий семантическое содержание и структуру документа. Структурированные документы можно стилизовать.
2. CSS – это язык стилей или ориентация стиля отображения для редактора страницы. На веб-странице CSS предлагает команды, которые представляют контент, такой как типографика и макет в целом, а также размещение графики.
3. JavaScript, в отличие от двух предыдущих объектов, является языком программирования. JS обрабатывает взаимодействие с пользователем и ввод данных и фокусируется на событиях, создаваемых пользователями.

HTML

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

Причина, по которой вам это нужно

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

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

Структура HTML-элемента

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

Передовой

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

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

1. Haml (язык разметки абстракций HTML): для компиляции требуется Ruby.
2. Jade: для компиляции требуется Node.js.
3. Slim: попросите Ruby скомпилировать.

CSS

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

Причина, по которой вам это нужно

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

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

Структура правила CSS

Правила CSS написаны в одном из трех мест:

а) Встроенный элемент.

б) Создавая разделы