Майстер веб-дизайну

360 годин (6 місяців)

Зміст цієї програми є орієнтовним, і може змінюватися з причин оновлення або зміни вмісту.

мети

Веб-дизайн, як відомо, є однією з найбільш затребуваних професій у світі. І це те, що будь-якій компанії, в якій ви збираєтесь працювати, або з якою ви збираєтеся розпочати роботу, знадобиться веб-сторінка, щоб показати свою пропозицію послуг чи продуктів. Саме тут стає важливою робота людини, яка опановує знання світу веб-дизайну та розробки. У цьому майстрі, який складається з двох модулів, студент вивчить основи найбільш широко використовуваних мов програмування у світі (HTML5 та CSS3), а також про найбільш використовуваний сьогодні контент-менеджер Wordpress.

У першому модулі ми будемо працювати на основі програмування, зокрема з мовами HTML5 та CSS3, які означають те, що ми могли б назвати скелетом кожного веб-сайту. Правильне навчання цими мовами дозволить студенту зіткнутися з будь-яким типом проекту з міцною основою. Ми працюємо над структурою сайтів та правильним способом упорядкування інформації для користувача, щоб навігація була легкою, інтуїтивно зрозумілою та привабливою. Для досягнення бажаної естетики працює вставка мультимедійного контенту у всіх його форматах (відео, звуки, зображення), а також адаптація веб-сайтів для всіх пристроїв, з яких сьогодні доступ до Інтернету. Це те, що ми називаємо веб-сайтом з чуйним або адаптивним дизайном, який ідеально адаптується до будь-якого розміру пристрою та екрану. В останній частині першого модуля студент знайомиться з використанням простих плагінів з JavaScript / jQuery, з реальними практичними прикладами.

У другому магістерському модулі студент навчається керувати контентом за допомогою WordPress, потужної CMS з відкритим кодом, яка сьогодні використовується нескінченною кількістю веб-сторінок завдяки інтуїтивно зрозумілому дизайну для адміністратора та широким можливостям для користувача. Буде проведена робота по створенню та встановленню тем, правильному налаштуванню платформи та встановленню утилітних плагінів, розробці сайтів з пустих тем (а не з шаблонами) тощо, які сприяють підвищенню функціональності сайтів і перетворити будь-який веб-сайт, який ви можете собі уявити, у реальність.

інформація

• Простий текстовий редактор, що спеціалізується на веб: Dreamweaver / Sublime / Notepad ++ / Komodo Edit / Brackets
• HTML5 / CSS3
• Моделювання першої індексації. Завантажувач
• SEO веб-позиціонування. Доступність та зручність використання
• JavaScript
• jQuery
• Веб-дизайн WordPress
• Веб-концептуалізація та ескіз
• Котирування та веб-планування
• Веб-розробка та оптимізація в WordPress

тривалість

360 годин всього

