Ответы пользователя по тегу HTML
  • Что изучать дальше?

    serjikz
    @serjikz
    web-developer
    js и хотя бы jQuery для более менее нормальной работы и чтоб делать что-то более сложное нужно ещё подтянуть CSS. Шаблоны "средней сложности" у всех понятие очень растяжимое как резиновая вёрстка.
    Ответ написан
    Комментировать
  • Как получить данные из обработчика?

    serjikz
    @serjikz
    web-developer
    Посмотреть в сторону ajax или хотя бы $.post
    Ответ написан
    Комментировать
  • Как быстро отредактировать статический сайт?

    serjikz
    @serjikz
    web-developer
    Total commander если редактирования не слишком значителны
    Ответ написан
  • Как в JS задать css правило и пересчитывать его при любом изменении?

    serjikz
    @serjikz
    web-developer
    У вас наверно в px позиционирование сверху. Оно будет всегда неподвижным если вы так задали, потому что top всегда считается от верхней части родителя (будь то body или relative), а они будут стоять соответственно всегда на своём месте вне зависимости от окна браузера (верхняя граница на своём месте)

    Коряво объяснил, поздно уже, спать охота. Мож кто может - объяснит лучше.

    Если вам хочется поменять расположение элемента при меньшем окне - попробуйте использовать % вместо px в указаниях top. Если нужно менять под конкретный размер экрана - стоит посмотреть на @ media запросы в CSS. JS в вашем случае думаю не нужен совсем. К примеру при max-height: 700px делать у определенного элемента top больше/меньше ну и тп.
    Ответ написан
  • Как верстается этот элемент?

    serjikz
    @serjikz
    web-developer
    Если не нужна адаптивная вёрстка - просто обрезали по край нижний в центре изображения и в jpg вместе с синим фоном всё залили.
    Нужна адаптивка - говорили уже доп блоки или before + after
    Или если у вас скиловый дизайнер там прямо это рисовал (кого я обманываю...) то тогда он предусмотрел уже адаптивный вид для этого блока и вам можно будет (если в адаптиве тоже такой треугольник) просто при меньшем max-width в media фигачить новый background за место нынешнего (короч первый способ, просто пхаем другой фон в блок).

    Да, первый способ - изврат. Можно и на svg сделать и тд и тп. Просто как вариант безгеморойный. Часто пользуюсь если сайт и хозяева его будущие не собираются звезд с неба хватать.
    Ответ написан
    Комментировать
  • Какие расширения для Brackets вы ставите?

    serjikz
    @serjikz
    web-developer
    Давно лазил по расширениям, гуглил специально какие вообще для него есть расширения интересные. В итоге Emmet, Working File Tabs и Beautify (последний нужен просто из-за того что часто лазию в чужой код). На php пишу, но чет не знаю какие ошибки можно там прослеживать с помощью расширений. Толку от этого? Если вы пропускаете ; или где-то кавычку не закрыли - с опытом придет, надоест лазить в браузер просто чтоб смотреть где ошибка, а более серьёзное что-то у меня не мог выловить даже phpDesigner, о Brackets я вообще молчу.
    Ответ написан
    Комментировать
  • Что верстальщики хотели бы донести до веб-дизайнеров?

    serjikz
    @serjikz
    web-developer
    Прошел через все стадии создания web-проектов начиная с копирайтинга, заканчивая back-end и настройку серверов. В итоге остановился на front-end + чуть-чуть дизайн (но это не значит, что плохо знаю фотошоп))).

    Что мне было делать лень, как дизайнеру:
    1. Прикладывать файлы со шрифтами
    2. Архивировать работу
    3. Писать комментарии к дизайну
    4. Присылать исходники иконок (если используется пак)
    5. Рисовать :hover :active :focus и тп для элементов, которые это 100% требуют
    6. Общаться с тугим верстальщиком, который не может отличить iline от inline-block
    7. Корректировать работу, если это просит верстальщик

    Что я понял, когда перешел на другую сторону:
    1. Я хочу архив с адекватными шрифтами (идеал - ссылку на шрифт в goolge fonts или подобном сервисе, где есть сразу все форматы шрифтов)
    2. Я хочу хотя бы .zip потому что инет в России не всегда и везде качественный и я могу быть не дома, когда хочу скачать и посмотреть диз, а он весит 300мб
    3. Я хочу несколько .psd если лендос/сайт большой (экранов в 25-30 или больше). Разбивайте на 7-10 экранов максимум каждый .psd потому что не у всех верстал 8-16 гигов оперативки
    4. Я хочу состояния :hover :active (пожалуйста!!! пусть уж без :focus, сам его придумаю)
    5. Я хочу ссылку на пак с иконками, если они использовались в дизайне
    6. Я хочу комментарии пусть даже в .txt если там что-то из-под чего-то должно выезжать при наведении/клике и тп
    7. Я хочу группы в макете с адекватными названиями, а не сплошняком все слои и/или группы "Группа 1 и тп"
    8. Я хочу минимум скрытых слоёв/групп в шаблоне (если группа не может донести суть - писать в .txt для чего она)
    9. Я хочу каждую часть текста по отдельности, а не заголовок (60px желтый отступ от абзаца с помощью межстрочного интервала) вместе с абзацем (18px белый с межстрочным интервалом не равным заголовку). Хочу чтоб был отдельно абзац и отдельно заголовок (подзаголовок, без разницы как называть)
    10. Я хочу отдельно каждую картинку, а не слитый воедино фон шапки с изображением товара/курса/др.
    11. Я хочу большой векторный логотип отдельно от шаблона
    12. Я хочу прозрачность, чтоб сделать png, а не "Режим наложения"->"Умножение" (обязательно адекватно мягко по контуру вырезанный объект, а не ступенька из пикселей)
    13. Я хочу общаться с дизайнером, если у меня есть его контакт
    14. Я хочу мобильную версию, если она должна быть у сайта
    15. Я хочу бесшовную текстуру отдельно от документа, если есть фон, который имеет свойство повторяться (его в "Наложение узора" обычно ставят в стилях слоя)
    16. Я хочу скайп дизайнера в макете чтоб связаться с ним))) Главное нарисуйте так, чтоб его не принять за элемент сайта и не заверстать случайно

    Ну как-то так. Думаю список можно ещё пополнить, но уже о некотором сказали.

    P.S. Я не эгоист, уже давно сам придерживаюсь всех этих правил, если хотят, чтоб дизайном занимался именно я.
    Ответ написан
    2 комментария
  • Создание своего веб-проекта - где найти практическую часть, что почитать?

    serjikz
    @serjikz
    web-developer
    Наверняка все будут ругаться, но я таки посоветую. Евгений Попов курс по созданию интернет-магазина. Это если вам надо структуру знать, понимать че к чему и тп (технически хороших знаний там не много, но мне и они помогли в своё время). Также кроме этого есть курсы Специалист-а из бауманки. У них там вовсе всё шикарно.
    Ответ написан
  • Как checkbox сделать не активным?

    serjikz
    @serjikz
    web-developer
    if(ваше_условие_с_истиной) $(".my_input").attr("disabled");

    Примерно так. Без вашего кода не могу сделать пример более понятным.
    Ответ написан
    Комментировать
  • Тех. требование к landing?

    serjikz
    @serjikz
    web-developer
    Если там после дизайнера переделок поуши - спрашивать у него про адаптивность нет смысла, он не знает, как она работает/будет работать. Хороший верстальщик может сам сделать адаптивность спокойно, просто об этом надо предупредить заказчика и стребовать с него деньги за дополнительную работу. ТЗ для дизайнера возможно криво было составлено, а может и вообще не составлялось
    Ответ написан
    Комментировать
  • Какие есть особенности вёрстки под Edge?

    serjikz
    @serjikz
    web-developer
    Сейчас никаких. Лет через 5-7 появятся.
    Ответ написан
    Комментировать
  • Какие правила нужно соблюдать чтобы html-разметка была правильной?

    serjikz
    @serjikz
    web-developer
    1. Проверка на валидность
    2. Табуляция
    3. Как можно меньше использования тегов. К примеру
    <div class="logo"><img src="logo.png"></div> лучше делать так <img src="logo.png" class="logo">
    4. Подключение скриптов и стилей внизу страницы перед закрывающим body
    5. Отсутствие inline стилей в документе
    6. Все style и script в файлах, а не в html (я иногда пишу js в доке, если его мало)
    7. ID - единственный на странице, class - множественный
    8. Вложенность тегов, о которой вы говорили
    9. Отсутствие лишних пробелов Пример:
    <div>
         <img>
    ____
         <a></a>
    </div>

    ___ - пробелы, которые надо удалить, оставив пустую строку.
    10. Пробелы в атрибутах. К примеру <a class=".."> но о них вам валидатор скажет сразу, поэтому не вижу смысла описывать правила валидности

    Ну наверно и всё.
    Ответ написан
    3 комментария
  • Куда пойти после 4-ех лет фриланса?

    serjikz
    @serjikz
    web-developer
    Работаю удалённо на инфо-бизнессмена. Зарплата каждый месяц. Нашу столицу для жизни не рассматриваю - ужасный город, да и жене не понравился даже после первого дня пребывания. Прекрасно хватает на все расходы + на "отложить". Работа как раз front-end, но знание php всё же обязательно, а также частенько приходится с людьми общаться. Щас вообще запартнерились и делаем совместный тренинг.
    Ответ написан
    Комментировать
  • HTML5-теги и SEO в 2015-м. Влияет или нет? Есть ли ссылки на исследования?

    serjikz
    @serjikz
    web-developer
    Скажу просто от себя без какой-либо статистики. Почему не сделать валидно с точки зрения html5 и адаптивно очередной сайт? Хуже от этого никому не будет, а воспользоваться article и nav за место div.article и div.nav по-моему даже выгодней (аш на 4 символа меньше печатать!!!). Опять же сказано было выше правильно - если у вас валидно всё, адаптивно, но сайт ужасен по составляющей ui и содержанию - можно не думать о топе. Контент и внешность наше всё, от этого никуда не денешься (дизайн как минимум потому что на сайте с красным фоном и желтыми буквами никто сидеть не будет, а значит нахождение на сайте меньше и соответственно сайт катится по наклонной с точки зрения ПС).

    Если сайт старый - подумайте, может есть смысл вообще его переделать на новый лад. Внести изменения в дизайн, а соответственно и валидность поправить, дотянув до html5. И постоянным посетителям понравится (если они есть) и ПС понравится.
    Ответ написан
    Комментировать
  • Есть книги по верстке, не основы css, а именно как верстать правильно?

    serjikz
    @serjikz
    web-developer
    Быстрый ответ: habrahabr.ru/post/114256
    ----------------------------------------------------------
    Если вы знаете основы, значит знаете определенные css правила. Скажите такую вещь, как мне правильно сверстать 3 блока, идущих в ряд горизонтально?
    Варианты ответов:
    1. Используя float
    2. Используя inline-block
    3. Используя flex-box
    4. Используя table
    5. Используя position 0_o (потому что можно задать relative родителю и absolute детям+top/right/bottom/left)

    Правильный ответ: всё выше перечисленное (ну может быть последнее не очень верно, но ведь тоже можно сделать и сделать очень аккуратно, не повредив общей структуры сайта). Ваш вопрос как по мне просто идентичен моему по смыслу. В разных ситуациях используются совершенно разные подходы, а количество этих ситуаций измеряется количеством вашего/чьего-то воображения.
    --------------------------------------------------------------------------------
    Если вы работаете в команде - спросите/посмотрите какой стиль вёрстки использовался до вас и можно ли использовать свой стиль, либо верстать так, как раньше верстали (многие команды даже гайды пишут по этому поводу, к примеру csssr).
    Если работаете один - можно тоже самое blog.csssr.ru/code-guide и ещё в довесок ссыль в начале поста.
    Ответ написан
  • Как правильно оптимизировать изображения?

    serjikz
    @serjikz
    web-developer
    Пробовал тоже галпом, но мне на постоянный поток небольших проектов не очень удобно им пользоваться, поэтому оптимизирую вот так habrahabr.ru/post/215213
    Ответ написан
    2 комментария
  • Как сделать ползунок для изменения размера блока?

    serjikz
    @serjikz
    web-developer
    Igor Belka вообще то человеку надо что-то вроде этого jqueryui.com/resizable
    Ответ написан
  • Как стать верстальщиком в краткие сроки?

    serjikz
    @serjikz
    web-developer
    sorax канал. Где-то давно был пост с каналами для фронтендеров, уже забыл и искать влом. Через гошу найди "ютуб каналы для front-end". В короткие сроки вряд ли реально. Все тонкости только с практикой, а какие-то с глубокой практикой.
    На счет бутстрапа - я забыл, когда им пользовался (обычно пишу чистый css даже без препроцессоров, но иногда с ними явно удобней)
    На счет сборок - тоже редко, так как они больше для больших проектов (сорь за каламбур)
    На счет адаптивной вёрстки - это тоже только практика. Сначала надо научиться верстать статичные шаблоны, а потом делать адаптив. На самом деле в media нет ничего сложного и страшного, просто мы будто бы выкидываем предыдущий файл стилей для прошлого экрана и заменяем его новым файлом стилей. Грубо говоря так, но там надо основательно всего учитывать, особенно наследование и перезапись правил.
    Ну и на счет боевого проекта - готовь фотошоп, который нужно тоже так нормально знать, потому что плох тот верстальщик, который его не знает ровно как и плох тот дизайнер, который не представляет вёрстки. Идеальный вариант - уметь верстать и уметь рисовать дизайны сайтов ну и обрабатывать фотки, потому что это всё очень понадобится (всё больше встречаю криворуких дизайнеров, а о криворуких верстальщиках лучше вообще молчать).

    Главное - при написании кода думайте о тех, кто будет его поддерживать, но если вы занимались бекендом - наверняка это и так знаете.
    Ответ написан
    Комментировать
  • Как можно сохранить набор своих расширений для brackets?

    serjikz
    @serjikz
    web-developer
    Я сделал копию папки с установленными расширениями, а папку закинул на OneDrive ну и она ещё лежит на компе локально конечно. Расширения добавляю редко очень, программа минимально собрана (всего 5 расширений)
    Ответ написан
    Комментировать
  • Тег style vs. link. Что быстрее?

    serjikz
    @serjikz
    web-developer
    А давайте ещё и style="" ещё использовать для пущей скорости. Вы сами подумайте, что хотите сделать - огроменный файл с кодом html+css и уж 100% там будет js, а если ещё и какую-то библиотеку подключите типа jQuery тоже не через файл, а напрямую - ваш текстовый редактор может либо скопытиться, либо очень очень долго думать и тяжело отображать то, что в файле при его скролле. Более того я не завидую вам потом, потому что поддерживать такой код будет огромной головной болью (если вы его будете поддерживать, если кто-то другой - он будет готов вас сварить себе на обед).
    Ответ написан