Ответы пользователя по тегу HTML
  • Есть ли в природе обширная книга по front end разработке?

    bukinion
    @bukinion
    из свежего это книга Cody Lindley написанная при поддержке Frontend Masters, только она скорее книга-гид или справочник всего горизонта фронт-енда и связанных технологий: Node.js, SEO, DNS, HTTP и прочее. Т.е. каждая такая тема представляет из себя заметку с описанием и списком вводных ресурсов.
    Ответ написан
    Комментировать
  • Существует ли инструмент для тестирования верстки сайта?

    bukinion
    @bukinion
    Хоть и не совсем по теме, но с 2011 года на хабре ведется чеклист верстки
    Ответ написан
    Комментировать
  • Как использовать Bower?

    bukinion
    @bukinion
    можно через грантовский usemin решить часть (если не все) вопросов: в деве в html прописываете адреса (css и js), вокруг условные комментарии usemina, когда будет копироваться все на прод, настроить usemin задачу и она будет заменять ваш джикьюери и прочие, ссылками на минифицированные версии, и если не ошибаюсь, склеит, то что скажете.
    И есть вроде плагин для гранта, что подменяет ссылкой на cdn.
    Ответ написан
    Комментировать
  • Где можно посмотреть примеры красиво-удобно оформленных больших таблиц с данными?

    bukinion
    @bukinion
    Классный вопрос)))Сама задача типографическая, а ныне также и RWD-шная.
    Отличная гифка от vis0r вкратце показывает, что именно, и как делать.

    Если же по полочкам, да по ссылочкам, то.
    Прежде чем заниматься графдизайном таблиц, надо, если потребуется, переосмыслить их и привести информацию в понятному и простому виду: определить структуру информации, выбрать способ отображения, избавиться от всех повторов, есть много разных методов оптимизации таблиц — об этом лучше всех написано у Мильчина. Мильчин, — это советская школа еще, в универе по нему учили. Для вас конкретно: Глава 13. Таблицы и выводы. — Мильчин А., Чельцова Л. Справочник издателя и автора : редакционно-издательское оформление издания.

    Типографический аспект верстки можно посмотреть в 15 главе "Типографика. шрифт, верстка, дизайн", Феличи Джеймс, или что говорит "Новая типографика", Я. Чихольд:

    8d61eac53511465a82e76f27435e659d.PNG

    или "О Шрифте", Шпикерман:

    a4f4940a77cd403ba5a253cb1a09c886.PNG

    вот оформление таблиц от Эдварда Тафти:

    a062573f9d6747a5ae52c1c7125dfca3.PNG

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

    Еще стоит подумать об адаптивности таблиц: отправная точка, или посмотреть реализации в библиотеке паттернов Бреда Фроста, товарища в скафандре, автора подхода "Atomic Design".
    P.S.
    Только что наткнулся, на jQuery-плагин для таблиц: с адаптивностью! Плюс: сортировка, пагинация, настройка объема вывода строк и т.д.
    Ответ написан
    2 комментария
  • Как стать верстальщиком в краткие сроки?

    bukinion
    @bukinion
    1) ...может скринкаст какой-то, может туторил крутой.
    Тут верно говорили, Sorax. Sorax наше все))) еще под мышку HTMLbook, разобраться хорошо с флотами и инлайн-блоками. Нравится сайт с реальными современными примерами кодропс. Там правда больше про фишки и украшайзинги в UI с помощью CSS, временами и с JS.
    Скринкастов по реальной верстке нет... Только практика, с ней и эрудиция, и доля воображения при реализации нетривиальных вещей, или наоборот простых вещей нетривиальным способом. Дорогу осилит идущий.
    2)...необходимые технологии и вещи, которые нужны...
    За день освоить yeoman, посомтреть его генераторы, позапускать, понастраивать, посмотреть структуру генерируемых проектов, он очень простой, с ним сразу grunt/gulp с базовыми настройками, что для простых проектов полностью хватает, тем временем и посмотрите как работают они. Bower аналогично, если есть клиентские зависимости, сам менеджер быстро изучается: пару команд в консоли. Да-да, всего лишь нужны знания консоли и базовый js, все это просто, изучил когда в js полным нубом был, просто не боялся, многие просто шугаются с ними связанного страшных слов: node.js, npm. Часто эти люди бэкэндщики (умора*2). Раннее, быстро подсел на препроцессоры и шаблонизаторы, лайврелоады, теперь без этого не могу, тогда просто пользовался GUI, навроде препроса.
    Подытожу, что без препроцессоров и шаблонизаторов этот пункт можете оставить до лучших времен.
    3)...чистый css без bootstrap?
    Бутстрапп знаю, но юзаю фаундейшн, почти любой проект начинаю с yoeman генератора для нее, всегда работаю с SCSS, поэтому просто выключаю ненужные компоненты и все, зачем заново придумывать ту же сетку?! Или искать нормалайз (не юзайте эрик майеровский reset — моветон), он там включен? Правильно, если человек юзает CSS версию бустраппа, то он тянет как правило все, а стоит? там под 110 КБ в минифицированной версии. Кстати бустрапп, по словам Otto, в 4ой версии с less перейдет на SCSS, это серьезная заявочка в миру CSS-процессинга, к слову, порт SCSS есть давно.
    Просто если вы будете юзать основные компоненты бустраппа, то велик шанс, что вашу верстку в последствии, не перезапишут, подключив к ней еще бустрапп, а такое бывает, мало того бывало, что писал на фаундейшн, так потом обнаруживал еще и подключенный бутстрапп, человек (в данном случае бэкендер) просто не хотел вникать фаундейшн, да и бутстрапп, он то немногим лучше знал)))
    Масштабирование и поддержка проектов лучше, как никак бустрапп стандарт де-факто, как и джикьюери. Про то что дизайн похож как один, ну так, а для того и есть препроцессоры)) Если изучить архитектуру фреймворка, то кастомизировать их можно до полной неузнаваемости.
    Не, ну конечно, можно забавы ради в разные проекты таскать разные компоненты или бойлепрлейты (вроде Skeleton можете посмотреть), только кто потом в них вникать будет?! Гораздо проще минимизировать один любимый фреймворк, а остальное дописать вручную.
    Кстати, про CSS? из личного опыта, после SCSS не могу себя заставить писать простой CSS, хоть убей)) К хорошему быстро привыкаешь.
    4) ...foundation?
    Отчасти выше затронул, вообще, она гораздо сложней того же Бустраппа. Кратко изложу почему, как то уже анализировал подробно:
    На первый взгляд как клавесин и рояль)) Фаундейшн, более гибкая, и более сложная, поэтому и исходники SCSS это что-то по сравнению с бутстраппом. Если же не вдаваться в препроцессорные архитектуры и возможности кастомизации, то они мало чем различаются, оба mobilefirst, ну только сетка в бутстраппе адаптивная(можно переопределить), а в фаундейшн отзывчивая. Ну из ключевых моментов, фанудейшн на rem, и это неисправимо, но исключительно в духе RWD и правильной типографики, в то время как бустрапп на пикселях. Если интересно почитайте по ссылке, там как раз курс по фаундейшн (сам не смотрел))).
    5) ...с обычной верстки на адаптивную?
    Вы в этом плане в выигрышном положении, особенно по сравнению с теми кто еще с таблиц начинал. Многие тогда и закостенели, так как RWD требует большей гибкости ума, и поменьше пикселов. Поищите на эту тему презентации (там просто херов мешок с ссылками и прочими, на видео он и половины не успевает осветить) и конфы (есть и на русском, например, или тут 3-е видео) Виталия Фридмана из Smashing Magazine, он выдает самые сливки по теме, также касаясь бэкэндерской стороны и плотно.
    6) ...задания, которые постепенно вводят в мир верстки
    Сверстайте Тостер)) Он кстати адаптивный ;)
    Ответ написан
    Комментировать
  • Как сделать наложение картинки на два разных фона используя Bootstrap?

    bukinion
    @bukinion
    Смешно, так же как и попытка гвозди микроскопом забивать. Случай противоположный. В Bootstrap для этого ничего нет, кроме сетки, что поможет фигуры распределить по горизонтали, а вот по вертикали добавить class/id и руками относительно позиционировать. Стрелку тоже к сетке привязать. Повозится с ее свойством background — чистая CSS задача. И да стрелку, если адаптивно, можно сделать только корявенько: будет картинка растянутой/сжатой стрелки, т.е. тут тогда напрашивается JS-реализация.

    Неужели Bootstrap кажется такой волшебной палочкой и решением всех задач?
    Ответ написан
    Комментировать