• Особисто або в Інтернеті
• 280 годин занять
• З понеділка по четвер (+ деяка п'ятниця)
• Кінцеві проекти за 80 годин

Розклад

Вранці

• 09.00 - 12.00 год
• 12.00 - 15.00 год

Полудень

• 16.00 - 19.00 год
• 19.00 - 22.00 год

Офіційна

• Наша школа є одним із п’яти авторизованих навчальних центрів Adobe в Іспанії . Цей факт свідчить про те, що CEI виконав усі вимоги, які вимагає Adobe, а також є гарантією якості для всіх наших студентів.
• CEI - це уповноважений навчальний центр Apple . Таким чином, наші студенти зможуть отримати сертифікат Apple Professional і просунути свою кар’єру в галузі дизайну та інформаційних технологій, бізнес-середовищ та B2B ринків.
• IBM нам довіряє, і тому вони нагородили знаком IBM Education Partner . Ця печатка нагороджує школи, які підтримують та просувають якісне навчання.
• Наша школа є консолідованою як опорний навчальний центр Maxon в Іспанії, і ми стали першою школою в Європі, яка стала постачальником навчання Maxon для R18 .

Модуль веб-дизайну з HTML5, CSS3 та Javascript

01 - Веб-дизайн, HTML5 та CSS3

Ознайомлення з використанням комп'ютерної техніки

Операційні системи:

• Windows
• Мак
• Linux

Установка та управління програмним забезпеченням:

• Браузери
• Текстові редактори

Файлова система та папки

• Створення файлів і папок
• Організація веб-проектів
• Абсолютні, відносні та URL-адреси

Веб-перегляд

Принципи управління мережею

Архітектура клієнт-сервер

Сервери та протоколи

• SSL сертифікати
• HTTP / HTTPS
• FTP / SFTP / FTPS

Команда клієнтів

Вступ до маршрутизаторів та комутаторів

DNS (домени та IP-адреси)

• Публічний IP
• Локальний IP
• Доменні імена

Хостинг, житло та CPD

Основні принципи створення статичних веб-сайтів

• Використовувані мови (HTML5 та CSS3)
• Потік виконання коду
• Візуальна структура веб-сайту

Принципи зручності використання та доступності

Прототипування веб-сайту (UX / UI)

• Інтерфейс користувача (Marvel)
• Досвід користувача (InVision)

HTML5

• Теги та атрибути
• Семантика та вживання
• Стандарт і структура документа HTML5
• Коментарі
• Абзаци, заголовки та текстові формати
• Мультимедіа (зображення, аудіо та відео)
• Посилання та кнопки
• Списки
• Таблиці
• Форми
• iFrames
• Метатеги
• Фавіком

CSS3

Посилання CSS

Селектори та псевдоселектори

Атрибути

• Кольори
• Гроші
• Формат та трансформація текстів
• Висота, широка
• Краї
• Поля
• Наповнення
• Позиції
• вирівнювання
• Затінені та градієнти
• Непрозорість
• Трансформації
• Фільтри

Псевдокласи (активні, наведення, перевірені, перша дитина, остання дитина, n-я дитина)

Псевдоелементи (після, перед)

Імпорт та реалізація шрифту (медіа та шрифт)

Імпорт та реалізація значків (шрифти та SVG)

Змінні CSS

CSS-анімації (ключові кадри)

Моделювання першої індексації

• Загальні споруди (поплавці)
• Прості структури (Flexbox)
• Складні структури (CSS Grid)

Каркаси та API

• Завантаження 4
• Матеріалізувати
• Дизайн матеріалу

інтернет

• Створіть домен
• Створення веб-хостингу
• Підключення та завантаження веб-сайту на сервер

SEO

• Пов’язати Інтернет з консоллю пошуку Google
• Канонічна реалізація посилань

02 - Веб-розробка (Front-End)

JavaScript

• Ознайомлення з переднім програмуванням
• JavaScript. Загальний синтаксис
• Включити JavaScript в документи HTML
• JavaScript у вкладеннях
• JavaScript всередині HTML-коду
• JavaScript. Змінні та оператори
• Локальні та глобальні змінні
• Числові змінні
• Методи чисельних змінних
• Оператори призначення
• Оператори збільшення та скорочення
• Математичні оператори
• Текстові рядки (рядки)
• Методи для текстових рядків
• Не визначені змінні
• Змінні NULL
• Змінні NaN
• Логічні оператори в JavaScript
• Реляційні оператори

jQuery

• Вступ до Jquery
• Етапи використання jQuery
• Перший сценарій з jQuery
• Основи JQuery: Додавання та видалення класів CSS
• Основи JQuery: показувати та приховувати елементи сторінки
• Основи JQuery: Швидкі ефекти з jQuery
• Основи JQuery: зворотний виклик функції jQuery
• Основи JQuery: Використання Basic Ajax з jQuery
• Основи JQuery: Ajax jQuery з повідомленням про завантаження