.
Место для Вашей рекламы
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

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 блоки комментариями. Примерно так:




Это нужно для создания из сверстанного 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 или это будет ссылкой, лучше в любом случае использовать тег

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)

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