Извините, ничего не найдено.

Не расстраивайся! Лучше выпей чайку!
Регистрация
Справка
Календарь

Вернуться   forum.boolean.name > Веб-программирование > Общее

Общее Веб-разработка в целом, идеи, проекты...

Ответ
 
Опции темы
Старый 26.11.2012, 23:51   #1
moka
.
 
Регистрация: 05.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений
(для 6,863 пользователей)
Responsive Design

Responsive Design - это техника при разработке веб-сайтов для адоптации дизайна под разные разрешения экранов и платформ, без необходимости производить разные страницы для разных платформ.

Тот же HTML, тот же JS, всё то же, только разное отображение контента.

Это весьма популярное движение в последнее время, и многие сейчас смотрят в направлении разработки Responsive Design вебсайтов. Стоимость конечно выше, и сложность тоже выше, но результат того стоит.



Почитать можно в гугле более детально если нужно.
Также вот отличные примеры:
1. http://www.bostonglobe.com/
2. http://www.smashingmagazine.com/
3. http://foodsense.is/ (non-Fluid контент не адаптируется под всю ширину экрана, а только меняет стейты CSS)
4. http://css-tricks.com/
5. http://oliverrussell.com/
И куча других в гугле.

Я сейчас работаю над Template'ом для дальнейшего использования, без media-query, т.к. он не везде держится. Использую JS и небольшой хак с пустым div'ом и шириной 100% для стабильного детекта реальной ширины экрана как на десктопах так и на мобильных.
Вот пример страницы: http://moka.co/responsive/
Также вот ещё делаю Tool'зу http://moka.co/restest/ , которых и так полно, но для само-образования написал свою, тем более могу её улучшать под свои нужды. По сути это "мини-броузер", с возможностью изменять размер окна.
Сверху можно выбрать популярные платформы. Также задать своё разрешение.

Если есть вопросы, спрашивайте, я эту теми исследую уже вторую неделю, перепробовал не мало техник..

Последний раз редактировалось moka, 27.11.2012 в 19:08.
(Offline)
 
Ответить с цитированием
Сообщение было полезно следующим пользователям:
YellowAfterlife (02.12.2012)
Старый 27.11.2012, 02:07   #2
jimon
 
Сообщений: n/a
Ответ: Responsive Design

пришел, увидел .Simpliste, сказал "ГОСПОДА, ЭТО ВИН", ушел

ps. думаю на этот шаблон накрутить histone.js и highlight.js, странички будут в json'е, и подсветка синтаксиса на ура
 
Ответить с цитированием
Сообщение было полезно следующим пользователям:
YellowAfterlife (02.12.2012)
Старый 02.12.2012, 02:34   #3
YellowAfterlife
ПроЭктировщик
 
Аватар для YellowAfterlife
 
Регистрация: 19.02.2011
Сообщений: 134
Написано 81 полезных сообщений
(для 219 пользователей)
Ответ: Responsive Design

Ранее уже видел данные вещи;

Некоторые источники говорят, что из типичных браузеров media query не поддерживаются лишь на IE <= 8, и, как следовало бы ожидать, кто-то уже написал скрипт для возмещения этого.
С моей точки зрения, лучше оставлять данные вещи на совесть браузера, нежели на JavaScript, который может оказаться выключенным или неработоспособным по какой-либо причине.

Не предавая традиции стандартных шаблонов WordPress, на моем сайте так же реализована подстройка под размер экрана, заключающаяся в слиянии обоих "столбиков" (содержимое и меню) для <= 800px и в дополнительной корректировке размера текста для <= 650px.
Порой становится интересным вопросом, что будет более неприятно для пользователя - прокрутить страницу горизонтально вправо\влево на один экран для неуместившегося меню, или прокрутить ее вертикально на большее количество экранов ради съехавшего вниз\вверх содержимого.

Относительно
Сообщение от MoKa Посмотреть сообщение
Я сейчас работаю над Template'ом для дальнейшего использования, без media-query, т.к. он не везде держится. Использую JS и небольшой хак с пустым div'ом и шириной 100% для стабильного детекта реальной ширины экрана как на десктопах так и на мобильных.
Вот пример страницы: http://moka.co/responsive/
* Для CSS свойств без префикса дефис в начале не ставится ("transform", не "-transform").
* Не знаю, как будет позже, но пока что использование jQuery выглядит немного необоснованным, в меру включения ради лишь нескольких вызовов (создание <div>, нахождение элемента по индексу, установка стиля). Вспоминается эта шутка с StackOverflow:


