Вход / Регистрация
Вход
Урок 0.1: Вступительный урок: веб-разработчик изнутри
План:
- Кто занимается созданием сайта, какие профессии и какова их роль
- Какие сайты по типу технического и графического решений можно выделить
- Основная терминология при создании сайта
Дополнение к уроку:
Изучая структуру и другие термины важно знать не только русские слова, но так и английские (их перевод). Русские позволяют нам ориентироваться в незнакомой теме, а английские помогут при написании кода и общении с другими программистами. Хоть все веб-разработчики одинаково знают как русские, так и английские названия, мы же когда приступим к написанию кода будем использовать классический формат именования, а именно английский. Пример:
Вверху я разместил вполне рабочий код верстки, содержание мы пишем на нужном нам языке, в данном случае сайт для русских посетителей. А вот код мы всё равно обязаны писать на английском.
- Шапка (header)
- Центральная часть (main)
- Контент, содержание страницы (content)
- Боковая панель (sidebar), второстепенная панель (aside)
- Подвал (footer)
- Навигация, меню (navigation, nav, menu)
- Логотип (logo)
- Заголовок (title)
- Иконка сайта (favicon, favicon.ico)
- Всплывающее окно, модальное окно (modal window, modal box, popup)
- Форма (form)
- Задний фон под текстом или картинкой (background, в виде картинки - background image)
- Прокрутка экрана, скроллинг (scroll)
- Пагинатор, постраничная навигация (pagination)
- Шрифт, текст (Font), и его вариации: жирный, курсив, цвет и т.д.
Сайт - структурированный набор страниц.
Front-end - клиентская сторона разработки (верстка и программирование для браузера: html, css, javascript).
Back-end - серверная сторона разработки (php, mysql, настройка сервера админом).
Дизайн, UI дизайн (пользовательский интерфейс, User Interface design) – понятие, включающее в себя определённый набор графически оформленных элементов. По сути UI отвечает за то, как выглядит сайт (приложение).
Usability (юзабилити) – это то, насколько просто пользователям использовать ваш сайт (приложение) для достижения определённых целей.
UX дизайн (пользовательский опыт) – понятие включающее в себя то, как продукт функционирует, и, какие эмоции вызывает и пользователей.
Оптимизация (optimization) - работа над улучшением. Поисковая оптимизация - SEO (search engine optimization). Не путайте с СЕО, кто является "главным исполнительным директором" и не относится к разработке сайтов. Не смотря на то, что "сео" писать неграмотно и многие хотят видеть именно написание на английском, всё равно используют слово сеошник по отношению к SEO специалисту.
URI (URL) - путь к странице. Пример: https://school-php.com/courses
Валидный (Valid) - правильный, валидная верстка - верстка без ошибок. Validator - проверяет наличие ошибок.
Карьерная лестница: Junior (юнион), Middle (так же называют engineer, обычный программист), Senior (сеньор - крутой программист, чуть ли не хакер), Team-leader (управляющий проектов, лидер).
И другие очевидные слова не требующие пояснений: Разработка (development), разработчик (developer), программист (Programmer), Веб-мастер (web-master), Дизайнер (Designer), Сервер (server), Хостинг (hosting), Домен (domain), поддомен (subdomain), Сайт (site), Страница сайта (page).
<head>
<title>Текст пишем на любом языке, а код - на английском</title>
</head>
<nav>Сокращённо от слова Navigation, навигация сайта</nav>
<main>Центральная часть сайта</main>
<footer>Копирайты сайта: 2010-2020 года.</footer>Вверху я разместил вполне рабочий код верстки, содержание мы пишем на нужном нам языке, в данном случае сайт для русских посетителей. А вот код мы всё равно обязаны писать на английском.
Структура сайта
- Шапка (header)
- Центральная часть (main)
- Контент, содержание страницы (content)
- Боковая панель (sidebar), второстепенная панель (aside)
- Подвал (footer)
- Навигация, меню (navigation, nav, menu)
Вспомогательные элементы
- Логотип (logo)
- Заголовок (title)
- Иконка сайта (favicon, favicon.ico)
- Всплывающее окно, модальное окно (modal window, modal box, popup)
- Форма (form)
- Задний фон под текстом или картинкой (background, в виде картинки - background image)
- Прокрутка экрана, скроллинг (scroll)
- Пагинатор, постраничная навигация (pagination)
- Шрифт, текст (Font), и его вариации: жирный, курсив, цвет и т.д.
Терминология веб-мастера
Сайт - структурированный набор страниц.
Front-end - клиентская сторона разработки (верстка и программирование для браузера: html, css, javascript).
Back-end - серверная сторона разработки (php, mysql, настройка сервера админом).
Дизайн, UI дизайн (пользовательский интерфейс, User Interface design) – понятие, включающее в себя определённый набор графически оформленных элементов. По сути UI отвечает за то, как выглядит сайт (приложение).
Usability (юзабилити) – это то, насколько просто пользователям использовать ваш сайт (приложение) для достижения определённых целей.
UX дизайн (пользовательский опыт) – понятие включающее в себя то, как продукт функционирует, и, какие эмоции вызывает и пользователей.
Оптимизация (optimization) - работа над улучшением. Поисковая оптимизация - SEO (search engine optimization). Не путайте с СЕО, кто является "главным исполнительным директором" и не относится к разработке сайтов. Не смотря на то, что "сео" писать неграмотно и многие хотят видеть именно написание на английском, всё равно используют слово сеошник по отношению к SEO специалисту.
URI (URL) - путь к странице. Пример: https://school-php.com/courses
Валидный (Valid) - правильный, валидная верстка - верстка без ошибок. Validator - проверяет наличие ошибок.
Карьерная лестница: Junior (юнион), Middle (так же называют engineer, обычный программист), Senior (сеньор - крутой программист, чуть ли не хакер), Team-leader (управляющий проектов, лидер).
И другие очевидные слова не требующие пояснений: Разработка (development), разработчик (developer), программист (Programmer), Веб-мастер (web-master), Дизайнер (Designer), Сервер (server), Хостинг (hosting), Домен (domain), поддомен (subdomain), Сайт (site), Страница сайта (page).
Под каждым уроком есть 10 тестов, которые помогут Вам закрепить пройденный материал.
Один из тестов будет развивать Вашу логику и интеллект!
Чтобы получить доступ к тестам - авторизируйтесь!
Один из тестов будет развивать Вашу логику и интеллект!
Чтобы получить доступ к тестам - авторизируйтесь!
|
|