Перейти к содержимому


Конкурс "Лучший отзовик"
× Быстрый вопрос
Пользователь месяца
ShowPrint ShowPrint 1-й за Март
Очков активности: 1 152 1 тема, 61 сообщение, 12 баллов репутации
Сайт: ShowPrint.ru
ТОП самых активных за этот месяц
  • Фотография Андрей WPMasterKZ
    #1

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 810 Вне конкурса за определение пользователя месяца

  • Фотография Vmir
    #2

    Vmir
    Очков активности: 580.5 3 темы, 34 сообщения, 9 баллов репутации

  • Фотография OlgaGetman
    #3

    OlgaGetman
    Очков активности: 405 Вне конкурса за определение пользователя месяца

  • Фотография Mandarin
    #4

    Mandarin
    Очков активности: 240 7 тем, 19 сообщений, 4 балла репутации

  • Фотография ShowPrint
    #5

    ShowPrint (ShowPrint.ru)
    Очков активности: 204 Вне конкурса за определение пользователя месяца

  • Фотография maxnik
    #6

    maxnik (konovalovpavel.ru)
    Очков активности: 75 1 тема, 22 сообщения, 2 балла репутации

  • Фотография pozitron123
    #7

    pozitron123
    Очков активности: 72 3 темы, 7 сообщений, 3 балла репутации

  • Фотография Megoydagi
    #8

    Megoydagi
    Очков активности: 63 1 тема, 18 сообщений, 2 балла репутации

  • Фотография re-search
    #9

    re-search
    Очков активности: 49.5 7 тем, 12 сообщений, 1 балл репутации

  • Фотография Strazh
    #10

    Strazh
    Очков активности: 37.5 1 тема, 22 сообщения, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 20.04.2019
  • Яндекс выдача: 18.04.2019
Топ 5 участников по репутации


Просьба навести критику на адаптированность страницы (стр. 2)

#21 master-vek

master-vek
    Topic Starter
  • Пользователь
  • 257 сообщений
  • Репутация: 13
0

Отправлено 11 Январь 2018 - 21:32

возможно станет понятнее

 

Да, тут разгуляться есть где, только время подавай.  Можно подымать свой уровень до необходимого.  Спасибо за ссылку.


  • 0

#22 fedornabilkin

fedornabilkin
  • Модератор
  • 1 152 сообщений
  • Репутация: 197

Отправлено 11 Январь 2018 - 22:13

Что надо знать, что бы на заказ выполнять только вёрстку страниц без программирования?

На самом деле сложно ответить на такой вопрос. Потому что для верстки тоже нужен опыт и знания технологий. Заказчик любит скорость (технологии) и качество (опыт).

 

Опыт нужен для:

1. Надо владеть фотошопом на уровне нарезки макета.

2. Основы HTML + CSS, без них как ни крути, не обойтись.

 

Далее всяческие прибамбасы для ускорения процесса верстки:

1. Минимум два монитора (лучше три). На одном мониторе редактор кода, на втором браузер, на третьем макет.

2. Необходимо знать и понимать основы препроцессоров LESS, SASS (не помню почему, но рекомендую SASS).

3. Сборщики gulp, grunt и тому подобное.

4. До кучи livereload. Это когда на одном мониторе пишешь код, а на втором в браузере видишь результат работы в реальном времени (не надо перезагружать страницу).

5. HTML-шаблонизатор pug (бывший Jade). Чумовая экономия времени, низкий порог вхождения, быстрое привыкание. Для верстки незаменимый помощник.

 

Пишем

.content 

Pug генерирует

<div class="content"></div>

Думаю преимущества видны без объяснений.

 

В общем исключительно для верстки необходима связка gulp+pug+sass+livereload. Все это работает под node.js и выглядит следующим образом (напишу образно, потому что тонкости надо гуглить).

 

Ставим node.js, устанавливаем необходимые пакеты с помощью npm (это не сложно, бояться не надо). Создаем проект и в нем две папки:

1. src - исходные файлы, которые версткой не назовешь. Из этих файлов сборщик gulp будет собирать проект

2. dest - сюда сборщик будет собирать проект.

3. В корне или в src создаем файл gulpfile.js с инструкциями сборки приблизительно (данный сценарий написан на TypeScript):

# подключили нужные пакеты
gulp = require 'gulp'
connect = require 'gulp-connect'
jade = require 'gulp-jade'
stylus = require 'gulp-stylus'
concat = require 'gulp-concat'
# создали сервер на 8000 порту
gulp.task 'connect', ->
    connect.server
        port: 8000
        livereload: on
        root: '../'
# задача для сборки шаблонов jade
gulp.task 'jade', ->
    gulp.src ['jade/**/*.jade', '!jade/**/_*.jade']
    #.pipe do jade
    .pipe jade {pretty: true}
    .pipe gulp.dest '../templates'
    .pipe do connect.reload
# задача для сборки файлов стилей (написаны с помощью stylus)
gulp.task 'stylus', ->
    gulp.src ['stylus/**/*.styl', '!stylus/**/_*.styl']
    .pipe stylus set: ['compress']
    .pipe gulp.dest '../css'
    .pipe do connect.reload
# задача для сборки js
gulp.task 'js', ->
    gulp.src ['js/**/*.js', '!js/**/_*.js']
    .pipe concat 'script.js'
    .pipe gulp.dest '../js'
    .pipe do connect.reload
# задача-наблюдатель, при изменении любого файла будет пересобирать проект и перезагружать страницу
gulp.task 'watch', ->
    gulp.watch 'jade/**/*.jade', ['jade']
    gulp.watch 'stylus/**/*.styl', ['stylus']
    gulp.watch 'js/**/*.js', ['js']
# дефолтная задача, запускает указанные задачи
gulp.task 'default', ['jade', 'stylus', 'js', 'connect', 'watch']

4. Запускаем сервер на node.js и работаем. Развивается такая скорость разработки, что возникает улыбка на лице. Мысли не успевают за пальцами, только подумал, уже готово.

 

Все это, конечно, же не дается просто так. Необходимо хорошенько потрудиться, настроить рабочее окружение, попробовать пару файлов сделать, собрать и проверить. Кто совсем не сталкивался с такими технологиями, может на все про все уйти несколько недель, но это того стоит. Я хоть и не верстаю уже давно, не жалею о том, что усвоил основы.

 

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


  • 0

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



#23 master-vek

master-vek
    Topic Starter
  • Пользователь
  • 257 сообщений
  • Репутация: 13

Отправлено 12 Январь 2018 - 00:12

Запускаем сервер на node.js и работаем. Развивается такая скорость разработки, что возникает улыбка на лице

 

Внимательно почитал ваш пост. И пришёл выводу, что начинать делать надо с того, что умеешь. Например Фотошоп мне знаком на необходимом уровне, в том числе и нарезка элементов.  HTML и CSS  знаком не первый год, хотя есть и вопросы, для этого есть источники. Нужна тренировка и её результаты.  До автоматизации вёрстки надо дорасти.  Пока я не освою вёрстку, хотя бы, на уровне Bootstrap, рано думать об автоматизации. Как Вы пишите, важно иметь качество (опыт). 

 

Если моя работа будет востребована или наоборот, тогда будет видно. А пока основное направление продвижение в Google.

 

Спасибо за все ваши рекомендации.


  • 0



Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru