.
2 ноября 2016

Почему ... не работает в IE ? рейтинг форумов вебмастеров

Собственно, дожил и я до решения кроссбраузерных проблем :)
В этой теме я полный нуб — ни в теории, ни в практике с подобными вещами не сталкивался, только по наслышке.
И вот — заказчик ставить ТЗ — слайдер работает везде, кроме IE! нужно чтоб заработал и в осле!

Ну коли я сам не профи, первое что решил — сформулировать вопрос на вебмастерских форумах — вдруг добрый человек поможет? (что уже неоднократно случалось — мир не без добрых людей!)

Форумы нашел в поисковике и составил такое объявление:
Почему слайдер не работает в IE ?
Есть сайт http://www.reklamy.ru/ — на главной слайдер.
Везде работает кроме IE

Почему такое может быть?
Куда копать?

Проблема была в синтаксисе javascript на которой IE вставал, обнаружил с помощью анализа отладчика в браузере (кнопка F12) — ошибку сразу видно
было
if (countLi <= 3) ....
нужно
if (countLi => 3) ...
помог совет с форума www.html.by
тем не менее во многих других форумах вебмастера не остались в стороне — подключились и дали дельные советы
вот список тем, по мере поступления ответа

https://php.ru/forum/threads/pochemu-slajder-ne-rabotaet-v-ie.60649/

В EDGE есть F12 инструменты разработчика, в IE думаю та же кнопка, тебе javascript отладить

в тему, но хотелось бы конкретики — как именно отлаживать?

http://www.html.by/threads/38140-Pochemu-slajder-ne-rabotaet-v-IE?p=199010#post199010

открываешь IE, жмешь f12, ищешь сообщения об ошибках

в точку! прям от души :)

http://webmasters.ru/forum/f74/pochemu-slaider-ne-rabotaet-v-ie-76739/#post759896
этот совет я ещё попробую при возникновении проблем с IE
<!--[if IE]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js" ></script> <![endif]-->

http://searchengines.guru/showthread.php?p=14755547#post14755547

Дело в том, что у IE весьма своеобразное понятие CSS и HTML... и очень «специфическая» их поддержка.

а у вас весб слайдер через transform: translate3d сделан, а он поддерживается начиная с десятки и то частично

тоже правда!

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

http://wmasteru.org/threads/%D0%9F%D0%BE%D1%87%D0%B5%D0%BC%D1%83-%D1%81%D0%BB%D0%B0%D0%B9%D0%B4%D0%B5%D1%80-%D0%BD%D0%B5-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82-%D0%B2-ie.23389/

http://www.hardforum.ru/t125762/#post841520

P.S.
ожидал от cyberforum.ru большего :(
ветка http://www.cyberforum.ru/html/thread1840494.html
хотя возможно сам виноват — скорее всего не туда опубликовал, видимо нужно было в javascript

P.P.S.
Забираю свои слова про cyberforum.ru :)
В тему подключился настоящий профи — всё мне прокомментировал как нужно!

рубрики: Вёрстка | Комментарии (0)

16 апреля 2016

CSS эффект — увеличение с поворотом

Просто и красиво :)

weather

img.gt:hover {
transform: scale(1.15) rotate(5deg);
}
img.gt {
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
display: inline-block;
transform: translateZ(0px);
transition-duration: 0.3s;
transition-property: transform;
}

рубрики: Вёрстка, Полезности | Комментарии (1)

27 января 2016

Требования к HTML верстке

Вчера обратились ко мне за советом в поиске верстальщика — какие именно требования предъявлять верстальщику?!
Собственно, велосипед изобретать не стал — поискал, нашел и решил частично сохранить найденное себе.

Итак, требования и рекомендации к html вёрстке:

1. Кроссбраузерность
Сайт должен нормально работать в IE7+, FF3+, Opera9+, Safari4+, Chrome последней мажорной версии (или в зависимости от условий договора с клиентом и года, в котором вы читаете эту статью).

2. Всегда описывайте цвет фона для body даже если он белый.

3. Если используете CSS хаки, комментируйте, что это и для какого браузера, а лучше используйте css_browser_selector.js. Заботьтесь о верстальщиках, которым придется работать с этим макетом после вас.