Так же стоит заметить что представленный инструмент,
Сообщение от MoKa Посмотреть сообщение
Также вот ещё делаю Tool'зу http://moka.co/restest/ , которых и так полно, но для само-образования написал свою, тем более могу её улучшать под свои нужды. По сути это "мини-броузер", с возможностью изменять размер окна.
Сверху можно выбрать популярные платформы. Также задать своё разрешение.
уже довольно интересен. В определенной степени даже опережает стандартный отладчик в Chrome. Единственный замеченный минус заключается в том, что в зависимости от стиля рисования шрифта текст может не влезать в форму "информации". Добавил в закладки.

Так же, как мне кажется, в первом предложении должно быть слово "адаптация".

Сообщение от jimon Посмотреть сообщение
пришел, увидел .Simpliste, сказал "ГОСПОДА, ЭТО ВИН", ушел
Довольно знаменательный дизайн. Некоторые вариации выглядят для меня гораздо более практичными чем иные, но, думаю, это дело вкуса.
Каким-то образом, за последнюю неделю я наткнулся на большее количество творческого использования border и border-radius чем за предшествующие полгода.
__________________

Мой сайт-блог. Игры, обновления, примеры для Haxe, JavaScript(+HTML5), GameMaker, Love2d...
(Offline)
 
Ответить с цитированием
Сообщение было полезно следующим пользователям:
moka (02.12.2012)
Старый 02.12.2012, 05:51   #4
Randomize
[object Object]
 
Аватар для Randomize
 
Регистрация: 01.08.2008
Адрес: В России
Сообщений: 4,354
Написано 2,470 полезных сообщений
(для 6,850 пользователей)
Ответ: Responsive Design

Сообщение от jimon Посмотреть сообщение
пришел, увидел .Simpliste, сказал "ГОСПОДА, ЭТО ВИН", ушел

ps. думаю на этот шаблон накрутить histone.js и highlight.js, странички будут в json'е, и подсветка синтаксиса на ура
Причём тут это?
И что нам предлагает автор этого .Simpliste?
__________________
Retry, Abort, Ignore? █
Intel Core i7-9700 4.70 Ghz; 64Gb; Nvidia RTX 3070
AMD Ryzen 7 3800X 4.3Ghz; 64Gb; Nvidia 1070Ti
AMD Ryzen 7 1700X 3.4Ghz; 8Gb; AMD RX 570
AMD Athlon II 2.6Ghz; 8Gb; Nvidia GTX 750 Ti
(Offline)
 
Ответить с цитированием
Старый 02.12.2012, 06:59   #5
jimon
 
Сообщений: n/a
Ответ: Responsive Design

Сообщение от Randomize Посмотреть сообщение
Причём тут это?
И что нам предлагает автор этого .Simpliste?
мм, а прочитать не судьба ?

Clean code

HTML5 and CSS3 made live of web developers easier than ever. Welcome to the world where less code and less files required. “Simpliste” has different skins and all of them are created with no images for styling at all.

Template contains CSS-reset based on the reset file from HTML5 boilerplate which makes appearens of “Simpliste” skins consistent in different browsers.

Print styles and styles for mobile devices are already included in the stylesheet.
Responsive markup

You know that now it's time to think more about your users with mobile devices. This template will make your site respond to your client's browser with no effort on your part.

Multi-column layout becomes one column for viewers with tablets, navigation elements become bigger for users with smartphones. And your desktop browser users will see just a normal web site.

Try changing the width of your browser window and you'll see how “Simpliste” works.
 
Ответить с цитированием
Старый 02.12.2012, 08:57   #6
ABTOMAT
Ференька
 
Аватар для ABTOMAT
 
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений
(для 15,675 пользователей)
Ответ: Responsive Design

