Практические задания по html и css: Андроид в тени | htmlbook.ru

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

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

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

Раздел

).

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

  
  
   Итого   
  2  
  2  
  2  
  
  
 

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

Настройте CSS.

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

Найдите раздел кода

) и замените его следующим:

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

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

Front-end Developer Handbook 2019 - Изучите всю практику разработки JavaScript, CSS и HTML!

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

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

Содержание справочника отдает предпочтение веб-технологиям (HTML, CSS, DOM и JavaScript) и тем решениям, которые непосредственно построены на основе этих открытых технологий.Материалы, на которые ссылаются и обсуждаются в книге, являются либо лучшими в своем классе, либо текущим предложением проблемы.

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

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

Глава 0 дает краткий обзор года в области фронтенд-разработки и того, что может быть в будущем. Главы 1 и 2 призваны дать краткий обзор дисциплины и практики фронтенд-разработки. В главах 3 и 4 систематизируются и рекомендуются пути обучения и ресурсы. В главе 5 собраны и перечислены инструменты, используемые разработчиками интерфейса, а в главе 6 выделены информационные центры интерфейса.

Глава 1. Что такое Front-end разработчик?

В этой главе дается базовое объяснение интерфейсной разработки и дисциплины интерфейсного разработчика.

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

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

https: // en.wikipedia.org/wiki/Front-end_web_development

Источник изображения: https://www.upwork.com/hiring/development/front-end-developer/

Интерфейсный разработчик ...

Интерфейсный разработчик проектирует и разрабатывает веб-сайты и веб-приложения с использованием веб-технологий (например, HTML, CSS и JavaScript), которые обычно работают на открытой веб-платформе или действуют как входные данные компиляции для сред, не относящихся к веб-платформе (например, React Родные).

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

Веб-браузеры (наиболее распространенные)

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

Наиболее распространенные веб-браузеры (сначала показаны в порядке наиболее часто используемых):

Безголовые браузеры

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

Наиболее распространенные браузеры без головы:

Веб-просмотры

Webviews используются собственной ОС в собственном приложении для запуска веб-страниц. Представьте, что веб-просмотр - это iframe или отдельная вкладка веб-браузера, встроенная в собственное приложение, работающее на устройстве (например,g., iOS, android, windows).

Наиболее распространенные решения для разработки веб-просмотров:

• Кордова (обычно для встроенных приложений для телефонов / планшетов)
• NW.js (обычно используется для настольных приложений)
• Electron (обычно используется для настольных приложений)

Собственный продукт из Web Tech

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

Вот некоторые примеры таких сред:

Глава 2. Практика фронтенд-разработки: обзор

В этой главе подробно и широко описывается практика интерфейсной инженерии, начиная с «Как создаются фронтенд-разработчики».

2.1 - Как создаются фронтенд-разработчики

Как именно стать фронтенд-разработчиком? Ну это сложно. Просто рассмотрите эту дорожную карту:

Источник изображения: https://github.com/kamranahmedse/developer-roadmap

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

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

1. Примерно узнайте, как работает веб-платформа. Убедитесь, что вы знаете «что» и «где» в HTML, CSS, DOM, JavaScript, доменах, DNS, URL-адресах, HTTP, браузерах и серверах / хостингах.Пока не углубляйтесь ни в чем, просто постарайтесь понять, какие части играют и как они слабо сочетаются друг с другом. Начните с создания простых веб-страниц.
2. Изучите HTML
3. Изучите CSS
4. Изучите JavaScript
5. Узнать DOM
6. Изучите основы дизайна пользовательского интерфейса (например, шаблоны пользовательского интерфейса, дизайн взаимодействия, дизайн пользовательского интерфейса и удобство использования).
7. Изучите интерфейс командной строки / командную строку
8. Изучите практику разработки программного обеспечения (например, дизайн / архитектура приложений, шаблоны, Git, тестирование, мониторинг, автоматизация, качество кода, методологии разработки).
9. Будьте самоуверенными и настройте свой ящик для инструментов, используя все, что имеет смысл для вашего мозга (например, Webpack, React и Mobx).
10. Изучите Node.js

Короткий совет по обучению. Изучите фактические базовые технологии, прежде чем изучать абстракции.Не изучайте jQuery, изучите DOM. Не изучайте SASS, изучите CSS. Не учите JSX, учите HTML. Не изучайте TypeScript, изучите JavaScript. Не изучайте Handlebars, изучите шаблоны JavaScript ES6. Не просто используйте Bootstrap, изучите шаблоны пользовательского интерфейса.

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

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

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

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

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

2.2 - Заголовки внешних заданий

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

Ниже приведен список и описание различных должностей внешнего интерфейса (имейте в виду, что названия трудны). Распространенным или наиболее часто используемым (т. Е. Общим) названием для интерфейсного разработчика является «интерфейсный разработчик» или «интерфейсный разработчик». Обратите внимание, что любое задание, содержащее слова «интерфейс», «на стороне клиента», «веб-интерфейс», «HTML», «CSS» или «JavaScript», обычно подразумевает, что человек в некоторой степени владеет HTML, CSS, Ноу-хау профессионалов в области DOM и JavaScript.

