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)- В том что современным арбузам пох на js.
15. Башка, ну и....???
Так вопрос в чём ?
===
Нафига куча кода js, если можно обойтись чистым html ???
Короч тема не про то, что лучше, если нужен холивар,
создавайте тему JS - VS - HTML и воюйте.
Тема про то, что можно пользовать html5, в данном случае в роторе.
Добавлено через 02:10 сек.
17. Башка, для этих монстров есть код подгрузки js,
да и кто пользует эти корыта ?
- Нафига html когда можно реализовать полностью кроссбраузерно с js?
- Говорю же, 50% интернета. Речь не о школоте, а о разном контенгенте пользователей
20. GodZiLLa (10.11.2012 / 17:35)
Башка (10 Ноября 2012 / 16:02)Нафига кучакода js, если есть средства хтмл....
- Нафига html когда можно реализовать полностью кроссбраузерно с 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)Аха, и сравни с html5, только лишь type="color", и возможностей выбора цвета больше, и букавак меньше. а в купе с другими плюшками, вес js значительно больше. Значит хтмл здесь в плюсе.
20. ®_GodZiIIa_€, на мой взгляд, ты заметно преувеличиваешь насчет размера кода и производительности JS. Вот пример из пятого сообщения, но без HTML5:
<input type="text" onkeyup="this.style.color=(/^\d{11}$/.test(this.value))?'green':'red';" value="1"/>Не думаю, что он занимает так много места или тормозит.
Я не говорю же убрать 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_€Это не для type="color", а для проверки на номер
Аха, и сравни с html5, только лишь type="color", и возможностей выбора цвета больше, и букавак меньше. а в купе с другими плюшками, вес js значительно больше. Значит хтмл здесь в плюсе.
Цвет - только для примера. Вместо него можно аналогично изменять класс, и это также практически не увеличит размер кода. Кроме этого, как правило, внешний вид HTML5 элементов заметно различается в разных браузерах.И офтоп это. Написал же, создавайте тему, там и холивар, js против html5,
а эта тема другой раздел и заголовок смотрим, о том, что можно перевести в роторе на хтмл5.
Никакого холивара нет. Ты же сам пишешь, что JS нужен, как запасной вариант, а я как раз его привел.
27. GodZiLLa (10.11.2012 / 21:53)
Эта тема была вообще не про js.
Раз модераторов здесь нет, то и тема тогда не нужна.
Закрываю.
URL: https://visavi.net/topics/35248