Спасибо, очень кстати.
Разрабатываю новую систему фильтрации для проекта и подобный перечень очень упростит работу, да и результат, думаю, будет лучше.
Да, неплохое начало. Еще бы точность повысить и обратную связь добавить.
Последнее, судя по устройству оборудования на человеке, со временем вполне возможно.
Чтобы лучше понять, что я имею ввиду, можно привести в пример пару «автомобиль» — «автономный автомобиль».
Вы говорите о создании первого (ручное управление), а участники конкурса пытаются создать второе.
Сложность задач просто несопоставима.
Идея конкурса как раз в «полу-автономности/автономности», чтобы сделать не управляемый вручную оператором «манипулятор» (это другая тема, намного более простая), а именно робота, своеобразного помощника, которым сможет относительно самостоятельно работать во время всяких аварий, стихийных бедствий и т.п., при плохой связи и чтобы пользоваться им мог не обученный человек. Со временем робот должен становиться всё более автономным.
По поводу «я бы сделал лучше» — такие мысли часто приходят в голову, пока не попробуешь. Причем в любой области — смотришь как обычный человек играет в игру или что-то другое делает и сразу возникает желание показать «как надо», а начнешь и получается еще хуже. У меня лично, подобное часто бывает при программировании — вроде сначала задача кажется легкой, а возьмешься делать и всплывает столько проблем и подводных камней… :)
Про управления с помощью 3D очков и перчаток — вполне логичная идея для манипулятора. Кто-то даже подобное пытается реализовать, например в российском SAR-401 (пока без 3D очков, смотреть с 1:40):
Поискал информацию, написано что роботы «полу-автономные». Возможно, оператор выбирает какое действие сделать, например «закрыть кран», «открыть дверь», «идти» и робот должен его выполнить самостоятельно.
Я всё хочу заказать что-то подобное (беспроводное, в антивандальном корпусе и чтобы выглядело привычно):
Картинка
Или сразу комплект с несколькими мониторами, чтобы повесить в разных местах (около двери, в гостинной/спальне, ванной) и всегда иметь возможность услышать звонок и посмотреть кто пришел. Можно сказать, чтобы подождали минутку, сейчас открою:
Картинка
Ищятся подобные штуки в интернет-магазинах по словам «video door phone».
Про BEM написано хорошо, а вот сама верстка очень неаккуратная и со спорными моментами. Вот некоторые замечания:
— Возникает вопрос о xml-валидности кода и общей стандартизации: почему-то часть одиночных тегов написана с закрывающим слешем, а другая часть без. Я за то, чтобы везде писать /.
— Тег meta написан в коротком html5-стиле, а link по-старому.
— Очень прыгают стили и верстка: лишние пустые строчки, пробелы после двоеточия в css, вперемешку tab и пробелы, двойные пробелы и т.п.
— С фоном для .b-page кажется фейл: background-color не применится к этому блоку, так как идущий дальше background вернет это свойство к значению по-умолчанию. Пример на jsfiddle. Уже писал про использование общего свойства background и font в комментарии к посту Mirantus
— Очень удивило, что кнопка GO сделана div'ом и все это не находится в form.
— Излишнее количество классов для ссылок в основном меню. Также, семантически правильно считается оформлять меню в виде списка ul>li.
— Нет ни слова о проблеме с floating-элементами и в верстке это не учитывается.
Очень похоже, что верстка нигде не тестировалась, а писалась по-быстрому прямо в хабраредакторе :) Поэтому, есть большие сомнения, что в готовом виде она будет работать и выглядеть как на картинке (и это даже забыв про IE). Мне кажется, что для обучающих статей, рассчитанных на новичков, особенно важно уделять внимание деталям.
Воу, уровень занудства over 9000, я даже запутался :)
В HTML(5) действительно нельзя реально «закрыть» одиночный (void) тег. Закрывающей слеш поставить можно, но это ни на что не влияет и не делает одиночный тег самозакрытым. Но совет был дан исходя из логики xml (чтобы получить валидный документ), где постановка закрывающего слеша в открывающем теге закрывает его, а одиночных тегов нет вообще. Поэтому и написал «закрывать (логика xml) одиночные (логика html) теги».
P.S. Написал текст выше и понял, что это выглядит как бред (:
Не критика, а просто комментарии и мои предпочтения в верстке.
— DOCTYPE пишу в верхнем регистре. Для html5 не принципиально, но xml-парсер, например, выдаст ошибку.
— Если используете html5, то пишите meta, link короче. Также, лучше закрывать одиночные теги.
— ИЕ6 конечно умер, но я стараюсь минимально его поддерживать, поэтому вместо селекторов атрибута типа [type="text"] и других подобных вещей лучше добавлю лишний класс. Вообще, часто приходится отказываться от удобных решений в угоду совместимости.
— Логично было бы поместить nav и #heading в header. Также footer по схеме на картинке, должен быть внутри #wrapper:
— Нужно установить :visited-цвет ссылок меню, иначе их цвет может измениться, после перехода пользователя.
.top-menu a,
.top-menu a:visited {
color: #b2b2b2;
}
— Используя свойство background, обратите внимание, что если вы устанавливаете только, например цвет (background: red;), то сбросятся все другие фоновые установки у данного элемента (image, position и т.п.). Поэтому, если нужно установить только одно свойство, пишите лучше не background: red;, а конкретное свойство:
background-color: red;
— То же, кстати, касается font — используя его, но не перечисляя всё, вы рискуете, что часть свойств вернется к значениям по-умолчанию, независимо от того, что ранее вы установили их для этого элемента. Здесь можно увидеть, что я имею ввиду. У background то же поведение, поэтому лучше взять за правило использовать по-необходимости частные свойства, а не только общие.
— Нигде не увидел борьбы с floating-багом. Нужно либо добавлять clear-элемент после группы плавающих элементов, либо присваивать их контейнеру overflow: hidden;, либо использовать какой-то еще способ. Я бы еще и для старого IE пофиксил с помощью установки hasLayout (например zoom: 1;).
Ну и общие замечания — по излишнему использованию id, отсутствию независимости блоков и соответственно излишнее увлечение селекторами тегов. Не бойтесь использовать классы в любом количестве. Кстати тоже посоветую прочитать про БЭМ. Можно извлечь полезные мысли, хотя полностью концепция слишком громоздкая имхо.
Разрабатываю новую систему фильтрации для проекта и подобный перечень очень упростит работу, да и результат, думаю, будет лучше.
Последнее, судя по устройству оборудования на человеке, со временем вполне возможно.
Вы говорите о создании первого (ручное управление), а участники конкурса пытаются создать второе.
Сложность задач просто несопоставима.
По поводу «я бы сделал лучше» — такие мысли часто приходят в голову, пока не попробуешь. Причем в любой области — смотришь как обычный человек играет в игру или что-то другое делает и сразу возникает желание показать «как надо», а начнешь и получается еще хуже. У меня лично, подобное часто бывает при программировании — вроде сначала задача кажется легкой, а возьмешься делать и всплывает столько проблем и подводных камней… :)
Про управления с помощью 3D очков и перчаток — вполне логичная идея для манипулятора. Кто-то даже подобное пытается реализовать, например в российском SAR-401 (пока без 3D очков, смотреть с 1:40):
Или сразу комплект с несколькими мониторами, чтобы повесить в разных местах (около двери, в гостинной/спальне, ванной) и всегда иметь возможность услышать звонок и посмотреть кто пришел. Можно сказать, чтобы подождали минутку, сейчас открою:
Ищятся подобные штуки в интернет-магазинах по словам «video door phone».
— Возникает вопрос о xml-валидности кода и общей стандартизации: почему-то часть одиночных тегов написана с закрывающим слешем, а другая часть без. Я за то, чтобы везде писать /.
— Тег
meta
написан в коротком html5-стиле, аlink
по-старому.— Очень прыгают стили и верстка: лишние пустые строчки, пробелы после двоеточия в css, вперемешку tab и пробелы, двойные пробелы и т.п.
— С фоном для
.b-page
кажется фейл:background-color
не применится к этому блоку, так как идущий дальшеbackground
вернет это свойство к значению по-умолчанию. Пример на jsfiddle. Уже писал про использование общего свойства background и font в комментарии к посту Mirantus— Очень удивило, что кнопка GO сделана div'ом и все это не находится в
form
.— Излишнее количество классов для ссылок в основном меню. Также, семантически правильно считается оформлять меню в виде списка
ul>li
.— Нет ни слова о проблеме с floating-элементами и в верстке это не учитывается.
Очень похоже, что верстка нигде не тестировалась, а писалась по-быстрому прямо в хабраредакторе :) Поэтому, есть большие сомнения, что в готовом виде она будет работать и выглядеть как на картинке (и это даже забыв про IE). Мне кажется, что для обучающих статей, рассчитанных на новичков, особенно важно уделять внимание деталям.
В HTML(5) действительно нельзя реально «закрыть» одиночный (void) тег. Закрывающей слеш поставить можно, но это ни на что не влияет и не делает одиночный тег самозакрытым. Но совет был дан исходя из логики xml (чтобы получить валидный документ), где постановка закрывающего слеша в открывающем теге закрывает его, а одиночных тегов нет вообще. Поэтому и написал «закрывать (логика xml) одиночные (логика html) теги».
P.S. Написал текст выше и понял, что это выглядит как бред (:
— DOCTYPE пишу в верхнем регистре. Для html5 не принципиально, но xml-парсер, например, выдаст ошибку.
— Если используете html5, то пишите
meta
,link
короче. Также, лучше закрывать одиночные теги.— ИЕ6 конечно умер, но я стараюсь минимально его поддерживать, поэтому вместо селекторов атрибута типа
[type="text"]
и других подобных вещей лучше добавлю лишний класс. Вообще, часто приходится отказываться от удобных решений в угоду совместимости.— Логично было бы поместить
nav
и#heading
вheader
. Такжеfooter
по схеме на картинке, должен быть внутри#wrapper
:— Нужно установить
:visited
-цвет ссылок меню, иначе их цвет может измениться, после перехода пользователя.— Используя свойство
background
, обратите внимание, что если вы устанавливаете только, например цвет (background: red;
), то сбросятся все другие фоновые установки у данного элемента (image
,position
и т.п.). Поэтому, если нужно установить только одно свойство, пишите лучше неbackground: red;
, а конкретное свойство:— То же, кстати, касается
font
— используя его, но не перечисляя всё, вы рискуете, что часть свойств вернется к значениям по-умолчанию, независимо от того, что ранее вы установили их для этого элемента. Здесь можно увидеть, что я имею ввиду. У background то же поведение, поэтому лучше взять за правило использовать по-необходимости частные свойства, а не только общие.— Нигде не увидел борьбы с floating-багом. Нужно либо добавлять clear-элемент после группы плавающих элементов, либо присваивать их контейнеру
overflow: hidden;
, либо использовать какой-то еще способ. Я бы еще и для старого IE пофиксил с помощью установки hasLayout (напримерzoom: 1;
).Ну и общие замечания — по излишнему использованию id, отсутствию независимости блоков и соответственно излишнее увлечение селекторами тегов. Не бойтесь использовать классы в любом количестве. Кстати тоже посоветую прочитать про БЭМ. Можно извлечь полезные мысли, хотя полностью концепция слишком громоздкая имхо.
P.S. Комментария моего комментария приветствуются :)