Front-End Developer : Общее название должности, описывающее разработчика, обладающего определенными навыками в HTML, CSS, DOM и JavaScript и использующего эти технологии на веб-платформе.

Front-End Engineer (также известный как разработчик JavaScript или Full-stack JavaScript Developer) : Должность, присваиваемая разработчику, имеющему образование в области информатики, инженерии, специальности и использующему эти навыки для работы с интерфейсными технологиями.Эта роль обычно требует знаний в области информатики и многолетнего опыта разработки программного обеспечения. Когда слово «Приложение JavaScript» включено в название должности, это будет означать, что разработчик должен быть продвинутым разработчиком JavaScript, обладающим передовыми навыками программирования, разработки программного обеспечения и разработки приложений (т. Е. Имеет многолетний опыт создания интерфейсных программных приложений). .

Разработчик CSS / HTML : Заголовок интерфейсной должности, описывающий разработчика, обладающего навыками в области HTML и CSS, за исключением JavaScript и приложений, ноу-хау.

Интерфейсный веб-дизайнер : Когда слово «Дизайнер» включено в название должности, это будет означать, что дизайнер будет обладать навыками внешнего интерфейса (например, HTML и CSS), а также профессиональным дизайном (Визуальный дизайн и взаимодействие Дизайн) навыки.

UI (Пользовательский интерфейс) Разработчик / Инженер : Когда слово «Интерфейс» или «UI» включено в название должности, это будет означать, что разработчик должен обладать навыками интерактивного дизайна в дополнение к навыкам фронтенд-разработчика или фронтенду. -кончить инженерные навыки.

Мобильный / планшетный Front-End Developer : когда слово «Mobile» или «Tablet» включено в название должности, это означает, что разработчик имеет опыт разработки внешних интерфейсов, которые работают на мобильных или планшетных устройствах (изначально или на веб-платформе, т. е. в браузере).

Front-End SEO Expert : Когда слово «SEO» включено в название должности, это означает, что разработчик имеет обширный опыт создания интерфейсных технологий для стратегии SEO.

Front-End Accessibility Expert : Когда слово «Доступность» включено в название должности, это означает, что разработчик имеет большой опыт создания интерфейсных технологий, поддерживающих требования и стандарты доступности.

Front-End Dev. Операция : включение слова «DevOps» в название должности означает, что разработчик имеет обширный опыт разработки программного обеспечения, относящийся к совместной работе, интеграции, развертыванию, автоматизации и качеству.

Front-End Testing / QA : Когда слово «Тестирование» или «QA» включено в название должности, это означает, что разработчик имеет обширный опыт тестирования и управления программным обеспечением, которое включает модульное тестирование, функциональное тестирование, пользовательское тестирование. , и A / B-тестирование.

Примечания:

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

2.3 - Базовые веб-технологии, используемые интерфейсными разработчиками

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

1. Язык гипертекстовой разметки (он же HTML)
2. Каскадные таблицы стилей (также известные как CSS)
3. Унифицированные указатели ресурсов (также известные как URL)
4. Протокол передачи гипертекста (он же HTTP)
5. Язык программирования JavaScript (он же ECMAScript 262)
6. Нотация объектов JavaScript (также известная как JSON)
7. Объектная модель документа (также известная как DOM)
8. Веб-API (также известные как HTML5 и другие или API браузера)
9. Руководство по обеспечению доступности веб-контента (также известное как WCAG) и многофункциональные доступные Интернет-приложения (также известное как ARIA)

Полный список всех веб-спецификаций см. На платформе.html5.org или веб-API MDN.

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

Язык гипертекстовой разметки (он же HTML)

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

- Википедия

Наиболее важные спецификации / документация:

Каскадные таблицы стилей (также известные как CSS)

Cascading Style Sheets (CSS) - это язык таблиц стилей, используемый для описания внешнего вида и форматирования документа, написанного на языке разметки. Хотя этот язык чаще всего используется для изменения стиля веб-страниц и пользовательских интерфейсов, написанных на HTML и XHTML, он может применяться к любому типу XML-документа, включая простой XML, SVG и XUL.Наряду с HTML и JavaScript, CSS является краеугольной технологией, используемой большинством веб-сайтов для создания визуально привлекательных веб-страниц, пользовательских интерфейсов для веб-приложений и пользовательских интерфейсов для многих мобильных приложений.

- Википедия

Наиболее важные спецификации / документация:

Протокол передачи гипертекста (он же HTTP)

Протокол передачи гипертекста (HTTP) - это прикладной протокол для распределенных совместных гипермедийных информационных систем.HTTP - это основа передачи данных во всемирной паутине.

- Википедия

Наиболее важные характеристики:

Унифицированные указатели ресурсов (также известные как URL)

