Скрыть объявление
Гость отличная новость! Мы открыли доступ к ранее скрытому контенту.

Вам доступно более 44 000 видео уроков, книг и программ без VIP статуса. Более подробно ЗДЕСЬ.

Скачать КАК НАУЧИТЬСЯ ВЕРСТАТЬ АДАПТИВНУЮ СТРАНИЦУ ИЗ PSD-МАКЕТА ЗА 7 ДНЕЙ

Тема в разделе "Дизайн и графика", создана пользователем Солнышко, 7 мар 2016.

0/5, Голосов: 0

  1. Солнышко

    Солнышко Команда форума

    Сообщения:
    19.229
    Симпатии:
    33.772
    [​IMG]

    Описание курса:


    Ты уже сверстал пару страниц, но чувствуешь что твоих знаний недостаточно? Ты ищешь проверенные практикой приемы, но поиск в интернете дает лишь обрывки информации? Тогда этот воркшоп для тебя! «Ускоряй работу без потери качества!» — именно под таким девизом будет проходить воркшоп. За 7 уроков ты получишь представление о том, как верстается современная адаптивная HTML-страница из графического макета в формате PSD. Мы разберем, как это делать быстро и эффективно.



    День 1

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

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

    • - На какой операционной системе работать?
      - Разнообразие веб-браузеров.
      - Краткий обзор сервиса BrowserStack.com для кросс-браузерного тестирования и немного про виртуальные машины.
      - Коротко о графических редакторах.
      - Коротко о редакторах кода.
      - Браузер Google Chrome и установка плагинов. Обзор плагинов PerfectPixel и HTML5 Outline.
      - Другие браузеры и их отличия.
      - Обзор LiveReload 2 и демонстрация силы командной строки и автоматизации работы.
      - Разбираемся с «Инструментами разработчика» в Google Chrome (правка DOM-дерева и CSS-стилей, доступ к ресурсам страницы, эмуляция различных устройств для тестирования адаптивности и др.)
      - Какую версию Photoshop поставить для воркшопа?
      - Редактор кода Sublime Text 3, как устанавливать плагины и как максимально ускорить свою работу в ST.
      - Список плагинов, которые нам понадобятся для работы в воркшопе.
      - Методология познания. Как учиться веб-разработке?
    День 2



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

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

    • - Введение в проблематику вопроса.
      - Общие аспекты анализа макета.
      - Технические аспекты анализа макета.
      - Пример плохого PSD-макета.
      - Пример хорошего PSD-макета.
      - Чем еще отличается хороший макет от плохого?
      - Анализ PSD-макета Jetro, который верстается в процессе воркшопа.
      - Немного об особенностях работы на фрилансе.
    День 3

    Работа с макетом в среде Adobe Photoshop и извлечение графики для будущей веб-страницы.

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

    • - Типы графических форматов. Растровые изображения.
      - Типы графических форматов. Векторные изображения.
      - Немного о формате SVG.
      - Способы перевода растрового изображения в векторное (трассировка).
      - Извлечение графики из макета Jetro. Старый способ.
      - Извлечение графики из макета Jetro. Новый способ.
    День 4

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

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

    • - Введение и немного истории: от табличной верстки к блочной.
      - Семантика HTML и алгоритм HTML Outline.
      - Старый алгоритм: HTML 4 Outline.
      - Новый алгоритм: HTML5 Outline.
      - Подключение Bootstrap и верстка HTML-каркаса макета Jetro.
    День 5

    Настройка фреймворка Bootstrap и стилизация страницы через CSS. В нашей работе мы применим препроцессор Less. Если до этого ты с ним не сталкивался, то будешь поражён насколько это ускоряет работу!

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

    • - Обзор возможностей официального сайта Bootstrap.
      - Разбираем сборщик Bootstrap’a.
      - Настройка, компиляция и замена стандартного стилевого файла Bootstrap на файл с настроенными переменными под макет Jetro. Брейкпоинты (breakpoints), медиа-запросы (media queries) и ширина макета.
      - Начинаем стилизацию. Настройка Less и LiveReload.
      - Переменные в Less. Задаем цветовые переменные для макета.
      - Кросс-браузерное подключение шрифтов и их конвертация через сервис FontSquirrel.com.
      - Пишем общие стили.
      - Стилизация навигационной панели с логотипом.
      - Стилизация слайдера.
    День 6

    Продолжаем стилизацию нашей страницы и подгоняем все детали.

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

    • - Что такое Flexbox’ы и как с ними работать.
      - Продолжаем стилизацию макета Jetro:
      • Секция INTRO ARTICLES.
        - Секция RECENT WORKS.
        - Секция FOOTER.
        - Дорабатываем слайдер.
    День 7

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

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

    • - Адаптивность и отзывчивость. Что к чему?
      - Прикручиваем адаптивность к макету Jetro:
      • Секции LOGO и NAVBAR.
        - Секция SLIDER.
        - Секция INTRO ARTICLES.
        - Секция RECENT WORKS.
        - Секция FOOTER.

      - ЗАКОНЧЕННЫЙ ВИД МАКЕТА JETRO!
    День 8

    Будут рассмотрены методы максимальной оптимизации веб-страницы.

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

    • - Анализ скорости загрузки через Инструменты Разработчика в Google Chrome:
      • Детальный обзор вкладки Network и её возможностей.
        - Последовательность загрузки файлов веб-страницы, как правильно подключать CSS, JS и остальные ресурсы.
        - Как извлекать информацию из временной диаграммы загрузки (Timeline) Инструментов Разработчика в Chrome.
        - Устранение ошибок 404 (если ресурс не найден).

      - Уменьшение размеров HTML,CSS и JS-файлов:
      • Что такое минификация и офускация.
        - Убираем все лишнее из файлов Bootstrap с помощью сборщика на официальном сайте http://nullrefer.com/?http://getbootstrap.com/.
        - CDN-сервисы, что это, зачем нужно и как с них подключать ресурсы.
        - Оптимизация и минификация нашего стилевого файла style.css. Как писать CSS-селекторы так, чтобы все работало максимально быстро.
        - Оптимизация и минификация HTML-страниц.

      - Графика и шрифты:
      • Оптимизация графики. JPG, PNG, SVG и кодирование в base64 — когда что лучше использовать?
        - Оптимизация шрифтов и практическое использование SVG.

      - Удаление лишних файлов.
    Скрытый текст:

      Для просмотра скрытого текста Вы должны зарегистрироваться и нажать кнопку "Мне нравится"

     
    Отзыв После просмотра материала "КАК НАУЧИТЬСЯ ВЕРСТАТЬ АДАПТИВНУЮ СТРАНИЦУ ИЗ PSD-МАКЕТА ЗА 7 ДНЕЙ" оставьте свою оценку и отзыв в данной теме
    Mashinque нравится это.
Оценить эту тему:
/5,
Поделиться: