Website development
Comments 71
+6
Знаете, возможно, это покажется вам странным, но я очень рад, что все, что тут написано, вам не в новинку.
+1
Старался перевести как можно лучше. Но… может быть тут моя вина. Извините, если что не так.
В принципе — ничего сложно. Собственно, все сводится к пониманию того, что такое em. Зато с примерами и по полочкам.
+1
Дело не в переводе… Пугают формулы… наверное…
Но на сколько я знаю, у буржуев сайты модно делать фиксированной шириной.
А у нас заказчики любят заказывать на весь экран. При чём никто из них не может обычно предоставить контент приличный… И получаются пара строк вверху экрана на всю ширину… И картинка подвешенная в пустоте…
+1
Что в очередной раз доказывает, что max width имеет право на жизнь.
В относительных ли она единицах или нет.
+4
А как по мне, так образцовая статья! Замечательно все расписано, последовательно и хорошо, с примерами, с пояснениями, просто замечательно!
В избранное, однозначно.
UFO landed and left these words here
-1
Ну, по сравнению с ieee'шными статейками, например — все просто, понятно и без утайки.
Расписали хоть какой то момент толково — и то хорошо.
UFO landed and left these words here
+1
но написать что-то ведь надо, иначе как напомнить о себе?
А могли бы и поблагодарить за грамотную статью, которых на русском языке вы вряд ли видели…
UFO landed and left these words here
0
нечитабельно %(
увы всем
статья хорошая, но в этом переводе на русском читается трудно, жаль
+1
Логотип это тег:
Unstoppable Robot Ninja
На нем стиль:
max-width:100%;
При уменьшении размера контейнера уменьшается ширина изображения.
Кажется так.
0
Спасибо, теперь догнал, получается, что ресайз изображения происходит за счет браузера отталкиваясь от max-width:100%? Хм… здорово.

Решил изучить верстку его блога, и никак не догоню зачем нужна такая вложенность в шапке, вернее понимать понимаю, но зачем так мусорить:

-cite
---strong
------b
---------img
0
Еще раз спасибо, я пока с английским не дружу, поэтому не увидел
0
На самом деле статья действительно «переизложенная» на мой взгляд. Я её тоже хотел было перевести, но что-то не сложилось (и слава богу, а то бы вдвоём перевели :) ). Если к статье применить мудрое правило «выброси половину слов» — информационная ценность совершенно не изменится. Не знаю как у буржуев, но у нас многие привыкли суть улавливать на лету, читая по диагонали даже иноязычные тексты, не то что наши родные. Поэтому чем больше воды — тем более усложняется восприятие.

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

Спасибо за труд, с интересом перечитал еще раз ;)

0
Пожалуйста. Рад, что он может быть полезен.

Правда считаю, что перевод должен быть близок к тексту, по возможности.
Иначе это уже не перевод, а реферат.
Естественно, рефераты имеют право на жизнь и, иногда, намного полезнее переводов.
Но все-таки это — перевод.

А что касается того, что у нас все схватывают на лету — это очень индивидуально.
Мне, иногда, очень не хватает статей, в которых все разложено по полочкам и проиллюстрировано пошагово комментированными примерами.
0
К сожалению, лентяям не нравится читать много непонятного текста. Им нравится бездумно копировать код и не вникать «для чего и почему надо сделать именно так и никак иначе». Мне понравилась статья. Спасибо за немалый труд!
0
Хорошая статья, но читал фрагментами. Сократить бы, как уже выше говорилось)
0
не по теме: прочитав только над хабракатом — глаза заболели от ряби. к чему столько ссылок? вот к чему, ответьте?
0
Это перевод. Ссылки были там, где их использовал автор.
Он, похоже, хотел проииллюстрировать фреймворки и инструментарий работы с ними, потому что фреймворки, по его мнению, облегчают работу с сеткой (я не люблю CSS фреймворки и не согласен), упомянул людей, которые обладают значением в области использования типографской сетки в вебе, да пару тематических статеек привел.
Не особенно лишняя информация. Мне пройтись по этим ссылкам было интересно.
+1
Мне в этом смысле стало интересно зачем вы HTML-разметку нашпиговали ссылками, а особенно — зачем ссылки в закрытывающих тэгах? Этих ссылок уж точно нет в оригинале, предполагается, что читатели хотя бы начального уровня, а не нулевого :)
-1
Эм, единственные ссылки, которых нету в оригинальном тексте:
1. ссылка на мой профиль, в соответствующем разделе.
2. ссылки которые добавил «code hightlighter». Правда в данном случае я выбрал его не совсем удачно — что то он толком ничего не подсвечивает. Может перебрать статью и код обработать другим hightlighter'ом? Как вы думаете?

/me в задумчивости.
0
Думаю не стоит — код в статье достаточно прост и понятен и без подсветки.
А чем пользовались для подсветки кода, интересно? Он что — сам ссылки расставляет на справочник по тэгам?
(кстати на хабре вроде как принято ставить ссылку на то, чем раскрашивали, да и автору использованного сервиса таким образом стоит сказать спасибо, если конечно это не ваша собственная разработка)
0
Попробовал quickhighlighter.com/
Хабр его стили порезал.
В html'ке он смотрелся нормально.
Да, он сам расставляет ссылки.
Я к этому непричастен.

По поводу ссылок — не знал. Исправлюсь.
0
O CSS — почему бы не делать отступы, в нём согласно включаемости элементов в самом документе? Так будет понятно без просмотра остального кода, для чего куда float происходит.
-1
Честно говоря, не очень понял, о чем вы… Наверное спать пора.
0
Это я смотря на последний исходный код подумал, что в CSS только один отступ используется (для параметров), а если использовать отступы кода как в самом HTML, то будет видно, что в каком контейнере находится, ведь отсчёт размеров ведётся как раз относительный.
+1
Да, но в обычных правилах (сайта, заведения и т.п.) при сложной структуре делают нумерацию не одноуровневым списком, а с подпунктами. Так и тут через только лишь отступы можно показать, из каких предыдущих правил наследуются параметры, а с какими пересекаются.
-1
А где можно увидеть пример такого чуда?
Поделитесь, пожалуйста.
Я, просто, пока не очень понимаю, как это должно выглядеть.
0
Да тоже вот спать собирался, но тег за тег, и так всю статью с примерами дочитал и засмотрел, затянуло =)
-2
не, это фиговая резина ;-) при низких разрешениях ширины колонок должны исходить не из эталонных соотношений, а от объёма контента. именно так ведут себя таблицы — изменяют ширины колонок, чтобы контент не обрезался.
-1
Гм. min width, max width дейсствительно бы не помешали.
Что касается фразы «что бы контент не обрезался»— было бы здорово, если бы вы ее прокомментировали.
Что значит «обрезался» и как это определить из CSS?
-1
Тоесть надо, что бы нарушалось соотношение ширины колонок в зависимости от того есть ли там информационное наполнение? А как же типографская сетка? Она улучшает читабельность…
0
если там длинное слово или большая картинка, то сетка идёт лесом =)
тут есть три стратегии: обрезать всё, что не влезает в колонку, допускать вылезание контента в соседнюю колонку и увеличивать ширину колонки.
+1
1. Или снова вспомнить про «маленькую ложь» и все таки определить минимальную и, возможно, максимальную ширину.
2. Картинки тоже можно масштабировать. Смотри статейки на сайте робота-ниндзя :)
3. Что за слово такое, которое может разбить сетку!?

В статье рассмотрен тривиальный случай, в котором, просто показан и расписан «от» и «до» принцип работы с относительными единицами измерения. В послесловии написано, что масса проблем не освещена. И приведены материалы для дополнительного чтения.
0
1. тогда смысл статьи теряется. не правда ли? %-)
2. без привлечения яваскрипта — нельзя. попробуй пропиши картинке ширину и высоту, а потом задай wax-width. это касательно контентных картинок. ещё есть кнопки там всякие, селекты и прочие контролы, которые тоже не умеют масштабироваться, да и в общем-то не должны…
3. ru.wikipedia.org/wiki/%D0%A1%D0%B0%D0%BC%D0%BE%D0%B5_%D0%B4%D0%BB%D0%B8%D0%BD%D0%BD%D0%BE%D0%B5_%D1%81%D0%BB%D0%BE%D0%B2%D0%BE_%D1%80%D1%83%D1%81%D1%81%D0%BA%D0%BE%D0%B3%D0%BE_%D1%8F%D0%B7%D1%8B%D0%BA%D0%B0

убейте меня. я не хочу редактировать вёрстку, где всё задано в относительных единицах. это ж убиться можно — вручную пересчитывать все эти формулы и постоянно огребать проблемы при перетасовке элементов.
0
1. Не правда. «Резина» остается. Но всегда надо исходить из здравого смысла.
2. Почитай статью, о которой говорил. И сам сайт посмотри.
3. Не хочешь — не редактируй. Но ты забоишься о том, что бы не переработать, не дай бог, а не о том, что бы верстка была хорошей.
0
>попробуй пропиши картинке ширину и высоту, а потом задай wax-width.
Хоть убейте, не могу понять зачем кому то может понадобится определять размер картинки, представленной тегом img, в абсолютных величинах.

Нет, правда, почитайте статейки на сайте робота ниндзя и доолнительное чтиво.
Для очень многих проблем там предложено решение.

И, кстати, использование js не является смертным грехом.
Особенно если нормально реализована «graceful degradation» странички.
0
мдя, нахватался умных слов, а азов не знаешь… габариты обектов нужно указывать, чтобы контент не скакал по мере загрузки страницы.
0
Спасибо за ликбез.
Про скачущий контент я никогда не думал.
Но даже если так: габариты объекта, который должен изменять размер, не обязательно должны быть указаны в абсолютных единицах.
+1
я тебе щас врежу бля!
em — при изменении размера шрифта картинка тоже начнёт деформироваться.
pt — те же пиксели, но другой формы.
+1
хера о_0 шо это было?

% — не помогут для задания высоты картинки.
+1
tenshi не нервничай.
Как только освобожусь — поэксперементирую.
И либо соглашусь либо нет.
А то что то потеряна конструктивная искра.

Про pt — никогда их не испльзовал, если честно. Посмотрел в спецификации. Ты прав, а я — нет.
UFO landed and left these words here
0
ALA пишут хорошие вещи, теперь не могу определиться, на каком языке читать было проще и интереснее, автору перевода большое спасибо
+1
Кто то минусовал все без исключения.
Что бы это могло значить?
+2
1) Не обращайте внимания на такие вещи, идиотов на хабре полно, просто в силу IT-направленности ресурса, процент идиотизма немного ниже, чем везде.

2) Забейте на комментарии типа «Боян», «Это мы уже видели» и прочее гумно — да, они это видели, ну и что? Это считанные единицы, которые все знают, и все умеют. Подумайте об остальных 99% верстальщиков, особенно начинающих, которых уже сейчас можно пойти и потыкать мордой в вашу статью, чтобы хоть немного повысили свой уровень, без тупых оправданий «я низнаю онглиске!»
+1
Для начинающих — самое то. Одно время долго не мог вкурить как высчитывать em
+1
Куда-то часть материала пропала, в конце в районе дополнительной литературы.

А статья вполне себе жизнеспособна и читабельна, не верьте завистникам :) Удачи
UFO landed and left these words here
0
Использую Fluid 960 Grid System. В целом впечатления хорошие.
0
всё бы хорошо, по сталкивалась с тем, что опера округляет проценты, то биш берёт только целую часть. потому предполагаю, что сетка может поехать, если все ширины указывать в процентах
0
хм, хотя туплю, если всё-всё будет резиновое, то и нормально получится)))
Only those users with full accounts are able to leave comments.  , please.