RotorCMS + HTML5
1.
GodZiLLa (09.11.2012 / 22:48)
Думаю уже давно пора переходить на html5.
По сути, конфликтов с устаревшими браузерами нет,
а в нормальных браузерах, получаем некоторые полезные и удобные мелочи.
Не буду пока затрагивать полную вёрстку, а приведу лишь некоторые мелочи,
которые
уже применил на сайте и надеюсь, что будет применено в роторе официально.
В полях ввода данных, с добавлением некоторых значений атрибута
type=
<input name="site" type="url" value="http://" maxlength="50" /><br />
Добавлено
type="url", идёт проверка на правильность вводимого урл адреса,
а в некоторых мобильных, подставляется подходящая раскладка клавиатуры.
<input name="meil" type="email" maxlength="50" value="'.$regmeil.'" />
Добавлено
type="email", идёт проверка на правильность вводимого емайл адреса,
а в некоторых мобильных, подставляется подходящая раскладка клавиатуры.
В модуле реклама, в поле код цвета:
<input name="color" type="color" maxlength="7" />
Добавлено
type="color", получаем выбор цвета из палитры, со вставкой в 16тиричном формате.
В Опере и Хроме работает отлично. Скриншот прикреплю в следущем посте.
Ещё есть
type="search", для поисковых форм,
и очень интересное решение с
type="date", для ввода даты рождения например.
В опере работает отлично, но один минус, выводит в формате, не совместимом с роторовским (дд-мм-гггг, вместо роторовского дд.мм.гггг)
Примечание: Браузеры без поддержки этих тайпов, обрабатывают просто как type="text"
Добавлено через 07:07 сек.
Обещанные скрины, в пользовательской рекламе,
пример тайп=колор
Добавлено через 08:36 сек.
И при нажатии выбора цвета
2.
GodZiLLa (09.11.2012 / 23:56)
HTML5 охватывает новые типы ввода:
email (электронная почта)
url (адрес в интернете)
number (число)
range (диапазон)
Выбор даты: date (дата), month (месяц), week (неделя), time (время), datetime (дата и время), datetime-local (местные дата и время)
search (поиск)
color (цвет)
3.
Антон (10.11.2012 / 00:25)
1.
®_GodZiIIa_€, хорошая работа
4.
GodZiLLa (10.11.2012 / 00:41)
3.
WmLiM, спасибо )
Это только начало.
После обкатки и проверки, будет добавлятся ещё.
Продолжение следует.)
5.
GodZiLLa (10.11.2012 / 01:12)
Ну и так, копипаст, для размышления.
Сам не проверял.
Дополнительные типы и атрибуты
В
HTML5 формам добавили несколько новых типов ввода, таких как url, number и email.
Они передают параметр
valid когда пользователь вводит правильный email и так далее.
Тип
url немного по разному обрабатывается в разных браузерах.
В опере достаточно набрать “http://”, как поле помечается действительным, а в хроме оно станет валидным после “http://g”.
Есть также еще несколько атрибутов, которые помогают валидации, такие как
placeholder, required, maxlength, pattern, min, max, и step:
<input id="postcode" name="postcode" type="number" min="100000"
max="999999" maxlength="7" required />
Ограничиваем количество чисел до 7 с помощью
maxlength, и задаем диапозон с помощью
min и
max. Если не задавать иное значение
step, то по умолчанию он равен
1.
Чтобы вызвать
invalid псевдо класс на более конкретные условия, к примеру при валидации номера телефона, мы можем использовать
pattern атрибут, который позволяет применять регулярные выражения для поля формы.
<input type="tel" id="tel" name="tel" pattern="\d{11}"
placeholder="Пожалуйства введите ваш номер телефона " required />
И более сложная вариация, поле для ввода пароля.
<input id="password" name="password" type="password"
title="Минимум 8 знаков, 1 цифра, большие и маленькие буквы" required
pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*"
/>
6.
Петр (10.11.2012 / 11:05)
Проверку можно сделать и на JS.
7.
GodZiLLa (10.11.2012 / 13:39)
6.
Im-ieee, ну во первых, желательно как можно меньше использовать JS.
потому что он может быть либо отключен в браузере, либо не поддерживаться.
Во вторых, для слабого инета, js не самый лучший вариант.
Это особенно заметно в разных соцсетях, если инет слабоват, ничего сделать невозможно.
Ну и самое главное, если можно сделать средствами html, то зачем использовать js ?
8.
Петр (10.11.2012 / 14:36)
Ты же сам написал, что конфликтов с устаревшими браузерами в случае отсутствия функционала нет. На производительность такой код опять же не повлияет. HTML5, безусловно, предпочтительнее, но если нужна совместимость, то лучше JS.
9.
Артур (10.11.2012 / 14:59)
7.
®_GodZiIIa_€, а средства html5 не требуют проца? Или они полностью кроссбраузерны?
10.
GodZiLLa (10.11.2012 / 15:26)
9.
Башка, хтмл любой версии обрабатывается браузером...
11.
Артур (10.11.2012 / 15:29)
а js?
12.
GodZiLLa (10.11.2012 / 15:31)
8.
Im-ieee, js "тяжёлый", его лучше подключать как дополнительный элемент, когда средств html не хватает.
Насчёт совместимости, практически все современные браузеры, в том числе и мобильные, уже поддерживают html5, и думаю в ближайшее время будет полная поддержка.
Так что можно смело переходить не задумываясь.
13.
Артур (10.11.2012 / 15:31)
хехех )))
14.
GodZiLLa (10.11.2012 / 15:33)
11.
Башка, js тоже в браузере, но он тяжелее обрабатывается, из-за много-кода
15.
Артур (10.11.2012 / 15:35)
14.
®_GodZiIIa_€, так речь о современных арбузах идет вроде, а не о бабушкиных шарманках
16.
GodZiLLa (10.11.2012 / 15:36)
вернее загрузка js дополнительный траф.
Очень заметно на маленькой скорости инета.
Например одноглазники, напичкан js ом , на медленном инете там делать нечего.
17.
Артур (10.11.2012 / 15:37)
С IE 7 и 8 на html5 сайтах тоже делать нечего, а это более 50% рынка
18.
GodZiLLa (10.11.2012 / 15:40)
15.
Башка, ну и....???
Так вопрос в чём ?
===
Нафига куча кода js, если можно обойтись чистым html ???
Короч тема не про то, что лучше, если нужен холивар,
создавайте тему JS - VS - HTML и воюйте.
Тема про то, что можно пользовать html5, в данном случае в роторе.
Добавлено через 02:10 сек.
17.
Башка, для этих монстров есть код подгрузки js,
да и кто пользует эти корыта ?
19.
Артур (10.11.2012 / 16:02)
®_GodZiIIa_€ (10 Ноября 2012 / 15:40)
15. Башка, ну и....???
Так вопрос в чём ?
===
Нафига куча кода js, если можно обойтись чистым html ???
Короч тема не про то, что лучше, если нужен холивар,
создавайте тему JS - VS - HTML и воюйте.
Тема про то, что можно пользовать html5, в данном случае в роторе.
Добавлено через 02:10 сек.
17. Башка, для этих монстров есть код подгрузки js,
да и кто пользует эти корыта ?
- В том что современным арбузам пох на js.
- Нафига html когда можно реализовать полностью кроссбраузерно с js?
- Говорю же, 50% интернета. Речь не о школоте, а о разном контенгенте пользователей
20.
GodZiLLa (10.11.2012 / 17:35)
Башка (10 Ноября 2012 / 16:02)
- Нафига html когда можно реализовать полностью кроссбраузерно с js?
Нафига кучакода js, если есть средства хтмл....
Если тебе не нравится хтмл5, иди флуди в другой теме.
Модераторов прошу зачистить офтоп.
21.
Артур (10.11.2012 / 17:54)
При чем тут флуд или оффтоп? Вопрос темы:
"RotorCMS + HTML5
Думаю уже давно пора переходить на html5."
На что я отвечаю примерно следующее:
Еще рано переходить на html5 на rotorCMS по причине того, что:
1. HTML5 не стандартизирован;
2. Не поддерживается наиболее популярным сегодня (могу ошибаться, месяца 4 не следил за статистикой) браузером IE версий 7 и 8 и лишь плюшечно другими браузерами (каждый пилит свои плюшки, которые не поддерживают другие);
3. Жрет ОЗУ и процессор не хуже качественного JS;
4. JS плюхи можно кроссплатформить, чего не сделать с HTML5;
5. Подавляющее большинство возможностей HTML5 в современных браузерах реализуется на уровне самого JS, потому работать быстрее JS он не может в принципе, а проблема с загрузкой JS клиенту (около 50 дополнительных kb в самом запущенном случае) для современных браузеров и скоростей интернета не проблема вообще;
6. Да, если бы все браузеры поддерживали общий стандарт HTML5, то было бы вообще круто, но...
7. Дорогие авторы тем и модераторы, если вы считаете что целью темы является высказывание субъективным мнений автора и купание его в лучах славы, а объективная критика автоматически приравнивается к оффтопу и флуду, полажуй в писту такое ваше понимание интернет общения да и ваш мозг целиком.
8. ?????
9. PROFIT
22.
Петр (10.11.2012 / 18:10)
20.
®_GodZiIIa_€, на мой взгляд, ты заметно преувеличиваешь насчет размера кода и производительности JS. Вот пример из пятого сообщения, но без HTML5:
<input type="text" onkeyup="this.style.color=(/^\d{11}$/.test(this.value))?'green':'red';" value="1"/>
Не думаю, что он занимает так много места или тормозит.
23.
GodZiLLa (10.11.2012 / 19:03)
Im-ieee (10 Ноября 2012 / 18:10)
20. ®_GodZiIIa_€, на мой взгляд, ты заметно преувеличиваешь насчет размера кода и производительности JS. Вот пример из пятого сообщения, но без HTML5:
<input type="text" onkeyup="this.style.color=(/^\d{11}$/.test(this.value))?'green':'red';" value="1"/>
Не думаю, что он занимает так много места или тормозит.
Аха, и сравни с html5, только лишь type="color", и возможностей выбора цвета больше, и букавак меньше. а в купе с другими плюшками, вес js значительно больше. Значит хтмл здесь в плюсе.
Я не говорю же убрать js, совсем от js нельзя пока отказаться, но уже можно где то без него обойтись.
И офтоп это. Написал же, создавайте тему, там и холивар, js против html5,
а эта тема другой раздел и заголовок смотрим, о том, что можно перевести в роторе на хтмл5.
Браузеры все нормально держат, кто не понимает, конфликта нет.
У кого нормальный браузер, получает удобные фишки.
Если вы так влюблены в js и против хтмл5, это ваша проблема, сидите на wml и php3.
Добавлено через 01:51 сек.
Походу визави не модерируется, просил же офтоп зачистить...
24.
Артур (10.11.2012 / 19:10)
И о чем эта тема?
- Я хочу сервис создающий поисковые сайты по моему запросу!
- Но это не реально и не нужно, есть много отличных поисковиков которые справятся с этим на много лучше!
- Но это не мои поисковики!!!
25.
GodZiLLa (10.11.2012 / 19:21)
Засрали тему.
Раз никому html5 не нужен, буду сам себе делать, делиться не буду.
26.
Петр (10.11.2012 / 19:42)
®_GodZiIIa_€
Аха, и сравни с html5, только лишь type="color", и возможностей выбора цвета больше, и букавак меньше. а в купе с другими плюшками, вес js значительно больше. Значит хтмл здесь в плюсе.
Это не для type="color", а для проверки на номер
Цвет - только для примера. Вместо него можно аналогично изменять класс, и это также практически не увеличит размер кода. Кроме этого, как правило, внешний вид HTML5 элементов заметно различается в разных браузерах.
И офтоп это. Написал же, создавайте тему, там и холивар, js против html5,
а эта тема другой раздел и заголовок смотрим, о том, что можно перевести в роторе на хтмл5.
Никакого холивара нет. Ты же сам пишешь, что JS нужен, как запасной вариант, а я как раз его привел.
27.
GodZiLLa (10.11.2012 / 21:53)
Эта тема была вообще не про js.
Раз модераторов здесь нет, то и тема тогда не нужна.
Закрываю.
URL:
https://visavi.net/topics/35248