Единый указатель ресурса (URL) (также называемый веб-адресом) - это ссылка на ресурс, которая определяет расположение ресурса в компьютерной сети и механизм его получения. URL-адрес - это особый тип универсального идентификатора ресурса (URI), хотя многие люди используют эти два термина как синонимы.URL-адрес подразумевает средства доступа к указанному ресурсу, что не относится к каждому URI. URL-адреса чаще всего используются для ссылки на веб-страницы (http), но также используются для передачи файлов (ftp), электронной почты (mailto), доступа к базе данных (JDBC) и многих других приложений.

- Википедия

Наиболее важные характеристики:

Объектная модель документа (также известная как DOM)

Объектная модель документа (DOM) - это межплатформенное и независимое от языка соглашение для представления и взаимодействия с объектами в документах HTML, XHTML и XML.Узлы каждого документа организованы в древовидную структуру, называемую деревом DOM. К объектам в дереве DOM можно обращаться и манипулировать ими с помощью методов для объектов. Открытый интерфейс модели DOM указывается в ее интерфейсе прикладного программирования (API).

- Википедия

Наиболее важные спецификации / документация:

Язык программирования JavaScript (он же ECMAScript 262)

JavaScript - это динамический, нетипизированный и интерпретируемый язык программирования высокого уровня.Он стандартизирован в спецификации языка ECMAScript. Наряду с HTML и CSS, это одна из трех основных технологий производства контента в World Wide Web; большинство веб-сайтов используют его, и он поддерживается всеми современными веб-браузерами без плагинов. JavaScript основан на прототипах с функциями первого класса, что делает его многопарадигмальным языком, поддерживающим объектно-ориентированные, императивные и функциональные стили программирования. Он имеет API для работы с текстом, массивами, датами и регулярными выражениями, но не включает в себя какие-либо средства ввода-вывода, такие как сетевые, хранилища или графические средства, которые зависят от среды хоста, в которую он встроен.

- Википедия

Наиболее важные спецификации / документация:

Веб-API (также известные как HTML5 и другие)

При написании кода для Интернета с использованием JavaScript доступно множество API. Ниже приведен список всех интерфейсов (то есть типов объектов), которые вы можете использовать при разработке своего веб-приложения или сайта.

- Mozilla

Самая важная документация:

Нотация объектов JavaScript (также известная как JSON)

Это основной формат данных, используемый для асинхронной связи между браузером и сервером (AJAJ), в значительной степени заменяющий XML (используемый AJAX).Хотя JSON изначально был заимствован из языка сценариев JavaScript, он не зависит от языка. Код для синтаксического анализа и генерации данных JSON доступен на многих языках программирования. Формат JSON был первоначально указан Дугласом Крокфордом. В настоящее время он описывается двумя конкурирующими стандартами: RFC 7159 и ECMA-404. Стандарт ECMA минимален и описывает только разрешенный синтаксис грамматики, тогда как RFC также предоставляет некоторые соображения по семантике и безопасности. Официальный тип интернет-носителя для JSON - application / json.Расширение имени файла JSON - .json.

- Википедия

Наиболее важные характеристики:

Руководство по обеспечению доступности веб-контента (также известное как WCAG) и доступное полнофункциональное Интернет-приложение (также известное как ARIA)

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

- Википедия

2.4 - Возможные навыки фронтенд-разработчика

Источник изображения: http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html

Для любого типа профессиональной роли фронтенд-разработчика предполагается от базового до продвинутого понимания HTML, CSS, DOM, JavaScript, HTTP / URL и веб-браузеров.

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

• Системы управления контентом (также известные как CMS)
• Node.js
• Кросс-браузерное тестирование
• Кросс-платформенное тестирование
• Модульное тестирование
• Тестирование между устройствами
• Доступность / WAI-ARIA
• Поисковая оптимизация (SEO)
• Дизайн взаимодействия или пользовательского интерфейса
• Пользовательский опыт
• Удобство использования
• Системы электронной коммерции
• Портальные системы
• Каркас
• Макет CSS / сетки
• Манипуляции с DOM (например,г., jQuery)
• Производительность мобильного Интернета
• Нагрузочное испытание
• Тестирование производительности
• Прогрессивное улучшение / постепенное ухудшение
• Контроль версий (например, GIT)
• MVC / MVVM / MV *
• Функциональное программирование
• Форматы данных (например, JSON, XML)
• API данных (например, Restful API)
• Встраивание веб-шрифтов
• Масштабируемая векторная графика (также известная как SVG)
• Регулярные выражения
• Микроданные / микроформаты
• Средства выполнения задач, средства сборки, средства автоматизации процессов
• Адаптивный веб-дизайн
• Объектно-ориентированное программирование
• Архитектура приложения
• Модули
• Менеджеры зависимостей
• Менеджеры пакетов
• Анимация JavaScript
• Анимация CSS
• Диаграммы / Графики
• Виджеты пользовательского интерфейса
• Проверка качества кода
• Тестирование покрытия кода
• Анализ сложности кода
• Интеграционное тестирование
• Командная строка / CLI
• Шаблонные стратегии
• Шаблоны движков
• Одностраничные приложения
• Безопасность Интернета / браузера
• Инструменты разработчика браузера

2.5 - Front-End разработчики разрабатывают для ...

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

Эти операционные системы обычно работают на одном или нескольких из следующих устройств:

