Ответы пользователя по тегу HTML
  • Как подружить IE8 и выше с @media screen and?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    IE9+ поддерживает
    Для древних есть Respond. Что именно не сработало с Respond.js?

    Что касается объяснений директору/заказчику - надо уже всех приводить к состоянию IE9+, и опускать поддержку IE8-. В качестве аргумента используется gs.statcounter.com - по нему четко видно, что современные мобильные устройства уже давно превысили 15-20%, в то время как IE8- снизился уже совсем серьезно. Все, пора его выбросить на свалку раз и навсегда.
    Ответ написан
  • Googlebot-Image и data-src. Как работает индексация картинок?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    В данный момент отдельно в индекс картинка 2х не попадет, так как она является всего лишь увеличенной копией основной картинки. Также, сейчас она не попадет и в качестве дополнительного размера к основной, так как бот хоть и парсит значение атрибута data-src, делает эот согласно своим представлениям (googlewebmastercentral.blogspot.com/2011/06/introd... А вообще эта практика для responsive изображений скоро будет упразднена. Сейчас идет open-source разработка модуля Chrome (и других браузеров) для реализации адаптивных картинок через тег picture, он и будет в скором времени использоваться для этих целей.

    Атрибуты, которые реально влияют на индексацию - alt и title. Еще почитайте тут: www.quicksprout.com/2012/11/05/image-optimization-...
    Ответ написан
    Комментировать
  • Какие есть особенности при верстке Landing Page

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    В целом @pettson правильно расписал. Только еще обратите внимание на различие между лендингами и между одностраничными сайтами. Это разные вещи. Лендинг (он же - посадочная страница), в рунете часто еще называют "продающая страница" - это страничка, задача которой четко конвертировать теплый целевой трафик в действия (подписка, покупка, заказ звонка, заказ услуги и т.д.). Одностраничный сайт - это просто сайт, на котором весь контент собран в виде одной страницы, чаще всего - с возможность подгрузки дополнительных данных с помощью ajax.
    С точки зрения верстки все на одно лицо - это просто html + css + javascript (разметка + оформление + взаимодействие). Возможно, с бекендом, возможно без него. Но это уже другая история.
    Ответ написан
    Комментировать
  • По поводу HTML5

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Не просто стоит, а необходимо. Поисковики уже давно понимают HTML5 со всеми семантическими плюшками и учитывают это в индексе. Да епт, поисковики уже кагбэ прозрачно намекнули, что сайты без респонсивной верстки вполне скоро будут стоять в индексе ниже, а Вы еще даже за семантику не брались. Переход безболезненный и быстрый, необходимо это сделать вчера!
    Ответ написан
    Комментировать
  • JQuery: Как выполнить скрипт в загруженной странице с помощью .load()?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Цитирую John Resig(lead jquery developer):

    We have to strip the scripts out otherwise they may be executed many times. The case where a user inserts a list item (for example) with a script inside of it that pertains to that particular item. The user then, later, clones that list item (or moves the list item to a different part of the tree) results in the scirpt being re-executed if we haven't removed it ahead of time.

    In short: No browser does "run scripts on injection" so we're kind of defining our own semantics here - one aspect of that being that in order to avoid having scripts run way too many times we strip them out of the source.


    В общем, load() не будет выполнять код из загруженного файла. И не должен - неправильно это и небезопасно - иньекция в чистом виде. По логике, вам надо либо весь код в родителе держать, либо после успешной загрузки явно "пепрезапускать" загруженный скрипт. Посмотрите решение здесь:
    stackoverflow.com/questions/9794762/jquery-load-is...

    И еще в jQuery есть такая "слушающая" штука как live(), обязательно почитайте. В вашем случае должна решить проблему.
    Ответ написан
  • Как сократить количество отображаемых строк в css?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Фиксированная высота + overflow: hidden. Это костыль, но поскольку вы не брезгуете magic numbers, то вполне сгодится.

    По уму - html5hub.com/ellipse-my-text/#i.ynjfrd17pscqpw
    Ответ написан
  • Почему не работают поповеры, тултипы и модальные окна на сайте при просмотре через Ipad?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Фокус в том, что на iPad по сути отсутствует такое событие как MouseOver / Hover. Там есть события Tap / Double Tap / Gestures. Проще говоря, если у вас взаимодействие завязано на наведение мышкой на объекты, то планшет этого не понимает, ибо на нем наведения нету. По поводу прямоугольника при клике - это, скорее всего, и есть попытка айпада отобразить состояние :hover / :active. Первый тап - имитация события наведения, второй тап - собственно переход по ссылке.
    Ответ написан
    2 комментария
  • Как не надо верстать сайты?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    А никак. Можно частично закрутить гайки (ограничить возможности), предусмотреть все элементы, в том числе прописать max-width, min-width и прочие полезности, дабы неожиданные правки не разрывали верстку. Но на 100% не получится. И есть только один вариант - объяснить клиенту, что сайт это живой организм, и взять его на платную поддержку. Ежемесячный объем правок в конце месяца оформлять как счет за почасовку. Тогда все довольны - клиент возможностями, разработчик красивостями, пользователи - адекватным сайтом без "вырвиглазов".
    Ответ написан
    Комментировать
  • Как верстать иконку с подписью?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Иконки шрифтом - это позволит анимировать их как угодно без лишних состояний. Минус спрайтов - излишние данные + неудобство поддержки. Если вдруг вам нужно поменять цвета для наведения - нужно редактировать сам спрайт. Со шрифтами этой проблемы нет. Плюс шрифт - это вектор.

    Выравнивание - display: table для родителя, display: table-cell для элементов. Само выравнивание, соответственно - vertical-align: top/middle/bottom/baseline. Свежая версия Normalize.css, кстати, уже перешла на display: table.
    Ответ написан
  • Как на Западе устроена фронт-энд разработка?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Если подходить к делу правильно, то процесс следующий:
    1. Брейнсторминг на бумаге, продумывание интерфейса и структуры и отображение в 3х вариантах (desktop, tablet, mobile)
    2. Разработка модульных сеток (они же wireframes) - Photoshop, Illustrator, Fireworks или сцеп. приложения для сеток и утверждение их клиентом. В 3х вариантах (desktop, tablet, mobile)
    3. Верстка голого прототипа по этим 3м вариантам (responsive уже давно стандарт де-факто, а не "бонус").
    4. Дизайнер рисует дизайн, четко по утвержденным сеткам.
    5. Правки по дизайну, утверждение клиентом.
    6. Верстка дизайна, тестирование и отладка, утверждение.

    При таком подходе процессы параллельны. Когда есть утвержденная сетка, мы можем работать сразу в 3х направлениях - дизайнер спокойно себе рисует дизайн, в это время верстальщик (он же coder, он же front-end developer) создает голый скелет (прототип) и верстает в него голый контент, а программер (back-end developer) уже может выводить свою часть (динамический контент) в html. Когде же утвержден дизайн, верстальщик этот низкоуровневый скелет начинает "украшать" - добавляются конечные стили (отступы, типографика, цвета и прочее).

    Следует еще упомянуть обязательный "шаг 0". Для корректной работы начиная с шага 1 необходимо получить от клиента реальный контент. В процессе шага 1 этот контент вместе с клиентом доводится до ума, финализируется и утверждается. В современной разработке работать с Lorem Ipsum - дурной тон и путь в никуда.

    UPDATE:
    Еще один бонус - когда сверстан низкоуровневый прототип по сеткам, можно прикручивать его к CMS, и уже с этого момента клиент может наполнять сайт (ну или наш контент-редактор). Часто это бывает очень важно (если контента много).

    Из этого всего выплывает:
    1. Дизайнер - это дизайнер. Его стихия - графический редактор. Понимание принципов верстки и веб-технологий вообще - обязательно. Умение самому заколбасить что-нибудь на jQuery не обязательно.
    2. Верстальщик / кодер / front-end developer - это человек, работающий с клиентской стороной (HTML+CSS+Javascript), переносит картинку от дизайнера в код и прикручивает то, что ему дает программер.
    3. Программист / back-end developer / просто web developer - человек, работающий с серверной частью (например, PHP), CMS и т.д.
    Это "минимальная конфигурация" Для более сложных проектов работа делится на более узкие направления и появляются профильные люди.
    Ответ написан
    Комментировать
  • Можно ли верстать сайт из макета в Ai?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Да без проблем. Что .psd, что .ai - какая разница? Проблема с конкретным верстальщиком может возникнуть только если он не знает Illustrator или фанатеет по Corel.
    Ответ написан
    Комментировать
  • Как правильно публиковать e-mail на страницах сайта?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Gmail'овский адрес размещаю открыто и не парюсь. Спам прекрасно фильтруется и я его не вижу, раз в неделю пробегаюсь глазами и удаляю. Польза же очевидна. Кстати, еще плюс accessibility. Скринридеры и иже с ними не видят картинки и адреса с обфускацией.
    Ответ написан
    Комментировать
  • Где найти талантливого верстальщика мечтающего освоить или владеющего Responsive Web Design - версткой?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Если речь не только о бесплатных развлечениях, но и адекватных коммерческих заказах, к которым нужно подходить с душой и трепетом, а в перерывах делать бесплатные полезности для комьюнити (читать - публикации на Хабре и в других местах скопления коллег и сочувствующих) - я в деле.
    Ответ написан
  • SEO - как отличить миф от правды?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Информация устаревшая. Если использовать HTML4 - тогда актуальны все пункты. При правильном использовании HTML5 - п.1-5 теряют свою актуальность. П.7 по сути верен, только тут есть момент - множественные ссылки использовать можно, просто на все, кроме одной можно повесить nofollow. П.6 вообще бред.

    Фокус еще в том, что 9 из 10 СЕОшников - реально шаманы-недоучкы с узким кругозором. Эти хомячки передают подобные мифы из уст в уста, опровергнуть их весьма тяжело, так как наука не очень точная. Эффект от изменений приходит не скоро, а так как за, скажем, 1 месяц делается несколько изменений в разных плоскостях (а не одно точечное), и спустя 2-3 месяца появляется результат, то практически нереально понять, что именно вызвало этот результат, было это одно из этих изменений или их комбинация, и какая именно комбинация каких именно изменений.

    В целом, Google проводит правильную политику - потихоньку закручивает гайки для искусственного SEO, выводя на первый и главный план КОНТЕНТ. Органический трафик потому и называется органическим - это естественный результат, прямо зависящий от качества и востребованности контента.
    Ответ написан
    2 комментария
  • Вывод постов Wordpress. Как?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Custom Queries.

    Как раз сейчас доделываем очень похожее решение: businesslife.in.ua
    Смотрите часть на белом фоне - 4 раздела, выводятся в отдельных блоках. Для 1 раздела выводятся последние Х в одном суб-шаблоне, для 3х остальных - отдельными блоками каждого раздела (отдельно Новости, Lifestyle, Break), в разных суб-шаблонах (с картинкой и описание, только заголовок).

    Код кастомного запроса:
    /**
     * Custom query for "News" section
     */
    $news_args = array(
    	'category_name' 		=> 'news',
    	'posts_per_page' 		=> '5',
    );
    $news = new WP_query ( $news_args );


    Код вывода (loop):
    if ($news->have_posts ()) :
    	$first = true;
    	while ($news->have_posts ()) : $news->the_post();
    		if ( $first ) :
        			get_template_part( 'content', 'article-medium' );
        			$first = false;
    		else :
    			get_template_part( 'content', 'article-small' );
    		endif;
    	endwhile;
    endif;


    Для оптимизации и ускорения процесса генерации таких страниц желательно кеширование, как минимум через transients API.
    Ответ написан
    4 комментария
  • Как удалить лишние селекторы CSS?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    www.cleancss.com
    https://github.com/peterbe/mincss
    Лично я предпочитаю эту процедуру, как и многие другие в процессе работы, выполнять с помощью волшебного Grunt - https://github.com/addyosmani/grunt-uncss
    Ответ написан
    7 комментариев