4. Названия классов и id должны по смыслу соответствовать применению
например, header, menu, footer, news

5. Просьба разделять основные html блоки комментариями. Примерно так:
<!--—BEGIN FOOTER -->
<!--—END FOOTER -->

Это нужно для создания из сверстанного html макета шаблонов для CMS, после чего комментарии будут удаляться.

6. Не пренебрегать возможностью использовать GIF/PNG с 8-битным альфаканалом вместо PNG-24, где это возможно.

7. Все что можно сделать без Javascript, делать без него.

8. Если Javascript кода много — нужно его выносить в отдельный файл. Обработчики событий тоже лучше отделить и объявлять в отдельном файле.

9. Если это еще не оговорено с заказчиком, предварительно оговорить, какие JavaScript библиотеки вы планируете использовать при верстке макета, чтобы потом не оказалось, что при верстке использовался, к примеру, PrototypeJS, а заказчик планирует в обязательном порядке внедрять на сайт jQuery.

10. Для резиновых макетов обязательно должна быть задана минимальная и максимальная ширина.

11. Если в Т.З. не сказано другое, макет обязательно должен помещаться без горизонтальных скроллбаров в развернутое на весь экран окно браузера при горизонтальной составляющей разрешения экрана 1024px, а если позволяет размер макета, то и 800px.

12. В папке с изображениями не должно быть картинок, не использующихся в верстке. Если что-то исключили из верстки или переделали — не забывайте удалять уже ненужные картинки.

13. Для всех элементов, которые могут содержать текст различной длины, который должен быть вписан в одну строку (например, для кнопок или заголовков, если в дизайне не предусмотрено, что они могут занимать больше одной строки), обязательно задавайте CSS свойство white-space:nowrap.

14. CSS файл должен быть разбит с помощью строк с комментариями на блоки по функциональному назначению, например:

/* ___________1. Сброс CSS____________________*/
/* ___________2. Типовые элементы____________*/
/* _______________2.1. Залоговки______________*/
/* _______________2.2. Ссылки________________*/
/* _______________2.3. Элементы форм_________*/
/*___________3. HEADER (Шапка сайта) __________*/
/*___________4. FOOTER (Подвал ) _______________*/
/*___________5. SIDEBAR (Справа) _______________*/

Как именно структурировть стили — вопрос немного холиварный, но главное — как-то это делать.

15. Если сдача верстки производится более чем одним этапом (например, верстальщик отправляет страницы по одной, или если ему возвращаются на доработку уже сверстанные страницы) и вы не используете систему контроля версий для верстки, исполнитель должен в обязательном порядке прикрепить файл с описанием изменений в макете примерно такого содержания:

Добавил новые картинки в папку img,
Картинки btnHome.jpg и btnFeedback.jpg уже не нужны, можно удалять
Изменил html-код в секции файла anketa.html
Добавил в конец файла main.css новые стили (начиная с .form_row и ниже).

16. Оговорить, в какой кодировке должен быть html-макет. CSS и JS файлы должны быть в той же кодировке, что и макет, иначе вероятность долгой и утомительной охоты на баги критически возрастает.

17. Если в макете присутствует JS, изменяющий DOM — внимательно следить, чтобы все корректно работало в Опере, т. к. этот замечательный браузер при нажатии на кнопочку назад страницу не перезагружает, а отдает закешированный документ, причем очень важный момент: документ не просто закешированный, а еще и с учетом всех модификаций DOM, которые были выполнены с помощью JS

18. Не забывайте прописывать cursor:pointer для кнопок, сделанных не с помощью input. Если вы не знаете, будет на эту кнопку повешен обработчик событий с помощью JS или это будет ссылкой, лучше в любом случае использовать тег <a>

19. Если вы делаете обработку событий при нажатии на ссылки, следите за тем, чтобы обработчики событий возвращали false, или же используйте href='javascript:void (0)' вместо популярного href='#', чтобы страница не скроллилась вверх.

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