> Clean code
Само собой разумеется
> with no effort on your part
Враньё. Как я вижу, там всё построено на процентах: Сделал в ряд три col_33 - получил три респонсив блока на 1/3 ширины и далее по такому же принципу. А у меня в дизайне нарисованы блоки ширины не 33/50%, а другой. Или вовсе не колоночная вёрстка. И что тогда, куда прибыть, какой кабинет? В-общем накладывает ограничения.
Вот такое хочу сделать responsive и with no effort: http://centralcityopera.org/calendar при помощи этого щячла, возможно?
(Offline)
 
Ответить с цитированием
Старый 02.12.2012, 08:58   #7
Randomize
[object Object]
 
Аватар для Randomize
 
Регистрация: 01.08.2008
Адрес: В России
Сообщений: 4,354
Написано 2,470 полезных сообщений
(для 6,850 пользователей)
Ответ: Responsive Design

Сообщение от jimon Посмотреть сообщение
мм, а прочитать не судьба ?
Я то прочёл. Видать ты тоже прочитал, но смысл истолковал неправильно.
Автор предлагает на 1 респонсивно-свёрстанную страницу и пачку css к ней с разными стилями! Ой спасибо! Респонсивную вёрстку для какой-либо одной страницы любой сделает. Попробуй построить принципиально другую страницу и всё - приехали.

А на счёт винов из коропки: http://twitter.github.com/bootstrap/
Куда более продуманная вещь чем симплсайт "от Вована".
__________________
Retry, Abort, Ignore? █
Intel Core i7-9700 4.70 Ghz; 64Gb; Nvidia RTX 3070
AMD Ryzen 7 3800X 4.3Ghz; 64Gb; Nvidia 1070Ti
AMD Ryzen 7 1700X 3.4Ghz; 8Gb; AMD RX 570
AMD Athlon II 2.6Ghz; 8Gb; Nvidia GTX 750 Ti
(Offline)
 
Ответить с цитированием
Старый 02.12.2012, 15:28   #8
jimon
 
Сообщений: n/a
Ответ: Responsive Design

Враньё. Как я вижу, там всё построено на процентах: Сделал в ряд три col_33 - получил три респонсив блока на 1/3 ширины и далее по такому же принципу. А у меня в дизайне нарисованы блоки ширины не 33/50%, а другой. Или вовсе не колоночная вёрстка. И что тогда, куда прибыть, какой кабинет? В-общем накладывает ограничения.
ограничения позволяют делать вещи быстрее, готовы колонки на 33% и 50% значит сверстать такое займет 2 минуты, а верстать новую разметку будет занимать больше времени

ох*енные сайты господа, оба безбожно тормозят на компе 4 летней давности, я смотрю у вас прогресс
 
Ответить с цитированием
Старый 02.12.2012, 19:24   #9
ABTOMAT
Ференька
 
Аватар для ABTOMAT
 
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений
(для 15,675 пользователей)
Ответ: Responsive Design

Сообщение от jimon Посмотреть сообщение
ограничения позволяют делать вещи быстрее, готовы колонки на 33% и 50% значит сверстать такое займет 2 минуты, а верстать новую разметку будет занимать больше времени
Ты по дизаену верстал хоть раз, может быть?
(Offline)
 
Ответить с цитированием
Старый 02.12.2012, 19:31   #10
jimon
 
Сообщений: n/a
Ответ: Responsive Design

Сообщение от ABTOMAT Посмотреть сообщение
Ты по дизаену верстал хоть раз, может быть?
ну если говорить про обычные будни верстальщика "на макет, сделай сайт" то нет и не хочу, а если дизайнер рисует при мне то говорю как быстрее всего будет сделать, таким же способом интерфейс в играх делают
 
Ответить с цитированием
Старый 02.12.2012, 23:36   #11
ABTOMAT
Ференька
 
Аватар для ABTOMAT
 
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений
(для 15,675 пользователей)
Ответ: Responsive Design

Тогда почему у тебя свой игровой движок? Бери юнити же, так быстрее, там есть плугин, который делает %действиенейм%!
(Offline)
 
Ответить с цитированием
Ответ


Опции темы

Ваши права в разделе
Вы не можете создавать темы
Вы не можете отвечать на сообщения
Вы не можете прикреплять файлы
Вы не можете редактировать сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.


Часовой пояс GMT +4, время: 12:38.


vBulletin® Version 3.6.5.
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Перевод: zCarot
Style crйe par Allan - vBulletin-Ressources.com