Таблицы: красиво и удобно.

Комментарии (13)

Что-то давно я не писал ничего, исправляюсь. Эта запись будет скорее в стиле «чтобы самому не забыть». Когда-то давно один читатель меня просил сделать произвольную сортировку в таблице, которая рисуется средствами PHP. Бегло просмотрев функции работы с массивами, я понял, что определённо должен быть способ проще. Так и вышло ©.

Вместо того чтобы наворачивать запросы и обработки на PHP можно использовать небольшой JS-скрипт, который перехватит таблицу уже в браузере посетителя и его же силами отсортирует её как угодно.

Поиск такого скрипта (а зачем писать если можно найти?) показал, что их десятки, и многие по навороченности напоминают центр управления космическими полётами, например – соответствующие плагины Tablesorter для JQuery, Phatfusion sortable и Mootable sorting для mootools, Datatables для YUI и TableKit для Prototype.

Думаю, их довольно просто прикрутить и приручить, если один из этих тулкитов в вашем проекте используется. В моём случае так не вышло, а грузить лишний код не хотелось.

Я выбрал два маленьких скрипта, не требующих ничего ни от сайта (нужно подключить один JS-файл), ни от вёрстки (нужно просто задать CSS-класс для заголовков таблицы).

Unobtrusive Table Sort Standartista
Unobtrusive Table Sort Standartista


1. Unobtrusive table sort — это мой выбор, я использовал его в выводе результатов работы скрипта для проверки тИЦ и PR.

Этот скрипт умеет сортировать цифры, строки, правильно сортировать даты, размеры файлов и прочее, подсвечивать чётные строки таблиц цветом, а так же делить содержимое больших таблиц на страницы.

Очень легко подключается, и может работать даже без дополнительной CSS-обёртки. Хотя, стоит отметить, с ней он выглядит довольно симпатично.

2. Standartista — очень похожий скрипт, но со своими особенностями. Он умеет сортировать IP-адреса, валюты, числа, текст и даты, а главная его фишка в том, что он сам умеет эти типы данных угадывать, не требуя пояснений.

Жилинский Владимир.