• Настольный компьютер
• Ноутбук / нетбук
• Мобильный телефон
• Планшет
• телевизор
• Часы
• Вещи (т.е., все, что вы можете себе представить, машину, холодильник, фары, термостат и т. д.)

Источник изображения: https://www.enterpriseirregulars.com/104084/roundup-internet-things-forecasts-market-estimates-2015/

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

• Веб-браузер (примеры: Chrome, IE, Safari, Firefox).
• Безголовый браузер (примеры: Headless Chromium).
• Вкладка WebView / браузера (подумайте, iframe), встроенная в собственное приложение в качестве среды выполнения с мостом к собственным API. Приложения WebView обычно содержат пользовательский интерфейс, созданный на основе веб-технологий. (то есть HTML, CSS и JS). (примеры: Apache Cordova, NW.js, Electron)
• Нативное приложение, созданное на основе веб-технологий, которое интерпретируется во время выполнения с помощью моста к собственным API-интерфейсам.Пользовательский интерфейс будет использовать собственные части пользовательского интерфейса (например, собственные элементы управления iOS), а не веб-технологии. (примеры: NativeScript, React Native)

2.6 - Front-End в команде

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

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

• Визуальный дизайнер (например, шрифты, цвета, интервалы, эмоции, визуальные концепции и темы)
• UI / Interaction Designer / Information Architect (т. Е. Каркасы, определяющие все взаимодействия с пользователем и функциональность UI, структурирование информации)
• Front-End Developer (т.е. пишет код, который выполняется на клиенте / на устройстве)
• Back-End Developer (т. Е. Пишет код, который выполняется на сервере)

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

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

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

• SEO-стратеги
• DevOps-инженеры
• Инженеры по производительности
• Разработчики API
• Администраторы баз данных
• QA-инженеры / тестировщики

2.7 - Универсальный / полный миф

Термин «Full-Stack» разработчик приобрел несколько значений. Так много, что при использовании этого термина не ясно ни одно значение. Просто рассмотрите результаты двух опросов, показанных ниже. Эти результаты могут заставить поверить в то, что быть разработчиком полного стека - обычное дело. Но, судя по моему почти 20-летнему опыту, это совсем не так в профессиональном контексте.

Источник изображения: https: // medium.freecodecamp.com/we-asked-15-000-people-who-they-are-and-how-theyre-learning-to-code-4104e29b2781#.ngcpn8nlz

Источник изображения: https://insights.stackoverflow.com/survey/2017#developer-profile-specific-developer-types

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

С прагматической точки зрения, вы должны стремиться быть или нанимать эксперта в одной из этих ролей (например, визуальный дизайн, интерактивный дизайн / IA, Front-end Dev, Back-end Dev). Исключительно редко встречаются те, кто утверждает, что работает на экспертном уровне в одной или нескольких из этих ролей.

Однако, учитывая, что JavaScript проник на все уровни технологического стека (т. Е. Node.js) поиск полнофункционального JS-разработчика, который может кодировать интерфейс и серверную часть, становится менее мифическим. Обычно эти разработчики полного стека имеют дело только с JavaScript. Разработчик, который может кодировать интерфейс, серверную часть, API и базу данных, уже не так абсурден, как раньше (за исключением визуального дизайна, дизайна взаимодействия и CSS). По-прежнему мифический, на мой взгляд, но не такой необычный, как когда-то. Таким образом, я бы не рекомендовал разработчику стать разработчиком полного цикла. В редких случаях может сработать.Но в качестве общей концепции построения карьеры фронтенд-разработчика я бы сосредоточился на интерфейсных технологиях.

2.8 - Front-End интервью

Подготовка:

Тесты:

Вопросы, которые могут вам задать:

Вопросы, которые вы задаете:

2.9 - Интерфейсные доски объявлений

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

2.10 - Заработная плата на стороне пользователя

В среднем по США для интерфейсного разработчика среднего уровня составляет от 65 до 100 тысяч долларов.

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

Примечания:

1. Ведущий / старший интерфейсный разработчик / инженер потенциально может жить где угодно (т. Е. Работать удаленно) и зарабатывать более 150 тысяч долларов в год (посетите ангел.co, зарегистрируйтесь, просмотрите внешние вакансии на сумму более 150 тысяч долларов или изучите диапазоны заработной платы на сайте Stack Overflow Jobs).

Глава 3. Изучение Front-end Dev: самостоятельные ресурсы / рекомендации

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

Определенные учебные ресурсы (статьи, книги, видео, скринкасты и т. Д..) будут включать как бесплатные, так и платные материалы. Платные материалы будут отмечены [$].

3.1. - Изучите Интернет / Сеть

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

- Википедия

Источник изображения: https://www.helloitsliam.com/2014/12/20/how-the-internet-works-infographic/

Источник изображения: http: // www.bitrebels.com/technology/find-out-who-runs-the-internet-chart/

3,2. - Изучите веб-браузеры

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

- Википедия

Наиболее часто используемые браузеры (на настольных компьютерах и мобильных устройствах):

