1. Новые покупки Показать еще

    25.04.2017: Мозг руководство пользователя (Инесса Власова)

    25.04.2017: Искусство управления миром (Бронислав Виногродский)

    25.04.2017: Русская стилистика (А. В. Флоря)

    25.04.2017: Как написать сценарий успешного сериала (Александр Молчанов)

    25.04.2017: Твоя вторая жизнь, или Шанс все изменить (Рафаэлла Джордано)

  2. Гость, если у Вас на каком либо сайте есть аккаунт с повышенным статусом, то и у нас вы можете получить соответствующий статус. Подробнее читайте здесь https://www.skladchik.biz/threads/83942/
    Скрыть объявление
  3. Нужен организатор Показать еще

    25.04.2017: Базовый курс "Молодость лица" (Наталья Наконечная)

    25.04.2017: Бельевой комплект с кружевом в стиле "будуар" (Альбинa Скрипкa)

    25.04.2017: Скульптура, часть первая – Голова

    25.04.2017: [Троелсен] Язык программирования C# 6.0 и платформа .NET 4.6...

    23.04.2017: Библиотека Инфотоваров

  4. Сбор взносов Показать еще

    23.04.2017: Матрица партнерских продаж (Евгений Вергус)

    22.04.2017: Быстрая анимация в After Effects (Игорь Лохман)

    18.04.2017: Ревитоника. Привычки, которые омолаживают, и ежедневные ошибки, которые нас старят

    14.04.2017: Обработка фото – нежные тона

    14.04.2017: [GeniusMarketing] Новые тактики интернет-продвижения (Олесь Тимофеев)

Куплено [PSD2HTML] Воркшоп "Как научиться верстать адаптивную страницу из PSD-макета за 7 дней"

Тема в разделе "Курсы по программированию", создана пользователем Менеджер, 18 июл 2015.

Цена:
1790р.
Взнос:
195р.

Основной список:

1. Злата
    Тип: Стандартная складчина
    Участников: 1/10
    1. 18 июл 2015
      #1
      Менеджер

      Менеджер Организатор Организатор

      [PSD2HTML] Воркшоп "Как научиться верстать адаптивную страницу из PSD-макета за 7 дней"



      Ты уже сверстал пару страниц, но чувствуешь что твоих знаний недостаточно? Ты ищешь проверенные практикой приемы, но поиск в интернете дает лишь обрывки информации? Тогда этот воркшоп для тебя!

      «Ускоряй работу без потери качества!» - именно под таким девизом будет проходить воркшоп.

      За 7 уроков ты получишь представление о том, как верстается современная адаптивная HTML-страница из графического макета в формате PSD. Мы разберем, как это делать быстро и эффективно.


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

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


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

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

      Краткое содержание:
      • Типы графических форматов. Растровые изображения.
      • Типы графических форматов. Векторные изображения.
      • Немного о формате SVG.
      • Способы перевода растрового изображения в векторное (трассировка).
      • Извлечение графики из макета Jetro. Старый способ.
      • Извлечение графики из макета Jetro. Новый способ.
      Подготовительные действия и начало верстки HTML-каркаса. Мы будем использовать популярный фреймворк Bootstrap. Многие хотели бы узнать как его применить на практике, чем мы и займемся с тобой на реальном примере.

      Краткое содержание:
      • Введение и немного истории: от табличной верстки к блочной.
      • Семантика HTML и алгоритм HTML Outline.
      • Старый алгоритм: HTML 4 Outline.
      • Новый алгоритм: HTML5 Outline.
      • Подключение Bootstrap и верстка HTML-каркаса макета Jetro.
      Настройка фреймворка Bootstrap и стилизация страницы через CSS. В нашей работе мы применим препроцессор Less. Если до этого ты с ним не сталкивался, то будешь поражён насколько это ускоряет работу!

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

      Краткое содержание:
      • Что такое Flexbox’ы и как с ними работать.
      • Продолжаем стилизацию макета Jetro:
        • Секция INTRO ARTICLES.
        • Секция RECENT WORKS.
        • Секция FOOTER.
        • Дорабатываем слайдер.
      На заключительном этапе, мы сделаем веб-страницу адаптивной, то есть хорошо выглядящей на различных устройствах. Попутно будут рассмотрены сопутствующие техники и подходы.

      Краткое содержание:
      • Адаптивность и отзывчивость. Что к чему?
      • Прикручиваем адаптивность к макету Jetro:
        • Секции LOGO и NAVBAR.
        • Секция SLIDER.
        • Секция INTRO ARTICLES.
        • Секция RECENT WORKS.
        • Секция FOOTER.
      • ЗАКОНЧЕННЫЙ ВИД МАКЕТА JETRO!
      (только для VIP)
      Будут рассмотрены методы максимальной оптимизации веб-страницы.

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

          Скрытый текст. Доступен только зарегистрированным пользователям.

          [/URL].
        • CDN-сервисы, что это, зачем нужно и как с них подключать ресурсы.
        • Оптимизация и минификация нашего стилевого файла style.css. Как писать CSS-селекторы так, чтобы все работало максимально быстро.
        • Оптимизация и минификация HTML-страниц.
      • Графика и шрифты:
        • Оптимизация графики. JPG, PNG, SVG и кодирование в base64 - когда что лучше использовать?
        • Оптимизация шрифтов и практическое использование SVG.
      • Удаление лишних файлов.
       
    2. Загрузка...

      Похожие складчины
      1. Злата
        Открыто

        Фестиваль воркшопов Moscow Photofest

        Злата, 28 фев 2017, в разделе: Курсы по фото и видео
      2. hp4s
      3. Менеджер
        Открыто

        Воркшоп по страницам в инфомаркетинге

        Менеджер, 10 сен 2016, в разделе: Курсы по бизнесу
      4. Менеджер
        Открыто

        По приглашению - Воркшоп по партнеркам

        Менеджер, 27 июл 2016, в разделе: Курсы по SEO и SMM
      5. Менеджер
        Открыто

        Артур Будовский — Воркшоп для начинающих...

        Менеджер, 19 июл 2016, в разделе: Курсы по бизнесу
      6. Менеджер
        Открыто

        Воркшоп по созданию продающего оффера

        Менеджер, 8 июл 2016, в разделе: Курсы по бизнесу
      7. Менеджер
        Открыто

        (Повтор 6) [MZED] - Воркшоп по фотографии с Jerry Ghionis:...

        Менеджер, 29 июн 2016, в разделе: Переводы курсов