1. Гость, Нет времени набирать посты, чтобы открыть HIDE ? Теперь есть решение, станьте Членом Клуба!
  2. Новые покупки

    09.01.2017: Быстрый заказ для OC 2.x 1.7.3

    08.01.2017: Софт для накрутки Андроид инсталлов (установок)

    05.01.2017: Распродажа курсов Маматова "Мужской комплект"

    05.01.2017: Как обрести мощную эрекцию и здоровую простату, используя секреты китайских Императоров

    05.01.2017: Нашумевший курс про Же*нщину-плю*с

    05.01.2017: Тренер знаменитостей, диетолог, фитнес-модель Nike, Adidas...Книга о наборе мышечной массы

    05.01.2017: от 100$ в месяц на дорвеях Вконтакте

    03.01.2017: [Бизнес Молодость] Бизнес под ключ

    02.01.2017: [Udemy.com] Стать Суперучеником 2: Научитесь скоростному чтению и улучшению памяти

    02.01.2017: [Udemy.com] Рисование и Скетчинг для Начинающих

    02.01.2017: [Udemy.com] Twitter маркетинг в 2016 году: Получайте Новых Подписчиков Ежедневно

    02.01.2017: [Udemy.com] Instagram для художников

    02.01.2017: Практический видеокурс "Простатит - секретные материалы+бонус - запись вебинара

    02.01.2017: Техники эффективного обучения - Распродажа 95%

    02.01.2017: Медитация и осознанность. 10 минут в день, которые приведут ваши мысли в порядок

    02.01.2017: [Бизнес Молодость] Выбор ниши

    02.01.2017: Громов Андрей, курс "Адаптивный Мини Интернет Магазин с корзиной заказов и простой CRM"

    02.01.2017: Сборник из 8 онлайн курсов всего за 5 900 вместо 22 990

    02.01.2017: Джон Ассараф - Выиграй денежную игру[3]

    02.01.2017: Джон Ассараф - Выиграй денежную игру[2]

  3. Нужен организатор

    05.01.2017: Распродажа курсов Маматова "Мужской комплект"

    05.01.2017: Как обрести мощную эрекцию и здоровую простату, используя секреты китайских Императоров

    05.01.2017: Нашумевший курс про Же*нщину-плю*с

    05.01.2017: Тренер знаменитостей, диетолог, фитнес-модель Nike, Adidas...Книга о наборе мышечной массы

    05.01.2017: от 100$ в месяц на дорвеях Вконтакте

    03.01.2017: [Бизнес Молодость] Бизнес под ключ

    02.01.2017: [Udemy.com] Стать Суперучеником 2: Научитесь скоростному чтению и улучшению памяти

    02.01.2017: [Udemy.com] Рисование и Скетчинг для Начинающих

    02.01.2017: [Udemy.com] Twitter маркетинг в 2016 году: Получайте Новых Подписчиков Ежедневно

    02.01.2017: [Udemy.com] Instagram для художников

    02.01.2017: Практический видеокурс "Простатит - секретные материалы+бонус - запись вебинара

    02.01.2017: Техники эффективного обучения - Распродажа 95%

    02.01.2017: Медитация и осознанность. 10 минут в день, которые приведут ваши мысли в порядок

    02.01.2017: [Бизнес Молодость] Выбор ниши

    02.01.2017: Громов Андрей, курс "Адаптивный Мини Интернет Магазин с корзиной заказов и простой CRM"

    02.01.2017: Сборник из 8 онлайн курсов всего за 5 900 вместо 22 990

    02.01.2017: Джон Ассараф - Выиграй денежную игру[3]

    02.01.2017: Джон Ассараф - Выиграй денежную игру[2]

    02.01.2017: Джон Ассараф - Выиграй денежную игру[1]

    01.01.2017: Доступ к базе коммерческих фото Shutterstock

Как научиться верстать адаптивную страницу из psd-макета за 7 дней

Тема в разделе "Дизайн и Графика", создана пользователем allnulled, 23 фев 2016.

  1. allnulled

    allnulled Администраторы Команда форума Администраторы

    Регистрация:
    2 фев 2015
    Сообщения:
    16.936
    Симпатии:
    1.146
    HA3QH8E.jpg

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


    Ты уже сверстал пару страниц, но чувствуешь что твоих знаний недостаточно? Ты ищешь проверенные практикой приемы, но поиск в интернете дает лишь обрывки информации? Тогда этот воркшоп для тебя! «Ускоряй работу без потери качества!» — именно под таким девизом будет проходить воркшоп. За 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://getbootstrap.com.
      • CDN-сервисы, что это, зачем нужно и как с них подключать ресурсы.
      • Оптимизация и минификация нашего стилевого файла style.css. Как писать CSS-селекторы так, чтобы все работало максимально быстро.
      • Оптимизация и минификация HTML-страниц.
    • Графика и шрифты:
      • Оптимизация графики. JPG, PNG, SVG и кодирование в base64 — когда что лучше использовать?
      • Оптимизация шрифтов и практическое использование SVG.
    • Удаление лишних файлов.



    Продажник:


    Скачать:
     
  2. Загрузка...

    Похожие темы Форум Дата
    Как научиться петь, чтобы Вам аплодировали Разное 19 ноя 2016
    Как научиться петь, чтобы Вам аплодировали Саморазвитие и психология 27 окт 2016
    Как научиться рисовать самому Саморазвитие и психология 15 окт 2016
    VIP Возвращение. Как перестать прощать и научиться любить. Взгляд психотерапевта Саморазвитие и психология 10 окт 2016
    VIP Как перестать прощать и научиться любить. Взгляд психотерапевта Саморазвитие и психология 4 окт 2016

Пользователи, которые прочитали эту тему (Всего: 0)