1. Chrome (движок: Blink + V8)
2. Firefox (движок: Gecko + SpiderMonkey)
3. Internet Explorer (движок: Trident + Chakra)
4. Safari (движок: Webkit + SquirrelFish)

Источник изображения: http: // gs.statcounter.com/browser-market-share

Развитие браузеров и веб-технологий (т.е. API)

Наиболее часто используемый безголовый браузер:

Как работают браузеры

Оптимизация для браузеров:

Сравнение браузеров

Взлом браузеров

Разработка для браузеров

В прошлом фронтенд-разработчики тратили много времени на то, чтобы код работал в нескольких разных браузерах.Когда-то это было более серьезной проблемой, чем сегодня. Сегодня абстракции (например, React, Webpack, Post-CSS, Babel и т. Д.) В сочетании с современными браузерами значительно упрощают разработку браузеров. Новая проблема заключается не в том, какой браузер будет использовать пользователь, а в том, на каком устройстве он будет запускать браузер.

Вечнозеленые браузеры

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

Выбор браузера

На сегодняшний день большинство разработчиков интерфейсов используют Chrome и «Chrome Dev Tools» для разработки кода интерфейса. Однако все наиболее часто используемые современные браузеры предлагают некоторые инструменты разработчика. Выбор одного из них для разработки - это субъективный выбор. Более важный вопрос - это знать, какие браузеры и на каких устройствах нужно поддерживать, а затем провести соответствующее тестирование.

3.3 - Изучите систему доменных имен (также известную как DNS)

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

- Википедия

Источник изображения: http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works.jpg

3.4 - Изучение HTTP / сетей (включая CORS и WebSockets)

HTTP - Протокол передачи гипертекста (HTTP) - это прикладной протокол для распределенных, совместных, гипермедийных информационных систем.HTTP - это основа передачи данных во всемирной паутине.

- Википедия

Спецификации HTTP

HTTP-документы

HTTP-видео / статьи / учебные пособия

Коды состояния HTTP

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

- Википедия

CORS Характеристики

CORS

WebSockets - WebSocket - это протокол, обеспечивающий полнодуплексные каналы связи через одно TCP-соединение. Протокол WebSocket был стандартизирован IETF как RFC 6455 в 2011 году, а API WebSocket в Web IDL стандартизируется W3C.

- Википедия

Веб-сокеты

3.5 - Изучите веб-хостинг

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

- Википедия

Общее обучение:

Источник изображения: https: // firstsiteguide.ru / wp-content / uploads / 2016/06 / what-is-web-hosting-infographic.jpg

3.6 - Изучить общую фронтенд-разработку

3.7 - Изучение пользовательского интерфейса / дизайна взаимодействия

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

- Википедия

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

- Википедия

Дизайн взаимодействия с пользователем - Дизайн взаимодействия с пользователем (UXD, UED или XD) - это процесс повышения удовлетворенности пользователей за счет повышения удобства использования, доступности и удовольствия от взаимодействия между пользователем и продуктом. Дизайн взаимодействия с пользователем включает в себя традиционный дизайн взаимодействия человека с компьютером (HCI) и расширяет его, затрагивая все аспекты продукта или услуги, которые воспринимаются пользователями.

- Википедия

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

- Википедия

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

3.8 - Изучение HTML и CSS

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

- Википедия

CSS - Каскадные таблицы стилей (CSS) - это язык таблиц стилей, используемый для описания внешнего вида и форматирования документа, написанного на языке разметки. Хотя этот язык чаще всего используется для изменения стиля веб-страниц и пользовательских интерфейсов, написанных на HTML и XHTML, он может применяться к любому типу XML-документа, включая простой XML, SVG и XUL.Наряду с HTML и JavaScript, CSS является краеугольной технологией, используемой большинством веб-сайтов для создания визуально привлекательных веб-страниц, пользовательских интерфейсов для веб-приложений и пользовательских интерфейсов для многих мобильных приложений.

- Википедия

Подобно строительству дома, можно рассматривать HTML как обрамление, а CSS - как украшение и отделку.

Общее обучение:

Освоение CSS:

Ссылки / Документы:

Глоссарий / Словарь:

Стандарты / Технические характеристики:

Архитектура CSS:

Авторские / архитектурные съезды:

3.9. Изучите поисковую оптимизацию

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

- Википедия

Источник изображения: https://visual.ly/community/infographic/computers/how-does-seo-work

Общее обучение:

3.10 - Изучение JavaScript

JavaScript - это динамический, нетипизированный и интерпретируемый язык программирования высокого уровня. Он стандартизирован в спецификации языка ECMAScript. Наряду с HTML и CSS, это одна из трех основных технологий производства контента в World Wide Web; большинство веб-сайтов используют его, и он поддерживается всеми современными веб-браузерами без плагинов.JavaScript основан на прототипах с функциями первого класса, что делает его многопарадигмальным языком, поддерживающим объектно-ориентированные, императивные и функциональные стили программирования. Он имеет API для работы с текстом, массивами, датами и регулярными выражениями, но не включает в себя какие-либо средства ввода-вывода, такие как сетевые, хранилища или графические средства, которые зависят от среды хоста, в которую он встроен.