21. Если в макете используются нестандартные шрифты, обязательно оговорите, можно ли элементы с нестандартным шрифтом делать картинками, если нельзя — обсудите, с помощью какой технологии будет реализовано их отображение (sIfr, Cufon, etc.)

22. Если не оговорено обратное для частных случаев, все блоки, высоту которых ничего в дизайне не мешает сделать динамической, должны иметь именно динамическую (т. е. зависимую от содержания) высоту, а иногда, чтобы ничего не могло потенциально поломать дизайн, нужно задавать и минимальную высоту. Если хотите сделать блок фиксированной высоты — сначала спросите у заказчика.

23. В макетах, где высота страницы зависит от контента (а таких, как правило, большинство), предусматривайте, чтобы футер был прибит к низу браузера при отсутствии/малом количестве контента, если не оговорено обратное.

24. Если макет не проходит 100%-ную html-валидацию, постарайтесь по крайней мере делать так, чтобы использование невалидного кода было оправданно. Не стоит факапить валидность верстки только потому, что «мне так нравится» или «так получается короче»

-----------------------------------------------------

От себя хочу добавить ещё несколько пунктов:

25. Адаптивность — в наше время всё больше и больше людей выходят в сеть с различных мобильных устройств самых разнообразных размеров браузера.

26. очень бы не помешал опыт работы с языком стилей LESS

рубрики: Вёрстка | Комментарии (1)

23 декабря 2015

Готовые CSS стили для таблиц

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

рубрики: Вёрстка, Полезности, Сайтостроение | Комментарии (1)

11 сентября 2015

Bootstrap Sublime Text Emmet FontWeb и другие полезняшки для вёрстки

Решил сделать репост полезных ссылок с http://webdesign-master.ru для себя, дабы не потерялось :)

рубрики: Вёрстка, Сайтостроение | Комментарии (0)

10 сентября 2015

Просто находка webdesign-master.ru

Получив ТЗ на вёрстку PSD макета в кроссбраузерный адаптивный шаблон, и осознав свою отсталость в этом вопросе (верстал довольно давно, вручную, причём сугубо «дедовскими» методами в FAR-e с подсветкой синтаксиса — вот такой я «динозавр») решил почитать о современных подходах в данном вопросе...

Собственно, томить не буду — Видео BOOTSTRAP: Как создаются современные адаптивные сайты

зацепило сильно! отличное изложение материала, автор супер! рекомендую!

ну и как следствие — настройка «инструментов рабочего пространства» для удобства работы с фронтендом — Видео Настройка Sublime Text 3 для веб-разработки: LiveReload, плагины, фишки

Оба ролика подкреплены доходчивым описанием и рабочими ссылками!
В общем я под впечатлением! Подписался на рассылку, будет время — изучу весь старый материал!

Чего у меня получится с моим проектом — покажу по окончании вёрстки.

рубрики: Вёрстка, Полезности, Программирование, Сайтостроение | Комментарии (0)

2 сентября 2013

vipmaster.net — перспективный SEO форум

Итак, прошу любить и жаловать VIPMaster — Форум ВебМастера и SEO оптимизатора.
Молодой, перспективный SEO форум. Приятный интерфейс со всеми удобными «фенечками» на движке IP.Board
Помимо прямого направления поисковой оптимизации, довольно плотно обсуждаются темы сайтостроения (Web-программирования,Услуги вебмастера), конвертации траяфика (электронная коммерция), коммерция(купля/продажа) и другие не менее интересные темы.
Не буду скрывать, что статья рекламная — и даже наоборот сделаю на этом акцент! Т.к. это говорит о том, что форумом занимаются, форум продвигают и вкладывают в него средства, а это уже залог успеха!
По сути, по настоящему живых SEO форумов не так много, и надеюсь vipmaster.net достигнет высот уровня searchengines.ru!
Форум модерируемый — никакого левого «шлака» нет — всё чётко, по полочкам.
В итоге — рекомендую и даже больше — призываю поддержать ребят на старте!

P.S.
Сам уже зарегался и думаю стану постоянным посетителем.

рубрики: SEO, Администрирование, Вёрстка, Программирование, Реклама, Сайтостроение | Комментарии (1)

Яндекс.Метрика