CSS Naked Day`09.

Комментарии (10)

CSS Naked Day 2009Сегодня (9 апреля)  проходит ежегодная акция «CSS Naked Day». Суть её с прошлого года не изменилась — это один день без CSS на сайтах с целью популяризации и продвижения единых веб-стандартов.

Не знаю (хотя догадываюсь), насколько ежегодное отключение CSS помогает улучшить ситуацию с версткой и соблюдением её стандартов разработчиками браузеров, но присоединяюсь — это забавно :-)

Жилинский Владимир.



Диалог: верстка и прогресс.

Комментарии (20)

Блочная верстка Этот пост не совсем обычный — большая его часть написана не мной. Эти мысли прислал мне Владимир «Bolzamo» Большаков, я их только немного откорректировал и добавил свои комментарии. Итак, читаем.

В наши дни web-разработка уже совсем не та, что была в 90-х, а еще через пару лет она изменится ещё больше. На дворе XXI век, и Web 2.0 принёс нам XHTML, Ajax, микроформаты, OpenID, RSS и прочие вкусности.
То, что раньше “лепилось вслепую”, теперь уже перерабатывается, проходит стандартизации и спецификации. Это касается и web-технологий, в частности — языков разметки и описания web-интерфейсов: HTML и CSS, о которых и пойдет речь.

Жилинский: А что 90-е? Я в ВГТУ получал сертификат по web-программированию в 2001 году — нам тогда давали PHP3 и говорили, что «некоторые веб-мастера уже иногда используют для верстки DIV-блоки с абсолютным позиционированием, но полностью сделать страницу на них невозможно.»

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

Будучи web-программистом, и ходя большей частью по сайтам таких же гиков и фанатов развития новых технологий, иногда начинаешь считать, что весь web красив и продвинут, что Web 2.0 прочно вошел в нашу жизнь, что красивый ненавязчивый дизайн (разработанный согласно требованиям юзабилити) и блочная семантическая верстка — это обыденность, это нормально…

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

Сколько их, этих ресурсов, построенных на табличной верстке, в коде которой сломаешь обе ноги, руку и голову? Чья кодировка — windows-1251, перенос строки формата — cr/lf, а у некоторых в еще и <META NAME=”Generator” CONTENT=”FrontPage 4.0″>…

Жилинский: Много. Очень много. Даже в корпоративном сегменте, не говоря уже про Юкоз, Народ и леса сателлитов...

Когда в социальных сетях, тематических блогах или конференциях разработчиков обсуждаются проблемы современной web-разработки и интернет-маркетинга, мало затрагивается тот момент, что когда человек решает заняться web-дизайном, он начинает с изучения табличной верстки, а потом не хочет переучиваться, так как для этого нужно не просто прочитать еще одну книжку, но и перестроить мышление.

Почему HTML изучают с таблиц? Элементарно! Потому что в учебниках написано изучать HTML с таблиц. Все учебники, самоучители и методические пособия вышли в далеких 90х годах, когда CSS рассматривался, разве что, как средство выставить шрифты и расцветку сразу для всего сайта. И слыхом никто не слыхивал о разделении контента и представления.

Есть, конечно, и новые учебники. Полистал недавно парочку… Нашел в них перепечатку старых. Только версия FrontPage поменялась и добавилось пара глав о CSS и блочной верстке. Почему-то авторы этих учебников ни разу не задумываются о том, что, чтобы научить человека чему-то хорошему, надо для начала не учить его плохому.

Кто не согласен с тем, что табличная верстка — это плохо? Почитайте спецификацию: тег table предназначен для представления табличных данных, равно как микроскоп предназначен для изучения микроскопических объектов, а не для забивания гвоздей.

Как-то я разговорился на эту тему с одним программистом, который иногда зарабатывает созданием простеньких сайтов на заказ для местных организаций. Сайты делает просто удивительные: верстка табличная, картинки увесистые, скрипты самописные, ЧПУ даже и не пахло. На все мои увещевания, что это неправильно, что надо стремиться к лучшему, он просто ответил, что веб никогда не был и не будет правильным. Что HTML — это куча мусора, к которой добавили еще одну кучу мусора — CSS, и теперь пытаются присобачить третью кучу мусора, называя ее стандартами веб-разработки. Классная формулировка, которая для многих может показаться вполне резонным оправданием, чтобы продолжать забивать интернет этим самым мусором. А какая разница? Заказчик ничего в этом не смыслит, ему красиво — он доволен.

Жилинский: Да, я как-то тоже разговорился с таким специалистом и счастливым обладателем жуткого сайта. Остались при своих мнениях, кстати.

Вот так мы и находим основные факторы, убивающие мотивацию к дальнейшему развитию себя как web-разработчика, изучению технологий и стандартов:

1. Делаем, как привыкли. Уже научились верстать в таблицах, кажется очень сложным изучать все тонкости и хитросплетения CSS, вдумываться в структуру документа, воевать с багами IE, чтобы достичь кросс-браузерности. На самом деле, блочная верстка куда проще и логичнее, просто сначала стоит изучить вопрос.

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

Жилинский: Кстати, полезное дело делает компания Opera Software — парни организуют семинары в городах СНГ в рамках программы поддержки высшего образования Opera Education Program. Прочитать об этом можно в их блоге.

Жилинский Владимир и Большаков «Bolzamo» Владимир




Рейтинг блогов
PR&CY Checker © 2007-2010 Блог интернет-разработчика, автор — Жилинский Владимир.
При использовании информации ссылка на источник обязательна.



Реклама создание сайтов. Создание сайта повышающего положительный имидж вашей компании.
Дизайн сайта
DIZ Balance