- Википедия

Начало работы:

Общее обучение:

Мастеринг:

Функциональный JavaScript:

Ссылки / Документы:

Глоссарий / Энциклопедия / Жаргон:

Стандарты / Технические характеристики:

Стиль:

Устаревшие учебные ресурсы JS:

Обозреватели / визуализаторы JS:

3.11. Изучите DOM, BOM, CSSOM и jQuery

DOM - объектная модель документа (DOM) - это кроссплатформенное и независимое от языка соглашение для представления и взаимодействия с объектами в документах HTML, XHTML и XML. Узлы каждого документа организованы в древовидную структуру, называемую деревом DOM. К объектам в дереве DOM можно обращаться и манипулировать ими с помощью методов для объектов. Открытый интерфейс модели DOM указывается в ее интерфейсе прикладного программирования (API).

- Википедия

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

- Википедия

jQuery - jQuery - это кроссплатформенная библиотека JavaScript, предназначенная для упрощения клиентских сценариев HTML.jQuery - самая популярная библиотека JavaScript, используемая сегодня, ее устанавливают на 65% из 10 миллионов сайтов с наибольшим посещаемостью в Интернете. jQuery - бесплатное программное обеспечение с открытым исходным кодом, распространяемое по лицензии MIT.

- Википедия

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

Общее обучение:

Мастеринг:

Ссылки / Документы:

Стандарты / Технические характеристики:

3.12 - Изучение веб-анимации

Общее обучение:

Стандарты / Технические характеристики:

3.13 - Изучение веб-шрифтов, значков и изображений

Веб-типографика относится к использованию шрифтов во всемирной паутине.Когда HTML был впервые создан, шрифты и стили шрифтов контролировались исключительно настройками каждого веб-браузера. Не существовало механизма для отдельных веб-страниц для управления отображением шрифтов, пока в 1995 году Netscape не представила тег , который затем был стандартизирован в спецификации HTML 3.2. Однако шрифт, указанный в теге, должен был быть установлен на компьютере пользователя, в противном случае использовался бы запасной шрифт, например шрифт без засечек или моноширинный шрифт браузера по умолчанию. Первая спецификация каскадных таблиц стилей была опубликована в 1996 году и обеспечивала те же возможности.

Спецификация CSS2 была выпущена в 1998 году и была предпринята попытка улучшить процесс выбора шрифта, добавив сопоставление шрифтов, синтез и загрузку. Эти методы не получили широкого применения и были удалены в спецификации CSS2.1. Однако Internet Explorer добавил поддержку функции загрузки шрифтов в версии 4.0, выпущенной в 1997 году. Загрузка шрифтов была позже включена в модуль шрифтов CSS3 и с тех пор реализована в Safari 3.1, Opera 10 и Mozilla Firefox 3.5. Впоследствии это повысило интерес к веб-типографике, а также к использованию загрузки шрифтов.

- Википедия

Шрифтов:

Иконки:

Изображений:

3.14 - Доступность обучения

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

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

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

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

- Википедия

Общее обучение:

Стандарты / Технические характеристики:

3.15. Изучите веб-интерфейсы и API-интерфейсы браузера.

Источник изображения: http://www.evolutionoftheweb.com/

BOM (объектная модель браузера) и DOM (объектная модель документа) - не единственные API-интерфейсы браузера, которые доступны на веб-платформе внутри браузеров. Все, что не является конкретно DOM или BOM, но является интерфейсом для программирования браузера, можно рассматривать как веб-интерфейс или API-интерфейс браузера (к сожалению, в прошлом некоторые из этих API-интерфейсов назывались API-интерфейсами HTML5, что путает их собственные особенности / стандартизацию с фактическим HTML5. спецификацию, определяющую язык разметки HTML5).Обратите внимание, что веб-интерфейсы или API-интерфейсы браузера включают API-интерфейсы устройств (например, Navigator.getBattery () ), которые доступны через браузер на планшетах и ​​телефонах.

Вы должны знать и изучать, где это уместно, веб-интерфейсы / API-интерфейсы браузера. Хороший инструмент для ознакомления со всеми этими API - это исследование результатов HTML5test.com для 5 самых современных браузеров.

MDN содержит много информации об API-интерфейсах веб / браузеров.

Имейте в виду, что не все API указаны W3C или WHATWG.

Помимо MDN, вы можете найти следующие ресурсы, полезные для изучения всех веб-интерфейсов и API-интерфейсов браузера:

3.16 - Изучение JSON (нотация объектов JavaScript)

JSON (канонически произносится как нотация объектов JavaScript) - это открытый стандартный формат, в котором используется читаемый человеком текст для передачи объектов данных, состоящих из пар атрибут-значение. Это основной формат данных, используемый для асинхронной связи между браузером и сервером (AJAJ), в значительной степени заменяющий XML (используемый AJAX).

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

