В этом посте я, как новичок в деле веб-дизайна, программирования и верстки, хотел бы рассказать о сложностях, с которыми столкнулся.
Я живу в двух городах. Уфе и Москве. Это трудно… Особенно в плане работы. Почему так сложилось — история другая. Я начинающий фрилансер.… И тут мне пишет друг. На тот момент мы были не особо-то близкими друзьями… Он предлагает сделать сайт. В отсутствии денег в кармане, я хватаюсь за нитку большого проекта, даже не понимая, во что он выливается для меня как для новичка.
С первых дней стало понятно, что намерения у друга серьезные. Являясь типичным примером ленивого кодера, я прилагал не много усилий, понимая что это на долго.
Вот тут-то и начинается наша история. Она началась с ТЗ.
Периодически я беру заказы на различные небольшие работы. Разработать дизайн, собрать его, сделать пару модулей, модифицировать что-то… В общем-то, по мелочи. И сейчас, уже обладая опытом общения, я могу радостно заявить, что мой шеф — редкий случай заказчика, умеющего конкретизировать свои мысли, расставить точки над “i” и войти, по-моему, в любое положение исполнителя.
Торнадо началось не с логотипа. Не с моделей… Торнадо началось с вектора движения. С идеи и горящих глаз. Проект, призванный облегчить жизнь не узкому кругу лиц, а всем, кому сможем.
Началось все с простого… Таблица, поля ввода…
Мне был дан логотип и примерный образ.
И бесконечное поле для реализации. Рома не лез в код, я старался воплотить в жизнь его идею.
Первый прокол возник в тот момент, когда меня осенило: логотип будет занимать в шапке много места, если открыта модель, его должно быть можно спрятать. Подходящее решение пришло случайно. Я выставил вместо “logo.jpg”, “logo.png". А там было только название, без логотипа. И шапка — схлопнулась в строку. Я понял, что это надо реализовать, и без JS тут не обойтись (кстати, можете попробовать, кликнуть на логотип и посмотреть).
Честно скажу, мнение насчет всяческих библиотек и фреймворков у меня предвзятое. Я считаю их подключение лишним. Они «толстые». Для единичных проблем не имеет смысла подключать большую библиотеку. Легче написать свой небольшой и логичный скрипт. Лучше облазить пару десятков форумов, но на сайт выложить самое ценное, чем взять стандартную функцию той же jQuery, загрузив в браузер коллекцию сторонних функций, которые не будут использованы.
Так я начал изучать JavaScript. Почти с нуля.
После вдумчивого чтения форумов на протяжении не более чем получаса, появились на свет рекурсивные функции выдвижения и задвижения логотипа. А еще я открыл для себя свойство lang. Оказывается, это свойство есть во всех элементах, подобно style. И, официально, оно должно задавать язык, на котором написано содержимое элемента. Однако, на практике используется не по прямому назначению, а как объект для хранения данных.
К слову, хочу сказать, что всем новичкам, в первую очередь, нужно разбираться не в возможных версиях реализации, а в логике этих версий. Так, и только так, вы поймете, какие методы подходят в вашем случае, а какие не только не подходят, но и повредят.
К концу дня шапка была сделана и настроена для красивой и ровной работы. Но этого мне было мало… Передо мной была голая таблица и большая менюшка, занимавшая немного-немало 260 пикселей ширины страницы. Вид, конечно, портило. Немного пошаманив с уже полученным опытом в JS, я заставил ее выдвигаться и задвигаться. Однако надпись
О
П
Ц
И
И
, выглядевшая как рекламная вывеска не очень продвинутого магазина, мне не нравилась. И я углубился в CSS, дабы найти способ развернуть текст, или каждую букву, под 90 градусов.
И понял я, что мои познания ничтожны, а кроссбраузерность повернутого текста оставляет желать лучшего. Единственным подходящим средством было SVG. Но оно требовало загрузки правил через xmlns c w3. Стандарты — это хорошо. Но не стоит забывать, что стремление к легкости сайта сейчас в приоритете, особенно из-за политики индексации. Именно из-за тяжести не котируются сайты, собранные в визуальных редакторах.
Полазав по статьям и форумам я нашел способ развернуть текст без SVG. К сожалению, старыми версиями IE (7 и ниже) пришлось пожертвовать.
Опции предполагали сначала небольшой набор функций для работы с моделью. В общем и целом, установка по высоте опций особых проблем не вызывала. Я приблизительно (по невежеству своему) выставил процент расположения от верхней границы — и забыл об этом, как о решенном вопросе. Он всплыл позже.
Функции работы с моделью предполагали три разных типа.
Где столбцы — это плюс и минус, а строки текст, задаваемый пользователем Обратный вариант. И — где имена столбцов и строк задаются пользователем.
Конечно же, для каждого варианта должно было быть реализовано изменение количества строк/столбцов.
С точки зрения новичка, все просто. У таблицы есть TBODY. В теле есть массив строк. Его и изменяем. Массив — это коллекция. И, как я понял, полазав по форумам, не я один воспринимал его как массив. Но не тут-то было.
К сожалению, в качестве лирического отступления хотел бы отметить я, верстка сайта таблицами считается прошлым веком и многими веб-верстальщиками чуть ли не призирается. Это не правильно. Всему свое место. И все нужно использовать с умом.
Большинство ответов на форумах предполагает использование методов appendChild(obj) и removeChild(index). Но (глас вопиющего в пустыне) это же неправильно! Отладка показывает, что добавляете «ребенка» вы в TBODY. И, несмотря на то, что при обходе строк строка будет присутствовать, она будет отсутствовать с коллекции строк. А, значит, это косяк.
Еще одно лирическое отступление: тестируя верстку в разных браузерах, я, конечно, матерился на разработчиков, которые по-разному решают вопрос undefined behavior. Это те случаи, например, когда установленная строго ширина или высота, слишком велика. И тогда браузеры (не буду тыкать пальцем) начинают чудить. Кто из них чудит — решать вам. Но разные интерпретаторы по-разному изобразят ваш дизайн.
Принято было решение использовать стандартные функции добавления строки и удалению ее же. Это insertRow(index) и deleteRow(index).
На том приключения, как водится, не закончились. Удаление строк — дело хитрое. Если будет удалена строка не в начале и не в конце, все ID в таблице придется задавать заново (элементы связаны между собой), а их было много. Каждая ячейка имеет скрытое поле, хранящее значение выбранных баллов, таблицу с пунктами (баллами), каждый из которых имеет событие onhover, и, собственно, поле ввода для текста. Была создана хитрая функция IDreborn с этой целью. И вот, когда отладка удаления была закончена, встали косметические вопросы.
Открыв сайт на нетбуке, я понял: опции смещены вниз; на небольших экранах часть функций невидна, а сверху остается место.… Это было недопустимой оплошностью.
И я начал пробовать выровнять опции по высоте. Первой или второй ссылкой в гугле я нашел не менее шести способов вертикального выравнивания. Каждый из них давал результат в конкретном случае и при конкретных условиях выравниваемого объекта и его родителя. Какие-то были кроссбраузерными, какие-то — нет. Я выбрал способ более-менее универсальный. Создав родительский объект, зафиксированный на странице (position:fixed;) и растянутый по высоте у правого края (top:0; bottom:0; right:0; ), я поместил в него блок в половину высоты с отрицательным полем снизу(margin-bottom:-247px;), равным половине высоты опций (спасибо имеющимся средства разработчика в браузерах, помогли узнать). Ну и, конечно же, сами опции, заранее схлопнутые по ширине в ноль, дабы могли выдвигаться.
Тогда же я понял: химия с overflow оборачивается в 50% случаев — против вас. Браузеры понимают верстку не так, как хочется. А огнелис (FireFox(Mozilla)) при использовании одновременно настроек overflow-x и overflow-y вообще не отображает элемент (хотя хром такое сочетание понимает).
Отказавшись от overflow, вынес для себя еще одно важное замечание.
Поставьте padding-left равным, к примеру, 10px. Ширину выставьте 0px. PROFIT! Ширина — ноль! А теперь выставьте такой же padding-right. И ширина будет равна ему. И это странная логика не одного браузера!
Когда канитель с опциями была закончена, мы с шефом взглянули на модель и поняли: текст в таблице зачатую — не однострочный. А, значит, текстовые поля использовать мало, нужны textarea. И я начал переписывать.
В общем и целом проблем не возникло… Разве что можно отметить автоматическое увеличение высоты текстового поля в зависимости от содержимого.
На форумах я нашел способ: текст, при каждом нажатии на кнопку внутри textarea, записываем в невидимый блок div той же ширины и с тем же шрифтом, что и textarea. Получаем его высоту и, с условием минимальной высоты, устанавливаем такую же высоту для текстового поля. Немного пошаманив, я понял, что указывать в скрипте ширину — неудобно.
Нужно иметь доступ к настройке через CSS. В общем-то для настроек внешнего вида таблицы и были созданы. Для простоты (!) настройки. Так я изучил доступ к классам.
Если кому понадобиться, привожу простую и забавную функцию:
function getStyle(className)
{
var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules
for(var x=1;x<classes.length;x++)
if(classes[x].selectorText.indexOf('.'+className)+1)
return classes[x].style;
return null;
}
Которая создала мостик, позволяющий не изменять значения в коде, а изменить их в одном внешнем файле.
Вообще, я всегда преследую цель создать сайт, который можно разобрать и собрать из кусочков. Это удобно. Например, в процессе выполнения, вы поймете, что заказчик хочет использовать одну из известных CMS. Тогда вам будет просто разобрать сайт и собрать его на CMS-ке с минимумом переделок.
Пока на этом все, т.к. у меня еще куча нерешенных вопросов и нереализованных возможностей. Идей, как водится, еще больше.
Надеюсь, начинающим, как я, статья была полезна. Растите, развивайтесь, пробуйте и да воздастся вам высоким качествам по затратам усилий! Удачи.
Автор: Misteriose
