Всем привет! На этом уроке вы дополните свои знания о сети Интернет, узнаете, кто такой разработчик веб- и мультимедийных приложений. Именно такое название профессии вы встретите у себя в трудовой книжке, если захотите сделать электронный мир удобнее и светлее.
Для успешного освоения материала рекомендуем вам изучить следующие понятия:
Программное обеспечение, функционирующее в пределах и под контролем веб-браузера
Программное обеспечение, использующее функции мультимедиа: аудио, видео и анимация
Объемы рынка Интернет-сервисов
Наш мир уже давно активно использует ресурсы глобальной сети Интернет. Задумывались ли вы, насколько большим он стал?
На графике можно легко проследить экспоненциальное увеличение количества сайтов за прошедшие годы. Только вдумайтесь — при таком темпе через пару лет на каждого жителя нашей планеты будет приходиться один сайт или сервис.
Изменение в сети за минуту
Все эти сервисы, сайты и веб-приложения необходимо обслуживать, обновлять, создавать новые взамен устаревшим. Это колоссальный рынок труда, на который не влияют место жительства, условия работы и даже эпидемии.
Множество различных специалистов в разных областях занимаются обслуживанием сети Интернет. Одними из таких специалистов являются веб-дизайнеры, веб-разработчики, веб-мастера, веб-программисты и т. д. Названий много, но суть одна — разработать в сети Интернет ресурс, выполняющий какую-либо функцию или задачу.
Эти направления, в свою очередь, делятся на специализированные. Вы можете самостоятельно изучить карту знаний для фронтенд и бэкенд
Дорожная карта. Как стать веб-разработчиком в 2020 году
В России есть профессиональный и образовательный стандарты, по которым ребята в техникумах и колледжах учатся на специальности 09.02.07 «Информационные системы и программирование» в течение 3−4 лет.
Мы с вами попробуем познакомиться с этой профессией всего за 9 уроков!
При этом затронем ВСЕ основные направления. Вы попробуете вместе с преподавателем сверстать свою первую страницу, написать свой первый код на языке JavaScript, PHP и многое другое.
Надеюсь, данный курс даст вам представление о том, что такое веб-разработка, и вы ступите на путь улучшения и развития цифрового мира. А сейчас давайте ответим на пару вопросов к этому уроку.
Для закрепления полученных знаний пройдите тест
Что не относится к основным направлением веб-разработки?
Выберите специальность, по которой ребята в техникумах и колледжах России учатся на профессию веб-разработчика.
10.03.01 «Информационная безопасность»
09.03.01 «Технологии разработки программного обеспечения»
09.02.03 «Программирование в компьютерных системах»
К сожалению, вы ответили неправильно
Вы отлично справились. Теперь можете ознакомиться с другими компетенциями
WorldSkills Juniors
Веб-дизайнер является динамичной, постоянно меняющейся профессией, сферой деятельности которой является создание и функционирования веб-сайтов.
Специалисты в данной области используют для создания веб-сайтов специальные программы и языки программирования и разметки, которые связывают ссылки на различные веб-страницы, другие веб-сайты, графические элементы, текст и фото в единый функциональный и удобный информационный продукт. Творческие навыки также важны. Компьютерные программы, заготовки и открытые электронные библиотеки используются в качестве технической базы. В своей работе разработчики сайтов обязаны обращать внимание на закон об авторском праве и этические вопросы.
Веб-дизайнер может работать не по найму или работать в агентстве веб-дизайна. Ожидается, что занятость специалистов в этой области будет расти быстрее, чем в среднем по всем профессиям. Спрос будет зависеть от растущей популярности мобильных устройств и расширения электронной коммерции.
Конкурсанты
Чи Кит Хон
Цзянь Е Хсу
Партнеры
Веб-дизайнер планирует и разрабатывает, тестирует веб-сайты, поддерживает их работоспособность, переносит на сторонние платформы, а также интегрирует с платформами социальных сетей. Веб-дизайнер — ключевая компетенция в мире, в котором социальные медиа начинают занимать лидирующие позиции в распространении информации.
Эта компетенция основывается на знании и опыте работы с веб-технологиями и кодами веб-сайтов, умении планировать пользовательский интерфейс, создавать удобный дизайн и администрировать сайты. Творческие способности также имеют важное значение; успех веб-сайта может зависеть от цветового решения, раскладки и графики отдельных страниц. Чтобы преуспеть, веб-дизайнеры должны в совершенстве знать авторское право и соблюдать кодекс деловой этики. Кроме того, все более актуальным в этой сфере становится понимание кибербезопасности. Хорошие коммуникативные навыки, помноженные на знание исследовательских методов и понимание целевой аудитории, рынков и тенденций, повысят удовлетворенность клиентов и уровень доверия к веб-дизайнеру.
Веб-дизайнер может работать самостоятельно или на агентство веб-дизайна. Ожидается, что занятость в этой сфере будет расти более высокими темпами, чем в среднем по другим профессиям. Спрос будет определяться растущей популярностью мобильных устройств и распространением электронной торговли.
Конкурсанты и результаты
Пранав Удайярк Нуталапати
И Чжи Линь
Интересные факты
Первый в мире сайт info.cern.ch появился в 1990 году. Его создатель, британский ученый Тим Бернерс-Ли, опубликовал на нём описание новой технологии.
В 1993 году выпустили первый графический браузер Mosaic, поддерживающий просмотр изображений. Теперь однообразный текст сайтов стали разбавлять яркими картинками.
Введение HTML 4.0 в 1997 году сделало Интернет интернациональным, установив универсальный набор символов для поддержки пользователей по всему миру.
В 2010 году американский дизайнер Итан Маркотт изобрел адаптивный дизайн. Он предложил использовать тот же контент, но в разных макетах, разработанных для разных размеров экранов.
Как проходит соревнование по компетенциям?
Конкурсанты получают конкурсное задание
Конкурсанты выполняют конкурсное задание и отправляют законченную/незаконченную работу к установленному сроку
Группа Экспертов оценивает конкурсные задания, выполненные Конкурсантами, в соответствии со стандартами WSI
На основе информационной системы выполняется подсчет результатов и генерируется список победителей
Победители награждаются на Церемонии закрытия
В этом уроке мы сверстаем страницу сайта визитки. Цель урока — показать, что такое верстка, а не научить верстке с нуля. Поехали!
Дерево HTML-элементов и текста
Обозначается открывающим и закрывающим тегом. Открывающий и закрывающий теги содержат имя тега
Основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке
DTD (document type definition, описание типа документа). Предназначен для указания типа текущего документа. Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях. Кроме того, имеется XHTML, похожий на HTML, но различающийся с ним по синтаксису
Определяет метатеги, которые используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных
Сообщает браузеру, каким образом должен отображаться тот или иной элемент страницы
Видимая часть окна браузера
Характеристика, которая будет применяться к элементу (в нашем примере это цвет)
Повторяющий блок CSS-кода, содержащий хотя бы один селектор и свойства
Элемент каскадной таблицы стилей CSS, указывает на элемент веб-страницы, к которому должны будут применяться стили
Язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно / растровой графики в формате XML
Способ расположения блоков на странице, позволяющий легко выравнивать элементы по горизонтали и вертикали, менять направление и порядок отображения элементов, растягивать блоки на всю высоту родителя или прибивать их к нижнему краю
Верстка — это расположение текста, заголовков, изображений и всего остального на странице. В процессе верстки используются специальные языки — HTML и CSS.
1. Открываем папку, где установлен OpenServer.
2. В папке Domains создаем папку Website.
3. Открываем созданную папку Website в VisualStudio Code.
4. Создаем файл index. html в корне.
Все теги внутри head не отображаются на странице, их цель помочь браузеру в работе с данными
Внутри тега могут быть какие-то параметры — они называются атрибутами
2. Указываем путь и кликаем с зажатым Ctrl на путь, чтобы открыть файл. Если этого файла нет, то студия предложит нам его создать.
Копирование шрифтов и картинок
2. Указываем имя шрифта, ссылку на сам шрифт и толщину шрифта. Сейчас мы указали 3 свойства: font-family, src и font-weight, а то, что находится справа через двоеточие — это значения этих свойств.
3. Дальше начинаем писать правила для определенных селекторов.
Правила — набор свойств, которые указаны внутри фигурных скобок. А селекторы — то, что указано до фигурных скобок — то, к чему эти правила будут применяться
4. Начнем с универсального селектора, который применяет правила ко всему на странице.
5. Затем для body обнуляем внешние отступы и указываем шрифт.
1. В html-файле создаем секцию для первого экрана, в ней будут контейнер и несколько блоков.
2. Первый будет содержать заголовок, а во втором будут 2 кнопки. Кнопкам сразу указываем классы.
Сейчас наша страница выглядит следующим образом.
Но это, пока нет стилей. Давайте напишем их.
1. Для контейнера укажем ширину, максимальную ширину.
2. Сделаем отступы слева и справа автоматическими.
3. Для секции зададим внутренние отступы сверху и снизу.
4. Для первого экрана установим высоту равную 100 высоты вьюпорта.
5. Сделаем блок flex’ом с вертикальным выравниванием по центру и обрезку с помощью эллипса.
6. Также эта секция будет иметь фон, поэтому укажем в качестве фона svg изображение, оно будет темное, поэтому цвет текста сделаем белым.
7. Теперь для заголовка укажем шрифт и его размер в 80 px и перейдем к кнопкам.
8. У кнопок будет внутренний отступ, граница и белый цвет, шрифт будет полужирный.
9. Укажем еще 2 класса для кнопки с фоном и без фона, но с границей.
Посмотрим, что получилось
Как видим, результат отличный. Остается добавить стрелку для прокрутки вниз.
1. После контейнера добавляем ссылку с картинкой, указываем путь до картинки и альтернативный текст.
2. Напишем стили. Это будет блок с абсолютной позицией, расположенный по центру с отступом снизу в 150 px.
Теперь первый экран готов.
Создаем еще одну секцию: с контейнером, заголовком 2-го уровня и двумя абзацами.
С другой стороны, повышение уровня гражданского сознания обеспечивает широкому кругу специалистов участие в формировании существующих финансовых и административных условий!
Соображения высшего порядка, а также постоянное информационно-техническое обеспечение нашей деятельности, в значительной степени обуславливает создание системы масштабного изменения ряда параметров.
Посмотрим, как это выглядит без стилей
Давайте все-таки добавим стилей.
1. Заголовку укажем размер и отступы.
2. Для абзацев назначим размер, межстрочный интервал и шрифт.
Как видите, результат стал куда лучше
1. Создаем еще одну секцию: с контейнером и заголовком 2-го уровня.
2. После заголовка создаем блок с классом gallery, каждая картинка будет находиться в блоке с классом img-wrapper.
3. Копируем блоки с картинкой, чтобы у нас было 9 штук.
Сейчас это выглядит как просто 9 картинок друг под другом
4. Добавим стилей. Галерея будет flex с flex-wrap, и элементы в ней равномерно распределены.
5. Для img-wrapper задаем размеры, отступы, overflow, курсор и flex с выравниванием по центру.
6. Для самой картинки устанавливаем только свойство заполнения.
Теперь это уже больше похоже на галерею
1. Создаем еще одну секцию, с контейнером. У этой секции будет фон как и у первой, поэтому используем уже имеющийся класс.
2. Делаем блок с классом flex, а в нем два блока шириной 60 и 40 процентов. У первого блока сделаем еще отступ справа.
3. В первый блок помещаем заголовок и небольшой абзац текста.
4. Во втором блоке делаем форму, которая будет состоять из текстового поля с именем, email-адреса, поля для сообщения и кнопки.
Посмотрим, как это выглядит без стилей. Не очень
1. Сделаем отдельный класс для flex и для ширины в 60 и 40 процентов.
2. Также нам понадобится класс с правым отступом в 4 rem.
3. Форма будет вертикальным флексом.
Как видите, поля ввода без дополнительных стилей всегда выглядят ужасно, поэтому сделаем с ними следующее.
1. Для input и textarea сделаем внутренний отступ, установим размер шрифта и отступ снизу, а границу уберем.
2. Для того же input и textarea напишем еще одно правило, когда они будут в фокусе, чтобы у них не было светящейся границы.
Теперь форма выглядит уже куда лучше
Остается сделать только подвал сайта.
2. Добавим немного стилей — небольшой отступ и выравнивание текста по центру.
Вот такой сайт у нас получился
Теперь вы знаете, что такое верстка и стили, на что они влияют, и как происходит процесс. Вы можете самостоятельно повторить этот урок и попробовать сделать что-то по своему усмотрению. Также советую выучить теги и свойства стилей, ведь чем больше вы их знаете, тем больше можете сверстать. Давайте проверим, как вы запомнили этот урок!
Как расшифровывается HTML?
HeadText Modulation Language
HyperText Markup Language
HeadingText Mode Language
Указывает на формат файла
Указывает браузеру, что эта страница главнее остальных
Где следует располагать тег title?
С помощью какого CSS-правила можно подключить шрифты к странице?
Какой тег позволяет вставить картинку в HTML-документ?