Формат JSON был первоначально определен Дугласом Крокфордом. В настоящее время он описывается двумя конкурирующими стандартами: RFC 7159 и ECMA-404. Стандарт ECMA минимален и описывает только разрешенный синтаксис грамматики, тогда как RFC также предоставляет некоторые соображения по семантике и безопасности.Официальный тип интернет-носителя для JSON - application / json. Расширение имени файла JSON - .json.

- Википедия

Общее обучение:

Ссылки / Документы:

Стандарты / Технические характеристики:

Архитектор:

3.17 - Изучение шаблонов JS

Обычно используется шаблон JavaScript, но не всегда с решением MV * для разделения частей представления (т.е.д., пользовательский интерфейс) из логики и модели (т.е. данных или JSON).

Обратите внимание, что в JavaScript 2015 (он же ES6) добавлен собственный механизм шаблонов, называемый «Строки шаблонов». Кроме того, в последнее время шаблоны были заменены такими вещами, как JSX, элемент шаблона или строки HTML.

Если бы я не использовал React и JSX, я бы сначала обратился к JavaScript «Строки шаблонов», а когда этого не хватало, переходил на нанджаки.

3.18 - Изучение генераторов статических сайтов

Генераторы статических сайтов, обычно написанные с использованием кода на стороне сервера (т.е.e., ruby, php, python, nodeJS и т. д.), создают статические HTML-файлы из статических текстов / данных + шаблонов, которые предназначены для статической отправки с сервера клиенту без динамического характера.

Общее обучение:

3.19 - Изучите информатику с помощью JS

3.20 - Изучение архитектуры внешнего приложения

Общее обучение:

Устаревшие учебные материалы:

В последнее время не так много общего контента создается по этой теме.Большая часть контента, предлагаемого для обучения созданию интерфейсных / SPA / JavaScript-приложений, предполагает, что вы выбрали такой инструмент, как Angular, Ember, React или Aurelia.

Мой совет, в 2019 изучайте React, Mobx и Apollo / graphql.

3.21 - Изучение данных (например, JSON) API-дизайн

3.22 - Изучите React

Реакция обучения:

Реакция мастеринга:

Когда вы хорошо освоите React, переходите к изучению более надежного решения для управления состоянием, такого как MobX.Если вы опытный разработчик со знаниями функционального программирования, посмотрите Redux. Если вам нужна помощь в понимании роли управления состоянием помимо React , смотрите setState «Расширенное управление состоянием в React (с участием Redux и MobX)».

3.23 - Изучите управление состоянием приложений

3.24 - Изучите прогрессивное веб-приложение

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

В 2015 году дизайнер Фрэнсис Берриман и инженер Google Chrome Алекс Рассел придумали термин «прогрессивные веб-приложения» для описания приложений, использующих преимущества новых функций, поддерживаемых современными браузерами, включая сервис-воркеров и манифесты веб-приложений, которые позволяют пользователям обновлять веб-приложения до первоклассные приложения в своей родной ОС.

По данным Google Developers, эти характеристики составляют:

• Progressive - Работайте для каждого пользователя, независимо от выбора браузера, потому что они созданы с прогрессивным улучшением как основной принцип.
• Адаптивный - подходит для любого форм-фактора: настольный компьютер, мобильный телефон, планшет или формы, которые еще не появились.
• Независимость от подключения - сервисные работники позволяют работать в автономном режиме или в сетях низкого качества.
• App-like - Почувствуйте себя приложением для пользователя с взаимодействиями и навигацией в стиле приложения.
• Fresh - Всегда актуальна благодаря процессу обновления сервис-воркера.
• Safe - обслуживается через HTTPS, чтобы предотвратить отслеживание и гарантировать, что контент не был подделан.
• Discoverable - идентифицируются как «приложения» благодаря манифестам W3C [6] и области регистрации сервис-воркеров, позволяющей поисковым системам их находить.
• Повторное вовлечение - упростите повторное вовлечение с помощью таких функций, как push-уведомления.
• Installable - Позволяет пользователям «сохранять» приложения, которые они считают наиболее полезными, на главном экране без хлопот, связанных с магазином приложений.
• Linkable - Легко делится через URL и не требует сложной установки.

- Википедия

3.25 - Изучить дизайн JS API

3.26 - Изучение инструментов веб-разработчика браузера

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

Инструменты веб-разработки поставляются как надстройки браузера или встроенные функции в веб-браузеры. Самые популярные сегодня веб-браузеры, такие как Google Chrome, Firefox, Opera, Internet Explorer и Safari, имеют встроенные инструменты, помогающие веб-разработчикам, а многие дополнительные надстройки можно найти в соответствующих центрах загрузки подключаемых модулей.

Инструменты веб-разработки позволяют разработчикам работать с различными веб-технологиями, включая HTML, CSS, DOM, JavaScript и другие компоненты, которые обрабатываются веб-браузером.Из-за растущего спроса со стороны веб-браузеров на более популярные веб-браузеры были включены дополнительные функции, предназначенные для разработчиков.

- Википедия

Хотя большинство браузеров оснащены инструментами веб-разработчика, инструменты разработчика Chrome в настоящее время являются наиболее обсуждаемыми и широко используемыми.

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

Изучите инструменты веб-разработчика Chrome:

Chrome Web Developer Tools Документы:

3.27 - Изучение командной строки (она же CLI)

Интерфейс командной строки или интерпретатор командного языка (CLI), также известный как пользовательский интерфейс командной строки, консольный пользовательский интерфейс и символьный пользовательский интерфейс (CUI), представляет собой средство взаимодействия с компьютерной программой, в которой пользователь (или клиент) ) выдает команды программе в виде последовательных строк текста (командных строк).

- Википедия

Общее обучение:

Мастеринг:

3.28 - Изучение Node.js

Node.js - это кроссплатформенная среда выполнения с открытым исходным кодом для разработки серверных веб-приложений. Приложения Node.js написаны на JavaScript и могут запускаться в среде выполнения Node.js в OS X, Microsoft Windows, Linux, FreeBSD, NonStop, IBM AIX, IBM System z и IBM i.Его работа размещается и поддерживается фондом Node.js, совместным проектом Linux Foundation.

Node.js предоставляет архитектуру, управляемую событиями, и неблокирующий API ввода-вывода, предназначенные для оптимизации пропускной способности и масштабируемости приложения для веб-приложений в реальном времени. Он использует движок Google V8 JavaScript для выполнения кода, и большой процент базовых модулей написан на JavaScript. Node.js содержит встроенную библиотеку, позволяющую приложениям работать как веб-сервер без программного обеспечения, такого как Apache HTTP Server, Nginx или IIS.

- Википедия

Общее обучение:

3.29 - Модули обучения

Общее обучение:

Ссылки / Документы:

3.30 - Изучить загрузчики / сборщики модулей

Веб-пакет:

Накопительный пакет:

Посылка

3.31 - Изучить диспетчер пакетов

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

- Википедия

Общее обучение:

3.32 - Изучение управления версиями

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

- Википедия

Наиболее распространенным решением, используемым сегодня для контроля версий, является Git.Узнать его!

Общее обучение:

Мастеринг:

Ссылки / Документы:

3.33 - Изучите автоматизацию сборки и задач

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

- Википедия

Общее обучение:

Ссылки / Документы:

Gulp отличный.Однако вам может потребоваться только npm, запустить . Прежде чем переходить к дополнительной сложности в стеке вашего приложения, спросите себя, справится ли с этой задачей npm run . Если вам нужно больше, используйте Gulp.

Чтение:

3.34 - Изучите оптимизацию производительности сайта

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

- Википедия

Общее обучение:

3.35 - Обучение тестированию

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

- Википедия

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

- Википедия

Тестирование интеграции - Тестирование интеграции (иногда называемое интеграцией и тестированием, сокращенно I&T) - это этап тестирования программного обеспечения, на котором отдельные программные модули объединяются и тестируются как группа. Это происходит после модульного тестирования и перед проверочным тестированием. Интеграционное тестирование принимает в качестве входных модулей, которые прошли модульное тестирование, группирует их в более крупные агрегаты, применяет тесты, определенные в плане интеграционного тестирования, к этим агрегатам и предоставляет в качестве своих выходных данных интегрированную систему, готовую для системного тестирования.

- Википедия

Общее обучение:

3.36 - Изучите безголовые браузеры

Безголовый браузер - это веб-браузер без графического пользовательского интерфейса.

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

- Википедия

PhantomJS больше не поддерживается, вмешивается Headless Chrome.

3.37 - Изучение автономной разработки

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

Общее обучение:

3.38 - Изучите безопасность веб-сайтов / браузеров / приложений

3.39 - Изучение разработки на нескольких устройствах

Источник изображения: http://bradfrost.com/blog/post/this-is-the-web/

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

• Создание адаптивного веб-сайта / приложения для всех устройств.
• Создайте адаптивный / постоянно расширяемый веб-сайт / приложение для всех устройств.
• Создайте веб-сайт, веб-приложение, собственное приложение или гибридное собственное приложение для каждого отдельного устройства или группы устройств.
• Попытка модернизировать что-то, что вы уже построили, используя кусочки и детали из стратегий 1, 2 или 3.

Общее обучение:

10 типичных упражнений на собеседовании в формате HTML

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

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

1. Проверка разметки

Рассмотрим следующую разметку:

  <рисунок>
   <картинка>
      
      
   
   
  

Это действительно? Если нет, то можете объяснить, почему?

Ответ

В разметке используется элемент изображения, который является довольно новым дополнением к спецификации.Весь код действителен, за исключением последнего изображения, указанного в атрибуте srcset ; 320y не является допустимым значением. Если заменить y на w , оно становится действительным.

2. Основной

элемент

Вы можете объяснить определение основного элемента ? Какова его цель? Согласны ли две спецификации (WHATWG и W3C) по его определению?

Ответ

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

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

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

3. WAI-ARIA

Рассмотрим следующий фрагмент:

  <заголовок>
   
 Основной заголовок 
   

      
      
   


   
  На главную  
   
  Продукты  
   
  О компании  

<основной>
   <статья>
      
 Основной заголовок 
      
 Это содержание этого раздела