Задать вопрос

Владимир Солнцев

Верстальщик
Ответы пользователя по тегу Вёрстка

  • Стоит делать разметку так?

    @vladdimir
    Верстальщик
    От диватоза к дивафобии...
    цель, как можно меньше дивов - плохая цель. Дивы вообще это неплохо, а нейтрально. Плохо != нейтрально. С таким же успехом можно вместо дивов использовать секции и гордится своей семантичностью 80 уровня. Вполне нормально использовать дивы, если они вам нужны, для группировки или оформления или еще чего, что вам надо выразить и что не имеет какого-либо выраженного контекста.
    Конструктивная цель - изучить семантические значения тегов, как пример.

    На счет структуры - норм, но я бы ввел дополнительные обертки для группировки логотипа заголовка с текстом в отдельные секции (не обязательно этим тегом). Потому что, вместе они образуют законченные блоки, и имеют сильные связи между собой.
    div.logo
  img.logo-img
  p.logo-caption
...
div.banner
  h1
  p
    Ответ написан
    3 комментария
    3 комментария

  • Вопрос к опытным верстальщикам от студента?

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

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

    Если все же изменил, делай это явно - назови по-другому, положи отдельно и везде оставь пометки.

    Еще один момент, если тебе нужна была только сетка, то тащить весь бутстрап это тоже плохо. Нужно брать только необходимое - сетку.

    Вообще, верстка это основа фронтенда. Пока учишься, хорошо бы пробовать руками базовые технологии, а не брать готовое.
    Ответ написан
    Комментировать
    Комментировать

  • Как разрабатываются сложные анимации для web сайтов (с точки зрения дизайна)?

    @vladdimir
    Верстальщик
    Чтобы сделать анимацию, что нужно увидеть, как она работает и получить элементы, из которых она состоит. Так что в идеале: гифка или видео + объекты анимации в виде изображений.
    Иногда, вместо полного видео, хватает и статических изображений трех состояний: исходное, промежуточное и конечное. + описание на пальцах переходов и эффектов. Тут как с дизайнером договоритесь. Если он там нечто эпическое планирует, то лучше увидеть это в динамике.

    На первом сайте. кстати, анимация не канвас, а css.
    Ответ написан
    3 комментария
    3 комментария

  • В каком порядке это учить?

    @vladdimir
    Верстальщик
    Вот если конкретно по вашему списку, довольно просто распутаться, привожу алгоритм.

    1. Вникнуть в определения технологий в общих чертах. Ответить себе на вопросы: что это? для чего это?
    Например, json - это формат представления данных.
    А npm и yarn - менеджеры пакетов. Бабель, вебпак и галп без одного них не установишь, нужно будет хотя бы установить, узнать основы синтаксиса и распространенные команды.
    Учить все-все команды и глубоко залезать в тему можно, но зачем вам это сейчас? Нужно ли вам вот прям сейчас знать, как публиковать собственные пакеты?
    Не думаю. А что нужно?
    Наверное, устанавливать и удалять пакеты. Возможно проверять обновления и обновлять, смотреть список установленных. Итого, 5-10 команд/флагов для первого знакомства хватит с головой.

    И так далее. Судя по форме вопроса, вам сейчас из этого вообще ничего не нужно, потому как создается впечатление что о назначении этих инструментов вы не размышляли. У вас в списке: формат данных, два менеджера пакетов, 2 грубо говоря сборщика, 1 js технология и транскомпилятор.

    Сможете понять, что это за штуки -> станет ясно, для чего они вам могут понадобиться и в каком порядке их изучать.
    Самое очевидное: вы просто не сможете установить вебпак или галп без менеджера пакетов, а значит и изучать их не сможете. А еще там node.js нужен для работы - вот вам еще список расширил)

    Дальше: присоединюсь к мнениям выше - ставьте себе задачу (проект) и решайте ее (делайте проект). Внедрите интересующие инструменты и делайте.
    Без практики научиться не получится. Медитировать над инструментами в отрыве от реальности можно до пенсии и ни к чему не прийти, потому как сам инструмент используется для чего-то, и без этого самого чего-то он абсолютно бесполезен и изучать его бессмысленно.
    Ответ написан
    2 комментария
    2 комментария

  • Сколько времени нужно потратить на обучение?

    @vladdimir
    Верстальщик
    Не уверен, сколько потратил) Не буду рассказывать о процессе обучения и прочем, а то ответ разнесет на несколько экранов. Лучше перейдем к сути.

    Вы как учитесь?
    На мой взгляд, программирование и верстка это 90% практики. Нужно писать код.
    Самый оптимальный вариант обучению новому. В вашем случае верстке html&css
    1. Ознакомиться с технологией.
    2. В зависимости от уровня - взять макет в инете или поставить задачу, например: сверстать главу из любимой книги, или сделать реплику кусочка сайта, который вам нравится. И верстать.
    3. Получать кайф от магии) «Повелеваю тебе, браузер, сделай этот текст красным, а эту картинку подвинь влево!». Когда не знаете конкретное заклинание, чтобы заставить браузер сделать то, что вам нужно - идти в гугл, искать инфу.
    4. Когда магии и заклинаний станет уже мало, и вы захотите узнать, как все это дело устроено и почему, идите читать спецификации и серьезные статьи.


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

    А когда мы щупаем руками перестройку сетки, поведение конкретных элементов, думаем о том, как расположить элементы в нужном порядке, сталкиваемся со сложностями и багами, мы понимаем для чего нужны конкретные команды, и как что работает.
    Когда начинаем писать полноценные страницы и сайты, сталкиваемся со сложностью, понимаем про вложенность, узнаем что-то про методологии и хорошие практики. И не просто потому, что так надо, а потому что на своем опыте поняли: это полезно и эстетически красиво.
    Забегая вперед, большинство концепций без практики вообще не понять. Можно зазубрить и даже немного внедрить в работу. Ну это будет необходимость ради необходимости, а та польза, которую конкретная концепция привносит в процесс разработки останется вне зоны осознавания.
    Ответ написан
    Комментировать
    Комментировать